Необрутализм

neubrutalism — это плоский цвет и толстые чернила: у каждой поверхности есть контур, а всё, что приподнято над страницей, отбрасывает жёсткую тень без размытия. Нажатие утапливает элемент в его собственную тень, а включённый переключатель там и остаётся. Мягкие заливки — яркие пастельные цвета с тёмным текстом, сплошные остаются достаточно тёмными для белой подписи, а в тёмной теме чернила становятся кремовыми: чёрная тень на тёмной странице была бы не видна.

Как подключить

import { styles } from 'sitelo/ui'

head(
  title('Мой сайт'),
  styles({ preset: 'neubrutalism' }),
)
// <link rel="stylesheet" href="/su/ui-c9428b65.css">
// <link rel="stylesheet" href="/su/neubrutalism-3f1a9c42.css">

Залейте и саму страницу цветом var(--su-bg) — она станет кремовой, как в пресете, и белые поверхности будут на ней выделяться.

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

Свои цвета

theme() по-прежнему работает поверх, так что пресет — это отправная точка, а не форк. Этот добавляет два собственных токена: --su-nb-ink — цвет, которым нарисованы все линии и тени, и --su-nb-lift — насколько приподнятый элемент отстоит от страницы, а значит, насколько его сдвигает нажатие.

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