@trebired/frontend 14.13.0 → 14.14.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 14.14.0
+
+- `.text-outline` is drawn with a real text stroke painted under the fill rather than a ring of twelve shadows. The ring approximated a circle, so it thinned and notched wherever a letter turned a corner; `paint-order: stroke fill` keeps the stroke on the outside edge, which is what the shadows were working around.
+- The locale trigger sets every one of its own measurements through `.tbf-button.tbf-locale-trigger`. Only its border was compounded before, so a site whose buttons are taller or more padded than the trigger's own tokens got that size instead — the trigger's `height` and `padding` were being read and then overruled.
+- A hovered hairline cell rescopes `text-muted` to its hover colour, so a caption inside it turns with the ground instead of staying the resting grey and disappearing into it.
+
+## 14.13.1
+
+- The error page's stylesheet ships with the layout system. It was added as its own file that nothing loaded, since package styles are pulled in per system rather than globbed, so `ErrorPage` rendered unstyled.
+
 ## 14.13.0
 
 - Added `ErrorPage`, so a site stops writing its own not-found and error pages. It takes a `status` and carries built-in Czech and English copy for 403, 404, 410, 500 and 503, with a fallback for anything else; `title`, `lead` and `actions` override it where a site wants its own words. Styling comes from `shell.error`, and `ERROR_STATUSES`, `errorRoutePath` and `errorShellFileName` give a build the paths and filenames to emit a shell per status.

package/dist/language/styles/index.scss

@@ -4,7 +4,10 @@
   min-width: 170px;
 }
 
-#{ns.class("locale-trigger")} {
+/* Compounded with the button class throughout: the trigger is a button, and a
+   site's own button sizing is declared after these rules, so a plain
+   .tbf-locale-trigger loses every property it shares with it. */
+#{ns.class("button")}#{ns.class("locale-trigger")} {
   gap: var(#{ns.css-var("shell-language-trigger-gap")}, var(#{ns.css-var("gap-xs")}, 8px));
   height: var(#{ns.css-var("shell-language-trigger-height")}, 32px);
   min-height: var(#{ns.css-var("shell-language-trigger-height")}, 32px);

package/dist/layout/styles/index.scss

@@ -3,6 +3,7 @@
 @use "./breadcrumb";
 @use "./site-header";
 @use "./site-footer";
+@use "./error";
 
 :root {
   #{ns.css-var("layout-top-offset")}: 0px;

package/dist/styles/utils/text/core.scss

@@ -1,5 +1,3 @@
-@use "sass:list";
-@use "sass:math";
 @use "@trebired/bundler/namespace" as ns;
 .width-max {
   width: 100% !important;
@@ -52,19 +50,13 @@
 }
 
 .text-outline {
-  $width: var(#{ns.css-var("typography-outline-width")}, 2px);
-  $color: var(#{ns.css-var("typography-outline-color")}, var(#{ns.css-var("text")}, #000));
-  $ring: ();
-  @for $step from 0 through 11 {
-    $angle: math.div(360deg * $step, 12);
-    $ring: list.append(
-      $ring,
-      calc(#{math.cos($angle)} * #{$width}) calc(#{math.sin($angle)} * #{$width}) 0 $color,
-      comma
-    );
-  }
   color: var(#{ns.css-var("typography-outline-fill")}, var(#{ns.css-var("page")}, #fff));
-  text-shadow: $ring;
+  -webkit-text-stroke:
+  var(#{ns.css-var("typography-outline-width")}, 2px)
+  var(#{ns.css-var("typography-outline-color")}, var(#{ns.css-var("text")}, #000));
+  /* The stroke follows every contour of a glyph, the inner ones included, so
+     painting it under the fill keeps the outline on the outside edge. */
+  paint-order: stroke fill;
 }
 
 .list-plain {

package/dist/surface/styles/hairline.scss

@@ -53,6 +53,10 @@
 }
 
 #{ns.data("hairline-interactive", "true")}:hover {
+  #{ns.css-var("text-muted")}: var(
+    #{ns.css-var("surf-hairline-cell-text-muted-inverse")},
+    color-mix(in srgb, currentColor 62%, transparent)
+  );
   color: var(#{ns.css-var("surf-hairline-cell-color-inverse")}, var(#{ns.css-var("page")}, #fff));
   background: var(#{ns.css-var("surf-hairline-cell-bg-inverse")}, var(#{ns.css-var("text")}, #000));
 }

package/package.json

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