@trebired/frontend 20.2.0 → 20.3.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 +5 -0
- package/dist/contrast/styles/index.scss +12 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 20.3.0
|
|
4
|
+
|
|
5
|
+
- A primary button in chrome that floats over dark content inverts with it. Its surface takes the light colour the surrounding text has, and its label the page's own ink, so the call to action stays a solid block that reads either way. Sites were doing this themselves, and getting it wrong once the text colour moved under them.
|
|
6
|
+
- `--tbf-contrast-ink` holds the page's own text colour, resolved at the root and so untouched by any surface that recolours itself. Anything that needs the colour a light block should print in can read it.
|
|
7
|
+
|
|
3
8
|
## 20.2.0
|
|
4
9
|
|
|
5
10
|
- A header tells the browser what is behind it instead of being measured for it. `onDark` renders `data-tbf-on-dark` on the server, so the header is the right colour in the first frame. Without it the state still arrives from the measurement, one frame after hydration, which is what made a logo paint in one colour and then correct itself.
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
@use "@trebired/bundler/namespace" as ns;
|
|
2
2
|
|
|
3
|
+
:root {
|
|
4
|
+
#{ns.css-var("contrast-ink")}: var(#{ns.css-var("text")}, #000);
|
|
5
|
+
}
|
|
6
|
+
|
|
3
7
|
#{ns.data("on-dark", "true")} {
|
|
4
8
|
#{ns.css-var("text")}: var(
|
|
5
9
|
#{ns.css-var("contrast-dark-text")},
|
|
@@ -22,4 +26,12 @@
|
|
|
22
26
|
#{ns.css-var("shell-language-trigger-color")}: var(#{ns.css-var("text")});
|
|
23
27
|
#{ns.css-var("shell-language-trigger-border")}: var(#{ns.css-var("border")});
|
|
24
28
|
#{ns.css-var("shell-footer-link-color")}: var(#{ns.css-var("text-muted")});
|
|
29
|
+
#{ns.css-var("ui-btn-variants-primary-bg")}: var(#{ns.css-var("text")});
|
|
30
|
+
#{ns.css-var("ui-btn-variants-primary-color")}: var(#{ns.css-var("contrast-ink")});
|
|
31
|
+
#{ns.css-var("ui-btn-variants-primary-state-hover-bg")}: color-mix(
|
|
32
|
+
in srgb,
|
|
33
|
+
var(#{ns.css-var("text")}) 88%,
|
|
34
|
+
var(#{ns.css-var("contrast-ink")})
|
|
35
|
+
);
|
|
36
|
+
#{ns.css-var("ui-btn-variants-primary-state-hover-color")}: var(#{ns.css-var("contrast-ink")});
|
|
25
37
|
}
|