@inera/ids-design 7.1.2 → 7.2.0

package/themes/1177-pro/1177-pro.css

@@ -3344,6 +3344,10 @@ body.ids {
 /*******
 * A11Y
 ********/
+.ids-link:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
 .ids-link {
   font-family: var(--IDS-LINK__FONT-FAMILY);
   color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
@@ -3357,10 +3361,6 @@ body.ids {
   text-decoration: underline;
   position: relative;
 }
-.ids-link:focus {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
-}
 .ids-link:has(.ids-icon), .ids-link.ids-link--old-icon {
   text-decoration: none;
   display: inline-flex;
@@ -4435,10 +4435,6 @@ input:focus + .ids-checkbox input::before {
   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:disabled, .ids-input[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
@@ -4469,6 +4465,12 @@ input:focus + .ids-checkbox input::before {
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
+.ids-input {
+  width: 100% !important;
+  height: var(--IDS-INPUT__HEIGHT);
+  line-height: 1.5rem;
+  font-size: 1rem;
+}
 .ids-input.ids-input--search, .ids-input[type=search] {
   margin-top: 0;
   margin-bottom: 0;
@@ -4510,15 +4512,6 @@ input:focus + .ids-checkbox input::before {
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
   display: block;
-  height: var(--IDS-INPUT__HEIGHT);
-  cursor: pointer;
-  display: inline-block !important;
-  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT) !important;
-  text-align: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  border: var(--IDS-INPUT__BORDER);
-  width: 100% !important;
 }
 .ids-select:disabled, .ids-select[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
@@ -4545,6 +4538,17 @@ input:focus + .ids-checkbox input::before {
 .ids-select.ids-input--light.ids-input--invalid {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
+.ids-select {
+  height: var(--IDS-INPUT__HEIGHT);
+  cursor: pointer;
+  display: inline-block !important;
+  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT) !important;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: var(--IDS-INPUT__BORDER);
+  width: 100% !important;
+}
 .ids-select.ids-input--invalid, .ids-select[aria-invalid=true] {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR) !important;
   border: var(--IDS-FORM--INVALID__BORDER);
@@ -4621,8 +4625,6 @@ input:focus + .ids-checkbox input::before {
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
   display: block;
-  padding: var(--IDS-TEXTAREA__PADDING);
-  box-sizing: border-box;
 }
 .ids-textarea textarea:disabled, .ids-textarea textarea[readonly],
 .ids-textarea .ids-textarea__textarea:disabled,
@@ -4683,6 +4685,11 @@ input:focus + .ids-checkbox input::before {
 .ids-textarea .ids-textarea__textarea::-webkit-scrollbar-corner {
   background-color: transparent;
 }
+.ids-textarea textarea,
+.ids-textarea .ids-textarea__textarea {
+  padding: var(--IDS-TEXTAREA__PADDING);
+  box-sizing: border-box;
+}
 .ids-textarea textarea:focus,
 .ids-textarea .ids-textarea__textarea:focus {
   box-shadow: var(--IDS-INPUT__BOX-SHADOW);
@@ -4762,16 +4769,6 @@ input.ids-time__input {
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
   display: block;
-  cursor: pointer;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  display: inline-block;
-  box-sizing: border-box;
-  width: 100%;
-  height: var(--IDS-INPUT__HEIGHT);
-  padding: var(--IDS-INPUT__PADDING);
-  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT);
 }
 input.ids-time__input:disabled, input.ids-time__input[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
@@ -4798,6 +4795,18 @@ input.ids-time__input.ids-input--light:disabled, input.ids-time__input.ids-input
 input.ids-time__input.ids-input--light.ids-input--invalid {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
+input.ids-time__input {
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  display: inline-block;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--IDS-INPUT__HEIGHT);
+  padding: var(--IDS-INPUT__PADDING);
+  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT);
+}
 input.ids-time__input::-webkit-calendar-picker-indicator {
   opacity: 0;
   appearance: none;

package/themes/inera/inera.css

@@ -3371,6 +3371,10 @@ body.ids {
 /*******
 * A11Y
 ********/
+.ids-link:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
 .ids-link {
   font-family: var(--IDS-LINK__FONT-FAMILY);
   color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
@@ -3384,10 +3388,6 @@ body.ids {
   text-decoration: underline;
   position: relative;
 }
-.ids-link:focus {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
-}
 .ids-link:has(.ids-icon), .ids-link.ids-link--old-icon {
   text-decoration: none;
   display: inline-flex;
@@ -4462,10 +4462,6 @@ input:focus + .ids-checkbox input::before {
   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:disabled, .ids-input[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
@@ -4496,6 +4492,12 @@ input:focus + .ids-checkbox input::before {
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
+.ids-input {
+  width: 100% !important;
+  height: var(--IDS-INPUT__HEIGHT);
+  line-height: 1.5rem;
+  font-size: 1rem;
+}
 .ids-input.ids-input--search, .ids-input[type=search] {
   margin-top: 0;
   margin-bottom: 0;
@@ -4537,15 +4539,6 @@ input:focus + .ids-checkbox input::before {
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
   display: block;
-  height: var(--IDS-INPUT__HEIGHT);
-  cursor: pointer;
-  display: inline-block !important;
-  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT) !important;
-  text-align: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  border: var(--IDS-INPUT__BORDER);
-  width: 100% !important;
 }
 .ids-select:disabled, .ids-select[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
@@ -4572,6 +4565,17 @@ input:focus + .ids-checkbox input::before {
 .ids-select.ids-input--light.ids-input--invalid {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
+.ids-select {
+  height: var(--IDS-INPUT__HEIGHT);
+  cursor: pointer;
+  display: inline-block !important;
+  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT) !important;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: var(--IDS-INPUT__BORDER);
+  width: 100% !important;
+}
 .ids-select.ids-input--invalid, .ids-select[aria-invalid=true] {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR) !important;
   border: var(--IDS-FORM--INVALID__BORDER);
@@ -4648,8 +4652,6 @@ input:focus + .ids-checkbox input::before {
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
   display: block;
-  padding: var(--IDS-TEXTAREA__PADDING);
-  box-sizing: border-box;
 }
 .ids-textarea textarea:disabled, .ids-textarea textarea[readonly],
 .ids-textarea .ids-textarea__textarea:disabled,
@@ -4710,6 +4712,11 @@ input:focus + .ids-checkbox input::before {
 .ids-textarea .ids-textarea__textarea::-webkit-scrollbar-corner {
   background-color: transparent;
 }
+.ids-textarea textarea,
+.ids-textarea .ids-textarea__textarea {
+  padding: var(--IDS-TEXTAREA__PADDING);
+  box-sizing: border-box;
+}
 .ids-textarea textarea:focus,
 .ids-textarea .ids-textarea__textarea:focus {
   box-shadow: var(--IDS-INPUT__BOX-SHADOW);
@@ -4789,16 +4796,6 @@ input.ids-time__input {
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
   display: block;
-  cursor: pointer;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  display: inline-block;
-  box-sizing: border-box;
-  width: 100%;
-  height: var(--IDS-INPUT__HEIGHT);
-  padding: var(--IDS-INPUT__PADDING);
-  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT);
 }
 input.ids-time__input:disabled, input.ids-time__input[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
@@ -4825,6 +4822,18 @@ input.ids-time__input.ids-input--light:disabled, input.ids-time__input.ids-input
 input.ids-time__input.ids-input--light.ids-input--invalid {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
+input.ids-time__input {
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  display: inline-block;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--IDS-INPUT__HEIGHT);
+  padding: var(--IDS-INPUT__PADDING);
+  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT);
+}
 input.ids-time__input::-webkit-calendar-picker-indicator {
   opacity: 0;
   appearance: none;

package/themes/inera-admin/inera-admin.css

@@ -3371,6 +3371,10 @@ body.ids {
 /*******
 * A11Y
 ********/
+.ids-link:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
 .ids-link {
   font-family: var(--IDS-LINK__FONT-FAMILY);
   color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
@@ -3384,10 +3388,6 @@ body.ids {
   text-decoration: underline;
   position: relative;
 }
-.ids-link:focus {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
-}
 .ids-link:has(.ids-icon), .ids-link.ids-link--old-icon {
   text-decoration: none;
   display: inline-flex;
@@ -4462,10 +4462,6 @@ input:focus + .ids-checkbox input::before {
   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:disabled, .ids-input[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
@@ -4496,6 +4492,12 @@ input:focus + .ids-checkbox input::before {
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
+.ids-input {
+  width: 100% !important;
+  height: var(--IDS-INPUT__HEIGHT);
+  line-height: 1.5rem;
+  font-size: 1rem;
+}
 .ids-input.ids-input--search, .ids-input[type=search] {
   margin-top: 0;
   margin-bottom: 0;
@@ -4537,15 +4539,6 @@ input:focus + .ids-checkbox input::before {
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
   display: block;
-  height: var(--IDS-INPUT__HEIGHT);
-  cursor: pointer;
-  display: inline-block !important;
-  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT) !important;
-  text-align: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  border: var(--IDS-INPUT__BORDER);
-  width: 100% !important;
 }
 .ids-select:disabled, .ids-select[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
@@ -4572,6 +4565,17 @@ input:focus + .ids-checkbox input::before {
 .ids-select.ids-input--light.ids-input--invalid {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
+.ids-select {
+  height: var(--IDS-INPUT__HEIGHT);
+  cursor: pointer;
+  display: inline-block !important;
+  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT) !important;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: var(--IDS-INPUT__BORDER);
+  width: 100% !important;
+}
 .ids-select.ids-input--invalid, .ids-select[aria-invalid=true] {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR) !important;
   border: var(--IDS-FORM--INVALID__BORDER);
@@ -4648,8 +4652,6 @@ input:focus + .ids-checkbox input::before {
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
   display: block;
-  padding: var(--IDS-TEXTAREA__PADDING);
-  box-sizing: border-box;
 }
 .ids-textarea textarea:disabled, .ids-textarea textarea[readonly],
 .ids-textarea .ids-textarea__textarea:disabled,
@@ -4710,6 +4712,11 @@ input:focus + .ids-checkbox input::before {
 .ids-textarea .ids-textarea__textarea::-webkit-scrollbar-corner {
   background-color: transparent;
 }
+.ids-textarea textarea,
+.ids-textarea .ids-textarea__textarea {
+  padding: var(--IDS-TEXTAREA__PADDING);
+  box-sizing: border-box;
+}
 .ids-textarea textarea:focus,
 .ids-textarea .ids-textarea__textarea:focus {
   box-shadow: var(--IDS-INPUT__BOX-SHADOW);
@@ -4789,16 +4796,6 @@ input.ids-time__input {
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
   display: block;
-  cursor: pointer;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  display: inline-block;
-  box-sizing: border-box;
-  width: 100%;
-  height: var(--IDS-INPUT__HEIGHT);
-  padding: var(--IDS-INPUT__PADDING);
-  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT);
 }
 input.ids-time__input:disabled, input.ids-time__input[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
@@ -4825,6 +4822,18 @@ input.ids-time__input.ids-input--light:disabled, input.ids-time__input.ids-input
 input.ids-time__input.ids-input--light.ids-input--invalid {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
+input.ids-time__input {
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  display: inline-block;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--IDS-INPUT__HEIGHT);
+  padding: var(--IDS-INPUT__PADDING);
+  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT);
+}
 input.ids-time__input::-webkit-calendar-picker-indicator {
   opacity: 0;
   appearance: none;

package/tokens/themes/1177-admin-tokens.css

@@ -0,0 +1,300 @@
+.ids--1177-admin.ids--light,
+.ids--1177-admin.ids--dark {
+  --ids-palette-primary-30: #6a0032;
+  --ids-palette-primary-35: #a00b36;
+  --ids-palette-primary-40: #c12143;
+  --ids-palette-primary-60: #da254c;
+  --ids-palette-primary-90: #faeef0;
+  --ids-palette-secondary-95: #faf8f6;
+  --ids-palette-accent-30: #3b4266;
+  --ids-palette-accent-40: #396291;
+  --ids-palette-accent-50: #166ed4;
+  --ids-palette-accent-60: #79aeec;
+  --ids-palette-accent-90: #c6d2df;
+  --ids-palette-accent-95: #f1f1f5;
+  --ids-palette-neutral-10: #151515;
+  --ids-palette-neutral-15: #252525;
+  --ids-palette-neutral-20: #353535;
+  --ids-palette-neutral-40: #636466;
+  --ids-palette-neutral-50: #808285;
+  --ids-palette-neutral-90: #dadbdc;
+  --ids-palette-neutral-99: #f1f2f2;
+  --ids-palette-neutral-100: #ffffff;
+  --ids-palette-success-30: #395428;
+  --ids-palette-success-40: #419002;
+  --ids-palette-success-99: #eef8ee;
+  --ids-palette-attention-40: #ffc100;
+  --ids-palette-attention-95: #fff8e0;
+  --ids-palette-error-35: #a00b36;
+  --ids-palette-error-40: #c12143;
+  --ids-palette-error-60: #da254c;
+  --ids-palette-error-99: #faeef0;
+}
+
+.ids--1177-admin.ids--light {
+  --ids-input-height: 2.25rem;
+  --ids-input-padding-x: 1rem;
+  --ids-textarea-padding-x: 1rem;
+  --ids-select-height: 2.25rem;
+  --ids-select-padding-x: 1rem;
+  --ids-search-button-small-padding-x: 1.5rem;
+  --ids-search-button-small-padding-y: 0.5rem;
+  --ids-search-button-small-font-seize: 1rem;
+  --ids-search-button-small-line-height: 1.25rem;
+  --ids-font-family-primary: Open sans;
+  --ids-font-family-secondary: Inter;
+  --ids-color-surface-background-default: #ffffff;
+  --ids-color-surface-border-default: #808285;
+  --ids-color-surface-text-on-default: #353535;
+  --ids-color-surface-text-subtle-on-default: #636466;
+  --ids-color-surface-background-elevated-1: #ffffff;
+  --ids-color-surface-border-elevated-1: #dadbdc;
+  --ids-color-surface-text-on-elevated-1: #353535;
+  --ids-color-surface-text-subtle-on-elevated-1: #636466;
+  --ids-color-surface-background-elevated-1-hover: #ffffff;
+  --ids-color-surface-background-elevated-1-active: #ffffff;
+  --ids-color-surface-background-elevated-2: #ffffff;
+  --ids-color-surface-border-elevated-2: #dadbdc;
+  --ids-color-surface-text-on-elevated-2: #353535;
+  --ids-color-surface-background-alternative: #faf8f6;
+  --ids-color-surface-text-on-alternative: #353535;
+  --ids-color-surface-background-alternative-elevated-1: #faf8f6;
+  --ids-color-brand-background-primary: #396291;
+  --ids-color-brand-border-primary: #396291;
+  --ids-color-brand-text-primary: #396291;
+  --ids-color-brand-text-primary-subtle: #3b4266;
+  --ids-color-brand-text-on-primary: #ffffff;
+  --ids-color-brand-background-secondary: #faf8f6;
+  --ids-color-brand-text-secondary: #3b4266;
+  --ids-color-brand-text-on-secondary: #353535;
+  --ids-color-brand-region-logo: #353535;
+  --ids-color-navigation-background-default: #c12143;
+  --ids-color-navigation-border-default: #a00b36;
+  --ids-color-navigation-text-default: #a00b36;
+  --ids-color-navigation-icon-default: #c12143;
+  --ids-color-navigation-text-on-default: #ffffff;
+  --ids-color-navigation-background-hover: #6a0032;
+  --ids-color-navigation-border-hover: #6a0032;
+  --ids-color-navigation-text-hover: #6a0032;
+  --ids-color-navigation-text-on-hover: #ffffff;
+  --ids-color-navigation-background-active: #6a0032;
+  --ids-color-navigation-border-active: #6a0032;
+  --ids-color-navigation-text-active: #6a0032;
+  --ids-color-navigation-text-on-active: #ffffff;
+  --ids-color-navigation-text-on-secondary: #353535;
+  --ids-color-interactive-background-default: #396291;
+  --ids-color-interactive-border-default: #396291;
+  --ids-color-interactive-text-default: #396291;
+  --ids-color-interactive-text-on-default: #ffffff;
+  --ids-color-interactive-background-hover: #3b4266;
+  --ids-color-interactive-border-hover: #3b4266;
+  --ids-color-interactive-text-hover: #3b4266;
+  --ids-color-interactive-text-on-hover: #ffffff;
+  --ids-color-interactive-background-active: #3b4266;
+  --ids-color-interactive-border-active: #3b4266;
+  --ids-color-interactive-text-active: #3b4266;
+  --ids-color-interactive-text-on-active: #ffffff;
+  --ids-color-interactive-background-disabled: #ffffff;
+  --ids-color-interactive-border-disabled: #808285;
+  --ids-color-interactive-text-disabled: #636466;
+  --ids-color-interactive-text-on-disabled: #636466;
+  --ids-color-interactive-focus-outline: #636466;
+  --ids-color-interactive-focus-outline-on: #ffffff;
+  --ids-color-feedback-background-information: #f1f1f5;
+  --ids-color-feedback-border-information: #396291;
+  --ids-color-feedback-text-on-information: #353535;
+  --ids-color-feedback-text-information: #3b4266;
+  --ids-color-feedback-background-success: #eef8ee;
+  --ids-color-feedback-border-success: #419002;
+  --ids-color-feedback-text-on-success: #353535;
+  --ids-color-feedback-text-success: #395428;
+  --ids-color-feedback-background-attention: #fff8e0;
+  --ids-color-feedback-border-attention: #808285;
+  --ids-color-feedback-text-on-attention: #353535;
+  --ids-color-feedback-text-attention: #636466;
+  --ids-color-feedback-background-error: #faeef0;
+  --ids-color-feedback-border-error: #c12143;
+  --ids-color-feedback-text-on-error: #353535;
+  --ids-color-feedback-text-error: #a00b36;
+  --ids-color-feedback-background-notification: #c12143;
+  --ids-color-feedback-text-on-notification: #ffffff;
+  --ids-color-form-background-default: #f1f1f5;
+  --ids-color-form-border-default: #396291;
+  --ids-color-form-text-on-default: #353535;
+  --ids-color-form-placeholder-text-on-default: #636466;
+  --ids-color-form-background-light-default: #ffffff;
+  --ids-color-form-border-light-default: #396291;
+  --ids-color-form-text-on-light-default: #353535;
+  --ids-color-form-placeholder-text-on-light-default: #636466;
+  --ids-color-form-background-active: #f1f1f5;
+  --ids-color-form-border-active: #396291;
+  --ids-color-form-text-on-active: #353535;
+  --ids-color-form-placeholder-text-on-active: #636466;
+  --ids-color-form-background-light-active: #ffffff;
+  --ids-color-form-border-light-active: #396291;
+  --ids-color-form-text-on-light-active: #353535;
+  --ids-color-form-placeholder-text-on-light-active: #636466;
+  --ids-color-form-background-disabled: #f1f2f2;
+  --ids-color-form-border-disabled: #636466;
+  --ids-color-form-text-on-light-disabled: #636466;
+  --ids-color-form-placeholder-text-on-light-disabled: #636466;
+  --ids-color-form-background-light-disabled: #f1f2f2;
+  --ids-color-form-border-light-disabled: #636466;
+  --ids-color-form-text-on-disabled: #636466;
+  --ids-color-form-placeholder-text-on-disabled: #636466;
+  --ids-color-form-background-invalid: #faeef0;
+  --ids-color-form-border-invalid: #c12143;
+  --ids-color-form-text-on-invalid: #353535;
+  --ids-color-form-placeholder-text-on-invalid: #636466;
+  --ids-color-form-message-background-invalid: #ffffff;
+  --ids-color-form-message-border-invalid: #c12143;
+  --ids-color-form-message-text-on-invalid: #c12143;
+  --ids-color-form-background-light-invalid: #faeef0;
+  --ids-color-form-border-light-invalid: #c12143;
+  --ids-color-form-text-on-light-invalid: #353535;
+  --ids-color-form-placeholder-text-on-light-invalid: #636466;
+  --ids-color-heading-text-xxl: #353535;
+  --ids-color-heading-text-xl: #353535;
+  --ids-color-heading-text-l: #353535;
+  --ids-color-heading-text-m: #353535;
+  --ids-color-heading-text-s: #353535;
+  --ids-color-heading-text-xs: #353535;
+  --ids-border-radius-primary: 0.625rem;
+  --ids-border-radius-secondary: 0.3125rem;
+  --ids-border-width-general: 0.0625rem;
+  --ids-border-width-invalid: 0.125rem;
+}
+
+.ids--1177-admin.ids--dark {
+  --ids-input-height: 2.25rem;
+  --ids-input-padding-x: 1rem;
+  --ids-textarea-padding-x: 1rem;
+  --ids-select-height: 2.25rem;
+  --ids-select-padding-x: 1rem;
+  --ids-search-button-small-padding-x: 1.5rem;
+  --ids-search-button-small-padding-y: 0.5rem;
+  --ids-search-button-small-font-seize: 1rem;
+  --ids-search-button-small-line-height: 1.25rem;
+  --ids-font-family-primary: Open sans;
+  --ids-font-family-secondary: Inter;
+  --ids-color-surface-background-default: #151515;
+  --ids-color-surface-border-default: #808285;
+  --ids-color-surface-text-on-default: #ffffff;
+  --ids-color-surface-text-subtle-on-default: #f1f2f2;
+  --ids-color-surface-background-elevated-1: #252525;
+  --ids-color-surface-border-elevated-1: #808285;
+  --ids-color-surface-text-on-elevated-1: #ffffff;
+  --ids-color-surface-text-subtle-on-elevated-1: #f1f2f2;
+  --ids-color-surface-background-elevated-1-hover: #353535;
+  --ids-color-surface-background-elevated-1-active: #353535;
+  --ids-color-surface-background-elevated-2: #353535;
+  --ids-color-surface-border-elevated-2: #808285;
+  --ids-color-surface-text-on-elevated-2: #ffffff;
+  --ids-color-surface-background-alternative: #151515;
+  --ids-color-surface-text-on-alternative: #ffffff;
+  --ids-color-surface-background-alternative-elevated-1: #252525;
+  --ids-color-brand-background-primary: #353535;
+  --ids-color-brand-border-primary: #166ed4;
+  --ids-color-brand-text-primary: #166ed4;
+  --ids-color-brand-text-primary-subtle: #dadbdc;
+  --ids-color-brand-text-on-primary: #c6d2df;
+  --ids-color-brand-background-secondary: #252525;
+  --ids-color-brand-text-secondary: #c6d2df;
+  --ids-color-brand-text-on-secondary: #ffffff;
+  --ids-color-brand-region-logo: #ffffff;
+  --ids-color-navigation-background-default: #151515;
+  --ids-color-navigation-border-default: #faeef0;
+  --ids-color-navigation-text-default: #faeef0;
+  --ids-color-navigation-icon-default: #faeef0;
+  --ids-color-navigation-text-on-default: #faeef0;
+  --ids-color-navigation-background-hover: #da254c;
+  --ids-color-navigation-border-hover: #da254c;
+  --ids-color-navigation-text-hover: #ffffff;
+  --ids-color-navigation-text-on-hover: #faeef0;
+  --ids-color-navigation-background-active: #da254c;
+  --ids-color-navigation-border-active: #da254c;
+  --ids-color-navigation-text-active: #ffffff;
+  --ids-color-navigation-text-on-active: #faeef0;
+  --ids-color-navigation-text-on-secondary: #ffffff;
+  --ids-color-interactive-background-default: #79aeec;
+  --ids-color-interactive-border-default: #c6d2df;
+  --ids-color-interactive-text-default: #79aeec;
+  --ids-color-interactive-text-on-default: #151515;
+  --ids-color-interactive-background-hover: #ffffff;
+  --ids-color-interactive-border-hover: #ffffff;
+  --ids-color-interactive-text-hover: #ffffff;
+  --ids-color-interactive-text-on-hover: #3b4266;
+  --ids-color-interactive-background-active: #ffffff;
+  --ids-color-interactive-border-active: #ffffff;
+  --ids-color-interactive-text-active: #ffffff;
+  --ids-color-interactive-text-on-active: #3b4266;
+  --ids-color-interactive-background-disabled: #dadbdc;
+  --ids-color-interactive-border-disabled: #808285;
+  --ids-color-interactive-text-disabled: #dadbdc;
+  --ids-color-interactive-text-on-disabled: #636466;
+  --ids-color-interactive-focus-outline: #f1f2f2;
+  --ids-color-interactive-focus-outline-on: #353535;
+  --ids-color-feedback-background-information: #252525;
+  --ids-color-feedback-border-information: #166ed4;
+  --ids-color-feedback-text-on-information: #ffffff;
+  --ids-color-feedback-text-information: #166ed4;
+  --ids-color-feedback-background-success: #252525;
+  --ids-color-feedback-border-success: #419002;
+  --ids-color-feedback-text-on-success: #ffffff;
+  --ids-color-feedback-text-success: #419002;
+  --ids-color-feedback-background-attention: #252525;
+  --ids-color-feedback-border-attention: #ffc100;
+  --ids-color-feedback-text-on-attention: #ffffff;
+  --ids-color-feedback-text-attention: #ffc100;
+  --ids-color-feedback-background-error: #252525;
+  --ids-color-feedback-border-error: #c12143;
+  --ids-color-feedback-text-on-error: #ffffff;
+  --ids-color-feedback-text-error: #da254c;
+  --ids-color-feedback-background-notification: #da254c;
+  --ids-color-feedback-text-on-notification: #ffffff;
+  --ids-color-form-background-default: #151515;
+  --ids-color-form-border-default: #c6d2df;
+  --ids-color-form-text-on-default: #ffffff;
+  --ids-color-form-placeholder-text-on-default: #f1f2f2;
+  --ids-color-form-background-light-default: #151515;
+  --ids-color-form-border-light-default: #c6d2df;
+  --ids-color-form-text-on-light-default: #ffffff;
+  --ids-color-form-placeholder-text-on-light-default: #f1f2f2;
+  --ids-color-form-background-active: #151515;
+  --ids-color-form-border-active: #ffffff;
+  --ids-color-form-text-on-active: #ffffff;
+  --ids-color-form-placeholder-text-on-active: #f1f2f2;
+  --ids-color-form-background-light-active: #151515;
+  --ids-color-form-border-light-active: #ffffff;
+  --ids-color-form-text-on-light-active: #ffffff;
+  --ids-color-form-placeholder-text-on-light-active: #f1f2f2;
+  --ids-color-form-background-disabled: #151515;
+  --ids-color-form-border-disabled: #dadbdc;
+  --ids-color-form-text-on-light-disabled: #f1f2f2;
+  --ids-color-form-placeholder-text-on-light-disabled: #f1f2f2;
+  --ids-color-form-background-light-disabled: #151515;
+  --ids-color-form-border-light-disabled: #dadbdc;
+  --ids-color-form-text-on-disabled: #f1f2f2;
+  --ids-color-form-placeholder-text-on-disabled: #f1f2f2;
+  --ids-color-form-background-invalid: #151515;
+  --ids-color-form-border-invalid: #c12143;
+  --ids-color-form-text-on-invalid: #ffffff;
+  --ids-color-form-placeholder-text-on-invalid: #f1f2f2;
+  --ids-color-form-message-background-invalid: #353535;
+  --ids-color-form-message-border-invalid: #da254c;
+  --ids-color-form-message-text-on-invalid: #ffffff;
+  --ids-color-form-background-light-invalid: #151515;
+  --ids-color-form-border-light-invalid: #da254c;
+  --ids-color-form-text-on-light-invalid: #ffffff;
+  --ids-color-form-placeholder-text-on-light-invalid: #f1f2f2;
+  --ids-color-heading-text-xxl: #ffffff;
+  --ids-color-heading-text-xl: #ffffff;
+  --ids-color-heading-text-l: #ffffff;
+  --ids-color-heading-text-m: #ffffff;
+  --ids-color-heading-text-s: #ffffff;
+  --ids-color-heading-text-xs: #ffffff;
+  --ids-border-radius-primary: 0.625rem;
+  --ids-border-radius-secondary: 0.3125rem;
+  --ids-border-width-general: 0.125rem;
+  --ids-border-width-invalid: 0.125rem;
+}