Superneon

superneon to niemal czarny fiolet z włosowatymi krawędziami i światłem, które płynie od środka. Pełny przycisk to ciemna pigułka, podświetlona wzdłuż wewnętrznych krawędzi i otoczona gradientem, który świeci poza jej obrys; duże nagłówki przechodzą od jasnego do lawendy, a wszystko, co wybrane lub włączone, dostaje poświatę. Blask jest zawsze tylko ozdobą, więc każda etykieta nadal leży na płaskim kolorze spełniającym WCAG AA. Tryb ciemny to oryginalny wygląd; jasny zachowuje ciemne pigułki i blask i kładzie je na bladej, lawendowej stronie.

Użycie

import { styles } from 'sitelo/ui'

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

Ustaw tło strony na var(--su-sn-backdrop), by dostać tło presetu z fioletowym światłem padającym z góry, albo po prostu na var(--su-bg). Nagłówki używają Geist, jeśli strona go ładuje, a w przeciwnym razie kroju systemowego — preset niczego nie pobiera.

body {
  background: var(--su-sn-backdrop);
}

Własne kolory

theme() dalej działa na wierzchu, więc preset to punkt wyjścia, a nie fork. Ten daje każdej palecie dwa dodatkowe miejsca, glow i glowEnd — dwa końce gradientu, którym rysowane są jej obrzeże i poświata. Na blasku nic się nie czyta, więc mogą być tak jaskrawe, jak chcesz.

head(
  styles({ preset: 'superneon' }),
  theme({
    primary: { glow: '#00e5ff', glowEnd: '#7f6bff' },
  }),
)