Ohraničení

Ohraničení a zaoblení definují vizuální hranice elementů — barvu a sílu linky i tvar jejich rohů.

Barvy

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);
}

// ...

Rohy

Tvar rohů je globální vlastnost tématu — poloměr i křivka se nastavují jednou a projeví se konzistentně napříč celou aplikací. Pro zaoblení rohů vždy používej mixiny; ty zajistí, že se spolu s border-radius nastaví i corner-shape, jinak se tvar rohů z tématu neprojeví.

Varianta	Mixin
Subtle	`.corner-subtle()`
Default	`.corner()`
Strong	`.corner-strong()`
Extreme	`.corner-extreme()`
Circle	`.corner-circle()`

Less
CSS

.foo { .corner-subtle(); }

.bar { .corner(); }

.baz { .corner-strong(); }

.qux { .corner-extreme(); }

.pill { .corner-circle(); }

.foo {
    border-radius: var(--radius-subtle);
    corner-shape: var(--corner-shape);
}

.bar {
    border-radius: var(--radius);
    corner-shape: var(--corner-shape);
}

.baz {
    border-radius: var(--radius-strong);
    corner-shape: var(--corner-shape);
}

.qux {
    border-radius: var(--radius-extreme);
    corner-shape: var(--corner-shape);
}

.pill {
    border-radius: var(--radius-circle);
}

Zaoblení

Poloměr rohů je rozdělen do pěti variant od jemného po kruh. Konkrétní pixelové hodnoty se odvíjejí od radiusIntensity a aktuálního cornerShape. Při hodnotě 0 jsou všechny radii nulové — prvky mají ostré rohy.

Token	Popis
`--radius-subtle`	Jemné zaoblení pro čipy, tagy nebo vnořené prvky
`--radius`	Výchozí zaoblení pro většinu komponent
`--radius-strong`	Výraznější zaoblení pro karty, dialogy nebo panely
`--radius-extreme`	Maximální zaoblení pro výrazné dekorativní prvky
`--radius-circle`	Plně kulaté rohy bez ohledu na velikost prvku

Tvar

Křivka rohů se nastavuje globálně pomocí cornerShape a ovlivňuje všechny mixiny kromě .corner-circle().

Hodnota	Popis
`round`	Standardní CSS `border-radius`. Výchozí hodnota.
`squircle`	Rohová křivka navazuje plynuleji na rovné hrany (ekvivalent superellipse s exponentem 2). Opticky přirozenější než čistá kružnice.
`1.0`–`3.0`	Superellipse s volitelným exponentem. Nižší hodnota je hranatější, vyšší se blíží squircle.