@amboss/design-system 3.0.0 → 3.0.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.
Files changed (31) hide show
  1. package/build/cjs/components/EntityList/styled-components.d.ts +4 -0
  2. package/build/cjs/components/EntityList/styled-components.js +1 -1
  3. package/build/cjs/components/EntityTree/BaseEntityTree.d.ts +5 -1
  4. package/build/cjs/components/EntityTree/BaseEntityTree.js +1 -1
  5. package/build/cjs/components/EntityTree/hugeTreeData.js +1 -0
  6. package/build/cjs/components/EntityTree/tree.d.ts +5 -1
  7. package/build/cjs/components/EntityTree/tree.js +1 -1
  8. package/build/cjs/components/Form/PasswordInput/PasswordInput.js +1 -1
  9. package/build/cjs/components/Icon/Icon.js +1 -1
  10. package/build/cjs/components/LoadingSpinner/LoadingSpinner.js +1 -1
  11. package/build/cjs/components/PictogramButton/PictogramButton.js +1 -1
  12. package/build/cjs/web-tokens/_colors.json +139 -31
  13. package/build/cjs/web-tokens/visualConfig.d.ts +176 -44
  14. package/build/cjs/web-tokens/visualConfig.js +1 -1
  15. package/build/esm/components/EntityList/styled-components.d.ts +4 -0
  16. package/build/esm/components/EntityList/styled-components.js +1 -1
  17. package/build/esm/components/EntityTree/BaseEntityTree.d.ts +5 -1
  18. package/build/esm/components/EntityTree/BaseEntityTree.js +1 -1
  19. package/build/esm/components/EntityTree/hugeTreeData.js +1 -0
  20. package/build/esm/components/EntityTree/tree.d.ts +5 -1
  21. package/build/esm/components/EntityTree/tree.js +1 -1
  22. package/build/esm/components/Form/PasswordInput/PasswordInput.js +1 -1
  23. package/build/esm/components/Icon/Icon.js +1 -1
  24. package/build/esm/components/LoadingSpinner/LoadingSpinner.js +1 -1
  25. package/build/esm/components/PictogramButton/PictogramButton.js +1 -1
  26. package/build/esm/web-tokens/_colors.json +139 -31
  27. package/build/esm/web-tokens/visualConfig.d.ts +176 -44
  28. package/build/esm/web-tokens/visualConfig.js +1 -1
  29. package/build/scss/_theming.scss +123 -99
  30. package/build/scss/_variables.scss +61 -49
  31. package/package.json +1 -1
package/build/cjs/web-tokens/_colors.json CHANGED
@@ -787,113 +787,221 @@
787
787
  }
788
788
  },
789
789
  "icon": {
790
- "color-icon-primary": {
790
+ "color-icon-primary-default": {
791
791
  "name": "icon.primary",
792
- "description": "Primary color for icons in any given interface",
793
- "subState": "",
792
+ "description": "Default color for icons in any given interface",
793
+ "subState": "default",
794
+ "darkValue": "#d8dade",
795
+ "darkOriginalValue": "night-gray.light03",
796
+ "lightValue": "#1a1c1c",
797
+ "lightOriginalValue": "neutral.black"
798
+ },
799
+ "color-icon-primary-hover": {
800
+ "name": "icon.primary",
801
+ "description": "Hover color for primary icons",
802
+ "subState": "hover",
794
803
  "darkValue": "#d8dade",
795
804
  "darkOriginalValue": "night-gray.light03",
796
805
  "lightValue": "#1a1c1c",
797
806
  "lightOriginalValue": "neutral.black"
798
807
  },
799
- "color-icon-secondary": {
808
+ "color-icon-secondary-default": {
800
809
  "name": "icon.secondary",
801
810
  "description": "Use for icons that are secondary or that provides additional context",
802
- "subState": "",
811
+ "subState": "default",
803
812
  "darkValue": "#ced1d6",
804
813
  "darkOriginalValue": "night-gray.light02",
805
814
  "lightValue": "#40515e",
806
815
  "lightOriginalValue": "gray.dark01"
807
816
  },
808
- "color-icon-tertiary": {
817
+ "color-icon-secondary-hover": {
818
+ "name": "icon.secondary",
819
+ "description": "Hover color for secondary icons",
820
+ "subState": "hover",
821
+ "darkValue": "#d8dade",
822
+ "darkOriginalValue": "night-gray.light03",
823
+ "lightValue": "#314554",
824
+ "lightOriginalValue": "gray.dark02"
825
+ },
826
+ "color-icon-tertiary-default": {
809
827
  "name": "icon.tertiary",
810
828
  "description": "Use for icons that provides additional context or to display unselected state of certain UI elements, such as mobile app tab bars",
811
- "subState": "",
829
+ "subState": "default",
812
830
  "darkValue": "#93979f",
813
831
  "darkOriginalValue": "night-gray.regular",
814
832
  "lightValue": "#607585",
815
833
  "lightOriginalValue": "gray.regular"
816
834
  },
817
- "color-icon-quaternary": {
835
+ "color-icon-tertiary-hover": {
836
+ "name": "icon.tertiary",
837
+ "description": "Hover color for tertiary icons",
838
+ "subState": "hover",
839
+ "darkValue": "#b9bcc3",
840
+ "darkOriginalValue": "night-gray.light01",
841
+ "lightValue": "#40515e",
842
+ "lightOriginalValue": "gray.dark01"
843
+ },
844
+ "color-icon-quaternary-default": {
818
845
  "name": "icon.quaternary",
819
- "description": "Use for “decorative” icons that are not critical to understanding the flow of an interface, but function as 'visual anchors'",
820
- "subState": "",
846
+ "description": "Use for 'decorative' icons that are not critical to understanding the flow of an interface, but function as 'visual anchors'",
847
+ "subState": "default",
821
848
  "darkValue": "#757a84",
822
849
  "darkOriginalValue": "night-gray.dark01",
823
850
  "lightValue": "#a3b2bd",
824
851
  "lightOriginalValue": "gray.light01"
825
852
  },
826
- "color-icon-accent": {
853
+ "color-icon-quaternary-hover": {
854
+ "name": "icon.quaternary",
855
+ "description": "Hover color for quaternary icons",
856
+ "subState": "hover",
857
+ "darkValue": "#93979f",
858
+ "darkOriginalValue": "night-gray.regular",
859
+ "lightValue": "#607585",
860
+ "lightOriginalValue": "gray.regular"
861
+ },
862
+ "color-icon-accent-default": {
827
863
  "name": "icon.accent",
828
864
  "description": "Use for icons that accompany the main variant of interactive text (links)",
829
- "subState": "",
865
+ "subState": "default",
830
866
  "darkValue": "#2e9aa7",
831
867
  "darkOriginalValue": "night-brand.light01",
832
868
  "lightValue": "#047a88",
833
869
  "lightOriginalValue": "brand.dark01"
834
870
  },
835
- "color-icon-onAccent": {
871
+ "color-icon-accent-hover": {
872
+ "name": "icon.accent",
873
+ "description": "Hover color for accent icons",
874
+ "subState": "hover",
875
+ "darkValue": "#80dfea",
876
+ "darkOriginalValue": "night-brand.light02",
877
+ "lightValue": "#054f57",
878
+ "lightOriginalValue": "brand.dark02"
879
+ },
880
+ "color-icon-onAccent-default": {
836
881
  "name": "icon.onAccent",
837
882
  "description": "Use for icons that are placed on top of background.accent (e.g. the icon on primary button)",
838
- "subState": "",
883
+ "subState": "default",
839
884
  "darkValue": "#ffffff",
840
885
  "darkOriginalValue": "neutral.white",
841
886
  "lightValue": "#ffffff",
842
887
  "lightOriginalValue": "neutral.white"
843
888
  },
844
- "color-icon-onAccentSubtle": {
889
+ "color-icon-onAccent-hover": {
890
+ "name": "icon.onAccent",
891
+ "description": "Hover color for onAccent icons (same as default since white doesn't have darker shade)",
892
+ "subState": "hover",
893
+ "darkValue": "#ffffff",
894
+ "darkOriginalValue": "neutral.white",
895
+ "lightValue": "#ffffff",
896
+ "lightOriginalValue": "neutral.white"
897
+ },
898
+ "color-icon-onAccentSubtle-default": {
845
899
  "name": "icon.onAccentSubtle",
846
900
  "description": "Use on top of background.accent for icons with lower visual hierarchy",
847
- "subState": "",
901
+ "subState": "default",
848
902
  "darkValue": "rgba(255, 255, 255, 0.6)",
849
903
  "darkOriginalValue": "neutral.white-transparent02",
850
904
  "lightValue": "rgba(255, 255, 255, 0.6)",
851
905
  "lightOriginalValue": "neutral.white-transparent02"
852
906
  },
853
- "color-icon-info": {
907
+ "color-icon-onAccentSubtle-hover": {
908
+ "name": "icon.onAccentSubtle",
909
+ "description": "Hover color for onAccentSubtle icons",
910
+ "subState": "hover",
911
+ "darkValue": "rgba(255, 255, 255, 0.3)",
912
+ "darkOriginalValue": "neutral.white-transparent03",
913
+ "lightValue": "rgba(255, 255, 255, 0.8)",
914
+ "lightOriginalValue": "neutral.white-transparent01"
915
+ },
916
+ "color-icon-info-default": {
854
917
  "name": "icon.info",
855
918
  "description": "Use for icons that accompany neutral information which needs to be elevated from the normal content",
856
- "subState": "",
919
+ "subState": "default",
857
920
  "darkValue": "#6e95cf",
858
921
  "darkOriginalValue": "night-blue.light01",
859
922
  "lightValue": "#295dae",
860
923
  "lightOriginalValue": "blue.dark01"
861
924
  },
862
- "color-icon-error": {
925
+ "color-icon-info-hover": {
926
+ "name": "icon.info",
927
+ "description": "Hover color for info icons",
928
+ "subState": "hover",
929
+ "darkValue": "#99c1fa",
930
+ "darkOriginalValue": "night-blue.light02",
931
+ "lightValue": "#1c427d",
932
+ "lightOriginalValue": "blue.dark02"
933
+ },
934
+ "color-icon-error-default": {
863
935
  "name": "icon.error",
864
936
  "description": "Use for icons that accompany negative messages",
865
- "subState": "",
937
+ "subState": "default",
866
938
  "darkValue": "#d07c7c",
867
939
  "darkOriginalValue": "night-red.light01",
868
940
  "lightValue": "#dc4847",
869
941
  "lightOriginalValue": "red.dark01"
870
942
  },
871
- "color-icon-warning": {
943
+ "color-icon-error-hover": {
944
+ "name": "icon.error",
945
+ "description": "Hover color for error icons",
946
+ "subState": "hover",
947
+ "darkValue": "#f49a9a",
948
+ "darkOriginalValue": "night-red.light02",
949
+ "lightValue": "#c02725",
950
+ "lightOriginalValue": "red.dark02"
951
+ },
952
+ "color-icon-warning-default": {
872
953
  "name": "icon.warning",
873
954
  "description": "Use for icons that accompany warning messages",
874
- "subState": "",
955
+ "subState": "default",
875
956
  "darkValue": "#cbac76",
876
957
  "darkOriginalValue": "night-orange.light01",
877
958
  "lightValue": "#df9411",
878
959
  "lightOriginalValue": "orange.dark01"
879
960
  },
880
- "color-icon-success": {
961
+ "color-icon-warning-hover": {
962
+ "name": "icon.warning",
963
+ "description": "Hover color for warning icons",
964
+ "subState": "hover",
965
+ "darkValue": "#fae0b3",
966
+ "darkOriginalValue": "night-orange.light02",
967
+ "lightValue": "#9a6304",
968
+ "lightOriginalValue": "orange.dark02"
969
+ },
970
+ "color-icon-success-default": {
881
971
  "name": "icon.success",
882
- "description": "Use for icons that accompany positive messsages",
883
- "subState": "",
972
+ "description": "Use for icons that accompany positive messages",
973
+ "subState": "default",
884
974
  "darkValue": "#41a48a",
885
975
  "darkOriginalValue": "night-green.light01",
886
976
  "lightValue": "#0b8363",
887
977
  "lightOriginalValue": "green.dark01"
888
978
  },
889
- "color-icon-brand": {
979
+ "color-icon-success-hover": {
980
+ "name": "icon.success",
981
+ "description": "Hover color for success icons",
982
+ "subState": "hover",
983
+ "darkValue": "#a6f2dd",
984
+ "darkOriginalValue": "night-green.light02",
985
+ "lightValue": "#0a5c45",
986
+ "lightOriginalValue": "green.dark02"
987
+ },
988
+ "color-icon-brand-default": {
890
989
  "name": "icon.brand",
891
990
  "description": "Currently used for icons",
892
- "subState": "",
991
+ "subState": "default",
893
992
  "darkValue": "#2e9aa7",
894
993
  "darkOriginalValue": "night-brand.light01",
895
994
  "lightValue": "#0aa6b8",
896
995
  "lightOriginalValue": "brand.regular"
996
+ },
997
+ "color-icon-brand-hover": {
998
+ "name": "icon.brand",
999
+ "description": "Hover color for brand icons",
1000
+ "subState": "hover",
1001
+ "darkValue": "#80dfea",
1002
+ "darkOriginalValue": "night-brand.light02",
1003
+ "lightValue": "#047a88",
1004
+ "lightOriginalValue": "brand.dark01"
897
1005
  }
898
1006
  },
899
1007
  "border": {
@@ -1213,8 +1321,8 @@
1213
1321
  "color-chart-background-default": {
1214
1322
  "name": "chart.background",
1215
1323
  "subState": "default",
1216
- "darkValue": "#282c34",
1217
- "darkOriginalValue": "night-black.regular",
1324
+ "darkValue": "#1a1c1c",
1325
+ "darkOriginalValue": "neutral.black",
1218
1326
  "lightValue": "#ffffff",
1219
1327
  "lightOriginalValue": "neutral.white"
1220
1328
  },
@@ -1223,8 +1331,8 @@
1223
1331
  "subState": "inverted",
1224
1332
  "darkValue": "#ffffff",
1225
1333
  "darkOriginalValue": "neutral.white",
1226
- "lightValue": "#282c34",
1227
- "lightOriginalValue": "night-black"
1334
+ "lightValue": "#1a1c1c",
1335
+ "lightOriginalValue": "neutral.black"
1228
1336
  },
1229
1337
  "color-chart-text-positive": {
1230
1338
  "name": "chart.text",
package/build/cjs/web-tokens/visualConfig.d.ts CHANGED
@@ -308,18 +308,54 @@ type AmbossTheme = {
308
308
  };
309
309
  };
310
310
  "icon": {
311
- "primary": string;
312
- "secondary": string;
313
- "tertiary": string;
314
- "quaternary": string;
315
- "accent": string;
316
- "onAccent": string;
317
- "onAccentSubtle": string;
318
- "info": string;
319
- "error": string;
320
- "warning": string;
321
- "success": string;
322
- "brand": string;
311
+ "primary": {
312
+ "default": string;
313
+ "hover": string;
314
+ };
315
+ "secondary": {
316
+ "default": string;
317
+ "hover": string;
318
+ };
319
+ "tertiary": {
320
+ "default": string;
321
+ "hover": string;
322
+ };
323
+ "quaternary": {
324
+ "default": string;
325
+ "hover": string;
326
+ };
327
+ "accent": {
328
+ "default": string;
329
+ "hover": string;
330
+ };
331
+ "onAccent": {
332
+ "default": string;
333
+ "hover": string;
334
+ };
335
+ "onAccentSubtle": {
336
+ "default": string;
337
+ "hover": string;
338
+ };
339
+ "info": {
340
+ "default": string;
341
+ "hover": string;
342
+ };
343
+ "error": {
344
+ "default": string;
345
+ "hover": string;
346
+ };
347
+ "warning": {
348
+ "default": string;
349
+ "hover": string;
350
+ };
351
+ "success": {
352
+ "default": string;
353
+ "hover": string;
354
+ };
355
+ "brand": {
356
+ "default": string;
357
+ "hover": string;
358
+ };
323
359
  };
324
360
  "border": {
325
361
  "primary": {
@@ -570,12 +606,30 @@ type AmbossTheme = {
570
606
  };
571
607
  };
572
608
  "icon": {
573
- "primary": string;
574
- "secondary": string;
575
- "tertiary": string;
576
- "accent": string;
577
- "onAccent": string;
578
- "error": string;
609
+ "primary": {
610
+ "default": string;
611
+ "hover": string;
612
+ };
613
+ "secondary": {
614
+ "default": string;
615
+ "hover": string;
616
+ };
617
+ "tertiary": {
618
+ "default": string;
619
+ "hover": string;
620
+ };
621
+ "accent": {
622
+ "default": string;
623
+ "hover": string;
624
+ };
625
+ "onAccent": {
626
+ "default": string;
627
+ "hover": string;
628
+ };
629
+ "error": {
630
+ "default": string;
631
+ "hover": string;
632
+ };
579
633
  };
580
634
  "border": {
581
635
  "primary": {
@@ -645,12 +699,30 @@ type AmbossTheme = {
645
699
  };
646
700
  };
647
701
  "icon": {
648
- "primary": string;
649
- "secondary": string;
650
- "tertiary": string;
651
- "accent": string;
652
- "onAccent": string;
653
- "error": string;
702
+ "primary": {
703
+ "default": string;
704
+ "hover": string;
705
+ };
706
+ "secondary": {
707
+ "default": string;
708
+ "hover": string;
709
+ };
710
+ "tertiary": {
711
+ "default": string;
712
+ "hover": string;
713
+ };
714
+ "accent": {
715
+ "default": string;
716
+ "hover": string;
717
+ };
718
+ "onAccent": {
719
+ "default": string;
720
+ "hover": string;
721
+ };
722
+ "error": {
723
+ "default": string;
724
+ "hover": string;
725
+ };
654
726
  };
655
727
  "border": {
656
728
  "primary": {
@@ -723,13 +795,34 @@ type AmbossTheme = {
723
795
  };
724
796
  };
725
797
  "icon": {
726
- "primary": string;
727
- "secondary": string;
728
- "tertiary": string;
729
- "accent": string;
730
- "onAccent": string;
731
- "error": string;
732
- "info": string;
798
+ "primary": {
799
+ "default": string;
800
+ "hover": string;
801
+ };
802
+ "secondary": {
803
+ "default": string;
804
+ "hover": string;
805
+ };
806
+ "tertiary": {
807
+ "default": string;
808
+ "hover": string;
809
+ };
810
+ "accent": {
811
+ "default": string;
812
+ "hover": string;
813
+ };
814
+ "onAccent": {
815
+ "default": string;
816
+ "hover": string;
817
+ };
818
+ "error": {
819
+ "default": string;
820
+ "hover": string;
821
+ };
822
+ "info": {
823
+ "default": string;
824
+ "hover": string;
825
+ };
733
826
  };
734
827
  "border": {
735
828
  "primary": {
@@ -802,13 +895,34 @@ type AmbossTheme = {
802
895
  };
803
896
  };
804
897
  "icon": {
805
- "primary": string;
806
- "secondary": string;
807
- "tertiary": string;
808
- "accent": string;
809
- "onAccent": string;
810
- "info": string;
811
- "error": string;
898
+ "primary": {
899
+ "default": string;
900
+ "hover": string;
901
+ };
902
+ "secondary": {
903
+ "default": string;
904
+ "hover": string;
905
+ };
906
+ "tertiary": {
907
+ "default": string;
908
+ "hover": string;
909
+ };
910
+ "accent": {
911
+ "default": string;
912
+ "hover": string;
913
+ };
914
+ "onAccent": {
915
+ "default": string;
916
+ "hover": string;
917
+ };
918
+ "info": {
919
+ "default": string;
920
+ "hover": string;
921
+ };
922
+ "error": {
923
+ "default": string;
924
+ "hover": string;
925
+ };
812
926
  };
813
927
  "border": {
814
928
  "primary": {
@@ -878,12 +992,30 @@ type AmbossTheme = {
878
992
  };
879
993
  };
880
994
  "icon": {
881
- "primary": string;
882
- "secondary": string;
883
- "tertiary": string;
884
- "accent": string;
885
- "onAccent": string;
886
- "error": string;
995
+ "primary": {
996
+ "default": string;
997
+ "hover": string;
998
+ };
999
+ "secondary": {
1000
+ "default": string;
1001
+ "hover": string;
1002
+ };
1003
+ "tertiary": {
1004
+ "default": string;
1005
+ "hover": string;
1006
+ };
1007
+ "accent": {
1008
+ "default": string;
1009
+ "hover": string;
1010
+ };
1011
+ "onAccent": {
1012
+ "default": string;
1013
+ "hover": string;
1014
+ };
1015
+ "error": {
1016
+ "default": string;
1017
+ "hover": string;
1018
+ };
887
1019
  };
888
1020
  "border": {
889
1021
  "primary": {