@trebired/frontend 20.2.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 +10 -0
- package/dist/contrast/styles/index.scss +41 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
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
|
+
|
|
8
|
+
## 20.3.0
|
|
9
|
+
|
|
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.
|
|
11
|
+
- `--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.
|
|
12
|
+
|
|
3
13
|
## 20.2.0
|
|
4
14
|
|
|
5
15
|
- 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,29 @@
|
|
|
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
|
+
|
|
19
|
+
:root {
|
|
20
|
+
@each $token in $tokens {
|
|
21
|
+
#{ns.css-var("contrast-base-" + $token)}: var(#{ns.css-var($token)});
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
#{ns.css-var("contrast-ink")}: var(#{ns.css-var("text")}, #000);
|
|
25
|
+
}
|
|
26
|
+
|
|
3
27
|
#{ns.data("on-dark", "true")} {
|
|
4
28
|
#{ns.css-var("text")}: var(
|
|
5
29
|
#{ns.css-var("contrast-dark-text")},
|
|
@@ -13,8 +37,6 @@
|
|
|
13
37
|
#{ns.css-var("contrast-dark-border")},
|
|
14
38
|
color-mix(in srgb, var(#{ns.css-var("page")}, #fff) 42%, transparent)
|
|
15
39
|
);
|
|
16
|
-
color: var(#{ns.css-var("text")}, #fff);
|
|
17
|
-
|
|
18
40
|
#{ns.css-var("shell-header-link-color")}: var(#{ns.css-var("text-muted")});
|
|
19
41
|
#{ns.css-var("shell-header-link-hover-color")}: var(#{ns.css-var("text")});
|
|
20
42
|
#{ns.css-var("shell-header-link-active-color")}: var(#{ns.css-var("text")});
|
|
@@ -22,4 +44,21 @@
|
|
|
22
44
|
#{ns.css-var("shell-language-trigger-color")}: var(#{ns.css-var("text")});
|
|
23
45
|
#{ns.css-var("shell-language-trigger-border")}: var(#{ns.css-var("border")});
|
|
24
46
|
#{ns.css-var("shell-footer-link-color")}: var(#{ns.css-var("text-muted")});
|
|
47
|
+
#{ns.css-var("ui-btn-variants-primary-bg")}: var(#{ns.css-var("text")});
|
|
48
|
+
#{ns.css-var("ui-btn-variants-primary-color")}: var(#{ns.css-var("contrast-ink")});
|
|
49
|
+
#{ns.css-var("ui-btn-variants-primary-state-hover-bg")}: color-mix(
|
|
50
|
+
in srgb,
|
|
51
|
+
var(#{ns.css-var("text")}) 88%,
|
|
52
|
+
var(#{ns.css-var("contrast-ink")})
|
|
53
|
+
);
|
|
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);
|
|
25
64
|
}
|