@trebired/frontend 20.12.0 → 20.13.0

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 20.13.0
+
+- The brand button keeps its own colour instead of the one every button gets. Both rules carried the same weight and the general one is written later, so it won, and the brand took the colour flowing down from the header: on a light page the little arrow beside the logo came out almost white and read as having disappeared. Its colour now outranks the general rule, as its background already did.
+
 ## 20.12.0
 
 - The brand button takes the colour of the surface it is on rather than the colour it inherits. It was built from the text colour flowing down from the header, so a brand that had been worked out to sit on light content still printed itself in the header's dark-content colour: on a light page the little arrow beside the logo came out almost white and read as having disappeared. It now follows its own state, like the links and the toggle beside it.

package/dist/layout/styles/site-header.scss

@@ -318,20 +318,31 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
   border: 0;
   border-radius: var(#{ns.css-var("shell-header-brand-button-radius")}, var(#{ns.css-var("radius-sm")}, 0));
   padding: var(#{ns.css-var("shell-header-brand-button-padding")}, 4px 6px);
+  background: transparent;
+  cursor: pointer;
+  transition: color 0.22s ease;
+}
+
+#{ns.class("site-header-brand-button")},
+
+#{ns.class("button")}#{ns.class("site-header-brand-button")} {
   color: var(
     #{ns.css-var("shell-header-brand-button-color")},
     color-mix(in srgb, var(#{ns.css-var("text")}, currentColor) 74%, transparent)
   );
-  background: transparent;
-  cursor: pointer;
-  transition: color 0.22s ease;
 }
 
 #{ns.class("site-header-brand-button")}:hover,
 
 #{ns.class("site-header-brand-button")}:focus-visible,
 
-#{ns.class("site-header-brand-button")}[aria-expanded="true"] {
+#{ns.class("site-header-brand-button")}[aria-expanded="true"],
+
+#{ns.class("button")}#{ns.class("site-header-brand-button")}:hover,
+
+#{ns.class("button")}#{ns.class("site-header-brand-button")}:focus-visible,
+
+#{ns.class("button")}#{ns.class("site-header-brand-button")}[aria-expanded="true"] {
   color: var(#{ns.css-var("shell-header-brand-button-hover-color")}, var(#{ns.css-var("text")}, currentColor));
 }
 

package/package.json

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