334 lines
17 KiB
CSS
334 lines
17 KiB
CSS
/* =============================================================================
|
||
CheckPoint Ehrenamt · tokens.css
|
||
Mandantenfähiges Token-System mit Hell- und Dunkelmodus.
|
||
ZWEI ROLLEN-THEMES IN EINER DATEI: User (Mobile, Bottom-Nav) und
|
||
Admin (Desktop-Sidebar, mobil per Off-Canvas). Jedes Theme ist für sich
|
||
mandantenfähig — ein neues Team tauscht beide Brand-Blöcke.
|
||
|
||
AUFBAU (pro Theme dieselben drei Schichten):
|
||
1) BRAND – pro Team austauschbar. Ein zweites Team ändert NUR diese Werte.
|
||
2) BASE – theme-unabhängig: Abstände, Radien, Schrift, Transitions.
|
||
3) SEMANTIK – hell + dunkel in einem, gelöst über die CSS-Funktion light-dark().
|
||
|
||
NAMENSRAUM:
|
||
--cp-user-* → Token für die Ehrenamtlichen-Oberfläche (Bottom-Nav-Shell)
|
||
--cp-admin-* → Token für die Admin-Oberfläche (Sidebar-Shell)
|
||
Komponenten-CSS wählt je Shell den passenden Namensraum. Es gibt keine
|
||
gemeinsamen Farb-Tokens mehr ohne Präfix — das verhindert versehentliches
|
||
Mischen der beiden Looks.
|
||
|
||
THEME-STEUERUNG (kein JavaScript nötig):
|
||
- Standard folgt der Systemeinstellung (prefers-color-scheme) automatisch.
|
||
- Optionaler manueller Override später: <html data-theme="dark"> bzw. "light".
|
||
|
||
Hinweis: Diese Datei definiert nur Variablen. Komponenten-CSS muss diese
|
||
Tokens verwenden (z. B. background: var(--cp-user-surface)), damit der
|
||
Dunkelmodus wirklich greift – nirgends feste Weiß-/Schwarzwerte verdrahten.
|
||
============================================================================= */
|
||
|
||
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap");
|
||
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;700&family=Roboto+Mono:wght@400;500&family=Alfa+Slab+One&display=swap");
|
||
|
||
/* #############################################################################
|
||
TEIL A · USER-THEME (Ehrenamtliche, Mobile, Bottom-Nav)
|
||
############################################################################# */
|
||
/* =============================================================================
|
||
A.1 · BRAND (pro Mandant überschreiben — User-Theme)
|
||
----------------------------------------------------------------------------
|
||
Für ein weiteres Team genügt es, diesen Block zu ersetzen – am besten
|
||
serverseitig pro Team eingespielt, z. B.:
|
||
|
||
<style>
|
||
:root {
|
||
--cp-user-brand-primary: #21a8ad;
|
||
--cp-user-brand-primary-strong: #147f84;
|
||
--cp-user-brand-accent: #ef1823;
|
||
--cp-user-brand-accent-strong: #bd0f18;
|
||
--cp-user-brand-font: "DM Sans", Arial, Helvetica, sans-serif;
|
||
}
|
||
</style>
|
||
|
||
Alle getönten Flächen, Fokus-Ringe und Status-Farben werden aus diesen
|
||
wenigen Werten abgeleitet – das Team muss nichts weiter pflegen.
|
||
============================================================================= */
|
||
:root {
|
||
--cp-user-brand-primary: #21a8ad; /* Türkis – Hauptfarbe */
|
||
--cp-user-brand-primary-strong: #147f84; /* Türkis dunkel – Links, starke Akzente */
|
||
--cp-user-brand-accent: #ef1823; /* Rot – dringende Aktionen, Warnungen */
|
||
--cp-user-brand-accent-strong: #bd0f18; /* Rot dunkel – Hover, starke Akzente */
|
||
--cp-user-brand-font: "DM Sans", Arial, Helvetica, sans-serif;
|
||
}
|
||
|
||
/* =============================================================================
|
||
A.2 · BASE (theme-unabhängig — User-Theme)
|
||
============================================================================= */
|
||
:root {
|
||
--cp-user-font: var(--cp-user-brand-font);
|
||
|
||
--cp-user-radius-sm: 6px;
|
||
--cp-user-radius-md: 8px;
|
||
--cp-user-radius-lg: 12px;
|
||
--cp-user-radius-xl: 16px;
|
||
--cp-user-radius-pill: 999px;
|
||
|
||
--cp-user-space-1: 0.25rem;
|
||
--cp-user-space-2: 0.5rem;
|
||
--cp-user-space-3: 0.75rem;
|
||
--cp-user-space-4: 1rem;
|
||
--cp-user-space-5: 1.25rem;
|
||
--cp-user-space-6: 1.5rem;
|
||
--cp-user-space-8: 2rem;
|
||
|
||
--cp-user-transition: 160ms ease;
|
||
}
|
||
|
||
/* =============================================================================
|
||
A.3 · SEMANTIK (hell + dunkel via light-dark — User-Theme)
|
||
----------------------------------------------------------------------------
|
||
light-dark(HELL, DUNKEL) liefert automatisch den passenden Wert, sobald
|
||
color-scheme aktiv ist. Reihenfolge der Argumente: immer HELL zuerst.
|
||
============================================================================= */
|
||
:root {
|
||
/* --- Flächen & Hintergründe ------------------------------------------- */
|
||
--cp-user-bg: light-dark(#f5f7f8, #0f1518); /* Seitenhintergrund */
|
||
--cp-user-surface: light-dark(#ffffff, #161f22); /* Karten, Header, Formulare */
|
||
--cp-user-surface-alt: light-dark(#f0f5f6, #1d272b); /* neutrale Chips, abgesetzt */
|
||
|
||
/* --- Text -------------------------------------------------------------- */
|
||
--cp-user-text: light-dark(#253033, #e8eef0); /* Haupttext */
|
||
--cp-user-muted: light-dark(#66777c, #9fb1b5); /* Zusatz-/Meta-Text */
|
||
--cp-user-faint: light-dark(#9aabad, #6b7c80); /* inaktiv, sehr leise */
|
||
|
||
/* --- Linien ------------------------------------------------------------ */
|
||
--cp-user-line: light-dark(rgba(37, 48, 51, 0.13), rgba(232, 238, 240, 0.14));
|
||
|
||
/* --- Markenfarben (Buttons, aktive Zustände) -------------------------- */
|
||
--cp-user-teal: var(--cp-user-brand-primary);
|
||
--cp-user-red: var(--cp-user-brand-accent);
|
||
|
||
/* "dark"-Varianten = starke Akzent-/Textfarbe. Im Dunkelmodus heller,
|
||
damit sie auf dunklem Grund lesbar bleibt. */
|
||
--cp-user-teal-dark: light-dark(var(--cp-user-brand-primary-strong), #5fd0d4);
|
||
--cp-user-red-dark: light-dark(var(--cp-user-brand-accent-strong), #ff6b73);
|
||
|
||
/* --- Getönte Flächen (aus der Markenfarbe abgeleitet) ----------------- */
|
||
--cp-user-teal-soft: light-dark(
|
||
color-mix(in srgb, var(--cp-user-brand-primary) 14%, white),
|
||
color-mix(in srgb, var(--cp-user-brand-primary) 26%, transparent)
|
||
);
|
||
--cp-user-red-soft: light-dark(
|
||
color-mix(in srgb, var(--cp-user-brand-accent) 12%, white),
|
||
color-mix(in srgb, var(--cp-user-brand-accent) 26%, transparent)
|
||
);
|
||
|
||
/* --- Info (sekundäre Infoflächen) -------------------------------------- */
|
||
--cp-user-info: light-dark(#2b86c5, #6fb7e6);
|
||
--cp-user-blue-soft: light-dark(#dff4fb, color-mix(in srgb, #4aa3dd 22%, transparent));
|
||
|
||
/* --- Fokus-Ring (aus der Markenfarbe abgeleitet) ---------------------- */
|
||
--cp-user-focus: light-dark(
|
||
color-mix(in srgb, var(--cp-user-brand-primary) 34%, transparent),
|
||
color-mix(in srgb, var(--cp-user-brand-primary) 55%, transparent)
|
||
);
|
||
|
||
/* --- Schatten --------------------------------------------------------- */
|
||
--cp-user-shadow-color: light-dark(rgba(20, 52, 58, 0.12), rgba(0, 0, 0, 0.55));
|
||
--cp-user-shadow-sm: 0 1px 3px var(--cp-user-shadow-color);
|
||
--cp-user-shadow-md: 0 10px 28px var(--cp-user-shadow-color);
|
||
|
||
/* --- Status-Mapping (semantisch, für Badges/Hinweise) ----------------- */
|
||
/* Türkis = offen/bestätigt/verfügbar · Rot = dringend/Vertretung ·
|
||
Neutral = Info/intern/erledigt. */
|
||
--cp-user-status-ok-bg: var(--cp-user-teal-soft);
|
||
--cp-user-status-ok-text: var(--cp-user-teal-dark);
|
||
--cp-user-status-urgent-bg: var(--cp-user-red-soft);
|
||
--cp-user-status-urgent-text: var(--cp-user-red-dark);
|
||
--cp-user-status-neutral-bg: var(--cp-user-surface-alt);
|
||
--cp-user-status-neutral-text: var(--cp-user-muted);
|
||
}
|
||
|
||
/* #############################################################################
|
||
TEIL B · ADMIN-THEME (Sidebar-Verwaltungsoberfläche, Desktop + mobiles
|
||
Off-Canvas-Menü). Eigener, vollständig getrennter Tokensatz — bewusst kein
|
||
Vermischen mit den User-Tokens, damit ein Team beide Looks unabhängig
|
||
pflegen oder austauschen kann.
|
||
############################################################################# */
|
||
|
||
/* =============================================================================
|
||
B.1 · BRAND (pro Mandant überschreiben — Admin-Theme)
|
||
----------------------------------------------------------------------------
|
||
Quelle: "Checkpoint Koeln UI Corporate Design". Ein zweites Team ersetzt
|
||
nur diesen Block plus die Schrift-Imports oben in der Datei.
|
||
============================================================================= */
|
||
:root {
|
||
--cp-admin-brand-navy: #1b1f30; /* Sidebar, Tabellenkopf */
|
||
--cp-admin-brand-navy-soft: #252a3d; /* Sidebar-Trenner, dunkler Hover */
|
||
--cp-admin-brand-teal: #01b2bb; /* Hauptmarkenfarbe, aktive Nav */
|
||
--cp-admin-brand-teal-ui: #11b6c9; /* Primärbuttons, Floating Actions */
|
||
--cp-admin-brand-teal-dark: #139ead; /* Hover, aktive Buttons */
|
||
--cp-admin-brand-yellow: #fbef1f; /* Sidebar-Icons, Markenhighlight */
|
||
--cp-admin-brand-pink: #e6037f; /* Logo-/Markenakzent */
|
||
--cp-admin-brand-red: #e62143; /* Fehler, Abbruch, Warnung */
|
||
--cp-admin-brand-red-dark: #c80f3d; /* Danger-Buttons, Hover */
|
||
--cp-admin-brand-orange: #f59e18; /* sekundäre Hinweise */
|
||
--cp-admin-brand-green: #168a2d; /* Erfolg, verfügbar, bestätigt */
|
||
--cp-admin-brand-font-display: "Alfa Slab One", "Roboto Slab", Georgia, serif;
|
||
--cp-admin-brand-font-ui: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
|
||
}
|
||
|
||
/* =============================================================================
|
||
B.2 · BASE (theme-unabhängig — Admin-Theme)
|
||
============================================================================= */
|
||
:root {
|
||
--cp-admin-font-display: var(--cp-admin-brand-font-display);
|
||
--cp-admin-font-ui: var(--cp-admin-brand-font-ui);
|
||
--cp-admin-font-mono: "Roboto Mono", Consolas, monospace;
|
||
|
||
--cp-admin-radius-sm: 6px;
|
||
--cp-admin-radius-md: 10px;
|
||
--cp-admin-radius-lg: 14px;
|
||
|
||
--cp-admin-space-1: 4px;
|
||
--cp-admin-space-2: 8px;
|
||
--cp-admin-space-3: 12px;
|
||
--cp-admin-space-4: 16px;
|
||
--cp-admin-space-5: 24px;
|
||
--cp-admin-space-6: 32px;
|
||
|
||
--cp-admin-sidebar-width: 260px;
|
||
--cp-admin-transition: 160ms ease;
|
||
}
|
||
|
||
/* =============================================================================
|
||
B.3 · SEMANTIK (hell + dunkel via light-dark — Admin-Theme)
|
||
----------------------------------------------------------------------------
|
||
Das Quelldokument beschreibt nur einen hellen Look (helle Arbeitsfläche +
|
||
dunkle Sidebar). Die Sidebar bleibt darum in BEIDEN Modi dunkel (Navy) —
|
||
das ist so gewollt, sie ist ja schon das "dunkle Element" im Hellmodus.
|
||
Im Dunkelmodus wird nur die Arbeitsfläche dunkler, die Sidebar bleibt das
|
||
immer gleiche Marken-Navy. So muss am Logo/Sidebar-Look nichts wechseln.
|
||
============================================================================= */
|
||
:root {
|
||
/* --- Sidebar (in beiden Themes gleich dunkel = Markenelement) ---------- */
|
||
--cp-admin-sidebar-bg: var(--cp-admin-brand-navy);
|
||
--cp-admin-sidebar-hover: var(--cp-admin-brand-navy-soft);
|
||
--cp-admin-sidebar-text: light-dark(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92));
|
||
--cp-admin-sidebar-text-muted: light-dark(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
|
||
--cp-admin-sidebar-icon: var(--cp-admin-brand-yellow);
|
||
--cp-admin-sidebar-active-bg: var(--cp-admin-brand-teal);
|
||
--cp-admin-sidebar-active-text: #ffffff;
|
||
|
||
/* --- Arbeitsfläche & Flächen -------------------------------------------- */
|
||
--cp-admin-bg: light-dark(#f5f7fa, #0e1320); /* Seitenhintergrund */
|
||
--cp-admin-bg-cool: light-dark(#f5fafb, #0c1722); /* kühlerer Arbeitsbereich */
|
||
--cp-admin-surface: light-dark(#ffffff, #161c2b); /* Karten, Panels, Formulare */
|
||
--cp-admin-surface-soft: light-dark(#eef9fb, #16242c); /* Panel-Header, Akkordeons */
|
||
|
||
/* --- Text ---------------------------------------------------------------- */
|
||
--cp-admin-text: light-dark(#1f2b37, #e6ecf1); /* Haupttext */
|
||
--cp-admin-heading: light-dark(#090b10, #f5f8fa); /* Seitentitel, starke Headlines */
|
||
--cp-admin-muted: light-dark(#6e8190, #93a3b0); /* Labels, Meta-Informationen */
|
||
--cp-admin-muted-2: light-dark(#9ba7b1, #6b7a85); /* inaktive Icons, sehr leise */
|
||
|
||
/* --- Linien --------------------------------------------------------------- */
|
||
--cp-admin-line: light-dark(#d6e6ec, rgba(214, 230, 236, 0.18)); /* Rahmen, Input-Borders */
|
||
--cp-admin-line-soft: light-dark(#e8eef2, rgba(214, 230, 236, 0.1)); /* Tabellenlinien */
|
||
|
||
/* --- Markenfarben (Buttons, aktive Zustände, in beiden Themes gleich) --- */
|
||
--cp-admin-teal: var(--cp-admin-brand-teal);
|
||
--cp-admin-teal-ui: var(--cp-admin-brand-teal-ui);
|
||
--cp-admin-teal-dark: light-dark(var(--cp-admin-brand-teal-dark), #5fd6e0);
|
||
--cp-admin-teal-soft: light-dark(
|
||
color-mix(in srgb, var(--cp-admin-brand-teal) 10%, white),
|
||
color-mix(in srgb, var(--cp-admin-brand-teal) 24%, transparent)
|
||
);
|
||
|
||
--cp-admin-pink: var(--cp-admin-brand-pink);
|
||
|
||
--cp-admin-red: var(--cp-admin-brand-red);
|
||
--cp-admin-red-dark: light-dark(var(--cp-admin-brand-red-dark), #ff7a93);
|
||
--cp-admin-red-soft: light-dark(
|
||
color-mix(in srgb, var(--cp-admin-brand-red) 10%, white),
|
||
color-mix(in srgb, var(--cp-admin-brand-red) 24%, transparent)
|
||
);
|
||
|
||
--cp-admin-orange: var(--cp-admin-brand-orange);
|
||
--cp-admin-orange-soft: light-dark(
|
||
color-mix(in srgb, var(--cp-admin-brand-orange) 12%, white),
|
||
color-mix(in srgb, var(--cp-admin-brand-orange) 24%, transparent)
|
||
);
|
||
|
||
--cp-admin-green: var(--cp-admin-brand-green);
|
||
--cp-admin-green-soft: light-dark(#e5f5e6, color-mix(in srgb, var(--cp-admin-brand-green) 24%, transparent));
|
||
|
||
/* --- Fokus-Ring ------------------------------------------------------------ */
|
||
--cp-admin-focus: light-dark(
|
||
color-mix(in srgb, var(--cp-admin-brand-teal) 34%, transparent),
|
||
color-mix(in srgb, var(--cp-admin-brand-teal) 55%, transparent)
|
||
);
|
||
|
||
/* --- Schatten ---------------------------------------------------------- */
|
||
--cp-admin-shadow-color: light-dark(rgba(27, 31, 48, 0.06), rgba(0, 0, 0, 0.5));
|
||
--cp-admin-shadow-soft: 0 2px 8px var(--cp-admin-shadow-color);
|
||
--cp-admin-shadow-action: light-dark(0 4px 10px rgba(1, 178, 187, 0.25), 0 4px 10px rgba(1, 178, 187, 0.35));
|
||
|
||
/* --- Chip/Badge-Status (Text immer mitgeben, nie nur Farbe) ------------- */
|
||
--cp-admin-status-neutral-bg: light-dark(#e9eef2, color-mix(in srgb, var(--cp-admin-muted-2) 22%, transparent));
|
||
--cp-admin-status-neutral-text: var(--cp-admin-text);
|
||
--cp-admin-status-success-bg: var(--cp-admin-green-soft);
|
||
--cp-admin-status-success-text: var(--cp-admin-green);
|
||
--cp-admin-status-info-bg: var(--cp-admin-teal-soft);
|
||
--cp-admin-status-info-text: var(--cp-admin-teal-dark);
|
||
--cp-admin-status-warning-bg: var(--cp-admin-orange-soft);
|
||
--cp-admin-status-warning-text: light-dark(#8a5a0a, #ffc169);
|
||
--cp-admin-status-error-bg: var(--cp-admin-red-soft);
|
||
--cp-admin-status-error-text: var(--cp-admin-red-dark);
|
||
}
|
||
|
||
/* #############################################################################
|
||
TEIL C · GLOBALE STEUERUNG (gilt für beide Themes)
|
||
############################################################################# */
|
||
|
||
/* =============================================================================
|
||
C.1 · Hell/Dunkel aktivieren + manueller Override
|
||
----------------------------------------------------------------------------
|
||
Setzt das Attribut data-theme die color-scheme fest, "gewinnt" diese gegen
|
||
die Systemeinstellung – ganz ohne doppelte Token-Definitionen.
|
||
Ein späterer Umschalter müsste nur document.documentElement.dataset.theme
|
||
setzen (winziges Vanilla-JS, Future Log).
|
||
============================================================================= */
|
||
:root {
|
||
color-scheme: light dark;
|
||
}
|
||
:root[data-theme="light"] { color-scheme: light; }
|
||
:root[data-theme="dark"] { color-scheme: dark; }
|
||
|
||
/* =============================================================================
|
||
C.2 · Shell-Auswahl
|
||
----------------------------------------------------------------------------
|
||
Jede Shell-Vorlage setzt auf ihrem Wurzelelement eine der beiden Klassen.
|
||
So lesen Komponenten in jeder Shell automatisch die richtigen Tokens, ohne
|
||
dass irgendwo "user" oder "admin" hartkodiert werden muss:
|
||
|
||
<body class="cp-shell-user"> → in base_user.html
|
||
<body class="cp-shell-admin"> → in base_admin.html
|
||
|
||
Innerhalb von components.css kann dadurch z. B. .cp-shell-user .cp-card
|
||
bzw. .cp-shell-admin .cp-card jeweils ihre eigenen Tokens nutzen, falls
|
||
geteilte Klassennamen je Shell unterschiedlich aussehen sollen.
|
||
============================================================================= */
|
||
.cp-shell-user {
|
||
background: var(--cp-user-bg);
|
||
color: var(--cp-user-text);
|
||
font-family: var(--cp-user-font);
|
||
}
|
||
|
||
.cp-shell-admin {
|
||
background: var(--cp-admin-bg);
|
||
color: var(--cp-admin-text);
|
||
font-family: var(--cp-admin-font-ui);
|
||
}
|
||
|
||
html {
|
||
color-scheme: inherit;
|
||
}
|