Neumorphismus

neumorphism ist Soft UI: Jede Fläche ist die Seite selbst, und ein Bedienelement hebt sich allein durch Licht und Schatten ab — aus der Seite gehoben oder in sie hineingedrückt. Zwei Dinge, die dieser Look sonst aufgibt, behält es: Text, der WCAG AA erfüllt, und den Fokusrahmen. Den Dunkelmodus macht es mit wie alles andere. Es braucht allerdings var(--su-bg) als Hintergrund der Seite selbst, denn der Effekt beruht darauf, dass beides dieselbe Farbe hat.

Eine Karte

Dasselbe Markup, neu gestaltet von einem einzigen Stylesheet.

  1. Konto

  2. Profil

  3. Bestätigen

Fortschritt50%
50
Gespeichert
Deine Änderungen sind live.
In die Zwischenablage kopiert
Was ist ein Preset?
Ein zweites Stylesheet, das jede Komponente auf einmal neu gestaltet.
Folgt es dem Dunkelmodus?
Ja — probier den Schalter oben auf der Seite.
Kann ich theme() weiter nutzen?
Ja, und es gewinnt gegen das Preset.

  1. Heute

    Preset veröffentlicht

    Der ganze Look, mit einem Aufruf.

  2. Gestern

    Doku geschrieben

  3. Montag

    Erste Skizze

Der ganze Look, mit einem Aufruf.
Nach dem Kern-Stylesheet verlinken.
Eine Option: preset.
EntwurfLiveArchiviert
AL312GH

Verwendung

import { styles } from 'sitelo/ui'

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

Eigene Farben

theme() funktioniert weiterhin obendrauf, ein Preset ist also ein Ausgangspunkt und kein Fork. Dieses hier gibt jeder Palette einen zehnten Platz, glow — die Farbe, in die ein Fortschrittsbalken oder ein Switch an seinem Ende ausläuft —, damit eine neue Primärfarbe ihre eigene mitbringen kann.

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