@uncinq/css-components 1.18.0 → 1.19.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/css/components/button.css +1 -1
- package/css/components/push.css +16 -0
- package/docs/buttons/btn.md +2 -0
- package/docs/content/push.md +6 -0
- package/package.json +1 -1
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
background-color: var(--btn-color-background-hover);
|
|
43
43
|
border-color: var(--btn-color-border-hover);
|
|
44
44
|
box-shadow: var(--btn-shadow-hover);
|
|
45
|
-
color: var(--btn-color-text-hover);
|
|
45
|
+
color: var(--btn-color-text-hover, var(--btn-color-text));
|
|
46
46
|
text-decoration-color: var(--btn-color-text-decoration-hover);
|
|
47
47
|
}
|
|
48
48
|
}
|
package/css/components/push.css
CHANGED
|
@@ -113,11 +113,27 @@
|
|
|
113
113
|
}
|
|
114
114
|
}
|
|
115
115
|
|
|
116
|
+
/* A background: clicks go through it, to the push's own link. */
|
|
116
117
|
.media {
|
|
117
118
|
height: 100%;
|
|
118
119
|
inset: 0;
|
|
120
|
+
pointer-events: none;
|
|
119
121
|
position: absolute;
|
|
120
122
|
width: 100%;
|
|
123
|
+
|
|
124
|
+
/* …except the pause control a .video lays over an autoplaying video,
|
|
125
|
+
which has to stay usable (WCAG 2.2.2). */
|
|
126
|
+
.btn-toggle-video {
|
|
127
|
+
pointer-events: auto;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
/* Safari draws a play button over a video it refuses to autoplay, in
|
|
131
|
+
Low Power Mode for one. The button sits in the browser's shadow DOM,
|
|
132
|
+
which only gives way to !important. */
|
|
133
|
+
video::-webkit-media-controls-start-playback-button {
|
|
134
|
+
-webkit-appearance: none;
|
|
135
|
+
display: none !important;
|
|
136
|
+
}
|
|
121
137
|
}
|
|
122
138
|
|
|
123
139
|
.surtitle {
|
package/docs/buttons/btn.md
CHANGED
|
@@ -44,6 +44,8 @@ Each sets four properties together: background, border, their hover values, and
|
|
|
44
44
|
|
|
45
45
|
The text colour always comes from the matching `--color-text-on-*` semantic token, so contrast survives a change to the underlying colour. That pairing is the reason to rebrand by redefining `--color-brand` rather than `--btn-color-background`.
|
|
46
46
|
|
|
47
|
+
The text keeps its colour on hover: `.btn` reads `var(--btn-color-text-hover, var(--btn-color-text))`, and `--btn-color-text-hover` is no token, so it is unset unless a variant or a context sets it. A context that recolours its buttons, as a push over a dark media does, only needs `--btn-color-text`.
|
|
48
|
+
|
|
47
49
|
`.btn-primary` and `.btn-brand` resolve to exactly the same values, as do `.btn-secondary` and `.btn-neutral`. The intent names exist so a page can say *primary action* without deciding which colour that is.
|
|
48
50
|
|
|
49
51
|
## Sizes
|
package/docs/content/push.md
CHANGED
|
@@ -41,6 +41,12 @@ The push takes the taller of the two boxes: a text that needs more room than the
|
|
|
41
41
|
|
|
42
42
|
`--push-ratio-double` is not read here. It is a second ratio for layouts that set two pushes side by side and want a taller shape than a full-width one.
|
|
43
43
|
|
|
44
|
+
## The media is a background
|
|
45
|
+
|
|
46
|
+
`.media` takes `pointer-events: none`: a click on the image or the video goes through to the push and its link, and a tap never starts or pauses a video. The pause control that a [`.video`](../../embeds/video/) lays over an autoplaying video is the exception, set back to `pointer-events: auto`, since WCAG requires a way to stop it. A video that needs its native `controls` does not belong in a push.
|
|
47
|
+
|
|
48
|
+
Safari draws a play button over a video it refuses to autoplay, in Low Power Mode for instance. The push hides it through `::-webkit-media-controls-start-playback-button`, with the one `!important` of the component: the button lives in the browser's shadow DOM, and nothing weaker overrides it there. The video then shows its first frame, or its poster.
|
|
49
|
+
|
|
44
50
|
## What the push hands down
|
|
45
51
|
|
|
46
52
|
Unless it has `.push-card`, a push sets the text, heading, link and surtitle colours from `--push-color`, and turns `.btn` into a light button that reads on a dark media. `--push-surtitle-color` overrides the surtitle colour alone; it is unset by default, and the surtitle falls back to `--push-color` at `--opacity-muted`.
|