Personnaliser

Variables CSS

À l’exécution, Cauri expose ses couleurs, ses polices et ses rayons en variables CSS. Elles se lisent et se modifient sans recompiler, dans votre CSS ou depuis JavaScript.

Variables BDU

Huit variables --cauri-*, définies sur :root. Elles ne dépendent pas des variables --bs-* : utilisez-les dans une application qui n’utilise pas les composants de Cauri (React, PHP, Tailwind…). Elles ne changent pas en mode sombre.

Variables BDU
Variable	Valeur	Usage
`--cauri-blue`	`#2B62AA`	Bleu de marque : titres, bandeau, primaire
`--cauri-blue-dark`	`#0856A1`	Bleu foncé : liens
`--cauri-green`	`#387A1B`	Vert accessible : boutons, texte, coches
`--cauri-green-brand`	`#6CA942`	Vert de marque : filets et accents, jamais du texte
`--cauri-green-soft`	`#EEF3EA`	Fond vert très clair
`--cauri-gray-100`	`#EAEBEA`	Fond neutre
`--cauri-gray-300`	`#D5D8DC`	Bordures
`--cauri-text`	`#212121`	Texte courant

Variables globales --bs-*

Définies sur :root, elles pilotent les styles de base et des classes utilitaires. Celles qui changent en mode sombre sont redéfinies sous [data-bs-theme=dark].

Variables globales --bs-*
Famille	Variables	Exemple de valeur BDU
Couleurs du thème	`--bs-primary`, `--bs-secondary`, `--bs-success`, `--bs-info`, `--bs-warning`, `--bs-danger`, `--bs-light`, `--bs-dark`	`--bs-primary` : `#2B62AA`
Couleurs en composantes	`--bs-primary-rgb`… (pour `rgba(var(--bs-primary-rgb), .1)`)	`43, 98, 170`
Variantes douces	`--bs--text-emphasis`, `--bs--bg-subtle`, `--bs-*-border-subtle`	Fonds et textes des alertes
Texte et fond de page	`--bs-body-color`, `--bs-body-bg`, `--bs-emphasis-color`, `--bs-secondary-color`, `--bs-secondary-bg`, `--bs-tertiary-color`, `--bs-tertiary-bg`	`--bs-body-color` : `#212121`
Typographie	`--bs-body-font-family`, `--bs-body-font-size`, `--bs-body-font-weight`, `--bs-body-line-height`, `--bs-font-sans-serif`, `--bs-font-monospace`	Roboto, puis polices système
Liens	`--bs-link-color`, `--bs-link-hover-color`, `--bs-link-decoration`	`--bs-link-color` : `#0856A1`
Bordures	`--bs-border-width`, `--bs-border-style`, `--bs-border-color`, `--bs-border-color-translucent`	`1px`
Rayons	`--bs-border-radius`, `-sm`, `-lg`, `-xl`, `-xxl`, `-2xl`, `-pill`	`--bs-border-radius` : `0.3125rem`
Ombres	`--bs-box-shadow`, `--bs-box-shadow-sm`, `--bs-box-shadow-lg`, `--bs-box-shadow-inset`	Ombres des utilitaires `shadow-*`
Focus	`--bs-focus-ring-width`, `--bs-focus-ring-opacity`, `--bs-focus-ring-color`	Anneau de focus des aides
Validation	`--bs-form-valid-color`, `--bs-form-valid-border-color`, `--bs-form-invalid-color`, `--bs-form-invalid-border-color`	Retours de formulaire
Palette de base	`--bs-blue`, `--bs-red`, `--bs-gray-100` à `--bs-gray-900`…	Couleurs d’origine, pas celles de la charte

Lesquelles utiliser

Dans un composant ou une page Cauri : préférez les variables sémantiques (--bs-primary, --bs-body-bg, --bs-border-color, --bs-border-radius). Elles suivent le mode de couleur et la charte.
Hors de Cauri (application sans les composants, styles tiers) : --cauri-*, qui sont stables et indépendantes.
À éviter : la palette de base --bs-blue, --bs-green… Ce sont les couleurs d’origine de la bibliothèque, pas celles de la BDU. Pour du bleu de marque, utilisez --bs-primary ou --cauri-blue.

Utiliser les variables dans votre CSS#

.encart-epargne {
  padding: 1rem;
  color: var(--cauri-text);
  background: var(--cauri-green-soft);
  border-left: 4px solid var(--cauri-green-brand);
  border-radius: var(--bs-border-radius);
}

.encart-epargne a {
  color: var(--bs-link-color);
}

/* Fond translucide à partir des composantes de couleur */
.survol-primaire:hover {
  background: rgba(var(--bs-primary-rgb), .1);
}

Variables locales des composants

Chaque composant déclare ses propres variables, préfixées par son nom : --bs-btn-* pour les boutons, --bs-card-* pour les cartes, --bs-modal-* pour la modale, --bs-alert-*, --bs-navbar-*, --bs-nav-*, --bs-dropdown-*, --bs-accordion-*, --bs-list-group-*, --bs-table-*, --bs-progress-*… Le composant lit ces variables pour dessiner son aspect.

Modifiez-les sur l’élément lui-même, ou sur une classe à vous, pour changer un seul composant sans toucher aux autres et sans écraser de règle. C’est la méthode à privilégier pour un cas particulier.

Variables d'un bouton

Extrait des variables définies par .btn et .btn-primary. Les variables hover, active et disabled suivent le même modèle.

Variables d'un bouton
Variable	Rôle	Valeur du bouton principal
`--bs-btn-padding-x`	Marge intérieure horizontale	`1.5rem`
`--bs-btn-padding-y`	Marge intérieure verticale	`0.625rem`
`--bs-btn-font-size`	Taille du texte	`1rem`
`--bs-btn-font-weight`	Graisse du texte	`600`
`--bs-btn-color`	Couleur du texte	`#fff`
`--bs-btn-bg`	Couleur de fond	`#2B62AA`
`--bs-btn-border-color`	Couleur de bordure	`#2B62AA`
`--bs-btn-border-radius`	Rayon des angles	`var(--bs-border-radius)`
`--bs-btn-hover-bg`, `--bs-btn-hover-color`	Fond et texte au survol	Bleu plus foncé, `#fff`
`--bs-btn-active-bg`	Fond à l’appui	Bleu encore plus foncé
`--bs-btn-disabled-opacity`	Opacité d’un bouton désactivé	`0.65`

Changer un composant par ses variables#

Le premier bouton garde son aspect. Le second reçoit des variables locales : plus large, texte plus grand. Aucune règle CSS n’est écrasée.

<button type="button" class="btn btn-primary">Ouvrir un compte</button>
<button type="button" class="btn btn-primary" style="--bs-btn-padding-x: 2.5rem; --bs-btn-font-size: 1.25rem;">Ouvrir un compte</button>

Créer une variante de composant#

Une classe à vous regroupe les variables ; le composant s’adapte seul. Vérifiez le contraste du texte sur le fond choisi.

.btn-agence {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--cauri-green);
  --bs-btn-border-color: var(--cauri-green);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #306817;
  --bs-btn-hover-border-color: #306817;
  --bs-btn-active-bg: #2d6216;
  --bs-btn-active-border-color: #2d6216;
}

.carte-compacte {
  --bs-card-spacer-y: .5rem;
  --bs-card-spacer-x: .75rem;
  --bs-card-border-radius: 0;
}

Lire et modifier depuis JavaScript#

const racine = document.documentElement;

// Lire
const bleu = getComputedStyle(racine).getPropertyValue('--cauri-blue').trim(); // "#2B62AA"

// Modifier une variable locale d'un composant
document.querySelector('#bouton-credit').style.setProperty('--bs-btn-bg', '#1F4E8C');

// Remettre la valeur d'origine
document.querySelector('#bouton-credit').style.removeProperty('--bs-btn-bg');

Ce qui ne change pas à l'exécution

Modifier --bs-primary dans le navigateur ne recolore pas .btn-primary : le bouton a sa propre valeur calculée à la compilation (--bs-btn-bg: #2B62AA), comme les états survol et actif. Seules les classes qui lisent directement la variable suivent, par exemple .text-primary ou .bg-primary.

Pour changer la charte d’un projet, recompilez avec Sass (voir Sass). Les variables CSS servent à adapter un composant, une section ou une page, pas à rebâtir tout le thème.

Les composants BDU (.cauri-*) utilisent des valeurs compilées et non les variables --cauri-* : modifier ces variables dans le navigateur ne les recolore pas.