@titan-design/react-ui 0.6.0 → 0.7.0

package/src/theme/tokens/primitives.ts

@@ -6,7 +6,7 @@
  */
 
 export const primitiveColors = {
-  // Blue scale (primary brand)
+  // Blue scale
   blue: {
     50: '#EFF6FF',
     100: '#DBEAFE',
@@ -14,110 +14,40 @@ export const primitiveColors = {
     300: '#93C5FD',
     400: '#60A5FA',
     500: '#3B82F6',
-    600: '#5048E5', // Primary main
-    700: '#3832A0', // Primary dark
+    600: '#5048E5',
+    700: '#3832A0',
     800: '#1E40AF',
     900: '#1E3A8A',
   },
 
-  // Green scale (secondary brand)
-  green: {
-    50: '#ECFDF5',
-    100: '#D1FAE5',
-    200: '#A7F3D0',
-    300: '#6EE7B7',
-    400: '#3FC79A', // Secondary light
-    500: '#10B981', // Secondary main
-    600: '#059669',
-    700: '#0B815A', // Secondary dark
-    800: '#065F46',
-    900: '#064E3B',
-  },
-
-  // Teal scale (success)
-  teal: {
-    50: '#F0FDFA',
-    100: '#CCFBF1',
-    200: '#99F6E4',
-    300: '#5EEAD4',
-    400: '#43C6B7', // Success light
-    500: '#14B8A6', // Success main
-    600: '#0D9488',
-    700: '#0E8074', // Success dark
-    800: '#115E59',
-    900: '#134E4A',
-  },
-
-  // Red scale (error)
+  // Red scale
   red: {
     50: '#FEF2F2',
     100: '#FEE2E2',
     200: '#FECACA',
     300: '#FCA5A5',
-    400: '#DA6868', // Error light
+    400: '#DA6868',
     500: '#EF4444',
-    600: '#D14343', // Error main
-    700: '#922E2E', // Error dark
+    600: '#D14343',
+    700: '#922E2E',
     800: '#991B1B',
     900: '#7F1D1D',
   },
 
-  // Vivid green scale (live/go success)
-  greenVivid: {
-    50: '#E9FBF0',
-    100: '#C8F7DA',
-    200: '#9FF0BF',
-    300: '#6BE79D',
-    400: '#47DE84', // Success vivid light
-    500: '#2ED573', // Success vivid main
-    600: '#22B85F',
-    700: '#1A9950', // Success vivid dark
-    800: '#157A40',
-    900: '#105C30',
-  },
-
-  // Vivid red scale (alert)
+  // Vivid red scale
   redVivid: {
     50: '#FFECEE',
     100: '#FFD6DB',
     200: '#FFB3BC',
     300: '#FF8593',
-    400: '#FF6070', // Error vivid light
-    500: '#FF4757', // Error vivid main
+    400: '#FF6070',
+    500: '#FF4757',
     600: '#E63548',
-    700: '#C42539', // Error vivid dark
+    700: '#C42539',
     800: '#9E1C2C',
     900: '#7A1520',
   },
 
-  // Amber scale (warning)
-  amber: {
-    50: '#FFFBEB',
-    100: '#FEF3C7',
-    200: '#FDE68A',
-    300: '#FCD34D',
-    400: '#FFBF4C', // Warning light
-    500: '#FFB020', // Warning main
-    600: '#B27B16', // Warning dark
-    700: '#B45309',
-    800: '#92400E',
-    900: '#78350F',
-  },
-
-  // Sky/Blue scale (info)
-  sky: {
-    50: '#F0F9FF',
-    100: '#E0F2FE',
-    200: '#BAE6FD',
-    300: '#7DD3FC',
-    400: '#64B6F7', // Info light
-    500: '#2196F3', // Info main
-    600: '#0284C7',
-    700: '#0B79D0', // Info dark
-    800: '#075985',
-    900: '#0C4A6E',
-  },
-
   // Neutral/Gray scale
   neutral: {
     50: '#FAFAFA',
@@ -133,19 +63,6 @@ export const primitiveColors = {
     950: '#030712',
   },
 
-  // Orange scale (accent/brand color)
-  accent: {
-    100: '#FFA860',
-    200: '#FF9630',
-    300: '#FF8500',
-    400: '#FF7900',
-    500: '#F56C00',
-    600: '#E06D10',
-    700: '#D0620C',
-    800: '#B75500',
-    900: '#A34900',
-  },
-
   // Charcoal scale (dark backgrounds)
   charcoal: {
     0: '#6E6E6E',
@@ -161,19 +78,6 @@ export const primitiveColors = {
     900: '#101010',
   },
 
-  // Steel scale (cool accent)
-  steel: {
-    100: '#8AA4B8',
-    200: '#7894A8',
-    300: '#678498',
-    400: '#557488',
-    500: '#406D87',
-    600: '#39617A',
-    700: '#32556D',
-    800: '#243D53',
-    900: '#1D3146',
-  },
-
   // Pure colors
   white: '#FFFFFF',
   black: '#000000',

package/src/theme/tokens/semantic.ts

@@ -46,6 +46,10 @@ export const semanticColorsLight = {
   'status-success-dark': ramp.green[600],
   'status-success-subtle': ramp.green[50],
 
+  // Live-session accent — its OWN role, decoupled from success so the two can diverge
+  'status-live': ramp.green[300],
+  'status-live-muted': ramp.green[500],
+
   'status-error': ramp.red[600],
   'status-error-light': ramp.red[500],
   'status-error-dark': ramp.red[700],
@@ -176,6 +180,10 @@ export const semanticColorsDark = {
   'status-success-dark': ramp.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': ramp.green[300],
+  'status-live-muted': ramp.green[500],
+
   'status-error': ramp.red[600],
   'status-error-light': ramp.red[500],
   'status-error-dark': ramp.red[700],

package/src/theme/workout-tokens.ts

@@ -8,14 +8,18 @@ export const WORKOUT_TOKENS = {
   // Canonical 4-band performance scale — the single source for BOTH the
   // VelocityStrip zone bars and the SetRow RPE color (TD-03.43). The direction
   // is intentionally inverted between the two consumers: for velocity, green =
-  // fastest/best; for RPE, green = easiest. This is the [0,1,2,4] subsample of
-  // the canonical `sequentialEffort` primitive. The `orange` key is the band
-  // label. Consumed inline (RN).
+  // fastest/best; for RPE, green = easiest. This is the [0,2,3,4] subsample of
+  // the canonical `sequentialEffort` primitive: an EVEN hue walk across the ramp
+  // (green → gold → orange → red). The earlier [0,1,2,4] spent two of its four
+  // bands on adjacent yellows (amber-200 + amber-300) and skipped orange, reading
+  // yellow-heavy with an abrupt jump to red; sampling amber-300 + orange-400
+  // instead gives four cleanly separable bands that hold at 3px strip scale.
+  // Consumed inline (RN).
   scale: {
-    green: sequentialEffort[0],
-    yellow: sequentialEffort[1],
-    orange: sequentialEffort[2], // gold band
-    red: sequentialEffort[4],
+    green: sequentialEffort[0], // green-300
+    yellow: sequentialEffort[2], // amber-300 (gold)
+    orange: sequentialEffort[3], // orange-400 (true orange)
+    red: sequentialEffort[4], // red-600
   },
 
   // BodyMap volume heatmap — the canonical `divergingScale` (under → optimal →

package/tailwind.config.js

@@ -38,6 +38,11 @@ module.exports = {
             dark: 'var(--color-status-success-dark)',
             subtle: 'var(--color-status-success-subtle)',
           },
+          // Live-session accent — own role, decoupled from success
+          live: {
+            DEFAULT: 'var(--color-status-live)',
+            muted: 'var(--color-status-live-muted)',
+          },
           error: {
             DEFAULT: 'var(--color-status-error)',
             light: 'var(--color-status-error-light)',