237 lines
8.7 KiB
CSS
237 lines
8.7 KiB
CSS
/* ============================================================
|
|
TOKENS.CSS — Design Tokens (Single Source of Truth)
|
|
Alle Werte hier zentral anpassen.
|
|
============================================================ */
|
|
|
|
:root {
|
|
/* ----------------------------------------------------------
|
|
COLOR PALETTE
|
|
Neutrale Graustufen + ein Akzent-System
|
|
---------------------------------------------------------- */
|
|
|
|
/* Neutrals (Light Mode) */
|
|
--color-white: #ffffff;
|
|
--color-gray-50: #f8f9fa;
|
|
--color-gray-100: #f1f3f5;
|
|
--color-gray-200: #e9ecef;
|
|
--color-gray-300: #dee2e6;
|
|
--color-gray-400: #ced4da;
|
|
--color-gray-500: #adb5bd;
|
|
--color-gray-600: #6c757d;
|
|
--color-gray-700: #495057;
|
|
--color-gray-800: #343a40;
|
|
--color-gray-900: #212529;
|
|
--color-black: #0d0f12;
|
|
|
|
/* Accent (Primärfarbe — hier zentral anpassen) */
|
|
--color-accent-50: #eef2ff;
|
|
--color-accent-100: #e0e7ff;
|
|
--color-accent-200: #c7d2fe;
|
|
--color-accent-300: #a5b4fc;
|
|
--color-accent-400: #818cf8;
|
|
--color-accent-500: #6366f1; /* ← Primärfarbe */
|
|
--color-accent-600: #4f46e5;
|
|
--color-accent-700: #4338ca;
|
|
--color-accent-800: #3730a3;
|
|
--color-accent-900: #312e81;
|
|
|
|
/* Semantic Colors */
|
|
--color-success-bg: #f0fdf4;
|
|
--color-success: #16a34a;
|
|
--color-success-border: #bbf7d0;
|
|
|
|
--color-warning-bg: #fffbeb;
|
|
--color-warning: #d97706;
|
|
--color-warning-border: #fde68a;
|
|
|
|
--color-danger-bg: #fef2f2;
|
|
--color-danger: #dc2626;
|
|
--color-danger-border: #fecaca;
|
|
|
|
--color-info-bg: #eff6ff;
|
|
--color-info: #2563eb;
|
|
--color-info-border: #bfdbfe;
|
|
|
|
/* ----------------------------------------------------------
|
|
SEMANTIC ALIASES — Light Mode (diese werden verwendet)
|
|
---------------------------------------------------------- */
|
|
--bg: var(--color-white);
|
|
--bg-subtle: var(--color-gray-50);
|
|
--bg-muted: var(--color-gray-100);
|
|
|
|
--surface: var(--color-white);
|
|
--surface-raised: var(--color-white);
|
|
--surface-overlay: var(--color-white);
|
|
|
|
--border: var(--color-gray-200);
|
|
--border-strong: var(--color-gray-300);
|
|
--border-focus: var(--color-accent-500);
|
|
|
|
--text: var(--color-gray-900);
|
|
--text-muted: var(--color-gray-600);
|
|
--text-subtle: var(--color-gray-400);
|
|
--text-on-accent: var(--color-white);
|
|
--text-on-dark: var(--color-white);
|
|
|
|
--accent: var(--color-accent-500);
|
|
--accent-hover: var(--color-accent-600);
|
|
--accent-active: var(--color-accent-700);
|
|
--accent-subtle: var(--color-accent-50);
|
|
--accent-muted: var(--color-accent-100);
|
|
|
|
/* ----------------------------------------------------------
|
|
TYPOGRAPHY
|
|
---------------------------------------------------------- */
|
|
|
|
/* Font Families */
|
|
--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
--font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;
|
|
|
|
/* Font Sizes (Modular Scale ~1.25) */
|
|
--text-xs: 0.75rem; /* 12px */
|
|
--text-sm: 0.875rem; /* 14px */
|
|
--text-base: 1rem; /* 16px */
|
|
--text-md: 1.125rem; /* 18px */
|
|
--text-lg: 1.25rem; /* 20px */
|
|
--text-xl: 1.5rem; /* 24px */
|
|
--text-2xl: 1.875rem; /* 30px */
|
|
--text-3xl: 2.25rem; /* 36px */
|
|
--text-4xl: 3rem; /* 48px */
|
|
|
|
/* Font Weights */
|
|
--weight-normal: 400;
|
|
--weight-medium: 500;
|
|
--weight-semibold: 600;
|
|
--weight-bold: 700;
|
|
|
|
/* Line Heights */
|
|
--leading-tight: 1.25;
|
|
--leading-snug: 1.375;
|
|
--leading-normal: 1.5;
|
|
--leading-relaxed: 1.625;
|
|
|
|
/* Letter Spacing */
|
|
--tracking-tight: -0.025em;
|
|
--tracking-normal: 0em;
|
|
--tracking-wide: 0.025em;
|
|
--tracking-wider: 0.05em;
|
|
--tracking-widest: 0.1em;
|
|
|
|
/* ----------------------------------------------------------
|
|
SPACING (4px Base Grid)
|
|
---------------------------------------------------------- */
|
|
--space-1: 0.25rem; /* 4px */
|
|
--space-2: 0.5rem; /* 8px */
|
|
--space-3: 0.75rem; /* 12px */
|
|
--space-4: 1rem; /* 16px */
|
|
--space-5: 1.25rem; /* 20px */
|
|
--space-6: 1.5rem; /* 24px */
|
|
--space-8: 2rem; /* 32px */
|
|
--space-10: 2.5rem; /* 40px */
|
|
--space-12: 3rem; /* 48px */
|
|
--space-16: 4rem; /* 64px */
|
|
--space-20: 5rem; /* 80px */
|
|
--space-24: 6rem; /* 96px */
|
|
|
|
/* ----------------------------------------------------------
|
|
BORDER RADIUS
|
|
---------------------------------------------------------- */
|
|
--radius-sm: 0.25rem; /* 4px */
|
|
--radius-md: 0.375rem; /* 6px */
|
|
--radius-lg: 0.5rem; /* 8px */
|
|
--radius-xl: 0.75rem; /* 12px */
|
|
--radius-2xl: 1rem; /* 16px */
|
|
--radius-full: 9999px;
|
|
|
|
/* ----------------------------------------------------------
|
|
SHADOWS
|
|
---------------------------------------------------------- */
|
|
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
|
|
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
|
|
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.07), 0 4px 6px rgba(0, 0, 0, 0.04);
|
|
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.08), 0 10px 10px rgba(0, 0, 0, 0.03);
|
|
--shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.25);
|
|
|
|
/* ----------------------------------------------------------
|
|
TRANSITIONS
|
|
---------------------------------------------------------- */
|
|
--duration-fast: 120ms;
|
|
--duration-base: 200ms;
|
|
--duration-slow: 300ms;
|
|
--ease: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
--transition: var(--duration-base) var(--ease);
|
|
|
|
/* ----------------------------------------------------------
|
|
LAYOUT
|
|
---------------------------------------------------------- */
|
|
--container-sm: 40rem; /* 640px */
|
|
--container-md: 48rem; /* 768px */
|
|
--container-lg: 64rem; /* 1024px */
|
|
--container-xl: 80rem; /* 1280px */
|
|
--container-2xl: 90rem; /* 1440px */
|
|
|
|
--nav-height: 3.5rem; /* 56px */
|
|
--sidebar-width: 16rem; /* 256px */
|
|
|
|
/* ----------------------------------------------------------
|
|
Z-INDEX SCALE
|
|
---------------------------------------------------------- */
|
|
--z-base: 0;
|
|
--z-raised: 10;
|
|
--z-dropdown: 100;
|
|
--z-sticky: 200;
|
|
--z-overlay: 300;
|
|
--z-modal: 400;
|
|
--z-toast: 500;
|
|
}
|
|
|
|
/* ============================================================
|
|
DARK MODE OVERRIDES
|
|
Nur semantische Aliases werden überschrieben.
|
|
Die Palette bleibt unverändert.
|
|
============================================================ */
|
|
[data-theme="dark"] {
|
|
--bg: var(--color-black);
|
|
--bg-subtle: #111317;
|
|
--bg-muted: #1a1d23;
|
|
|
|
--surface: #161920;
|
|
--surface-raised: #1e2128;
|
|
--surface-overlay: #252830;
|
|
|
|
--border: #252830;
|
|
--border-strong: #2e3340;
|
|
|
|
--text: var(--color-gray-100);
|
|
--text-muted: var(--color-gray-400);
|
|
--text-subtle: var(--color-gray-600);
|
|
|
|
--accent: var(--color-accent-400);
|
|
--accent-hover: var(--color-accent-300);
|
|
--accent-active: var(--color-accent-200);
|
|
--accent-subtle: rgba(99, 102, 241, 0.1);
|
|
--accent-muted: rgba(99, 102, 241, 0.15);
|
|
|
|
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3);
|
|
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6), 0 10px 10px rgba(0, 0, 0, 0.4);
|
|
|
|
--color-success-bg: rgba(22, 163, 74, 0.1);
|
|
--color-success-border: rgba(22, 163, 74, 0.25);
|
|
|
|
--color-warning-bg: rgba(217, 119, 6, 0.1);
|
|
--color-warning-border: rgba(217, 119, 6, 0.25);
|
|
|
|
--color-danger-bg: rgba(220, 38, 38, 0.1);
|
|
--color-danger-border: rgba(220, 38, 38, 0.25);
|
|
|
|
--color-info-bg: rgba(37, 99, 235, 0.1);
|
|
--color-info-border: rgba(37, 99, 235, 0.25);
|
|
|
|
--shadow-focus: 0 0 0 3px rgba(129, 140, 248, 0.3);
|
|
}
|