@cyberskill/design 1.1.1 → 1.3.8

package/templates/vn-travel-expense-policy/support.js

@@ -1070,16 +1070,15 @@
   }
 
   // src/cdn.ts
-  var REACT_URL = "https://unpkg.com/umd-react@19.2.8/dist/react.production.min.js";
-  var REACT_SRI = "sha384-/nh8CKeV7Pk42Gpda6L4DM1JtZ2bwPOi+eh9O7+a1Y22UkGs8+mw3aW1shQ9FV30";
-  var REACT_DOM_URL = "https://unpkg.com/umd-react@19.2.8/dist/react-dom.production.min.js";
-  var REACT_DOM_SRI = "sha384-rhLCB72qrpcezgY2QW0panvW9IeO32m94nvuDVRD/iEGHXoUbjtijL6Xi/Z5/mzu";
-  var BABEL_URL = "https://unpkg.com/@babel/standalone@7.29.0/babel.min.js";
-  var BABEL_SRI = "sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y";
-  function cdnScriptFor(url, sri) {
+  var REACT_LOCAL = "../../_vendor/react/react.production.min.js";
+  var REACT_DOM_LOCAL = "../../_vendor/react/react-dom.production.min.js";
+  var BABEL_LOCAL = "../../_vendor/babel/babel.min.js";
+  // Product surfaces are offline-first (UX-026 / D4): no third-party script origins.
+  // Host editors may still remap via window.__resources[localPath].
+  function localScriptFor(path) {
     const res = window.__resources;
-    const v = res ? res[url] : void 0;
-    return typeof v === "string" && v ? { src: v } : { src: url, integrity: sri };
+    const v = res ? res[path] : void 0;
+    return typeof v === "string" && v ? v : path;
   }
 
   // src/external.ts
@@ -1106,16 +1105,12 @@
     function ensureBabel() {
       if (window.Babel) return Promise.resolve();
       if (babelLoading) return babelLoading;
-      const babel = cdnScriptFor(BABEL_URL, BABEL_SRI);
+      const src = localScriptFor(BABEL_LOCAL);
       babelLoading = new Promise((res, rej) => {
         const s = document.createElement("script");
-        s.src = babel.src;
-        if (babel.integrity) {
-          s.integrity = babel.integrity;
-          s.crossOrigin = "anonymous";
-        }
+        s.src = src;
         s.onload = () => res();
-        s.onerror = rej;
+        s.onerror = () => rej(new Error("failed to load local Babel: " + src));
         document.head.appendChild(s);
       });
       return babelLoading;
@@ -1768,11 +1763,9 @@
   function loadReactUmd() {
     const w = window;
     if (w.React && w.ReactDOM) return Promise.resolve();
-    const react = cdnScriptFor(REACT_URL, REACT_SRI);
-    const reactDom = cdnScriptFor(REACT_DOM_URL, REACT_DOM_SRI);
     return Promise.all([
-      loadScript(react.src, react.integrity),
-      loadScript(reactDom.src, reactDom.integrity)
+      loadScript(localScriptFor(REACT_LOCAL)),
+      loadScript(localScriptFor(REACT_DOM_LOCAL))
     ]).then(() => void 0);
   }
   function init() {

package/tokens/colors.css

@@ -20,11 +20,21 @@
   --cs-color-text-accent: #6E3B0E;   /* accessible ochre-adjacent link/accent text */
   --cs-color-text-muted: #6E5A4C;    /* APCA-safe secondary text on page */
 
-  /* ---- Semantic foregrounds ---- */
+  /* ---- Semantic fills + paired foregrounds (literal-on-semantic, UX-008) ---- */
   --cs-color-semantic-success: #166534;
   --cs-color-semantic-danger: #B42318;
   --cs-color-semantic-warning: #92400E;
   --cs-color-semantic-info: #1D4ED8;
+  --cs-color-semantic-success-fg: #FFFFFF;
+  --cs-color-semantic-danger-fg: #FFFFFF;
+  --cs-color-semantic-warning-fg: #FFFFFF;
+  --cs-color-semantic-info-fg: #FFFFFF;
+
+  /* ---- Document palette (Style Guide Articles · legal A4 instruments) ---- */
+  --cs-doc-ink: #1A1614;
+  --cs-doc-slate: #3F4C55;
+  --cs-doc-fill: #FDE68A;
+  --cs-doc-fill-ink: #1A1614;
 
   /* ---- Accent alias + border ---- */
   --cs-color-accent-ochre: #F4BA17;  /* focus rings */
@@ -52,6 +62,10 @@ a:hover { color: var(--cs-color-link-hover); }
   --cs-color-semantic-danger: #F87171;
   --cs-color-semantic-warning: #FBBF24;
   --cs-color-semantic-info: #7CB2FB;
+  --cs-color-semantic-success-fg: #1a1108;
+  --cs-color-semantic-danger-fg: #1a1108;
+  --cs-color-semantic-warning-fg: #1a1108;
+  --cs-color-semantic-info-fg: #1a1108;
   --cs-color-border-default: #4a3a2c;
   --cs-color-link: #f4ba17;
   --cs-color-link-hover: #f5ead9;
@@ -70,6 +84,10 @@ a:hover { color: var(--cs-color-link-hover); }
     --cs-color-semantic-danger: #F87171;
     --cs-color-semantic-warning: #FBBF24;
     --cs-color-semantic-info: #7CB2FB;
+    --cs-color-semantic-success-fg: #1a1108;
+    --cs-color-semantic-danger-fg: #1a1108;
+    --cs-color-semantic-warning-fg: #1a1108;
+    --cs-color-semantic-info-fg: #1a1108;
     --cs-color-border-default: #4a3a2c;
     --cs-color-link: #f4ba17;
     --cs-color-link-hover: #f5ead9;

package/tokens/component-tokens.css

@@ -2,6 +2,7 @@
  * Exact values from @cyberskill/tokens. Buttons carry a full size ramp with a
  * 44px comfortable default touch target; TextField matches. */
 :root {
+  --cs-focus-ring: 3px; /* @kind other */ /* signature focus outline width */
   /* Button */
   --cs-component-button-primary-bg: #45210E;
   --cs-component-button-primary-fg: #FFFFFF;

package/tokens/element-seeds.json

@@ -1,7 +1,7 @@
 {
   "$meta": {
     "system": "CyberSkill Design System",
-    "version": "1.0.0",
+    "version": "1.3.8",
     "note": "OKLCH seed contract for the 15 element packs × light/dark (30 sets). SoT for scripts/generate-element-packs.mjs — do not hand-edit tokens/elements.css. Owner bar (Jul 2026): soft/middle/deep clearly distinct; middle intensity synced across elements; harmonious role palettes; light↔dark same-hue identity. Public variant names unchanged."
   },
   "intensity": {
@@ -35,7 +35,7 @@
     "tintCMax": 0.06
   },
   "tuongSinh": {
-    "tho": "hoa",
+    "tho": "kim",
     "hoa": "tho",
     "thuy": "moc",
     "moc": "hoa",

package/tokens/elements.css

@@ -5,22 +5,25 @@
  * Five elements: Kim (metal) · Mộc (wood) · Thủy (water) · Hỏa (fire) · Thổ (earth).
  * Soft / middle / deep intensity ladder (middle = default). Thổ middle pins logo ochre.
  *
- * Contract — every element/variant sets exactly these 9 role tokens:
+ * Contract — every element/variant sets exactly these 10 role tokens:
  *   --cs-accent · --cs-accent-strong · --cs-accent-bright · --cs-accent-on
- *   --cs-accent-tint · --cs-accent-ink · --cs-accent-glow · --cs-accent-grad-a/b
+ *   --cs-accent-on-strong · --cs-accent-tint · --cs-accent-ink
+ *   --cs-accent-glow · --cs-accent-grad-a/b
  * TEXT RULE: text sits on -bright or -tint only — never on the mid-tone -accent.
- * Focus ring --cs-color-accent-ochre and semantic status tokens NEVER remap.
+ * Text on -strong uses --cs-accent-on-strong (WCAG AA ≥4.5:1 light and dark).
+ * Focus indicator (text-primary contour + ochre halo) and semantic status tokens NEVER remap.
  * Generative cycle (Tương sinh) only for grad-b: Mộc→Hỏa→Thổ→Kim→Thủy→Mộc. */
 :root {
   --cs-accent: #F4BA17;
   --cs-accent-strong: #A47D17;
   --cs-accent-bright: #F4BA17;
   --cs-accent-on: #45210E;
+  --cs-accent-on-strong: #1A1108;
   --cs-accent-tint: #FBF4E9;
   --cs-accent-ink: #45210E;
   --cs-accent-glow: rgba(244, 186, 23, 0.48);
   --cs-accent-grad-a: #F4BA17;
-  --cs-accent-grad-b: #FCAF91;
+  --cs-accent-grad-b: #F3B958;
 }
 
 /* ---- Element reach beyond accent ---- */
@@ -51,35 +54,38 @@
   --cs-accent-strong: #A47D17;
   --cs-accent-bright: #F4BA17;
   --cs-accent-on: #45210E;
+  --cs-accent-on-strong: #1A1108;
   --cs-accent-tint: #FBF4E9;
   --cs-accent-ink: #45210E;
   --cs-accent-glow: rgba(244, 186, 23, 0.48);
   --cs-accent-grad-a: #F4BA17;
-  --cs-accent-grad-b: #FCAF91;
+  --cs-accent-grad-b: #F3B958;
 }
 [data-cs-element="tho"][data-cs-variant="sand"] {
   --cs-accent: #F8E9C0;
   --cs-accent-strong: #90825E;
   --cs-accent-bright: #F6EBCC;
   --cs-accent-on: #292414;
+  --cs-accent-on-strong: #1A1108;
   --cs-accent-tint: #FBF7EA;
   --cs-accent-ink: #292414;
   --cs-accent-glow: rgba(248, 233, 192, 0.48);
   --cs-accent-grad-a: #F8E9C0;
-  --cs-accent-grad-b: #FCAF91;
+  --cs-accent-grad-b: #F3B958;
   --cs-color-text-accent: #90825E;
-  --cs-color-link: #90825E;
+  --cs-color-link: #7B6D4A;
 }
 [data-cs-element="tho"][data-cs-variant="clay"] {
   --cs-accent: #513801;
   --cs-accent-strong: #201300;
   --cs-accent-bright: #DEC7A2;
   --cs-accent-on: #2D220E;
+  --cs-accent-on-strong: #FFFFFF;
   --cs-accent-tint: #FFF6E7;
   --cs-accent-ink: #2D220E;
   --cs-accent-glow: rgba(81, 56, 1, 0.48);
   --cs-accent-grad-a: #513801;
-  --cs-accent-grad-b: #FCAF91;
+  --cs-accent-grad-b: #F3B958;
   --cs-color-text-accent: #201300;
   --cs-color-link: #201300;
 }
@@ -90,32 +96,35 @@
   --cs-accent-strong: #B47054;
   --cs-accent-bright: #FED3C3;
   --cs-accent-on: #381B10;
+  --cs-accent-on-strong: #1A1108;
   --cs-accent-tint: #FFF4F0;
   --cs-accent-ink: #381B10;
   --cs-accent-glow: rgba(252, 175, 145, 0.48);
   --cs-accent-grad-a: #FCAF91;
   --cs-accent-grad-b: #F4BA17;
   --cs-color-text-accent: #B47054;
-  --cs-color-link: #B47054;
+  --cs-color-link: #A15E43;
 }
 [data-cs-element="hoa"][data-cs-variant="plasma"] {
   --cs-accent: #FFE1D8;
   --cs-accent-strong: #967C75;
   --cs-accent-bright: #FCE6DF;
   --cs-accent-on: #2C211E;
+  --cs-accent-on-strong: #1A1108;
   --cs-accent-tint: #FEF4F2;
   --cs-accent-ink: #2C211E;
   --cs-accent-glow: rgba(255, 225, 216, 0.48);
   --cs-accent-grad-a: #FFE1D8;
   --cs-accent-grad-b: #F4BA17;
   --cs-color-text-accent: #967C75;
-  --cs-color-link: #967C75;
+  --cs-color-link: #846B64;
 }
 [data-cs-element="hoa"][data-cs-variant="lava"] {
   --cs-accent: #622B06;
   --cs-accent-strong: #280D00;
   --cs-accent-bright: #F1BEA4;
   --cs-accent-on: #361D0F;
+  --cs-accent-on-strong: #FFFFFF;
   --cs-accent-tint: #FFF4EF;
   --cs-accent-ink: #361D0F;
   --cs-accent-glow: rgba(98, 43, 6, 0.48);
@@ -131,32 +140,35 @@
   --cs-accent-strong: #108EA0;
   --cs-accent-bright: #99EEFF;
   --cs-accent-on: #012A30;
+  --cs-accent-on-strong: #1A1108;
   --cs-accent-tint: #E7FBFF;
   --cs-accent-ink: #012A30;
   --cs-accent-glow: rgba(46, 219, 247, 0.48);
   --cs-accent-grad-a: #2EDBF7;
   --cs-accent-grad-b: #A3D768;
   --cs-color-text-accent: #108EA0;
-  --cs-color-link: #108EA0;
+  --cs-color-link: #027B8B;
 }
 [data-cs-element="thuy"][data-cs-variant="mist"] {
   --cs-accent: #C0F5FC;
   --cs-accent-strong: #5A8A90;
   --cs-accent-bright: #CDF4F9;
   --cs-accent-on: #13282B;
+  --cs-accent-on-strong: #1A1108;
   --cs-accent-tint: #EBFAFC;
   --cs-accent-ink: #13282B;
   --cs-accent-glow: rgba(192, 245, 252, 0.48);
   --cs-accent-grad-a: #C0F5FC;
   --cs-accent-grad-b: #A3D768;
   --cs-color-text-accent: #5A8A90;
-  --cs-color-link: #5A8A90;
+  --cs-color-link: #48787E;
 }
 [data-cs-element="thuy"][data-cs-variant="ocean"] {
   --cs-accent: #004554;
   --cs-accent-strong: #011A21;
   --cs-accent-bright: #A8D3E0;
   --cs-accent-on: #10282F;
+  --cs-accent-on-strong: #FFFFFF;
   --cs-accent-tint: #EAFAFF;
   --cs-accent-ink: #10282F;
   --cs-accent-glow: rgba(0, 69, 84, 0.48);
@@ -172,32 +184,35 @@
   --cs-accent-strong: #629122;
   --cs-accent-bright: #C5ED9C;
   --cs-accent-on: #182A00;
+  --cs-accent-on-strong: #1A1108;
   --cs-accent-tint: #EFFCE3;
   --cs-accent-ink: #182A00;
   --cs-accent-glow: rgba(163, 215, 104, 0.48);
   --cs-accent-grad-a: #A3D768;
   --cs-accent-grad-b: #FCAF91;
   --cs-color-text-accent: #629122;
-  --cs-color-link: #629122;
+  --cs-color-link: #517B13;
 }
 [data-cs-element="moc"][data-cs-variant="bamboo"] {
   --cs-accent: #E1F1C8;
   --cs-accent-strong: #7C8965;
   --cs-accent-bright: #E5F1D2;
   --cs-accent-on: #212617;
+  --cs-accent-on-strong: #1A1108;
   --cs-accent-tint: #F4F9ED;
   --cs-accent-ink: #212617;
   --cs-accent-glow: rgba(225, 241, 200, 0.48);
   --cs-accent-grad-a: #E1F1C8;
   --cs-accent-grad-b: #FCAF91;
   --cs-color-text-accent: #7C8965;
-  --cs-color-link: #7C8965;
+  --cs-color-link: #687451;
 }
 [data-cs-element="moc"][data-cs-variant="forest"] {
   --cs-accent: #1A4A01;
   --cs-accent-strong: #051D00;
   --cs-accent-bright: #B0D8A3;
   --cs-accent-on: #162A0E;
+  --cs-accent-on-strong: #FFFFFF;
   --cs-accent-tint: #ECFDE7;
   --cs-accent-ink: #162A0E;
   --cs-accent-glow: rgba(26, 74, 1, 0.48);
@@ -213,32 +228,35 @@
   --cs-accent-strong: #AC780B;
   --cs-accent-bright: #FDD89F;
   --cs-accent-on: #312002;
+  --cs-accent-on-strong: #1A1108;
   --cs-accent-tint: #FFF5E7;
   --cs-accent-ink: #312002;
   --cs-accent-glow: rgba(243, 185, 88, 0.48);
   --cs-accent-grad-a: #F3B958;
   --cs-accent-grad-b: #2EDBF7;
   --cs-color-text-accent: #AC780B;
-  --cs-color-link: #AC780B;
+  --cs-color-link: #966700;
 }
 [data-cs-element="kim"][data-cs-variant="titanium"] {
   --cs-accent: #FEE5C7;
   --cs-accent-strong: #947F65;
   --cs-accent-bright: #FBE8D2;
   --cs-accent-on: #2B2217;
+  --cs-accent-on-strong: #1A1108;
   --cs-accent-tint: #FDF5ED;
   --cs-accent-ink: #2B2217;
   --cs-accent-glow: rgba(254, 229, 199, 0.48);
   --cs-accent-grad-a: #FEE5C7;
   --cs-accent-grad-b: #2EDBF7;
   --cs-color-text-accent: #947F65;
-  --cs-color-link: #947F65;
+  --cs-color-link: #826D54;
 }
 [data-cs-element="kim"][data-cs-variant="steel"] {
   --cs-accent: #503901;
   --cs-accent-strong: #1F1400;
   --cs-accent-bright: #DCC8A2;
   --cs-accent-on: #2D220E;
+  --cs-accent-on-strong: #FFFFFF;
   --cs-accent-tint: #FEF6E7;
   --cs-accent-ink: #2D220E;
   --cs-accent-glow: rgba(80, 57, 1, 0.48);
@@ -256,13 +274,22 @@
   --cs-color-link: var(--cs-accent-bright);
   --cs-color-link-hover: var(--cs-color-text-primary);
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"] [data-cs-element], [data-cs-element][data-theme="system"] {
+  --cs-component-button-primary-bg: var(--cs-accent-strong);
+  --cs-component-button-primary-fg: var(--cs-accent-on);
+  --cs-color-text-accent: var(--cs-accent-bright);
+  --cs-color-link: var(--cs-accent-bright);
+  --cs-color-link-hover: var(--cs-color-text-primary);
+  }
+}
 
 /* ---- Aurora washes ---- */
-.cs-aurora-wash { background-image: url("../assets/aurora-gold.jpg"); background-size: cover; background-position: center; }
-[data-cs-element="hoa"] .cs-aurora-wash { background-image: url("../assets/aurora-hoa.png"); }
-[data-cs-element="thuy"] .cs-aurora-wash { background-image: url("../assets/aurora-thuy.png"); }
-[data-cs-element="moc"] .cs-aurora-wash { background-image: url("../assets/aurora-moc.png"); }
-[data-cs-element="kim"] .cs-aurora-wash { background-image: url("../assets/aurora-kim.png"); }
+.cs-aurora-wash { background-image: url("../assets/aurora-tho.webp"); background-size: cover; background-position: center; }
+[data-cs-element="hoa"] .cs-aurora-wash { background-image: url("../assets/aurora-hoa.webp"); }
+[data-cs-element="thuy"] .cs-aurora-wash { background-image: url("../assets/aurora-thuy.webp"); }
+[data-cs-element="moc"] .cs-aurora-wash { background-image: url("../assets/aurora-moc.webp"); }
+[data-cs-element="kim"] .cs-aurora-wash { background-image: url("../assets/aurora-kim.webp"); }
 
 /* ---- APCA-derived DARK elemental packs (generated; hue-locked to light) ---- */
 [data-theme="dark"][data-cs-element="tho"][data-cs-variant="sand"] {
@@ -270,118 +297,298 @@
   --cs-accent-bright: #F6EBCC;
   --cs-accent-strong: #665A37;
   --cs-accent-on: #f5ead9;
+  --cs-accent-on-strong: #FFFDF8;
   --cs-accent-tint: #332701;
   --cs-accent-ink: #F6EBCC;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][data-cs-element="tho"][data-cs-variant="sand"] {
+    --cs-accent: #F8E9C0;
+    --cs-accent-bright: #F6EBCC;
+    --cs-accent-strong: #665A37;
+    --cs-accent-on: #f5ead9;
+    --cs-accent-on-strong: #FFFDF8;
+    --cs-accent-tint: #332701;
+    --cs-accent-ink: #F6EBCC;
+  }
+}
 [data-theme="dark"][data-cs-element="tho"] {
   --cs-accent: #F4BA17;
   --cs-accent-bright: #FEC42C;
   --cs-accent-strong: #73560B;
   --cs-accent-on: #f5ead9;
+  --cs-accent-on-strong: #FFFDF8;
   --cs-accent-tint: #352602;
   --cs-accent-ink: #FECD5E;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][data-cs-element="tho"] {
+    --cs-accent: #F4BA17;
+    --cs-accent-bright: #FEC42C;
+    --cs-accent-strong: #73560B;
+    --cs-accent-on: #f5ead9;
+    --cs-accent-on-strong: #FFFDF8;
+    --cs-accent-tint: #352602;
+    --cs-accent-ink: #FECD5E;
+  }
+}
 [data-theme="dark"][data-cs-element="tho"][data-cs-variant="clay"] {
   --cs-accent: #CDB07E;
   --cs-accent-bright: #E4CDA8;
   --cs-accent-strong: #1F1300;
   --cs-accent-on: #f5ead9;
+  --cs-accent-on-strong: #FFFDF8;
   --cs-accent-tint: #372502;
   --cs-accent-ink: #E7D0AB;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][data-cs-element="tho"][data-cs-variant="clay"] {
+    --cs-accent: #CDB07E;
+    --cs-accent-bright: #E4CDA8;
+    --cs-accent-strong: #1F1300;
+    --cs-accent-on: #f5ead9;
+    --cs-accent-on-strong: #FFFDF8;
+    --cs-accent-tint: #372502;
+    --cs-accent-ink: #E7D0AB;
+  }
+}
 [data-theme="dark"][data-cs-element="hoa"][data-cs-variant="plasma"] {
   --cs-accent: #FFE1D8;
   --cs-accent-bright: #FCE6DF;
   --cs-accent-strong: #6F5750;
   --cs-accent-on: #f5ead9;
+  --cs-accent-on-strong: #FFFDF8;
   --cs-accent-tint: #38231C;
   --cs-accent-ink: #FCE6DF;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][data-cs-element="hoa"][data-cs-variant="plasma"] {
+    --cs-accent: #FFE1D8;
+    --cs-accent-bright: #FCE6DF;
+    --cs-accent-strong: #6F5750;
+    --cs-accent-on: #f5ead9;
+    --cs-accent-on-strong: #FFFDF8;
+    --cs-accent-tint: #38231C;
+    --cs-accent-ink: #FCE6DF;
+  }
+}
 [data-theme="dark"][data-cs-element="hoa"] {
   --cs-accent: #FCAF91;
   --cs-accent-bright: #FED3C3;
   --cs-accent-strong: #8A4A30;
   --cs-accent-on: #f5ead9;
+  --cs-accent-on-strong: #FFFDF8;
   --cs-accent-tint: #411E0F;
   --cs-accent-ink: #FED3C3;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][data-cs-element="hoa"] {
+    --cs-accent: #FCAF91;
+    --cs-accent-bright: #FED3C3;
+    --cs-accent-strong: #8A4A30;
+    --cs-accent-on: #f5ead9;
+    --cs-accent-on-strong: #FFFDF8;
+    --cs-accent-tint: #411E0F;
+    --cs-accent-ink: #FED3C3;
+  }
+}
 [data-theme="dark"][data-cs-element="hoa"][data-cs-variant="lava"] {
   --cs-accent: #E8A683;
   --cs-accent-bright: #F8C4AA;
   --cs-accent-strong: #280D00;
   --cs-accent-on: #f5ead9;
+  --cs-accent-on-strong: #FFFDF8;
   --cs-accent-tint: #401F0B;
   --cs-accent-ink: #FBC7AD;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][data-cs-element="hoa"][data-cs-variant="lava"] {
+    --cs-accent: #E8A683;
+    --cs-accent-bright: #F8C4AA;
+    --cs-accent-strong: #280D00;
+    --cs-accent-on: #f5ead9;
+    --cs-accent-on-strong: #FFFDF8;
+    --cs-accent-tint: #401F0B;
+    --cs-accent-ink: #FBC7AD;
+  }
+}
 [data-theme="dark"][data-cs-element="thuy"][data-cs-variant="mist"] {
   --cs-accent: #C0F5FC;
   --cs-accent-bright: #CDF4F9;
   --cs-accent-strong: #316167;
   --cs-accent-on: #f5ead9;
+  --cs-accent-on-strong: #FFFDF8;
   --cs-accent-tint: #022F34;
   --cs-accent-ink: #CDF4F9;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][data-cs-element="thuy"][data-cs-variant="mist"] {
+    --cs-accent: #C0F5FC;
+    --cs-accent-bright: #CDF4F9;
+    --cs-accent-strong: #316167;
+    --cs-accent-on: #f5ead9;
+    --cs-accent-on-strong: #FFFDF8;
+    --cs-accent-tint: #022F34;
+    --cs-accent-ink: #CDF4F9;
+  }
+}
 [data-theme="dark"][data-cs-element="thuy"] {
   --cs-accent: #2EDBF7;
   --cs-accent-bright: #99EEFF;
   --cs-accent-strong: #046270;
   --cs-accent-on: #f5ead9;
+  --cs-accent-on-strong: #FFFDF8;
   --cs-accent-tint: #032F36;
   --cs-accent-ink: #99EEFF;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][data-cs-element="thuy"] {
+    --cs-accent: #2EDBF7;
+    --cs-accent-bright: #99EEFF;
+    --cs-accent-strong: #046270;
+    --cs-accent-on: #f5ead9;
+    --cs-accent-on-strong: #FFFDF8;
+    --cs-accent-tint: #032F36;
+    --cs-accent-ink: #99EEFF;
+  }
+}
 [data-theme="dark"][data-cs-element="thuy"][data-cs-variant="ocean"] {
   --cs-accent: #82BCCD;
   --cs-accent-bright: #ABD6E3;
   --cs-accent-strong: #011A21;
   --cs-accent-on: #f5ead9;
+  --cs-accent-on-strong: #FFFDF8;
   --cs-accent-tint: #002F3A;
   --cs-accent-ink: #AED9E6;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][data-cs-element="thuy"][data-cs-variant="ocean"] {
+    --cs-accent: #82BCCD;
+    --cs-accent-bright: #ABD6E3;
+    --cs-accent-strong: #011A21;
+    --cs-accent-on: #f5ead9;
+    --cs-accent-on-strong: #FFFDF8;
+    --cs-accent-tint: #002F3A;
+    --cs-accent-ink: #AED9E6;
+  }
+}
 [data-theme="dark"][data-cs-element="moc"][data-cs-variant="bamboo"] {
   --cs-accent: #E1F1C8;
   --cs-accent-bright: #E5F1D2;
   --cs-accent-strong: #54603E;
   --cs-accent-on: #f5ead9;
+  --cs-accent-on-strong: #FFFDF8;
   --cs-accent-tint: #232D0B;
   --cs-accent-ink: #E5F1D2;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][data-cs-element="moc"][data-cs-variant="bamboo"] {
+    --cs-accent: #E1F1C8;
+    --cs-accent-bright: #E5F1D2;
+    --cs-accent-strong: #54603E;
+    --cs-accent-on: #f5ead9;
+    --cs-accent-on-strong: #FFFDF8;
+    --cs-accent-tint: #232D0B;
+    --cs-accent-ink: #E5F1D2;
+  }
+}
 [data-theme="dark"][data-cs-element="moc"] {
   --cs-accent: #A3D768;
   --cs-accent-bright: #C5ED9C;
   --cs-accent-strong: #416501;
   --cs-accent-on: #f5ead9;
+  --cs-accent-on-strong: #FFFDF8;
   --cs-accent-tint: #1F2E0B;
   --cs-accent-ink: #C5ED9C;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][data-cs-element="moc"] {
+    --cs-accent: #A3D768;
+    --cs-accent-bright: #C5ED9C;
+    --cs-accent-strong: #416501;
+    --cs-accent-on: #f5ead9;
+    --cs-accent-on-strong: #FFFDF8;
+    --cs-accent-tint: #1F2E0B;
+    --cs-accent-ink: #C5ED9C;
+  }
+}
 [data-theme="dark"][data-cs-element="moc"][data-cs-variant="forest"] {
   --cs-accent: #8EC27D;
   --cs-accent-bright: #B0D8A3;
   --cs-accent-strong: #061D00;
   --cs-accent-on: #f5ead9;
+  --cs-accent-on-strong: #FFFDF8;
   --cs-accent-tint: #193011;
   --cs-accent-ink: #B6DFA9;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][data-cs-element="moc"][data-cs-variant="forest"] {
+    --cs-accent: #8EC27D;
+    --cs-accent-bright: #B0D8A3;
+    --cs-accent-strong: #061D00;
+    --cs-accent-on: #f5ead9;
+    --cs-accent-on-strong: #FFFDF8;
+    --cs-accent-tint: #193011;
+    --cs-accent-ink: #B6DFA9;
+  }
+}
 [data-theme="dark"][data-cs-element="kim"][data-cs-variant="titanium"] {
   --cs-accent: #FEE5C7;
   --cs-accent-bright: #FBE8D2;
   --cs-accent-strong: #6B573E;
   --cs-accent-on: #f5ead9;
+  --cs-accent-on-strong: #FFFDF8;
   --cs-accent-tint: #37250B;
   --cs-accent-ink: #FBE8D2;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][data-cs-element="kim"][data-cs-variant="titanium"] {
+    --cs-accent: #FEE5C7;
+    --cs-accent-bright: #FBE8D2;
+    --cs-accent-strong: #6B573E;
+    --cs-accent-on: #f5ead9;
+    --cs-accent-on-strong: #FFFDF8;
+    --cs-accent-tint: #37250B;
+    --cs-accent-ink: #FBE8D2;
+  }
+}
 [data-theme="dark"][data-cs-element="kim"] {
   --cs-accent: #F3B958;
   --cs-accent-bright: #FDD89F;
   --cs-accent-strong: #795303;
   --cs-accent-on: #f5ead9;
+  --cs-accent-on-strong: #FFFDF8;
   --cs-accent-tint: #382503;
   --cs-accent-ink: #FDD89F;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][data-cs-element="kim"] {
+    --cs-accent: #F3B958;
+    --cs-accent-bright: #FDD89F;
+    --cs-accent-strong: #795303;
+    --cs-accent-on: #f5ead9;
+    --cs-accent-on-strong: #FFFDF8;
+    --cs-accent-tint: #382503;
+    --cs-accent-ink: #FDD89F;
+  }
+}
 [data-theme="dark"][data-cs-element="kim"][data-cs-variant="steel"] {
   --cs-accent: #CCB17E;
   --cs-accent-bright: #DFCBA5;
   --cs-accent-strong: #1F1400;
   --cs-accent-on: #f5ead9;
+  --cs-accent-on-strong: #FFFDF8;
   --cs-accent-tint: #362602;
   --cs-accent-ink: #E6D1AB;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][data-cs-element="kim"][data-cs-variant="steel"] {
+    --cs-accent: #CCB17E;
+    --cs-accent-bright: #DFCBA5;
+    --cs-accent-strong: #1F1400;
+    --cs-accent-on: #f5ead9;
+    --cs-accent-on-strong: #FFFDF8;
+    --cs-accent-tint: #362602;
+    --cs-accent-ink: #E6D1AB;
+  }
+}