@trebired/frontend 21.3.0 → 21.4.0

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 21.4.0
+
+- Popovers and dropdown menus take the adaptive colour for their text, their muted text and their rules, so they suit wherever they open rather than wherever they were configured. The dropdown was reaching past the frontend for a site's own `--text-color-muted` and `--border-surface-1`, which are fixed at the root, so a menu opening over a dark surface kept the colours chosen for a light page.
+
 ## 21.3.0
 
 - A popover takes the colours of wherever it opens. Its panel came with a background of `transparent`, a border of `currentColor` and a colour of `currentColor` written into the defaults, which are fixed at the root: a panel could not read its surroundings, and a site that did not override all three got a see-through menu. The defaults are gone, so the panel falls back to the surface colour, the text colour and the border colour as read where the panel actually is.

package/dist/inputs/advanced/dropdown/styles/portaled.scss

@@ -3,8 +3,8 @@
 
 #{ns.class("options")}#{ns.data("dropdown-portaled", "true")} {
   position: fixed;
-  background: var(#{ns.css-var("ui-dropdown-menu-bg")}, var(--background-surface-1, transparent));
-  border: var(--border-width) solid var(--border-surface-1);
+  background: var(#{ns.css-var("ui-dropdown-menu-bg")}, var(#{ns.css-var("surface")}, #fff));
+  border: var(--border-width) solid var(#{ns.css-var("adaptive-border")}, currentColor);
   border-radius: var(--radius-lg);
   margin: 0;
   padding: 0;
@@ -46,7 +46,7 @@
 
 #{ns.class("options")}#{ns.data("dropdown-portaled", "true")} #{ns.class("dropdown-top")} {
   padding: 10px;
-  border-bottom: var(--border-width) solid var(--border-surface-1);
+  border-bottom: var(--border-width) solid var(#{ns.css-var("adaptive-border")}, currentColor);
 }
 
 #{ns.class("options")}#{ns.data("dropdown-portaled", "true")} #{ns.class("dropdown-top")} #{ns.class("input")} {
@@ -130,7 +130,7 @@ li#{ns.data("dropdown-selected", "true")} {
 #{ns.class("dropdown-list")}
 
 li#{ns.data("dropdown-placeholder-option")} {
-  color: var(--text-color-muted);
+  color: var(#{ns.css-var("adaptive-muted")}, currentColor);
   cursor: default;
 }
 
@@ -139,14 +139,14 @@ li#{ns.data("dropdown-placeholder-option")} {
 #{ns.class("dropdown-list")}
 
 li#{ns.data("dropdown-unselect", "true")} {
-  color: var(--text-color-muted);
+  color: var(#{ns.css-var("adaptive-muted")}, currentColor);
 }
 
 #{ns.class("options")}#{ns.data("dropdown-portaled", "true")} #{ns.class("dropdown-list")} li#{ns.class("dropdown-section")} {
   height: auto;
   min-height: 0;
   padding: 9px 10px 5px;
-  color: var(--text-color-muted);
+  color: var(#{ns.css-var("adaptive-muted")}, currentColor);
   cursor: default;
   font-size: 11px;
   font-weight: 700;

package/dist/popover/styles/index.scss

@@ -9,9 +9,12 @@
   min-width: var(#{ns.css-var("overlay-popover-panel-min-w")}, 220px);
   max-width: min(320px, calc(100vw - 24px));
   padding: var(#{ns.css-var("overlay-popover-panel-padding")}, 8px);
-  border: var(#{ns.css-var("overlay-popover-panel-border")}, var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("border")}, #000));
+  border: var(
+    #{ns.css-var("overlay-popover-panel-border")},
+    var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("adaptive-border")}, currentColor)
+  );
   border-radius: var(#{ns.css-var("overlay-popover-panel-radius")}, var(#{ns.css-var("radius")}, 0));
-  color: var(#{ns.css-var("overlay-popover-panel-color")}, var(#{ns.css-var("text")}, #000));
+  color: var(#{ns.css-var("overlay-popover-panel-color")}, var(#{ns.css-var("adaptive")}, currentColor));
   background: var(#{ns.css-var("overlay-popover-panel-bg")}, var(#{ns.css-var("surface")}, #fff));
   box-shadow: var(#{ns.css-var("overlay-popover-panel-shadow")}, var(#{ns.css-var("shadow")}, 0 0 0 1px #000));
   visibility: hidden;
@@ -54,7 +57,7 @@
   overflow: hidden;
   border: var(#{ns.css-var("overlay-popover-item-root-border")}, 0);
   border-radius: var(#{ns.css-var("overlay-popover-item-root-radius")}, var(#{ns.css-var("radius-sm")}, var(#{ns.css-var("radius")}, 0)));
-  color: var(#{ns.css-var("overlay-popover-item-root-color")}, var(#{ns.css-var("text-muted")}, #666));
+  color: var(#{ns.css-var("overlay-popover-item-root-color")}, var(#{ns.css-var("adaptive-muted")}, currentColor));
   background: var(#{ns.css-var("overlay-popover-item-root-bg")}, transparent);
   cursor: pointer;
   font: inherit;
@@ -84,7 +87,7 @@
 #{ns.data("popover")} > :where(a, button):hover,
 
 #{ns.data("popover")} > :where(a, button):focus {
-  color: var(#{ns.css-var("overlay-popover-item-state-hover-color")}, var(#{ns.css-var("text")}, #000));
+  color: var(#{ns.css-var("overlay-popover-item-state-hover-color")}, var(#{ns.css-var("adaptive")}, currentColor));
   background: var(#{ns.css-var("overlay-popover-item-state-hover-bg")}, var(#{ns.css-var("surface-muted")}, #f4f4f4));
 }
 

package/package.json

@@ -8,7 +8,7 @@
     }
   },
   "name": "@trebired/frontend",
-  "version": "21.3.0",
+  "version": "21.4.0",
   "description": "Generic browser runtime systems for Trebired frontend packages and applications.",
   "type": "module",
   "private": false,