@trebired/frontend 13.8.1 → 13.9.0

package/CHANGELOG.md

@@ -4,6 +4,10 @@ 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.

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`, `menu` and the motion pair `motionDuration` and `motionEasing`. The toggle is a fixed 3rem button with a 2rem icon in every site, so only its color and radius are tokens.
+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;
@@ -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.1",
+  "version": "13.9.0",
   "description": "Generic browser runtime systems for Trebired frontend packages and applications.",
   "type": "module",
   "private": false,