/* ========================================================================= EventPix — design tokens Kierunek C „Światło dzienne" Plik kanoniczny. Docelowo trafia do src/ i jest serwowany spod /assets, tak jak gallery.css — CSP (style-src 'self') nie dopuszcza innej drogi. Na razie leży w docs/ i nie jest podpięty do aplikacji. Architektura dwuwarstwowa: 1. SKALE — surowy materiał (--primary-600, --space-4). Nie zmieniają się między motywami. 2. ALIASY — role semantyczne (--color-bg, --color-text). Tylko one przełączają się light/dark i tylko ich używają komponenty. Komponent nigdy nie sięga po skalę bezpośrednio. Jeśli sięga, znaczy że brakuje aliasu. ========================================================================= */ /* ========================================================================= 1. SKALE — KOLOR ========================================================================= */ :root { /* --- Primary: fiolet ------------------------------------------------- Trzy stopnie to wartości, które już istnieją w aplikacji: 500 = #7C3AED — członek ICON_PALETTE (event-icon.js) 600 = #6D28D9 — dzisiejszy kolor obwódki focusu (gallery.css) 800 = #4C1D95 — DEFAULT_COLORS.primary grafik do druku Skala scala więc ekran, monogramy i wydruk w jedną rodzinę. */ --primary-50: #F6F3FE; --primary-100: #EDE7FD; --primary-200: #DCCFFB; --primary-300: #C3ACF7; --primary-400: #A47CF1; --primary-500: #7C3AED; --primary-600: #6D28D9; --primary-700: #5B21B6; --primary-800: #4C1D95; --primary-900: #3A1478; /* --- Neutral: szarość podbita fioletem ------------------------------- Celowo nie jest neutralna. Cztery stopnie to wartości zastane: 50 = #FBFAFF, 100 = #F1EDFB, 200 = #DDD5F0, 900 = #201A2F */ --neutral-0: #FFFFFF; --neutral-50: #FBFAFF; --neutral-100: #F1EDFB; --neutral-200: #DDD5F0; --neutral-300: #C4B9DC; --neutral-400: #9C90B8; --neutral-500: #766B95; --neutral-600: #5B5470; --neutral-700: #453F58; --neutral-800: #302B40; --neutral-900: #201A2F; /* --- Accent: błękit -------------------------------------------------- Rola nawigacyjna, nie komunikatowa: „nowe", „na żywo", „twoje". 700 = #0369A1 jest członkiem ICON_PALETTE. */ --accent-50: #EFF9FE; --accent-100: #DAF1FC; --accent-200: #B6E4F9; --accent-300: #7FD0F4; --accent-400: #38B6EE; --accent-500: #0EA5E9; --accent-600: #0284C7; --accent-700: #0369A1; --accent-800: #075985; --accent-900: #0C4A6E; /* --- Ciemne odpowiedniki neutrali (używane przez aliasy w dark) ------ Stopnie celowo idą W GÓRĘ jasności wraz z elewacją. Na ciemnym tle cień jest niewidoczny (czarny na prawie czarnym), więc uniesienie musi nieść jasność powierzchni. Poprzednie wartości dawały karcie 1,07:1 wobec tła i przyklejony pasek zlewał się z galerią. */ --neutral-dark-bg: #14121B; --neutral-dark-surface: #1F1B2A; --neutral-dark-raised: #2A2539; --neutral-dark-border: #383246; --neutral-dark-border-2: #4A4359; --neutral-dark-text: #EDEAF5; --neutral-dark-muted: #A79FBC; /* #7C7391 dawało wobec ciemnego tła 4,17:1 — poniżej AA. Rozjaśnione do 5,12:1, przy zachowaniu odstępu od --neutral-dark-muted (6,86:1). */ --neutral-dark-subtle: #8B82A0; } /* ========================================================================= 2. SKALE — TYPOGRAFIA ========================================================================= */ :root { /* Figtree self-hostowany przez @fontsource — CSP nie przepuści linku do fonts.googleapis.com. Ładowany w dwóch wagach (400/700) i tylko dla nagłówków; tekst leci na system-ui, więc na perf-low nie ma pobrań. */ --font-heading: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", Menlo, monospace; /* Skala 1.25 od 1rem w górę, 1.14 w dół. Osiem stopni. */ --text-xs: 0.75rem; /* 12px — plakietki, znaczniki typu */ --text-sm: 0.875rem; /* 14px — metadane, autor zdjęcia */ --text-base: 1rem; /* 16px — tekst interfejsu */ --text-lg: 1.125rem; /* 18px — lead, etykiety formularzy */ --text-xl: 1.375rem; /* 22px — h3 */ --text-2xl: 1.75rem; /* 28px — h2 */ --text-3xl: 2.25rem; /* 36px — h1 */ --text-4xl: 3rem; /* 48px — nazwa wydarzenia na ekranie gościa */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.1; /* --text-3xl i większe */ --leading-snug: 1.25; /* nagłówki średnie */ --leading-normal: 1.5; /* interfejs */ --leading-relaxed: 1.65; /* dłuższa proza */ /* Duży stopień wymaga ciaśniejszego trackingu, mały — luźniejszego. */ --tracking-display: -0.022em; --tracking-h1: -0.018em; --tracking-h2: -0.012em; --tracking-h3: -0.006em; --tracking-normal: 0; --tracking-label: 0.08em; /* wersaliki etykiet sekcji */ } /* ========================================================================= 3. SKALE — ODSTĘPY (baza 4px) ========================================================================= */ :root { --space-0: 0; --space-px: 1px; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* Kierunek C podnosi cel dotykowy z dzisiejszych 44px do 48px. */ --size-touch: 3rem; /* Szerokość kolumny tekstu — czytelność, nie odstęp. */ --measure: 65ch; } /* ========================================================================= 4. SKALE — PROMIENIE, OBRAMOWANIA, CIENIE ========================================================================= */ :root { --radius-none: 0; --radius-sm: 0.375rem; /* 6px — plakietki, drobne pola */ --radius-md: 0.625rem; /* 10px — przyciski, inputy */ --radius-lg: 0.875rem; /* 14px — karty galerii, panele */ --radius-xl: 1.25rem; /* 20px — arkusze, duże kontenery */ --radius-full: 999px; --border-1: 1px; --border-2: 2px; --border-3: 3px; --focus-width: 3px; --focus-offset: 2px; /* Cienie fioletowe, nie czarne — rgb(35 24 66) to odcień, którego gallery.css używa już dziś. */ --shadow-color: 35 24 66; --shadow-1: 0 1px 2px rgb(var(--shadow-color) / 6%), 0 1px 3px rgb(var(--shadow-color) / 8%); --shadow-2: 0 2px 4px rgb(var(--shadow-color) / 6%), 0 4px 12px rgb(var(--shadow-color) / 10%); --shadow-3: 0 4px 8px rgb(var(--shadow-color) / 8%), 0 12px 28px rgb(var(--shadow-color) / 12%); --shadow-4: 0 8px 16px rgb(var(--shadow-color) / 10%), 0 24px 56px rgb(var(--shadow-color) / 16%); } /* ========================================================================= 5. SKALE — RUCH ========================================================================= */ :root { --duration-instant: 80ms; /* zmiana stanu przycisku */ --duration-fast: 140ms; /* hover, focus */ --duration-normal: 220ms; /* rozwinięcie menu gościa */ --duration-slow: 360ms; /* wejście lightboxa */ --duration-deliberate: 600ms; /* sekwencje wieloetapowe */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0, 0, 0, 1); --ease-in: cubic-bezier(0.3, 0, 1, 1); --ease-spring: cubic-bezier(0.2, 0.9, 0.2, 1.1); /* Ściana zdjęć przewija się liniowo — każda inna krzywa czyta się jak zacinanie. Wartość --gallery-duration ustawia JS per kolumna. */ --ease-linear: linear; } /* ========================================================================= 6. BREAKPOINTY ------------------------------------------------------------------------- UWAGA: custom properties NIE działają w @media. Poniższe tokeny są dokumentacją i punktem odniesienia dla JS (matchMedia); same reguły @media muszą powtarzać wartość dosłownie. md/lg/xl to wartości już używane przez gallery.css i związane z liczbą kolumn galerii (2 / 3 / 4) oraz włączeniem animowanej ściany na lg. Zmiana któregokolwiek z nich przebudowuje układ galerii. ========================================================================= */ :root { --bp-sm: 30rem; /* 480px */ --bp-md: 40rem; /* 640px — galeria 2 kolumny */ --bp-lg: 64rem; /* 1024px — galeria 3 kolumny + animowana ściana */ --bp-xl: 90rem; /* 1440px — galeria 4 kolumny */ } /* ========================================================================= 7. ALIASY — MOTYW JASNY (domyślny) ========================================================================= */ :root { color-scheme: light; /* Powierzchnie */ --color-bg: var(--neutral-50); --color-surface: var(--neutral-0); --color-surface-raised: var(--neutral-0); --color-surface-sunken: var(--neutral-100); /* Tekst */ --color-text: var(--neutral-900); --color-text-muted: var(--neutral-600); --color-text-subtle: var(--neutral-500); --color-text-on-brand: var(--neutral-0); /* Obramowania — trzy stopnie o różnych zobowiązaniach: border (1,41:1) linia dekoracyjna: podział kart, reguły tabel. border-strong (1,86:1) mocniejszy podział, nadal dekoracyjny. border-interactive (4,88:1) granica KONTROLKI — pole formularza, select, przycisk obrysowany. WCAG 1.4.11 wymaga tu 3:1; dwa pierwsze stopnie tego progu nie osiągają i nie wolno ich do tego użyć. */ --color-border: var(--neutral-200); --color-border-strong: var(--neutral-300); --color-border-interactive: var(--neutral-500); /* Marka */ --color-brand: var(--primary-600); --color-brand-hover: var(--primary-700); --color-brand-active: var(--primary-800); --color-brand-subtle: var(--primary-50); --color-brand-border: var(--primary-200); /* Akcent — wyłącznie nawigacyjny. 700, nie 600: accent-600 (#0284C7) daje wobec --color-bg tylko 3,94:1, czyli poniżej AA dla zwykłego tekstu. accent-700 (#0369A1) daje 5,71:1 i jest przy okazji członkiem ICON_PALETTE. */ --color-accent: var(--accent-700); --color-accent-subtle: var(--accent-50); --color-accent-border: var(--accent-200); --color-focus: var(--primary-600); /* Semantyczne — cztery stopnie na rolę: subtle = tło komunikatu, border = jego ramka, base = wypełnienie/kropka, strong = tekst na subtle WAŻNE: stopień `base` NIE jest kolorem tekstu. Wobec --color-bg daje 3,63:1 (success) i 3,07:1 (warning) — spełnia próg 3:1 dla elementów nietekstowych, ale nie AA 4,5:1 dla tekstu. Do tekstu służy `strong`, który na tle `subtle` przechodzi AA w obu motywach. */ --color-success-subtle: #ECFDF5; --color-success-border: #A7F3D0; --color-success: #059669; --color-success-strong: #065F46; --color-warning-subtle: #FFFBEB; --color-warning-border: #FDE68A; --color-warning: #D97706; --color-warning-strong: #92400E; --color-error-subtle: #FEF2F2; --color-error-border: #FECACA; --color-error: #DC2626; --color-error-strong: #991B1B; /* Info dzieli rodzinę z marką — świadomie. W tej aplikacji „informacja" i „w toku" to ten sam stan: upload leci, ZIP się pakuje. Rozdzielanie ich na dwa błękity dałoby dwa nierozróżnialne niebieskie. */ --color-info-subtle: var(--primary-50); --color-info-border: var(--primary-200); --color-info: var(--primary-600); --color-info-strong: var(--primary-800); } /* ========================================================================= 8. ALIASY — MOTYW CIEMNY ------------------------------------------------------------------------- Trzy stany widza: wybór jawny (data-theme), oraz brak wyboru, gdzie decyduje wyłącznie prefers-color-scheme. Blok @media jest osłonięty :not([data-theme="light"]), żeby jawny wybór jasnego bił ciemny system. ========================================================================= */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-bg: var(--neutral-dark-bg); --color-surface: var(--neutral-dark-surface); --color-surface-raised: var(--neutral-dark-raised); --color-surface-sunken: #191624; /* jaśniejszy od tła — na ciemnym „wgłębienie" przez pociemnienie czyta się jak dziura */ --color-text: var(--neutral-dark-text); --color-text-muted: var(--neutral-dark-muted); --color-text-subtle: var(--neutral-dark-subtle); --color-text-on-brand: #17091F; --color-border: var(--neutral-dark-border); --color-border-strong: var(--neutral-dark-border-2); --color-border-interactive: var(--neutral-500); /* Na ciemnym tle #6D28D9 daje 2,6:1 — za mało na tekst. Marka interaktywna przesuwa się o dwa stopnie w górę skali. */ --color-brand: var(--primary-400); --color-brand-hover: var(--primary-300); --color-brand-active: var(--primary-200); --color-brand-subtle: #241640; --color-brand-border: #3D2A63; --color-accent: var(--accent-400); --color-accent-subtle: #0A2739; --color-accent-border: #14496B; --color-focus: var(--primary-300); --color-success-subtle: #0B2B1F; --color-success-border: #17553C; --color-success: #34D399; --color-success-strong: #A7F3D0; --color-warning-subtle: #2E1E06; --color-warning-border: #5C3D0E; --color-warning: #FBBF24; --color-warning-strong: #FDE68A; --color-error-subtle: #331214; --color-error-border: #66242A; --color-error: #F87171; --color-error-strong: #FECACA; --color-info-subtle: #241640; --color-info-border: #3D2A63; --color-info: var(--primary-400); --color-info-strong: var(--primary-200); /* Na ciemnym tle cień fioletowy znika — musi być czarny i głębszy. */ --shadow-color: 0 0 0; --shadow-1: 0 1px 2px rgb(var(--shadow-color) / 40%), 0 1px 3px rgb(var(--shadow-color) / 30%); --shadow-2: 0 2px 4px rgb(var(--shadow-color) / 40%), 0 4px 12px rgb(var(--shadow-color) / 36%); --shadow-3: 0 4px 8px rgb(var(--shadow-color) / 44%), 0 12px 28px rgb(var(--shadow-color) / 40%); --shadow-4: 0 8px 16px rgb(var(--shadow-color) / 48%), 0 24px 56px rgb(var(--shadow-color) / 46%); } } :root[data-theme="dark"] { color-scheme: dark; --color-bg: var(--neutral-dark-bg); --color-surface: var(--neutral-dark-surface); --color-surface-raised: var(--neutral-dark-raised); --color-surface-sunken: #191624; /* jaśniejszy od tła — na ciemnym „wgłębienie" przez pociemnienie czyta się jak dziura */ --color-text: var(--neutral-dark-text); --color-text-muted: var(--neutral-dark-muted); --color-text-subtle: var(--neutral-dark-subtle); --color-text-on-brand: #17091F; --color-border: var(--neutral-dark-border); --color-border-strong: var(--neutral-dark-border-2); --color-border-interactive: var(--neutral-500); --color-brand: var(--primary-400); --color-brand-hover: var(--primary-300); --color-brand-active: var(--primary-200); --color-brand-subtle: #241640; --color-brand-border: #3D2A63; --color-accent: var(--accent-400); --color-accent-subtle: #0A2739; --color-accent-border: #14496B; --color-focus: var(--primary-300); --color-success-subtle: #0B2B1F; --color-success-border: #17553C; --color-success: #34D399; --color-success-strong: #A7F3D0; --color-warning-subtle: #2E1E06; --color-warning-border: #5C3D0E; --color-warning: #FBBF24; --color-warning-strong: #FDE68A; --color-error-subtle: #331214; --color-error-border: #66242A; --color-error: #F87171; --color-error-strong: #FECACA; --color-info-subtle: #241640; --color-info-border: #3D2A63; --color-info: var(--primary-400); --color-info-strong: var(--primary-200); --shadow-color: 0 0 0; --shadow-1: 0 1px 2px rgb(var(--shadow-color) / 40%), 0 1px 3px rgb(var(--shadow-color) / 30%); --shadow-2: 0 2px 4px rgb(var(--shadow-color) / 40%), 0 4px 12px rgb(var(--shadow-color) / 36%); --shadow-3: 0 4px 8px rgb(var(--shadow-color) / 44%), 0 12px 28px rgb(var(--shadow-color) / 40%); --shadow-4: 0 8px 16px rgb(var(--shadow-color) / 48%), 0 24px 56px rgb(var(--shadow-color) / 46%); } /* ========================================================================= 9. PROFIL URZĄDZENIA (sekcja 8 audytu) ------------------------------------------------------------------------- Przygotowane pod tiery wydajnościowe. Klasę na ustawia skrypt; dopóki nie powstanie recykling DOM, te tokeny nie mają konsumenta. Wartości liczbowe bufora i rozdzielczości miniatur żyją po stronie JS — tutaj tylko to, co da się wyrazić w CSS. ========================================================================= */ :root { --gallery-columns: 2; --wall-animation: none; --density-scale: 1; } :root.perf-mid { --gallery-columns: 3; --wall-animation: gallery-scroll-up; } :root.perf-high { --gallery-columns: 4; --wall-animation: gallery-scroll-up; } @media (prefers-reduced-motion: reduce) { :root { --wall-animation: none; } }