@titan-design/react-ui 0.1.0 → 0.2.5

package/src/theme/Colors.stories.tsx

@@ -0,0 +1,258 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { primitiveColors, discreteRainbow } from './tokens/primitives'
+import { semanticColorsLight, semanticColorsDark } from './tokens/semantic'
+
+const meta: Meta = {
+  title: 'Design Tokens/Colors',
+  tags: ['autodocs'],
+}
+
+export default meta
+
+interface ColorSwatchProps {
+  name: string
+  value: string
+  textColor?: string
+}
+
+function ColorSwatch({ name, value, textColor = '#FFFFFF' }: ColorSwatchProps) {
+  const displayValue = value.startsWith('rgba') ? value : value.toUpperCase()
+
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+      <View
+        style={{
+          width: 48,
+          height: 48,
+          borderRadius: 8,
+          backgroundColor: value,
+          borderWidth: 1,
+          borderColor: '#374151',
+        }}
+      />
+      <View>
+        <Text className="font-semibold text-text-primary text-sm">
+          {name}
+        </Text>
+        <Text className="text-text-secondary text-xs">
+          {displayValue}
+        </Text>
+      </View>
+    </View>
+  )
+}
+
+function ColorScale({ name, colors }: { name: string; colors: Record<string | number, string> }) {
+  return (
+    <View style={{ marginBottom: 32 }}>
+      <Text className="text-lg font-bold text-text-primary mb-3">
+        {name}
+      </Text>
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+        {Object.entries(colors).map(([shade, color]) => (
+          <View key={shade} style={{ alignItems: 'center' }}>
+            <View
+              style={{
+                width: 64,
+                height: 64,
+                borderRadius: 8,
+                backgroundColor: color,
+                borderWidth: 1,
+                borderColor: '#374151',
+              }}
+            />
+            <Text className="text-text-secondary text-xs mt-1">
+              {shade}
+            </Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  )
+}
+
+export const PrimitiveColors: StoryObj = {
+  render: () => (
+    <View style={{ padding: 24 }}>
+      <Text className="text-2xl font-bold text-text-primary mb-6">
+        Primitive Colors
+      </Text>
+      <Text className="text-text-secondary mb-6">
+        Raw color values. Use semantic tokens instead when building components.
+      </Text>
+
+      <ColorScale name="Orange (Primary Brand)" colors={primitiveColors.accent} />
+      <ColorScale name="Steel (Secondary Brand)" colors={primitiveColors.steel} />
+      <ColorScale name="Blue" colors={primitiveColors.blue} />
+      <ColorScale name="Green" colors={primitiveColors.green} />
+      <ColorScale name="Teal (Success)" colors={primitiveColors.teal} />
+      <ColorScale name="Red (Error)" colors={primitiveColors.red} />
+      <ColorScale name="Sky (Info)" colors={primitiveColors.sky} />
+      <ColorScale name="Neutral" colors={primitiveColors.neutral} />
+      <ColorScale name="Charcoal (Dark Backgrounds)" colors={primitiveColors.charcoal} />
+    </View>
+  ),
+}
+
+export const BrandColors: StoryObj = {
+  render: () => (
+    <View style={{ padding: 24 }}>
+      <Text className="text-2xl font-bold text-text-primary mb-6">
+        Brand Colors
+      </Text>
+
+      <View style={{ gap: 16 }}>
+        <ColorSwatch name="brand-primary" value={semanticColorsLight['brand-primary']} />
+        <ColorSwatch name="brand-primary-light" value={semanticColorsLight['brand-primary-light']} />
+        <ColorSwatch name="brand-primary-dark" value={semanticColorsLight['brand-primary-dark']} />
+        <ColorSwatch name="brand-secondary" value={semanticColorsLight['brand-secondary']} />
+        <ColorSwatch name="brand-secondary-light" value={semanticColorsLight['brand-secondary-light']} />
+        <ColorSwatch name="brand-secondary-dark" value={semanticColorsLight['brand-secondary-dark']} />
+      </View>
+    </View>
+  ),
+}
+
+export const StatusColors: StoryObj = {
+  render: () => (
+    <View style={{ padding: 24 }}>
+      <Text className="text-2xl font-bold text-text-primary mb-6">
+        Status Colors
+      </Text>
+
+      <View style={{ gap: 16 }}>
+        <ColorSwatch name="status-success" value={semanticColorsLight['status-success']} />
+        <ColorSwatch name="status-error" value={semanticColorsLight['status-error']} />
+        <ColorSwatch name="status-warning" value={semanticColorsLight['status-warning']} />
+        <ColorSwatch name="status-info" value={semanticColorsLight['status-info']} />
+      </View>
+    </View>
+  ),
+}
+
+export const TextColors: StoryObj = {
+  render: () => (
+    <View style={{ padding: 24 }}>
+      <Text className="text-2xl font-bold text-text-primary mb-6">
+        Text Colors (Dark Mode)
+      </Text>
+
+      <View style={{ gap: 16 }}>
+        <ColorSwatch name="text-primary" value={semanticColorsDark['text-primary']} />
+        <ColorSwatch name="text-secondary" value={semanticColorsDark['text-secondary']} />
+        <ColorSwatch name="text-tertiary" value={semanticColorsDark['text-tertiary']} />
+        <ColorSwatch name="text-disabled" value={semanticColorsDark['text-disabled']} />
+        <ColorSwatch name="text-link" value={semanticColorsDark['text-link']} />
+      </View>
+    </View>
+  ),
+}
+
+export const SurfaceColors: StoryObj = {
+  render: () => (
+    <View style={{ padding: 24 }}>
+      <Text className="text-2xl font-bold text-text-primary mb-6">
+        Surface Colors (Dark Mode)
+      </Text>
+
+      <View style={{ gap: 16 }}>
+        <ColorSwatch name="surface-base" value={semanticColorsDark['surface-base']} />
+        <ColorSwatch name="surface-elevated" value={semanticColorsDark['surface-elevated']} />
+        <ColorSwatch name="surface-raised" value={semanticColorsDark['surface-raised']} />
+        <ColorSwatch name="surface-input" value={semanticColorsDark['surface-input']} />
+        <ColorSwatch name="background-base" value={semanticColorsDark['background-base']} />
+        <ColorSwatch name="background-default" value={semanticColorsDark['background-default']} />
+      </View>
+    </View>
+  ),
+}
+
+export const ResultColors: StoryObj = {
+  render: () => (
+    <View style={{ padding: 24 }}>
+      <Text className="text-2xl font-bold text-text-primary mb-6">
+        Result/Outcome Colors
+      </Text>
+      <Text className="text-text-secondary mb-6">
+        Colors for indicating positive, negative, or neutral outcomes.
+      </Text>
+
+      <View style={{ gap: 16 }}>
+        <ColorSwatch name="result-improve" value={semanticColorsLight['result-improve']} />
+        <ColorSwatch name="result-improve-light" value={semanticColorsLight['result-improve-light']} />
+        <ColorSwatch name="result-degrade" value={semanticColorsLight['result-degrade']} />
+        <ColorSwatch name="result-degrade-light" value={semanticColorsLight['result-degrade-light']} />
+        <ColorSwatch name="result-inconclusive" value={semanticColorsLight['result-inconclusive']} />
+        <ColorSwatch name="result-inconclusive-light" value={semanticColorsLight['result-inconclusive-light']} />
+        <ColorSwatch name="result-neutral" value={semanticColorsLight['result-neutral']} />
+      </View>
+    </View>
+  ),
+}
+
+export const DataVisualizationColors: StoryObj = {
+  render: () => (
+    <View style={{ padding: 24 }}>
+      <Text className="text-2xl font-bold text-text-primary mb-6">
+        Data Visualization Colors
+      </Text>
+      <Text className="text-text-secondary mb-6">
+        Colors optimized for charts and data visualization. Based on Paul Tol&apos;s color schemes.
+      </Text>
+
+      <View style={{ gap: 16 }}>
+        <ColorSwatch name="data-1" value={semanticColorsLight['data-1']} />
+        <ColorSwatch name="data-2" value={semanticColorsLight['data-2']} />
+        <ColorSwatch name="data-3" value={semanticColorsLight['data-3']} textColor="#000000" />
+        <ColorSwatch name="data-4" value={semanticColorsLight['data-4']} />
+        <ColorSwatch name="data-5" value={semanticColorsLight['data-5']} />
+        <ColorSwatch name="data-6" value={semanticColorsLight['data-6']} />
+        <ColorSwatch name="data-7" value={semanticColorsLight['data-7']} textColor="#000000" />
+        <ColorSwatch name="data-8" value={semanticColorsLight['data-8']} textColor="#000000" />
+        <ColorSwatch name="data-9" value={semanticColorsLight['data-9']} textColor="#000000" />
+        <ColorSwatch name="data-10" value={semanticColorsLight['data-10']} />
+      </View>
+
+      <Text className="text-lg font-bold text-text-primary mt-8 mb-3">
+        Full Discrete Rainbow Palette
+      </Text>
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 4 }}>
+        {discreteRainbow.map((color, index) => (
+          <View
+            key={index}
+            style={{
+              width: 32,
+              height: 32,
+              borderRadius: 4,
+              backgroundColor: color,
+              borderWidth: 1,
+              borderColor: '#374151',
+            }}
+          />
+        ))}
+      </View>
+    </View>
+  ),
+}
+
+export const BorderColors: StoryObj = {
+  render: () => (
+    <View style={{ padding: 24 }}>
+      <Text className="text-2xl font-bold text-text-primary mb-6">
+        Border Colors (Dark Mode)
+      </Text>
+
+      <View style={{ gap: 16 }}>
+        <ColorSwatch name="border-default" value={semanticColorsDark['border-default']} />
+        <ColorSwatch name="border-subtle" value={semanticColorsDark['border-subtle']} />
+        <ColorSwatch name="border-strong" value={semanticColorsDark['border-strong']} />
+        <ColorSwatch name="border-focus" value={semanticColorsDark['border-focus']} />
+        <ColorSwatch name="border-input" value={semanticColorsDark['border-input']} />
+        <ColorSwatch name="border-input-hover" value={semanticColorsDark['border-input-hover']} />
+        <ColorSwatch name="border-input-focus" value={semanticColorsDark['border-input-focus']} />
+        <ColorSwatch name="border-input-error" value={semanticColorsDark['border-input-error']} />
+      </View>
+    </View>
+  ),
+}

package/src/theme/config.ts

@@ -0,0 +1,193 @@
+/**
+ * Theme Configuration
+ *
+ * Maps semantic tokens to CSS custom properties for runtime theming.
+ * Dark mode is the default theme.
+ */
+
+import { semanticColorsLight, semanticColorsDark, type ThemeMode } from './tokens/semantic'
+
+// CSS custom properties for light mode
+export const lightThemeCSSVars = {
+  '--color-brand-primary': semanticColorsLight['brand-primary'],
+  '--color-brand-primary-light': semanticColorsLight['brand-primary-light'],
+  '--color-brand-primary-dark': semanticColorsLight['brand-primary-dark'],
+  '--color-brand-primary-subtle': semanticColorsLight['brand-primary-subtle'],
+  '--color-brand-secondary': semanticColorsLight['brand-secondary'],
+  '--color-brand-secondary-light': semanticColorsLight['brand-secondary-light'],
+  '--color-brand-secondary-dark': semanticColorsLight['brand-secondary-dark'],
+  '--color-brand-secondary-subtle': semanticColorsLight['brand-secondary-subtle'],
+
+  '--color-on-brand-primary': semanticColorsLight['on-brand-primary'],
+  '--color-on-brand-secondary': semanticColorsLight['on-brand-secondary'],
+
+  '--color-status-success': semanticColorsLight['status-success'],
+  '--color-status-success-subtle': semanticColorsLight['status-success-subtle'],
+  '--color-status-error': semanticColorsLight['status-error'],
+  '--color-status-error-subtle': semanticColorsLight['status-error-subtle'],
+  '--color-status-warning': semanticColorsLight['status-warning'],
+  '--color-status-warning-subtle': semanticColorsLight['status-warning-subtle'],
+  '--color-status-info': semanticColorsLight['status-info'],
+  '--color-status-info-subtle': semanticColorsLight['status-info-subtle'],
+
+  '--color-text-primary': semanticColorsLight['text-primary'],
+  '--color-text-secondary': semanticColorsLight['text-secondary'],
+  '--color-text-tertiary': semanticColorsLight['text-tertiary'],
+  '--color-text-disabled': semanticColorsLight['text-disabled'],
+  '--color-text-inverse': semanticColorsLight['text-inverse'],
+  '--color-text-link': semanticColorsLight['text-link'],
+
+  '--color-surface-base': semanticColorsLight['surface-base'],
+  '--color-surface-elevated': semanticColorsLight['surface-elevated'],
+  '--color-surface-raised': semanticColorsLight['surface-raised'],
+
+  '--color-background-base': semanticColorsLight['background-base'],
+  '--color-background-default': semanticColorsLight['background-default'],
+  '--color-background-subtle': semanticColorsLight['background-subtle'],
+
+  '--color-border-default': semanticColorsLight['border-default'],
+  '--color-border-subtle': semanticColorsLight['border-subtle'],
+  '--color-border-strong': semanticColorsLight['border-strong'],
+  '--color-border-focus': semanticColorsLight['border-focus'],
+
+  '--color-interactive-hover': semanticColorsLight['interactive-hover'],
+  '--color-interactive-focus': semanticColorsLight['interactive-focus'],
+  '--color-interactive-active': semanticColorsLight['interactive-active'],
+  '--color-interactive-selected': semanticColorsLight['interactive-selected'],
+  '--color-interactive-disabled': semanticColorsLight['interactive-disabled'],
+
+  '--color-divider': semanticColorsLight['divider'],
+} as const
+
+// CSS custom properties for dark mode (default)
+export const darkThemeCSSVars = {
+  '--color-brand-primary': semanticColorsDark['brand-primary'],
+  '--color-brand-primary-light': semanticColorsDark['brand-primary-light'],
+  '--color-brand-primary-dark': semanticColorsDark['brand-primary-dark'],
+  '--color-brand-primary-subtle': semanticColorsDark['brand-primary-subtle'],
+  '--color-brand-secondary': semanticColorsDark['brand-secondary'],
+  '--color-brand-secondary-light': semanticColorsDark['brand-secondary-light'],
+  '--color-brand-secondary-dark': semanticColorsDark['brand-secondary-dark'],
+  '--color-brand-secondary-subtle': semanticColorsDark['brand-secondary-subtle'],
+
+  '--color-on-brand-primary': semanticColorsDark['on-brand-primary'],
+  '--color-on-brand-secondary': semanticColorsDark['on-brand-secondary'],
+
+  '--color-status-success': semanticColorsDark['status-success'],
+  '--color-status-success-subtle': semanticColorsDark['status-success-subtle'],
+  '--color-status-error': semanticColorsDark['status-error'],
+  '--color-status-error-subtle': semanticColorsDark['status-error-subtle'],
+  '--color-status-warning': semanticColorsDark['status-warning'],
+  '--color-status-warning-subtle': semanticColorsDark['status-warning-subtle'],
+  '--color-status-info': semanticColorsDark['status-info'],
+  '--color-status-info-subtle': semanticColorsDark['status-info-subtle'],
+
+  '--color-text-primary': semanticColorsDark['text-primary'],
+  '--color-text-secondary': semanticColorsDark['text-secondary'],
+  '--color-text-tertiary': semanticColorsDark['text-tertiary'],
+  '--color-text-disabled': semanticColorsDark['text-disabled'],
+  '--color-text-inverse': semanticColorsDark['text-inverse'],
+  '--color-text-link': semanticColorsDark['text-link'],
+
+  '--color-surface-base': semanticColorsDark['surface-base'],
+  '--color-surface-elevated': semanticColorsDark['surface-elevated'],
+  '--color-surface-raised': semanticColorsDark['surface-raised'],
+
+  '--color-background-base': semanticColorsDark['background-base'],
+  '--color-background-default': semanticColorsDark['background-default'],
+  '--color-background-subtle': semanticColorsDark['background-subtle'],
+
+  '--color-border-default': semanticColorsDark['border-default'],
+  '--color-border-subtle': semanticColorsDark['border-subtle'],
+  '--color-border-strong': semanticColorsDark['border-strong'],
+  '--color-border-focus': semanticColorsDark['border-focus'],
+
+  '--color-interactive-hover': semanticColorsDark['interactive-hover'],
+  '--color-interactive-focus': semanticColorsDark['interactive-focus'],
+  '--color-interactive-active': semanticColorsDark['interactive-active'],
+  '--color-interactive-selected': semanticColorsDark['interactive-selected'],
+  '--color-interactive-disabled': semanticColorsDark['interactive-disabled'],
+
+  '--color-divider': semanticColorsDark['divider'],
+} as const
+
+// Helper to get CSS vars for a theme mode
+export function getThemeCSSVars(mode: ThemeMode) {
+  return mode === 'dark' ? darkThemeCSSVars : lightThemeCSSVars
+}
+
+// Gluestack UI theme configuration
+export const gluestackConfig = {
+  tokens: {
+    colors: {
+      // Map to our semantic colors via CSS vars
+      primary500: 'var(--color-brand-primary)',
+      primary600: 'var(--color-brand-primary-dark)',
+      primary400: 'var(--color-brand-primary-light)',
+
+      secondary500: 'var(--color-brand-secondary)',
+      secondary600: 'var(--color-brand-secondary-dark)',
+      secondary400: 'var(--color-brand-secondary-light)',
+
+      success500: 'var(--color-status-success)',
+      error500: 'var(--color-status-error)',
+      warning500: 'var(--color-status-warning)',
+      info500: 'var(--color-status-info)',
+
+      textLight: 'var(--color-text-primary)',
+      textDark: 'var(--color-text-inverse)',
+
+      backgroundLight: 'var(--color-background-default)',
+      backgroundDark: 'var(--color-surface-base)',
+    },
+    space: {
+      '0': 0,
+      '1': 4,
+      '2': 8,
+      '3': 12,
+      '4': 16,
+      '5': 20,
+      '6': 24,
+      '8': 32,
+      '10': 40,
+      '12': 48,
+      '16': 64,
+      '20': 80,
+      '24': 96,
+    },
+    radii: {
+      none: 0,
+      sm: 4,
+      md: 8,
+      lg: 12,
+      xl: 16,
+      '2xl': 24,
+      full: 9999,
+    },
+    fontSizes: {
+      xs: 12,
+      sm: 14,
+      md: 16,
+      lg: 18,
+      xl: 20,
+      '2xl': 24,
+      '3xl': 30,
+      '4xl': 36,
+      '5xl': 48,
+    },
+  },
+  aliases: {
+    bg: 'backgroundColor',
+    p: 'padding',
+    px: 'paddingHorizontal',
+    py: 'paddingVertical',
+    m: 'margin',
+    mx: 'marginHorizontal',
+    my: 'marginVertical',
+    h: 'height',
+    w: 'width',
+    rounded: 'borderRadius',
+  },
+} as const
+
+export type ThemeConfig = typeof gluestackConfig