// princip

Jak to funguje

Šest akčních rolí: primary (hlavní akce), success (potvrzení, = primary), danger (destruktivní akce), accent (zvýrazněná podpora), secondary (běžná akce), light (nenápadná akce). Dvojitá pomlčka -- nekoliduje s Bootstrapem (ten má .text-*, .bg-*, .btn-* s jednou pomlčkou). Přidání role = řádek v $skin-roles / $btn-action-roles + 4 tokeny v _vars.scss.

// .skin--{role} · bg + text + border najednou

.skin--{role}

Kombinovaný štítek/badge: nastaví pozadí (-bg), barvu textu (-text) a barvu rámečku (base) jedním zásahem.

.skin--{role}
skin--primary
Hlavní akce
skin--success
Úspěšně uloženo
skin--danger
Přihlášení selhalo
skin--accent
Akcentní role
skin--secondary
Běžná akce
skin--light
Nenápadná akce
// .btn--{role} · výplňové tlačítko

.btn--{role}

Výplňový styl: base = pozadí, -hover = ztmavení. Sdílí přesně stejné tokeny jako .skin--. Velikosti přes .btn-sm / .btn-lg (viz Buttons).

.btn--{role}
// .text--{role} · .bg--{role} · .border--{role}

Individuální utility

Když potřebuješ jen jednu vlastnost. Všechny tři používají base barvu role a mají !important (přebijí Bootstrap).

.text--{role} – jen barva textu
.text-- primary success danger accent secondary light
.bg--{role} – jen pozadí
.bg-- primary success danger accent secondary light
.border--{role} – jen rámeček
.border-- primary success danger accent secondary light
// .link--{role} · odkaz s hover stavem

.link--{role}

Odkaz v base barvě role, na hover přechází na -hover. Najeď myší pro ověření přechodu.

.link--{role}
link--primary link--success link--danger link--accent link--secondary link--light
// rozšíření

Přidání nové role

Tři kroky a role automaticky získá celou rodinu tříd. 

// 1) abstracts/_vars.scss – 4 tokeny role
--color-brand:        var(--color-third);
--color-brand-hover:  var(--color-third-700);
--color-brand-bg:     var(--color-third-100);
--color-brand-text:   var(--color-third-700);

// 2) base/_skins.scss – přidej do seznamu
$skin-roles: "primary", "success", "danger", "accent", "secondary", "light", "brand";

// 3) components/_buttons.scss – přidej do mapy (hodnota = barva textu na base)
$btn-action-roles: ( ..., "brand": var(--color-white) );