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