@servicetitan/hammer-token 2.5.1 → 3.0.0

package/build/web/core/semantic.js

@@ -1,106 +1,750 @@
-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: "#0265dc",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#70b1ff"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const StatusColorDanger = {
+  value: "#d62100",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ff5b3d"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const StatusColorSuccess = {
+  value: "#077e50",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#0bd085"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const StatusColorWarning = {
+  value: "#ffbe00",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ffe278"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorDefault = {
   value: "#ffffff",
-  attributes: {
+  extensions: {
     appearance: {
       dark: {
-        value: "#141414"
+        value: "#1a1a1a"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorDefaultHover = {
+  value: "#f9f9f9",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#292929"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorDefaultActive = {
+  value: "#f1f1f1",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#404040"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorSecondary = {
+  value: "#040404",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ffffff"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorSecondaryHover = {
+  value: "#040404",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ffffff"
       }
     }
   }
 };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorSecondaryActive = {
+  value: "#040404",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ffffff"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorSecondaryStrong = {
+  value: "#040404",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ffffff"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorSecondaryStrongHover = {
+  value: "#040404",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ffffff"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorSecondaryStrongActive = {
+  value: "#040404",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ffffff"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenValue}
+ */
+export const BackgroundColorTransparentDefault = { value: "rgba(0, 0, 0, 0)" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorTransparentDefaultHover = {
+  value: "#8b8b8b",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ffffff"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorTransparentDefaultActive = {
+  value: "#8b8b8b",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ffffff"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenValue}
+ */
+export const BackgroundColorTransparentPrimary = { value: "rgba(0, 0, 0, 0)" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorTransparentPrimaryHover = {
+  value: "#1a82ff",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#70b1ff"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorTransparentPrimaryActive = {
+  value: "#1a82ff",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#70b1ff"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenValue}
+ */
+export const BackgroundColorTransparentDanger = { value: "rgba(0, 0, 0, 0)" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorTransparentDangerHover = {
+  value: "#ff3914",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ff8670"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorTransparentDangerActive = {
+  value: "#ff3914",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ff8670"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
 export const BackgroundColorStrong = {
-  value: "#f7f7f7",
-  attributes: {
+  value: "#f9f9f9",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#292929"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorStrongHover = {
+  value: "#eeeeee",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#404040"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorStrongActive = {
+  value: "#e8e8e8",
+  extensions: {
     appearance: {
       dark: {
-        value: "#2d2e31"
+        value: "#545454"
       }
     }
   }
 };
+/**
+ * @type {TokenWithAppearance}
+ */
 export const BackgroundColorStronger = {
   value: "#eeeeee",
-  attributes: {
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#404040"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorStrongerHover = {
+  value: "#e5e5e5",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#545454"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorStrongerActive = {
+  value: "#dfdfdf",
+  extensions: {
     appearance: {
       dark: {
-        value: "#444445"
+        value: "#707070"
       }
     }
   }
 };
+/**
+ * @type {TokenWithAppearance}
+ */
 export const BackgroundColorStrongest = {
-  value: "#bcbcbd",
-  attributes: {
+  value: "#c4c4c4",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#707070"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorStrongestHover = {
+  value: "#a8a8a8",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#8b8b8b"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorStrongestActive = {
+  value: "#8b8b8b",
+  extensions: {
     appearance: {
       dark: {
-        value: "#737475"
+        value: "#a8a8a8"
       }
     }
   }
 };
+/**
+ * @type {TokenWithAppearance}
+ */
 export const BackgroundColorPrimary = {
-  value: "#0265DC",
-  attributes: {
+  value: "#0265dc",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#70b1ff"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorPrimaryHover = {
+  value: "#1d4ca3",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#9ecaff"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorPrimaryActive = {
+  value: "#003472",
+  extensions: {
     appearance: {
       dark: {
-        value: "#78BBFA"
+        value: "#cce3ff"
       }
     }
   }
 };
+/**
+ * @type {TokenWithAppearance}
+ */
 export const BackgroundColorPrimarySubdued = {
-  value: "#E0F2FF",
-  attributes: {
+  value: "#e6f1ff",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#70b1ff"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorPrimarySubduedHover = {
+  value: "#cce3ff",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#70b1ff"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorPrimarySubduedActive = {
+  value: "#9ecaff",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#70b1ff"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorPrimaryFaint = {
+  value: "#fafcff",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#000b19"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorPrimaryFaintHover = {
+  value: "#e6f1ff",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#003472"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorPrimaryFaintActive = {
+  value: "#cce3ff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#78BBFA33"
+        value: "#1d4ca3"
       }
     }
   }
 };
+/**
+ * @type {TokenWithAppearance}
+ */
 export const BackgroundColorSuccess = {
-  value: "#007A4D",
-  attributes: {
+  value: "#077e50",
+  extensions: {
     appearance: {
       dark: {
-        value: "#49CC93"
+        value: "#0bd085"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorSuccessHover = {
+  value: "#05613e",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#3be3a2"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorSuccessActive = {
+  value: "#04482e",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#d3fded"
       }
     }
   }
 };
+/**
+ * @type {TokenWithAppearance}
+ */
 export const BackgroundColorSuccessSubdued = {
-  value: "#CEF8E0",
-  attributes: {
+  value: "#d3fded",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#3be3a2"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorSuccessSubduedHover = {
+  value: "#b8f5dd",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#3be3a2"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorSuccessSubduedActive = {
+  value: "#70ebbc",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#3be3a2"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorSuccessFaint = {
+  value: "#f5fefb",
+  extensions: {
     appearance: {
       dark: {
-        value: "#49CC9333"
+        value: "#010f0a"
       }
     }
   }
 };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorSuccessFaintHover = {
+  value: "#d3fded",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#04482e"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorSuccessFaintActive = {
+  value: "#b8f5dd",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#05613e"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
 export const BackgroundColorDanger = {
-  value: "#e13212",
-  attributes: {
+  value: "#d62100",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "#ff5b3d"
       }
     }
   }
 };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorDangerHover = {
+  value: "#a31900",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ff8670"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorDangerActive = {
+  value: "#731100",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ffac9e"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
 export const BackgroundColorDangerSubdued = {
-  value: "#ffece9",
-  attributes: {
+  value: "#ffe9e5",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ff8670"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorDangerSubduedHover = {
+  value: "#ffd4cc",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ff8670"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorDangerSubduedActive = {
+  value: "#ffac9e",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ff8670"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorDangerFaint = {
+  value: "#fffbfa",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f33"
+        value: "#0a0200"
       }
     }
   }
 };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorDangerFaintHover = {
+  value: "#ffe9e5",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#731100"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorDangerFaintActive = {
+  value: "#ffd4cc",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#a31900"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
 export const BackgroundColorWarning = {
   value: "#ffbe00",
-  attributes: {
+  extensions: {
     appearance: {
       dark: {
         value: "#ffe278"
@@ -108,29 +752,194 @@ export const BackgroundColorWarning = {
     }
   }
 };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorWarningHover = {
+  value: "#de9500",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#fff9e2"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorWarningActive = {
+  value: "#de9500",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#fff9e2"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorWarningSubdued = {
+  value: "#fff9e2",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ffc902"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorWarningSubduedHover = {
+  value: "#fff0b1",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ffc902"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorWarningSubduedActive = {
+  value: "#ffe278",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ffc902"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorWarningFaint = {
+  value: "#fffef8",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#191100"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorWarningFaintHover = {
+  value: "#fffcf0",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#704b00"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorWarningFaintActive = {
+  value: "#fff9e2",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#c98600"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
 export const BackgroundColorDisabled = {
-  value: "#606162",
-  attributes: {
+  value: "#545454",
+  extensions: {
     appearance: {
       dark: {
-        value: "#606162"
+        value: "#707070"
       }
     }
   }
 };
+/**
+ * @type {TokenWithAppearance}
+ */
 export const BackgroundColorInverted = {
-  value: "#2d2e31",
-  attributes: {
+  value: "#292929",
+  extensions: {
     appearance: {
       dark: {
-        value: "#fafafa"
+        value: "#f9f9f9"
       }
     }
   }
 };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorInvertedHover = {
+  value: "#292929",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#f9f9f9"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorInvertedActive = {
+  value: "#292929",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#f9f9f9"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
 export const BackgroundColorInvertedStrong = {
-  value: "#141414",
-  attributes: {
+  value: "#1a1a1a",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ffffff"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorInvertedStrongHover = {
+  value: "#1a1a1a",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#ffffff"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BackgroundColorInvertedStrongActive = {
+  value: "#1a1a1a",
+  extensions: {
     appearance: {
       dark: {
         value: "#ffffff"
@@ -138,78 +947,139 @@ export const BackgroundColorInvertedStrong = {
     }
   }
 };
-export const BorderRadiusNone = { value: "0" };
+/**
+ * @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: "#8b8b8b",
+  extensions: {
     appearance: {
       dark: {
-        value: "#606162"
+        value: "#545454"
       }
     }
   }
 };
+/**
+ * @type {TokenWithAppearance}
+ */
 export const BorderColorSubdued = {
-  value: "#dfe0e1",
-  attributes: {
+  value: "#e6e6e6",
+  extensions: {
     appearance: {
       dark: {
-        value: "#444445"
+        value: "#404040"
       }
     }
   }
 };
+/**
+ * @type {TokenWithAppearance}
+ */
 export const BorderColorStrong = {
-  value: "#444445",
-  attributes: {
+  value: "#404040",
+  extensions: {
     appearance: {
       dark: {
-        value: "#dfe0e1"
+        value: "#e6e6e6"
       }
     }
   }
 };
+/**
+ * @type {TokenWithAppearance}
+ */
 export const BorderColorPrimary = {
-  value: "#0265DC",
-  attributes: {
+  value: "#0265dc",
+  extensions: {
     appearance: {
       dark: {
-        value: "#78BBFA"
+        value: "#9ecaff"
       }
     }
   }
 };
+/**
+ * @type {TokenWithAppearance}
+ */
 export const BorderColorSuccess = {
-  value: "#007A4D",
-  attributes: {
+  value: "#077e50",
+  extensions: {
     appearance: {
       dark: {
-        value: "#49CC93"
+        value: "#70ebbc"
+      }
+    }
+  }
+};
+/**
+ * @type {TokenWithAppearance}
+ */
+export const BorderColorWarning = {
+  value: "#c98600",
+  extensions: {
+    appearance: {
+      dark: {
+        value: "#fff0b1"
       }
     }
   }
 };
+/**
+ * @type {TokenWithAppearance}
+ */
 export const BorderColorDanger = {
-  value: "#e13212",
-  attributes: {
+  value: "#d62100",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "#ffac9e"
       }
     }
   }
 };
-export const ChartsMonochrome01Color = {
-  value: "#3892F3",
-  attributes: {
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartMonochrome01FillColor = {
+  value: "#3892f3",
+  extensions: {
     appearance: {
       dark: {
         value: "#8AC3FF"
@@ -217,20 +1087,33 @@ export const ChartsMonochrome01Color = {
     }
   }
 };
-export const ChartsMonochrome01Stroke = {
-  value: "transparent",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartMonochrome01FillPattern = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartMonochrome01StrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
-        value: "transparent"
+        value: "rgba(0, 0, 0, 0)"
       }
     }
   }
 };
-export const ChartsMonochrome01Pattern = { value: "solid" };
-export const ChartsMonochrome02Color = {
+/**
+ * @type {TokenValue}
+ */
+export const ChartMonochrome01StrokeStyle = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartMonochrome02FillColor = {
   value: "#08389c",
-  attributes: {
+  extensions: {
     appearance: {
       dark: {
         value: "#3476FF"
@@ -238,20 +1121,33 @@ export const ChartsMonochrome02Color = {
     }
   }
 };
-export const ChartsMonochrome02Stroke = {
-  value: "transparent",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartMonochrome02FillPattern = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartMonochrome02StrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
-        value: "transparent"
+        value: "rgba(0, 0, 0, 0)"
       }
     }
   }
 };
-export const ChartsMonochrome02Pattern = { value: "solid" };
-export const ChartsMonochrome03Color = {
-  value: "#F2F9FF",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartMonochrome02StrokeStyle = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartMonochrome03FillColor = {
+  value: "#f2f9ff",
+  extensions: {
     appearance: {
       dark: {
         value: "#141414"
@@ -259,9 +1155,16 @@ export const ChartsMonochrome03Color = {
     }
   }
 };
-export const ChartsMonochrome03Stroke = {
-  value: "#3892F3",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartMonochrome03FillPattern = { value: "striped" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartMonochrome03StrokeColor = {
+  value: "#3892f3",
+  extensions: {
     appearance: {
       dark: {
         value: "#8AC3FF"
@@ -269,20 +1172,33 @@ export const ChartsMonochrome03Stroke = {
     }
   }
 };
-export const ChartsMonochrome03Pattern = { value: "striped" };
-export const ChartsMonochrome04Color = {
-  value: "#F2F9FF",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartMonochrome03StrokeStyle = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartMonochrome04FillColor = {
+  value: "#f2f9ff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#F2F9FF"
+        value: "#f2f9ff"
       }
     }
   }
 };
-export const ChartsMonochrome04Stroke = {
-  value: "#3892F3",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartMonochrome04FillPattern = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartMonochrome04StrokeColor = {
+  value: "#3892f3",
+  extensions: {
     appearance: {
       dark: {
         value: "#8AC3FF"
@@ -290,10 +1206,16 @@ export const ChartsMonochrome04Stroke = {
     }
   }
 };
-export const ChartsMonochrome04Pattern = { value: "solid" };
-export const ChartsCategorical10Color = {
-  value: "#D57A5C",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartMonochrome04StrokeStyle = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartCategorical10FillColor = {
+  value: "#d57a5c",
+  extensions: {
     appearance: {
       dark: {
         value: "#D99078"
@@ -301,41 +1223,67 @@ export const ChartsCategorical10Color = {
     }
   }
 };
-export const ChartsCategorical10Stroke = {
-  value: "transparent",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartCategorical10FillPattern = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartCategorical10StrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
-        value: "transparent"
+        value: "rgba(0, 0, 0, 0)"
       }
     }
   }
 };
-export const ChartsCategorical10Pattern = { value: "solid" };
-export const ChartsCategorical01Color = {
-  value: "#3892F3",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartCategorical10StrokeStyle = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartCategorical01FillColor = {
+  value: "#3892f3",
+  extensions: {
     appearance: {
       dark: {
-        value: "#3892F3"
+        value: "#3892f3"
       }
     }
   }
 };
-export const ChartsCategorical01Stroke = {
-  value: "transparent",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartCategorical01FillPattern = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartCategorical01StrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
-        value: "transparent"
+        value: "rgba(0, 0, 0, 0)"
       }
     }
   }
 };
-export const ChartsCategorical01Pattern = { value: "solid" };
-export const ChartsCategorical02Color = {
+/**
+ * @type {TokenValue}
+ */
+export const ChartCategorical01StrokeStyle = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartCategorical02FillColor = {
   value: "#08389c",
-  attributes: {
+  extensions: {
     appearance: {
       dark: {
         value: "#3476FF"
@@ -343,20 +1291,33 @@ export const ChartsCategorical02Color = {
     }
   }
 };
-export const ChartsCategorical02Stroke = {
-  value: "transparent",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartCategorical02FillPattern = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartCategorical02StrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
-        value: "transparent"
+        value: "rgba(0, 0, 0, 0)"
       }
     }
   }
 };
-export const ChartsCategorical02Pattern = { value: "solid" };
-export const ChartsCategorical03Color = {
-  value: "#0FA2B8",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartCategorical02StrokeStyle = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartCategorical03FillColor = {
+  value: "#0fa2b8",
+  extensions: {
     appearance: {
       dark: {
         value: "#C6F6FF"
@@ -364,20 +1325,33 @@ export const ChartsCategorical03Color = {
     }
   }
 };
-export const ChartsCategorical03Stroke = {
-  value: "transparent",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartCategorical03FillPattern = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartCategorical03StrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
-        value: "transparent"
+        value: "rgba(0, 0, 0, 0)"
       }
     }
   }
 };
-export const ChartsCategorical03Pattern = { value: "solid" };
-export const ChartsCategorical04Color = {
-  value: "#907AF5",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartCategorical03StrokeStyle = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartCategorical04FillColor = {
+  value: "#907af5",
+  extensions: {
     appearance: {
       dark: {
         value: "#C6B8F4"
@@ -385,20 +1359,33 @@ export const ChartsCategorical04Color = {
     }
   }
 };
-export const ChartsCategorical04Stroke = {
-  value: "transparent",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartCategorical04FillPattern = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartCategorical04StrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
-        value: "transparent"
+        value: "rgba(0, 0, 0, 0)"
       }
     }
   }
 };
-export const ChartsCategorical04Pattern = { value: "solid" };
-export const ChartsCategorical05Color = {
-  value: "#DE52CE",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartCategorical04StrokeStyle = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartCategorical05FillColor = {
+  value: "#de52ce",
+  extensions: {
     appearance: {
       dark: {
         value: "#D949A9"
@@ -406,20 +1393,33 @@ export const ChartsCategorical05Color = {
     }
   }
 };
-export const ChartsCategorical05Stroke = {
-  value: "transparent",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartCategorical05FillPattern = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartCategorical05StrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
-        value: "transparent"
+        value: "rgba(0, 0, 0, 0)"
       }
     }
   }
 };
-export const ChartsCategorical05Pattern = { value: "solid" };
-export const ChartsCategorical06Color = {
-  value: "#C2185B",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartCategorical05StrokeStyle = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartCategorical06FillColor = {
+  value: "#c2185b",
+  extensions: {
     appearance: {
       dark: {
         value: "#ED1369"
@@ -427,20 +1427,33 @@ export const ChartsCategorical06Color = {
     }
   }
 };
-export const ChartsCategorical06Stroke = {
-  value: "transparent",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartCategorical06FillPattern = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartCategorical06StrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
-        value: "transparent"
+        value: "rgba(0, 0, 0, 0)"
       }
     }
   }
 };
-export const ChartsCategorical06Pattern = { value: "solid" };
-export const ChartsCategorical07Color = {
-  value: "#759E15",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartCategorical06StrokeStyle = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartCategorical07FillColor = {
+  value: "#759e15",
+  extensions: {
     appearance: {
       dark: {
         value: "#8CC30B"
@@ -448,20 +1461,33 @@ export const ChartsCategorical07Color = {
     }
   }
 };
-export const ChartsCategorical07Stroke = {
-  value: "transparent",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartCategorical07FillPattern = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartCategorical07StrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
-        value: "transparent"
+        value: "rgba(0, 0, 0, 0)"
       }
     }
   }
 };
-export const ChartsCategorical07Pattern = { value: "solid" };
-export const ChartsCategorical08Color = {
-  value: "#AC6400",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartCategorical07StrokeStyle = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartCategorical08FillColor = {
+  value: "#ac6400",
+  extensions: {
     appearance: {
       dark: {
         value: "#B36800"
@@ -469,20 +1495,33 @@ export const ChartsCategorical08Color = {
     }
   }
 };
-export const ChartsCategorical08Stroke = {
-  value: "transparent",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartCategorical08FillPattern = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartCategorical08StrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
-        value: "transparent"
+        value: "rgba(0, 0, 0, 0)"
       }
     }
   }
 };
-export const ChartsCategorical08Pattern = { value: "solid" };
-export const ChartsCategorical09Color = {
-  value: "#EB7200",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartCategorical08StrokeStyle = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartCategorical09FillColor = {
+  value: "#eb7200",
+  extensions: {
     appearance: {
       dark: {
         value: "#FFA037"
@@ -490,20 +1529,33 @@ export const ChartsCategorical09Color = {
     }
   }
 };
-export const ChartsCategorical09Stroke = {
-  value: "transparent",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartCategorical09FillPattern = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartCategorical09StrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
-        value: "transparent"
+        value: "rgba(0, 0, 0, 0)"
       }
     }
   }
 };
-export const ChartsCategorical09Pattern = { value: "solid" };
-export const ChartsStatusSuccessColor = {
-  value: "#007A4D",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartCategorical09StrokeStyle = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartStatusSuccessFillColor = {
+  value: "#007a4d",
+  extensions: {
     appearance: {
       dark: {
         value: "#49CC93"
@@ -511,20 +1563,33 @@ export const ChartsStatusSuccessColor = {
     }
   }
 };
-export const ChartsStatusSuccessStroke = {
-  value: "transparent",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartStatusSuccessFillPattern = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartStatusSuccessStrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
-        value: "transparent"
+        value: "rgba(0, 0, 0, 0)"
       }
     }
   }
 };
-export const ChartsStatusSuccessPattern = { value: "solid" };
-export const ChartsStatusWarningColor = {
+/**
+ * @type {TokenValue}
+ */
+export const ChartStatusSuccessStrokeStyle = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartStatusWarningFillColor = {
   value: "#ffbe00",
-  attributes: {
+  extensions: {
     appearance: {
       dark: {
         value: "#ffe278"
@@ -532,20 +1597,33 @@ export const ChartsStatusWarningColor = {
     }
   }
 };
-export const ChartsStatusWarningStroke = {
-  value: "transparent",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartStatusWarningFillPattern = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartStatusWarningStrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
-        value: "transparent"
+        value: "rgba(0, 0, 0, 0)"
       }
     }
   }
 };
-export const ChartsStatusWarningPattern = { value: "solid" };
-export const ChartsStatusDangerColor = {
+/**
+ * @type {TokenValue}
+ */
+export const ChartStatusWarningStrokeStyle = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartStatusDangerFillColor = {
   value: "#e13212",
-  attributes: {
+  extensions: {
     appearance: {
       dark: {
         value: "#ff745f"
@@ -553,20 +1631,33 @@ export const ChartsStatusDangerColor = {
     }
   }
 };
-export const ChartsStatusDangerStroke = {
-  value: "transparent",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartStatusDangerFillPattern = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartStatusDangerStrokeColor = {
+  value: "rgba(0, 0, 0, 0)",
+  extensions: {
     appearance: {
       dark: {
-        value: "transparent"
+        value: "rgba(0, 0, 0, 0)"
       }
     }
   }
 };
-export const ChartsStatusDangerPattern = { value: "solid" };
-export const ChartsStatusNeutralColor = {
+/**
+ * @type {TokenValue}
+ */
+export const ChartStatusDangerStrokeStyle = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartStatusNeutralFillColor = {
   value: "#ffffff",
-  attributes: {
+  extensions: {
     appearance: {
       dark: {
         value: "#141414"
@@ -574,9 +1665,12 @@ export const ChartsStatusNeutralColor = {
     }
   }
 };
-export const ChartsStatusNeutralStroke = {
-  value: "#8C9CA5",
-  attributes: {
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ChartStatusNeutralStrokeColor = {
+  value: "#8c9ca5",
+  extensions: {
     appearance: {
       dark: {
         value: "#B4C1C8"
@@ -584,31 +1678,50 @@ export const ChartsStatusNeutralStroke = {
     }
   }
 };
-export const ChartsStatusNeutralPattern = { value: "striped" };
-export const FocusRingColor = {
-  value: "#0265DC",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const ChartStatusNeutralStrokeStyle = { value: "solid" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const FocusRingColorDefault = {
+  value: "#0265dc",
+  extensions: {
     appearance: {
       dark: {
-        value: "#78BBFA"
+        value: "#70b1ff"
       }
     }
   }
 };
+/**
+ * @type {TokenWithAppearance}
+ */
 export const FocusRingColorDanger = {
-  value: "#e13212",
-  attributes: {
+  value: "#d62100",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "#ff5b3d"
       }
     }
   }
 };
+/**
+ * @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,317 +1729,449 @@ export const ForegroundColor = {
     }
   }
 };
-export const ForegroundColorSubdued = {
-  value: "#737475",
-  attributes: {
-    appearance: {
-      dark: {
-        value: "#bcbcbd"
-      }
-    }
-  }
-};
-export const ForegroundColorPrimary = {
-  value: "#0265DC",
-  attributes: {
-    appearance: {
-      dark: {
-        value: "#78BBFA"
-      }
-    }
-  }
-};
-export const ForegroundColorDanger = {
-  value: "#e13212",
-  attributes: {
-    appearance: {
-      dark: {
-        value: "#ff745f"
-      }
-    }
-  }
-};
-export const ForegroundColorInverted = {
-  value: "#ffffff",
-  attributes: {
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ForegroundColorDefaultHover = {
+  value: "#040404",
+  extensions: {
     appearance: {
       dark: {
-        value: "#141414"
+        value: "#ffffff"
       }
     }
   }
 };
-export const ForegroundColorOnPrimary = {
-  value: "#ffffff",
-  attributes: {
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ForegroundColorDefaultActive = {
+  value: "#040404",
+  extensions: {
     appearance: {
       dark: {
-        value: "#141414"
+        value: "#ffffff"
       }
     }
   }
 };
-export const ForegroundColorOnDanger = {
-  value: "#ffffff",
-  attributes: {
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ForegroundColorSubdued = {
+  value: "#707070",
+  extensions: {
     appearance: {
       dark: {
-        value: "#141414"
+        value: "#c4c4c4"
       }
     }
   }
 };
-export const ForegroundColorOnDangerSubdued = {
-  value: "#bf2a00",
-  attributes: {
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ForegroundColorSubduedHover = {
+  value: "#707070",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff"
+        value: "#c4c4c4"
       }
     }
   }
 };
-export const ForegroundColorOnWarning = {
-  value: "#141414",
-  attributes: {
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ForegroundColorSubduedActive = {
+  value: "#545454",
+  extensions: {
     appearance: {
       dark: {
-        value: "#141414"
+        value: "#dfdfdf"
       }
     }
   }
 };
-export const ForegroundColorActivePrimary = {
-  value: "#004491",
-  attributes: {
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ForegroundColorPrimary = {
+  value: "#0265dc",
+  extensions: {
     appearance: {
       dark: {
-        value: "#B5DEFF"
+        value: "#70b1ff"
       }
     }
   }
 };
-export const ForegroundColorActiveDanger = {
-  value: "#bf2a00",
-  attributes: {
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ForegroundColorPrimaryHover = {
+  value: "#1d4ca3",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "#9ecaff"
       }
     }
   }
 };
-export const ForegroundColorHoverPrimary = {
-  value: "#004491",
-  attributes: {
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ForegroundColorPrimaryActive = {
+  value: "#003472",
+  extensions: {
     appearance: {
       dark: {
-        value: "#B5DEFF"
+        value: "#9ecaff"
       }
     }
   }
 };
-export const ForegroundColorHoverDanger = {
-  value: "#bf2a00",
-  attributes: {
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ForegroundColorDanger = {
+  value: "#d62100",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "#ff5b3d"
       }
     }
   }
 };
-export const OverlayColorActive = {
-  value: "#14141429",
-  attributes: {
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ForegroundColorDangerHover = {
+  value: "#a31900",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff29"
+        value: "#ff8670"
       }
     }
   }
 };
-export const OverlayColorActivePrimary = {
-  value: "#0265DC4D",
-  attributes: {
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ForegroundColorDangerActive = {
+  value: "#731100",
+  extensions: {
     appearance: {
       dark: {
-        value: "#78BBFA40"
+        value: "#ffac9e"
       }
     }
   }
 };
-export const OverlayColorActiveDanger = {
-  value: "#e132124D",
-  attributes: {
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ForegroundColorInverted = {
+  value: "#ffffff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#f94d3240"
+        value: "#1a1a1a"
       }
     }
   }
 };
-export const OverlayColorActiveOn = {
-  value: "#14141429",
-  attributes: {
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ForegroundColorOnPrimary = {
+  value: "#ffffff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#14141429"
+        value: "#1a1a1a"
       }
     }
   }
 };
-export const OverlayColorActiveOnPrimary = {
-  value: "#14141466",
-  attributes: {
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ForegroundColorOnPrimaryHover = {
+  value: "#ffffff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#14141429"
+        value: "#1a1a1a"
       }
     }
   }
 };
-export const OverlayColorActiveOnDanger = {
-  value: "#14141466",
-  attributes: {
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ForegroundColorOnPrimaryActive = {
+  value: "#ffffff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#14141429"
+        value: "#1a1a1a"
       }
     }
   }
 };
-export const OverlayColorHover = {
-  value: "#14141414",
-  attributes: {
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ForegroundColorOnSuccess = {
+  value: "#ffffff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff14"
+        value: "#1a1a1a"
       }
     }
   }
 };
-export const OverlayColorHoverPrimary = {
-  value: "#0265DC1A",
-  attributes: {
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ForegroundColorOnDanger = {
+  value: "#ffffff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#78BBFA1A"
+        value: "#1a1a1a"
       }
     }
   }
 };
-export const OverlayColorHoverDanger = {
-  value: "#e132121A",
-  attributes: {
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ForegroundColorOnDangerSubdued = {
+  value: "#a31900",
+  extensions: {
     appearance: {
       dark: {
-        value: "#f94d3226"
+        value: "#ffffff"
       }
     }
   }
 };
-export const OverlayColorHoverOn = {
-  value: "#14141414",
-  attributes: {
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ForegroundColorOnDangerSubduedHover = {
+  value: "#731100",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff14"
+        value: "#ffffff"
       }
     }
   }
 };
-export const OverlayColorHoverOnPrimary = {
-  value: "#14141433",
-  attributes: {
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ForegroundColorOnDangerSubduedActive = {
+  value: "#470b00",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff29"
+        value: "#ffffff"
       }
     }
   }
 };
-export const OverlayColorHoverOnDanger = {
-  value: "#14141433",
-  attributes: {
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ForegroundColorOnDangerHover = {
+  value: "#ffffff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff29"
+        value: "#1a1a1a"
       }
     }
   }
 };
-export const ShadowColor = {
-  value: "#14141414",
-  attributes: {
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ForegroundColorOnDangerActive = {
+  value: "#ffffff",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffffff14"
+        value: "#1a1a1a"
       }
     }
   }
 };
-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",
-  attributes: {
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ForegroundColorOnWarning = {
+  value: "#1a1a1a",
+  extensions: {
     appearance: {
       dark: {
-        value: "#78BBFA"
+        value: "#1a1a1a"
       }
     }
   }
 };
-export const StatusColorDanger = {
-  value: "#e13212",
-  attributes: {
+/**
+ * @type {TokenWithAppearance}
+ */
+export const GradientPrimary = {
+  value: "linear-gradient(90deg, var(--color-blue-600, #0265dc) 0%, var(--color-cyan-300, #45d8f2) 100%)",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ff745f"
+        value: "linear-gradient(90deg, var(--color-cyan-300, #45d8f2) 0%, var(--color-cyan-50, #daf7fc) 100%)"
       }
     }
   }
 };
-export const StatusColorSuccess = {
-  value: "#007A4D",
-  attributes: {
+/**
+ * @type {TokenValue}
+ */
+export const OpacityDisabled = { value: "0.6" };
+/**
+ * @type {TokenValue}
+ */
+export const OpacityDisabledStrong = { value: "0.4" };
+/**
+ * @type {TokenValue}
+ */
+export const OpacityDisabledStronger = { value: "0.2" };
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ShadowColorDefault = {
+  value: "#1a1a1a",
+  extensions: {
     appearance: {
       dark: {
-        value: "#49CC93"
+        value: "#ffffff"
       }
     }
   }
 };
-export const StatusColorWarning = {
-  value: "#ffbe00",
-  attributes: {
+/**
+ * @type {TokenWithAppearance}
+ */
+export const ShadowColorStrong = {
+  value: "#040404",
+  extensions: {
     appearance: {
       dark: {
-        value: "#ffe278"
+        value: "#ffffff"
       }
     }
   }
 };
+/**
+ * @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" };
+/**
+ * @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" };
+/**
+ * @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" };
+/**
+ * @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" };
+/**
+ * @type {TokenValue}
+ */
 export const TypographyLabelFontWeight = { value: "600" };
+/**
+ * @type {TokenValue}
+ */
 export const TypographyLabelFontFamily = { value: "'Nunito Sans', sans-serif" };