react-chrono

/** * @deprecated This file is deprecated. Use `tokens` from '@/styles/tokens/index.css' instead. * * This design system token contract is maintained for backward compatibility only. * It has been superseded by the unified token system in `tokens/index.css`. * * Migration guide: * - Old: `import { designTokens } from '@/styles/design-system.css'` * - New: `import { tokens } from '@/styles/tokens/index.css'` * * Token mapping: * - `designTokens.color` → `tokens.semantic.color` * - `designTokens.spacing` → `tokens.semantic.spacing` * - `designTokens.typography` → `tokens.semantic.typography` * - `designTokens.radius` → `tokens.semantic.borderRadius` * - `designTokens.elevation` → `tokens.semantic.shadow` * - `designTokens.animation` → `tokens.semantic.motion` * - `designTokens.zIndex` → `tokens.semantic.zIndex` */ export declare const designTokens: { primitive: { color: { white: `var(--${string})`; black: `var(--${string})`; gray: { 50: `var(--${string})`; 100: `var(--${string})`; 200: `var(--${string})`; 300: `var(--${string})`; 400: `var(--${string})`; 500: `var(--${string})`; 600: `var(--${string})`; 700: `var(--${string})`; 800: `var(--${string})`; 900: `var(--${string})`; }; blue: { 50: `var(--${string})`; 100: `var(--${string})`; 200: `var(--${string})`; 300: `var(--${string})`; 400: `var(--${string})`; 500: `var(--${string})`; 600: `var(--${string})`; 700: `var(--${string})`; 800: `var(--${string})`; 900: `var(--${string})`; }; green: { 400: `var(--${string})`; 500: `var(--${string})`; 600: `var(--${string})`; }; red: { 400: `var(--${string})`; 500: `var(--${string})`; 600: `var(--${string})`; }; yellow: { 400: `var(--${string})`; 500: `var(--${string})`; 600: `var(--${string})`; }; }; spacing: { 0: `var(--${string})`; 1: `var(--${string})`; 2: `var(--${string})`; 3: `var(--${string})`; 4: `var(--${string})`; 5: `var(--${string})`; 6: `var(--${string})`; 8: `var(--${string})`; 10: `var(--${string})`; 12: `var(--${string})`; 16: `var(--${string})`; 20: `var(--${string})`; 24: `var(--${string})`; }; fontSize: { xs: `var(--${string})`; sm: `var(--${string})`; base: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; '2xl': `var(--${string})`; '3xl': `var(--${string})`; '4xl': `var(--${string})`; }; lineHeight: { tight: `var(--${string})`; normal: `var(--${string})`; relaxed: `var(--${string})`; }; fontWeight: { normal: `var(--${string})`; medium: `var(--${string})`; semibold: `var(--${string})`; bold: `var(--${string})`; }; borderRadius: { none: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; '2xl': `var(--${string})`; full: `var(--${string})`; }; shadow: { xs: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; }; zIndex: { base: `var(--${string})`; elevated: `var(--${string})`; sticky: `var(--${string})`; overlay: `var(--${string})`; modal: `var(--${string})`; tooltip: `var(--${string})`; }; transition: { duration: { instant: `var(--${string})`; fast: `var(--${string})`; normal: `var(--${string})`; slow: `var(--${string})`; }; easing: { linear: `var(--${string})`; ease: `var(--${string})`; easeIn: `var(--${string})`; easeOut: `var(--${string})`; easeInOut: `var(--${string})`; spring: `var(--${string})`; }; }; }; semantic: { timeline: { point: { background: { active: `var(--${string})`; inactive: `var(--${string})`; hover: `var(--${string})`; }; }; }; color: { text: { primary: `var(--${string})`; secondary: `var(--${string})`; muted: `var(--${string})`; inverse: `var(--${string})`; }; background: { primary: `var(--${string})`; secondary: `var(--${string})`; elevated: `var(--${string})`; overlay: `var(--${string})`; }; interactive: { primary: `var(--${string})`; primaryHover: `var(--${string})`; primaryActive: `var(--${string})`; secondary: `var(--${string})`; secondaryHover: `var(--${string})`; muted: `var(--${string})`; mutedHover: `var(--${string})`; toolbarBg: `var(--${string})`; toolbarText: `var(--${string})`; buttonBg: `var(--${string})`; buttonBorder: `var(--${string})`; focusRing: `var(--${string})`; }; border: { default: `var(--${string})`; muted: `var(--${string})`; emphasis: `var(--${string})`; interactive: `var(--${string})`; }; status: { success: `var(--${string})`; warning: `var(--${string})`; error: `var(--${string})`; info: `var(--${string})`; }; icon: { default: `var(--${string})`; muted: `var(--${string})`; emphasis: `var(--${string})`; }; card: { bg: `var(--${string})`; border: `var(--${string})`; title: `var(--${string})`; subtitle: `var(--${string})`; details: `var(--${string})`; }; primary: `var(--${string})`; muted: `var(--${string})`; nestedCardBg: `var(--${string})`; nestedCardTitle: `var(--${string})`; nestedCardSubtitle: `var(--${string})`; nestedCardDetails: `var(--${string})`; buttonBorder: `var(--${string})`; }; spacing: { xs: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; '2xl': `var(--${string})`; '3xl': `var(--${string})`; }; typography: { fontSize: { caption: `var(--${string})`; body: `var(--${string})`; base: `var(--${string})`; heading3: `var(--${string})`; heading2: `var(--${string})`; heading1: `var(--${string})`; cardTitle: `var(--${string})`; cardText: `var(--${string})`; title: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; xs: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; }; lineHeight: { tight: `var(--${string})`; normal: `var(--${string})`; relaxed: `var(--${string})`; }; fontWeight: { normal: `var(--${string})`; medium: `var(--${string})`; semibold: `var(--${string})`; bold: `var(--${string})`; }; }; borderRadius: { sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; full: `var(--${string})`; }; shadow: { card: `var(--${string})`; cardHover: `var(--${string})`; cardActive: `var(--${string})`; toolbar: `var(--${string})`; modal: `var(--${string})`; none: `var(--${string})`; }; zIndex: { timelineCard: `var(--${string})`; controls: `var(--${string})`; popover: `var(--${string})`; outline: `var(--${string})`; }; motion: { duration: { fast: `var(--${string})`; normal: `var(--${string})`; slow: `var(--${string})`; }; easing: { standard: `var(--${string})`; emphasized: `var(--${string})`; easeIn: `var(--${string})`; easeOut: `var(--${string})`; easeInOut: `var(--${string})`; }; }; card: { background: { default: `var(--${string})`; hover: `var(--${string})`; active: `var(--${string})`; gradient: `var(--${string})`; }; border: { color: `var(--${string})`; gradient: `var(--${string})`; radius: { sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; }; }; shadow: { default: `var(--${string})`; hover: `var(--${string})`; active: `var(--${string})`; flat: `var(--${string})`; low: `var(--${string})`; medium: `var(--${string})`; high: `var(--${string})`; interactive: `var(--${string})`; }; content: { spacing: { tight: `var(--${string})`; normal: `var(--${string})`; loose: `var(--${string})`; }; }; }; toolbar: { background: { default: `var(--${string})`; hover: `var(--${string})`; }; text: { default: `var(--${string})`; muted: `var(--${string})`; }; button: { background: { default: `var(--${string})`; hover: `var(--${string})`; active: `var(--${string})`; }; border: { default: `var(--${string})`; hover: `var(--${string})`; }; text: { default: `var(--${string})`; disabled: `var(--${string})`; }; size: { sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; }; }; }; states: { focus: { outline: `var(--${string})`; ring: { color: `var(--${string})`; width: `var(--${string})`; offset: `var(--${string})`; outline: `var(--${string})`; }; }; disabled: { opacity: `var(--${string})`; filter: `var(--${string})`; }; hover: { opacity: `var(--${string})`; transform: `var(--${string})`; background: `var(--${string})`; border: `var(--${string})`; }; active: { opacity: `var(--${string})`; transform: `var(--${string})`; background: `var(--${string})`; border: `var(--${string})`; }; }; layout: { container: { maxWidth: { sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; }; }; }; }; component: { timeline: { line: { width: `var(--${string})`; color: `var(--${string})`; }; point: { size: { sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; }; color: { active: `var(--${string})`; inactive: `var(--${string})`; hover: `var(--${string})`; }; background: { active: `var(--${string})`; inactive: `var(--${string})`; hover: `var(--${string})`; }; }; card: { width: { vertical: `var(--${string})`; horizontal: `var(--${string})`; min: `var(--${string})`; max: `var(--${string})`; }; spacing: { vertical: `var(--${string})`; horizontal: `var(--${string})`; }; }; }; toolbar: { height: `var(--${string})`; padding: `var(--${string})`; background: `var(--${string})`; button: { size: `var(--${string})`; spacing: `var(--${string})`; }; }; }; }; export declare const vars: { timeline: { point: { background: { active: `var(--${string})`; inactive: `var(--${string})`; hover: `var(--${string})`; }; }; }; color: { text: { primary: `var(--${string})`; secondary: `var(--${string})`; muted: `var(--${string})`; inverse: `var(--${string})`; }; background: { primary: `var(--${string})`; secondary: `var(--${string})`; elevated: `var(--${string})`; overlay: `var(--${string})`; }; interactive: { primary: `var(--${string})`; primaryHover: `var(--${string})`; primaryActive: `var(--${string})`; secondary: `var(--${string})`; secondaryHover: `var(--${string})`; muted: `var(--${string})`; mutedHover: `var(--${string})`; toolbarBg: `var(--${string})`; toolbarText: `var(--${string})`; buttonBg: `var(--${string})`; buttonBorder: `var(--${string})`; focusRing: `var(--${string})`; }; border: { default: `var(--${string})`; muted: `var(--${string})`; emphasis: `var(--${string})`; interactive: `var(--${string})`; }; status: { success: `var(--${string})`; warning: `var(--${string})`; error: `var(--${string})`; info: `var(--${string})`; }; icon: { default: `var(--${string})`; muted: `var(--${string})`; emphasis: `var(--${string})`; }; card: { bg: `var(--${string})`; border: `var(--${string})`; title: `var(--${string})`; subtitle: `var(--${string})`; details: `var(--${string})`; }; primary: `var(--${string})`; muted: `var(--${string})`; nestedCardBg: `var(--${string})`; nestedCardTitle: `var(--${string})`; nestedCardSubtitle: `var(--${string})`; nestedCardDetails: `var(--${string})`; buttonBorder: `var(--${string})`; }; spacing: { xs: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; '2xl': `var(--${string})`; '3xl': `var(--${string})`; }; typography: { fontSize: { caption: `var(--${string})`; body: `var(--${string})`; base: `var(--${string})`; heading3: `var(--${string})`; heading2: `var(--${string})`; heading1: `var(--${string})`; cardTitle: `var(--${string})`; cardText: `var(--${string})`; title: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; xs: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; }; lineHeight: { tight: `var(--${string})`; normal: `var(--${string})`; relaxed: `var(--${string})`; }; fontWeight: { normal: `var(--${string})`; medium: `var(--${string})`; semibold: `var(--${string})`; bold: `var(--${string})`; }; }; borderRadius: { sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; full: `var(--${string})`; }; shadow: { card: `var(--${string})`; cardHover: `var(--${string})`; cardActive: `var(--${string})`; toolbar: `var(--${string})`; modal: `var(--${string})`; none: `var(--${string})`; }; zIndex: { timelineCard: `var(--${string})`; controls: `var(--${string})`; popover: `var(--${string})`; outline: `var(--${string})`; }; motion: { duration: { fast: `var(--${string})`; normal: `var(--${string})`; slow: `var(--${string})`; }; easing: { standard: `var(--${string})`; emphasized: `var(--${string})`; easeIn: `var(--${string})`; easeOut: `var(--${string})`; easeInOut: `var(--${string})`; }; }; card: { background: { default: `var(--${string})`; hover: `var(--${string})`; active: `var(--${string})`; gradient: `var(--${string})`; }; border: { color: `var(--${string})`; gradient: `var(--${string})`; radius: { sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; }; }; shadow: { default: `var(--${string})`; hover: `var(--${string})`; active: `var(--${string})`; flat: `var(--${string})`; low: `var(--${string})`; medium: `var(--${string})`; high: `var(--${string})`; interactive: `var(--${string})`; }; content: { spacing: { tight: `var(--${string})`; normal: `var(--${string})`; loose: `var(--${string})`; }; }; }; toolbar: { background: { default: `var(--${string})`; hover: `var(--${string})`; }; text: { default: `var(--${string})`; muted: `var(--${string})`; }; button: { background: { default: `var(--${string})`; hover: `var(--${string})`; active: `var(--${string})`; }; border: { default: `var(--${string})`; hover: `var(--${string})`; }; text: { default: `var(--${string})`; disabled: `var(--${string})`; }; size: { sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; }; }; }; states: { focus: { outline: `var(--${string})`; ring: { color: `var(--${string})`; width: `var(--${string})`; offset: `var(--${string})`; outline: `var(--${string})`; }; }; disabled: { opacity: `var(--${string})`; filter: `var(--${string})`; }; hover: { opacity: `var(--${string})`; transform: `var(--${string})`; background: `var(--${string})`; border: `var(--${string})`; }; active: { opacity: `var(--${string})`; transform: `var(--${string})`; background: `var(--${string})`; border: `var(--${string})`; }; }; layout: { container: { maxWidth: { sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; }; }; }; }; //# sourceMappingURL=design-system.css.d.ts.map