@retray-dev/ui-kit 4.0.0 → 5.1.0

package/src/theme/ThemeProvider.tsx

@@ -1,25 +1,25 @@
 import React, { createContext, useContext, useMemo } from 'react'
 import { useColorScheme } from 'react-native'
 import { ThemeColors, Theme, ColorScheme, ThemeContextValue } from './types'
-import { defaultLight, defaultDark } from './colors'
+import { defaultLight, defaultDark, deriveColors } from './colors'
 
 const ThemeContext = createContext<ThemeContextValue>({
-  colors: defaultLight,
+  colors: deriveColors(defaultLight, 'light'),
   colorScheme: 'light',
 })
 
 export interface ThemeProviderProps {
   children: React.ReactNode
   /**
-  * Optional full-palette overrides per scheme. Supply a partial or full `ThemeColors` object
-  * for `light` and/or `dark` to override the defaults.
-  * @example
-  * { light: { primary: '#6366f1', card: '#fff' }, dark: { primary: '#818cf8' } }
+   * Optional token overrides per scheme. Supply any of the 12 public ThemeColors
+   * tokens for `light` and/or `dark`. All derived colors are recomputed automatically.
+   * @example
+   * { light: { primary: '#ff385c' }, dark: { primary: '#ff385c' } }
    */
   theme?: Theme
   /**
-   * - `'system'` (default): auto-detects device setting and updates when it changes.
-   * - `'light'` / `'dark'`: forces a specific scheme regardless of device setting.
+   * - `'system'` (default): auto-detects device setting.
+   * - `'light'` / `'dark'`: forces a specific scheme.
    */
   colorScheme?: ColorScheme
 }
@@ -28,10 +28,11 @@ export function ThemeProvider({ children, theme, colorScheme = 'system' }: Theme
   const systemScheme = useColorScheme() ?? 'light'
   const resolvedScheme: 'light' | 'dark' = colorScheme === 'system' ? systemScheme : colorScheme
 
-  const colors = useMemo<ThemeColors>(() => {
+  const colors = useMemo(() => {
     const base = resolvedScheme === 'dark' ? defaultDark : defaultLight
     const override = resolvedScheme === 'dark' ? theme?.dark : theme?.light
-    return override ? { ...base, ...override } : base
+    const merged: ThemeColors = override ? { ...base, ...override } : base
+    return deriveColors(merged, resolvedScheme)
   }, [resolvedScheme, theme])
 
   return (

package/src/theme/colorUtils.ts

@@ -0,0 +1,80 @@
+// Hex color manipulation utilities for internal theme derivation.
+// All functions are pure — no side effects, no React dependencies.
+
+function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+  const clean = hex.replace('#', '')
+  const full = clean.length === 3
+    ? clean.split('').map(c => c + c).join('')
+    : clean
+  if (full.length !== 6) return null
+  return {
+    r: parseInt(full.slice(0, 2), 16),
+    g: parseInt(full.slice(2, 4), 16),
+    b: parseInt(full.slice(4, 6), 16),
+  }
+}
+
+function componentToHex(c: number): string {
+  return Math.round(Math.max(0, Math.min(255, c))).toString(16).padStart(2, '0')
+}
+
+function rgbToHex(r: number, g: number, b: number): string {
+  return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`
+}
+
+// Returns hex color with alpha blended onto a white background (for tint derivation)
+export function withAlphaOnWhite(hex: string, alpha: number): string {
+  const rgb = hexToRgb(hex)
+  if (!rgb) return hex
+  const r = rgb.r * alpha + 255 * (1 - alpha)
+  const g = rgb.g * alpha + 255 * (1 - alpha)
+  const b = rgb.b * alpha + 255 * (1 - alpha)
+  return rgbToHex(r, g, b)
+}
+
+// Returns hex color with alpha blended onto a dark background (for dark mode tints)
+export function withAlphaOnDark(hex: string, alpha: number, bgHex = '#0f0f0f'): string {
+  const rgb = hexToRgb(hex)
+  const bg = hexToRgb(bgHex)
+  if (!rgb || !bg) return hex
+  const r = rgb.r * alpha + bg.r * (1 - alpha)
+  const g = rgb.g * alpha + bg.g * (1 - alpha)
+  const b = rgb.b * alpha + bg.b * (1 - alpha)
+  return rgbToHex(r, g, b)
+}
+
+// Mix foreground color with background at given opacity (for text hierarchy)
+export function mixWithBackground(fgHex: string, bgHex: string, opacity: number): string {
+  const fg = hexToRgb(fgHex)
+  const bg = hexToRgb(bgHex)
+  if (!fg || !bg) return fgHex
+  const r = fg.r * opacity + bg.r * (1 - opacity)
+  const g = fg.g * opacity + bg.g * (1 - opacity)
+  const b = fg.b * opacity + bg.b * (1 - opacity)
+  return rgbToHex(r, g, b)
+}
+
+// Lighten a hex color by mixing with white
+export function lighten(hex: string, amount: number): string {
+  return withAlphaOnWhite(hex, 1 - amount)
+}
+
+// Darken a hex color by mixing with black
+export function darken(hex: string, amount: number): string {
+  const rgb = hexToRgb(hex)
+  if (!rgb) return hex
+  return rgbToHex(rgb.r * (1 - amount), rgb.g * (1 - amount), rgb.b * (1 - amount))
+}
+
+// Detect if a hex color is "dark" (luminance < 0.5)
+export function isDark(hex: string): boolean {
+  const rgb = hexToRgb(hex)
+  if (!rgb) return false
+  // Relative luminance (WCAG formula)
+  const toLinear = (c: number) => {
+    const s = c / 255
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4)
+  }
+  const L = 0.2126 * toLinear(rgb.r) + 0.7152 * toLinear(rgb.g) + 0.0722 * toLinear(rgb.b)
+  return L < 0.5
+}

package/src/theme/colors.ts

@@ -1,54 +1,95 @@
-import { ThemeColors } from './types'
+import { ThemeColors, ResolvedColors } from './types'
+import { mixWithBackground, withAlphaOnWhite, withAlphaOnDark, lighten, darken, isDark } from './colorUtils'
+
+// ─── Default palettes (12 tokens each) ───────────────────────────────────────
+// These are the only values consumers need to override.
+// Designed to look great out of the box with no customization.
 
-// Full, explicit theme palettes. No derivation — palettes are direct and fully customizable.
 export const defaultLight: ThemeColors = {
   background: '#ffffff',
-  foreground: '#171717',
+  foreground: '#222222',       // Airbnb ink — deep near-black, never pure black
   card: '#ffffff',
-  cardForeground: '#171717',
-  primary: '#1a1a1a',
+  primary: '#1a1a1a',          // Near-black primary — clean, premium default
   primaryForeground: '#ffffff',
-  secondary: '#f1f1f1',
-  secondaryForeground: '#171717',
-  muted: '#f1f1f1',
-  mutedForeground: '#a2a2a2',
-  accent: '#e4e4e4',
-  accentForeground: '#171717',
-  destructive: '#ef4444',
+  border: '#dddddd',           // Airbnb hairline — light, airy
+  destructive: '#e53935',
   destructiveForeground: '#ffffff',
-  border: '#e5e5e5',
-  input: '#e5e5e5',
-  ring: '#1a1a1a',
   success: '#1a7a45',
   successForeground: '#ffffff',
-  destructiveTint: '#fff5f5',
-  destructiveBorder: '#fecaca',
-  successTint: '#f0fdf4',
-  successBorder: '#bbf7d0',
+  warning: '#e67e00',
+  warningForeground: '#ffffff',
 }
 
 export const defaultDark: ThemeColors = {
   background: '#0f0f0f',
   foreground: '#fafafa',
   card: '#1c1c1c',
-  cardForeground: '#fafafa',
   primary: '#fafafa',
   primaryForeground: '#0f0f0f',
-  secondary: '#272727',
-  secondaryForeground: '#fafafa',
-  muted: '#272727',
-  mutedForeground: '#9a9a9a',
-  accent: '#2e2e2e',
-  accentForeground: '#fafafa',
-  destructive: '#dc2626',
-  destructiveForeground: '#ffffff',
   border: '#303030',
-  input: '#2a2a2a',
-  ring: '#fafafa',
-  success: '#166534',
+  destructive: '#ef5350',
+  destructiveForeground: '#ffffff',
+  success: '#2e7d52',
   successForeground: '#ffffff',
-  destructiveTint: '#3b0a0a',
-  destructiveBorder: '#7f1d1d',
-  successTint: '#052e16',
-  successBorder: '#166534',
+  warning: '#f57c00',
+  warningForeground: '#ffffff',
+}
+
+// ─── Color derivation ─────────────────────────────────────────────────────────
+// Takes 12 public tokens → produces full ResolvedColors for component consumption.
+// Dark mode uses bg-blended tints instead of white-blended to stay on-palette.
+
+export function deriveColors(t: ThemeColors, scheme: 'light' | 'dark'): ResolvedColors {
+  const dark = scheme === 'dark'
+  const bg = t.background
+
+  // Text hierarchy: foreground mixed with background at different opacities
+  const foregroundSubtle = mixWithBackground(t.foreground, bg, 0.55)
+  const foregroundMuted = mixWithBackground(t.foreground, bg, 0.38)
+
+  // Surface fills: slight offset from background
+  const surface = dark
+    ? lighten(bg, -0.06)   // slightly lighter than dark bg
+    : darken(bg, 0.04)     // slightly darker than white → #f7f7f7 equivalent
+  const surfaceStrong = dark
+    ? lighten(bg, -0.12)
+    : darken(bg, 0.08)     // #ebebeb equivalent
+
+  // Semantic tints: color blended toward background
+  const destructiveTint = dark
+    ? withAlphaOnDark(t.destructive, 0.15, bg)
+    : withAlphaOnWhite(t.destructive, 0.08)
+  const destructiveBorder = dark
+    ? withAlphaOnDark(t.destructive, 0.45, bg)
+    : withAlphaOnWhite(t.destructive, 0.30)
+
+  const successTint = dark
+    ? withAlphaOnDark(t.success, 0.15, bg)
+    : withAlphaOnWhite(t.success, 0.08)
+  const successBorder = dark
+    ? withAlphaOnDark(t.success, 0.45, bg)
+    : withAlphaOnWhite(t.success, 0.30)
+
+  const warningTint = dark
+    ? withAlphaOnDark(t.warning, 0.15, bg)
+    : withAlphaOnWhite(t.warning, 0.08)
+  const warningBorder = dark
+    ? withAlphaOnDark(t.warning, 0.45, bg)
+    : withAlphaOnWhite(t.warning, 0.30)
+
+  return {
+    ...t,
+    foregroundSubtle,
+    foregroundMuted,
+    surface,
+    surfaceStrong,
+    destructiveTint,
+    destructiveBorder,
+    successTint,
+    successBorder,
+    warningTint,
+    warningBorder,
+    ring: t.primary,       // focus ring always = primary
+    input: t.border,       // input border always = border
+  }
 }

package/src/theme/index.ts

@@ -1,4 +1,4 @@
 export { ThemeProvider, useTheme } from './ThemeProvider'
 export type { ThemeProviderProps } from './ThemeProvider'
-export type { ThemeColors, Theme, ColorScheme } from './types'
-export { defaultLight, defaultDark } from './colors'
+export type { ThemeColors, ResolvedColors, Theme, ColorScheme } from './types'
+export { defaultLight, defaultDark, deriveColors } from './colors'

package/src/theme/types.ts

@@ -1,31 +1,45 @@
+// 12 public tokens — the only values consumers need to supply.
+// All derived colors (tints, borders, surface, text hierarchy) are computed
+// internally by deriveColors() and exposed via useTheme().colors as ResolvedColors.
 export type ThemeColors = {
   background: string
   foreground: string
   card: string
-  cardForeground: string
   primary: string
   primaryForeground: string
-  secondary: string
-  secondaryForeground: string
-  muted: string
-  mutedForeground: string
-  accent: string
-  accentForeground: string
+  border: string
   destructive: string
   destructiveForeground: string
-  border: string
-  input: string
-  ring: string
   success: string
   successForeground: string
+  warning: string
+  warningForeground: string
+}
+
+// Full resolved palette — what components actually consume via useTheme().
+// Derived from ThemeColors. Never supplied by consumers directly.
+export type ResolvedColors = ThemeColors & {
+  // Text hierarchy
+  foregroundSubtle: string   // ~55% — body text, subtitles
+  foregroundMuted: string    // ~35% — captions, timestamps, placeholders
+
+  // Surface fills (chips unselected, input bg, tag bg, skeleton)
+  surface: string            // background slightly off-canvas
+  surfaceStrong: string      // slightly stronger fill for pressed/hover states
+
+  // Semantic tints (light bg for alert banners, toast backgrounds)
   destructiveTint: string
   destructiveBorder: string
   successTint: string
   successBorder: string
+  warningTint: string
+  warningBorder: string
+
+  // Aliases (ring + input always equal primary + border for coherence)
+  ring: string               // = primary
+  input: string              // = border
 }
 
-// Theme overrides: consumers may supply partial or full `ThemeColors` objects
-// for `theme.light` / `theme.dark` to override only the tokens they want.
 export type Theme = {
   light?: Partial<ThemeColors>
   dark?: Partial<ThemeColors>
@@ -34,6 +48,6 @@ export type Theme = {
 export type ColorScheme = 'light' | 'dark' | 'system'
 
 export type ThemeContextValue = {
-  colors: ThemeColors
+  colors: ResolvedColors
   colorScheme: 'light' | 'dark'
 }

package/src/tokens.ts

@@ -1,13 +1,18 @@
+// ─── Spacing ─────────────────────────────────────────────────────────────────
+// 8pt grid with 2pt micro-step. `section` for major band separators (Airbnb: 64px).
 export const SPACING = {
+  xxs: 2,
   xs: 4,
   sm: 8,
   md: 12,
-  lg: 16,
-  xl: 24,
-  '2xl': 32,
-  '3xl': 48,
+  base: 16,
+  lg: 24,
+  xl: 32,
+  xxl: 48,
+  section: 64,
 } as const
 
+// ─── Icon sizes ───────────────────────────────────────────────────────────────
 export const ICON_SIZES = {
   sm: 14,
   md: 18,
@@ -16,49 +21,178 @@ export const ICON_SIZES = {
   '2xl': 32,
 } as const
 
+// ─── Border radius ────────────────────────────────────────────────────────────
+// Airbnb-aligned shape language — soft everywhere, no hard corners on interactive elements.
+// xs: micro chips/tags  sm: inputs/forms  md: cards  lg: sheet corners  xl: primary CTAs (pill)
 export const RADIUS = {
-  sm: 4,
-  md: 8,
-  lg: 12,
-  xl: 16,
+  none: 0,
+  xs: 4,
+  sm: 8,
+  md: 14,
+  lg: 20,
+  xl: 32,
   full: 9999,
 } as const
 
+// ─── Shadows ──────────────────────────────────────────────────────────────────
+// Multi-tier. Default card usage = sm. Hover float = md. Modals = lg/xl.
 export const SHADOWS = {
   sm: {
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.08,
+    shadowOpacity: 0.06,
     shadowRadius: 4,
     elevation: 2,
   },
   md: {
     shadowColor: '#000',
-    shadowOffset: { width: 0, height: 3 },
-    shadowOpacity: 0.12,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.10,
     shadowRadius: 8,
     elevation: 5,
   },
   lg: {
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 6 },
-    shadowOpacity: 0.2,
+    shadowOpacity: 0.16,
     shadowRadius: 16,
     elevation: 10,
   },
   xl: {
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 12 },
-    shadowOpacity: 0.28,
+    shadowOpacity: 0.24,
     shadowRadius: 24,
     elevation: 18,
   },
 } as const
 
+// ─── Breakpoints ──────────────────────────────────────────────────────────────
 export const BREAKPOINTS = {
   wide: 700,
 } as const
 
+// ─── Typography ───────────────────────────────────────────────────────────────
+// Airbnb-inspired hierarchy. Modest weights — 500-600 on display, not 700+.
+// Exception: display-hero (large number display) and display-xl always bold.
+// Poppins carries the full scale. All fontFamily values reference loaded font names.
+export const TYPOGRAPHY = {
+  'display-hero': {
+    fontFamily: 'Poppins-Bold',
+    fontSize: 64,
+    fontWeight: '700' as const,
+    lineHeight: 70,
+    letterSpacing: -1,
+  },
+  'display-xl': {
+    fontFamily: 'Poppins-Bold',
+    fontSize: 28,
+    fontWeight: '700' as const,
+    lineHeight: 40,
+    letterSpacing: 0,
+  },
+  'display-lg': {
+    fontFamily: 'Poppins-Medium',
+    fontSize: 22,
+    fontWeight: '500' as const,
+    lineHeight: 26,
+    letterSpacing: -0.44,
+  },
+  'display-md': {
+    fontFamily: 'Poppins-Bold',
+    fontSize: 21,
+    fontWeight: '700' as const,
+    lineHeight: 30,
+    letterSpacing: 0,
+  },
+  'display-sm': {
+    fontFamily: 'Poppins-SemiBold',
+    fontSize: 20,
+    fontWeight: '600' as const,
+    lineHeight: 24,
+    letterSpacing: -0.18,
+  },
+  'title-md': {
+    fontFamily: 'Poppins-SemiBold',
+    fontSize: 16,
+    fontWeight: '600' as const,
+    lineHeight: 20,
+    letterSpacing: 0,
+  },
+  'title-sm': {
+    fontFamily: 'Poppins-Medium',
+    fontSize: 16,
+    fontWeight: '500' as const,
+    lineHeight: 20,
+    letterSpacing: 0,
+  },
+  'body-md': {
+    fontFamily: 'Poppins-Regular',
+    fontSize: 16,
+    fontWeight: '400' as const,
+    lineHeight: 24,
+    letterSpacing: 0,
+  },
+  'body-sm': {
+    fontFamily: 'Poppins-Regular',
+    fontSize: 14,
+    fontWeight: '400' as const,
+    lineHeight: 20,
+    letterSpacing: 0,
+  },
+  caption: {
+    fontFamily: 'Poppins-Medium',
+    fontSize: 14,
+    fontWeight: '500' as const,
+    lineHeight: 18,
+    letterSpacing: 0,
+  },
+  'caption-sm': {
+    fontFamily: 'Poppins-Regular',
+    fontSize: 13,
+    fontWeight: '400' as const,
+    lineHeight: 16,
+    letterSpacing: 0,
+  },
+  'badge-text': {
+    fontFamily: 'Poppins-SemiBold',
+    fontSize: 11,
+    fontWeight: '600' as const,
+    lineHeight: 13,
+    letterSpacing: 0,
+  },
+  'micro-label': {
+    fontFamily: 'Poppins-Bold',
+    fontSize: 12,
+    fontWeight: '700' as const,
+    lineHeight: 16,
+    letterSpacing: 0,
+  },
+  'uppercase-tag': {
+    fontFamily: 'Poppins-Bold',
+    fontSize: 8,
+    fontWeight: '700' as const,
+    lineHeight: 10,
+    letterSpacing: 0.32,
+    textTransform: 'uppercase' as const,
+  },
+  'button-lg': {
+    fontFamily: 'Poppins-Medium',
+    fontSize: 16,
+    fontWeight: '500' as const,
+    lineHeight: 20,
+    letterSpacing: 0,
+  },
+  'button-sm': {
+    fontFamily: 'Poppins-Medium',
+    fontSize: 14,
+    fontWeight: '500' as const,
+    lineHeight: 18,
+    letterSpacing: 0,
+  },
+} as const
+
+// ─── Types ────────────────────────────────────────────────────────────────────
 export type Spacing = typeof SPACING
 export type SpacingKey = keyof Spacing
 
@@ -67,3 +201,6 @@ export type IconSizeKey = keyof IconSize
 
 export type Radius = typeof RADIUS
 export type RadiusKey = keyof Radius
+
+export type Typography = typeof TYPOGRAPHY
+export type TypographyKey = keyof Typography

package/src/utils/hover.ts

@@ -0,0 +1,25 @@
+import { useState, useCallback } from 'react'
+import { Platform } from 'react-native'
+
+export interface HoverHandlers {
+  onMouseEnter?: () => void
+  onMouseLeave?: () => void
+}
+
+/**
+ * Web-only hover state hook. Returns `{ hovered, hoverHandlers }`.
+ * On native (iOS/Android) `hovered` is always false and handlers are no-ops.
+ * Spread `hoverHandlers` onto any View/TouchableOpacity to activate.
+ */
+export function useHover(): { hovered: boolean; hoverHandlers: HoverHandlers } {
+  const [hovered, setHovered] = useState(false)
+
+  const onMouseEnter = useCallback(() => setHovered(true), [])
+  const onMouseLeave = useCallback(() => setHovered(false), [])
+
+  if (Platform.OS !== 'web') {
+    return { hovered: false, hoverHandlers: {} }
+  }
+
+  return { hovered, hoverHandlers: { onMouseEnter, onMouseLeave } }
+}