@servicetitan/hammer-token 0.0.0-themeprovider-refactor.1

package/config.js

@@ -0,0 +1,345 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const StyleDictionary = require("style-dictionary");
+const fs = require("fs-extra");
+const {
+  cssUtilsFormatter,
+  getVarValue,
+  generateBorderClasses,
+  generateColorClasses,
+  generateFontClasses,
+  generateSpacingClasses,
+} = require("./src/utils/css-utils-format-utils");
+
+StyleDictionary.registerFormat({
+  name: `custom/SCSSVariable`,
+  formatter: function ({ dictionary }) {
+    return dictionary.allTokens
+      .map((token) => {
+        let value = token.value;
+        let name = `${token.name.replace("-default", "")}`;
+        if (token.attributes.appearance) {
+          return `$${name}: var(--${name}, ${value});`;
+        }
+        return `$${name}: ${value};`;
+      })
+      .join(`\n`);
+  },
+});
+
+StyleDictionary.registerFormat({
+  name: `custom/semantic-variables`,
+  formatter: function ({ dictionary }) {
+    const light = dictionary.allTokens
+      .filter((token) => !token.name.includes("font-family"))
+      .map((token) => {
+        let value = token.value;
+        let name = `${token.name.replace("-default", "")}`;
+        if (token.attributes.appearance) {
+          return `  ${name}: ${value},`;
+        }
+        return `  ${name}: ${value},`;
+      })
+      .join(`\n`);
+    const dark = dictionary.allTokens
+      .filter((token) => !token.name.includes("font-family"))
+      .map((token) => {
+        let value = token.value;
+        let name = `${token.name.replace("-default", "")}`;
+        if (token.attributes.appearance) {
+          return `  ${name}: ${token.attributes.appearance.dark.value},`;
+        }
+        return `  ${name}: ${value},`;
+      })
+      .join(`\n`);
+
+    return [`$light: (`, light, `);`, `$dark: (`, dark, `);`].join(`\n`);
+  },
+});
+
+// StyleDictionary.registerFormat({
+//   name: `custom/semantic-dark`,
+//   formatter: function ({ dictionary }) {
+//     const variables = dictionary.allTokens
+//       .filter((token) => !token.name.includes("font-family"))
+//       .map((token) => {
+//         let value = token.value;
+//         let name = `${token.name.replace("-default", "")}`;
+//         if (token.attributes.appearance) {
+//           return `  ${name}: ${token.attributes.appearance.dark.value},`;
+//         }
+//         return `  ${name}: ${value},`;
+//       })
+//       .join(`\n`);
+//     return [`$variables: (`, variables, `);`].join(`\n`);
+//   },
+// });
+
+StyleDictionary.registerFormat({
+  name: `custom/es6`,
+  formatter: function ({ dictionary }) {
+    const light = dictionary.allTokens
+      .filter((token) => !!token.attributes.appearance)
+      .map((token) => {
+        let value = JSON.stringify(token.value);
+        let 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", "");
+        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", "");
+        return `\t${name}: ${value}`;
+      })
+      .join(`,\n`);
+    return `export const common = {\n${common}\n}\nexport const light = {\n${light}\n}\nexport const dark = {\n${dark}\n}\n`;
+  },
+});
+
+StyleDictionary.registerFormat({
+  name: `custom/es6Variable`,
+  formatter: function ({ dictionary }) {
+    return dictionary.allTokens
+      .map((token) => {
+        let value = token.value;
+        let name = `${token.name.replace("Default", "")}`;
+        if (token.attributes.appearance) {
+          return `export const ${name} = {
+  value: "${value}",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "${token.attributes.appearance.dark.value}"
+      }
+    }
+  }
+};`;
+        }
+        return `export const ${name} = { value: "${value}" };`;
+      })
+      .join(`\n`);
+  },
+});
+
+StyleDictionary.registerFormat({
+  name: `custom/CSSUtils/All`,
+  formatter: function ({ dictionary }) {
+    return 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")) {
+          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`);
+  },
+});
+
+StyleDictionary.registerFormat({
+  name: `custom/CSSUtils/Borders`,
+  formatter: function ({ dictionary }) {
+    return cssUtilsFormatter(dictionary, generateBorderClasses);
+  },
+});
+
+StyleDictionary.registerFormat({
+  name: `custom/CSSUtils/Colors`,
+  formatter: function ({ dictionary }) {
+    return cssUtilsFormatter(dictionary, generateColorClasses, true);
+  },
+});
+
+StyleDictionary.registerFormat({
+  name: `custom/CSSUtils/Fonts`,
+  formatter: function ({ dictionary }) {
+    return cssUtilsFormatter(dictionary, generateFontClasses);
+  },
+});
+
+StyleDictionary.registerFormat({
+  name: `custom/CSSUtils/Spacing`,
+  formatter: function ({ dictionary }) {
+    return cssUtilsFormatter(dictionary, generateSpacingClasses);
+  },
+});
+
+const getDirectories = (source) =>
+  fs
+    .readdirSync(source, { withFileTypes: true })
+    .filter((dirent) => dirent.isDirectory())
+    .map((dirent) => dirent.name);
+
+const themes = getDirectories(`src/theme`);
+
+themes.forEach((theme) => {
+  StyleDictionary.extend({
+    source: [`src/theme/${theme}/*.json`],
+    include: ["src/global/primitive/*.json"],
+    platforms: {
+      css: {
+        transformGroup: "css",
+        buildPath: `build/web/${theme}/css-utils/`,
+        files: [
+          {
+            destination: "utils.css",
+            format: "custom/CSSUtils/All",
+          },
+          {
+            destination: "border.css",
+            format: "custom/CSSUtils/Borders",
+            filter: function (token) {
+              return (
+                token.filePath.includes("border") ||
+                // referenced tokens
+                token.filePath.includes("primitive/color") ||
+                token.filePath.includes("primitive/size") ||
+                token.filePath.includes("status")
+              );
+            },
+          },
+          {
+            destination: "color.css",
+            format: "custom/CSSUtils/Colors",
+            filter: function (token) {
+              return (
+                token.filePath.includes("primitive/color") ||
+                token.name.includes("color")
+              );
+            },
+          },
+          {
+            destination: "font.css",
+            format: "custom/CSSUtils/Fonts",
+            filter: function (token) {
+              return (
+                token.filePath.includes("primitive/font") ||
+                token.filePath.includes("typography")
+              );
+            },
+          },
+          {
+            destination: "spacing.css",
+            format: "custom/CSSUtils/Spacing",
+            filter: function (token) {
+              return token.filePath.includes("primitive/size");
+            },
+          },
+        ],
+      },
+      scss: {
+        transformGroup: "scss",
+        buildPath: `build/web/${theme}/`,
+        files: [
+          {
+            destination: "primitive.scss",
+            format: "custom/SCSSVariable",
+            filter: function (token) {
+              return token.filePath.startsWith("src/global/primitive");
+            },
+          },
+          {
+            destination: "semantic.scss",
+            format: "custom/SCSSVariable",
+            filter: function (token) {
+              return token.filePath.startsWith(`src/theme/${theme}`);
+            },
+          },
+          {
+            destination: "semantic-variables.scss",
+            format: "custom/semantic-variables",
+            filter: function (token) {
+              return token.filePath.startsWith(`src/theme/${theme}`);
+            },
+          },
+        ],
+      },
+      tsLight: {
+        transformGroup: "js",
+        buildPath: `build/web/${theme}/`,
+        files: [
+          {
+            format: "custom/es6Variable",
+            destination: "primitive.js",
+            filter: function (token) {
+              return token.filePath.startsWith("src/global/primitive");
+            },
+          },
+          {
+            format: "custom/es6",
+            destination: "raw.js",
+            filter: function (token) {
+              return token.filePath.startsWith(`src/theme/${theme}`);
+            },
+          },
+          {
+            format: "custom/es6Variable",
+            destination: "semantic.js",
+            filter: function (token) {
+              return token.filePath.startsWith(`src/theme/${theme}`);
+            },
+          },
+        ],
+      },
+    },
+  }).buildAllPlatforms();
+});
+
+console.log("\n==============================================");
+console.log("Building index files...\n");
+const mainJS = fs.createWriteStream(`build/web/index.js`);
+
+const mainType = fs.createWriteStream(`build/web/index.d.ts`);
+mainType.write(`import Token from '../../type/types';\n`);
+
+themes.forEach((theme) => {
+  const indexJS = fs.createWriteStream(`build/web/${theme}/index.js`);
+  indexJS.write(`import * as semantic from './semantic';\n`);
+  indexJS.write(`import * as primitive from './primitive';\n`);
+  indexJS.write(`const name = '${theme}';\n`);
+  indexJS.write(`export { primitive, semantic, name };\n`);
+  indexJS.end();
+  mainType.write(`declare const ${theme}: Token;\n`);
+  mainJS.write(`import * as ${theme} from './${theme}';\n`);
+});
+
+mainType.write(`export { Token }\n`);
+mainType.write(`export { ${themes.join(", ")} }\n`);
+mainType.end();
+
+mainJS.write(`export * as Token from '../../type/types';\n`);
+mainJS.write(`export { ${themes.join(", ")} };\n`);
+mainJS.end();
+console.log(`Index built!`);
+console.log("==============================================\n");

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@servicetitan/hammer-token",
+  "version": "0.0.0-themeprovider-refactor.1",
+  "description": "",
+  "main": "build/web/index.js",
+  "types": "build/web/index.d.ts",
+  "bin": {
+    "hammer-token": "./src/utils/copy-css-utils-cli.js"
+  },
+  "scripts": {
+    "build": "node ./config.js",
+    "dev": "pnpm build && chokidar \"./src\" -c \"pnpm build\"",
+    "clean": "rimraf build .turbo",
+    "lint": "eslint",
+    "nuke": "pnpm clean && rimraf node_modules"
+  },
+  "optionalDependencies": {
+    "commander": "^12.1.0"
+  },
+  "devDependencies": {
+    "fs-extra": "^11.2.0",
+    "style-dictionary": "^3"
+  },
+  "gitHead": "373bb117186c3e3a3c41e44bcabd26aaf27fc414"
+}

package/src/global/primitive/breakpoint.json

@@ -0,0 +1,19 @@
+{
+  "breakpoint": {
+    "sm": {
+      "value": "640px"
+    },
+    "md": {
+      "value": "768px"
+    },
+    "lg": {
+      "value": "1024px"
+    },
+    "xl": {
+      "value": "1280px"
+    },
+    "xxl": {
+      "value": "1536px"
+    }
+  }
+}

package/src/global/primitive/color.json

@@ -0,0 +1,231 @@
+{
+  "color": {
+    "blue": {
+      "100": {
+        "value": "#E0F2FF"
+      },
+      "200": {
+        "value": "#B5DEFF"
+      },
+      "300": {
+        "value": "#78BBFA"
+      },
+      "400": {
+        "value": "#3892F3"
+      },
+      "500": {
+        "value": "#0265DC"
+      },
+      "600": {
+        "value": "#004491"
+      }
+    },
+    "neutral": {
+      "0": {
+        "value": "#ffffff"
+      },
+      "10": {
+        "value": "#fcfcfc"
+      },
+      "20": {
+        "value": "#fafafa"
+      },
+      "30": {
+        "value": "#f7f7f7"
+      },
+      "40": {
+        "value": "#f5f5f5"
+      },
+      "50": {
+        "value": "#eeeeee"
+      },
+      "60": {
+        "value": "#dfe0e1"
+      },
+      "70": {
+        "value": "#bcbcbd"
+      },
+      "80": {
+        "value": "#949596"
+      },
+      "90": {
+        "value": "#737475"
+      },
+      "100": {
+        "value": "#606162"
+      },
+      "200": {
+        "value": "#444445"
+      },
+      "300": {
+        "value": "#2d2e31"
+      },
+      "400": {
+        "value": "#141414"
+      },
+      "500": {
+        "value": "#040404"
+      }
+    },
+    "blue-grey": {
+      "100": {
+        "value": "#eaeff2"
+      },
+      "200": {
+        "value": "#d0d8dd"
+      },
+      "300": {
+        "value": "#b4c1c8"
+      },
+      "400": {
+        "value": "#8c9ca5"
+      },
+      "500": {
+        "value": "#6a7a85"
+      },
+      "600": {
+        "value": "#576671"
+      }
+    },
+    "orange": {
+      "100": {
+        "value": "#ffeccc"
+      },
+      "200": {
+        "value": "#fdd291"
+      },
+      "300": {
+        "value": "#ffa037"
+      },
+      "400": {
+        "value": "#e46f00"
+      },
+      "500": {
+        "value": "#b14c00"
+      },
+      "600": {
+        "value": "#7a2f00"
+      }
+    },
+    "yellow": {
+      "100": {
+        "value": "#fff9e2"
+      },
+      "200": {
+        "value": "#fff0b1"
+      },
+      "300": {
+        "value": "#ffe278"
+      },
+      "400": {
+        "value": "#ffc902"
+      },
+      "500": {
+        "value": "#ffbe00"
+      },
+      "600": {
+        "value": "#de9500"
+      }
+    },
+    "green": {
+      "100": {
+        "value": "#CEF8E0"
+      },
+      "200": {
+        "value": "#89ECBC"
+      },
+      "300": {
+        "value": "#49CC93"
+      },
+      "400": {
+        "value": "#15A46E"
+      },
+      "500": {
+        "value": "#007A4D"
+      },
+      "600": {
+        "value": "#005132"
+      }
+    },
+    "cyan": {
+      "100": {
+        "value": "#e3fcff"
+      },
+      "200": {
+        "value": "#b1f3fa"
+      },
+      "300": {
+        "value": "#13ceea"
+      },
+      "400": {
+        "value": "#08bfdf"
+      },
+      "500": {
+        "value": "#0ca5c0"
+      },
+      "600": {
+        "value": "#038299"
+      }
+    },
+    "purple": {
+      "100": {
+        "value": "#f1edff"
+      },
+      "200": {
+        "value": "#c1b6f2"
+      },
+      "300": {
+        "value": "#8772e5"
+      },
+      "400": {
+        "value": "#6954c0"
+      },
+      "500": {
+        "value": "#4f3a9e"
+      },
+      "600": {
+        "value": "#422799"
+      }
+    },
+    "red": {
+      "100": {
+        "value": "#ffece9"
+      },
+      "200": {
+        "value": "#ffb2a0"
+      },
+      "300": {
+        "value": "#ff745f"
+      },
+      "400": {
+        "value": "#f94d32"
+      },
+      "500": {
+        "value": "#e13212"
+      },
+      "600": {
+        "value": "#bf2a00"
+      }
+    },
+    "magenta": {
+      "100": {
+        "value": "#fbeaf5"
+      },
+      "200": {
+        "value": "#faafe2"
+      },
+      "300": {
+        "value": "#d949a9"
+      },
+      "400": {
+        "value": "#b52d88"
+      },
+      "500": {
+        "value": "#982071"
+      },
+      "600": {
+        "value": "#7d165b"
+      }
+    }
+  }
+}

package/src/global/primitive/duration.json

@@ -0,0 +1,16 @@
+{
+  "duration": {
+    "default": {
+      "value": "200ms"
+    },
+    "instant": {
+      "value": "0ms"
+    },
+    "fast": {
+      "value": "100ms"
+    },
+    "slow": {
+      "value": "300ms"
+    }
+  }
+}

package/src/global/primitive/font.json

@@ -0,0 +1,60 @@
+{
+  "font": {
+    "family": {
+      "base": {
+        "value": "'Nunito Sans', sans-serif"
+      },
+      "display": {
+        "value": "'Sofia Pro', SofiaPro, sans-serif"
+      }
+    },
+    "line-height": {
+      "base": {
+        "value": 1.5
+      },
+      "display": {
+        "value": 1.25
+      }
+    },
+    "weight": {
+      "normal": {
+        "value": 400
+      },
+      "semibold": {
+        "value": 600
+      },
+      "bold": {
+        "value": 700
+      }
+    },
+    "size": {
+      "100": {
+        "value": "0.625rem"
+      },
+      "200": {
+        "value": "0.75rem"
+      },
+      "300": {
+        "value": "0.875rem"
+      },
+      "400": {
+        "value": "1rem"
+      },
+      "500": {
+        "value": "1.25rem"
+      },
+      "600": {
+        "value": "1.5rem"
+      },
+      "700": {
+        "value": "1.75rem"
+      },
+      "800": {
+        "value": "2rem"
+      },
+      "900": {
+        "value": "2.25rem"
+      }
+    }
+  }
+}