fix(app): simplify themes (#17274)

packages/ui/src/theme/color.ts

@@ -136,23 +136,23 @@ export function generateScale(seed: HexColor, isDark: boolean): 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),
-        Math.min(0.94, Math.max(0.84, base.l + 0.02)),
-        0.975,
+        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.34, 0.45, 0.64, 0.82, 0.96, 1.06, 1.14, 1.2, 1.24, 1.28, 1.34, 1.08]
+    ? [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++) {
@@ -180,26 +180,26 @@ export function generateNeutralScale(seed: HexColor, isDark: boolean, ink?: HexC
     const sink = (tone: number) =>
       oklchToHex({
         l: base.l * (1 - tone),
-        c: base.c * Math.max(0, 1 - tone * 0.3),
+        c: base.c * Math.max(0, 1 - tone * (isDark ? 0.12 : 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))
+      ? 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.03, 0.055, 0.085, 0.125, 0.18, 0.255, 0.35, 0.5, 0.67, 0.84, 0.975]
+      ? [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))
   }
 
   const base = hexToOklch(seed)
   const scale: HexColor[] = []
-  const neutralChroma = Math.min(base.c, isDark ? 0.05 : 0.04)
+  const neutralChroma = Math.min(base.c, isDark ? 0.068 : 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]
+    ? [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++) {

packages/ui/src/theme/desktop-theme.schema.json

@@ -87,7 +87,7 @@
       "type": "object",
       "description": "A compact semantic palette used to derive the full theme programmatically",
       "additionalProperties": false,
-      "required": ["neutral", "primary", "success", "warning", "error", "info"],
+      "required": ["neutral", "ink", "primary", "success", "warning", "error", "info"],
       "properties": {
         "neutral": {
           "$ref": "#/definitions/HexColor",
@@ -95,7 +95,7 @@
         },
         "ink": {
           "$ref": "#/definitions/HexColor",
-          "description": "Optional foreground or chrome color used to derive text and border tones"
+          "description": "Foreground or chrome color used to derive text and border tones"
         },
         "primary": {
           "$ref": "#/definitions/HexColor",

packages/ui/src/theme/resolve.ts

@@ -13,33 +13,21 @@ 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 hasInk = colors.compact && Boolean(colors.ink)
-  const noInk = colors.compact && !hasInk
-  const shadow = noInk && !isDark ? generateNeutralScale(colors.neutral, true) : neutral
   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 brandl = noInk && isDark ? generateScale(colors.primary, false) : primary
-  const successl = noInk && isDark ? generateScale(colors.success, false) : success
-  const warningl = noInk && isDark ? generateScale(colors.warning, false) : warning
-  const infol = noInk && isDark ? generateScale(colors.info, false) : info
-  const interl = noInk && isDark ? generateScale(colors.interactive, false) : interactive
   const diffAdd = generateScale(
-    colors.diffAdd ??
-      (noInk
-        ? shift(colors.success, { c: isDark ? 0.54 : 0.6, l: isDark ? 0.22 : 0.16 })
-        : shift(colors.success, { c: isDark ? 0.7 : 0.55, l: isDark ? -0.18 : 0.14 })),
+    colors.diffAdd ?? shift(colors.success, { c: isDark ? 0.7 : 0.55, l: isDark ? -0.18 : 0.14 }),
     isDark,
   )
   const diffDelete = generateScale(
-    colors.diffDelete ??
-      (noInk ? colors.error : shift(colors.error, { c: isDark ? 0.82 : 0.7, l: isDark ? -0.08 : 0.08 })),
+    colors.diffDelete ?? shift(colors.error, { c: isDark ? 0.82 : 0.7, l: isDark ? -0.08 : 0.08 }),
     isDark,
   )
   const ink = colors.ink ?? colors.neutral
-  const tint = hasInk ? hexToOklch(ink) : undefined
+  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,
@@ -48,7 +36,7 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
     : undefined
   const backgroundOverride = overrides["background-base"]
   const backgroundHex = getHex(backgroundOverride)
-  const overlay = noInk || (Boolean(backgroundOverride) && !backgroundHex)
+  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]
@@ -56,7 +44,6 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
   }
   const modified = () => {
     if (!colors.compact) return isDark ? "#ffba92" : "#FF8C00"
-    if (!hasInk) 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)
@@ -76,73 +63,36 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
       stronger: alphaTone(seed, alpha.stronger),
     }
   }
-  const compactBackground =
-    colors.compact && !hasInk
-      ? isDark
-        ? {
-            base: shift(blend(colors.neutral, "#000000", 0.145), { c: 0 }),
-            weak: shift(blend(colors.neutral, "#000000", 0.27), { c: 0 }),
-            strong: shift(blend(colors.neutral, "#000000", 0.165), { c: 0 }),
-            stronger: shift(blend(colors.neutral, "#000000", 0.19), { c: 0 }),
-          }
-        : {
-            base: blend(colors.neutral, "#ffffff", 0.066),
-            weak: blend(colors.neutral, "#ffffff", 0.11),
-            strong: blend(colors.neutral, "#ffffff", 0.024),
-            stronger: blend(colors.neutral, "#ffffff", 0.024),
-          }
-      : undefined
-  const compactInkBackground =
-    colors.compact && hasInk && isDark
-      ? {
-          base: neutral[0],
-          weak: neutral[1],
-          strong: neutral[0],
-          stronger: neutral[2],
-        }
-      : undefined
-
-  const background = backgroundHex ?? compactInkBackground?.base ?? compactBackground?.base ?? neutral[0]
+  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 && hasInk ? 0.08 : 0)) : Math.min(1, light + 0.024),
-    )
-  const diffHiddenSurface = noInk
-    ? {
-        base: blue[isDark ? 1 : 2],
-        weak: blue[isDark ? 0 : 1],
-        weaker: blue[isDark ? 2 : 0],
-        strong: blue[4],
-        stronger: blue[isDark ? 10 : 8],
-      }
-    : 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 = 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]
+    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 = (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 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 = (noInk && isDark ? infol : info)[isDark ? 5 : 4]
-  const infow = (noInk && isDark ? infol : info)[isDark ? 4 : 3]
-  const infos = (noInk && isDark ? infol : info)[10]
+  const infob = info[isDark ? 6 : 4]
+  const infow = info[isDark ? 5 : 3]
+  const infos = 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))
@@ -163,11 +113,10 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
 
   const tokens: ResolvedTheme = {}
 
-  tokens["background-base"] = compactInkBackground?.base ?? compactBackground?.base ?? neutral[0]
-  tokens["background-weak"] = compactInkBackground?.weak ?? compactBackground?.weak ?? neutral[2]
-  tokens["background-strong"] = compactInkBackground?.strong ?? compactBackground?.strong ?? neutral[0]
-  tokens["background-stronger"] =
-    compactInkBackground?.stronger ?? compactBackground?.stronger ?? (isDark ? neutral[1] : "#fcfcfc")
+  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]
@@ -183,8 +132,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 ? (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-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]
@@ -202,7 +151,7 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
   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-interactive-weak-hover"] = interb
 
   tokens["surface-success-base"] = succb
   tokens["surface-success-weak"] = succw
@@ -236,42 +185,22 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
   tokens["surface-diff-delete-stronger"] = diffDelete[isDark ? 10 : 8]
 
   tokens["input-base"] = isDark ? neutral[1] : neutral[0]
-  tokens["input-hover"] = neutral[1]
-  tokens["input-active"] = interactive[0]
-  tokens["input-selected"] = interactive[3]
-  tokens["input-focus"] = interactive[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"] = hasInk ? (body as HexColor) : noInk ? (isDark ? neutralAlpha[10] : neutral[10]) : neutral[10]
-  tokens["text-weak"] = hasInk
-    ? 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
+  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 })
-    : noInk
-      ? isDark
-        ? neutralAlpha[7]
-        : neutral[7]
-      : neutral[7]
-  tokens["text-strong"] = hasInk
-    ? isDark && colors.compact
+    : neutral[7]
+  tokens["text-strong"] = colors.compact
+    ? isDark
       ? blend("#ffffff", body as HexColor, 0.9)
-      : shift(body as HexColor, { l: isDark ? 0.055 : -0.07, c: 1.04 })
-    : noInk
-      ? isDark
-        ? neutralAlpha[11]
-        : neutral[11]
-      : neutral[11]
-  if (noInk && isDark) {
-    tokens["text-base"] = withAlpha("#ffffff", 0.618) as ColorValue
-    tokens["text-weak"] = withAlpha("#ffffff", 0.422) as ColorValue
-    tokens["text-weaker"] = withAlpha("#ffffff", 0.284) as ColorValue
-    tokens["text-strong"] = withAlpha("#ffffff", 0.936) as ColorValue
-  }
+      : 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]
@@ -287,7 +216,7 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
   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-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)
@@ -301,170 +230,84 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
   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]
-  tokens["button-secondary-hover"] = noInk ? (isDark ? neutral[1] : neutral[1]) : isDark ? neutral[3] : neutral[1]
+  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]
 
-  if (noInk) {
-    const tone = (alpha: number) => alphaTone((isDark ? "#ffffff" : "#000000") as HexColor, alpha)
-    if (isDark) {
-      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.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]
-      tokens["surface-diff-skip-base"] = "#00000000"
-    }
-
-    if (!isDark) {
-      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.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.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.18 : 0.12) as ColorValue
-  }
-
-  tokens["border-base"] = hasInk ? borderTone(0.22, 0.16) : neutralAlpha[6]
-  tokens["border-hover"] = hasInk ? borderTone(0.28, 0.2) : neutralAlpha[7]
-  tokens["border-active"] = hasInk ? borderTone(0.34, 0.24) : neutralAlpha[8]
-  tokens["border-selected"] = noInk
-    ? isDark
-      ? interactive[10]
-      : (withAlpha(colors.interactive, 0.99) as ColorValue)
-    : (withAlpha(interactive[8], isDark ? 0.9 : 0.99) as ColorValue)
-  tokens["border-disabled"] = hasInk ? borderTone(0.18, 0.12) : neutralAlpha[7]
-  tokens["border-focus"] = hasInk ? borderTone(0.34, 0.24) : neutralAlpha[8]
-  tokens["border-weak-base"] = hasInk
-    ? borderTone(0.1, 0.08)
-    : noInk
-      ? isDark
-        ? neutral[3]
-        : blend(neutral[4], neutral[5], 0.5)
-      : neutralAlpha[isDark ? 5 : 4]
-  tokens["border-strong-base"] = hasInk ? borderTone(0.34, 0.24) : neutralAlpha[isDark ? 7 : 6]
-  tokens["border-strong-hover"] = hasInk ? borderTone(0.4, 0.28) : neutralAlpha[7]
-  tokens["border-strong-active"] = hasInk ? borderTone(0.46, 0.32) : neutralAlpha[isDark ? 7 : 6]
-  tokens["border-strong-selected"] = noInk
-    ? (withAlpha(colors.interactive, isDark ? 0.62 : 0.31) as ColorValue)
-    : (withAlpha(interactive[5], 0.6) as ColorValue)
-  tokens["border-strong-disabled"] = hasInk ? borderTone(0.14, 0.1) : neutralAlpha[5]
-  tokens["border-strong-focus"] = hasInk ? borderTone(0.46, 0.32) : neutralAlpha[isDark ? 7 : 6]
-  tokens["border-weak-hover"] = hasInk ? borderTone(0.16, 0.12) : neutralAlpha[isDark ? 6 : 5]
-  tokens["border-weak-active"] = hasInk ? borderTone(0.22, 0.16) : neutralAlpha[isDark ? 7 : 6]
-  tokens["border-weak-selected"] = noInk
-    ? (withAlpha(colors.interactive, isDark ? 0.62 : 0.24) as ColorValue)
-    : (withAlpha(interactive[4], isDark ? 0.6 : 0.5) as ColorValue)
-  tokens["border-weak-disabled"] = hasInk ? borderTone(0.08, 0.06) : neutralAlpha[5]
-  tokens["border-weak-focus"] = hasInk ? borderTone(0.22, 0.16) : neutralAlpha[isDark ? 7 : 6]
-  tokens["border-weaker-base"] = hasInk
-    ? borderTone(0.06, 0.04)
-    : noInk
-      ? isDark
-        ? blend(neutral[1], neutral[2], 0.5)
-        : blend(neutral[2], neutral[3], 0.5)
-      : neutralAlpha[2]
-
-  if (noInk) {
-    const line = (l: number, d: number) => alphaTone((isDark ? "#ffffff" : "#000000") as HexColor, isDark ? d : l)
-    tokens["border-base"] = line(0.162, 0.195)
-    tokens["border-hover"] = line(0.236, 0.284)
-    tokens["border-active"] = line(0.46, 0.418)
-    tokens["border-disabled"] = tokens["border-hover"]
-    tokens["border-focus"] = tokens["border-active"]
-  }
-
-  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-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"] = (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-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"] = hasInk && !isDark ? tokens["text-weak"] : neutral[isDark ? 9 : 8]
-  tokens["icon-hover"] = hasInk && !isDark ? tokens["text-base"] : neutral[10]
-  tokens["icon-active"] = hasInk && !isDark ? tokens["text-strong"] : neutral[11]
-  tokens["icon-selected"] = hasInk && !isDark ? tokens["text-strong"] : neutral[11]
+  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"] = hasInk && !isDark ? tokens["text-strong"] : neutral[11]
+  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"] = noInk && isDark ? blend(neutral[11], neutral[10], 0.74) : neutral[isDark ? 11 : 7]
-  tokens["icon-weak-active"] = noInk && isDark ? blend(neutral[11], neutral[10], 0.52) : neutral[8]
+  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"] = noInk && isDark ? neutral[11] : neutral[isDark ? 3 : 5]
+  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"] = noInk && isDark ? neutral[6] : neutral[7]
+  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[9]
+  tokens["icon-interactive-base"] = interactive[8]
   tokens["icon-success-base"] = success[isDark ? 8 : 6]
-  tokens["icon-success-hover"] = success[isDark ? 9 : 7]
+  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[7]
+  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[10]
-  tokens["icon-critical-active"] = error[11]
-  tokens["icon-info-base"] = info[isDark ? 6 : 6]
-  tokens["icon-info-hover"] = info[7]
+  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)
@@ -492,84 +335,45 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
   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[isDark ? 8 : 9]
-  tokens["icon-diff-delete-hover"] = diffDelete[isDark ? 9 : 10]
+  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) {
-    if (!hasInk) {
-      tokens["syntax-comment"] = "var(--text-weak)"
-      tokens["syntax-regexp"] = "var(--text-base)"
-      tokens["syntax-string"] = isDark ? "#00ceb9" : "#006656"
-      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)"
-      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"
-
-      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["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"
 
-    if (hasInk) {
-      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"]
-    }
+    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"]
   }
 
   if (!colors.compact) {
@@ -626,7 +430,7 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
     tokens[key] = value
   }
 
-  if (hasInk && "text-weak" in overrides && !("text-weaker" in overrides)) {
+  if (colors.compact && "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 })
@@ -635,7 +439,7 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
     }
   }
 
-  if (colors.compact && hasInk) {
+  if (colors.compact) {
     if (!("markdown-text" in overrides)) {
       tokens["markdown-text"] = tokens["text-base"]
     }
@@ -709,17 +513,9 @@ function getColors(variant: ThemeVariant): ThemeColors {
   throw new Error("Theme variant requires `palette` or `seeds`")
 }
 
-function generateNeutralOverlayScale(neutralScale: HexColor[], isDark: boolean): ColorValue[] {
-  const alphas = isDark
-    ? [0, 0.034, 0.063, 0.084, 0.109, 0.138, 0.181, 0.266, 0.404, 0.468, 0.603, 0.928]
-    : [0.014, 0.034, 0.055, 0.075, 0.096, 0.118, 0.151, 0.232, 0.453, 0.492, 0.574, 0.915]
-  const color = (isDark ? "#ffffff" : "#000000") as HexColor
-  return alphas.map((alpha) => withAlpha(color, alpha) as ColorValue)
-}
-
 function generateNeutralAlphaScale(neutralScale: HexColor[], isDark: boolean): HexColor[] {
   const alphas = isDark
-    ? [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.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))

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

@@ -4,7 +4,8 @@
   "id": "oc-2",
   "light": {
     "palette": {
-      "neutral": "#8f8f8f",
+      "neutral": "#f7f7f7",
+      "ink": "#171311",
       "primary": "#dcde8d",
       "success": "#12c905",
       "warning": "#ffdc17",
@@ -30,7 +31,8 @@
   },
   "dark": {
     "palette": {
-      "neutral": "#707070",
+      "neutral": "#151515",
+      "ink": "#f1ece8",
       "primary": "#fab283",
       "success": "#12c905",
       "warning": "#fcd53a",

packages/ui/src/theme/types.ts

@@ -20,7 +20,7 @@ export interface ThemeSeedColors {
 
 export interface ThemePaletteColors {
   neutral: HexColor
-  ink?: HexColor
+  ink: HexColor
   primary: HexColor
   success: HexColor
   warning: HexColor