/* ════════════════════════════════════════════════════════════════════════════ PLANER DESIGN SYSTEM · tokens.css Jedyne źródło kolorów, typografii i rytmu dla wszystkich produktów planera. Skopiuj TEN plik do produktu i podłącz PIERWSZY, przed jakimkolwiek innym CSS. ⚠ DARK JEST DOMYŚLNY — nie wymaga żadnego atrybutu. Nasz soft stoi na halach i na ciemnych ekranach; light to tryb dla biurka (Damian: „8 godzin siedzę w białym Excelu, po 10 minutach łzawią mi oczy" — roast 20.08). Light włącza się atrybutem na : Powrót do dark: usuń atrybut albo data-theme="dark" ⚠ NAZWY TOKENÓW SĄ TE SAME W OBU TRYBACH. Produkt nie zmienia ani jednej klasy, żeby wspierać light — podmienia się tylko wartość tokenu. Jeśli kiedykolwiek piszesz `[data-theme="light"] .mojaKlasa { ... }` w kodzie produktu, to znaczy, że brakuje tokenu — dodaj go TUTAJ, nie tam. ════════════════════════════════════════════════════════════════════════════ */ :root { /* ── POWIERZCHNIE ──────────────────────────────────────────────────────── page = najgłębsze tło, surface = to, co „leży" na nim (paski, karty, szyny). Różnica jest CELOWO mała (kontrast 1.12) — warstwy mają się odklejać ledwo widocznie, żeby kolor mógł zostać dla znaczeń, nie dla dekoracji. */ --page: #0d0d0d; --surface: #1a1a19; --track: #141413; /* wgłębienie: tor osi, tło paska postępu */ --idle: #242423; /* element bez treści: pusta maszyna, placeholder */ --border: rgba(255, 255, 255, .10); --grid: #2c2c2a; /* linie siatki godzinowej */ --grid-mid: #3a3a38; /* co kilka godzin: oś czasu potrzebuje TRZECH stopni podziałki (godzina · kilka godzin · doba), sama godzina i doba to za mało */ --grid-strong: #4a4a48; /* separator doby — mocniejszy niż zwykła siatka */ --border-strong: rgba(255, 255, 255, .18); /* obrys całej tabeli / sekcji */ --row-alt: rgba(255, 255, 255, .015); /* zebra w gęstej tabeli */ /* ── TEKST ─────────────────────────────────────────────────────────────── Trzy poziomy, nie więcej. Czwarty zawsze okazuje się jednym z tych trzech. */ --ink: #fff; /* treść główna: nazwy, liczby, na które się patrzy */ --ink2: #c3c2b7; /* treść wspierająca: opisy, drugorzędne kolumny */ --muted: #898781; /* etykiety, jednostki, rzeczy „w tle" */ /* ── ZNACZENIA (semantyka, nie dekoracja) ──────────────────────────────── Wersja bazowa = WYPEŁNIENIA (tła, paski, ramki). Wersja `-hi` = TEKST i akcent na ciemnym tle (jaśniejsza, czytelniejsza). */ --good: #1a8a40; --good-hi: #22a34e; /* poszło do przodu, gate spełniony */ --warn: #fab219; --warn-hi: #fab219; /* udało się, ALE jest o czym pamiętać */ --warn-ink: #141200; /* tekst NA bursztynowym wypełnieniu */ --crit: #b3261e; --crit-hi: #d03b3b; /* odmowa / nic się nie stało */ /* ⚠ ZNANE OGRANICZENIE: --crit-hi na --surface daje 3,62:1 (AA tylko dla dużego tekstu). Kolor jest odziedziczony z palety TV („nie dryfować"), więc go nie zmieniamy — ale NIE stawiaj na nim drobnego tekstu ciągłego. Do ramek, wypełnień, plakietek i pojedynczych słów statusu: OK. Do zdania w toaście: użyj --ink i zostaw --crit-hi na ramkę. Wszystkie pozostałe kolory znaczeniowe mają min. AA w obu motywach. */ --accent: #3987e5; --accent-hi: #5a9dea; /* zaznaczenie, fokus, „tu jesteś" */ --alert: #ec835a; /* uwaga wymagająca decyzji człowieka */ --zbro: #55534e; /* przezbrojenie: czas, który nic nie produkuje */ --zbro-heavy: #6b6862; /* przezbrojenie ciężkie (>45 min) */ /* ── OŚ RYZYKA (APS) ───────────────────────────────────────────────────── Kolor bloku NIGDY nie bierze się z surowych minut — tylko z tej osi. Trzy stany, bo czwarty nikomu nic nie mówi. */ --risk-ok: #7d9b86; --risk-buffer: #fab219; --risk-deadline: #d03b3b; --plan-neutral: #8fa1b3; /* plan bez oceny ryzyka (np. przyszłość bez danych) */ /* ── TA SAMA OŚ, WYPEŁNIENIE GRUBEGO KLOCKA ────────────────────────────── Wersja bazowa wyżej jest NASYCONA i pasuje do cienkiego paska na osi APS. Klocek gruby (≥24 px, dwie linie etykiety W ŚRODKU) potrzebuje jej PRZYCIEMNIONEJ odmiany, bo duże pole w tej samej sile zaczyna świecić i przykrywa wiersz. Znaczenia się nie zmieniają — zmienia się gęstość. Wartości i próg 2,2:1 pochodzą z audytu osi czasu 24.08: przy 1,2:1 klocek (bohater wiersza) ginął pod cienkim, ale nasyconym pasmem statusu 7,3:1, czyli hierarchia wychodziła odwrotnie, niż zakładał plan. Etykieta bierze --ink-on-dim, nie biel na sztywno. */ --risk-ok-fill: #265c35; /* 2,21:1 do --surface · etykieta 7,88:1 */ --risk-buffer-fill: #654f16; /* 2,23:1 · 7,83:1 */ --risk-deadline-fill: #853636; /* 2,14:1 · 8,15:1 */ --plan-neutral-fill: #475263; /* 2,20:1 · 7,91:1 */ /* ── PASMA STATUSU MASZYNY (rampa dowodowa) ────────────────────────────── Stany z MES: pasmo pod klockiem mówi, CO maszyna robiła. To warstwa DOWODOWA — ma być czytelna, ale nigdy głośniejsza od klocka nad nią. Rampa z audytu 24.08: trzy poziomy w krokach ok. 2,0x, każdy min. 3:1 do --track (wyjątkiem jest `none`, patrz niżej). Wcześniejsza rampa miała 1,17-2,40:1 i kroki 1,11-1,32, więc pasma były nieodróżnialne od pustego toru — a „postój planowany" to jedna piąta zmierzonego czasu na hali, czyli niewidoczny czytał się jako brak danych. Awaria NIE ma tu własnego tokenu: bierze --crit, bo to ten sam stan. */ --band-work: #2e7d46; /* praca · 3,63:1 do --track */ --band-prep: #8b96a6; /* ustawianie, przezbrajanie · 6,15:1 */ --band-stop: #5a6472; /* postój planowany, konserwacja · 3,07:1 */ --band-fault: #9c5150; /* postój nieplanowany · 3,25:1 */ --band-none: #4b5563; /* brak etykiety w MES · 2,44:1 — celowo najcichszy, bo to brak wiedzy, nie zdarzenie; odróżnia go kreskowanie */ /* ── NAKŁADKI NA OŚ ────────────────────────────────────────────────────── Zawsze PRZYCIEMNIENIE/ROZJAŚNIENIE, nigdy nowy kolor — inaczej oś zaczyna mieć dwa języki kolorystyczne naraz. */ --night-shade: rgba(0, 0, 0, .28); /* noc 22:00–06:00 */ --past-shade: rgba(0, 0, 0, .42); /* poza dobą planu (wczoraj) */ --hatch-past: repeating-linear-gradient(-45deg, rgba(255,255,255,.025) 0 8px, transparent 8px 16px); --hatch-frozen: repeating-linear-gradient(45deg, rgba(57,135,229,.07) 0 6px, transparent 6px 12px); --chip-bg: rgba(0, 0, 0, .78); /* tło dymka/chipa nad blokiem */ /* ── NA WYPEŁNIENIU ────────────────────────────────────────────────────── Wszystko, co leży NA kolorowym wypełnieniu, a nie na powierzchni. Osobna rodzina, bo tu nie działa zwykły token tekstu: --ink jest biały w dark i prawie czarny w light, a zalewka bywa ciemna w jednym motywie i jasna w drugim — niezależnie od motywu. Dwa różne tusze, bo to dwa różne przypadki: --ink-on-fill na NASYCONYM wypełnieniu znaczeniowym (--good, --crit): biel w OBU motywach, bo zalewka jest ciemna w obu (kafel wieży na hali: biel na --good to 4,42:1 w dark i 5,77:1 w light), --ink-on-dim na PRZYCIEMNIONYM/rozjaśnionym wypełnieniu klocka (--*-fill wyżej): to jedyny tusz, który MUSI się przełączyć, bo wypełnienie jest ciemne w dark i jasne w light. Produkt pisze var(--ink-on-dim) i nigdy nie musi wiedzieć, w którym motywie stoi. */ --ink-on-fill: #fff; --ink-on-dim: #fff; /* wypełnienie jasne DANĄ, nie motywem (chip farby, pasmo statusu): o tuszu decyduje jasność wypełnienia, więc wartość jest ta sama w obu motywach — produkt dokłada klasę sam, tak jak `.block.on-light` i `.cs.lite` */ --ink-on-lite: rgba(0, 0, 0, .82); --fill-shade: rgba(0, 0, 0, .28); /* obwódka/przyciemnienie NA zalewce — nigdy nowy kolor */ --fill-track: rgba(255, 255, 255, .32); /* wgłębienie paska postępu na ciemnej zalewce */ --fill-track-lite: rgba(0, 0, 0, .12); /* to samo na jasnej zalewce (np. --idle) */ /* ── FOKUS I ZAZNACZENIE ───────────────────────────────────────────────── Trzy poziomy o rosnącej mocy — patrz sekcja „Fokus" w index.html. Nigdy nie używaj outline: none bez podania zamiennika. */ --focus-ring: 0 0 0 2px var(--accent); --selection-glow: 0 0 0 2px var(--accent), 0 0 12px rgba(57, 135, 229, .35); --focus-rail: inset 3px 0 0 var(--accent); /* pasek przy krawędzi wiersza */ --wash-sel: rgba(57, 135, 229, .14); /* wash na zaznaczonym wierszu */ --wash-sel-soft: rgba(57, 135, 229, .05); /* wash „należy do zaznaczonego" */ --wash-hover: rgba(255, 255, 255, .04); /* ── TYPOGRAFIA ────────────────────────────────────────────────────────── Jeden krój — systemowy. Nie wnosimy webfontów: panel ma wstać na hali natychmiast, a liczby i tak czytamy w tabular-nums. Skala jest CIASNA (10–15 px), bo gęstość danych jest tu wartością — Damian porównuje 30 pozycji na ekranie, nie czyta artykułu. */ --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fs-micro: 9.5px; /* plakietki, jednostki */ --fs-small: 10.5px; /* etykiety kolumn, podpisy */ --fs-base: 13px; /* treść — domyślny rozmiar body */ --fs-row: 12.5px; /* wiersz tabeli, nazwa maszyny */ --fs-lead: 15px; /* nagłówek sekcji */ --fw-normal: 400; --fw-med: 700; --fw-bold: 800; --fw-max: 900; /* ── RYTM I GEOMETRIA ──────────────────────────────────────────────────── Promienie są MAŁE — to narzędzie produkcyjne, nie landing. */ --r-sm: 3px; /* blok na osi */ --r-md: 5px; /* plakietka, przycisk mały */ --r-lg: 7px; /* przycisk, karta */ --r-pill: 999px; /* tag */ --sp-1: 4px; --sp-2: 6px; --sp-3: 10px; --sp-4: 14px; --sp-5: 20px; --rail-w: 196px; /* szyna z nazwami maszyn */ --row-h: 64px; /* wysokość wiersza maszyny na osi */ color-scheme: dark; } /* ════════════════════════════════════════════════════════════════════════════ LIGHT — paleta przeniesiona z arkusza Adriana (adrian.nueve.design), bo tam czyta się najlepiej (decyzja Stana 27.08). TŁO JEST SZARE, nie białe (`--page: #f6f6f4`) — na bieli stany „w planie" / „wygaszony" / „pusty" zlewają się w jedno. Ale POWIERZCHNIE są białe, i to jest sedno tej palety: ⚠ LIGHT ROZDZIELA WARSTWY RAMKĄ, DARK WYPEŁNIENIEM. To nie jest niedoróbka, tylko dwa różne sposoby na to samo: • dark — page↔surface 1,12, ramka ledwo widoczna (rgba biała 10%), • light — page↔surface tylko 1,08, ale ramka niesie separację: `--border` 1,49:1 na bieli, `--border-strong` 1,66:1. Dlatego w light NIE podnoś kontrastu teł, żeby „było lepiej widać" — zepsujesz spokój ekranu. Jeśli coś ma się odkleić, dołóż ramkę. Kolory znaczeniowe są przeliczone pod jasne tło i sprawdzone na `--surface` (#fff): każdy ma min. AA. Nie wklejaj tu wartości z dark — #22a34e ma na białym 2,0:1 i jest nieczytelne. ════════════════════════════════════════════════════════════════════════════ */ :root[data-theme="light"] { --page: #f6f6f4; /* szare tło strony */ --surface: #ffffff; /* karty, tabela, szyny — białe, odklejone RAMKĄ */ --track: #edede8; /* wgłębienie: nagłówek tabeli, tor osi */ --idle: #f1f1ec; /* element bez treści */ --border: #d4d4cd; /* SOLIDNA ramka (1,49:1 na bieli) — to ona robi separację */ --border-strong: #c9c9c2; /* obrys całej tabeli / sekcji */ --grid: #e2e2dc; /* separatory wierszy, siatka godzinowa */ --grid-mid: #cdcdc6; /* co kilka godzin */ --grid-strong: #b9b9b2; /* separator doby */ --row-alt: #fbfbf9; /* zebra w gęstej tabeli (Adrian) */ --ink: #1c1c1a; /* 17.07:1 — AAA */ --ink2: #45443f; /* 9.76:1 — AAA */ --muted: #6e6c66; /* 5.25:1 — AA */ --good: #16753a; --good-hi: #0f7a35; /* 5.45:1 — AA */ --warn: #fab219; --warn-hi: #8a5d00; /* 5.76:1 — AA (bursztyn jako TEKST musi zciemnieć) */ --warn-ink: #141200; /* na bursztynowym wypełnieniu dalej ciemny */ --crit: #b3261e; --crit-hi: #b3261e; /* 6.54:1 — AA */ --accent: #1f66c9; --accent-hi: #1f66c9; /* 5.52:1 — AA */ --alert: #a2451c; /* 6.17:1 — AA */ --zbro: #b9b7b0; --zbro-heavy: #a09d95; --risk-ok: #4c7a5e; --risk-buffer: #8a5d00; --risk-deadline: #b3261e; --plan-neutral: #5f7387; /* Wypełnienia grubego klocka: ten sam kontrast do powierzchni co w dark (2,1-2,2:1), tylko po jasnej stronie — w dark są ciemniejsze od karty, w light jaśniejsze. Dzięki temu „przyciemniony klocek" znaczy to samo w obu motywach: kształt, nie świecące pole. Etykieta to --ink-on-dim, który tutaj robi się ciemny. */ --risk-ok-fill: #68c181; /* 2,20:1 do --surface · etykieta 7,75:1 */ --risk-buffer-fill: #d3a837; /* 2,23:1 · 7,66:1 */ --risk-deadline-fill: #daa4a4; /* 2,14:1 · 7,99:1 */ --plan-neutral-fill: #a6b0bf; /* 2,19:1 · 7,79:1 */ /* Pasma statusu: identyczne kontrasty do --track co w dark, po jasnej stronie */ --band-work: #338b4e; /* 3,62:1 do --track */ --band-prep: #4e5866; /* 6,14:1 */ --band-stop: #7c8898; /* 3,07:1 */ --band-fault: #b5706f; /* 3,24:1 */ --band-none: #8e9aaa; /* 2,43:1 */ /* na jasnym tle „noc" i „przeszłość" muszą PRZYCIEMNIAĆ delikatniej — te same wartości co w dark dałyby brudną plamę */ --night-shade: rgba(0, 0, 0, .07); --past-shade: rgba(0, 0, 0, .10); --hatch-past: repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 8px, transparent 8px 16px); --hatch-frozen: repeating-linear-gradient(45deg, rgba(31,102,201,.10) 0 6px, transparent 6px 12px); --chip-bg: rgba(255, 255, 255, .96); /* biel NA zalewce zostaje bielą także w light (zalewki znaczeniowe są ciemne w obu motywach), ale tusz na PRZYCIEMNIONYM klocku musi się odwrócić */ --ink-on-fill: #fff; --ink-on-dim: #1c1c1a; --ink-on-lite: rgba(0, 0, 0, .82); --fill-shade: rgba(0, 0, 0, .28); --fill-track: rgba(255, 255, 255, .32); --fill-track-lite: rgba(0, 0, 0, .12); --focus-ring: 0 0 0 2px var(--accent); --selection-glow: 0 0 0 2px var(--accent), 0 0 12px rgba(31, 102, 201, .28); --focus-rail: inset 3px 0 0 var(--accent); --wash-sel: rgba(31, 102, 201, .13); --wash-sel-soft: rgba(31, 102, 201, .05); /* hover ZOSTAJE neutralny, choć u Adriana jest zielonkawy (#f1f6ee) — u niego to świadoma skóra Excela, a w systemie zieleń znaczy „poszło do przodu" i nie może jednocześnie znaczyć „kursor tu jest" (zasada nr 1) */ --wash-hover: rgba(0, 0, 0, .045); color-scheme: light; } /* ── RESET + BAZA ─────────────────────────────────────────────────────────── */ * { box-sizing: border-box; margin: 0; padding: 0; } /* `hidden` musi wygrywać z każdym display — inaczej niewidzialny scrim (display:flex) przykrywa stronę i zjada wszystkie kliknięcia. Realny bug. */ [hidden] { display: none !important; } body { background: var(--page); color: var(--ink); font-family: var(--font); font-size: var(--fs-base); /* tabular-nums GLOBALNIE: kolumny z czasami i metrami mają się pionowo zgadzać bez ustawiania tego w każdym komponencie z osobna */ font-variant-numeric: tabular-nums; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--grid); border-radius: 6px; border: 2px solid var(--page); } ::-webkit-scrollbar-track { background: transparent; }