Терминал

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

Карточка

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

  1. Аккаунт

  2. Профиль

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

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

  1. Сегодня

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

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

  2. Вчера

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

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

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

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

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

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

iconSet('square')

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

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

Оформите в нём и саму страницу — её фон, цвет текста и шрифт, — и компоненты лягут на неё так же, как выше. Пресет использует JetBrains Mono, IBM Plex Mono или Source Code Pro, если страница загружает один из них, а иначе — системный моноширинный шрифт; сам он ничего не скачивает.

body {
  background: var(--su-bg);
  color: var(--su-text);
  font-family: var(--su-font-mono);
}

Свои цвета

theme() по-прежнему работает поверх, так что пресет — это отправная точка, а не форк: здесь акцент становится янтарным, как люминофор старого монитора, вместе с линиями, которыми он рисуется. Три токена принадлежат самому пресету: --su-tm-tracking — разрядка прописных в подписи; --su-tm-track — жёлоб, по которому идёт индикатор прогресса или слайдер; и --su-tm-field — линия вокруг поля, в тёмной теме того же бледно-серого цвета, что и панели: поднимите её, если края полей должны выделяться сильнее.

head(
  styles({ preset: 'terminal' }),
  theme(
    {
      primary: {
        base: '#8a5200', hover: '#734400', active: '#5c3600',
        soft: '#f6e6cc', softHover: '#efd9b3', softFg: '#4d2e00',
        border: '#c9a066', ring: 'rgba(138, 82, 0, 0.3)',
      },
    },
    {
      dark: {
        primary: {
          base: '#ffb000', hover: '#ffd480', active: '#e69e00',
          soft: '#33260d', softHover: '#45330f', softFg: '#ffd480',
          border: '#d99600', ring: 'rgba(255, 176, 0, 0.4)',
        },
      },
    },
  ),
)