For application developers
Styling components
Point existing components at semantic CSS variables; a theme change needs no CSS rebuild or component rerender.Use semantic variables directly
Do not generate a static stylesheet per preset or build class names from runtime theme values. Keep rules stable and let the runtime replace variable values.
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));
}Map semantic values in Tailwind v4
Skip the hand-written mapping with the prebuilt static bridge from @oriatheme/tailwind (@oriatheme/tailwind/oria.css; generate a custom prefix with 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>Base colors stay stable
@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.