@mhmo91/schmancy 0.5.25 → 0.5.26

package/types/src/theme/context.d.ts

@@ -29,35 +29,56 @@ export declare const themeContext: {
                 scrim: string;
                 outline: string;
                 outlineVariant: string;
+                shadow: string;
                 surface: {
                     default: string;
                     dim: string;
                     bright: string;
                     container: string;
+                    containerLow: string;
+                    containerLowest: string;
+                    containerHigh: string;
+                    containerHighest: string;
+                    on: string;
+                    onVariant: string;
+                    tint: string;
+                    inverse: string;
+                    inverseOn: string;
                     low: string;
                     high: string;
                     highest: string;
                     lowest: string;
-                    on: string;
-                    onVariant: string;
                 };
                 primary: {
                     default: string;
                     on: string;
                     container: string;
                     onContainer: string;
+                    fixed: string;
+                    fixedDim: string;
+                    onFixed: string;
+                    onFixedVariant: string;
+                    inverse: string;
                 };
                 secondary: {
                     default: string;
                     on: string;
                     container: string;
                     onContainer: string;
+                    fixed: string;
+                    fixedDim: string;
+                    onFixed: string;
+                    onFixedVariant: string;
                 };
                 tertiary: {
                     default: string;
                     on: string;
                     container: string;
                     onContainer: string;
+                    fixed: string;
+                    fixedDim: string;
+                    onFixed: string;
+                    onFixedVariant: string;
                 };
                 error: {
                     default: string;
@@ -71,6 +92,56 @@ export declare const themeContext: {
                     container: string;
                     onContainer: string;
                 };
+                warning: {
+                    default: string;
+                    on: string;
+                    container: string;
+                    onContainer: string;
+                };
+                info: {
+                    default: string;
+                    on: string;
+                    container: string;
+                    onContainer: string;
+                };
+            };
+            typography: {
+                display: {
+                    large: string;
+                    medium: string;
+                    small: string;
+                };
+                headline: {
+                    large: string;
+                    medium: string;
+                    small: string;
+                };
+                title: {
+                    large: string;
+                    medium: string;
+                    small: string;
+                };
+                body: {
+                    large: string;
+                    medium: string;
+                    small: string;
+                };
+                label: {
+                    large: string;
+                    medium: string;
+                    small: string;
+                };
+            };
+            shape: {
+                corner: {
+                    none: string;
+                    extraSmall: string;
+                    small: string;
+                    medium: string;
+                    large: string;
+                    extraLarge: string;
+                    full: string;
+                };
             };
             elevation: {
                 0: string;
@@ -80,9 +151,158 @@ export declare const themeContext: {
                 4: string;
                 5: string;
             };
+            motion: {
+                easing: {
+                    emphasized: string;
+                    emphasizedDecelerate: string;
+                    emphasizedAccelerate: string;
+                    standard: string;
+                    standardDecelerate: string;
+                    standardAccelerate: string;
+                    legacy: string;
+                    linear: string;
+                };
+                duration: {
+                    short1: string;
+                    short2: string;
+                    short3: string;
+                    short4: string;
+                    medium1: string;
+                    medium2: string;
+                    medium3: string;
+                    medium4: string;
+                    long1: string;
+                    long2: string;
+                    long3: string;
+                    long4: string;
+                    extraLong1: string;
+                    extraLong2: string;
+                    extraLong3: string;
+                    extraLong4: string;
+                };
+            };
+            state: {
+                opacity: {
+                    hover: string;
+                    focus: string;
+                    pressed: string;
+                    dragged: string;
+                    disabled: string;
+                    disabledContainer: string;
+                };
+            };
+            spacing: {
+                0: string;
+                1: string;
+                2: string;
+                3: string;
+                4: string;
+                5: string;
+                6: string;
+                7: string;
+                8: string;
+                9: string;
+                10: string;
+                11: string;
+                12: string;
+            };
             outline: {
                 1: string;
             };
         };
+        ref: {
+            palette: {
+                primary: {
+                    0: string;
+                    10: string;
+                    20: string;
+                    30: string;
+                    40: string;
+                    50: string;
+                    60: string;
+                    70: string;
+                    80: string;
+                    90: string;
+                    95: string;
+                    99: string;
+                    100: string;
+                };
+                secondary: {
+                    0: string;
+                    10: string;
+                    20: string;
+                    30: string;
+                    40: string;
+                    50: string;
+                    60: string;
+                    70: string;
+                    80: string;
+                    90: string;
+                    95: string;
+                    99: string;
+                    100: string;
+                };
+                tertiary: {
+                    0: string;
+                    10: string;
+                    20: string;
+                    30: string;
+                    40: string;
+                    50: string;
+                    60: string;
+                    70: string;
+                    80: string;
+                    90: string;
+                    95: string;
+                    99: string;
+                    100: string;
+                };
+                neutral: {
+                    0: string;
+                    10: string;
+                    20: string;
+                    30: string;
+                    40: string;
+                    50: string;
+                    60: string;
+                    70: string;
+                    80: string;
+                    90: string;
+                    95: string;
+                    99: string;
+                    100: string;
+                };
+                neutralVariant: {
+                    0: string;
+                    10: string;
+                    20: string;
+                    30: string;
+                    40: string;
+                    50: string;
+                    60: string;
+                    70: string;
+                    80: string;
+                    90: string;
+                    95: string;
+                    99: string;
+                    100: string;
+                };
+                error: {
+                    0: string;
+                    10: string;
+                    20: string;
+                    30: string;
+                    40: string;
+                    50: string;
+                    60: string;
+                    70: string;
+                    80: string;
+                    90: string;
+                    95: string;
+                    99: string;
+                    100: string;
+                };
+            };
+        };
     }>;
 };

package/types/src/theme/index.d.ts

@@ -1,5 +1,12 @@
-export * from './theme.component';
-export * from './theme.events';
-export * from './theme.format';
+/**
+ * Material Design 3 Theme System for Schmancy
+ * Core theme system with essential exports
+ *
+ * @module @schmancy/theme
+ */
 export * from './theme.interface';
+export * from './theme.format';
 export * from './theme.service';
+export * from './theme.component';
+export * from './theme.events';
+export * from './context';

package/types/src/theme/theme.elevation.d.ts

@@ -0,0 +1,131 @@
+/**
+ * Material Design 3 Elevation System
+ * Complete elevation system with tinted shadows following M3 specifications
+ * @see https://m3.material.io/styles/elevation
+ */
+export interface M3ElevationLevel {
+    level: number;
+    shadow: string;
+    surfaceTint: number;
+    blur: number;
+    spread: number;
+    verticalOffset: number;
+    opacity: {
+        umbra: number;
+        penumbra: number;
+    };
+}
+export interface M3Elevation {
+    0: M3ElevationLevel;
+    1: M3ElevationLevel;
+    2: M3ElevationLevel;
+    3: M3ElevationLevel;
+    4: M3ElevationLevel;
+    5: M3ElevationLevel;
+}
+/**
+ * Material Design 3 Elevation Configuration
+ * Elevation levels with corresponding shadow values and surface tint percentages
+ */
+export declare const M3ElevationConfig: M3Elevation;
+/**
+ * Component elevation mappings
+ * Recommended elevation levels for M3 components
+ */
+export declare const M3ComponentElevations: {
+    surface: {
+        default: number;
+        low: number;
+        medium: number;
+        high: number;
+        highest: number;
+    };
+    card: {
+        filled: number;
+        elevated: number;
+        dragged: number;
+    };
+    button: {
+        filled: number;
+        elevated: number;
+        elevatedHover: number;
+        elevatedPressed: number;
+        fab: number;
+        fabHover: number;
+        fabPressed: number;
+        fabLowered: number;
+    };
+    dialog: number;
+    menu: number;
+    navigation: {
+        drawer: number;
+        drawerModal: number;
+        rail: number;
+        bar: number;
+        barScrolled: number;
+    };
+    appBar: {
+        default: number;
+        scrolled: number;
+    };
+    tooltip: {
+        plain: number;
+        rich: number;
+    };
+    sheet: {
+        bottom: number;
+        side: number;
+        modal: number;
+    };
+    snackbar: number;
+    popover: number;
+    search: {
+        bar: number;
+        view: number;
+    };
+};
+/**
+ * Generate shadow with color tint
+ * Creates a tinted shadow based on the primary color
+ */
+export declare function generateTintedShadow(level: keyof M3Elevation, primaryColor: string, isDark?: boolean): string;
+/**
+ * Generate CSS custom properties for elevation
+ */
+export declare function generateElevationCSS(isDark?: boolean): string;
+/**
+ * Elevation utility functions
+ */
+export declare const elevation: {
+    /**
+     * Get elevation level configuration
+     */
+    getLevel(level: keyof M3Elevation): M3ElevationLevel;
+    /**
+     * Get component-specific elevation
+     */
+    getComponentElevation(component: keyof typeof M3ComponentElevations, state?: string): number;
+    /**
+     * Create elevation transition
+     */
+    createTransition(duration?: string, easing?: string): string;
+    /**
+     * Combine elevation with additional shadow
+     */
+    combineElevation(level: keyof M3Elevation, additionalShadow: string, isDark?: boolean): string;
+    /**
+     * Create responsive elevation
+     */
+    createResponsiveElevation(desktop: keyof M3Elevation, tablet?: keyof M3Elevation, mobile?: keyof M3Elevation, isDark?: boolean): string;
+    /**
+     * Get surface tint percentage for a level
+     */
+    getSurfaceTint(level: keyof M3Elevation): number;
+    /**
+     * Apply elevation with surface tint as background overlay
+     */
+    applyElevationWithTint(level: keyof M3Elevation, primaryColor: string, backgroundColor: string, isDark?: boolean): {
+        boxShadow: string;
+        background: string;
+    };
+};

package/types/src/theme/theme.format.d.ts

@@ -1,9 +1,36 @@
 import { Theme } from '@material/material-color-utilities';
 import { TSchmancyTheme } from './theme.interface';
 /**
- * Updates the theme based on the original scheme.
- * @param originalScheme The generated scheme from Material Color Utilities.
- * @param isDark Whether to generate a dark theme.
- * @param successBaseColor The base color (as ARGB number) to compute the success palette.
+ * Generates a complete Material Design 3 theme
+ * @param originalTheme The generated theme from Material Color Utilities
+ * @param isDark Whether to generate a dark theme
+ * @param extendedColors Optional extended colors (success, warning, info)
  */
-export declare function formateTheme(originalScheme: Theme, isDark: boolean, successBaseColor: number): Partial<TSchmancyTheme>;
+export declare function formateTheme(originalTheme: Theme, isDark?: boolean, extendedColors?: {
+    success?: number;
+    warning?: number;
+    info?: number;
+}): Partial<TSchmancyTheme>;
+/**
+ * Backward compatibility wrapper for the old API
+ */
+export declare function createLightTonalPaletteFromBaseColor(hue: number, chroma: number): {
+    cLowest: number;
+    cLow: number;
+    c: number;
+    cHigh: number;
+    cHighest: number;
+    sDim: number;
+    s: number;
+    sBright: number;
+};
+export declare function createDarkTonalPaletteFromBaseColor(hue: number, chroma: number): {
+    cLowest: number;
+    cLow: number;
+    c: number;
+    cHigh: number;
+    cHighest: number;
+    sDim: number;
+    s: number;
+    sBright: number;
+};