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

package/build/web/core/component.js

@@ -1,309 +1,428 @@
-export const ButtonPrimaryForegroundColor = {
-  value: "#ffffff",
-  attributes: {
+/**
+ * @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 AlertBackgroundColor = {
+  value: "{background.color.default}",
+  extensions: {
     appearance: {
       dark: {
-        value: "#141414"
+        value: "{background.color.default}"
       }
     }
   }
 };
-export const ButtonPrimaryForegroundColorHover = {
-  value: "#ffffff",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const AlertBorderColorInfo = {
+  value: "#1a82ff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#141414"
+        value: "#1a82ff"
       }
     }
   }
 };
-export const ButtonPrimaryForegroundColorActive = {
-  value: "#ffffff",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const AlertBorderColorSuccess = {
+  value: "#09a569",
+  extensions: {
     appearance: {
       dark: {
-        value: "#141414"
+        value: "#09a569"
       }
     }
   }
 };
-export const ButtonPrimaryBackgroundColor = {
-  value: "#0265DC",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const AlertBorderColorWarning = {
+  value: "#d6a000",
+  extensions: {
     appearance: {
       dark: {
-        value: "#78BBFA"
+        value: "#d6a000"
       }
     }
   }
 };
-export const ButtonPrimaryBackgroundColorHover = {
-  value: "#0655b4ff",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const AlertBorderColorDanger = {
+  value: "#ff3914",
+  extensions: {
     appearance: {
       dark: {
-        value: "#8ec6fbff"
+        value: "#ff3914"
       }
     }
   }
 };
-export const ButtonPrimaryBackgroundColorActive = {
-  value: "#09458cff",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const AlertStatusIconColorInfo = {
+  value: "#1a82ff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#68a0d5ff"
+        value: "#1a82ff"
       }
     }
   }
 };
-export const ButtonPrimaryBorderColor = {
-  value: "transparent",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const AlertStatusIconColorSuccess = {
+  value: "#09a569",
+  extensions: {
     appearance: {
       dark: {
-        value: "transparent"
+        value: "#09a569"
       }
     }
   }
 };
-export const ButtonPrimaryBorderRadius = { value: "0.375rem" };
-export const ButtonPrimaryFocusRingColor = {
-  value: "#0265DC",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const AlertStatusIconColorWarning = {
+  value: "#d6a000",
+  extensions: {
     appearance: {
       dark: {
-        value: "#78BBFA"
+        value: "#d6a000"
       }
     }
   }
 };
-export const ButtonSecondaryForegroundColor = {
-  value: "#141414",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const AlertStatusIconColorDanger = {
+  value: "#ff3914",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff"
+        value: "#ff3914"
       }
     }
   }
 };
-export const ButtonSecondaryForegroundColorHover = {
-  value: "#141414",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const AlertCloseButtonForegroundColor = {
+  value: "#040404",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff"
+        value: "#040404"
       }
     }
   }
 };
-export const ButtonSecondaryForegroundColorActive = {
-  value: "#141414",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const AnnouncementBackgroundColorInfo = {
+  value: "#1a82ff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff"
+        value: "#1a82ff"
       }
     }
   }
 };
-export const ButtonSecondaryBackgroundColor = {
-  value: "#0404040f",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const AnnouncementBackgroundColorSuccess = {
+  value: "#09a569",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff0f"
+        value: "#09a569"
       }
     }
   }
 };
-export const ButtonSecondaryBackgroundColorHover = {
-  value: "#05050522",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const AnnouncementBackgroundColorWarning = {
+  value: "#d6a000",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff22"
+        value: "#d6a000"
       }
     }
   }
 };
-export const ButtonSecondaryBackgroundColorActive = {
-  value: "#07070735",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const AnnouncementBackgroundColorDanger = {
+  value: "#ff3914",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff35"
+        value: "#ff3914"
       }
     }
   }
 };
-export const ButtonSecondaryBorderColor = {
-  value: "transparent",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const AnnouncementForegroundColorInfo = {
+  value: "{foreground.color.on.primary}",
+  extensions: {
     appearance: {
       dark: {
-        value: "transparent"
+        value: "{foreground.color.on.primary}"
       }
     }
   }
 };
-export const ButtonSecondaryBorderRadius = { value: "0.375rem" };
-export const ButtonSecondaryFocusRingColor = {
-  value: "#0265DC",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const AnnouncementForegroundColorSuccess = {
+  value: "{foreground.color.on.success}",
+  extensions: {
     appearance: {
       dark: {
-        value: "#78BBFA"
+        value: "{foreground.color.on.success}"
       }
     }
   }
 };
-export const ButtonGhostForegroundColor = {
-  value: "#141414",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const AnnouncementForegroundColorWarning = {
+  value: "#040404",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff"
+        value: "#040404"
       }
     }
   }
 };
-export const ButtonGhostForegroundColorHover = {
-  value: "#141414",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const AnnouncementForegroundColorDanger = {
+  value: "{foreground.color.on.danger}",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff"
+        value: "{foreground.color.on.danger}"
       }
     }
   }
 };
-export const ButtonGhostForegroundColorActive = {
-  value: "#141414",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const AnnouncementActionButtonBackgroundColorInfo = {
+  value: "{background.color.secondary.strong}",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff"
+        value: "{background.color.secondary.strong}"
       }
     }
   }
 };
-export const ButtonGhostBackgroundColor = {
-  value: "transparent",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const AnnouncementActionButtonBackgroundColorSuccess = {
+  value: "{background.color.secondary.strong}",
+  extensions: {
     appearance: {
       dark: {
-        value: "transparent"
+        value: "{background.color.secondary.strong}"
       }
     }
   }
 };
-export const ButtonGhostBackgroundColorHover = {
-  value: "#14141414",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const AnnouncementActionButtonBackgroundColorWarning = {
+  value: "{background.color.secondary.strong}",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff14"
+        value: "{background.color.secondary.strong}"
       }
     }
   }
 };
-export const ButtonGhostBackgroundColorActive = {
-  value: "#14141429",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const AnnouncementActionButtonBackgroundColorDanger = {
+  value: "{background.color.secondary.strong}",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff29"
+        value: "{background.color.secondary.strong}"
       }
     }
   }
 };
-export const ButtonGhostBorderColor = {
-  value: "transparent",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const AvatarBackgroundColor = {
+  value: "{background.color.stronger}",
+  extensions: {
     appearance: {
       dark: {
-        value: "transparent"
+        value: "{background.color.stronger}"
       }
     }
   }
 };
-export const ButtonGhostBorderRadius = { value: "0.375rem" };
-export const ButtonGhostFocusRingColor = {
-  value: "#0265DC",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const AvatarForegroundColor = {
+  value: "#040404",
+  extensions: {
     appearance: {
       dark: {
-        value: "#78BBFA"
+        value: "#040404"
       }
     }
   }
 };
-export const ButtonDangerPrimaryForegroundColor = {
+/** @type {TokenWithAppearance} */
+export const AvatarBorderColor = {
   value: "#ffffff",
-  attributes: {
+  extensions: {
     appearance: {
       dark: {
-        value: "#141414"
+        value: "#ffffff"
       }
     }
   }
 };
-export const ButtonDangerPrimaryForegroundColorHover = {
-  value: "#ffffff",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const AvatarIndicatorBackgroundColorOnline = {
+  value: "#09a569",
+  extensions: {
     appearance: {
       dark: {
-        value: "#141414"
+        value: "#09a569"
       }
     }
   }
 };
-export const ButtonDangerPrimaryForegroundColorActive = {
-  value: "#ffffff",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const AvatarIndicatorBackgroundColorOffline = {
+  value: "{background.color.default}",
+  extensions: {
     appearance: {
       dark: {
-        value: "#141414"
+        value: "{background.color.default}"
       }
     }
   }
 };
-export const ButtonDangerPrimaryBackgroundColor = {
-  value: "#e13212",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const AvatarIndicatorBackgroundColorDisabled = {
+  value: "#dfdfdf",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "#dfdfdf"
       }
     }
   }
 };
-export const ButtonDangerPrimaryBackgroundColorHover = {
-  value: "#b82c12ff",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const AvatarIndicatorBorderColor = {
+  value: "#e5e5e5",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff8a79ff"
+        value: "#e5e5e5"
       }
     }
   }
 };
-export const ButtonDangerPrimaryBackgroundColorActive = {
-  value: "#8f2613ff",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const BadgeBackgroundColor = {
+  value: "{background.color.danger}",
+  extensions: {
     appearance: {
       dark: {
-        value: "#d96553ff"
+        value: "{background.color.danger}"
       }
     }
   }
 };
-export const ButtonDangerPrimaryBorderColor = {
-  value: "transparent",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const BadgeForegroundColor = {
+  value: "{foreground.color.on.danger}",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "{foreground.color.on.danger}"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const ButtonPrimaryForegroundColor = {
+  value: "{foreground.color.on.primary}",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "{foreground.color.on.primary}"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const ButtonPrimaryForegroundColorHover = {
+  value: "{foreground.color.on.primary}",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "{foreground.color.on.primary}"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const ButtonPrimaryForegroundColorActive = {
+  value: "{foreground.color.on.primary}",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "{foreground.color.on.primary}"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const ButtonPrimaryBackgroundColor = {
+  value: "{background.color.primary}",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "{background.color.primary}"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const ButtonPrimaryBackgroundColorHover = {
+  value: "#0065de",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#0065de"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const ButtonPrimaryBackgroundColorActive = {
+  value: "#004da9",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#004da9"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const ButtonPrimaryBorderColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
         value: "transparent"
@@ -311,80 +430,89 @@ export const ButtonDangerPrimaryBorderColor = {
     }
   }
 };
-export const ButtonDangerPrimaryBorderRadius = { value: "0.375rem" };
-export const ButtonDangerPrimaryFocusRingColor = {
-  value: "#e13212",
-  attributes: {
+/** @type {TokenValue} */
+export const ButtonPrimaryBorderRadius = { value: "0.375rem" };
+/** @type {TokenWithAppearance} */
+export const ButtonPrimaryFocusRingColor = {
+  value: "#1a82ff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "#1a82ff"
       }
     }
   }
 };
-export const ButtonDangerSecondaryForegroundColor = {
-  value: "#bf2a00",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ButtonSecondaryForegroundColor = {
+  value: "#040404",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff"
+        value: "#040404"
       }
     }
   }
 };
-export const ButtonDangerSecondaryForegroundColorHover = {
-  value: "#bf2a00",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ButtonSecondaryForegroundColorHover = {
+  value: "#040404",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "#040404"
       }
     }
   }
 };
-export const ButtonDangerSecondaryForegroundColorActive = {
-  value: "#bf2a00",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ButtonSecondaryForegroundColorActive = {
+  value: "#040404",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "#040404"
       }
     }
   }
 };
-export const ButtonDangerSecondaryBackgroundColor = {
-  value: "#ffece9",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ButtonSecondaryBackgroundColor = {
+  value: "{background.color.secondary}",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f33"
+        value: "{background.color.secondary}"
       }
     }
   }
 };
-export const ButtonDangerSecondaryBackgroundColorHover = {
-  value: "#fcd9d4ff",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ButtonSecondaryBackgroundColorHover = {
+  value: "#04040414",
+  extensions: {
     appearance: {
       dark: {
-        value: "#fe6e5852"
+        value: "#04040414"
       }
     }
   }
 };
-export const ButtonDangerSecondaryBackgroundColorActive = {
-  value: "#f6b4a9ff",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ButtonSecondaryBackgroundColorActive = {
+  value: "#04040429",
+  extensions: {
     appearance: {
       dark: {
-        value: "#fe6a5466"
+        value: "#04040429"
       }
     }
   }
 };
-export const ButtonDangerSecondaryBorderColor = {
-  value: "transparent",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ButtonSecondaryBorderColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
         value: "transparent"
@@ -392,50 +520,56 @@ export const ButtonDangerSecondaryBorderColor = {
     }
   }
 };
-export const ButtonDangerSecondaryBorderRadius = { value: "0.375rem" };
-export const ButtonDangerSecondaryFocusRingColor = {
-  value: "#e13212",
-  attributes: {
+/** @type {TokenValue} */
+export const ButtonSecondaryBorderRadius = { value: "0.375rem" };
+/** @type {TokenWithAppearance} */
+export const ButtonSecondaryFocusRingColor = {
+  value: "#1a82ff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "#1a82ff"
       }
     }
   }
 };
-export const CheckboxUncheckedFillColorDefault = {
-  value: "#141414",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ButtonGhostForegroundColor = {
+  value: "#040404",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff"
+        value: "#040404"
       }
     }
   }
 };
-export const CheckboxUncheckedFillColorHover = {
-  value: "#141414",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ButtonGhostForegroundColorHover = {
+  value: "#040404",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff"
+        value: "#040404"
       }
     }
   }
 };
-export const CheckboxUncheckedFillColorActive = {
-  value: "#141414",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ButtonGhostForegroundColorActive = {
+  value: "#040404",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff"
+        value: "#040404"
       }
     }
   }
 };
-export const CheckboxUncheckedBackgroundColorDefault = {
-  value: "transparent",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ButtonGhostBackgroundColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
         value: "transparent"
@@ -443,9 +577,10 @@ export const CheckboxUncheckedBackgroundColorDefault = {
     }
   }
 };
-export const CheckboxUncheckedBackgroundColorHover = {
-  value: "#14141414",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ButtonGhostBackgroundColorHover = {
+  value: "#8b8b8b14",
+  extensions: {
     appearance: {
       dark: {
         value: "#ffffff14"
@@ -453,9 +588,10 @@ export const CheckboxUncheckedBackgroundColorHover = {
     }
   }
 };
-export const CheckboxUncheckedBackgroundColorActive = {
-  value: "#14141429",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ButtonGhostBackgroundColorActive = {
+  value: "#8b8b8b29",
+  extensions: {
     appearance: {
       dark: {
         value: "#ffffff29"
@@ -463,39 +599,100 @@ export const CheckboxUncheckedBackgroundColorActive = {
     }
   }
 };
-export const CheckboxCheckedFillColorDefault = {
-  value: "#0265DC",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ButtonGhostBorderColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "transparent"
+      }
+    }
+  }
+};
+/** @type {TokenValue} */
+export const ButtonGhostBorderRadius = { value: "0.375rem" };
+/** @type {TokenWithAppearance} */
+export const ButtonGhostFocusRingColor = {
+  value: "#1a82ff",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#1a82ff"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const ButtonDangerPrimaryForegroundColor = {
+  value: "{foreground.color.on.danger}",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "{foreground.color.on.danger}"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const ButtonDangerPrimaryForegroundColorHover = {
+  value: "{foreground.color.on.danger}",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "{foreground.color.on.danger}"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const ButtonDangerPrimaryForegroundColorActive = {
+  value: "{foreground.color.on.danger}",
+  extensions: {
     appearance: {
       dark: {
-        value: "#78BBFA"
+        value: "{foreground.color.on.danger}"
       }
     }
   }
 };
-export const CheckboxCheckedFillColorHover = {
-  value: "#004ba0d1",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ButtonDangerPrimaryBackgroundColor = {
+  value: "{background.color.danger}",
+  extensions: {
     appearance: {
       dark: {
-        value: "#abd8feda"
+        value: "{background.color.danger}"
       }
     }
   }
 };
-export const CheckboxCheckedFillColorActive = {
-  value: "#0151afb8",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ButtonDangerPrimaryBackgroundColorHover = {
+  value: "#d62100",
+  extensions: {
     appearance: {
       dark: {
-        value: "#abd8fee0"
+        value: "#d62100"
       }
     }
   }
 };
-export const CheckboxCheckedBackgroundColorDefault = {
-  value: "transparent",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ButtonDangerPrimaryBackgroundColorActive = {
+  value: "#a31900",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#a31900"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const ButtonDangerPrimaryBorderColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
         value: "transparent"
@@ -503,59 +700,89 @@ export const CheckboxCheckedBackgroundColorDefault = {
     }
   }
 };
-export const CheckboxCheckedBackgroundColorHover = {
-  value: "#0265dc14",
-  attributes: {
+/** @type {TokenValue} */
+export const ButtonDangerPrimaryBorderRadius = { value: "0.375rem" };
+/** @type {TokenWithAppearance} */
+export const ButtonDangerPrimaryFocusRingColor = {
+  value: "#ff3914",
+  extensions: {
     appearance: {
       dark: {
-        value: "#78bbfa14"
+        value: "#ff3914"
       }
     }
   }
 };
-export const CheckboxCheckedBackgroundColorActive = {
-  value: "#0265dc29",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ButtonDangerSecondaryForegroundColor = {
+  value: "#d62100",
+  extensions: {
     appearance: {
       dark: {
-        value: "#78bbfa29"
+        value: "#d62100"
       }
     }
   }
 };
-export const CheckboxUncheckedErrorFillColorDefault = {
-  value: "#e13212",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ButtonDangerSecondaryForegroundColorHover = {
+  value: "#d62100",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "#d62100"
       }
     }
   }
 };
-export const CheckboxUncheckedErrorFillColorHover = {
-  value: "#bf2a00",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ButtonDangerSecondaryForegroundColorActive = {
+  value: "#d62100",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "#d62100"
       }
     }
   }
 };
-export const CheckboxUncheckedErrorFillColorActive = {
-  value: "#bf2a00",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ButtonDangerSecondaryBackgroundColor = {
+  value: "{background.color.danger.subdued}",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "{background.color.danger.subdued}"
       }
     }
   }
 };
-export const CheckboxUncheckedErrorBackgroundColorDefault = {
-  value: "transparent",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ButtonDangerSecondaryBackgroundColorHover = {
+  value: "#ffac9e",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ffac9e"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const ButtonDangerSecondaryBackgroundColorActive = {
+  value: "#ff8974",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ff8974"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const ButtonDangerSecondaryBorderColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
         value: "transparent"
@@ -563,82 +790,177 @@ export const CheckboxUncheckedErrorBackgroundColorDefault = {
     }
   }
 };
-export const CheckboxUncheckedErrorBackgroundColorHover = {
-  value: "#e132120f",
-  attributes: {
+/** @type {TokenValue} */
+export const ButtonDangerSecondaryBorderRadius = { value: "0.375rem" };
+/** @type {TokenWithAppearance} */
+export const ButtonDangerSecondaryFocusRingColor = {
+  value: "#ff3914",
+  extensions: {
     appearance: {
       dark: {
-        value: "#f94d321a"
+        value: "#ff3914"
       }
     }
   }
 };
-export const CheckboxUncheckedErrorBackgroundColorActive = {
-  value: "#e132122e",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const CheckboxCheckedForegroundColor = {
+  value: "{foreground.color.primary}",
+  extensions: {
     appearance: {
       dark: {
-        value: "#f94d3240"
+        value: "{foreground.color.primary}"
       }
     }
   }
 };
-export const CheckboxCheckedErrorFillColorDefault = {
-  value: "#e13212",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const CheckboxCheckedForegroundColorHover = {
+  value: "#0065de",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "#0065de"
       }
     }
   }
 };
-export const CheckboxCheckedErrorFillColorHover = {
-  value: "#bf2a00",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const CheckboxCheckedForegroundColorActive = {
+  value: "#0065de",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "#0065de"
       }
     }
   }
 };
-export const CheckboxCheckedErrorFillColorActive = {
-  value: "#bf2a00",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const CheckboxCheckedBackgroundColorHover = {
+  value: "#1a82ff1A",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "#1a82ff1A"
       }
     }
   }
 };
-export const CheckboxCheckedErrorBackgroundColorDefault = {
-  value: "transparent",
-  attributes: {
+/** @type {TokenValue} */
+export const CheckboxCheckedBorderRadius = { value: "0.1875rem" };
+/** @type {TokenWithAppearance} */
+export const CheckboxCheckedFocusRingColor = {
+  value: "#1a82ff",
+  extensions: {
     appearance: {
       dark: {
-        value: "transparent"
+        value: "#1a82ff"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const CheckboxUncheckedBackgroundColorHover = {
+  value: "#8b8b8b14",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#8b8b8b14"
       }
     }
   }
 };
+/** @type {TokenValue} */
+export const CheckboxUncheckedBorderRadius = { value: "0.1875rem" };
+/** @type {TokenWithAppearance} */
+export const CheckboxUncheckedFocusRingColor = {
+  value: "#1a82ff",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#1a82ff"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const CheckboxCheckedErrorForegroundColor = {
+  value: "{foreground.color.danger}",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "{foreground.color.danger}"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const CheckboxCheckedErrorForegroundColorHover = {
+  value: "#d62100",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#d62100"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const CheckboxCheckedErrorForegroundColorActive = {
+  value: "#d62100",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#d62100"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
 export const CheckboxCheckedErrorBackgroundColorHover = {
-  value: "#e132120f",
-  attributes: {
+  value: "#ff39141A",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ff39141A"
+      }
+    }
+  }
+};
+/** @type {TokenValue} */
+export const CheckboxCheckedErrorBorderRadius = { value: "0.1875rem" };
+/** @type {TokenWithAppearance} */
+export const CheckboxCheckedErrorFocusRingColor = {
+  value: "#ff3914",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ff3914"
+      }
+    }
+  }
+};
+/** @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"
       }
     }
   }