diff --git a/toolkit/themes/shared/design-system/build/css/variables.css b/toolkit/themes/shared/design-system/build/css/light-dark.css
similarity index 52%
rename from toolkit/themes/shared/design-system/build/css/variables.css
rename to toolkit/themes/shared/design-system/build/css/light-dark.css
index 8d20dc5964eca..ece0f754a51de 100644
--- a/toolkit/themes/shared/design-system/build/css/variables.css
+++ b/toolkit/themes/shared/design-system/build/css/light-dark.css
@@ -1,51 +1,45 @@
 /**
  * Do not edit directly
- * Generated on Fri, 12 Jan 2024 19:25:11 GMT
+ * Generated on Wed, 24 Jan 2024 16:20:00 GMT
  */
 
 :root {
-  --color-background-critical-light: #ffe8e8;
-  --color-background-critical-dark: #690f22;
-  --color-background-information-light: #deeafc;
-  --color-background-information-dark: #003070;
-  --color-background-success-light: #d8eedc;
-  --color-background-success-dark: #5a3100;
-  --color-background-warning-light: #ffebcd;
-  --color-background-warning-dark: #003070;
-  --color-black-a10: rgba(0, 0, 0, 0.1);
-  --color-blue-30: #73a7f3;
-  --color-blue-50: #0060df;
-  --color-blue-60: #0250bb;
-  --color-blue-70: #054096;
-  --color-blue-80: #003070;
-  --color-blue-05: #deeafc;
-  --color-cyan-20: #aaf2ff;
-  --color-cyan-30: #aaf2ff;
-  --color-cyan-50: #00ddff;
-  --color-gray-50: #bfbfc9;
-  --color-gray-60: #8f8f9d;
-  --color-gray-70: #5b5b66;
-  --color-gray-80: #23222b;
-  --color-gray-90: #1c1b22;
-  --color-gray-100: #15141a;
-  --color-gray-05: #fbfbfe;
-  --color-green-30: #4dbc87;
-  --color-green-50: #017a40;
-  --color-green-80: #004725;
-  --color-green-05: #d8eedc;
-  --color-red-30: #f37f98;
-  --color-red-50: #d7264c;
-  --color-red-80: #690f22;
-  --color-red-05: #ffe8e8;
-  --color-yellow-30: #e49c49;
-  --color-yellow-50: #cd411e;
-  --color-yellow-80: #5a3100;
+  --text-deemphasized: color-mix(in srgb, currentColor 60%, transparent);
+  --text-platform: currentColor;
+  --text-color: CanvasText;
+  --color-white: #ffffff;
   --color-yellow-05: #ffebcd;
-  --text-color-prefers-contrast: CanvasText;
-  --text-color-deemphasized-prefers-contrast: inherit;
-  --text-color-brand-light: #15141a;
-  --text-color-brand-dark: #fbfbfe;
-  --text-color-brand-deemphasized-light: color-mix(in srgb, currentColor 69%, transparent);
-  --text-color-brand-deemphasized-dark: color-mix(in srgb, currentColor 75%, transparent);
-  --platform: currentColor;
+  --color-yellow-80: #5a3100;
+  --color-yellow-50: #cd411e;
+  --color-yellow-30: #e49c49;
+  --color-red-05: #ffe8e8;
+  --color-red-80: #690f22;
+  --color-red-50: #d7264c;
+  --color-red-30: #f37f98;
+  --color-green-05: #d8eedc;
+  --color-green-80: #004725;
+  --color-green-50: #017a40;
+  --color-green-30: #4dbc87;
+  --color-gray-05: #fbfbfe;
+  --color-gray-100: #15141a;
+  --color-gray-90: #1c1b22;
+  --color-gray-80: #23222b;
+  --color-gray-70: #5b5b66;
+  --color-gray-60: #8f8f9d;
+  --color-gray-50: #bfbfc9;
+  --color-cyan-50: #00ddff;
+  --color-cyan-30: #aaf2ff;
+  --color-cyan-20: #aaf2ff;
+  --color-blue-05: #deeafc;
+  --color-blue-80: #003070;
+  --color-blue-70: #054096;
+  --color-blue-60: #0250bb;
+  --color-blue-50: #0060df;
+  --color-blue-30: #73a7f3;
+  --color-black-a10: rgba(0, 0, 0, 0.1);
+  --text-brand: light-dark(var(--color-gray-100), var(--color-gray-05));
+  --color-background-warning: light-dark(var(--color-yellow-05), var(--color-blue-80));
+  --color-background-success: light-dark(var(--color-green-05), var(--color-yellow-80));
+  --color-background-information: light-dark(var(--color-blue-05), var(--color-blue-80));
+  --color-background-critical: light-dark(var(--color-red-05), var(--color-red-80));
 }
diff --git a/toolkit/themes/shared/design-system/config.js b/toolkit/themes/shared/design-system/config.js
new file mode 100644
index 0000000000000..ecef246faab17
--- /dev/null
+++ b/toolkit/themes/shared/design-system/config.js
@@ -0,0 +1,43 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* eslint-env node */
+
+const StyleDictionary = require("style-dictionary");
+
+module.exports = {
+  source: ["design-tokens.json"],
+  transform: {
+    lightDarkTransform: {
+      type: "value",
+      transitive: true,
+      name: "lightDarkTransform",
+      matcher: token => token.original.value && token.original.dark,
+      transformer: token => {
+        let lightDarkValue = `light-dark(${token.original.value}, ${token.original.dark})`;
+        // modify the original value and everything works like magic
+        token.original.value = lightDarkValue;
+        return lightDarkValue;
+      },
+    },
+  },
+  platforms: {
+    css: {
+      transforms: [
+        ...StyleDictionary.transformGroup.css,
+        "lightDarkTransform",
+      ],
+      buildPath: "build/css/",
+      files: [
+        {
+          destination: "light-dark.css",
+          format: "css/variables",
+          options: {
+            outputReferences: true,
+          },
+        },
+      ],
+    },
+  },
+};
diff --git a/toolkit/themes/shared/design-system/config.json b/toolkit/themes/shared/design-system/config.json
deleted file mode 100644
index e533391e1daab..0000000000000
--- a/toolkit/themes/shared/design-system/config.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "source": ["design-tokens.json"],
-  "platforms": {
-    "css": {
-      "transformGroup": "css",
-      "buildPath": "build/css/",
-      "files": [{
-        "destination": "variables.css",
-        "format": "css/variables"
-      }]
-    }
-  }
-}
diff --git a/toolkit/themes/shared/design-system/design-tokens.json b/toolkit/themes/shared/design-system/design-tokens.json
index 6dcf3f1830be7..ecf7899800864 100644
--- a/toolkit/themes/shared/design-system/design-tokens.json
+++ b/toolkit/themes/shared/design-system/design-tokens.json
@@ -1,39 +1,5 @@
 {
   "color": {
-    "background": {
-      "critical": {
-        "light": {
-          "value": "{color.red.05}"
-        },
-        "dark": {
-          "value": "{color.red.80}"
-        }
-      },
-      "information": {
-        "light": {
-          "value": "{color.blue.05}"
-        },
-        "dark": {
-          "value": "{color.blue.80}"
-        }
-      },
-      "success": {
-        "light": {
-          "value": "{color.green.05}"
-        },
-        "dark": {
-          "value": "{color.yellow.80}"
-        }
-      },
-      "warning": {
-        "light": {
-          "value": "{color.yellow.05}"
-        },
-        "dark": {
-          "value": "{color.blue.80}"
-        }
-      }
-    },
     "black": {
       "a10": {
         "value": "rgba(0,0,0,0.1)"
@@ -135,40 +101,42 @@
         "value": "#5a3100"
       }
     },
-    "white": "#ffffff"
-  },
-  "text": {
-    "color": {
-      "prefers-contrast": {
-        "value": "CanvasText"
-      },
-      "deemphasized": {
-        "prefers-contrast": {
-          "value": "inherit"
-        }
-      },
-      "brand": {
-        "light": {
-          "value": "{color.gray.100}"
-        },
-        "dark": {
-          "value": "{color.gray.05}"
-        },
-        "deemphasized": {
-          "light": {
-            "value": "color-mix(in srgb, currentColor 69%, transparent)"
-          },
-          "dark": {
-            "value": "color-mix(in srgb, currentColor 75%, transparent)"
-          }
-        }
+    "white": {
+      "value": "#ffffff"
+    },
+    "background": {
+      "critical": {
+        "value": "{color.red.05}",
+        "dark": "{color.red.80}"
+      },
+      "information": {
+        "value": "{color.blue.05}",
+        "dark": "{color.blue.80}"
+      },
+      "success": {
+        "value": "{color.green.05}",
+        "dark": "{color.yellow.80}"
+      },
+      "warning": {
+        "value": "{color.yellow.05}",
+        "dark": "{color.blue.80}"
       }
     }
   },
-  "platform": {
-    "value": "currentColor",
+  "text": {
+    "color": {
+      "value": "CanvasText"
+    },
+    "brand": {
+      "value": "{color.gray.100}",
+      "dark": "{color.gray.05}"
+    },
+    "platform": {
+      "value": "currentColor"
+    },
     "deemphasized": {
-      "value": "color-mix(in srgb, currentColor 60%, transparent)"
+      "value": "color-mix(in srgb, currentColor 60%, transparent)",
+      "prefersContrastValue": "inherit"
     }
   }
 }