/* * KodUR — tokeny marki i statusów operacyjnych. * Źródło: docs/brand.md (zasady użycia) i docs/PLAN.md §2.4 (paleta zmierzona z logo). * Wszystkie wartości zweryfikowane pod kątem WCAG 2.1 AA — tabela w docs/brand.md. * * Motyw ciemny włącza WYŁĄCZNIE jawny wybór użytkownika: klasa `.dark` na , którą * ustawia BbDarkModeToggle, oraz równoważny atrybut [data-theme="dark"]. Nocny tryb * urządzenia jest świadomie ignorowany (K88) — uzasadnienie na końcu pliku, w miejscu * usuniętego bloku prefers-color-scheme. */ :root { /* ---- Marka: paleta zmierzona z logo (PLAN.md §2.4) ---- */ --kodur-primary: #0C5484; --kodur-primary-dark: #0C3C60; --kodur-primary-light: #3C90C0; --kodur-secondary: #78C0E4; --kodur-accent: #D8B038; --kodur-surface: #F7FBFC; /* ---- Tekst / tło — motyw jasny ---- */ --kodur-bg: var(--kodur-surface); --kodur-bg-elevated: #FFFFFF; --kodur-text: #0A1A26; /* prawie czarny navy — max kontrast na surface */ --kodur-text-muted: #4A5B68; --kodur-text-on-primary: #FFFFFF; --kodur-text-on-accent: var(--kodur-primary-dark); /* biały na accent NIE przechodzi AA — patrz brand.md */ --kodur-border: #D7E4EC; --kodur-link: var(--kodur-primary); --kodur-link-hover: var(--kodur-primary-dark); /* Uwaga: --kodur-secondary i --kodur-accent NIE mają wystarczającego kontrastu jako kolor tekstu na --kodur-surface (patrz tabela WCAG w brand.md) — używaj ich jako tła wypełnień/ikon z ciemnym tekstem, nie jako koloru tekstu na jasnym tle. */ /* ================= Statusy operacyjne (semantyczne, niezależne od marki) ================= */ /* Każdy status: -fill (tło plakietki/karty), -text (kolor tekstu na -fill, AA >= 4.5), -tv (jaśniejszy tint do użycia jako tekst/ikona WPROST na ciemnym tle TV --kodur-primary-dark, AA >= 4.5 na tym tle — patrz tabela w brand.md). */ --kodur-status-awaria-fill: #D6362A; --kodur-status-awaria-text: #FFFFFF; --kodur-status-awaria-tv: #E78B84; --kodur-status-przekroczony-termin-fill: #B35916; --kodur-status-przekroczony-termin-text: #FFFFFF; --kodur-status-przekroczony-termin-tv: #E98E4B; --kodur-status-w-realizacji-fill: #12806F; --kodur-status-w-realizacji-text: #FFFFFF; --kodur-status-w-realizacji-tv: #1ABCA3; --kodur-status-oczekiwanie-na-czesci-fill: #7C4DBF; --kodur-status-oczekiwanie-na-czesci-text: #FFFFFF; --kodur-status-oczekiwanie-na-czesci-tv: #B296D9; --kodur-status-wstrzymane-fill: #64748B; --kodur-status-wstrzymane-text: #FFFFFF; --kodur-status-wstrzymane-tv: #9BA7B7; --kodur-status-zamkniete-fill: #26823F; --kodur-status-zamkniete-text: #FFFFFF; --kodur-status-zamkniete-tv: #37BD5C; --kodur-status-odrzucone-fill: #A3336B; --kodur-status-odrzucone-text: #FFFFFF; --kodur-status-odrzucone-tv: #DB8CB4; /* ================= Krytyczność A/B/C ================= */ --kodur-crit-a-fill: #C81E2C; --kodur-crit-a-text: #FFFFFF; --kodur-crit-a-tv: #ED8A92; --kodur-crit-b-fill: #A16309; --kodur-crit-b-text: #FFFFFF; --kodur-crit-b-tv: #E9900D; --kodur-crit-c-fill: #E8C93C; --kodur-crit-c-text: #0C3C60; /* jedyny status/krytyczność z ciemnym tekstem — żółte tło */ --kodur-crit-c-tv: #E8C93C; } /* ================= Motyw ciemny — wyprowadzony z tej samej palety (PLAN.md §2.4) ================= */ /* Granat jako tło, #78C0E4 jako tekst akcentowy. Statusy/krytyczność używają wariantów -tv, bo są czytane wprost na ciemnym tle (karty w motywie ciemnym, ekran TV/kiosk). T-1494 — `.kodur-tv-scope` NIE jest już częścią tego selektora (była do K135). Będąc tu jako pozycja WŁASNA, obok `.dark`, wymuszała ciemne tokeny BEZWARUNKOWO — dokładnie ten sam kształt usterki co K88 (reguła bez sposobu na WYCOFANIE się do jasnego): kiosk pokazywał się ciemno nawet gdy `` nie miało klasy `.dark` (użytkownik wybrał jasny w MainLayout, ale to nigdy nie docierało do strony kioskowej — patrz osobno komentarz w KioskLayout.razor o braku BbDarkModeToggle na tym layoutcie, teraz naprawionym). `.kodur-tv-scope` zostaje NIŻEJ wyłącznie dla powiększenia font-size (patrz blok "Wariant TV/kiosk") — kolor dziedziczy z tego samego `.dark`/brak-`.dark` na , co reszta aplikacji, zgodnie z K88: motyw ustala WYŁĄCZNIE jawny wybór użytkownika. */ :root[data-theme="dark"], :root[data-theme="tv"], :root.dark { --kodur-bg: var(--kodur-primary-dark); --kodur-bg-elevated: #123A5C; --kodur-text: #EAF4FA; --kodur-text-muted: var(--kodur-secondary); --kodur-text-on-primary: #FFFFFF; --kodur-text-on-accent: var(--kodur-primary-dark); --kodur-border: #1E4E76; --kodur-link: var(--kodur-secondary); --kodur-link-hover: #A6D8F0; --kodur-status-awaria-fill: var(--kodur-status-awaria-tv); --kodur-status-przekroczony-termin-fill: var(--kodur-status-przekroczony-termin-tv); --kodur-status-w-realizacji-fill: var(--kodur-status-w-realizacji-tv); --kodur-status-oczekiwanie-na-czesci-fill: var(--kodur-status-oczekiwanie-na-czesci-tv); --kodur-status-wstrzymane-fill: var(--kodur-status-wstrzymane-tv); --kodur-status-zamkniete-fill: var(--kodur-status-zamkniete-tv); --kodur-status-odrzucone-fill: var(--kodur-status-odrzucone-tv); --kodur-status-awaria-text: var(--kodur-primary-dark); --kodur-status-przekroczony-termin-text: var(--kodur-primary-dark); --kodur-status-w-realizacji-text: var(--kodur-primary-dark); --kodur-status-oczekiwanie-na-czesci-text: var(--kodur-primary-dark); --kodur-status-wstrzymane-text: var(--kodur-primary-dark); --kodur-status-zamkniete-text: var(--kodur-primary-dark); --kodur-status-odrzucone-text: var(--kodur-primary-dark); --kodur-crit-a-fill: var(--kodur-crit-a-tv); --kodur-crit-b-fill: var(--kodur-crit-b-tv); --kodur-crit-a-text: var(--kodur-primary-dark); --kodur-crit-b-text: var(--kodur-primary-dark); /* krytyczność C pozostaje bez zmian — już jasna, czytelna na granacie */ } /* ================= Wariant TV/kiosk — rozszerza motyw ciemny (patrz wyżej) ================= Ekran ogląda się z kilku metrów, przy zmiennym oświetleniu hali. Kolory dziedziczone z bloku [data-theme="dark"] powyżej (ten sam selektor). Tu tylko powiększenie bazowego font-size — BlazorBlueprint/Tailwind liczą prawie wszystko w rem, więc większy font-size skaluje spójnie całą typografię i odstępy (padding/gap w rem) bez zmiany klas komponentów. Klasa `.kodur-tv-scope` (na dowolnym elemencie, nie tylko ) daje ten sam efekt zakresowo — używana przez KioskLayout i widżety Dashboard TV, żeby nie przełączać globalnego motywu całej aplikacji tylko dlatego, że jeden ekran jest w trybie kiosk. T-1496 — było sztywne "22px", niezależne od rozmiaru okna. Właściciel produktu: "ten sam układ pojedzie i na 32 cale, i na 65" — sztywny px daje ten sam rozmiar liter niezależnie od tego, ile pikseli wysokości ma okno przeglądarki telewizora, więc na większej/gęstszej matrycy litery i liczby są RELATYWNIE mniejsze, nie większe. clamp() z jednostką vh skaluje bazę wprost z wysokością okna (min/max to tylko poręcz na skrajne przypadki, np. wąskie okno deweloperskie) — 22px zostaje jako środek zakresu przy typowym 1080px wysokości okna (22 / 1080 ≈ 2vh). */ html[data-theme="tv"], .kodur-tv-scope { font-size: clamp(15px, 2vh, 34px); } /* Motyw ustala WYŁĄCZNIE jawny przełącznik użytkownika (BbDarkModeToggle w MainLayout), nigdy nocny tryb urządzenia — patrz K88 w decyzje.md. Był tu blok @media (prefers-color-scheme: dark), który nadpisywał --kodur-bg barwą marki. Jego selektor wymagał [data-theme="light"] albo .light, żeby się WYCOFAĆ, a BbDarkModeToggle tych stanów nie ustawia — dodaje i zdejmuje tylko klasę .dark. Skutek zgłoszony przez właściciela produktu: na urządzeniu z nocnym trybem systemu strona była niebieska ZAWSZE, a przełącznik nie robił nic widocznego, bo zdjęcie .dark wracało do reguły z media query, nie do motywu jasnego. Powód rzeczowy, nie tylko techniczny: na hali dwie osoby patrzące na ten sam ekran muszą widzieć te same barwy. Etap pracy rozpoznaje się po kolorze plakietki, więc paleta nie może zależeć od tego, czy ktoś ma na tablecie włączony tryb nocny. */