@titan-design/react-ui 0.3.0 → 0.4.0

package/dist/bodymap.js

@@ -16,6 +16,382 @@ function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
 
+// src/theme/tokens/primitives.ts
+var primitiveColors = {
+  // Blue scale (primary brand)
+  blue: {
+    400: "#60A5FA",
+    600: "#5048E5",
+    // Primary main
+    700: "#3832A0"},
+  // Teal scale (success)
+  teal: {
+    50: "#F0FDFA",
+    400: "#43C6B7",
+    // Success light
+    500: "#14B8A6",
+    700: "#0E8074"},
+  // Red scale (error)
+  red: {
+    50: "#FEF2F2",
+    400: "#DA6868",
+    // Error light
+    500: "#EF4444",
+    600: "#D14343",
+    // Error main
+    700: "#922E2E"},
+  // Amber scale (warning)
+  amber: {
+    50: "#FFFBEB",
+    400: "#FFBF4C",
+    // Warning light
+    500: "#FFB020",
+    // Warning main
+    600: "#B27B16"},
+  // Sky/Blue scale (info)
+  sky: {
+    50: "#F0F9FF",
+    400: "#64B6F7",
+    // Info light
+    500: "#2196F3",
+    700: "#0B79D0"},
+  // Neutral/Gray scale
+  neutral: {
+    50: "#FAFAFA",
+    100: "#F3F4F6",
+    300: "#D1D5DB",
+    400: "#9CA3AF",
+    500: "#6B7280",
+    600: "#4B5563",
+    900: "#111827"},
+  // Orange scale (accent/brand color)
+  accent: {
+    200: "#FF9630",
+    300: "#FF8500",
+    400: "#FF7900",
+    500: "#F56C00",
+    600: "#E06D10",
+    700: "#D0620C"},
+  // Charcoal scale (dark backgrounds)
+  charcoal: {
+    300: "#2C2C2C",
+    400: "#1F1F1F",
+    500: "#1C1C1C",
+    600: "#191919",
+    700: "#161616",
+    900: "#101010"
+  },
+  // Steel scale (cool accent)
+  steel: {
+    300: "#678498",
+    400: "#557488",
+    500: "#406D87",
+    600: "#39617A",
+    700: "#32556D"},
+  // Pure colors
+  white: "#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"
+];
+
+// src/theme/tokens/semantic.ts
+var semanticColorsLight = {
+  // Brand colors (brand-*)
+  "brand-primary": primitiveColors.accent[400],
+  // #FF7900
+  "brand-primary-light": primitiveColors.accent[200],
+  // #FF9630
+  "brand-primary-dark": primitiveColors.accent[700],
+  // #D0620C
+  "brand-primary-subtle": "rgba(255, 121, 0, 0.08)",
+  "brand-primary-hover": primitiveColors.accent[500],
+  "brand-primary-active": primitiveColors.accent[600],
+  "brand-secondary": primitiveColors.steel[500],
+  // #406D87
+  "brand-secondary-light": primitiveColors.steel[300],
+  // #678498
+  "brand-secondary-dark": primitiveColors.steel[700],
+  // #32556D
+  "brand-secondary-subtle": "rgba(64, 109, 135, 0.08)",
+  "brand-secondary-hover": primitiveColors.steel[600],
+  "brand-secondary-active": primitiveColors.steel[700],
+  // Text on brand backgrounds (on-*)
+  "on-brand-primary": primitiveColors.white,
+  "on-brand-secondary": primitiveColors.white,
+  // Status colors (status-*)
+  "status-success": primitiveColors.teal[500],
+  // #14B8A6
+  "status-success-light": primitiveColors.teal[400],
+  // #43C6B7
+  "status-success-dark": primitiveColors.teal[700],
+  // #0E8074
+  "status-success-subtle": primitiveColors.teal[50],
+  "status-error": primitiveColors.red[600],
+  // #D14343
+  "status-error-light": primitiveColors.red[400],
+  // #DA6868
+  "status-error-dark": primitiveColors.red[700],
+  // #922E2E
+  "status-error-subtle": primitiveColors.red[50],
+  "status-warning": primitiveColors.amber[500],
+  // #FFB020
+  "status-warning-light": primitiveColors.amber[400],
+  // #FFBF4C
+  "status-warning-dark": primitiveColors.amber[600],
+  // #B27B16
+  "status-warning-subtle": primitiveColors.amber[50],
+  "status-info": primitiveColors.sky[500],
+  // #2196F3
+  "status-info-light": primitiveColors.sky[400],
+  // #64B6F7
+  "status-info-dark": primitiveColors.sky[700],
+  // #0B79D0
+  "status-info-subtle": primitiveColors.sky[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": primitiveColors.neutral[500],
+  // 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],
+  // #1965B0 - Blue
+  "data-2": discreteRainbow[14],
+  // #4EB265 - Green
+  "data-3": discreteRainbow[17],
+  // #F7F056 - Yellow
+  "data-4": discreteRainbow[25],
+  // #DC050C - Red
+  "data-5": discreteRainbow[8],
+  // #882E72 - Purple
+  "data-6": discreteRainbow[20],
+  // #F4A736 - Orange
+  "data-7": discreteRainbow[13],
+  // #7BAFDE - Light Blue
+  "data-8": discreteRainbow[15],
+  // #90C987 - Light Green
+  "data-9": discreteRainbow[3],
+  // #CAACCB - Lavender
+  "data-10": discreteRainbow[22],
+  // #EE8026 - Dark Orange
+  // Text colors (text-*)
+  "text-primary": "#121828",
+  "text-secondary": "#65748B",
+  "text-tertiary": primitiveColors.neutral[400],
+  "text-disabled": "rgba(55, 65, 81, 0.48)",
+  "text-inverse": primitiveColors.white,
+  "text-link": primitiveColors.blue[600],
+  "text-link-hover": primitiveColors.blue[700],
+  // Surface colors (surface-*) - for elevated containers
+  "surface-base": primitiveColors.white,
+  "surface-elevated": primitiveColors.neutral[50],
+  // #FAFAFA - slightly off-white for elevated cards
+  "surface-raised": primitiveColors.neutral[100],
+  // #F3F4F6 - light gray for raised cards
+  "surface-overlay": primitiveColors.white,
+  "surface-input": primitiveColors.neutral[50],
+  // Input field background (filled variant)
+  // Background colors (background-*)
+  "background-base": "#EBEBEB",
+  "background-default": primitiveColors.white,
+  "background-subtle": primitiveColors.neutral[50],
+  // Border colors (border-*)
+  "border-default": "#E8E9EB",
+  "border-subtle": primitiveColors.neutral[100],
+  "border-strong": primitiveColors.neutral[300],
+  "border-focus": primitiveColors.blue[600],
+  "border-input": primitiveColors.neutral[300],
+  // Input field border
+  "border-input-hover": primitiveColors.neutral[400],
+  // Input field border on hover
+  "border-input-focus": primitiveColors.blue[600],
+  // Input field border on focus
+  "border-input-error": primitiveColors.red[600],
+  // Input field border on error
+  // 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": primitiveColors.neutral[500],
+  "avatar-text": primitiveColors.white
+};
+var semanticColorsDark = {
+  // Brand colors stay the same in dark mode
+  "brand-primary": primitiveColors.accent[400],
+  "brand-primary-light": primitiveColors.accent[200],
+  "brand-primary-dark": primitiveColors.accent[700],
+  "brand-primary-subtle": "rgba(255, 121, 0, 0.12)",
+  "brand-primary-hover": primitiveColors.accent[300],
+  "brand-primary-active": primitiveColors.accent[200],
+  "brand-secondary": primitiveColors.steel[500],
+  "brand-secondary-light": primitiveColors.steel[300],
+  "brand-secondary-dark": primitiveColors.steel[700],
+  "brand-secondary-subtle": "rgba(64, 109, 135, 0.12)",
+  "brand-secondary-hover": primitiveColors.steel[400],
+  "brand-secondary-active": primitiveColors.steel[300],
+  // Text on brand backgrounds
+  "on-brand-primary": primitiveColors.white,
+  "on-brand-secondary": primitiveColors.white,
+  // Status colors
+  "status-success": primitiveColors.teal[500],
+  "status-success-light": primitiveColors.teal[400],
+  "status-success-dark": primitiveColors.teal[700],
+  "status-success-subtle": "rgba(20, 184, 166, 0.12)",
+  "status-error": primitiveColors.red[600],
+  "status-error-light": primitiveColors.red[400],
+  "status-error-dark": primitiveColors.red[700],
+  "status-error-subtle": "rgba(209, 67, 67, 0.12)",
+  "status-warning": primitiveColors.amber[500],
+  "status-warning-light": primitiveColors.amber[400],
+  "status-warning-dark": primitiveColors.amber[600],
+  "status-warning-subtle": "rgba(255, 176, 32, 0.12)",
+  "status-info": primitiveColors.sky[500],
+  "status-info-light": primitiveColors.sky[400],
+  "status-info-dark": primitiveColors.sky[700],
+  "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": primitiveColors.neutral[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": primitiveColors.neutral[100],
+  "text-secondary": primitiveColors.neutral[400],
+  "text-tertiary": primitiveColors.neutral[500],
+  "text-disabled": "rgba(255, 255, 255, 0.38)",
+  "text-inverse": primitiveColors.neutral[900],
+  "text-link": "#828DF8",
+  "text-link-hover": primitiveColors.blue[400],
+  // Surface colors - dark backgrounds
+  "surface-base": primitiveColors.charcoal[700],
+  // #161616 - main surface
+  "surface-elevated": primitiveColors.charcoal[600],
+  // #191919 - elevated surface
+  "surface-raised": primitiveColors.charcoal[500],
+  // #1C1C1C - raised surface
+  "surface-overlay": primitiveColors.charcoal[600],
+  // #191919 - overlay surface
+  "surface-input": primitiveColors.charcoal[600],
+  // #191919 - input surface
+  // Background colors
+  "background-base": primitiveColors.charcoal[900],
+  // #101010 - darkest charcoal
+  "background-default": primitiveColors.charcoal[700],
+  // #161616 - main background
+  "background-subtle": primitiveColors.charcoal[500],
+  // #1C1C1C - subtle background
+  // Border colors
+  "border-default": primitiveColors.charcoal[400],
+  // #1F1F1F - default border
+  "border-subtle": primitiveColors.charcoal[500],
+  // #1C1C1C - subtle border
+  "border-strong": primitiveColors.charcoal[300],
+  // #2C2C2C - strong border
+  "border-focus": "#828DF8",
+  "border-input": primitiveColors.neutral[600],
+  "border-input-hover": primitiveColors.neutral[500],
+  "border-input-focus": "#828DF8",
+  "border-input-error": primitiveColors.red[500],
+  // 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": primitiveColors.charcoal[400],
+  // #1F1F1F - divider color
+  // Avatar default
+  "avatar-background": primitiveColors.neutral[600],
+  "avatar-text": primitiveColors.white
+};
+function getSemanticColors(mode) {
+  return mode === "dark" ? semanticColorsDark : semanticColorsLight;
+}
+
+// src/theme/resolve-color.ts
+function resolveColor(token, mode = "dark") {
+  return reactNative.Platform.OS === "web" ? `var(--color-${token})` : getSemanticColors(mode)[token];
+}
+
 // src/theme/workout-tokens.ts
 var WORKOUT_TOKENS = {
   // BodyMap volume heatmap scale (drive dynamic SVG fills, so inline values).
@@ -241,8 +617,6 @@ var Body = BodyHighlighter__default.default.default ?? BodyHighlighter__default.
 var OUTLINE_FILL = "rgba(255,255,255,0.08)";
 var OUTLINE_BORDER = "rgba(255,255,255,0.12)";
 var BODY_SCALE = 0.8;
-var TEXT_PRIMARY = "var(--color-text-primary)";
-var TEXT_SECONDARY = "var(--color-text-secondary)";
 function buildSlugParts(data) {
   const bySlug = /* @__PURE__ */ new Map();
   for (const d of data) {
@@ -366,10 +740,10 @@ function BodyMap({
     legend.length === 0 ? /* @__PURE__ */ jsx(
       reactNative.Text,
       {
+        className: "text-text-secondary",
         style: {
           marginTop: 8,
           fontSize: 12,
-          color: TEXT_SECONDARY,
           textAlign: "center",
           fontFamily: "Inter, sans-serif"
         },
@@ -418,7 +792,7 @@ function ViewToggle({ view, onViewChange }) {
               borderRadius: 9999,
               backgroundColor: active ? "rgba(255,121,0,0.16)" : "transparent",
               borderWidth: 1,
-              borderColor: active ? "#FF7900" : "var(--color-border-strong)"
+              borderColor: active ? "#FF7900" : resolveColor("border-strong")
             },
             testID: `body-map-toggle-${side}`,
             children: /* @__PURE__ */ jsx(
@@ -428,7 +802,7 @@ function ViewToggle({ view, onViewChange }) {
                   fontSize: 12,
                   fontFamily: "Inter, sans-serif",
                   fontWeight: active ? "700" : "500",
-                  color: active ? "#FF7900" : TEXT_SECONDARY,
+                  color: active ? "#FF7900" : resolveColor("text-secondary"),
                   textTransform: "capitalize"
                 },
                 children: side
@@ -451,6 +825,7 @@ function MuscleButton({ entry, highlighted, onMusclePress }) {
       accessibilityRole: "button",
       accessibilityLabel: label,
       "aria-pressed": highlighted,
+      className: "bg-surface-raised",
       style: {
         flexDirection: "row",
         alignItems: "center",
@@ -459,8 +834,7 @@ function MuscleButton({ entry, highlighted, onMusclePress }) {
         paddingVertical: 3,
         borderRadius: 9999,
         borderWidth: 1,
-        borderColor: highlighted ? "#FF7900" : "var(--color-border-default)",
-        backgroundColor: "var(--color-surface-raised)"
+        borderColor: highlighted ? "#FF7900" : resolveColor("border-default")
       },
       testID: `body-map-muscle-${entry.key}`,
       children: [
@@ -475,11 +849,11 @@ function MuscleButton({ entry, highlighted, onMusclePress }) {
         /* @__PURE__ */ jsx(
           reactNative.Text,
           {
+            className: "text-text-primary",
             style: {
               fontSize: 11,
               fontFamily: "Inter, sans-serif",
-              fontWeight: "500",
-              color: TEXT_PRIMARY
+              fontWeight: "500"
             },
             accessibilityElementsHidden: true,
             children: entry.name
@@ -761,14 +1135,7 @@ function Sparkline({
 }
 
 // src/components/custom/Workout/BodyMapDetailPanel.tsx
-var SURFACE_ELEVATED = "var(--color-surface-elevated)";
-var SURFACE_RAISED = "var(--color-surface-raised)";
-var BORDER_STRONG = "var(--color-border-strong)";
-var BORDER_DEFAULT = "var(--color-border-default)";
 var BRAND_PRIMARY2 = "#FF7900";
-var TEXT_PRIMARY2 = "var(--color-text-primary)";
-var TEXT_SECONDARY2 = "var(--color-text-secondary)";
-var TEXT_TERTIARY = "var(--color-text-tertiary)";
 var VOLUME_GRADIENT = "linear-gradient(90deg, #2196F3 0%, #14B8A6 50%, #D14343 100%)";
 var SLIDE_OFFSET = 400;
 var BACKDROP_OPACITY = 0.4;
@@ -868,8 +1235,8 @@ function BodyMapDetailPanel({
             accessibilityRole: "dialog",
             accessibilityLabel: dialogLabel,
             "aria-label": dialogLabel,
+            className: "bg-surface-elevated",
             style: {
-              backgroundColor: SURFACE_ELEVATED,
               borderTopLeftRadius: 16,
               borderTopRightRadius: 16,
               maxHeight: "88%",
@@ -890,7 +1257,8 @@ function BodyMapDetailPanel({
                   children: /* @__PURE__ */ jsx(
                     reactNative.View,
                     {
-                      style: { width: 40, height: 4, borderRadius: 2, backgroundColor: BORDER_STRONG },
+                      className: "bg-border-strong",
+                      style: { width: 40, height: 4, borderRadius: 2 },
                       accessibilityElementsHidden: true
                     }
                   )
@@ -915,11 +1283,11 @@ function BodyMapDetailPanel({
                               reactNative.Text,
                               {
                                 accessibilityRole: "header",
+                                className: "text-text-primary",
                                 style: {
                                   fontSize: 16,
                                   fontFamily: '"Space Grotesk", sans-serif',
-                                  fontWeight: "700",
-                                  color: TEXT_PRIMARY2
+                                  fontWeight: "700"
                                 },
                                 testID: "body-map-detail-panel-title",
                                 children: displayName
@@ -945,7 +1313,7 @@ function BodyMapDetailPanel({
                               hitSlop: 8,
                               style: { padding: 4, margin: -4 },
                               testID: "body-map-detail-panel-close",
-                              children: /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 22, lineHeight: 22, color: TEXT_SECONDARY2 }, children: "\xD7" })
+                              children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-secondary", style: { fontSize: 22, lineHeight: 22 }, children: "\xD7" })
                             }
                           )
                         ]
@@ -954,7 +1322,8 @@ function BodyMapDetailPanel({
                     lastTrained != null && /* @__PURE__ */ jsx(
                       reactNative.Text,
                       {
-                        style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY2 },
+                        className: "text-text-secondary",
+                        style: { fontSize: 12, fontFamily: "Inter, sans-serif" },
                         testID: "body-map-detail-panel-last-trained",
                         children: `Last trained ${lastTrained}`
                       }
@@ -967,8 +1336,8 @@ function BodyMapDetailPanel({
                           style: { marginBottom: 6 },
                           accessibilityElementsHidden: true,
                           children: [
-                            /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 10, fontFamily: "Inter, sans-serif", fontWeight: "600", color: TEXT_TERTIARY }, children: `MEV ${landmarks.mev}` }),
-                            /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 10, fontFamily: "Inter, sans-serif", fontWeight: "600", color: TEXT_TERTIARY }, children: `MRV ${landmarks.mrv}` })
+                            /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-tertiary", style: { fontSize: 10, fontFamily: "Inter, sans-serif", fontWeight: "600" }, children: `MEV ${landmarks.mev}` }),
+                            /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-tertiary", style: { fontSize: 10, fontFamily: "Inter, sans-serif", fontWeight: "600" }, children: `MRV ${landmarks.mrv}` })
                           ]
                         }
                       ),
@@ -994,6 +1363,7 @@ function BodyMapDetailPanel({
                             /* @__PURE__ */ jsx(
                               reactNative.View,
                               {
+                                className: "border-text-primary bg-surface-elevated",
                                 style: {
                                   position: "absolute",
                                   left: `${markerLeft}%`,
@@ -1002,8 +1372,6 @@ function BodyMapDetailPanel({
                                   height: 14,
                                   borderRadius: 7,
                                   borderWidth: 2,
-                                  borderColor: TEXT_PRIMARY2,
-                                  backgroundColor: SURFACE_ELEVATED,
                                   boxShadow: "0 0 4px rgba(0,0,0,0.5)"
                                 },
                                 accessibilityElementsHidden: true,
@@ -1018,11 +1386,11 @@ function BodyMapDetailPanel({
                       /* @__PURE__ */ jsx(
                         reactNative.Text,
                         {
+                          className: "text-text-primary",
                           style: {
                             fontSize: 24,
                             fontFamily: '"Space Grotesk", sans-serif',
-                            fontWeight: "700",
-                            color: TEXT_PRIMARY2
+                            fontWeight: "700"
                           },
                           testID: "body-map-detail-panel-set-count",
                           children: weeklySets
@@ -1031,7 +1399,8 @@ function BodyMapDetailPanel({
                       /* @__PURE__ */ jsx(
                         reactNative.Text,
                         {
-                          style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY2 },
+                          className: "text-text-secondary",
+                          style: { fontSize: 12, fontFamily: "Inter, sans-serif" },
                           testID: "body-map-detail-panel-mrv-suffix",
                           children: `/ ${landmarks.mrv} MRV`
                         }
@@ -1041,11 +1410,11 @@ function BodyMapDetailPanel({
                       /* @__PURE__ */ jsx(
                         reactNative.Text,
                         {
+                          className: "text-text-tertiary",
                           style: {
                             fontSize: 10,
                             fontFamily: "Inter, sans-serif",
                             fontWeight: "600",
-                            color: TEXT_TERTIARY,
                             marginBottom: 6
                           },
                           accessibilityElementsHidden: true,
@@ -1058,11 +1427,11 @@ function BodyMapDetailPanel({
                       /* @__PURE__ */ jsx(
                         reactNative.Text,
                         {
+                          className: "text-text-tertiary",
                           style: {
                             fontSize: 10,
                             fontFamily: "Inter, sans-serif",
                             fontWeight: "600",
-                            color: TEXT_TERTIARY,
                             marginBottom: 8
                           },
                           children: "CONTRIBUTING EXERCISES"
@@ -1071,23 +1440,22 @@ function BodyMapDetailPanel({
                       contributingExercises.map((exercise, index) => /* @__PURE__ */ jsxs(
                         reactNative.View,
                         {
-                          className: "flex-row items-center justify-between",
+                          className: "flex-row items-center justify-between bg-surface-raised border-border",
                           style: {
                             gap: 10,
                             paddingVertical: 8,
                             paddingHorizontal: 12,
                             marginBottom: 6,
                             borderRadius: 8,
-                            backgroundColor: SURFACE_RAISED,
-                            borderWidth: 1,
-                            borderColor: BORDER_DEFAULT
+                            borderWidth: 1
                           },
                           testID: `body-map-detail-panel-contributing-${index}`,
                           children: [
                             /* @__PURE__ */ jsx(
                               reactNative.Text,
                               {
-                                style: { flex: 1, fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "600", color: TEXT_PRIMARY2 },
+                                className: "text-text-primary",
+                                style: { flex: 1, fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "600" },
                                 testID: `body-map-detail-panel-contributing-${index}-name`,
                                 children: exercise.name
                               }
@@ -1095,7 +1463,8 @@ function BodyMapDetailPanel({
                             /* @__PURE__ */ jsx(
                               reactNative.Text,
                               {
-                                style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_SECONDARY2 },
+                                className: "text-text-secondary",
+                                style: { fontSize: 12, fontFamily: "Inter, sans-serif" },
                                 testID: `body-map-detail-panel-contributing-${index}-detail`,
                                 children: `${exercise.sets} sets \xB7 ${Math.round(exercise.contributionWeight * 100)}%`
                               }
@@ -1109,11 +1478,11 @@ function BodyMapDetailPanel({
                       /* @__PURE__ */ jsx(
                         reactNative.Text,
                         {
+                          className: "text-text-tertiary",
                           style: {
                             fontSize: 10,
                             fontFamily: "Inter, sans-serif",
                             fontWeight: "600",
-                            color: TEXT_TERTIARY,
                             marginBottom: 8
                           },
                           children: "UPCOMING"
@@ -1129,7 +1498,8 @@ function BodyMapDetailPanel({
                             /* @__PURE__ */ jsx(
                               reactNative.Text,
                               {
-                                style: { flex: 1, fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "600", color: TEXT_PRIMARY2 },
+                                className: "text-text-primary",
+                                style: { flex: 1, fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "600" },
                                 testID: `body-map-detail-panel-upcoming-${index}-name`,
                                 children: exercise.name
                               }
@@ -1137,7 +1507,8 @@ function BodyMapDetailPanel({
                             /* @__PURE__ */ jsx(
                               reactNative.Text,
                               {
-                                style: { fontSize: 12, fontFamily: "Inter, sans-serif", color: TEXT_TERTIARY },
+                                className: "text-text-tertiary",
+                                style: { fontSize: 12, fontFamily: "Inter, sans-serif" },
                                 testID: `body-map-detail-panel-upcoming-${index}-detail`,
                                 children: `${exercise.workoutName} \xB7 ${exercise.sets} sets`
                               }
@@ -1176,23 +1547,6 @@ function BodyMapDetailPanel({
     }
   );
 }
-
-// src/theme/tokens/primitives.ts
-var primitiveColors = {
-  // Neutral/Gray scale
-  neutral: {
-    100: "#F3F4F6"},
-  // Charcoal scale (dark backgrounds)
-  charcoal: {
-    600: "#191919"}};
-
-// src/theme/tokens/semantic.ts
-var semanticColorsLight = {
-  // #FAFAFA - slightly off-white for elevated cards
-  "surface-raised": primitiveColors.neutral[100]};
-var semanticColorsDark = {
-  // #161616 - main surface
-  "surface-elevated": primitiveColors.charcoal[600]};
 function hexToRgb(hex) {
   const cleaned = hex.replace("#", "");
   let r, g, b;
@@ -2048,14 +2402,11 @@ function StatusDot({
 var BRAND_PRIMARY3 = "#FF7900";
 var BRAND_PRIMARY_DARK = "#C45E00";
 var BRAND_PRIMARY_LIGHT = "#FFB066";
-var TEXT_PRIMARY3 = "var(--color-text-primary)";
-var TEXT_SECONDARY3 = "var(--color-text-secondary)";
-var TEXT_TERTIARY2 = "var(--color-text-tertiary)";
 var SUCCESS = "#14B8A6";
 var WARNING = "#FFB020";
 var ERROR = "#D14343";
 var ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY3, BRAND_PRIMARY_LIGHT];
-var CARD_GRADIENT = "linear-gradient(135deg, var(--color-surface-elevated) 0%, var(--color-surface-raised) 100%)";
+var CARD_GRADIENT = `linear-gradient(135deg, ${resolveColor("surface-elevated")} 0%, ${resolveColor("surface-raised")} 100%)`;
 var GAUGE_GRADIENT = "linear-gradient(90deg, rgba(20,184,166,0.25) 0%, rgba(255,176,32,0.25) 50%, rgba(209,67,67,0.25) 100%)";
 var STATUS_VARIANTS = {
   success: { bg: "rgba(20,184,166,0.15)", border: "rgba(20,184,166,0.3)", text: SUCCESS },
@@ -2082,7 +2433,8 @@ function renderCoachingText(text, highlights) {
     (part, index) => highlights.includes(part) ? /* @__PURE__ */ jsx(
       reactNative.Text,
       {
-        style: { fontWeight: "700", color: TEXT_PRIMARY3 },
+        className: "text-text-primary",
+        style: { fontWeight: "700" },
         children: part
       },
       `${part}-${index}`
@@ -2129,13 +2481,13 @@ function MetricCell({ metric }) {
     /* @__PURE__ */ jsx(
       reactNative.Text,
       {
+        className: "text-text-tertiary",
         style: {
           fontSize: 10,
           fontFamily: "Inter, sans-serif",
           fontWeight: "600",
           letterSpacing: 0.5,
-          textTransform: "uppercase",
-          color: TEXT_TERTIARY2
+          textTransform: "uppercase"
         },
         children: metric.label
       }
@@ -2143,12 +2495,12 @@ function MetricCell({ metric }) {
     /* @__PURE__ */ jsx(
       reactNative.Text,
       {
+        className: "text-text-primary",
         style: {
           marginTop: 2,
           fontSize: 13,
           fontFamily: "Inter, sans-serif",
-          fontWeight: "600",
-          color: TEXT_PRIMARY3
+          fontWeight: "600"
         },
         children: metric.value
       }
@@ -2180,13 +2532,13 @@ function Gauge({ gauge }) {
               /* @__PURE__ */ jsx(
                 reactNative.Text,
                 {
+                  className: "text-text-secondary",
                   style: {
                     fontSize: 10,
                     fontFamily: "Inter, sans-serif",
                     fontWeight: "500",
                     letterSpacing: 0.5,
-                    textTransform: "uppercase",
-                    color: TEXT_SECONDARY3
+                    textTransform: "uppercase"
                   },
                   children: gauge.label
                 }
@@ -2194,11 +2546,11 @@ function Gauge({ gauge }) {
               gauge.sublabel != null && /* @__PURE__ */ jsx(
                 reactNative.Text,
                 {
+                  className: "text-text-tertiary",
                   style: {
                     fontSize: 10,
                     fontFamily: "Inter, sans-serif",
-                    fontWeight: "500",
-                    color: TEXT_TERTIARY2
+                    fontWeight: "500"
                   },
                   children: gauge.sublabel
                 }
@@ -2235,6 +2587,7 @@ function Gauge({ gauge }) {
               /* @__PURE__ */ jsx(
                 reactNative.View,
                 {
+                  className: "border-text-primary",
                   style: {
                     position: "absolute",
                     left: `${percentage}%`,
@@ -2244,7 +2597,6 @@ function Gauge({ gauge }) {
                     height: 14,
                     borderRadius: 9999,
                     borderWidth: 2,
-                    borderColor: TEXT_PRIMARY3,
                     backgroundColor: markerColor,
                     boxShadow: "0 0 4px rgba(0,0,0,0.5)"
                   },
@@ -2307,12 +2659,12 @@ function MesoStatusCard({
                   /* @__PURE__ */ jsx(
                     reactNative.Text,
                     {
+                      className: "text-text-primary",
                       style: {
                         flexShrink: 1,
                         fontSize: 15,
                         fontFamily: '"Space Grotesk", sans-serif',
-                        fontWeight: "700",
-                        color: TEXT_PRIMARY3
+                        fontWeight: "700"
                       },
                       testID: "meso-status-card-name",
                       children: mesoName
@@ -2325,11 +2677,11 @@ function MesoStatusCard({
             /* @__PURE__ */ jsx(
               reactNative.Text,
               {
+                className: "text-text-secondary",
                 style: {
                   marginTop: 4,
                   fontSize: 12,
-                  fontFamily: "Inter, sans-serif",
-                  color: TEXT_SECONDARY3
+                  fontFamily: "Inter, sans-serif"
                 },
                 testID: "meso-status-card-subtitle",
                 children: mesoSubtitle
@@ -2361,11 +2713,11 @@ function MesoStatusCard({
               children: /* @__PURE__ */ jsx(
                 reactNative.Text,
                 {
+                  className: "text-text-secondary",
                   style: {
                     fontSize: 12,
                     lineHeight: 17,
-                    fontFamily: "Inter, sans-serif",
-                    color: TEXT_SECONDARY3
+                    fontFamily: "Inter, sans-serif"
                   },
                   children: renderCoachingText(coaching.text, coaching.highlights)
                 }
@@ -2411,12 +2763,6 @@ function MesoStatusCard({
 }
 
 // src/components/custom/Workout/TrainingStatusPage.tsx
-var SURFACE_ELEVATED2 = "var(--color-surface-elevated)";
-var BORDER_DEFAULT2 = "var(--color-border-default)";
-var TEXT_PRIMARY4 = "var(--color-text-primary)";
-var TEXT_SECONDARY4 = "var(--color-text-secondary)";
-var TEXT_TERTIARY3 = "var(--color-text-tertiary)";
-var PAGE_BG = "var(--color-background-base)";
 var STATUS_ORDER = ["under", "maintenance", "productive", "over"];
 function deriveTrainingSummary(muscles) {
   const statusCounts = {
@@ -2452,25 +2798,24 @@ function SummaryCards({ summary }) {
     return /* @__PURE__ */ jsxs(
       reactNative.View,
       {
+        className: "bg-surface-elevated border-border",
         style: {
           flexGrow: 1,
           flexBasis: "46%",
           padding: 12,
           borderRadius: 10,
-          backgroundColor: SURFACE_ELEVATED2,
-          borderWidth: 1,
-          borderColor: BORDER_DEFAULT2
+          borderWidth: 1
         },
         testID: `training-status-page-summary-${key}`,
         children: [
           /* @__PURE__ */ jsx(
             reactNative.Text,
             {
+              className: "text-text-primary",
               style: {
                 fontSize: 22,
                 fontFamily: '"Space Grotesk", sans-serif',
-                fontWeight: "700",
-                color: TEXT_PRIMARY4
+                fontWeight: "700"
               },
               children: value
             }
@@ -2478,14 +2823,14 @@ function SummaryCards({ summary }) {
           /* @__PURE__ */ jsx(
             reactNative.Text,
             {
+              className: "text-text-tertiary",
               style: {
                 marginTop: 2,
                 fontSize: 11,
                 fontFamily: "Inter, sans-serif",
                 fontWeight: "600",
                 letterSpacing: 0.4,
-                textTransform: "uppercase",
-                color: TEXT_TERTIARY3
+                textTransform: "uppercase"
               },
               children: label
             }
@@ -2525,10 +2870,10 @@ function StatusLegend() {
             /* @__PURE__ */ jsx(
               reactNative.Text,
               {
+                className: "text-text-secondary",
                 style: {
                   fontSize: 11,
                   fontFamily: "Inter, sans-serif",
-                  color: TEXT_SECONDARY4,
                   textTransform: "capitalize"
                 },
                 children: VOLUME_STATUS_LABELS[status]
@@ -2567,8 +2912,8 @@ function TrainingStatusPage({
   return /* @__PURE__ */ jsxs(
     reactNative.View,
     {
-      className,
-      style: { position: "relative", width: 390, backgroundColor: PAGE_BG },
+      className: ["bg-background-base", className].filter(Boolean).join(" "),
+      style: { position: "relative", width: 390 },
       accessibilityRole: "main",
       "aria-label": title,
       testID: "training-status-page",
@@ -2579,11 +2924,11 @@ function TrainingStatusPage({
             reactNative.Text,
             {
               accessibilityRole: "header",
+              className: "text-text-primary",
               style: {
                 fontSize: 20,
                 fontFamily: '"Space Grotesk", sans-serif',
-                fontWeight: "700",
-                color: TEXT_PRIMARY4
+                fontWeight: "700"
               },
               testID: "training-status-page-title",
               children: title
@@ -2594,10 +2939,9 @@ function TrainingStatusPage({
           /* @__PURE__ */ jsxs(
             reactNative.View,
             {
+              className: "bg-surface-elevated border-border",
               style: {
-                backgroundColor: SURFACE_ELEVATED2,
                 borderWidth: 1,
-                borderColor: BORDER_DEFAULT2,
                 borderRadius: 12,
                 padding: 12,
                 gap: 12