@trebired/frontend 20.12.0 → 21.0.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 21.0.0
+
+Breaking for configuration: `shell.header.px` and `shell.header.brand.button.padding` are gone.
+
+- The brand sits the same distance from the edge of the screen on every site: 1.5rem on a phone, 1rem once there is room for the full bar. The distance was a per-site setting and the brand button added its own padding on top, so the same logo started at 16px on one site and 38px on another. The header's structure is tbf's to decide, like its height and the size of its menu button.
+- A site that set either of those values is no longer honoured; remove them. Nothing else about the brand changes.
+
+## 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

@@ -29,7 +29,7 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
   max-width: token("max-width", 72rem);
   box-sizing: border-box;
   margin-inline: auto;
-  padding-inline: token("px", 1rem);
+  padding-inline: 1.5rem;
 }
 
 #{ns.element-class("site-header", "bar")} {
@@ -255,6 +255,11 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
 }
 
 @media (min-width: 768px) {
+  #{ns.element-class("site-header", "bar")},
+  #{ns.element-class("site-header", "menu-content")} {
+    padding-inline: 1rem;
+  }
+
   #{ns.element-class("site-header", "nav")},
   #{ns.element-class("site-header", "actions")} {
     display: flex;
@@ -317,21 +322,33 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
   min-width: 0;
   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);
+  padding-block: 4px;
+  padding-inline: 0;
+  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": "21.0.0",
   "description": "Generic browser runtime systems for Trebired frontend packages and applications.",
   "type": "module",
   "private": false,