Stíny

Stíny v UI neslouží jen jako dekorace. Především vyjadřují vztah mezi vrstvami rozhraní: co je v popředí, co je aktivní a co má být vizuálně upozaděno. Správně nastavené stíny zlepšují čitelnost struktury obrazovky, zejména u karet, panelů, překryvů a dialogů. Zároveň platí, že by měly být používány střídmě a konzistentně, aby nepůsobily rušivě.

Vyvýšení

Vyvýšení (elevation) představuje základní mechanismus pro práci s hloubkou. Pomáhá odlišit běžný obsah od prvků, které mají vyšší prioritu, jsou interaktivní nebo dočasně překrývají okolní obsah.

Hierarchie

Vyvýšení je rozděleno do čtyř úrovní, které pokrývají běžné scénáře v aplikaci. Díky omezenému počtu úrovní je hierarchie čitelná a jednotná napříč komponentami.

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

Pokud je prvek interaktivní, při kliku stín zmírněte přes 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í vzhůru	`--glow-[color]-up`

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

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

Reliéf

Reliéf používá vnitřní stín a hodí se hlavně pro textová pole.

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

Vlastní stín

Pro vlastní stín napříč tématy použ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);
}