Ohraničení

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, jenž můžeme využít.

Název	Popis	Proměnná
Subtle	Jemná, nevýzaná 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í 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řebujeme stejně jako u varianty Shiny možnost mít border vždy tmavý. Pro tyto případy používáme Variant.

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

Obrácené varianty

V některých případech můžeme mít například i ve světlém tématu tmavý povrch, u kterého je potřeba obrátit také barvu ohraničení. Reversed varianty tedy v podstatě odpovídají hodnotám opačného módu.

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

Barevné

Jakékoli 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ého vizuálního 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);
}

// ...