Compare commits

...

3 Commits

Author SHA1 Message Date
Adam
8427f890e6 chore: cleanup 2026-03-26 14:23:54 -05:00
Adam
bb9b920741 wip(app): new color gen 2026-03-26 14:21:29 -05:00
Adam
5bee79cbc8 wip(app): simplify color gen 2026-03-26 14:21:29 -05:00
44 changed files with 493 additions and 793 deletions

View File

@@ -240,7 +240,6 @@ export const Terminal = (props: TerminalProps) => {
const currentTheme = theme.themes()[theme.themeId()]
if (!currentTheme) return fallback
const variant = mode === "dark" ? currentTheme.dark : currentTheme.light
if (!variant?.seeds && !variant?.palette) return fallback
const resolved = resolveThemeVariant(variant, mode === "dark")
const text = resolved["text-stronger"] ?? fallback.foreground
const background = resolved["background-stronger"] ?? fallback.background

View File

@@ -100,6 +100,23 @@ export function hexToOklch(hex: HexColor): OklchColor {
return rgbToOklch(r, g, b)
}
function mix(a: OklchColor, b: OklchColor, t: number): OklchColor {
const delta = ((((b.h - a.h) % 360) + 540) % 360) - 180
return {
l: a.l + (b.l - a.l) * t,
c: a.c + (b.c - a.c) * t,
h: a.h + delta * t,
}
}
function paint(base: OklchColor, tone: OklchColor, c: number, max: number): OklchColor {
return fitOklch({
l: tone.l,
c: Math.min(max, Math.max(tone.c, base.c * c)),
h: base.h,
})
}
export function fitOklch(oklch: OklchColor): OklchColor {
const base = {
l: clamp(oklch.l, 0, 1),
@@ -132,87 +149,54 @@ export function oklchToHex(oklch: OklchColor): HexColor {
export function generateScale(seed: HexColor, isDark: boolean): HexColor[] {
const base = hexToOklch(seed)
const scale: HexColor[] = []
const tint = isDark
? [0.029, 0.064, 0.11, 0.174, 0.263, 0.382, 0.542, 0.746]
: [0.018, 0.042, 0.082, 0.146, 0.238, 0.368, 0.542, 0.764]
const shade = isDark ? [0, 0.115, 0.524, 0.871] : [0, 0.124, 0.514, 0.83]
const curve = isDark
? [0.48, 0.58, 0.69, 0.82, 0.94, 1.05, 1.16, 1.23, 1.04, 0.97, 0.82, 0.6]
: [0.24, 0.32, 0.42, 0.56, 0.72, 0.88, 1.04, 1.14, 1, 0.94, 0.82, 0.64]
const mid = fitOklch({
l: clamp(base.l + (isDark ? 0.009 : 0), isDark ? 0.61 : 0.5, isDark ? 0.75 : 0.68),
c: clamp(base.c * (isDark ? 1.04 : 1), 0, isDark ? 0.29 : 0.26),
h: base.h,
})
const bg = fitOklch({
l: isDark ? clamp(0.13 + base.c * 0.065, 0.11, 0.175) : clamp(0.995 - base.c * 0.1, 0.962, 0.995),
c: Math.min(base.c * (isDark ? 0.38 : 0.18), isDark ? 0.07 : 0.03),
h: base.h,
})
const fg = fitOklch({
l: isDark ? 0.952 : 0.24,
c: Math.min(mid.c * (isDark ? 0.55 : 0.72), isDark ? 0.13 : 0.14),
h: base.h,
})
const lightSteps = isDark
? [
0.118,
0.138,
0.167,
0.202,
0.246,
0.304,
0.378,
0.468,
clamp(base.l * 0.825, 0.53, 0.705),
clamp(base.l * 0.89, 0.61, 0.79),
clamp(base.l + 0.033, 0.868, 0.943),
0.984,
]
: [0.993, 0.983, 0.962, 0.936, 0.906, 0.866, 0.811, 0.74, base.l, Math.max(0, base.l - 0.036), 0.49, 0.27]
const chromaMultipliers = isDark
? [0.52, 0.68, 0.86, 1.02, 1.14, 1.24, 1.36, 1.48, 1.56, 1.64, 1.62, 1.15]
: [0.12, 0.24, 0.46, 0.68, 0.84, 0.98, 1.08, 1.16, 1.22, 1.26, 1.18, 0.98]
for (let i = 0; i < 12; i++) {
scale.push(
oklchToHex({
l: lightSteps[i],
c: base.c * chromaMultipliers[i],
h: base.h,
}),
)
}
return scale
return [
...tint.map((step, i) => oklchToHex(paint(base, mix(bg, mid, step), curve[i]!, isDark ? 0.32 : 0.28))),
...shade.map((step, i) =>
oklchToHex(paint(base, mix(mid, fg, step), curve[i + tint.length]!, isDark ? 0.32 : 0.28)),
),
]
}
export function generateNeutralScale(seed: HexColor, isDark: boolean, ink?: HexColor): HexColor[] {
if (ink) {
const base = hexToOklch(seed)
const lift = (tone: number) =>
oklchToHex({
l: base.l + (1 - base.l) * tone,
c: base.c * Math.max(0, 1 - tone),
h: base.h,
})
const sink = (tone: number) =>
oklchToHex({
l: base.l * (1 - tone),
c: base.c * Math.max(0, 1 - tone * (isDark ? 0.12 : 0.3)),
h: base.h,
})
const bg = isDark
? sink(clamp(0.19 + Math.max(0, base.l - 0.12) * 0.33 + base.c * 1.95, 0.17, 0.27))
: base.l < 0.82
? lift(0.86)
: lift(clamp(0.1 + base.c * 3.2 + Math.max(0, 0.95 - base.l) * 0.35, 0.1, 0.28))
const steps = isDark
? [0, 0.018, 0.039, 0.064, 0.097, 0.143, 0.212, 0.31, 0.46, 0.649, 0.845, 0.984]
: [0, 0.022, 0.042, 0.068, 0.102, 0.146, 0.208, 0.296, 0.432, 0.61, 0.81, 0.965]
return steps.map((step) => mixColors(bg, ink, step))
}
export function generateNeutralScale(seed: HexColor, isDark: boolean): HexColor[] {
const base = hexToOklch(seed)
const scale: HexColor[] = []
const neutralChroma = Math.min(base.c, isDark ? 0.068 : 0.04)
const stop = isDark
? [0, 0.02, 0.046, 0.086, 0.142, 0.218, 0.322, 0.461, 0.631, 0.777, 0.889, 0.975]
: [0, 0.016, 0.036, 0.064, 0.104, 0.158, 0.23, 0.336, 0.486, 0.668, 0.822, 0.984]
const bg = fitOklch({
l: isDark ? clamp(base.l * 0.79 + base.c * 0.02, 0.09, 0.19) : clamp(base.l, 0.965, 0.995),
c: Math.min(base.c * (isDark ? 1 : 1), isDark ? 0.05 : 0.02),
h: base.h,
})
const fg = fitOklch({
l: isDark ? 0.956 : 0.18,
c: Math.min(base.c * (isDark ? 0.75 : 0.54), isDark ? 0.055 : 0.04),
h: base.h,
})
const lightSteps = isDark
? [0.138, 0.156, 0.178, 0.202, 0.232, 0.272, 0.326, 0.404, clamp(base.l * 0.83, 0.43, 0.55), 0.596, 0.719, 0.956]
: [0.991, 0.979, 0.964, 0.946, 0.931, 0.913, 0.891, 0.83, base.l, 0.617, 0.542, 0.205]
for (let i = 0; i < 12; i++) {
scale.push(
oklchToHex({
l: lightSteps[i],
c: neutralChroma,
h: base.h,
}),
)
}
return scale
return stop.map((step) => oklchToHex(mix(bg, fg, step)))
}
export function generateAlphaScale(scale: HexColor[], isDark: boolean): HexColor[] {
@@ -234,15 +218,7 @@ export function generateAlphaScale(scale: HexColor[], isDark: boolean): HexColor
}
export function mixColors(color1: HexColor, color2: HexColor, amount: number): HexColor {
const c1 = hexToOklch(color1)
const c2 = hexToOklch(color2)
const delta = ((((c2.h - c1.h) % 360) + 540) % 360) - 180
return oklchToHex({
l: c1.l + (c2.l - c1.l) * amount,
c: c1.c + (c2.c - c1.c) * amount,
h: c1.h + delta * amount,
})
return oklchToHex(mix(hexToOklch(color1), hexToOklch(color2), amount))
}
export function shift(color: HexColor, value: { l?: number; c?: number; h?: number }): HexColor {

View File

@@ -41,9 +41,9 @@
},
"ThemeSeedColors": {
"type": "object",
"description": "The legacy semantic seed set used to generate a theme",
"description": "The semantic seed set used to generate a theme",
"additionalProperties": false,
"required": ["neutral", "primary", "success", "warning", "error", "info", "interactive", "diffAdd", "diffDelete"],
"required": ["neutral", "primary", "success", "warning", "error", "info"],
"properties": {
"neutral": {
"$ref": "#/definitions/HexColor",
@@ -69,65 +69,17 @@
"$ref": "#/definitions/HexColor",
"description": "Informational state color (typically purple/blue)"
},
"interactive": {
"$ref": "#/definitions/HexColor",
"description": "Interactive element color (links, buttons)"
},
"diffAdd": {
"$ref": "#/definitions/HexColor",
"description": "Color for diff additions"
},
"diffDelete": {
"$ref": "#/definitions/HexColor",
"description": "Color for diff deletions"
}
}
},
"ThemePaletteColors": {
"type": "object",
"description": "A compact semantic palette used to derive the full theme programmatically",
"additionalProperties": false,
"required": ["neutral", "ink", "primary", "success", "warning", "error", "info"],
"properties": {
"neutral": {
"$ref": "#/definitions/HexColor",
"description": "Base neutral color for generating the gray scale"
},
"ink": {
"$ref": "#/definitions/HexColor",
"description": "Foreground or chrome color used to derive text and border tones"
},
"primary": {
"$ref": "#/definitions/HexColor",
"description": "Primary brand color used for brand surfaces and strong emphasis"
},
"success": {
"$ref": "#/definitions/HexColor",
"description": "Success state color"
},
"warning": {
"$ref": "#/definitions/HexColor",
"description": "Warning state color"
},
"error": {
"$ref": "#/definitions/HexColor",
"description": "Error or critical state color"
},
"info": {
"$ref": "#/definitions/HexColor",
"description": "Informational state color"
},
"accent": {
"$ref": "#/definitions/HexColor",
"description": "Optional extra expressive accent for syntax and rich content"
"description": "Optional expressive accent seed used for syntax and prose emphasis"
},
"interactive": {
"$ref": "#/definitions/HexColor",
"description": "Optional dedicated interactive color; falls back to primary"
"description": "Optional interactive element seed; falls back to primary"
},
"diffAdd": {
"$ref": "#/definitions/HexColor",
"description": "Optional diff-add seed; falls back to a softened success color"
"description": "Optional diff-add seed; falls back to success"
},
"diffDelete": {
"$ref": "#/definitions/HexColor",
@@ -137,16 +89,12 @@
},
"ThemeVariant": {
"type": "object",
"description": "A theme variant (light or dark) with either a compact palette or legacy seeds and optional overrides",
"oneOf": [{ "required": ["seeds"] }, { "required": ["palette"] }],
"description": "A theme variant generated from seed colors with optional token overrides",
"required": ["seeds"],
"properties": {
"seeds": {
"$ref": "#/definitions/ThemeSeedColors",
"description": "Legacy seed colors used to generate the full palette"
},
"palette": {
"$ref": "#/definitions/ThemePaletteColors",
"description": "Compact palette used to derive the full token set"
"description": "Seed colors used to generate the full token set"
},
"overrides": {
"type": "object",

View File

@@ -1,6 +1,5 @@
export type {
DesktopTheme,
ThemePaletteColors,
ThemeSeedColors,
ThemeVariant,
HexColor,

View File

@@ -0,0 +1,70 @@
import { describe, expect, test } from "bun:test"
import type { HexColor, ThemeVariant } from "./types"
import { generateNeutralScale, generateScale, hexToOklch } from "./color"
import { DEFAULT_THEMES } from "./default-themes"
import { resolveThemeVariant } from "./resolve"
function dist(a: HexColor, b: HexColor) {
const x = hexToOklch(a)
const y = hexToOklch(b)
const hue = Math.abs(((((y.h - x.h) % 360) + 540) % 360) - 180) / 360
return Math.abs(x.l - y.l) + Math.abs(x.c - y.c) + hue
}
describe("theme resolve", () => {
test("resolves every bundled theme from seeds", () => {
for (const theme of Object.values(DEFAULT_THEMES)) {
const light = resolveThemeVariant(theme.light, false)
const dark = resolveThemeVariant(theme.dark, true)
expect(light["background-base"]).toStartWith("#")
expect(light["text-base"]).toBeTruthy()
expect(light["surface-brand-base"]).toStartWith("#")
expect(dark["background-base"]).toStartWith("#")
expect(dark["text-base"]).toBeTruthy()
expect(dark["surface-brand-base"]).toStartWith("#")
}
})
test("applies token overrides after generation", () => {
const variant: ThemeVariant = {
seeds: {
neutral: "#f4f4f5",
primary: "#3b7dd8",
success: "#3d9a57",
warning: "#d68c27",
error: "#d1383d",
info: "#318795",
},
overrides: {
"text-base": "#111111",
},
}
const tokens = resolveThemeVariant(variant, false)
expect(tokens["text-base"]).toBe("#111111")
expect(tokens["markdown-text"]).toBe("#111111")
expect(tokens["text-stronger"]).toBe(tokens["text-strong"])
})
test("keeps accent scales centered on step 9", () => {
const seed = "#3b7dd8" as HexColor
const light = generateScale(seed, false)
const dark = generateScale(seed, true)
expect(dist(light[8], seed)).toBeLessThan(dist(light[7], seed))
expect(dist(light[8], seed)).toBeLessThan(dist(light[10], seed))
expect(dist(dark[8], seed)).toBeLessThan(dist(dark[7], seed))
expect(dist(dark[8], seed)).toBeLessThan(dist(dark[10], seed))
})
test("keeps neutral scales monotonic", () => {
const light = generateNeutralScale("#f7f7f7", false).map((hex) => hexToOklch(hex).l)
const dark = generateNeutralScale("#1f1f1f", true).map((hex) => hexToOklch(hex).l)
for (let i = 1; i < light.length; i++) {
expect(light[i - 1]).toBeGreaterThanOrEqual(light[i])
expect(dark[i - 1]).toBeLessThanOrEqual(dark[i])
}
})
})

View File

@@ -1,11 +1,11 @@
import type { ColorValue, DesktopTheme, HexColor, ResolvedTheme, ThemeVariant } from "./types"
import { blend, generateNeutralScale, generateScale, hexToOklch, hexToRgb, shift, withAlpha } from "./color"
import { blend, generateNeutralScale, generateScale, hexToRgb, shift, withAlpha } from "./color"
export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): ResolvedTheme {
const colors = getColors(variant)
const { overrides = {} } = variant
const overrides = variant.overrides ?? {}
const neutral = generateNeutralScale(colors.neutral, isDark, colors.ink)
const neutral = generateNeutralScale(colors.neutral, isDark)
const primary = generateScale(colors.primary, isDark)
const accent = generateScale(colors.accent, isDark)
const success = generateScale(colors.success, isDark)
@@ -13,96 +13,46 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
const error = generateScale(colors.error, isDark)
const info = generateScale(colors.info, isDark)
const interactive = generateScale(colors.interactive, isDark)
const amber = generateScale(
shift(colors.warning, isDark ? { h: -16, l: -0.058, c: 1.14 } : { h: -22, l: -0.082, c: 0.94 }),
isDark,
)
const blue = generateScale(shift(colors.interactive, { h: -12, l: 0.128, c: 1.12 }), isDark)
const diffAdd = generateScale(
colors.diffAdd ?? shift(colors.success, { c: isDark ? 0.7 : 0.55, l: isDark ? -0.18 : 0.14 }),
colors.diffAdd ?? shift(colors.success, { c: isDark ? 0.84 : 0.76, l: isDark ? -0.04 : 0.04 }),
isDark,
)
const diffDelete = generateScale(
colors.diffDelete ?? shift(colors.error, { c: isDark ? 0.82 : 0.7, l: isDark ? -0.08 : 0.08 }),
colors.diffDelete ?? shift(colors.error, { c: isDark ? 0.9 : 0.8, l: isDark ? -0.03 : 0.03 }),
isDark,
)
const ink = colors.ink ?? colors.neutral
const tint = colors.compact ? hexToOklch(ink) : undefined
const body = tint
? shift(ink, {
l: isDark ? Math.max(0, 0.88 - tint.l) * 0.4 : -Math.max(0, tint.l - 0.18) * 0.24,
c: isDark ? 1.04 : 1.02,
})
: undefined
const backgroundOverride = overrides["background-base"]
const backgroundHex = getHex(backgroundOverride)
const overlay = Boolean(backgroundOverride) && !backgroundHex
const content = (seed: HexColor, scale: HexColor[]) => {
const base = hexToOklch(seed)
const value = isDark ? (base.l > 0.84 ? shift(seed, { c: 1.18 }) : scale[10]) : scale[10]
return shift(value, { l: isDark ? 0.034 : -0.024, c: isDark ? 1.3 : 1.18 })
}
const modified = () => {
if (!colors.compact) return isDark ? "#ffba92" : "#FF8C00"
const warningHue = hexToOklch(colors.warning).h
const deleteHue = hexToOklch(colors.diffDelete ?? colors.error).h
const delta = Math.abs(((((deleteHue - warningHue) % 360) + 540) % 360) - 180)
if (delta < 48) return isDark ? "#ffba92" : "#FF8C00"
return content(colors.warning, warning)
}
const surface = (
seed: HexColor,
alpha: { base: number; weak: number; weaker: number; strong: number; stronger: number },
) => {
const base = alphaTone(seed, alpha.base)
return {
base,
weak: alphaTone(seed, alpha.weak),
weaker: alphaTone(seed, alpha.weaker),
strong: alphaTone(seed, alpha.strong),
stronger: alphaTone(seed, alpha.stronger),
}
}
const background = backgroundHex ?? neutral[0]
const alphaTone = (color: HexColor, alpha: number) =>
overlay ? (withAlpha(color, alpha) as ColorValue) : blend(color, background, alpha)
const borderTone = (light: number, dark: number) =>
alphaTone(ink, isDark ? Math.min(1, dark + 0.024 + (colors.compact ? 0.08 : 0)) : Math.min(1, light + 0.024))
const diffHiddenSurface = surface(
isDark ? shift(colors.interactive, { c: 0.55, l: 0 }) : shift(colors.interactive, { c: 0.45, l: 0.08 }),
isDark
? { base: 0.14, weak: 0.08, weaker: 0.18, strong: 0.26, stronger: 0.42 }
: { base: 0.12, weak: 0.08, weaker: 0.16, strong: 0.24, stronger: 0.36 },
)
const neutralAlpha = generateNeutralAlphaScale(neutral, isDark)
const brandb = primary[8]
const brandh = primary[9]
const interb = interactive[isDark ? 6 : 4]
const interh = interactive[isDark ? 7 : 5]
const interw = interactive[isDark ? 5 : 3]
const succb = success[isDark ? 6 : 4]
const succw = success[isDark ? 5 : 3]
const succs = success[10]
const warnb = warning[isDark ? 6 : 4]
const warnw = warning[isDark ? 5 : 3]
const warns = warning[10]
const critb = error[isDark ? 6 : 4]
const critw = error[isDark ? 5 : 3]
const crits = error[10]
const infob = info[isDark ? 6 : 4]
const infow = info[isDark ? 5 : 3]
const infos = info[10]
const bgValue = overrides["background-base"]
const bgHex = getHex(bgValue)
const overlay = Boolean(bgValue) && !bgHex
const bg = bgHex ?? neutral[0]
const alpha = generateNeutralAlphaScale(neutral, isDark)
const soft = isDark ? 6 : 3
const base = isDark ? 7 : 4
const fill = isDark ? 8 : 5
const rise = isDark ? 8 : 6
const prose = isDark ? 10 : 9
const fade = (color: HexColor, value: number) =>
overlay ? (withAlpha(color, value) as ColorValue) : blend(color, bg, value)
const text = (scale: HexColor[]) => shift(scale[prose], { l: isDark ? 0.014 : -0.024, c: isDark ? 1.16 : 1.14 })
const wash = (
seed: HexColor,
value: { base: number; weak: number; weaker: number; strong: number; stronger: number },
) => ({
base: fade(seed, value.base),
weak: fade(seed, value.weak),
weaker: fade(seed, value.weaker),
strong: fade(seed, value.strong),
stronger: fade(seed, value.stronger),
})
const lum = (hex: HexColor) => {
const rgb = hexToRgb(hex)
const lift = (v: number) => (v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4))
const lift = (value: number) => (value <= 0.04045 ? value / 12.92 : Math.pow((value + 0.055) / 1.055, 2.4))
return 0.2126 * lift(rgb.r) + 0.7152 * lift(rgb.g) + 0.0722 * lift(rgb.b)
}
const hit = (a: HexColor, b: HexColor) => {
const x = lum(a)
const y = lum(b)
const light = Math.max(x, y)
const dark = Math.min(x, y)
const light = Math.max(lum(a), lum(b))
const dark = Math.min(lum(a), lum(b))
return (light + 0.05) / (dark + 0.05)
}
const on = (fill: HexColor) => {
@@ -110,344 +60,252 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
const dark = "#000000" as HexColor
return hit(light, fill) > hit(dark, fill) ? light : dark
}
const tokens: ResolvedTheme = {}
tokens["background-base"] = neutral[0]
tokens["background-weak"] = neutral[2]
tokens["background-strong"] = neutral[0]
tokens["background-stronger"] = isDark ? neutral[1] : "#fcfcfc"
tokens["surface-base"] = neutralAlpha[1]
tokens["base"] = neutralAlpha[1]
tokens["surface-base-hover"] = neutralAlpha[2]
tokens["surface-base-active"] = neutralAlpha[2]
tokens["surface-base-interactive-active"] = withAlpha(interactive[2], 0.3) as ColorValue
tokens["base2"] = neutralAlpha[1]
tokens["base3"] = neutralAlpha[1]
tokens["surface-inset-base"] = neutralAlpha[1]
tokens["surface-inset-base-hover"] = neutralAlpha[2]
tokens["surface-inset-strong"] = isDark
? (withAlpha(neutral[0], 0.5) as ColorValue)
: (withAlpha(neutral[3], 0.09) as ColorValue)
tokens["surface-inset-strong-hover"] = tokens["surface-inset-strong"]
tokens["surface-raised-base"] = neutralAlpha[0]
tokens["surface-float-base"] = isDark ? neutral[1] : neutral[11]
tokens["surface-float-base-hover"] = isDark ? neutral[2] : neutral[10]
tokens["surface-raised-base-hover"] = neutralAlpha[1]
tokens["surface-raised-base-active"] = neutralAlpha[2]
tokens["surface-raised-strong"] = isDark ? neutralAlpha[3] : neutral[0]
tokens["surface-raised-strong-hover"] = isDark ? neutralAlpha[5] : "#ffffff"
tokens["surface-raised-stronger"] = isDark ? neutralAlpha[5] : "#ffffff"
tokens["surface-raised-stronger-hover"] = isDark ? neutralAlpha[6] : "#ffffff"
tokens["surface-weak"] = neutralAlpha[2]
tokens["surface-weaker"] = neutralAlpha[3]
tokens["surface-strong"] = isDark ? neutralAlpha[6] : "#ffffff"
tokens["surface-raised-stronger-non-alpha"] = isDark ? neutral[2] : "#ffffff"
tokens["surface-brand-base"] = brandb
tokens["surface-brand-hover"] = brandh
tokens["surface-interactive-base"] = interb
tokens["surface-interactive-hover"] = interh
tokens["surface-interactive-weak"] = interw
tokens["surface-interactive-weak-hover"] = interb
tokens["surface-success-base"] = succb
tokens["surface-success-weak"] = succw
tokens["surface-success-strong"] = succs
tokens["surface-warning-base"] = warnb
tokens["surface-warning-weak"] = warnw
tokens["surface-warning-strong"] = warns
tokens["surface-critical-base"] = critb
tokens["surface-critical-weak"] = critw
tokens["surface-critical-strong"] = crits
tokens["surface-info-base"] = infob
tokens["surface-info-weak"] = infow
tokens["surface-info-strong"] = infos
tokens["surface-diff-unchanged-base"] = isDark ? neutral[0] : "#ffffff00"
tokens["surface-diff-skip-base"] = isDark ? neutralAlpha[0] : neutral[1]
tokens["surface-diff-hidden-base"] = diffHiddenSurface.base
tokens["surface-diff-hidden-weak"] = diffHiddenSurface.weak
tokens["surface-diff-hidden-weaker"] = diffHiddenSurface.weaker
tokens["surface-diff-hidden-strong"] = diffHiddenSurface.strong
tokens["surface-diff-hidden-stronger"] = diffHiddenSurface.stronger
tokens["surface-diff-add-base"] = diffAdd[2]
tokens["surface-diff-add-weak"] = diffAdd[isDark ? 3 : 1]
tokens["surface-diff-add-weaker"] = diffAdd[isDark ? 2 : 0]
tokens["surface-diff-add-strong"] = diffAdd[4]
tokens["surface-diff-add-stronger"] = diffAdd[isDark ? 10 : 8]
tokens["surface-diff-delete-base"] = diffDelete[2]
tokens["surface-diff-delete-weak"] = diffDelete[isDark ? 3 : 1]
tokens["surface-diff-delete-weaker"] = diffDelete[isDark ? 2 : 0]
tokens["surface-diff-delete-strong"] = diffDelete[isDark ? 4 : 5]
tokens["surface-diff-delete-stronger"] = diffDelete[isDark ? 10 : 8]
tokens["input-base"] = isDark ? neutral[1] : neutral[0]
tokens["input-hover"] = isDark ? neutral[2] : neutral[1]
tokens["input-active"] = isDark ? interactive[6] : interactive[0]
tokens["input-selected"] = isDark ? interactive[7] : interactive[3]
tokens["input-focus"] = isDark ? interactive[6] : interactive[0]
tokens["input-disabled"] = neutral[3]
tokens["text-base"] = colors.compact ? (body as HexColor) : neutral[10]
tokens["text-weak"] = colors.compact ? shift(body as HexColor, { l: isDark ? -0.11 : 0.11, c: 0.9 }) : neutral[8]
tokens["text-weaker"] = colors.compact
? shift(body as HexColor, { l: isDark ? -0.2 : 0.21, c: isDark ? 0.78 : 0.72 })
: neutral[7]
tokens["text-strong"] = colors.compact
? isDark
? blend("#ffffff", body as HexColor, 0.9)
: shift(body as HexColor, { l: -0.07, c: 1.04 })
: neutral[11]
tokens["text-invert-base"] = isDark ? neutral[10] : neutral[1]
tokens["text-invert-weak"] = isDark ? neutral[8] : neutral[2]
tokens["text-invert-weaker"] = isDark ? neutral[7] : neutral[3]
tokens["text-invert-strong"] = isDark ? neutral[11] : neutral[0]
tokens["text-interactive-base"] = interactive[isDark ? 10 : 9]
tokens["text-on-brand-base"] = on(brandb)
tokens["text-on-interactive-base"] = on(interb)
tokens["text-on-interactive-weak"] = on(interb)
tokens["text-on-success-base"] = on(succb)
tokens["text-on-critical-base"] = on(critb)
tokens["text-on-critical-weak"] = on(critb)
tokens["text-on-critical-strong"] = on(crits)
tokens["text-on-warning-base"] = on(warnb)
tokens["text-on-info-base"] = on(infob)
tokens["text-diff-add-base"] = diffAdd[10]
tokens["text-diff-delete-base"] = diffDelete[9]
tokens["text-diff-delete-strong"] = diffDelete[11]
tokens["text-diff-add-strong"] = diffAdd[isDark ? 7 : 11]
tokens["text-on-info-weak"] = on(infob)
tokens["text-on-info-strong"] = on(infos)
tokens["text-on-warning-weak"] = on(warnb)
tokens["text-on-warning-strong"] = on(warns)
tokens["text-on-success-weak"] = on(succb)
tokens["text-on-success-strong"] = on(succs)
tokens["text-on-brand-weak"] = on(brandb)
tokens["text-on-brand-weaker"] = on(brandb)
tokens["text-on-brand-strong"] = on(brandh)
tokens["button-primary-base"] = neutral[11]
tokens["button-secondary-base"] = isDark ? neutral[2] : neutral[0]
tokens["button-secondary-hover"] = isDark ? neutral[3] : neutral[1]
tokens["button-ghost-hover"] = neutralAlpha[1]
tokens["button-ghost-hover2"] = neutralAlpha[2]
tokens["border-base"] = colors.compact ? borderTone(0.22, 0.16) : neutralAlpha[6]
tokens["border-hover"] = colors.compact ? borderTone(0.28, 0.2) : neutralAlpha[7]
tokens["border-active"] = colors.compact ? borderTone(0.34, 0.24) : neutralAlpha[8]
tokens["border-selected"] = withAlpha(interactive[8], isDark ? 0.9 : 0.99) as ColorValue
tokens["border-disabled"] = colors.compact ? borderTone(0.18, 0.12) : neutralAlpha[7]
tokens["border-focus"] = colors.compact ? borderTone(0.34, 0.24) : neutralAlpha[8]
tokens["border-weak-base"] = colors.compact ? borderTone(0.1, 0.08) : neutralAlpha[isDark ? 5 : 4]
tokens["border-strong-base"] = colors.compact ? borderTone(0.34, 0.24) : neutralAlpha[isDark ? 7 : 6]
tokens["border-strong-hover"] = colors.compact ? borderTone(0.4, 0.28) : neutralAlpha[7]
tokens["border-strong-active"] = colors.compact ? borderTone(0.46, 0.32) : neutralAlpha[isDark ? 7 : 6]
tokens["border-strong-selected"] = withAlpha(interactive[5], 0.6) as ColorValue
tokens["border-strong-disabled"] = colors.compact ? borderTone(0.14, 0.1) : neutralAlpha[5]
tokens["border-strong-focus"] = colors.compact ? borderTone(0.46, 0.32) : neutralAlpha[isDark ? 7 : 6]
tokens["border-weak-hover"] = colors.compact ? borderTone(0.16, 0.12) : neutralAlpha[isDark ? 6 : 5]
tokens["border-weak-active"] = colors.compact ? borderTone(0.22, 0.16) : neutralAlpha[isDark ? 7 : 6]
tokens["border-weak-selected"] = withAlpha(interactive[4], isDark ? 0.6 : 0.5) as ColorValue
tokens["border-weak-disabled"] = colors.compact ? borderTone(0.08, 0.06) : neutralAlpha[5]
tokens["border-weak-focus"] = colors.compact ? borderTone(0.22, 0.16) : neutralAlpha[isDark ? 7 : 6]
tokens["border-weaker-base"] = colors.compact ? borderTone(0.06, 0.04) : neutralAlpha[2]
tokens["border-interactive-base"] = interactive[6]
tokens["border-interactive-hover"] = interactive[7]
tokens["border-interactive-active"] = interactive[8]
tokens["border-interactive-selected"] = interactive[8]
tokens["border-interactive-disabled"] = neutral[7]
tokens["border-interactive-focus"] = interactive[8]
tokens["border-success-base"] = success[isDark ? 6 : 6]
tokens["border-success-hover"] = success[isDark ? 7 : 7]
tokens["border-success-selected"] = success[8]
tokens["border-warning-base"] = warning[isDark ? 6 : 6]
tokens["border-warning-hover"] = warning[isDark ? 7 : 7]
tokens["border-warning-selected"] = warning[8]
tokens["border-critical-base"] = error[isDark ? 6 : 6]
tokens["border-critical-hover"] = error[isDark ? 7 : 7]
tokens["border-critical-selected"] = error[8]
tokens["border-info-base"] = info[isDark ? 6 : 6]
tokens["border-info-hover"] = info[isDark ? 7 : 7]
tokens["border-info-selected"] = info[8]
tokens["border-color"] = "#ffffff"
tokens["icon-base"] = colors.compact && !isDark ? tokens["text-weak"] : neutral[isDark ? 9 : 8]
tokens["icon-hover"] = colors.compact && !isDark ? tokens["text-base"] : neutral[10]
tokens["icon-active"] = colors.compact && !isDark ? tokens["text-strong"] : neutral[11]
tokens["icon-selected"] = colors.compact && !isDark ? tokens["text-strong"] : neutral[11]
tokens["icon-disabled"] = neutral[isDark ? 6 : 7]
tokens["icon-focus"] = colors.compact && !isDark ? tokens["text-strong"] : neutral[11]
tokens["icon-invert-base"] = isDark ? neutral[0] : "#ffffff"
tokens["icon-weak-base"] = neutral[isDark ? 5 : 6]
tokens["icon-weak-hover"] = neutral[isDark ? 11 : 7]
tokens["icon-weak-active"] = neutral[8]
tokens["icon-weak-selected"] = neutral[isDark ? 8 : 9]
tokens["icon-weak-disabled"] = neutral[isDark ? 3 : 5]
tokens["icon-weak-focus"] = neutral[8]
tokens["icon-strong-base"] = neutral[11]
tokens["icon-strong-hover"] = isDark ? "#f6f3f3" : "#151313"
tokens["icon-strong-active"] = isDark ? "#fcfcfc" : "#020202"
tokens["icon-strong-selected"] = isDark ? "#fdfcfc" : "#020202"
tokens["icon-strong-disabled"] = neutral[7]
tokens["icon-strong-focus"] = isDark ? "#fdfcfc" : "#020202"
tokens["icon-brand-base"] = isDark ? "#ffffff" : neutral[11]
tokens["icon-interactive-base"] = interactive[8]
tokens["icon-success-base"] = success[isDark ? 8 : 6]
tokens["icon-success-hover"] = success[9]
tokens["icon-success-active"] = success[10]
tokens["icon-warning-base"] = amber[isDark ? 8 : 6]
tokens["icon-warning-hover"] = amber[9]
tokens["icon-warning-active"] = amber[10]
tokens["icon-critical-base"] = error[isDark ? 8 : 9]
tokens["icon-critical-hover"] = error[9]
tokens["icon-critical-active"] = error[10]
tokens["icon-info-base"] = info[isDark ? 8 : 6]
tokens["icon-info-hover"] = info[isDark ? 9 : 7]
tokens["icon-info-active"] = info[10]
tokens["icon-on-brand-base"] = on(brandb)
tokens["icon-on-brand-hover"] = on(brandh)
tokens["icon-on-brand-selected"] = on(brandh)
tokens["icon-on-interactive-base"] = on(interb)
tokens["icon-agent-plan-base"] = info[8]
tokens["icon-agent-docs-base"] = amber[8]
tokens["icon-agent-ask-base"] = blue[8]
tokens["icon-agent-build-base"] = interactive[isDark ? 10 : 8]
tokens["icon-on-success-base"] = on(succb)
tokens["icon-on-success-hover"] = on(succs)
tokens["icon-on-success-selected"] = on(succs)
tokens["icon-on-warning-base"] = on(warnb)
tokens["icon-on-warning-hover"] = on(warns)
tokens["icon-on-warning-selected"] = on(warns)
tokens["icon-on-critical-base"] = on(critb)
tokens["icon-on-critical-hover"] = on(crits)
tokens["icon-on-critical-selected"] = on(crits)
tokens["icon-on-info-base"] = on(infob)
tokens["icon-on-info-hover"] = on(infos)
tokens["icon-on-info-selected"] = on(infos)
tokens["icon-diff-add-base"] = diffAdd[10]
tokens["icon-diff-add-hover"] = diffAdd[isDark ? 9 : 11]
tokens["icon-diff-add-active"] = diffAdd[isDark ? 10 : 11]
tokens["icon-diff-delete-base"] = diffDelete[9]
tokens["icon-diff-delete-hover"] = diffDelete[isDark ? 10 : 10]
tokens["icon-diff-modified-base"] = modified()
if (colors.compact) {
tokens["syntax-comment"] = "var(--text-weak)"
tokens["syntax-regexp"] = "var(--text-base)"
tokens["syntax-string"] = content(colors.success, success)
tokens["syntax-keyword"] = content(colors.accent, accent)
tokens["syntax-primitive"] = content(colors.primary, primary)
tokens["syntax-operator"] = isDark ? "var(--text-weak)" : "var(--text-base)"
tokens["syntax-variable"] = "var(--text-strong)"
tokens["syntax-property"] = content(colors.info, info)
tokens["syntax-type"] = content(colors.warning, warning)
tokens["syntax-constant"] = content(colors.accent, accent)
tokens["syntax-punctuation"] = isDark ? "var(--text-weak)" : "var(--text-base)"
tokens["syntax-object"] = "var(--text-strong)"
tokens["syntax-success"] = success[10]
tokens["syntax-warning"] = amber[10]
tokens["syntax-critical"] = error[10]
tokens["syntax-info"] = content(colors.info, info)
tokens["syntax-diff-add"] = diffAdd[10]
tokens["syntax-diff-delete"] = diffDelete[10]
tokens["syntax-diff-unknown"] = "#ff0000"
tokens["markdown-heading"] = content(colors.primary, primary)
tokens["markdown-text"] = tokens["text-base"]
tokens["markdown-link"] = content(colors.interactive, interactive)
tokens["markdown-link-text"] = content(colors.info, info)
tokens["markdown-code"] = content(colors.success, success)
tokens["markdown-block-quote"] = content(colors.warning, warning)
tokens["markdown-emph"] = content(colors.warning, warning)
tokens["markdown-strong"] = content(colors.accent, accent)
tokens["markdown-horizontal-rule"] = tokens["border-base"]
tokens["markdown-list-item"] = content(colors.interactive, interactive)
tokens["markdown-list-enumeration"] = content(colors.info, info)
tokens["markdown-image"] = content(colors.interactive, interactive)
tokens["markdown-image-text"] = content(colors.info, info)
tokens["markdown-code-block"] = tokens["text-base"]
const hidden = wash(
isDark ? shift(colors.interactive, { c: 0.6 }) : shift(colors.interactive, { c: 0.46, l: 0.07 }),
isDark
? { base: 0.14, weak: 0.08, weaker: 0.18, strong: 0.26, stronger: 0.42 }
: { base: 0.12, weak: 0.08, weaker: 0.16, strong: 0.24, stronger: 0.36 },
)
const brand = primary[8]
const brandHover = primary[9]
const inter = interactive[base]
const interHover = interactive[isDark ? 7 : 5]
const interWeak = interactive[soft]
const tones = {
success,
warning,
critical: error,
info,
}
const avatars = {
pink: error,
mint: success,
orange: warning,
purple: accent,
cyan: info,
lime: primary,
}
const tokens: ResolvedTheme = {
"background-base": neutral[0],
"background-weak": neutral[2],
"background-strong": neutral[0],
"background-stronger": neutral[1],
"surface-base": alpha[1],
base: alpha[1],
"surface-base-hover": alpha[2],
"surface-base-active": alpha[2],
"surface-base-interactive-active": withAlpha(interactive[2], isDark ? 0.34 : 0.26) as ColorValue,
base2: alpha[1],
base3: alpha[1],
"surface-inset-base": alpha[1],
"surface-inset-base-hover": alpha[2],
"surface-inset-strong": fade(neutral[11], isDark ? 0.08 : 0.04),
"surface-inset-strong-hover": fade(neutral[11], isDark ? 0.12 : 0.06),
"surface-raised-base": alpha[0],
"surface-float-base": isDark ? neutral[1] : neutral[11],
"surface-float-base-hover": isDark ? neutral[2] : neutral[10],
"surface-raised-base-hover": alpha[1],
"surface-raised-base-active": alpha[2],
"surface-raised-strong": isDark ? alpha[3] : neutral[0],
"surface-raised-strong-hover": isDark ? alpha[5] : neutral[0],
"surface-raised-stronger": isDark ? alpha[5] : neutral[0],
"surface-raised-stronger-hover": isDark ? alpha[6] : neutral[1],
"surface-weak": alpha[2],
"surface-weaker": alpha[3],
"surface-strong": isDark ? alpha[6] : neutral[0],
"surface-raised-stronger-non-alpha": isDark ? neutral[2] : neutral[0],
"surface-brand-base": brand,
"surface-brand-hover": brandHover,
"surface-interactive-base": inter,
"surface-interactive-hover": interHover,
"surface-interactive-weak": interWeak,
"surface-interactive-weak-hover": inter,
"surface-diff-unchanged-base": isDark ? neutral[0] : "#ffffff00",
"surface-diff-skip-base": isDark ? alpha[0] : neutral[1],
"surface-diff-hidden-base": hidden.base,
"surface-diff-hidden-weak": hidden.weak,
"surface-diff-hidden-weaker": hidden.weaker,
"surface-diff-hidden-strong": hidden.strong,
"surface-diff-hidden-stronger": hidden.stronger,
"surface-diff-add-base": diffAdd[2],
"surface-diff-add-weak": diffAdd[isDark ? 3 : 1],
"surface-diff-add-weaker": diffAdd[isDark ? 2 : 0],
"surface-diff-add-strong": diffAdd[4],
"surface-diff-add-stronger": diffAdd[isDark ? 10 : 8],
"surface-diff-delete-base": diffDelete[2],
"surface-diff-delete-weak": diffDelete[isDark ? 3 : 1],
"surface-diff-delete-weaker": diffDelete[isDark ? 2 : 0],
"surface-diff-delete-strong": diffDelete[isDark ? 4 : 5],
"surface-diff-delete-stronger": diffDelete[isDark ? 10 : 8],
"input-base": isDark ? neutral[1] : neutral[0],
"input-hover": isDark ? neutral[2] : neutral[1],
"input-active": isDark ? interactive[base] : interactive[0],
"input-selected": isDark ? interactive[fill] : interactive[3],
"input-focus": isDark ? interactive[base] : interactive[0],
"input-disabled": neutral[3],
"text-base": neutral[10],
"text-weak": neutral[7],
"text-weaker": neutral[6],
"text-strong": neutral[11],
"text-invert-base": isDark ? neutral[10] : neutral[1],
"text-invert-weak": isDark ? neutral[8] : neutral[2],
"text-invert-weaker": isDark ? neutral[7] : neutral[3],
"text-invert-strong": isDark ? neutral[11] : neutral[0],
"text-interactive-base": text(interactive),
"text-on-brand-base": on(brand),
"text-on-brand-weak": on(brand),
"text-on-brand-weaker": on(brand),
"text-on-brand-strong": on(brandHover),
"text-on-interactive-base": on(inter),
"text-on-interactive-weak": on(inter),
"text-diff-add-base": text(diffAdd),
"text-diff-delete-base": text(diffDelete),
"text-diff-add-strong": diffAdd[11],
"text-diff-delete-strong": diffDelete[11],
"button-primary-base": neutral[11],
"button-secondary-base": isDark ? neutral[2] : neutral[0],
"button-secondary-hover": isDark ? neutral[3] : neutral[1],
"button-ghost-hover": alpha[1],
"button-ghost-hover2": alpha[2],
"border-base": alpha[isDark ? 4 : 6],
"border-hover": alpha[isDark ? 5 : 7],
"border-active": alpha[isDark ? 6 : 8],
"border-selected": withAlpha(interactive[8], isDark ? 0.9 : 0.99) as ColorValue,
"border-disabled": alpha[isDark ? 5 : 7],
"border-focus": alpha[isDark ? 6 : 8],
"border-weak-base": alpha[isDark ? 2 : 4],
"border-strong-base": alpha[isDark ? 5 : 6],
"border-strong-hover": alpha[isDark ? 6 : 7],
"border-strong-active": alpha[isDark ? 5 : 6],
"border-strong-selected": withAlpha(interactive[5], 0.6) as ColorValue,
"border-strong-disabled": alpha[isDark ? 3 : 5],
"border-strong-focus": alpha[isDark ? 5 : 6],
"border-weak-hover": alpha[isDark ? 4 : 5],
"border-weak-active": alpha[isDark ? 5 : 6],
"border-weak-selected": withAlpha(interactive[4], isDark ? 0.6 : 0.5) as ColorValue,
"border-weak-disabled": alpha[isDark ? 3 : 5],
"border-weak-focus": alpha[isDark ? 5 : 6],
"border-weaker-base": alpha[isDark ? 1 : 2],
"border-interactive-base": interactive[6],
"border-interactive-hover": interactive[7],
"border-interactive-active": interactive[8],
"border-interactive-selected": interactive[8],
"border-interactive-disabled": neutral[7],
"border-interactive-focus": interactive[8],
"border-color": neutral[0],
"icon-base": neutral[isDark ? 9 : 8],
"icon-hover": neutral[10],
"icon-active": neutral[11],
"icon-selected": neutral[11],
"icon-disabled": neutral[isDark ? 6 : 7],
"icon-focus": neutral[11],
"icon-invert-base": isDark ? neutral[0] : "#ffffff",
"icon-weak-base": neutral[isDark ? 5 : 6],
"icon-weak-hover": neutral[isDark ? 11 : 7],
"icon-weak-active": neutral[8],
"icon-weak-selected": neutral[isDark ? 8 : 9],
"icon-weak-disabled": neutral[isDark ? 3 : 5],
"icon-weak-focus": neutral[8],
"icon-strong-base": neutral[11],
"icon-strong-hover": neutral[11],
"icon-strong-active": neutral[11],
"icon-strong-selected": neutral[11],
"icon-strong-disabled": neutral[7],
"icon-strong-focus": neutral[11],
"icon-brand-base": on(brand),
"icon-interactive-base": interactive[rise],
"icon-on-brand-base": on(brand),
"icon-on-brand-hover": on(brandHover),
"icon-on-brand-selected": on(brandHover),
"icon-on-interactive-base": on(inter),
"icon-agent-plan-base": info[8],
"icon-agent-docs-base": warning[8],
"icon-agent-ask-base": interactive[8],
"icon-agent-build-base": interactive[10],
"icon-diff-add-base": diffAdd[10],
"icon-diff-add-hover": diffAdd[11],
"icon-diff-add-active": diffAdd[11],
"icon-diff-delete-base": diffDelete[10],
"icon-diff-delete-hover": diffDelete[11],
"icon-diff-modified-base": warning[10],
"syntax-comment": "var(--text-weak)",
"syntax-regexp": text(primary),
"syntax-string": text(success),
"syntax-keyword": text(accent),
"syntax-primitive": text(primary),
"syntax-operator": text(info),
"syntax-variable": "var(--text-strong)",
"syntax-property": text(info),
"syntax-type": text(warning),
"syntax-constant": text(accent),
"syntax-punctuation": "var(--text-weak)",
"syntax-object": "var(--text-strong)",
"syntax-success": success[10],
"syntax-warning": warning[10],
"syntax-critical": error[10],
"syntax-info": text(info),
"syntax-diff-add": diffAdd[10],
"syntax-diff-delete": diffDelete[10],
"syntax-diff-unknown": text(accent),
"markdown-heading": text(primary),
"markdown-text": neutral[10],
"markdown-link": text(interactive),
"markdown-link-text": text(info),
"markdown-code": text(success),
"markdown-block-quote": text(warning),
"markdown-emph": text(warning),
"markdown-strong": text(accent),
"markdown-horizontal-rule": alpha[6],
"markdown-list-item": text(interactive),
"markdown-list-enumeration": text(info),
"markdown-image": text(interactive),
"markdown-image-text": text(info),
"markdown-code-block": neutral[10],
}
if (!colors.compact) {
tokens["syntax-comment"] = "var(--text-weak)"
tokens["syntax-regexp"] = "var(--text-base)"
tokens["syntax-string"] = isDark ? "#00ceb9" : "#006656"
tokens["syntax-keyword"] = "var(--text-weak)"
tokens["syntax-primitive"] = isDark ? "#ffba92" : "#fb4804"
tokens["syntax-operator"] = isDark ? "var(--text-weak)" : "var(--text-base)"
tokens["syntax-variable"] = "var(--text-strong)"
tokens["syntax-property"] = isDark ? "#ff9ae2" : "#ed6dc8"
tokens["syntax-type"] = isDark ? "#ecf58c" : "#596600"
tokens["syntax-constant"] = isDark ? "#93e9f6" : "#007b80"
tokens["syntax-punctuation"] = isDark ? "var(--text-weak)" : "var(--text-base)"
tokens["syntax-object"] = "var(--text-strong)"
tokens["syntax-success"] = success[10]
tokens["syntax-warning"] = amber[10]
tokens["syntax-critical"] = error[10]
tokens["syntax-info"] = isDark ? "#93e9f6" : "#0092a8"
tokens["syntax-diff-add"] = diffAdd[10]
tokens["syntax-diff-delete"] = diffDelete[10]
tokens["syntax-diff-unknown"] = "#ff0000"
for (const [name, scale] of Object.entries(tones)) {
const fillColor = scale[fill]
const weakColor = scale[soft]
const strongColor = scale[10]
const iconColor = scale[rise]
tokens["markdown-heading"] = isDark ? "#9d7cd8" : "#d68c27"
tokens["markdown-text"] = isDark ? "#eeeeee" : "#1a1a1a"
tokens["markdown-link"] = isDark ? "#fab283" : "#3b7dd8"
tokens["markdown-link-text"] = isDark ? "#56b6c2" : "#318795"
tokens["markdown-code"] = isDark ? "#7fd88f" : "#3d9a57"
tokens["markdown-block-quote"] = isDark ? "#e5c07b" : "#b0851f"
tokens["markdown-emph"] = isDark ? "#e5c07b" : "#b0851f"
tokens["markdown-strong"] = isDark ? "#f5a742" : "#d68c27"
tokens["markdown-horizontal-rule"] = isDark ? "#808080" : "#8a8a8a"
tokens["markdown-list-item"] = isDark ? "#fab283" : "#3b7dd8"
tokens["markdown-list-enumeration"] = isDark ? "#56b6c2" : "#318795"
tokens["markdown-image"] = isDark ? "#fab283" : "#3b7dd8"
tokens["markdown-image-text"] = isDark ? "#56b6c2" : "#318795"
tokens["markdown-code-block"] = isDark ? "#eeeeee" : "#1a1a1a"
tokens[`surface-${name}-base`] = fillColor
tokens[`surface-${name}-weak`] = weakColor
tokens[`surface-${name}-strong`] = strongColor
tokens[`text-on-${name}-base`] = on(fillColor)
tokens[`text-on-${name}-weak`] = on(fillColor)
tokens[`text-on-${name}-strong`] = on(strongColor)
tokens[`border-${name}-base`] = scale[6]
tokens[`border-${name}-hover`] = scale[7]
tokens[`border-${name}-selected`] = scale[8]
tokens[`icon-${name}-base`] = iconColor
tokens[`icon-${name}-hover`] = scale[9]
tokens[`icon-${name}-active`] = strongColor
tokens[`icon-on-${name}-base`] = on(fillColor)
tokens[`icon-on-${name}-hover`] = on(strongColor)
tokens[`icon-on-${name}-selected`] = on(strongColor)
}
tokens["avatar-background-pink"] = isDark ? "#501b3f" : "#feeef8"
tokens["avatar-background-mint"] = isDark ? "#033a34" : "#e1fbf4"
tokens["avatar-background-orange"] = isDark ? "#5f2a06" : "#fff1e7"
tokens["avatar-background-purple"] = isDark ? "#432155" : "#f9f1fe"
tokens["avatar-background-cyan"] = isDark ? "#0f3058" : "#e7f9fb"
tokens["avatar-background-lime"] = isDark ? "#2b3711" : "#eefadc"
tokens["avatar-text-pink"] = isDark ? "#e34ba9" : "#cd1d8d"
tokens["avatar-text-mint"] = isDark ? "#95f3d9" : "#147d6f"
tokens["avatar-text-orange"] = isDark ? "#ff802b" : "#ed5f00"
tokens["avatar-text-purple"] = isDark ? "#9d5bd2" : "#8445bc"
tokens["avatar-text-cyan"] = isDark ? "#369eff" : "#0894b3"
tokens["avatar-text-lime"] = isDark ? "#c4f042" : "#5d770d"
for (const [name, scale] of Object.entries(avatars)) {
tokens[`avatar-background-${name}`] = scale[isDark ? 2 : 1]
tokens[`avatar-text-${name}`] = scale[9]
}
for (const [key, value] of Object.entries(overrides)) {
tokens[key] = value
}
if (colors.compact && "text-weak" in overrides && !("text-weaker" in overrides)) {
if ("text-weak" in overrides && !("text-weaker" in overrides)) {
const weak = tokens["text-weak"]
if (weak.startsWith("#")) {
tokens["text-weaker"] = shift(weak as HexColor, { l: isDark ? -0.12 : 0.12, c: 0.75 })
} else {
tokens["text-weaker"] = weak
}
tokens["text-weaker"] = weak.startsWith("#") ? shift(weak as HexColor, { l: isDark ? -0.12 : 0.12, c: 0.75 }) : weak
}
if (colors.compact) {
if (!("markdown-text" in overrides)) {
tokens["markdown-text"] = tokens["text-base"]
}
if (!("markdown-code-block" in overrides)) {
tokens["markdown-code-block"] = tokens["text-base"]
}
if (!("markdown-text" in overrides)) {
tokens["markdown-text"] = tokens["text-base"]
}
if (!("markdown-code-block" in overrides)) {
tokens["markdown-code-block"] = tokens["text-base"]
}
if (!("text-stronger" in overrides)) {
tokens["text-stronger"] = tokens["text-strong"]
}
@@ -456,9 +314,7 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
}
interface ThemeColors {
compact: boolean
neutral: HexColor
ink?: HexColor
primary: HexColor
accent: HexColor
success: HexColor
@@ -471,54 +327,26 @@ interface ThemeColors {
}
function getColors(variant: ThemeVariant): ThemeColors {
const input = variant as { palette?: unknown; seeds?: unknown }
if (input.palette && input.seeds) {
throw new Error("Theme variant cannot define both `palette` and `seeds`")
return {
neutral: variant.seeds.neutral,
primary: variant.seeds.primary,
accent: variant.seeds.accent ?? variant.seeds.info,
success: variant.seeds.success,
warning: variant.seeds.warning,
error: variant.seeds.error,
info: variant.seeds.info,
interactive: variant.seeds.interactive ?? variant.seeds.primary,
diffAdd: variant.seeds.diffAdd,
diffDelete: variant.seeds.diffDelete,
}
if (variant.palette) {
return {
compact: true,
neutral: variant.palette.neutral,
ink: variant.palette.ink,
primary: variant.palette.primary,
accent: variant.palette.accent ?? variant.palette.info,
success: variant.palette.success,
warning: variant.palette.warning,
error: variant.palette.error,
info: variant.palette.info,
interactive: variant.palette.interactive ?? variant.palette.primary,
diffAdd: variant.palette.diffAdd,
diffDelete: variant.palette.diffDelete,
}
}
if (variant.seeds) {
return {
compact: false,
neutral: variant.seeds.neutral,
ink: undefined,
primary: variant.seeds.primary,
accent: variant.seeds.info,
success: variant.seeds.success,
warning: variant.seeds.warning,
error: variant.seeds.error,
info: variant.seeds.info,
interactive: variant.seeds.interactive,
diffAdd: variant.seeds.diffAdd,
diffDelete: variant.seeds.diffDelete,
}
}
throw new Error("Theme variant requires `palette` or `seeds`")
}
function generateNeutralAlphaScale(neutralScale: HexColor[], isDark: boolean): HexColor[] {
const alphas = isDark
function generateNeutralAlphaScale(neutral: HexColor[], isDark: boolean): HexColor[] {
const alpha = isDark
? [0.038, 0.066, 0.1, 0.142, 0.19, 0.252, 0.334, 0.446, 0.58, 0.718, 0.854, 0.985]
: [0.03, 0.06, 0.1, 0.145, 0.2, 0.265, 0.35, 0.47, 0.61, 0.74, 0.86, 0.97]
return alphas.map((alpha) => blend(neutralScale[11], neutralScale[0], alpha))
return alpha.map((value) => blend(neutral[11], neutral[0], value))
}
function getHex(value: ColorValue | undefined): HexColor | undefined {

View File

@@ -3,9 +3,8 @@
"name": "AMOLED",
"id": "amoled",
"light": {
"palette": {
"seeds": {
"neutral": "#f0f0f0",
"ink": "#0a0a0a",
"primary": "#6200ff",
"accent": "#ff0080",
"success": "#00e676",
@@ -25,9 +24,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#000000",
"ink": "#ffffff",
"primary": "#b388ff",
"accent": "#ff4081",
"success": "#00ff88",

View File

@@ -3,9 +3,8 @@
"name": "Aura",
"id": "aura",
"light": {
"palette": {
"seeds": {
"neutral": "#f5f0ff",
"ink": "#2d2640",
"primary": "#a277ff",
"accent": "#d94f4f",
"success": "#40bf7a",
@@ -26,9 +25,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#15141b",
"ink": "#edecee",
"primary": "#a277ff",
"accent": "#ff6767",
"success": "#61ffca",

View File

@@ -3,9 +3,8 @@
"name": "Ayu",
"id": "ayu",
"light": {
"palette": {
"seeds": {
"neutral": "#fdfaf4",
"ink": "#4f5964",
"primary": "#4aa8c8",
"accent": "#ef7d71",
"success": "#5fb978",
@@ -26,9 +25,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#0f1419",
"ink": "#d6dae0",
"primary": "#3fb7e3",
"accent": "#f2856f",
"success": "#78d05c",

View File

@@ -3,9 +3,8 @@
"name": "Carbonfox",
"id": "carbonfox",
"light": {
"palette": {
"seeds": {
"neutral": "#8e8e8e",
"ink": "#161616",
"primary": "#0072c3",
"accent": "#da1e28",
"success": "#198038",
@@ -27,9 +26,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#393939",
"ink": "#f2f4f8",
"primary": "#33b1ff",
"accent": "#ff8389",
"success": "#42be65",

View File

@@ -3,9 +3,8 @@
"name": "Catppuccin Frappe",
"id": "catppuccin-frappe",
"light": {
"palette": {
"seeds": {
"neutral": "#303446",
"ink": "#c6d0f5",
"primary": "#8da4e2",
"accent": "#f4b8e4",
"success": "#a6d189",
@@ -43,9 +42,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#303446",
"ink": "#c6d0f5",
"primary": "#8da4e2",
"accent": "#f4b8e4",
"success": "#a6d189",

View File

@@ -3,9 +3,8 @@
"name": "Catppuccin Macchiato",
"id": "catppuccin-macchiato",
"light": {
"palette": {
"seeds": {
"neutral": "#24273a",
"ink": "#cad3f5",
"primary": "#8aadf4",
"accent": "#f5bde6",
"success": "#a6da95",
@@ -43,9 +42,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#24273a",
"ink": "#cad3f5",
"primary": "#8aadf4",
"accent": "#f5bde6",
"success": "#a6da95",

View File

@@ -3,9 +3,8 @@
"name": "Catppuccin",
"id": "catppuccin",
"light": {
"palette": {
"seeds": {
"neutral": "#f5e0dc",
"ink": "#4c4f69",
"primary": "#7287fd",
"accent": "#d20f39",
"success": "#40a02b",
@@ -23,9 +22,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#1e1e2e",
"ink": "#cdd6f4",
"primary": "#b4befe",
"accent": "#f38ba8",
"success": "#a6d189",

View File

@@ -3,9 +3,8 @@
"name": "Cobalt2",
"id": "cobalt2",
"light": {
"palette": {
"seeds": {
"neutral": "#ffffff",
"ink": "#193549",
"primary": "#0066cc",
"accent": "#00acc1",
"success": "#4caf50",
@@ -43,9 +42,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#193549",
"ink": "#ffffff",
"primary": "#0088ff",
"accent": "#2affdf",
"success": "#9eff80",

View File

@@ -3,9 +3,8 @@
"name": "Cursor",
"id": "cursor",
"light": {
"palette": {
"seeds": {
"neutral": "#fcfcfc",
"ink": "#141414",
"primary": "#6f9ba6",
"accent": "#6f9ba6",
"success": "#1f8a65",
@@ -46,9 +45,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#181818",
"ink": "#e4e4e4",
"primary": "#88c0d0",
"accent": "#88c0d0",
"success": "#3fa266",

View File

@@ -3,9 +3,8 @@
"name": "Dracula",
"id": "dracula",
"light": {
"palette": {
"seeds": {
"neutral": "#f8f8f2",
"ink": "#1f1f2f",
"primary": "#7c6bf5",
"accent": "#d16090",
"success": "#2fbf71",
@@ -25,9 +24,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#1d1e28",
"ink": "#f8f8f2",
"primary": "#bd93f9",
"accent": "#ff79c6",
"success": "#50fa7b",

View File

@@ -3,9 +3,8 @@
"name": "Everforest",
"id": "everforest",
"light": {
"palette": {
"seeds": {
"neutral": "#fdf6e3",
"ink": "#5c6a72",
"primary": "#8da101",
"accent": "#df69ba",
"success": "#8da101",
@@ -45,9 +44,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#2d353b",
"ink": "#d3c6aa",
"primary": "#a7c080",
"accent": "#d699b6",
"success": "#a7c080",

View File

@@ -3,9 +3,8 @@
"name": "Flexoki",
"id": "flexoki",
"light": {
"palette": {
"seeds": {
"neutral": "#FFFCF0",
"ink": "#100F0F",
"primary": "#205EA6",
"accent": "#BC5215",
"success": "#66800B",
@@ -43,9 +42,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#100F0F",
"ink": "#CECDC3",
"primary": "#DA702C",
"accent": "#8B7EC8",
"success": "#879A39",

View File

@@ -3,9 +3,8 @@
"name": "GitHub",
"id": "github",
"light": {
"palette": {
"seeds": {
"neutral": "#ffffff",
"ink": "#24292f",
"primary": "#0969da",
"accent": "#1b7c83",
"success": "#1a7f37",
@@ -43,9 +42,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#0d1117",
"ink": "#c9d1d9",
"primary": "#58a6ff",
"accent": "#39c5cf",
"success": "#3fb950",

View File

@@ -3,9 +3,8 @@
"name": "Gruvbox",
"id": "gruvbox",
"light": {
"palette": {
"seeds": {
"neutral": "#fbf1c7",
"ink": "#3c3836",
"primary": "#076678",
"accent": "#9d0006",
"success": "#79740e",
@@ -23,9 +22,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#282828",
"ink": "#ebdbb2",
"primary": "#83a598",
"accent": "#fb4934",
"success": "#b8bb26",

View File

@@ -3,9 +3,8 @@
"name": "Kanagawa",
"id": "kanagawa",
"light": {
"palette": {
"seeds": {
"neutral": "#F2E9DE",
"ink": "#54433A",
"primary": "#2D4F67",
"accent": "#D27E99",
"success": "#98BB6C",
@@ -45,9 +44,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#1F1F28",
"ink": "#DCD7BA",
"primary": "#7E9CD8",
"accent": "#D27E99",
"success": "#98BB6C",

View File

@@ -3,9 +3,8 @@
"name": "Lucent Orng",
"id": "lucent-orng",
"light": {
"palette": {
"seeds": {
"neutral": "#fff5f0",
"ink": "#1a1a1a",
"primary": "#EC5B2B",
"accent": "#c94d24",
"success": "#0062d1",
@@ -44,9 +43,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#2a1a15",
"ink": "#eeeeee",
"primary": "#EC5B2B",
"accent": "#FFF7F1",
"success": "#6ba1e6",

View File

@@ -3,9 +3,8 @@
"name": "Material",
"id": "material",
"light": {
"palette": {
"seeds": {
"neutral": "#fafafa",
"ink": "#263238",
"primary": "#6182b8",
"accent": "#39adb5",
"success": "#91b859",
@@ -44,9 +43,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#263238",
"ink": "#eeffff",
"primary": "#82aaff",
"accent": "#89ddff",
"success": "#c3e88d",

View File

@@ -3,9 +3,8 @@
"name": "Matrix",
"id": "matrix",
"light": {
"palette": {
"seeds": {
"neutral": "#eef3ea",
"ink": "#203022",
"primary": "#1cc24b",
"accent": "#c770ff",
"success": "#1cc24b",
@@ -46,9 +45,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#0a0e0a",
"ink": "#62ff94",
"primary": "#2eff6a",
"accent": "#c770ff",
"success": "#62ff94",

View File

@@ -3,9 +3,8 @@
"name": "Mercury",
"id": "mercury",
"light": {
"palette": {
"seeds": {
"neutral": "#ffffff",
"ink": "#363644",
"primary": "#5266eb",
"accent": "#8da4f5",
"success": "#036e43",
@@ -44,9 +43,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#171721",
"ink": "#dddde5",
"primary": "#8da4f5",
"accent": "#8da4f5",
"success": "#77c599",

View File

@@ -3,9 +3,8 @@
"name": "Monokai",
"id": "monokai",
"light": {
"palette": {
"seeds": {
"neutral": "#fdf8ec",
"ink": "#292318",
"primary": "#bf7bff",
"accent": "#d9487c",
"success": "#4fb54b",
@@ -25,9 +24,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#272822",
"ink": "#f8f8f2",
"primary": "#ae81ff",
"accent": "#f92672",
"success": "#a6e22e",

View File

@@ -3,9 +3,8 @@
"name": "Night Owl",
"id": "nightowl",
"light": {
"palette": {
"seeds": {
"neutral": "#f0f0f0",
"ink": "#403f53",
"primary": "#4876d6",
"accent": "#aa0982",
"success": "#2aa298",
@@ -23,9 +22,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#011627",
"ink": "#d6deeb",
"primary": "#82aaff",
"accent": "#f78c6c",
"success": "#c5e478",

View File

@@ -3,9 +3,8 @@
"name": "Nord",
"id": "nord",
"light": {
"palette": {
"seeds": {
"neutral": "#eceff4",
"ink": "#2e3440",
"primary": "#5e81ac",
"accent": "#bf616a",
"success": "#8fbcbb",
@@ -24,9 +23,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#2e3440",
"ink": "#e5e9f0",
"primary": "#88c0d0",
"accent": "#d57780",
"success": "#a3be8c",

View File

@@ -3,9 +3,8 @@
"name": "OC-2",
"id": "oc-2",
"light": {
"palette": {
"seeds": {
"neutral": "#f7f7f7",
"ink": "#171311",
"primary": "#dcde8d",
"success": "#12c905",
"warning": "#ffdc17",
@@ -16,21 +15,6 @@
"diffDelete": "#fc533a"
},
"overrides": {
"text-strong": "#171717",
"text-base": "#6F6F6F",
"text-weak": "#8F8F8F",
"text-weaker": "#C7C7C7",
"border-weak-base": "#DBDBDB",
"border-weaker-base": "#E8E8E8",
"icon-base": "#8F8F8F",
"icon-weak-base": "C7C7C7",
"surface-raised-base": "#F3F3F3",
"surface-raised-base-hover": "#EDEDED",
"surface-base": "#F8F8F8",
"surface-base-hover": "#0000000A",
"surface-interactive-weak": "#F5FAFF",
"icon-success-base": "#0ABE00",
"surface-success-base": "#E6FFE5",
"syntax-comment": "#7a7a7a",
"syntax-keyword": "#a753ae",
"syntax-string": "#00ceb9",
@@ -40,14 +24,12 @@
"syntax-constant": "#007b80",
"syntax-critical": "#ff8c00",
"syntax-diff-delete": "#ff8c00",
"syntax-diff-unknown": "#a753ae",
"surface-critical-base": "#FFF2F0"
"syntax-diff-unknown": "#a753ae"
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#1f1f1f",
"ink": "#f1ece8",
"primary": "#fab283",
"success": "#12c905",
"warning": "#fcd53a",
@@ -58,20 +40,6 @@
"diffDelete": "#fc533a"
},
"overrides": {
"text-strong": "#EDEDED",
"text-base": "#A0A0A0",
"text-weak": "#707070",
"text-weaker": "#505050",
"border-weak-base": "#282828",
"border-weaker-base": "#232323",
"icon-base": "#7E7E7E",
"icon-weak-base": "#343434",
"surface-raised-base": "#232323",
"surface-raised-base-hover": "#282828",
"surface-base": "#1C1C1C",
"surface-base-hover": "#FFFFFF0D",
"surface-interactive-weak": "#0D172B",
"surface-success-base": "#022B00",
"syntax-comment": "#8f8f8f",
"syntax-keyword": "#edb2f1",
"syntax-string": "#00ceb9",
@@ -81,8 +49,7 @@
"syntax-constant": "#93e9f6",
"syntax-critical": "#fab283",
"syntax-diff-delete": "#fab283",
"syntax-diff-unknown": "#edb2f1",
"surface-critical-base": "#1F0603"
"syntax-diff-unknown": "#edb2f1"
}
}
}

View File

@@ -3,9 +3,8 @@
"name": "One Dark",
"id": "one-dark",
"light": {
"palette": {
"seeds": {
"neutral": "#fafafa",
"ink": "#383a42",
"primary": "#4078f2",
"accent": "#0184bc",
"success": "#50a14f",
@@ -45,9 +44,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#282c34",
"ink": "#abb2bf",
"primary": "#61afef",
"accent": "#56b6c2",
"success": "#98c379",

View File

@@ -3,9 +3,8 @@
"name": "One Dark Pro",
"id": "onedarkpro",
"light": {
"palette": {
"seeds": {
"neutral": "#f5f6f8",
"ink": "#2b303b",
"primary": "#528bff",
"accent": "#d85462",
"success": "#4fa66d",
@@ -23,9 +22,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#1e222a",
"ink": "#abb2bf",
"primary": "#61afef",
"accent": "#e06c75",
"success": "#98c379",

View File

@@ -3,9 +3,8 @@
"name": "OpenCode",
"id": "opencode",
"light": {
"palette": {
"seeds": {
"neutral": "#ffffff",
"ink": "#1a1a1a",
"primary": "#3b7dd8",
"accent": "#d68c27",
"success": "#3d9a57",
@@ -45,9 +44,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#0a0a0a",
"ink": "#eeeeee",
"primary": "#fab283",
"accent": "#9d7cd8",
"success": "#7fd88f",

View File

@@ -3,9 +3,8 @@
"name": "Orng",
"id": "orng",
"light": {
"palette": {
"seeds": {
"neutral": "#ffffff",
"ink": "#1a1a1a",
"primary": "#EC5B2B",
"accent": "#c94d24",
"success": "#0062d1",
@@ -44,9 +43,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#0a0a0a",
"ink": "#eeeeee",
"primary": "#EC5B2B",
"accent": "#FFF7F1",
"success": "#6ba1e6",

View File

@@ -3,9 +3,8 @@
"name": "Osaka Jade",
"id": "osaka-jade",
"light": {
"palette": {
"seeds": {
"neutral": "#F6F5DD",
"ink": "#111c18",
"primary": "#1faa90",
"accent": "#3d7a52",
"success": "#3d7a52",
@@ -43,9 +42,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#111c18",
"ink": "#C1C497",
"primary": "#2DD5B7",
"accent": "#549e6a",
"success": "#549e6a",

View File

@@ -3,9 +3,8 @@
"name": "Palenight",
"id": "palenight",
"light": {
"palette": {
"seeds": {
"neutral": "#fafafa",
"ink": "#292d3e",
"primary": "#4976eb",
"accent": "#00acc1",
"success": "#91b859",
@@ -43,9 +42,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#292d3e",
"ink": "#a6accd",
"primary": "#82aaff",
"accent": "#89ddff",
"success": "#c3e88d",

View File

@@ -3,9 +3,8 @@
"name": "Rose Pine",
"id": "rosepine",
"light": {
"palette": {
"seeds": {
"neutral": "#faf4ed",
"ink": "#575279",
"primary": "#31748f",
"accent": "#d7827e",
"success": "#286983",
@@ -43,9 +42,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#191724",
"ink": "#e0def4",
"primary": "#9ccfd8",
"accent": "#ebbcba",
"success": "#31748f",

View File

@@ -3,9 +3,8 @@
"name": "Shades of Purple",
"id": "shadesofpurple",
"light": {
"palette": {
"seeds": {
"neutral": "#f7ebff",
"ink": "#3b2c59",
"primary": "#7a5af8",
"accent": "#ff6bd5",
"success": "#3dd598",
@@ -26,9 +25,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#1a102b",
"ink": "#f5f0ff",
"primary": "#c792ff",
"accent": "#ff7ac6",
"success": "#7be0b0",

View File

@@ -3,9 +3,8 @@
"name": "Solarized",
"id": "solarized",
"light": {
"palette": {
"seeds": {
"neutral": "#fdf6e3",
"ink": "#586e75",
"primary": "#268bd2",
"accent": "#d33682",
"success": "#859900",
@@ -25,9 +24,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#002b36",
"ink": "#93a1a1",
"primary": "#6c71c4",
"accent": "#d33682",
"success": "#859900",

View File

@@ -3,9 +3,8 @@
"name": "Synthwave '84",
"id": "synthwave84",
"light": {
"palette": {
"seeds": {
"neutral": "#fafafa",
"ink": "#262335",
"primary": "#00bcd4",
"accent": "#9c27b0",
"success": "#4caf50",
@@ -43,9 +42,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#262335",
"ink": "#ffffff",
"primary": "#36f9f6",
"accent": "#b084eb",
"success": "#72f1b8",

View File

@@ -3,9 +3,8 @@
"name": "Tokyonight",
"id": "tokyonight",
"light": {
"palette": {
"seeds": {
"neutral": "#e1e2e7",
"ink": "#273153",
"primary": "#2e7de9",
"accent": "#b15c00",
"success": "#587539",
@@ -24,9 +23,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#1a1b26",
"ink": "#c0caf5",
"primary": "#7aa2f7",
"accent": "#ff9e64",
"success": "#9ece6a",

View File

@@ -3,9 +3,8 @@
"name": "Vercel",
"id": "vercel",
"light": {
"palette": {
"seeds": {
"neutral": "#FFFFFF",
"ink": "#171717",
"primary": "#0070F3",
"accent": "#8E4EC6",
"success": "#388E3C",
@@ -45,9 +44,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#000000",
"ink": "#EDEDED",
"primary": "#0070F3",
"accent": "#8E4EC6",
"success": "#46A758",

View File

@@ -3,9 +3,8 @@
"name": "Vesper",
"id": "vesper",
"light": {
"palette": {
"seeds": {
"neutral": "#F0F0F0",
"ink": "#101010",
"primary": "#FFC799",
"accent": "#B30000",
"success": "#99FFE4",
@@ -26,9 +25,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#101010",
"ink": "#FFF",
"primary": "#FFC799",
"accent": "#FF8080",
"success": "#99FFE4",

View File

@@ -3,9 +3,8 @@
"name": "Zenburn",
"id": "zenburn",
"light": {
"palette": {
"seeds": {
"neutral": "#ffffef",
"ink": "#3f3f3f",
"primary": "#5f7f8f",
"accent": "#5f8f8f",
"success": "#5f8f5f",
@@ -43,9 +42,8 @@
}
},
"dark": {
"palette": {
"seeds": {
"neutral": "#3f3f3f",
"ink": "#dcdccc",
"primary": "#8cd0d3",
"accent": "#93e0e3",
"success": "#7f9f7f",

View File

@@ -13,19 +13,6 @@ export interface ThemeSeedColors {
warning: HexColor
error: HexColor
info: HexColor
interactive: HexColor
diffAdd: HexColor
diffDelete: HexColor
}
export interface ThemePaletteColors {
neutral: HexColor
ink: HexColor
primary: HexColor
success: HexColor
warning: HexColor
error: HexColor
info: HexColor
accent?: HexColor
interactive?: HexColor
diffAdd?: HexColor
@@ -36,9 +23,7 @@ type ThemeVariantBase = {
overrides?: Record<string, ColorValue>
}
export type ThemeVariant =
| ({ seeds: ThemeSeedColors; palette?: never } & ThemeVariantBase)
| ({ palette: ThemePaletteColors; seeds?: never } & ThemeVariantBase)
export type ThemeVariant = { seeds: ThemeSeedColors } & ThemeVariantBase
export interface DesktopTheme {
$schema?: string