theme-system
Spójny system kolorów dla komponentów UI – używaj tokenów, nie hardkodowanych wartości
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill do zarządzania paletą kolorów w OpenChamber. Wymusza użycie tokenów tematycznych zamiast hardkodowanych wartości hex lub klas Tailwinda. System zawiera predefiniowane tokeny dla statusów, interakcji, powierzchni i składni kodu. Możesz dodawać własne motywy poprzez katalog ~/.config/openchamber/themes/. Obowiązkowe reguły dla przycisków i elementów interaktywnych zapewniają spójność wizualną całej aplikacji.
Jak używać
Zainstaluj skill theme-system w swoim projekcie OpenChamber – znajduje się w packages/ui/src/lib/theme/themes/. Skill jest kompatybilny z systemem opencode.
Gdy tworzysz lub modyfikujesz komponent UI, nigdy nie używaj hardkodowanych kolorów hex ani klas Tailwinda. Zamiast tego wybierz odpowiedni token z drzewa decyzyjnego: dla kodu użyj syntax., dla statusów (błędy, ostrzeżenia) użyj status., dla głównego przycisku akcji użyj primary., dla elementów interaktywnych użyj interactive., dla warstw tła użyj surface.*.
Pamiętaj o krytycznych regułach: surface.elevated to tokeny dla inputów, kart i paneli; interactive.hover tylko na elementach klikalne; interactive.selection dla stanów aktywnych/wybranych; kolory statusu wyłącznie do rzeczywistych informacji zwrotnych.
Jeśli tworzysz przyciski, używaj wyłącznie wspólnego komponentu Button z packages/ui/src/components/ui/button.tsx. Nie twórz własnych wariantów (ButtonLarge, ButtonSmall) ani nie hardkoduj wysokości i paddingu – wykorzystaj istniejące warianty size.
Wybierz wariant przycisku zgodnie z jego rolą: default dla akcji głównej, outline dla akcji drugorzędnej widocznej, secondary dla miękkiej akcji drugorzędnej, ghost dla akcji o niskim priorytecie w toolbarze.
Aby dodać niestandardowy motyw, umieść plik JSON w ~/.config/openchamber/themes/. System automatycznie załaduje nowe tokeny i udostępni je wszystkim komponentom.