Неоморфизм

neumorphism — это soft UI: любая поверхность и есть сама страница, а элемент управления выделяется только светом и тенью, приподнятый над страницей или вдавленный в неё. Пресет сохраняет то, чем этот стиль обычно жертвует, — текст, проходящий WCAG AA, и рамку фокуса — и следует тёмной теме, как и всё остальное. Но фоном самой страницы должен быть var(--su-bg): весь эффект держится на том, что у них один цвет.

Карточка

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

  1. Аккаунт

  2. Профиль

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

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

  1. Сегодня

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

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

  2. Вчера

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

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

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

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

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

import { styles } from 'sitelo/ui'

head(
  title('Мой сайт'),
  styles({ preset: 'neumorphism' }),
)
// <link rel="stylesheet" href="/su/ui-c9428b65.css">
// <link rel="stylesheet" href="/su/neumorphism-5d0e7b91.css">
body {
  background: var(--su-bg);
}

Свои цвета

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

head(
  styles({ preset: 'neumorphism' }),
  theme({
    primary: { base: '#7c3aed', hover: '#6d28d9', active: '#5b21b6', glow: '#e879f9' },
  }),
)