@casoon/dragonfly/tokens/colors.css

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.

/**
 * 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%);
}