@servicetitan/hammer-token 0.0.0-rc-1.48.0-20251104214834 → 0.0.0-rc-3.0.0-20260114215531

package/src/utils/sd-build-configs.js

@@ -0,0 +1,372 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+/**
+ * Style Dictionary build configurations
+ * @module sd-build-configs
+ */
+const { getTokenName } = require("./token-helpers");
+
+/**
+ * CSS Utils prefixes for generating utility class variants
+ * @constant {string[]}
+ */
+const CSS_UTILS_PREFIXES = ["", "a2-"];
+
+/**
+ * Filters tokens to include only semantic tokens (excludes primitive and component tokens).
+ * @param {Object} token - The token object from Style Dictionary
+ * @returns {boolean} True if the token is a semantic token
+ */
+const isSemanticToken = (token) => {
+  if (!token.filePath) return true;
+  return (
+    !token.filePath.includes("primitive") &&
+    !token.filePath.includes("/component/")
+  );
+};
+
+/**
+ * Filters tokens to include only component tokens.
+ * @param {Object} token - The token object from Style Dictionary
+ * @returns {boolean} True if the token is a component token
+ */
+const isComponentToken = (token) =>
+  token.filePath && token.filePath.includes("/component/");
+
+/**
+ * Creates an SCSS platform configuration for Style Dictionary.
+ * @param {Object} options - Platform configuration options
+ * @param {string} options.buildPath - Output directory path for built files
+ * @param {Array<Object>} options.files - Array of file configurations with destination and format
+ * @returns {Object} SCSS platform configuration object
+ * @example
+ * createScssPlatform({
+ *   buildPath: 'build/web/core/',
+ *   files: [{ destination: 'tokens.scss', format: 'custom/scss-variables' }]
+ * })
+ */
+const createScssPlatform = ({ buildPath, files }) => ({
+  transformGroup: "dtcg",
+  options: {
+    usesDtcg: true,
+  },
+  buildPath,
+  files,
+});
+
+/**
+ * Creates a JavaScript platform configuration for Style Dictionary.
+ * @param {Object} options - Platform configuration options
+ * @param {string} options.buildPath - Output directory path for built files
+ * @param {Array<Object>} options.files - Array of file configurations with destination and format
+ * @returns {Object} JavaScript platform configuration object
+ * @example
+ * createJsPlatform({
+ *   buildPath: 'build/web/core/',
+ *   files: [{ destination: 'tokens.js', format: 'custom/es6-variable' }]
+ * })
+ */
+const createJsPlatform = ({ buildPath, files }) => ({
+  transformGroup: "dtcg",
+  options: {
+    usesDtcg: true,
+  },
+  buildPath,
+  files,
+});
+
+/**
+ * Creates a CSS platform configuration for Style Dictionary.
+ * @param {Object} options - Platform configuration options
+ * @param {string} options.buildPath - Output directory path for built files
+ * @param {Array<Object>} options.files - Array of file configurations with destination and format
+ * @returns {Object} CSS platform configuration object
+ * @example
+ * createCssPlatform({
+ *   buildPath: 'build/web/core/css-utils/',
+ *   files: [{ destination: 'utils.css', format: 'custom/CSSUtils/All' }]
+ * })
+ */
+const createCssPlatform = ({ buildPath, files }) => ({
+  transformGroup: "dtcg",
+  options: {
+    usesDtcg: true,
+  },
+  buildPath,
+  files,
+});
+
+/**
+ * Creates CSS utility file configurations for a given class prefix.
+ * Generates configurations for all utils, borders, colors, fonts, and spacing.
+ * @param {string} prefix - CSS class prefix (e.g., '' or 'a2-')
+ * @returns {Array<Object>} Array of file configurations for CSS utilities
+ * @example
+ * createCssUtilsFiles('a2-')
+ * // Returns: [
+ * //   { destination: 'a2-utils.css', format: 'custom/CSSUtils/a2-All' },
+ * //   { destination: 'a2-border.css', format: 'custom/CSSUtils/a2-Borders', filter: ... },
+ * //   ...
+ * // ]
+ */
+const createCssUtilsFiles = (prefix) => [
+  {
+    destination: `${prefix}utils.css`,
+    format: `custom/CSSUtils/${prefix}All`,
+  },
+  {
+    destination: `${prefix}border.css`,
+    format: `custom/CSSUtils/${prefix}Borders`,
+    filter: (token) => {
+      const name = getTokenName(token);
+      return name && name.includes("border");
+    },
+  },
+  {
+    destination: `${prefix}color.css`,
+    format: `custom/CSSUtils/${prefix}Colors`,
+    filter: (token) => {
+      const name = getTokenName(token);
+      return (
+        name &&
+        ((name.includes("primitive") && name.includes("color")) ||
+          name.includes("color"))
+      );
+    },
+  },
+  {
+    destination: `${prefix}font.css`,
+    format: `custom/CSSUtils/${prefix}Fonts`,
+    filter: (token) => {
+      const name = getTokenName(token);
+      return (
+        name &&
+        ((name.includes("primitive") && name.includes("font")) ||
+          name.includes("typography"))
+      );
+    },
+  },
+  {
+    destination: `${prefix}spacing.css`,
+    format: `custom/CSSUtils/${prefix}Spacing`,
+    filter: (token) => {
+      const name = getTokenName(token);
+      return name && name.startsWith("size");
+    },
+  },
+];
+
+/**
+ * Creates CSS utility file configurations for semantic tokens with a given class prefix.
+ * Similar to createCssUtilsFiles but with filters appropriate for semantic token naming.
+ * @param {string} prefix - CSS class prefix (e.g., '' or 'a2-')
+ * @returns {Array<Object>} Array of file configurations for semantic CSS utilities
+ * @example
+ * createSemanticCssUtilsFiles('a2-')
+ */
+const createSemanticCssUtilsFiles = (prefix) => [
+  {
+    destination: `${prefix}utils.css`,
+    format: `custom/CSSUtils/${prefix}All`,
+    filter: () => true,
+  },
+  {
+    destination: `${prefix}border.css`,
+    format: `custom/CSSUtils/${prefix}Borders`,
+    filter: (token) => {
+      const name = getTokenName(token);
+      return name && name.includes("border");
+    },
+  },
+  {
+    destination: `${prefix}color.css`,
+    format: `custom/CSSUtils/${prefix}Colors`,
+    filter: (token) => {
+      const name = getTokenName(token);
+      return (
+        name &&
+        (name.includes("color") ||
+          name.includes("status-color") ||
+          name.includes("foreground-color") ||
+          name.includes("background-color") ||
+          name.includes("overlay-color"))
+      );
+    },
+  },
+  {
+    destination: `${prefix}font.css`,
+    format: `custom/CSSUtils/${prefix}Fonts`,
+    filter: (token) => {
+      const name = getTokenName(token);
+      return name && name.includes("typography");
+    },
+  },
+  {
+    destination: `${prefix}spacing.css`,
+    format: `custom/CSSUtils/${prefix}Spacing`,
+    filter: (token) => {
+      const name = getTokenName(token);
+      return name && name.startsWith("size");
+    },
+  },
+];
+
+/**
+ * Creates the Style Dictionary configuration for primitive tokens.
+ * Primitive tokens are the foundational design values (colors, sizes, etc.).
+ * @returns {Object} Style Dictionary configuration object for primitive tokens
+ * @example
+ * const StyleDictionary = require('style-dictionary');
+ * const config = createPrimitiveConfig();
+ * const sd = new StyleDictionary(config);
+ */
+const createPrimitiveConfig = () => ({
+  log: {
+    verbosity: "verbose",
+  },
+  source: ["src/global/primitive/*.tokens.json"],
+  platforms: {
+    scss: createScssPlatform({
+      buildPath: "build/web/core/",
+      files: [
+        {
+          destination: "primitive.scss",
+          format: "custom/scss-variables",
+        },
+        {
+          destination: "primitive-variables.scss",
+          format: "custom/scss-variables-map",
+        },
+      ],
+    }),
+    js: createJsPlatform({
+      buildPath: "build/web/core/",
+      files: [
+        {
+          destination: "primitive.js",
+          format: "custom/es6-variable",
+        },
+      ],
+    }),
+    css: createCssPlatform({
+      buildPath: "build/web/core/css-utils/",
+      files: CSS_UTILS_PREFIXES.flatMap((prefix) =>
+        createCssUtilsFiles(prefix),
+      ),
+    }),
+  },
+});
+
+/**
+ * Creates the Style Dictionary configuration for theme tokens.
+ * Theme tokens include semantic tokens that reference primitives, excluding component tokens.
+ * @returns {Object} Style Dictionary configuration object for theme tokens
+ * @example
+ * const StyleDictionary = require('style-dictionary');
+ * const config = createThemeConfig();
+ * const sd = new StyleDictionary(config);
+ */
+const createThemeConfig = () => ({
+  log: {
+    verbosity: "verbose",
+    errors: {
+      brokenReferences: "warn",
+    },
+  },
+  include: [
+    "src/global/primitive/*.tokens.json",
+    "src/theme/core/status.tokens.json",
+  ],
+  source: ["src/theme/**/*.tokens.json"],
+  platforms: {
+    scss: createScssPlatform({
+      buildPath: "build/web/core/",
+      files: [
+        {
+          destination: "semantic.scss",
+          format: "custom/scss-variables",
+          filter: isSemanticToken,
+        },
+        {
+          destination: "semantic-variables.scss",
+          format: "custom/scss-variables-map",
+          filter: isSemanticToken,
+        },
+      ],
+    }),
+    js: createJsPlatform({
+      buildPath: "build/web/core/",
+      files: [
+        {
+          destination: "semantic.js",
+          format: "custom/es6-variable",
+          filter: isSemanticToken,
+        },
+      ],
+    }),
+    css: createCssPlatform({
+      buildPath: "build/web/core/css-utils/",
+      files: CSS_UTILS_PREFIXES.flatMap((prefix) =>
+        createSemanticCssUtilsFiles(prefix),
+      ),
+    }),
+  },
+});
+
+/**
+ * Creates the Style Dictionary configuration for component tokens.
+ * Component tokens are specific to UI components and reference theme/primitive tokens.
+ * @returns {Object} Style Dictionary configuration object for component tokens
+ * @example
+ * const StyleDictionary = require('style-dictionary');
+ * const config = createComponentConfig();
+ * const sd = new StyleDictionary(config);
+ */
+const createComponentConfig = () => ({
+  usesDtcg: true,
+  log: {
+    verbosity: "verbose",
+    errors: {
+      brokenReferences: "warn",
+    },
+  },
+  include: [
+    "src/global/primitive/*.tokens.json",
+    "src/theme/core/*.tokens.json",
+  ],
+  source: ["src/theme/core/component/*.tokens.json"],
+  platforms: {
+    scss: createScssPlatform({
+      buildPath: "build/web/core/",
+      files: [
+        {
+          destination: "component.scss",
+          format: "custom/scss-variables",
+          filter: isComponentToken,
+        },
+        {
+          destination: "component-variables.scss",
+          format: "custom/scss-variables-map",
+          filter: isComponentToken,
+        },
+      ],
+    }),
+    js: createJsPlatform({
+      buildPath: "build/web/core/",
+      files: [
+        {
+          destination: "component.js",
+          format: "custom/es6-variable",
+          filter: isComponentToken,
+        },
+      ],
+    }),
+  },
+});
+
+module.exports = {
+  createPrimitiveConfig,
+  createThemeConfig,
+  createComponentConfig,
+  isSemanticToken,
+  isComponentToken,
+};