@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.
Files changed (18) hide show
  1. package/dist/css/badge.css +6 -4
  2. package/dist/css/button.css +31 -26
  3. package/dist/css/color.css +25 -25
  4. package/dist/css/content.css +193 -0
  5. package/dist/css/form.css +404 -219
  6. package/dist/css/message.css +23 -16
  7. package/dist/css/reset.css +3 -1
  8. package/dist/css/table.css +26 -9
  9. package/package.json +4 -4
  10. package/src/css/badge.scss +8 -7
  11. package/src/css/button.scss +28 -57
  12. package/src/css/color.scss +25 -25
  13. package/src/css/content.scss +156 -0
  14. package/src/css/form.scss +300 -131
  15. package/src/css/message.scss +29 -21
  16. package/src/css/mixins.scss +62 -0
  17. package/src/css/reset.scss +3 -2
  18. package/src/css/table.scss +32 -7
package/dist/css/form.css CHANGED
@@ -8,13 +8,20 @@
8
8
  }
9
9
 
10
10
  :where(.oui-input:not([type=range i])) {
11
- outline: 4px solid transparent;
11
+ --oui-background-value: var(--oui-absolute);
12
+ --oui-background-percentage: 0%;
13
+ --oui-foreground-percentage: 0%;
14
+ --oui-outline-percentage: 100%;
15
+ --oui-outline-value: var(--oui-blue-6);
16
+ outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
12
17
  outline-offset: 0;
13
- background-color: var(--oui-absolute);
14
- box-shadow: inset 0 1px 2px 0 color-mix(in oklab, var(--oui-gray-10), transparent 80%);
15
18
  transition: 0.125s ease-in-out;
19
+ background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
20
+ border: 1px solid var(--oui-border-value, var(--oui-gray-3));
21
+ box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
22
+ color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
23
+ -webkit-text-fill-color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
16
24
  padding: 0.5em 0.75em;
17
- border-color: var(--oui-gray-3);
18
25
  border-radius: 0.25em;
19
26
  }
20
27
  :where(.oui-input:not([type=range i], select[multiple], textarea)) {
@@ -42,16 +49,33 @@
42
49
  padding-left: 0.5em;
43
50
  }
44
51
  :where(.oui-input:is([type=file i]))::file-selector-button {
52
+ --oui-background-percentage: 25%;
53
+ --oui-foreground-percentage: 0%;
54
+ --oui-outline-percentage: 100%;
55
+ --oui-shadow-inset: color-mix(in oklab, white, transparent 75%);
56
+ --oui-shadow-percentage: 82.5%;
57
+ --oui-shadow-value: color-mix(
58
+ in oklab,
59
+ var(--oui-outline-value, var(--oui-gray-6)),
60
+ transparent var(--oui-shadow-percentage)
61
+ );
62
+ box-shadow: inset 0 1px 0 0 var(--oui-shadow-inset), 0 0 0 1px var(--oui-shadow-value), 0 1px 2px -0.5px var(--oui-shadow-value), 0 2px 4px -1px var(--oui-shadow-value);
45
63
  padding: 0.5em 0.75em;
46
- margin: 0 0.75em 0 0;
47
- background-color: var(--oui-gray-1);
48
- border: 1px solid var(--oui-gray-3);
64
+ display: inline-flex;
65
+ flex-flow: row wrap;
66
+ gap: 0.75em;
67
+ align-items: center;
49
68
  border-radius: 0.25em;
50
- box-shadow: inset 0 1px 0 0 var(--oui-gray-0), 0 1px 2px 0 rgba(0, 0, 0, 0.125);
51
- color: var(--oui-gray-8);
52
- font-size: 0.75em;
53
- line-height: 1;
69
+ background-color: color-mix(in oklab, var(--oui-background-value, var(--oui-gray-2)), transparent var(--oui-background-percentage));
70
+ outline: 4px solid color-mix(in oklab, var(--oui-outline-value, var(--oui-gray-6)), transparent var(--oui-outline-percentage));
71
+ border: none;
72
+ color: color-mix(in oklab, var(--oui-foreground-value, var(--oui-gray-8)), transparent var(--oui-foreground-percentage));
73
+ line-height: 1.25;
54
74
  transition: 0.125s ease-in-out;
75
+ --oui-background-value: var(--oui-grey-2);
76
+ --oui-outline-value: var(--oui-grey-6);
77
+ margin: 0 0.75em 0 0;
78
+ font-size: 0.75em;
55
79
  cursor: pointer;
56
80
  }
57
81
  :where(.oui-input:is([type=range i])) {
@@ -61,274 +85,410 @@
61
85
  outline: none;
62
86
  }
63
87
  :where(.oui-input:is([type=range i]))::-moz-range-track {
64
- outline: 4px solid transparent;
88
+ --oui-background-percentage: 0%;
89
+ --oui-foreground-percentage: 0%;
90
+ --oui-outline-percentage: 100%;
91
+ --oui-outline-value: var(--oui-blue-6);
92
+ outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
65
93
  outline-offset: 0;
66
- background-color: var(--oui-absolute);
67
- box-shadow: inset 0 1px 2px 0 color-mix(in oklab, var(--oui-gray-10), transparent 80%);
68
94
  transition: 0.125s ease-in-out;
95
+ background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
96
+ border: 1px solid var(--oui-border-value, var(--oui-gray-3));
97
+ box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
98
+ color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
99
+ -webkit-text-fill-color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
69
100
  -moz-appearance: none;
70
101
  appearance: none;
71
102
  width: 100%;
72
103
  height: 0.75em;
73
- border: 1px solid var(--oui-gray-3);
74
104
  border-radius: 0.75em;
75
105
  position: relative;
76
106
  }
77
107
  :where(.oui-input:is([type=range i]))::-ms-track {
78
- outline: 4px solid transparent;
108
+ --oui-background-percentage: 0%;
109
+ --oui-foreground-percentage: 0%;
110
+ --oui-outline-percentage: 100%;
111
+ --oui-outline-value: var(--oui-blue-6);
112
+ outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
79
113
  outline-offset: 0;
80
- background-color: var(--oui-absolute);
81
- box-shadow: inset 0 1px 2px 0 color-mix(in oklab, var(--oui-gray-10), transparent 80%);
82
114
  transition: 0.125s ease-in-out;
115
+ background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
116
+ border: 1px solid var(--oui-border-value, var(--oui-gray-3));
117
+ box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
118
+ color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
119
+ -webkit-text-fill-color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
83
120
  appearance: none;
84
121
  width: 100%;
85
122
  height: 0.75em;
86
- border: 1px solid var(--oui-gray-3);
87
123
  border-radius: 0.75em;
88
124
  position: relative;
89
125
  }
90
126
  :where(.oui-input:is([type=range i]))::-webkit-slider-runnable-track {
91
- outline: 4px solid transparent;
127
+ --oui-background-percentage: 0%;
128
+ --oui-foreground-percentage: 0%;
129
+ --oui-outline-percentage: 100%;
130
+ --oui-outline-value: var(--oui-blue-6);
131
+ outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
92
132
  outline-offset: 0;
93
- background-color: var(--oui-absolute);
94
- box-shadow: inset 0 1px 2px 0 color-mix(in oklab, var(--oui-gray-10), transparent 80%);
95
133
  transition: 0.125s ease-in-out;
134
+ background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
135
+ border: 1px solid var(--oui-border-value, var(--oui-gray-3));
136
+ box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
137
+ color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
138
+ -webkit-text-fill-color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
96
139
  -webkit-appearance: none;
97
140
  appearance: none;
98
141
  width: 100%;
99
142
  height: 0.75em;
100
- border: 1px solid var(--oui-gray-3);
101
143
  border-radius: 0.75em;
102
144
  position: relative;
103
145
  }
104
146
  :where(.oui-input:is([type=range i]))::-moz-range-thumb {
147
+ --oui-background-percentage: 0%;
148
+ --oui-background-value: var(--oui-blue-6);
149
+ --oui-outline-percentage: 100%;
150
+ --oui-outline-value: var(--oui-blue-6);
151
+ outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
152
+ outline-offset: 0;
153
+ transition: 0.125s ease-in-out;
105
154
  -moz-appearance: none;
106
155
  appearance: none;
107
156
  width: 1.25em;
108
157
  height: 1.25em;
109
- background-color: var(--oui-blue-6);
110
- outline: 4px solid transparent;
158
+ background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
111
159
  border: 2px solid var(--oui-absolute);
112
160
  border-radius: 1.25em;
113
161
  box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.125);
114
- -moz-transition: 0.125s ease-in-out;
115
- transition: 0.125s ease-in-out;
116
162
  cursor: pointer;
117
163
  }
118
164
  :where(.oui-input:is([type=range i]))::-ms-thumb {
165
+ --oui-background-percentage: 0%;
166
+ --oui-background-value: var(--oui-blue-6);
167
+ --oui-outline-percentage: 100%;
168
+ --oui-outline-value: var(--oui-blue-6);
169
+ outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
170
+ outline-offset: 0;
171
+ transition: 0.125s ease-in-out;
119
172
  appearance: none;
120
173
  width: 1.25em;
121
174
  height: 1.25em;
122
- background-color: var(--oui-blue-6);
123
- outline: 4px solid transparent;
175
+ background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
124
176
  border: 2px solid var(--oui-absolute);
125
177
  border-radius: 1.25em;
126
178
  box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.125);
127
- -ms-transition: 0.125s ease-in-out;
128
- transition: 0.125s ease-in-out;
129
179
  cursor: pointer;
130
180
  }
131
181
  :where(.oui-input:is([type=range i]))::-webkit-slider-thumb {
182
+ --oui-background-percentage: 0%;
183
+ --oui-background-value: var(--oui-blue-6);
184
+ --oui-outline-percentage: 100%;
185
+ --oui-outline-value: var(--oui-blue-6);
186
+ outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
187
+ outline-offset: 0;
188
+ transition: 0.125s ease-in-out;
132
189
  -webkit-appearance: none;
133
190
  appearance: none;
134
191
  width: 1.25em;
135
192
  height: 1.25em;
136
- background-color: var(--oui-blue-6);
137
- outline: 4px solid transparent;
193
+ background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
138
194
  border: 2px solid var(--oui-absolute);
139
195
  border-radius: 1.25em;
140
196
  box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.125);
141
- -webkit-transition: 0.125s ease-in-out;
142
- transition: 0.125s ease-in-out;
143
197
  cursor: pointer;
144
198
  }
145
- :where(.oui-input.oui-validatable:not([disabled], [aria-disabled=true i]):is(:user-invalid,
146
- [aria-invalid=true i])) {
147
- outline-color: color-mix(in oklab, var(--oui-red-6), transparent 60%);
148
- border-color: var(--oui-red-6);
149
- }
150
- :where(.oui-input.oui-validatable:not([disabled], [aria-disabled=true i]):is(:user-invalid,
151
- [aria-invalid=true i]))::-moz-range-track {
152
- outline-color: color-mix(in oklab, var(--oui-red-6), transparent 60%);
153
- border-color: var(--oui-red-6);
154
- }
155
- :where(.oui-input.oui-validatable:not([disabled], [aria-disabled=true i]):is(:user-invalid,
156
- [aria-invalid=true i]))::-ms-track {
157
- outline-color: color-mix(in oklab, var(--oui-red-6), transparent 60%);
158
- border-color: var(--oui-red-6);
159
- }
160
- :where(.oui-input.oui-validatable:not([disabled], [aria-disabled=true i]):is(:user-invalid,
161
- [aria-invalid=true i]))::-webkit-slider-runnable-track {
162
- outline-color: color-mix(in oklab, var(--oui-red-6), transparent 60%);
163
- border-color: var(--oui-red-6);
199
+ :where(.oui-input:is([type=range i]))::-webkit-slider-thumb {
200
+ position: relative;
201
+ top: 50%;
202
+ transform: translateY(-50%);
164
203
  }
165
- :where(.oui-input.oui-validatable:not([disabled], [aria-disabled=true i]):is(:user-invalid,
204
+ :where(.oui-input.oui-validatable:not([disabled],
205
+ [readonly],
206
+ [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
207
+ [aria-invalid=true i])) {
208
+ --oui-border-value: var(--oui-red-5);
209
+ --oui-foreground-value: var(--oui-red-9);
210
+ --oui-outline-percentage: 82.5%;
211
+ --oui-outline-value: var(--oui-red-6);
212
+ }
213
+ :where(.oui-input.oui-validatable:not([disabled],
214
+ [readonly],
215
+ [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
166
216
  [aria-invalid=true i]))::file-selector-button {
167
- background-color: var(--oui-red-0);
168
- border-color: var(--oui-red-2);
169
- color: var(--oui-red-9);
217
+ --oui-background-value: var(--oui-red-2);
218
+ --oui-foreground-value: var(--oui-red-8);
219
+ --oui-outline-value: var(--oui-red-6);
170
220
  }
171
- :where(.oui-input.oui-validatable:not([disabled], [aria-disabled=true i]):is(:user-invalid,
221
+ :where(.oui-input.oui-validatable:not([disabled],
222
+ [readonly],
223
+ [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
172
224
  [aria-invalid=true i]))::-moz-range-thumb {
173
- background-color: var(--oui-red-6);
225
+ --oui-background-value: var(--oui-red-6);
174
226
  }
175
- :where(.oui-input.oui-validatable:not([disabled], [aria-disabled=true i]):is(:user-invalid,
227
+ :where(.oui-input.oui-validatable:not([disabled],
228
+ [readonly],
229
+ [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
176
230
  [aria-invalid=true i]))::-ms-thumb {
177
- background-color: var(--oui-red-6);
231
+ --oui-background-value: var(--oui-red-6);
178
232
  }
179
- :where(.oui-input.oui-validatable:not([disabled], [aria-disabled=true i]):is(:user-invalid,
233
+ :where(.oui-input.oui-validatable:not([disabled],
234
+ [readonly],
235
+ [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
180
236
  [aria-invalid=true i]))::-webkit-slider-thumb {
181
- background-color: var(--oui-red-6);
182
- }
183
- :where(.oui-input.oui-validatable:not([disabled], [aria-disabled=true i]):is(:user-valid,
184
- [aria-invalid=false i])) {
185
- outline-color: color-mix(in oklab, var(--oui-green-6), transparent 60%);
186
- border-color: var(--oui-green-6);
187
- }
188
- :where(.oui-input.oui-validatable:not([disabled], [aria-disabled=true i]):is(:user-valid,
189
- [aria-invalid=false i]))::-moz-range-track {
190
- outline-color: color-mix(in oklab, var(--oui-green-6), transparent 60%);
191
- border-color: var(--oui-green-6);
192
- }
193
- :where(.oui-input.oui-validatable:not([disabled], [aria-disabled=true i]):is(:user-valid,
194
- [aria-invalid=false i]))::-ms-track {
195
- outline-color: color-mix(in oklab, var(--oui-green-6), transparent 60%);
196
- border-color: var(--oui-green-6);
197
- }
198
- :where(.oui-input.oui-validatable:not([disabled], [aria-disabled=true i]):is(:user-valid,
199
- [aria-invalid=false i]))::-webkit-slider-runnable-track {
200
- outline-color: color-mix(in oklab, var(--oui-green-6), transparent 60%);
201
- border-color: var(--oui-green-6);
202
- }
203
- :where(.oui-input.oui-validatable:not([disabled], [aria-disabled=true i]):is(:user-valid,
204
- [aria-invalid=false i]))::file-selector-button {
205
- background-color: var(--oui-green-0);
206
- border-color: var(--oui-green-3);
207
- color: var(--oui-green-9);
208
- }
209
- :where(.oui-input.oui-validatable:not([disabled], [aria-disabled=true i]):is(:user-valid,
210
- [aria-invalid=false i]))::-moz-range-thumb {
211
- background-color: var(--oui-green-6);
212
- }
213
- :where(.oui-input.oui-validatable:not([disabled], [aria-disabled=true i]):is(:user-valid,
214
- [aria-invalid=false i]))::-ms-thumb {
215
- background-color: var(--oui-green-6);
216
- }
217
- :where(.oui-input.oui-validatable:not([disabled], [aria-disabled=true i]):is(:user-valid,
218
- [aria-invalid=false i]))::-webkit-slider-thumb {
219
- background-color: var(--oui-green-6);
220
- }
221
- :where(.oui-input:not([disabled], [aria-disabled=true i]):focus) {
222
- outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 60%);
223
- border-color: var(--oui-blue-6);
224
- }
225
- :where(.oui-input:not([disabled], [aria-disabled=true i]):focus)::file-selector-button {
226
- background-color: var(--oui-blue-0);
227
- border-color: var(--oui-blue-3);
228
- color: var(--oui-blue-9);
229
- }
230
- :where(.oui-input:not([disabled], [aria-disabled=true i]):focus)::-moz-range-track {
231
- outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 60%);
232
- }
233
- :where(.oui-input:not([disabled], [aria-disabled=true i]):focus)::-ms-track {
234
- outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 60%);
235
- }
236
- :where(.oui-input:not([disabled], [aria-disabled=true i]):focus)::-webkit-slider-runnable-track {
237
- outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 60%);
238
- }
239
- :where(.oui-input:not([disabled], [aria-disabled=true i]):focus)::-moz-range-thumb {
240
- outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 60%);
241
- }
242
- :where(.oui-input:not([disabled], [aria-disabled=true i]):focus)::-ms-thumb {
243
- outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 60%);
237
+ --oui-background-value: var(--oui-red-6);
244
238
  }
245
- :where(.oui-input:not([disabled], [aria-disabled=true i]):focus)::-webkit-slider-thumb {
246
- outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 60%);
239
+ :where(.oui-input.oui-validatable:not([disabled],
240
+ [readonly],
241
+ [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
242
+ [aria-invalid=true i]))::-moz-range-track {
243
+ --oui-border-value: var(--oui-red-5);
244
+ --oui-foreground-value: var(--oui-red-9);
245
+ --oui-outline-percentage: 82.5%;
246
+ --oui-outline-value: var(--oui-red-6);
247
+ }
248
+ :where(.oui-input.oui-validatable:not([disabled],
249
+ [readonly],
250
+ [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
251
+ [aria-invalid=true i]))::-ms-track {
252
+ --oui-border-value: var(--oui-red-5);
253
+ --oui-foreground-value: var(--oui-red-9);
254
+ --oui-outline-percentage: 82.5%;
255
+ --oui-outline-value: var(--oui-red-6);
256
+ }
257
+ :where(.oui-input.oui-validatable:not([disabled],
258
+ [readonly],
259
+ [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
260
+ [aria-invalid=true i]))::-webkit-slider-runnable-track {
261
+ --oui-border-value: var(--oui-red-5);
262
+ --oui-foreground-value: var(--oui-red-9);
263
+ --oui-outline-percentage: 82.5%;
264
+ --oui-outline-value: var(--oui-red-6);
265
+ }
266
+ :where(.oui-input.oui-validatable:not([disabled],
267
+ [readonly],
268
+ [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
269
+ [aria-invalid=true i])) > option:checked {
270
+ background-color: var(--oui-red-2);
271
+ color: var(--oui-red-9);
247
272
  }
248
- :where(.oui-input:not([disabled], [aria-disabled=true i]):focus)::-moz-range-track {
249
- border-color: var(--oui-blue-6);
273
+ :where(.oui-input.oui-validatable:not([disabled],
274
+ [readonly],
275
+ [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i])) {
276
+ --oui-border-value: var(--oui-green-5);
277
+ --oui-foreground-value: var(--oui-green-9);
278
+ --oui-outline-percentage: 82.5%;
279
+ --oui-outline-value: var(--oui-green-6);
280
+ }
281
+ :where(.oui-input.oui-validatable:not([disabled],
282
+ [readonly],
283
+ [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::file-selector-button {
284
+ --oui-background-value: var(--oui-green-2);
285
+ --oui-foreground-value: var(--oui-green-8);
286
+ --oui-outline-value: var(--oui-green-6);
287
+ }
288
+ :where(.oui-input.oui-validatable:not([disabled],
289
+ [readonly],
290
+ [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-moz-range-track {
291
+ --oui-border-value: var(--oui-green-5);
292
+ --oui-foreground-value: var(--oui-green-9);
293
+ --oui-outline-percentage: 82.5%;
294
+ --oui-outline-value: var(--oui-green-6);
295
+ }
296
+ :where(.oui-input.oui-validatable:not([disabled],
297
+ [readonly],
298
+ [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-ms-track {
299
+ --oui-border-value: var(--oui-green-5);
300
+ --oui-foreground-value: var(--oui-green-9);
301
+ --oui-outline-percentage: 82.5%;
302
+ --oui-outline-value: var(--oui-green-6);
303
+ }
304
+ :where(.oui-input.oui-validatable:not([disabled],
305
+ [readonly],
306
+ [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-webkit-slider-runnable-track {
307
+ --oui-border-value: var(--oui-green-5);
308
+ --oui-foreground-value: var(--oui-green-9);
309
+ --oui-outline-percentage: 82.5%;
310
+ --oui-outline-value: var(--oui-green-6);
311
+ }
312
+ :where(.oui-input.oui-validatable:not([disabled],
313
+ [readonly],
314
+ [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-moz-range-thumb {
315
+ --oui-background-value: var(--oui-green-6);
316
+ }
317
+ :where(.oui-input.oui-validatable:not([disabled],
318
+ [readonly],
319
+ [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-ms-thumb {
320
+ --oui-background-value: var(--oui-green-6);
321
+ }
322
+ :where(.oui-input.oui-validatable:not([disabled],
323
+ [readonly],
324
+ [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-webkit-slider-thumb {
325
+ --oui-background-value: var(--oui-green-6);
326
+ }
327
+ :where(.oui-input.oui-validatable:not([disabled],
328
+ [readonly],
329
+ [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i])) > option:checked {
330
+ background-color: var(--oui-green-2);
331
+ color: var(--oui-green-9);
250
332
  }
251
- :where(.oui-input:not([disabled], [aria-disabled=true i]):focus)::-ms-track {
252
- border-color: var(--oui-blue-6);
333
+ :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]))::-webkit-calendar-picker-indicator {
334
+ outline: 4px solid transparent;
335
+ outline-offset: 2px;
336
+ border-radius: 2em;
337
+ -webkit-transition: 0.125s ease-in-out;
338
+ transition: 0.125s ease-in-out;
339
+ cursor: pointer;
253
340
  }
254
- :where(.oui-input:not([disabled], [aria-disabled=true i]):focus)::-webkit-slider-runnable-track {
255
- border-color: var(--oui-blue-6);
341
+ @media (hover: hover) {
342
+ :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]))::-webkit-calendar-picker-indicator:hover {
343
+ outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 75%);
344
+ }
256
345
  }
257
- :where(.oui-input:not([disabled], [aria-disabled=true i]):focus)::-moz-range-thumb {
258
- background-color: var(--oui-blue-6);
346
+ :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]))::-webkit-calendar-picker-indicator:focus {
347
+ outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 75%);
348
+ }
349
+ :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus), :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within) {
350
+ --oui-border-value: var(--oui-blue-5);
351
+ --oui-foreground-value: inherit;
352
+ --oui-outline-percentage: 75%;
353
+ --oui-outline-value: var(--oui-blue-6);
354
+ }
355
+ :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::file-selector-button, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::file-selector-button {
356
+ --oui-background-value: var(--oui-blue-2);
357
+ --oui-foreground-value: var(--oui-blue-8);
358
+ --oui-outline-value: var(--oui-blue-6);
359
+ }
360
+ :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::-moz-range-thumb, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::-moz-range-thumb {
361
+ --oui-border-value: var(--oui-blue-5);
362
+ --oui-foreground-value: inherit;
363
+ --oui-outline-percentage: 75%;
364
+ --oui-outline-value: var(--oui-blue-6);
365
+ }
366
+ :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::-ms-thumb, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::-ms-thumb {
367
+ --oui-border-value: var(--oui-blue-5);
368
+ --oui-foreground-value: inherit;
369
+ --oui-outline-percentage: 75%;
370
+ --oui-outline-value: var(--oui-blue-6);
371
+ }
372
+ :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::-webkit-slider-thumb, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::-webkit-slider-thumb {
373
+ --oui-border-value: var(--oui-blue-5);
374
+ --oui-foreground-value: inherit;
375
+ --oui-outline-percentage: 75%;
376
+ --oui-outline-value: var(--oui-blue-6);
377
+ }
378
+ :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::-moz-range-track, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::-moz-range-track {
379
+ --oui-border-value: var(--oui-blue-5);
380
+ --oui-foreground-value: inherit;
381
+ --oui-outline-percentage: 75%;
382
+ --oui-outline-value: var(--oui-blue-6);
383
+ }
384
+ :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::-ms-track, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::-ms-track {
385
+ --oui-border-value: var(--oui-blue-5);
386
+ --oui-foreground-value: inherit;
387
+ --oui-outline-percentage: 75%;
388
+ --oui-outline-value: var(--oui-blue-6);
389
+ }
390
+ :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::-webkit-slider-runnable-track, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::-webkit-slider-runnable-track {
391
+ --oui-border-value: var(--oui-blue-5);
392
+ --oui-foreground-value: inherit;
393
+ --oui-outline-percentage: 75%;
394
+ --oui-outline-value: var(--oui-blue-6);
395
+ }
396
+ :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::-moz-range-thumb, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::-moz-range-thumb {
397
+ --oui-background-value: var(--oui-blue-6);
259
398
  box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.25);
260
399
  }
261
- :where(.oui-input:not([disabled], [aria-disabled=true i]):focus)::-ms-thumb {
262
- background-color: var(--oui-blue-6);
400
+ :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::-ms-thumb, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::-ms-thumb {
401
+ --oui-background-value: var(--oui-blue-6);
263
402
  box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.25);
264
403
  }
265
- :where(.oui-input:not([disabled], [aria-disabled=true i]):focus)::-webkit-slider-thumb {
266
- background-color: var(--oui-blue-6);
404
+ :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus)::-webkit-slider-thumb, :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):focus-within)::-webkit-slider-thumb {
405
+ --oui-background-value: var(--oui-blue-6);
267
406
  box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.25);
268
407
  }
269
408
  @media (hover: hover) {
270
- :where(.oui-input:not([disabled], [aria-disabled=true i]):hover) {
271
- outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 80%);
272
- border-color: var(--oui-blue-6);
409
+ :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover) {
410
+ --oui-border-value: var(--oui-blue-4);
411
+ --oui-foreground-percentage: 0%;
412
+ --oui-foreground-value: inherit;
413
+ --oui-outline-percentage: 90%;
414
+ --oui-outline-value: var(--oui-blue-6);
273
415
  }
274
- :where(.oui-input:not([disabled], [aria-disabled=true i]):hover)::-moz-range-track {
275
- outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 80%);
276
- border-color: var(--oui-blue-6);
416
+ :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover)::file-selector-button {
417
+ --oui-background-value: var(--oui-blue-2);
418
+ --oui-foreground-value: var(--oui-blue-8);
419
+ --oui-outline-value: var(--oui-blue-6);
277
420
  }
278
- :where(.oui-input:not([disabled], [aria-disabled=true i]):hover)::-ms-track {
279
- outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 80%);
280
- border-color: var(--oui-blue-6);
421
+ :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover)::-moz-range-thumb {
422
+ --oui-background-value: var(--oui-blue-5);
281
423
  }
282
- :where(.oui-input:not([disabled], [aria-disabled=true i]):hover)::-webkit-slider-runnable-track {
283
- outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 80%);
284
- border-color: var(--oui-blue-6);
424
+ :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover)::-ms-thumb {
425
+ --oui-background-value: var(--oui-blue-5);
285
426
  }
286
- :where(.oui-input:not([disabled], [aria-disabled=true i]):hover)::file-selector-button {
287
- background-color: var(--oui-blue-0);
288
- border-color: var(--oui-blue-3);
289
- color: var(--oui-blue-9);
427
+ :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover)::-webkit-slider-thumb {
428
+ --oui-background-value: var(--oui-blue-5);
290
429
  }
291
- :where(.oui-input:not([disabled], [aria-disabled=true i]):hover)::-moz-range-thumb {
292
- background-color: var(--oui-blue-5);
430
+ :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover)::-moz-range-track {
431
+ --oui-border-value: var(--oui-blue-4);
432
+ --oui-foreground-percentage: 0%;
433
+ --oui-foreground-value: inherit;
434
+ --oui-outline-percentage: 90%;
435
+ --oui-outline-value: var(--oui-blue-6);
293
436
  }
294
- :where(.oui-input:not([disabled], [aria-disabled=true i]):hover)::-ms-thumb {
295
- background-color: var(--oui-blue-5);
437
+ :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover)::-ms-track {
438
+ --oui-border-value: var(--oui-blue-4);
439
+ --oui-foreground-percentage: 0%;
440
+ --oui-foreground-value: inherit;
441
+ --oui-outline-percentage: 90%;
442
+ --oui-outline-value: var(--oui-blue-6);
296
443
  }
297
- :where(.oui-input:not([disabled], [aria-disabled=true i]):hover)::-webkit-slider-thumb {
298
- background-color: var(--oui-blue-5);
444
+ :where(.oui-input:not([disabled], [readonly], [aria-disabled=true i]):hover)::-webkit-slider-runnable-track {
445
+ --oui-border-value: var(--oui-blue-4);
446
+ --oui-foreground-percentage: 0%;
447
+ --oui-foreground-value: inherit;
448
+ --oui-outline-percentage: 90%;
449
+ --oui-outline-value: var(--oui-blue-6);
299
450
  }
300
451
  }
301
- :where(.oui-input[readonly]) {
302
- color: color-mix(in oklab, currentColor, transparent 12.5%);
303
- }
304
- :where(.oui-input[disabled], .oui-input[aria-disabled=true i]) {
305
- background-color: color-mix(in oklab, var(--oui-gray-0), transparent 50%);
306
- color: color-mix(in oklab, currentColor, transparent 25%);
452
+ :where(.oui-input[disabled], .oui-input[readonly], .oui-input[aria-disabled=true i]) {
453
+ --oui-foreground-percentage: 25%;
307
454
  font-style: italic;
308
455
  }
309
- :where(.oui-input[disabled], .oui-input[aria-disabled=true i])::-moz-range-track {
310
- background-color: color-mix(in oklab, var(--oui-gray-0), transparent 50%);
311
- color: color-mix(in oklab, currentColor, transparent 25%);
312
- font-style: italic;
456
+ :where(.oui-input[disabled], .oui-input[readonly], .oui-input[aria-disabled=true i])::file-selector-button {
457
+ --oui-background-value: var(--oui-gray-1);
458
+ cursor: default;
313
459
  }
314
- :where(.oui-input[disabled], .oui-input[aria-disabled=true i])::-ms-track {
315
- background-color: color-mix(in oklab, var(--oui-gray-0), transparent 50%);
316
- color: color-mix(in oklab, currentColor, transparent 25%);
317
- font-style: italic;
460
+ :where(.oui-input:is([disabled], [readonly], [aria-disabled=true i]):focus) {
461
+ --oui-outline-percentage: 75%;
318
462
  }
319
- :where(.oui-input[disabled], .oui-input[aria-disabled=true i])::-webkit-slider-runnable-track {
320
- background-color: color-mix(in oklab, var(--oui-gray-0), transparent 50%);
321
- color: color-mix(in oklab, currentColor, transparent 25%);
322
- font-style: italic;
463
+ :where(.oui-input[disabled], .oui-input[aria-disabled=true i]) {
464
+ --oui-background-percentage: 50%;
323
465
  }
324
466
  :where(.oui-input[disabled], .oui-input[aria-disabled=true i])::-moz-range-thumb {
325
- background-color: var(--oui-gray-1);
467
+ --oui-background-value: var(--oui-gray-1);
468
+ cursor: default;
326
469
  }
327
470
  :where(.oui-input[disabled], .oui-input[aria-disabled=true i])::-ms-thumb {
328
- background-color: var(--oui-gray-1);
471
+ --oui-background-value: var(--oui-gray-1);
472
+ cursor: default;
329
473
  }
330
474
  :where(.oui-input[disabled], .oui-input[aria-disabled=true i])::-webkit-slider-thumb {
331
- background-color: var(--oui-gray-1);
475
+ --oui-background-value: var(--oui-gray-1);
476
+ cursor: default;
477
+ }
478
+ :where(.oui-input[disabled], .oui-input[aria-disabled=true i])::-moz-range-track {
479
+ --oui-background-percentage: 50%;
480
+ --oui-background-value: var(--oui-gray-0);
481
+ }
482
+ :where(.oui-input[disabled], .oui-input[aria-disabled=true i])::-ms-track {
483
+ --oui-background-percentage: 50%;
484
+ --oui-background-value: var(--oui-gray-0);
485
+ }
486
+ :where(.oui-input[disabled], .oui-input[aria-disabled=true i])::-webkit-slider-runnable-track {
487
+ --oui-background-percentage: 50%;
488
+ --oui-background-value: var(--oui-gray-0);
489
+ }
490
+ :where(.oui-input[disabled], .oui-input[aria-disabled=true i])::-webkit-calendar-picker-indicator {
491
+ opacity: 0.5;
332
492
  }
333
493
 
334
494
  :where(select.oui-input, .oui-input[list]) {
@@ -349,10 +509,10 @@
349
509
  margin: 0 0.75em 0 0;
350
510
  }
351
511
  :where(select.oui-input:is([multiple]) > option:nth-of-type(2n)) {
352
- background-color: color-mix(in oklab, var(--oui-blue-0), transparent 67%);
512
+ background-color: color-mix(in oklab, var(--oui-blue-0), transparent 50%);
353
513
  }
354
514
  :where(select.oui-input:is([multiple]) > option:checked) {
355
- background-color: var(--oui-blue-1);
515
+ background-color: var(--oui-blue-2);
356
516
  color: var(--oui-blue-9);
357
517
  }
358
518
  :where(select.oui-input:is([multiple]) > option:checked)::before {
@@ -376,7 +536,7 @@
376
536
  transition: 0.125s ease-in-out;
377
537
  }
378
538
  @media (hover: hover) {
379
- :where(:where(.oui-label):hover) {
539
+ :where(:where(.oui-label)[for]:hover) {
380
540
  color: var(--oui-blue-8);
381
541
  }
382
542
  }
@@ -388,18 +548,34 @@
388
548
  }
389
549
 
390
550
  :where(.oui-switch, .oui-toggle) {
551
+ --oui-background-percentage: 50%;
552
+ --oui-background-value: var(--oui-gray-1);
553
+ --oui-border-value: var(--oui-gray-3);
554
+ --oui-foreground-percentage: 0%;
555
+ --oui-foreground-value: var(--oui-gray-8);
556
+ --oui-outline-percentage: 100%;
557
+ --oui-outline-value: var(--oui-blue-6);
558
+ --oui-shadow-percentage: 85%;
559
+ --oui-shadow-value: var(--oui-gray-10);
391
560
  position: relative;
392
561
  cursor: pointer;
393
562
  }
394
563
  :where(.oui-switch, .oui-toggle)::before, :where(.oui-switch, .oui-toggle)::after {
564
+ display: inline-block;
395
565
  font-family: system-ui, sans-serif;
396
566
  position: absolute;
397
567
  transition: 0.125s ease-in-out;
398
568
  pointer-events: none;
399
569
  }
400
570
  :where(.oui-switch, .oui-toggle)::before {
401
- outline: 4px solid transparent;
571
+ background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
572
+ outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
402
573
  outline-offset: 0;
574
+ border: 1px solid var(--oui-border-value);
575
+ box-shadow: inset 0 1px 2px 0 color-mix(in oklab, var(--oui-shadow-value), transparent var(--oui-shadow-percentage));
576
+ }
577
+ :where(.oui-switch, .oui-toggle)::after {
578
+ color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
403
579
  }
404
580
 
405
581
  :where(.oui-switch) {
@@ -409,9 +585,6 @@
409
585
  content: "";
410
586
  width: 2.5em;
411
587
  height: 1.5em;
412
- display: inline-block;
413
- background-color: var(--oui-gray-0);
414
- border: 1px solid var(--oui-gray-3);
415
588
  border-radius: 3em;
416
589
  right: 0;
417
590
  }
@@ -422,7 +595,6 @@
422
595
  background-color: var(--oui-absolute);
423
596
  border-radius: 1.5em;
424
597
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.125);
425
- color: var(--oui-gray-8);
426
598
  font-size: 0.75em;
427
599
  font-weight: bold;
428
600
  line-height: 1.5em;
@@ -430,28 +602,34 @@
430
602
  top: 0.25em;
431
603
  right: 1.5em;
432
604
  }
605
+ :where(.oui-switch:has(input:checked)) {
606
+ --oui-foreground-percentage: 0%;
607
+ --oui-foreground-value: var(--oui-blue-8);
608
+ }
433
609
  :where(.oui-switch:has(input:checked))::after {
434
610
  content: attr(oui-on, "✓");
435
611
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.25);
436
- color: var(--oui-blue-8);
437
612
  right: 0.25em;
438
613
  }
439
614
 
440
615
  :where(.oui-toggle) {
616
+ --oui-background-percentage: 100%;
617
+ --oui-border-value: var(--oui-gray-4);
441
618
  padding: 0 0 0 2em;
442
619
  }
443
620
  :where(.oui-toggle)::before {
444
621
  content: "";
445
622
  width: 1.5em;
446
623
  height: 1.5em;
447
- display: inline-block;
448
- background-color: transparent;
449
- border: 1px solid var(--oui-gray-4);
450
624
  inset: 0 auto auto 0;
451
625
  }
452
626
  :where(.oui-toggle)::after {
453
627
  opacity: 0;
454
628
  }
629
+ :where(.oui-toggle:has(input[type=checkbox i])) {
630
+ --oui-foreground-percentage: 0%;
631
+ --oui-foreground-value: white;
632
+ }
455
633
  :where(.oui-toggle:has(input[type=checkbox i]))::before {
456
634
  border-radius: 0.25em;
457
635
  }
@@ -459,13 +637,15 @@
459
637
  content: attr(oui-on, "✓");
460
638
  width: 1.5em;
461
639
  height: 1.5em;
462
- color: white;
463
640
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
464
641
  font-weight: bold;
465
642
  line-height: 1.5em;
466
643
  text-align: center;
467
644
  inset: 0 auto auto 0;
468
645
  }
646
+ :where(.oui-toggle:has(input[type=radio i])) {
647
+ position: relative;
648
+ }
469
649
  :where(.oui-toggle:has(input[type=radio i]))::before, :where(.oui-toggle:has(input[type=radio i]))::after {
470
650
  border-radius: 50%;
471
651
  }
@@ -482,47 +662,52 @@
482
662
  }
483
663
 
484
664
  :where(.oui-switch:has(input:checked),
485
- .oui-toggle:has(input:checked))::before {
486
- background-color: var(--oui-blue-6);
487
- border-color: transparent;
488
- }
489
- :where(.oui-switch:has(input:not([disabled], [aria-disabled=true i])):focus-within,
490
- .oui-toggle:has(input:not([disabled], [aria-disabled=true i])):focus-within) {
665
+ .oui-toggle:has(input:checked)) {
666
+ --oui-background-percentage: 25%;
667
+ --oui-background-value: var(--oui-blue-6);
668
+ --oui-border-value: var(--oui-blue-6);
669
+ --oui-shadow-percentage: 50%;
670
+ --oui-shadow-value: var(--oui-blue-8);
671
+ }
672
+ :where(.oui-switch:focus-within,
673
+ .oui-toggle:focus-within) {
674
+ --oui-border-value: var(--oui-blue-6);
675
+ --oui-outline-percentage: 75%;
491
676
  color: var(--oui-blue-8);
492
677
  }
493
678
  :where(.oui-switch:has(input:not([disabled], [aria-disabled=true i])):focus-within,
494
- .oui-toggle:has(input:not([disabled], [aria-disabled=true i])):focus-within)::before {
495
- outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 60%);
496
- border-color: var(--oui-absolute);
679
+ .oui-toggle:has(input:not([disabled], [aria-disabled=true i])):focus-within) {
680
+ --oui-background-percentage: 50%;
497
681
  }
498
682
  @media (hover: hover) {
499
683
  :where(.oui-switch:has(input:not([disabled], [aria-disabled=true i])):hover,
500
684
  .oui-toggle:has(input:not([disabled], [aria-disabled=true i])):hover) {
685
+ --oui-border-value: var(--oui-blue-4);
686
+ --oui-outline-percentage: 90%;
687
+ --oui-outline-value: var(--oui-blue-6);
501
688
  color: var(--oui-blue-8);
502
689
  }
503
- :where(.oui-switch:has(input:not([disabled], [aria-disabled=true i])):hover,
504
- .oui-toggle:has(input:not([disabled], [aria-disabled=true i])):hover)::before {
505
- outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 80%);
506
- border-color: var(--oui-blue-6);
507
- }
508
690
  :where(.oui-switch:has(input:not([disabled], [aria-disabled=true i]):is(:checked)):hover,
509
- .oui-toggle:has(input:not([disabled], [aria-disabled=true i]):is(:checked)):hover)::before {
510
- background-color: color-mix(in oklab, var(--oui-blue-6), transparent 40%);
691
+ .oui-toggle:has(input:not([disabled], [aria-disabled=true i]):is(:checked)):hover) {
692
+ --oui-background-percentage: 50%;
693
+ --oui-background-value: var(--oui-blue-6);
511
694
  }
512
695
  }
513
696
  :where(.oui-switch:has(input[disabled], input[aria-disabled=true i]),
514
697
  .oui-toggle:has(input[disabled], input[aria-disabled=true i])) {
515
- color: color-mix(in oklab, currentColor, transparent 25%);
698
+ --oui-background-percentage: 50%;
699
+ --oui-background-value: var(--oui-gray-0);
700
+ --oui-border-value: var(--oui-gray-3);
701
+ --oui-foreground-percentage: 25%;
702
+ --oui-foreground-value: currentColor;
703
+ color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
704
+ font-style: italic;
516
705
  cursor: default;
517
706
  }
518
707
  :where(.oui-switch:has(input[disabled], input[aria-disabled=true i]),
519
- .oui-toggle:has(input[disabled], input[aria-disabled=true i]))::after {
520
- color: color-mix(in oklab, currentColor, transparent);
521
- }
522
- :where(.oui-switch:has(input[disabled], input[aria-disabled=true i]),
708
+ .oui-toggle:has(input[disabled], input[aria-disabled=true i]))::after, :where(.oui-switch:has(input[disabled], input[aria-disabled=true i]),
523
709
  .oui-toggle:has(input[disabled], input[aria-disabled=true i]))::before {
524
- background-color: color-mix(in oklab, var(--oui-gray-0), transparent 50%);
525
- border-color: var(--oui-gray-3);
710
+ font-style: normal;
526
711
  }
527
712
  :where(.oui-switch:has(input[disabled], input[aria-disabled=true i]),
528
713
  .oui-toggle:has(input[disabled], input[aria-disabled=true i]))::after {