@titan-design/react-ui 0.5.0 → 0.7.0

package/dist/bodymap.mjs

@@ -12,43 +12,20 @@ function cn(...inputs) {
 
 // src/theme/tokens/primitives.ts
 var primitiveColors = {
-  // Blue scale (primary brand)
+  // Blue scale
   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 scale
   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"},
+    600: "#D14343"},
+  // Vivid red scale
+  redVivid: {
+    400: "#FF6070",
+    500: "#FF4757",
+    700: "#C42539"},
   // Neutral/Gray scale
   neutral: {
     50: "#FAFAFA",
@@ -58,16 +35,9 @@ var primitiveColors = {
     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: {
+    200: "#3C3C3C",
     300: "#2C2C2C",
     400: "#1F1F1F",
     500: "#1C1C1C",
@@ -75,15 +45,59 @@ var primitiveColors = {
     700: "#161616",
     900: "#101010"
   },
-  // Steel scale (cool accent)
-  steel: {
-    300: "#678498",
-    400: "#557488",
-    500: "#406D87",
-    600: "#39617A",
-    700: "#32556D"},
   // Pure colors
   white: "#FFFFFF"};
+var primitiveRamps = {
+  red: {
+    50: "#FFF4F4",
+    500: "#E05254",
+    600: "#D14343",
+    // pin
+    700: "#A4221C"},
+  orange: {
+    200: "#FFC7A2",
+    300: "#FFA063",
+    400: "#FF7900",
+    // pin
+    500: "#DA5F00",
+    600: "#B94A00"},
+  amber: {
+    50: "#FFF7DD",
+    200: "#FFD352",
+    300: "#F9B415",
+    500: "#C27400"},
+  green: {
+    50: "#E3FFEE",
+    200: "#58F69E",
+    300: "#2ED573",
+    500: "#22A444",
+    600: "#298732"},
+  cyan: {
+    300: "#22D3EE",
+    // pin
+    400: "#01B5D1",
+    500: "#2697B7",
+    600: "#307B9B",
+    700: "#2A617F",
+    800: "#22465F"},
+  blue: {
+    50: "#EFF8FF",
+    300: "#78C2FF",
+    500: "#2196F3",
+    // pin
+    600: "#1072CB"}};
+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 discreteRainbow = [
   "#E8ECFB",
   "#D9CCE3",
@@ -119,56 +133,46 @@ var discreteRainbow = [
 // 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": 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": 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],
+  "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": 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],
+  "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": primitiveColors.redVivid[500],
+  // vivid alert red
+  "status-error-vivid-light": primitiveColors.redVivid[400],
+  "status-error-vivid-dark": primitiveColors.redVivid[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,
@@ -195,25 +199,25 @@ var semanticColorsLight = {
   // Data visualization colors (data-*)
   // First 10 colors from discrete rainbow optimized for charts
   "data-1": discreteRainbow[9],
-  // #1965B0 - Blue
+  // Blue
   "data-2": discreteRainbow[14],
-  // #4EB265 - Green
+  // Green
   "data-3": discreteRainbow[17],
-  // #F7F056 - Yellow
+  // Yellow
   "data-4": discreteRainbow[25],
-  // #DC050C - Red
+  // Red
   "data-5": discreteRainbow[8],
-  // #882E72 - Purple
+  // Purple
   "data-6": discreteRainbow[20],
-  // #F4A736 - Orange
+  // Orange
   "data-7": discreteRainbow[13],
-  // #7BAFDE - Light Blue
+  // Light Blue
   "data-8": discreteRainbow[15],
-  // #90C987 - Light Green
+  // Light Green
   "data-9": discreteRainbow[3],
-  // #CAACCB - Lavender
+  // Lavender
   "data-10": discreteRainbow[22],
-  // #EE8026 - Dark Orange
+  // Dark Orange
   // Text colors (text-*)
   "text-primary": "#121828",
   "text-secondary": "#65748B",
@@ -225,9 +229,9 @@ var semanticColorsLight = {
   // Surface colors (surface-*) - for elevated containers
   "surface-base": primitiveColors.white,
   "surface-elevated": primitiveColors.neutral[50],
-  // #FAFAFA - slightly off-white for elevated cards
+  // slightly off-white for elevated cards
   "surface-raised": primitiveColors.neutral[100],
-  // #F3F4F6 - light gray for raised cards
+  // light gray for raised cards
   "surface-overlay": primitiveColors.white,
   "surface-input": primitiveColors.neutral[50],
   // Input field background (filled variant)
@@ -239,6 +243,8 @@ var semanticColorsLight = {
   "border-default": "#E8E9EB",
   "border-subtle": primitiveColors.neutral[100],
   "border-strong": primitiveColors.neutral[300],
+  "border-prominent": primitiveColors.neutral[400],
+  // high-visibility divider
   "border-focus": primitiveColors.blue[600],
   "border-input": primitiveColors.neutral[300],
   // Input field border
@@ -263,37 +269,44 @@ var semanticColorsLight = {
 };
 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": 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": 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],
+  "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": 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-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-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-error-vivid": primitiveColors.redVivid[500],
+  "status-error-vivid-light": primitiveColors.redVivid[400],
+  "status-error-vivid-dark": primitiveColors.redVivid[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,
@@ -335,29 +348,31 @@ var semanticColorsDark = {
   "text-link-hover": primitiveColors.blue[400],
   // Surface colors - dark backgrounds
   "surface-base": primitiveColors.charcoal[700],
-  // #161616 - main surface
+  // main surface
   "surface-elevated": primitiveColors.charcoal[600],
-  // #191919 - elevated surface
+  // elevated surface
   "surface-raised": primitiveColors.charcoal[500],
-  // #1C1C1C - raised surface
+  // raised surface
   "surface-overlay": primitiveColors.charcoal[600],
-  // #191919 - overlay surface
+  // overlay surface
   "surface-input": primitiveColors.charcoal[600],
-  // #191919 - input surface
+  // input surface
   // Background colors
   "background-base": primitiveColors.charcoal[900],
-  // #101010 - darkest charcoal
+  // darkest charcoal
   "background-default": primitiveColors.charcoal[700],
-  // #161616 - main background
+  // main background
   "background-subtle": primitiveColors.charcoal[500],
-  // #1C1C1C - subtle background
+  // subtle background
   // Border colors
   "border-default": primitiveColors.charcoal[400],
-  // #1F1F1F - default border
+  // default border
   "border-subtle": primitiveColors.charcoal[500],
-  // #1C1C1C - subtle border
+  // subtle border
   "border-strong": primitiveColors.charcoal[300],
-  // #2C2C2C - strong border
+  // strong border
+  "border-prominent": primitiveColors.charcoal[200],
+  // high-visibility divider
   "border-focus": "#828DF8",
   "border-input": primitiveColors.neutral[600],
   "border-input-hover": primitiveColors.neutral[500],
@@ -372,7 +387,7 @@ var semanticColorsDark = {
   "interactive-disabled-text": "rgba(255, 255, 255, 0.26)",
   // Divider
   "divider": primitiveColors.charcoal[400],
-  // #1F1F1F - divider color
+  // divider color
   // Avatar default
   "avatar-background": primitiveColors.neutral[600],
   "avatar-text": primitiveColors.white
@@ -388,21 +403,22 @@ function resolveColor(token, mode = "dark") {
 
 // src/theme/workout-tokens.ts
 var WORKOUT_TOKENS = {
-  // BodyMap volume heatmap scale (drive dynamic SVG fills, so inline values).
-  // Maps weekly-volume status against MEV/MAV/MRV landmarks to a fill color.
+  // BodyMap volume heatmap — the canonical `divergingScale` (under → optimal →
+  // over): a true diverging shape with a light green center, cool-blue under-
+  // trained end and warm-red over-reaching end (colorblind-robust in lightness).
   heatmap: {
     none: "#E0E0E0",
-    // gray — no training data
-    under: "#4A90D9",
-    // cool blue — below MEV
-    maintenance: "#F5C842",
-    // warm yellow — MEV to MAV
-    productive: "#4CAF50",
-    // green — MAV to MRV
-    approaching: "#FFA502",
-    // orange — near MRV
-    over: "#FF6B35"
-    // red-orange — over MRV
+    // no training data
+    under: divergingScale[0],
+    // below MEV
+    maintenance: divergingScale[1],
+    // MEV to MAV
+    productive: divergingScale[2],
+    // optimal center — MAV to MRV
+    approaching: divergingScale[3],
+    // near MRV
+    over: divergingScale[4]
+    // over MRV
   }};
 
 // src/components/custom/Workout/muscleTaxonomy.ts
@@ -608,6 +624,7 @@ var jsxs = wrapJsx(jsxs$1);
 
 // src/components/custom/Workout/BodyMap.tsx
 var Body = BodyHighlighter.default ?? BodyHighlighter;
+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 BODY_SCALE = 0.8;
@@ -786,7 +803,7 @@ function ViewToggle({ view, onViewChange }) {
               borderRadius: 9999,
               backgroundColor: active ? "rgba(255,121,0,0.16)" : "transparent",
               borderWidth: 1,
-              borderColor: active ? "#FF7900" : resolveColor("border-strong")
+              borderColor: active ? BRAND_PRIMARY : resolveColor("border-strong")
             },
             testID: `body-map-toggle-${side}`,
             children: /* @__PURE__ */ jsx(
@@ -796,7 +813,7 @@ function ViewToggle({ view, onViewChange }) {
                   fontSize: 12,
                   fontFamily: "Inter, sans-serif",
                   fontWeight: active ? "700" : "500",
-                  color: active ? "#FF7900" : resolveColor("text-secondary"),
+                  color: active ? BRAND_PRIMARY : resolveColor("text-secondary"),
                   textTransform: "capitalize"
                 },
                 children: side
@@ -828,7 +845,7 @@ function MuscleButton({ entry, highlighted, onMusclePress }) {
         paddingVertical: 3,
         borderRadius: 9999,
         borderWidth: 1,
-        borderColor: highlighted ? "#FF7900" : resolveColor("border-default")
+        borderColor: highlighted ? BRAND_PRIMARY : resolveColor("border-default")
       },
       testID: `body-map-muscle-${entry.key}`,
       children: [
@@ -867,9 +884,11 @@ var colorStyles = {
   default: "bg-text-tertiary",
   primary: "bg-brand-primary",
   success: "bg-status-success",
+  live: "bg-status-live",
   error: "bg-status-error",
   warning: "bg-status-warning",
-  info: "bg-status-info"
+  info: "bg-status-info",
+  "error-vivid": "bg-status-error-vivid"
 };
 function Indicator({
   size = "sm",
@@ -877,14 +896,40 @@ function Indicator({
   customColor,
   glow = false,
   ring = false,
+  pulse = false,
   className,
   style,
   ...props
 }) {
+  const pulseMode = pulse === true ? "opacity" : pulse || false;
+  const colorClass = !customColor ? colorStyles[color] : void 0;
+  const colorStyle = customColor ? { backgroundColor: customColor } : void 0;
+  if (pulseMode === "ping") {
+    return /* @__PURE__ */ jsxs(View, { className: cn("relative", sizeStyles[size], className), style, ...props, children: [
+      /* @__PURE__ */ jsx(
+        View,
+        {
+          className: cn("absolute inset-0 rounded-full animate-ping", colorClass),
+          style: colorStyle
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        View,
+        {
+          className: cn(
+            "relative rounded-full",
+            sizeStyles[size],
+            colorClass,
+            ring && "border-2 border-background-base"
+          ),
+          style: colorStyle
+        }
+      )
+    ] });
+  }
   const dynamicStyle = {
     ...typeof style === "object" ? style : {},
-    ...customColor ? { backgroundColor: customColor } : {},
-    ...glow && !customColor ? {} : {},
+    ...colorStyle ?? {},
     ...glow && customColor ? { boxShadow: `0 0 6px ${customColor}` } : {}
   };
   return /* @__PURE__ */ jsx(
@@ -893,12 +938,14 @@ function Indicator({
       className: cn(
         "rounded-full shrink-0",
         sizeStyles[size],
-        !customColor && colorStyles[color],
+        colorClass,
+        pulseMode === "opacity" && "animate-pulse",
         ring && "border-2 border-background-base",
-        glow && !customColor && color === "success" && "shadow-[0_0_6px_rgba(20,184,166,0.6)]",
+        glow && !customColor && (color === "success" || color === "live") && "shadow-[0_0_6px_rgba(46,213,115,0.6)]",
         glow && !customColor && color === "error" && "shadow-[0_0_6px_rgba(239,68,68,0.6)]",
         glow && !customColor && color === "warning" && "shadow-[0_0_6px_rgba(245,158,11,0.6)]",
         glow && !customColor && color === "primary" && "shadow-[0_0_6px_rgba(255,121,0,0.6)]",
+        glow && !customColor && color === "error-vivid" && "shadow-[0_0_6px_rgba(255,71,87,0.6)]",
         className
       ),
       style: Object.keys(dynamicStyle).length > 0 ? dynamicStyle : style,
@@ -976,7 +1023,7 @@ function Badge({
     }
   );
 }
-var BRAND_PRIMARY = "#FF7900";
+var BRAND_PRIMARY2 = getSemanticColors("dark")["brand-primary"];
 function normalizeData(data, height) {
   if (data.length === 0) return [];
   const min = Math.min(...data);
@@ -1013,7 +1060,7 @@ function Sparkline({
       }
     );
   }
-  const resolvedColor = color ?? BRAND_PRIMARY;
+  const resolvedColor = color ?? BRAND_PRIMARY2;
   const normalized = normalizeData(data, height);
   const stepX = data.length > 1 ? width / (data.length - 1) : 0;
   const dotSize = 3;
@@ -1129,8 +1176,9 @@ function Sparkline({
 }
 
 // src/components/custom/Workout/BodyMapDetailPanel.tsx
-var BRAND_PRIMARY2 = "#FF7900";
-var VOLUME_GRADIENT = "linear-gradient(90deg, #2196F3 0%, #14B8A6 50%, #D14343 100%)";
+var t = getSemanticColors("dark");
+var BRAND_PRIMARY3 = t["brand-primary"];
+var VOLUME_GRADIENT = `linear-gradient(90deg, ${t["status-info"]} 0%, ${t["status-success"]} 50%, ${t["status-error"]} 100%)`;
 var SLIDE_OFFSET = 400;
 var BACKDROP_OPACITY = 0.4;
 var STATUS_BADGE_COLOR = {
@@ -1528,7 +1576,7 @@ function BodyMapDetailPanel({
                           borderColor: "rgba(255,121,0,0.3)"
                         },
                         testID: "body-map-detail-panel-view-exercises",
-                        children: /* @__PURE__ */ jsx(Text, { style: { fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "700", color: BRAND_PRIMARY2 }, children: "View exercises" })
+                        children: /* @__PURE__ */ jsx(Text, { style: { fontSize: 13, fontFamily: "Inter, sans-serif", fontWeight: "700", color: BRAND_PRIMARY3 }, children: "View exercises" })
                       }
                     )
                   ]
@@ -2266,17 +2314,18 @@ function CardContent({ children, className }) {
 function CardFooter({ children, className }) {
   return /* @__PURE__ */ jsx(View, { className: cn("px-6 py-4 flex-row items-center gap-2", className), children });
 }
+var t2 = getSemanticColors("dark");
 var solidVariantColors = {
-  success: "#14B8A6",
-  warning: "#FFB020",
-  error: "#D14343",
+  success: t2["status-success"],
+  warning: t2["status-warning"],
+  error: t2["status-error"],
   neutral: "#6B7280"
 };
 var ringVariantStyles = {
   "on-track": {
-    backgroundColor: "rgba(20,184,166,0.15)",
+    backgroundColor: "rgba(46,213,115,0.15)",
     borderWidth: 1,
-    borderColor: "rgba(20,184,166,0.3)"
+    borderColor: "rgba(46,213,115,0.3)"
   },
   deviation: {
     backgroundColor: "rgba(245,158,11,0.15)",
@@ -2291,11 +2340,11 @@ var ringVariantStyles = {
   }
 };
 var glowStyles = {
-  success: { boxShadow: "0 0 4px rgba(20,184,166,0.4)" },
+  success: { boxShadow: "0 0 4px rgba(46,213,115,0.4)" },
   warning: { boxShadow: "0 0 4px rgba(245,158,11,0.4)" },
   error: { boxShadow: "0 0 4px rgba(239,68,68,0.4)" },
   neutral: { boxShadow: "0 0 4px rgba(107,114,128,0.4)" },
-  "on-track": { boxShadow: "0 0 4px rgba(20,184,166,0.4)" },
+  "on-track": { boxShadow: "0 0 4px rgba(46,213,115,0.4)" },
   deviation: { boxShadow: "0 0 4px rgba(245,158,11,0.4)" },
   future: { boxShadow: "0 0 4px rgba(107,114,128,0.4)" }
 };
@@ -2309,8 +2358,8 @@ var iconColors = {
   warning: "#6B4000",
   error: "#5C1A1A",
   neutral: "#D1D5DB",
-  "on-track": "#14B8A6",
-  deviation: "#FFB020",
+  "on-track": t2["status-success"],
+  deviation: t2["status-warning"],
   future: "#6B7280"
 };
 var sizeDimensions = {
@@ -2391,20 +2440,23 @@ function StatusDot({
   }
   return /* @__PURE__ */ jsx(View, { className, ...props, children: dot });
 }
+var MESO_ACCENT_GRADIENT_DARK = primitiveRamps.orange[500];
+var MESO_ACCENT_GRADIENT_LIGHT = primitiveRamps.orange[300];
 
 // src/components/custom/Workout/MesoStatusCard.tsx
-var BRAND_PRIMARY3 = "#FF7900";
-var BRAND_PRIMARY_DARK = "#C45E00";
-var BRAND_PRIMARY_LIGHT = "#FFB066";
-var SUCCESS = "#14B8A6";
-var WARNING = "#FFB020";
-var ERROR = "#D14343";
-var ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY3, BRAND_PRIMARY_LIGHT];
+var t3 = getSemanticColors("dark");
+var BRAND_PRIMARY4 = t3["brand-primary"];
+var BRAND_PRIMARY_DARK = MESO_ACCENT_GRADIENT_DARK;
+var BRAND_PRIMARY_LIGHT = MESO_ACCENT_GRADIENT_LIGHT;
+var SUCCESS = t3["status-success"];
+var WARNING = t3["status-warning"];
+var ERROR = t3["status-error"];
+var ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY4, BRAND_PRIMARY_LIGHT];
 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 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 STATUS_VARIANTS = {
-  success: { bg: "rgba(20,184,166,0.15)", border: "rgba(20,184,166,0.3)", text: SUCCESS },
-  warning: { bg: "rgba(255,176,32,0.15)", border: "rgba(255,176,32,0.3)", text: WARNING },
+  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 }
 };
 function clamp012(value) {
@@ -2696,9 +2748,9 @@ function MesoStatusCard({
             View,
             {
               style: {
-                backgroundColor: "rgba(255,176,32,0.06)",
+                backgroundColor: "rgba(249,180,21,0.06)",
                 borderWidth: 1,
-                borderColor: "rgba(255,176,32,0.15)",
+                borderColor: "rgba(249,180,21,0.15)",
                 borderRadius: 8,
                 paddingVertical: 10,
                 paddingHorizontal: 12
@@ -2724,9 +2776,9 @@ function MesoStatusCard({
               className: "flex-row items-center",
               style: {
                 gap: 8,
-                backgroundColor: "rgba(20,184,166,0.06)",
+                backgroundColor: "rgba(46,213,115,0.06)",
                 borderWidth: 1,
-                borderColor: "rgba(20,184,166,0.2)",
+                borderColor: "rgba(46,213,115,0.2)",
                 borderRadius: 8,
                 paddingVertical: 10,
                 paddingHorizontal: 12