Seed

Seed (semínko) je JSON konfigurace, ve které jsou popsány základní parametry tématu, například brand barvy, kontrast, typografie nebo intenzita neutrálních povrchů.

Ze seedu se následně vygenerují všechny tokeny. V praxi to znamená, že se upraví několik vstupních hodnot a celý vizuální systém se přepočítá konzistentně, bez ručního ladění každé komponenty zvlášť.

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
}

Brand

brandPrimary

Určuje dominantní barvu aplikace. Používá se na hlavních interaktivních prvcích, jako jsou primární tlačítka, aktivní stavy, odkazy nebo klíčové akcenty v navigaci.

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

Doplňuje brandPrimary a slouží pro sekundární akcenty. Typicky se používá v menu, záložkách, štítcích nebo méně důležitých interaktivních prvcích.

Status

statusSuccess

Určuje barevnost úspěšných stavů. Používá se pro potvrzení dokončené akce, korektního výsledku nebo validního vstupu.

Hodnoty: teal green lightgreen lime

statusWarning

Určuje barevnost varování. Používá se tam, kde je potřeba upozornit na riziko, neúplná data nebo krok vyžadující zvýšenou pozornost.

Hodnoty: yellow amber orange deeporange

statusError

Určuje barevnost chyb a kritických stavů. Používá se pro validační chyby, selhání operace a stavy, kde je vyžadována náprava.

Hodnoty: yellow amber orange deeporange red

statusInformation

Určuje barevnost informačních hlášek. Používá se pro neutrální sdělení, průběžný stav procesu nebo kontextové informace bez varovného významu.

Hodnoty: deeppurple navy blue lightblue aqua

Surfaces

surfaceBrand

Určuje, zda bude neutrální část tématu tónována směrem k primární nebo sekundární brand barvě. Nastavení ovlivňuje celkový „nádech“ aplikace i v místech, kde nejsou použity výrazné akcenty.

Hodnoty: primary secondary

surfaceIntensity

Nastavuje intenzitu barevného tónování neutrálních povrchů od 0 (nejjemnější) do 3 (nejvýraznější). Vyšší hodnota dává aplikaci výraznější charakter, nižší působí konzervativněji.

Hodnoty: 0 1 2 3

Contrast

contrastLevel

Určuje minimální úroveň kontrastu mezi textem a pozadím. Volba přímo ovlivňuje čitelnost UI a míru souladu s požadavky přístupnosti.

Hodnoty: aa, a

contrastAlgorithm

Určuje algoritmus, podle kterého se kontrast vyhodnocuje. Volba ovlivňuje to, jak budou dopočítány textové barvy vůči povrchům.

Hodnoty: wcag21, apca

Main font

fontFamilyMain

Určuje hlavní font pro běžný obsah aplikace. Ovlivňuje čitelnost formulářů, tabulek, textových bloků i běžných popisků v komponentách.

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

Určuje výchozí tloušťku hlavního fontu. Pro běžný text bývá nejvhodnější 400, případně jemné doladění podle konkrétního řezu.

Hodnoty: Dle možností fontu 100 – 1000 (pouze celá čísla).

fontAxesMain

Umožňuje nastavit osy variabilního fontu (např. šířku nebo optickou velikost), pokud je font podporuje.

Hodnoty: Podle podporovaných os vybraného fontu. Doporučujeme je konfigurovat v Motivu.

fontFeaturesMain

Umožňuje zapnout OpenType funkce hlavního fontu (např. stylistické alternace nebo ligatury), pokud jsou dostupné.

Hodnoty: Podle podporovaných funkcí vybraného fontu. Doporučujeme je konfigurovat v Motivu.

Headings

fontFamilyHeadings

Určuje font pro nadpisy a výraznější textové prvky. Může být stejný jako hlavní font, nebo odlišný pro jasnější vizuální hierarchii.

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

Určuje výchozí tloušťku fontu pro nadpisy. Vyšší hodnota se používá pro silnější důraz a lepší oddělení nadpisů od běžného textu.

Hodnoty: Dle možností fontu 100 – 1000 (pouze celá čísla).

fontAxesHeadings

Umožňuje nastavit osy variabilního fontu pro nadpisy. Vhodným nastavením lze doladit charakter titulkových řezů.

Hodnoty: Podle podporovaných os vybraného fontu. Doporučujeme je konfigurovat v Motivu.

fontFeaturesHeadings

Umožňuje zapnout OpenType funkce fontu pro nadpisy. Lze tak ovlivnit stylistiku nadpisů bez změny samotného fontu.

Hodnoty: Podle podporovaných funkcí vybraného fontu. Doporučujeme je konfigurovat v Motivu.

Monospace

fontFamilyMonospace

Určuje monospace font pro kód a prvky, kde je důležité přesné zarovnání znaků. Typicky se používá ve výpisech, logu, technických identifikátorech nebo metadatech.

Hodnoty: departure-mono ia-writer-mono kode-mono monaspace-krypton overpass-mono roboto-mono

fontWeightMonospace

Určuje výchozí tloušťku monospace fontu. Pro běžné použití je zpravidla vhodná hodnota 400.

Hodnoty: Dle možností fontu 100 – 1000 (pouze celá čísla).

fontAxesMonospace

Umožňuje nastavit osy variabilního monospace fontu, pokud je font podporuje.

Hodnoty: Podle podporovaných os vybraného fontu. Doporučujeme je konfigurovat v Motivu.

fontFeaturesMonospace

Umožňuje zapnout OpenType funkce monospace fontu, pokud jsou dostupné.

Hodnoty: Podle podporovaných funkcí vybraného fontu. Doporučujeme je konfigurovat v Motivu.

Scale

fontBaseSize

Určuje základní velikost písma, od které se odvozují všechny další stupně typografické škály.

Hodnoty: 13 - 16 (pouze celá čísla)

scaleRatio

Určuje násobek, podle kterého se počítají další stupně typografické škály. Vyšší hodnota zvýrazní rozdíly mezi úrovněmi, nižší je opticky klidnější.

Hodnoty: 1.1 - 1.6 (pouze násobky 0.05)

fontsPath

Určuje cestu k fontům relativně k souboru spectro-theme.css, aby mohly být fonty při načítání tématu správně nalezeny.

Hodnota: ../zde/lezi/fonty/