/** * Color scale levels */ type ColorScale = { 100?: string; 200?: string; 300?: string; 400?: string; 500?: string; 600?: string; 700?: string; 800?: string; 900?: string; 1000?: string; 1100?: string; }; /** * Gray color scale with additional intermediate values */ type GrayScale = ColorScale & { 0?: string; 825?: string; 850?: string; 875?: string; }; /** * Alpha color variations */ type AlphaColors = { 0?: string; 1?: string; 2?: string; 4?: string; 6?: string; 8?: string; 10?: string; 12?: string; 15?: string; 20?: string; 30?: string; 40?: string; 50?: string; 70?: string; 80?: string; 90?: string; }; /** * Color palette configuration */ interface ColorPalette { /** Gray scale colors */ gray?: GrayScale; /** Blue scale colors */ blue?: ColorScale; /** Green scale colors */ green?: ColorScale; /** Red scale colors */ red?: ColorScale; /** Orange scale colors */ orange?: ColorScale; /** Yellow scale colors */ yellow?: ColorScale; /** Base white color */ white?: string; /** Base black color */ black?: string; /** White alpha variations */ whiteAlpha?: AlphaColors; /** Black alpha variations */ blackAlpha?: AlphaColors; /** Foreground color */ foreground?: string; } /** * Border radius configuration */ interface RadiiConfig { /** Small radius (4px default) */ sm?: string; /** Medium radius (8px default) */ md?: string; /** Large radius (12px default) */ lg?: string; /** Extra large radius (16px default) */ xl?: string; /** Full/pill radius */ full?: string; } /** * Spacing configuration */ interface SpacingConfig { /** Extra small spacing */ xs?: string; /** Small spacing */ sm?: string; /** Medium spacing */ md?: string; /** Large spacing */ lg?: string; /** Extra large spacing */ xl?: string; } /** * Typography configuration */ interface TypographyConfig { /** Font family for body text */ fontFamily?: string; /** Font family for monospace/code */ fontMono?: string; /** Base font size */ fontSize?: string; /** Line height */ lineHeight?: string; } /** * Arbitrary CSS custom properties to apply alongside the theme tokens. * * Keys may be provided with or without the `--` prefix. * * @example * ```ts * vars: { * '--ease-panel-padding': '16px', * 'ease-field-label-width': '40%' * } * ``` */ type ThemeVars = Record; /** * Complete theme configuration */ interface ThemeConfig { /** Color palette */ colors?: ColorPalette; /** Border radii */ radii?: RadiiConfig; /** Spacing values */ spacing?: SpacingConfig; /** Typography settings */ typography?: TypographyConfig; /** * Extra CSS variables (component tokens, app tokens, etc). * This is the recommended place to set `--ease-*` variables. */ vars?: ThemeVars; } /** * Default color values (oklab) */ declare const defaultColors: Required; /** * Default border radius values */ declare const defaultRadii: Required; /** * Default spacing values */ declare const defaultSpacing: Required; /** * Default typography values */ declare const defaultTypography: Required; /** * Built-in theme names that ship with the library. */ type BuiltInThemeName = 'default' | 'dark'; /** * Theme name type - accepts built-in names plus any custom string. * The built-in names provide autocomplete while allowing any string. */ type WebKitThemeName = BuiltInThemeName | (string & {}); /** * A strongly-typed theme reference. * Returned by `registerTheme()` for type-safe theme references. * * @example * ```ts * const myTheme = registerTheme('custom', { config: {...} }); * initWebKit({ theme: myTheme }); // Type-safe reference * ``` */ interface WebKitThemeRef { readonly __brand: 'WebKitThemeRef'; readonly name: Name; } /** * Valid theme input for APIs: a theme name string, a theme ref, or an inline config. * * @example * ```ts * // All valid: * initWebKit({ theme: 'default' }); // Built-in name * initWebKit({ theme: 'my-custom-theme' }); // Custom string * initWebKit({ theme: myThemeRef }); // Theme ref from registerTheme() * initWebKit({ theme: { colors: {...} } }); // Inline config * ``` */ type ThemeInput = WebKitThemeName | WebKitThemeRef | ThemeConfig; /** * Options for registering a theme. */ interface RegisterThemeOptions { /** * Base theme to extend from. * - `'default'` (or any registered name) - extends that theme * - `null` - no base, starts from scratch * - `undefined` - defaults to `'default'` */ base?: string | WebKitThemeRef | null; /** * Theme configuration (overrides on top of base). */ config?: ThemeConfig; } /** * Check if a value is a theme ref. */ declare const isThemeRef: (value: unknown) => value is WebKitThemeRef; /** * Check if a value is a theme config object. */ declare const isThemeConfig: (value: unknown) => value is ThemeConfig; /** * Register a custom theme. * * @param name - Theme name (must be unique) * @param options - Theme options (base + config) * @returns A typed theme reference * * @example * ```ts * const custom = registerTheme('custom', { * base: 'default', * config: { * vars: { '--ease-panel-radius': '14px' } * } * }); * * initWebKit({ theme: custom }); * ``` */ declare function registerTheme(name: Name, options?: RegisterThemeOptions): WebKitThemeRef; /** * Get a theme's resolved configuration. * * @param theme - Theme name, ref, or inline config * @returns Resolved theme configuration */ declare function getTheme(theme: ThemeInput): ThemeConfig; /** * Check if a theme is registered. */ declare function hasTheme(name: string): boolean; /** * Get all registered theme names. */ declare function getThemeNames(): string[]; /** * Create a theme ref for a registered theme name. * Throws if the theme is not registered. * * @example * ```ts * const ref = themeRef('default'); // Get ref for built-in theme * const customRef = themeRef('my-theme'); // Get ref for registered theme * ``` */ declare function themeRef(name: Name): WebKitThemeRef; export { type AlphaColors as A, type BuiltInThemeName as B, type ColorScale as C, type GrayScale as G, type RegisterThemeOptions as R, type SpacingConfig as S, type ThemeVars as T, type WebKitThemeName as W, type ThemeConfig as a, type WebKitThemeRef as b, type ThemeInput as c, isThemeConfig as d, getThemeNames as e, type ColorPalette as f, getTheme as g, hasTheme as h, isThemeRef as i, type RadiiConfig as j, type TypographyConfig as k, defaultColors as l, defaultRadii as m, defaultSpacing as n, defaultTypography as o, registerTheme as r, themeRef as t };