@amboss/design-system 2.4.5 → 3.0.1

package/build/cjs/web-tokens/_colors.json

@@ -787,113 +787,221 @@
         }
     },
     "icon": {
-        "color-icon-primary": {
+        "color-icon-primary-default": {
             "name": "icon.primary",
-            "description": "Primary color for icons in any given interface",
-            "subState": "",
+            "description": "Default color for icons in any given interface",
+            "subState": "default",
+            "darkValue": "#d8dade",
+            "darkOriginalValue": "night-gray.light03",
+            "lightValue": "#1a1c1c",
+            "lightOriginalValue": "neutral.black"
+        },
+        "color-icon-primary-hover": {
+            "name": "icon.primary",
+            "description": "Hover color for primary icons",
+            "subState": "hover",
             "darkValue": "#d8dade",
             "darkOriginalValue": "night-gray.light03",
             "lightValue": "#1a1c1c",
             "lightOriginalValue": "neutral.black"
         },
-        "color-icon-secondary": {
+        "color-icon-secondary-default": {
             "name": "icon.secondary",
             "description": "Use for icons that are secondary or that provides additional context",
-            "subState": "",
+            "subState": "default",
             "darkValue": "#ced1d6",
             "darkOriginalValue": "night-gray.light02",
             "lightValue": "#40515e",
             "lightOriginalValue": "gray.dark01"
         },
-        "color-icon-tertiary": {
+        "color-icon-secondary-hover": {
+            "name": "icon.secondary",
+            "description": "Hover color for secondary icons",
+            "subState": "hover",
+            "darkValue": "#d8dade",
+            "darkOriginalValue": "night-gray.light03",
+            "lightValue": "#314554",
+            "lightOriginalValue": "gray.dark02"
+        },
+        "color-icon-tertiary-default": {
             "name": "icon.tertiary",
             "description": "Use for icons that provides additional context or to display unselected state of certain UI elements, such as mobile app tab bars",
-            "subState": "",
+            "subState": "default",
             "darkValue": "#93979f",
             "darkOriginalValue": "night-gray.regular",
             "lightValue": "#607585",
             "lightOriginalValue": "gray.regular"
         },
-        "color-icon-quaternary": {
+        "color-icon-tertiary-hover": {
+            "name": "icon.tertiary",
+            "description": "Hover color for tertiary icons",
+            "subState": "hover",
+            "darkValue": "#b9bcc3",
+            "darkOriginalValue": "night-gray.light01",
+            "lightValue": "#40515e",
+            "lightOriginalValue": "gray.dark01"
+        },
+        "color-icon-quaternary-default": {
             "name": "icon.quaternary",
-            "description": "Use for “decorative” icons that are not critical to understanding the flow of an interface, but function as 'visual anchors'",
-            "subState": "",
+            "description": "Use for 'decorative' icons that are not critical to understanding the flow of an interface, but function as 'visual anchors'",
+            "subState": "default",
             "darkValue": "#757a84",
             "darkOriginalValue": "night-gray.dark01",
             "lightValue": "#a3b2bd",
             "lightOriginalValue": "gray.light01"
         },
-        "color-icon-accent": {
+        "color-icon-quaternary-hover": {
+            "name": "icon.quaternary",
+            "description": "Hover color for quaternary icons",
+            "subState": "hover",
+            "darkValue": "#93979f",
+            "darkOriginalValue": "night-gray.regular",
+            "lightValue": "#607585",
+            "lightOriginalValue": "gray.regular"
+        },
+        "color-icon-accent-default": {
             "name": "icon.accent",
             "description": "Use for icons that accompany the main variant of interactive text (links)",
-            "subState": "",
+            "subState": "default",
             "darkValue": "#2e9aa7",
             "darkOriginalValue": "night-brand.light01",
             "lightValue": "#047a88",
             "lightOriginalValue": "brand.dark01"
         },
-        "color-icon-onAccent": {
+        "color-icon-accent-hover": {
+            "name": "icon.accent",
+            "description": "Hover color for accent icons",
+            "subState": "hover",
+            "darkValue": "#80dfea",
+            "darkOriginalValue": "night-brand.light02",
+            "lightValue": "#054f57",
+            "lightOriginalValue": "brand.dark02"
+        },
+        "color-icon-onAccent-default": {
             "name": "icon.onAccent",
             "description": "Use for icons that are placed on top of background.accent (e.g. the icon on primary button)",
-            "subState": "",
+            "subState": "default",
             "darkValue": "#ffffff",
             "darkOriginalValue": "neutral.white",
             "lightValue": "#ffffff",
             "lightOriginalValue": "neutral.white"
         },
-        "color-icon-onAccentSubtle": {
+        "color-icon-onAccent-hover": {
+            "name": "icon.onAccent",
+            "description": "Hover color for onAccent icons (same as default since white doesn't have darker shade)",
+            "subState": "hover",
+            "darkValue": "#ffffff",
+            "darkOriginalValue": "neutral.white",
+            "lightValue": "#ffffff",
+            "lightOriginalValue": "neutral.white"
+        },
+        "color-icon-onAccentSubtle-default": {
             "name": "icon.onAccentSubtle",
             "description": "Use on top of background.accent for icons with lower visual hierarchy",
-            "subState": "",
+            "subState": "default",
             "darkValue": "rgba(255, 255, 255, 0.6)",
             "darkOriginalValue": "neutral.white-transparent02",
             "lightValue": "rgba(255, 255, 255, 0.6)",
             "lightOriginalValue": "neutral.white-transparent02"
         },
-        "color-icon-info": {
+        "color-icon-onAccentSubtle-hover": {
+            "name": "icon.onAccentSubtle",
+            "description": "Hover color for onAccentSubtle icons",
+            "subState": "hover",
+            "darkValue": "rgba(255, 255, 255, 0.3)",
+            "darkOriginalValue": "neutral.white-transparent03",
+            "lightValue": "rgba(255, 255, 255, 0.8)",
+            "lightOriginalValue": "neutral.white-transparent01"
+        },
+        "color-icon-info-default": {
             "name": "icon.info",
             "description": "Use for icons that accompany neutral information which needs to be elevated from the normal content",
-            "subState": "",
+            "subState": "default",
             "darkValue": "#6e95cf",
             "darkOriginalValue": "night-blue.light01",
             "lightValue": "#295dae",
             "lightOriginalValue": "blue.dark01"
         },
-        "color-icon-error": {
+        "color-icon-info-hover": {
+            "name": "icon.info",
+            "description": "Hover color for info icons",
+            "subState": "hover",
+            "darkValue": "#99c1fa",
+            "darkOriginalValue": "night-blue.light02",
+            "lightValue": "#1c427d",
+            "lightOriginalValue": "blue.dark02"
+        },
+        "color-icon-error-default": {
             "name": "icon.error",
             "description": "Use for icons that accompany negative messages",
-            "subState": "",
+            "subState": "default",
             "darkValue": "#d07c7c",
             "darkOriginalValue": "night-red.light01",
             "lightValue": "#dc4847",
             "lightOriginalValue": "red.dark01"
         },
-        "color-icon-warning": {
+        "color-icon-error-hover": {
+            "name": "icon.error",
+            "description": "Hover color for error icons",
+            "subState": "hover",
+            "darkValue": "#f49a9a",
+            "darkOriginalValue": "night-red.light02",
+            "lightValue": "#c02725",
+            "lightOriginalValue": "red.dark02"
+        },
+        "color-icon-warning-default": {
             "name": "icon.warning",
             "description": "Use for icons that accompany warning messages",
-            "subState": "",
+            "subState": "default",
             "darkValue": "#cbac76",
             "darkOriginalValue": "night-orange.light01",
             "lightValue": "#df9411",
             "lightOriginalValue": "orange.dark01"
         },
-        "color-icon-success": {
+        "color-icon-warning-hover": {
+            "name": "icon.warning",
+            "description": "Hover color for warning icons",
+            "subState": "hover",
+            "darkValue": "#fae0b3",
+            "darkOriginalValue": "night-orange.light02",
+            "lightValue": "#9a6304",
+            "lightOriginalValue": "orange.dark02"
+        },
+        "color-icon-success-default": {
             "name": "icon.success",
-            "description": "Use for icons that accompany positive messsages",
-            "subState": "",
+            "description": "Use for icons that accompany positive messages",
+            "subState": "default",
             "darkValue": "#41a48a",
             "darkOriginalValue": "night-green.light01",
             "lightValue": "#0b8363",
             "lightOriginalValue": "green.dark01"
         },
-        "color-icon-brand": {
+        "color-icon-success-hover": {
+            "name": "icon.success",
+            "description": "Hover color for success icons",
+            "subState": "hover",
+            "darkValue": "#a6f2dd",
+            "darkOriginalValue": "night-green.light02",
+            "lightValue": "#0a5c45",
+            "lightOriginalValue": "green.dark02"
+        },
+        "color-icon-brand-default": {
             "name": "icon.brand",
             "description": "Currently used for icons",
-            "subState": "",
+            "subState": "default",
             "darkValue": "#2e9aa7",
             "darkOriginalValue": "night-brand.light01",
             "lightValue": "#0aa6b8",
             "lightOriginalValue": "brand.regular"
+        },
+        "color-icon-brand-hover": {
+            "name": "icon.brand",
+            "description": "Hover color for brand icons",
+            "subState": "hover",
+            "darkValue": "#80dfea",
+            "darkOriginalValue": "night-brand.light02",
+            "lightValue": "#047a88",
+            "lightOriginalValue": "brand.dark01"
         }
     },
     "border": {
@@ -1213,8 +1321,8 @@
         "color-chart-background-default": {
             "name": "chart.background",
             "subState": "default",
-            "darkValue": "#282c34",
-            "darkOriginalValue": "night-black.regular",
+            "darkValue": "#1a1c1c",
+            "darkOriginalValue": "neutral.black",
             "lightValue": "#ffffff",
             "lightOriginalValue": "neutral.white"
         },
@@ -1223,8 +1331,8 @@
             "subState": "inverted",
             "darkValue": "#ffffff",
             "darkOriginalValue": "neutral.white",
-            "lightValue": "#282c34",
-            "lightOriginalValue": "night-black"
+            "lightValue": "#1a1c1c",
+            "lightOriginalValue": "neutral.black"
         },
         "color-chart-text-positive": {
             "name": "chart.text",

package/build/cjs/web-tokens/visualConfig.d.ts

@@ -308,18 +308,54 @@ type AmbossTheme = {
             };
         };
         "icon": {
-            "primary": string;
-            "secondary": string;
-            "tertiary": string;
-            "quaternary": string;
-            "accent": string;
-            "onAccent": string;
-            "onAccentSubtle": string;
-            "info": string;
-            "error": string;
-            "warning": string;
-            "success": string;
-            "brand": string;
+            "primary": {
+                "default": string;
+                "hover": string;
+            };
+            "secondary": {
+                "default": string;
+                "hover": string;
+            };
+            "tertiary": {
+                "default": string;
+                "hover": string;
+            };
+            "quaternary": {
+                "default": string;
+                "hover": string;
+            };
+            "accent": {
+                "default": string;
+                "hover": string;
+            };
+            "onAccent": {
+                "default": string;
+                "hover": string;
+            };
+            "onAccentSubtle": {
+                "default": string;
+                "hover": string;
+            };
+            "info": {
+                "default": string;
+                "hover": string;
+            };
+            "error": {
+                "default": string;
+                "hover": string;
+            };
+            "warning": {
+                "default": string;
+                "hover": string;
+            };
+            "success": {
+                "default": string;
+                "hover": string;
+            };
+            "brand": {
+                "default": string;
+                "hover": string;
+            };
         };
         "border": {
             "primary": {
@@ -570,12 +606,30 @@ type AmbossTheme = {
                     };
                 };
                 "icon": {
-                    "primary": string;
-                    "secondary": string;
-                    "tertiary": string;
-                    "accent": string;
-                    "onAccent": string;
-                    "error": string;
+                    "primary": {
+                        "default": string;
+                        "hover": string;
+                    };
+                    "secondary": {
+                        "default": string;
+                        "hover": string;
+                    };
+                    "tertiary": {
+                        "default": string;
+                        "hover": string;
+                    };
+                    "accent": {
+                        "default": string;
+                        "hover": string;
+                    };
+                    "onAccent": {
+                        "default": string;
+                        "hover": string;
+                    };
+                    "error": {
+                        "default": string;
+                        "hover": string;
+                    };
                 };
                 "border": {
                     "primary": {
@@ -645,12 +699,30 @@ type AmbossTheme = {
                     };
                 };
                 "icon": {
-                    "primary": string;
-                    "secondary": string;
-                    "tertiary": string;
-                    "accent": string;
-                    "onAccent": string;
-                    "error": string;
+                    "primary": {
+                        "default": string;
+                        "hover": string;
+                    };
+                    "secondary": {
+                        "default": string;
+                        "hover": string;
+                    };
+                    "tertiary": {
+                        "default": string;
+                        "hover": string;
+                    };
+                    "accent": {
+                        "default": string;
+                        "hover": string;
+                    };
+                    "onAccent": {
+                        "default": string;
+                        "hover": string;
+                    };
+                    "error": {
+                        "default": string;
+                        "hover": string;
+                    };
                 };
                 "border": {
                     "primary": {
@@ -723,13 +795,34 @@ type AmbossTheme = {
                     };
                 };
                 "icon": {
-                    "primary": string;
-                    "secondary": string;
-                    "tertiary": string;
-                    "accent": string;
-                    "onAccent": string;
-                    "error": string;
-                    "info": string;
+                    "primary": {
+                        "default": string;
+                        "hover": string;
+                    };
+                    "secondary": {
+                        "default": string;
+                        "hover": string;
+                    };
+                    "tertiary": {
+                        "default": string;
+                        "hover": string;
+                    };
+                    "accent": {
+                        "default": string;
+                        "hover": string;
+                    };
+                    "onAccent": {
+                        "default": string;
+                        "hover": string;
+                    };
+                    "error": {
+                        "default": string;
+                        "hover": string;
+                    };
+                    "info": {
+                        "default": string;
+                        "hover": string;
+                    };
                 };
                 "border": {
                     "primary": {
@@ -802,13 +895,34 @@ type AmbossTheme = {
                     };
                 };
                 "icon": {
-                    "primary": string;
-                    "secondary": string;
-                    "tertiary": string;
-                    "accent": string;
-                    "onAccent": string;
-                    "info": string;
-                    "error": string;
+                    "primary": {
+                        "default": string;
+                        "hover": string;
+                    };
+                    "secondary": {
+                        "default": string;
+                        "hover": string;
+                    };
+                    "tertiary": {
+                        "default": string;
+                        "hover": string;
+                    };
+                    "accent": {
+                        "default": string;
+                        "hover": string;
+                    };
+                    "onAccent": {
+                        "default": string;
+                        "hover": string;
+                    };
+                    "info": {
+                        "default": string;
+                        "hover": string;
+                    };
+                    "error": {
+                        "default": string;
+                        "hover": string;
+                    };
                 };
                 "border": {
                     "primary": {
@@ -878,12 +992,30 @@ type AmbossTheme = {
                     };
                 };
                 "icon": {
-                    "primary": string;
-                    "secondary": string;
-                    "tertiary": string;
-                    "accent": string;
-                    "onAccent": string;
-                    "error": string;
+                    "primary": {
+                        "default": string;
+                        "hover": string;
+                    };
+                    "secondary": {
+                        "default": string;
+                        "hover": string;
+                    };
+                    "tertiary": {
+                        "default": string;
+                        "hover": string;
+                    };
+                    "accent": {
+                        "default": string;
+                        "hover": string;
+                    };
+                    "onAccent": {
+                        "default": string;
+                        "hover": string;
+                    };
+                    "error": {
+                        "default": string;
+                        "hover": string;
+                    };
                 };
                 "border": {
                     "primary": {