Neumorfizm

neumorphism to soft UI: każda powierzchnia jest samą stroną, a kontrolka wyróżnia się wyłącznie światłem i cieniem — wypukła nad stroną albo wciśnięta w nią. Zachowuje dwie rzeczy, z których ten styl zwykle rezygnuje, tekst spełniający WCAG AA i obrys fokusu, i podąża za trybem ciemnym jak cała reszta. Wymaga za to, żeby tłem samej strony było var(--su-bg), bo cały efekt opiera się na tym, że oba mają ten sam kolor.

Użycie

import { styles } from 'sitelo/ui'

head(
  title('Moja strona'),
  styles({ preset: 'neumorphism' }),
)
// <link rel="stylesheet" href="/su/ui-c9428b65.css">
// <link rel="stylesheet" href="/su/neumorphism-5d0e7b91.css">

body {
  background: var(--su-bg);
}

Własne kolory

theme() dalej działa na wierzchu, więc preset to punkt wyjścia, a nie fork. Ten dodaje do każdej palety dziesiąte miejsce, glow — kolor, w który przechodzi koniec paska postępu albo przełącznika — żeby nowy kolor główny mógł przynieść własny.

head(
  styles({ preset: 'neumorphism' }),
  theme({
    primary: { base: '#7c3aed', hover: '#6d28d9', active: '#5b21b6', glow: '#e879f9' },
  }),
)