@amboss/design-system 3.3.3 → 3.5.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 (41) hide show
  1. package/build/cjs/components/Badge/Badge.js +1 -1
  2. package/build/cjs/components/DropdownMenu/MenuItem.js +1 -1
  3. package/build/cjs/components/Form/DateInput/DateInput.d.ts +11 -0
  4. package/build/cjs/components/Form/DateInput/DateInput.js +1 -0
  5. package/build/cjs/components/Form/MaskedInput/MaskedInput.d.ts +2 -24
  6. package/build/cjs/components/Toast/Toast.d.ts +19 -0
  7. package/build/cjs/components/Toast/Toast.js +1 -0
  8. package/build/cjs/components/Toast/ToastProvider.d.ts +7 -0
  9. package/build/cjs/components/Toast/ToastProvider.js +1 -0
  10. package/build/cjs/components/Toast/index.d.ts +2 -0
  11. package/build/cjs/components/Toast/index.js +1 -0
  12. package/build/cjs/components/VirtualScrollList/VirtualScrollList.js +1 -1
  13. package/build/cjs/index.d.ts +2 -0
  14. package/build/cjs/index.js +1 -1
  15. package/build/cjs/web-tokens/_colors.json +209 -55
  16. package/build/cjs/web-tokens/assets/icons.json +185 -167
  17. package/build/cjs/web-tokens/assets/icons16.json +186 -179
  18. package/build/cjs/web-tokens/visualConfig.d.ts +37 -0
  19. package/build/cjs/web-tokens/visualConfig.js +1 -1
  20. package/build/esm/components/Badge/Badge.js +1 -1
  21. package/build/esm/components/DropdownMenu/MenuItem.js +1 -1
  22. package/build/esm/components/Form/DateInput/DateInput.d.ts +11 -0
  23. package/build/esm/components/Form/DateInput/DateInput.js +1 -0
  24. package/build/esm/components/Form/MaskedInput/MaskedInput.d.ts +2 -24
  25. package/build/esm/components/Toast/Toast.d.ts +19 -0
  26. package/build/esm/components/Toast/Toast.js +1 -0
  27. package/build/esm/components/Toast/ToastProvider.d.ts +7 -0
  28. package/build/esm/components/Toast/ToastProvider.js +1 -0
  29. package/build/esm/components/Toast/index.d.ts +2 -0
  30. package/build/esm/components/Toast/index.js +1 -0
  31. package/build/esm/components/VirtualScrollList/VirtualScrollList.js +1 -1
  32. package/build/esm/index.d.ts +2 -0
  33. package/build/esm/index.js +1 -1
  34. package/build/esm/web-tokens/_colors.json +209 -55
  35. package/build/esm/web-tokens/assets/icons.json +185 -167
  36. package/build/esm/web-tokens/assets/icons16.json +186 -179
  37. package/build/esm/web-tokens/visualConfig.d.ts +37 -0
  38. package/build/esm/web-tokens/visualConfig.js +1 -1
  39. package/build/scss/_theming.scss +75 -37
  40. package/build/scss/_variables.scss +23 -0
  41. package/package.json +5 -3
@@ -51,59 +51,123 @@
51
51
  "color-badge-background-green": {
52
52
  "name": "badge.background",
53
53
  "subState": "green",
54
- "darkValue": "rgba(255, 255, 255, 0)",
55
- "darkOriginalValue": "neutral.transparent",
54
+ "darkValue": "#233d3d",
55
+ "darkOriginalValue": "night-green.dark01",
56
56
  "lightValue": "#e8f8f4",
57
57
  "lightOriginalValue": "green.light03"
58
58
  },
59
59
  "color-badge-background-blue": {
60
60
  "name": "badge.background",
61
61
  "subState": "blue",
62
- "darkValue": "rgba(255, 255, 255, 0)",
63
- "darkOriginalValue": "neutral.transparent",
62
+ "darkValue": "#29364c",
63
+ "darkOriginalValue": "night-blue.dark01",
64
64
  "lightValue": "#e7effe",
65
65
  "lightOriginalValue": "blue.light03"
66
66
  },
67
67
  "color-badge-background-yellow": {
68
68
  "name": "badge.background",
69
69
  "subState": "yellow",
70
- "darkValue": "rgba(255, 255, 255, 0)",
71
- "darkOriginalValue": "neutral.transparent",
70
+ "darkValue": "#4d412c",
71
+ "darkOriginalValue": "night-orange.dark01",
72
72
  "lightValue": "#fef3e1",
73
73
  "lightOriginalValue": "orange.light03"
74
74
  },
75
75
  "color-badge-background-brand": {
76
76
  "name": "badge.background",
77
77
  "subState": "brand",
78
- "darkValue": "rgba(255, 255, 255, 0)",
79
- "darkOriginalValue": "neutral.transparent",
78
+ "darkValue": "#223c44",
79
+ "darkOriginalValue": "night-brand.dark01",
80
80
  "lightValue": "#e7f6f8",
81
81
  "lightOriginalValue": "brand.light03"
82
82
  },
83
83
  "color-badge-background-purple": {
84
84
  "name": "badge.background",
85
85
  "subState": "purple",
86
- "darkValue": "rgba(255, 255, 255, 0)",
87
- "darkOriginalValue": "neutral.transparent",
86
+ "darkValue": "#33314b",
87
+ "darkOriginalValue": "night-purple.dark01",
88
88
  "lightValue": "#f2effb",
89
89
  "lightOriginalValue": "purple.light03"
90
90
  },
91
91
  "color-badge-background-red": {
92
92
  "name": "badge.background",
93
93
  "subState": "red",
94
- "darkValue": "rgba(255, 255, 255, 0)",
95
- "darkOriginalValue": "neutral.transparent",
94
+ "darkValue": "#4d3237",
95
+ "darkOriginalValue": "night-red.dark01",
96
96
  "lightValue": "#fde8e8",
97
97
  "lightOriginalValue": "red.light03"
98
98
  },
99
99
  "color-badge-background-gray": {
100
100
  "name": "badge.background",
101
101
  "subState": "gray",
102
- "darkValue": "rgba(255, 255, 255, 0)",
103
- "darkOriginalValue": "neutral.transparent",
102
+ "darkValue": "#282c34",
103
+ "darkOriginalValue": "night-black.regular",
104
104
  "lightValue": "#eef2f5",
105
105
  "lightOriginalValue": "gray.light03"
106
106
  },
107
+ "color-badge-foreground-default": {
108
+ "name": "badge.foreground",
109
+ "subState": "default",
110
+ "darkValue": "#ffffff",
111
+ "darkOriginalValue": "neutral.white",
112
+ "lightValue": "#ffffff",
113
+ "lightOriginalValue": "neutral.white"
114
+ },
115
+ "color-badge-foreground-green": {
116
+ "name": "badge.foreground",
117
+ "subState": "green",
118
+ "darkValue": "#a6f2dd",
119
+ "darkOriginalValue": "night-green.light02",
120
+ "lightValue": "#0b8363",
121
+ "lightOriginalValue": "green.dark01"
122
+ },
123
+ "color-badge-foreground-blue": {
124
+ "name": "badge.foreground",
125
+ "subState": "blue",
126
+ "darkValue": "#99c1fa",
127
+ "darkOriginalValue": "night-blue.light02",
128
+ "lightValue": "#295dae",
129
+ "lightOriginalValue": "blue.dark01"
130
+ },
131
+ "color-badge-foreground-yellow": {
132
+ "name": "badge.foreground",
133
+ "subState": "yellow",
134
+ "darkValue": "#fae0b3",
135
+ "darkOriginalValue": "night-orange.light02",
136
+ "lightValue": "#df9411",
137
+ "lightOriginalValue": "orange.dark01"
138
+ },
139
+ "color-badge-foreground-brand": {
140
+ "name": "badge.foreground",
141
+ "subState": "brand",
142
+ "darkValue": "#80dfea",
143
+ "darkOriginalValue": "night-brand.light02",
144
+ "lightValue": "#047a88",
145
+ "lightOriginalValue": "brand.dark01"
146
+ },
147
+ "color-badge-foreground-purple": {
148
+ "name": "badge.foreground",
149
+ "subState": "purple",
150
+ "darkValue": "#ad97f7",
151
+ "darkOriginalValue": "night-purple.light02",
152
+ "lightValue": "#5d44ab",
153
+ "lightOriginalValue": "purple.dark01"
154
+ },
155
+ "color-badge-foreground-red": {
156
+ "name": "badge.foreground",
157
+ "subState": "red",
158
+ "darkValue": "#f49a9a",
159
+ "darkOriginalValue": "night-red.light02",
160
+ "lightValue": "#dd3637",
161
+ "lightOriginalValue": "red.dark01"
162
+ },
163
+ "color-badge-foreground-gray": {
164
+ "name": "badge.foreground",
165
+ "subState": "gray",
166
+ "darkValue": "#ced1d6",
167
+ "darkOriginalValue": "night-gray.light02",
168
+ "lightValue": "#40515e",
169
+ "lightOriginalValue": "gray.dark01"
170
+ },
107
171
  "color-badge-text-default": {
108
172
  "name": "badge.text",
109
173
  "subState": "default",
@@ -165,7 +229,7 @@
165
229
  "subState": "gray",
166
230
  "darkValue": "#93979f",
167
231
  "darkOriginalValue": "night-gray.regular",
168
- "lightValue": "#607585",
232
+ "lightValue": "#5a7183",
169
233
  "lightOriginalValue": "gray.regular"
170
234
  },
171
235
  "color-badge-border-default": {
@@ -173,64 +237,128 @@
173
237
  "subState": "default",
174
238
  "darkValue": "#393e47",
175
239
  "darkOriginalValue": "night-black.light02",
176
- "lightValue": "#e0e6eb",
177
- "lightOriginalValue": "gray.light02"
240
+ "lightValue": "#40515e",
241
+ "lightOriginalValue": "gray.dark01"
178
242
  },
179
243
  "color-badge-border-green": {
180
244
  "name": "badge.border",
181
245
  "subState": "green",
182
- "darkValue": "#393e47",
183
- "darkOriginalValue": "night-black.light02",
184
- "lightValue": "#d0f1e8",
185
- "lightOriginalValue": "green.light02"
246
+ "darkValue": "#a6f2dd",
247
+ "darkOriginalValue": "night-green.light02",
248
+ "lightValue": "#0b8363",
249
+ "lightOriginalValue": "green.dark01"
186
250
  },
187
251
  "color-badge-border-blue": {
188
252
  "name": "badge.border",
189
253
  "subState": "blue",
190
- "darkValue": "#393e47",
191
- "darkOriginalValue": "night-black.light02",
192
- "lightValue": "#d2e2f9",
193
- "lightOriginalValue": "blue.light02"
254
+ "darkValue": "#99c1fa",
255
+ "darkOriginalValue": "night-blue.light02",
256
+ "lightValue": "#295dae",
257
+ "lightOriginalValue": "blue.dark01"
194
258
  },
195
259
  "color-badge-border-yellow": {
196
260
  "name": "badge.border",
197
261
  "subState": "yellow",
198
- "darkValue": "#393e47",
199
- "darkOriginalValue": "night-black.light02",
200
- "lightValue": "#fceaca",
201
- "lightOriginalValue": "orange.light02"
262
+ "darkValue": "#fae0b3",
263
+ "darkOriginalValue": "night-orange.light02",
264
+ "lightValue": "#df9411",
265
+ "lightOriginalValue": "orange.dark01"
202
266
  },
203
267
  "color-badge-border-brand": {
204
268
  "name": "badge.border",
205
269
  "subState": "brand",
206
- "darkValue": "#393e47",
207
- "darkOriginalValue": "night-black.light02",
208
- "lightValue": "#ceedf1",
209
- "lightOriginalValue": "brand.light02"
270
+ "darkValue": "#80dfea",
271
+ "darkOriginalValue": "night-brand.light02",
272
+ "lightValue": "#047a88",
273
+ "lightOriginalValue": "brand.dark01"
210
274
  },
211
275
  "color-badge-border-purple": {
212
276
  "name": "badge.border",
213
277
  "subState": "purple",
214
- "darkValue": "#393e47",
215
- "darkOriginalValue": "night-black.light02",
216
- "lightValue": "#d8d0f3",
217
- "lightOriginalValue": "purple.light02"
278
+ "darkValue": "#ad97f7",
279
+ "darkOriginalValue": "night-purple.light02",
280
+ "lightValue": "#7254d3",
281
+ "lightOriginalValue": "purple.regular"
218
282
  },
219
283
  "color-badge-border-red": {
220
284
  "name": "badge.border",
221
285
  "subState": "red",
222
- "darkValue": "#393e47",
223
- "darkOriginalValue": "night-black.light02",
224
- "lightValue": "#fad1d1",
225
- "lightOriginalValue": "red.light02"
286
+ "darkValue": "#f49a9a",
287
+ "darkOriginalValue": "night-red.light02",
288
+ "lightValue": "#dd3637",
289
+ "lightOriginalValue": "red.dark01"
226
290
  },
227
291
  "color-badge-border-gray": {
228
292
  "name": "badge.border",
229
293
  "subState": "gray",
294
+ "darkValue": "#ced1d6",
295
+ "darkOriginalValue": "night-gray.light02",
296
+ "lightValue": "#5a7183",
297
+ "lightOriginalValue": "gray.regular"
298
+ },
299
+ "color-badge-borderSubtle-default": {
300
+ "name": "badge.borderSubtle",
301
+ "subState": "default",
230
302
  "darkValue": "#393e47",
231
303
  "darkOriginalValue": "night-black.light02",
232
304
  "lightValue": "#e0e6eb",
233
305
  "lightOriginalValue": "gray.light02"
306
+ },
307
+ "color-badge-borderSubtle-green": {
308
+ "name": "badge.borderSubtle",
309
+ "subState": "green",
310
+ "darkValue": "rgba(255, 255, 255, 0.08)",
311
+ "darkOriginalValue": "neutral.white-transparent04",
312
+ "lightValue": "#d0f1e8",
313
+ "lightOriginalValue": "green.light02"
314
+ },
315
+ "color-badge-borderSubtle-blue": {
316
+ "name": "badge.borderSubtle",
317
+ "subState": "blue",
318
+ "darkValue": "rgba(255, 255, 255, 0.08)",
319
+ "darkOriginalValue": "neutral.white-transparent04",
320
+ "lightValue": "#d2e2f9",
321
+ "lightOriginalValue": "blue.light02"
322
+ },
323
+ "color-badge-borderSubtle-yellow": {
324
+ "name": "badge.borderSubtle",
325
+ "subState": "yellow",
326
+ "darkValue": "rgba(255, 255, 255, 0.08)",
327
+ "darkOriginalValue": "neutral.white-transparent04",
328
+ "lightValue": "#fceaca",
329
+ "lightOriginalValue": "orange.light02"
330
+ },
331
+ "color-badge-borderSubtle-brand": {
332
+ "name": "badge.borderSubtle",
333
+ "subState": "brand",
334
+ "darkValue": "rgba(255, 255, 255, 0.08)",
335
+ "darkOriginalValue": "neutral.white-transparent04",
336
+ "lightValue": "#ceedf1",
337
+ "lightOriginalValue": "brand.light02"
338
+ },
339
+ "color-badge-borderSubtle-purple": {
340
+ "name": "badge.borderSubtle",
341
+ "subState": "purple",
342
+ "darkValue": "rgba(255, 255, 255, 0.08)",
343
+ "darkOriginalValue": "neutral.white-transparent04",
344
+ "lightValue": "#d8d0f3",
345
+ "lightOriginalValue": "purple.light02"
346
+ },
347
+ "color-badge-borderSubtle-red": {
348
+ "name": "badge.borderSubtle",
349
+ "subState": "red",
350
+ "darkValue": "rgba(255, 255, 255, 0.08)",
351
+ "darkOriginalValue": "neutral.white-transparent04",
352
+ "lightValue": "#fad1d1",
353
+ "lightOriginalValue": "red.light02"
354
+ },
355
+ "color-badge-borderSubtle-gray": {
356
+ "name": "badge.borderSubtle",
357
+ "subState": "gray",
358
+ "darkValue": "rgba(255, 255, 255, 0.08)",
359
+ "darkOriginalValue": "neutral.white-transparent04",
360
+ "lightValue": "#e0e6eb",
361
+ "lightOriginalValue": "gray.light02"
234
362
  }
235
363
  },
236
364
  "toggle": {
@@ -257,7 +385,7 @@
257
385
  "subState": "",
258
386
  "darkValue": "#ced1d6",
259
387
  "darkOriginalValue": "night-gray.light02",
260
- "lightValue": "#607585",
388
+ "lightValue": "#5a7183",
261
389
  "lightOriginalValue": "gray.regular"
262
390
  },
263
391
  "color-segmented-progress-bar-success": {
@@ -461,7 +589,7 @@
461
589
  "subState": "negative",
462
590
  "darkValue": "#f49a9a",
463
591
  "darkOriginalValue": "night-red.light02",
464
- "lightValue": "#dc4847",
592
+ "lightValue": "#dd3637",
465
593
  "lightOriginalValue": "red.dark01"
466
594
  },
467
595
  "color-chart-text-warning": {
@@ -493,7 +621,7 @@
493
621
  "subState": "bold",
494
622
  "darkValue": "#93979f",
495
623
  "darkOriginalValue": "night-gray.regular",
496
- "lightValue": "#607585",
624
+ "lightValue": "#5a7183",
497
625
  "lightOriginalValue": "gray.regular"
498
626
  },
499
627
  "color-chart-positive-default": {
@@ -565,7 +693,7 @@
565
693
  "subState": "bold",
566
694
  "darkValue": "#f49a9a",
567
695
  "darkOriginalValue": "night-red.light02",
568
- "lightValue": "#dc4847",
696
+ "lightValue": "#dd3637",
569
697
  "lightOriginalValue": "red.dark01"
570
698
  },
571
699
  "color-chart-info-default": {
@@ -667,6 +795,32 @@
667
795
  "lightOriginalValue": "gray.dark02"
668
796
  }
669
797
  },
798
+ "skeletonLoader": {
799
+ "color-skeletonLoader-background-container": {
800
+ "name": "skeletonLoader.background",
801
+ "subState": "container",
802
+ "darkValue": "#1a1c1c",
803
+ "darkOriginalValue": "neutral.black",
804
+ "lightValue": "#e0e6eb",
805
+ "lightOriginalValue": "gray.light02"
806
+ },
807
+ "color-skeletonLoader-background-element": {
808
+ "name": "skeletonLoader.background",
809
+ "subState": "element",
810
+ "darkValue": "#282c34",
811
+ "darkOriginalValue": "night-black.regular",
812
+ "lightValue": "#e0e6eb",
813
+ "lightOriginalValue": "gray.light02"
814
+ },
815
+ "color-skeletonLoader-background-shimmer": {
816
+ "name": "skeletonLoader.background",
817
+ "subState": "shimmer",
818
+ "darkValue": "rgba(255, 255, 255, 0.08)",
819
+ "darkOriginalValue": "neutral.white-transparent04",
820
+ "lightValue": "rgba(255, 255, 255, 0.08)",
821
+ "lightOriginalValue": "neutral.white-transparent04"
822
+ }
823
+ },
670
824
  "canvas": {
671
825
  "color-canvas": {
672
826
  "name": "canvas",
@@ -800,7 +954,7 @@
800
954
  "subState": "default",
801
955
  "darkValue": "#a45355",
802
956
  "darkOriginalValue": "night-red.regular",
803
- "lightValue": "#dc4847",
957
+ "lightValue": "#dd3637",
804
958
  "lightOriginalValue": "red.dark01"
805
959
  },
806
960
  "color-background-error-hover": {
@@ -995,7 +1149,7 @@
995
1149
  "subState": "selected",
996
1150
  "darkValue": "#40454f",
997
1151
  "darkOriginalValue": "night-black.light03",
998
- "lightValue": "#607585",
1152
+ "lightValue": "#5a7183",
999
1153
  "lightOriginalValue": "gray.regular"
1000
1154
  },
1001
1155
  "color-background-transparent-hover": {
@@ -1087,7 +1241,7 @@
1087
1241
  "subState": "default",
1088
1242
  "darkValue": "#93979f",
1089
1243
  "darkOriginalValue": "night-gray.regular",
1090
- "lightValue": "#607585",
1244
+ "lightValue": "#5a7183",
1091
1245
  "lightOriginalValue": "gray.regular"
1092
1246
  },
1093
1247
  "color-text-tertiary-disabled": {
@@ -1221,7 +1375,7 @@
1221
1375
  "subState": "hover",
1222
1376
  "darkValue": "#93979f",
1223
1377
  "darkOriginalValue": "night-gray.regular",
1224
- "lightValue": "#607585",
1378
+ "lightValue": "#5a7183",
1225
1379
  "lightOriginalValue": "gray.regular"
1226
1380
  },
1227
1381
  "color-text-dottedUnderline-default": {
@@ -1230,7 +1384,7 @@
1230
1384
  "subState": "default",
1231
1385
  "darkValue": "#b9bcc3",
1232
1386
  "darkOriginalValue": "night-gray.light01",
1233
- "lightValue": "#607585",
1387
+ "lightValue": "#5a7183",
1234
1388
  "lightOriginalValue": "gray.regular"
1235
1389
  },
1236
1390
  "color-text-dottedUnderline-hover": {
@@ -1286,7 +1440,7 @@
1286
1440
  "subState": "default",
1287
1441
  "darkValue": "#93979f",
1288
1442
  "darkOriginalValue": "night-gray.regular",
1289
- "lightValue": "#607585",
1443
+ "lightValue": "#5a7183",
1290
1444
  "lightOriginalValue": "gray.regular"
1291
1445
  },
1292
1446
  "color-icon-tertiary-hover": {
@@ -1313,7 +1467,7 @@
1313
1467
  "subState": "hover",
1314
1468
  "darkValue": "#93979f",
1315
1469
  "darkOriginalValue": "night-gray.regular",
1316
- "lightValue": "#607585",
1470
+ "lightValue": "#5a7183",
1317
1471
  "lightOriginalValue": "gray.regular"
1318
1472
  },
1319
1473
  "color-icon-accent-default": {
@@ -1394,7 +1548,7 @@
1394
1548
  "subState": "default",
1395
1549
  "darkValue": "#d07c7c",
1396
1550
  "darkOriginalValue": "night-red.light01",
1397
- "lightValue": "#dc4847",
1551
+ "lightValue": "#dd3637",
1398
1552
  "lightOriginalValue": "red.dark01"
1399
1553
  },
1400
1554
  "color-icon-error-hover": {
@@ -1476,7 +1630,7 @@
1476
1630
  "subState": "hover",
1477
1631
  "darkValue": "#757a84",
1478
1632
  "darkOriginalValue": "night-gray.dark01",
1479
- "lightValue": "#607585",
1633
+ "lightValue": "#5a7183",
1480
1634
  "lightOriginalValue": "gray.regular"
1481
1635
  },
1482
1636
  "color-border-primary-active": {
@@ -1536,7 +1690,7 @@
1536
1690
  "subState": "default",
1537
1691
  "darkValue": "#d07c7c",
1538
1692
  "darkOriginalValue": "night-red.light01",
1539
- "lightValue": "#dc4847",
1693
+ "lightValue": "#dd3637",
1540
1694
  "lightOriginalValue": "red.dark01"
1541
1695
  },
1542
1696
  "color-border-success-default": {