npm - @amboss/design-system - Versions diffs - 2.3.14 → 2.4.1 - Mend

@amboss/design-system 2.3.14 → 2.4.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 (23) hide show

package/build/cjs/components/Form/SearchInput/SearchInput.js +1 -1
package/build/cjs/components/Form/ToggleButton/ToggleButton.js +1 -1
package/build/cjs/components/MediaItem/MediaItem.d.ts +27 -8
package/build/cjs/components/MediaItem/MediaItem.js +1 -1
package/build/cjs/components/Tag/Tag.js +1 -1
package/build/cjs/types/index.d.ts +2 -0
package/build/cjs/types/index.js +1 -1
package/build/cjs/web-tokens/_colors.json +244 -194
package/build/cjs/web-tokens/visualConfig.d.ts +48 -32
package/build/cjs/web-tokens/visualConfig.js +1 -1
package/build/esm/components/Form/SearchInput/SearchInput.js +1 -1
package/build/esm/components/Form/ToggleButton/ToggleButton.js +1 -1
package/build/esm/components/MediaItem/MediaItem.d.ts +27 -8
package/build/esm/components/MediaItem/MediaItem.js +1 -1
package/build/esm/components/Tag/Tag.js +1 -1
package/build/esm/types/index.d.ts +2 -0
package/build/esm/types/index.js +1 -1
package/build/esm/web-tokens/_colors.json +244 -194
package/build/esm/web-tokens/visualConfig.d.ts +48 -32
package/build/esm/web-tokens/visualConfig.js +1 -1
package/build/scss/_theming.scss +100 -48
package/build/scss/_variables.scss +81 -55
package/package.json +1 -1

package/build/esm/web-tokens/_colors.json CHANGED Viewed

@@ -39,6 +39,200 @@
             "lightOriginalValue": "12), 0px 32px 112px rgba(0, 0, 0, 0"
         }
     },
+    "badge": {
+        "color-badge-background-default": {
+            "name": "badge.background",
+            "subState": "default",
+            "darkValue": "rgba(255, 255, 255, 0)",
+            "darkOriginalValue": "neutral.transparent",
+            "lightValue": "#ffffff",
+            "lightOriginalValue": "neutral.white"
+        },
+        "color-badge-background-green": {
+            "name": "badge.background",
+            "subState": "green",
+            "darkValue": "rgba(255, 255, 255, 0)",
+            "darkOriginalValue": "neutral.transparent",
+            "lightValue": "#e8f8f4",
+            "lightOriginalValue": "green.light03"
+        },
+        "color-badge-background-blue": {
+            "name": "badge.background",
+            "subState": "blue",
+            "darkValue": "rgba(255, 255, 255, 0)",
+            "darkOriginalValue": "neutral.transparent",
+            "lightValue": "#e7effe",
+            "lightOriginalValue": "blue.light03"
+        },
+        "color-badge-background-yellow": {
+            "name": "badge.background",
+            "subState": "yellow",
+            "darkValue": "rgba(255, 255, 255, 0)",
+            "darkOriginalValue": "neutral.transparent",
+            "lightValue": "#fef3e1",
+            "lightOriginalValue": "orange.light03"
+        },
+        "color-badge-background-brand": {
+            "name": "badge.background",
+            "subState": "brand",
+            "darkValue": "rgba(255, 255, 255, 0)",
+            "darkOriginalValue": "neutral.transparent",
+            "lightValue": "#e7f6f8",
+            "lightOriginalValue": "brand.light03"
+        },
+        "color-badge-background-purple": {
+            "name": "badge.background",
+            "subState": "purple",
+            "darkValue": "rgba(255, 255, 255, 0)",
+            "darkOriginalValue": "neutral.transparent",
+            "lightValue": "#f2effb",
+            "lightOriginalValue": "purple.light03"
+        },
+        "color-badge-background-red": {
+            "name": "badge.background",
+            "subState": "red",
+            "darkValue": "rgba(255, 255, 255, 0)",
+            "darkOriginalValue": "neutral.transparent",
+            "lightValue": "#fde8e8",
+            "lightOriginalValue": "red.light03"
+        },
+        "color-badge-background-gray": {
+            "name": "badge.background",
+            "subState": "gray",
+            "darkValue": "rgba(255, 255, 255, 0)",
+            "darkOriginalValue": "neutral.transparent",
+            "lightValue": "#eef2f5",
+            "lightOriginalValue": "gray.light03"
+        },
+        "color-badge-text-default": {
+            "name": "badge.text",
+            "subState": "default",
+            "darkValue": "#ced1d6",
+            "darkOriginalValue": "night-gray.light02",
+            "lightValue": "#1a1c1c",
+            "lightOriginalValue": "neutral.black"
+        },
+        "color-badge-text-green": {
+            "name": "badge.text",
+            "subState": "green",
+            "darkValue": "#41a48a",
+            "darkOriginalValue": "night-green.light01",
+            "lightValue": "#0b8363",
+            "lightOriginalValue": "green.dark01"
+        },
+        "color-badge-text-blue": {
+            "name": "badge.text",
+            "subState": "blue",
+            "darkValue": "#6e95cf",
+            "darkOriginalValue": "night-blue.light01",
+            "lightValue": "#295dae",
+            "lightOriginalValue": "blue.dark01"
+        },
+        "color-badge-text-yellow": {
+            "name": "badge.text",
+            "subState": "yellow",
+            "darkValue": "#cbac76",
+            "darkOriginalValue": "night-orange.light01",
+            "lightValue": "#9a6304",
+            "lightOriginalValue": "orange.dark02"
+        },
+        "color-badge-text-brand": {
+            "name": "badge.text",
+            "subState": "brand",
+            "darkValue": "#2e9aa7",
+            "darkOriginalValue": "night-brand.light01",
+            "lightValue": "#047a88",
+            "lightOriginalValue": "brand.dark01"
+        },
+        "color-badge-text-purple": {
+            "name": "badge.text",
+            "subState": "purple",
+            "darkValue": "#ad97f7",
+            "darkOriginalValue": "night-purple.light02",
+            "lightValue": "#5d44ab",
+            "lightOriginalValue": "purple.dark01"
+        },
+        "color-badge-text-red": {
+            "name": "badge.text",
+            "subState": "red",
+            "darkValue": "#d07c7c",
+            "darkOriginalValue": "night-red.light01",
+            "lightValue": "#c02725",
+            "lightOriginalValue": "red.dark02"
+        },
+        "color-badge-text-gray": {
+            "name": "badge.text",
+            "subState": "gray",
+            "darkValue": "#93979f",
+            "darkOriginalValue": "night-gray.regular",
+            "lightValue": "#607585",
+            "lightOriginalValue": "gray.regular"
+        },
+        "color-badge-border-default": {
+            "name": "badge.border",
+            "subState": "default",
+            "darkValue": "#393e47",
+            "darkOriginalValue": "night-black.light02",
+            "lightValue": "#e0e6eb",
+            "lightOriginalValue": "gray.light02"
+        },
+        "color-badge-border-green": {
+            "name": "badge.border",
+            "subState": "green",
+            "darkValue": "#393e47",
+            "darkOriginalValue": "night-black.light02",
+            "lightValue": "#d0f1e8",
+            "lightOriginalValue": "green.light02"
+        },
+        "color-badge-border-blue": {
+            "name": "badge.border",
+            "subState": "blue",
+            "darkValue": "#393e47",
+            "darkOriginalValue": "night-black.light02",
+            "lightValue": "#d2e2f9",
+            "lightOriginalValue": "blue.light02"
+        },
+        "color-badge-border-yellow": {
+            "name": "badge.border",
+            "subState": "yellow",
+            "darkValue": "#393e47",
+            "darkOriginalValue": "night-black.light02",
+            "lightValue": "#fceaca",
+            "lightOriginalValue": "orange.light02"
+        },
+        "color-badge-border-brand": {
+            "name": "badge.border",
+            "subState": "brand",
+            "darkValue": "#393e47",
+            "darkOriginalValue": "night-black.light02",
+            "lightValue": "#ceedf1",
+            "lightOriginalValue": "brand.light02"
+        },
+        "color-badge-border-purple": {
+            "name": "badge.border",
+            "subState": "purple",
+            "darkValue": "#393e47",
+            "darkOriginalValue": "night-black.light02",
+            "lightValue": "#d8d0f3",
+            "lightOriginalValue": "purple.light02"
+        },
+        "color-badge-border-red": {
+            "name": "badge.border",
+            "subState": "red",
+            "darkValue": "#393e47",
+            "darkOriginalValue": "night-black.light02",
+            "lightValue": "#fad1d1",
+            "lightOriginalValue": "red.light02"
+        },
+        "color-badge-border-gray": {
+            "name": "badge.border",
+            "subState": "gray",
+            "darkValue": "#393e47",
+            "darkOriginalValue": "night-black.light02",
+            "lightValue": "#e0e6eb",
+            "lightOriginalValue": "gray.light02"
+        }
+    },
     "canvas": {
         "color-canvas": {
             "name": "canvas",
@@ -835,200 +1029,6 @@
             "lightOriginalValue": "yellow.light01"
         }
     },
-    "badge": {
-        "color-badge-background-default": {
-            "name": "badge.background",
-            "subState": "default",
-            "darkValue": "transparent",
-            "darkOriginalValue": "",
-            "lightValue": "#ffffff",
-            "lightOriginalValue": "neutral.white"
-        },
-        "color-badge-background-green": {
-            "name": "badge.background",
-            "subState": "green",
-            "darkValue": "transparent",
-            "darkOriginalValue": "",
-            "lightValue": "#e8f8f4",
-            "lightOriginalValue": "green.light03"
-        },
-        "color-badge-background-blue": {
-            "name": "badge.background",
-            "subState": "blue",
-            "darkValue": "transparent",
-            "darkOriginalValue": "",
-            "lightValue": "#e7effe",
-            "lightOriginalValue": "blue.light03"
-        },
-        "color-badge-background-yellow": {
-            "name": "badge.background",
-            "subState": "yellow",
-            "darkValue": "transparent",
-            "darkOriginalValue": "",
-            "lightValue": "#fef3e1",
-            "lightOriginalValue": "orange.light03"
-        },
-        "color-badge-background-brand": {
-            "name": "badge.background",
-            "subState": "brand",
-            "darkValue": "transparent",
-            "darkOriginalValue": "",
-            "lightValue": "#e7f6f8",
-            "lightOriginalValue": "brand.light03"
-        },
-        "color-badge-background-purple": {
-            "name": "badge.background",
-            "subState": "purple",
-            "darkValue": "transparent",
-            "darkOriginalValue": "",
-            "lightValue": "#f2effb",
-            "lightOriginalValue": "purple.light03"
-        },
-        "color-badge-background-red": {
-            "name": "badge.background",
-            "subState": "red",
-            "darkValue": "transparent",
-            "darkOriginalValue": "",
-            "lightValue": "#fde8e8",
-            "lightOriginalValue": "red.light03"
-        },
-        "color-badge-background-gray": {
-            "name": "badge.background",
-            "subState": "gray",
-            "darkValue": "transparent",
-            "darkOriginalValue": "",
-            "lightValue": "#eef2f5",
-            "lightOriginalValue": "gray.light03"
-        },
-        "color-badge-text-default": {
-            "name": "badge.text",
-            "subState": "default",
-            "darkValue": "#ced1d6",
-            "darkOriginalValue": "night-gray.light02",
-            "lightValue": "#1a1c1c",
-            "lightOriginalValue": "neutral.black"
-        },
-        "color-badge-text-green": {
-            "name": "badge.text",
-            "subState": "green",
-            "darkValue": "#41a48a",
-            "darkOriginalValue": "night-green.light01",
-            "lightValue": "#0b8363",
-            "lightOriginalValue": "green.dark01"
-        },
-        "color-badge-text-blue": {
-            "name": "badge.text",
-            "subState": "blue",
-            "darkValue": "#6e95cf",
-            "darkOriginalValue": "night-blue.light01",
-            "lightValue": "#295dae",
-            "lightOriginalValue": "blue.dark01"
-        },
-        "color-badge-text-yellow": {
-            "name": "badge.text",
-            "subState": "yellow",
-            "darkValue": "#cbac76",
-            "darkOriginalValue": "night-orange.light01",
-            "lightValue": "#9a6304",
-            "lightOriginalValue": "orange.dark02"
-        },
-        "color-badge-text-brand": {
-            "name": "badge.text",
-            "subState": "brand",
-            "darkValue": "#2e9aa7",
-            "darkOriginalValue": "night-brand.light01",
-            "lightValue": "#047a88",
-            "lightOriginalValue": "brand.dark01"
-        },
-        "color-badge-text-purple": {
-            "name": "badge.text",
-            "subState": "purple",
-            "darkValue": "#ad97f7",
-            "darkOriginalValue": "night-purple.light02",
-            "lightValue": "#5d44ab",
-            "lightOriginalValue": "purple.dark01"
-        },
-        "color-badge-text-red": {
-            "name": "badge.text",
-            "subState": "red",
-            "darkValue": "#d07c7c",
-            "darkOriginalValue": "night-red.light01",
-            "lightValue": "#c02725",
-            "lightOriginalValue": "red.dark02"
-        },
-        "color-badge-text-gray": {
-            "name": "badge.text",
-            "subState": "gray",
-            "darkValue": "#93979f",
-            "darkOriginalValue": "night-gray.regular",
-            "lightValue": "#607585",
-            "lightOriginalValue": "gray.regular"
-        },
-        "color-badge-border-default": {
-            "name": "badge.border",
-            "subState": "default",
-            "darkValue": "#393e47",
-            "darkOriginalValue": "night-black.light02",
-            "lightValue": "#e0e6eb",
-            "lightOriginalValue": "gray.light02"
-        },
-        "color-badge-border-green": {
-            "name": "badge.border",
-            "subState": "green",
-            "darkValue": "#393e47",
-            "darkOriginalValue": "night-black.light02",
-            "lightValue": "#e8f8f4",
-            "lightOriginalValue": "green.light03"
-        },
-        "color-badge-border-blue": {
-            "name": "badge.border",
-            "subState": "blue",
-            "darkValue": "#393e47",
-            "darkOriginalValue": "night-black.light02",
-            "lightValue": "#e7effe",
-            "lightOriginalValue": "blue.light03"
-        },
-        "color-badge-border-yellow": {
-            "name": "badge.border",
-            "subState": "yellow",
-            "darkValue": "#393e47",
-            "darkOriginalValue": "night-black.light02",
-            "lightValue": "#fef3e1",
-            "lightOriginalValue": "orange.light03"
-        },
-        "color-badge-border-brand": {
-            "name": "badge.border",
-            "subState": "brand",
-            "darkValue": "#393e47",
-            "darkOriginalValue": "night-black.light02",
-            "lightValue": "#e7f6f8",
-            "lightOriginalValue": "brand.light03"
-        },
-        "color-badge-border-purple": {
-            "name": "badge.border",
-            "subState": "purple",
-            "darkValue": "#393e47",
-            "darkOriginalValue": "night-black.light02",
-            "lightValue": "#f2effb",
-            "lightOriginalValue": "purple.light03"
-        },
-        "color-badge-border-red": {
-            "name": "badge.border",
-            "subState": "red",
-            "darkValue": "#393e47",
-            "darkOriginalValue": "night-black.light02",
-            "lightValue": "#fde8e8",
-            "lightOriginalValue": "red.light03"
-        },
-        "color-badge-border-gray": {
-            "name": "badge.border",
-            "subState": "gray",
-            "darkValue": "#393e47",
-            "darkOriginalValue": "night-black.light02",
-            "lightValue": "#eef2f5",
-            "lightOriginalValue": "gray.light03"
-        }
-    },
     "segmented-progress-bar": {
         "color-segmented-progress-bar-monochrome": {
             "name": "segmented-progress-bar.monochrome",
@@ -1394,5 +1394,55 @@
             "lightValue": "#047a88",
             "lightOriginalValue": "brand.dark01"
         }
+    },
+    "media-item": {
+        "color-media-item-background-black": {
+            "name": "media-item.background",
+            "subState": "black",
+            "darkValue": "#000000",
+            "darkOriginalValue": "",
+            "lightValue": "#000000",
+            "lightOriginalValue": ""
+        },
+        "color-media-item-background-white": {
+            "name": "media-item.background",
+            "subState": "white",
+            "darkValue": "#FFFFFF",
+            "darkOriginalValue": "",
+            "lightValue": "#FFFFFF",
+            "lightOriginalValue": ""
+        },
+        "color-media-item-background-transparent": {
+            "name": "media-item.background",
+            "subState": "transparent",
+            "darkValue": "rgba(255, 255, 255, 0)",
+            "darkOriginalValue": "neutral.transparent",
+            "lightValue": "rgba(255, 255, 255, 0)",
+            "lightOriginalValue": "neutral.transparent"
+        },
+        "color-media-item-overlay-hover": {
+            "name": "media-item.overlay",
+            "subState": "hover",
+            "darkValue": "rgba(0, 0, 0, 0.3)",
+            "darkOriginalValue": "neutral.black-transparent03",
+            "lightValue": "rgba(255, 255, 255, 0.3)",
+            "lightOriginalValue": "neutral.white-transparent03"
+        },
+        "color-media-item-overlay-active": {
+            "name": "media-item.overlay",
+            "subState": "active",
+            "darkValue": "rgba(0, 0, 0, 0.6)",
+            "darkOriginalValue": "neutral.black-transparent02",
+            "lightValue": "rgba(0, 0, 0, 0.6)",
+            "lightOriginalValue": "neutral.black-transparent02"
+        },
+        "color-media-item-category-icon-background": {
+            "name": "media-item.category-icon",
+            "subState": "background",
+            "darkValue": "#32363e",
+            "darkOriginalValue": "night-black.light01",
+            "lightValue": "#314554",
+            "lightOriginalValue": "gray.dark02"
+        }
     }
 }

package/build/esm/web-tokens/visualConfig.d.ts CHANGED Viewed

@@ -143,6 +143,38 @@ type Variables = {
 };
 type AmbossTheme = {
     "color": {
+        "badge": {
+            "background": {
+                "default": string;
+                "green": string;
+                "blue": string;
+                "yellow": string;
+                "brand": string;
+                "purple": string;
+                "red": string;
+                "gray": string;
+            };
+            "text": {
+                "default": string;
+                "green": string;
+                "blue": string;
+                "yellow": string;
+                "brand": string;
+                "purple": string;
+                "red": string;
+                "gray": string;
+            };
+            "border": {
+                "default": string;
+                "green": string;
+                "blue": string;
+                "yellow": string;
+                "brand": string;
+                "purple": string;
+                "red": string;
+                "gray": string;
+            };
+        };
         "canvas": string;
         "background": {
             "primary": {
@@ -328,38 +360,6 @@ type AmbossTheme = {
                 "highlight": string;
             };
         };
-        "badge": {
-            "background": {
-                "default": string;
-                "green": string;
-                "blue": string;
-                "yellow": string;
-                "brand": string;
-                "purple": string;
-                "red": string;
-                "gray": string;
-            };
-            "text": {
-                "default": string;
-                "green": string;
-                "blue": string;
-                "yellow": string;
-                "brand": string;
-                "purple": string;
-                "red": string;
-                "gray": string;
-            };
-            "border": {
-                "default": string;
-                "green": string;
-                "blue": string;
-                "yellow": string;
-                "brand": string;
-                "purple": string;
-                "red": string;
-                "gray": string;
-            };
-        };
         "segmentedProgressBar": {
             "monochrome": string;
             "success": string;
@@ -493,6 +493,22 @@ type AmbossTheme = {
                 "bold": string;
             };
         };
+        "mediaItem": {
+            "background": {
+                "black": string;
+                "white": string;
+                "transparent": string;
+            };
+            "overlay": {
+                "hover": string;
+                "active": string;
+            };
+            "categoryIcon": {
+                "background": {
+                    "default": string;
+                };
+            };
+        };
     };
     "elevation": {
         "1": string;