/* ============================================================ SERWIS MANAGER — TOKENY MOTYWU Jedna lista nazw, dwa zestawy wartości. Przełącznik ustawia data-theme na ; komponent NIE WIE, w którym motywie żyje — czyta tylko nazwę tokenu. Zasady (z docs/24 i pliku wejściowego właściciela): 1. Status = zawsze trójka bg / bd / tx, nigdy sam kolorowy tekst na białym. 2. Pomarańcz (--accent) to nawigacja i marka — nigdy status. 3. Czerwień (--danger) tylko dla problemów: opóźnienia, braki, anulowanie. Kolory statusów są ATRYBUTEM SŁOWNIKA STATUSY (pole `kolor`), nie klasą CSS wpisaną w komponent. ============================================================ */ /* Brak atrybutu = motyw jasny. Dzięki temu strona ma komplet tokenów także zanim React ustawi data-theme (inaczej pierwsze malowanie byłoby bez kolorów). */ :root, :root[data-theme="light"] { /* --- FUNDAMENT --- */ --bg: #F7F8FA; --surface-1: #FFFFFF; --surface-2: #F0F2F5; --surface-3: #E9EBEF; --border: #E3E6EC; --border-2: #C9CFD9; --text: #1A1D23; --text-2: #5B6472; --text-3: #8B93A1; /* --- AKCJE I MARKA --- */ --accent: #E85D04; --accent-hover: #C25404; --accent-bg: #FDF1E9; --primary: #2563D9; --primary-hover: #1D4FB8; --primary-bg: #E9F0FC; /* --- SEMANTYCZNE --- */ --success: #1F7A3D; --success-bg: #E8F6EC; --warning: #9A6B10; --warning-bg: #FFF4E0; --danger: #B3392C; --danger-bg: #FCEAE8; --info: #2E5FA3; --info-bg: #E9F0FC; /* --- STATUSY ZLECEŃ (bg / bd / tx) --- */ --st-szkic-bg: #F0F2F5; --st-szkic-bd: #C9CFD9; --st-szkic-tx: #5B6472; --st-wycena-bg: #EEE9FA; --st-wycena-bd: #C4B5E8; --st-wycena-tx: #6B4FA8; --st-zaplanowane-bg: #E9F0FC; --st-zaplanowane-bd: #A8C4E8; --st-zaplanowane-tx: #2E5FA3; --st-realizacja-bg: #FFF4E0; --st-realizacja-bd: #E8C89A; --st-realizacja-tx: #9A6B10; --st-rozszerzenie-bg: #FBEAF3; --st-rozszerzenie-bd: #E5A8C8; --st-rozszerzenie-tx: #A83A6E; --st-jazda-bg: #E5F3F8; --st-jazda-bd: #A0CFE0; --st-jazda-tx: #1F6B8A; --st-wykonane-bg: #E8F6EC; --st-wykonane-bd: #A9D9B8; --st-wykonane-tx: #1F7A3D; --st-rozliczenie-bg: #FDF6DC; --st-rozliczenie-bd: #E0D08A; --st-rozliczenie-tx: #8A7410; --st-wydanie-bg: #E8F6EC; --st-wydanie-bd: #A9D9B8; --st-wydanie-tx: #1F7A3D; --st-zakonczone-bg: #F0F2F5; --st-zakonczone-bd: #E3E6EC; --st-zakonczone-tx: #8B93A1; --st-anulowane-bg: #FCEAE8; --st-anulowane-bd: #E5AFA8; --st-anulowane-tx: #B3392C; /* --- STATUSY PDI --- */ --st-skrzynia-bg: #F0F2F5; --st-skrzynia-bd: #C9CFD9; --st-skrzynia-tx: #5B6472; --st-pdi-toku-bg: #FFF4E0; --st-pdi-toku-bd: #E8C89A; --st-pdi-toku-tx: #9A6B10; --st-ekspozycja-bg: #E9F0FC; --st-ekspozycja-bd: #A8C4E8; --st-ekspozycja-tx: #2E5FA3; --st-gotowy-wyd-bg: #E8F6EC; --st-gotowy-wyd-bd: #A9D9B8; --st-gotowy-wyd-tx: #1F7A3D; --st-wydany-bg: #F0F2F5; --st-wydany-bd: #E3E6EC; --st-wydany-tx: #8B93A1; /* --- OŚ CZĘŚCI --- */ --czesci-komplet: #1F7A3D; --czesci-komplet-bg: #E8F6EC; --czesci-w-drodze: #9A6B10; --czesci-w-drodze-bg: #FFF4E0; --czesci-braki: #B3392C; --czesci-braki-bg: #FCEAE8; /* --- DYWIZJE --- */ --dyw-moto: #2E5FA3; --dyw-atv: #D97E1A; --dyw-pwc: #4AA3D0; --dyw-marine: #2E8A78; /* --- MARKI --- */ --brand-ktm: #E85D04; --brand-ktm-tx: #FFFFFF; --brand-hqv: #273A60; --brand-hqv-tx: #FFFFFF; --brand-gg: #C8102E; --brand-gg-tx: #FFFFFF; --brand-yam: #2E5FA3; --brand-yam-tx: #FFFFFF; /* --- POZOSTAŁE --- */ --badge-gwar-bg: #FBEAD9; --badge-gwar-tx: #9A5B10; --shadow-1: 0 1px 3px rgba(20,26,40,.05); --shadow-2: 0 8px 28px rgba(20,26,40,.08); --focus-ring: 0 0 0 3px rgba(37,99,217,.25); --overlay: rgba(26,29,35,.45); } /* ============================================================ SERWIS MANAGER — CIEMNY MOTYW: komplet tokenów Lustro light_theme_tokens.css — te same nazwy, ciemne wartości. Zasady dark: 1. Baza to grafit z chłodnym tonem, nie czysta czerń (#000). 2. Tekst to złamana biel, nie #FFF (halacja). 3. Głębia przez rozjaśnianie powierzchni, nie cienie. 4. Akcenty zdesaturowane ~15% względem light; statusy jako ciemne wypełnienia + jaśniejszy tekst (trójki bg/bd/tx). 5. Pomarańcz tylko nawigacja/marka; czerwień tylko problemy. ============================================================ */ :root[data-theme="dark"] { /* --- FUNDAMENT --- */ --bg: #14161B; /* tło główne, lekko chłodne */ --surface-1: #1B1E24; /* karty, tabele, sidebar */ --surface-2: #232730; /* hover wierszy, chipy nieaktywne, modale */ --surface-3: #2A2F3A; /* wciśnięte/aktywne tło, zebra w tabelach */ --border: #2E333D; /* obramowania standardowe */ --border-2: #3D4450; /* obramowania aktywne / focus */ --text: #E4E6EA; /* tekst główny (nie czysta biel) */ --text-2: #9AA0AB; /* drugorzędny: podpisy, meta */ --text-3: #6B7280; /* trzeciorzędny: placeholdery, disabled */ /* --- AKCJE I MARKA --- */ --accent: #F27A33; /* pomarańcz KTM, -15% nasycenia vs light */ --accent-hover: #F58F52; /* w dark hover = JAŚNIEJ, nie ciemniej */ --accent-bg: #33241A; /* ciemne tło aktywnej pozycji sidebaru */ --primary: #3D7BE0; /* przyciski główne — rozjaśniony niebieski */ --primary-hover: #5A91E8; --primary-bg: #1C2536; /* tła informacyjne, zaznaczenia */ /* --- SEMANTYCZNE (alerty, walidacje, oś części) --- */ --success: #6FCE93; --success-bg: #1D2B22; /* komplet, testy ok */ --warning: #E8B25C; --warning-bg: #2B241C; /* w drodze, zbliża się termin */ --danger: #E08A82; --danger-bg: #2E1E1E; /* braki, opóźnione, odmowy */ --info: #7BA7E0; --info-bg: #1C2536; /* neutralne powiadomienia */ /* --- STATUSY ZLECEŃ (trójki: bg / border / text) --- */ --st-szkic-bg: #232730; --st-szkic-bd: #3D4450; --st-szkic-tx: #9AA0AB; --st-wycena-bg: #262133; --st-wycena-bd: #4A3D6B; --st-wycena-tx: #B39DE0; --st-zaplanowane-bg: #1C2536; --st-zaplanowane-bd: #35507A; --st-zaplanowane-tx: #7BA7E0; --st-realizacja-bg: #2B241C; --st-realizacja-bd: #6B5433; --st-realizacja-tx: #E8B25C; --st-rozszerzenie-bg: #2E1F28; --st-rozszerzenie-bd: #6B3D57; --st-rozszerzenie-tx: #DE8FB5; --st-jazda-bg: #1A272E; --st-jazda-bd: #33586B; --st-jazda-tx: #7BC0DE; --st-wykonane-bg: #1D2B22; --st-wykonane-bd: #3D6B4D; --st-wykonane-tx: #6FCE93; --st-rozliczenie-bg: #2B2818; --st-rozliczenie-bd: #6B6133; --st-rozliczenie-tx: #D9C46A; --st-wydanie-bg: #1D2B22; --st-wydanie-bd: #3D6B4D; --st-wydanie-tx: #6FCE93; --st-zakonczone-bg: #1F2228; --st-zakonczone-bd: #2E333D; --st-zakonczone-tx: #6B7280; --st-anulowane-bg: #2E1E1E; --st-anulowane-bd: #7A4540; --st-anulowane-tx: #E08A82; /* --- STATUSY PDI (trójki) --- */ --st-skrzynia-bg: #232730; --st-skrzynia-bd: #3D4450; --st-skrzynia-tx: #9AA0AB; --st-pdi-toku-bg: #2B241C; --st-pdi-toku-bd: #6B5433; --st-pdi-toku-tx: #E8B25C; --st-ekspozycja-bg: #1C2536; --st-ekspozycja-bd: #35507A; --st-ekspozycja-tx: #7BA7E0; --st-gotowy-wyd-bg: #1D2B22; --st-gotowy-wyd-bd: #3D6B4D; --st-gotowy-wyd-tx: #6FCE93; --st-wydany-bg: #1F2228; --st-wydany-bd: #2E333D; --st-wydany-tx: #6B7280; /* --- OŚ CZĘŚCI --- */ --czesci-komplet: #6FCE93; --czesci-komplet-bg: #1D2B22; --czesci-w-drodze: #E8B25C; --czesci-w-drodze-bg: #2B241C; --czesci-braki: #E08A82; --czesci-braki-bg: #2E1E1E; /* --- DYWIZJE (wykresy, filtry, ikony) --- */ --dyw-moto: #5B8AC7; /* granat rozjaśniony */ --dyw-atv: #E09A4A; /* bursztyn */ --dyw-pwc: #6BB8DE; /* błękit */ --dyw-marine: #52B39E; /* morska zieleń */ /* --- MARKI (plakietki — ciemny tekst na kolorze) --- */ --brand-ktm: #F27A33; --brand-ktm-tx: #14161B; --brand-hqv: #4A6291; --brand-hqv-tx: #E4E6EA; --brand-gg: #D14A5E; --brand-gg-tx: #14161B; --brand-yam: #5B8AC7; --brand-yam-tx: #14161B; /* --- POZOSTAŁE --- */ --badge-gwar-bg: #33281C; --badge-gwar-tx: #E0A860; /* plakietka GWAR */ --shadow-1: none; /* dark: głębia powierzchnią, nie cieniem */ --shadow-2: 0 12px 40px rgba(0,0,0,.5); /* tylko modale/drawery nad treścią */ --focus-ring: 0 0 0 3px rgba(90,145,232,.35); /* focus klawiaturowy */ --overlay: rgba(8,10,14,.65); /* tło pod modalem */ } /* ============================================================ WARSTWA ZGODNOŚCI — stare nazwy tokenów wskazują na nowe. var() rozwiązuje się w miejscu użycia, więc wystarczy jeden blok: aliasy same idą za motywem. Dzięki temu 40 plików widoku nie musi zmieniać się w jednym commicie, a nowy kod pisze się już nowymi nazwami. Docelowo ta sekcja znika. ============================================================ */ :root { --surf-page: var(--bg); --surf-0: var(--surface-1); --surf-1: var(--surface-2); --surf-2: var(--surface-2); --surf-3: var(--surface-3); --surf-sidebar: var(--surface-1); --surf-overlay: var(--overlay); --sidebar-text: var(--text); --sidebar-text-2: var(--text-2); --sidebar-line: var(--border); --sidebar-hover: var(--surface-2); --sidebar-active: var(--accent-bg); --line-1: var(--border); --line-2: var(--border-2); --line-strong: var(--text); --text-1: var(--text); --text-inv: #FFFFFF; --text-on-dark: #FFFFFF; --text-on-dark-2: #AEB4C0; /* Stary --accent znaczył „akcja główna" (niebieski), a pomarańcz siedział pod --orange. Nowy podział: --primary to akcja, --accent to marka. */ --accent-hover-legacy: var(--primary-hover); --accent-tint: var(--primary-bg); --orange: var(--accent); --orange-tint: var(--accent-bg); --sem-error: var(--danger); --sem-error-bg: var(--danger-bg); --sem-warn: var(--warning); --sem-warn-bg: var(--warning-bg); --sem-ok: var(--success); --sem-ok-bg: var(--success-bg); --sem-info: var(--info); --sem-info-bg: var(--info-bg); --st-new: var(--st-szkic-tx); --st-new-bg: var(--st-szkic-bg); --st-pickup: var(--st-wycena-tx); --st-pickup-bg: var(--st-wycena-bg); --st-received: var(--st-zaplanowane-tx); --st-received-bg: var(--st-zaplanowane-bg); --st-parts: var(--st-rozszerzenie-tx); --st-parts-bg: var(--st-rozszerzenie-bg); --st-repair: var(--st-realizacja-tx); --st-repair-bg: var(--st-realizacja-bg); --st-test: var(--st-jazda-tx); --st-test-bg: var(--st-jazda-bg); --st-ready: var(--st-wykonane-tx); --st-ready-bg: var(--st-wykonane-bg); --st-delivery: var(--st-rozliczenie-tx); --st-delivery-bg: var(--st-rozliczenie-bg); --st-done: var(--st-zakonczone-tx); --st-done-bg: var(--st-zakonczone-bg); --brand-ktm-bg: var(--accent-bg); --brand-husq: var(--brand-hqv); --brand-husq-bg: var(--surface-2); --brand-gasgas: var(--brand-gg); --brand-gasgas-bg: var(--surface-2); --brand-yamaha: var(--brand-yam); --brand-yamaha-bg: var(--surface-2); --brand-other: var(--text-2); --brand-other-bg: var(--surface-2); --shadow-card: var(--shadow-1); --shadow-pop: var(--shadow-2); --shadow-modal: var(--shadow-2); }