@servicetitan/hammer-token 1.3.6 → 2.0.1

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.1 build /home/runner/work/hammer/hammer/packages/hammer-token
 > node ./config.js
 
 

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @servicetitan/hammer-token
 
+## 2.0.1
+
+### Patch Changes
+
+- [#957](https://github.com/servicetitan/hammer/pull/957) [`850ef84`](https://github.com/servicetitan/hammer/commit/850ef84820a8d29b066dcc91a75512f8a23ac7bf) Thanks [@tounsoo](https://github.com/tounsoo)! - Add additional foreground tokens and update overlay tokens to enhance color accessibility- Update Button, Listbox, Calendar, SideNav, Link to use the new tokens
+
+## 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/color.css

@@ -3,17 +3,17 @@
 .bg-disabled {background-color: light-dark(var(--color-neutral-100, #606162), var(--color-neutral-100, #606162))}
 .bg-inverted-default {background-color: light-dark(var(--color-neutral-300, #2d2e31), var(--color-neutral-20, #fafafa))}
 .bg-inverted-strong {background-color: light-dark(var(--color-neutral-400, #141414), var(--color-neutral-0, #ffffff))}
-.bg-overlay-active-danger {background-color: light-dark(#e132124D, #ff745f40)}
+.bg-overlay-active-danger {background-color: light-dark(#e132122E, #ff745f40)}
 .bg-overlay-active-default {background-color: light-dark(#14141429, #ffffff29)}
-.bg-overlay-active-on-danger {background-color: light-dark(#14141429, #14141429)}
+.bg-overlay-active-on-danger {background-color: light-dark(#14141466, #14141429)}
 .bg-overlay-active-on-default {background-color: light-dark(#14141429, #14141429)}
-.bg-overlay-active-on-primary {background-color: light-dark(#14141429, #14141429)}
+.bg-overlay-active-on-primary {background-color: light-dark(#14141466, #14141429)}
 .bg-overlay-active-primary {background-color: light-dark(#0265dc4D, #78bbfa40)}
-.bg-overlay-hover-danger {background-color: light-dark(#e132121A, #ff745f1A)}
+.bg-overlay-hover-danger {background-color: light-dark(#e132120F, #ff745f1A)}
 .bg-overlay-hover-default {background-color: light-dark(#14141414, #ffffff14)}
-.bg-overlay-hover-on-danger {background-color: light-dark(#ffffff29, #ffffff29)}
+.bg-overlay-hover-on-danger {background-color: light-dark(#14141433, #ffffff29)}
 .bg-overlay-hover-on-default {background-color: light-dark(#14141414, #ffffff14)}
-.bg-overlay-hover-on-primary {background-color: light-dark(#ffffff29, #ffffff29)}
+.bg-overlay-hover-on-primary {background-color: light-dark(#14141433, #ffffff29)}
 .bg-overlay-hover-primary {background-color: light-dark(#0265dc1A, #78bbfa1A)}
 .bg-primary-default {background-color: light-dark(var(--color-blue-500, #0265dc), var(--color-blue-300, #78bbfa))}
 .bg-primary-subdued {background-color: light-dark(var(--color-blue-100, #e0f2ff), #78bbfa33)}
@@ -33,8 +33,12 @@
 .border-color-status-warning {border-color: light-dark(var(--color-yellow-500, #ffbe00), var(--color-yellow-300, #ffe278))}
 .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))}
+.c-active-danger {color: light-dark(var(--color-red-600, #bf2a00), #ff745f)}
+.c-active-primary {color: light-dark(var(--color-blue-600, #004491), var(--color-blue-200, #b5deff))}
 .c-danger {color: light-dark(var(--status-color-danger, #e13212), #ff745f)}
 .c-default {color: light-dark(var(--color-neutral-400, #141414), var(--color-neutral-0, #ffffff))}
+.c-hover-danger {color: light-dark(var(--color-red-600, #bf2a00), #ff745f)}
+.c-hover-primary {color: light-dark(var(--color-blue-600, #004491), var(--color-blue-200, #b5deff))}
 .c-inverted {color: light-dark(var(--color-neutral-0, #ffffff), var(--color-neutral-400, #141414))}
 .c-on-danger {color: light-dark(var(--color-neutral-0, #ffffff), var(--color-neutral-400, #141414))}
 .c-on-primary {color: light-dark(var(--color-neutral-0, #ffffff), var(--color-neutral-400, #141414))}

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

@@ -3,17 +3,17 @@
 .bg-disabled {background-color: light-dark(var(--color-neutral-100, #606162), var(--color-neutral-100, #606162))}
 .bg-inverted-default {background-color: light-dark(var(--color-neutral-300, #2d2e31), var(--color-neutral-20, #fafafa))}
 .bg-inverted-strong {background-color: light-dark(var(--color-neutral-400, #141414), var(--color-neutral-0, #ffffff))}
-.bg-overlay-active-danger {background-color: light-dark(#e132124D, #ff745f40)}
+.bg-overlay-active-danger {background-color: light-dark(#e132122E, #ff745f40)}
 .bg-overlay-active-default {background-color: light-dark(#14141429, #ffffff29)}
-.bg-overlay-active-on-danger {background-color: light-dark(#14141429, #14141429)}
+.bg-overlay-active-on-danger {background-color: light-dark(#14141466, #14141429)}
 .bg-overlay-active-on-default {background-color: light-dark(#14141429, #14141429)}
-.bg-overlay-active-on-primary {background-color: light-dark(#14141429, #14141429)}
+.bg-overlay-active-on-primary {background-color: light-dark(#14141466, #14141429)}
 .bg-overlay-active-primary {background-color: light-dark(#0265dc4D, #78bbfa40)}
-.bg-overlay-hover-danger {background-color: light-dark(#e132121A, #ff745f1A)}
+.bg-overlay-hover-danger {background-color: light-dark(#e132120F, #ff745f1A)}
 .bg-overlay-hover-default {background-color: light-dark(#14141414, #ffffff14)}
-.bg-overlay-hover-on-danger {background-color: light-dark(#ffffff29, #ffffff29)}
+.bg-overlay-hover-on-danger {background-color: light-dark(#14141433, #ffffff29)}
 .bg-overlay-hover-on-default {background-color: light-dark(#14141414, #ffffff14)}
-.bg-overlay-hover-on-primary {background-color: light-dark(#ffffff29, #ffffff29)}
+.bg-overlay-hover-on-primary {background-color: light-dark(#14141433, #ffffff29)}
 .bg-overlay-hover-primary {background-color: light-dark(#0265dc1A, #78bbfa1A)}
 .bg-primary-default {background-color: light-dark(var(--color-blue-500, #0265dc), var(--color-blue-300, #78bbfa))}
 .bg-primary-subdued {background-color: light-dark(var(--color-blue-100, #e0f2ff), #78bbfa33)}
@@ -34,15 +34,20 @@
 .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)}
+.c-active-danger {color: light-dark(var(--color-red-600, #bf2a00), #ff745f)}
+.c-active-primary {color: light-dark(var(--color-blue-600, #004491), var(--color-blue-200, #b5deff))}
 .c-danger {color: light-dark(var(--status-color-danger, #e13212), #ff745f)}
 .c-default {color: light-dark(var(--color-neutral-400, #141414), var(--color-neutral-0, #ffffff))}
+.c-hover-danger {color: light-dark(var(--color-red-600, #bf2a00), #ff745f)}
+.c-hover-primary {color: light-dark(var(--color-blue-600, #004491), var(--color-blue-200, #b5deff))}
 .c-inverted {color: light-dark(var(--color-neutral-0, #ffffff), var(--color-neutral-400, #141414))}
 .c-on-danger {color: light-dark(var(--color-neutral-0, #ffffff), var(--color-neutral-400, #141414))}
 .c-on-primary {color: light-dark(var(--color-neutral-0, #ffffff), var(--color-neutral-400, #141414))}

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",
@@ -60,18 +61,22 @@ export const light = {
 	ForegroundColorOnPrimary: "#ffffff",
 	ForegroundColorOnDanger: "#ffffff",
 	ForegroundColorOnWarning: "#141414",
+	ForegroundColorActivePrimary: "#004491",
+	ForegroundColorActiveDanger: "#bf2a00",
+	ForegroundColorHoverPrimary: "#004491",
+	ForegroundColorHoverDanger: "#bf2a00",
 	OverlayColorActive: "#14141429",
 	OverlayColorActivePrimary: "#0265dc4D",
-	OverlayColorActiveDanger: "#e132124D",
+	OverlayColorActiveDanger: "#e132122E",
 	OverlayColorActiveOn: "#14141429",
-	OverlayColorActiveOnPrimary: "#14141429",
-	OverlayColorActiveOnDanger: "#14141429",
+	OverlayColorActiveOnPrimary: "#14141466",
+	OverlayColorActiveOnDanger: "#14141466",
 	OverlayColorHover: "#14141414",
 	OverlayColorHoverPrimary: "#0265dc1A",
-	OverlayColorHoverDanger: "#e132121A",
+	OverlayColorHoverDanger: "#e132120F",
 	OverlayColorHoverOn: "#14141414",
-	OverlayColorHoverOnPrimary: "#ffffff29",
-	OverlayColorHoverOnDanger: "#ffffff29",
+	OverlayColorHoverOnPrimary: "#14141433",
+	OverlayColorHoverOnDanger: "#14141433",
 	ShadowColor: "#14141414",
 	StatusColorInfo: "#0265dc",
 	StatusColorDanger: "#e13212",
@@ -105,6 +110,10 @@ export const dark = {
 	ForegroundColorOnPrimary: "#141414",
 	ForegroundColorOnDanger: "#141414",
 	ForegroundColorOnWarning: "#141414",
+	ForegroundColorActivePrimary: "#b5deff",
+	ForegroundColorActiveDanger: "#ff745f",
+	ForegroundColorHoverPrimary: "#b5deff",
+	ForegroundColorHoverDanger: "#ff745f",
 	OverlayColorActive: "#ffffff29",
 	OverlayColorActivePrimary: "#78bbfa40",
 	OverlayColorActiveDanger: "#ff745f40",

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

@@ -25,18 +25,22 @@ $light: (
   foreground-color-on-primary: #ffffff,
   foreground-color-on-danger: #ffffff,
   foreground-color-on-warning: #141414,
+  foreground-color-active-primary: #004491,
+  foreground-color-active-danger: #bf2a00,
+  foreground-color-hover-primary: #004491,
+  foreground-color-hover-danger: #bf2a00,
   overlay-color-active: #14141429,
   overlay-color-active-primary: #0265dc4D,
-  overlay-color-active-danger: #e132124D,
+  overlay-color-active-danger: #e132122E,
   overlay-color-active-on: #14141429,
-  overlay-color-active-on-primary: #14141429,
-  overlay-color-active-on-danger: #14141429,
+  overlay-color-active-on-primary: #14141466,
+  overlay-color-active-on-danger: #14141466,
   overlay-color-hover: #14141414,
   overlay-color-hover-primary: #0265dc1A,
-  overlay-color-hover-danger: #e132121A,
+  overlay-color-hover-danger: #e132120F,
   overlay-color-hover-on: #14141414,
-  overlay-color-hover-on-primary: #ffffff29,
-  overlay-color-hover-on-danger: #ffffff29,
+  overlay-color-hover-on-primary: #14141433,
+  overlay-color-hover-on-danger: #14141433,
   shadow-color: #14141414,
   status-color-info: #0265dc,
   status-color-danger: #e13212,
@@ -70,6 +74,10 @@ $dark: (
   foreground-color-on-primary: #141414,
   foreground-color-on-danger: #141414,
   foreground-color-on-warning: #141414,
+  foreground-color-active-primary: #b5deff,
+  foreground-color-active-danger: #ff745f,
+  foreground-color-hover-primary: #b5deff,
+  foreground-color-hover-danger: #ff745f,
   overlay-color-active: #ffffff29,
   overlay-color-active-primary: #78bbfa40,
   overlay-color-active-danger: #ff745f40,
@@ -89,10 +97,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" };
@@ -267,6 +268,46 @@ export const ForegroundColorOnWarning = {
     }
   }
 };
+export const ForegroundColorActivePrimary = {
+  value: "#004491",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#b5deff"
+      }
+    }
+  }
+};
+export const ForegroundColorActiveDanger = {
+  value: "#bf2a00",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#ff745f"
+      }
+    }
+  }
+};
+export const ForegroundColorHoverPrimary = {
+  value: "#004491",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#b5deff"
+      }
+    }
+  }
+};
+export const ForegroundColorHoverDanger = {
+  value: "#bf2a00",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#ff745f"
+      }
+    }
+  }
+};
 export const OverlayColorActive = {
   value: "#14141429",
   attributes: {
@@ -288,7 +329,7 @@ export const OverlayColorActivePrimary = {
   }
 };
 export const OverlayColorActiveDanger = {
-  value: "#e132124D",
+  value: "#e132122E",
   attributes: {
     appearance: {
       dark: {
@@ -308,7 +349,7 @@ export const OverlayColorActiveOn = {
   }
 };
 export const OverlayColorActiveOnPrimary = {
-  value: "#14141429",
+  value: "#14141466",
   attributes: {
     appearance: {
       dark: {
@@ -318,7 +359,7 @@ export const OverlayColorActiveOnPrimary = {
   }
 };
 export const OverlayColorActiveOnDanger = {
-  value: "#14141429",
+  value: "#14141466",
   attributes: {
     appearance: {
       dark: {
@@ -348,7 +389,7 @@ export const OverlayColorHoverPrimary = {
   }
 };
 export const OverlayColorHoverDanger = {
-  value: "#e132121A",
+  value: "#e132120F",
   attributes: {
     appearance: {
       dark: {
@@ -368,7 +409,7 @@ export const OverlayColorHoverOn = {
   }
 };
 export const OverlayColorHoverOnPrimary = {
-  value: "#ffffff29",
+  value: "#14141433",
   attributes: {
     appearance: {
       dark: {
@@ -378,7 +419,7 @@ export const OverlayColorHoverOnPrimary = {
   }
 };
 export const OverlayColorHoverOnDanger = {
-  value: "#ffffff29",
+  value: "#14141433",
   attributes: {
     appearance: {
       dark: {

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;
@@ -33,18 +34,22 @@ $foreground-color-inverted: var(--foreground-color-inverted, #ffffff);
 $foreground-color-on-primary: var(--foreground-color-on-primary, #ffffff);
 $foreground-color-on-danger: var(--foreground-color-on-danger, #ffffff);
 $foreground-color-on-warning: var(--foreground-color-on-warning, #141414);
+$foreground-color-active-primary: var(--foreground-color-active-primary, #004491);
+$foreground-color-active-danger: var(--foreground-color-active-danger, #bf2a00);
+$foreground-color-hover-primary: var(--foreground-color-hover-primary, #004491);
+$foreground-color-hover-danger: var(--foreground-color-hover-danger, #bf2a00);
 $overlay-color-active: var(--overlay-color-active, #14141429);
 $overlay-color-active-primary: var(--overlay-color-active-primary, #0265dc4D);
-$overlay-color-active-danger: var(--overlay-color-active-danger, #e132124D);
+$overlay-color-active-danger: var(--overlay-color-active-danger, #e132122E);
 $overlay-color-active-on: var(--overlay-color-active-on, #14141429);
-$overlay-color-active-on-primary: var(--overlay-color-active-on-primary, #14141429);
-$overlay-color-active-on-danger: var(--overlay-color-active-on-danger, #14141429);
+$overlay-color-active-on-primary: var(--overlay-color-active-on-primary, #14141466);
+$overlay-color-active-on-danger: var(--overlay-color-active-on-danger, #14141466);
 $overlay-color-hover: var(--overlay-color-hover, #14141414);
 $overlay-color-hover-primary: var(--overlay-color-hover-primary, #0265dc1A);
-$overlay-color-hover-danger: var(--overlay-color-hover-danger, #e132121A);
+$overlay-color-hover-danger: var(--overlay-color-hover-danger, #e132120F);
 $overlay-color-hover-on: var(--overlay-color-hover-on, #14141414);
-$overlay-color-hover-on-primary: var(--overlay-color-hover-on-primary, #ffffff29);
-$overlay-color-hover-on-danger: var(--overlay-color-hover-on-danger, #ffffff29);
+$overlay-color-hover-on-primary: var(--overlay-color-hover-on-primary, #14141433);
+$overlay-color-hover-on-danger: var(--overlay-color-hover-on-danger, #14141433);
 $shadow-color: var(--shadow-color, #14141414);
 $shadow-size-flat: 0rem 0rem 0rem;
 $shadow-size-float: 0rem 0.125rem 0.5rem;

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.1",
   "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%"

package/src/theme/core/foreground.json

@@ -82,6 +82,50 @@
             }
           }
         }
+      },
+      "active": {
+        "primary": {
+          "value": "{color.blue.600}",
+          "attributes": {
+            "appearance": {
+              "dark": {
+                "value": "{color.blue.200}"
+              }
+            }
+          }
+        },
+        "danger": {
+          "value": "{color.red.600}",
+          "attributes": {
+            "appearance": {
+              "dark": {
+                "value": "{status.color.danger.attributes.appearance.dark}"
+              }
+            }
+          }
+        }
+      },
+      "hover": {
+        "primary": {
+          "value": "{color.blue.600}",
+          "attributes": {
+            "appearance": {
+              "dark": {
+                "value": "{color.blue.200}"
+              }
+            }
+          }
+        },
+        "danger": {
+          "value": "{color.red.600}",
+          "attributes": {
+            "appearance": {
+              "dark": {
+                "value": "{status.color.danger.attributes.appearance.dark}"
+              }
+            }
+          }
+        }
       }
     }
   }

package/src/theme/core/overlay.json

@@ -23,7 +23,7 @@
           }
         },
         "danger": {
-          "value": "{color.red.500}4D",
+          "value": "{color.red.500}2E",
           "attributes": {
             "appearance": {
               "dark": {
@@ -44,7 +44,7 @@
             }
           },
           "primary": {
-            "value": "{color.neutral.400}29",
+            "value": "{color.neutral.400}66",
             "attributes": {
               "appearance": {
                 "dark": {
@@ -54,7 +54,7 @@
             }
           },
           "danger": {
-            "value": "{color.neutral.400}29",
+            "value": "{color.neutral.400}66",
             "attributes": {
               "appearance": {
                 "dark": {
@@ -87,7 +87,7 @@
           }
         },
         "danger": {
-          "value": "{color.red.500}1A",
+          "value": "{color.red.500}0F",
           "attributes": {
             "appearance": {
               "dark": {
@@ -108,7 +108,7 @@
             }
           },
           "primary": {
-            "value": "{color.neutral.0}29",
+            "value": "{color.neutral.400}33",
             "attributes": {
               "appearance": {
                 "dark": {
@@ -118,7 +118,7 @@
             }
           },
           "danger": {
-            "value": "{color.neutral.0}29",
+            "value": "{color.neutral.400}33",
             "attributes": {
               "appearance": {
                 "dark": {