Neobrutalizm

neubrutalism to płaski kolor i gruby tusz: każda powierzchnia ma obrys, a wszystko, co odstaje od strony, rzuca twardy cień bez rozmycia. Naciśnięcie wciska kontrolkę we własny cień, a włączony przełącznik tam zostaje. Miękkie wypełnienia to żywe pastele z ciemnym tekstem, pełne pozostają na tyle ciemne, by udźwignąć białą etykietę, a w trybie ciemnym tusz staje się kremowy, bo czarnego cienia nie byłoby widać na ciemnej stronie.

Karta

Te same znaczniki, przestylowane jednym arkuszem.

  1. Konto

  2. Profil

  3. Potwierdzenie

Postęp50%
50
Zapisano
Zmiany są już widoczne.
Skopiowano do schowka
Czym jest preset?
Drugim arkuszem, który zmienia wygląd każdego komponentu naraz.
Czy podąża za trybem ciemnym?
Tak — wypróbuj przełącznik na górze strony.
Czy nadal mogę używać theme()?
Tak, i wygrywa z presetem.

  1. Dziś

    Preset wydany

    Cały wygląd jednym wywołaniem.

  2. Wczoraj

    Dokumentacja napisana

  3. Poniedziałek

    Pierwszy szkic

Cały wygląd jednym wywołaniem.
Dołącz go po głównym arkuszu.
Jedna opcja: preset.
SzkicOpublikowaneZarchiwizowane
AL312GH

Użycie

import { styles } from 'sitelo/ui'

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

Pomaluj też stronę kolorem var(--su-bg), a przejmie kremowe tło presetu, na którym odcinają się białe powierzchnie.

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

Własne kolory

theme() dalej działa na wierzchu, więc preset to punkt wyjścia, a nie fork. Ten dodaje dwa własne tokeny: --su-nb-ink — kolor, którym rysowana jest każda linia i każdy cień, oraz --su-nb-lift — jak daleko wypukła kontrolka odstaje od strony, a więc o ile przesuwa ją naciśnięcie.

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