Neobrütalizm

neubrutalism düz renk ve kalın mürekkeptir: her yüzeyin bir çerçevesi vardır ve sayfadan kalkan her şey bulanıklığı olmayan sert bir gölge düşürür. Bir denetime basmak onu kendi gölgesine gömer; açık bir geçiş düğmesi de orada kalır. Yumuşak dolgular üzerinde koyu metin taşıyan canlı pastellerdir, dolgulu olanlar beyaz bir etiketi taşıyacak kadar koyu kalır ve koyu kipte mürekkep krem rengine döner, çünkü koyu bir sayfada siyah bir gölge görünmezdi.

Kullanım

import { styles } from 'sitelo/ui'

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

Sayfanın kendisini de var(--su-bg) ile boyayın; hazır ayarın krem rengini alır ve beyaz yüzeyler onun üzerinde öne çıkar.

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

Kendi renkleriniz

theme() üstünde çalışmayı sürdürür, yani bir hazır ayar bir çatal değil, bir başlangıç noktasıdır. Bu hazır ayar kendine ait iki belirteç ekler: --su-nb-ink, her çizginin ve gölgenin çizildiği renk, ve --su-nb-lift, kabarık bir denetimin sayfadan ne kadar uzakta durduğu, dolayısıyla bir basışın onu ne kadar kaydırdığı.

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