/* * Zmienne systemu designu. * * Wszystkie wartości wyglądu — kolory, odstępy, promienie, rozmiary pisma — * są zdefiniowane w tym jednym pliku. Pozostałe arkusze wyłącznie się do nich * odwołują i nie zawierają ani jednej wartości zapisanej wprost. * * Powód: spójność wizualna wynika wtedy z konstrukcji, a nie z dyscypliny * autora. Nie da się przypadkiem użyć odcienia szarości spoza palety ani * odstępu spoza skali, bo takich wartości po prostu nie ma pod ręką. * Zmiana koloru akcentu w całej aplikacji to zmiana jednej linii. * * Jest to zarazem najprostsza możliwa realizacja systemu designu: mechanizm * wbudowany w przeglądarkę, bez preprocesora i bez procesu budowania. */ :root { /* --------------------------------------------------------------------- * Skala odstępów * * Oparta na module 4 px. Ograniczony zbiór wartości wymusza rytm — * odstępy dobierane swobodnie dają układ, w którym nic nie jest * wyraźnie wyrównane, mimo że każda wartość z osobna wygląda sensownie. * ------------------------------------------------------------------ */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-8: 3rem; /* 48px */ /* --------------------------------------------------------------------- * Typografia * * Krój własny (Instrument Sans) zamiast systemowego — decyzja podjęta * świadomie przeciwko wariantowi domyślnie tańszemu, więc warta wyłożenia. * * Krój systemowy nie kosztuje nic: żadnego pliku do pobrania, żadnego * przeskoku układu, tekst widoczny natychmiast. Ma jednak wadę, której nie * da się obejść — nie jest jednym krojem. To samo zdanie składa się inaczej * na Windowsie (Segoe UI), inaczej na macOS (San Francisco), a inaczej na * Androidzie (Roboto). Kroje te różnią się szerokością znaków i wysokością * liter małych, więc gęsty układ tablicy — karty o stałej szerokości, * pigułki etykiet, liczniki — układa się na każdym systemie nieco inaczej, * a odstępy dobrane pod jeden z nich pod pozostałymi są przybliżeniem. * Krój wskazany wprost usuwa tę zmienną: układ wygląda tak samo wszędzie. * * Koszty wariantu wybranego są opłacone, nie pominięte: * * — plik leży na własnym serwerze, nie u Google, więc otwarcie aplikacji * nie łączy się z niczyim serwerem poza naszym (patrz `fonts.css`); * — jest to jeden krój ZMIENNY na wszystkie cztery grubości — 41 kB * w dwóch podzbiorach znaków, z których drugi pobiera się warunkowo; * — `font-display: swap` i `preload` w `index.html` ograniczają skutek * do jednorazowego drgnięcia tekstu, zamiast opóźniać jego pokazanie. * * Lista zastępcza poniżej to poprzedni stos systemowy — obowiązuje, zanim * plik zostanie pobrany, i gdyby nie dało się go pobrać wcale. * ------------------------------------------------------------------ */ --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, monospace; /* Skala oparta na współczynniku ok. 1.2 (tercja mała). */ --text-xs: 0.75rem; /* 12px — etykiety, metadane */ --text-sm: 0.8125rem; /* 13px — tekst interfejsu, karty */ --text-base: 0.875rem; /* 14px — tekst podstawowy */ --text-md: 1rem; /* 16px — nagłówki sekcji */ --text-lg: 1.25rem; /* 20px — tytuły widoków */ --text-xl: 1.5rem; /* 24px — nagłówek strony logowania */ --leading-tight: 1.3; --leading-normal: 1.55; /* --------------------------------------------------------------------- * Promienie zaokrągleń * * Celowo małe. Duże zaokrąglenia wprowadzają charakter zabawowy, który * kłóci się z narzędziem pracy; przy gęstym układzie zjadają dodatkowo * miejsce w narożnikach kart. * ------------------------------------------------------------------ */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-full: 999px; /* --------------------------------------------------------------------- * Wyniesienie ponad tło * * Hierarchię budujemy obramowaniem i kolorem tła, nie cieniem. Cień * sugeruje trzeci wymiar, a przy kilkunastu kartach na ekranie sumuje * się w szary zamęt. Obramowanie o grubości piksela daje jednoznaczną * granicę bez tego kosztu. * * Cienie zostają zarezerwowane dla elementów faktycznie unoszących się * NAD interfejsem: okien modalnych i przeciąganej karty. Dzięki temu * cień niesie informację, zamiast być ozdobnikiem. * ------------------------------------------------------------------ */ --shadow-overlay: 0 8px 24px -8px rgb(0 0 0 / 0.24), 0 2px 8px -4px rgb(0 0 0 / 0.16); --shadow-drag: 0 12px 28px -8px rgb(0 0 0 / 0.32); /* --------------------------------------------------------------------- * Ruch * * Krótkie czasy trwania. Animacja ma potwierdzać, że coś się stało, * a nie kazać na siebie czekać — w narzędziu używanym setki razy * dziennie każde zbędne 100 ms jest odczuwalne. * ------------------------------------------------------------------ */ --ease-out: cubic-bezier(0.2, 0, 0, 1); --duration-fast: 100ms; --duration-base: 160ms; --z-dropdown: 100; --z-overlay: 200; --z-drag: 300; --z-toast: 400; } /* ------------------------------------------------------------------------- * Motyw jasny * * Paleta neutralna zbudowana na jednym odcieniu (hue 220) z niewielkim * nasyceniem, zamiast na czystej szarości. Szarość o zerowym nasyceniu * wygląda przy kolorze akcentu brudno; wspólny odcień spaja całość. * * Kolory nazwane są przez ROLĘ (--surface, --text-muted), a nie przez wygląd * (--szary-100). Dzięki temu ten sam zestaw nazw obsługuje oba motywy — * gdyby nazwy opisywały wygląd, w trybie ciemnym „--szary-100" musiałby być * ciemny, co czyniłoby nazwę myląca. * ---------------------------------------------------------------------- */ :root, :root[data-theme='light'] { color-scheme: light; --bg: hsl(220 20% 97%); /* tło aplikacji */ --surface: hsl(0 0% 100%); /* karty, panele */ --surface-sunken: hsl(220 20% 95%); /* tło kolumny — wgłębienie */ --surface-hover: hsl(220 20% 96%); --border: hsl(220 14% 88%); --border-strong: hsl(220 12% 78%); --text: hsl(220 25% 15%); --text-muted: hsl(220 10% 46%); --text-subtle: hsl(220 10% 60%); --text-inverse: hsl(0 0% 100%); /* Jeden kolor akcentu w całej aplikacji. Druga barwa wiodąca wymusiłaby rozstrzyganie przy każdym elemencie, który z dwóch jest ważniejszy. */ /* PRÓBA: akcent achromatyczny (czarny). Powrót do niebieskiego = usunięcie czterech linii poniżej i odkomentowanie czterech następnych. */ --accent: hsl(0 0% 0%); /* Czerni nie da się przyciemnić, więc stan najechania IDZIE W GÓRĘ jasności. Kierunek odwrotny niż przy barwie chromatycznej, ale zasada ta sama: element pod kursorem ma się odróżniać od spoczynkowego. */ --accent-hover: hsl(0 0% 22%); --accent-subtle: hsl(0 0% 95%); --accent-border: hsl(0 0% 85%); /* --accent: hsl(230 72% 56%); */ /* --accent-hover: hsl(230 72% 50%); */ /* --accent-subtle: hsl(230 72% 96%); */ /* --accent-border: hsl(230 60% 86%); */ /* Barwy znaczeniowe — wyłącznie do komunikatów o stanie. */ --danger: hsl(0 68% 51%); --danger-hover: hsl(0 68% 45%); --danger-subtle: hsl(0 80% 97%); --warning: hsl(35 90% 45%); --warning-subtle: hsl(38 92% 95%); --success: hsl(150 62% 36%); --success-subtle: hsl(150 60% 95%); /* * Priorytet normalny. * * Własny token, choć wartość jest ta sama, którą miał wcześniej akcent. * Kropka priorytetu korzystała dotąd z `--accent` i to była pomyłka * ukryta do czasu, aż akcent się zmienił: dwa elementy miały wspólną * barwę nie dlatego, że coś je łączy, tylko dlatego, że akurat obie * potrzebowały niebieskiego. Priorytet wysoki bierze `--danger`, niski * `--text-subtle` — to skala własna, niezależna od barwy przycisków, * i teraz jest to zapisane w nazwach. */ --priority-normal: hsl(230 72% 56%); /* * Oznaczenia osób w komentarzach (`@Ania`). * * Trzy wartości, nie jedna: samo oznaczenie jest tekstem, ale oznaczenie * osoby CZYTAJĄCEJ ma jeszcze tło i ramkę. Podmiana wyłącznie barwy tekstu * dałaby niebieski napis na szarym tle — wyróżnienie złożone z dwóch * różnych rodzin barw wygląda na niedokończone. * * Wartości powielają odcień `--priority-normal` zamiast się do niego * odwoływać. Odwołanie związałoby ze sobą dwie rzeczy, które nic nie łączą * poza tym, że dziś są tego samego koloru — czyli powtórzyłoby dokładnie * ten błąd, przez który oznaczenia zczerniały razem z przyciskami. */ --mention: hsl(230 72% 56%); --mention-subtle: hsl(230 72% 96%); --mention-border: hsl(230 60% 86%); /* * Etykiety zadań. * * Zamiast 8 par gotowych barw (tło + tekst) × 2 motywy — czyli 32 wartości * do utrzymania — każda etykieta wnosi wyłącznie SWÓJ ODCIEŃ, a nasycenie * i jasność są wspólne i zdefiniowane raz na motyw. Skutek praktyczny: * dołożenie koloru do palety to jedna linia, a zmiana kontrastu wszystkich * etykiet naraz — zmiana jednej liczby. */ --label-sat: 72%; --label-bg-l: 92%; --label-fg-l: 33%; /* Pierścień fokusu — ten sam w obu motywach, zawsze wyraźnie widoczny. */ --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); } /* ------------------------------------------------------------------------- * Motyw ciemny * * Nie jest to odwrócenie motywu jasnego. Dwie różnice wynikają z tego, jak * działa wzrok: * * 1. Tło nie jest czarne, lecz ciemnoszare. Czysta czerń przy jasnym * tekście daje efekt jarzenia się liter na krawędziach (halation), * męczący przy dłuższej pracy. Odcień jest ACHROMATYCZNY (nasycenie 0%) — * wcześniej powierzchnie miały granatowy podton, który barwił cały * interfejs i konkurował z barwami znaczeniowymi. Kolor w tym motywie * niesie odtąd wyłącznie znaczenie: czerwień błędu, zieleń powodzenia, * odcienie etykiet. Wszystko, co jest tylko tłem, jest szare. * 2. Tekst nie jest czysto biały, tylko lekko przygaszony — kontrast * bieli na czerni jest wyższy, niż potrzeba do czytelności, i również * męczy wzrok. * * Kierunek jasności powierzchni jest odwrotny: w motywie jasnym element * wyniesiony jest jaśniejszy od tła, w ciemnym — również jaśniejszy, bo * to światło, a nie ciemność, sygnalizuje bliskość obserwatora. * ---------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --bg: hsl(0 0% 11%); --surface: hsl(0 0% 15%); --surface-sunken: hsl(0 0% 13%); --surface-hover: hsl(0 0% 19%); --border: hsl(0 0% 24%); --border-strong: hsl(0 0% 34%); --text: hsl(0 0% 92%); --text-muted: hsl(0 0% 64%); --text-subtle: hsl(0 0% 50%); --text-inverse: hsl(0 0% 11%); /* * PRÓBA: akcent achromatyczny. W motywie ciemnym jego odpowiednikiem * jest BIEL, nie czerń — akcent musi odcinać się od tła, a czarny * przycisk na ciemnym tle przestałby być widoczny. Achromatyczność * jest tu cechą wspólną obu motywów; sama wartość musi się odwrócić, * dokładnie tak jak odwracają się `--text` i `--surface`. */ --accent: hsl(0 0% 100%); --accent-hover: hsl(0 0% 84%); --accent-subtle: hsl(0 0% 18%); --accent-border: hsl(0 0% 32%); /* --accent: hsl(230 80% 68%); */ /* --accent-hover: hsl(230 80% 74%); */ /* --accent-subtle: hsl(230 40% 20%); */ /* --accent-border: hsl(230 40% 32%); */ --danger: hsl(0 72% 64%); --danger-hover: hsl(0 72% 70%); --danger-subtle: hsl(0 40% 20%); --warning: hsl(38 92% 62%); --warning-subtle: hsl(38 40% 20%); --success: hsl(150 55% 55%); --success-subtle: hsl(150 35% 18%); /* Priorytet normalny — rozjaśniony, jak wszystkie barwy w tym motywie. */ --priority-normal: hsl(230 80% 68%); /* Oznaczenia osób — odcień ten sam, jasność podniesiona jak w całym motywie ciemnym; tło i ramka przyciemnione (patrz motyw jasny). */ --mention: hsl(230 80% 68%); --mention-subtle: hsl(230 40% 20%); --mention-border: hsl(230 40% 32%); /* Etykiety — te same odcienie, inne nasycenie i jasność (patrz motyw jasny). */ --label-sat: 48%; --label-bg-l: 24%; --label-fg-l: 78%; --shadow-overlay: 0 8px 24px -8px rgb(0 0 0 / 0.6), 0 2px 8px -4px rgb(0 0 0 / 0.4); --shadow-drag: 0 12px 28px -8px rgb(0 0 0 / 0.7); } } /* Ten sam motyw ciemny wymuszony przełącznikiem w interfejsie. Reguła zdublowana, ponieważ selektor atrybutu musi zadziałać także wtedy, gdy system operacyjny zgłasza preferencję motywu jasnego. */ :root[data-theme='dark'] { color-scheme: dark; --bg: hsl(0 0% 11%); --surface: hsl(0 0% 15%); --surface-sunken: hsl(0 0% 13%); --surface-hover: hsl(0 0% 19%); --border: hsl(0 0% 24%); --border-strong: hsl(0 0% 34%); --text: hsl(0 0% 92%); --text-muted: hsl(0 0% 64%); --text-subtle: hsl(0 0% 50%); --text-inverse: hsl(0 0% 11%); /* PRÓBA: akcent achromatyczny — w motywie ciemnym biel (patrz komentarz przy tej samej grupie w regule @media powyżej). */ --accent: hsl(0 0% 100%); --accent-hover: hsl(0 0% 84%); --accent-subtle: hsl(0 0% 18%); --accent-border: hsl(0 0% 32%); /* --accent: hsl(230 80% 68%); */ /* --accent-hover: hsl(230 80% 74%); */ /* --accent-subtle: hsl(230 40% 20%); */ /* --accent-border: hsl(230 40% 32%); */ --danger: hsl(0 72% 64%); --danger-hover: hsl(0 72% 70%); --danger-subtle: hsl(0 40% 20%); --warning: hsl(38 92% 62%); --warning-subtle: hsl(38 40% 20%); --success: hsl(150 55% 55%); --success-subtle: hsl(150 35% 18%); /* Priorytet normalny — rozjaśniony, jak wszystkie barwy w tym motywie. */ --priority-normal: hsl(230 80% 68%); /* Oznaczenia osób — odcień ten sam, jasność podniesiona jak w całym motywie ciemnym; tło i ramka przyciemnione (patrz motyw jasny). */ --mention: hsl(230 80% 68%); --mention-subtle: hsl(230 40% 20%); --mention-border: hsl(230 40% 32%); /* Etykiety — te same odcienie, inne nasycenie i jasność (patrz motyw jasny). */ --label-sat: 48%; --label-bg-l: 24%; --label-fg-l: 78%; --shadow-overlay: 0 8px 24px -8px rgb(0 0 0 / 0.6), 0 2px 8px -4px rgb(0 0 0 / 0.4); --shadow-drag: 0 12px 28px -8px rgb(0 0 0 / 0.7); }