@adobe/spectrum-tokens 12.0.0-beta.9 → 12.0.0

package/tasks/buildManifest.js

@@ -0,0 +1,8 @@
+import glob from "glob-promise";
+import { writeFile } from "fs/promises";
+
+const manifestFileName = "manifest.json";
+const files = await glob("src/**/*.json");
+
+await writeFile(manifestFileName, JSON.stringify(files, null, 2));
+console.log(`Wrote ${manifestFileName} with ${files.length} files.`);

package/tasks/buildSpectrumTokens.js

@@ -0,0 +1,58 @@
+/*
+Copyright 2022 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import StyleDictionary from "style-dictionary";
+import {
+  JsonSetsFormatter,
+  NameKebabTransfom,
+  DroverJsonFormatter,
+  AttributeSetsTransform,
+} from "style-dictionary-sets";
+
+StyleDictionary.registerTransform(AttributeSetsTransform);
+StyleDictionary.registerTransform(NameKebabTransfom);
+StyleDictionary.registerFormat(JsonSetsFormatter);
+StyleDictionary.registerFormat(DroverJsonFormatter);
+
+StyleDictionary.extend({
+  source: ["src/**/*.json"],
+  platforms: {
+    JSON: {
+      buildPath: "dist/json/",
+      transforms: [NameKebabTransfom.name],
+      files: [
+        {
+          destination: "variables.json",
+          format: JsonSetsFormatter.name,
+          options: {
+            showFileHeader: false,
+            outputReferences: true,
+          },
+        },
+      ],
+    },
+    Drover: {
+      buildPath: "dist/json/",
+      transforms: [AttributeSetsTransform.name, NameKebabTransfom.name],
+      files: [
+        {
+          destination: "drover.json",
+          format: "drover/json/sets",
+          options: {
+            showFileHeader: false,
+            outputReferences: true,
+          },
+        },
+      ],
+    },
+  },
+}).buildAllPlatforms();

package/tasks/deprecateExpress.js

@@ -0,0 +1,11 @@
+import glob from "glob-promise";
+import { readFile, writeFile } from "fs/promises";
+import augmentExpressTokens from "./lib/augmentExpressTokens.js";
+
+const files = await glob("src/**/*.json");
+files.forEach(async (fileName) => {
+  const fileTokens = JSON.parse(await readFile(fileName, "utf8"));
+  const result = augmentExpressTokens(fileTokens);
+  await writeFile(fileName, JSON.stringify(result, null, 2));
+  console.log(`Updated ${fileName}.`);
+});

package/tasks/diff.js

@@ -0,0 +1,106 @@
+import { access, readFile, writeFile } from "fs/promises";
+import fetch from "node-fetch";
+import { detailedDiff, diff } from "deep-object-diff";
+
+const tag = "beta";
+const tokenPath = "dist/json/variables.json";
+
+run()
+  .then(() => {
+    process.exit();
+  })
+  .catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
+
+async function run() {
+  const [newTokens, oldTokens] = await Promise.all([
+    getNewTokens(),
+    getOldTokens(),
+  ]);
+  const diffResult = detailedDiff(oldTokens, newTokens);
+
+  calculatePossibleRenames(diffResult, oldTokens, newTokens);
+
+  logResultCategory(diffResult, "added");
+  logResultCategory(diffResult, "deleted");
+  logResultCategory(diffResult, "updated", "Token values updated");
+  logResultCategory(diffResult, "possiblyRenamed", "Tokens possibly renamed");
+}
+
+async function getNewTokens() {
+  try {
+    await access(tokenPath);
+    return JSON.parse(await readFile(tokenPath, { encoding: "utf8" }));
+  } catch {
+    console.error("cannot access");
+  }
+}
+
+async function getOldTokens() {
+  try {
+    const response = await fetch(
+      `https://unpkg.com/@adobe/spectrum-tokens@${tag}/${tokenPath}`
+    );
+    console.log(`Fetched ${response.url}`);
+    return await response.json();
+  } catch {
+    console.error("cannot access");
+  }
+}
+
+function calculatePossibleRenames(diffResult, oldTokens, newTokens) {
+  diffResult.possiblyRenamed = {};
+  Object.keys(diffResult.deleted).forEach((deletedTokenName) => {
+    const oldTokenValue = oldTokens[deletedTokenName];
+    const allValueMatches = [];
+    Object.keys(diffResult.added).forEach((addedTokenName, i) => {
+      const newTokenValue = newTokens[addedTokenName];
+      if (Object.keys(diff(oldTokenValue, newTokenValue)).length === 0) {
+        allValueMatches.push(addedTokenName);
+      }
+    });
+    if (allValueMatches.length > 0) {
+      diffResult.possiblyRenamed[deletedTokenName] = allValueMatches;
+    }
+  });
+}
+
+function logResultCategory(diffResult, categoryKey, msg) {
+  const results = diffResult[categoryKey];
+  const resultCount = Object.keys(results).length;
+  if (!msg) {
+    msg = `Tokens ${categoryKey}`;
+  }
+  if (resultCount > 0) {
+    console.log(`\n*${msg} (${resultCount}):*`);
+    switch (categoryKey) {
+      case "possiblyRenamed":
+        Object.keys(results)
+          .sort()
+          .forEach((oldTokenName, i) => {
+            if (
+              Array.isArray(results[oldTokenName]) &&
+              results[oldTokenName].length > 1
+            ) {
+              console.log(
+                `  - Old name: \`${oldTokenName}\`, new name options:`
+              );
+              results[oldTokenName].forEach((newTokenName) =>
+                console.log(`    - \`${newTokenName}\``)
+              );
+            } else {
+              console.log(
+                `  - \`${oldTokenName}\` -> \`${results[oldTokenName][0]}\``
+              );
+            }
+          });
+        break;
+      default:
+        Object.keys(results)
+          .sort()
+          .forEach((tokenName, i) => console.log(`  - \`${tokenName}\``));
+    }
+  }
+}

package/tasks/lib/augmentExpressTokens.js

@@ -0,0 +1,40 @@
+const deprecationObj = {
+  deprecated: true,
+  deprecated_comment:
+    "Express will merge with Spectrum with the release of Spectrum 2.",
+};
+
+const findExpressValue = (tokenObj) => {
+  if (typeof tokenObj === "object" && tokenObj !== null) {
+    if (tokenObj.hasOwnProperty("value")) {
+      return {
+        ...tokenObj,
+        ...deprecationObj,
+      };
+    } else {
+      const result = {};
+      Object.keys(tokenObj).forEach((tokenName) => {
+        result[tokenName] = findExpressValue(tokenObj[tokenName]);
+      });
+      return result;
+    }
+  }
+};
+
+const augmentExpressTokens = (tokenObj) => {
+  if (typeof tokenObj === "object" && tokenObj !== null) {
+    const result = {};
+    Object.keys(tokenObj).forEach((tokenName) => {
+      if (tokenName === "express") {
+        result[tokenName] = findExpressValue(tokenObj[tokenName]);
+      } else {
+        result[tokenName] = augmentExpressTokens(tokenObj[tokenName]);
+      }
+    });
+    return result;
+  } else {
+    return tokenObj;
+  }
+};
+
+export default augmentExpressTokens;

package/commitlint.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ["@commitlint/config-conventional"],
-};

package/tokens/color-alias.json

@@ -1,132 +0,0 @@
-{
-  "transparent-white-200": {
-    "value": "rgba(255, 255, 255, 0.10)"
-  },
-  "transparent-white-300": {
-    "value": "rgba(255, 255, 255, 0.25)"
-  },
-  "transparent-white-400": {
-    "value": "rgba(255, 255, 255, 0.40)"
-  },
-  "transparent-white-500": {
-    "value": "rgba(255, 255, 255, 0.55)"
-  },
-  "transparent-white-600": {
-    "value": "rgba(255, 255, 255, 0.70)"
-  },
-  "transparent-white-700": {
-    "value": "rgba(255, 255, 255, 0.80)"
-  },
-  "transparent-white-800": {
-    "value": "rgba(255, 255, 255, 0.90)"
-  },
-  "transparent-white-900": {
-    "value": "rgb(255, 255, 255)"
-  },
-
-  "transparent-black-200": {
-    "value": "rgba(0, 0, 0, 0.10)"
-  },
-  "transparent-black-300": {
-    "value": "rgba(0, 0, 0, 0.25)"
-  },
-  "transparent-black-400": {
-    "value": "rgba(0, 0, 0, 0.40)"
-  },
-  "transparent-black-500": {
-    "value": "rgba(0, 0, 0, 0.55)"
-  },
-  "transparent-black-600": {
-    "value": "rgba(0, 0, 0, 0.70)"
-  },
-  "transparent-black-700": {
-    "value": "rgba(0, 0, 0, 0.80)"
-  },
-  "transparent-black-800": {
-    "value": "rgba(0, 0, 0, 0.90)"
-  },
-  "transparent-black-900": {
-    "value": "rgb(0, 0, 0)"
-  },
-  "focus-ring-color": {
-    "value": "{blue-800}"
-  },
-  "focus-ring-static-white-color": {
-    "value": "{black}"
-  },
-  "focus-ring-static-black-color": {
-    "value": "{white}"
-  },
-  "neutral-content-color": {
-    "value": "{gray-800}"
-  },
-  "neutral-content-color-hover": {
-    "value": "{gray-900}"
-  },
-  "neutral-content-color-down": {
-    "value": "{gray-900}"
-  },
-  "neutral-content-color-key-focus": {
-    "value": "{gray-900}"
-  },
-  "neutral-subdued-content-color": {
-    "default": {
-      "value": "{gray-700}"
-    },
-    "hover": {
-      "value": "{gray-800}"
-    },
-    "down": {
-      "value": "{gray-900}"
-    },
-    "key-focus": {
-      "value": "{gray-800}"
-    }
-  },
-  "accent-content-color": {
-    "value": "{accent-color-900}"
-  },
-  "accent-content-color-hover": {
-    "value": "{accent-color-1000}"
-  },
-  "accent-content-color-down": {
-    "value": "{accent-color-1100}"
-  },
-  "accent-content-color-key-focus": {
-    "value": "{accent-color-1000}"
-  },
-  "negative-content-color": {
-    "value": "{negative-color-900}"
-  },
-  "negative-content-color-hover": {
-    "value": "{negative-color-1000}"
-  },
-  "negative-content-color-down": {
-    "value": "{negative-color-1100}"
-  },
-  "negative-content-color-key-focus": {
-    "value": "{negative-color-1000}"
-  },
-  "disabled-content-color": {
-    "value": "{gray-400}"
-  },
-  "disabled-content-static-white-color": {
-    "value": "{transparent-white-500}"
-  },
-  "disabled-content-static-black-color": {
-    "value": "{transparent-black-500}"
-  },
-  "drop-shadow-color": {
-    "sets": {
-      "light": {
-        "value": "rgba(0, 0, 0, 0.15)"
-      },
-      "dark": {
-        "value": "rgba(0, 0, 0, 0.50)"
-      },
-      "darkest": {
-        "value": "rgba(0, 0, 0, 0.80)"
-      }
-    }
-  }
-}