Ohraničení

Ohraničení odděluje prvky a nastavuje jejich vizuální důraz. Správná volba borderu výrazně pomáhá čitelnosti formulářů, tabulek i karet.

Běžné ohraničení

Ohraničení je součástí téměř všech komponent. Pro specifické potřeby jsou stejně jako u povrchů dostupné různé varianty, které můžeme využít.

Název	Popis	Proměnná
Subtle	Jemná, nevýrazná linka	--border-subtle
Default	Výchozí ohraničení	--border
Strong	Výraznější linka, vhodná například pro políčka	--border-strong
Contrast	Velmi výrazná linka	--border-contrast

Zářivá varianta

Simuluje odlesk na okraji povrchu, proto se využívá na elementech vypadajících jako karty, například seznam, detail nebo widgety.

Název	Popis	Proměnná
Shiny	Ohraničení kartiček	--border-shiny

Tmavá varianta

V některých situacích potřebujete border vždy tmavý. Pro to slouží Variant.

Kategorie	Popis	Proměnná
Variant	Vždy tmavá linka	--border-variant

Obrácené varianty

Někdy máte i ve světlém tématu tmavý povrch. V takovém případě použijte reversed varianty ohraničení.

Kategorie	Proměnná
Subtle Reversed	--border-subtle-reversed
Default Reversed	--border-reversed
Strong Reversed	--border-strong-reversed
Contrast Reversed	--border-contrast-reversed

Barevné

Jakékoliv ohraničení může nést barvu povrchu, pokud je žádoucí rámeček s větší saturací. Další možností je sjednotit barvu rámečku s textem. Vždy záleží na kontextu a chtěném vizuálním efektu.

.declined[left] {
    color:            var(--text-primary-on-surface-red-minimal);
    background:       var(--surface-red-minimal);
    border-color:     var(--surface-red-subtle);
}

.declined[right] {
    color:            var(--text-red);
    border-color:     var(--text-red); // nebo currentColor
}

.approved[left] {
    color:            var(--text-primary-on-surface-green-minimal);
    background:       var(--surface-green-minimal);
    border-color:     var(--surface-green-subtle);
}

.approved[right] {
    color:            var(--text-green);
    border-color:     var(--text-green);
}

// ...