@titan-design/react-ui 0.4.0 → 0.6.0

package/src/theme/tokens/semantic.ts

@@ -17,49 +17,54 @@
  * - interactive-* : Hover/focus/active/disabled states
  */
 
-import { primitiveColors as p, discreteRainbow } from './primitives'
+import { primitiveColors as p, primitiveRamps as ramp, discreteRainbow } from './primitives'
 
 // Light mode semantic colors (default)
 export const semanticColorsLight = {
   // Brand colors (brand-*)
-  'brand-primary': p.accent[400],              // #FF7900
-  'brand-primary-light': p.accent[200],        // #FF9630
-  'brand-primary-dark': p.accent[700],         // #D0620C
+  'brand-primary': ramp.orange[400],
+  'brand-primary-light': ramp.orange[300],
+  'brand-primary-dark': ramp.orange[500],
   'brand-primary-subtle': 'rgba(255, 121, 0, 0.08)',
-  'brand-primary-hover': p.accent[500],
-  'brand-primary-active': p.accent[600],
+  'brand-primary-hover': ramp.orange[500],
+  'brand-primary-active': ramp.orange[600],
 
-  'brand-secondary': p.steel[500],           // #406D87
-  'brand-secondary-light': p.steel[300],     // #678498
-  'brand-secondary-dark': p.steel[700],      // #32556D
-  'brand-secondary-subtle': 'rgba(64, 109, 135, 0.08)',
-  'brand-secondary-hover': p.steel[600],
-  'brand-secondary-active': p.steel[700],
+  'brand-secondary': ramp.cyan[600],
+  'brand-secondary-light': ramp.cyan[500],
+  'brand-secondary-dark': ramp.cyan[700],
+  'brand-secondary-subtle': 'rgba(48, 123, 155, 0.08)',
+  'brand-secondary-hover': ramp.cyan[700],
+  'brand-secondary-active': ramp.cyan[800],
 
   // Text on brand backgrounds (on-*)
   'on-brand-primary': p.white,
   'on-brand-secondary': p.white,
 
   // Status colors (status-*)
-  'status-success': p.teal[500],             // #14B8A6
-  'status-success-light': p.teal[400],       // #43C6B7
-  'status-success-dark': p.teal[700],        // #0E8074
-  'status-success-subtle': p.teal[50],
-
-  'status-error': p.red[600],                // #D14343
-  'status-error-light': p.red[400],          // #DA6868
-  'status-error-dark': p.red[700],           // #922E2E
-  'status-error-subtle': p.red[50],
-
-  'status-warning': p.amber[500],            // #FFB020
-  'status-warning-light': p.amber[400],      // #FFBF4C
-  'status-warning-dark': p.amber[600],       // #B27B16
-  'status-warning-subtle': p.amber[50],
-
-  'status-info': p.sky[500],                 // #2196F3
-  'status-info-light': p.sky[400],           // #64B6F7
-  'status-info-dark': p.sky[700],            // #0B79D0
-  'status-info-subtle': p.sky[50],
+  'status-success': ramp.green[300],
+  'status-success-light': ramp.green[200],
+  'status-success-dark': ramp.green[600],
+  'status-success-subtle': ramp.green[50],
+
+  'status-error': ramp.red[600],
+  'status-error-light': ramp.red[500],
+  'status-error-dark': ramp.red[700],
+  'status-error-subtle': ramp.red[50],
+
+  'status-error-vivid': p.redVivid[500],     // vivid alert red
+  'status-error-vivid-light': p.redVivid[400],
+  'status-error-vivid-dark': p.redVivid[700],
+  'status-error-vivid-subtle': 'rgba(255, 71, 87, 0.12)',
+
+  'status-warning': ramp.amber[300],
+  'status-warning-light': ramp.amber[200],
+  'status-warning-dark': ramp.amber[500],
+  'status-warning-subtle': ramp.amber[50],
+
+  'status-info': ramp.blue[500],
+  'status-info-light': ramp.blue[300],
+  'status-info-dark': ramp.blue[600],
+  'status-info-subtle': ramp.blue[50],
 
   // Text on status backgrounds (on-status-*)
   'on-status-success': p.white,
@@ -85,16 +90,16 @@ export const semanticColorsLight = {
 
   // 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
+  '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',
@@ -107,8 +112,8 @@ export const semanticColorsLight = {
 
   // Surface colors (surface-*) - for elevated containers
   'surface-base': p.white,
-  'surface-elevated': p.neutral[50],          // #FAFAFA - slightly off-white for elevated cards
-  'surface-raised': p.neutral[100],           // #F3F4F6 - light gray for raised cards
+  'surface-elevated': p.neutral[50],          // slightly off-white for elevated cards
+  'surface-raised': p.neutral[100],           // light gray for raised cards
   'surface-overlay': p.white,
   'surface-input': p.neutral[50],             // Input field background (filled variant)
 
@@ -121,6 +126,7 @@ export const semanticColorsLight = {
   'border-default': '#E8E9EB',
   'border-subtle': p.neutral[100],
   'border-strong': p.neutral[300],
+  'border-prominent': p.neutral[400],        // high-visibility divider
   'border-focus': p.blue[600],
   'border-input': p.neutral[300],             // Input field border
   'border-input-hover': p.neutral[400],       // Input field border on hover
@@ -146,43 +152,48 @@ export const semanticColorsLight = {
 // Dark mode semantic colors
 export const semanticColorsDark = {
   // Brand colors stay the same in dark mode
-  'brand-primary': p.accent[400],
-  'brand-primary-light': p.accent[200],
-  'brand-primary-dark': p.accent[700],
+  'brand-primary': ramp.orange[400],
+  'brand-primary-light': ramp.orange[300],
+  'brand-primary-dark': ramp.orange[500],
   'brand-primary-subtle': 'rgba(255, 121, 0, 0.12)',
-  'brand-primary-hover': p.accent[300],
-  'brand-primary-active': p.accent[200],
+  'brand-primary-hover': ramp.orange[300],
+  'brand-primary-active': ramp.orange[200],
 
-  'brand-secondary': p.steel[500],
-  'brand-secondary-light': p.steel[300],
-  'brand-secondary-dark': p.steel[700],
-  'brand-secondary-subtle': 'rgba(64, 109, 135, 0.12)',
-  'brand-secondary-hover': p.steel[400],
-  'brand-secondary-active': p.steel[300],
+  'brand-secondary': ramp.cyan[600],
+  'brand-secondary-light': ramp.cyan[500],
+  'brand-secondary-dark': ramp.cyan[700],
+  'brand-secondary-subtle': 'rgba(48, 123, 155, 0.12)',
+  'brand-secondary-hover': ramp.cyan[500],
+  'brand-secondary-active': ramp.cyan[400],
 
   // Text on brand backgrounds
   'on-brand-primary': p.white,
   'on-brand-secondary': p.white,
 
   // Status colors
-  'status-success': p.teal[500],
-  'status-success-light': p.teal[400],
-  'status-success-dark': p.teal[700],
-  'status-success-subtle': 'rgba(20, 184, 166, 0.12)',
-
-  'status-error': p.red[600],
-  'status-error-light': p.red[400],
-  'status-error-dark': p.red[700],
+  'status-success': ramp.green[300],
+  'status-success-light': ramp.green[200],
+  'status-success-dark': ramp.green[600],
+  'status-success-subtle': 'rgba(46, 213, 115, 0.12)',
+
+  'status-error': ramp.red[600],
+  'status-error-light': ramp.red[500],
+  'status-error-dark': ramp.red[700],
   'status-error-subtle': 'rgba(209, 67, 67, 0.12)',
 
-  'status-warning': p.amber[500],
-  'status-warning-light': p.amber[400],
-  'status-warning-dark': p.amber[600],
-  'status-warning-subtle': 'rgba(255, 176, 32, 0.12)',
+  'status-error-vivid': p.redVivid[500],
+  'status-error-vivid-light': p.redVivid[400],
+  'status-error-vivid-dark': p.redVivid[700],
+  'status-error-vivid-subtle': 'rgba(255, 71, 87, 0.12)',
 
-  'status-info': p.sky[500],
-  'status-info-light': p.sky[400],
-  'status-info-dark': p.sky[700],
+  'status-warning': ramp.amber[300],
+  'status-warning-light': ramp.amber[200],
+  'status-warning-dark': ramp.amber[500],
+  'status-warning-subtle': 'rgba(249, 180, 21, 0.12)',
+
+  'status-info': ramp.blue[500],
+  'status-info-light': ramp.blue[300],
+  'status-info-dark': ramp.blue[600],
   'status-info-subtle': 'rgba(33, 150, 243, 0.12)',
 
   // Text on status backgrounds
@@ -229,21 +240,22 @@ export const semanticColorsDark = {
   'text-link-hover': p.blue[400],
 
   // Surface colors - dark backgrounds
-  'surface-base': p.charcoal[700],         // #161616 - main surface
-  'surface-elevated': p.charcoal[600],     // #191919 - elevated surface
-  'surface-raised': p.charcoal[500],       // #1C1C1C - raised surface
-  'surface-overlay': p.charcoal[600],      // #191919 - overlay surface
-  'surface-input': p.charcoal[600],        // #191919 - input surface
+  'surface-base': p.charcoal[700],         // main surface
+  'surface-elevated': p.charcoal[600],     // elevated surface
+  'surface-raised': p.charcoal[500],       // raised surface
+  'surface-overlay': p.charcoal[600],      // overlay surface
+  'surface-input': p.charcoal[600],        // input surface
 
   // Background colors
-  'background-base': p.charcoal[900],      // #101010 - darkest charcoal
-  'background-default': p.charcoal[700],    // #161616 - main background
-  'background-subtle': p.charcoal[500],     // #1C1C1C - subtle background
+  'background-base': p.charcoal[900],      // darkest charcoal
+  'background-default': p.charcoal[700],    // main background
+  'background-subtle': p.charcoal[500],     // subtle background
 
   // Border colors
-  'border-default': p.charcoal[400],       // #1F1F1F - default border
-  'border-subtle': p.charcoal[500],        // #1C1C1C - subtle border
-  'border-strong': p.charcoal[300],        // #2C2C2C - strong border
+  'border-default': p.charcoal[400],       // default border
+  'border-subtle': p.charcoal[500],        // subtle border
+  'border-strong': p.charcoal[300],        // strong border
+  'border-prominent': p.charcoal[200],     // high-visibility divider
   'border-focus': '#828DF8',
   'border-input': p.neutral[600],
   'border-input-hover': p.neutral[500],
@@ -259,7 +271,7 @@ export const semanticColorsDark = {
   'interactive-disabled-text': 'rgba(255, 255, 255, 0.26)',
 
   // Divider
-  'divider': p.charcoal[400],              // #1F1F1F - divider color
+  'divider': p.charcoal[400],              // divider color
 
   // Avatar default
   'avatar-background': p.neutral[600],

package/src/theme/workout-tokens.ts

@@ -2,31 +2,32 @@
  * Workout-specific tokens not yet in the main Tailwind config.
  * Use these inline instead of Tailwind classes.
  */
+import { divergingScale, sequentialEffort, primitiveRamps as ramp } from './tokens/primitives'
+
 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. Each component maps its own
-  // thresholds onto these four colors. Kept as vivid data-viz values (distinct
-  // from the muted status tokens) and theme-independent, so — like the heatmap
-  // scale below — they are consumed inline as a JS import rather than CSS vars.
-  // A JS import also resolves on native RN, unlike var(--…) strings.
+  // 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).
   scale: {
-    green: '#2ed573',
-    yellow: '#ffd43b',
-    orange: '#ffa502',
-    red: '#ff4757',
+    green: sequentialEffort[0],
+    yellow: sequentialEffort[1],
+    orange: sequentialEffort[2], // gold band
+    red: sequentialEffort[4],
   },
 
-  // 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
+    none: '#E0E0E0', // 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
   },
 
   // Badge border-radius (rounded-sm is 4px, we need 2px)
@@ -36,12 +37,12 @@ export const WORKOUT_TOKENS = {
   // components use the CSS custom properties (var(--color-surface-*/border-*))
   // directly. Only theme-independent data-viz values remain below.
 
-  // Intensity bar specific
+  // Intensity bar specific — over-target tiers deepen along the red ramp.
   intensity: {
     track: '#333333',
-    over1: '#D14343',
-    over2: '#A62626',
-    over3: '#7A1C1C',
+    over1: ramp.red[600], // matches status-error
+    over2: ramp.red[700],
+    over3: ramp.red[800],
     targetLine: 'rgba(33, 150, 243, 0.5)',
     atTargetGlow:
       '0 0 5px 1px rgba(33, 150, 243, 0.35), 0 0 10px 3px rgba(33, 150, 243, 0.15)',

package/src/utils/avatar-color.ts

@@ -1,6 +1,6 @@
-const AVATAR_COLORS = [
-  '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD', '#98D8C8'
-]
+import { AVATAR_CATEGORICAL_COLORS } from '../theme/extracted-colors-ui'
+
+const AVATAR_COLORS = AVATAR_CATEGORICAL_COLORS
 
 export function avatarColor(name: string): string {
   let hash = 0

package/tailwind.config.js

@@ -44,6 +44,12 @@ module.exports = {
             dark: 'var(--color-status-error-dark)',
             subtle: 'var(--color-status-error-subtle)',
           },
+          'error-vivid': {
+            DEFAULT: 'var(--color-status-error-vivid)',
+            light: 'var(--color-status-error-vivid-light)',
+            dark: 'var(--color-status-error-vivid-dark)',
+            subtle: 'var(--color-status-error-vivid-subtle)',
+          },
           warning: {
             DEFAULT: 'var(--color-status-warning)',
             light: 'var(--color-status-warning-light)',
@@ -132,6 +138,7 @@ module.exports = {
           DEFAULT: 'var(--color-border-default)',
           subtle: 'var(--color-border-subtle)',
           strong: 'var(--color-border-strong)',
+          prominent: 'var(--color-border-prominent)',
           focus: 'var(--color-border-focus)',
           input: {
             DEFAULT: 'var(--color-border-input)',
@@ -184,10 +191,10 @@ module.exports = {
         xl: '0px 20px 25px rgba(100, 116, 139, 0.12)',
         // Glow shadows (colored radial glow for emphasis)
         'glow-primary': '0 0 20px 2px rgba(var(--color-brand-primary-rgb, 255, 121, 0), 0.4)',
-        'glow-secondary': '0 0 20px 2px rgba(var(--color-brand-secondary-rgb, 64, 109, 135), 0.4)',
-        'glow-success': '0 0 20px 2px rgba(var(--color-status-success-rgb, 20, 184, 166), 0.35)',
+        'glow-secondary': '0 0 20px 2px rgba(var(--color-brand-secondary-rgb, 48, 123, 155), 0.4)',
+        'glow-success': '0 0 20px 2px rgba(var(--color-status-success-rgb, 46, 213, 115), 0.35)',
         'glow-error': '0 0 20px 2px rgba(var(--color-status-error-rgb, 209, 67, 67), 0.4)',
-        'glow-warning': '0 0 20px 2px rgba(var(--color-status-warning-rgb, 255, 176, 32), 0.35)',
+        'glow-warning': '0 0 20px 2px rgba(var(--color-status-warning-rgb, 249, 180, 21), 0.35)',
         'glow-info': '0 0 20px 2px rgba(var(--color-status-info-rgb, 33, 150, 243), 0.35)',
         'glow-sm': '0 0 12px 0px',
         'glow-md': '0 0 20px 2px',