feat(app): update oc-2 colors (#31071)

packages/ui/src/theme/v2/default-primitives.ts

@@ -2,18 +2,19 @@ import type { V2ColorValue } from "../types"
 
 /** Default v2 hue ramps from `v2/styles/colors.css` (OC-2). Alpha ramps live in CSS only. */
 export const V2_PRIMITIVES_DEFAULT: Record<string, V2ColorValue> = {
-  "v2-grey-100": "#ffffffff",
-  "v2-grey-200": "#fafafaff",
+  "v2-grey-50": "#ffffffff",
+  "v2-grey-100": "#fafafaff",
+  "v2-grey-200": "#f2f2f2ff",
   "v2-grey-300": "#eeeeeeff",
-  "v2-grey-400": "#d4d4d4ff",
+  "v2-grey-400": "#dbdbdbff",
   "v2-grey-500": "#aeaeaeff",
   "v2-grey-600": "#808080ff",
   "v2-grey-700": "#5c5c5cff",
   "v2-grey-800": "#3a3a3aff",
-  "v2-grey-900": "#242424ff",
-  "v2-grey-1000": "#161616ff",
-  "v2-grey-1100": "#080808ff",
-  "v2-grey-1200": "#000000ff",
+  "v2-grey-900": "#2e2e2eff",
+  "v2-grey-1000": "#242424ff",
+  "v2-grey-1100": "#161616ff",
+  "v2-grey-1200": "#080808ff",
   "v2-red-100": "#fcecebff",
   "v2-red-200": "#f6d5d3ff",
   "v2-red-300": "#f2bbb7ff",

packages/ui/src/theme/v2/foreground.ts

@@ -1,9 +1,42 @@
-import { blend, hexToOklch, shift } from "../color"
+import { blend, contrastRatio, hexToOklch, shift } from "../color"
+import { mapV2Semantics } from "./mapping"
 import type { ColorValue, HexColor, V2ColorValue } from "../types"
 
+const GREY_STEPS = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200] as const
+
+const greyRef = (step: number): V2ColorValue => `var(--v2-grey-${step})`
+
+function greyHex(primitives: Record<string, V2ColorValue>, step: number) {
+  const hex = primitives[`v2-grey-${step}`]
+  if (typeof hex === "string" && hex.startsWith("#")) return hex as HexColor
+}
+
+function resolveGreyRef(value: V2ColorValue, primitives: Record<string, V2ColorValue>) {
+  const step = value.match(/^var\(--v2-grey-(\d+)\)$/)?.[1]
+  if (!step) throw new Error(`Expected grey primitive ref, got ${value}`)
+  const hex = greyHex(primitives, Number(step))
+  if (!hex) throw new Error(`Missing grey primitive v2-grey-${step}`)
+  return hex
+}
+
+function pickGrey(
+  primitives: Record<string, V2ColorValue>,
+  background: HexColor,
+  minContrast: number,
+  target: number,
+) {
+  const matches = GREY_STEPS.filter((step) => {
+    const hex = greyHex(primitives, step)
+    return hex && contrastRatio(hex, background) >= minContrast
+  })
+  if (matches.length === 0) return target
+  return matches.reduce((best, step) => (Math.abs(step - target) < Math.abs(best - target) ? step : best))
+}
+
 export function mapV2Foreground(
   ink: HexColor,
   isDark: boolean,
+  primitives: Record<string, V2ColorValue>,
   overrides: Record<string, ColorValue> = {},
 ): Record<string, V2ColorValue> {
   const tint = hexToOklch(ink)
@@ -12,9 +45,21 @@ export function mapV2Foreground(
     c: isDark ? 1.04 : 1.02,
   })
 
+  const semantics = mapV2Semantics(isDark)
+  const bgBase = resolveGreyRef(semantics["v2-background-bg-base"], primitives)
+  const bgContrast = resolveGreyRef(semantics["v2-background-bg-contrast"], primitives)
+  const bgInverse = resolveGreyRef(semantics["v2-background-bg-inverse"], primitives)
+  const inverseTarget = hexToOklch(bgInverse).l > 0.55 ? 1100 : greyHex(primitives, 50) ? 50 : 100
+
   return {
     "v2-text-text-base": isDark ? blend("#ffffff", body, 0.9) : shift(body, { l: -0.07, c: 1.04 }),
     "v2-text-text-muted": overrides["text-weak"] ?? shift(body, { l: isDark ? -0.11 : 0.11, c: 0.9 }),
     "v2-text-text-faint": shift(body, { l: isDark ? -0.2 : 0.21, c: isDark ? 0.78 : 0.72 }),
+    "v2-icon-icon-base": greyRef(pickGrey(primitives, bgBase, 7, isDark ? 400 : 800)),
+    "v2-icon-icon-muted": greyRef(pickGrey(primitives, bgBase, 3, 600)),
+    "v2-icon-icon-inverse": greyRef(pickGrey(primitives, bgInverse, 7, inverseTarget)),
+    "v2-icon-icon-contrast": greyRef(pickGrey(primitives, bgContrast, 7, 100)),
+    "v2-icon-icon-accent": isDark ? "var(--v2-blue-400)" : "var(--v2-blue-600)",
+    "v2-icon-icon-accent-hover": isDark ? "var(--v2-blue-300)" : "var(--v2-blue-700)",
   }
 }

packages/ui/src/theme/v2/mapping.ts

@@ -18,12 +18,6 @@ const light: Record<string, V2ColorValue> = {
   "v2-text-text-contrast": ref("v2-grey-100"),
   "v2-text-text-accent": ref("v2-blue-600"),
   "v2-text-text-accent-hover": ref("v2-blue-700"),
-  "v2-icon-icon-base": ref("v2-grey-1000"),
-  "v2-icon-icon-muted": ref("v2-grey-800"),
-  "v2-icon-icon-inverse": ref("v2-grey-100"),
-  "v2-icon-icon-contrast": ref("v2-grey-200"),
-  "v2-icon-icon-accent": ref("v2-blue-600"),
-  "v2-icon-icon-accent-hover": ref("v2-blue-700"),
   "v2-border-border-muted": ref("v2-alpha-dark-8"),
   "v2-border-border-base": ref("v2-alpha-dark-10"),
   "v2-border-border-strong": ref("v2-alpha-dark-20"),
@@ -87,12 +81,6 @@ const dark: Record<string, V2ColorValue> = {
   "v2-text-text-contrast": ref("v2-grey-100"),
   "v2-text-text-accent": ref("v2-blue-400"),
   "v2-text-text-accent-hover": ref("v2-blue-300"),
-  "v2-icon-icon-base": ref("v2-grey-300"),
-  "v2-icon-icon-muted": ref("v2-grey-400"),
-  "v2-icon-icon-inverse": ref("v2-grey-1000"),
-  "v2-icon-icon-contrast": ref("v2-grey-200"),
-  "v2-icon-icon-accent": ref("v2-blue-400"),
-  "v2-icon-icon-accent-hover": ref("v2-blue-300"),
   "v2-border-border-muted": ref("v2-alpha-light-8"),
   "v2-border-border-base": ref("v2-alpha-light-10"),
   "v2-border-border-strong": ref("v2-alpha-light-20"),

packages/ui/src/theme/v2/resolve.ts

@@ -135,7 +135,7 @@ export function generateV2Primitives(variant: ThemeVariant, isDark: boolean): Re
 export function resolveThemeVariantV2(variant: ThemeVariant, isDark: boolean): ResolvedV2Theme {
   const primitives = generateV2Primitives(variant, isDark)
   const semantics = mapV2Semantics(isDark)
-  const foreground = mapV2Foreground(readPalette(variant).ink, isDark, variant.overrides)
+  const foreground = mapV2Foreground(readPalette(variant).ink, isDark, primitives, variant.overrides)
   return mergeV2Tokens(primitives, semantics, foreground, variant.v2Overrides ?? {})
 }