@trebired/frontend 20.11.0 → 20.13.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # 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.
+
 ## 20.11.0
 
 - Chrome is the right colour in the first painted frame after a reload, with no correction afterwards. The server knows which page it is rendering but not where the reader has scrolled to, so on a reload part-way down a page the header was painted from the page's own state and then corrected once the browser had measured what was actually behind it, a tenth of a second later. No script can win that race, because the browser paints before the document has finished parsing. `createContrastBootScript()` remembers the state when the page goes away and puts it back as CSS in the head, which applies to elements as they are parsed. A site adds it beside the scroll boot script.

package/dist/contrast/styles/index.scss

@@ -15,6 +15,8 @@ $inherited:
 "shell-header-link-hover-color",
 "shell-header-link-active-color",
 "shell-header-toggle-color",
+"shell-header-brand-button-color",
+"shell-header-brand-button-hover-color",
 "shell-language-trigger-color",
 "shell-language-trigger-border",
 "shell-footer-link-color";
@@ -44,6 +46,8 @@ $inherited:
   #{ns.css-var("shell-header-link-hover-color")}: var(#{ns.css-var("text")});
   #{ns.css-var("shell-header-link-active-color")}: var(#{ns.css-var("text")});
   #{ns.css-var("shell-header-toggle-color")}: var(#{ns.css-var("text")});
+  #{ns.css-var("shell-header-brand-button-color")}: color-mix(in srgb, var(#{ns.css-var("text")}) 74%, transparent);
+  #{ns.css-var("shell-header-brand-button-hover-color")}: var(#{ns.css-var("text")});
   #{ns.css-var("shell-language-trigger-color")}: var(#{ns.css-var("text")});
   #{ns.css-var("shell-language-trigger-border")}: var(#{ns.css-var("border")});
   #{ns.css-var("shell-footer-link-color")}: var(#{ns.css-var("text-muted")});
@@ -79,6 +83,14 @@ $inherited:
     #{ns.css-var("contrast-base-shell-header-toggle-color")},
     var(#{ns.css-var("text")})
   );
+  #{ns.css-var("shell-header-brand-button-color")}: var(
+    #{ns.css-var("contrast-base-shell-header-brand-button-color")},
+    color-mix(in srgb, var(#{ns.css-var("text")}) 74%, transparent)
+  );
+  #{ns.css-var("shell-header-brand-button-hover-color")}: var(
+    #{ns.css-var("contrast-base-shell-header-brand-button-hover-color")},
+    var(#{ns.css-var("text")})
+  );
   #{ns.css-var("shell-language-trigger-color")}: var(
     #{ns.css-var("contrast-base-shell-language-trigger-color")},
     var(#{ns.css-var("text")})

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

@@ -318,21 +318,32 @@ $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);
-  color: var(
-    #{ns.css-var("shell-header-brand-button-color")},
-    color-mix(in srgb, currentColor 74%, transparent)
-  );
   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)
+  );
+}
+
 #{ns.class("site-header-brand-button")}:hover,
 
 #{ns.class("site-header-brand-button")}:focus-visible,
 
-#{ns.class("site-header-brand-button")}[aria-expanded="true"] {
-  color: var(#{ns.css-var("shell-header-brand-button-hover-color")}, currentColor);
+#{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));
 }
 
 #{ns.class("button")}#{ns.class("site-header-brand-button")}:hover,

package/package.json

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