@praxiis/ui 0.0.1

package/src/tokens/shadows.ts

@@ -0,0 +1,190 @@
+/**
+ * StayEasy Design System - Shadow/Elevation Tokens
+ *
+ * Philosophy: Subtle, realistic, minimal.
+ * Shadows should be felt more than seen.
+ *
+ * Platform handling:
+ * - iOS: shadowColor/shadowOpacity/shadowRadius/shadowOffset
+ * - Android: elevation
+ *
+ * @example
+ * style={[styles.card, theme.elevation.md]}
+ */
+
+import { Platform, ViewStyle } from 'react-native';
+
+// =============================================================================
+// SHADOW DEFINITIONS
+// =============================================================================
+
+type ShadowStyle = Pick<
+  ViewStyle,
+  'shadowColor' | 'shadowOffset' | 'shadowOpacity' | 'shadowRadius' | 'elevation'
+>;
+
+/**
+ * Creates a cross-platform shadow
+ */
+const createShadow = (
+  offsetY: number,
+  blur: number,
+  opacity: number,
+  elevation: number
+): ShadowStyle => ({
+  shadowColor: '#000000',
+  shadowOffset: { width: 0, height: offsetY },
+  shadowOpacity: opacity,
+  shadowRadius: blur,
+  elevation: Platform.OS === 'android' ? elevation : 0,
+});
+
+// =============================================================================
+// ELEVATION SCALE
+// =============================================================================
+
+export const elevation = {
+  /** No shadow */
+  none: createShadow(0, 0, 0, 0),
+
+  /** Subtle lift - buttons hover, cards at rest */
+  xs: createShadow(1, 2, 0.05, 1),
+
+  /** Light shadow - active cards, dropdowns */
+  sm: createShadow(2, 4, 0.08, 2),
+
+  /** Medium shadow - floating cards, popovers */
+  md: createShadow(4, 8, 0.1, 4),
+
+  /** Prominent shadow - modals, sheets */
+  lg: createShadow(8, 16, 0.12, 8),
+
+  /** Heavy shadow - toasts, FAB */
+  xl: createShadow(12, 24, 0.15, 12),
+
+  /** Maximum shadow - dragging elements */
+  '2xl': createShadow(20, 32, 0.18, 16),
+} as const;
+
+// =============================================================================
+// SEMANTIC ELEVATION
+// =============================================================================
+
+export const semanticElevation = {
+  /** Cards at rest */
+  card: elevation.xs,
+
+  /** Card when pressed/hovered */
+  cardActive: elevation.sm,
+
+  /** Floating action button */
+  fab: elevation.lg,
+
+  /** Bottom navigation */
+  bottomNav: elevation.md,
+
+  /** Header/app bar */
+  header: elevation.sm,
+
+  /** Dropdown menus */
+  dropdown: elevation.md,
+
+  /** Modal dialogs */
+  modal: elevation.xl,
+
+  /** Bottom sheets */
+  sheet: elevation.xl,
+
+  /** Toast notifications */
+  toast: elevation.lg,
+
+  /** Sticky elements */
+  sticky: elevation.sm,
+} as const;
+
+// =============================================================================
+// OPACITY SCALE
+// =============================================================================
+
+export const opacity = {
+  /** Invisible */
+  0: 0,
+
+  /** Barely visible */
+  5: 0.05,
+
+  /** Very subtle */
+  10: 0.1,
+
+  /** Subtle */
+  20: 0.2,
+
+  /** Light */
+  30: 0.3,
+
+  /** Medium-light */
+  40: 0.4,
+
+  /** Medium */
+  50: 0.5,
+
+  /** Medium-heavy */
+  60: 0.6,
+
+  /** Heavy */
+  70: 0.7,
+
+  /** Very heavy */
+  80: 0.8,
+
+  /** Almost opaque */
+  90: 0.9,
+
+  /** Fully opaque */
+  100: 1,
+} as const;
+
+// =============================================================================
+// Z-INDEX SCALE
+// =============================================================================
+
+export const zIndex = {
+  /** Below everything */
+  behind: -1,
+
+  /** Default layer */
+  base: 0,
+
+  /** Slightly raised */
+  raised: 10,
+
+  /** Dropdown menus */
+  dropdown: 100,
+
+  /** Sticky headers */
+  sticky: 200,
+
+  /** Overlays and backdrops */
+  overlay: 300,
+
+  /** Modal dialogs */
+  modal: 400,
+
+  /** Popovers and tooltips */
+  popover: 500,
+
+  /** Toast notifications */
+  toast: 600,
+
+  /** Maximum (debug tools, etc.) */
+  max: 9999,
+} as const;
+
+// =============================================================================
+// TYPE EXPORTS
+// =============================================================================
+
+export type Elevation = typeof elevation;
+export type ElevationKey = keyof typeof elevation;
+export type Opacity = typeof opacity;
+export type ZIndex = typeof zIndex;

package/src/tokens/spacing.ts

@@ -0,0 +1,140 @@
+/**
+ * StayEasy Design System - Spacing Tokens
+ *
+ * Based on a 4pt grid system for consistent rhythm.
+ * All spacing values are multiples of 4.
+ *
+ * @example
+ * padding: theme.spacing.md // 16
+ */
+
+// =============================================================================
+// SPACING SCALE (4pt grid)
+// =============================================================================
+
+export const spacing = {
+  /** 0 - No spacing */
+  none: 0,
+
+  /** 2 - Minimal spacing (half unit) */
+  '2xs': 2,
+
+  /** 4 - Tight spacing */
+  xs: 4,
+
+  /** 8 - Compact spacing */
+  sm: 8,
+
+  /** 12 - Comfortable compact */
+  md: 12,
+
+  /** 16 - Standard spacing */
+  lg: 16,
+
+  /** 20 - Comfortable spacing */
+  xl: 20,
+
+  /** 24 - Generous spacing */
+  '2xl': 24,
+
+  /** 32 - Section spacing */
+  '3xl': 32,
+
+  /** 40 - Large section spacing */
+  '4xl': 40,
+
+  /** 48 - Extra large spacing */
+  '5xl': 48,
+
+  /** 64 - Huge spacing */
+  '6xl': 64,
+
+  /** 80 - Maximum spacing */
+  '7xl': 80,
+
+  /** 96 - Ultra spacing */
+  '8xl': 96,
+} as const;
+
+// =============================================================================
+// SEMANTIC SPACING
+// =============================================================================
+
+export const semanticSpacing = {
+  // Screen padding (horizontal safe area)
+  screenHorizontal: spacing.lg, // 16
+
+  // Screen padding (vertical)
+  screenVertical: spacing['2xl'], // 24
+
+  // Component internal padding
+  component: {
+    xs: spacing.xs,   // 4 - Chips, badges
+    sm: spacing.sm,   // 8 - Small buttons
+    md: spacing.md,   // 12 - Standard buttons
+    lg: spacing.lg,   // 16 - Cards, inputs
+    xl: spacing.xl,   // 20 - Large cards
+  },
+
+  // Stack spacing (between items in a list)
+  stack: {
+    xs: spacing.xs,   // 4 - Tight list
+    sm: spacing.sm,   // 8 - Compact list
+    md: spacing.md,   // 12 - Standard list
+    lg: spacing.lg,   // 16 - Comfortable list
+    xl: spacing['2xl'], // 24 - Spacious list
+  },
+
+  // Inline spacing (between horizontal items)
+  inline: {
+    xs: spacing.xs,   // 4
+    sm: spacing.sm,   // 8
+    md: spacing.md,   // 12
+    lg: spacing.lg,   // 16
+  },
+
+  // Section spacing
+  section: {
+    sm: spacing['2xl'], // 24
+    md: spacing['3xl'], // 32
+    lg: spacing['5xl'], // 48
+  },
+} as const;
+
+// =============================================================================
+// TOUCH TARGETS
+// =============================================================================
+
+export const touchTarget = {
+  /** Minimum touch target (44x44 per Apple HIG) */
+  min: 44,
+
+  /** Standard button height */
+  standard: 48,
+
+  /** Large button height */
+  large: 56,
+} as const;
+
+// =============================================================================
+// HIT SLOP (for smaller visual elements)
+// =============================================================================
+
+export const hitSlop = {
+  /** Minimal hit slop expansion */
+  sm: { top: 8, bottom: 8, left: 8, right: 8 },
+
+  /** Standard hit slop expansion */
+  md: { top: 12, bottom: 12, left: 12, right: 12 },
+
+  /** Large hit slop expansion */
+  lg: { top: 16, bottom: 16, left: 16, right: 16 },
+} as const;
+
+// =============================================================================
+// TYPE EXPORTS
+// =============================================================================
+
+export type Spacing = typeof spacing;
+export type SemanticSpacing = typeof semanticSpacing;
+export type SpacingKey = keyof typeof spacing;

package/src/tokens/tokens.json

@@ -0,0 +1,207 @@
+{
+  "$schema": "https://stayeasy.design/tokens.schema.json",
+  "version": "1.0.0",
+  "description": "StayEasy Design System Tokens",
+
+  "colors": {
+    "base": {
+      "transparent": "transparent",
+      "white": "#FFFFFF",
+      "black": "#000000",
+      "coral": {
+        "50": "#FFF5F5",
+        "100": "#FFE5E5",
+        "200": "#FFCCCC",
+        "300": "#FFADAD",
+        "400": "#FF8585",
+        "500": "#FF5A5F",
+        "600": "#E54B50",
+        "700": "#CC3D41",
+        "800": "#B22E32",
+        "900": "#991F23"
+      },
+      "teal": {
+        "50": "#F0FDFA",
+        "100": "#CCFBF1",
+        "200": "#99F6E4",
+        "300": "#5EEAD4",
+        "400": "#2DD4BF",
+        "500": "#14B8A6",
+        "600": "#0D9488",
+        "700": "#0F766E",
+        "800": "#115E59",
+        "900": "#134E4A"
+      },
+      "gray": {
+        "50": "#FAFAF9",
+        "100": "#F5F5F4",
+        "200": "#E7E5E4",
+        "300": "#D6D3D1",
+        "400": "#A8A29E",
+        "500": "#78716C",
+        "600": "#57534E",
+        "700": "#44403C",
+        "800": "#292524",
+        "900": "#1C1917"
+      },
+      "green": {
+        "50": "#F0FDF4",
+        "100": "#DCFCE7",
+        "200": "#BBF7D0",
+        "300": "#86EFAC",
+        "400": "#4ADE80",
+        "500": "#22C55E",
+        "600": "#16A34A",
+        "700": "#15803D",
+        "800": "#166534",
+        "900": "#14532D"
+      },
+      "amber": {
+        "50": "#FFFBEB",
+        "100": "#FEF3C7",
+        "200": "#FDE68A",
+        "300": "#FCD34D",
+        "400": "#FBBF24",
+        "500": "#F59E0B",
+        "600": "#D97706",
+        "700": "#B45309",
+        "800": "#92400E",
+        "900": "#78350F"
+      },
+      "red": {
+        "50": "#FEF2F2",
+        "100": "#FEE2E2",
+        "200": "#FECACA",
+        "300": "#FCA5A5",
+        "400": "#F87171",
+        "500": "#EF4444",
+        "600": "#DC2626",
+        "700": "#B91C1C",
+        "800": "#991B1B",
+        "900": "#7F1D1D"
+      },
+      "blue": {
+        "50": "#EFF6FF",
+        "100": "#DBEAFE",
+        "200": "#BFDBFE",
+        "300": "#93C5FD",
+        "400": "#60A5FA",
+        "500": "#3B82F6",
+        "600": "#2563EB",
+        "700": "#1D4ED8",
+        "800": "#1E40AF",
+        "900": "#1E3A8A"
+      }
+    }
+  },
+
+  "typography": {
+    "fontFamily": {
+      "regular": "System",
+      "medium": "System",
+      "semibold": "System",
+      "bold": "System",
+      "mono": "monospace"
+    },
+    "fontWeight": {
+      "regular": "400",
+      "medium": "500",
+      "semibold": "600",
+      "bold": "700"
+    },
+    "fontSize": {
+      "xs": 11,
+      "sm": 13,
+      "md": 15,
+      "lg": 17,
+      "xl": 20,
+      "2xl": 24,
+      "3xl": 30,
+      "4xl": 36,
+      "5xl": 48
+    },
+    "lineHeight": {
+      "tight": 1.2,
+      "snug": 1.375,
+      "normal": 1.5,
+      "relaxed": 1.625,
+      "loose": 2
+    },
+    "letterSpacing": {
+      "tighter": -0.8,
+      "tight": -0.4,
+      "normal": 0,
+      "wide": 0.4,
+      "wider": 0.8,
+      "widest": 1.6
+    }
+  },
+
+  "spacing": {
+    "none": 0,
+    "2xs": 2,
+    "xs": 4,
+    "sm": 8,
+    "md": 12,
+    "lg": 16,
+    "xl": 20,
+    "2xl": 24,
+    "3xl": 32,
+    "4xl": 40,
+    "5xl": 48,
+    "6xl": 64,
+    "7xl": 80,
+    "8xl": 96
+  },
+
+  "radii": {
+    "none": 0,
+    "xs": 4,
+    "sm": 8,
+    "md": 12,
+    "lg": 16,
+    "xl": 20,
+    "2xl": 24,
+    "3xl": 32,
+    "full": 9999
+  },
+
+  "elevation": {
+    "none": { "offsetY": 0, "blur": 0, "opacity": 0, "android": 0 },
+    "xs": { "offsetY": 1, "blur": 2, "opacity": 0.05, "android": 1 },
+    "sm": { "offsetY": 2, "blur": 4, "opacity": 0.08, "android": 2 },
+    "md": { "offsetY": 4, "blur": 8, "opacity": 0.1, "android": 4 },
+    "lg": { "offsetY": 8, "blur": 16, "opacity": 0.12, "android": 8 },
+    "xl": { "offsetY": 12, "blur": 24, "opacity": 0.15, "android": 12 },
+    "2xl": { "offsetY": 20, "blur": 32, "opacity": 0.18, "android": 16 }
+  },
+
+  "motion": {
+    "duration": {
+      "instant": 0,
+      "fastest": 100,
+      "fast": 150,
+      "normal": 200,
+      "slow": 300,
+      "slower": 400,
+      "slowest": 500
+    },
+    "easing": {
+      "standard": [0.2, 0, 0, 1],
+      "entrance": [0.4, 0, 1, 1],
+      "exit": [0, 0, 0.2, 1],
+      "emphasized": [0.2, 0, 0, 1],
+      "linear": [0, 0, 1, 1],
+      "spring": [0.175, 0.885, 0.32, 1.275]
+    }
+  },
+
+  "iconSize": {
+    "xs": 16,
+    "sm": 20,
+    "md": 24,
+    "lg": 32,
+    "xl": 40,
+    "2xl": 48
+  }
+}