@rogieking/figui3 8.7.0 → 8.8.1

package/fig.js

@@ -16548,11 +16548,41 @@ function figIconCssVar(name, size = "medium") {
   return tokenName ? `var(${tokenName})` : "";
 }
 
+const FIG_ICON_COLOR_TOKENS = {
+  primary: "--figma-color-icon",
+  secondary: "--figma-color-icon-secondary",
+  tertiary: "--figma-color-icon-tertiary",
+  disabled: "--figma-color-icon-disabled",
+  brand: "--figma-color-icon-brand",
+  component: "--figma-color-icon-component",
+  danger: "--figma-color-icon-danger",
+  success: "--figma-color-icon-success",
+  warning: "--figma-color-icon-warning",
+  selected: "--figma-color-icon-selected",
+  hover: "--figma-color-icon-hover",
+  pressed: "--figma-color-icon-pressed",
+  onbrand: "--figma-color-icon-onbrand",
+  oncomponent: "--figma-color-icon-oncomponent",
+  ondanger: "--figma-color-icon-ondanger",
+  ondisabled: "--figma-color-icon-ondisabled",
+  oninverse: "--figma-color-icon-oninverse",
+  onselected: "--figma-color-icon-onselected",
+  onsuccess: "--figma-color-icon-onsuccess",
+  onwarning: "--figma-color-icon-onwarning",
+};
+
+function figIconColorValue(color) {
+  if (!color) return "";
+  if (color.startsWith("var(")) return color;
+  const token = FIG_ICON_COLOR_TOKENS[color.toLowerCase()];
+  return token ? `var(${token})` : color;
+}
+
 /**
  * Masked icon using design-token SVGs from :root.
  * @attr {string} name - Icon name (chevron, add, close, …)
  * @attr {'small'|'medium'} size - Display size; medium (default) uses --spacer-4, small uses --spacer-3
- * @attr {string} color - Icon fill color (applied as background-color for the mask)
+ * @attr {string} color - Icon color alias (primary, secondary, tertiary, disabled, brand, component, danger, success, warning, selected, hover, pressed, onbrand, …), CSS variable, or CSS color.
  */
 class FigIcon extends HTMLElement {
   static get observedAttributes() {
@@ -16580,9 +16610,14 @@ class FigIcon extends HTMLElement {
       this.style.removeProperty("--size");
     }
 
-    const color = this.getAttribute("color");
-    if (color) this.style.backgroundColor = color;
-    else this.style.removeProperty("background-color");
+    const color = figIconColorValue(this.getAttribute("color"));
+    if (color) {
+      this.style.backgroundColor = color;
+      this.style.setProperty("--icon-color", color);
+    } else {
+      this.style.removeProperty("background-color");
+      this.style.removeProperty("--icon-color");
+    }
 
     if (!this.hasAttribute("aria-hidden")) {
       this.setAttribute("aria-hidden", "true");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "8.7.0",
+  "version": "8.8.1",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",