@rogieking/figui3 2.17.2 → 2.17.3

package/components.css

@@ -2060,6 +2060,20 @@ dialog[is="fig-popup"] {
     display: block;
   }
 
+  &[theme="dark"] {
+    color-scheme: dark;
+  }
+
+  &[theme="light"] {
+    color-scheme: light;
+  }
+
+  &[theme="menu"] {
+    background-color: var(--figma-color-bg-menu);
+    color: var(--figma-color-text-menu);
+    color-scheme: dark;
+  }
+
   &[variant="popover"] {
     overflow: visible;
     box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.1);

package/fig.js

@@ -1057,6 +1057,7 @@ customElements.define("fig-dialog", FigDialog, { extends: "dialog" });
  * @attr {string} position - Preferred placement as "vertical horizontal" (default: "top center").
  * @attr {string} offset - Horizontal and vertical offset as "x y" (default: "0 0").
  * @attr {string} variant - Visual variant. Use variant="popover" to show an anchor beak.
+ * @attr {string} theme - Visual theme: "light", "dark", or "menu".
  * @attr {boolean|string} open - Open when present and not "false".
  */
 class FigPopup extends HTMLDialogElement {
@@ -1078,7 +1079,7 @@ class FigPopup extends HTMLDialogElement {
   }
 
   static get observedAttributes() {
-    return ["open", "anchor", "position", "offset", "variant"];
+    return ["open", "anchor", "position", "offset", "variant", "theme"];
   }
 
   get open() {

package/index.html

@@ -2682,7 +2682,14 @@
 
             <h3>Popover Variant (with Arrow)</h3>
             <p class="description">Use <code>variant="popover"</code> to show the beak and automatically point it at the
-                anchor.</p>
+                anchor. Use <code>theme="menu"</code> for menu-style dark surfaces.</p>
+            <fig-segmented-control id="popup-theme-control">
+                <fig-segment id="popup-theme-default">Default</fig-segment>
+                <fig-segment id="popup-theme-dark">Dark</fig-segment>
+                <fig-segment id="popup-theme-light">Light</fig-segment>
+                <fig-segment id="popup-theme-menu"
+                             selected>Menu</fig-segment>
+            </fig-segmented-control>
             <hstack>
                 <fig-button id="popup-open-popover">Open Popover Variant</fig-button>
                 <fig-button id="popup-close-popover"
@@ -2692,7 +2699,8 @@
                     is="fig-popup"
                     anchor="#popup-open-popover"
                     position="top center"
-                    variant="popover">
+                    variant="popover"
+                    theme="menu">
                 <vstack style="min-width: 12rem;">
                     <strong style="padding: 0 var(--spacer-1);">Popover Beak</strong>
                     <fig-field direction="horizontal">
@@ -2705,7 +2713,8 @@
 &lt;dialog is="fig-popup"
         anchor="#popup-open-popover"
         position="top center"
-        variant="popover"&gt;
+        variant="popover"
+        theme="menu"&gt;
   ...
 &lt;/dialog&gt;</code></pre>
 
@@ -4166,6 +4175,8 @@ button.addEventListener('click', () => {
         const popupDefault = document.getElementById('popup-default');
         const popupPreferred = document.getElementById('popup-preferred');
         const popupProp = document.getElementById('popup-prop');
+        const popupPopover = document.getElementById('popup-popover');
+        const popupThemeControl = document.getElementById('popup-theme-control');
 
         document.getElementById('popup-open-default')?.addEventListener('click', () => {
             popupDefault?.setAttribute('open', 'true');
@@ -4188,6 +4199,23 @@ button.addEventListener('click', () => {
             if (popupProp) popupProp.open = false;
         });
 
+        popupThemeControl?.addEventListener('click', () => {
+            if (!popupPopover) return;
+            if (document.getElementById('popup-theme-default')?.hasAttribute('selected')) {
+                popupPopover.removeAttribute('theme');
+                return;
+            }
+            if (document.getElementById('popup-theme-dark')?.hasAttribute('selected')) {
+                popupPopover.setAttribute('theme', 'dark');
+                return;
+            }
+            if (document.getElementById('popup-theme-light')?.hasAttribute('selected')) {
+                popupPopover.setAttribute('theme', 'light');
+                return;
+            }
+            popupPopover.setAttribute('theme', 'menu');
+        });
+
         const popupExamples = [
             ['popup-open-popover', 'popup-close-popover', 'popup-popover'],
             ['popup-open-top-left', 'popup-close-top-left', 'popup-top-left'],

package/package.json

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