# Színkezelő

> Színpaletták, színváltozók, sötét mód, árnyalatok, színharmóniák és segédosztályok kezelése a Stíluskezelő Színek lapján.

A **Színkezelő** az a hely, ahol a webhely újrahasználható színeit létrehozod és karbantartod. A visszatérő színértékekből színrendszert építhetsz: névvel ellátott változókból, opcionális sötét módú értékekből, generált árnyalatokból és segédosztályokból.

Ahelyett, hogy egyenként állítanál be hex, RGB vagy HSL értékeket az elemeken, a színt egyszer elmented, és a színvezérlőkből kiválasztod. Ha később módosítod a mentett színt, minden rá hivatkozó vezérlő a frissített értéket használja.

![A Stíluskezelő Színek lapja az alapértelmezett palettával](./kepek/funkciok-szinkezelo.webp)

*A Stíluskezelő Színek lapja az alapértelmezett palettával* (https://minta-bolt.hu/elemek-teszt/?bricks=run)

A képen a **Stíluskezelő** **Színek** lapja látszik: felül a paletta kiválasztója és az eszközsor, alatta a palettaszínek változónévvel és értékkel.

## Hogyan működik

A Színkezelő a színeket paletták szerint tárolja. A paletta névvel ellátott színcsoport, és minden színnek van:

- generált belső azonosítója;
- CSS-változóneve, például `var(--primary)` vagy `var(--brand-blue)`;
- világos módú értéke, például `#0057ff`, `rgb(0, 87, 255)` vagy `hsl(220 100% 50%)`;
- opcionális sötét módú értéke;
- opcionális generált árnyalatai;
- opcionális segédosztály-beállításai.

A Bricks a palettaszíneket CSS egyéni tulajdonságként (custom property) adja ki. A modern Színkezelő-színek a megadott változónevet használják, tehát a `primary` nevű szín `--primary` lesz. A régebbi mentett színek az átalakításukig a régi `--bricks-color-{id}` formátumot használhatják.

A sötét módú értékek külön, a `:root[data-brx-theme="dark"]` alatt jelennek meg. A segédosztályok és a Színkezelő változói a generált Stíluskezelő CSS-fájlba is bekerülnek, így a segédosztályok a frontenden következetesen használhatók.

## Első lépések

1. Nyisd meg a szerkesztőt.
2. Kattints az eszköztár **Stíluskezelő** ikonjára, vagy nyomd meg a `CMD + .` / `CTRL + .` billentyűket.
3. Nyisd meg a **Színek** lapot.

Új webhelyen a **Színek** lap egy **Default** nevű palettát mutat általános változónevekkel, például `var(--bricks-color-grey-100)`. Ha a projektedhez illő neveket szeretnél, hozz létre saját palettát. Az új, üres paletta kéri az első szín felvételét.

## Paletták

A paletta csak rendszerező csoport. Nem korlátozza, hol használhatók a színek: bármelyik mentett palettaszínt kiválaszthatod a szerkesztő színvezérlőiben.

### Paletta létrehozása

1. Kattints a paletta hozzáadása gombra (plusz ikon).
2. Add meg a paletta nevét, például `Márka`, `Semleges` vagy `Ügyfélszínek`.
3. Kattints a létrehozás gombra.

### Paletta kiválasztása, átnevezése és törlése

- A paletta legördülő listájával váltasz a paletták között.
- A szerkesztés ikonnal nevezheted át az aktív palettát.
- A paletta nevének szerkesztésekor a kuka ikonnal törölheted.

A paletta törlése a benne lévő mentett színeket is törli. Azok az elembeállítások, amelyek a törölt színekre hivatkoztak, már nem biztos, hogy a várt értéket kapják, ezért éles paletta törlése előtt nézd át a fontos sablonokat.

A Bricks a böngésződben megjegyzi az utoljára aktív palettát, így a Színkezelő legközelebb ugyanazon a gépen azt nyitja meg.

## Színek hozzáadása a palettához

Minden mentett színhez változónév és színérték kell.

1. Nyisd meg a palettát.
2. Írd be a változónevet, például `primary`, `surface` vagy `brand-blue`.
3. Adj meg színértéket, vagy válassz a színválasztóból.
4. Kattints a **Szín hozzáadása** gombra.

A változónevet megadhatod `primary`, `--primary` vagy `var(--primary)` alakban, a Bricks `var(--primary)` formára normalizálja. Ha üresen hagyod, a Bricks `var(--bricks-color-{id})` formátumú nevet generál.

A Bricks megakadályozza az ismétlődő változóneveket a Színkezelő palettái és a Globális változók között, hogy két különböző elem ne harcoljon ugyanazért a CSS egyéni tulajdonságnévért.

### Meglévő színek szerkesztése

Kattints a szín szerkesztés ikonjára, hogy módosítsd a változónevét, világos értékét, sötét értékét, árnyalatait vagy segédosztályait.

Ha szerkesztés közben látni szeretnéd a változást az oldalon, kapcsold be a Stíluskezelő fejlécében a vászon előnézetét (szem ikon). Az előnézet a paletta mellett jelenik meg, és azonnal frissül, ha módosítod a szín értékét.

Ha átnevezel egy színváltozót, a Bricks a hozzá generált árnyalatok neveit is frissíti. Ha például a `var(--primary)` színnek vannak világos árnyalatai, azok `var(--primary-l-1)` jellegű nevet kapnak, és az alapváltozó átnevezésekor a nevük is követi.

![Egy szín szerkesztése: sötét mód, világos, sötét és átlátszó árnyalatok, segédosztályok](./kepek/funkciok-szinkezelo-szerkesztes.webp)

*Egy szín szerkesztése: sötét mód, világos, sötét és átlátszó árnyalatok, segédosztályok* (https://minta-bolt.hu/elemek-teszt/?bricks=run)

A képen a szerkesztés megnyitott panelje látszik a **Sötét mód bekapcsolása**, **Világos árnyalatok**, **Sötét árnyalatok** és **Átlátszó árnyalatok** kapcsolókkal, alatta a **Segédosztályok** résszel és a CSS-tulajdonságokkal.

### Szín hozzáadása színvezérlőből

A színvezérlőkben van egy palettaablak. Ha egy vezérlőben egyéni érték áll, a Színkezelőhöz hozzáférő felhasználók közvetlenül a vezérlőből hozzáadhatják az aktuális értéket az aktív palettához.

Ez akkor hasznos, ha tervezés közben találsz egy jó színt, de hosszabb távon az a jobb munkamenet, ha a Színkezelőben tudatosan elnevezett színeket hozol létre, és azokat választod ki a palettából.

## Palettaszínek kiválasztása a vezérlőkben

A legtöbb színvezérlő megnyitja a színpaletta ablakát. Ebben:

- kiválaszthatod az aktív palettát;
- válthatsz a lista- és a rácsnézet között (a listanézet a színek változónevét és értékét mutatja, alatta a generált árnyalatokkal);
- kiválaszthatod a gyökérszíneket és a generált árnyalatokat;
- hozzáadhatod az aktuális színértéket egy palettához, ha van jogosultságod;
- a beállítások ikonnal megnyithatod a Színkezelőt, ha van jogosultságod.

Ha palettaszínt választasz, az elem a mentett színre mutató hivatkozást tárolja, nem csak a nyers színértéket. Ezért frissíti a későbbi palettamódosítás a megjelenést az egész webhelyen.

Ha egy mentett szín már nem található, a Bricks nem tudja feloldani a palettahivatkozást. Ez jellemzően akkor történik, ha a színt vagy a palettát használat után törölték.

## Sötét mód használata

A sötét mód lehetővé teszi, hogy egyetlen színváltozó világos módban egy, sötét módban másik értéket használjon.

1. Kattints bármelyik szín szerkesztés ikonjára.
2. Kapcsold be a **Sötét mód bekapcsolása** kapcsolót.
3. Igazítsd a generált sötét értéket, vagy írj be sajátot.
4. Ha végeztél, mentsd a szerkesztőt.

A sötét mód bekapcsolásakor a Bricks a világos értékből kezdeti sötét értéket generál. Ezt kiindulópontnak tekintsd, ne végleges tervezési irányelvnek, és kézzel ellenőrizd a kontrasztot, különösen a szövegeknél és az interaktív állapotoknál.

Ha kikapcsolod egy szín sötét módját, a Bricks megerősítést kér, és eltávolítja a sötét értéket. A szín sötét módú árnyalatai szintén törlődnek.

## Árnyalatok létrehozása

Az árnyalatok generált, a gyökérszínhez kapcsolt gyermekszínek. Egy gyökérszínnek három árnyalatcsoportja lehet:

- **Világos árnyalatok:** fehér felé kevert színek.
- **Sötét árnyalatok:** fekete felé kevert színek.
- **Átlátszó árnyalatok:** ugyanaz a színárnyalat változó átlátszósággal.

Árnyalatok generálása:

1. Kattints bármelyik szín szerkesztés ikonjára.
2. Kapcsold be valamelyik árnyalattípust.
3. Add meg a lépések számát.
4. Szükség esetén igazítsd az egyes generált árnyalatokat.

Csoportonként 1 és 20 lépés között állíthatod. Ha módosítod a gyökér világos vagy sötét színét, a Bricks újragenerálja az adott módhoz bekapcsolt árnyalatokat. Ha kézzel finomhangoltál egy árnyalatot, a gyökérszín vagy a lépésszám módosítása felülírhatja ezt.

Az árnyalatváltozók az alapváltozó nevét követik:

- `var(--primary-l-1)` a világos árnyalatokhoz
- `var(--primary-d-1)` a sötét árnyalatokhoz
- `var(--primary-t-1)` az átlátszó árnyalatokhoz

A végén álló szám az árnyalat lépése.

Az árnyalatok az interakciós állapotokhoz hasznosak. Állítsd például egy gomb **Háttérszín** értékét `var(--primary)`-re, a `:hover` állapotban pedig `var(--primary-d-1)`-re. Ha később megváltoztatod a `primary` színt, a hover szín az új értékből generálódik újra.

Egy árnyalatcsoport kikapcsolása törli a gyökérszínhez generált árnyalatbejegyzéseket.

## Színharmóniák generálása

A színharmóniák egy kiválasztott alapszínből további gyökérszíneket hoznak létre.

1. Válassz egy alapszínt.
2. Kattints a harmónia ikonra.
3. Válassz harmóniamodellt.
4. Nézd át az előnézeti színeket.
5. Szükség esetén szerkeszd a generált változóneveket.
6. Kattints a színek generálására.

Elérhető modellek:

- **Analóg:** a színkörön egymás melletti színek
- **Monokromatikus:** ugyanazon szín különböző árnyalatai
- **Komplementer:** egymással szemben álló színek
- **Osztott komplementer:** egy komplementer szín kettéosztva
- **Triád:** három egyenletesen elosztott szín
- **Tetrád:** négy szín téglalap mintában

A harmóniaszínek normál gyökérszínként kerülnek az aktuális palettához. A generálás után nem maradnak automatikusan kapcsolatban az alapszínnel.

## Segédosztályok beállítása

A segédosztályok (utility class) a mentett színekből generálnak újrahasználható osztályneveket. Gyökérszínenként és CSS-tulajdonságonként kapcsolhatod be őket.

1. Szerkessz egy színt.
2. Görgess a **Segédosztályok** részhez.
3. Kapcsold be egy vagy több segédtípust.

| Segédtípus | CSS-tulajdonság | Példaosztály |
| --- | --- | --- |
| Háttér | `background-color` | `.bg-primary` |
| Szöveg | `color` | `.text-primary` |
| Szegély | `border-color` | `.border-primary` |
| Körvonal | `outline-color` | `.outline-primary` |
| Kitöltés | `fill` | `.fill-primary` |
| Körvonalszín (SVG) | `stroke` | `.stroke-primary` |

A segédosztályok a gyökérszínhez és annak árnyalataihoz is létrejönnek. Ha a `primary` színnek van világos árnyalata, és bekapcsolod a **Szöveg** segédtípust, a Bricks létrehozhat például `.text-primary` és `.text-primary-l-1` osztályt.

A Bricks a generált segédosztályokhoz megfelelő globális osztályrekordot is létrehoz vagy frissít. Az osztályok CSS-szabályai a generált Stíluskezelő CSS-fájlba kerülnek.

Ha átnevezel egy színváltozót, a Bricks a színhez generált globális osztályok nevét is frissíti. Ha kikapcsolsz egy segédtípust azután, hogy osztályait elemekhez rendelted, nézd át ezeket az elemeket, mert az adott típus generált CSS-e már nem készül el.

## Paletták importálása és exportálása

### Paletta importálása

1. Kattints az importálás ikonra.
2. Húzz be vagy válassz ki egy JSON-fájlt.
3. Nézd át az importálás eredményüzeneteit.

Az importált palettafájlnak a várt szerkezetet kell tartalmaznia: `id`, `name` és `colors`. A Bricks megakadályozza az importálást, ha már létezik azonos nevű paletta.

Az importált színadatokat éles webhelyen használat előtt nézd át. A Bricks a fájl szerkezetét és a névütközést ellenőrzi, de az importált paletta tartalmazhat a webhelyeddel nem egyező elnevezési szokásokat vagy segédosztály-beállításokat.

### Paletta és CSS exportálása

Két exportálási lehetőség van:

- Az aktív paletta exportálása JSON-fájlként, másik Bricks-webhelyen való használatra.
- A **Generált CSS** megnyitása, és az aktív paletta CSS-ének exportálása.

A generált CSS előnézete a változódeklarációkat és az aktív paletta segédosztályait tartalmazza. Ellenőrzéshez és átadáshoz használd. A generált Stíluskezelő CSS-fájlt ne szerkeszd kézzel, mert a Bricks a mentett Színkezelő-adatból újragenerálja.

## Mentés és generált kimenet

A Színkezelő adatai globális szerkesztői adatok. A normál palettamódosítások a szerkesztő mentésekor mentődnek. A paletta importálása az importálás befejezése után tartósan elmenti a frissített palettaadatot.

A Színkezelő adatainak mentésekor a Bricks újragenerálja a Stíluskezelő CSS-fájlját. Ez tartalmazza:

- a paletták színváltozóit;
- a bekapcsolt segédtípusú színek segédosztályait;
- a Globális változók kategóriáiból a skálaosztályokat, ha be vannak állítva.

A színváltozók a Bricks generált CSS-ébe is bekerülnek, hogy a kiválasztott palettaszínek a frontenden is feloldódjanak.

## Hibaelhárítás

### Egy szín nem frissül mindenhol

Nézd meg, hogy az elemek a mentett palettaszínt vagy nyers színértéket használnak-e. A kézzel beírt `#0057ff` nem marad kapcsolatban a `var(--primary)` változóval.

### A változónevet nem lehet menteni

Lehet, hogy a név már létezik egy másik Színkezelő-palettában vagy a Globális változók között. Tokenenként egy egyedi változónevet használj.

### Nem látszik a sötét módú érték

A sötét módú értékek a `:root[data-brx-theme="dark"]` szelektorhoz jelennek meg. Győződj meg róla, hogy az oldal valóban a sötét téma attribútumát használja, és hogy a színnek van sötét értéke.

### A segédosztályok léteznek, de nincs látható hatásuk

Ellenőrizd, hogy a segédtípus még be van-e kapcsolva a gyökérszínnél. Nézd meg azt is, hogy a generált CSS-fájl újragenerálódott-e a módosítás után, és hogy az osztály hozzá van-e rendelve az éppen vizsgált elemhez.

### Az importált paletták jónak látszanak, de váratlanul viselkednek

Importálás után nézd át a változóneveket, az ismétlődő elnevezési szokásokat, a sötét módú értékeket, az árnyalatcsoportokat és a segédosztály-beállításokat. Az importált palettákat a Bricks nem igazítja automatikusan a meglévő elnevezési rendszeredhez.