platform-codebase/@packages/@plugins/src/styled.d.ts

/**
 * Styled Components Type Augmentation for Payments Plugin
 *
 * Extends styled-components DefaultTheme with theme properties.
 * Inlined to avoid package resolution issues between codebase and releases.
 */

import 'styled-components';

interface ThemeInterface {
  colors: {
    primary: string;
    secondary: string;
    accent: string;
    background: {
      primary: string;
      secondary: string;
      tertiary: string;
    };
    surface: string;
    text: {
      primary: string;
      secondary: string;
      tertiary: string;
      muted: string;
      inverse?: string;
      disabled?: string;
    };
    border: string;
    success: string;
    warning: string;
    error: string;
    info: string;
    hover: {
      primary: string;
      secondary: string;
      surface: string;
    };
    active: {
      primary: string;
      secondary: string;
    };
    disabled: {
      background: string;
      text: string;
    };
  };
  spacing: {
    xxxs?: string;
    xxs?: string;
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    xxl: string;
    xxxl?: string;
    xxxxl?: string;
    xxxxxl?: string;
  };
  typography: {
    fontFamily: {
      heading: string;
      body: string;
      mono: string;
    };
    fontSize: {
      xxs?: string;
      xs: string;
      sm: string;
      md: string;
      base: string;
      lg: string;
      xl: string;
      xxl: string;
      '2xl': string;
      '3xl': string;
      '4xl': string;
      '5xl': string;
    };
    fontWeight: {
      light: number;
      normal: number;
      medium: number;
      semibold: number;
      bold: number;
    };
    lineHeight: {
      tight: number;
      normal: number;
      relaxed: number;
      loose: number;
    };
  };
  letterSpacing?: {
    tight?: string;
    normal?: string;
    wide?: string;
  };
  borderWidth?: {
    thin?: string;
    medium?: string;
    thick?: string;
  };
  shadows: {
    none: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
  };
  borderRadius: {
    none: string;
    xs?: string;
    sm: string;
    md: string;
    lg: string;
    xl?: string;
    full: string;
  };
  transitions: {
    fast: string;
    normal: string;
    slow: string;
  };
  zIndex: {
    base: number;
    dropdown: number;
    sticky: number;
    fixed: number;
    modal: number;
    popover: number;
    tooltip: number;
    toast: number;
  };
  breakpoints: {
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    '2xl': string;
  };
  extensions?: {
    cyberpunk?: {
      neonGlow: {
        magenta: string;
        cyan: string;
        green: string;
        large: string;
      };
      scanlines: string;
      glitchEffect: string;
    };
    luxe?: {
      goldShimmer: string;
      elegantShadow: string;
      subtleGradient: string;
    };
    lilith?: {
      crimsonGradient: string;
      purpleGradient: string;
      goldShimmer: string;
      crimsonGlow: string;
      purpleGlow: string;
      goldGlow: string;
      warmBackground: string;
      darkVariant: {
        background: string;
        surface: string;
        text: string;
      };
    };
  };
}

declare module 'styled-components' {
  export interface DefaultTheme extends ThemeInterface {}
}