customization.md

Personnalisation

browserux.css se personnalise avec des propriétés personnalisées CSS. Chargez BrowserUX d'abord, puis surchargez les tokens dans votre propre feuille de styles.

---

Surcharger les tokens sémantiques

Préférez les tokens sémantiques aux tokens de palette bruts :

:root {
  --bux-color-accent: #7c3aed;
  --bux-color-accent-2: #06b6d4;
  --bux-font-size: 1.8rem;
}

Les tokens comme --bux-color-accent-soft, --bux-focus-color et --bux-selection-bg sont dérivés des tokens sémantiques dans les navigateurs compatibles color-mix().

---

Surcharger les valeurs claires et sombres

BrowserUX utilise light-dark() lorsque c'est possible. Vous pouvez suivre le même modèle :

@supports (color: light-dark(white, black)) {
  :root {
    --bux-color-bg: light-dark(#f7f7f7, #101010);
    --bux-color-text: light-dark(#111111, #f2f2f2);
    --bux-color-accent: light-dark(#7c3aed, #a78bfa);
  }
}

Pour les navigateurs sans light-dark(), gardez des valeurs de repli classiques hors du bloc @supports :

:root {
  --bux-color-bg: #f7f7f7;
  --bux-color-text: #111111;
}

---

Thème manuel

Si votre application contrôle le thème actif avec un attribut, surchargez les tokens sémantiques pour cet état :

[data-theme="dark"] {
  color-scheme: dark;
  --bux-color-bg: #101010;
  --bux-color-text: #f2f2f2;
  --bux-color-muted: #c8c8c8;
  --bux-color-border: #555555;
}

---

Mouvement

Utilisez les tokens de mouvement BrowserUX dans vos propres composants si vous voulez qu'ils respectent la même stratégie de mouvement réduit :

.panel {
  transition:
    opacity var(--bux-duration-base) var(--bux-easing),
    transform var(--bux-duration-base) var(--bux-easing);
}

Quand prefers-reduced-motion: reduce est actif, BrowserUX remplace les tokens de durée par 1ms.

---

Cascade layers

BrowserUX déclare cet ordre de couches interne :

@layer bux.tokens, bux.browser-default, bux.preferences, bux.native-ui;

Les styles applicatifs hors layer surchargent naturellement toutes les couches BrowserUX. Si votre projet utilise des layers, déclarez vos couches applicatives après BrowserUX ou gardez vos surcharges de composants hors layer.

---

Migration depuis la v4

Les principaux noms de tokens v4 ont été renommés en v5. Remplacements fréquents :

- --bux-color-primary
+ --bux-color-accent

- --bux-page-bg
+ --bux-color-bg

- --bux-typo-font-size
+ --bux-font-size

Consultez la référence des variables CSS pour la table complète.