@trebired/frontend 18.6.0 → 18.8.0
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 +10 -0
- package/dist/styles/utils/base.scss +3 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 18.8.0
|
|
4
|
+
|
|
5
|
+
- The scrollbar gutter is reserved on every page, including ones short enough not to scroll. `scrollbar-gutter: stable` had been declared on `html` since long before this, but it never took effect: it applies to scroll containers, and `html` was not one. Measured on an error page the reserved width was 0 while a scrolling page reserved 15, so the page edge shifted between routes and the hairline sat in a different place on each. `overflow-y: scroll` makes the root a scroll container, so the gutter is now 15 on both.
|
|
6
|
+
- The hairline therefore sits at the inner edge of that gutter on every page, at a consistent distance from the window edge rather than against the scrollbar on one route and the window on another.
|
|
7
|
+
|
|
8
|
+
## 18.7.0
|
|
9
|
+
|
|
10
|
+
- The page edge hairline is strong enough to see. Measured against a render with the line switched off, 18.5.0 moved its column by 62 and 18.6.0 by 87, neither of which reads as a line at one pixel. It is 50% now: 125 over a light page, 128 over a dark one.
|
|
11
|
+
- The colours are the package's own and there is nothing for a site to set. A translucent black line with a translucent white one beside it composites against whatever is behind, so the pair carries on light, dark and mid backgrounds alike, and no site declares or overrides any part of it.
|
|
12
|
+
|
|
3
13
|
## 18.6.0
|
|
4
14
|
|
|
5
15
|
- The page edge hairline no longer depends on `backdrop-filter`. It is a translucent dark line with a translucent light one beside it, so one of the pair carries on any background: measured contrast is 88 over near white, 45 over mid grey and 79 over near black. 18.5.0 used `backdrop-filter: invert(1)`, which vanishes entirely over a mid tone, since inverting a mid grey gives back the same grey, and disappears completely in any browser where the filter does not paint, because the `@supports` rule had cleared the background underneath it.
|
|
@@ -11,6 +11,7 @@ html {
|
|
|
11
11
|
color-scheme: var(#{ns.css-var("surf-scrollbar-root-scheme")}, light dark);
|
|
12
12
|
scrollbar-gutter: var(#{ns.css-var("surf-scrollbar-root-gutter")}, stable);
|
|
13
13
|
overflow-x: clip;
|
|
14
|
+
overflow-y: scroll;
|
|
14
15
|
scrollbar-width: var(#{ns.css-var("surf-scrollbar-root-width")}, auto);
|
|
15
16
|
scrollbar-color: var(#{ns.css-var("surf-scrollbar-root-thumb")}, auto)
|
|
16
17
|
var(#{ns.css-var("surf-scrollbar-root-track")}, transparent);
|
|
@@ -105,8 +106,8 @@ body::after {
|
|
|
105
106
|
inset-block: 0;
|
|
106
107
|
inset-inline-end: 0;
|
|
107
108
|
width: 1px;
|
|
108
|
-
background: rgb(0 0 0 /
|
|
109
|
-
box-shadow: -1px 0 0 rgb(255 255 255 /
|
|
109
|
+
background: rgb(0 0 0 / 50%);
|
|
110
|
+
box-shadow: -1px 0 0 rgb(255 255 255 / 50%);
|
|
110
111
|
pointer-events: none;
|
|
111
112
|
}
|
|
112
113
|
|