Superneon

superneon — это почти чёрный фиолетовый с тончайшими краями и светом, идущим изнутри. Сплошная кнопка — тёмная таблетка, подсвеченная по внутренним краям и обведённая градиентом, который светится за её контуром; крупные заголовки переходят от светлого к лавандовому, а всё выбранное или включённое получает ореол. Свечение — всегда лишь украшение, поэтому каждая подпись по-прежнему лежит на плоском цвете, проходящем WCAG AA. Тёмная тема — исходный облик; светлая сохраняет тёмные таблетки и свечение и кладёт их на бледно-лавандовую страницу.

Карточка

Та же разметка, переоформленная одной таблицей стилей.

  1. Аккаунт

  2. Профиль

  3. Подтверждение

Прогресс50%
50
Сохранено
Изменения уже на сайте.
Скопировано в буфер обмена
Что такое пресет?
Вторая таблица стилей, которая разом переоформляет все компоненты.
Он следует тёмной теме?
Да — попробуйте переключатель вверху страницы.
Можно ли по-прежнему использовать theme()?
Да, и он побеждает пресет.

  1. Сегодня

    Пресет выпущен

    Весь облик одним вызовом.

  2. Вчера

    Документация написана

  3. Понедельник

    Первый набросок

Весь облик одним вызовом.
Подключите после основной таблицы.
Одна опция: preset.
ЧерновикОпубликованоВ архиве
AL312GH

Как подключить

import { styles } from 'sitelo/ui'

head(
  title('Мой сайт'),
  styles({ preset: 'superneon' }),
)
// <link rel="stylesheet" href="/su/ui-c9428b65.css">
// <link rel="stylesheet" href="/su/superneon-5b0e7d21.css">

Залейте страницу через var(--su-sn-backdrop) — получится фон пресета с фиолетовым светом, падающим сверху, — или просто через var(--su-bg). Заголовки используют Geist, если страница его загружает, а иначе системный шрифт: сам пресет ничего не скачивает.

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

Свои цвета

theme() по-прежнему работает поверх, так что пресет — это отправная точка, а не форк. Этот даёт каждой палитре ещё два слота, glow и glowEnd, — два конца градиента, которым нарисованы её ободок и ореол. На свечении ничего не читают, так что они могут быть сколь угодно яркими.

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