Skip to main content

Šablóny

WebJET Elements definuje predvolenú tému pomocou globálnych CSS tokenov. Nájdete ich najmä v súboroch light.css a dark.css. Pri tvorbe vlastnej témy odporúčame začať od týchto tokenov a nie od ručného prepisovania jednotlivých interných štýlov komponentov.

Čo tvorí tému

V praxi sa téma skladá z niekoľkých vrstiev:

  1. Globálne povrchy a text – napríklad --wje-background, --wje-color, --wje-border-color.
  2. Typografia a rhythmus – napríklad --wje-font-family, --wje-font-size, --wje-line-height-normal.
  3. Rohy, spacing a tiene – napríklad --wje-border-radius-medium, --wje-spacing-medium, --wje-shadow-medium.
  4. Sémantické farebné škály – napríklad --wje-color-primary-1--wje-color-primary-11.
  5. Komponentové tokeny – napríklad --wje-card-background, --wje-input-border-color, --wje-button-border-radius.

Najdôležitejšie globálne tokeny

TokenVýznam
--wje-backgroundZákladné pozadie aplikácie alebo sekcie
--wje-colorPredvolená farba textu
--wje-border-colorPredvolená farba okrajov
--wje-font-familyPrimárny font
--wje-shadow-mediumStredne silný tieň
--wje-color-primary-1..11Tónová škála primárnej farby
--wje-color-success-1..11Tónová škála success farby
--wje-color-danger-1..11Tónová škála danger farby

Príklad vlastnej témy

:root {
--wje-background: #ffffff;
--wje-color: #111827;
--wje-border-color: #d1d5db;

--wje-font-family: Inter, system-ui, sans-serif;

--wje-color-primary-1: #eef2ff;
--wje-color-primary-9: #4f46e5;
--wje-color-primary-11: #312e81;

--wje-card-background: #ffffff;
--wje-card-color: #111827;
}

Odporúčaný postup pri tvorbe témy

  1. Začnite globálnymi tokenmi (--wje-background, --wje-color, --wje-border-color).
  2. Potom upravte sémantické farebné škály podľa brand manuálu.
  3. Následne dolaďte komponentové tokeny iba tam, kde nestačia globálne hodnoty.
  4. Otestujte svetlý aj tmavý režim a kontrast interaktívnych prvkov.

Generátor odstupňovaných farieb

Ak chcete experimentovať s tónmi pozadia a textu, využite generátor nižšie ako pomocný nástroj pri tvorbe vlastnej témy.

Pozadie

Text

:root {
	--wj-background-color: #ffffff;
	--wj-background-color-rgb: 255,255,255;

	--wj-text-color: #000000;
	--wj-text-color-rgb: 0,0,0;

	--wj-color-step-1: #f2f2f2;
	--wj-color-step-2: #e6e6e6;
	--wj-color-step-3: #d9d9d9;
	--wj-color-step-4: #cccccc;
	--wj-color-step-5: #bfbfbf;
	--wj-color-step-6: #b3b3b3;
	--wj-color-step-7: #a6a6a6;
	--wj-color-step-8: #999999;
	--wj-color-step-9: #8c8c8c;
	--wj-color-step-10: #808080;
	--wj-color-step-11: #737373;
}