@amboss/design-system 1.16.6 → 1.17.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/build-tokens/visualConfig.js +75 -63
- package/build/cjs/src/components/Form/ToggleButton/ToggleButton.js +8 -8
- package/build/cjs/src/components/Popover/Popover.js +124 -0
- package/build/cjs/src/components/Tabs/Tabs.js +3 -3
- package/build/cjs/src/components/Tooltip/Tooltip.js +24 -148
- package/build/cjs/src/components/Tooltip/TooltipContent.js +210 -0
- package/build/cjs/src/components/Tooltip/utils.js +3 -3
- package/build/cjs/src/index.js +2 -0
- package/build/esm/build-tokens/_colors.json +74 -38
- package/build/esm/build-tokens/visualConfig.d.ts +9 -3
- package/build/esm/build-tokens/visualConfig.js +75 -63
- package/build/esm/build-tokens/visualConfig.js.map +1 -1
- package/build/esm/src/components/Form/ToggleButton/ToggleButton.js +8 -8
- package/build/esm/src/components/Form/ToggleButton/ToggleButton.js.map +1 -1
- package/build/esm/src/components/Popover/Popover.d.ts +18 -0
- package/build/esm/src/components/Popover/Popover.js +118 -0
- package/build/esm/src/components/Popover/Popover.js.map +1 -0
- package/build/esm/src/components/Tabs/Tabs.js +3 -3
- package/build/esm/src/components/Tabs/Tabs.js.map +1 -1
- package/build/esm/src/components/Tooltip/Tooltip.d.ts +4 -10
- package/build/esm/src/components/Tooltip/Tooltip.js +25 -148
- package/build/esm/src/components/Tooltip/Tooltip.js.map +1 -1
- package/build/esm/src/components/Tooltip/TooltipContent.d.ts +25 -0
- package/build/esm/src/components/Tooltip/TooltipContent.js +204 -0
- package/build/esm/src/components/Tooltip/TooltipContent.js.map +1 -0
- package/build/esm/src/components/Tooltip/utils.d.ts +4 -3
- package/build/esm/src/components/Tooltip/utils.js +3 -3
- package/build/esm/src/components/Tooltip/utils.js.map +1 -1
- package/build/esm/src/index.d.ts +1 -0
- package/build/esm/src/index.js +1 -0
- package/build/esm/src/index.js.map +1 -1
- package/build/scss/_theming.scss +19 -11
- package/build/scss/_variables.scss +6 -2
- package/package.json +2 -1
|
@@ -199,15 +199,15 @@ const ambossVisualConfiguration = {
|
|
|
199
199
|
"variables": variables,
|
|
200
200
|
"values": {
|
|
201
201
|
"color": {
|
|
202
|
-
"canvas": "#
|
|
202
|
+
"canvas": "#111111",
|
|
203
203
|
"background": {
|
|
204
204
|
"primary": {
|
|
205
|
-
"default": "#
|
|
205
|
+
"default": "#1a1c1c"
|
|
206
206
|
},
|
|
207
207
|
"secondary": {
|
|
208
|
-
"default": "#
|
|
209
|
-
"hover": "#
|
|
210
|
-
"active": "#
|
|
208
|
+
"default": "#1e2125",
|
|
209
|
+
"hover": "#24282d",
|
|
210
|
+
"active": "#1e2125"
|
|
211
211
|
},
|
|
212
212
|
"accent": {
|
|
213
213
|
"default": "#28816b",
|
|
@@ -251,9 +251,9 @@ const ambossVisualConfiguration = {
|
|
|
251
251
|
"warningSubtle": {
|
|
252
252
|
"default": "#32302f"
|
|
253
253
|
},
|
|
254
|
-
"
|
|
255
|
-
"
|
|
256
|
-
"
|
|
254
|
+
"textHighlight": {
|
|
255
|
+
"primary": "rgba(178, 171, 57, 0.45)",
|
|
256
|
+
"secondary": "#494a2f"
|
|
257
257
|
},
|
|
258
258
|
"contrast": {
|
|
259
259
|
"default": "#ced1d6"
|
|
@@ -261,7 +261,9 @@ const ambossVisualConfiguration = {
|
|
|
261
261
|
"transparent": {
|
|
262
262
|
"default": "rgba(255, 255, 255, 0)",
|
|
263
263
|
"hover": "rgba(147, 151, 159, 0.08)",
|
|
264
|
-
"active": "rgba(147, 151, 159, 0.08)"
|
|
264
|
+
"active": "rgba(147, 151, 159, 0.08)",
|
|
265
|
+
"selected": "#40454f",
|
|
266
|
+
"selectedHover": "#393e47"
|
|
265
267
|
},
|
|
266
268
|
"backdrop": {
|
|
267
269
|
"default": "rgba(0, 0, 0, 0.6)"
|
|
@@ -292,6 +294,9 @@ const ambossVisualConfiguration = {
|
|
|
292
294
|
"default": "#ffffff",
|
|
293
295
|
"disabled": "rgba(216, 218, 222, 0.3)"
|
|
294
296
|
},
|
|
297
|
+
"onAccentSubtle": {
|
|
298
|
+
"default": "rgba(255, 255, 255, 0.6)"
|
|
299
|
+
},
|
|
295
300
|
"info": {
|
|
296
301
|
"default": "#99c1fa"
|
|
297
302
|
},
|
|
@@ -313,6 +318,7 @@ const ambossVisualConfiguration = {
|
|
|
313
318
|
"quaternary": "#757a84",
|
|
314
319
|
"accent": "#41a48a",
|
|
315
320
|
"onAccent": "#ffffff",
|
|
321
|
+
"onAccentSubtle": "rgba(255, 255, 255, 0.6)",
|
|
316
322
|
"info": "#6e95cf",
|
|
317
323
|
"error": "#d07c7c",
|
|
318
324
|
"warning": "#cbac76",
|
|
@@ -340,8 +346,8 @@ const ambossVisualConfiguration = {
|
|
|
340
346
|
}
|
|
341
347
|
},
|
|
342
348
|
"divider": {
|
|
343
|
-
"primary": "#
|
|
344
|
-
"secondary": "rgba(147,
|
|
349
|
+
"primary": "#32363e",
|
|
350
|
+
"secondary": "rgba(147, 149, 159, 0.15)"
|
|
345
351
|
},
|
|
346
352
|
"toggle": {
|
|
347
353
|
"background": {
|
|
@@ -425,10 +431,10 @@ const ambossVisualConfiguration = {
|
|
|
425
431
|
"hover": "rgba(255, 255, 255, 0.08)"
|
|
426
432
|
},
|
|
427
433
|
"accent": {
|
|
428
|
-
"default": "
|
|
429
|
-
"hover": "rgba(255, 255, 255, 0.
|
|
430
|
-
"active": "
|
|
431
|
-
"disabled": "
|
|
434
|
+
"default": "#ffffff",
|
|
435
|
+
"hover": "rgba(255, 255, 255, 0.8)",
|
|
436
|
+
"active": "rgba(255, 255, 255, 0.6)",
|
|
437
|
+
"disabled": "rgba(255, 255, 255, 0.6)"
|
|
432
438
|
},
|
|
433
439
|
"transparent": {
|
|
434
440
|
"hover": "rgba(255, 255, 255, 0.08)"
|
|
@@ -452,7 +458,7 @@ const ambossVisualConfiguration = {
|
|
|
452
458
|
"hover": "#d8dade"
|
|
453
459
|
},
|
|
454
460
|
"onAccent": {
|
|
455
|
-
"default": "#
|
|
461
|
+
"default": "#5b5f67"
|
|
456
462
|
},
|
|
457
463
|
"error": {
|
|
458
464
|
"default": "#ee6160"
|
|
@@ -468,16 +474,16 @@ const ambossVisualConfiguration = {
|
|
|
468
474
|
},
|
|
469
475
|
"border": {
|
|
470
476
|
"primary": {
|
|
471
|
-
"default": "
|
|
472
|
-
"hover": "
|
|
473
|
-
"active": "
|
|
477
|
+
"default": "#ffffff",
|
|
478
|
+
"hover": "#ffffff",
|
|
479
|
+
"active": "#ffffff"
|
|
474
480
|
},
|
|
475
481
|
"accent": {
|
|
476
482
|
"default": "#ffffff"
|
|
477
483
|
}
|
|
478
484
|
},
|
|
479
485
|
"divider": {
|
|
480
|
-
"primary": "
|
|
486
|
+
"primary": "rgba(216, 218, 222, 0.3)"
|
|
481
487
|
}
|
|
482
488
|
}
|
|
483
489
|
},
|
|
@@ -544,7 +550,7 @@ const ambossVisualConfiguration = {
|
|
|
544
550
|
}
|
|
545
551
|
},
|
|
546
552
|
"divider": {
|
|
547
|
-
"primary": "
|
|
553
|
+
"primary": "rgba(216, 218, 222, 0.3)"
|
|
548
554
|
}
|
|
549
555
|
}
|
|
550
556
|
},
|
|
@@ -615,7 +621,7 @@ const ambossVisualConfiguration = {
|
|
|
615
621
|
}
|
|
616
622
|
},
|
|
617
623
|
"divider": {
|
|
618
|
-
"primary": "
|
|
624
|
+
"primary": "rgba(216, 218, 222, 0.3)"
|
|
619
625
|
}
|
|
620
626
|
}
|
|
621
627
|
},
|
|
@@ -627,7 +633,7 @@ const ambossVisualConfiguration = {
|
|
|
627
633
|
},
|
|
628
634
|
"secondary": {
|
|
629
635
|
"default": "transparent",
|
|
630
|
-
"hover": "rgba(147,
|
|
636
|
+
"hover": "rgba(147, 149, 159, 0.3)"
|
|
631
637
|
},
|
|
632
638
|
"accent": {
|
|
633
639
|
"default": "#28816b",
|
|
@@ -636,13 +642,13 @@ const ambossVisualConfiguration = {
|
|
|
636
642
|
"disabled": "rgba(40, 129, 107, 0.3)"
|
|
637
643
|
},
|
|
638
644
|
"transparent": {
|
|
639
|
-
"hover": "rgba(
|
|
645
|
+
"hover": "rgba(147, 151, 159, 0.08)"
|
|
640
646
|
}
|
|
641
647
|
},
|
|
642
648
|
"text": {
|
|
643
649
|
"primary": {
|
|
644
650
|
"default": "#1e2125",
|
|
645
|
-
"hover": "#
|
|
651
|
+
"hover": "#111111"
|
|
646
652
|
},
|
|
647
653
|
"secondary": {
|
|
648
654
|
"default": "#40454f",
|
|
@@ -667,7 +673,7 @@ const ambossVisualConfiguration = {
|
|
|
667
673
|
}
|
|
668
674
|
},
|
|
669
675
|
"icon": {
|
|
670
|
-
"primary": "#
|
|
676
|
+
"primary": "#1e2125",
|
|
671
677
|
"secondary": "#40454f",
|
|
672
678
|
"tertiary": "#5b5f67",
|
|
673
679
|
"accent": "#28816b",
|
|
@@ -678,15 +684,15 @@ const ambossVisualConfiguration = {
|
|
|
678
684
|
"border": {
|
|
679
685
|
"primary": {
|
|
680
686
|
"default": "#757a84",
|
|
681
|
-
"hover": "#
|
|
682
|
-
"active": "#
|
|
687
|
+
"hover": "#5b5f67",
|
|
688
|
+
"active": "#40454f"
|
|
683
689
|
},
|
|
684
690
|
"accent": {
|
|
685
691
|
"default": "#28816b"
|
|
686
692
|
}
|
|
687
693
|
},
|
|
688
694
|
"divider": {
|
|
689
|
-
"primary": "
|
|
695
|
+
"primary": "rgba(147, 149, 159, 0.3)"
|
|
690
696
|
}
|
|
691
697
|
}
|
|
692
698
|
},
|
|
@@ -753,7 +759,7 @@ const ambossVisualConfiguration = {
|
|
|
753
759
|
}
|
|
754
760
|
},
|
|
755
761
|
"divider": {
|
|
756
|
-
"primary": "
|
|
762
|
+
"primary": "rgba(216, 218, 222, 0.3)"
|
|
757
763
|
}
|
|
758
764
|
}
|
|
759
765
|
}
|
|
@@ -817,9 +823,9 @@ const ambossVisualConfiguration = {
|
|
|
817
823
|
"warningSubtle": {
|
|
818
824
|
"default": "#fef3e1"
|
|
819
825
|
},
|
|
820
|
-
"
|
|
821
|
-
"
|
|
822
|
-
"
|
|
826
|
+
"textHighlight": {
|
|
827
|
+
"primary": "#f3eb75",
|
|
828
|
+
"secondary": "#faf5b8"
|
|
823
829
|
},
|
|
824
830
|
"contrast": {
|
|
825
831
|
"default": "#314554"
|
|
@@ -827,7 +833,9 @@ const ambossVisualConfiguration = {
|
|
|
827
833
|
"transparent": {
|
|
828
834
|
"default": "rgba(255, 255, 255, 0)",
|
|
829
835
|
"hover": "rgba(96, 117, 133, 0.08)",
|
|
830
|
-
"active": "rgba(96, 117, 133, 0.08)"
|
|
836
|
+
"active": "rgba(96, 117, 133, 0.08)",
|
|
837
|
+
"selected": "#607585",
|
|
838
|
+
"selectedHover": "#40515e"
|
|
831
839
|
},
|
|
832
840
|
"backdrop": {
|
|
833
841
|
"default": "rgba(0, 0, 0, 0.6)"
|
|
@@ -858,6 +866,9 @@ const ambossVisualConfiguration = {
|
|
|
858
866
|
"default": "#ffffff",
|
|
859
867
|
"disabled": "rgba(255, 255, 255, 0.6)"
|
|
860
868
|
},
|
|
869
|
+
"onAccentSubtle": {
|
|
870
|
+
"default": "rgba(255, 255, 255, 0.6)"
|
|
871
|
+
},
|
|
861
872
|
"info": {
|
|
862
873
|
"default": "#1c427d"
|
|
863
874
|
},
|
|
@@ -879,6 +890,7 @@ const ambossVisualConfiguration = {
|
|
|
879
890
|
"quaternary": "#a3b2bd",
|
|
880
891
|
"accent": "#0b8363",
|
|
881
892
|
"onAccent": "#ffffff",
|
|
893
|
+
"onAccentSubtle": "rgba(255, 255, 255, 0.6)",
|
|
882
894
|
"info": "#295dae",
|
|
883
895
|
"error": "#dc4847",
|
|
884
896
|
"warning": "#df9411",
|
|
@@ -991,10 +1003,10 @@ const ambossVisualConfiguration = {
|
|
|
991
1003
|
"hover": "rgba(255, 255, 255, 0.08)"
|
|
992
1004
|
},
|
|
993
1005
|
"accent": {
|
|
994
|
-
"default": "
|
|
995
|
-
"hover": "rgba(255, 255, 255, 0.
|
|
996
|
-
"active": "
|
|
997
|
-
"disabled": "
|
|
1006
|
+
"default": "#ffffff",
|
|
1007
|
+
"hover": "rgba(255, 255, 255, 0.8)",
|
|
1008
|
+
"active": "rgba(255, 255, 255, 0.6)",
|
|
1009
|
+
"disabled": "rgba(255, 255, 255, 0.6)"
|
|
998
1010
|
},
|
|
999
1011
|
"transparent": {
|
|
1000
1012
|
"hover": "rgba(255, 255, 255, 0.08)"
|
|
@@ -1018,7 +1030,7 @@ const ambossVisualConfiguration = {
|
|
|
1018
1030
|
"hover": "#e0e6eb"
|
|
1019
1031
|
},
|
|
1020
1032
|
"onAccent": {
|
|
1021
|
-
"default": "#
|
|
1033
|
+
"default": "#314554"
|
|
1022
1034
|
},
|
|
1023
1035
|
"error": {
|
|
1024
1036
|
"default": "#ee6160"
|
|
@@ -1034,16 +1046,16 @@ const ambossVisualConfiguration = {
|
|
|
1034
1046
|
},
|
|
1035
1047
|
"border": {
|
|
1036
1048
|
"primary": {
|
|
1037
|
-
"default": "
|
|
1038
|
-
"hover": "
|
|
1039
|
-
"active": "
|
|
1049
|
+
"default": "#ffffff",
|
|
1050
|
+
"hover": "#ffffff",
|
|
1051
|
+
"active": "#ffffff"
|
|
1040
1052
|
},
|
|
1041
1053
|
"accent": {
|
|
1042
1054
|
"default": "#ffffff"
|
|
1043
1055
|
}
|
|
1044
1056
|
},
|
|
1045
1057
|
"divider": {
|
|
1046
|
-
"primary": "
|
|
1058
|
+
"primary": "rgba(255, 255, 255, 0.6)"
|
|
1047
1059
|
}
|
|
1048
1060
|
}
|
|
1049
1061
|
},
|
|
@@ -1110,7 +1122,7 @@ const ambossVisualConfiguration = {
|
|
|
1110
1122
|
}
|
|
1111
1123
|
},
|
|
1112
1124
|
"divider": {
|
|
1113
|
-
"primary": "
|
|
1125
|
+
"primary": "rgba(255, 255, 255, 0.6)"
|
|
1114
1126
|
}
|
|
1115
1127
|
}
|
|
1116
1128
|
},
|
|
@@ -1181,7 +1193,7 @@ const ambossVisualConfiguration = {
|
|
|
1181
1193
|
}
|
|
1182
1194
|
},
|
|
1183
1195
|
"divider": {
|
|
1184
|
-
"primary": "
|
|
1196
|
+
"primary": "rgba(255, 255, 255, 0.6)"
|
|
1185
1197
|
}
|
|
1186
1198
|
}
|
|
1187
1199
|
},
|
|
@@ -1196,10 +1208,10 @@ const ambossVisualConfiguration = {
|
|
|
1196
1208
|
"hover": "rgba(255, 255, 255, 0.08)"
|
|
1197
1209
|
},
|
|
1198
1210
|
"accent": {
|
|
1199
|
-
"default": "#
|
|
1200
|
-
"hover": "
|
|
1201
|
-
"active": "
|
|
1202
|
-
"disabled": "rgba(
|
|
1211
|
+
"default": "#0b8363",
|
|
1212
|
+
"hover": "#0a5c45",
|
|
1213
|
+
"active": "#0a5c45",
|
|
1214
|
+
"disabled": "rgba(10, 92, 69, 0.3)"
|
|
1203
1215
|
},
|
|
1204
1216
|
"transparent": {
|
|
1205
1217
|
"hover": "rgba(255, 255, 255, 0.08)"
|
|
@@ -1207,13 +1219,13 @@ const ambossVisualConfiguration = {
|
|
|
1207
1219
|
},
|
|
1208
1220
|
"text": {
|
|
1209
1221
|
"primary": {
|
|
1210
|
-
"default": "#ffffff",
|
|
1211
|
-
"hover": "rgba(255, 255, 255, 0.8)"
|
|
1212
|
-
},
|
|
1213
|
-
"secondary": {
|
|
1214
1222
|
"default": "#e0e6eb",
|
|
1215
1223
|
"hover": "#a3b2bd"
|
|
1216
1224
|
},
|
|
1225
|
+
"secondary": {
|
|
1226
|
+
"default": "#a3b2bd",
|
|
1227
|
+
"hover": "#607585"
|
|
1228
|
+
},
|
|
1217
1229
|
"tertiary": {
|
|
1218
1230
|
"default": "#a3b2bd",
|
|
1219
1231
|
"hover": "#607585"
|
|
@@ -1223,7 +1235,7 @@ const ambossVisualConfiguration = {
|
|
|
1223
1235
|
"hover": "#0fa980"
|
|
1224
1236
|
},
|
|
1225
1237
|
"onAccent": {
|
|
1226
|
-
"default": "#
|
|
1238
|
+
"default": "#ffffff"
|
|
1227
1239
|
},
|
|
1228
1240
|
"error": {
|
|
1229
1241
|
"default": "#f07575"
|
|
@@ -1233,26 +1245,26 @@ const ambossVisualConfiguration = {
|
|
|
1233
1245
|
}
|
|
1234
1246
|
},
|
|
1235
1247
|
"icon": {
|
|
1236
|
-
"primary": "#
|
|
1237
|
-
"secondary": "#
|
|
1248
|
+
"primary": "#e0e6eb",
|
|
1249
|
+
"secondary": "#a3b2bd",
|
|
1238
1250
|
"tertiary": "#a3b2bd",
|
|
1239
1251
|
"accent": "#8adcc6",
|
|
1240
|
-
"onAccent": "#
|
|
1252
|
+
"onAccent": "#ffffff",
|
|
1241
1253
|
"info": "#6e95cf",
|
|
1242
1254
|
"error": "#f07575"
|
|
1243
1255
|
},
|
|
1244
1256
|
"border": {
|
|
1245
1257
|
"primary": {
|
|
1246
|
-
"default": "#
|
|
1247
|
-
"hover": "#
|
|
1248
|
-
"active": "#
|
|
1258
|
+
"default": "#40515e",
|
|
1259
|
+
"hover": "#607585",
|
|
1260
|
+
"active": "#a3b2bd"
|
|
1249
1261
|
},
|
|
1250
1262
|
"accent": {
|
|
1251
|
-
"default": "#
|
|
1263
|
+
"default": "#607585"
|
|
1252
1264
|
}
|
|
1253
1265
|
},
|
|
1254
1266
|
"divider": {
|
|
1255
|
-
"primary": "
|
|
1267
|
+
"primary": "rgba(163, 178, 189, 0.3)"
|
|
1256
1268
|
}
|
|
1257
1269
|
}
|
|
1258
1270
|
},
|
|
@@ -1319,7 +1331,7 @@ const ambossVisualConfiguration = {
|
|
|
1319
1331
|
}
|
|
1320
1332
|
},
|
|
1321
1333
|
"divider": {
|
|
1322
|
-
"primary": "
|
|
1334
|
+
"primary": "rgba(255, 255, 255, 0.6)"
|
|
1323
1335
|
}
|
|
1324
1336
|
}
|
|
1325
1337
|
}
|