Základ systému
Dizajnové tokeny
172 premennýchVšetko, čím sa mení vzhľad systému. Stránka sa číta zo scss/tokens/ pri každom builde, takže sa s paletou nemôže rozísť — a náhľad kreslí tá istá premenná, ktorú použije komponent.
Komponenty siahajú výhradne po vrstve 2. Primitíva sú tu na to, aby bolo vidieť, z čoho sémantické tokeny vznikli; v komponente je odkaz na ne chyba.
Primitíva
vrstva 1scss/tokens/_primitives.scss
Surová paleta — číselné názvy, žiadny význam. Komponent sem nesmie siahnuť. Sú tu preto, aby bolo vidieť, z čoho sémantické tokeny vznikli.
Neutrály
| Náhľad | Premenná | Hodnota v zdroji | Dopočítaná hodnota |
|---|---|---|---|
--itl-gray-000 |
#ffffff |
|
|
--itl-gray-025 |
#fafafa |
|
|
--itl-gray-050 |
#f5f5f5 |
|
|
--itl-gray-100 |
#ebebeb |
|
|
--itl-gray-200 |
#dcdcdc |
|
|
--itl-gray-300 |
#bdbdbd |
|
|
--itl-gray-400 |
#949494 |
|
|
--itl-gray-500 |
#6e6e6e |
|
|
--itl-gray-600 |
#545454 |
|
|
--itl-gray-700 |
#3d3d3d |
|
|
--itl-gray-800 |
#292929 |
|
|
--itl-gray-850// tmava tema: karta |
#1f1f1f |
|
|
--itl-gray-900 |
#171717 |
|
|
--itl-gray-950// tmava tema: podklad stranky |
#141414 |
|
Modrá
| Náhľad | Premenná | Hodnota v zdroji | Dopočítaná hodnota |
|---|---|---|---|
--itl-blue-050 |
#e7f1f9 |
|
|
--itl-blue-300// tmava tema: primarna pod kurzorom |
#65b6ff |
|
|
--itl-blue-400// tmava tema: primarna |
#28a1fe |
|
|
--itl-blue-500// logo: symbol ruky. IBA VYPLN - na bielej ma 2,93:1 |
#179cfa |
|
|
--itl-blue-600// tmava tema: akcent (iba vypln, 2,93:1 ako 500) |
#046baf |
|
|
--itl-blue-700// logo: text |
#1266a3 |
|
|
--itl-blue-800 |
#0d4f7f |
|
|
--itl-blue-900 |
#093c62 |
|
|
--itl-blue-950// tmava tema: tlmeny podklad |
#003257 |
|
Oceľová
| Náhľad | Premenná | Hodnota v zdroji | Dopočítaná hodnota |
|---|---|---|---|
| — | --itl-steel-300 |
#94b4d1 |
|
| — | --itl-steel-400 |
#819fbd |
|
| — | --itl-steel-900 |
#23313f |
|
Stavové
| Náhľad | Premenná | Hodnota v zdroji | Dopočítaná hodnota |
|---|---|---|---|
--itl-green-050 |
#e4f5ea |
|
|
--itl-green-300// tmava tema: pod kurzorom |
#73c089 |
|
|
--itl-green-400// tmava tema |
#5fab75 |
|
|
--itl-green-600 |
#0a7a3d |
|
|
--itl-green-700// tmavsi odtien pod kurzorom |
#086432 |
|
|
--itl-green-900// tmava tema: tlmeny podklad |
#13371f |
|
|
--itl-amber-050 |
#fdf1e0 |
|
|
--itl-amber-300 |
#e6a165 |
|
|
--itl-amber-400 |
#d18d52 |
|
|
--itl-amber-700 |
#a35c06 |
|
|
--itl-amber-800// tmavsi odtien pod kurzorom |
#864b05 |
|
|
--itl-amber-900 |
#48290b |
|
|
--itl-red-050 |
#fdeaea |
|
|
--itl-red-300 |
#fe9286 |
|
|
--itl-red-400 |
#ff6e61 |
|
|
--itl-red-600 |
#c81e1e |
|
|
--itl-red-700// tmavsi odtien pod kurzorom |
#a81818 |
|
|
--itl-red-900 |
#5c1713 |
|
Sémantické tokeny
vrstva 2scss/tokens/_semantic.scss
Význam bez konkrétnej hodnoty — povrch, text, rám, primárna. Toto je jediná vrstva, po ktorej komponenty siahajú. Tmavý režim raz prepíše práve ju a komponenty zostanú nedotknuté.
Plochy
| Náhľad | Premenná | Hodnota v zdroji | Dopočítaná hodnota |
|---|---|---|---|
--itl-color-page |
var(--itl-gray-050) |
|
|
--itl-color-surface |
var(--itl-gray-000) |
|
|
--itl-color-surface-sunk |
var(--itl-gray-025) |
|
|
--itl-color-surface-hover |
var(--itl-gray-050) |
|
Text
| Náhľad | Premenná | Hodnota v zdroji | Dopočítaná hodnota |
|---|---|---|---|
--itl-color-text |
var(--itl-gray-900) |
|
|
--itl-color-muted |
var(--itl-gray-600) |
|
|
--itl-color-faint |
var(--itl-gray-400) |
|
|
--itl-color-on-fill// text na farebnej vypni |
var(--itl-gray-000) |
|
|
--itl-color-inverse |
var(--itl-gray-800) |
|
|
--itl-color-on-inverse |
var(--itl-gray-050) |
|
Rámy
| Náhľad | Premenná | Hodnota v zdroji | Dopočítaná hodnota |
|---|---|---|---|
--itl-color-border |
var(--itl-gray-200) |
|
|
--itl-color-border-strong |
var(--itl-gray-300) |
|
Značka
| Náhľad | Premenná | Hodnota v zdroji | Dopočítaná hodnota |
|---|---|---|---|
--itl-color-primary |
var(--itl-blue-800) |
|
|
--itl-color-primary-hover |
var(--itl-blue-900) |
|
|
--itl-color-primary-soft |
var(--itl-blue-050) |
|
|
--itl-color-accent |
var(--itl-blue-500) |
|
|
--itl-color-focus |
var(--itl-blue-800) |
|
Stavy
| Náhľad | Premenná | Hodnota v zdroji | Dopočítaná hodnota |
|---|---|---|---|
--itl-color-success |
var(--itl-green-600) |
|
|
--itl-color-success-soft |
var(--itl-green-050) |
|
|
--itl-color-success-hover |
var(--itl-green-700) |
|
|
--itl-color-warning |
var(--itl-amber-700) |
|
|
--itl-color-warning-soft |
var(--itl-amber-050) |
|
|
--itl-color-warning-hover |
var(--itl-amber-800) |
|
|
--itl-color-danger |
var(--itl-red-600) |
|
|
--itl-color-danger-soft |
var(--itl-red-050) |
|
|
--itl-color-danger-hover |
var(--itl-red-700) |
|
|
--itl-color-info |
var(--itl-blue-700) |
|
|
--itl-color-info-soft |
var(--itl-blue-050) |
|
|
--itl-color-info-hover |
var(--itl-blue-800) |
|
Sekcia
| Náhľad | Premenná | Hodnota v zdroji | Dopočítaná hodnota |
|---|---|---|---|
--itl-color-section |
var(--itl-color-primary) |
|
|
--itl-color-section-soft |
var(--itl-color-primary-soft) |
|
|
--itl-color-section-vivid |
var(--itl-color-accent) |
|
Logo
| Náhľad | Premenná | Hodnota v zdroji | Dopočítaná hodnota |
|---|---|---|---|
| — | --itl-logo |
url("/assets/logo/itl-logo.svg") |
|
| — | --itl-logo-dark |
url("/assets/logo/itl-logo-dark.svg") |
|
Typografia
| Náhľad | Premenná | Hodnota v zdroji | Dopočítaná hodnota |
|---|---|---|---|
| Ag 123 | --itl-font-sans |
'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif |
|
| Ag 123 | --itl-font-mono |
'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace |
|
| Ag | --itl-text-xs// 12px - stitky, popisky |
0.75rem |
|
| Ag | --itl-text-sm// 13px - vedlajsi text |
0.8125rem |
|
| Ag | --itl-text-md// 14px - ZAKLADNA velkost rozhrania |
0.875rem |
|
| Ag | --itl-text-lg// 16px - dolezity text |
1rem |
|
| Ag | --itl-text-xl// 18px |
1.125rem |
|
| Ag | --itl-text-2xl// 22px - nadpis karty |
1.375rem |
|
| Ag | --itl-text-3xl// 28px - nadpis stranky |
1.75rem |
|
| Ag Ag |
--itl-leading-tight |
1.25 |
|
| Ag Ag |
--itl-leading-normal |
1.5 |
|
| Ag Ag |
--itl-leading-loose |
1.7 |
|
| Ag | --itl-weight-regular |
400 |
|
| Ag | --itl-weight-medium |
500 |
|
| Ag | --itl-weight-semibold |
600 |
|
| Ag | --itl-weight-bold |
700 |
|
| Ag | --itl-weight-black |
800 |
|
Rozostupy
| Náhľad | Premenná | Hodnota v zdroji | Dopočítaná hodnota |
|---|---|---|---|
--itl-space-0 |
0 |
|
|
--itl-space-1 |
0.25rem |
|
|
--itl-space-2 |
0.5rem |
|
|
--itl-space-3 |
0.75rem |
|
|
--itl-space-4 |
1rem |
|
|
--itl-space-5 |
1.25rem |
|
|
--itl-space-6 |
1.5rem |
|
|
--itl-space-8 |
2rem |
|
|
--itl-space-10 |
2.5rem |
|
|
--itl-space-12 |
3rem |
|
|
--itl-space-16 |
4rem |
|
Rohy
| Náhľad | Premenná | Hodnota v zdroji | Dopočítaná hodnota |
|---|---|---|---|
--itl-radius-sm |
3px |
|
|
--itl-radius-md |
5px |
|
|
--itl-radius-lg |
8px |
|
|
--itl-radius-full |
999px |
|
Tiene
| Náhľad | Premenná | Hodnota v zdroji | Dopočítaná hodnota |
|---|---|---|---|
--itl-shadow-xs |
0 1px 2px rgb(23 23 23 / 0.05) |
|
|
--itl-shadow-sm |
0 1px 3px rgb(23 23 23 / 0.08), 0 1px 2px rgb(23 23 23 / 0.04) |
|
|
--itl-shadow-md |
0 4px 12px -2px rgb(23 23 23 / 0.10) |
|
|
--itl-shadow-lg |
0 12px 28px -8px rgb(23 23 23 / 0.18) |
|
Prekryv
| Náhľad | Premenná | Hodnota v zdroji | Dopočítaná hodnota |
|---|---|---|---|
--itl-color-tint-hover |
rgb(23 23 23 / 0.04) |
|
|
--itl-color-scrim |
rgb(23 23 23 / 0.45) |
|
|
--itl-color-scrim-soft |
rgb(23 23 23 / 0.2) |
|
Fokus
| Náhľad | Premenná | Hodnota v zdroji | Dopočítaná hodnota |
|---|---|---|---|
--itl-focus-width |
2px |
|
|
--itl-focus-offset |
2px |
|
Vrstvenie
| Náhľad | Premenná | Hodnota v zdroji | Dopočítaná hodnota |
|---|---|---|---|
| — | --itl-z-dropdown |
1000 |
|
| — | --itl-z-sticky |
1100 |
|
| — | --itl-z-overlay |
1200 |
|
| — | --itl-z-modal |
1300 |
|
| — | --itl-z-toast |
1400 |
|
| — | --itl-z-tooltip |
1500 |
|
Prechody
| Náhľad | Premenná | Hodnota v zdroji | Dopočítaná hodnota |
|---|---|---|---|
| — | --itl-transition-fast |
120ms cubic-bezier(0.2, 0.6, 0.3, 1) |
|
| — | --itl-transition |
160ms cubic-bezier(0.2, 0.6, 0.3, 1) |
|
Akcentové odtiene
vrstva 2scss/tokens/_accents.scss
Osem odtieňov na odlíšenie častí systému, každý v troch rolách: base na text a rámy, soft pod štítky a aktívne stavy, vivid na ikony a grafy. Zámena rolí je chyba — vivid nikdy nesmie ísť pod text. Obrazovka si odtieň nasadí cez [data-itl-section="…"] a komponenty potom siahajú len po --itl-color-section*.
Ostatné
| Náhľad | Premenná | Hodnota v zdroji | Dopočítaná hodnota |
|---|---|---|---|
--itl-accent-indigo |
#6e5dd9 |
|
|
--itl-accent-indigo-soft |
#f4f3fc |
|
|
--itl-accent-indigo-vivid |
#9488e3 |
|
|
--itl-accent-purple |
#934ed0 |
|
|
--itl-accent-purple-soft |
#f8f3fc |
|
|
--itl-accent-purple-vivid |
#b17edd |
|
|
--itl-accent-pink |
#ca2f82 |
|
|
--itl-accent-pink-soft |
#fcf3f8 |
|
|
--itl-accent-pink-vivid |
#dd6faa |
|
|
--itl-accent-cyan |
#0d79a0 |
|
|
--itl-accent-cyan-soft |
#f2fafd |
|
|
--itl-accent-cyan-vivid |
#11a0d3 |
|
|
--itl-accent-teal |
#0e7d75 |
|
|
--itl-accent-teal-soft |
#f2fdfc |
|
|
--itl-accent-teal-vivid |
#12a59b |
|
|
--itl-accent-olive |
#4a7c1f |
|
|
--itl-accent-olive-soft |
#f7fcf3 |
|
|
--itl-accent-olive-vivid |
#63a529 |
|
|
--itl-accent-orange |
#b45516 |
|
|
--itl-accent-orange-soft |
#fdf6f2 |
|
|
--itl-accent-orange-vivid |
#e5762c |
|
|
--itl-accent-slate |
#5a7295 |
|
|
--itl-accent-slate-soft |
#f5f7f9 |
|
|
--itl-accent-slate-vivid |
#8196b3 |
|
Tokeny hustoty
vrstva 2scss/tokens/_density.scss
Odsadenia ovládacích prvkov, riadkov a kariet. Komponent nikdy nepíše surové px — vďaka tomu je kompaktný build prepísaním týchto hodnôt, nie prechádzaním komponentov. Rádiusy, veľkosti ikon a fokusový rámik sa hustotou zámerne neriadia.
Ovládacie prvky — tlačidlá, polia, selecty
| Náhľad | Premenná | Hodnota v zdroji | Dopočítaná hodnota |
|---|---|---|---|
--itl-control-py-sm// 4px |
0.25rem |
|
|
--itl-control-px-sm// 10px |
0.625rem |
|
|
--itl-control-py// 8px - zakladna velkost |
0.5rem |
|
|
--itl-control-px// 14px |
0.875rem |
|
|
--itl-control-py-lg// 11px |
0.6875rem |
|
|
--itl-control-px-lg// 18px |
1.125rem |
|
|
--itl-control-h-sm// 28px |
1.75rem |
|
|
--itl-control-h// 34px |
2.125rem |
|
|
--itl-control-h-lg// 42px |
2.625rem |
|
|
--itl-control-gap// 7px |
0.4375rem |
|
Štítky
| Náhľad | Premenná | Hodnota v zdroji | Dopočítaná hodnota |
|---|---|---|---|
| — | --itl-badge-py// 3px |
0.1875rem |
|
| — | --itl-badge-px// 8px |
0.5rem |
|
Kostra obrazovky
| Náhľad | Premenná | Hodnota v zdroji | Dopočítaná hodnota |
|---|---|---|---|
| — | --itl-navbar-h// 56px - vyska samotnej listy |
3.5rem |
|
| — | --itl-navbar-bd// ram pod listou |
1px |
|
| — | --itl-navbar-space |
calc(var(--itl-navbar-h) + var(--itl-navbar-bd)) |
|
Plochy
| Náhľad | Premenná | Hodnota v zdroji | Dopočítaná hodnota |
|---|---|---|---|
--itl-row-py// 10px - riadok tabulky |
0.625rem |
|
|
--itl-row-px |
0.875rem |
|
|
--itl-row-py-sm// 6px - kompaktna tabulka // 14px |
0.375rem |
|
|
--itl-card-p// vnutro karty |
1rem |
|
|
--itl-stack// medzera medzi prvkami pod sebou |
1rem |
|
|
--itl-cluster// medzera medzi prvkami vedla seba |
0.5rem |
|