应用开发者

组件样式

让已有组件引用语义 CSS variables；主题变更无需重新构建 CSS 或重新渲染组件。

直接使用语义变量

不要为每套预设生成静态 stylesheet，也不要把运行时主题值拼接成 class 名。让样式规则保持不变，让 Runtime 替换变量值。

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 的预构建静态 bridge（@oriatheme/tailwind/oria.css；custom prefix 用 oria theme tailwind-bridge 生成）。

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 提供 26 个固定色系和 11 个色阶，适合选择或通用样式；它们不会随主题切换。只有语义 --oria-* 变量回应主题。

继续：React 与 Next.js