@pi-spi/app 1.6.0 → 2.1.0

package/lib/module/core/theme.js

@@ -2,18 +2,11 @@
 
 import { createContext, useContext } from 'react';
 import { Appearance } from 'react-native';
-/** Thèmes du SDK. La valeur de chaque membre est sa codification (persistée dans les préférences). */
+/** Thème d'affichage du SDK : celui du téléphone, clair ou sombre. La valeur de chaque membre est sa codification (persistée dans les préférences). */
 export let Themes = /*#__PURE__*/function (Themes) {
   Themes["system"] = "System";
   Themes["light"] = "lightTheme";
   Themes["dark"] = "darkTheme";
-  Themes["yellow"] = "yellowTheme";
-  Themes["green"] = "greenTheme";
-  Themes["blue"] = "blueTheme";
-  Themes["red"] = "redTheme";
-  Themes["orange"] = "orangeTheme";
-  Themes["purple"] = "purpleTheme";
-  Themes["pink"] = "pinkTheme";
   return Themes;
 }({});
 
@@ -25,7 +18,7 @@ export let Themes = /*#__PURE__*/function (Themes) {
   }
   _Themes.fromCode = fromCode;
   function list() {
-    return [Themes.system, Themes.light, Themes.dark, Themes.yellow, Themes.green, Themes.blue, Themes.red, Themes.orange, Themes.purple, Themes.pink];
+    return [Themes.system, Themes.light, Themes.dark];
   }
   _Themes.list = list;
   function label(theme, traductions) {
@@ -34,33 +27,143 @@ export let Themes = /*#__PURE__*/function (Themes) {
         return traductions.appSettingPageMenuThemeLight;
       case Themes.dark:
         return traductions.appSettingPageMenuThemeDark;
-      case Themes.yellow:
-        return traductions.appSettingPageMenuThemeYellow;
-      case Themes.green:
-        return traductions.appSettingPageMenuThemeGreen;
-      case Themes.blue:
-        return traductions.appSettingPageMenuThemeBlue;
-      case Themes.red:
-        return traductions.appSettingPageMenuThemeRed;
-      case Themes.orange:
-        return traductions.appSettingPageMenuThemeOrange;
-      case Themes.purple:
-        return traductions.appSettingPageMenuThemePurple;
-      case Themes.pink:
-        return traductions.appSettingPageMenuThemePink;
       default:
         return traductions.appSettingPageMenuThemeDefault;
     }
   }
   _Themes.label = label;
 })(Themes || (Themes = {}));
+/** Teintes d'une couleur d'accentuation pour un thème clair ou sombre. */
+/**
+ * Couleur d'accentuation, indépendante du thème clair ou sombre. Chaque
+ * couleur a une teinte pour le clair et une, plus lumineuse, pour le
+ * sombre ; contrastes vérifiés (texte ≥ 4,5:1, bouton ≥ 3:1).
+ */
+export let Accents = /*#__PURE__*/function (Accents) {
+  Accents["pispi"] = "pispi";
+  Accents["vert"] = "vert";
+  Accents["bleu"] = "bleu";
+  Accents["rouge"] = "rouge";
+  Accents["orange"] = "orange";
+  Accents["violet"] = "violet";
+  Accents["rose"] = "rose";
+  Accents["turquoise"] = "turquoise";
+  Accents["terracotta"] = "terracotta";
+  Accents["bordeaux"] = "bordeaux";
+  Accents["ardoise"] = "ardoise";
+  return Accents;
+}({});
+const teintes = (accent, surAccent, appui, texte, conteneur, surConteneur, tertiaire) => ({
+  accent,
+  surAccent,
+  appui,
+  texte,
+  conteneur,
+  surConteneur,
+  tertiaire
+});
+const ACCENTS = {
+  [Accents.pispi]: {
+    clair: teintes('#F2A900', '#000000', '#E1A009', '#9A6B00', '#F9EBC2', '#000000', '#FFD573'),
+    sombre: teintes('#F2A900', '#1B1916', '#D99A06', '#F2A900', '#4A3B1C', '#FFDE9A', '#4A3B1C')
+  },
+  [Accents.vert]: {
+    clair: teintes('#43A047', '#000000', '#388E3C', '#2E7D32', '#D9F2D6', '#1B4D1E', '#A5D6A7'),
+    sombre: teintes('#66BB6A', '#1B1916', '#57A85B', '#66BB6A', '#1F3A20', '#B4E6B1', '#1F3A20')
+  },
+  [Accents.bleu]: {
+    clair: teintes('#3B63DB', '#FFFFFF', '#3254BA', '#3B63DB', '#DCE4FB', '#1C3378', '#7390E6'),
+    sombre: teintes('#7B9BFF', '#1B1916', '#6A88E6', '#7B9BFF', '#1F2A4D', '#C7D3FF', '#1F2A4D')
+  },
+  [Accents.rouge]: {
+    clair: teintes('#C62828', '#FFFFFF', '#A82222', '#C62828', '#F9D3D3', '#6E1414', '#E57373'),
+    sombre: teintes('#EF6F6C', '#1B1916', '#D96260', '#EF6F6C', '#4A1F1E', '#FFC9C7', '#4A1F1E')
+  },
+  [Accents.orange]: {
+    clair: teintes('#EF6C00', '#000000', '#D45F00', '#B85300', '#FFE0B2', '#6B3300', '#FFB74D'),
+    sombre: teintes('#FF9A3D', '#1B1916', '#E6893A', '#FF9A3D', '#4A2E14', '#FFD3A8', '#4A2E14')
+  },
+  [Accents.violet]: {
+    clair: teintes('#6A1B9A', '#FFFFFF', '#5A1783', '#6A1B9A', '#EBD7F3', '#3D0E5A', '#BA68C8'),
+    sombre: teintes('#C08BE0', '#1B1916', '#AD7BCB', '#C08BE0', '#37224A', '#EAD2FA', '#37224A')
+  },
+  [Accents.rose]: {
+    clair: teintes('#AD1457', '#FFFFFF', '#93114A', '#AD1457', '#F8D3E1', '#5E0B2F', '#F06292'),
+    sombre: teintes('#F06C9B', '#1B1916', '#D85F8A', '#F06C9B', '#4A1E30', '#FFC8DB', '#4A1E30')
+  },
+  [Accents.turquoise]: {
+    clair: teintes('#00897B', '#000000', '#00796B', '#00796B', '#D2EEEB', '#004D45', '#80CBC4'),
+    sombre: teintes('#4DB6AC', '#1B1916', '#42A39A', '#4DB6AC', '#173A37', '#B2E8E2', '#173A37')
+  },
+  [Accents.terracotta]: {
+    clair: teintes('#C2562E', '#000000', '#A8461F', '#A8461F', '#F8DDD2', '#6B2A12', '#F4A585'),
+    sombre: teintes('#F08A62', '#1B1916', '#D97A55', '#F08A62', '#4A2A1E', '#FFD2C0', '#4A2A1E')
+  },
+  [Accents.bordeaux]: {
+    clair: teintes('#8E2440', '#FFFFFF', '#761E35', '#8E2440', '#F3D3DC', '#4F1022', '#D98EA2'),
+    sombre: teintes('#E57A95', '#1B1916', '#CE6D85', '#E57A95', '#47212B', '#FFCCD9', '#47212B')
+  },
+  [Accents.ardoise]: {
+    clair: teintes('#546E7A', '#FFFFFF', '#455A64', '#546E7A', '#DDE5E9', '#263238', '#B0BEC5'),
+    sombre: teintes('#90A4AE', '#1B1916', '#7F929B', '#90A4AE', '#2C3438', '#D6E2E8', '#2C3438')
+  }
+};
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+(function (_Accents) {
+  const parDefaut = _Accents.parDefaut = Accents.pispi;
+  function fromCode(code) {
+    if (code == null) return parDefaut;
+    return list().includes(code) ? code : parDefaut;
+  }
+  _Accents.fromCode = fromCode;
+  function list() {
+    return [Accents.pispi, Accents.vert, Accents.bleu, Accents.rouge, Accents.orange, Accents.violet, Accents.rose, Accents.turquoise, Accents.terracotta, Accents.bordeaux, Accents.ardoise];
+  }
+  _Accents.list = list;
+  function clair(accent) {
+    return ACCENTS[accent].clair;
+  }
+  _Accents.clair = clair;
+  function sombre(accent) {
+    return ACCENTS[accent].sombre;
+  }
+  _Accents.sombre = sombre;
+  function label(accent, traductions) {
+    switch (accent) {
+      case Accents.vert:
+        return traductions.appSettingPageAccentVert;
+      case Accents.bleu:
+        return traductions.appSettingPageAccentBleu;
+      case Accents.rouge:
+        return traductions.appSettingPageAccentRouge;
+      case Accents.orange:
+        return traductions.appSettingPageAccentOrange;
+      case Accents.violet:
+        return traductions.appSettingPageAccentViolet;
+      case Accents.rose:
+        return traductions.appSettingPageAccentRose;
+      case Accents.turquoise:
+        return traductions.appSettingPageAccentTurquoise;
+      case Accents.terracotta:
+        return traductions.appSettingPageAccentTerracotta;
+      case Accents.bordeaux:
+        return traductions.appSettingPageAccentBordeaux;
+      case Accents.ardoise:
+        return traductions.appSettingPageAccentArdoise;
+      default:
+        // Couleur de base de PI-SPI, proposée comme « Défaut »
+        return traductions.appSettingPageAccentDefaut;
+    }
+  }
+  _Accents.label = label;
+})(Accents || (Accents = {}));
 /** Styles de texte, mêmes noms que le `TextTheme` Material des écrans Flutter. */
 /**
  * Équivalent React Native du `ThemeData` Material des thèmes Flutter du
  * SDK : uniquement les propriétés réellement utilisées par ses écrans.
  * Accessible dans les composants via {@link useTheme} (≈ `Theme.of(context)`).
  */
-/** Valeurs qui varient d'un thème à l'autre (le reste est commun, comme dans theme.dart). */
 const fontSize = (size, weight, height) => ({
   fontSize: size,
   fontWeight: weight,
@@ -84,20 +187,53 @@ export class Themer {
   /** Couleur jaune */
   static amberColor = '#F2A900';
 
-  /** Couleur neural 01 */
-  static neural01Color = '#E6E4E2';
+  // Nuances neutres du thème clair (du plus clair au plus foncé)
+  static neural01Light = '#E6E4E2';
+  static neural02Light = '#BDBDBB';
+  static neural03Light = '#8B887E';
+  static neural04Light = '#615D52';
+  static neural05Light = '#5C5451';
+
+  // Les mêmes nuances en thème sombre, inversées : 01 reste la nuance
+  // discrète (traits, fonds), 03 et 04 les textes secondaires
+  static neural01Dark = '#4A453E';
+  static neural02Dark = '#6F6A60';
+  static neural03Dark = '#A8A297';
+  static neural04Dark = '#BDB7AC';
+  static neural05Dark = '#C4BDB2';
+
+  /** Luminosité du thème affiché, mise à jour par {@link suivreLuminosite} */
+  static luminosite = 'light';
+
+  /** À appeler avec la luminosité du thème affiché : adapte les couleurs neutres ci-dessous. */
+  static suivreLuminosite(luminosite) {
+    Themer.luminosite = luminosite;
+  }
 
-  /** Couleur neural 02 */
-  static neural02Color = '#BDBDBB';
+  /** Couleur neural 01 : traits et fonds discrets */
+  static get neural01Color() {
+    return Themer.luminosite === 'dark' ? Themer.neural01Dark : Themer.neural01Light;
+  }
 
-  /** Couleur neural 03 */
-  static neural03Color = '#8B887E';
+  /** Couleur neural 02 : textes désactivés, indications */
+  static get neural02Color() {
+    return Themer.luminosite === 'dark' ? Themer.neural02Dark : Themer.neural02Light;
+  }
+
+  /** Couleur neural 03 : textes secondaires */
+  static get neural03Color() {
+    return Themer.luminosite === 'dark' ? Themer.neural03Dark : Themer.neural03Light;
+  }
 
-  /** Couleur neural 04 */
-  static neural04Color = '#615D52';
+  /** Couleur neural 04 : textes secondaires plus marqués */
+  static get neural04Color() {
+    return Themer.luminosite === 'dark' ? Themer.neural04Dark : Themer.neural04Light;
+  }
 
   /** Couleur neural 05 */
-  static neural05Color = '#5C5451';
+  static get neural05Color() {
+    return Themer.luminosite === 'dark' ? Themer.neural05Dark : Themer.neural05Light;
+  }
 
   /** Primary */
   static primary = '#F2A900';
@@ -125,43 +261,55 @@ export class Themer {
   static btnNormalHeight = 56;
   /** primary small btn height */
   static btnSmallHeight = 38;
-  static build(spec) {
+
+  // Thème sombre « soft » : fonds brun-gris chauds qui s'éclaircissent avec
+  // l'élévation (page < feuille < carte < champ), texte blanc cassé
+  static darkBackground = '#1B1916';
+  static darkSurface = '#24211E';
+  static darkCard = '#2C2925';
+  static darkInput = '#35312C';
+  static darkOutline = '#4A453E';
+  static darkText = '#ECE8E1';
+  static darkTextSecondary = '#A8A297';
+  static darkTextDisabled = '#6F6A60';
+
+  /** Thème clair ou sombre teinté par la couleur d'accentuation [a]. */
+  static build(dark, a) {
     const T = Themer;
-    const dark = spec.dark;
-    const textColor = dark ? T.whiteColor : T.blackColor;
-    const onColor = dark ? T.whiteColor : T.blackColor;
-    const surface = dark ? '#181612' : T.whiteColor;
-    const card = dark ? '#23211D' : '#FAF8F6';
+    const textColor = dark ? T.darkText : T.blackColor;
+    const surface = dark ? T.darkSurface : T.whiteColor;
+    const card = dark ? T.darkCard : '#FAF8F6';
+    const background = dark ? T.darkBackground : T.whiteColor;
     const text = style => ({
       color: textColor,
       ...style
     });
     return {
       brightness: dark ? 'dark' : 'light',
-      primaryColor: spec.primaryColor,
-      primaryColorDark: spec.primaryColorDark,
-      secondaryHeaderColor: spec.secondaryHeaderColor,
+      primaryColor: a.accent,
+      primaryColorDark: a.texte,
+      secondaryHeaderColor: a.conteneur,
       cardColor: card,
-      scaffoldBackgroundColor: dark ? '#2E2B26' : T.whiteColor,
-      dialogSurfaceTintColor: dark ? '#2E2B26' : T.whiteColor,
+      scaffoldBackgroundColor: background,
+      dialogSurfaceTintColor: dark ? T.darkSurface : T.whiteColor,
       colorScheme: {
         brightness: dark ? 'dark' : 'light',
-        primary: spec.schemePrimary,
-        onPrimary: spec.schemeOnPrimary,
-        secondary: spec.schemeSecondary,
-        onSecondary: onColor,
-        tertiary: spec.schemeTertiary,
-        onTertiary: onColor,
+        primary: a.accent,
+        onPrimary: a.surAccent,
+        secondary: a.conteneur,
+        onSecondary: a.surConteneur,
+        tertiary: a.tertiaire,
+        onTertiary: dark ? a.surConteneur : T.blackColor,
         error: T.systemErrorColor,
-        onError: onColor,
+        onError: dark ? T.darkBackground : T.blackColor,
         surface,
-        onSurface: onColor
+        onSurface: textColor
       },
       appBarTheme: {
-        backgroundColor: dark ? '#23211D' : T.whiteColor,
+        backgroundColor: background,
         foregroundColor: textColor
       },
-      primaryIconColor: spec.iconColor,
+      primaryIconColor: a.accent,
       textTheme: {
         titleLarge: text(fontSize(32, '600')),
         titleMedium: text(fontSize(32, '400')),
@@ -176,7 +324,7 @@ export class Themer {
         displayMedium: text(fontSize(13, '500')),
         displaySmall: {
           ...text(fontSize(13, '400', 1.4)),
-          color: T.neural04Color
+          color: dark ? T.darkTextSecondary : T.neural04Light
         },
         labelLarge: text(fontSize(12, '400')),
         labelMedium: text(fontSize(11, '400'))
@@ -192,21 +340,21 @@ export class Themer {
       inputDecorationTheme: {
         paddingHorizontal: 16,
         paddingVertical: 5,
-        fillColor: dark ? '#333333' : '#FAF8F6',
+        fillColor: dark ? T.darkInput : '#FAF8F6',
         borderRadius: 10,
-        focusedBorderColor: spec.focusedBorderColor,
+        focusedBorderColor: a.accent,
         errorBorderColor: T.systemErrorColor,
         floatingLabelStyle: {
-          color: dark ? '#9E9E9E' : T.neural04Color,
+          color: dark ? T.darkTextSecondary : T.neural04Light,
           fontSize: 13,
           fontWeight: '400'
         },
         labelStyle: {
-          color: dark ? '#9E9E9E' : T.neural03Color,
+          color: dark ? T.darkTextSecondary : T.neural03Light,
           fontSize: 17
         },
         hintStyle: {
-          color: dark ? '#EEEEEE' : T.neural02Color,
+          color: dark ? T.darkTextDisabled : T.neural02Light,
           fontSize: 17
         },
         errorStyle: {
@@ -214,27 +362,27 @@ export class Themer {
           fontSize: 12
         },
         errorMaxLines: 3,
-        suffixIconColor: dark ? '#B1ADA0' : '#8B887E'
+        suffixIconColor: dark ? T.darkTextSecondary : '#8B887E'
       },
       elevatedButtonTheme: {
-        backgroundColor: spec.buttonBackground,
-        pressedBackgroundColor: spec.buttonPressed,
-        disabledBackgroundColor: dark ? '#2E2E2E' : '#F5F5F1',
-        foregroundColor: spec.buttonForeground,
-        disabledForegroundColor: dark ? '#B1ADA0' : T.neural03Color,
+        backgroundColor: a.accent,
+        pressedBackgroundColor: a.appui,
+        disabledBackgroundColor: dark ? T.darkCard : '#F5F5F1',
+        foregroundColor: a.surAccent,
+        disabledForegroundColor: dark ? T.darkTextDisabled : T.neural03Light,
         minHeight: T.btnNormalHeight,
         borderRadius: 20,
         textStyle: {
-          color: spec.buttonForeground,
+          color: a.surAccent,
           fontSize: 17,
           fontWeight: '600'
         }
       },
       textButtonTheme: {
-        foregroundColor: spec.textButtonColor,
-        overlayColor: spec.textButtonOverlay,
+        foregroundColor: a.texte,
+        overlayColor: dark ? `${a.accent}1F` : a.conteneur,
         textStyle: {
-          color: spec.textButtonColor,
+          color: a.texte,
           fontSize: 17,
           fontWeight: '400'
         },
@@ -242,17 +390,17 @@ export class Themer {
         minHeight: 26
       },
       switchTheme: {
-        thumbColor: dark ? '#23211D' : T.whiteColor,
-        activeTrackColor: spec.switchActiveTrack,
-        inactiveTrackColor: dark ? T.neural04Color : T.neural01Color
+        thumbColor: dark ? T.darkTextSecondary : T.whiteColor,
+        activeTrackColor: a.accent,
+        inactiveTrackColor: dark ? T.darkOutline : T.neural01Light
       },
       filledButtonTheme: {
-        foregroundColor: textColor,
-        disabledForegroundColor: dark ? '#B1ADA0' : T.neural03Color,
+        foregroundColor: a.surAccent,
+        disabledForegroundColor: dark ? T.darkTextDisabled : T.neural03Light,
         minHeight: T.btnNormalHeight,
         borderRadius: 20,
         textStyle: {
-          color: textColor,
+          color: a.surAccent,
           fontSize: 17,
           fontWeight: '600'
         }
@@ -263,8 +411,8 @@ export class Themer {
       },
       checkboxTheme: {
         borderRadius: 6,
-        checkColor: dark ? '#181612' : T.whiteColor,
-        borderColor: T.neural02Color,
+        checkColor: a.surAccent,
+        borderColor: dark ? T.darkTextDisabled : T.neural02Light,
         borderWidth: 2
       },
       chipTheme: {
@@ -278,165 +426,130 @@ export class Themer {
     };
   }
 
-  /** Thème par défaut : jaune PI-SPI sur fond blanc */
-  static defaultSpec = {
-    dark: false,
-    primaryColor: Themer.primary,
-    primaryColorDark: Themer.primaryDark,
-    secondaryHeaderColor: Themer.primaryLight,
-    schemePrimary: Themer.primary,
-    schemeOnPrimary: Themer.blackColor,
-    schemeSecondary: Themer.primaryLight,
-    schemeTertiary: Themer.primaryStroke,
-    iconColor: Themer.primary,
-    focusedBorderColor: Themer.primary,
-    buttonPressed: '#E1A009',
-    buttonBackground: Themer.primary,
-    buttonForeground: Themer.blackColor,
-    textButtonColor: Themer.primaryDark,
-    textButtonOverlay: Themer.primaryLight,
-    switchActiveTrack: Themer.primary
-  };
-
-  /** Code enregistré comme thème préféré quand l'hôte fournit un thème personnalisé (`PiSpiAppConfig.customTheme`). */
-  static customThemeCode = 'customTheme';
-
-  /** Thème personnalisé de l'hôte, construit à l'ouverture du SDK (voir `Di.init`) ; `null` sans thème personnalisé. */
-  static customTheme = null;
+  /** Thèmes déjà construits, par luminosité et couleur d'accentuation */
+  static themes = new Map();
 
-  /**
-   * Thème clair construit à partir de couleurs (thème personnalisé de
-   * l'hôte, voir `PiSpiCustomTheme`) : même modèle que les thèmes rouge,
-   * violet ou rose, avec le texte des boutons en blanc ou en noir selon la
-   * luminosité de [primary].
-   */
-  static colored(primary, secondary, tertiary, pressed) {
-    const onPrimary = relativeLuminance(primary) > 0.5 ? Themer.blackColor : Themer.whiteColor;
-    return Themer.build(Themer.coloredSpec(primary, secondary, tertiary, {
-      schemeOnPrimary: onPrimary,
-      buttonPressed: pressed,
-      buttonForeground: onPrimary
-    }));
+  /** Thème clair teinté par la couleur d'accentuation [accent] */
+  static clair(accent) {
+    const a = Accents.fromCode(accent);
+    const cle = `clair-${a}`;
+    if (!Themer.themes.has(cle)) Themer.themes.set(cle, Themer.build(false, Accents.clair(a)));
+    return Themer.themes.get(cle);
+  }
+
+  /** Thème sombre teinté par la couleur d'accentuation [accent] */
+  static sombre(accent) {
+    const a = Accents.fromCode(accent);
+    const cle = `sombre-${a}`;
+    if (!Themer.themes.has(cle)) Themer.themes.set(cle, Themer.build(true, Accents.sombre(a)));
+    return Themer.themes.get(cle);
   }
 
-  /** Variante claire monochrome (même structure pour jaune, bleu, vert, rouge, orange, violet). */
-  static coloredSpec(main, secondary, tertiary, options = {}) {
+  /** Code enregistré comme couleur d'accentuation quand l'hôte fournit un thème personnalisé (`PiSpiAppConfig.customTheme`). */
+  static customAccentCode = 'application';
+
+  /** Teintes de la couleur de l'hôte (claire puis sombre), définies à l'ouverture du SDK (voir `Di.init`) ; `null` sans thème personnalisé. */
+  static customAccent = null;
+
+  /** Thème complet fourni par l'hôte (`PiSpiCustomTheme.themeData`) : il remplace alors les thèmes clair et sombre du SDK. */
+  static customThemeData = null;
+
+  /** L'hôte a fourni un thème personnalisé */
+  static get hasCustomTheme() {
+    return Themer.customAccent != null || Themer.customThemeData != null;
+  }
+
+  /**
+   * Teintes claire et sombre dérivées des couleurs de l'hôte : texte posé
+   * sur la couleur en noir ou blanc selon son contraste, teinte plus
+   * lumineuse en sombre.
+   */
+  static teintesDepuis(primary, secondary, tertiary, pressed) {
+    const sur = (fond, fonce) => contrast(fonce, fond) >= contrast(Themer.whiteColor, fond) ? fonce : Themer.whiteColor;
+    // Lien lisible sur fond blanc (4,5:1), sinon couleur assombrie
+    let texte = primary;
+    for (let i = 1; i <= 6 && contrast(texte, Themer.whiteColor) < 4.5; i++) {
+      texte = lerpColor(primary, Themer.blackColor, i * 0.1);
+    }
+    const clair = {
+      accent: primary,
+      surAccent: sur(primary, Themer.blackColor),
+      appui: pressed ?? lerpColor(primary, Themer.blackColor, 0.2),
+      texte,
+      conteneur: secondary ?? lerpColor(primary, Themer.whiteColor, 0.75),
+      surConteneur: Themer.blackColor,
+      tertiaire: tertiary ?? lerpColor(primary, Themer.whiteColor, 0.4)
+    };
+    // En sombre : couleur éclaircie jusqu'à 3:1 sur le fond
+    let fonce = primary;
+    for (let i = 1; i <= 6 && contrast(fonce, Themer.darkBackground) < 3; i++) {
+      fonce = lerpColor(primary, Themer.whiteColor, i * 0.1);
+    }
+    const conteneur = lerpColor(Themer.darkBackground, primary, 0.3);
+    const sombre = {
+      accent: fonce,
+      surAccent: sur(fonce, Themer.darkBackground),
+      appui: lerpColor(fonce, Themer.blackColor, 0.1),
+      texte: fonce,
+      conteneur,
+      surConteneur: lerpColor(fonce, Themer.whiteColor, 0.6),
+      tertiaire: conteneur
+    };
     return {
-      ...Themer.defaultSpec,
-      primaryColor: main,
-      primaryColorDark: main,
-      secondaryHeaderColor: secondary,
-      schemePrimary: main,
-      schemeSecondary: secondary,
-      schemeTertiary: tertiary,
-      iconColor: main,
-      focusedBorderColor: main,
-      buttonPressed: main,
-      buttonBackground: main,
-      textButtonColor: main,
-      textButtonOverlay: main,
-      switchActiveTrack: main,
-      ...options
+      clair,
+      sombre
     };
   }
 
-  /** Light theme data */
-  static lightTheme = Themer.build(Themer.defaultSpec);
-
-  /** Dark theme */
-  static darkTheme = Themer.build({
-    ...Themer.defaultSpec,
-    dark: true,
-    secondaryHeaderColor: Themer.primaryStroke,
-    schemeOnPrimary: Themer.whiteColor,
-    schemeSecondary: Themer.primaryStroke,
-    buttonForeground: Themer.whiteColor
-  });
+  /** Thème construit sur les teintes [a] (clair, ou sombre si [dark]) */
+  static depuisTeintes(a, dark = false) {
+    return Themer.build(dark, a);
+  }
 
-  /** Light Yellow theme data */
-  static lightYellowTheme = Themer.build(Themer.coloredSpec('#F3DC88', '#FAF0C8', '#F6E5A8', {
-    textButtonOverlay: Themer.primaryLight
-  }));
-
-  /** Light Blue theme data */
-  static lightBlueTheme = Themer.build(Themer.coloredSpec('#3B63DB', '#A5B9F7', '#7390E6', {
-    schemeOnPrimary: Themer.whiteColor
-  }));
-
-  /** Light Green theme data */
-  static lightGreenTheme = Themer.build(Themer.coloredSpec('#9FF796', '#D9FDD6', '#BAFAB6', {
-    primaryColor: '#7FC077',
-    primaryColorDark: '#7FC077',
-    buttonPressed: '#E1A009',
-    textButtonColor: '#7FC077',
-    textButtonOverlay: '#7FC077'
-  }));
-
-  /** Light Red theme data */
-  static lightRedTheme = Themer.build(Themer.coloredSpec('#C62828', '#F9CFCF', '#E57373', {
-    schemeOnPrimary: Themer.whiteColor,
-    buttonPressed: '#B71C1C',
-    buttonForeground: Themer.whiteColor
-  }));
-
-  /** Light Orange theme data */
-  static lightOrangeTheme = Themer.build(Themer.coloredSpec('#EF6C00', '#FFE0B2', '#FFB74D', {
-    schemeOnPrimary: Themer.whiteColor,
-    buttonPressed: '#E65100',
-    buttonForeground: Themer.whiteColor
-  }));
-
-  /** Light Purple theme data */
-  static lightPurpleTheme = Themer.build(Themer.coloredSpec('#6A1B9A', '#E1BEE7', '#BA68C8', {
-    schemeOnPrimary: Themer.whiteColor,
-    buttonPressed: '#4A148C',
-    buttonForeground: Themer.whiteColor
-  }));
-
-  /** Light Pink theme data */
-  static lightPinkTheme = Themer.build(Themer.coloredSpec('#AD1457', '#F8BBD0', '#F06292', {
-    schemeOnPrimary: Themer.whiteColor,
-    buttonPressed: '#880E4F',
-    buttonForeground: Themer.whiteColor
-  }));
+  /** Libellé de la couleur d'accentuation [code], y compris celle de l'hôte */
+  static accentLabel(traductions, code) {
+    if (code === Themer.customAccentCode && Themer.hasCustomTheme) return traductions.appSettingPageMenuThemeCustom;
+    return Accents.label(Accents.fromCode(code), traductions);
+  }
+
+  /** Thème clair avec la couleur PI-SPI */
+  static get lightTheme() {
+    return Themer.clair();
+  }
+
+  /** Thème sombre avec la couleur PI-SPI */
+  static get darkTheme() {
+    return Themer.sombre();
+  }
 
   /**
-   * Méthode qui retourne un thème demandé. Pour `Themes.system`,
-   * [systemScheme] (ex. `useColorScheme()`) prime sur la valeur lue
-   * ponctuellement via `Appearance`.
+   * Thème à afficher : [code] (système, clair ou sombre) teinté par la
+   * couleur d'accentuation [accent]. Pour `Themes.system`, [systemScheme]
+   * (ex. `useColorScheme()`) prime sur la valeur lue ponctuellement via
+   * `Appearance`.
    */
-  static get(code, systemScheme) {
-    // Thème personnalisé de l'hôte
-    if (code === Themer.customThemeCode && Themer.customTheme != null) return Themer.customTheme;
-    switch (code) {
-      case Themes.light:
-        return Themer.lightTheme;
-      case Themes.dark:
-        return Themer.darkTheme;
-      case Themes.yellow:
-        return Themer.lightYellowTheme;
-      case Themes.green:
-        return Themer.lightGreenTheme;
-      case Themes.blue:
-        return Themer.lightBlueTheme;
-      case Themes.red:
-        return Themer.lightRedTheme;
-      case Themes.orange:
-        return Themer.lightOrangeTheme;
-      case Themes.purple:
-        return Themer.lightPurpleTheme;
-      case Themes.pink:
-        return Themer.lightPinkTheme;
-      // Système
-      case Themes.system:
-        {
-          const brightness = systemScheme === 'light' || systemScheme === 'dark' ? systemScheme : Appearance.getColorScheme();
-          return brightness === 'dark' ? Themer.darkTheme : Themer.lightTheme;
-        }
-      // Default theme
-      default:
-        return Themer.lightTheme;
+  static get(code, accent, systemScheme) {
+    const theme = Themes.fromCode(code);
+    let dark = theme === Themes.dark;
+    if (theme === Themes.system) {
+      const brightness = systemScheme === 'light' || systemScheme === 'dark' ? systemScheme : Appearance.getColorScheme();
+      dark = brightness === 'dark';
     }
+    // Thème complet ou couleur du thème personnalisé de l'hôte
+    if (accent === Themer.customAccentCode && Themer.customThemeData != null) return Themer.customThemeData;
+    const perso = Themer.customAccent;
+    if (accent === Themer.customAccentCode && perso != null) {
+      const cle = `${dark ? 'sombre' : 'clair'}-${Themer.customAccentCode}`;
+      if (!Themer.themes.has(cle)) Themer.themes.set(cle, Themer.build(dark, dark ? perso.sombre : perso.clair));
+      return Themer.themes.get(cle);
+    }
+    return dark ? Themer.sombre(accent) : Themer.clair(accent);
+  }
+
+  /** Oublie les thèmes construits avec la couleur de l'hôte (nouvelle ouverture du SDK) */
+  static resetCustomThemes() {
+    Themer.themes.delete(`clair-${Themer.customAccentCode}`);
+    Themer.themes.delete(`sombre-${Themer.customAccentCode}`);
   }
 }
 export const ThemeContext = /*#__PURE__*/createContext(Themer.lightTheme);
@@ -473,4 +586,11 @@ export function relativeLuminance(hex) {
   });
   return 0.2126 * r + 0.7152 * g + 0.0722 * b;
 }
+
+/** Ratio de contraste WCAG entre deux couleurs */
+export function contrast(a, b) {
+  const la = relativeLuminance(a);
+  const lb = relativeLuminance(b);
+  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+}
 //# sourceMappingURL=theme.js.map