@rolemodel/optics 2.0.1 → 2.1.2

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 (47) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/dist/LICENSE +21 -0
  3. package/dist/README.md +78 -0
  4. package/dist/css/addons/fonts/feather_icons.css +939 -0
  5. package/dist/css/addons/fonts/lucide_icons.css +4672 -0
  6. package/dist/css/addons/fonts/material_symbols_outlined_variable.css +10 -0
  7. package/dist/css/addons/fonts/phosphor_icons.css +44 -0
  8. package/dist/css/addons/fonts/tabler_icons.css +11 -0
  9. package/dist/css/optics.css +4964 -7
  10. package/dist/css/optics.min.css +1 -4934
  11. package/dist/package.json +87 -0
  12. package/package.json +6 -4
  13. package/postcss.config.js +6 -3
  14. package/dist/css/components/accordion.css +0 -66
  15. package/dist/css/components/alert.css +0 -171
  16. package/dist/css/components/avatar.css +0 -95
  17. package/dist/css/components/badge.css +0 -73
  18. package/dist/css/components/breadcrumbs.css +0 -37
  19. package/dist/css/components/button.css +0 -273
  20. package/dist/css/components/button_group.css +0 -47
  21. package/dist/css/components/card.css +0 -62
  22. package/dist/css/components/confirm-dialog.css +0 -80
  23. package/dist/css/components/divider.css +0 -55
  24. package/dist/css/components/form.css +0 -360
  25. package/dist/css/components/icon.css +0 -114
  26. package/dist/css/components/index.css +0 -24
  27. package/dist/css/components/modal.css +0 -149
  28. package/dist/css/components/navbar.css +0 -60
  29. package/dist/css/components/pagination.css +0 -24
  30. package/dist/css/components/side_panel.css +0 -90
  31. package/dist/css/components/sidebar.css +0 -139
  32. package/dist/css/components/spinner.css +0 -52
  33. package/dist/css/components/switch.css +0 -107
  34. package/dist/css/components/tab.css +0 -76
  35. package/dist/css/components/table.css +0 -133
  36. package/dist/css/components/tag.css +0 -168
  37. package/dist/css/components/text_pair.css +0 -55
  38. package/dist/css/components/tooltip.css +0 -134
  39. package/dist/css/core/base.css +0 -95
  40. package/dist/css/core/layout.css +0 -43
  41. package/dist/css/core/tokens/base_tokens.css +0 -354
  42. package/dist/css/core/tokens/index.css +0 -2
  43. package/dist/css/core/tokens/scale_color_tokens.css +0 -1498
  44. package/dist/css/core/utilities.css +0 -429
  45. package/dist/css/recipes/16six-sidebar.css +0 -63
  46. package/dist/css/recipes/aligned-header.css +0 -16
  47. package/dist/css/recipes/domains-sidebar.css +0 -40
package/dist/css/core/tokens/scale_color_tokens.css DELETED
@@ -1,1498 +0,0 @@
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
- }