@trebired/frontend 20.5.0 → 20.6.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 +39 -8
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 20.6.0
|
|
4
|
+
|
|
5
|
+
- A part that goes back to the page's colours no longer takes the surrounding chrome's instead. Components whose colour is simply inherited, the language trigger and the menu toggle among them, had nothing to fall back to when a site had never set a colour for them, so they kept reading the dark header they sit in and stayed light on light. Each one now falls back to the page's own text.
|
|
6
|
+
- A colour a site did set is still restored exactly as it set it. The fallback only applies where there was nothing to restore.
|
|
7
|
+
|
|
3
8
|
## 20.5.0
|
|
4
9
|
|
|
5
10
|
- A panel that paints its own background is read by that background rather than by whatever happens to be behind it. A solid dark footer was being judged against the page beneath it, came out light, and printed dark text on itself. Popovers and dropdown menus are read the same way, and a site marks its own panels with `data-tbf-contrast-surface`.
|
|
@@ -1,23 +1,26 @@
|
|
|
1
|
+
@use "sass:list";
|
|
1
2
|
@use "@trebired/bundler/namespace" as ns;
|
|
2
3
|
|
|
3
|
-
$
|
|
4
|
+
$plain:
|
|
4
5
|
"text",
|
|
5
6
|
"text-muted",
|
|
6
7
|
"border",
|
|
8
|
+
"ui-btn-variants-primary-bg",
|
|
9
|
+
"ui-btn-variants-primary-color",
|
|
10
|
+
"ui-btn-variants-primary-state-hover-bg",
|
|
11
|
+
"ui-btn-variants-primary-state-hover-color";
|
|
12
|
+
|
|
13
|
+
$inherited:
|
|
7
14
|
"shell-header-link-color",
|
|
8
15
|
"shell-header-link-hover-color",
|
|
9
16
|
"shell-header-link-active-color",
|
|
10
17
|
"shell-header-toggle-color",
|
|
11
18
|
"shell-language-trigger-color",
|
|
12
19
|
"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";
|
|
20
|
+
"shell-footer-link-color";
|
|
18
21
|
|
|
19
22
|
:root {
|
|
20
|
-
@each $token in $
|
|
23
|
+
@each $token in list.join($plain, $inherited) {
|
|
21
24
|
#{ns.css-var("contrast-base-" + $token)}: var(#{ns.css-var($token)});
|
|
22
25
|
}
|
|
23
26
|
|
|
@@ -56,9 +59,37 @@ $tokens:
|
|
|
56
59
|
}
|
|
57
60
|
|
|
58
61
|
#{ns.data("on-dark", "false")} {
|
|
59
|
-
@each $token in $
|
|
62
|
+
@each $token in $plain {
|
|
60
63
|
#{ns.css-var($token)}: var(#{ns.css-var("contrast-base-" + $token)});
|
|
61
64
|
}
|
|
62
65
|
|
|
66
|
+
#{ns.css-var("shell-header-link-color")}: var(
|
|
67
|
+
#{ns.css-var("contrast-base-shell-header-link-color")},
|
|
68
|
+
var(#{ns.css-var("text-muted")})
|
|
69
|
+
);
|
|
70
|
+
#{ns.css-var("shell-header-link-hover-color")}: var(
|
|
71
|
+
#{ns.css-var("contrast-base-shell-header-link-hover-color")},
|
|
72
|
+
var(#{ns.css-var("text")})
|
|
73
|
+
);
|
|
74
|
+
#{ns.css-var("shell-header-link-active-color")}: var(
|
|
75
|
+
#{ns.css-var("contrast-base-shell-header-link-active-color")},
|
|
76
|
+
var(#{ns.css-var("text")})
|
|
77
|
+
);
|
|
78
|
+
#{ns.css-var("shell-header-toggle-color")}: var(
|
|
79
|
+
#{ns.css-var("contrast-base-shell-header-toggle-color")},
|
|
80
|
+
var(#{ns.css-var("text")})
|
|
81
|
+
);
|
|
82
|
+
#{ns.css-var("shell-language-trigger-color")}: var(
|
|
83
|
+
#{ns.css-var("contrast-base-shell-language-trigger-color")},
|
|
84
|
+
var(#{ns.css-var("text")})
|
|
85
|
+
);
|
|
86
|
+
#{ns.css-var("shell-language-trigger-border")}: var(
|
|
87
|
+
#{ns.css-var("contrast-base-shell-language-trigger-border")},
|
|
88
|
+
var(#{ns.css-var("border")})
|
|
89
|
+
);
|
|
90
|
+
#{ns.css-var("shell-footer-link-color")}: var(
|
|
91
|
+
#{ns.css-var("contrast-base-shell-footer-link-color")},
|
|
92
|
+
var(#{ns.css-var("text-muted")})
|
|
93
|
+
);
|
|
63
94
|
color: var(#{ns.css-var("text")}, #000);
|
|
64
95
|
}
|