@titan-design/react-ui 0.11.0 → 0.12.1

package/dist/theme/index.js

@@ -7,93 +7,50 @@ var jsxRuntime = require('react/jsx-runtime');
 
 // src/theme/tokens/primitives.ts
 var primitiveColors = {
-  // Blue scale
-  blue: {
-    50: "#EFF6FF",
-    100: "#DBEAFE",
-    200: "#BFDBFE",
-    300: "#93C5FD",
-    400: "#60A5FA",
-    500: "#3B82F6",
-    600: "#5048E5",
-    700: "#3832A0",
-    800: "#1E40AF",
-    900: "#1E3A8A"
-  },
-  // Red scale
-  red: {
-    50: "#FEF2F2",
-    100: "#FEE2E2",
-    200: "#FECACA",
-    300: "#FCA5A5",
-    400: "#DA6868",
-    500: "#EF4444",
-    600: "#D14343",
-    700: "#922E2E",
-    800: "#991B1B",
-    900: "#7F1D1D"
-  },
-  // Vivid red scale
-  redVivid: {
-    50: "#FFECEE",
-    100: "#FFD6DB",
-    200: "#FFB3BC",
-    300: "#FF8593",
-    400: "#FF6070",
-    500: "#FF4757",
-    600: "#E63548",
-    700: "#C42539",
-    800: "#9E1C2C",
-    900: "#7A1520"
-  },
-  // Neutral/Gray scale
-  neutral: {
-    50: "#FAFAFA",
-    100: "#F3F4F6",
-    200: "#E5E7EB",
-    300: "#D1D5DB",
-    400: "#9CA3AF",
-    500: "#6B7280",
-    600: "#4B5563",
-    700: "#374151",
-    800: "#1F2937",
-    900: "#111827",
-    950: "#030712"
-  },
-  // Charcoal scale (dark backgrounds)
-  charcoal: {
-    0: "#6E6E6E",
-    50: "#5D5D5D",
-    100: "#4C4C4C",
-    200: "#3C3C3C",
-    300: "#2C2C2C",
-    400: "#1F1F1F",
-    500: "#1C1C1C",
-    600: "#191919",
-    700: "#161616",
-    800: "#131313",
-    900: "#101010"
-  },
-  // Pure colors
   white: "#FFFFFF",
   black: "#000000",
   transparent: "transparent"
 };
-var surfaceRampDark = {
-  inset: "#13100D",
-  // L*4.5  — sub-shell well / pressed
-  background: "#1C1916",
-  // L*9    — shell / frame
-  base: "#252321",
-  // L*13.5 — main content plane
-  elevated: "#2C2A28",
-  // L*17   — nav / rail
-  raised: "#31302F",
-  // L*20   — cards
-  overlay: "#373635"
-  // L*22.5 — hero / popover
+var greyRamp = {
+  50: "#F9F6F3",
+  //  L*97.0  W6
+  100: "#EDEAE7",
+  // L*92.8  W6
+  200: "#D4D1CE",
+  // L*84.0  W6  — warm silver
+  300: "#BDBAB7",
+  // L*75.7  W6
+  400: "#A29F9D",
+  // L*65.7  W5
+  500: "#888684",
+  // L*56.0  W4
+  600: "#72716F",
+  // L*47.7  W3
+  700: "#5A5958",
+  // L*37.9  W2
+  800: "#424140",
+  // L*27.6  W2  — generated bridge
+  850: "#373635",
+  // L*22.7  W2  — surface overlay
+  875: "#31302F",
+  // L*19.9  W2  — surface raised
+  900: "#2C2A28",
+  // L*17.2  W4  — surface elevated
+  925: "#252321",
+  // L*13.9  W4  — surface base
+  950: "#1C1916",
+  // L*9.0   W6  — background base / shell
+  975: "#100D0A"
+  // L*3.8   W6  — background frame / bezel
+};
+var SURFACE_PLANE_STEPS = {
+  frame: 975,
+  background: 950,
+  base: 925,
+  elevated: 900,
+  raised: 875,
+  overlay: 850
 };
-var backgroundFrameDark = "#100D0A";
 var primitiveRamps = {
   red: {
     50: "#FFF4F4",
@@ -244,8 +201,8 @@ var sequentialEffort = [
 ];
 function bestTextColor(hex) {
   const [r, g, b] = [0, 2, 4].map((i) => {
-    const c = parseInt(hex.replace("#", "").slice(i, i + 2), 16) / 255;
-    return c >= 0.04045 ? ((c + 0.055) / 1.055) ** 2.4 : c / 12.92;
+    const c2 = parseInt(hex.replace("#", "").slice(i, i + 2), 16) / 255;
+    return c2 >= 0.04045 ? ((c2 + 0.055) / 1.055) ** 2.4 : c2 / 12.92;
   });
   const l = 0.2126 * r + 0.7152 * g + 0.0722 * b;
   return (l + 0.05) / 0.05 >= 1.05 / (l + 0.05) ? "#000000" : "#FFFFFF";
@@ -421,16 +378,6 @@ var primitiveBorderRadius = {
   "2xl": "24px",
   full: "9999px"
 };
-var primitiveShadows = {
-  none: "none",
-  sm: "0px 1px 2px rgba(100, 116, 139, 0.12)",
-  DEFAULT: "0px 1px 3px rgba(100, 116, 139, 0.12), 0px 1px 2px rgba(100, 116, 139, 0.24)",
-  md: "0px 4px 6px rgba(100, 116, 139, 0.12)",
-  lg: "0px 10px 15px rgba(100, 116, 139, 0.12)",
-  xl: "0px 20px 25px rgba(100, 116, 139, 0.12)",
-  "2xl": "0px 25px 50px rgba(100, 116, 139, 0.25)",
-  inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"
-};
 var primitiveBreakpoints = {
   xs: 0,
   sm: 600,
@@ -486,10 +433,10 @@ var semanticColorsLight = {
   "status-error-light": primitiveRamps.red[500],
   "status-error-dark": primitiveRamps.red[700],
   "status-error-subtle": primitiveRamps.red[50],
-  "status-error-vivid": primitiveColors.redVivid[500],
+  "status-error-vivid": primitiveRamps.red[600],
   // vivid alert red
-  "status-error-vivid-light": primitiveColors.redVivid[400],
-  "status-error-vivid-dark": primitiveColors.redVivid[700],
+  "status-error-vivid-light": primitiveRamps.red[500],
+  "status-error-vivid-dark": primitiveRamps.red[700],
   "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
   "status-warning": primitiveRamps.amber[300],
   "status-warning-light": primitiveRamps.amber[200],
@@ -516,7 +463,7 @@ var semanticColorsLight = {
   "result-inconclusive": "#9E9A97",
   // Gray - no clear result
   "result-inconclusive-light": "rgba(158, 154, 151, 0.12)",
-  "result-neutral": primitiveColors.neutral[500],
+  "result-neutral": greyRamp[600],
   // Neutral baseline
   // Text on result backgrounds (on-result-*)
   "on-result-improve": primitiveColors.white,
@@ -547,47 +494,38 @@ var semanticColorsLight = {
   // Text colors (text-*)
   "text-primary": "#121828",
   "text-secondary": "#65748B",
-  "text-tertiary": primitiveColors.neutral[400],
+  "text-tertiary": greyRamp[400],
   "text-disabled": "rgba(55, 65, 81, 0.48)",
   "text-inverse": primitiveColors.white,
-  "text-link": primitiveColors.blue[600],
-  "text-link-hover": primitiveColors.blue[700],
+  "text-link": primitiveRamps.blue[600],
+  "text-link-hover": primitiveRamps.blue[700],
   // Surface colors (surface-*) - for elevated containers
   "surface-base": primitiveColors.white,
-  "surface-elevated": primitiveColors.neutral[50],
+  "surface-elevated": greyRamp[50],
   // slightly off-white for elevated cards
-  "surface-raised": primitiveColors.neutral[100],
+  "surface-raised": greyRamp[100],
   // light gray for raised cards
   "surface-overlay": primitiveColors.white,
-  "surface-input": primitiveColors.neutral[50],
+  "surface-input": greyRamp[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": primitiveColors.neutral[300],
   // Background colors (background-*)
   "background-base": "#EBEBEB",
   "background-default": primitiveColors.white,
-  "background-subtle": primitiveColors.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": primitiveColors.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": primitiveColors.neutral[100],
-  "border-strong": primitiveColors.neutral[300],
-  "border-prominent": primitiveColors.neutral[400],
+  "border-prominent": greyRamp[400],
   // high-visibility divider
-  "border-focus": primitiveColors.blue[600],
-  "border-input": primitiveColors.neutral[300],
+  "border-focus": primitiveRamps.blue[600],
+  "border-input": greyRamp[200],
   // Input field border
-  "border-input-hover": primitiveColors.neutral[400],
+  "border-input-hover": greyRamp[400],
   // Input field border on hover
-  "border-input-focus": primitiveColors.blue[600],
+  "border-input-focus": primitiveRamps.blue[600],
   // Input field border on focus
-  "border-input-error": primitiveColors.red[600],
+  "border-input-error": primitiveRamps.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.
@@ -604,7 +542,7 @@ var semanticColorsLight = {
   // Divider
   "divider": "#E8E9EB",
   // Avatar default
-  "avatar-background": primitiveColors.neutral[500],
+  "avatar-background": greyRamp[600],
   "avatar-text": primitiveColors.white
 };
 var semanticColorsDark = {
@@ -636,9 +574,9 @@ var semanticColorsDark = {
   "status-error-light": primitiveRamps.red[500],
   "status-error-dark": primitiveRamps.red[700],
   "status-error-subtle": "rgba(209, 67, 67, 0.12)",
-  "status-error-vivid": primitiveColors.redVivid[500],
-  "status-error-vivid-light": primitiveColors.redVivid[400],
-  "status-error-vivid-dark": primitiveColors.redVivid[700],
+  "status-error-vivid": primitiveRamps.red[600],
+  "status-error-vivid-light": primitiveRamps.red[500],
+  "status-error-vivid-dark": primitiveRamps.red[700],
   "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
   "status-warning": primitiveRamps.amber[300],
   "status-warning-light": primitiveRamps.amber[200],
@@ -662,7 +600,7 @@ var semanticColorsDark = {
   "result-degrade-dark": "#b30000",
   "result-inconclusive": "#9E9A97",
   "result-inconclusive-light": "rgba(158, 154, 151, 0.16)",
-  "result-neutral": primitiveColors.neutral[400],
+  "result-neutral": greyRamp[400],
   // Text on result backgrounds
   "on-result-improve": primitiveColors.white,
   "on-result-degrade": primitiveColors.white,
@@ -679,74 +617,106 @@ var semanticColorsDark = {
   "data-9": discreteRainbow[3],
   "data-10": discreteRainbow[22],
   // Text colors - inverted for dark mode
-  "text-primary": primitiveColors.neutral[100],
-  "text-secondary": primitiveColors.neutral[400],
-  "text-tertiary": primitiveColors.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": primitiveColors.neutral[900],
+  "text-inverse": greyRamp[950],
   "text-link": "#828DF8",
-  "text-link-hover": primitiveColors.blue[400],
+  "text-link-hover": primitiveRamps.blue[400],
   // Surface colors - dark backgrounds — warm-tapered DERIVED ramp (TD-surface-tokens,
   // S-1, re-spaced S-3). Shipped verbatim from `deriveSurfaceRamp()` — see
   // `surfaceRampDark` in primitives.ts for the full derivation note. `surface-overlay`
   // 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": surfaceRampDark.base,
-  // main surface        (#252321, L*13.5)
-  "surface-elevated": surfaceRampDark.elevated,
-  // elevated surface     (#2C2A28, L*17   — nav/rail)
-  "surface-raised": surfaceRampDark.raised,
-  // raised surface       (#31302F, L*20   — cards)
-  "surface-overlay": surfaceRampDark.overlay,
-  // overlay surface      (#373635, L*22.5 — hero/popover)
-  "surface-input": surfaceRampDark.elevated,
+  // 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)
-  "surface-inset": surfaceRampDark.inset,
-  // deepest pressed pit  (#13100D, L*4.5  — sub-shell well)
   // Background colors — same ramp, the frame/shell end of it.
-  "background-base": surfaceRampDark.background,
-  // shell / frame        (#1C1916, L*9 — Surface level="background")
-  "background-default": surfaceRampDark.base,
-  // main background      (#252321, L*13.5 — matches surface-base)
-  "background-subtle": surfaceRampDark.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": primitiveColors.charcoal[400],
-  // default border
-  "border-subtle": primitiveColors.charcoal[500],
-  // subtle border
-  "border-strong": primitiveColors.charcoal[300],
-  // strong border
-  "border-prominent": primitiveColors.charcoal[200],
+  "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": primitiveColors.neutral[600],
-  "border-input-hover": primitiveColors.neutral[500],
+  "border-input": greyRamp[700],
+  "border-input-hover": greyRamp[600],
   "border-input-focus": "#828DF8",
-  "border-input-error": primitiveColors.red[500],
+  "border-input-error": primitiveRamps.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)",
   "interactive-focus": "rgba(255, 255, 255, 0.12)",
@@ -755,10 +725,9 @@ var semanticColorsDark = {
   "interactive-disabled": "rgba(255, 255, 255, 0.12)",
   "interactive-disabled-text": "rgba(255, 255, 255, 0.26)",
   // Divider
-  "divider": primitiveColors.charcoal[400],
-  // divider color
+  "divider": "rgba(255, 255, 255, 0.09)",
   // Avatar default
-  "avatar-background": primitiveColors.neutral[600],
+  "avatar-background": greyRamp[700],
   "avatar-text": primitiveColors.white
 };
 var semanticTypography = {
@@ -924,14 +893,10 @@ var lightThemeCSSVars = {
   "--color-surface-base": semanticColorsLight["surface-base"],
   "--color-surface-elevated": semanticColorsLight["surface-elevated"],
   "--color-surface-raised": semanticColorsLight["surface-raised"],
-  "--color-surface-inset": semanticColorsLight["surface-inset"],
   "--color-background-base": semanticColorsLight["background-base"],
   "--color-background-default": semanticColorsLight["background-default"],
   "--color-background-subtle": semanticColorsLight["background-subtle"],
   "--color-background-frame": semanticColorsLight["background-frame"],
-  "--color-border-default": semanticColorsLight["border-default"],
-  "--color-border-subtle": semanticColorsLight["border-subtle"],
-  "--color-border-strong": semanticColorsLight["border-strong"],
   "--color-border-prominent": semanticColorsLight["border-prominent"],
   "--color-border-focus": semanticColorsLight["border-focus"],
   "--color-interactive-hover": semanticColorsLight["interactive-hover"],
@@ -1027,14 +992,10 @@ var darkThemeCSSVars = {
   "--color-surface-base": semanticColorsDark["surface-base"],
   "--color-surface-elevated": semanticColorsDark["surface-elevated"],
   "--color-surface-raised": semanticColorsDark["surface-raised"],
-  "--color-surface-inset": semanticColorsDark["surface-inset"],
   "--color-background-base": semanticColorsDark["background-base"],
   "--color-background-default": semanticColorsDark["background-default"],
   "--color-background-subtle": semanticColorsDark["background-subtle"],
   "--color-background-frame": semanticColorsDark["background-frame"],
-  "--color-border-default": semanticColorsDark["border-default"],
-  "--color-border-subtle": semanticColorsDark["border-subtle"],
-  "--color-border-strong": semanticColorsDark["border-strong"],
   "--color-border-prominent": semanticColorsDark["border-prominent"],
   "--color-border-focus": semanticColorsDark["border-focus"],
   "--color-interactive-hover": semanticColorsDark["interactive-hover"],
@@ -1167,6 +1128,54 @@ var gluestackConfig = {
     rounded: "borderRadius"
   }
 };
+
+// src/theme/materials.ts
+var c = getSemanticColors("dark");
+function parseHex(hex) {
+  const h = hex.replace("#", "");
+  const full = h.length === 3 ? h.split("").map((ch) => ch + ch).join("") : h;
+  const rgb = [
+    parseInt(full.slice(0, 2), 16),
+    parseInt(full.slice(2, 4), 16),
+    parseInt(full.slice(4, 6), 16)
+  ];
+  return rgb.some(Number.isNaN) ? null : rgb;
+}
+function perceivedLuminance(hex) {
+  const rgb = parseHex(hex);
+  if (!rgb) return 0.5;
+  const [r, g, b] = rgb;
+  return (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+}
+function grainOpacityForTone(baseColor) {
+  return Math.min(0.24, Math.max(0.04, 0.02 + 0.31 * perceivedLuminance(baseColor)));
+}
+function grainForTone(baseColor) {
+  const op = grainOpacityForTone(baseColor).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")`;
+}
+function paperSheet(tone = c["surface-raised"]) {
+  return {
+    backgroundColor: tone,
+    // Grain alone. The dither went with the gradient it protected — see header.
+    backgroundImage: grainForTone(tone),
+    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.20), 0 8px 22px rgba(0,0,0,0.50)"
+  };
+}
+function insetWell(tone = c["surface-input"]) {
+  return {
+    backgroundColor: tone,
+    boxShadow: "inset 0 2px 6px rgba(0,0,0,0.55), inset 0 -1px 0 rgba(255,255,255,0.12)"
+  };
+}
+function barPaper(color, flip = false) {
+  return {
+    backgroundImage: grainForTone(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)"
+  };
+}
+
+// src/theme/color-utils.ts
 function hexToRgb(hex) {
   const cleaned = hex.replace("#", "");
   let r, g, b;
@@ -1206,32 +1215,32 @@ function rgbToHsv(r, g, b) {
   return { h, s, v };
 }
 function hsvToRgb(h, s, v) {
-  const c = v * s;
-  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
-  const m = v - c;
+  const c2 = v * s;
+  const x = c2 * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = v - c2;
   let rPrime, gPrime, bPrime;
   if (h >= 0 && h < 60) {
-    rPrime = c;
+    rPrime = c2;
     gPrime = x;
     bPrime = 0;
   } else if (h >= 60 && h < 120) {
     rPrime = x;
-    gPrime = c;
+    gPrime = c2;
     bPrime = 0;
   } else if (h >= 120 && h < 180) {
     rPrime = 0;
-    gPrime = c;
+    gPrime = c2;
     bPrime = x;
   } else if (h >= 180 && h < 240) {
     rPrime = 0;
     gPrime = x;
-    bPrime = c;
+    bPrime = c2;
   } else if (h >= 240 && h < 300) {
     rPrime = x;
     gPrime = 0;
-    bPrime = c;
+    bPrime = c2;
   } else {
-    rPrime = c;
+    rPrime = c2;
     gPrime = 0;
     bPrime = x;
   }
@@ -1284,194 +1293,6 @@ function isDark(hex) {
   const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
   return hsv.v < 0.6;
 }
-var shadowColors = {
-  // For charcoal surfaces (~#2C2C2C to #3C3C3C)
-  charcoal: {
-    dark: "rgba(0, 0, 0, 0.5)",
-    light: "rgba(255, 255, 255, 0.12)",
-    // brighter for crisp rim light
-    darker: "rgba(0, 0, 0, 0.6)"
-  },
-  // For neutral dark surfaces (~#1F2937)
-  neutralDark: {
-    dark: "rgba(0, 0, 0, 0.4)",
-    light: "rgba(255, 255, 255, 0.08)",
-    darker: "rgba(0, 0, 0, 0.5)"
-  },
-  // For light surfaces (white/light gray backgrounds)
-  neutralLight: {
-    dark: "rgba(0, 0, 0, 0.15)",
-    // Visible dark shadow for depth on light backgrounds
-    light: "rgba(255, 255, 255, 1)",
-    // Bright highlight for raised effect (visible on light gray)
-    darker: "rgba(0, 0, 0, 0.2)"
-    // Deeper shadow for pressed states
-  }
-};
-var intensityConfig = {
-  subtle: { offset: 1, blur: 2 },
-  // very light, barely visible
-  medium: { offset: 2, blur: 4 },
-  // noticeable but restrained
-  strong: { offset: 2, blur: 5 }
-  // slightly deeper blur, same offset as medium
-};
-function createRaisedShadow(surface = "charcoal", intensity = "medium") {
-  const colors = shadowColors[surface];
-  const { offset, blur } = intensityConfig[intensity];
-  const rimBlur = 1;
-  return reactNative.Platform.select({
-    web: {
-      boxShadow: `${offset}px ${offset}px ${blur}px ${colors.dark}, -${offset}px -${offset}px ${rimBlur}px ${colors.light}`
-    },
-    default: {
-      // React Native shadow approximation (limited compared to web)
-      shadowColor: "#000",
-      shadowOffset: { width: offset, height: offset },
-      shadowOpacity: 0.3,
-      shadowRadius: blur / 2,
-      elevation: offset
-    }
-  });
-}
-function createPressedShadow(surface = "charcoal", intensity = "medium") {
-  const colors = shadowColors[surface];
-  const { offset, blur } = intensityConfig[intensity];
-  const rimOffset = 1;
-  const rimBlur = 1;
-  return reactNative.Platform.select({
-    web: {
-      boxShadow: `inset ${offset}px ${offset}px ${blur}px ${colors.darker}, inset -${rimOffset}px -${rimOffset}px ${rimBlur}px ${colors.light}`
-    },
-    default: {
-      // React Native doesn't support inset shadows, approximate with darker bg
-      shadowOpacity: 0,
-      elevation: 0
-    }
-  });
-}
-function createFlatShadow() {
-  return reactNative.Platform.select({
-    web: {
-      boxShadow: "none"
-    },
-    default: {
-      shadowOpacity: 0,
-      elevation: 0
-    }
-  });
-}
-function createRaisedHoverShadow(surface = "charcoal", intensity = "medium") {
-  const colors = shadowColors[surface];
-  const { offset, blur } = intensityConfig[intensity];
-  const hoverOffset = Math.max(1, Math.round(offset / 2));
-  const hoverBlur = Math.max(1, Math.round(blur / 2));
-  const rimBlur = 1;
-  return reactNative.Platform.select({
-    web: {
-      // Keep same offsets as normal state for rim to prevent "shrinking" effect
-      boxShadow: `${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${colors.dark}, -${offset}px -${offset}px ${rimBlur}px ${colors.light}`
-    },
-    default: {
-      shadowColor: "#000",
-      shadowOffset: { width: hoverOffset, height: hoverOffset },
-      shadowOpacity: 0.2,
-      shadowRadius: hoverBlur / 2,
-      elevation: hoverOffset
-    }
-  });
-}
-function createPressedHoverShadow(surface = "charcoal", intensity = "medium") {
-  const colors = shadowColors[surface];
-  const { offset, blur } = intensityConfig[intensity];
-  const hoverOffset = Math.max(1, Math.round(offset / 2));
-  const hoverBlur = Math.max(1, Math.round(blur / 2));
-  const rimBlur = 1;
-  return reactNative.Platform.select({
-    web: {
-      // Keep rim offset at 1px (same as pressed normal) to prevent "shrinking" effect
-      boxShadow: `inset ${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${colors.darker}, inset -1px -1px ${rimBlur}px ${colors.light}`
-    },
-    default: {
-      shadowOpacity: 0,
-      elevation: 0
-    }
-  });
-}
-var neumorphicShadows = {
-  // Charcoal surface shadows (for dark toolbars, cards)
-  charcoal: {
-    raised: {
-      subtle: createRaisedShadow("charcoal", "subtle"),
-      medium: createRaisedShadow("charcoal", "medium"),
-      strong: createRaisedShadow("charcoal", "strong")
-    },
-    raisedHover: {
-      subtle: createRaisedHoverShadow("charcoal", "subtle"),
-      medium: createRaisedHoverShadow("charcoal", "medium"),
-      strong: createRaisedHoverShadow("charcoal", "strong")
-    },
-    pressed: {
-      subtle: createPressedShadow("charcoal", "subtle"),
-      medium: createPressedShadow("charcoal", "medium"),
-      strong: createPressedShadow("charcoal", "strong")
-    },
-    pressedHover: {
-      subtle: createPressedHoverShadow("charcoal", "subtle"),
-      medium: createPressedHoverShadow("charcoal", "medium"),
-      strong: createPressedHoverShadow("charcoal", "strong")
-    },
-    flat: createFlatShadow()
-  },
-  // Neutral dark surface shadows
-  neutralDark: {
-    raised: {
-      subtle: createRaisedShadow("neutralDark", "subtle"),
-      medium: createRaisedShadow("neutralDark", "medium"),
-      strong: createRaisedShadow("neutralDark", "strong")
-    },
-    raisedHover: {
-      subtle: createRaisedHoverShadow("neutralDark", "subtle"),
-      medium: createRaisedHoverShadow("neutralDark", "medium"),
-      strong: createRaisedHoverShadow("neutralDark", "strong")
-    },
-    pressed: {
-      subtle: createPressedShadow("neutralDark", "subtle"),
-      medium: createPressedShadow("neutralDark", "medium"),
-      strong: createPressedShadow("neutralDark", "strong")
-    },
-    pressedHover: {
-      subtle: createPressedHoverShadow("neutralDark", "subtle"),
-      medium: createPressedHoverShadow("neutralDark", "medium"),
-      strong: createPressedHoverShadow("neutralDark", "strong")
-    },
-    flat: createFlatShadow()
-  },
-  // Neutral light surface shadows
-  neutralLight: {
-    raised: {
-      subtle: createRaisedShadow("neutralLight", "subtle"),
-      medium: createRaisedShadow("neutralLight", "medium"),
-      strong: createRaisedShadow("neutralLight", "strong")
-    },
-    raisedHover: {
-      subtle: createRaisedHoverShadow("neutralLight", "subtle"),
-      medium: createRaisedHoverShadow("neutralLight", "medium"),
-      strong: createRaisedHoverShadow("neutralLight", "strong")
-    },
-    pressed: {
-      subtle: createPressedShadow("neutralLight", "subtle"),
-      medium: createPressedShadow("neutralLight", "medium"),
-      strong: createPressedShadow("neutralLight", "strong")
-    },
-    pressedHover: {
-      subtle: createPressedHoverShadow("neutralLight", "subtle"),
-      medium: createPressedHoverShadow("neutralLight", "medium"),
-      strong: createPressedHoverShadow("neutralLight", "strong")
-    },
-    flat: createFlatShadow()
-  }
-};
 var elevationSystem = {
   // Deep inset (recessed input fields, deeply pressed buttons)
   [-2]: {
@@ -1500,7 +1321,13 @@ var elevationSystem = {
   // Level 1: Subtle elevation (outline cards, subtle containers)
   [1]: {
     name: "subtle",
-    colorAdjustment: 0.01,
+    // The whole ladder was re-spaced in TD-07.16. It used to run
+    // 0.01/0.02/0.04/0.06/0.08, where the first step was ~2 RGB values — under
+    // the perceptual floor, so level 1 existed in the type system and nowhere on
+    // screen. With drop-shadow now gated off below FLOATING_ELEVATION_MIN, TONE
+    // is the only thing separating 0-3, so every step has to actually land.
+    // Even 0.025 spacing, verified in elevation.test.ts as ΔL* > 1 per step.
+    colorAdjustment: 0.025,
     shadowIntensity: "subtle",
     shadowStyle: "raised",
     description: "Subtle elevation (outline cards, subtle containers)"
@@ -1508,7 +1335,7 @@ var elevationSystem = {
   // Level 2: Standard elevation (default cards, buttons)
   [2]: {
     name: "standard",
-    colorAdjustment: 0.02,
+    colorAdjustment: 0.05,
     shadowIntensity: "medium",
     shadowStyle: "raised",
     description: "Standard elevation (default cards, raised buttons)"
@@ -1516,7 +1343,7 @@ var elevationSystem = {
   // Level 3: Prominent elevation (important cards, modals)
   [3]: {
     name: "prominent",
-    colorAdjustment: 0.04,
+    colorAdjustment: 0.075,
     shadowIntensity: "strong",
     shadowStyle: "raised",
     description: "Prominent elevation (important cards, modals, dropdowns)"
@@ -1524,7 +1351,7 @@ var elevationSystem = {
   // Level 4: High elevation (overlays, popovers)
   [4]: {
     name: "high",
-    colorAdjustment: 0.06,
+    colorAdjustment: 0.1,
     shadowIntensity: "strong",
     shadowStyle: "raised",
     description: "High elevation (overlays, popovers, tooltips)"
@@ -1532,7 +1359,7 @@ var elevationSystem = {
   // Level 5: Floating (toasts, floating action buttons)
   [5]: {
     name: "floating",
-    colorAdjustment: 0.08,
+    colorAdjustment: 0.13,
     shadowIntensity: "strong",
     shadowStyle: "raised",
     description: "Floating elevation (toasts, floating action buttons, highest z-index)"
@@ -1651,12 +1478,12 @@ function calculateElevationShadow(baseColor, level, theme, isHovered = false) {
   const elevatedSurfaceColor = calculateElevationSurface(baseColor, level);
   const rimLightColor = calculateRimLightColor(baseColor, level);
   const darkShadowColors = calculateDarkShadowColors(elevatedSurfaceColor);
-  const intensityConfig2 = {
+  const intensityConfig = {
     subtle: { offset: 1, blur: 2 },
     medium: { offset: 2, blur: 4 },
     strong: { offset: 2, blur: 5 }
   };
-  const { offset, blur } = intensityConfig2[config.shadowIntensity];
+  const { offset, blur } = intensityConfig[config.shadowIntensity];
   const rimConfig = getRimLightConfig();
   if (config.shadowStyle === "pressed") {
     if (isHovered) {
@@ -1712,12 +1539,13 @@ function calculateElevationShadow(baseColor, level, theme, isHovered = false) {
     });
   }
 }
+var FLOATING_ELEVATION_MIN = 4;
 function getElevationShadow(baseColor, level, theme, isHovered = false) {
   const cacheKey = getShadowCacheKey(baseColor, level, theme, isHovered);
   if (elevationShadowCache.has(cacheKey)) {
     return elevationShadowCache.get(cacheKey);
   }
-  const result = calculateElevationShadow(baseColor, level, theme, isHovered);
+  const result = level > 0 && level < FLOATING_ELEVATION_MIN ? {} : calculateElevationShadow(baseColor, level, theme, isHovered);
   if (elevationShadowCache.size >= MAX_SHADOW_CACHE_SIZE) {
     const firstKey = elevationShadowCache.keys().next().value;
     elevationShadowCache.delete(firstKey);
@@ -1987,7 +1815,7 @@ var audiobookPreset = {
       "text-primary": "#f4f3f1",
       "text-secondary": "#b5b3af",
       "text-tertiary": "#7a7875",
-      // Surfaces: warm charcoals (not pure gray)
+      // Surfaces: warm greys (not pure gray)
       "surface-base": "#101114",
       "surface-elevated": "#15171c",
       "surface-raised": "#1a1d24",
@@ -1998,9 +1826,9 @@ var audiobookPreset = {
       "background-default": "#101114",
       "background-subtle": "#1a1d24",
       // Borders
-      "border-default": "rgba(255, 255, 255, 0.06)",
-      "border-subtle": "rgba(255, 255, 255, 0.03)",
-      "border-strong": "#2d323d",
+      "hairline-default": "rgba(255, 255, 255, 0.06)",
+      "hairline-subtle": "rgba(255, 255, 255, 0.03)",
+      "hairline-strong": "#2d323d",
       "border-focus": "#d4782a",
       "border-input": "#2d323d",
       "border-input-hover": "#454c5c",
@@ -2060,20 +1888,17 @@ function ThemeProvider({
 }
 
 exports.CATEGORICAL_CVD_SAFE_MAX = CATEGORICAL_CVD_SAFE_MAX;
+exports.FLOATING_ELEVATION_MIN = FLOATING_ELEVATION_MIN;
 exports.PRESSED_ELEVATION_LEVEL = PRESSED_ELEVATION_LEVEL;
+exports.SURFACE_PLANE_STEPS = SURFACE_PLANE_STEPS;
 exports.ThemeProvider = ThemeProvider;
 exports.applyThemePreset = applyThemePreset;
 exports.audiobookPreset = audiobookPreset;
-exports.backgroundFrameDark = backgroundFrameDark;
+exports.barPaper = barPaper;
 exports.bestTextColor = bestTextColor;
 exports.buttonSizes = buttonSizes;
 exports.categoricalPalette = categoricalPalette;
 exports.componentElevationRanges = componentElevationRanges;
-exports.createFlatShadow = createFlatShadow;
-exports.createPressedHoverShadow = createPressedHoverShadow;
-exports.createPressedShadow = createPressedShadow;
-exports.createRaisedHoverShadow = createRaisedHoverShadow;
-exports.createRaisedShadow = createRaisedShadow;
 exports.darkThemeCSSVars = darkThemeCSSVars;
 exports.darken = darken;
 exports.defaultPreset = defaultPreset;
@@ -2093,19 +1918,22 @@ exports.getSemanticColors = getSemanticColors;
 exports.getThemeCSSVars = getThemeCSSVars;
 exports.getValidatedElevation = getValidatedElevation;
 exports.gluestackConfig = gluestackConfig;
+exports.grainForTone = grainForTone;
+exports.grainOpacityForTone = grainOpacityForTone;
+exports.greyRamp = greyRamp;
 exports.hexToRgb = hexToRgb;
 exports.hsvToRgb = hsvToRgb;
+exports.insetWell = insetWell;
 exports.isCssPropertyManifest = isCssPropertyManifest;
 exports.isDark = isDark;
 exports.lightThemeCSSVars = lightThemeCSSVars;
 exports.lighten = lighten;
 exports.linearGradient = linearGradient;
-exports.neumorphicShadows = neumorphicShadows;
+exports.paperSheet = paperSheet;
 exports.primitiveBorderRadius = primitiveBorderRadius;
 exports.primitiveBreakpoints = primitiveBreakpoints;
 exports.primitiveColors = primitiveColors;
 exports.primitiveRamps = primitiveRamps;
-exports.primitiveShadows = primitiveShadows;
 exports.primitiveSpacing = primitiveSpacing;
 exports.primitiveTypography = primitiveTypography;
 exports.primitiveZIndex = primitiveZIndex;
@@ -2116,9 +1944,7 @@ exports.semanticColorsDark = semanticColorsDark;
 exports.semanticColorsLight = semanticColorsLight;
 exports.semanticTypography = semanticTypography;
 exports.sequentialEffort = sequentialEffort;
-exports.shadowColors = shadowColors;
 exports.surfaceGradient = surfaceGradient;
-exports.surfaceRampDark = surfaceRampDark;
 exports.validateCssPropertyManifest = validateCssPropertyManifest;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map