Основа

Темы продуктов

База и слой продукта: как подключить тему ShadeNotes, портфолио или новую

База ставится в любой продукт первой и одна на всех. Слой продукта меняет только акцент: --primary, --primary-foreground, --primary-ink, --primary-edge. Новый продукт делает свой слой по образцу

npx shadcn@latest add @umbra/theme-base

Основа системы: CSS-переменные (tokens.css), базовые стили (base.css) и мост в Tailwind. Файлы ложатся в styles/umbra/

  • tokens.css: окно, плитка, вложенное, текст, роли цвета, стекло, геометрия, шрифт, типографика, движение. Светлая тема в :root, тёмная в .dark
  • base.css: шрифт SF Pro системным стеком (Inter запасной), text-wrap: balance у заголовков и pretty у абзацев, полоса прокрутки 4 px цветом --text 22 %, .glass, .glass-soft, .glass-dense, .glass-pop, .edge-fade, .umbra-fill (карточки по 2 в ряд, по 1 на узком окне; нечётный последний на всю ширину), утилиты движения (.umbra-appear, .umbra-rise, .umbra-leave, .umbra-exit, .umbra-stagger, .umbra-transition, .umbra-spin), правила prefers-reduced-motion и prefers-reduced-transparency
  • tailwind-v4.css: @theme inline и @utility для Tailwind 4
  • tailwind-v3-preset.cjs: пресет для Tailwind 3.4. Классы те же, что в v4, один в один

Когда брать

Всегда, первым шагом в новом продукте и перед любым компонентом @umbra

Когда не брать

Если tokens.css уже подключён в продукте вручную. Второй раз не ставить: переменные задаются в одном месте

Поверхности

Светлая

window

tile

nested

popover

skeleton

nav-active

Тёмная

window

tile

nested

popover

skeleton

nav-active

Роли цвета

Светлая

primary

indigo

indigo-soft

giants

record

destructive

Тёмная

primary

indigo

indigo-soft

giants

record

destructive

Типографика

Светлая

Display 36/40

Title 22/28

Heading 20/28

Body 15/22: основной текст приложений

Label 14/20: подписи кнопок

Caption 13/18: мета

MONO 12/16 · ВТ, 10:00

Тёмная

Display 36/40

Title 22/28

Heading 20/28

Body 15/22: основной текст приложений

Label 14/20: подписи кнопок

Caption 13/18: мета

MONO 12/16 · ВТ, 10:00

Стекло поверх контента

Светлая

.glass

липкая шапка, меню, подсказки

Тёмная

.glass

липкая шапка, меню, подсказки

Можно

  • Брать цвет только через роль: bg-tile, text-muted, bg-primary
  • Текст роли на мягких тонах bg-indigo-soft, bg-giants-soft; на насыщенных bg-indigo, bg-giants только иконки
  • Чернила text-*-ink: иконки и текст. Мелкий текст только там, где пара проходит Lc 75 в pnpm apca: text-primary-ink везде, text-indigo-ink и text-giants-ink только в светлой теме; в тёмной они только для крупного полужирного (text-title, text-heading)
  • Стекло только у того, что лежит поверх контента: липкая шапка, меню, подсказки, диалоги, док

Нельзя

  • Сырые цвета, p-[13px], rounded-lg, модификаторы прозрачности (bg-primary/50): их ловит @umbra/eslint
  • Переписывать tokens.css в продукте. Продукт меняет только акцент в product.css
  • Модификатор dark: для цветов: тема переключается переменными, классы те же
  • Смешивать классы base.css (.umbra-transition, .glass) с утилитами того же свойства на одном элементе (umbra-transition duration-base): в Tailwind 4 base.css вне слоёв и побеждает утилиты, в 3.4 проигрывает. Нужна другая длительность: transition-all duration-base ease-out без .umbra-transition