@servicetitan/hammer-token 2.1.0 → 2.2.0

package/src/theme/core/shadow.js

@@ -0,0 +1,29 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+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-var-requires */
+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-var-requires */
+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/css-utils-format-utils.js

@@ -1,8 +1,10 @@
 const cssUtilsFormatter = (dictionary, generateFn, hasDarkValues) => {
   const result = dictionary.allTokens
+    .filter((token) => token.name.includes("color"))
     .map((token) => {
       let 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);
@@ -14,10 +16,37 @@ const cssUtilsFormatter = (dictionary, generateFn, hasDarkValues) => {
     .sort((a, b) => a.localeCompare(b))
     .join(`\n`);
 
-  return `${result}
+  const fallback = dictionary.allTokens
+    .map((token) => {
+      let value = getVarValue(dictionary, token);
+      const name = `${token.name.replace("Default", "")}`;
+      return generateFn(name, value);
+    })
+    .flat()
+    .map((t) => `${t}`)
+    .sort((a, b) => a.localeCompare(b))
+    .join(`\n`);
 
-@layer application {
+  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    ")}
+  }`
+      : ""
+  }
 }`;
 };
 
@@ -74,53 +103,94 @@ const getVarValue = (dictionary, token, isDarkValue) => {
   return value.replaceAll('"', "");
 };
 
+const removeDefaultFromName = (name) => {
+  return name.replace("-default", "");
+};
+
 const generateBorderClasses = (name, value, darkValue) => {
   const classes = [];
 
   if (name.startsWith("border-radius")) {
-    classes.push(`.${name} {border-radius: ${value}}`);
+    classes.push(
+      `.${name} {border-radius: var(--${removeDefaultFromName(name)}, ${value})}`,
+    );
   } else if (name.startsWith("border-width")) {
-    classes.push(`.${name} {border-width: ${value}}`);
+    classes.push(
+      `.${name} {border-width: var(--${removeDefaultFromName(name)}, ${value})}`,
+    );
   } else if (name.startsWith("border-color")) {
-    classes.push(`.${name} {border-color: light-dark(${value}, ${darkValue})}`);
+    if (darkValue) {
+      classes.push(
+        `.${name} {border-color: var(--${removeDefaultFromName(name)}, light-dark(${value}, ${darkValue}))}`,
+      );
+    } else {
+      classes.push(
+        `.${name} {border-color: var(--${removeDefaultFromName(name)}, ${value})}`,
+      );
+    }
   }
-
   return classes;
 };
 
 const generateColorClasses = (name, value, darkValue) => {
   const classes = [];
 
-  if (name.startsWith("background-color")) {
-    classes.push(
-      `.${name.replace("background-color", "bg")} {background-color: light-dark(${value}, ${darkValue})}`,
-    );
-  } else if (name.startsWith("foreground-color")) {
-    classes.push(
-      `.${name.replace("foreground-color", "c")} {color: light-dark(${value}, ${darkValue})}`,
-    );
-  } else if (name.startsWith("overlay-color")) {
-    classes.push(
-      `.${name.replace("overlay-color", "bg-overlay")} {background-color: light-dark(${value}, ${darkValue})}`,
-    );
-    // primitives
-    // } else if (name.startsWith("color")) {
-    //   classes.push(
-    //     `.${name.replace("color", "c")} {color: ${value}}`,
-    //     `.${name.replace("color", "bg")} {background-color: ${value}}`,
-    //   );
-  } else if (name.startsWith("status-color")) {
-    classes.push(
-      `.${name.replace("status-color", "c-status")} {color: light-dark(${value}, ${darkValue})}`,
-      `.${name.replace("status-color", "bg-status")} {background-color: light-dark(${value}, ${darkValue})}`,
-    );
-    if (!name.includes("danger")) {
+  if (darkValue) {
+    if (name.startsWith("background-color")) {
+      classes.push(
+        `.${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}))}`,
+      );
+    } else if (name.startsWith("overlay-color")) {
+      classes.push(
+        `.${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}))}`,
+      );
+      if (!name.includes("danger")) {
+        classes.push(
+          `.${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.replace("status-color", "border-color-status")} {border-color: light-dark(${value}, ${darkValue})}`,
+        `.${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})}`,
+      );
+    } else if (name.startsWith("foreground-color")) {
+      classes.push(
+        `.${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})}`,
+      );
+    } 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})}`,
+      );
+      if (!name.includes("danger")) {
+        classes.push(
+          `.${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})}`,
       );
     }
-  } else if (name.startsWith("border-color")) {
-    classes.push(`.${name} {border-color: light-dark(${value}, ${darkValue})}`);
   }
 
   return classes;
@@ -169,6 +239,8 @@ const generateSpacingClasses = (name, value) => {
       `.p-${direction}${nameWithoutPrefix} {padding-${direction}: var(--${name}, ${value})}`,
     );
   });
+  classes.push(`.m${nameWithoutPrefix} {margin: var(--${name}, ${value})}`);
+  classes.push(`.p${nameWithoutPrefix} {padding: var(--${name}, ${value})}`);
 
   return classes;
 };

package/type/types.ts

@@ -206,9 +206,84 @@ export type Semantic = {
   TypographyLabelFontFamily: TokenObj;
 };
 
+type Component = {
+  // Button
+  ButtonPrimaryForegroundColor: TokenObj;
+  ButtonPrimaryForegroundColorHover: TokenObj;
+  ButtonPrimaryForegroundColorActive: TokenObj;
+  ButtonPrimaryBackgroundColor: TokenObj;
+  ButtonPrimaryBackgroundColorHover: TokenObj;
+  ButtonPrimaryBackgroundColorActive: TokenObj;
+  ButtonPrimaryBorderColor: TokenObj;
+  ButtonPrimaryFocusRingColor: TokenObj;
+  ButtonSecondaryForegroundColor: TokenObj;
+  ButtonSecondaryForegroundColorHover: TokenObj;
+  ButtonSecondaryForegroundColorActive: TokenObj;
+  ButtonSecondaryBackgroundColor: TokenObj;
+  ButtonSecondaryBackgroundColorHover: TokenObj;
+  ButtonSecondaryBackgroundColorActive: TokenObj;
+  ButtonSecondaryBorderColor: TokenObj;
+  ButtonSecondaryFocusRingColor: TokenObj;
+  ButtonGhostForegroundColor: TokenObj;
+  ButtonGhostForegroundColorHover: TokenObj;
+  ButtonGhostForegroundColorActive: TokenObj;
+  ButtonGhostBackgroundColor: TokenObj;
+  ButtonGhostBackgroundColorHover: TokenObj;
+  ButtonGhostBackgroundColorActive: TokenObj;
+  ButtonGhostBorderColor: TokenObj;
+  ButtonGhostFocusRingColor: TokenObj;
+  ButtonDangerPrimaryForegroundColor: TokenObj;
+  ButtonDangerPrimaryForegroundColorHover: TokenObj;
+  ButtonDangerPrimaryForegroundColorActive: TokenObj;
+  ButtonDangerPrimaryBackgroundColor: TokenObj;
+  ButtonDangerPrimaryBackgroundColorHover: TokenObj;
+  ButtonDangerPrimaryBackgroundColorActive: TokenObj;
+  ButtonDangerPrimaryBorderColor: TokenObj;
+  ButtonDangerPrimaryFocusRingColor: TokenObj;
+  ButtonDangerSecondaryForegroundColor: TokenObj;
+  ButtonDangerSecondaryForegroundColorHover: TokenObj;
+  ButtonDangerSecondaryForegroundColorActive: TokenObj;
+  ButtonDangerSecondaryBackgroundColor: TokenObj;
+  ButtonDangerSecondaryBackgroundColorHover: TokenObj;
+  ButtonDangerSecondaryBackgroundColorActive: TokenObj;
+  ButtonDangerSecondaryBorderColor: TokenObj;
+  ButtonDangerSecondaryFocusRingColor: TokenObj;
+  ButtonPrimaryBorderRadius: TokenObj;
+  ButtonSecondaryBorderRadius: TokenObj;
+  ButtonGhostBorderRadius: TokenObj;
+  ButtonDangerPrimaryBorderRadius: TokenObj;
+  ButtonDangerSecondaryBorderRadius: TokenObj;
+
+  // Checkbox
+  CheckboxUncheckedFillColor: TokenObj;
+  CheckboxUncheckedFillColorHover: TokenObj;
+  CheckboxUncheckedFillColorActive: TokenObj;
+  CheckboxUncheckedBackgroundColor: TokenObj;
+  CheckboxUncheckedBackgroundColorHover: TokenObj;
+  CheckboxUncheckedBackgroundColorActive: TokenObj;
+  CheckboxCheckedFillColor: TokenObj;
+  CheckboxCheckedFillColorHover: TokenObj;
+  CheckboxCheckedFillColorActive: TokenObj;
+  CheckboxCheckedBackgroundColor: TokenObj;
+  CheckboxCheckedBackgroundColorHover: TokenObj;
+  CheckboxCheckedBackgroundColorActive: TokenObj;
+  CheckboxUncheckedErrorFillColor: TokenObj;
+  CheckboxUncheckedErrorFillColorHover: TokenObj;
+  CheckboxUncheckedErrorFillColorActive: TokenObj;
+  CheckboxUncheckedErrorBackgroundColor: TokenObj;
+  CheckboxUncheckedErrorBackgroundColorHover: TokenObj;
+  CheckboxUncheckedErrorBackgroundColorActive: TokenObj;
+  CheckboxCheckedErrorFillColor: TokenObj;
+  CheckboxCheckedErrorFillColorHover: TokenObj;
+  CheckboxCheckedErrorFillColorActive: TokenObj;
+  CheckboxCheckedErrorBackgroundColor: TokenObj;
+  CheckboxCheckedErrorBackgroundColorHover: TokenObj;
+  CheckboxCheckedErrorBackgroundColorActive: TokenObj;
+};
 type Token = {
   primitive: Primitive;
   semantic: Semantic;
+  component: Component;
   name: string;
 };
 

package/src/global/primitive/breakpoint.json

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

package/src/global/primitive/color.json

@@ -1,231 +0,0 @@
-{
-  "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

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