@servicetitan/hammer-token 1.3.2 → 1.3.4

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @servicetitan/hammer-token@1.3.1 build /home/runner/work/hammer/hammer/packages/hammer-token
+> @servicetitan/hammer-token@1.3.3 build /home/runner/work/hammer/hammer/packages/hammer-token
 > node ./config.js
 
 
@@ -12,6 +12,7 @@ css
 
 scss
 ✔︎ build/web/core/primitive.scss
+✔︎ build/web/core/primitive-variables.scss
 ✔︎ build/web/core/semantic.scss
 ✔︎ build/web/core/semantic-variables.scss
 

package/.turbo/turbo-lint.log

@@ -1,4 +1,4 @@
 
-> @servicetitan/hammer-token@1.3.1 lint /home/runner/work/hammer/hammer/packages/hammer-token
+> @servicetitan/hammer-token@1.3.3 lint /home/runner/work/hammer/hammer/packages/hammer-token
 > eslint
 

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# v1.3.4 (Sat Nov 02 2024)
+
+#### 🐛 Bug Fix
+
+- ANV-1953: Add monolith CSS to storybook, create CSS file to temp fix `71.1orion` [#796](https://github.com/servicetitan/hammer/pull/796) ([@rgdelato](https://github.com/rgdelato) [@tounsoo](https://github.com/tounsoo) [@w-a-t-s-o-n](https://github.com/w-a-t-s-o-n))
+
+#### Authors: 3
+
+- Ben Ho ([@tounsoo](https://github.com/tounsoo))
+- Derek Watson ([@w-a-t-s-o-n](https://github.com/w-a-t-s-o-n))
+- Ryan De La Torre ([@rgdelato](https://github.com/rgdelato))
+
+---
+
+# v1.3.3 (Tue Oct 29 2024)
+
+#### 🐛 Bug Fix
+
+- NOTICK: Add missing primitive tokens and remove `color-scheme` setting in Theme Provider [#790](https://github.com/servicetitan/hammer/pull/790) ([@tounsoo](https://github.com/tounsoo))
+
+#### Authors: 1
+
+- Ben Ho ([@tounsoo](https://github.com/tounsoo))
+
+---
+
 # v1.3.2 (Mon Oct 28 2024)
 
 #### 🐛 Bug Fix

package/build/web/core/primitive-variables.scss

@@ -0,0 +1,115 @@
+$token: (
+  breakpoint-sm: 640px,
+  breakpoint-md: 768px,
+  breakpoint-lg: 1024px,
+  breakpoint-xl: 1280px,
+  breakpoint-xxl: 1536px,
+  color-blue-100: #e0f2ff,
+  color-blue-200: #b5deff,
+  color-blue-300: #78bbfa,
+  color-blue-400: #3892f3,
+  color-blue-500: #0265dc,
+  color-blue-600: #004491,
+  color-neutral-0: #ffffff,
+  color-neutral-10: #fcfcfc,
+  color-neutral-20: #fafafa,
+  color-neutral-30: #f7f7f7,
+  color-neutral-40: #f5f5f5,
+  color-neutral-50: #eeeeee,
+  color-neutral-60: #dfe0e1,
+  color-neutral-70: #bcbcbd,
+  color-neutral-80: #949596,
+  color-neutral-90: #737475,
+  color-neutral-100: #606162,
+  color-neutral-200: #444445,
+  color-neutral-300: #2d2e31,
+  color-neutral-400: #141414,
+  color-neutral-500: #040404,
+  color-blue-grey-100: #eaeff2,
+  color-blue-grey-200: #d0d8dd,
+  color-blue-grey-300: #b4c1c8,
+  color-blue-grey-400: #8c9ca5,
+  color-blue-grey-500: #6a7a85,
+  color-blue-grey-600: #576671,
+  color-orange-100: #ffeccc,
+  color-orange-200: #fdd291,
+  color-orange-300: #ffa037,
+  color-orange-400: #e46f00,
+  color-orange-500: #b14c00,
+  color-orange-600: #7a2f00,
+  color-yellow-100: #fff9e2,
+  color-yellow-200: #fff0b1,
+  color-yellow-300: #ffe278,
+  color-yellow-400: #ffc902,
+  color-yellow-500: #ffbe00,
+  color-yellow-600: #de9500,
+  color-green-100: #cef8e0,
+  color-green-200: #89ecbc,
+  color-green-300: #49cc93,
+  color-green-400: #15a46e,
+  color-green-500: #007a4d,
+  color-green-600: #005132,
+  color-cyan-100: #e3fcff,
+  color-cyan-200: #b1f3fa,
+  color-cyan-300: #13ceea,
+  color-cyan-400: #08bfdf,
+  color-cyan-500: #0ca5c0,
+  color-cyan-600: #038299,
+  color-purple-100: #f1edff,
+  color-purple-200: #c1b6f2,
+  color-purple-300: #8772e5,
+  color-purple-400: #6954c0,
+  color-purple-500: #4f3a9e,
+  color-purple-600: #422799,
+  color-red-100: #ffece9,
+  color-red-200: #ffb2a0,
+  color-red-300: #ff745f,
+  color-red-400: #f94d32,
+  color-red-500: #e13212,
+  color-red-600: #bf2a00,
+  color-magenta-100: #fbeaf5,
+  color-magenta-200: #faafe2,
+  color-magenta-300: #d949a9,
+  color-magenta-400: #b52d88,
+  color-magenta-500: #982071,
+  color-magenta-600: #7d165b,
+  duration: 200ms,
+  duration-instant: 0ms,
+  duration-fast: 100ms,
+  duration-slow: 300ms,
+  font-line-height-base: 1.5,
+  font-line-height-display: 1.25,
+  font-weight-normal: 400,
+  font-weight-semibold: 600,
+  font-weight-bold: 700,
+  font-size-100: 0.625rem,
+  font-size-200: 0.75rem,
+  font-size-300: 0.875rem,
+  font-size-400: 1rem,
+  font-size-500: 1.25rem,
+  font-size-600: 1.5rem,
+  font-size-700: 1.75rem,
+  font-size-800: 2rem,
+  font-size-900: 2.25rem,
+  size-0: 0rem,
+  size-1: 0.25rem,
+  size-2: 0.5rem,
+  size-3: 0.75rem,
+  size-4: 1rem,
+  size-5: 1.25rem,
+  size-6: 1.5rem,
+  size-7: 1.75rem,
+  size-8: 2rem,
+  size-9: 2.25rem,
+  size-10: 2.5rem,
+  size-11: 2.75rem,
+  size-12: 3rem,
+  size-13: 3.25rem,
+  size-14: 3.5rem,
+  size-quarter: 0.0625rem,
+  size-half: 0.125rem,
+  transition-ease: cubic-bezier(.4, 0, .2, 1),
+  transition-ease-in: cubic-bezier(.4, 0, 1, 1),
+  transition-ease-out: cubic-bezier(0, 0, .4, 1),
+  transition-ease-in-out: cubic-bezier(.4, 0, .6, 1),
+);

package/build/web/core/semantic-variables.scss

@@ -10,14 +10,6 @@ $light: (
   background-color-disabled: #606162,
   background-color-inverted: #2d2e31,
   background-color-inverted-strong: #141414,
-  border-radius-none: 0rem,
-  border-radius-rounded: 0.375rem,
-  border-radius-rounded-strong: 1rem,
-  border-radius-pill: 500px,
-  border-radius-circular: 100%,
-  border-width-none: 0rem,
-  border-width: 0.0625rem,
-  border-width-strong: 0.125rem,
   border-color: #949596,
   border-color-subdued: #dfe0e1,
   border-color-strong: #444445,
@@ -25,7 +17,6 @@ $light: (
   border-color-danger: #e13212,
   focus-ring-color: #0265dc,
   focus-ring-color-danger: #e13212,
-  focus-ring-width: 0.25rem,
   foreground-color: #141414,
   foreground-color-subdued: #737475,
   foreground-color-primary: #0265dc,
@@ -47,31 +38,10 @@ $light: (
   overlay-color-hover-on-primary: #ffffff29,
   overlay-color-hover-on-danger: #ffffff29,
   shadow-color: #14141414,
-  shadow-size-flat: 0rem 0rem 0rem,
-  shadow-size-float: 0rem 0.125rem 0.5rem,
-  shadow-size-overlay: 0rem 0.5rem 1.5rem,
   status-color-info: #0265dc,
   status-color-danger: #e13212,
   status-color-success: #007a4d,
   status-color-warning: #ffbe00,
-  typography-paragraph-size-xsmall: 0.75rem,
-  typography-paragraph-size-small: 0.875rem,
-  typography-paragraph-size: 1rem,
-  typography-paragraph-size-large: 1.25rem,
-  typography-paragraph-size-xlarge: 1.5rem,
-  typography-paragraph-font-weight: 400,
-  typography-heading-size-xsmall: 0.875rem,
-  typography-heading-size-small: 1rem,
-  typography-heading-size: 1.25rem,
-  typography-heading-size-large: 1.5rem,
-  typography-heading-size-xlarge: 2rem,
-  typography-heading-font-weight: 700,
-  typography-label-size-xsmall: 0.625rem,
-  typography-label-size-small: 0.75rem,
-  typography-label-size: 0.875rem,
-  typography-label-size-large: 1rem,
-  typography-label-size-xlarge: 1.25rem,
-  typography-label-font-weight: 600,
 );
 $dark: (
   background-color: #141414,
@@ -85,14 +55,6 @@ $dark: (
   background-color-disabled: #606162,
   background-color-inverted: #fafafa,
   background-color-inverted-strong: #ffffff,
-  border-radius-none: 0rem,
-  border-radius-rounded: 0.375rem,
-  border-radius-rounded-strong: 1rem,
-  border-radius-pill: 500px,
-  border-radius-circular: 100%,
-  border-width-none: 0rem,
-  border-width: 0.0625rem,
-  border-width-strong: 0.125rem,
   border-color: #606162,
   border-color-subdued: #444445,
   border-color-strong: #dfe0e1,
@@ -100,7 +62,6 @@ $dark: (
   border-color-danger: #ff745f,
   focus-ring-color: #78bbfa,
   focus-ring-color-danger: #ff745f,
-  focus-ring-width: 0.25rem,
   foreground-color: #ffffff,
   foreground-color-subdued: #bcbcbd,
   foreground-color-primary: #78bbfa,
@@ -122,13 +83,24 @@ $dark: (
   overlay-color-hover-on-primary: #ffffff29,
   overlay-color-hover-on-danger: #ffffff29,
   shadow-color: #ffffff14,
-  shadow-size-flat: 0rem 0rem 0rem,
-  shadow-size-float: 0rem 0.125rem 0.5rem,
-  shadow-size-overlay: 0rem 0.5rem 1.5rem,
   status-color-info: #78bbfa,
   status-color-danger: #ff745f,
   status-color-success: #49cc93,
   status-color-warning: #ffe278,
+);
+$nonColor: (
+  border-radius-none: 0rem,
+  border-radius-rounded: 0.375rem,
+  border-radius-rounded-strong: 1rem,
+  border-radius-pill: 500px,
+  border-radius-circular: 100%,
+  border-width-none: 0rem,
+  border-width: 0.0625rem,
+  border-width-strong: 0.125rem,
+  focus-ring-width: 0.25rem,
+  shadow-size-flat: 0rem 0rem 0rem,
+  shadow-size-float: 0rem 0.125rem 0.5rem,
+  shadow-size-overlay: 0rem 0.5rem 1.5rem,
   typography-paragraph-size-xsmall: 0.75rem,
   typography-paragraph-size-small: 0.875rem,
   typography-paragraph-size: 1rem,

package/config.js

@@ -26,19 +26,44 @@ StyleDictionary.registerFormat({
   },
 });
 
+const nonColorTokens = [
+  "border-radius",
+  "font-family",
+  "font-weight",
+  "size",
+  "width",
+];
+
 StyleDictionary.registerFormat({
   name: `custom/semantic-variables`,
   formatter: function ({ dictionary }) {
     const light = dictionary.allTokens
-      .filter((token) => !token.name.includes("font-family"))
+      .filter((token) => {
+        let isColor = true;
+        nonColorTokens.forEach((t) => {
+          if (token.name.includes(t)) {
+            isColor = false;
+          }
+        });
+        return isColor;
+      })
       .map((token) => {
         let value = token.value;
         let name = `${token.name.replace("-default", "")}`;
         return `  ${name}: ${value},`;
       })
       .join(`\n`);
+
     const dark = dictionary.allTokens
-      .filter((token) => !token.name.includes("font-family"))
+      .filter((token) => {
+        let isColor = true;
+        nonColorTokens.forEach((t) => {
+          if (token.name.includes(t)) {
+            isColor = false;
+          }
+        });
+        return isColor;
+      })
       .map((token) => {
         let value = token.value;
         let name = `${token.name.replace("-default", "")}`;
@@ -49,7 +74,51 @@ StyleDictionary.registerFormat({
       })
       .join(`\n`);
 
-    return [`$light: (`, light, `);`, `$dark: (`, dark, `);`].join(`\n`);
+    const nonColor = dictionary.allTokens
+      .filter((token) => {
+        let isColor = true;
+        nonColorTokens.forEach((t) => {
+          if (token.name.includes(t)) {
+            isColor = false;
+          }
+        });
+        if (token.name.includes("font-family")) return false;
+        return !isColor;
+      })
+      .map((token) => {
+        let value = token.value;
+        let name = `${token.name.replace("-default", "")}`;
+        return `  ${name}: ${value},`;
+      })
+      .join(`\n`);
+
+    return [
+      `$light: (`,
+      light,
+      `);`,
+      `$dark: (`,
+      dark,
+      `);`,
+      `$nonColor: (`,
+      nonColor,
+      `);`,
+    ].join(`\n`);
+  },
+});
+
+StyleDictionary.registerFormat({
+  name: `custom/primitive-variables`,
+  formatter: function ({ dictionary }) {
+    const vars = dictionary.allTokens
+      .filter((token) => !token.name.includes("font-family"))
+      .map((token) => {
+        let value = token.value;
+        let name = `${token.name.replace("-default", "")}`;
+        return `  ${name}: ${value},`;
+      })
+      .join(`\n`);
+
+    return [`$token: (`, vars, `);`].join(`\n`);
   },
 });
 
@@ -259,6 +328,13 @@ themes.forEach((theme) => {
               return token.filePath.startsWith("src/global/primitive");
             },
           },
+          {
+            destination: "primitive-variables.scss",
+            format: "custom/primitive-variables",
+            filter: function (token) {
+              return token.filePath.startsWith("src/global/primitive");
+            },
+          },
           {
             destination: "semantic.scss",
             format: "custom/SCSSVariable",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servicetitan/hammer-token",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "",
   "main": "build/web/index.js",
   "types": "build/web/index.d.ts",
@@ -21,5 +21,5 @@
     "fs-extra": "^11.2.0",
     "style-dictionary": "^3"
   },
-  "gitHead": "67ec1c21583e12f47579ca8d507cdd0bcf3e40fb"
+  "gitHead": "428df250fb65ed7b11a974643a7c16fe7db0670d"
 }