@servicetitan/hammer-token 0.0.0-rc-20250807234739

package/src/theme/core/shadow.js

@@ -0,0 +1,29 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+const { color } = require("../../global/primitive/color");
+const { size } = require("../../global/primitive/size");
+
+module.exports = {
+  shadow: {
+    color: {
+      value: `${color.neutral["400"].value}14`,
+      attributes: {
+        appearance: {
+          dark: {
+            value: `${color.neutral["0"].value}14`,
+          },
+        },
+      },
+    },
+    size: {
+      flat: {
+        value: `${size["0"].value} ${size["0"].value} ${size["0"].value}`,
+      },
+      float: {
+        value: `${size["0"].value} ${size.half.value} ${size["2"].value}`,
+      },
+      overlay: {
+        value: `${size["0"].value} ${size["2"].value} ${size["6"].value}`,
+      },
+    },
+  },
+};

package/src/theme/core/status.js

@@ -0,0 +1,49 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+const { color } = require("../../global/primitive/color");
+
+module.exports = {
+  status: {
+    color: {
+      info: {
+        value: color.blue["500"].value,
+        attributes: {
+          appearance: {
+            dark: {
+              value: color.blue["300"].value,
+            },
+          },
+        },
+      },
+      danger: {
+        value: color.red["500"].value,
+        attributes: {
+          appearance: {
+            dark: {
+              value: color.red["300"].value,
+            },
+          },
+        },
+      },
+      success: {
+        value: color.green["500"].value,
+        attributes: {
+          appearance: {
+            dark: {
+              value: color.green["300"].value,
+            },
+          },
+        },
+      },
+      warning: {
+        value: color.yellow["500"].value,
+        attributes: {
+          appearance: {
+            dark: {
+              value: color.yellow["300"].value,
+            },
+          },
+        },
+      },
+    },
+  },
+};

package/src/theme/core/typography.js

@@ -0,0 +1,82 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+const { font } = require("../../global/primitive/font");
+
+module.exports = {
+  typography: {
+    paragraph: {
+      size: {
+        xsmall: {
+          value: font.size["200"].value,
+        },
+        small: {
+          value: font.size["300"].value,
+        },
+        default: {
+          value: font.size["400"].value,
+        },
+        large: {
+          value: font.size["500"].value,
+        },
+        xlarge: {
+          value: font.size["600"].value,
+        },
+      },
+      "font-weight": {
+        value: font.weight.normal.value,
+      },
+      "font-family": {
+        value: font.family.base.value,
+      },
+    },
+    heading: {
+      size: {
+        xsmall: {
+          value: font.size["300"].value,
+        },
+        small: {
+          value: font.size["400"].value,
+        },
+        default: {
+          value: font.size["500"].value,
+        },
+        large: {
+          value: font.size["600"].value,
+        },
+        xlarge: {
+          value: font.size["800"].value,
+        },
+      },
+      "font-weight": {
+        value: font.weight.bold.value,
+      },
+      "font-family": {
+        value: font.family.display.value,
+      },
+    },
+    label: {
+      size: {
+        xsmall: {
+          value: font.size["100"].value,
+        },
+        small: {
+          value: font.size["200"].value,
+        },
+        default: {
+          value: font.size["300"].value,
+        },
+        large: {
+          value: font.size["400"].value,
+        },
+        xlarge: {
+          value: font.size["500"].value,
+        },
+      },
+      "font-weight": {
+        value: font.weight.semibold.value,
+      },
+      "font-family": {
+        value: font.family.base.value,
+      },
+    },
+  },
+};

package/src/utils/copy-css-utils-cli.js

@@ -0,0 +1,37 @@
+#!/usr/bin/env node
+/* eslint-disable @typescript-eslint/no-require-imports */
+const { program } = require("commander");
+const path = require("path");
+const fs = require("fs");
+
+function run() {
+  program
+    .command("copy-css-utils")
+    .description("Copy the CSS Utils files from hammer-token into your project")
+    .argument("<string>", "directory to copy CSS utils files to")
+    .action((dir) => {
+      console.log(`Copying CSS Utils files to: ${dir}`);
+      const cssUtilsFilesPathString = path.resolve(
+        __dirname,
+        "../../build/web/core/css-utils",
+      );
+      fs.cpSync(cssUtilsFilesPathString, dir, { recursive: true });
+      const copiedFiles = fs.readdirSync(dir, { encoding: "utf-8" });
+      copiedFiles.forEach((file) => {
+        const fileWithDir = `${dir}/${file}`;
+        fs.readFile(fileWithDir, "utf-8", (err, contents) => {
+          if (err) {
+            return console.error(err);
+          }
+
+          fs.writeFile(fileWithDir, contents, "utf-8", (e) => {
+            if (e) console.log(e);
+          });
+        });
+      });
+    });
+
+  program.parse();
+}
+
+run();

package/src/utils/css-utils-format-utils.js

@@ -0,0 +1,267 @@
+const cssUtilsFormatter = (
+  dictionary,
+  generateFn,
+  { hasDark, prefix = "" },
+) => {
+  const result = dictionary.allTokens
+    .filter((token) => token.name.includes("color"))
+    .map((token) => {
+      const value = getVarValue(dictionary, token);
+      const name = `${token.name.replace("Default", "")}`;
+
+      if (hasDark && token.attributes.appearance) {
+        const darkValue = getVarValue(dictionary, token, { isDark: true });
+        return generateFn(name, value, { darkValue, prefix });
+      }
+      return generateFn(name, value, { prefix });
+    })
+    .flat()
+    .map((t) => `${t}`)
+    .sort((a, b) => a.localeCompare(b))
+    .join(`\n`);
+
+  const fallback = dictionary.allTokens
+    .map((token) => {
+      const value = getVarValue(dictionary, token);
+      const name = `${token.name.replace("Default", "")}`;
+      return generateFn(name, value, { prefix });
+    })
+    .flat()
+    .map((t) => `${t}`)
+    .sort((a, b) => a.localeCompare(b))
+    .join(`\n`);
+
+  return `@layer starter, reset, base, state, application;
+
+${fallback}
+${
+  result.length > 0
+    ? `\n@supports (color: light-dark(#fff, #000)) {
+  ${result.replaceAll("\n", "\n  ")}
+}`
+    : ""
+}
+    
+@layer application {
+  ${fallback.replaceAll("\n", "\n  ")}
+  ${
+    result.length > 0
+      ? `\n  @supports (color: light-dark(#fff, #000)) {
+    ${result.replaceAll("\n", "\n    ")}
+  }`
+      : ""
+  }
+}`;
+};
+
+const getNewValueFromRef = (value, ref) => {
+  return value.replace(ref.value, function () {
+    // fallback for nested vars
+    if (ref.name === undefined) {
+      return `${ref.value}`;
+    } else {
+      return `var(--${ref.name}, ${ref.value})`;
+    }
+  });
+};
+
+const colorHasAlphaValue = (value) => {
+  // e.g. var(--something)44 isn't valid
+  return /\)[\d]+/.test(value);
+};
+
+/**
+ * Allow for CSS var instead of static value
+ */
+const getVarValue = (dictionary, token, { isDark } = {}) => {
+  let value;
+
+  if (isDark) {
+    value = JSON.stringify(token.attributes.appearance.dark.value);
+    if (
+      dictionary.usesReference(token.original.attributes.appearance.dark.value)
+    ) {
+      const refs = dictionary.getReferences(
+        token.original.attributes.appearance.dark.value,
+      );
+      refs.forEach((ref) => {
+        const newValue = getNewValueFromRef(value, ref);
+        if (colorHasAlphaValue(newValue) === false) {
+          value = newValue;
+        }
+      });
+    }
+  } else {
+    value = JSON.stringify(token.value);
+    if (dictionary.usesReference(token.original.value)) {
+      const refs = dictionary.getReferences(token.original.value);
+      refs.forEach((ref) => {
+        const newValue = getNewValueFromRef(value, ref);
+        if (colorHasAlphaValue(newValue) === false) {
+          value = newValue;
+        }
+      });
+    }
+  }
+
+  return value.replaceAll('"', "");
+};
+
+const removeDefaultFromName = (name) => {
+  return name.replace("-default", "");
+};
+
+const generateBorderClasses = (
+  name,
+  value,
+  { darkValue, prefix = "" } = {},
+) => {
+  const classes = [];
+
+  if (name.startsWith("border-radius")) {
+    classes.push(
+      `.${prefix}${name} {border-radius: var(--${removeDefaultFromName(name)}, ${value})}`,
+    );
+  } else if (name.startsWith("border-width")) {
+    classes.push(
+      `.${prefix}${name} {border-width: var(--${removeDefaultFromName(name)}, ${value})}`,
+    );
+  } else if (name.startsWith("border-color")) {
+    if (darkValue) {
+      classes.push(
+        `.${prefix}${name} {border-color: var(--${removeDefaultFromName(name)}, light-dark(${value}, ${darkValue}))}`,
+      );
+    } else {
+      classes.push(
+        `.${prefix}${name} {border-color: var(--${removeDefaultFromName(name)}, ${value})}`,
+      );
+    }
+  }
+  return classes;
+};
+
+const generateColorClasses = (name, value, { darkValue, prefix = "" } = {}) => {
+  const classes = [];
+
+  if (darkValue) {
+    if (name.startsWith("background-color")) {
+      classes.push(
+        `.${prefix}${name.replace("background-color", "bg")} {background-color: var(--${removeDefaultFromName(name)}, light-dark(${value}, ${darkValue}))}`,
+      );
+    } else if (name.startsWith("foreground-color")) {
+      classes.push(
+        `.${prefix}${name.replace("foreground-color", "c")} {color: var(--${removeDefaultFromName(name)}, light-dark(${value}, ${darkValue}))}`,
+      );
+    } else if (name.startsWith("overlay-color")) {
+      classes.push(
+        `.${prefix}${name.replace("overlay-color", "bg-overlay")} {background-color: var(--${removeDefaultFromName(name)}, light-dark(${value}, ${darkValue}))}`,
+      );
+    } else if (name.startsWith("status-color")) {
+      classes.push(
+        `.${prefix}${name.replace("status-color", "c-status")} {color: var(--${removeDefaultFromName(name)}, light-dark(${value}, ${darkValue}))}`,
+        `.${prefix}${name.replace("status-color", "bg-status")} {background-color: var(--${removeDefaultFromName(name)}, light-dark(${value}, ${darkValue}))}`,
+      );
+      if (!name.includes("danger")) {
+        classes.push(
+          `.${prefix}${name.replace("status-color", "border-color-status")} {border-color: var(--${removeDefaultFromName(name)}, light-dark(${value}, ${darkValue}))}`,
+        );
+      }
+    } else if (name.startsWith("border-color")) {
+      classes.push(
+        `.${prefix}${name} {border-color: var(--${removeDefaultFromName(name)}, light-dark(${value}, ${darkValue}))}`,
+      );
+    }
+  } else {
+    if (name.startsWith("background-color")) {
+      classes.push(
+        `.${prefix}${name.replace("background-color", "bg")} {background-color: var(--${removeDefaultFromName(name)}, ${value})}`,
+      );
+    } else if (name.startsWith("foreground-color")) {
+      classes.push(
+        `.${prefix}${name.replace("foreground-color", "c")} {color: var(--${removeDefaultFromName(name)}, ${value})}`,
+      );
+    } else if (name.startsWith("overlay-color")) {
+      classes.push(
+        `.${prefix}${name.replace("overlay-color", "bg-overlay")} {background-color: var(--${removeDefaultFromName(name)}, ${value})}`,
+      );
+    } else if (name.startsWith("status-color")) {
+      classes.push(
+        `.${prefix}${name.replace("status-color", "c-status")} {color: var(--${removeDefaultFromName(name)}, ${value})}`,
+        `.${prefix}${name.replace("status-color", "bg-status")} {background-color: var(--${removeDefaultFromName(name)}, ${value})}`,
+      );
+      if (!name.includes("danger")) {
+        classes.push(
+          `.${prefix}${name.replace("status-color", "border-color-status")} {border-color: var(--${removeDefaultFromName(name)}, ${value})}`,
+        );
+      }
+    } else if (name.startsWith("border-color")) {
+      classes.push(
+        `.${prefix}${name} {border-color: var(--${removeDefaultFromName(name)}, ${value})}`,
+      );
+    }
+  }
+
+  return classes;
+};
+
+const generateFontClasses = (name, value, { prefix = "" } = {}) => {
+  const classes = [];
+
+  if (name.startsWith("typography")) {
+    if (name.includes("-font-family")) {
+      classes.push(
+        `.${prefix}${name.replace("typography", "ff").replace("-font-family", "")} {font-family: ${value}}`,
+      );
+    } else if (name.includes("-font-weight")) {
+      classes.push(
+        `.${prefix}${name.replace("typography", "fw").replace("-font-weight", "")} {font-weight: ${value}}`,
+      );
+    } else if (name.includes("-size")) {
+      classes.push(
+        `.${prefix}${name.replace("typography", "fs").replace("-size", "")} {font-size: ${value}}`,
+      );
+    }
+  }
+
+  return classes;
+};
+
+const generateSpacingClasses = (name, value, { prefix = "" } = {}) => {
+  const nameWithoutPrefix = name.substring(name.indexOf("-"));
+
+  const directions = [
+    "inline-start",
+    "inline-end",
+    "block-start",
+    "block-end",
+    "block",
+    "inline",
+  ];
+  const classes = [];
+
+  directions.forEach((direction) => {
+    classes.push(
+      `.${prefix}m-${direction}${nameWithoutPrefix} {margin-${direction}: var(--${name}, ${value})}`,
+    );
+    classes.push(
+      `.${prefix}p-${direction}${nameWithoutPrefix} {padding-${direction}: var(--${name}, ${value})}`,
+    );
+  });
+  classes.push(
+    `.${prefix}m${nameWithoutPrefix} {margin: var(--${name}, ${value})}`,
+  );
+  classes.push(
+    `.${prefix}p${nameWithoutPrefix} {padding: var(--${name}, ${value})}`,
+  );
+
+  return classes;
+};
+
+module.exports = {
+  cssUtilsFormatter,
+  getVarValue,
+  generateBorderClasses,
+  generateColorClasses,
+  generateFontClasses,
+  generateSpacingClasses,
+};