125 lines
3.8 KiB
Markdown
125 lines
3.8 KiB
Markdown
# 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:
|
|
|
|
```scss
|
|
background: var(--ui-color-menu-bg, #343a40);
|
|
```
|
|
|
|
**Kolejność fallbacków:**
|
|
1. `--ui-color-menu-bg` - zmienna UI generowana przez główną aplikację
|
|
2. `#343a40` - hardcoded fallback dla przenośności
|
|
|
|
### 2. Automatyczna integracja
|
|
|
|
Mixiny w `_theme-mixins.scss` generują zmienne UI dla każdego motywu:
|
|
|
|
```scss
|
|
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
|
|
|
|
### Kolory menu
|
|
- `--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:
|
|
|
|
```scss
|
|
: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:
|
|
|
|
```scss
|
|
.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:
|
|
|
|
```scss
|
|
html[theme="custom"] {
|
|
--ui-color-menu-bg: #your-custom-color;
|
|
--ui-color-menu-text: #your-text-color;
|
|
}
|
|
```
|
|
|
|
## Zalety tego podejścia
|
|
|
|
1. **Automatyczna synchronizacja** - UI automatycznie dostosowuje się do zmian motywu
|
|
2. **Fallbacki** - komponenty działają nawet bez systemu motywów
|
|
3. **Elastyczność** - możliwość customizacji kolorów UI niezależnie od głównej aplikacji
|
|
4. **Wydajność** - brak potrzeby rekompilacji przy zmianie motywu
|
|
5. **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
|