Für Anwendungsentwickler
Styling-Komponenten
Verweisen Sie vorhandene Komponenten auf semantische CSS-Variablen. Eine Theme-Änderung erfordert keinen CSS-Neuaufbau oder ein erneutes Rendern der Komponenten.Semantische Variablen direkt verwenden
Generieren Sie kein statisches Stylesheet pro Voreinstellung und erstellen Sie keine Klassennamen aus Laufzeit-Designwerten. Halten Sie die Regeln stabil und lassen Sie die Laufzeit Variablenwerte ersetzen.
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));
}Ordnen Sie semantische Werte in Tailwind v4 zu
Überspringen Sie die handgeschriebene Zuordnung mit der vorgefertigten statischen Brücke von @oriatheme/tailwind (@oriatheme/tailwind/oria.css; generieren Sie ein benutzerdefiniertes Präfix mit dem Oria-Thema 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>Grundfarben bleiben stabil
@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.