@rolemodel/optics 1.12.0 → 1.13.1

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 (19) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/dist/css/optics.css +1546 -1157
  3. package/dist/css/optics.css.map +1 -1
  4. package/dist/scss/addons/panel.css +65 -0
  5. package/dist/scss/addons/{tom-select.scss → tom-select.css} +13 -15
  6. package/dist/scss/components/{icon.scss → icon.css} +10 -8
  7. package/dist/scss/core/{base.scss → base.css} +3 -3
  8. package/dist/scss/core/tokens/{base_tokens.scss → base_tokens.css} +102 -160
  9. package/dist/scss/core/tokens/index.scss +0 -1
  10. package/dist/scss/core/tokens/scale_color_tokens.css +1498 -0
  11. package/dist/scss/core/{utilities.scss → utilities.css} +20 -18
  12. package/dist/scss/recipes/{aligned-header.scss → aligned-header.css} +2 -6
  13. package/dist/tokens/tokens.json +14 -566
  14. package/package.json +1 -1
  15. package/public/design-tokens.source.json +1 -0
  16. package/dist/scss/addons/panel.scss +0 -61
  17. package/dist/scss/core/tokens/dark_mode_tokens.scss +0 -479
  18. package/dist/scss/core/tokens/scale_color_tokens.scss +0 -468
  19. /package/dist/scss/core/{layout.scss → layout.css} +0 -0
package/dist/scss/core/tokens/scale_color_tokens.css ADDED
@@ -0,0 +1,1498 @@
1
+ :root {
2
+ /* Enable light and dark mode switching */
3
+ color-scheme: light dark;
4
+
5
+ /*
6
+ Semantic Scales: plus adds luminosity, minus removes luminosity
7
+ This borrows from the photography concept of Aperture f-stops.
8
+ https://www.adobe.com/creativecloud/photography/discover/f-stop.html
9
+ */
10
+
11
+ /**
12
+ * @tokens Primary Colors
13
+ * @presenter Color
14
+ */
15
+ --op-color-primary-original: hsl(var(--op-color-primary-h) var(--op-color-primary-s) var(--op-color-primary-l));
16
+
17
+ /* Main Scale */
18
+ --op-color-primary-plus-max: light-dark(
19
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
20
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 12%)
21
+ );
22
+ --op-color-primary-plus-eight: light-dark(
23
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%),
24
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 14%)
25
+ );
26
+ --op-color-primary-plus-seven: light-dark(
27
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%),
28
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%)
29
+ );
30
+ --op-color-primary-plus-six: light-dark(
31
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%),
32
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%)
33
+ );
34
+ --op-color-primary-plus-five: light-dark(
35
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%),
36
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%)
37
+ );
38
+ --op-color-primary-plus-four: light-dark(
39
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%),
40
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%)
41
+ );
42
+ --op-color-primary-plus-three: light-dark(
43
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 70%),
44
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 29%)
45
+ );
46
+ --op-color-primary-plus-two: light-dark(
47
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%),
48
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%)
49
+ );
50
+ --op-color-primary-plus-one: light-dark(
51
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 45%),
52
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 35%)
53
+ );
54
+ --op-color-primary-base: light-dark(
55
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%),
56
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%)
57
+ );
58
+ --op-color-primary-minus-one: light-dark(
59
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 36%),
60
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%)
61
+ );
62
+ --op-color-primary-minus-two: light-dark(
63
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%),
64
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 45%)
65
+ );
66
+ --op-color-primary-minus-three: light-dark(
67
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 28%),
68
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 48%)
69
+ );
70
+ --op-color-primary-minus-four: light-dark(
71
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%),
72
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 52%)
73
+ );
74
+ --op-color-primary-minus-five: light-dark(
75
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),
76
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%)
77
+ );
78
+ --op-color-primary-minus-six: light-dark(
79
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%),
80
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%)
81
+ );
82
+ --op-color-primary-minus-seven: light-dark(
83
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%),
84
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
85
+ );
86
+ --op-color-primary-minus-eight: light-dark(
87
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%),
88
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%)
89
+ );
90
+ --op-color-primary-minus-max: light-dark(
91
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%),
92
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%)
93
+ );
94
+
95
+ /* On Scale */
96
+ --op-color-primary-on-plus-max: light-dark(
97
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%),
98
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%)
99
+ );
100
+ --op-color-primary-on-plus-max-alt: light-dark(
101
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),
102
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%)
103
+ );
104
+ --op-color-primary-on-plus-eight: light-dark(
105
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%),
106
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%)
107
+ );
108
+ --op-color-primary-on-plus-eight-alt: light-dark(
109
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%),
110
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 70%)
111
+ );
112
+ --op-color-primary-on-plus-seven: light-dark(
113
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%),
114
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
115
+ );
116
+ --op-color-primary-on-plus-seven-alt: light-dark(
117
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 28%),
118
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%)
119
+ );
120
+ --op-color-primary-on-plus-six: light-dark(
121
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%),
122
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%)
123
+ );
124
+ --op-color-primary-on-plus-six-alt: light-dark(
125
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%),
126
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%)
127
+ );
128
+ --op-color-primary-on-plus-five: light-dark(
129
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),
130
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%)
131
+ );
132
+ --op-color-primary-on-plus-five-alt: light-dark(
133
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%),
134
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%)
135
+ );
136
+ --op-color-primary-on-plus-four: light-dark(
137
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%),
138
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
139
+ );
140
+ --op-color-primary-on-plus-four-alt: light-dark(
141
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%),
142
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%)
143
+ );
144
+ --op-color-primary-on-plus-three: light-dark(
145
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),
146
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%)
147
+ );
148
+ --op-color-primary-on-plus-three-alt: light-dark(
149
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 10%),
150
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
151
+ );
152
+ --op-color-primary-on-plus-two: light-dark(
153
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%),
154
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
155
+ );
156
+ --op-color-primary-on-plus-two-alt: light-dark(
157
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 6%),
158
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%)
159
+ );
160
+ --op-color-primary-on-plus-one: light-dark(
161
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
162
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
163
+ );
164
+ --op-color-primary-on-plus-one-alt: light-dark(
165
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 95%),
166
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
167
+ );
168
+ --op-color-primary-on-base: light-dark(
169
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
170
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%)
171
+ );
172
+ --op-color-primary-on-base-alt: light-dark(
173
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%),
174
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%)
175
+ );
176
+ --op-color-primary-on-minus-one: light-dark(
177
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%),
178
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
179
+ );
180
+ --op-color-primary-on-minus-one-alt: light-dark(
181
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 82%),
182
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%)
183
+ );
184
+ --op-color-primary-on-minus-two: light-dark(
185
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%),
186
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
187
+ );
188
+ --op-color-primary-on-minus-two-alt: light-dark(
189
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%),
190
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%)
191
+ );
192
+ --op-color-primary-on-minus-three: light-dark(
193
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%),
194
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
195
+ );
196
+ --op-color-primary-on-minus-three-alt: light-dark(
197
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 74%),
198
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%)
199
+ );
200
+ --op-color-primary-on-minus-four: light-dark(
201
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%),
202
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%)
203
+ );
204
+ --op-color-primary-on-minus-four-alt: light-dark(
205
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%),
206
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%)
207
+ );
208
+ --op-color-primary-on-minus-five: light-dark(
209
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%),
210
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%)
211
+ );
212
+ --op-color-primary-on-minus-five-alt: light-dark(
213
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%),
214
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%)
215
+ );
216
+ --op-color-primary-on-minus-six: light-dark(
217
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%),
218
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%)
219
+ );
220
+ --op-color-primary-on-minus-six-alt: light-dark(
221
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 82%),
222
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%)
223
+ );
224
+ --op-color-primary-on-minus-seven: light-dark(
225
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%),
226
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%)
227
+ );
228
+ --op-color-primary-on-minus-seven-alt: light-dark(
229
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%),
230
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 34%)
231
+ );
232
+ --op-color-primary-on-minus-eight: light-dark(
233
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%),
234
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%)
235
+ );
236
+ --op-color-primary-on-minus-eight-alt: light-dark(
237
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%),
238
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%)
239
+ );
240
+ --op-color-primary-on-minus-max: light-dark(
241
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
242
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%)
243
+ );
244
+ --op-color-primary-on-minus-max-alt: light-dark(
245
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%),
246
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%)
247
+ );
248
+
249
+ /**
250
+ * @tokens Neutral Colors
251
+ * @presenter Color
252
+ */
253
+ --op-color-neutral-original: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) var(--op-color-neutral-l));
254
+
255
+ /* Main Scale */
256
+ --op-color-neutral-plus-max: light-dark(
257
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),
258
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%)
259
+ );
260
+ --op-color-neutral-plus-eight: light-dark(
261
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%),
262
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 10%)
263
+ );
264
+ --op-color-neutral-plus-seven: light-dark(
265
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 96%),
266
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 14%)
267
+ );
268
+ --op-color-neutral-plus-six: light-dark(
269
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%),
270
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%)
271
+ );
272
+ --op-color-neutral-plus-five: light-dark(
273
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%),
274
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 18%)
275
+ );
276
+ --op-color-neutral-plus-four: light-dark(
277
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),
278
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%)
279
+ );
280
+ --op-color-neutral-plus-three: light-dark(
281
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 70%),
282
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%)
283
+ );
284
+ --op-color-neutral-plus-two: light-dark(
285
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 64%),
286
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%)
287
+ );
288
+ --op-color-neutral-plus-one: light-dark(
289
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 44%),
290
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 30%)
291
+ );
292
+ --op-color-neutral-base: light-dark(
293
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%),
294
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%)
295
+ );
296
+ --op-color-neutral-minus-one: light-dark(
297
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%),
298
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%)
299
+ );
300
+ --op-color-neutral-minus-two: light-dark(
301
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%),
302
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%)
303
+ );
304
+ --op-color-neutral-minus-three: light-dark(
305
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 28%),
306
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 44%)
307
+ );
308
+ --op-color-neutral-minus-four: light-dark(
309
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%),
310
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 52%)
311
+ );
312
+ --op-color-neutral-minus-five: light-dark(
313
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%),
314
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 64%)
315
+ );
316
+ --op-color-neutral-minus-six: light-dark(
317
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%),
318
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%)
319
+ );
320
+ --op-color-neutral-minus-seven: light-dark(
321
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%),
322
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%)
323
+ );
324
+ --op-color-neutral-minus-eight: light-dark(
325
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%),
326
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
327
+ );
328
+ --op-color-neutral-minus-max: light-dark(
329
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 0%),
330
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%)
331
+ );
332
+
333
+ /* On Scale */
334
+ --op-color-neutral-on-plus-max: light-dark(
335
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 0%),
336
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%)
337
+ );
338
+ --op-color-neutral-on-plus-max-alt: light-dark(
339
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%),
340
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%)
341
+ );
342
+ --op-color-neutral-on-plus-eight: light-dark(
343
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%),
344
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
345
+ );
346
+ --op-color-neutral-on-plus-eight-alt: light-dark(
347
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 34%),
348
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%)
349
+ );
350
+ --op-color-neutral-on-plus-seven: light-dark(
351
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%),
352
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%)
353
+ );
354
+ --op-color-neutral-on-plus-seven-alt: light-dark(
355
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 28%),
356
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 58%)
357
+ );
358
+ --op-color-neutral-on-plus-six: light-dark(
359
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%),
360
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%)
361
+ );
362
+ --op-color-neutral-on-plus-six-alt: light-dark(
363
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%),
364
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%)
365
+ );
366
+ --op-color-neutral-on-plus-five: light-dark(
367
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%),
368
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%)
369
+ );
370
+ --op-color-neutral-on-plus-five-alt: light-dark(
371
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%),
372
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%)
373
+ );
374
+ --op-color-neutral-on-plus-four: light-dark(
375
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%),
376
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
377
+ );
378
+ --op-color-neutral-on-plus-four-alt: light-dark(
379
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%),
380
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 68%)
381
+ );
382
+ --op-color-neutral-on-plus-three: light-dark(
383
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%),
384
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
385
+ );
386
+ --op-color-neutral-on-plus-three-alt: light-dark(
387
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 10%),
388
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 68%)
389
+ );
390
+ --op-color-neutral-on-plus-two: light-dark(
391
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%),
392
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
393
+ );
394
+ --op-color-neutral-on-plus-two-alt: light-dark(
395
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 6%),
396
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%)
397
+ );
398
+ --op-color-neutral-on-plus-one: light-dark(
399
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),
400
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%)
401
+ );
402
+ --op-color-neutral-on-plus-one-alt: light-dark(
403
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 95%),
404
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 75%)
405
+ );
406
+ --op-color-neutral-on-base: light-dark(
407
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),
408
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%)
409
+ );
410
+ --op-color-neutral-on-base-alt: light-dark(
411
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%),
412
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 78%)
413
+ );
414
+ --op-color-neutral-on-minus-one: light-dark(
415
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%),
416
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%)
417
+ );
418
+ --op-color-neutral-on-minus-one-alt: light-dark(
419
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),
420
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%)
421
+ );
422
+ --op-color-neutral-on-minus-two: light-dark(
423
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%),
424
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%)
425
+ );
426
+ --op-color-neutral-on-minus-two-alt: light-dark(
427
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 78%),
428
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%)
429
+ );
430
+ --op-color-neutral-on-minus-three: light-dark(
431
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 86%),
432
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 99%)
433
+ );
434
+ --op-color-neutral-on-minus-three-alt: light-dark(
435
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 74%),
436
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 95%)
437
+ );
438
+ --op-color-neutral-on-minus-four: light-dark(
439
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),
440
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 11%)
441
+ );
442
+ --op-color-neutral-on-minus-four-alt: light-dark(
443
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 76%),
444
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%)
445
+ );
446
+ --op-color-neutral-on-minus-five: light-dark(
447
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%),
448
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%)
449
+ );
450
+ --op-color-neutral-on-minus-five-alt: light-dark(
451
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 76%),
452
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%)
453
+ );
454
+ --op-color-neutral-on-minus-six: light-dark(
455
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%),
456
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%)
457
+ );
458
+ --op-color-neutral-on-minus-six-alt: light-dark(
459
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 82%),
460
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%)
461
+ );
462
+ --op-color-neutral-on-minus-seven: light-dark(
463
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 96%),
464
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%)
465
+ );
466
+ --op-color-neutral-on-minus-seven-alt: light-dark(
467
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),
468
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%)
469
+ );
470
+ --op-color-neutral-on-minus-eight: light-dark(
471
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%),
472
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%)
473
+ );
474
+ --op-color-neutral-on-minus-eight-alt: light-dark(
475
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 86%),
476
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%)
477
+ );
478
+ --op-color-neutral-on-minus-max: light-dark(
479
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),
480
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%)
481
+ );
482
+ --op-color-neutral-on-minus-max-alt: light-dark(
483
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%),
484
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 48%)
485
+ );
486
+
487
+ /**
488
+ * @tokens Alerts Warning Colors
489
+ * @presenter Color
490
+ */
491
+
492
+ /* prettier-ignore */
493
+ --op-color-alerts-warning-original: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) var(--op-color-alerts-warning-l));
494
+
495
+ /* Main Scale */
496
+ --op-color-alerts-warning-plus-max: light-dark(
497
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%),
498
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%)
499
+ );
500
+ --op-color-alerts-warning-plus-eight: light-dark(
501
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%),
502
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%)
503
+ );
504
+ --op-color-alerts-warning-plus-seven: light-dark(
505
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%),
506
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%)
507
+ );
508
+ --op-color-alerts-warning-plus-six: light-dark(
509
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 94%),
510
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%)
511
+ );
512
+ --op-color-alerts-warning-plus-five: light-dark(
513
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 90%),
514
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%)
515
+ );
516
+ --op-color-alerts-warning-plus-four: light-dark(
517
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%),
518
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%)
519
+ );
520
+ --op-color-alerts-warning-plus-three: light-dark(
521
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%),
522
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%)
523
+ );
524
+ --op-color-alerts-warning-plus-two: light-dark(
525
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 64%),
526
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%)
527
+ );
528
+ --op-color-alerts-warning-plus-one: light-dark(
529
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%),
530
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%)
531
+ );
532
+ --op-color-alerts-warning-base: light-dark(
533
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 40%),
534
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 32%)
535
+ );
536
+ --op-color-alerts-warning-minus-one: light-dark(
537
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%),
538
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 36%)
539
+ );
540
+ --op-color-alerts-warning-minus-two: light-dark(
541
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%),
542
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 40%)
543
+ );
544
+ --op-color-alerts-warning-minus-three: light-dark(
545
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 18%),
546
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 48%)
547
+ );
548
+ --op-color-alerts-warning-minus-four: light-dark(
549
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%),
550
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 52%)
551
+ );
552
+ --op-color-alerts-warning-minus-five: light-dark(
553
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%),
554
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 64%)
555
+ );
556
+ --op-color-alerts-warning-minus-six: light-dark(
557
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%),
558
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%)
559
+ );
560
+ --op-color-alerts-warning-minus-seven: light-dark(
561
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%),
562
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%)
563
+ );
564
+ --op-color-alerts-warning-minus-eight: light-dark(
565
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%),
566
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)
567
+ );
568
+ --op-color-alerts-warning-minus-max: light-dark(
569
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),
570
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%)
571
+ );
572
+
573
+ /* On Scale */
574
+ --op-color-alerts-warning-on-plus-max: light-dark(
575
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),
576
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
577
+ );
578
+ --op-color-alerts-warning-on-plus-max-alt: light-dark(
579
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
580
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 42%)
581
+ );
582
+ --op-color-alerts-warning-on-plus-eight: light-dark(
583
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%),
584
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)
585
+ );
586
+ --op-color-alerts-warning-on-plus-eight-alt: light-dark(
587
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%),
588
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
589
+ );
590
+ --op-color-alerts-warning-on-plus-seven: light-dark(
591
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%),
592
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%)
593
+ );
594
+ --op-color-alerts-warning-on-plus-seven-alt: light-dark(
595
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%),
596
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%)
597
+ );
598
+ --op-color-alerts-warning-on-plus-six: light-dark(
599
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%),
600
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%)
601
+ );
602
+ --op-color-alerts-warning-on-plus-six-alt: light-dark(
603
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%),
604
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%)
605
+ );
606
+ --op-color-alerts-warning-on-plus-five: light-dark(
607
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
608
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%)
609
+ );
610
+ --op-color-alerts-warning-on-plus-five-alt: light-dark(
611
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 25%),
612
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%)
613
+ );
614
+ --op-color-alerts-warning-on-plus-four: light-dark(
615
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
616
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%)
617
+ );
618
+ --op-color-alerts-warning-on-plus-four-alt: light-dark(
619
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),
620
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%)
621
+ );
622
+ --op-color-alerts-warning-on-plus-three: light-dark(
623
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
624
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)
625
+ );
626
+ --op-color-alerts-warning-on-plus-three-alt: light-dark(
627
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%),
628
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
629
+ );
630
+ --op-color-alerts-warning-on-plus-two: light-dark(
631
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%),
632
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)
633
+ );
634
+ --op-color-alerts-warning-on-plus-two-alt: light-dark(
635
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%),
636
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
637
+ );
638
+ --op-color-alerts-warning-on-plus-one: light-dark(
639
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
640
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%)
641
+ );
642
+ --op-color-alerts-warning-on-plus-one-alt: light-dark(
643
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 15%),
644
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%)
645
+ );
646
+ --op-color-alerts-warning-on-base: light-dark(
647
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%),
648
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%)
649
+ );
650
+ --op-color-alerts-warning-on-base-alt: light-dark(
651
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),
652
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%)
653
+ );
654
+ --op-color-alerts-warning-on-minus-one: light-dark(
655
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%),
656
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%)
657
+ );
658
+ --op-color-alerts-warning-on-minus-one-alt: light-dark(
659
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),
660
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
661
+ );
662
+ --op-color-alerts-warning-on-minus-two: light-dark(
663
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%),
664
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%)
665
+ );
666
+ --op-color-alerts-warning-on-minus-two-alt: light-dark(
667
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%),
668
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%)
669
+ );
670
+ --op-color-alerts-warning-on-minus-three: light-dark(
671
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 92%),
672
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%)
673
+ );
674
+ --op-color-alerts-warning-on-minus-three-alt: light-dark(
675
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%),
676
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%)
677
+ );
678
+ --op-color-alerts-warning-on-minus-four: light-dark(
679
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),
680
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%)
681
+ );
682
+ --op-color-alerts-warning-on-minus-four-alt: light-dark(
683
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%),
684
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%)
685
+ );
686
+ --op-color-alerts-warning-on-minus-five: light-dark(
687
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),
688
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%)
689
+ );
690
+ --op-color-alerts-warning-on-minus-five-alt: light-dark(
691
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%),
692
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 21%)
693
+ );
694
+ --op-color-alerts-warning-on-minus-six: light-dark(
695
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 94%),
696
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%)
697
+ );
698
+ --op-color-alerts-warning-on-minus-six-alt: light-dark(
699
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 82%),
700
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%)
701
+ );
702
+ --op-color-alerts-warning-on-minus-seven: light-dark(
703
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%),
704
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%)
705
+ );
706
+ --op-color-alerts-warning-on-minus-seven-alt: light-dark(
707
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%),
708
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%)
709
+ );
710
+ --op-color-alerts-warning-on-minus-eight: light-dark(
711
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%),
712
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%)
713
+ );
714
+ --op-color-alerts-warning-on-minus-eight-alt: light-dark(
715
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 86%),
716
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%)
717
+ );
718
+ --op-color-alerts-warning-on-minus-max: light-dark(
719
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%),
720
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%)
721
+ );
722
+ --op-color-alerts-warning-on-minus-max-alt: light-dark(
723
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),
724
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%)
725
+ );
726
+
727
+ /**
728
+ * @tokens Alerts Danger Colors
729
+ * @presenter Color
730
+ */
731
+
732
+ /* prettier-ignore */
733
+ --op-color-alerts-danger-original: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) var(--op-color-alerts-danger-l));
734
+
735
+ /* Main Scale */
736
+ --op-color-alerts-danger-plus-max: light-dark(
737
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%),
738
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%)
739
+ );
740
+ --op-color-alerts-danger-plus-eight: light-dark(
741
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%),
742
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%)
743
+ );
744
+ --op-color-alerts-danger-plus-seven: light-dark(
745
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%),
746
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%)
747
+ );
748
+ --op-color-alerts-danger-plus-six: light-dark(
749
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%),
750
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 12%)
751
+ );
752
+ --op-color-alerts-danger-plus-five: light-dark(
753
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%),
754
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 14%)
755
+ );
756
+ --op-color-alerts-danger-plus-four: light-dark(
757
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%),
758
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%)
759
+ );
760
+ --op-color-alerts-danger-plus-three: light-dark(
761
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%),
762
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%)
763
+ );
764
+ --op-color-alerts-danger-plus-two: light-dark(
765
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 64%),
766
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%)
767
+ );
768
+ --op-color-alerts-danger-plus-one: light-dark(
769
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 50%),
770
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%)
771
+ );
772
+ --op-color-alerts-danger-base: light-dark(
773
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 40%),
774
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 32%)
775
+ );
776
+ --op-color-alerts-danger-minus-one: light-dark(
777
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%),
778
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%)
779
+ );
780
+ --op-color-alerts-danger-minus-two: light-dark(
781
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 32%),
782
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 40%)
783
+ );
784
+ --op-color-alerts-danger-minus-three: light-dark(
785
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%),
786
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 48%)
787
+ );
788
+ --op-color-alerts-danger-minus-four: light-dark(
789
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%),
790
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 52%)
791
+ );
792
+ --op-color-alerts-danger-minus-five: light-dark(
793
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),
794
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 64%)
795
+ );
796
+ --op-color-alerts-danger-minus-six: light-dark(
797
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%),
798
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%)
799
+ );
800
+ --op-color-alerts-danger-minus-seven: light-dark(
801
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%),
802
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%)
803
+ );
804
+ --op-color-alerts-danger-minus-eight: light-dark(
805
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%),
806
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
807
+ );
808
+ --op-color-alerts-danger-minus-max: light-dark(
809
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%),
810
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%)
811
+ );
812
+
813
+ /* On Scale */
814
+ --op-color-alerts-danger-on-plus-max: light-dark(
815
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%),
816
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%)
817
+ );
818
+ --op-color-alerts-danger-on-plus-max-alt: light-dark(
819
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),
820
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
821
+ );
822
+ --op-color-alerts-danger-on-plus-eight: light-dark(
823
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%),
824
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
825
+ );
826
+ --op-color-alerts-danger-on-plus-eight-alt: light-dark(
827
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%),
828
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%)
829
+ );
830
+ --op-color-alerts-danger-on-plus-seven: light-dark(
831
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%),
832
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%)
833
+ );
834
+ --op-color-alerts-danger-on-plus-seven-alt: light-dark(
835
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%),
836
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%)
837
+ );
838
+ --op-color-alerts-danger-on-plus-six: light-dark(
839
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%),
840
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%)
841
+ );
842
+ --op-color-alerts-danger-on-plus-six-alt: light-dark(
843
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%),
844
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 68%)
845
+ );
846
+ --op-color-alerts-danger-on-plus-five: light-dark(
847
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),
848
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%)
849
+ );
850
+ --op-color-alerts-danger-on-plus-five-alt: light-dark(
851
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 30%),
852
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%)
853
+ );
854
+ --op-color-alerts-danger-on-plus-four: light-dark(
855
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%),
856
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%)
857
+ );
858
+ --op-color-alerts-danger-on-plus-four-alt: light-dark(
859
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%),
860
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%)
861
+ );
862
+ --op-color-alerts-danger-on-plus-three: light-dark(
863
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),
864
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
865
+ );
866
+ --op-color-alerts-danger-on-plus-three-alt: light-dark(
867
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%),
868
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%)
869
+ );
870
+ --op-color-alerts-danger-on-plus-two: light-dark(
871
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%),
872
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
873
+ );
874
+ --op-color-alerts-danger-on-plus-two-alt: light-dark(
875
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 6%),
876
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%)
877
+ );
878
+ --op-color-alerts-danger-on-plus-one: light-dark(
879
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%),
880
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%)
881
+ );
882
+ --op-color-alerts-danger-on-plus-one-alt: light-dark(
883
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 3%),
884
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%)
885
+ );
886
+ --op-color-alerts-danger-on-base: light-dark(
887
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%),
888
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%)
889
+ );
890
+ --op-color-alerts-danger-on-base-alt: light-dark(
891
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%),
892
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%)
893
+ );
894
+ --op-color-alerts-danger-on-minus-one: light-dark(
895
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%),
896
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%)
897
+ );
898
+ --op-color-alerts-danger-on-minus-one-alt: light-dark(
899
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 89%),
900
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
901
+ );
902
+ --op-color-alerts-danger-on-minus-two: light-dark(
903
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%),
904
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%)
905
+ );
906
+ --op-color-alerts-danger-on-minus-two-alt: light-dark(
907
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 83%),
908
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%)
909
+ );
910
+ --op-color-alerts-danger-on-minus-three: light-dark(
911
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 86%),
912
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 6%)
913
+ );
914
+ --op-color-alerts-danger-on-minus-three-alt: light-dark(
915
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 79%),
916
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%)
917
+ );
918
+ --op-color-alerts-danger-on-minus-four: light-dark(
919
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%),
920
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%)
921
+ );
922
+ --op-color-alerts-danger-on-minus-four-alt: light-dark(
923
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 77%),
924
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%)
925
+ );
926
+ --op-color-alerts-danger-on-minus-five: light-dark(
927
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%),
928
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%)
929
+ );
930
+ --op-color-alerts-danger-on-minus-five-alt: light-dark(
931
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 81%),
932
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%)
933
+ );
934
+ --op-color-alerts-danger-on-minus-six: light-dark(
935
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%),
936
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%)
937
+ );
938
+ --op-color-alerts-danger-on-minus-six-alt: light-dark(
939
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 87%),
940
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 22%)
941
+ );
942
+ --op-color-alerts-danger-on-minus-seven: light-dark(
943
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%),
944
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%)
945
+ );
946
+ --op-color-alerts-danger-on-minus-seven-alt: light-dark(
947
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 89%),
948
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%)
949
+ );
950
+ --op-color-alerts-danger-on-minus-eight: light-dark(
951
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%),
952
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%)
953
+ );
954
+ --op-color-alerts-danger-on-minus-eight-alt: light-dark(
955
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 91%),
956
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%)
957
+ );
958
+ --op-color-alerts-danger-on-minus-max: light-dark(
959
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%),
960
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%)
961
+ );
962
+ --op-color-alerts-danger-on-minus-max-alt: light-dark(
963
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%),
964
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%)
965
+ );
966
+
967
+ /**
968
+ * @tokens Alerts Info Colors
969
+ * @presenter Color
970
+ */
971
+
972
+ /* prettier-ignore */
973
+ --op-color-alerts-info-original: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) var(--op-color-alerts-info-l));
974
+
975
+ /* Main Scale */
976
+ --op-color-alerts-info-plus-max: light-dark(
977
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%),
978
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%)
979
+ );
980
+ --op-color-alerts-info-plus-eight: light-dark(
981
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%),
982
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%)
983
+ );
984
+ --op-color-alerts-info-plus-seven: light-dark(
985
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%),
986
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%)
987
+ );
988
+ --op-color-alerts-info-plus-six: light-dark(
989
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%),
990
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 12%)
991
+ );
992
+ --op-color-alerts-info-plus-five: light-dark(
993
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 90%),
994
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 14%)
995
+ );
996
+ --op-color-alerts-info-plus-four: light-dark(
997
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%),
998
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%)
999
+ );
1000
+ --op-color-alerts-info-plus-three: light-dark(
1001
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 70%),
1002
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%)
1003
+ );
1004
+ --op-color-alerts-info-plus-two: light-dark(
1005
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 64%),
1006
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%)
1007
+ );
1008
+ --op-color-alerts-info-plus-one: light-dark(
1009
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 56%),
1010
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%)
1011
+ );
1012
+ --op-color-alerts-info-base: light-dark(
1013
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%),
1014
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%)
1015
+ );
1016
+ --op-color-alerts-info-minus-one: light-dark(
1017
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%),
1018
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%)
1019
+ );
1020
+ --op-color-alerts-info-minus-two: light-dark(
1021
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%),
1022
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%)
1023
+ );
1024
+ --op-color-alerts-info-minus-three: light-dark(
1025
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%),
1026
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 48%)
1027
+ );
1028
+ --op-color-alerts-info-minus-four: light-dark(
1029
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%),
1030
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 52%)
1031
+ );
1032
+ --op-color-alerts-info-minus-five: light-dark(
1033
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),
1034
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 64%)
1035
+ );
1036
+ --op-color-alerts-info-minus-six: light-dark(
1037
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%),
1038
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%)
1039
+ );
1040
+ --op-color-alerts-info-minus-seven: light-dark(
1041
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%),
1042
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
1043
+ );
1044
+ --op-color-alerts-info-minus-eight: light-dark(
1045
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%),
1046
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
1047
+ );
1048
+ --op-color-alerts-info-minus-max: light-dark(
1049
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%),
1050
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%)
1051
+ );
1052
+
1053
+ /* On Scale */
1054
+ --op-color-alerts-info-on-plus-max: light-dark(
1055
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%),
1056
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%)
1057
+ );
1058
+ --op-color-alerts-info-on-plus-max-alt: light-dark(
1059
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),
1060
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
1061
+ );
1062
+ --op-color-alerts-info-on-plus-eight: light-dark(
1063
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%),
1064
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
1065
+ );
1066
+ --op-color-alerts-info-on-plus-eight-alt: light-dark(
1067
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%),
1068
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%)
1069
+ );
1070
+ --op-color-alerts-info-on-plus-seven: light-dark(
1071
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%),
1072
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
1073
+ );
1074
+ --op-color-alerts-info-on-plus-seven-alt: light-dark(
1075
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%),
1076
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 70%)
1077
+ );
1078
+ --op-color-alerts-info-on-plus-six: light-dark(
1079
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%),
1080
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%)
1081
+ );
1082
+ --op-color-alerts-info-on-plus-six-alt: light-dark(
1083
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%),
1084
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%)
1085
+ );
1086
+ --op-color-alerts-info-on-plus-five: light-dark(
1087
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),
1088
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 76%)
1089
+ );
1090
+ --op-color-alerts-info-on-plus-five-alt: light-dark(
1091
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%),
1092
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%)
1093
+ );
1094
+ --op-color-alerts-info-on-plus-four: light-dark(
1095
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%),
1096
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
1097
+ );
1098
+ --op-color-alerts-info-on-plus-four-alt: light-dark(
1099
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%),
1100
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 66%)
1101
+ );
1102
+ --op-color-alerts-info-on-plus-three: light-dark(
1103
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),
1104
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
1105
+ );
1106
+ --op-color-alerts-info-on-plus-three-alt: light-dark(
1107
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 10%),
1108
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%)
1109
+ );
1110
+ --op-color-alerts-info-on-plus-two: light-dark(
1111
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%),
1112
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
1113
+ );
1114
+ --op-color-alerts-info-on-plus-two-alt: light-dark(
1115
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 6%),
1116
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 74%)
1117
+ );
1118
+ --op-color-alerts-info-on-plus-one: light-dark(
1119
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%),
1120
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%)
1121
+ );
1122
+ --op-color-alerts-info-on-plus-one-alt: light-dark(
1123
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 3%),
1124
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
1125
+ );
1126
+ --op-color-alerts-info-on-base: light-dark(
1127
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%),
1128
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%)
1129
+ );
1130
+ --op-color-alerts-info-on-base-alt: light-dark(
1131
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%),
1132
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%)
1133
+ );
1134
+ --op-color-alerts-info-on-minus-one: light-dark(
1135
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%),
1136
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%)
1137
+ );
1138
+ --op-color-alerts-info-on-minus-one-alt: light-dark(
1139
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 82%),
1140
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
1141
+ );
1142
+ --op-color-alerts-info-on-minus-two: light-dark(
1143
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 90%),
1144
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%)
1145
+ );
1146
+ --op-color-alerts-info-on-minus-two-alt: light-dark(
1147
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%),
1148
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%)
1149
+ );
1150
+ --op-color-alerts-info-on-minus-three: light-dark(
1151
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%),
1152
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%)
1153
+ );
1154
+ --op-color-alerts-info-on-minus-three-alt: light-dark(
1155
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 74%),
1156
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%)
1157
+ );
1158
+ --op-color-alerts-info-on-minus-four: light-dark(
1159
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%),
1160
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%)
1161
+ );
1162
+ --op-color-alerts-info-on-minus-four-alt: light-dark(
1163
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%),
1164
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%)
1165
+ );
1166
+ --op-color-alerts-info-on-minus-five: light-dark(
1167
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%),
1168
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%)
1169
+ );
1170
+ --op-color-alerts-info-on-minus-five-alt: light-dark(
1171
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 76%),
1172
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%)
1173
+ );
1174
+ --op-color-alerts-info-on-minus-six: light-dark(
1175
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%),
1176
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%)
1177
+ );
1178
+ --op-color-alerts-info-on-minus-six-alt: light-dark(
1179
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 82%),
1180
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%)
1181
+ );
1182
+ --op-color-alerts-info-on-minus-seven: light-dark(
1183
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%),
1184
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%)
1185
+ );
1186
+ --op-color-alerts-info-on-minus-seven-alt: light-dark(
1187
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%),
1188
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%)
1189
+ );
1190
+ --op-color-alerts-info-on-minus-eight: light-dark(
1191
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%),
1192
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%)
1193
+ );
1194
+ --op-color-alerts-info-on-minus-eight-alt: light-dark(
1195
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%),
1196
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 34%)
1197
+ );
1198
+ --op-color-alerts-info-on-minus-max: light-dark(
1199
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%),
1200
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%)
1201
+ );
1202
+ --op-color-alerts-info-on-minus-max-alt: light-dark(
1203
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%),
1204
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%)
1205
+ );
1206
+
1207
+ /**
1208
+ * @tokens Alerts Notice Colors
1209
+ * @presenter Color
1210
+ */
1211
+
1212
+ /* prettier-ignore */
1213
+ --op-color-alerts-notice-original: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) var(--op-color-alerts-notice-l));
1214
+
1215
+ /* Main Scale */
1216
+ --op-color-alerts-notice-plus-max: light-dark(
1217
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%),
1218
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%)
1219
+ );
1220
+ --op-color-alerts-notice-plus-eight: light-dark(
1221
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%),
1222
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%)
1223
+ );
1224
+ --op-color-alerts-notice-plus-seven: light-dark(
1225
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),
1226
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%)
1227
+ );
1228
+ --op-color-alerts-notice-plus-six: light-dark(
1229
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%),
1230
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 12%)
1231
+ );
1232
+ --op-color-alerts-notice-plus-five: light-dark(
1233
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 90%),
1234
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 14%)
1235
+ );
1236
+ --op-color-alerts-notice-plus-four: light-dark(
1237
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%),
1238
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%)
1239
+ );
1240
+ --op-color-alerts-notice-plus-three: light-dark(
1241
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 70%),
1242
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%)
1243
+ );
1244
+ --op-color-alerts-notice-plus-two: light-dark(
1245
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 64%),
1246
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%)
1247
+ );
1248
+ --op-color-alerts-notice-plus-one: light-dark(
1249
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 47%),
1250
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%)
1251
+ );
1252
+ --op-color-alerts-notice-base: light-dark(
1253
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 40%),
1254
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 32%)
1255
+ );
1256
+ --op-color-alerts-notice-minus-one: light-dark(
1257
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 32%),
1258
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 36%)
1259
+ );
1260
+ --op-color-alerts-notice-minus-two: light-dark(
1261
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%),
1262
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 40%)
1263
+ );
1264
+ --op-color-alerts-notice-minus-three: light-dark(
1265
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%),
1266
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 48%)
1267
+ );
1268
+ --op-color-alerts-notice-minus-four: light-dark(
1269
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 22%),
1270
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 52%)
1271
+ );
1272
+ --op-color-alerts-notice-minus-five: light-dark(
1273
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 18%),
1274
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 64%)
1275
+ );
1276
+ --op-color-alerts-notice-minus-six: light-dark(
1277
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%),
1278
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%)
1279
+ );
1280
+ --op-color-alerts-notice-minus-seven: light-dark(
1281
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),
1282
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%)
1283
+ );
1284
+ --op-color-alerts-notice-minus-eight: light-dark(
1285
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%),
1286
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%)
1287
+ );
1288
+ --op-color-alerts-notice-minus-max: light-dark(
1289
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%),
1290
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%)
1291
+ );
1292
+
1293
+ /* On Scale */
1294
+ --op-color-alerts-notice-on-plus-max: light-dark(
1295
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%),
1296
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%)
1297
+ );
1298
+ --op-color-alerts-notice-on-plus-max-alt: light-dark(
1299
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%),
1300
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%)
1301
+ );
1302
+ --op-color-alerts-notice-on-plus-eight: light-dark(
1303
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%),
1304
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%)
1305
+ );
1306
+ --op-color-alerts-notice-on-plus-eight-alt: light-dark(
1307
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%),
1308
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 82%)
1309
+ );
1310
+ --op-color-alerts-notice-on-plus-seven: light-dark(
1311
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),
1312
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 90%)
1313
+ );
1314
+ --op-color-alerts-notice-on-plus-seven-alt: light-dark(
1315
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%),
1316
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%)
1317
+ );
1318
+ --op-color-alerts-notice-on-plus-six: light-dark(
1319
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%),
1320
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%)
1321
+ );
1322
+ --op-color-alerts-notice-on-plus-six-alt: light-dark(
1323
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%),
1324
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%)
1325
+ );
1326
+ --op-color-alerts-notice-on-plus-five: light-dark(
1327
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%),
1328
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%)
1329
+ );
1330
+ --op-color-alerts-notice-on-plus-five-alt: light-dark(
1331
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 30%),
1332
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%)
1333
+ );
1334
+ --op-color-alerts-notice-on-plus-four: light-dark(
1335
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%),
1336
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%)
1337
+ );
1338
+ --op-color-alerts-notice-on-plus-four-alt: light-dark(
1339
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%),
1340
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%)
1341
+ );
1342
+ --op-color-alerts-notice-on-plus-three: light-dark(
1343
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%),
1344
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%)
1345
+ );
1346
+ --op-color-alerts-notice-on-plus-three-alt: light-dark(
1347
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 10%),
1348
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 78%)
1349
+ );
1350
+ --op-color-alerts-notice-on-plus-two: light-dark(
1351
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%),
1352
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%)
1353
+ );
1354
+ --op-color-alerts-notice-on-plus-two-alt: light-dark(
1355
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 6%),
1356
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%)
1357
+ );
1358
+ --op-color-alerts-notice-on-plus-one: light-dark(
1359
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),
1360
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%)
1361
+ );
1362
+ --op-color-alerts-notice-on-plus-one-alt: light-dark(
1363
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 3%),
1364
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%)
1365
+ );
1366
+ --op-color-alerts-notice-on-base: light-dark(
1367
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),
1368
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 99%)
1369
+ );
1370
+ --op-color-alerts-notice-on-base-alt: light-dark(
1371
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%),
1372
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%)
1373
+ );
1374
+ --op-color-alerts-notice-on-minus-one: light-dark(
1375
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%),
1376
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
1377
+ );
1378
+ --op-color-alerts-notice-on-minus-one-alt: light-dark(
1379
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),
1380
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 7%)
1381
+ );
1382
+ --op-color-alerts-notice-on-minus-two: light-dark(
1383
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),
1384
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
1385
+ );
1386
+ --op-color-alerts-notice-on-minus-two-alt: light-dark(
1387
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 89%),
1388
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 10%)
1389
+ );
1390
+ --op-color-alerts-notice-on-minus-three: light-dark(
1391
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%),
1392
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
1393
+ );
1394
+ --op-color-alerts-notice-on-minus-three-alt: light-dark(
1395
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 85%),
1396
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 18%)
1397
+ );
1398
+ --op-color-alerts-notice-on-minus-four: light-dark(
1399
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%),
1400
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
1401
+ );
1402
+ --op-color-alerts-notice-on-minus-four-alt: light-dark(
1403
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 81%),
1404
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%)
1405
+ );
1406
+ --op-color-alerts-notice-on-minus-five: light-dark(
1407
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%),
1408
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 6%)
1409
+ );
1410
+ --op-color-alerts-notice-on-minus-five-alt: light-dark(
1411
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 76%),
1412
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%)
1413
+ );
1414
+ --op-color-alerts-notice-on-minus-six: light-dark(
1415
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%),
1416
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
1417
+ );
1418
+ --op-color-alerts-notice-on-minus-six-alt: light-dark(
1419
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 82%),
1420
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%)
1421
+ );
1422
+ --op-color-alerts-notice-on-minus-seven: light-dark(
1423
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),
1424
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
1425
+ );
1426
+ --op-color-alerts-notice-on-minus-seven-alt: light-dark(
1427
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%),
1428
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%)
1429
+ );
1430
+ --op-color-alerts-notice-on-minus-eight: light-dark(
1431
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%),
1432
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
1433
+ );
1434
+ --op-color-alerts-notice-on-minus-eight-alt: light-dark(
1435
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 86%),
1436
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%)
1437
+ );
1438
+ --op-color-alerts-notice-on-minus-max: light-dark(
1439
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%),
1440
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%)
1441
+ );
1442
+ --op-color-alerts-notice-on-minus-max-alt: light-dark(
1443
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%),
1444
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%)
1445
+ );
1446
+
1447
+ /**
1448
+ * @tokens Dark Shadows
1449
+ * @presenter Shadow
1450
+ */
1451
+ --op-color-background: var(--op-color-neutral-plus-eight);
1452
+ --op-color-on-background: var(--op-color-neutral-on-plus-eight);
1453
+ --op-color-on-background-alt: var(--op-color-neutral-on-plus-eight-alt);
1454
+ }
1455
+
1456
+ /* Force Light Mode */
1457
+ :root[data-theme-mode='light'] {
1458
+ color-scheme: only light;
1459
+ }
1460
+
1461
+ /* Force Dark Mode */
1462
+ :root[data-theme-mode='dark'] {
1463
+ color-scheme: only dark;
1464
+
1465
+ /**
1466
+ * @tokens Dark Shadows
1467
+ * @presenter Shadow
1468
+ */
1469
+ --op-shadow-x-small: 0 1px 3px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
1470
+ --op-shadow-small: 0 2px 6px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
1471
+ --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%);
1472
+ --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 30%);
1473
+ --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 30%);
1474
+
1475
+ /**
1476
+ * @tokens Encoded Images
1477
+ */
1478
+ --op-encoded-images-dropdown-arrow: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==');
1479
+ }
1480
+
1481
+ @media (prefers-color-scheme: dark) {
1482
+ :root:not([data-theme-mode='light']) {
1483
+ /**
1484
+ * @tokens Dark Shadows
1485
+ * @presenter Shadow
1486
+ */
1487
+ --op-shadow-x-small: 0 1px 3px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
1488
+ --op-shadow-small: 0 2px 6px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
1489
+ --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%);
1490
+ --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 30%);
1491
+ --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 30%);
1492
+
1493
+ /**
1494
+ * @tokens Encoded Images
1495
+ */
1496
+ --op-encoded-images-dropdown-arrow: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==');
1497
+ }
1498
+ }