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

package/src/themes/themes/default.ts

@@ -0,0 +1,586 @@
+import { MultiThemeConfig } from '../types';
+
+/**
+ * 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: MultiThemeConfig = {
+  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'
+  }
+};