/* ============================================================================ WILCZY ŁUP — panel administracyjny · WARSTWA 1: TOKENY panel_ui_v1 · 2026-08-09 · saas-ui-designer ---------------------------------------------------------------------------- Ten plik ZASTĘPUJE blok `:root` z `workers/panel/public/app.css`. Nazwy tokenów są te same, co dotąd — zmieniają się WARTOŚCI i domyślny motyw. Dochodzą tokeny typografii marki, skali odstępów i stanów. TRZY REGUŁY, KTÓRE TU OBOWIĄZUJĄ: 1. CIEMNY MOTYW JEST DOMYŚLNY, nie warunkowy. Dotąd panel był jasny, a ciemny włączał się z `prefers-color-scheme`. Właściciel ogląda panel na ciemno i ocenia to, co widzi — więc ciemny jest kanonem, a jasny wchodzi wyłącznie świadomym `data-theme="light"` na (i sam z siebie przy druku). 2. ZERO NOWYCH KOLORÓW. Każdy hex poniżej pochodzi albo z kanonu sklepu (`wilczylup-sklep-theme/wilczylup.css` §2), albo z tokenów powłoki z P1 §8.1 / P4 §8.1. Nic tu nie jest wymyślone. 3. KOLOR NIGDY NIE NIESIE TREŚCI. Wszystkie kolory stanu są przypisane do IKONY i KRESKI (nie-tekst, próg 3:1), tekst zostaje biały/muted (≥5:1). Jedyny wyjątek: stan `down` — apla pomarańczowa z czarnym tekstem, 6,5:1, idiom przycisku ze sklepu. ============================================================================ */ /* ---------- 1. FONTY MARKI, SELF-HOSTED ------------------------------------ Te same pliki, co w sklepie (`wilczylup-sklep-theme/fonts/`). CSP 'self' wystarcza — zero requestów na zewnątrz, zero RODO. WDROŻENIE: skopiuj 6 plików .woff2 do `workers/panel/public/fonts/`. Bez nich panel zjeżdża na Arial/Impact i cała robota idzie w gwizdek. `font-display:swap` — tekst jest widoczny od pierwszej klatki (M8: nigdy pusty ekran). */ @font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:800 900;font-display:swap; src:url('/fonts/bigshouldersdisplay-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:800 900;font-display:swap; src:url('/fonts/bigshouldersdisplay-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Work Sans';font-style:normal;font-weight:300 600;font-display:swap; src:url('/fonts/worksans-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Work Sans';font-style:normal;font-weight:300 600;font-display:swap; src:url('/fonts/worksans-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap; src:url('/fonts/jetbrainsmono-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap; src:url('/fonts/jetbrainsmono-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} /* ---------- 2. MOTYW CIEMNY (DOMYŚLNY) ------------------------------------ */ :root { color-scheme: dark; /* — paleta marki (kanon sklepu §2; niezmienna w obu motywach) — */ --wl-brand: #F1611F; /* pomarańcz marki */ --wl-lime: #9ABF38; --wl-sky: #59B1DA; --wl-magenta: #D787B0; --wl-black: #000000; --wl-white: #FFFFFF; /* — treść: płótno, płyty, kreski, tusz — #000 płótno · #111 płyta = ta sama para, co powłoka w P1 §8.1. Płyta jest JAŚNIEJSZA od płótna: karta ma wychodzić do przodu. */ --wl-canvas: #000000; --wl-surface: #111111; --wl-surface-sunken: #000000; --wl-surface-hover: #2A2A2A; --wl-line: #3D3D3D; /* hairline, 1 px */ --wl-line-strong: #6B6B6B; /* obrys kontrolki; 3,5:1 na płycie */ --wl-ink-900: #FFFFFF; /* 18,9:1 na płycie */ --wl-ink-700: #C9C5BF; /* 12,6:1 */ --wl-ink-500: #8A857B; /* 5,1:1 — najniższy dopuszczalny tekst */ --wl-attention-bg: #2B1A11; /* pomarańcz zdmuchnięty do tła (z app.css) */ /* — powłoka: ta sama czerń, inny sens. Trzyma nazwy z P1 §8.1 — */ --wl-shell-bg: #111111; --wl-shell-ink: #FFFFFF; --wl-shell-ink-muted: #C9C5BF; --wl-shell-line: #3D3D3D; --wl-shell-hover: #2A2A2A; --wl-shell-control-line: #6B6B6B; --wl-scrim: rgba(0, 0, 0, 0.72); --wl-notice-bg: #2A2A2A; --wl-press-light: #2A2A2A; --wl-press-dark: #2A2A2A; /* — STANY. Kolor siedzi w ikonie i w 3 px kresce, nigdy w literach. `unknown` jest SZARY i to jest decyzja, nie zapomnienie: „nie wiem" nie jest awarią i nie ma prawa wyglądać jak awaria (konwencja „No Data" z Datadoga/Grafany — neutralna szarość obok czerwieni i zieleni). */ --wl-state-ok: var(--wl-lime); /* 8,9:1 na płycie */ --wl-state-degraded: var(--wl-brand); /* 5,8:1 na płycie */ --wl-state-down-bg: var(--wl-brand); /* apla */ --wl-state-down-ink: var(--wl-black); /* 6,5:1 na apli */ --wl-state-unknown: var(--wl-line-strong); /* 3,5:1 — próg nie-tekstu */ --wl-state-info: var(--wl-sky); /* 8,0:1 — kwota ostateczna */ /* ---------- 3. TYPOGRAFIA ---------- */ --wl-font-display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif; --wl-font-body: 'Work Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --wl-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* KANON SKLEPU §5: kwoty NIGDY fontem display — Big Shoulders nie ma cyfr tabularnych. Kwoty jadą Work Sansem z `tnum`. */ --wl-font-money: var(--wl-font-body); --wl-font: var(--wl-font-body); /* alias wstecz dla app.css */ --wl-type-display-1: clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem); /* logowanie */ --wl-type-display-2: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem); /* .wl-h1 */ --wl-type-display-3: 1.375rem; /* h2 karty */ --wl-type-display-lh: 0.9; --wl-type-eyebrow: 0.6875rem; --wl-type-eyebrow-ls: 0.18em; --wl-type-section: 0.75rem; --wl-type-section-ls: 0.14em; --wl-type-body: 1rem; --wl-type-body-lh: 1.5; --wl-type-meta: 0.8125rem; --wl-type-money-hero: clamp(1.75rem, 1.4rem + 1.1vw, 2.25rem); --wl-type-money-hero-lh: 1.05; --wl-type-tab: 0.6875rem; /* ---------- 4. ODSTĘPY (skala 4) ---------- */ --wl-s2: 2px; --wl-s4: 4px; --wl-s8: 8px; --wl-s12: 12px; --wl-s16: 16px; --wl-s20: 20px; --wl-s24: 24px; --wl-s32: 32px; --wl-s40: 40px; --wl-s48: 48px; --wl-s56: 56px; --wl-s72: 72px; /* ---------- 5. WYMIARY POWŁOKI (mob. §10.1 — bez zmian) ---------- */ --wl-appbar-h: 56px; --wl-navbar-h: 52px; --wl-tabbar-h: 56px; --wl-plaque-h: 32px; /* minimum kanoniczne znaku */ --wl-plaque-guard: 11px; /* pole ochronne ≈ ⅓ wysokości */ --wl-plaque-h-hero: 96px; /* logowanie */ --wl-nav-item-h: 56px; --wl-touch-min: 44px; --wl-touch-comfort: 48px; --wl-touch-gap: 8px; --wl-tile-pad: 16px; --wl-tile-pad-inline: 16px; --wl-tile-gap: 12px; --wl-measure: 68ch; /* maks. długość wiersza tekstu ciągłego */ --wl-content-max: 1400px; /* — kreski konstrukcyjne. `--wl-rule` = 2 px, idiom ze sklepu (`--wl-rule`). Płyta ma GÓRNĄ kreskę 2 px, nie ramkę 1 px dookoła: to jest język druku z opakowań, nie domyślna karta bootstrapa. */ --wl-rule-w: 2px; --wl-hairline: 1px solid var(--wl-line); --wl-rule: var(--wl-rule-w) solid var(--wl-ink-900); /* ---------- 6. SAFE-AREA (mob. §4.9) ---------- */ --wl-safe-t: env(safe-area-inset-top, 0px); --wl-safe-r: env(safe-area-inset-right, 0px); --wl-safe-b: env(safe-area-inset-bottom, 0px); --wl-safe-l: env(safe-area-inset-left, 0px); --wl-tabbar-total: calc(var(--wl-tabbar-h) + var(--wl-safe-b)); /* ---------- 7. IKONY (mob. §10.3) ---------- */ --wl-icon-16: 16px; --wl-icon-24: 24px; --wl-icon-32: 32px; --wl-icon-48: 48px; --wl-icon-align: -0.125em; /* ---------- 8. RUCH ---------- */ --wl-motion-push: 180ms; --wl-motion-fade: 120ms; --wl-ease: cubic-bezier(0.2, 0, 0, 1); /* ---------- 9. PROMIEŃ — D-31, bez wyjątku ---------- */ --wl-radius: 0; } /* ---------- 10. MOTYW JASNY — WYŁĄCZNIE ŚWIADOMIE --------------------------- ``. Nie ma automatycznego przełączania z systemu: panel, który raz jest czarny a raz biały zależnie od pory dnia w macOS, to dwa różne produkty dla tej samej osoby. Wartości = dotychczasowy motyw jasny (P4 §8.1), więc nic nie zostało utracone. */ [data-theme="light"] { color-scheme: light; --wl-canvas: #F7F5F2; --wl-surface: #FFFFFF; --wl-surface-sunken: #F7F5F2; --wl-surface-hover: #EFECE7; --wl-line: #DCD8D2; --wl-line-strong: #6B6B6B; --wl-ink-900: #111111; --wl-ink-700: #3D3D3D; --wl-ink-500: #6B6B6B; --wl-attention-bg: #FDF0E9; --wl-notice-bg: #F7F5F2; --wl-press-light: #EFECE7; --wl-scrim: rgba(17, 17, 17, 0.64); /* Na BIELI pomarańcz ma 3,25:1 i przestaje być tekstem (kanon sklepu §4). Dlatego w motywie jasnym stany schodzą na czerń + ikonę + słowo, a kolor zostaje wyłącznie kreską. To nie jest ta sama paleta w negatywie i nie udaje, że jest. */ --wl-state-ok: #9ABF38; --wl-state-degraded: #F1611F; --wl-state-down-bg: #F1611F; --wl-state-down-ink: #000000; --wl-state-unknown: #6B6B6B; --wl-state-info: #59B1DA; } /* ---------- 11. DRUK — zawsze na biało ------------------------------------ Wydruk zestawienia na czarnym tle to zniszczony toner i nieczytelny papier. */ @media print { :root { color-scheme: light; --wl-canvas: #FFFFFF; --wl-surface: #FFFFFF; --wl-surface-sunken: #FFFFFF; --wl-line: #6B6B6B; --wl-line-strong: #000000; --wl-ink-900: #000000; --wl-ink-700: #000000; --wl-ink-500: #3D3D3D; --wl-attention-bg: #FFFFFF; --wl-state-down-ink: #000000; } }