@titan-design/react-ui 0.13.0 → 0.14.0

package/README.md

@@ -319,6 +319,20 @@ pnpm test:coverage
 pnpm build
 ```
 
+### Guardrails
+
+- `pnpm lint` enforces that every Storybook story's `title` starts with an approved
+  top-level group (`Foundations`, `Components`, `Custom`, `Shell`, `Pages`, `Lab`,
+  `Docs` — see `eslint-rules/story-title-prefix.js`), so a new story can't invent an
+  unlisted sidebar root.
+- `pnpm test` runs `src/arch/arch-graph.freshness.test.ts`, which fails CI when
+  `src/arch/arch-graph.json`'s recorded component-barrel hash no longer matches the
+  current barrels — i.e. when `pnpm arch:graph` needs to be re-run and committed.
+  Full regeneration doesn't run in CI itself: it needs the `@codewatch/cli` CLI
+  (unpublished, see AW-118) and sibling checkouts of every consumer in
+  `scripts/arch.config.json`, neither of which a CI runner has; running it there
+  would silently score every consumer as zero usage instead of failing loudly.
+
 ## Storybook Configuration
 
 This package uses Storybook 10 with `@storybook/react-native-web-vite` for proper NativeWind support. Key configuration:

package/dist/bodymap.js

@@ -18,8 +18,29 @@ function cn(...inputs) {
 
 // src/theme/tokens/primitives.ts
 var primitiveColors = {
-  white: "#FFFFFF"};
+  white: "#FFFFFF",
+  black: "#000000"};
 var alertRedVivid = "#FF4757";
+var resultPaletteColors = {
+  improve: "#4caf50",
+  improveDark: "#248a24",
+  degrade: "#ef5350",
+  degradeDark: "#b30000",
+  inconclusive: "#9E9A97"
+};
+var semanticPins = {
+  // Cool navy-black; darker and more blue-shifted than any warm greyRamp step.
+  textPrimaryLight: "#121828",
+  // Cool blue-grey; outside greyRamp's warm (R>=G>=B) scale.
+  textSecondaryLight: "#65748B",
+  // Pure neutral grey (R=G=B); no warm greyRamp step lands on it exactly.
+  backgroundBaseLight: "#EBEBEB",
+  // Near-neutral grey, kept one step off backgroundBaseLight by design.
+  dividerLight: "#E8E9EB",
+  // Periwinkle/indigo; more purple than any primitiveRamps.blue step. Shared by
+  // dark-mode text-link, border-focus and border-input-focus.
+  focusIndigoDark: "#828DF8"
+};
 var greyRamp = {
   50: "#F9F6F3",
   //  L*97.0  W6
@@ -53,6 +74,7 @@ var greyRamp = {
 var primitiveRamps = {
   red: {
     50: "#FFF4F4",
+    400: "#F77175",
     500: "#E05254",
     600: "#D14343",
     // pin
@@ -157,6 +179,12 @@ var semanticColorsLight = {
   // Text on brand backgrounds (on-*)
   "on-brand-primary": primitiveColors.white,
   "on-brand-secondary": primitiveColors.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": primitiveRamps.orange[400],
+  "on-brand-secondary-subtle": primitiveRamps.cyan[600],
   // Status colors (status-*)
   "status-success": primitiveRamps.green[300],
   "status-success-light": primitiveRamps.green[200],
@@ -192,21 +220,26 @@ var semanticColorsLight = {
   "status-info-subtle": primitiveRamps.blue[50],
   "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": primitiveRamps.green[300],
+  "on-status-error-subtle": primitiveRamps.red[600],
+  "on-status-warning-subtle": primitiveRamps.amber[300],
+  "on-status-info-subtle": primitiveRamps.blue[500],
   // 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",
+  "result-improve": resultPaletteColors.improve,
   // Green - positive outcome
   "result-improve-light": "rgba(76, 175, 80, 0.12)",
-  "result-improve-dark": "#248a24",
-  "result-degrade": "#ef5350",
+  "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",
+  "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],
@@ -238,8 +271,8 @@ var 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": primitiveColors.white,
@@ -255,7 +288,7 @@ var semanticColorsLight = {
   "surface-input": greyRamp[50],
   // Input field background (filled variant)
   // Background colors (background-*)
-  "background-base": "#EBEBEB",
+  "background-base": semanticPins.backgroundBaseLight,
   "background-default": primitiveColors.white,
   "background-subtle": greyRamp[50],
   // Frame/bezel chrome — top bar + side nav shell, one step below
@@ -286,7 +319,7 @@ var semanticColorsLight = {
   "interactive-disabled": "rgba(55, 65, 81, 0.12)",
   "interactive-disabled-text": "rgba(55, 65, 81, 0.26)",
   // Divider
-  divider: "#E8E9EB",
+  divider: semanticPins.dividerLight,
   // Avatar default
   "avatar-background": greyRamp[600],
   "avatar-text": primitiveColors.white
@@ -304,7 +337,7 @@ var semanticColorsDark = {
   "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-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": primitiveRamps.cyan[500],
@@ -312,6 +345,14 @@ var semanticColorsDark = {
   // Text on brand backgrounds
   "on-brand-primary": primitiveColors.white,
   "on-brand-secondary": primitiveColors.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": primitiveRamps.orange[400],
+  "on-brand-secondary-subtle": primitiveRamps.cyan[300],
   // Status colors
   "status-success": primitiveRamps.green[300],
   "status-success-light": primitiveRamps.green[200],
@@ -325,7 +366,10 @@ var semanticColorsDark = {
   "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)",
+  // 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)",
   "status-error-vivid": alertRedVivid,
@@ -343,7 +387,7 @@ var semanticColorsDark = {
   "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)",
+  "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)",
   // Text on status backgrounds
@@ -351,14 +395,22 @@ var semanticColorsDark = {
   "on-status-error": primitiveColors.white,
   "on-status-warning": primitiveColors.white,
   "on-status-info": primitiveColors.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": primitiveRamps.green[300],
+  "on-status-error-subtle": primitiveRamps.red[400],
+  "on-status-warning-subtle": primitiveRamps.amber[300],
+  "on-status-info-subtle": primitiveRamps.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],
   // Text on result backgrounds
@@ -389,7 +441,7 @@ var 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": 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
@@ -439,10 +491,10 @@ var semanticColorsDark = {
   // 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": 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
@@ -517,6 +569,38 @@ function hexToRgb(hex) {
   return { r, g, b };
 }
 
+// src/utils/colors.ts
+function alpha(color, opacity) {
+  const clampedOpacity = Math.max(0, Math.min(1, opacity));
+  if (color.startsWith("#")) {
+    const hex = color.slice(1);
+    let r, g, b;
+    if (hex.length === 3) {
+      r = parseInt(hex[0] + hex[0], 16);
+      g = parseInt(hex[1] + hex[1], 16);
+      b = parseInt(hex[2] + hex[2], 16);
+    } else if (hex.length === 6) {
+      r = parseInt(hex.slice(0, 2), 16);
+      g = parseInt(hex.slice(2, 4), 16);
+      b = parseInt(hex.slice(4, 6), 16);
+    } else {
+      return color;
+    }
+    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
+  }
+  const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+  if (rgbMatch) {
+    const [, r, g, b] = rgbMatch;
+    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
+  }
+  const rgbaMatch = color.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/);
+  if (rgbaMatch) {
+    const [, r, g, b] = rgbaMatch;
+    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
+  }
+  return color;
+}
+
 // src/theme/materials.ts
 var c = getSemanticColors("dark");
 function insetWell(tone = c["surface-input"]) {
@@ -867,8 +951,8 @@ var jsxs = wrapJsx(jsxRuntime.jsxs);
 // src/components/custom/Workout/BodyMap.tsx
 var Body = BodyHighlighter__default.default.default ?? BodyHighlighter__default.default;
 var BRAND_PRIMARY = getSemanticColors("dark")["brand-primary"];
-var OUTLINE_FILL = "rgba(255,255,255,0.08)";
-var OUTLINE_BORDER = "rgba(255,255,255,0.12)";
+var OUTLINE_FILL = alpha(primitiveColors.white, 0.08);
+var OUTLINE_BORDER = alpha(primitiveColors.white, 0.12);
 var BODY_SCALE = 0.8;
 function buildSlugParts(data) {
   const bySlug = /* @__PURE__ */ new Map();
@@ -1044,7 +1128,7 @@ function ViewToggle({ view, onViewChange }) {
               paddingHorizontal: 12,
               paddingVertical: 4,
               borderRadius: 9999,
-              backgroundColor: active ? "rgba(255,121,0,0.16)" : "transparent",
+              backgroundColor: active ? alpha(BRAND_PRIMARY, 0.16) : "transparent",
               borderWidth: 1,
               borderColor: active ? BRAND_PRIMARY : resolveColor("hairline-strong")
             },
@@ -1222,13 +1306,16 @@ var toneStyles = {
     // host is, and an alpha fill composites by the same amount on all of them.
     // A `surface-*` fill would vanish on the plane it names. Borderless like the
     // six coloured tones — the fill carries the capsule, not a ring.
+    // Label comes from `on-*-subtle`, not the base tone token: the base is tuned to
+    // carry a white label as a solid fill, which left error and accent unreadable
+    // here (AW-133). The on-subtle tokens level the family at one weight.
     neutral: "bg-hairline-subtle border-transparent text-text-secondary",
-    brand: "bg-brand-primary-subtle border-transparent text-brand-primary",
-    "brand-secondary": "bg-brand-secondary-subtle border-transparent text-brand-secondary",
-    success: "bg-status-success-subtle border-transparent text-status-success",
-    warning: "bg-status-warning-subtle border-transparent text-status-warning",
-    error: "bg-status-error-subtle border-transparent text-status-error",
-    info: "bg-status-info-subtle border-transparent text-status-info"
+    brand: "bg-brand-primary-subtle border-transparent text-on-brand-primary-subtle",
+    "brand-secondary": "bg-brand-secondary-subtle border-transparent text-on-brand-secondary-subtle",
+    success: "bg-status-success-subtle border-transparent text-on-status-success-subtle",
+    warning: "bg-status-warning-subtle border-transparent text-on-status-warning-subtle",
+    error: "bg-status-error-subtle border-transparent text-on-status-error-subtle",
+    info: "bg-status-info-subtle border-transparent text-on-status-info-subtle"
   },
   outline: {
     neutral: "border-hairline text-text-secondary",
@@ -1713,7 +1800,7 @@ function BodyMapDetailPanel({
               left: 0,
               right: 0,
               bottom: 0,
-              backgroundColor: "#000000",
+              backgroundColor: primitiveColors.black,
               opacity: backdrop
             },
             testID: "body-map-detail-panel-backdrop-anim",
@@ -2054,9 +2141,9 @@ function BodyMapDetailPanel({
                           paddingVertical: 10,
                           borderRadius: 8,
                           alignItems: "center",
-                          backgroundColor: "rgba(255,121,0,0.12)",
+                          backgroundColor: alpha(BRAND_PRIMARY2, 0.12),
                           borderWidth: 1,
-                          borderColor: "rgba(255,121,0,0.3)"
+                          borderColor: alpha(BRAND_PRIMARY2, 0.3)
                         },
                         testID: "body-map-detail-panel-view-exercises",
                         children: /* @__PURE__ */ jsx(
@@ -2255,40 +2342,6 @@ function SkeletonBody({ hasHeader, hasFooter, contentLines }) {
     hasFooter && /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx(reactNative.View, { className: "h-9 w-24 bg-interactive-disabled rounded" }) })
   ] });
 }
-
-// src/utils/colors.ts
-function alpha(color, opacity) {
-  const clampedOpacity = Math.max(0, Math.min(1, opacity));
-  if (color.startsWith("#")) {
-    const hex = color.slice(1);
-    let r, g, b;
-    if (hex.length === 3) {
-      r = parseInt(hex[0] + hex[0], 16);
-      g = parseInt(hex[1] + hex[1], 16);
-      b = parseInt(hex[2] + hex[2], 16);
-    } else if (hex.length === 6) {
-      r = parseInt(hex.slice(0, 2), 16);
-      g = parseInt(hex.slice(2, 4), 16);
-      b = parseInt(hex.slice(4, 6), 16);
-    } else {
-      return color;
-    }
-    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
-  }
-  const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
-  if (rgbMatch) {
-    const [, r, g, b] = rgbMatch;
-    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
-  }
-  const rgbaMatch = color.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/);
-  if (rgbaMatch) {
-    const [, r, g, b] = rgbaMatch;
-    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
-  }
-  return color;
-}
-
-// src/components/custom/Workout/StatusDot.tsx
 var solidFillToken = {
   success: "status-success",
   warning: "status-warning",
@@ -2439,11 +2492,11 @@ var WARNING = t3["status-warning"];
 var ERROR = t3["status-error"];
 var ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY3, BRAND_PRIMARY_LIGHT];
 var CARD_GRADIENT = `linear-gradient(135deg, ${resolveColor("surface-elevated")} 0%, ${resolveColor("surface-raised")} 100%)`;
-var GAUGE_GRADIENT = "linear-gradient(90deg, rgba(46,213,115,0.25) 0%, rgba(249,180,21,0.25) 50%, rgba(209,67,67,0.25) 100%)";
+var GAUGE_GRADIENT = `linear-gradient(90deg, ${alpha(SUCCESS, 0.25)} 0%, ${alpha(WARNING, 0.25)} 50%, ${alpha(ERROR, 0.25)} 100%)`;
 var STATUS_VARIANTS = {
-  success: { bg: "rgba(46,213,115,0.15)", border: "rgba(46,213,115,0.3)", text: SUCCESS },
-  warning: { bg: "rgba(249,180,21,0.15)", border: "rgba(249,180,21,0.3)", text: WARNING },
-  error: { bg: "rgba(209,67,67,0.15)", border: "rgba(209,67,67,0.25)", text: ERROR }
+  success: { bg: alpha(SUCCESS, 0.15), border: alpha(SUCCESS, 0.3), text: SUCCESS },
+  warning: { bg: alpha(WARNING, 0.15), border: alpha(WARNING, 0.3), text: WARNING },
+  error: { bg: alpha(ERROR, 0.15), border: alpha(ERROR, 0.25), text: ERROR }
 };
 function clamp012(value) {
   if (!Number.isFinite(value)) return 0;
@@ -2596,7 +2649,7 @@ function Gauge({ gauge }) {
                     bottom: 0,
                     width: 1,
                     marginLeft: -0.5,
-                    backgroundColor: "rgba(255,255,255,0.3)"
+                    backgroundColor: alpha(primitiveColors.white, 0.3)
                   },
                   testID: "meso-status-card-gauge-center"
                 }
@@ -2705,9 +2758,9 @@ function MesoStatusCard({
             reactNative.View,
             {
               style: {
-                backgroundColor: "rgba(249,180,21,0.06)",
+                backgroundColor: alpha(WARNING, 0.06),
                 borderWidth: 1,
-                borderColor: "rgba(249,180,21,0.15)",
+                borderColor: alpha(WARNING, 0.15),
                 borderRadius: 8,
                 paddingVertical: 10,
                 paddingHorizontal: 12
@@ -2733,9 +2786,9 @@ function MesoStatusCard({
               className: "flex-row items-center",
               style: {
                 gap: 8,
-                backgroundColor: "rgba(46,213,115,0.06)",
+                backgroundColor: alpha(SUCCESS, 0.06),
                 borderWidth: 1,
-                borderColor: "rgba(46,213,115,0.2)",
+                borderColor: alpha(SUCCESS, 0.2),
                 borderRadius: 8,
                 paddingVertical: 10,
                 paddingHorizontal: 12