@servicetitan/hammer-token 1.3.5 → 2.0.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @servicetitan/hammer-token@1.3.5 build /home/runner/work/hammer/hammer/packages/hammer-token
+> @servicetitan/hammer-token@2.0.0 build /home/runner/work/hammer/hammer/packages/hammer-token
 > node ./config.js
 
 

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @servicetitan/hammer-token
 
+## 2.0.0
+
+### Major Changes
+
+- [#945](https://github.com/servicetitan/hammer/pull/945) [`87e0760`](https://github.com/servicetitan/hammer/commit/87e0760c3615268e28444d109479d9502bfa0788) Thanks [@w-a-t-s-o-n](https://github.com/w-a-t-s-o-n)! - Update `border-radius-*` tokens and add `radius-*` primitives
+
+## 1.3.6
+
+### Patch Changes
+
+- [#913](https://github.com/servicetitan/hammer/pull/913) [`3246da5`](https://github.com/servicetitan/hammer/commit/3246da57b0b41ad823acf6c45fa4bea0fe8fca84) Thanks [@tounsoo](https://github.com/tounsoo)! - Fix font family base not using CSS variables
+
 ## 1.3.5
 
 ### Patch Changes

package/build/web/core/css-utils/border.css

@@ -4,10 +4,11 @@
 .border-color-strong {border-color: light-dark(var(--color-neutral-200, #444445), var(--color-neutral-60, #dfe0e1))}
 .border-color-subdued {border-color: light-dark(var(--color-neutral-60, #dfe0e1), var(--color-neutral-200, #444445))}
 .border-radius-circular {border-radius: 100%}
-.border-radius-none {border-radius: var(--size-0, 0rem)}
-.border-radius-pill {border-radius: 500px}
-.border-radius-rounded {border-radius: 0.375rem}
-.border-radius-rounded-strong {border-radius: 1rem}
+.border-radius-large {border-radius: var(--radius-4, 0.75rem)}
+.border-radius-medium {border-radius: var(--radius-2, 0.375rem)}
+.border-radius-none {border-radius: var(--radius-0, 0)}
+.border-radius-small {border-radius: var(--radius-1, 0.1875rem)}
+.border-radius-xlarge {border-radius: var(--radius-8, 1.5rem)}
 .border-width-default {border-width: var(--size-quarter, 0.0625rem)}
 .border-width-none {border-width: var(--size-0, 0rem)}
 .border-width-strong {border-width: var(--size-half, 0.125rem)}

package/build/web/core/css-utils/utils.css

@@ -34,10 +34,11 @@
 .border-color-strong {border-color: light-dark(var(--color-neutral-200, #444445), var(--color-neutral-60, #dfe0e1))}
 .border-color-subdued {border-color: light-dark(var(--color-neutral-60, #dfe0e1), var(--color-neutral-200, #444445))}
 .border-radius-circular {border-radius: 100%}
-.border-radius-none {border-radius: var(--size-0, 0rem)}
-.border-radius-pill {border-radius: 500px}
-.border-radius-rounded {border-radius: 0.375rem}
-.border-radius-rounded-strong {border-radius: 1rem}
+.border-radius-large {border-radius: var(--radius-4, 0.75rem)}
+.border-radius-medium {border-radius: var(--radius-2, 0.375rem)}
+.border-radius-none {border-radius: var(--radius-0, 0)}
+.border-radius-small {border-radius: var(--radius-1, 0.1875rem)}
+.border-radius-xlarge {border-radius: var(--radius-8, 1.5rem)}
 .border-width-default {border-width: var(--size-quarter, 0.0625rem)}
 .border-width-none {border-width: var(--size-0, 0rem)}
 .border-width-strong {border-width: var(--size-half, 0.125rem)}

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

@@ -77,6 +77,8 @@ $token: (
   duration-instant: 0ms,
   duration-fast: 100ms,
   duration-slow: 300ms,
+  font-family-base: "'Nunito Sans', sans-serif",
+  font-family-display: "'Sofia Pro', SofiaPro, sans-serif",
   font-line-height-base: 1.5,
   font-line-height-display: 1.25,
   font-weight-normal: 400,
@@ -91,6 +93,15 @@ $token: (
   font-size-700: 1.75rem,
   font-size-800: 2rem,
   font-size-900: 2.25rem,
+  radius-0: 0,
+  radius-1: 0.1875rem,
+  radius-2: 0.375rem,
+  radius-3: 0.5625rem,
+  radius-4: 0.75rem,
+  radius-5: 0.9375rem,
+  radius-6: 1.125rem,
+  radius-7: 1.3125rem,
+  radius-8: 1.5rem,
   size-0: 0rem,
   size-1: 0.25rem,
   size-2: 0.5rem,

package/build/web/core/primitive.js

@@ -92,6 +92,15 @@ export const FontSize600 = { value: "1.5rem" };
 export const FontSize700 = { value: "1.75rem" };
 export const FontSize800 = { value: "2rem" };
 export const FontSize900 = { value: "2.25rem" };
+export const Radius0 = { value: "0" };
+export const Radius1 = { value: "0.1875rem" };
+export const Radius2 = { value: "0.375rem" };
+export const Radius3 = { value: "0.5625rem" };
+export const Radius4 = { value: "0.75rem" };
+export const Radius5 = { value: "0.9375rem" };
+export const Radius6 = { value: "1.125rem" };
+export const Radius7 = { value: "1.3125rem" };
+export const Radius8 = { value: "1.5rem" };
 export const Size0 = { value: "0rem" };
 export const Size1 = { value: "0.25rem" };
 export const Size2 = { value: "0.5rem" };

package/build/web/core/primitive.scss

@@ -76,8 +76,8 @@ $duration: 200ms;
 $duration-instant: 0ms;
 $duration-fast: 100ms;
 $duration-slow: 300ms;
-$font-family-base: 'Nunito Sans', sans-serif;
-$font-family-display: 'Sofia Pro', SofiaPro, sans-serif;
+$font-family-base: var(--font-family-base, 'Nunito Sans', sans-serif);
+$font-family-display: var(--font-family-display, 'Sofia Pro', SofiaPro, sans-serif);
 $font-line-height-base: 1.5;
 $font-line-height-display: 1.25;
 $font-weight-normal: 400;
@@ -92,6 +92,15 @@ $font-size-600: 1.5rem;
 $font-size-700: 1.75rem;
 $font-size-800: 2rem;
 $font-size-900: 2.25rem;
+$radius-0: 0;
+$radius-1: 0.1875rem;
+$radius-2: 0.375rem;
+$radius-3: 0.5625rem;
+$radius-4: 0.75rem;
+$radius-5: 0.9375rem;
+$radius-6: 1.125rem;
+$radius-7: 1.3125rem;
+$radius-8: 1.5rem;
 $size-0: 0rem;
 $size-1: 0.25rem;
 $size-2: 0.5rem;

package/build/web/core/raw.js

@@ -1,8 +1,9 @@
 export const common = {
-	BorderRadiusNone: "0rem",
-	BorderRadiusRounded: "0.375rem",
-	BorderRadiusRoundedStrong: "1rem",
-	BorderRadiusPill: "500px",
+	BorderRadiusNone: "0",
+	BorderRadiusSmall: "0.1875rem",
+	BorderRadiusMedium: "0.375rem",
+	BorderRadiusLarge: "0.75rem",
+	BorderRadiusXlarge: "1.5rem",
 	BorderRadiusCircular: "100%",
 	BorderWidthNone: "0rem",
 	BorderWidth: "0.0625rem",

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

@@ -89,10 +89,11 @@ $dark: (
   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-none: 0,
+  border-radius-small: 0.1875rem,
+  border-radius-medium: 0.375rem,
+  border-radius-large: 0.75rem,
+  border-radius-xlarge: 1.5rem,
   border-radius-circular: 100%,
   border-width-none: 0rem,
   border-width: 0.0625rem,
@@ -107,16 +108,19 @@ $nonColor: (
   typography-paragraph-size-large: 1.25rem,
   typography-paragraph-size-xlarge: 1.5rem,
   typography-paragraph-font-weight: 400,
+  typography-paragraph-font-family: "'Nunito Sans', sans-serif",
   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-heading-font-family: "'Sofia Pro', SofiaPro, sans-serif",
   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,
+  typography-label-font-family: "'Nunito Sans', sans-serif",
 );

package/build/web/core/semantic.js

@@ -108,10 +108,11 @@ export const BackgroundColorInvertedStrong = {
     }
   }
 };
-export const BorderRadiusNone = { value: "0rem" };
-export const BorderRadiusRounded = { value: "0.375rem" };
-export const BorderRadiusRoundedStrong = { value: "1rem" };
-export const BorderRadiusPill = { value: "500px" };
+export const BorderRadiusNone = { value: "0" };
+export const BorderRadiusSmall = { value: "0.1875rem" };
+export const BorderRadiusMedium = { value: "0.375rem" };
+export const BorderRadiusLarge = { value: "0.75rem" };
+export const BorderRadiusXlarge = { value: "1.5rem" };
 export const BorderRadiusCircular = { value: "100%" };
 export const BorderWidthNone = { value: "0rem" };
 export const BorderWidth = { value: "0.0625rem" };

package/build/web/core/semantic.scss

@@ -9,10 +9,11 @@ $background-color-warning: var(--background-color-warning, #ffbe00);
 $background-color-disabled: var(--background-color-disabled, #606162);
 $background-color-inverted: var(--background-color-inverted, #2d2e31);
 $background-color-inverted-strong: var(--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-none: 0;
+$border-radius-small: 0.1875rem;
+$border-radius-medium: 0.375rem;
+$border-radius-large: 0.75rem;
+$border-radius-xlarge: 1.5rem;
 $border-radius-circular: 100%;
 $border-width-none: 0rem;
 $border-width: 0.0625rem;
@@ -59,18 +60,18 @@ $typography-paragraph-size: 1rem;
 $typography-paragraph-size-large: 1.25rem;
 $typography-paragraph-size-xlarge: 1.5rem;
 $typography-paragraph-font-weight: 400;
-$typography-paragraph-font-family: 'Nunito Sans', sans-serif;
+$typography-paragraph-font-family: var(--typography-paragraph-font-family, 'Nunito Sans', sans-serif);
 $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-heading-font-family: 'Sofia Pro', SofiaPro, sans-serif;
+$typography-heading-font-family: var(--typography-heading-font-family, 'Sofia Pro', SofiaPro, sans-serif);
 $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;
-$typography-label-font-family: 'Nunito Sans', sans-serif;
+$typography-label-font-family: var(--typography-label-font-family, 'Nunito Sans', sans-serif);

package/config.js

@@ -17,6 +17,8 @@ StyleDictionary.registerFormat({
       .map((token) => {
         let value = token.value;
         let name = `${token.name.replace("-default", "")}`;
+        if (token.name.includes("font-family"))
+          return `$${name}: var(--${name}, ${value});`;
         if (token.attributes.appearance) {
           return `$${name}: var(--${name}, ${value});`;
         }
@@ -82,12 +84,12 @@ StyleDictionary.registerFormat({
             isColor = false;
           }
         });
-        if (token.name.includes("font-family")) return false;
         return !isColor;
       })
       .map((token) => {
         let value = token.value;
         let name = `${token.name.replace("-default", "")}`;
+        if (token.name.includes("font-family")) return `  ${name}: "${value}",`;
         return `  ${name}: ${value},`;
       })
       .join(`\n`);
@@ -110,10 +112,10 @@ 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", "")}`;
+        if (token.name.includes("font-family")) return `  ${name}: "${value}",`;
         return `  ${name}: ${value},`;
       })
       .join(`\n`);
@@ -284,6 +286,7 @@ themes.forEach((theme) => {
                 // referenced tokens
                 token.filePath.includes("primitive/color") ||
                 token.filePath.includes("primitive/size") ||
+                token.filePath.includes("primitive/radius") ||
                 token.filePath.includes("status")
               );
             },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servicetitan/hammer-token",
-  "version": "1.3.5",
+  "version": "2.0.0",
   "description": "",
   "main": "build/web/index.js",
   "types": "build/web/index.d.ts",

package/src/global/primitive/radius.json

@@ -0,0 +1,31 @@
+{
+  "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/theme/core/border.json

@@ -2,16 +2,19 @@
   "border": {
     "radius": {
       "none": {
-        "value": "{size.0}"
+        "value": "{radius.0}"
+      },
+      "small": {
+        "value": "{radius.1}"
       },
-      "rounded": {
-        "value": "0.375rem"
+      "medium": {
+        "value": "{radius.2}"
       },
-      "rounded-strong": {
-        "value": "1rem"
+      "large": {
+        "value": "{radius.4}"
       },
-      "pill": {
-        "value": "500px"
+      "xlarge": {
+        "value": "{radius.8}"
       },
       "circular": {
         "value": "100%"