@titan-design/react-ui 0.0.2 → 0.1.1

package/src/theme/tokens/semantic.ts

@@ -0,0 +1,381 @@
+/**
+ * Semantic Design Tokens
+ *
+ * Meaningful tokens following DTCG (Design Tokens Community Group) naming conventions.
+ * Pattern: {category}-{intent}-{variant?}-{state?}
+ *
+ * Categories:
+ * - brand-* : Brand colors (primary, secondary, accent)
+ * - status-* : Feedback colors (success, error, warning, info)
+ * - result-* : Outcome indicators (improve, degrade, inconclusive, neutral)
+ * - data-* : Data visualization colors (chart series)
+ * - on-* : Text on colored backgrounds
+ * - surface-* : Elevated containers (NOT "paper")
+ * - background-* : Page backgrounds
+ * - text-* : Text colors
+ * - border-* : Border colors
+ * - interactive-* : Hover/focus/active/disabled states
+ */
+
+import { primitiveColors as p, 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-subtle': 'rgba(255, 121, 0, 0.08)',
+  'brand-primary-hover': p.accent[500],
+  'brand-primary-active': p.accent[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],
+
+  // 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],
+
+  // Text on status backgrounds (on-status-*)
+  'on-status-success': p.white,
+  'on-status-error': p.white,
+  'on-status-warning': p.white,
+  'on-status-info': p.white,
+
+  // Result/outcome indicators (result-*)
+  'result-improve': '#4caf50',                // Green - positive outcome
+  'result-improve-light': 'rgba(76, 175, 80, 0.12)',
+  'result-improve-dark': '#248a24',
+  'result-degrade': '#ef5350',                // Red - negative outcome
+  'result-degrade-light': 'rgba(239, 83, 80, 0.12)',
+  'result-degrade-dark': '#b30000',
+  'result-inconclusive': '#9E9A97',           // Gray - no clear result
+  'result-inconclusive-light': 'rgba(158, 154, 151, 0.12)',
+  'result-neutral': p.neutral[500],           // Neutral baseline
+
+  // Text on result backgrounds (on-result-*)
+  'on-result-improve': p.white,
+  'on-result-degrade': p.white,
+  'on-result-inconclusive': p.white,
+
+  // 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
+
+  // Text colors (text-*)
+  'text-primary': '#121828',
+  'text-secondary': '#65748B',
+  'text-tertiary': p.neutral[400],
+  'text-disabled': 'rgba(55, 65, 81, 0.48)',
+  'text-inverse': p.white,
+  'text-link': p.blue[600],
+  'text-link-hover': p.blue[700],
+
+  // 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-overlay': p.white,
+  'surface-input': p.neutral[50],             // Input field background (filled variant)
+
+  // Background colors (background-*)
+  'background-base': '#EBEBEB',
+  'background-default': p.white,
+  'background-subtle': p.neutral[50],
+
+  // Border colors (border-*)
+  'border-default': '#E8E9EB',
+  'border-subtle': p.neutral[100],
+  'border-strong': p.neutral[300],
+  'border-focus': p.blue[600],
+  'border-input': p.neutral[300],             // Input field border
+  'border-input-hover': p.neutral[400],       // Input field border on hover
+  'border-input-focus': p.blue[600],          // Input field border on focus
+  'border-input-error': p.red[600],           // Input field border on error
+
+  // Interactive states (interactive-*)
+  'interactive-hover': 'rgba(55, 65, 81, 0.04)',
+  'interactive-focus': 'rgba(55, 65, 81, 0.12)',
+  'interactive-active': 'rgba(55, 65, 81, 0.16)',
+  'interactive-selected': 'rgba(55, 65, 81, 0.08)',
+  'interactive-disabled': 'rgba(55, 65, 81, 0.12)',
+  'interactive-disabled-text': 'rgba(55, 65, 81, 0.26)',
+
+  // Divider
+  'divider': '#E8E9EB',
+
+  // Avatar default
+  'avatar-background': p.neutral[500],
+  'avatar-text': p.white,
+} as const
+
+// 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-subtle': 'rgba(255, 121, 0, 0.12)',
+  'brand-primary-hover': p.accent[300],
+  'brand-primary-active': p.accent[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],
+
+  // 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-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-info': p.sky[500],
+  'status-info-light': p.sky[400],
+  'status-info-dark': p.sky[700],
+  'status-info-subtle': 'rgba(33, 150, 243, 0.12)',
+
+  // Text on status backgrounds
+  'on-status-success': p.white,
+  'on-status-error': p.white,
+  'on-status-warning': p.white,
+  'on-status-info': p.white,
+
+  // Result/outcome indicators (result-*)
+  'result-improve': '#4caf50',
+  'result-improve-light': 'rgba(76, 175, 80, 0.16)',
+  'result-improve-dark': '#248a24',
+  'result-degrade': '#ef5350',
+  'result-degrade-light': 'rgba(239, 83, 80, 0.16)',
+  'result-degrade-dark': '#b30000',
+  'result-inconclusive': '#9E9A97',
+  'result-inconclusive-light': 'rgba(158, 154, 151, 0.16)',
+  'result-neutral': p.neutral[400],
+
+  // Text on result backgrounds
+  'on-result-improve': p.white,
+  'on-result-degrade': p.white,
+  'on-result-inconclusive': p.white,
+
+  // Data visualization colors (same in dark mode for consistency)
+  'data-1': discreteRainbow[9],
+  'data-2': discreteRainbow[14],
+  'data-3': discreteRainbow[17],
+  'data-4': discreteRainbow[25],
+  'data-5': discreteRainbow[8],
+  'data-6': discreteRainbow[20],
+  'data-7': discreteRainbow[13],
+  'data-8': discreteRainbow[15],
+  'data-9': discreteRainbow[3],
+  'data-10': discreteRainbow[22],
+
+  // Text colors - inverted for dark mode
+  'text-primary': p.neutral[100],
+  'text-secondary': p.neutral[400],
+  'text-tertiary': p.neutral[500],
+  'text-disabled': 'rgba(255, 255, 255, 0.38)',
+  'text-inverse': p.neutral[900],
+  'text-link': '#828DF8',
+  '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
+
+  // 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
+
+  // 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-focus': '#828DF8',
+  'border-input': p.neutral[600],
+  'border-input-hover': p.neutral[500],
+  'border-input-focus': '#828DF8',
+  'border-input-error': p.red[500],
+
+  // Interactive states
+  'interactive-hover': 'rgba(255, 255, 255, 0.04)',
+  'interactive-focus': 'rgba(255, 255, 255, 0.12)',
+  'interactive-active': 'rgba(255, 255, 255, 0.16)',
+  'interactive-selected': 'rgba(255, 255, 255, 0.08)',
+  'interactive-disabled': 'rgba(255, 255, 255, 0.12)',
+  'interactive-disabled-text': 'rgba(255, 255, 255, 0.26)',
+
+  // Divider
+  'divider': p.charcoal[400],              // #1F1F1F - divider color
+
+  // Avatar default
+  'avatar-background': p.neutral[600],
+  'avatar-text': p.white,
+} as const
+
+// Typography tokens matching existing app
+export const semanticTypography = {
+  // Headings (Space Grotesk)
+  h1: {
+    fontFamily: 'heading',
+    fontSize: '3.5rem',
+    fontWeight: 700,
+    lineHeight: 1.375,
+  },
+  h2: {
+    fontFamily: 'heading',
+    fontSize: '3rem',
+    fontWeight: 700,
+    lineHeight: 1.375,
+  },
+  h3: {
+    fontFamily: 'heading',
+    fontSize: '2.25rem',
+    fontWeight: 700,
+    lineHeight: 1.375,
+  },
+  h4: {
+    fontFamily: 'heading',
+    fontSize: '2rem',
+    fontWeight: 700,
+    lineHeight: 1.375,
+  },
+  h5: {
+    fontFamily: 'heading',
+    fontSize: '1.5rem',
+    fontWeight: 600,
+    lineHeight: 1.375,
+  },
+  h6: {
+    fontFamily: 'heading',
+    fontSize: '1.125rem',
+    fontWeight: 600,
+    lineHeight: 1.375,
+  },
+
+  // Body text (Nunito Sans)
+  body1: {
+    fontFamily: 'body',
+    fontSize: '1rem',
+    fontWeight: 400,
+    lineHeight: 1.5,
+  },
+  body2: {
+    fontFamily: 'body',
+    fontSize: '0.875rem',
+    fontWeight: 400,
+    lineHeight: 1.57,
+  },
+  subtitle1: {
+    fontFamily: 'body',
+    fontSize: '1rem',
+    fontWeight: 500,
+    lineHeight: 1.75,
+  },
+  subtitle2: {
+    fontFamily: 'body',
+    fontSize: '0.875rem',
+    fontWeight: 500,
+    lineHeight: 1.57,
+  },
+  caption: {
+    fontFamily: 'body',
+    fontSize: '0.75rem',
+    fontWeight: 400,
+    lineHeight: 1.66,
+  },
+  overline: {
+    fontFamily: 'body',
+    fontSize: '0.75rem',
+    fontWeight: 600,
+    lineHeight: 2.5,
+    letterSpacing: '0.5px',
+    textTransform: 'uppercase' as const,
+  },
+  button: {
+    fontFamily: 'sans',
+    fontSize: '0.875rem',
+    fontWeight: 600,
+    lineHeight: 1.75,
+  },
+} as const
+
+// Button size tokens
+export const buttonSizes = {
+  sm: {
+    paddingX: '16px',
+    paddingY: '6px',
+    fontSize: '0.875rem',
+  },
+  md: {
+    paddingX: '20px',
+    paddingY: '8px',
+    fontSize: '0.875rem',
+  },
+  lg: {
+    paddingX: '24px',
+    paddingY: '11px',
+    fontSize: '1rem',
+  },
+} as const
+
+// Export type for theme mode
+export type ThemeMode = 'light' | 'dark'
+
+// Helper to get semantic colors based on mode
+export function getSemanticColors(mode: ThemeMode) {
+  return mode === 'dark' ? semanticColorsDark : semanticColorsLight
+}

package/src/types/jest-axe.d.ts

@@ -0,0 +1,16 @@
+declare module 'jest-axe' {
+  export function axe(
+    html: Element | string,
+    options?: Record<string, unknown>
+  ): Promise<{ violations: unknown[] }>
+
+  export const toHaveNoViolations: {
+    toHaveNoViolations(
+      results: { violations: unknown[] }
+    ): { pass: boolean; message(): string }
+  }
+
+  export function configureAxe(
+    options?: Record<string, unknown>
+  ): typeof axe
+}

package/src/types/nativewind.d.ts

@@ -0,0 +1,54 @@
+/**
+ * NativeWind type augmentations
+ *
+ * Adds `className` prop support to React Native components.
+ * This allows Tailwind classes to be used with NativeWind.
+ */
+
+import 'react-native'
+
+declare module 'react-native' {
+  interface ViewProps {
+    className?: string
+  }
+
+  interface TextProps {
+    className?: string
+  }
+
+  interface ImageProps {
+    className?: string
+  }
+
+  interface ScrollViewProps {
+    className?: string
+  }
+
+  interface TextInputProps {
+    className?: string
+  }
+
+  interface TouchableOpacityProps {
+    className?: string
+  }
+
+  interface TouchableHighlightProps {
+    className?: string
+  }
+
+  interface PressableProps {
+    className?: string
+  }
+
+  interface ActivityIndicatorProps {
+    className?: string
+  }
+
+  interface FlatListProps<ItemT> {
+    className?: string
+  }
+
+  interface SectionListProps<ItemT, SectionT> {
+    className?: string
+  }
+}

package/src/utils/cn.ts

@@ -0,0 +1,14 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+/**
+ * Utility function to merge Tailwind CSS classes with proper conflict resolution.
+ * Combines clsx for conditional classes with tailwind-merge for deduplication.
+ *
+ * @example
+ * cn('p-4 bg-red-500', isActive && 'bg-blue-500', className)
+ * // If isActive is true, returns 'p-4 bg-blue-500' (not 'p-4 bg-red-500 bg-blue-500')
+ */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs))
+}

package/src/utils/colors.ts

@@ -0,0 +1,140 @@
+/**
+ * Color utility functions for the design system
+ *
+ * lighten/darken are re-exported from shadows.ts which uses HSV-based
+ * color math for more perceptually consistent results across hues.
+ */
+
+export { lighten, darken } from '../theme/shadows'
+
+export type StatusType = 'success' | 'error' | 'warning' | 'info'
+export type ResultType = 'improve' | 'degrade' | 'inconclusive' | 'neutral'
+
+/**
+ * Get the semantic color token for a status type.
+ *
+ * @param status - The status type
+ * @returns The CSS variable reference for the status color
+ *
+ * @example
+ * const color = getStatusColor('success') // 'var(--color-status-success)'
+ */
+export function getStatusColor(status: StatusType): string {
+  return `var(--color-status-${status})`
+}
+
+/**
+ * Get the semantic color token for a result type.
+ *
+ * @param result - The result type
+ * @returns The CSS variable reference for the result color
+ *
+ * @example
+ * const color = getResultColor('improve') // 'var(--color-result-improve)'
+ */
+export function getResultColor(result: ResultType): string {
+  return `var(--color-result-${result})`
+}
+
+/**
+ * Apply alpha/opacity to a color.
+ * Works with hex colors and rgb values.
+ *
+ * @param color - The color value (hex or rgb)
+ * @param opacity - Opacity value between 0 and 1
+ * @returns The color with alpha applied
+ *
+ * @example
+ * alpha('#5048E5', 0.5) // 'rgba(80, 72, 229, 0.5)'
+ * alpha('rgb(80, 72, 229)', 0.5) // 'rgba(80, 72, 229, 0.5)'
+ */
+export function alpha(color: string, opacity: number): string {
+  // Clamp opacity between 0 and 1
+  const clampedOpacity = Math.max(0, Math.min(1, opacity))
+
+  // Handle hex colors
+  if (color.startsWith('#')) {
+    const hex = color.slice(1)
+    let r: number, g: number, b: number
+
+    if (hex.length === 3) {
+      r = parseInt(hex[0] + hex[0], 16)
+      g = parseInt(hex[1] + hex[1], 16)
+      b = parseInt(hex[2] + hex[2], 16)
+    } else if (hex.length === 6) {
+      r = parseInt(hex.slice(0, 2), 16)
+      g = parseInt(hex.slice(2, 4), 16)
+      b = parseInt(hex.slice(4, 6), 16)
+    } else {
+      return color
+    }
+
+    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`
+  }
+
+  // Handle rgb colors
+  const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/)
+  if (rgbMatch) {
+    const [, r, g, b] = rgbMatch
+    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`
+  }
+
+  // Handle rgba colors - replace the alpha value
+  const rgbaMatch = color.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/)
+  if (rgbaMatch) {
+    const [, r, g, b] = rgbaMatch
+    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`
+  }
+
+  return color
+}
+
+/**
+ * Determine if a color is light or dark.
+ * Useful for determining text color contrast.
+ *
+ * @param color - Hex color value
+ * @returns 'light' or 'dark'
+ *
+ * @example
+ * getLuminance('#FFFFFF') // 'light'
+ * getLuminance('#000000') // 'dark'
+ */
+export function getLuminance(color: string): 'light' | 'dark' {
+  if (!color.startsWith('#')) return 'dark'
+
+  const hex = color.slice(1)
+  let r: number, g: number, b: number
+
+  if (hex.length === 3) {
+    r = parseInt(hex[0] + hex[0], 16)
+    g = parseInt(hex[1] + hex[1], 16)
+    b = parseInt(hex[2] + hex[2], 16)
+  } else if (hex.length === 6) {
+    r = parseInt(hex.slice(0, 2), 16)
+    g = parseInt(hex.slice(2, 4), 16)
+    b = parseInt(hex.slice(4, 6), 16)
+  } else {
+    return 'dark'
+  }
+
+  // Calculate relative luminance using sRGB
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
+
+  return luminance > 0.5 ? 'light' : 'dark'
+}
+
+/**
+ * Get a contrasting text color for a given background.
+ *
+ * @param backgroundColor - The background color (hex)
+ * @returns 'white' or 'black' for contrast
+ *
+ * @example
+ * getContrastText('#5048E5') // 'white'
+ * getContrastText('#FFFFFF') // 'black'
+ */
+export function getContrastText(backgroundColor: string): string {
+  return getLuminance(backgroundColor) === 'light' ? '#000000' : '#FFFFFF'
+}
+