3.8 KiB

Raw Permalink Blame History

UI Library Theme Integration

Przegląd

Biblioteka UI została przeprojektowana jako niezależna biblioteka z własnym systemem zmiennych CSS. Główna aplikacja generuje zmienne UI dla każdego motywu, zapewniając pełną integrację przy zachowaniu przenośności biblioteki.

Jak to działa

1. Niezależne zmienne CSS

Komponenty UI używają tylko własnych zmiennych CSS z hardcoded fallbackami:

background: var(--ui-color-menu-bg, #343a40);

Kolejność fallbacków:

--ui-color-menu-bg - zmienna UI generowana przez główną aplikację
#343a40 - hardcoded fallback dla przenośności

2. Automatyczna integracja

Mixiny w _theme-mixins.scss generują zmienne UI dla każdego motywu:

html[theme="default-light"] {
  --ui-color-menu-bg: var(--color-bg-dark);
  --ui-color-menu-text: var(--color-text-white);
  --ui-color-menu-hover: var(--color-hover-bg);
  // ... inne zmienne
}

Dostępne zmienne UI

--ui-color-menu-bg - tło menu
--ui-color-menu-text - tekst menu
--ui-color-menu-hover - hover menu
--ui-color-menu-active - aktywny element menu
--ui-color-menu-border - obramowanie menu

Kolory zawartości

--ui-color-content-bg - tło obszaru zawartości
--ui-color-content-text - tekst zawartości

Kolory ikon

--ui-color-icon-primary - ikony podstawowe
--ui-color-icon-secondary - ikony drugorzędne
--ui-color-icon-muted - ikony wyciszone

Komponenty z integracją motywów

✅ Zintegrowane komponenty:

MenuComponent - menu boczne z automatycznym dostosowaniem kolorów
MenuItemComponent - elementy menu z hover states
ContentComponent - obszar zawartości z theme-aware tłem
IconComponent - ikony z kolorami z motywu

📋 Struktura komponentów:

:host {
    // Podstawowe style layoutu
    display: flex;
    
    // Theme-aware kolory z fallbackami
    background: var(--ui-color-menu-bg, var(--color-bg-dark, #343a40));
    color: var(--ui-color-menu-text, var(--color-text-white, #ffffff));
    
    // Hover states
    &:hover {
        background: var(--ui-color-menu-hover, var(--color-hover-bg, rgba(255, 255, 255, 0.1)));
    }
}

Obsługiwane motywy

Biblioteka UI automatycznie dostosowuje się do wszystkich motywów głównej aplikacji:

✅ system - automatyczne wykrywanie preferencji systemowych
✅ default-light - jasny motyw domyślny
✅ default-dark - ciemny motyw z niebieskimi akcentami
✅ monochrome-light - monochromatyczny jasny
✅ monochrome-dark - monochromatyczny ciemny

Dodawanie nowych komponentów

Przy tworzeniu nowych komponentów UI, używaj zmiennych CSS z fallbackami:

.new-component {
    background: var(--ui-color-primary, var(--color-primary, #2c3e50));
    color: var(--ui-color-text, var(--color-text-white, #ffffff));
    border: 1px solid var(--ui-color-border, var(--color-border, #e0e0e0));
}

Customizacja

Jeśli potrzebujesz różnych kolorów dla UI niż w głównej aplikacji, możesz nadpisać zmienne UI:

html[theme="custom"] {
  --ui-color-menu-bg: #your-custom-color;
  --ui-color-menu-text: #your-text-color;
}

Zalety tego podejścia

Automatyczna synchronizacja - UI automatycznie dostosowuje się do zmian motywu
Fallbacki - komponenty działają nawet bez systemu motywów
Elastyczność - możliwość customizacji kolorów UI niezależnie od głównej aplikacji
Wydajność - brak potrzeby rekompilacji przy zmianie motywu
Spójność - wszystkie komponenty UI używają tych samych zmiennych

Pliki systemu

packages/ui/src/lib/styles/_theme-mixins.scss - mixiny do generowania zmiennych
packages/ui/src/lib/styles/ui-themes.scss - główny plik integracji
src/styles.scss - import integracji w głównej aplikacji
src/themes.scss - system motywów głównej aplikacji

3.8 KiB Raw Permalink Blame History