@titan-design/react-ui 0.13.0 → 0.14.0

package/src/theme/tokens/semantic-hex-guard.test.ts

@@ -0,0 +1,322 @@
+import { describe, it, expect } from 'vitest'
+import { semanticColorsLight, semanticColorsDark, getSemanticColors } from './semantic'
+import {
+  primitiveColors,
+  primitiveRamps,
+  greyRamp,
+  discreteRainbow,
+  alertRedVivid,
+  resultPaletteColors,
+  semanticPins,
+} from './primitives'
+
+/**
+ * Guard (VW-83): every hex-looking semantic token value must be a `primitiveRamps`
+ * step or a named primitive from `./primitives` — never a literal typed straight
+ * into `semantic.ts`. Scoped to hex values only: the many `rgba(...)` alpha
+ * overlays in this file are hand-composited, pre-existing, and out of scope for
+ * this ticket (which is about raw HEX occurrences).
+ *
+ * Deep-equal against the primitives module (not a regex on shape) so a future
+ * hex that happens to be well-formed but unbacked by any primitive still fails.
+ */
+const HEX = /^#[0-9A-Fa-f]{3,8}$/
+
+const allowedHexValues = new Set(
+  [
+    ...Object.values(primitiveColors),
+    ...Object.values(greyRamp),
+    ...Object.values(primitiveRamps).flatMap((hue) => Object.values(hue)),
+    ...discreteRainbow,
+    alertRedVivid,
+    ...Object.values(resultPaletteColors),
+    ...Object.values(semanticPins),
+  ]
+    .filter((v): v is string => HEX.test(v))
+    .map((v) => v.toLowerCase())
+)
+
+function hexEntries(colors: Record<string, string>): [string, string][] {
+  return Object.entries(colors).filter(([, value]) => HEX.test(value))
+}
+
+describe('semantic token hex guard (VW-83)', () => {
+  it('has hex tokens to check in both modes (sanity: the guard is not vacuous)', () => {
+    expect(hexEntries(semanticColorsLight).length).toBeGreaterThan(0)
+    expect(hexEntries(semanticColorsDark).length).toBeGreaterThan(0)
+  })
+
+  it('resolves every light-mode hex token to a ramp step or a named primitive', () => {
+    for (const [token, value] of hexEntries(semanticColorsLight)) {
+      expect(allowedHexValues.has(value.toLowerCase()), `light '${token}': ${value}`).toBe(true)
+    }
+  })
+
+  it('resolves every dark-mode hex token to a ramp step or a named primitive', () => {
+    for (const [token, value] of hexEntries(semanticColorsDark)) {
+      expect(allowedHexValues.has(value.toLowerCase()), `dark '${token}': ${value}`).toBe(true)
+    }
+  })
+})
+
+/**
+ * Resolved values captured from `main` (pre-VW-83), before any semantic.ts
+ * literal was replaced by a ramp step or a named primitive. The migration must
+ * not change what any token paints — only where its value comes from.
+ *
+ * AMENDED by AW-133, which is NOT a refactor and does change what some tokens
+ * paint. Splitting text-on-subtle from the base tone token added the six
+ * `on-*-subtle` entries, and rebased three dark `-subtle` fills onto the hue
+ * their label now uses (`brand-secondary`, `status-error`, `status-info`). Those
+ * deltas are deliberate and reviewed; everything else here is still the
+ * pre-migration pin. Treat a diff against this fixture as a question to answer,
+ * not a number to refresh — regenerating it wholesale defeats the guard.
+ */
+const resolvedBeforeFixture = {
+  light: {
+    'brand-primary': '#FF7900',
+    'brand-primary-light': '#FFA063',
+    'brand-primary-dark': '#DA5F00',
+    'brand-primary-subtle': 'rgba(255, 121, 0, 0.08)',
+    'brand-primary-muted': 'rgba(255, 121, 0, 0.30)',
+    'brand-primary-strong': 'rgba(255, 121, 0, 0.50)',
+    'brand-primary-hover': '#DA5F00',
+    'brand-primary-active': '#B94A00',
+    'brand-secondary': '#307B9B',
+    'brand-secondary-light': '#2697B7',
+    'brand-secondary-dark': '#2A617F',
+    'brand-secondary-subtle': 'rgba(48, 123, 155, 0.08)',
+    'brand-secondary-muted': 'rgba(48, 123, 155, 0.30)',
+    'brand-secondary-strong': 'rgba(48, 123, 155, 0.50)',
+    'brand-secondary-hover': '#2A617F',
+    'brand-secondary-active': '#22465F',
+    'on-brand-primary': '#FFFFFF',
+    'on-brand-secondary': '#FFFFFF',
+    'on-brand-primary-subtle': '#FF7900',
+    'on-brand-secondary-subtle': '#307B9B',
+    'status-success': '#2ED573',
+    'status-success-light': '#58F69E',
+    'status-success-dark': '#298732',
+    'status-success-subtle': '#E3FFEE',
+    'status-success-muted': 'rgba(46, 213, 115, 0.30)',
+    'status-success-strong': 'rgba(46, 213, 115, 0.50)',
+    'status-live': '#2ED573',
+    'status-live-muted': '#22A444',
+    'status-error': '#D14343',
+    'status-error-light': '#E05254',
+    'status-error-dark': '#A4221C',
+    'status-error-subtle': '#FFF4F4',
+    'status-error-muted': 'rgba(209, 67, 67, 0.30)',
+    'status-error-strong': 'rgba(209, 67, 67, 0.50)',
+    'status-error-vivid': '#FF4757',
+    'status-error-vivid-light': '#E05254',
+    'status-error-vivid-dark': '#A4221C',
+    'status-error-vivid-subtle': 'rgba(255, 71, 87, 0.12)',
+    'status-error-vivid-muted': 'rgba(255, 71, 87, 0.30)',
+    'status-error-vivid-strong': 'rgba(255, 71, 87, 0.50)',
+    'status-warning': '#F9B415',
+    'status-warning-light': '#FFD352',
+    'status-warning-dark': '#C27400',
+    'status-warning-subtle': '#FFF7DD',
+    'status-warning-muted': 'rgba(249, 180, 21, 0.30)',
+    'status-warning-strong': 'rgba(249, 180, 21, 0.50)',
+    'status-info': '#2196F3',
+    'status-info-light': '#78C2FF',
+    'status-info-dark': '#1072CB',
+    'status-info-subtle': '#EFF8FF',
+    'status-info-muted': 'rgba(33, 150, 243, 0.30)',
+    'status-info-strong': 'rgba(33, 150, 243, 0.50)',
+    'on-status-success': '#FFFFFF',
+    'on-status-error': '#FFFFFF',
+    'on-status-warning': '#FFFFFF',
+    'on-status-info': '#FFFFFF',
+    'on-status-success-subtle': '#2ED573',
+    'on-status-error-subtle': '#D14343',
+    'on-status-warning-subtle': '#F9B415',
+    'on-status-info-subtle': '#2196F3',
+    'result-improve': '#4caf50',
+    'result-improve-light': 'rgba(76, 175, 80, 0.12)',
+    'result-improve-dark': '#248a24',
+    'result-degrade': '#ef5350',
+    'result-degrade-light': 'rgba(239, 83, 80, 0.12)',
+    'result-degrade-dark': '#b30000',
+    'result-inconclusive': '#9E9A97',
+    'result-inconclusive-light': 'rgba(158, 154, 151, 0.12)',
+    'result-neutral': '#72716F',
+    'on-result-improve': '#FFFFFF',
+    'on-result-degrade': '#FFFFFF',
+    'on-result-inconclusive': '#FFFFFF',
+    'data-1': '#1965B0',
+    'data-2': '#4EB265',
+    'data-3': '#F7F056',
+    'data-4': '#DC050C',
+    'data-5': '#882E72',
+    'data-6': '#F4A736',
+    'data-7': '#7BAFDE',
+    'data-8': '#90C987',
+    'data-9': '#CAACCB',
+    'data-10': '#EE8026',
+    'text-primary': '#121828',
+    'text-secondary': '#65748B',
+    'text-tertiary': '#A29F9D',
+    'text-disabled': 'rgba(55, 65, 81, 0.48)',
+    'text-inverse': '#FFFFFF',
+    'text-link': '#1072CB',
+    'text-link-hover': '#135AA8',
+    'surface-base': '#FFFFFF',
+    'surface-elevated': '#F9F6F3',
+    'surface-raised': '#EDEAE7',
+    'surface-overlay': '#FFFFFF',
+    'surface-input': '#F9F6F3',
+    'background-base': '#EBEBEB',
+    'background-default': '#FFFFFF',
+    'background-subtle': '#F9F6F3',
+    'background-frame': '#A29F9D',
+    'border-prominent': '#A29F9D',
+    'border-focus': '#1072CB',
+    'border-input': '#D4D1CE',
+    'border-input-hover': '#A29F9D',
+    'border-input-focus': '#1072CB',
+    'border-input-error': '#D14343',
+    'hairline-subtle': 'rgba(0, 0, 0, 0.06)',
+    'hairline-default': 'rgba(0, 0, 0, 0.09)',
+    'hairline-strong': 'rgba(0, 0, 0, 0.14)',
+    'interactive-hover': 'rgba(55, 65, 81, 0.04)',
+    'interactive-focus': 'rgba(55, 65, 81, 0.12)',
+    'interactive-active': 'rgba(55, 65, 81, 0.16)',
+    'interactive-selected': 'rgba(55, 65, 81, 0.08)',
+    'interactive-disabled': 'rgba(55, 65, 81, 0.12)',
+    'interactive-disabled-text': 'rgba(55, 65, 81, 0.26)',
+    divider: '#E8E9EB',
+    'avatar-background': '#72716F',
+    'avatar-text': '#FFFFFF',
+  },
+  dark: {
+    'brand-primary': '#FF7900',
+    'brand-primary-light': '#FFA063',
+    'brand-primary-dark': '#DA5F00',
+    'brand-primary-subtle': 'rgba(255, 121, 0, 0.12)',
+    'brand-primary-muted': 'rgba(255, 121, 0, 0.30)',
+    'brand-primary-strong': 'rgba(255, 121, 0, 0.50)',
+    'brand-primary-hover': '#FFA063',
+    'brand-primary-active': '#FFC7A2',
+    'brand-secondary': '#307B9B',
+    'brand-secondary-light': '#2697B7',
+    'brand-secondary-dark': '#2A617F',
+    'brand-secondary-subtle': 'rgba(34, 211, 238, 0.12)',
+    'brand-secondary-muted': 'rgba(48, 123, 155, 0.30)',
+    'brand-secondary-strong': 'rgba(48, 123, 155, 0.50)',
+    'brand-secondary-hover': '#2697B7',
+    'brand-secondary-active': '#01B5D1',
+    'on-brand-primary': '#FFFFFF',
+    'on-brand-secondary': '#FFFFFF',
+    'on-brand-primary-subtle': '#FF7900',
+    'on-brand-secondary-subtle': '#22D3EE',
+    'status-success': '#2ED573',
+    'status-success-light': '#58F69E',
+    'status-success-dark': '#298732',
+    'status-success-subtle': 'rgba(46, 213, 115, 0.12)',
+    'status-success-muted': 'rgba(46, 213, 115, 0.30)',
+    'status-success-strong': 'rgba(46, 213, 115, 0.50)',
+    'status-live': '#2ED573',
+    'status-live-muted': '#22A444',
+    'status-error': '#D14343',
+    'status-error-light': '#E05254',
+    'status-error-dark': '#A4221C',
+    'status-error-subtle': 'rgba(247, 113, 117, 0.08)',
+    'status-error-muted': 'rgba(209, 67, 67, 0.30)',
+    'status-error-strong': 'rgba(209, 67, 67, 0.50)',
+    'status-error-vivid': '#FF4757',
+    'status-error-vivid-light': '#E05254',
+    'status-error-vivid-dark': '#A4221C',
+    'status-error-vivid-subtle': 'rgba(255, 71, 87, 0.12)',
+    'status-error-vivid-muted': 'rgba(255, 71, 87, 0.30)',
+    'status-error-vivid-strong': 'rgba(255, 71, 87, 0.50)',
+    'status-warning': '#F9B415',
+    'status-warning-light': '#FFD352',
+    'status-warning-dark': '#C27400',
+    'status-warning-subtle': 'rgba(249, 180, 21, 0.12)',
+    'status-warning-muted': 'rgba(249, 180, 21, 0.30)',
+    'status-warning-strong': 'rgba(249, 180, 21, 0.50)',
+    'status-info': '#2196F3',
+    'status-info-light': '#78C2FF',
+    'status-info-dark': '#1072CB',
+    'status-info-subtle': 'rgba(120, 194, 255, 0.12)',
+    'status-info-muted': 'rgba(33, 150, 243, 0.30)',
+    'status-info-strong': 'rgba(33, 150, 243, 0.50)',
+    'on-status-success': '#FFFFFF',
+    'on-status-error': '#FFFFFF',
+    'on-status-warning': '#FFFFFF',
+    'on-status-info': '#FFFFFF',
+    'on-status-success-subtle': '#2ED573',
+    'on-status-error-subtle': '#F77175',
+    'on-status-warning-subtle': '#F9B415',
+    'on-status-info-subtle': '#78C2FF',
+    'result-improve': '#4caf50',
+    'result-improve-light': 'rgba(76, 175, 80, 0.16)',
+    'result-improve-dark': '#248a24',
+    'result-degrade': '#ef5350',
+    'result-degrade-light': 'rgba(239, 83, 80, 0.16)',
+    'result-degrade-dark': '#b30000',
+    'result-inconclusive': '#9E9A97',
+    'result-inconclusive-light': 'rgba(158, 154, 151, 0.16)',
+    'result-neutral': '#A29F9D',
+    'on-result-improve': '#FFFFFF',
+    'on-result-degrade': '#FFFFFF',
+    'on-result-inconclusive': '#FFFFFF',
+    'data-1': '#1965B0',
+    'data-2': '#4EB265',
+    'data-3': '#F7F056',
+    'data-4': '#DC050C',
+    'data-5': '#882E72',
+    'data-6': '#F4A736',
+    'data-7': '#7BAFDE',
+    'data-8': '#90C987',
+    'data-9': '#CAACCB',
+    'data-10': '#EE8026',
+    'text-primary': '#F9F6F3',
+    'text-secondary': '#A29F9D',
+    'text-tertiary': '#888684',
+    'text-disabled': 'rgba(255, 255, 255, 0.38)',
+    'text-inverse': '#1C1916',
+    'text-link': '#828DF8',
+    'text-link-hover': '#3CA8FF',
+    'surface-base': '#252321',
+    'surface-elevated': '#2C2A28',
+    'surface-raised': '#31302F',
+    'surface-overlay': '#373635',
+    'surface-input': '#2C2A28',
+    'background-base': '#1C1916',
+    'background-default': '#252321',
+    'background-subtle': '#2C2A28',
+    'background-frame': '#100D0A',
+    'border-prominent': '#424140',
+    'border-focus': '#828DF8',
+    'border-input': '#5A5958',
+    'border-input-hover': '#72716F',
+    'border-input-focus': '#828DF8',
+    'border-input-error': '#E05254',
+    'hairline-subtle': 'rgba(255, 255, 255, 0.10)',
+    'hairline-default': 'rgba(255, 255, 255, 0.15)',
+    'hairline-strong': 'rgba(255, 255, 255, 0.22)',
+    'interactive-hover': 'rgba(255, 255, 255, 0.04)',
+    'interactive-focus': 'rgba(255, 255, 255, 0.12)',
+    'interactive-active': 'rgba(255, 255, 255, 0.16)',
+    'interactive-selected': 'rgba(255, 255, 255, 0.08)',
+    'interactive-disabled': 'rgba(255, 255, 255, 0.12)',
+    'interactive-disabled-text': 'rgba(255, 255, 255, 0.26)',
+    divider: 'rgba(255, 255, 255, 0.09)',
+    'avatar-background': '#5A5958',
+    'avatar-text': '#FFFFFF',
+  },
+} as const
+
+describe('semantic token resolved values are unchanged by the hex migration (VW-83)', () => {
+  it('matches the pre-migration fixture in light mode', () => {
+    expect(getSemanticColors('light')).toEqual(resolvedBeforeFixture.light)
+  })
+
+  it('matches the pre-migration fixture in dark mode', () => {
+    expect(getSemanticColors('dark')).toEqual(resolvedBeforeFixture.dark)
+  })
+})

package/src/theme/tokens/semantic.ts

@@ -23,6 +23,8 @@ import {
   greyRamp,
   discreteRainbow,
   alertRedVivid,
+  resultPaletteColors,
+  semanticPins,
 } from './primitives'
 
 /**
@@ -77,6 +79,13 @@ export const semanticColorsLight = {
   'on-brand-primary': p.white,
   'on-brand-secondary': p.white,
 
+  // Text ON a `-subtle` fill. Light mode keeps today's pairing (the base token) so
+  // nothing moves here: light has the same disease mirrored — a light rung on a
+  // near-white ramp[50] fill — but correcting it belongs with the light-mode pass
+  // in AW-121, not this one.
+  'on-brand-primary-subtle': ramp.orange[400],
+  'on-brand-secondary-subtle': ramp.cyan[600],
+
   // Status colors (status-*)
   'status-success': ramp.green[300],
   'status-success-light': ramp.green[200],
@@ -117,6 +126,12 @@ export const semanticColorsLight = {
   'status-info-muted': 'rgba(33, 150, 243, 0.30)',
   'status-info-strong': 'rgba(33, 150, 243, 0.50)',
 
+  // Text ON a `-subtle` fill — see the on-brand-*-subtle note above.
+  'on-status-success-subtle': ramp.green[300],
+  'on-status-error-subtle': ramp.red[600],
+  'on-status-warning-subtle': ramp.amber[300],
+  'on-status-info-subtle': ramp.blue[500],
+
   // Text on status backgrounds (on-status-*)
   'on-status-success': p.white,
   'on-status-error': p.white,
@@ -124,13 +139,13 @@ export const semanticColorsLight = {
   'on-status-info': p.white,
 
   // Result/outcome indicators (result-*)
-  'result-improve': '#4caf50', // Green - positive outcome
+  'result-improve': resultPaletteColors.improve, // Green - positive outcome
   'result-improve-light': 'rgba(76, 175, 80, 0.12)',
-  'result-improve-dark': '#248a24',
-  'result-degrade': '#ef5350', // Red - negative outcome
+  'result-improve-dark': resultPaletteColors.improveDark,
+  'result-degrade': resultPaletteColors.degrade, // Red - negative outcome
   'result-degrade-light': 'rgba(239, 83, 80, 0.12)',
-  'result-degrade-dark': '#b30000',
-  'result-inconclusive': '#9E9A97', // Gray - no clear result
+  'result-degrade-dark': resultPaletteColors.degradeDark,
+  'result-inconclusive': resultPaletteColors.inconclusive, // Gray - no clear result
   'result-inconclusive-light': 'rgba(158, 154, 151, 0.12)',
   'result-neutral': greyRamp[600], // Neutral baseline
 
@@ -153,8 +168,8 @@ export const semanticColorsLight = {
   'data-10': discreteRainbow[22], // Dark Orange
 
   // Text colors (text-*)
-  'text-primary': '#121828',
-  'text-secondary': '#65748B',
+  'text-primary': semanticPins.textPrimaryLight,
+  'text-secondary': semanticPins.textSecondaryLight,
   'text-tertiary': greyRamp[400],
   'text-disabled': 'rgba(55, 65, 81, 0.48)',
   'text-inverse': p.white,
@@ -169,7 +184,7 @@ export const semanticColorsLight = {
   'surface-input': greyRamp[50], // Input field background (filled variant)
 
   // Background colors (background-*)
-  'background-base': '#EBEBEB',
+  'background-base': semanticPins.backgroundBaseLight,
   'background-default': p.white,
   'background-subtle': greyRamp[50],
   // Frame/bezel chrome — top bar + side nav shell, one step below
@@ -199,7 +214,7 @@ export const semanticColorsLight = {
   'interactive-disabled-text': 'rgba(55, 65, 81, 0.26)',
 
   // Divider
-  divider: '#E8E9EB',
+  divider: semanticPins.dividerLight,
 
   // Avatar default
   'avatar-background': greyRamp[600],
@@ -221,7 +236,7 @@ export const semanticColorsDark = {
   'brand-secondary': ramp.cyan[600],
   'brand-secondary-light': ramp.cyan[500],
   'brand-secondary-dark': ramp.cyan[700],
-  'brand-secondary-subtle': 'rgba(48, 123, 155, 0.12)',
+  'brand-secondary-subtle': 'rgba(34, 211, 238, 0.12)',
   'brand-secondary-muted': 'rgba(48, 123, 155, 0.30)',
   'brand-secondary-strong': 'rgba(48, 123, 155, 0.50)',
   'brand-secondary-hover': ramp.cyan[500],
@@ -231,6 +246,15 @@ export const semanticColorsDark = {
   'on-brand-primary': p.white,
   'on-brand-secondary': p.white,
 
+  // Text ON a `-subtle` fill. Its own role: `brand-primary` and friends are tuned to
+  // carry a white label as a solid fill, which makes the two deepest of them
+  // (cyan[600], red[600]) too dark to read as text on a dark plane. Levelling the
+  // family at rung 300 puts every tone within OKLCH L 0.769-0.813 instead of
+  // 0.550-0.813. Brand is deliberately left at its own orange[400] (operator, AW-133)
+  // so the Voltras tone never drifts; it is the one tone under AA on a raised card.
+  'on-brand-primary-subtle': ramp.orange[400],
+  'on-brand-secondary-subtle': ramp.cyan[300],
+
   // Status colors
   'status-success': ramp.green[300],
   'status-success-light': ramp.green[200],
@@ -246,7 +270,10 @@ export const semanticColorsDark = {
   'status-error': ramp.red[600],
   'status-error-light': ramp.red[500],
   'status-error-dark': ramp.red[700],
-  'status-error-subtle': 'rgba(209, 67, 67, 0.12)',
+  // Alpha 0.08, not the family's 0.12: error's label is red[400], a rung darker than
+  // its siblings so it reads RED rather than pink (rung 300 has only 0.121 chroma).
+  // Thinning the fill buys back the contrast that extra darkness costs. See AW-133.
+  'status-error-subtle': 'rgba(247, 113, 117, 0.08)',
   'status-error-muted': 'rgba(209, 67, 67, 0.30)',
   'status-error-strong': 'rgba(209, 67, 67, 0.50)',
 
@@ -267,7 +294,7 @@ export const semanticColorsDark = {
   'status-info': ramp.blue[500],
   'status-info-light': ramp.blue[300],
   'status-info-dark': ramp.blue[600],
-  'status-info-subtle': 'rgba(33, 150, 243, 0.12)',
+  'status-info-subtle': 'rgba(120, 194, 255, 0.12)',
   'status-info-muted': 'rgba(33, 150, 243, 0.30)',
   'status-info-strong': 'rgba(33, 150, 243, 0.50)',
 
@@ -277,14 +304,23 @@ export const semanticColorsDark = {
   'on-status-warning': p.white,
   'on-status-info': p.white,
 
+  // Text ON a `-subtle` fill — see the on-brand-*-subtle note above. Error is the
+  // second deliberate exception to the rung-300 rule (operator, AW-133): red[300]
+  // levelled perfectly but read PINK, because a red that light can only hold 0.121
+  // chroma. red[400] carries 0.165 and reads red; its fill is thinned to compensate.
+  'on-status-success-subtle': ramp.green[300],
+  'on-status-error-subtle': ramp.red[400],
+  'on-status-warning-subtle': ramp.amber[300],
+  'on-status-info-subtle': ramp.blue[300],
+
   // Result/outcome indicators (result-*)
-  'result-improve': '#4caf50',
+  'result-improve': resultPaletteColors.improve,
   'result-improve-light': 'rgba(76, 175, 80, 0.16)',
-  'result-improve-dark': '#248a24',
-  'result-degrade': '#ef5350',
+  'result-improve-dark': resultPaletteColors.improveDark,
+  'result-degrade': resultPaletteColors.degrade,
   'result-degrade-light': 'rgba(239, 83, 80, 0.16)',
-  'result-degrade-dark': '#b30000',
-  'result-inconclusive': '#9E9A97',
+  'result-degrade-dark': resultPaletteColors.degradeDark,
+  'result-inconclusive': resultPaletteColors.inconclusive,
   'result-inconclusive-light': 'rgba(158, 154, 151, 0.16)',
   'result-neutral': greyRamp[400],
 
@@ -318,7 +354,7 @@ export const semanticColorsDark = {
   'text-tertiary': greyRamp[500],
   'text-disabled': 'rgba(255, 255, 255, 0.38)',
   'text-inverse': greyRamp[950],
-  'text-link': '#828DF8',
+  'text-link': semanticPins.focusIndigoDark,
   'text-link-hover': ramp.blue[400],
 
   // Surface colors - dark backgrounds — warm-tapered DERIVED ramp (TD-surface-tokens,
@@ -361,10 +397,10 @@ export const semanticColorsDark = {
   // outright (4 call sites, high-visibility dividers), and grey-800 is not a
   // plane, so it keeps its job without collision.
   'border-prominent': greyRamp[800], // high-visibility divider
-  'border-focus': '#828DF8',
+  'border-focus': semanticPins.focusIndigoDark,
   'border-input': greyRamp[700],
   'border-input-hover': greyRamp[600],
-  'border-input-focus': '#828DF8',
+  'border-input-focus': semanticPins.focusIndigoDark,
   'border-input-error': ramp.red[500],
 
   // Alpha hairline separators — the primary separation cue (§4/S-2). Self-