@knime/product-features 2.5.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/toasts.js +1 -4855
  3. package/dist/toasts.js.map +1 -1
  4. package/package.json +7 -5
package/dist/toasts.js CHANGED
@@ -3,6 +3,7 @@ import { t as capitalize, u as truncateString_default } from "./dist-DvDWkkNg.js
3
3
  import { Fragment, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, inject, mergeProps, normalizeClass, onMounted, openBlock, provide, ref, renderList, resolveDynamicComponent, toDisplayString, unref, useCssVars, vShow, watch, withCtx, withDirectives } from "vue";
4
4
  import { useEventBus, useMouseInElement, useRafFn, useWindowFocus } from "@vueuse/core";
5
5
  import { KdsButton, KdsIcon, KdsLinkButton, KdsProgressBar } from "@knime/kds-components";
6
+ import { border, color } from "@knime/kds-styles/tokens";
6
7
  import { cloneDeep } from "es-toolkit";
7
8
  import { uniqueId } from "es-toolkit/compat";
8
9
  import './toasts.css';//#region src/toasts/Toast/enums.ts
@@ -14,4861 +15,6 @@ var toastType = {
14
15
  };
15
16
  Object.values(toastType);
16
17
  //#endregion
17
- //#region ../styles/dist/tokens/ts/border.js
18
- /**
19
- * Do not edit directly, this file was auto-generated
20
- * from the design token sources in src/tokens.
21
- */
22
- var border = {
23
- action: {
24
- transparent: {
25
- color: {
26
- light: {
27
- h: 345,
28
- s: 0,
29
- l: 11.4,
30
- a: 0
31
- },
32
- dark: {
33
- h: 345,
34
- s: 0,
35
- l: 11.4,
36
- a: 0
37
- }
38
- },
39
- width: {
40
- value: 1,
41
- unit: "px"
42
- },
43
- style: "solid",
44
- css: {
45
- value: "1px solid hsl(345 0% 11.4% / 0)",
46
- variable: "var(--kds-border-action-transparent)"
47
- }
48
- },
49
- default: {
50
- color: {
51
- light: {
52
- h: 330,
53
- s: 0,
54
- l: 10.2,
55
- a: .4
56
- },
57
- dark: {
58
- h: 330,
59
- s: 0,
60
- l: 99,
61
- a: .5
62
- }
63
- },
64
- width: {
65
- value: 1,
66
- unit: "px"
67
- },
68
- style: "solid",
69
- css: {
70
- value: "1px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5))",
71
- variable: "var(--kds-border-action-default)"
72
- }
73
- },
74
- disabled: {
75
- color: {
76
- light: {
77
- h: 0,
78
- s: 0,
79
- l: 72.5,
80
- a: 1
81
- },
82
- dark: {
83
- h: 0,
84
- s: 0,
85
- l: 48.2,
86
- a: 1
87
- }
88
- },
89
- width: {
90
- value: 1,
91
- unit: "px"
92
- },
93
- style: "solid",
94
- css: {
95
- value: "1px solid light-dark(hsl(0, 0%, 72.5%), hsl(0, 0%, 48.2%))",
96
- variable: "var(--kds-border-action-disabled)"
97
- }
98
- },
99
- focused: {
100
- color: {
101
- light: {
102
- h: 209.4,
103
- s: 57.3,
104
- l: 49.6,
105
- a: 1
106
- },
107
- dark: {
108
- h: 213.6,
109
- s: 91.6,
110
- l: 76.7,
111
- a: 1
112
- }
113
- },
114
- width: {
115
- value: 2,
116
- unit: "px"
117
- },
118
- style: "solid",
119
- css: {
120
- value: "2px solid light-dark(hsl(209.4, 57.3%, 49.6%), hsl(213.6, 91.6%, 76.7%))",
121
- variable: "var(--kds-border-action-focused)"
122
- }
123
- },
124
- selected: {
125
- color: {
126
- light: {
127
- h: 171.8,
128
- s: 27,
129
- l: 47.8,
130
- a: 1
131
- },
132
- dark: {
133
- h: 168,
134
- s: 46.7,
135
- l: 85.3,
136
- a: 1
137
- }
138
- },
139
- width: {
140
- value: 1,
141
- unit: "px"
142
- },
143
- style: "solid",
144
- css: {
145
- value: "1px solid light-dark(hsl(171.8, 27%, 47.8%), hsl(168, 46.7%, 85.3%))",
146
- variable: "var(--kds-border-action-selected)"
147
- }
148
- },
149
- "selected-accent": {
150
- color: {
151
- light: {
152
- h: 209.4,
153
- s: 57.3,
154
- l: 49.6,
155
- a: 1
156
- },
157
- dark: {
158
- h: 213.6,
159
- s: 91.6,
160
- l: 76.7,
161
- a: 1
162
- }
163
- },
164
- width: {
165
- value: 1,
166
- unit: "px"
167
- },
168
- style: "solid",
169
- css: {
170
- value: "1px solid light-dark(hsl(209.4, 57.3%, 49.6%), hsl(213.6, 91.6%, 76.7%))",
171
- variable: "var(--kds-border-action-selected-accent)"
172
- }
173
- },
174
- error: {
175
- color: {
176
- light: {
177
- h: 348.8,
178
- s: 90.9,
179
- l: 34.5,
180
- a: 1
181
- },
182
- dark: {
183
- h: 3.5,
184
- s: 100,
185
- l: 79.6,
186
- a: 1
187
- }
188
- },
189
- width: {
190
- value: 1,
191
- unit: "px"
192
- },
193
- style: "solid",
194
- css: {
195
- value: "1px solid light-dark(hsl(348.8, 90.9%, 34.5%), hsl(3.5, 100%, 79.6%))",
196
- variable: "var(--kds-border-action-error)"
197
- }
198
- },
199
- primary: {
200
- color: {
201
- light: {
202
- h: 176.7,
203
- s: 82,
204
- l: 17.5,
205
- a: 1
206
- },
207
- dark: {
208
- h: 176.7,
209
- s: 82,
210
- l: 17.5,
211
- a: 1
212
- }
213
- },
214
- width: {
215
- value: 1,
216
- unit: "px"
217
- },
218
- style: "solid",
219
- css: {
220
- value: "1px solid hsl(176.7, 82%, 17.5%)",
221
- variable: "var(--kds-border-action-primary)"
222
- }
223
- },
224
- input: {
225
- color: {
226
- light: {
227
- h: 330,
228
- s: 0,
229
- l: 10.2,
230
- a: .4
231
- },
232
- dark: {
233
- h: 330,
234
- s: 0,
235
- l: 99,
236
- a: .5
237
- }
238
- },
239
- width: {
240
- value: 1,
241
- unit: "px"
242
- },
243
- style: "solid",
244
- css: {
245
- value: "1px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5))",
246
- variable: "var(--kds-border-action-input)"
247
- }
248
- }
249
- },
250
- base: {
251
- default: {
252
- color: {
253
- light: {
254
- h: 330,
255
- s: 0,
256
- l: 10.2,
257
- a: .4
258
- },
259
- dark: {
260
- h: 330,
261
- s: 0,
262
- l: 99,
263
- a: .5
264
- }
265
- },
266
- width: {
267
- value: 1,
268
- unit: "px"
269
- },
270
- style: "solid",
271
- css: {
272
- value: "1px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5))",
273
- variable: "var(--kds-border-base-default)"
274
- }
275
- },
276
- muted: {
277
- color: {
278
- light: {
279
- h: 330,
280
- s: 0,
281
- l: 10.2,
282
- a: .2
283
- },
284
- dark: {
285
- h: 330,
286
- s: 0,
287
- l: 99,
288
- a: .2
289
- }
290
- },
291
- width: {
292
- value: 1,
293
- unit: "px"
294
- },
295
- style: "solid",
296
- css: {
297
- value: "1px solid light-dark(hsl(330 0% 10.2% / 0.2), hsl(330 0% 99% / 0.2))",
298
- variable: "var(--kds-border-base-muted)"
299
- }
300
- },
301
- subtle: {
302
- color: {
303
- light: {
304
- h: 330,
305
- s: 0,
306
- l: 10.2,
307
- a: .1
308
- },
309
- dark: {
310
- h: 330,
311
- s: 0,
312
- l: 99,
313
- a: .1
314
- }
315
- },
316
- width: {
317
- value: 1,
318
- unit: "px"
319
- },
320
- style: "solid",
321
- css: {
322
- value: "1px solid light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1))",
323
- variable: "var(--kds-border-base-subtle)"
324
- }
325
- },
326
- brand: {
327
- color: {
328
- light: {
329
- h: 50.8,
330
- s: 100,
331
- l: 50,
332
- a: 1
333
- },
334
- dark: {
335
- h: 50.8,
336
- s: 100,
337
- l: 50,
338
- a: 1
339
- }
340
- },
341
- width: {
342
- value: 1,
343
- unit: "px"
344
- },
345
- style: "solid",
346
- css: {
347
- value: "1px solid hsl(50.8, 100%, 50%)",
348
- variable: "var(--kds-border-base-brand)"
349
- }
350
- },
351
- danger: {
352
- color: {
353
- light: {
354
- h: 3.4,
355
- s: 100,
356
- l: 86.1,
357
- a: 1
358
- },
359
- dark: {
360
- h: 348,
361
- s: 94.3,
362
- l: 20.8,
363
- a: 1
364
- }
365
- },
366
- width: {
367
- value: 1,
368
- unit: "px"
369
- },
370
- style: "solid",
371
- css: {
372
- value: "1px solid light-dark(hsl(3.4, 100%, 86.1%), hsl(348, 94.3%, 20.8%))",
373
- variable: "var(--kds-border-base-danger)"
374
- }
375
- },
376
- warning: {
377
- color: {
378
- light: {
379
- h: 30.8,
380
- s: 79.3,
381
- l: 73.5,
382
- a: 1
383
- },
384
- dark: {
385
- h: 13.1,
386
- s: 66.1,
387
- l: 23.1,
388
- a: 1
389
- }
390
- },
391
- width: {
392
- value: 1,
393
- unit: "px"
394
- },
395
- style: "solid",
396
- css: {
397
- value: "1px solid light-dark(hsl(30.8, 79.3%, 73.5%), hsl(13.1, 66.1%, 23.1%))",
398
- variable: "var(--kds-border-base-warning)"
399
- }
400
- },
401
- success: {
402
- color: {
403
- light: {
404
- h: 112,
405
- s: 56.5,
406
- l: 71.2,
407
- a: 1
408
- },
409
- dark: {
410
- h: 123.7,
411
- s: 46.7,
412
- l: 20.6,
413
- a: 1
414
- }
415
- },
416
- width: {
417
- value: 1,
418
- unit: "px"
419
- },
420
- style: "solid",
421
- css: {
422
- value: "1px solid light-dark(hsl(112, 56.5%, 71.2%), hsl(123.7, 46.7%, 20.6%))",
423
- variable: "var(--kds-border-base-success)"
424
- }
425
- },
426
- info: {
427
- color: {
428
- light: {
429
- h: 214.5,
430
- s: 100,
431
- l: 84.3,
432
- a: 1
433
- },
434
- dark: {
435
- h: 210,
436
- s: 50,
437
- l: 27.5,
438
- a: 1
439
- }
440
- },
441
- width: {
442
- value: 1,
443
- unit: "px"
444
- },
445
- style: "solid",
446
- css: {
447
- value: "1px solid light-dark(hsl(214.5, 100%, 84.3%), hsl(210, 50%, 27.5%))",
448
- variable: "var(--kds-border-base-info)"
449
- }
450
- }
451
- },
452
- "node-status": {
453
- empty: {
454
- color: {
455
- light: {
456
- h: 0,
457
- s: 0,
458
- l: 90.2,
459
- a: 1
460
- },
461
- dark: {
462
- h: 0,
463
- s: 0,
464
- l: 32.2,
465
- a: 1
466
- }
467
- },
468
- width: {
469
- value: 1,
470
- unit: "px"
471
- },
472
- style: "solid",
473
- css: {
474
- value: "1px solid light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 32.2%))",
475
- variable: "var(--kds-border-node-status-empty)"
476
- }
477
- },
478
- error: {
479
- color: {
480
- light: {
481
- h: 348,
482
- s: 94.3,
483
- l: 20.8,
484
- a: 1
485
- },
486
- dark: {
487
- h: 2.6,
488
- s: 100,
489
- l: 72.4,
490
- a: 1
491
- }
492
- },
493
- width: {
494
- value: 1,
495
- unit: "px"
496
- },
497
- style: "solid",
498
- css: {
499
- value: "1px solid light-dark(hsl(348, 94.3%, 20.8%), hsl(2.6, 100%, 72.4%))",
500
- variable: "var(--kds-border-node-status-error)"
501
- }
502
- },
503
- warning: {
504
- color: {
505
- light: {
506
- h: 19,
507
- s: 63.1,
508
- l: 38.2,
509
- a: 1
510
- },
511
- dark: {
512
- h: 49.1,
513
- s: 99.1,
514
- l: 43.7,
515
- a: 1
516
- }
517
- },
518
- width: {
519
- value: 1,
520
- unit: "px"
521
- },
522
- style: "solid",
523
- css: {
524
- value: "1px solid light-dark(hsl(19, 63.1%, 38.2%), hsl(49.1, 99.1%, 43.7%))",
525
- variable: "var(--kds-border-node-status-warning)"
526
- }
527
- },
528
- success: {
529
- color: {
530
- light: {
531
- h: 116.1,
532
- s: 46.6,
533
- l: 25.7,
534
- a: 1
535
- },
536
- dark: {
537
- h: 106.5,
538
- s: 42.6,
539
- l: 54.9,
540
- a: 1
541
- }
542
- },
543
- width: {
544
- value: 1,
545
- unit: "px"
546
- },
547
- style: "solid",
548
- css: {
549
- value: "1px solid light-dark(hsl(116.1, 46.6%, 25.7%), hsl(106.5, 42.6%, 54.9%))",
550
- variable: "var(--kds-border-node-status-success)"
551
- }
552
- }
553
- },
554
- ResizeHandle: {
555
- initial: {
556
- color: {
557
- light: {
558
- h: 330,
559
- s: 0,
560
- l: 10.2,
561
- a: .4
562
- },
563
- dark: {
564
- h: 330,
565
- s: 0,
566
- l: 99,
567
- a: .4
568
- }
569
- },
570
- width: {
571
- value: 2,
572
- unit: "px"
573
- },
574
- style: "solid",
575
- css: {
576
- value: "2px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.4))",
577
- variable: "var(--kds-border-resize-handle-initial)"
578
- }
579
- },
580
- hover: {
581
- color: {
582
- light: {
583
- h: 330,
584
- s: 0,
585
- l: 10.2,
586
- a: .64
587
- },
588
- dark: {
589
- h: 330,
590
- s: 0,
591
- l: 99,
592
- a: .58
593
- }
594
- },
595
- width: {
596
- value: 2,
597
- unit: "px"
598
- },
599
- style: "solid",
600
- css: {
601
- value: "2px solid light-dark(hsl(330 0% 10.2% / 0.64), hsl(330 0% 99% / 0.58))",
602
- variable: "var(--kds-border-resize-handle-hover)"
603
- }
604
- },
605
- active: {
606
- color: {
607
- light: {
608
- h: 330,
609
- s: 0,
610
- l: 10.2,
611
- a: .74
612
- },
613
- dark: {
614
- h: 330,
615
- s: 0,
616
- l: 99,
617
- a: .68
618
- }
619
- },
620
- width: {
621
- value: 2,
622
- unit: "px"
623
- },
624
- style: "solid",
625
- css: {
626
- value: "2px solid light-dark(hsl(330 0% 10.2% / 0.74), hsl(330 0% 99% / 0.68))",
627
- variable: "var(--kds-border-resize-handle-active)"
628
- }
629
- }
630
- },
631
- ColorPickerHandle: { initial: {
632
- color: {
633
- light: {
634
- h: 0,
635
- s: 0,
636
- l: 99,
637
- a: 1
638
- },
639
- dark: {
640
- h: 0,
641
- s: 0,
642
- l: 99,
643
- a: 1
644
- }
645
- },
646
- width: {
647
- value: 2,
648
- unit: "px"
649
- },
650
- style: "solid",
651
- css: {
652
- value: "2px solid hsl(0, 0%, 99%)",
653
- variable: "var(--kds-border-color-picker-handle-initial)"
654
- }
655
- } }
656
- };
657
- //#endregion
658
- //#region ../styles/dist/tokens/ts/color.js
659
- /**
660
- * Do not edit directly, this file was auto-generated
661
- * from the design token sources in src/tokens.
662
- */
663
- var color = {
664
- surface: {
665
- default: {
666
- light: {
667
- h: 0,
668
- s: 0,
669
- l: 98,
670
- a: 1
671
- },
672
- dark: {
673
- h: 0,
674
- s: 0,
675
- l: 15.7,
676
- a: 1
677
- },
678
- css: {
679
- value: "light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%))",
680
- variable: "var(--kds-color-surface-default)"
681
- }
682
- },
683
- muted: {
684
- light: {
685
- h: 0,
686
- s: 0,
687
- l: 94.1,
688
- a: 1
689
- },
690
- dark: {
691
- h: 0,
692
- s: 0,
693
- l: 18.8,
694
- a: 1
695
- },
696
- css: {
697
- value: "light-dark(hsl(0, 0%, 94.1%), hsl(0, 0%, 18.8%))",
698
- variable: "var(--kds-color-surface-muted)"
699
- }
700
- },
701
- subtle: {
702
- light: {
703
- h: 0,
704
- s: 0,
705
- l: 90.2,
706
- a: 1
707
- },
708
- dark: {
709
- h: 0,
710
- s: 0,
711
- l: 22,
712
- a: 1
713
- },
714
- css: {
715
- value: "light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 22%))",
716
- variable: "var(--kds-color-surface-subtle)"
717
- }
718
- }
719
- },
720
- page: { default: {
721
- light: {
722
- h: 0,
723
- s: 0,
724
- l: 99,
725
- a: 1
726
- },
727
- dark: {
728
- h: 0,
729
- s: 0,
730
- l: 12.9,
731
- a: 1
732
- },
733
- css: {
734
- value: "light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 12.9%))",
735
- variable: "var(--kds-color-page-default)"
736
- }
737
- } },
738
- background: {
739
- neutral: {
740
- initial: {
741
- light: {
742
- h: 345,
743
- s: 0,
744
- l: 11.4,
745
- a: 0
746
- },
747
- dark: {
748
- h: 345,
749
- s: 0,
750
- l: 11.4,
751
- a: 0
752
- },
753
- css: {
754
- value: "hsl(345 0% 11.4% / 0)",
755
- variable: "var(--kds-color-background-neutral-initial)"
756
- }
757
- },
758
- hover: {
759
- light: {
760
- h: 340,
761
- s: 0,
762
- l: 48.2,
763
- a: .1
764
- },
765
- dark: {
766
- h: 180,
767
- s: 0,
768
- l: 90.2,
769
- a: .1
770
- },
771
- css: {
772
- value: "light-dark(hsl(340 0% 48.2% / 0.1), hsl(180 0% 90.2% / 0.1))",
773
- variable: "var(--kds-color-background-neutral-hover)"
774
- }
775
- },
776
- active: {
777
- light: {
778
- h: 340,
779
- s: 0,
780
- l: 48.2,
781
- a: .2
782
- },
783
- dark: {
784
- h: 340,
785
- s: 0,
786
- l: 48.2,
787
- a: .36
788
- },
789
- css: {
790
- value: "light-dark(hsl(340 0% 48.2% / 0.2), hsl(340 0% 48.2% / 0.36))",
791
- variable: "var(--kds-color-background-neutral-active)"
792
- }
793
- }
794
- },
795
- "neutral-bold": {
796
- initial: {
797
- light: {
798
- h: 210,
799
- s: 0,
800
- l: 72.5,
801
- a: .4
802
- },
803
- dark: {
804
- h: 0,
805
- s: 0,
806
- l: 32.2,
807
- a: 1
808
- },
809
- css: {
810
- value: "light-dark(hsl(210 0% 72.5% / 0.4), hsl(0, 0%, 32.2%))",
811
- variable: "var(--kds-color-background-neutral-bold-initial)"
812
- }
813
- },
814
- hover: {
815
- light: {
816
- h: 210,
817
- s: 0,
818
- l: 62.977,
819
- a: .4
820
- },
821
- dark: {
822
- h: 0,
823
- s: 0,
824
- l: 48.2,
825
- a: 1
826
- },
827
- css: {
828
- value: "light-dark(hsl(210 0% 62.977% / 0.4), hsl(0, 0%, 48.2%))",
829
- variable: "var(--kds-color-background-neutral-bold-hover)"
830
- }
831
- },
832
- active: {
833
- light: {
834
- h: 0,
835
- s: 0,
836
- l: 59.859,
837
- a: .4
838
- },
839
- dark: {
840
- h: 0,
841
- s: 0,
842
- l: 72.5,
843
- a: 1
844
- },
845
- css: {
846
- value: "light-dark(hsl(0 0% 59.859% / 0.4), hsl(0, 0%, 72.5%))",
847
- variable: "var(--kds-color-background-neutral-bold-active)"
848
- }
849
- }
850
- },
851
- primary: {
852
- initial: {
853
- light: {
854
- h: 168,
855
- s: 46.7,
856
- l: 85.3,
857
- a: 1
858
- },
859
- dark: {
860
- h: 169.8,
861
- s: 30.6,
862
- l: 66.1,
863
- a: 1
864
- },
865
- css: {
866
- value: "light-dark(hsl(168, 46.7%, 85.3%), hsl(169.8, 30.6%, 66.1%))",
867
- variable: "var(--kds-color-background-primary-initial)"
868
- }
869
- },
870
- hover: {
871
- light: {
872
- h: 167.99,
873
- s: 27.818,
874
- l: 77.703,
875
- a: 1
876
- },
877
- dark: {
878
- h: 169.6,
879
- s: 30.517,
880
- l: 68.835,
881
- a: 1
882
- },
883
- css: {
884
- value: "light-dark(hsl(167.99 27.818% 77.703%), hsl(169.6 30.517% 68.835%))",
885
- variable: "var(--kds-color-background-primary-hover)"
886
- }
887
- },
888
- active: {
889
- light: {
890
- h: 167.97,
891
- s: 18.664,
892
- l: 70.242,
893
- a: 1
894
- },
895
- dark: {
896
- h: 168.98,
897
- s: 30.352,
898
- l: 78.334,
899
- a: 1
900
- },
901
- css: {
902
- value: "light-dark(hsl(167.97 18.664% 70.242%), hsl(168.98 30.352% 78.334%))",
903
- variable: "var(--kds-color-background-primary-active)"
904
- }
905
- }
906
- },
907
- "primary-bold": {
908
- initial: {
909
- light: {
910
- h: 176.1,
911
- s: 66.7,
912
- l: 22.4,
913
- a: 1
914
- },
915
- dark: {
916
- h: 174.4,
917
- s: 47.8,
918
- l: 30.8,
919
- a: 1
920
- },
921
- css: {
922
- value: "light-dark(hsl(176.1, 66.7%, 22.4%), hsl(174.4, 47.8%, 30.8%))",
923
- variable: "var(--kds-color-background-primary-bold-initial)"
924
- }
925
- },
926
- hover: {
927
- light: {
928
- h: 175.79,
929
- s: 58.284,
930
- l: 19.792,
931
- a: 1
932
- },
933
- dark: {
934
- h: 173.26,
935
- s: 27.023,
936
- l: 42.409,
937
- a: 1
938
- },
939
- css: {
940
- value: "light-dark(hsl(175.79 58.284% 19.792%), hsl(173.26 27.023% 42.409%))",
941
- variable: "var(--kds-color-background-primary-bold-hover)"
942
- }
943
- },
944
- active: {
945
- light: {
946
- h: 175.36,
947
- s: 48.936,
948
- l: 16.164,
949
- a: 1
950
- },
951
- dark: {
952
- h: 171.91,
953
- s: 19.296,
954
- l: 64.061,
955
- a: 1
956
- },
957
- css: {
958
- value: "light-dark(hsl(175.36 48.936% 16.164%), hsl(171.91 19.296% 64.061%))",
959
- variable: "var(--kds-color-background-primary-bold-active)"
960
- }
961
- }
962
- },
963
- selected: {
964
- initial: {
965
- light: {
966
- h: 165.6,
967
- s: 67.6,
968
- l: 92.7,
969
- a: 1
970
- },
971
- dark: {
972
- h: 176.1,
973
- s: 66.7,
974
- l: 22.4,
975
- a: .32
976
- },
977
- css: {
978
- value: "light-dark(hsl(165.6, 67.6%, 92.7%), hsl(176.1 66.7% 22.4% / 0.32))",
979
- variable: "var(--kds-color-background-selected-initial)"
980
- }
981
- },
982
- hover: {
983
- light: {
984
- h: 168,
985
- s: 46.7,
986
- l: 85.3,
987
- a: 1
988
- },
989
- dark: {
990
- h: 174.4,
991
- s: 47.8,
992
- l: 30.8,
993
- a: .56
994
- },
995
- css: {
996
- value: "light-dark(hsl(168, 46.7%, 85.3%), hsl(174.4 47.8% 30.8% / 0.56))",
997
- variable: "var(--kds-color-background-selected-hover)"
998
- }
999
- },
1000
- active: {
1001
- light: {
1002
- h: 168.8,
1003
- s: 34.4,
1004
- l: 75.5,
1005
- a: 1
1006
- },
1007
- dark: {
1008
- h: 171.8,
1009
- s: 27,
1010
- l: 47.8,
1011
- a: .72
1012
- },
1013
- css: {
1014
- value: "light-dark(hsl(168.8, 34.4%, 75.5%), hsl(171.8 27% 47.8% / 0.72))",
1015
- variable: "var(--kds-color-background-selected-active)"
1016
- }
1017
- }
1018
- },
1019
- "selected-bold": {
1020
- initial: {
1021
- light: {
1022
- h: 174.4,
1023
- s: 47.8,
1024
- l: 30.8,
1025
- a: 1
1026
- },
1027
- dark: {
1028
- h: 176.1,
1029
- s: 66.7,
1030
- l: 22.4,
1031
- a: 1
1032
- },
1033
- css: {
1034
- value: "light-dark(hsl(174.4, 47.8%, 30.8%), hsl(176.1, 66.7%, 22.4%))",
1035
- variable: "var(--kds-color-background-selected-bold-initial)"
1036
- }
1037
- },
1038
- hover: {
1039
- light: {
1040
- h: 176.1,
1041
- s: 66.7,
1042
- l: 22.4,
1043
- a: 1
1044
- },
1045
- dark: {
1046
- h: 174.4,
1047
- s: 47.8,
1048
- l: 30.8,
1049
- a: 1
1050
- },
1051
- css: {
1052
- value: "light-dark(hsl(176.1, 66.7%, 22.4%), hsl(174.4, 47.8%, 30.8%))",
1053
- variable: "var(--kds-color-background-selected-bold-hover)"
1054
- }
1055
- },
1056
- active: {
1057
- light: {
1058
- h: 176.7,
1059
- s: 82,
1060
- l: 17.5,
1061
- a: 1
1062
- },
1063
- dark: {
1064
- h: 171.8,
1065
- s: 27,
1066
- l: 47.8,
1067
- a: 1
1068
- },
1069
- css: {
1070
- value: "light-dark(hsl(176.7, 82%, 17.5%), hsl(171.8, 27%, 47.8%))",
1071
- variable: "var(--kds-color-background-selected-bold-active)"
1072
- }
1073
- }
1074
- },
1075
- danger: {
1076
- initial: {
1077
- light: {
1078
- h: 0,
1079
- s: 100,
1080
- l: 97.1,
1081
- a: 1
1082
- },
1083
- dark: {
1084
- h: 356.76,
1085
- s: 65.215,
1086
- l: 15.117,
1087
- a: 1
1088
- },
1089
- css: {
1090
- value: "light-dark(hsl(0, 100%, 97.1%), hsl(356.76 65.215% 15.117%))",
1091
- variable: "var(--kds-color-background-danger-initial)"
1092
- }
1093
- },
1094
- hover: {
1095
- light: {
1096
- h: 1.5,
1097
- s: 100,
1098
- l: 92.4,
1099
- a: 1
1100
- },
1101
- dark: {
1102
- h: 348.8,
1103
- s: 90.9,
1104
- l: 34.5,
1105
- a: .72
1106
- },
1107
- css: {
1108
- value: "light-dark(hsl(1.5, 100%, 92.4%), hsl(348.8 90.9% 34.5% / 0.72))",
1109
- variable: "var(--kds-color-background-danger-hover)"
1110
- }
1111
- },
1112
- active: {
1113
- light: {
1114
- h: 3.4,
1115
- s: 100,
1116
- l: 86.1,
1117
- a: 1
1118
- },
1119
- dark: {
1120
- h: 353,
1121
- s: 74.7,
1122
- l: 44.9,
1123
- a: .72
1124
- },
1125
- css: {
1126
- value: "light-dark(hsl(3.4, 100%, 86.1%), hsl(353 74.7% 44.9% / 0.72))",
1127
- variable: "var(--kds-color-background-danger-active)"
1128
- }
1129
- }
1130
- },
1131
- "danger-bold": {
1132
- initial: {
1133
- light: {
1134
- h: 348.8,
1135
- s: 90.9,
1136
- l: 34.5,
1137
- a: 1
1138
- },
1139
- dark: {
1140
- h: 347.6,
1141
- s: 97.1,
1142
- l: 27.3,
1143
- a: 1
1144
- },
1145
- css: {
1146
- value: "light-dark(hsl(348.8, 90.9%, 34.5%), hsl(347.6, 97.1%, 27.3%))",
1147
- variable: "var(--kds-color-background-danger-bold-initial)"
1148
- }
1149
- },
1150
- hover: {
1151
- light: {
1152
- h: 347.6,
1153
- s: 97.1,
1154
- l: 27.3,
1155
- a: 1
1156
- },
1157
- dark: {
1158
- h: 353,
1159
- s: 74.7,
1160
- l: 44.9,
1161
- a: .8
1162
- },
1163
- css: {
1164
- value: "light-dark(hsl(347.6, 97.1%, 27.3%), hsl(353 74.7% 44.9% / 0.8))",
1165
- variable: "var(--kds-color-background-danger-bold-hover)"
1166
- }
1167
- },
1168
- active: {
1169
- light: {
1170
- h: 348,
1171
- s: 94.3,
1172
- l: 20.8,
1173
- a: 1
1174
- },
1175
- dark: {
1176
- h: 356.3,
1177
- s: 76.8,
1178
- l: 54.3,
1179
- a: .8
1180
- },
1181
- css: {
1182
- value: "light-dark(hsl(348, 94.3%, 20.8%), hsl(356.3 76.8% 54.3% / 0.8))",
1183
- variable: "var(--kds-color-background-danger-bold-active)"
1184
- }
1185
- }
1186
- },
1187
- input: {
1188
- initial: {
1189
- light: {
1190
- h: 0,
1191
- s: 0,
1192
- l: 99,
1193
- a: 1
1194
- },
1195
- dark: {
1196
- h: 0,
1197
- s: 0,
1198
- l: 22,
1199
- a: 1
1200
- },
1201
- css: {
1202
- value: "light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 22%))",
1203
- variable: "var(--kds-color-background-input-initial)"
1204
- }
1205
- },
1206
- hover: {
1207
- light: {
1208
- h: 330,
1209
- s: 0,
1210
- l: 94.521,
1211
- a: 1
1212
- },
1213
- dark: {
1214
- h: 330,
1215
- s: 0,
1216
- l: 30.187,
1217
- a: 1
1218
- },
1219
- css: {
1220
- value: "light-dark(hsl(330 0% 94.521%), hsl(330 0% 30.187%))",
1221
- variable: "var(--kds-color-background-input-hover)"
1222
- }
1223
- },
1224
- active: {
1225
- light: {
1226
- h: 330,
1227
- s: 0,
1228
- l: 85.683,
1229
- a: 1
1230
- },
1231
- dark: {
1232
- h: 336,
1233
- s: 0,
1234
- l: 38.771,
1235
- a: 1
1236
- },
1237
- css: {
1238
- value: "light-dark(hsl(330 0% 85.683%), hsl(336 0% 38.771%))",
1239
- variable: "var(--kds-color-background-input-active)"
1240
- }
1241
- }
1242
- },
1243
- disabled: {
1244
- default: {
1245
- light: {
1246
- h: 340,
1247
- s: 0,
1248
- l: 48.2,
1249
- a: .48
1250
- },
1251
- dark: {
1252
- h: 340,
1253
- s: 0,
1254
- l: 48.2,
1255
- a: .48
1256
- },
1257
- css: {
1258
- value: "hsl(340 0% 48.2% / 0.48)",
1259
- variable: "var(--kds-color-background-disabled-default)"
1260
- }
1261
- },
1262
- primary: {
1263
- light: {
1264
- h: 173.91,
1265
- s: 18.134,
1266
- l: 40.592,
1267
- a: 1
1268
- },
1269
- dark: {
1270
- h: 173.91,
1271
- s: 18.134,
1272
- l: 40.592,
1273
- a: 1
1274
- },
1275
- css: {
1276
- value: "hsl(173.91 18.134% 40.592%)",
1277
- variable: "var(--kds-color-background-disabled-primary)"
1278
- }
1279
- },
1280
- danger: {
1281
- light: {
1282
- h: 1.3489,
1283
- s: 43.031,
1284
- l: 37.79,
1285
- a: 1
1286
- },
1287
- dark: {
1288
- h: 1.3489,
1289
- s: 43.031,
1290
- l: 37.79,
1291
- a: 1
1292
- },
1293
- css: {
1294
- value: "hsl(1.3489 43.031% 37.79%)",
1295
- variable: "var(--kds-color-background-disabled-danger)"
1296
- }
1297
- }
1298
- },
1299
- "success-bold": { initial: {
1300
- light: {
1301
- h: 111.3,
1302
- s: 47.5,
1303
- l: 31.4,
1304
- a: 1
1305
- },
1306
- dark: {
1307
- h: 123.7,
1308
- s: 46.7,
1309
- l: 20.6,
1310
- a: 1
1311
- },
1312
- css: {
1313
- value: "light-dark(hsl(111.3, 47.5%, 31.4%), hsl(123.7, 46.7%, 20.6%))",
1314
- variable: "var(--kds-color-background-success-bold-initial)"
1315
- }
1316
- } },
1317
- "info-bold": {
1318
- initial: {
1319
- light: {
1320
- h: 209.4,
1321
- s: 57.3,
1322
- l: 49.6,
1323
- a: 1
1324
- },
1325
- dark: {
1326
- h: 212.1,
1327
- s: 78.2,
1328
- l: 67.6,
1329
- a: 1
1330
- },
1331
- css: {
1332
- value: "light-dark(hsl(209.4, 57.3%, 49.6%), hsl(212.1, 78.2%, 67.6%))",
1333
- variable: "var(--kds-color-background-info-bold-initial)"
1334
- }
1335
- },
1336
- hover: {
1337
- light: {
1338
- h: 208.2,
1339
- s: 62.9,
1340
- l: 41.2,
1341
- a: 1
1342
- },
1343
- dark: {
1344
- h: 213.6,
1345
- s: 91.6,
1346
- l: 76.7,
1347
- a: 1
1348
- },
1349
- css: {
1350
- value: "light-dark(hsl(208.2, 62.9%, 41.2%), hsl(213.6, 91.6%, 76.7%))",
1351
- variable: "var(--kds-color-background-info-bold-hover)"
1352
- }
1353
- },
1354
- active: {
1355
- light: {
1356
- h: 208.3,
1357
- s: 60.5,
1358
- l: 33.7,
1359
- a: 1
1360
- },
1361
- dark: {
1362
- h: 214.5,
1363
- s: 100,
1364
- l: 84.3,
1365
- a: 1
1366
- },
1367
- css: {
1368
- value: "light-dark(hsl(208.3, 60.5%, 33.7%), hsl(214.5, 100%, 84.3%))",
1369
- variable: "var(--kds-color-background-info-bold-active)"
1370
- }
1371
- }
1372
- }
1373
- },
1374
- "background-static": {
1375
- info: {
1376
- light: {
1377
- h: 216.7,
1378
- s: 100,
1379
- l: 96.5,
1380
- a: 1
1381
- },
1382
- dark: {
1383
- h: 210,
1384
- s: 50,
1385
- l: 27.5,
1386
- a: 1
1387
- },
1388
- css: {
1389
- value: "light-dark(hsl(216.7, 100%, 96.5%), hsl(210, 50%, 27.5%))",
1390
- variable: "var(--kds-color-background-static-info)"
1391
- }
1392
- },
1393
- "info-muted": {
1394
- light: {
1395
- h: 216.83,
1396
- s: 100.14,
1397
- l: 97.347,
1398
- a: 1
1399
- },
1400
- dark: {
1401
- h: 211.86,
1402
- s: 40.97,
1403
- l: 17.58,
1404
- a: 1
1405
- },
1406
- css: {
1407
- value: "light-dark(hsl(216.83 100.14% 97.347%), hsl(211.86 40.97% 17.58%))",
1408
- variable: "var(--kds-color-background-static-info-muted)"
1409
- }
1410
- },
1411
- warning: {
1412
- light: {
1413
- h: 30,
1414
- s: 95.2,
1415
- l: 91.8,
1416
- a: 1
1417
- },
1418
- dark: {
1419
- h: 13.1,
1420
- s: 66.1,
1421
- l: 23.1,
1422
- a: 1
1423
- },
1424
- css: {
1425
- value: "light-dark(hsl(30, 95.2%, 91.8%), hsl(13.1, 66.1%, 23.1%))",
1426
- variable: "var(--kds-color-background-static-warning)"
1427
- }
1428
- },
1429
- "warning-muted": {
1430
- light: {
1431
- h: 29.601,
1432
- s: 98.108,
1433
- l: 95.778,
1434
- a: 1
1435
- },
1436
- dark: {
1437
- h: 14.687,
1438
- s: 60.252,
1439
- l: 14.775,
1440
- a: 1
1441
- },
1442
- css: {
1443
- value: "light-dark(hsl(29.601 98.108% 95.778%), hsl(14.687 60.252% 14.775%))",
1444
- variable: "var(--kds-color-background-static-warning-muted)"
1445
- }
1446
- },
1447
- danger: {
1448
- light: {
1449
- h: 1.5,
1450
- s: 100,
1451
- l: 92.4,
1452
- a: 1
1453
- },
1454
- dark: {
1455
- h: 347.6,
1456
- s: 97.1,
1457
- l: 27.3,
1458
- a: 1
1459
- },
1460
- css: {
1461
- value: "light-dark(hsl(1.5, 100%, 92.4%), hsl(347.6, 97.1%, 27.3%))",
1462
- variable: "var(--kds-color-background-static-danger)"
1463
- }
1464
- },
1465
- "danger-muted": {
1466
- light: {
1467
- h: 0,
1468
- s: 100,
1469
- l: 97.1,
1470
- a: 1
1471
- },
1472
- dark: {
1473
- h: 356.76,
1474
- s: 65.215,
1475
- l: 15.117,
1476
- a: 1
1477
- },
1478
- css: {
1479
- value: "light-dark(hsl(0, 100%, 97.1%), hsl(356.76 65.215% 15.117%))",
1480
- variable: "var(--kds-color-background-static-danger-muted)"
1481
- }
1482
- },
1483
- success: {
1484
- light: {
1485
- h: 119.4,
1486
- s: 96.139,
1487
- l: 93.64,
1488
- a: 1
1489
- },
1490
- dark: {
1491
- h: 123.7,
1492
- s: 46.7,
1493
- l: 20.6,
1494
- a: 1
1495
- },
1496
- css: {
1497
- value: "light-dark(hsl(119.4 96.139% 93.64%), hsl(123.7, 46.7%, 20.6%))",
1498
- variable: "var(--kds-color-background-static-success)"
1499
- }
1500
- },
1501
- "success-muted": {
1502
- light: {
1503
- h: 125.38,
1504
- s: 64.795,
1505
- l: 97.496,
1506
- a: 1
1507
- },
1508
- dark: {
1509
- h: 128.3,
1510
- s: 38.542,
1511
- l: 10.352,
1512
- a: 1
1513
- },
1514
- css: {
1515
- value: "light-dark(hsl(125.38 64.795% 97.496%), hsl(128.3 38.542% 10.352%))",
1516
- variable: "var(--kds-color-background-static-success-muted)"
1517
- }
1518
- },
1519
- brand: {
1520
- light: {
1521
- h: 50.8,
1522
- s: 100,
1523
- l: 50,
1524
- a: 1
1525
- },
1526
- dark: {
1527
- h: 50.8,
1528
- s: 100,
1529
- l: 50,
1530
- a: 1
1531
- },
1532
- css: {
1533
- value: "hsl(50.8, 100%, 50%)",
1534
- variable: "var(--kds-color-background-static-brand)"
1535
- }
1536
- },
1537
- overlay: {
1538
- light: {
1539
- h: 0,
1540
- s: 0,
1541
- l: 12.9,
1542
- a: 1
1543
- },
1544
- dark: {
1545
- h: 0,
1546
- s: 0,
1547
- l: 22,
1548
- a: 1
1549
- },
1550
- css: {
1551
- value: "light-dark(hsl(0, 0%, 12.9%), hsl(0, 0%, 22%))",
1552
- variable: "var(--kds-color-background-static-overlay)"
1553
- }
1554
- }
1555
- },
1556
- "text-and-icon": {
1557
- neutral: {
1558
- light: {
1559
- h: 0,
1560
- s: 0,
1561
- l: 15.7,
1562
- a: 1
1563
- },
1564
- dark: {
1565
- h: 0,
1566
- s: 0,
1567
- l: 94.1,
1568
- a: 1
1569
- },
1570
- css: {
1571
- value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
1572
- variable: "var(--kds-color-text-and-icon-neutral)"
1573
- }
1574
- },
1575
- muted: {
1576
- light: {
1577
- h: 0,
1578
- s: 0,
1579
- l: 32.2,
1580
- a: 1
1581
- },
1582
- dark: {
1583
- h: 0,
1584
- s: 0,
1585
- l: 90.2,
1586
- a: 1
1587
- },
1588
- css: {
1589
- value: "light-dark(hsl(0, 0%, 32.2%), hsl(0, 0%, 90.2%))",
1590
- variable: "var(--kds-color-text-and-icon-muted)"
1591
- }
1592
- },
1593
- subtle: {
1594
- light: {
1595
- h: 0,
1596
- s: 0,
1597
- l: 43,
1598
- a: 1
1599
- },
1600
- dark: {
1601
- h: 0,
1602
- s: 0,
1603
- l: 72.5,
1604
- a: 1
1605
- },
1606
- css: {
1607
- value: "light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%))",
1608
- variable: "var(--kds-color-text-and-icon-subtle)"
1609
- }
1610
- },
1611
- "neutral-inverted": {
1612
- light: {
1613
- h: 0,
1614
- s: 0,
1615
- l: 98,
1616
- a: 1
1617
- },
1618
- dark: {
1619
- h: 0,
1620
- s: 0,
1621
- l: 15.7,
1622
- a: 1
1623
- },
1624
- css: {
1625
- value: "light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%))",
1626
- variable: "var(--kds-color-text-and-icon-neutral-inverted)"
1627
- }
1628
- },
1629
- primary: {
1630
- light: {
1631
- h: 176.1,
1632
- s: 66.7,
1633
- l: 22.4,
1634
- a: 1
1635
- },
1636
- dark: {
1637
- h: 176.1,
1638
- s: 66.7,
1639
- l: 22.4,
1640
- a: 1
1641
- },
1642
- css: {
1643
- value: "hsl(176.1, 66.7%, 22.4%)",
1644
- variable: "var(--kds-color-text-and-icon-primary)"
1645
- }
1646
- },
1647
- "primary-inverted": {
1648
- light: {
1649
- h: 165.6,
1650
- s: 67.6,
1651
- l: 92.7,
1652
- a: 1
1653
- },
1654
- dark: {
1655
- h: 165.6,
1656
- s: 67.6,
1657
- l: 92.7,
1658
- a: 1
1659
- },
1660
- css: {
1661
- value: "hsl(165.6, 67.6%, 92.7%)",
1662
- variable: "var(--kds-color-text-and-icon-primary-inverted)"
1663
- }
1664
- },
1665
- selected: {
1666
- light: {
1667
- h: 176.1,
1668
- s: 66.7,
1669
- l: 22.4,
1670
- a: 1
1671
- },
1672
- dark: {
1673
- h: 168.8,
1674
- s: 34.4,
1675
- l: 75.5,
1676
- a: 1
1677
- },
1678
- css: {
1679
- value: "light-dark(hsl(176.1, 66.7%, 22.4%), hsl(168.8, 34.4%, 75.5%))",
1680
- variable: "var(--kds-color-text-and-icon-selected)"
1681
- }
1682
- },
1683
- "selected-inverted": {
1684
- light: {
1685
- h: 165,
1686
- s: 80,
1687
- l: 96.1,
1688
- a: 1
1689
- },
1690
- dark: {
1691
- h: 165,
1692
- s: 80,
1693
- l: 96.1,
1694
- a: 1
1695
- },
1696
- css: {
1697
- value: "hsl(165, 80%, 96.1%)",
1698
- variable: "var(--kds-color-text-and-icon-selected-inverted)"
1699
- }
1700
- },
1701
- warning: {
1702
- light: {
1703
- h: 19,
1704
- s: 63.1,
1705
- l: 38.2,
1706
- a: 1
1707
- },
1708
- dark: {
1709
- h: 31.2,
1710
- s: 82.8,
1711
- l: 65.9,
1712
- a: 1
1713
- },
1714
- css: {
1715
- value: "light-dark(hsl(19, 63.1%, 38.2%), hsl(31.2, 82.8%, 65.9%))",
1716
- variable: "var(--kds-color-text-and-icon-warning)"
1717
- }
1718
- },
1719
- "warning-inverted": {
1720
- light: {
1721
- h: 31,
1722
- s: 100,
1723
- l: 82.5,
1724
- a: 1
1725
- },
1726
- dark: {
1727
- h: 31,
1728
- s: 100,
1729
- l: 82.5,
1730
- a: 1
1731
- },
1732
- css: {
1733
- value: "hsl(31, 100%, 82.5%)",
1734
- variable: "var(--kds-color-text-and-icon-warning-inverted)"
1735
- }
1736
- },
1737
- danger: {
1738
- light: {
1739
- h: 348.8,
1740
- s: 90.9,
1741
- l: 34.5,
1742
- a: 1
1743
- },
1744
- dark: {
1745
- h: 3.5,
1746
- s: 100,
1747
- l: 79.6,
1748
- a: 1
1749
- },
1750
- css: {
1751
- value: "light-dark(hsl(348.8, 90.9%, 34.5%), hsl(3.5, 100%, 79.6%))",
1752
- variable: "var(--kds-color-text-and-icon-danger)"
1753
- }
1754
- },
1755
- "danger-inverted": {
1756
- light: {
1757
- h: 0,
1758
- s: 100,
1759
- l: 97.1,
1760
- a: 1
1761
- },
1762
- dark: {
1763
- h: 1.5,
1764
- s: 100,
1765
- l: 92.4,
1766
- a: 1
1767
- },
1768
- css: {
1769
- value: "light-dark(hsl(0, 100%, 97.1%), hsl(1.5, 100%, 92.4%))",
1770
- variable: "var(--kds-color-text-and-icon-danger-inverted)"
1771
- }
1772
- },
1773
- success: {
1774
- light: {
1775
- h: 116.1,
1776
- s: 46.6,
1777
- l: 25.7,
1778
- a: 1
1779
- },
1780
- dark: {
1781
- h: 109,
1782
- s: 47.2,
1783
- l: 61.4,
1784
- a: 1
1785
- },
1786
- css: {
1787
- value: "light-dark(hsl(116.1, 46.6%, 25.7%), hsl(109, 47.2%, 61.4%))",
1788
- variable: "var(--kds-color-text-and-icon-success)"
1789
- }
1790
- },
1791
- "success-inverted": {
1792
- light: {
1793
- h: 120,
1794
- s: 95.3,
1795
- l: 91.6,
1796
- a: 1
1797
- },
1798
- dark: {
1799
- h: 120,
1800
- s: 95.3,
1801
- l: 91.6,
1802
- a: 1
1803
- },
1804
- css: {
1805
- value: "hsl(120, 95.3%, 91.6%)",
1806
- variable: "var(--kds-color-text-and-icon-success-inverted)"
1807
- }
1808
- },
1809
- disabled: {
1810
- light: {
1811
- h: 0,
1812
- s: 0,
1813
- l: 64,
1814
- a: 1
1815
- },
1816
- dark: {
1817
- h: 0,
1818
- s: 0,
1819
- l: 48.2,
1820
- a: 1
1821
- },
1822
- css: {
1823
- value: "light-dark(hsl(0, 0%, 64%), hsl(0, 0%, 48.2%))",
1824
- variable: "var(--kds-color-text-and-icon-disabled)"
1825
- }
1826
- },
1827
- "disabled-inverted": {
1828
- light: {
1829
- h: 0,
1830
- s: 0,
1831
- l: 72.5,
1832
- a: 1
1833
- },
1834
- dark: {
1835
- h: 0,
1836
- s: 0,
1837
- l: 72.5,
1838
- a: 1
1839
- },
1840
- css: {
1841
- value: "hsl(0, 0%, 72.5%)",
1842
- variable: "var(--kds-color-text-and-icon-disabled-inverted)"
1843
- }
1844
- },
1845
- info: {
1846
- light: {
1847
- h: 208.3,
1848
- s: 60.5,
1849
- l: 33.7,
1850
- a: 1
1851
- },
1852
- dark: {
1853
- h: 213.6,
1854
- s: 91.6,
1855
- l: 76.7,
1856
- a: 1
1857
- },
1858
- css: {
1859
- value: "light-dark(hsl(208.3, 60.5%, 33.7%), hsl(213.6, 91.6%, 76.7%))",
1860
- variable: "var(--kds-color-text-and-icon-info)"
1861
- }
1862
- },
1863
- editor: {
1864
- light: {
1865
- h: 0,
1866
- s: 0,
1867
- l: 11.4,
1868
- a: 1
1869
- },
1870
- dark: {
1871
- h: 0,
1872
- s: 0,
1873
- l: 94.1,
1874
- a: 1
1875
- },
1876
- css: {
1877
- value: "light-dark(hsl(0, 0%, 11.4%), hsl(0, 0%, 94.1%))",
1878
- variable: "var(--kds-color-text-and-icon-editor)"
1879
- }
1880
- }
1881
- },
1882
- border: {
1883
- neutral: {
1884
- light: {
1885
- h: 330,
1886
- s: 0,
1887
- l: 10.2,
1888
- a: .4
1889
- },
1890
- dark: {
1891
- h: 330,
1892
- s: 0,
1893
- l: 99,
1894
- a: .5
1895
- },
1896
- css: {
1897
- value: "light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5))",
1898
- variable: "var(--kds-color-border-neutral)"
1899
- }
1900
- },
1901
- muted: {
1902
- light: {
1903
- h: 330,
1904
- s: 0,
1905
- l: 10.2,
1906
- a: .2
1907
- },
1908
- dark: {
1909
- h: 330,
1910
- s: 0,
1911
- l: 99,
1912
- a: .2
1913
- },
1914
- css: {
1915
- value: "light-dark(hsl(330 0% 10.2% / 0.2), hsl(330 0% 99% / 0.2))",
1916
- variable: "var(--kds-color-border-muted)"
1917
- }
1918
- },
1919
- subtle: {
1920
- light: {
1921
- h: 330,
1922
- s: 0,
1923
- l: 10.2,
1924
- a: .1
1925
- },
1926
- dark: {
1927
- h: 330,
1928
- s: 0,
1929
- l: 99,
1930
- a: .1
1931
- },
1932
- css: {
1933
- value: "light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1))",
1934
- variable: "var(--kds-color-border-subtle)"
1935
- }
1936
- },
1937
- "primary-bold": {
1938
- light: {
1939
- h: 176.7,
1940
- s: 82,
1941
- l: 17.5,
1942
- a: 1
1943
- },
1944
- dark: {
1945
- h: 176.7,
1946
- s: 82,
1947
- l: 17.5,
1948
- a: 1
1949
- },
1950
- css: {
1951
- value: "hsl(176.7, 82%, 17.5%)",
1952
- variable: "var(--kds-color-border-primary-bold)"
1953
- }
1954
- },
1955
- primary: {
1956
- light: {
1957
- h: 169.8,
1958
- s: 30.6,
1959
- l: 66.1,
1960
- a: 1
1961
- },
1962
- dark: {
1963
- h: 168.8,
1964
- s: 34.4,
1965
- l: 75.5,
1966
- a: 1
1967
- },
1968
- css: {
1969
- value: "light-dark(hsl(169.8, 30.6%, 66.1%), hsl(168.8, 34.4%, 75.5%))",
1970
- variable: "var(--kds-color-border-primary)"
1971
- }
1972
- },
1973
- "selected-bold": {
1974
- light: {
1975
- h: 174.4,
1976
- s: 47.8,
1977
- l: 30.8,
1978
- a: 1
1979
- },
1980
- dark: {
1981
- h: 168.8,
1982
- s: 34.4,
1983
- l: 75.5,
1984
- a: 1
1985
- },
1986
- css: {
1987
- value: "light-dark(hsl(174.4, 47.8%, 30.8%), hsl(168.8, 34.4%, 75.5%))",
1988
- variable: "var(--kds-color-border-selected-bold)"
1989
- }
1990
- },
1991
- selected: {
1992
- light: {
1993
- h: 171.8,
1994
- s: 27,
1995
- l: 47.8,
1996
- a: 1
1997
- },
1998
- dark: {
1999
- h: 168,
2000
- s: 46.7,
2001
- l: 85.3,
2002
- a: 1
2003
- },
2004
- css: {
2005
- value: "light-dark(hsl(171.8, 27%, 47.8%), hsl(168, 46.7%, 85.3%))",
2006
- variable: "var(--kds-color-border-selected)"
2007
- }
2008
- },
2009
- "selected-accent": {
2010
- light: {
2011
- h: 209.4,
2012
- s: 57.3,
2013
- l: 49.6,
2014
- a: 1
2015
- },
2016
- dark: {
2017
- h: 213.6,
2018
- s: 91.6,
2019
- l: 76.7,
2020
- a: 1
2021
- },
2022
- css: {
2023
- value: "light-dark(hsl(209.4, 57.3%, 49.6%), hsl(213.6, 91.6%, 76.7%))",
2024
- variable: "var(--kds-color-border-selected-accent)"
2025
- }
2026
- },
2027
- "warning-bold": {
2028
- light: {
2029
- h: 19,
2030
- s: 63.1,
2031
- l: 38.2,
2032
- a: 1
2033
- },
2034
- dark: {
2035
- h: 31,
2036
- s: 100,
2037
- l: 82.5,
2038
- a: 1
2039
- },
2040
- css: {
2041
- value: "light-dark(hsl(19, 63.1%, 38.2%), hsl(31, 100%, 82.5%))",
2042
- variable: "var(--kds-color-border-warning-bold)"
2043
- }
2044
- },
2045
- warning: {
2046
- light: {
2047
- h: 30.8,
2048
- s: 79.3,
2049
- l: 73.5,
2050
- a: 1
2051
- },
2052
- dark: {
2053
- h: 13.1,
2054
- s: 66.1,
2055
- l: 23.1,
2056
- a: 1
2057
- },
2058
- css: {
2059
- value: "light-dark(hsl(30.8, 79.3%, 73.5%), hsl(13.1, 66.1%, 23.1%))",
2060
- variable: "var(--kds-color-border-warning)"
2061
- }
2062
- },
2063
- "danger-bold": {
2064
- light: {
2065
- h: 348.8,
2066
- s: 90.9,
2067
- l: 34.5,
2068
- a: 1
2069
- },
2070
- dark: {
2071
- h: 3.5,
2072
- s: 100,
2073
- l: 79.6,
2074
- a: 1
2075
- },
2076
- css: {
2077
- value: "light-dark(hsl(348.8, 90.9%, 34.5%), hsl(3.5, 100%, 79.6%))",
2078
- variable: "var(--kds-color-border-danger-bold)"
2079
- }
2080
- },
2081
- danger: {
2082
- light: {
2083
- h: 3.4,
2084
- s: 100,
2085
- l: 86.1,
2086
- a: 1
2087
- },
2088
- dark: {
2089
- h: 348,
2090
- s: 94.3,
2091
- l: 20.8,
2092
- a: 1
2093
- },
2094
- css: {
2095
- value: "light-dark(hsl(3.4, 100%, 86.1%), hsl(348, 94.3%, 20.8%))",
2096
- variable: "var(--kds-color-border-danger)"
2097
- }
2098
- },
2099
- "success-bold": {
2100
- light: {
2101
- h: 116.1,
2102
- s: 46.6,
2103
- l: 25.7,
2104
- a: 1
2105
- },
2106
- dark: {
2107
- h: 112,
2108
- s: 56.5,
2109
- l: 71.2,
2110
- a: 1
2111
- },
2112
- css: {
2113
- value: "light-dark(hsl(116.1, 46.6%, 25.7%), hsl(112, 56.5%, 71.2%))",
2114
- variable: "var(--kds-color-border-success-bold)"
2115
- }
2116
- },
2117
- success: {
2118
- light: {
2119
- h: 112,
2120
- s: 56.5,
2121
- l: 71.2,
2122
- a: 1
2123
- },
2124
- dark: {
2125
- h: 123.7,
2126
- s: 46.7,
2127
- l: 20.6,
2128
- a: 1
2129
- },
2130
- css: {
2131
- value: "light-dark(hsl(112, 56.5%, 71.2%), hsl(123.7, 46.7%, 20.6%))",
2132
- variable: "var(--kds-color-border-success)"
2133
- }
2134
- },
2135
- "info-bold": {
2136
- light: {
2137
- h: 208.3,
2138
- s: 60.5,
2139
- l: 33.7,
2140
- a: 1
2141
- },
2142
- dark: {
2143
- h: 214.5,
2144
- s: 100,
2145
- l: 84.3,
2146
- a: 1
2147
- },
2148
- css: {
2149
- value: "light-dark(hsl(208.3, 60.5%, 33.7%), hsl(214.5, 100%, 84.3%))",
2150
- variable: "var(--kds-color-border-info-bold)"
2151
- }
2152
- },
2153
- info: {
2154
- light: {
2155
- h: 214.5,
2156
- s: 100,
2157
- l: 84.3,
2158
- a: 1
2159
- },
2160
- dark: {
2161
- h: 210,
2162
- s: 50,
2163
- l: 27.5,
2164
- a: 1
2165
- },
2166
- css: {
2167
- value: "light-dark(hsl(214.5, 100%, 84.3%), hsl(210, 50%, 27.5%))",
2168
- variable: "var(--kds-color-border-info)"
2169
- }
2170
- },
2171
- transparent: {
2172
- light: {
2173
- h: 345,
2174
- s: 0,
2175
- l: 11.4,
2176
- a: 0
2177
- },
2178
- dark: {
2179
- h: 345,
2180
- s: 0,
2181
- l: 11.4,
2182
- a: 0
2183
- },
2184
- css: {
2185
- value: "hsl(345 0% 11.4% / 0)",
2186
- variable: "var(--kds-color-border-transparent)"
2187
- }
2188
- },
2189
- disabled: {
2190
- light: {
2191
- h: 0,
2192
- s: 0,
2193
- l: 72.5,
2194
- a: 1
2195
- },
2196
- dark: {
2197
- h: 0,
2198
- s: 0,
2199
- l: 48.2,
2200
- a: 1
2201
- },
2202
- css: {
2203
- value: "light-dark(hsl(0, 0%, 72.5%), hsl(0, 0%, 48.2%))",
2204
- variable: "var(--kds-color-border-disabled)"
2205
- }
2206
- },
2207
- brand: {
2208
- light: {
2209
- h: 50.8,
2210
- s: 100,
2211
- l: 50,
2212
- a: 1
2213
- },
2214
- dark: {
2215
- h: 50.8,
2216
- s: 100,
2217
- l: 50,
2218
- a: 1
2219
- },
2220
- css: {
2221
- value: "hsl(50.8, 100%, 50%)",
2222
- variable: "var(--kds-color-border-brand)"
2223
- }
2224
- },
2225
- "neutral-bold-initial": {
2226
- light: {
2227
- h: 330,
2228
- s: 0,
2229
- l: 10.2,
2230
- a: .4
2231
- },
2232
- dark: {
2233
- h: 330,
2234
- s: 0,
2235
- l: 99,
2236
- a: .4
2237
- },
2238
- css: {
2239
- value: "light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.4))",
2240
- variable: "var(--kds-color-border-neutral-bold-initial)"
2241
- }
2242
- },
2243
- "neutral-bold-hover": {
2244
- light: {
2245
- h: 330,
2246
- s: 0,
2247
- l: 10.2,
2248
- a: .64
2249
- },
2250
- dark: {
2251
- h: 330,
2252
- s: 0,
2253
- l: 99,
2254
- a: .58
2255
- },
2256
- css: {
2257
- value: "light-dark(hsl(330 0% 10.2% / 0.64), hsl(330 0% 99% / 0.58))",
2258
- variable: "var(--kds-color-border-neutral-bold-hover)"
2259
- }
2260
- },
2261
- "neutral-bold-active": {
2262
- light: {
2263
- h: 330,
2264
- s: 0,
2265
- l: 10.2,
2266
- a: .74
2267
- },
2268
- dark: {
2269
- h: 330,
2270
- s: 0,
2271
- l: 99,
2272
- a: .68
2273
- },
2274
- css: {
2275
- value: "light-dark(hsl(330 0% 10.2% / 0.74), hsl(330 0% 99% / 0.68))",
2276
- variable: "var(--kds-color-border-neutral-bold-active)"
2277
- }
2278
- }
2279
- },
2280
- focus: {
2281
- outline: {
2282
- light: {
2283
- h: 209.4,
2284
- s: 57.3,
2285
- l: 49.6,
2286
- a: 1
2287
- },
2288
- dark: {
2289
- h: 213.6,
2290
- s: 91.6,
2291
- l: 76.7,
2292
- a: 1
2293
- },
2294
- css: {
2295
- value: "light-dark(hsl(209.4, 57.3%, 49.6%), hsl(213.6, 91.6%, 76.7%))",
2296
- variable: "var(--kds-color-focus-outline)"
2297
- }
2298
- },
2299
- background: {
2300
- light: {
2301
- h: 215.7,
2302
- s: 100,
2303
- l: 91.8,
2304
- a: .4
2305
- },
2306
- dark: {
2307
- h: 209.4,
2308
- s: 49.5,
2309
- l: 20.2,
2310
- a: .5
2311
- },
2312
- css: {
2313
- value: "light-dark(hsl(215.7 100% 91.8% / 0.4), hsl(209.4 49.5% 20.2% / 0.5))",
2314
- variable: "var(--kds-color-focus-background)"
2315
- }
2316
- }
2317
- },
2318
- blanket: { default: {
2319
- light: {
2320
- h: 345,
2321
- s: 0,
2322
- l: 11.4,
2323
- a: .8
2324
- },
2325
- dark: {
2326
- h: 345,
2327
- s: 0,
2328
- l: 11.4,
2329
- a: .8
2330
- },
2331
- css: {
2332
- value: "hsl(345 0% 11.4% / 0.8)",
2333
- variable: "var(--kds-color-blanket-default)"
2334
- }
2335
- } },
2336
- chart: {
2337
- data: {
2338
- "series-1": {
2339
- light: {
2340
- h: 173.4,
2341
- s: 37.1,
2342
- l: 38.6,
2343
- a: 1
2344
- },
2345
- dark: {
2346
- h: 169.8,
2347
- s: 30.6,
2348
- l: 66.1,
2349
- a: 1
2350
- },
2351
- css: {
2352
- value: "light-dark(hsl(173.4, 37.1%, 38.6%), hsl(169.8, 30.6%, 66.1%))",
2353
- variable: "var(--kds-color-chart-data-series-1)"
2354
- }
2355
- },
2356
- "series-2": {
2357
- light: {
2358
- h: 211.3,
2359
- s: 67.3,
2360
- l: 59.2,
2361
- a: 1
2362
- },
2363
- dark: {
2364
- h: 213.6,
2365
- s: 91.6,
2366
- l: 76.7,
2367
- a: 1
2368
- },
2369
- css: {
2370
- value: "light-dark(hsl(211.3, 67.3%, 59.2%), hsl(213.6, 91.6%, 76.7%))",
2371
- variable: "var(--kds-color-chart-data-series-2)"
2372
- }
2373
- },
2374
- "series-3": {
2375
- light: {
2376
- h: 359.6,
2377
- s: 84.3,
2378
- l: 62.5,
2379
- a: 1
2380
- },
2381
- dark: {
2382
- h: 2.6,
2383
- s: 100,
2384
- l: 72.4,
2385
- a: 1
2386
- },
2387
- css: {
2388
- value: "light-dark(hsl(359.6, 84.3%, 62.5%), hsl(2.6, 100%, 72.4%))",
2389
- variable: "var(--kds-color-chart-data-series-3)"
2390
- }
2391
- },
2392
- "series-4": {
2393
- light: {
2394
- h: 0,
2395
- s: 0,
2396
- l: 22,
2397
- a: 1
2398
- },
2399
- dark: {
2400
- h: 0,
2401
- s: 0,
2402
- l: 72.5,
2403
- a: 1
2404
- },
2405
- css: {
2406
- value: "light-dark(hsl(0, 0%, 22%), hsl(0, 0%, 72.5%))",
2407
- variable: "var(--kds-color-chart-data-series-4)"
2408
- }
2409
- },
2410
- "series-5": {
2411
- light: {
2412
- h: 28,
2413
- s: 39,
2414
- l: 50,
2415
- a: 1
2416
- },
2417
- dark: {
2418
- h: 30,
2419
- s: 47,
2420
- l: 68,
2421
- a: 1
2422
- },
2423
- css: {
2424
- value: "light-dark(hsl(28, 39%, 50%), hsl(30, 47%, 68%))",
2425
- variable: "var(--kds-color-chart-data-series-5)"
2426
- }
2427
- },
2428
- "series-6": {
2429
- light: {
2430
- h: 208.2,
2431
- s: 62.9,
2432
- l: 41.2,
2433
- a: 1
2434
- },
2435
- dark: {
2436
- h: 209.4,
2437
- s: 57.3,
2438
- l: 49.6,
2439
- a: 1
2440
- },
2441
- css: {
2442
- value: "light-dark(hsl(208.2, 62.9%, 41.2%), hsl(209.4, 57.3%, 49.6%))",
2443
- variable: "var(--kds-color-chart-data-series-6)"
2444
- }
2445
- },
2446
- "series-7": {
2447
- light: {
2448
- h: 71.1,
2449
- s: 46.3,
2450
- l: 32.2,
2451
- a: 1
2452
- },
2453
- dark: {
2454
- h: 68.6,
2455
- s: 61,
2456
- l: 47.3,
2457
- a: 1
2458
- },
2459
- css: {
2460
- value: "light-dark(hsl(71.1, 46.3%, 32.2%), hsl(68.6, 61.0%, 47.3%))",
2461
- variable: "var(--kds-color-chart-data-series-7)"
2462
- }
2463
- },
2464
- "series-8": {
2465
- light: {
2466
- h: 308.3,
2467
- s: 31.6,
2468
- l: 55.3,
2469
- a: 1
2470
- },
2471
- dark: {
2472
- h: 316.1,
2473
- s: 40.6,
2474
- l: 72.9,
2475
- a: 1
2476
- },
2477
- css: {
2478
- value: "light-dark(hsl(308.3, 31.6%, 55.3%), hsl(316.1, 40.6%, 72.9%))",
2479
- variable: "var(--kds-color-chart-data-series-8)"
2480
- }
2481
- },
2482
- "series-9": {
2483
- light: {
2484
- h: 193.1,
2485
- s: 60.2,
2486
- l: 43.3,
2487
- a: 1
2488
- },
2489
- dark: {
2490
- h: 191.3,
2491
- s: 57.1,
2492
- l: 54.3,
2493
- a: 1
2494
- },
2495
- css: {
2496
- value: "light-dark(hsl(193.1, 60.2%, 43.3%), hsl(191.3, 57.1%, 54.3%))",
2497
- variable: "var(--kds-color-chart-data-series-9)"
2498
- }
2499
- },
2500
- track: {
2501
- light: {
2502
- h: 0,
2503
- s: 0,
2504
- l: 94.1,
2505
- a: 1
2506
- },
2507
- dark: {
2508
- h: 0,
2509
- s: 0,
2510
- l: 32.2,
2511
- a: 1
2512
- },
2513
- css: {
2514
- value: "light-dark(hsl(0, 0%, 94.1%), hsl(0, 0%, 32.2%))",
2515
- variable: "var(--kds-color-chart-data-track)"
2516
- }
2517
- }
2518
- },
2519
- status: {
2520
- positive: {
2521
- light: {
2522
- h: 107.4,
2523
- s: 42.2,
2524
- l: 44.1,
2525
- a: 1
2526
- },
2527
- dark: {
2528
- h: 109,
2529
- s: 47.2,
2530
- l: 61.4,
2531
- a: 1
2532
- },
2533
- css: {
2534
- value: "light-dark(hsl(107.4, 42.2%, 44.1%), hsl(109, 47.2%, 61.4%))",
2535
- variable: "var(--kds-color-chart-status-positive)"
2536
- }
2537
- },
2538
- negative: {
2539
- light: {
2540
- h: 356.3,
2541
- s: 76.8,
2542
- l: 54.3,
2543
- a: 1
2544
- },
2545
- dark: {
2546
- h: 0,
2547
- s: 100,
2548
- l: 66.1,
2549
- a: 1
2550
- },
2551
- css: {
2552
- value: "light-dark(hsl(356.3, 76.8%, 54.3%), hsl(0, 100%, 66.1%))",
2553
- variable: "var(--kds-color-chart-status-negative)"
2554
- }
2555
- },
2556
- warning: {
2557
- light: {
2558
- h: 19,
2559
- s: 63.1,
2560
- l: 38.2,
2561
- a: 1
2562
- },
2563
- dark: {
2564
- h: 31.2,
2565
- s: 82.8,
2566
- l: 65.9,
2567
- a: 1
2568
- },
2569
- css: {
2570
- value: "light-dark(hsl(19, 63.1%, 38.2%), hsl(31.2, 82.8%, 65.9%))",
2571
- variable: "var(--kds-color-chart-status-warning)"
2572
- }
2573
- },
2574
- error: {
2575
- light: {
2576
- h: 348.8,
2577
- s: 90.9,
2578
- l: 34.5,
2579
- a: 1
2580
- },
2581
- dark: {
2582
- h: 3.5,
2583
- s: 100,
2584
- l: 79.6,
2585
- a: 1
2586
- },
2587
- css: {
2588
- value: "light-dark(hsl(348.8, 90.9%, 34.5%), hsl(3.5, 100%, 79.6%))",
2589
- variable: "var(--kds-color-chart-status-error)"
2590
- }
2591
- }
2592
- },
2593
- scaffolding: {
2594
- axis: {
2595
- light: {
2596
- h: 330,
2597
- s: 0,
2598
- l: 10.2,
2599
- a: .2
2600
- },
2601
- dark: {
2602
- h: 330,
2603
- s: 0,
2604
- l: 99,
2605
- a: .2
2606
- },
2607
- css: {
2608
- value: "light-dark(hsl(330 0% 10.2% / 0.2), hsl(330 0% 99% / 0.2))",
2609
- variable: "var(--kds-color-chart-scaffolding-axis)"
2610
- }
2611
- },
2612
- grid: {
2613
- light: {
2614
- h: 330,
2615
- s: 0,
2616
- l: 10.2,
2617
- a: .1
2618
- },
2619
- dark: {
2620
- h: 330,
2621
- s: 0,
2622
- l: 99,
2623
- a: .1
2624
- },
2625
- css: {
2626
- value: "light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1))",
2627
- variable: "var(--kds-color-chart-scaffolding-grid)"
2628
- }
2629
- },
2630
- border: {
2631
- light: {
2632
- h: 330,
2633
- s: 0,
2634
- l: 10.2,
2635
- a: .1
2636
- },
2637
- dark: {
2638
- h: 330,
2639
- s: 0,
2640
- l: 99,
2641
- a: .1
2642
- },
2643
- css: {
2644
- value: "light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1))",
2645
- variable: "var(--kds-color-chart-scaffolding-border)"
2646
- }
2647
- },
2648
- segment: {
2649
- light: {
2650
- h: 0,
2651
- s: 0,
2652
- l: 98,
2653
- a: 1
2654
- },
2655
- dark: {
2656
- h: 0,
2657
- s: 0,
2658
- l: 15.7,
2659
- a: 1
2660
- },
2661
- css: {
2662
- value: "light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%))",
2663
- variable: "var(--kds-color-chart-scaffolding-segment)"
2664
- }
2665
- },
2666
- surface: {
2667
- light: {
2668
- h: 0,
2669
- s: 0,
2670
- l: 98,
2671
- a: 1
2672
- },
2673
- dark: {
2674
- h: 0,
2675
- s: 0,
2676
- l: 15.7,
2677
- a: 1
2678
- },
2679
- css: {
2680
- value: "light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%))",
2681
- variable: "var(--kds-color-chart-scaffolding-surface)"
2682
- }
2683
- },
2684
- "tooltip-surface": {
2685
- light: {
2686
- h: 0,
2687
- s: 0,
2688
- l: 12.9,
2689
- a: 1
2690
- },
2691
- dark: {
2692
- h: 0,
2693
- s: 0,
2694
- l: 22,
2695
- a: 1
2696
- },
2697
- css: {
2698
- value: "light-dark(hsl(0, 0%, 12.9%), hsl(0, 0%, 22%))",
2699
- variable: "var(--kds-color-chart-scaffolding-tooltip-surface)"
2700
- }
2701
- }
2702
- },
2703
- control: {
2704
- default: {
2705
- light: {
2706
- h: 0,
2707
- s: 0,
2708
- l: 43,
2709
- a: 1
2710
- },
2711
- dark: {
2712
- h: 0,
2713
- s: 0,
2714
- l: 72.5,
2715
- a: 1
2716
- },
2717
- css: {
2718
- value: "light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%))",
2719
- variable: "var(--kds-color-chart-control-default)"
2720
- }
2721
- },
2722
- hover: {
2723
- light: {
2724
- h: 0,
2725
- s: 0,
2726
- l: 15.7,
2727
- a: 1
2728
- },
2729
- dark: {
2730
- h: 0,
2731
- s: 0,
2732
- l: 94.1,
2733
- a: 1
2734
- },
2735
- css: {
2736
- value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
2737
- variable: "var(--kds-color-chart-control-hover)"
2738
- }
2739
- },
2740
- selected: {
2741
- light: {
2742
- h: 174.4,
2743
- s: 47.8,
2744
- l: 30.8,
2745
- a: 1
2746
- },
2747
- dark: {
2748
- h: 176.1,
2749
- s: 66.7,
2750
- l: 22.4,
2751
- a: 1
2752
- },
2753
- css: {
2754
- value: "light-dark(hsl(174.4, 47.8%, 30.8%), hsl(176.1, 66.7%, 22.4%))",
2755
- variable: "var(--kds-color-chart-control-selected)"
2756
- }
2757
- },
2758
- disabled: {
2759
- light: {
2760
- h: 0,
2761
- s: 0,
2762
- l: 64,
2763
- a: 1
2764
- },
2765
- dark: {
2766
- h: 0,
2767
- s: 0,
2768
- l: 48.2,
2769
- a: 1
2770
- },
2771
- css: {
2772
- value: "light-dark(hsl(0, 0%, 64%), hsl(0, 0%, 48.2%))",
2773
- variable: "var(--kds-color-chart-control-disabled)"
2774
- }
2775
- }
2776
- },
2777
- text: {
2778
- title: {
2779
- light: {
2780
- h: 0,
2781
- s: 0,
2782
- l: 15.7,
2783
- a: 1
2784
- },
2785
- dark: {
2786
- h: 0,
2787
- s: 0,
2788
- l: 94.1,
2789
- a: 1
2790
- },
2791
- css: {
2792
- value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
2793
- variable: "var(--kds-color-chart-text-title)"
2794
- }
2795
- },
2796
- subtitle: {
2797
- light: {
2798
- h: 0,
2799
- s: 0,
2800
- l: 43,
2801
- a: 1
2802
- },
2803
- dark: {
2804
- h: 0,
2805
- s: 0,
2806
- l: 72.5,
2807
- a: 1
2808
- },
2809
- css: {
2810
- value: "light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%))",
2811
- variable: "var(--kds-color-chart-text-subtitle)"
2812
- }
2813
- },
2814
- "axis-name": {
2815
- light: {
2816
- h: 0,
2817
- s: 0,
2818
- l: 43,
2819
- a: 1
2820
- },
2821
- dark: {
2822
- h: 0,
2823
- s: 0,
2824
- l: 72.5,
2825
- a: 1
2826
- },
2827
- css: {
2828
- value: "light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%))",
2829
- variable: "var(--kds-color-chart-text-axis-name)"
2830
- }
2831
- },
2832
- "axis-label": {
2833
- light: {
2834
- h: 0,
2835
- s: 0,
2836
- l: 43,
2837
- a: 1
2838
- },
2839
- dark: {
2840
- h: 0,
2841
- s: 0,
2842
- l: 72.5,
2843
- a: 1
2844
- },
2845
- css: {
2846
- value: "light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%))",
2847
- variable: "var(--kds-color-chart-text-axis-label)"
2848
- }
2849
- },
2850
- legend: {
2851
- light: {
2852
- h: 0,
2853
- s: 0,
2854
- l: 15.7,
2855
- a: 1
2856
- },
2857
- dark: {
2858
- h: 0,
2859
- s: 0,
2860
- l: 94.1,
2861
- a: 1
2862
- },
2863
- css: {
2864
- value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
2865
- variable: "var(--kds-color-chart-text-legend)"
2866
- }
2867
- },
2868
- tooltip: {
2869
- light: {
2870
- h: 0,
2871
- s: 0,
2872
- l: 98,
2873
- a: 1
2874
- },
2875
- dark: {
2876
- h: 0,
2877
- s: 0,
2878
- l: 94.1,
2879
- a: 1
2880
- },
2881
- css: {
2882
- value: "light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 94.1%))",
2883
- variable: "var(--kds-color-chart-text-tooltip)"
2884
- }
2885
- },
2886
- label: {
2887
- light: {
2888
- h: 0,
2889
- s: 0,
2890
- l: 15.7,
2891
- a: 1
2892
- },
2893
- dark: {
2894
- h: 0,
2895
- s: 0,
2896
- l: 94.1,
2897
- a: 1
2898
- },
2899
- css: {
2900
- value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
2901
- variable: "var(--kds-color-chart-text-label)"
2902
- }
2903
- },
2904
- "on-fill-dark": {
2905
- light: {
2906
- h: 0,
2907
- s: 0,
2908
- l: 15.7,
2909
- a: 1
2910
- },
2911
- dark: {
2912
- h: 0,
2913
- s: 0,
2914
- l: 15.7,
2915
- a: 1
2916
- },
2917
- css: {
2918
- value: "hsl(0, 0%, 15.7%)",
2919
- variable: "var(--kds-color-chart-text-on-fill-dark)"
2920
- }
2921
- },
2922
- "on-fill-light": {
2923
- light: {
2924
- h: 0,
2925
- s: 0,
2926
- l: 98,
2927
- a: 1
2928
- },
2929
- dark: {
2930
- h: 0,
2931
- s: 0,
2932
- l: 98,
2933
- a: 1
2934
- },
2935
- css: {
2936
- value: "hsl(0, 0%, 98%)",
2937
- variable: "var(--kds-color-chart-text-on-fill-light)"
2938
- }
2939
- }
2940
- }
2941
- },
2942
- "nodes-and-variables": {
2943
- "flow-variable": {
2944
- light: {
2945
- h: 359.6,
2946
- s: 84.3,
2947
- l: 62.5,
2948
- a: 1
2949
- },
2950
- dark: {
2951
- h: 0,
2952
- s: 100,
2953
- l: 66.1,
2954
- a: 1
2955
- },
2956
- css: {
2957
- value: "light-dark(hsl(359.6, 84.3%, 62.5%), hsl(0, 100%, 66.1%))",
2958
- variable: "var(--kds-color-nodes-and-variables-flow-variable)"
2959
- }
2960
- },
2961
- loop: {
2962
- light: {
2963
- h: 187.7,
2964
- s: 51.7,
2965
- l: 76.5,
2966
- a: 1
2967
- },
2968
- dark: {
2969
- h: 187.7,
2970
- s: 51.7,
2971
- l: 76.5,
2972
- a: 1
2973
- },
2974
- css: {
2975
- value: "hsl(187.7, 51.7%, 76.5%)",
2976
- variable: "var(--kds-color-nodes-and-variables-loop)"
2977
- }
2978
- },
2979
- manipulator: {
2980
- light: {
2981
- h: 50.8,
2982
- s: 100,
2983
- l: 50,
2984
- a: 1
2985
- },
2986
- dark: {
2987
- h: 50.8,
2988
- s: 100,
2989
- l: 50,
2990
- a: 1
2991
- },
2992
- css: {
2993
- value: "hsl(50.8, 100%, 50%)",
2994
- variable: "var(--kds-color-nodes-and-variables-manipulator)"
2995
- }
2996
- },
2997
- predictor: {
2998
- light: {
2999
- h: 106.5,
3000
- s: 42.6,
3001
- l: 54.9,
3002
- a: 1
3003
- },
3004
- dark: {
3005
- h: 109,
3006
- s: 47.2,
3007
- l: 61.4,
3008
- a: 1
3009
- },
3010
- css: {
3011
- value: "light-dark(hsl(106.5, 42.6%, 54.9%), hsl(109, 47.2%, 61.4%))",
3012
- variable: "var(--kds-color-nodes-and-variables-predictor)"
3013
- }
3014
- },
3015
- source: {
3016
- light: {
3017
- h: 30,
3018
- s: 80.4,
3019
- l: 60,
3020
- a: 1
3021
- },
3022
- dark: {
3023
- h: 30,
3024
- s: 80.4,
3025
- l: 60,
3026
- a: 1
3027
- },
3028
- css: {
3029
- value: "hsl(30, 80.4%, 60%)",
3030
- variable: "var(--kds-color-nodes-and-variables-source)"
3031
- }
3032
- },
3033
- visualizer: {
3034
- light: {
3035
- h: 193.1,
3036
- s: 60.2,
3037
- l: 43.3,
3038
- a: 1
3039
- },
3040
- dark: {
3041
- h: 191.3,
3042
- s: 57.1,
3043
- l: 54.3,
3044
- a: 1
3045
- },
3046
- css: {
3047
- value: "light-dark(hsl(193.1, 60.2%, 43.3%), hsl(191.3, 57.1%, 54.3%))",
3048
- variable: "var(--kds-color-nodes-and-variables-visualizer)"
3049
- }
3050
- },
3051
- widget: {
3052
- light: {
3053
- h: 193.1,
3054
- s: 60.2,
3055
- l: 43.3,
3056
- a: 1
3057
- },
3058
- dark: {
3059
- h: 191.3,
3060
- s: 57.1,
3061
- l: 54.3,
3062
- a: 1
3063
- },
3064
- css: {
3065
- value: "light-dark(hsl(193.1, 60.2%, 43.3%), hsl(191.3, 57.1%, 54.3%))",
3066
- variable: "var(--kds-color-nodes-and-variables-widget)"
3067
- }
3068
- },
3069
- scope: {
3070
- light: {
3071
- h: 304.6,
3072
- s: 27.4,
3073
- l: 46.5,
3074
- a: 1
3075
- },
3076
- dark: {
3077
- h: 308.3,
3078
- s: 31.6,
3079
- l: 55.3,
3080
- a: 1
3081
- },
3082
- css: {
3083
- value: "light-dark(hsl(304.6, 27.4%, 46.5%), hsl(308.3, 31.6%, 55.3%))",
3084
- variable: "var(--kds-color-nodes-and-variables-scope)"
3085
- }
3086
- },
3087
- learner: {
3088
- light: {
3089
- h: 67.3,
3090
- s: 67.8,
3091
- l: 54.9,
3092
- a: 1
3093
- },
3094
- dark: {
3095
- h: 65.4,
3096
- s: 68.5,
3097
- l: 65.1,
3098
- a: 1
3099
- },
3100
- css: {
3101
- value: "light-dark(hsl(67.3, 67.8%, 54.9%), hsl(65.4, 68.5%, 65.1%))",
3102
- variable: "var(--kds-color-nodes-and-variables-learner)"
3103
- }
3104
- },
3105
- sink: {
3106
- light: {
3107
- h: 359.6,
3108
- s: 84.3,
3109
- l: 62.5,
3110
- a: 1
3111
- },
3112
- dark: {
3113
- h: 0,
3114
- s: 100,
3115
- l: 66.1,
3116
- a: 1
3117
- },
3118
- css: {
3119
- value: "light-dark(hsl(359.6, 84.3%, 62.5%), hsl(0, 100%, 66.1%))",
3120
- variable: "var(--kds-color-nodes-and-variables-sink)"
3121
- }
3122
- },
3123
- container: {
3124
- light: {
3125
- h: 69.4,
3126
- s: 53.5,
3127
- l: 39.6,
3128
- a: 1
3129
- },
3130
- dark: {
3131
- h: 69.4,
3132
- s: 53.5,
3133
- l: 39.6,
3134
- a: 1
3135
- },
3136
- css: {
3137
- value: "hsl(69.4, 53.5%, 39.6%)",
3138
- variable: "var(--kds-color-nodes-and-variables-container)"
3139
- }
3140
- },
3141
- unknown: {
3142
- light: {
3143
- h: 353,
3144
- s: 74.7,
3145
- l: 44.9,
3146
- a: 1
3147
- },
3148
- dark: {
3149
- h: 356.3,
3150
- s: 76.8,
3151
- l: 54.3,
3152
- a: 1
3153
- },
3154
- css: {
3155
- value: "light-dark(hsl(353, 74.7%, 44.9%), hsl(356.3, 76.8%, 54.3%))",
3156
- variable: "var(--kds-color-nodes-and-variables-unknown)"
3157
- }
3158
- },
3159
- other: {
3160
- light: {
3161
- h: 29,
3162
- s: 43,
3163
- l: 58,
3164
- a: 1
3165
- },
3166
- dark: {
3167
- h: 30,
3168
- s: 47,
3169
- l: 68,
3170
- a: 1
3171
- },
3172
- css: {
3173
- value: "light-dark(hsl(29, 43%, 58%), hsl(30, 47%, 68%))",
3174
- variable: "var(--kds-color-nodes-and-variables-other)"
3175
- }
3176
- },
3177
- metanode: {
3178
- light: {
3179
- h: 0,
3180
- s: 0,
3181
- l: 99,
3182
- a: 1
3183
- },
3184
- dark: {
3185
- h: 0,
3186
- s: 0,
3187
- l: 12.9,
3188
- a: 1
3189
- },
3190
- css: {
3191
- value: "light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 12.9%))",
3192
- variable: "var(--kds-color-nodes-and-variables-metanode)"
3193
- }
3194
- },
3195
- metanodeBorder: {
3196
- light: {
3197
- h: 0,
3198
- s: 0,
3199
- l: 32.2,
3200
- a: 1
3201
- },
3202
- dark: {
3203
- h: 0,
3204
- s: 0,
3205
- l: 94.1,
3206
- a: 1
3207
- },
3208
- css: {
3209
- value: "light-dark(hsl(0, 0%, 32.2%), hsl(0, 0%, 94.1%))",
3210
- variable: "var(--kds-color-nodes-and-variables-metanode-border)"
3211
- }
3212
- },
3213
- component: {
3214
- light: {
3215
- h: 0,
3216
- s: 0,
3217
- l: 72.5,
3218
- a: 1
3219
- },
3220
- dark: {
3221
- h: 0,
3222
- s: 0,
3223
- l: 43,
3224
- a: 1
3225
- },
3226
- css: {
3227
- value: "light-dark(hsl(0, 0%, 72.5%), hsl(0, 0%, 43%))",
3228
- variable: "var(--kds-color-nodes-and-variables-component)"
3229
- }
3230
- },
3231
- specialState: {
3232
- light: {
3233
- h: 0,
3234
- s: 0,
3235
- l: 99,
3236
- a: 1
3237
- },
3238
- dark: {
3239
- h: 0,
3240
- s: 0,
3241
- l: 12.9,
3242
- a: 1
3243
- },
3244
- css: {
3245
- value: "light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 12.9%))",
3246
- variable: "var(--kds-color-nodes-and-variables-special-state)"
3247
- }
3248
- },
3249
- forbiddenBorder: {
3250
- light: {
3251
- h: 0,
3252
- s: 0,
3253
- l: 18.8,
3254
- a: 1
3255
- },
3256
- dark: {
3257
- h: 0,
3258
- s: 0,
3259
- l: 90.2,
3260
- a: 1
3261
- },
3262
- css: {
3263
- value: "light-dark(hsl(0, 0%, 18.8%), hsl(0, 0%, 90.2%))",
3264
- variable: "var(--kds-color-nodes-and-variables-forbidden-border)"
3265
- }
3266
- },
3267
- forbidden: {
3268
- light: {
3269
- h: 0,
3270
- s: 0,
3271
- l: 90.2,
3272
- a: 1
3273
- },
3274
- dark: {
3275
- h: 0,
3276
- s: 0,
3277
- l: 22,
3278
- a: 1
3279
- },
3280
- css: {
3281
- value: "light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 22%))",
3282
- variable: "var(--kds-color-nodes-and-variables-forbidden)"
3283
- }
3284
- },
3285
- warningBorder: {
3286
- light: {
3287
- h: 19,
3288
- s: 63.1,
3289
- l: 38.2,
3290
- a: 1
3291
- },
3292
- dark: {
3293
- h: 31.2,
3294
- s: 82.8,
3295
- l: 65.9,
3296
- a: 1
3297
- },
3298
- css: {
3299
- value: "light-dark(hsl(19, 63.1%, 38.2%), hsl(31.2, 82.8%, 65.9%))",
3300
- variable: "var(--kds-color-nodes-and-variables-warning-border)"
3301
- }
3302
- },
3303
- warning: {
3304
- light: {
3305
- h: 31,
3306
- s: 100,
3307
- l: 82.5,
3308
- a: 1
3309
- },
3310
- dark: {
3311
- h: 0,
3312
- s: 0,
3313
- l: 22,
3314
- a: 1
3315
- },
3316
- css: {
3317
- value: "light-dark(hsl(31, 100%, 82.5%), hsl(0, 0%, 22%))",
3318
- variable: "var(--kds-color-nodes-and-variables-warning)"
3319
- }
3320
- },
3321
- errorBorder: {
3322
- light: {
3323
- h: 348.8,
3324
- s: 90.9,
3325
- l: 34.5,
3326
- a: 1
3327
- },
3328
- dark: {
3329
- h: 0,
3330
- s: 100,
3331
- l: 66.1,
3332
- a: 1
3333
- },
3334
- css: {
3335
- value: "light-dark(hsl(348.8, 90.9%, 34.5%), hsl(0, 100%, 66.1%))",
3336
- variable: "var(--kds-color-nodes-and-variables-error-border)"
3337
- }
3338
- },
3339
- error: {
3340
- light: {
3341
- h: 1.5,
3342
- s: 100,
3343
- l: 92.4,
3344
- a: 1
3345
- },
3346
- dark: {
3347
- h: 0,
3348
- s: 0,
3349
- l: 22,
3350
- a: 1
3351
- },
3352
- css: {
3353
- value: "light-dark(hsl(1.5, 100%, 92.4%), hsl(0, 0%, 22%))",
3354
- variable: "var(--kds-color-nodes-and-variables-error)"
3355
- }
3356
- },
3357
- loadingBorder: {
3358
- light: {
3359
- h: 208.3,
3360
- s: 60.5,
3361
- l: 33.7,
3362
- a: 1
3363
- },
3364
- dark: {
3365
- h: 214.5,
3366
- s: 100,
3367
- l: 84.3,
3368
- a: 1
3369
- },
3370
- css: {
3371
- value: "light-dark(hsl(208.3, 60.5%, 33.7%), hsl(214.5, 100%, 84.3%))",
3372
- variable: "var(--kds-color-nodes-and-variables-loading-border)"
3373
- }
3374
- },
3375
- loading: {
3376
- light: {
3377
- h: 215.7,
3378
- s: 100,
3379
- l: 91.8,
3380
- a: 1
3381
- },
3382
- dark: {
3383
- h: 209.4,
3384
- s: 49.5,
3385
- l: 20.2,
3386
- a: 1
3387
- },
3388
- css: {
3389
- value: "light-dark(hsl(215.7, 100%, 91.8%), hsl(209.4, 49.5%, 20.2%))",
3390
- variable: "var(--kds-color-nodes-and-variables-loading)"
3391
- }
3392
- },
3393
- configuration: {
3394
- light: {
3395
- h: 64.6,
3396
- s: 68.6,
3397
- l: 70,
3398
- a: 1
3399
- },
3400
- dark: {
3401
- h: 69.5,
3402
- s: 59.5,
3403
- l: 85.5,
3404
- a: 1
3405
- },
3406
- css: {
3407
- value: "light-dark(hsl(64.6, 68.6%, 70.0%), hsl(69.5, 59.5%, 85.5%))",
3408
- variable: "var(--kds-color-nodes-and-variables-configuration)"
3409
- }
3410
- },
3411
- quickform: {
3412
- light: {
3413
- h: 212.1,
3414
- s: 78.2,
3415
- l: 67.6,
3416
- a: 1
3417
- },
3418
- dark: {
3419
- h: 214.5,
3420
- s: 100,
3421
- l: 84.3,
3422
- a: 1
3423
- },
3424
- css: {
3425
- value: "light-dark(hsl(212.1, 78.2%, 67.6%), hsl(214.5, 100%, 84.3%))",
3426
- variable: "var(--kds-color-nodes-and-variables-quickform)"
3427
- }
3428
- }
3429
- },
3430
- port: {
3431
- data: {
3432
- light: {
3433
- h: 0,
3434
- s: 0,
3435
- l: 11.4,
3436
- a: 1
3437
- },
3438
- dark: {
3439
- h: 0,
3440
- s: 0,
3441
- l: 94.1,
3442
- a: 1
3443
- },
3444
- css: {
3445
- value: "light-dark(hsl(0, 0%, 11.4%), hsl(0, 0%, 94.1%))",
3446
- variable: "var(--kds-color-port-data)"
3447
- }
3448
- },
3449
- "flow-variable": {
3450
- light: {
3451
- h: 359.6,
3452
- s: 84.3,
3453
- l: 62.5,
3454
- a: 1
3455
- },
3456
- dark: {
3457
- h: 359.6,
3458
- s: 84.3,
3459
- l: 62.5,
3460
- a: 1
3461
- },
3462
- css: {
3463
- value: "hsl(359.6, 84.3%, 62.5%)",
3464
- variable: "var(--kds-color-port-flow-variable)"
3465
- }
3466
- },
3467
- "neutral-inverted": {
3468
- light: {
3469
- h: 0,
3470
- s: 0,
3471
- l: 99,
3472
- a: 1
3473
- },
3474
- dark: {
3475
- h: 0,
3476
- s: 0,
3477
- l: 12.9,
3478
- a: 1
3479
- },
3480
- css: {
3481
- value: "light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 12.9%))",
3482
- variable: "var(--kds-color-port-neutral-inverted)"
3483
- }
3484
- }
3485
- },
3486
- annotations: {
3487
- specialNodes: {
3488
- light: {
3489
- h: 0,
3490
- s: 0,
3491
- l: 72.5,
3492
- a: 1
3493
- },
3494
- dark: {
3495
- h: 0,
3496
- s: 0,
3497
- l: 32.2,
3498
- a: 1
3499
- },
3500
- css: {
3501
- value: "light-dark(hsl(0, 0%, 72.5%), hsl(0, 0%, 32.2%))",
3502
- variable: "var(--kds-color-annotations-special-nodes)"
3503
- }
3504
- },
3505
- specialNodesBold: {
3506
- light: {
3507
- h: 0,
3508
- s: 0,
3509
- l: 32.2,
3510
- a: 1
3511
- },
3512
- dark: {
3513
- h: 0,
3514
- s: 0,
3515
- l: 90.2,
3516
- a: 1
3517
- },
3518
- css: {
3519
- value: "light-dark(hsl(0, 0%, 32.2%), hsl(0, 0%, 90.2%))",
3520
- variable: "var(--kds-color-annotations-special-nodes-bold)"
3521
- }
3522
- },
3523
- visualizer: {
3524
- light: {
3525
- h: 193.1,
3526
- s: 60.2,
3527
- l: 43.3,
3528
- a: 1
3529
- },
3530
- dark: {
3531
- h: 191.3,
3532
- s: 57.1,
3533
- l: 54.3,
3534
- a: 1
3535
- },
3536
- css: {
3537
- value: "light-dark(hsl(193.1, 60.2%, 43.3%), hsl(191.3, 57.1%, 54.3%))",
3538
- variable: "var(--kds-color-annotations-visualizer)"
3539
- }
3540
- },
3541
- loadingBold: {
3542
- light: {
3543
- h: 208.3,
3544
- s: 60.5,
3545
- l: 33.7,
3546
- a: 1
3547
- },
3548
- dark: {
3549
- h: 214.5,
3550
- s: 100,
3551
- l: 84.3,
3552
- a: 1
3553
- },
3554
- css: {
3555
- value: "light-dark(hsl(208.3, 60.5%, 33.7%), hsl(214.5, 100%, 84.3%))",
3556
- variable: "var(--kds-color-annotations-loading-bold)"
3557
- }
3558
- },
3559
- manipulator: {
3560
- light: {
3561
- h: 50.8,
3562
- s: 100,
3563
- l: 50,
3564
- a: 1
3565
- },
3566
- dark: {
3567
- h: 50.8,
3568
- s: 100,
3569
- l: 50,
3570
- a: 1
3571
- },
3572
- css: {
3573
- value: "hsl(50.8, 100%, 50%)",
3574
- variable: "var(--kds-color-annotations-manipulator)"
3575
- }
3576
- },
3577
- source: {
3578
- light: {
3579
- h: 30,
3580
- s: 80.4,
3581
- l: 60,
3582
- a: 1
3583
- },
3584
- dark: {
3585
- h: 30,
3586
- s: 80.4,
3587
- l: 60,
3588
- a: 1
3589
- },
3590
- css: {
3591
- value: "hsl(30, 80.4%, 60%)",
3592
- variable: "var(--kds-color-annotations-source)"
3593
- }
3594
- },
3595
- sink: {
3596
- light: {
3597
- h: 359.6,
3598
- s: 84.3,
3599
- l: 62.5,
3600
- a: 1
3601
- },
3602
- dark: {
3603
- h: 0,
3604
- s: 100,
3605
- l: 66.1,
3606
- a: 1
3607
- },
3608
- css: {
3609
- value: "light-dark(hsl(359.6, 84.3%, 62.5%), hsl(0, 100%, 66.1%))",
3610
- variable: "var(--kds-color-annotations-sink)"
3611
- }
3612
- },
3613
- learner: {
3614
- light: {
3615
- h: 67.3,
3616
- s: 67.8,
3617
- l: 54.9,
3618
- a: 1
3619
- },
3620
- dark: {
3621
- h: 65.4,
3622
- s: 68.5,
3623
- l: 65.1,
3624
- a: 1
3625
- },
3626
- css: {
3627
- value: "light-dark(hsl(67.3, 67.8%, 54.9%), hsl(65.4, 68.5%, 65.1%))",
3628
- variable: "var(--kds-color-annotations-learner)"
3629
- }
3630
- },
3631
- predictor: {
3632
- light: {
3633
- h: 106.5,
3634
- s: 42.6,
3635
- l: 54.9,
3636
- a: 1
3637
- },
3638
- dark: {
3639
- h: 109,
3640
- s: 47.2,
3641
- l: 61.4,
3642
- a: 1
3643
- },
3644
- css: {
3645
- value: "light-dark(hsl(106.5, 42.6%, 54.9%), hsl(109, 47.2%, 61.4%))",
3646
- variable: "var(--kds-color-annotations-predictor)"
3647
- }
3648
- },
3649
- container: {
3650
- light: {
3651
- h: 66.5,
3652
- s: 64.4,
3653
- l: 80.2,
3654
- a: 1
3655
- },
3656
- dark: {
3657
- h: 69.5,
3658
- s: 59.5,
3659
- l: 85.5,
3660
- a: 1
3661
- },
3662
- css: {
3663
- value: "light-dark(hsl(66.5, 64.4%, 80.2%), hsl(69.5, 59.5%, 85.5%))",
3664
- variable: "var(--kds-color-annotations-container)"
3665
- }
3666
- },
3667
- "flow-variable": {
3668
- light: {
3669
- h: 173.4,
3670
- s: 37.1,
3671
- l: 38.6,
3672
- a: 1
3673
- },
3674
- dark: {
3675
- h: 171.8,
3676
- s: 27,
3677
- l: 47.8,
3678
- a: 1
3679
- },
3680
- css: {
3681
- value: "light-dark(hsl(173.4, 37.1%, 38.6%), hsl(171.8, 27%, 47.8%))",
3682
- variable: "var(--kds-color-annotations-flow-variable)"
3683
- }
3684
- },
3685
- tealDark: {
3686
- light: {
3687
- h: 176.7,
3688
- s: 82,
3689
- l: 17.5,
3690
- a: 1
3691
- },
3692
- dark: {
3693
- h: 176.1,
3694
- s: 66.7,
3695
- l: 22.4,
3696
- a: 1
3697
- },
3698
- css: {
3699
- value: "light-dark(hsl(176.7, 82%, 17.5%), hsl(176.1, 66.7%, 22.4%))",
3700
- variable: "var(--kds-color-annotations-teal-dark)"
3701
- }
3702
- },
3703
- other: {
3704
- light: {
3705
- h: 29,
3706
- s: 43,
3707
- l: 58,
3708
- a: 1
3709
- },
3710
- dark: {
3711
- h: 30,
3712
- s: 47,
3713
- l: 68,
3714
- a: 1
3715
- },
3716
- css: {
3717
- value: "light-dark(hsl(29, 43%, 58%), hsl(30, 47%, 68%))",
3718
- variable: "var(--kds-color-annotations-other)"
3719
- }
3720
- },
3721
- loop: {
3722
- light: {
3723
- h: 25,
3724
- s: 30,
3725
- l: 35,
3726
- a: 1
3727
- },
3728
- dark: {
3729
- h: 27,
3730
- s: 35,
3731
- l: 44,
3732
- a: 1
3733
- },
3734
- css: {
3735
- value: "light-dark(hsl(25, 30%, 35%), hsl(27, 35%, 44%))",
3736
- variable: "var(--kds-color-annotations-loop)"
3737
- }
3738
- }
3739
- },
3740
- state: {
3741
- error: {
3742
- light: {
3743
- h: 353,
3744
- s: 74.7,
3745
- l: 44.9,
3746
- a: 1
3747
- },
3748
- dark: {
3749
- h: 347.6,
3750
- s: 97.1,
3751
- l: 27.3,
3752
- a: 1
3753
- },
3754
- css: {
3755
- value: "light-dark(hsl(353, 74.7%, 44.9%), hsl(347.6, 97.1%, 27.3%))",
3756
- variable: "var(--kds-color-state-error)"
3757
- }
3758
- },
3759
- "error-border": {
3760
- light: {
3761
- h: 348,
3762
- s: 94.3,
3763
- l: 20.8,
3764
- a: 1
3765
- },
3766
- dark: {
3767
- h: 2.6,
3768
- s: 100,
3769
- l: 72.4,
3770
- a: 1
3771
- },
3772
- css: {
3773
- value: "light-dark(hsl(348, 94.3%, 20.8%), hsl(2.6, 100%, 72.4%))",
3774
- variable: "var(--kds-color-state-error-border)"
3775
- }
3776
- },
3777
- warning: {
3778
- light: {
3779
- h: 47.6,
3780
- s: 100,
3781
- l: 67.6,
3782
- a: 1
3783
- },
3784
- dark: {
3785
- h: 43.9,
3786
- s: 100,
3787
- l: 26.3,
3788
- a: 1
3789
- },
3790
- css: {
3791
- value: "light-dark(hsl(47.6, 100%, 67.6%), hsl(43.9, 100%, 26.3%))",
3792
- variable: "var(--kds-color-state-warning)"
3793
- }
3794
- },
3795
- "warning-border": {
3796
- light: {
3797
- h: 19,
3798
- s: 63.1,
3799
- l: 38.2,
3800
- a: 1
3801
- },
3802
- dark: {
3803
- h: 49.1,
3804
- s: 99.1,
3805
- l: 43.7,
3806
- a: 1
3807
- },
3808
- css: {
3809
- value: "light-dark(hsl(19, 63.1%, 38.2%), hsl(49.1, 99.1%, 43.7%))",
3810
- variable: "var(--kds-color-state-warning-border)"
3811
- }
3812
- },
3813
- success: {
3814
- light: {
3815
- h: 106.5,
3816
- s: 42.6,
3817
- l: 54.9,
3818
- a: 1
3819
- },
3820
- dark: {
3821
- h: 107.6,
3822
- s: 46,
3823
- l: 37.1,
3824
- a: 1
3825
- },
3826
- css: {
3827
- value: "light-dark(hsl(106.5, 42.6%, 54.9%), hsl(107.6, 46%, 37.1%))",
3828
- variable: "var(--kds-color-state-success)"
3829
- }
3830
- },
3831
- "success-border": {
3832
- light: {
3833
- h: 116.1,
3834
- s: 46.6,
3835
- l: 25.7,
3836
- a: 1
3837
- },
3838
- dark: {
3839
- h: 106.5,
3840
- s: 42.6,
3841
- l: 54.9,
3842
- a: 1
3843
- },
3844
- css: {
3845
- value: "light-dark(hsl(116.1, 46.6%, 25.7%), hsl(106.5, 42.6%, 54.9%))",
3846
- variable: "var(--kds-color-state-success-border)"
3847
- }
3848
- },
3849
- loading: {
3850
- light: {
3851
- h: 208.3,
3852
- s: 60.5,
3853
- l: 33.7,
3854
- a: 1
3855
- },
3856
- dark: {
3857
- h: 214.5,
3858
- s: 100,
3859
- l: 84.3,
3860
- a: 1
3861
- },
3862
- css: {
3863
- value: "light-dark(hsl(208.3, 60.5%, 33.7%), hsl(214.5, 100%, 84.3%))",
3864
- variable: "var(--kds-color-state-loading)"
3865
- }
3866
- },
3867
- inactive: {
3868
- light: {
3869
- h: 0,
3870
- s: 0,
3871
- l: 99,
3872
- a: 1
3873
- },
3874
- dark: {
3875
- h: 0,
3876
- s: 0,
3877
- l: 11.4,
3878
- a: 1
3879
- },
3880
- css: {
3881
- value: "light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 11.4%))",
3882
- variable: "var(--kds-color-state-inactive)"
3883
- }
3884
- },
3885
- "inactive-border": {
3886
- light: {
3887
- h: 0,
3888
- s: 0,
3889
- l: 90.2,
3890
- a: 1
3891
- },
3892
- dark: {
3893
- h: 0,
3894
- s: 0,
3895
- l: 32.2,
3896
- a: 1
3897
- },
3898
- css: {
3899
- value: "light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 32.2%))",
3900
- variable: "var(--kds-color-state-inactive-border)"
3901
- }
3902
- },
3903
- disabled: {
3904
- light: {
3905
- h: 0,
3906
- s: 0,
3907
- l: 72.5,
3908
- a: 1
3909
- },
3910
- dark: {
3911
- h: 0,
3912
- s: 0,
3913
- l: 22,
3914
- a: 1
3915
- },
3916
- css: {
3917
- value: "light-dark(hsl(0, 0%, 72.5%), hsl(0, 0%, 22%))",
3918
- variable: "var(--kds-color-state-disabled)"
3919
- }
3920
- },
3921
- "disabled-border": {
3922
- light: {
3923
- h: 0,
3924
- s: 0,
3925
- l: 48.2,
3926
- a: 1
3927
- },
3928
- dark: {
3929
- h: 0,
3930
- s: 0,
3931
- l: 48.2,
3932
- a: 1
3933
- },
3934
- css: {
3935
- value: "hsl(0, 0%, 48.2%)",
3936
- variable: "var(--kds-color-state-disabled-border)"
3937
- }
3938
- },
3939
- background: {
3940
- light: {
3941
- h: 0,
3942
- s: 0,
3943
- l: 90.2,
3944
- a: 1
3945
- },
3946
- dark: {
3947
- h: 0,
3948
- s: 0,
3949
- l: 32.2,
3950
- a: 1
3951
- },
3952
- css: {
3953
- value: "light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 32.2%))",
3954
- variable: "var(--kds-color-state-background)"
3955
- }
3956
- }
3957
- },
3958
- connector: {
3959
- data: {
3960
- light: {
3961
- h: 0,
3962
- s: 0,
3963
- l: 43,
3964
- a: 1
3965
- },
3966
- dark: {
3967
- h: 0,
3968
- s: 0,
3969
- l: 48.2,
3970
- a: 1
3971
- },
3972
- css: {
3973
- value: "light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 48.2%))",
3974
- variable: "var(--kds-color-connector-data)"
3975
- }
3976
- },
3977
- "flow-variable": {
3978
- light: {
3979
- h: 359.6,
3980
- s: 84.3,
3981
- l: 62.5,
3982
- a: 1
3983
- },
3984
- dark: {
3985
- h: 359.6,
3986
- s: 84.3,
3987
- l: 62.5,
3988
- a: 1
3989
- },
3990
- css: {
3991
- value: "hsl(359.6, 84.3%, 62.5%)",
3992
- variable: "var(--kds-color-connector-flow-variable)"
3993
- }
3994
- },
3995
- selected: {
3996
- light: {
3997
- h: 209.4,
3998
- s: 57.3,
3999
- l: 49.6,
4000
- a: 1
4001
- },
4002
- dark: {
4003
- h: 213.6,
4004
- s: 91.6,
4005
- l: 76.7,
4006
- a: 1
4007
- },
4008
- css: {
4009
- value: "light-dark(hsl(209.4, 57.3%, 49.6%), hsl(213.6, 91.6%, 76.7%))",
4010
- variable: "var(--kds-color-connector-selected)"
4011
- }
4012
- },
4013
- highlighted: {
4014
- light: {
4015
- h: 0,
4016
- s: 0,
4017
- l: 15.7,
4018
- a: 1
4019
- },
4020
- dark: {
4021
- h: 0,
4022
- s: 0,
4023
- l: 94.1,
4024
- a: 1
4025
- },
4026
- css: {
4027
- value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
4028
- variable: "var(--kds-color-connector-highlighted)"
4029
- }
4030
- },
4031
- insertable: {
4032
- light: {
4033
- h: 116.1,
4034
- s: 46.6,
4035
- l: 25.7,
4036
- a: 1
4037
- },
4038
- dark: {
4039
- h: 106.5,
4040
- s: 42.6,
4041
- l: 54.9,
4042
- a: 1
4043
- },
4044
- css: {
4045
- value: "light-dark(hsl(116.1, 46.6%, 25.7%), hsl(106.5, 42.6%, 54.9%))",
4046
- variable: "var(--kds-color-connector-insertable)"
4047
- }
4048
- }
4049
- },
4050
- elevation: {
4051
- top: {
4052
- light: {
4053
- h: 210,
4054
- s: 0,
4055
- l: 72.5,
4056
- a: .32
4057
- },
4058
- dark: {
4059
- h: 330,
4060
- s: 0,
4061
- l: 10.2,
4062
- a: .9
4063
- },
4064
- css: {
4065
- value: "light-dark(hsl(210 0% 72.5% / 0.32), hsl(330 0% 10.2% / 0.9))",
4066
- variable: "var(--kds-color-elevation-top)"
4067
- }
4068
- },
4069
- middle: {
4070
- light: {
4071
- h: 180,
4072
- s: 0,
4073
- l: 32.2,
4074
- a: .14
4075
- },
4076
- dark: {
4077
- h: 330,
4078
- s: 0,
4079
- l: 10.2,
4080
- a: .94
4081
- },
4082
- css: {
4083
- value: "light-dark(hsl(180 0% 32.2% / 0.14), hsl(330 0% 10.2% / 0.94))",
4084
- variable: "var(--kds-color-elevation-middle)"
4085
- }
4086
- },
4087
- bottom: {
4088
- light: {
4089
- h: 180,
4090
- s: 0,
4091
- l: 32.2,
4092
- a: .12
4093
- },
4094
- dark: {
4095
- h: 330,
4096
- s: 0,
4097
- l: 10.2,
4098
- a: .98
4099
- },
4100
- css: {
4101
- value: "light-dark(hsl(180 0% 32.2% / 0.12), hsl(330 0% 10.2% / 0.98))",
4102
- variable: "var(--kds-color-elevation-bottom)"
4103
- }
4104
- },
4105
- knob: {
4106
- light: {
4107
- h: 180,
4108
- s: 0,
4109
- l: 32.2,
4110
- a: .5
4111
- },
4112
- dark: {
4113
- h: 330,
4114
- s: 0,
4115
- l: 10.2,
4116
- a: .6
4117
- },
4118
- css: {
4119
- value: "light-dark(hsl(180 0% 32.2% / 0.5), hsl(330 0% 10.2% / 0.6))",
4120
- variable: "var(--kds-color-elevation-knob)"
4121
- }
4122
- }
4123
- },
4124
- DesktopHeader: {
4125
- background: {
4126
- default: {
4127
- light: {
4128
- h: 0,
4129
- s: 0,
4130
- l: 10.2,
4131
- a: 1
4132
- },
4133
- dark: {
4134
- h: 0,
4135
- s: 0,
4136
- l: 10.2,
4137
- a: 1
4138
- },
4139
- css: {
4140
- value: "hsl(0, 0%, 10.2%)",
4141
- variable: "var(--kds-color-desktop-header-background-default)"
4142
- }
4143
- },
4144
- muted: {
4145
- light: {
4146
- h: 0,
4147
- s: 0,
4148
- l: 98,
4149
- a: 1
4150
- },
4151
- dark: {
4152
- h: 0,
4153
- s: 0,
4154
- l: 15.7,
4155
- a: 1
4156
- },
4157
- css: {
4158
- value: "light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%))",
4159
- variable: "var(--kds-color-desktop-header-background-muted)"
4160
- }
4161
- },
4162
- accent: {
4163
- light: {
4164
- h: 0,
4165
- s: 0,
4166
- l: 98,
4167
- a: 1
4168
- },
4169
- dark: {
4170
- h: 0,
4171
- s: 0,
4172
- l: 15.7,
4173
- a: 1
4174
- },
4175
- css: {
4176
- value: "light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%))",
4177
- variable: "var(--kds-color-desktop-header-background-accent)"
4178
- }
4179
- }
4180
- },
4181
- "text-and-icon": {
4182
- neutral: {
4183
- light: {
4184
- h: 0,
4185
- s: 0,
4186
- l: 15.7,
4187
- a: 1
4188
- },
4189
- dark: {
4190
- h: 0,
4191
- s: 0,
4192
- l: 94.1,
4193
- a: 1
4194
- },
4195
- css: {
4196
- value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
4197
- variable: "var(--kds-color-desktop-header-text-and-icon-neutral)"
4198
- }
4199
- },
4200
- muted: {
4201
- light: {
4202
- h: 0,
4203
- s: 0,
4204
- l: 32.2,
4205
- a: 1
4206
- },
4207
- dark: {
4208
- h: 0,
4209
- s: 0,
4210
- l: 90.2,
4211
- a: 1
4212
- },
4213
- css: {
4214
- value: "light-dark(hsl(0, 0%, 32.2%), hsl(0, 0%, 90.2%))",
4215
- variable: "var(--kds-color-desktop-header-text-and-icon-muted)"
4216
- }
4217
- }
4218
- },
4219
- border: { default: {
4220
- light: {
4221
- h: 330,
4222
- s: 0,
4223
- l: 10.2,
4224
- a: .1
4225
- },
4226
- dark: {
4227
- h: 330,
4228
- s: 0,
4229
- l: 99,
4230
- a: .1
4231
- },
4232
- css: {
4233
- value: "light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1))",
4234
- variable: "var(--kds-color-desktop-header-border-default)"
4235
- }
4236
- } }
4237
- },
4238
- TableHeader: { background: { default: {
4239
- light: {
4240
- h: 0,
4241
- s: 0,
4242
- l: 99,
4243
- a: 1
4244
- },
4245
- dark: {
4246
- h: 0,
4247
- s: 0,
4248
- l: 99,
4249
- a: 1
4250
- },
4251
- css: {
4252
- value: "hsl(0, 0%, 99%)",
4253
- variable: "var(--kds-color-table-header-background-default)"
4254
- }
4255
- } } },
4256
- ToggleSwitch: {
4257
- knob: {
4258
- initial: {
4259
- light: {
4260
- h: 0,
4261
- s: 0,
4262
- l: 99,
4263
- a: 1
4264
- },
4265
- dark: {
4266
- h: 0,
4267
- s: 0,
4268
- l: 99,
4269
- a: 1
4270
- },
4271
- css: {
4272
- value: "hsl(0, 0%, 99%)",
4273
- variable: "var(--kds-color-toggle-switch-knob-initial)"
4274
- }
4275
- },
4276
- disabled: {
4277
- light: {
4278
- h: 0,
4279
- s: 0,
4280
- l: 90.2,
4281
- a: 1
4282
- },
4283
- dark: {
4284
- h: 0,
4285
- s: 0,
4286
- l: 90.2,
4287
- a: 1
4288
- },
4289
- css: {
4290
- value: "hsl(0, 0%, 90.2%)",
4291
- variable: "var(--kds-color-toggle-switch-knob-disabled)"
4292
- }
4293
- }
4294
- },
4295
- icon: {
4296
- on: {
4297
- light: {
4298
- h: 176.1,
4299
- s: 66.7,
4300
- l: 22.4,
4301
- a: 1
4302
- },
4303
- dark: {
4304
- h: 176.1,
4305
- s: 66.7,
4306
- l: 22.4,
4307
- a: 1
4308
- },
4309
- css: {
4310
- value: "hsl(176.1, 66.7%, 22.4%)",
4311
- variable: "var(--kds-color-toggle-switch-icon-on)"
4312
- }
4313
- },
4314
- off: {
4315
- light: {
4316
- h: 0,
4317
- s: 0,
4318
- l: 43,
4319
- a: 1
4320
- },
4321
- dark: {
4322
- h: 0,
4323
- s: 0,
4324
- l: 43,
4325
- a: 1
4326
- },
4327
- css: {
4328
- value: "hsl(0, 0%, 43%)",
4329
- variable: "var(--kds-color-toggle-switch-icon-off)"
4330
- }
4331
- },
4332
- disabled: {
4333
- light: {
4334
- h: 0,
4335
- s: 0,
4336
- l: 64,
4337
- a: 1
4338
- },
4339
- dark: {
4340
- h: 0,
4341
- s: 0,
4342
- l: 64,
4343
- a: 1
4344
- },
4345
- css: {
4346
- value: "hsl(0, 0%, 64%)",
4347
- variable: "var(--kds-color-toggle-switch-icon-disabled)"
4348
- }
4349
- }
4350
- }
4351
- },
4352
- LoadingSpinner: {
4353
- progress: {
4354
- onPrimary: {
4355
- light: {
4356
- h: 165.6,
4357
- s: 67.6,
4358
- l: 92.7,
4359
- a: 1
4360
- },
4361
- dark: {
4362
- h: 165.6,
4363
- s: 67.6,
4364
- l: 92.7,
4365
- a: 1
4366
- },
4367
- css: {
4368
- value: "hsl(165.6 67.6% 92.7%)",
4369
- variable: "var(--kds-color-loading-spinner-progress-on-primary)"
4370
- }
4371
- },
4372
- onSurface: {
4373
- light: {
4374
- h: 0,
4375
- s: 0,
4376
- l: 15.7,
4377
- a: 1
4378
- },
4379
- dark: {
4380
- h: 0,
4381
- s: 0,
4382
- l: 94.1,
4383
- a: 1
4384
- },
4385
- css: {
4386
- value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
4387
- variable: "var(--kds-color-loading-spinner-progress-on-surface)"
4388
- }
4389
- }
4390
- },
4391
- track: {
4392
- onPrimary: {
4393
- light: {
4394
- h: 165.6,
4395
- s: 67.6,
4396
- l: 92.7,
4397
- a: .24
4398
- },
4399
- dark: {
4400
- h: 165.6,
4401
- s: 67.6,
4402
- l: 92.7,
4403
- a: .24
4404
- },
4405
- css: {
4406
- value: "hsl(165.6 67.6% 92.7% / 0.24)",
4407
- variable: "var(--kds-color-loading-spinner-track-on-primary)"
4408
- }
4409
- },
4410
- onSurface: {
4411
- light: {
4412
- h: 332.73,
4413
- s: 0,
4414
- l: 15.7,
4415
- a: .24
4416
- },
4417
- dark: {
4418
- h: 240,
4419
- s: 0,
4420
- l: 94.1,
4421
- a: .24
4422
- },
4423
- css: {
4424
- value: "light-dark(hsl(332.73 0% 15.7% / 0.24), hsl(240 0% 94.1% / 0.24))",
4425
- variable: "var(--kds-color-loading-spinner-track-on-surface)"
4426
- }
4427
- }
4428
- }
4429
- },
4430
- Tooltip: {
4431
- background: { default: {
4432
- light: {
4433
- h: 0,
4434
- s: 0,
4435
- l: 12.9,
4436
- a: 1
4437
- },
4438
- dark: {
4439
- h: 0,
4440
- s: 0,
4441
- l: 22,
4442
- a: 1
4443
- },
4444
- css: {
4445
- value: "light-dark(hsl(0, 0%, 12.9%), hsl(0, 0%, 22%))",
4446
- variable: "var(--kds-color-tooltip-background-default)"
4447
- }
4448
- } },
4449
- "text-and-icon": { neutral: {
4450
- light: {
4451
- h: 0,
4452
- s: 0,
4453
- l: 98,
4454
- a: 1
4455
- },
4456
- dark: {
4457
- h: 0,
4458
- s: 0,
4459
- l: 98,
4460
- a: 1
4461
- },
4462
- css: {
4463
- value: "hsl(0, 0%, 98%)",
4464
- variable: "var(--kds-color-tooltip-text-and-icon-neutral)"
4465
- }
4466
- } }
4467
- },
4468
- TextHighlight: { background: { default: {
4469
- light: {
4470
- h: 212.1,
4471
- s: 78.2,
4472
- l: 67.6,
4473
- a: .6
4474
- },
4475
- dark: {
4476
- h: 212.1,
4477
- s: 78.2,
4478
- l: 67.6,
4479
- a: .6
4480
- },
4481
- css: {
4482
- value: "hsl(212.1 78.2% 67.6% / 0.6)",
4483
- variable: "var(--kds-color-text-highlight-background-default)"
4484
- }
4485
- } } },
4486
- Avatar: {
4487
- background: {
4488
- red: {
4489
- light: {
4490
- h: 3.5,
4491
- s: 100,
4492
- l: 79.6,
4493
- a: 1
4494
- },
4495
- dark: {
4496
- h: 3.5,
4497
- s: 100,
4498
- l: 79.6,
4499
- a: 1
4500
- },
4501
- css: {
4502
- value: "hsl(3.5, 100%, 79.6%)",
4503
- variable: "var(--kds-color-avatar-background-red)"
4504
- }
4505
- },
4506
- orange: {
4507
- light: {
4508
- h: 31.2,
4509
- s: 82.8,
4510
- l: 65.9,
4511
- a: 1
4512
- },
4513
- dark: {
4514
- h: 31.2,
4515
- s: 82.8,
4516
- l: 65.9,
4517
- a: 1
4518
- },
4519
- css: {
4520
- value: "hsl(31.2, 82.8%, 65.9%)",
4521
- variable: "var(--kds-color-avatar-background-orange)"
4522
- }
4523
- },
4524
- yellow: {
4525
- light: {
4526
- h: 50.8,
4527
- s: 100,
4528
- l: 50,
4529
- a: 1
4530
- },
4531
- dark: {
4532
- h: 50.8,
4533
- s: 100,
4534
- l: 50,
4535
- a: 1
4536
- },
4537
- css: {
4538
- value: "hsl(50.8, 100%, 50%)",
4539
- variable: "var(--kds-color-avatar-background-yellow)"
4540
- }
4541
- },
4542
- green: {
4543
- light: {
4544
- h: 109,
4545
- s: 47.2,
4546
- l: 61.4,
4547
- a: 1
4548
- },
4549
- dark: {
4550
- h: 109,
4551
- s: 47.2,
4552
- l: 61.4,
4553
- a: 1
4554
- },
4555
- css: {
4556
- value: "hsl(109, 47.2%, 61.4%)",
4557
- variable: "var(--kds-color-avatar-background-green)"
4558
- }
4559
- },
4560
- teal: {
4561
- light: {
4562
- h: 169.8,
4563
- s: 30.6,
4564
- l: 66.1,
4565
- a: 1
4566
- },
4567
- dark: {
4568
- h: 169.8,
4569
- s: 30.6,
4570
- l: 66.1,
4571
- a: 1
4572
- },
4573
- css: {
4574
- value: "hsl(169.8, 30.6%, 66.1%)",
4575
- variable: "var(--kds-color-avatar-background-teal)"
4576
- }
4577
- },
4578
- blue: {
4579
- light: {
4580
- h: 213.6,
4581
- s: 91.6,
4582
- l: 76.7,
4583
- a: 1
4584
- },
4585
- dark: {
4586
- h: 213.6,
4587
- s: 91.6,
4588
- l: 76.7,
4589
- a: 1
4590
- },
4591
- css: {
4592
- value: "hsl(213.6, 91.6%, 76.7%)",
4593
- variable: "var(--kds-color-avatar-background-blue)"
4594
- }
4595
- },
4596
- purple: {
4597
- light: {
4598
- h: 320,
4599
- s: 44.7,
4600
- l: 81.6,
4601
- a: 1
4602
- },
4603
- dark: {
4604
- h: 320,
4605
- s: 44.7,
4606
- l: 81.6,
4607
- a: 1
4608
- },
4609
- css: {
4610
- value: "hsl(320.0, 44.7%, 81.6%)",
4611
- variable: "var(--kds-color-avatar-background-purple)"
4612
- }
4613
- },
4614
- aquamarine: {
4615
- light: {
4616
- h: 185.8,
4617
- s: 49.2,
4618
- l: 87.6,
4619
- a: 1
4620
- },
4621
- dark: {
4622
- h: 185.8,
4623
- s: 49.2,
4624
- l: 87.6,
4625
- a: 1
4626
- },
4627
- css: {
4628
- value: "hsl(185.8, 49.2%, 87.6%)",
4629
- variable: "var(--kds-color-avatar-background-aquamarine)"
4630
- }
4631
- },
4632
- grassgreen: {
4633
- light: {
4634
- h: 63.4,
4635
- s: 68.5,
4636
- l: 75.1,
4637
- a: 1
4638
- },
4639
- dark: {
4640
- h: 63.4,
4641
- s: 68.5,
4642
- l: 75.1,
4643
- a: 1
4644
- },
4645
- css: {
4646
- value: "hsl(63.4, 68.5%, 75.1%)",
4647
- variable: "var(--kds-color-avatar-background-grassgreen)"
4648
- }
4649
- },
4650
- brown: {
4651
- light: {
4652
- h: 30,
4653
- s: 47,
4654
- l: 68,
4655
- a: 1
4656
- },
4657
- dark: {
4658
- h: 30,
4659
- s: 47,
4660
- l: 68,
4661
- a: 1
4662
- },
4663
- css: {
4664
- value: "hsl(30, 47%, 68%)",
4665
- variable: "var(--kds-color-avatar-background-brown)"
4666
- }
4667
- },
4668
- empty: {
4669
- light: {
4670
- h: 330,
4671
- s: 0,
4672
- l: 94.521,
4673
- a: 1
4674
- },
4675
- dark: {
4676
- h: 330,
4677
- s: 0,
4678
- l: 30.187,
4679
- a: 1
4680
- },
4681
- css: {
4682
- value: "light-dark(hsl(330 0% 94.521%), hsl(330 0% 30.187%))",
4683
- variable: "var(--kds-color-avatar-background-empty)"
4684
- }
4685
- }
4686
- },
4687
- "text-and-icon": {
4688
- red: {
4689
- light: {
4690
- h: 348,
4691
- s: 94.3,
4692
- l: 20.8,
4693
- a: 1
4694
- },
4695
- dark: {
4696
- h: 348,
4697
- s: 94.3,
4698
- l: 20.8,
4699
- a: 1
4700
- },
4701
- css: {
4702
- value: "hsl(348, 94.3%, 20.8%)",
4703
- variable: "var(--kds-color-avatar-text-and-icon-red)"
4704
- }
4705
- },
4706
- orange: {
4707
- light: {
4708
- h: 13.1,
4709
- s: 66.1,
4710
- l: 23.1,
4711
- a: 1
4712
- },
4713
- dark: {
4714
- h: 13.1,
4715
- s: 66.1,
4716
- l: 23.1,
4717
- a: 1
4718
- },
4719
- css: {
4720
- value: "hsl(13.1, 66.1%, 23.1%)",
4721
- variable: "var(--kds-color-avatar-text-and-icon-orange)"
4722
- }
4723
- },
4724
- yellow: {
4725
- light: {
4726
- h: 44.3,
4727
- s: 94.2,
4728
- l: 13.5,
4729
- a: 1
4730
- },
4731
- dark: {
4732
- h: 44.3,
4733
- s: 94.2,
4734
- l: 13.5,
4735
- a: 1
4736
- },
4737
- css: {
4738
- value: "hsl(44.3, 94.2%, 13.5%)",
4739
- variable: "var(--kds-color-avatar-text-and-icon-yellow)"
4740
- }
4741
- },
4742
- green: {
4743
- light: {
4744
- h: 132.3,
4745
- s: 52,
4746
- l: 14.7,
4747
- a: 1
4748
- },
4749
- dark: {
4750
- h: 132.3,
4751
- s: 52,
4752
- l: 14.7,
4753
- a: 1
4754
- },
4755
- css: {
4756
- value: "hsl(132.3, 52%, 14.7%)",
4757
- variable: "var(--kds-color-avatar-text-and-icon-green)"
4758
- }
4759
- },
4760
- teal: {
4761
- light: {
4762
- h: 174.5,
4763
- s: 93.2,
4764
- l: 11.6,
4765
- a: 1
4766
- },
4767
- dark: {
4768
- h: 174.5,
4769
- s: 93.2,
4770
- l: 11.6,
4771
- a: 1
4772
- },
4773
- css: {
4774
- value: "hsl(174.5, 93.2%, 11.6%)",
4775
- variable: "var(--kds-color-avatar-text-and-icon-teal)"
4776
- }
4777
- },
4778
- blue: {
4779
- light: {
4780
- h: 209.4,
4781
- s: 49.5,
4782
- l: 20.2,
4783
- a: 1
4784
- },
4785
- dark: {
4786
- h: 209.4,
4787
- s: 49.5,
4788
- l: 20.2,
4789
- a: 1
4790
- },
4791
- css: {
4792
- value: "hsl(209.4, 49.5%, 20.2%)",
4793
- variable: "var(--kds-color-avatar-text-and-icon-blue)"
4794
- }
4795
- },
4796
- purple: {
4797
- light: {
4798
- h: 295.5,
4799
- s: 33.9,
4800
- l: 23.1,
4801
- a: 1
4802
- },
4803
- dark: {
4804
- h: 295.5,
4805
- s: 33.9,
4806
- l: 23.1,
4807
- a: 1
4808
- },
4809
- css: {
4810
- value: "hsl(295.5, 33.9%, 23.1%)",
4811
- variable: "var(--kds-color-avatar-text-and-icon-purple)"
4812
- }
4813
- },
4814
- aquamarine: {
4815
- light: {
4816
- h: 200.9,
4817
- s: 63.2,
4818
- l: 26.7,
4819
- a: 1
4820
- },
4821
- dark: {
4822
- h: 200.9,
4823
- s: 63.2,
4824
- l: 26.7,
4825
- a: 1
4826
- },
4827
- css: {
4828
- value: "hsl(200.9, 63.2%, 26.7%)",
4829
- variable: "var(--kds-color-avatar-text-and-icon-aquamarine)"
4830
- }
4831
- },
4832
- grassgreen: {
4833
- light: {
4834
- h: 72.2,
4835
- s: 39.2,
4836
- l: 24.5,
4837
- a: 1
4838
- },
4839
- dark: {
4840
- h: 72.2,
4841
- s: 39.2,
4842
- l: 24.5,
4843
- a: 1
4844
- },
4845
- css: {
4846
- value: "hsl(72.2, 39.2%, 24.5%)",
4847
- variable: "var(--kds-color-avatar-text-and-icon-grassgreen)"
4848
- }
4849
- },
4850
- brown: {
4851
- light: {
4852
- h: 23,
4853
- s: 27,
4854
- l: 24,
4855
- a: 1
4856
- },
4857
- dark: {
4858
- h: 23,
4859
- s: 27,
4860
- l: 24,
4861
- a: 1
4862
- },
4863
- css: {
4864
- value: "hsl(23, 27%, 24%)",
4865
- variable: "var(--kds-color-avatar-text-and-icon-brown)"
4866
- }
4867
- }
4868
- }
4869
- }
4870
- };
4871
- //#endregion
4872
18
  //#region src/toasts/ToastStack/injectionKeys.ts
4873
19
  var TOAST_STACK_ID = Symbol("toast-stack-id");
4874
20
  //#endregion