@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.17

package/dist/themes/themes/default.esm.js

@@ -0,0 +1,584 @@
+/**
+ * Default Base Theme Configuration
+ * This serves as the foundation for all other themes.
+ * Based on Stan Design theme - the primary brand theme.
+ * Any undefined values in specific themes will fall back to these defaults.
+ */
+export const defaultTheme = {
+    fonts: {
+        primary: {
+            family: 'Clash Display',
+            fallbacks: ['ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', '"Noto Sans"', 'sans-serif'],
+            weights: [300, 400, 500, 600, 700],
+            display: 'swap',
+            source: {
+                type: 'custom',
+                files: {
+                    woff2: '/fonts/clash-display/ClashDisplay-Variable.woff2'
+                }
+            },
+            sizes: {
+                xs: '0.75rem',
+                sm: '0.875rem',
+                md: '1rem',
+                lg: '1.125rem',
+                xl: '1.25rem',
+                '2xl': '1.5rem',
+                '3xl': '1.875rem',
+                '4xl': '2.25rem',
+                '5xl': '3rem',
+                '6xl': '3.75rem'
+            },
+            lineHeights: {
+                tight: '1.25',
+                normal: '1.5',
+                relaxed: '1.75',
+                loose: '2'
+            },
+            letterSpacing: {
+                tight: '-0.025em',
+                normal: '0em',
+                wide: '0.025em',
+                wider: '0.05em',
+                widest: '0.1em'
+            }
+        },
+        secondary: {
+            family: 'Clash Display',
+            fallbacks: ['ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', '"Noto Sans"', 'sans-serif'],
+            weights: [300, 400, 500, 600, 700],
+            display: 'swap',
+            source: {
+                type: 'custom',
+                files: {
+                    woff2: '/fonts/clash-display/ClashDisplay-Variable.woff2'
+                }
+            },
+            sizes: {
+                xs: '0.75rem',
+                sm: '0.875rem',
+                md: '1rem',
+                lg: '1.125rem',
+                xl: '1.25rem',
+                '2xl': '1.5rem',
+                '3xl': '1.875rem',
+                '4xl': '2.25rem',
+                '5xl': '3rem',
+                '6xl': '3.75rem'
+            },
+            lineHeights: {
+                tight: '1.25',
+                normal: '1.5',
+                relaxed: '1.75',
+                loose: '2'
+            },
+            letterSpacing: {
+                tight: '-0.025em',
+                normal: '0em',
+                wide: '0.025em',
+                wider: '0.05em',
+                widest: '0.1em'
+            }
+        },
+        display: {
+            family: 'Clash Display, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
+            weights: [400, 500, 600, 700],
+            sizes: {
+                xs: '1.5rem',
+                sm: '1.875rem',
+                md: '2.25rem',
+                lg: '3rem',
+                xl: '3.75rem',
+                '2xl': '4.5rem',
+                '3xl': '6rem',
+                '4xl': '7.5rem',
+                '5xl': '9rem',
+                '6xl': '12rem'
+            },
+            lineHeights: {
+                tight: '1.1',
+                normal: '1.2',
+                relaxed: '1.3',
+                loose: '1.4'
+            },
+            letterSpacing: {
+                tight: '-0.02em',
+                normal: '-0.01em',
+                wide: '0em',
+                wider: '0.01em',
+                widest: '0.02em'
+            }
+        },
+        body: {
+            family: 'Clash Display, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
+            weights: [300, 400, 500],
+            sizes: {
+                xs: '0.75rem',
+                sm: '0.875rem',
+                md: '1rem',
+                lg: '1.125rem',
+                xl: '1.25rem',
+                '2xl': '1.5rem',
+                '3xl': '1.875rem',
+                '4xl': '2.25rem',
+                '5xl': '3rem',
+                '6xl': '3.75rem'
+            },
+            lineHeights: {
+                tight: '1.4',
+                normal: '1.6',
+                relaxed: '1.8',
+                loose: '2'
+            },
+            letterSpacing: {
+                tight: '-0.01em',
+                normal: '0em',
+                wide: '0.01em',
+                wider: '0.02em',
+                widest: '0.05em'
+            }
+        },
+        mono: {
+            family: 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace',
+            weights: [400, 500, 600],
+            sizes: {
+                xs: '0.75rem',
+                sm: '0.875rem',
+                md: '1rem',
+                lg: '1.125rem',
+                xl: '1.25rem',
+                '2xl': '1.5rem',
+                '3xl': '1.875rem',
+                '4xl': '2.25rem',
+                '5xl': '3rem',
+                '6xl': '3.75rem'
+            },
+            lineHeights: {
+                tight: '1.25',
+                normal: '1.5',
+                relaxed: '1.75',
+                loose: '2'
+            },
+            letterSpacing: {
+                tight: '-0.025em',
+                normal: '0em',
+                wide: '0.025em',
+                wider: '0.05em',
+                widest: '0.1em'
+            }
+        }
+    },
+    colors: {
+        primary: {
+            50: '#eff6ff',
+            100: '#dbeafe',
+            200: '#bfdbfe',
+            300: '#93c5fd',
+            400: '#60a5fa',
+            500: '#3b82f6', // This is the main primary color
+            600: '#2563eb',
+            700: '#1d4ed8',
+            800: '#1e40af',
+            900: '#1e3a8a',
+            // RGB versions for rgba() usage
+            '500-rgb': '59, 130, 246',
+            '600-rgb': '37, 99, 235',
+            '700-rgb': '29, 78, 216'
+        },
+        secondary: {
+            50: '#f8fafc',
+            100: '#f1f5f9',
+            200: '#e2e8f0',
+            300: '#cbd5e1',
+            400: '#94a3b8',
+            500: '#64748b',
+            600: '#475569',
+            700: '#334155',
+            800: '#1e293b',
+            900: '#0f172a'
+        },
+        semantic: {
+            success: '#10b981',
+            warning: '#f59e0b',
+            error: '#ef4444',
+            errorDark: '#dc2626', // Darker red for destructive hover states
+            info: '#3b82f6',
+            // RGB versions for rgba() usage
+            successRgb: '16, 185, 129',
+            warningRgb: '245, 158, 11',
+            errorRgb: '239, 68, 68',
+            errorDarkRgb: '220, 38, 38',
+            infoRgb: '59, 130, 246',
+            // Additional RGB versions referenced in CSS
+            'success-rgb': '16, 185, 129',
+            'warning-rgb': '245, 158, 11',
+            'error-rgb': '239, 68, 68',
+            'error-dark-rgb': '220, 38, 38',
+            'info-rgb': '59, 130, 246'
+        },
+        neutral: {
+            50: '#fafafa',
+            100: '#f5f5f5',
+            200: '#e5e5e5',
+            300: '#d4d4d4',
+            400: '#a3a3a3',
+            500: '#737373',
+            600: '#525252',
+            700: '#404040',
+            800: '#262626',
+            900: '#171717'
+        },
+        surface: {
+            background: '#ffffff',
+            surface: '#f8fafc',
+            border: '#e2e8f0',
+            divider: '#cbd5e1'
+        },
+        text: {
+            primary: '#0f172a',
+            secondary: '#475569',
+            muted: '#64748b',
+            inverse: '#ffffff',
+            onPrimary: '#ffffff',
+            onSecondary: '#ffffff',
+            onSurface: '#0f172a'
+        },
+        interactive: {
+            hover: '#f1f5f9',
+            active: '#e2e8f0',
+            focus: '#3b82f6',
+            disabled: '#cbd5e1'
+        },
+        // Additional colors referenced in CSS
+        accent: '#6366f1',
+        'bg-primary': '#ffffff',
+        'bg-secondary': '#f8fafc',
+        'surface-bg': '#f8fafc',
+        // Additional missing CSS variables
+        'primary-hover': '#2563eb',
+        'primary-active': '#1d4ed8',
+        'accent-rgb': '99, 102, 241',
+        'border': '#e2e8f0',
+        // Border semantic variables
+        'border-transparent': 'transparent',
+        // Text colors referenced in CSS
+        'text-primary': '#0f172a',
+        'text-secondary': '#475569'
+    },
+    navigation: {
+        layout: 'horizontal',
+        style: 'enhanced',
+        behavior: 'static',
+        responsive: 'mobile-first',
+        animations: {
+            duration: {
+                fast: '0.15s',
+                normal: '0.2s',
+                slow: '0.3s',
+                instant: '0s'
+            },
+            easing: {
+                linear: 'linear',
+                ease: 'ease',
+                easeIn: 'ease-in',
+                easeOut: 'ease-out',
+                easeInOut: 'ease-in-out',
+                bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
+                elastic: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
+            },
+            stagger: {
+                enabled: true,
+                delay: '0.05s',
+                direction: 'forward'
+            },
+            transitions: {
+                enter: '0.2s ease-out',
+                exit: '0.15s ease-in',
+                move: '0.2s ease',
+                resize: '0.1s ease'
+            }
+        },
+        spacing: {
+            container: '1rem',
+            item: '0.5rem',
+            group: '1rem',
+            divider: '0.25rem',
+            icon: '0.5rem',
+            text: '0.25rem',
+            padding: {
+                horizontal: '1rem',
+                vertical: '0.75rem',
+                top: '0.75rem',
+                right: '1rem',
+                bottom: '0.75rem',
+                left: '1rem'
+            },
+            margin: {
+                horizontal: '0.5rem',
+                vertical: '0.25rem',
+                top: '0.25rem',
+                right: '0.5rem',
+                bottom: '0.25rem',
+                left: '0.5rem'
+            }
+        },
+        colors: {
+            background: {
+                primary: '#ffffff',
+                secondary: '#f8fafc',
+                tertiary: '#f1f5f9',
+                light: '#ffffff',
+                dark: '#0f172a',
+                contrast: '#000000'
+            },
+            text: {
+                primary: '#0f172a',
+                secondary: '#475569',
+                tertiary: '#64748b',
+                light: '#94a3b8',
+                dark: '#0f172a',
+                contrast: '#ffffff'
+            },
+            border: {
+                primary: '#e2e8f0',
+                secondary: '#cbd5e1',
+                tertiary: '#94a3b8',
+                light: '#f1f5f9',
+                dark: '#475569',
+                contrast: '#000000'
+            },
+            accent: {
+                primary: '#3b82f6',
+                secondary: '#6366f1',
+                tertiary: '#8b5cf6',
+                light: '#dbeafe',
+                dark: '#1d4ed8',
+                contrast: '#ffffff'
+            },
+            hover: {
+                primary: '#f1f5f9',
+                secondary: '#e2e8f0',
+                tertiary: '#cbd5e1',
+                light: '#ffffff',
+                dark: '#1e293b',
+                contrast: '#f8fafc'
+            },
+            active: {
+                primary: '#3b82f6',
+                secondary: '#6366f1',
+                tertiary: '#8b5cf6',
+                light: '#dbeafe',
+                dark: '#1d4ed8',
+                contrast: '#ffffff'
+            },
+            disabled: {
+                primary: '#f1f5f9',
+                secondary: '#e2e8f0',
+                tertiary: '#cbd5e1',
+                light: '#f8fafc',
+                dark: '#475569',
+                contrast: '#94a3b8'
+            },
+            focus: {
+                primary: '#3b82f6',
+                secondary: '#6366f1',
+                tertiary: '#8b5cf6',
+                light: '#dbeafe',
+                dark: '#1d4ed8',
+                contrast: '#ffffff'
+            }
+        },
+        typography: {
+            fontFamily: 'Clash Display, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
+            fontSize: {
+                xs: '0.75rem',
+                sm: '0.875rem',
+                base: '1rem',
+                lg: '1.125rem',
+                xl: '1.25rem',
+                '2xl': '1.5rem'
+            },
+            fontWeight: {
+                light: '300',
+                normal: '400',
+                medium: '500',
+                semibold: '600',
+                bold: '700'
+            },
+            lineHeight: {
+                tight: '1.25',
+                normal: '1.5',
+                relaxed: '1.75',
+                loose: '2'
+            },
+            letterSpacing: {
+                tight: '-0.025em',
+                normal: '0',
+                wide: '0.025em',
+                wider: '0.05em'
+            }
+        },
+        breakpoints: {
+            mobile: '640px',
+            tablet: '768px',
+            desktop: '1024px',
+            wide: '1280px',
+            ultra: '1536px'
+        }
+    },
+    spacing: {
+        scale: {
+            xs: '0.25rem',
+            sm: '0.5rem',
+            md: '1rem',
+            lg: '1.5rem',
+            xl: '2rem',
+            '2xl': '3rem',
+            '3xl': '4rem',
+            '4xl': '6rem',
+            '5xl': '8rem',
+            '6xl': '12rem'
+        },
+        component: {
+            button: {
+                padding: '0.75rem 1.5rem',
+                margin: '0.5rem',
+                gap: '0.5rem'
+            },
+            input: {
+                padding: '0.75rem 1rem',
+                margin: '0.5rem',
+                gap: '0.5rem'
+            },
+            card: {
+                padding: '1.5rem',
+                margin: '1rem',
+                gap: '1rem'
+            }
+        },
+        layout: {
+            page: '2rem',
+            section: '3rem',
+            container: '1rem',
+            grid: '1.5rem'
+        }
+    },
+    shadows: {
+        sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+        md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+        lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+        xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+        '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+        inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+        none: '0 0 #0000'
+    },
+    transitions: {
+        duration: {
+            fast: '0.15s',
+            normal: '0.2s',
+            slow: '0.3s'
+        },
+        easing: {
+            linear: 'linear',
+            ease: 'ease',
+            easeIn: 'ease-in',
+            easeOut: 'ease-out',
+            easeInOut: 'ease-in-out'
+        },
+        properties: {
+            colors: '0.2s ease',
+            transform: '0.2s ease',
+            opacity: '0.15s ease',
+            shadow: '0.2s ease'
+        }
+    },
+    borderRadius: {
+        none: '0',
+        sm: '0.125rem',
+        md: '0.375rem',
+        lg: '0.5rem',
+        xl: '0.75rem',
+        '2xl': '1rem',
+        full: '9999px'
+    },
+    borderWidth: {
+        none: '0',
+        thin: '0.5px',
+        normal: '1px',
+        focus: '2px',
+        thick: '3px',
+        extraThick: '4px'
+    },
+    animation: {
+        duration: {
+            fast: '0.3s',
+            normal: '0.2s',
+            slow: '1.5s'
+        },
+        easing: {
+            linear: 'linear',
+            ease: 'ease',
+            easeIn: 'ease-in',
+            easeOut: 'ease-out',
+            easeInOut: 'ease-in-out'
+        },
+        transforms: {
+            hoverY: '-2px',
+            offsetY: '10px',
+            scale: '1.02'
+        }
+    },
+    accessibility: {
+        focusRing: {
+            width: '3px',
+            offset: '2px',
+            color: 'var(--cs-colors-interactive-focus)'
+        },
+        outline: {
+            offset: '2px'
+        },
+        highContrast: {
+            borderWidth: '2px',
+            outlineWidth: '4px'
+        },
+        disabled: {
+            cursor: 'not-allowed',
+            opacity: '0.7'
+        }
+    },
+    print: {
+        borderColor: '#000',
+        textColor: '#000',
+        textSecondaryColor: '#333',
+        backgroundColor: 'transparent'
+    },
+    containerQuery: {
+        small: '400px',
+        medium: '600px',
+        large: '800px'
+    },
+    container: {
+        width: {
+            small: '16rem',
+            medium: '20rem',
+            large: '24rem',
+            xl: '32rem',
+            full: '100%'
+        }
+    },
+    shimmer: {
+        alpha: '0.2',
+        color: 'rgba(255, 255, 255, 0.2)'
+    },
+    meta: {
+        name: 'Default',
+        description: 'Default base theme configuration based on Stan Design - the primary brand theme',
+        author: 'Theme System',
+        version: '1.0.0',
+        category: 'brand',
+        tags: ['default', 'fallback', 'base', 'brand', 'clash-display', 'professional'],
+        preview: '/themes/default-preview.png',
+        createdAt: '2024-12-01T00:00:00.000Z',
+        updatedAt: '2024-12-01T00:00:00.000Z'
+    }
+};