@aurora-ds/theme 2.0.0 → 3.0.0

package/dist/index.d.cts

@@ -2,9 +2,138 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, CSSProperties } from 'react';
 export { CSSProperties } from 'react';
 
+/**
+ * Default token values for theme creation - V3
+ * TypeScript infers the types automatically from the values using `as const`
+ * Note: No default colors/palette - colors must be defined by the user
+ */
+/**
+ * Default spacing scale
+ */
+declare const defaultSpacing: {
+    readonly none: "0";
+    readonly '2xs': "0.125rem";
+    readonly xs: "0.25rem";
+    readonly sm: "0.5rem";
+    readonly md: "1rem";
+    readonly lg: "1.5rem";
+    readonly xl: "2rem";
+    readonly '2xl': "3rem";
+    readonly '3xl': "4rem";
+    readonly '4xl': "6rem";
+    readonly '5xl': "8rem";
+};
+/**
+ * Default border radius scale
+ */
+declare const defaultRadius: {
+    readonly none: "0";
+    readonly xs: "0.125rem";
+    readonly sm: "0.25rem";
+    readonly md: "0.375rem";
+    readonly lg: "0.5rem";
+    readonly xl: "0.75rem";
+    readonly '2xl': "1rem";
+    readonly full: "9999px";
+};
+/**
+ * Default shadow scale
+ */
+declare const defaultShadows: {
+    readonly none: "none";
+    readonly xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+    readonly sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+    readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+    readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+    readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
+    readonly '2xl': "0 25px 50px -12px rgb(0 0 0 / 0.25)";
+    readonly inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)";
+    readonly focus: "0 0 0 3px rgb(99 102 241 / 0.4)";
+};
+/**
+ * Default font size scale
+ */
+declare const defaultFontSize: {
+    readonly '2xs': "0.625rem";
+    readonly xs: "0.75rem";
+    readonly sm: "0.875rem";
+    readonly md: "1rem";
+    readonly lg: "1.25rem";
+    readonly xl: "1.5rem";
+    readonly '2xl': "2rem";
+    readonly '3xl': "2.5rem";
+    readonly '4xl': "3rem";
+    readonly '5xl': "4rem";
+};
+/**
+ * Default font weight scale
+ */
+declare const defaultFontWeight: {
+    readonly light: 300;
+    readonly regular: 400;
+    readonly medium: 500;
+    readonly semibold: 600;
+    readonly bold: 700;
+};
+/**
+ * Default line height scale
+ */
+declare const defaultLineHeight: {
+    readonly none: 1;
+    readonly tight: 1.25;
+    readonly normal: 1.5;
+    readonly relaxed: 1.75;
+    readonly loose: 2;
+};
+/**
+ * Default z-index scale
+ */
+declare const defaultZIndex: {
+    readonly behind: -1;
+    readonly base: 0;
+    readonly dropdown: 1000;
+    readonly sticky: 1100;
+    readonly overlay: 1300;
+    readonly modal: 1400;
+    readonly popover: 1500;
+    readonly tooltip: 1600;
+    readonly toast: 1700;
+};
+/**
+ * Default transition scale
+ */
+declare const defaultTransition: {
+    readonly fast: "150ms ease-out";
+    readonly normal: "250ms ease-out";
+    readonly slow: "350ms ease-out";
+};
+/**
+ * Default opacity scale
+ */
+declare const defaultOpacity: {
+    readonly none: 0;
+    readonly lowest: 0.05;
+    readonly low: 0.1;
+    readonly medium: 0.25;
+    readonly high: 0.5;
+    readonly higher: 0.75;
+    readonly full: 1;
+};
+/**
+ * Default responsive breakpoints
+ */
+declare const defaultBreakpoints: {
+    readonly xs: "480px";
+    readonly sm: "640px";
+    readonly md: "768px";
+    readonly lg: "1024px";
+    readonly xl: "1280px";
+    readonly '2xl': "1536px";
+};
+
 /**
  * Responsive breakpoints for mobile-first design
- * Based on common device widths
+ * Type inferred automatically from defaultBreakpoints values
  *
  * - xs: Extra small devices (phones in portrait)
  * - sm: Small devices (phones in landscape, small tablets)
@@ -13,14 +142,7 @@ export { CSSProperties } from 'react';
  * - xl: Extra large devices (large desktops)
  * - 2xl: Extra extra large devices (wide screens)
  */
-type BaseBreakpoints = {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    '2xl': string;
-};
+type BaseBreakpoints = typeof defaultBreakpoints;
 
 /**
  * Base color tokens following modern design system semantics - V2
@@ -66,265 +188,98 @@ type BaseColors = {
 
 /**
  * Spacing scale with semantic naming
- * Based on 4px unit system
- */
-type BaseSpacing = {
-    none: string;
-    '2xs': string;
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    '2xl': string;
-    '3xl': string;
-    '4xl': string;
-    '5xl': string;
-};
+ * Type inferred automatically from defaultSpacing values
+ */
+type BaseSpacing = typeof defaultSpacing;
 
 /**
  * Border radius scale
+ * Type inferred automatically from defaultRadius values
  */
-type BaseRadius = {
-    none: string;
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    '2xl': string;
-    full: string;
-};
+type BaseRadius = typeof defaultRadius;
 
 /**
  * Shadow scale for elevation
+ * Type inferred automatically from defaultShadows values
  */
-type BaseShadows = {
-    none: string;
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    '2xl': string;
-    inner: string;
-    focus: string;
-};
+type BaseShadows = typeof defaultShadows;
 
 /**
  * Font size scale
+ * Type inferred automatically from defaultFontSize values
  */
-type BaseFontSize = {
-    '2xs': string;
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    '2xl': string;
-    '3xl': string;
-    '4xl': string;
-    '5xl': string;
-};
+type BaseFontSize = typeof defaultFontSize;
 
 /**
  * Font weight scale
+ * Type inferred automatically from defaultFontWeight values
  */
-type BaseFontWeight = {
-    light: number;
-    regular: number;
-    medium: number;
-    semibold: number;
-    bold: number;
-};
+type BaseFontWeight = typeof defaultFontWeight;
 
 /**
  * Line height scale
+ * Type inferred automatically from defaultLineHeight values
  */
-type BaseLineHeight = {
-    none: number;
-    tight: number;
-    normal: number;
-    relaxed: number;
-    loose: number;
-};
+type BaseLineHeight = typeof defaultLineHeight;
 
 /**
  * Z-index scale for layering
+ * Type inferred automatically from defaultZIndex values
  */
-type BaseZIndex = {
-    behind: number;
-    base: number;
-    dropdown: number;
-    sticky: number;
-    overlay: number;
-    modal: number;
-    popover: number;
-    tooltip: number;
-    toast: number;
-};
+type BaseZIndex = typeof defaultZIndex;
 
 /**
  * Transition timing scale
+ * Type inferred automatically from defaultTransition values
  */
-type BaseTransition = {
-    fast: string;
-    normal: string;
-    slow: string;
-};
+type BaseTransition = typeof defaultTransition;
 
 /**
  * Base opacity scale for consistent transparency
+ * Type inferred automatically from defaultOpacity values
  */
-type BaseOpacity = {
-    /** Fully transparent - 0 */
-    none: number;
-    /** Very low opacity - 0.05 */
-    lowest: number;
-    /** Low opacity - 0.1 */
-    low: number;
-    /** Medium-low opacity - 0.25 */
-    medium: number;
-    /** Medium-high opacity - 0.5 */
-    high: number;
-    /** High opacity - 0.75 */
-    higher: number;
-    /** Fully opaque - 1 */
-    full: number;
-};
-
-/**
- * Standard theme type with all required tokens
- */
-type Theme = {
-    colors: BaseColors;
-    spacing: BaseSpacing;
-    radius: BaseRadius;
-    shadows: BaseShadows;
-    fontSize: BaseFontSize;
-    fontWeight: BaseFontWeight;
-    lineHeight: BaseLineHeight;
-    zIndex: BaseZIndex;
-    transition: BaseTransition;
-    opacity: BaseOpacity;
-    breakpoints: BaseBreakpoints;
-};
+type BaseOpacity = typeof defaultOpacity;
 
 /**
- * Generic theme type that allows extending base tokens
- */
-type ExtendedTheme<TColors extends BaseColors = BaseColors, TSpacing extends BaseSpacing = BaseSpacing, TRadius extends BaseRadius = BaseRadius, TShadows extends BaseShadows = BaseShadows, TFontSize extends BaseFontSize = BaseFontSize, TFontWeight extends BaseFontWeight = BaseFontWeight, TLineHeight extends BaseLineHeight = BaseLineHeight, TZIndex extends BaseZIndex = BaseZIndex, TTransition extends BaseTransition = BaseTransition, TExtensions extends Record<string, unknown> = Record<string, never>> = {
-    colors: TColors;
-    spacing: TSpacing;
-    radius: TRadius;
-    shadows: TShadows;
-    fontSize: TFontSize;
-    fontWeight: TFontWeight;
-    lineHeight: TLineHeight;
-    zIndex: TZIndex;
-    transition: TTransition;
-} & TExtensions;
-/**
- * Helper type to create a custom theme with extensions
- */
-type ExtendTheme<T extends Partial<Theme> & Record<string, unknown>> = Theme & T;
-/**
- * Utility type to deeply make all properties optional
- */
-type DeepPartial<T> = {
-    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
-};
-/**
- * Type for theme overrides
- */
-type ThemeOverride<T extends Theme = Theme> = DeepPartial<T>;
-/**
- * Base structure for custom themes with user-defined color tokens
- * Use this when you want to completely replace the default color tokens
- * with your own semantic tokens
- */
-type CustomThemeBase<TColors extends Record<string, string>> = {
-    colors: TColors;
-    spacing: BaseSpacing;
-    radius: BaseRadius;
-    shadows: BaseShadows;
-    fontSize: BaseFontSize;
-    fontWeight: BaseFontWeight;
-    lineHeight: BaseLineHeight;
-    zIndex: BaseZIndex;
-    transition: BaseTransition;
-    opacity: BaseOpacity;
-    breakpoints: BaseBreakpoints;
-};
-/**
- * Fully customizable theme where ALL token categories can be replaced
+ * @deprecated Don't use Theme directly. Use `typeof yourTheme` instead.
+ *
+ * The Theme type has been removed in favor of type inference.
+ * This forces better type safety and prevents issues with custom themes.
  *
  * @example
  * ```ts
- * // Define your own color tokens
- * type MyColors = {
- *     brand: string
- *     brandHover: string
- *     surface: string
- *     textPrimary: string
- *     textSecondary: string
- * }
+ * // ✅ DO THIS - Infer type from your theme
+ * const myTheme = createTheme({
+ *   colors: { brand: '#000', accent: '#fff' }
+ * })
+ * type MyTheme = typeof myTheme
  *
- * // Create your theme type
- * type MyTheme = CustomTheme<MyColors>
+ * type Props = {
+ *   color: keyof MyTheme['colors']  // Type-safe!
+ * }
  *
- * // Use with createCustomTheme()
- * const myTheme = createCustomTheme<MyColors>({
- *     colors: {
- *         brand: '#007bff',
- *         brandHover: '#0056b3',
- *         surface: '#ffffff',
- *         textPrimary: '#212529',
- *         textSecondary: '#6c757d',
- *     },
- *     // ... other tokens use defaults or custom
- * })
+ * // ❌ DON'T DO THIS
+ * import type { Theme } from '@aurora-ds/theme'  // Theme no longer exists!
  * ```
  */
-type CustomTheme<TColors extends Record<string, string> = Record<string, string>, TSpacing extends Record<string, string> = BaseSpacing, TRadius extends Record<string, string> = BaseRadius, TShadows extends Record<string, string> = BaseShadows, TFontSize extends Record<string, string> = BaseFontSize, TFontWeight extends Record<string, number> = BaseFontWeight, TLineHeight extends Record<string, number> = BaseLineHeight, TZIndex extends Record<string, number> = BaseZIndex, TTransition extends Record<string, string> = BaseTransition, TOpacity extends Record<string, number> = BaseOpacity, TBreakpoints extends Record<string, string> = BaseBreakpoints> = {
-    colors: TColors;
-    spacing: TSpacing;
-    radius: TRadius;
-    shadows: TShadows;
-    fontSize: TFontSize;
-    fontWeight: TFontWeight;
-    lineHeight: TLineHeight;
-    zIndex: TZIndex;
-    transition: TTransition;
-    opacity: TOpacity;
-    breakpoints: TBreakpoints;
-};
-/**
- * Options for theme creation
- */
-type CreateThemeOptions = {
-    /**
-     * How to handle the merge of overrides with the base theme
-     * - 'merge': Deep merge overrides into base (default, preserves base tokens)
-     * - 'replace': Replace entire categories when specified in overrides
-     */
-    mode?: 'merge' | 'replace';
-};
+type Theme = never;
+
 /**
- * Options for custom theme creation
- */
-type CreateCustomThemeOptions<T> = {
-    /**
-     * Use defaults from the standard theme for non-color tokens
-     * If false, you must provide all tokens
-     * @default true
-     */
-    useDefaults?: boolean;
-    /**
-     * Partial overrides for non-color tokens
-     * Only used when useDefaults is true
-     */
-    overrides?: Partial<Omit<T, 'colors'>>;
+ * Minimum structure for a theme
+ * Allows any extensions while preserving type safety
+ */
+type ThemeStructure = {
+    colors: Record<string, string>;
+    spacing: Record<string, string>;
+    radius: Record<string, string>;
+    shadows: Record<string, string>;
+    fontSize: Record<string, string>;
+    fontWeight: Record<string, number>;
+    lineHeight: Record<string, number>;
+    zIndex: Record<string, number>;
+    transition: Record<string, string>;
+    opacity: Record<string, number>;
+    breakpoints: Record<string, string>;
 };
 
 /**
@@ -345,218 +300,132 @@ type ColorScale = {
     950: string;
 };
 
-/**
- * Available color scale names
- */
-type ColorName = 'gray' | 'slate' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose';
-
 /**
  * Available shade values (keys of ColorScale)
  */
 type ColorShade = keyof ColorScale;
 
-type ThemeProviderProps<T extends Theme = Theme> = {
-    theme: T;
+type ThemeProviderProps<TTheme extends ThemeStructure = ThemeStructure> = {
+    theme: TTheme;
     children?: ReactNode;
 };
 /**
  * Theme provider component
  * Provides theme context to all child components
+ * Accepts any theme structure created with createTheme()
  *
  * @example
  * ```tsx
- * // With default theme
- * <ThemeProvider theme={defaultTheme}>
- *     <App />
- * </ThemeProvider>
+ * const myTheme = createTheme({
+ *     colors: { primary: '#007bff', background: '#fff' }
+ * })
  *
- * // With custom extended theme
- * <ThemeProvider theme={myCustomTheme}>
+ * <ThemeProvider theme={myTheme}>
  *     <App />
  * </ThemeProvider>
  * ```
  */
-declare const ThemeProvider: <T extends Theme>({ theme, children }: ThemeProviderProps<T>) => react_jsx_runtime.JSX.Element;
+declare const ThemeProvider: <TTheme extends ThemeStructure>({ theme, children }: ThemeProviderProps<TTheme>) => react_jsx_runtime.JSX.Element;
 /**
  * Hook to access the current theme
- * Use the generic parameter to get proper typing for extended themes
+ * Returns the theme provided by ThemeProvider with exact inferred types
  *
  * @example
  * ```tsx
- * // Basic usage
- * const theme = useTheme()
+ * const myTheme = createTheme({ colors: { brand: '#000' } })
  *
- * // With custom theme type
- * const theme = useTheme<MyCustomTheme>()
+ * function MyComponent() {
+ *   const theme = useTheme()  // theme.colors.brand is accessible!
+ * }
  * ```
  *
  * @throws {Error} If used outside a ThemeProvider
  */
-declare const useTheme: <T extends Theme = Theme>() => T;
+declare const useTheme: <TTheme extends ThemeStructure = ThemeStructure>() => TTheme;
 
 /**
- * Default spacing scale
- */
-declare const defaultSpacing: Theme['spacing'];
-/**
- * Default border radius scale
- */
-declare const defaultRadius: Theme['radius'];
-/**
- * Default shadow scale
- */
-declare const defaultShadows: Theme['shadows'];
-/**
- * Default font size scale
- */
-declare const defaultFontSize: Theme['fontSize'];
-/**
- * Default font weight scale
- */
-declare const defaultFontWeight: Theme['fontWeight'];
-/**
- * Default line height scale
- */
-declare const defaultLineHeight: Theme['lineHeight'];
-/**
- * Default z-index scale
- */
-declare const defaultZIndex: Theme['zIndex'];
-/**
- * Default transition scale
- */
-declare const defaultTransition: Theme['transition'];
-/**
- * Default opacity scale
- */
-declare const defaultOpacity: Theme['opacity'];
-/**
- * Default responsive breakpoints
- */
-declare const defaultBreakpoints: Theme['breakpoints'];
-/**
- * Complete default theme V2
- */
-declare const defaultTheme: Theme;
-
-/**
- * Create a theme by merging a base theme with overrides
+ * Default palette - V3
+ * A clean, modern palette using Indigo as primary and Slate as neutral
  *
- * @param baseTheme - The base theme to extend
- * @param overrides - Partial overrides to apply
- * @param options - Optional configuration
- * @param options.mode - 'merge' (default) deep merges, 'replace' replaces entire categories
+ * This palette is optional and serves as a reference/starting point.
+ * You can use it directly, customize it, or create your own from scratch.
  *
  * @example
  * ```ts
- * // Default behavior: deep merge (extends existing tokens)
- * const myTheme = createTheme(defaultTheme, {
- *     colors: {
- *         primary: '#ff0000',
- *         // Other color tokens from defaultTheme are preserved
- *     },
+ * // Use as-is
+ * const theme = createTheme({ colors: defaultPalette })
+ *
+ * // Customize specific colors
+ * const theme = createTheme({
+ *   colors: {
+ *     ...defaultPalette,
+ *     primary: '#custom-color',
+ *   }
  * })
  *
- * // Replace mode: completely replace categories
- * const myTheme = createTheme(defaultTheme, {
- *     colors: {
- *         // This becomes the ENTIRE colors object
- *         brand: '#ff0000',
- *         surface: '#ffffff',
- *         text: '#000000',
- *     },
- * }, { mode: 'replace' })
+ * // Or create your own from scratch
+ * const theme = createTheme({
+ *   colors: { primary: '#...', background: '#...' }
+ * })
  * ```
  */
-declare const createTheme: <T extends Theme>(baseTheme: T, overrides: DeepPartial<T>, options?: CreateThemeOptions) => T;
+declare const defaultPalette: BaseColors;
+
 /**
- * Merge multiple theme overrides into one
- * Later overrides take precedence
+ * Create a theme with custom color tokens - V3
+ * Colors are optional - if not provided, defaultPalette is used
+ * All other tokens use defaults and can be optionally overridden
  *
- * @example
- * ```ts
- * const theme = mergeThemes(
- *     baseTheme,
- *     brandOverrides,
- *     darkModeOverrides,
- *     userPreferences
- * )
- * ```
- */
-declare const mergeThemes: <T extends Theme>(baseTheme: T, ...overrides: DeepPartial<T>[]) => T;
-/**
- * Create a theme extension factory
- * Useful for creating theme variants (dark mode, high contrast, etc.)
+ * @param config - Theme configuration (all optional)
  *
  * @example
  * ```ts
- * const createDarkVariant = createThemeVariant({
+ * // Use defaultPalette (quickest way to start)
+ * const theme = createTheme()
+ *
+ * // Customize defaultPalette
+ * const theme = createTheme({
  *     colors: {
- *         background: '#1a1a1a',
- *         text: '#ffffff',
- *     },
+ *         ...defaultPalette,
+ *         primary: '#custom'
+ *     }
  * })
  *
- * const darkTheme = createDarkVariant(lightTheme)
- * ```
- */
-declare const createThemeVariant: <T extends Theme>(variantOverrides: DeepPartial<T>) => (baseTheme: T) => T;
-/**
- * Create a fully custom theme with your own color tokens
- * This allows you to define a completely different color token structure
- * without being constrained by BaseColors
- *
- * @param config - Full theme configuration with custom colors
- *
- * @example
- * ```ts
- * // Define your custom color tokens
- * type MyBrandColors = {
- *     brand: string
- *     brandHover: string
- *     brandActive: string
- *     surface: string
- *     surfaceElevated: string
- *     textPrimary: string
- *     textSecondary: string
- *     border: string
- * }
- *
- * // Create a theme with ONLY your color tokens
- * const myTheme = createCustomTheme<MyBrandColors>({
+ * // Or create your own colors from scratch
+ * const theme = createTheme({
  *     colors: {
  *         brand: '#007bff',
- *         brandHover: '#0056b3',
- *         brandActive: '#004085',
  *         surface: '#ffffff',
- *         surfaceElevated: '#f8f9fa',
- *         textPrimary: '#212529',
- *         textSecondary: '#6c757d',
- *         border: '#dee2e6',
- *     },
- *     // Uses defaults for other tokens, or provide your own:
- *     // spacing: { ... },
- *     // radius: { ... },
+ *         text: '#212529',
+ *     }
  * })
- *
- * // TypeScript knows your theme has only YOUR color tokens:
- * myTheme.colors.brand      // ✅ OK
- * myTheme.colors.primary    // ❌ Error - doesn't exist
  * ```
  */
-declare const createCustomTheme: <TColors extends Record<string, string>, TSpacing extends Record<string, string> = typeof defaultSpacing, TRadius extends Record<string, string> = typeof defaultRadius, TShadows extends Record<string, string> = typeof defaultShadows, TFontSize extends Record<string, string> = typeof defaultFontSize, TFontWeight extends Record<string, number> = typeof defaultFontWeight, TLineHeight extends Record<string, number> = typeof defaultLineHeight, TZIndex extends Record<string, number> = typeof defaultZIndex, TTransition extends Record<string, string> = typeof defaultTransition, TOpacity extends Record<string, number> = typeof defaultOpacity, TBreakpoints extends Record<string, string> = typeof defaultBreakpoints>(config: {
-    colors: TColors;
-    spacing?: TSpacing;
-    radius?: TRadius;
-    shadows?: TShadows;
-    fontSize?: TFontSize;
-    fontWeight?: TFontWeight;
-    lineHeight?: TLineHeight;
-    zIndex?: TZIndex;
-    transition?: TTransition;
-    opacity?: TOpacity;
-    breakpoints?: TBreakpoints;
-}) => CustomTheme<TColors, TSpacing, TRadius, TShadows, TFontSize, TFontWeight, TLineHeight, TZIndex, TTransition, TOpacity, TBreakpoints>;
+declare const createTheme: <const TConfig extends {
+    colors?: Record<string, string>;
+    spacing?: Record<string, string>;
+    radius?: Record<string, string>;
+    shadows?: Record<string, string>;
+    fontSize?: Record<string, string>;
+    fontWeight?: Record<string, number>;
+    lineHeight?: Record<string, number>;
+    zIndex?: Record<string, number>;
+    transition?: Record<string, string>;
+    opacity?: Record<string, number>;
+    breakpoints?: Record<string, string>;
+} = object>(config?: TConfig) => {
+    readonly colors: TConfig["colors"] extends Record<string, string> ? TConfig["colors"] : typeof defaultPalette;
+    readonly spacing: TConfig["spacing"] extends Record<string, string> ? TConfig["spacing"] : typeof defaultSpacing;
+    readonly radius: TConfig["radius"] extends Record<string, string> ? TConfig["radius"] : typeof defaultRadius;
+    readonly shadows: TConfig["shadows"] extends Record<string, string> ? TConfig["shadows"] : typeof defaultShadows;
+    readonly fontSize: TConfig["fontSize"] extends Record<string, string> ? TConfig["fontSize"] : typeof defaultFontSize;
+    readonly fontWeight: TConfig["fontWeight"] extends Record<string, number> ? TConfig["fontWeight"] : typeof defaultFontWeight;
+    readonly lineHeight: TConfig["lineHeight"] extends Record<string, number> ? TConfig["lineHeight"] : typeof defaultLineHeight;
+    readonly zIndex: TConfig["zIndex"] extends Record<string, number> ? TConfig["zIndex"] : typeof defaultZIndex;
+    readonly transition: TConfig["transition"] extends Record<string, string> ? TConfig["transition"] : typeof defaultTransition;
+    readonly opacity: TConfig["opacity"] extends Record<string, number> ? TConfig["opacity"] : typeof defaultOpacity;
+    readonly breakpoints: TConfig["breakpoints"] extends Record<string, string> ? TConfig["breakpoints"] : typeof defaultBreakpoints;
+};
 
 /**
  * Color Scales - Modern color palettes with shades from 25 to 950
@@ -589,7 +458,6 @@ declare const colors: {
     readonly emerald: ColorScale;
     readonly teal: ColorScale;
     readonly cyan: ColorScale;
-    readonly sky: ColorScale;
     readonly blue: ColorScale;
     readonly indigo: ColorScale;
     readonly violet: ColorScale;
@@ -603,12 +471,6 @@ declare const colors: {
     readonly current: "currentColor";
 };
 
-/**
- * Default light theme palette - V2
- * A clean, modern palette using Indigo as primary and Slate as neutral
- */
-declare const defaultPalette: BaseColors;
-
 /**
  * Extended type to support pseudo-classes, media queries, container queries, supports and complex selectors
  */
@@ -644,56 +506,56 @@ type FontFaceOptions = {
 /**
  * Create typed styles with support for pseudo-classes, media queries, container queries, feature queries and complex selectors
  *
- * Supports custom extended themes via generic parameter.
+ * Supports custom themes via generic parameter.
  *
  * @example
  * ```ts
- * // Basic usage with default theme
+ * // Basic usage
  * const STYLES = createStyles((theme) => ({
  *     root: {
  *         display: 'flex',
  *         padding: theme.spacing.md,
- *         ':hover': { backgroundColor: theme.colors.backgroundHover },
+ *         ':hover': { backgroundColor: theme.colors.primary },
  *     }
  * }))
  *
- * // With custom extended theme
- * type MyTheme = Theme & { colors: BaseColors & { accent: string } }
+ * // With explicit theme type
+ * const myTheme = createTheme({ colors: { brand: '#007bff' } })
  *
- * const STYLES = createStyles<MyTheme>((theme) => ({
+ * const STYLES = createStyles((theme) => ({
  *     root: {
- *         backgroundColor: theme.colors.accent, // TypeScript knows about accent!
+ *         backgroundColor: theme.colors.primary, // TypeScript knows the structure!
  *     }
  * }))
  * ```
  */
-declare const createStyles: <TTheme extends Theme = Theme, T extends Record<string, StyleWithPseudos | StyleFunction> = Record<string, StyleWithPseudos | StyleFunction>>(stylesOrCreator: T | ((theme: TTheme) => T)) => { [K in keyof T]: T[K] extends (...args: infer TArgs) => StyleWithPseudos ? (...args: TArgs) => string : string; };
+declare const createStyles: <T extends Record<string, StyleWithPseudos | StyleFunction> = Record<string, StyleWithPseudos | StyleFunction>>(stylesOrCreator: T | ((theme: ThemeStructure) => T)) => { [K in keyof T]: T[K] extends (...args: infer TArgs) => StyleWithPseudos ? (...args: TArgs) => string : string; };
 /**
  * Create a typed createStyles function pre-configured with your custom theme type.
  * This eliminates the need to specify the theme type on every createStyles call.
  *
  * @example
  * ```ts
- * // 1. Define your custom theme
- * type MyTheme = CustomTheme<{
- *     brand: string
- *     brandHover: string
- *     surface: string
- * }>
+ * // 1. Define your theme
+ * const myTheme = createTheme({
+ *     colors: {
+ *         brand: '#007bff',
+ *         surface: '#ffffff',
+ *     }
+ * })
  *
  * // 2. Create a pre-typed createStyles function (do this once)
- * export const createStyles = createTypedStyles<MyTheme>()
+ * export const createStyles = createTypedStyles<typeof myTheme>()
  *
  * // 3. Use it everywhere without specifying the type!
  * const STYLES = createStyles((theme) => ({
  *     button: {
- *         backgroundColor: theme.colors.brand,    // ✅ TypeScript knows!
- *         // backgroundColor: theme.colors.primary, // ❌ Error - doesn't exist
+ *         backgroundColor: theme.colors.primary,    // ✅ TypeScript knows!
  *     },
  * }))
  * ```
  */
-declare const createTypedStyles: <TTheme extends Record<string, unknown>>() => <T extends Record<string, StyleWithPseudos | StyleFunction>>(stylesOrCreator: T | ((theme: TTheme) => T)) => { [K in keyof T]: T[K] extends (...args: infer TArgs) => StyleWithPseudos ? (...args: TArgs) => string : string; };
+declare const createTypedStyles: <TTheme extends ThemeStructure = ThemeStructure>() => <T extends Record<string, StyleWithPseudos | StyleFunction>>(stylesOrCreator: T | ((theme: TTheme) => T)) => { [K in keyof T]: T[K] extends (...args: infer TArgs) => StyleWithPseudos ? (...args: TArgs) => string : string; };
 
 /**
  * Create and inject keyframes
@@ -739,7 +601,7 @@ declare const fontFace: (options: FontFaceOptions) => string;
  * // Generates: :root { --aurora-colors-primary: #2563EB; ... }
  * ```
  */
-declare const injectCssVariables: (theme: Theme, prefix?: string) => void;
+declare const injectCssVariables: (theme: ThemeStructure, prefix?: string) => void;
 /**
  * Helper to use a CSS variable from the theme
  *
@@ -794,11 +656,11 @@ declare const getSSRRulesArray: () => string[];
 /**
  * Set the theme getter
  */
-declare const setThemeContextGetter: (getter: (() => Theme | undefined) | null) => (() => Theme | undefined) | null;
+declare const setThemeContextGetter: (getter: (() => ThemeStructure | undefined) | null) => (() => ThemeStructure | undefined) | null;
 /**
  * Get the current theme
  */
-declare const getTheme: () => Theme | undefined;
+declare const getTheme: () => ThemeStructure | undefined;
 /**
  * Insert a CSS rule
  */
@@ -809,4 +671,4 @@ declare const insertRule: (rule: string) => void;
  */
 declare const sanitizeCssValue: (value: string) => string;
 
-export { type BaseBreakpoints, type BaseColors, type BaseFontSize, type BaseFontWeight, type BaseLineHeight, type BaseOpacity, type BaseRadius, type BaseShadows, type BaseSpacing, type BaseTransition, type BaseZIndex, type ColorName, type ColorScale, type ColorShade, type CreateCustomThemeOptions, type CreateThemeOptions, type CustomTheme, type CustomThemeBase, type DeepPartial, type ExtendTheme, type ExtendedTheme, type FontFaceOptions, type StyleFunction, type StyleWithPseudos, type Theme, type ThemeOverride, ThemeProvider, type ThemeProviderProps, clearSSRRules, colors, createCustomTheme, createStyles, createTheme, createThemeVariant, createTypedStyles, cssVar, cssVariables, defaultBreakpoints, defaultFontSize, defaultFontWeight, defaultLineHeight, defaultOpacity, defaultPalette, defaultRadius, defaultShadows, defaultSpacing, defaultTheme, defaultTransition, defaultZIndex, fontFace, getSSRRulesArray, getSSRStyleTag, getSSRStyles, getTheme, injectCssVariables, insertRule, keyframes, mergeThemes, sanitizeCssValue, setThemeContextGetter, useTheme };
+export { type BaseBreakpoints, type BaseColors, type BaseFontSize, type BaseFontWeight, type BaseLineHeight, type BaseOpacity, type BaseRadius, type BaseShadows, type BaseSpacing, type BaseTransition, type BaseZIndex, type ColorScale, type ColorShade, type FontFaceOptions, type StyleFunction, type StyleWithPseudos, type Theme, ThemeProvider, type ThemeProviderProps, clearSSRRules, colors, createStyles, createTheme, createTypedStyles, cssVar, cssVariables, defaultBreakpoints, defaultFontSize, defaultFontWeight, defaultLineHeight, defaultOpacity, defaultPalette, defaultRadius, defaultShadows, defaultSpacing, defaultTransition, defaultZIndex, fontFace, getSSRRulesArray, getSSRStyleTag, getSSRStyles, getTheme, injectCssVariables, insertRule, keyframes, sanitizeCssValue, setThemeContextGetter, useTheme };