@casoon/dragonfly
Version:
Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.
2,341 lines (1,977 loc) • 167 kB
CSS
@layer tokens, themes.aliases, themes.mode, themes.transitions;
/* Datei: themes/theme-transitions.css */
/**
* Theme Transition Utilities
*
* Theme-specific transition adjustments and utility classes.
* The @property definitions are in tokens/transitions.css.
*
* @layer themes.transitions
*/
@layer themes.transitions {
/* Theme Transition Values - Light Mode */
:root {
--transition-bg: var(--color-background);
--transition-fg: var(--color-text);
--transition-border: var(--color-border);
--transition-surface: var(--color-surface);
--transition-accent: var(--color-primary);
--transition-shadow-opacity: 0.1;
}
/* Theme Transition Values - Dark Mode */
[data-theme="dark"] {
--transition-bg: var(--color-background);
--transition-fg: var(--color-text);
--transition-border: var(--color-border);
--transition-surface: var(--color-surface);
--transition-accent: var(--color-primary);
--transition-shadow-opacity: 0.3;
}
/* Auto Theme - System Preference */
@media (prefers-color-scheme: dark) {
[data-theme="auto"] {
--transition-shadow-opacity: 0.3;
}
}
/* Base Transition Utility Classes */
.theme-transition {
background-color: var(--transition-bg);
border-color: var(--transition-border);
color: var(--transition-fg);
transition: var(--transition-colors);
}
.theme-transition-fast {
background-color: var(--transition-bg);
border-color: var(--transition-border);
color: var(--transition-fg);
transition:
background-color var(--transition-fast) var(--transition-ease-out),
color var(--transition-fast) var(--transition-ease-out),
border-color var(--transition-fast) var(--transition-ease-out);
}
.theme-transition-slow {
background-color: var(--transition-bg);
border-color: var(--transition-border);
color: var(--transition-fg);
transition:
background-color var(--transition-slow) var(--transition-ease-in-out),
color var(--transition-slow) var(--transition-ease-in-out),
border-color var(--transition-slow) var(--transition-ease-in-out);
}
/* Component-Specific Transition Classes */
.card-transition {
background-color: var(--transition-surface);
border-color: var(--transition-border);
box-shadow:
0 1px 3px 0 rgb(0 0 0 / var(--transition-shadow-opacity)),
0 1px 2px -1px rgb(0 0 0 / var(--transition-shadow-opacity));
transition: var(--transition-colors), var(--transition-shadow);
}
.button-transition {
background-color: var(--transition-accent);
border-color: var(--transition-accent);
color: var(--transition-fg);
transition: var(--transition-colors), var(--transition-transform);
}
.input-transition {
background-color: var(--transition-surface);
border-color: var(--transition-border);
transition: var(--transition-colors), var(--transition-shadow);
}
.input-transition:focus {
border-color: var(--transition-accent);
box-shadow: 0 0 0 2px rgb(from var(--transition-accent) r g b / 2000%);
}
/* Theme Switch Animation */
.theme-switching {
animation: theme-switch var(--transition-normal) var(--transition-ease-out);
}
@keyframes theme-switch {
0 { opacity: 1; }
50 { opacity: 95%; }
100 { opacity: 1; }
}
/* Disable Transitions for Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.theme-transition,
.theme-transition-fast,
.theme-transition-slow,
.card-transition,
.button-transition,
.input-transition {
transition: none;
}
.theme-switching {
animation: none;
}
}
}
/* Datei: themes/light-mode.css */
/**
* Light Mode Theme
*
* Light mode definitions with [data-theme="light"] scope.
* Only overrides base tokens, aliases remain stable.
*
* @layer themes.mode
*/
@layer themes.mode {
[data-theme="light"] {
/* Color Scheme */
color-scheme: light;
/* Base Color Tokens - Only override what's needed for light mode */
--color-background: #fff;
--color-surface: #f9fafb;
--color-surface-elevated: #fff;
--color-text: #1f2937;
--color-text-muted: #6b7280;
--color-text-inverse: #fff;
--color-border: #e5e7eb;
--color-border-strong: #d1d5db;
/* Primary Colors - Light Mode Values */
--color-primary: #06f;
--color-primary-50: #e6f0ff;
--color-primary-100: #cce0ff;
--color-primary-500: #06f;
--color-primary-600: #0052cc;
--color-primary-900: #001433;
/* Secondary Colors - Light Mode Values */
--color-secondary: #5333ff;
--color-secondary-50: #eeeaff;
--color-secondary-500: #5333ff;
--color-secondary-900: #110a33;
/* Gray Colors - Light Mode Values */
--color-gray-50: #f9f9fa;
--color-gray-100: #f3f3f5;
--color-gray-500: #8f96a8;
--color-gray-900: #1d1f24;
/* Focus and Interactive States */
--color-focus: #4f46e5;
--color-focus-glow: rgb(79 70 229 / 3000%);
}
}
/* Datei: themes/index.css */
/**
* Themes Index
*
* Main theme system entry point. Includes only base themes and modes.
* Theme variants must be loaded separately via CSS import or loadThemeVariant().
*
* Layer Structure:
* - tokens: Base design tokens (@property definitions)
* - themes.aliases: Semantic component aliases
* - themes.mode: Light/dark mode definitions
* - themes.transitions: Theme transition utilities
*/
/* Import base design tokens */
/* Importierte Datei: tokens/index.css */
/**
* Design Token Index
*
* Zentraler Import aller Design Tokens für das Dragonfly Design System.
* Diese Datei importiert alle Token-Kategorien in der richtigen Reihenfolge.
*
* @layer tokens
* @version 2.0.0
* @author Dragonfly Design System
*/
/* Core Design Tokens */
/* Importierte Datei: tokens/colors.css */
/**
* Optimierte Color Properties mit @property
*
* Enthält nur semantische und animierbare Farb-Tokens.
* Alle Abstufungen (z. B. -100 bis -900) werden im `@layer colors` gepflegt.
*
* @layer tokens.properties
*/
@layer tokens.properties {
/* Base Colors */
@property --color-white {
inherits: true;
initial-value: #fff;
syntax: '<color>';
}
@property --color-black {
inherits: true;
initial-value: #000;
syntax: '<color>';
}
/* Accessibility-specific colors */
@property --color-gray-very-dark {
inherits: true;
initial-value: #1a1a1a;
syntax: '<color>';
}
@property --color-gray-medium {
inherits: true;
initial-value: #6b6b6b;
syntax: '<color>';
}
@property --color-gray-very-light {
inherits: true;
initial-value: #f2f2f2;
syntax: '<color>';
}
/* Opacity-based colors */
@property --color-overlay-dark {
inherits: true;
initial-value: rgb(0 0 0 / 80%);
syntax: '<color>';
}
@property --color-overlay-medium {
inherits: true;
initial-value: rgb(0 0 0 / 60%);
syntax: '<color>';
}
/* Basis-Farbtokens */
@property --color-primary {
inherits: true;
initial-value: #06f;
syntax: '<color>';
}
@property --color-secondary {
inherits: true;
initial-value: #5333ff;
syntax: '<color>';
}
@property --color-success {
inherits: true;
initial-value: #10b981;
syntax: '<color>';
}
@property --color-warning {
inherits: true;
initial-value: #f59e0b;
syntax: '<color>';
}
@property --color-error {
inherits: true;
initial-value: #ef4444;
syntax: '<color>';
}
@property --color-info {
inherits: true;
initial-value: #06f;
syntax: '<color>';
}
@property --color-neutral {
inherits: true;
initial-value: #6b7280;
syntax: '<color>';
}
/* Textfarben */
@property --color-text {
inherits: true;
initial-value: #1f2937;
syntax: '<color>';
}
@property --color-text-muted {
inherits: true;
initial-value: #6b7280;
syntax: '<color>';
}
@property --color-text-inverse {
inherits: true;
initial-value: #fff;
syntax: '<color>';
}
/* Oberflächenfarben */
@property --color-background {
inherits: true;
initial-value: #fff;
syntax: '<color>';
}
@property --color-surface {
inherits: true;
initial-value: #f9fafb;
syntax: '<color>';
}
@property --color-surface-elevated {
inherits: true;
initial-value: #fff;
syntax: '<color>';
}
/* Rahmenfarben */
@property --color-border {
inherits: true;
initial-value: #e5e7eb;
syntax: '<color>';
}
@property --color-border-strong {
inherits: true;
initial-value: #d1d5db;
syntax: '<color>';
}
/* Für animierbare Transitions */
@property --color-transition-primary {
inherits: true;
initial-value: #06f;
syntax: '<color>';
}
@property --color-transition-surface {
inherits: true;
initial-value: #fff;
syntax: '<color>';
}
@property --color-transition-text {
inherits: true;
initial-value: #1f2937;
syntax: '<color>';
}
/* Erweiterte Farbabstufungen für Komponenten */
/* Primary Color Scale */
@property --color-primary-50 {
inherits: true;
initial-value: #eff6ff;
syntax: '<color>';
}
@property --color-primary-100 {
inherits: true;
initial-value: #dbeafe;
syntax: '<color>';
}
@property --color-primary-200 {
inherits: true;
initial-value: #bfdbfe;
syntax: '<color>';
}
@property --color-primary-300 {
inherits: true;
initial-value: #93c5fd;
syntax: '<color>';
}
@property --color-primary-400 {
inherits: true;
initial-value: #60a5fa;
syntax: '<color>';
}
@property --color-primary-500 {
inherits: true;
initial-value: #3b82f6;
syntax: '<color>';
}
@property --color-primary-600 {
inherits: true;
initial-value: #2563eb;
syntax: '<color>';
}
@property --color-primary-700 {
inherits: true;
initial-value: #1d4ed8;
syntax: '<color>';
}
@property --color-primary-800 {
inherits: true;
initial-value: #1e40af;
syntax: '<color>';
}
@property --color-primary-900 {
inherits: true;
initial-value: #1e3a8a;
syntax: '<color>';
}
/* Secondary Color Scale */
@property --color-secondary-50 {
inherits: true;
initial-value: #f8fafc;
syntax: '<color>';
}
@property --color-secondary-100 {
inherits: true;
initial-value: #f1f5f9;
syntax: '<color>';
}
@property --color-secondary-200 {
inherits: true;
initial-value: #e2e8f0;
syntax: '<color>';
}
@property --color-secondary-300 {
inherits: true;
initial-value: #cbd5e1;
syntax: '<color>';
}
@property --color-secondary-400 {
inherits: true;
initial-value: #94a3b8;
syntax: '<color>';
}
@property --color-secondary-500 {
inherits: true;
initial-value: #64748b;
syntax: '<color>';
}
@property --color-secondary-600 {
inherits: true;
initial-value: #475569;
syntax: '<color>';
}
@property --color-secondary-700 {
inherits: true;
initial-value: #334155;
syntax: '<color>';
}
@property --color-secondary-800 {
inherits: true;
initial-value: #1e293b;
syntax: '<color>';
}
@property --color-secondary-900 {
inherits: true;
initial-value: #0f172a;
syntax: '<color>';
}
/* Success Color Scale */
@property --color-success-50 {
inherits: true;
initial-value: #ecfdf5;
syntax: '<color>';
}
@property --color-success-100 {
inherits: true;
initial-value: #d1fae5;
syntax: '<color>';
}
@property --color-success-200 {
inherits: true;
initial-value: #a7f3d0;
syntax: '<color>';
}
@property --color-success-300 {
inherits: true;
initial-value: #6ee7b7;
syntax: '<color>';
}
@property --color-success-400 {
inherits: true;
initial-value: #34d399;
syntax: '<color>';
}
@property --color-success-500 {
inherits: true;
initial-value: #10b981;
syntax: '<color>';
}
@property --color-success-600 {
inherits: true;
initial-value: #059669;
syntax: '<color>';
}
@property --color-success-700 {
inherits: true;
initial-value: #047857;
syntax: '<color>';
}
@property --color-success-800 {
inherits: true;
initial-value: #065f46;
syntax: '<color>';
}
@property --color-success-900 {
inherits: true;
initial-value: #064e3b;
syntax: '<color>';
}
/* Warning Color Scale */
@property --color-warning-50 {
inherits: true;
initial-value: #fffbeb;
syntax: '<color>';
}
@property --color-warning-100 {
inherits: true;
initial-value: #fef3c7;
syntax: '<color>';
}
@property --color-warning-200 {
inherits: true;
initial-value: #fde68a;
syntax: '<color>';
}
@property --color-warning-300 {
inherits: true;
initial-value: #fcd34d;
syntax: '<color>';
}
@property --color-warning-400 {
inherits: true;
initial-value: #fbbf24;
syntax: '<color>';
}
@property --color-warning-500 {
inherits: true;
initial-value: #f59e0b;
syntax: '<color>';
}
@property --color-warning-600 {
inherits: true;
initial-value: #d97706;
syntax: '<color>';
}
@property --color-warning-700 {
inherits: true;
initial-value: #b45309;
syntax: '<color>';
}
@property --color-warning-800 {
inherits: true;
initial-value: #92400e;
syntax: '<color>';
}
@property --color-warning-900 {
inherits: true;
initial-value: #78350f;
syntax: '<color>';
}
/* Error Color Scale */
@property --color-error-50 {
inherits: true;
initial-value: #fef2f2;
syntax: '<color>';
}
@property --color-error-100 {
inherits: true;
initial-value: #fee2e2;
syntax: '<color>';
}
@property --color-error-200 {
inherits: true;
initial-value: #fecaca;
syntax: '<color>';
}
@property --color-error-300 {
inherits: true;
initial-value: #fca5a5;
syntax: '<color>';
}
@property --color-error-400 {
inherits: true;
initial-value: #f87171;
syntax: '<color>';
}
@property --color-error-500 {
inherits: true;
initial-value: #ef4444;
syntax: '<color>';
}
@property --color-error-600 {
inherits: true;
initial-value: #dc2626;
syntax: '<color>';
}
@property --color-error-700 {
inherits: true;
initial-value: #b91c1c;
syntax: '<color>';
}
@property --color-error-800 {
inherits: true;
initial-value: #991b1b;
syntax: '<color>';
}
@property --color-error-900 {
inherits: true;
initial-value: #7f1d1d;
syntax: '<color>';
}
/* Info Color Scale */
@property --color-info-50 {
inherits: true;
initial-value: #f0f9ff;
syntax: '<color>';
}
@property --color-info-100 {
inherits: true;
initial-value: #e0f2fe;
syntax: '<color>';
}
@property --color-info-200 {
inherits: true;
initial-value: #bae6fd;
syntax: '<color>';
}
@property --color-info-300 {
inherits: true;
initial-value: #7dd3fc;
syntax: '<color>';
}
@property --color-info-400 {
inherits: true;
initial-value: #38bdf8;
syntax: '<color>';
}
@property --color-info-500 {
inherits: true;
initial-value: #0ea5e9;
syntax: '<color>';
}
@property --color-info-600 {
inherits: true;
initial-value: #0284c7;
syntax: '<color>';
}
@property --color-info-700 {
inherits: true;
initial-value: #0369a1;
syntax: '<color>';
}
@property --color-info-800 {
inherits: true;
initial-value: #075985;
syntax: '<color>';
}
@property --color-info-900 {
inherits: true;
initial-value: #0c4a6e;
syntax: '<color>';
}
/* Neutral Color Scale */
@property --color-neutral-50 {
inherits: true;
initial-value: #f9fafb;
syntax: '<color>';
}
@property --color-neutral-100 {
inherits: true;
initial-value: #f3f4f6;
syntax: '<color>';
}
@property --color-neutral-200 {
inherits: true;
initial-value: #e5e7eb;
syntax: '<color>';
}
@property --color-neutral-300 {
inherits: true;
initial-value: #d1d5db;
syntax: '<color>';
}
@property --color-neutral-400 {
inherits: true;
initial-value: #9ca3af;
syntax: '<color>';
}
@property --color-neutral-500 {
inherits: true;
initial-value: #6b7280;
syntax: '<color>';
}
@property --color-neutral-600 {
inherits: true;
initial-value: #4b5563;
syntax: '<color>';
}
@property --color-neutral-700 {
inherits: true;
initial-value: #374151;
syntax: '<color>';
}
@property --color-neutral-800 {
inherits: true;
initial-value: #1f2937;
syntax: '<color>';
}
@property --color-neutral-900 {
inherits: true;
initial-value: #111827;
syntax: '<color>';
}
/* Gray Color Scale (alias für neutral) */
@property --color-gray-50 {
inherits: true;
initial-value: #f9fafb;
syntax: '<color>';
}
@property --color-gray-100 {
inherits: true;
initial-value: #f3f4f6;
syntax: '<color>';
}
@property --color-gray-200 {
inherits: true;
initial-value: #e5e7eb;
syntax: '<color>';
}
@property --color-gray-300 {
inherits: true;
initial-value: #d1d5db;
syntax: '<color>';
}
@property --color-gray-400 {
inherits: true;
initial-value: #9ca3af;
syntax: '<color>';
}
@property --color-gray-500 {
inherits: true;
initial-value: #6b7280;
syntax: '<color>';
}
@property --color-gray-600 {
inherits: true;
initial-value: #4b5563;
syntax: '<color>';
}
@property --color-gray-700 {
inherits: true;
initial-value: #374151;
syntax: '<color>';
}
@property --color-gray-800 {
inherits: true;
initial-value: #1f2937;
syntax: '<color>';
}
@property --color-gray-900 {
inherits: true;
initial-value: #111827;
syntax: '<color>';
}
/* Text Color Scale */
@property --color-text-50 {
inherits: true;
initial-value: #f9fafb;
syntax: '<color>';
}
@property --color-text-100 {
inherits: true;
initial-value: #f3f4f6;
syntax: '<color>';
}
@property --color-text-200 {
inherits: true;
initial-value: #e5e7eb;
syntax: '<color>';
}
@property --color-text-300 {
inherits: true;
initial-value: #d1d5db;
syntax: '<color>';
}
@property --color-text-400 {
inherits: true;
initial-value: #9ca3af;
syntax: '<color>';
}
@property --color-text-500 {
inherits: true;
initial-value: #6b7280;
syntax: '<color>';
}
@property --color-text-600 {
inherits: true;
initial-value: #4b5563;
syntax: '<color>';
}
@property --color-text-700 {
inherits: true;
initial-value: #374151;
syntax: '<color>';
}
@property --color-text-800 {
inherits: true;
initial-value: #1f2937;
syntax: '<color>';
}
@property --color-text-900 {
inherits: true;
initial-value: #111827;
syntax: '<color>';
}
/* Surface Color Scale */
@property --color-surface-50 {
inherits: true;
initial-value: #fafafa;
syntax: '<color>';
}
@property --color-surface-100 {
inherits: true;
initial-value: #f5f5f5;
syntax: '<color>';
}
@property --color-surface-200 {
inherits: true;
initial-value: #eee;
syntax: '<color>';
}
@property --color-surface-300 {
inherits: true;
initial-value: #e0e0e0;
syntax: '<color>';
}
/* Border Color Scale */
@property --color-border-50 {
inherits: true;
initial-value: #fafafa;
syntax: '<color>';
}
@property --color-border-100 {
inherits: true;
initial-value: #f4f4f5;
syntax: '<color>';
}
@property --color-border-200 {
inherits: true;
initial-value: #e4e4e7;
syntax: '<color>';
}
@property --color-border-300 {
inherits: true;
initial-value: #d4d4d8;
syntax: '<color>';
}
}
/* Fallback Values für alle Farbabstufungen */
:root {
/* Primary Scale */
--color-primary-50: #eff6ff;
--color-primary-100: #dbeafe;
--color-primary-200: #bfdbfe;
--color-primary-300: #93c5fd;
--color-primary-400: #60a5fa;
--color-primary-500: #3b82f6;
--color-primary-600: #2563eb;
--color-primary-700: #1d4ed8;
--color-primary-800: #1e40af;
--color-primary-900: #1e3a8a;
/* Secondary Scale */
--color-secondary-50: #f8fafc;
--color-secondary-100: #f1f5f9;
--color-secondary-200: #e2e8f0;
--color-secondary-300: #cbd5e1;
--color-secondary-400: #94a3b8;
--color-secondary-500: #64748b;
--color-secondary-600: #475569;
--color-secondary-700: #334155;
--color-secondary-800: #1e293b;
--color-secondary-900: #0f172a;
/* Success Scale */
--color-success-50: #ecfdf5;
--color-success-100: #d1fae5;
--color-success-200: #a7f3d0;
--color-success-300: #6ee7b7;
--color-success-400: #34d399;
--color-success-500: #10b981;
--color-success-600: #059669;
--color-success-700: #047857;
--color-success-800: #065f46;
--color-success-900: #064e3b;
/* Warning Scale */
--color-warning-50: #fffbeb;
--color-warning-100: #fef3c7;
--color-warning-200: #fde68a;
--color-warning-300: #fcd34d;
--color-warning-400: #fbbf24;
--color-warning-500: #f59e0b;
--color-warning-600: #d97706;
--color-warning-700: #b45309;
--color-warning-800: #92400e;
--color-warning-900: #78350f;
/* Error Scale */
--color-error-50: #fef2f2;
--color-error-100: #fee2e2;
--color-error-200: #fecaca;
--color-error-300: #fca5a5;
--color-error-400: #f87171;
--color-error-500: #ef4444;
--color-error-600: #dc2626;
--color-error-700: #b91c1c;
--color-error-800: #991b1b;
--color-error-900: #7f1d1d;
/* Info Scale */
--color-info-50: #f0f9ff;
--color-info-100: #e0f2fe;
--color-info-200: #bae6fd;
--color-info-300: #7dd3fc;
--color-info-400: #38bdf8;
--color-info-500: #0ea5e9;
--color-info-600: #0284c7;
--color-info-700: #0369a1;
--color-info-800: #075985;
--color-info-900: #0c4a6e;
/* Neutral/Gray Scale */
--color-neutral-50: #f9fafb;
--color-neutral-100: #f3f4f6;
--color-neutral-200: #e5e7eb;
--color-neutral-300: #d1d5db;
--color-neutral-400: #9ca3af;
--color-neutral-500: #6b7280;
--color-neutral-600: #4b5563;
--color-neutral-700: #374151;
--color-neutral-800: #1f2937;
--color-neutral-900: #111827;
--color-gray-50: var(--color-neutral-50);
--color-gray-100: var(--color-neutral-100);
--color-gray-200: var(--color-neutral-200);
--color-gray-300: var(--color-neutral-300);
--color-gray-400: var(--color-neutral-400);
--color-gray-500: var(--color-neutral-500);
--color-gray-600: var(--color-neutral-600);
--color-gray-700: var(--color-neutral-700);
--color-gray-800: var(--color-neutral-800);
--color-gray-900: var(--color-neutral-900);
/* Text Scale */
--color-text-50: var(--color-neutral-50);
--color-text-100: var(--color-neutral-100);
--color-text-200: var(--color-neutral-200);
--color-text-300: var(--color-neutral-300);
--color-text-400: var(--color-neutral-400);
--color-text-500: var(--color-neutral-500);
--color-text-600: var(--color-neutral-600);
--color-text-700: var(--color-neutral-700);
--color-text-800: var(--color-neutral-800);
--color-text-900: var(--color-neutral-900);
/* Surface Scale */
--color-surface-50: #fafafa;
--color-surface-100: #f5f5f5;
--color-surface-200: #eee;
--color-surface-300: #e0e0e0;
/* Border Scale */
--color-border-50: #fafafa;
--color-border-100: #f4f4f5;
--color-border-200: #e4e4e7;
--color-border-300: #d4d4d8;
/* Basic Utility Colors */
--color-white: #fff;
--color-black: #000;
--color-transparent: transparent;
/* Semantic Color Aliases */
--color-danger: var(--color-error);
--color-danger-50: var(--color-error-50);
--color-danger-100: var(--color-error-100);
--color-danger-200: var(--color-error-200);
--color-danger-300: var(--color-error-300);
--color-danger-400: var(--color-error-400);
--color-danger-500: var(--color-error-500);
--color-danger-600: var(--color-error-600);
--color-danger-700: var(--color-error-700);
--color-danger-800: var(--color-error-800);
--color-danger-900: var(--color-error-900);
/* Social Media Brand Colors */
--color-twitter: #1da1f2;
--color-facebook: #4267b2;
--color-linkedin: #0077b5;
--color-github: #181717;
--color-youtube: #f00;
--color-instagram: #e4405f;
/* Additional utility colors */
--color-gray-very-dark: #1a1a1a;
--color-gray-medium: #6b6b6b;
--color-gray-very-light: #f2f2f2;
--color-overlay-dark: rgb(0 0 0 / 80%);
--color-overlay-medium: rgb(0 0 0 / 60%);
}
/* Importierte Datei: tokens/spacing.css */
/**
* Spacing Properties with @property Definitions
*
* Typed CSS custom properties for spacing using @property.
* This enables better tooling support, autocomplete, and animation capabilities.
*
* @layer tokens.properties
*/
@layer tokens.properties {
/* Base Spacing Properties - Complete Scale */
@property --space-0 {
inherits: true;
initial-value: 0;
syntax: '<length>';
}
@property --space-px {
inherits: true;
initial-value: 1px;
syntax: '<length>';
}
@property --space-1 {
inherits: true;
initial-value: 0.25rem;
syntax: '<length>';
}
@property --space-2 {
inherits: true;
initial-value: 0.5rem;
syntax: '<length>';
}
@property --space-3 {
inherits: true;
initial-value: 0.75rem;
syntax: '<length>';
}
@property --space-4 {
inherits: true;
initial-value: 1rem;
syntax: '<length>';
}
@property --space-5 {
inherits: true;
initial-value: 1.25rem;
syntax: '<length>';
}
@property --space-6 {
inherits: true;
initial-value: 1.5rem;
syntax: '<length>';
}
@property --space-7 {
inherits: true;
initial-value: 1.75rem;
syntax: '<length>';
}
@property --space-8 {
inherits: true;
initial-value: 2rem;
syntax: '<length>';
}
@property --space-9 {
inherits: true;
initial-value: 2.25rem;
syntax: '<length>';
}
@property --space-10 {
inherits: true;
initial-value: 2.5rem;
syntax: '<length>';
}
@property --space-11 {
inherits: true;
initial-value: 2.75rem;
syntax: '<length>';
}
@property --space-12 {
inherits: true;
initial-value: 3rem;
syntax: '<length>';
}
@property --space-14 {
inherits: true;
initial-value: 3.5rem;
syntax: '<length>';
}
@property --space-16 {
inherits: true;
initial-value: 4rem;
syntax: '<length>';
}
@property --space-20 {
inherits: true;
initial-value: 5rem;
syntax: '<length>';
}
@property --space-24 {
inherits: true;
initial-value: 6rem;
syntax: '<length>';
}
@property --space-28 {
inherits: true;
initial-value: 7rem;
syntax: '<length>';
}
@property --space-32 {
inherits: true;
initial-value: 8rem;
syntax: '<length>';
}
@property --space-36 {
inherits: true;
initial-value: 9rem;
syntax: '<length>';
}
@property --space-40 {
inherits: true;
initial-value: 10rem;
syntax: '<length>';
}
@property --space-44 {
inherits: true;
initial-value: 11rem;
syntax: '<length>';
}
@property --space-48 {
inherits: true;
initial-value: 12rem;
syntax: '<length>';
}
@property --space-52 {
inherits: true;
initial-value: 13rem;
syntax: '<length>';
}
@property --space-56 {
inherits: true;
initial-value: 14rem;
syntax: '<length>';
}
@property --space-60 {
inherits: true;
initial-value: 15rem;
syntax: '<length>';
}
@property --space-64 {
inherits: true;
initial-value: 16rem;
syntax: '<length>';
}
@property --space-72 {
inherits: true;
initial-value: 18rem;
syntax: '<length>';
}
@property --space-80 {
inherits: true;
initial-value: 20rem;
syntax: '<length>';
}
@property --space-96 {
inherits: true;
initial-value: 24rem;
syntax: '<length>';
}
/* Large spacing for special cases */
@property --space-large-200 {
inherits: true;
initial-value: 200px;
syntax: '<length>';
}
@property --space-large-30rem {
inherits: true;
initial-value: 30rem;
syntax: '<length>';
}
@property --space-small-10px {
inherits: true;
initial-value: 10px;
syntax: '<length>';
}
/* Semantic Spacing Aliases */
@property --space-xs {
inherits: true;
initial-value: 0.25rem;
syntax: '<length>';
}
@property --space-sm {
inherits: true;
initial-value: 0.5rem;
syntax: '<length>';
}
@property --space-md {
inherits: true;
initial-value: 1rem;
syntax: '<length>';
}
@property --space-lg {
inherits: true;
initial-value: 1.5rem;
syntax: '<length>';
}
@property --space-xl {
inherits: true;
initial-value: 2rem;
syntax: '<length>';
}
@property --space-2xl {
inherits: true;
initial-value: 3rem;
syntax: '<length>';
}
@property --space-3xl {
inherits: true;
initial-value: 4rem;
syntax: '<length>';
}
/* Component-Specific Spacing Properties */
@property --space-button-padding-x {
inherits: true;
initial-value: 1rem;
syntax: '<length>';
}
@property --space-button-padding-y {
inherits: true;
initial-value: 0.5rem;
syntax: '<length>';
}
@property --space-card-padding {
inherits: true;
initial-value: 1.5rem;
syntax: '<length>';
}
@property --space-form-gap {
inherits: true;
initial-value: 1rem;
syntax: '<length>';
}
@property --space-section-gap {
inherits: true;
initial-value: 3rem;
syntax: '<length>';
}
@property --space-input-padding {
inherits: true;
initial-value: 0.75rem;
syntax: '<length>';
}
@property --space-modal-padding {
inherits: true;
initial-value: 1.5rem;
syntax: '<length>';
}
/* Gap Properties */
@property --space-gap-xs {
inherits: true;
initial-value: 0.25rem;
syntax: '<length>';
}
@property --space-gap-sm {
inherits: true;
initial-value: 0.5rem;
syntax: '<length>';
}
@property --space-gap-md {
inherits: true;
initial-value: 1rem;
syntax: '<length>';
}
@property --space-gap-lg {
inherits: true;
initial-value: 1.5rem;
syntax: '<length>';
}
@property --space-gap-xl {
inherits: true;
initial-value: 2rem;
syntax: '<length>';
}
/* Layout Spacing Properties */
@property --space-container-padding {
inherits: true;
initial-value: 1rem;
syntax: '<length>';
}
@property --space-grid-gap {
inherits: true;
initial-value: 1rem;
syntax: '<length>';
}
@property --space-flex-gap {
inherits: true;
initial-value: 1rem;
syntax: '<length>';
}
/* Animatable Spacing Properties */
@property --space-transition-padding {
inherits: true;
initial-value: 1rem;
syntax: '<length>';
}
@property --space-transition-margin {
inherits: true;
initial-value: 1rem;
syntax: '<length>';
}
@property --space-transition-gap {
inherits: true;
initial-value: 1rem;
syntax: '<length>';
}
/* Initial Value Definitions */
:root {
/* Base Spacing Scale */
--space-0: 0;
--space-px: 1px;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-7: 1.75rem;
--space-8: 2rem;
--space-9: 2.25rem;
--space-10: 2.5rem;
--space-11: 2.75rem;
--space-12: 3rem;
--space-14: 3.5rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--space-28: 7rem;
--space-32: 8rem;
--space-36: 9rem;
--space-40: 10rem;
--space-44: 11rem;
--space-48: 12rem;
--space-52: 13rem;
--space-56: 14rem;
--space-60: 15rem;
--space-64: 16rem;
--space-72: 18rem;
--space-80: 20rem;
--space-96: 24rem;
/* Component Spacing */
--space-button-padding-x: var(--space-md);
--space-button-padding-y: var(--space-sm);
--space-card-padding: var(--space-lg);
--space-form-gap: var(--space-md);
--space-section-gap: var(--space-3xl);
/* Layout Spacing */
--space-container-padding: var(--space-md);
--space-grid-gap: var(--space-md);
--space-flex-gap: var(--space-md);
/* Transition Spacing */
--space-transition-padding: var(--space-md);
--space-transition-margin: var(--space-md);
--space-transition-gap: var(--space-md);
}
}
/* Importierte Datei: tokens/typography.css */
/**
* Typography Properties with @property Definitions
*
* Typed CSS custom properties for typography using @property.
* This enables better tooling support, autocomplete, and animation capabilities.
*
* @layer tokens.properties
*/
@layer tokens.properties {
/* Font Size Properties */
@property --font-size-xs {
inherits: true;
initial-value: 0.75rem;
syntax: '<length>';
}
@property --font-size-sm {
inherits: true;
initial-value: 0.875rem;
syntax: '<length>';
}
@property --font-size-base {
inherits: true;
initial-value: 1rem;
syntax: '<length>';
}
@property --font-size-lg {
inherits: true;
initial-value: 1.125rem;
syntax: '<length>';
}
@property --font-size-xl {
inherits: true;
initial-value: 1.25rem;
syntax: '<length>';
}
@property --font-size-2xl {
inherits: true;
initial-value: 1.5rem;
syntax: '<length>';
}
@property --font-size-3xl {
inherits: true;
initial-value: 1.875rem;
syntax: '<length>';
}
@property --font-size-4xl {
inherits: true;
initial-value: 2.25rem;
syntax: '<length>';
}
@property --font-size-5xl {
inherits: true;
initial-value: 3rem;
syntax: '<length>';
}
@property --font-size-6xl {
inherits: true;
initial-value: 4rem;
syntax: '<length>';
}
/* Text Size Aliases (für Komponenten-Kompatibilität) */
@property --text-xs {
inherits: true;
initial-value: 0.75rem;
syntax: '<length>';
}
@property --text-sm {
inherits: true;
initial-value: 0.875rem;
syntax: '<length>';
}
@property --text-base {
inherits: true;
initial-value: 1rem;
syntax: '<length>';
}
@property --text-lg {
inherits: true;
initial-value: 1.125rem;
syntax: '<length>';
}
@property --text-xl {
inherits: true;
initial-value: 1.25rem;
syntax: '<length>';
}
@property --text-2xl {
inherits: true;
initial-value: 1.5rem;
syntax: '<length>';
}
/* Line Height Properties */
@property --line-height-tight {
inherits: true;
initial-value: 1.25;
syntax: '<number>';
}
@property --line-height-snug {
inherits: true;
initial-value: 1.375;
syntax: '<number>';
}
@property --line-height-normal {
inherits: true;
initial-value: 1.5;
syntax: '<number>';
}
@property --line-height-relaxed {
inherits: true;
initial-value: 1.625;
syntax: '<number>';
}
@property --line-height-loose {
inherits: true;
initial-value: 2;
syntax: '<number>';
}
/* Font Weight Properties */
@property --font-weight-thin {
inherits: true;
initial-value: 100;
syntax: '<number>';
}
@property --font-weight-extralight {
inherits: true;
initial-value: 200;
syntax: '<number>';
}
@property --font-weight-light {
inherits: true;
initial-value: 300;
syntax: '<number>';
}
@property --font-weight-normal {
inherits: true;
initial-value: 400;
syntax: '<number>';
}
@property --font-weight-medium {
inherits: true;
initial-value: 500;
syntax: '<number>';
}
@property --font-weight-semibold {
inherits: true;
initial-value: 600;
syntax: '<number>';
}
@property --font-weight-bold {
inherits: true;
initial-value: 700;
syntax: '<number>';
}
@property --font-weight-extrabold {
inherits: true;
initial-value: 800;
syntax: '<number>';
}
@property --font-weight-black {
inherits: true;
initial-value: 900;
syntax: '<number>';
}
/* Font Weight Aliases (für Komponenten-Kompatibilität) */
@property --font-light {
inherits: true;
initial-value: 300;
syntax: '<number>';
}
@property --font-normal {
inherits: true;
initial-value: 400;
syntax: '<number>';
}
@property --font-medium {
inherits: true;
initial-value: 500;
syntax: '<number>';
}
@property --font-semibold {
inherits: true;
initial-value: 600;
syntax: '<number>';
}
@property --font-bold {
inherits: true;
initial-value: 700;
syntax: '<number>';
}
/* Font Family Properties - Defined only in :root for better performance */
/* Letter Spacing Properties */
@property --letter-spacing-tighter {
inherits: true;
initial-value: -0.05em;
syntax: '<length>';
}
@property --letter-spacing-tight {
inherits: true;
initial-value: -0.025em;
syntax: '<length>';
}
@property --letter-spacing-normal {
inherits: true;
initial-value: 0;
syntax: '<length>';
}
@property --letter-spacing-wide {
inherits: true;
initial-value: 0.025em;
syntax: '<length>';
}
@property --letter-spacing-wider {
inherits: true;
initial-value: 0.05em;
syntax: '<length>';
}
@property --letter-spacing-widest {
inherits: true;
initial-value: 0.1em;
syntax: '<length>';
}
/* Animatable Typography Properties */
@property --font-size-transition {
inherits: true;
initial-value: 1rem;
syntax: '<length>';
}
@property --line-height-transition {
inherits: true;
initial-value: 1.5;
syntax: '<number>';
}
@property --letter-spacing-transition {
inherits: true;
initial-value: 0;
syntax: '<length>';
}
}
/* Initial Value Definitions */
:root {
/* Font Sizes */
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
--font-size-5xl: 3rem;
--font-size-6xl: 4rem;
/* Text Size Aliases */
--text-xs: var(--font-size-xs);
--text-sm: var(--font-size-sm);
--text-base: var(--font-size-base);
--text-lg: var(--font-size-lg);
--text-xl: var(--font-size-xl);
--text-2xl: var(--font-size-2xl);
/* Line Heights */
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
/* Font Weights */
--font-weight-thin: 100;
--font-weight-extralight: 200;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--font-weight-black: 900;
/* Font Weight Aliases */
--font-light: var(--font-weight-light);
--font-normal: var(--font-weight-normal);
--font-medium: var(--font-weight-medium);
--font-semibold: var(--font-weight-semibold);
--font-bold: var(--font-weight-bold);
/* Font Families */
--font-family-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
--font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
/* Font Family Aliases (kurze Versionen für Komponenten) */
--font-sans: var(--font-family-sans);
--font-serif: var(--font-family-serif);
--font-mono: var(--font-family-mono);
/* Letter Spacing */
--letter-spacing-tight: -0.025em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.025em;
--letter-spacing-wider: 0.05em;
/* Transition Properties */
--font-size-transition: var(--font-size-base);
--line-height-transition: var(--line-height-normal);
--letter-spacing-transition: var(--letter-spacing-normal);
}
/* Importierte Datei: tokens/radius.css */
/**
* Border Radius Properties with @property Definitions
*
* Typed CSS custom properties for border-radius using @property.
* This enables better tooling support, autocomplete, and animation capabilities.
*
* @layer tokens.properties
*/
@layer tokens.properties {
/* Base Radius Properties */
@property --radius-none {
inherits: true;
initial-value: 0;
syntax: '<length>';
}
@property --radius-xs {
inherits: true;
initial-value: 0.125rem;
syntax: '<length>';
}
@property --radius-sm {
inherits: true;
initial-value: 0.25rem;
syntax: '<length>';
}
@property --radius-md {
inherits: true;
initial-value: 0.375rem;
syntax: '<length>';
}
@property --radius-lg {
inherits: true;
initial-value: 0.5rem;
syntax: '<length>';
}
@property --radius-xl {
inherits: true;
initial-value: 0.75rem;
syntax: '<length>';
}
@property --radius-2xl {
inherits: true;
initial-value: 1rem;
syntax: '<length>';
}
@property --radius-3xl {
inherits: true;
initial-value: 1.5rem;
syntax: '<length>';
}
@property --radius-full {
inherits: true;
initial-value: 9999px;
syntax: '<length-percentage>';
}
/* Component-Specific Radius Properties */
@property --radius-button {
inherits: true;
initial-value: 0.375rem;
syntax: '<length>';
}
@property --radius-card {
inherits: true;
initial-value: 0.5rem;
syntax: '<length>';
}
@property --radius-input {
inherits: true;
initial-value: 0.375rem;
syntax: '<length>';
}
@property --radius-modal {
inherits: true;
initial-value: 0.75rem;
syntax: '<length>';
}
@property --radius-badge {
inherits: true;
initial-value: 0.25rem;
syntax: '<length>';
}
@property --radius-avatar {
inherits: true;
initial-value: 50;
syntax: '<length-percentage>';
}
/* Interactive Radius Properties */
@property --radius-hover {
inherits: true;
initial-value: 0.5rem;
syntax: '<length>';
}
@property --radius-focus {
inherits: true;
initial-value: 0.375rem;
syntax: '<length>';
}
/* Animatable Radius Properties */
@property --radius-transition {
inherits: true;
initial-value: 0.375rem;
syntax: '<length>';
}
@property --radius-transition-hover {
inherits: true;
initial-value: 0.5rem;
syntax: '<length>';
}
/* Initial Value Definitions */
:root {
/* Base Radius Scale */
--radius-none: 0;
--radius-xs: 0.125rem;
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-3xl: 1.5rem;
--radius-full: 9999px;
/* Component Radius */
--radius-button: var(--radius-md);
--radius-card: var(--radius-lg);
--radius-input: var(--radius-md);
--radius-modal: var(--radius-xl);
--radius-badge: var(--radius-sm);
--radius-avatar: 50;
/* Interactive Radius */
--radius-hover: var(--radius-lg);
--radius-focus: var(--radius-md);
/* Transition Radius */
--radius-transition: var(--radius-md);
--radius-transition-hover: var(--radius-lg);
/* Border-Radius Aliases (für Kompatibilität mit Typography-System) */
--border-radius-none: var(--radius-none);
--border-radius-sm: var(--radius-sm);
--border-radius-md: var(--radius-md);
--border-radius-lg: var(--radius-lg);
--border-radius-xl: var(--radius-xl);
--border-radius-full: var(--radius-full);
}
}
/* Importierte Datei: tokens/shadows.css */
/**
* Shadow Properties with @property Definitions
*
* Typed CSS custom properties for shadows using @property.
* This enables better tooling support, autocomplete, and animation capabilities.
*
* @layer tokens.properties
*/
@layer tokens.properties {
/* Base Shadow Properties */
@property --shadow-none {
inherits: false;
initial-value: none;
}
@property --shadow-xs {
inherits: false;
initial-value: 0 1px 2px 0 rgb(0 0 0 / 5%);
}
@property --shadow-sm {
inherits: false;
initial-value: 0 1px 2px 0 rgb(0 0 0 / 5%);
}
@property --shadow-md {
inherits: false;
initial-value: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
}
@property --shadow-lg {
inherits: false;
initial-value: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
}
@property --shadow-xl {
inherits: false;
initial-value: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
}
@property --shadow-2xl {
inherits: false;
initial-value: 0 25px 50px -12px rgb(0 0 0 / 25%);
}
@property --shadow-inner {
inherits: false;
initial-value: inset 0 2px 4px 0 rgb(0 0 0 / 5%);
}
/* Component-Specific Shadow Properties */
@property --shadow-card {
inherits: false;
initial-value: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
}
@property --shadow-modal {
inherits: false;
initial-value: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
}
@property --shadow-dropdown {
inherits: false;
initial-value: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
}
@property --shadow-tooltip {
inherits: false;
initial-value: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
}
@property --shadow-button {
inherits: false;
initial-value: 0 1px 2px 0 rgb(0 0 0 / 5%);
}
@property --shadow-button-hover {
inherits: false;
initial-value: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
}
}
/* Fallback Values für alle Shadow-Definitionen */
:root {
/* Base Shadow Scale */
--shadow-none: none;
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 5%);
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 25%);
--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 5%);
/* Component Shadows */
--shadow-card: var(--shadow-sm);
--shadow-modal: var(--shadow-xl);
--shadow-dropdown: var(--shadow-lg);
--shadow-tooltip: var(--shadow-md);
--shadow-button: var(--shadow-xs);
--shadow-button-hover: var(--shadow-md);
}
/* Importierte Datei: tokens/layout.css */
/* Clean Layout Tokens */
@layer tokens.properties {
:root {
--container-sm: 640px;
--container-md: 768px;
}
}
/* Importierte Datei: tokens/transitions.css */
/**
* Transition Tokens
*
* @property definitions for smooth theme transitions and animations.
* These properties enable smooth interpolation between theme values.
*
* @layer tokens
*/
@layer tokens {
/* Transition Duration Properties */
@property --transition-fast {
inherits: true;
initial-value: 150ms;
syntax: '<time>';
}
@property --transition-normal {
inherits: true;
initial-value: 250ms;
syntax: '<time>';
}
@property --transition-slow {
inherits: true;
initial-value: 400ms;
syntax: '<time>';
}
/* Extended Duration Properties (für Kompatibilität) */
@property --transition-duration-fast {
inherits: true;
initial-value: 150ms;
syntax: '<time>';
}
@property --transition-duration-normal {
inherits: true;
initial-value: 250ms;
syntax: '<time>';
}
@property --transition-duration-slow {
inherits: true;
initial-value: 400ms;
syntax: '<time>';
}
/* Transition Easing Properties */
@property --transition-ease-out {
inherits: true;
initial-value: cubic-bezier(0, 0, 0.2, 1);
syntax: '<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end';
}
@property --transition-ease-in {
inherits: true;
initial-value: cubic-bezier(0.4, 0, 1, 1);
syntax: '<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end';
}
@property --transition-ease-in-out {
inherits: true;
initial-value: cubic-bezier(0.4, 0, 0.2, 1);
syntax: '<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end';
}
/* Timing Function Aliases */
@property --transition-timing-ease {
inherits: true;
initial-value: cubic-bezier(0.4, 0, 0.2, 1);
syntax: '<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end';
}
/* Animatable Color Properties for Theme Transitions */
@property --transition-bg {
inherits: true;
initial-value: #fff;
syntax: '<color>';
}
@property --transition-fg {
inherits: true;
initial-value: #1f2937;
syntax: '<color>';
}
@property --transition-border {
inherits: true;
initial-value: #e5e7eb;
syntax: '<color>';
}
@property --transition-surface {
inherits: true;
initial-value: #f9fafb;
syntax: '<color>';
}
@property --transition-accent {
inherits: true;
initial-value: #3b82f6;
syntax: '<color>';
}
@property --transition-shadow-opacity {
inherits: true;
initial-value: 0.1;
syntax: '<number>';
}
/* Component-Specific Transition Properties */
@property --transition-colors {
inherits: true;
initial-value: background-color 250ms var(--transition-ease-out), color 250ms var(--transition-ease-out), border-color 250ms var(--transition-ease-out);
syntax: '*';
}
@property --transition-transform {
inherits: true;
initial-value: transform 200ms var(--transition-ease-out);
syntax: '*';
}
@property --transition-opacity {
inherits: true;
initial-value: opacity 200ms var(--transition-ease-out);
syntax: '*';
}
@property --transition-shadow {
inherits: t