Sass

Le thème BDU est écrit en Sass. Modifiez une variable et tous les composants suivent, sans écraser de CSS.

Surcharger une variable

Toutes les variables BDU sont définies avec !default : déclarez vos valeurs avant l'import, elles remplacent celles du système. Les variables de Bootstrap qui en dépendent ($primary, $link-color…) suivent automatiquement.

Changer le bleu de marque#

$cauri-blue: #1F4E8C;
@import "@bdu/cauri/scss/cauri";

Variables BDU

Valeurs par défaut, lues dans scss/_tokens.scss. Les autres variables ($font-size-base, $spacer, $enable-shadows…) restent disponibles : voir Options Sass et Cartes Sass.

Variables Sass BDU
Variable	Valeur par défaut	Rôle
`$cauri-blue`	`#2B62AA`	Bleu de marque : primaire, titres, bandeau
`$cauri-blue-dark`	`#0856A1`	Bleu foncé : liens
`$cauri-green-brand`	`#6CA942`	Vert de marque : accents et filets, jamais pour du texte
`$cauri-green`	`#387A1B`	Vert accessible : boutons secondaires, coches
`$cauri-green-soft`	`#EEF3EA`	Fond vert très clair
`$cauri-gray-100`	`#EAEBEA`	Gris clair : fonds neutres
`$cauri-gray-300`	`#D5D8DC`	Gris : bordures
`$cauri-text`	`#212121`	Texte courant
`$cauri-dark-bg`	`#0D1520`	Thème sombre : fond de page
`$cauri-dark-surface`	`#142030`	Thème sombre : surfaces
`$cauri-dark-raised`	`#18273A`	Thème sombre : surfaces relevées (cartes, simulateur)
`$cauri-dark-line`	`#25364B`	Thème sombre : bordures
`$cauri-dark-text`	`#E8EEF4`	Thème sombre : texte
`$cauri-blue-light`	`#8DB6EE`	Thème sombre : bleu clair pour le texte, les liens et les contours
`$cauri-green-light`	`#8CCB66`	Thème sombre : vert clair pour le texte, les liens et les contours
`$cauri-danger-light`	`#EA868F`	Thème sombre : rouge clair pour le texte, les liens et les contours
`$body-bg-dark`	`$cauri-dark-bg`	Fond de page du thème sombre (suit $cauri-dark-bg)
`$body-secondary-bg-dark`	`$cauri-dark-surface`	Fond secondaire du thème sombre
`$body-tertiary-bg-dark`	`$cauri-dark-raised`	Fond tertiaire du thème sombre
`$border-color-dark`	`$cauri-dark-line`	Couleur des bordures du thème sombre
`$body-color-dark`	`$cauri-dark-text`	Couleur du texte du thème sombre
`$primary`	`$cauri-blue`	Couleur primaire de Bootstrap (suit $cauri-blue)
`$secondary`	`$cauri-green`	Couleur secondaire de Bootstrap (suit $cauri-green)
`$success`	`$cauri-green`	Couleur de succès de Bootstrap (suit $cauri-green)
`$info`	`$cauri-blue-dark`	Couleur d'information (suit $cauri-blue-dark)
`$light`	`$cauri-gray-100`	Couleur claire de Bootstrap
`$body-color`	`$cauri-text`	Couleur du texte du site
`$link-color`	`$cauri-blue-dark`	Couleur des liens
`$font-family-sans-serif`	`Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif`	Pile de polices du site
`$headings-font-weight`	`800`	Graisse des titres
`$border-radius`	`.3125rem`	Rayon des boutons et des champs
`$border-radius-sm`	`.3125rem`	Petit rayon
`$border-radius-lg`	`.625rem`	Rayon moyen
`$border-radius-xl`	`1rem`	Rayon des cartes
`$navbar-dark-color`	`rgba(#fff, .85)`	Texte des barres de navigation sombres (contraste 4,5:1 sur le bleu de marque)
`$navbar-dark-hover-color`	`#fff`	Texte des barres de navigation sombres au survol
`$btn-padding-y`	`.625rem`	Marge verticale des boutons
`$btn-padding-x`	`1.5rem`	Marge horizontale des boutons
`$btn-padding-y-sm`	`.4375rem`	Marge verticale de btn-sm
`$btn-padding-x-sm`	`1rem`	Marge horizontale de btn-sm
`$btn-padding-y-lg`	`.8125rem`	Marge verticale de btn-lg
`$btn-padding-x-lg`	`2rem`	Marge horizontale de btn-lg
`$btn-font-weight`	`600`	Graisse du texte des boutons

Importer seulement ce qu'il faut

config charge les variables, les maps, les mixins et les fonctions sans produire de CSS. Ajoutez ensuite uniquement les composants Bootstrap utiles, puis les composants BDU. Dans cet exemple, la feuille fait environ 47 Ko contre 279 Ko pour la feuille complète, avant compression.

Feuille de style réduite#

@import "@bdu/cauri/scss/config";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/buttons";
@import "@bdu/cauri/scss/components";

Ajouter une couleur au thème

Importez variables, étendez la map $theme-colors, puis importez le thème. Les classes btn-accent, text-bg-accent, text-accent… sont générées.

Une couleur « accent »#

@import "@bdu/cauri/scss/variables";
$theme-colors: map-merge($theme-colors, ("accent": #E8A33D));
@import "@bdu/cauri/scss/cauri";

Pensez à vérifier le contraste de la nouvelle couleur avec le texte qui la recouvre (4,5:1 minimum).

Mixins et fonctions

Avec config, vos propres feuilles disposent des variables, des mixins de points de rupture et des fonctions de couleur de Bootstrap.

Un encart responsive#

@import "@bdu/cauri/scss/config";

.encart {
  padding: map-get($spacers, 3);
  color: $cauri-text;
  background: tint-color($cauri-blue, 90%);

  @include media-breakpoint-up(md) {
    padding: map-get($spacers, 5);
  }
}

Variables CSS

À l'exécution, sans compilation, les couleurs sont aussi exposées en variables CSS : --cauri-blue, --cauri-green… et les variables --bs-* de Bootstrap. Voir la page Couleurs.

Compilation

Chemin de résolution. Sass cherche bootstrap/… dans node_modules (--load-path=node_modules, ou loadPaths dans votre outil).
pnpm. Ajoutez aussi bootstrap (5.3.8) aux dépendances de votre projet, sinon l'import échoue : pnpm ne le rend pas visible à la racine de node_modules.
Avertissements. Bootstrap 5.3 utilise encore @import, que Sass signale comme déprécié. Le résultat est correct ; ajoutez --silence-deprecation=import pour masquer l'avertissement.