Для разработчиков приложений

Компоненты стиля

Наведите существующие компоненты на семантические переменные CSS; изменение темы не требует пересборки CSS или повторной визуализации компонентов.

Используйте семантические переменные напрямую

Не создавайте статическую таблицу стилей для каждой предустановки и не создавайте имена классов на основе значений темы времени выполнения. Поддерживайте стабильность правил и позволяйте среде выполнения заменять значения переменных.

css

.card {
  color: var(--oria-color-surface-fg);
  background: var(--oria-color-surface-raised);
  border: var(--oria-border-width-default) solid var(--oria-color-border);
  border-radius: var(--oria-radius-lg);
  box-shadow: var(--oria-shadow-md);
}

.page {
  background: var(--oria-pattern-bg, none),
    var(--oria-gradient-bg, var(--oria-color-bg));
}

Сопоставление семантических значений в Tailwind v4

Пропустите рукописное сопоставление с помощью предварительно созданного статического моста из @oriatheme/tailwind (@oriatheme/tailwind/oria.css; создайте собственный префикс с хвостовым ветровым мостом темы oria).

css

@import "tailwindcss";

@theme inline {
  --color-background: var(--oria-color-bg);
  --color-foreground: var(--oria-color-fg);
  --color-surface: var(--oria-color-surface);
  --color-primary: var(--oria-color-primary);
  --color-primary-foreground: var(--oria-color-primary-fg);
  --radius-lg: var(--oria-radius-lg);
  --shadow-md: var(--oria-shadow-md);
}

tsx

<section className="rounded-lg bg-surface p-4 text-foreground shadow-md">
  <button className="bg-primary px-4 py-2 text-primary-foreground">
    Save changes
  </button>
</section>

Базовые цвета остаются стабильными

@oriatheme/colors provides 26 fixed families and 11 steps for selection and general styling; they do not change with a theme. Only semantic --oria-* variables respond to the theme.

Продолжение: React и Next.js.