Színkezelő

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.

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.

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.