@mhmo91/schmancy 0.5.25 → 0.5.27

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

@@ -0,0 +1,546 @@
+/**
+ * Material Design 3 State Layer System
+ * Interactive state layers and opacity values following M3 specifications
+ * @see https://m3.material.io/foundations/interaction-states
+ */
+export interface M3StateOpacity {
+    hover: number;
+    focus: number;
+    pressed: number;
+    dragged: number;
+    disabled: number;
+    disabledContainer: number;
+    selected: number;
+}
+export interface M3StateLayer {
+    opacity: M3StateOpacity;
+    duration: {
+        enter: string;
+        exit: string;
+    };
+    easing: {
+        enter: string;
+        exit: string;
+    };
+}
+/**
+ * Material Design 3 State Opacity Values
+ * Standard opacity values for interactive states
+ */
+export declare const M3StateOpacity: M3StateOpacity;
+/**
+ * Material Design 3 State Layer Configuration
+ * Complete configuration for state layers including timing
+ */
+export declare const M3StateLayerConfig: M3StateLayer;
+/**
+ * Component-specific state configurations
+ * Maps components to their state layer behaviors
+ */
+export declare const M3ComponentStates: {
+    button: {
+        filled: {
+            hover: {
+                opacity: number;
+                color: string;
+            };
+            focus: {
+                opacity: number;
+                color: string;
+            };
+            pressed: {
+                opacity: number;
+                color: string;
+            };
+            disabled: {
+                opacity: number;
+                contentOpacity: number;
+            };
+        };
+        outlined: {
+            hover: {
+                opacity: number;
+                color: string;
+            };
+            focus: {
+                opacity: number;
+                color: string;
+            };
+            pressed: {
+                opacity: number;
+                color: string;
+            };
+            disabled: {
+                opacity: number;
+                contentOpacity: number;
+                borderOpacity: number;
+            };
+        };
+        text: {
+            hover: {
+                opacity: number;
+                color: string;
+            };
+            focus: {
+                opacity: number;
+                color: string;
+            };
+            pressed: {
+                opacity: number;
+                color: string;
+            };
+            disabled: {
+                opacity: number;
+                contentOpacity: number;
+            };
+        };
+        elevated: {
+            hover: {
+                opacity: number;
+                color: string;
+                elevation: number;
+            };
+            focus: {
+                opacity: number;
+                color: string;
+                elevation: number;
+            };
+            pressed: {
+                opacity: number;
+                color: string;
+                elevation: number;
+            };
+            disabled: {
+                opacity: number;
+                contentOpacity: number;
+                elevation: number;
+            };
+        };
+        tonal: {
+            hover: {
+                opacity: number;
+                color: string;
+            };
+            focus: {
+                opacity: number;
+                color: string;
+            };
+            pressed: {
+                opacity: number;
+                color: string;
+            };
+            disabled: {
+                opacity: number;
+                contentOpacity: number;
+            };
+        };
+    };
+    iconButton: {
+        standard: {
+            hover: {
+                opacity: number;
+                color: string;
+            };
+            focus: {
+                opacity: number;
+                color: string;
+            };
+            pressed: {
+                opacity: number;
+                color: string;
+            };
+            selected: {
+                opacity: number;
+                color: string;
+            };
+            disabled: {
+                opacity: number;
+                contentOpacity: number;
+            };
+        };
+        filled: {
+            hover: {
+                opacity: number;
+                color: string;
+            };
+            focus: {
+                opacity: number;
+                color: string;
+            };
+            pressed: {
+                opacity: number;
+                color: string;
+            };
+            selected: {
+                opacity: number;
+                color: string;
+            };
+            disabled: {
+                opacity: number;
+                contentOpacity: number;
+            };
+        };
+        tonal: {
+            hover: {
+                opacity: number;
+                color: string;
+            };
+            focus: {
+                opacity: number;
+                color: string;
+            };
+            pressed: {
+                opacity: number;
+                color: string;
+            };
+            selected: {
+                opacity: number;
+                color: string;
+            };
+            disabled: {
+                opacity: number;
+                contentOpacity: number;
+            };
+        };
+        outlined: {
+            hover: {
+                opacity: number;
+                color: string;
+            };
+            focus: {
+                opacity: number;
+                color: string;
+            };
+            pressed: {
+                opacity: number;
+                color: string;
+            };
+            selected: {
+                opacity: number;
+                color: string;
+            };
+            disabled: {
+                opacity: number;
+                contentOpacity: number;
+                borderOpacity: number;
+            };
+        };
+    };
+    card: {
+        filled: {
+            hover: {
+                opacity: number;
+                color: string;
+            };
+            focus: {
+                opacity: number;
+                color: string;
+            };
+            pressed: {
+                opacity: number;
+                color: string;
+            };
+            dragged: {
+                opacity: number;
+                color: string;
+                elevation: number;
+            };
+            disabled: {
+                opacity: number;
+                contentOpacity: number;
+            };
+        };
+        elevated: {
+            hover: {
+                opacity: number;
+                color: string;
+                elevation: number;
+            };
+            focus: {
+                opacity: number;
+                color: string;
+                elevation: number;
+            };
+            pressed: {
+                opacity: number;
+                color: string;
+                elevation: number;
+            };
+            dragged: {
+                opacity: number;
+                color: string;
+                elevation: number;
+            };
+            disabled: {
+                opacity: number;
+                contentOpacity: number;
+                elevation: number;
+            };
+        };
+        outlined: {
+            hover: {
+                opacity: number;
+                color: string;
+            };
+            focus: {
+                opacity: number;
+                color: string;
+            };
+            pressed: {
+                opacity: number;
+                color: string;
+            };
+            dragged: {
+                opacity: number;
+                color: string;
+                elevation: number;
+            };
+            disabled: {
+                opacity: number;
+                contentOpacity: number;
+                borderOpacity: number;
+            };
+        };
+    };
+    listItem: {
+        hover: {
+            opacity: number;
+            color: string;
+        };
+        focus: {
+            opacity: number;
+            color: string;
+        };
+        pressed: {
+            opacity: number;
+            color: string;
+        };
+        selected: {
+            opacity: number;
+            color: string;
+        };
+        disabled: {
+            opacity: number;
+            contentOpacity: number;
+        };
+    };
+    chip: {
+        assist: {
+            hover: {
+                opacity: number;
+                color: string;
+            };
+            focus: {
+                opacity: number;
+                color: string;
+            };
+            pressed: {
+                opacity: number;
+                color: string;
+            };
+            disabled: {
+                opacity: number;
+                contentOpacity: number;
+                borderOpacity: number;
+            };
+        };
+        filter: {
+            hover: {
+                opacity: number;
+                color: string;
+            };
+            focus: {
+                opacity: number;
+                color: string;
+            };
+            pressed: {
+                opacity: number;
+                color: string;
+            };
+            selected: {
+                opacity: number;
+                color: string;
+            };
+            disabled: {
+                opacity: number;
+                contentOpacity: number;
+                borderOpacity: number;
+            };
+        };
+        input: {
+            hover: {
+                opacity: number;
+                color: string;
+            };
+            focus: {
+                opacity: number;
+                color: string;
+            };
+            pressed: {
+                opacity: number;
+                color: string;
+            };
+            selected: {
+                opacity: number;
+                color: string;
+            };
+            disabled: {
+                opacity: number;
+                contentOpacity: number;
+                borderOpacity: number;
+            };
+        };
+        suggestion: {
+            hover: {
+                opacity: number;
+                color: string;
+            };
+            focus: {
+                opacity: number;
+                color: string;
+            };
+            pressed: {
+                opacity: number;
+                color: string;
+            };
+            disabled: {
+                opacity: number;
+                contentOpacity: number;
+                borderOpacity: number;
+            };
+        };
+    };
+    navigation: {
+        item: {
+            hover: {
+                opacity: number;
+                color: string;
+            };
+            focus: {
+                opacity: number;
+                color: string;
+            };
+            pressed: {
+                opacity: number;
+                color: string;
+            };
+            selected: {
+                opacity: number;
+                color: string;
+            };
+            disabled: {
+                opacity: number;
+                contentOpacity: number;
+            };
+        };
+        rail: {
+            hover: {
+                opacity: number;
+                color: string;
+            };
+            focus: {
+                opacity: number;
+                color: string;
+            };
+            pressed: {
+                opacity: number;
+                color: string;
+            };
+            selected: {
+                opacity: number;
+                color: string;
+            };
+            disabled: {
+                opacity: number;
+                contentOpacity: number;
+            };
+        };
+    };
+    tab: {
+        primary: {
+            hover: {
+                opacity: number;
+                color: string;
+            };
+            focus: {
+                opacity: number;
+                color: string;
+            };
+            pressed: {
+                opacity: number;
+                color: string;
+            };
+            selected: {
+                opacity: number;
+                color: string;
+            };
+            disabled: {
+                opacity: number;
+                contentOpacity: number;
+            };
+        };
+        secondary: {
+            hover: {
+                opacity: number;
+                color: string;
+            };
+            focus: {
+                opacity: number;
+                color: string;
+            };
+            pressed: {
+                opacity: number;
+                color: string;
+            };
+            selected: {
+                opacity: number;
+                color: string;
+            };
+            disabled: {
+                opacity: number;
+                contentOpacity: number;
+            };
+        };
+    };
+};
+/**
+ * Generate CSS custom properties for state layers
+ */
+export declare function generateStateCSS(): string;
+/**
+ * State layer utility functions
+ */
+export declare const state: {
+    /**
+     * Get state opacity value
+     */
+    getOpacity(stateName: keyof M3StateOpacity): number;
+    /**
+     * Create state layer overlay
+     */
+    createOverlay(stateName: keyof M3StateOpacity, color?: string, shape?: string): string;
+    /**
+     * Create ripple effect
+     */
+    createRipple(color?: string, duration?: string): string;
+    /**
+     * Apply state transition
+     */
+    applyTransition(properties?: string[]): string;
+    /**
+     * Get component state configuration
+     */
+    getComponentState(component: keyof typeof M3ComponentStates, variant?: string, stateName?: string): any;
+    /**
+     * Create focus indicator
+     */
+    createFocusIndicator(color?: string, width?: string, offset?: string): string;
+    /**
+     * Create disabled state
+     */
+    createDisabledState(contentOpacity?: number, containerOpacity?: number): string;
+    /**
+     * Create selected state
+     */
+    createSelectedState(color?: string, opacity?: number): string;
+};

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

@@ -0,0 +1,74 @@
+/**
+ * Material Design 3 Typography System
+ * Complete typography scale following M3 specifications
+ * @see https://m3.material.io/styles/typography/type-scale-tokens
+ */
+export interface M3TypeScale {
+    fontSize: string;
+    lineHeight: string;
+    fontFamily: string;
+    fontWeight: string;
+    letterSpacing: string;
+}
+export interface M3Typography {
+    display: {
+        large: M3TypeScale;
+        medium: M3TypeScale;
+        small: M3TypeScale;
+    };
+    headline: {
+        large: M3TypeScale;
+        medium: M3TypeScale;
+        small: M3TypeScale;
+    };
+    title: {
+        large: M3TypeScale;
+        medium: M3TypeScale;
+        small: M3TypeScale;
+    };
+    body: {
+        large: M3TypeScale;
+        medium: M3TypeScale;
+        small: M3TypeScale;
+    };
+    label: {
+        large: M3TypeScale;
+        medium: M3TypeScale;
+        small: M3TypeScale;
+    };
+}
+/**
+ * Material Design 3 Typography Configuration
+ * Based on Roboto font family as recommended by Material Design
+ */
+export declare const M3TypographyConfig: M3Typography;
+/**
+ * Generate CSS custom properties for typography
+ */
+export declare function generateTypographyCSS(): string;
+/**
+ * Typography utility functions
+ */
+export declare const typography: {
+    /**
+     * Get a specific typography scale
+     */
+    getScale(category: keyof M3Typography, scale: "large" | "medium" | "small"): M3TypeScale;
+    /**
+     * Apply typography scale as CSS
+     */
+    applyScale(category: keyof M3Typography, scale: "large" | "medium" | "small"): string;
+    /**
+     * Get responsive typography based on viewport
+     */
+    getResponsiveScale(desktop: {
+        category: keyof M3Typography;
+        scale: "large" | "medium" | "small";
+    }, tablet?: {
+        category: keyof M3Typography;
+        scale: "large" | "medium" | "small";
+    }, mobile?: {
+        category: keyof M3Typography;
+        scale: "large" | "medium" | "small";
+    }): string;
+};