Kolory akcentu

Kolor akcentu to jedyny kolor marki używany dla przycisków, linków, zaznaczonych stanów i wyróżnień w całym interfejsie — wybierany raz na użytkownika (Ustawienia konta → Preferencje → Kolor akcentu) i stosowany wszędzie przez trzy zmienne CSS: --accent-color/--accent-light-color/--accent-color-opacity. Jest niezależny od motywu dark/light (ten sam akcent stosuje się w obu, tylko z nieco inną nieprzezroczystością) i, co nieoczywiste, dzieli całe słownictwo nazw kolorów z kolorem odznaki projektu — dziesięć nazw, jakie użytkownik może wybrać jako swój akcent, to dokładnie te dziesięć kolorów dostępnych przy tworzeniu projektu, ponownie użyte celowo (selektor przyjmuje ponadto dowolny własny hex), ale reprezentowanych zupełnie inaczej pod spodem dla każdego zastosowania. Ta kategoria dokumentuje cały ten system oraz pułapkę, która z nim przychodzi.

Przewodniki, w kolejności, w jakiej faktycznie będą potrzebne

Dodaj nowy kolor akcentu — przećwiczony przykład dodania jedenastej opcji, teal: każde z czterech miejsc, gdzie trzeba dodać nazwę koloru, we właściwej kolejności, i dlaczego pominięcie któregokolwiek z nich produkuje inny rodzaj widocznego zepsucia.
Użyj koloru akcentu w komponencie — trzy zmienne, kiedy sięgnąć po którą, oraz czym różni się to od własnego, stałego koloru odznaki projektu, mimo że oba ostatecznie pochodzą z tych samych dziesięciu nazw.

Architektura w jednym akapicie

AccentColor (resources/js/types/Accent.ts) to 'default' | ProjectColors | `#${string}` — ponownie użyty ProjectColors (resources/js/types/Projects.ts), ta sama dziesięcio-wartościowa unia, jakiej używa pole color projektu, plus własny 6-cyfrowy hex wybierany we współdzielonym ColorPicker (hex równy presetowi lub domyślnemu jest zapisywany jako ta nazwa przez accentFromHex(); własny dostaje jaśniejszy odcień z lighten()). AccentProvider (resources/js/context/AccentContext.tsx) trzyma dokładnie jeden kawałek stanu, wybrany AccentColor, persystowany do localStorage; przy każdej zmianie (i każdej zmianie motywu, ponieważ nieprzezroczystość różni się per motyw) oblicza nadpisania zmiennych CSS przez getAccentCssVariables() (resources/js/utils/accentColors.ts) i zapisuje je jako style inline na <html> (root.style.setProperty('--accent-color', ...)) — inny mechanizm niż kolory motywu, które żyją całkowicie w statycznym pliku CSS kluczowanym przez [data-theme]. Wybranie 'default' całkowicie usuwa nadpisania inline, spadając z powrotem do zwykłej wartości --accent-color, jaką global.css już definiuje per motyw (#8844da w obu). Wybranie dowolnej innej nazwy odpytuje osobną mapę wartości hex, PROJECT_ACCENT_HEX, kluczowaną tymi samymi dziesięcioma nazwami, z jakich renderuje się kolor odznaki projektu przez getColorTheme() (resources/js/utils/colors.ts) — ale ta druga mapa jest zbudowana z dosłownych klas narzędziowych Tailwinda (bg-red-500, …), nie kodów hex, więc te dwie funkcje nigdy faktycznie nie dzielą kodu, tylko listę poprawnych nazw. Jest jeszcze trzecia, niezależna kopia mapy hex — czysto-JS-owy duplikat wbudowany w skrypt <script> przed pierwszym renderem w resources/views/app.blade.php, potrzebny dlatego, że ten skrypt uruchamia się zanim jakikolwiek bundle JS (a więc i accentColors.ts) w ogóle się załaduje. To właśnie pułapka, którą w pełni omawia przewodnik 1.