@titan-design/react-ui 0.11.0 → 0.12.1

package/dist/theme/tokens.js

@@ -0,0 +1,856 @@
+'use strict';
+
+// src/theme/tokens/primitives.ts
+var primitiveColors = {
+  white: "#FFFFFF",
+  black: "#000000",
+  transparent: "transparent"
+};
+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 primitiveRamps = {
+  red: {
+    50: "#FFF4F4",
+    100: "#FFE3E5",
+    200: "#FFC2C5",
+    300: "#FF9A9D",
+    400: "#F77175",
+    500: "#E05254",
+    600: "#D14343",
+    // pin
+    700: "#A4221C",
+    800: "#7E1002",
+    900: "#5A0900",
+    950: "#3D0400"
+  },
+  orange: {
+    50: "#FFF5ED",
+    100: "#FFE6D4",
+    200: "#FFC7A2",
+    300: "#FFA063",
+    400: "#FF7900",
+    // pin
+    500: "#DA5F00",
+    600: "#B94A00",
+    700: "#983804",
+    800: "#6F290F",
+    900: "#4E1C0C",
+    950: "#331107"
+  },
+  amber: {
+    50: "#FFF7DD",
+    100: "#FFEAA9",
+    200: "#FFD352",
+    300: "#F9B415",
+    // pin
+    400: "#E08C00",
+    500: "#C27400",
+    600: "#A45E00",
+    700: "#814D14",
+    800: "#5B3A1A",
+    900: "#442503",
+    950: "#301500"
+  },
+  green: {
+    50: "#E3FFEE",
+    100: "#B5FFD2",
+    200: "#58F69E",
+    300: "#2ED573",
+    // pin
+    400: "#21C05D",
+    500: "#22A444",
+    600: "#298732",
+    700: "#2B6B25",
+    800: "#264D1C",
+    900: "#1B3515",
+    950: "#11220D"
+  },
+  cyan: {
+    50: "#E6FBFF",
+    100: "#C2F6FF",
+    200: "#62EAFF",
+    300: "#22D3EE",
+    // pin
+    400: "#01B5D1",
+    500: "#2697B7",
+    600: "#307B9B",
+    700: "#2A617F",
+    800: "#22465F",
+    900: "#0B3149",
+    950: "#001F36"
+  },
+  blue: {
+    50: "#EFF8FF",
+    100: "#D9EFFF",
+    200: "#ACDBFF",
+    300: "#78C2FF",
+    400: "#3CA8FF",
+    500: "#2196F3",
+    // pin
+    600: "#1072CB",
+    700: "#135AA8",
+    800: "#14407E",
+    900: "#112C5A",
+    950: "#091B3C"
+  },
+  magenta: {
+    50: "#FFF3F9",
+    100: "#FFE2F1",
+    200: "#FFBDE2",
+    300: "#FF8FD5",
+    400: "#ED69C3",
+    500: "#D548AF",
+    600: "#BA2996",
+    700: "#9C0D7A",
+    // pin
+    800: "#77005A",
+    900: "#56003F",
+    950: "#3B0029"
+  }
+};
+var categoricalPalette = {
+  default: [
+    primitiveRamps.blue[500],
+    primitiveRamps.magenta[500],
+    primitiveRamps.red[500],
+    primitiveRamps.orange[400],
+    primitiveRamps.green[300],
+    primitiveRamps.cyan[300],
+    primitiveRamps.amber[600]
+    // extended (7th) — pair with a legend
+  ],
+  dark: [
+    primitiveRamps.blue[600],
+    primitiveRamps.magenta[600],
+    primitiveRamps.red[500],
+    primitiveRamps.orange[600],
+    primitiveRamps.green[800],
+    primitiveRamps.cyan[800],
+    primitiveRamps.amber[500]
+    // extended (7th) — pair with a legend
+  ]
+};
+var CATEGORICAL_CVD_SAFE_MAX = 6;
+function getCategoricalColor(index, variant = "default") {
+  const palette = categoricalPalette[variant];
+  index = Math.max(0, Math.floor(index));
+  return palette[index % palette.length];
+}
+var divergingScale = [
+  primitiveRamps.blue[500],
+  // under
+  primitiveRamps.cyan[300],
+  // maintenance
+  primitiveRamps.green[200],
+  // optimal (light center)
+  primitiveRamps.amber[300],
+  // approaching
+  primitiveRamps.red[600]
+  // over
+];
+var sequentialEffort = [
+  primitiveRamps.green[300],
+  primitiveRamps.amber[200],
+  primitiveRamps.amber[300],
+  primitiveRamps.orange[400],
+  primitiveRamps.red[600],
+  primitiveRamps.red[700]
+];
+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 l = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  return (l + 0.05) / 0.05 >= 1.05 / (l + 0.05) ? "#000000" : "#FFFFFF";
+}
+var discreteRainbow = [
+  "#E8ECFB",
+  "#D9CCE3",
+  "#D1BBD7",
+  "#CAACCB",
+  "#BA8DB4",
+  "#AE76A3",
+  "#AA6F9E",
+  "#994F88",
+  "#882E72",
+  "#1965B0",
+  "#437DBF",
+  "#5289C7",
+  "#6195CF",
+  "#7BAFDE",
+  "#4EB265",
+  "#90C987",
+  "#CAE0AB",
+  "#F7F056",
+  "#F7CB45",
+  "#F6C141",
+  "#F4A736",
+  "#F1932D",
+  "#EE8026",
+  "#E8601C",
+  "#E65518",
+  "#DC050C",
+  "#A5170E",
+  "#72190E",
+  "#42150A"
+];
+var discreteRainbowPalettes = [
+  [10],
+  [10, 26],
+  [10, 18, 26],
+  [10, 15, 18, 26],
+  [10, 14, 15, 18, 26],
+  [10, 14, 15, 17, 18, 26],
+  [9, 10, 14, 15, 17, 18, 26],
+  [9, 10, 14, 15, 17, 18, 23, 26],
+  [9, 10, 14, 15, 17, 18, 23, 26, 28],
+  [9, 10, 14, 15, 17, 18, 21, 24, 26, 28],
+  [9, 10, 12, 14, 15, 17, 18, 21, 24, 26, 28],
+  [3, 6, 9, 10, 12, 14, 15, 17, 18, 21, 24, 26],
+  [3, 6, 9, 10, 12, 14, 15, 16, 17, 18, 21, 24, 26],
+  [3, 6, 9, 10, 12, 14, 15, 16, 17, 18, 20, 22, 24, 26],
+  [3, 6, 9, 10, 12, 14, 15, 16, 17, 18, 20, 22, 24, 26, 28],
+  [3, 5, 7, 9, 10, 12, 14, 15, 16, 17, 18, 20, 22, 24, 26, 28],
+  [3, 5, 7, 8, 9, 10, 12, 14, 15, 16, 17, 18, 20, 22, 24, 26, 28],
+  [3, 5, 7, 8, 9, 10, 12, 14, 15, 16, 17, 18, 20, 22, 24, 26, 27, 28],
+  [2, 4, 5, 7, 8, 9, 10, 12, 14, 15, 16, 17, 18, 20, 22, 24, 26, 27, 28],
+  [2, 4, 5, 7, 8, 9, 10, 11, 13, 14, 15, 16, 17, 18, 20, 22, 24, 26, 27, 28],
+  [2, 4, 5, 7, 8, 9, 10, 11, 13, 14, 15, 16, 17, 18, 19, 21, 23, 25, 26, 27, 28],
+  [2, 4, 5, 7, 8, 9, 10, 11, 13, 14, 15, 16, 17, 18, 19, 21, 23, 25, 26, 27, 28, 29],
+  [1, 2, 4, 5, 7, 8, 9, 10, 11, 13, 14, 15, 16, 17, 18, 19, 21, 23, 25, 26, 27, 28, 29]
+];
+function getDiscreteRainbowColor(index, size) {
+  index = Math.max(0, index);
+  size = Math.min(Math.max(1, size), discreteRainbowPalettes.length);
+  const palette = discreteRainbowPalettes[size - 1];
+  if (index >= palette.length) index = index % palette.length;
+  return discreteRainbow[palette[index] - 1];
+}
+var primitiveTypography = {
+  fontFamilies: {
+    sans: ["Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica", "Arial", "sans-serif"],
+    body: ["Nunito Sans", "sans-serif"],
+    heading: ["Space Grotesk", "sans-serif"],
+    mono: ["SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", "monospace"]
+  },
+  fontSizes: {
+    xs: "0.75rem",
+    // 12px
+    sm: "0.875rem",
+    // 14px
+    base: "1rem",
+    // 16px
+    lg: "1.125rem",
+    // 18px
+    xl: "1.5rem",
+    // 24px
+    "2xl": "2rem",
+    // 32px
+    "3xl": "2.25rem",
+    // 36px
+    "4xl": "3rem",
+    // 48px
+    "5xl": "3.5rem"
+    // 56px
+  },
+  fontWeights: {
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700
+  },
+  lineHeights: {
+    none: 1,
+    tight: 1.375,
+    snug: 1.5,
+    normal: 1.57,
+    relaxed: 1.66,
+    loose: 1.75
+  },
+  letterSpacing: {
+    tighter: "-0.05em",
+    tight: "-0.025em",
+    normal: "0em",
+    wide: "0.025em",
+    wider: "0.05em",
+    widest: "0.5px"
+  }
+};
+var primitiveSpacing = {
+  0: "0",
+  px: "1px",
+  0.5: "0.125rem",
+  // 2px
+  1: "0.25rem",
+  // 4px
+  1.5: "0.375rem",
+  // 6px
+  2: "0.5rem",
+  // 8px
+  2.5: "0.625rem",
+  // 10px
+  3: "0.75rem",
+  // 12px
+  3.5: "0.875rem",
+  // 14px
+  4: "1rem",
+  // 16px
+  5: "1.25rem",
+  // 20px
+  6: "1.5rem",
+  // 24px
+  7: "1.75rem",
+  // 28px
+  8: "2rem",
+  // 32px
+  9: "2.25rem",
+  // 36px
+  10: "2.5rem",
+  // 40px
+  11: "2.75rem",
+  // 44px
+  12: "3rem",
+  // 48px
+  14: "3.5rem",
+  // 56px
+  16: "4rem",
+  // 64px
+  20: "5rem",
+  // 80px
+  24: "6rem",
+  // 96px
+  28: "7rem",
+  // 112px
+  32: "8rem"
+  // 128px
+};
+var primitiveBorderRadius = {
+  none: "0",
+  sm: "4px",
+  DEFAULT: "8px",
+  md: "8px",
+  lg: "12px",
+  xl: "16px",
+  "2xl": "24px",
+  full: "9999px"
+};
+var primitiveBreakpoints = {
+  xs: 0,
+  sm: 600,
+  md: 1e3,
+  lg: 1200,
+  xl: 1920
+};
+var primitiveZIndex = {
+  hide: -1,
+  auto: "auto",
+  base: 0,
+  docked: 10,
+  dropdown: 1e3,
+  sticky: 1100,
+  drawer: 1100,
+  banner: 1200,
+  appBar: 1200,
+  overlay: 1300,
+  modal: 1400,
+  popover: 1500,
+  skipLink: 1600,
+  toast: 1700,
+  tooltip: 1800
+};
+
+// src/theme/tokens/semantic.ts
+var semanticColorsLight = {
+  // Brand colors (brand-*)
+  "brand-primary": primitiveRamps.orange[400],
+  "brand-primary-light": primitiveRamps.orange[300],
+  "brand-primary-dark": primitiveRamps.orange[500],
+  "brand-primary-subtle": "rgba(255, 121, 0, 0.08)",
+  "brand-primary-hover": primitiveRamps.orange[500],
+  "brand-primary-active": primitiveRamps.orange[600],
+  "brand-secondary": primitiveRamps.cyan[600],
+  "brand-secondary-light": primitiveRamps.cyan[500],
+  "brand-secondary-dark": primitiveRamps.cyan[700],
+  "brand-secondary-subtle": "rgba(48, 123, 155, 0.08)",
+  "brand-secondary-hover": primitiveRamps.cyan[700],
+  "brand-secondary-active": primitiveRamps.cyan[800],
+  // Text on brand backgrounds (on-*)
+  "on-brand-primary": primitiveColors.white,
+  "on-brand-secondary": primitiveColors.white,
+  // Status colors (status-*)
+  "status-success": primitiveRamps.green[300],
+  "status-success-light": primitiveRamps.green[200],
+  "status-success-dark": primitiveRamps.green[600],
+  "status-success-subtle": primitiveRamps.green[50],
+  // Live-session accent — its OWN role, decoupled from success so the two can diverge
+  "status-live": primitiveRamps.green[300],
+  "status-live-muted": primitiveRamps.green[500],
+  "status-error": primitiveRamps.red[600],
+  "status-error-light": primitiveRamps.red[500],
+  "status-error-dark": primitiveRamps.red[700],
+  "status-error-subtle": primitiveRamps.red[50],
+  "status-error-vivid": primitiveRamps.red[600],
+  // vivid alert red
+  "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],
+  "status-warning-dark": primitiveRamps.amber[500],
+  "status-warning-subtle": primitiveRamps.amber[50],
+  "status-info": primitiveRamps.blue[500],
+  "status-info-light": primitiveRamps.blue[300],
+  "status-info-dark": primitiveRamps.blue[600],
+  "status-info-subtle": primitiveRamps.blue[50],
+  // Text on status backgrounds (on-status-*)
+  "on-status-success": primitiveColors.white,
+  "on-status-error": primitiveColors.white,
+  "on-status-warning": primitiveColors.white,
+  "on-status-info": primitiveColors.white,
+  // Result/outcome indicators (result-*)
+  "result-improve": "#4caf50",
+  // Green - positive outcome
+  "result-improve-light": "rgba(76, 175, 80, 0.12)",
+  "result-improve-dark": "#248a24",
+  "result-degrade": "#ef5350",
+  // Red - negative outcome
+  "result-degrade-light": "rgba(239, 83, 80, 0.12)",
+  "result-degrade-dark": "#b30000",
+  "result-inconclusive": "#9E9A97",
+  // Gray - no clear result
+  "result-inconclusive-light": "rgba(158, 154, 151, 0.12)",
+  "result-neutral": greyRamp[600],
+  // Neutral baseline
+  // Text on result backgrounds (on-result-*)
+  "on-result-improve": primitiveColors.white,
+  "on-result-degrade": primitiveColors.white,
+  "on-result-inconclusive": primitiveColors.white,
+  // Data visualization colors (data-*)
+  // First 10 colors from discrete rainbow optimized for charts
+  "data-1": discreteRainbow[9],
+  // Blue
+  "data-2": discreteRainbow[14],
+  // Green
+  "data-3": discreteRainbow[17],
+  // Yellow
+  "data-4": discreteRainbow[25],
+  // Red
+  "data-5": discreteRainbow[8],
+  // Purple
+  "data-6": discreteRainbow[20],
+  // Orange
+  "data-7": discreteRainbow[13],
+  // Light Blue
+  "data-8": discreteRainbow[15],
+  // Light Green
+  "data-9": discreteRainbow[3],
+  // Lavender
+  "data-10": discreteRainbow[22],
+  // Dark Orange
+  // Text colors (text-*)
+  "text-primary": "#121828",
+  "text-secondary": "#65748B",
+  "text-tertiary": greyRamp[400],
+  "text-disabled": "rgba(55, 65, 81, 0.48)",
+  "text-inverse": primitiveColors.white,
+  "text-link": primitiveRamps.blue[600],
+  "text-link-hover": primitiveRamps.blue[700],
+  // Surface colors (surface-*) - for elevated containers
+  "surface-base": primitiveColors.white,
+  "surface-elevated": greyRamp[50],
+  // slightly off-white for elevated cards
+  "surface-raised": greyRamp[100],
+  // light gray for raised cards
+  "surface-overlay": primitiveColors.white,
+  "surface-input": greyRamp[50],
+  // Input field background (filled variant)
+  // Background colors (background-*)
+  "background-base": "#EBEBEB",
+  "background-default": primitiveColors.white,
+  "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-prominent": greyRamp[400],
+  // high-visibility divider
+  "border-focus": primitiveRamps.blue[600],
+  "border-input": greyRamp[200],
+  // Input field border
+  "border-input-hover": greyRamp[400],
+  // Input field border on hover
+  "border-input-focus": primitiveRamps.blue[600],
+  // Input field border on focus
+  "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.
+  "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 states (interactive-*)
+  "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
+  "divider": "#E8E9EB",
+  // Avatar default
+  "avatar-background": greyRamp[600],
+  "avatar-text": primitiveColors.white
+};
+var semanticColorsDark = {
+  // Brand colors stay the same in dark mode
+  "brand-primary": primitiveRamps.orange[400],
+  "brand-primary-light": primitiveRamps.orange[300],
+  "brand-primary-dark": primitiveRamps.orange[500],
+  "brand-primary-subtle": "rgba(255, 121, 0, 0.12)",
+  "brand-primary-hover": primitiveRamps.orange[300],
+  "brand-primary-active": primitiveRamps.orange[200],
+  "brand-secondary": primitiveRamps.cyan[600],
+  "brand-secondary-light": primitiveRamps.cyan[500],
+  "brand-secondary-dark": primitiveRamps.cyan[700],
+  "brand-secondary-subtle": "rgba(48, 123, 155, 0.12)",
+  "brand-secondary-hover": primitiveRamps.cyan[500],
+  "brand-secondary-active": primitiveRamps.cyan[400],
+  // Text on brand backgrounds
+  "on-brand-primary": primitiveColors.white,
+  "on-brand-secondary": primitiveColors.white,
+  // Status colors
+  "status-success": primitiveRamps.green[300],
+  "status-success-light": primitiveRamps.green[200],
+  "status-success-dark": primitiveRamps.green[600],
+  "status-success-subtle": "rgba(46, 213, 115, 0.12)",
+  // Live-session accent — its OWN role, decoupled from success so the two can diverge
+  "status-live": primitiveRamps.green[300],
+  "status-live-muted": primitiveRamps.green[500],
+  "status-error": primitiveRamps.red[600],
+  "status-error-light": primitiveRamps.red[500],
+  "status-error-dark": primitiveRamps.red[700],
+  "status-error-subtle": "rgba(209, 67, 67, 0.12)",
+  "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],
+  "status-warning-dark": primitiveRamps.amber[500],
+  "status-warning-subtle": "rgba(249, 180, 21, 0.12)",
+  "status-info": primitiveRamps.blue[500],
+  "status-info-light": primitiveRamps.blue[300],
+  "status-info-dark": primitiveRamps.blue[600],
+  "status-info-subtle": "rgba(33, 150, 243, 0.12)",
+  // Text on status backgrounds
+  "on-status-success": primitiveColors.white,
+  "on-status-error": primitiveColors.white,
+  "on-status-warning": primitiveColors.white,
+  "on-status-info": primitiveColors.white,
+  // Result/outcome indicators (result-*)
+  "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": greyRamp[400],
+  // Text on result backgrounds
+  "on-result-improve": primitiveColors.white,
+  "on-result-degrade": primitiveColors.white,
+  "on-result-inconclusive": primitiveColors.white,
+  // Data visualization colors (same in dark mode for consistency)
+  "data-1": discreteRainbow[9],
+  "data-2": discreteRainbow[14],
+  "data-3": discreteRainbow[17],
+  "data-4": discreteRainbow[25],
+  "data-5": discreteRainbow[8],
+  "data-6": discreteRainbow[20],
+  "data-7": discreteRainbow[13],
+  "data-8": discreteRainbow[15],
+  "data-9": discreteRainbow[3],
+  "data-10": discreteRainbow[22],
+  // Text colors - inverted for dark mode
+  "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": greyRamp[950],
+  "text-link": "#828DF8",
+  "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 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": 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": greyRamp[700],
+  "border-input-hover": greyRamp[600],
+  "border-input-focus": "#828DF8",
+  "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).
+  //
+  // 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)",
+  "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
+  "divider": "rgba(255, 255, 255, 0.09)",
+  // Avatar default
+  "avatar-background": greyRamp[700],
+  "avatar-text": primitiveColors.white
+};
+var semanticTypography = {
+  // Headings (Space Grotesk)
+  h1: {
+    fontFamily: "heading",
+    fontSize: "3.5rem",
+    fontWeight: 700,
+    lineHeight: 1.375
+  },
+  h2: {
+    fontFamily: "heading",
+    fontSize: "3rem",
+    fontWeight: 700,
+    lineHeight: 1.375
+  },
+  h3: {
+    fontFamily: "heading",
+    fontSize: "2.25rem",
+    fontWeight: 700,
+    lineHeight: 1.375
+  },
+  h4: {
+    fontFamily: "heading",
+    fontSize: "2rem",
+    fontWeight: 700,
+    lineHeight: 1.375
+  },
+  h5: {
+    fontFamily: "heading",
+    fontSize: "1.5rem",
+    fontWeight: 600,
+    lineHeight: 1.375
+  },
+  h6: {
+    fontFamily: "heading",
+    fontSize: "1.125rem",
+    fontWeight: 600,
+    lineHeight: 1.375
+  },
+  // Body text (Nunito Sans)
+  body1: {
+    fontFamily: "body",
+    fontSize: "1rem",
+    fontWeight: 400,
+    lineHeight: 1.5
+  },
+  body2: {
+    fontFamily: "body",
+    fontSize: "0.875rem",
+    fontWeight: 400,
+    lineHeight: 1.57
+  },
+  subtitle1: {
+    fontFamily: "body",
+    fontSize: "1rem",
+    fontWeight: 500,
+    lineHeight: 1.75
+  },
+  subtitle2: {
+    fontFamily: "body",
+    fontSize: "0.875rem",
+    fontWeight: 500,
+    lineHeight: 1.57
+  },
+  caption: {
+    fontFamily: "body",
+    fontSize: "0.75rem",
+    fontWeight: 400,
+    lineHeight: 1.66
+  },
+  overline: {
+    fontFamily: "body",
+    fontSize: "0.75rem",
+    fontWeight: 600,
+    lineHeight: 2.5,
+    letterSpacing: "0.5px",
+    textTransform: "uppercase"
+  },
+  button: {
+    fontFamily: "sans",
+    fontSize: "0.875rem",
+    fontWeight: 600,
+    lineHeight: 1.75
+  }
+};
+var buttonSizes = {
+  sm: {
+    paddingX: "16px",
+    paddingY: "6px",
+    fontSize: "0.875rem"
+  },
+  md: {
+    paddingX: "20px",
+    paddingY: "8px",
+    fontSize: "0.875rem"
+  },
+  lg: {
+    paddingX: "24px",
+    paddingY: "11px",
+    fontSize: "1rem"
+  }
+};
+function getSemanticColors(mode) {
+  return mode === "dark" ? semanticColorsDark : semanticColorsLight;
+}
+
+exports.CATEGORICAL_CVD_SAFE_MAX = CATEGORICAL_CVD_SAFE_MAX;
+exports.SURFACE_PLANE_STEPS = SURFACE_PLANE_STEPS;
+exports.bestTextColor = bestTextColor;
+exports.buttonSizes = buttonSizes;
+exports.categoricalPalette = categoricalPalette;
+exports.discreteRainbow = discreteRainbow;
+exports.divergingScale = divergingScale;
+exports.getCategoricalColor = getCategoricalColor;
+exports.getDiscreteRainbowColor = getDiscreteRainbowColor;
+exports.getSemanticColors = getSemanticColors;
+exports.greyRamp = greyRamp;
+exports.primitiveBorderRadius = primitiveBorderRadius;
+exports.primitiveBreakpoints = primitiveBreakpoints;
+exports.primitiveColors = primitiveColors;
+exports.primitiveRamps = primitiveRamps;
+exports.primitiveSpacing = primitiveSpacing;
+exports.primitiveTypography = primitiveTypography;
+exports.primitiveZIndex = primitiveZIndex;
+exports.semanticColorsDark = semanticColorsDark;
+exports.semanticColorsLight = semanticColorsLight;
+exports.semanticTypography = semanticTypography;
+exports.sequentialEffort = sequentialEffort;
+//# sourceMappingURL=tokens.js.map
+//# sourceMappingURL=tokens.js.map