zed-industries/zed
1
1
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-09-16 00:47:39 +03:00
Code Issues Packages Projects Releases Wiki Activity

Update + publish the Ayu theme

Browse Source
This commit is contained in:
Nate Butler 2023-04-11 12:22:49 -04:00
parent 0e4de87e0e
commit 527f0310e2
8 changed files with 151 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
styles/package-lock.json generated
View File

@ -11,6 +11,7 @@
"dependencies": {
"@types/chroma-js": "^2.4.0",
"@types/node": "^18.14.1",
"ayu": "^8.0.1",
"bezier-easing": "^2.1.0",
"case-anything": "^2.1.10",
"chroma-js": "^2.4.2",
@ -106,6 +107,16 @@
"resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
"integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA=="
},
"node_modules/ayu": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/ayu/-/ayu-8.0.1.tgz",
"integrity": "sha512-yuPZ2kZYQoYaPRQ/78F9rXDVx1rVGCJ1neBYithBoSprD6zPdIJdAKizUXG0jtTBu7nTFyAnVFFYuLnCS3cpDw==",
"dependencies": {
"@types/chroma-js": "^2.0.0",
"chroma-js": "^2.1.0",
"nonenumerable": "^1.1.1"
}
},
"node_modules/bezier-easing": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
@ -153,6 +164,11 @@
"resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
"integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
},
"node_modules/nonenumerable": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/nonenumerable/-/nonenumerable-1.1.1.tgz",
"integrity": "sha512-ptUD9w9D8WqW6fuJJkZNCImkf+0vdbgUTbRK3i7jsy3olqtH96hYE6Q/S3Tx9NWbcB/ocAjYshXCAUP0lZ9B4Q=="
},
"node_modules/toml": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz",
@ -300,6 +316,16 @@
"resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
"integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA=="
},
"ayu": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/ayu/-/ayu-8.0.1.tgz",
"integrity": "sha512-yuPZ2kZYQoYaPRQ/78F9rXDVx1rVGCJ1neBYithBoSprD6zPdIJdAKizUXG0jtTBu7nTFyAnVFFYuLnCS3cpDw==",
"requires": {
"@types/chroma-js": "^2.0.0",
"chroma-js": "^2.1.0",
"nonenumerable": "^1.1.1"
}
},
"bezier-easing": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
@ -335,6 +361,11 @@
"resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
"integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
},
"nonenumerable": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/nonenumerable/-/nonenumerable-1.1.1.tgz",
"integrity": "sha512-ptUD9w9D8WqW6fuJJkZNCImkf+0vdbgUTbRK3i7jsy3olqtH96hYE6Q/S3Tx9NWbcB/ocAjYshXCAUP0lZ9B4Q=="
},
"toml": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz",

1
styles/package.json
View File

@ -12,6 +12,7 @@
"dependencies": {
"@types/chroma-js": "^2.4.0",
"@types/node": "^18.14.1",
"ayu": "^8.0.1",
"bezier-easing": "^2.1.0",
"case-anything": "^2.1.10",
"chroma-js": "^2.4.2",

15
styles/src/themes/ayu-dark.ts Normal file
View File

@ -0,0 +1,15 @@
import { createColorScheme } from "../common/ramps"
import { ayu, buildTheme } from "../common/ayu-common"
const name = "Ayu"
const author = "Konstantin Pschera <me@kons.ch>"
const url = "https://github.com/ayu-theme/ayu-colors"
const license = {
type: "MIT",
url: "https://github.com/ayu-theme/ayu-colors/blob/master/license",
}
const variant = ayu.dark
const theme = buildTheme(variant, false)
export const dark = createColorScheme(`${name} Dark`, false, theme.ramps, theme.syntax)

15
styles/src/themes/ayu-light.ts Normal file
View File

@ -0,0 +1,15 @@
import { createColorScheme } from "../common/ramps"
import { ayu, buildTheme } from "../common/ayu-common"
const name = "Ayu"
const author = "Konstantin Pschera <me@kons.ch>"
const url = "https://github.com/ayu-theme/ayu-colors"
const license = {
type: "MIT",
url: "https://github.com/ayu-theme/ayu-colors/blob/master/license",
}
const variant = ayu.light
const theme = buildTheme(variant, true)
export const light = createColorScheme(`${name} Light`, true, theme.ramps, theme.syntax)

15
styles/src/themes/ayu-mirage.ts Normal file
View File

@ -0,0 +1,15 @@
import { createColorScheme } from "../common/ramps"
import { ayu, buildTheme } from "../common/ayu-common"
const name = "Ayu"
const author = "Konstantin Pschera <me@kons.ch>"
const url = "https://github.com/ayu-theme/ayu-colors"
const license = {
type: "MIT",
url: "https://github.com/ayu-theme/ayu-colors/blob/master/license",
}
const variant = ayu.mirage
const theme = buildTheme(variant, false)
export const dark = createColorScheme(`${name} Mirage`, false, theme.ramps, theme.syntax)

74
styles/src/themes/common/ayu-common.ts Normal file
View File

@ -0,0 +1,74 @@
import { dark, light, mirage } from 'ayu'
import { ThemeSyntax } from './syntax'
import chroma from 'chroma-js'
import { colorRamp } from './ramps'
export const ayu = {
dark,
light,
mirage
}
export const buildTheme = (t: typeof dark, light: boolean) => {
const color = {
lightBlue: t.syntax.tag.hex(),
yellow: t.syntax.func.hex(),
blue: t.syntax.entity.hex(),
green: t.syntax.string.hex(),
teal: t.syntax.regexp.hex(),
red: t.syntax.markup.hex(),
orange: t.syntax.keyword.hex(),
lightYellow: t.syntax.special.hex(),
gray: t.syntax.comment.hex(),
purple: t.syntax.constant.hex(),
}
const syntax: ThemeSyntax = {
constant: { color: t.syntax.constant.hex() },
"string.regex": { color: t.syntax.regexp.hex() },
string: { color: t.syntax.string.hex() },
comment: { color: t.syntax.comment.hex() },
keyword: { color: t.syntax.keyword.hex() },
operator: { color: t.syntax.operator.hex() },
number: { color: t.syntax.constant.hex() },
type: { color: color.blue },
boolean: { color: color.purple },
"punctuation.special": { color: color.purple },
"string.special": { color: t.syntax.special.hex() },
function: { color: t.syntax.func.hex() },
}
return {
ramps: {
neutral: chroma.scale([
light ? t.editor.fg.hex() : t.editor.bg.hex(),
light ? t.editor.bg.hex() : t.editor.fg.hex(),
]),
red: colorRamp(chroma(color.red)),
orange: colorRamp(chroma(color.orange)),
yellow: colorRamp(chroma(color.yellow)),
green: colorRamp(chroma(color.green)),
cyan: colorRamp(chroma(color.teal)),
blue: colorRamp(chroma(color.blue)),
violet: colorRamp(chroma(color.purple)),
magenta: colorRamp(chroma(color.lightBlue)),
},
syntax
}
}
export const buildSyntax = (t: typeof dark): ThemeSyntax => {
return {
constant: { color: t.syntax.constant.hex() },
"string.regex": { color: t.syntax.regexp.hex() },
string: { color: t.syntax.string.hex() },
comment: { color: t.syntax.comment.hex() },
keyword: { color: t.syntax.keyword.hex() },
operator: { color: t.syntax.operator.hex() },
number: { color: t.syntax.constant.hex() },
type: { color: t.syntax.regexp.hex() },
"punctuation.special": { color: t.syntax.special.hex() },
"string.special": { color: t.syntax.special.hex() },
function: { color: t.syntax.func.hex() },
}
}

31
styles/src/themes/staff/ayu-mirage.ts
View File

@ -1,31 +0,0 @@
import chroma from "chroma-js"
import { colorRamp, createColorScheme } from "../common/ramps"
const name = "Ayu"
const author = "Konstantin Pschera <me@kons.ch>"
const url = "https://github.com/ayu-theme/ayu-colors"
const license = {
type: "MIT",
url: "https://github.com/ayu-theme/ayu-colors/blob/master/license",
}
export const dark = createColorScheme(`${name} Mirage`, false, {
neutral: chroma.scale([
"#171B24",
"#1F2430",
"#242936",
"#707A8C",
"#8A9199",
"#CCCAC2",
"#D9D7CE",
"#F3F4F5",
]),
red: colorRamp(chroma("#F28779")),
orange: colorRamp(chroma("#FFAD66")),
yellow: colorRamp(chroma("#FFD173")),
green: colorRamp(chroma("#D5FF80")),
cyan: colorRamp(chroma("#95E6CB")),
blue: colorRamp(chroma("#5CCFE6")),
violet: colorRamp(chroma("#D4BFFF")),
magenta: colorRamp(chroma("#F29E74")),
})

52
styles/src/themes/staff/ayu.ts
View File

@ -1,52 +0,0 @@
import chroma from "chroma-js"
import { colorRamp, createColorScheme } from "../common/ramps"
const name = "Ayu"
const author = "Konstantin Pschera <me@kons.ch>"
const url = "https://github.com/ayu-theme/ayu-colors"
const license = {
type: "MIT",
url: "https://github.com/ayu-theme/ayu-colors/blob/master/license",
}
export const dark = createColorScheme(`${name} Dark`, false, {
neutral: chroma.scale([
"#0F1419",
"#131721",
"#272D38",
"#3E4B59",
"#BFBDB6",
"#E6E1CF",
"#E6E1CF",
"#F3F4F5",
]),
red: colorRamp(chroma("#F07178")),
orange: colorRamp(chroma("#FF8F40")),
yellow: colorRamp(chroma("#FFB454")),
green: colorRamp(chroma("#B8CC52")),
cyan: colorRamp(chroma("#95E6CB")),
blue: colorRamp(chroma("#59C2FF")),
violet: colorRamp(chroma("#D2A6FF")),
magenta: colorRamp(chroma("#E6B673")),
})
export const light = createColorScheme(`${name} Light`, true, {
neutral: chroma.scale([
"#1A1F29",
"#242936",
"#5C6773",
"#828C99",
"#ABB0B6",
"#F8F9FA",
"#F3F4F5",
"#FAFAFA",
]),
red: colorRamp(chroma("#F07178")),
orange: colorRamp(chroma("#FA8D3E")),
yellow: colorRamp(chroma("#F2AE49")),
green: colorRamp(chroma("#86B300")),
cyan: colorRamp(chroma("#4CBF99")),
blue: colorRamp(chroma("#36A3D9")),
violet: colorRamp(chroma("#A37ACC")),
magenta: colorRamp(chroma("#E6BA7E")),
})