@inera/ids-design 5.3.0 → 5.4.1

package/global/global.css

@@ -18,7 +18,7 @@
 }
 
 .ids-bg-1 {
-  background-color: white;
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
 }
 
 .ids-bg-2 {
@@ -40,8 +40,8 @@
   outline: inherit;
 }
 .ids-btn-no-styles:focus {
-  outline: var(--focus_outline);
-  outline-offset: var(--focus_outline-offset);
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
 }
 
 /* Makes elements behave as inline-level block containers */
@@ -1655,7 +1655,8 @@
     padding-left: 3rem;
   }
   /* Hide classes */
-  .ids .ids-hide-on-s, .ids .ids-s-hide {
+  .ids .ids-hide-on-s,
+  .ids .ids-s-hide {
     display: none;
   }
 }
@@ -2193,7 +2194,8 @@
     padding-left: 3rem;
   }
   /* Hide classes */
-  .ids .ids-hide-on-m, .ids .ids-m-hide {
+  .ids .ids-hide-on-m,
+  .ids .ids-m-hide {
     display: none;
   }
 }
@@ -2277,7 +2279,7 @@
 * BUTTONS
 ********/
 /*******
-* SCROLLBAR
+* SCROLLBARS
 ********/
 /*******
 * FORM
@@ -2286,11 +2288,12 @@
 * A11Y
 ********/
 .ids-link {
-  font-family: var(--IDS-LINK--FONT-FAMILY);
+  font-family: var(--IDS-LINK__FONT-FAMILY);
   color: var(--IDS-LINK--COLORPRESET-1__COLOR);
   text-decoration-color: var(--IDS-LINK--COLORPRESET-1__COLOR);
+  font-size: 1rem;
   line-height: 1.5rem;
-  gap: 8px;
+  gap: 0.5rem;
   cursor: pointer;
   display: inline-flex;
   align-items: flex-start;
@@ -2301,8 +2304,8 @@
   text-decoration: underline;
 }
 .ids-link:focus {
-  outline: var(--IDS-FOCUS_OUTLINE);
-  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
 .ids-link:hover, .ids-link:focus {
   text-decoration: underline !important;
@@ -2334,10 +2337,10 @@
   padding: 0.188rem;
 }
 .ids-link.ids-link--active-icon.ids-link--active .ids-icon {
-  background-color: var(--IDS-LINK-ICON--COLORPRESET-1-ACTIVE__BACKGROUND-COLOR);
+  background-color: var(--IDS-LINK--COLORPRESET-1-ACTIVE__ICON-BACKGROUND-COLOR);
 }
 .ids-link.ids-link--active-icon:hover .ids-icon, .ids-link.ids-link--active-icon:focus-within .ids-icon {
-  background-color: var(--IDS-LINK-ICON--COLORPRESET-1-ACTIVE__HOVER-BACKGROUND-COLOR);
+  background-color: var(--IDS-LINK--COLORPRESET-1-ACTIVE-HOVER__ICON-BACKGROUND-COLOR);
 }
 .ids-link.ids-link--active-icon.ids-link--color-2 .ids-icon {
   margin-top: 0.25rem;
@@ -2350,10 +2353,26 @@
   padding: 0.188rem;
 }
 .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-icon {
-  background-color: var(--IDS-LINK-ICON--COLORPRESET-2-ACTIVE__ACTIVE-BACKGROUND-COLOR);
+  background-color: var(--IDS-LINK--COLORPRESET-2-ACTIVE__ICON-BACKGROUND-COLOR);
 }
 .ids-link.ids-link--active-icon.ids-link--color-2:hover .ids-icon, .ids-link.ids-link--active-icon.ids-link--color-2:focus-within .ids-icon {
-  background-color: var(--IDS-LINK-ICON--COLORPRESET-2-ACTIVE__HOVER-BACKGROUND-COLOR);
+  background-color: var(--IDS-LINK--COLORPRESET-2-ACTIVE-HOVER__ICON-BACKGROUND-COLOR);
+}
+.ids-link.ids-link--active-icon.ids-link--color-3 .ids-icon {
+  margin-top: 0.25rem;
+  display: inline-flex;
+  border-radius: 100%;
+  width: 1rem;
+  height: 1rem;
+  align-items: center;
+  justify-content: center;
+  padding: 0.188rem;
+}
+.ids-link.ids-link--active-icon.ids-link--color-3.ids-link--active .ids-icon {
+  background-color: var(--IDS-LINK--COLORPRESET-3-ACTIVE__ICON-BACKGROUND-COLOR);
+}
+.ids-link.ids-link--active-icon.ids-link--color-3:hover .ids-icon, .ids-link.ids-link--active-icon.ids-link--color-3:focus-within .ids-icon {
+  background-color: var(--IDS-LINK--COLORPRESET-3-ACTIVE-HOVER-ICON-BACKGROUND-COLOR);
 }
 .ids-link.ids-link--color-2 {
   color: var(--IDS-LINK--COLORPRESET-2__COLOR);
@@ -2363,15 +2382,23 @@
   color: var(--IDS-LINK--COLORPRESET-2__HOVER-COLOR);
   text-decoration-color: var(--IDS-LINK--COLORPRESET-2__HOVER-COLOR);
 }
+.ids-link.ids-link--color-3 {
+  color: var(--IDS-LINK--COLORPRESET-3__COLOR);
+  text-decoration-color: var(--IDS-LINK--COLORPRESET-3__COLOR);
+}
+.ids-link.ids-link--color-3:hover, .ids-link.ids-link--color-3:focus {
+  color: var(--IDS-LINK--COLORPRESET-3__HOVER-COLOR);
+  text-decoration-color: var(--IDS-LINK--COLORPRESET-3__HOVER-COLOR);
+}
 .ids-link.ids-link--light {
-  color: white !important;
-  text-decoration-color: white !important;
+  color: var(--IDS-COLOR-NEUTRAL-100) !important;
+  text-decoration-color: var(--IDS-COLOR-NEUTRAL-100) !important;
 }
 .ids-link.ids-link--light:focus {
-  outline-color: white !important;
+  outline-color: var(--IDS-COLOR-NEUTRAL-100) !important;
 }
 .ids-link.ids-link--light:hover {
-  color: white !important;
+  color: var(--IDS-COLOR-NEUTRAL-100) !important;
 }
 .ids-link .ids-icon {
   display: inline-flex;
@@ -2401,8 +2428,8 @@
 }
 
 .ids button.ids-button {
-  min-width: 24px;
-  min-height: 24px;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
   background: none;
   color: inherit;
   border: none;
@@ -2417,8 +2444,8 @@
   user-select: none;
 }
 .ids button.ids-button:focus {
-  outline: var(--IDS-FOCUS_OUTLINE);
-  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
 
 .ids .ids-button,
@@ -2432,7 +2459,7 @@
   box-sizing: border-box;
   color: var(--IDS-COLOR-NEUTRAL-100);
   cursor: pointer;
-  gap: 8px;
+  gap: 0.5rem;
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -2511,17 +2538,17 @@
 .ids button.ids-button.ids-button--secondary:active {
   background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
   color: var(--IDS-COLOR-NEUTRAL-100);
-  border: 1px solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
+  border: 0.063rem solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
 }
 .ids .ids-button.ids-button--tertiary,
 .ids-button.ids-button--tertiary,
 .ids button.ids-button.ids-button--tertiary {
   background: transparent;
   border-radius: 0;
-  border: 1px solid transparent;
+  border: 0.063rem solid transparent;
   color: var(--IDS-BUTTON--TERTIARY__COLOR);
   box-shadow: none;
-  font-family: var(--font-family_2);
+  font-family: var(--IDS-FONT-FAMILY-HEADING);
   text-decoration: underline;
 }
 .ids .ids-button.ids-button--tertiary.ids-button--s,
@@ -2548,7 +2575,7 @@
   background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
   color: var(--IDS-COLOR-NEUTRAL-100);
   border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
-  border: 1px solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
+  border: 0.063rem solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
 }
 .ids .ids-button.ids-button--tertiary.ids-button--disabled, .ids .ids-button.ids-button--tertiary[disabled],
 .ids-button.ids-button--tertiary.ids-button--disabled,
@@ -2565,13 +2592,13 @@
 .ids-button.ids-button--fab,
 .ids button.ids-button.ids-button--icon,
 .ids button.ids-button.ids-button--fab {
-  width: 44px;
-  height: 44px !important;
+  width: 2.75rem;
+  height: 2.75rem !important;
   border-radius: 100%;
   font-style: normal;
   font-weight: 400;
   line-height: 0 !important;
-  font-size: 20px;
+  font-size: 1.25rem;
   padding: 0 !important;
   justify-content: center;
 }
@@ -2580,23 +2607,23 @@
 .ids-button.ids-button--fab.ids-button--s,
 .ids button.ids-button.ids-button--icon.ids-button--s,
 .ids button.ids-button.ids-button--fab.ids-button--s {
-  width: 30px;
-  height: 30px !important;
+  width: 1.875rem;
+  height: 1.875rem !important;
 }
 .ids .ids-button.ids-button--icon.ids-button--l, .ids .ids-button.ids-button--fab.ids-button--l,
 .ids-button.ids-button--icon.ids-button--l,
 .ids-button.ids-button--fab.ids-button--l,
 .ids button.ids-button.ids-button--icon.ids-button--l,
 .ids button.ids-button.ids-button--fab.ids-button--l {
-  width: 60px;
-  height: 60px !important;
+  width: 3.75rem;
+  height: 3.75rem !important;
 }
 .ids .ids-button.ids-button--fab,
 .ids-button.ids-button--fab,
 .ids button.ids-button.ids-button--fab {
   background-color: var(--IDS-COLOR-NEUTRAL-100);
   border: var(--IDS-BUTTON--FAB__BORDER);
-  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
+  filter: drop-shadow(0 0 0.375rem rgba(0, 0, 0, 0.3));
 }
 .ids .ids-button.ids-button--icon.ids-button--secondary,
 .ids-button.ids-button--icon.ids-button--secondary,
@@ -2612,7 +2639,7 @@
 .ids button.ids-button.ids-button--icon:hover,
 .ids button.ids-button.ids-button--icon:active,
 .ids button.ids-button.ids-button--icon:focus {
-  background-color: var(--IDS-BUTTON--SECONDARY-HOVER__ICON-BACKGROUND-COLOR);
+  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
   color: var(--IDS-COLOR-NEUTRAL-100);
 }
 .ids .ids-button.ids-button--submit,
@@ -2715,22 +2742,22 @@
 .ids .ids-button:focus,
 .ids-button:focus,
 .ids button.ids-button:focus {
-  outline: var(--IDS-FOCUS_OUTLINE);
-  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
 
 .ids-radio {
   display: inline-flex;
   align-items: flex-start;
-  gap: 8px;
-  margin-bottom: 5px;
-  margin-right: 8px;
+  gap: 0.5rem;
+  margin-bottom: 0.313rem;
+  margin-right: 0.5rem;
 }
 .ids-radio .ids-label-tooltip-wrapper label {
   display: inline;
-  top: -3px;
+  top: -0.188rem;
   position: relative;
-  margin-right: 8px;
+  margin-right: 0.5rem;
 }
 .ids-radio input,
 .ids-radio input[type=radio] {
@@ -2740,43 +2767,53 @@
   width: 1.25rem;
   height: 1.25rem;
   color: var(--IDS-COLOR-ACCENT-40);
-  border: 1px solid var(--IDS-COLOR-ACCENT-40);
+  border: 0.063rem solid var(--IDS-COLOR-ACCENT-40);
   background-color: var(--IDS-RADIO__BACKGROUND-COLOR);
   border-radius: 50%;
   position: relative;
   flex-shrink: 0;
 }
-.ids-radio input.ids-input--light:not(:invalid),
-.ids-radio input[type=radio].ids-input--light:not(:invalid) {
-  background-color: white;
+.ids-radio input.ids-input--light:not(.ids-input--invalid),
+.ids-radio input[type=radio].ids-input--light:not(.ids-input--invalid) {
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
 }
-.ids-radio input.ids-input--light:not(:invalid)::before,
-.ids-radio input[type=radio].ids-input--light:not(:invalid)::before {
-  border: 2px solid white;
-  background-color: white;
+.ids-radio input.ids-input--light:not(.ids-input--invalid)::after,
+.ids-radio input[type=radio].ids-input--light:not(.ids-input--invalid)::after {
+  border: 0.125rem solid var(--IDS-COLOR-NEUTRAL-100);
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
 }
-.ids-radio input.ids-input--light:not(:invalid):checked::before,
-.ids-radio input[type=radio].ids-input--light:not(:invalid):checked::before {
-  border: 2px solid var(--IDS-RADIO__BACKGROUND-COLOR);
+.ids-radio input.ids-input--light:not(.ids-input--invalid):checked::after,
+.ids-radio input[type=radio].ids-input--light:not(.ids-input--invalid):checked::after {
+  border: 0.125rem solid var(--IDS-RADIO__BACKGROUND-COLOR);
   background-color: var(--IDS-RADIO--CHECKED__BACKGROUND-COLOR);
 }
-.ids-radio input::before,
-.ids-radio input[type=radio]::before {
+.ids-radio input.ids-input--light:not(.ids-input--invalid):disabled::after,
+.ids-radio input[type=radio].ids-input--light:not(.ids-input--invalid):disabled::after {
+  border: 0.125rem solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
+  background-color: var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
+}
+.ids-radio input.ids-input--light:not(.ids-input--invalid):disabled:checked::after,
+.ids-radio input[type=radio].ids-input--light:not(.ids-input--invalid):disabled:checked::after {
+  border: 0.125rem solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
+  background-color: var(--IDS-RADIO--CHECKED-DISABLED__BACKGROUND-COLOR);
+}
+.ids-radio input::after,
+.ids-radio input[type=radio]::after {
   content: "";
   position: absolute;
   display: inline-block;
   cursor: pointer;
-  width: 18px;
-  height: 18px;
+  width: 1.125rem;
+  height: 1.125rem;
   border-radius: 50%;
   top: 0;
   left: 0;
-  border: 2px solid var(--IDS-RADIO__BACKGROUND-COLOR);
+  border: 0.125rem solid var(--IDS-RADIO__BACKGROUND-COLOR);
   background-color: var(--IDS-RADIO__BACKGROUND-COLOR);
 }
-.ids-radio input:checked::before,
-.ids-radio input[type=radio]:checked::before {
-  border: 2px solid var(--IDS-RADIO__BACKGROUND-COLOR);
+.ids-radio input:checked::after,
+.ids-radio input[type=radio]:checked::after {
+  border: 0.125rem solid var(--IDS-RADIO__BACKGROUND-COLOR);
   background-color: var(--IDS-RADIO--CHECKED__BACKGROUND-COLOR);
 }
 .ids-radio input:disabled,
@@ -2785,27 +2822,28 @@
   background-color: var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
   border: var(--IDS-FORM--DISABLED__BORDER);
 }
-.ids-radio input:disabled::before,
-.ids-radio input[type=radio]:disabled::before {
+.ids-radio input:disabled::after,
+.ids-radio input[type=radio]:disabled::after {
   cursor: default;
   background-color: var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
-  border: 2px solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
+  border: 0.125rem solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
   top: 0;
   left: 0;
 }
-.ids-radio input:disabled:checked::before,
-.ids-radio input[type=radio]:disabled:checked::before {
-  border: 2px solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
+.ids-radio input:disabled:checked::after,
+.ids-radio input[type=radio]:disabled:checked::after {
+  border: 0.125rem solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
   background-color: var(--IDS-RADIO--CHECKED-DISABLED__BACKGROUND-COLOR);
 }
 .ids-radio input[aria-invalid=true]:not(:checked),
 .ids-radio input[type=radio][aria-invalid=true]:not(:checked) {
   background-color: var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
-  border: var(--IDS-FORM--INVALID__BORDER);
+  border: 0.0625rem solid var(--IDS-FORM--INVALID__BORDER-COLOR);
+  box-shadow: inset 0 0 0 0.0625rem var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
 }
-.ids-radio input[aria-invalid=true]:not(:checked)::before,
-.ids-radio input[type=radio][aria-invalid=true]:not(:checked)::before {
-  border: 2px solid var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
+.ids-radio input[aria-invalid=true]:not(:checked)::after,
+.ids-radio input[type=radio][aria-invalid=true]:not(:checked)::after {
+  border: 0.0625rem solid var(--IDS-FORM--INVALID__BORDER-COLOR);
   background-color: var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
   top: 0;
   left: 0;
@@ -2815,22 +2853,22 @@
 }
 .ids-radio.ids-radio--compact label {
   margin-left: 0 !important;
-  margin-bottom: -2px !important;
+  margin-bottom: -0.125rem !important;
 }
 
 .ids-checkbox {
   position: relative;
   display: inline-flex;
   align-items: flex-start;
-  gap: 8px;
-  margin-bottom: 5px;
-  margin-right: 8px;
+  gap: 0.5rem;
+  margin-bottom: 0.313rem;
+  margin-right: 0.5rem;
 }
 .ids-checkbox .ids-label-tooltip-wrapper label {
   display: inline;
-  top: -3px;
+  top: -0.188rem;
   position: relative;
-  margin-right: 8px;
+  margin-right: 0.5rem;
 }
 .ids-checkbox input[type=checkbox],
 .ids-checkbox input {
@@ -2846,23 +2884,23 @@
   position: relative;
   display: inline-block;
   cursor: pointer;
-  background-color: var(--IDS-CHECKBOX_BACKGROUND-COLOR);
-  border: var(--IDS-CHECKBOX_BORDER);
-  border-radius: var(--IDS-CHECKBOX_BORDER-RADIUS);
+  background-color: var(--IDS-CHECKBOX__BACKGROUND-COLOR);
+  border: var(--IDS-CHECKBOX__BORDER);
+  border-radius: var(--IDS-CHECKBOX__BORDER-RADIUS);
   box-sizing: border-box;
   min-height: 1.25rem;
   min-width: 1.25rem;
 }
 input:focus + .ids-checkbox input[type=checkbox]::before,
 input:focus + .ids-checkbox input::before {
-  outline: var(--focus_outline);
-  outline-offset: var(--focus_outline-offset);
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
 }
 .ids-checkbox input[type=checkbox]:checked::after,
 .ids-checkbox input:checked::after {
   content: "";
   display: inline-block;
-  background-image: var(--IDS-CHECKBOX-CHECK__BACKGROUND-IMAGE);
+  background-image: var(--IDS-CHECKBOX__CHECK-BACKGROUND-IMAGE);
   min-height: 1.25rem;
   min-width: 1.25rem;
   position: absolute;
@@ -2885,18 +2923,19 @@ input:focus + .ids-checkbox input::before {
 }
 .ids-checkbox input[type=checkbox]:disabled:checked::after,
 .ids-checkbox input:disabled:checked::after {
-  background-image: var(--IDS-CHECKBOX-CHECK--DISABLED_BACKGROUND-IMAGE) !important;
+  background-image: var(--IDS-CHECKBOX--DISABLED__CHECK-BACKGROUND-IMAGE) !important;
 }
 .ids-checkbox input[type=checkbox].ids-input--invalid::before,
 .ids-checkbox input.ids-input--invalid::before {
   border: var(--IDS-FORM--INVALID__BORDER);
+  box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
 .ids-checkbox input[type=checkbox].ids-input--invalid::before:checked + .ids-checkbox input[type=checkbox].ids-input--invalid::before::after,
 .ids-checkbox input[type=checkbox].ids-input--invalid::before:checked + .ids-checkbox input.ids-input--invalid::before::after,
 .ids-checkbox input.ids-input--invalid::before:checked + .ids-checkbox input[type=checkbox].ids-input--invalid::before::after,
 .ids-checkbox input.ids-input--invalid::before:checked + .ids-checkbox input.ids-input--invalid::before::after {
-  background-image: var(--IDS-CHECKBOX-CHECK--INVALID_BACKGROUND-IMAGE) !important;
+  background-image: var(--IDS-CHECKBOX--INVALID__CHECK-BACKGROUND-IMAGE) !important;
 }
 .ids-checkbox.ids-checkbox--light input[type=checkbox]::before,
 .ids-checkbox.ids-checkbox--light input::before {
@@ -2917,13 +2956,13 @@ input:focus + .ids-checkbox input::before {
 }
 .ids-checkbox.ids-checkbox--compact label {
   margin-left: 0 !important;
-  margin-bottom: -2px !important;
+  margin-bottom: -0.125rem !important;
 }
 
 .ids-input-wrapper {
   position: relative;
   display: flex;
-  gap: 8px;
+  gap: 0.5rem;
 }
 .ids-input-wrapper .ids-input__icon {
   pointer-events: none;
@@ -2940,7 +2979,7 @@ input:focus + .ids-checkbox input::before {
   pointer-events: none;
   position: absolute;
   top: 50%;
-  left: 20px;
+  left: 1.25rem;
   transform: translateY(-50%);
 }
 .ids-input-wrapper .ids-input__inner-wrapper .ids-input {
@@ -2951,16 +2990,15 @@ input:focus + .ids-checkbox input::before {
 }
 @media (min-width: 1024px) {
   .ids-input-wrapper {
-    gap: 20px;
+    gap: 1.25rem;
   }
 }
 
 .ids-input {
-  font-family: var(--font-family_1) !important;
+  font-family: var(--IDS-FONT-FAMILY-BASE) !important;
   padding: var(--IDS-INPUT__PADDING);
   background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
   border: var(--IDS-INPUT__BORDER);
-  border-bottom: var(--IDS-INPUT__BORDER);
   border-radius: var(--IDS-INPUT__BORDER-RADIUS);
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
@@ -2979,29 +3017,24 @@ input:focus + .ids-checkbox input::before {
 .ids-input.ids-input--invalid {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
   border: var(--IDS-FORM--INVALID__BORDER);
+  box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
 }
-.ids-input:disabled {
-  color: var(--IDS-FORM--DISABLED__COLOR);
-  font-style: italic !important;
-  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
-  border: var(--IDS-FORM--DISABLED__BORDER);
-}
-.ids-input:focus {
-  box-shadow: var(--IDS-INPUT__BOX-SHADOW);
-}
-.ids-input.ids-input--light, .ids-input.ids-input--light:required {
+.ids-input.ids-input--light {
   background-color: var(--IDS-COLOR-NEUTRAL-100);
 }
-.ids-input.ids-input--light.ids-input--invalid, .ids-input.ids-input--light:required.ids-input--invalid {
-  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-  border: var(--IDS-FORM--INVALID__BORDER);
-}
-.ids-input.ids-input--light:disabled, .ids-input.ids-input--light:required:disabled {
+.ids-input.ids-input--light:disabled {
   color: var(--IDS-FORM--DISABLED__COLOR);
   font-style: italic !important;
   background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
   border: var(--IDS-FORM--DISABLED__BORDER);
 }
+.ids-input.ids-input--light.ids-input--invalid {
+  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
+}
+.ids-input:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
 .ids-input.ids-input--search, .ids-input[type=search] {
   margin-top: 0;
   margin-bottom: 0;
@@ -3017,9 +3050,9 @@ input:focus + .ids-checkbox input::before {
 }
 
 .ids-input__hint {
-  margin-top: 5px;
-  font-family: var(--font-family_1);
-  color: var(--IDS-FORM__LABEL__COLOR);
+  margin-top: 0.313rem;
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  color: var(--IDS-FORM-LABEL__COLOR);
   display: flex;
   justify-content: end;
   line-height: 1.5rem;
@@ -3030,15 +3063,15 @@ input:focus + .ids-checkbox input::before {
 input.ids-range {
   appearance: none;
   width: 100%;
-  height: 8px;
+  height: 0.5rem;
   background-color: var(--IDS-RANGE__BACKGROUND-COLOR);
-  background-image: linear-gradient(var(--IDS-RANGE-SELECTION__BACKGROUND-COLOR), var(--IDS-RANGE-SELECTION__BACKGROUND-COLOR));
+  background-image: linear-gradient(var(--IDS-RANGE__SELECTION-BACKGROUND-COLOR), var(--IDS-RANGE__SELECTION-BACKGROUND-COLOR));
   background-repeat: no-repeat;
-  border: 1px;
+  border: 0.063rem;
   cursor: pointer;
   display: block;
   padding: 0;
-  border-radius: 16px;
+  border-radius: 1rem;
   margin: 0;
 }
 input.ids-range::-ms-track {
@@ -3050,17 +3083,17 @@ input.ids-range::-ms-track {
 }
 input.ids-range::-webkit-slider-thumb {
   -webkit-appearance: none;
-  border: 2px solid white;
-  height: 24px;
-  width: 24px;
+  border: 0.125rem solid var(--IDS-COLOR-NEUTRAL-100);
+  height: 1.5rem;
+  width: 1.5rem;
   border-radius: 100%;
-  background: var(--IDS-RANGE-THUMB__BACKGROUND-COLOR);
+  background: var(--IDS-RANGE__THUMB-BACKGROUND-COLOR);
   cursor: pointer;
 }
 input.ids-range::-ms-thumb {
-  border: 2px solid white;
-  height: 22px;
-  width: 24px;
+  border: 0.125rem solid var(--IDS-COLOR-NEUTRAL-100);
+  height: 1.375rem;
+  width: 1.5rem;
   border-radius: 100%;
   cursor: pointer;
 }
@@ -3068,17 +3101,17 @@ input.ids-range:disabled {
   cursor: default;
   appearance: none;
   width: 100%;
-  height: 8px;
+  height: 0.5rem;
   background-color: var(--IDS-RANGE__BACKGROUND-COLOR);
-  background-image: linear-gradient(var(--IDS-RANGE-SELECTION--DISABLED__COLOR), var(--IDS-RANGE-SELECTION--DISABLED__COLOR));
+  background-image: linear-gradient(var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR), var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR));
   background-repeat: no-repeat;
-  border: 1px;
-  padding: 0px;
-  border-radius: 16px;
+  border: 0.063rem;
+  padding: 0;
+  border-radius: 1rem;
 }
 input.ids-range:disabled::-webkit-slider-thumb {
   cursor: default;
-  background: var(--IDS-RANGE-SELECTION--DISABLED__COLOR);
+  background: var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR);
 }
 input.ids-range:disabled::-ms-thumb {
   cursor: default;
@@ -3088,11 +3121,10 @@ input.ids-range:disabled::-ms-thumb {
   appearance: none !important;
   -webkit-appearance: none !important;
   -moz-appearance: none !important;
-  font-family: var(--font-family_1) !important;
+  font-family: var(--IDS-FONT-FAMILY-BASE) !important;
   padding: var(--IDS-INPUT__PADDING);
   background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
   border: var(--IDS-INPUT__BORDER);
-  border-bottom: var(--IDS-INPUT__BORDER);
   border-radius: var(--IDS-INPUT__BORDER-RADIUS);
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
@@ -3116,6 +3148,24 @@ input.ids-range:disabled::-ms-thumb {
 .ids-select.ids-input--invalid {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
   border: var(--IDS-FORM--INVALID__BORDER);
+  box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
+}
+.ids-select.ids-input--light {
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+}
+.ids-select.ids-input--light:disabled {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+  font-style: italic !important;
+  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
+  border: var(--IDS-FORM--DISABLED__BORDER);
+}
+.ids-select.ids-input--light.ids-input--invalid {
+  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
+}
+.ids-select.ids-input--invalid {
+  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
+  border: var(--IDS-FORM--INVALID__BORDER);
+  box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
 }
 .ids-select.ids-input--light {
   background-color: var(--IDS-COLOR-NEUTRAL-100);
@@ -3123,6 +3173,7 @@ input.ids-range:disabled::-ms-thumb {
 .ids-select.ids-input--light.ids-input--invalid {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
   border: var(--IDS-FORM--INVALID__BORDER);
+  box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
 }
 .ids-select:disabled {
   cursor: default;
@@ -3135,8 +3186,8 @@ input.ids-range:disabled::-ms-thumb {
   border: var(--IDS-FORM--DISABLED__BORDER);
 }
 .ids-select:focus {
-  outline: var(--IDS-FOCUS_OUTLINE);
-  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
 
 .ids-select-wrapper {
@@ -3145,7 +3196,7 @@ input.ids-range:disabled::-ms-thumb {
 }
 .ids-select-wrapper::after {
   content: "";
-  width: 12px;
+  width: 0.75rem;
   height: 100%;
   display: block;
   position: absolute;
@@ -3169,17 +3220,15 @@ input.ids-range:disabled::-ms-thumb {
   display: inline-block;
 }
 .ids-textarea textarea {
-  font-family: var(--font-family_1) !important;
+  font-family: var(--IDS-FONT-FAMILY-BASE) !important;
   padding: var(--IDS-INPUT__PADDING);
   background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
   border: var(--IDS-INPUT__BORDER);
-  border-bottom: var(--IDS-INPUT__BORDER);
   border-radius: var(--IDS-INPUT__BORDER-RADIUS);
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
   display: block;
-  padding-top: var(--IDS-TEXTAREA-PADDING-Y);
-  padding-bottom: var(--IDS-TEXTAREA-PADDING-Y);
+  padding: var(--IDS-TEXTAREA__PADDING);
   box-sizing: border-box;
 }
 .ids-textarea textarea:disabled {
@@ -3188,58 +3237,56 @@ input.ids-range:disabled::-ms-thumb {
   background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
   border: var(--IDS-FORM--DISABLED__BORDER);
 }
+.ids-textarea textarea.ids-input--invalid {
+  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
+  border: var(--IDS-FORM--INVALID__BORDER);
+  box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
+}
+.ids-textarea textarea.ids-input--light {
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+}
+.ids-textarea textarea.ids-input--light:disabled {
+  color: var(--IDS-FORM--DISABLED__COLOR);
+  font-style: italic !important;
+  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
+  border: var(--IDS-FORM--DISABLED__BORDER);
+}
+.ids-textarea textarea.ids-input--light.ids-input--invalid {
+  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
+}
 .ids-textarea textarea::-webkit-scrollbar {
-  width: 14px;
+  width: 1rem;
   position: absolute;
-  margin-left: -20px;
-  margin-top: 10px;
+  margin-left: -1.25rem;
 }
 .ids-textarea textarea::-webkit-scrollbar-track {
-  background: var(--IDS-SCROLL_TRACK-COLOR);
-  border-radius: 10px;
-  margin-top: 10px;
-  margin-bottom: 2px;
-}
-.ids-textarea textarea::-webkit-resizer {
-  appearance: none;
-  background-image: var(--IDS-TEXTAREA-RESIZER-IMAGE);
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: cover;
-}
-.ids-textarea textarea::-webkit-scrollbar-corner {
-  background-color: transparent;
+  border-radius: 0.625rem;
+  margin-bottom: 0;
+  margin-top: 0.0313rem;
+  background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
 }
 .ids-textarea textarea::-webkit-scrollbar-thumb {
   cursor: auto;
-  background: var(--IDS-SCROLL_COLOR);
-  border-radius: 10px;
+  background: var(--IDS-SCROLL__COLOR);
+  border-radius: 0.625rem;
   box-sizing: border-box;
-  border: 3px solid var(--IDS-SCROLL_TRACK-COLOR);
+  border: 0.125rem solid var(--IDS-INPUT__BACKGROUND-COLOR);
 }
 .ids-textarea textarea::-webkit-scrollbar-thumb:hover {
-  background: var(--IDS-SCROLL_HOVER-COLOR);
+  background: var(--IDS-SCROLL__HOVER-COLOR);
+}
+.ids-textarea textarea::-webkit-scrollbar-corner {
+  background-color: transparent;
 }
 .ids-textarea textarea:focus {
   box-shadow: var(--IDS-INPUT__BOX-SHADOW);
 }
-.ids-textarea textarea:disabled {
-  color: var(--IDS-FORM--DISABLED__COLOR);
-  background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
-}
-.ids-textarea textarea.ids-input--invalid {
-  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-  border: var(--IDS-FORM--INVALID__BORDER);
-}
-.ids-textarea textarea.ids-input--light {
-  background-color: var(--IDS-COLOR-NEUTRAL-100);
-}
-.ids-textarea textarea.ids-input--light:disabled {
-  color: var(--IDS-FORM--DISABLED__COLOR);
-  background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
-}
-.ids-textarea textarea.ids-input--light.ids-input--invalid {
-  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
+.ids-textarea textarea::-webkit-resizer {
+  appearance: none;
+  background-image: var(--IDS-TEXTAREA__RESIZER-IMAGE);
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
 }
 .ids-textarea.ids-textarea--block {
   display: block;
@@ -3277,11 +3324,10 @@ input.ids-range:disabled::-ms-thumb {
 }
 
 input.ids-time__input {
-  font-family: var(--font-family_1) !important;
+  font-family: var(--IDS-FONT-FAMILY-BASE) !important;
   padding: var(--IDS-INPUT__PADDING);
   background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
   border: var(--IDS-INPUT__BORDER);
-  border-bottom: var(--IDS-INPUT__BORDER);
   border-radius: var(--IDS-INPUT__BORDER-RADIUS);
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
@@ -3303,65 +3349,65 @@ input.ids-time__input:disabled {
   background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
   border: var(--IDS-FORM--DISABLED__BORDER);
 }
-input.ids-time__input::-webkit-calendar-picker-indicator {
-  opacity: 0;
-  appearance: none;
-}
 input.ids-time__input.ids-input--invalid {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
   border: var(--IDS-FORM--INVALID__BORDER);
+  box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
 }
-input.ids-time__input.ids-input--light:not(:invalid) {
+input.ids-time__input.ids-input--light {
   background-color: var(--IDS-COLOR-NEUTRAL-100);
 }
-input.ids-time__input.ids-input--light:not(:invalid):disabled {
-  cursor: default;
+input.ids-time__input.ids-input--light:disabled {
   color: var(--IDS-FORM--DISABLED__COLOR);
   font-style: italic !important;
   background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
   border: var(--IDS-FORM--DISABLED__BORDER);
 }
+input.ids-time__input.ids-input--light.ids-input--invalid {
+  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
+}
+input.ids-time__input::-webkit-calendar-picker-indicator {
+  opacity: 0;
+  appearance: none;
+}
 input.ids-time__input:disabled {
   cursor: default;
-  color: var(--IDS-FORM--DISABLED__COLOR);
-  font-style: italic !important;
-  background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
-  border: var(--IDS-FORM--DISABLED__BORDER);
 }
 
 .ids-toggle {
   display: inline-flex;
   align-items: flex-start;
-  gap: 8px;
-  margin-bottom: 5px;
-  margin-right: 8px;
+  gap: 0.5rem;
+  margin-bottom: 0.313rem;
+  margin-right: 0;
 }
 .ids-toggle .ids-label-tooltip-wrapper label {
   display: inline;
-  top: -3px;
+  top: -0.188rem;
   position: relative;
-  margin-right: 8px;
+  margin-right: 0;
 }
 .ids-toggle label {
   position: relative;
-  top: 6px;
+  top: 0.375rem;
+  flex-shrink: 100;
 }
 .ids-toggle .ids-label-tooltip-wrapper {
   position: relative;
-  top: 6px;
+  top: 0.375rem;
 }
 .ids-toggle .ids-label-tooltip-wrapper label {
-  top: -4px;
-  margin-right: 8px;
+  top: -0.25rem;
+  margin-right: 0.5rem;
 }
 .ids-toggle input[type=checkbox],
 .ids-toggle input {
   position: relative;
   margin: 0;
-  height: 32px;
-  width: 62px;
-  border: 1px solid transparent;
-  border-radius: 100px;
+  height: 2rem;
+  width: 3.9375rem;
+  border: 0.063rem solid transparent;
+  border-radius: 6.25rem;
   appearance: none;
 }
 .ids-toggle input[type=checkbox]:before,
@@ -3370,16 +3416,16 @@ input.ids-time__input:disabled {
   position: absolute;
   cursor: pointer;
   background-color: var(--IDS-TOGGLE__BACKGROUND-COLOR);
-  border-radius: 100px;
-  height: 30px;
-  width: 60px;
+  border-radius: 6.25rem;
+  height: 1.875rem;
+  width: 3.75rem;
   -webkit-transition: 0.4s;
   transition: 0.4s;
 }
 input:focus + .ids-toggle input[type=checkbox]:before,
 input:focus + .ids-toggle input:before {
-  outline: var(--focus_outline);
-  outline-offset: var(--focus_outline-offset);
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
 }
 .ids-toggle input[type=checkbox]:after,
 .ids-toggle input:after {
@@ -3388,15 +3434,15 @@ input:focus + .ids-toggle input:before {
   position: absolute;
   cursor: pointer;
   background-color: var(--IDS-COLOR-NEUTRAL-100);
-  height: 24px;
-  width: 24px;
+  height: 1.5rem;
+  width: 1.5rem;
   border-radius: 100%;
-  background-image: var(--IDS-TOGGLE-KNOB__BACKGROUND-IMAGE);
+  background-image: var(--IDS-TOGGLE__KNOB-BACKGROUND-IMAGE);
   background-position: center center;
-  background-size: 10px 10px;
+  background-size: 0.625rem 0.625rem;
   background-repeat: no-repeat;
-  top: 3px;
-  left: 3px;
+  top: 0.188rem;
+  left: 0.25rem;
   -webkit-transition: 0.3s;
   transition: all 0.3s;
 }
@@ -3407,9 +3453,9 @@ input:focus + .ids-toggle input:before {
 .ids-toggle input[type=checkbox]:checked:after,
 .ids-toggle input:checked:after {
   content: "";
-  background-image: var(--IDS-TOGGLE-KNOB--CHECKED__BACKGROUND-IMAGE);
-  top: 3px;
-  left: calc(100% - 27px);
+  background-image: var(--IDS-TOGGLE--CHECKED__KNOB-BACKGROUND-IMAGE);
+  top: 0.188rem;
+  left: calc(100% - 1.875rem);
   -webkit-transition: 0.3s;
   transition: all 0.3s;
 }
@@ -3417,7 +3463,7 @@ input:focus + .ids-toggle input:before {
 .ids-toggle input:disabled + label {
   cursor: default;
   font-style: italic;
-  color: var(--IDS-FORM__LABEL--DISABLED__COLOR);
+  color: var(--IDS-FORM-LABEL--DISABLED__COLOR);
 }
 .ids-toggle input[type=checkbox]:disabled:before,
 .ids-toggle input:disabled:before {
@@ -3428,8 +3474,8 @@ input:focus + .ids-toggle input:before {
 .ids-toggle input[type=checkbox]:disabled:after,
 .ids-toggle input:disabled:after {
   cursor: default;
-  background-color: var(--IDS-TOGGLE-KNOB--DISABLED_BACKGROUND-COLOR);
-  background-image: var(--IDS-TOGGLE-KNOB__DISABLED__BACKGROUND-IMAGE);
+  background-color: var(--IDS-TOGGLE--DISABLED__KNOB-BACKGROUND-COLOR);
+  background-image: var(--IDS-TOGGLE--DISABLED__KNOB-BACKGROUND-IMAGE);
 }
 .ids-toggle input[type=checkbox]:disabled:checked:before,
 .ids-toggle input:disabled:checked:before {
@@ -3440,8 +3486,13 @@ input:focus + .ids-toggle input:before {
 .ids-toggle input[type=checkbox]:disabled:checked:after,
 .ids-toggle input:disabled:checked:after {
   cursor: default;
-  background-color: var(--IDS-TOGGLE-KNOB--DISABLED_BACKGROUND-COLOR);
-  background-image: var(--IDS-TOGGLE-KNOB--DISABLED--CHECKED__BACKGROUND-IMAGE);
+  background-color: var(--IDS-TOGGLE--DISABLED__KNOB-BACKGROUND-COLOR);
+  background-image: var(--IDS-TOGGLE--DISABLED-CHECKED__KNOB-BACKGROUND-IMAGE);
+}
+@media (max-width: 300px) {
+  .ids-toggle {
+    flex-wrap: wrap;
+  }
 }
 
 .ids-form-group__fieldset {
@@ -3450,7 +3501,7 @@ input:focus + .ids-toggle input:before {
   padding: 0;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 0.5rem;
 }
 .ids-form-group__fieldset.ids-form-group__fieldset--compact {
   gap: 0;
@@ -3459,15 +3510,15 @@ input:focus + .ids-toggle input:before {
   padding: 0;
   font-style: normal;
   color: var(--IDS-COLOR-NEUTRAL-20);
-  font-family: var(--body-font-family);
-  font-size: var(--body-font-size);
-  line-height: var(--body-line-height);
+  font-family: var(--IDS-BODY__FONT-FAMILY);
+  font-size: var(--IDS-BODY__FONT-SIZE);
+  line-height: var(--IDS-BODY__LINE-HEIGHT);
   font-weight: 400;
   letter-spacing: 0;
-  color: var(--IDS-FORM__LABEL__COLOR);
+  color: var(--IDS-FORM-LABEL__COLOR);
   display: inline-flex;
-  gap: 8px;
-  margin-bottom: 10px;
+  gap: 0.5rem;
+  margin-bottom: 0.625rem;
 }
 
 .ids-description-list {
@@ -3479,21 +3530,18 @@ input:focus + .ids-toggle input:before {
   display: var(--IDS-DESCRIPTION-LIST__DISPLAY);
   flex-direction: column;
   grid-template-columns: auto 1fr;
-  /*   @media only screen and (min-width: breakpoints.$small) {
-      grid-template-columns: auto 1fr;
-    } */
 }
 .ids-description-list .ids-description-list__term {
   border-right: var(--IDS-DESCRIPTION-LIST__BORDER);
   border-bottom: var(--IDS-DESCRIPTION-LIST__BORDER);
   padding: var(--IDS-DESCRIPTION-LIST__PADDING);
-  background-color: var(--IDS-DESCRIPTION-LIST-TERM__BACKGROUND-COLOR);
+  background-color: var(--IDS-DESCRIPTION-LIST__TERM-BACKGROUND-COLOR);
   color: var(--IDS-COLOR-NEUTRAL-20);
-  font-family: var(--font-family_1);
-  font-size: 16px;
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  font-size: 1rem;
   font-style: normal;
-  font-weight: 700;
-  line-height: 24px;
+  font-weight: var(--IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT);
+  line-height: 1.5rem;
   overflow-wrap: break-word;
 }
 .ids-description-list .ids-description-list__term:first-child {
@@ -3507,7 +3555,7 @@ input:focus + .ids-toggle input:before {
   color: var(--IDS-COLOR-NEUTRAL-20);
   border-bottom: var(--IDS-DESCRIPTION-LIST__BORDER);
   padding: var(--IDS-DESCRIPTION-LIST__PADDING);
-  margin-bottom: var(--IDS-DESCRIPTION-LIST-DESCRIPTION__MARGIN-BOTTOM);
+  margin-bottom: var(--IDS-DESCRIPTION-LIST__DESCRIPTION-MARGIN-BOTTOM);
 }
 .ids-description-list .ids-description-list__description:first-child {
   border-top-right-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS);
@@ -3517,51 +3565,51 @@ input:focus + .ids-toggle input:before {
   border-bottom-left-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS);
 }
 .ids-description-list.ids-description-list--column {
-  border: var(--IDS-DESCRIPTION-LIST__BORDER--COLUMN);
-  border-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN);
-  display: var(--IDS-DESCRIPTION-LIST__DISPLAY--COLUMN);
+  border: var(--IDS-DESCRIPTION-LIST--COLUMN__BORDER);
+  border-radius: var(--IDS-DESCRIPTION-LIST--COLUMN__BORDER-RADIUS);
+  display: var(--IDS-DESCRIPTION-LIST--COLUMN__DISPLAY);
 }
 .ids-description-list.ids-description-list--column .ids-description-list__term {
-  border-right: var(--IDS-DESCRIPTION-LIST__BORDER--COLUMN);
-  border-bottom: var(--IDS-DESCRIPTION-LIST__BORDER--COLUMN);
-  padding: var(--IDS-DESCRIPTION-LIST__PADDING--COLUMN);
-  background-color: var(--IDS-DESCRIPTION-LIST-TERM__BACKGROUND-COLOR--COLUMN);
+  border-right: var(--IDS-DESCRIPTION-LIST--COLUMN__BORDER);
+  border-bottom: var(--IDS-DESCRIPTION-LIST--COLUMN__BORDER);
+  padding: var(--IDS-DESCRIPTION-LIST--COLUMN__PADDING);
+  background-color: var(--IDS-DESCRIPTION-LIST--COLUMN__TERM-BACKGROUND-COLOR);
 }
 .ids-description-list.ids-description-list--column .ids-description-list__term:first-child {
-  border-top-left-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN);
+  border-top-left-radius: var(--IDS-DESCRIPTION-LIST--COLUMN__BORDER-RADIUS);
 }
 .ids-description-list.ids-description-list--column .ids-description-list__term:nth-last-child(2) {
   border-bottom: 0;
-  border-bottom-left-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN);
+  border-bottom-left-radius: var(--IDS-DESCRIPTION-LIST--COLUMN__BORDER-RADIUS);
 }
 .ids-description-list.ids-description-list--column .ids-description-list__description {
-  border-bottom: var(--IDS-DESCRIPTION-LIST__BORDER--COLUMN);
-  padding: var(--IDS-DESCRIPTION-LIST__PADDING--COLUMN);
-  margin-bottom: var(--IDS-DESCRIPTION-LIST-DESCRIPTION__MARGIN-BOTTOM--COLUMN);
+  border-bottom: var(--IDS-DESCRIPTION-LIST--COLUMN__BORDER);
+  padding: var(--IDS-DESCRIPTION-LIST--COLUMN__PADDING);
+  margin-bottom: var(--IDS-DESCRIPTION-LIST--COLUMN__DESCRIPTION-MARGIN-BOTTOM);
   background-color: var(--IDS-COLOR-NEUTRAL-100);
 }
 .ids-description-list.ids-description-list--column .ids-description-list__description:nth-child(2) {
-  border-top-right-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN);
+  border-top-right-radius: var(--IDS-DESCRIPTION-LIST--COLUMN__BORDER-RADIUS);
 }
 .ids-description-list.ids-description-list--column .ids-description-list__description:last-child {
   border-bottom: 0;
-  border-bottom-right-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN);
+  border-bottom-right-radius: var(--IDS-DESCRIPTION-LIST--COLUMN__BORDER-RADIUS);
 }
 
 .ids .ids-heading-xxl {
   font-style: normal;
-  color: var(--heading-xxl-color);
-  font-family: var(--heading-xxl-font-family);
-  font-size: var(--heading-xxl-font-size);
-  line-height: var(--heading-xxl-line-height);
-  letter-spacing: var(--heading-xxl-letter-spacing);
-  font-weight: var(--heading-xxl-font-weight);
+  color: var(--IDS-HEADING-XXL__COLOR);
+  font-family: var(--IDS-HEADING-XXL__FONT-FAMILY);
+  font-size: var(--IDS-HEADING-XXL__FONT-SIZE);
+  line-height: var(--IDS-HEADING-XXL__LINE-HEIGHT);
+  letter-spacing: var(--IDS-HEADING-XXL__LETTER-SPACING);
+  font-weight: var(--IDS-HEADING-XXL__FONT-WEIGHT);
 }
 @media (min-width: 1024px) {
   .ids .ids-heading-xxl {
-    font-size: var(--heading-xxl-font-size-desktop);
-    line-height: var(--heading-xxl-line-height-desktop);
-    letter-spacing: var(--heading-xxl-letter-spacing-desktop);
+    font-size: var(--IDS-HEADING-XXL__FONT-SIZE-DESKTOP);
+    line-height: var(--IDS-HEADING-XXL__LINE-HEIGHT-DESKTOP);
+    letter-spacing: var(--IDS-HEADING-XXL__LETTER-SPACING-DESKTOP);
   }
 }
 .ids .ids-heading-xxl:focus-visible {
@@ -3569,18 +3617,18 @@ input:focus + .ids-toggle input:before {
 }
 .ids .ids-heading-xl {
   font-style: normal;
-  color: var(--heading-xl-color);
-  font-family: var(--heading-xl-font-family);
-  font-size: var(--heading-xl-font-size);
-  line-height: var(--heading-xl-line-height);
-  letter-spacing: var(--heading-xl-letter-spacing);
-  font-weight: var(--heading-xl-font-weight);
+  color: var(--IDS-HEADING-XL__COLOR);
+  font-family: var(--IDS-HEADING-XL__FONT-FAMILY);
+  font-size: var(--IDS-HEADING-XL__FONT-SIZE);
+  line-height: var(--IDS-HEADING-XL__LINE-HEIGHT);
+  letter-spacing: var(--IDS-HEADING-XL__LETTER-SPACING);
+  font-weight: var(--IDS-HEADING-XL__FONT-WEIGHT);
 }
 @media (min-width: 1024px) {
   .ids .ids-heading-xl {
-    font-size: var(--heading-xl-font-size-desktop);
-    line-height: var(--heading-xl-line-height-desktop);
-    letter-spacing: var(--heading-xl-letter-spacing-desktop);
+    font-size: var(--IDS-HEADING-XL__FONT-SIZE-DESKTOP);
+    line-height: var(--IDS-HEADING-XL__LINE-HEIGHT-DESKTOP);
+    letter-spacing: var(--IDS-HEADING-XL__LETTER-SPACING-DESKTOP);
   }
 }
 .ids .ids-heading-xl:focus-visible {
@@ -3588,18 +3636,18 @@ input:focus + .ids-toggle input:before {
 }
 .ids .ids-heading-l {
   font-style: normal;
-  color: var(--heading-l-color);
-  font-family: var(--heading-l-font-family);
-  font-size: var(--heading-l-font-size);
-  line-height: var(--heading-l-line-height);
-  letter-spacing: var(--heading-l-letter-spacing);
-  font-weight: var(--heading-l-font-weight);
+  color: var(--IDS-HEADING-L__COLOR);
+  font-family: var(--IDS-HEADING-L__FONT-FAMILY);
+  font-size: var(--IDS-HEADING-L__FONT-SIZE);
+  line-height: var(--IDS-HEADING-L__LINE-HEIGHT);
+  letter-spacing: var(--IDS-HEADING-L__LETTER-SPACING);
+  font-weight: var(--IDS-HEADING-L__FONT-WEIGHT);
 }
 @media (min-width: 1024px) {
   .ids .ids-heading-l {
-    font-size: var(--heading-l-font-size-desktop);
-    line-height: var(--heading-l-line-height-desktop);
-    letter-spacing: var(--heading-l-letter-spacing-desktop);
+    font-size: var(--IDS-HEADING-L__FONT-SIZE-DESKTOP);
+    line-height: var(--IDS-HEADING-L__LINE-HEIGHT-DESKTOP);
+    letter-spacing: var(--IDS-HEADING-L__LETTER-SPACING-DESKTOP);
   }
 }
 .ids .ids-heading-l:focus-visible {
@@ -3607,89 +3655,89 @@ input:focus + .ids-toggle input:before {
 }
 .ids .ids-heading-m {
   font-style: normal;
-  color: var(--heading-m-color);
-  font-family: var(--heading-m-font-family);
-  font-size: var(--heading-m-font-size);
-  line-height: var(--heading-m-line-height);
-  letter-spacing: var(--heading-m-letter-spacing);
-  font-weight: var(--heading-m-font-weight);
+  color: var(--IDS-HEADING-M__COLOR);
+  font-family: var(--IDS-HEADING-M__FONT-FAMILY);
+  font-size: var(--IDS-HEADING-M__FONT-SIZE);
+  line-height: var(--IDS-HEADING-M__LINE-HEIGHT);
+  letter-spacing: var(--IDS-HEADING-M__LETTER-SPACING);
+  font-weight: var(--IDS-HEADING-M__FONT-WEIGHT);
 }
 @media (min-width: 1024px) {
   .ids .ids-heading-m {
-    font-size: var(--heading-m-font-size-desktop);
-    line-height: var(--heading-m-line-height-desktop);
-    letter-spacing: var(--heading-m-letter-spacing-desktop);
+    font-size: var(--IDS-HEADING-M__FONT-SIZE-DESKTOP);
+    line-height: var(--IDS-HEADING-M__LINE-HEIGHT-DESKTOP);
+    letter-spacing: var(--IDS-HEADING-M__LETTER-SPACING-DESKTOP);
   }
 }
 .ids .ids-heading-m .ids-anchor {
-  color: var(--anchor-color);
+  color: var(--IDS-ANCHOR__COLOR);
   text-decoration: none;
 }
 .ids .ids-heading-m .ids-anchor:visited {
-  color: var(--anchor-color);
+  color: var(--IDS-ANCHOR__COLOR);
 }
 .ids .ids-heading-m .ids-anchor:link {
   text-decoration: none;
 }
 .ids .ids-heading-m .ids-anchor:active, .ids .ids-heading-m .ids-anchor:hover {
-  color: var(--anchor-hover-color);
+  color: var(--IDS-ANCHOR__HOVER-COLOR);
 }
 .ids .ids-heading-m:focus-visible {
   outline: none;
 }
 .ids .ids-heading-s {
   font-style: normal;
-  color: var(--heading-s-color);
-  font-family: var(--heading-s-font-family);
-  font-size: var(--heading-s-font-size);
-  line-height: var(--heading-s-line-height);
-  letter-spacing: var(--heading-s-letter-spacing);
-  font-weight: var(--heading-s-font-weight);
+  color: var(--IDS-HEADING-S__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 .ids-heading-s {
-    font-size: var(--heading-s-font-size-desktop);
-    line-height: var(--heading-s-line-height-desktop);
-    letter-spacing: var(--heading-s-letter-spacing-desktop);
+    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);
   }
 }
 .ids .ids-heading-s .ids-anchor {
-  color: var(--anchor-color);
+  color: var(--IDS-ANCHOR__COLOR);
   text-decoration: none;
 }
 .ids .ids-heading-s .ids-anchor:visited {
-  color: var(--anchor-color);
+  color: var(--IDS-ANCHOR__COLOR);
 }
 .ids .ids-heading-s .ids-anchor:link {
   text-decoration: none;
 }
 .ids .ids-heading-s .ids-anchor:active, .ids .ids-heading-s .ids-anchor:hover {
-  color: var(--anchor-hover-color);
+  color: var(--IDS-ANCHOR__HOVER-COLOR);
 }
 .ids .ids-heading-s:focus-visible {
   outline: none;
 }
 .ids .ids-heading-xs {
   font-style: normal;
-  color: var(--heading-xs-color);
-  font-family: var(--heading-xs-font-family);
-  font-size: var(--heading-xs-font-size);
-  line-height: var(--heading-xs-line-height);
-  letter-spacing: var(--heading-xs-letter-spacing);
-  font-weight: var(--heading-xs-font-weight);
+  color: var(--IDS-HEADING-XS__COLOR);
+  font-family: var(--IDS-HEADING-XS__FONT-FAMILY);
+  font-size: var(--IDS-HEADING-XS__FONT-SIZE);
+  line-height: var(--IDS-HEADING-XS__LINE-HEIGHT);
+  letter-spacing: var(--IDS-HEADING-XS__LETTER-SPACING);
+  font-weight: var(--IDS-HEADING-XS__FONT-WEIGHT);
 }
 .ids .ids-heading-xs .ids-anchor {
-  color: var(--anchor-color);
+  color: var(--IDS-ANCHOR__COLOR);
   text-decoration: none;
 }
 .ids .ids-heading-xs .ids-anchor:visited {
-  color: var(--anchor-color);
+  color: var(--IDS-ANCHOR__COLOR);
 }
 .ids .ids-heading-xs .ids-anchor:link {
   text-decoration: none;
 }
 .ids .ids-heading-xs .ids-anchor:active, .ids .ids-heading-xs .ids-anchor:hover {
-  color: var(--anchor-hover-color);
+  color: var(--IDS-ANCHOR__HOVER-COLOR);
 }
 .ids .ids-heading-xs:focus-visible {
   outline: none;
@@ -3697,57 +3745,57 @@ input:focus + .ids-toggle input:before {
 .ids .ids-preamble {
   font-style: normal;
   color: var(--IDS-COLOR-NEUTRAL-20);
-  font-family: var(--preamble-font-family);
-  font-size: var(--preamble-font-size);
-  line-height: var(--preamble-line-height);
+  font-family: var(--IDS-PREAMBLE__FONT-FAMILY);
+  font-size: var(--IDS-PREAMBLE__FONT-SIZE);
+  line-height: var(--IDS-PREAMBLE__LINE-HEIGHT);
   font-weight: 300;
   letter-spacing: 0;
 }
 @media (min-width: 1024px) {
   .ids .ids-preamble {
-    font-size: var(--preamble-font-size-desktop);
-    line-height: var(--preamble-line-height-desktop);
+    font-size: var(--IDS-PREAMBLE__FONT-SIZE-DESKTOP);
+    line-height: var(--IDS-PREAMBLE__LINE-HEIGHT-DESKTOP);
   }
 }
 .ids .ids-preamble .ids-anchor {
-  color: var(--anchor-color);
+  color: var(--IDS-ANCHOR__COLOR);
   text-decoration: none;
 }
 .ids .ids-preamble .ids-anchor:visited {
-  color: var(--anchor-color);
+  color: var(--IDS-ANCHOR__COLOR);
 }
 .ids .ids-preamble .ids-anchor:link {
   text-decoration: underline;
 }
 .ids .ids-preamble .ids-anchor:active, .ids .ids-preamble .ids-anchor:hover {
-  color: var(--anchor-hover-color);
+  color: var(--IDS-ANCHOR__HOVER-COLOR);
   text-decoration: underline;
 }
 .ids .ids-body {
   font-style: normal;
   color: var(--IDS-COLOR-NEUTRAL-20);
-  font-family: var(--body-font-family);
-  font-size: var(--body-font-size);
-  line-height: var(--body-line-height);
+  font-family: var(--IDS-BODY__FONT-FAMILY);
+  font-size: var(--IDS-BODY__FONT-SIZE);
+  line-height: var(--IDS-BODY__LINE-HEIGHT);
   font-weight: 400;
   letter-spacing: 0;
 }
 .ids .ids-body .ids-anchor {
-  color: var(--anchor-color);
+  color: var(--IDS-ANCHOR__COLOR);
   text-decoration: none;
 }
 .ids .ids-body .ids-anchor:visited {
-  color: var(--anchor-color);
+  color: var(--IDS-ANCHOR__COLOR);
 }
 .ids .ids-body .ids-anchor:link {
   text-decoration: underline;
 }
 .ids .ids-body .ids-anchor:active, .ids .ids-body .ids-anchor:hover {
-  color: var(--anchor-hover-color);
+  color: var(--IDS-ANCHOR__HOVER-COLOR);
   text-decoration: underline;
 }
 .ids .ids-body.ids-disabled {
-  color: var(---body-disabled-color);
+  color: var(---IDS-BODY--DISABLED__COLOR);
   font-style: italic;
 }
 .ids .ids-small {
@@ -3757,30 +3805,30 @@ input:focus + .ids-toggle input:before {
   line-height: 1.25rem;
   font-weight: 400;
   letter-spacing: 0rem;
-  font-family: var(--font-family_1);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
 }
 .ids .ids-small .ids-anchor {
-  color: var(--anchor-color);
+  color: var(--IDS-ANCHOR__COLOR);
   text-decoration: none;
 }
 .ids .ids-small .ids-anchor:visited {
-  color: var(--anchor-color);
+  color: var(--IDS-ANCHOR__COLOR);
 }
 .ids .ids-small .ids-anchor:link {
   text-decoration: underline;
 }
 .ids .ids-small .ids-anchor:active, .ids .ids-small .ids-anchor:hover {
-  color: var(--anchor-hover-color);
+  color: var(--IDS-ANCHOR__HOVER-COLOR);
   text-decoration: underline;
 }
 .ids .ids-pagelist {
   font-style: normal;
-  color: var(--page-list-color);
-  font-family: var(--pagelist-font-family);
-  font-size: var(--pagelist-font-size);
-  line-height: var(--pagelist-line-height);
-  font-weight: var(--pagelist-font-weight);
-  letter-spacing: var(--pagelist-letterspacing);
+  color: var(--IDS-PAGE-LIST__COLOR);
+  font-family: var(--IDS-PAGE-LIST__FONT-FAMILY);
+  font-size: var(--IDS-PAGE-LIST__FONT-SIZE);
+  line-height: var(--IDS-PAGE-LIST__LINE-HEIGHT);
+  font-weight: var(--IDS-PAGE-LIST__FONT-WEIGHT);
+  letter-spacing: var(--IDS-PAGE-LIST__LETTER-SPACING);
 }
 .ids ul.ids-bullet-list,
 .ids .ids-bullet-list {
@@ -3793,16 +3841,16 @@ input:focus + .ids-toggle input:before {
   padding-left: 0.5rem;
   display: list-item;
   color: var(--IDS-COLOR-NEUTRAL-20);
-  font-family: var(--font-family_1);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
   font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   letter-spacing: 0;
-  line-height: var(--bullet-list-line-height);
+  line-height: var(--IDS-BULLET-LIST__LINE-HEIGHT);
 }
 .ids ul.ids-bullet-list li::marker,
 .ids .ids-bullet-list li::marker {
-  color: var(--bullet-list-marker-color);
+  color: var(--IDS-BULLET-LIST__MARKER-COLOR);
 }
 .ids ol.ids-numbered-list,
 .ids .ids-numbered-list {
@@ -3815,43 +3863,43 @@ input:focus + .ids-toggle input:before {
   padding-left: 0.5rem;
   display: list-item;
   color: var(--IDS-COLOR-NEUTRAL-20);
-  font-family: var(--font-family_1);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
   font-size: 1rem;
   font-style: normal;
   font-weight: 400;
-  letter-spacing: 0rem;
-  line-height: var(--bullet-list-line-height);
+  letter-spacing: 0;
+  line-height: var(--IDS-BULLET-LIST__LINE-HEIGHT);
 }
 .ids ol.ids-numbered-list li::marker,
 .ids .ids-numbered-list li::marker {
-  font-weight: var(--bullet-list-marker-font-weight);
+  font-weight: var(--IDS-BULLET-LIST__MARKER-FONT-WEIGHT);
 }
 
 .ids-content .ids-heading-xxl {
-  margin-bottom: var(--heading-xxl-margin-bottom);
+  margin-bottom: var(--IDS-HEADING-XXL__MARGIN-BOTTOM);
 }
 .ids-content .ids-heading-xl {
-  margin-bottom: var(--heading-xl-margin-bottom);
+  margin-bottom: var(--IDS-HEADING-XL__MARGIN-BOTTOM);
 }
 .ids-content .ids-heading-l {
-  margin-bottom: var(--heading-l-margin-bottom);
+  margin-bottom: var(--IDS-HEADING-L__MARGIN-BOTTOM);
 }
 .ids-content .ids-heading-m,
 .ids-content .ids-heading-s,
 .ids-content .ids-heading-xs {
-  margin-bottom: 10px;
+  margin-bottom: 0.625rem;
 }
 .ids-content .ids-preamble {
-  margin-bottom: 40px;
+  margin-bottom: 2.5rem;
 }
 .ids-content .ids-body {
-  margin-bottom: 30px;
+  margin-bottom: 1.875rem;
 }
 
 :root {
-  --IDS_MAX-WIDTH: 1280px;
-  --ids-font-family: Open sans;
-  --ids-font-color: black;
+  --IDS__MAX-WIDTH: 1280px;
+  --IDS__FONT-FAMILY: Open sans;
+  --IDS__FONT-COLOR: black;
 }
 
 .ids input:focus,
@@ -3859,20 +3907,20 @@ input:focus + .ids-toggle input:before {
 .ids textarea:focus,
 .ids ids-button:focus,
 .ids a:focus {
-  outline: var(--focus_outline);
-  outline-offset: var(--focus_outline-offset);
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
 }
 
 input::placeholder,
 textarea::placeholder,
 select::placeholder {
-  color: var(--IDS-FORM__PLACEHOLDER__COLOR);
+  color: var(--IDS-FORM-PLACEHOLDER__COLOR);
 }
 
 [tabindex="0"]:focus {
-  outline: var(--focus_outline);
-  outline-offset: var(--focus_outline-offset);
-  outline-color: var(--focus-outline_color);
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
+  outline-color: var(--IDS-FOCUS__OUTLINE-COLOR);
 }
 
 input[type=search]::-webkit-search-decoration,