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",
  "fontFamilyDecorative": "cormorant-garamond",
  "fontWeightMain": 400,
  "fontWeightHeadings": 600,
  "fontWeightMonospace": 400,
  "fontWeightDecorative": 400,
  "fontAxesMain": "\"wdth\" 94",
  "fontAxesHeadings": "\"wdth\" 104",
  "fontAxesMonospace": "initial",
  "fontAxesDecorative": "initial",
  "fontFeaturesMain": "initial",
  "fontFeaturesHeadings": "initial",
  "fontFeaturesMonospace": "initial",
  "fontFeaturesDecorative": "initial",
  "fontsPath": "../fonts/",
  "fontBaseSize": 13,
  "scaleRatio": 1.2,
  "radiusIntensity": "2",
  "cornerShape": "round"
}

Poznámka

V Motivu lze parametry měnit interaktivně v bočním panelu, v Motivu CLI jsou parametry upravovány přímo v JSON souboru.

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.

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

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

Upozornění

Tato volba je v Motivu skryta, ale v Motivo CLI ji lze upravit. Algoritmus APCA získá na významu s příchodem specifikace WCAG 3.0. Doporučujeme ponechat wcag21, ale pro interní projekty můžete bez obav využít i 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 libre-baskerville lora mona-sans nunito-sans overpass playfair-display 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 cormorant-garamond departure-mono figtree hubot-sans ia-writer-mono ia-writer-quattro ibm-plex-sans inter-tight inter kalnia kode-mono lexend-deca libre-baskerville lora mona-sans monaspace-krypton nunito-sans overpass-mono overpass playfair-display 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.

Decorative

fontFamilyDecorative

Určuje dekorativní font pro akcenty, slogany a marketingové titulky, kde je žádoucí výrazný vizuální charakter. Není určen pro delší texty. Pokud font disponuje italic variantou, lze ji využít pomocí font-style: italic.

Hodnoty: bodoni-moda caveat cormorant-garamond departure-mono doto gluten kalnia libre-baskerville lora merienda pixelify-sans playfair-display playwrite-cz savate tektur tourney

fontWeightDecorative

Určuje výchozí tloušťku dekorativního fontu. Pro jemné akcenty je vhodná hodnota 300 – 400, pro výrazné titulky 600 – 900.

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

fontAxesDecorative

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

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

fontFeaturesDecorative

Umožňuje zapnout OpenType funkce dekorativního fontu. Pokud font obsahuje italic variantu jako font-face pár, lze ji aktivovat hodnotou "italic" 1.

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)

Corner

radiusIntensity

Určuje škálu poloměru rohů. Každá úroveň definuje konkrétní pixelové hodnoty pro všechny varianty zaoblení (--radius-subtle, --radius, --radius-strong, --radius-extreme). Hodnota 0 = bez zaoblení, vyšší číslo = větší zaoblení.

Hodnoty: 0 1 2 3 4

cornerShape

Určuje tvar rohové křivky. Nastavení se projevuje ve všech komponentách, které používají LESS mixin .corner() a jeho varianty.

round — standardní CSS border-radius. Výchozí hodnota.

squircle — rohová křivka navazuje na hrany plynuleji než čistá kružnice.

Číslo 1.0–3.0 — superellipse s daným exponentem. Nižší hodnota je hranatější, vyšší se blíží squircle.

Hodnoty: round squircle nebo číslo 1.0–3.0

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/