@happyvertical/smrt-ui 0.30.0

package/dist/themes/create-theme.js

@@ -0,0 +1,389 @@
+/**
+ * Create Theme Utilities
+ *
+ * Helper functions for creating custom themes that match the SMRT theme system.
+ */
+import { hasCustomTheme, registerCustomTheme, themes as registeredThemes, } from './registry.js';
+import { borderRadiusScale, durationScale, materialEasing, spacingScale, } from './shared.js';
+/**
+ * Default color palette structure with neutral grays
+ */
+const defaultColorStructure = {
+    // These will be generated from the primary color
+    onPrimary: '#ffffff',
+    primaryContainer: '',
+    onPrimaryContainer: '',
+    secondary: '#64748b',
+    onSecondary: '#ffffff',
+    secondaryContainer: '#f1f5f9',
+    onSecondaryContainer: '#1e293b',
+    tertiary: '#8b5cf6',
+    onTertiary: '#ffffff',
+    tertiaryContainer: '#ede9fe',
+    onTertiaryContainer: '#3b0764',
+    error: '#dc2626',
+    onError: '#ffffff',
+    errorContainer: '#fee2e2',
+    onErrorContainer: '#7f1d1d',
+    warning: '#f59e0b',
+    onWarning: '#000000',
+    warningContainer: '#fef3c7',
+    onWarningContainer: '#78350f',
+    success: '#22c55e',
+    onSuccess: '#000000',
+    successContainer: '#dcfce7',
+    onSuccessContainer: '#14532d',
+    surface: '#ffffff',
+    onSurface: '#111827',
+    surfaceVariant: '#f9fafb',
+    onSurfaceVariant: '#6b7280',
+    surfaceContainer: '#f3f4f6',
+    surfaceContainerLow: '#f9fafb',
+    surfaceContainerHigh: '#e5e7eb',
+    surfaceContainerHighest: '#d1d5db',
+    surfaceContainerLowest: '#ffffff',
+    surfaceDim: '#e5e7eb',
+    surfaceBright: '#ffffff',
+    onBackground: '#111827',
+    outline: '#d1d5db',
+    outlineVariant: '#e5e7eb',
+    inverseSurface: '#1f2937',
+    inverseOnSurface: '#f9fafb',
+    inversePrimary: '',
+    shadow: '#000000',
+    scrim: 'rgba(0, 0, 0, 0.5)',
+};
+/**
+ * Helper function to clamp a value between min and max
+ */
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+/**
+ * Helper function to convert RGB component to 2-digit hex
+ */
+function toHexComponent(value) {
+    const clamped = Math.round(clamp(value, 0, 255));
+    return clamped.toString(16).padStart(2, '0');
+}
+/**
+ * Generate dark mode colors from light mode colors
+ * Uses simple inversion logic - for production use, manually define dark colors
+ */
+function generateDarkColors(light) {
+    // Helper to adjust color brightness with proper rounding and hex conversion
+    const adjustBrightness = (hex, factor) => {
+        // Handle 3-character hex codes
+        let fullHex = hex;
+        if (hex.length === 4 && hex[0] === '#') {
+            fullHex = `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`;
+        }
+        const r = parseInt(fullHex.slice(1, 3), 16) * factor;
+        const g = parseInt(fullHex.slice(3, 5), 16) * factor;
+        const b = parseInt(fullHex.slice(5, 7), 16) * factor;
+        return `#${toHexComponent(r)}${toHexComponent(g)}${toHexComponent(b)}`;
+    };
+    return {
+        ...light,
+        primary: light.inversePrimary || adjustBrightness(light.primary, 1.2),
+        onPrimary: adjustBrightness(light.onPrimary, 0.8),
+        primaryContainer: adjustBrightness(light.primaryContainer || light.primary, 0.3),
+        onPrimaryContainer: adjustBrightness(light.onPrimaryContainer || light.onPrimary, 1.2),
+        secondary: adjustBrightness(light.secondary, 1.3),
+        onSecondary: adjustBrightness(light.onSecondary, 0.8),
+        secondaryContainer: adjustBrightness(light.secondaryContainer, 0.3),
+        onSecondaryContainer: adjustBrightness(light.onSecondaryContainer, 1.2),
+        surface: '#111827',
+        onSurface: '#f9fafb',
+        surfaceVariant: '#1f2937',
+        onSurfaceVariant: '#9ca3af',
+        surfaceContainer: '#1f2937',
+        surfaceContainerLow: '#111827',
+        surfaceContainerHigh: '#374151',
+        surfaceContainerHighest: '#4b5563',
+        surfaceContainerLowest: '#030712',
+        surfaceDim: '#1f2937',
+        surfaceBright: '#374151',
+        background: '#030712',
+        onBackground: '#f9fafb',
+        outline: '#4b5563',
+        outlineVariant: '#374151',
+        inverseSurface: '#f9fafb',
+        inverseOnSurface: '#1f2937',
+        inversePrimary: light.primary,
+        shadow: light.shadow,
+        scrim: 'rgba(0, 0, 0, 0.7)',
+    };
+}
+/**
+ * Merge typography with defaults
+ */
+function mergeTypography(custom) {
+    const defaults = {
+        displayLarge: {
+            size: '3.5rem',
+            lineHeight: '1.1',
+            weight: '400',
+            tracking: '-0.02em',
+        },
+        displayMedium: {
+            size: '2.75rem',
+            lineHeight: '1.15',
+            weight: '400',
+            tracking: '-0.01em',
+        },
+        displaySmall: {
+            size: '2.25rem',
+            lineHeight: '1.2',
+            weight: '400',
+            tracking: '0',
+        },
+        headlineLarge: {
+            size: '2rem',
+            lineHeight: '1.25',
+            weight: '400',
+            tracking: '0',
+        },
+        headlineMedium: {
+            size: '1.75rem',
+            lineHeight: '1.3',
+            weight: '400',
+            tracking: '0',
+        },
+        headlineSmall: {
+            size: '1.5rem',
+            lineHeight: '1.35',
+            weight: '400',
+            tracking: '0',
+        },
+        titleLarge: {
+            size: '1.375rem',
+            lineHeight: '1.4',
+            weight: '500',
+            tracking: '0',
+        },
+        titleMedium: {
+            size: '1rem',
+            lineHeight: '1.5',
+            weight: '500',
+            tracking: '0.01em',
+        },
+        titleSmall: {
+            size: '0.875rem',
+            lineHeight: '1.5',
+            weight: '500',
+            tracking: '0.01em',
+        },
+        bodyLarge: {
+            size: '1rem',
+            lineHeight: '1.5',
+            weight: '400',
+            tracking: '0.03em',
+        },
+        bodyMedium: {
+            size: '0.875rem',
+            lineHeight: '1.5',
+            weight: '400',
+            tracking: '0.02em',
+        },
+        bodySmall: {
+            size: '0.75rem',
+            lineHeight: '1.4',
+            weight: '400',
+            tracking: '0.03em',
+        },
+        labelLarge: {
+            size: '0.875rem',
+            lineHeight: '1.4',
+            weight: '500',
+            tracking: '0.01em',
+        },
+        labelMedium: {
+            size: '0.75rem',
+            lineHeight: '1.4',
+            weight: '500',
+            tracking: '0.05em',
+        },
+        labelSmall: {
+            size: '0.6875rem',
+            lineHeight: '1.4',
+            weight: '500',
+            tracking: '0.05em',
+        },
+    };
+    if (!custom)
+        return defaults;
+    return {
+        displayLarge: { ...defaults.displayLarge, ...custom.displayLarge },
+        displayMedium: { ...defaults.displayMedium, ...custom.displayMedium },
+        displaySmall: { ...defaults.displaySmall, ...custom.displaySmall },
+        headlineLarge: { ...defaults.headlineLarge, ...custom.headlineLarge },
+        headlineMedium: { ...defaults.headlineMedium, ...custom.headlineMedium },
+        headlineSmall: { ...defaults.headlineSmall, ...custom.headlineSmall },
+        titleLarge: { ...defaults.titleLarge, ...custom.titleLarge },
+        titleMedium: { ...defaults.titleMedium, ...custom.titleMedium },
+        titleSmall: { ...defaults.titleSmall, ...custom.titleSmall },
+        bodyLarge: { ...defaults.bodyLarge, ...custom.bodyLarge },
+        bodyMedium: { ...defaults.bodyMedium, ...custom.bodyMedium },
+        bodySmall: { ...defaults.bodySmall, ...custom.bodySmall },
+        labelLarge: { ...defaults.labelLarge, ...custom.labelLarge },
+        labelMedium: { ...defaults.labelMedium, ...custom.labelMedium },
+        labelSmall: { ...defaults.labelSmall, ...custom.labelSmall },
+    };
+}
+/**
+ * Create a custom theme
+ *
+ * @example
+ * ```typescript
+ * import { createTheme, registerTheme } from '@happyvertical/smrt-ui/themes';
+ *
+ * const myTheme = createTheme({
+ *   id: 'brand',
+ *   name: 'Brand Theme',
+ *   light: {
+ *     primary: '#ff6b35',
+ *     background: '#fafafa',
+ *     surface: '#ffffff',
+ *   },
+ *   dark: {
+ *     primary: '#ff8c5a',
+ *     background: '#0a0a0a',
+ *     surface: '#1a1a1a',
+ *   },
+ *   fontFamily: 'Inter, sans-serif',
+ * });
+ *
+ * registerTheme(myTheme);
+ * ```
+ */
+export function createTheme(options) {
+    const { id, name, light: lightPartial, dark: darkPartial, extend = 'material', } = options;
+    // Get base theme if extending (lazy import to avoid circular deps)
+    const baseTheme = extend ? getBaseThemeSync(extend) : null;
+    // Build light colors
+    const lightColors = {
+        ...defaultColorStructure,
+        ...baseTheme?.light,
+        ...lightPartial,
+        // Generate derived colors
+        primaryContainer: lightPartial.primaryContainer || `${lightPartial.primary}20`,
+        onPrimaryContainer: lightPartial.onPrimaryContainer || lightPartial.primary,
+        inversePrimary: lightPartial.inversePrimary || lightPartial.primary,
+    };
+    // Build dark colors
+    const darkColors = darkPartial
+        ? { ...lightColors, ...darkPartial }
+        : generateDarkColors(lightColors);
+    return {
+        id: id,
+        name,
+        light: lightColors,
+        dark: darkColors,
+        typography: mergeTypography(options.typography),
+        elevation: {
+            ...(baseTheme?.elevation || materialElevation()),
+            ...options.elevation,
+        },
+        spacing: spacingScale,
+        borderRadius: borderRadiusScale,
+        duration: durationScale,
+        easing: {
+            ...(baseTheme?.easing || materialEasing),
+            ...options.easing,
+        },
+        glass: options.glass,
+        fontFamily: options.fontFamily || baseTheme?.fontFamily || 'system-ui, sans-serif',
+    };
+}
+// Cache for base themes to avoid repeated dynamic imports
+let themeRegistryCache = null;
+/**
+ * Get a base theme for extension - synchronous version using cache
+ * Falls back to null if registry not loaded
+ */
+function getBaseThemeSync(preset) {
+    if (themeRegistryCache && preset in themeRegistryCache) {
+        return themeRegistryCache[preset] || null;
+    }
+    // Return null if not in cache - will use defaults
+    // User should ensure themes are loaded before extending
+    return null;
+}
+/**
+ * Preload the theme registry for extension support
+ * Call this before createTheme if using the extend option
+ */
+export async function preloadThemeRegistry() {
+    if (themeRegistryCache)
+        return;
+    themeRegistryCache = registeredThemes;
+}
+/**
+ * Material elevation defaults
+ */
+function materialElevation() {
+    return {
+        0: 'none',
+        1: '0 1px 2px 0 rgb(0 0 0 / 0.05), 0 1px 3px 0 rgb(0 0 0 / 0.02)',
+        2: '0 1px 2px 0 rgb(0 0 0 / 0.06), 0 2px 4px 0 rgb(0 0 0 / 0.04)',
+        3: '0 2px 4px 0 rgb(0 0 0 / 0.06), 0 4px 8px 0 rgb(0 0 0 / 0.04)',
+        4: '0 4px 8px 0 rgb(0 0 0 / 0.08), 0 8px 16px 0 rgb(0 0 0 / 0.04)',
+        5: '0 8px 16px 0 rgb(0 0 0 / 0.1), 0 16px 32px 0 rgb(0 0 0 / 0.04)',
+    };
+}
+/**
+ * Register a custom theme for use with ThemeProvider
+ *
+ * @example
+ * ```typescript
+ * import { createTheme, registerTheme } from '@happyvertical/smrt-ui/themes';
+ *
+ * const customTheme = createTheme({ id: 'brand', name: 'Brand', ... });
+ * registerTheme(customTheme);
+ *
+ * // Now use in your app
+ * <ThemeProvider preset="brand" />
+ * ```
+ */
+export function registerTheme(theme) {
+    registerCustomTheme(theme);
+}
+/**
+ * Get a registered custom theme
+ */
+export function getRegisteredTheme(_id) {
+    // Dynamic import to avoid circular deps
+    // Return undefined synchronously - use isThemeRegistered for checks
+    return undefined;
+}
+/**
+ * Check if a theme is registered
+ * Note: This is async due to ESM dynamic import requirements
+ */
+export async function isThemeRegistered(id) {
+    return hasCustomTheme(id);
+}
+/**
+ * Create a simple theme from just a primary color
+ * Auto-generates all other colors
+ *
+ * @example
+ * ```typescript
+ * const brandTheme = createThemeFromColor('#ff6b35', 'brand', 'Brand Theme');
+ * registerTheme(brandTheme);
+ * ```
+ */
+export function createThemeFromColor(primaryColor, id, name, options) {
+    return createTheme({
+        id,
+        name,
+        light: {
+            primary: primaryColor,
+            background: '#ffffff',
+            surface: '#ffffff',
+        },
+        ...options,
+    });
+}
+// Types are exported from index.ts

package/dist/themes/css-generator.d.ts

@@ -0,0 +1,44 @@
+/**
+ * CSS Variable Generator
+ *
+ * Converts theme definitions into CSS custom properties for runtime theming.
+ * Generates CSS variables for colors, typography, spacing, elevation, etc.
+ */
+import type { Theme } from './types.js';
+/**
+ * CSS variable generation options
+ */
+export interface GenerateCSSOptions {
+    /** CSS variable prefix (default: --smrt) */
+    prefix?: string;
+    /** Include theme ID as data attribute selector */
+    includeDataAttr?: boolean;
+}
+/**
+ * Generate all CSS custom properties for a theme
+ * @param theme - Theme definition
+ * @param isDark - Whether to use dark mode colors
+ * @param options - Generation options
+ * @returns Object with CSS variable names and values
+ */
+export declare function generateThemeVariables(theme: Theme, isDark: boolean, options?: GenerateCSSOptions): Record<string, string>;
+/**
+ * Convert variables object to CSS style string
+ * @param variables - Record of CSS variable names and values
+ * @returns CSS string for style attribute
+ */
+export declare function variablesToStyleString(variables: Record<string, string>): string;
+/**
+ * Generate CSS class content for a theme
+ * @param theme - Theme definition
+ * @param isDark - Whether to use dark mode
+ * @param options - Generation options
+ * @returns CSS string for embedding in a <style> tag
+ */
+export declare function generateThemeCSS(theme: Theme, isDark: boolean, options?: GenerateCSSOptions): string;
+/**
+ * Generate all theme CSS for all presets and modes
+ * @returns Complete CSS for all themes
+ */
+export declare function generateAllThemesCSS(): Promise<string>;
+//# sourceMappingURL=css-generator.d.ts.map

package/dist/themes/css-generator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-generator.d.ts","sourceRoot":"","sources":["../../src/themes/css-generator.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAWH,OAAO,KAAK,EAQV,KAAK,EAEN,MAAM,YAAY,CAAC;AAEpB;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA+LD;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,GAAE,kBAAuB,GAC/B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAsCxB;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAChC,MAAM,CAIR;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,GAAE,kBAAuB,GAC/B,MAAM,CAaR;AAED;;;GAGG;AACH,wBAAsB,oBAAoB,IAAI,OAAO,CAAC,MAAM,CAAC,CAS5D"}

package/dist/themes/css-generator.js

@@ -0,0 +1,226 @@
+/**
+ * CSS Variable Generator
+ *
+ * Converts theme definitions into CSS custom properties for runtime theming.
+ * Generates CSS variables for colors, typography, spacing, elevation, etc.
+ */
+import { themes } from './registry.js';
+import { borderRadiusAliases, durationAliases, fontFamilyAliases, fontWeightTokens, spacingAliases, zIndexTokens, } from './shared.js';
+/**
+ * Generate CSS custom properties from a color palette
+ */
+function generateColorVariables(colors, prefix) {
+    const vars = {};
+    for (const [key, value] of Object.entries(colors)) {
+        // Convert camelCase to kebab-case: primaryContainer -> primary-container
+        const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+        vars[`${prefix}-color-${cssKey}`] = value;
+    }
+    return vars;
+}
+/**
+ * Generate CSS custom properties from typography scale
+ */
+function generateTypographyVariables(typography, prefix) {
+    const vars = {};
+    for (const [key, token] of Object.entries(typography)) {
+        const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+        vars[`${prefix}-typography-${cssKey}-size`] = token.size;
+        vars[`${prefix}-typography-${cssKey}-line-height`] = token.lineHeight;
+        vars[`${prefix}-typography-${cssKey}-weight`] = String(token.weight);
+        vars[`${prefix}-typography-${cssKey}-tracking`] = token.tracking;
+        if (token.fontFamily) {
+            vars[`${prefix}-typography-${cssKey}-font-family`] = token.fontFamily;
+        }
+        // Additive `font` shorthand alias (issue #1431): components use
+        // `font: var(--smrt-typography-body-medium-font)`, expecting the CSS
+        // `font` shorthand order (style variant size/line-height family). Built
+        // from the emitted longhands so it stays in sync.
+        const family = token.fontFamily ?? `var(${prefix}-font-family)`;
+        vars[`${prefix}-typography-${cssKey}-font`] =
+            `${token.weight} ${token.size}/${token.lineHeight} ${family}`;
+    }
+    return vars;
+}
+/**
+ * Generate CSS custom properties from spacing scale
+ */
+function generateSpacingVariables(spacing, prefix) {
+    const vars = {};
+    for (const [key, value] of Object.entries(spacing)) {
+        // Handle decimal keys like "0.5" - replace ALL dots with underscores
+        const cssKey = key.replace(/\./g, '_');
+        vars[`${prefix}-spacing-${cssKey}`] = value;
+    }
+    // Additive Material-3 named aliases (issue #1431), mapped to numeric values.
+    for (const [alias, numericKey] of Object.entries(spacingAliases)) {
+        const value = spacing[numericKey];
+        if (value !== undefined)
+            vars[`${prefix}-spacing-${alias}`] = value;
+    }
+    return vars;
+}
+/**
+ * Generate CSS custom properties from border radius scale
+ */
+function generateBorderRadiusVariables(borderRadius, prefix) {
+    const vars = {};
+    for (const [key, value] of Object.entries(borderRadius)) {
+        const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+        vars[`${prefix}-radius-${cssKey}`] = value;
+    }
+    // Additive Material-3 named aliases (issue #1431), mapped to t-shirt values.
+    for (const [alias, scaleKey] of Object.entries(borderRadiusAliases)) {
+        const value = borderRadius[scaleKey];
+        if (value !== undefined)
+            vars[`${prefix}-radius-${alias}`] = value;
+    }
+    return vars;
+}
+/**
+ * Generate CSS custom properties from elevation scale
+ */
+function generateElevationVariables(elevation, prefix) {
+    const vars = {};
+    for (const [key, value] of Object.entries(elevation)) {
+        vars[`${prefix}-elevation-${key}`] = value;
+    }
+    return vars;
+}
+/**
+ * Generate CSS custom properties from duration scale
+ */
+function generateDurationVariables(duration, prefix) {
+    const vars = {};
+    for (const [key, value] of Object.entries(duration)) {
+        const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+        vars[`${prefix}-duration-${cssKey}`] = value;
+    }
+    // Additive Material-3 motion aliases (issue #1431): short1…long4.
+    for (const [alias, value] of Object.entries(durationAliases)) {
+        vars[`${prefix}-duration-${alias}`] = value;
+    }
+    return vars;
+}
+/**
+ * Generate CSS custom properties from easing scale
+ */
+function generateEasingVariables(easing, prefix) {
+    const vars = {};
+    for (const [key, value] of Object.entries(easing)) {
+        const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+        vars[`${prefix}-easing-${cssKey}`] = value;
+    }
+    return vars;
+}
+/**
+ * Generate CSS custom properties for glass effects
+ */
+function generateGlassVariables(glass, prefix) {
+    if (!glass)
+        return {};
+    return {
+        [`${prefix}-glass-blur`]: glass.blur,
+        [`${prefix}-glass-saturation`]: glass.saturation,
+        [`${prefix}-glass-border-opacity`]: glass.borderOpacity,
+        [`${prefix}-glass-background-opacity`]: glass.backgroundOpacity,
+    };
+}
+/**
+ * Generate theme-independent helper tokens (issue #1431).
+ *
+ * Monospace font family, named font weights, and z-index stacking levels are
+ * the same across presets and color schemes. Emitting them as tokens lets
+ * components stop hardcoding magic values and keeps overlay layering / mono
+ * surfaces themeable.
+ */
+function generateStaticTokens(prefix) {
+    const vars = {};
+    for (const [alias, value] of Object.entries(fontFamilyAliases)) {
+        vars[`${prefix}-font-family-${alias}`] = value;
+    }
+    for (const [name, value] of Object.entries(fontWeightTokens)) {
+        vars[`${prefix}-typography-weight-${name}`] = value;
+    }
+    for (const [name, value] of Object.entries(zIndexTokens)) {
+        vars[`${prefix}-z-index-${name}`] = value;
+    }
+    return vars;
+}
+/**
+ * Generate all CSS custom properties for a theme
+ * @param theme - Theme definition
+ * @param isDark - Whether to use dark mode colors
+ * @param options - Generation options
+ * @returns Object with CSS variable names and values
+ */
+export function generateThemeVariables(theme, isDark, options = {}) {
+    const { prefix = '--smrt' } = options;
+    const colors = isDark ? theme.dark : theme.light;
+    return {
+        // Theme identification
+        [`${prefix}-theme-id`]: theme.id,
+        [`${prefix}-theme-name`]: theme.name,
+        [`${prefix}-color-scheme`]: isDark ? 'dark' : 'light',
+        [`${prefix}-font-family`]: theme.fontFamily,
+        // Colors
+        ...generateColorVariables(colors, prefix),
+        // Typography
+        ...generateTypographyVariables(theme.typography, prefix),
+        // Spacing
+        ...generateSpacingVariables(theme.spacing, prefix),
+        // Border radius
+        ...generateBorderRadiusVariables(theme.borderRadius, prefix),
+        // Elevation
+        ...generateElevationVariables(theme.elevation, prefix),
+        // Duration
+        ...generateDurationVariables(theme.duration, prefix),
+        // Easing
+        ...generateEasingVariables(theme.easing, prefix),
+        // Theme-independent helper tokens (mono font, named weights, z-index)
+        ...generateStaticTokens(prefix),
+        // Glass effects (if present)
+        ...generateGlassVariables(theme.glass, prefix),
+    };
+}
+/**
+ * Convert variables object to CSS style string
+ * @param variables - Record of CSS variable names and values
+ * @returns CSS string for style attribute
+ */
+export function variablesToStyleString(variables) {
+    return Object.entries(variables)
+        .map(([key, value]) => `${key}: ${value}`)
+        .join('; ');
+}
+/**
+ * Generate CSS class content for a theme
+ * @param theme - Theme definition
+ * @param isDark - Whether to use dark mode
+ * @param options - Generation options
+ * @returns CSS string for embedding in a <style> tag
+ */
+export function generateThemeCSS(theme, isDark, options = {}) {
+    const { prefix = '--smrt', includeDataAttr = true } = options;
+    const variables = generateThemeVariables(theme, isDark, { prefix });
+    const varDeclarations = Object.entries(variables)
+        .map(([key, value]) => `  ${key}: ${value};`)
+        .join('\n');
+    if (includeDataAttr) {
+        const scheme = isDark ? 'dark' : 'light';
+        return `[data-theme="${theme.id}"][data-color-scheme="${scheme}"] {\n${varDeclarations}\n}`;
+    }
+    return `:root {\n${varDeclarations}\n}`;
+}
+/**
+ * Generate all theme CSS for all presets and modes
+ * @returns Complete CSS for all themes
+ */
+export async function generateAllThemesCSS() {
+    const cssParts = [];
+    for (const theme of Object.values(themes)) {
+        cssParts.push(generateThemeCSS(theme, false, { includeDataAttr: true }));
+        cssParts.push(generateThemeCSS(theme, true, { includeDataAttr: true }));
+    }
+    return cssParts.join('\n\n');
+}

package/dist/themes/glass/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Glass Theme
+ *
+ * Apple-inspired glass morphism theme with backdrop blur effects,
+ * translucency, and layered depth. Features frosted glass surfaces
+ * and vibrant material effects.
+ */
+import type { Theme } from '../types.js';
+/**
+ * Glass theme definition
+ */
+export declare const glassTheme: Theme;
+export default glassTheme;
+//# sourceMappingURL=index.d.ts.map

package/dist/themes/glass/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/glass/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAQH,OAAO,KAAK,EAIV,KAAK,EAEN,MAAM,aAAa,CAAC;AAiSrB;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAcxB,CAAC;AAEF,eAAe,UAAU,CAAC"}