oak-team/oak-gpui
3
0
Fork 0
Code Issues Pull Requests 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
Download Patch File Download Diff File Expand all files Collapse all files
styles/src/themes/ayu-dark.ts
+15
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)
styles/src/themes/ayu-light.ts
+15
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)
styles/src/themes/ayu-mirage.ts
+15
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)
styles/src/themes/common/ayu-common.ts
+74
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() },
}
}
styles/src/themes/staff/ayu-mirage.ts
-31
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")),
})
styles/src/themes/staff/ayu.ts
-52
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")),
})