Neobrutalismo

O neubrutalism é cor plana e tinta grossa: cada superfície tem contorno, e tudo o que se destaca da página projeta uma sombra dura, sem desfoque. Premir um controlo afunda-o na sua própria sombra, e um interruptor ligado fica lá. Os preenchimentos suaves são pastéis vivos com texto escuro por cima, os sólidos ficam escuros o suficiente para levar uma etiqueta branca, e no modo escuro a tinta passa a creme, porque uma sombra preta não se veria numa página escura.

Como usar

import { styles } from 'sitelo/ui'

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

Pinta também a página com var(--su-bg), e ela fica com o creme do preset, com as superfícies brancas a destacarem-se.

body {
  background: var(--su-bg);
}

As tuas próprias cores

O theme() continua a funcionar por cima, por isso um preset é um ponto de partida e não um fork. Este acrescenta dois tokens próprios: --su-nb-ink, a cor com que se desenham todas as linhas e sombras, e --su-nb-lift, a distância a que um controlo em relevo fica da página — e, portanto, quanto um clique o desloca.

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