@cyberskill/design 1.1.1 → 1.2.0

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/elements.css

@@ -5,10 +5,12 @@
  * 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.
+ * Text on -strong uses --cs-accent-on-strong (WCAG AA ≥4.5:1 light and dark).
  * Focus ring --cs-color-accent-ochre 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 {
@@ -16,6 +18,7 @@
   --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);
@@ -51,6 +54,7 @@
   --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);
@@ -62,6 +66,7 @@
   --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);
@@ -75,6 +80,7 @@
   --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);
@@ -90,6 +96,7 @@
   --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);
@@ -103,6 +110,7 @@
   --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);
@@ -116,6 +124,7 @@
   --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,6 +140,7 @@
   --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);
@@ -144,6 +154,7 @@
   --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);
@@ -157,6 +168,7 @@
   --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,6 +184,7 @@
   --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);
@@ -185,6 +198,7 @@
   --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);
@@ -198,6 +212,7 @@
   --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,6 +228,7 @@
   --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);
@@ -226,6 +242,7 @@
   --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);
@@ -239,6 +256,7 @@
   --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);
@@ -270,6 +288,7 @@
   --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;
 }
@@ -278,6 +297,7 @@
   --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;
 }
@@ -286,6 +306,7 @@
   --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;
 }
@@ -294,6 +315,7 @@
   --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;
 }
@@ -302,6 +324,7 @@
   --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;
 }
@@ -310,6 +333,7 @@
   --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;
 }
@@ -318,6 +342,7 @@
   --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;
 }
@@ -326,6 +351,7 @@
   --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;
 }
@@ -334,6 +360,7 @@
   --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;
 }
@@ -342,6 +369,7 @@
   --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;
 }
@@ -350,6 +378,7 @@
   --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;
 }
@@ -358,6 +387,7 @@
   --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;
 }
@@ -366,6 +396,7 @@
   --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;
 }
@@ -374,6 +405,7 @@
   --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;
 }
@@ -382,6 +414,7 @@
   --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;
 }

package/tokens/elevation.css

@@ -4,13 +4,19 @@
  * the material composition + classes live in base/glass.css.
  * Shadow values are warm (umber-tinted), taken from the shipped surfaces. */
 :root {
-  /* ---- Depth (z-index) ---- */
+  /* ---- Depth (z-index) ----
+   * Order (low → high): bg < section < card < nav < dropdown < overlay < modal < toast.
+   * Toasts intentionally stack above modals so save-confirmation feedback stays visible
+   * while a dialog is open (UX-009). Dropdown sits above sticky nav; overlay (scrims
+   * that are not modal-owned) sits between dropdown and modal. */
   --cs-depth-bg: 0;        /* @kind other */ /* page background / hero washes */
   --cs-depth-section: 5;   /* @kind other */ /* major sections (matte, no glass) */
   --cs-depth-card: 10;     /* @kind other */ /* cards/panels (Standard Glass) */
   --cs-depth-nav: 50;      /* @kind other */ /* sticky nav (Light Glass) */
+  --cs-depth-dropdown: 60; /* @kind other */ /* menus, combobox, datepicker pops */
+  --cs-depth-overlay: 80;  /* @kind other */ /* non-modal scrims / light overlays */
   --cs-depth-modal: 100;   /* @kind other */ /* modals, command palette (Heavy Glass) */
-  --cs-depth-toast: 200;   /* @kind other */ /* toasts, popovers, dropdowns (Heavy Glass) */
+  --cs-depth-toast: 200;   /* @kind other */ /* toasts above modals (Heavy Glass) */
 
   /* ---- Glass material scalars (blur / saturate / surface opacity) ---- */
   --cs-glass-whisper-blur: 8px;   --cs-glass-whisper-saturate: 110%; --cs-glass-whisper-opacity: 60%;

package/tokens/native/CSTokens.kt

@@ -1,6 +1,6 @@
 // CyberSkill Design System — native design tokens.
 // GENERATED from tokens/tokens.dtcg.json — do not hand-edit; regenerate on token change.
-// release v1.1.1 · source sha256 9386ad73cf23d458…
+// release v1.1.1 · source sha256 16b39bda3ee5b664…
 // conversions: rem→px at 16 · em→…Em relative doubles · rgba alpha→ARGB byte (round(a*255)) · durations in ms
 // dark element packs: see $extensions.overrides.elementsDark
 // provenance: tokens/provenance.json · parity gate: _audit/token-pipeline-test.html
@@ -28,6 +28,10 @@ object CSTokens {
   val colorBorderDefault = Color(0xFFE7D9C6)
   val colorLink = Color(0xFF6E3B0E)
   val colorLinkHover = Color(0xFF45210E)
+  val colorSemanticSuccessFg = Color(0xFFFFFFFF)
+  val colorSemanticDangerFg = Color(0xFFFFFFFF)
+  val colorSemanticWarningFg = Color(0xFFFFFFFF)
+  val colorSemanticInfoFg = Color(0xFFFFFFFF)
   val componentButtonPrimaryBg = Color(0xFF45210E)
   val componentButtonPrimaryFg = Color(0xFFFFFFFF)
   val componentButtonGap = 8.dp
@@ -52,6 +56,7 @@ object CSTokens {
   val componentTextfieldPaddingY = 10.dp
   val componentTextfieldPaddingX = 12.dp
   val componentTextfieldMinHeight = 44.dp
+  val focusRing = 3.dp
   val accent = Color(0xFFF4BA17)
   val accentStrong = Color(0xFFA47D17)
   val accentBright = Color(0xFFF4BA17)
@@ -61,12 +66,15 @@ object CSTokens {
   val accentGlow = Color(0x7AF4BA17)
   val accentGradA = Color(0xFFF4BA17)
   val accentGradB = Color(0xFFFCAF91)
+  val accentOnStrong = Color(0xFF1A1108)
   val depthBg = 0
   val depthSection = 5
   val depthCard = 10
   val depthNav = 50
   val depthModal = 100
   val depthToast = 200
+  val depthDropdown = 60
+  val depthOverlay = 80
   val glassWhisperBlur = 8.dp
   val glassWhisperSaturate = "110%"
   val glassWhisperOpacity = "60%"
@@ -116,6 +124,7 @@ object CSTokens {
   val breakpointXl = 1280.dp
   val breakpoint2xl = 1536.dp
   val containerMax = 1320.dp
+  val proseMeasure = 720.dp
   val fontFamilyUi = "Be Vietnam Pro, ui-sans-serif, system-ui, sans-serif"
   val fontFamilyDisplay = "Space Grotesk, Be Vietnam Pro, ui-sans-serif, system-ui, sans-serif"
   val fontFamilyMono = "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
@@ -127,6 +136,7 @@ object CSTokens {
   val fontLineHeightBody = 1.5f
   val fontLineHeightHeading = 1.35f
   val fontLineHeightTight = 1.15f
+  val fontSize2xs = 11.dp
   val fontSizeXs = 12.dp
   val fontSizeSm = 14.dp
   val fontSizeBase = 16.dp
@@ -145,6 +155,7 @@ object CSTokens {
   val textBodyLg = "var(--cs-font-size-md)"
   val textBody = "var(--cs-font-size-base)"
   val textSecondary = "var(--cs-font-size-sm)"
+  val textMicro = "var(--cs-font-size-2xs)"
   val textCaption = "var(--cs-font-size-xs)"
   val textEyebrow = "var(--cs-font-size-xs)"
   val letterSpacingTightEm = -0.01f
@@ -157,6 +168,10 @@ object CSTokens {
   val iconSm = 16.dp
   val iconMd = 20.dp
   val iconLg = 24.dp
+  val docInk = Color(0xFF1A1614)
+  val docSlate = Color(0xFF3F4C55)
+  val docFill = Color(0xFFFDE68A)
+  val docFillInk = Color(0xFF1A1614)
 
   // dark-theme color overrides
   val colorSurfacePageDark = Color(0xFF1A1108)
@@ -176,96 +191,115 @@ object CSTokens {
   val componentButtonPrimaryBgDark = Color(0xFFF4BA17)
   val componentButtonPrimaryFgDark = Color(0xFF1A1108)
   val componentTextfieldBorderDefaultDark = Color(0xFF5A4636)
+  val colorSemanticSuccessFgDark = Color(0xFF1A1108)
+  val colorSemanticDangerFgDark = Color(0xFF1A1108)
+  val colorSemanticWarningFgDark = Color(0xFF1A1108)
+  val colorSemanticInfoFgDark = Color(0xFF1A1108)
 
   // dark elemental accent packs (APCA-derived, v4.0.0)
   val accentThoSandDark = Color(0xFFF8E9C0)
   val accentBrightThoSandDark = Color(0xFFF6EBCC)
   val accentStrongThoSandDark = Color(0xFF665A37)
   val accentOnThoSandDark = Color(0xFFF5EAD9)
+  val accentOnStrongThoSandDark = Color(0xFFFFFDF8)
   val accentTintThoSandDark = Color(0xFF332701)
   val accentInkThoSandDark = Color(0xFFF6EBCC)
   val accentThoDark = Color(0xFFF4BA17)
   val accentBrightThoDark = Color(0xFFFEC42C)
   val accentStrongThoDark = Color(0xFF73560B)
   val accentOnThoDark = Color(0xFFF5EAD9)
+  val accentOnStrongThoDark = Color(0xFFFFFDF8)
   val accentTintThoDark = Color(0xFF352602)
   val accentInkThoDark = Color(0xFFFECD5E)
   val accentThoClayDark = Color(0xFFCDB07E)
   val accentBrightThoClayDark = Color(0xFFE4CDA8)
   val accentStrongThoClayDark = Color(0xFF1F1300)
   val accentOnThoClayDark = Color(0xFFF5EAD9)
+  val accentOnStrongThoClayDark = Color(0xFFFFFDF8)
   val accentTintThoClayDark = Color(0xFF372502)
   val accentInkThoClayDark = Color(0xFFE7D0AB)
   val accentHoaPlasmaDark = Color(0xFFFFE1D8)
   val accentBrightHoaPlasmaDark = Color(0xFFFCE6DF)
   val accentStrongHoaPlasmaDark = Color(0xFF6F5750)
   val accentOnHoaPlasmaDark = Color(0xFFF5EAD9)
+  val accentOnStrongHoaPlasmaDark = Color(0xFFFFFDF8)
   val accentTintHoaPlasmaDark = Color(0xFF38231C)
   val accentInkHoaPlasmaDark = Color(0xFFFCE6DF)
   val accentHoaDark = Color(0xFFFCAF91)
   val accentBrightHoaDark = Color(0xFFFED3C3)
   val accentStrongHoaDark = Color(0xFF8A4A30)
   val accentOnHoaDark = Color(0xFFF5EAD9)
+  val accentOnStrongHoaDark = Color(0xFFFFFDF8)
   val accentTintHoaDark = Color(0xFF411E0F)
   val accentInkHoaDark = Color(0xFFFED3C3)
   val accentHoaLavaDark = Color(0xFFE8A683)
   val accentBrightHoaLavaDark = Color(0xFFF8C4AA)
   val accentStrongHoaLavaDark = Color(0xFF280D00)
   val accentOnHoaLavaDark = Color(0xFFF5EAD9)
+  val accentOnStrongHoaLavaDark = Color(0xFFFFFDF8)
   val accentTintHoaLavaDark = Color(0xFF401F0B)
   val accentInkHoaLavaDark = Color(0xFFFBC7AD)
   val accentThuyMistDark = Color(0xFFC0F5FC)
   val accentBrightThuyMistDark = Color(0xFFCDF4F9)
   val accentStrongThuyMistDark = Color(0xFF316167)
   val accentOnThuyMistDark = Color(0xFFF5EAD9)
+  val accentOnStrongThuyMistDark = Color(0xFFFFFDF8)
   val accentTintThuyMistDark = Color(0xFF022F34)
   val accentInkThuyMistDark = Color(0xFFCDF4F9)
   val accentThuyDark = Color(0xFF2EDBF7)
   val accentBrightThuyDark = Color(0xFF99EEFF)
   val accentStrongThuyDark = Color(0xFF046270)
   val accentOnThuyDark = Color(0xFFF5EAD9)
+  val accentOnStrongThuyDark = Color(0xFFFFFDF8)
   val accentTintThuyDark = Color(0xFF032F36)
   val accentInkThuyDark = Color(0xFF99EEFF)
   val accentThuyOceanDark = Color(0xFF82BCCD)
   val accentBrightThuyOceanDark = Color(0xFFABD6E3)
   val accentStrongThuyOceanDark = Color(0xFF011A21)
   val accentOnThuyOceanDark = Color(0xFFF5EAD9)
+  val accentOnStrongThuyOceanDark = Color(0xFFFFFDF8)
   val accentTintThuyOceanDark = Color(0xFF002F3A)
   val accentInkThuyOceanDark = Color(0xFFAED9E6)
   val accentMocBambooDark = Color(0xFFE1F1C8)
   val accentBrightMocBambooDark = Color(0xFFE5F1D2)
   val accentStrongMocBambooDark = Color(0xFF54603E)
   val accentOnMocBambooDark = Color(0xFFF5EAD9)
+  val accentOnStrongMocBambooDark = Color(0xFFFFFDF8)
   val accentTintMocBambooDark = Color(0xFF232D0B)
   val accentInkMocBambooDark = Color(0xFFE5F1D2)
   val accentMocDark = Color(0xFFA3D768)
   val accentBrightMocDark = Color(0xFFC5ED9C)
   val accentStrongMocDark = Color(0xFF416501)
   val accentOnMocDark = Color(0xFFF5EAD9)
+  val accentOnStrongMocDark = Color(0xFFFFFDF8)
   val accentTintMocDark = Color(0xFF1F2E0B)
   val accentInkMocDark = Color(0xFFC5ED9C)
   val accentMocForestDark = Color(0xFF8EC27D)
   val accentBrightMocForestDark = Color(0xFFB0D8A3)
   val accentStrongMocForestDark = Color(0xFF061D00)
   val accentOnMocForestDark = Color(0xFFF5EAD9)
+  val accentOnStrongMocForestDark = Color(0xFFFFFDF8)
   val accentTintMocForestDark = Color(0xFF193011)
   val accentInkMocForestDark = Color(0xFFB6DFA9)
   val accentKimTitaniumDark = Color(0xFFFEE5C7)
   val accentBrightKimTitaniumDark = Color(0xFFFBE8D2)
   val accentStrongKimTitaniumDark = Color(0xFF6B573E)
   val accentOnKimTitaniumDark = Color(0xFFF5EAD9)
+  val accentOnStrongKimTitaniumDark = Color(0xFFFFFDF8)
   val accentTintKimTitaniumDark = Color(0xFF37250B)
   val accentInkKimTitaniumDark = Color(0xFFFBE8D2)
   val accentKimDark = Color(0xFFF3B958)
   val accentBrightKimDark = Color(0xFFFDD89F)
   val accentStrongKimDark = Color(0xFF795303)
   val accentOnKimDark = Color(0xFFF5EAD9)
+  val accentOnStrongKimDark = Color(0xFFFFFDF8)
   val accentTintKimDark = Color(0xFF382503)
   val accentInkKimDark = Color(0xFFFDD89F)
   val accentKimSteelDark = Color(0xFFCCB17E)
   val accentBrightKimSteelDark = Color(0xFFDFCBA5)
   val accentStrongKimSteelDark = Color(0xFF1F1400)
   val accentOnKimSteelDark = Color(0xFFF5EAD9)
+  val accentOnStrongKimSteelDark = Color(0xFFFFFDF8)
   val accentTintKimSteelDark = Color(0xFF362602)
   val accentInkKimSteelDark = Color(0xFFE6D1AB)
 }