@uncinq/css-components 1.18.0 → 1.20.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 +10 -0
- package/css/components/push.css +17 -0
- package/docs/buttons/btn.md +4 -1
- package/docs/content/push.md +6 -0
- package/package.json +1 -1
|
@@ -59,6 +59,7 @@
|
|
|
59
59
|
--btn-color-border: var(--color-brand);
|
|
60
60
|
--btn-color-border-hover: var(--color-brand-hover);
|
|
61
61
|
--btn-color-text: var(--color-text-on-brand);
|
|
62
|
+
--btn-color-text-hover: var(--color-text-on-brand);
|
|
62
63
|
}
|
|
63
64
|
|
|
64
65
|
.btn-control {
|
|
@@ -76,6 +77,7 @@
|
|
|
76
77
|
--btn-color-border: var(--color-danger);
|
|
77
78
|
--btn-color-border-hover: var(--color-danger-hover);
|
|
78
79
|
--btn-color-text: var(--color-text-on-danger);
|
|
80
|
+
--btn-color-text-hover: var(--color-text-on-danger);
|
|
79
81
|
}
|
|
80
82
|
|
|
81
83
|
.btn-dark {
|
|
@@ -84,6 +86,7 @@
|
|
|
84
86
|
--btn-color-border: var(--color-dark);
|
|
85
87
|
--btn-color-border-hover: var(--color-dark-hover);
|
|
86
88
|
--btn-color-text: var(--color-text-on-dark);
|
|
89
|
+
--btn-color-text-hover: var(--color-text-on-dark);
|
|
87
90
|
}
|
|
88
91
|
|
|
89
92
|
.btn-ghost {
|
|
@@ -101,6 +104,7 @@
|
|
|
101
104
|
--btn-color-border: var(--color-info);
|
|
102
105
|
--btn-color-border-hover: var(--color-info-hover);
|
|
103
106
|
--btn-color-text: var(--color-text-on-info);
|
|
107
|
+
--btn-color-text-hover: var(--color-text-on-info);
|
|
104
108
|
}
|
|
105
109
|
|
|
106
110
|
.btn-light {
|
|
@@ -109,6 +113,7 @@
|
|
|
109
113
|
--btn-color-border: var(--color-light);
|
|
110
114
|
--btn-color-border-hover: var(--color-light-hover);
|
|
111
115
|
--btn-color-text: var(--color-text-on-light);
|
|
116
|
+
--btn-color-text-hover: var(--color-text-on-light);
|
|
112
117
|
}
|
|
113
118
|
|
|
114
119
|
.btn-link {
|
|
@@ -133,6 +138,7 @@
|
|
|
133
138
|
--btn-color-border: var(--color-neutral);
|
|
134
139
|
--btn-color-border-hover: var(--color-neutral-hover);
|
|
135
140
|
--btn-color-text: var(--color-text-on-neutral);
|
|
141
|
+
--btn-color-text-hover: var(--color-text-on-neutral);
|
|
136
142
|
}
|
|
137
143
|
|
|
138
144
|
.btn-primary {
|
|
@@ -141,6 +147,7 @@
|
|
|
141
147
|
--btn-color-border: var(--color-brand);
|
|
142
148
|
--btn-color-border-hover: var(--color-brand-hover);
|
|
143
149
|
--btn-color-text: var(--color-text-on-brand);
|
|
150
|
+
--btn-color-text-hover: var(--color-text-on-brand);
|
|
144
151
|
}
|
|
145
152
|
|
|
146
153
|
.btn-secondary {
|
|
@@ -149,6 +156,7 @@
|
|
|
149
156
|
--btn-color-border: var(--color-neutral);
|
|
150
157
|
--btn-color-border-hover: var(--color-neutral-hover);
|
|
151
158
|
--btn-color-text: var(--color-text-on-neutral);
|
|
159
|
+
--btn-color-text-hover: var(--color-text-on-neutral);
|
|
152
160
|
}
|
|
153
161
|
|
|
154
162
|
.btn-success {
|
|
@@ -157,6 +165,7 @@
|
|
|
157
165
|
--btn-color-border: var(--color-success);
|
|
158
166
|
--btn-color-border-hover: var(--color-success-hover);
|
|
159
167
|
--btn-color-text: var(--color-text-on-success);
|
|
168
|
+
--btn-color-text-hover: var(--color-text-on-success);
|
|
160
169
|
}
|
|
161
170
|
|
|
162
171
|
.btn-warning {
|
|
@@ -165,6 +174,7 @@
|
|
|
165
174
|
--btn-color-border: var(--color-warning);
|
|
166
175
|
--btn-color-border-hover: var(--color-warning-hover);
|
|
167
176
|
--btn-color-text: var(--color-text-on-warning);
|
|
177
|
+
--btn-color-text-hover: var(--color-text-on-warning);
|
|
168
178
|
}
|
|
169
179
|
|
|
170
180
|
/* Sizes */
|
package/css/components/push.css
CHANGED
|
@@ -72,6 +72,7 @@
|
|
|
72
72
|
--btn-color-border: var(--color-light);
|
|
73
73
|
--btn-color-border-hover: var(--color-light-hover);
|
|
74
74
|
--btn-color-text: var(--color-text-on-light);
|
|
75
|
+
--btn-color-text-hover: var(--color-text-on-light);
|
|
75
76
|
--color-heading: var(--push-color);
|
|
76
77
|
--color-link: var(--push-color);
|
|
77
78
|
--color-link-hover: var(--push-color);
|
|
@@ -113,11 +114,27 @@
|
|
|
113
114
|
}
|
|
114
115
|
}
|
|
115
116
|
|
|
117
|
+
/* A background: clicks go through it, to the push's own link. */
|
|
116
118
|
.media {
|
|
117
119
|
height: 100%;
|
|
118
120
|
inset: 0;
|
|
121
|
+
pointer-events: none;
|
|
119
122
|
position: absolute;
|
|
120
123
|
width: 100%;
|
|
124
|
+
|
|
125
|
+
/* …except the pause control a .video lays over an autoplaying video,
|
|
126
|
+
which has to stay usable (WCAG 2.2.2). */
|
|
127
|
+
.btn-toggle-video {
|
|
128
|
+
pointer-events: auto;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/* Safari draws a play button over a video it refuses to autoplay, in
|
|
132
|
+
Low Power Mode for one. The button sits in the browser's shadow DOM,
|
|
133
|
+
which only gives way to !important. */
|
|
134
|
+
video::-webkit-media-controls-start-playback-button {
|
|
135
|
+
-webkit-appearance: none;
|
|
136
|
+
display: none !important;
|
|
137
|
+
}
|
|
121
138
|
}
|
|
122
139
|
|
|
123
140
|
.surtitle {
|
package/docs/buttons/btn.md
CHANGED
|
@@ -30,7 +30,7 @@ Variants compose freely: `class="btn btn-danger btn-sm btn-ghost"`.
|
|
|
30
30
|
| `.btn-warning` | Warning |
|
|
31
31
|
| `.btn-info` | Informational |
|
|
32
32
|
|
|
33
|
-
Each sets
|
|
33
|
+
Each sets its background, border and text colour, with their hover values.
|
|
34
34
|
|
|
35
35
|
```css
|
|
36
36
|
.btn-danger {
|
|
@@ -39,11 +39,14 @@ Each sets four properties together: background, border, their hover values, and
|
|
|
39
39
|
--btn-color-border: var(--color-danger);
|
|
40
40
|
--btn-color-border-hover: var(--color-danger-hover);
|
|
41
41
|
--btn-color-text: var(--color-text-on-danger);
|
|
42
|
+
--btn-color-text-hover: var(--color-text-on-danger);
|
|
42
43
|
}
|
|
43
44
|
```
|
|
44
45
|
|
|
45
46
|
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
47
|
|
|
48
|
+
The hover text colour has to be set alongside the text colour, even when the two are the same. The `--btn-color-text-hover` token defaults to `var(--btn-color-text)`, but on `:root`, where it resolves to the default text colour once and for all: a variant or a context that only changes `--btn-color-text`, as a push over a dark media does, would see its text turn back to `--color-text-on-brand` on hover.
|
|
49
|
+
|
|
47
50
|
`.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
51
|
|
|
49
52
|
## 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`.
|