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

package/build/web/core/semantic.js

@@ -1,136 +1,610 @@
-export const BackgroundColor = {
+/**
+ * @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 StatusColorInfo = {
+  value: "#1a82ff",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#cce3ff"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const StatusColorDanger = {
+  value: "#ff3914",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ffd4cc"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const StatusColorSuccess = {
+  value: "#09a569",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#b8f5dd"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const StatusColorWarning = {
+  value: "#d6a000",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#fff0c2"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const BackgroundColorDefault = {
   value: "#ffffff",
-  attributes: {
+  extensions: {
     appearance: {
       dark: {
-        value: "#141414"
+        value: "#8b8b8b"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const BackgroundColorDefaultHover = {
+  value: "#fcfcfc",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#f6f6f6"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const BackgroundColorDefaultActive = {
+  value: "#f6f6f6",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#fcfcfc"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const BackgroundColorSecondary = {
+  value: "#0404040F",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ffffff0F"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const BackgroundColorSecondaryHover = {
+  value: "#04040414",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ffffff14"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const BackgroundColorSecondaryActive = {
+  value: "#04040429",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ffffff29"
+      }
+    }
+  }
+};
+/** @type {TokenValue} */
+export const BackgroundColorTransparentDefault = { value: "rgba(0, 0, 0, 0)" };
+/** @type {TokenWithAppearance} */
+export const BackgroundColorTransparentDefaultHover = {
+  value: "#8b8b8b14",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ffffff14"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const BackgroundColorTransparentDefaultActive = {
+  value: "#8b8b8b29",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ffffff29"
+      }
+    }
+  }
+};
+/** @type {TokenValue} */
+export const BackgroundColorTransparentPrimary = { value: "rgba(0, 0, 0, 0)" };
+/** @type {TokenWithAppearance} */
+export const BackgroundColorTransparentPrimaryHover = {
+  value: "#1a82ff1A",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#70b1ff1A"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const BackgroundColorTransparentPrimaryActive = {
+  value: "#1a82ff4D",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#70b1ff40"
+      }
+    }
+  }
+};
+/** @type {TokenValue} */
+export const BackgroundColorTransparentDanger = { value: "rgba(0, 0, 0, 0)" };
+/** @type {TokenWithAppearance} */
+export const BackgroundColorTransparentDangerHover = {
+  value: "#ff39141A",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ff89741A"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const BackgroundColorTransparentDangerActive = {
+  value: "#ff39144D",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ff897440"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const BackgroundColorStrong = {
-  value: "#f7f7f7",
-  attributes: {
+  value: "#f6f6f6",
+  extensions: {
     appearance: {
       dark: {
-        value: "#2d2e31"
+        value: "#a8a8a8"
       }
     }
   }
 };
-export const BackgroundColorStronger = {
+/** @type {TokenWithAppearance} */
+export const BackgroundColorStrongHover = {
   value: "#eeeeee",
-  attributes: {
+  extensions: {
     appearance: {
       dark: {
-        value: "#444445"
+        value: "#1a1a1a"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
+export const BackgroundColorStrongActive = {
+  value: "#ebebeb",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#292929"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const BackgroundColorStronger = {
+  value: "#e8e8e8",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#292929"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const BackgroundColorStrongerHover = {
+  value: "#e2e2e2",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#404040"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const BackgroundColorStrongerActive = {
+  value: "#dfdfdf",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#545454"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
 export const BackgroundColorStrongest = {
-  value: "#bcbcbd",
-  attributes: {
+  value: "#e8e8e8",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#e2e2e2"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const BackgroundColorStrongestHover = {
+  value: "#e2e2e2",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#fcfcfc"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const BackgroundColorStrongestActive = {
+  value: "#dfdfdf",
+  extensions: {
     appearance: {
       dark: {
-        value: "#737475"
+        value: "#1a1a1a"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const BackgroundColorPrimary = {
-  value: "#0265DC",
-  attributes: {
+  value: "#1a82ff",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#70b1ff"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const BackgroundColorPrimaryHover = {
+  value: "#0065de",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#9ecaff"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const BackgroundColorPrimaryActive = {
+  value: "#004da9",
+  extensions: {
     appearance: {
       dark: {
-        value: "#78BBFA"
+        value: "#cce3ff"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const BackgroundColorPrimarySubdued = {
-  value: "#E0F2FF",
-  attributes: {
+  value: "#cce3ff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#78BBFA33"
+        value: "#70b1ff33"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
+export const BackgroundColorPrimarySubduedHover = {
+  value: "#9ecaff",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#003472"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const BackgroundColorPrimarySubduedActive = {
+  value: "#70b1ff",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#004da9"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
 export const BackgroundColorSuccess = {
-  value: "#007A4D",
-  attributes: {
+  value: "#09a569",
+  extensions: {
     appearance: {
       dark: {
-        value: "#49CC93"
+        value: "#09a569"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const BackgroundColorSuccessHover = {
+  value: "#05613e",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#b8f5dd"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
+export const BackgroundColorSuccessActive = {
+  value: "#05613e",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#b8f5dd"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
 export const BackgroundColorSuccessSubdued = {
-  value: "#CEF8E0",
-  attributes: {
+  value: "#b8f5dd",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#3be3a233"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const BackgroundColorSuccessSubduedHover = {
+  value: "#05613e",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#b8f5dd"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const BackgroundColorSuccessSubduedActive = {
+  value: "#05613e",
+  extensions: {
     appearance: {
       dark: {
-        value: "#49CC9333"
+        value: "#b8f5dd"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const BackgroundColorDanger = {
-  value: "#e13212",
-  attributes: {
+  value: "#ff3914",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "#ff3914"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const BackgroundColorDangerHover = {
+  value: "#d62100",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ffac9e"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
+export const BackgroundColorDangerActive = {
+  value: "#a31900",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ffd4cc"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
 export const BackgroundColorDangerSubdued = {
-  value: "#ffece9",
-  attributes: {
+  value: "#ffd4cc",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f33"
+        value: "#ff897433"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
+export const BackgroundColorDangerSubduedHover = {
+  value: "#ffac9e",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#d62100"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const BackgroundColorDangerSubduedActive = {
+  value: "#ff8974",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#731100"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
 export const BackgroundColorWarning = {
-  value: "#ffbe00",
-  attributes: {
+  value: "#d6a000",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffe278"
+        value: "#d6a000"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const BackgroundColorWarningHover = {
+  value: "#a87d00",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#fff0c2"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
+export const BackgroundColorWarningActive = {
+  value: "#a87d00",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#fff0c2"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const BackgroundColorWarningSubdued = {
+  value: "#fff0c2",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ffcf4233"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const BackgroundColorWarningSubduedHover = {
+  value: "#a87d00",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#fff0c2"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const BackgroundColorWarningSubduedActive = {
+  value: "#a87d00",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#fff0c2"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
 export const BackgroundColorDisabled = {
-  value: "#606162",
-  attributes: {
+  value: "#dfdfdf",
+  extensions: {
     appearance: {
       dark: {
-        value: "#606162"
+        value: "#dfdfdf"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const BackgroundColorInverted = {
-  value: "#2d2e31",
-  attributes: {
+  value: "#a8a8a8",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#f9f9f9"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const BackgroundColorInvertedHover = {
+  value: "#a8a8a8",
+  extensions: {
     appearance: {
       dark: {
-        value: "#fafafa"
+        value: "#f9f9f9"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
+export const BackgroundColorInvertedActive = {
+  value: "#a8a8a8",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#f9f9f9"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
 export const BackgroundColorInvertedStrong = {
-  value: "#141414",
-  attributes: {
+  value: "#8b8b8b",
+  extensions: {
     appearance: {
       dark: {
         value: "#ffffff"
@@ -138,78 +612,116 @@ export const BackgroundColorInvertedStrong = {
     }
   }
 };
-export const BorderRadiusNone = { value: "0" };
+/** @type {TokenWithAppearance} */
+export const BackgroundColorInvertedStrongHover = {
+  value: "#a8a8a8",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#f9f9f9"
+      }
+    }
+  }
+};
+/** @type {TokenWithAppearance} */
+export const BackgroundColorInvertedStrongActive = {
+  value: "#a8a8a8",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#f9f9f9"
+      }
+    }
+  }
+};
+/** @type {TokenValue} */
+export const BorderRadiusNone = { value: "0rem" };
+/** @type {TokenValue} */
 export const BorderRadiusSmall = { value: "0.1875rem" };
+/** @type {TokenValue} */
 export const BorderRadiusMedium = { value: "0.375rem" };
+/** @type {TokenValue} */
 export const BorderRadiusLarge = { value: "0.75rem" };
+/** @type {TokenValue} */
 export const BorderRadiusXlarge = { value: "1.5rem" };
+/** @type {TokenValue} */
 export const BorderRadiusCircular = { value: "100%" };
+/** @type {TokenValue} */
 export const BorderWidthNone = { value: "0rem" };
-export const BorderWidth = { value: "0.0625rem" };
+/** @type {TokenValue} */
+export const BorderWidthDefault = { value: "0.0625rem" };
+/** @type {TokenValue} */
 export const BorderWidthStrong = { value: "0.125rem" };
-export const BorderColor = {
-  value: "#949596",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const BorderColorDefault = {
+  value: "#e5e5e5",
+  extensions: {
     appearance: {
       dark: {
-        value: "#606162"
+        value: "#dfdfdf"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const BorderColorSubdued = {
-  value: "#dfe0e1",
-  attributes: {
+  value: "#ebebeb",
+  extensions: {
     appearance: {
       dark: {
-        value: "#444445"
+        value: "#c4c4c4"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const BorderColorStrong = {
-  value: "#444445",
-  attributes: {
+  value: "#c4c4c4",
+  extensions: {
     appearance: {
       dark: {
-        value: "#dfe0e1"
+        value: "#ebebeb"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const BorderColorPrimary = {
-  value: "#0265DC",
-  attributes: {
+  value: "#1a82ff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#78BBFA"
+        value: "#1a82ff"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const BorderColorSuccess = {
-  value: "#007A4D",
-  attributes: {
+  value: "#09a569",
+  extensions: {
     appearance: {
       dark: {
-        value: "#49CC93"
+        value: "#09a569"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const BorderColorDanger = {
-  value: "#e13212",
-  attributes: {
+  value: "#ff3914",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "#ff3914"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ChartsMonochrome01Color = {
-  value: "#3892F3",
-  attributes: {
+  value: "#3892f3",
+  extensions: {
     appearance: {
       dark: {
         value: "#8AC3FF"
@@ -217,9 +729,10 @@ export const ChartsMonochrome01Color = {
     }
   }
 };
-export const ChartsMonochrome01Stroke = {
-  value: "transparent",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ChartsMonochrome01StrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
         value: "transparent"
@@ -227,10 +740,14 @@ export const ChartsMonochrome01Stroke = {
     }
   }
 };
+/** @type {TokenValue} */
+export const ChartsMonochrome01StrokeStyle = { value: "solid" };
+/** @type {TokenValue} */
 export const ChartsMonochrome01Pattern = { value: "solid" };
+/** @type {TokenWithAppearance} */
 export const ChartsMonochrome02Color = {
   value: "#08389c",
-  attributes: {
+  extensions: {
     appearance: {
       dark: {
         value: "#3476FF"
@@ -238,9 +755,10 @@ export const ChartsMonochrome02Color = {
     }
   }
 };
-export const ChartsMonochrome02Stroke = {
-  value: "transparent",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ChartsMonochrome02StrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
         value: "transparent"
@@ -248,10 +766,14 @@ export const ChartsMonochrome02Stroke = {
     }
   }
 };
+/** @type {TokenValue} */
+export const ChartsMonochrome02StrokeStyle = { value: "solid" };
+/** @type {TokenValue} */
 export const ChartsMonochrome02Pattern = { value: "solid" };
+/** @type {TokenWithAppearance} */
 export const ChartsMonochrome03Color = {
-  value: "#F2F9FF",
-  attributes: {
+  value: "#f2f9ff",
+  extensions: {
     appearance: {
       dark: {
         value: "#141414"
@@ -259,9 +781,10 @@ export const ChartsMonochrome03Color = {
     }
   }
 };
-export const ChartsMonochrome03Stroke = {
-  value: "#3892F3",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ChartsMonochrome03StrokeColor = {
+  value: "#3892f3",
+  extensions: {
     appearance: {
       dark: {
         value: "#8AC3FF"
@@ -269,10 +792,14 @@ export const ChartsMonochrome03Stroke = {
     }
   }
 };
+/** @type {TokenValue} */
+export const ChartsMonochrome03StrokeStyle = { value: "solid" };
+/** @type {TokenValue} */
 export const ChartsMonochrome03Pattern = { value: "striped" };
+/** @type {TokenWithAppearance} */
 export const ChartsMonochrome04Color = {
-  value: "#F2F9FF",
-  attributes: {
+  value: "#f2f9ff",
+  extensions: {
     appearance: {
       dark: {
         value: "#F2F9FF"
@@ -280,9 +807,10 @@ export const ChartsMonochrome04Color = {
     }
   }
 };
-export const ChartsMonochrome04Stroke = {
-  value: "#3892F3",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ChartsMonochrome04StrokeColor = {
+  value: "#3892f3",
+  extensions: {
     appearance: {
       dark: {
         value: "#8AC3FF"
@@ -290,10 +818,14 @@ export const ChartsMonochrome04Stroke = {
     }
   }
 };
+/** @type {TokenValue} */
+export const ChartsMonochrome04StrokeStyle = { value: "solid" };
+/** @type {TokenValue} */
 export const ChartsMonochrome04Pattern = { value: "solid" };
+/** @type {TokenWithAppearance} */
 export const ChartsCategorical10Color = {
-  value: "#D57A5C",
-  attributes: {
+  value: "#d57a5c",
+  extensions: {
     appearance: {
       dark: {
         value: "#D99078"
@@ -301,9 +833,10 @@ export const ChartsCategorical10Color = {
     }
   }
 };
-export const ChartsCategorical10Stroke = {
-  value: "transparent",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ChartsCategorical10StrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
         value: "transparent"
@@ -311,10 +844,14 @@ export const ChartsCategorical10Stroke = {
     }
   }
 };
+/** @type {TokenValue} */
+export const ChartsCategorical10StrokeStyle = { value: "solid" };
+/** @type {TokenValue} */
 export const ChartsCategorical10Pattern = { value: "solid" };
+/** @type {TokenWithAppearance} */
 export const ChartsCategorical01Color = {
-  value: "#3892F3",
-  attributes: {
+  value: "#3892f3",
+  extensions: {
     appearance: {
       dark: {
         value: "#3892F3"
@@ -322,9 +859,10 @@ export const ChartsCategorical01Color = {
     }
   }
 };
-export const ChartsCategorical01Stroke = {
-  value: "transparent",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ChartsCategorical01StrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
         value: "transparent"
@@ -332,10 +870,14 @@ export const ChartsCategorical01Stroke = {
     }
   }
 };
+/** @type {TokenValue} */
+export const ChartsCategorical01StrokeStyle = { value: "solid" };
+/** @type {TokenValue} */
 export const ChartsCategorical01Pattern = { value: "solid" };
+/** @type {TokenWithAppearance} */
 export const ChartsCategorical02Color = {
   value: "#08389c",
-  attributes: {
+  extensions: {
     appearance: {
       dark: {
         value: "#3476FF"
@@ -343,9 +885,10 @@ export const ChartsCategorical02Color = {
     }
   }
 };
-export const ChartsCategorical02Stroke = {
-  value: "transparent",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ChartsCategorical02StrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
         value: "transparent"
@@ -353,10 +896,14 @@ export const ChartsCategorical02Stroke = {
     }
   }
 };
+/** @type {TokenValue} */
+export const ChartsCategorical02StrokeStyle = { value: "solid" };
+/** @type {TokenValue} */
 export const ChartsCategorical02Pattern = { value: "solid" };
+/** @type {TokenWithAppearance} */
 export const ChartsCategorical03Color = {
-  value: "#0FA2B8",
-  attributes: {
+  value: "#0fa2b8",
+  extensions: {
     appearance: {
       dark: {
         value: "#C6F6FF"
@@ -364,9 +911,10 @@ export const ChartsCategorical03Color = {
     }
   }
 };
-export const ChartsCategorical03Stroke = {
-  value: "transparent",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ChartsCategorical03StrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
         value: "transparent"
@@ -374,10 +922,14 @@ export const ChartsCategorical03Stroke = {
     }
   }
 };
+/** @type {TokenValue} */
+export const ChartsCategorical03StrokeStyle = { value: "solid" };
+/** @type {TokenValue} */
 export const ChartsCategorical03Pattern = { value: "solid" };
+/** @type {TokenWithAppearance} */
 export const ChartsCategorical04Color = {
-  value: "#907AF5",
-  attributes: {
+  value: "#907af5",
+  extensions: {
     appearance: {
       dark: {
         value: "#C6B8F4"
@@ -385,9 +937,10 @@ export const ChartsCategorical04Color = {
     }
   }
 };
-export const ChartsCategorical04Stroke = {
-  value: "transparent",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ChartsCategorical04StrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
         value: "transparent"
@@ -395,10 +948,14 @@ export const ChartsCategorical04Stroke = {
     }
   }
 };
+/** @type {TokenValue} */
+export const ChartsCategorical04StrokeStyle = { value: "solid" };
+/** @type {TokenValue} */
 export const ChartsCategorical04Pattern = { value: "solid" };
+/** @type {TokenWithAppearance} */
 export const ChartsCategorical05Color = {
-  value: "#DE52CE",
-  attributes: {
+  value: "#de52ce",
+  extensions: {
     appearance: {
       dark: {
         value: "#D949A9"
@@ -406,9 +963,10 @@ export const ChartsCategorical05Color = {
     }
   }
 };
-export const ChartsCategorical05Stroke = {
-  value: "transparent",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ChartsCategorical05StrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
         value: "transparent"
@@ -416,10 +974,14 @@ export const ChartsCategorical05Stroke = {
     }
   }
 };
+/** @type {TokenValue} */
+export const ChartsCategorical05StrokeStyle = { value: "solid" };
+/** @type {TokenValue} */
 export const ChartsCategorical05Pattern = { value: "solid" };
+/** @type {TokenWithAppearance} */
 export const ChartsCategorical06Color = {
-  value: "#C2185B",
-  attributes: {
+  value: "#c2185b",
+  extensions: {
     appearance: {
       dark: {
         value: "#ED1369"
@@ -427,9 +989,10 @@ export const ChartsCategorical06Color = {
     }
   }
 };
-export const ChartsCategorical06Stroke = {
-  value: "transparent",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ChartsCategorical06StrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
         value: "transparent"
@@ -437,10 +1000,14 @@ export const ChartsCategorical06Stroke = {
     }
   }
 };
+/** @type {TokenValue} */
+export const ChartsCategorical06StrokeStyle = { value: "solid" };
+/** @type {TokenValue} */
 export const ChartsCategorical06Pattern = { value: "solid" };
+/** @type {TokenWithAppearance} */
 export const ChartsCategorical07Color = {
-  value: "#759E15",
-  attributes: {
+  value: "#759e15",
+  extensions: {
     appearance: {
       dark: {
         value: "#8CC30B"
@@ -448,9 +1015,10 @@ export const ChartsCategorical07Color = {
     }
   }
 };
-export const ChartsCategorical07Stroke = {
-  value: "transparent",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ChartsCategorical07StrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
         value: "transparent"
@@ -458,10 +1026,14 @@ export const ChartsCategorical07Stroke = {
     }
   }
 };
+/** @type {TokenValue} */
+export const ChartsCategorical07StrokeStyle = { value: "solid" };
+/** @type {TokenValue} */
 export const ChartsCategorical07Pattern = { value: "solid" };
+/** @type {TokenWithAppearance} */
 export const ChartsCategorical08Color = {
-  value: "#AC6400",
-  attributes: {
+  value: "#ac6400",
+  extensions: {
     appearance: {
       dark: {
         value: "#B36800"
@@ -469,9 +1041,10 @@ export const ChartsCategorical08Color = {
     }
   }
 };
-export const ChartsCategorical08Stroke = {
-  value: "transparent",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ChartsCategorical08StrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
         value: "transparent"
@@ -479,10 +1052,14 @@ export const ChartsCategorical08Stroke = {
     }
   }
 };
+/** @type {TokenValue} */
+export const ChartsCategorical08StrokeStyle = { value: "solid" };
+/** @type {TokenValue} */
 export const ChartsCategorical08Pattern = { value: "solid" };
+/** @type {TokenWithAppearance} */
 export const ChartsCategorical09Color = {
-  value: "#EB7200",
-  attributes: {
+  value: "#eb7200",
+  extensions: {
     appearance: {
       dark: {
         value: "#FFA037"
@@ -490,9 +1067,10 @@ export const ChartsCategorical09Color = {
     }
   }
 };
-export const ChartsCategorical09Stroke = {
-  value: "transparent",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ChartsCategorical09StrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
         value: "transparent"
@@ -500,10 +1078,14 @@ export const ChartsCategorical09Stroke = {
     }
   }
 };
+/** @type {TokenValue} */
+export const ChartsCategorical09StrokeStyle = { value: "solid" };
+/** @type {TokenValue} */
 export const ChartsCategorical09Pattern = { value: "solid" };
+/** @type {TokenWithAppearance} */
 export const ChartsStatusSuccessColor = {
-  value: "#007A4D",
-  attributes: {
+  value: "#007a4d",
+  extensions: {
     appearance: {
       dark: {
         value: "#49CC93"
@@ -511,9 +1093,10 @@ export const ChartsStatusSuccessColor = {
     }
   }
 };
-export const ChartsStatusSuccessStroke = {
-  value: "transparent",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ChartsStatusSuccessStrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
         value: "transparent"
@@ -521,10 +1104,14 @@ export const ChartsStatusSuccessStroke = {
     }
   }
 };
+/** @type {TokenValue} */
+export const ChartsStatusSuccessStrokeStyle = { value: "solid" };
+/** @type {TokenValue} */
 export const ChartsStatusSuccessPattern = { value: "solid" };
+/** @type {TokenWithAppearance} */
 export const ChartsStatusWarningColor = {
   value: "#ffbe00",
-  attributes: {
+  extensions: {
     appearance: {
       dark: {
         value: "#ffe278"
@@ -532,9 +1119,10 @@ export const ChartsStatusWarningColor = {
     }
   }
 };
-export const ChartsStatusWarningStroke = {
-  value: "transparent",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ChartsStatusWarningStrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
         value: "transparent"
@@ -542,10 +1130,14 @@ export const ChartsStatusWarningStroke = {
     }
   }
 };
+/** @type {TokenValue} */
+export const ChartsStatusWarningStrokeStyle = { value: "solid" };
+/** @type {TokenValue} */
 export const ChartsStatusWarningPattern = { value: "solid" };
+/** @type {TokenWithAppearance} */
 export const ChartsStatusDangerColor = {
   value: "#e13212",
-  attributes: {
+  extensions: {
     appearance: {
       dark: {
         value: "#ff745f"
@@ -553,9 +1145,10 @@ export const ChartsStatusDangerColor = {
     }
   }
 };
-export const ChartsStatusDangerStroke = {
-  value: "transparent",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ChartsStatusDangerStrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
         value: "transparent"
@@ -563,10 +1156,14 @@ export const ChartsStatusDangerStroke = {
     }
   }
 };
+/** @type {TokenValue} */
+export const ChartsStatusDangerStrokeStyle = { value: "solid" };
+/** @type {TokenValue} */
 export const ChartsStatusDangerPattern = { value: "solid" };
+/** @type {TokenWithAppearance} */
 export const ChartsStatusNeutralColor = {
   value: "#ffffff",
-  attributes: {
+  extensions: {
     appearance: {
       dark: {
         value: "#141414"
@@ -574,9 +1171,10 @@ export const ChartsStatusNeutralColor = {
     }
   }
 };
-export const ChartsStatusNeutralStroke = {
-  value: "#8C9CA5",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ChartsStatusNeutralStrokeColor = {
+  value: "#8c9ca5",
+  extensions: {
     appearance: {
       dark: {
         value: "#B4C1C8"
@@ -584,31 +1182,40 @@ export const ChartsStatusNeutralStroke = {
     }
   }
 };
+/** @type {TokenValue} */
+export const ChartsStatusNeutralStrokeStyle = { value: "solid" };
+/** @type {TokenValue} */
 export const ChartsStatusNeutralPattern = { value: "striped" };
-export const FocusRingColor = {
-  value: "#0265DC",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const FocusRingColorDefault = {
+  value: "#1a82ff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#78BBFA"
+        value: "#70b1ff"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const FocusRingColorDanger = {
-  value: "#e13212",
-  attributes: {
+  value: "#ff3914",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "#ff8974"
       }
     }
   }
 };
+/** @type {TokenValue} */
 export const FocusRingWidth = { value: "0.25rem" };
-export const ForegroundColor = {
-  value: "#141414",
-  attributes: {
+/** @type {TokenValue} */
+export const FocusRingStyle = { value: "solid" };
+/** @type {TokenWithAppearance} */
+export const ForegroundColorDefault = {
+  value: "#040404",
+  extensions: {
     appearance: {
       dark: {
         value: "#ffffff"
@@ -616,249 +1223,186 @@ export const ForegroundColor = {
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ForegroundColorSubdued = {
-  value: "#737475",
-  attributes: {
+  value: "#e2e2e2",
+  extensions: {
     appearance: {
       dark: {
-        value: "#bcbcbd"
+        value: "#e8e8e8"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ForegroundColorPrimary = {
-  value: "#0265DC",
-  attributes: {
-    appearance: {
-      dark: {
-        value: "#78BBFA"
-      }
-    }
-  }
-};
-export const ForegroundColorDanger = {
-  value: "#e13212",
-  attributes: {
+  value: "#1a82ff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "#70b1ff"
       }
     }
   }
 };
-export const ForegroundColorInverted = {
-  value: "#ffffff",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ForegroundColorPrimaryHover = {
+  value: "#0065de",
+  extensions: {
     appearance: {
       dark: {
-        value: "#141414"
+        value: "#9ecaff"
       }
     }
   }
 };
-export const ForegroundColorOnPrimary = {
-  value: "#ffffff",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ForegroundColorPrimaryActive = {
+  value: "#0065de",
+  extensions: {
     appearance: {
       dark: {
-        value: "#141414"
+        value: "#9ecaff"
       }
     }
   }
 };
-export const ForegroundColorOnDanger = {
-  value: "#ffffff",
-  attributes: {
-    appearance: {
-      dark: {
-        value: "#141414"
-      }
-    }
-  }
-};
-export const ForegroundColorOnDangerSubdued = {
-  value: "#bf2a00",
-  attributes: {
-    appearance: {
-      dark: {
-        value: "#ffffff"
-      }
-    }
-  }
-};
-export const ForegroundColorOnWarning = {
-  value: "#141414",
-  attributes: {
-    appearance: {
-      dark: {
-        value: "#141414"
-      }
-    }
-  }
-};
-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: {
+/** @type {TokenWithAppearance} */
+export const ForegroundColorDanger = {
+  value: "#ff3914",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff29"
+        value: "#ff3914"
       }
     }
   }
 };
-export const OverlayColorActivePrimary = {
-  value: "#0265DC4D",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ForegroundColorDangerHover = {
+  value: "#d62100",
+  extensions: {
     appearance: {
       dark: {
-        value: "#78BBFA40"
+        value: "#ff3914"
       }
     }
   }
 };
-export const OverlayColorActiveDanger = {
-  value: "#e132124D",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ForegroundColorDangerActive = {
+  value: "#d62100",
+  extensions: {
     appearance: {
       dark: {
-        value: "#f94d3240"
+        value: "#ff3914"
       }
     }
   }
 };
-export const OverlayColorActiveOn = {
-  value: "#14141429",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ForegroundColorInverted = {
+  value: "#ffffff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#14141429"
+        value: "#040404"
       }
     }
   }
 };
-export const OverlayColorActiveOnPrimary = {
-  value: "#14141466",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ForegroundColorOnPrimary = {
+  value: "#ffffff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#14141429"
+        value: "#040404"
       }
     }
   }
 };
-export const OverlayColorActiveOnDanger = {
-  value: "#14141466",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ForegroundColorOnPrimaryHover = {
+  value: "#ffffff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#14141429"
+        value: "#040404"
       }
     }
   }
 };
-export const OverlayColorHover = {
-  value: "#14141414",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ForegroundColorOnPrimaryActive = {
+  value: "#ffffff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff14"
+        value: "#040404"
       }
     }
   }
 };
-export const OverlayColorHoverPrimary = {
-  value: "#0265DC1A",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ForegroundColorOnDanger = {
+  value: "#ffffff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#78BBFA1A"
+        value: "#040404"
       }
     }
   }
 };
-export const OverlayColorHoverDanger = {
-  value: "#e132121A",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ForegroundColorOnDangerSubdued = {
+  value: "#d62100",
+  extensions: {
     appearance: {
       dark: {
-        value: "#f94d3226"
+        value: "#ffffff"
       }
     }
   }
 };
-export const OverlayColorHoverOn = {
-  value: "#14141414",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ForegroundColorOnDangerHover = {
+  value: "#ffffff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff14"
+        value: "#040404"
       }
     }
   }
 };
-export const OverlayColorHoverOnPrimary = {
-  value: "#14141433",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ForegroundColorOnDangerActive = {
+  value: "#ffffff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff29"
+        value: "#040404"
       }
     }
   }
 };
-export const OverlayColorHoverOnDanger = {
-  value: "#14141433",
-  attributes: {
+/** @type {TokenWithAppearance} */
+export const ForegroundColorOnWarning = {
+  value: "#040404",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff29"
+        value: "#040404"
       }
     }
   }
 };
+/** @type {TokenWithAppearance} */
 export const ShadowColor = {
-  value: "#14141414",
-  attributes: {
+  value: "#8b8b8b14",
+  extensions: {
     appearance: {
       dark: {
         value: "#ffffff14"
@@ -866,67 +1410,51 @@ export const ShadowColor = {
     }
   }
 };
+/** @type {TokenValue} */
 export const ShadowSizeFlat = { value: "0rem 0rem 0rem" };
+/** @type {TokenValue} */
 export const ShadowSizeFloat = { value: "0rem 0.125rem 0.5rem" };
+/** @type {TokenValue} */
 export const ShadowSizeOverlay = { value: "0rem 0.5rem 1.5rem" };
-export const StatusColorInfo = {
-  value: "#0265DC",
-  attributes: {
-    appearance: {
-      dark: {
-        value: "#78BBFA"
-      }
-    }
-  }
-};
-export const StatusColorDanger = {
-  value: "#e13212",
-  attributes: {
-    appearance: {
-      dark: {
-        value: "#ff745f"
-      }
-    }
-  }
-};
-export const StatusColorSuccess = {
-  value: "#007A4D",
-  attributes: {
-    appearance: {
-      dark: {
-        value: "#49CC93"
-      }
-    }
-  }
-};
-export const StatusColorWarning = {
-  value: "#ffbe00",
-  attributes: {
-    appearance: {
-      dark: {
-        value: "#ffe278"
-      }
-    }
-  }
-};
+/** @type {TokenValue} */
 export const TypographyParagraphSizeXsmall = { value: "0.75rem" };
+/** @type {TokenValue} */
 export const TypographyParagraphSizeSmall = { value: "0.875rem" };
-export const TypographyParagraphSize = { value: "1rem" };
+/** @type {TokenValue} */
+export const TypographyParagraphSizeDefault = { value: "1rem" };
+/** @type {TokenValue} */
 export const TypographyParagraphSizeLarge = { value: "1.25rem" };
+/** @type {TokenValue} */
 export const TypographyParagraphSizeXlarge = { value: "1.5rem" };
-export const TypographyParagraphFontWeight = { value: "400" };
+/** @type {TokenValue} */
+export const TypographyParagraphFontWeight = { value: 400 };
+/** @type {TokenValue} */
 export const TypographyParagraphFontFamily = { value: "'Nunito Sans', sans-serif" };
+/** @type {TokenValue} */
 export const TypographyHeadingSizeXsmall = { value: "0.875rem" };
+/** @type {TokenValue} */
 export const TypographyHeadingSizeSmall = { value: "1rem" };
-export const TypographyHeadingSize = { value: "1.25rem" };
+/** @type {TokenValue} */
+export const TypographyHeadingSizeDefault = { value: "1.25rem" };
+/** @type {TokenValue} */
 export const TypographyHeadingSizeLarge = { value: "1.5rem" };
+/** @type {TokenValue} */
 export const TypographyHeadingSizeXlarge = { value: "2rem" };
-export const TypographyHeadingFontWeight = { value: "700" };
+/** @type {TokenValue} */
+export const TypographyHeadingFontWeight = { value: 700 };
+/** @type {TokenValue} */
 export const TypographyHeadingFontFamily = { value: "'Sofia Pro', SofiaPro, sans-serif" };
+/** @type {TokenValue} */
 export const TypographyLabelSizeXsmall = { value: "0.625rem" };
+/** @type {TokenValue} */
 export const TypographyLabelSizeSmall = { value: "0.75rem" };
-export const TypographyLabelSize = { value: "0.875rem" };
+/** @type {TokenValue} */
+export const TypographyLabelSizeDefault = { value: "0.875rem" };
+/** @type {TokenValue} */
 export const TypographyLabelSizeLarge = { value: "1rem" };
+/** @type {TokenValue} */
 export const TypographyLabelSizeXlarge = { value: "1.25rem" };
-export const TypographyLabelFontWeight = { value: "600" };
+/** @type {TokenValue} */
+export const TypographyLabelFontWeight = { value: 600 };
+/** @type {TokenValue} */
 export const TypographyLabelFontFamily = { value: "'Nunito Sans', sans-serif" };