openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2c36fa0307c4f0d5e452976a45347961292aa3f8
oikos/public/styles/tokens.css
T
Ulas 2c36fa0307 feat(tasks): add optional "none" priority level for tasks without urgency 
New tasks default to "none" priority instead of "medium". Tasks with no
priority hide the badge in list and dashboard views, reducing visual noise
for routine items. Includes DB migration v4 and i18n keys (de, en, it).

Closes #15
2026-04-04 22:13:51 +02:00

427 lines
15 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/**
* Modul: Design Tokens
* Zweck: CSS Custom Properties fuer das gesamte Design-System
* Abhängigkeiten: keine
*
* Aufbau:
* 1. Neutral-Farbskala (50–950)
* 2. Akzentfarben + Semantische Farben
* 3. Modul-Akzentfarben
* 4. Mahlzeit-Typ-Farben
* 5. Prioritäten
* 6. Overlay / Backdrop
* 7. Schatten
* 8. Border-Radien
* 9. Typografie
* 10. Abstände (4px-Raster)
* 11. Layout
* 12. Sidebar
* 13. Übergänge
* 14. Z-Indizes
* 15. Dark Mode
*/
:root {
/* --------------------------------------------------------
* 1. Farben - Neutral-Skala
* Leicht warmgetönt (kein reines Grau) für einladende Atmosphäre.
* Benannt als --neutral-{stufe} für direkte Nutzung,
* plus semantische Aliase (--color-bg, --color-surface etc.)
* die bestehender Code bereits referenziert.
* -------------------------------------------------------- */
--neutral-50: #FAFAF8;
--neutral-100: #F5F4F1;
--neutral-150: #EFEEE9;
--neutral-200: #E8E7E2;
--neutral-250: #DDDCD7;
--neutral-300: #D1D0CB;
--neutral-400: #B5B4AF;
--neutral-500: #8E8D89;
--neutral-600: #6C6B67;
--neutral-700: #4A4A46;
--neutral-800: #2E2E2B;
--neutral-900: #1C1C1A;
--neutral-950: #121211;
/* Semantische Aliase (abwärtskompatibel) */
--color-bg: var(--neutral-100);
--color-surface: #FFFFFF;
--color-surface-2: var(--neutral-50);
--color-surface-3: var(--neutral-150);
--color-border: var(--neutral-200);
--color-border-subtle: var(--neutral-150);
--color-text-primary: var(--neutral-900);
--color-text-secondary: var(--neutral-600); /* WCAG AA: ~5.0:1 auf weiß */
--color-text-tertiary: #737370;
--color-text-disabled: var(--neutral-300);
/* --------------------------------------------------------
* 2. Farben - Akzent (konfigurierbar)
* Wärmerer Blauton statt reinem Corporate-Blau.
* -------------------------------------------------------- */
--color-accent: #2563EB;
--color-accent-hover: #1D4ED8;
--color-accent-active: #1E40AF;
--color-accent-light: #EFF6FF;
--color-accent-subtle: #DBEAFE;
--color-btn-primary: #2554C7; /* WCAG AA: 6.62:1 auf weiß (weißer Text) */
--color-btn-primary-hover: #1E429A;
/* --------------------------------------------------------
* 3. Farben - Semantisch
* -------------------------------------------------------- */
--color-success: #15803D;
--color-success-hover: #166534;
--color-success-light: #DAFBE1;
--color-warning: #B45309;
--color-warning-hover: #92400E;
--color-warning-light: #FFF4D4;
--color-danger: #DC2626;
--color-danger-hover: #B91C1C;
--color-danger-light: #FFE2E0;
--color-info: #54AEFF;
--color-info-hover: #3A94E5;
--color-info-light: #DDF4FF;
/* --------------------------------------------------------
* 4. Farben - Modul-Akzente
* Jedes Modul hat eine eigene dezente Akzentfarbe.
* Einsatz in Modul-Headern, Icons, aktiven States.
* -------------------------------------------------------- */
--module-dashboard: #2563EB; /* Blau - Übersicht, neutral */
--module-tasks: #15803D; /* Grün - Erledigung, Fortschritt */
--module-calendar: #8250DF; /* Violett - Termine, Zeit */
--module-meals: #B45309; /* Orange - Essen, Wärme */
--module-shopping: #D4511E; /* Rot-Orange - Einkaufen, Aktion */
--module-notes: #BF8700; /* Gold - Notizen, Pinnwand */
--module-contacts: #0969DA; /* Kräftiges Blau - Kontakte */
--module-budget: #1A7F5A; /* Teal - Finanzen, Stabilität */
--module-settings: #6E7781; /* Grau - Konfiguration */
/* --------------------------------------------------------
* 5. Farben - Mahlzeit-Typen
* Zentrale Tokens statt Hardcoding in meals.css
* -------------------------------------------------------- */
--meal-breakfast: #B45309;
--meal-breakfast-light: #FFF4D4;
--meal-lunch: #2DA44E;
--meal-lunch-light: #DAFBE1;
--meal-dinner: #2563EB;
--meal-dinner-light: #EFF6FF;
--meal-snack: #D4511E;
--meal-snack-light: #FFECE3;
/* --------------------------------------------------------
* 6. Farben - Prioritäten
* -------------------------------------------------------- */
--color-priority-none: var(--neutral-400);
--color-priority-low: var(--neutral-500);
--color-priority-medium: #B45309;
--color-priority-high: #D4511E;
--color-priority-urgent: #DC2626;
/* Hintergrundfarben für Priority-Badges */
--color-priority-none-bg: rgba(142, 141, 137, 0.08);
--color-priority-low-bg: rgba(142, 141, 137, 0.12);
--color-priority-medium-bg: rgba(180, 83, 9, 0.12);
--color-priority-high-bg: rgba(212, 81, 30, 0.12);
--color-priority-urgent-bg: rgba(220, 38, 38, 0.12);
/* --------------------------------------------------------
* 7. Overlay / Backdrop
* -------------------------------------------------------- */
--color-overlay: rgba(0, 0, 0, 0.45);
--color-overlay-light: rgba(0, 0, 0, 0.2);
/* Glass-Overlays (fuer Elemente auf farbigen Hintergruenden) */
--color-glass: rgba(255, 255, 255, 0.18);
--color-glass-hover: rgba(255, 255, 255, 0.3);
--color-glass-border: rgba(255, 255, 255, 0.15);
--color-danger-translucent: rgba(255, 59, 48, 0.35);
/* --------------------------------------------------------
* 8. Schatten
* 3 Stufen: subtle (Karten), medium (Dropdowns, Hover),
* elevated (Modals, FAB).
* -------------------------------------------------------- */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.03);
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
/* --------------------------------------------------------
* 9. Border-Radien
* -------------------------------------------------------- */
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
/* --------------------------------------------------------
* 10. Typografie
* System-Font-Stack laut Redesign-Spec.
* Skala von xs (12px) bis 4xl (36px).
* -------------------------------------------------------- */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
/* Size-Skala */
--text-xs: 0.75rem; /* 12px - Minimum, Captions, Badges, Nav-Labels */
--text-sm: 0.8125rem; /* 13px - Small/Secondary */
--text-base: 0.875rem; /* 14px - Body (Desktop), kompakter */
--text-md: 1rem; /* 16px - Body (Mobile), Inputs */
--text-lg: 1.125rem; /* 18px - Section-Title */
--text-xl: 1.25rem; /* 20px - Subtitle */
--text-2xl: 1.5rem; /* 24px - Page-Title */
--text-3xl: 1.875rem; /* 30px - Page-Title Desktop */
--text-4xl: 2.25rem; /* 36px - Hero/Greeting */
/* Line-Heights */
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-base: 1.5;
--line-height-relaxed: 1.625;
/* Font-Weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* --------------------------------------------------------
* 11. Abstände - 4px-Raster
* -------------------------------------------------------- */
--space-0: 0px;
--space-px: 1px;
--space-0h: 2px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
/* --------------------------------------------------------
* 11b. Touch-Target Sizes
* -------------------------------------------------------- */
--target-sm: 32px;
--target-md: 40px;
--target-lg: 48px;
/* --------------------------------------------------------
* 12. Layout
* -------------------------------------------------------- */
--nav-height-mobile: 56px;
--nav-bottom-height: calc(var(--nav-height-mobile) + 12px); /* scroll (56px) + dots-indicator (12px) */
--sidebar-width: 56px; /* collapsed icon-only (1024–1279px) */
--sidebar-width-expanded: 220px; /* full sidebar (1280px+), max 240px laut Spec */
--content-max-width: 1280px;
/* --------------------------------------------------------
* 13. Sidebar
* Reduzierter Neumorphismus - subtilere Schatten.
* -------------------------------------------------------- */
--sidebar-bg: var(--neutral-100);
--sidebar-shadow-light: rgba(255, 255, 255, 0.6);
--sidebar-shadow-dark: rgba(0, 0, 0, 0.08);
--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
/* --------------------------------------------------------
* 14. Übergänge
* fast=150ms, base=250ms, slow=400ms (laut Redesign-Spec)
* -------------------------------------------------------- */
--transition-fast: 0.15s ease;
--transition-base: 0.25s ease;
--transition-slow: 0.4s ease;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* --------------------------------------------------------
* 15. Z-Indizes
* -------------------------------------------------------- */
--z-base: 0;
--z-card: 1;
--z-sticky: 10;
--z-dropdown: 50;
--z-nav: 100;
--z-modal: 200;
--z-toast: 300;
}
/* ================================================================
* Dark Mode
* Zwei Selektoren: (1) System-Preference, (2) manueller Override
* via data-theme="dark" auf <html>.
* data-theme="light" erzwingt Light Mode (kein Dark-Override).
* Ohne data-theme folgt die App der System-Einstellung.
* ================================================================ */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
/* Neutral-Skala invertiert (warm-dunkel) */
--neutral-50: #1A1A18;
--neutral-100: #222220;
--neutral-150: #2A2A28;
--neutral-200: #333331;
--neutral-250: #3D3D3A;
--neutral-300: #48484A;
--neutral-400: #636360;
--neutral-500: #8E8D89;
--neutral-600: #AEADB0; /* WCAG AA: ~4.8:1 auf #2A2A28 */
--neutral-700: #C8C7C3;
--neutral-800: #E2E1DC;
--neutral-900: #F5F4F1;
--neutral-950: #FAFAF8;
/* Semantische Aliase folgen automatisch via var(--neutral-*) */
--color-surface: #2A2A28;
--color-surface-2: #1A1A18;
--color-surface-3: #333331;
/* Sidebar */
--sidebar-bg: #1A1A18;
--sidebar-shadow-light: rgba(255, 255, 255, 0.04);
--sidebar-shadow-dark: rgba(0, 0, 0, 0.4);
/* Akzent - Dark Mode */
--color-accent: #60A5FA;
--color-accent-hover: #3B82F6;
--color-accent-active: #2563EB;
--color-accent-light: #1E3A5F;
--color-accent-subtle: #1E3050;
--color-btn-primary: #3B82F6;
--color-btn-primary-hover: #2563EB;
/* Semantische Farben - Dark Mode */
--color-success: #4ADE80;
--color-warning: #F59E0B;
--color-danger: #FCA5A5;
--color-text-tertiary: #A3A3A0;
--color-success-light: #1A3325;
--color-warning-light: #332400;
--color-danger-light: #3D1C1A;
--color-info-light: #1A2D40;
/* Modul-Akzente - Dark Mode */
--module-dashboard: #60A5FA;
--module-tasks: #4ADE80;
--module-calendar: #A78BFA;
--module-meals: #F59E0B;
--module-shopping: #FB923C;
--module-notes: #FCD34D;
--module-contacts: #60A5FA;
--module-budget: #34D399;
--module-settings: #94A3B8;
/* Mahlzeit-Typ - Dark Mode */
--meal-breakfast: #F59E0B;
--meal-dinner: #60A5FA;
/* Mahlzeit-Typ Light-Varianten */
--meal-breakfast-light: #332400;
--meal-lunch-light: #1A3325;
--meal-dinner-light: #1A2D4D;
--meal-snack-light: #3D2010;
/* Priority-Badge Hintergründe */
--color-priority-none-bg: rgba(142, 141, 137, 0.12);
--color-priority-low-bg: rgba(142, 141, 137, 0.18);
--color-priority-medium-bg: rgba(230, 147, 10, 0.18);
--color-priority-high-bg: rgba(212, 81, 30, 0.18);
--color-priority-urgent-bg: rgba(229, 83, 75, 0.18);
/* Overlay */
--color-overlay: rgba(0, 0, 0, 0.6);
--color-overlay-light: rgba(0, 0, 0, 0.35);
/* Schatten stärker im Dark Mode */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);
}
}
/* Manueller Dark-Mode-Override: data-theme="dark" auf <html> */
:root[data-theme="dark"] {
--neutral-50: #1A1A18;
--neutral-100: #222220;
--neutral-150: #2A2A28;
--neutral-200: #333331;
--neutral-250: #3D3D3A;
--neutral-300: #48484A;
--neutral-400: #636360;
--neutral-500: #8E8D89;
--neutral-600: #AEADB0;
--neutral-700: #C8C7C3;
--neutral-800: #E2E1DC;
--neutral-900: #F5F4F1;
--neutral-950: #FAFAF8;
--color-surface: #2A2A28;
--color-surface-2: #1A1A18;
--color-surface-3: #333331;
--sidebar-bg: #1A1A18;
--sidebar-shadow-light: rgba(255, 255, 255, 0.04);
--sidebar-shadow-dark: rgba(0, 0, 0, 0.4);
/* Akzent - Dark Mode */
--color-accent: #60A5FA;
--color-accent-hover: #3B82F6;
--color-accent-active: #2563EB;
--color-accent-light: #1E3A5F;
--color-accent-subtle: #1E3050;
--color-btn-primary: #3B82F6;
--color-btn-primary-hover: #2563EB;
/* Semantische Farben - Dark Mode */
--color-success: #4ADE80;
--color-warning: #F59E0B;
--color-danger: #FCA5A5;
--color-text-tertiary: #A3A3A0;
--color-success-light: #1A3325;
--color-warning-light: #332400;
--color-danger-light: #3D1C1A;
--color-info-light: #1A2D40;
/* Modul-Akzente - Dark Mode */
--module-dashboard: #60A5FA;
--module-tasks: #4ADE80;
--module-calendar: #A78BFA;
--module-meals: #F59E0B;
--module-shopping: #FB923C;
--module-notes: #FCD34D;
--module-contacts: #60A5FA;
--module-budget: #34D399;
--module-settings: #94A3B8;
/* Mahlzeit-Typ - Dark Mode */
--meal-breakfast: #F59E0B;
--meal-dinner: #60A5FA;
--meal-breakfast-light: #332400;
--meal-lunch-light: #1A3325;
--meal-dinner-light: #1A2D4D;
--meal-snack-light: #3D2010;
--color-priority-none-bg: rgba(142, 141, 137, 0.12);
--color-priority-low-bg: rgba(142, 141, 137, 0.18);
--color-priority-medium-bg: rgba(230, 147, 10, 0.18);
--color-priority-high-bg: rgba(212, 81, 30, 0.18);
--color-priority-urgent-bg: rgba(229, 83, 75, 0.18);
--color-overlay: rgba(0, 0, 0, 0.6);
--color-overlay-light: rgba(0, 0, 0, 0.35);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);
}
Reference in New Issue View Git Blame Copy Permalink