@titan-design/react-ui 0.9.3 → 0.10.0

package/src/theme/ColorSystem.stories.tsx

@@ -11,6 +11,9 @@ import {
   sequentialEffort,
   bestTextColor,
 } from './tokens/primitives'
+import { getSemanticColors } from './tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 const meta: Meta = {
   title: 'Foundations/Color/System',
@@ -23,9 +26,13 @@ const hexToRgb = (hex: string): [number, number, number] => {
   const h = hex.replace('#', '')
   return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16) / 255) as [number, number, number]
 }
-const toHex = (v: number) => Math.round(Math.min(1, Math.max(0, v)) * 255).toString(16).padStart(2, '0')
+const toHex = (v: number) =>
+  Math.round(Math.min(1, Math.max(0, v)) * 255)
+    .toString(16)
+    .padStart(2, '0')
 const lin = (c: number) => (c >= 0.04045 ? ((c + 0.055) / 1.055) ** 2.4 : c / 12.92)
-const gamma = (c: number) => (c >= 0.0031308 ? 1.055 * Math.max(0, c) ** (1 / 2.4) - 0.055 : 12.92 * c)
+const gamma = (c: number) =>
+  c >= 0.0031308 ? 1.055 * Math.max(0, c) ** (1 / 2.4) - 0.055 : 12.92 * c
 const relLum = (hex: string) => {
   const [r, g, b] = hexToRgb(hex).map(lin)
   return 0.2126 * r + 0.7152 * g + 0.0722 * b
@@ -34,11 +41,16 @@ const contrast = (a: string, b: string) => {
   const [l1, l2] = [relLum(a), relLum(b)].sort((x, y) => y - x)
   return (l1 + 0.05) / (l2 + 0.05)
 }
-const bestText = (hex: string) => (contrast(hex, '#000000') >= contrast(hex, '#FFFFFF') ? '#000000' : '#FFFFFF')
+const bestText = (hex: string) =>
+  contrast(hex, '#000000') >= contrast(hex, '#FFFFFF') ? '#000000' : '#FFFFFF'
 // Machado-2009 dichromacy simulation (severity 1.0)
 const CVD = {
-  deuteranopia: [0.367322, 0.860646, -0.227968, 0.280085, 0.672501, 0.047413, -0.01182, 0.04294, 0.968881],
-  protanopia: [0.152286, 1.052583, -0.204868, 0.114503, 0.786281, 0.099216, -0.003882, -0.048116, 1.051998],
+  deuteranopia: [
+    0.367322, 0.860646, -0.227968, 0.280085, 0.672501, 0.047413, -0.01182, 0.04294, 0.968881,
+  ],
+  protanopia: [
+    0.152286, 1.052583, -0.204868, 0.114503, 0.786281, 0.099216, -0.003882, -0.048116, 1.051998,
+  ],
 } as const
 const simulate = (M: readonly number[], hex: string) => {
   const [r, g, b] = hexToRgb(hex).map(lin)
@@ -62,7 +74,16 @@ function Ramp({ name, ramp }: { name: string; ramp: Record<number, string> }) {
       <Text className="text-text-secondary text-xs" style={{ width: 150 }}>
         {name}
       </Text>
-      <View style={{ flexDirection: 'row', flex: 1, borderRadius: 6, overflow: 'hidden', borderWidth: 1, borderColor: '#2C2C2C' }}>
+      <View
+        style={{
+          flexDirection: 'row',
+          flex: 1,
+          borderRadius: 6,
+          overflow: 'hidden',
+          borderWidth: 1,
+          borderColor: '#2C2C2C',
+        }}
+      >
         {STEPS.map((s) => (
           <View key={s} style={{ flex: 1, height: 30, backgroundColor: ramp[s] }} />
         ))}
@@ -86,9 +107,15 @@ function Chip({ hex, label, sub }: { hex: string; label?: string; sub?: string }
           justifyContent: 'center',
         }}
       >
-        {label ? <Text style={{ color: bestText(hex), fontSize: 11, fontWeight: '700' }}>{label}</Text> : null}
+        {label ? (
+          <Text style={{ color: bestText(hex), fontSize: 11, fontWeight: '700' }}>{label}</Text>
+        ) : null}
       </View>
-      {sub ? <Text className="text-text-secondary" style={{ fontSize: 8, marginTop: 2 }}>{sub}</Text> : null}
+      {sub ? (
+        <Text className="text-text-secondary" style={{ fontSize: 8, marginTop: 2 }}>
+          {sub}
+        </Text>
+      ) : null}
     </View>
   )
 }
@@ -124,8 +151,8 @@ export const Overview: StoryObj = {
     <View style={{ padding: 24, gap: 6 }}>
       <Text className="text-2xl font-bold text-text-primary mb-1">Color System</Text>
       <Text className="text-text-secondary mb-4">
-        Seven OKLCH tonal ramps and an ordered, colorblind-safe categorical palette. Ramps are the single
-        source of truth; the categorical references ramp steps.
+        Seven OKLCH tonal ramps and an ordered, colorblind-safe categorical palette. Ramps are the
+        single source of truth; the categorical references ramp steps.
       </Text>
 
       <SectionTitle>Tonal ramps</SectionTitle>
@@ -148,12 +175,20 @@ export const Overview: StoryObj = {
       <SectionTitle>Categorical — ordered, nested, CVD-safe to 6</SectionTitle>
       {(['default', 'dark'] as const).map((variant) => (
         <View key={variant} style={{ marginBottom: 10 }}>
-          <Text className="text-text-secondary text-xs mb-1" style={{ textTransform: 'capitalize' }}>
+          <Text
+            className="text-text-secondary text-xs mb-1"
+            style={{ textTransform: 'capitalize' }}
+          >
             {variant}
           </Text>
           <View style={{ flexDirection: 'row', gap: 6 }}>
             {categoricalPalette[variant].map((hex, i) => (
-              <Chip key={i} hex={hex} label={`${i + 1}`} sub={i < CATEGORICAL_CVD_SAFE_MAX ? undefined : 'ext'} />
+              <Chip
+                key={i}
+                hex={hex}
+                label={`${i + 1}`}
+                sub={i < CATEGORICAL_CVD_SAFE_MAX ? undefined : 'ext'}
+              />
             ))}
           </View>
         </View>
@@ -166,19 +201,45 @@ export const Overview: StoryObj = {
       </Text>
       <View style={{ flexDirection: 'row', gap: 6, marginBottom: 12 }}>
         {['under', 'maint', 'optimal', 'approach', 'over'].map((l, i) => (
-          <View key={l} style={{ flex: 1, height: 40, borderRadius: 6, backgroundColor: divergingScale[i], alignItems: 'center', justifyContent: 'center' }}>
-            <Text style={{ color: bestTextColor(divergingScale[i]), fontSize: 10, fontWeight: '700' }}>{l}</Text>
+          <View
+            key={l}
+            style={{
+              flex: 1,
+              height: 40,
+              borderRadius: 6,
+              backgroundColor: divergingScale[i],
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <Text
+              style={{ color: bestTextColor(divergingScale[i]), fontSize: 10, fontWeight: '700' }}
+            >
+              {l}
+            </Text>
           </View>
         ))}
       </View>
       <Text className="text-text-secondary text-xs mb-2">
-        Sequential effort (low → high) — an ordinal green→yellow→orange→red scale that IntensityBar uses
-        in full and VelocityStrip/RPE sub-samples.
+        Sequential effort (low → high) — an ordinal green→yellow→orange→red scale that IntensityBar
+        uses in full and VelocityStrip/RPE sub-samples.
       </Text>
       <View style={{ flexDirection: 'row', gap: 4, marginBottom: 4 }}>
         {sequentialEffort.map((hex, i) => (
-          <View key={i} style={{ flex: 1, height: 34, borderRadius: 5, backgroundColor: hex, alignItems: 'center', justifyContent: 'center' }}>
-            <Text style={{ color: bestTextColor(hex), fontSize: 10, fontWeight: '700' }}>{i + 1}</Text>
+          <View
+            key={i}
+            style={{
+              flex: 1,
+              height: 34,
+              borderRadius: 5,
+              backgroundColor: hex,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <Text style={{ color: bestTextColor(hex), fontSize: 10, fontWeight: '700' }}>
+              {i + 1}
+            </Text>
           </View>
         ))}
       </View>
@@ -189,11 +250,32 @@ export const Overview: StoryObj = {
         <Demo label="BodyMap · training status">
           <View style={{ flexDirection: 'row', flexWrap: 'wrap', width: 132, gap: 4 }}>
             {[
-              ['Chest', 4], ['Quads', 2], ['Back', 3],
-              ['Delts', 0], ['Biceps', 4], ['Calves', 1],
+              ['Chest', 4],
+              ['Quads', 2],
+              ['Back', 3],
+              ['Delts', 0],
+              ['Biceps', 4],
+              ['Calves', 1],
             ].map(([m, idx]) => (
-              <View key={m as string} style={{ width: 40, backgroundColor: D3_STATUS[idx as number], borderRadius: 5, paddingVertical: 6 }}>
-                <Text style={{ color: bestTextColor(D3_STATUS[idx as number]), fontSize: 8, fontWeight: '700', textAlign: 'center' }}>{m as string}</Text>
+              <View
+                key={m as string}
+                style={{
+                  width: 40,
+                  backgroundColor: D3_STATUS[idx as number],
+                  borderRadius: 5,
+                  paddingVertical: 6,
+                }}
+              >
+                <Text
+                  style={{
+                    color: bestTextColor(D3_STATUS[idx as number]),
+                    fontSize: 8,
+                    fontWeight: '700',
+                    textAlign: 'center',
+                  }}
+                >
+                  {m as string}
+                </Text>
               </View>
             ))}
           </View>
@@ -201,10 +283,22 @@ export const Overview: StoryObj = {
         {/* StatusDot — semantic */}
         <Demo label="StatusDot · semantic">
           <View style={{ gap: 6 }}>
-            {[['ok', SEM.success], ['warn', SEM.warning], ['err', SEM.error], ['neutral', SEM.neutral]].map(([l, c]) => (
-              <View key={l as string} style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                <View style={{ width: 12, height: 12, borderRadius: 6, backgroundColor: c as string }} />
-                <Text className="text-text-secondary" style={{ fontSize: 11 }}>{l as string}</Text>
+            {[
+              ['ok', SEM.success],
+              ['warn', SEM.warning],
+              ['err', SEM.error],
+              ['neutral', SEM.neutral],
+            ].map(([l, c]) => (
+              <View
+                key={l as string}
+                style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}
+              >
+                <View
+                  style={{ width: 12, height: 12, borderRadius: 6, backgroundColor: c as string }}
+                />
+                <Text className="text-text-secondary" style={{ fontSize: 11 }}>
+                  {l as string}
+                </Text>
               </View>
             ))}
           </View>
@@ -212,9 +306,25 @@ export const Overview: StoryObj = {
         {/* WorkoutPill — status */}
         <Demo label="WorkoutPill">
           <View style={{ flexDirection: 'row', gap: 6, flexWrap: 'wrap', maxWidth: 220 }}>
-            {[['Done', SEM.success], ['Now', SEM.brand], ['Next', SEM.neutral], ['Deload', SEM.deload]].map(([t, c]) => (
-              <View key={t as string} style={{ borderRadius: 99, borderWidth: 1, borderColor: c as string, paddingHorizontal: 10, paddingVertical: 3 }}>
-                <Text style={{ color: c as string, fontSize: 11, fontWeight: '700' }}>{t as string}</Text>
+            {[
+              ['Done', SEM.success],
+              ['Now', SEM.brand],
+              ['Next', SEM.neutral],
+              ['Deload', SEM.deload],
+            ].map(([t, c]) => (
+              <View
+                key={t as string}
+                style={{
+                  borderRadius: 99,
+                  borderWidth: 1,
+                  borderColor: c as string,
+                  paddingHorizontal: 10,
+                  paddingVertical: 3,
+                }}
+              >
+                <Text style={{ color: c as string, fontSize: 11, fontWeight: '700' }}>
+                  {t as string}
+                </Text>
               </View>
             ))}
           </View>
@@ -222,10 +332,22 @@ export const Overview: StoryObj = {
         {/* StrengthTrend legend — series → semantic */}
         <Demo label="StrengthTrend · series">
           <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
-            {[['1RM', SEM.brand], ['vel', SEM.success], ['miss', SEM.error], ['RPE', SEM.warning]].map(([l, c]) => (
-              <View key={l as string} style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
-                <View style={{ width: 14, height: 3, backgroundColor: c as string, borderRadius: 2 }} />
-                <Text className="text-text-secondary" style={{ fontSize: 10 }}>{l as string}</Text>
+            {[
+              ['1RM', SEM.brand],
+              ['vel', SEM.success],
+              ['miss', SEM.error],
+              ['RPE', SEM.warning],
+            ].map(([l, c]) => (
+              <View
+                key={l as string}
+                style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}
+              >
+                <View
+                  style={{ width: 14, height: 3, backgroundColor: c as string, borderRadius: 2 }}
+                />
+                <Text className="text-text-secondary" style={{ fontSize: 10 }}>
+                  {l as string}
+                </Text>
               </View>
             ))}
           </View>
@@ -234,28 +356,66 @@ export const Overview: StoryObj = {
         <Demo label="Treemap · categorical">
           <View style={{ flexDirection: 'row', flexWrap: 'wrap', width: 140, gap: 2 }}>
             {[46, 30, 30, 24, 24, 24, 20].map((h, i) => (
-              <View key={i} style={{ height: h, flexGrow: 1, flexBasis: h > 40 ? 60 : 40, backgroundColor: getCategoricalColor(i), borderRadius: 3 }} />
+              <View
+                key={i}
+                style={{
+                  height: h,
+                  flexGrow: 1,
+                  flexBasis: h > 40 ? 60 : 40,
+                  backgroundColor: getCategoricalColor(i),
+                  borderRadius: 3,
+                }}
+              />
             ))}
           </View>
         </Demo>
         {/* Spinner */}
         <Demo label="Spinner">
-          <View style={{ width: 24, height: 24, borderRadius: 12, borderWidth: 3, borderColor: '#2C2C2C', borderTopColor: SEM.spinner }} />
+          <View
+            style={{
+              width: 24,
+              height: 24,
+              borderRadius: 12,
+              borderWidth: 3,
+              borderColor: '#2C2C2C',
+              borderTopColor: SEM.spinner,
+            }}
+          />
         </Demo>
         {/* IntensityBar — full effort scale */}
         <Demo label="IntensityBar · effort">
           <View style={{ flexDirection: 'row', gap: 2, width: 132 }}>
             {sequentialEffort.map((hex, i) => (
-              <View key={i} style={{ flex: 1, height: 20, backgroundColor: hex, borderRadius: 2 }} />
+              <View
+                key={i}
+                style={{ flex: 1, height: 20, backgroundColor: hex, borderRadius: 2 }}
+              />
             ))}
           </View>
         </Demo>
         {/* VelocityStrip / RPE — effort sub-sample */}
         <Demo label="VelocityStrip · RPE">
           <View style={{ flexDirection: 'row', gap: 3 }}>
-            {[sequentialEffort[0], sequentialEffort[2], sequentialEffort[3], sequentialEffort[5]].map((hex, i) => (
-              <View key={i} style={{ width: 30, height: 26, borderRadius: 4, backgroundColor: hex, alignItems: 'center', justifyContent: 'center' }}>
-                <Text style={{ color: bestTextColor(hex), fontSize: 9, fontWeight: '700' }}>{['S', 'M', 'F', 'X'][i]}</Text>
+            {[
+              sequentialEffort[0],
+              sequentialEffort[2],
+              sequentialEffort[3],
+              sequentialEffort[5],
+            ].map((hex, i) => (
+              <View
+                key={i}
+                style={{
+                  width: 30,
+                  height: 26,
+                  borderRadius: 4,
+                  backgroundColor: hex,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <Text style={{ color: bestTextColor(hex), fontSize: 9, fontWeight: '700' }}>
+                  {['S', 'M', 'F', 'X'][i]}
+                </Text>
               </View>
             ))}
           </View>
@@ -267,8 +427,10 @@ export const Overview: StoryObj = {
 
 function Demo({ label, children }: { label: string; children: ReactNode }) {
   return (
-    <View style={{ padding: 10, backgroundColor: '#1A1A1A', borderRadius: 8 }}>
-      <Text className="text-text-secondary" style={{ fontSize: 9, marginBottom: 6 }}>{label}</Text>
+    <View style={{ padding: 10, backgroundColor: t['surface-raised'], borderRadius: 8 }}>
+      <Text className="text-text-secondary" style={{ fontSize: 9, marginBottom: 6 }}>
+        {label}
+      </Text>
       {children}
     </View>
   )
@@ -279,8 +441,9 @@ export const Accessibility: StoryObj = {
     <View style={{ padding: 24 }}>
       <Text className="text-2xl font-bold text-text-primary mb-1">Categorical Accessibility</Text>
       <Text className="text-text-secondary mb-5">
-        In-place text contrast and colorblind simulation for the categorical series. Converging strips across
-        two swatches signal a collision for that viewer; all pairs hold ΔE ≥ 8 through the first {CATEGORICAL_CVD_SAFE_MAX}.
+        In-place text contrast and colorblind simulation for the categorical series. Converging
+        strips across two swatches signal a collision for that viewer; all pairs hold ΔE ≥ 8 through
+        the first {CATEGORICAL_CVD_SAFE_MAX}.
       </Text>
 
       {(['default', 'dark'] as const).map((variant) => {
@@ -288,14 +451,26 @@ export const Accessibility: StoryObj = {
         const textColor = variant === 'dark' ? '#FFFFFF' : '#000000'
         return (
           <View key={variant} style={{ marginBottom: 22 }}>
-            <Text className="text-lg font-bold text-text-primary mb-2" style={{ textTransform: 'capitalize' }}>
+            <Text
+              className="text-lg font-bold text-text-primary mb-2"
+              style={{ textTransform: 'capitalize' }}
+            >
               {variant}
             </Text>
             {/* swatches with in-place text + contrast ratio */}
             <View style={{ flexDirection: 'row', gap: 6, marginBottom: 6 }}>
               {colors.map((hex, i) => (
                 <View key={i} style={{ alignItems: 'center' }}>
-                  <View style={{ width: 56, height: 40, borderRadius: 6, backgroundColor: hex, alignItems: 'center', justifyContent: 'center' }}>
+                  <View
+                    style={{
+                      width: 56,
+                      height: 40,
+                      borderRadius: 6,
+                      backgroundColor: hex,
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }}
+                  >
                     <Text style={{ color: textColor, fontSize: 11, fontWeight: '700' }}>Aa</Text>
                   </View>
                   <Text className="text-text-secondary" style={{ fontSize: 8, marginTop: 2 }}>
@@ -307,10 +482,20 @@ export const Accessibility: StoryObj = {
             {/* CVD simulation strips */}
             {(['deuteranopia', 'protanopia'] as const).map((mode) => (
               <View key={mode} style={{ flexDirection: 'row', alignItems: 'center', marginTop: 3 }}>
-                <Text className="text-text-secondary" style={{ fontSize: 9, width: 96 }}>{mode}</Text>
+                <Text className="text-text-secondary" style={{ fontSize: 9, width: 96 }}>
+                  {mode}
+                </Text>
                 <View style={{ flexDirection: 'row', gap: 6 }}>
                   {colors.map((hex, i) => (
-                    <View key={i} style={{ width: 56, height: 14, borderRadius: 3, backgroundColor: simulate(CVD[mode], hex) }} />
+                    <View
+                      key={i}
+                      style={{
+                        width: 56,
+                        height: 14,
+                        borderRadius: 3,
+                        backgroundColor: simulate(CVD[mode], hex),
+                      }}
+                    />
                   ))}
                 </View>
               </View>

package/src/theme/config.ts

@@ -77,10 +77,12 @@ export const lightThemeCSSVars = {
   '--color-surface-base': semanticColorsLight['surface-base'],
   '--color-surface-elevated': semanticColorsLight['surface-elevated'],
   '--color-surface-raised': semanticColorsLight['surface-raised'],
+  '--color-surface-inset': semanticColorsLight['surface-inset'],
 
   '--color-background-base': semanticColorsLight['background-base'],
   '--color-background-default': semanticColorsLight['background-default'],
   '--color-background-subtle': semanticColorsLight['background-subtle'],
+  '--color-background-frame': semanticColorsLight['background-frame'],
 
   '--color-border-default': semanticColorsLight['border-default'],
   '--color-border-subtle': semanticColorsLight['border-subtle'],
@@ -150,6 +152,10 @@ export const lightThemeCSSVars = {
   '--color-border-input-focus': semanticColorsLight['border-input-focus'],
   '--color-border-input-error': semanticColorsLight['border-input-error'],
 
+  '--color-hairline-subtle': semanticColorsLight['hairline-subtle'],
+  '--color-hairline-default': semanticColorsLight['hairline-default'],
+  '--color-hairline-strong': semanticColorsLight['hairline-strong'],
+
   '--color-interactive-disabled-text': semanticColorsLight['interactive-disabled-text'],
 
   '--color-avatar-background': semanticColorsLight['avatar-background'],
@@ -198,10 +204,12 @@ export const darkThemeCSSVars = {
   '--color-surface-base': semanticColorsDark['surface-base'],
   '--color-surface-elevated': semanticColorsDark['surface-elevated'],
   '--color-surface-raised': semanticColorsDark['surface-raised'],
+  '--color-surface-inset': semanticColorsDark['surface-inset'],
 
   '--color-background-base': semanticColorsDark['background-base'],
   '--color-background-default': semanticColorsDark['background-default'],
   '--color-background-subtle': semanticColorsDark['background-subtle'],
+  '--color-background-frame': semanticColorsDark['background-frame'],
 
   '--color-border-default': semanticColorsDark['border-default'],
   '--color-border-subtle': semanticColorsDark['border-subtle'],
@@ -271,6 +279,10 @@ export const darkThemeCSSVars = {
   '--color-border-input-focus': semanticColorsDark['border-input-focus'],
   '--color-border-input-error': semanticColorsDark['border-input-error'],
 
+  '--color-hairline-subtle': semanticColorsDark['hairline-subtle'],
+  '--color-hairline-default': semanticColorsDark['hairline-default'],
+  '--color-hairline-strong': semanticColorsDark['hairline-strong'],
+
   '--color-interactive-disabled-text': semanticColorsDark['interactive-disabled-text'],
 
   '--color-avatar-background': semanticColorsDark['avatar-background'],