@trebired/frontend 21.10.0 → 21.11.0

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 21.11.0
+
+- The chrome and the overlays read their colours through the frontend's own namespace. Buttons, popover and dropdown items, the locale switcher and flash messages fell back to `--text-color`, `--border-surface-1`, `--background-surface-2` and their neighbours, which a site sets once at the root. The contrast system rewrites the namespaced tokens on the element, not at the root, so anything reading the bare names stayed at the page's colour whatever it was placed on: the current locale in a popover opened over a dark hero was painted in the light page's ink on a dark panel, and could barely be read.
+- Those fallbacks now go through the adaptive colour, the adaptive border and the surface tokens, so an overlay matches the header above it.
+
 ## 21.10.0
 
 - A button takes its border and its text colour from the theme. Both were written into the defaults as `currentColor`, which are fixed at the root, so a button's outline was always as strong as its label and no site could soften it. They now fall through to the adaptive border and the adaptive colour, which also means a button suits the surface it sits on rather than the one it was configured for.

package/dist/actions/styles/index.scss

@@ -17,13 +17,13 @@
   padding-block: var(#{ns.css-var("ui-action-root-py")}, var(#{ns.css-var("ui-btn-root-py")}, 0));
   border: var(
     #{ns.css-var("ui-action-root-border")},
-    var(#{ns.css-var("ui-btn-root-border")}, var(--border-width) solid var(--border-surface-2))
+    var(#{ns.css-var("ui-btn-root-border")}, var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("adaptive-border")}, currentColor))
   );
   border-radius: var(
     #{ns.css-var("ui-action-root-radius")},
     var(#{ns.css-var("ui-btn-root-radius")}, var(--radius-md, var(#{ns.css-var("radius")}, 0)))
   );
-  color: var(#{ns.css-var("ui-action-root-color")}, var(#{ns.css-var("ui-btn-root-color")}, var(--text-color)));
+  color: var(#{ns.css-var("ui-action-root-color")}, var(#{ns.css-var("ui-btn-root-color")}, var(#{ns.css-var("adaptive")}, currentColor)));
   background: var(#{ns.css-var("ui-action-root-bg")}, var(#{ns.css-var("ui-btn-root-bg")}, transparent));
   cursor: pointer;
   appearance: none;

package/dist/flash/styles/index.scss

@@ -21,11 +21,11 @@
   padding: var(#{ns.css-var("feedback-flash-container-padding")}, 15px);
   border: var(
     #{ns.css-var("feedback-flash-container-border")},
-    var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("feedback-flash-container-border")}, var(--border-surface-1, currentColor))
+    var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("feedback-flash-container-border")}, var(#{ns.css-var("adaptive-border")}, currentColor))
   );
   border-radius: var(#{ns.css-var("feedback-flash-container-radius")}, var(--radius-lg, var(#{ns.css-var("radius")}, 0)));
-  color: var(#{ns.css-var("feedback-flash-container-color")}, var(--text-color, currentColor));
-  background: var(#{ns.css-var("feedback-flash-container-bg")}, var(--background-surface-1, transparent));
+  color: var(#{ns.css-var("feedback-flash-container-color")}, var(#{ns.css-var("adaptive")}, currentColor));
+  background: var(#{ns.css-var("feedback-flash-container-bg")}, var(#{ns.css-var("surface")}, transparent));
   box-shadow: var(#{ns.css-var("feedback-flash-container-shadow")}, var(#{ns.css-var("shadow")}, none));
   opacity: 0;
   overflow: hidden;
@@ -100,7 +100,7 @@
 }
 
 #{ns.element-class("flash", "description")} {
-  color: var(#{ns.css-var("feedback-flash-slot-description-color")}, var(--text-color-muted, currentColor));
+  color: var(#{ns.css-var("feedback-flash-slot-description-color")}, var(#{ns.css-var("adaptive-muted")}, currentColor));
   font-size: var(#{ns.css-var("feedback-flash-slot-description-font-size")}, 0.92rem);
   text-shadow: none;
 }

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

@@ -33,8 +33,8 @@
     right: var(--dd-arrow-right);
     top: calc(var(--dd-h) / 2);
     transform: translateY(-3px);
-    border: calc(var(--border-width) * 6) solid transparent;
-    border-top-color: var(#{ns.css-var("ui-dropdown-arrow-color")}, var(--text-color-muted, currentColor));
+    border: calc(var(#{ns.css-var("border-width")}, 1px) * 6) solid transparent;
+    border-top-color: var(#{ns.css-var("ui-dropdown-arrow-color")}, var(#{ns.css-var("adaptive-muted")}, currentColor));
     pointer-events: none;
   }
 
@@ -70,8 +70,8 @@
     top: calc(100% + 4px);
     left: 0;
     right: 0;
-    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")}, transparent));
+    border: var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("adaptive-border")}, currentColor);
     border-radius: var(--radius-lg);
     margin: 0;
     padding: 0;
@@ -131,14 +131,14 @@
     pointer-events: none;
     overflow: hidden;
     z-index: 1;
-    color: var(--text-color);
+    color: var(#{ns.css-var("adaptive")}, currentColor);
     font-size: 13px;
     line-height: 1.4;
   }
 
   #{ns.class("dropdown-top")} {
     padding: 10px;
-    border-bottom: var(--border-width) solid var(--border-surface-1);
+    border-bottom: var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("adaptive-border")}, currentColor);
 
     #{ns.class("input")} {
       width: 100%;
@@ -187,7 +187,7 @@
       user-select: none;
 
       &:hover {
-        background: var(#{ns.css-var("ui-dropdown-option-state-hover-bg")}, var(--background-surface-2, transparent));
+        background: var(#{ns.css-var("ui-dropdown-option-state-hover-bg")}, var(#{ns.css-var("surface-muted")}, transparent));
       }
 
       &#{ns.data("dropdown-selected", "true")} {
@@ -195,26 +195,26 @@
           #{ns.css-var("ui-dropdown-option-state-selected-bg")},
           color-mix(
             in srgb,
-            var(--background-surface-2, transparent) 70%,
+            var(#{ns.css-var("surface-muted")}, transparent) 70%,
             var(--accent, var(#{ns.css-var("focus")}, currentColor)) 30%
           )
         );
       }
 
       &#{ns.data("dropdown-placeholder-option")} {
-        color: var(--text-color-muted);
+        color: var(#{ns.css-var("adaptive-muted")}, currentColor);
         cursor: default;
       }
 
       &#{ns.data("dropdown-unselect", "true")} {
-        color: var(--text-color-muted);
+        color: var(#{ns.css-var("adaptive-muted")}, currentColor);
       }
 
       &#{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/inputs/advanced/dropdown/styles/portaled.scss

@@ -4,7 +4,7 @@
 #{ns.class("options")}#{ns.data("dropdown-portaled", "true")} {
   position: fixed;
   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: var(#{ns.css-var("border-width")}, 1px) 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(#{ns.css-var("adaptive-border")}, currentColor);
+  border-bottom: var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("adaptive-border")}, currentColor);
 }
 
 #{ns.class("options")}#{ns.data("dropdown-portaled", "true")} #{ns.class("dropdown-top")} #{ns.class("input")} {
@@ -107,7 +107,7 @@
 }
 
 #{ns.class("options")}#{ns.data("dropdown-portaled", "true")} #{ns.class("dropdown-list")} li:hover {
-  background: var(#{ns.css-var("ui-dropdown-option-state-hover-bg")}, var(--background-surface-2, transparent));
+  background: var(#{ns.css-var("ui-dropdown-option-state-hover-bg")}, var(#{ns.css-var("surface-muted")}, transparent));
 }
 
 #{ns.class("options")}#{ns.data("dropdown-portaled", "true")}
@@ -119,7 +119,7 @@ li#{ns.data("dropdown-selected", "true")} {
     #{ns.css-var("ui-dropdown-option-state-selected-bg")},
     color-mix(
       in srgb,
-      var(--background-surface-2, transparent) 70%,
+      var(#{ns.css-var("surface-muted")}, transparent) 70%,
       var(--accent, var(#{ns.css-var("focus")}, currentColor)) 30%
     )
   );

package/dist/language/styles/index.scss

@@ -66,9 +66,9 @@
 #{ns.class("locale-switch-popover")} #{ns.class("locale-option")}#{ns.data("locale-current", "true")} {
   background: var(
     #{ns.css-var("shell-language-option-state-current-bg")},
-    var(#{ns.css-var("overlay-popover-item-state-selected-bg")}, var(--background-surface-2, transparent))
+    var(#{ns.css-var("overlay-popover-item-state-selected-bg")}, var(#{ns.css-var("surface-muted")}, transparent))
   );
-  color: var(#{ns.css-var("shell-language-option-state-current-color")}, var(--text-color));
+  color: var(#{ns.css-var("shell-language-option-state-current-color")}, var(#{ns.css-var("adaptive")}, currentColor));
 }
 
 #{ns.class("locale-code")} {
@@ -79,7 +79,7 @@
   min-width: 28px;
   height: 20px;
   padding: 0 5px;
-  border: var(--border-width, 1px) solid color-mix(in srgb, currentColor 22%, transparent);
+  border: var(#{ns.css-var("border-width")}, 1px) solid color-mix(in srgb, currentColor 22%, transparent);
   border-radius: var(--radius-sm, 3px);
   color: color-mix(in srgb, currentColor 78%, transparent);
   font-size: 11px;
@@ -91,9 +91,9 @@
   --CountryFlagIcon-height: 16px;
 
   flex: 0 0 auto;
-  border: var(--border-width, 1px) solid var(--border-surface-1);
+  border: var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("adaptive-border")}, currentColor);
   border-radius: var(--radius-sm, 3px);
-  background-color: var(--background-surface-2, transparent);
+  background-color: var(#{ns.css-var("surface-muted")}, transparent);
   box-shadow: 0 0 0 1px rgb(255 255 255 / 0.02) inset;
 }
 
@@ -103,7 +103,7 @@
   width: 100%;
   height: 4px;
   border-radius: 999px;
-  background: var(--background-surface-2, transparent);
+  background: var(#{ns.css-var("surface-muted")}, transparent);
 }
 
 #{ns.class("source-language-share-bar")} {
@@ -122,7 +122,7 @@
   width: 100%;
   height: 8px;
   border-radius: 999px;
-  background: var(--background-surface-2, transparent);
+  background: var(#{ns.css-var("surface-muted")}, transparent);
 }
 
 #{ns.class("source-language-distribution-segment")} {

package/dist/surface/styles/index.scss

@@ -19,13 +19,13 @@
   padding-block: var(#{ns.css-var("surf-btn-root-py")}, var(#{ns.css-var("ui-btn-root-py")}, 0));
   border: var(
     #{ns.css-var("surf-btn-root-border")},
-    var(#{ns.css-var("ui-btn-root-border")}, var(--border-width) solid var(--border-surface-2))
+    var(#{ns.css-var("ui-btn-root-border")}, var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("adaptive-border")}, currentColor))
   );
   border-radius: var(
     #{ns.css-var("surf-btn-root-radius")},
     var(#{ns.css-var("ui-btn-root-radius")}, var(--radius-md, var(#{ns.css-var("radius")}, 0)))
   );
-  color: var(#{ns.css-var("surf-btn-root-color")}, var(#{ns.css-var("ui-btn-root-color")}, var(--text-color)));
+  color: var(#{ns.css-var("surf-btn-root-color")}, var(#{ns.css-var("ui-btn-root-color")}, var(#{ns.css-var("adaptive")}, currentColor)));
   background: var(#{ns.css-var("surf-btn-root-bg")}, var(#{ns.css-var("ui-btn-root-bg")}, transparent));
   transition: var(
     #{ns.css-var("surf-btn-root-transition")},
@@ -193,7 +193,7 @@
     border-color var(#{ns.css-var("transition-fast")}, 180ms) var(#{ns.css-var("transition-easing")}, ease),
     color var(#{ns.css-var("transition-fast")}, 180ms) var(#{ns.css-var("transition-easing")}, ease)
   );
-  border: var(#{ns.css-var("surf-card-root-border")}, var(--border-width) solid var(--border-surface-1));
+  border: var(#{ns.css-var("surf-card-root-border")}, var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("adaptive-border")}, currentColor));
   border-radius: var(#{ns.css-var("surf-card-root-radius")}, var(--radius-lg, var(#{ns.css-var("radius")}, 0)));
   color: var(#{ns.css-var("surf-card-root-color")}, var(#{ns.css-var("text")}, #000));
   background: var(#{ns.css-var("surf-card-root-bg")}, var(--background-page, var(#{ns.css-var("page")}, #fff)));

package/package.json

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