/** * Design System Tokens * ====================== * Central source of truth for all design system values. * These tokens are exported as both TypeScript constants and CSS custom properties. * * Structure: * - colors: Brand, semantic, and functional colors * - spacing: Spacing scale based on 8px unit system * - typography: Font families, sizes, weights, line heights * - shadows: Shadow definitions for depth * - borders: Border radius and widths * - breakpoints: Responsive breakpoints */ export declare const tokens: { /** * COLOR TOKENS * Primary brand colors, semantic colors for states, and functional colors */ readonly colors: { readonly primary: "var(--vi-color-primary)"; readonly secondary: "var(--vi-color-secondary)"; readonly success: "var(--vi-color-success)"; readonly warning: "var(--vi-color-warning)"; readonly error: "var(--vi-color-error)"; readonly info: "var(--vi-color-info)"; readonly neutral: { readonly 100: "var(--vi-color-grey-100)"; readonly 200: "var(--vi-color-grey-200)"; readonly 300: "var(--vi-color-grey-300)"; readonly 400: "var(--vi-color-grey-400)"; readonly 500: "var(--vi-color-grey-500)"; readonly 600: "var(--vi-color-grey-600)"; readonly 700: "var(--vi-color-grey-700)"; readonly 800: "var(--vi-color-grey-800)"; readonly 900: "var(--vi-color-grey-900)"; }; readonly palettes: { readonly grey: { readonly 100: "var(--vi-color-grey-100)"; readonly 200: "var(--vi-color-grey-200)"; readonly 300: "var(--vi-color-grey-300)"; readonly 400: "var(--vi-color-grey-400)"; readonly 500: "var(--vi-color-grey-500)"; readonly 600: "var(--vi-color-grey-600)"; readonly 700: "var(--vi-color-grey-700)"; readonly 800: "var(--vi-color-grey-800)"; readonly 900: "var(--vi-color-grey-900)"; }; readonly red: { readonly 100: "var(--vi-color-red-100)"; readonly 200: "var(--vi-color-red-200)"; readonly 300: "var(--vi-color-red-300)"; readonly 400: "var(--vi-color-red-400)"; readonly 500: "var(--vi-color-red-500)"; readonly 600: "var(--vi-color-red-600)"; readonly 700: "var(--vi-color-red-700)"; readonly 800: "var(--vi-color-red-800)"; readonly 900: "var(--vi-color-red-900)"; }; readonly yellow: { readonly 100: "var(--vi-color-yellow-100)"; readonly 200: "var(--vi-color-yellow-200)"; readonly 300: "var(--vi-color-yellow-300)"; readonly 400: "var(--vi-color-yellow-400)"; readonly 500: "var(--vi-color-yellow-500)"; readonly 600: "var(--vi-color-yellow-600)"; readonly 700: "var(--vi-color-yellow-700)"; readonly 800: "var(--vi-color-yellow-800)"; readonly 900: "var(--vi-color-yellow-900)"; }; readonly green: { readonly 100: "var(--vi-color-green-100)"; readonly 200: "var(--vi-color-green-200)"; readonly 300: "var(--vi-color-green-300)"; readonly 400: "var(--vi-color-green-400)"; readonly 500: "var(--vi-color-green-500)"; readonly 600: "var(--vi-color-green-600)"; readonly 700: "var(--vi-color-green-700)"; readonly 800: "var(--vi-color-green-800)"; readonly 900: "var(--vi-color-green-900)"; }; readonly blue: { readonly 100: "var(--vi-color-blue-100)"; readonly 200: "var(--vi-color-blue-200)"; readonly 300: "var(--vi-color-blue-300)"; readonly 400: "var(--vi-color-blue-400)"; readonly 500: "var(--vi-color-blue-500)"; readonly 600: "var(--vi-color-blue-600)"; readonly 700: "var(--vi-color-blue-700)"; readonly 800: "var(--vi-color-blue-800)"; readonly 900: "var(--vi-color-blue-900)"; }; readonly purple: { readonly 100: "var(--vi-color-purple-100)"; readonly 200: "var(--vi-color-purple-200)"; readonly 300: "var(--vi-color-purple-300)"; readonly 400: "var(--vi-color-purple-400)"; readonly 500: "var(--vi-color-purple-500)"; readonly 600: "var(--vi-color-purple-600)"; readonly 700: "var(--vi-color-purple-700)"; readonly 800: "var(--vi-color-purple-800)"; readonly 900: "var(--vi-color-purple-900)"; }; }; readonly background: "var(--vi-color-background)"; readonly foreground: "var(--vi-color-foreground)"; readonly border: "var(--vi-color-border)"; }; /** * SPACING TOKENS * 8px base unit system: xs (8px), sm (16px), md (24px), lg (32px), xl (40px), etc. */ readonly spacing: { readonly xs: "var(--vi-spacing-xs)"; readonly sm: "var(--vi-spacing-sm)"; readonly md: "var(--vi-spacing-md)"; readonly lg: "var(--vi-spacing-lg)"; readonly xl: "var(--vi-spacing-xl)"; readonly '2xl': "var(--vi-spacing-2xl)"; readonly '3xl': "var(--vi-spacing-3xl)"; }; /** * TYPOGRAPHY TOKENS * Font families, sizes, weights, and line heights */ readonly typography: { readonly fontFamily: { readonly base: "var(--vi-font-family-base)"; readonly mono: "var(--vi-font-family-mono)"; }; readonly fontSize: { readonly xs: "var(--vi-font-size-xs)"; readonly sm: "var(--vi-font-size-sm)"; readonly base: "var(--vi-font-size-base)"; readonly lg: "var(--vi-font-size-lg)"; readonly xl: "var(--vi-font-size-xl)"; readonly '2xl': "var(--vi-font-size-2xl)"; readonly '3xl': "var(--vi-font-size-3xl)"; }; readonly fontWeight: { readonly light: 300; readonly normal: 400; readonly medium: 500; readonly semibold: 600; readonly bold: 700; }; readonly lineHeight: { readonly tight: 1.2; readonly normal: 1.5; readonly relaxed: 1.75; }; }; /** * SHADOW TOKENS * Depth levels for elevation */ readonly shadows: { readonly sm: "var(--vi-shadow-sm)"; readonly md: "var(--vi-shadow-md)"; readonly lg: "var(--vi-shadow-lg)"; readonly xl: "var(--vi-shadow-xl)"; }; /** * BORDER TOKENS * Border radius and widths */ readonly borders: { readonly radius: { readonly sm: "var(--vi-border-radius-sm)"; readonly md: "var(--vi-border-radius-md)"; readonly lg: "var(--vi-border-radius-lg)"; readonly xl: "var(--vi-border-radius-xl)"; }; readonly width: { readonly thin: "var(--vi-border-width-thin)"; readonly base: "var(--vi-border-width-base)"; readonly thick: "var(--vi-border-width-thick)"; }; }; /** * BREAKPOINT TOKENS * Responsive design breakpoints (raw pixel values, not CSS vars) * Use in a JS template literal: `@media (min-width: ${tokens.breakpoints.sm})` * Use in plain CSS: @media (min-width: 640px) */ readonly breakpoints: { readonly xs: "0"; readonly sm: "640px"; readonly md: "768px"; readonly lg: "1024px"; readonly xl: "1280px"; readonly '2xl': "1536px"; }; /** * Z-INDEX TOKENS * Stacking context levels (raw integers, not CSS vars) * Use in CSS: z-index: tokens.zIndex.modal (e.g. 1050) */ readonly zIndex: { readonly hide: -1; readonly auto: "auto"; readonly base: 0; readonly dropdown: 1000; readonly sticky: 1020; readonly fixed: 1030; readonly backdrop: 1040; readonly modal: 1050; readonly popover: 1060; readonly tooltip: 1070; }; }; /** * Type-safe token value extractor * Preserves exact string/number types from tokens object */ export type TokenValue = typeof tokens; //# sourceMappingURL=index.d.ts.map