mirror of
https://github.com/zed-industries/zed.git
synced 2024-12-24 17:28:40 +00:00
Update + publish the Ayu theme
This commit is contained in:
Nate Butler
parent
0e4de87e0e
commit
527f0310e2
8 changed files with 151 additions and 83 deletions
31
styles/package-lock.json
generated
31
styles/package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
15
styles/src/themes/ayu-dark.ts
Normal 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
15
styles/src/themes/ayu-light.ts
Normal 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
15
styles/src/themes/ayu-mirage.ts
Normal 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
74
styles/src/themes/common/ayu-common.ts
Normal 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() },
|
||||
}
|
||||
}
|
||||
|
|
@ -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")),
|
||||
})
|
||||
|
|
@ -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")),
|
||||
})
|
||||
Loading…
Reference in a new issue