Seed
Seed (semínko) uchovává jen několik základních parametrů, které určují vzhled tématu. Z nich je možné generovat široké spektrum témat, což umožňuje rychlou přizpůsobitelnost bez potřeby složitých úprav. Tento přístup zajišťuje flexibilitu při práci na různých projektech a zároveň udržuje konzistenci napříč všemi variacemi témat.
Definice v JSON
Section titled “Definice v JSON”{ "brandPrimary": "blue", "brandSecondary": "orange", "statusSuccess": "green", "statusWarning": "amber", "statusError": "red", "statusInformation": "lightblue", "surfaceBrand": "primary", "surfaceIntensity": "2", "contrastLevel": "aa", "contrastAlgorithm": "wcag21", "fontFamilyMain": "zalando-sans", "fontFamilyHeadings": "zalando-sans", "fontFamilyMonospace": "roboto-mono", "fontWeightMain": 400, "fontWeightHeadings": 600, "fontWeightMonospace": 400, "fontAxesMain": "\"wdth\" 94", "fontAxesHeadings": "\"wdth\" 104", "fontAxesMonospace": "initial", "fontFeaturesMain": "initial", "fontFeaturesHeadings": "initial", "fontFeaturesMonospace": "initial", "fontsPath": "../fonts/", "fontBaseSize": 13, "scaleRatio": 1.2}brandPrimary
Section titled “brandPrimary”Určuje dominantní barvu aplikace, která se používá pro klíčové vizuální prvky, jako jsou tlačítka, odkazy, checkboxy a další interaktivní komponenty. Tato barva je základem vizuální identity aplikace a pomáhá vytvořit jednotný a snadno rozpoznatelný design, který podporuje značku a usnadňuje orientaci pro uživatele.
Hodnoty: pink fuchsia deeppurple navy blue lightblue aqua teal green lightgreen lime yellow amber orange deeporange red brown gray silver black nebo HEX barva #rrggbb
brandSecondary
Section titled “brandSecondary”Doplňuje primární barvu a je ideální pro použití v navigačním menu, záložkách a dalších podpůrných prvcích. Tato barva může aplikaci jednoduše zpestřit nebo navazovat na logo projektu, které může mít více barev. Projektu dodává vizuální rozmanitost a oživení.
Hodnoty: pink fuchsia deeppurple navy blue lightblue aqua teal green lightgreen lime yellow amber orange deeporange red brown gray silver black nebo HEX barva #rrggbb
statusSuccess
Section titled “statusSuccess”Používá se pro označení úspěšných stavů, jako je potvrzení akcí nebo oznámení o dokončení. Barvy v této kategorii navozují pocit klidu a spolehlivosti.
Hodnoty: teal green lightgreen lime
statusWarning
Section titled “statusWarning”Upozorňuje na potenciální problémy nebo varování. Barvy v této kategorii přitahují pozornost a signalizují opatrnost.
Hodnoty: yellow amber orange deeporange
statusError
Section titled “statusError”Označuje chyby a kritické stavy. Tyto barvy jasně signalizují problémy, které vyžadují nápravu.
Hodnoty: yellow amber orange deeporange red
statusInformation
Section titled “statusInformation”Slouží k zobrazení doplňujících informací nebo neutrálních oznámení.
Hodnoty: deeppurple navy blue lightblue aqua
surfaceBrand
Section titled “surfaceBrand”Určuje, zda bude jako základní barva neutrálních povrchů použita primární nebo sekundární brand barva, podle toho, která lépe odpovídá preferovanému vzhledu.
Hodnoty: primary secondary
surfaceIntensity
Section titled “surfaceIntensity”Nastavuje úroveň sytosti neutrálních povrchů od žádné (0) po nejvýraznější (3), což umožňuje přizpůsobit celkový vizuální dojem aplikace.
Hodnoty: 0 1 2 3
contrastLevel
Section titled “contrastLevel”Určuje požadovanou úroveň kontrastu mezi textem a pozadím. Hodnota aa odpovídá standardní úrovni doporučené specifikací WCAG 2.1, zatímco a představuje nižší úroveň kontrastu vhodnou pro projekty mimo veřejnost.
Hodnoty: aa, a
contrastAlgorithm
Section titled “contrastAlgorithm”Určuje algoritmus pro výpočet kontrastu. wcag21 vychází ze specifikace WCAG 2.1, zatímco apca (Accessible Perceptual Contrast Algorithm) nabízí modernější přístup, který lépe odpovídá lidskému vnímání kontrastu.
Hodnoty: wcag21, apca
fontFamilyMain
Section titled “fontFamilyMain”Slouží pro veškerý běžný obsah aplikace, kde je klíčová čitelnost a jednoduchost. Neměl by být příliš dekorativní, aby text zůstal snadno čitelný i při delším používání.
Hodnoty: comfortaa figtree hubot-sans ia-writer-quattro ibm-plex-sans inter-tight inter lexend-deca mona-sans nunito-sans overpass plus-jakarta-sans quicksand roboto-flex rubik space-grotesk zalando-sans
fontWeightMain
Section titled “fontWeightMain”Určuje tloušťku písma. Pro běžný text je vhodné ponechat výchozí 400, popř. vyzkoušet rozmezí 350 – 450.
Hodnoty: Dle možností fontu 100 – 1000 (pouze celá čísla).
fontAxesMain
Section titled “fontAxesMain”Umožňuje nastavit osy variabilního fontu podle dostupných možností. Pokud není nic specifikováno, použije se výchozí nastavení fontu.
Hodnoty: Podle podporovaných os vybraného fontu. Doporučujeme je konfigurovat v Motivu.
fontFeaturesMain
Section titled “fontFeaturesMain”Umožňuje aktivovat OpenType funkce fontu podle dostupných možností. Pokud není nic specifikováno, použije se výchozí nastavení fontu.
Hodnoty: Podle podporovaných funkcí vybraného fontu. Doporučujeme je konfigurovat v Motivu.
fontFamilyHeadings
Section titled “fontFamilyHeadings”Zvýrazňuje nadpisy větší velikostí, což umožňuje použít výraznější a vizuálně zajímavější typografii. Lze zvolit odlišný font od hlavního, nebo ponechat stejný a upravit jeho parametry pro dynamičtější vzhled.
Hodnoty: comfortaa departure-mono figtree hubot-sans ia-writer-mono ia-writer-quattro ibm-plex-sans inter-tight inter kode-mono lexend-deca mona-sans monaspace-krypton nunito-sans overpass-mono overpass plus-jakarta-sans quicksand roboto-flex roboto-mono rubik space-grotesk zalando-sans
fontWeightHeadings
Section titled “fontWeightHeadings”Určuje tloušťku písma. Pro nadpisy je vhodné využít hodnoty 500 – 1000, výchozí je 700.
Hodnoty: Dle možností fontu 100 – 1000 (pouze celá čísla).
fontAxesHeadings
Section titled “fontAxesHeadings”Umožňuje nastavit osy variabilního fontu podle dostupných možností. Pokud není nic specifikováno, použije se výchozí nastavení fontu.
Hodnoty: Podle podporovaných os vybraného fontu. Doporučujeme je konfigurovat v Motivu.
fontFeaturesHeadings
Section titled “fontFeaturesHeadings”Umožňuje aktivovat OpenType funkce fontu podle dostupných možností. Pokud není nic specifikováno, použije se výchozí nastavení fontu.
Hodnoty: Podle podporovaných funkcí vybraného fontu. Doporučujeme je konfigurovat v Motivu.
fontFamilyMonospace
Section titled “fontFamilyMonospace”Používá se pro zobrazení kódu nebo tam, kde je důležitá přesná zarovnanost znaků. Hodí se také pro technicky laděný design, kde může sloužit nejen pro kód, ale i pro nadpisy nebo specifické prvky rozhraní.
Hodnoty: departure-mono ia-writer-mono kode-mono monaspace-krypton overpass-mono roboto-mono
fontWeightMonospace
Section titled “fontWeightMonospace”Určuje tloušťku písma. Pro běžný text je vhodné ponechat výchozí 400, popř. vyzkoušet rozmezí 350 – 450.
Hodnoty: Dle možností fontu 100 – 1000 (pouze celá čísla).
fontAxesMonospace
Section titled “fontAxesMonospace”Umožňuje nastavit osy variabilního fontu podle dostupných možností. Pokud není nic specifikováno, použije se výchozí nastavení fontu.
Hodnoty: Podle podporovaných os vybraného fontu. Doporučujeme je konfigurovat v Motivu.
fontFeaturesMonospace
Section titled “fontFeaturesMonospace”Umožňuje aktivovat OpenType funkce fontu podle dostupných možností. Pokud není nic specifikováno, použije se výchozí nastavení fontu.
Hodnoty: Podle podporovaných funkcí vybraného fontu. Doporučujeme je konfigurovat v Motivu.
fontBaseSize
Section titled “fontBaseSize”Výchozí velikost písma, od které se odvíjejí ostatní stupně.
Hodnoty: 13 - 16 (pouze celá čísla)
scaleRatio
Section titled “scaleRatio”Násobek, podle kterého se vypočítávají velikosti dalších stupňů
Hodnoty: 1.1 - 1.6 (pouze násobky 0.05)
fontsPath
Section titled “fontsPath”Soubory s fonty musí být odkazovány pomocí cesty relativní k CSS souboru tématu Spectro, aby bylo zajištěno jejich správné načtení.
Hodnota: ../zde/lezi/fonty/