@trebired/frontend 18.3.0 → 18.5.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 +8 -0
- package/dist/styles/utils/base.scss +18 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 18.5.0
|
|
4
|
+
|
|
5
|
+
- The page edge hairline reads the background it is actually over, rather than one colour for the whole page. It runs the full height of the viewport and crosses whatever sections the page has, so a fixed colour was faint over one band and a bright stripe over the next. `backdrop-filter: invert(1) grayscale(1) opacity(0.25)` inverts what is behind it per pixel: measured against a light section and a dark one on the same page, contrast comes out 60 and 49 rather than 43 and 171. A site with no `backdrop-filter` keeps the mixed colour as a fallback.
|
|
6
|
+
|
|
7
|
+
## 18.4.0
|
|
8
|
+
|
|
9
|
+
- The hairline down the right edge of the page is back, and is now the package's own rather than the site's. It is mixed from the page and text colours, so it keeps the same slight contrast on any background instead of inheriting whatever weight a site gave its border colour, which is what made it read as a stray line on one site and stay invisible on another. It is always drawn and there is no token to weaken or remove it.
|
|
10
|
+
|
|
3
11
|
## 18.3.0
|
|
4
12
|
|
|
5
13
|
- Dropped the hairline the base stylesheet drew down the right edge of every page. `body::after` painted a fixed, full height 1px line in the border colour on every site, positioned against `--viewport-scrollbar-gap-inline-end`, which nothing ever set to anything but `0px`. It was a scrollbar gutter border for a shell that no longer asks for one, and no config could turn it off. `--viewport-scrollbar-gap-inline-end`, `--viewport-scrollbar-gap-block-end` and `--z-scrollbar-gutter-border` go with it, all three unreferenced.
|
|
@@ -98,6 +98,24 @@ body {
|
|
|
98
98
|
line-height: var(#{ns.css-var("body-line-height")}, var(--lh-sm, 1.4));
|
|
99
99
|
}
|
|
100
100
|
|
|
101
|
+
body::after {
|
|
102
|
+
content: "";
|
|
103
|
+
position: fixed;
|
|
104
|
+
z-index: 925;
|
|
105
|
+
inset-block: 0;
|
|
106
|
+
inset-inline-end: 0;
|
|
107
|
+
width: 1px;
|
|
108
|
+
background: color-mix(in oklab, var(#{ns.css-var("text")}, #000) 10%, var(#{ns.css-var("page")}, #fff));
|
|
109
|
+
backdrop-filter: invert(1) grayscale(1) opacity(0.25);
|
|
110
|
+
pointer-events: none;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
@supports (backdrop-filter: invert(1)) {
|
|
114
|
+
body::after {
|
|
115
|
+
background: transparent;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
101
119
|
body#{ns.data("mobile-sidebar-open", "true")},
|
|
102
120
|
|
|
103
121
|
body#{ns.data("sidebar-open", "true")} {
|