@campxdev/react-native-blueprint 0.1.1 → 0.1.3

package/lib/typescript/src/lib/theme.d.ts

@@ -1,9 +1,87 @@
-export const THEME: {
-  light: Record<string, string>;
-  dark: Record<string, string>;
-};
-
-export const NAV_THEME: {
-  light: Record<string, string>;
-  dark: Record<string, string>;
+import { type Theme } from '@react-navigation/native';
+/**
+ * Custom theme colors based on your Figma design tokens
+ * Using your categorized color system:
+ * 1. Surfaces - Page and card backgrounds
+ * 2. Text - All text colors with opacity variants
+ * 3. Primary - Main buttons and CTAs
+ * 4. Secondary - Secondary buttons
+ * 5. Tertiary/Accent - Highlights and selections
+ * 6. Borders - All borders and dividers
+ * 7. Highlights - Status/semantic colors
+ * 8. Brand - Brand accent colors (use sparingly)
+ */
+export declare const THEME: {
+    light: {
+        background: string;
+        card: string;
+        popover: string;
+        muted: string;
+        foreground: string;
+        cardForeground: string;
+        popoverForeground: string;
+        mutedForeground: string;
+        primary: string;
+        primaryForeground: string;
+        secondary: string;
+        secondaryForeground: string;
+        accent: string;
+        accentForeground: string;
+        border: string;
+        input: string;
+        ring: string;
+        destructive: string;
+        destructiveForeground: string;
+        success: string;
+        info: string;
+        warning: string;
+        brand1: string;
+        brand2: string;
+        brand3: string;
+        chart1: string;
+        chart2: string;
+        chart3: string;
+        chart4: string;
+        chart5: string;
+        radius: string;
+    };
+    dark: {
+        background: string;
+        card: string;
+        popover: string;
+        muted: string;
+        foreground: string;
+        cardForeground: string;
+        popoverForeground: string;
+        mutedForeground: string;
+        primary: string;
+        primaryForeground: string;
+        secondary: string;
+        secondaryForeground: string;
+        accent: string;
+        accentForeground: string;
+        border: string;
+        input: string;
+        ring: string;
+        destructive: string;
+        destructiveForeground: string;
+        success: string;
+        info: string;
+        warning: string;
+        brand1: string;
+        brand2: string;
+        brand3: string;
+        chart1: string;
+        chart2: string;
+        chart3: string;
+        chart4: string;
+        chart5: string;
+        radius: string;
+    };
 };
+/**
+ * React Navigation theme configuration
+ * Maps our custom theme to React Navigation's theme structure
+ */
+export declare const NAV_THEME: Record<'light' | 'dark', Theme>;
+//# sourceMappingURL=theme.d.ts.map

package/lib/typescript/src/lib/utils.d.ts

@@ -1 +1,111 @@
-export function cn(...inputs: any[]): string;
+import { type ClassValue } from 'clsx';
+/**
+ * Utility function to merge Tailwind CSS classes with proper precedence
+ *
+ * Combines clsx (for conditional classes) and tailwind-merge (for deduplication)
+ * to create a single, optimized class string. Later classes override earlier ones.
+ *
+ * @param {...ClassValue[]} inputs - Class values to merge (strings, objects, arrays)
+ * @returns {string} Merged and deduplicated class string
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * cn('px-2 py-1', 'px-4') // => 'py-1 px-4'
+ *
+ * // With conditionals
+ * cn('text-base', isDark && 'text-white', 'font-bold')
+ * // => 'text-base text-white font-bold' (if isDark is true)
+ *
+ * // With objects
+ * cn({
+ *   'bg-primary': isPrimary,
+ *   'bg-secondary': !isPrimary
+ * })
+ *
+ * // Common component pattern
+ * cn('base-classes', variant === 'large' && 'large-classes', className)
+ * ```
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Applies dark mode classes with optional runtime control
+ *
+ * Provides three modes of operation:
+ * 1. Static mode (darkMode undefined): Returns classes with `dark:` prefix for automatic switching
+ * 2. Dark mode (darkMode true): Strips `dark:` prefix and returns only dark classes
+ * 3. Light mode (darkMode false): Returns only base classes
+ *
+ * This function is useful when you need to programmatically control dark mode
+ * instead of relying on Tailwind's automatic dark mode detection.
+ *
+ * @param {string} baseClasses - Classes to apply in light mode
+ * @param {string} darkClasses - Classes to apply in dark mode (with or without `dark:` prefix)
+ * @param {boolean} [darkMode] - Optional dark mode override (true/false/undefined)
+ * @returns {string} Merged class string based on mode
+ *
+ * @example
+ * ```tsx
+ * // Static mode - use Tailwind's automatic detection
+ * cnWithDark('bg-white', 'dark:bg-black')
+ * // => 'bg-white dark:bg-black'
+ *
+ * // Programmatic dark mode
+ * const { isDark } = useTheme();
+ * cnWithDark('bg-white', 'dark:bg-black', isDark)
+ * // => 'bg-black' (if isDark is true)
+ * // => 'bg-white' (if isDark is false)
+ *
+ * // With multiple classes
+ * cnWithDark(
+ *   'bg-white text-black border-gray-200',
+ *   'dark:bg-black dark:text-white dark:border-gray-800',
+ *   isDark
+ * )
+ * ```
+ *
+ * @see {@link cn} for basic class merging
+ * @see {@link useTheme} for accessing theme state
+ */
+export declare function cnWithDark(baseClasses: string, darkClasses: string, darkMode?: boolean): string;
+/**
+ * Get color value based on theme mode
+ *
+ * Simple utility to select between light and dark color values based on the
+ * current theme. Primarily used for native platforms where Tailwind CSS
+ * classes don't work with inline styles.
+ *
+ * @param {string} lightColor - Color value for light mode (CSS color, HSL, RGB, hex)
+ * @param {string} darkColor - Color value for dark mode (CSS color, HSL, RGB, hex)
+ * @param {boolean} [darkMode] - Whether dark mode is active (defaults to light if undefined)
+ * @returns {string} The appropriate color value for the current mode
+ *
+ * @example
+ * ```tsx
+ * import { useTheme } from './ThemeProvider';
+ *
+ * function MyComponent() {
+ *   const { isDark } = useTheme();
+ *
+ *   // Get color for inline styles
+ *   const textColor = getThemeColor('#000000', '#ffffff', isDark);
+ *   const bgColor = getThemeColor('hsl(0, 0%, 100%)', 'hsl(0, 0%, 10%)', isDark);
+ *
+ *   return (
+ *     <View style={{ backgroundColor: bgColor }}>
+ *       <NativeText style={{ color: textColor }}>
+ *         Theme-aware text
+ *       </NativeText>
+ *     </View>
+ *   );
+ * }
+ *
+ * // Without theme context (defaults to light)
+ * const color = getThemeColor('#000', '#fff'); // => '#000'
+ * ```
+ *
+ * @see {@link useTheme} for accessing theme state
+ * @see {@link getThemeColorValue} from theme-config for more advanced usage
+ */
+export declare function getThemeColor(lightColor: string, darkColor: string, darkMode?: boolean): string;
+//# sourceMappingURL=utils.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-native-blueprint",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "This is a react-native package for mobile apps",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -37,8 +37,7 @@
     "typecheck": "tsc",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "clean": "del-cli lib",
-    "prepare": "bob build --target module",
-    "build:full": "bob build",
+    "prepare": "bob build",
     "release": "release-it --only-version"
   },
   "keywords": [
@@ -141,12 +140,6 @@
         {
           "esm": true
         }
-      ],
-      [
-        "typescript",
-        {
-          "project": "tsconfig.build.json"
-        }
       ]
     ]
   },

package/src/app/_layout.tsx

@@ -1,4 +1,4 @@
-import '../../global.css';
+import '../global.css';
 import { PortalHost } from '@rn-primitives/portal';
 import { StatusBar } from 'react-native';
 import { NAV_THEME } from '../lib/theme';

package/src/components/ui/index.ts

@@ -21,6 +21,7 @@ export * from './Icon';
 export * from './Input';
 export * from './Label';
 export * from './Menubar';
+export * from './Native-Only-Animated-View';
 export * from './NavBar';
 export * from './Popover';
 export * from './Progress';

package/src/global.css

@@ -0,0 +1,417 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  /* === 1. SURFACES === */
+  --background: 210 17% 97%;  /* #F7F8FA */
+  --card: 0 0% 100%;  /* #FFFFFF */
+  --popover: 0 0% 100%;  /* #FFFFFF */
+  --muted: 0 0% 100%;  /* #FFFFFF - Same as card for consistency */
+
+  /* === 2. TEXT === */
+  --foreground: 0 0% 7%;  /* #121212 */
+  --card-foreground: 0 0% 7%;  /* #121212 */
+  --popover-foreground: 0 0% 7%;  /* #121212 */
+  --muted-foreground: 0 0% 7% / 0.7;  /* #121212 at 70% opacity */
+
+  /* === 3. PRIMARY (Main buttons, CTAs) === */
+  --primary: 200 13% 11%;  /* #161A1D - Near black */
+  --primary-foreground: 0 0% 100%;  /* #FFFFFF */
+
+  /* === 4. SECONDARY (Secondary buttons) === */
+  --secondary: 218 14% 53%;  /* #64748B */
+  --secondary-foreground: 0 0% 100%;  /* #FFFFFF */
+
+  /* === 5. TERTIARY/ACCENT (Highlights, selections) === */
+  --accent: 356 76% 57%;  /* #E43341 - Crimson */
+  --accent-foreground: 0 0% 100%;  /* #FFFFFF */
+
+  /* === 6. BORDERS === */
+  --border: 214 32% 84%;  /* #CBD5E1 */
+  --input: 214 32% 84%;  /* #CBD5E1 */
+  --ring: 200 13% 11%;  /* #161A1D - Same as primary */
+
+  /* === 7. HIGHLIGHTS === */
+  --destructive: 356 87% 57%;  /* #F2353C - Red */
+  --destructive-foreground: 0 0% 100%;
+  --success: 88 37% 52%;  /* #88B053 - Green */
+  --info: 189 45% 51%;  /* #4BAABE - Blue */
+  --warning: 28 81% 57%;  /* #ED9035 - Orange */
+
+  /* === 8. BRAND COLORS (Custom - use manually) === */
+  --brand-1: 252 97% 25%;  /* #1E027F - Deep violet */
+  --brand-2: 356 76% 57%;  /* #E43341 - Crimson */
+  --brand-3: 304 69% 33%;  /* #931C88 - Magenta */
+
+  /* === CHART COLORS === */
+  --chart-1: 88 37% 52%;  /* #88B053 - Green */
+  --chart-2: 189 45% 51%;  /* #4BAABE - Blue */
+  --chart-3: 28 81% 57%;  /* #ED9035 - Orange */
+  --chart-4: 254 46% 42%;  /* #573DAB - Purple */
+  --chart-5: 348 78% 60%;  /* #EA4A6B - Pink */
+
+  /* === SIDEBAR === */
+  --sidebar: 0 0% 100%;  /* #FFFFFF */
+  --sidebar-foreground: 0 0% 7%;  /* #121212 */
+  --sidebar-primary: 214 14% 64%;  /* #94A3B8 */
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 356 76% 57%;  /* #E43341 */
+  --sidebar-accent-foreground: 0 0% 100%;
+  --sidebar-border: 214 32% 84%;  /* #CBD5E1 */
+  --sidebar-ring: 214 14% 64%;  /* #94A3B8 */
+
+  /* === FONTS === */
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+  /* === PRIMITIVE SPACING TOKENS (From Figma) === */
+  /* These are your base spacing values - rarely changed directly */
+  --space-0: 0px;    /* S0 */
+  --space-1: 2px;    /* S1 */
+  --space-2: 4px;    /* S2 */
+  --space-3: 8px;    /* S3 */
+  --space-4: 12px;   /* S4 */
+  --space-5: 16px;   /* S5 */
+  --space-6: 20px;   /* S6 */
+  --space-7: 24px;   /* S7 */
+  --space-8: 32px;   /* S8 */
+  --space-9: 48px;   /* S9 */
+  --space-10: 52px;  /* S10 */
+
+  /* === SEMANTIC SPACING TOKENS === */
+  /* These reference primitives and are what components actually use */
+  /* Change these to globally update spacing across all components */
+  --spacing-none: var(--space-0);
+  --spacing-xs: var(--space-2);      /* Tight spacing - small gaps */
+  --spacing-sm: var(--space-3);      /* Small spacing - compact layouts */
+  --spacing-md: var(--space-5);      /* Medium spacing - default gaps */
+  --spacing-lg: var(--space-7);      /* Large spacing - breathing room */
+  --spacing-xl: var(--space-8);      /* Extra large - section spacing */
+  --spacing-2xl: var(--space-9);     /* 2X large - major sections */
+
+  /* Component-specific spacing (can be changed independently) */
+  --spacing-button-x: var(--space-5);    /* Button horizontal padding */
+  --spacing-button-y: var(--space-4);    /* Button vertical padding */
+  --spacing-card: var(--space-5);        /* Card padding */
+  --spacing-input-x: var(--space-4);     /* Input horizontal padding */
+  --spacing-input-y: var(--space-3);     /* Input vertical padding */
+
+  /* === PRIMITIVE RADIUS TOKENS (From Your Design System) === */
+  /* Your exact radius values: 0, 2, 4, 8, 12, 20, 24, 32, 48 */
+  --radius-0: 0px;    /* R0 */
+  --radius-1: 2px;    /* R1 */
+  --radius-2: 4px;    /* R2 */
+  --radius-3: 8px;    /* R3 */
+  --radius-4: 12px;   /* R4 */
+  --radius-5: 20px;   /* R5 */
+  --radius-6: 24px;   /* R6 */
+  --radius-7: 32px;   /* R7 */
+  --radius-8: 48px;   /* R8 */
+
+  /* === SEMANTIC RADIUS TOKENS === */
+  /* Pre-defined names for convenience - you can use primitives directly in components */
+  --radius-none: var(--radius-0);    /* 0px */
+  --radius-sm: var(--radius-2);      /* 4px */
+  --radius-md: var(--radius-4);      /* 12px */
+  --radius-lg: var(--radius-5);      /* 20px */
+  --radius-xl: var(--radius-6);      /* 24px */
+  --radius-2xl: var(--radius-7);     /* 32px */
+  --radius-full: 9999px;             /* Fully rounded - pills, avatars */
+
+  /* Corner smoothing value (0-1, where 1 = 100% smoothing) */
+  --corner-smoothing: 1.0;  /* 100% Apple-style smoothing for all corners */
+
+  /* === ICON SIZES (From Figma) === */
+  --icon-sm: 16px;   /* WH3 - Small icons */
+  --icon-md: 20px;   /* WH2 - Medium icons */
+  --icon-lg: 24px;   /* WH1 - Large icons */
+
+  /* === SHADOWS === */
+  --shadow-x: 0;
+  --shadow-y: 1px;
+  --shadow-blur: 3px;
+  --shadow-spread: 0px;
+  --shadow-opacity: 0.1;
+  --shadow-color: 0 0% 0%;
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+
+  /* === LEGACY (kept for backwards compatibility) === */
+  --radius: var(--radius-3);  /* Default radius - use semantic tokens instead */
+  --spacing: var(--space-2);  /* Default spacing - use semantic tokens instead */
+  --tracking-normal: 0em;
+}
+
+.dark {
+  /* === 1. SURFACES === */
+  --background: 200 13% 10%;  /* #161A1D */
+  --card: 180 14% 13%;  /* #1D2727 */
+  --popover: 180 14% 13%;  /* #1D2727 */
+  --muted: 180 14% 13%;  /* #1D2727 - Same as card for consistency */
+
+  /* === 2. TEXT === */
+  --foreground: 0 0% 100%;  /* #FFFFFF */
+  --card-foreground: 0 0% 100%;  /* #FFFFFF */
+  --popover-foreground: 0 0% 100%;  /* #FFFFFF */
+  --muted-foreground: 0 0% 100% / 0.7;  /* #FFFFFF at 70% opacity */
+
+  /* === 3. PRIMARY (Main buttons, CTAs) === */
+  --primary: 210 13% 85%;  /* #D0D5D9 - Light grey (softer than white) */
+  --primary-foreground: 200 13% 11%;  /* #161A1D - Dark text */
+
+  /* === 4. SECONDARY (Secondary buttons) === */
+  --secondary: 218 14% 53%;  /* #64748B */
+  --secondary-foreground: 0 0% 100%;  /* #FFFFFF */
+
+  /* === 5. TERTIARY/ACCENT (Highlights, selections) === */
+  --accent: 356 76% 57%;  /* #E43341 - Crimson */
+  --accent-foreground: 0 0% 100%;  /* #FFFFFF */
+
+  /* === 6. BORDERS === */
+  --border: 215 25% 27%;  /* #334155 - Balanced slate-700 */
+  --input: 215 25% 27%;  /* #334155 */
+  --ring: 210 13% 85%;  /* #D0D5D9 - Same as primary */
+
+  /* === 7. HIGHLIGHTS === */
+  --destructive: 356 87% 57%;  /* #F2353C - Red */
+  --destructive-foreground: 0 0% 100%;
+  --success: 88 37% 52%;  /* #88B053 - Green */
+  --info: 189 45% 51%;  /* #4BAABE - Blue */
+  --warning: 28 81% 57%;  /* #ED9035 - Orange */
+
+  /* === 8. BRAND COLORS (Custom - use manually) === */
+  --brand-1: 244 100% 73%;  /* #8075FF - Cool violet */
+  --brand-2: 356 76% 57%;  /* #E43341 - Crimson */
+  --brand-3: 291 46% 61%;  /* #C160D4 - Light magenta */
+
+  /* === CHART COLORS === */
+  --chart-1: 88 37% 52%;  /* #88B053 - Green */
+  --chart-2: 189 45% 51%;  /* #4BAABE - Blue */
+  --chart-3: 28 81% 57%;  /* #ED9035 - Orange */
+  --chart-4: 254 46% 42%;  /* #573DAB - Purple */
+  --chart-5: 348 78% 60%;  /* #EA4A6B - Pink */
+
+  /* === SIDEBAR === */
+  --sidebar: 180 14% 13%;  /* #1D2727 */
+  --sidebar-foreground: 0 0% 100%;  /* #FFFFFF */
+  --sidebar-primary: 214 14% 64%;  /* #94A3B8 */
+  --sidebar-primary-foreground: 200 13% 10%;  /* #161A1D */
+  --sidebar-accent: 356 76% 57%;  /* #E43341 */
+  --sidebar-accent-foreground: 0 0% 100%;
+  --sidebar-border: 215 25% 27%;  /* #334155 */
+  --sidebar-ring: 214 14% 64%;  /* #94A3B8 */
+
+  /* === FONTS === */
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+  /* === PRIMITIVE SPACING TOKENS (From Figma) === */
+  /* Spacing values are the same in light and dark mode */
+  --space-0: 0px;    /* S0 */
+  --space-1: 2px;    /* S1 */
+  --space-2: 4px;    /* S2 */
+  --space-3: 8px;    /* S3 */
+  --space-4: 12px;   /* S4 */
+  --space-5: 16px;   /* S5 */
+  --space-6: 20px;   /* S6 */
+  --space-7: 24px;   /* S7 */
+  --space-8: 32px;   /* S8 */
+  --space-9: 48px;   /* S9 */
+  --space-10: 52px;  /* S10 */
+
+  /* === SEMANTIC SPACING TOKENS === */
+  --spacing-none: var(--space-0);
+  --spacing-xs: var(--space-2);
+  --spacing-sm: var(--space-3);
+  --spacing-md: var(--space-5);
+  --spacing-lg: var(--space-7);
+  --spacing-xl: var(--space-8);
+  --spacing-2xl: var(--space-9);
+
+  /* Component-specific spacing */
+  --spacing-button-x: var(--space-5);
+  --spacing-button-y: var(--space-4);
+  --spacing-card: var(--space-5);
+  --spacing-input-x: var(--space-4);
+  --spacing-input-y: var(--space-3);
+
+  /* === PRIMITIVE RADIUS TOKENS (From Your Design System) === */
+  /* Radius values are the same in light and dark mode */
+  --radius-0: 0px;    /* R0 */
+  --radius-1: 2px;    /* R1 */
+  --radius-2: 4px;    /* R2 */
+  --radius-3: 8px;    /* R3 */
+  --radius-4: 12px;   /* R4 */
+  --radius-5: 20px;   /* R5 */
+  --radius-6: 24px;   /* R6 */
+  --radius-7: 32px;   /* R7 */
+  --radius-8: 48px;   /* R8 */
+
+  /* === SEMANTIC RADIUS TOKENS === */
+  --radius-none: var(--radius-0);    /* 0px */
+  --radius-sm: var(--radius-2);      /* 4px */
+  --radius-md: var(--radius-4);      /* 12px */
+  --radius-lg: var(--radius-5);      /* 20px */
+  --radius-xl: var(--radius-6);      /* 24px */
+  --radius-2xl: var(--radius-7);     /* 32px */
+  --radius-full: 9999px;             /* Fully rounded */
+
+  /* Corner smoothing value */
+  --corner-smoothing: 1.0;  /* 100% smoothing */
+
+  /* === ICON SIZES (From Figma) === */
+  --icon-sm: 16px;   /* WH3 */
+  --icon-md: 20px;   /* WH2 */
+  --icon-lg: 24px;   /* WH1 */
+
+  /* === SHADOWS === */
+  --shadow-x: 0;
+  --shadow-y: 1px;
+  --shadow-blur: 3px;
+  --shadow-spread: 0px;
+  --shadow-opacity: 0.1;
+  --shadow-color: 0 0% 0%;
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+
+  /* === LEGACY (kept for backwards compatibility) === */
+  --radius: var(--radius-3);
+  --spacing: var(--space-2);
+  --tracking-normal: 0em;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* Brand colors */
+  --color-brand-1: var(--brand-1);
+  --color-brand-2: var(--brand-2);
+  --color-brand-3: var(--brand-3);
+
+  /* Highlight colors */
+  --color-success: var(--success);
+  --color-info: var(--info);
+  --color-warning: var(--warning);
+
+  /* Chart colors */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  /* Sidebar colors */
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-serif: var(--font-serif);
+
+  /* Primitive spacing tokens (S0-S10 from Figma) */
+  --space-0: var(--space-0);
+  --space-1: var(--space-1);
+  --space-2: var(--space-2);
+  --space-3: var(--space-3);
+  --space-4: var(--space-4);
+  --space-5: var(--space-5);
+  --space-6: var(--space-6);
+  --space-7: var(--space-7);
+  --space-8: var(--space-8);
+  --space-9: var(--space-9);
+  --space-10: var(--space-10);
+
+  /* Semantic spacing tokens */
+  --spacing-none: var(--spacing-none);
+  --spacing-xs: var(--spacing-xs);
+  --spacing-sm: var(--spacing-sm);
+  --spacing-md: var(--spacing-md);
+  --spacing-lg: var(--spacing-lg);
+  --spacing-xl: var(--spacing-xl);
+  --spacing-2xl: var(--spacing-2xl);
+
+  /* Component-specific spacing */
+  --spacing-button-x: var(--spacing-button-x);
+  --spacing-button-y: var(--spacing-button-y);
+  --spacing-card: var(--spacing-card);
+  --spacing-input-x: var(--spacing-input-x);
+  --spacing-input-y: var(--spacing-input-y);
+
+  /* Primitive radius tokens (R0-R8) */
+  --radius-0: var(--radius-0);
+  --radius-1: var(--radius-1);
+  --radius-2: var(--radius-2);
+  --radius-3: var(--radius-3);
+  --radius-4: var(--radius-4);
+  --radius-5: var(--radius-5);
+  --radius-6: var(--radius-6);
+  --radius-7: var(--radius-7);
+  --radius-8: var(--radius-8);
+
+  /* Semantic radius tokens */
+  --radius-none: var(--radius-none);
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
+  --radius-2xl: var(--radius-2xl);
+  --radius-full: var(--radius-full);
+
+
+  /* Corner smoothing */
+  --corner-smoothing: var(--corner-smoothing);
+
+  /* Icon sizes */
+  --icon-sm: var(--icon-sm);
+  --icon-md: var(--icon-md);
+  --icon-lg: var(--icon-lg);
+
+  /* Shadows */
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+}