Superneon

superneon est un violet presque noir, aux filets fins, avec une lumière qui vient de l’intérieur. Un bouton plein est une pilule sombre, éclairée le long de ses bords intérieurs et cerclée d’un dégradé qui rayonne au-delà de son contour ; les grands titres passent du clair au lavande, et tout ce qui est choisi ou activé prend un halo. La lueur n’est jamais que décorative : chaque libellé repose toujours sur une couleur unie qui respecte WCAG AA. Le mode sombre est le rendu d’origine ; le mode clair garde les pilules sombres et la lueur, et les pose sur une page lavande pâle.

L’utiliser

import { styles } from 'sitelo/ui'

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

Peignez la page avec var(--su-sn-backdrop) pour avoir le fond du préréglage avec une lumière violette qui tombe du haut, ou simplement avec var(--su-bg). Les titres utilisent Geist si la page la charge, et la police système sinon : le préréglage ne télécharge rien.

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

Vos propres couleurs

theme() fonctionne toujours par-dessus : un préréglage est un point de départ, pas un fork. Celui-ci donne à chaque palette deux emplacements de plus, glow et glowEnd : les deux extrémités du dégradé dans lequel sont tracés son contour et son halo. Rien ne se lit sur une lueur, alors elles peuvent être aussi vives que vous voulez.

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