/* * KSzkola — tokeny systemu projektowego (05 §1.2, §1.5, §1.6). Jedyne miejsce wartości kolorów neutralnych * i semantycznych; kolor akcentu szkoły (--ksz-akcent*) generuje serwer w /motyw.css (05 §1.3). * Każda para tekst/tło jest sprawdzana automatycznie: test KontrastTokenowTests (tests/KSzkola.Web.Tests) * i żywy raport w przewodniku /prototyp/komponenty. Format wartości: #RRGGBB (parsowany przez test). * * Tryb: atrybut data-bs-theme="light|dark" na (motyw.js) — działa też zagnieżdżony (podglądy obu trybów). */ /* ---------- Tryb jasny ---------- */ :root, [data-bs-theme=light] { --ksz-tlo: #F6F7F9; --ksz-tlo-rgb: 246, 247, 249; --ksz-powierzchnia: #FFFFFF; --ksz-powierzchnia-rgb: 255, 255, 255; --ksz-powierzchnia-2: #F0F2F5; --ksz-powierzchnia-2-rgb: 240, 242, 245; --ksz-ramka: #D9DEE4; --ksz-ramka-pola: #7B8594; --ksz-tekst: #1A1F26; --ksz-tekst-rgb: 26, 31, 38; --ksz-tekst-2: #4E5764; --ksz-tekst-2-rgb: 78, 87, 100; --ksz-sukces: #1B7F47; --ksz-sukces-rgb: 27, 127, 71; --ksz-sukces-tlo: #EEF8F2; --ksz-sukces-ramka: #A3D9B8; --ksz-na-sukcesie: #FFFFFF; --ksz-ostrzezenie: #8A5300; --ksz-ostrzezenie-rgb: 138, 83, 0; --ksz-ostrzezenie-tlo: #FFF4E0; --ksz-ostrzezenie-ramka: #F2C98A; --ksz-na-ostrzezeniu: #FFFFFF; --ksz-blad: #C4312B; --ksz-blad-rgb: 196, 49, 43; --ksz-blad-tlo: #FDECEB; --ksz-blad-ramka: #F2B1AD; --ksz-na-bledzie: #FFFFFF; --ksz-info: #1D69A8; --ksz-info-rgb: 29, 105, 168; --ksz-info-tlo: #E8F1FA; --ksz-info-ramka: #A9CBEB; --ksz-na-info: #FFFFFF; --ksz-cien-warstwy: 0 .5rem 1.5rem rgba(17, 20, 24, .12); --ksz-przygaszenie: rgba(17, 20, 24, .5); /* Akcent domyślny #2F5BD3 — rezerwa, gdy /motyw.css się nie wczyta (wartości z KolorAkcentu). */ --ksz-akcent: #2F5BD3; --ksz-akcent-rgb: 47, 91, 211; --ksz-akcent-tlo: #2F5BD3; --ksz-akcent-tlo-rgb: 47, 91, 211; --ksz-na-akcencie: #FFFFFF; --ksz-na-akcencie-rgb: 255, 255, 255; --ksz-akcent-tekst: #2F5BD3; --ksz-akcent-tekst-rgb: 47, 91, 211; --ksz-akcent-subtelny: #E6EBFA; --ksz-akcent-ramka-subtelna: #B6C6F0; --ksz-akcent-hover: #2048BF; --ksz-akcent-active: #163BB1; --ksz-fokus: #2F5BD3; --ksz-fokus-rgb: 47, 91, 211; --ksz-akcent-kontrolka: #2F5BD3; --ksz-na-kontrolce: #FFFFFF; } /* ---------- Tryb ciemny ---------- */ [data-bs-theme=dark] { color-scheme: dark; --ksz-tlo: #111418; --ksz-tlo-rgb: 17, 20, 24; --ksz-powierzchnia: #1A1E24; --ksz-powierzchnia-rgb: 26, 30, 36; --ksz-powierzchnia-2: #222730; --ksz-powierzchnia-2-rgb: 34, 39, 48; --ksz-ramka: #2E343D; --ksz-ramka-pola: #737C8A; --ksz-tekst: #E7EAEE; --ksz-tekst-rgb: 231, 234, 238; --ksz-tekst-2: #A9B1BC; --ksz-tekst-2-rgb: 169, 177, 188; --ksz-sukces: #4CC38A; --ksz-sukces-rgb: 76, 195, 138; --ksz-sukces-tlo: #15291E; --ksz-sukces-ramka: #2A6B4B; --ksz-na-sukcesie: #111418; --ksz-ostrzezenie: #F0B45A; --ksz-ostrzezenie-rgb: 240, 180, 90; --ksz-ostrzezenie-tlo: #2E2310; --ksz-ostrzezenie-ramka: #7A5A22; --ksz-na-ostrzezeniu: #111418; --ksz-blad: #FF7A70; --ksz-blad-rgb: 255, 122, 112; --ksz-blad-tlo: #3A1A18; --ksz-blad-ramka: #8A3A34; --ksz-na-bledzie: #111418; --ksz-info: #6FB1F0; --ksz-info-rgb: 111, 177, 240; --ksz-info-tlo: #132638; --ksz-info-ramka: #2D5A85; --ksz-na-info: #111418; --ksz-cien-warstwy: 0 .5rem 1.5rem rgba(0, 0, 0, .5); --ksz-przygaszenie: rgba(0, 0, 0, .65); --ksz-akcent: #2F5BD3; --ksz-akcent-rgb: 47, 91, 211; --ksz-akcent-tlo: #2F5BD3; --ksz-akcent-tlo-rgb: 47, 91, 211; --ksz-na-akcencie: #FFFFFF; --ksz-na-akcencie-rgb: 255, 255, 255; --ksz-akcent-tekst: #5889FF; --ksz-akcent-tekst-rgb: 88, 137, 255; --ksz-akcent-subtelny: #1D2840; --ksz-akcent-ramka-subtelna: #233973; --ksz-akcent-hover: #2048BF; --ksz-akcent-active: #163BB1; --ksz-fokus: #5889FF; --ksz-fokus-rgb: 88, 137, 255; --ksz-akcent-kontrolka: #3360D8; --ksz-na-kontrolce: #FFFFFF; } /* ---------- Mapowanie na zmienne Bootstrapa 5.3 (re-deklarowane w każdym elemencie z motywem) ---------- */ :root, [data-bs-theme], .ksz-zakres-akcentu { --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --bs-body-font-size: 1rem; --bs-body-line-height: 1.5; --bs-body-font-weight: 400; --bs-body-bg: var(--ksz-tlo); --bs-body-bg-rgb: var(--ksz-tlo-rgb); --bs-body-color: var(--ksz-tekst); --bs-body-color-rgb: var(--ksz-tekst-rgb); --bs-emphasis-color: var(--ksz-tekst); --bs-emphasis-color-rgb: var(--ksz-tekst-rgb); --bs-heading-color: var(--ksz-tekst); --bs-secondary-color: var(--ksz-tekst-2); --bs-secondary-color-rgb: var(--ksz-tekst-2-rgb); --bs-tertiary-color: var(--ksz-tekst-2); --bs-tertiary-color-rgb: var(--ksz-tekst-2-rgb); --bs-secondary-bg: var(--ksz-powierzchnia-2); --bs-secondary-bg-rgb: var(--ksz-powierzchnia-2-rgb); --bs-tertiary-bg: var(--ksz-powierzchnia-2); --bs-tertiary-bg-rgb: var(--ksz-powierzchnia-2-rgb); --bs-border-color: var(--ksz-ramka); --bs-border-color-translucent: var(--ksz-ramka); --bs-code-color: var(--ksz-tekst); --bs-highlight-color: var(--ksz-tekst); --bs-highlight-bg: var(--ksz-ostrzezenie-tlo); --bs-border-radius: .375rem; /* pola i przyciski 6 px */ --bs-border-radius-sm: .25rem; --bs-border-radius-lg: .625rem; /* karty i okna 10 px */ --bs-border-radius-xl: .625rem; --bs-border-radius-pill: 50rem; /* etykiety statusów */ --bs-success: var(--ksz-sukces); --bs-success-rgb: var(--ksz-sukces-rgb); --bs-success-text-emphasis: var(--ksz-sukces); --bs-success-bg-subtle: var(--ksz-sukces-tlo); --bs-success-border-subtle: var(--ksz-sukces-ramka); --bs-danger: var(--ksz-blad); --bs-danger-rgb: var(--ksz-blad-rgb); --bs-danger-text-emphasis: var(--ksz-blad); --bs-danger-bg-subtle: var(--ksz-blad-tlo); --bs-danger-border-subtle: var(--ksz-blad-ramka); --bs-warning: var(--ksz-ostrzezenie); --bs-warning-rgb: var(--ksz-ostrzezenie-rgb); --bs-warning-text-emphasis: var(--ksz-ostrzezenie); --bs-warning-bg-subtle: var(--ksz-ostrzezenie-tlo); --bs-warning-border-subtle: var(--ksz-ostrzezenie-ramka); --bs-info: var(--ksz-info); --bs-info-rgb: var(--ksz-info-rgb); --bs-info-text-emphasis: var(--ksz-info); --bs-info-bg-subtle: var(--ksz-info-tlo); --bs-info-border-subtle: var(--ksz-info-ramka); --bs-secondary-text-emphasis: var(--ksz-tekst); --bs-secondary-bg-subtle: var(--ksz-powierzchnia-2); --bs-secondary-border-subtle: var(--ksz-ramka); --bs-light-text-emphasis: var(--ksz-tekst); --bs-light-bg-subtle: var(--ksz-powierzchnia-2); --bs-light-border-subtle: var(--ksz-ramka); --bs-dark-text-emphasis: var(--ksz-tekst); --bs-dark-bg-subtle: var(--ksz-powierzchnia-2); --bs-dark-border-subtle: var(--ksz-ramka); --bs-form-valid-color: var(--ksz-sukces); --bs-form-valid-border-color: var(--ksz-sukces); --bs-form-invalid-color: var(--ksz-blad); --bs-form-invalid-border-color: var(--ksz-blad); /* Akcent szkoły → Bootstrap (05 §1.3). Wartości --ksz-akcent* z /motyw.css. */ --bs-primary: var(--ksz-akcent-tlo); --bs-primary-rgb: var(--ksz-akcent-tlo-rgb); --bs-primary-text-emphasis: var(--ksz-akcent-tekst); --bs-primary-bg-subtle: var(--ksz-akcent-subtelny); --bs-primary-border-subtle: var(--ksz-akcent-ramka-subtelna); --bs-link-color: var(--ksz-akcent-tekst); --bs-link-color-rgb: var(--ksz-akcent-tekst-rgb); --bs-link-hover-color: var(--ksz-akcent-tekst); --bs-link-hover-color-rgb: var(--ksz-akcent-tekst-rgb); --bs-focus-ring-color: var(--ksz-fokus); --bs-focus-ring-width: 2px; --bs-focus-ring-opacity: 1; }