Чертёж

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

Карточка

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

  1. Аккаунт

  2. Профиль

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

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

  1. Сегодня

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

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

  2. Вчера

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

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

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

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

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

import { iconSet, styles } from 'sitelo/ui'

iconSet('square')

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

iconSet('square') рисует иконки в тон — прямыми тонкими линиями с квадратными концами и острыми углами, как в примере выше, — включая те, что компоненты рисуют сами. Вызовите его один раз, в модуле, который импортируют ваши страницы.

Задайте странице фон var(--su-bp-backdrop), чтобы получить фон пресета с тонкой сеткой поверх, или просто var(--su-bg). Пресет использует Geist или Inter, а также Geist Mono, JetBrains Mono или IBM Plex Mono, если страница их загружает, а иначе — системные шрифты; сам он ничего не скачивает.

body {
  background: var(--su-bp-backdrop);
  color: var(--su-text);
  font-family: var(--su-font-sans);
}

Свои цвета

theme() по-прежнему работает поверх, так что пресет — это отправная точка, а не форк. Основная палитра — это тушь: сплошная кнопка, отмеченный флажок, заполненная полоса, всё выбранное, — поэтому primary перекрашивает всё это разом. Остальные токены принадлежат самому пресету: --su-bp-accent — синий, которым рисуется фокус и отмечается заголовок; --su-bp-mark — метки совмещения, которые убирает transparent; --su-bp-field — линия вокруг поля; --su-bp-track — жёлоб, по которому идёт индикатор прогресса; --su-bp-grid и --su-bp-cell — линии фона и размер его клеток; и --su-bp-tracking — разрядка прописных в подписи. Здесь синий становится сигнальным оранжевым, а вместе с ним и метки.

head(
  styles({ preset: 'blueprint' }),
  theme(
    { bpAccent: '#c2410c', bpMark: '#c2410c' },
    { dark: { bpAccent: '#ff7a3d', bpMark: '#ff7a3d' } },
  ),
)