/** * Farb-Tokens für das astralex.dev Ökosystem. * Werte basierend auf der Slate-Design-Spezifikation (Teil A, §2). * * Theme-Aktivierung: [data-theme="dark"] auf oder setzen. * Light-Theme-Werte sind strukturell vorbereitet (siehe UI_KIT_PRD.md §3.2), * aber bewusst noch nicht final befüllt - werden erst bei tatsächlichem * Light-Theme-Bedarf definiert. */ [data-theme='dark'] { /* Grundpalette */ --color-navy: #1e202c; --color-purple: #60519b; --color-gray: #31323e; --color-lavender: #bfc0d1; /* Hintergrund-Stufen (Layering) */ --color-bg-0: #191a24; /* Sidebar - tiefste Ebene */ --color-bg-1: #1e202c; /* App-Canvas */ --color-bg-2: #23242f; /* Panels / große Cards */ --color-bg-3: #262732; /* Stat-Cards / Knowledge-Cards */ --color-bg-4: #2c2d39; /* Kanban-Karten - oberste Ebene */ --color-bg-inset: #1c1d27; /* Eingelassene Bereiche */ /* Text-Stufen */ --color-text-hi: #edeef4; /* Headlines */ --color-text: #e8e9f0; /* Standard-UI-Text */ --color-text-body: #bfc0d1; /* Fließtext */ --color-text-dim: #8a8b9c; /* Sekundär */ --color-text-faint: #6b6c7d; /* Meta, Captions */ --color-text-ghost: #5d5e6e; /* Labels (uppercase mono) */ /* Akzent / Purple-Skala */ --color-accent: #60519b; --color-accent-hover-filter: brightness(1.1); --color-accent-text: #9b8be0; /* Links, Ghost-Button-Text */ --color-accent-text-hi: #a594e8; /* aktive Nav-Icons */ --color-accent-bg: rgba(96, 81, 155, 0.18); --color-accent-border: rgba(122, 107, 196, 0.5); /* Priorität-Skala (1-5, kühl -> warm) */ --color-priority-1: #7c83c4; /* Sehr niedrig - kühles Indigo */ --color-priority-2: #5aa6c9; /* Niedrig - Cyan-Blau */ --color-priority-3: #5cb088; /* Mittel - Grün */ --color-priority-4: #d6a256; /* Hoch - Bernstein */ --color-priority-5: #d76b6b; /* Kritisch - gedämpftes Korall-Rot */ --color-priority-track: rgba(191, 192, 209, 0.16); /* ungefüllte Balken */ /* Status-Farben */ --color-status-open: #9495a6; --color-status-open-bg: rgba(148, 149, 166, 0.15); --color-status-doing: #8b7bd0; --color-status-doing-bg: rgba(139, 123, 208, 0.16); --color-status-done: #5cb088; --color-status-done-bg: rgba(92, 176, 136, 0.15); --color-status-blocked: #d76b6b; --color-status-blocked-bg: rgba(215, 107, 107, 0.15); /* Kontext-Farben */ --color-context-work: #8b7bd0; --color-context-work-bg: rgba(139, 123, 208, 0.14); --color-context-private: #5aa6c9; --color-context-private-bg: rgba(90, 166, 201, 0.14); --color-context-school: #d6a256; --color-context-school-bg: rgba(214, 162, 86, 0.14); /* Feedback-Farben */ --color-feedback-success: #5cb088; --color-feedback-success-bg: #1d2823; --color-feedback-success-border: rgba(92, 176, 136, 0.4); --color-feedback-warning: #d6a256; --color-feedback-warning-bg: #29241c; --color-feedback-warning-border: rgba(214, 162, 86, 0.4); --color-feedback-error: #d76b6b; --color-feedback-error-bg: #291d20; --color-feedback-error-border: rgba(215, 107, 107, 0.4); --color-feedback-info: #9b8be0; --color-feedback-info-bg: #221f2c; --color-feedback-info-border: rgba(122, 107, 196, 0.4); /* Visibility (öffentlich/privat) */ --color-visibility-public: #5cb088; --color-visibility-public-bg: rgba(92, 176, 136, 0.13); --color-visibility-private: #9495a6; --color-visibility-private-bg: rgba(148, 149, 166, 0.12); /* Borders */ --color-border-subtle: rgba(191, 192, 209, 0.08); --color-border-default: rgba(191, 192, 209, 0.14); --color-border-strong: rgba(191, 192, 209, 0.16); /* Scrollbar */ --color-scrollbar-thumb: rgba(191, 192, 209, 0.16); --color-scrollbar-thumb-hover: rgba(191, 192, 209, 0.28); } /** * Light-Theme: Token-Namen sind identisch zu [data-theme="dark"], damit * Komponenten niemals theme-spezifischen Code brauchen. Werte werden erst * definiert, wenn Light-Theme tatsächlich gebaut wird (siehe UI_KIT_PRD.md * §3.2 / §8 Offene Punkte). Solange nicht befüllt, NICHT verwenden. */ [data-theme='light'] { /* TODO: Light-Theme-Werte definieren, sobald benötigt */ }