@oscarpalmer/oui 0.10.0 → 0.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/dist/css/badge.css +6 -4
- package/dist/css/button.css +31 -26
- package/dist/css/color.css +25 -25
- package/dist/css/content.css +193 -0
- package/dist/css/form.css +404 -219
- package/dist/css/message.css +23 -16
- package/dist/css/reset.css +3 -1
- package/dist/css/table.css +26 -9
- package/package.json +4 -4
- package/src/css/badge.scss +8 -7
- package/src/css/button.scss +28 -57
- package/src/css/color.scss +25 -25
- package/src/css/content.scss +156 -0
- package/src/css/form.scss +300 -131
- package/src/css/message.scss +29 -21
- package/src/css/mixins.scss +62 -0
- package/src/css/reset.scss +3 -2
- package/src/css/table.scss +32 -7
package/src/css/form.scss
CHANGED
|
@@ -2,14 +2,74 @@
|
|
|
2
2
|
|
|
3
3
|
@use 'mixins.scss' as mixins;
|
|
4
4
|
|
|
5
|
+
@mixin focus() {
|
|
6
|
+
--oui-border-value: var(--oui-blue-5);
|
|
7
|
+
--oui-foreground-value: inherit;
|
|
8
|
+
--oui-outline-percentage: 75%;
|
|
9
|
+
--oui-outline-value: var(--oui-blue-6);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
@mixin hover() {
|
|
13
|
+
--oui-border-value: var(--oui-blue-4);
|
|
14
|
+
--oui-foreground-percentage: 0%;
|
|
15
|
+
--oui-foreground-value: inherit;
|
|
16
|
+
--oui-outline-percentage: 90%;
|
|
17
|
+
--oui-outline-value: var(--oui-blue-6);
|
|
18
|
+
}
|
|
19
|
+
|
|
5
20
|
@mixin input {
|
|
6
|
-
|
|
21
|
+
--oui-background-percentage: 0%;
|
|
22
|
+
--oui-foreground-percentage: 0%;
|
|
23
|
+
|
|
24
|
+
@include outlined;
|
|
25
|
+
|
|
26
|
+
background-color: color-mix(
|
|
27
|
+
in oklab,
|
|
28
|
+
var(--oui-background-value),
|
|
29
|
+
transparent var(--oui-background-percentage)
|
|
30
|
+
);
|
|
31
|
+
border: 1px solid var(--oui-border-value, var(--oui-gray-3));
|
|
32
|
+
box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
|
|
33
|
+
color: color-mix(
|
|
34
|
+
in oklab,
|
|
35
|
+
var(--oui-foreground-value, inherit),
|
|
36
|
+
transparent var(--oui-foreground-percentage)
|
|
37
|
+
);
|
|
38
|
+
-webkit-text-fill-color: color-mix(
|
|
39
|
+
in oklab,
|
|
40
|
+
var(--oui-foreground-value, inherit),
|
|
41
|
+
transparent var(--oui-foreground-percentage)
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@mixin invalid() {
|
|
46
|
+
--oui-border-value: var(--oui-red-5);
|
|
47
|
+
--oui-foreground-value: var(--oui-red-9);
|
|
48
|
+
--oui-outline-percentage: 82.5%;
|
|
49
|
+
--oui-outline-value: var(--oui-red-6);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
@mixin outlined {
|
|
53
|
+
--oui-outline-percentage: 100%;
|
|
54
|
+
--oui-outline-value: var(--oui-blue-6);
|
|
55
|
+
|
|
56
|
+
outline: 4px solid
|
|
57
|
+
color-mix(
|
|
58
|
+
in oklab,
|
|
59
|
+
var(--oui-outline-value),
|
|
60
|
+
transparent var(--oui-outline-percentage)
|
|
61
|
+
);
|
|
7
62
|
outline-offset: 0;
|
|
8
|
-
background-color: var(--oui-absolute);
|
|
9
|
-
box-shadow: inset 0 1px 2px 0 color-mix(in oklab, var(--oui-gray-10), transparent 80%);
|
|
10
63
|
transition: 0.125s ease-in-out;
|
|
11
64
|
}
|
|
12
65
|
|
|
66
|
+
@mixin valid() {
|
|
67
|
+
--oui-border-value: var(--oui-green-5);
|
|
68
|
+
--oui-foreground-value: var(--oui-green-9);
|
|
69
|
+
--oui-outline-percentage: 82.5%;
|
|
70
|
+
--oui-outline-value: var(--oui-green-6);
|
|
71
|
+
}
|
|
72
|
+
|
|
13
73
|
:where(.oui-fieldset) {
|
|
14
74
|
padding: 1em;
|
|
15
75
|
border: 1px solid var(--oui-gray-3);
|
|
@@ -18,10 +78,11 @@
|
|
|
18
78
|
|
|
19
79
|
.oui-input {
|
|
20
80
|
:where(&:not([type='range' i])) {
|
|
81
|
+
--oui-background-value: var(--oui-absolute);
|
|
82
|
+
|
|
21
83
|
@include input;
|
|
22
84
|
|
|
23
85
|
padding: 0.5em 0.75em;
|
|
24
|
-
border-color: var(--oui-gray-3);
|
|
25
86
|
border-radius: 0.25em;
|
|
26
87
|
}
|
|
27
88
|
|
|
@@ -41,31 +102,32 @@
|
|
|
41
102
|
padding: 0;
|
|
42
103
|
}
|
|
43
104
|
|
|
44
|
-
:where(
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
105
|
+
:where(
|
|
106
|
+
&:is(
|
|
107
|
+
[type='date' i],
|
|
108
|
+
[type='datetime-local' i],
|
|
109
|
+
[type='month' i],
|
|
110
|
+
[type='number' i],
|
|
111
|
+
[type='tel' i],
|
|
112
|
+
[type='time' i],
|
|
113
|
+
[type='url' i],
|
|
114
|
+
[type='week' i]
|
|
115
|
+
)
|
|
116
|
+
) {
|
|
52
117
|
font-variant-numeric: tabular-nums;
|
|
53
118
|
}
|
|
54
119
|
|
|
55
120
|
:where(&:is([type='file' i])) {
|
|
56
|
-
padding-left: .5em;
|
|
121
|
+
padding-left: 0.5em;
|
|
57
122
|
|
|
58
123
|
&::file-selector-button {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
background-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
font-size: .75em;
|
|
67
|
-
line-height: 1;
|
|
68
|
-
transition: .125s ease-in-out;
|
|
124
|
+
@include mixins.button;
|
|
125
|
+
|
|
126
|
+
--oui-background-value: var(--oui-grey-2);
|
|
127
|
+
--oui-outline-value: var(--oui-grey-6);
|
|
128
|
+
|
|
129
|
+
margin: 0 0.75em 0 0;
|
|
130
|
+
font-size: 0.75em;
|
|
69
131
|
cursor: pointer;
|
|
70
132
|
}
|
|
71
133
|
}
|
|
@@ -80,140 +142,196 @@
|
|
|
80
142
|
appearance: none;
|
|
81
143
|
width: 100%;
|
|
82
144
|
height: 0.75em;
|
|
83
|
-
border:
|
|
84
|
-
border-radius: .75em;
|
|
145
|
+
border-radius: 0.75em;
|
|
85
146
|
position: relative;
|
|
86
147
|
}
|
|
87
148
|
|
|
88
149
|
&::range-thumb {
|
|
150
|
+
--oui-background-percentage: 0%;
|
|
151
|
+
--oui-background-value: var(--oui-blue-6);
|
|
152
|
+
|
|
153
|
+
@include outlined;
|
|
154
|
+
|
|
89
155
|
appearance: none;
|
|
90
156
|
width: 1.25em;
|
|
91
157
|
height: 1.25em;
|
|
92
|
-
background-color:
|
|
93
|
-
|
|
158
|
+
background-color: color-mix(
|
|
159
|
+
in oklab,
|
|
160
|
+
var(--oui-background-value),
|
|
161
|
+
transparent var(--oui-background-percentage)
|
|
162
|
+
);
|
|
94
163
|
border: 2px solid var(--oui-absolute);
|
|
95
164
|
border-radius: 1.25em;
|
|
96
165
|
box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.125);
|
|
97
|
-
transition: .125s ease-in-out;
|
|
98
166
|
cursor: pointer;
|
|
99
167
|
}
|
|
100
|
-
}
|
|
101
168
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
border-color: var(--oui-red-6);
|
|
169
|
+
&::-webkit-slider-thumb {
|
|
170
|
+
position: relative;
|
|
171
|
+
top: 50%;
|
|
172
|
+
transform: translateY(-50%);
|
|
107
173
|
}
|
|
174
|
+
}
|
|
108
175
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
176
|
+
:where(
|
|
177
|
+
&.oui-validatable:not(
|
|
178
|
+
[disabled],
|
|
179
|
+
[readonly],
|
|
180
|
+
[aria-disabled='true' i]
|
|
181
|
+
):is(
|
|
182
|
+
:user-invalid:not([aria-invalid='false' i]),
|
|
183
|
+
[aria-invalid='true' i]
|
|
184
|
+
)
|
|
185
|
+
) {
|
|
186
|
+
@include invalid;
|
|
113
187
|
|
|
114
188
|
&::file-selector-button {
|
|
115
|
-
background-
|
|
116
|
-
|
|
117
|
-
|
|
189
|
+
--oui-background-value: var(--oui-red-2);
|
|
190
|
+
--oui-foreground-value: var(--oui-red-8);
|
|
191
|
+
--oui-outline-value: var(--oui-red-6);
|
|
118
192
|
}
|
|
119
193
|
|
|
120
194
|
&::range-thumb {
|
|
121
|
-
background-
|
|
195
|
+
--oui-background-value: var(--oui-red-6);
|
|
122
196
|
}
|
|
123
|
-
}
|
|
124
197
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
& {
|
|
128
|
-
outline-color: color-mix(in oklab, var(--oui-green-6), transparent 60%);
|
|
129
|
-
border-color: var(--oui-green-6);
|
|
198
|
+
&::range-track {
|
|
199
|
+
@include invalid;
|
|
130
200
|
}
|
|
131
201
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
202
|
+
& > option:checked {
|
|
203
|
+
background-color: var(--oui-red-2);
|
|
204
|
+
color: var(--oui-red-9);
|
|
135
205
|
}
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
:where(
|
|
209
|
+
&.oui-validatable:not(
|
|
210
|
+
[disabled],
|
|
211
|
+
[readonly],
|
|
212
|
+
[aria-disabled='true' i]
|
|
213
|
+
):is(:user-valid:not([aria-invalid='true' i]), [aria-invalid='false' i])
|
|
214
|
+
) {
|
|
215
|
+
@include valid;
|
|
136
216
|
|
|
137
217
|
&::file-selector-button {
|
|
138
|
-
background-
|
|
139
|
-
|
|
140
|
-
|
|
218
|
+
--oui-background-value: var(--oui-green-2);
|
|
219
|
+
--oui-foreground-value: var(--oui-green-8);
|
|
220
|
+
--oui-outline-value: var(--oui-green-6);
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
&::range-track {
|
|
224
|
+
@include valid;
|
|
141
225
|
}
|
|
142
226
|
|
|
143
227
|
&::range-thumb {
|
|
144
|
-
background-
|
|
228
|
+
--oui-background-value: var(--oui-green-6);
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
& > option:checked {
|
|
232
|
+
background-color: var(--oui-green-2);
|
|
233
|
+
color: var(--oui-green-9);
|
|
145
234
|
}
|
|
146
235
|
}
|
|
147
236
|
|
|
148
|
-
:where(&:not([disabled], [aria-disabled='true' i])
|
|
149
|
-
|
|
150
|
-
|
|
237
|
+
:where(&:not([disabled], [readonly], [aria-disabled='true' i])) {
|
|
238
|
+
&::-webkit-calendar-picker-indicator {
|
|
239
|
+
outline: 4px solid transparent;
|
|
240
|
+
outline-offset: 2px;
|
|
241
|
+
border-radius: 2em;
|
|
242
|
+
transition: 0.125s ease-in-out;
|
|
243
|
+
cursor: pointer;
|
|
151
244
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
245
|
+
@media (hover: hover) {
|
|
246
|
+
&:hover {
|
|
247
|
+
outline-color: color-mix(
|
|
248
|
+
in oklab,
|
|
249
|
+
var(--oui-blue-6),
|
|
250
|
+
transparent 75%
|
|
251
|
+
);
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
&:focus {
|
|
256
|
+
outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 75%);
|
|
257
|
+
}
|
|
156
258
|
}
|
|
259
|
+
}
|
|
157
260
|
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
261
|
+
:where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus),
|
|
262
|
+
:where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus-within) {
|
|
263
|
+
@include focus;
|
|
264
|
+
|
|
265
|
+
&::file-selector-button {
|
|
266
|
+
--oui-background-value: var(--oui-blue-2);
|
|
267
|
+
--oui-foreground-value: var(--oui-blue-8);
|
|
268
|
+
--oui-outline-value: var(--oui-blue-6);
|
|
161
269
|
}
|
|
162
270
|
|
|
271
|
+
&::range-thumb,
|
|
163
272
|
&::range-track {
|
|
164
|
-
|
|
273
|
+
@include focus;
|
|
165
274
|
}
|
|
166
275
|
|
|
167
276
|
&::range-thumb {
|
|
168
|
-
background-
|
|
277
|
+
--oui-background-value: var(--oui-blue-6);
|
|
278
|
+
|
|
169
279
|
box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.25);
|
|
170
280
|
}
|
|
171
281
|
}
|
|
172
282
|
|
|
173
283
|
@media (hover: hover) {
|
|
174
|
-
:where(&:not([disabled], [aria-disabled='true' i]):hover) {
|
|
175
|
-
|
|
176
|
-
outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 80%);
|
|
177
|
-
border-color: var(--oui-blue-6);
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
&::range-track {
|
|
181
|
-
outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 80%);
|
|
182
|
-
border-color: var(--oui-blue-6);
|
|
183
|
-
}
|
|
284
|
+
:where(&:not([disabled], [readonly], [aria-disabled='true' i]):hover) {
|
|
285
|
+
@include hover;
|
|
184
286
|
|
|
185
287
|
&::file-selector-button {
|
|
186
|
-
background-
|
|
187
|
-
|
|
188
|
-
|
|
288
|
+
--oui-background-value: var(--oui-blue-2);
|
|
289
|
+
--oui-foreground-value: var(--oui-blue-8);
|
|
290
|
+
--oui-outline-value: var(--oui-blue-6);
|
|
189
291
|
}
|
|
190
292
|
|
|
191
293
|
&::range-thumb {
|
|
192
|
-
background-
|
|
294
|
+
--oui-background-value: var(--oui-blue-5);
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
&::range-track {
|
|
298
|
+
@include hover;
|
|
193
299
|
}
|
|
194
300
|
}
|
|
195
301
|
}
|
|
196
302
|
|
|
197
|
-
:where(&[readonly]) {
|
|
198
|
-
|
|
303
|
+
:where(&[disabled], &[readonly], &[aria-disabled='true' i]) {
|
|
304
|
+
--oui-foreground-percentage: 25%;
|
|
305
|
+
|
|
306
|
+
font-style: italic;
|
|
307
|
+
|
|
308
|
+
&::file-selector-button {
|
|
309
|
+
--oui-background-value: var(--oui-gray-1);
|
|
310
|
+
|
|
311
|
+
cursor: default;
|
|
312
|
+
}
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
:where(&:is([disabled], [readonly], [aria-disabled='true' i]):focus) {
|
|
316
|
+
--oui-outline-percentage: 75%;
|
|
199
317
|
}
|
|
200
318
|
|
|
201
319
|
:where(&[disabled], &[aria-disabled='true' i]) {
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
320
|
+
--oui-background-percentage: 50%;
|
|
321
|
+
|
|
322
|
+
&::range-thumb {
|
|
323
|
+
--oui-background-value: var(--oui-gray-1);
|
|
324
|
+
|
|
325
|
+
cursor: default;
|
|
206
326
|
}
|
|
207
327
|
|
|
208
328
|
&::range-track {
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
font-style: italic;
|
|
329
|
+
--oui-background-percentage: 50%;
|
|
330
|
+
--oui-background-value: var(--oui-gray-0);
|
|
212
331
|
}
|
|
213
332
|
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
background-color: var(--oui-gray-1);
|
|
333
|
+
&::-webkit-calendar-picker-indicator {
|
|
334
|
+
opacity: 0.5;
|
|
217
335
|
}
|
|
218
336
|
}
|
|
219
337
|
}
|
|
@@ -243,16 +361,16 @@ select.oui-input:is([multiple]) {
|
|
|
243
361
|
}
|
|
244
362
|
|
|
245
363
|
:where(& > option:nth-of-type(2n)) {
|
|
246
|
-
background-color: color-mix(in oklab, var(--oui-blue-0), transparent
|
|
364
|
+
background-color: color-mix(in oklab, var(--oui-blue-0), transparent 50%);
|
|
247
365
|
}
|
|
248
366
|
|
|
249
367
|
:where(& > option:checked) {
|
|
250
|
-
background-color: var(--oui-blue-
|
|
368
|
+
background-color: var(--oui-blue-2);
|
|
251
369
|
color: var(--oui-blue-9);
|
|
252
370
|
|
|
253
371
|
&::before {
|
|
254
372
|
content: var(--oui-on);
|
|
255
|
-
margin: 0 .75em 0 0;
|
|
373
|
+
margin: 0 0.75em 0 0;
|
|
256
374
|
}
|
|
257
375
|
}
|
|
258
376
|
}
|
|
@@ -270,10 +388,10 @@ select.oui-input:is([multiple]) {
|
|
|
270
388
|
|
|
271
389
|
:where(.oui-label) {
|
|
272
390
|
cursor: pointer;
|
|
273
|
-
transition: .125s ease-in-out;
|
|
391
|
+
transition: 0.125s ease-in-out;
|
|
274
392
|
|
|
275
393
|
@media (hover: hover) {
|
|
276
|
-
:where(
|
|
394
|
+
:where(&[for]:hover) {
|
|
277
395
|
color: var(--oui-blue-8);
|
|
278
396
|
}
|
|
279
397
|
}
|
|
@@ -286,11 +404,22 @@ select.oui-input:is([multiple]) {
|
|
|
286
404
|
}
|
|
287
405
|
|
|
288
406
|
:where(.oui-switch, .oui-toggle) {
|
|
407
|
+
--oui-background-percentage: 50%;
|
|
408
|
+
--oui-background-value: var(--oui-gray-1);
|
|
409
|
+
--oui-border-value: var(--oui-gray-3);
|
|
410
|
+
--oui-foreground-percentage: 0%;
|
|
411
|
+
--oui-foreground-value: var(--oui-gray-8);
|
|
412
|
+
--oui-outline-percentage: 100%;
|
|
413
|
+
--oui-outline-value: var(--oui-blue-6);
|
|
414
|
+
--oui-shadow-percentage: 85%;
|
|
415
|
+
--oui-shadow-value: var(--oui-gray-10);
|
|
416
|
+
|
|
289
417
|
position: relative;
|
|
290
418
|
cursor: pointer;
|
|
291
419
|
|
|
292
420
|
&::before,
|
|
293
421
|
&::after {
|
|
422
|
+
display: inline-block;
|
|
294
423
|
font-family: system-ui, sans-serif;
|
|
295
424
|
position: absolute;
|
|
296
425
|
transition: 0.125s ease-in-out;
|
|
@@ -298,8 +427,33 @@ select.oui-input:is([multiple]) {
|
|
|
298
427
|
}
|
|
299
428
|
|
|
300
429
|
&::before {
|
|
301
|
-
|
|
430
|
+
background-color: color-mix(
|
|
431
|
+
in oklab,
|
|
432
|
+
var(--oui-background-value),
|
|
433
|
+
transparent var(--oui-background-percentage)
|
|
434
|
+
);
|
|
435
|
+
outline: 4px solid
|
|
436
|
+
color-mix(
|
|
437
|
+
in oklab,
|
|
438
|
+
var(--oui-outline-value),
|
|
439
|
+
transparent var(--oui-outline-percentage)
|
|
440
|
+
);
|
|
302
441
|
outline-offset: 0;
|
|
442
|
+
border: 1px solid var(--oui-border-value);
|
|
443
|
+
box-shadow: inset 0 1px 2px 0
|
|
444
|
+
color-mix(
|
|
445
|
+
in oklab,
|
|
446
|
+
var(--oui-shadow-value),
|
|
447
|
+
transparent var(--oui-shadow-percentage)
|
|
448
|
+
);
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
&::after {
|
|
452
|
+
color: color-mix(
|
|
453
|
+
in oklab,
|
|
454
|
+
var(--oui-foreground-value),
|
|
455
|
+
transparent var(--oui-foreground-percentage)
|
|
456
|
+
);
|
|
303
457
|
}
|
|
304
458
|
}
|
|
305
459
|
|
|
@@ -311,9 +465,6 @@ select.oui-input:is([multiple]) {
|
|
|
311
465
|
content: '';
|
|
312
466
|
width: 2.5em;
|
|
313
467
|
height: 1.5em;
|
|
314
|
-
display: inline-block;
|
|
315
|
-
background-color: var(--oui-gray-0);
|
|
316
|
-
border: 1px solid var(--oui-gray-3);
|
|
317
468
|
border-radius: 3em;
|
|
318
469
|
right: 0;
|
|
319
470
|
}
|
|
@@ -325,7 +476,6 @@ select.oui-input:is([multiple]) {
|
|
|
325
476
|
background-color: var(--oui-absolute);
|
|
326
477
|
border-radius: 1.5em;
|
|
327
478
|
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.125);
|
|
328
|
-
color: var(--oui-gray-8);
|
|
329
479
|
font-size: 0.75em;
|
|
330
480
|
font-weight: bold;
|
|
331
481
|
line-height: 1.5em;
|
|
@@ -336,10 +486,12 @@ select.oui-input:is([multiple]) {
|
|
|
336
486
|
}
|
|
337
487
|
|
|
338
488
|
:where(&:has(input:checked)) {
|
|
489
|
+
--oui-foreground-percentage: 0%;
|
|
490
|
+
--oui-foreground-value: var(--oui-blue-8);
|
|
491
|
+
|
|
339
492
|
&::after {
|
|
340
493
|
content: attr(oui-on, '\2713');
|
|
341
494
|
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.25);
|
|
342
|
-
color: var(--oui-blue-8);
|
|
343
495
|
right: 0.25em;
|
|
344
496
|
}
|
|
345
497
|
}
|
|
@@ -347,15 +499,15 @@ select.oui-input:is([multiple]) {
|
|
|
347
499
|
|
|
348
500
|
.oui-toggle {
|
|
349
501
|
:where(&) {
|
|
502
|
+
--oui-background-percentage: 100%;
|
|
503
|
+
--oui-border-value: var(--oui-gray-4);
|
|
504
|
+
|
|
350
505
|
padding: 0 0 0 2em;
|
|
351
506
|
|
|
352
507
|
&::before {
|
|
353
508
|
content: '';
|
|
354
509
|
width: 1.5em;
|
|
355
510
|
height: 1.5em;
|
|
356
|
-
display: inline-block;
|
|
357
|
-
background-color: transparent;
|
|
358
|
-
border: 1px solid var(--oui-gray-4);
|
|
359
511
|
inset: 0 auto auto 0;
|
|
360
512
|
}
|
|
361
513
|
|
|
@@ -365,6 +517,9 @@ select.oui-input:is([multiple]) {
|
|
|
365
517
|
}
|
|
366
518
|
|
|
367
519
|
:where(&:has(input[type='checkbox' i])) {
|
|
520
|
+
--oui-foreground-percentage: 0%;
|
|
521
|
+
--oui-foreground-value: white;
|
|
522
|
+
|
|
368
523
|
&::before {
|
|
369
524
|
border-radius: 0.25em;
|
|
370
525
|
}
|
|
@@ -373,7 +528,6 @@ select.oui-input:is([multiple]) {
|
|
|
373
528
|
content: attr(oui-on, '\2713');
|
|
374
529
|
width: 1.5em;
|
|
375
530
|
height: 1.5em;
|
|
376
|
-
color: white;
|
|
377
531
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
|
378
532
|
font-weight: bold;
|
|
379
533
|
line-height: 1.5em;
|
|
@@ -383,6 +537,7 @@ select.oui-input:is([multiple]) {
|
|
|
383
537
|
}
|
|
384
538
|
|
|
385
539
|
:where(&:has(input[type='radio' i])) {
|
|
540
|
+
position: relative;
|
|
386
541
|
|
|
387
542
|
&::before,
|
|
388
543
|
&::after {
|
|
@@ -409,47 +564,61 @@ select.oui-input:is([multiple]) {
|
|
|
409
564
|
.oui-switch,
|
|
410
565
|
.oui-toggle {
|
|
411
566
|
:where(&:has(input:checked)) {
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
567
|
+
--oui-background-percentage: 25%;
|
|
568
|
+
--oui-background-value: var(--oui-blue-6);
|
|
569
|
+
--oui-border-value: var(--oui-blue-6);
|
|
570
|
+
--oui-shadow-percentage: 50%;
|
|
571
|
+
--oui-shadow-value: var(--oui-blue-8);
|
|
416
572
|
}
|
|
417
573
|
|
|
418
|
-
:where(&:
|
|
574
|
+
:where(&:focus-within) {
|
|
575
|
+
--oui-border-value: var(--oui-blue-6);
|
|
576
|
+
--oui-outline-percentage: 75%;
|
|
577
|
+
|
|
419
578
|
color: var(--oui-blue-8);
|
|
579
|
+
}
|
|
420
580
|
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
border-color: var(--oui-absolute);
|
|
424
|
-
}
|
|
581
|
+
:where(&:has(input:not([disabled], [aria-disabled='true' i])):focus-within) {
|
|
582
|
+
--oui-background-percentage: 50%;
|
|
425
583
|
}
|
|
426
584
|
|
|
427
585
|
@media (hover: hover) {
|
|
428
586
|
:where(&:has(input:not([disabled], [aria-disabled='true' i])):hover) {
|
|
429
|
-
|
|
587
|
+
--oui-border-value: var(--oui-blue-4);
|
|
588
|
+
--oui-outline-percentage: 90%;
|
|
589
|
+
--oui-outline-value: var(--oui-blue-6);
|
|
430
590
|
|
|
431
|
-
|
|
432
|
-
outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 80%);
|
|
433
|
-
border-color: var(--oui-blue-6);
|
|
434
|
-
}
|
|
591
|
+
color: var(--oui-blue-8);
|
|
435
592
|
}
|
|
436
593
|
|
|
437
|
-
:where(
|
|
438
|
-
|
|
594
|
+
:where(
|
|
595
|
+
&:has(
|
|
596
|
+
input:not([disabled], [aria-disabled='true' i]):is(:checked)
|
|
597
|
+
):hover
|
|
598
|
+
) {
|
|
599
|
+
--oui-background-percentage: 50%;
|
|
600
|
+
--oui-background-value: var(--oui-blue-6);
|
|
439
601
|
}
|
|
440
602
|
}
|
|
441
603
|
|
|
442
604
|
:where(&:has(input[disabled], input[aria-disabled='true' i])) {
|
|
443
|
-
|
|
605
|
+
--oui-background-percentage: 50%;
|
|
606
|
+
--oui-background-value: var(--oui-gray-0);
|
|
607
|
+
--oui-border-value: var(--oui-gray-3);
|
|
608
|
+
--oui-foreground-percentage: 25%;
|
|
609
|
+
--oui-foreground-value: currentColor;
|
|
610
|
+
|
|
611
|
+
color: color-mix(
|
|
612
|
+
in oklab,
|
|
613
|
+
var(--oui-foreground-value),
|
|
614
|
+
transparent var(--oui-foreground-percentage)
|
|
615
|
+
);
|
|
616
|
+
font-style: italic;
|
|
444
617
|
cursor: default;
|
|
445
618
|
|
|
446
|
-
&::after
|
|
447
|
-
color: color-mix(in oklab, currentColor, transparent);
|
|
448
|
-
}
|
|
449
|
-
|
|
619
|
+
&::after,
|
|
450
620
|
&::before {
|
|
451
|
-
|
|
452
|
-
border-color: var(--oui-gray-3);
|
|
621
|
+
font-style: normal;
|
|
453
622
|
}
|
|
454
623
|
|
|
455
624
|
&::after {
|