@knime/kds-styles 2.2.0 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/README.md +21 -0
  3. package/dist/tokens/css/_properties-legacy.css +220 -220
  4. package/dist/tokens/css/_properties.css +370 -370
  5. package/dist/tokens/css/_variables-legacy.css +220 -220
  6. package/dist/tokens/css/_variables.css +370 -370
  7. package/dist/tokens/ts/border-radius.d.ts +50 -0
  8. package/dist/tokens/ts/border-radius.js +88 -0
  9. package/dist/tokens/ts/border-width.d.ts +22 -0
  10. package/dist/tokens/ts/border-width.js +32 -0
  11. package/dist/tokens/ts/border.d.ts +118 -0
  12. package/dist/tokens/ts/border.js +316 -0
  13. package/dist/tokens/ts/box-shadow.d.ts +12 -0
  14. package/dist/tokens/ts/box-shadow.js +24 -0
  15. package/dist/tokens/ts/color.d.ts +880 -0
  16. package/dist/tokens/ts/color.js +1658 -0
  17. package/dist/tokens/ts/dimension.d.ts +196 -0
  18. package/dist/tokens/ts/dimension.js +362 -0
  19. package/dist/tokens/ts/elevation.d.ts +37 -0
  20. package/dist/tokens/ts/elevation.js +102 -0
  21. package/dist/tokens/ts/fake-border.d.ts +12 -0
  22. package/dist/tokens/ts/fake-border.js +24 -0
  23. package/dist/tokens/ts/font.d.ts +278 -0
  24. package/dist/tokens/ts/font.js +644 -0
  25. package/dist/tokens/ts/index.d.ts +17 -0
  26. package/dist/tokens/ts/index.js +16 -0
  27. package/dist/tokens/ts/sizing.d.ts +34 -0
  28. package/dist/tokens/ts/sizing.js +56 -0
  29. package/dist/tokens/ts/spacing.d.ts +90 -0
  30. package/dist/tokens/ts/spacing.js +115 -0
  31. package/dist/tokens/ts/types.d.ts +87 -0
  32. package/dist/tokens/ts/types.js +5 -0
  33. package/dist/tokens/ts/width.d.ts +14 -0
  34. package/dist/tokens/ts/width.js +16 -0
  35. package/package.json +5 -2
  36. package/dist/tokens/ts/_tokens.ts +0 -125
package/dist/tokens/ts/color.js ADDED
@@ -0,0 +1,1658 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated
3
+ * from the design token sources in src/tokens.
4
+ */
5
+ export const color = {
6
+ surface: {
7
+ default: {
8
+ light: { h: 0, s: 0, l: 98, alpha: 1 },
9
+ dark: { h: 0, s: 0, l: 15.7, alpha: 1 },
10
+ css: {
11
+ value: "light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%))",
12
+ variable: "var(--kds-color-surface-default)",
13
+ },
14
+ },
15
+ muted: {
16
+ light: { h: 0, s: 0, l: 94.1, alpha: 1 },
17
+ dark: { h: 0, s: 0, l: 18.8, alpha: 1 },
18
+ css: {
19
+ value: "light-dark(hsl(0, 0%, 94.1%), hsl(0, 0%, 18.8%))",
20
+ variable: "var(--kds-color-surface-muted)",
21
+ },
22
+ },
23
+ subtle: {
24
+ light: { h: 0, s: 0, l: 90.2, alpha: 1 },
25
+ dark: { h: 0, s: 0, l: 22, alpha: 1 },
26
+ css: {
27
+ value: "light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 22%))",
28
+ variable: "var(--kds-color-surface-subtle)",
29
+ },
30
+ },
31
+ },
32
+ page: {
33
+ default: {
34
+ light: { h: 0, s: 0, l: 99, alpha: 1 },
35
+ dark: { h: 0, s: 0, l: 12.9, alpha: 1 },
36
+ css: {
37
+ value: "light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 12.9%))",
38
+ variable: "var(--kds-color-page-default)",
39
+ },
40
+ },
41
+ },
42
+ background: {
43
+ neutral: {
44
+ initial: {
45
+ light: { h: 345, s: 0, l: 11.4, alpha: 0 },
46
+ dark: { h: 345, s: 0, l: 11.4, alpha: 0 },
47
+ css: {
48
+ value: "hsl(345 0% 11.4% / 0)",
49
+ variable: "var(--kds-color-background-neutral-initial)",
50
+ },
51
+ },
52
+ hover: {
53
+ light: { h: 340, s: 0, l: 48.2, alpha: 0.1 },
54
+ dark: { h: 180, s: 0, l: 90.2, alpha: 0.1 },
55
+ css: {
56
+ value: "light-dark(hsl(340 0% 48.2% / 0.1), hsl(180 0% 90.2% / 0.1))",
57
+ variable: "var(--kds-color-background-neutral-hover)",
58
+ },
59
+ },
60
+ active: {
61
+ light: { h: 340, s: 0, l: 48.2, alpha: 0.2 },
62
+ dark: { h: 340, s: 0, l: 48.2, alpha: 0.36 },
63
+ css: {
64
+ value: "light-dark(hsl(340 0% 48.2% / 0.2), hsl(340 0% 48.2% / 0.36))",
65
+ variable: "var(--kds-color-background-neutral-active)",
66
+ },
67
+ },
68
+ },
69
+ "neutral-bold": {
70
+ initial: {
71
+ light: { h: 210, s: 0, l: 72.5, alpha: 0.4 },
72
+ dark: { h: 0, s: 0, l: 32.2, alpha: 1 },
73
+ css: {
74
+ value: "light-dark(hsl(210 0% 72.5% / 0.4), hsl(0, 0%, 32.2%))",
75
+ variable: "var(--kds-color-background-neutral-bold-initial)",
76
+ },
77
+ },
78
+ hover: {
79
+ light: { h: 210, s: 0, l: 62.977, alpha: 0.4 },
80
+ dark: { h: 0, s: 0, l: 48.2, alpha: 1 },
81
+ css: {
82
+ value: "light-dark(hsl(210 0% 62.977% / 0.4), hsl(0, 0%, 48.2%))",
83
+ variable: "var(--kds-color-background-neutral-bold-hover)",
84
+ },
85
+ },
86
+ active: {
87
+ light: { h: 0, s: 0, l: 59.859, alpha: 0.4 },
88
+ dark: { h: 0, s: 0, l: 72.5, alpha: 1 },
89
+ css: {
90
+ value: "light-dark(hsl(0 0% 59.859% / 0.4), hsl(0, 0%, 72.5%))",
91
+ variable: "var(--kds-color-background-neutral-bold-active)",
92
+ },
93
+ },
94
+ },
95
+ primary: {
96
+ initial: {
97
+ light: { h: 168, s: 46.7, l: 85.3, alpha: 1 },
98
+ dark: { h: 169.8, s: 30.6, l: 66.1, alpha: 1 },
99
+ css: {
100
+ value: "light-dark(hsl(168, 46.7%, 85.3%), hsl(169.8, 30.6%, 66.1%))",
101
+ variable: "var(--kds-color-background-primary-initial)",
102
+ },
103
+ },
104
+ hover: {
105
+ light: { h: 167.99, s: 27.818, l: 77.703, alpha: 1 },
106
+ dark: { h: 169.6, s: 30.517, l: 68.835, alpha: 1 },
107
+ css: {
108
+ value: "light-dark(hsl(167.99 27.818% 77.703%), hsl(169.6 30.517% 68.835%))",
109
+ variable: "var(--kds-color-background-primary-hover)",
110
+ },
111
+ },
112
+ active: {
113
+ light: { h: 167.97, s: 18.664, l: 70.242, alpha: 1 },
114
+ dark: { h: 168.98, s: 30.352, l: 78.334, alpha: 1 },
115
+ css: {
116
+ value: "light-dark(hsl(167.97 18.664% 70.242%), hsl(168.98 30.352% 78.334%))",
117
+ variable: "var(--kds-color-background-primary-active)",
118
+ },
119
+ },
120
+ },
121
+ "primary-bold": {
122
+ initial: {
123
+ light: { h: 176.1, s: 66.7, l: 22.4, alpha: 1 },
124
+ dark: { h: 174.4, s: 47.8, l: 30.8, alpha: 1 },
125
+ css: {
126
+ value: "light-dark(hsl(176.1, 66.7%, 22.4%), hsl(174.4, 47.8%, 30.8%))",
127
+ variable: "var(--kds-color-background-primary-bold-initial)",
128
+ },
129
+ },
130
+ hover: {
131
+ light: { h: 175.79, s: 58.284, l: 19.792, alpha: 1 },
132
+ dark: { h: 173.26, s: 27.023, l: 42.409, alpha: 1 },
133
+ css: {
134
+ value: "light-dark(hsl(175.79 58.284% 19.792%), hsl(173.26 27.023% 42.409%))",
135
+ variable: "var(--kds-color-background-primary-bold-hover)",
136
+ },
137
+ },
138
+ active: {
139
+ light: { h: 175.36, s: 48.936, l: 16.164, alpha: 1 },
140
+ dark: { h: 171.91, s: 19.296, l: 64.061, alpha: 1 },
141
+ css: {
142
+ value: "light-dark(hsl(175.36 48.936% 16.164%), hsl(171.91 19.296% 64.061%))",
143
+ variable: "var(--kds-color-background-primary-bold-active)",
144
+ },
145
+ },
146
+ },
147
+ selected: {
148
+ initial: {
149
+ light: { h: 165.6, s: 67.6, l: 92.7, alpha: 1 },
150
+ dark: { h: 176.1, s: 66.7, l: 22.4, alpha: 0.32 },
151
+ css: {
152
+ value: "light-dark(hsl(165.6, 67.6%, 92.7%), hsl(176.1 66.7% 22.4% / 0.32))",
153
+ variable: "var(--kds-color-background-selected-initial)",
154
+ },
155
+ },
156
+ hover: {
157
+ light: { h: 168, s: 46.7, l: 85.3, alpha: 1 },
158
+ dark: { h: 174.4, s: 47.8, l: 30.8, alpha: 0.56 },
159
+ css: {
160
+ value: "light-dark(hsl(168, 46.7%, 85.3%), hsl(174.4 47.8% 30.8% / 0.56))",
161
+ variable: "var(--kds-color-background-selected-hover)",
162
+ },
163
+ },
164
+ active: {
165
+ light: { h: 168.8, s: 34.4, l: 75.5, alpha: 1 },
166
+ dark: { h: 171.8, s: 27, l: 47.8, alpha: 0.72 },
167
+ css: {
168
+ value: "light-dark(hsl(168.8, 34.4%, 75.5%), hsl(171.8 27% 47.8% / 0.72))",
169
+ variable: "var(--kds-color-background-selected-active)",
170
+ },
171
+ },
172
+ },
173
+ "selected-bold": {
174
+ initial: {
175
+ light: { h: 174.4, s: 47.8, l: 30.8, alpha: 1 },
176
+ dark: { h: 176.1, s: 66.7, l: 22.4, alpha: 1 },
177
+ css: {
178
+ value: "light-dark(hsl(174.4, 47.8%, 30.8%), hsl(176.1, 66.7%, 22.4%))",
179
+ variable: "var(--kds-color-background-selected-bold-initial)",
180
+ },
181
+ },
182
+ hover: {
183
+ light: { h: 176.1, s: 66.7, l: 22.4, alpha: 1 },
184
+ dark: { h: 174.4, s: 47.8, l: 30.8, alpha: 1 },
185
+ css: {
186
+ value: "light-dark(hsl(176.1, 66.7%, 22.4%), hsl(174.4, 47.8%, 30.8%))",
187
+ variable: "var(--kds-color-background-selected-bold-hover)",
188
+ },
189
+ },
190
+ active: {
191
+ light: { h: 176.7, s: 82, l: 17.5, alpha: 1 },
192
+ dark: { h: 171.8, s: 27, l: 47.8, alpha: 1 },
193
+ css: {
194
+ value: "light-dark(hsl(176.7, 82%, 17.5%), hsl(171.8, 27%, 47.8%))",
195
+ variable: "var(--kds-color-background-selected-bold-active)",
196
+ },
197
+ },
198
+ },
199
+ danger: {
200
+ initial: {
201
+ light: { h: 0, s: 100, l: 97.1, alpha: 1 },
202
+ dark: { h: 356.76, s: 65.215, l: 15.117, alpha: 1 },
203
+ css: {
204
+ value: "light-dark(hsl(0, 100%, 97.1%), hsl(356.76 65.215% 15.117%))",
205
+ variable: "var(--kds-color-background-danger-initial)",
206
+ },
207
+ },
208
+ hover: {
209
+ light: { h: 1.5, s: 100, l: 92.4, alpha: 1 },
210
+ dark: { h: 348.8, s: 90.9, l: 34.5, alpha: 0.72 },
211
+ css: {
212
+ value: "light-dark(hsl(1.5, 100%, 92.4%), hsl(348.8 90.9% 34.5% / 0.72))",
213
+ variable: "var(--kds-color-background-danger-hover)",
214
+ },
215
+ },
216
+ active: {
217
+ light: { h: 3.4, s: 100, l: 86.1, alpha: 1 },
218
+ dark: { h: 353, s: 74.7, l: 44.9, alpha: 0.72 },
219
+ css: {
220
+ value: "light-dark(hsl(3.4, 100%, 86.1%), hsl(353 74.7% 44.9% / 0.72))",
221
+ variable: "var(--kds-color-background-danger-active)",
222
+ },
223
+ },
224
+ },
225
+ "danger-bold": {
226
+ initial: {
227
+ light: { h: 348.8, s: 90.9, l: 34.5, alpha: 1 },
228
+ dark: { h: 347.6, s: 97.1, l: 27.3, alpha: 1 },
229
+ css: {
230
+ value: "light-dark(hsl(348.8, 90.9%, 34.5%), hsl(347.6, 97.1%, 27.3%))",
231
+ variable: "var(--kds-color-background-danger-bold-initial)",
232
+ },
233
+ },
234
+ hover: {
235
+ light: { h: 347.6, s: 97.1, l: 27.3, alpha: 1 },
236
+ dark: { h: 353, s: 74.7, l: 44.9, alpha: 0.8 },
237
+ css: {
238
+ value: "light-dark(hsl(347.6, 97.1%, 27.3%), hsl(353 74.7% 44.9% / 0.8))",
239
+ variable: "var(--kds-color-background-danger-bold-hover)",
240
+ },
241
+ },
242
+ active: {
243
+ light: { h: 348, s: 94.3, l: 20.8, alpha: 1 },
244
+ dark: { h: 356.3, s: 76.8, l: 54.3, alpha: 0.8 },
245
+ css: {
246
+ value: "light-dark(hsl(348, 94.3%, 20.8%), hsl(356.3 76.8% 54.3% / 0.8))",
247
+ variable: "var(--kds-color-background-danger-bold-active)",
248
+ },
249
+ },
250
+ },
251
+ input: {
252
+ initial: {
253
+ light: { h: 0, s: 0, l: 99, alpha: 1 },
254
+ dark: { h: 0, s: 0, l: 22, alpha: 1 },
255
+ css: {
256
+ value: "light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 22%))",
257
+ variable: "var(--kds-color-background-input-initial)",
258
+ },
259
+ },
260
+ hover: {
261
+ light: { h: 330, s: 0, l: 94.521, alpha: 1 },
262
+ dark: { h: 330, s: 0, l: 30.187, alpha: 1 },
263
+ css: {
264
+ value: "light-dark(hsl(330 0% 94.521%), hsl(330 0% 30.187%))",
265
+ variable: "var(--kds-color-background-input-hover)",
266
+ },
267
+ },
268
+ active: {
269
+ light: { h: 330, s: 0, l: 85.683, alpha: 1 },
270
+ dark: { h: 336, s: 0, l: 38.771, alpha: 1 },
271
+ css: {
272
+ value: "light-dark(hsl(330 0% 85.683%), hsl(336 0% 38.771%))",
273
+ variable: "var(--kds-color-background-input-active)",
274
+ },
275
+ },
276
+ },
277
+ disabled: {
278
+ default: {
279
+ light: { h: 340, s: 0, l: 48.2, alpha: 0.48 },
280
+ dark: { h: 340, s: 0, l: 48.2, alpha: 0.48 },
281
+ css: {
282
+ value: "hsl(340 0% 48.2% / 0.48)",
283
+ variable: "var(--kds-color-background-disabled-default)",
284
+ },
285
+ },
286
+ primary: {
287
+ light: { h: 173.91, s: 18.134, l: 40.592, alpha: 1 },
288
+ dark: { h: 173.91, s: 18.134, l: 40.592, alpha: 1 },
289
+ css: {
290
+ value: "hsl(173.91 18.134% 40.592%)",
291
+ variable: "var(--kds-color-background-disabled-primary)",
292
+ },
293
+ },
294
+ danger: {
295
+ light: { h: 1.3489, s: 43.031, l: 37.79, alpha: 1 },
296
+ dark: { h: 1.3489, s: 43.031, l: 37.79, alpha: 1 },
297
+ css: {
298
+ value: "hsl(1.3489 43.031% 37.79%)",
299
+ variable: "var(--kds-color-background-disabled-danger)",
300
+ },
301
+ },
302
+ },
303
+ "success-bold": {
304
+ initial: {
305
+ light: { h: 111.3, s: 47.5, l: 31.4, alpha: 1 },
306
+ dark: { h: 123.7, s: 46.7, l: 20.6, alpha: 1 },
307
+ css: {
308
+ value: "light-dark(hsl(111.3, 47.5%, 31.4%), hsl(123.7, 46.7%, 20.6%))",
309
+ variable: "var(--kds-color-background-success-bold-initial)",
310
+ },
311
+ },
312
+ },
313
+ "info-bold": {
314
+ initial: {
315
+ light: { h: 209.4, s: 57.3, l: 49.6, alpha: 1 },
316
+ dark: { h: 212.1, s: 78.2, l: 67.6, alpha: 1 },
317
+ css: {
318
+ value: "light-dark(hsl(209.4, 57.3%, 49.6%), hsl(212.1, 78.2%, 67.6%))",
319
+ variable: "var(--kds-color-background-info-bold-initial)",
320
+ },
321
+ },
322
+ hover: {
323
+ light: { h: 208.2, s: 62.9, l: 41.2, alpha: 1 },
324
+ dark: { h: 213.6, s: 91.6, l: 76.7, alpha: 1 },
325
+ css: {
326
+ value: "light-dark(hsl(208.2, 62.9%, 41.2%), hsl(213.6, 91.6%, 76.7%))",
327
+ variable: "var(--kds-color-background-info-bold-hover)",
328
+ },
329
+ },
330
+ active: {
331
+ light: { h: 208.3, s: 60.5, l: 33.7, alpha: 1 },
332
+ dark: { h: 214.5, s: 100, l: 84.3, alpha: 1 },
333
+ css: {
334
+ value: "light-dark(hsl(208.3, 60.5%, 33.7%), hsl(214.5, 100%, 84.3%))",
335
+ variable: "var(--kds-color-background-info-bold-active)",
336
+ },
337
+ },
338
+ },
339
+ },
340
+ "background-static": {
341
+ info: {
342
+ light: { h: 216.7, s: 100, l: 96.5, alpha: 1 },
343
+ dark: { h: 210, s: 50, l: 27.5, alpha: 1 },
344
+ css: {
345
+ value: "light-dark(hsl(216.7, 100%, 96.5%), hsl(210, 50%, 27.5%))",
346
+ variable: "var(--kds-color-background-static-info)",
347
+ },
348
+ },
349
+ "info-muted": {
350
+ light: { h: 216.83, s: 100.14, l: 97.347, alpha: 1 },
351
+ dark: { h: 211.86, s: 40.97, l: 17.58, alpha: 1 },
352
+ css: {
353
+ value: "light-dark(hsl(216.83 100.14% 97.347%), hsl(211.86 40.97% 17.58%))",
354
+ variable: "var(--kds-color-background-static-info-muted)",
355
+ },
356
+ },
357
+ warning: {
358
+ light: { h: 30, s: 95.2, l: 91.8, alpha: 1 },
359
+ dark: { h: 13.1, s: 66.1, l: 23.1, alpha: 1 },
360
+ css: {
361
+ value: "light-dark(hsl(30, 95.2%, 91.8%), hsl(13.1, 66.1%, 23.1%))",
362
+ variable: "var(--kds-color-background-static-warning)",
363
+ },
364
+ },
365
+ "warning-muted": {
366
+ light: { h: 29.601, s: 98.108, l: 95.778, alpha: 1 },
367
+ dark: { h: 14.687, s: 60.252, l: 14.775, alpha: 1 },
368
+ css: {
369
+ value: "light-dark(hsl(29.601 98.108% 95.778%), hsl(14.687 60.252% 14.775%))",
370
+ variable: "var(--kds-color-background-static-warning-muted)",
371
+ },
372
+ },
373
+ danger: {
374
+ light: { h: 1.5, s: 100, l: 92.4, alpha: 1 },
375
+ dark: { h: 347.6, s: 97.1, l: 27.3, alpha: 1 },
376
+ css: {
377
+ value: "light-dark(hsl(1.5, 100%, 92.4%), hsl(347.6, 97.1%, 27.3%))",
378
+ variable: "var(--kds-color-background-static-danger)",
379
+ },
380
+ },
381
+ "danger-muted": {
382
+ light: { h: 0, s: 100, l: 97.1, alpha: 1 },
383
+ dark: { h: 356.76, s: 65.215, l: 15.117, alpha: 1 },
384
+ css: {
385
+ value: "light-dark(hsl(0, 100%, 97.1%), hsl(356.76 65.215% 15.117%))",
386
+ variable: "var(--kds-color-background-static-danger-muted)",
387
+ },
388
+ },
389
+ success: {
390
+ light: { h: 119.4, s: 96.139, l: 93.64, alpha: 1 },
391
+ dark: { h: 123.7, s: 46.7, l: 20.6, alpha: 1 },
392
+ css: {
393
+ value: "light-dark(hsl(119.4 96.139% 93.64%), hsl(123.7, 46.7%, 20.6%))",
394
+ variable: "var(--kds-color-background-static-success)",
395
+ },
396
+ },
397
+ "success-muted": {
398
+ light: { h: 125.38, s: 64.795, l: 97.496, alpha: 1 },
399
+ dark: { h: 128.3, s: 38.542, l: 10.352, alpha: 1 },
400
+ css: {
401
+ value: "light-dark(hsl(125.38 64.795% 97.496%), hsl(128.3 38.542% 10.352%))",
402
+ variable: "var(--kds-color-background-static-success-muted)",
403
+ },
404
+ },
405
+ brand: {
406
+ light: { h: 50.8, s: 100, l: 50, alpha: 1 },
407
+ dark: { h: 50.8, s: 100, l: 50, alpha: 1 },
408
+ css: {
409
+ value: "hsl(50.8, 100%, 50%)",
410
+ variable: "var(--kds-color-background-static-brand)",
411
+ },
412
+ },
413
+ overlay: {
414
+ light: { h: 0, s: 0, l: 12.9, alpha: 1 },
415
+ dark: { h: 0, s: 0, l: 22, alpha: 1 },
416
+ css: {
417
+ value: "light-dark(hsl(0, 0%, 12.9%), hsl(0, 0%, 22%))",
418
+ variable: "var(--kds-color-background-static-overlay)",
419
+ },
420
+ },
421
+ "chart-0": {
422
+ light: { h: 0, s: 0, l: 94.1, alpha: 1 },
423
+ dark: { h: 0, s: 0, l: 32.2, alpha: 1 },
424
+ css: {
425
+ value: "light-dark(hsl(0, 0%, 94.1%), hsl(0, 0%, 32.2%))",
426
+ variable: "var(--kds-color-background-static-chart-0)",
427
+ },
428
+ },
429
+ "chart-1": {
430
+ light: { h: 176.1, s: 66.7, l: 22.4, alpha: 1 },
431
+ dark: { h: 173.4, s: 37.1, l: 38.6, alpha: 1 },
432
+ css: {
433
+ value: "light-dark(hsl(176.1, 66.7%, 22.4%), hsl(173.4, 37.1%, 38.6%))",
434
+ variable: "var(--kds-color-background-static-chart-1)",
435
+ },
436
+ },
437
+ "chart-2": {
438
+ light: { h: 171.8, s: 27, l: 47.8, alpha: 1 },
439
+ dark: { h: 176.1, s: 66.7, l: 22.4, alpha: 1 },
440
+ css: {
441
+ value: "light-dark(hsl(171.8, 27%, 47.8%), hsl(176.1, 66.7%, 22.4%))",
442
+ variable: "var(--kds-color-background-static-chart-2)",
443
+ },
444
+ },
445
+ },
446
+ "text-and-icon": {
447
+ neutral: {
448
+ light: { h: 0, s: 0, l: 15.7, alpha: 1 },
449
+ dark: { h: 0, s: 0, l: 94.1, alpha: 1 },
450
+ css: {
451
+ value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
452
+ variable: "var(--kds-color-text-and-icon-neutral)",
453
+ },
454
+ },
455
+ muted: {
456
+ light: { h: 0, s: 0, l: 32.2, alpha: 1 },
457
+ dark: { h: 0, s: 0, l: 90.2, alpha: 1 },
458
+ css: {
459
+ value: "light-dark(hsl(0, 0%, 32.2%), hsl(0, 0%, 90.2%))",
460
+ variable: "var(--kds-color-text-and-icon-muted)",
461
+ },
462
+ },
463
+ subtle: {
464
+ light: { h: 0, s: 0, l: 43, alpha: 1 },
465
+ dark: { h: 0, s: 0, l: 72.5, alpha: 1 },
466
+ css: {
467
+ value: "light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%))",
468
+ variable: "var(--kds-color-text-and-icon-subtle)",
469
+ },
470
+ },
471
+ "neutral-inverted": {
472
+ light: { h: 0, s: 0, l: 98, alpha: 1 },
473
+ dark: { h: 0, s: 0, l: 15.7, alpha: 1 },
474
+ css: {
475
+ value: "light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%))",
476
+ variable: "var(--kds-color-text-and-icon-neutral-inverted)",
477
+ },
478
+ },
479
+ primary: {
480
+ light: { h: 176.1, s: 66.7, l: 22.4, alpha: 1 },
481
+ dark: { h: 176.1, s: 66.7, l: 22.4, alpha: 1 },
482
+ css: {
483
+ value: "hsl(176.1, 66.7%, 22.4%)",
484
+ variable: "var(--kds-color-text-and-icon-primary)",
485
+ },
486
+ },
487
+ "primary-inverted": {
488
+ light: { h: 165.6, s: 67.6, l: 92.7, alpha: 1 },
489
+ dark: { h: 165.6, s: 67.6, l: 92.7, alpha: 1 },
490
+ css: {
491
+ value: "hsl(165.6, 67.6%, 92.7%)",
492
+ variable: "var(--kds-color-text-and-icon-primary-inverted)",
493
+ },
494
+ },
495
+ selected: {
496
+ light: { h: 176.1, s: 66.7, l: 22.4, alpha: 1 },
497
+ dark: { h: 168.8, s: 34.4, l: 75.5, alpha: 1 },
498
+ css: {
499
+ value: "light-dark(hsl(176.1, 66.7%, 22.4%), hsl(168.8, 34.4%, 75.5%))",
500
+ variable: "var(--kds-color-text-and-icon-selected)",
501
+ },
502
+ },
503
+ "selected-inverted": {
504
+ light: { h: 165, s: 80, l: 96.1, alpha: 1 },
505
+ dark: { h: 165, s: 80, l: 96.1, alpha: 1 },
506
+ css: {
507
+ value: "hsl(165, 80%, 96.1%)",
508
+ variable: "var(--kds-color-text-and-icon-selected-inverted)",
509
+ },
510
+ },
511
+ warning: {
512
+ light: { h: 19, s: 63.1, l: 38.2, alpha: 1 },
513
+ dark: { h: 31.2, s: 82.8, l: 65.9, alpha: 1 },
514
+ css: {
515
+ value: "light-dark(hsl(19, 63.1%, 38.2%), hsl(31.2, 82.8%, 65.9%))",
516
+ variable: "var(--kds-color-text-and-icon-warning)",
517
+ },
518
+ },
519
+ "warning-inverted": {
520
+ light: { h: 31, s: 100, l: 82.5, alpha: 1 },
521
+ dark: { h: 31, s: 100, l: 82.5, alpha: 1 },
522
+ css: {
523
+ value: "hsl(31, 100%, 82.5%)",
524
+ variable: "var(--kds-color-text-and-icon-warning-inverted)",
525
+ },
526
+ },
527
+ danger: {
528
+ light: { h: 348.8, s: 90.9, l: 34.5, alpha: 1 },
529
+ dark: { h: 3.5, s: 100, l: 79.6, alpha: 1 },
530
+ css: {
531
+ value: "light-dark(hsl(348.8, 90.9%, 34.5%), hsl(3.5, 100%, 79.6%))",
532
+ variable: "var(--kds-color-text-and-icon-danger)",
533
+ },
534
+ },
535
+ "danger-inverted": {
536
+ light: { h: 0, s: 100, l: 97.1, alpha: 1 },
537
+ dark: { h: 1.5, s: 100, l: 92.4, alpha: 1 },
538
+ css: {
539
+ value: "light-dark(hsl(0, 100%, 97.1%), hsl(1.5, 100%, 92.4%))",
540
+ variable: "var(--kds-color-text-and-icon-danger-inverted)",
541
+ },
542
+ },
543
+ success: {
544
+ light: { h: 116.1, s: 46.6, l: 25.7, alpha: 1 },
545
+ dark: { h: 109, s: 47.2, l: 61.4, alpha: 1 },
546
+ css: {
547
+ value: "light-dark(hsl(116.1, 46.6%, 25.7%), hsl(109, 47.2%, 61.4%))",
548
+ variable: "var(--kds-color-text-and-icon-success)",
549
+ },
550
+ },
551
+ "success-inverted": {
552
+ light: { h: 120, s: 95.3, l: 91.6, alpha: 1 },
553
+ dark: { h: 120, s: 95.3, l: 91.6, alpha: 1 },
554
+ css: {
555
+ value: "hsl(120, 95.3%, 91.6%)",
556
+ variable: "var(--kds-color-text-and-icon-success-inverted)",
557
+ },
558
+ },
559
+ disabled: {
560
+ light: { h: 0, s: 0, l: 64, alpha: 1 },
561
+ dark: { h: 0, s: 0, l: 48.2, alpha: 1 },
562
+ css: {
563
+ value: "light-dark(hsl(0, 0%, 64%), hsl(0, 0%, 48.2%))",
564
+ variable: "var(--kds-color-text-and-icon-disabled)",
565
+ },
566
+ },
567
+ "disabled-inverted": {
568
+ light: { h: 0, s: 0, l: 72.5, alpha: 1 },
569
+ dark: { h: 0, s: 0, l: 72.5, alpha: 1 },
570
+ css: {
571
+ value: "hsl(0, 0%, 72.5%)",
572
+ variable: "var(--kds-color-text-and-icon-disabled-inverted)",
573
+ },
574
+ },
575
+ info: {
576
+ light: { h: 208.3, s: 60.5, l: 33.7, alpha: 1 },
577
+ dark: { h: 213.6, s: 91.6, l: 76.7, alpha: 1 },
578
+ css: {
579
+ value: "light-dark(hsl(208.3, 60.5%, 33.7%), hsl(213.6, 91.6%, 76.7%))",
580
+ variable: "var(--kds-color-text-and-icon-info)",
581
+ },
582
+ },
583
+ editor: {
584
+ light: { h: 0, s: 0, l: 11.4, alpha: 1 },
585
+ dark: { h: 0, s: 0, l: 94.1, alpha: 1 },
586
+ css: {
587
+ value: "light-dark(hsl(0, 0%, 11.4%), hsl(0, 0%, 94.1%))",
588
+ variable: "var(--kds-color-text-and-icon-editor)",
589
+ },
590
+ },
591
+ },
592
+ border: {
593
+ neutral: {
594
+ light: { h: 330, s: 0, l: 10.2, alpha: 0.4 },
595
+ dark: { h: 330, s: 0, l: 99, alpha: 0.5 },
596
+ css: {
597
+ value: "light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5))",
598
+ variable: "var(--kds-color-border-neutral)",
599
+ },
600
+ },
601
+ muted: {
602
+ light: { h: 330, s: 0, l: 10.2, alpha: 0.2 },
603
+ dark: { h: 330, s: 0, l: 99, alpha: 0.2 },
604
+ css: {
605
+ value: "light-dark(hsl(330 0% 10.2% / 0.2), hsl(330 0% 99% / 0.2))",
606
+ variable: "var(--kds-color-border-muted)",
607
+ },
608
+ },
609
+ subtle: {
610
+ light: { h: 330, s: 0, l: 10.2, alpha: 0.1 },
611
+ dark: { h: 330, s: 0, l: 99, alpha: 0.1 },
612
+ css: {
613
+ value: "light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1))",
614
+ variable: "var(--kds-color-border-subtle)",
615
+ },
616
+ },
617
+ "primary-bold": {
618
+ light: { h: 176.7, s: 82, l: 17.5, alpha: 1 },
619
+ dark: { h: 176.7, s: 82, l: 17.5, alpha: 1 },
620
+ css: {
621
+ value: "hsl(176.7, 82%, 17.5%)",
622
+ variable: "var(--kds-color-border-primary-bold)",
623
+ },
624
+ },
625
+ primary: {
626
+ light: { h: 169.8, s: 30.6, l: 66.1, alpha: 1 },
627
+ dark: { h: 168.8, s: 34.4, l: 75.5, alpha: 1 },
628
+ css: {
629
+ value: "light-dark(hsl(169.8, 30.6%, 66.1%), hsl(168.8, 34.4%, 75.5%))",
630
+ variable: "var(--kds-color-border-primary)",
631
+ },
632
+ },
633
+ "selected-bold": {
634
+ light: { h: 174.4, s: 47.8, l: 30.8, alpha: 1 },
635
+ dark: { h: 168.8, s: 34.4, l: 75.5, alpha: 1 },
636
+ css: {
637
+ value: "light-dark(hsl(174.4, 47.8%, 30.8%), hsl(168.8, 34.4%, 75.5%))",
638
+ variable: "var(--kds-color-border-selected-bold)",
639
+ },
640
+ },
641
+ selected: {
642
+ light: { h: 171.8, s: 27, l: 47.8, alpha: 1 },
643
+ dark: { h: 168, s: 46.7, l: 85.3, alpha: 1 },
644
+ css: {
645
+ value: "light-dark(hsl(171.8, 27%, 47.8%), hsl(168, 46.7%, 85.3%))",
646
+ variable: "var(--kds-color-border-selected)",
647
+ },
648
+ },
649
+ "selected-accent": {
650
+ light: { h: 209.4, s: 57.3, l: 49.6, alpha: 1 },
651
+ dark: { h: 213.6, s: 91.6, l: 76.7, alpha: 1 },
652
+ css: {
653
+ value: "light-dark(hsl(209.4, 57.3%, 49.6%), hsl(213.6, 91.6%, 76.7%))",
654
+ variable: "var(--kds-color-border-selected-accent)",
655
+ },
656
+ },
657
+ "warning-bold": {
658
+ light: { h: 19, s: 63.1, l: 38.2, alpha: 1 },
659
+ dark: { h: 31, s: 100, l: 82.5, alpha: 1 },
660
+ css: {
661
+ value: "light-dark(hsl(19, 63.1%, 38.2%), hsl(31, 100%, 82.5%))",
662
+ variable: "var(--kds-color-border-warning-bold)",
663
+ },
664
+ },
665
+ warning: {
666
+ light: { h: 30.8, s: 79.3, l: 73.5, alpha: 1 },
667
+ dark: { h: 13.1, s: 66.1, l: 23.1, alpha: 1 },
668
+ css: {
669
+ value: "light-dark(hsl(30.8, 79.3%, 73.5%), hsl(13.1, 66.1%, 23.1%))",
670
+ variable: "var(--kds-color-border-warning)",
671
+ },
672
+ },
673
+ "danger-bold": {
674
+ light: { h: 348.8, s: 90.9, l: 34.5, alpha: 1 },
675
+ dark: { h: 3.5, s: 100, l: 79.6, alpha: 1 },
676
+ css: {
677
+ value: "light-dark(hsl(348.8, 90.9%, 34.5%), hsl(3.5, 100%, 79.6%))",
678
+ variable: "var(--kds-color-border-danger-bold)",
679
+ },
680
+ },
681
+ danger: {
682
+ light: { h: 3.4, s: 100, l: 86.1, alpha: 1 },
683
+ dark: { h: 348, s: 94.3, l: 20.8, alpha: 1 },
684
+ css: {
685
+ value: "light-dark(hsl(3.4, 100%, 86.1%), hsl(348, 94.3%, 20.8%))",
686
+ variable: "var(--kds-color-border-danger)",
687
+ },
688
+ },
689
+ "success-bold": {
690
+ light: { h: 116.1, s: 46.6, l: 25.7, alpha: 1 },
691
+ dark: { h: 112, s: 56.5, l: 71.2, alpha: 1 },
692
+ css: {
693
+ value: "light-dark(hsl(116.1, 46.6%, 25.7%), hsl(112, 56.5%, 71.2%))",
694
+ variable: "var(--kds-color-border-success-bold)",
695
+ },
696
+ },
697
+ success: {
698
+ light: { h: 112, s: 56.5, l: 71.2, alpha: 1 },
699
+ dark: { h: 123.7, s: 46.7, l: 20.6, alpha: 1 },
700
+ css: {
701
+ value: "light-dark(hsl(112, 56.5%, 71.2%), hsl(123.7, 46.7%, 20.6%))",
702
+ variable: "var(--kds-color-border-success)",
703
+ },
704
+ },
705
+ "info-bold": {
706
+ light: { h: 208.3, s: 60.5, l: 33.7, alpha: 1 },
707
+ dark: { h: 214.5, s: 100, l: 84.3, alpha: 1 },
708
+ css: {
709
+ value: "light-dark(hsl(208.3, 60.5%, 33.7%), hsl(214.5, 100%, 84.3%))",
710
+ variable: "var(--kds-color-border-info-bold)",
711
+ },
712
+ },
713
+ info: {
714
+ light: { h: 214.5, s: 100, l: 84.3, alpha: 1 },
715
+ dark: { h: 210, s: 50, l: 27.5, alpha: 1 },
716
+ css: {
717
+ value: "light-dark(hsl(214.5, 100%, 84.3%), hsl(210, 50%, 27.5%))",
718
+ variable: "var(--kds-color-border-info)",
719
+ },
720
+ },
721
+ transparent: {
722
+ light: { h: 345, s: 0, l: 11.4, alpha: 0 },
723
+ dark: { h: 345, s: 0, l: 11.4, alpha: 0 },
724
+ css: {
725
+ value: "hsl(345 0% 11.4% / 0)",
726
+ variable: "var(--kds-color-border-transparent)",
727
+ },
728
+ },
729
+ disabled: {
730
+ light: { h: 0, s: 0, l: 72.5, alpha: 1 },
731
+ dark: { h: 0, s: 0, l: 48.2, alpha: 1 },
732
+ css: {
733
+ value: "light-dark(hsl(0, 0%, 72.5%), hsl(0, 0%, 48.2%))",
734
+ variable: "var(--kds-color-border-disabled)",
735
+ },
736
+ },
737
+ brand: {
738
+ light: { h: 50.8, s: 100, l: 50, alpha: 1 },
739
+ dark: { h: 50.8, s: 100, l: 50, alpha: 1 },
740
+ css: {
741
+ value: "hsl(50.8, 100%, 50%)",
742
+ variable: "var(--kds-color-border-brand)",
743
+ },
744
+ },
745
+ "neutral-bold-initial": {
746
+ light: { h: 330, s: 0, l: 10.2, alpha: 0.4 },
747
+ dark: { h: 330, s: 0, l: 99, alpha: 0.4 },
748
+ css: {
749
+ value: "light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.4))",
750
+ variable: "var(--kds-color-border-neutral-bold-initial)",
751
+ },
752
+ },
753
+ "neutral-bold-hover": {
754
+ light: { h: 330, s: 0, l: 10.2, alpha: 0.64 },
755
+ dark: { h: 330, s: 0, l: 99, alpha: 0.58 },
756
+ css: {
757
+ value: "light-dark(hsl(330 0% 10.2% / 0.64), hsl(330 0% 99% / 0.58))",
758
+ variable: "var(--kds-color-border-neutral-bold-hover)",
759
+ },
760
+ },
761
+ "neutral-bold-active": {
762
+ light: { h: 330, s: 0, l: 10.2, alpha: 0.74 },
763
+ dark: { h: 330, s: 0, l: 99, alpha: 0.68 },
764
+ css: {
765
+ value: "light-dark(hsl(330 0% 10.2% / 0.74), hsl(330 0% 99% / 0.68))",
766
+ variable: "var(--kds-color-border-neutral-bold-active)",
767
+ },
768
+ },
769
+ },
770
+ focus: {
771
+ outline: {
772
+ light: { h: 209.4, s: 57.3, l: 49.6, alpha: 1 },
773
+ dark: { h: 213.6, s: 91.6, l: 76.7, alpha: 1 },
774
+ css: {
775
+ value: "light-dark(hsl(209.4, 57.3%, 49.6%), hsl(213.6, 91.6%, 76.7%))",
776
+ variable: "var(--kds-color-focus-outline)",
777
+ },
778
+ },
779
+ background: {
780
+ light: { h: 215.7, s: 100, l: 91.8, alpha: 0.4 },
781
+ dark: { h: 209.4, s: 49.5, l: 20.2, alpha: 0.5 },
782
+ css: {
783
+ value: "light-dark(hsl(215.7 100% 91.8% / 0.4), hsl(209.4 49.5% 20.2% / 0.5))",
784
+ variable: "var(--kds-color-focus-background)",
785
+ },
786
+ },
787
+ },
788
+ blanket: {
789
+ default: {
790
+ light: { h: 345, s: 0, l: 11.4, alpha: 0.8 },
791
+ dark: { h: 345, s: 0, l: 11.4, alpha: 0.8 },
792
+ css: {
793
+ value: "hsl(345 0% 11.4% / 0.8)",
794
+ variable: "var(--kds-color-blanket-default)",
795
+ },
796
+ },
797
+ },
798
+ "nodes-and-variables": {
799
+ "flow-variable": {
800
+ light: { h: 359.6, s: 84.3, l: 62.5, alpha: 1 },
801
+ dark: { h: 0, s: 100, l: 66.1, alpha: 1 },
802
+ css: {
803
+ value: "light-dark(hsl(359.6, 84.3%, 62.5%), hsl(0, 100%, 66.1%))",
804
+ variable: "var(--kds-color-nodes-and-variables-flow-variable)",
805
+ },
806
+ },
807
+ loop: {
808
+ light: { h: 187.7, s: 51.7, l: 76.5, alpha: 1 },
809
+ dark: { h: 187.7, s: 51.7, l: 76.5, alpha: 1 },
810
+ css: {
811
+ value: "hsl(187.7, 51.7%, 76.5%)",
812
+ variable: "var(--kds-color-nodes-and-variables-loop)",
813
+ },
814
+ },
815
+ manipulator: {
816
+ light: { h: 50.8, s: 100, l: 50, alpha: 1 },
817
+ dark: { h: 50.8, s: 100, l: 50, alpha: 1 },
818
+ css: {
819
+ value: "hsl(50.8, 100%, 50%)",
820
+ variable: "var(--kds-color-nodes-and-variables-manipulator)",
821
+ },
822
+ },
823
+ predictor: {
824
+ light: { h: 106.5, s: 42.6, l: 54.9, alpha: 1 },
825
+ dark: { h: 109, s: 47.2, l: 61.4, alpha: 1 },
826
+ css: {
827
+ value: "light-dark(hsl(106.5, 42.6%, 54.9%), hsl(109, 47.2%, 61.4%))",
828
+ variable: "var(--kds-color-nodes-and-variables-predictor)",
829
+ },
830
+ },
831
+ source: {
832
+ light: { h: 30, s: 80.4, l: 60, alpha: 1 },
833
+ dark: { h: 30, s: 80.4, l: 60, alpha: 1 },
834
+ css: {
835
+ value: "hsl(30, 80.4%, 60%)",
836
+ variable: "var(--kds-color-nodes-and-variables-source)",
837
+ },
838
+ },
839
+ visualizer: {
840
+ light: { h: 193.1, s: 60.2, l: 43.3, alpha: 1 },
841
+ dark: { h: 191.3, s: 57.1, l: 54.3, alpha: 1 },
842
+ css: {
843
+ value: "light-dark(hsl(193.1, 60.2%, 43.3%), hsl(191.3, 57.1%, 54.3%))",
844
+ variable: "var(--kds-color-nodes-and-variables-visualizer)",
845
+ },
846
+ },
847
+ scope: {
848
+ light: { h: 304.6, s: 27.4, l: 46.5, alpha: 1 },
849
+ dark: { h: 308.3, s: 31.6, l: 55.3, alpha: 1 },
850
+ css: {
851
+ value: "light-dark(hsl(304.6, 27.4%, 46.5%), hsl(308.3, 31.6%, 55.3%))",
852
+ variable: "var(--kds-color-nodes-and-variables-scope)",
853
+ },
854
+ },
855
+ learner: {
856
+ light: { h: 67.3, s: 67.8, l: 54.9, alpha: 1 },
857
+ dark: { h: 65.4, s: 68.5, l: 65.1, alpha: 1 },
858
+ css: {
859
+ value: "light-dark(hsl(67.3, 67.8%, 54.9%), hsl(65.4, 68.5%, 65.1%))",
860
+ variable: "var(--kds-color-nodes-and-variables-learner)",
861
+ },
862
+ },
863
+ sink: {
864
+ light: { h: 359.6, s: 84.3, l: 62.5, alpha: 1 },
865
+ dark: { h: 0, s: 100, l: 66.1, alpha: 1 },
866
+ css: {
867
+ value: "light-dark(hsl(359.6, 84.3%, 62.5%), hsl(0, 100%, 66.1%))",
868
+ variable: "var(--kds-color-nodes-and-variables-sink)",
869
+ },
870
+ },
871
+ container: {
872
+ light: { h: 69.4, s: 53.5, l: 39.6, alpha: 1 },
873
+ dark: { h: 69.4, s: 53.5, l: 39.6, alpha: 1 },
874
+ css: {
875
+ value: "hsl(69.4, 53.5%, 39.6%)",
876
+ variable: "var(--kds-color-nodes-and-variables-container)",
877
+ },
878
+ },
879
+ unknown: {
880
+ light: { h: 353, s: 74.7, l: 44.9, alpha: 1 },
881
+ dark: { h: 356.3, s: 76.8, l: 54.3, alpha: 1 },
882
+ css: {
883
+ value: "light-dark(hsl(353, 74.7%, 44.9%), hsl(356.3, 76.8%, 54.3%))",
884
+ variable: "var(--kds-color-nodes-and-variables-unknown)",
885
+ },
886
+ },
887
+ other: {
888
+ light: { h: 29, s: 43, l: 58, alpha: 1 },
889
+ dark: { h: 30, s: 47, l: 68, alpha: 1 },
890
+ css: {
891
+ value: "light-dark(hsl(29, 43%, 58%), hsl(30, 47%, 68%))",
892
+ variable: "var(--kds-color-nodes-and-variables-other)",
893
+ },
894
+ },
895
+ metanode: {
896
+ light: { h: 0, s: 0, l: 99, alpha: 1 },
897
+ dark: { h: 0, s: 0, l: 12.9, alpha: 1 },
898
+ css: {
899
+ value: "light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 12.9%))",
900
+ variable: "var(--kds-color-nodes-and-variables-metanode)",
901
+ },
902
+ },
903
+ metanodeBorder: {
904
+ light: { h: 0, s: 0, l: 32.2, alpha: 1 },
905
+ dark: { h: 0, s: 0, l: 94.1, alpha: 1 },
906
+ css: {
907
+ value: "light-dark(hsl(0, 0%, 32.2%), hsl(0, 0%, 94.1%))",
908
+ variable: "var(--kds-color-nodes-and-variables-metanode-border)",
909
+ },
910
+ },
911
+ component: {
912
+ light: { h: 0, s: 0, l: 72.5, alpha: 1 },
913
+ dark: { h: 0, s: 0, l: 43, alpha: 1 },
914
+ css: {
915
+ value: "light-dark(hsl(0, 0%, 72.5%), hsl(0, 0%, 43%))",
916
+ variable: "var(--kds-color-nodes-and-variables-component)",
917
+ },
918
+ },
919
+ specialState: {
920
+ light: { h: 0, s: 0, l: 99, alpha: 1 },
921
+ dark: { h: 0, s: 0, l: 12.9, alpha: 1 },
922
+ css: {
923
+ value: "light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 12.9%))",
924
+ variable: "var(--kds-color-nodes-and-variables-special-state)",
925
+ },
926
+ },
927
+ forbiddenBorder: {
928
+ light: { h: 0, s: 0, l: 18.8, alpha: 1 },
929
+ dark: { h: 0, s: 0, l: 90.2, alpha: 1 },
930
+ css: {
931
+ value: "light-dark(hsl(0, 0%, 18.8%), hsl(0, 0%, 90.2%))",
932
+ variable: "var(--kds-color-nodes-and-variables-forbidden-border)",
933
+ },
934
+ },
935
+ forbidden: {
936
+ light: { h: 0, s: 0, l: 90.2, alpha: 1 },
937
+ dark: { h: 0, s: 0, l: 22, alpha: 1 },
938
+ css: {
939
+ value: "light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 22%))",
940
+ variable: "var(--kds-color-nodes-and-variables-forbidden)",
941
+ },
942
+ },
943
+ warningBorder: {
944
+ light: { h: 19, s: 63.1, l: 38.2, alpha: 1 },
945
+ dark: { h: 31.2, s: 82.8, l: 65.9, alpha: 1 },
946
+ css: {
947
+ value: "light-dark(hsl(19, 63.1%, 38.2%), hsl(31.2, 82.8%, 65.9%))",
948
+ variable: "var(--kds-color-nodes-and-variables-warning-border)",
949
+ },
950
+ },
951
+ warning: {
952
+ light: { h: 31, s: 100, l: 82.5, alpha: 1 },
953
+ dark: { h: 0, s: 0, l: 22, alpha: 1 },
954
+ css: {
955
+ value: "light-dark(hsl(31, 100%, 82.5%), hsl(0, 0%, 22%))",
956
+ variable: "var(--kds-color-nodes-and-variables-warning)",
957
+ },
958
+ },
959
+ errorBorder: {
960
+ light: { h: 348.8, s: 90.9, l: 34.5, alpha: 1 },
961
+ dark: { h: 0, s: 100, l: 66.1, alpha: 1 },
962
+ css: {
963
+ value: "light-dark(hsl(348.8, 90.9%, 34.5%), hsl(0, 100%, 66.1%))",
964
+ variable: "var(--kds-color-nodes-and-variables-error-border)",
965
+ },
966
+ },
967
+ error: {
968
+ light: { h: 1.5, s: 100, l: 92.4, alpha: 1 },
969
+ dark: { h: 0, s: 0, l: 22, alpha: 1 },
970
+ css: {
971
+ value: "light-dark(hsl(1.5, 100%, 92.4%), hsl(0, 0%, 22%))",
972
+ variable: "var(--kds-color-nodes-and-variables-error)",
973
+ },
974
+ },
975
+ loadingBorder: {
976
+ light: { h: 208.3, s: 60.5, l: 33.7, alpha: 1 },
977
+ dark: { h: 214.5, s: 100, l: 84.3, alpha: 1 },
978
+ css: {
979
+ value: "light-dark(hsl(208.3, 60.5%, 33.7%), hsl(214.5, 100%, 84.3%))",
980
+ variable: "var(--kds-color-nodes-and-variables-loading-border)",
981
+ },
982
+ },
983
+ loading: {
984
+ light: { h: 215.7, s: 100, l: 91.8, alpha: 1 },
985
+ dark: { h: 209.4, s: 49.5, l: 20.2, alpha: 1 },
986
+ css: {
987
+ value: "light-dark(hsl(215.7, 100%, 91.8%), hsl(209.4, 49.5%, 20.2%))",
988
+ variable: "var(--kds-color-nodes-and-variables-loading)",
989
+ },
990
+ },
991
+ configuration: {
992
+ light: { h: 64.6, s: 68.6, l: 70, alpha: 1 },
993
+ dark: { h: 69.5, s: 59.5, l: 85.5, alpha: 1 },
994
+ css: {
995
+ value: "light-dark(hsl(64.6, 68.6%, 70.0%), hsl(69.5, 59.5%, 85.5%))",
996
+ variable: "var(--kds-color-nodes-and-variables-configuration)",
997
+ },
998
+ },
999
+ quickform: {
1000
+ light: { h: 212.1, s: 78.2, l: 67.6, alpha: 1 },
1001
+ dark: { h: 214.5, s: 100, l: 84.3, alpha: 1 },
1002
+ css: {
1003
+ value: "light-dark(hsl(212.1, 78.2%, 67.6%), hsl(214.5, 100%, 84.3%))",
1004
+ variable: "var(--kds-color-nodes-and-variables-quickform)",
1005
+ },
1006
+ },
1007
+ },
1008
+ port: {
1009
+ data: {
1010
+ light: { h: 0, s: 0, l: 11.4, alpha: 1 },
1011
+ dark: { h: 0, s: 0, l: 94.1, alpha: 1 },
1012
+ css: {
1013
+ value: "light-dark(hsl(0, 0%, 11.4%), hsl(0, 0%, 94.1%))",
1014
+ variable: "var(--kds-color-port-data)",
1015
+ },
1016
+ },
1017
+ "flow-variable": {
1018
+ light: { h: 359.6, s: 84.3, l: 62.5, alpha: 1 },
1019
+ dark: { h: 359.6, s: 84.3, l: 62.5, alpha: 1 },
1020
+ css: {
1021
+ value: "hsl(359.6, 84.3%, 62.5%)",
1022
+ variable: "var(--kds-color-port-flow-variable)",
1023
+ },
1024
+ },
1025
+ "neutral-inverted": {
1026
+ light: { h: 0, s: 0, l: 99, alpha: 1 },
1027
+ dark: { h: 0, s: 0, l: 12.9, alpha: 1 },
1028
+ css: {
1029
+ value: "light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 12.9%))",
1030
+ variable: "var(--kds-color-port-neutral-inverted)",
1031
+ },
1032
+ },
1033
+ },
1034
+ annotations: {
1035
+ specialNodes: {
1036
+ light: { h: 0, s: 0, l: 72.5, alpha: 1 },
1037
+ dark: { h: 0, s: 0, l: 32.2, alpha: 1 },
1038
+ css: {
1039
+ value: "light-dark(hsl(0, 0%, 72.5%), hsl(0, 0%, 32.2%))",
1040
+ variable: "var(--kds-color-annotations-special-nodes)",
1041
+ },
1042
+ },
1043
+ specialNodesBold: {
1044
+ light: { h: 0, s: 0, l: 32.2, alpha: 1 },
1045
+ dark: { h: 0, s: 0, l: 90.2, alpha: 1 },
1046
+ css: {
1047
+ value: "light-dark(hsl(0, 0%, 32.2%), hsl(0, 0%, 90.2%))",
1048
+ variable: "var(--kds-color-annotations-special-nodes-bold)",
1049
+ },
1050
+ },
1051
+ visualizer: {
1052
+ light: { h: 193.1, s: 60.2, l: 43.3, alpha: 1 },
1053
+ dark: { h: 191.3, s: 57.1, l: 54.3, alpha: 1 },
1054
+ css: {
1055
+ value: "light-dark(hsl(193.1, 60.2%, 43.3%), hsl(191.3, 57.1%, 54.3%))",
1056
+ variable: "var(--kds-color-annotations-visualizer)",
1057
+ },
1058
+ },
1059
+ loadingBold: {
1060
+ light: { h: 208.3, s: 60.5, l: 33.7, alpha: 1 },
1061
+ dark: { h: 214.5, s: 100, l: 84.3, alpha: 1 },
1062
+ css: {
1063
+ value: "light-dark(hsl(208.3, 60.5%, 33.7%), hsl(214.5, 100%, 84.3%))",
1064
+ variable: "var(--kds-color-annotations-loading-bold)",
1065
+ },
1066
+ },
1067
+ manipulator: {
1068
+ light: { h: 50.8, s: 100, l: 50, alpha: 1 },
1069
+ dark: { h: 50.8, s: 100, l: 50, alpha: 1 },
1070
+ css: {
1071
+ value: "hsl(50.8, 100%, 50%)",
1072
+ variable: "var(--kds-color-annotations-manipulator)",
1073
+ },
1074
+ },
1075
+ source: {
1076
+ light: { h: 30, s: 80.4, l: 60, alpha: 1 },
1077
+ dark: { h: 30, s: 80.4, l: 60, alpha: 1 },
1078
+ css: {
1079
+ value: "hsl(30, 80.4%, 60%)",
1080
+ variable: "var(--kds-color-annotations-source)",
1081
+ },
1082
+ },
1083
+ sink: {
1084
+ light: { h: 359.6, s: 84.3, l: 62.5, alpha: 1 },
1085
+ dark: { h: 0, s: 100, l: 66.1, alpha: 1 },
1086
+ css: {
1087
+ value: "light-dark(hsl(359.6, 84.3%, 62.5%), hsl(0, 100%, 66.1%))",
1088
+ variable: "var(--kds-color-annotations-sink)",
1089
+ },
1090
+ },
1091
+ learner: {
1092
+ light: { h: 67.3, s: 67.8, l: 54.9, alpha: 1 },
1093
+ dark: { h: 65.4, s: 68.5, l: 65.1, alpha: 1 },
1094
+ css: {
1095
+ value: "light-dark(hsl(67.3, 67.8%, 54.9%), hsl(65.4, 68.5%, 65.1%))",
1096
+ variable: "var(--kds-color-annotations-learner)",
1097
+ },
1098
+ },
1099
+ predictor: {
1100
+ light: { h: 106.5, s: 42.6, l: 54.9, alpha: 1 },
1101
+ dark: { h: 109, s: 47.2, l: 61.4, alpha: 1 },
1102
+ css: {
1103
+ value: "light-dark(hsl(106.5, 42.6%, 54.9%), hsl(109, 47.2%, 61.4%))",
1104
+ variable: "var(--kds-color-annotations-predictor)",
1105
+ },
1106
+ },
1107
+ container: {
1108
+ light: { h: 66.5, s: 64.4, l: 80.2, alpha: 1 },
1109
+ dark: { h: 69.5, s: 59.5, l: 85.5, alpha: 1 },
1110
+ css: {
1111
+ value: "light-dark(hsl(66.5, 64.4%, 80.2%), hsl(69.5, 59.5%, 85.5%))",
1112
+ variable: "var(--kds-color-annotations-container)",
1113
+ },
1114
+ },
1115
+ "flow-variable": {
1116
+ light: { h: 173.4, s: 37.1, l: 38.6, alpha: 1 },
1117
+ dark: { h: 171.8, s: 27, l: 47.8, alpha: 1 },
1118
+ css: {
1119
+ value: "light-dark(hsl(173.4, 37.1%, 38.6%), hsl(171.8, 27%, 47.8%))",
1120
+ variable: "var(--kds-color-annotations-flow-variable)",
1121
+ },
1122
+ },
1123
+ tealDark: {
1124
+ light: { h: 176.7, s: 82, l: 17.5, alpha: 1 },
1125
+ dark: { h: 176.1, s: 66.7, l: 22.4, alpha: 1 },
1126
+ css: {
1127
+ value: "light-dark(hsl(176.7, 82%, 17.5%), hsl(176.1, 66.7%, 22.4%))",
1128
+ variable: "var(--kds-color-annotations-teal-dark)",
1129
+ },
1130
+ },
1131
+ other: {
1132
+ light: { h: 29, s: 43, l: 58, alpha: 1 },
1133
+ dark: { h: 30, s: 47, l: 68, alpha: 1 },
1134
+ css: {
1135
+ value: "light-dark(hsl(29, 43%, 58%), hsl(30, 47%, 68%))",
1136
+ variable: "var(--kds-color-annotations-other)",
1137
+ },
1138
+ },
1139
+ loop: {
1140
+ light: { h: 25, s: 30, l: 35, alpha: 1 },
1141
+ dark: { h: 27, s: 35, l: 44, alpha: 1 },
1142
+ css: {
1143
+ value: "light-dark(hsl(25, 30%, 35%), hsl(27, 35%, 44%))",
1144
+ variable: "var(--kds-color-annotations-loop)",
1145
+ },
1146
+ },
1147
+ },
1148
+ state: {
1149
+ error: {
1150
+ light: { h: 353, s: 74.7, l: 44.9, alpha: 1 },
1151
+ dark: { h: 347.6, s: 97.1, l: 27.3, alpha: 1 },
1152
+ css: {
1153
+ value: "light-dark(hsl(353, 74.7%, 44.9%), hsl(347.6, 97.1%, 27.3%))",
1154
+ variable: "var(--kds-color-state-error)",
1155
+ },
1156
+ },
1157
+ "error-border": {
1158
+ light: { h: 348, s: 94.3, l: 20.8, alpha: 1 },
1159
+ dark: { h: 2.6, s: 100, l: 72.4, alpha: 1 },
1160
+ css: {
1161
+ value: "light-dark(hsl(348, 94.3%, 20.8%), hsl(2.6, 100%, 72.4%))",
1162
+ variable: "var(--kds-color-state-error-border)",
1163
+ },
1164
+ },
1165
+ warning: {
1166
+ light: { h: 47.6, s: 100, l: 67.6, alpha: 1 },
1167
+ dark: { h: 43.9, s: 100, l: 26.3, alpha: 1 },
1168
+ css: {
1169
+ value: "light-dark(hsl(47.6, 100%, 67.6%), hsl(43.9, 100%, 26.3%))",
1170
+ variable: "var(--kds-color-state-warning)",
1171
+ },
1172
+ },
1173
+ "warning-border": {
1174
+ light: { h: 19, s: 63.1, l: 38.2, alpha: 1 },
1175
+ dark: { h: 49.1, s: 99.1, l: 43.7, alpha: 1 },
1176
+ css: {
1177
+ value: "light-dark(hsl(19, 63.1%, 38.2%), hsl(49.1, 99.1%, 43.7%))",
1178
+ variable: "var(--kds-color-state-warning-border)",
1179
+ },
1180
+ },
1181
+ success: {
1182
+ light: { h: 106.5, s: 42.6, l: 54.9, alpha: 1 },
1183
+ dark: { h: 107.6, s: 46, l: 37.1, alpha: 1 },
1184
+ css: {
1185
+ value: "light-dark(hsl(106.5, 42.6%, 54.9%), hsl(107.6, 46%, 37.1%))",
1186
+ variable: "var(--kds-color-state-success)",
1187
+ },
1188
+ },
1189
+ "success-border": {
1190
+ light: { h: 116.1, s: 46.6, l: 25.7, alpha: 1 },
1191
+ dark: { h: 106.5, s: 42.6, l: 54.9, alpha: 1 },
1192
+ css: {
1193
+ value: "light-dark(hsl(116.1, 46.6%, 25.7%), hsl(106.5, 42.6%, 54.9%))",
1194
+ variable: "var(--kds-color-state-success-border)",
1195
+ },
1196
+ },
1197
+ loading: {
1198
+ light: { h: 208.3, s: 60.5, l: 33.7, alpha: 1 },
1199
+ dark: { h: 214.5, s: 100, l: 84.3, alpha: 1 },
1200
+ css: {
1201
+ value: "light-dark(hsl(208.3, 60.5%, 33.7%), hsl(214.5, 100%, 84.3%))",
1202
+ variable: "var(--kds-color-state-loading)",
1203
+ },
1204
+ },
1205
+ inactive: {
1206
+ light: { h: 0, s: 0, l: 99, alpha: 1 },
1207
+ dark: { h: 0, s: 0, l: 11.4, alpha: 1 },
1208
+ css: {
1209
+ value: "light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 11.4%))",
1210
+ variable: "var(--kds-color-state-inactive)",
1211
+ },
1212
+ },
1213
+ "inactive-border": {
1214
+ light: { h: 0, s: 0, l: 90.2, alpha: 1 },
1215
+ dark: { h: 0, s: 0, l: 32.2, alpha: 1 },
1216
+ css: {
1217
+ value: "light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 32.2%))",
1218
+ variable: "var(--kds-color-state-inactive-border)",
1219
+ },
1220
+ },
1221
+ disabled: {
1222
+ light: { h: 0, s: 0, l: 72.5, alpha: 1 },
1223
+ dark: { h: 0, s: 0, l: 22, alpha: 1 },
1224
+ css: {
1225
+ value: "light-dark(hsl(0, 0%, 72.5%), hsl(0, 0%, 22%))",
1226
+ variable: "var(--kds-color-state-disabled)",
1227
+ },
1228
+ },
1229
+ "disabled-border": {
1230
+ light: { h: 0, s: 0, l: 48.2, alpha: 1 },
1231
+ dark: { h: 0, s: 0, l: 48.2, alpha: 1 },
1232
+ css: {
1233
+ value: "hsl(0, 0%, 48.2%)",
1234
+ variable: "var(--kds-color-state-disabled-border)",
1235
+ },
1236
+ },
1237
+ background: {
1238
+ light: { h: 0, s: 0, l: 90.2, alpha: 1 },
1239
+ dark: { h: 0, s: 0, l: 32.2, alpha: 1 },
1240
+ css: {
1241
+ value: "light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 32.2%))",
1242
+ variable: "var(--kds-color-state-background)",
1243
+ },
1244
+ },
1245
+ },
1246
+ connector: {
1247
+ data: {
1248
+ light: { h: 0, s: 0, l: 15.7, alpha: 1 },
1249
+ dark: { h: 0, s: 0, l: 94.1, alpha: 1 },
1250
+ css: {
1251
+ value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
1252
+ variable: "var(--kds-color-connector-data)",
1253
+ },
1254
+ },
1255
+ "flow-variable": {
1256
+ light: { h: 359.6, s: 84.3, l: 62.5, alpha: 1 },
1257
+ dark: { h: 359.6, s: 84.3, l: 62.5, alpha: 1 },
1258
+ css: {
1259
+ value: "hsl(359.6, 84.3%, 62.5%)",
1260
+ variable: "var(--kds-color-connector-flow-variable)",
1261
+ },
1262
+ },
1263
+ },
1264
+ elevation: {
1265
+ top: {
1266
+ light: { h: 210, s: 0, l: 72.5, alpha: 0.32 },
1267
+ dark: { h: 330, s: 0, l: 10.2, alpha: 0.9 },
1268
+ css: {
1269
+ value: "light-dark(hsl(210 0% 72.5% / 0.32), hsl(330 0% 10.2% / 0.9))",
1270
+ variable: "var(--kds-color-elevation-top)",
1271
+ },
1272
+ },
1273
+ middle: {
1274
+ light: { h: 180, s: 0, l: 32.2, alpha: 0.14 },
1275
+ dark: { h: 330, s: 0, l: 10.2, alpha: 0.94 },
1276
+ css: {
1277
+ value: "light-dark(hsl(180 0% 32.2% / 0.14), hsl(330 0% 10.2% / 0.94))",
1278
+ variable: "var(--kds-color-elevation-middle)",
1279
+ },
1280
+ },
1281
+ bottom: {
1282
+ light: { h: 180, s: 0, l: 32.2, alpha: 0.12 },
1283
+ dark: { h: 330, s: 0, l: 10.2, alpha: 0.98 },
1284
+ css: {
1285
+ value: "light-dark(hsl(180 0% 32.2% / 0.12), hsl(330 0% 10.2% / 0.98))",
1286
+ variable: "var(--kds-color-elevation-bottom)",
1287
+ },
1288
+ },
1289
+ knob: {
1290
+ light: { h: 180, s: 0, l: 32.2, alpha: 0.5 },
1291
+ dark: { h: 330, s: 0, l: 10.2, alpha: 0.6 },
1292
+ css: {
1293
+ value: "light-dark(hsl(180 0% 32.2% / 0.5), hsl(330 0% 10.2% / 0.6))",
1294
+ variable: "var(--kds-color-elevation-knob)",
1295
+ },
1296
+ },
1297
+ },
1298
+ DesktopHeader: {
1299
+ background: {
1300
+ default: {
1301
+ light: { h: 0, s: 0, l: 10.2, alpha: 1 },
1302
+ dark: { h: 0, s: 0, l: 10.2, alpha: 1 },
1303
+ css: {
1304
+ value: "hsl(0, 0%, 10.2%)",
1305
+ variable: "var(--kds-color-desktop-header-background-default)",
1306
+ },
1307
+ },
1308
+ muted: {
1309
+ light: { h: 0, s: 0, l: 98, alpha: 1 },
1310
+ dark: { h: 0, s: 0, l: 15.7, alpha: 1 },
1311
+ css: {
1312
+ value: "light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%))",
1313
+ variable: "var(--kds-color-desktop-header-background-muted)",
1314
+ },
1315
+ },
1316
+ accent: {
1317
+ light: { h: 0, s: 0, l: 98, alpha: 1 },
1318
+ dark: { h: 0, s: 0, l: 15.7, alpha: 1 },
1319
+ css: {
1320
+ value: "light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%))",
1321
+ variable: "var(--kds-color-desktop-header-background-accent)",
1322
+ },
1323
+ },
1324
+ },
1325
+ "text-and-icon": {
1326
+ neutral: {
1327
+ light: { h: 0, s: 0, l: 15.7, alpha: 1 },
1328
+ dark: { h: 0, s: 0, l: 94.1, alpha: 1 },
1329
+ css: {
1330
+ value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
1331
+ variable: "var(--kds-color-desktop-header-text-and-icon-neutral)",
1332
+ },
1333
+ },
1334
+ muted: {
1335
+ light: { h: 0, s: 0, l: 32.2, alpha: 1 },
1336
+ dark: { h: 0, s: 0, l: 90.2, alpha: 1 },
1337
+ css: {
1338
+ value: "light-dark(hsl(0, 0%, 32.2%), hsl(0, 0%, 90.2%))",
1339
+ variable: "var(--kds-color-desktop-header-text-and-icon-muted)",
1340
+ },
1341
+ },
1342
+ },
1343
+ border: {
1344
+ default: {
1345
+ light: { h: 330, s: 0, l: 10.2, alpha: 0.1 },
1346
+ dark: { h: 330, s: 0, l: 99, alpha: 0.1 },
1347
+ css: {
1348
+ value: "light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1))",
1349
+ variable: "var(--kds-color-desktop-header-border-default)",
1350
+ },
1351
+ },
1352
+ },
1353
+ },
1354
+ TableHeader: {
1355
+ background: {
1356
+ default: {
1357
+ light: { h: 0, s: 0, l: 99, alpha: 1 },
1358
+ dark: { h: 0, s: 0, l: 99, alpha: 1 },
1359
+ css: {
1360
+ value: "hsl(0, 0%, 99%)",
1361
+ variable: "var(--kds-color-table-header-background-default)",
1362
+ },
1363
+ },
1364
+ },
1365
+ },
1366
+ ToggleSwitch: {
1367
+ knob: {
1368
+ initial: {
1369
+ light: { h: 0, s: 0, l: 99, alpha: 1 },
1370
+ dark: { h: 0, s: 0, l: 99, alpha: 1 },
1371
+ css: {
1372
+ value: "hsl(0, 0%, 99%)",
1373
+ variable: "var(--kds-color-toggle-switch-knob-initial)",
1374
+ },
1375
+ },
1376
+ disabled: {
1377
+ light: { h: 0, s: 0, l: 90.2, alpha: 1 },
1378
+ dark: { h: 0, s: 0, l: 90.2, alpha: 1 },
1379
+ css: {
1380
+ value: "hsl(0, 0%, 90.2%)",
1381
+ variable: "var(--kds-color-toggle-switch-knob-disabled)",
1382
+ },
1383
+ },
1384
+ },
1385
+ icon: {
1386
+ on: {
1387
+ light: { h: 176.1, s: 66.7, l: 22.4, alpha: 1 },
1388
+ dark: { h: 176.1, s: 66.7, l: 22.4, alpha: 1 },
1389
+ css: {
1390
+ value: "hsl(176.1, 66.7%, 22.4%)",
1391
+ variable: "var(--kds-color-toggle-switch-icon-on)",
1392
+ },
1393
+ },
1394
+ off: {
1395
+ light: { h: 0, s: 0, l: 43, alpha: 1 },
1396
+ dark: { h: 0, s: 0, l: 43, alpha: 1 },
1397
+ css: {
1398
+ value: "hsl(0, 0%, 43%)",
1399
+ variable: "var(--kds-color-toggle-switch-icon-off)",
1400
+ },
1401
+ },
1402
+ disabled: {
1403
+ light: { h: 0, s: 0, l: 64, alpha: 1 },
1404
+ dark: { h: 0, s: 0, l: 64, alpha: 1 },
1405
+ css: {
1406
+ value: "hsl(0, 0%, 64%)",
1407
+ variable: "var(--kds-color-toggle-switch-icon-disabled)",
1408
+ },
1409
+ },
1410
+ },
1411
+ },
1412
+ LoadingSpinner: {
1413
+ progress: {
1414
+ onPrimary: {
1415
+ light: { h: 165.6, s: 67.6, l: 92.7, alpha: 1 },
1416
+ dark: { h: 165.6, s: 67.6, l: 92.7, alpha: 1 },
1417
+ css: {
1418
+ value: "hsl(165.6 67.6% 92.7%)",
1419
+ variable: "var(--kds-color-loading-spinner-progress-on-primary)",
1420
+ },
1421
+ },
1422
+ onSurface: {
1423
+ light: { h: 0, s: 0, l: 15.7, alpha: 1 },
1424
+ dark: { h: 0, s: 0, l: 94.1, alpha: 1 },
1425
+ css: {
1426
+ value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
1427
+ variable: "var(--kds-color-loading-spinner-progress-on-surface)",
1428
+ },
1429
+ },
1430
+ },
1431
+ track: {
1432
+ onPrimary: {
1433
+ light: { h: 165.6, s: 67.6, l: 92.7, alpha: 0.24 },
1434
+ dark: { h: 165.6, s: 67.6, l: 92.7, alpha: 0.24 },
1435
+ css: {
1436
+ value: "hsl(165.6 67.6% 92.7% / 0.24)",
1437
+ variable: "var(--kds-color-loading-spinner-track-on-primary)",
1438
+ },
1439
+ },
1440
+ onSurface: {
1441
+ light: { h: 332.73, s: 0, l: 15.7, alpha: 0.24 },
1442
+ dark: { h: 240, s: 0, l: 94.1, alpha: 0.24 },
1443
+ css: {
1444
+ value: "light-dark(hsl(332.73 0% 15.7% / 0.24), hsl(240 0% 94.1% / 0.24))",
1445
+ variable: "var(--kds-color-loading-spinner-track-on-surface)",
1446
+ },
1447
+ },
1448
+ },
1449
+ },
1450
+ Tooltip: {
1451
+ background: {
1452
+ default: {
1453
+ light: { h: 0, s: 0, l: 12.9, alpha: 1 },
1454
+ dark: { h: 0, s: 0, l: 22, alpha: 1 },
1455
+ css: {
1456
+ value: "light-dark(hsl(0, 0%, 12.9%), hsl(0, 0%, 22%))",
1457
+ variable: "var(--kds-color-tooltip-background-default)",
1458
+ },
1459
+ },
1460
+ },
1461
+ "text-and-icon": {
1462
+ neutral: {
1463
+ light: { h: 0, s: 0, l: 98, alpha: 1 },
1464
+ dark: { h: 0, s: 0, l: 98, alpha: 1 },
1465
+ css: {
1466
+ value: "hsl(0, 0%, 98%)",
1467
+ variable: "var(--kds-color-tooltip-text-and-icon-neutral)",
1468
+ },
1469
+ },
1470
+ },
1471
+ },
1472
+ TextHighlight: {
1473
+ background: {
1474
+ default: {
1475
+ light: { h: 212.1, s: 78.2, l: 67.6, alpha: 0.6 },
1476
+ dark: { h: 212.1, s: 78.2, l: 67.6, alpha: 0.6 },
1477
+ css: {
1478
+ value: "hsl(212.1 78.2% 67.6% / 0.6)",
1479
+ variable: "var(--kds-color-text-highlight-background-default)",
1480
+ },
1481
+ },
1482
+ },
1483
+ },
1484
+ Avatar: {
1485
+ background: {
1486
+ red: {
1487
+ light: { h: 3.5, s: 100, l: 79.6, alpha: 1 },
1488
+ dark: { h: 3.5, s: 100, l: 79.6, alpha: 1 },
1489
+ css: {
1490
+ value: "hsl(3.5, 100%, 79.6%)",
1491
+ variable: "var(--kds-color-avatar-background-red)",
1492
+ },
1493
+ },
1494
+ orange: {
1495
+ light: { h: 31.2, s: 82.8, l: 65.9, alpha: 1 },
1496
+ dark: { h: 31.2, s: 82.8, l: 65.9, alpha: 1 },
1497
+ css: {
1498
+ value: "hsl(31.2, 82.8%, 65.9%)",
1499
+ variable: "var(--kds-color-avatar-background-orange)",
1500
+ },
1501
+ },
1502
+ yellow: {
1503
+ light: { h: 50.8, s: 100, l: 50, alpha: 1 },
1504
+ dark: { h: 50.8, s: 100, l: 50, alpha: 1 },
1505
+ css: {
1506
+ value: "hsl(50.8, 100%, 50%)",
1507
+ variable: "var(--kds-color-avatar-background-yellow)",
1508
+ },
1509
+ },
1510
+ green: {
1511
+ light: { h: 109, s: 47.2, l: 61.4, alpha: 1 },
1512
+ dark: { h: 109, s: 47.2, l: 61.4, alpha: 1 },
1513
+ css: {
1514
+ value: "hsl(109, 47.2%, 61.4%)",
1515
+ variable: "var(--kds-color-avatar-background-green)",
1516
+ },
1517
+ },
1518
+ teal: {
1519
+ light: { h: 169.8, s: 30.6, l: 66.1, alpha: 1 },
1520
+ dark: { h: 169.8, s: 30.6, l: 66.1, alpha: 1 },
1521
+ css: {
1522
+ value: "hsl(169.8, 30.6%, 66.1%)",
1523
+ variable: "var(--kds-color-avatar-background-teal)",
1524
+ },
1525
+ },
1526
+ blue: {
1527
+ light: { h: 213.6, s: 91.6, l: 76.7, alpha: 1 },
1528
+ dark: { h: 213.6, s: 91.6, l: 76.7, alpha: 1 },
1529
+ css: {
1530
+ value: "hsl(213.6, 91.6%, 76.7%)",
1531
+ variable: "var(--kds-color-avatar-background-blue)",
1532
+ },
1533
+ },
1534
+ purple: {
1535
+ light: { h: 320, s: 44.7, l: 81.6, alpha: 1 },
1536
+ dark: { h: 320, s: 44.7, l: 81.6, alpha: 1 },
1537
+ css: {
1538
+ value: "hsl(320.0, 44.7%, 81.6%)",
1539
+ variable: "var(--kds-color-avatar-background-purple)",
1540
+ },
1541
+ },
1542
+ aquamarine: {
1543
+ light: { h: 185.8, s: 49.2, l: 87.6, alpha: 1 },
1544
+ dark: { h: 185.8, s: 49.2, l: 87.6, alpha: 1 },
1545
+ css: {
1546
+ value: "hsl(185.8, 49.2%, 87.6%)",
1547
+ variable: "var(--kds-color-avatar-background-aquamarine)",
1548
+ },
1549
+ },
1550
+ grassgreen: {
1551
+ light: { h: 63.4, s: 68.5, l: 75.1, alpha: 1 },
1552
+ dark: { h: 63.4, s: 68.5, l: 75.1, alpha: 1 },
1553
+ css: {
1554
+ value: "hsl(63.4, 68.5%, 75.1%)",
1555
+ variable: "var(--kds-color-avatar-background-grassgreen)",
1556
+ },
1557
+ },
1558
+ brown: {
1559
+ light: { h: 30, s: 47, l: 68, alpha: 1 },
1560
+ dark: { h: 30, s: 47, l: 68, alpha: 1 },
1561
+ css: {
1562
+ value: "hsl(30, 47%, 68%)",
1563
+ variable: "var(--kds-color-avatar-background-brown)",
1564
+ },
1565
+ },
1566
+ empty: {
1567
+ light: { h: 330, s: 0, l: 94.521, alpha: 1 },
1568
+ dark: { h: 330, s: 0, l: 30.187, alpha: 1 },
1569
+ css: {
1570
+ value: "light-dark(hsl(330 0% 94.521%), hsl(330 0% 30.187%))",
1571
+ variable: "var(--kds-color-avatar-background-empty)",
1572
+ },
1573
+ },
1574
+ },
1575
+ "text-and-icon": {
1576
+ red: {
1577
+ light: { h: 348, s: 94.3, l: 20.8, alpha: 1 },
1578
+ dark: { h: 348, s: 94.3, l: 20.8, alpha: 1 },
1579
+ css: {
1580
+ value: "hsl(348, 94.3%, 20.8%)",
1581
+ variable: "var(--kds-color-avatar-text-and-icon-red)",
1582
+ },
1583
+ },
1584
+ orange: {
1585
+ light: { h: 13.1, s: 66.1, l: 23.1, alpha: 1 },
1586
+ dark: { h: 13.1, s: 66.1, l: 23.1, alpha: 1 },
1587
+ css: {
1588
+ value: "hsl(13.1, 66.1%, 23.1%)",
1589
+ variable: "var(--kds-color-avatar-text-and-icon-orange)",
1590
+ },
1591
+ },
1592
+ yellow: {
1593
+ light: { h: 44.3, s: 94.2, l: 13.5, alpha: 1 },
1594
+ dark: { h: 44.3, s: 94.2, l: 13.5, alpha: 1 },
1595
+ css: {
1596
+ value: "hsl(44.3, 94.2%, 13.5%)",
1597
+ variable: "var(--kds-color-avatar-text-and-icon-yellow)",
1598
+ },
1599
+ },
1600
+ green: {
1601
+ light: { h: 132.3, s: 52, l: 14.7, alpha: 1 },
1602
+ dark: { h: 132.3, s: 52, l: 14.7, alpha: 1 },
1603
+ css: {
1604
+ value: "hsl(132.3, 52%, 14.7%)",
1605
+ variable: "var(--kds-color-avatar-text-and-icon-green)",
1606
+ },
1607
+ },
1608
+ teal: {
1609
+ light: { h: 174.5, s: 93.2, l: 11.6, alpha: 1 },
1610
+ dark: { h: 174.5, s: 93.2, l: 11.6, alpha: 1 },
1611
+ css: {
1612
+ value: "hsl(174.5, 93.2%, 11.6%)",
1613
+ variable: "var(--kds-color-avatar-text-and-icon-teal)",
1614
+ },
1615
+ },
1616
+ blue: {
1617
+ light: { h: 209.4, s: 49.5, l: 20.2, alpha: 1 },
1618
+ dark: { h: 209.4, s: 49.5, l: 20.2, alpha: 1 },
1619
+ css: {
1620
+ value: "hsl(209.4, 49.5%, 20.2%)",
1621
+ variable: "var(--kds-color-avatar-text-and-icon-blue)",
1622
+ },
1623
+ },
1624
+ purple: {
1625
+ light: { h: 295.5, s: 33.9, l: 23.1, alpha: 1 },
1626
+ dark: { h: 295.5, s: 33.9, l: 23.1, alpha: 1 },
1627
+ css: {
1628
+ value: "hsl(295.5, 33.9%, 23.1%)",
1629
+ variable: "var(--kds-color-avatar-text-and-icon-purple)",
1630
+ },
1631
+ },
1632
+ aquamarine: {
1633
+ light: { h: 200.9, s: 63.2, l: 26.7, alpha: 1 },
1634
+ dark: { h: 200.9, s: 63.2, l: 26.7, alpha: 1 },
1635
+ css: {
1636
+ value: "hsl(200.9, 63.2%, 26.7%)",
1637
+ variable: "var(--kds-color-avatar-text-and-icon-aquamarine)",
1638
+ },
1639
+ },
1640
+ grassgreen: {
1641
+ light: { h: 72.2, s: 39.2, l: 24.5, alpha: 1 },
1642
+ dark: { h: 72.2, s: 39.2, l: 24.5, alpha: 1 },
1643
+ css: {
1644
+ value: "hsl(72.2, 39.2%, 24.5%)",
1645
+ variable: "var(--kds-color-avatar-text-and-icon-grassgreen)",
1646
+ },
1647
+ },
1648
+ brown: {
1649
+ light: { h: 23, s: 27, l: 24, alpha: 1 },
1650
+ dark: { h: 23, s: 27, l: 24, alpha: 1 },
1651
+ css: {
1652
+ value: "hsl(23, 27%, 24%)",
1653
+ variable: "var(--kds-color-avatar-text-and-icon-brown)",
1654
+ },
1655
+ },
1656
+ },
1657
+ },
1658
+ };