@mhmo91/schmancy 0.5.25 → 0.5.27

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

@@ -5,35 +5,56 @@ declare const theme: {
                 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;
@@ -47,6 +68,56 @@ declare const theme: {
                     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;
@@ -56,15 +127,164 @@ declare const theme: {
                 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;
+                };
+            };
+        };
     };
 };
 /**
- * Type definition for the Schmancy theme configuration.
- * Contains all available theme variables including colors, elevations, and outlines.
+ * Type definition for the Schmancy Material Design 3 theme configuration.
+ * Complete theme system with colors, typography, shape, motion, and state layers.
  *
  * @typedef {Object} TSchmancyTheme
  *
@@ -76,7 +296,13 @@ declare const theme: {
  *   sys: {
  *     color: {
  *       primary: {
- *         default: '#6200ee'
+ *         default: '#6750A4',
+ *         container: '#EADDFF'
+ *       }
+ *     },
+ *     shape: {
+ *       corner: {
+ *         medium: '12px'
  *       }
  *     }
  *   }

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

@@ -0,0 +1,198 @@
+/**
+ * Material Design 3 Motion System
+ * Complete motion and animation system following M3 specifications
+ * @see https://m3.material.io/styles/motion
+ */
+export interface M3Easing {
+    emphasized: string;
+    emphasizedDecelerate: string;
+    emphasizedAccelerate: string;
+    standard: string;
+    standardDecelerate: string;
+    standardAccelerate: string;
+    legacy: string;
+    linear: string;
+}
+export interface M3Duration {
+    short1: number;
+    short2: number;
+    short3: number;
+    short4: number;
+    medium1: number;
+    medium2: number;
+    medium3: number;
+    medium4: number;
+    long1: number;
+    long2: number;
+    long3: number;
+    long4: number;
+    extraLong1: number;
+    extraLong2: number;
+    extraLong3: number;
+    extraLong4: number;
+}
+export interface M3Motion {
+    easing: M3Easing;
+    duration: M3Duration;
+}
+/**
+ * Material Design 3 Easing Functions
+ * Easing tokens define the acceleration curve of animations
+ */
+export declare const M3Easing: M3Easing;
+/**
+ * Material Design 3 Duration Tokens
+ * Duration values in milliseconds for consistent timing
+ */
+export declare const M3Duration: M3Duration;
+/**
+ * Motion configuration combining easing and duration
+ */
+export declare const M3MotionConfig: M3Motion;
+/**
+ * Predefined motion patterns for common use cases
+ */
+export declare const M3MotionPatterns: {
+    fadeIn: {
+        easing: string;
+        duration: number;
+        keyframes: {
+            opacity: number;
+        }[];
+    };
+    fadeOut: {
+        easing: string;
+        duration: number;
+        keyframes: {
+            opacity: number;
+        }[];
+    };
+    scaleUp: {
+        easing: string;
+        duration: number;
+        keyframes: {
+            transform: string;
+        }[];
+    };
+    scaleDown: {
+        easing: string;
+        duration: number;
+        keyframes: {
+            transform: string;
+        }[];
+    };
+    slideInFromBottom: {
+        easing: string;
+        duration: number;
+        keyframes: {
+            transform: string;
+        }[];
+    };
+    slideOutToBottom: {
+        easing: string;
+        duration: number;
+        keyframes: {
+            transform: string;
+        }[];
+    };
+    slideInFromRight: {
+        easing: string;
+        duration: number;
+        keyframes: {
+            transform: string;
+        }[];
+    };
+    slideOutToRight: {
+        easing: string;
+        duration: number;
+        keyframes: {
+            transform: string;
+        }[];
+    };
+    expand: {
+        easing: string;
+        duration: number;
+        keyframes: {
+            height: string;
+            opacity: number;
+        }[];
+    };
+    collapse: {
+        easing: string;
+        duration: number;
+        keyframes: {
+            height: string;
+            opacity: number;
+        }[];
+    };
+    sharedAxisX: {
+        easing: string;
+        duration: number;
+        incoming: {
+            transform: string;
+            opacity: number;
+        }[];
+        outgoing: {
+            transform: string;
+            opacity: number;
+        }[];
+    };
+    sharedAxisY: {
+        easing: string;
+        duration: number;
+        incoming: {
+            transform: string;
+            opacity: number;
+        }[];
+        outgoing: {
+            transform: string;
+            opacity: number;
+        }[];
+    };
+    sharedAxisZ: {
+        easing: string;
+        duration: number;
+        incoming: {
+            transform: string;
+            opacity: number;
+        }[];
+        outgoing: {
+            transform: string;
+            opacity: number;
+        }[];
+    };
+};
+/**
+ * Generate CSS custom properties for motion
+ */
+export declare function generateMotionCSS(): string;
+/**
+ * Motion utility functions
+ */
+export declare const motion: {
+    /**
+     * Create a CSS transition string
+     */
+    createTransition(property: string | string[], duration?: keyof M3Duration, easing?: keyof M3Easing): string;
+    /**
+     * Create a CSS animation string
+     */
+    createAnimation(name: string, duration?: keyof M3Duration, easing?: keyof M3Easing, options?: {
+        delay?: keyof M3Duration;
+        iterationCount?: number | "infinite";
+        direction?: "normal" | "reverse" | "alternate" | "alternate-reverse";
+        fillMode?: "none" | "forwards" | "backwards" | "both";
+    }): string;
+    /**
+     * Get duration in milliseconds
+     */
+    getDuration(duration: keyof M3Duration): number;
+    /**
+     * Get easing function
+     */
+    getEasing(easing: keyof M3Easing): string;
+    /**
+     * Create staggered animations for lists
+     */
+    createStagger(itemCount: number, baseDelay?: keyof M3Duration, increment?: keyof M3Duration): number[];
+};