@datametria/vue-components/src/theme/tokens/index.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 Tokens Index
 * @author Vander Loto - CTO DATAMETRIA
 * @date 13/11/2025
 */

import type { ThemeTokens, RadiusTokens, ShadowTokens, TransitionTokens } from '../types'
import { defaultColors } from './colors'
import { defaultTypography } from './typography'
import { defaultSpacing } from './spacing'

export const defaultRadius: RadiusTokens = {
  none: '0',
  sm: '0.25rem',
  md: '0.375rem',
  lg: '0.5rem',
  xl: '0.75rem',
  full: '9999px'
}

export const defaultShadows: ShadowTokens = {
  none: 'none',
  sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
  md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
  lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
  xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
  '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)'
}

export const defaultTransitions: TransitionTokens = {
  fast: '150ms cubic-bezier(0.4, 0, 0.2, 1)',
  base: '200ms cubic-bezier(0.4, 0, 0.2, 1)',
  slow: '300ms cubic-bezier(0.4, 0, 0.2, 1)'
}

export const defaultTokens: ThemeTokens = {
  colors: defaultColors,
  typography: defaultTypography,
  spacing: defaultSpacing,
  radius: defaultRadius,
  shadows: defaultShadows,
  transitions: defaultTransitions
}

export * from './colors'
export * from './typography'
export * from './spacing'