@inera/ids-design 5.2.2 → 5.4.0

package/{global → dist/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);
-  color: var(--link-colorpreset-1_color);
-  text-decoration-color: var(--link-colorpreset-1_color);
+  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;
@@ -2300,13 +2303,13 @@
 .ids-link:not(:has(.ids-icon)) {
   text-decoration: underline;
 }
-.ids-link:focus:focus {
-  outline: var(--IDS-FOCUS_OUTLINE);
-  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+.ids-link:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
 .ids-link:hover, .ids-link:focus {
   text-decoration: underline !important;
-  color: var(--link-colorpreset-1-hover_color);
+  color: var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR);
 }
 .ids-link:hover .ids-link__icon:has(+ .ids-link__icon--hover), .ids-link:focus .ids-link__icon:has(+ .ids-link__icon--hover) {
   display: none;
@@ -2334,10 +2337,10 @@
   padding: 0.188rem;
 }
 .ids-link.ids-link--active-icon.ids-link--active .ids-icon {
-  background-color: var(--link-colorpreset-1--active-icon--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(--link-colorpreset-1--active-icon--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,28 +2353,52 @@
   padding: 0.188rem;
 }
 .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-icon {
-  background-color: var(--link-colorpreset-2--active-icon--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(--link-colorpreset-2--active-icon--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(--link-colorpreset-2_color);
-  text-decoration-color: var(--link-colorpreset-2_color);
+  color: var(--IDS-LINK--COLORPRESET-2__COLOR);
+  text-decoration-color: var(--IDS-LINK--COLORPRESET-2__COLOR);
 }
 .ids-link.ids-link--color-2:hover, .ids-link.ids-link--color-2:focus {
-  color: var(--link-colorpreset-2-hover_color);
-  text-decoration-color: var(--link-colorpreset-2-hover_color);
+  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;
@@ -2395,14 +2422,14 @@
 .ids-button[disabled],
 .ids button.ids-button.ids-button--disabled,
 .ids button.ids-button[disabled] {
-  color: var(--btn-disabled_color) !important;
-  border: var(--btn-disabled_border) !important;
-  background-color: white !important;
+  color: var(--IDS-BUTTON--DISABLED__COLOR) !important;
+  border: var(--IDS-BUTTON--DISABLED__BORDER) !important;
+  background-color: var(--IDS-COLOR-NEUTRAL-100) !important;
 }
 
 .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,37 +2444,36 @@
   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,
 .ids-button,
 .ids button.ids-button {
   text-align: center;
-  background-color: var(--btn_background-color);
-  border: var(--btn_border);
-  border-radius: var(--btn_border-radius);
+  background-color: var(--IDS-BUTTON__BACKGROUND-COLOR);
+  border: var(--IDS-BUTTON__BORDER);
+  border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
   text-decoration: none;
   box-sizing: border-box;
-  color: white;
+  color: var(--IDS-COLOR-NEUTRAL-100);
   cursor: pointer;
-  padding: var(--btn-m_padding);
-  gap: 8px;
+  gap: 0.5rem;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  font-family: var(--btn_font-family);
-  font-weight: var(--btn_font-weight);
+  padding: var(--IDS-BUTTON--M__PADDING);
+  line-height: var(--IDS-BUTTON--M__LINE-HEIGHT);
+  font-size: var(--IDS-BUTTON--M__FONT-SIZE);
+  font-family: var(--IDS-BUTTON__FONT-FAMILY);
+  font-weight: var(--IDS-BUTTON__FONT-WEIGHT);
   text-transform: uppercase;
   user-select: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
-  font-size: 1rem;
-  min-height: var(--btn-m_height);
-  line-height: 22px;
 }
 .ids .ids-button:hover, .ids .ids-button:active, .ids .ids-button:focus, .ids .ids-button.ids-button--active,
 .ids-button:hover,
@@ -2458,22 +2484,22 @@
 .ids button.ids-button:active,
 .ids button.ids-button:focus,
 .ids button.ids-button.ids-button--active {
-  background-color: var(--btn-active_background-color);
-  box-shadow: var(--btn-active_box-shadow);
+  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
+  box-shadow: var(--IDS-BUTTON--ACTIVE__BOX-SHADOW);
 }
 .ids .ids-button.ids-button--s,
 .ids-button.ids-button--s,
 .ids button.ids-button.ids-button--s {
-  font-size: 0.875rem;
-  min-height: var(--btn-s_height);
-  padding: var(--btn-s_padding);
+  font-size: var(--IDS-BUTTON--S__FONT-SIZE);
+  line-height: var(--IDS-BUTTON--S__LINE-HEIGHT);
+  padding: var(--IDS-BUTTON--S__PADDING);
 }
 .ids .ids-button.ids-button--l,
 .ids-button.ids-button--l,
 .ids button.ids-button.ids-button--l {
-  font-size: 1.125rem;
-  min-height: var(--btn-l_height);
-  padding: var(--btn-l_padding);
+  font-size: var(--IDS-BUTTON--L__FONT-SIZE);
+  line-height: var(--IDS-BUTTON--L__LINE-HEIGHT);
+  padding: var(--IDS-BUTTON--L__PADDING);
 }
 .ids .ids-button.ids-button--loading,
 .ids-button.ids-button--loading,
@@ -2483,23 +2509,23 @@
 .ids .ids-button.ids-button--secondary,
 .ids-button.ids-button--secondary,
 .ids button.ids-button.ids-button--secondary {
-  background-color: white;
-  border: var(--btn-secondary_border);
-  color: var(--btn-secondary_color);
-  min-height: var(--btn-secondary-m_height);
-  padding: var(--btn-secondary-m_padding);
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+  border: var(--IDS-BUTTON--SECONDARY__BORDER);
+  color: var(--IDS-BUTTON--SECONDARY__COLOR);
+  line-height: var(--IDS-BUTTON--M__LINE-HEIGHT);
+  padding: var(--IDS-BUTTON--M__PADDING);
 }
 .ids .ids-button.ids-button--secondary.ids-button--s,
 .ids-button.ids-button--secondary.ids-button--s,
 .ids button.ids-button.ids-button--secondary.ids-button--s {
-  min-height: var(--btn-secondary-s_height);
-  padding: var(--btn-secondary-s_padding);
+  line-height: var(--IDS-BUTTON--S__LINE-HEIGHT);
+  padding: var(--IDS-BUTTON--S__PADDING);
 }
 .ids .ids-button.ids-button--secondary.ids-button--l,
 .ids-button.ids-button--secondary.ids-button--l,
 .ids button.ids-button.ids-button--secondary.ids-button--l {
-  min-height: var(--btn-secondary-l_height);
-  padding: var(--btn-secondary-l_padding);
+  line-height: var(--IDS-BUTTON--L__LINE-HEIGHT);
+  padding: var(--IDS-BUTTON--L__PADDING);
 }
 .ids .ids-button.ids-button--secondary.ids-button--active, .ids .ids-button.ids-button--secondary:hover, .ids .ids-button.ids-button--secondary:focus, .ids .ids-button.ids-button--secondary:active,
 .ids-button.ids-button--secondary.ids-button--active,
@@ -2510,22 +2536,33 @@
 .ids button.ids-button.ids-button--secondary:hover,
 .ids button.ids-button.ids-button--secondary:focus,
 .ids button.ids-button.ids-button--secondary:active {
-  background-color: var(--btn-active_background-color);
-  color: white;
-  border: 1px solid var(--btn-active_background-color);
+  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
+  color: var(--IDS-COLOR-NEUTRAL-100);
+  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: 0px;
-  border: none;
-  color: var(--btn-tertiary_color);
+  border-radius: 0;
+  border: 0.063rem solid transparent;
+  color: var(--IDS-BUTTON--TERTIARY__COLOR);
   box-shadow: none;
-  line-height: 22px;
-  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,
+.ids-button.ids-button--tertiary.ids-button--s,
+.ids button.ids-button.ids-button--tertiary.ids-button--s {
+  line-height: var(--IDS-BUTTON--S__LINE-HEIGHT);
+  padding: var(--IDS-BUTTON--S__PADDING);
+}
+.ids .ids-button.ids-button--tertiary.ids-button--l,
+.ids-button.ids-button--tertiary.ids-button--l,
+.ids button.ids-button.ids-button--tertiary.ids-button--l {
+  line-height: var(--IDS-BUTTON--L__LINE-HEIGHT);
+  padding: var(--IDS-BUTTON--L__PADDING);
+}
 .ids .ids-button.ids-button--tertiary.ids-button--active, .ids .ids-button.ids-button--tertiary:hover, .ids .ids-button.ids-button--tertiary:active, .ids .ids-button.ids-button--tertiary:focus,
 .ids-button.ids-button--tertiary.ids-button--active,
 .ids-button.ids-button--tertiary:hover,
@@ -2535,9 +2572,10 @@
 .ids button.ids-button.ids-button--tertiary:hover,
 .ids button.ids-button.ids-button--tertiary:active,
 .ids button.ids-button.ids-button--tertiary:focus {
-  background-color: var(--btn-active_background-color);
-  color: white;
-  border-radius: var(--btn_border-radius);
+  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
+  color: var(--IDS-COLOR-NEUTRAL-100);
+  border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
+  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,
@@ -2546,28 +2584,22 @@
 .ids button.ids-button.ids-button--tertiary[disabled] {
   border: none !important;
   text-decoration: underline !important;
-  color: var(--btn-disabled_color);
+  color: var(--IDS-BUTTON--DISABLED__COLOR);
   text-decoration: none;
 }
-.ids .ids-button.ids-button--submit,
-.ids-button.ids-button--submit,
-.ids button.ids-button.ids-button--submit {
-  height: 3.75em !important;
-  border-radius: var(--btn-submit_border-radius);
-}
 .ids .ids-button.ids-button--icon, .ids .ids-button.ids-button--fab,
 .ids-button.ids-button--icon,
 .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: 0px !important;
-  font-size: 20px;
-  padding: 0px !important;
+  line-height: 0 !important;
+  font-size: 1.25rem;
+  padding: 0 !important;
   justify-content: center;
 }
 .ids .ids-button.ids-button--icon.ids-button--s, .ids .ids-button.ids-button--fab.ids-button--s,
@@ -2575,28 +2607,28 @@
 .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: white;
-  border: var(--btn-fab_border);
-  filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.3));
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+  border: var(--IDS-BUTTON--FAB__BORDER);
+  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,
 .ids button.ids-button.ids-button--icon.ids-button--secondary {
-  background-color: var(--btn-icon-secondary_background-color);
+  background-color: var(--IDS-BUTTON--SECONDARY__ICON-BACKGROUND-COLOR);
 }
 .ids .ids-button.ids-button--icon.ids-button--active, .ids .ids-button.ids-button--icon:hover, .ids .ids-button.ids-button--icon:active, .ids .ids-button.ids-button--icon:focus,
 .ids-button.ids-button--icon.ids-button--active,
@@ -2607,37 +2639,69 @@
 .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(--btn-icon-secondary--hover_background-color);
-  color: white;
+  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
+  color: var(--IDS-COLOR-NEUTRAL-100);
 }
 .ids .ids-button.ids-button--submit,
 .ids-button.ids-button--submit,
 .ids button.ids-button.ids-button--submit {
-  height: var(--btn-submit_height);
-  border-radius: var(--btn-submit_border-radius);
-  line-height: var(--btn-submit_height);
+  border-radius: var(--IDS-BUTTON--SUBMIT__BORDER-RADIUS);
+  font-size: var(--IDS-BUTTON--SUBMIT-S__FONT-SIZE);
+  height: var(--IDS-BUTTON--SUBMIT-S__HEIGHT);
+  padding: var(--IDS-BUTTON--SUBMIT-S__PADDING);
+}
+.ids .ids-button.ids-button--submit.ids-button--s,
+.ids-button.ids-button--submit.ids-button--s,
+.ids button.ids-button.ids-button--submit.ids-button--s {
+  height: var(--IDS-BUTTON--SEARCH-M__HEIGHT);
+  font-size: var(--IDS-BUTTON--SEARCH-M__FONT-SIZE);
+  padding: var(--IDS-BUTTON--SEARCH-M__PADDING);
+}
+@media (min-width: 1024px) {
+  .ids .ids-button.ids-button--submit,
+  .ids-button.ids-button--submit,
+  .ids button.ids-button.ids-button--submit {
+    height: var(--IDS-BUTTON--SUBMIT-L__HEIGHT);
+    padding: var(--IDS-BUTTON--SUBMIT-L__PADDING);
+    font-size: var(--IDS-BUTTON--SUBMIT-L__FONT-SIZE);
+  }
+  .ids .ids-button.ids-button--submit.ids-button--s,
+  .ids-button.ids-button--submit.ids-button--s,
+  .ids button.ids-button.ids-button--submit.ids-button--s {
+    height: var(--IDS-BUTTON--SEARCH-M__HEIGHT);
+    font-size: var(--IDS-BUTTON--SEARCH-M__FONT-SIZE);
+    padding: var(--IDS-BUTTON--SEARCH-M__PADDING);
+  }
 }
 .ids .ids-button.ids-button--search,
 .ids-button.ids-button--search,
 .ids button.ids-button.ids-button--search {
-  height: var(--btn-search_height);
-  padding: 0px 30px !important;
-  font-size: var(--btn-search_font-size);
-  border-radius: var(--btn-search_border-radius);
+  border-radius: var(--IDS-BUTTON--SEARCH__BORDER-RADIUS);
+  font-size: var(--IDS-BUTTON--SEARCH-S__FONT-SIZE);
+  height: var(--IDS-BUTTON--SEARCH-S__HEIGHT);
+  padding: var(--IDS-BUTTON--SEARCH-S__PADDING);
 }
 .ids .ids-button.ids-button--search.ids-button--s,
 .ids-button.ids-button--search.ids-button--s,
 .ids button.ids-button.ids-button--search.ids-button--s {
-  height: var(--btn-search-s_height);
-  font-size: var(--btn-search-s_font-size);
+  height: var(--IDS-BUTTON--SEARCH-M__HEIGHT);
+  font-size: var(--IDS-BUTTON--SEARCH-M__FONT-SIZE);
+  padding: var(--IDS-BUTTON--SEARCH-M__PADDING);
 }
-@media (max-width: 1024px) {
+@media (min-width: 1024px) {
   .ids .ids-button.ids-button--search,
   .ids-button.ids-button--search,
   .ids button.ids-button.ids-button--search {
-    font-size: var(--btn-search-mobile_font-size) !important;
-    padding: 0px 14px !important;
-    height: var(--btn-search-mobile_height) !important;
+    height: var(--IDS-BUTTON--SEARCH-L__HEIGHT);
+    padding: var(--IDS-BUTTON--SEARCH-L__PADDING);
+    font-size: var(--IDS-BUTTON--SEARCH-L__FONT-SIZE);
+  }
+  .ids .ids-button.ids-button--search.ids-button--s,
+  .ids-button.ids-button--search.ids-button--s,
+  .ids button.ids-button.ids-button--search.ids-button--s {
+    height: var(--IDS-BUTTON--SEARCH-M__HEIGHT);
+    font-size: var(--IDS-BUTTON--SEARCH-M__FONT-SIZE);
+    padding: var(--IDS-BUTTON--SEARCH-M__PADDING);
   }
 }
 .ids .ids-button.ids-button--block,
@@ -2678,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] {
@@ -2703,107 +2767,112 @@
   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%;
-  margin-top: 3px;
   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,
 .ids-radio input[type=radio]:disabled {
   cursor: default;
   background-color: var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
-  background-image: var(--IDS-RADIO--DISABLED_BACKGROUND-IMAGE);
-  border: 0;
+  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);
-  top: 1px;
-  left: 1px;
+  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);
-  background-image: var(--IDS-RADIO--INVALID_BACKGROUND-IMAGE);
-  border: 0;
+  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: 1px;
-  left: 1px;
-}
-.ids-radio .ids-label-tooltip-wrapper:nth-child(2) {
-  margin-top: 3px;
+  top: 0;
+  left: 0;
 }
 .ids-radio.ids-radio--compact {
   margin: 0 !important;
 }
 .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 {
-  margin: 3px 0 0 0;
+  margin: 0;
   position: relative;
   height: 1.25rem;
   width: 1.25rem;
@@ -2815,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;
@@ -2845,31 +2914,28 @@ input:focus + .ids-checkbox input::before {
 .ids-checkbox input[type=checkbox]:disabled::before,
 .ids-checkbox input:disabled::before {
   cursor: default;
+  border: var(--IDS-FORM--DISABLED__BORDER);
   background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR) !important;
-  border: none !important;
-  background-image: var(--IDS-CHECKBOX--DISABLED_BACKGROUND-IMAGE) !important;
 }
 .ids-checkbox input[type=checkbox]:disabled:after,
 .ids-checkbox input:disabled:after {
   cursor: default;
 }
-.ids-checkbox input[type=checkbox]:disabled:checked + .ids-checkbox input[type=checkbox]:disabled::after,
-.ids-checkbox input[type=checkbox]:disabled:checked + .ids-checkbox input:disabled::after,
-.ids-checkbox input:disabled:checked + .ids-checkbox input[type=checkbox]:disabled::after,
-.ids-checkbox input:disabled:checked + .ids-checkbox input:disabled::after {
-  background-image: var(--IDS-CHECKBOX-CHECK--DISABLED_BACKGROUND-IMAGE) !important;
+.ids-checkbox input[type=checkbox]:disabled:checked::after,
+.ids-checkbox input:disabled:checked::after {
+  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: none;
-  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-  background-image: var(--IDS-CHECKBOX--INVALID_BACKGROUND-IMAGE);
+  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 {
@@ -2879,240 +2945,249 @@ input:focus + .ids-checkbox input::before {
 .ids-checkbox.ids-checkbox--light input.ids-input--invalid::before {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
-.ids-checkbox .ids-label-tooltip-wrapper:nth-child(2) {
-  margin-top: 3px;
+.ids-checkbox.ids-checkbox--block {
+  width: 100%;
+}
+.ids-checkbox.ids-checkbox--block .ids-label {
+  width: 100%;
 }
 .ids-checkbox.ids-checkbox--compact {
   margin: 0 !important;
 }
 .ids-checkbox.ids-checkbox--compact label {
   margin-left: 0 !important;
-  margin-bottom: -2px !important;
-}
-
-.ids-input {
-  font-family: var(--font-family_1) !important;
-  padding: 0.75rem 1.25rem;
-  background-color: var(--IDS-INPUT_BACKGROUND);
-  border: var(--IDS-INPUT_BORDER);
-  border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
-  border-radius: var(--IDS-INPUT_BORDER-RADIUS);
-  font-size: 16px;
-  color: var(--IDS-INPUT_COLOR);
-  display: block;
-  width: 100%;
-}
-.ids-input:disabled {
-  background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
-  border: none;
-  background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
-}
-
-.ids-input__hint {
-  margin-top: 5px;
-  font-family: var(--font-family_1);
-  color: var(--IDS-FORM__LABEL__COLOR);
-  display: flex;
-  justify-content: end;
-  line-height: 1.5rem;
-  font-size: 1rem;
-  font-style: italic;
+  margin-bottom: -0.125rem !important;
 }
 
 .ids-input-wrapper {
   position: relative;
   display: flex;
-  gap: 10px;
-}
-.ids-input-wrapper .ids-input {
-  width: 100%;
-  min-height: 3rem;
+  gap: 0.5rem;
 }
 .ids-input-wrapper .ids-input__icon {
   pointer-events: none;
   position: absolute;
   top: 50%;
-  right: 25px;
+  right: var(--IDS-INPUT__ICON-RIGHT);
   transform: translateY(-50%);
 }
-.ids-input-wrapper .ids-input__prepend-icon {
+.ids-input-wrapper .ids-input__inner-wrapper {
+  position: relative;
+  width: 100%;
+}
+.ids-input-wrapper .ids-input__inner-wrapper .ids-input__search-icon {
   pointer-events: none;
   position: absolute;
   top: 50%;
-  left: 20px;
+  left: 1.25rem;
   transform: translateY(-50%);
 }
-.ids-input-wrapper .ids-input__prepend-icon + .ids-input {
-  padding-left: 55px !important;
+.ids-input-wrapper .ids-input__inner-wrapper .ids-input {
+  padding-left: var(--IDS-INPUT--SEARCH__PADDING-LEFT);
 }
-
-.ids-input__inner-wrapper {
-  position: relative;
-  display: flex;
-  width: 100%;
+.ids-input-wrapper.ids-input--icon .ids-input {
+  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT);
 }
-.ids-input__inner-wrapper .ids-input__cancel-button {
-  display: none;
-  border: none;
-  padding: 0;
-  position: absolute;
-  right: 20px;
-  top: 50%;
-  transform: translateY(-50%);
-  cursor: pointer;
-  height: 20px;
-  width: 20px;
-  background-image: var(--IDS-INPUT--SEARCH__CANCEL-ICON);
+@media (min-width: 1024px) {
+  .ids-input-wrapper {
+    gap: 1.25rem;
+  }
 }
-.ids-input__inner-wrapper .ids-input__cancel-button.ids-input__cancel-button--show {
+
+.ids-input {
+  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-radius: var(--IDS-INPUT__BORDER-RADIUS);
+  font-size: 1rem;
+  color: var(--IDS-INPUT__COLOR);
   display: block;
+  width: 100% !important;
+  height: var(--IDS-INPUT__HEIGHT);
+  line-height: 1.5rem;
+  font-size: 1rem;
 }
-.ids-input__inner-wrapper .ids-input__cancel-button.ids-input__cancel-button--show:focus {
-  outline: var(--IDS-FOCUS_OUTLINE);
-  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+.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.ids-input--invalid {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-  border: none;
-  background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
+  border: var(--IDS-FORM--INVALID__BORDER);
+  box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
 }
-.ids-input:disabled {
-  background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
-  border: none;
-  background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
-}
-.ids-input:focus {
-  box-shadow: var(--IDS-INPUT_BOX-SHADOW);
+.ids-input.ids-input--light {
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
 }
-.ids-input[type=search] {
-  padding-left: 55px;
+.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:not(:invalid) {
-  background-color: white;
+.ids-input.ids-input--light.ids-input--invalid {
+  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
-.ids-input.ids-input--light:required {
-  background-color: white;
+.ids-input:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
-.ids-input.ids-input--search {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-  height: 3.75rem;
-  padding-left: 55px !important;
-  font-size: 18px !important;
+.ids-input.ids-input--search, .ids-input[type=search] {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: var(--IDS-INPUT--SEARCH__PADDING-LEFT);
+  font-size: var(--IDS-INPUT--SEARCH__FONT-SIZE-MOBILE);
+  border-radius: var(--IDS-INPUT--SEARCH__BORDER-RADIUS);
+  height: var(--IDS-INPUT--SEARCH__HEIGHT-MOBILE);
 }
-@media (max-width: 1024px) {
-  .ids-input.ids-input--search {
-    padding-left: 20px !important;
-    font-size: 16px !important;
-    margin-right: var(--input-search-mobile_margin-right);
-    border-radius: var(--IDS-INPUT--SEARCH__BORDER-RADIUS);
-    height: 3.125rem;
+@media (min-width: 1024px) {
+  .ids-input.ids-input--search, .ids-input[type=search] {
+    height: var(--IDS-INPUT--SEARCH__HEIGHT-DESKTOP);
   }
 }
 
-.ids-range {
-  -webkit-appearance: none;
+.ids-input__hint {
+  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;
+  font-size: 1rem;
+  font-style: italic;
+}
+
+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: 0px;
-  border-radius: 16px;
-}
-.ids-range:disabled {
-  cursor: default;
-  -webkit-appearance: none;
-  width: 100%;
-  height: 8px;
-  background-color: var(--IDS-RANGE__BACKGROUND-COLOR);
-  background-image: linear-gradient(var(--IDS-RANGE-SELECTION--DISABLED__COLOR), var(--IDS-RANGE-SELECTION--DISABLED__COLOR));
-  background-repeat: no-repeat;
-  border: 1px;
-  padding: 0px;
-  border-radius: 16px;
+  padding: 0;
+  border-radius: 1rem;
+  margin: 0;
 }
-.ids-range::-ms-track {
+input.ids-range::-ms-track {
   width: 100%;
   cursor: pointer;
   background: transparent;
   border-color: transparent;
   color: transparent;
 }
-.ids-range::-webkit-slider-thumb {
+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;
 }
-.ids-range:disabled::-webkit-slider-thumb {
-  cursor: default;
-  background: var(--IDS-RANGE-SELECTION--DISABLED__COLOR);
-}
-.ids-range::-ms-thumb {
-  border: 2px solid white;
-  height: 22px;
-  width: 24px;
+input.ids-range::-ms-thumb {
+  border: 0.125rem solid var(--IDS-COLOR-NEUTRAL-100);
+  height: 1.375rem;
+  width: 1.5rem;
   border-radius: 100%;
   cursor: pointer;
 }
-.ids-range:disabled::-ms-thumb {
+input.ids-range:disabled {
+  cursor: default;
+  appearance: none;
+  width: 100%;
+  height: 0.5rem;
+  background-color: var(--IDS-RANGE__BACKGROUND-COLOR);
+  background-image: linear-gradient(var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR), var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR));
+  background-repeat: no-repeat;
+  border: 0.063rem;
+  padding: 0;
+  border-radius: 1rem;
+}
+input.ids-range:disabled::-webkit-slider-thumb {
+  cursor: default;
+  background: var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR);
+}
+input.ids-range:disabled::-ms-thumb {
   cursor: default;
 }
 
 .ids-select {
-  font-family: var(--font-family_1) !important;
-  padding: 0.75rem 1.25rem;
-  background-color: var(--IDS-INPUT_BACKGROUND);
-  border: var(--IDS-INPUT_BORDER);
-  border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
-  border-radius: var(--IDS-INPUT_BORDER-RADIUS);
-  font-size: 16px;
-  color: var(--IDS-INPUT_COLOR);
-  display: block;
-  cursor: pointer;
   appearance: none !important;
   -webkit-appearance: none !important;
   -moz-appearance: none !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-radius: var(--IDS-INPUT__BORDER-RADIUS);
+  font-size: 1rem;
+  color: var(--IDS-INPUT__COLOR);
+  display: block;
+  height: var(--IDS-INPUT__HEIGHT);
+  cursor: pointer;
   display: inline-block !important;
-  padding-right: 50px !important;
+  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT) !important;
   text-align: left;
   overflow: hidden;
   text-overflow: ellipsis;
-  border: var(--select_border);
-  border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
+  border: var(--IDS-INPUT__BORDER);
   width: 100% !important;
 }
 .ids-select:disabled {
-  background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
-  border: none;
-  background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
+  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--invalid {
-  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-  background-image: var(--IDS-FORM--INVALID__BACKGROUND-IMAGE);
-  border: 1px solid transparent;
+  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 {
+.ids-select.ids-input--light {
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+}
+.ids-select.ids-input--light:disabled {
   color: var(--IDS-FORM--DISABLED__COLOR);
-  background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR) !important;
-  border: var(--IDS-FORM-DISABLED_BORDER);
   font-style: italic !important;
-  background-image: var(--IDS-FORM--DISABLED__BACKGROUND-IMAGE);
+  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: white;
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+}
+.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;
+}
+.ids-select:disabled.ids-input--light {
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+  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: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 {
@@ -3121,14 +3196,14 @@ input:focus + .ids-checkbox input::before {
 }
 .ids-select-wrapper::after {
   content: "";
-  width: 12px;
+  width: 0.75rem;
   height: 100%;
   display: block;
   position: absolute;
   transform: rotate(90deg);
-  right: 25px;
-  top: 0px;
-  bottom: 0px;
+  right: var(--IDS-INPUT__ICON-RIGHT);
+  top: 0;
+  bottom: 0;
   background-position: center;
   background-repeat: no-repeat;
   background-image: var(--IDS-SELECT__CHEVRON-ICON);
@@ -3141,72 +3216,77 @@ input:focus + .ids-checkbox input::before {
   background-image: var(--IDS-SELECT--DISABLED__CHEVRON-ICON);
 }
 
-.ids-select:disabled {
-  cursor: default;
-}
-
 .ids-textarea {
   display: inline-block;
 }
 .ids-textarea textarea {
-  font-family: var(--font-family_1) !important;
-  padding: 0.75rem 1.25rem;
-  background-color: var(--IDS-INPUT_BACKGROUND);
-  border: var(--IDS-INPUT_BORDER);
-  border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
-  border-radius: var(--IDS-INPUT_BORDER-RADIUS);
-  font-size: 16px;
-  color: var(--IDS-INPUT_COLOR);
+  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-radius: var(--IDS-INPUT__BORDER-RADIUS);
+  font-size: 1rem;
+  color: var(--IDS-INPUT__COLOR);
   display: block;
+  padding: var(--IDS-TEXTAREA__PADDING);
   box-sizing: border-box;
 }
 .ids-textarea textarea:disabled {
-  background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
-  border: none;
-  background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
+  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--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:focus {
-  box-shadow: var(--IDS-INPUT_BOX-SHADOW);
+.ids-textarea textarea::-webkit-scrollbar-corner {
+  background-color: transparent;
 }
-.ids-textarea textarea.ids-input--light {
-  background-color: white;
+.ids-textarea textarea:focus {
+  box-shadow: var(--IDS-INPUT__BOX-SHADOW);
 }
-.ids-textarea textarea.ids-input--invalid {
-  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-  border: none;
-  background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
+.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;
@@ -3224,40 +3304,33 @@ input:focus + .ids-checkbox input::before {
   overflow: hidden;
 }
 
-.ids-time-input-wrapper {
+.ids-time .ids-time__input-wrapper {
   position: relative;
-  display: flex;
-  gap: 10px;
-}
-.ids-time-input-wrapper .ids-input {
-  width: 100%;
-  min-height: 3rem;
 }
-.ids-time-input-wrapper .ids-input__icon {
+.ids-time .ids-input__icon {
   pointer-events: none;
   position: absolute;
   top: 50%;
-  right: 25px;
+  right: var(--IDS-INPUT__ICON-RIGHT);
   transform: translateY(-50%);
 }
-.ids-time-input-wrapper ::slotted(input),
-.ids-time-input-wrapper input {
+.ids-time ::slotted(input),
+.ids-time input {
   cursor: pointer;
 }
-.ids-time-input-wrapper ::slotted(input:disabled),
-.ids-time-input-wrapper input:disabled {
+.ids-time ::slotted(input:disabled),
+.ids-time input:disabled {
   cursor: default;
 }
 
-input.ids-time {
-  font-family: var(--font-family_1) !important;
-  padding: 0.75rem 1.25rem;
-  background-color: var(--IDS-INPUT_BACKGROUND);
-  border: var(--IDS-INPUT_BORDER);
-  border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
-  border-radius: var(--IDS-INPUT_BORDER-RADIUS);
-  font-size: 16px;
-  color: var(--IDS-INPUT_COLOR);
+input.ids-time__input {
+  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-radius: var(--IDS-INPUT__BORDER-RADIUS);
+  font-size: 1rem;
+  color: var(--IDS-INPUT__COLOR);
   display: block;
   cursor: pointer;
   appearance: none;
@@ -3265,73 +3338,76 @@ input.ids-time {
   -moz-appearance: none;
   display: inline-block;
   box-sizing: border-box;
-  border: var(--select_border);
-  border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
-  width: var(--time-width);
-  height: var(--time-height);
-  padding-left: var(--time-padding-left);
-  padding-top: var(--time-padding-top);
-  padding-bottom: var(--time-padding-bottom);
-}
-input.ids-time:disabled {
-  background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
-  border: none;
-  background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
+  width: 100%;
+  height: var(--IDS-INPUT__HEIGHT);
+  padding: var(--IDS-INPUT__PADDING);
+  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT);
 }
-input.ids-time.ids-input--invalid {
+input.ids-time__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);
+}
+input.ids-time__input.ids-input--invalid {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-  border: none;
-  background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
+  border: var(--IDS-FORM--INVALID__BORDER);
+  box-shadow: inset 0 0 0 0.0625rem var(--IDS-FORM--INVALID__BORDER-COLOR);
 }
-input.ids-time::-webkit-calendar-picker-indicator {
-  opacity: 0;
-  background-size: 20px;
-  margin-top: -3px;
-  position: absolute;
-  right: var(--IDS-INPUT__CALENDAR-ICON__RIGHT);
-  top: 25px;
+input.ids-time__input.ids-input--light {
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+}
+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.ids-input--light:not(:invalid) {
-  background-color: white;
+input.ids-time__input.ids-input--light.ids-input--invalid {
+  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
-
-input.ids-time:disabled {
+input.ids-time__input::-webkit-calendar-picker-indicator {
+  opacity: 0;
+  appearance: none;
+}
+input.ids-time__input:disabled {
   cursor: default;
 }
 
 .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,
@@ -3340,16 +3416,16 @@ input.ids-time: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 {
@@ -3358,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;
 }
@@ -3377,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;
 }
@@ -3387,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 {
@@ -3398,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 {
@@ -3410,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 {
@@ -3420,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;
@@ -3429,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 {
@@ -3449,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 {
@@ -3477,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);
@@ -3487,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 {
@@ -3539,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 {
@@ -3558,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 {
@@ -3577,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;
@@ -3667,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 {
@@ -3727,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 {
@@ -3763,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 {
@@ -3785,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,
@@ -3829,18 +3907,25 @@ 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,
+input[type=search]::-webkit-search-cancel-button,
+input[type=search]::-webkit-search-results-button,
+input[type=search]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
 }