@trebired/frontend 13.8.0 → 13.9.0

package/CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to `@trebired/frontend` will be documented here.
 
 This project follows semantic versioning once published.
 
+## 13.9.0
+
+- The header's sizes are fixed for every site instead of being tokens: the bar is 5rem tall, a brand logo 3.5rem, navigation links 0.875rem and menu links 1rem, the measurements machynka.cz already used. A header that reads as the same component on four sites should not be a different height on each. Colors, fonts, borders, spacing and the brand's own type size stay configurable, since a brand is a logo on one site and fluid text on another.
+
+## 13.8.1
+
+- The mobile menu toggle is one fixed size everywhere: a 3rem button with a 2rem icon, the size machynka.cz already used. It was a per-site token, so each site could pick a different hit target for the same control; the built-in burger grew to match. Only the toggle's color and radius remain tokens.
+
 ## 13.8.0
 
 - Added `SiteHeader`, which owns a content site's whole header: the sticky bar, the brand, the desktop navigation, the actions and the mobile menu behind the toggle. Sites described their own header in markup and CSS, and their mobile menus drifted apart: two of them centred and shrank the open menu because the panel's `margin: 0 auto` let it collapse to its content, indenting the links and stranding the divider mid-row, and neither offered the language menu on a phone. The menu is now one full-width panel under the bar that lists the links, repeats the actions in a footer row, and closes on a link, on Escape, on a press outside the header and when the viewport grows past 768px. Links are passed as data.

package/README.md

@@ -108,7 +108,7 @@ A header with no links and no `menuActions` has no toggle and keeps its actions
 
 The header is the hydration root, so it renders itself as the `<header>` element. Server markup wraps it with `siteHeaderRootHtml(html)`, which the client hydrates through `SITE_HEADER_ROOT_SELECTOR`; the wrapper is `display: contents`, so the header still sticks to the viewport.
 
-Every value a site would restyle is a token under `components.shell.header`: `root` (position, background, border, backdropFilter), `height`, `maxWidth`, `paddingInline`, `brand`, `link`, `toggle`, `menu` and the motion pair `motionDuration` and `motionEasing`.
+Colors, fonts, borders and spacing are tokens under `components.shell.header`: `root` (position, background, border, backdropFilter), `maxWidth`, `paddingInline`, `brand`, `link`, `menu` and the motion pair `motionDuration` and `motionEasing`. Sizes are not: the bar is 5rem tall, a brand logo 3.5rem, navigation links 0.875rem, menu links 1rem, and the toggle a 3rem button with a 2rem icon, the same in every site.
 
 ### Bottom Bar
 

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

@@ -35,7 +35,7 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
 #{ns.element-class("site-header", "bar")} {
   position: relative;
   display: flex;
-  min-height: token("height", 4rem);
+  min-height: 5rem;
   align-items: center;
   justify-content: space-between;
   gap: token("gap", 1rem);
@@ -65,7 +65,7 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
 #{ns.element-class("site-header", "brand")} img {
   display: block;
   width: auto;
-  height: token("brand-logo-height", 2.5rem);
+  height: 3.5rem;
   max-width: token("brand-logo-max-width", 220px);
   object-fit: contain;
 }
@@ -95,7 +95,7 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
 
 #{ns.element-class("site-header", "menu-link")} {
   color: token("link-color", var(#{ns.css-var("text-muted")}, #555));
-  font-size: token("link-font-size", 0.875rem);
+  font-size: 0.875rem;
   font-weight: token("link-font-weight", 500);
   letter-spacing: token("link-letter-spacing", normal);
   text-decoration: none;
@@ -123,26 +123,26 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
 
 #{ns.element-class("site-header", "toggle")} {
   display: inline-flex;
-  width: token("toggle-size", 2.75rem);
-  height: token("toggle-size", 2.75rem);
+  width: 3rem;
+  height: 3rem;
   flex: 0 0 auto;
   align-items: center;
   justify-content: center;
   padding: 0;
-  margin-inline-end: token("toggle-offset", -0.5rem);
+  margin-inline-end: -0.5rem;
   border: 0;
   border-radius: token("toggle-radius", 0.5rem);
   color: token("toggle-color", inherit);
   background: transparent;
-  font-size: token("toggle-icon-size", 1.75rem);
+  font-size: 2rem;
   cursor: pointer;
 }
 
 #{ns.element-class("site-header", "burger")} {
   position: relative;
   display: block;
-  width: 1.25rem;
-  height: 0.875rem;
+  width: 1.5rem;
+  height: 1.0625rem;
 }
 
 #{ns.element-class("site-header", "burger")} > span {
@@ -214,7 +214,7 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
 
 #{ns.element-class("site-header", "menu-body")} {
   min-height: 0;
-  max-height: calc(100dvh - #{token("height", 4rem)});
+  max-height: calc(100dvh - 5rem);
   overflow: hidden;
 }
 
@@ -248,7 +248,7 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
   padding: token("menu-link-padding", 0.5rem 0);
   border-radius: token("menu-link-radius", 0);
   color: token("menu-link-color", var(#{ns.css-var("text")}, #000));
-  font-size: token("menu-link-font-size", 1rem);
+  font-size: 1rem;
   font-weight: token("menu-link-font-weight", 600);
 }
 

package/package.json

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