@inera/ids-design 7.2.1 → 8.0.0

package/components/alert/alert.css

@@ -5,7 +5,7 @@
 * BUTTONS
 ********/
 /*******
-* SCROLLBARS
+* SCROLLBAR
 ********/
 /*******
 * FORM
@@ -13,6 +13,149 @@
 /*******
 * A11Y
 ********/
+:root {
+  --IDS-FONT-FAMILY-BASE: "Open Sans";
+  --IDS-FONT-FAMILY-HEADING: "Inter";
+  --IDS-FONT-COLOR: var(--ids-color-surface-text-on-default);
+  --IDS-HEADING-XXL__COLOR: var(--ids-color-heading-text-xxl);
+  --IDS-HEADING-XXL__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-HEADING-XXL__FONT-SIZE: 2rem;
+  --IDS-HEADING-XXL__LINE-HEIGHT: 2.5rem;
+  --IDS-HEADING-XXL__FONT-SIZE-DESKTOP: 3rem;
+  --IDS-HEADING-XXL__LINE-HEIGHT-DESKTOP: 3.25rem;
+  --IDS-HEADING-XXL__FONT-WEIGHT: 700;
+  --IDS-HEADING-XXL__LETTER-SPACING: -0.052rem;
+  --IDS-HEADING-XXL__LETTER-SPACING-DESKTOP: -0.078rem;
+  --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.875rem;
+  --IDS-HEADING-XL__COLOR: var(--ids-color-heading-text-xl);
+  --IDS-HEADING-XL__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-HEADING-XL__FONT-SIZE: 1.625rem;
+  --IDS-HEADING-XL__LINE-HEIGHT: 2.125rem;
+  --IDS-HEADING-XL__FONT-SIZE-DESKTOP: 2.25rem;
+  --IDS-HEADING-XL__LINE-HEIGHT-DESKTOP: 2.625rem;
+  --IDS-HEADING-XL__FONT-WEIGHT: 700;
+  --IDS-HEADING-XL__LETTER-SPACING: -0.031rem;
+  --IDS-HEADING-XL__LETTER-SPACING-DESKTOP: -0.063rem;
+  --IDS-HEADING-XL__MARGIN-BOTTOM: 1.875rem;
+  --IDS-HEADING-L__COLOR: var(--ids-color-heading-text-l);
+  --IDS-HEADING-L__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-HEADING-L__FONT-SIZE-DESKTOP: 1.75rem;
+  --IDS-HEADING-L__LINE-HEIGHT-DESKTOP: 2.25rem;
+  --IDS-HEADING-L__FONT-SIZE: 1.5rem;
+  --IDS-HEADING-L__LINE-HEIGHT: 1.875rem;
+  --IDS-HEADING-L__FONT-WEIGHT: 700;
+  --IDS-HEADING-L__LETTER-SPACING: -0.025rem;
+  --IDS-HEADING-L__LETTER-SPACING-DESKTOP: -0.044rem;
+  --IDS-HEADING-L__MARGIN-BOTTOM: 1.875rem;
+  --IDS-HEADING-M__COLOR: var(--ids-color-heading-text-m);
+  --IDS-HEADING-M__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-HEADING-M__FONT-SIZE: 1.375rem;
+  --IDS-HEADING-M__LINE-HEIGHT: 1.75rem;
+  --IDS-HEADING-M__FONT-SIZE-DESKTOP: 1.5rem;
+  --IDS-HEADING-M__LINE-HEIGHT-DESKTOP: 1.875rem;
+  --IDS-HEADING-M__FONT-WEIGHT: 700;
+  --IDS-HEADING-M__LETTER-SPACING: -0.019rem;
+  --IDS-HEADING-M__LETTER-SPACING-DESKTOP: -0.031rem;
+  --IDS-HEADING-S__COLOR: var(--ids-color-heading-text-s);
+  --IDS-HEADING-S__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-HEADING-S__FONT-SIZE: 1.25rem;
+  --IDS-HEADING-S__LINE-HEIGHT: 1.5rem;
+  --IDS-HEADING-S__FONT-SIZE-DESKTOP: 1.25rem;
+  --IDS-HEADING-S__LINE-HEIGHT-DESKTOP: 1.5rem;
+  --IDS-HEADING-S__FONT-WEIGHT: 700;
+  --IDS-HEADING-S__LETTER-SPACING: -0.013rem;
+  --IDS-HEADING-S__LETTER-SPACING-DESKTOP: -0.025rem;
+  --IDS-HEADING-XS__COLOR: var(--ids-color-heading-text-xs);
+  --IDS-HEADING-XS__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-HEADING-XS__FONT-SIZE: 1rem;
+  --IDS-HEADING-XS__LINE-HEIGHT: 1.25rem;
+  --IDS-HEADING-XS__FONT-WEIGHT: 700;
+  --IDS-HEADING-XS__LETTER-SPACING: 0;
+  --IDS-ANCHOR__COLOR: var(--ids-color-interactive-text-default);
+  --IDS-ANCHOR__HOVER-COLOR: var(--ids-color-interactive-text-hover);
+  --IDS-PREAMBLE__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
+  --IDS-PREAMBLE__FONT-SIZE: 1.125rem;
+  --IDS-PREAMBLE__LINE-HEIGHT: 1.75rem;
+  --IDS-PREAMBLE__FONT-SIZE-DESKTOP: 1.375rem;
+  --IDS-PREAMBLE__LINE-HEIGHT-DESKTOP: 2.25rem;
+  --IDS-BODY__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
+  --IDS-BODY__FONT-SIZE: 1rem;
+  --IDS-BODY__LINE-HEIGHT: 1.5rem;
+  --IDS-BODY--DISABLED__COLOR: var(--ids-color-interactive-text-disabled);
+  --IDS-PAGE-LIST__COLOR: var(--ids-color-brand-text-primary);
+  --IDS-PAGE-LIST__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-PAGE-LIST__FONT-SIZE: 1.25rem;
+  --IDS-PAGE-LIST__LINE-HEIGHT: 1.5rem;
+  --IDS-PAGE-LIST__FONT-WEIGHT: 700;
+  --IDS-PAGE-LIST__LETTER-SPACING: -0.025rem;
+  --IDS-BULLET-LIST__MARKER-COLOR: var(--ids-color-brand-text-primary);
+  --IDS-BULLET-LIST__MARKER-FONT-WEIGHT: bold;
+  --IDS-BULLET-LIST__LINE-HEIGHT: 1.5rem;
+  --IDS-DIVIDER__COLOR: var(--ids-color-surface-border-default);
+}
+:root.ids--1177-pro, :root.ids--1177-admin {
+  --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
+}
+:root.ids--inera, :root.ids--inera-admin {
+  --IDS-FONT-FAMILY-BASE: "Open Sans";
+  --IDS-FONT-FAMILY-HEADING: "Poppins";
+  --IDS-HEADING-XXL__FONT-SIZE: 1.875rem;
+  --IDS-HEADING-XXL__LINE-HEIGHT: 2.375rem;
+  --IDS-HEADING-XXL__FONT-SIZE-DESKTOP: 2.5rem;
+  --IDS-HEADING-XXL__LINE-HEIGHT-DESKTOP: 3.125rem;
+  --IDS-HEADING-XXL__FONT-WEIGHT: 600;
+  --IDS-HEADING-XXL__LETTER-SPACING: inherit;
+  --IDS-HEADING-XXL__LETTER-SPACING-DESKTOP: inherit;
+  --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.25rem;
+  --IDS-HEADING-XL__FONT-SIZE: 1.625rem;
+  --IDS-HEADING-XL__LINE-HEIGHT: 2rem;
+  --IDS-HEADING-XL__FONT-SIZE-DESKTOP: 2rem;
+  --IDS-HEADING-XL__LINE-HEIGHT-DESKTOP: 2.5rem;
+  --IDS-HEADING-XL__FONT-WEIGHT: 600;
+  --IDS-HEADING-XL__LETTER-SPACING: inherit;
+  --IDS-HEADING-XL__LETTER-SPACING-DESKTOP: inherit;
+  --IDS-HEADING-XL__MARGIN-BOTTOM: 1.25rem;
+  --IDS-HEADING-L__FONT-SIZE: 1.5rem;
+  --IDS-HEADING-L__LINE-HEIGHT: 1.875rem;
+  --IDS-HEADING-L__FONT-SIZE-DESKTOP: 1.75rem;
+  --IDS-HEADING-L__LINE-HEIGHT-DESKTOP: 2.25rem;
+  --IDS-HEADING-L__FONT-WEIGHT: 600;
+  --IDS-HEADING-L__LETTER-SPACING: inherit;
+  --IDS-HEADING-L__LETTER-SPACING-DESKTOP: inherit;
+  --IDS-HEADING-L__MARGIN-BOTTOM: 1.25rem;
+  --IDS-HEADING-M__FONT-SIZE: 1.375rem;
+  --IDS-HEADING-M__LINE-HEIGHT: 1.75rem;
+  --IDS-HEADING-M__FONT-SIZE-DESKTOP: 1.5rem;
+  --IDS-HEADING-M__LINE-HEIGHT-DESKTOP: 2rem;
+  --IDS-HEADING-M__FONT-WEIGHT: 600;
+  --IDS-HEADING-M__LETTER-SPACING: inherit;
+  --IDS-HEADING-M__LETTER-SPACING-DESKTOP: inherit;
+  --IDS-HEADING-S__FONT-SIZE: 1.25rem;
+  --IDS-HEADING-S__LINE-HEIGHT: 1.5rem;
+  --IDS-HEADING-S__FONT-SIZE-DESKTOP: 1.25rem;
+  --IDS-HEADING-S__LINE-HEIGHT-DESKTOP: 1.625rem;
+  --IDS-HEADING-S__FONT-WEIGHT: 600;
+  --IDS-HEADING-S__LETTER-SPACING: inherit;
+  --IDS-HEADING-S__LETTER-SPACING-DESKTOP: inherit;
+  --IDS-HEADING-XS__FONT-SIZE: 1rem;
+  --IDS-HEADING-XS__LINE-HEIGHT: 1.25rem;
+  --IDS-HEADING-XS__FONT-WEIGHT: 600;
+  --IDS-HEADING-XS__LETTER-SPACING: inherit;
+  --IDS-BODY__LINE-HEIGHT: 1.625rem;
+  --IDS-BODY--DISABLED__COLOR: var(--ids-color-interactive-text-disabled);
+  --IDS-PAGE-LIST__FONT-WEIGHT: 600;
+  --IDS-PAGE-LIST__LETTER-SPACING: 0;
+  --IDS-BULLET-LIST__MARKER-FONT-WEIGHT: normal;
+  --IDS-BULLET-LIST__LINE-HEIGHT: 1.625rem;
+  --IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT: 600;
+}
+:root.ids--dark {
+  --IDS-PAGE-LIST__COLOR: var(--ids-color-navigation-text-default);
+}
+:root.ids--dark.ids--1177-pro, :root.ids--dark.ids--1177-admin, :root.ids--dark.ids--inera, :root.ids--dark.ids--inera-admin {
+  --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
+}
+
 @media (max-width: 1023px) {
   .ids-desktop {
     display: none !important;
@@ -26,74 +169,25 @@
 }
 
 .ids-alert {
-  color: var(--IDS-ALERT__COLOR);
-  border-radius: var(--IDS-BORDER-RADIUS);
-  border-style: solid;
-  border-width: 0.063rem;
+  border-radius: var(--IDS-ALERT__BORDER-RADIUS);
+  border: var(--IDS-ALERT__BORDER-THICKNESS) solid var(--IDS-ALERT--INFO__BORDER-COLOR);
   font-size: 1rem;
   line-height: 1.5rem;
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
-  padding: 1.25rem 1rem;
+  padding: var(--IDS-ALERT__PADDING);
 }
 .ids-alert .ids-alert__header {
   display: flex;
-  flex-wrap: wrap;
+  flex-grow: 1;
   gap: 1rem;
 }
-.ids-alert .ids-alert__header .ids-alert__button {
-  display: flex;
-  align-items: center;
-}
 .ids-alert .ids-alert__icon_and_text {
   display: flex;
   gap: 1rem;
   flex-grow: 1;
 }
-.ids-alert .ids-alert__expand {
-  min-width: 1.5rem;
-  min-height: 1.5rem;
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  outline: inherit;
-  -moz-user-select: -moz-none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-.ids-alert .ids-alert__expand:focus {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
-}
-.ids-alert .ids-alert__expand {
-  height: 1.5rem;
-  width: 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
-.ids-alert .ids-alert__expand:before {
-  font: icon;
-  font-family: "Inera-Design-Icons" !important;
-  display: block;
-  position: absolute;
-  pointer-events: none;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  content: "\e906";
-  font-size: 1.25rem;
-  color: var(--IDS-FONT-COLOR);
-}
-.ids-alert .ids-alert__expand.ids-alert__expand--expanded:before {
-  content: "\e909";
-}
 .ids-alert .ids-alert__close {
   min-width: 1.5rem;
   min-height: 1.5rem;
@@ -112,7 +206,7 @@
 }
 .ids-alert .ids-alert__close:focus {
   outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+  outline-offset: 0.375rem !important;
 }
 .ids-alert .ids-alert__close {
   width: 1.5rem;
@@ -121,6 +215,7 @@
   align-items: center;
   justify-content: center;
   position: relative;
+  border-radius: 100%;
 }
 .ids-alert .ids-alert__close:before {
   font: icon;
@@ -132,12 +227,12 @@
   -moz-osx-font-smoothing: grayscale;
   content: "\e916";
   font-size: 1.25rem;
-  color: var(--IDS-ICON__COLOR);
+  color: var(--IDS-ALERT__CLOSE-BUTTON-COLOR);
   top: 50%;
   transform: translateY(-50%);
 }
-.ids-alert .ids-alert__close:hover:before, .ids-alert .ids-alert__close:focus:before, .ids-alert .ids-alert__close:active:before {
-  color: var(--IDS-ICON--ACTIVE-COLOR);
+.ids-alert .ids-alert__close:hover:before {
+  color: var(--IDS-ALERT__CLOSE-BUTTON-HOVER-COLOR);
 }
 .ids-alert .ids-alert__content {
   display: block;
@@ -150,14 +245,12 @@
   min-width: 1.75rem;
   position: relative;
 }
-.ids-alert .ids-alert__headline {
-  margin-top: 0.125rem;
-}
 .ids-alert .ids-alert__headline *,
 .ids-alert .ids-alert__headline ::slotted(*) {
-  margin: 0 !important;
+  margin-top: 0.125rem !important;
+  margin: 0.125rem 0 0 0 !important;
   font-style: normal;
-  color: var(--IDS-COLOR-NEUTRAL-20);
+  color: var(--IDS-ALERT--INFO__COLOR);
   font-family: var(--IDS-HEADING-S__FONT-FAMILY);
   font-size: var(--IDS-HEADING-S__FONT-SIZE);
   line-height: var(--IDS-HEADING-S__LINE-HEIGHT);
@@ -172,14 +265,26 @@
     letter-spacing: var(--IDS-HEADING-S__LETTER-SPACING-DESKTOP);
   }
 }
+.ids-alert .ids-alert__sr-only {
+  position: absolute;
+  width: 0.063rem;
+  height: 0.063rem;
+  padding: 0;
+  margin: -0.063rem;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
 @media (min-width: 640px) {
   .ids-alert {
-    padding: 1.5rem 1.25rem;
+    padding: var(--IDS-ALERT__PADDING-SMALL);
   }
 }
 .ids-alert.ids-alert--info {
   background-color: var(--IDS-ALERT--INFO__BACKGROUND-COLOR);
-  border-color: var(--IDS-ALERT--INFO__BORDER-COLOR);
+  border: var(--IDS-ALERT__BORDER-THICKNESS) solid var(--IDS-ALERT--INFO__BORDER-COLOR);
+  color: var(--IDS-ALERT--INFO__COLOR);
 }
 .ids-alert.ids-alert--info .ids-alert__state-icon:before,
 .ids-alert.ids-alert--info .ids-alert__content-icon:before {
@@ -191,12 +296,13 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e90c";
-  font-size: 1.875rem;
+  font-size: 1.75rem;
   color: var(--IDS-ALERT--INFO__ICON-COLOR);
 }
 .ids-alert.ids-alert--attention {
   background-color: var(--IDS-ALERT--ATTENTION__BACKGROUND-COLOR);
-  border-color: var(--IDS-ALERT--ATTENTION__BORDER-COLOR);
+  border: var(--IDS-ALERT__BORDER-THICKNESS) solid var(--IDS-ALERT--ATTENTION__BORDER-COLOR);
+  color: var(--IDS-ALERT--ATTENTION__COLOR);
 }
 .ids-alert.ids-alert--attention .ids-alert__state-icon:before,
 .ids-alert.ids-alert--attention .ids-alert__content-icon:before {
@@ -208,12 +314,13 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e905";
-  font-size: 1.875rem;
+  font-size: 1.75rem;
   color: var(--IDS-ALERT--ATTENTION__ICON-COLOR);
 }
 .ids-alert.ids-alert--success {
   background-color: var(--IDS-ALERT--SUCCESS__BACKGROUND-COLOR);
-  border-color: var(--IDS-ALERT--SUCCESS__BORDER-COLOR);
+  border: var(--IDS-ALERT__BORDER-THICKNESS) solid var(--IDS-ALERT--SUCCESS__BORDER-COLOR);
+  color: var(--IDS-ALERT--SUCCESS__COLOR);
 }
 .ids-alert.ids-alert--success .ids-alert__state-icon:before,
 .ids-alert.ids-alert--success .ids-alert__content-icon:before {
@@ -225,12 +332,13 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e912";
-  font-size: 1.875rem;
+  font-size: 1.75rem;
   color: var(--IDS-ALERT--SUCCESS__ICON-COLOR);
 }
 .ids-alert.ids-alert--error {
   background-color: var(--IDS-ALERT--ERROR__BACKGROUND-COLOR);
-  border-color: var(--IDS-ALERT--ERROR__BORDER-COLOR);
+  border: var(--IDS-ALERT__BORDER-THICKNESS) solid var(--IDS-ALERT--ERROR__BORDER-COLOR);
+  color: var(--IDS-ALERT--ERROR__COLOR);
 }
 .ids-alert.ids-alert--error .ids-alert__state-icon:before,
 .ids-alert.ids-alert--error .ids-alert__content-icon:before {
@@ -242,9 +350,99 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e913";
-  font-size: 1.875rem;
+  font-size: 1.75rem;
   color: var(--IDS-ALERT--ERROR__ICON-COLOR);
 }
+.ids-alert.ids-alert--collapsible {
+  padding: var(--IDS-ALERT__PADDING-COLLAPSIBLE);
+}
+.ids-alert.ids-alert--collapsible .ids-alert__expand-button {
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+  -moz-user-select: -moz-none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.ids-alert.ids-alert--collapsible .ids-alert__expand-button:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+.ids-alert.ids-alert--collapsible .ids-alert__expand-button {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  border: none;
+  border-radius: var(--IDS-ALERT__BORDER-RADIUS);
+  padding: 1rem;
+}
+.ids-alert.ids-alert--collapsible .ids-alert__expand-button:after {
+  font: icon;
+  font-family: "Inera-Design-Icons" !important;
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e936";
+  font-size: 1.25rem;
+  color: var(--IDS-ALERT__EXPAND-BUTTON-COLOR);
+  top: 1.25rem;
+  right: 1.125rem;
+}
+.ids-alert.ids-alert--collapsible .ids-alert__expand-button.ids-alert__expand-button--expanded:after {
+  content: "\e939";
+}
+.ids-alert.ids-alert--collapsible .ids-alert__expand-button:hover:after {
+  color: var(--IDS-ALERT__EXPAND-BUTTON-HOVER-COLOR);
+}
+.ids-alert.ids-alert--collapsible .ids-alert__content {
+  padding: 0 1rem 1rem 1rem;
+  margin: 0;
+}
+.ids-alert.ids-alert--collapsible .ids-alert__icon_and_text {
+  padding-right: 2rem;
+}
+.ids-alert.ids-alert--collapsible .ids-alert__headline {
+  margin-top: 0.125rem !important;
+  text-align: left !important;
+  font-style: normal;
+  color: var(--IDS-ALERT--INFO__COLOR);
+  font-family: var(--IDS-HEADING-S__FONT-FAMILY);
+  font-size: var(--IDS-HEADING-S__FONT-SIZE);
+  line-height: var(--IDS-HEADING-S__LINE-HEIGHT);
+  letter-spacing: var(--IDS-HEADING-S__LETTER-SPACING);
+  font-weight: var(--IDS-HEADING-S__FONT-WEIGHT);
+}
+@media (min-width: 1024px) {
+  .ids-alert.ids-alert--collapsible .ids-alert__headline {
+    font-size: var(--IDS-HEADING-S__FONT-SIZE-DESKTOP);
+    line-height: var(--IDS-HEADING-S__LINE-HEIGHT-DESKTOP);
+    letter-spacing: var(--IDS-HEADING-S__LETTER-SPACING-DESKTOP);
+  }
+}
+@media (min-width: 1024px) {
+  .ids-alert.ids-alert--collapsible .ids-alert__expand-button {
+    padding: 1.25rem;
+  }
+  .ids-alert.ids-alert--collapsible .ids-alert__expand-button::after {
+    top: 1.5rem;
+    right: 1.25rem;
+  }
+  .ids-alert.ids-alert--collapsible .ids-alert__content {
+    padding: 0 1.25rem 1.25rem 1.25rem;
+  }
+}
 .ids-alert.ids-alert--collapsed .ids-alert__content {
   display: none;
 }
@@ -269,7 +467,7 @@
   position: relative;
   width: 1.75rem;
   height: 1.25rem;
-  margin-right: 0.3125rem;
+  margin-right: 0.5rem;
   flex-shrink: 0;
   display: inline-block;
   bottom: -0.125rem;
@@ -287,7 +485,7 @@
 }
 @media (min-width: 1024px) {
   .ids-alert.ids-alert--compact .ids-alert__content-icon {
-    margin-right: 0.5rem;
+    margin-right: 0.75rem;
   }
   .ids-alert.ids-alert--compact .ids-alert__content-text {
     display: block;
@@ -295,7 +493,7 @@
   }
 }
 .ids-alert.ids-alert--ribbon {
-  padding: 0.5rem 0.75rem !important;
+  padding: var(--IDS-ALERT__PADDING-RIBBON);
   flex-direction: row;
   flex-wrap: nowrap;
 }
@@ -316,7 +514,7 @@
   position: relative;
   width: 1.75rem;
   height: 1.25rem;
-  margin-right: 0.3125rem;
+  margin-right: 0.5rem;
   flex-shrink: 0;
   display: inline-block;
   bottom: -0.125rem;
@@ -334,7 +532,7 @@
 }
 @media (min-width: 1024px) {
   .ids-alert.ids-alert--ribbon .ids-alert__content-icon {
-    margin-right: 0.5rem;
+    margin-right: 0.75rem;
   }
   .ids-alert.ids-alert--ribbon .ids-alert__content-text {
     display: block;

package/components/badge/badge-lit.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-badge{display:inline}.ids-badge .ids-badge__inner{align-items:center;border-radius:.313rem;box-sizing:border-box;color:var(--IDS-BADGE__COLOR);display:inline-flex;font-size:.75rem;font-weight:400;justify-items:center;line-height:1rem;padding:.188rem .438rem}.ids-badge .ids-badge__icon{display:flex;margin-right:.5rem}.ids-badge.ids-badge--primary .ids-badge__inner{background-color:var(--IDS-BADGE--PRIMARY__BACKGROUND-COLOR);border:var(--IDS-BADGE--PRIMARY__BORDER);color:var(--IDS-BADGE--PRIMARY__COLOR)}.ids-badge.ids-badge--secondary .ids-badge__inner{background-color:var(--IDS-BADGE--SECONDARY__BACKGROUND-COLOR);border:var(--IDS-BADGE--SECONDARY__BORDER)}.ids-badge.ids-badge--neutral .ids-badge__inner{background-color:var(--IDS-BADGE--NEUTRAL__BACKGROUND-COLOR);border:var(--IDS-BADGE--NEUTRAL__BORDER)}.ids-badge.ids-badge--info .ids-badge__inner{background-color:var(--IDS-BADGE--INFO__BACKGROUND-COLOR);border:var(--IDS-BADGE--INFO__BORDER)}.ids-badge.ids-badge--attention .ids-badge__inner{background-color:var(--IDS-BADGE--ATTENTION__BACKGROUND-COLOR);border:var(--IDS-BADGE--ATTENTION__BORDER)}.ids-badge.ids-badge--success .ids-badge__inner{background-color:var(--IDS-BADGE--SUCCESS__BACKGROUND-COLOR);border:var(--IDS-BADGE--SUCCESS__BORDER)}.ids-badge.ids-badge--error .ids-badge__inner{background-color:var(--IDS-BADGE--ERROR__BACKGROUND-COLOR);border:var(--IDS-BADGE--ERROR__BORDER)}@media (min-width:1024px){.ids-badge .ids-badge__inner{font-size:.875em;padding:.3125rem .4375rem}}";
+var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-badge{display:inline}.ids-badge .ids-badge__inner{align-items:center;border-radius:.313rem;box-sizing:border-box;display:inline-flex;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:.75rem;font-weight:400;justify-items:center;line-height:1rem;padding:var(--IDS-BADGE__PADDING-DESKTOP)}.ids-badge .ids-badge__icon{display:flex;margin-right:.5rem}.ids-badge.ids-badge--primary .ids-badge__inner{background-color:var(--IDS-BADGE--PRIMARY__BACKGROUND-COLOR);border:var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--PRIMARY__BORDER-COLOR);color:var(--IDS-BADGE--PRIMARY__COLOR)}.ids-badge.ids-badge--secondary .ids-badge__inner{background-color:var(--IDS-BADGE--SECONDARY__BACKGROUND-COLOR);border:var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--SECONDARY__BORDER-COLOR);color:var(--IDS-BADGE--SECONDARY__COLOR)}.ids-badge.ids-badge--neutral .ids-badge__inner{background-color:var(--IDS-BADGE--NEUTRAL__BACKGROUND-COLOR);border:var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--NEUTRAL__BORDER-COLOR);color:var(--IDS-BADGE--NEUTRAL__COLOR)}.ids-badge.ids-badge--info .ids-badge__inner{background-color:var(--IDS-BADGE--INFO__BACKGROUND-COLOR);border:var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--INFO__BORDER-COLOR);color:var(--IDS-BADGE--INFO__COLOR)}.ids-badge.ids-badge--attention .ids-badge__inner{background-color:var(--IDS-BADGE--ATTENTION__BACKGROUND-COLOR);border:var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--ATTENTION__BORDER-COLOR);color:var(--IDS-BADGE--ATTENTION__COLOR)}.ids-badge.ids-badge--success .ids-badge__inner{background-color:var(--IDS-BADGE--SUCCESS__BACKGROUND-COLOR);border:var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--SUCCESS__BORDER-COLOR);color:var(--IDS-BADGE--SUCCESS__COLOR)}.ids-badge.ids-badge--error .ids-badge__inner{background-color:var(--IDS-BADGE--ERROR__BACKGROUND-COLOR);border:var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--ERROR__BORDER-COLOR);color:var(--IDS-BADGE--ERROR__COLOR)}@media (min-width:1024px){.ids-badge .ids-badge__inner{font-size:.875em;padding:var(--IDS-BADGE__PADDING-MOBILE)}}";
 
 var badgeLit = css`${unsafeCSS(css_248z)}`;
 

package/components/badge/badge.css

@@ -16,14 +16,14 @@
 .ids-badge .ids-badge__inner {
   line-height: 1rem;
   box-sizing: border-box;
-  padding: 0.188rem 0.438rem;
+  padding: var(--IDS-BADGE__PADDING-DESKTOP);
   display: inline-flex;
   align-items: center;
   justify-items: center;
   font-size: 0.75rem;
   font-weight: 400;
-  color: var(--IDS-BADGE__COLOR);
   border-radius: 0.313rem;
+  font-family: var(--IDS-FONT-FAMILY-BASE);
 }
 .ids-badge .ids-badge__icon {
   margin-right: 0.5rem;
@@ -31,36 +31,42 @@
 }
 .ids-badge.ids-badge--primary .ids-badge__inner {
   background-color: var(--IDS-BADGE--PRIMARY__BACKGROUND-COLOR);
-  border: var(--IDS-BADGE--PRIMARY__BORDER);
+  border: var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--PRIMARY__BORDER-COLOR);
   color: var(--IDS-BADGE--PRIMARY__COLOR);
 }
 .ids-badge.ids-badge--secondary .ids-badge__inner {
   background-color: var(--IDS-BADGE--SECONDARY__BACKGROUND-COLOR);
-  border: var(--IDS-BADGE--SECONDARY__BORDER);
+  border: var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--SECONDARY__BORDER-COLOR);
+  color: var(--IDS-BADGE--SECONDARY__COLOR);
 }
 .ids-badge.ids-badge--neutral .ids-badge__inner {
   background-color: var(--IDS-BADGE--NEUTRAL__BACKGROUND-COLOR);
-  border: var(--IDS-BADGE--NEUTRAL__BORDER);
+  border: var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--NEUTRAL__BORDER-COLOR);
+  color: var(--IDS-BADGE--NEUTRAL__COLOR);
 }
 .ids-badge.ids-badge--info .ids-badge__inner {
   background-color: var(--IDS-BADGE--INFO__BACKGROUND-COLOR);
-  border: var(--IDS-BADGE--INFO__BORDER);
+  border: var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--INFO__BORDER-COLOR);
+  color: var(--IDS-BADGE--INFO__COLOR);
 }
 .ids-badge.ids-badge--attention .ids-badge__inner {
   background-color: var(--IDS-BADGE--ATTENTION__BACKGROUND-COLOR);
-  border: var(--IDS-BADGE--ATTENTION__BORDER);
+  border: var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--ATTENTION__BORDER-COLOR);
+  color: var(--IDS-BADGE--ATTENTION__COLOR);
 }
 .ids-badge.ids-badge--success .ids-badge__inner {
   background-color: var(--IDS-BADGE--SUCCESS__BACKGROUND-COLOR);
-  border: var(--IDS-BADGE--SUCCESS__BORDER);
+  border: var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--SUCCESS__BORDER-COLOR);
+  color: var(--IDS-BADGE--SUCCESS__COLOR);
 }
 .ids-badge.ids-badge--error .ids-badge__inner {
   background-color: var(--IDS-BADGE--ERROR__BACKGROUND-COLOR);
-  border: var(--IDS-BADGE--ERROR__BORDER);
+  border: var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--ERROR__BORDER-COLOR);
+  color: var(--IDS-BADGE--ERROR__COLOR);
 }
 @media (min-width: 1024px) {
   .ids-badge .ids-badge__inner {
-    padding: 0.3125rem 0.4375rem;
+    padding: var(--IDS-BADGE__PADDING-MOBILE);
     font-size: 0.875em;
   }
 }

package/components/box-link/box-link-lit.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-box-link .ids-box-link__inner{align-items:flex-start;background-color:var(--IDS-LINK--BOX__BACKGROUND-COLOR);border-radius:.3125rem;box-sizing:border-box;display:flex;font-size:1rem;line-height:1.5rem;position:relative}.ids-box-link .ids-box-link__inner .ids-box-link__link{cursor:pointer;display:block;flex-grow:1}.ids-box-link .ids-box-link__inner .ids-box-link__link:hover ::slotted(a),.ids-box-link .ids-box-link__inner .ids-box-link__link:hover a{color:var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);text-decoration:underline!important}.ids-box-link .ids-box-link__inner ::slotted(a):focus,.ids-box-link .ids-box-link__inner a:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.125rem!important}.ids-box-link .ids-box-link__inner ::slotted(a),.ids-box-link .ids-box-link__inner a{border-radius:.3125rem;color:var(--IDS-LINK--COLOR-PRESET-1__COLOR);display:block;outline-offset:-.125rem!important;padding:.75rem;text-decoration:none}.ids-box-link .ids-box-link__inner ::slotted(a.ids-box-link--old-icon),.ids-box-link .ids-box-link__inner a.ids-box-link--old-icon{display:flex;gap:.5rem}.ids-box-link .ids-box-link__inner .ids-icon{align-items:center;display:inline-flex;height:1.5rem;justify-content:center}.ids-box-link .ids-box-link__inner .ids-box-link__button{color:var(--IDS-ICON__COLOR);display:flex;flex-shrink:0;height:3rem;position:relative;width:3rem}.ids-box-link .ids-box-link__inner .ids-box-link__button .ids-contains-icon,.ids-box-link .ids-box-link__inner .ids-box-link__button .ids-icon,.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted([slot=old-icon]){display:block!important;position:absolute!important;right:1rem;top:.75rem}.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted(button),.ids-box-link .ids-box-link__inner .ids-box-link__button button{background:none;border:0;border-radius:.3125rem;color:var(--IDS-ICON__COLOR);cursor:pointer;font-size:1.5rem!important;height:100%!important;outline-offset:-.125rem!important;padding:0;position:absolute!important;right:0;top:0;width:100%!important}.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted(button):before,.ids-box-link .ids-box-link__inner .ids-box-link__button button:before{right:1rem!important;top:.75rem!important}.ids-box-link .ids-box-link__inner .ids-box-link__button:hover{color:var(--IDS-ICON--ACTIVE-COLOR)}";
+var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-box-link .ids-box-link__inner{align-items:flex-start;background-color:var(--IDS-LINK--BOX__BACKGROUND-COLOR);border-radius:.3125rem;box-sizing:border-box;display:flex;font-size:1rem;line-height:1.5rem;position:relative}.ids-box-link .ids-box-link__inner:hover{box-shadow:0 .125rem .375rem 0 rgba(0,0,0,.3)}.ids-box-link .ids-box-link__inner .ids-box-link__link{cursor:pointer;display:block;flex-grow:1}.ids-box-link .ids-box-link__inner .ids-box-link__link:hover ::slotted(a),.ids-box-link .ids-box-link__inner .ids-box-link__link:hover a{color:var(--IDS-BOX-LINK__HOVER-COLOR);font-family:var(--IDS-FONT-FAMILY-BASE);text-decoration:underline!important}.ids-box-link .ids-box-link__inner ::slotted(a):focus,.ids-box-link .ids-box-link__inner a:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.125rem!important}.ids-box-link .ids-box-link__inner ::slotted(a),.ids-box-link .ids-box-link__inner a{border-radius:.3125rem;color:var(--IDS-BOX-LINK__COLOR);display:flex;font-family:var(--IDS-FONT-FAMILY-BASE);gap:.5rem;outline-offset:-.125rem!important;padding:.75rem;text-decoration:none}.ids-box-link .ids-box-link__inner .ids-box-link__button{color:var(--IDS-BOX-LINK__ICON-COLOR);display:flex;flex-shrink:0;height:3rem;position:relative;width:3.5rem}.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted(button),.ids-box-link .ids-box-link__inner .ids-box-link__button button{background:none;border:0;border-radius:.3125rem;color:var(--IDS-BOX-LINK__ICON-COLOR);cursor:pointer;font-size:1.5rem!important;height:100%!important;outline-offset:-.125rem!important;padding:0;position:absolute!important;right:0;top:0;width:100%!important}.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted(button):before,.ids-box-link .ids-box-link__inner .ids-box-link__button button:before{right:1rem!important;top:.75rem!important}.ids-box-link .ids-box-link__inner .ids-box-link__button:hover ::slotted(button),.ids-box-link .ids-box-link__inner .ids-box-link__button:hover button{color:var(--IDS-BOX-LINK__ICON-HOVER-COLOR)}";
 
 var boxLinkLit = css`${unsafeCSS(css_248z)}`;