Pour les développeurs d'applications
Composants de style
Pointez les composants existants vers les variables sémantiques CSS ; un changement de thème ne nécessite aucune reconstruction CSS ni rendu de composant.Utiliser directement des variables sémantiques
Ne générez pas de feuille de style statique par préréglage et ne créez pas de noms de classe à partir des valeurs du thème d'exécution. Gardez les règles stables et laissez le runtime remplacer les valeurs des variables.
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));
}Mapper les valeurs sémantiques dans Tailwind v4
Ignorez le mappage écrit à la main avec le pont statique prédéfini de @oriatheme/tailwind (@oriatheme/tailwind/oria.css ; générez un préfixe personnalisé avec le pont arrière du thème 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>Les couleurs de base restent stables
@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.