/* ============================================================ BaseCamp Partnerportal — Token-Schicht (Register „Portal/Hell") ------------------------------------------------------------ Diese Datei ist KEINE eigene Farbquelle mehr. Die kanonischen Design-Tokens stammen 1:1 aus dem FinanzRanger Design System und liegen unter ./ds/ (NICHT editieren — Quelle ist kanonisch). Hier stehen AUSSCHLIESSLICH portal-/app-spezifische Ergaenzungen, die das Design System bewusst offen laesst: - Layout-Tokens der App-Shell (Sidebar/Top-Bar/Content) - sichtbarer Tastatur-Fokus-Ring (a11y) - semantische Status-Flaechen fuer das helle Register (5-Stufen-Partneransicht — abgeleitet aus den DS-Badge-Tonen) - eine App-Erweiterung „Fehler/Rot" (das DS definiert KEINE kanonische Fehlerfarbe — daher hier, klar markiert) - Dichte-Umschalter (kompakt) Regel: KEINE DS-Farbwerte duplizieren. Brand-Farben werden ueber var(--fr-*) referenziert; nur funktionale rgba()-Tonungen (z. B. transluzente Pill-Flaechen) werden hier abgeleitet. Leitsatz (DS): „Blau fuehrt, Gold leitet, Gruen ist der Pfad." - Blau traegt jede Flaeche · Gold ist Akzent/Hairline/EIN CTA-Moment (nie Lesefarbe, nie grosse Flaeche) · Gruen ist Chance/Fortschritt. - Die Sidebar bleibt DUNKEL Navy als Kontrast-Anker (DS-Portal-README: „dark navy nav"); der Rest der App ist hell. ============================================================ */ /* 1) Kanonische DS-Tokens importieren (Reihenfolge wie im DS styles.css). Die @import-Regeln muessen vor allen anderen Regeln stehen. */ @import url("ds/colors.css"); @import url("ds/typography.css"); @import url("ds/spacing.css"); @import url("ds/effects.css"); :root { /* --------------------------------------------------------- 2) LAYOUT — App-Shell (nicht im DS; app-spezifisch) --------------------------------------------------------- */ --sidebar-w: 248px; /* Breite der dunklen Navy-Sidebar (DS-Portal: 248) */ --topbar-h: 72px; /* Hoehe der hellen Top-Bar */ --content-max: 1200px; /* max. Inhaltsbreite (App ist breiter als DS-Marketing-Container) */ /* --------------------------------------------------------- 3) FOKUS-RING — a11y (sichtbar auf hell UND auf der Navy-Sidebar) Doppelring: weisser Halo + Pinie, damit der Fokus auf jedem Untergrund (weiss, Eisblau, Navy, Gold-CTA) klar erkennbar ist. --------------------------------------------------------- */ --focus-ring: 0 0 0 2px var(--fr-white), 0 0 0 4px var(--fr-pine); --focus-ring-on-dark: 0 0 0 2px var(--fr-navy), 0 0 0 4px var(--fr-gold); /* --------------------------------------------------------- 4) KPI/Stat-Wertgroesse (App-Dichte etwas kompakter als DS-StatCard 40px) --------------------------------------------------------- */ --fs-stat: 34px; /* --------------------------------------------------------- 5) SIDEBAR (dunkler Navy-Kontext) — Text-/Flaechen-Helfer. Nutzt die DS-Aliase fuer „auf dunkel"; die fainteren Stufen sind app-spezifisch (Label/Hover/Aktiv-Flaeche der Navy-Nav). --------------------------------------------------------- */ --sidebar-bg: var(--fr-navy); --sidebar-text: var(--text-on-dark-muted); /* Navi-Eintrag ruhend */ --sidebar-text-strong: var(--text-on-dark); /* Navi-Eintrag aktiv */ --sidebar-label: rgba(238, 244, 251, .42); /* Gruppen-Label */ --sidebar-item-hover: rgba(255, 255, 255, .06); /* Hover-Flaeche */ --sidebar-item-active: rgba(255, 255, 255, .08); /* Aktiv-Flaeche */ --sidebar-card-bg: rgba(255, 255, 255, .05); /* User-Karte unten */ /* --------------------------------------------------------- 6) STATUS-FLAECHEN — 5-Stufen-Partneransicht im HELLEN Register. Tonzuordnung exakt nach DS-Badge (active=green, due=gold, new=navy): eingereicht -> Navy (neu) in Pruefung -> Gold (faellig/Aufmerksamkeit) Unterlagen fehlen -> Gold (faellig/Aufmerksamkeit) in Bearbeitung -> Gruen (Fortschritt) abgeschlossen -> Gruen (Fortschritt) Flaechen sind HELLE Tints (kein dunkles rgba) mit farbigem Punkt + lesbarem Text. fg-Werte sind die dunklen, kontraststarken Lesevarianten der jeweiligen Brand-Farbe. --------------------------------------------------------- */ /* Navy-Ton (eingereicht / neu) */ --pill-navy-bg: rgba(14, 39, 71, .08); --pill-navy-fg: var(--fr-blue); --pill-navy-dot: var(--fr-blue); /* Gold-Ton (in Pruefung · Unterlagen fehlen / faellig) */ --pill-gold-bg: rgba(201, 161, 78, .14); --pill-gold-fg: #8A6A1F; /* dunkles, lesbares Gold (Text auf hell) */ --pill-gold-dot: var(--fr-gold); /* Gruen-Ton (in Bearbeitung · abgeschlossen / Fortschritt) */ --pill-green-bg: rgba(47, 196, 137, .14); --pill-green-fg: var(--fr-pine); --pill-green-dot: var(--fr-signal); /* Neutral-Ton (Reserve, z. B. „inaktiv") */ --pill-neutral-bg: rgba(90, 100, 120, .12); --pill-neutral-fg: var(--fr-muted); --pill-neutral-dot: var(--fr-muted); /* Semantische 5-Stufen-Aliase (zeigen die Tonzuordnung explizit; genutzt von den .fr-pill--*-Klassen in components.css). */ --status-eingereicht-bg: var(--pill-navy-bg); --status-eingereicht-fg: var(--pill-navy-fg); --status-eingereicht-dot: var(--pill-navy-dot); --status-pruefung-bg: var(--pill-gold-bg); --status-pruefung-fg: var(--pill-gold-fg); --status-pruefung-dot: var(--pill-gold-dot); --status-fehlt-bg: var(--pill-gold-bg); --status-fehlt-fg: var(--pill-gold-fg); --status-fehlt-dot: var(--pill-gold-dot); --status-bearbeitung-bg: var(--pill-green-bg); --status-bearbeitung-fg: var(--pill-green-fg); --status-bearbeitung-dot: var(--pill-green-dot); --status-abgeschlossen-bg: var(--pill-green-bg); --status-abgeschlossen-fg: var(--pill-green-fg); --status-abgeschlossen-dot: var(--pill-green-dot); /* --------------------------------------------------------- 7) DOKUMENT-HERKUNFT (Badge KI / manuell / VB) — helle Tints --------------------------------------------------------- */ --badge-ki-bg: rgba(28, 76, 143, .08); --badge-ki-fg: #1C4C8F; /* ruhiges Blau (KI-Vorschlag) */ --badge-ki-line: rgba(28, 76, 143, .22); /* --------------------------------------------------------- 8) APP-ERWEITERUNG: Fehler/Rot. Das Design System definiert KEINE kanonische Fehlerfarbe. Diese Werte sind eine bewusste, klar markierte App-Erweiterung fuer Fehler-Banner / „abgelehnt/Sperre". Bei Aufnahme ins DS hierher zuruecksynchronisieren. --------------------------------------------------------- */ --fr-danger: #C0392B; --fr-danger-bg: rgba(192, 57, 43, .08); --fr-danger-line: rgba(192, 57, 43, .28); /* --------------------------------------------------------- 9) GESAMTBILD-DOTS (DS GesamtbildDots): on-track=gruen, faellig=gold, offen=gedaempft (auf hell). --------------------------------------------------------- */ --dot-done: var(--fr-signal); --dot-due: var(--fr-gold); --dot-empty: rgba(14, 39, 71, .14); } /* ------------------------------------------------------------ 10) Dichte „Kompakt" (persistierbarer Toggle). Setzt die Vertikalrhythmen eine Stufe enger. Aktivierung: oder .density-compact ------------------------------------------------------------ */ [data-density="kompakt"], .density-compact { --sp-3: 10px; --sp-4: 14px; --sp-5: 20px; --topbar-h: 60px; --fs-stat: 30px; }