Superneon

O superneon é violeta quase preto, com arestas finíssimas e uma luz que vem de dentro. Um botão sólido é uma pílula escura, iluminada ao longo das arestas interiores e rodeada por um gradiente que brilha para lá do seu contorno; os títulos grandes passam do claro ao lavanda, e tudo o que está escolhido ou ligado ganha um halo. O brilho é sempre só decoração, por isso cada etiqueta continua sobre uma cor plana que cumpre a WCAG AA. O modo escuro é o aspeto original; o modo claro mantém as pílulas escuras e o brilho e põe-nos sobre uma página lavanda pálida.

Como usar

import { styles } from 'sitelo/ui'

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

Pinta a página com var(--su-sn-backdrop) para teres o fundo do preset com uma luz violeta a cair de cima, ou simplesmente com var(--su-bg). Os títulos usam a Geist se a página a carregar, e o tipo de letra do sistema se não — o preset não descarrega nada.

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

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 dá a cada paleta mais dois espaços, glow e glowEnd: as duas pontas do gradiente com que se desenham o seu contorno e o seu halo. Nada se lê sobre um brilho, por isso podem ser tão vivos quanto quiseres.

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