Superneon

superneon es violeta casi negro con bordes finísimos y una luz que viene de dentro. Un botón sólido es una píldora oscura, iluminada por sus bordes interiores y rodeada por un degradado que brilla más allá de su contorno; los títulos grandes pasan de claro a lavanda, y todo lo que está elegido o activado se lleva un halo. El brillo es siempre decoración, así que cada etiqueta sigue sobre un color plano que cumple WCAG AA. El modo oscuro es el aspecto original; el modo claro conserva las píldoras oscuras y el brillo y los pone sobre una página lavanda pálida.

Cómo usarlo

import { styles } from 'sitelo/ui'

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

Pinta la página con var(--su-sn-backdrop) para tener el fondo del preset con una luz violeta cayendo desde arriba, o simplemente con var(--su-bg). Los títulos usan Geist si la página la carga, y la fuente del sistema si no: el preset no descarga nada.

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

Tus propios colores

theme() sigue funcionando por encima, así que un preset es un punto de partida y no un fork. Este da a cada paleta dos huecos más, glow y glowEnd: los dos extremos del degradado con el que se dibujan su borde y su halo. Nada se lee sobre un brillo, así que pueden ser tan vivos como quieras.

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