@trebired/frontend 20.3.0 → 20.4.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 +29 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 20.4.0
|
|
4
|
+
|
|
5
|
+
- Chrome that passes from dark content onto light goes back to the site's own colours. Only the dark state was written, so once a header had been marked dark everything under it stayed light-on-light when the page scrolled on, including the parts the measurement had already corrected. Each piece now carries both states, which is what makes the header readable along its whole width when the content behind it changes partway across.
|
|
6
|
+
- The page's own value for every colour the dark state replaces is kept at the root as `--tbf-contrast-base-*`, so restoring is exact rather than a guess, and a colour a site never set stays unset.
|
|
7
|
+
|
|
3
8
|
## 20.3.0
|
|
4
9
|
|
|
5
10
|
- 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.
|
|
@@ -1,6 +1,26 @@
|
|
|
1
1
|
@use "@trebired/bundler/namespace" as ns;
|
|
2
2
|
|
|
3
|
+
$tokens:
|
|
4
|
+
"text",
|
|
5
|
+
"text-muted",
|
|
6
|
+
"border",
|
|
7
|
+
"shell-header-link-color",
|
|
8
|
+
"shell-header-link-hover-color",
|
|
9
|
+
"shell-header-link-active-color",
|
|
10
|
+
"shell-header-toggle-color",
|
|
11
|
+
"shell-language-trigger-color",
|
|
12
|
+
"shell-language-trigger-border",
|
|
13
|
+
"shell-footer-link-color",
|
|
14
|
+
"ui-btn-variants-primary-bg",
|
|
15
|
+
"ui-btn-variants-primary-color",
|
|
16
|
+
"ui-btn-variants-primary-state-hover-bg",
|
|
17
|
+
"ui-btn-variants-primary-state-hover-color";
|
|
18
|
+
|
|
3
19
|
:root {
|
|
20
|
+
@each $token in $tokens {
|
|
21
|
+
#{ns.css-var("contrast-base-" + $token)}: var(#{ns.css-var($token)});
|
|
22
|
+
}
|
|
23
|
+
|
|
4
24
|
#{ns.css-var("contrast-ink")}: var(#{ns.css-var("text")}, #000);
|
|
5
25
|
}
|
|
6
26
|
|
|
@@ -17,8 +37,6 @@
|
|
|
17
37
|
#{ns.css-var("contrast-dark-border")},
|
|
18
38
|
color-mix(in srgb, var(#{ns.css-var("page")}, #fff) 42%, transparent)
|
|
19
39
|
);
|
|
20
|
-
color: var(#{ns.css-var("text")}, #fff);
|
|
21
|
-
|
|
22
40
|
#{ns.css-var("shell-header-link-color")}: var(#{ns.css-var("text-muted")});
|
|
23
41
|
#{ns.css-var("shell-header-link-hover-color")}: var(#{ns.css-var("text")});
|
|
24
42
|
#{ns.css-var("shell-header-link-active-color")}: var(#{ns.css-var("text")});
|
|
@@ -34,4 +52,13 @@
|
|
|
34
52
|
var(#{ns.css-var("contrast-ink")})
|
|
35
53
|
);
|
|
36
54
|
#{ns.css-var("ui-btn-variants-primary-state-hover-color")}: var(#{ns.css-var("contrast-ink")});
|
|
55
|
+
color: var(#{ns.css-var("text")}, #fff);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
#{ns.data("on-dark", "false")} {
|
|
59
|
+
@each $token in $tokens {
|
|
60
|
+
#{ns.css-var($token)}: var(#{ns.css-var("contrast-base-" + $token)});
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
color: var(#{ns.css-var("text")}, #000);
|
|
37
64
|
}
|