# 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