@knime/kds-code-editor 2.7.0 → 2.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1,8 +1,4171 @@
1
- import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, mergeProps, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, toDisplayString, unref, useId, useModel, useTemplateRef, watch } from "vue";
2
- import { useClipboard } from "@vueuse/core";
1
+ import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, mergeProps, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, useModel, useTemplateRef, watch, watchEffect } from "vue";
2
+ import { useClipboard, useDebounceFn, useResizeObserver } from "@vueuse/core";
3
3
  import { KeyCode, editor } from "monaco-editor";
4
4
  import { KdsButton, KdsMenuButton, KdsProgressButton, KdsSubText, KdsToggleButton, useKdsDarkMode } from "@knime/kds-components";
5
- import './index.css';//#region ../styles/dist/tokens/ts/font.js
5
+ import { FitAddon } from "@xterm/addon-fit";
6
+ import { Unicode11Addon } from "@xterm/addon-unicode11";
7
+ import { Terminal } from "@xterm/xterm";
8
+ import './index.css';//#region ../styles/dist/tokens/ts/color.js
9
+ /**
10
+ * Do not edit directly, this file was auto-generated
11
+ * from the design token sources in src/tokens.
12
+ */
13
+ var color = {
14
+ surface: {
15
+ default: {
16
+ light: {
17
+ h: 0,
18
+ s: 0,
19
+ l: 98,
20
+ alpha: 1
21
+ },
22
+ dark: {
23
+ h: 0,
24
+ s: 0,
25
+ l: 15.7,
26
+ alpha: 1
27
+ },
28
+ css: {
29
+ value: "light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%))",
30
+ variable: "var(--kds-color-surface-default)"
31
+ }
32
+ },
33
+ muted: {
34
+ light: {
35
+ h: 0,
36
+ s: 0,
37
+ l: 94.1,
38
+ alpha: 1
39
+ },
40
+ dark: {
41
+ h: 0,
42
+ s: 0,
43
+ l: 18.8,
44
+ alpha: 1
45
+ },
46
+ css: {
47
+ value: "light-dark(hsl(0, 0%, 94.1%), hsl(0, 0%, 18.8%))",
48
+ variable: "var(--kds-color-surface-muted)"
49
+ }
50
+ },
51
+ subtle: {
52
+ light: {
53
+ h: 0,
54
+ s: 0,
55
+ l: 90.2,
56
+ alpha: 1
57
+ },
58
+ dark: {
59
+ h: 0,
60
+ s: 0,
61
+ l: 22,
62
+ alpha: 1
63
+ },
64
+ css: {
65
+ value: "light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 22%))",
66
+ variable: "var(--kds-color-surface-subtle)"
67
+ }
68
+ }
69
+ },
70
+ page: { default: {
71
+ light: {
72
+ h: 0,
73
+ s: 0,
74
+ l: 99,
75
+ alpha: 1
76
+ },
77
+ dark: {
78
+ h: 0,
79
+ s: 0,
80
+ l: 12.9,
81
+ alpha: 1
82
+ },
83
+ css: {
84
+ value: "light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 12.9%))",
85
+ variable: "var(--kds-color-page-default)"
86
+ }
87
+ } },
88
+ background: {
89
+ neutral: {
90
+ initial: {
91
+ light: {
92
+ h: 345,
93
+ s: 0,
94
+ l: 11.4,
95
+ alpha: 0
96
+ },
97
+ dark: {
98
+ h: 345,
99
+ s: 0,
100
+ l: 11.4,
101
+ alpha: 0
102
+ },
103
+ css: {
104
+ value: "hsl(345 0% 11.4% / 0)",
105
+ variable: "var(--kds-color-background-neutral-initial)"
106
+ }
107
+ },
108
+ hover: {
109
+ light: {
110
+ h: 340,
111
+ s: 0,
112
+ l: 48.2,
113
+ alpha: .1
114
+ },
115
+ dark: {
116
+ h: 180,
117
+ s: 0,
118
+ l: 90.2,
119
+ alpha: .1
120
+ },
121
+ css: {
122
+ value: "light-dark(hsl(340 0% 48.2% / 0.1), hsl(180 0% 90.2% / 0.1))",
123
+ variable: "var(--kds-color-background-neutral-hover)"
124
+ }
125
+ },
126
+ active: {
127
+ light: {
128
+ h: 340,
129
+ s: 0,
130
+ l: 48.2,
131
+ alpha: .2
132
+ },
133
+ dark: {
134
+ h: 340,
135
+ s: 0,
136
+ l: 48.2,
137
+ alpha: .36
138
+ },
139
+ css: {
140
+ value: "light-dark(hsl(340 0% 48.2% / 0.2), hsl(340 0% 48.2% / 0.36))",
141
+ variable: "var(--kds-color-background-neutral-active)"
142
+ }
143
+ }
144
+ },
145
+ "neutral-bold": {
146
+ initial: {
147
+ light: {
148
+ h: 210,
149
+ s: 0,
150
+ l: 72.5,
151
+ alpha: .4
152
+ },
153
+ dark: {
154
+ h: 0,
155
+ s: 0,
156
+ l: 32.2,
157
+ alpha: 1
158
+ },
159
+ css: {
160
+ value: "light-dark(hsl(210 0% 72.5% / 0.4), hsl(0, 0%, 32.2%))",
161
+ variable: "var(--kds-color-background-neutral-bold-initial)"
162
+ }
163
+ },
164
+ hover: {
165
+ light: {
166
+ h: 210,
167
+ s: 0,
168
+ l: 62.977,
169
+ alpha: .4
170
+ },
171
+ dark: {
172
+ h: 0,
173
+ s: 0,
174
+ l: 48.2,
175
+ alpha: 1
176
+ },
177
+ css: {
178
+ value: "light-dark(hsl(210 0% 62.977% / 0.4), hsl(0, 0%, 48.2%))",
179
+ variable: "var(--kds-color-background-neutral-bold-hover)"
180
+ }
181
+ },
182
+ active: {
183
+ light: {
184
+ h: 0,
185
+ s: 0,
186
+ l: 59.859,
187
+ alpha: .4
188
+ },
189
+ dark: {
190
+ h: 0,
191
+ s: 0,
192
+ l: 72.5,
193
+ alpha: 1
194
+ },
195
+ css: {
196
+ value: "light-dark(hsl(0 0% 59.859% / 0.4), hsl(0, 0%, 72.5%))",
197
+ variable: "var(--kds-color-background-neutral-bold-active)"
198
+ }
199
+ }
200
+ },
201
+ primary: {
202
+ initial: {
203
+ light: {
204
+ h: 168,
205
+ s: 46.7,
206
+ l: 85.3,
207
+ alpha: 1
208
+ },
209
+ dark: {
210
+ h: 169.8,
211
+ s: 30.6,
212
+ l: 66.1,
213
+ alpha: 1
214
+ },
215
+ css: {
216
+ value: "light-dark(hsl(168, 46.7%, 85.3%), hsl(169.8, 30.6%, 66.1%))",
217
+ variable: "var(--kds-color-background-primary-initial)"
218
+ }
219
+ },
220
+ hover: {
221
+ light: {
222
+ h: 167.99,
223
+ s: 27.818,
224
+ l: 77.703,
225
+ alpha: 1
226
+ },
227
+ dark: {
228
+ h: 169.6,
229
+ s: 30.517,
230
+ l: 68.835,
231
+ alpha: 1
232
+ },
233
+ css: {
234
+ value: "light-dark(hsl(167.99 27.818% 77.703%), hsl(169.6 30.517% 68.835%))",
235
+ variable: "var(--kds-color-background-primary-hover)"
236
+ }
237
+ },
238
+ active: {
239
+ light: {
240
+ h: 167.97,
241
+ s: 18.664,
242
+ l: 70.242,
243
+ alpha: 1
244
+ },
245
+ dark: {
246
+ h: 168.98,
247
+ s: 30.352,
248
+ l: 78.334,
249
+ alpha: 1
250
+ },
251
+ css: {
252
+ value: "light-dark(hsl(167.97 18.664% 70.242%), hsl(168.98 30.352% 78.334%))",
253
+ variable: "var(--kds-color-background-primary-active)"
254
+ }
255
+ }
256
+ },
257
+ "primary-bold": {
258
+ initial: {
259
+ light: {
260
+ h: 176.1,
261
+ s: 66.7,
262
+ l: 22.4,
263
+ alpha: 1
264
+ },
265
+ dark: {
266
+ h: 174.4,
267
+ s: 47.8,
268
+ l: 30.8,
269
+ alpha: 1
270
+ },
271
+ css: {
272
+ value: "light-dark(hsl(176.1, 66.7%, 22.4%), hsl(174.4, 47.8%, 30.8%))",
273
+ variable: "var(--kds-color-background-primary-bold-initial)"
274
+ }
275
+ },
276
+ hover: {
277
+ light: {
278
+ h: 175.79,
279
+ s: 58.284,
280
+ l: 19.792,
281
+ alpha: 1
282
+ },
283
+ dark: {
284
+ h: 173.26,
285
+ s: 27.023,
286
+ l: 42.409,
287
+ alpha: 1
288
+ },
289
+ css: {
290
+ value: "light-dark(hsl(175.79 58.284% 19.792%), hsl(173.26 27.023% 42.409%))",
291
+ variable: "var(--kds-color-background-primary-bold-hover)"
292
+ }
293
+ },
294
+ active: {
295
+ light: {
296
+ h: 175.36,
297
+ s: 48.936,
298
+ l: 16.164,
299
+ alpha: 1
300
+ },
301
+ dark: {
302
+ h: 171.91,
303
+ s: 19.296,
304
+ l: 64.061,
305
+ alpha: 1
306
+ },
307
+ css: {
308
+ value: "light-dark(hsl(175.36 48.936% 16.164%), hsl(171.91 19.296% 64.061%))",
309
+ variable: "var(--kds-color-background-primary-bold-active)"
310
+ }
311
+ }
312
+ },
313
+ selected: {
314
+ initial: {
315
+ light: {
316
+ h: 165.6,
317
+ s: 67.6,
318
+ l: 92.7,
319
+ alpha: 1
320
+ },
321
+ dark: {
322
+ h: 176.1,
323
+ s: 66.7,
324
+ l: 22.4,
325
+ alpha: .32
326
+ },
327
+ css: {
328
+ value: "light-dark(hsl(165.6, 67.6%, 92.7%), hsl(176.1 66.7% 22.4% / 0.32))",
329
+ variable: "var(--kds-color-background-selected-initial)"
330
+ }
331
+ },
332
+ hover: {
333
+ light: {
334
+ h: 168,
335
+ s: 46.7,
336
+ l: 85.3,
337
+ alpha: 1
338
+ },
339
+ dark: {
340
+ h: 174.4,
341
+ s: 47.8,
342
+ l: 30.8,
343
+ alpha: .56
344
+ },
345
+ css: {
346
+ value: "light-dark(hsl(168, 46.7%, 85.3%), hsl(174.4 47.8% 30.8% / 0.56))",
347
+ variable: "var(--kds-color-background-selected-hover)"
348
+ }
349
+ },
350
+ active: {
351
+ light: {
352
+ h: 168.8,
353
+ s: 34.4,
354
+ l: 75.5,
355
+ alpha: 1
356
+ },
357
+ dark: {
358
+ h: 171.8,
359
+ s: 27,
360
+ l: 47.8,
361
+ alpha: .72
362
+ },
363
+ css: {
364
+ value: "light-dark(hsl(168.8, 34.4%, 75.5%), hsl(171.8 27% 47.8% / 0.72))",
365
+ variable: "var(--kds-color-background-selected-active)"
366
+ }
367
+ }
368
+ },
369
+ "selected-bold": {
370
+ initial: {
371
+ light: {
372
+ h: 174.4,
373
+ s: 47.8,
374
+ l: 30.8,
375
+ alpha: 1
376
+ },
377
+ dark: {
378
+ h: 176.1,
379
+ s: 66.7,
380
+ l: 22.4,
381
+ alpha: 1
382
+ },
383
+ css: {
384
+ value: "light-dark(hsl(174.4, 47.8%, 30.8%), hsl(176.1, 66.7%, 22.4%))",
385
+ variable: "var(--kds-color-background-selected-bold-initial)"
386
+ }
387
+ },
388
+ hover: {
389
+ light: {
390
+ h: 176.1,
391
+ s: 66.7,
392
+ l: 22.4,
393
+ alpha: 1
394
+ },
395
+ dark: {
396
+ h: 174.4,
397
+ s: 47.8,
398
+ l: 30.8,
399
+ alpha: 1
400
+ },
401
+ css: {
402
+ value: "light-dark(hsl(176.1, 66.7%, 22.4%), hsl(174.4, 47.8%, 30.8%))",
403
+ variable: "var(--kds-color-background-selected-bold-hover)"
404
+ }
405
+ },
406
+ active: {
407
+ light: {
408
+ h: 176.7,
409
+ s: 82,
410
+ l: 17.5,
411
+ alpha: 1
412
+ },
413
+ dark: {
414
+ h: 171.8,
415
+ s: 27,
416
+ l: 47.8,
417
+ alpha: 1
418
+ },
419
+ css: {
420
+ value: "light-dark(hsl(176.7, 82%, 17.5%), hsl(171.8, 27%, 47.8%))",
421
+ variable: "var(--kds-color-background-selected-bold-active)"
422
+ }
423
+ }
424
+ },
425
+ danger: {
426
+ initial: {
427
+ light: {
428
+ h: 0,
429
+ s: 100,
430
+ l: 97.1,
431
+ alpha: 1
432
+ },
433
+ dark: {
434
+ h: 356.76,
435
+ s: 65.215,
436
+ l: 15.117,
437
+ alpha: 1
438
+ },
439
+ css: {
440
+ value: "light-dark(hsl(0, 100%, 97.1%), hsl(356.76 65.215% 15.117%))",
441
+ variable: "var(--kds-color-background-danger-initial)"
442
+ }
443
+ },
444
+ hover: {
445
+ light: {
446
+ h: 1.5,
447
+ s: 100,
448
+ l: 92.4,
449
+ alpha: 1
450
+ },
451
+ dark: {
452
+ h: 348.8,
453
+ s: 90.9,
454
+ l: 34.5,
455
+ alpha: .72
456
+ },
457
+ css: {
458
+ value: "light-dark(hsl(1.5, 100%, 92.4%), hsl(348.8 90.9% 34.5% / 0.72))",
459
+ variable: "var(--kds-color-background-danger-hover)"
460
+ }
461
+ },
462
+ active: {
463
+ light: {
464
+ h: 3.4,
465
+ s: 100,
466
+ l: 86.1,
467
+ alpha: 1
468
+ },
469
+ dark: {
470
+ h: 353,
471
+ s: 74.7,
472
+ l: 44.9,
473
+ alpha: .72
474
+ },
475
+ css: {
476
+ value: "light-dark(hsl(3.4, 100%, 86.1%), hsl(353 74.7% 44.9% / 0.72))",
477
+ variable: "var(--kds-color-background-danger-active)"
478
+ }
479
+ }
480
+ },
481
+ "danger-bold": {
482
+ initial: {
483
+ light: {
484
+ h: 348.8,
485
+ s: 90.9,
486
+ l: 34.5,
487
+ alpha: 1
488
+ },
489
+ dark: {
490
+ h: 347.6,
491
+ s: 97.1,
492
+ l: 27.3,
493
+ alpha: 1
494
+ },
495
+ css: {
496
+ value: "light-dark(hsl(348.8, 90.9%, 34.5%), hsl(347.6, 97.1%, 27.3%))",
497
+ variable: "var(--kds-color-background-danger-bold-initial)"
498
+ }
499
+ },
500
+ hover: {
501
+ light: {
502
+ h: 347.6,
503
+ s: 97.1,
504
+ l: 27.3,
505
+ alpha: 1
506
+ },
507
+ dark: {
508
+ h: 353,
509
+ s: 74.7,
510
+ l: 44.9,
511
+ alpha: .8
512
+ },
513
+ css: {
514
+ value: "light-dark(hsl(347.6, 97.1%, 27.3%), hsl(353 74.7% 44.9% / 0.8))",
515
+ variable: "var(--kds-color-background-danger-bold-hover)"
516
+ }
517
+ },
518
+ active: {
519
+ light: {
520
+ h: 348,
521
+ s: 94.3,
522
+ l: 20.8,
523
+ alpha: 1
524
+ },
525
+ dark: {
526
+ h: 356.3,
527
+ s: 76.8,
528
+ l: 54.3,
529
+ alpha: .8
530
+ },
531
+ css: {
532
+ value: "light-dark(hsl(348, 94.3%, 20.8%), hsl(356.3 76.8% 54.3% / 0.8))",
533
+ variable: "var(--kds-color-background-danger-bold-active)"
534
+ }
535
+ }
536
+ },
537
+ input: {
538
+ initial: {
539
+ light: {
540
+ h: 0,
541
+ s: 0,
542
+ l: 99,
543
+ alpha: 1
544
+ },
545
+ dark: {
546
+ h: 0,
547
+ s: 0,
548
+ l: 22,
549
+ alpha: 1
550
+ },
551
+ css: {
552
+ value: "light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 22%))",
553
+ variable: "var(--kds-color-background-input-initial)"
554
+ }
555
+ },
556
+ hover: {
557
+ light: {
558
+ h: 330,
559
+ s: 0,
560
+ l: 94.521,
561
+ alpha: 1
562
+ },
563
+ dark: {
564
+ h: 330,
565
+ s: 0,
566
+ l: 30.187,
567
+ alpha: 1
568
+ },
569
+ css: {
570
+ value: "light-dark(hsl(330 0% 94.521%), hsl(330 0% 30.187%))",
571
+ variable: "var(--kds-color-background-input-hover)"
572
+ }
573
+ },
574
+ active: {
575
+ light: {
576
+ h: 330,
577
+ s: 0,
578
+ l: 85.683,
579
+ alpha: 1
580
+ },
581
+ dark: {
582
+ h: 336,
583
+ s: 0,
584
+ l: 38.771,
585
+ alpha: 1
586
+ },
587
+ css: {
588
+ value: "light-dark(hsl(330 0% 85.683%), hsl(336 0% 38.771%))",
589
+ variable: "var(--kds-color-background-input-active)"
590
+ }
591
+ }
592
+ },
593
+ disabled: {
594
+ default: {
595
+ light: {
596
+ h: 340,
597
+ s: 0,
598
+ l: 48.2,
599
+ alpha: .48
600
+ },
601
+ dark: {
602
+ h: 340,
603
+ s: 0,
604
+ l: 48.2,
605
+ alpha: .48
606
+ },
607
+ css: {
608
+ value: "hsl(340 0% 48.2% / 0.48)",
609
+ variable: "var(--kds-color-background-disabled-default)"
610
+ }
611
+ },
612
+ primary: {
613
+ light: {
614
+ h: 173.91,
615
+ s: 18.134,
616
+ l: 40.592,
617
+ alpha: 1
618
+ },
619
+ dark: {
620
+ h: 173.91,
621
+ s: 18.134,
622
+ l: 40.592,
623
+ alpha: 1
624
+ },
625
+ css: {
626
+ value: "hsl(173.91 18.134% 40.592%)",
627
+ variable: "var(--kds-color-background-disabled-primary)"
628
+ }
629
+ },
630
+ danger: {
631
+ light: {
632
+ h: 1.3489,
633
+ s: 43.031,
634
+ l: 37.79,
635
+ alpha: 1
636
+ },
637
+ dark: {
638
+ h: 1.3489,
639
+ s: 43.031,
640
+ l: 37.79,
641
+ alpha: 1
642
+ },
643
+ css: {
644
+ value: "hsl(1.3489 43.031% 37.79%)",
645
+ variable: "var(--kds-color-background-disabled-danger)"
646
+ }
647
+ }
648
+ },
649
+ "success-bold": { initial: {
650
+ light: {
651
+ h: 111.3,
652
+ s: 47.5,
653
+ l: 31.4,
654
+ alpha: 1
655
+ },
656
+ dark: {
657
+ h: 123.7,
658
+ s: 46.7,
659
+ l: 20.6,
660
+ alpha: 1
661
+ },
662
+ css: {
663
+ value: "light-dark(hsl(111.3, 47.5%, 31.4%), hsl(123.7, 46.7%, 20.6%))",
664
+ variable: "var(--kds-color-background-success-bold-initial)"
665
+ }
666
+ } },
667
+ "info-bold": {
668
+ initial: {
669
+ light: {
670
+ h: 209.4,
671
+ s: 57.3,
672
+ l: 49.6,
673
+ alpha: 1
674
+ },
675
+ dark: {
676
+ h: 212.1,
677
+ s: 78.2,
678
+ l: 67.6,
679
+ alpha: 1
680
+ },
681
+ css: {
682
+ value: "light-dark(hsl(209.4, 57.3%, 49.6%), hsl(212.1, 78.2%, 67.6%))",
683
+ variable: "var(--kds-color-background-info-bold-initial)"
684
+ }
685
+ },
686
+ hover: {
687
+ light: {
688
+ h: 208.2,
689
+ s: 62.9,
690
+ l: 41.2,
691
+ alpha: 1
692
+ },
693
+ dark: {
694
+ h: 213.6,
695
+ s: 91.6,
696
+ l: 76.7,
697
+ alpha: 1
698
+ },
699
+ css: {
700
+ value: "light-dark(hsl(208.2, 62.9%, 41.2%), hsl(213.6, 91.6%, 76.7%))",
701
+ variable: "var(--kds-color-background-info-bold-hover)"
702
+ }
703
+ },
704
+ active: {
705
+ light: {
706
+ h: 208.3,
707
+ s: 60.5,
708
+ l: 33.7,
709
+ alpha: 1
710
+ },
711
+ dark: {
712
+ h: 214.5,
713
+ s: 100,
714
+ l: 84.3,
715
+ alpha: 1
716
+ },
717
+ css: {
718
+ value: "light-dark(hsl(208.3, 60.5%, 33.7%), hsl(214.5, 100%, 84.3%))",
719
+ variable: "var(--kds-color-background-info-bold-active)"
720
+ }
721
+ }
722
+ }
723
+ },
724
+ "background-static": {
725
+ info: {
726
+ light: {
727
+ h: 216.7,
728
+ s: 100,
729
+ l: 96.5,
730
+ alpha: 1
731
+ },
732
+ dark: {
733
+ h: 210,
734
+ s: 50,
735
+ l: 27.5,
736
+ alpha: 1
737
+ },
738
+ css: {
739
+ value: "light-dark(hsl(216.7, 100%, 96.5%), hsl(210, 50%, 27.5%))",
740
+ variable: "var(--kds-color-background-static-info)"
741
+ }
742
+ },
743
+ "info-muted": {
744
+ light: {
745
+ h: 216.83,
746
+ s: 100.14,
747
+ l: 97.347,
748
+ alpha: 1
749
+ },
750
+ dark: {
751
+ h: 211.86,
752
+ s: 40.97,
753
+ l: 17.58,
754
+ alpha: 1
755
+ },
756
+ css: {
757
+ value: "light-dark(hsl(216.83 100.14% 97.347%), hsl(211.86 40.97% 17.58%))",
758
+ variable: "var(--kds-color-background-static-info-muted)"
759
+ }
760
+ },
761
+ warning: {
762
+ light: {
763
+ h: 30,
764
+ s: 95.2,
765
+ l: 91.8,
766
+ alpha: 1
767
+ },
768
+ dark: {
769
+ h: 13.1,
770
+ s: 66.1,
771
+ l: 23.1,
772
+ alpha: 1
773
+ },
774
+ css: {
775
+ value: "light-dark(hsl(30, 95.2%, 91.8%), hsl(13.1, 66.1%, 23.1%))",
776
+ variable: "var(--kds-color-background-static-warning)"
777
+ }
778
+ },
779
+ "warning-muted": {
780
+ light: {
781
+ h: 29.601,
782
+ s: 98.108,
783
+ l: 95.778,
784
+ alpha: 1
785
+ },
786
+ dark: {
787
+ h: 14.687,
788
+ s: 60.252,
789
+ l: 14.775,
790
+ alpha: 1
791
+ },
792
+ css: {
793
+ value: "light-dark(hsl(29.601 98.108% 95.778%), hsl(14.687 60.252% 14.775%))",
794
+ variable: "var(--kds-color-background-static-warning-muted)"
795
+ }
796
+ },
797
+ danger: {
798
+ light: {
799
+ h: 1.5,
800
+ s: 100,
801
+ l: 92.4,
802
+ alpha: 1
803
+ },
804
+ dark: {
805
+ h: 347.6,
806
+ s: 97.1,
807
+ l: 27.3,
808
+ alpha: 1
809
+ },
810
+ css: {
811
+ value: "light-dark(hsl(1.5, 100%, 92.4%), hsl(347.6, 97.1%, 27.3%))",
812
+ variable: "var(--kds-color-background-static-danger)"
813
+ }
814
+ },
815
+ "danger-muted": {
816
+ light: {
817
+ h: 0,
818
+ s: 100,
819
+ l: 97.1,
820
+ alpha: 1
821
+ },
822
+ dark: {
823
+ h: 356.76,
824
+ s: 65.215,
825
+ l: 15.117,
826
+ alpha: 1
827
+ },
828
+ css: {
829
+ value: "light-dark(hsl(0, 100%, 97.1%), hsl(356.76 65.215% 15.117%))",
830
+ variable: "var(--kds-color-background-static-danger-muted)"
831
+ }
832
+ },
833
+ success: {
834
+ light: {
835
+ h: 119.4,
836
+ s: 96.139,
837
+ l: 93.64,
838
+ alpha: 1
839
+ },
840
+ dark: {
841
+ h: 123.7,
842
+ s: 46.7,
843
+ l: 20.6,
844
+ alpha: 1
845
+ },
846
+ css: {
847
+ value: "light-dark(hsl(119.4 96.139% 93.64%), hsl(123.7, 46.7%, 20.6%))",
848
+ variable: "var(--kds-color-background-static-success)"
849
+ }
850
+ },
851
+ "success-muted": {
852
+ light: {
853
+ h: 125.38,
854
+ s: 64.795,
855
+ l: 97.496,
856
+ alpha: 1
857
+ },
858
+ dark: {
859
+ h: 128.3,
860
+ s: 38.542,
861
+ l: 10.352,
862
+ alpha: 1
863
+ },
864
+ css: {
865
+ value: "light-dark(hsl(125.38 64.795% 97.496%), hsl(128.3 38.542% 10.352%))",
866
+ variable: "var(--kds-color-background-static-success-muted)"
867
+ }
868
+ },
869
+ brand: {
870
+ light: {
871
+ h: 50.8,
872
+ s: 100,
873
+ l: 50,
874
+ alpha: 1
875
+ },
876
+ dark: {
877
+ h: 50.8,
878
+ s: 100,
879
+ l: 50,
880
+ alpha: 1
881
+ },
882
+ css: {
883
+ value: "hsl(50.8, 100%, 50%)",
884
+ variable: "var(--kds-color-background-static-brand)"
885
+ }
886
+ },
887
+ overlay: {
888
+ light: {
889
+ h: 0,
890
+ s: 0,
891
+ l: 12.9,
892
+ alpha: 1
893
+ },
894
+ dark: {
895
+ h: 0,
896
+ s: 0,
897
+ l: 22,
898
+ alpha: 1
899
+ },
900
+ css: {
901
+ value: "light-dark(hsl(0, 0%, 12.9%), hsl(0, 0%, 22%))",
902
+ variable: "var(--kds-color-background-static-overlay)"
903
+ }
904
+ }
905
+ },
906
+ "text-and-icon": {
907
+ neutral: {
908
+ light: {
909
+ h: 0,
910
+ s: 0,
911
+ l: 15.7,
912
+ alpha: 1
913
+ },
914
+ dark: {
915
+ h: 0,
916
+ s: 0,
917
+ l: 94.1,
918
+ alpha: 1
919
+ },
920
+ css: {
921
+ value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
922
+ variable: "var(--kds-color-text-and-icon-neutral)"
923
+ }
924
+ },
925
+ muted: {
926
+ light: {
927
+ h: 0,
928
+ s: 0,
929
+ l: 32.2,
930
+ alpha: 1
931
+ },
932
+ dark: {
933
+ h: 0,
934
+ s: 0,
935
+ l: 90.2,
936
+ alpha: 1
937
+ },
938
+ css: {
939
+ value: "light-dark(hsl(0, 0%, 32.2%), hsl(0, 0%, 90.2%))",
940
+ variable: "var(--kds-color-text-and-icon-muted)"
941
+ }
942
+ },
943
+ subtle: {
944
+ light: {
945
+ h: 0,
946
+ s: 0,
947
+ l: 43,
948
+ alpha: 1
949
+ },
950
+ dark: {
951
+ h: 0,
952
+ s: 0,
953
+ l: 72.5,
954
+ alpha: 1
955
+ },
956
+ css: {
957
+ value: "light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%))",
958
+ variable: "var(--kds-color-text-and-icon-subtle)"
959
+ }
960
+ },
961
+ "neutral-inverted": {
962
+ light: {
963
+ h: 0,
964
+ s: 0,
965
+ l: 98,
966
+ alpha: 1
967
+ },
968
+ dark: {
969
+ h: 0,
970
+ s: 0,
971
+ l: 15.7,
972
+ alpha: 1
973
+ },
974
+ css: {
975
+ value: "light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%))",
976
+ variable: "var(--kds-color-text-and-icon-neutral-inverted)"
977
+ }
978
+ },
979
+ primary: {
980
+ light: {
981
+ h: 176.1,
982
+ s: 66.7,
983
+ l: 22.4,
984
+ alpha: 1
985
+ },
986
+ dark: {
987
+ h: 176.1,
988
+ s: 66.7,
989
+ l: 22.4,
990
+ alpha: 1
991
+ },
992
+ css: {
993
+ value: "hsl(176.1, 66.7%, 22.4%)",
994
+ variable: "var(--kds-color-text-and-icon-primary)"
995
+ }
996
+ },
997
+ "primary-inverted": {
998
+ light: {
999
+ h: 165.6,
1000
+ s: 67.6,
1001
+ l: 92.7,
1002
+ alpha: 1
1003
+ },
1004
+ dark: {
1005
+ h: 165.6,
1006
+ s: 67.6,
1007
+ l: 92.7,
1008
+ alpha: 1
1009
+ },
1010
+ css: {
1011
+ value: "hsl(165.6, 67.6%, 92.7%)",
1012
+ variable: "var(--kds-color-text-and-icon-primary-inverted)"
1013
+ }
1014
+ },
1015
+ selected: {
1016
+ light: {
1017
+ h: 176.1,
1018
+ s: 66.7,
1019
+ l: 22.4,
1020
+ alpha: 1
1021
+ },
1022
+ dark: {
1023
+ h: 168.8,
1024
+ s: 34.4,
1025
+ l: 75.5,
1026
+ alpha: 1
1027
+ },
1028
+ css: {
1029
+ value: "light-dark(hsl(176.1, 66.7%, 22.4%), hsl(168.8, 34.4%, 75.5%))",
1030
+ variable: "var(--kds-color-text-and-icon-selected)"
1031
+ }
1032
+ },
1033
+ "selected-inverted": {
1034
+ light: {
1035
+ h: 165,
1036
+ s: 80,
1037
+ l: 96.1,
1038
+ alpha: 1
1039
+ },
1040
+ dark: {
1041
+ h: 165,
1042
+ s: 80,
1043
+ l: 96.1,
1044
+ alpha: 1
1045
+ },
1046
+ css: {
1047
+ value: "hsl(165, 80%, 96.1%)",
1048
+ variable: "var(--kds-color-text-and-icon-selected-inverted)"
1049
+ }
1050
+ },
1051
+ warning: {
1052
+ light: {
1053
+ h: 19,
1054
+ s: 63.1,
1055
+ l: 38.2,
1056
+ alpha: 1
1057
+ },
1058
+ dark: {
1059
+ h: 31.2,
1060
+ s: 82.8,
1061
+ l: 65.9,
1062
+ alpha: 1
1063
+ },
1064
+ css: {
1065
+ value: "light-dark(hsl(19, 63.1%, 38.2%), hsl(31.2, 82.8%, 65.9%))",
1066
+ variable: "var(--kds-color-text-and-icon-warning)"
1067
+ }
1068
+ },
1069
+ "warning-inverted": {
1070
+ light: {
1071
+ h: 31,
1072
+ s: 100,
1073
+ l: 82.5,
1074
+ alpha: 1
1075
+ },
1076
+ dark: {
1077
+ h: 31,
1078
+ s: 100,
1079
+ l: 82.5,
1080
+ alpha: 1
1081
+ },
1082
+ css: {
1083
+ value: "hsl(31, 100%, 82.5%)",
1084
+ variable: "var(--kds-color-text-and-icon-warning-inverted)"
1085
+ }
1086
+ },
1087
+ danger: {
1088
+ light: {
1089
+ h: 348.8,
1090
+ s: 90.9,
1091
+ l: 34.5,
1092
+ alpha: 1
1093
+ },
1094
+ dark: {
1095
+ h: 3.5,
1096
+ s: 100,
1097
+ l: 79.6,
1098
+ alpha: 1
1099
+ },
1100
+ css: {
1101
+ value: "light-dark(hsl(348.8, 90.9%, 34.5%), hsl(3.5, 100%, 79.6%))",
1102
+ variable: "var(--kds-color-text-and-icon-danger)"
1103
+ }
1104
+ },
1105
+ "danger-inverted": {
1106
+ light: {
1107
+ h: 0,
1108
+ s: 100,
1109
+ l: 97.1,
1110
+ alpha: 1
1111
+ },
1112
+ dark: {
1113
+ h: 1.5,
1114
+ s: 100,
1115
+ l: 92.4,
1116
+ alpha: 1
1117
+ },
1118
+ css: {
1119
+ value: "light-dark(hsl(0, 100%, 97.1%), hsl(1.5, 100%, 92.4%))",
1120
+ variable: "var(--kds-color-text-and-icon-danger-inverted)"
1121
+ }
1122
+ },
1123
+ success: {
1124
+ light: {
1125
+ h: 116.1,
1126
+ s: 46.6,
1127
+ l: 25.7,
1128
+ alpha: 1
1129
+ },
1130
+ dark: {
1131
+ h: 109,
1132
+ s: 47.2,
1133
+ l: 61.4,
1134
+ alpha: 1
1135
+ },
1136
+ css: {
1137
+ value: "light-dark(hsl(116.1, 46.6%, 25.7%), hsl(109, 47.2%, 61.4%))",
1138
+ variable: "var(--kds-color-text-and-icon-success)"
1139
+ }
1140
+ },
1141
+ "success-inverted": {
1142
+ light: {
1143
+ h: 120,
1144
+ s: 95.3,
1145
+ l: 91.6,
1146
+ alpha: 1
1147
+ },
1148
+ dark: {
1149
+ h: 120,
1150
+ s: 95.3,
1151
+ l: 91.6,
1152
+ alpha: 1
1153
+ },
1154
+ css: {
1155
+ value: "hsl(120, 95.3%, 91.6%)",
1156
+ variable: "var(--kds-color-text-and-icon-success-inverted)"
1157
+ }
1158
+ },
1159
+ disabled: {
1160
+ light: {
1161
+ h: 0,
1162
+ s: 0,
1163
+ l: 64,
1164
+ alpha: 1
1165
+ },
1166
+ dark: {
1167
+ h: 0,
1168
+ s: 0,
1169
+ l: 48.2,
1170
+ alpha: 1
1171
+ },
1172
+ css: {
1173
+ value: "light-dark(hsl(0, 0%, 64%), hsl(0, 0%, 48.2%))",
1174
+ variable: "var(--kds-color-text-and-icon-disabled)"
1175
+ }
1176
+ },
1177
+ "disabled-inverted": {
1178
+ light: {
1179
+ h: 0,
1180
+ s: 0,
1181
+ l: 72.5,
1182
+ alpha: 1
1183
+ },
1184
+ dark: {
1185
+ h: 0,
1186
+ s: 0,
1187
+ l: 72.5,
1188
+ alpha: 1
1189
+ },
1190
+ css: {
1191
+ value: "hsl(0, 0%, 72.5%)",
1192
+ variable: "var(--kds-color-text-and-icon-disabled-inverted)"
1193
+ }
1194
+ },
1195
+ info: {
1196
+ light: {
1197
+ h: 208.3,
1198
+ s: 60.5,
1199
+ l: 33.7,
1200
+ alpha: 1
1201
+ },
1202
+ dark: {
1203
+ h: 213.6,
1204
+ s: 91.6,
1205
+ l: 76.7,
1206
+ alpha: 1
1207
+ },
1208
+ css: {
1209
+ value: "light-dark(hsl(208.3, 60.5%, 33.7%), hsl(213.6, 91.6%, 76.7%))",
1210
+ variable: "var(--kds-color-text-and-icon-info)"
1211
+ }
1212
+ },
1213
+ editor: {
1214
+ light: {
1215
+ h: 0,
1216
+ s: 0,
1217
+ l: 11.4,
1218
+ alpha: 1
1219
+ },
1220
+ dark: {
1221
+ h: 0,
1222
+ s: 0,
1223
+ l: 94.1,
1224
+ alpha: 1
1225
+ },
1226
+ css: {
1227
+ value: "light-dark(hsl(0, 0%, 11.4%), hsl(0, 0%, 94.1%))",
1228
+ variable: "var(--kds-color-text-and-icon-editor)"
1229
+ }
1230
+ }
1231
+ },
1232
+ border: {
1233
+ neutral: {
1234
+ light: {
1235
+ h: 330,
1236
+ s: 0,
1237
+ l: 10.2,
1238
+ alpha: .4
1239
+ },
1240
+ dark: {
1241
+ h: 330,
1242
+ s: 0,
1243
+ l: 99,
1244
+ alpha: .5
1245
+ },
1246
+ css: {
1247
+ value: "light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5))",
1248
+ variable: "var(--kds-color-border-neutral)"
1249
+ }
1250
+ },
1251
+ muted: {
1252
+ light: {
1253
+ h: 330,
1254
+ s: 0,
1255
+ l: 10.2,
1256
+ alpha: .2
1257
+ },
1258
+ dark: {
1259
+ h: 330,
1260
+ s: 0,
1261
+ l: 99,
1262
+ alpha: .2
1263
+ },
1264
+ css: {
1265
+ value: "light-dark(hsl(330 0% 10.2% / 0.2), hsl(330 0% 99% / 0.2))",
1266
+ variable: "var(--kds-color-border-muted)"
1267
+ }
1268
+ },
1269
+ subtle: {
1270
+ light: {
1271
+ h: 330,
1272
+ s: 0,
1273
+ l: 10.2,
1274
+ alpha: .1
1275
+ },
1276
+ dark: {
1277
+ h: 330,
1278
+ s: 0,
1279
+ l: 99,
1280
+ alpha: .1
1281
+ },
1282
+ css: {
1283
+ value: "light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1))",
1284
+ variable: "var(--kds-color-border-subtle)"
1285
+ }
1286
+ },
1287
+ "primary-bold": {
1288
+ light: {
1289
+ h: 176.7,
1290
+ s: 82,
1291
+ l: 17.5,
1292
+ alpha: 1
1293
+ },
1294
+ dark: {
1295
+ h: 176.7,
1296
+ s: 82,
1297
+ l: 17.5,
1298
+ alpha: 1
1299
+ },
1300
+ css: {
1301
+ value: "hsl(176.7, 82%, 17.5%)",
1302
+ variable: "var(--kds-color-border-primary-bold)"
1303
+ }
1304
+ },
1305
+ primary: {
1306
+ light: {
1307
+ h: 169.8,
1308
+ s: 30.6,
1309
+ l: 66.1,
1310
+ alpha: 1
1311
+ },
1312
+ dark: {
1313
+ h: 168.8,
1314
+ s: 34.4,
1315
+ l: 75.5,
1316
+ alpha: 1
1317
+ },
1318
+ css: {
1319
+ value: "light-dark(hsl(169.8, 30.6%, 66.1%), hsl(168.8, 34.4%, 75.5%))",
1320
+ variable: "var(--kds-color-border-primary)"
1321
+ }
1322
+ },
1323
+ "selected-bold": {
1324
+ light: {
1325
+ h: 174.4,
1326
+ s: 47.8,
1327
+ l: 30.8,
1328
+ alpha: 1
1329
+ },
1330
+ dark: {
1331
+ h: 168.8,
1332
+ s: 34.4,
1333
+ l: 75.5,
1334
+ alpha: 1
1335
+ },
1336
+ css: {
1337
+ value: "light-dark(hsl(174.4, 47.8%, 30.8%), hsl(168.8, 34.4%, 75.5%))",
1338
+ variable: "var(--kds-color-border-selected-bold)"
1339
+ }
1340
+ },
1341
+ selected: {
1342
+ light: {
1343
+ h: 171.8,
1344
+ s: 27,
1345
+ l: 47.8,
1346
+ alpha: 1
1347
+ },
1348
+ dark: {
1349
+ h: 168,
1350
+ s: 46.7,
1351
+ l: 85.3,
1352
+ alpha: 1
1353
+ },
1354
+ css: {
1355
+ value: "light-dark(hsl(171.8, 27%, 47.8%), hsl(168, 46.7%, 85.3%))",
1356
+ variable: "var(--kds-color-border-selected)"
1357
+ }
1358
+ },
1359
+ "selected-accent": {
1360
+ light: {
1361
+ h: 209.4,
1362
+ s: 57.3,
1363
+ l: 49.6,
1364
+ alpha: 1
1365
+ },
1366
+ dark: {
1367
+ h: 213.6,
1368
+ s: 91.6,
1369
+ l: 76.7,
1370
+ alpha: 1
1371
+ },
1372
+ css: {
1373
+ value: "light-dark(hsl(209.4, 57.3%, 49.6%), hsl(213.6, 91.6%, 76.7%))",
1374
+ variable: "var(--kds-color-border-selected-accent)"
1375
+ }
1376
+ },
1377
+ "warning-bold": {
1378
+ light: {
1379
+ h: 19,
1380
+ s: 63.1,
1381
+ l: 38.2,
1382
+ alpha: 1
1383
+ },
1384
+ dark: {
1385
+ h: 31,
1386
+ s: 100,
1387
+ l: 82.5,
1388
+ alpha: 1
1389
+ },
1390
+ css: {
1391
+ value: "light-dark(hsl(19, 63.1%, 38.2%), hsl(31, 100%, 82.5%))",
1392
+ variable: "var(--kds-color-border-warning-bold)"
1393
+ }
1394
+ },
1395
+ warning: {
1396
+ light: {
1397
+ h: 30.8,
1398
+ s: 79.3,
1399
+ l: 73.5,
1400
+ alpha: 1
1401
+ },
1402
+ dark: {
1403
+ h: 13.1,
1404
+ s: 66.1,
1405
+ l: 23.1,
1406
+ alpha: 1
1407
+ },
1408
+ css: {
1409
+ value: "light-dark(hsl(30.8, 79.3%, 73.5%), hsl(13.1, 66.1%, 23.1%))",
1410
+ variable: "var(--kds-color-border-warning)"
1411
+ }
1412
+ },
1413
+ "danger-bold": {
1414
+ light: {
1415
+ h: 348.8,
1416
+ s: 90.9,
1417
+ l: 34.5,
1418
+ alpha: 1
1419
+ },
1420
+ dark: {
1421
+ h: 3.5,
1422
+ s: 100,
1423
+ l: 79.6,
1424
+ alpha: 1
1425
+ },
1426
+ css: {
1427
+ value: "light-dark(hsl(348.8, 90.9%, 34.5%), hsl(3.5, 100%, 79.6%))",
1428
+ variable: "var(--kds-color-border-danger-bold)"
1429
+ }
1430
+ },
1431
+ danger: {
1432
+ light: {
1433
+ h: 3.4,
1434
+ s: 100,
1435
+ l: 86.1,
1436
+ alpha: 1
1437
+ },
1438
+ dark: {
1439
+ h: 348,
1440
+ s: 94.3,
1441
+ l: 20.8,
1442
+ alpha: 1
1443
+ },
1444
+ css: {
1445
+ value: "light-dark(hsl(3.4, 100%, 86.1%), hsl(348, 94.3%, 20.8%))",
1446
+ variable: "var(--kds-color-border-danger)"
1447
+ }
1448
+ },
1449
+ "success-bold": {
1450
+ light: {
1451
+ h: 116.1,
1452
+ s: 46.6,
1453
+ l: 25.7,
1454
+ alpha: 1
1455
+ },
1456
+ dark: {
1457
+ h: 112,
1458
+ s: 56.5,
1459
+ l: 71.2,
1460
+ alpha: 1
1461
+ },
1462
+ css: {
1463
+ value: "light-dark(hsl(116.1, 46.6%, 25.7%), hsl(112, 56.5%, 71.2%))",
1464
+ variable: "var(--kds-color-border-success-bold)"
1465
+ }
1466
+ },
1467
+ success: {
1468
+ light: {
1469
+ h: 112,
1470
+ s: 56.5,
1471
+ l: 71.2,
1472
+ alpha: 1
1473
+ },
1474
+ dark: {
1475
+ h: 123.7,
1476
+ s: 46.7,
1477
+ l: 20.6,
1478
+ alpha: 1
1479
+ },
1480
+ css: {
1481
+ value: "light-dark(hsl(112, 56.5%, 71.2%), hsl(123.7, 46.7%, 20.6%))",
1482
+ variable: "var(--kds-color-border-success)"
1483
+ }
1484
+ },
1485
+ "info-bold": {
1486
+ light: {
1487
+ h: 208.3,
1488
+ s: 60.5,
1489
+ l: 33.7,
1490
+ alpha: 1
1491
+ },
1492
+ dark: {
1493
+ h: 214.5,
1494
+ s: 100,
1495
+ l: 84.3,
1496
+ alpha: 1
1497
+ },
1498
+ css: {
1499
+ value: "light-dark(hsl(208.3, 60.5%, 33.7%), hsl(214.5, 100%, 84.3%))",
1500
+ variable: "var(--kds-color-border-info-bold)"
1501
+ }
1502
+ },
1503
+ info: {
1504
+ light: {
1505
+ h: 214.5,
1506
+ s: 100,
1507
+ l: 84.3,
1508
+ alpha: 1
1509
+ },
1510
+ dark: {
1511
+ h: 210,
1512
+ s: 50,
1513
+ l: 27.5,
1514
+ alpha: 1
1515
+ },
1516
+ css: {
1517
+ value: "light-dark(hsl(214.5, 100%, 84.3%), hsl(210, 50%, 27.5%))",
1518
+ variable: "var(--kds-color-border-info)"
1519
+ }
1520
+ },
1521
+ transparent: {
1522
+ light: {
1523
+ h: 345,
1524
+ s: 0,
1525
+ l: 11.4,
1526
+ alpha: 0
1527
+ },
1528
+ dark: {
1529
+ h: 345,
1530
+ s: 0,
1531
+ l: 11.4,
1532
+ alpha: 0
1533
+ },
1534
+ css: {
1535
+ value: "hsl(345 0% 11.4% / 0)",
1536
+ variable: "var(--kds-color-border-transparent)"
1537
+ }
1538
+ },
1539
+ disabled: {
1540
+ light: {
1541
+ h: 0,
1542
+ s: 0,
1543
+ l: 72.5,
1544
+ alpha: 1
1545
+ },
1546
+ dark: {
1547
+ h: 0,
1548
+ s: 0,
1549
+ l: 48.2,
1550
+ alpha: 1
1551
+ },
1552
+ css: {
1553
+ value: "light-dark(hsl(0, 0%, 72.5%), hsl(0, 0%, 48.2%))",
1554
+ variable: "var(--kds-color-border-disabled)"
1555
+ }
1556
+ },
1557
+ brand: {
1558
+ light: {
1559
+ h: 50.8,
1560
+ s: 100,
1561
+ l: 50,
1562
+ alpha: 1
1563
+ },
1564
+ dark: {
1565
+ h: 50.8,
1566
+ s: 100,
1567
+ l: 50,
1568
+ alpha: 1
1569
+ },
1570
+ css: {
1571
+ value: "hsl(50.8, 100%, 50%)",
1572
+ variable: "var(--kds-color-border-brand)"
1573
+ }
1574
+ },
1575
+ "neutral-bold-initial": {
1576
+ light: {
1577
+ h: 330,
1578
+ s: 0,
1579
+ l: 10.2,
1580
+ alpha: .4
1581
+ },
1582
+ dark: {
1583
+ h: 330,
1584
+ s: 0,
1585
+ l: 99,
1586
+ alpha: .4
1587
+ },
1588
+ css: {
1589
+ value: "light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.4))",
1590
+ variable: "var(--kds-color-border-neutral-bold-initial)"
1591
+ }
1592
+ },
1593
+ "neutral-bold-hover": {
1594
+ light: {
1595
+ h: 330,
1596
+ s: 0,
1597
+ l: 10.2,
1598
+ alpha: .64
1599
+ },
1600
+ dark: {
1601
+ h: 330,
1602
+ s: 0,
1603
+ l: 99,
1604
+ alpha: .58
1605
+ },
1606
+ css: {
1607
+ value: "light-dark(hsl(330 0% 10.2% / 0.64), hsl(330 0% 99% / 0.58))",
1608
+ variable: "var(--kds-color-border-neutral-bold-hover)"
1609
+ }
1610
+ },
1611
+ "neutral-bold-active": {
1612
+ light: {
1613
+ h: 330,
1614
+ s: 0,
1615
+ l: 10.2,
1616
+ alpha: .74
1617
+ },
1618
+ dark: {
1619
+ h: 330,
1620
+ s: 0,
1621
+ l: 99,
1622
+ alpha: .68
1623
+ },
1624
+ css: {
1625
+ value: "light-dark(hsl(330 0% 10.2% / 0.74), hsl(330 0% 99% / 0.68))",
1626
+ variable: "var(--kds-color-border-neutral-bold-active)"
1627
+ }
1628
+ }
1629
+ },
1630
+ focus: {
1631
+ outline: {
1632
+ light: {
1633
+ h: 209.4,
1634
+ s: 57.3,
1635
+ l: 49.6,
1636
+ alpha: 1
1637
+ },
1638
+ dark: {
1639
+ h: 213.6,
1640
+ s: 91.6,
1641
+ l: 76.7,
1642
+ alpha: 1
1643
+ },
1644
+ css: {
1645
+ value: "light-dark(hsl(209.4, 57.3%, 49.6%), hsl(213.6, 91.6%, 76.7%))",
1646
+ variable: "var(--kds-color-focus-outline)"
1647
+ }
1648
+ },
1649
+ background: {
1650
+ light: {
1651
+ h: 215.7,
1652
+ s: 100,
1653
+ l: 91.8,
1654
+ alpha: .4
1655
+ },
1656
+ dark: {
1657
+ h: 209.4,
1658
+ s: 49.5,
1659
+ l: 20.2,
1660
+ alpha: .5
1661
+ },
1662
+ css: {
1663
+ value: "light-dark(hsl(215.7 100% 91.8% / 0.4), hsl(209.4 49.5% 20.2% / 0.5))",
1664
+ variable: "var(--kds-color-focus-background)"
1665
+ }
1666
+ }
1667
+ },
1668
+ blanket: { default: {
1669
+ light: {
1670
+ h: 345,
1671
+ s: 0,
1672
+ l: 11.4,
1673
+ alpha: .8
1674
+ },
1675
+ dark: {
1676
+ h: 345,
1677
+ s: 0,
1678
+ l: 11.4,
1679
+ alpha: .8
1680
+ },
1681
+ css: {
1682
+ value: "hsl(345 0% 11.4% / 0.8)",
1683
+ variable: "var(--kds-color-blanket-default)"
1684
+ }
1685
+ } },
1686
+ chart: {
1687
+ data: {
1688
+ "series-1": {
1689
+ light: {
1690
+ h: 173.4,
1691
+ s: 37.1,
1692
+ l: 38.6,
1693
+ alpha: 1
1694
+ },
1695
+ dark: {
1696
+ h: 169.8,
1697
+ s: 30.6,
1698
+ l: 66.1,
1699
+ alpha: 1
1700
+ },
1701
+ css: {
1702
+ value: "light-dark(hsl(173.4, 37.1%, 38.6%), hsl(169.8, 30.6%, 66.1%))",
1703
+ variable: "var(--kds-color-chart-data-series-1)"
1704
+ }
1705
+ },
1706
+ "series-2": {
1707
+ light: {
1708
+ h: 211.3,
1709
+ s: 67.3,
1710
+ l: 59.2,
1711
+ alpha: 1
1712
+ },
1713
+ dark: {
1714
+ h: 213.6,
1715
+ s: 91.6,
1716
+ l: 76.7,
1717
+ alpha: 1
1718
+ },
1719
+ css: {
1720
+ value: "light-dark(hsl(211.3, 67.3%, 59.2%), hsl(213.6, 91.6%, 76.7%))",
1721
+ variable: "var(--kds-color-chart-data-series-2)"
1722
+ }
1723
+ },
1724
+ "series-3": {
1725
+ light: {
1726
+ h: 359.6,
1727
+ s: 84.3,
1728
+ l: 62.5,
1729
+ alpha: 1
1730
+ },
1731
+ dark: {
1732
+ h: 2.6,
1733
+ s: 100,
1734
+ l: 72.4,
1735
+ alpha: 1
1736
+ },
1737
+ css: {
1738
+ value: "light-dark(hsl(359.6, 84.3%, 62.5%), hsl(2.6, 100%, 72.4%))",
1739
+ variable: "var(--kds-color-chart-data-series-3)"
1740
+ }
1741
+ },
1742
+ "series-4": {
1743
+ light: {
1744
+ h: 0,
1745
+ s: 0,
1746
+ l: 22,
1747
+ alpha: 1
1748
+ },
1749
+ dark: {
1750
+ h: 0,
1751
+ s: 0,
1752
+ l: 72.5,
1753
+ alpha: 1
1754
+ },
1755
+ css: {
1756
+ value: "light-dark(hsl(0, 0%, 22%), hsl(0, 0%, 72.5%))",
1757
+ variable: "var(--kds-color-chart-data-series-4)"
1758
+ }
1759
+ },
1760
+ "series-5": {
1761
+ light: {
1762
+ h: 28,
1763
+ s: 39,
1764
+ l: 50,
1765
+ alpha: 1
1766
+ },
1767
+ dark: {
1768
+ h: 30,
1769
+ s: 47,
1770
+ l: 68,
1771
+ alpha: 1
1772
+ },
1773
+ css: {
1774
+ value: "light-dark(hsl(28, 39%, 50%), hsl(30, 47%, 68%))",
1775
+ variable: "var(--kds-color-chart-data-series-5)"
1776
+ }
1777
+ },
1778
+ "series-6": {
1779
+ light: {
1780
+ h: 208.2,
1781
+ s: 62.9,
1782
+ l: 41.2,
1783
+ alpha: 1
1784
+ },
1785
+ dark: {
1786
+ h: 209.4,
1787
+ s: 57.3,
1788
+ l: 49.6,
1789
+ alpha: 1
1790
+ },
1791
+ css: {
1792
+ value: "light-dark(hsl(208.2, 62.9%, 41.2%), hsl(209.4, 57.3%, 49.6%))",
1793
+ variable: "var(--kds-color-chart-data-series-6)"
1794
+ }
1795
+ },
1796
+ "series-7": {
1797
+ light: {
1798
+ h: 71.1,
1799
+ s: 46.3,
1800
+ l: 32.2,
1801
+ alpha: 1
1802
+ },
1803
+ dark: {
1804
+ h: 68.6,
1805
+ s: 61,
1806
+ l: 47.3,
1807
+ alpha: 1
1808
+ },
1809
+ css: {
1810
+ value: "light-dark(hsl(71.1, 46.3%, 32.2%), hsl(68.6, 61.0%, 47.3%))",
1811
+ variable: "var(--kds-color-chart-data-series-7)"
1812
+ }
1813
+ },
1814
+ "series-8": {
1815
+ light: {
1816
+ h: 308.3,
1817
+ s: 31.6,
1818
+ l: 55.3,
1819
+ alpha: 1
1820
+ },
1821
+ dark: {
1822
+ h: 316.1,
1823
+ s: 40.6,
1824
+ l: 72.9,
1825
+ alpha: 1
1826
+ },
1827
+ css: {
1828
+ value: "light-dark(hsl(308.3, 31.6%, 55.3%), hsl(316.1, 40.6%, 72.9%))",
1829
+ variable: "var(--kds-color-chart-data-series-8)"
1830
+ }
1831
+ },
1832
+ "series-9": {
1833
+ light: {
1834
+ h: 193.1,
1835
+ s: 60.2,
1836
+ l: 43.3,
1837
+ alpha: 1
1838
+ },
1839
+ dark: {
1840
+ h: 191.3,
1841
+ s: 57.1,
1842
+ l: 54.3,
1843
+ alpha: 1
1844
+ },
1845
+ css: {
1846
+ value: "light-dark(hsl(193.1, 60.2%, 43.3%), hsl(191.3, 57.1%, 54.3%))",
1847
+ variable: "var(--kds-color-chart-data-series-9)"
1848
+ }
1849
+ },
1850
+ track: {
1851
+ light: {
1852
+ h: 0,
1853
+ s: 0,
1854
+ l: 94.1,
1855
+ alpha: 1
1856
+ },
1857
+ dark: {
1858
+ h: 0,
1859
+ s: 0,
1860
+ l: 32.2,
1861
+ alpha: 1
1862
+ },
1863
+ css: {
1864
+ value: "light-dark(hsl(0, 0%, 94.1%), hsl(0, 0%, 32.2%))",
1865
+ variable: "var(--kds-color-chart-data-track)"
1866
+ }
1867
+ }
1868
+ },
1869
+ status: {
1870
+ positive: {
1871
+ light: {
1872
+ h: 107.4,
1873
+ s: 42.2,
1874
+ l: 44.1,
1875
+ alpha: 1
1876
+ },
1877
+ dark: {
1878
+ h: 109,
1879
+ s: 47.2,
1880
+ l: 61.4,
1881
+ alpha: 1
1882
+ },
1883
+ css: {
1884
+ value: "light-dark(hsl(107.4, 42.2%, 44.1%), hsl(109, 47.2%, 61.4%))",
1885
+ variable: "var(--kds-color-chart-status-positive)"
1886
+ }
1887
+ },
1888
+ negative: {
1889
+ light: {
1890
+ h: 356.3,
1891
+ s: 76.8,
1892
+ l: 54.3,
1893
+ alpha: 1
1894
+ },
1895
+ dark: {
1896
+ h: 0,
1897
+ s: 100,
1898
+ l: 66.1,
1899
+ alpha: 1
1900
+ },
1901
+ css: {
1902
+ value: "light-dark(hsl(356.3, 76.8%, 54.3%), hsl(0, 100%, 66.1%))",
1903
+ variable: "var(--kds-color-chart-status-negative)"
1904
+ }
1905
+ },
1906
+ warning: {
1907
+ light: {
1908
+ h: 19,
1909
+ s: 63.1,
1910
+ l: 38.2,
1911
+ alpha: 1
1912
+ },
1913
+ dark: {
1914
+ h: 31.2,
1915
+ s: 82.8,
1916
+ l: 65.9,
1917
+ alpha: 1
1918
+ },
1919
+ css: {
1920
+ value: "light-dark(hsl(19, 63.1%, 38.2%), hsl(31.2, 82.8%, 65.9%))",
1921
+ variable: "var(--kds-color-chart-status-warning)"
1922
+ }
1923
+ },
1924
+ error: {
1925
+ light: {
1926
+ h: 348.8,
1927
+ s: 90.9,
1928
+ l: 34.5,
1929
+ alpha: 1
1930
+ },
1931
+ dark: {
1932
+ h: 3.5,
1933
+ s: 100,
1934
+ l: 79.6,
1935
+ alpha: 1
1936
+ },
1937
+ css: {
1938
+ value: "light-dark(hsl(348.8, 90.9%, 34.5%), hsl(3.5, 100%, 79.6%))",
1939
+ variable: "var(--kds-color-chart-status-error)"
1940
+ }
1941
+ }
1942
+ },
1943
+ scaffolding: {
1944
+ axis: {
1945
+ light: {
1946
+ h: 330,
1947
+ s: 0,
1948
+ l: 10.2,
1949
+ alpha: .2
1950
+ },
1951
+ dark: {
1952
+ h: 330,
1953
+ s: 0,
1954
+ l: 99,
1955
+ alpha: .2
1956
+ },
1957
+ css: {
1958
+ value: "light-dark(hsl(330 0% 10.2% / 0.2), hsl(330 0% 99% / 0.2))",
1959
+ variable: "var(--kds-color-chart-scaffolding-axis)"
1960
+ }
1961
+ },
1962
+ grid: {
1963
+ light: {
1964
+ h: 330,
1965
+ s: 0,
1966
+ l: 10.2,
1967
+ alpha: .1
1968
+ },
1969
+ dark: {
1970
+ h: 330,
1971
+ s: 0,
1972
+ l: 99,
1973
+ alpha: .1
1974
+ },
1975
+ css: {
1976
+ value: "light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1))",
1977
+ variable: "var(--kds-color-chart-scaffolding-grid)"
1978
+ }
1979
+ },
1980
+ border: {
1981
+ light: {
1982
+ h: 330,
1983
+ s: 0,
1984
+ l: 10.2,
1985
+ alpha: .1
1986
+ },
1987
+ dark: {
1988
+ h: 330,
1989
+ s: 0,
1990
+ l: 99,
1991
+ alpha: .1
1992
+ },
1993
+ css: {
1994
+ value: "light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1))",
1995
+ variable: "var(--kds-color-chart-scaffolding-border)"
1996
+ }
1997
+ },
1998
+ segment: {
1999
+ light: {
2000
+ h: 0,
2001
+ s: 0,
2002
+ l: 98,
2003
+ alpha: 1
2004
+ },
2005
+ dark: {
2006
+ h: 0,
2007
+ s: 0,
2008
+ l: 15.7,
2009
+ alpha: 1
2010
+ },
2011
+ css: {
2012
+ value: "light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%))",
2013
+ variable: "var(--kds-color-chart-scaffolding-segment)"
2014
+ }
2015
+ },
2016
+ surface: {
2017
+ light: {
2018
+ h: 0,
2019
+ s: 0,
2020
+ l: 98,
2021
+ alpha: 1
2022
+ },
2023
+ dark: {
2024
+ h: 0,
2025
+ s: 0,
2026
+ l: 15.7,
2027
+ alpha: 1
2028
+ },
2029
+ css: {
2030
+ value: "light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%))",
2031
+ variable: "var(--kds-color-chart-scaffolding-surface)"
2032
+ }
2033
+ },
2034
+ "tooltip-surface": {
2035
+ light: {
2036
+ h: 0,
2037
+ s: 0,
2038
+ l: 12.9,
2039
+ alpha: 1
2040
+ },
2041
+ dark: {
2042
+ h: 0,
2043
+ s: 0,
2044
+ l: 22,
2045
+ alpha: 1
2046
+ },
2047
+ css: {
2048
+ value: "light-dark(hsl(0, 0%, 12.9%), hsl(0, 0%, 22%))",
2049
+ variable: "var(--kds-color-chart-scaffolding-tooltip-surface)"
2050
+ }
2051
+ }
2052
+ },
2053
+ control: {
2054
+ default: {
2055
+ light: {
2056
+ h: 0,
2057
+ s: 0,
2058
+ l: 43,
2059
+ alpha: 1
2060
+ },
2061
+ dark: {
2062
+ h: 0,
2063
+ s: 0,
2064
+ l: 72.5,
2065
+ alpha: 1
2066
+ },
2067
+ css: {
2068
+ value: "light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%))",
2069
+ variable: "var(--kds-color-chart-control-default)"
2070
+ }
2071
+ },
2072
+ hover: {
2073
+ light: {
2074
+ h: 0,
2075
+ s: 0,
2076
+ l: 15.7,
2077
+ alpha: 1
2078
+ },
2079
+ dark: {
2080
+ h: 0,
2081
+ s: 0,
2082
+ l: 94.1,
2083
+ alpha: 1
2084
+ },
2085
+ css: {
2086
+ value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
2087
+ variable: "var(--kds-color-chart-control-hover)"
2088
+ }
2089
+ },
2090
+ selected: {
2091
+ light: {
2092
+ h: 174.4,
2093
+ s: 47.8,
2094
+ l: 30.8,
2095
+ alpha: 1
2096
+ },
2097
+ dark: {
2098
+ h: 176.1,
2099
+ s: 66.7,
2100
+ l: 22.4,
2101
+ alpha: 1
2102
+ },
2103
+ css: {
2104
+ value: "light-dark(hsl(174.4, 47.8%, 30.8%), hsl(176.1, 66.7%, 22.4%))",
2105
+ variable: "var(--kds-color-chart-control-selected)"
2106
+ }
2107
+ },
2108
+ disabled: {
2109
+ light: {
2110
+ h: 0,
2111
+ s: 0,
2112
+ l: 64,
2113
+ alpha: 1
2114
+ },
2115
+ dark: {
2116
+ h: 0,
2117
+ s: 0,
2118
+ l: 48.2,
2119
+ alpha: 1
2120
+ },
2121
+ css: {
2122
+ value: "light-dark(hsl(0, 0%, 64%), hsl(0, 0%, 48.2%))",
2123
+ variable: "var(--kds-color-chart-control-disabled)"
2124
+ }
2125
+ }
2126
+ },
2127
+ text: {
2128
+ title: {
2129
+ light: {
2130
+ h: 0,
2131
+ s: 0,
2132
+ l: 15.7,
2133
+ alpha: 1
2134
+ },
2135
+ dark: {
2136
+ h: 0,
2137
+ s: 0,
2138
+ l: 94.1,
2139
+ alpha: 1
2140
+ },
2141
+ css: {
2142
+ value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
2143
+ variable: "var(--kds-color-chart-text-title)"
2144
+ }
2145
+ },
2146
+ subtitle: {
2147
+ light: {
2148
+ h: 0,
2149
+ s: 0,
2150
+ l: 43,
2151
+ alpha: 1
2152
+ },
2153
+ dark: {
2154
+ h: 0,
2155
+ s: 0,
2156
+ l: 72.5,
2157
+ alpha: 1
2158
+ },
2159
+ css: {
2160
+ value: "light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%))",
2161
+ variable: "var(--kds-color-chart-text-subtitle)"
2162
+ }
2163
+ },
2164
+ "axis-name": {
2165
+ light: {
2166
+ h: 0,
2167
+ s: 0,
2168
+ l: 43,
2169
+ alpha: 1
2170
+ },
2171
+ dark: {
2172
+ h: 0,
2173
+ s: 0,
2174
+ l: 72.5,
2175
+ alpha: 1
2176
+ },
2177
+ css: {
2178
+ value: "light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%))",
2179
+ variable: "var(--kds-color-chart-text-axis-name)"
2180
+ }
2181
+ },
2182
+ "axis-label": {
2183
+ light: {
2184
+ h: 0,
2185
+ s: 0,
2186
+ l: 43,
2187
+ alpha: 1
2188
+ },
2189
+ dark: {
2190
+ h: 0,
2191
+ s: 0,
2192
+ l: 72.5,
2193
+ alpha: 1
2194
+ },
2195
+ css: {
2196
+ value: "light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%))",
2197
+ variable: "var(--kds-color-chart-text-axis-label)"
2198
+ }
2199
+ },
2200
+ legend: {
2201
+ light: {
2202
+ h: 0,
2203
+ s: 0,
2204
+ l: 15.7,
2205
+ alpha: 1
2206
+ },
2207
+ dark: {
2208
+ h: 0,
2209
+ s: 0,
2210
+ l: 94.1,
2211
+ alpha: 1
2212
+ },
2213
+ css: {
2214
+ value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
2215
+ variable: "var(--kds-color-chart-text-legend)"
2216
+ }
2217
+ },
2218
+ tooltip: {
2219
+ light: {
2220
+ h: 0,
2221
+ s: 0,
2222
+ l: 98,
2223
+ alpha: 1
2224
+ },
2225
+ dark: {
2226
+ h: 0,
2227
+ s: 0,
2228
+ l: 94.1,
2229
+ alpha: 1
2230
+ },
2231
+ css: {
2232
+ value: "light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 94.1%))",
2233
+ variable: "var(--kds-color-chart-text-tooltip)"
2234
+ }
2235
+ },
2236
+ label: {
2237
+ light: {
2238
+ h: 0,
2239
+ s: 0,
2240
+ l: 15.7,
2241
+ alpha: 1
2242
+ },
2243
+ dark: {
2244
+ h: 0,
2245
+ s: 0,
2246
+ l: 94.1,
2247
+ alpha: 1
2248
+ },
2249
+ css: {
2250
+ value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
2251
+ variable: "var(--kds-color-chart-text-label)"
2252
+ }
2253
+ },
2254
+ "on-fill-dark": {
2255
+ light: {
2256
+ h: 0,
2257
+ s: 0,
2258
+ l: 15.7,
2259
+ alpha: 1
2260
+ },
2261
+ dark: {
2262
+ h: 0,
2263
+ s: 0,
2264
+ l: 15.7,
2265
+ alpha: 1
2266
+ },
2267
+ css: {
2268
+ value: "hsl(0, 0%, 15.7%)",
2269
+ variable: "var(--kds-color-chart-text-on-fill-dark)"
2270
+ }
2271
+ },
2272
+ "on-fill-light": {
2273
+ light: {
2274
+ h: 0,
2275
+ s: 0,
2276
+ l: 98,
2277
+ alpha: 1
2278
+ },
2279
+ dark: {
2280
+ h: 0,
2281
+ s: 0,
2282
+ l: 98,
2283
+ alpha: 1
2284
+ },
2285
+ css: {
2286
+ value: "hsl(0, 0%, 98%)",
2287
+ variable: "var(--kds-color-chart-text-on-fill-light)"
2288
+ }
2289
+ }
2290
+ }
2291
+ },
2292
+ "nodes-and-variables": {
2293
+ "flow-variable": {
2294
+ light: {
2295
+ h: 359.6,
2296
+ s: 84.3,
2297
+ l: 62.5,
2298
+ alpha: 1
2299
+ },
2300
+ dark: {
2301
+ h: 0,
2302
+ s: 100,
2303
+ l: 66.1,
2304
+ alpha: 1
2305
+ },
2306
+ css: {
2307
+ value: "light-dark(hsl(359.6, 84.3%, 62.5%), hsl(0, 100%, 66.1%))",
2308
+ variable: "var(--kds-color-nodes-and-variables-flow-variable)"
2309
+ }
2310
+ },
2311
+ loop: {
2312
+ light: {
2313
+ h: 187.7,
2314
+ s: 51.7,
2315
+ l: 76.5,
2316
+ alpha: 1
2317
+ },
2318
+ dark: {
2319
+ h: 187.7,
2320
+ s: 51.7,
2321
+ l: 76.5,
2322
+ alpha: 1
2323
+ },
2324
+ css: {
2325
+ value: "hsl(187.7, 51.7%, 76.5%)",
2326
+ variable: "var(--kds-color-nodes-and-variables-loop)"
2327
+ }
2328
+ },
2329
+ manipulator: {
2330
+ light: {
2331
+ h: 50.8,
2332
+ s: 100,
2333
+ l: 50,
2334
+ alpha: 1
2335
+ },
2336
+ dark: {
2337
+ h: 50.8,
2338
+ s: 100,
2339
+ l: 50,
2340
+ alpha: 1
2341
+ },
2342
+ css: {
2343
+ value: "hsl(50.8, 100%, 50%)",
2344
+ variable: "var(--kds-color-nodes-and-variables-manipulator)"
2345
+ }
2346
+ },
2347
+ predictor: {
2348
+ light: {
2349
+ h: 106.5,
2350
+ s: 42.6,
2351
+ l: 54.9,
2352
+ alpha: 1
2353
+ },
2354
+ dark: {
2355
+ h: 109,
2356
+ s: 47.2,
2357
+ l: 61.4,
2358
+ alpha: 1
2359
+ },
2360
+ css: {
2361
+ value: "light-dark(hsl(106.5, 42.6%, 54.9%), hsl(109, 47.2%, 61.4%))",
2362
+ variable: "var(--kds-color-nodes-and-variables-predictor)"
2363
+ }
2364
+ },
2365
+ source: {
2366
+ light: {
2367
+ h: 30,
2368
+ s: 80.4,
2369
+ l: 60,
2370
+ alpha: 1
2371
+ },
2372
+ dark: {
2373
+ h: 30,
2374
+ s: 80.4,
2375
+ l: 60,
2376
+ alpha: 1
2377
+ },
2378
+ css: {
2379
+ value: "hsl(30, 80.4%, 60%)",
2380
+ variable: "var(--kds-color-nodes-and-variables-source)"
2381
+ }
2382
+ },
2383
+ visualizer: {
2384
+ light: {
2385
+ h: 193.1,
2386
+ s: 60.2,
2387
+ l: 43.3,
2388
+ alpha: 1
2389
+ },
2390
+ dark: {
2391
+ h: 191.3,
2392
+ s: 57.1,
2393
+ l: 54.3,
2394
+ alpha: 1
2395
+ },
2396
+ css: {
2397
+ value: "light-dark(hsl(193.1, 60.2%, 43.3%), hsl(191.3, 57.1%, 54.3%))",
2398
+ variable: "var(--kds-color-nodes-and-variables-visualizer)"
2399
+ }
2400
+ },
2401
+ widget: {
2402
+ light: {
2403
+ h: 193.1,
2404
+ s: 60.2,
2405
+ l: 43.3,
2406
+ alpha: 1
2407
+ },
2408
+ dark: {
2409
+ h: 191.3,
2410
+ s: 57.1,
2411
+ l: 54.3,
2412
+ alpha: 1
2413
+ },
2414
+ css: {
2415
+ value: "light-dark(hsl(193.1, 60.2%, 43.3%), hsl(191.3, 57.1%, 54.3%))",
2416
+ variable: "var(--kds-color-nodes-and-variables-widget)"
2417
+ }
2418
+ },
2419
+ scope: {
2420
+ light: {
2421
+ h: 304.6,
2422
+ s: 27.4,
2423
+ l: 46.5,
2424
+ alpha: 1
2425
+ },
2426
+ dark: {
2427
+ h: 308.3,
2428
+ s: 31.6,
2429
+ l: 55.3,
2430
+ alpha: 1
2431
+ },
2432
+ css: {
2433
+ value: "light-dark(hsl(304.6, 27.4%, 46.5%), hsl(308.3, 31.6%, 55.3%))",
2434
+ variable: "var(--kds-color-nodes-and-variables-scope)"
2435
+ }
2436
+ },
2437
+ learner: {
2438
+ light: {
2439
+ h: 67.3,
2440
+ s: 67.8,
2441
+ l: 54.9,
2442
+ alpha: 1
2443
+ },
2444
+ dark: {
2445
+ h: 65.4,
2446
+ s: 68.5,
2447
+ l: 65.1,
2448
+ alpha: 1
2449
+ },
2450
+ css: {
2451
+ value: "light-dark(hsl(67.3, 67.8%, 54.9%), hsl(65.4, 68.5%, 65.1%))",
2452
+ variable: "var(--kds-color-nodes-and-variables-learner)"
2453
+ }
2454
+ },
2455
+ sink: {
2456
+ light: {
2457
+ h: 359.6,
2458
+ s: 84.3,
2459
+ l: 62.5,
2460
+ alpha: 1
2461
+ },
2462
+ dark: {
2463
+ h: 0,
2464
+ s: 100,
2465
+ l: 66.1,
2466
+ alpha: 1
2467
+ },
2468
+ css: {
2469
+ value: "light-dark(hsl(359.6, 84.3%, 62.5%), hsl(0, 100%, 66.1%))",
2470
+ variable: "var(--kds-color-nodes-and-variables-sink)"
2471
+ }
2472
+ },
2473
+ container: {
2474
+ light: {
2475
+ h: 69.4,
2476
+ s: 53.5,
2477
+ l: 39.6,
2478
+ alpha: 1
2479
+ },
2480
+ dark: {
2481
+ h: 69.4,
2482
+ s: 53.5,
2483
+ l: 39.6,
2484
+ alpha: 1
2485
+ },
2486
+ css: {
2487
+ value: "hsl(69.4, 53.5%, 39.6%)",
2488
+ variable: "var(--kds-color-nodes-and-variables-container)"
2489
+ }
2490
+ },
2491
+ unknown: {
2492
+ light: {
2493
+ h: 353,
2494
+ s: 74.7,
2495
+ l: 44.9,
2496
+ alpha: 1
2497
+ },
2498
+ dark: {
2499
+ h: 356.3,
2500
+ s: 76.8,
2501
+ l: 54.3,
2502
+ alpha: 1
2503
+ },
2504
+ css: {
2505
+ value: "light-dark(hsl(353, 74.7%, 44.9%), hsl(356.3, 76.8%, 54.3%))",
2506
+ variable: "var(--kds-color-nodes-and-variables-unknown)"
2507
+ }
2508
+ },
2509
+ other: {
2510
+ light: {
2511
+ h: 29,
2512
+ s: 43,
2513
+ l: 58,
2514
+ alpha: 1
2515
+ },
2516
+ dark: {
2517
+ h: 30,
2518
+ s: 47,
2519
+ l: 68,
2520
+ alpha: 1
2521
+ },
2522
+ css: {
2523
+ value: "light-dark(hsl(29, 43%, 58%), hsl(30, 47%, 68%))",
2524
+ variable: "var(--kds-color-nodes-and-variables-other)"
2525
+ }
2526
+ },
2527
+ metanode: {
2528
+ light: {
2529
+ h: 0,
2530
+ s: 0,
2531
+ l: 99,
2532
+ alpha: 1
2533
+ },
2534
+ dark: {
2535
+ h: 0,
2536
+ s: 0,
2537
+ l: 12.9,
2538
+ alpha: 1
2539
+ },
2540
+ css: {
2541
+ value: "light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 12.9%))",
2542
+ variable: "var(--kds-color-nodes-and-variables-metanode)"
2543
+ }
2544
+ },
2545
+ metanodeBorder: {
2546
+ light: {
2547
+ h: 0,
2548
+ s: 0,
2549
+ l: 32.2,
2550
+ alpha: 1
2551
+ },
2552
+ dark: {
2553
+ h: 0,
2554
+ s: 0,
2555
+ l: 94.1,
2556
+ alpha: 1
2557
+ },
2558
+ css: {
2559
+ value: "light-dark(hsl(0, 0%, 32.2%), hsl(0, 0%, 94.1%))",
2560
+ variable: "var(--kds-color-nodes-and-variables-metanode-border)"
2561
+ }
2562
+ },
2563
+ component: {
2564
+ light: {
2565
+ h: 0,
2566
+ s: 0,
2567
+ l: 72.5,
2568
+ alpha: 1
2569
+ },
2570
+ dark: {
2571
+ h: 0,
2572
+ s: 0,
2573
+ l: 43,
2574
+ alpha: 1
2575
+ },
2576
+ css: {
2577
+ value: "light-dark(hsl(0, 0%, 72.5%), hsl(0, 0%, 43%))",
2578
+ variable: "var(--kds-color-nodes-and-variables-component)"
2579
+ }
2580
+ },
2581
+ specialState: {
2582
+ light: {
2583
+ h: 0,
2584
+ s: 0,
2585
+ l: 99,
2586
+ alpha: 1
2587
+ },
2588
+ dark: {
2589
+ h: 0,
2590
+ s: 0,
2591
+ l: 12.9,
2592
+ alpha: 1
2593
+ },
2594
+ css: {
2595
+ value: "light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 12.9%))",
2596
+ variable: "var(--kds-color-nodes-and-variables-special-state)"
2597
+ }
2598
+ },
2599
+ forbiddenBorder: {
2600
+ light: {
2601
+ h: 0,
2602
+ s: 0,
2603
+ l: 18.8,
2604
+ alpha: 1
2605
+ },
2606
+ dark: {
2607
+ h: 0,
2608
+ s: 0,
2609
+ l: 90.2,
2610
+ alpha: 1
2611
+ },
2612
+ css: {
2613
+ value: "light-dark(hsl(0, 0%, 18.8%), hsl(0, 0%, 90.2%))",
2614
+ variable: "var(--kds-color-nodes-and-variables-forbidden-border)"
2615
+ }
2616
+ },
2617
+ forbidden: {
2618
+ light: {
2619
+ h: 0,
2620
+ s: 0,
2621
+ l: 90.2,
2622
+ alpha: 1
2623
+ },
2624
+ dark: {
2625
+ h: 0,
2626
+ s: 0,
2627
+ l: 22,
2628
+ alpha: 1
2629
+ },
2630
+ css: {
2631
+ value: "light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 22%))",
2632
+ variable: "var(--kds-color-nodes-and-variables-forbidden)"
2633
+ }
2634
+ },
2635
+ warningBorder: {
2636
+ light: {
2637
+ h: 19,
2638
+ s: 63.1,
2639
+ l: 38.2,
2640
+ alpha: 1
2641
+ },
2642
+ dark: {
2643
+ h: 31.2,
2644
+ s: 82.8,
2645
+ l: 65.9,
2646
+ alpha: 1
2647
+ },
2648
+ css: {
2649
+ value: "light-dark(hsl(19, 63.1%, 38.2%), hsl(31.2, 82.8%, 65.9%))",
2650
+ variable: "var(--kds-color-nodes-and-variables-warning-border)"
2651
+ }
2652
+ },
2653
+ warning: {
2654
+ light: {
2655
+ h: 31,
2656
+ s: 100,
2657
+ l: 82.5,
2658
+ alpha: 1
2659
+ },
2660
+ dark: {
2661
+ h: 0,
2662
+ s: 0,
2663
+ l: 22,
2664
+ alpha: 1
2665
+ },
2666
+ css: {
2667
+ value: "light-dark(hsl(31, 100%, 82.5%), hsl(0, 0%, 22%))",
2668
+ variable: "var(--kds-color-nodes-and-variables-warning)"
2669
+ }
2670
+ },
2671
+ errorBorder: {
2672
+ light: {
2673
+ h: 348.8,
2674
+ s: 90.9,
2675
+ l: 34.5,
2676
+ alpha: 1
2677
+ },
2678
+ dark: {
2679
+ h: 0,
2680
+ s: 100,
2681
+ l: 66.1,
2682
+ alpha: 1
2683
+ },
2684
+ css: {
2685
+ value: "light-dark(hsl(348.8, 90.9%, 34.5%), hsl(0, 100%, 66.1%))",
2686
+ variable: "var(--kds-color-nodes-and-variables-error-border)"
2687
+ }
2688
+ },
2689
+ error: {
2690
+ light: {
2691
+ h: 1.5,
2692
+ s: 100,
2693
+ l: 92.4,
2694
+ alpha: 1
2695
+ },
2696
+ dark: {
2697
+ h: 0,
2698
+ s: 0,
2699
+ l: 22,
2700
+ alpha: 1
2701
+ },
2702
+ css: {
2703
+ value: "light-dark(hsl(1.5, 100%, 92.4%), hsl(0, 0%, 22%))",
2704
+ variable: "var(--kds-color-nodes-and-variables-error)"
2705
+ }
2706
+ },
2707
+ loadingBorder: {
2708
+ light: {
2709
+ h: 208.3,
2710
+ s: 60.5,
2711
+ l: 33.7,
2712
+ alpha: 1
2713
+ },
2714
+ dark: {
2715
+ h: 214.5,
2716
+ s: 100,
2717
+ l: 84.3,
2718
+ alpha: 1
2719
+ },
2720
+ css: {
2721
+ value: "light-dark(hsl(208.3, 60.5%, 33.7%), hsl(214.5, 100%, 84.3%))",
2722
+ variable: "var(--kds-color-nodes-and-variables-loading-border)"
2723
+ }
2724
+ },
2725
+ loading: {
2726
+ light: {
2727
+ h: 215.7,
2728
+ s: 100,
2729
+ l: 91.8,
2730
+ alpha: 1
2731
+ },
2732
+ dark: {
2733
+ h: 209.4,
2734
+ s: 49.5,
2735
+ l: 20.2,
2736
+ alpha: 1
2737
+ },
2738
+ css: {
2739
+ value: "light-dark(hsl(215.7, 100%, 91.8%), hsl(209.4, 49.5%, 20.2%))",
2740
+ variable: "var(--kds-color-nodes-and-variables-loading)"
2741
+ }
2742
+ },
2743
+ configuration: {
2744
+ light: {
2745
+ h: 64.6,
2746
+ s: 68.6,
2747
+ l: 70,
2748
+ alpha: 1
2749
+ },
2750
+ dark: {
2751
+ h: 69.5,
2752
+ s: 59.5,
2753
+ l: 85.5,
2754
+ alpha: 1
2755
+ },
2756
+ css: {
2757
+ value: "light-dark(hsl(64.6, 68.6%, 70.0%), hsl(69.5, 59.5%, 85.5%))",
2758
+ variable: "var(--kds-color-nodes-and-variables-configuration)"
2759
+ }
2760
+ },
2761
+ quickform: {
2762
+ light: {
2763
+ h: 212.1,
2764
+ s: 78.2,
2765
+ l: 67.6,
2766
+ alpha: 1
2767
+ },
2768
+ dark: {
2769
+ h: 214.5,
2770
+ s: 100,
2771
+ l: 84.3,
2772
+ alpha: 1
2773
+ },
2774
+ css: {
2775
+ value: "light-dark(hsl(212.1, 78.2%, 67.6%), hsl(214.5, 100%, 84.3%))",
2776
+ variable: "var(--kds-color-nodes-and-variables-quickform)"
2777
+ }
2778
+ }
2779
+ },
2780
+ port: {
2781
+ data: {
2782
+ light: {
2783
+ h: 0,
2784
+ s: 0,
2785
+ l: 11.4,
2786
+ alpha: 1
2787
+ },
2788
+ dark: {
2789
+ h: 0,
2790
+ s: 0,
2791
+ l: 94.1,
2792
+ alpha: 1
2793
+ },
2794
+ css: {
2795
+ value: "light-dark(hsl(0, 0%, 11.4%), hsl(0, 0%, 94.1%))",
2796
+ variable: "var(--kds-color-port-data)"
2797
+ }
2798
+ },
2799
+ "flow-variable": {
2800
+ light: {
2801
+ h: 359.6,
2802
+ s: 84.3,
2803
+ l: 62.5,
2804
+ alpha: 1
2805
+ },
2806
+ dark: {
2807
+ h: 359.6,
2808
+ s: 84.3,
2809
+ l: 62.5,
2810
+ alpha: 1
2811
+ },
2812
+ css: {
2813
+ value: "hsl(359.6, 84.3%, 62.5%)",
2814
+ variable: "var(--kds-color-port-flow-variable)"
2815
+ }
2816
+ },
2817
+ "neutral-inverted": {
2818
+ light: {
2819
+ h: 0,
2820
+ s: 0,
2821
+ l: 99,
2822
+ alpha: 1
2823
+ },
2824
+ dark: {
2825
+ h: 0,
2826
+ s: 0,
2827
+ l: 12.9,
2828
+ alpha: 1
2829
+ },
2830
+ css: {
2831
+ value: "light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 12.9%))",
2832
+ variable: "var(--kds-color-port-neutral-inverted)"
2833
+ }
2834
+ }
2835
+ },
2836
+ annotations: {
2837
+ specialNodes: {
2838
+ light: {
2839
+ h: 0,
2840
+ s: 0,
2841
+ l: 72.5,
2842
+ alpha: 1
2843
+ },
2844
+ dark: {
2845
+ h: 0,
2846
+ s: 0,
2847
+ l: 32.2,
2848
+ alpha: 1
2849
+ },
2850
+ css: {
2851
+ value: "light-dark(hsl(0, 0%, 72.5%), hsl(0, 0%, 32.2%))",
2852
+ variable: "var(--kds-color-annotations-special-nodes)"
2853
+ }
2854
+ },
2855
+ specialNodesBold: {
2856
+ light: {
2857
+ h: 0,
2858
+ s: 0,
2859
+ l: 32.2,
2860
+ alpha: 1
2861
+ },
2862
+ dark: {
2863
+ h: 0,
2864
+ s: 0,
2865
+ l: 90.2,
2866
+ alpha: 1
2867
+ },
2868
+ css: {
2869
+ value: "light-dark(hsl(0, 0%, 32.2%), hsl(0, 0%, 90.2%))",
2870
+ variable: "var(--kds-color-annotations-special-nodes-bold)"
2871
+ }
2872
+ },
2873
+ visualizer: {
2874
+ light: {
2875
+ h: 193.1,
2876
+ s: 60.2,
2877
+ l: 43.3,
2878
+ alpha: 1
2879
+ },
2880
+ dark: {
2881
+ h: 191.3,
2882
+ s: 57.1,
2883
+ l: 54.3,
2884
+ alpha: 1
2885
+ },
2886
+ css: {
2887
+ value: "light-dark(hsl(193.1, 60.2%, 43.3%), hsl(191.3, 57.1%, 54.3%))",
2888
+ variable: "var(--kds-color-annotations-visualizer)"
2889
+ }
2890
+ },
2891
+ loadingBold: {
2892
+ light: {
2893
+ h: 208.3,
2894
+ s: 60.5,
2895
+ l: 33.7,
2896
+ alpha: 1
2897
+ },
2898
+ dark: {
2899
+ h: 214.5,
2900
+ s: 100,
2901
+ l: 84.3,
2902
+ alpha: 1
2903
+ },
2904
+ css: {
2905
+ value: "light-dark(hsl(208.3, 60.5%, 33.7%), hsl(214.5, 100%, 84.3%))",
2906
+ variable: "var(--kds-color-annotations-loading-bold)"
2907
+ }
2908
+ },
2909
+ manipulator: {
2910
+ light: {
2911
+ h: 50.8,
2912
+ s: 100,
2913
+ l: 50,
2914
+ alpha: 1
2915
+ },
2916
+ dark: {
2917
+ h: 50.8,
2918
+ s: 100,
2919
+ l: 50,
2920
+ alpha: 1
2921
+ },
2922
+ css: {
2923
+ value: "hsl(50.8, 100%, 50%)",
2924
+ variable: "var(--kds-color-annotations-manipulator)"
2925
+ }
2926
+ },
2927
+ source: {
2928
+ light: {
2929
+ h: 30,
2930
+ s: 80.4,
2931
+ l: 60,
2932
+ alpha: 1
2933
+ },
2934
+ dark: {
2935
+ h: 30,
2936
+ s: 80.4,
2937
+ l: 60,
2938
+ alpha: 1
2939
+ },
2940
+ css: {
2941
+ value: "hsl(30, 80.4%, 60%)",
2942
+ variable: "var(--kds-color-annotations-source)"
2943
+ }
2944
+ },
2945
+ sink: {
2946
+ light: {
2947
+ h: 359.6,
2948
+ s: 84.3,
2949
+ l: 62.5,
2950
+ alpha: 1
2951
+ },
2952
+ dark: {
2953
+ h: 0,
2954
+ s: 100,
2955
+ l: 66.1,
2956
+ alpha: 1
2957
+ },
2958
+ css: {
2959
+ value: "light-dark(hsl(359.6, 84.3%, 62.5%), hsl(0, 100%, 66.1%))",
2960
+ variable: "var(--kds-color-annotations-sink)"
2961
+ }
2962
+ },
2963
+ learner: {
2964
+ light: {
2965
+ h: 67.3,
2966
+ s: 67.8,
2967
+ l: 54.9,
2968
+ alpha: 1
2969
+ },
2970
+ dark: {
2971
+ h: 65.4,
2972
+ s: 68.5,
2973
+ l: 65.1,
2974
+ alpha: 1
2975
+ },
2976
+ css: {
2977
+ value: "light-dark(hsl(67.3, 67.8%, 54.9%), hsl(65.4, 68.5%, 65.1%))",
2978
+ variable: "var(--kds-color-annotations-learner)"
2979
+ }
2980
+ },
2981
+ predictor: {
2982
+ light: {
2983
+ h: 106.5,
2984
+ s: 42.6,
2985
+ l: 54.9,
2986
+ alpha: 1
2987
+ },
2988
+ dark: {
2989
+ h: 109,
2990
+ s: 47.2,
2991
+ l: 61.4,
2992
+ alpha: 1
2993
+ },
2994
+ css: {
2995
+ value: "light-dark(hsl(106.5, 42.6%, 54.9%), hsl(109, 47.2%, 61.4%))",
2996
+ variable: "var(--kds-color-annotations-predictor)"
2997
+ }
2998
+ },
2999
+ container: {
3000
+ light: {
3001
+ h: 66.5,
3002
+ s: 64.4,
3003
+ l: 80.2,
3004
+ alpha: 1
3005
+ },
3006
+ dark: {
3007
+ h: 69.5,
3008
+ s: 59.5,
3009
+ l: 85.5,
3010
+ alpha: 1
3011
+ },
3012
+ css: {
3013
+ value: "light-dark(hsl(66.5, 64.4%, 80.2%), hsl(69.5, 59.5%, 85.5%))",
3014
+ variable: "var(--kds-color-annotations-container)"
3015
+ }
3016
+ },
3017
+ "flow-variable": {
3018
+ light: {
3019
+ h: 173.4,
3020
+ s: 37.1,
3021
+ l: 38.6,
3022
+ alpha: 1
3023
+ },
3024
+ dark: {
3025
+ h: 171.8,
3026
+ s: 27,
3027
+ l: 47.8,
3028
+ alpha: 1
3029
+ },
3030
+ css: {
3031
+ value: "light-dark(hsl(173.4, 37.1%, 38.6%), hsl(171.8, 27%, 47.8%))",
3032
+ variable: "var(--kds-color-annotations-flow-variable)"
3033
+ }
3034
+ },
3035
+ tealDark: {
3036
+ light: {
3037
+ h: 176.7,
3038
+ s: 82,
3039
+ l: 17.5,
3040
+ alpha: 1
3041
+ },
3042
+ dark: {
3043
+ h: 176.1,
3044
+ s: 66.7,
3045
+ l: 22.4,
3046
+ alpha: 1
3047
+ },
3048
+ css: {
3049
+ value: "light-dark(hsl(176.7, 82%, 17.5%), hsl(176.1, 66.7%, 22.4%))",
3050
+ variable: "var(--kds-color-annotations-teal-dark)"
3051
+ }
3052
+ },
3053
+ other: {
3054
+ light: {
3055
+ h: 29,
3056
+ s: 43,
3057
+ l: 58,
3058
+ alpha: 1
3059
+ },
3060
+ dark: {
3061
+ h: 30,
3062
+ s: 47,
3063
+ l: 68,
3064
+ alpha: 1
3065
+ },
3066
+ css: {
3067
+ value: "light-dark(hsl(29, 43%, 58%), hsl(30, 47%, 68%))",
3068
+ variable: "var(--kds-color-annotations-other)"
3069
+ }
3070
+ },
3071
+ loop: {
3072
+ light: {
3073
+ h: 25,
3074
+ s: 30,
3075
+ l: 35,
3076
+ alpha: 1
3077
+ },
3078
+ dark: {
3079
+ h: 27,
3080
+ s: 35,
3081
+ l: 44,
3082
+ alpha: 1
3083
+ },
3084
+ css: {
3085
+ value: "light-dark(hsl(25, 30%, 35%), hsl(27, 35%, 44%))",
3086
+ variable: "var(--kds-color-annotations-loop)"
3087
+ }
3088
+ }
3089
+ },
3090
+ state: {
3091
+ error: {
3092
+ light: {
3093
+ h: 353,
3094
+ s: 74.7,
3095
+ l: 44.9,
3096
+ alpha: 1
3097
+ },
3098
+ dark: {
3099
+ h: 347.6,
3100
+ s: 97.1,
3101
+ l: 27.3,
3102
+ alpha: 1
3103
+ },
3104
+ css: {
3105
+ value: "light-dark(hsl(353, 74.7%, 44.9%), hsl(347.6, 97.1%, 27.3%))",
3106
+ variable: "var(--kds-color-state-error)"
3107
+ }
3108
+ },
3109
+ "error-border": {
3110
+ light: {
3111
+ h: 348,
3112
+ s: 94.3,
3113
+ l: 20.8,
3114
+ alpha: 1
3115
+ },
3116
+ dark: {
3117
+ h: 2.6,
3118
+ s: 100,
3119
+ l: 72.4,
3120
+ alpha: 1
3121
+ },
3122
+ css: {
3123
+ value: "light-dark(hsl(348, 94.3%, 20.8%), hsl(2.6, 100%, 72.4%))",
3124
+ variable: "var(--kds-color-state-error-border)"
3125
+ }
3126
+ },
3127
+ warning: {
3128
+ light: {
3129
+ h: 47.6,
3130
+ s: 100,
3131
+ l: 67.6,
3132
+ alpha: 1
3133
+ },
3134
+ dark: {
3135
+ h: 43.9,
3136
+ s: 100,
3137
+ l: 26.3,
3138
+ alpha: 1
3139
+ },
3140
+ css: {
3141
+ value: "light-dark(hsl(47.6, 100%, 67.6%), hsl(43.9, 100%, 26.3%))",
3142
+ variable: "var(--kds-color-state-warning)"
3143
+ }
3144
+ },
3145
+ "warning-border": {
3146
+ light: {
3147
+ h: 19,
3148
+ s: 63.1,
3149
+ l: 38.2,
3150
+ alpha: 1
3151
+ },
3152
+ dark: {
3153
+ h: 49.1,
3154
+ s: 99.1,
3155
+ l: 43.7,
3156
+ alpha: 1
3157
+ },
3158
+ css: {
3159
+ value: "light-dark(hsl(19, 63.1%, 38.2%), hsl(49.1, 99.1%, 43.7%))",
3160
+ variable: "var(--kds-color-state-warning-border)"
3161
+ }
3162
+ },
3163
+ success: {
3164
+ light: {
3165
+ h: 106.5,
3166
+ s: 42.6,
3167
+ l: 54.9,
3168
+ alpha: 1
3169
+ },
3170
+ dark: {
3171
+ h: 107.6,
3172
+ s: 46,
3173
+ l: 37.1,
3174
+ alpha: 1
3175
+ },
3176
+ css: {
3177
+ value: "light-dark(hsl(106.5, 42.6%, 54.9%), hsl(107.6, 46%, 37.1%))",
3178
+ variable: "var(--kds-color-state-success)"
3179
+ }
3180
+ },
3181
+ "success-border": {
3182
+ light: {
3183
+ h: 116.1,
3184
+ s: 46.6,
3185
+ l: 25.7,
3186
+ alpha: 1
3187
+ },
3188
+ dark: {
3189
+ h: 106.5,
3190
+ s: 42.6,
3191
+ l: 54.9,
3192
+ alpha: 1
3193
+ },
3194
+ css: {
3195
+ value: "light-dark(hsl(116.1, 46.6%, 25.7%), hsl(106.5, 42.6%, 54.9%))",
3196
+ variable: "var(--kds-color-state-success-border)"
3197
+ }
3198
+ },
3199
+ loading: {
3200
+ light: {
3201
+ h: 208.3,
3202
+ s: 60.5,
3203
+ l: 33.7,
3204
+ alpha: 1
3205
+ },
3206
+ dark: {
3207
+ h: 214.5,
3208
+ s: 100,
3209
+ l: 84.3,
3210
+ alpha: 1
3211
+ },
3212
+ css: {
3213
+ value: "light-dark(hsl(208.3, 60.5%, 33.7%), hsl(214.5, 100%, 84.3%))",
3214
+ variable: "var(--kds-color-state-loading)"
3215
+ }
3216
+ },
3217
+ inactive: {
3218
+ light: {
3219
+ h: 0,
3220
+ s: 0,
3221
+ l: 99,
3222
+ alpha: 1
3223
+ },
3224
+ dark: {
3225
+ h: 0,
3226
+ s: 0,
3227
+ l: 11.4,
3228
+ alpha: 1
3229
+ },
3230
+ css: {
3231
+ value: "light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 11.4%))",
3232
+ variable: "var(--kds-color-state-inactive)"
3233
+ }
3234
+ },
3235
+ "inactive-border": {
3236
+ light: {
3237
+ h: 0,
3238
+ s: 0,
3239
+ l: 90.2,
3240
+ alpha: 1
3241
+ },
3242
+ dark: {
3243
+ h: 0,
3244
+ s: 0,
3245
+ l: 32.2,
3246
+ alpha: 1
3247
+ },
3248
+ css: {
3249
+ value: "light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 32.2%))",
3250
+ variable: "var(--kds-color-state-inactive-border)"
3251
+ }
3252
+ },
3253
+ disabled: {
3254
+ light: {
3255
+ h: 0,
3256
+ s: 0,
3257
+ l: 72.5,
3258
+ alpha: 1
3259
+ },
3260
+ dark: {
3261
+ h: 0,
3262
+ s: 0,
3263
+ l: 22,
3264
+ alpha: 1
3265
+ },
3266
+ css: {
3267
+ value: "light-dark(hsl(0, 0%, 72.5%), hsl(0, 0%, 22%))",
3268
+ variable: "var(--kds-color-state-disabled)"
3269
+ }
3270
+ },
3271
+ "disabled-border": {
3272
+ light: {
3273
+ h: 0,
3274
+ s: 0,
3275
+ l: 48.2,
3276
+ alpha: 1
3277
+ },
3278
+ dark: {
3279
+ h: 0,
3280
+ s: 0,
3281
+ l: 48.2,
3282
+ alpha: 1
3283
+ },
3284
+ css: {
3285
+ value: "hsl(0, 0%, 48.2%)",
3286
+ variable: "var(--kds-color-state-disabled-border)"
3287
+ }
3288
+ },
3289
+ background: {
3290
+ light: {
3291
+ h: 0,
3292
+ s: 0,
3293
+ l: 90.2,
3294
+ alpha: 1
3295
+ },
3296
+ dark: {
3297
+ h: 0,
3298
+ s: 0,
3299
+ l: 32.2,
3300
+ alpha: 1
3301
+ },
3302
+ css: {
3303
+ value: "light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 32.2%))",
3304
+ variable: "var(--kds-color-state-background)"
3305
+ }
3306
+ }
3307
+ },
3308
+ connector: {
3309
+ data: {
3310
+ light: {
3311
+ h: 0,
3312
+ s: 0,
3313
+ l: 15.7,
3314
+ alpha: 1
3315
+ },
3316
+ dark: {
3317
+ h: 0,
3318
+ s: 0,
3319
+ l: 94.1,
3320
+ alpha: 1
3321
+ },
3322
+ css: {
3323
+ value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
3324
+ variable: "var(--kds-color-connector-data)"
3325
+ }
3326
+ },
3327
+ "flow-variable": {
3328
+ light: {
3329
+ h: 359.6,
3330
+ s: 84.3,
3331
+ l: 62.5,
3332
+ alpha: 1
3333
+ },
3334
+ dark: {
3335
+ h: 359.6,
3336
+ s: 84.3,
3337
+ l: 62.5,
3338
+ alpha: 1
3339
+ },
3340
+ css: {
3341
+ value: "hsl(359.6, 84.3%, 62.5%)",
3342
+ variable: "var(--kds-color-connector-flow-variable)"
3343
+ }
3344
+ }
3345
+ },
3346
+ elevation: {
3347
+ top: {
3348
+ light: {
3349
+ h: 210,
3350
+ s: 0,
3351
+ l: 72.5,
3352
+ alpha: .32
3353
+ },
3354
+ dark: {
3355
+ h: 330,
3356
+ s: 0,
3357
+ l: 10.2,
3358
+ alpha: .9
3359
+ },
3360
+ css: {
3361
+ value: "light-dark(hsl(210 0% 72.5% / 0.32), hsl(330 0% 10.2% / 0.9))",
3362
+ variable: "var(--kds-color-elevation-top)"
3363
+ }
3364
+ },
3365
+ middle: {
3366
+ light: {
3367
+ h: 180,
3368
+ s: 0,
3369
+ l: 32.2,
3370
+ alpha: .14
3371
+ },
3372
+ dark: {
3373
+ h: 330,
3374
+ s: 0,
3375
+ l: 10.2,
3376
+ alpha: .94
3377
+ },
3378
+ css: {
3379
+ value: "light-dark(hsl(180 0% 32.2% / 0.14), hsl(330 0% 10.2% / 0.94))",
3380
+ variable: "var(--kds-color-elevation-middle)"
3381
+ }
3382
+ },
3383
+ bottom: {
3384
+ light: {
3385
+ h: 180,
3386
+ s: 0,
3387
+ l: 32.2,
3388
+ alpha: .12
3389
+ },
3390
+ dark: {
3391
+ h: 330,
3392
+ s: 0,
3393
+ l: 10.2,
3394
+ alpha: .98
3395
+ },
3396
+ css: {
3397
+ value: "light-dark(hsl(180 0% 32.2% / 0.12), hsl(330 0% 10.2% / 0.98))",
3398
+ variable: "var(--kds-color-elevation-bottom)"
3399
+ }
3400
+ },
3401
+ knob: {
3402
+ light: {
3403
+ h: 180,
3404
+ s: 0,
3405
+ l: 32.2,
3406
+ alpha: .5
3407
+ },
3408
+ dark: {
3409
+ h: 330,
3410
+ s: 0,
3411
+ l: 10.2,
3412
+ alpha: .6
3413
+ },
3414
+ css: {
3415
+ value: "light-dark(hsl(180 0% 32.2% / 0.5), hsl(330 0% 10.2% / 0.6))",
3416
+ variable: "var(--kds-color-elevation-knob)"
3417
+ }
3418
+ }
3419
+ },
3420
+ DesktopHeader: {
3421
+ background: {
3422
+ default: {
3423
+ light: {
3424
+ h: 0,
3425
+ s: 0,
3426
+ l: 10.2,
3427
+ alpha: 1
3428
+ },
3429
+ dark: {
3430
+ h: 0,
3431
+ s: 0,
3432
+ l: 10.2,
3433
+ alpha: 1
3434
+ },
3435
+ css: {
3436
+ value: "hsl(0, 0%, 10.2%)",
3437
+ variable: "var(--kds-color-desktop-header-background-default)"
3438
+ }
3439
+ },
3440
+ muted: {
3441
+ light: {
3442
+ h: 0,
3443
+ s: 0,
3444
+ l: 98,
3445
+ alpha: 1
3446
+ },
3447
+ dark: {
3448
+ h: 0,
3449
+ s: 0,
3450
+ l: 15.7,
3451
+ alpha: 1
3452
+ },
3453
+ css: {
3454
+ value: "light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%))",
3455
+ variable: "var(--kds-color-desktop-header-background-muted)"
3456
+ }
3457
+ },
3458
+ accent: {
3459
+ light: {
3460
+ h: 0,
3461
+ s: 0,
3462
+ l: 98,
3463
+ alpha: 1
3464
+ },
3465
+ dark: {
3466
+ h: 0,
3467
+ s: 0,
3468
+ l: 15.7,
3469
+ alpha: 1
3470
+ },
3471
+ css: {
3472
+ value: "light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%))",
3473
+ variable: "var(--kds-color-desktop-header-background-accent)"
3474
+ }
3475
+ }
3476
+ },
3477
+ "text-and-icon": {
3478
+ neutral: {
3479
+ light: {
3480
+ h: 0,
3481
+ s: 0,
3482
+ l: 15.7,
3483
+ alpha: 1
3484
+ },
3485
+ dark: {
3486
+ h: 0,
3487
+ s: 0,
3488
+ l: 94.1,
3489
+ alpha: 1
3490
+ },
3491
+ css: {
3492
+ value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
3493
+ variable: "var(--kds-color-desktop-header-text-and-icon-neutral)"
3494
+ }
3495
+ },
3496
+ muted: {
3497
+ light: {
3498
+ h: 0,
3499
+ s: 0,
3500
+ l: 32.2,
3501
+ alpha: 1
3502
+ },
3503
+ dark: {
3504
+ h: 0,
3505
+ s: 0,
3506
+ l: 90.2,
3507
+ alpha: 1
3508
+ },
3509
+ css: {
3510
+ value: "light-dark(hsl(0, 0%, 32.2%), hsl(0, 0%, 90.2%))",
3511
+ variable: "var(--kds-color-desktop-header-text-and-icon-muted)"
3512
+ }
3513
+ }
3514
+ },
3515
+ border: { default: {
3516
+ light: {
3517
+ h: 330,
3518
+ s: 0,
3519
+ l: 10.2,
3520
+ alpha: .1
3521
+ },
3522
+ dark: {
3523
+ h: 330,
3524
+ s: 0,
3525
+ l: 99,
3526
+ alpha: .1
3527
+ },
3528
+ css: {
3529
+ value: "light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1))",
3530
+ variable: "var(--kds-color-desktop-header-border-default)"
3531
+ }
3532
+ } }
3533
+ },
3534
+ TableHeader: { background: { default: {
3535
+ light: {
3536
+ h: 0,
3537
+ s: 0,
3538
+ l: 99,
3539
+ alpha: 1
3540
+ },
3541
+ dark: {
3542
+ h: 0,
3543
+ s: 0,
3544
+ l: 99,
3545
+ alpha: 1
3546
+ },
3547
+ css: {
3548
+ value: "hsl(0, 0%, 99%)",
3549
+ variable: "var(--kds-color-table-header-background-default)"
3550
+ }
3551
+ } } },
3552
+ ToggleSwitch: {
3553
+ knob: {
3554
+ initial: {
3555
+ light: {
3556
+ h: 0,
3557
+ s: 0,
3558
+ l: 99,
3559
+ alpha: 1
3560
+ },
3561
+ dark: {
3562
+ h: 0,
3563
+ s: 0,
3564
+ l: 99,
3565
+ alpha: 1
3566
+ },
3567
+ css: {
3568
+ value: "hsl(0, 0%, 99%)",
3569
+ variable: "var(--kds-color-toggle-switch-knob-initial)"
3570
+ }
3571
+ },
3572
+ disabled: {
3573
+ light: {
3574
+ h: 0,
3575
+ s: 0,
3576
+ l: 90.2,
3577
+ alpha: 1
3578
+ },
3579
+ dark: {
3580
+ h: 0,
3581
+ s: 0,
3582
+ l: 90.2,
3583
+ alpha: 1
3584
+ },
3585
+ css: {
3586
+ value: "hsl(0, 0%, 90.2%)",
3587
+ variable: "var(--kds-color-toggle-switch-knob-disabled)"
3588
+ }
3589
+ }
3590
+ },
3591
+ icon: {
3592
+ on: {
3593
+ light: {
3594
+ h: 176.1,
3595
+ s: 66.7,
3596
+ l: 22.4,
3597
+ alpha: 1
3598
+ },
3599
+ dark: {
3600
+ h: 176.1,
3601
+ s: 66.7,
3602
+ l: 22.4,
3603
+ alpha: 1
3604
+ },
3605
+ css: {
3606
+ value: "hsl(176.1, 66.7%, 22.4%)",
3607
+ variable: "var(--kds-color-toggle-switch-icon-on)"
3608
+ }
3609
+ },
3610
+ off: {
3611
+ light: {
3612
+ h: 0,
3613
+ s: 0,
3614
+ l: 43,
3615
+ alpha: 1
3616
+ },
3617
+ dark: {
3618
+ h: 0,
3619
+ s: 0,
3620
+ l: 43,
3621
+ alpha: 1
3622
+ },
3623
+ css: {
3624
+ value: "hsl(0, 0%, 43%)",
3625
+ variable: "var(--kds-color-toggle-switch-icon-off)"
3626
+ }
3627
+ },
3628
+ disabled: {
3629
+ light: {
3630
+ h: 0,
3631
+ s: 0,
3632
+ l: 64,
3633
+ alpha: 1
3634
+ },
3635
+ dark: {
3636
+ h: 0,
3637
+ s: 0,
3638
+ l: 64,
3639
+ alpha: 1
3640
+ },
3641
+ css: {
3642
+ value: "hsl(0, 0%, 64%)",
3643
+ variable: "var(--kds-color-toggle-switch-icon-disabled)"
3644
+ }
3645
+ }
3646
+ }
3647
+ },
3648
+ LoadingSpinner: {
3649
+ progress: {
3650
+ onPrimary: {
3651
+ light: {
3652
+ h: 165.6,
3653
+ s: 67.6,
3654
+ l: 92.7,
3655
+ alpha: 1
3656
+ },
3657
+ dark: {
3658
+ h: 165.6,
3659
+ s: 67.6,
3660
+ l: 92.7,
3661
+ alpha: 1
3662
+ },
3663
+ css: {
3664
+ value: "hsl(165.6 67.6% 92.7%)",
3665
+ variable: "var(--kds-color-loading-spinner-progress-on-primary)"
3666
+ }
3667
+ },
3668
+ onSurface: {
3669
+ light: {
3670
+ h: 0,
3671
+ s: 0,
3672
+ l: 15.7,
3673
+ alpha: 1
3674
+ },
3675
+ dark: {
3676
+ h: 0,
3677
+ s: 0,
3678
+ l: 94.1,
3679
+ alpha: 1
3680
+ },
3681
+ css: {
3682
+ value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
3683
+ variable: "var(--kds-color-loading-spinner-progress-on-surface)"
3684
+ }
3685
+ }
3686
+ },
3687
+ track: {
3688
+ onPrimary: {
3689
+ light: {
3690
+ h: 165.6,
3691
+ s: 67.6,
3692
+ l: 92.7,
3693
+ alpha: .24
3694
+ },
3695
+ dark: {
3696
+ h: 165.6,
3697
+ s: 67.6,
3698
+ l: 92.7,
3699
+ alpha: .24
3700
+ },
3701
+ css: {
3702
+ value: "hsl(165.6 67.6% 92.7% / 0.24)",
3703
+ variable: "var(--kds-color-loading-spinner-track-on-primary)"
3704
+ }
3705
+ },
3706
+ onSurface: {
3707
+ light: {
3708
+ h: 332.73,
3709
+ s: 0,
3710
+ l: 15.7,
3711
+ alpha: .24
3712
+ },
3713
+ dark: {
3714
+ h: 240,
3715
+ s: 0,
3716
+ l: 94.1,
3717
+ alpha: .24
3718
+ },
3719
+ css: {
3720
+ value: "light-dark(hsl(332.73 0% 15.7% / 0.24), hsl(240 0% 94.1% / 0.24))",
3721
+ variable: "var(--kds-color-loading-spinner-track-on-surface)"
3722
+ }
3723
+ }
3724
+ }
3725
+ },
3726
+ Tooltip: {
3727
+ background: { default: {
3728
+ light: {
3729
+ h: 0,
3730
+ s: 0,
3731
+ l: 12.9,
3732
+ alpha: 1
3733
+ },
3734
+ dark: {
3735
+ h: 0,
3736
+ s: 0,
3737
+ l: 22,
3738
+ alpha: 1
3739
+ },
3740
+ css: {
3741
+ value: "light-dark(hsl(0, 0%, 12.9%), hsl(0, 0%, 22%))",
3742
+ variable: "var(--kds-color-tooltip-background-default)"
3743
+ }
3744
+ } },
3745
+ "text-and-icon": { neutral: {
3746
+ light: {
3747
+ h: 0,
3748
+ s: 0,
3749
+ l: 98,
3750
+ alpha: 1
3751
+ },
3752
+ dark: {
3753
+ h: 0,
3754
+ s: 0,
3755
+ l: 98,
3756
+ alpha: 1
3757
+ },
3758
+ css: {
3759
+ value: "hsl(0, 0%, 98%)",
3760
+ variable: "var(--kds-color-tooltip-text-and-icon-neutral)"
3761
+ }
3762
+ } }
3763
+ },
3764
+ TextHighlight: { background: { default: {
3765
+ light: {
3766
+ h: 212.1,
3767
+ s: 78.2,
3768
+ l: 67.6,
3769
+ alpha: .6
3770
+ },
3771
+ dark: {
3772
+ h: 212.1,
3773
+ s: 78.2,
3774
+ l: 67.6,
3775
+ alpha: .6
3776
+ },
3777
+ css: {
3778
+ value: "hsl(212.1 78.2% 67.6% / 0.6)",
3779
+ variable: "var(--kds-color-text-highlight-background-default)"
3780
+ }
3781
+ } } },
3782
+ Avatar: {
3783
+ background: {
3784
+ red: {
3785
+ light: {
3786
+ h: 3.5,
3787
+ s: 100,
3788
+ l: 79.6,
3789
+ alpha: 1
3790
+ },
3791
+ dark: {
3792
+ h: 3.5,
3793
+ s: 100,
3794
+ l: 79.6,
3795
+ alpha: 1
3796
+ },
3797
+ css: {
3798
+ value: "hsl(3.5, 100%, 79.6%)",
3799
+ variable: "var(--kds-color-avatar-background-red)"
3800
+ }
3801
+ },
3802
+ orange: {
3803
+ light: {
3804
+ h: 31.2,
3805
+ s: 82.8,
3806
+ l: 65.9,
3807
+ alpha: 1
3808
+ },
3809
+ dark: {
3810
+ h: 31.2,
3811
+ s: 82.8,
3812
+ l: 65.9,
3813
+ alpha: 1
3814
+ },
3815
+ css: {
3816
+ value: "hsl(31.2, 82.8%, 65.9%)",
3817
+ variable: "var(--kds-color-avatar-background-orange)"
3818
+ }
3819
+ },
3820
+ yellow: {
3821
+ light: {
3822
+ h: 50.8,
3823
+ s: 100,
3824
+ l: 50,
3825
+ alpha: 1
3826
+ },
3827
+ dark: {
3828
+ h: 50.8,
3829
+ s: 100,
3830
+ l: 50,
3831
+ alpha: 1
3832
+ },
3833
+ css: {
3834
+ value: "hsl(50.8, 100%, 50%)",
3835
+ variable: "var(--kds-color-avatar-background-yellow)"
3836
+ }
3837
+ },
3838
+ green: {
3839
+ light: {
3840
+ h: 109,
3841
+ s: 47.2,
3842
+ l: 61.4,
3843
+ alpha: 1
3844
+ },
3845
+ dark: {
3846
+ h: 109,
3847
+ s: 47.2,
3848
+ l: 61.4,
3849
+ alpha: 1
3850
+ },
3851
+ css: {
3852
+ value: "hsl(109, 47.2%, 61.4%)",
3853
+ variable: "var(--kds-color-avatar-background-green)"
3854
+ }
3855
+ },
3856
+ teal: {
3857
+ light: {
3858
+ h: 169.8,
3859
+ s: 30.6,
3860
+ l: 66.1,
3861
+ alpha: 1
3862
+ },
3863
+ dark: {
3864
+ h: 169.8,
3865
+ s: 30.6,
3866
+ l: 66.1,
3867
+ alpha: 1
3868
+ },
3869
+ css: {
3870
+ value: "hsl(169.8, 30.6%, 66.1%)",
3871
+ variable: "var(--kds-color-avatar-background-teal)"
3872
+ }
3873
+ },
3874
+ blue: {
3875
+ light: {
3876
+ h: 213.6,
3877
+ s: 91.6,
3878
+ l: 76.7,
3879
+ alpha: 1
3880
+ },
3881
+ dark: {
3882
+ h: 213.6,
3883
+ s: 91.6,
3884
+ l: 76.7,
3885
+ alpha: 1
3886
+ },
3887
+ css: {
3888
+ value: "hsl(213.6, 91.6%, 76.7%)",
3889
+ variable: "var(--kds-color-avatar-background-blue)"
3890
+ }
3891
+ },
3892
+ purple: {
3893
+ light: {
3894
+ h: 320,
3895
+ s: 44.7,
3896
+ l: 81.6,
3897
+ alpha: 1
3898
+ },
3899
+ dark: {
3900
+ h: 320,
3901
+ s: 44.7,
3902
+ l: 81.6,
3903
+ alpha: 1
3904
+ },
3905
+ css: {
3906
+ value: "hsl(320.0, 44.7%, 81.6%)",
3907
+ variable: "var(--kds-color-avatar-background-purple)"
3908
+ }
3909
+ },
3910
+ aquamarine: {
3911
+ light: {
3912
+ h: 185.8,
3913
+ s: 49.2,
3914
+ l: 87.6,
3915
+ alpha: 1
3916
+ },
3917
+ dark: {
3918
+ h: 185.8,
3919
+ s: 49.2,
3920
+ l: 87.6,
3921
+ alpha: 1
3922
+ },
3923
+ css: {
3924
+ value: "hsl(185.8, 49.2%, 87.6%)",
3925
+ variable: "var(--kds-color-avatar-background-aquamarine)"
3926
+ }
3927
+ },
3928
+ grassgreen: {
3929
+ light: {
3930
+ h: 63.4,
3931
+ s: 68.5,
3932
+ l: 75.1,
3933
+ alpha: 1
3934
+ },
3935
+ dark: {
3936
+ h: 63.4,
3937
+ s: 68.5,
3938
+ l: 75.1,
3939
+ alpha: 1
3940
+ },
3941
+ css: {
3942
+ value: "hsl(63.4, 68.5%, 75.1%)",
3943
+ variable: "var(--kds-color-avatar-background-grassgreen)"
3944
+ }
3945
+ },
3946
+ brown: {
3947
+ light: {
3948
+ h: 30,
3949
+ s: 47,
3950
+ l: 68,
3951
+ alpha: 1
3952
+ },
3953
+ dark: {
3954
+ h: 30,
3955
+ s: 47,
3956
+ l: 68,
3957
+ alpha: 1
3958
+ },
3959
+ css: {
3960
+ value: "hsl(30, 47%, 68%)",
3961
+ variable: "var(--kds-color-avatar-background-brown)"
3962
+ }
3963
+ },
3964
+ empty: {
3965
+ light: {
3966
+ h: 330,
3967
+ s: 0,
3968
+ l: 94.521,
3969
+ alpha: 1
3970
+ },
3971
+ dark: {
3972
+ h: 330,
3973
+ s: 0,
3974
+ l: 30.187,
3975
+ alpha: 1
3976
+ },
3977
+ css: {
3978
+ value: "light-dark(hsl(330 0% 94.521%), hsl(330 0% 30.187%))",
3979
+ variable: "var(--kds-color-avatar-background-empty)"
3980
+ }
3981
+ }
3982
+ },
3983
+ "text-and-icon": {
3984
+ red: {
3985
+ light: {
3986
+ h: 348,
3987
+ s: 94.3,
3988
+ l: 20.8,
3989
+ alpha: 1
3990
+ },
3991
+ dark: {
3992
+ h: 348,
3993
+ s: 94.3,
3994
+ l: 20.8,
3995
+ alpha: 1
3996
+ },
3997
+ css: {
3998
+ value: "hsl(348, 94.3%, 20.8%)",
3999
+ variable: "var(--kds-color-avatar-text-and-icon-red)"
4000
+ }
4001
+ },
4002
+ orange: {
4003
+ light: {
4004
+ h: 13.1,
4005
+ s: 66.1,
4006
+ l: 23.1,
4007
+ alpha: 1
4008
+ },
4009
+ dark: {
4010
+ h: 13.1,
4011
+ s: 66.1,
4012
+ l: 23.1,
4013
+ alpha: 1
4014
+ },
4015
+ css: {
4016
+ value: "hsl(13.1, 66.1%, 23.1%)",
4017
+ variable: "var(--kds-color-avatar-text-and-icon-orange)"
4018
+ }
4019
+ },
4020
+ yellow: {
4021
+ light: {
4022
+ h: 44.3,
4023
+ s: 94.2,
4024
+ l: 13.5,
4025
+ alpha: 1
4026
+ },
4027
+ dark: {
4028
+ h: 44.3,
4029
+ s: 94.2,
4030
+ l: 13.5,
4031
+ alpha: 1
4032
+ },
4033
+ css: {
4034
+ value: "hsl(44.3, 94.2%, 13.5%)",
4035
+ variable: "var(--kds-color-avatar-text-and-icon-yellow)"
4036
+ }
4037
+ },
4038
+ green: {
4039
+ light: {
4040
+ h: 132.3,
4041
+ s: 52,
4042
+ l: 14.7,
4043
+ alpha: 1
4044
+ },
4045
+ dark: {
4046
+ h: 132.3,
4047
+ s: 52,
4048
+ l: 14.7,
4049
+ alpha: 1
4050
+ },
4051
+ css: {
4052
+ value: "hsl(132.3, 52%, 14.7%)",
4053
+ variable: "var(--kds-color-avatar-text-and-icon-green)"
4054
+ }
4055
+ },
4056
+ teal: {
4057
+ light: {
4058
+ h: 174.5,
4059
+ s: 93.2,
4060
+ l: 11.6,
4061
+ alpha: 1
4062
+ },
4063
+ dark: {
4064
+ h: 174.5,
4065
+ s: 93.2,
4066
+ l: 11.6,
4067
+ alpha: 1
4068
+ },
4069
+ css: {
4070
+ value: "hsl(174.5, 93.2%, 11.6%)",
4071
+ variable: "var(--kds-color-avatar-text-and-icon-teal)"
4072
+ }
4073
+ },
4074
+ blue: {
4075
+ light: {
4076
+ h: 209.4,
4077
+ s: 49.5,
4078
+ l: 20.2,
4079
+ alpha: 1
4080
+ },
4081
+ dark: {
4082
+ h: 209.4,
4083
+ s: 49.5,
4084
+ l: 20.2,
4085
+ alpha: 1
4086
+ },
4087
+ css: {
4088
+ value: "hsl(209.4, 49.5%, 20.2%)",
4089
+ variable: "var(--kds-color-avatar-text-and-icon-blue)"
4090
+ }
4091
+ },
4092
+ purple: {
4093
+ light: {
4094
+ h: 295.5,
4095
+ s: 33.9,
4096
+ l: 23.1,
4097
+ alpha: 1
4098
+ },
4099
+ dark: {
4100
+ h: 295.5,
4101
+ s: 33.9,
4102
+ l: 23.1,
4103
+ alpha: 1
4104
+ },
4105
+ css: {
4106
+ value: "hsl(295.5, 33.9%, 23.1%)",
4107
+ variable: "var(--kds-color-avatar-text-and-icon-purple)"
4108
+ }
4109
+ },
4110
+ aquamarine: {
4111
+ light: {
4112
+ h: 200.9,
4113
+ s: 63.2,
4114
+ l: 26.7,
4115
+ alpha: 1
4116
+ },
4117
+ dark: {
4118
+ h: 200.9,
4119
+ s: 63.2,
4120
+ l: 26.7,
4121
+ alpha: 1
4122
+ },
4123
+ css: {
4124
+ value: "hsl(200.9, 63.2%, 26.7%)",
4125
+ variable: "var(--kds-color-avatar-text-and-icon-aquamarine)"
4126
+ }
4127
+ },
4128
+ grassgreen: {
4129
+ light: {
4130
+ h: 72.2,
4131
+ s: 39.2,
4132
+ l: 24.5,
4133
+ alpha: 1
4134
+ },
4135
+ dark: {
4136
+ h: 72.2,
4137
+ s: 39.2,
4138
+ l: 24.5,
4139
+ alpha: 1
4140
+ },
4141
+ css: {
4142
+ value: "hsl(72.2, 39.2%, 24.5%)",
4143
+ variable: "var(--kds-color-avatar-text-and-icon-grassgreen)"
4144
+ }
4145
+ },
4146
+ brown: {
4147
+ light: {
4148
+ h: 23,
4149
+ s: 27,
4150
+ l: 24,
4151
+ alpha: 1
4152
+ },
4153
+ dark: {
4154
+ h: 23,
4155
+ s: 27,
4156
+ l: 24,
4157
+ alpha: 1
4158
+ },
4159
+ css: {
4160
+ value: "hsl(23, 27%, 24%)",
4161
+ variable: "var(--kds-color-avatar-text-and-icon-brown)"
4162
+ }
4163
+ }
4164
+ }
4165
+ }
4166
+ };
4167
+ //#endregion
4168
+ //#region ../styles/dist/tokens/ts/font.js
6
4169
  /**
7
4170
  * Do not edit directly, this file was auto-generated
8
4171
  * from the design token sources in src/tokens.
@@ -960,6 +5123,10 @@ var _hoisted_4 = {
960
5123
  class: "title"
961
5124
  };
962
5125
  var _hoisted_5 = { class: "action-buttons" };
5126
+ var _hoisted_6 = {
5127
+ key: 1,
5128
+ class: "footer"
5129
+ };
963
5130
  var INITIAL_LINE_HEIGHT = 18;
964
5131
  var EXTRA_PADDING = 3;
965
5132
  var DEFAULT_OVERVIEW_RULER_LANES = 3;
@@ -1124,37 +5291,41 @@ getEditor: () => editorInstance });
1124
5291
  "editor",
1125
5292
  __props.state,
1126
5293
  { focused: isEditorFocused.value }
1127
- ]) }, [!__props.hideHeader ? (openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("span", _hoisted_3, toDisplayString(headerLabel.value), 1), __props.readOnly === true ? (openBlock(), createElementBlock("span", _hoisted_4, "(Read-only)")) : createCommentVNode("", true)]), createElementVNode("div", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.editorActions, (action, index) => {
1128
- return openBlock(), createElementBlock(Fragment, { key: `editor-action-${index}` }, [action.type === "button" ? (openBlock(), createBlock(unref(KdsButton), mergeProps({
1129
- key: 0,
1130
- ref_for: true
1131
- }, action.props, {
1132
- size: "small",
1133
- onClick: action.onClick
1134
- }), null, 16, ["onClick"])) : action.type === "toggleButton" ? (openBlock(), createBlock(unref(KdsToggleButton), mergeProps({
1135
- key: 1,
1136
- ref_for: true
1137
- }, action.props, {
1138
- size: "small",
1139
- "onUpdate:modelValue": action.onUpdateModelValue
1140
- }), null, 16, ["onUpdate:modelValue"])) : action.type === "menuButton" ? (openBlock(), createBlock(unref(KdsMenuButton), mergeProps({
1141
- key: 2,
1142
- ref_for: true
1143
- }, action.props, {
5294
+ ]) }, [
5295
+ !__props.hideHeader ? (openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("span", _hoisted_3, toDisplayString(headerLabel.value), 1), __props.readOnly === true ? (openBlock(), createElementBlock("span", _hoisted_4, "(Read-only)")) : createCommentVNode("", true)]), createElementVNode("div", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.editorActions, (action, index) => {
5296
+ return openBlock(), createElementBlock(Fragment, { key: `editor-action-${index}` }, [action.type === "button" ? (openBlock(), createBlock(unref(KdsButton), mergeProps({
5297
+ key: 0,
5298
+ ref_for: true
5299
+ }, action.props, {
5300
+ size: "small",
5301
+ onClick: action.onClick
5302
+ }), null, 16, ["onClick"])) : action.type === "toggleButton" ? (openBlock(), createBlock(unref(KdsToggleButton), mergeProps({
5303
+ key: 1,
5304
+ ref_for: true
5305
+ }, action.props, {
5306
+ size: "small",
5307
+ "onUpdate:modelValue": action.onUpdateModelValue
5308
+ }), null, 16, ["onUpdate:modelValue"])) : action.type === "menuButton" ? (openBlock(), createBlock(unref(KdsMenuButton), mergeProps({
5309
+ key: 2,
5310
+ ref_for: true
5311
+ }, action.props, {
5312
+ size: "small",
5313
+ onItemClick: action.onItemClick
5314
+ }), null, 16, ["onItemClick"])) : createCommentVNode("", true)], 64);
5315
+ }), 128)), __props.copyable ? (openBlock(), createBlock(unref(KdsProgressButton), mergeProps({ key: 0 }, { ariaLabel: copyButtonAriaLabel.value }, {
5316
+ "leading-icon": unref(copied) ? "checkmark" : "copy",
5317
+ state: unref(copied) ? "success" : "default",
1144
5318
  size: "small",
1145
- onItemClick: action.onItemClick
1146
- }), null, 16, ["onItemClick"])) : createCommentVNode("", true)], 64);
1147
- }), 128)), __props.copyable ? (openBlock(), createBlock(unref(KdsProgressButton), mergeProps({ key: 0 }, { ariaLabel: copyButtonAriaLabel.value }, {
1148
- "leading-icon": unref(copied) ? "checkmark" : "copy",
1149
- state: unref(copied) ? "success" : "default",
1150
- size: "small",
1151
- variant: "transparent",
1152
- onClick: copyToClipboard
1153
- }), null, 16, ["leading-icon", "state"])) : createCommentVNode("", true)])])) : createCommentVNode("", true), createElementVNode("div", {
1154
- ref: "editor-container",
1155
- class: "code",
1156
- style: normalizeStyle(editorHeight.value ? { height: editorHeight.value } : void 0)
1157
- }, null, 4)], 2), __props.subText ? (openBlock(), createBlock(unref(KdsSubText), {
5319
+ variant: "transparent",
5320
+ onClick: copyToClipboard
5321
+ }), null, 16, ["leading-icon", "state"])) : createCommentVNode("", true)])])) : createCommentVNode("", true),
5322
+ createElementVNode("div", {
5323
+ ref: "editor-container",
5324
+ class: "code",
5325
+ style: normalizeStyle(editorHeight.value ? { height: editorHeight.value } : void 0)
5326
+ }, null, 4),
5327
+ _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "footer", {}, void 0, true)])) : createCommentVNode("", true)
5328
+ ], 2), __props.subText ? (openBlock(), createBlock(unref(KdsSubText), {
1158
5329
  key: 0,
1159
5330
  id: unref(subTextId),
1160
5331
  "sub-text": __props.subText,
@@ -1178,8 +5349,214 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
1178
5349
  };
1179
5350
  //#endregion
1180
5351
  //#region src/CodeEditor/KdsCodeEditor.vue
1181
- var KdsCodeEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(KdsCodeEditor_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-9af67a44"]]);
5352
+ var KdsCodeEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(KdsCodeEditor_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-c9256fb0"]]);
5353
+ //#endregion
5354
+ //#region src/Console/utils/buildTheme.ts
5355
+ /**
5356
+ * Convert a generated KDS color token's HSL component representation to a CSS
5357
+ * color string. xterm.js renders to a canvas and therefore cannot read CSS
5358
+ * custom properties — resolved color strings are required.
5359
+ *
5360
+ * xterm.js's `css.toColor` only parses hex and comma-separated `rgb()/rgba()`
5361
+ * (the canvas fallback rejects non-opaque pixels), so HSL values are converted
5362
+ * to RGB and emitted as `rgb()`. Alpha colors are blended onto the terminal
5363
+ * background to produce an opaque color.
5364
+ */
5365
+ var hslToRgb = (h, s, l) => {
5366
+ const sNorm = s / 100;
5367
+ const lNorm = l / 100;
5368
+ const c = (1 - Math.abs(2 * lNorm - 1)) * sNorm;
5369
+ const hPrime = h / 60;
5370
+ const x = c * (1 - Math.abs(hPrime % 2 - 1));
5371
+ let r1 = 0;
5372
+ let g1 = 0;
5373
+ let b1 = 0;
5374
+ if (hPrime < 1) [r1, g1, b1] = [
5375
+ c,
5376
+ x,
5377
+ 0
5378
+ ];
5379
+ else if (hPrime < 2) [r1, g1, b1] = [
5380
+ x,
5381
+ c,
5382
+ 0
5383
+ ];
5384
+ else if (hPrime < 3) [r1, g1, b1] = [
5385
+ 0,
5386
+ c,
5387
+ x
5388
+ ];
5389
+ else if (hPrime < 4) [r1, g1, b1] = [
5390
+ 0,
5391
+ x,
5392
+ c
5393
+ ];
5394
+ else if (hPrime < 5) [r1, g1, b1] = [
5395
+ x,
5396
+ 0,
5397
+ c
5398
+ ];
5399
+ else [r1, g1, b1] = [
5400
+ c,
5401
+ 0,
5402
+ x
5403
+ ];
5404
+ const m = lNorm - c / 2;
5405
+ return [
5406
+ Math.round((r1 + m) * 255),
5407
+ Math.round((g1 + m) * 255),
5408
+ Math.round((b1 + m) * 255)
5409
+ ];
5410
+ };
5411
+ var blend = (fg, bg, alpha) => [
5412
+ Math.round(fg[0] * alpha + bg[0] * (1 - alpha)),
5413
+ Math.round(fg[1] * alpha + bg[1] * (1 - alpha)),
5414
+ Math.round(fg[2] * alpha + bg[2] * (1 - alpha))
5415
+ ];
5416
+ var toCssColor = (c, bg) => {
5417
+ const [r, g, b] = c.alpha === 1 || !bg ? hslToRgb(c.h, c.s, c.l) : blend(hslToRgb(c.h, c.s, c.l), bg, c.alpha);
5418
+ return `rgb(${r}, ${g}, ${b})`;
5419
+ };
5420
+ /**
5421
+ * Build the xterm.js `ITheme` from generated KDS color tokens for the given
5422
+ * mode. Only colors with KDS semantic mappings are overridden; all other ANSI
5423
+ * slots fall back to the xterm.js defaults.
5424
+ */
5425
+ var buildTheme = (mode) => {
5426
+ const t = color["text-and-icon"];
5427
+ const surface = color.surface.default;
5428
+ const selectedBg = color.TextHighlight.background.default;
5429
+ const bgRgb = hslToRgb(surface[mode].h, surface[mode].s, surface[mode].l);
5430
+ return {
5431
+ background: toCssColor(surface[mode]),
5432
+ foreground: toCssColor(t.neutral[mode]),
5433
+ cursor: toCssColor(t.neutral[mode]),
5434
+ cursorAccent: toCssColor(surface[mode]),
5435
+ selectionBackground: toCssColor(selectedBg[mode], bgRgb),
5436
+ selectionForeground: toCssColor(t.selected[mode]),
5437
+ black: toCssColor(t.neutral[mode]),
5438
+ red: toCssColor(t.danger[mode]),
5439
+ yellow: toCssColor(t.warning[mode])
5440
+ };
5441
+ };
5442
+ //#endregion
5443
+ //#region src/Console/utils/shouldFocusBePainted.ts
5444
+ var listOfFocusKeys = [
5445
+ "Tab",
5446
+ "ArrowUp",
5447
+ "ArrowDown",
5448
+ "ArrowLeft",
5449
+ "ArrowRight",
5450
+ " ",
5451
+ "Enter"
5452
+ ];
5453
+ /**
5454
+ * Composable that returns whether focus is currently painted. It turns focus
5455
+ * painting on when the document is navigated using key presses, and off again
5456
+ * when the document is clicked — so that focus rings only appear for keyboard
5457
+ * navigation, not for mouse interactions.
5458
+ */
5459
+ var useShouldFocusBePainted = () => {
5460
+ const shouldFocusBePainted = ref(false);
5461
+ const turnFocusPaintingOn = (evt) => {
5462
+ if (listOfFocusKeys.includes(evt.key)) shouldFocusBePainted.value = true;
5463
+ };
5464
+ const turnFocusPaintingOff = () => {
5465
+ shouldFocusBePainted.value = false;
5466
+ };
5467
+ onMounted(() => {
5468
+ document.addEventListener("keydown", turnFocusPaintingOn);
5469
+ document.addEventListener("mousedown", turnFocusPaintingOff);
5470
+ });
5471
+ onUnmounted(() => {
5472
+ document.removeEventListener("keydown", turnFocusPaintingOn);
5473
+ document.removeEventListener("mousedown", turnFocusPaintingOff);
5474
+ });
5475
+ return shouldFocusBePainted;
5476
+ };
5477
+ //#endregion
5478
+ //#region src/Console/KdsConsole.vue?vue&type=script&setup=true&lang.ts
5479
+ var DEBOUNCE_TIME = 300;
5480
+ //#endregion
5481
+ //#region src/Console/KdsConsole.vue
5482
+ var KdsConsole_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
5483
+ __name: "KdsConsole",
5484
+ emits: ["console-created"],
5485
+ setup(__props, { emit: __emit }) {
5486
+ const emit = __emit;
5487
+ const { isDarkMode } = useKdsDarkMode();
5488
+ const codeFont = font.base.code.small;
5489
+ const term = new Terminal({
5490
+ letterSpacing: 0,
5491
+ allowProposedApi: true,
5492
+ fontSize: codeFont.fontSize.value,
5493
+ fontFamily: `"${codeFont.fontFamily}", monospace`,
5494
+ convertEol: true,
5495
+ disableStdin: true,
5496
+ cursorBlink: false,
5497
+ theme: buildTheme(isDarkMode.value ? "dark" : "light")
5498
+ });
5499
+ const unicode11Addon = new Unicode11Addon();
5500
+ term.loadAddon(unicode11Addon);
5501
+ term.unicode.activeVersion = "11";
5502
+ const fitAddon = new FitAddon();
5503
+ term.loadAddon(fitAddon);
5504
+ const terminalContainer = useTemplateRef("terminal-container");
5505
+ const updateConsole = useDebounceFn(() => {
5506
+ fitAddon.fit();
5507
+ }, DEBOUNCE_TIME);
5508
+ useResizeObserver(terminalContainer, () => {
5509
+ updateConsole();
5510
+ });
5511
+ const copyToClipboard = (text) => {
5512
+ navigator.clipboard.writeText(text);
5513
+ };
5514
+ term.attachCustomKeyEventHandler((e) => {
5515
+ if ((e.key === "c" || e.key === "C") && e.ctrlKey) {
5516
+ const selection = term.getSelection();
5517
+ if (selection) copyToClipboard(selection);
5518
+ return false;
5519
+ } else if (e.key === "Tab") return false;
5520
+ else if (e.key === "Escape") {
5521
+ term.blur();
5522
+ return false;
5523
+ }
5524
+ return true;
5525
+ });
5526
+ term.onWriteParsed(() => term.scrollToBottom());
5527
+ watchEffect(() => {
5528
+ term.options.theme = buildTheme(isDarkMode.value ? "dark" : "light");
5529
+ });
5530
+ const format = (text) => {
5531
+ if ("error" in text) return `\x1b[31m[ERROR] ${text.error}\x1b[0m`;
5532
+ else if ("warning" in text) return `\x1b[33m[WARNING] ${text.warning}\x1b[0m`;
5533
+ else return text.text;
5534
+ };
5535
+ onMounted(() => {
5536
+ term.open(terminalContainer.value);
5537
+ emit("console-created", {
5538
+ write: (text) => term.write(format(text)),
5539
+ writeln: (text) => term.writeln(format(text)),
5540
+ clear: () => term.reset()
5541
+ });
5542
+ const listener = term.onLineFeed(() => {
5543
+ fitAddon.fit();
5544
+ listener.dispose();
5545
+ });
5546
+ });
5547
+ onUnmounted(() => {
5548
+ term?.dispose();
5549
+ });
5550
+ const paintFocus = useShouldFocusBePainted();
5551
+ return (_ctx, _cache) => {
5552
+ return openBlock(), createElementBlock("div", {
5553
+ ref: "terminal-container",
5554
+ class: normalizeClass(["terminal", { "focus-painted": unref(paintFocus) }])
5555
+ }, null, 2);
5556
+ };
5557
+ }
5558
+ }), [["__scopeId", "data-v-c23d8d58"]]);
1182
5559
  //#endregion
1183
- export { KdsCodeEditor_default as KdsCodeEditor, kdsCodeEditorState, kdsCodeEditorStates, setupMonacoEnvironment };
5560
+ export { KdsCodeEditor_default as KdsCodeEditor, KdsConsole_default as KdsConsole, kdsCodeEditorState, kdsCodeEditorStates, setupMonacoEnvironment };
1184
5561
 
1185
5562
  //# sourceMappingURL=index.js.map