@servicetitan/hammer-token 2.3.0 → 2.5.0

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

@@ -1,15 +1,19 @@
-const cssUtilsFormatter = (dictionary, generateFn, hasDarkValues) => {
+const cssUtilsFormatter = (
+  dictionary,
+  generateFn,
+  { hasDark, prefix = "" },
+) => {
   const result = dictionary.allTokens
     .filter((token) => token.name.includes("color"))
     .map((token) => {
-      let value = getVarValue(dictionary, token);
+      const value = getVarValue(dictionary, token);
       const name = `${token.name.replace("Default", "")}`;
 
-      if (hasDarkValues && token.attributes.appearance) {
-        const darkValue = getVarValue(dictionary, token, true);
-        return generateFn(name, value, darkValue);
+      if (hasDark && token.attributes.appearance) {
+        const darkValue = getVarValue(dictionary, token, { isDark: true });
+        return generateFn(name, value, { darkValue, prefix });
       }
-      return generateFn(name, value);
+      return generateFn(name, value, { prefix });
     })
     .flat()
     .map((t) => `${t}`)
@@ -18,9 +22,9 @@ const cssUtilsFormatter = (dictionary, generateFn, hasDarkValues) => {
 
   const fallback = dictionary.allTokens
     .map((token) => {
-      let value = getVarValue(dictionary, token);
+      const value = getVarValue(dictionary, token);
       const name = `${token.name.replace("Default", "")}`;
-      return generateFn(name, value);
+      return generateFn(name, value, { prefix });
     })
     .flat()
     .map((t) => `${t}`)
@@ -69,10 +73,10 @@ const colorHasAlphaValue = (value) => {
 /**
  * Allow for CSS var instead of static value
  */
-const getVarValue = (dictionary, token, isDarkValue) => {
+const getVarValue = (dictionary, token, { isDark } = {}) => {
   let value;
 
-  if (isDarkValue) {
+  if (isDark) {
     value = JSON.stringify(token.attributes.appearance.dark.value);
     if (
       dictionary.usesReference(token.original.attributes.appearance.dark.value)
@@ -107,88 +111,92 @@ const removeDefaultFromName = (name) => {
   return name.replace("-default", "");
 };
 
-const generateBorderClasses = (name, value, darkValue) => {
+const generateBorderClasses = (
+  name,
+  value,
+  { darkValue, prefix = "" } = {},
+) => {
   const classes = [];
 
   if (name.startsWith("border-radius")) {
     classes.push(
-      `.${name} {border-radius: var(--${removeDefaultFromName(name)}, ${value})}`,
+      `.${prefix}${name} {border-radius: var(--${removeDefaultFromName(name)}, ${value})}`,
     );
   } else if (name.startsWith("border-width")) {
     classes.push(
-      `.${name} {border-width: var(--${removeDefaultFromName(name)}, ${value})}`,
+      `.${prefix}${name} {border-width: var(--${removeDefaultFromName(name)}, ${value})}`,
     );
   } else if (name.startsWith("border-color")) {
     if (darkValue) {
       classes.push(
-        `.${name} {border-color: var(--${removeDefaultFromName(name)}, light-dark(${value}, ${darkValue}))}`,
+        `.${prefix}${name} {border-color: var(--${removeDefaultFromName(name)}, light-dark(${value}, ${darkValue}))}`,
       );
     } else {
       classes.push(
-        `.${name} {border-color: var(--${removeDefaultFromName(name)}, ${value})}`,
+        `.${prefix}${name} {border-color: var(--${removeDefaultFromName(name)}, ${value})}`,
       );
     }
   }
   return classes;
 };
 
-const generateColorClasses = (name, value, darkValue) => {
+const generateColorClasses = (name, value, { darkValue, prefix = "" } = {}) => {
   const classes = [];
 
   if (darkValue) {
     if (name.startsWith("background-color")) {
       classes.push(
-        `.${name.replace("background-color", "bg")} {background-color: var(--${removeDefaultFromName(name)}, light-dark(${value}, ${darkValue}))}`,
+        `.${prefix}${name.replace("background-color", "bg")} {background-color: var(--${removeDefaultFromName(name)}, light-dark(${value}, ${darkValue}))}`,
       );
     } else if (name.startsWith("foreground-color")) {
       classes.push(
-        `.${name.replace("foreground-color", "c")} {color: var(--${removeDefaultFromName(name)}, light-dark(${value}, ${darkValue}))}`,
+        `.${prefix}${name.replace("foreground-color", "c")} {color: var(--${removeDefaultFromName(name)}, light-dark(${value}, ${darkValue}))}`,
       );
     } else if (name.startsWith("overlay-color")) {
       classes.push(
-        `.${name.replace("overlay-color", "bg-overlay")} {background-color: var(--${removeDefaultFromName(name)}, light-dark(${value}, ${darkValue}))}`,
+        `.${prefix}${name.replace("overlay-color", "bg-overlay")} {background-color: var(--${removeDefaultFromName(name)}, light-dark(${value}, ${darkValue}))}`,
       );
     } else if (name.startsWith("status-color")) {
       classes.push(
-        `.${name.replace("status-color", "c-status")} {color: var(--${removeDefaultFromName(name)}, light-dark(${value}, ${darkValue}))}`,
-        `.${name.replace("status-color", "bg-status")} {background-color: var(--${removeDefaultFromName(name)}, light-dark(${value}, ${darkValue}))}`,
+        `.${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(
-          `.${name.replace("status-color", "border-color-status")} {border-color: var(--${removeDefaultFromName(name)}, light-dark(${value}, ${darkValue}))}`,
+          `.${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(
-        `.${name} {border-color: var(--${removeDefaultFromName(name)}, light-dark(${value}, ${darkValue}))}`,
+        `.${prefix}${name} {border-color: var(--${removeDefaultFromName(name)}, light-dark(${value}, ${darkValue}))}`,
       );
     }
   } else {
     if (name.startsWith("background-color")) {
       classes.push(
-        `.${name.replace("background-color", "bg")} {background-color: var(--${removeDefaultFromName(name)}, ${value})}`,
+        `.${prefix}${name.replace("background-color", "bg")} {background-color: var(--${removeDefaultFromName(name)}, ${value})}`,
       );
     } else if (name.startsWith("foreground-color")) {
       classes.push(
-        `.${name.replace("foreground-color", "c")} {color: var(--${removeDefaultFromName(name)}, ${value})}`,
+        `.${prefix}${name.replace("foreground-color", "c")} {color: var(--${removeDefaultFromName(name)}, ${value})}`,
       );
     } else if (name.startsWith("overlay-color")) {
       classes.push(
-        `.${name.replace("overlay-color", "bg-overlay")} {background-color: var(--${removeDefaultFromName(name)}, ${value})}`,
+        `.${prefix}${name.replace("overlay-color", "bg-overlay")} {background-color: var(--${removeDefaultFromName(name)}, ${value})}`,
       );
     } else if (name.startsWith("status-color")) {
       classes.push(
-        `.${name.replace("status-color", "c-status")} {color: var(--${removeDefaultFromName(name)}, ${value})}`,
-        `.${name.replace("status-color", "bg-status")} {background-color: var(--${removeDefaultFromName(name)}, ${value})}`,
+        `.${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(
-          `.${name.replace("status-color", "border-color-status")} {border-color: var(--${removeDefaultFromName(name)}, ${value})}`,
+          `.${prefix}${name.replace("status-color", "border-color-status")} {border-color: var(--${removeDefaultFromName(name)}, ${value})}`,
         );
       }
     } else if (name.startsWith("border-color")) {
       classes.push(
-        `.${name} {border-color: var(--${removeDefaultFromName(name)}, ${value})}`,
+        `.${prefix}${name} {border-color: var(--${removeDefaultFromName(name)}, ${value})}`,
       );
     }
   }
@@ -196,21 +204,21 @@ const generateColorClasses = (name, value, darkValue) => {
   return classes;
 };
 
-const generateFontClasses = (name, value) => {
+const generateFontClasses = (name, value, { prefix = "" } = {}) => {
   const classes = [];
 
   if (name.startsWith("typography")) {
     if (name.includes("-font-family")) {
       classes.push(
-        `.${name.replace("typography", "ff").replace("-font-family", "")} {font-family: ${value}}`,
+        `.${prefix}${name.replace("typography", "ff").replace("-font-family", "")} {font-family: ${value}}`,
       );
     } else if (name.includes("-font-weight")) {
       classes.push(
-        `.${name.replace("typography", "fw").replace("-font-weight", "")} {font-weight: ${value}}`,
+        `.${prefix}${name.replace("typography", "fw").replace("-font-weight", "")} {font-weight: ${value}}`,
       );
     } else if (name.includes("-size")) {
       classes.push(
-        `.${name.replace("typography", "fs").replace("-size", "")} {font-size: ${value}}`,
+        `.${prefix}${name.replace("typography", "fs").replace("-size", "")} {font-size: ${value}}`,
       );
     }
   }
@@ -218,7 +226,7 @@ const generateFontClasses = (name, value) => {
   return classes;
 };
 
-const generateSpacingClasses = (name, value) => {
+const generateSpacingClasses = (name, value, { prefix = "" } = {}) => {
   const nameWithoutPrefix = name.substring(name.indexOf("-"));
 
   const directions = [
@@ -233,14 +241,18 @@ const generateSpacingClasses = (name, value) => {
 
   directions.forEach((direction) => {
     classes.push(
-      `.m-${direction}${nameWithoutPrefix} {margin-${direction}: var(--${name}, ${value})}`,
+      `.${prefix}m-${direction}${nameWithoutPrefix} {margin-${direction}: var(--${name}, ${value})}`,
     );
     classes.push(
-      `.p-${direction}${nameWithoutPrefix} {padding-${direction}: var(--${name}, ${value})}`,
+      `.${prefix}p-${direction}${nameWithoutPrefix} {padding-${direction}: var(--${name}, ${value})}`,
     );
   });
-  classes.push(`.m${nameWithoutPrefix} {margin: var(--${name}, ${value})}`);
-  classes.push(`.p${nameWithoutPrefix} {padding: var(--${name}, ${value})}`);
+  classes.push(
+    `.${prefix}m${nameWithoutPrefix} {margin: var(--${name}, ${value})}`,
+  );
+  classes.push(
+    `.${prefix}p${nameWithoutPrefix} {padding: var(--${name}, ${value})}`,
+  );
 
   return classes;
 };

package/type/types.ts

@@ -152,6 +152,57 @@ export type Semantic = {
   BorderColorSubdued: TokenObj;
   BorderColorPrimary: TokenObj;
   BorderColorDanger: TokenObj;
+  ChartsMonochrome1: TokenObj;
+  ChartsMonochrome1Stroke: TokenObj;
+  ChartsMonochrome1Pattern: TokenObj;
+  ChartsMonochrome2: TokenObj;
+  ChartsMonochrome2Stroke: TokenObj;
+  ChartsMonochrome2Pattern: TokenObj;
+  ChartsMonochrome3: TokenObj;
+  ChartsMonochrome3Stroke: TokenObj;
+  ChartsMonochrome3Pattern: TokenObj;
+  ChartsMonochrome4: TokenObj;
+  ChartsMonochrome4Stroke: TokenObj;
+  ChartsMonochrome4Pattern: TokenObj;
+  ChartsCategorical1: TokenObj;
+  ChartsCategorical1Stroke: TokenObj;
+  ChartsCategorical1Pattern: TokenObj;
+  ChartsCategorical2: TokenObj;
+  ChartsCategorical2Stroke: TokenObj;
+  ChartsCategorical2Pattern: TokenObj;
+  ChartsCategorical3: TokenObj;
+  ChartsCategorical3Stroke: TokenObj;
+  ChartsCategorical3Pattern: TokenObj;
+  ChartsCategorical4: TokenObj;
+  ChartsCategorical4Stroke: TokenObj;
+  ChartsCategorical4Pattern: TokenObj;
+  ChartsCategorical5: TokenObj;
+  ChartsCategorical5Stroke: TokenObj;
+  ChartsCategorical5Pattern: TokenObj;
+  ChartsCategorical6: TokenObj;
+  ChartsCategorical6Stroke: TokenObj;
+  ChartsCategorical6Pattern: TokenObj;
+  ChartsCategorical7: TokenObj;
+  ChartsCategorical7Stroke: TokenObj;
+  ChartsCategorical7Pattern: TokenObj;
+  ChartsCategorical8: TokenObj;
+  ChartsCategorical8Stroke: TokenObj;
+  ChartsCategorical8Pattern: TokenObj;
+  ChartsCategorical9: TokenObj;
+  ChartsCategorical9Stroke: TokenObj;
+  ChartsCategorical9Pattern: TokenObj;
+  ChartsChartsStatusSuccess: TokenObj;
+  ChartsChartsStatusSuccessStroke: TokenObj;
+  ChartsChartsStatusSuccessPattern: TokenObj;
+  ChartsChartsStatusWarning: TokenObj;
+  ChartsChartsStatusWarningStroke: TokenObj;
+  ChartsChartsStatusWarningPattern: TokenObj;
+  ChartsChartsStatusDanger: TokenObj;
+  ChartsChartsStatusDangerStroke: TokenObj;
+  ChartsChartsStatusDangerPattern: TokenObj;
+  ChartsChartsStatusNeutral: TokenObj;
+  ChartsChartsStatusNeutralStroke: TokenObj;
+  ChartsChartsStatusNeutralPattern: TokenObj;
   FocusRingColor: TokenObj;
   FocusRingColorDanger: TokenObj;
   FocusRingWidth: TokenObj;