@servicetitan/hammer-token 2.1.1 → 2.2.0

package/config.js

@@ -37,7 +37,7 @@ const nonColorTokens = [
 ];
 
 StyleDictionary.registerFormat({
-  name: `custom/semantic-variables`,
+  name: `custom/variables-map`,
   formatter: function ({ dictionary }) {
     const light = dictionary.allTokens
       .filter((token) => {
@@ -183,7 +183,7 @@ StyleDictionary.registerFormat({
 StyleDictionary.registerFormat({
   name: `custom/CSSUtils/All`,
   formatter: function ({ dictionary }) {
-    const allTokens = dictionary.allTokens
+    const colorTokens = dictionary.allTokens
       .map((token) => {
         let value = getVarValue(dictionary, token);
         let name = `${token.name.replace("Default", "")}`;
@@ -202,6 +202,18 @@ StyleDictionary.registerFormat({
           let darkValue = getVarValue(dictionary, token, true);
           return generateBorderClasses(name, value, darkValue);
         }
+        return null;
+      })
+      .flat()
+      .filter((t) => t != null)
+      .map((t) => `${t}`)
+      .sort((a, b) => a.localeCompare(b))
+      .join(`\n`);
+    const nonColorTokens = dictionary.allTokens
+      .map((token) => {
+        let value = getVarValue(dictionary, token);
+        let name = `${token.name.replace("Default", "")}`;
+
         if (name.startsWith("border")) {
           return generateBorderClasses(name, value);
         }
@@ -219,17 +231,52 @@ StyleDictionary.registerFormat({
       .sort((a, b) => a.localeCompare(b))
       .join(`\n`);
 
+    const colorFallbackTokens = dictionary.allTokens
+      .map((token) => {
+        let value = getVarValue(dictionary, token);
+        let name = `${token.name.replace("Default", "")}`;
+
+        if (
+          name.startsWith("status-color") ||
+          name.startsWith("foreground-color") ||
+          name.startsWith("background-color") ||
+          name.startsWith("overlay-color")
+        ) {
+          return generateColorClasses(name, value);
+        }
+        if (name.startsWith("border-color")) {
+          return generateBorderClasses(name, value);
+        }
+        return null;
+      })
+      .flat()
+      .filter((t) => t != null)
+      .map((t) => `${t}`)
+      .sort((a, b) => a.localeCompare(b))
+      .join(`\n`);
+
     // Manually adding .sr-only
-    const withSr = allTokens.concat(
+    const withSr = nonColorTokens.concat(
       "\n",
       ".sr-only {border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding-block: 0; padding-inline: 0; position: absolute; white-space: nowrap; width: 1px;}",
     );
-    return `${withSr}
 
-@layer starter, reset, base, state, application;
+    return `@layer starter, reset, base, state, application;
+
+${withSr}
+${colorFallbackTokens}
+
+@supports (color: light-dark(#fff, #000)) {
+  ${colorTokens.replaceAll("\n", "\n  ")}
+}
 
 @layer application {
-  ${withSr.replaceAll("\n", "\n  ")}
+    ${withSr.replaceAll("\n", "\n    ")}
+    ${colorFallbackTokens.replaceAll("\n", "\n    ")}
+    
+    @supports (color: light-dark(#fff, #000)) {
+      ${colorTokens.replaceAll("\n", "\n      ")}
+    }
 }`;
   },
 });
@@ -272,8 +319,8 @@ const themes = getDirectories(`src/theme`);
 
 themes.forEach((theme) => {
   StyleDictionary.extend({
-    source: [`src/theme/${theme}/*.json`],
-    include: ["src/global/primitive/*.json"],
+    source: [`src/theme/${theme}/*.js`, `src/theme/${theme}/component/*.js`],
+    include: ["src/global/primitive/*.js"],
     platforms: {
       css: {
         transformGroup: "css",
@@ -287,14 +334,7 @@ themes.forEach((theme) => {
             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("primitive/radius") ||
-                token.filePath.includes("status")
-              );
+              return token.filePath.includes("border");
             },
           },
           {
@@ -321,7 +361,7 @@ themes.forEach((theme) => {
             destination: "spacing.css",
             format: "custom/CSSUtils/Spacing",
             filter: function (token) {
-              return token.filePath.includes("primitive/size");
+              return token.filePath.startsWith("src/global/primitive/size");
             },
           },
         ],
@@ -348,14 +388,34 @@ themes.forEach((theme) => {
             destination: "semantic.scss",
             format: "custom/SCSSVariable",
             filter: function (token) {
-              return token.filePath.startsWith(`src/theme/${theme}`);
+              return (
+                token.filePath.startsWith(`src/theme/${theme}`) &&
+                !token.filePath.startsWith(`src/theme/${theme}/component`)
+              );
             },
           },
           {
             destination: "semantic-variables.scss",
-            format: "custom/semantic-variables",
+            format: "custom/variables-map",
+            filter: function (token) {
+              return (
+                token.filePath.startsWith(`src/theme/${theme}`) &&
+                !token.filePath.startsWith(`src/theme/${theme}/component`)
+              );
+            },
+          },
+          {
+            destination: "component.scss",
+            format: "custom/SCSSVariable",
+            filter: function (token) {
+              return token.filePath.startsWith(`src/theme/${theme}/component`);
+            },
+          },
+          {
+            destination: "component-variables.scss",
+            format: "custom/variables-map",
             filter: function (token) {
-              return token.filePath.startsWith(`src/theme/${theme}`);
+              return token.filePath.startsWith(`src/theme/${theme}/component`);
             },
           },
         ],
@@ -375,14 +435,27 @@ themes.forEach((theme) => {
             format: "custom/es6",
             destination: "raw.js",
             filter: function (token) {
-              return token.filePath.startsWith(`src/theme/${theme}`);
+              return (
+                token.filePath.startsWith(`src/theme/${theme}`) &&
+                !token.filePath.startsWith(`src/theme/${theme}/component`)
+              );
             },
           },
           {
             format: "custom/es6Variable",
             destination: "semantic.js",
             filter: function (token) {
-              return token.filePath.startsWith(`src/theme/${theme}`);
+              return (
+                token.filePath.startsWith(`src/theme/${theme}`) &&
+                !token.filePath.startsWith(`src/theme/${theme}/component`)
+              );
+            },
+          },
+          {
+            format: "custom/es6Variable",
+            destination: "component.js",
+            filter: function (token) {
+              return token.filePath.startsWith(`src/theme/${theme}/component`);
             },
           },
         ],
@@ -402,8 +475,9 @@ 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(`import * as component from './component';\n`);
   indexJS.write(`const name = '${theme}';\n`);
-  indexJS.write(`export { primitive, semantic, name };\n`);
+  indexJS.write(`export { primitive, semantic, component, name };\n`);
   indexJS.end();
   mainType.write(`declare const ${theme}: Token;\n`);
   mainJS.write(`import * as ${theme} from './${theme}';\n`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servicetitan/hammer-token",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "",
   "main": "build/web/index.js",
   "types": "build/web/index.d.ts",
@@ -12,7 +12,8 @@
   },
   "devDependencies": {
     "fs-extra": "^11.2.0",
-    "style-dictionary": "^3"
+    "style-dictionary": "^3",
+    "tinycolor2": "^1.6.0"
   },
   "scripts": {
     "build": "node ./config.js",

package/src/global/primitive/breakpoint.js

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

package/src/global/primitive/color.js

@@ -0,0 +1,231 @@
+module.exports = {
+  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.js

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

package/src/global/primitive/font.js

@@ -0,0 +1,60 @@
+module.exports = {
+  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",
+      },
+    },
+  },
+};

package/src/global/primitive/radius.js

@@ -0,0 +1,31 @@
+module.exports = {
+  radius: {
+    0: {
+      value: "0",
+    },
+    1: {
+      value: "0.1875rem",
+    },
+    2: {
+      value: "0.375rem",
+    },
+    3: {
+      value: "0.5625rem",
+    },
+    4: {
+      value: "0.75rem",
+    },
+    5: {
+      value: "0.9375rem",
+    },
+    6: {
+      value: "1.125rem",
+    },
+    7: {
+      value: "1.3125rem",
+    },
+    8: {
+      value: "1.5rem",
+    },
+  },
+};

package/src/global/primitive/size.js

@@ -0,0 +1,55 @@
+module.exports = {
+  size: {
+    0: {
+      value: "0rem",
+    },
+    quarter: {
+      value: "0.0625rem",
+    },
+    half: {
+      value: "0.125rem",
+    },
+    1: {
+      value: "0.25rem",
+    },
+    2: {
+      value: "0.5rem",
+    },
+    3: {
+      value: "0.75rem",
+    },
+    4: {
+      value: "1rem",
+    },
+    5: {
+      value: "1.25rem",
+    },
+    6: {
+      value: "1.5rem",
+    },
+    7: {
+      value: "1.75rem",
+    },
+    8: {
+      value: "2rem",
+    },
+    9: {
+      value: "2.25rem",
+    },
+    10: {
+      value: "2.5rem",
+    },
+    11: {
+      value: "2.75rem",
+    },
+    12: {
+      value: "3rem",
+    },
+    13: {
+      value: "3.25rem",
+    },
+    14: {
+      value: "3.5rem",
+    },
+  },
+};

package/src/global/primitive/transition.js

@@ -0,0 +1,16 @@
+module.exports = {
+  transition: {
+    ease: {
+      value: "cubic-bezier(.4, 0, .2, 1)",
+    },
+    "ease-in": {
+      value: "cubic-bezier(.4, 0, 1, 1)",
+    },
+    "ease-out": {
+      value: "cubic-bezier(0, 0, .4, 1)",
+    },
+    "ease-in-out": {
+      value: "cubic-bezier(.4, 0, .6, 1)",
+    },
+  },
+};