@servicetitan/hammer-token 2.1.1 → 2.3.0

package/build/web/core/index.js

@@ -1,4 +1,5 @@
 import * as semantic from './semantic';
 import * as primitive from './primitive';
+import * as component from './component';
 const name = 'core';
-export { primitive, semantic, name };
+export { primitive, semantic, component, name };

package/build/web/core/raw.js

@@ -39,9 +39,12 @@ export const light = {
 	BackgroundColorStrong: "#f7f7f7",
 	BackgroundColorStronger: "#eeeeee",
 	BackgroundColorStrongest: "#bcbcbd",
-	BackgroundColorPrimary: "#0265dc",
-	BackgroundColorPrimarySubdued: "#e0f2ff",
+	BackgroundColorPrimary: "#0265DC",
+	BackgroundColorPrimarySubdued: "#E0F2FF",
+	BackgroundColorSuccess: "#007A4D",
+	BackgroundColorSuccessSubdued: "#CEF8E0",
 	BackgroundColorDanger: "#e13212",
+	BackgroundColorDangerSubdued: "#ffece9",
 	BackgroundColorWarning: "#ffbe00",
 	BackgroundColorDisabled: "#606162",
 	BackgroundColorInverted: "#2d2e31",
@@ -49,38 +52,40 @@ export const light = {
 	BorderColor: "#949596",
 	BorderColorSubdued: "#dfe0e1",
 	BorderColorStrong: "#444445",
-	BorderColorPrimary: "#0265dc",
+	BorderColorPrimary: "#0265DC",
+	BorderColorSuccess: "#007A4D",
 	BorderColorDanger: "#e13212",
-	FocusRingColor: "#0265dc",
+	FocusRingColor: "#0265DC",
 	FocusRingColorDanger: "#e13212",
 	ForegroundColor: "#141414",
 	ForegroundColorSubdued: "#737475",
-	ForegroundColorPrimary: "#0265dc",
+	ForegroundColorPrimary: "#0265DC",
 	ForegroundColorDanger: "#e13212",
 	ForegroundColorInverted: "#ffffff",
 	ForegroundColorOnPrimary: "#ffffff",
 	ForegroundColorOnDanger: "#ffffff",
+	ForegroundColorOnDangerSubdued: "#bf2a00",
 	ForegroundColorOnWarning: "#141414",
 	ForegroundColorActivePrimary: "#004491",
 	ForegroundColorActiveDanger: "#bf2a00",
 	ForegroundColorHoverPrimary: "#004491",
 	ForegroundColorHoverDanger: "#bf2a00",
 	OverlayColorActive: "#14141429",
-	OverlayColorActivePrimary: "#0265dc4D",
-	OverlayColorActiveDanger: "#e132122E",
+	OverlayColorActivePrimary: "#0265DC4D",
+	OverlayColorActiveDanger: "#e132124D",
 	OverlayColorActiveOn: "#14141429",
 	OverlayColorActiveOnPrimary: "#14141466",
 	OverlayColorActiveOnDanger: "#14141466",
 	OverlayColorHover: "#14141414",
-	OverlayColorHoverPrimary: "#0265dc1A",
-	OverlayColorHoverDanger: "#e132120F",
+	OverlayColorHoverPrimary: "#0265DC1A",
+	OverlayColorHoverDanger: "#e132121A",
 	OverlayColorHoverOn: "#14141414",
 	OverlayColorHoverOnPrimary: "#14141433",
 	OverlayColorHoverOnDanger: "#14141433",
 	ShadowColor: "#14141414",
-	StatusColorInfo: "#0265dc",
+	StatusColorInfo: "#0265DC",
 	StatusColorDanger: "#e13212",
-	StatusColorSuccess: "#007a4d",
+	StatusColorSuccess: "#007A4D",
 	StatusColorWarning: "#ffbe00"
 }
 export const dark = {
@@ -88,9 +93,12 @@ export const dark = {
 	BackgroundColorStrong: "#2d2e31",
 	BackgroundColorStronger: "#444445",
 	BackgroundColorStrongest: "#737475",
-	BackgroundColorPrimary: "#78bbfa",
-	BackgroundColorPrimarySubdued: "#78bbfa33",
+	BackgroundColorPrimary: "#78BBFA",
+	BackgroundColorPrimarySubdued: "#78BBFA33",
+	BackgroundColorSuccess: "#49CC93",
+	BackgroundColorSuccessSubdued: "#49CC9333",
 	BackgroundColorDanger: "#ff745f",
+	BackgroundColorDangerSubdued: "#ff745f33",
 	BackgroundColorWarning: "#ffe278",
 	BackgroundColorDisabled: "#606162",
 	BackgroundColorInverted: "#fafafa",
@@ -98,37 +106,39 @@ export const dark = {
 	BorderColor: "#606162",
 	BorderColorSubdued: "#444445",
 	BorderColorStrong: "#dfe0e1",
-	BorderColorPrimary: "#78bbfa",
+	BorderColorPrimary: "#78BBFA",
+	BorderColorSuccess: "#49CC93",
 	BorderColorDanger: "#ff745f",
-	FocusRingColor: "#78bbfa",
+	FocusRingColor: "#78BBFA",
 	FocusRingColorDanger: "#ff745f",
 	ForegroundColor: "#ffffff",
 	ForegroundColorSubdued: "#bcbcbd",
-	ForegroundColorPrimary: "#78bbfa",
+	ForegroundColorPrimary: "#78BBFA",
 	ForegroundColorDanger: "#ff745f",
 	ForegroundColorInverted: "#141414",
 	ForegroundColorOnPrimary: "#141414",
 	ForegroundColorOnDanger: "#141414",
+	ForegroundColorOnDangerSubdued: "#ffffff",
 	ForegroundColorOnWarning: "#141414",
-	ForegroundColorActivePrimary: "#b5deff",
+	ForegroundColorActivePrimary: "#B5DEFF",
 	ForegroundColorActiveDanger: "#ff745f",
-	ForegroundColorHoverPrimary: "#b5deff",
+	ForegroundColorHoverPrimary: "#B5DEFF",
 	ForegroundColorHoverDanger: "#ff745f",
 	OverlayColorActive: "#ffffff29",
-	OverlayColorActivePrimary: "#78bbfa40",
-	OverlayColorActiveDanger: "#ff745f40",
+	OverlayColorActivePrimary: "#78BBFA40",
+	OverlayColorActiveDanger: "#f94d3240",
 	OverlayColorActiveOn: "#14141429",
 	OverlayColorActiveOnPrimary: "#14141429",
 	OverlayColorActiveOnDanger: "#14141429",
 	OverlayColorHover: "#ffffff14",
-	OverlayColorHoverPrimary: "#78bbfa1A",
-	OverlayColorHoverDanger: "#ff745f1A",
+	OverlayColorHoverPrimary: "#78BBFA1A",
+	OverlayColorHoverDanger: "#f94d3226",
 	OverlayColorHoverOn: "#ffffff14",
 	OverlayColorHoverOnPrimary: "#ffffff29",
 	OverlayColorHoverOnDanger: "#ffffff29",
 	ShadowColor: "#ffffff14",
-	StatusColorInfo: "#78bbfa",
+	StatusColorInfo: "#78BBFA",
 	StatusColorDanger: "#ff745f",
-	StatusColorSuccess: "#49cc93",
+	StatusColorSuccess: "#49CC93",
 	StatusColorWarning: "#ffe278"
 }

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

@@ -3,9 +3,12 @@ $light: (
   background-color-strong: #f7f7f7,
   background-color-stronger: #eeeeee,
   background-color-strongest: #bcbcbd,
-  background-color-primary: #0265dc,
-  background-color-primary-subdued: #e0f2ff,
+  background-color-primary: #0265DC,
+  background-color-primary-subdued: #E0F2FF,
+  background-color-success: #007A4D,
+  background-color-success-subdued: #CEF8E0,
   background-color-danger: #e13212,
+  background-color-danger-subdued: #ffece9,
   background-color-warning: #ffbe00,
   background-color-disabled: #606162,
   background-color-inverted: #2d2e31,
@@ -13,38 +16,40 @@ $light: (
   border-color: #949596,
   border-color-subdued: #dfe0e1,
   border-color-strong: #444445,
-  border-color-primary: #0265dc,
+  border-color-primary: #0265DC,
+  border-color-success: #007A4D,
   border-color-danger: #e13212,
-  focus-ring-color: #0265dc,
+  focus-ring-color: #0265DC,
   focus-ring-color-danger: #e13212,
   foreground-color: #141414,
   foreground-color-subdued: #737475,
-  foreground-color-primary: #0265dc,
+  foreground-color-primary: #0265DC,
   foreground-color-danger: #e13212,
   foreground-color-inverted: #ffffff,
   foreground-color-on-primary: #ffffff,
   foreground-color-on-danger: #ffffff,
+  foreground-color-on-danger-subdued: #bf2a00,
   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: #e132122E,
+  overlay-color-active-primary: #0265DC4D,
+  overlay-color-active-danger: #e132124D,
   overlay-color-active-on: #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: #e132120F,
+  overlay-color-hover-primary: #0265DC1A,
+  overlay-color-hover-danger: #e132121A,
   overlay-color-hover-on: #14141414,
   overlay-color-hover-on-primary: #14141433,
   overlay-color-hover-on-danger: #14141433,
   shadow-color: #14141414,
-  status-color-info: #0265dc,
+  status-color-info: #0265DC,
   status-color-danger: #e13212,
-  status-color-success: #007a4d,
+  status-color-success: #007A4D,
   status-color-warning: #ffbe00,
 );
 $dark: (
@@ -52,9 +57,12 @@ $dark: (
   background-color-strong: #2d2e31,
   background-color-stronger: #444445,
   background-color-strongest: #737475,
-  background-color-primary: #78bbfa,
-  background-color-primary-subdued: #78bbfa33,
+  background-color-primary: #78BBFA,
+  background-color-primary-subdued: #78BBFA33,
+  background-color-success: #49CC93,
+  background-color-success-subdued: #49CC9333,
   background-color-danger: #ff745f,
+  background-color-danger-subdued: #ff745f33,
   background-color-warning: #ffe278,
   background-color-disabled: #606162,
   background-color-inverted: #fafafa,
@@ -62,38 +70,40 @@ $dark: (
   border-color: #606162,
   border-color-subdued: #444445,
   border-color-strong: #dfe0e1,
-  border-color-primary: #78bbfa,
+  border-color-primary: #78BBFA,
+  border-color-success: #49CC93,
   border-color-danger: #ff745f,
-  focus-ring-color: #78bbfa,
+  focus-ring-color: #78BBFA,
   focus-ring-color-danger: #ff745f,
   foreground-color: #ffffff,
   foreground-color-subdued: #bcbcbd,
-  foreground-color-primary: #78bbfa,
+  foreground-color-primary: #78BBFA,
   foreground-color-danger: #ff745f,
   foreground-color-inverted: #141414,
   foreground-color-on-primary: #141414,
   foreground-color-on-danger: #141414,
+  foreground-color-on-danger-subdued: #ffffff,
   foreground-color-on-warning: #141414,
-  foreground-color-active-primary: #b5deff,
+  foreground-color-active-primary: #B5DEFF,
   foreground-color-active-danger: #ff745f,
-  foreground-color-hover-primary: #b5deff,
+  foreground-color-hover-primary: #B5DEFF,
   foreground-color-hover-danger: #ff745f,
   overlay-color-active: #ffffff29,
-  overlay-color-active-primary: #78bbfa40,
-  overlay-color-active-danger: #ff745f40,
+  overlay-color-active-primary: #78BBFA40,
+  overlay-color-active-danger: #f94d3240,
   overlay-color-active-on: #14141429,
   overlay-color-active-on-primary: #14141429,
   overlay-color-active-on-danger: #14141429,
   overlay-color-hover: #ffffff14,
-  overlay-color-hover-primary: #78bbfa1A,
-  overlay-color-hover-danger: #ff745f1A,
+  overlay-color-hover-primary: #78BBFA1A,
+  overlay-color-hover-danger: #f94d3226,
   overlay-color-hover-on: #ffffff14,
   overlay-color-hover-on-primary: #ffffff29,
   overlay-color-hover-on-danger: #ffffff29,
   shadow-color: #ffffff14,
-  status-color-info: #78bbfa,
+  status-color-info: #78BBFA,
   status-color-danger: #ff745f,
-  status-color-success: #49cc93,
+  status-color-success: #49CC93,
   status-color-warning: #ffe278,
 );
 $nonColor: (

package/build/web/core/semantic.js

@@ -39,21 +39,41 @@ export const BackgroundColorStrongest = {
   }
 };
 export const BackgroundColorPrimary = {
-  value: "#0265dc",
+  value: "#0265DC",
   attributes: {
     appearance: {
       dark: {
-        value: "#78bbfa"
+        value: "#78BBFA"
       }
     }
   }
 };
 export const BackgroundColorPrimarySubdued = {
-  value: "#e0f2ff",
+  value: "#E0F2FF",
   attributes: {
     appearance: {
       dark: {
-        value: "#78bbfa33"
+        value: "#78BBFA33"
+      }
+    }
+  }
+};
+export const BackgroundColorSuccess = {
+  value: "#007A4D",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#49CC93"
+      }
+    }
+  }
+};
+export const BackgroundColorSuccessSubdued = {
+  value: "#CEF8E0",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#49CC9333"
       }
     }
   }
@@ -68,6 +88,16 @@ export const BackgroundColorDanger = {
     }
   }
 };
+export const BackgroundColorDangerSubdued = {
+  value: "#ffece9",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#ff745f33"
+      }
+    }
+  }
+};
 export const BackgroundColorWarning = {
   value: "#ffbe00",
   attributes: {
@@ -148,11 +178,21 @@ export const BorderColorStrong = {
   }
 };
 export const BorderColorPrimary = {
-  value: "#0265dc",
+  value: "#0265DC",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#78BBFA"
+      }
+    }
+  }
+};
+export const BorderColorSuccess = {
+  value: "#007A4D",
   attributes: {
     appearance: {
       dark: {
-        value: "#78bbfa"
+        value: "#49CC93"
       }
     }
   }
@@ -168,11 +208,11 @@ export const BorderColorDanger = {
   }
 };
 export const FocusRingColor = {
-  value: "#0265dc",
+  value: "#0265DC",
   attributes: {
     appearance: {
       dark: {
-        value: "#78bbfa"
+        value: "#78BBFA"
       }
     }
   }
@@ -209,11 +249,11 @@ export const ForegroundColorSubdued = {
   }
 };
 export const ForegroundColorPrimary = {
-  value: "#0265dc",
+  value: "#0265DC",
   attributes: {
     appearance: {
       dark: {
-        value: "#78bbfa"
+        value: "#78BBFA"
       }
     }
   }
@@ -258,6 +298,16 @@ export const ForegroundColorOnDanger = {
     }
   }
 };
+export const ForegroundColorOnDangerSubdued = {
+  value: "#bf2a00",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#ffffff"
+      }
+    }
+  }
+};
 export const ForegroundColorOnWarning = {
   value: "#141414",
   attributes: {
@@ -273,7 +323,7 @@ export const ForegroundColorActivePrimary = {
   attributes: {
     appearance: {
       dark: {
-        value: "#b5deff"
+        value: "#B5DEFF"
       }
     }
   }
@@ -293,7 +343,7 @@ export const ForegroundColorHoverPrimary = {
   attributes: {
     appearance: {
       dark: {
-        value: "#b5deff"
+        value: "#B5DEFF"
       }
     }
   }
@@ -319,21 +369,21 @@ export const OverlayColorActive = {
   }
 };
 export const OverlayColorActivePrimary = {
-  value: "#0265dc4D",
+  value: "#0265DC4D",
   attributes: {
     appearance: {
       dark: {
-        value: "#78bbfa40"
+        value: "#78BBFA40"
       }
     }
   }
 };
 export const OverlayColorActiveDanger = {
-  value: "#e132122E",
+  value: "#e132124D",
   attributes: {
     appearance: {
       dark: {
-        value: "#ff745f40"
+        value: "#f94d3240"
       }
     }
   }
@@ -379,21 +429,21 @@ export const OverlayColorHover = {
   }
 };
 export const OverlayColorHoverPrimary = {
-  value: "#0265dc1A",
+  value: "#0265DC1A",
   attributes: {
     appearance: {
       dark: {
-        value: "#78bbfa1A"
+        value: "#78BBFA1A"
       }
     }
   }
 };
 export const OverlayColorHoverDanger = {
-  value: "#e132120F",
+  value: "#e132121A",
   attributes: {
     appearance: {
       dark: {
-        value: "#ff745f1A"
+        value: "#f94d3226"
       }
     }
   }
@@ -442,11 +492,11 @@ export const ShadowSizeFlat = { value: "0rem 0rem 0rem" };
 export const ShadowSizeFloat = { value: "0rem 0.125rem 0.5rem" };
 export const ShadowSizeOverlay = { value: "0rem 0.5rem 1.5rem" };
 export const StatusColorInfo = {
-  value: "#0265dc",
+  value: "#0265DC",
   attributes: {
     appearance: {
       dark: {
-        value: "#78bbfa"
+        value: "#78BBFA"
       }
     }
   }
@@ -462,11 +512,11 @@ export const StatusColorDanger = {
   }
 };
 export const StatusColorSuccess = {
-  value: "#007a4d",
+  value: "#007A4D",
   attributes: {
     appearance: {
       dark: {
-        value: "#49cc93"
+        value: "#49CC93"
       }
     }
   }

package/build/web/core/semantic.scss

@@ -2,9 +2,12 @@ $background-color: var(--background-color, #ffffff);
 $background-color-strong: var(--background-color-strong, #f7f7f7);
 $background-color-stronger: var(--background-color-stronger, #eeeeee);
 $background-color-strongest: var(--background-color-strongest, #bcbcbd);
-$background-color-primary: var(--background-color-primary, #0265dc);
-$background-color-primary-subdued: var(--background-color-primary-subdued, #e0f2ff);
+$background-color-primary: var(--background-color-primary, #0265DC);
+$background-color-primary-subdued: var(--background-color-primary-subdued, #E0F2FF);
+$background-color-success: var(--background-color-success, #007A4D);
+$background-color-success-subdued: var(--background-color-success-subdued, #CEF8E0);
 $background-color-danger: var(--background-color-danger, #e13212);
+$background-color-danger-subdued: var(--background-color-danger-subdued, #ffece9);
 $background-color-warning: var(--background-color-warning, #ffbe00);
 $background-color-disabled: var(--background-color-disabled, #606162);
 $background-color-inverted: var(--background-color-inverted, #2d2e31);
@@ -21,32 +24,34 @@ $border-width-strong: 0.125rem;
 $border-color: var(--border-color, #949596);
 $border-color-subdued: var(--border-color-subdued, #dfe0e1);
 $border-color-strong: var(--border-color-strong, #444445);
-$border-color-primary: var(--border-color-primary, #0265dc);
+$border-color-primary: var(--border-color-primary, #0265DC);
+$border-color-success: var(--border-color-success, #007A4D);
 $border-color-danger: var(--border-color-danger, #e13212);
-$focus-ring-color: var(--focus-ring-color, #0265dc);
+$focus-ring-color: var(--focus-ring-color, #0265DC);
 $focus-ring-color-danger: var(--focus-ring-color-danger, #e13212);
 $focus-ring-width: 0.25rem;
 $foreground-color: var(--foreground-color, #141414);
 $foreground-color-subdued: var(--foreground-color-subdued, #737475);
-$foreground-color-primary: var(--foreground-color-primary, #0265dc);
+$foreground-color-primary: var(--foreground-color-primary, #0265DC);
 $foreground-color-danger: var(--foreground-color-danger, #e13212);
 $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-danger-subdued: var(--foreground-color-on-danger-subdued, #bf2a00);
 $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, #e132122E);
+$overlay-color-active-primary: var(--overlay-color-active-primary, #0265DC4D);
+$overlay-color-active-danger: var(--overlay-color-active-danger, #e132124D);
 $overlay-color-active-on: var(--overlay-color-active-on, #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, #e132120F);
+$overlay-color-hover-primary: var(--overlay-color-hover-primary, #0265DC1A);
+$overlay-color-hover-danger: var(--overlay-color-hover-danger, #e132121A);
 $overlay-color-hover-on: var(--overlay-color-hover-on, #14141414);
 $overlay-color-hover-on-primary: var(--overlay-color-hover-on-primary, #14141433);
 $overlay-color-hover-on-danger: var(--overlay-color-hover-on-danger, #14141433);
@@ -54,9 +59,9 @@ $shadow-color: var(--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: var(--status-color-info, #0265dc);
+$status-color-info: var(--status-color-info, #0265DC);
 $status-color-danger: var(--status-color-danger, #e13212);
-$status-color-success: var(--status-color-success, #007a4d);
+$status-color-success: var(--status-color-success, #007A4D);
 $status-color-warning: var(--status-color-warning, #ffbe00);
 $typography-paragraph-size-xsmall: 0.75rem;
 $typography-paragraph-size-small: 0.875rem;