feat(app): better themes (#16889)

packages/ui/src/theme/color.ts

@@ -135,12 +135,25 @@ export function generateScale(seed: HexColor, isDark: boolean): HexColor[] {
   const scale: HexColor[] = []
 
   const lightSteps = isDark
-    ? [0.182, 0.21, 0.261, 0.302, 0.341, 0.387, 0.443, 0.514, base.l, Math.max(0, base.l - 0.017), 0.8, 0.93]
-    : [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.548, 0.33]
+    ? [
+        0.182,
+        0.21,
+        0.261,
+        0.302,
+        0.341,
+        0.387,
+        0.443,
+        0.514,
+        base.l,
+        Math.max(0, base.l - 0.017),
+        Math.min(0.94, Math.max(0.84, base.l + 0.02)),
+        0.975,
+      ]
+    : [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.205, 0.275, 0.46, 0.62, 0.71, 0.79, 0.87, 0.97, 1.04, 1.03, 1, 0.58]
-    : [0.045, 0.128, 0.34, 0.5, 0.61, 0.69, 0.77, 0.89, 1, 1, 0.97, 0.56]
+    ? [0.34, 0.45, 0.64, 0.82, 0.96, 1.06, 1.14, 1.2, 1.24, 1.28, 1.34, 1.08]
+    : [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(
@@ -155,10 +168,35 @@ export function generateScale(seed: HexColor, isDark: boolean): HexColor[] {
   return scale
 }
 
-export function generateNeutralScale(seed: HexColor, isDark: boolean): HexColor[] {
+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 * 0.3),
+        h: base.h,
+      })
+    const bg = isDark
+      ? sink(clamp(0.06 + Math.max(0, base.l - 0.18) * 0.22 + base.c * 1.4, 0.06, 0.14))
+      : 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.03, 0.055, 0.085, 0.125, 0.18, 0.255, 0.35, 0.5, 0.67, 0.84, 0.975]
+      : [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))
+  }
+
   const base = hexToOklch(seed)
   const scale: HexColor[] = []
-  const neutralChroma = Math.min(base.c, 0.02)
+  const neutralChroma = Math.min(base.c, isDark ? 0.05 : 0.04)
 
   const lightSteps = isDark
     ? [0.2, 0.226, 0.256, 0.277, 0.301, 0.325, 0.364, 0.431, base.l, 0.593, 0.706, 0.946]

packages/ui/src/theme/resolve.ts

@@ -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-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-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-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"] = noInk && isDark ? interl[5] : 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]
@@ -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-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-interactive-focus"] = (noInk && isDark ? interl : interactive)[9]
+
+  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]
-
-  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]),
-    })
-  })
+    ? [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 alphas.map((alpha) => blend(neutralScale[11], neutralScale[0], alpha))
 }
 
 function getHex(value: ColorValue | undefined): HexColor | undefined {

packages/ui/src/theme/themes/aura.json

@@ -16,7 +16,13 @@
       "diffDelete": "#f5b3b3"
     },
     "overrides": {
-      "syntax-keyword": "#7b5ae0"
+      "syntax-comment": "#8d88a3",
+      "syntax-keyword": "#7b5ae0",
+      "syntax-string": "#2b8a57",
+      "syntax-primitive": "#2f78b8",
+      "syntax-property": "#a96a22",
+      "syntax-type": "#2b8a57",
+      "syntax-constant": "#d94f4f"
     }
   },
   "dark": {
@@ -33,7 +39,13 @@
       "diffDelete": "#ff6767"
     },
     "overrides": {
-      "syntax-keyword": "#a277ff"
+      "syntax-comment": "#6d6a7e",
+      "syntax-keyword": "#a277ff",
+      "syntax-string": "#61ffca",
+      "syntax-primitive": "#82e2ff",
+      "syntax-property": "#ffca85",
+      "syntax-type": "#61ffca",
+      "syntax-constant": "#ff6767"
     }
   }
 }

packages/ui/src/theme/themes/ayu.json

@@ -16,7 +16,13 @@
       "diffDelete": "#e6656a"
     },
     "overrides": {
-      "syntax-keyword": "#ea9f41"
+      "syntax-comment": "#6e7681",
+      "syntax-keyword": "#c76a1a",
+      "syntax-string": "#6f8f00",
+      "syntax-primitive": "#b87500",
+      "syntax-property": "#2f86b7",
+      "syntax-type": "#227fc0",
+      "syntax-constant": "#a37acc"
     }
   },
   "dark": {
@@ -33,7 +39,13 @@
       "diffDelete": "#f58572"
     },
     "overrides": {
-      "syntax-keyword": "#ffad66"
+      "syntax-comment": "#5a6673",
+      "syntax-keyword": "#ff8f40",
+      "syntax-string": "#aad94c",
+      "syntax-primitive": "#ffb454",
+      "syntax-property": "#39bae6",
+      "syntax-type": "#59c2ff",
+      "syntax-constant": "#d2a6ff"
     }
   }
 }

packages/ui/src/theme/themes/carbonfox.json

@@ -17,7 +17,13 @@
       "diffDelete": "#da1e28"
     },
     "overrides": {
-      "syntax-keyword": "#8a3ffc"
+      "syntax-comment": "#6f6f6f",
+      "syntax-keyword": "#8a3ffc",
+      "syntax-string": "#198038",
+      "syntax-primitive": "#0f62fe",
+      "syntax-property": "#0043ce",
+      "syntax-type": "#8a5f00",
+      "syntax-constant": "#da1e28"
     }
   },
   "dark": {
@@ -35,7 +41,13 @@
       "diffDelete": "#ff8389"
     },
     "overrides": {
-      "syntax-keyword": "#be95ff"
+      "syntax-comment": "#6f6f6f",
+      "syntax-keyword": "#be95ff",
+      "syntax-string": "#42be65",
+      "syntax-primitive": "#33b1ff",
+      "syntax-property": "#78a9ff",
+      "syntax-type": "#f1c21b",
+      "syntax-constant": "#ff8389"
     }
   }
 }

packages/ui/src/theme/themes/catppuccin.json

@@ -16,8 +16,10 @@
       "diffDelete": "#e78284"
     },
     "overrides": {
+      "syntax-comment": "#6c7086",
       "syntax-keyword": "#8839ef",
-      "syntax-primitive": "#fe640b"
+      "syntax-primitive": "#1e66f5",
+      "syntax-constant": "#ca6702"
     }
   },
   "dark": {
@@ -34,8 +36,10 @@
       "diffDelete": "#f38ba8"
     },
     "overrides": {
+      "syntax-comment": "#6c7086",
       "syntax-keyword": "#cba6f7",
-      "syntax-primitive": "#fab387"
+      "syntax-primitive": "#89b4fa",
+      "syntax-constant": "#fab387"
     }
   }
 }

packages/ui/src/theme/themes/dracula.json

@@ -16,9 +16,12 @@
       "diffDelete": "#f8a1b8"
     },
     "overrides": {
+      "syntax-comment": "#7d7f97",
       "syntax-keyword": "#d16090",
       "syntax-string": "#596600",
-      "syntax-primitive": "#7c6bf5"
+      "syntax-primitive": "#2f8f57",
+      "syntax-property": "#1d7fc5",
+      "syntax-constant": "#7c6bf5"
     }
   },
   "dark": {
@@ -35,9 +38,12 @@
       "diffDelete": "#ff6b81"
     },
     "overrides": {
+      "syntax-comment": "#6272a4",
       "syntax-keyword": "#ff79c6",
       "syntax-string": "#f1fa8c",
-      "syntax-primitive": "#bd93f9"
+      "syntax-primitive": "#50fa7b",
+      "syntax-property": "#8be9fd",
+      "syntax-constant": "#bd93f9"
     }
   }
 }

packages/ui/src/theme/themes/gruvbox.json

@@ -16,8 +16,10 @@
       "diffDelete": "#9d0006"
     },
     "overrides": {
+      "syntax-comment": "#928374",
       "syntax-keyword": "#9d0006",
-      "syntax-primitive": "#8f3f71"
+      "syntax-primitive": "#076678",
+      "syntax-constant": "#8f3f71"
     }
   },
   "dark": {
@@ -34,8 +36,10 @@
       "diffDelete": "#fb4934"
     },
     "overrides": {
+      "syntax-comment": "#928374",
       "syntax-keyword": "#fb4934",
-      "syntax-primitive": "#d3869b"
+      "syntax-primitive": "#83a598",
+      "syntax-constant": "#d3869b"
     }
   }
 }

packages/ui/src/theme/themes/monokai.json

@@ -16,9 +16,12 @@
       "diffDelete": "#f6a3ae"
     },
     "overrides": {
+      "syntax-comment": "#8a816f",
       "syntax-keyword": "#d9487c",
       "syntax-string": "#8a6500",
-      "syntax-primitive": "#bf7bff"
+      "syntax-primitive": "#3c8d2f",
+      "syntax-property": "#1f88c8",
+      "syntax-constant": "#9b5fe0"
     }
   },
   "dark": {
@@ -35,9 +38,12 @@
       "diffDelete": "#f4477c"
     },
     "overrides": {
+      "syntax-comment": "#75715e",
       "syntax-keyword": "#f92672",
       "syntax-string": "#e6db74",
-      "syntax-primitive": "#ae81ff"
+      "syntax-primitive": "#a6e22e",
+      "syntax-property": "#66d9ef",
+      "syntax-constant": "#ae81ff"
     }
   }
 }

packages/ui/src/theme/themes/nightowl.json

@@ -16,7 +16,10 @@
       "diffDelete": "#de3d3b"
     },
     "overrides": {
-      "syntax-keyword": "#994cc3"
+      "syntax-comment": "#7a8181",
+      "syntax-keyword": "#994cc3",
+      "syntax-primitive": "#4876d6",
+      "syntax-constant": "#c96765"
     }
   },
   "dark": {
@@ -36,7 +39,8 @@
       "syntax-comment": "#637777",
       "syntax-keyword": "#c792ea",
       "syntax-string": "#ecc48d",
-      "syntax-primitive": "#f78c6c"
+      "syntax-primitive": "#82aaff",
+      "syntax-constant": "#f78c6c"
     }
   }
 }

packages/ui/src/theme/themes/nord.json

@@ -16,9 +16,11 @@
       "diffDelete": "#bf616a"
     },
     "overrides": {
+      "syntax-comment": "#6b7282",
       "syntax-keyword": "#5e81ac",
-      "syntax-string": "#a3be8c",
-      "syntax-primitive": "#b48ead"
+      "syntax-string": "#6f8758",
+      "syntax-primitive": "#5e81ac",
+      "syntax-constant": "#8d6886"
     }
   },
   "dark": {
@@ -35,8 +37,10 @@
       "diffDelete": "#bf616a"
     },
     "overrides": {
+      "syntax-comment": "#616e88",
       "syntax-keyword": "#81a1c1",
-      "syntax-primitive": "#b48ead"
+      "syntax-primitive": "#88c0d0",
+      "syntax-constant": "#b48ead"
     }
   }
 }

packages/ui/src/theme/themes/oc-2.json

@@ -15,6 +15,16 @@
       "diffDelete": "#fc533a"
     },
     "overrides": {
+      "syntax-comment": "#7a7a7a",
+      "syntax-keyword": "#a753ae",
+      "syntax-string": "#00ceb9",
+      "syntax-primitive": "#034cff",
+      "syntax-property": "#a753ae",
+      "syntax-type": "#8a6f00",
+      "syntax-constant": "#007b80",
+      "syntax-critical": "#ff8c00",
+      "syntax-diff-delete": "#ff8c00",
+      "syntax-diff-unknown": "#a753ae",
       "surface-critical-base": "#FFF2F0"
     }
   },
@@ -31,6 +41,16 @@
       "diffDelete": "#fc533a"
     },
     "overrides": {
+      "syntax-comment": "#8f8f8f",
+      "syntax-keyword": "#edb2f1",
+      "syntax-string": "#00ceb9",
+      "syntax-primitive": "#8cb0ff",
+      "syntax-property": "#fab283",
+      "syntax-type": "#fcd53a",
+      "syntax-constant": "#93e9f6",
+      "syntax-critical": "#fab283",
+      "syntax-diff-delete": "#fab283",
+      "syntax-diff-unknown": "#edb2f1",
       "surface-critical-base": "#1F0603"
     }
   }

packages/ui/src/theme/themes/onedarkpro.json

@@ -16,8 +16,10 @@
       "diffDelete": "#f7c1c5"
     },
     "overrides": {
+      "syntax-comment": "#6a717d",
       "syntax-keyword": "#a626a4",
-      "syntax-primitive": "#986801"
+      "syntax-primitive": "#4078f2",
+      "syntax-constant": "#986801"
     }
   },
   "dark": {
@@ -34,8 +36,10 @@
       "diffDelete": "#b2555f"
     },
     "overrides": {
+      "syntax-comment": "#5c6370",
       "syntax-keyword": "#c678dd",
-      "syntax-primitive": "#d19a66"
+      "syntax-primitive": "#61afef",
+      "syntax-constant": "#d19a66"
     }
   }
 }

packages/ui/src/theme/themes/shadesofpurple.json

@@ -16,7 +16,13 @@
       "diffDelete": "#ffc3ef"
     },
     "overrides": {
-      "syntax-keyword": "#ff6bd5"
+      "syntax-comment": "#8e4be3",
+      "syntax-keyword": "#c45f00",
+      "syntax-string": "#2f8b32",
+      "syntax-primitive": "#a13bd6",
+      "syntax-property": "#008fb8",
+      "syntax-type": "#9d7a00",
+      "syntax-constant": "#e04d7a"
     }
   },
   "dark": {
@@ -33,7 +39,13 @@
       "diffDelete": "#d85aa0"
     },
     "overrides": {
-      "syntax-keyword": "#ff7ac6"
+      "syntax-comment": "#b362ff",
+      "syntax-keyword": "#ff9d00",
+      "syntax-string": "#a5ff90",
+      "syntax-primitive": "#fb94ff",
+      "syntax-property": "#9effff",
+      "syntax-type": "#fad000",
+      "syntax-constant": "#ff628c"
     }
   }
 }

packages/ui/src/theme/themes/solarized.json

@@ -16,8 +16,12 @@
       "diffDelete": "#f2a1a1"
     },
     "overrides": {
-      "syntax-keyword": "#859900",
-      "syntax-string": "#2aa198"
+      "syntax-comment": "#657b83",
+      "syntax-keyword": "#728600",
+      "syntax-string": "#1f8f88",
+      "syntax-primitive": "#268bd2",
+      "syntax-property": "#268bd2",
+      "syntax-constant": "#d33682"
     }
   },
   "dark": {
@@ -34,8 +38,12 @@
       "diffDelete": "#c34b4b"
     },
     "overrides": {
+      "syntax-comment": "#586e75",
       "syntax-keyword": "#859900",
-      "syntax-string": "#2aa198"
+      "syntax-string": "#2aa198",
+      "syntax-primitive": "#268bd2",
+      "syntax-property": "#268bd2",
+      "syntax-constant": "#d33682"
     }
   }
 }

packages/ui/src/theme/themes/tokyonight.json

@@ -16,7 +16,11 @@
       "diffDelete": "#d05f7c"
     },
     "overrides": {
-      "syntax-keyword": "#9854f1"
+      "syntax-comment": "#6b6f7a",
+      "syntax-keyword": "#9854f1",
+      "syntax-primitive": "#1f6fd4",
+      "syntax-property": "#007197",
+      "syntax-constant": "#b15c00"
     }
   },
   "dark": {
@@ -33,7 +37,11 @@
       "diffDelete": "#c34043"
     },
     "overrides": {
-      "syntax-keyword": "#bb9af7"
+      "syntax-comment": "#565f89",
+      "syntax-keyword": "#bb9af7",
+      "syntax-primitive": "#7aa2f7",
+      "syntax-property": "#7dcfff",
+      "syntax-constant": "#ff9e64"
     }
   }
 }

packages/ui/src/theme/themes/vesper.json

@@ -16,7 +16,13 @@
       "diffDelete": "#FF8080"
     },
     "overrides": {
-      "syntax-keyword": "#b30000"
+      "syntax-comment": "#7a7a7a",
+      "syntax-keyword": "#6e6e6e",
+      "syntax-string": "#117e69",
+      "syntax-primitive": "#8d541c",
+      "syntax-property": "#101010",
+      "syntax-type": "#8d541c",
+      "syntax-constant": "#8d541c"
     }
   },
   "dark": {
@@ -33,8 +39,13 @@
       "diffDelete": "#FF8080"
     },
     "overrides": {
-      "syntax-keyword": "#ff8080",
-      "syntax-primitive": "#ffc799"
+      "syntax-comment": "#8b8b8b",
+      "syntax-keyword": "#a0a0a0",
+      "syntax-string": "#99ffe4",
+      "syntax-primitive": "#ffc799",
+      "syntax-property": "#ffffff",
+      "syntax-type": "#ffc799",
+      "syntax-constant": "#ffc799"
     }
   }
 }