@praxiis/ui 0.0.1

package/src/providers/ThemeProvider/defaultTheme.ts

@@ -0,0 +1,70 @@
+/**
+ * El Sendero Design System - Default Theme
+ *
+ * The El Sendero brand theme with warm brown accents
+ * and a calming, comforting aesthetic for anxiety companion app.
+ */
+
+import {
+  lightSemanticColors,
+  darkSemanticColors,
+  fontFamily,
+  typographyPresets,
+  spacing,
+  radii,
+  elevation,
+  duration,
+  easing,
+  iconSize,
+} from '../../tokens';
+import { Theme, ThemeColors } from './types';
+
+// =============================================================================
+// LIGHT THEME
+// =============================================================================
+
+export const lightTheme: Theme = {
+  name: 'El Sendero',
+  mode: 'light',
+  colors: lightSemanticColors as ThemeColors,
+  typography: {
+    fontFamily,
+    presets: typographyPresets,
+  },
+  spacing,
+  radii,
+  elevation,
+  motion: {
+    duration,
+    easing,
+  },
+  iconSize,
+};
+
+// =============================================================================
+// DARK THEME
+// =============================================================================
+
+export const darkTheme: Theme = {
+  name: 'El Sendero',
+  mode: 'dark',
+  colors: darkSemanticColors as ThemeColors,
+  typography: {
+    fontFamily,
+    presets: typographyPresets,
+  },
+  spacing,
+  radii,
+  elevation,
+  motion: {
+    duration,
+    easing,
+  },
+  iconSize,
+};
+
+// =============================================================================
+// DEFAULT EXPORT
+// =============================================================================
+
+export const defaultTheme = lightTheme;

package/src/providers/ThemeProvider/index.ts

@@ -0,0 +1,34 @@
+/**
+ * Theme Provider Module
+ *
+ * Theming system types and theme factories.
+ */
+
+// Types
+export type {
+  Theme,
+  ThemeMode,
+  ThemeColors,
+  ThemeTypography,
+  ThemeElevation,
+  ThemeMotion,
+  ThemeOverrides,
+  TypographyStyle,
+  ShadowStyle,
+  DeepPartial,
+} from './types';
+
+// Default themes
+export { lightTheme, darkTheme, defaultTheme } from './defaultTheme';
+
+// Theme factory
+export {
+  createTheme,
+  createThemePair,
+  horizonTheme,
+  sageTheme,
+  sunsetTheme,
+  oceanTheme,
+  lavenderTheme,
+  roseTheme,
+} from './createTheme';

package/src/providers/ThemeProvider/types.ts

@@ -0,0 +1,249 @@
+/**
+ * StayEasy Design System - Theme Types
+ *
+ * Complete type definitions for the theming system.
+ */
+
+import { TextStyle, ViewStyle } from 'react-native';
+
+// =============================================================================
+// THEME MODE
+// =============================================================================
+
+export type ThemeMode = 'light' | 'dark' | 'system';
+
+// =============================================================================
+// COLOR TYPES
+// =============================================================================
+
+export interface ThemeColors {
+  background: {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    inverse: string;
+  };
+  surface: {
+    primary: string;
+    secondary: string;
+    elevated: string;
+    overlay: string;
+  };
+  text: {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    disabled: string;
+    inverse: string;
+    link: string;
+  };
+  border: {
+    default: string;
+    subtle: string;
+    strong: string;
+    focus: string;
+  };
+  accent: {
+    primary: string;
+    primaryHover: string;
+    primaryPressed: string;
+    secondary: string;
+    secondaryHover: string;
+    secondaryPressed: string;
+  };
+  interactive: {
+    default: string;
+    hover: string;
+    pressed: string;
+    disabled: string;
+  };
+  feedback: {
+    success: string;
+    successLight: string;
+    successDark: string;
+    warning: string;
+    warningLight: string;
+    warningDark: string;
+    error: string;
+    errorLight: string;
+    errorDark: string;
+    info: string;
+    infoLight: string;
+    infoDark: string;
+  };
+  special: {
+    skeleton: string;
+    divider: string;
+    scrim: string;
+  };
+}
+
+// =============================================================================
+// TYPOGRAPHY TYPES
+// =============================================================================
+
+export interface TypographyStyle {
+  fontSize: number;
+  lineHeight: number;
+  fontWeight: TextStyle['fontWeight'];
+  letterSpacing: number;
+  textTransform?: TextStyle['textTransform'];
+}
+
+export interface ThemeTypography {
+  fontFamily: {
+    regular: string;
+    medium: string;
+    semibold: string;
+    bold: string;
+    mono: string;
+  };
+  presets: {
+    displayLarge: TypographyStyle;
+    displayMedium: TypographyStyle;
+    displaySmall: TypographyStyle;
+    headingLarge: TypographyStyle;
+    headingMedium: TypographyStyle;
+    headingSmall: TypographyStyle;
+    bodyLarge: TypographyStyle;
+    bodyMedium: TypographyStyle;
+    bodySmall: TypographyStyle;
+    labelLarge: TypographyStyle;
+    labelMedium: TypographyStyle;
+    labelSmall: TypographyStyle;
+    caption: TypographyStyle;
+    captionSmall: TypographyStyle;
+    overline: TypographyStyle;
+    code: TypographyStyle;
+  };
+}
+
+// =============================================================================
+// SHADOW TYPES
+// =============================================================================
+
+export type ShadowStyle = Pick<
+  ViewStyle,
+  'shadowColor' | 'shadowOffset' | 'shadowOpacity' | 'shadowRadius' | 'elevation'
+>;
+
+export interface ThemeElevation {
+  none: ShadowStyle;
+  xs: ShadowStyle;
+  sm: ShadowStyle;
+  md: ShadowStyle;
+  lg: ShadowStyle;
+  xl: ShadowStyle;
+  '2xl': ShadowStyle;
+}
+
+// =============================================================================
+// MOTION TYPES
+// =============================================================================
+
+export interface ThemeMotion {
+  duration: {
+    instant: number;
+    fastest: number;
+    fast: number;
+    normal: number;
+    slow: number;
+    slower: number;
+    slowest: number;
+  };
+  easing: {
+    standard: readonly [number, number, number, number];
+    entrance: readonly [number, number, number, number];
+    exit: readonly [number, number, number, number];
+    emphasized: readonly [number, number, number, number];
+    linear: readonly [number, number, number, number];
+    spring: readonly [number, number, number, number];
+  };
+}
+
+// =============================================================================
+// COMPLETE THEME TYPE
+// =============================================================================
+
+export interface Theme {
+  /** Theme identifier */
+  name: string;
+
+  /** Current color mode */
+  mode: 'light' | 'dark';
+
+  /** Semantic colors */
+  colors: ThemeColors;
+
+  /** Typography system */
+  typography: ThemeTypography;
+
+  /** Spacing scale */
+  spacing: {
+    none: number;
+    '2xs': number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    '2xl': number;
+    '3xl': number;
+    '4xl': number;
+    '5xl': number;
+    '6xl': number;
+    '7xl': number;
+    '8xl': number;
+  };
+
+  /** Border radii */
+  radii: {
+    none: number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    '2xl': number;
+    '3xl': number;
+    full: number;
+  };
+
+  /** Elevation/shadows */
+  elevation: ThemeElevation;
+
+  /** Motion tokens */
+  motion: ThemeMotion;
+
+  /** Icon sizes */
+  iconSize: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    '2xl': number;
+  };
+}
+
+// =============================================================================
+// THEME OVERRIDE TYPES
+// =============================================================================
+
+export type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+
+export type ThemeOverrides = DeepPartial<Theme>;
+
+// =============================================================================
+// THEME CONTEXT TYPES
+// =============================================================================
+
+export interface ThemeContextValue {
+  theme: Theme;
+  mode: ThemeMode;
+  setMode: (mode: ThemeMode) => void;
+  isDark: boolean;
+  toggleMode: () => void;
+}

package/src/providers/index.ts

@@ -0,0 +1,29 @@
+/**
+ * Providers Module
+ *
+ * Theme types and factories for the design system.
+ */
+
+export {
+  createTheme,
+  createThemePair,
+  horizonTheme,
+  sageTheme,
+  sunsetTheme,
+  oceanTheme,
+  lavenderTheme,
+  roseTheme,
+  lightTheme,
+  darkTheme,
+  defaultTheme,
+  type Theme,
+  type ThemeMode,
+  type ThemeColors,
+  type ThemeTypography,
+  type ThemeElevation,
+  type ThemeMotion,
+  type ThemeOverrides,
+  type TypographyStyle,
+  type ShadowStyle,
+  type DeepPartial,
+} from './ThemeProvider';