Gavia UIv1.0.0

Подбор темы

Выберите базовую тему, измените цвета и посмотрите, как выглядят компоненты. Скопируйте CSS для проекта или задание для агента.

Цветовая схема

Взять за основу

При смене основы цвета сбрасываются к выбранной теме. Из неё также берутся размеры, шрифты и цвета статусов.

Латинские строчные буквы, цифры и дефис, до 32 символов. Имя должно отличаться от готовых тем.

Фон страницы.

Фон карточек и панелей.

Фон групп и состояний hover и disabled.

Заголовки и основной текст интерфейса.

Подписи, пояснения и текст placeholder.

Рамки полей, карточек и разделители.

Фон основной кнопки. Цвет текста и цвета состояний hover и active подбираются автоматически.

Ссылки, выделение выбора и клавиатурный фокус.

Изменения сохраняются в этом браузере.

Пример интерфейса

Цвета применяются только к этому примеру.

gavia
my-gaviaНастройки темы
Пример формы

Новый проект

Черновик

Посмотрите, как сочетаются фон, текст и основной цвет. Форма не создаёт и не сохраняет проекты.

Приоритет

Нажатий: 0

Варианты действий

ГотовоВ процессеНужна проверкаБез статуса
Цвета статусов берутся из базовой темы
Цвета успеха, предупреждения и ошибки здесь не меняются.

Контраст текста

Показанные пары проходят проверку
  • Основной текст16.73:1 / 4.5:1
  • Вспомогательный текст5.70:1 / 4.5:1
  • Текст на вторичной поверхности15.63:1 / 4.5:1
  • Основное действие5.13:1 / 4.5:1
  • Основное действие: hover5.84:1 / 4.5:1
  • Основное действие: active6.73:1 / 4.5:1
  • Опасное действие5.75:1 / 4.5:1
  • Опасное действие: hover6.97:1 / 4.5:1
  • Подсказка17.61:1 / 4.5:1
  • Информационное сообщение7.80:1 / 4.5:1
  • Успешное сообщение5.84:1 / 4.5:1
  • Предупреждение5.73:1 / 4.5:1
  • Сообщение об ошибке5.04:1 / 4.5:1
  • Фокус на странице4.87:1 / 3:1
  • Ссылка на странице6.39:1 / 4.5:1
  • Фокус на вторичной поверхности4.55:1 / 3:1
  • Текст на поднятой поверхности17.33:1 / 4.5:1
  • Вспомогательный текст на поднятой поверхности5.90:1 / 4.5:1
  • Фокус на поднятой поверхности5.05:1 / 3:1
  • Акцентный текст на поднятой поверхности6.62:1 / 4.5:1
  • Акцентный текст на вторичной поверхности5.97:1 / 4.5:1
  • Акцентный текст на выбранной поверхности5.41:1 / 4.5:1
  • Акцентный текст на мягкой поверхности при наведении4.95:1 / 4.5:1
  • Отметка выбора на акценте5.13:1 / 3:1

Здесь проверяется контраст нескольких цветовых пар. Доступность всего интерфейса нужно проверить отдельно. Для основного цвета автоматически выбирается светлый или тёмный текст; цвет ссылок задаёте вы.

Скопируйте настройки темы

Выберите задание для агента, настройки в JSON или CSS для подключения в проекте.

Задание для агента
Создай тему Gavia UI «my-gavia» на основе «gavia» по спецификации ниже.

Источник: packages/ui-kit/tokens/source.json. Добавь тему с указанным colorScheme в themes и контракт WlThemeName.

Для каждого токена сначала скопируй его themes[baseTheme] ?? value в themes[name]; это сохраняет полный снимок основы, включая семантические отличия.

Затем применяй overrides только к foundation-токенам и semanticBindings только к указанным семантическим ролям основного действия.

Не меняй существующие темы, имена Wl* и --wl-*. Не подменяй выбранные background/primary/link автоматически.

Запусти pnpm tokens:sync и pnpm tokens:check. Проверь контраст и показ компонентов с data-wl-theme нового имени, включая портал Select.

CSS для быстрого просмотра содержит полный снимок базы, а JSON ниже — переносимые изменения источника.

Спецификация JSON:

{
  "schemaVersion": 1,
  "name": "my-gavia",
  "baseTheme": "gavia",
  "colorScheme": "light",
  "palette": {
    "background": "#faf9f6",
    "surface": "#fefdfb",
    "softSurface": "#eef2f3",
    "text": "#0f1a23",
    "mutedText": "#5b6470",
    "border": "#d5dfe3",
    "primary": "#3c7490",
    "link": "#3c7490"
  },
  "overrides": {},
  "semanticBindings": {}
}

CSS подключается после стилей Gavia UI; атрибут data-wl-theme должен стоять на html, чтобы всплывающие элементы получили вашу тему.