fluent-styles 1.53.0 → 1.55.0

package/src/utiles/theme.ts

@@ -0,0 +1,727 @@
+import { useColorScheme } from 'react-native'
+import { fontStyles } from './fontStyles'
+
+export type ComponentTheme = 'dark' | 'light' | 'system'
+
+/**
+ * Resolves 'system' to the device's current color scheme.
+ * Returns `'light'` or `'dark'`.
+ */
+export function resolveTheme(
+  theme: ComponentTheme,
+  deviceScheme: ReturnType<typeof useColorScheme>,
+): 'light' | 'dark' {
+  if (theme === 'system') return deviceScheme === 'light' ? 'light' : 'dark'
+  return theme
+}
+
+// ─── Toast color tokens ───────────────────────────────────────────────────────
+
+export type ToastColors = {
+  /** Background of the toast pill. */
+  successBg:          string
+  successBorder:      string
+  successLabel:       string
+  errorBg:            string
+  errorBorder:        string
+  errorLabel:         string
+  warningBg:          string
+  warningBorder:      string
+  warningLabel:       string
+  infoBg:             string
+  infoBorder:         string
+  infoLabel:          string
+  /** Body description text colour (shared across all variants). */
+  description:        string
+  /** The small × close button. */
+  closeIcon:          string
+}
+
+export const TOAST_DARK: ToastColors = {
+  successBg:     '#0d1f0f', successBorder: '#22c55e', successLabel: '#22c55e',
+  errorBg:       '#1f0d0d', errorBorder:   '#ef4444', errorLabel:   '#ef4444',
+  warningBg:     '#1f1a0d', warningBorder: '#f59e0b', warningLabel: '#f59e0b',
+  infoBg:        '#0d1220', infoBorder:    '#3b82f6', infoLabel:    '#3b82f6',
+  description:   '#9ca3af',
+  closeIcon:     '#6b7280',
+}
+
+export const TOAST_LIGHT: ToastColors = {
+  successBg:     '#f0fdf4', successBorder: '#16a34a', successLabel: '#15803d',
+  errorBg:       '#fef2f2', errorBorder:   '#dc2626', errorLabel:   '#b91c1c',
+  warningBg:     '#fffbeb', warningBorder: '#d97706', warningLabel: '#b45309',
+  infoBg:        '#eff6ff', infoBorder:    '#2563eb', infoLabel:    '#1d4ed8',
+  description:   '#6b7280',
+  closeIcon:     '#9ca3af',
+}
+
+// ─── Notification color tokens ────────────────────────────────────────────────
+
+export type NotificationColors = {
+  background:      string
+  border:          string
+  source:          string
+  title:           string
+  timestamp:       string
+  body:            string
+  avatarBg:        string
+  avatarBorder:    string
+  avatarInitials:  string
+  actionBg:        string
+  actionBorder:    string
+  actionLabel:     string
+  closeIcon:       string
+}
+
+export const NOTIFICATION_DARK: NotificationColors = {
+  background:     '#18181b',
+  border:         '#3f3f46',
+  source:         '#71717a',
+  title:          '#f4f4f5',
+  timestamp:      '#52525b',
+  body:           '#a1a1aa',
+  avatarBg:       '#27272a',
+  avatarBorder:   '#3f3f46',
+  avatarInitials: '#a1a1aa',
+  actionBg:       '#27272a',
+  actionBorder:   '#3f3f46',
+  actionLabel:    '#e4e4e7',
+  closeIcon:      '#52525b',
+}
+
+export const NOTIFICATION_LIGHT: NotificationColors = {
+  background:     '#ffffff',
+  border:         '#e5e5ea',
+  source:         '#8e8e93',
+  title:          '#1c1c1e',
+  timestamp:      '#aeaeb2',
+  body:           '#636366',
+  avatarBg:       '#f2f2f7',
+  avatarBorder:   '#e5e5ea',
+  avatarInitials: '#636366',
+  actionBg:       '#f2f2f7',
+  actionBorder:   '#e5e5ea',
+  actionLabel:    '#1c1c1e',
+  closeIcon:      '#aeaeb2',
+}
+
+// ─── Loader color tokens ──────────────────────────────────────────────────────
+
+export type LoaderColors = {
+  /** Overlay backdrop. */
+  overlayBg:    string
+  /** Card background (overlay mode). */
+  cardBg:       string
+  cardBorder:   string
+  /** Spinner / pulse / dots tint. */
+  indicator:    string
+  label:        string
+}
+
+export const LOADER_DARK: LoaderColors = {
+  overlayBg:  'rgba(0,0,0,0.72)',
+  cardBg:     '#18181b',
+  cardBorder: '#3f3f46',
+  indicator:  '#6366f1',
+  label:      '#a1a1aa',
+}
+
+export const LOADER_LIGHT: LoaderColors = {
+  overlayBg:  'rgba(0,0,0,0.4)',
+  cardBg:     '#ffffff',
+  cardBorder: '#e5e5ea',
+  indicator:  '#6366f1',
+  label:      '#636366',
+}
+
+// ─── Dialogue color tokens ────────────────────────────────────────────────────
+
+export type DialogueColors = {
+  background:        string
+  border:            string
+  title:             string
+  message:           string
+  divider:           string
+  primaryBg:         string
+  primaryBorder:     string
+  primaryLabel:      string
+  secondaryBg:       string
+  secondaryBorder:   string
+  secondaryLabel:    string
+  destructiveBg:     string
+  destructiveBorder: string
+  destructiveLabel:  string
+}
+
+export const DIALOGUE_DARK: DialogueColors = {
+  background:        '#18181b',
+  border:            '#3f3f46',
+  title:             '#f4f4f5',
+  message:           '#a1a1aa',
+  divider:           '#27272a',
+  primaryBg:         '#6366f1',
+  primaryBorder:     '#818cf8',
+  primaryLabel:      '#ffffff',
+  secondaryBg:       '#27272a',
+  secondaryBorder:   '#3f3f46',
+  secondaryLabel:    '#e4e4e7',
+  destructiveBg:     '#450a0a',
+  destructiveBorder: '#ef4444',
+  destructiveLabel:  '#fca5a5',
+}
+
+export const DIALOGUE_LIGHT: DialogueColors = {
+  background:        '#ffffff',
+  border:            '#e5e5ea',
+  title:             '#1c1c1e',
+  message:           '#636366',
+  divider:           '#f2f2f7',
+  primaryBg:         '#6366f1',
+  primaryBorder:     '#818cf8',
+  primaryLabel:      '#ffffff',
+  secondaryBg:       '#f2f2f7',
+  secondaryBorder:   '#e5e5ea',
+  secondaryLabel:    '#1c1c1e',
+  destructiveBg:     '#fff1f0',
+  destructiveBorder: '#ff3b30',
+  destructiveLabel:  '#ff3b30',
+}
+
+const palettes = {
+  white: '#FFFFFF',
+  black: '#000000',
+  lightText: '#FFFFFF',
+  darkText: '#000000',
+  transparent: 'rgba(0, 0, 0, 0)',
+  transparent05: 'rgba(0, 0, 0, 0.5)',
+  transparent09: 'rgba(0, 0, 0, 0.9)',
+
+  rose: {
+    50: '#fff1f2',
+    100: '#ffe4e6',
+    200: '#fecdd3',
+    300: '#fda4af',
+    400: '#fb7185',
+    500: '#f43f5e',
+    600: '#e11d48',
+    700: '#be123c',
+    800: '#9f1239',
+    900: '#881337',
+  },
+  pink: {
+    50: '#fdf2f8',
+    100: '#fce7f3',
+    200: '#fbcfe8',
+    300: '#f9a8d4',
+    400: '#f472b6',
+    500: '#ec4899',
+    600: '#db2777',
+    700: '#be185d',
+    800: '#9d174d',
+    900: '#831843',
+  },
+  fuchsia: {
+    50: '#fdf4ff',
+    100: '#fae8ff',
+    200: '#f5d0fe',
+    300: '#f0abfc',
+    400: '#e879f9',
+    500: '#d946ef',
+    600: '#c026d3',
+    700: '#a21caf',
+    800: '#86198f',
+    900: '#701a75',
+  },
+  purple: {
+    50: '#faf5ff',
+    100: '#f3e8ff',
+    200: '#e9d5ff',
+    300: '#d8b4fe',
+    400: '#c084fc',
+    500: '#a855f7',
+    600: '#9333ea',
+    700: '#7e22ce',
+    800: '#6b21a8',
+    900: '#581c87',
+  },
+  violet: {
+    50: '#f5f3ff',
+    100: '#ede9fe',
+    200: '#ddd6fe',
+    300: '#c4b5fd',
+    400: '#a78bfa',
+    500: '#8b5cf6',
+    600: '#7c3aed',
+    700: '#6d28d9',
+    800: '#5b21b6',
+    900: '#4c1d95',
+  },
+  indigo: {
+    50: '#eef2ff',
+    100: '#e0e7ff',
+    200: '#c7d2fe',
+    300: '#a5b4fc',
+    400: '#818cf8',
+    500: '#6366f1',
+    600: '#4f46e5',
+    700: '#4338ca',
+    800: '#3730a3',
+    900: '#312e81',
+  },
+  blue: {
+    50: '#eff6ff',
+    100: '#dbeafe',
+    200: '#bfdbfe',
+    300: '#93c5fd',
+    400: '#60a5fa',
+    500: '#3b82f6',
+    600: '#2563eb',
+    700: '#1d4ed8',
+    800: '#1e40af',
+    900: '#1e3a8a',
+  },
+  lightBlue: {
+    50: '#f0f9ff',
+    100: '#e0f2fe',
+    200: '#bae6fd',
+    300: '#7dd3fc',
+    400: '#38bdf8',
+    500: '#0ea5e9',
+    600: '#0284c7',
+    700: '#0369a1',
+    800: '#075985',
+    900: '#0c4a6e',
+  },
+  darkBlue: {
+    50: '#dbf4ff',
+    100: '#addbff',
+    200: '#7cc2ff',
+    300: '#4aa9ff',
+    400: '#1a91ff',
+    500: '#0077e6',
+    600: '#005db4',
+    700: '#004282',
+    800: '#002851',
+    900: '#000e21',
+  },
+  cyan: {
+    50: '#ecfeff',
+    100: '#cffafe',
+    200: '#a5f3fc',
+    300: '#67e8f9',
+    400: '#22d3ee',
+    500: '#06b6d4',
+    600: '#0891b2',
+    700: '#0e7490',
+    800: '#155e75',
+    900: '#164e63',
+  },
+  teal: {
+    50: '#f0fdfa',
+    100: '#ccfbf1',
+    200: '#99f6e4',
+    300: '#5eead4',
+    400: '#2dd4bf',
+    500: '#14b8a6',
+    600: '#0d9488',
+    700: '#0f766e',
+    800: '#115e59',
+    900: '#134e4a',
+  },
+  emerald: {
+    50: '#ecfdf5',
+    100: '#d1fae5',
+    200: '#a7f3d0',
+    300: '#6ee7b7',
+    400: '#34d399',
+    500: '#10b981',
+    600: '#059669',
+    700: '#047857',
+    800: '#065f46',
+    900: '#064e3b',
+  },
+  green: {
+    50: '#f0fdf4',
+    100: '#dcfce7',
+    200: '#bbf7d0',
+    300: '#86efac',
+    400: '#4ade80',
+    500: '#22c55e',
+    600: '#16a34a',
+    700: '#15803d',
+    800: '#166534',
+    900: '#14532d',
+  },
+  lime: {
+    50: '#f7fee7',
+    100: '#ecfccb',
+    200: '#d9f99d',
+    300: '#bef264',
+    400: '#a3e635',
+    500: '#84cc16',
+    600: '#65a30d',
+    700: '#4d7c0f',
+    800: '#3f6212',
+    900: '#365314',
+  },
+  yellow: {
+    50: '#fefce8',
+    100: '#fef9c3',
+    200: '#fef08a',
+    300: '#fde047',
+    400: '#facc15',
+    500: '#eab308',
+    600: '#ca8a04',
+    700: '#a16207',
+    800: '#854d0e',
+    900: '#713f12',
+  },
+  amber: {
+    50: '#fffbeb',
+    100: '#fef3c7',
+    200: '#fde68a',
+    300: '#fcd34d',
+    400: '#fbbf24',
+    500: '#f59e0b',
+    600: '#d97706',
+    700: '#b45309',
+    800: '#92400e',
+    900: '#78350f',
+  },
+  orange: {
+    50: '#fff7ed',
+    100: '#ffedd5',
+    200: '#fed7aa',
+    300: '#fdba74',
+    400: '#fb923c',
+    500: '#f97316',
+    600: '#ea580c',
+    700: '#c2410c',
+    800: '#9a3412',
+    900: '#7c2d12',
+  },
+  red: {
+    50: '#fef2f2',
+    100: '#fee2e2',
+    200: '#fecaca',
+    300: '#fca5a5',
+    400: '#f87171',
+    500: '#ef4444',
+    600: '#dc2626',
+    700: '#b91c1c',
+    800: '#991b1b',
+    900: '#7f1d1d',
+  },
+  warmGray: {
+    50: '#fafaf9',
+    100: '#f5f5f4',
+    200: '#e7e5e4',
+    300: '#d6d3d1',
+    400: '#a8a29e',
+    500: '#78716c',
+    600: '#57534e',
+    700: '#44403c',
+    800: '#292524',
+    900: '#1c1917',
+  },
+  trueGray: {
+    50: '#fafafa',
+    100: '#f5f5f5',
+    200: '#e5e5e5',
+    300: '#d4d4d4',
+    400: '#a3a3a3',
+    500: '#737373',
+    600: '#525252',
+    700: '#404040',
+    800: '#262626',
+    900: '#171717',
+  },
+  gray: {
+    1: '#FFFFFF',
+    50: '#fafafa',
+    100: '#f4f4f5',
+    200: '#e4e4e7',
+    300: '#d4d4d8',
+    400: '#a1a1aa',
+    500: '#71717a',
+    600: '#52525b',
+    700: '#3f3f46',
+    800: '#27272a',
+    900: '#18181b',
+  },
+  coolGray: {
+    50: '#f9fafb',
+    100: '#f3f4f6',
+    200: '#e5e7eb',
+    300: '#d1d5db',
+    400: '#9ca3af',
+    500: '#6b7280',
+    600: '#4b5563',
+    700: '#374151',
+    800: '#1f2937',
+    900: '#111827',
+  },
+  blueGray: {
+    50: '#f8fafc',
+    100: '#f1f5f9',
+    200: '#e2e8f0',
+    300: '#cbd5e1',
+    400: '#94a3b8',
+    500: '#64748b',
+    600: '#475569',
+    700: '#334155',
+    800: '#1e293b',
+    900: '#0f172a',
+  },
+  dark: {
+    50: '#18181b',
+    100: '#27272a',
+    200: '#3f3f46',
+    300: '#52525b',
+    400: '#71717a',
+    500: '#a1a1aa',
+    600: '#d4d4d8',
+    700: '#e4e4e7',
+    800: '#f4f4f5',
+    900: '#fafafa',
+  },
+} as const
+
+const darkColors = {
+  primary: palettes.blue[400],
+  button_hover: palettes.indigo[600],
+  button_primary: palettes.indigo[500],
+  cardBg: palettes.coolGray[800],
+  textColor: palettes.coolGray[50],
+  borderColor: palettes.coolGray[50],
+  shadowColor: palettes.coolGray[50],
+  hover: palettes.blue[800],
+  pressed: palettes.blue[900],
+  pressed_secondary: palettes.blue[400],
+}
+
+const lightColors = {
+  primary: palettes.amber[500],
+  button_hover: palettes.indigo[700],
+  button_primary: palettes.indigo[600],
+  cardBg: palettes.coolGray[50],
+  textColor: palettes.coolGray[900],
+  borderColor: palettes.coolGray[900],
+  shadowColor: palettes.coolGray[900],
+  hover: palettes.blue[100],
+  pressed: palettes.blue[200],
+  pressed_secondary: palettes.blue[400],
+}
+
+const theme = {
+  colors: {
+    ...palettes,
+    ...lightColors,
+
+    background: palettes.gray[50],
+    surface: palettes.white,
+    surfaceMuted: palettes.gray[100],
+    text: palettes.gray[900],
+    textMuted: palettes.gray[500],
+    textSoft: palettes.gray[400],
+    border: palettes.gray[200],
+    divider: palettes.gray[200],
+    success: palettes.green[600],
+    warning: palettes.amber[500],
+    danger: palettes.red[600],
+    info: palettes.blue[600],
+  },
+
+  space: {
+    0: 0,
+    1: 1,
+    2: 2,
+    4: 4,
+    6: 6,
+    8: 8,
+    10: 10,
+    12: 12,
+    14: 14,
+    16: 16,
+    18: 18,
+    20: 20,
+    24: 24,
+    28: 28,
+    32: 32,
+    36: 36,
+    40: 40,
+    44: 44,
+    48: 48,
+    56: 56,
+    64: 64,
+    72: 72,
+    80: 80,
+    96: 96,
+    112: 112,
+    128: 128,
+  },
+
+  fontWeight: {
+    thin: '100',
+    extraLight: '200',
+    light: '300',
+    normal: '400',
+    medium: '500',
+    semiBold: '600',
+    bold: '700',
+    extraBold: '800',
+    black: '900',
+  },
+
+  fontSize: {
+    xs: 10,
+    sm: 12,
+    md: 14,
+    base: 16,
+    lg: 18,
+    xl: 20,
+    '2xl': 24,
+    '3xl': 28,
+    '4xl': 32,
+    '5xl': 40,
+
+    nano: 10,
+    micro: 12,
+    small: 14,
+    medium: 16,
+    normal: 18,
+    large: 20,
+    xlarge: 22,
+    xxlarge: 26,
+    xxxlarge: 30,
+    splash: 40,
+  },
+
+  lineHeight: {
+    xs: 14,
+    sm: 16,
+    md: 18,
+    base: 20,
+    lg: 24,
+    xl: 28,
+    '2xl': 32,
+    '3xl': 36,
+    '4xl': 40,
+    '5xl': 48,
+  },
+
+  radius: {
+    none: 0,
+    xs: 4,
+    sm: 6,
+    md: 8,
+    lg: 12,
+    xl: 16,
+    '2xl': 20,
+    '3xl': 24,
+    full: 9999,
+  },
+
+  borderWidth: {
+    none: 0,
+    hairline: 0.5,
+    thin: 1,
+    medium: 1.5,
+    thick: 2,
+    heavy: 3,
+  },
+
+  iconSize: {
+    xs: 12,
+    sm: 14,
+    md: 16,
+    lg: 20,
+    xl: 24,
+    '2xl': 28,
+    '3xl': 32,
+  },
+
+  opacity: {
+    disabled: 0.4,
+    muted: 0.65,
+    overlay: 0.5,
+    pressed: 0.8,
+  },
+
+  zIndex: {
+    base: 0,
+    dropdown: 1000,
+    sticky: 1100,
+    overlay: 1200,
+    modal: 1300,
+    toast: 1400,
+    tooltip: 1500,
+  },
+
+  size: {
+    xs: 24,
+    sm: 32,
+    md: 40,
+    lg: 48,
+    xl: 56,
+    '2xl': 64,
+  },
+
+  shadow: {
+    none: {
+      shadowColor: 'transparent',
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0,
+      shadowRadius: 0,
+      elevation: 0,
+    },
+    sm: {
+      shadowColor: palettes.black,
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.08,
+      shadowRadius: 2,
+      elevation: 1,
+    },
+    md: {
+      shadowColor: palettes.black,
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.12,
+      shadowRadius: 8,
+      elevation: 3,
+    },
+    lg: {
+      shadowColor: palettes.black,
+      shadowOffset: { width: 0, height: 8 },
+      shadowOpacity: 0.16,
+      shadowRadius: 16,
+      elevation: 6,
+    },
+  },
+
+  textAlign: {
+    left: { textAlign: 'left' },
+    right: { textAlign: 'right' },
+    center: { textAlign: 'center' },
+    justify: { textAlign: 'justify' },
+  },
+
+  component: {
+    buttonHeight: {
+      sm: 32,
+      md: 40,
+      lg: 48,
+    },
+    inputHeight: {
+      sm: 36,
+      md: 44,
+      lg: 52,
+    },
+    tabBarHeight: 64,
+    headerHeight: 56,
+    bottomSheetHandleWidth: 40,
+  },
+} as const
+
+export type Theme = typeof theme
+
+export { theme, lightColors, darkColors, palettes, fontStyles }