@servicetitan/hammer-token 0.0.0-rc-1.48.0-20251104214834 → 0.0.0-rc-3.0.0-20260114215531

package/build/web/core/component.js

@@ -1,66 +1,87 @@
+/**
+ * @typedef {Object} TokenValue
+ * @property {string} value
+ */
+
+/**
+ * @typedef {Object} TokenWithAppearance
+ * @property {string} value
+ * @property {Object} extensions
+ * @property {Object} extensions.appearance
+ * @property {Object} extensions.appearance.dark
+ * @property {string} extensions.appearance.dark.value
+ */
+
+/** @type {TokenWithAppearance} */
 export const ButtonPrimaryForegroundColor = {
-  value: "#ffffff",
-  attributes: {
+  value: "{foreground.color.on.primary}",
+  extensions: {
     appearance: {
       dark: {
-        value: "#141414"
+        value: "{foreground.color.on.primary}"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonPrimaryForegroundColorHover = {
-  value: "#ffffff",
-  attributes: {
+  value: "{foreground.color.on.primary}",
+  extensions: {
     appearance: {
       dark: {
-        value: "#141414"
+        value: "{foreground.color.on.primary}"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonPrimaryForegroundColorActive = {
-  value: "#ffffff",
-  attributes: {
+  value: "{foreground.color.on.primary}",
+  extensions: {
     appearance: {
       dark: {
-        value: "#141414"
+        value: "{foreground.color.on.primary}"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonPrimaryBackgroundColor = {
-  value: "#0265DC",
-  attributes: {
+  value: "{background.color.primary}",
+  extensions: {
     appearance: {
       dark: {
-        value: "#78BBFA"
+        value: "{background.color.primary}"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonPrimaryBackgroundColorHover = {
-  value: "#0655b4ff",
-  attributes: {
+  value: "#0065de",
+  extensions: {
     appearance: {
       dark: {
-        value: "#8ec6fbff"
+        value: "#0065de"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonPrimaryBackgroundColorActive = {
-  value: "#09458cff",
-  attributes: {
+  value: "#004da9",
+  extensions: {
     appearance: {
       dark: {
-        value: "#68a0d5ff"
+        value: "#004da9"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonPrimaryBorderColor = {
-  value: "transparent",
-  attributes: {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
         value: "transparent"
@@ -68,80 +89,89 @@ export const ButtonPrimaryBorderColor = {
     }
   }
 };
+/** @type {TokenValue} */
 export const ButtonPrimaryBorderRadius = { value: "0.375rem" };
+/** @type {TokenWithAppearance} */
 export const ButtonPrimaryFocusRingColor = {
-  value: "#0265DC",
-  attributes: {
+  value: "#1a82ff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#78BBFA"
+        value: "#1a82ff"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonSecondaryForegroundColor = {
-  value: "#141414",
-  attributes: {
+  value: "#040404",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff"
+        value: "#040404"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonSecondaryForegroundColorHover = {
-  value: "#141414",
-  attributes: {
+  value: "#040404",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff"
+        value: "#040404"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonSecondaryForegroundColorActive = {
-  value: "#141414",
-  attributes: {
+  value: "#040404",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff"
+        value: "#040404"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonSecondaryBackgroundColor = {
-  value: "#0404040f",
-  attributes: {
+  value: "{background.color.secondary}",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff0f"
+        value: "{background.color.secondary}"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonSecondaryBackgroundColorHover = {
-  value: "#05050522",
-  attributes: {
+  value: "#04040414",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff22"
+        value: "#04040414"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonSecondaryBackgroundColorActive = {
-  value: "#07070735",
-  attributes: {
+  value: "#04040429",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff35"
+        value: "#04040429"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonSecondaryBorderColor = {
-  value: "transparent",
-  attributes: {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
         value: "transparent"
@@ -149,50 +179,56 @@ export const ButtonSecondaryBorderColor = {
     }
   }
 };
+/** @type {TokenValue} */
 export const ButtonSecondaryBorderRadius = { value: "0.375rem" };
+/** @type {TokenWithAppearance} */
 export const ButtonSecondaryFocusRingColor = {
-  value: "#0265DC",
-  attributes: {
+  value: "#1a82ff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#78BBFA"
+        value: "#1a82ff"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonGhostForegroundColor = {
-  value: "#141414",
-  attributes: {
+  value: "#040404",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff"
+        value: "#040404"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonGhostForegroundColorHover = {
-  value: "#141414",
-  attributes: {
+  value: "#040404",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff"
+        value: "#040404"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonGhostForegroundColorActive = {
-  value: "#141414",
-  attributes: {
+  value: "#040404",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff"
+        value: "#040404"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonGhostBackgroundColor = {
-  value: "transparent",
-  attributes: {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
         value: "transparent"
@@ -200,9 +236,10 @@ export const ButtonGhostBackgroundColor = {
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonGhostBackgroundColorHover = {
-  value: "#14141414",
-  attributes: {
+  value: "#8b8b8b14",
+  extensions: {
     appearance: {
       dark: {
         value: "#ffffff14"
@@ -210,9 +247,10 @@ export const ButtonGhostBackgroundColorHover = {
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonGhostBackgroundColorActive = {
-  value: "#14141429",
-  attributes: {
+  value: "#8b8b8b29",
+  extensions: {
     appearance: {
       dark: {
         value: "#ffffff29"
@@ -220,9 +258,10 @@ export const ButtonGhostBackgroundColorActive = {
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonGhostBorderColor = {
-  value: "transparent",
-  attributes: {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
         value: "transparent"
@@ -230,80 +269,89 @@ export const ButtonGhostBorderColor = {
     }
   }
 };
+/** @type {TokenValue} */
 export const ButtonGhostBorderRadius = { value: "0.375rem" };
+/** @type {TokenWithAppearance} */
 export const ButtonGhostFocusRingColor = {
-  value: "#0265DC",
-  attributes: {
+  value: "#1a82ff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#78BBFA"
+        value: "#1a82ff"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonDangerPrimaryForegroundColor = {
-  value: "#ffffff",
-  attributes: {
+  value: "{foreground.color.on.danger}",
+  extensions: {
     appearance: {
       dark: {
-        value: "#141414"
+        value: "{foreground.color.on.danger}"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonDangerPrimaryForegroundColorHover = {
-  value: "#ffffff",
-  attributes: {
+  value: "{foreground.color.on.danger}",
+  extensions: {
     appearance: {
       dark: {
-        value: "#141414"
+        value: "{foreground.color.on.danger}"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonDangerPrimaryForegroundColorActive = {
-  value: "#ffffff",
-  attributes: {
+  value: "{foreground.color.on.danger}",
+  extensions: {
     appearance: {
       dark: {
-        value: "#141414"
+        value: "{foreground.color.on.danger}"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonDangerPrimaryBackgroundColor = {
-  value: "#e13212",
-  attributes: {
+  value: "{background.color.danger}",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "{background.color.danger}"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonDangerPrimaryBackgroundColorHover = {
-  value: "#b82c12ff",
-  attributes: {
+  value: "#d62100",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff8a79ff"
+        value: "#d62100"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonDangerPrimaryBackgroundColorActive = {
-  value: "#8f2613ff",
-  attributes: {
+  value: "#a31900",
+  extensions: {
     appearance: {
       dark: {
-        value: "#d96553ff"
+        value: "#a31900"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonDangerPrimaryBorderColor = {
-  value: "transparent",
-  attributes: {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
         value: "transparent"
@@ -311,80 +359,89 @@ export const ButtonDangerPrimaryBorderColor = {
     }
   }
 };
+/** @type {TokenValue} */
 export const ButtonDangerPrimaryBorderRadius = { value: "0.375rem" };
+/** @type {TokenWithAppearance} */
 export const ButtonDangerPrimaryFocusRingColor = {
-  value: "#e13212",
-  attributes: {
+  value: "#ff3914",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "#ff3914"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonDangerSecondaryForegroundColor = {
-  value: "#bf2a00",
-  attributes: {
+  value: "#d62100",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff"
+        value: "#d62100"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonDangerSecondaryForegroundColorHover = {
-  value: "#bf2a00",
-  attributes: {
+  value: "#d62100",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "#d62100"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonDangerSecondaryForegroundColorActive = {
-  value: "#bf2a00",
-  attributes: {
+  value: "#d62100",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "#d62100"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonDangerSecondaryBackgroundColor = {
-  value: "#ffece9",
-  attributes: {
+  value: "{background.color.danger.subdued}",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f33"
+        value: "{background.color.danger.subdued}"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonDangerSecondaryBackgroundColorHover = {
-  value: "#fcd9d4ff",
-  attributes: {
+  value: "#ffac9e",
+  extensions: {
     appearance: {
       dark: {
-        value: "#fe6e5852"
+        value: "#ffac9e"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonDangerSecondaryBackgroundColorActive = {
-  value: "#f6b4a9ff",
-  attributes: {
+  value: "#ff8974",
+  extensions: {
     appearance: {
       dark: {
-        value: "#fe6a5466"
+        value: "#ff8974"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ButtonDangerSecondaryBorderColor = {
-  value: "transparent",
-  attributes: {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
         value: "transparent"
@@ -392,253 +449,177 @@ export const ButtonDangerSecondaryBorderColor = {
     }
   }
 };
+/** @type {TokenValue} */
 export const ButtonDangerSecondaryBorderRadius = { value: "0.375rem" };
+/** @type {TokenWithAppearance} */
 export const ButtonDangerSecondaryFocusRingColor = {
-  value: "#e13212",
-  attributes: {
+  value: "#ff3914",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "#ff3914"
       }
     }
   }
 };
-export const CheckboxUncheckedFillColorDefault = {
-  value: "#141414",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const CheckboxCheckedForegroundColor = {
+  value: "{foreground.color.primary}",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff"
+        value: "{foreground.color.primary}"
       }
     }
   }
 };
-export const CheckboxUncheckedFillColorHover = {
-  value: "#141414",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const CheckboxCheckedForegroundColorHover = {
+  value: "#0065de",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff"
+        value: "#0065de"
       }
     }
   }
 };
-export const CheckboxUncheckedFillColorActive = {
-  value: "#141414",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const CheckboxCheckedForegroundColorActive = {
+  value: "#0065de",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff"
-      }
-    }
-  }
-};
-export const CheckboxUncheckedBackgroundColorDefault = {
-  value: "transparent",
-  attributes: {
-    appearance: {
-      dark: {
-        value: "transparent"
-      }
-    }
-  }
-};
-export const CheckboxUncheckedBackgroundColorHover = {
-  value: "#14141414",
-  attributes: {
-    appearance: {
-      dark: {
-        value: "#ffffff14"
-      }
-    }
-  }
-};
-export const CheckboxUncheckedBackgroundColorActive = {
-  value: "#14141429",
-  attributes: {
-    appearance: {
-      dark: {
-        value: "#ffffff29"
-      }
-    }
-  }
-};
-export const CheckboxCheckedFillColorDefault = {
-  value: "#0265DC",
-  attributes: {
-    appearance: {
-      dark: {
-        value: "#78BBFA"
-      }
-    }
-  }
-};
-export const CheckboxCheckedFillColorHover = {
-  value: "#004ba0d1",
-  attributes: {
-    appearance: {
-      dark: {
-        value: "#abd8feda"
-      }
-    }
-  }
-};
-export const CheckboxCheckedFillColorActive = {
-  value: "#0151afb8",
-  attributes: {
-    appearance: {
-      dark: {
-        value: "#abd8fee0"
-      }
-    }
-  }
-};
-export const CheckboxCheckedBackgroundColorDefault = {
-  value: "transparent",
-  attributes: {
-    appearance: {
-      dark: {
-        value: "transparent"
+        value: "#0065de"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const CheckboxCheckedBackgroundColorHover = {
-  value: "#0265dc14",
-  attributes: {
-    appearance: {
-      dark: {
-        value: "#78bbfa14"
-      }
-    }
-  }
-};
-export const CheckboxCheckedBackgroundColorActive = {
-  value: "#0265dc29",
-  attributes: {
-    appearance: {
-      dark: {
-        value: "#78bbfa29"
-      }
-    }
-  }
-};
-export const CheckboxUncheckedErrorFillColorDefault = {
-  value: "#e13212",
-  attributes: {
-    appearance: {
-      dark: {
-        value: "#ff745f"
-      }
-    }
-  }
-};
-export const CheckboxUncheckedErrorFillColorHover = {
-  value: "#bf2a00",
-  attributes: {
+  value: "#1a82ff1A",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "#1a82ff1A"
       }
     }
   }
 };
-export const CheckboxUncheckedErrorFillColorActive = {
-  value: "#bf2a00",
-  attributes: {
+/** @type {TokenValue} */
+export const CheckboxCheckedBorderRadius = { value: "0.1875rem" };
+/** @type {TokenWithAppearance} */
+export const CheckboxCheckedFocusRingColor = {
+  value: "#1a82ff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "#1a82ff"
       }
     }
   }
 };
-export const CheckboxUncheckedErrorBackgroundColorDefault = {
-  value: "transparent",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const CheckboxUncheckedBackgroundColorHover = {
+  value: "#8b8b8b14",
+  extensions: {
     appearance: {
       dark: {
-        value: "transparent"
+        value: "#8b8b8b14"
       }
     }
   }
 };
-export const CheckboxUncheckedErrorBackgroundColorHover = {
-  value: "#e132120f",
-  attributes: {
+/** @type {TokenValue} */
+export const CheckboxUncheckedBorderRadius = { value: "0.1875rem" };
+/** @type {TokenWithAppearance} */
+export const CheckboxUncheckedFocusRingColor = {
+  value: "#1a82ff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#f94d321a"
+        value: "#1a82ff"
       }
     }
   }
 };
-export const CheckboxUncheckedErrorBackgroundColorActive = {
-  value: "#e132122e",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const CheckboxCheckedErrorForegroundColor = {
+  value: "{foreground.color.danger}",
+  extensions: {
     appearance: {
       dark: {
-        value: "#f94d3240"
+        value: "{foreground.color.danger}"
       }
     }
   }
 };
-export const CheckboxCheckedErrorFillColorDefault = {
-  value: "#e13212",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const CheckboxCheckedErrorForegroundColorHover = {
+  value: "#d62100",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "#d62100"
       }
     }
   }
 };
-export const CheckboxCheckedErrorFillColorHover = {
-  value: "#bf2a00",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const CheckboxCheckedErrorForegroundColorActive = {
+  value: "#d62100",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "#d62100"
       }
     }
   }
 };
-export const CheckboxCheckedErrorFillColorActive = {
-  value: "#bf2a00",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const CheckboxCheckedErrorBackgroundColorHover = {
+  value: "#ff39141A",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "#ff39141A"
       }
     }
   }
 };
-export const CheckboxCheckedErrorBackgroundColorDefault = {
-  value: "transparent",
-  attributes: {
+/** @type {TokenValue} */
+export const CheckboxCheckedErrorBorderRadius = { value: "0.1875rem" };
+/** @type {TokenWithAppearance} */
+export const CheckboxCheckedErrorFocusRingColor = {
+  value: "#ff3914",
+  extensions: {
     appearance: {
       dark: {
-        value: "transparent"
+        value: "#ff3914"
       }
     }
   }
 };
-export const CheckboxCheckedErrorBackgroundColorHover = {
-  value: "#e132120f",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const CheckboxUncheckedErrorBackgroundColorHover = {
+  value: "#ff39141A",
+  extensions: {
     appearance: {
       dark: {
-        value: "#f94d321a"
+        value: "#ff39141A"
       }
     }
   }
 };
-export const CheckboxCheckedErrorBackgroundColorActive = {
-  value: "#e132122e",
-  attributes: {
+/** @type {TokenValue} */
+export const CheckboxUncheckedErrorBorderRadius = { value: "0.1875rem" };
+/** @type {TokenWithAppearance} */
+export const CheckboxUncheckedErrorFocusRingColor = {
+  value: "#ff3914",
+  extensions: {
     appearance: {
       dark: {
-        value: "#f94d3240"
+        value: "#ff3914"
       }
     }
   }