Personnalisation

/* Charger le DSBJ d'abord */
@import '@flrxnt/dsbj';

/* Puis surcharger les variables */
:root {
  /* Couleur d'action principale */
  --bj-action-high: #1a5f3c;
  --bj-action-high-hover: #14493d;
  --bj-action-high-active: #0f3a30;

  /* Fond et bordures */
  --bj-bg-alt: #f0f4f1;
  --bj-border-default: #c8d6cc;

  /* Arrondis */
  --bj-radius-sm: 6px;
  --bj-radius-md: 10px;

  /* Accent */
  --bj-accent: #e8a500;
}

/* Exemple : charte du Ministère de la Santé */
:root {
  --bj-action-high: #0077b6;
  --bj-action-high-hover: #005f92;
  --bj-action-high-active: #004a73;
  --bj-action-low: #e0f0fa;
  --bj-action-low-hover: #c8e3f5;
  --bj-accent: #ff6b35;
  --bj-accent-text: #c44d1e;
}

/* Surcharges spécifiques au mode sombre */
[data-bj-theme="dark"] {
  --bj-action-high: #4da3c9;
  --bj-action-high-hover: #6bb8da;
  --bj-bg-default: #0a1628;
  --bj-bg-alt: #101e33;
  --bj-bg-elevated: #162640;
  --bj-border-default: #253d5c;
}

/* Les mêmes couleurs s'appliquent aussi
   quand le système est en mode sombre */
@media (prefers-color-scheme: dark) {
  :root:not([data-bj-theme="light"]) {
    --bj-action-high: #4da3c9;
    --bj-bg-default: #0a1628;
  }
}

/* Section héro avec un fond contrasté */
.hero-section {
  --bj-bg-default: var(--bj-bg-contrast);
  --bj-text-default: var(--bj-text-inverted);
  --bj-action-high: var(--bj-accent);
  --bj-border-default: rgba(255, 255, 255, 0.2);

  background-color: var(--bj-bg-default);
  color: var(--bj-text-default);
}

/* Les composants DSBJ à l'intérieur de .hero-section
   utiliseront automatiquement ces couleurs */

// mon-theme/_palette.scss
// Remplacer les couleurs primaires
$palette: (
  'vert-benin': (
    975: #e0f2f1,
    925: #b2dfdb,
    850: #4db6ac,
    main-491: #00796b,
    425: #00695c,
    sun-340: #004d40,
    moon-680: #26a69a,
  ),
  // ... les autres familles restent inchangées
  // sauf celles que vous souhaitez modifier
);

// mon-theme.scss
@use '@flrxnt/dsbj/src/core/color/settings' with (
  $palette: (/* votre palette personnalisée */)
);
@use '@flrxnt/dsbj/src/dsbj';

// Ou si vous voulez tout contrôler :
@use '@flrxnt/dsbj/src/core/color/tokens';

:root {
  @include tokens.generate-palette-tokens;
  @include tokens.generate-semantic-tokens-light;

  // Surcharges sémantiques supplémentaires
  --bj-action-high: #00796b;
}

[data-bj-theme="dark"] {
  @include tokens.generate-semantic-tokens-dark;
  --bj-action-high: #26a69a;
}