@trebired/frontend 20.11.0 → 20.12.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
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 20.12.0
|
|
4
|
+
|
|
5
|
+
- The brand button takes the colour of the surface it is on rather than the colour it inherits. It was built from the text colour flowing down from the header, so a brand that had been worked out to sit on light content still printed itself in the header's dark-content colour: on a light page the little arrow beside the logo came out almost white and read as having disappeared. It now follows its own state, like the links and the toggle beside it.
|
|
6
|
+
|
|
3
7
|
## 20.11.0
|
|
4
8
|
|
|
5
9
|
- Chrome is the right colour in the first painted frame after a reload, with no correction afterwards. The server knows which page it is rendering but not where the reader has scrolled to, so on a reload part-way down a page the header was painted from the page's own state and then corrected once the browser had measured what was actually behind it, a tenth of a second later. No script can win that race, because the browser paints before the document has finished parsing. `createContrastBootScript()` remembers the state when the page goes away and puts it back as CSS in the head, which applies to elements as they are parsed. A site adds it beside the scroll boot script.
|
|
@@ -15,6 +15,8 @@ $inherited:
|
|
|
15
15
|
"shell-header-link-hover-color",
|
|
16
16
|
"shell-header-link-active-color",
|
|
17
17
|
"shell-header-toggle-color",
|
|
18
|
+
"shell-header-brand-button-color",
|
|
19
|
+
"shell-header-brand-button-hover-color",
|
|
18
20
|
"shell-language-trigger-color",
|
|
19
21
|
"shell-language-trigger-border",
|
|
20
22
|
"shell-footer-link-color";
|
|
@@ -44,6 +46,8 @@ $inherited:
|
|
|
44
46
|
#{ns.css-var("shell-header-link-hover-color")}: var(#{ns.css-var("text")});
|
|
45
47
|
#{ns.css-var("shell-header-link-active-color")}: var(#{ns.css-var("text")});
|
|
46
48
|
#{ns.css-var("shell-header-toggle-color")}: var(#{ns.css-var("text")});
|
|
49
|
+
#{ns.css-var("shell-header-brand-button-color")}: color-mix(in srgb, var(#{ns.css-var("text")}) 74%, transparent);
|
|
50
|
+
#{ns.css-var("shell-header-brand-button-hover-color")}: var(#{ns.css-var("text")});
|
|
47
51
|
#{ns.css-var("shell-language-trigger-color")}: var(#{ns.css-var("text")});
|
|
48
52
|
#{ns.css-var("shell-language-trigger-border")}: var(#{ns.css-var("border")});
|
|
49
53
|
#{ns.css-var("shell-footer-link-color")}: var(#{ns.css-var("text-muted")});
|
|
@@ -79,6 +83,14 @@ $inherited:
|
|
|
79
83
|
#{ns.css-var("contrast-base-shell-header-toggle-color")},
|
|
80
84
|
var(#{ns.css-var("text")})
|
|
81
85
|
);
|
|
86
|
+
#{ns.css-var("shell-header-brand-button-color")}: var(
|
|
87
|
+
#{ns.css-var("contrast-base-shell-header-brand-button-color")},
|
|
88
|
+
color-mix(in srgb, var(#{ns.css-var("text")}) 74%, transparent)
|
|
89
|
+
);
|
|
90
|
+
#{ns.css-var("shell-header-brand-button-hover-color")}: var(
|
|
91
|
+
#{ns.css-var("contrast-base-shell-header-brand-button-hover-color")},
|
|
92
|
+
var(#{ns.css-var("text")})
|
|
93
|
+
);
|
|
82
94
|
#{ns.css-var("shell-language-trigger-color")}: var(
|
|
83
95
|
#{ns.css-var("contrast-base-shell-language-trigger-color")},
|
|
84
96
|
var(#{ns.css-var("text")})
|
|
@@ -320,7 +320,7 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
|
|
|
320
320
|
padding: var(#{ns.css-var("shell-header-brand-button-padding")}, 4px 6px);
|
|
321
321
|
color: var(
|
|
322
322
|
#{ns.css-var("shell-header-brand-button-color")},
|
|
323
|
-
color-mix(in srgb, currentColor 74%, transparent)
|
|
323
|
+
color-mix(in srgb, var(#{ns.css-var("text")}, currentColor) 74%, transparent)
|
|
324
324
|
);
|
|
325
325
|
background: transparent;
|
|
326
326
|
cursor: pointer;
|
|
@@ -332,7 +332,7 @@ $motion: token("motion-duration", 500ms) token("motion-easing", cubic-bezier(0.2
|
|
|
332
332
|
#{ns.class("site-header-brand-button")}:focus-visible,
|
|
333
333
|
|
|
334
334
|
#{ns.class("site-header-brand-button")}[aria-expanded="true"] {
|
|
335
|
-
color: var(#{ns.css-var("shell-header-brand-button-hover-color")}, currentColor);
|
|
335
|
+
color: var(#{ns.css-var("shell-header-brand-button-hover-color")}, var(#{ns.css-var("text")}, currentColor));
|
|
336
336
|
}
|
|
337
337
|
|
|
338
338
|
#{ns.class("button")}#{ns.class("site-header-brand-button")}:hover,
|
package/package.json
CHANGED