@trebired/frontend 14.13.1 → 14.14.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 14.14.1
|
|
4
|
+
|
|
5
|
+
- `cols-2` drops to a single column at 560px. `cols-3` and `cols-4` already step down to two columns there, so `cols-2` was the only grid that kept its desktop count on a phone — a pair of cards half the width of every other card on the page.
|
|
6
|
+
|
|
7
|
+
## 14.14.0
|
|
8
|
+
|
|
9
|
+
- `.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.
|
|
10
|
+
- 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.
|
|
11
|
+
- 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.
|
|
12
|
+
|
|
3
13
|
## 14.13.1
|
|
4
14
|
|
|
5
15
|
- 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.
|
|
@@ -4,7 +4,10 @@
|
|
|
4
4
|
min-width: 170px;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
/* Compounded with the button class throughout: the trigger is a button, and a
|
|
8
|
+
site's own button sizing is declared after these rules, so a plain
|
|
9
|
+
.tbf-locale-trigger loses every property it shares with it. */
|
|
10
|
+
#{ns.class("button")}#{ns.class("locale-trigger")} {
|
|
8
11
|
gap: var(#{ns.css-var("shell-language-trigger-gap")}, var(#{ns.css-var("gap-xs")}, 8px));
|
|
9
12
|
height: var(#{ns.css-var("shell-language-trigger-height")}, 32px);
|
|
10
13
|
min-height: var(#{ns.css-var("shell-language-trigger-height")}, 32px);
|
|
@@ -61,7 +61,13 @@
|
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
+
/* cols-2 has no two-column step to fall back to, so it collapses here with
|
|
65
|
+
the rest rather than keeping two columns narrower than any other grid. */
|
|
64
66
|
@media (max-width: 560px) {
|
|
67
|
+
&.cols-2 {
|
|
68
|
+
grid-template-columns: 1fr;
|
|
69
|
+
}
|
|
70
|
+
|
|
65
71
|
&.cols-3,
|
|
66
72
|
&.cols-4 {
|
|
67
73
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
@use "sass:list";
|
|
2
|
-
@use "sass:math";
|
|
3
1
|
@use "@trebired/bundler/namespace" as ns;
|
|
4
2
|
.width-max {
|
|
5
3
|
width: 100% !important;
|
|
@@ -52,19 +50,13 @@
|
|
|
52
50
|
}
|
|
53
51
|
|
|
54
52
|
.text-outline {
|
|
55
|
-
$width: var(#{ns.css-var("typography-outline-width")}, 2px);
|
|
56
|
-
$color: var(#{ns.css-var("typography-outline-color")}, var(#{ns.css-var("text")}, #000));
|
|
57
|
-
$ring: ();
|
|
58
|
-
@for $step from 0 through 11 {
|
|
59
|
-
$angle: math.div(360deg * $step, 12);
|
|
60
|
-
$ring: list.append(
|
|
61
|
-
$ring,
|
|
62
|
-
calc(#{math.cos($angle)} * #{$width}) calc(#{math.sin($angle)} * #{$width}) 0 $color,
|
|
63
|
-
comma
|
|
64
|
-
);
|
|
65
|
-
}
|
|
66
53
|
color: var(#{ns.css-var("typography-outline-fill")}, var(#{ns.css-var("page")}, #fff));
|
|
67
|
-
text-
|
|
54
|
+
-webkit-text-stroke:
|
|
55
|
+
var(#{ns.css-var("typography-outline-width")}, 2px)
|
|
56
|
+
var(#{ns.css-var("typography-outline-color")}, var(#{ns.css-var("text")}, #000));
|
|
57
|
+
/* The stroke follows every contour of a glyph, the inner ones included, so
|
|
58
|
+
painting it under the fill keeps the outline on the outside edge. */
|
|
59
|
+
paint-order: stroke fill;
|
|
68
60
|
}
|
|
69
61
|
|
|
70
62
|
.list-plain {
|
|
@@ -53,6 +53,10 @@
|
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
#{ns.data("hairline-interactive", "true")}:hover {
|
|
56
|
+
#{ns.css-var("text-muted")}: var(
|
|
57
|
+
#{ns.css-var("surf-hairline-cell-text-muted-inverse")},
|
|
58
|
+
color-mix(in srgb, currentColor 62%, transparent)
|
|
59
|
+
);
|
|
56
60
|
color: var(#{ns.css-var("surf-hairline-cell-color-inverse")}, var(#{ns.css-var("page")}, #fff));
|
|
57
61
|
background: var(#{ns.css-var("surf-hairline-cell-bg-inverse")}, var(#{ns.css-var("text")}, #000));
|
|
58
62
|
}
|
package/package.json
CHANGED