mirror of
https://gitea.toothfairyai.com/ToothFairyAI/tf_code.git
synced 2026-04-13 12:14:47 +00:00
feat(app): better themes (#16889)
This commit is contained in:
Adam
@@ -1,11 +1,11 @@
|
||||
import type { ColorValue, DesktopTheme, HexColor, ResolvedTheme, ThemeVariant } from "./types"
|
||||
import { blend, generateNeutralScale, generateScale, hexToOklch, oklchToHex, shift, withAlpha } from "./color"
|
||||
import { blend, generateNeutralScale, generateScale, hexToOklch, hexToRgb, shift, withAlpha } from "./color"
|
||||
|
||||
export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): ResolvedTheme {
|
||||
const colors = getColors(variant)
|
||||
const { overrides = {} } = variant
|
||||
|
||||
const neutral = generateNeutralScale(colors.neutral, isDark)
|
||||
const neutral = generateNeutralScale(colors.neutral, isDark, colors.ink)
|
||||
const primary = generateScale(colors.primary, isDark)
|
||||
const accent = generateScale(colors.accent, isDark)
|
||||
const success = generateScale(colors.success, isDark)
|
||||
@@ -39,12 +39,20 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
|
||||
isDark,
|
||||
)
|
||||
const ink = colors.ink ?? colors.neutral
|
||||
const tint = hasInk ? 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 = noInk || (Boolean(backgroundOverride) && !backgroundHex)
|
||||
const content = (seed: HexColor, scale: HexColor[]) => {
|
||||
const value = isDark ? seed : hexToOklch(seed).l > 0.82 ? scale[10] : seed
|
||||
return shift(value, { c: isDark ? 1.16 : 1.1 })
|
||||
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"
|
||||
@@ -87,9 +95,9 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
|
||||
const compactInkBackground =
|
||||
colors.compact && hasInk && isDark
|
||||
? {
|
||||
base: neutral[2],
|
||||
weak: neutral[3],
|
||||
strong: neutral[1],
|
||||
base: neutral[0],
|
||||
weak: neutral[1],
|
||||
strong: neutral[0],
|
||||
stronger: neutral[2],
|
||||
}
|
||||
: undefined
|
||||
@@ -118,6 +126,40 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
|
||||
)
|
||||
|
||||
const neutralAlpha = noInk ? generateNeutralOverlayScale(neutral, isDark) : generateNeutralAlphaScale(neutral, isDark)
|
||||
const brandb = brandl[isDark ? 9 : 8]
|
||||
const brandh = brandl[isDark ? 10 : 9]
|
||||
const interb = interactive[isDark ? 5 : 4]
|
||||
const interh = interactive[isDark ? 6 : 5]
|
||||
const interw = interactive[isDark ? 4 : 3]
|
||||
const succb = success[isDark ? 5 : 4]
|
||||
const succw = success[isDark ? 4 : 3]
|
||||
const succs = success[10]
|
||||
const warnb = (noInk && isDark ? warningl : warning)[isDark ? 5 : 4]
|
||||
const warnw = (noInk && isDark ? warningl : warning)[isDark ? 4 : 3]
|
||||
const warns = (noInk && isDark ? warningl : warning)[10]
|
||||
const critb = error[isDark ? 5 : 4]
|
||||
const critw = error[isDark ? 4 : 3]
|
||||
const crits = error[10]
|
||||
const infob = (noInk && isDark ? infol : info)[isDark ? 5 : 4]
|
||||
const infow = (noInk && isDark ? infol : info)[isDark ? 4 : 3]
|
||||
const infos = (noInk && isDark ? infol : info)[10]
|
||||
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))
|
||||
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)
|
||||
return (light + 0.05) / (dark + 0.05)
|
||||
}
|
||||
const on = (fill: HexColor) => {
|
||||
const light = "#ffffff" as HexColor
|
||||
const dark = "#000000" as HexColor
|
||||
return hit(light, fill) > hit(dark, fill) ? light : dark
|
||||
}
|
||||
|
||||
const tokens: ResolvedTheme = {}
|
||||
|
||||
@@ -141,8 +183,8 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
|
||||
: (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[0] : noInk ? shadow[0] : neutral[11]
|
||||
tokens["surface-float-base-hover"] = isDark ? neutral[1] : noInk ? shadow[1] : neutral[10]
|
||||
tokens["surface-float-base"] = isDark ? (hasInk ? neutral[1] : neutral[0]) : noInk ? shadow[0] : neutral[11]
|
||||
tokens["surface-float-base-hover"] = isDark ? (hasInk ? neutral[2] : neutral[1]) : noInk ? shadow[1] : 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]
|
||||
@@ -154,26 +196,26 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
|
||||
tokens["surface-strong"] = isDark ? neutralAlpha[6] : "#ffffff"
|
||||
tokens["surface-raised-stronger-non-alpha"] = isDark ? neutral[2] : "#ffffff"
|
||||
|
||||
tokens["surface-brand-base"] = brandl[8]
|
||||
tokens["surface-brand-hover"] = brandl[9]
|
||||
tokens["surface-brand-base"] = brandb
|
||||
tokens["surface-brand-hover"] = brandh
|
||||
|
||||
tokens["surface-interactive-base"] = interactive[isDark ? 4 : 3]
|
||||
tokens["surface-interactive-hover"] = interactive[isDark ? 5 : 4]
|
||||
tokens["surface-interactive-weak"] = interactive[isDark ? 3 : 2]
|
||||
tokens["surface-interactive-weak-hover"] = noInk && isDark ? interl[4] : interactive[isDark ? 4 : 3]
|
||||
tokens["surface-interactive-base"] = interb
|
||||
tokens["surface-interactive-hover"] = interh
|
||||
tokens["surface-interactive-weak"] = interw
|
||||
tokens["surface-interactive-weak-hover"] = noInk && isDark ? interl[5] : interb
|
||||
|
||||
tokens["surface-success-base"] = success[isDark ? 4 : 3]
|
||||
tokens["surface-success-weak"] = success[isDark ? 3 : 2]
|
||||
tokens["surface-success-strong"] = success[9]
|
||||
tokens["surface-warning-base"] = (noInk && isDark ? warningl : warning)[isDark ? 4 : 3]
|
||||
tokens["surface-warning-weak"] = (noInk && isDark ? warningl : warning)[isDark ? 3 : 2]
|
||||
tokens["surface-warning-strong"] = (noInk && isDark ? warningl : warning)[9]
|
||||
tokens["surface-critical-base"] = error[isDark ? 4 : 3]
|
||||
tokens["surface-critical-weak"] = error[isDark ? 3 : 2]
|
||||
tokens["surface-critical-strong"] = error[9]
|
||||
tokens["surface-info-base"] = (noInk && isDark ? infol : info)[isDark ? 4 : 3]
|
||||
tokens["surface-info-weak"] = (noInk && isDark ? infol : info)[isDark ? 3 : 2]
|
||||
tokens["surface-info-strong"] = (noInk && isDark ? infol : info)[9]
|
||||
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]
|
||||
@@ -200,16 +242,16 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
|
||||
tokens["input-focus"] = interactive[0]
|
||||
tokens["input-disabled"] = neutral[3]
|
||||
|
||||
tokens["text-base"] = hasInk ? ink : noInk ? (isDark ? neutralAlpha[10] : neutral[10]) : neutral[10]
|
||||
tokens["text-base"] = hasInk ? (body as HexColor) : noInk ? (isDark ? neutralAlpha[10] : neutral[10]) : neutral[10]
|
||||
tokens["text-weak"] = hasInk
|
||||
? shift(ink, { l: isDark ? -0.18 : 0.16, c: 0.88 })
|
||||
? shift(body as HexColor, { l: isDark ? -0.11 : 0.11, c: 0.9 })
|
||||
: noInk
|
||||
? isDark
|
||||
? neutralAlpha[8]
|
||||
: neutral[8]
|
||||
: neutral[8]
|
||||
tokens["text-weaker"] = hasInk
|
||||
? shift(ink, { l: isDark ? -0.3 : 0.26, c: isDark ? 0.74 : 0.68 })
|
||||
? shift(body as HexColor, { l: isDark ? -0.2 : 0.21, c: isDark ? 0.78 : 0.72 })
|
||||
: noInk
|
||||
? isDark
|
||||
? neutralAlpha[7]
|
||||
@@ -217,8 +259,8 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
|
||||
: neutral[7]
|
||||
tokens["text-strong"] = hasInk
|
||||
? isDark && colors.compact
|
||||
? blend("#ffffff", ink, 0.82)
|
||||
: shift(ink, { l: isDark ? 0.06 : -0.09, c: 1 })
|
||||
? blend("#ffffff", body as HexColor, 0.9)
|
||||
: shift(body as HexColor, { l: isDark ? 0.055 : -0.07, c: 1.04 })
|
||||
: noInk
|
||||
? isDark
|
||||
? neutralAlpha[11]
|
||||
@@ -234,29 +276,29 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
|
||||
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 : 8]
|
||||
tokens["text-on-brand-base"] = neutralAlpha[10]
|
||||
tokens["text-on-interactive-base"] = isDark ? neutral[11] : neutral[0]
|
||||
tokens["text-on-interactive-weak"] = neutralAlpha[10]
|
||||
tokens["text-on-success-base"] = success[isDark ? 8 : 9]
|
||||
tokens["text-on-critical-base"] = error[isDark ? 8 : 9]
|
||||
tokens["text-on-critical-weak"] = error[7]
|
||||
tokens["text-on-critical-strong"] = error[11]
|
||||
tokens["text-on-warning-base"] = neutralAlpha[10]
|
||||
tokens["text-on-info-base"] = neutralAlpha[10]
|
||||
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[isDark ? 8 : 9]
|
||||
tokens["text-diff-delete-strong"] = diffDelete[11]
|
||||
tokens["text-diff-add-strong"] = diffAdd[isDark ? 7 : 11]
|
||||
tokens["text-on-info-weak"] = neutralAlpha[8]
|
||||
tokens["text-on-info-strong"] = neutralAlpha[11]
|
||||
tokens["text-on-warning-weak"] = neutralAlpha[8]
|
||||
tokens["text-on-warning-strong"] = neutralAlpha[11]
|
||||
tokens["text-on-success-weak"] = success[isDark ? 7 : 5]
|
||||
tokens["text-on-success-strong"] = success[11]
|
||||
tokens["text-on-brand-weak"] = neutralAlpha[8]
|
||||
tokens["text-on-brand-weaker"] = neutralAlpha[7]
|
||||
tokens["text-on-brand-strong"] = neutralAlpha[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"] = noInk ? (isDark ? neutral[1] : neutral[0]) : isDark ? neutral[2] : neutral[0]
|
||||
@@ -267,27 +309,27 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
|
||||
if (noInk) {
|
||||
const tone = (alpha: number) => alphaTone((isDark ? "#ffffff" : "#000000") as HexColor, alpha)
|
||||
if (isDark) {
|
||||
tokens["surface-base"] = tone(0.031)
|
||||
tokens["surface-base-hover"] = tone(0.039)
|
||||
tokens["surface-base-active"] = tone(0.059)
|
||||
tokens["surface-raised-base"] = tone(0.059)
|
||||
tokens["surface-raised-base-hover"] = tone(0.078)
|
||||
tokens["surface-raised-base-active"] = tone(0.102)
|
||||
tokens["surface-raised-strong"] = tone(0.078)
|
||||
tokens["surface-raised-strong-hover"] = tone(0.129)
|
||||
tokens["surface-raised-stronger"] = tone(0.129)
|
||||
tokens["surface-raised-stronger-hover"] = tone(0.169)
|
||||
tokens["surface-weak"] = tone(0.078)
|
||||
tokens["surface-weaker"] = tone(0.102)
|
||||
tokens["surface-strong"] = tone(0.169)
|
||||
tokens["surface-base"] = tone(0.045)
|
||||
tokens["surface-base-hover"] = tone(0.065)
|
||||
tokens["surface-base-active"] = tone(0.095)
|
||||
tokens["surface-raised-base"] = tone(0.085)
|
||||
tokens["surface-raised-base-hover"] = tone(0.115)
|
||||
tokens["surface-raised-base-active"] = tone(0.15)
|
||||
tokens["surface-raised-strong"] = tone(0.115)
|
||||
tokens["surface-raised-strong-hover"] = tone(0.17)
|
||||
tokens["surface-raised-stronger"] = tone(0.17)
|
||||
tokens["surface-raised-stronger-hover"] = tone(0.22)
|
||||
tokens["surface-weak"] = tone(0.115)
|
||||
tokens["surface-weaker"] = tone(0.15)
|
||||
tokens["surface-strong"] = tone(0.22)
|
||||
tokens["surface-raised-stronger-non-alpha"] = neutral[1]
|
||||
tokens["surface-inset-base"] = withAlpha("#000000", 0.5) as ColorValue
|
||||
tokens["surface-inset-base-hover"] = tokens["surface-inset-base"]
|
||||
tokens["surface-inset-strong"] = withAlpha("#000000", 0.8) as ColorValue
|
||||
tokens["surface-inset-strong-hover"] = tokens["surface-inset-strong"]
|
||||
tokens["button-secondary-hover"] = tone(0.039)
|
||||
tokens["button-ghost-hover"] = tone(0.031)
|
||||
tokens["button-ghost-hover2"] = tone(0.059)
|
||||
tokens["button-secondary-hover"] = tone(0.065)
|
||||
tokens["button-ghost-hover"] = tone(0.045)
|
||||
tokens["button-ghost-hover2"] = tone(0.095)
|
||||
tokens["input-base"] = neutral[1]
|
||||
tokens["input-hover"] = neutral[1]
|
||||
tokens["input-selected"] = interactive[1]
|
||||
@@ -295,30 +337,30 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
|
||||
}
|
||||
|
||||
if (!isDark) {
|
||||
tokens["surface-base"] = tone(0.031)
|
||||
tokens["surface-base-hover"] = tone(0.059)
|
||||
tokens["surface-base-active"] = tone(0.051)
|
||||
tokens["surface-raised-base"] = tone(0.031)
|
||||
tokens["surface-raised-base-hover"] = tone(0.051)
|
||||
tokens["surface-raised-base-active"] = tone(0.09)
|
||||
tokens["surface-base"] = tone(0.045)
|
||||
tokens["surface-base-hover"] = tone(0.08)
|
||||
tokens["surface-base-active"] = tone(0.105)
|
||||
tokens["surface-raised-base"] = tone(0.05)
|
||||
tokens["surface-raised-base-hover"] = tone(0.08)
|
||||
tokens["surface-raised-base-active"] = tone(0.125)
|
||||
tokens["surface-raised-strong"] = neutral[0]
|
||||
tokens["surface-raised-strong-hover"] = "#ffffff"
|
||||
tokens["surface-raised-stronger"] = "#ffffff"
|
||||
tokens["surface-raised-stronger-hover"] = "#ffffff"
|
||||
tokens["surface-weak"] = tone(0.051)
|
||||
tokens["surface-weaker"] = tone(0.071)
|
||||
tokens["surface-weak"] = tone(0.08)
|
||||
tokens["surface-weaker"] = tone(0.105)
|
||||
tokens["surface-strong"] = "#ffffff"
|
||||
tokens["surface-raised-stronger-non-alpha"] = "#ffffff"
|
||||
tokens["surface-inset-strong"] = tone(0.09)
|
||||
tokens["surface-inset-strong-hover"] = tokens["surface-inset-strong"]
|
||||
tokens["button-secondary-hover"] = blend("#ffffff", background, 0.04)
|
||||
tokens["button-ghost-hover"] = tone(0.031)
|
||||
tokens["button-ghost-hover2"] = tone(0.051)
|
||||
tokens["button-ghost-hover"] = tone(0.045)
|
||||
tokens["button-ghost-hover2"] = tone(0.08)
|
||||
tokens["input-base"] = neutral[0]
|
||||
tokens["input-hover"] = neutral[1]
|
||||
}
|
||||
|
||||
tokens["surface-base-interactive-active"] = withAlpha(colors.interactive, isDark ? 0.125 : 0.09) as ColorValue
|
||||
tokens["surface-base-interactive-active"] = withAlpha(colors.interactive, isDark ? 0.18 : 0.12) as ColorValue
|
||||
}
|
||||
|
||||
tokens["border-base"] = hasInk ? borderTone(0.22, 0.16) : neutralAlpha[6]
|
||||
@@ -370,25 +412,25 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
|
||||
tokens["border-focus"] = tokens["border-active"]
|
||||
}
|
||||
|
||||
tokens["border-interactive-base"] = (noInk && isDark ? interl : interactive)[6]
|
||||
tokens["border-interactive-hover"] = (noInk && isDark ? interl : interactive)[7]
|
||||
tokens["border-interactive-active"] = (noInk && isDark ? interl : interactive)[8]
|
||||
tokens["border-interactive-selected"] = (noInk && isDark ? interl : interactive)[8]
|
||||
tokens["border-interactive-base"] = (noInk && isDark ? interl : interactive)[7]
|
||||
tokens["border-interactive-hover"] = (noInk && isDark ? interl : interactive)[8]
|
||||
tokens["border-interactive-active"] = (noInk && isDark ? interl : interactive)[9]
|
||||
tokens["border-interactive-selected"] = (noInk && isDark ? interl : interactive)[9]
|
||||
tokens["border-interactive-disabled"] = neutral[7]
|
||||
tokens["border-interactive-focus"] = (noInk && isDark ? interl : interactive)[8]
|
||||
tokens["border-interactive-focus"] = (noInk && isDark ? interl : interactive)[9]
|
||||
|
||||
tokens["border-success-base"] = (noInk && isDark ? successl : success)[5]
|
||||
tokens["border-success-hover"] = (noInk && isDark ? successl : success)[6]
|
||||
tokens["border-success-selected"] = (noInk && isDark ? successl : success)[8]
|
||||
tokens["border-warning-base"] = (noInk && isDark ? warningl : warning)[5]
|
||||
tokens["border-warning-hover"] = (noInk && isDark ? warningl : warning)[6]
|
||||
tokens["border-warning-selected"] = (noInk && isDark ? warningl : warning)[8]
|
||||
tokens["border-critical-base"] = error[isDark ? 4 : 5]
|
||||
tokens["border-critical-hover"] = error[6]
|
||||
tokens["border-critical-selected"] = error[8]
|
||||
tokens["border-info-base"] = (noInk && isDark ? infol : info)[5]
|
||||
tokens["border-info-hover"] = (noInk && isDark ? infol : info)[6]
|
||||
tokens["border-info-selected"] = (noInk && isDark ? infol : info)[8]
|
||||
tokens["border-success-base"] = (noInk && isDark ? successl : success)[6]
|
||||
tokens["border-success-hover"] = (noInk && isDark ? successl : success)[7]
|
||||
tokens["border-success-selected"] = (noInk && isDark ? successl : success)[9]
|
||||
tokens["border-warning-base"] = (noInk && isDark ? warningl : warning)[6]
|
||||
tokens["border-warning-hover"] = (noInk && isDark ? warningl : warning)[7]
|
||||
tokens["border-warning-selected"] = (noInk && isDark ? warningl : warning)[9]
|
||||
tokens["border-critical-base"] = error[isDark ? 5 : 6]
|
||||
tokens["border-critical-hover"] = error[7]
|
||||
tokens["border-critical-selected"] = error[9]
|
||||
tokens["border-info-base"] = (noInk && isDark ? infol : info)[6]
|
||||
tokens["border-info-hover"] = (noInk && isDark ? infol : info)[7]
|
||||
tokens["border-info-selected"] = (noInk && isDark ? infol : info)[9]
|
||||
tokens["border-color"] = "#ffffff"
|
||||
|
||||
tokens["icon-base"] = hasInk && !isDark ? tokens["text-weak"] : neutral[isDark ? 9 : 8]
|
||||
@@ -411,7 +453,7 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
|
||||
tokens["icon-strong-disabled"] = noInk && isDark ? neutral[6] : 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-interactive-base"] = interactive[9]
|
||||
tokens["icon-success-base"] = success[isDark ? 8 : 6]
|
||||
tokens["icon-success-hover"] = success[isDark ? 9 : 7]
|
||||
tokens["icon-success-active"] = success[10]
|
||||
@@ -424,28 +466,28 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
|
||||
tokens["icon-info-base"] = info[isDark ? 6 : 6]
|
||||
tokens["icon-info-hover"] = info[7]
|
||||
tokens["icon-info-active"] = info[10]
|
||||
tokens["icon-on-brand-base"] = neutralAlpha[10]
|
||||
tokens["icon-on-brand-hover"] = neutralAlpha[11]
|
||||
tokens["icon-on-brand-selected"] = neutralAlpha[11]
|
||||
tokens["icon-on-interactive-base"] = isDark ? neutral[11] : neutral[0]
|
||||
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"] = withAlpha(success[8], 0.9) as ColorValue
|
||||
tokens["icon-on-success-hover"] = withAlpha(success[9], 0.9) as ColorValue
|
||||
tokens["icon-on-success-selected"] = withAlpha(success[10], 0.9) as ColorValue
|
||||
tokens["icon-on-warning-base"] = withAlpha(amber[8], 0.9) as ColorValue
|
||||
tokens["icon-on-warning-hover"] = withAlpha(amber[9], 0.9) as ColorValue
|
||||
tokens["icon-on-warning-selected"] = withAlpha(amber[10], 0.9) as ColorValue
|
||||
tokens["icon-on-critical-base"] = withAlpha(error[8], 0.9) as ColorValue
|
||||
tokens["icon-on-critical-hover"] = withAlpha(error[9], 0.9) as ColorValue
|
||||
tokens["icon-on-critical-selected"] = withAlpha(error[10], 0.9) as ColorValue
|
||||
tokens["icon-on-info-base"] = info[8]
|
||||
tokens["icon-on-info-hover"] = withAlpha(info[9], 0.9) as ColorValue
|
||||
tokens["icon-on-info-selected"] = withAlpha(info[10], 0.9) as ColorValue
|
||||
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]
|
||||
@@ -459,7 +501,7 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
|
||||
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-keyword"] = content(colors.accent, accent)
|
||||
tokens["syntax-primitive"] = isDark ? "#ffba92" : "#fb4804"
|
||||
tokens["syntax-operator"] = isDark ? "var(--text-weak)" : "var(--text-base)"
|
||||
tokens["syntax-variable"] = "var(--text-strong)"
|
||||
@@ -468,9 +510,9 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
|
||||
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[9]
|
||||
tokens["syntax-warning"] = amber[9]
|
||||
tokens["syntax-critical"] = error[9]
|
||||
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]
|
||||
@@ -496,18 +538,18 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
|
||||
tokens["syntax-comment"] = "var(--text-weak)"
|
||||
tokens["syntax-regexp"] = "var(--text-base)"
|
||||
tokens["syntax-string"] = content(colors.success, success)
|
||||
tokens["syntax-keyword"] = "var(--text-weak)"
|
||||
tokens["syntax-primitive"] = content(colors.accent, accent)
|
||||
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.primary, primary)
|
||||
tokens["syntax-property"] = content(colors.info, info)
|
||||
tokens["syntax-type"] = content(colors.warning, warning)
|
||||
tokens["syntax-constant"] = content(colors.info, info)
|
||||
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[9]
|
||||
tokens["syntax-warning"] = amber[9]
|
||||
tokens["syntax-critical"] = error[9]
|
||||
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]
|
||||
@@ -543,9 +585,9 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
|
||||
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[9]
|
||||
tokens["syntax-warning"] = amber[9]
|
||||
tokens["syntax-critical"] = error[9]
|
||||
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]
|
||||
@@ -677,17 +719,10 @@ function generateNeutralOverlayScale(neutralScale: HexColor[], isDark: boolean):
|
||||
|
||||
function generateNeutralAlphaScale(neutralScale: HexColor[], isDark: boolean): HexColor[] {
|
||||
const alphas = isDark
|
||||
? [0.024, 0.048, 0.088, 0.128, 0.17, 0.215, 0.275, 0.38, 0.46, 0.54, 0.74, 0.95]
|
||||
: [0.014, 0.034, 0.066, 0.098, 0.128, 0.158, 0.208, 0.282, 0.47, 0.625, 0.515, 0.88]
|
||||
? [0.05, 0.085, 0.13, 0.18, 0.24, 0.31, 0.4, 0.52, 0.64, 0.76, 0.88, 0.98]
|
||||
: [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 neutralScale.map((hex, i) => {
|
||||
const baseOklch = hexToOklch(hex)
|
||||
const targetL = isDark ? 0.1 + alphas[i] * 0.8 : 1 - alphas[i] * 0.8
|
||||
return oklchToHex({
|
||||
...baseOklch,
|
||||
l: baseOklch.l * alphas[i] + targetL * (1 - alphas[i]),
|
||||
})
|
||||
})
|
||||
return alphas.map((alpha) => blend(neutralScale[11], neutralScale[0], alpha))
|
||||
}
|
||||
|
||||
function getHex(value: ColorValue | undefined): HexColor | undefined {
|
||||
|
||||
Reference in New Issue
Block a user