@rolemodel/optics 1.11.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 (25) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/dist/css/optics.css +1632 -1283
  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/components/sidebar.css +139 -0
  8. package/dist/scss/core/{base.scss → base.css} +3 -3
  9. package/dist/scss/core/tokens/{base_tokens.scss → base_tokens.css} +102 -160
  10. package/dist/scss/core/tokens/index.scss +0 -1
  11. package/dist/scss/core/tokens/scale_color_tokens.css +1498 -0
  12. package/dist/scss/core/{utilities.scss → utilities.css} +20 -18
  13. package/dist/scss/recipes/16six-sidebar.css +63 -0
  14. package/dist/scss/recipes/{aligned-header.scss → aligned-header.css} +2 -6
  15. package/dist/scss/recipes/domains-sidebar.css +40 -0
  16. package/dist/tokens/tokens.json +14 -566
  17. package/package.json +1 -1
  18. package/public/design-tokens.source.json +1 -0
  19. package/dist/scss/addons/panel.scss +0 -61
  20. package/dist/scss/components/sidebar.scss +0 -184
  21. package/dist/scss/core/tokens/dark_mode_tokens.scss +0 -479
  22. package/dist/scss/core/tokens/scale_color_tokens.scss +0 -468
  23. package/dist/scss/recipes/16six-sidebar.scss +0 -68
  24. package/dist/scss/recipes/domains-sidebar.scss +0 -40
  25. /package/dist/scss/core/{layout.scss → layout.css} +0 -0
package/dist/css/optics.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /* Box sizing rules */
2
- @import 'https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&family=Noto+Serif:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap';
3
- @import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block';
2
+ @import "https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&family=Noto+Serif:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap";
3
+ @import "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block";
4
4
  *,
5
5
  *::before,
6
6
  *::after {
@@ -74,20 +74,22 @@ select {
74
74
  }
75
75
  }
76
76
  /*
77
- Breakpoints
78
- CSS does not support using variables within @media or @container queries. Environment variables are drafted but likely to not be implemented soon.
79
- https://drafts.csswg.org/css-env-1/
80
- https://bholmes.dev/blog/alternative-to-css-variable-media-queries/
81
-
82
- Here is a list of breakpoints used throughout Optics
83
-
84
- --op-breakpoint-x-small: 512px;
85
- --op-breakpoint-small: 768px;
86
- --op-breakpoint-medium: 1024px;
87
- --op-breakpoint-large: 1280px;
88
- --op-breakpoint-x-large: 1440px;
77
+ Noto Sans supports:
78
+ font-weight: {anything between 100 and 900}
79
+ font-stretch: {anything between 62.5% and 100%}
80
+ font-style: {normal or italic}
81
+ */
82
+ /*
83
+ Noto Serif supports:
84
+ font-weight: {anything between 100 and 900}
85
+ font-stretch: {anything between 62.5% and 100%}
86
+ font-style: {normal or italic}
89
87
  */
90
88
  :root {
89
+ /* Color HSLs
90
+ A theme comprised of a primary, neutral, warning, danger, info, and notice colors.
91
+ */
92
+ /* Basic Colors */
91
93
  /**
92
94
  * @tokens Basic Colors
93
95
  * @presenter Color
@@ -145,15 +147,24 @@ select {
145
147
  --op-opacity-disabled: 0.4;
146
148
  --op-opacity-half: 0.5;
147
149
  --op-opacity-full: 1;
150
+ /*
151
+ Breakpoints
152
+ CSS does not support using variables within @media or @container queries. Environment variables are drafted but likely to not be implemented soon.
153
+ https://drafts.csswg.org/css-env-1/
154
+ https://bholmes.dev/blog/alternative-to-css-variable-media-queries/
155
+
156
+ Here is a list of breakpoints used throughout Optics:
157
+ */
148
158
  /**
149
159
  * @tokens Breakpoints
150
160
  * @presenter Spacing
151
161
  */
152
- --op-breakpoint-x-small: 512px;
153
- --op-breakpoint-small: 768px;
154
- --op-breakpoint-medium: 1024px;
155
- --op-breakpoint-large: 1280px;
156
- --op-breakpoint-x-large: 1440px;
162
+ --op-breakpoint-x-small: 512px; /* vertical phone */
163
+ --op-breakpoint-small: 768px; /* vertical ipad */
164
+ --op-breakpoint-medium: 1024px; /* landscape ipad */
165
+ --op-breakpoint-large: 1280px; /* small laptop */
166
+ --op-breakpoint-x-large: 1440px; /* medium laptop */
167
+ /* Border */
157
168
  /**
158
169
  * @tokens Border Radius
159
170
  * @presenter BorderRadius
@@ -177,6 +188,7 @@ select {
177
188
  * @presenter Color
178
189
  */
179
190
  --op-color-border: var(--op-color-neutral-plus-five);
191
+ /* E.G. box-shadow: var(--op-border-top) var(--op-color-border); */
180
192
  /**
181
193
  * @tokens Border Shadow
182
194
  * @presenter Shadow
@@ -189,22 +201,23 @@ select {
189
201
  --op-border-left: calc(-1 * var(--op-border-width)) 0 0 0;
190
202
  --op-border-y: var(--op-border-top) var(--op-color-border), var(--op-border-bottom) var(--op-color-border);
191
203
  --op-border-x: var(--op-border-left) var(--op-color-border), var(--op-border-right) var(--op-color-border);
204
+ /* Font */
192
205
  /**
193
206
  * @tokens Font Scale
194
207
  * @presenter FontSize
195
208
  */
196
- --op-font-scale-unit: 1rem;
197
- --op-font-2x-small: calc(var(--op-font-scale-unit) * 1);
198
- --op-font-x-small: calc(var(--op-font-scale-unit) * 1.2);
199
- --op-font-small: calc(var(--op-font-scale-unit) * 1.4);
200
- --op-font-medium: calc(var(--op-font-scale-unit) * 1.6);
201
- --op-font-large: calc(var(--op-font-scale-unit) * 1.8);
202
- --op-font-x-large: calc(var(--op-font-scale-unit) * 2);
203
- --op-font-2x-large: calc(var(--op-font-scale-unit) * 2.4);
204
- --op-font-3x-large: calc(var(--op-font-scale-unit) * 2.8);
205
- --op-font-4x-large: calc(var(--op-font-scale-unit) * 3.2);
206
- --op-font-5x-large: calc(var(--op-font-scale-unit) * 3.6);
207
- --op-font-6x-large: calc(var(--op-font-scale-unit) * 4.8);
209
+ --op-font-scale-unit: 1rem; /* 10px; */
210
+ --op-font-2x-small: calc(var(--op-font-scale-unit) * 1); /* 10px */
211
+ --op-font-x-small: calc(var(--op-font-scale-unit) * 1.2); /* 12px */
212
+ --op-font-small: calc(var(--op-font-scale-unit) * 1.4); /* 14px */
213
+ --op-font-medium: calc(var(--op-font-scale-unit) * 1.6); /* 16px */
214
+ --op-font-large: calc(var(--op-font-scale-unit) * 1.8); /* 18px */
215
+ --op-font-x-large: calc(var(--op-font-scale-unit) * 2); /* 20px */
216
+ --op-font-2x-large: calc(var(--op-font-scale-unit) * 2.4); /* 24px */
217
+ --op-font-3x-large: calc(var(--op-font-scale-unit) * 2.8); /* 28px */
218
+ --op-font-4x-large: calc(var(--op-font-scale-unit) * 3.2); /* 32px */
219
+ --op-font-5x-large: calc(var(--op-font-scale-unit) * 3.6); /* 36px */
220
+ --op-font-6x-large: calc(var(--op-font-scale-unit) * 4.8); /* 48px */
208
221
  /**
209
222
  * @tokens Font Weight
210
223
  * @presenter FontWeight
@@ -224,6 +237,7 @@ select {
224
237
  */
225
238
  --op-font-family: "Noto Sans", sans-serif;
226
239
  --op-font-family-alt: "Noto Serif", serif;
240
+ /* Text */
227
241
  /**
228
242
  * @tokens Line Height
229
243
  * @presenter LineHeight
@@ -242,6 +256,7 @@ select {
242
256
  */
243
257
  --op-letter-spacing-navigation: 0.01rem;
244
258
  --op-letter-spacing-label: 0.04rem;
259
+ /* Transitions and Animations */
245
260
  /**
246
261
  * @tokens Transition
247
262
  */
@@ -256,31 +271,36 @@ select {
256
271
  * @presenter Animation
257
272
  */
258
273
  --op-animation-flash: rm-slide-in-out-flash 5s normal forwards;
274
+ /* Encoded Images */
259
275
  /**
260
276
  * @tokens Encoded Images
261
277
  */
262
- --op-encoded-images-dropdown-arrow-width: calc(1.2 * var(--op-space-scale-unit));
278
+ --op-encoded-images-dropdown-arrow-width: calc(
279
+ 1.2 * var(--op-space-scale-unit)
280
+ ); /* 12px No way to string interpolate */
263
281
  --op-encoded-images-dropdown-arrow: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiMwQTBBMEIiLz4KPC9zdmc+Cg==");
282
+ /* Spacing */
264
283
  /**
265
284
  * @tokens Size Scale
266
285
  * @presenter Spacing
267
286
  */
268
- --op-size-unit: 0.4rem;
287
+ --op-size-unit: 0.4rem; /* 4px */
269
288
  /**
270
289
  * @tokens Space Scale
271
290
  * @presenter Spacing
272
291
  */
273
- --op-space-scale-unit: 1rem;
274
- --op-space-3x-small: calc(var(--op-space-scale-unit) * 0.2);
275
- --op-space-2x-small: calc(var(--op-space-scale-unit) * 0.4);
276
- --op-space-x-small: calc(var(--op-space-scale-unit) * 0.8);
277
- --op-space-small: calc(var(--op-space-scale-unit) * 1.2);
278
- --op-space-medium: calc(var(--op-space-scale-unit) * 1.6);
279
- --op-space-large: calc(var(--op-space-scale-unit) * 2);
280
- --op-space-x-large: calc(var(--op-space-scale-unit) * 2.4);
281
- --op-space-2x-large: calc(var(--op-space-scale-unit) * 2.8);
282
- --op-space-3x-large: calc(var(--op-space-scale-unit) * 4);
283
- --op-space-4x-large: calc(var(--op-space-scale-unit) * 8);
292
+ --op-space-scale-unit: 1rem; /* 10px; */
293
+ --op-space-3x-small: calc(var(--op-space-scale-unit) * 0.2); /* 2px */
294
+ --op-space-2x-small: calc(var(--op-space-scale-unit) * 0.4); /* 4px */
295
+ --op-space-x-small: calc(var(--op-space-scale-unit) * 0.8); /* 8px */
296
+ --op-space-small: calc(var(--op-space-scale-unit) * 1.2); /* 12px */
297
+ --op-space-medium: calc(var(--op-space-scale-unit) * 1.6); /* 16px */
298
+ --op-space-large: calc(var(--op-space-scale-unit) * 2); /* 20px */
299
+ --op-space-x-large: calc(var(--op-space-scale-unit) * 2.4); /* 24px */
300
+ --op-space-2x-large: calc(var(--op-space-scale-unit) * 2.8); /* 28px */
301
+ --op-space-3x-large: calc(var(--op-space-scale-unit) * 4); /* 40px */
302
+ --op-space-4x-large: calc(var(--op-space-scale-unit) * 8); /* 80px */
303
+ /* Shadows */
284
304
  /**
285
305
  * @tokens Shadows
286
306
  * @presenter Shadow
@@ -290,6 +310,7 @@ select {
290
310
  --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 3%);
291
311
  --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 3%);
292
312
  --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 3%);
313
+ /* Z Index */
293
314
  /**
294
315
  * @tokens Z-Index
295
316
  */
@@ -302,14 +323,19 @@ select {
302
323
  --op-z-index-dropdown: 900;
303
324
  --op-z-index-alert-group: 950;
304
325
  --op-z-index-tooltip: 1000;
326
+ /* Inputs */
327
+ /*
328
+ This should follow multiples of 4
329
+ https: //uxdesign.cc/baseline-grids-design-systems-ae23b5af8cec See example 8
330
+ */
305
331
  /**
306
332
  * @tokens Input Heights
307
333
  * @presenter Spacing
308
334
  */
309
- --op-input-height-small: 2.8rem;
310
- --op-input-height-medium: 3.6rem;
311
- --op-input-height-large: 4rem;
312
- --op-input-height-x-large: 8.4rem;
335
+ --op-input-height-small: 2.8rem; /* 28px */
336
+ --op-input-height-medium: 3.6rem; /* 36px */
337
+ --op-input-height-large: 4rem; /* 40px */
338
+ --op-input-height-x-large: 8.4rem; /* 84px */
313
339
  /**
314
340
  * @tokens Input Focus
315
341
  * @presenter Shadow
@@ -330,1152 +356,1467 @@ select {
330
356
  var(--op-input-outer-focus) var(--op-color-alerts-notice-plus-five);
331
357
  }
332
358
 
359
+ /* Animations */
333
360
  @keyframes rm-slide-in-out-flash {
361
+ /*
362
+ If an duration of 5s is set:
363
+ Start off the Screen
364
+ */
334
365
  0% {
335
366
  right: -100%;
336
367
  }
368
+ /* Animate onto the screen for 0.5s */
337
369
  10% {
338
370
  right: var(--op-space-large);
339
371
  }
372
+ /* Stay on the screen for 3s */
340
373
  70% {
341
374
  right: var(--op-space-large);
342
375
  }
376
+ /* Animate off the screen for 1.5s */
343
377
  100% {
344
378
  right: -100%;
345
379
  }
346
380
  }
347
381
  :root {
382
+ /* Enable light and dark mode switching */
383
+ color-scheme: light dark;
384
+ /*
385
+ Semantic Scales: plus adds luminosity, minus removes luminosity
386
+ This borrows from the photography concept of Aperture f-stops.
387
+ https://www.adobe.com/creativecloud/photography/discover/f-stop.html
388
+ */
348
389
  /**
349
390
  * @tokens Primary Colors
350
391
  * @presenter Color
351
392
  */
352
393
  --op-color-primary-original: hsl(var(--op-color-primary-h) var(--op-color-primary-s) var(--op-color-primary-l));
353
- --op-color-primary-plus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
354
- --op-color-primary-plus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
355
- --op-color-primary-plus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%);
356
- --op-color-primary-plus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%);
357
- --op-color-primary-plus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%);
358
- --op-color-primary-plus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%);
359
- --op-color-primary-plus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 70%);
360
- --op-color-primary-plus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%);
361
- --op-color-primary-plus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 45%);
362
- --op-color-primary-base: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%);
363
- --op-color-primary-minus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 36%);
364
- --op-color-primary-minus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%);
365
- --op-color-primary-minus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 28%);
366
- --op-color-primary-minus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%);
367
- --op-color-primary-minus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
368
- --op-color-primary-minus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%);
369
- --op-color-primary-minus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%);
370
- --op-color-primary-minus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%);
371
- --op-color-primary-minus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%);
372
- --op-color-primary-on-plus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%);
373
- --op-color-primary-on-plus-max-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
374
- --op-color-primary-on-plus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%);
375
- --op-color-primary-on-plus-eight-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%);
376
- --op-color-primary-on-plus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%);
377
- --op-color-primary-on-plus-seven-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 28%);
378
- --op-color-primary-on-plus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%);
379
- --op-color-primary-on-plus-six-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%);
380
- --op-color-primary-on-plus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
381
- --op-color-primary-on-plus-five-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%);
382
- --op-color-primary-on-plus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%);
383
- --op-color-primary-on-plus-four-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%);
384
- --op-color-primary-on-plus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
385
- --op-color-primary-on-plus-three-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 10%);
386
- --op-color-primary-on-plus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%);
387
- --op-color-primary-on-plus-two-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 6%);
388
- --op-color-primary-on-plus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
389
- --op-color-primary-on-plus-one-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 95%);
390
- --op-color-primary-on-base: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
391
- --op-color-primary-on-base-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%);
392
- --op-color-primary-on-minus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%);
393
- --op-color-primary-on-minus-one-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 82%);
394
- --op-color-primary-on-minus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%);
395
- --op-color-primary-on-minus-two-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%);
396
- --op-color-primary-on-minus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%);
397
- --op-color-primary-on-minus-three-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 74%);
398
- --op-color-primary-on-minus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%);
399
- --op-color-primary-on-minus-four-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%);
400
- --op-color-primary-on-minus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%);
401
- --op-color-primary-on-minus-five-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%);
402
- --op-color-primary-on-minus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%);
403
- --op-color-primary-on-minus-six-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 82%);
404
- --op-color-primary-on-minus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%);
405
- --op-color-primary-on-minus-seven-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%);
406
- --op-color-primary-on-minus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
407
- --op-color-primary-on-minus-eight-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%);
408
- --op-color-primary-on-minus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
409
- --op-color-primary-on-minus-max-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%);
394
+ /* Main Scale */
395
+ --op-color-primary-plus-max: light-dark(
396
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
397
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 12%)
398
+ );
399
+ --op-color-primary-plus-eight: light-dark(
400
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%),
401
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 14%)
402
+ );
403
+ --op-color-primary-plus-seven: light-dark(
404
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%),
405
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%)
406
+ );
407
+ --op-color-primary-plus-six: light-dark(
408
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%),
409
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%)
410
+ );
411
+ --op-color-primary-plus-five: light-dark(
412
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%),
413
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%)
414
+ );
415
+ --op-color-primary-plus-four: light-dark(
416
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%),
417
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%)
418
+ );
419
+ --op-color-primary-plus-three: light-dark(
420
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 70%),
421
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 29%)
422
+ );
423
+ --op-color-primary-plus-two: light-dark(
424
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%),
425
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%)
426
+ );
427
+ --op-color-primary-plus-one: light-dark(
428
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 45%),
429
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 35%)
430
+ );
431
+ --op-color-primary-base: light-dark(
432
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%),
433
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%)
434
+ );
435
+ --op-color-primary-minus-one: light-dark(
436
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 36%),
437
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%)
438
+ );
439
+ --op-color-primary-minus-two: light-dark(
440
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%),
441
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 45%)
442
+ );
443
+ --op-color-primary-minus-three: light-dark(
444
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 28%),
445
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 48%)
446
+ );
447
+ --op-color-primary-minus-four: light-dark(
448
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%),
449
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 52%)
450
+ );
451
+ --op-color-primary-minus-five: light-dark(
452
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),
453
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%)
454
+ );
455
+ --op-color-primary-minus-six: light-dark(
456
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%),
457
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%)
458
+ );
459
+ --op-color-primary-minus-seven: light-dark(
460
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%),
461
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
462
+ );
463
+ --op-color-primary-minus-eight: light-dark(
464
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%),
465
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%)
466
+ );
467
+ --op-color-primary-minus-max: light-dark(
468
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%),
469
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%)
470
+ );
471
+ /* On Scale */
472
+ --op-color-primary-on-plus-max: light-dark(
473
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%),
474
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%)
475
+ );
476
+ --op-color-primary-on-plus-max-alt: light-dark(
477
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),
478
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%)
479
+ );
480
+ --op-color-primary-on-plus-eight: light-dark(
481
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%),
482
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%)
483
+ );
484
+ --op-color-primary-on-plus-eight-alt: light-dark(
485
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%),
486
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 70%)
487
+ );
488
+ --op-color-primary-on-plus-seven: light-dark(
489
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%),
490
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
491
+ );
492
+ --op-color-primary-on-plus-seven-alt: light-dark(
493
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 28%),
494
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%)
495
+ );
496
+ --op-color-primary-on-plus-six: light-dark(
497
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%),
498
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%)
499
+ );
500
+ --op-color-primary-on-plus-six-alt: light-dark(
501
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%),
502
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%)
503
+ );
504
+ --op-color-primary-on-plus-five: light-dark(
505
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),
506
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%)
507
+ );
508
+ --op-color-primary-on-plus-five-alt: light-dark(
509
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%),
510
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%)
511
+ );
512
+ --op-color-primary-on-plus-four: light-dark(
513
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%),
514
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
515
+ );
516
+ --op-color-primary-on-plus-four-alt: light-dark(
517
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%),
518
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%)
519
+ );
520
+ --op-color-primary-on-plus-three: light-dark(
521
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),
522
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%)
523
+ );
524
+ --op-color-primary-on-plus-three-alt: light-dark(
525
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 10%),
526
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
527
+ );
528
+ --op-color-primary-on-plus-two: light-dark(
529
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%),
530
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
531
+ );
532
+ --op-color-primary-on-plus-two-alt: light-dark(
533
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 6%),
534
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%)
535
+ );
536
+ --op-color-primary-on-plus-one: light-dark(
537
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
538
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
539
+ );
540
+ --op-color-primary-on-plus-one-alt: light-dark(
541
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 95%),
542
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
543
+ );
544
+ --op-color-primary-on-base: light-dark(
545
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
546
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%)
547
+ );
548
+ --op-color-primary-on-base-alt: light-dark(
549
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%),
550
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%)
551
+ );
552
+ --op-color-primary-on-minus-one: light-dark(
553
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%),
554
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
555
+ );
556
+ --op-color-primary-on-minus-one-alt: light-dark(
557
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 82%),
558
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%)
559
+ );
560
+ --op-color-primary-on-minus-two: light-dark(
561
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%),
562
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
563
+ );
564
+ --op-color-primary-on-minus-two-alt: light-dark(
565
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%),
566
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%)
567
+ );
568
+ --op-color-primary-on-minus-three: light-dark(
569
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%),
570
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
571
+ );
572
+ --op-color-primary-on-minus-three-alt: light-dark(
573
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 74%),
574
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%)
575
+ );
576
+ --op-color-primary-on-minus-four: light-dark(
577
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%),
578
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%)
579
+ );
580
+ --op-color-primary-on-minus-four-alt: light-dark(
581
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%),
582
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%)
583
+ );
584
+ --op-color-primary-on-minus-five: light-dark(
585
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%),
586
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%)
587
+ );
588
+ --op-color-primary-on-minus-five-alt: light-dark(
589
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%),
590
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%)
591
+ );
592
+ --op-color-primary-on-minus-six: light-dark(
593
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%),
594
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%)
595
+ );
596
+ --op-color-primary-on-minus-six-alt: light-dark(
597
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 82%),
598
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%)
599
+ );
600
+ --op-color-primary-on-minus-seven: light-dark(
601
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%),
602
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%)
603
+ );
604
+ --op-color-primary-on-minus-seven-alt: light-dark(
605
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%),
606
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 34%)
607
+ );
608
+ --op-color-primary-on-minus-eight: light-dark(
609
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%),
610
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%)
611
+ );
612
+ --op-color-primary-on-minus-eight-alt: light-dark(
613
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%),
614
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%)
615
+ );
616
+ --op-color-primary-on-minus-max: light-dark(
617
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
618
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%)
619
+ );
620
+ --op-color-primary-on-minus-max-alt: light-dark(
621
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%),
622
+ hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%)
623
+ );
410
624
  /**
411
625
  * @tokens Neutral Colors
412
626
  * @presenter Color
413
627
  */
414
628
  --op-color-neutral-original: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) var(--op-color-neutral-l));
415
- --op-color-neutral-plus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
416
- --op-color-neutral-plus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%);
417
- --op-color-neutral-plus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 96%);
418
- --op-color-neutral-plus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%);
419
- --op-color-neutral-plus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
420
- --op-color-neutral-plus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%);
421
- --op-color-neutral-plus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 70%);
422
- --op-color-neutral-plus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 64%);
423
- --op-color-neutral-plus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 44%);
424
- --op-color-neutral-base: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%);
425
- --op-color-neutral-minus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%);
426
- --op-color-neutral-minus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%);
427
- --op-color-neutral-minus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 28%);
428
- --op-color-neutral-minus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%);
429
- --op-color-neutral-minus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%);
430
- --op-color-neutral-minus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%);
431
- --op-color-neutral-minus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%);
432
- --op-color-neutral-minus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
433
- --op-color-neutral-minus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 0%);
434
- --op-color-neutral-on-plus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 0%);
435
- --op-color-neutral-on-plus-max-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%);
436
- --op-color-neutral-on-plus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
437
- --op-color-neutral-on-plus-eight-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 34%);
438
- --op-color-neutral-on-plus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%);
439
- --op-color-neutral-on-plus-seven-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 28%);
440
- --op-color-neutral-on-plus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%);
441
- --op-color-neutral-on-plus-six-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%);
442
- --op-color-neutral-on-plus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%);
443
- --op-color-neutral-on-plus-five-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%);
444
- --op-color-neutral-on-plus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%);
445
- --op-color-neutral-on-plus-four-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
446
- --op-color-neutral-on-plus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%);
447
- --op-color-neutral-on-plus-three-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 10%);
448
- --op-color-neutral-on-plus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%);
449
- --op-color-neutral-on-plus-two-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 6%);
450
- --op-color-neutral-on-plus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
451
- --op-color-neutral-on-plus-one-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 95%);
452
- --op-color-neutral-on-base: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
453
- --op-color-neutral-on-base-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
454
- --op-color-neutral-on-minus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%);
455
- --op-color-neutral-on-minus-one-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%);
456
- --op-color-neutral-on-minus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
457
- --op-color-neutral-on-minus-two-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 78%);
458
- --op-color-neutral-on-minus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 86%);
459
- --op-color-neutral-on-minus-three-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 74%);
460
- --op-color-neutral-on-minus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%);
461
- --op-color-neutral-on-minus-four-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 76%);
462
- --op-color-neutral-on-minus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
463
- --op-color-neutral-on-minus-five-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 76%);
464
- --op-color-neutral-on-minus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%);
465
- --op-color-neutral-on-minus-six-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 82%);
466
- --op-color-neutral-on-minus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 96%);
467
- --op-color-neutral-on-minus-seven-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%);
468
- --op-color-neutral-on-minus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%);
469
- --op-color-neutral-on-minus-eight-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 86%);
470
- --op-color-neutral-on-minus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
471
- --op-color-neutral-on-minus-max-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
629
+ /* Main Scale */
630
+ --op-color-neutral-plus-max: light-dark(
631
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),
632
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%)
633
+ );
634
+ --op-color-neutral-plus-eight: light-dark(
635
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%),
636
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 10%)
637
+ );
638
+ --op-color-neutral-plus-seven: light-dark(
639
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 96%),
640
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 14%)
641
+ );
642
+ --op-color-neutral-plus-six: light-dark(
643
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%),
644
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%)
645
+ );
646
+ --op-color-neutral-plus-five: light-dark(
647
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%),
648
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 18%)
649
+ );
650
+ --op-color-neutral-plus-four: light-dark(
651
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),
652
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%)
653
+ );
654
+ --op-color-neutral-plus-three: light-dark(
655
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 70%),
656
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%)
657
+ );
658
+ --op-color-neutral-plus-two: light-dark(
659
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 64%),
660
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%)
661
+ );
662
+ --op-color-neutral-plus-one: light-dark(
663
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 44%),
664
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 30%)
665
+ );
666
+ --op-color-neutral-base: light-dark(
667
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%),
668
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%)
669
+ );
670
+ --op-color-neutral-minus-one: light-dark(
671
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%),
672
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%)
673
+ );
674
+ --op-color-neutral-minus-two: light-dark(
675
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%),
676
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%)
677
+ );
678
+ --op-color-neutral-minus-three: light-dark(
679
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 28%),
680
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 44%)
681
+ );
682
+ --op-color-neutral-minus-four: light-dark(
683
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%),
684
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 52%)
685
+ );
686
+ --op-color-neutral-minus-five: light-dark(
687
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%),
688
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 64%)
689
+ );
690
+ --op-color-neutral-minus-six: light-dark(
691
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%),
692
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%)
693
+ );
694
+ --op-color-neutral-minus-seven: light-dark(
695
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%),
696
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%)
697
+ );
698
+ --op-color-neutral-minus-eight: light-dark(
699
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%),
700
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
701
+ );
702
+ --op-color-neutral-minus-max: light-dark(
703
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 0%),
704
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%)
705
+ );
706
+ /* On Scale */
707
+ --op-color-neutral-on-plus-max: light-dark(
708
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 0%),
709
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%)
710
+ );
711
+ --op-color-neutral-on-plus-max-alt: light-dark(
712
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%),
713
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%)
714
+ );
715
+ --op-color-neutral-on-plus-eight: light-dark(
716
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%),
717
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
718
+ );
719
+ --op-color-neutral-on-plus-eight-alt: light-dark(
720
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 34%),
721
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%)
722
+ );
723
+ --op-color-neutral-on-plus-seven: light-dark(
724
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%),
725
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%)
726
+ );
727
+ --op-color-neutral-on-plus-seven-alt: light-dark(
728
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 28%),
729
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 58%)
730
+ );
731
+ --op-color-neutral-on-plus-six: light-dark(
732
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%),
733
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%)
734
+ );
735
+ --op-color-neutral-on-plus-six-alt: light-dark(
736
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%),
737
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%)
738
+ );
739
+ --op-color-neutral-on-plus-five: light-dark(
740
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%),
741
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%)
742
+ );
743
+ --op-color-neutral-on-plus-five-alt: light-dark(
744
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%),
745
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%)
746
+ );
747
+ --op-color-neutral-on-plus-four: light-dark(
748
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%),
749
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
750
+ );
751
+ --op-color-neutral-on-plus-four-alt: light-dark(
752
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%),
753
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 68%)
754
+ );
755
+ --op-color-neutral-on-plus-three: light-dark(
756
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%),
757
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
758
+ );
759
+ --op-color-neutral-on-plus-three-alt: light-dark(
760
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 10%),
761
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 68%)
762
+ );
763
+ --op-color-neutral-on-plus-two: light-dark(
764
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%),
765
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
766
+ );
767
+ --op-color-neutral-on-plus-two-alt: light-dark(
768
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 6%),
769
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%)
770
+ );
771
+ --op-color-neutral-on-plus-one: light-dark(
772
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),
773
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%)
774
+ );
775
+ --op-color-neutral-on-plus-one-alt: light-dark(
776
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 95%),
777
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 75%)
778
+ );
779
+ --op-color-neutral-on-base: light-dark(
780
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),
781
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%)
782
+ );
783
+ --op-color-neutral-on-base-alt: light-dark(
784
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%),
785
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 78%)
786
+ );
787
+ --op-color-neutral-on-minus-one: light-dark(
788
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%),
789
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%)
790
+ );
791
+ --op-color-neutral-on-minus-one-alt: light-dark(
792
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),
793
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%)
794
+ );
795
+ --op-color-neutral-on-minus-two: light-dark(
796
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%),
797
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%)
798
+ );
799
+ --op-color-neutral-on-minus-two-alt: light-dark(
800
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 78%),
801
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%)
802
+ );
803
+ --op-color-neutral-on-minus-three: light-dark(
804
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 86%),
805
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 99%)
806
+ );
807
+ --op-color-neutral-on-minus-three-alt: light-dark(
808
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 74%),
809
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 95%)
810
+ );
811
+ --op-color-neutral-on-minus-four: light-dark(
812
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),
813
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 11%)
814
+ );
815
+ --op-color-neutral-on-minus-four-alt: light-dark(
816
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 76%),
817
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%)
818
+ );
819
+ --op-color-neutral-on-minus-five: light-dark(
820
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%),
821
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%)
822
+ );
823
+ --op-color-neutral-on-minus-five-alt: light-dark(
824
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 76%),
825
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%)
826
+ );
827
+ --op-color-neutral-on-minus-six: light-dark(
828
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%),
829
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%)
830
+ );
831
+ --op-color-neutral-on-minus-six-alt: light-dark(
832
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 82%),
833
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%)
834
+ );
835
+ --op-color-neutral-on-minus-seven: light-dark(
836
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 96%),
837
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%)
838
+ );
839
+ --op-color-neutral-on-minus-seven-alt: light-dark(
840
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),
841
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%)
842
+ );
843
+ --op-color-neutral-on-minus-eight: light-dark(
844
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%),
845
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%)
846
+ );
847
+ --op-color-neutral-on-minus-eight-alt: light-dark(
848
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 86%),
849
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%)
850
+ );
851
+ --op-color-neutral-on-minus-max: light-dark(
852
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),
853
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%)
854
+ );
855
+ --op-color-neutral-on-minus-max-alt: light-dark(
856
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%),
857
+ hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 48%)
858
+ );
472
859
  /**
473
860
  * @tokens Alerts Warning Colors
474
861
  * @presenter Color
475
862
  */
863
+ /* prettier-ignore */
476
864
  --op-color-alerts-warning-original: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) var(--op-color-alerts-warning-l));
477
- --op-color-alerts-warning-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%);
478
- --op-color-alerts-warning-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%);
479
- --op-color-alerts-warning-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
480
- --op-color-alerts-warning-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 94%);
481
- --op-color-alerts-warning-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 90%);
482
- --op-color-alerts-warning-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
483
- --op-color-alerts-warning-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
484
- --op-color-alerts-warning-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 64%);
485
- --op-color-alerts-warning-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%);
486
- --op-color-alerts-warning-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 40%);
487
- --op-color-alerts-warning-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%);
488
- --op-color-alerts-warning-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%);
489
- --op-color-alerts-warning-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 18%);
490
- --op-color-alerts-warning-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%);
491
- --op-color-alerts-warning-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
492
- --op-color-alerts-warning-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
493
- --op-color-alerts-warning-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
494
- --op-color-alerts-warning-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
495
- --op-color-alerts-warning-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
496
- --op-color-alerts-warning-on-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
497
- --op-color-alerts-warning-on-plus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
498
- --op-color-alerts-warning-on-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
499
- --op-color-alerts-warning-on-plus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
500
- --op-color-alerts-warning-on-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
501
- --op-color-alerts-warning-on-plus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%);
502
- --op-color-alerts-warning-on-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%);
503
- --op-color-alerts-warning-on-plus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%);
504
- --op-color-alerts-warning-on-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
505
- --op-color-alerts-warning-on-plus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 25%);
506
- --op-color-alerts-warning-on-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
507
- --op-color-alerts-warning-on-plus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
508
- --op-color-alerts-warning-on-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
509
- --op-color-alerts-warning-on-plus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
510
- --op-color-alerts-warning-on-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%);
511
- --op-color-alerts-warning-on-plus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%);
512
- --op-color-alerts-warning-on-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
513
- --op-color-alerts-warning-on-plus-one-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 15%);
514
- --op-color-alerts-warning-on-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
515
- --op-color-alerts-warning-on-base-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
516
- --op-color-alerts-warning-on-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%);
517
- --op-color-alerts-warning-on-minus-one-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
518
- --op-color-alerts-warning-on-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
519
- --op-color-alerts-warning-on-minus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%);
520
- --op-color-alerts-warning-on-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 92%);
521
- --op-color-alerts-warning-on-minus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
522
- --op-color-alerts-warning-on-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
523
- --op-color-alerts-warning-on-minus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%);
524
- --op-color-alerts-warning-on-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
525
- --op-color-alerts-warning-on-minus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%);
526
- --op-color-alerts-warning-on-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 94%);
527
- --op-color-alerts-warning-on-minus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 82%);
528
- --op-color-alerts-warning-on-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
529
- --op-color-alerts-warning-on-minus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%);
530
- --op-color-alerts-warning-on-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%);
531
- --op-color-alerts-warning-on-minus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 86%);
532
- --op-color-alerts-warning-on-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%);
533
- --op-color-alerts-warning-on-minus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
865
+ /* Main Scale */
866
+ --op-color-alerts-warning-plus-max: light-dark(
867
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%),
868
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%)
869
+ );
870
+ --op-color-alerts-warning-plus-eight: light-dark(
871
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%),
872
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%)
873
+ );
874
+ --op-color-alerts-warning-plus-seven: light-dark(
875
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%),
876
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%)
877
+ );
878
+ --op-color-alerts-warning-plus-six: light-dark(
879
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 94%),
880
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%)
881
+ );
882
+ --op-color-alerts-warning-plus-five: light-dark(
883
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 90%),
884
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%)
885
+ );
886
+ --op-color-alerts-warning-plus-four: light-dark(
887
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%),
888
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%)
889
+ );
890
+ --op-color-alerts-warning-plus-three: light-dark(
891
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%),
892
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%)
893
+ );
894
+ --op-color-alerts-warning-plus-two: light-dark(
895
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 64%),
896
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%)
897
+ );
898
+ --op-color-alerts-warning-plus-one: light-dark(
899
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%),
900
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%)
901
+ );
902
+ --op-color-alerts-warning-base: light-dark(
903
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 40%),
904
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 32%)
905
+ );
906
+ --op-color-alerts-warning-minus-one: light-dark(
907
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%),
908
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 36%)
909
+ );
910
+ --op-color-alerts-warning-minus-two: light-dark(
911
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%),
912
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 40%)
913
+ );
914
+ --op-color-alerts-warning-minus-three: light-dark(
915
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 18%),
916
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 48%)
917
+ );
918
+ --op-color-alerts-warning-minus-four: light-dark(
919
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%),
920
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 52%)
921
+ );
922
+ --op-color-alerts-warning-minus-five: light-dark(
923
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%),
924
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 64%)
925
+ );
926
+ --op-color-alerts-warning-minus-six: light-dark(
927
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%),
928
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%)
929
+ );
930
+ --op-color-alerts-warning-minus-seven: light-dark(
931
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%),
932
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%)
933
+ );
934
+ --op-color-alerts-warning-minus-eight: light-dark(
935
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%),
936
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)
937
+ );
938
+ --op-color-alerts-warning-minus-max: light-dark(
939
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),
940
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%)
941
+ );
942
+ /* On Scale */
943
+ --op-color-alerts-warning-on-plus-max: light-dark(
944
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),
945
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
946
+ );
947
+ --op-color-alerts-warning-on-plus-max-alt: light-dark(
948
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
949
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 42%)
950
+ );
951
+ --op-color-alerts-warning-on-plus-eight: light-dark(
952
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%),
953
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)
954
+ );
955
+ --op-color-alerts-warning-on-plus-eight-alt: light-dark(
956
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%),
957
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
958
+ );
959
+ --op-color-alerts-warning-on-plus-seven: light-dark(
960
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%),
961
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%)
962
+ );
963
+ --op-color-alerts-warning-on-plus-seven-alt: light-dark(
964
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%),
965
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%)
966
+ );
967
+ --op-color-alerts-warning-on-plus-six: light-dark(
968
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%),
969
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%)
970
+ );
971
+ --op-color-alerts-warning-on-plus-six-alt: light-dark(
972
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%),
973
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%)
974
+ );
975
+ --op-color-alerts-warning-on-plus-five: light-dark(
976
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
977
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%)
978
+ );
979
+ --op-color-alerts-warning-on-plus-five-alt: light-dark(
980
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 25%),
981
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%)
982
+ );
983
+ --op-color-alerts-warning-on-plus-four: light-dark(
984
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
985
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%)
986
+ );
987
+ --op-color-alerts-warning-on-plus-four-alt: light-dark(
988
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),
989
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%)
990
+ );
991
+ --op-color-alerts-warning-on-plus-three: light-dark(
992
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
993
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)
994
+ );
995
+ --op-color-alerts-warning-on-plus-three-alt: light-dark(
996
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%),
997
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
998
+ );
999
+ --op-color-alerts-warning-on-plus-two: light-dark(
1000
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%),
1001
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)
1002
+ );
1003
+ --op-color-alerts-warning-on-plus-two-alt: light-dark(
1004
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%),
1005
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
1006
+ );
1007
+ --op-color-alerts-warning-on-plus-one: light-dark(
1008
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
1009
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%)
1010
+ );
1011
+ --op-color-alerts-warning-on-plus-one-alt: light-dark(
1012
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 15%),
1013
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%)
1014
+ );
1015
+ --op-color-alerts-warning-on-base: light-dark(
1016
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%),
1017
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%)
1018
+ );
1019
+ --op-color-alerts-warning-on-base-alt: light-dark(
1020
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),
1021
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%)
1022
+ );
1023
+ --op-color-alerts-warning-on-minus-one: light-dark(
1024
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%),
1025
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%)
1026
+ );
1027
+ --op-color-alerts-warning-on-minus-one-alt: light-dark(
1028
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),
1029
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
1030
+ );
1031
+ --op-color-alerts-warning-on-minus-two: light-dark(
1032
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%),
1033
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%)
1034
+ );
1035
+ --op-color-alerts-warning-on-minus-two-alt: light-dark(
1036
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%),
1037
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%)
1038
+ );
1039
+ --op-color-alerts-warning-on-minus-three: light-dark(
1040
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 92%),
1041
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%)
1042
+ );
1043
+ --op-color-alerts-warning-on-minus-three-alt: light-dark(
1044
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%),
1045
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%)
1046
+ );
1047
+ --op-color-alerts-warning-on-minus-four: light-dark(
1048
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),
1049
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%)
1050
+ );
1051
+ --op-color-alerts-warning-on-minus-four-alt: light-dark(
1052
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%),
1053
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%)
1054
+ );
1055
+ --op-color-alerts-warning-on-minus-five: light-dark(
1056
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),
1057
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%)
1058
+ );
1059
+ --op-color-alerts-warning-on-minus-five-alt: light-dark(
1060
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%),
1061
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 21%)
1062
+ );
1063
+ --op-color-alerts-warning-on-minus-six: light-dark(
1064
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 94%),
1065
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%)
1066
+ );
1067
+ --op-color-alerts-warning-on-minus-six-alt: light-dark(
1068
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 82%),
1069
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%)
1070
+ );
1071
+ --op-color-alerts-warning-on-minus-seven: light-dark(
1072
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%),
1073
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%)
1074
+ );
1075
+ --op-color-alerts-warning-on-minus-seven-alt: light-dark(
1076
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%),
1077
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%)
1078
+ );
1079
+ --op-color-alerts-warning-on-minus-eight: light-dark(
1080
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%),
1081
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%)
1082
+ );
1083
+ --op-color-alerts-warning-on-minus-eight-alt: light-dark(
1084
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 86%),
1085
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%)
1086
+ );
1087
+ --op-color-alerts-warning-on-minus-max: light-dark(
1088
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%),
1089
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%)
1090
+ );
1091
+ --op-color-alerts-warning-on-minus-max-alt: light-dark(
1092
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),
1093
+ hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%)
1094
+ );
534
1095
  /**
535
1096
  * @tokens Alerts Danger Colors
536
1097
  * @presenter Color
537
1098
  */
1099
+ /* prettier-ignore */
538
1100
  --op-color-alerts-danger-original: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) var(--op-color-alerts-danger-l));
539
- --op-color-alerts-danger-plus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
540
- --op-color-alerts-danger-plus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%);
541
- --op-color-alerts-danger-plus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%);
542
- --op-color-alerts-danger-plus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%);
543
- --op-color-alerts-danger-plus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%);
544
- --op-color-alerts-danger-plus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%);
545
- --op-color-alerts-danger-plus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%);
546
- --op-color-alerts-danger-plus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 64%);
547
- --op-color-alerts-danger-plus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 50%);
548
- --op-color-alerts-danger-base: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 40%);
549
- --op-color-alerts-danger-minus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%);
550
- --op-color-alerts-danger-minus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 32%);
551
- --op-color-alerts-danger-minus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%);
552
- --op-color-alerts-danger-minus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
553
- --op-color-alerts-danger-minus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%);
554
- --op-color-alerts-danger-minus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%);
555
- --op-color-alerts-danger-minus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
556
- --op-color-alerts-danger-minus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
557
- --op-color-alerts-danger-minus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%);
558
- --op-color-alerts-danger-on-plus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%);
559
- --op-color-alerts-danger-on-plus-max-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%);
560
- --op-color-alerts-danger-on-plus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
561
- --op-color-alerts-danger-on-plus-eight-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
562
- --op-color-alerts-danger-on-plus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
563
- --op-color-alerts-danger-on-plus-seven-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%);
564
- --op-color-alerts-danger-on-plus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%);
565
- --op-color-alerts-danger-on-plus-six-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%);
566
- --op-color-alerts-danger-on-plus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%);
567
- --op-color-alerts-danger-on-plus-five-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 30%);
568
- --op-color-alerts-danger-on-plus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
569
- --op-color-alerts-danger-on-plus-four-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
570
- --op-color-alerts-danger-on-plus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%);
571
- --op-color-alerts-danger-on-plus-three-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%);
572
- --op-color-alerts-danger-on-plus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%);
573
- --op-color-alerts-danger-on-plus-two-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 6%);
574
- --op-color-alerts-danger-on-plus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
575
- --op-color-alerts-danger-on-plus-one-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 3%);
576
- --op-color-alerts-danger-on-base: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
577
- --op-color-alerts-danger-on-base-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%);
578
- --op-color-alerts-danger-on-minus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%);
579
- --op-color-alerts-danger-on-minus-one-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 89%);
580
- --op-color-alerts-danger-on-minus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%);
581
- --op-color-alerts-danger-on-minus-two-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 83%);
582
- --op-color-alerts-danger-on-minus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 86%);
583
- --op-color-alerts-danger-on-minus-three-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 79%);
584
- --op-color-alerts-danger-on-minus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%);
585
- --op-color-alerts-danger-on-minus-four-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 77%);
586
- --op-color-alerts-danger-on-minus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
587
- --op-color-alerts-danger-on-minus-five-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 81%);
588
- --op-color-alerts-danger-on-minus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%);
589
- --op-color-alerts-danger-on-minus-six-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 87%);
590
- --op-color-alerts-danger-on-minus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%);
591
- --op-color-alerts-danger-on-minus-seven-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 89%);
592
- --op-color-alerts-danger-on-minus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%);
593
- --op-color-alerts-danger-on-minus-eight-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 91%);
594
- --op-color-alerts-danger-on-minus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
595
- --op-color-alerts-danger-on-minus-max-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%);
1101
+ /* Main Scale */
1102
+ --op-color-alerts-danger-plus-max: light-dark(
1103
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%),
1104
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%)
1105
+ );
1106
+ --op-color-alerts-danger-plus-eight: light-dark(
1107
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%),
1108
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%)
1109
+ );
1110
+ --op-color-alerts-danger-plus-seven: light-dark(
1111
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%),
1112
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%)
1113
+ );
1114
+ --op-color-alerts-danger-plus-six: light-dark(
1115
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%),
1116
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 12%)
1117
+ );
1118
+ --op-color-alerts-danger-plus-five: light-dark(
1119
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%),
1120
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 14%)
1121
+ );
1122
+ --op-color-alerts-danger-plus-four: light-dark(
1123
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%),
1124
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%)
1125
+ );
1126
+ --op-color-alerts-danger-plus-three: light-dark(
1127
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%),
1128
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%)
1129
+ );
1130
+ --op-color-alerts-danger-plus-two: light-dark(
1131
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 64%),
1132
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%)
1133
+ );
1134
+ --op-color-alerts-danger-plus-one: light-dark(
1135
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 50%),
1136
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%)
1137
+ );
1138
+ --op-color-alerts-danger-base: light-dark(
1139
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 40%),
1140
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 32%)
1141
+ );
1142
+ --op-color-alerts-danger-minus-one: light-dark(
1143
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%),
1144
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%)
1145
+ );
1146
+ --op-color-alerts-danger-minus-two: light-dark(
1147
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 32%),
1148
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 40%)
1149
+ );
1150
+ --op-color-alerts-danger-minus-three: light-dark(
1151
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%),
1152
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 48%)
1153
+ );
1154
+ --op-color-alerts-danger-minus-four: light-dark(
1155
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%),
1156
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 52%)
1157
+ );
1158
+ --op-color-alerts-danger-minus-five: light-dark(
1159
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),
1160
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 64%)
1161
+ );
1162
+ --op-color-alerts-danger-minus-six: light-dark(
1163
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%),
1164
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%)
1165
+ );
1166
+ --op-color-alerts-danger-minus-seven: light-dark(
1167
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%),
1168
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%)
1169
+ );
1170
+ --op-color-alerts-danger-minus-eight: light-dark(
1171
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%),
1172
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
1173
+ );
1174
+ --op-color-alerts-danger-minus-max: light-dark(
1175
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%),
1176
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%)
1177
+ );
1178
+ /* On Scale */
1179
+ --op-color-alerts-danger-on-plus-max: light-dark(
1180
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%),
1181
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%)
1182
+ );
1183
+ --op-color-alerts-danger-on-plus-max-alt: light-dark(
1184
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),
1185
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
1186
+ );
1187
+ --op-color-alerts-danger-on-plus-eight: light-dark(
1188
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%),
1189
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
1190
+ );
1191
+ --op-color-alerts-danger-on-plus-eight-alt: light-dark(
1192
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%),
1193
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%)
1194
+ );
1195
+ --op-color-alerts-danger-on-plus-seven: light-dark(
1196
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%),
1197
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%)
1198
+ );
1199
+ --op-color-alerts-danger-on-plus-seven-alt: light-dark(
1200
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%),
1201
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%)
1202
+ );
1203
+ --op-color-alerts-danger-on-plus-six: light-dark(
1204
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%),
1205
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%)
1206
+ );
1207
+ --op-color-alerts-danger-on-plus-six-alt: light-dark(
1208
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%),
1209
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 68%)
1210
+ );
1211
+ --op-color-alerts-danger-on-plus-five: light-dark(
1212
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),
1213
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%)
1214
+ );
1215
+ --op-color-alerts-danger-on-plus-five-alt: light-dark(
1216
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 30%),
1217
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%)
1218
+ );
1219
+ --op-color-alerts-danger-on-plus-four: light-dark(
1220
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%),
1221
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%)
1222
+ );
1223
+ --op-color-alerts-danger-on-plus-four-alt: light-dark(
1224
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%),
1225
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%)
1226
+ );
1227
+ --op-color-alerts-danger-on-plus-three: light-dark(
1228
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),
1229
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
1230
+ );
1231
+ --op-color-alerts-danger-on-plus-three-alt: light-dark(
1232
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%),
1233
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%)
1234
+ );
1235
+ --op-color-alerts-danger-on-plus-two: light-dark(
1236
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%),
1237
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
1238
+ );
1239
+ --op-color-alerts-danger-on-plus-two-alt: light-dark(
1240
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 6%),
1241
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%)
1242
+ );
1243
+ --op-color-alerts-danger-on-plus-one: light-dark(
1244
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%),
1245
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%)
1246
+ );
1247
+ --op-color-alerts-danger-on-plus-one-alt: light-dark(
1248
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 3%),
1249
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%)
1250
+ );
1251
+ --op-color-alerts-danger-on-base: light-dark(
1252
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%),
1253
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%)
1254
+ );
1255
+ --op-color-alerts-danger-on-base-alt: light-dark(
1256
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%),
1257
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%)
1258
+ );
1259
+ --op-color-alerts-danger-on-minus-one: light-dark(
1260
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%),
1261
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%)
1262
+ );
1263
+ --op-color-alerts-danger-on-minus-one-alt: light-dark(
1264
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 89%),
1265
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
1266
+ );
1267
+ --op-color-alerts-danger-on-minus-two: light-dark(
1268
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%),
1269
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%)
1270
+ );
1271
+ --op-color-alerts-danger-on-minus-two-alt: light-dark(
1272
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 83%),
1273
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%)
1274
+ );
1275
+ --op-color-alerts-danger-on-minus-three: light-dark(
1276
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 86%),
1277
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 6%)
1278
+ );
1279
+ --op-color-alerts-danger-on-minus-three-alt: light-dark(
1280
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 79%),
1281
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%)
1282
+ );
1283
+ --op-color-alerts-danger-on-minus-four: light-dark(
1284
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%),
1285
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%)
1286
+ );
1287
+ --op-color-alerts-danger-on-minus-four-alt: light-dark(
1288
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 77%),
1289
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%)
1290
+ );
1291
+ --op-color-alerts-danger-on-minus-five: light-dark(
1292
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%),
1293
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%)
1294
+ );
1295
+ --op-color-alerts-danger-on-minus-five-alt: light-dark(
1296
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 81%),
1297
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%)
1298
+ );
1299
+ --op-color-alerts-danger-on-minus-six: light-dark(
1300
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%),
1301
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%)
1302
+ );
1303
+ --op-color-alerts-danger-on-minus-six-alt: light-dark(
1304
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 87%),
1305
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 22%)
1306
+ );
1307
+ --op-color-alerts-danger-on-minus-seven: light-dark(
1308
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%),
1309
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%)
1310
+ );
1311
+ --op-color-alerts-danger-on-minus-seven-alt: light-dark(
1312
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 89%),
1313
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%)
1314
+ );
1315
+ --op-color-alerts-danger-on-minus-eight: light-dark(
1316
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%),
1317
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%)
1318
+ );
1319
+ --op-color-alerts-danger-on-minus-eight-alt: light-dark(
1320
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 91%),
1321
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%)
1322
+ );
1323
+ --op-color-alerts-danger-on-minus-max: light-dark(
1324
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%),
1325
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%)
1326
+ );
1327
+ --op-color-alerts-danger-on-minus-max-alt: light-dark(
1328
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%),
1329
+ hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%)
1330
+ );
596
1331
  /**
597
1332
  * @tokens Alerts Info Colors
598
1333
  * @presenter Color
599
1334
  */
1335
+ /* prettier-ignore */
600
1336
  --op-color-alerts-info-original: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) var(--op-color-alerts-info-l));
601
- --op-color-alerts-info-plus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
602
- --op-color-alerts-info-plus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%);
603
- --op-color-alerts-info-plus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%);
604
- --op-color-alerts-info-plus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%);
605
- --op-color-alerts-info-plus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 90%);
606
- --op-color-alerts-info-plus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%);
607
- --op-color-alerts-info-plus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 70%);
608
- --op-color-alerts-info-plus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 64%);
609
- --op-color-alerts-info-plus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 56%);
610
- --op-color-alerts-info-base: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%);
611
- --op-color-alerts-info-minus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%);
612
- --op-color-alerts-info-minus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%);
613
- --op-color-alerts-info-minus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
614
- --op-color-alerts-info-minus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%);
615
- --op-color-alerts-info-minus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
616
- --op-color-alerts-info-minus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%);
617
- --op-color-alerts-info-minus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%);
618
- --op-color-alerts-info-minus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
619
- --op-color-alerts-info-minus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%);
620
- --op-color-alerts-info-on-plus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%);
621
- --op-color-alerts-info-on-plus-max-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
622
- --op-color-alerts-info-on-plus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
623
- --op-color-alerts-info-on-plus-eight-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%);
624
- --op-color-alerts-info-on-plus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%);
625
- --op-color-alerts-info-on-plus-seven-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
626
- --op-color-alerts-info-on-plus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%);
627
- --op-color-alerts-info-on-plus-six-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%);
628
- --op-color-alerts-info-on-plus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
629
- --op-color-alerts-info-on-plus-five-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%);
630
- --op-color-alerts-info-on-plus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%);
631
- --op-color-alerts-info-on-plus-four-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
632
- --op-color-alerts-info-on-plus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
633
- --op-color-alerts-info-on-plus-three-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 10%);
634
- --op-color-alerts-info-on-plus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%);
635
- --op-color-alerts-info-on-plus-two-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 6%);
636
- --op-color-alerts-info-on-plus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%);
637
- --op-color-alerts-info-on-plus-one-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 3%);
638
- --op-color-alerts-info-on-base: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
639
- --op-color-alerts-info-on-base-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
640
- --op-color-alerts-info-on-minus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%);
641
- --op-color-alerts-info-on-minus-one-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 82%);
642
- --op-color-alerts-info-on-minus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 90%);
643
- --op-color-alerts-info-on-minus-two-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%);
644
- --op-color-alerts-info-on-minus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%);
645
- --op-color-alerts-info-on-minus-three-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 74%);
646
- --op-color-alerts-info-on-minus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%);
647
- --op-color-alerts-info-on-minus-four-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%);
648
- --op-color-alerts-info-on-minus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
649
- --op-color-alerts-info-on-minus-five-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 76%);
650
- --op-color-alerts-info-on-minus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%);
651
- --op-color-alerts-info-on-minus-six-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 82%);
652
- --op-color-alerts-info-on-minus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%);
653
- --op-color-alerts-info-on-minus-seven-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%);
654
- --op-color-alerts-info-on-minus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%);
655
- --op-color-alerts-info-on-minus-eight-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%);
656
- --op-color-alerts-info-on-minus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
657
- --op-color-alerts-info-on-minus-max-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
1337
+ /* Main Scale */
1338
+ --op-color-alerts-info-plus-max: light-dark(
1339
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%),
1340
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%)
1341
+ );
1342
+ --op-color-alerts-info-plus-eight: light-dark(
1343
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%),
1344
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%)
1345
+ );
1346
+ --op-color-alerts-info-plus-seven: light-dark(
1347
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%),
1348
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%)
1349
+ );
1350
+ --op-color-alerts-info-plus-six: light-dark(
1351
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%),
1352
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 12%)
1353
+ );
1354
+ --op-color-alerts-info-plus-five: light-dark(
1355
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 90%),
1356
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 14%)
1357
+ );
1358
+ --op-color-alerts-info-plus-four: light-dark(
1359
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%),
1360
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%)
1361
+ );
1362
+ --op-color-alerts-info-plus-three: light-dark(
1363
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 70%),
1364
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%)
1365
+ );
1366
+ --op-color-alerts-info-plus-two: light-dark(
1367
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 64%),
1368
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%)
1369
+ );
1370
+ --op-color-alerts-info-plus-one: light-dark(
1371
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 56%),
1372
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%)
1373
+ );
1374
+ --op-color-alerts-info-base: light-dark(
1375
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%),
1376
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%)
1377
+ );
1378
+ --op-color-alerts-info-minus-one: light-dark(
1379
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%),
1380
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%)
1381
+ );
1382
+ --op-color-alerts-info-minus-two: light-dark(
1383
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%),
1384
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%)
1385
+ );
1386
+ --op-color-alerts-info-minus-three: light-dark(
1387
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%),
1388
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 48%)
1389
+ );
1390
+ --op-color-alerts-info-minus-four: light-dark(
1391
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%),
1392
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 52%)
1393
+ );
1394
+ --op-color-alerts-info-minus-five: light-dark(
1395
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),
1396
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 64%)
1397
+ );
1398
+ --op-color-alerts-info-minus-six: light-dark(
1399
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%),
1400
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%)
1401
+ );
1402
+ --op-color-alerts-info-minus-seven: light-dark(
1403
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%),
1404
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
1405
+ );
1406
+ --op-color-alerts-info-minus-eight: light-dark(
1407
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%),
1408
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
1409
+ );
1410
+ --op-color-alerts-info-minus-max: light-dark(
1411
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%),
1412
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%)
1413
+ );
1414
+ /* On Scale */
1415
+ --op-color-alerts-info-on-plus-max: light-dark(
1416
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%),
1417
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%)
1418
+ );
1419
+ --op-color-alerts-info-on-plus-max-alt: light-dark(
1420
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),
1421
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
1422
+ );
1423
+ --op-color-alerts-info-on-plus-eight: light-dark(
1424
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%),
1425
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
1426
+ );
1427
+ --op-color-alerts-info-on-plus-eight-alt: light-dark(
1428
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%),
1429
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%)
1430
+ );
1431
+ --op-color-alerts-info-on-plus-seven: light-dark(
1432
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%),
1433
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
1434
+ );
1435
+ --op-color-alerts-info-on-plus-seven-alt: light-dark(
1436
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%),
1437
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 70%)
1438
+ );
1439
+ --op-color-alerts-info-on-plus-six: light-dark(
1440
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%),
1441
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%)
1442
+ );
1443
+ --op-color-alerts-info-on-plus-six-alt: light-dark(
1444
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%),
1445
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%)
1446
+ );
1447
+ --op-color-alerts-info-on-plus-five: light-dark(
1448
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),
1449
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 76%)
1450
+ );
1451
+ --op-color-alerts-info-on-plus-five-alt: light-dark(
1452
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%),
1453
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%)
1454
+ );
1455
+ --op-color-alerts-info-on-plus-four: light-dark(
1456
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%),
1457
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
1458
+ );
1459
+ --op-color-alerts-info-on-plus-four-alt: light-dark(
1460
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%),
1461
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 66%)
1462
+ );
1463
+ --op-color-alerts-info-on-plus-three: light-dark(
1464
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),
1465
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
1466
+ );
1467
+ --op-color-alerts-info-on-plus-three-alt: light-dark(
1468
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 10%),
1469
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%)
1470
+ );
1471
+ --op-color-alerts-info-on-plus-two: light-dark(
1472
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%),
1473
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
1474
+ );
1475
+ --op-color-alerts-info-on-plus-two-alt: light-dark(
1476
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 6%),
1477
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 74%)
1478
+ );
1479
+ --op-color-alerts-info-on-plus-one: light-dark(
1480
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%),
1481
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%)
1482
+ );
1483
+ --op-color-alerts-info-on-plus-one-alt: light-dark(
1484
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 3%),
1485
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
1486
+ );
1487
+ --op-color-alerts-info-on-base: light-dark(
1488
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%),
1489
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%)
1490
+ );
1491
+ --op-color-alerts-info-on-base-alt: light-dark(
1492
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%),
1493
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%)
1494
+ );
1495
+ --op-color-alerts-info-on-minus-one: light-dark(
1496
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%),
1497
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%)
1498
+ );
1499
+ --op-color-alerts-info-on-minus-one-alt: light-dark(
1500
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 82%),
1501
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
1502
+ );
1503
+ --op-color-alerts-info-on-minus-two: light-dark(
1504
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 90%),
1505
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%)
1506
+ );
1507
+ --op-color-alerts-info-on-minus-two-alt: light-dark(
1508
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%),
1509
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%)
1510
+ );
1511
+ --op-color-alerts-info-on-minus-three: light-dark(
1512
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%),
1513
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%)
1514
+ );
1515
+ --op-color-alerts-info-on-minus-three-alt: light-dark(
1516
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 74%),
1517
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%)
1518
+ );
1519
+ --op-color-alerts-info-on-minus-four: light-dark(
1520
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%),
1521
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%)
1522
+ );
1523
+ --op-color-alerts-info-on-minus-four-alt: light-dark(
1524
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%),
1525
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%)
1526
+ );
1527
+ --op-color-alerts-info-on-minus-five: light-dark(
1528
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%),
1529
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%)
1530
+ );
1531
+ --op-color-alerts-info-on-minus-five-alt: light-dark(
1532
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 76%),
1533
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%)
1534
+ );
1535
+ --op-color-alerts-info-on-minus-six: light-dark(
1536
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%),
1537
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%)
1538
+ );
1539
+ --op-color-alerts-info-on-minus-six-alt: light-dark(
1540
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 82%),
1541
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%)
1542
+ );
1543
+ --op-color-alerts-info-on-minus-seven: light-dark(
1544
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%),
1545
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%)
1546
+ );
1547
+ --op-color-alerts-info-on-minus-seven-alt: light-dark(
1548
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%),
1549
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%)
1550
+ );
1551
+ --op-color-alerts-info-on-minus-eight: light-dark(
1552
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%),
1553
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%)
1554
+ );
1555
+ --op-color-alerts-info-on-minus-eight-alt: light-dark(
1556
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%),
1557
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 34%)
1558
+ );
1559
+ --op-color-alerts-info-on-minus-max: light-dark(
1560
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%),
1561
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%)
1562
+ );
1563
+ --op-color-alerts-info-on-minus-max-alt: light-dark(
1564
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%),
1565
+ hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%)
1566
+ );
658
1567
  /**
659
1568
  * @tokens Alerts Notice Colors
660
1569
  * @presenter Color
661
1570
  */
1571
+ /* prettier-ignore */
662
1572
  --op-color-alerts-notice-original: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) var(--op-color-alerts-notice-l));
663
- --op-color-alerts-notice-plus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
664
- --op-color-alerts-notice-plus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
665
- --op-color-alerts-notice-plus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%);
666
- --op-color-alerts-notice-plus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%);
667
- --op-color-alerts-notice-plus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 90%);
668
- --op-color-alerts-notice-plus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%);
669
- --op-color-alerts-notice-plus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 70%);
670
- --op-color-alerts-notice-plus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 64%);
671
- --op-color-alerts-notice-plus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 47%);
672
- --op-color-alerts-notice-base: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 40%);
673
- --op-color-alerts-notice-minus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 32%);
674
- --op-color-alerts-notice-minus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%);
675
- --op-color-alerts-notice-minus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%);
676
- --op-color-alerts-notice-minus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 22%);
677
- --op-color-alerts-notice-minus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 18%);
678
- --op-color-alerts-notice-minus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%);
679
- --op-color-alerts-notice-minus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%);
680
- --op-color-alerts-notice-minus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%);
681
- --op-color-alerts-notice-minus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%);
682
- --op-color-alerts-notice-on-plus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%);
683
- --op-color-alerts-notice-on-plus-max-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
684
- --op-color-alerts-notice-on-plus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%);
685
- --op-color-alerts-notice-on-plus-eight-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%);
686
- --op-color-alerts-notice-on-plus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%);
687
- --op-color-alerts-notice-on-plus-seven-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%);
688
- --op-color-alerts-notice-on-plus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%);
689
- --op-color-alerts-notice-on-plus-six-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%);
690
- --op-color-alerts-notice-on-plus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
691
- --op-color-alerts-notice-on-plus-five-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 30%);
692
- --op-color-alerts-notice-on-plus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%);
693
- --op-color-alerts-notice-on-plus-four-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%);
694
- --op-color-alerts-notice-on-plus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
695
- --op-color-alerts-notice-on-plus-three-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 10%);
696
- --op-color-alerts-notice-on-plus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%);
697
- --op-color-alerts-notice-on-plus-two-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 6%);
698
- --op-color-alerts-notice-on-plus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%);
699
- --op-color-alerts-notice-on-plus-one-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 3%);
700
- --op-color-alerts-notice-on-base: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%);
701
- --op-color-alerts-notice-on-base-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%);
702
- --op-color-alerts-notice-on-minus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
703
- --op-color-alerts-notice-on-minus-one-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%);
704
- --op-color-alerts-notice-on-minus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%);
705
- --op-color-alerts-notice-on-minus-two-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 89%);
706
- --op-color-alerts-notice-on-minus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%);
707
- --op-color-alerts-notice-on-minus-three-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 85%);
708
- --op-color-alerts-notice-on-minus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
709
- --op-color-alerts-notice-on-minus-four-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 81%);
710
- --op-color-alerts-notice-on-minus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
711
- --op-color-alerts-notice-on-minus-five-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 76%);
712
- --op-color-alerts-notice-on-minus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%);
713
- --op-color-alerts-notice-on-minus-six-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 82%);
714
- --op-color-alerts-notice-on-minus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%);
715
- --op-color-alerts-notice-on-minus-seven-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%);
716
- --op-color-alerts-notice-on-minus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
717
- --op-color-alerts-notice-on-minus-eight-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 86%);
718
- --op-color-alerts-notice-on-minus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
719
- --op-color-alerts-notice-on-minus-max-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
1573
+ /* Main Scale */
1574
+ --op-color-alerts-notice-plus-max: light-dark(
1575
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%),
1576
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%)
1577
+ );
1578
+ --op-color-alerts-notice-plus-eight: light-dark(
1579
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%),
1580
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%)
1581
+ );
1582
+ --op-color-alerts-notice-plus-seven: light-dark(
1583
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),
1584
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%)
1585
+ );
1586
+ --op-color-alerts-notice-plus-six: light-dark(
1587
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%),
1588
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 12%)
1589
+ );
1590
+ --op-color-alerts-notice-plus-five: light-dark(
1591
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 90%),
1592
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 14%)
1593
+ );
1594
+ --op-color-alerts-notice-plus-four: light-dark(
1595
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%),
1596
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%)
1597
+ );
1598
+ --op-color-alerts-notice-plus-three: light-dark(
1599
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 70%),
1600
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%)
1601
+ );
1602
+ --op-color-alerts-notice-plus-two: light-dark(
1603
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 64%),
1604
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%)
1605
+ );
1606
+ --op-color-alerts-notice-plus-one: light-dark(
1607
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 47%),
1608
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%)
1609
+ );
1610
+ --op-color-alerts-notice-base: light-dark(
1611
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 40%),
1612
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 32%)
1613
+ );
1614
+ --op-color-alerts-notice-minus-one: light-dark(
1615
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 32%),
1616
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 36%)
1617
+ );
1618
+ --op-color-alerts-notice-minus-two: light-dark(
1619
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%),
1620
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 40%)
1621
+ );
1622
+ --op-color-alerts-notice-minus-three: light-dark(
1623
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%),
1624
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 48%)
1625
+ );
1626
+ --op-color-alerts-notice-minus-four: light-dark(
1627
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 22%),
1628
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 52%)
1629
+ );
1630
+ --op-color-alerts-notice-minus-five: light-dark(
1631
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 18%),
1632
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 64%)
1633
+ );
1634
+ --op-color-alerts-notice-minus-six: light-dark(
1635
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%),
1636
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%)
1637
+ );
1638
+ --op-color-alerts-notice-minus-seven: light-dark(
1639
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),
1640
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%)
1641
+ );
1642
+ --op-color-alerts-notice-minus-eight: light-dark(
1643
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%),
1644
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%)
1645
+ );
1646
+ --op-color-alerts-notice-minus-max: light-dark(
1647
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%),
1648
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%)
1649
+ );
1650
+ /* On Scale */
1651
+ --op-color-alerts-notice-on-plus-max: light-dark(
1652
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%),
1653
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%)
1654
+ );
1655
+ --op-color-alerts-notice-on-plus-max-alt: light-dark(
1656
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%),
1657
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%)
1658
+ );
1659
+ --op-color-alerts-notice-on-plus-eight: light-dark(
1660
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%),
1661
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%)
1662
+ );
1663
+ --op-color-alerts-notice-on-plus-eight-alt: light-dark(
1664
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%),
1665
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 82%)
1666
+ );
1667
+ --op-color-alerts-notice-on-plus-seven: light-dark(
1668
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),
1669
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 90%)
1670
+ );
1671
+ --op-color-alerts-notice-on-plus-seven-alt: light-dark(
1672
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%),
1673
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%)
1674
+ );
1675
+ --op-color-alerts-notice-on-plus-six: light-dark(
1676
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%),
1677
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%)
1678
+ );
1679
+ --op-color-alerts-notice-on-plus-six-alt: light-dark(
1680
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%),
1681
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%)
1682
+ );
1683
+ --op-color-alerts-notice-on-plus-five: light-dark(
1684
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%),
1685
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%)
1686
+ );
1687
+ --op-color-alerts-notice-on-plus-five-alt: light-dark(
1688
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 30%),
1689
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%)
1690
+ );
1691
+ --op-color-alerts-notice-on-plus-four: light-dark(
1692
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%),
1693
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%)
1694
+ );
1695
+ --op-color-alerts-notice-on-plus-four-alt: light-dark(
1696
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%),
1697
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%)
1698
+ );
1699
+ --op-color-alerts-notice-on-plus-three: light-dark(
1700
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%),
1701
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%)
1702
+ );
1703
+ --op-color-alerts-notice-on-plus-three-alt: light-dark(
1704
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 10%),
1705
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 78%)
1706
+ );
1707
+ --op-color-alerts-notice-on-plus-two: light-dark(
1708
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%),
1709
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%)
1710
+ );
1711
+ --op-color-alerts-notice-on-plus-two-alt: light-dark(
1712
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 6%),
1713
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%)
1714
+ );
1715
+ --op-color-alerts-notice-on-plus-one: light-dark(
1716
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),
1717
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%)
1718
+ );
1719
+ --op-color-alerts-notice-on-plus-one-alt: light-dark(
1720
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 3%),
1721
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%)
1722
+ );
1723
+ --op-color-alerts-notice-on-base: light-dark(
1724
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),
1725
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 99%)
1726
+ );
1727
+ --op-color-alerts-notice-on-base-alt: light-dark(
1728
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%),
1729
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%)
1730
+ );
1731
+ --op-color-alerts-notice-on-minus-one: light-dark(
1732
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%),
1733
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
1734
+ );
1735
+ --op-color-alerts-notice-on-minus-one-alt: light-dark(
1736
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),
1737
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 7%)
1738
+ );
1739
+ --op-color-alerts-notice-on-minus-two: light-dark(
1740
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),
1741
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
1742
+ );
1743
+ --op-color-alerts-notice-on-minus-two-alt: light-dark(
1744
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 89%),
1745
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 10%)
1746
+ );
1747
+ --op-color-alerts-notice-on-minus-three: light-dark(
1748
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%),
1749
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
1750
+ );
1751
+ --op-color-alerts-notice-on-minus-three-alt: light-dark(
1752
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 85%),
1753
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 18%)
1754
+ );
1755
+ --op-color-alerts-notice-on-minus-four: light-dark(
1756
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%),
1757
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
1758
+ );
1759
+ --op-color-alerts-notice-on-minus-four-alt: light-dark(
1760
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 81%),
1761
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%)
1762
+ );
1763
+ --op-color-alerts-notice-on-minus-five: light-dark(
1764
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%),
1765
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 6%)
1766
+ );
1767
+ --op-color-alerts-notice-on-minus-five-alt: light-dark(
1768
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 76%),
1769
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%)
1770
+ );
1771
+ --op-color-alerts-notice-on-minus-six: light-dark(
1772
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%),
1773
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
1774
+ );
1775
+ --op-color-alerts-notice-on-minus-six-alt: light-dark(
1776
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 82%),
1777
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%)
1778
+ );
1779
+ --op-color-alerts-notice-on-minus-seven: light-dark(
1780
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),
1781
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
1782
+ );
1783
+ --op-color-alerts-notice-on-minus-seven-alt: light-dark(
1784
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%),
1785
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%)
1786
+ );
1787
+ --op-color-alerts-notice-on-minus-eight: light-dark(
1788
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%),
1789
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
1790
+ );
1791
+ --op-color-alerts-notice-on-minus-eight-alt: light-dark(
1792
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 86%),
1793
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%)
1794
+ );
1795
+ --op-color-alerts-notice-on-minus-max: light-dark(
1796
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%),
1797
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%)
1798
+ );
1799
+ --op-color-alerts-notice-on-minus-max-alt: light-dark(
1800
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%),
1801
+ hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%)
1802
+ );
720
1803
  /**
721
- * @tokens Basic Colors
722
- * @presenter Color
1804
+ * @tokens Dark Shadows
1805
+ * @presenter Shadow
723
1806
  */
724
1807
  --op-color-background: var(--op-color-neutral-plus-eight);
725
1808
  --op-color-on-background: var(--op-color-neutral-on-plus-eight);
726
1809
  --op-color-on-background-alt: var(--op-color-neutral-on-plus-eight-alt);
727
1810
  }
728
1811
 
729
- @media (prefers-color-scheme: dark) {
730
- :root:not([data-theme-mode=light]) {
731
- /**
732
- * @tokens Primary Dark Colors
733
- * @presenter Color
734
- */
735
- --op-color-primary-plus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 12%);
736
- --op-color-primary-plus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 14%);
737
- --op-color-primary-plus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%);
738
- --op-color-primary-plus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
739
- --op-color-primary-plus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%);
740
- --op-color-primary-plus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%);
741
- --op-color-primary-plus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 29%);
742
- --op-color-primary-plus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%);
743
- --op-color-primary-plus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 35%);
744
- --op-color-primary-base: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%);
745
- --op-color-primary-minus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%);
746
- --op-color-primary-minus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 45%);
747
- --op-color-primary-minus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 48%);
748
- --op-color-primary-minus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 52%);
749
- --op-color-primary-minus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%);
750
- --op-color-primary-minus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%);
751
- --op-color-primary-minus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
752
- --op-color-primary-minus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%);
753
- --op-color-primary-minus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
754
- --op-color-primary-on-plus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
755
- --op-color-primary-on-plus-max-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%);
756
- --op-color-primary-on-plus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%);
757
- --op-color-primary-on-plus-eight-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 70%);
758
- --op-color-primary-on-plus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
759
- --op-color-primary-on-plus-seven-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%);
760
- --op-color-primary-on-plus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%);
761
- --op-color-primary-on-plus-six-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%);
762
- --op-color-primary-on-plus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%);
763
- --op-color-primary-on-plus-five-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%);
764
- --op-color-primary-on-plus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
765
- --op-color-primary-on-plus-four-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%);
766
- --op-color-primary-on-plus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%);
767
- --op-color-primary-on-plus-three-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
768
- --op-color-primary-on-plus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
769
- --op-color-primary-on-plus-two-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%);
770
- --op-color-primary-on-plus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
771
- --op-color-primary-on-plus-one-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
772
- --op-color-primary-on-base: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
773
- --op-color-primary-on-base-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%);
774
- --op-color-primary-on-minus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
775
- --op-color-primary-on-minus-one-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%);
776
- --op-color-primary-on-minus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
777
- --op-color-primary-on-minus-two-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%);
778
- --op-color-primary-on-minus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
779
- --op-color-primary-on-minus-three-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%);
780
- --op-color-primary-on-minus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%);
781
- --op-color-primary-on-minus-four-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%);
782
- --op-color-primary-on-minus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%);
783
- --op-color-primary-on-minus-five-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
784
- --op-color-primary-on-minus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%);
785
- --op-color-primary-on-minus-six-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%);
786
- --op-color-primary-on-minus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%);
787
- --op-color-primary-on-minus-seven-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 34%);
788
- --op-color-primary-on-minus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%);
789
- --op-color-primary-on-minus-eight-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%);
790
- --op-color-primary-on-minus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%);
791
- --op-color-primary-on-minus-max-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%);
792
- /**
793
- * @tokens Neutral Dark Colors
794
- * @presenter Color
795
- */
796
- --op-color-neutral-plus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%);
797
- --op-color-neutral-plus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 10%);
798
- --op-color-neutral-plus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 14%);
799
- --op-color-neutral-plus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%);
800
- --op-color-neutral-plus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 18%);
801
- --op-color-neutral-plus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%);
802
- --op-color-neutral-plus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%);
803
- --op-color-neutral-plus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%);
804
- --op-color-neutral-plus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 30%);
805
- --op-color-neutral-base: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%);
806
- --op-color-neutral-minus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%);
807
- --op-color-neutral-minus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%);
808
- --op-color-neutral-minus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 44%);
809
- --op-color-neutral-minus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 52%);
810
- --op-color-neutral-minus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 64%);
811
- --op-color-neutral-minus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%);
812
- --op-color-neutral-minus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%);
813
- --op-color-neutral-minus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
814
- --op-color-neutral-minus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
815
- --op-color-neutral-on-plus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
816
- --op-color-neutral-on-plus-max-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%);
817
- --op-color-neutral-on-plus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
818
- --op-color-neutral-on-plus-eight-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%);
819
- --op-color-neutral-on-plus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%);
820
- --op-color-neutral-on-plus-seven-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 58%);
821
- --op-color-neutral-on-plus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%);
822
- --op-color-neutral-on-plus-six-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 58%);
823
- --op-color-neutral-on-plus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%);
824
- --op-color-neutral-on-plus-five-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
825
- --op-color-neutral-on-plus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%);
826
- --op-color-neutral-on-plus-four-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%);
827
- --op-color-neutral-on-plus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
828
- --op-color-neutral-on-plus-three-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 68%);
829
- --op-color-neutral-on-plus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
830
- --op-color-neutral-on-plus-two-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%);
831
- --op-color-neutral-on-plus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
832
- --op-color-neutral-on-plus-one-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 75%);
833
- --op-color-neutral-on-base: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
834
- --op-color-neutral-on-base-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 78%);
835
- --op-color-neutral-on-minus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
836
- --op-color-neutral-on-minus-one-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%);
837
- --op-color-neutral-on-minus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
838
- --op-color-neutral-on-minus-two-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%);
839
- --op-color-neutral-on-minus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 99%);
840
- --op-color-neutral-on-minus-three-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 95%);
841
- --op-color-neutral-on-minus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 11%);
842
- --op-color-neutral-on-minus-four-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%);
843
- --op-color-neutral-on-minus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%);
844
- --op-color-neutral-on-minus-five-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%);
845
- --op-color-neutral-on-minus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
846
- --op-color-neutral-on-minus-six-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%);
847
- --op-color-neutral-on-minus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%);
848
- --op-color-neutral-on-minus-seven-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%);
849
- --op-color-neutral-on-minus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
850
- --op-color-neutral-on-minus-eight-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%);
851
- --op-color-neutral-on-minus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
852
- --op-color-neutral-on-minus-max-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 48%);
853
- /**
854
- * @tokens Alerts Warning Dark Colors
855
- * @presenter Color
856
- */
857
- --op-color-alerts-warning-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
858
- --op-color-alerts-warning-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
859
- --op-color-alerts-warning-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
860
- --op-color-alerts-warning-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
861
- --op-color-alerts-warning-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%);
862
- --op-color-alerts-warning-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%);
863
- --op-color-alerts-warning-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
864
- --op-color-alerts-warning-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
865
- --op-color-alerts-warning-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%);
866
- --op-color-alerts-warning-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 32%);
867
- --op-color-alerts-warning-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 36%);
868
- --op-color-alerts-warning-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 40%);
869
- --op-color-alerts-warning-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 48%);
870
- --op-color-alerts-warning-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 52%);
871
- --op-color-alerts-warning-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 64%);
872
- --op-color-alerts-warning-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
873
- --op-color-alerts-warning-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
874
- --op-color-alerts-warning-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
875
- --op-color-alerts-warning-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%);
876
- --op-color-alerts-warning-on-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
877
- --op-color-alerts-warning-on-plus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 42%);
878
- --op-color-alerts-warning-on-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
879
- --op-color-alerts-warning-on-plus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
880
- --op-color-alerts-warning-on-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
881
- --op-color-alerts-warning-on-plus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%);
882
- --op-color-alerts-warning-on-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
883
- --op-color-alerts-warning-on-plus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%);
884
- --op-color-alerts-warning-on-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
885
- --op-color-alerts-warning-on-plus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%);
886
- --op-color-alerts-warning-on-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
887
- --op-color-alerts-warning-on-plus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%);
888
- --op-color-alerts-warning-on-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
889
- --op-color-alerts-warning-on-plus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
890
- --op-color-alerts-warning-on-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
891
- --op-color-alerts-warning-on-plus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
892
- --op-color-alerts-warning-on-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
893
- --op-color-alerts-warning-on-plus-one-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
894
- --op-color-alerts-warning-on-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
895
- --op-color-alerts-warning-on-base-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%);
896
- --op-color-alerts-warning-on-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
897
- --op-color-alerts-warning-on-minus-one-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
898
- --op-color-alerts-warning-on-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
899
- --op-color-alerts-warning-on-minus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%);
900
- --op-color-alerts-warning-on-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
901
- --op-color-alerts-warning-on-minus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
902
- --op-color-alerts-warning-on-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
903
- --op-color-alerts-warning-on-minus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
904
- --op-color-alerts-warning-on-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
905
- --op-color-alerts-warning-on-minus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 21%);
906
- --op-color-alerts-warning-on-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
907
- --op-color-alerts-warning-on-minus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%);
908
- --op-color-alerts-warning-on-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
909
- --op-color-alerts-warning-on-minus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
910
- --op-color-alerts-warning-on-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
911
- --op-color-alerts-warning-on-minus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%);
912
- --op-color-alerts-warning-on-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
913
- --op-color-alerts-warning-on-minus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
914
- /**
915
- * @tokens Alerts Danger Dark Colors
916
- * @presenter Color
917
- */
918
- --op-color-alerts-danger-plus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%);
919
- --op-color-alerts-danger-plus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
920
- --op-color-alerts-danger-plus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
921
- --op-color-alerts-danger-plus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 12%);
922
- --op-color-alerts-danger-plus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 14%);
923
- --op-color-alerts-danger-plus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%);
924
- --op-color-alerts-danger-plus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%);
925
- --op-color-alerts-danger-plus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
926
- --op-color-alerts-danger-plus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%);
927
- --op-color-alerts-danger-base: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 32%);
928
- --op-color-alerts-danger-minus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%);
929
- --op-color-alerts-danger-minus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 40%);
930
- --op-color-alerts-danger-minus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 48%);
931
- --op-color-alerts-danger-minus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 52%);
932
- --op-color-alerts-danger-minus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 64%);
933
- --op-color-alerts-danger-minus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%);
934
- --op-color-alerts-danger-minus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%);
935
- --op-color-alerts-danger-minus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
936
- --op-color-alerts-danger-minus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
937
- --op-color-alerts-danger-on-plus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
938
- --op-color-alerts-danger-on-plus-max-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
939
- --op-color-alerts-danger-on-plus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
940
- --op-color-alerts-danger-on-plus-eight-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%);
941
- --op-color-alerts-danger-on-plus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%);
942
- --op-color-alerts-danger-on-plus-seven-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%);
943
- --op-color-alerts-danger-on-plus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%);
944
- --op-color-alerts-danger-on-plus-six-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 68%);
945
- --op-color-alerts-danger-on-plus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%);
946
- --op-color-alerts-danger-on-plus-five-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%);
947
- --op-color-alerts-danger-on-plus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%);
948
- --op-color-alerts-danger-on-plus-four-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%);
949
- --op-color-alerts-danger-on-plus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
950
- --op-color-alerts-danger-on-plus-three-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%);
951
- --op-color-alerts-danger-on-plus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
952
- --op-color-alerts-danger-on-plus-two-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%);
953
- --op-color-alerts-danger-on-plus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%);
954
- --op-color-alerts-danger-on-plus-one-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%);
955
- --op-color-alerts-danger-on-base: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%);
956
- --op-color-alerts-danger-on-base-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%);
957
- --op-color-alerts-danger-on-minus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%);
958
- --op-color-alerts-danger-on-minus-one-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
959
- --op-color-alerts-danger-on-minus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%);
960
- --op-color-alerts-danger-on-minus-two-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%);
961
- --op-color-alerts-danger-on-minus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 6%);
962
- --op-color-alerts-danger-on-minus-three-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%);
963
- --op-color-alerts-danger-on-minus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
964
- --op-color-alerts-danger-on-minus-four-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%);
965
- --op-color-alerts-danger-on-minus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%);
966
- --op-color-alerts-danger-on-minus-five-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%);
967
- --op-color-alerts-danger-on-minus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
968
- --op-color-alerts-danger-on-minus-six-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 22%);
969
- --op-color-alerts-danger-on-minus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
970
- --op-color-alerts-danger-on-minus-seven-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%);
971
- --op-color-alerts-danger-on-minus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
972
- --op-color-alerts-danger-on-minus-eight-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
973
- --op-color-alerts-danger-on-minus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%);
974
- --op-color-alerts-danger-on-minus-max-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
975
- /**
976
- * @tokens Alerts Info Dark Colors
977
- * @presenter Color
978
- */
979
- --op-color-alerts-info-plus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%);
980
- --op-color-alerts-info-plus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
981
- --op-color-alerts-info-plus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%);
982
- --op-color-alerts-info-plus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 12%);
983
- --op-color-alerts-info-plus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 14%);
984
- --op-color-alerts-info-plus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%);
985
- --op-color-alerts-info-plus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
986
- --op-color-alerts-info-plus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%);
987
- --op-color-alerts-info-plus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
988
- --op-color-alerts-info-base: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%);
989
- --op-color-alerts-info-minus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%);
990
- --op-color-alerts-info-minus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%);
991
- --op-color-alerts-info-minus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 48%);
992
- --op-color-alerts-info-minus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 52%);
993
- --op-color-alerts-info-minus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 64%);
994
- --op-color-alerts-info-minus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%);
995
- --op-color-alerts-info-minus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
996
- --op-color-alerts-info-minus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
997
- --op-color-alerts-info-minus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
998
- --op-color-alerts-info-on-plus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
999
- --op-color-alerts-info-on-plus-max-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
1000
- --op-color-alerts-info-on-plus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
1001
- --op-color-alerts-info-on-plus-eight-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%);
1002
- --op-color-alerts-info-on-plus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
1003
- --op-color-alerts-info-on-plus-seven-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 70%);
1004
- --op-color-alerts-info-on-plus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%);
1005
- --op-color-alerts-info-on-plus-six-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%);
1006
- --op-color-alerts-info-on-plus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 76%);
1007
- --op-color-alerts-info-on-plus-five-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%);
1008
- --op-color-alerts-info-on-plus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
1009
- --op-color-alerts-info-on-plus-four-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 66%);
1010
- --op-color-alerts-info-on-plus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
1011
- --op-color-alerts-info-on-plus-three-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%);
1012
- --op-color-alerts-info-on-plus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
1013
- --op-color-alerts-info-on-plus-two-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 74%);
1014
- --op-color-alerts-info-on-plus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%);
1015
- --op-color-alerts-info-on-plus-one-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
1016
- --op-color-alerts-info-on-base: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%);
1017
- --op-color-alerts-info-on-base-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%);
1018
- --op-color-alerts-info-on-minus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%);
1019
- --op-color-alerts-info-on-minus-one-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
1020
- --op-color-alerts-info-on-minus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%);
1021
- --op-color-alerts-info-on-minus-two-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%);
1022
- --op-color-alerts-info-on-minus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%);
1023
- --op-color-alerts-info-on-minus-three-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%);
1024
- --op-color-alerts-info-on-minus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%);
1025
- --op-color-alerts-info-on-minus-four-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%);
1026
- --op-color-alerts-info-on-minus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%);
1027
- --op-color-alerts-info-on-minus-five-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
1028
- --op-color-alerts-info-on-minus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
1029
- --op-color-alerts-info-on-minus-six-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
1030
- --op-color-alerts-info-on-minus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
1031
- --op-color-alerts-info-on-minus-seven-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
1032
- --op-color-alerts-info-on-minus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
1033
- --op-color-alerts-info-on-minus-eight-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 34%);
1034
- --op-color-alerts-info-on-minus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%);
1035
- --op-color-alerts-info-on-minus-max-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%);
1036
- /**
1037
- * @tokens Alerts Notice Dark Colors
1038
- * @presenter Color
1039
- */
1040
- --op-color-alerts-notice-plus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%);
1041
- --op-color-alerts-notice-plus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%);
1042
- --op-color-alerts-notice-plus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%);
1043
- --op-color-alerts-notice-plus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 12%);
1044
- --op-color-alerts-notice-plus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 14%);
1045
- --op-color-alerts-notice-plus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%);
1046
- --op-color-alerts-notice-plus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
1047
- --op-color-alerts-notice-plus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%);
1048
- --op-color-alerts-notice-plus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%);
1049
- --op-color-alerts-notice-base: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 32%);
1050
- --op-color-alerts-notice-minus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 36%);
1051
- --op-color-alerts-notice-minus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 40%);
1052
- --op-color-alerts-notice-minus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 48%);
1053
- --op-color-alerts-notice-minus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 52%);
1054
- --op-color-alerts-notice-minus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 64%);
1055
- --op-color-alerts-notice-minus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%);
1056
- --op-color-alerts-notice-minus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%);
1057
- --op-color-alerts-notice-minus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
1058
- --op-color-alerts-notice-minus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
1059
- --op-color-alerts-notice-on-plus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
1060
- --op-color-alerts-notice-on-plus-max-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
1061
- --op-color-alerts-notice-on-plus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%);
1062
- --op-color-alerts-notice-on-plus-eight-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 82%);
1063
- --op-color-alerts-notice-on-plus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 90%);
1064
- --op-color-alerts-notice-on-plus-seven-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%);
1065
- --op-color-alerts-notice-on-plus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%);
1066
- --op-color-alerts-notice-on-plus-six-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%);
1067
- --op-color-alerts-notice-on-plus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%);
1068
- --op-color-alerts-notice-on-plus-five-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%);
1069
- --op-color-alerts-notice-on-plus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%);
1070
- --op-color-alerts-notice-on-plus-four-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%);
1071
- --op-color-alerts-notice-on-plus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
1072
- --op-color-alerts-notice-on-plus-three-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 78%);
1073
- --op-color-alerts-notice-on-plus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
1074
- --op-color-alerts-notice-on-plus-two-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
1075
- --op-color-alerts-notice-on-plus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
1076
- --op-color-alerts-notice-on-plus-one-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%);
1077
- --op-color-alerts-notice-on-base: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 99%);
1078
- --op-color-alerts-notice-on-base-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%);
1079
- --op-color-alerts-notice-on-minus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
1080
- --op-color-alerts-notice-on-minus-one-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 7%);
1081
- --op-color-alerts-notice-on-minus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
1082
- --op-color-alerts-notice-on-minus-two-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 10%);
1083
- --op-color-alerts-notice-on-minus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
1084
- --op-color-alerts-notice-on-minus-three-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 18%);
1085
- --op-color-alerts-notice-on-minus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
1086
- --op-color-alerts-notice-on-minus-four-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
1087
- --op-color-alerts-notice-on-minus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 6%);
1088
- --op-color-alerts-notice-on-minus-five-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
1089
- --op-color-alerts-notice-on-minus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
1090
- --op-color-alerts-notice-on-minus-six-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%);
1091
- --op-color-alerts-notice-on-minus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
1092
- --op-color-alerts-notice-on-minus-seven-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%);
1093
- --op-color-alerts-notice-on-minus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
1094
- --op-color-alerts-notice-on-minus-eight-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%);
1095
- --op-color-alerts-notice-on-minus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%);
1096
- --op-color-alerts-notice-on-minus-max-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%);
1097
- /**
1098
- * @tokens Dark Shadows
1099
- * @presenter Shadow
1100
- */
1101
- --op-shadow-x-small: 0 1px 3px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
1102
- --op-shadow-small: 0 2px 6px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
1103
- --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%);
1104
- --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 30%);
1105
- --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 30%);
1106
- /**
1107
- * @tokens Encoded Images
1108
- */
1109
- --op-encoded-images-dropdown-arrow: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==");
1110
- }
1812
+ /* Force Light Mode */
1813
+ :root[data-theme-mode=light] {
1814
+ color-scheme: only light;
1111
1815
  }
1816
+
1817
+ /* Force Dark Mode */
1112
1818
  :root[data-theme-mode=dark] {
1113
- /**
1114
- * @tokens Primary Dark Colors
1115
- * @presenter Color
1116
- */
1117
- --op-color-primary-plus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 12%);
1118
- --op-color-primary-plus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 14%);
1119
- --op-color-primary-plus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%);
1120
- --op-color-primary-plus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
1121
- --op-color-primary-plus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%);
1122
- --op-color-primary-plus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%);
1123
- --op-color-primary-plus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 29%);
1124
- --op-color-primary-plus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%);
1125
- --op-color-primary-plus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 35%);
1126
- --op-color-primary-base: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%);
1127
- --op-color-primary-minus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%);
1128
- --op-color-primary-minus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 45%);
1129
- --op-color-primary-minus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 48%);
1130
- --op-color-primary-minus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 52%);
1131
- --op-color-primary-minus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%);
1132
- --op-color-primary-minus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%);
1133
- --op-color-primary-minus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
1134
- --op-color-primary-minus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%);
1135
- --op-color-primary-minus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
1136
- --op-color-primary-on-plus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
1137
- --op-color-primary-on-plus-max-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%);
1138
- --op-color-primary-on-plus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%);
1139
- --op-color-primary-on-plus-eight-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 70%);
1140
- --op-color-primary-on-plus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
1141
- --op-color-primary-on-plus-seven-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%);
1142
- --op-color-primary-on-plus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%);
1143
- --op-color-primary-on-plus-six-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%);
1144
- --op-color-primary-on-plus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%);
1145
- --op-color-primary-on-plus-five-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%);
1146
- --op-color-primary-on-plus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
1147
- --op-color-primary-on-plus-four-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%);
1148
- --op-color-primary-on-plus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%);
1149
- --op-color-primary-on-plus-three-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
1150
- --op-color-primary-on-plus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
1151
- --op-color-primary-on-plus-two-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%);
1152
- --op-color-primary-on-plus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
1153
- --op-color-primary-on-plus-one-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
1154
- --op-color-primary-on-base: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
1155
- --op-color-primary-on-base-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%);
1156
- --op-color-primary-on-minus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
1157
- --op-color-primary-on-minus-one-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%);
1158
- --op-color-primary-on-minus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
1159
- --op-color-primary-on-minus-two-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%);
1160
- --op-color-primary-on-minus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
1161
- --op-color-primary-on-minus-three-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%);
1162
- --op-color-primary-on-minus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%);
1163
- --op-color-primary-on-minus-four-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%);
1164
- --op-color-primary-on-minus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%);
1165
- --op-color-primary-on-minus-five-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
1166
- --op-color-primary-on-minus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%);
1167
- --op-color-primary-on-minus-six-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%);
1168
- --op-color-primary-on-minus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%);
1169
- --op-color-primary-on-minus-seven-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 34%);
1170
- --op-color-primary-on-minus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%);
1171
- --op-color-primary-on-minus-eight-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%);
1172
- --op-color-primary-on-minus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%);
1173
- --op-color-primary-on-minus-max-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%);
1174
- /**
1175
- * @tokens Neutral Dark Colors
1176
- * @presenter Color
1177
- */
1178
- --op-color-neutral-plus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%);
1179
- --op-color-neutral-plus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 10%);
1180
- --op-color-neutral-plus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 14%);
1181
- --op-color-neutral-plus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%);
1182
- --op-color-neutral-plus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 18%);
1183
- --op-color-neutral-plus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%);
1184
- --op-color-neutral-plus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%);
1185
- --op-color-neutral-plus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%);
1186
- --op-color-neutral-plus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 30%);
1187
- --op-color-neutral-base: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%);
1188
- --op-color-neutral-minus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%);
1189
- --op-color-neutral-minus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%);
1190
- --op-color-neutral-minus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 44%);
1191
- --op-color-neutral-minus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 52%);
1192
- --op-color-neutral-minus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 64%);
1193
- --op-color-neutral-minus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%);
1194
- --op-color-neutral-minus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%);
1195
- --op-color-neutral-minus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
1196
- --op-color-neutral-minus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
1197
- --op-color-neutral-on-plus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
1198
- --op-color-neutral-on-plus-max-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%);
1199
- --op-color-neutral-on-plus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
1200
- --op-color-neutral-on-plus-eight-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%);
1201
- --op-color-neutral-on-plus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%);
1202
- --op-color-neutral-on-plus-seven-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 58%);
1203
- --op-color-neutral-on-plus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%);
1204
- --op-color-neutral-on-plus-six-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 58%);
1205
- --op-color-neutral-on-plus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%);
1206
- --op-color-neutral-on-plus-five-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
1207
- --op-color-neutral-on-plus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%);
1208
- --op-color-neutral-on-plus-four-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%);
1209
- --op-color-neutral-on-plus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
1210
- --op-color-neutral-on-plus-three-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 68%);
1211
- --op-color-neutral-on-plus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
1212
- --op-color-neutral-on-plus-two-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%);
1213
- --op-color-neutral-on-plus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
1214
- --op-color-neutral-on-plus-one-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 75%);
1215
- --op-color-neutral-on-base: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
1216
- --op-color-neutral-on-base-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 78%);
1217
- --op-color-neutral-on-minus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
1218
- --op-color-neutral-on-minus-one-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%);
1219
- --op-color-neutral-on-minus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
1220
- --op-color-neutral-on-minus-two-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%);
1221
- --op-color-neutral-on-minus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 99%);
1222
- --op-color-neutral-on-minus-three-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 95%);
1223
- --op-color-neutral-on-minus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 11%);
1224
- --op-color-neutral-on-minus-four-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%);
1225
- --op-color-neutral-on-minus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%);
1226
- --op-color-neutral-on-minus-five-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%);
1227
- --op-color-neutral-on-minus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
1228
- --op-color-neutral-on-minus-six-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%);
1229
- --op-color-neutral-on-minus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%);
1230
- --op-color-neutral-on-minus-seven-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%);
1231
- --op-color-neutral-on-minus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
1232
- --op-color-neutral-on-minus-eight-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%);
1233
- --op-color-neutral-on-minus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
1234
- --op-color-neutral-on-minus-max-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 48%);
1235
- /**
1236
- * @tokens Alerts Warning Dark Colors
1237
- * @presenter Color
1238
- */
1239
- --op-color-alerts-warning-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
1240
- --op-color-alerts-warning-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
1241
- --op-color-alerts-warning-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
1242
- --op-color-alerts-warning-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
1243
- --op-color-alerts-warning-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%);
1244
- --op-color-alerts-warning-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%);
1245
- --op-color-alerts-warning-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
1246
- --op-color-alerts-warning-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
1247
- --op-color-alerts-warning-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%);
1248
- --op-color-alerts-warning-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 32%);
1249
- --op-color-alerts-warning-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 36%);
1250
- --op-color-alerts-warning-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 40%);
1251
- --op-color-alerts-warning-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 48%);
1252
- --op-color-alerts-warning-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 52%);
1253
- --op-color-alerts-warning-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 64%);
1254
- --op-color-alerts-warning-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
1255
- --op-color-alerts-warning-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
1256
- --op-color-alerts-warning-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
1257
- --op-color-alerts-warning-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%);
1258
- --op-color-alerts-warning-on-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
1259
- --op-color-alerts-warning-on-plus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 42%);
1260
- --op-color-alerts-warning-on-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
1261
- --op-color-alerts-warning-on-plus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
1262
- --op-color-alerts-warning-on-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
1263
- --op-color-alerts-warning-on-plus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%);
1264
- --op-color-alerts-warning-on-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
1265
- --op-color-alerts-warning-on-plus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%);
1266
- --op-color-alerts-warning-on-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
1267
- --op-color-alerts-warning-on-plus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%);
1268
- --op-color-alerts-warning-on-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
1269
- --op-color-alerts-warning-on-plus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%);
1270
- --op-color-alerts-warning-on-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
1271
- --op-color-alerts-warning-on-plus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
1272
- --op-color-alerts-warning-on-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
1273
- --op-color-alerts-warning-on-plus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
1274
- --op-color-alerts-warning-on-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
1275
- --op-color-alerts-warning-on-plus-one-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
1276
- --op-color-alerts-warning-on-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
1277
- --op-color-alerts-warning-on-base-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%);
1278
- --op-color-alerts-warning-on-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
1279
- --op-color-alerts-warning-on-minus-one-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
1280
- --op-color-alerts-warning-on-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
1281
- --op-color-alerts-warning-on-minus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%);
1282
- --op-color-alerts-warning-on-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
1283
- --op-color-alerts-warning-on-minus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
1284
- --op-color-alerts-warning-on-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
1285
- --op-color-alerts-warning-on-minus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
1286
- --op-color-alerts-warning-on-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
1287
- --op-color-alerts-warning-on-minus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 21%);
1288
- --op-color-alerts-warning-on-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
1289
- --op-color-alerts-warning-on-minus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%);
1290
- --op-color-alerts-warning-on-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
1291
- --op-color-alerts-warning-on-minus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
1292
- --op-color-alerts-warning-on-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
1293
- --op-color-alerts-warning-on-minus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%);
1294
- --op-color-alerts-warning-on-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
1295
- --op-color-alerts-warning-on-minus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
1296
- /**
1297
- * @tokens Alerts Danger Dark Colors
1298
- * @presenter Color
1299
- */
1300
- --op-color-alerts-danger-plus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%);
1301
- --op-color-alerts-danger-plus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
1302
- --op-color-alerts-danger-plus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
1303
- --op-color-alerts-danger-plus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 12%);
1304
- --op-color-alerts-danger-plus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 14%);
1305
- --op-color-alerts-danger-plus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%);
1306
- --op-color-alerts-danger-plus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%);
1307
- --op-color-alerts-danger-plus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
1308
- --op-color-alerts-danger-plus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%);
1309
- --op-color-alerts-danger-base: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 32%);
1310
- --op-color-alerts-danger-minus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%);
1311
- --op-color-alerts-danger-minus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 40%);
1312
- --op-color-alerts-danger-minus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 48%);
1313
- --op-color-alerts-danger-minus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 52%);
1314
- --op-color-alerts-danger-minus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 64%);
1315
- --op-color-alerts-danger-minus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%);
1316
- --op-color-alerts-danger-minus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%);
1317
- --op-color-alerts-danger-minus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
1318
- --op-color-alerts-danger-minus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
1319
- --op-color-alerts-danger-on-plus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
1320
- --op-color-alerts-danger-on-plus-max-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
1321
- --op-color-alerts-danger-on-plus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
1322
- --op-color-alerts-danger-on-plus-eight-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%);
1323
- --op-color-alerts-danger-on-plus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%);
1324
- --op-color-alerts-danger-on-plus-seven-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%);
1325
- --op-color-alerts-danger-on-plus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%);
1326
- --op-color-alerts-danger-on-plus-six-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 68%);
1327
- --op-color-alerts-danger-on-plus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%);
1328
- --op-color-alerts-danger-on-plus-five-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%);
1329
- --op-color-alerts-danger-on-plus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%);
1330
- --op-color-alerts-danger-on-plus-four-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%);
1331
- --op-color-alerts-danger-on-plus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
1332
- --op-color-alerts-danger-on-plus-three-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%);
1333
- --op-color-alerts-danger-on-plus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
1334
- --op-color-alerts-danger-on-plus-two-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%);
1335
- --op-color-alerts-danger-on-plus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%);
1336
- --op-color-alerts-danger-on-plus-one-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%);
1337
- --op-color-alerts-danger-on-base: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%);
1338
- --op-color-alerts-danger-on-base-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%);
1339
- --op-color-alerts-danger-on-minus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%);
1340
- --op-color-alerts-danger-on-minus-one-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
1341
- --op-color-alerts-danger-on-minus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%);
1342
- --op-color-alerts-danger-on-minus-two-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%);
1343
- --op-color-alerts-danger-on-minus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 6%);
1344
- --op-color-alerts-danger-on-minus-three-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%);
1345
- --op-color-alerts-danger-on-minus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
1346
- --op-color-alerts-danger-on-minus-four-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%);
1347
- --op-color-alerts-danger-on-minus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%);
1348
- --op-color-alerts-danger-on-minus-five-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%);
1349
- --op-color-alerts-danger-on-minus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
1350
- --op-color-alerts-danger-on-minus-six-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 22%);
1351
- --op-color-alerts-danger-on-minus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
1352
- --op-color-alerts-danger-on-minus-seven-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%);
1353
- --op-color-alerts-danger-on-minus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
1354
- --op-color-alerts-danger-on-minus-eight-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
1355
- --op-color-alerts-danger-on-minus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%);
1356
- --op-color-alerts-danger-on-minus-max-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
1357
- /**
1358
- * @tokens Alerts Info Dark Colors
1359
- * @presenter Color
1360
- */
1361
- --op-color-alerts-info-plus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%);
1362
- --op-color-alerts-info-plus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
1363
- --op-color-alerts-info-plus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%);
1364
- --op-color-alerts-info-plus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 12%);
1365
- --op-color-alerts-info-plus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 14%);
1366
- --op-color-alerts-info-plus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%);
1367
- --op-color-alerts-info-plus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
1368
- --op-color-alerts-info-plus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%);
1369
- --op-color-alerts-info-plus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
1370
- --op-color-alerts-info-base: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%);
1371
- --op-color-alerts-info-minus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%);
1372
- --op-color-alerts-info-minus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%);
1373
- --op-color-alerts-info-minus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 48%);
1374
- --op-color-alerts-info-minus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 52%);
1375
- --op-color-alerts-info-minus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 64%);
1376
- --op-color-alerts-info-minus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%);
1377
- --op-color-alerts-info-minus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
1378
- --op-color-alerts-info-minus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
1379
- --op-color-alerts-info-minus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
1380
- --op-color-alerts-info-on-plus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
1381
- --op-color-alerts-info-on-plus-max-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
1382
- --op-color-alerts-info-on-plus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
1383
- --op-color-alerts-info-on-plus-eight-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%);
1384
- --op-color-alerts-info-on-plus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
1385
- --op-color-alerts-info-on-plus-seven-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 70%);
1386
- --op-color-alerts-info-on-plus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%);
1387
- --op-color-alerts-info-on-plus-six-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%);
1388
- --op-color-alerts-info-on-plus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 76%);
1389
- --op-color-alerts-info-on-plus-five-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%);
1390
- --op-color-alerts-info-on-plus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
1391
- --op-color-alerts-info-on-plus-four-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 66%);
1392
- --op-color-alerts-info-on-plus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
1393
- --op-color-alerts-info-on-plus-three-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%);
1394
- --op-color-alerts-info-on-plus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
1395
- --op-color-alerts-info-on-plus-two-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 74%);
1396
- --op-color-alerts-info-on-plus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%);
1397
- --op-color-alerts-info-on-plus-one-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
1398
- --op-color-alerts-info-on-base: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%);
1399
- --op-color-alerts-info-on-base-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%);
1400
- --op-color-alerts-info-on-minus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%);
1401
- --op-color-alerts-info-on-minus-one-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
1402
- --op-color-alerts-info-on-minus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%);
1403
- --op-color-alerts-info-on-minus-two-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%);
1404
- --op-color-alerts-info-on-minus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%);
1405
- --op-color-alerts-info-on-minus-three-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%);
1406
- --op-color-alerts-info-on-minus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%);
1407
- --op-color-alerts-info-on-minus-four-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%);
1408
- --op-color-alerts-info-on-minus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%);
1409
- --op-color-alerts-info-on-minus-five-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
1410
- --op-color-alerts-info-on-minus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
1411
- --op-color-alerts-info-on-minus-six-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
1412
- --op-color-alerts-info-on-minus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
1413
- --op-color-alerts-info-on-minus-seven-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
1414
- --op-color-alerts-info-on-minus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
1415
- --op-color-alerts-info-on-minus-eight-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 34%);
1416
- --op-color-alerts-info-on-minus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%);
1417
- --op-color-alerts-info-on-minus-max-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%);
1418
- /**
1419
- * @tokens Alerts Notice Dark Colors
1420
- * @presenter Color
1421
- */
1422
- --op-color-alerts-notice-plus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%);
1423
- --op-color-alerts-notice-plus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%);
1424
- --op-color-alerts-notice-plus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%);
1425
- --op-color-alerts-notice-plus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 12%);
1426
- --op-color-alerts-notice-plus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 14%);
1427
- --op-color-alerts-notice-plus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%);
1428
- --op-color-alerts-notice-plus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
1429
- --op-color-alerts-notice-plus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%);
1430
- --op-color-alerts-notice-plus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%);
1431
- --op-color-alerts-notice-base: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 32%);
1432
- --op-color-alerts-notice-minus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 36%);
1433
- --op-color-alerts-notice-minus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 40%);
1434
- --op-color-alerts-notice-minus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 48%);
1435
- --op-color-alerts-notice-minus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 52%);
1436
- --op-color-alerts-notice-minus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 64%);
1437
- --op-color-alerts-notice-minus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%);
1438
- --op-color-alerts-notice-minus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%);
1439
- --op-color-alerts-notice-minus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
1440
- --op-color-alerts-notice-minus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
1441
- --op-color-alerts-notice-on-plus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
1442
- --op-color-alerts-notice-on-plus-max-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
1443
- --op-color-alerts-notice-on-plus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%);
1444
- --op-color-alerts-notice-on-plus-eight-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 82%);
1445
- --op-color-alerts-notice-on-plus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 90%);
1446
- --op-color-alerts-notice-on-plus-seven-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%);
1447
- --op-color-alerts-notice-on-plus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%);
1448
- --op-color-alerts-notice-on-plus-six-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%);
1449
- --op-color-alerts-notice-on-plus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%);
1450
- --op-color-alerts-notice-on-plus-five-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%);
1451
- --op-color-alerts-notice-on-plus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%);
1452
- --op-color-alerts-notice-on-plus-four-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%);
1453
- --op-color-alerts-notice-on-plus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
1454
- --op-color-alerts-notice-on-plus-three-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 78%);
1455
- --op-color-alerts-notice-on-plus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
1456
- --op-color-alerts-notice-on-plus-two-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
1457
- --op-color-alerts-notice-on-plus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
1458
- --op-color-alerts-notice-on-plus-one-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%);
1459
- --op-color-alerts-notice-on-base: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 99%);
1460
- --op-color-alerts-notice-on-base-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%);
1461
- --op-color-alerts-notice-on-minus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
1462
- --op-color-alerts-notice-on-minus-one-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 7%);
1463
- --op-color-alerts-notice-on-minus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
1464
- --op-color-alerts-notice-on-minus-two-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 10%);
1465
- --op-color-alerts-notice-on-minus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
1466
- --op-color-alerts-notice-on-minus-three-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 18%);
1467
- --op-color-alerts-notice-on-minus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
1468
- --op-color-alerts-notice-on-minus-four-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
1469
- --op-color-alerts-notice-on-minus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 6%);
1470
- --op-color-alerts-notice-on-minus-five-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
1471
- --op-color-alerts-notice-on-minus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
1472
- --op-color-alerts-notice-on-minus-six-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%);
1473
- --op-color-alerts-notice-on-minus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
1474
- --op-color-alerts-notice-on-minus-seven-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%);
1475
- --op-color-alerts-notice-on-minus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
1476
- --op-color-alerts-notice-on-minus-eight-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%);
1477
- --op-color-alerts-notice-on-minus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%);
1478
- --op-color-alerts-notice-on-minus-max-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%);
1819
+ color-scheme: only dark;
1479
1820
  /**
1480
1821
  * @tokens Dark Shadows
1481
1822
  * @presenter Shadow
@@ -1491,10 +1832,28 @@ select {
1491
1832
  --op-encoded-images-dropdown-arrow: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==");
1492
1833
  }
1493
1834
 
1835
+ @media (prefers-color-scheme: dark) {
1836
+ :root:not([data-theme-mode=light]) {
1837
+ /**
1838
+ * @tokens Dark Shadows
1839
+ * @presenter Shadow
1840
+ */
1841
+ --op-shadow-x-small: 0 1px 3px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
1842
+ --op-shadow-small: 0 2px 6px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
1843
+ --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%);
1844
+ --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 30%);
1845
+ --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 30%);
1846
+ /**
1847
+ * @tokens Encoded Images
1848
+ */
1849
+ --op-encoded-images-dropdown-arrow: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==");
1850
+ }
1851
+ }
1852
+ /* After a reset, introduce base element styles specific to this system */
1494
1853
  html {
1495
- overflow: hidden;
1854
+ overflow: hidden; /* Needed to prevent flash messages and panels from causing overflow */
1496
1855
  font-family: var(--op-font-family);
1497
- font-size: 62.5%;
1856
+ font-size: 62.5%; /* 1rem = 10px */
1498
1857
  }
1499
1858
 
1500
1859
  body {
@@ -1517,9 +1876,9 @@ input[type=submit] {
1517
1876
 
1518
1877
  label {
1519
1878
  display: inline-block;
1520
- }
1521
- label:hover {
1522
- cursor: pointer;
1879
+ &:hover {
1880
+ cursor: pointer;
1881
+ }
1523
1882
  }
1524
1883
 
1525
1884
  a {
@@ -1628,6 +1987,7 @@ small {
1628
1987
  flex-shrink: 0;
1629
1988
  }
1630
1989
 
1990
+ /* Container Properties */
1631
1991
  .container {
1632
1992
  width: 100%;
1633
1993
  max-width: var(--op-breakpoint-medium);
@@ -1651,6 +2011,7 @@ small {
1651
2011
  max-width: var(--op-breakpoint-x-small);
1652
2012
  }
1653
2013
 
2014
+ /* Width Properties */
1654
2015
  .full-width {
1655
2016
  width: 100%;
1656
2017
  }
@@ -1691,6 +2052,7 @@ small {
1691
2052
  width: 33.3333333333%;
1692
2053
  }
1693
2054
 
2055
+ /* Flex Properties */
1694
2056
  .flex {
1695
2057
  display: flex;
1696
2058
  }
@@ -1715,6 +2077,7 @@ small {
1715
2077
  flex-grow: 1;
1716
2078
  }
1717
2079
 
2080
+ /* Gap Properties */
1718
2081
  .gap-xxs {
1719
2082
  gap: var(--op-space-2x-small);
1720
2083
  --op-gap: var(--op-space-2x-small);
@@ -1745,6 +2108,7 @@ small {
1745
2108
  --op-gap: var(--op-space-x-large);
1746
2109
  }
1747
2110
 
2111
+ /* Justify Content */
1748
2112
  .justify-start {
1749
2113
  justify-content: flex-start;
1750
2114
  }
@@ -1765,6 +2129,7 @@ small {
1765
2129
  justify-content: space-around;
1766
2130
  }
1767
2131
 
2132
+ /* Align Items */
1768
2133
  .items-stretch {
1769
2134
  align-items: stretch;
1770
2135
  }
@@ -1785,6 +2150,7 @@ small {
1785
2150
  align-items: baseline;
1786
2151
  }
1787
2152
 
2153
+ /* Align Self */
1788
2154
  .self-auto {
1789
2155
  align-self: auto;
1790
2156
  }
@@ -1809,6 +2175,7 @@ small {
1809
2175
  align-self: baseline;
1810
2176
  }
1811
2177
 
2178
+ /* Text Alignment */
1812
2179
  .text-left {
1813
2180
  text-align: left;
1814
2181
  }
@@ -1825,6 +2192,7 @@ small {
1825
2192
  text-align: justify;
1826
2193
  }
1827
2194
 
2195
+ /* Box Margin */
1828
2196
  .margin-xl {
1829
2197
  margin: var(--op-space-x-large);
1830
2198
  }
@@ -1853,6 +2221,7 @@ small {
1853
2221
  margin: auto;
1854
2222
  }
1855
2223
 
2224
+ /* Vertical Margin */
1856
2225
  .margin-y-xl {
1857
2226
  margin-top: var(--op-space-x-large);
1858
2227
  margin-bottom: var(--op-space-x-large);
@@ -1883,6 +2252,7 @@ small {
1883
2252
  margin-bottom: 0;
1884
2253
  }
1885
2254
 
2255
+ /* Horizontal Margin */
1886
2256
  .margin-x-xl {
1887
2257
  margin-right: var(--op-space-x-large);
1888
2258
  margin-left: var(--op-space-x-large);
@@ -1913,6 +2283,7 @@ small {
1913
2283
  margin-left: 0;
1914
2284
  }
1915
2285
 
2286
+ /* Top Margin */
1916
2287
  .margin-top-xl {
1917
2288
  margin-top: var(--op-space-x-large);
1918
2289
  }
@@ -1937,6 +2308,7 @@ small {
1937
2308
  margin-top: 0;
1938
2309
  }
1939
2310
 
2311
+ /* Bottom Margin */
1940
2312
  .margin-bottom-xl {
1941
2313
  margin-bottom: var(--op-space-x-large);
1942
2314
  }
@@ -1961,6 +2333,7 @@ small {
1961
2333
  margin-bottom: 0;
1962
2334
  }
1963
2335
 
2336
+ /* Right Margin */
1964
2337
  .margin-right-xl {
1965
2338
  margin-right: var(--op-space-x-large);
1966
2339
  }
@@ -1985,6 +2358,7 @@ small {
1985
2358
  margin-left: 0;
1986
2359
  }
1987
2360
 
2361
+ /* Left Margin */
1988
2362
  .margin-left-xl {
1989
2363
  margin-left: var(--op-space-x-large);
1990
2364
  }
@@ -2009,6 +2383,11 @@ small {
2009
2383
  margin-left: 0;
2010
2384
  }
2011
2385
 
2386
+ /*
2387
+ Accessibility
2388
+ Use the following class to hide accessibility text that is needed for screen readers but needs to be hidden from regular users.
2389
+ https: //snook.ca/archives/html_and_css/hiding-content-for-accessibility
2390
+ */
2012
2391
  .sr-only {
2013
2392
  position: absolute !important;
2014
2393
  overflow: hidden;
@@ -3131,6 +3510,12 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
3131
3510
  /* stylelint-enable no-descending-specificity */
3132
3511
  }
3133
3512
 
3513
+ /*
3514
+ Look up icons at: https://fonts.google.com/icons?icon.set=Material+Symbols
3515
+ Instead of hosting the font files locally which requires the compiler to handle them, we pull the icons
3516
+ from Googles CDN like we do for our other fonts
3517
+ https://developers.google.com/fonts/docs/material_symbols#variable_font_with_google_fonts
3518
+ */
3134
3519
  .material-symbols-outlined,
3135
3520
  .material-symbols {
3136
3521
  --op-mso-fill: 0;
@@ -3143,6 +3528,7 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
3143
3528
  vertical-align: middle;
3144
3529
  }
3145
3530
 
3531
+ /* Fill */
3146
3532
  .icon--outlined {
3147
3533
  --op-mso-fill: 0;
3148
3534
  }
@@ -3151,6 +3537,7 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
3151
3537
  --op-mso-fill: 1;
3152
3538
  }
3153
3539
 
3540
+ /* Weight */
3154
3541
  .icon--weight-light {
3155
3542
  --op-mso-weight: var(--op-font-weight-light);
3156
3543
  }
@@ -3163,10 +3550,11 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
3163
3550
  --op-mso-weight: var(--op-font-weight-semi-bold);
3164
3551
  }
3165
3552
 
3166
- .icon--weight-bold, .sidebar-primary .sidebar__content > * .material-symbols-outlined, .sidebar .sidebar__content > * .material-symbols-outlined {
3553
+ .icon--weight-bold {
3167
3554
  --op-mso-weight: var(--op-font-weight-bold);
3168
3555
  }
3169
3556
 
3557
+ /* Emphasis */
3170
3558
  .icon--low-emphasis {
3171
3559
  --op-mso-grade: -20;
3172
3560
  }
@@ -3179,12 +3567,13 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
3179
3567
  --op-mso-grade: 200;
3180
3568
  }
3181
3569
 
3570
+ /* Size */
3182
3571
  .icon--medium {
3183
3572
  font-size: var(--op-font-medium);
3184
3573
  --op-mso-optical-sizing: 20;
3185
3574
  }
3186
3575
 
3187
- .icon--large, .sidebar-primary .sidebar__content > * .material-symbols-outlined, .sidebar .sidebar__content > * .material-symbols-outlined {
3576
+ .icon--large {
3188
3577
  font-size: var(--op-font-large);
3189
3578
  --op-mso-optical-sizing: 40;
3190
3579
  }
@@ -3198,18 +3587,18 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
3198
3587
  display: inline-block;
3199
3588
  width: var(--op-font-2x-large);
3200
3589
  height: var(--op-font-2x-large);
3201
- }
3202
- .custom-icons.icon--medium {
3203
- font-size: var(--op-font-small);
3204
- --op-mso-optical-sizing: 20;
3205
- }
3206
- .custom-icons.icon--large, .sidebar-primary .sidebar__content > * .custom-icons.material-symbols-outlined, .sidebar .sidebar__content > * .custom-icons.material-symbols-outlined {
3207
- width: var(--op-font-large);
3208
- height: var(--op-font-large);
3209
- }
3210
- .custom-icons.icon--x-large {
3211
- width: var(--op-font-3x-large);
3212
- height: var(--op-font-3x-large);
3590
+ &.icon--medium {
3591
+ font-size: var(--op-font-small);
3592
+ --op-mso-optical-sizing: 20;
3593
+ }
3594
+ &.icon--large {
3595
+ width: var(--op-font-large);
3596
+ height: var(--op-font-large);
3597
+ }
3598
+ &.icon--x-large {
3599
+ width: var(--op-font-3x-large);
3600
+ height: var(--op-font-3x-large);
3601
+ }
3213
3602
  }
3214
3603
 
3215
3604
  .custom-icons svg {
@@ -3418,21 +3807,27 @@ dialog.modal {
3418
3807
  }
3419
3808
  }
3420
3809
 
3421
- .sidebar-primary, .sidebar {
3810
+ .sidebar {
3811
+ /* Public API (customizable component options) */
3812
+ /* Normal */
3422
3813
  --_op-sidebar-background-color: var(--op-color-neutral-plus-eight);
3423
3814
  --_op-sidebar-text-color: var(--op-color-neutral-on-plus-eight);
3424
3815
  --_op-sidebar-border-color: var(--op-color-neutral-plus-four);
3425
- --_op-sidebar-rail-width: calc(22 * var(--op-size-unit));
3426
- --_op-sidebar-compact-width: calc(42 * var(--op-size-unit));
3427
- --_op-sidebar-drawer-width: calc(54 * var(--op-size-unit));
3428
- --_op-sidebar-rail-brand-width: calc(19 * var(--op-size-unit));
3429
- --_op-sidebar-compact-brand-width: calc(24 * var(--op-size-unit));
3430
- --_op-sidebar-drawer-brand-width: calc(24 * var(--op-size-unit));
3816
+ /* Width */
3817
+ --_op-sidebar-rail-width: calc(22 * var(--op-size-unit)); /* 88px */
3818
+ --_op-sidebar-compact-width: calc(42 * var(--op-size-unit)); /* 168px */
3819
+ --_op-sidebar-drawer-width: calc(54 * var(--op-size-unit)); /* 216px */
3820
+ --_op-sidebar-rail-brand-width: calc(19 * var(--op-size-unit)); /* 76px */
3821
+ --_op-sidebar-compact-brand-width: calc(24 * var(--op-size-unit)); /* 96px */
3822
+ --_op-sidebar-drawer-brand-width: calc(24 * var(--op-size-unit)); /* 96px */
3823
+ /* Spacing */
3431
3824
  --_op-sidebar-spacing: calc(var(--op-space-2x-large) + var(--op-space-2x-small));
3432
3825
  --_op-sidebar-brand-spacing: var(--op-space-medium);
3433
3826
  --_op-sidebar-content-spacing: var(--op-space-x-small);
3434
3827
  --_op-sidebar-content-item-spacing: var(--op-space-2x-small);
3828
+ /* Animation */
3435
3829
  --_op-sidebar-transition: var(--op-transition-sidebar);
3830
+ /* Private API (component option defaults) */
3436
3831
  --__op-sidebar-width: var(--_op-sidebar-drawer-width);
3437
3832
  --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
3438
3833
  z-index: var(--op-z-index-sidebar);
@@ -3445,134 +3840,88 @@ dialog.modal {
3445
3840
  color: var(--_op-sidebar-text-color);
3446
3841
  overflow-y: auto;
3447
3842
  transition: var(--_op-sidebar-transition);
3448
- }
3449
- .sidebar-primary .sidebar__brand, .sidebar .sidebar__brand {
3450
- height: var(--__op-sidebar-brand-width);
3451
- padding: var(--_op-sidebar-brand-spacing);
3452
- margin: 0 auto;
3453
- }
3454
- .sidebar-primary .sidebar__brand img, .sidebar .sidebar__brand img {
3455
- height: 100%;
3456
- }
3457
- .sidebar-primary .sidebar__content, .sidebar .sidebar__content {
3458
- display: flex;
3459
- flex-direction: column;
3460
- flex-grow: 1;
3461
- padding: 0 var(--_op-sidebar-content-spacing);
3462
- gap: var(--_op-sidebar-content-item-spacing);
3463
- }
3464
- .sidebar-primary .sidebar__content > *, .sidebar .sidebar__content > * {
3465
- justify-content: flex-start;
3466
- }
3467
- .sidebar-primary .sidebar__content > * .material-symbols-outlined, .sidebar .sidebar__content > * .material-symbols-outlined {
3468
- /* stylelint-disable scss/at-extend-no-missing-placeholder */
3469
- /* stylelint-enable scss/at-extend-no-missing-placeholder */
3470
- }
3471
- .sidebar-primary .sidebar__content.sidebar__content--start, .sidebar .sidebar__content.sidebar__content--start {
3472
- justify-content: start;
3473
- }
3474
- .sidebar-primary .sidebar__content.sidebar__content--center, .sidebar .sidebar__content.sidebar__content--center {
3475
- justify-content: center;
3476
- }
3477
- .sidebar-primary .sidebar__content.sidebar__content--end, .sidebar .sidebar__content.sidebar__content--end {
3478
- justify-content: end;
3479
- }
3480
- .sidebar--padded.sidebar-primary, .sidebar--padded.sidebar {
3481
- padding: var(--_op-sidebar-spacing) 0;
3482
- }
3483
- .sidebar--drawer.sidebar-primary:not(.sidebar--responsive), .sidebar--drawer.sidebar:not(.sidebar--responsive) {
3484
- --__op-sidebar-width: var(--_op-sidebar-drawer-width);
3485
- --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
3486
- }
3487
- @media (width > 1024px) {
3488
- .sidebar--drawer.sidebar--responsive.sidebar-primary, .sidebar--drawer.sidebar--responsive.sidebar {
3489
- --__op-sidebar-width: var(--_op-sidebar-drawer-width);
3490
- --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
3843
+ /* Elements */
3844
+ .sidebar__brand {
3845
+ height: var(--__op-sidebar-brand-width);
3846
+ padding: var(--_op-sidebar-brand-spacing);
3847
+ margin-inline: auto;
3848
+ img {
3849
+ height: 100%;
3850
+ }
3491
3851
  }
3492
- }
3493
- @media (width <= 1024px) {
3494
- .sidebar--drawer.sidebar--responsive.sidebar-primary, .sidebar--drawer.sidebar--responsive.sidebar {
3495
- --__op-sidebar-width: var(--_op-sidebar-rail-width);
3496
- --__op-sidebar-brand-width: var(--_op-sidebar-rail-brand-width);
3852
+ .sidebar__content {
3853
+ display: flex;
3854
+ flex-direction: column;
3855
+ flex-grow: 1;
3856
+ gap: var(--_op-sidebar-content-item-spacing);
3857
+ padding-inline: var(--_op-sidebar-content-spacing);
3858
+ > * {
3859
+ justify-content: flex-start;
3860
+ .material-symbols-outlined {
3861
+ --op-mso-optical-sizing: 40;
3862
+ --op-mso-weight: var(--op-font-weight-bold);
3863
+ font-size: var(--op-font-large);
3864
+ }
3865
+ }
3866
+ &.sidebar__content--start {
3867
+ justify-content: start;
3868
+ }
3869
+ &.sidebar__content--center {
3870
+ justify-content: center;
3871
+ }
3872
+ &.sidebar__content--end {
3873
+ justify-content: end;
3874
+ }
3497
3875
  }
3498
- .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__content, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__content {
3499
- align-items: center;
3876
+ /* Modifiers */
3877
+ &.sidebar--padded {
3878
+ padding-block: var(--_op-sidebar-spacing);
3500
3879
  }
3501
- .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__content > *, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__content > * {
3502
- width: var(--__op-btn-height);
3503
- min-width: var(--__op-btn-height);
3504
- justify-content: center;
3505
- padding: 0;
3506
- font-size: 0;
3507
- gap: 0;
3880
+ /* Drawer Modifier */
3881
+ &.sidebar--drawer {
3882
+ /* Private API */
3883
+ --__op-sidebar-width: var(--_op-sidebar-drawer-width);
3884
+ --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
3508
3885
  }
3509
- }
3510
- .sidebar--compact.sidebar-primary:not(.sidebar--responsive), .sidebar--compact.sidebar:not(.sidebar--responsive) {
3511
- --__op-sidebar-width: var(--_op-sidebar-compact-width);
3512
- --__op-sidebar-brand-width: var(--_op-sidebar-compact-brand-width);
3513
- }
3514
- .sidebar--compact.sidebar-primary:not(.sidebar--responsive) .sidebar__content > *, .sidebar--compact.sidebar:not(.sidebar--responsive) .sidebar__content > * {
3515
- flex-direction: column;
3516
- padding: var(--op-space-small);
3517
- gap: var(--op-space-3x-small);
3518
- }
3519
- @media (width > 1024px) {
3520
- .sidebar--compact.sidebar--responsive.sidebar-primary, .sidebar--compact.sidebar--responsive.sidebar {
3886
+ /* Compact Modifier */
3887
+ &.sidebar--compact {
3888
+ /* Private API (component option defaults) */
3521
3889
  --__op-sidebar-width: var(--_op-sidebar-compact-width);
3522
3890
  --__op-sidebar-brand-width: var(--_op-sidebar-compact-brand-width);
3891
+ /* Elements */
3892
+ .sidebar__content {
3893
+ > * {
3894
+ /* Need to get icon-with-label behavior */
3895
+ flex-direction: column;
3896
+ padding: var(--op-space-small);
3897
+ gap: var(--op-space-3x-small);
3898
+ }
3899
+ }
3523
3900
  }
3524
- .sidebar--compact.sidebar--responsive.sidebar-primary .sidebar__content > *, .sidebar--compact.sidebar--responsive.sidebar .sidebar__content > * {
3525
- flex-direction: column;
3526
- padding: var(--op-space-small);
3527
- gap: var(--op-space-3x-small);
3528
- }
3529
- }
3530
- @media (width <= 1024px) {
3531
- .sidebar--compact.sidebar--responsive.sidebar-primary, .sidebar--compact.sidebar--responsive.sidebar {
3901
+ &.sidebar--rail {
3902
+ /* Private API (component option defaults) */
3532
3903
  --__op-sidebar-width: var(--_op-sidebar-rail-width);
3533
3904
  --__op-sidebar-brand-width: var(--_op-sidebar-rail-brand-width);
3905
+ /* Elements */
3906
+ .sidebar__content {
3907
+ align-items: center;
3908
+ > * {
3909
+ /* Need to get icon behavior */
3910
+ width: var(--__op-btn-height);
3911
+ min-width: var(--__op-btn-height);
3912
+ justify-content: center;
3913
+ padding: 0;
3914
+ font-size: 0;
3915
+ gap: 0;
3916
+ }
3917
+ }
3534
3918
  }
3535
- .sidebar--compact.sidebar--responsive.sidebar-primary .sidebar__content, .sidebar--compact.sidebar--responsive.sidebar .sidebar__content {
3536
- align-items: center;
3919
+ /* Primary */
3920
+ .sidebar--primary {
3921
+ --_op-sidebar-background-color: var(--op-color-primary-plus-six);
3922
+ --_op-sidebar-text-color: var(--op-color-primary-on-plus-six);
3923
+ --_op-sidebar-border-color: var(--op-color-primary-plus-four);
3537
3924
  }
3538
- .sidebar--compact.sidebar--responsive.sidebar-primary .sidebar__content > *, .sidebar--compact.sidebar--responsive.sidebar .sidebar__content > * {
3539
- width: var(--__op-btn-height);
3540
- min-width: var(--__op-btn-height);
3541
- justify-content: center;
3542
- padding: 0;
3543
- font-size: 0;
3544
- gap: 0;
3545
- }
3546
- }
3547
- .sidebar--rail.sidebar-primary, .sidebar--rail.sidebar {
3548
- --__op-sidebar-width: var(--_op-sidebar-rail-width);
3549
- --__op-sidebar-brand-width: var(--_op-sidebar-rail-brand-width);
3550
- }
3551
- .sidebar--rail.sidebar-primary .sidebar__content, .sidebar--rail.sidebar .sidebar__content {
3552
- align-items: center;
3553
- }
3554
- .sidebar--rail.sidebar-primary .sidebar__content > *, .sidebar--rail.sidebar .sidebar__content > * {
3555
- width: var(--__op-btn-height);
3556
- min-width: var(--__op-btn-height);
3557
- justify-content: center;
3558
- padding: 0;
3559
- font-size: 0;
3560
- gap: 0;
3561
- }
3562
- .sidebar--compact.sidebar-primary, .sidebar--compact.sidebar {
3563
- --__op-sidebar-width: var(--_op-sidebar-compact-width);
3564
- --__op-sidebar-brand-width: var(--_op-sidebar-compact-brand-width);
3565
- }
3566
- .sidebar--compact.sidebar-primary .sidebar__content > *, .sidebar--compact.sidebar .sidebar__content > * {
3567
- flex-direction: column;
3568
- padding: var(--op-space-small);
3569
- gap: var(--op-space-3x-small);
3570
- }
3571
-
3572
- .sidebar-primary {
3573
- --_op-sidebar-background-color: var(--op-color-primary-plus-six);
3574
- --_op-sidebar-text-color: var(--op-color-primary-on-plus-six);
3575
- --_op-sidebar-border-color: var(--op-color-primary-plus-four);
3576
3925
  }
3577
3926
 
3578
3927
  .side-panel {