@trebired/frontend 22.0.1 → 22.0.2
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
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 22.0.2
|
|
4
|
+
|
|
5
|
+
- A control's hover and open states read the adaptive colour rather than `currentColor`. `currentColor` is the colour the element inherited, which comes from whatever ancestor last set one, so the locale trigger's label and border turned the header's colour the moment its popover opened, even though the trigger itself had already been read against the lighter content it was sitting on. The same fallback is corrected on the footer's link hover and on a popover group's heading.
|
|
6
|
+
|
|
3
7
|
## 22.0.1
|
|
4
8
|
|
|
5
9
|
- Every part of the header reads the adaptive colour on itself rather than inheriting one from the header. The locale trigger, the menu toggle, the brand and the menu panel fell back to `inherit` or to `currentColor`, which meant they took the colour of the header root. A site that declares the root's state once for a whole page then painted them for that state wherever they actually sat, so the trigger's label and border vanished against light content further down the page.
|
|
@@ -45,9 +45,12 @@
|
|
|
45
45
|
#{ns.class("locale-trigger")}:hover,
|
|
46
46
|
|
|
47
47
|
#{ns.class("locale-trigger")}[aria-expanded="true"] {
|
|
48
|
-
color: var(#{ns.css-var("shell-language-trigger-state-hover-color")}, currentColor);
|
|
49
|
-
background: var(
|
|
50
|
-
|
|
48
|
+
color: var(#{ns.css-var("shell-language-trigger-state-hover-color")}, var(#{ns.css-var("adaptive")}, currentColor));
|
|
49
|
+
background: var(
|
|
50
|
+
#{ns.css-var("shell-language-trigger-state-hover-bg")},
|
|
51
|
+
color-mix(in srgb, var(#{ns.css-var("adaptive")}, currentColor) 8%, transparent)
|
|
52
|
+
);
|
|
53
|
+
border-color: var(#{ns.css-var("shell-language-trigger-state-hover-border")}, var(#{ns.css-var("adaptive")}, currentColor));
|
|
51
54
|
}
|
|
52
55
|
|
|
53
56
|
#{ns.class("locale-trigger")} #{ns.class("locale-code")} {
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
#{ns.element-class("site-footer", "link")}:hover,
|
|
99
99
|
|
|
100
100
|
#{ns.element-class("site-footer", "link")}:focus-visible {
|
|
101
|
-
color: var(#{ns.css-var("shell-footer-link-hover-color")}, currentColor);
|
|
101
|
+
color: var(#{ns.css-var("shell-footer-link-hover-color")}, var(#{ns.css-var("adaptive")}, currentColor));
|
|
102
102
|
text-decoration-line: var(#{ns.css-var("shell-footer-link-hover-decoration-line")}, underline);
|
|
103
103
|
text-underline-offset: 0.25rem;
|
|
104
104
|
}
|
|
@@ -142,7 +142,10 @@
|
|
|
142
142
|
);
|
|
143
143
|
border-radius: var(#{ns.css-var("overlay-popover-group-radius")}, var(#{ns.css-var("radius-sm")}, 0));
|
|
144
144
|
padding: var(#{ns.css-var("overlay-popover-group-padding")}, 11px 12px 9px);
|
|
145
|
-
color: var(
|
|
145
|
+
color: var(
|
|
146
|
+
#{ns.css-var("overlay-popover-group-color")},
|
|
147
|
+
color-mix(in srgb, var(#{ns.css-var("adaptive")}, currentColor) 72%, transparent)
|
|
148
|
+
);
|
|
146
149
|
background: transparent;
|
|
147
150
|
cursor: pointer;
|
|
148
151
|
font: inherit;
|
|
@@ -157,5 +160,5 @@
|
|
|
157
160
|
#{ns.class("popover-group")}:focus-visible,
|
|
158
161
|
|
|
159
162
|
#{ns.class("popover-group")}[aria-expanded="true"] {
|
|
160
|
-
color: var(#{ns.css-var("overlay-popover-group-hover-color")}, currentColor);
|
|
163
|
+
color: var(#{ns.css-var("overlay-popover-group-hover-color")}, var(#{ns.css-var("adaptive")}, currentColor));
|
|
161
164
|
}
|