@servicetitan/hammer-token 1.3.6 → 2.0.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @servicetitan/hammer-token@1.3.6 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,11 @@
 # @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

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

@@ -93,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

@@ -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,

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;

package/config.js

@@ -286,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.6",
+  "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%"