Tokens de couleur

Les tokens de couleur d'Ori sont définis dans le package @govpf/ori-tokens et exposés sous forme de variables CSS. Ils sont organisés par rôle sémantique (surface, texte, feedback) plutôt que par valeur brute, ce qui permet au thème (clair / sombre) de réorienter les couleurs sans changer le code des composants.

Marque

brand-primary var(--color-brand-primary)

brand-primary-hover var(--color-brand-primary-hover)

brand-primary-active var(--color-brand-primary-active)

brand-primary-subtle var(--color-brand-primary-subtle)

Surfaces

surface-base var(--color-surface-base)

surface-muted var(--color-surface-muted)

surface-subtle var(--color-surface-subtle)

surface-inverse var(--color-surface-inverse)

Texte

text-primary var(--color-text-primary)

text-secondary var(--color-text-secondary)

text-muted var(--color-text-muted)

text-link var(--color-text-link)

Feedback

feedback-info var(--color-feedback-info)

feedback-success var(--color-feedback-success)

feedback-warning var(--color-feedback-warning)

feedback-danger var(--color-feedback-danger)

Utilisation

En CSS pur, référencer les variables directement :

.ma-classe {
  background-color: var(--color-surface-base);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
}

Avec le preset Tailwind @govpf/ori-tailwind-preset, les couleurs sont également exposées comme valeurs Tailwind sémantiques :

<div class="bg-surface-base text-text-primary border border-border-default">
  Contenu utilisant le preset Tailwind
</div>