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

package/dist/themes/themes/harvey.js

@@ -0,0 +1,551 @@
+/**
+ * Harvey Creative Theme
+ * Modern, vibrant design with Poppins font and warm color palette
+ */
+export const harveyTheme = {
+    fonts: {
+        primary: {
+            family: 'Poppins',
+            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, 800],
+            display: 'swap',
+            source: {
+                type: 'google'
+            },
+            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.2',
+                normal: '1.5',
+                relaxed: '1.7',
+                loose: '2'
+            },
+            letterSpacing: {
+                tight: '-0.02em',
+                normal: '0em',
+                wide: '0.02em',
+                wider: '0.04em',
+                widest: '0.08em'
+            }
+        },
+        secondary: {
+            family: 'Poppins',
+            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: 'google'
+            },
+            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.2',
+                normal: '1.5',
+                relaxed: '1.7',
+                loose: '2'
+            },
+            letterSpacing: {
+                tight: '-0.02em',
+                normal: '0em',
+                wide: '0.02em',
+                wider: '0.04em',
+                widest: '0.08em'
+            }
+        },
+        display: {
+            family: 'Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
+            weights: [600, 700, 800, 900],
+            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.05',
+                normal: '1.15',
+                relaxed: '1.25',
+                loose: '1.35'
+            },
+            letterSpacing: {
+                tight: '-0.03em',
+                normal: '-0.02em',
+                wide: '-0.01em',
+                wider: '0em',
+                widest: '0.01em'
+            }
+        },
+        body: {
+            family: 'Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
+            weights: [300, 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.3',
+                normal: '1.6',
+                relaxed: '1.8',
+                loose: '2.1'
+            },
+            letterSpacing: {
+                tight: '-0.01em',
+                normal: '0em',
+                wide: '0.01em',
+                wider: '0.02em',
+                widest: '0.04em'
+            }
+        },
+        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: '#fff7ed',
+            100: '#ffedd5',
+            200: '#fed7aa',
+            300: '#fdba74',
+            400: '#fb923c',
+            500: '#f97316',
+            600: '#ea580c',
+            700: '#c2410c',
+            800: '#9a3412',
+            900: '#7c2d12'
+        },
+        secondary: {
+            50: '#fefce8',
+            100: '#fef9c3',
+            200: '#fef08a',
+            300: '#fde047',
+            400: '#facc15',
+            500: '#eab308',
+            600: '#ca8a04',
+            700: '#a16207',
+            800: '#854d0e',
+            900: '#713f12'
+        },
+        semantic: {
+            success: '#16a34a',
+            warning: '#f59e0b',
+            error: '#dc2626',
+            info: '#2563eb'
+        },
+        neutral: {
+            50: '#fafaf9',
+            100: '#f5f5f4',
+            200: '#e7e5e4',
+            300: '#d6d3d1',
+            400: '#a8a29e',
+            500: '#78716c',
+            600: '#57534e',
+            700: '#44403c',
+            800: '#292524',
+            900: '#1c1917'
+        },
+        surface: {
+            background: '#fefefe',
+            surface: '#fafaf9',
+            border: '#e7e5e4',
+            divider: '#d6d3d1'
+        },
+        text: {
+            primary: '#1c1917',
+            secondary: '#44403c',
+            muted: '#78716c',
+            inverse: '#fafaf9',
+            onPrimary: '#fefefe',
+            onSecondary: '#fefefe',
+            onSurface: '#1c1917'
+        },
+        interactive: {
+            hover: '#fff7ed',
+            active: '#fed7aa',
+            focus: '#f97316',
+            disabled: '#d6d3d1'
+        }
+    },
+    navigation: {
+        layout: 'horizontal',
+        style: 'creative',
+        behavior: 'floating',
+        responsive: 'adaptive',
+        animations: {
+            duration: {
+                fast: '0.12s',
+                normal: '0.25s',
+                slow: '0.4s',
+                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.03s',
+                direction: 'forward'
+            },
+            transitions: {
+                enter: '0.25s ease-in-out',
+                exit: '0.12s ease-in',
+                move: '0.25s ease',
+                resize: '0.15s ease'
+            }
+        },
+        spacing: {
+            container: '1.25rem',
+            item: '0.75rem',
+            group: '1.25rem',
+            divider: '0.5rem',
+            icon: '0.75rem',
+            text: '0.5rem',
+            padding: {
+                horizontal: '1.25rem',
+                vertical: '1rem',
+                top: '1rem',
+                right: '1.25rem',
+                bottom: '1rem',
+                left: '1.25rem'
+            },
+            margin: {
+                horizontal: '0.75rem',
+                vertical: '0.5rem',
+                top: '0.5rem',
+                right: '0.75rem',
+                bottom: '0.5rem',
+                left: '0.75rem'
+            }
+        },
+        colors: {
+            background: {
+                primary: '#ffffff',
+                secondary: '#fefefe',
+                tertiary: '#fafaf9',
+                light: '#ffffff',
+                dark: '#1c1917',
+                contrast: '#000000'
+            },
+            text: {
+                primary: '#1c1917',
+                secondary: '#57534e',
+                tertiary: '#78716c',
+                light: '#a8a29e',
+                dark: '#1c1917',
+                contrast: '#ffffff'
+            },
+            border: {
+                primary: '#e7e5e4',
+                secondary: '#d6d3d1',
+                tertiary: '#a8a29e',
+                light: '#f5f5f4',
+                dark: '#57534e',
+                contrast: '#000000'
+            },
+            accent: {
+                primary: '#f97316',
+                secondary: '#ea580c',
+                tertiary: '#c2410c',
+                light: '#fed7aa',
+                dark: '#ea580c',
+                contrast: '#ffffff'
+            },
+            hover: {
+                primary: '#fefefe',
+                secondary: '#fafaf9',
+                tertiary: '#f5f5f4',
+                light: '#ffffff',
+                dark: '#292524',
+                contrast: '#fefefe'
+            },
+            active: {
+                primary: '#f97316',
+                secondary: '#ea580c',
+                tertiary: '#c2410c',
+                light: '#fed7aa',
+                dark: '#ea580c',
+                contrast: '#ffffff'
+            },
+            disabled: {
+                primary: '#f5f5f4',
+                secondary: '#e7e5e4',
+                tertiary: '#d6d3d1',
+                light: '#fafaf9',
+                dark: '#78716c',
+                contrast: '#a8a29e'
+            },
+            focus: {
+                primary: '#f97316',
+                secondary: '#ea580c',
+                tertiary: '#c2410c',
+                light: '#fed7aa',
+                dark: '#ea580c',
+                contrast: '#ffffff'
+            }
+        },
+        typography: {
+            fontFamily: 'Poppins, 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.875rem 1.75rem',
+                margin: '0.5rem',
+                gap: '0.75rem'
+            },
+            input: {
+                padding: '0.875rem 1rem',
+                margin: '0.5rem',
+                gap: '0.5rem'
+            },
+            card: {
+                padding: '1.75rem',
+                margin: '1rem',
+                gap: '1.25rem'
+            }
+        },
+        layout: {
+            page: '2.5rem',
+            section: '3.5rem',
+            container: '1.25rem',
+            grid: '1.75rem'
+        }
+    },
+    shadows: {
+        sm: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+        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(249 115 22 / 0.25)',
+        inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.06)',
+        none: '0 0 #0000'
+    },
+    transitions: {
+        duration: {
+            fast: '0.12s',
+            normal: '0.25s',
+            slow: '0.4s'
+        },
+        easing: {
+            linear: 'linear',
+            ease: 'ease',
+            easeIn: 'ease-in',
+            easeOut: 'ease-out',
+            easeInOut: 'ease-in-out'
+        },
+        properties: {
+            colors: '0.25s ease-in-out',
+            transform: '0.25s ease-in-out',
+            opacity: '0.12s ease',
+            shadow: '0.25s 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: 'Harvey Creative',
+        description: 'Modern, vibrant design system with Poppins typography and warm orange color palette for creative projects',
+        author: 'Harvey Design Team',
+        version: '1.0.0',
+        category: 'creative',
+        tags: ['modern', 'vibrant', 'creative', 'poppins', 'orange', 'warm'],
+        preview: '/themes/harvey-creative-preview.png',
+        createdAt: '2024-12-01T00:00:00.000Z',
+        updatedAt: '2024-12-01T00:00:00.000Z'
+    },
+    // NEW: Add dark mode overrides
+    modes: {
+        dark: {
+        // Dark mode will be automatically generated by the CSS generator
+        // using the adaptThemeForDarkMode function
+        }
+    }
+};