@trebired/frontend 19.2.1 → 19.5.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 19.5.0
+
+- An action row's value no longer breaks mid-word by default. It is usually an address or a number, and `overflow-wrap: anywhere` cut `info@machynka.eu` across two lines on a phone. It breaks only where it truly cannot fit now, and its size is capped against the screen before that: a site's chosen size holds on a wide screen and gives way on a narrow one, so the same address fits on one line at phone width.
+
+## 19.4.0
+
+- A hairline grid draws lines only between its cells. Each cell carried a full ring and the grid an outer border, so the outside edges were drawn twice and the grid was boxed in. The lines are the grid's gap showing through now, which cannot reach an outer edge, and they default to 10% of the current colour rather than 18%.
+- A link in the menu reads from the header link's own tokens. It had its own colour, weight and size, so a site styling its navigation got two different looks and the active mark did not match between the header and the menu. `menu-link-*` still overrides where a site wants them to differ.
+- `tbf-cols-hold` keeps a fixed column grid from collapsing on a narrow screen. A grid of small tiles, a symbol and a word, narrows well and has no reason to stack; without it `tbf-cols-2` becomes one column below 560px and a compact block turns into a list.
+
 ## 19.2.1
 
 - The marked section is the one nearest the reading line from above, rather than the last matching entry in the menu. A menu does not have to list sections in the order the page lays them out, and machynka's does not: walking the menu handed the mark to whichever section happened to come last, so standing in one section marked another.

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

@@ -254,9 +254,11 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
   display: block;
   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));
+  color: token("menu-link-color", token("link-color", var(#{ns.css-var("text-muted")}, #555)));
   font-size: 1rem;
-  font-weight: token("menu-link-font-weight", 600);
+  font-weight: token("menu-link-font-weight", token("link-font-weight", 500));
+  letter-spacing: token("menu-link-letter-spacing", token("link-letter-spacing", normal));
+  text-transform: token("menu-link-text-transform", token("link-text-transform", none));
 }
 
 #{ns.element-class("site-header", "menu-footer")} {

package/dist/styles/utils/layout-grid.scss

@@ -77,4 +77,14 @@
       grid-template-columns: 1fr;
     }
   }
+
+  @media (max-width: 900px) {
+    &#{ns.class("cols-hold")}#{ns.class("cols-2")} {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    &#{ns.class("cols-hold")}#{ns.class("cols-3")} {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
 }

package/dist/surface/styles/blocks.scss

@@ -102,9 +102,12 @@
 }
 
 #{ns.element-class("action-row", "value")} {
-  overflow-wrap: anywhere;
+  overflow-wrap: break-word;
   color: var(#{ns.css-var("surf-action-row-value-color")}, inherit);
-  font-size: var(#{ns.css-var("surf-action-row-value-font-size")}, 1.25rem);
+  font-size: min(
+    var(#{ns.css-var("surf-action-row-value-font-size")}, 1.25rem),
+    max(0.85rem, 4.2vw)
+  );
   font-weight: var(#{ns.css-var("surf-action-row-value-font-weight")}, 700);
   transition: color var(#{ns.css-var("transition-fast")}, 180ms) ease;
 }

package/dist/surface/styles/hairline.scss

@@ -6,17 +6,17 @@
     auto-fit,
     minmax(min(var(#{ns.css-var("surf-hairline-root-min")}, 16rem), 100%), 1fr)
   );
-  gap: var(#{ns.css-var("surf-hairline-root-gap")}, 0);
+  gap: var(#{ns.css-var("surf-hairline-root-gap")}, var(--border-width, 1px));
   overflow: hidden;
-  border: var(
-    #{ns.css-var("surf-hairline-root-border")},
-    var(--border-width, 1px) solid color-mix(in srgb, currentColor 18%, transparent)
-  );
+  border: var(#{ns.css-var("surf-hairline-root-border")}, 0);
   border-radius: var(
     #{ns.css-var("surf-hairline-root-radius")},
     var(--radius-lg, var(#{ns.css-var("radius")}, 0))
   );
-  background: var(#{ns.css-var("surf-hairline-root-bg")}, transparent);
+  background: var(
+    #{ns.css-var("surf-hairline-root-bg")},
+    color-mix(in srgb, currentColor 10%, transparent)
+  );
   list-style: none;
 }
 
@@ -32,10 +32,6 @@
   padding: var(#{ns.css-var("surf-hairline-cell-padding")}, var(#{ns.css-var("gap-md")}, 24px));
   color: var(#{ns.css-var("surf-hairline-cell-color")}, var(#{ns.css-var("text")}, #000));
   background: var(#{ns.css-var("surf-hairline-cell-bg")}, var(#{ns.css-var("page")}, #fff));
-  box-shadow: 0 0 0 var(--border-width, 1px) var(
-    #{ns.css-var("surf-hairline-cell-line")},
-    color-mix(in srgb, currentColor 18%, transparent)
-  );
   transition: background-color 0.3s ease, color 0.3s ease;
 }
 

package/package.json

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