@ktortu/aaa 0.9.4 → 0.9.6

package/themes/theme-fluent.css

@@ -2,44 +2,57 @@
    Signature Fluent : Segoe UI, radius 4px, gris doux, bleu brand #0f6cbd, élévations subtiles. */
 [data-theme='fluent'] {
   /* ============ Socle ============ */
-  --kt-primary: #0f6cbd; /* brand-80 — blanc 5.4:1 */
-  --kt-danger: #c50f1f; /* status-danger — blanc 6.1:1 */
-  --kt-neutral: #424242;
-  --kt-surface: #fafafa; /* neutral-background-2 */
-  --kt-on-surface: #242424;
-  --kt-muted: #616161; /* neutral-foreground-3 */
-  --kt-outline: #d1d1d1; /* neutral-stroke-1 */
-  --kt-outline-strong: #757575;
+  --kt-primary: light-dark(#00467d, #57b0fa); /* brand-80 — blanc 5.4:1 */
+  --kt-danger: light-dark(#8c2225, #ff4c5a); /* status-danger — blanc 6.1:1 */
+  --kt-neutral: light-dark(#424242, #d1d1d1);
+  --kt-surface: light-dark(#ffffff, #202020); /* neutral-background-2 */
+  --kt-on-surface: light-dark(#242424, #ffffff);
+  --kt-muted: light-dark(#616161, #a6a6a6); /* neutral-foreground-3 */
+  --kt-outline: light-dark(#d1d1d1, #404040); /* neutral-stroke-1 */
+  --kt-outline-strong: light-dark(#757575, #8a8a8a);
   --kt-font: 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
 
+  /* Matériaux (Acrylic/Mica) */
+  --kt-backdrop-filter: blur(20px);
+
   /* ============ Géométrie ============ */
   --kt-control-radius: 4px; /* border-radius-medium */
   --btn-radius: 4px;
   --chip-radius: 4px;
 
   /* ============ Champs ============ */
-  --field-bg: #ffffff;
+  --field-bg: light-dark(#ffffff, #292929);
 
   /* ============ Boutons : élévation subtile Fluent ============ */
-  --btn-shadow: 0 1px 2px rgb(0 0 0 / 10%);
+  --btn-shadow: light-dark(0 1px 2px rgb(0 0 0 / 10%), 0 0 0 1px rgba(255, 255, 255, 0.1));
   --btn-font-weight: 600; /* les boutons Fluent sont en semibold (rétrofit lot 6) */
-  --btn-on-primary-container: #0c4f87;
-  --btn-on-danger-container: #7a0c14;
-  --btn-on-neutral-container: #1f1f1f;
+  --btn-on-primary-container: light-dark(#0c4f87, #93c5fd);
+  --btn-on-danger-container: light-dark(#7a0c14, #fca5a5);
+  --btn-on-neutral-container: light-dark(#1f1f1f, #ffffff);
 
   /* ============ Select / tooltip ============ */
-  --select-popup-shadow: 0 8px 16px rgb(0 0 0 / 14%); /* shadow-16 */
-  --tooltip-bg: #242424;
-  --tooltip-fg: #ffffff;
+  --select-popup-bg: light-dark(rgba(255, 255, 255, 0.85), rgba(32, 32, 32, 0.85));
+  --select-popup-shadow: light-dark(0 8px 16px rgb(0 0 0 / 14%), 0 0 0 1px rgba(255, 255, 255, 0.1)); /* shadow-16 */
+  --tooltip-bg: light-dark(rgba(36, 36, 36, 0.85), rgba(255, 255, 255, 0.85));
+  --tooltip-fg: light-dark(#ffffff, #242424);
 
   /* ============ Dialog (Fluent 2 : rayon 8, élévation 16 héritée) ============ */
+  --dialog-bg: light-dark(rgba(255, 255, 255, 0.85), rgba(32, 32, 32, 0.85));
   --dialog-radius: 8px;
   --dialog-border-width: 0;
 
   /* ============ Card (Fluent 2 : rayon 8, élévation 4 → 8 au survol) ============ */
   --card-radius: 8px;
-  --card-filled-bg: #f5f5f5; /* neutral-background-3 */
-  --card-shadow: 0 1px 2px rgb(0 0 0 / 12%), 0 0 2px rgb(0 0 0 / 8%); /* shadow-4 */
-  --card-shadow-hover: 0 4px 8px rgb(0 0 0 / 14%), 0 0 2px rgb(0 0 0 / 10%); /* shadow-8 */
+  --card-filled-bg: light-dark(#f5f5f5, #292929); /* neutral-background-3 */
+  --card-shadow: light-dark(
+    0 1px 2px rgb(0 0 0 / 12%),
+    0 0 2px rgb(0 0 0 / 8%),
+    0 0 0 1px rgba(255, 255, 255, 0.1)
+  ); /* shadow-4 */
+  --card-shadow-hover: light-dark(
+    0 4px 8px rgb(0 0 0 / 14%),
+    0 0 2px rgb(0 0 0 / 10%),
+    0 0 0 1px rgba(255, 255, 255, 0.2)
+  ); /* shadow-8 */
   --card-transition: box-shadow 150ms ease;
 }

package/themes/theme-material-you.css

@@ -18,15 +18,33 @@
   --myou-seed: #0b6e63; /* teal — essayez #7c4dff, #b3261e, #386a20… */
 
   /* ============ Socle (tons M3 figés, teinte du seed) ============ */
-  --kt-surface: oklch(from var(--myou-seed) 0.985 0.008 h); /* tone ~98, teinté */
-  --kt-on-surface: oklch(from var(--myou-seed) 0.22 0.02 h); /* tone ~10 */
-  --kt-muted: oklch(from var(--myou-seed) 0.42 0.03 h); /* neutral-variant ~30 */
-  --kt-outline: oklch(from var(--myou-seed) 0.55 0.03 h); /* tone ~50 (3:1 non-texte) */
-  --kt-outline-strong: oklch(from var(--myou-seed) 0.45 0.04 h);
-  --kt-primary: oklch(from var(--myou-seed) 0.46 0.09 h); /* tone ~40 : blanc ≥ 6:1 */
-  --kt-danger: #b3261e; /* erreur M3 statique (non dérivée — fidèle à You) */
-  --kt-neutral: oklch(from var(--myou-seed) 0.4 0.02 h); /* neutre teinté, blanc ≥ 7:1 */
-  --kt-focus-ring-color: oklch(from var(--myou-seed) 0.46 0.09 h);
+  --kt-surface: light-dark(
+    oklch(from var(--myou-seed) 0.985 0.008 h),
+    oklch(from var(--myou-seed) 0.1 0.008 h)
+  ); /* tone ~98, teinté */
+  --kt-on-surface: light-dark(
+    oklch(from var(--myou-seed) 0.22 0.02 h),
+    oklch(from var(--myou-seed) 0.9 0.02 h)
+  ); /* tone ~10 */
+  --kt-muted: light-dark(
+    oklch(from var(--myou-seed) 0.42 0.03 h),
+    oklch(from var(--myou-seed) 0.7 0.03 h)
+  ); /* neutral-variant ~30 */
+  --kt-outline: light-dark(
+    oklch(from var(--myou-seed) 0.55 0.03 h),
+    oklch(from var(--myou-seed) 0.45 0.03 h)
+  ); /* tone ~50 (3:1 non-texte) */
+  --kt-outline-strong: light-dark(oklch(from var(--myou-seed) 0.45 0.04 h), oklch(from var(--myou-seed) 0.65 0.04 h));
+  --kt-primary: light-dark(
+    oklch(from var(--myou-seed) 0.46 0.09 h),
+    oklch(from var(--myou-seed) 0.8 0.09 h)
+  ); /* tone ~40 : blanc ≥ 6:1 */
+  --kt-danger: light-dark(#b3261e, #f2b8b5); /* erreur M3 statique (non dérivée — fidèle à You) */
+  --kt-neutral: light-dark(
+    oklch(from var(--myou-seed) 0.4 0.02 h),
+    oklch(from var(--myou-seed) 0.8 0.02 h)
+  ); /* neutre teinté, blanc ≥ 7:1 */
+  --kt-focus-ring-color: light-dark(oklch(from var(--myou-seed) 0.46 0.09 h), oklch(from var(--myou-seed) 0.8 0.09 h));
   --kt-font: 'Roboto', system-ui, sans-serif;
 
   /* ============ Géométrie : rondeurs expressives ============ */
@@ -35,40 +53,73 @@
   --kt-sheet-radius: 28px;
 
   /* ============ Champs : surface-container teintée (la signature You) ============ */
-  --field-bg: oklch(from var(--myou-seed) 0.94 0.02 h); /* tone ~94 */
-  --field-focus-ring: color-mix(in srgb, oklch(from var(--myou-seed) 0.46 0.09 h) 55%, transparent);
+  --field-bg: light-dark(
+    oklch(from var(--myou-seed) 0.94 0.02 h),
+    oklch(from var(--myou-seed) 0.15 0.02 h)
+  ); /* tone ~94 */
+  --field-focus-ring: light-dark(
+    color-mix(in srgb, oklch(from var(--myou-seed) 0.46 0.09 h) 55%, transparent),
+    color-mix(in srgb, oklch(from var(--myou-seed) 0.8 0.09 h) 55%, transparent)
+  );
   --field-transition: border-color 150ms ease;
 
   /* ============ Boutons : containers/fg dérivés par la lib depuis les 3 bases ============ */
   --btn-tonal-weight: 18%; /* containers un peu plus présents que le défaut */
   /* on-containers teintés par le seed (tone ~25 sur container ~90 : ≥ 8:1 par construction) —
      les défauts statiques de la lib resteraient AA mais d'une teinte étrangère au seed. */
-  --btn-on-primary-container: oklch(from var(--myou-seed) 0.25 0.06 h);
-  --btn-on-neutral-container: oklch(from var(--myou-seed) 0.25 0.02 h);
+  --btn-on-primary-container: light-dark(
+    oklch(from var(--myou-seed) 0.25 0.06 h),
+    oklch(from var(--myou-seed) 0.9 0.06 h)
+  );
+  --btn-on-neutral-container: light-dark(
+    oklch(from var(--myou-seed) 0.25 0.02 h),
+    oklch(from var(--myou-seed) 0.9 0.02 h)
+  );
 
   /* ============ Caret + sélection ============ */
-  --field-caret-color: oklch(from var(--myou-seed) 0.46 0.09 h);
-  --kt-selection-bg: oklch(from var(--myou-seed) 0.88 0.05 h); /* container ~tone 90 */
-  --kt-selection-fg: oklch(from var(--myou-seed) 0.25 0.05 h);
+  --field-caret-color: light-dark(oklch(from var(--myou-seed) 0.46 0.09 h), oklch(from var(--myou-seed) 0.8 0.09 h));
+  --kt-selection-bg: light-dark(
+    oklch(from var(--myou-seed) 0.88 0.05 h),
+    oklch(from var(--myou-seed) 0.3 0.05 h)
+  ); /* container ~tone 90 */
+  --kt-selection-fg: light-dark(oklch(from var(--myou-seed) 0.25 0.05 h), oklch(from var(--myou-seed) 0.9 0.05 h));
 
   /* ============ Select / tooltip ============ */
-  --select-popup-bg: oklch(from var(--myou-seed) 0.97 0.01 h);
-  --select-popup-shadow: 0 4px 16px oklch(from var(--myou-seed) 0.3 0.04 h / 25%);
-  --kt-sheet-scrim: oklch(from var(--myou-seed) 0.2 0.03 h / 50%);
-  --kt-sheet-shadow: 0 -4px 16px oklch(from var(--myou-seed) 0.3 0.04 h / 22%); /* élévation M3 teintée */
-  --tooltip-bg: oklch(from var(--myou-seed) 0.27 0.03 h);
-  --tooltip-fg: oklch(from var(--myou-seed) 0.96 0.01 h);
+  --select-popup-bg: light-dark(oklch(from var(--myou-seed) 0.97 0.01 h), oklch(from var(--myou-seed) 0.12 0.01 h));
+  --select-popup-shadow: light-dark(
+    0 4px 16px oklch(from var(--myou-seed) 0.3 0.04 h / 25%),
+    0 0 0 1px rgba(255, 255, 255, 0.1)
+  );
+  --kt-sheet-scrim: light-dark(
+    oklch(from var(--myou-seed) 0.2 0.03 h / 50%),
+    oklch(from var(--myou-seed) 0.1 0.03 h / 60%)
+  );
+  --kt-sheet-shadow: light-dark(
+    0 -4px 16px oklch(from var(--myou-seed) 0.3 0.04 h / 22%),
+    0 -1px 0 rgba(255, 255, 255, 0.1)
+  ); /* élévation M3 teintée */
+  --tooltip-bg: light-dark(oklch(from var(--myou-seed) 0.27 0.03 h), oklch(from var(--myou-seed) 0.9 0.03 h));
+  --tooltip-fg: light-dark(oklch(from var(--myou-seed) 0.96 0.01 h), oklch(from var(--myou-seed) 0.1 0.01 h));
 
   /* ============ Dialog (M3 expressive : rayon hérité de la feuille, sans bord) ============ */
-  --dialog-bg: oklch(from var(--myou-seed) 0.97 0.01 h); /* surface-container teinté */
+  --dialog-bg: light-dark(
+    oklch(from var(--myou-seed) 0.97 0.01 h),
+    oklch(from var(--myou-seed) 0.15 0.01 h)
+  ); /* surface-container teinté */
   --dialog-radius: 28px;
   --dialog-border-width: 0;
 
   /* ============ Card (M3 expressive : surfaces teintées du seed, rayon 16) ============ */
   --card-radius: 16px;
-  --card-bg: oklch(from var(--myou-seed) 0.97 0.01 h);
-  --card-filled-bg: oklch(from var(--myou-seed) 0.94 0.02 h);
-  --card-shadow: 0 1px 3px oklch(from var(--myou-seed) 0.3 0.04 h / 20%);
-  --card-shadow-hover: 0 2px 8px oklch(from var(--myou-seed) 0.3 0.04 h / 26%);
+  --card-bg: light-dark(oklch(from var(--myou-seed) 0.97 0.01 h), oklch(from var(--myou-seed) 0.12 0.01 h));
+  --card-filled-bg: light-dark(oklch(from var(--myou-seed) 0.94 0.02 h), oklch(from var(--myou-seed) 0.18 0.02 h));
+  --card-shadow: light-dark(
+    0 1px 3px oklch(from var(--myou-seed) 0.3 0.04 h / 20%),
+    0 0 0 1px rgba(255, 255, 255, 0.1)
+  );
+  --card-shadow-hover: light-dark(
+    0 2px 8px oklch(from var(--myou-seed) 0.3 0.04 h / 26%),
+    0 0 0 1px rgba(255, 255, 255, 0.2)
+  );
   --card-transition: box-shadow 150ms ease;
 }

package/themes/theme-material.css

@@ -3,14 +3,19 @@
    (bascule --btn-radius prévue par le contrat), surfaces teintées M3. */
 [data-theme='material'] {
   /* ============ Socle (rôles M3 baseline) ============ */
-  --kt-primary: #6750a4; /* primary — on-primary blanc ~5.6:1 */
-  --kt-neutral: #625b71; /* secondary — blanc ~6.9:1 */
-  --kt-danger: #b3261e; /* error (= défaut lib, explicite) */
-  --kt-surface: #fef7ff;
-  --kt-on-surface: #1d1b20;
-  --kt-muted: #49454f; /* on-surface-variant, ~9:1 */
-  --kt-outline: #79747e;
-  --kt-outline-strong: #49454f;
+  --kt-primary: light-dark(#463673, #d7c4fc); /* primary — on-primary blanc ~5.6:1 */
+  --kt-neutral: light-dark(#625b71, #ccc2dc); /* secondary — blanc ~6.9:1 */
+  --kt-danger: light-dark(#8c1d17, #f7c8c6); /* error (= défaut lib, explicite) */
+  --kt-surface: light-dark(#fef7ff, #141218);
+  --kt-surface-container-lowest: light-dark(#ffffff, #0f0d13);
+  --kt-surface-container-low: light-dark(#f7f2fa, #1d1b20);
+  --kt-surface-container: light-dark(#f3edf7, #211f26);
+  --kt-surface-container-high: light-dark(#ece6f0, #2b2930);
+  --kt-surface-container-highest: light-dark(#e6e0e9, #36343b);
+  --kt-on-surface: light-dark(#1d1b20, #e6e0e9);
+  --kt-muted: light-dark(#49454f, #cac4d0); /* on-surface-variant, ~9:1 */
+  --kt-outline: light-dark(#79747e, #938f99);
+  --kt-outline-strong: light-dark(#49454f, #cac4d0);
   --kt-font: 'Roboto', system-ui, sans-serif;
 
   /* ============ Géométrie ============ */
@@ -21,28 +26,32 @@
   /* ============ Boutons ============ */
   --btn-font-weight: 500; /* label-large M3 (rétrofit lot 6) */
   /* on-containers M3 sur les containers dérivés (≈ primary/secondary-container). */
-  --btn-on-primary-container: #21005d;
-  --btn-on-neutral-container: #1d192b;
+  --btn-on-primary-container: light-dark(#21005d, #eaddff);
+  --btn-on-neutral-container: light-dark(#1d192b, #e8def8);
 
   /* ============ Champs ============ */
   --field-transition: border-color 150ms ease; /* state transitions M3 (rétrofit lot 3) */
 
   /* ============ Select / tooltip ============ */
-  --select-popup-bg: #f3edf7; /* surface-container */
-  --tooltip-bg: #322f35; /* inverse-surface */
-  --tooltip-fg: #f5eff7; /* inverse-on-surface */
+  --select-popup-bg: light-dark(#f3edf7, #211f26); /* surface-container */
+  --tooltip-bg: light-dark(#322f35, #e6e0e9); /* inverse-surface */
+  --tooltip-fg: light-dark(#f5eff7, #322f35); /* inverse-on-surface */
 
   /* ============ Dialog (M3 : grand rayon, élévation, sans bord) ============ */
-  --dialog-bg: #f3edf7; /* surface-container-high */
+  --dialog-bg: light-dark(#f3edf7, #2b2930); /* surface-container-high */
   --dialog-radius: 28px;
   --dialog-border-width: 0;
-  --dialog-shadow: 0 8px 24px rgb(29 27 32 / 22%);
+  --dialog-shadow: light-dark(0 8px 24px rgb(29 27 32 / 22%), 0 0 0 1px rgba(255, 255, 255, 0.1));
 
   /* ============ Card (M3 : surface-container, rayon 12, élévation douce) ============ */
   --card-radius: 12px;
-  --card-bg: #f3edf7; /* surface-container */
-  --card-filled-bg: #ece6f0; /* surface-container-high */
-  --card-shadow: 0 1px 3px rgb(29 27 32 / 16%), 0 1px 2px rgb(29 27 32 / 12%);
-  --card-shadow-hover: 0 2px 6px rgb(29 27 32 / 22%);
+  --card-bg: light-dark(#f3edf7, #211f26); /* surface-container */
+  --card-filled-bg: light-dark(#ece6f0, #2b2930); /* surface-container-high */
+  --card-shadow: light-dark(
+    0 1px 3px rgb(29 27 32 / 16%),
+    0 1px 2px rgb(29 27 32 / 12%),
+    0 0 0 1px rgba(255, 255, 255, 0.1)
+  );
+  --card-shadow-hover: light-dark(0 2px 6px rgb(29 27 32 / 22%), 0 0 0 1px rgba(255, 255, 255, 0.2));
   --card-transition: box-shadow 150ms ease;
 }

package/themes/theme-primer.css

@@ -5,15 +5,15 @@
    les 32px de Primer — exigence d'accessibilité du projet. */
 [data-theme='primer'] {
   /* ============ Socle ============ */
-  --kt-primary: #0969da; /* accent.fg — blanc ~5.2:1 */
-  --kt-danger: #cf222e; /* danger.fg */
-  --kt-neutral: #57606a; /* fg.muted historique — blanc ~6.3:1 */
-  --kt-surface: #ffffff;
-  --kt-on-surface: #1f2328; /* fg.default */
-  --kt-muted: #59636e; /* fg.muted, ~5.7:1 */
-  --kt-outline: #d0d7de; /* border.default */
-  --kt-outline-strong: #818b98;
-  --kt-focus-ring-color: #0969da;
+  --kt-primary: light-dark(#185929, #3fb558); /* accent.fg — blanc ~5.2:1 */
+  --kt-danger: light-dark(#8f141d, #ff5754); /* danger.fg */
+  --kt-neutral: light-dark(#57606a, #8b949e); /* fg.muted historique — blanc ~6.3:1 */
+  --kt-surface: light-dark(#ffffff, #0d1117);
+  --kt-on-surface: light-dark(#1f2328, #e6edf3); /* fg.default */
+  --kt-muted: light-dark(#59636e, #7d8590); /* fg.muted, ~5.7:1 */
+  --kt-outline: light-dark(#d0d7de, #30363d); /* border.default */
+  --kt-outline-strong: light-dark(#818b98, #8b949e);
+  --kt-focus-ring-color: light-dark(#0969da, #58a6ff);
   /* Stack système GitHub authentique (le produit n'embarque pas de webfont). */
   --kt-font: -apple-system, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
 
@@ -26,21 +26,27 @@
   --btn-font-weight: 500; /* les boutons GitHub sont en medium (rétrofit lot 6) */
 
   /* ============ Ombres ============ */
-  --field-shadow: inset 0 1px 0 rgb(31 35 40 / 4%); /* inner shadow subtile des inputs Primer */
-  --btn-shadow: 0 1px 0 rgb(31 35 40 / 4%); /* hérite vers hover/focus via le fallback chaîné */
-  --select-popup-shadow: 0 8px 24px rgb(140 149 159 / 20%); /* shadow.medium */
+  --field-shadow: light-dark(
+    inset 0 1px 0 rgb(31 35 40 / 4%),
+    inset 0 1px 0 rgb(255 255 255 / 4%)
+  ); /* inner shadow subtile des inputs Primer */
+  --btn-shadow: light-dark(
+    0 1px 0 rgb(31 35 40 / 4%),
+    0 1px 0 rgb(255 255 255 / 4%)
+  ); /* hérite vers hover/focus via le fallback chaîné */
+  --select-popup-shadow: light-dark(0 8px 24px rgb(140 149 159 / 20%), 0 0 0 1px #30363d); /* shadow.medium */
 
   /* ============ Tooltip ============ */
-  --tooltip-bg: #25292e;
-  --tooltip-fg: #ffffff;
+  --tooltip-bg: light-dark(#25292e, #e6edf3);
+  --tooltip-fg: light-dark(#ffffff, #0d1117);
 
   /* ============ Dialog (GitHub : rayon 12, bord net) ============ */
   --dialog-radius: 12px;
-  --dialog-border-color: #d0d7de;
+  --dialog-border-color: light-dark(#d0d7de, #30363d);
 
   /* ============ Card (GitHub Box : rayon 6, filet + ombre discrète) ============ */
   --card-radius: 6px;
-  --card-border-color: #d0d7de;
-  --card-filled-bg: #f6f8fa; /* canvas.subtle */
-  --card-shadow: 0 1px 0 rgb(31 35 40 / 4%), 0 1px 3px rgb(31 35 40 / 6%);
+  --card-border-color: light-dark(#d0d7de, #30363d);
+  --card-filled-bg: light-dark(#f6f8fa, #161b22); /* canvas.subtle */
+  --card-shadow: light-dark(0 1px 0 rgb(31 35 40 / 4%), 0 1px 3px rgb(31 35 40 / 6%), 0 0 0 1px #30363d);
 }

package/themes/theme-vegetal.css

@@ -5,15 +5,15 @@
    ombres douces vert-de-gris. Uniquement des redéclarations de tokens. */
 [data-theme='vegetal'] {
   /* ============ Socle ============ */
-  --kt-primary: #36743f; /* vert feuille — blanc 5.6:1, texte sur crème 5.1:1 */
-  --kt-danger: #b04a2e; /* terracotta — blanc 5.4:1 */
-  --kt-neutral: #6b5d4a; /* brun écorce — blanc 6.4:1 */
-  --kt-surface: #f5f3e8; /* crème lin */
-  --kt-on-surface: #2a3326; /* vert mousse très foncé, ~12:1 */
-  --kt-muted: #5b6a51; /* vert-de-gris, 5.2:1 */
-  --kt-outline: #7d8a69; /* tige sèche (3.2:1 non-texte) */
-  --kt-outline-strong: #5b6a51;
-  --kt-focus-ring-color: #36743f;
+  --kt-primary: light-dark(#36743f, #84c48f); /* vert feuille — blanc 5.6:1, texte sur crème 5.1:1 */
+  --kt-danger: light-dark(#b04a2e, #e8866d); /* terracotta — blanc 5.4:1 */
+  --kt-neutral: light-dark(#6b5d4a, #b0a390); /* brun écorce — blanc 6.4:1 */
+  --kt-surface: light-dark(#f5f3e8, #182116); /* crème lin */
+  --kt-on-surface: light-dark(#2a3326, #e7e3d2); /* vert mousse très foncé, ~12:1 */
+  --kt-muted: light-dark(#5b6a51, #9aa88f); /* vert-de-gris, 5.2:1 */
+  --kt-outline: light-dark(#7d8a69, #3f4d38); /* tige sèche (3.2:1 non-texte) */
+  --kt-outline-strong: light-dark(#5b6a51, #7d8a69);
+  --kt-focus-ring-color: light-dark(#36743f, #84c48f);
   --kt-font: 'Quicksand', ui-rounded, 'Trebuchet MS', sans-serif; /* arrondie, organique */
 
   /* Gouttière organique : thumb tige sèche (outline) sur une rainure crème un ton sous le lin. */
@@ -27,21 +27,21 @@
   --kt-sheet-radius: 20px;
 
   /* ============ Champs ============ */
-  --field-bg: #fdfcf5; /* papier clair, en relief sur le lin */
+  --field-bg: light-dark(#fdfcf5, #222b1e); /* papier clair, en relief sur le lin */
   /* Forme FEUILLE : radius par coin (haut-gauche/bas-droite ronds, les deux autres pincés).
      Possible depuis toujours — les tokens radius acceptent 4 valeurs (audit lot 6). */
   --field-radius: 16px 4px 16px 4px;
   --field-shadow-focus: 0 2px 10px rgb(54 116 63 / 22%); /* halo de sève discret */
   --field-transition: border-color 150ms ease, box-shadow 150ms ease; /* sève qui monte en douceur */
-  --field-caret-color: #36743f;
-  --kt-selection-bg: #36743f;
-  --kt-selection-fg: #ffffff;
+  --field-caret-color: light-dark(#36743f, #84c48f);
+  --kt-selection-bg: light-dark(#36743f, #36743f);
+  --kt-selection-fg: light-dark(#ffffff, #ffffff);
 
   /* ============ Boutons ============ */
   --btn-tonal-weight: 18%; /* containers « jeune pousse » un peu présents */
-  --btn-on-primary-container: #1f4a28;
-  --btn-on-danger-container: #6e2a18;
-  --btn-on-neutral-container: #3a3328;
+  --btn-on-primary-container: light-dark(#1f4a28, #b6eac1);
+  --btn-on-danger-container: light-dark(#6e2a18, #fcd0c5);
+  --btn-on-neutral-container: light-dark(#3a3328, #e0d5c3);
   --btn-shadow: 0 1px 3px rgb(42 51 38 / 14%); /* légère assise, comme posé sur la terre */
   --btn-shadow-hover: 0 4px 14px rgb(54 116 63 / 22%); /* halo de sève au survol */
   --btn-transition: transform 150ms ease, box-shadow 150ms ease;
@@ -49,12 +49,12 @@
   --btn-transform-active: scale(0.98);
 
   /* ============ Select / tooltip ============ */
-  --select-popup-bg: #fdfcf5;
+  --select-popup-bg: light-dark(#fdfcf5, #222b1e);
   --select-popup-shadow: 0 8px 24px rgb(42 51 38 / 18%);
   --kt-sheet-scrim: rgb(42 51 38 / 40%);
   --kt-sheet-shadow: 0 -8px 24px rgb(42 51 38 / 18%); /* assise douce vert-de-gris */
-  --tooltip-bg: #33402c; /* sous-bois */
-  --tooltip-fg: #eef2e4;
+  --tooltip-bg: light-dark(#33402c, #e7e3d2); /* sous-bois */
+  --tooltip-fg: light-dark(#eef2e4, #182116);
 
   /* ============ Dialog (organique : feuille à l'échelle du dialog, ombre douce héritée) ============ */
   --dialog-radius: 24px 6px 24px 6px;
@@ -62,8 +62,8 @@
 
   /* ============ Card : FEUILLE organique (coins asymétriques, assise teintée sève, se déploie) ============ */
   --card-radius: 20px 6px 20px 6px;
-  --card-bg: #fdfcf5;
-  --card-filled-bg: #eef0e2;
+  --card-bg: light-dark(#fdfcf5, #222b1e);
+  --card-filled-bg: light-dark(#eef0e2, #2c3826);
   --card-shadow: 0 4px 16px rgb(54 116 63 / 14%), 0 1px 3px rgb(42 51 38 / 10%); /* assise + sève */
   --card-shadow-hover: 0 10px 26px rgb(54 116 63 / 20%), 0 2px 6px rgb(42 51 38 / 12%);
   --card-transition: transform 150ms ease, box-shadow 150ms ease;

package/tooltip/tooltip.css

@@ -23,6 +23,7 @@
     border-radius: var(--tooltip-radius);
     background: var(--tooltip-bg);
     color: var(--tooltip-fg);
+    backdrop-filter: var(--kt-backdrop-filter, none);
     font-size: 0.85rem;
     line-height: 1.35;
     white-space: pre-line; /* Interprète les \n et les sauts de ligne dans les chaînes de texte */

package/types/ktortu-aaa-dialog.d.ts

@@ -370,6 +370,17 @@ declare class KtDialogContainer extends CdkDialogContainer {
     static ɵcmp: i0.ɵɵComponentDeclaration<KtDialogContainer, "kt-dialog-container", never, {}, {}, never, never, true, never>;
 }
 
+/** Option de variante visuelle pour le dialogue d'alerte. */
+type KtAlertDialogVariant = 'neutral' | 'info' | 'success' | 'warning' | 'error';
+/**
+ * Options pour l'ouverture d'une boîte de dialogue d'alerte.
+ */
+interface KtAlertOptions {
+    /** Libellé du bouton de fermeture. Par défaut: 'Fermer'. */
+    closeLabel?: string;
+    /** Variante sémantique (apparence : icône + accent). Par défaut: 'neutral'. */
+    variant?: KtAlertDialogVariant;
+}
 /**
  * Configuration pour l'ouverture d'une boîte de dialogue d'alerte simple.
  */
@@ -384,6 +395,8 @@ interface KtAlertData {
     message: string | string[];
     /** Libellé du bouton de fermeture. Par défaut: 'Fermer'. */
     closeLabel?: string;
+    /** Variante sémantique (apparence : icône + accent). Par défaut: 'neutral'. */
+    variant?: KtAlertDialogVariant;
 }
 /**
  * Composant interne d'alerte générique.
@@ -474,6 +487,15 @@ declare class KtQuickDialog {
      * @returns La référence DialogRef de la modale ouverte.
      */
     alert(title: string, message: string | string[], closeLabel?: string): DialogRef<void, KtAlertDialog>;
+    /**
+     * Ouvre une boîte de dialogue d'alerte simple.
+     *
+     * @param title Titre de l'alerte.
+     * @param message Message d'explication (string simple ou tableau de strings pour du multi-lignes HTML).
+     * @param options Options d'ouverture de l'alerte (libellé de fermeture, variante).
+     * @returns La référence DialogRef de la modale ouverte.
+     */
+    alert(title: string, message: string | string[], options?: KtAlertOptions): DialogRef<void, KtAlertDialog>;
     /**
      * Ouvre une boîte de dialogue de confirmation binaire (Oui/Non).
      *
@@ -500,4 +522,4 @@ declare class KtQuickDialog {
 declare const KtDialogImports: readonly [typeof KtDialogHeader, typeof KtDialogTitle, typeof KtDialogDescription, typeof KtDialogContent, typeof KtDialogActions, typeof KtDialogClose, typeof KtDialogFocusInitial, typeof KtDialogSheetHandle];
 
 export { KT_DIALOG_AAA_DEFAULTS, KtAlertDialog, KtConfirmDialog, KtDialogActions, KtDialogClose, KtDialogContainer, KtDialogContent, KtDialogDescription, KtDialogFocusInitial, KtDialogHeader, KtDialogImports, KtDialogSheetHandle, KtDialogTitle, KtQuickDialog, defineKtDialog, injectAlertDialog, injectConfirmDialog, injectKtDialogOpener, provideKtDialogDefaults, resolveKtDialogPanelClass };
-export type { KtAlertData, KtConfirmConfig, KtConfirmResult, KtDecideConfig, KtDialogColor, KtDialogContract, KtDialogOpenerConfig, KtDialogPresentation };
+export type { KtAlertData, KtAlertDialogVariant, KtAlertOptions, KtConfirmConfig, KtConfirmResult, KtDecideConfig, KtDialogColor, KtDialogContract, KtDialogOpenerConfig, KtDialogPresentation };