FIDEFE-4643 - Use value object in design-tokens.json

toolkit/themes/shared/design-system/config.js

@@ -1,3 +1,4 @@
+
 /* 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/. */
@@ -9,22 +10,34 @@ const StyleDictionary = require("style-dictionary");
 module.exports = {
   source: ["design-tokens.json"],
   transform: {
+    defaultTransform: {
+      type: "value",
+      transitive: true,
+      name: "defaultTransform",
+      matcher: token => token.original.value.default,
+      transformer: token => token.original.value.default
+    },
     lightDarkTransform: {
       type: "value",
       transitive: true,
       name: "lightDarkTransform",
-      matcher: token => token.original.value && token.original.dark,
+      matcher: token => token.original.value.light && token.original.value.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;
+        return `light-dark(${token.original.value.light}, ${token.original.value.dark})`;
       },
     },
   },
   platforms: {
     css: {
-      transforms: [...StyleDictionary.transformGroup.css, "lightDarkTransform"],
+      // The ordering of transforms matter, so if we encountered
+      // "light", "dark", and "default" in the value object then
+      // this ordering would ensure that the "default" value is
+      // used to generate the token's value.
+      transforms: [
+        ...StyleDictionary.transformGroup.css,
+        "lightDarkTransform",
+        "defaultTransform",
+      ],
       buildPath: "build/css/",
       files: [
         {

toolkit/themes/shared/design-system/design-tokens.json

@@ -106,20 +106,28 @@
     },
     "background": {
       "critical": {
-        "value": "{color.red.05}",
-        "dark": "{color.red.80}"
+        "value": {
+          "light": "{color.red.05}",
+          "dark": "{color.red.80}"
+        }
       },
       "information": {
-        "value": "{color.blue.05}",
-        "dark": "{color.blue.80}"
+        "value": {
+          "light": "{color.blue.05}",
+          "dark": "{color.blue.80}"
+        }
       },
       "success": {
-        "value": "{color.green.05}",
-        "dark": "{color.yellow.80}"
+        "value": {
+          "light": "{color.green.05}",
+          "dark": "{color.yellow.80}"
+        }
       },
       "warning": {
-        "value": "{color.yellow.05}",
-        "dark": "{color.blue.80}"
+        "value": {
+          "light": "{color.yellow.05}",
+          "dark": "{color.blue.80}"
+        }
       }
     }
   },
@@ -128,15 +136,19 @@
       "value": "CanvasText"
     },
     "brand": {
-      "value": "{color.gray.100}",
-      "dark": "{color.gray.05}"
+      "value": {
+        "light": "{color.gray.100}",
+        "dark": "{color.gray.05}"
+      }
     },
     "platform": {
       "value": "currentColor"
     },
     "deemphasized": {
-      "value": "color-mix(in srgb, currentColor 60%, transparent)",
-      "prefersContrastValue": "inherit"
+      "value": {
+        "default": "color-mix(in srgb, currentColor 60%, transparent)",
+        "prefersContrast": "inherit"
+      }
     }
   }
 }