@servicetitan/hammer-token 2.3.0 → 2.5.0

package/config.js

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable @typescript-eslint/no-require-imports */
 const StyleDictionary = require("style-dictionary");
 const fs = require("fs-extra");
 const {
@@ -15,8 +15,8 @@ StyleDictionary.registerFormat({
   formatter: function ({ dictionary }) {
     return dictionary.allTokens
       .map((token) => {
-        let value = token.value;
-        let name = `${token.name.replace("-default", "")}`;
+        const value = token.value;
+        const name = `${token.name.replace("-default", "")}`;
         if (token.name.includes("font-family"))
           return `$${name}: var(--${name}, ${value});`;
         if (token.attributes.appearance) {
@@ -50,8 +50,8 @@ StyleDictionary.registerFormat({
         return isColor;
       })
       .map((token) => {
-        let value = token.value;
-        let name = `${token.name.replace("-default", "")}`;
+        const value = token.value;
+        const name = `${token.name.replace("-default", "")}`;
         return `  ${name}: ${value},`;
       })
       .join(`\n`);
@@ -67,8 +67,8 @@ StyleDictionary.registerFormat({
         return isColor;
       })
       .map((token) => {
-        let value = token.value;
-        let name = `${token.name.replace("-default", "")}`;
+        const value = token.value;
+        const name = `${token.name.replace("-default", "")}`;
         if (token.attributes.appearance) {
           return `  ${name}: ${token.attributes.appearance.dark.value},`;
         }
@@ -87,8 +87,8 @@ StyleDictionary.registerFormat({
         return !isColor;
       })
       .map((token) => {
-        let value = token.value;
-        let name = `${token.name.replace("-default", "")}`;
+        const value = token.value;
+        const name = `${token.name.replace("-default", "")}`;
         if (token.name.includes("font-family")) return `  ${name}: "${value}",`;
         return `  ${name}: ${value},`;
       })
@@ -113,8 +113,8 @@ StyleDictionary.registerFormat({
   formatter: function ({ dictionary }) {
     const vars = dictionary.allTokens
       .map((token) => {
-        let value = token.value;
-        let name = `${token.name.replace("-default", "")}`;
+        const value = token.value;
+        const name = `${token.name.replace("-default", "")}`;
         if (token.name.includes("font-family")) return `  ${name}: "${value}",`;
         return `  ${name}: ${value},`;
       })
@@ -130,24 +130,24 @@ StyleDictionary.registerFormat({
     const light = dictionary.allTokens
       .filter((token) => !!token.attributes.appearance)
       .map((token) => {
-        let value = JSON.stringify(token.value);
-        let name = token.name.replace("Default", "");
+        const value = JSON.stringify(token.value);
+        const name = token.name.replace("Default", "");
         return `\t${name}: ${value}`;
       })
       .join(`,\n`);
     const dark = dictionary.allTokens
       .filter((token) => !!token.attributes.appearance)
       .map((token) => {
-        let value = JSON.stringify(token.attributes.appearance.dark.value);
-        let name = token.name.replace("Default", "");
+        const value = JSON.stringify(token.attributes.appearance.dark.value);
+        const name = token.name.replace("Default", "");
         return `\t${name}: ${value}`;
       })
       .join(`,\n`);
     const common = dictionary.allTokens
       .filter((token) => !token.attributes.appearance)
       .map((token) => {
-        let value = JSON.stringify(token.value);
-        let name = token.name.replace("Default", "");
+        const value = JSON.stringify(token.value);
+        const name = token.name.replace("Default", "");
         return `\t${name}: ${value}`;
       })
       .join(`,\n`);
@@ -160,8 +160,8 @@ StyleDictionary.registerFormat({
   formatter: function ({ dictionary }) {
     return dictionary.allTokens
       .map((token) => {
-        let value = token.value;
-        let name = `${token.name.replace("Default", "")}`;
+        const value = token.value;
+        const name = `${token.name.replace("Default", "")}`;
         if (token.attributes.appearance) {
           return `export const ${name} = {
   value: "${value}",
@@ -180,88 +180,91 @@ StyleDictionary.registerFormat({
   },
 });
 
-StyleDictionary.registerFormat({
-  name: `custom/CSSUtils/All`,
-  formatter: function ({ dictionary }) {
-    const colorTokens = dictionary.allTokens
-      .map((token) => {
-        let value = getVarValue(dictionary, token);
-        let name = `${token.name.replace("Default", "")}`;
-
-        if (
-          // name.startsWith("color") || // primitives
-          name.startsWith("status-color") ||
-          name.startsWith("foreground-color") ||
-          name.startsWith("background-color") ||
-          name.startsWith("overlay-color")
-        ) {
-          let darkValue = getVarValue(dictionary, token, true);
-          return generateColorClasses(name, value, darkValue);
-        }
-        if (name.startsWith("border-color")) {
-          let darkValue = getVarValue(dictionary, token, true);
-          return generateBorderClasses(name, value, darkValue);
-        }
-        return null;
-      })
-      .flat()
-      .filter((t) => t != null)
-      .map((t) => `${t}`)
-      .sort((a, b) => a.localeCompare(b))
-      .join(`\n`);
-    const nonColorTokens = dictionary.allTokens
-      .map((token) => {
-        let value = getVarValue(dictionary, token);
-        let name = `${token.name.replace("Default", "")}`;
-
-        if (name.startsWith("border")) {
-          return generateBorderClasses(name, value);
-        }
-        if (name.startsWith("typography")) {
-          return generateFontClasses(name, value);
-        }
-        if (name.startsWith("size")) {
-          return generateSpacingClasses(name, value);
-        }
-        return null;
-      })
-      .flat()
-      .filter((t) => t != null)
-      .map((t) => `${t}`)
-      .sort((a, b) => a.localeCompare(b))
-      .join(`\n`);
-
-    const colorFallbackTokens = dictionary.allTokens
-      .map((token) => {
-        let value = getVarValue(dictionary, token);
-        let name = `${token.name.replace("Default", "")}`;
-
-        if (
-          name.startsWith("status-color") ||
-          name.startsWith("foreground-color") ||
-          name.startsWith("background-color") ||
-          name.startsWith("overlay-color")
-        ) {
-          return generateColorClasses(name, value);
-        }
-        if (name.startsWith("border-color")) {
-          return generateBorderClasses(name, value);
-        }
-        return null;
-      })
-      .flat()
-      .filter((t) => t != null)
-      .map((t) => `${t}`)
-      .sort((a, b) => a.localeCompare(b))
-      .join(`\n`);
-
-    // Manually adding .sr-only
-    const withSr = nonColorTokens.concat(
-      "\n",
-      ".sr-only {border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding-block: 0; padding-inline: 0; position: absolute; white-space: nowrap; width: 1px;}",
-    );
-
-    return `@layer starter, reset, base, state, application;
+const CSS_UTILS_PREFIXES = ["", "a2-"];
+
+for (const prefix of CSS_UTILS_PREFIXES) {
+  StyleDictionary.registerFormat({
+    name: `custom/CSSUtils/${prefix}All`,
+    formatter: function ({ dictionary }) {
+      const colorTokens = dictionary.allTokens
+        .map((token) => {
+          const value = getVarValue(dictionary, token);
+          const name = `${token.name.replace("Default", "")}`;
+
+          if (
+            // name.startsWith("color") || // primitives
+            name.startsWith("status-color") ||
+            name.startsWith("foreground-color") ||
+            name.startsWith("background-color") ||
+            name.startsWith("overlay-color")
+          ) {
+            const darkValue = getVarValue(dictionary, token, { isDark: true });
+            return generateColorClasses(name, value, { darkValue, prefix });
+          }
+          if (name.startsWith("border-color")) {
+            const darkValue = getVarValue(dictionary, token, { isDark: true });
+            return generateBorderClasses(name, value, { darkValue, prefix });
+          }
+          return null;
+        })
+        .flat()
+        .filter((t) => t != null)
+        .map((t) => `${t}`)
+        .sort((a, b) => a.localeCompare(b))
+        .join(`\n`);
+      const nonColorTokens = dictionary.allTokens
+        .map((token) => {
+          const value = getVarValue(dictionary, token);
+          const name = `${token.name.replace("Default", "")}`;
+
+          if (name.startsWith("border")) {
+            return generateBorderClasses(name, value, { prefix });
+          }
+          if (name.startsWith("typography")) {
+            return generateFontClasses(name, value, { prefix });
+          }
+          if (name.startsWith("size")) {
+            return generateSpacingClasses(name, value, { prefix });
+          }
+          return null;
+        })
+        .flat()
+        .filter((t) => t != null)
+        .map((t) => `${t}`)
+        .sort((a, b) => a.localeCompare(b))
+        .join(`\n`);
+
+      const colorFallbackTokens = dictionary.allTokens
+        .map((token) => {
+          const value = getVarValue(dictionary, token);
+          const name = `${token.name.replace("Default", "")}`;
+
+          if (
+            name.startsWith("status-color") ||
+            name.startsWith("foreground-color") ||
+            name.startsWith("background-color") ||
+            name.startsWith("overlay-color")
+          ) {
+            return generateColorClasses(name, value, { prefix });
+          }
+          if (name.startsWith("border-color")) {
+            return generateBorderClasses(name, value, { prefix });
+          }
+          return null;
+        })
+        .flat()
+        .filter((t) => t != null)
+        .map((t) => `${t}`)
+        .sort((a, b) => a.localeCompare(b))
+        .join(`\n`);
+
+      // Manually adding .sr-only
+      const withSr = nonColorTokens.concat(
+        "\n",
+        ".sr-only {border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding-block: 0; padding-inline: 0; position: absolute; white-space: nowrap; width: 1px;}",
+      );
+
+      return `@layer starter, reset, base, state, application;
 
 ${withSr}
 ${colorFallbackTokens}
@@ -278,36 +281,43 @@ ${colorFallbackTokens}
       ${colorTokens.replaceAll("\n", "\n      ")}
     }
 }`;
-  },
-});
-
-StyleDictionary.registerFormat({
-  name: `custom/CSSUtils/Borders`,
-  formatter: function ({ dictionary }) {
-    return cssUtilsFormatter(dictionary, generateBorderClasses, true);
-  },
-});
-
-StyleDictionary.registerFormat({
-  name: `custom/CSSUtils/Colors`,
-  formatter: function ({ dictionary }) {
-    return cssUtilsFormatter(dictionary, generateColorClasses, true);
-  },
-});
+    },
+  });
+
+  StyleDictionary.registerFormat({
+    name: `custom/CSSUtils/${prefix}Borders`,
+    formatter: function ({ dictionary }) {
+      return cssUtilsFormatter(dictionary, generateBorderClasses, {
+        hasDark: true,
+        prefix,
+      });
+    },
+  });
+
+  StyleDictionary.registerFormat({
+    name: `custom/CSSUtils/${prefix}Colors`,
+    formatter: function ({ dictionary }) {
+      return cssUtilsFormatter(dictionary, generateColorClasses, {
+        hasDark: true,
+        prefix,
+      });
+    },
+  });
 
-StyleDictionary.registerFormat({
-  name: `custom/CSSUtils/Fonts`,
-  formatter: function ({ dictionary }) {
-    return cssUtilsFormatter(dictionary, generateFontClasses);
-  },
-});
+  StyleDictionary.registerFormat({
+    name: `custom/CSSUtils/${prefix}Fonts`,
+    formatter: function ({ dictionary }) {
+      return cssUtilsFormatter(dictionary, generateFontClasses, { prefix });
+    },
+  });
 
-StyleDictionary.registerFormat({
-  name: `custom/CSSUtils/Spacing`,
-  formatter: function ({ dictionary }) {
-    return cssUtilsFormatter(dictionary, generateSpacingClasses);
-  },
-});
+  StyleDictionary.registerFormat({
+    name: `custom/CSSUtils/${prefix}Spacing`,
+    formatter: function ({ dictionary }) {
+      return cssUtilsFormatter(dictionary, generateSpacingClasses, { prefix });
+    },
+  });
+}
 
 const getDirectories = (source) =>
   fs
@@ -325,21 +335,21 @@ themes.forEach((theme) => {
       css: {
         transformGroup: "css",
         buildPath: `build/web/${theme}/css-utils/`,
-        files: [
+        files: CSS_UTILS_PREFIXES.flatMap((prefix) => [
           {
-            destination: "utils.css",
-            format: "custom/CSSUtils/All",
+            destination: `${prefix}utils.css`,
+            format: `custom/CSSUtils/${prefix}All`,
           },
           {
-            destination: "border.css",
-            format: "custom/CSSUtils/Borders",
+            destination: `${prefix}border.css`,
+            format: `custom/CSSUtils/${prefix}Borders`,
             filter: function (token) {
               return token.filePath.includes("border");
             },
           },
           {
-            destination: "color.css",
-            format: "custom/CSSUtils/Colors",
+            destination: `${prefix}color.css`,
+            format: `custom/CSSUtils/${prefix}Colors`,
             filter: function (token) {
               return (
                 token.filePath.includes("primitive/color") ||
@@ -348,8 +358,8 @@ themes.forEach((theme) => {
             },
           },
           {
-            destination: "font.css",
-            format: "custom/CSSUtils/Fonts",
+            destination: `${prefix}font.css`,
+            format: `custom/CSSUtils/${prefix}Fonts`,
             filter: function (token) {
               return (
                 token.filePath.includes("primitive/font") ||
@@ -358,13 +368,13 @@ themes.forEach((theme) => {
             },
           },
           {
-            destination: "spacing.css",
-            format: "custom/CSSUtils/Spacing",
+            destination: `${prefix}spacing.css`,
+            format: `custom/CSSUtils/${prefix}Spacing`,
             filter: function (token) {
               return token.filePath.startsWith("src/global/primitive/size");
             },
           },
-        ],
+        ]),
       },
       scss: {
         transformGroup: "scss",

package/eslint.config.mjs

@@ -0,0 +1,4 @@
+import baseConfig from "../../eslint.base.config.mjs";
+import eslintConfigPrettier from "eslint-config-prettier/flat";
+
+export default [...baseConfig, eslintConfigPrettier];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servicetitan/hammer-token",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "description": "",
   "main": "build/web/index.js",
   "types": "build/web/index.d.ts",
@@ -19,7 +19,7 @@
     "build": "node ./config.js",
     "dev": "pnpm build && chokidar \"./src\" -c \"pnpm build\"",
     "clean": "rimraf build .turbo",
-    "lint": "eslint",
+    "lint": "eslint .",
     "nuke": "pnpm clean && rimraf node_modules"
   }
 }

package/src/theme/core/background.js

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable @typescript-eslint/no-require-imports */
 const { color } = require("../../global/primitive/color");
 const { status } = require("./status");
 

package/src/theme/core/border.js

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable @typescript-eslint/no-require-imports */
 const { color } = require("../../global/primitive/color");
 const { size } = require("../../global/primitive/size");
 const { radius } = require("../../global/primitive/radius");