Neumorphisme

neumorphism est de la soft UI : chaque surface est la page elle-même, et un contrôle ne se détache que par la lumière et l’ombre — en relief sur la page, ou enfoncé dedans. Il garde deux choses que ce style sacrifie d’habitude, un texte conforme à WCAG AA et le contour de focus, et il suit le mode sombre comme tout le reste. Il lui faut en revanche que le fond de la page elle-même soit var(--su-bg), car l’effet repose sur le fait que les deux soient de la même couleur.

Une carte

Le même balisage, restylé par une seule feuille.

  1. Compte

  2. Profil

  3. Confirmer

Progression50%
50
Enregistré
Vos modifications sont en ligne.
Copié dans le presse-papiers
Qu’est-ce qu’un préréglage ?
Une seconde feuille qui restyle chaque composant d’un coup.
Suit-il le mode sombre ?
Oui — essayez le bouton en haut de la page.
Puis-je encore utiliser theme() ?
Oui, et il l’emporte sur le préréglage.

  1. Aujourd’hui

    Préréglage publié

    Tout le rendu, en un appel.

  2. Hier

    Documentation rédigée

  3. Lundi

    Première esquisse

Tout le rendu, en un appel.
Liez-le après la feuille principale.
Une option : preset.
BrouillonEn ligneArchivé
AL312GH

L’utiliser

import { styles } from 'sitelo/ui'

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

Vos propres couleurs

theme() fonctionne toujours par-dessus : un préréglage est un point de départ, pas un fork. Celui-ci ajoute un dixième emplacement à chaque palette, glow — la couleur dans laquelle une barre de progression ou un interrupteur se fond à son extrémité — pour qu’une nouvelle couleur primaire puisse apporter la sienne.

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