FIDEFE-4623 - Add light-dark transformer for generating web CSS (mozi…

…lla#2)

* FIDEFE-4623 - Add CSS formatter for converting tokens to light-dark() calls

I originally thought we would be able to use a transformer to handle
this case, but outputting references causes my transformer to fail.
Because of this, I switched to using a custom CSS formatter and adding
the variable references in this formatter.

Additionally, I also switched over to using config.js instead of
config.json using PR FirefoxUX#3 as a starting point.

I also changed the design tokens JSON format to fit what I needed for
the light-dark formatting. I'll need to consolidate my changes with the
changes in PR FirefoxUX#3, but wanted to get this PR updated.

* Remove build.js, use css/variables formatter, update tokens structure

This removes the build.js file in favor of using config.js (which
requires `style-dictionary build` to build our files). I also removed
the custom file formatting code in favor of the included css/variables
formatter. Lastly, I updated the tokens structure so instead of
"darkValue", we use "dark".

Most likely the structure of the tokens file will change again, but
I'll create a new PR with those proposed changes.

* Restore custom file formatting, simplify ref logic.

So we can't use the "css/variables" built-in formatter, otherwise we'll
lose our light-dark value. I reverted those changes back to the
mappedValues loop so that we maintain the light-dark formatting.

I additionally sorted the token so that referenced tokens come after
the referenced definitions. I don't think we have to do this for CSS,
but it does make the generated CSS a little easier to follow in my
opinion.

* Remove light-dark formatter and replace with transformer.

We can greatly simplify the config.js file by doing two things:
1. Use a transformer for dealing with light-dark.
2. In this transformer, modify the original value of the token.

By modifying the value of the original token, we are able to take
advantage of the built-in css/variables formatting and so we don't need
custom CSS file formatting.

Additionally, we can use ...StyleDictionary.transformGroup["group_name"]
to get the individual transforms of a group. By doing this we can extend
an existing group as seen in this patch.

* fix eslint error

toolkit/themes/shared/design-system/build/css/variables.css → 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));
 }

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,
+          },
+        },
+      ],
+    },
+  },
+};

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"
     }
   }
 }