@mhmo91/schmancy 0.5.25 → 0.5.27

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

@@ -46,35 +46,56 @@ declare class ThemeService {
                 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;
@@ -88,6 +109,56 @@ declare class ThemeService {
                     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;
@@ -97,10 +168,159 @@ declare class ThemeService {
                 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;
+                };
+            };
+        };
     }>>;
     readonly themeComponent$: Observable<SchmancyThemeComponent>;
     get scheme(): 'dark' | 'light' | 'auto';

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

@@ -0,0 +1,144 @@
+/**
+ * Material Design 3 Shape System
+ * Complete shape and corner radius system following M3 specifications
+ * @see https://m3.material.io/styles/shape
+ */
+export type CornerFamily = 'rounded' | 'cut' | 'angular';
+export interface M3ShapeScale {
+    value: string;
+    family: CornerFamily;
+}
+export interface M3Shape {
+    corner: {
+        none: M3ShapeScale;
+        extraSmall: M3ShapeScale;
+        extraSmallTop: M3ShapeScale;
+        small: M3ShapeScale;
+        medium: M3ShapeScale;
+        large: M3ShapeScale;
+        largeEnd: M3ShapeScale;
+        largeTop: M3ShapeScale;
+        extraLarge: M3ShapeScale;
+        extraLargeTop: M3ShapeScale;
+        full: M3ShapeScale;
+    };
+}
+/**
+ * Material Design 3 Shape Configuration
+ * Default corner radius values with rounded family
+ */
+export declare const M3ShapeConfig: M3Shape;
+/**
+ * Component-specific shape tokens
+ * Maps M3 components to their recommended shape scales
+ */
+export declare const M3ComponentShapes: {
+    button: {
+        filled: string;
+        outlined: string;
+        text: string;
+        elevated: string;
+        tonal: string;
+        fab: string;
+        extendedFab: string;
+        icon: string;
+        segmented: string;
+    };
+    card: {
+        filled: string;
+        elevated: string;
+        outlined: string;
+    };
+    chip: {
+        assist: string;
+        filter: string;
+        input: string;
+        suggestion: string;
+    };
+    dialog: {
+        basic: string;
+        fullScreen: string;
+    };
+    navigation: {
+        drawer: string;
+        rail: string;
+        bar: string;
+        tab: string;
+    };
+    menu: {
+        container: string;
+        item: string;
+    };
+    textField: {
+        filled: string;
+        outlined: string;
+    };
+    sheet: {
+        bottom: string;
+        side: string;
+    };
+    progress: {
+        linear: string;
+        circular: string;
+    };
+    tooltip: {
+        plain: string;
+        rich: string;
+    };
+    snackbar: string;
+    badge: {
+        small: string;
+        large: string;
+    };
+};
+/**
+ * Shape family implementations
+ * Different corner treatments for design expression
+ */
+export declare const ShapeFamilies: {
+    /**
+     * Rounded family - Default M3 shape family
+     */
+    rounded: (radius: string) => string;
+    /**
+     * Cut family - Creates cut corners using clip-path
+     */
+    cut: (size: string) => string;
+    /**
+     * Angular family - Creates angular corners
+     */
+    angular: () => string;
+};
+/**
+ * Generate CSS custom properties for shapes
+ */
+export declare function generateShapeCSS(): string;
+/**
+ * Shape utility functions
+ */
+export declare const shape: {
+    /**
+     * Get a shape scale value
+     */
+    getCorner(scale: keyof M3Shape["corner"]): M3ShapeScale;
+    /**
+     * Get component-specific shape
+     */
+    getComponentShape(component: keyof typeof M3ComponentShapes, variant?: string): string;
+    /**
+     * Apply shape with family
+     */
+    applyShape(scale: keyof M3Shape["corner"], family?: CornerFamily): string;
+    /**
+     * Create asymmetric shape
+     */
+    createAsymmetricShape(topLeft: string, topRight: string, bottomRight: string, bottomLeft: string): string;
+    /**
+     * Create responsive shape
+     */
+    createResponsiveShape(desktop: keyof M3Shape["corner"], tablet?: keyof M3Shape["corner"], mobile?: keyof M3Shape["corner"]): string;
+    /**
+     * Check if a value is a full corner (pill shape)
+     */
+    isFullCorner(value: string): boolean;
+};