Neumorfismo

neumorphism è soft UI: ogni superficie è la pagina stessa, e un controllo si distingue solo per luce e ombra — in rilievo sulla pagina o premuto dentro di essa. Mantiene due cose a cui questo stile di solito rinuncia, un testo che supera WCAG AA e il contorno del focus, e segue la modalità scura come tutto il resto. Però ha bisogno che lo sfondo della pagina stessa sia var(--su-bg), perché l’effetto si regge sul fatto che i due siano dello stesso colore.

Una card

Lo stesso markup, ridisegnato da un solo foglio.

  1. Account

  2. Profilo

  3. Conferma

Avanzamento50%
50
Salvato
Le modifiche sono online.
Copiato negli appunti
Che cos’è un preset?
Un secondo foglio che ridisegna ogni componente in un colpo solo.
Segue la modalità scura?
Sì — prova l’interruttore in cima alla pagina.
Posso ancora usare theme()?
Sì, e vince sul preset.

  1. Oggi

    Preset pubblicato

    Tutto l’aspetto, con una chiamata.

  2. Ieri

    Documentazione scritta

  3. Lunedì

    Primo schizzo

Tutto l’aspetto, con una chiamata.
Collegalo dopo il foglio principale.
Un’opzione: preset.
BozzaOnlineArchiviato
AL312GH

Come usarlo

import { styles } from 'sitelo/ui'

head(
  title('Il mio sito'),
  styles({ preset: 'neumorphism' }),
)
// <link rel="stylesheet" href="/su/ui-c9428b65.css">
// <link rel="stylesheet" href="/su/neumorphism-5d0e7b91.css">
body {
  background: var(--su-bg);
}

I tuoi colori

theme() continua a funzionare sopra, quindi un preset è un punto di partenza e non un fork. Questo aggiunge una decima casella a ogni palette, glow — il colore in cui sfuma l’estremità di una barra di avanzamento o di uno switch — così un nuovo primario può portarsi il suo.

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