Design tokens
WebJET Elements uses global CSS tokens as the basis for the entire visual layer. Instead of rewriting styles on components in isolation, it's more efficient to start here: with typography, spacing, colors, radiuses, and timings.
The following overview acts as a central reference for the default theme and is a good starting point when creating a custom branding or design system on top of WebJET Elements.
Okraje
Border tokeny definujú základný tvar okraja v systéme. Zahŕňajú štýl, hrúbku aj radius, z ktorého potom dedia inputs, karty, menu a ďalšie komponenty.
Style a šírka
Globálne border tokeny, ktoré používajú inputs, menu, dialógy aj layout separátory.
| Token | Hodnota | Ukážka | Popis |
|---|---|---|---|
--wje-border-style | solid | Predvolený štýl okraja v celom systéme. | |
--wje-border-width | 1px | Základná hrúbka okrajov pre komponenty a oddeľovače. |
Border radius
Od jemne zaoblených rohov až po fully rounded komponenty.
| Token | Hodnota | Ukážka | Popis |
|---|---|---|---|
--wje-border-radius-small | 0.125rem (2px) | Subtílne zaoblenie pri kompaktných prvkoch. | |
--wje-border-radius-medium | 0.25rem (4px) | Bezpečný default pre inputs a menšie karty. | |
--wje-border-radius-large | 0.5rem (8px) | Viditeľnejšie zaoblenie pri tlačidlách a paneloch. | |
--wje-border-radius-x-large | 0.75rem (12px) | Vzdušnejšie bloky a moderné surfaces. | |
--wje-border-radius-2x-large | 1rem (16px) | Hero cards, dialógy a výraznejšie kontejnery. | |
--wje-border-radius-circle | 50% | Kruhové avatary, ikony a bullet prvky. | |
--wje-border-radius-pill | 50rem (800px) | Plne zaoblené chips, toggles a segmented controls. |
Farby
Farebný systém kombinuje základné povrchy, textové aliasy a plné tónové škály pre sémantické použitie v komponentoch. Alias tokeny používajú komponenty priamo, škály dávajú priestor na jemné ladenie.
Povrchy a text
Základné tokeny pre pozadie, text a linky medzi komponentmi.
| Token | Hodnota | Ukážka | Popis |
|---|---|---|---|
--wje-background | var(--wje-color-contrast-0) | Primárne pozadie aplikácie alebo kontajnera. | |
--wje-color | hsl(0, 0%, 29%) | Aa | Predvolená farba textu a ikon. |
--wje-border-color | var(--wje-color-contrast-3) | Štandardný okraj pre inputs, cards a separátory. | |
--wje-color-menu | hsl(220, 15%, 15%) | Tmavý povrch pre navigáciu a silné kontrastné plochy. | |
--wje-color-contrast | hsl(0, 0%, 95%) | Doplnkový kontrastný povrch proti základnému textu alebo menu. |
Sémantické farby
Alias tokeny, ktoré používajú komponenty pri atribúte `color`.
| Token | Hodnota | Ukážka | Popis |
|---|---|---|---|
--wje-color-primary | var(--wje-color-primary-11) | Hlavná brand farba pre CTA, akcenty a interaktívne stavy. | |
--wje-color-complete | var(--wje-color-complete-11) | Sekundárna výrazná modrá pre doplnkové akcie a vizualizácie. | |
--wje-color-success | var(--wje-color-success-11) | Pozitívne stavy, potvrdenia a úspešné výsledky. | |
--wje-color-warning | var(--wje-color-warning-11) | Upozornenia a mäkšie negatívne stavy s vyššou viditeľnosťou. | |
--wje-color-danger | var(--wje-color-danger-11) | Kritické chyby, deštruktívne akcie a rizikové upozornenia. | |
--wje-color-info | var(--wje-color-info-11) | Neutrálne informačné bloky a doplnkové kontextové UI. |
Tónové škály
Sémantické palety majú 11 krokov a kontrastná škála zobrazuje všetky reálne tokeny vrátane kroku `0`. Svetlejšie tóny slúžia pre fill surfaces a hover states, tmavšie pre text, outline a výrazné akcenty.
Primary
Brand a primárne CTA.
--wje-color-primary-1hsla(261, 70%, 96%, 1)--wje-color-primary-2hsla(260, 66%, 92%, 1)--wje-color-primary-3hsla(260, 64%, 88%, 1)--wje-color-primary-4hsla(260, 61%, 84%, 1)--wje-color-primary-5hsla(260, 63%, 80%, 1)--wje-color-primary-6hsla(259, 61%, 76%, 1)--wje-color-primary-7hsla(258, 61%, 72%, 1)--wje-color-primary-8hsla(257, 61%, 68%, 1)--wje-color-primary-9hsla(254, 67%, 62%, 1)--wje-color-primary-10hsla(254, 59%, 45%, 1)--wje-color-primary-11hsla(254, 59%, 35%, 1)Complete
Silná sekundárna modrá.
--wje-color-complete-1hsla(233, 90%, 96%, 1)--wje-color-complete-2hsla(229, 89%, 93%, 1)--wje-color-complete-3hsla(229, 86%, 89%, 1)--wje-color-complete-4hsla(229, 86%, 86%, 1)--wje-color-complete-5hsla(228, 85%, 82%, 1)--wje-color-complete-6hsla(226, 82%, 78%, 1)--wje-color-complete-7hsla(225, 83%, 74%, 1)--wje-color-complete-8hsla(223, 83%, 70%, 1)--wje-color-complete-9hsla(211, 100%, 60%, 1)--wje-color-complete-10hsla(211, 100%, 45%, 1)--wje-color-complete-11hsla(211, 100%, 28%, 1)Success
Pozitívne stavy a potvrdenia.
--wje-color-success-1hsla(147, 44%, 95%, 1)--wje-color-success-2hsla(149, 41%, 90%, 1)--wje-color-success-3hsla(149, 40%, 85%, 1)--wje-color-success-4hsla(150, 41%, 80%, 1)--wje-color-success-5hsla(149, 42%, 75%, 1)--wje-color-success-6hsla(150, 41%, 70%, 1)--wje-color-success-7hsla(151, 42%, 65%, 1)--wje-color-success-8hsla(152, 42%, 59%, 1)--wje-color-success-9hsla(158, 67%, 45%, 1)--wje-color-success-10hsla(158, 74%, 30%, 1)--wje-color-success-11hsla(158, 93%, 23%, 1)Warning
Upozornenia a mäkké rizikové signály.
--wje-color-warning-1hsla(45, 100%, 96%, 1)--wje-color-warning-2hsla(47, 100%, 93%, 1)--wje-color-warning-3hsla(46, 100%, 90%, 1)--wje-color-warning-4hsla(46, 100%, 87%, 1)--wje-color-warning-5hsla(46, 100%, 84%, 1)--wje-color-warning-6hsla(46, 100%, 81%, 1)--wje-color-warning-7hsla(46, 100%, 77%, 1)--wje-color-warning-8hsla(47, 100%, 74%, 1)--wje-color-warning-9hsla(47, 100%, 67%, 1)--wje-color-warning-10hsla(47, 100%, 53%, 1)--wje-color-warning-11hsla(47, 75%, 38%, 1)Danger
Chyby, mazanie a kritické stavy.
--wje-color-danger-1hsla(9, 100%, 96%, 1)--wje-color-danger-2hsla(12, 100%, 91%, 1)--wje-color-danger-3hsla(11, 94%, 87%, 1)--wje-color-danger-4hsla(10, 91%, 83%, 1)--wje-color-danger-5hsla(9, 87%, 79%, 1)--wje-color-danger-6hsla(10, 82%, 74%, 1)--wje-color-danger-7hsla(8, 80%, 70%, 1)--wje-color-danger-8hsla(8, 77%, 65%, 1)--wje-color-danger-9hsla(3, 78%, 59%, 1)--wje-color-danger-10hsla(3, 68%, 41%, 1)--wje-color-danger-11hsla(3, 81%, 31%, 1)Info
Neutrálna informačná škála.
--wje-color-info-1hsla(210, 5%, 92%, 1)--wje-color-info-2hsla(204, 6%, 85%, 1)--wje-color-info-3hsla(210, 7%, 78%, 1)--wje-color-info-4hsla(203, 5%, 71%, 1)--wje-color-info-5hsla(213, 6%, 65%, 1)--wje-color-info-6hsla(203, 6%, 58%, 1)--wje-color-info-7hsla(208, 6%, 52%, 1)--wje-color-info-8hsla(210, 7%, 45%, 1)--wje-color-info-9hsla(207, 20%, 35%, 1)--wje-color-info-10hsla(207, 16%, 27%, 1)--wje-color-info-11hsla(207, 36%, 16%, 1)Contrast
Neutrálna kontrastná škála pre texty a surfaces.
--wje-color-contrast-0hsla(0, 0%, 100%, 1)--wje-color-contrast-1hsla(0, 0%, 98%, 1)--wje-color-contrast-2hsla(240, 5%, 96%, 1)--wje-color-contrast-3hsla(240, 6%, 90%, 1)--wje-color-contrast-4hsla(240, 5%, 84%, 1)--wje-color-contrast-5hsla(240, 5%, 65%, 1)--wje-color-contrast-6hsla(240, 4%, 46%, 1)--wje-color-contrast-7hsla(240, 5%, 34%, 1)--wje-color-contrast-8hsla(240, 5%, 26%, 1)--wje-color-contrast-9hsla(240, 4%, 16%, 1)--wje-color-contrast-10hsla(240, 6%, 10%, 1)--wje-color-contrast-11hsla(240, 7%, 8%, 1)Tiene
Shadow tokeny dávajú komponentom hĺbku bez toho, aby každá časť UI používala vlastný box-shadow. Vhodné sú pre menu, tooltips, karty aj väčšie overlay vrstvy.
Shadow scale
Stupnica tieňov pre jemnú hĺbku, floating menu aj výraznejšie plávajúce surfaces.
| Token | Hodnota | Ukážka | Popis |
|---|---|---|---|
--wje-shadow-small | 0 1px 2px rgba(0, 0, 0, 0.05) | Najjemnejší tieň pre drobné oddelenie od pozadia. | |
--wje-shadow-medium | 2px 2px 11px 0px hsla(0, 0%, 0%, 0.08) | Predvolená elevácia pre menšie plávajúce vrstvy a menu. | |
--wje-shadow-large | 0 4px 8px rgba(0, 0, 0, 0.1) | Výraznejší tieň pre karty a zvýraznené bloky. | |
--wje-shadow-x-large | 0 8px 16px rgba(0, 0, 0, 0.1) | Silnejšia elevácia pre dialógy, pickery a floating panely. | |
--wje-shadow-2x-large | 0 16px 32px rgba(0, 0, 0, 0.1) | Najvýraznejší systémový tieň pre veľké prekryvné vrstvy. |
Rozostupy
Modulárna spacing škála drží komponenty aj layout v jednom rytme. Začni `medium` ako základom a smerom hore alebo dole škáluj podľa hustoty rozhrania.
Spacing scale
Jemná modulárna mriežka pre paddingy, gapy a vertikálny rytmus.
| Token | Hodnota | Ukážka | Popis |
|---|---|---|---|
--wje-spacing-4x-small | 0.125rem (2px) | Mikro medzery medzi ikonou a textom. | |
--wje-spacing-3x-small | 0.25rem (4px) | Tesné oddelenie inline prvkov. | |
--wje-spacing-2x-small | 0.375rem (6px) | Kompaktné layouty a husté toolbary. | |
--wje-spacing-x-small | 0.5rem (8px) | Malé vnútorné odsadenie a rozostup tagov. | |
--wje-spacing-small | 0.75rem (12px) | Predvolený menší padding vo formulároch a kartách. | |
--wje-spacing-medium | 1rem (16px) | Základná mriežka pre bežné rozloženie UI. | |
--wje-spacing-large | 1.5rem (24px) | Sekčné odsadenie a pohodlný gap medzi blokmi. | |
--wje-spacing-x-large | 2rem (32px) | Vzdušnejšie layouty a obsahové sekcie. | |
--wje-spacing-2x-large | 2.5rem (40px) | Silnejší odstup medzi významnými obsahovými celkami. | |
--wje-spacing-3x-large | 3rem (48px) | Hero sekcie a veľké card layouts. | |
--wje-spacing-4x-large | 4.5rem (72px) | Najväčší rytmický odsadený priestor. |
Prechody
Krátke transition tokeny držia interakcie svižné a konzistentné. Hover na ukážku v tabuľke ti ukáže, ako sa mení tempo pohybu medzi jednotlivými presetmi.
Transition
Tri základné rýchlosti pre hovorivejšie, ale stále svižné UI.
| Token | Hodnota | Ukážka | Popis |
|---|---|---|---|
--wje-transition-fast | 0.2s ease-in-out | Hover a focus feedback bez zdržania. | |
--wje-transition-medium | 0.4s ease-in-out | Vyvážené pre expanzie, dropdowny a panelové zmeny. | |
--wje-transition-slow | 0.6s ease-in-out | Najpomalší timing pre väčšie, nápadnejšie presuny. |
Typografia
Typografické tokeny definujú, ako čitateľne a konzistentne pôsobí celé UI. Zahŕňajú font family, veľkostnú škálu, hmotnosti, line height aj letter spacing.
Rodiny písma
Základ pre textový tón dokumentácie, komponentov a výraznejšie akcenty.
| Token | Hodnota | Ukážka | Popis |
|---|---|---|---|
--wje-font-family | -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji' | WebJET Elements | Primárny systémový font pre text a väčšinu komponentov. |
--wje-font-family-secondary | 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif | Brand heading | Sekundárna family pre výraznejšie nadpisy alebo marketingové akcenty. |
Veľkosti písma
Stupnica od drobných helper textov až po výrazné hero nadpisy.
| Token | Hodnota | Ukážka | Popis |
|---|---|---|---|
--wje-font-size-2x-small | 0.5rem (8px) | Ag | Najmenšie pomocné mikrotexty. |
--wje-font-size-x-small | 0.625rem (10px) | Ag | Drobné metadáta alebo utilitné popisy. |
--wje-font-size-small | 0.75rem (12px) | Ag | Kompaktné texty vo formulároch a sekundárnych UI vrstvách. |
--wje-font-size | 0.875rem (14px) | Ag | Predvolená veľkosť textu v komponentoch. |
--wje-font-size-medium | 1rem (16px) | Ag | Telo textu s pohodlnou čitateľnosťou. |
--wje-font-size-large | 1.25rem (20px) | Ag | Menšie nadpisy a silnejšie akcenty v obsahu. |
--wje-font-size-x-large | 1.5rem (24px) | Ag | Výrazné sekčné nadpisy. |
--wje-font-size-2x-large | 2.25rem (36px) | Ag | Hero alebo page-level heading. |
--wje-font-size-3x-large | 3rem (48px) | Ag | Veľké promo alebo landing page titulky. |
--wje-font-size-4x-large | 4.5rem (72px) | Ag | Najsilnejší display typography token. |
Hrúbka písma
Päť úrovní váhy od jemných doplnkov po dôrazné titulky.
| Token | Hodnota | Ukážka | Popis |
|---|---|---|---|
--wje-font-weight-light | 300 | Light emphasis | Jemný doplnkový text alebo menej dôležité UI štítky. |
--wje-font-weight-normal | 400 | Normal reading | Predvolená váha dlhších textov. |
--wje-font-weight-medium | 500 | Medium label | Jemný dôraz bez prílišnej ťažkosti. |
--wje-font-weight-semibold | 600 | Semibold action | Silnejšie CTA a menšie headingy. |
--wje-font-weight-bold | 700 | Bold title | Maximálny dôraz v rámci systémovej typografie. |
Line height
Rytmus riadkov pre husté UI, štandardné texty aj voľnejšie layouty.
| Token | Hodnota | Ukážka | Popis |
|---|---|---|---|
--wje-line-height-denser | 1.2 | Dense linesfit more content | Veľmi kompaktné titulky alebo číselné výstupy. |
--wje-line-height-dense | 1.4 | Dense rhythmfor compact UI | Hustejšie UI labely a tabuľkové texty. |
--wje-line-height-normal | 1.5 | Default rhythmfor components | Predvolený balans čitateľnosti a hustoty. |
--wje-line-height-loose | 1.6 | Looser readingfor content blocks | Voľnejší text v obsahových blokoch. |
--wje-line-height-looser | 1.8 | Editorial rhythmwith more air | Najvzdušnejšie layouty a delikátnejšie editorial časti. |
Letter spacing
Doladenie hustoty znakov od tesných nadpisov po rozvoľnené štítky.
| Token | Hodnota | Ukážka | Popis |
|---|---|---|---|
--wje-letter-spacing-tightest | -0.05em | WEBJET | Najtesnejší rozstup pre výrazné display nadpisy. |
--wje-letter-spacing-tighter | -0.025em | WEBJET | Jemne stiahnuté headingy a CTA. |
--wje-letter-spacing-normal | 0em | WebJET | Neutrálna hodnota pre bežný text. |
--wje-letter-spacing-wider | 0.025em | WEBJET | Vhodné pre tagy, microcopy a doplnkové labely. |
--wje-letter-spacing-widest | 0.05em | WEBJET | Najvoľnejší rozostup pre menšie uppercase labely. |