Neumorfismo

neumorphism es soft UI: cada superficie es la propia página, y un control destaca solo por la luz y la sombra — en relieve sobre la página o hundido en ella. Conserva dos cosas a las que este estilo suele renunciar, un texto que cumple WCAG AA y el contorno de foco, y sigue al modo oscuro como todo lo demás. Eso sí, necesita que el fondo de la propia página sea var(--su-bg), porque el efecto depende de que ambos sean del mismo color.

Una tarjeta

El mismo marcado, con otro estilo gracias a una sola hoja.

  1. Cuenta

  2. Perfil

  3. Confirmar

Progreso50%
50
Guardado
Tus cambios ya están publicados.
Copiado al portapapeles
¿Qué es un preset?
Una segunda hoja que reestiliza todos los componentes a la vez.
¿Sigue el modo oscuro?
Sí: prueba el interruptor de la parte superior de la página.
¿Puedo seguir usando theme()?
Sí, y gana sobre el preset.

  1. Hoy

    Preset publicado

    Todo el aspecto, en una llamada.

  2. Ayer

    Documentación escrita

  3. Lunes

    Primer boceto

Todo el aspecto, en una llamada.
Enlázalo después de la hoja principal.
Una opción: preset.
BorradorPublicadoArchivado
AL312GH

Cómo usarlo

import { styles } from 'sitelo/ui'

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

Tus propios colores

theme() sigue funcionando por encima, así que un preset es un punto de partida y no un fork. Este añade una décima ranura a cada paleta, glow — el color en el que se funde el extremo de una barra de progreso o de un interruptor — para que un primario nuevo pueda traer el suyo.

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