@titan-design/react-ui 0.1.0 → 0.2.5

package/src/theme/global.css

@@ -116,6 +116,29 @@
 
     --color-avatar-background: #4B5563;
     --color-avatar-text: #FFFFFF;
+
+    /* RGB decomposed values for glow shadows */
+    --color-brand-primary-rgb: 255, 121, 0;
+    --color-brand-secondary-rgb: 64, 109, 135;
+    --color-status-success-rgb: 20, 184, 166;
+    --color-status-error-rgb: 209, 67, 67;
+    --color-status-warning-rgb: 255, 176, 32;
+    --color-status-info-rgb: 33, 150, 243;
+    --color-background-base-rgb: 16, 16, 16;
+
+    /* Font families */
+    --font-family-sans: 'Inter';
+    --font-family-body: 'Nunito Sans';
+    --font-family-heading: 'Space Grotesk';
+    --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+
+    /* Animation tokens */
+    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --duration-fast: 150ms;
+    --duration-normal: 250ms;
+    --duration-slow: 400ms;
   }
 
   /* Light mode */
@@ -222,11 +245,34 @@
 
     --color-avatar-background: #6B7280;
     --color-avatar-text: #FFFFFF;
+
+    /* RGB decomposed values for glow shadows */
+    --color-brand-primary-rgb: 255, 121, 0;
+    --color-brand-secondary-rgb: 64, 109, 135;
+    --color-status-success-rgb: 20, 184, 166;
+    --color-status-error-rgb: 209, 67, 67;
+    --color-status-warning-rgb: 255, 176, 32;
+    --color-status-info-rgb: 33, 150, 243;
+    --color-background-base-rgb: 16, 16, 16;
+
+    /* Font families */
+    --font-family-sans: 'Inter';
+    --font-family-body: 'Nunito Sans';
+    --font-family-heading: 'Space Grotesk';
+    --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+
+    /* Animation tokens */
+    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --duration-fast: 150ms;
+    --duration-normal: 250ms;
+    --duration-slow: 400ms;
   }
 
   /* Base styles */
   html {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+    font-family: var(--font-family-sans), -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
@@ -248,3 +294,85 @@
     color: var(--color-text-primary);
   }
 }
+
+@layer utilities {
+  /* Opt-in styled scrollbar — apply to scrollable containers */
+  .scrollbar-styled::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  .scrollbar-styled::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .scrollbar-styled::-webkit-scrollbar-thumb {
+    background: var(--color-border-strong);
+    border-radius: 4px;
+  }
+
+  .scrollbar-styled::-webkit-scrollbar-thumb:hover {
+    background: var(--color-text-tertiary);
+  }
+
+  /* Thin variant */
+  .scrollbar-thin::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    background: var(--color-border-strong);
+    border-radius: 2px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+    background: var(--color-text-tertiary);
+  }
+
+  /* Hide scrollbar but keep scrollable */
+  .scrollbar-none::-webkit-scrollbar {
+    display: none;
+  }
+
+  .scrollbar-none {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  /* Atmosphere: subtle radial gradient washes for ambient color */
+  .atmosphere-warm {
+    position: relative;
+  }
+
+  .atmosphere-warm::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    background:
+      radial-gradient(ellipse 140% 100% at 15% 5%, rgba(var(--color-brand-primary-rgb, 255, 121, 0), 0.06) 0%, transparent 45%),
+      radial-gradient(ellipse 120% 80% at 85% 95%, rgba(var(--color-brand-secondary-rgb, 64, 109, 135), 0.04) 0%, transparent 45%);
+  }
+
+  /* Film grain overlay for vintage texture */
+  .grain {
+    position: relative;
+  }
+
+  .grain::after {
+    content: '';
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 1;
+    opacity: 0.015;
+    mix-blend-mode: overlay;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+  }
+}

package/src/theme/index.ts

@@ -0,0 +1,40 @@
+// Theme exports
+export * from './tokens'
+export * from './config'
+export * from './shadows'
+export * from './elevation'
+
+// Re-export commonly used items
+export { getSemanticColors, type ThemeMode } from './tokens/semantic'
+export { getThemeCSSVars, gluestackConfig } from './config'
+export { 
+  neumorphicShadows,
+  // Color math utilities (HSV-based)
+  lighten,
+  darken,
+  getHoverColors,
+  isDark,
+  hexToRgb,
+  rgbToHsv,
+  // Shadow creation functions
+  createRaisedShadow,
+  createRaisedHoverShadow,
+  createPressedShadow,
+  createPressedHoverShadow,
+  createFlatShadow,
+  shadowColors,
+  type ShadowIntensity,
+  type ShadowSurface,
+} from './shadows'
+export {
+  getElevationConfig,
+  getElevationSurface,
+  getElevationShadow,
+  getBaseSurfaceColor,
+  getValidatedElevation,
+  componentElevationRanges,
+  type ElevationLevel,
+  type ElevationConfig,
+  type ComponentType,
+} from './elevation'
+export * from './presets'

package/src/theme/presets/apply.ts

@@ -0,0 +1,97 @@
+import type { ThemePreset } from './types'
+
+function colorKeyToVar(key: string): string {
+  return `--color-${key}`
+}
+
+function applyColorOverrides(colors: Record<string, string | undefined>, root: HTMLElement) {
+  for (const [key, value] of Object.entries(colors)) {
+    if (value !== undefined) {
+      root.style.setProperty(colorKeyToVar(key), value)
+    }
+  }
+}
+
+function applyFontOverrides(fonts: Record<string, string | undefined>, root: HTMLElement) {
+  const fontVarMap: Record<string, string> = {
+    sans: '--font-family-sans',
+    body: '--font-family-body',
+    heading: '--font-family-heading',
+    mono: '--font-family-mono',
+  }
+  for (const [key, value] of Object.entries(fonts)) {
+    if (value !== undefined && fontVarMap[key]) {
+      root.style.setProperty(fontVarMap[key], value)
+    }
+  }
+}
+
+function injectFontImport(url: string) {
+  if (typeof document === 'undefined') return
+  const existing = document.querySelector(`link[href="${url}"]`)
+  if (existing) return
+  const link = document.createElement('link')
+  link.rel = 'stylesheet'
+  link.href = url
+  document.head.appendChild(link)
+}
+
+export function applyThemePreset(preset: ThemePreset): () => void {
+  if (typeof document === 'undefined') {
+    return () => {}
+  }
+
+  const root = document.documentElement
+  const removals: (() => void)[] = []
+
+  // Inject font import if specified
+  if (preset.fontImport) {
+    injectFontImport(preset.fontImport)
+  }
+
+  // Determine current theme mode
+  const isLight = root.classList.contains('light')
+  const modeColors = isLight ? preset.colors?.light : preset.colors?.dark
+
+  // Apply color overrides
+  if (modeColors) {
+    const previousValues: Record<string, string | null> = {}
+    for (const key of Object.keys(modeColors)) {
+      previousValues[colorKeyToVar(key)] = root.style.getPropertyValue(colorKeyToVar(key)) || null
+    }
+    applyColorOverrides(modeColors, root)
+    removals.push(() => {
+      for (const [varName, prev] of Object.entries(previousValues)) {
+        if (prev === null) {
+          root.style.removeProperty(varName)
+        } else {
+          root.style.setProperty(varName, prev)
+        }
+      }
+    })
+  }
+
+  // Apply font overrides
+  if (preset.fonts) {
+    applyFontOverrides(preset.fonts as Record<string, string | undefined>, root)
+  }
+
+  // Apply root classes
+  if (preset.rootClasses) {
+    for (const cls of preset.rootClasses) {
+      root.classList.add(cls)
+    }
+    removals.push(() => {
+      for (const cls of preset.rootClasses!) {
+        root.classList.remove(cls)
+      }
+    })
+  }
+
+  // Return cleanup function
+  return () => {
+    for (const remove of removals) {
+      remove()
+    }
+  }
+}

package/src/theme/presets/audiobook.ts

@@ -0,0 +1,93 @@
+import type { ThemePreset } from './types'
+
+/**
+ * Audiobook Studio preset.
+ *
+ * Warm copper/patina aesthetic inspired by vintage audio equipment
+ * and reading lounges. Dark-mode only design with editorial typography.
+ */
+export const audiobookPreset: ThemePreset = {
+  name: 'audiobook',
+  description: 'Warm copper/patina theme with editorial typography',
+  fontImport:
+    "https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,600;0,700;1,400&family=Outfit:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap",
+  fonts: {
+    sans: "'Outfit', 'Avenir', 'Avenir Next', system-ui, sans-serif",
+    body: "'Outfit', 'Avenir', 'Avenir Next', system-ui, sans-serif",
+    heading: "'Newsreader', 'Libre Baskerville', Georgia, serif",
+    mono: "'JetBrains Mono', 'SF Mono', 'Fira Code', monospace",
+  },
+  colors: {
+    dark: {
+      // Brand: Copper accent
+      'brand-primary': '#d4782a',
+      'brand-primary-light': '#e8944a',
+      'brand-primary-dark': '#9a4a15',
+      'brand-primary-subtle': 'rgba(212, 120, 42, 0.12)',
+      'brand-primary-hover': '#e8944a',
+      'brand-primary-active': '#f5b070',
+
+      // Brand secondary: Patina/verdigris
+      'brand-secondary': '#3a9b8a',
+      'brand-secondary-light': '#55baa7',
+      'brand-secondary-dark': '#1f5c52',
+      'brand-secondary-subtle': 'rgba(58, 155, 138, 0.12)',
+      'brand-secondary-hover': '#55baa7',
+      'brand-secondary-active': '#7ed4c4',
+
+      'on-brand-primary': '#FFFFFF',
+      'on-brand-secondary': '#FFFFFF',
+
+      // Status colors (audiobook's warmer status palette)
+      'status-success': '#5fb870',
+      'status-error': '#d85c4a',
+      'status-warning': '#d4a43a',
+      'status-info': '#5a8fd4',
+
+      // Text: warm off-whites
+      'text-primary': '#f4f3f1',
+      'text-secondary': '#b5b3af',
+      'text-tertiary': '#7a7875',
+
+      // Surfaces: warm charcoals (not pure gray)
+      'surface-base': '#101114',
+      'surface-elevated': '#15171c',
+      'surface-raised': '#1a1d24',
+      'surface-overlay': '#15171c',
+      'surface-input': '#15171c',
+
+      // Backgrounds
+      'background-base': '#0a0b0d',
+      'background-default': '#101114',
+      'background-subtle': '#1a1d24',
+
+      // Borders
+      'border-default': 'rgba(255, 255, 255, 0.06)',
+      'border-subtle': 'rgba(255, 255, 255, 0.03)',
+      'border-strong': '#2d323d',
+      'border-focus': '#d4782a',
+      'border-input': '#2d323d',
+      'border-input-hover': '#454c5c',
+      'border-input-focus': '#d4782a',
+      'border-input-error': '#d85c4a',
+
+      // Interactive
+      '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)',
+
+      'divider': 'rgba(255, 255, 255, 0.06)',
+
+      // Glow RGB values for shadow utilities
+      'brand-primary-rgb': '212, 120, 42',
+      'brand-secondary-rgb': '58, 155, 138',
+      'status-success-rgb': '95, 184, 112',
+      'status-error-rgb': '216, 92, 74',
+      'status-warning-rgb': '212, 164, 58',
+      'status-info-rgb': '90, 143, 212',
+      'background-base-rgb': '10, 11, 13',
+    },
+  },
+  rootClasses: ['atmosphere-warm', 'grain'],
+}

package/src/theme/presets/default.ts

@@ -0,0 +1,6 @@
+import type { ThemePreset } from './types'
+
+export const defaultPreset: ThemePreset = {
+  name: 'default',
+  description: 'Titan Design System default theme — orange accent, steel secondary',
+}

package/src/theme/presets/index.ts

@@ -0,0 +1,4 @@
+export type { ThemePreset, ThemePresetColors, ThemePresetFonts, ThemePresetRadii, ThemePresetShadows } from './types'
+export { applyThemePreset } from './apply'
+export { defaultPreset } from './default'
+export { audiobookPreset } from './audiobook'

package/src/theme/presets/presets.test.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { applyThemePreset } from './apply'
+import type { ThemePreset } from './types'
+
+describe('applyThemePreset', () => {
+  let cleanup: () => void
+
+  afterEach(() => {
+    cleanup?.()
+  })
+
+  it('applies color overrides to document root', () => {
+    const preset: ThemePreset = {
+      name: 'test',
+      colors: {
+        dark: {
+          'brand-primary': '#FF0000',
+        },
+      },
+    }
+    cleanup = applyThemePreset(preset)
+    const value = document.documentElement.style.getPropertyValue('--color-brand-primary')
+    expect(value).toBe('#FF0000')
+  })
+
+  it('returns cleanup function that removes overrides', () => {
+    const preset: ThemePreset = {
+      name: 'test',
+      colors: {
+        dark: {
+          'brand-primary': '#FF0000',
+        },
+      },
+    }
+    cleanup = applyThemePreset(preset)
+    cleanup()
+    const value = document.documentElement.style.getPropertyValue('--color-brand-primary')
+    expect(value).toBe('')
+  })
+
+  it('adds root classes', () => {
+    const preset: ThemePreset = {
+      name: 'test',
+      rootClasses: ['atmosphere-warm'],
+    }
+    cleanup = applyThemePreset(preset)
+    expect(document.documentElement.classList.contains('atmosphere-warm')).toBe(true)
+    cleanup()
+    expect(document.documentElement.classList.contains('atmosphere-warm')).toBe(false)
+  })
+})

package/src/theme/presets/types.ts

@@ -0,0 +1,76 @@
+export interface ThemePresetColors {
+  'brand-primary'?: string
+  'brand-primary-light'?: string
+  'brand-primary-dark'?: string
+  'brand-primary-subtle'?: string
+  'brand-primary-hover'?: string
+  'brand-primary-active'?: string
+  'brand-secondary'?: string
+  'brand-secondary-light'?: string
+  'brand-secondary-dark'?: string
+  'brand-secondary-subtle'?: string
+  'brand-secondary-hover'?: string
+  'brand-secondary-active'?: string
+  'on-brand-primary'?: string
+  'on-brand-secondary'?: string
+  'status-success'?: string
+  'status-error'?: string
+  'status-warning'?: string
+  'status-info'?: string
+  'text-primary'?: string
+  'text-secondary'?: string
+  'text-tertiary'?: string
+  'surface-base'?: string
+  'surface-elevated'?: string
+  'surface-raised'?: string
+  'surface-overlay'?: string
+  'surface-input'?: string
+  'background-base'?: string
+  'background-default'?: string
+  'background-subtle'?: string
+  'border-default'?: string
+  'border-subtle'?: string
+  'border-strong'?: string
+  'border-focus'?: string
+  'divider'?: string
+  [key: `${string}`]: string | undefined
+}
+
+export interface ThemePresetFonts {
+  sans?: string
+  body?: string
+  heading?: string
+  mono?: string
+}
+
+export interface ThemePresetRadii {
+  sm?: string
+  DEFAULT?: string
+  md?: string
+  lg?: string
+  xl?: string
+}
+
+export interface ThemePresetShadows {
+  sm?: string
+  DEFAULT?: string
+  md?: string
+  lg?: string
+  xl?: string
+}
+
+export interface ThemePreset {
+  name: string
+  description?: string
+  colors?: {
+    dark?: ThemePresetColors
+    light?: ThemePresetColors
+  }
+  fonts?: ThemePresetFonts
+  radii?: ThemePresetRadii
+  shadows?: ThemePresetShadows
+  /** Additional CSS classes to add to root element */
+  rootClasses?: string[]
+  /** Google Fonts import URL (appended to existing imports) */
+  fontImport?: string
+}