mirror of
https://github.com/anomalyco/opencode.git
synced 2026-03-27 09:04:41 +00:00
Compare commits
3 Commits
beta
...
new-colors
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
8427f890e6 | ||
|
|
bb9b920741 | ||
|
|
5bee79cbc8 |
@@ -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
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
export type {
|
||||
DesktopTheme,
|
||||
ThemePaletteColors,
|
||||
ThemeSeedColors,
|
||||
ThemeVariant,
|
||||
HexColor,
|
||||
|
||||
70
packages/ui/src/theme/resolve.test.ts
Normal file
70
packages/ui/src/theme/resolve.test.ts
Normal 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])
|
||||
}
|
||||
})
|
||||
})
|
||||
@@ -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 {
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user