@titan-design/react-ui 0.11.0 → 0.12.1

package/src/theme/tokens/semantic.ts

@@ -17,13 +17,34 @@
  * - interactive-* : Hover/focus/active/disabled states
  */
 
-import {
-  primitiveColors as p,
-  primitiveRamps as ramp,
-  discreteRainbow,
-  surfaceRampDark as surf,
-  backgroundFrameDark,
-} from './primitives'
+import { primitiveColors as p, primitiveRamps as ramp, greyRamp, discreteRainbow } from './primitives'
+
+/**
+ * GREY MAPPING (TD-07.14) — how the old cool scales resolved onto `greyRamp`.
+ *
+ * Every grey below came off `grey` (pure R=G=B) or `neutral` (cool, R−B
+ * down to −26). They were snapped by NEAREST L*, not by matching step numbers,
+ * because the two old scales were numbered incompatibly: `grey` ran
+ * INVERTED and compressed (0 = #6E6E6E lightest, 900 = #101010 darkest), so
+ * `grey[400]` and `greyRamp[400]` have nothing to do with each other.
+ *
+ *   grey 200→800  300→900  400→925  500→950
+ *   neutral   50→50   100→100  300→200  400→400  500→600  600→700  900→950
+ *
+ * Surfaces move ΔE 1.9–4.8 — at or near imperceptible. The TEXT roles move
+ * further (8.6–12.8), and that is the intended part of the change: they are
+ * picking up the warmth the surfaces already had.
+ *
+ * Light gets its own column because strict L*-nearest collapsed `neutral[50]`
+ * and `[100]` onto one step, flattening surface-elevated into surface-raised.
+ * Light is still deferred as a design question — there is no `surfaceRampLight`.
+ *
+ * `border-default`, `-subtle` and `-strong` are GONE, replaced by `hairline-*`.
+ * Once the planes became ramp steps, every value dark enough to read as a
+ * border was also a plane's fill. Alpha composites instead of colliding.
+ *
+ * `text-tertiary` on dark is the one role that ignores L*-nearest; see it.
+ */
 
 // Light mode semantic colors (default)
 export const semanticColorsLight = {
@@ -61,9 +82,9 @@ export const semanticColorsLight = {
   'status-error-dark': ramp.red[700],
   'status-error-subtle': ramp.red[50],
 
-  'status-error-vivid': p.redVivid[500],     // vivid alert red
-  'status-error-vivid-light': p.redVivid[400],
-  'status-error-vivid-dark': p.redVivid[700],
+  'status-error-vivid': ramp.red[600],     // vivid alert red
+  'status-error-vivid-light': ramp.red[500],
+  'status-error-vivid-dark': ramp.red[700],
   'status-error-vivid-subtle': 'rgba(255, 71, 87, 0.12)',
 
   'status-warning': ramp.amber[300],
@@ -91,7 +112,7 @@ export const semanticColorsLight = {
   'result-degrade-dark': '#b30000',
   'result-inconclusive': '#9E9A97',           // Gray - no clear result
   'result-inconclusive-light': 'rgba(158, 154, 151, 0.12)',
-  'result-neutral': p.neutral[500],           // Neutral baseline
+  'result-neutral': greyRamp[600],           // Neutral baseline
 
   // Text on result backgrounds (on-result-*)
   'on-result-improve': p.white,
@@ -114,43 +135,34 @@ export const semanticColorsLight = {
   // Text colors (text-*)
   'text-primary': '#121828',
   'text-secondary': '#65748B',
-  'text-tertiary': p.neutral[400],
+  'text-tertiary': greyRamp[400],
   'text-disabled': 'rgba(55, 65, 81, 0.48)',
   'text-inverse': p.white,
-  'text-link': p.blue[600],
-  'text-link-hover': p.blue[700],
+  'text-link': ramp.blue[600],
+  'text-link-hover': ramp.blue[700],
 
   // Surface colors (surface-*) - for elevated containers
   'surface-base': p.white,
-  'surface-elevated': p.neutral[50],          // slightly off-white for elevated cards
-  'surface-raised': p.neutral[100],           // light gray for raised cards
+  'surface-elevated': greyRamp[50],          // slightly off-white for elevated cards
+  'surface-raised': greyRamp[100],           // light gray for raised cards
   'surface-overlay': p.white,
-  'surface-input': p.neutral[50],             // Input field background (filled variant)
-  // Deepest pressed pit (TD-surface-tokens, S-3) — light-mode counterpart of
-  // the dark ramp's `inset` plane; a placeholder pairing, not part of the
-  // dark-ramp investigation (surface.contract.test.ts is dark-mode only).
-  'surface-inset': p.neutral[300],
+  'surface-input': greyRamp[50],             // Input field background (filled variant)
 
   // Background colors (background-*)
   'background-base': '#EBEBEB',
   'background-default': p.white,
-  'background-subtle': p.neutral[50],
-  // Frame/bezel chrome (TD-surface-tokens, S-3) — top bar + side nav shell,
-  // one step below `background-base` (darker still than `surface-inset`
-  // above, mirroring the dark-mode ordering). Placeholder pairing for light
-  // mode (see dark-mode note on `surface-inset` above).
-  'background-frame': p.neutral[400],
+  'background-subtle': greyRamp[50],
+  // Frame/bezel chrome — top bar + side nav shell, one step below
+  // `background-base`. Placeholder pairing for light mode, which is deferred.
+  'background-frame': greyRamp[400],
 
   // Border colors (border-*)
-  'border-default': '#E8E9EB',
-  'border-subtle': p.neutral[100],
-  'border-strong': p.neutral[300],
-  'border-prominent': p.neutral[400],        // high-visibility divider
-  'border-focus': p.blue[600],
-  'border-input': p.neutral[300],             // Input field border
-  'border-input-hover': p.neutral[400],       // Input field border on hover
-  'border-input-focus': p.blue[600],          // Input field border on focus
-  'border-input-error': p.red[600],           // Input field border on error
+  'border-prominent': greyRamp[400],        // high-visibility divider
+  'border-focus': ramp.blue[600],
+  'border-input': greyRamp[200],             // Input field border
+  'border-input-hover': greyRamp[400],       // Input field border on hover
+  'border-input-focus': ramp.blue[600],          // Input field border on focus
+  'border-input-error': ramp.red[600],           // Input field border on error
 
   // Alpha hairline separators (surface-independent — composite toward black on
   // light surfaces, mirroring the dark-mode white-alpha family). See §4/S-2.
@@ -170,7 +182,7 @@ export const semanticColorsLight = {
   'divider': '#E8E9EB',
 
   // Avatar default
-  'avatar-background': p.neutral[500],
+  'avatar-background': greyRamp[600],
   'avatar-text': p.white,
 } as const
 
@@ -210,9 +222,9 @@ export const semanticColorsDark = {
   'status-error-dark': ramp.red[700],
   'status-error-subtle': 'rgba(209, 67, 67, 0.12)',
 
-  'status-error-vivid': p.redVivid[500],
-  'status-error-vivid-light': p.redVivid[400],
-  'status-error-vivid-dark': p.redVivid[700],
+  'status-error-vivid': ramp.red[600],
+  'status-error-vivid-light': ramp.red[500],
+  'status-error-vivid-dark': ramp.red[700],
   'status-error-vivid-subtle': 'rgba(255, 71, 87, 0.12)',
 
   'status-warning': ramp.amber[300],
@@ -240,7 +252,7 @@ export const semanticColorsDark = {
   'result-degrade-dark': '#b30000',
   'result-inconclusive': '#9E9A97',
   'result-inconclusive-light': 'rgba(158, 154, 151, 0.16)',
-  'result-neutral': p.neutral[400],
+  'result-neutral': greyRamp[400],
 
   // Text on result backgrounds
   'on-result-improve': p.white,
@@ -260,13 +272,20 @@ export const semanticColorsDark = {
   'data-10': discreteRainbow[22],
 
   // Text colors - inverted for dark mode
-  'text-primary': p.neutral[100],
-  'text-secondary': p.neutral[400],
-  'text-tertiary': p.neutral[500],
+  'text-primary': greyRamp[50],
+  'text-secondary': greyRamp[400],
+  // Deliberately ONE step lighter than the L*-nearest match (`greyRamp[600]`).
+  // The colour this replaced failed WCAG large-text outright on the three
+  // lightest planes — 2.96 / 2.72 / 2.49 against elevated / raised / overlay —
+  // and `600` carried that failure forward almost exactly (2.93 / 2.70 / 2.47).
+  // `500` clears 3:1 everywhere (3.32–5.34). Contrast beats colour fidelity for
+  // text roles; borders and surfaces still use strict L*-nearest. See
+  // semantic-contrast.test.ts, which fails if this is moved back down.
+  'text-tertiary': greyRamp[500],
   'text-disabled': 'rgba(255, 255, 255, 0.38)',
-  'text-inverse': p.neutral[900],
+  'text-inverse': greyRamp[950],
   'text-link': '#828DF8',
-  'text-link-hover': p.blue[400],
+  'text-link-hover': ramp.blue[400],
 
   // Surface colors - dark backgrounds — warm-tapered DERIVED ramp (TD-surface-tokens,
   // S-1, re-spaced S-3). Shipped verbatim from `deriveSurfaceRamp()` — see
@@ -274,50 +293,79 @@ export const semanticColorsDark = {
   // and `surface-elevated` are distinct (were both #191919 pre-S-1); `surface-input`
   // tracks one plane above `surface-base`, same relative position as before the remap.
   // `background-base` backs `Surface level="background"` (SurfaceContext.SURFACE_LEVEL_TOKEN),
-  // so it takes the ramp's `background` (shell/frame) role, NOT `inset`. The ramp's
-  // deepest `inset` plane is now promoted to `surface-inset` below (S-3) — still no
-  // `SurfaceLevel` member for it (follow-up, alongside the elevation.ts -1/-2 pressed
-  // levels — parallel workstream, not this branch).
-  'surface-base': surf.base,               // main surface        (#252321, L*13.5)
-  'surface-elevated': surf.elevated,       // elevated surface     (#2C2A28, L*17   — nav/rail)
-  'surface-raised': surf.raised,           // raised surface       (#31302F, L*20   — cards)
-  'surface-overlay': surf.overlay,         // overlay surface      (#373635, L*22.5 — hero/popover)
-  'surface-input': surf.elevated,          // input surface        (#2C2A28 — one plane above base)
-  'surface-inset': surf.inset,             // deepest pressed pit  (#13100D, L*4.5  — sub-shell well)
+  // so it takes the ramp's shell role. The deepest plane is `background-frame`,
+  // which is also the `SurfaceLevel` floor a pressed surface clamps at.
+  'surface-base': greyRamp[925],           // main surface        (#252321, L*13.9)
+  'surface-elevated': greyRamp[900],       // elevated surface     (#2C2A28, L*17.2 — nav/rail)
+  'surface-raised': greyRamp[875],         // raised surface       (#31302F, L*19.9 — cards)
+  'surface-overlay': greyRamp[850],        // overlay surface      (#373635, L*22.7 — hero/popover)
+  'surface-input': greyRamp[900],          // input surface        (#2C2A28 — one plane above base)
 
   // Background colors — same ramp, the frame/shell end of it.
-  'background-base': surf.background,      // shell / frame        (#1C1916, L*9 — Surface level="background")
-  'background-default': surf.base,         // main background      (#252321, L*13.5 — matches surface-base)
-  'background-subtle': surf.elevated,      // subtle background    (#2C2A28, L*17 — matches surface-elevated)
-  // Frame/bezel chrome (S-3) — the top bar + side nav shell; one step BELOW
-  // `background-base`, darker even than `surface-inset` — it exits the content
-  // ramp entirely rather than sitting in it. See `backgroundFrameDark` in
-  // primitives.ts.
-  'background-frame': backgroundFrameDark, // frame / bezel        (#100D0A, L*3.79)
-
-  // Border colors — `border-subtle` (#1C1C1C) previously collided with
-  // `surface-raised` (also #1C1C1C, an invisible border on raised cards). The
-  // re-spaced ramp above moved `surface-raised` to #2D2C2B, so this value is now
-  // distinct from every surface hex without needing to change it — see
-  // `surface.contract.test.ts` R2/R4.
-  'border-default': p.charcoal[400],       // default border
-  'border-subtle': p.charcoal[500],        // subtle border
-  'border-strong': p.charcoal[300],        // strong border
-  'border-prominent': p.charcoal[200],     // high-visibility divider
+  'background-base': greyRamp[950],        // shell                (#1C1916, L*9   — Surface level="background")
+  'background-default': greyRamp[925],     // main background      (#252321, L*13.9 — matches surface-base)
+  'background-subtle': greyRamp[900],      // subtle background    (#2C2A28, L*17.2 — matches surface-elevated)
+  // Frame/bezel chrome — the top bar + side nav shell, one step BELOW
+  // `background-base`. It used to be described as sitting OUTSIDE the ramp; it
+  // is simply the ramp's last step now, and the floor `<Surface pressed>` clamps at.
+  'background-frame': greyRamp[975],       // frame / bezel        (#100D0A, L*3.8)
+
+  // Border colors — solid dark borders are RETIRED (TD-07.14). Not a preference — a structural
+  // consequence of one ramp. Every step from 850 to 975 is now a surface plane,
+  // so a solid border dark enough to read as a border necessarily equals some
+  // plane's fill, which is exactly the collision `surface.contract.test.ts` R2
+  // forbids. The only non-plane steps left in that band are 800 and 700, and
+  // borders there jump from L*~10-25 to L*~28-38 — a restyle, not a migration.
+  //
+  // So separation moves to the alpha hairlines, which dark mode already called
+  // "the primary separation cue". Being alpha, they composite against whatever
+  // plane they land on and cannot collide with any of them — the problem stops
+  // existing rather than being re-solved per plane. The three solid tokens were
+  // deleted outright; consumers point at the `hairline-*` family below.
+  //
+  // `border-prominent` stays SOLID: it is the one border meant to be seen
+  // 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-input': p.neutral[600],
-  'border-input-hover': p.neutral[500],
+  'border-input': greyRamp[700],
+  'border-input-hover': greyRamp[600],
   'border-input-focus': '#828DF8',
-  'border-input-error': p.red[500],
+  'border-input-error': ramp.red[500],
 
   // Alpha hairline separators — the primary separation cue (§4/S-2). Self-
   // normalizing: composites toward white by ~the same amount on ANY plane, so
   // one family works at every elevation instead of per-surface border tokens.
   // Shadows are demoted to floating-overlay use only (not shipped as a fill
   // separator here — see elevation.ts, follow-up S-4).
-  'hairline-subtle': 'rgba(255, 255, 255, 0.06)',
-  'hairline-default': 'rgba(255, 255, 255, 0.09)',
-  'hairline-strong': 'rgba(255, 255, 255, 0.14)',
+  //
+  // RETUNED on the wall (VW-99, S-6). The original .06/.09/.14 were set at a
+  // desk. On the panel at ~3 m `subtle` rendered but was indiscernible, and
+  // `default` — the load-bearing one, with no solid-border fallback since
+  // TD-07.14 — went weak on the lightest plane. `strong` read cleanly with room
+  // to spare, which is what made raising the whole family viable.
+  //
+  // Each tier steps up onto the next MEASURED-GOOD rung rather than an
+  // interpolated one: the new `subtle` is the old `default`, and the new
+  // `default` is the old `strong` — a value just confirmed legible on all four
+  // planes. Spacing goes 1 : 1.56 : 2.33, against the original 1 : 1.5 : 2.33.
+  //
+  // RUN 2 (VW-99): all three tiers were seen on all four planes — the retune
+  // worked — but `subtle` was still "a bit hard to read", so the whole family
+  // took a further +.01. That is a comfort margin on a passing row, not a fix
+  // for a failing one, which is why it is a flat offset: the 1 : 1.56 : 2.33
+  // spacing that the run validated is preserved rather than re-derived.
+  //
+  // Keep these to TWO decimals. react-native-web quantises alpha to 8 bits, so
+  // a 3-decimal value silently rounds on the way to the DOM (.135 renders as
+  // .13) — the token would say one thing and paint another.
+  //
+  // DARK ONLY. The light family above composites toward BLACK on light planes,
+  // which this run says nothing about — do not mirror these numbers into it
+  // without its own verification.
+  '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 states
   'interactive-hover': 'rgba(255, 255, 255, 0.04)',
@@ -328,10 +376,10 @@ export const semanticColorsDark = {
   'interactive-disabled-text': 'rgba(255, 255, 255, 0.26)',
 
   // Divider
-  'divider': p.charcoal[400],              // divider color
+  'divider': 'rgba(255, 255, 255, 0.09)',
 
   // Avatar default
-  'avatar-background': p.neutral[600],
+  'avatar-background': greyRamp[700],
   'avatar-text': p.white,
 } as const
 

package/src/utils/colors.ts

@@ -5,7 +5,7 @@
  * color math for more perceptually consistent results across hues.
  */
 
-export { lighten, darken } from '../theme/shadows'
+export { lighten, darken } from '../theme/color-utils'
 
 export type StatusType = 'success' | 'error' | 'warning' | 'info'
 export type ResultType = 'improve' | 'degrade' | 'inconclusive' | 'neutral'

package/tailwind.config.js

@@ -119,7 +119,6 @@ module.exports = {
           raised: 'var(--color-surface-raised)',
           overlay: 'var(--color-surface-overlay)',
           input: 'var(--color-surface-input)',
-          inset: 'var(--color-surface-inset)',
         },
         // Background colors
         background: {
@@ -140,11 +139,9 @@ module.exports = {
             hover: 'var(--color-text-link-hover)',
           },
         },
-        // Border colors
+        // Border colors — DEFAULT/subtle/strong are RETIRED (TD-07.14); use the
+        // `hairline` family below for separation.
         border: {
-          DEFAULT: 'var(--color-border-default)',
-          subtle: 'var(--color-border-subtle)',
-          strong: 'var(--color-border-strong)',
           prominent: 'var(--color-border-prominent)',
           focus: 'var(--color-border-focus)',
           input: {

package/src/theme/bar-paper.ts

@@ -1,59 +0,0 @@
-// The matte "paper" treatment for a colored bar — a brightness-scaled fractal-noise
-// grain + a crisp top rim-light + a soft contact shadow, so filled bars read as one
-// tactile material across the system (velocity bars, ROM bars, …). Web-only CSS
-// (backgroundImage + boxShadow) — harmless on native (ignored), styled for RNW/web.
-//
-// Promoted out of VelocityStrip so every colored-bar family composes ONE treatment
-// instead of re-rolling it. Consumers spread it onto a bar's style: `...barPaper(hex)`.
-import type { ViewStyle } from 'react-native'
-
-/**
- * Grain opacity scaled by a color's perceived brightness: a bright bar keeps full
- * texture, a darker bar carries proportionally less so the grain never reads hot on a
- * dark tone. Anchored so lum ≈ 0.13 → ≈ 0.06 and lum ≈ 0.58 → ≈ 0.20.
- */
-function grainOpacityForColor(hex: string): number {
-  const h = hex.replace('#', '')
-  const full =
-    h.length === 3
-      ? h
-          .split('')
-          .map((ch) => ch + ch)
-          .join('')
-      : h
-  const r = parseInt(full.slice(0, 2), 16)
-  const g = parseInt(full.slice(2, 4), 16)
-  const b = parseInt(full.slice(4, 6), 16)
-  if ([r, g, b].some(Number.isNaN)) return 0.14
-  const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255
-  return Math.min(0.24, Math.max(0.04, 0.02 + 0.31 * lum))
-}
-
-/** The matte paper grain tile (fractalNoise), opacity brightness-scaled to `color`. */
-function barGrain(color: string): string {
-  const op = grainOpacityForColor(color).toFixed(3)
-  return (
-    `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E` +
-    `%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E` +
-    `%3Crect width='120' height='120' filter='url(%23n)' opacity='${op}'/%3E%3C/svg%3E")`
-  )
-}
-
-/**
- * Paper/raised treatment for a colored bar of the given `color`: brightness-scaled
- * matte grain + a crisp top rim-light + a defined contact shadow. Spread onto a bar's
- * style. Presentation-only; scoped to filled bars (not shared strips/dividers).
- *
- * `flip` = a vertically-mirrored (`scaleY(-1)`) plot — a `down` wing of the diverging
- * chart. The contact shadow's y-offset is pre-inverted so the mirror lands it pointing
- * AWAY from the shared axis (not up across it), and the top rim-light is DROPPED (mirrored
- * it would sit on the axis edge and read wrong; grain + shadow alone carry the material).
- */
-export function barPaper(color: string, flip = false): ViewStyle {
-  return {
-    backgroundImage: barGrain(color),
-    boxShadow: flip
-      ? '0 -6px 16px rgba(0,0,0,0.45)'
-      : 'inset 0 1.5px 0 rgba(255,255,255,0.22), 0 6px 16px rgba(0,0,0,0.45)',
-  } as unknown as ViewStyle
-}