@ktortu/aaa 0.9.4 → 0.9.6

package/themes/theme-ant.css

@@ -4,14 +4,14 @@
    → on prend les crans -7 de leurs palettes (blue-7 #0958d9, red-7 #cf1322), AA des deux côtés. */
 [data-theme='ant'] {
   /* ============ Socle ============ */
-  --kt-primary: #0958d9; /* blue-7 — blanc 6.2:1 */
-  --kt-danger: #cf1322; /* red-7 — blanc 5.6:1 */
-  --kt-neutral: #434343;
-  --kt-surface: #ffffff;
-  --kt-on-surface: #1f1f1f; /* ≈ rgba(0,0,0,.88) Ant */
-  --kt-muted: #595959; /* ≈ rgba(0,0,0,.65) */
-  --kt-outline: #d9d9d9;
-  --kt-outline-strong: #8c8c8c;
+  --kt-primary: light-dark(#0d4aa6, #368ef0); /* blue-7 — blanc 6.2:1 */
+  --kt-danger: light-dark(#b32d2f, #f56c70); /* red-7 — blanc 5.6:1 */
+  --kt-neutral: light-dark(#434343, #d9d9d9);
+  --kt-surface: light-dark(#ffffff, #000000);
+  --kt-on-surface: light-dark(#1f1f1f, rgba(255, 255, 255, 0.85)); /* ≈ rgba(0,0,0,.88) Ant */
+  --kt-muted: light-dark(#595959, rgba(255, 255, 255, 0.65)); /* ≈ rgba(0,0,0,.65) */
+  --kt-outline: light-dark(#d9d9d9, #424242);
+  --kt-outline-strong: light-dark(#8c8c8c, #636363);
   --kt-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
 
   /* ============ Géométrie ============ */
@@ -24,14 +24,14 @@
 
   /* ============ Boutons ============ */
   --btn-tonal-weight: 12%; /* containers discrets façon Ant (color-bg variants) */
-  --btn-on-primary-container: #003eb3;
-  --btn-on-danger-container: #820014;
-  --btn-on-neutral-container: #1f1f1f;
+  --btn-on-primary-container: light-dark(#003eb3, #69b1ff);
+  --btn-on-danger-container: light-dark(#820014, #ff7875);
+  --btn-on-neutral-container: light-dark(#1f1f1f, rgba(255, 255, 255, 0.85));
 
   /* ============ Select / tooltip ============ */
-  --select-popup-shadow: 0 6px 16px rgb(0 0 0 / 8%), 0 3px 6px rgb(0 0 0 / 12%);
-  --tooltip-bg: #1f1f1f; /* ≈ rgba(0,0,0,.85) */
-  --tooltip-fg: #ffffff;
+  --select-popup-shadow: light-dark(0 6px 16px rgb(0 0 0 / 8%), 0 3px 6px rgb(0 0 0 / 12%), 0 0 0 1px #424242);
+  --tooltip-bg: light-dark(#1f1f1f, rgba(255, 255, 255, 0.85)); /* ≈ rgba(0,0,0,.85) */
+  --tooltip-fg: light-dark(#ffffff, #1f1f1f);
 
   /* ============ Dialog (Ant Design : rayon 8, sans bord) ============ */
   --dialog-radius: 8px;
@@ -39,6 +39,11 @@
 
   /* ============ Card (Ant : rayon 8, boxShadowCard discret) ============ */
   --card-radius: 8px;
-  --card-filled-bg: #fafafa; /* colorFillAlter */
-  --card-shadow: 0 1px 2px rgb(0 0 0 / 3%), 0 1px 6px -1px rgb(0 0 0 / 2%), 0 2px 4px rgb(0 0 0 / 2%);
+  --card-filled-bg: light-dark(#fafafa, #1f1f1f); /* colorFillAlter */
+  --card-shadow: light-dark(
+    0 1px 2px rgb(0 0 0 / 3%),
+    0 1px 6px -1px rgb(0 0 0 / 2%),
+    0 2px 4px rgb(0 0 0 / 2%),
+    0 0 0 1px #424242
+  );
 }

package/themes/theme-architecte.css

@@ -7,18 +7,18 @@
      haut/bas, tirets sur les côtés, comme le cadre d'un cartouche de plan.
    Bleu de Prusse, traits cyan crayon, sanguine en danger, Architects Daughter. */
 [data-theme='architecte'] {
-  color-scheme: dark;
+  /* color-scheme handled by foundation */
 
   /* ============ Socle ============ */
-  --kt-surface: #16344f; /* bleu de Prusse (blueprint) */
-  --kt-on-surface: #e8f1f8; /* 11.2:1 */
-  --kt-muted: #9dbdd4; /* 6.5:1 */
-  --kt-outline: #6f9dbd; /* trait de plan (4.4:1 non-texte) */
-  --kt-outline-strong: #a8cce4;
-  --kt-primary: #7fc8f0; /* crayon cyan, 7.0:1 en texte */
-  --kt-danger: #f0907c; /* sanguine, 5.5:1 */
-  --kt-neutral: #3e5c75;
-  --kt-focus-ring-color: #7fc8f0;
+  --kt-surface: light-dark(#fdfdfd, #16344f); /* bleu de Prusse (blueprint) */
+  --kt-on-surface: light-dark(#16344f, #e8f1f8); /* 11.2:1 */
+  --kt-muted: light-dark(#4b6b85, #9dbdd4); /* 6.5:1 */
+  --kt-outline: light-dark(#a8cce4, #6f9dbd); /* trait de plan (4.4:1 non-texte) */
+  --kt-outline-strong: light-dark(#6f9dbd, #a8cce4);
+  --kt-primary: light-dark(#0d5680, #7fc8f0); /* encre bleue plus foncée pour AAA avec texte blanc */
+  --kt-danger: light-dark(#8f3626, #f0907c); /* sanguine plus foncée pour AAA */
+  --kt-neutral: light-dark(#d5e5f0, #3e5c75);
+  --kt-focus-ring-color: light-dark(#1c7fb3, #7fc8f0);
   --kt-font: 'Architects Daughter', 'Segoe Print', cursive;
 
   /* Gouttière = trait de plan : thumb bleu crayon (outline) sur le lavis des champs. */
@@ -35,7 +35,7 @@
 
   /* ============ Champs : ligne de cote (underline par côté) ============ */
   --field-border-width: 0 0 2px 0; /* SEULE la ligne du bas existe */
-  --field-bg: #1b3c5a; /* lavis léger au-dessus de la ligne */
+  --field-bg: light-dark(#f2f8fc, #1b3c5a); /* lavis léger au-dessus de la ligne */
   --field-focus-ring: color-mix(in srgb, #7fc8f0 55%, transparent);
   --field-focus-ring-style: dashed; /* trait de construction (rétrofit lot 6) */
   /* Menu flottant du select : bordure complète et fine, lui. */
@@ -43,41 +43,41 @@
   /* Lettrage technique des cartouches (rétrofit lot 6). */
   --field-label-transform: uppercase;
   --field-label-letter-spacing: 0.06em;
-  --field-caret-color: #7fc8f0;
-  --kt-selection-bg: #7fc8f0;
-  --kt-selection-fg: #0d2438;
+  --field-caret-color: light-dark(#1c7fb3, #7fc8f0);
+  --kt-selection-bg: light-dark(#b3def5, #7fc8f0);
+  --kt-selection-fg: light-dark(#0d2438, #0d2438);
 
   /* ============ Boutons : cartouche (style par côté) ============ */
   --btn-border-style: solid dashed; /* haut/bas pleins, côtés en tirets */
   --btn-border-width: 1.5px;
   --btn-text-transform: uppercase; /* lettrage de plan (rétrofit lot 6) */
   --btn-letter-spacing: 0.08em;
-  --btn-on-primary: #0d2438; /* 8.6:1 sur cyan */
-  --btn-on-danger: #381208; /* 7.1:1 sur sanguine */
-  --btn-on-neutral: #ffffff; /* 7.0:1 */
-  --btn-on-primary-container: #c9e6f8;
-  --btn-on-neutral-container: #d4e2ee;
-  --btn-on-danger-container: #f8cfc4;
+  --btn-on-primary: light-dark(#ffffff, #0d2438); /* 8.6:1 sur cyan */
+  --btn-on-danger: light-dark(#ffffff, #381208); /* 7.1:1 sur sanguine */
+  --btn-on-neutral: light-dark(#16344f, #ffffff); /* 7.0:1 */
+  --btn-on-primary-container: light-dark(#09324a, #c9e6f8);
+  --btn-on-neutral-container: light-dark(#16344f, #d4e2ee);
+  --btn-on-danger-container: light-dark(#4a150c, #f8cfc4);
   --btn-fg-weight: 100%;
-  --btn-neutral-fg: #a9c4da;
+  --btn-neutral-fg: light-dark(#3a5b78, #a9c4da);
   --btn-tonal-weight: 24%;
 
   /* ============ Select / tooltip ============ */
-  --select-popup-bg: #1b3c5a;
+  --select-popup-bg: light-dark(#f2f8fc, #1b3c5a);
   --select-popup-shadow: 0 8px 24px rgb(4 14 24 / 55%);
   --kt-sheet-shadow: 0 -8px 24px rgb(4 14 24 / 55%);
   --kt-sheet-scrim: rgb(4 14 24 / 60%);
-  --tooltip-bg: #0f2438;
-  --tooltip-fg: #dceaf5;
+  --tooltip-bg: light-dark(#e1edf5, #0f2438);
+  --tooltip-fg: light-dark(#16344f, #dceaf5);
 
   /* ============ Dialog (blueprint : cartouche cyan) ============ */
   --dialog-radius: 8px;
-  --dialog-border-color: #6f9dbd;
+  --dialog-border-color: light-dark(#a8cce4, #6f9dbd);
 
   /* ============ Card : cartouche blueprint (lavis + trait cyan via l'ombre) ============ */
-  --card-bg: #1b3c5a;
-  --card-filled-bg: #214a6e;
+  --card-bg: light-dark(#fdfdfd, #1b3c5a);
+  --card-filled-bg: light-dark(#f2f8fc, #214a6e);
   --card-radius: 8px;
-  --card-border-color: #6f9dbd;
+  --card-border-color: light-dark(#a8cce4, #6f9dbd);
   --card-shadow: 0 0 0 1px rgb(111 157 189 / 30%), 0 8px 24px rgb(4 14 24 / 45%);
 }

package/themes/theme-aurora.css

@@ -4,18 +4,18 @@
    Surfaces claires + texte navy => AA sans compromis (les halos sont décoratifs, jamais porteurs
    d'information ni de contraste de texte). Inter, rondeurs douces. */
 [data-theme='aurora'] {
-  color-scheme: light;
+  /* color-scheme handled by foundation */
 
   /* ============ Socle ============ */
-  --kt-primary: #4f46e5; /* indigo — blanc ~6.6:1 */
-  --kt-danger: #be185d; /* rose profond — blanc ~6.2:1 */
-  --kt-neutral: #475569;
-  --kt-surface: #f7f9fc;
-  --kt-on-surface: #16203a; /* ~13:1 */
-  --kt-muted: #4a5878; /* ~6:1 */
-  --kt-outline: #cdd6e8;
-  --kt-outline-strong: #8493b3;
-  --kt-focus-ring-color: #4f46e5;
+  --kt-primary: light-dark(#4f46e5, #818cf8); /* indigo — blanc ~6.6:1 */
+  --kt-danger: light-dark(#be185d, #f472b6); /* rose profond — blanc ~6.2:1 */
+  --kt-neutral: light-dark(#475569, #94a3b8);
+  --kt-surface: light-dark(#f7f9fc, #0f172a);
+  --kt-on-surface: light-dark(#16203a, #f8fafc); /* ~13:1 */
+  --kt-muted: light-dark(#4a5878, #cbd5e1); /* ~6:1 */
+  --kt-outline: light-dark(#cdd6e8, #334155);
+  --kt-outline-strong: light-dark(#8493b3, #64748b);
+  --kt-focus-ring-color: light-dark(#4f46e5, #818cf8);
   --kt-font: 'Inter', system-ui, sans-serif;
 
   /* Gouttière indigo douce. */
@@ -27,9 +27,9 @@
   --kt-sheet-scrim: rgb(22 32 58 / 35%);
 
   /* Caret + sélection. */
-  --field-caret-color: #4f46e5;
-  --kt-selection-bg: #ddd6fe;
-  --kt-selection-fg: #2e1065;
+  --field-caret-color: light-dark(#4f46e5, #818cf8);
+  --kt-selection-bg: light-dark(#ddd6fe, #4c1d95);
+  --kt-selection-fg: light-dark(#2e1065, #ede9fe);
 
   /* ============ Géométrie douce ============ */
   --kt-control-radius: 12px;
@@ -37,7 +37,7 @@
   --chip-radius: 999px;
 
   /* ============ Champs : halo indigo au survol/focus ============ */
-  --field-bg: #ffffff;
+  --field-bg: light-dark(#ffffff, #1e293b);
   --field-focus-ring: color-mix(in srgb, #4f46e5 50%, transparent);
   --field-transition: border-color 180ms ease, box-shadow 180ms ease;
   --field-shadow: 0 2px 8px rgb(22 32 58 / 6%);
@@ -46,9 +46,9 @@
 
   /* ============ Boutons : élévation colorée, lève au survol ============ */
   --btn-tonal-weight: 16%;
-  --btn-on-primary-container: #2e1065;
-  --btn-on-danger-container: #6b0f3a;
-  --btn-on-neutral-container: #16203a;
+  --btn-on-primary-container: light-dark(#2e1065, #c7d2fe);
+  --btn-on-danger-container: light-dark(#6b0f3a, #fbcfe8);
+  --btn-on-neutral-container: light-dark(#16203a, #f1f5f9);
   --btn-transition: transform 180ms ease, box-shadow 180ms ease;
   --btn-transform-hover: translateY(-2px);
   --btn-transform-active: translateY(0) scale(0.98);
@@ -58,20 +58,20 @@
   --chip-shadow-hover: 0 4px 14px rgb(79 70 229 / 20%);
 
   /* ============ Select / tooltip : panneaux à halo ============ */
-  --select-popup-bg: #ffffff;
+  --select-popup-bg: light-dark(#ffffff, #1e293b);
   --select-popup-shadow: 0 16px 48px rgb(79 70 229 / 18%), 0 4px 16px rgb(190 24 93 / 10%);
-  --tooltip-bg: #16203a;
-  --tooltip-fg: #f7f9fc;
+  --tooltip-bg: light-dark(#16203a, #f1f5f9);
+  --tooltip-fg: light-dark(#f7f9fc, #0f172a);
 
   /* ============ Dialog : halo aurora ample ============ */
-  --dialog-bg: #ffffff;
+  --dialog-bg: light-dark(#ffffff, #1e293b);
   --dialog-radius: 20px;
   --dialog-border-width: 0;
   --dialog-shadow: 0 24px 64px rgb(79 70 229 / 22%), 0 8px 24px rgb(190 24 93 / 12%);
 
   /* ============ Card : LA vitrine — double halo coloré, lève au survol ============ */
-  --card-bg: #ffffff;
-  --card-filled-bg: #f1f0fe; /* teinte indigo très pâle */
+  --card-bg: light-dark(#ffffff, #1e293b);
+  --card-filled-bg: light-dark(#f1f0fe, #272740); /* teinte indigo très pâle */
   --card-radius: 16px;
   --card-shadow: 0 6px 24px rgb(79 70 229 / 14%), 0 2px 8px rgb(190 24 93 / 8%);
   --card-shadow-hover: 0 14px 40px rgb(79 70 229 / 22%), 0 6px 18px rgb(190 24 93 / 12%);

package/themes/theme-bootstrap.css

@@ -4,14 +4,14 @@
    → on prend leurs variantes hover (#0b5ed7, #bb2d3b), quasi indiscernables et AA. */
 [data-theme='bootstrap'] {
   /* ============ Socle ============ */
-  --kt-primary: #0b5ed7; /* btn-primary hover — blanc 5.8:1 */
-  --kt-danger: #bb2d3b; /* btn-danger hover — blanc 5.9:1 */
-  --kt-neutral: #6c757d; /* secondary — blanc 4.7:1 */
-  --kt-surface: #ffffff;
-  --kt-on-surface: #212529; /* body-color */
-  --kt-muted: #6c757d; /* secondary-color */
-  --kt-outline: #ced4da; /* border des inputs (authentique, < 3:1 — fidélité > 1.4.11 ici) */
-  --kt-outline-strong: #adb5bd;
+  --kt-primary: light-dark(#063a8a, #3b8bff); /* btn-primary hover — blanc 5.8:1 */
+  --kt-danger: light-dark(#921925, #ea6c78); /* btn-danger hover — blanc 5.9:1 */
+  --kt-neutral: light-dark(#6c757d, #adb5bd); /* secondary — blanc 4.7:1 */
+  --kt-surface: light-dark(#ffffff, #212529);
+  --kt-on-surface: light-dark(#212529, #f8f9fa); /* body-color */
+  --kt-muted: light-dark(#6c757d, #adb5bd); /* secondary-color */
+  --kt-outline: light-dark(#ced4da, #495057); /* border des inputs (authentique, < 3:1 — fidélité > 1.4.11 ici) */
+  --kt-outline-strong: light-dark(#adb5bd, #6c757d);
   --kt-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 
   /* ============ Géométrie ============ */
@@ -20,27 +20,27 @@
 
   /* ============ Champs : le fameux ring translucide large de Bootstrap ============ */
   --field-focus-ring-width: 4px; /* .25rem */
-  --field-focus-ring: rgb(13 110 253 / 25%);
+  --field-focus-ring: light-dark(rgb(13 110 253 / 25%), rgb(13 110 253 / 50%));
   /* LA transition des .form-control Bootstrap (rétrofit lot 3). */
   --field-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 
   /* ============ Boutons ============ */
-  --btn-on-primary-container: #052c65; /* ≈ text-emphasis sur -subtle */
-  --btn-on-danger-container: #58151c;
-  --btn-on-neutral-container: #212529;
+  --btn-on-primary-container: light-dark(#052c65, #9ec5fe); /* ≈ text-emphasis sur -subtle */
+  --btn-on-danger-container: light-dark(#58151c, #f1aeb5);
+  --btn-on-neutral-container: light-dark(#212529, #f8f9fa);
 
   /* ============ Tooltip ============ */
-  --tooltip-bg: #212529;
-  --tooltip-fg: #ffffff;
+  --tooltip-bg: light-dark(#212529, #f8f9fa);
+  --tooltip-fg: light-dark(#ffffff, #212529);
 
   /* ============ Dialog (Bootstrap 5 : rayon .5rem, ombre modale) ============ */
   --dialog-radius: 0.5rem;
-  --dialog-border-color: rgb(0 0 0 / 17.5%);
-  --dialog-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
+  --dialog-border-color: light-dark(rgb(0 0 0 / 17.5%), rgb(255 255 255 / 15%));
+  --dialog-shadow: light-dark(0 0.5rem 1rem rgb(0 0 0 / 15%), 0 0 0 1px rgba(255, 255, 255, 0.1));
 
   /* ============ Card (Bootstrap : rayon .5rem, bord + ombre-sm) ============ */
   --card-radius: 0.5rem;
-  --card-border-color: rgb(0 0 0 / 17.5%);
-  --card-filled-bg: #f8f9fa; /* bg-body-tertiary */
-  --card-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 7.5%); /* shadow-sm */
+  --card-border-color: light-dark(rgb(0 0 0 / 17.5%), rgb(255 255 255 / 15%));
+  --card-filled-bg: light-dark(#f8f9fa, #2b3035); /* bg-body-tertiary */
+  --card-shadow: light-dark(0 0.125rem 0.25rem rgb(0 0 0 / 7.5%), 0 0 0 1px rgba(255, 255, 255, 0.15)); /* shadow-sm */
 }

package/themes/theme-carbon.css

@@ -3,14 +3,14 @@
    champs gris #f4f4f4, bleu interactif #0f62fe, IBM Plex Sans (stack avec repli système). */
 [data-theme='carbon'] {
   /* ============ Socle ============ */
-  --kt-primary: #0043ce; /* interactive — blanc 7.6:1 (AAA) */
-  --kt-danger: #750e13; /* support-error — blanc 9.0:1 (AAA) */
-  --kt-neutral: #393939; /* button-secondary Carbon */
-  --kt-surface: #ffffff;
-  --kt-on-surface: #161616; /* text-primary */
-  --kt-muted: #525252; /* text-secondary, ~7.4:1 */
-  --kt-outline: #8d8d8d; /* border-strong (les inputs Carbon ont une bordure marquée) */
-  --kt-outline-strong: #161616;
+  --kt-primary: light-dark(#093894, #6ba1ff); /* interactive — blanc 7.6:1 (AAA) */
+  --kt-danger: light-dark(#9e141c, #ff7b82); /* support-error — blanc 9.0:1 (AAA) */
+  --kt-neutral: light-dark(#393939, #c6c6c6); /* button-secondary Carbon */
+  --kt-surface: light-dark(#ffffff, #161616);
+  --kt-on-surface: light-dark(#161616, #f4f4f4); /* text-primary */
+  --kt-muted: light-dark(#525252, #a8a8a8); /* text-secondary, ~7.4:1 */
+  --kt-outline: light-dark(#8d8d8d, #525252); /* border-strong (les inputs Carbon ont une bordure marquée) */
+  --kt-outline-strong: light-dark(#161616, #f4f4f4);
   --kt-font: 'IBM Plex Sans', system-ui, sans-serif;
 
   /* ============ Géométrie : coins carrés ============ */
@@ -20,7 +20,7 @@
   --chip-radius: 0;
 
   /* ============ Champs ============ */
-  --field-bg: #f4f4f4; /* field-01 sur fond blanc */
+  --field-bg: light-dark(#f4f4f4, #262626); /* field-01 sur fond blanc */
   /* L'input Carbon authentique : fill gris + UNIQUEMENT la bordure du bas
      (rétrofit lot 5, bordures par côté) ; le menu du select garde sa bordure complète. */
   --field-border-width: 0 0 1px 0;
@@ -28,22 +28,22 @@
 
   /* ============ Boutons ============ */
   --btn-letter-spacing: 0.01em; /* body-compact Carbon, +0.16px (rétrofit lot 6) */
-  --btn-on-primary-container: #002c9b; /* sur container dérivé bleu pâle, >7:1 (AAA) */
-  --btn-on-danger-container: #750e13;
-  --btn-on-neutral-container: #161616;
+  --btn-on-primary-container: light-dark(#002c9b, #a6c8ff); /* sur container dérivé bleu pâle, >7:1 (AAA) */
+  --btn-on-danger-container: light-dark(#750e13, #ff8389);
+  --btn-on-neutral-container: light-dark(#161616, #f4f4f4);
 
   /* ============ Tooltip ============ */
-  --tooltip-bg: #393939;
-  --tooltip-fg: #ffffff;
+  --tooltip-bg: light-dark(#393939, #f4f4f4);
+  --tooltip-fg: light-dark(#ffffff, #161616);
 
   /* ============ Dialog (IBM Carbon : angles vifs, sans bord) ============ */
   --dialog-radius: 0;
   --dialog-border-width: 0;
-  --dialog-shadow: 0 2px 6px rgb(0 0 0 / 20%);
-  --kt-sheet-shadow: 0 -2px 6px rgb(0 0 0 / 30%); /* ombre minimale et nette (Carbon) */
+  --dialog-shadow: light-dark(0 2px 6px rgb(0 0 0 / 20%), 0 0 0 1px #525252);
+  --kt-sheet-shadow: light-dark(0 -2px 6px rgb(0 0 0 / 30%), 0 -1px 0 #525252); /* ombre minimale et nette (Carbon) */
 
   /* ============ Card (IBM Carbon : tuile carrée, layer-01) ============ */
   --card-radius: 0;
-  --card-filled-bg: #f4f4f4; /* layer-01 */
-  --card-shadow: 0 2px 6px rgb(0 0 0 / 20%); /* élévation nette, sans flou diffus */
+  --card-filled-bg: light-dark(#f4f4f4, #262626); /* layer-01 */
+  --card-shadow: light-dark(0 2px 6px rgb(0 0 0 / 20%), 0 0 0 1px #525252); /* élévation nette, sans flou diffus */
 }

package/themes/theme-catppuccin.css

@@ -8,59 +8,59 @@
    --btn-danger-fg / --field-error-color / --field-required-color. Inutile ici : le red
    Mocha #f38ba8 est assez clair pour servir tel quel (texte 6.9:1, label sombre 8.1:1). */
 [data-theme='catppuccin'] {
-  color-scheme: dark;
+  /* color-scheme handled by foundation */
 
   /* ============ Socle ============ */
-  --kt-surface: #1e1e2e; /* base */
-  --kt-on-surface: #cdd6f4; /* text, ~12:1 */
-  --kt-muted: #a6adc8; /* subtext0, ~7.4:1 */
-  --kt-outline: #6c7086; /* overlay0 */
-  --kt-outline-strong: #9399b2; /* overlay2 */
-  --kt-primary: #cba6f7; /* mauve, ~8.5:1 en texte */
-  --kt-danger: #f38ba8; /* red, ~6.9:1 */
-  --kt-neutral: #585b70; /* surface2 */
-  --kt-focus-ring-color: #cba6f7;
+  --kt-surface: light-dark(#eff1f5, #1e1e2e); /* base */
+  --kt-on-surface: light-dark(#4c4f69, #cdd6f4); /* text, ~12:1 */
+  --kt-muted: light-dark(#6c6f85, #a6adc8); /* subtext0, ~7.4:1 */
+  --kt-outline: light-dark(#bcc0cc, #6c7086); /* overlay0 */
+  --kt-outline-strong: light-dark(#9ca0b0, #9399b2); /* overlay2 */
+  --kt-primary: light-dark(#4a0e94, #cba6f7); /* mauve assombri pour AAA */
+  --kt-danger: light-dark(#78041d, #f38ba8); /* red assombri pour AAA */
+  --kt-neutral: light-dark(#ccd0da, #585b70); /* surface2 */
+  --kt-focus-ring-color: light-dark(#8839ef, #cba6f7);
   --kt-font: 'JetBrains Mono', ui-monospace, monospace; /* thème d'éditeur => mono assumée */
 
   /* Gouttière façon éditeur : thumb surface2 (overlay) sur le mantle, comme la scrollbar Mocha. */
   --kt-scrollbar-color: #585b70 #181825;
 
   /* ============ Champs ============ */
-  --field-bg: #313244; /* surface0 */
+  --field-bg: light-dark(#e6e9ef, #313244); /* surface0 */
   --field-focus-ring: color-mix(in srgb, #cba6f7 60%, transparent);
 
   /* ============ Boutons : inversions dark ============ */
-  --btn-on-primary: #11111b; /* crust sur mauve, 9.2:1 */
-  --btn-on-danger: #11111b; /* 8.1:1 */
-  --btn-on-neutral: #ffffff; /* 6.7:1 sur surface2 */
-  --btn-on-primary-container: #e2d5fb;
-  --btn-on-neutral-container: #cdd6f4;
-  --btn-on-danger-container: #f8c8d4;
+  --btn-on-primary: light-dark(#ffffff, #11111b); /* crust sur mauve, 9.2:1 */
+  --btn-on-danger: light-dark(#ffffff, #11111b); /* 8.1:1 */
+  --btn-on-neutral: light-dark(#000000, #ffffff); /* 6.7:1 sur surface2 */
+  --btn-on-primary-container: light-dark(#000000, #e2d5fb);
+  --btn-on-neutral-container: light-dark(#000000, #cdd6f4);
+  --btn-on-danger-container: light-dark(#000000, #f8c8d4);
   --btn-fg-weight: 100%;
-  --btn-neutral-fg: #bac2de; /* subtext1 */
+  --btn-neutral-fg: light-dark(#000000, #bac2de); /* subtext1 */
   --btn-tonal-weight: 24%;
 
   /* ============ Caret + sélection (rétrofit lot 6 — l'identité d'un thème d'éditeur) ============ */
-  --field-caret-color: #f5e0dc; /* rosewater, LE curseur Catppuccin officiel */
-  --kt-selection-bg: #585b70; /* surface2 */
-  --kt-selection-fg: #cdd6f4;
+  --field-caret-color: light-dark(#dc8a78, #f5e0dc); /* rosewater, LE curseur Catppuccin officiel */
+  --kt-selection-bg: light-dark(#ccd0da, #585b70); /* surface2 */
+  --kt-selection-fg: light-dark(#4c4f69, #cdd6f4);
 
   /* ============ Select / tooltip ============ */
-  --select-popup-bg: #313244;
+  --select-popup-bg: light-dark(#e6e9ef, #313244);
   --select-popup-shadow: 0 8px 24px rgb(17 17 27 / 60%);
   --kt-sheet-shadow: 0 -8px 24px rgb(17 17 27 / 60%);
   --kt-sheet-scrim: rgb(17 17 27 / 60%);
-  --tooltip-bg: #313244;
-  --tooltip-fg: #cdd6f4;
+  --tooltip-bg: light-dark(#ccd0da, #313244);
+  --tooltip-fg: light-dark(#4c4f69, #cdd6f4);
 
   /* ============ Dialog (Mocha dark) ============ */
-  --dialog-bg: #181825; /* mantle, légèrement sous la base */
+  --dialog-bg: light-dark(#eff1f5, #181825); /* mantle, légèrement sous la base */
   --dialog-radius: 12px;
   --dialog-border-color: #313244;
 
   /* ============ Card (Mocha : surface élevée surface0/1) ============ */
-  --card-bg: #313244; /* surface0, au-dessus de la base */
-  --card-filled-bg: #45475a; /* surface1 */
+  --card-bg: light-dark(#e6e9ef, #313244); /* surface0, au-dessus de la base */
+  --card-filled-bg: light-dark(#ccd0da, #45475a); /* surface1 */
   --card-radius: 12px;
   --card-shadow: 0 4px 12px rgb(17 17 27 / 45%);
 }

package/themes/theme-cyberpunk.css

@@ -42,18 +42,18 @@
 }
 
 [data-theme='cyberpunk'] {
-  color-scheme: dark;
+  /* color-scheme handled by foundation */
 
   /* ============ Socle (cyan/magenta sur quasi-noir) ============ */
-  --kt-surface: #0b0f1a;
-  --kt-on-surface: #e6f6ff; /* ~15:1 */
-  --kt-muted: #94b2c8; /* ~7:1 */
-  --kt-outline: #2f5a73; /* 3:1 non-texte */
-  --kt-outline-strong: #5fb6da;
-  --kt-primary: #28d6ef; /* cyan, texte ~10:1 */
-  --kt-danger: #ff3d8b; /* magenta, texte ~6:1 */
-  --kt-neutral: #2b3950;
-  --kt-focus-ring-color: #28d6ef;
+  --kt-surface: light-dark(#f0f8ff, #0b0f1a);
+  --kt-on-surface: light-dark(#04141a, #e6f6ff); /* ~15:1 */
+  --kt-muted: light-dark(#5a7a91, #94b2c8); /* ~7:1 */
+  --kt-outline: light-dark(#9ec3d9, #2f5a73); /* 3:1 non-texte */
+  --kt-outline-strong: light-dark(#5fb6da, #5fb6da);
+  --kt-primary: light-dark(#003847, #28d6ef); /* cyan, texte ~10:1 */
+  --kt-danger: light-dark(#660029, #ff3d8b); /* magenta, texte ~6:1 */
+  --kt-neutral: light-dark(#c9e2f2, #2b3950);
+  --kt-focus-ring-color: light-dark(#008ba3, #28d6ef);
   --kt-font: 'Oxanium', system-ui, sans-serif;
 
   /* Gouttière néon cyan sur la nuit. */
@@ -64,9 +64,9 @@
   --kt-sheet-scrim: rgb(4 8 18 / 70%);
 
   /* Caret + sélection. */
-  --field-caret-color: #28d6ef;
-  --kt-selection-bg: #28d6ef;
-  --kt-selection-fg: #04141a;
+  --field-caret-color: light-dark(#008ba3, #28d6ef);
+  --kt-selection-bg: light-dark(#008ba3, #28d6ef);
+  --kt-selection-fg: light-dark(#ffffff, #04141a);
 
   /* ============ Géométrie HUD : coins chanfreinés ============ */
   --kt-control-radius: 4px;
@@ -76,7 +76,7 @@
   --chip-radius: 4px;
 
   /* ============ Champs : lavis sombre + halo bicolore qui ORBITE au focus ============ */
-  --field-bg: #10182a;
+  --field-bg: light-dark(#e0f2fe, #10182a);
   --field-focus-ring: color-mix(in srgb, #28d6ef 60%, transparent);
   --field-transition: border-color 200ms ease;
   --field-shadow-hover: 0 0 calc(7px + var(--cyber-breathe)) rgb(40 214 239 / 30%);
@@ -86,14 +86,14 @@
     0 0 calc(8px + var(--cyber-breathe)) rgb(40 214 239 / 30%);
 
   /* ============ Boutons : inversions dark + pulsation au clic ============ */
-  --btn-on-primary: #04141a; /* sur cyan, AAA */
-  --btn-on-danger: #2a0312; /* sur magenta */
-  --btn-on-neutral: #ffffff;
-  --btn-on-primary-container: #b6f4ff;
-  --btn-on-neutral-container: #d4e2ee;
-  --btn-on-danger-container: #ffd0e2;
+  --btn-on-primary: light-dark(#ffffff, #04141a); /* sur cyan, AAA */
+  --btn-on-danger: light-dark(#ffffff, #2a0312); /* sur magenta */
+  --btn-on-neutral: light-dark(#000000, #ffffff);
+  --btn-on-primary-container: light-dark(#000000, #b6f4ff);
+  --btn-on-neutral-container: light-dark(#000000, #d4e2ee);
+  --btn-on-danger-container: light-dark(#000000, #ffd0e2);
   --btn-fg-weight: 100%;
-  --btn-neutral-fg: #a9c4da;
+  --btn-neutral-fg: light-dark(#000000, #a9c4da);
   --btn-tonal-weight: 24%;
   --btn-font-weight: 600;
   --btn-letter-spacing: 0.03em;
@@ -106,20 +106,20 @@
   --chip-shadow-hover: 0 0 14px rgb(40 214 239 / 45%);
 
   /* ============ Select / tooltip ============ */
-  --select-popup-bg: #10182a;
+  --select-popup-bg: light-dark(#e0f2fe, #10182a);
   --select-popup-shadow: 0 0 0 1px rgb(40 214 239 / 25%), 0 12px 40px rgb(0 0 0 / 65%);
-  --tooltip-bg: #10182a;
-  --tooltip-fg: #e6f6ff;
+  --tooltip-bg: light-dark(#cce8fa, #10182a);
+  --tooltip-fg: light-dark(#04141a, #e6f6ff);
 
   /* ============ Dialog : panneau HUD ============ */
-  --dialog-bg: #10182a;
+  --dialog-bg: light-dark(#e0f2fe, #10182a);
   --dialog-border-color: rgb(40 214 239 / 35%);
   --dialog-radius: 8px;
   --dialog-anim-from-transform: scale(0.96);
 
   /* ============ Card : panneau néon, ombre qui orbite (+ laser en bord haut, cf. ::before) ============ */
-  --card-bg: #10182a;
-  --card-filled-bg: #16203a;
+  --card-bg: light-dark(#ffffff, #10182a);
+  --card-filled-bg: light-dark(#e0f2fe, #16203a);
   --card-radius: 6px;
   --card-shadow:
     calc(cos(var(--cyber-angle)) * 8px) calc(sin(var(--cyber-angle)) * 8px) 22px -8px rgb(40 214 239 / 40%),
@@ -140,7 +140,7 @@
   --tab-margin: 0 4px 0 0;
 
   /* ============ Progress Bar ============ */
-  --kt-progress-bar-track-color: #10182a;
+  --kt-progress-bar-track-color: light-dark(#cce8fa, #10182a);
   --kt-progress-bar-indicator-color: transparent;
 }