Neobrutalismo

neubrutalism es color plano y tinta gruesa: cada superficie tiene contorno, y todo lo que se separa de la página proyecta una sombra dura, sin desenfoque. Al pulsar un control, se hunde en su propia sombra, y un interruptor activado se queda ahí. Los rellenos suaves son pasteles vivos con texto oscuro encima, los sólidos son lo bastante oscuros para llevar una etiqueta blanca, y en modo oscuro la tinta se vuelve crema, porque una sombra negra no se vería sobre una página oscura.

Cómo usarlo

import { styles } from 'sitelo/ui'

head(
  title('Mi sitio'),
  styles({ preset: 'neubrutalism' }),
)
// <link rel="stylesheet" href="/su/ui-c9428b65.css">
// <link rel="stylesheet" href="/su/neubrutalism-3f1a9c42.css">

Pinta también la página con var(--su-bg), y tomará el crema del preset, con las superficies blancas destacando sobre él.

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 dos tokens propios: --su-nb-ink, el color con el que se dibujan todas las líneas y sombras, y --su-nb-lift, cuánto se separa de la página un control en relieve y, por tanto, cuánto lo mueve una pulsación.

head(
  styles({ preset: 'neubrutalism' }),
  theme({
    primary: { base: '#c2185b', hover: '#a8144e', active: '#8e1042', soft: '#ffb3d0', softFg: '#5c0a2a' },
    '--su-nb-lift': '6px',
  }),
)