@oscarpalmer/oui 0.10.0 → 0.11.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 +1 -0
- package/dist/css/button.css +28 -25
- package/dist/css/form.css +351 -228
- package/package.json +1 -1
- package/src/css/badge.scss +1 -0
- package/src/css/button.scss +28 -59
- package/src/css/form.scss +218 -117
- package/src/css/mixins.scss +43 -0
package/package.json
CHANGED
package/src/css/badge.scss
CHANGED
package/src/css/button.scss
CHANGED
|
@@ -1,78 +1,44 @@
|
|
|
1
|
+
@use './mixins' as mixins;
|
|
2
|
+
|
|
1
3
|
.oui-button {
|
|
2
4
|
:where(&) {
|
|
3
|
-
|
|
4
|
-
--oui-foreground-percentage: 0%;
|
|
5
|
-
--oui-outline-percentage: 100%;
|
|
6
|
-
--oui-shadow-percentage: 90%;
|
|
7
|
-
|
|
8
|
-
--oui-shadow-value: color-mix(
|
|
9
|
-
in oklch,
|
|
10
|
-
var(--oui-shadow, var(--oui-gray-6)),
|
|
11
|
-
transparent var(--oui-shadow-percentage)
|
|
12
|
-
);
|
|
13
|
-
|
|
14
|
-
padding: 0.5em 0.75em;
|
|
15
|
-
display: inline-flex;
|
|
16
|
-
flex-flow: row wrap;
|
|
17
|
-
gap: 0.75em;
|
|
18
|
-
border-radius: 0.25em;
|
|
19
|
-
background-color: color-mix(
|
|
20
|
-
in oklab,
|
|
21
|
-
var(--oui-background, var(--oui-gray-2)),
|
|
22
|
-
transparent var(--oui-background-percentage)
|
|
23
|
-
);
|
|
24
|
-
outline: 4px solid
|
|
25
|
-
color-mix(
|
|
26
|
-
in oklab,
|
|
27
|
-
var(--oui-shadow, var(--oui-gray-6)),
|
|
28
|
-
transparent var(--oui-outline-percentage)
|
|
29
|
-
);
|
|
30
|
-
border: none;
|
|
31
|
-
box-shadow: 0 0 0 1px var(--oui-shadow-value),
|
|
32
|
-
0 1px 2px 0 var(--oui-shadow-value), 0 2px 4px 0 var(--oui-shadow-value);
|
|
33
|
-
color: color-mix(
|
|
34
|
-
in oklab,
|
|
35
|
-
var(--oui-foreground, var(--oui-gray-8)),
|
|
36
|
-
transparent var(--oui-foreground-percentage)
|
|
37
|
-
);
|
|
38
|
-
line-height: 1.25;
|
|
39
|
-
transition: 0.125s ease-in-out;
|
|
5
|
+
@include mixins.button;
|
|
40
6
|
}
|
|
41
7
|
|
|
42
8
|
:where(&-blue) {
|
|
43
|
-
--oui-background: var(--oui-blue-2);
|
|
44
|
-
--oui-foreground: var(--oui-blue-8);
|
|
45
|
-
--oui-
|
|
9
|
+
--oui-background-value: var(--oui-blue-2);
|
|
10
|
+
--oui-foreground-value: var(--oui-blue-8);
|
|
11
|
+
--oui-outline-value: var(--oui-blue-6);
|
|
46
12
|
}
|
|
47
13
|
|
|
48
14
|
:where(&-green) {
|
|
49
|
-
--oui-background: var(--oui-green-2);
|
|
50
|
-
--oui-foreground: var(--oui-green-8);
|
|
51
|
-
--oui-
|
|
15
|
+
--oui-background-value: var(--oui-green-2);
|
|
16
|
+
--oui-foreground-value: var(--oui-green-8);
|
|
17
|
+
--oui-outline-value: var(--oui-green-6);
|
|
52
18
|
}
|
|
53
19
|
|
|
54
20
|
:where(&-orange) {
|
|
55
|
-
--oui-background: var(--oui-orange-2);
|
|
56
|
-
--oui-foreground: var(--oui-orange-8);
|
|
57
|
-
--oui-
|
|
21
|
+
--oui-background-value: var(--oui-orange-2);
|
|
22
|
+
--oui-foreground-value: var(--oui-orange-8);
|
|
23
|
+
--oui-outline-value: var(--oui-orange-6);
|
|
58
24
|
}
|
|
59
25
|
|
|
60
26
|
:where(&-purple) {
|
|
61
|
-
--oui-background: var(--oui-purple-2);
|
|
62
|
-
--oui-foreground: var(--oui-purple-8);
|
|
63
|
-
--oui-
|
|
27
|
+
--oui-background-value: var(--oui-purple-2);
|
|
28
|
+
--oui-foreground-value: var(--oui-purple-8);
|
|
29
|
+
--oui-outline-value: var(--oui-purple-6);
|
|
64
30
|
}
|
|
65
31
|
|
|
66
32
|
:where(&-red) {
|
|
67
|
-
--oui-background: var(--oui-red-2);
|
|
68
|
-
--oui-foreground: var(--oui-red-8);
|
|
69
|
-
--oui-
|
|
33
|
+
--oui-background-value: var(--oui-red-2);
|
|
34
|
+
--oui-foreground-value: var(--oui-red-8);
|
|
35
|
+
--oui-outline-value: var(--oui-red-6);
|
|
70
36
|
}
|
|
71
37
|
|
|
72
38
|
:where(&-yellow) {
|
|
73
|
-
--oui-background: var(--oui-yellow-2);
|
|
74
|
-
--oui-foreground: var(--oui-yellow-8);
|
|
75
|
-
--oui-
|
|
39
|
+
--oui-background-value: var(--oui-yellow-2);
|
|
40
|
+
--oui-foreground-value: var(--oui-yellow-8);
|
|
41
|
+
--oui-outline-value: var(--oui-yellow-6);
|
|
76
42
|
}
|
|
77
43
|
|
|
78
44
|
:where(&-rounded) {
|
|
@@ -87,6 +53,8 @@
|
|
|
87
53
|
}
|
|
88
54
|
|
|
89
55
|
:where(&-tiny) {
|
|
56
|
+
--oui-foreground-percentage: 12.5%;
|
|
57
|
+
|
|
90
58
|
font-size: 0.75em;
|
|
91
59
|
font-weight: bold;
|
|
92
60
|
letter-spacing: 0.1em;
|
|
@@ -101,14 +69,15 @@
|
|
|
101
69
|
:where(&:not([disabled], [aria-disabled='true' i]):hover) {
|
|
102
70
|
--oui-background-percentage: 50%;
|
|
103
71
|
--oui-foreground-percentage: 25%;
|
|
104
|
-
--oui-shadow-percentage:
|
|
72
|
+
--oui-shadow-percentage: 90%;
|
|
105
73
|
}
|
|
106
74
|
}
|
|
107
75
|
|
|
108
76
|
:where(&:not([disabled], [aria-disabled='true' i]):active) {
|
|
109
|
-
box-shadow:
|
|
110
|
-
|
|
111
|
-
inset 0 2px
|
|
77
|
+
box-shadow:
|
|
78
|
+
0 0 0 1px var(--oui-shadow-mixed),
|
|
79
|
+
inset 0 1px 2px 0 var(--oui-shadow-mixed),
|
|
80
|
+
inset 0 2px 4px 0 var(--oui-shadow-mixed);
|
|
112
81
|
}
|
|
113
82
|
|
|
114
83
|
:where(&[disabled], &[aria-disabled='true' i]) {
|
package/src/css/form.scss
CHANGED
|
@@ -2,14 +2,65 @@
|
|
|
2
2
|
|
|
3
3
|
@use 'mixins.scss' as mixins;
|
|
4
4
|
|
|
5
|
+
@mixin focus() {
|
|
6
|
+
--oui-border-value: var(--oui-blue-6);
|
|
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: 50%;
|
|
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(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
|
|
27
|
+
border: 1px solid var(--oui-border-value, var(--oui-gray-3));
|
|
28
|
+
box-shadow: inset 0 1px 2px 0 color-mix(in oklab, var(--oui-gray-10), transparent 75%);
|
|
29
|
+
color: color-mix(
|
|
30
|
+
in oklab,
|
|
31
|
+
var(--oui-foreground-value, inherit),
|
|
32
|
+
transparent var(--oui-foreground-percentage)
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@mixin invalid() {
|
|
37
|
+
--oui-border-value: var(--oui-red-6);
|
|
38
|
+
--oui-foreground-value: var(--oui-red-9);
|
|
39
|
+
--oui-outline-percentage: 75%;
|
|
40
|
+
--oui-outline-value: var(--oui-red-6);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@mixin outlined {
|
|
44
|
+
--oui-outline-percentage: 100%;
|
|
45
|
+
--oui-outline-value: var(--oui-blue-6);
|
|
46
|
+
|
|
47
|
+
outline: 4px solid
|
|
48
|
+
color-mix(
|
|
49
|
+
in oklab,
|
|
50
|
+
var(--oui-outline-value),
|
|
51
|
+
transparent var(--oui-outline-percentage)
|
|
52
|
+
);
|
|
7
53
|
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
54
|
transition: 0.125s ease-in-out;
|
|
11
55
|
}
|
|
12
56
|
|
|
57
|
+
@mixin valid() {
|
|
58
|
+
--oui-border-value: var(--oui-green-6);
|
|
59
|
+
--oui-foreground-value: var(--oui-green-9);
|
|
60
|
+
--oui-outline-percentage: 75%;
|
|
61
|
+
--oui-outline-value: var(--oui-green-6);
|
|
62
|
+
}
|
|
63
|
+
|
|
13
64
|
:where(.oui-fieldset) {
|
|
14
65
|
padding: 1em;
|
|
15
66
|
border: 1px solid var(--oui-gray-3);
|
|
@@ -18,10 +69,11 @@
|
|
|
18
69
|
|
|
19
70
|
.oui-input {
|
|
20
71
|
:where(&:not([type='range' i])) {
|
|
72
|
+
--oui-background-value: var(--oui-absolute);
|
|
73
|
+
|
|
21
74
|
@include input;
|
|
22
75
|
|
|
23
76
|
padding: 0.5em 0.75em;
|
|
24
|
-
border-color: var(--oui-gray-3);
|
|
25
77
|
border-radius: 0.25em;
|
|
26
78
|
}
|
|
27
79
|
|
|
@@ -56,16 +108,12 @@
|
|
|
56
108
|
padding-left: .5em;
|
|
57
109
|
|
|
58
110
|
&::file-selector-button {
|
|
59
|
-
|
|
111
|
+
@include mixins.button;
|
|
112
|
+
|
|
113
|
+
--oui-outline-value: var(--oui-grey-6);
|
|
114
|
+
|
|
60
115
|
margin: 0 .75em 0 0;
|
|
61
|
-
background-color: var(--oui-gray-1);
|
|
62
|
-
border: 1px solid var(--oui-gray-3);
|
|
63
|
-
border-radius: .25em;
|
|
64
|
-
box-shadow: inset 0 1px 0 0 var(--oui-gray-0), 0 1px 2px 0 rgba(0, 0, 0, 0.125);
|
|
65
|
-
color: var(--oui-gray-8);
|
|
66
116
|
font-size: .75em;
|
|
67
|
-
line-height: 1;
|
|
68
|
-
transition: .125s ease-in-out;
|
|
69
117
|
cursor: pointer;
|
|
70
118
|
}
|
|
71
119
|
}
|
|
@@ -80,140 +128,164 @@
|
|
|
80
128
|
appearance: none;
|
|
81
129
|
width: 100%;
|
|
82
130
|
height: 0.75em;
|
|
83
|
-
border: 1px solid var(--oui-gray-3);
|
|
84
131
|
border-radius: .75em;
|
|
85
132
|
position: relative;
|
|
86
133
|
}
|
|
87
134
|
|
|
88
135
|
&::range-thumb {
|
|
136
|
+
--oui-background-percentage: 0%;
|
|
137
|
+
--oui-background-value: var(--oui-blue-6);
|
|
138
|
+
|
|
139
|
+
@include outlined;
|
|
140
|
+
|
|
89
141
|
appearance: none;
|
|
90
142
|
width: 1.25em;
|
|
91
143
|
height: 1.25em;
|
|
92
|
-
background-color:
|
|
93
|
-
|
|
144
|
+
background-color:
|
|
145
|
+
color-mix(
|
|
146
|
+
in oklab,
|
|
147
|
+
var(--oui-background-value),
|
|
148
|
+
transparent var(--oui-background-percentage)
|
|
149
|
+
);
|
|
94
150
|
border: 2px solid var(--oui-absolute);
|
|
95
151
|
border-radius: 1.25em;
|
|
96
152
|
box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.125);
|
|
97
|
-
transition: .125s ease-in-out;
|
|
98
153
|
cursor: pointer;
|
|
99
154
|
}
|
|
100
|
-
}
|
|
101
155
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
border-color: var(--oui-red-6);
|
|
156
|
+
&::-webkit-slider-thumb {
|
|
157
|
+
position: relative;
|
|
158
|
+
top: 50%;
|
|
159
|
+
transform: translateY(-50%);
|
|
107
160
|
}
|
|
161
|
+
}
|
|
108
162
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
border-color: var(--oui-red-6);
|
|
112
|
-
}
|
|
163
|
+
:where(&.oui-validatable:not([disabled], [readonly], [aria-disabled='true' i]):is(:user-invalid, [aria-invalid='true' i])) {
|
|
164
|
+
@include invalid;
|
|
113
165
|
|
|
114
166
|
&::file-selector-button {
|
|
115
|
-
background-
|
|
116
|
-
|
|
117
|
-
|
|
167
|
+
--oui-background-value: var(--oui-red-1);
|
|
168
|
+
--oui-foreground-value: var(--oui-red-8);
|
|
169
|
+
--oui-outline-value: var(--oui-red-6);
|
|
118
170
|
}
|
|
119
171
|
|
|
120
172
|
&::range-thumb {
|
|
121
|
-
background-
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
:where(&.oui-validatable:not([disabled], [aria-disabled='true' i]):is(:user-valid,
|
|
126
|
-
[aria-invalid='false' i])) {
|
|
127
|
-
& {
|
|
128
|
-
outline-color: color-mix(in oklab, var(--oui-green-6), transparent 60%);
|
|
129
|
-
border-color: var(--oui-green-6);
|
|
173
|
+
--oui-background-value: var(--oui-red-6);
|
|
130
174
|
}
|
|
131
175
|
|
|
132
176
|
&::range-track {
|
|
133
|
-
|
|
134
|
-
border-color: var(--oui-green-6);
|
|
177
|
+
@include invalid;
|
|
135
178
|
}
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
:where(&.oui-validatable:not([disabled], [readonly], [aria-disabled='true' i]):is(:user-valid, [aria-invalid='false' i])) {
|
|
182
|
+
@include valid;
|
|
136
183
|
|
|
137
184
|
&::file-selector-button {
|
|
138
|
-
background-
|
|
139
|
-
|
|
140
|
-
|
|
185
|
+
--oui-background-value: var(--oui-green-1);
|
|
186
|
+
--oui-foreground-value: var(--oui-green-8);
|
|
187
|
+
--oui-outline-value: var(--oui-green-6);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
&::range-track {
|
|
191
|
+
@include valid;
|
|
141
192
|
}
|
|
142
193
|
|
|
143
194
|
&::range-thumb {
|
|
144
|
-
background-
|
|
195
|
+
--oui-background-value: var(--oui-green-6);
|
|
145
196
|
}
|
|
146
197
|
}
|
|
147
198
|
|
|
148
|
-
:where(&:not([disabled], [aria-disabled=
|
|
149
|
-
|
|
150
|
-
|
|
199
|
+
:where(&:not([disabled], [readonly], [aria-disabled="true" i])) {
|
|
200
|
+
&::-webkit-calendar-picker-indicator {
|
|
201
|
+
outline: 4px solid transparent;
|
|
202
|
+
outline-offset: 2px;
|
|
203
|
+
border-radius: 2em;
|
|
204
|
+
transition: .125s ease-in-out;
|
|
205
|
+
cursor: pointer;
|
|
151
206
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
207
|
+
@media (hover: hover) {
|
|
208
|
+
&:hover {
|
|
209
|
+
outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 75%);
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
&:focus {
|
|
214
|
+
outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 75%);
|
|
215
|
+
}
|
|
156
216
|
}
|
|
217
|
+
}
|
|
157
218
|
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
219
|
+
:where(&:not([disabled], [readonly], [aria-disabled="true" i]):focus),
|
|
220
|
+
:where(&:not([disabled], [readonly], [aria-disabled="true" i]):focus-within) {
|
|
221
|
+
@include focus;
|
|
222
|
+
|
|
223
|
+
&::file-selector-button {
|
|
224
|
+
--oui-background-value: var(--oui-blue-1);
|
|
225
|
+
--oui-foreground-value: var(--oui-blue-8);
|
|
226
|
+
--oui-outline-value: var(--oui-blue-6);
|
|
161
227
|
}
|
|
162
228
|
|
|
229
|
+
&::range-thumb,
|
|
163
230
|
&::range-track {
|
|
164
|
-
|
|
231
|
+
@include focus;
|
|
165
232
|
}
|
|
166
233
|
|
|
167
234
|
&::range-thumb {
|
|
168
|
-
background-
|
|
235
|
+
--oui-background-value: var(--oui-blue-6);
|
|
236
|
+
|
|
169
237
|
box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.25);
|
|
170
238
|
}
|
|
171
239
|
}
|
|
172
240
|
|
|
173
241
|
@media (hover: hover) {
|
|
174
242
|
: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
|
-
}
|
|
243
|
+
@include hover;
|
|
184
244
|
|
|
185
245
|
&::file-selector-button {
|
|
186
|
-
background-
|
|
187
|
-
|
|
188
|
-
|
|
246
|
+
--oui-background-value: var(--oui-blue-1);
|
|
247
|
+
--oui-foreground-value: var(--oui-blue-8);
|
|
248
|
+
--oui-outline-value: var(--oui-blue-6);
|
|
189
249
|
}
|
|
190
250
|
|
|
191
251
|
&::range-thumb {
|
|
192
|
-
background-
|
|
252
|
+
--oui-background-value: var(--oui-blue-5);
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
&::range-track {
|
|
256
|
+
@include hover;
|
|
193
257
|
}
|
|
194
258
|
}
|
|
195
259
|
}
|
|
196
260
|
|
|
197
|
-
:where(&[readonly]) {
|
|
198
|
-
|
|
261
|
+
:where(&[disabled], &[readonly], &[aria-disabled='true' i]) {
|
|
262
|
+
--oui-foreground-percentage: 25%;
|
|
263
|
+
|
|
264
|
+
font-style: italic;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
:where(&:is([disabled], [readonly], [aria-disabled='true' i]):focus) {
|
|
268
|
+
--oui-outline-percentage: 75%;
|
|
199
269
|
}
|
|
200
270
|
|
|
201
271
|
:where(&[disabled], &[aria-disabled='true' i]) {
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
272
|
+
--oui-background-percentage: 50%;
|
|
273
|
+
|
|
274
|
+
&::file-selector-button,
|
|
275
|
+
&::range-thumb {
|
|
276
|
+
--oui-background-value: var(--oui-gray-1);
|
|
277
|
+
|
|
278
|
+
cursor: default;
|
|
206
279
|
}
|
|
207
280
|
|
|
208
281
|
&::range-track {
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
font-style: italic;
|
|
282
|
+
--oui-background-percentage: 50%;
|
|
283
|
+
--oui-background-value: var(--oui-gray-0);
|
|
212
284
|
}
|
|
213
285
|
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
286
|
+
&::-webkit-calendar-picker-indicator {
|
|
287
|
+
color: red;
|
|
288
|
+
stroke: red;
|
|
217
289
|
}
|
|
218
290
|
}
|
|
219
291
|
}
|
|
@@ -243,11 +315,11 @@ select.oui-input:is([multiple]) {
|
|
|
243
315
|
}
|
|
244
316
|
|
|
245
317
|
:where(& > option:nth-of-type(2n)) {
|
|
246
|
-
background-color: color-mix(in oklab, var(--oui-blue-0), transparent
|
|
318
|
+
background-color: color-mix(in oklab, var(--oui-blue-0), transparent 33%);
|
|
247
319
|
}
|
|
248
320
|
|
|
249
321
|
:where(& > option:checked) {
|
|
250
|
-
background-color: var(--oui-blue-
|
|
322
|
+
background-color: var(--oui-blue-2);
|
|
251
323
|
color: var(--oui-blue-9);
|
|
252
324
|
|
|
253
325
|
&::before {
|
|
@@ -273,7 +345,7 @@ select.oui-input:is([multiple]) {
|
|
|
273
345
|
transition: .125s ease-in-out;
|
|
274
346
|
|
|
275
347
|
@media (hover: hover) {
|
|
276
|
-
:where(
|
|
348
|
+
:where(&[for]:hover) {
|
|
277
349
|
color: var(--oui-blue-8);
|
|
278
350
|
}
|
|
279
351
|
}
|
|
@@ -286,11 +358,22 @@ select.oui-input:is([multiple]) {
|
|
|
286
358
|
}
|
|
287
359
|
|
|
288
360
|
:where(.oui-switch, .oui-toggle) {
|
|
361
|
+
--oui-background-percentage: 50%;
|
|
362
|
+
--oui-background-value: var(--oui-gray-1);
|
|
363
|
+
--oui-border-value: var(--oui-gray-3);
|
|
364
|
+
--oui-foreground-percentage: 0%;
|
|
365
|
+
--oui-foreground-value: var(--oui-gray-8);
|
|
366
|
+
--oui-outline-percentage: 100%;
|
|
367
|
+
--oui-outline-value: var(--oui-blue-6);
|
|
368
|
+
--oui-shadow-percentage: 85%;
|
|
369
|
+
--oui-shadow-value: var(--oui-gray-10);
|
|
370
|
+
|
|
289
371
|
position: relative;
|
|
290
372
|
cursor: pointer;
|
|
291
373
|
|
|
292
374
|
&::before,
|
|
293
375
|
&::after {
|
|
376
|
+
display: inline-block;
|
|
294
377
|
font-family: system-ui, sans-serif;
|
|
295
378
|
position: absolute;
|
|
296
379
|
transition: 0.125s ease-in-out;
|
|
@@ -298,8 +381,19 @@ select.oui-input:is([multiple]) {
|
|
|
298
381
|
}
|
|
299
382
|
|
|
300
383
|
&::before {
|
|
301
|
-
|
|
384
|
+
background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
|
|
385
|
+
box-shadow: inset 0 1px 2px 0 color-mix(in oklab, var(--oui-shadow-value), transparent var(--oui-shadow-percentage));
|
|
386
|
+
outline: 4px solid color-mix(
|
|
387
|
+
in oklab,
|
|
388
|
+
var(--oui-outline-value),
|
|
389
|
+
transparent var(--oui-outline-percentage)
|
|
390
|
+
);
|
|
302
391
|
outline-offset: 0;
|
|
392
|
+
border: 1px solid var(--oui-border-value);
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
&::after {
|
|
396
|
+
color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
|
|
303
397
|
}
|
|
304
398
|
}
|
|
305
399
|
|
|
@@ -311,9 +405,6 @@ select.oui-input:is([multiple]) {
|
|
|
311
405
|
content: '';
|
|
312
406
|
width: 2.5em;
|
|
313
407
|
height: 1.5em;
|
|
314
|
-
display: inline-block;
|
|
315
|
-
background-color: var(--oui-gray-0);
|
|
316
|
-
border: 1px solid var(--oui-gray-3);
|
|
317
408
|
border-radius: 3em;
|
|
318
409
|
right: 0;
|
|
319
410
|
}
|
|
@@ -325,7 +416,6 @@ select.oui-input:is([multiple]) {
|
|
|
325
416
|
background-color: var(--oui-absolute);
|
|
326
417
|
border-radius: 1.5em;
|
|
327
418
|
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.125);
|
|
328
|
-
color: var(--oui-gray-8);
|
|
329
419
|
font-size: 0.75em;
|
|
330
420
|
font-weight: bold;
|
|
331
421
|
line-height: 1.5em;
|
|
@@ -336,10 +426,12 @@ select.oui-input:is([multiple]) {
|
|
|
336
426
|
}
|
|
337
427
|
|
|
338
428
|
:where(&:has(input:checked)) {
|
|
429
|
+
--oui-foreground-percentage: 0%;
|
|
430
|
+
--oui-foreground-value: var(--oui-blue-8);
|
|
431
|
+
|
|
339
432
|
&::after {
|
|
340
433
|
content: attr(oui-on, '\2713');
|
|
341
434
|
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.25);
|
|
342
|
-
color: var(--oui-blue-8);
|
|
343
435
|
right: 0.25em;
|
|
344
436
|
}
|
|
345
437
|
}
|
|
@@ -347,15 +439,15 @@ select.oui-input:is([multiple]) {
|
|
|
347
439
|
|
|
348
440
|
.oui-toggle {
|
|
349
441
|
:where(&) {
|
|
442
|
+
--oui-background-percentage: 100%;
|
|
443
|
+
--oui-border-value: var(--oui-gray-4);
|
|
444
|
+
|
|
350
445
|
padding: 0 0 0 2em;
|
|
351
446
|
|
|
352
447
|
&::before {
|
|
353
448
|
content: '';
|
|
354
449
|
width: 1.5em;
|
|
355
450
|
height: 1.5em;
|
|
356
|
-
display: inline-block;
|
|
357
|
-
background-color: transparent;
|
|
358
|
-
border: 1px solid var(--oui-gray-4);
|
|
359
451
|
inset: 0 auto auto 0;
|
|
360
452
|
}
|
|
361
453
|
|
|
@@ -365,6 +457,9 @@ select.oui-input:is([multiple]) {
|
|
|
365
457
|
}
|
|
366
458
|
|
|
367
459
|
:where(&:has(input[type='checkbox' i])) {
|
|
460
|
+
--oui-foreground-percentage: 0%;
|
|
461
|
+
--oui-foreground-value: white;
|
|
462
|
+
|
|
368
463
|
&::before {
|
|
369
464
|
border-radius: 0.25em;
|
|
370
465
|
}
|
|
@@ -373,7 +468,6 @@ select.oui-input:is([multiple]) {
|
|
|
373
468
|
content: attr(oui-on, '\2713');
|
|
374
469
|
width: 1.5em;
|
|
375
470
|
height: 1.5em;
|
|
376
|
-
color: white;
|
|
377
471
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
|
378
472
|
font-weight: bold;
|
|
379
473
|
line-height: 1.5em;
|
|
@@ -383,6 +477,7 @@ select.oui-input:is([multiple]) {
|
|
|
383
477
|
}
|
|
384
478
|
|
|
385
479
|
:where(&:has(input[type='radio' i])) {
|
|
480
|
+
position: relative;
|
|
386
481
|
|
|
387
482
|
&::before,
|
|
388
483
|
&::after {
|
|
@@ -409,47 +504,53 @@ select.oui-input:is([multiple]) {
|
|
|
409
504
|
.oui-switch,
|
|
410
505
|
.oui-toggle {
|
|
411
506
|
:where(&:has(input:checked)) {
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
507
|
+
--oui-background-percentage: 25%;
|
|
508
|
+
--oui-background-value: var(--oui-blue-6);
|
|
509
|
+
--oui-border-value: var(--oui-blue-6);
|
|
510
|
+
--oui-shadow-percentage: 50%;
|
|
511
|
+
--oui-shadow-value: var(--oui-blue-8);
|
|
416
512
|
}
|
|
417
513
|
|
|
418
|
-
:where(&:
|
|
514
|
+
:where(&:focus-within) {
|
|
515
|
+
--oui-border-value: var(--oui-blue-6);
|
|
516
|
+
--oui-outline-percentage: 75%;
|
|
517
|
+
|
|
419
518
|
color: var(--oui-blue-8);
|
|
519
|
+
}
|
|
420
520
|
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
border-color: var(--oui-absolute);
|
|
424
|
-
}
|
|
521
|
+
:where(&:has(input:not([disabled], [aria-disabled='true' i])):focus-within) {
|
|
522
|
+
--oui-background-percentage: 50%;
|
|
425
523
|
}
|
|
426
524
|
|
|
427
525
|
@media (hover: hover) {
|
|
428
526
|
:where(&:has(input:not([disabled], [aria-disabled='true' i])):hover) {
|
|
429
|
-
|
|
527
|
+
--oui-border-value: var(--oui-blue-4);
|
|
528
|
+
--oui-outline-percentage: 90%;
|
|
529
|
+
--oui-outline-value: var(--oui-blue-6);
|
|
430
530
|
|
|
431
|
-
|
|
432
|
-
outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 80%);
|
|
433
|
-
border-color: var(--oui-blue-6);
|
|
434
|
-
}
|
|
531
|
+
color: var(--oui-blue-8);
|
|
435
532
|
}
|
|
436
533
|
|
|
437
|
-
:where(&:has(input:not([disabled], [aria-disabled='true' i]):is(:checked)):hover)
|
|
438
|
-
|
|
534
|
+
:where(&:has(input:not([disabled], [aria-disabled='true' i]):is(:checked)):hover) {
|
|
535
|
+
--oui-background-percentage: 50%;
|
|
536
|
+
--oui-background-value: var(--oui-blue-6);
|
|
439
537
|
}
|
|
440
538
|
}
|
|
441
539
|
|
|
442
540
|
:where(&:has(input[disabled], input[aria-disabled='true' i])) {
|
|
443
|
-
|
|
541
|
+
--oui-background-percentage: 50%;
|
|
542
|
+
--oui-background-value: var(--oui-gray-0);
|
|
543
|
+
--oui-border-value: var(--oui-gray-3);
|
|
544
|
+
--oui-foreground-percentage: 25%;
|
|
545
|
+
--oui-foreground-value: currentColor;
|
|
546
|
+
|
|
547
|
+
color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
|
|
548
|
+
font-style: italic;
|
|
444
549
|
cursor: default;
|
|
445
550
|
|
|
446
|
-
&::after
|
|
447
|
-
color: color-mix(in oklab, currentColor, transparent);
|
|
448
|
-
}
|
|
449
|
-
|
|
551
|
+
&::after,
|
|
450
552
|
&::before {
|
|
451
|
-
|
|
452
|
-
border-color: var(--oui-gray-3);
|
|
553
|
+
font-style: normal;
|
|
453
554
|
}
|
|
454
555
|
|
|
455
556
|
&::after {
|