Stíny

Stíny jsou efektivní způsob, jak zlepšit použitelnost a vizuální přitažlivost rozhraní. Mohou být použity k zvýraznění prvků, vytvoření pocitu hloubky a prostoru a zlepšení čitelnosti. Měly by být používány s rozmyslem, aby byly efektivní a nerušivé. Je důležité používat konzistentní styl stínů v celém rozhraní.

Vyvýšení

Vyvýšení v UI je vizuální efekt, který se používá k vytvoření dojmu hloubky a prostoru v rozhraní. Může být použito k zvýraznění důležitých prvků, vytvoření pocitu hloubky a prostoru a zlepšení čitelnosti.

Hierarchie

Vyvýšení elementu nad podkladem je určena čtyřmi úrovněmi. Toto plně postačuje pro vytvoření prostorové hieararchie.

Type	Popis	Proměnná
Default	Základní stín pro běžné prvky jako tlačítka, widgety, panely a karty	`--elevation`
Subtle	Mírný stín pro stisklé tlačítko	`--elevation-subtle`
Strong	Výrazný stín pro popup, dropdown, toast a jiné prvky vystupující nad obsah	`--elevation-strong`
Extreme	Nejsilnější stín výhradně pro dialog	`--elevation-extreme`

.foo {
   box-shadow: var(--elevation);
}

.bar {
   box-shadow: var(--elevation-extreme);
}

Interakce

Má-li vyvýšený element s elevation být aktivním prvekm grafického rozhraní, při kliku zmírní stín pomocí elevation-subtle.

.foo {
   box-shadow: var(--elevation);

   &:active {
      box-shadow: var(--elevation-subtle);
   }
}

Záře

Type	Popis	Proměnná
Default	Výchozí záře	`--glow-[color]`
Strong	Silná záře	`--glow-[color]-strong`
Up	Záře svítící vzůru	`--glow-[color]-up`

.foo {
   box-shadow: var(--glow-brand-primary);
}

.bar {
   box-shadow: var(--glow-status-success-strong);
}

Reliéf

Pro znázornění vtlačení komponenty do povrchu využíváme vnitřího stínu. Typické využití pro reliéfy jsou textová políčka.

.foo {
   box-shadow: var(--embossment);
}

Vlastní stín

Pro aplikování stínu napříč tématy využijte následující mixin.

.themifyShadow(@settings, @color)

@settings:     inset|initial|inherit | h-offset v-offset blur spread
@color:        Barva

.foo {
   .themifyShadow(inset 0 var(--stripe-width) 0; var(--red-20) var(--red-50));
}

// nebo

.bar {
   .themify(--bar-shadow; var(--red-20) var(--red-50));
   box-shadow: inset 0 var(--stripe-width) 0 var(--bar-shadow);
}