@datametria/vue-components/src/theme/types.ts

DATAMETRIA Vue.js 3 Component Library with Multi-Brand Theming - 51 components + 10 composables with theming support, WCAG 2.2 AA, dark mode, responsive system

/**
 * Theme System Types
 * @author Vander Loto - CTO DATAMETRIA
 * @date 13/11/2025
 */

export interface ColorTokens {
  primary: string
  secondary: string
  success: string
  warning: string
  error: string
  info: string
  neutral: {
    50: string
    100: string
    200: string
    300: string
    400: string
    500: string
    600: string
    700: string
    800: string
    900: string
  }
}

export interface TypographyTokens {
  fontFamily: {
    sans: string
    mono: string
  }
  fontSize: {
    xs: string
    sm: string
    base: string
    lg: string
    xl: string
    '2xl': string
    '3xl': string
    '4xl': string
  }
  fontWeight: {
    normal: number
    medium: number
    semibold: number
    bold: number
  }
  lineHeight: {
    tight: number
    normal: number
    relaxed: number
  }
}

export interface SpacingTokens {
  0: string
  1: string
  2: string
  3: string
  4: string
  6: string
  8: string
  12: string
  16: string
  20: string
  24: string
}

export interface RadiusTokens {
  none: string
  sm: string
  md: string
  lg: string
  xl: string
  full: string
}

export interface ShadowTokens {
  none: string
  sm: string
  md: string
  lg: string
  xl: string
  '2xl': string
}

export interface TransitionTokens {
  fast: string
  base: string
  slow: string
}

export interface ThemeTokens {
  colors: ColorTokens
  typography: TypographyTokens
  spacing: SpacingTokens
  radius: RadiusTokens
  shadows: ShadowTokens
  transitions: TransitionTokens
}

export interface Theme {
  name: string
  tokens: ThemeTokens
}

export interface ThemeConfig {
  theme: Theme
  prefix?: string
}