@primitiv-ui/tokens 0.1.32 → 0.1.34

package/src/dark-mode-content.test.ts

@@ -24,31 +24,6 @@ function intentColor(mode: Mode, token: string): string {
   return value.startsWith('{') ? resolveRef(mode, value) : value
 }
 
-// These two are for the properties only this file can see — a background that
-// fails to track the theme, a state ramp running the wrong way, a pair that must
-// stay consistent ACROSS modes. Every accessibility *floor* moved to
-// `crates/harmoni-core/tests/intent_roles.rs`, where it is measured with the
-// engine's own contrast maths against the step the engine derives, so a role
-// cannot pass here and be wrong there.
-
-/** WCAG relative luminance (sRGB, 0-1). */
-function luminance(hex: string): number {
-  const channel = (value: number) => {
-    const c = value / 255
-    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
-  }
-  const r = parseInt(hex.slice(1, 3), 16)
-  const g = parseInt(hex.slice(3, 5), 16)
-  const b = parseInt(hex.slice(5, 7), 16)
-  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b)
-}
-
-/** WCAG contrast ratio between two colours (1-21). */
-function contrastRatio(a: string, b: string): number {
-  const [lighter, darker] = [luminance(a), luminance(b)].sort((x, y) => y - x)
-  return (lighter + 0.05) / (darker + 0.05)
-}
-
 // Regression guard for the swapped-index bug (verified against the Figma
 // Intent collection, which always resolves color/neutral/* through the
 // Light-mode ramp — Dark-mode Intent variables pick a *different* neutral
@@ -95,20 +70,6 @@ describe.each([
 describe('color/neutral-alpha ramp', () => {
   const steps = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'] as const
 
-  it.each(['light', 'dark'] as const)("%s mode anchors every step on the mode's veil colour", (mode) => {
-    const veil = resolveRef(mode, '{color.neutral.900}')
-    for (const step of steps) {
-      expect(resolveRef(mode, `{color.neutral-alpha.${step}}`).slice(0, 7)).toBe(veil)
-    }
-  })
-
-  it.each(['light', 'dark'] as const)('%s mode climbs a strictly increasing alpha curve', (mode) => {
-    const alphas = steps.map((step) => parseInt(resolveRef(mode, `{color.neutral-alpha.${step}}`).slice(7, 9), 16))
-    for (let i = 1; i < alphas.length; i++) {
-      expect(alphas[i]).toBeGreaterThan(alphas[i - 1])
-    }
-  })
-
   // The inverse companion: every step is the OTHER theme's neutral-alpha step,
   // so each mode carries the opposite veil (soft-white in light, soft-black in
   // dark). It exists for Figma's dark step-swap idiom — the file resolves the
@@ -138,22 +99,6 @@ describe('color/neutral-alpha ramp', () => {
 describe('color/brand-alpha ramp', () => {
   const steps = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'] as const
 
-  it.each(['light', 'dark'] as const)('%s mode anchors every step on the brand colour', (mode) => {
-    const brand = resolveRef(mode, '{color.brand.500}')
-    for (const step of steps) {
-      expect(resolveRef(mode, `{color.brand-alpha.${step}}`).slice(0, 7)).toBe(brand)
-    }
-  })
-
-  it.each(['light', 'dark'] as const)('%s mode climbs a strictly increasing alpha curve', (mode) => {
-    const alphas = steps.map((step) => parseInt(resolveRef(mode, `{color.brand-alpha.${step}}`).slice(7, 9), 16))
-    for (let i = 1; i < alphas.length; i++) {
-      expect(alphas[i]).toBeGreaterThan(alphas[i - 1])
-    }
-  })
-
-  // The reason there is no `brand-alpha-inverse`: unlike the neutral veil, the
-  // anchor does not flip with the theme, so both modes already agree.
   it('resolves identically in light and dark mode, so it needs no inverse companion', () => {
     for (const step of steps) {
       expect(resolveRef('light', `{color.brand-alpha.${step}}`)).toBe(resolveRef('dark', `{color.brand-alpha.${step}}`))
@@ -199,74 +144,39 @@ describe.each([
   })
 })
 
-// `surface/selected` (the ToggleGroup thumb) and `content/on-selected` (its
-// label) are the deliberate exception: RFC 0017 requires them to read as
-// light-surface-with-dark-label in *both* themes, so the thumb keeps lifting
-// off a track that itself goes dark in dark mode. A near-1 contrast ratio
-// between the two modes confirms neither one flipped.
-describe('surface/selected and content/on-selected', () => {
-  it('stay visually consistent (not flipped) between light and dark mode', () => {
-    for (const token of ['surface/selected', 'content/on-selected'] as const) {
-      const ratio = contrastRatio(intentColor('light', token), intentColor('dark', token))
-      expect(ratio).toBeLessThan(1.25)
-    }
-  })
-})
 
 // The swapped-index guard above only asserts light ≠ dark, which is too weak for
 // an OPAQUE background: `table/row/selected` was light #cbe5ff / dark #c8edff —
 // two different pale blues, so it passed that check while rendering a glaring
-// pale row on a dark surface. This is the assertion that actually pins the role:
-// an opaque background that tracks the theme must be light in light mode and dark
-// in dark mode, not merely different.
-//
-// Deliberately opaque-only. The alpha state layers (`*/row/hover`,
-// `tree/row/selected`, `action/ghost/*`) invert their ink by design — light mode
-// tints with dark ink, dark mode with light ink — and `surface/overlay` is an
-// inverse surface on purpose, so neither belongs here.
-describe.each([
-  'surface/subtle',
-  'surface/raised',
-  'surface/floating',
-  'surface/sunken',
-  'action/secondary/default',
-  'table/row/stripe',
-  'table/row/selected',
-  'choice-card/selected/background',
-] as const)('%s (opaque, theme-tracking background)', (token) => {
-  it('is light in light mode and dark in dark mode', () => {
-    expect(luminance(intentColor('light', token))).toBeGreaterThan(0.5)
-    expect(luminance(intentColor('dark', token))).toBeLessThan(0.5)
-  })
-})
+
 
 /*
- * Interactive foreground states must gain contrast, not lose it.
- *
- * This exists because a per-token contrast check is not enough. The dark link
- * ramp descended — default → hover → active resolved #5291f9 → #033a8c →
- * #022968, i.e. 5.95:1 → 1.74:1 → 1.33:1 — and the earlier guard passed
- * throughout, because it only ever measured `default`.
+ * The sibling property the block above does not cover: a disabled link must be
+ * QUIETER than a resting one.
  *
- * The cause was reading the step numbers as if both ramps ran the same way. They
- * do not: in the LIGHT ramp a higher step is darker, in the DARK ramp a higher
- * step is lighter. So "500 → 300 → 200" gains contrast against white and loses
- * it against black, and the same alias pattern that is right in one mode is
- * exactly wrong in the other.
+ * Both modes shipped `disabled` aliasing the exact step `default` does
+ * (`brand.500` light, `brand.600` dark), so a disabled link rendered
+ * identically to an active one — indistinguishable to everyone, and to a
+ * keyboard user the only cue that it is unavailable. The states block could
+ * not see it: it only ever compared hover and active.
  *
- * Asserting the DIRECTION rather than the values is what makes this robust: it
- * holds whichever steps a future palette picks, and it is mode-agnostic, so the
- * inverted ramp cannot fool it again.
+ * The companion assertion — that a disabled link is measurably quieter than a
+ * resting one — needs the engine's contrast maths, so it lives in
+ * `crates/harmoni-core/tests/token_source_colours.rs`. It is also meaningful
+ * only for `link`, whose foreground genuinely sits on the page surface;
+ * `primary`/`secondary`/`danger` foregrounds sit on their own disabled
+ * backgrounds. The equality below needs no such care, so it covers all four —
+ * and it is the invariant that would have caught this on any of them.
  */
-describe('action/link/foreground interactive states', () => {
+describe('disabled action foregrounds', () => {
   it.each(['light', 'dark'] as const)(
-    '%s mode: hover and active are more prominent than the resting state',
+    '%s mode: no disabled foreground reuses its own resting colour',
     (mode) => {
-      const bg = intentColor(mode, 'surface/default')
-      const at = (state: string) =>
-        contrastRatio(intentColor(mode, `action/link/foreground/${state}`), bg)
-      expect(at('hover')).toBeGreaterThan(at('default'))
-      expect(at('active')).toBeGreaterThan(at('hover'))
+      for (const family of ['primary', 'secondary', 'danger', 'link']) {
+        const resting = intentColor(mode, `action/${family}/foreground/default`)
+        const disabled = intentColor(mode, `action/${family}/foreground/disabled`)
+        expect(disabled, `action/${family}/foreground`).not.toBe(resting)
+      }
     },
   )
 })

package/src/elevation.json

@@ -3,15 +3,15 @@
     "color": {
       "strong": {
         "$type": "color",
-        "$value": "#00000014"
+        "$value": "oklch(0 0 0 / 0.0784)"
       },
       "medium": {
         "$type": "color",
-        "$value": "#0000000f"
+        "$value": "oklch(0 0 0 / 0.0588)"
       },
       "soft": {
         "$type": "color",
-        "$value": "#0000000a"
+        "$value": "oklch(0 0 0 / 0.0392)"
       }
     },
     "1": {

package/src/intent.json

@@ -169,7 +169,7 @@
           },
           "disabled": {
             "$type": "color",
-            "$value": "{color.brand.500}"
+            "$value": "{color.neutral.400}"
           },
           "visited": {
             "$type": "color",
@@ -376,7 +376,7 @@
     },
     "scrim": {
       "$type": "color",
-      "$value": "#00000080"
+      "$value": "oklch(0 0 0 / 0.502)"
     },
     "content": {
       "primary": {
@@ -669,7 +669,7 @@
           },
           "disabled": {
             "$type": "color",
-            "$value": "{color.brand.600}"
+            "$value": "{color.neutral.500}"
           },
           "visited": {
             "$type": "color",
@@ -876,7 +876,7 @@
     },
     "scrim": {
       "$type": "color",
-      "$value": "#00000080"
+      "$value": "oklch(0 0 0 / 0.502)"
     },
     "content": {
       "primary": {