FIDEFE-4640 - Add MPL license and how to edit file header (mozilla#7)

* FIDEFE-4640 - Add MPL license and how to edit file header

* Add custom file header function that deals with the MPL and how to edit

toolkit/themes/shared/design-system/build/css/tokens-shared.css

@@ -1,3 +1,14 @@
+/**
+ * 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/.
+ */
+
+/**
+ * Do not edit this file directly, instead modify design-tokens.json
+ * and run `npm run build` to see your changes.
+ */
+
 :root {
   --text-color-deemphasized: color-mix(in srgb, currentColor 60%, transparent);
   --color-white: #ffffff;

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

@@ -7,6 +7,31 @@
 const StyleDictionary = require("style-dictionary");
 const { formattedVariables } = StyleDictionary.formatHelpers;
 
+/**
+ * Adds the Mozilla Public License header in one comment and
+ * how to make changes in the generated output files via the
+ * design-tokens.json file in another comment.
+ *
+ * @return {String} Formatted comment header string
+ */
+let customFileHeader = () => {
+  let licenseString = [
+    "/**",
+    " * 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/.",
+    " */"
+  ].join("\n");
+
+  let commentString = [
+    "/**",
+    " * Do not edit this file directly, instead modify design-tokens.json",
+    " * and run `npm run build` to see your changes.",
+    " */"
+  ].join("\n");
+  return [licenseString + "\n\n" + commentString + "\n\n"];
+}
+
 const MEDIA_QUERY_PROPERTY_MAP = {
   "forced-colors": "forcedColors",
   "prefers-contrast": "prefersContrast",
@@ -24,6 +49,7 @@ const MEDIA_QUERY_PROPERTY_MAP = {
  */
 function hcmFormatter(args) {
   return (
+    customFileHeader() +
     formatTokens({ args }) +
     formatTokens({ mediaQuery: "prefers-contrast", args }) +
     formatTokens({ mediaQuery: "forced-colors", args })
@@ -142,7 +168,6 @@ module.exports = {
           format: "css/variables/hcm",
           options: {
             outputReferences: true,
-            showFileHeader: false,
           },
         },
       ],