@inera/ids-design 8.0.1 → 8.2.0

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

@@ -1,35 +1,49 @@
 /* Autogenerated by src/style-dictionary/build.js */
 .ids--1177-pro.ids--light, .ids--1177-pro.ids--dark {
---ids-palette-primary-30: #6a0032;
-  --ids-palette-primary-35: #a00b36;
+  
+	/*Base tokens*/
+
+  --ids-palette-primary-20: #6a0032;
+  --ids-palette-primary-30: #99173a;
   --ids-palette-primary-40: #c12143;
-  --ids-palette-primary-60: #da254c;
+  --ids-palette-primary-50: #e6375c;
+  --ids-palette-primary-60: #f55b7c;
+  --ids-palette-primary-70: #f88ba3;
   --ids-palette-primary-90: #faeef0;
   --ids-palette-secondary-95: #faf8f6;
   --ids-palette-accent-20: #273149;
   --ids-palette-accent-30: #3b4266;
   --ids-palette-accent-40: #396291;
-  --ids-palette-accent-50: #166ed4;
+  --ids-palette-accent-50: #5c97da;
   --ids-palette-accent-60: #79aeec;
+  --ids-palette-accent-70: #9ac0f2;
   --ids-palette-accent-90: #e0e7ef;
   --ids-palette-accent-95: #f8fafc;
-  --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-10: #16181a;
+  --ids-palette-neutral-20: #222529;
+  --ids-palette-neutral-30: #383d42;
+  --ids-palette-neutral-40: #4d545c;
+  --ids-palette-neutral-60: #7b848f;
+  --ids-palette-neutral-70: #a1a9b2;
+  --ids-palette-neutral-90: #cfd7dd;
+  --ids-palette-neutral-95: #edf1f5;
+  --ids-palette-neutral-99: #f7f9fc;
   --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: var(--ids-palette-primary-35);
+  --ids-layout-content-max-width: 120rem;
+  --ids-layout-text-max-width: 40rem;
+  --ids-palette-error-35: var(--ids-palette-primary-30);
   --ids-palette-error-40: var(--ids-palette-primary-40);
   --ids-palette-error-60: var(--ids-palette-primary-60);
-  --ids-palette-error-99: var(--ids-palette-primary-90);--ids-search-button-small-font-seize: 1.125rem;
+  --ids-palette-error-99: var(--ids-palette-primary-90);
+  
+	/*Theme tokens*/
+
+  --ids-search-button-small-font-seize: 1.125rem;
   --ids-search-button-small-line-height: 1.5rem;
   --ids-input-height: var(--ids-48);
   --ids-input-padding-x: var(--ids-20);
@@ -38,89 +52,125 @@
   --ids-select-padding-x: var(--ids-20);
   --ids-search-button-small-padding-x: var(--ids-28);
   --ids-search-button-small-padding-y: var(--ids-12);
-  --ids-color-light-background-primary: var(--ids-palette-accent-40);
-  --ids-color-light-border-primary: var(--ids-palette-accent-40);
-  --ids-color-light-text-primary: var(--ids-palette-accent-40);
-  --ids-color-light-text-primary-subtle: var(--ids-palette-accent-30);
-  --ids-color-light-text-on-primary: var(--ids-palette-neutral-100);
-  --ids-color-light-background-secondary: var(--ids-palette-secondary-95);
-  --ids-color-light-text-secondary: var(--ids-palette-accent-30);
-  --ids-color-light-text-on-secondary: var(--ids-palette-neutral-20);
-  --ids-color-light-region-logo: var(--ids-palette-neutral-20);
-  --ids-color-light-text-heading-m-xxl: var(--ids-palette-neutral-20);
-  --ids-color-dark-background-primary: var(--ids-palette-neutral-20);
-  --ids-color-dark-border-primary: var(--ids-palette-accent-50);
-  --ids-color-dark-text-primary: var(--ids-palette-accent-50);
-  --ids-color-dark-text-primary-subtle: var(--ids-palette-neutral-90);
-  --ids-color-dark-text-on-primary: var(--ids-palette-accent-90);
-  --ids-color-dark-background-secondary: var(--ids-palette-neutral-15);
-  --ids-color-dark-text-secondary: var(--ids-palette-accent-90);
-  --ids-color-dark-text-on-secondary: var(--ids-palette-neutral-100);
-  --ids-color-dark-region-logo: var(--ids-palette-neutral-100);
+  --ids-color-light-brand-background-primary: var(--ids-palette-accent-40);
+  --ids-color-light-brand-border-primary: var(--ids-palette-accent-40);
+  --ids-color-light-brand-text-primary: var(--ids-palette-accent-40);
+  --ids-color-light-brand-text-primary-subtle: var(--ids-palette-accent-30);
+  --ids-color-light-brand-text-on-primary: var(--ids-palette-neutral-100);
+  --ids-color-light-brand-background-secondary: var(--ids-palette-secondary-95);
+  --ids-color-light-brand-text-secondary: var(--ids-palette-accent-30);
+  --ids-color-light-brand-text-on-secondary: var(--ids-palette-neutral-30);
+  --ids-color-light-navigation-background-default: var(--ids-palette-accent-40);
+  --ids-color-light-navigation-border-default: var(--ids-palette-accent-40);
+  --ids-color-light-navigation-text-default: var(--ids-palette-accent-40);
+  --ids-color-light-navigation-icon-default: var(--ids-palette-accent-40);
+  --ids-color-light-navigation-text-on-default: var(--ids-palette-neutral-100);
+  --ids-color-light-navigation-background-hover: var(--ids-palette-accent-30);
+  --ids-color-light-navigation-border-hover: var(--ids-palette-accent-30);
+  --ids-color-light-navigation-text-hover: var(--ids-palette-accent-30);
+  --ids-color-light-navigation-text-on-hover: var(--ids-palette-neutral-100);
+  --ids-color-light-navigation-background-active: var(--ids-palette-accent-20);
+  --ids-color-light-navigation-border-active: var(--ids-palette-accent-20);
+  --ids-color-light-navigation-text-active: var(--ids-palette-accent-20);
+  --ids-color-light-navigation-text-on-active: var(--ids-palette-neutral-100);
+  --ids-color-light-heading-text-m-xxl: var(--ids-palette-neutral-20);
+  --ids-color-dark-brand-background-primary: var(--ids-palette-neutral-30);
+  --ids-color-dark-brand-border-primary: var(--ids-palette-accent-50);
+  --ids-color-dark-brand-text-primary: var(--ids-palette-accent-50);
+  --ids-color-dark-brand-text-primary-subtle: var(--ids-palette-neutral-90);
+  --ids-color-dark-brand-text-on-primary: var(--ids-palette-accent-90);
+  --ids-color-dark-brand-background-secondary: var(--ids-palette-neutral-20);
+  --ids-color-dark-brand-text-secondary: var(--ids-palette-accent-90);
+  --ids-color-dark-brand-text-on-secondary: var(--ids-palette-neutral-100);
+  --ids-color-dark-navigation-background-default: var(--ids-palette-neutral-30);
+  --ids-color-dark-navigation-border-default: var(--ids-palette-accent-70);
+  --ids-color-dark-navigation-text-default: var(--ids-palette-neutral-100);
+  --ids-color-dark-navigation-icon-default: var(--ids-palette-neutral-100);
+  --ids-color-dark-navigation-text-on-default: var(--ids-palette-neutral-100);
+  --ids-color-dark-navigation-background-hover: var(--ids-palette-accent-60);
+  --ids-color-dark-navigation-border-hover: var(--ids-palette-accent-60);
+  --ids-color-dark-navigation-text-hover: var(--ids-palette-neutral-100);
+  --ids-color-dark-navigation-text-on-hover: var(--ids-palette-neutral-30);
+  --ids-color-dark-navigation-background-active: var(--ids-palette-accent-50);
+  --ids-color-dark-navigation-border-active: var(--ids-palette-accent-50);
+  --ids-color-dark-navigation-text-active: var(--ids-palette-neutral-100);
+  --ids-color-dark-navigation-text-on-active: var(--ids-palette-neutral-30);
 }
+
+	
+	/*Light tokens*/
 .ids--1177-pro.ids--light {
---ids-font-family-primary: Open sans;
+	--ids-font-family-primary: Open sans;
   --ids-font-family-secondary: Inter;
-  --ids-color-surface-shadow-elevated-1: #000000;
-  --ids-color-surface-shadow-elevated-2: #000000;
+  --ids-font-weight-heading-xxl: 700;
+  --ids-font-weight-heading-xl: 700;
+  --ids-font-weight-heading-l: 700;
+  --ids-font-weight-heading-m: 700;
+  --ids-font-weight-heading-s: 700;
+  --ids-font-weight-heading-xs: 700;
+  --ids-font-weight-preamble: 300;
+  --ids-font-weight-body-text: 400;
+  --ids-font-weight-small-text: 400;
+  --ids-font-weight-button: 600;
+  --ids-font-weight-icon-button: 400;
   --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-shadow-position-y-elevated-1-effect-1: 1.875rem;
-  --ids-shadow-position-y-elevated-1-effect-2: 1.0625rem;
-  --ids-shadow-position-y-elevated-1-effect-3: 0.4375rem;
-  --ids-shadow-position-y-elevated-1-effect-4: 0.125rem;
-  --ids-shadow-position-y-elevated-2-effect-1: 3.875rem;
-  --ids-shadow-position-y-elevated-2-effect-2: 2.1875rem;
-  --ids-shadow-position-y-elevated-2-effect-3: 1rem;
-  --ids-shadow-position-y-elevated-2-effect-4: 0.25rem;
-  --ids-shadow-blur-elevated-1-effect-1: 0.75rem;
-  --ids-shadow-blur-elevated-1-effect-2: 0.625rem;
-  --ids-shadow-blur-elevated-1-effect-3: 0.4375rem;
-  --ids-shadow-blur-elevated-1-effect-4: 0.25rem;
-  --ids-shadow-blur-elevated-2-effect-1: 1.5625rem;
-  --ids-shadow-blur-elevated-2-effect-2: 1.3125rem;
-  --ids-shadow-blur-elevated-2-effect-3: 1rem;
-  --ids-shadow-blur-elevated-2-effect-4: 0.5625rem;
-  --ids-shadow-opacity-elevated-1-effect-1: 0.125rem;
-  --ids-shadow-opacity-elevated-1-effect-2: 0.375rem;
-  --ids-shadow-opacity-elevated-1-effect-3: 0.625rem;
-  --ids-shadow-opacity-elevated-1-effect-4: 0.75rem;
-  --ids-shadow-opacity-elevated-2-effect-1: 0.125rem;
-  --ids-shadow-opacity-elevated-2-effect-2: 0.4375rem;
-  --ids-shadow-opacity-elevated-2-effect-3: 0.75rem;
-  --ids-shadow-opacity-elevated-2-effect-4: 0.875rem;
+  --ids-box-shadow-position-x-elevated-2-left-effect-1: -5.75rem;
+  --ids-box-shadow-position-x-elevated-2-left-effect-2: -3.75rem;
+  --ids-box-shadow-position-x-elevated-2-left-effect-3: -2.125rem;
+  --ids-box-shadow-position-x-elevated-2-left-effect-4: -1rem;
+  --ids-box-shadow-position-x-elevated-2-right-effect-1: 3.75rem;
+  --ids-box-shadow-position-x-elevated-2-right-effect-2: 2.125rem;
+  --ids-box-shadow-position-x-elevated-2-right-effect-3: 1rem;
+  --ids-box-shadow-position-x-elevated-2-right-effect-4: 0.25rem;
+  --ids-box-shadow-position-y-elevated-1-effect-1: 1.875rem;
+  --ids-box-shadow-position-y-elevated-1-effect-2: 1rem;
+  --ids-box-shadow-position-y-elevated-1-effect-3: 0.375rem;
+  --ids-box-shadow-position-y-elevated-1-effect-4: 0.125rem;
+  --ids-box-shadow-position-y-elevated-2-effect-1: 3.875rem;
+  --ids-box-shadow-position-y-elevated-2-effect-2: 2.25rem;
+  --ids-box-shadow-position-y-elevated-2-effect-3: 1rem;
+  --ids-box-shadow-position-y-elevated-2-effect-4: 0.25rem;
+  --ids-box-shadow-blur-elevated-1-effect-1: 0.75rem;
+  --ids-box-shadow-blur-elevated-1-effect-2: 0.625rem;
+  --ids-box-shadow-blur-elevated-1-effect-3: 0.375rem;
+  --ids-box-shadow-blur-elevated-1-effect-4: 0.25rem;
+  --ids-box-shadow-blur-elevated-2-effect-1: 1.5rem;
+  --ids-box-shadow-blur-elevated-2-effect-2: 1.25rem;
+  --ids-box-shadow-blur-elevated-2-effect-3: 1rem;
+  --ids-box-shadow-blur-elevated-2-effect-4: 0.5rem;
+  --ids-box-shadow-opacity-elevated-1-effect-1: 0.125rem;
+  --ids-box-shadow-opacity-elevated-1-effect-2: 0.375rem;
+  --ids-box-shadow-opacity-elevated-1-effect-3: 0.625rem;
+  --ids-box-shadow-opacity-elevated-1-effect-4: 0.75rem;
+  --ids-box-shadow-opacity-elevated-2-effect-1: 0.125rem;
+  --ids-box-shadow-opacity-elevated-2-effect-2: 0.375rem;
+  --ids-box-shadow-opacity-elevated-2-effect-3: 0.75rem;
+  --ids-box-shadow-opacity-elevated-2-effect-4: 0.875rem;
+  --ids-font-family-heading: var(--ids-font-family-secondary);
+  --ids-font-family-preamble: var(--ids-font-family-primary);
+  --ids-font-family-body-text: var(--ids-font-family-primary);
+  --ids-font-family-small-text: var(--ids-font-family-primary);
+  --ids-font-family-button: var(--ids-font-family-secondary);
   --ids-color-surface-background-default: var(--ids-palette-neutral-100);
-  --ids-color-surface-border-default: var(--ids-palette-neutral-50);
-  --ids-color-surface-text-on-default: var(--ids-palette-neutral-20);
+  --ids-color-surface-border-default: var(--ids-palette-neutral-60);
+  --ids-color-surface-text-on-default: var(--ids-palette-neutral-30);
   --ids-color-surface-text-subtle-on-default: var(--ids-palette-neutral-40);
   --ids-color-surface-background-elevated-1: var(--ids-palette-neutral-100);
   --ids-color-surface-border-elevated-1: var(--ids-palette-neutral-90);
-  --ids-color-surface-text-on-elevated-1: var(--ids-palette-neutral-20);
+  --ids-color-surface-text-on-elevated-1: var(--ids-palette-neutral-30);
   --ids-color-surface-text-subtle-on-elevated-1: var(--ids-palette-neutral-40);
   --ids-color-surface-background-elevated-1-hover: var(--ids-palette-neutral-100);
   --ids-color-surface-background-elevated-1-active: var(--ids-palette-neutral-100);
   --ids-color-surface-background-elevated-2: var(--ids-palette-neutral-100);
   --ids-color-surface-border-elevated-2: var(--ids-palette-neutral-90);
-  --ids-color-surface-text-on-elevated-2: var(--ids-palette-neutral-20);
+  --ids-color-surface-text-on-elevated-2: var(--ids-palette-neutral-30);
   --ids-color-surface-background-alternative: var(--ids-palette-secondary-95);
-  --ids-color-surface-text-on-alternative: var(--ids-palette-neutral-20);
+  --ids-color-surface-text-on-alternative: var(--ids-palette-neutral-30);
   --ids-color-surface-background-alternative-elevated-1: var(--ids-palette-secondary-95);
-  --ids-color-navigation-background-default: var(--ids-palette-primary-40);
-  --ids-color-navigation-border-default: var(--ids-palette-primary-35);
-  --ids-color-navigation-text-default: var(--ids-palette-primary-35);
-  --ids-color-navigation-icon-default: var(--ids-palette-primary-40);
-  --ids-color-navigation-text-on-default: var(--ids-palette-neutral-100);
-  --ids-color-navigation-background-hover: var(--ids-palette-primary-30);
-  --ids-color-navigation-border-hover: var(--ids-palette-primary-30);
-  --ids-color-navigation-text-hover: var(--ids-palette-primary-30);
-  --ids-color-navigation-text-on-hover: var(--ids-palette-neutral-100);
-  --ids-color-navigation-background-active: var(--ids-palette-primary-30);
-  --ids-color-navigation-border-active: var(--ids-palette-primary-30);
-  --ids-color-navigation-text-active: var(--ids-palette-primary-30);
-  --ids-color-navigation-text-on-active: var(--ids-palette-neutral-100);
-  --ids-color-navigation-text-on-secondary: var(--ids-palette-neutral-20);
+  --ids-color-navigation-text-on-secondary: var(--ids-palette-neutral-30);
   --ids-color-interactive-background-default: var(--ids-palette-accent-40);
   --ids-color-interactive-border-default: var(--ids-palette-accent-40);
   --ids-color-interactive-text-default: var(--ids-palette-accent-40);
@@ -132,187 +182,212 @@
   --ids-color-interactive-background-active: var(--ids-palette-accent-20);
   --ids-color-interactive-border-active: var(--ids-palette-accent-20);
   --ids-color-interactive-text-active: var(--ids-palette-accent-20);
+  --ids-color-interactive-toggle-marker-disabled: var(--ids-palette-neutral-90);
   --ids-color-interactive-text-on-active: var(--ids-palette-neutral-100);
-  --ids-color-interactive-background-disabled: var(--ids-palette-neutral-100);
-  --ids-color-interactive-border-disabled: var(--ids-palette-neutral-50);
-  --ids-color-interactive-text-disabled: var(--ids-palette-neutral-40);
-  --ids-color-interactive-text-on-disabled: var(--ids-palette-neutral-40);
+  --ids-color-interactive-background-disabled: var(--ids-palette-neutral-95);
+  --ids-color-interactive-border-disabled: var(--ids-palette-neutral-95);
+  --ids-color-interactive-text-disabled: var(--ids-palette-neutral-70);
+  --ids-color-interactive-text-on-disabled: var(--ids-palette-neutral-70);
   --ids-color-interactive-focus-outline: var(--ids-palette-neutral-40);
   --ids-color-interactive-focus-outline-on: var(--ids-palette-neutral-100);
   --ids-color-feedback-background-information: var(--ids-palette-accent-95);
   --ids-color-feedback-border-information: var(--ids-palette-accent-40);
-  --ids-color-feedback-text-on-information: var(--ids-palette-neutral-20);
+  --ids-color-feedback-text-on-information: var(--ids-palette-neutral-30);
   --ids-color-feedback-text-information: var(--ids-palette-accent-30);
   --ids-color-feedback-background-success: var(--ids-palette-success-99);
   --ids-color-feedback-border-success: var(--ids-palette-success-40);
-  --ids-color-feedback-text-on-success: var(--ids-palette-neutral-20);
+  --ids-color-feedback-text-on-success: var(--ids-palette-neutral-30);
   --ids-color-feedback-text-success: var(--ids-palette-success-30);
   --ids-color-feedback-background-attention: var(--ids-palette-attention-95);
-  --ids-color-feedback-border-attention: var(--ids-palette-neutral-50);
-  --ids-color-feedback-text-on-attention: var(--ids-palette-neutral-20);
+  --ids-color-feedback-border-attention: var(--ids-palette-neutral-60);
+  --ids-color-feedback-text-on-attention: var(--ids-palette-neutral-30);
   --ids-color-feedback-text-attention: var(--ids-palette-neutral-40);
   --ids-color-feedback-background-error: var(--ids-palette-primary-90);
-  --ids-color-feedback-text-on-error: var(--ids-palette-neutral-20);
+  --ids-color-feedback-text-on-error: var(--ids-palette-neutral-30);
   --ids-color-feedback-background-notification: var(--ids-palette-primary-40);
   --ids-color-feedback-text-on-notification: var(--ids-palette-neutral-100);
   --ids-color-form-background-default: var(--ids-palette-accent-95);
   --ids-color-form-border-default: var(--ids-palette-accent-40);
-  --ids-color-form-text-on-default: var(--ids-palette-neutral-20);
+  --ids-color-form-text-on-default: var(--ids-palette-neutral-30);
   --ids-color-form-placeholder-text-on-default: var(--ids-palette-neutral-40);
   --ids-color-form-background-light-default: var(--ids-palette-neutral-100);
   --ids-color-form-border-light-default: var(--ids-palette-accent-40);
-  --ids-color-form-text-on-light-default: var(--ids-palette-neutral-20);
+  --ids-color-form-text-on-light-default: var(--ids-palette-neutral-30);
   --ids-color-form-placeholder-text-on-light-default: var(--ids-palette-neutral-40);
   --ids-color-form-background-hover: var(--ids-palette-accent-90);
   --ids-color-form-border-hover: var(--ids-palette-accent-30);
-  --ids-color-form-text-on-hover: var(--ids-palette-neutral-20);
+  --ids-color-form-text-on-hover: var(--ids-palette-neutral-30);
   --ids-color-form-placeholder-text-on-hover: var(--ids-palette-neutral-40);
-  --ids-color-form-background-light-hover: var(--ids-palette-neutral-100);
+  --ids-color-form-background-light-hover: var(--ids-palette-accent-95);
   --ids-color-form-border-light-hover: var(--ids-palette-accent-30);
-  --ids-color-form-text-on-light-hover: var(--ids-palette-neutral-20);
+  --ids-color-form-text-on-light-hover: var(--ids-palette-neutral-30);
   --ids-color-form-placeholder-text-on-light-hover: var(--ids-palette-neutral-40);
   --ids-color-form-background-active: var(--ids-palette-accent-95);
-  --ids-color-form-border-active: var(--ids-palette-accent-40);
-  --ids-color-form-text-on-active: var(--ids-palette-neutral-20);
+  --ids-color-form-border-active: var(--ids-palette-accent-20);
+  --ids-color-form-text-on-active: var(--ids-palette-neutral-30);
   --ids-color-form-placeholder-text-on-active: var(--ids-palette-neutral-40);
   --ids-color-form-background-light-active: var(--ids-palette-neutral-100);
-  --ids-color-form-border-light-active: var(--ids-palette-accent-40);
-  --ids-color-form-text-on-light-active: var(--ids-palette-neutral-20);
+  --ids-color-form-border-light-active: var(--ids-palette-accent-20);
+  --ids-color-form-text-on-light-active: var(--ids-palette-neutral-30);
   --ids-color-form-placeholder-text-on-light-active: var(--ids-palette-neutral-40);
-  --ids-color-form-background-disabled: var(--ids-palette-neutral-99);
-  --ids-color-form-border-disabled: var(--ids-palette-neutral-40);
-  --ids-color-form-text-on-light-disabled: var(--ids-palette-neutral-40);
-  --ids-color-form-placeholder-text-on-light-disabled: var(--ids-palette-neutral-40);
-  --ids-color-form-background-light-disabled: var(--ids-palette-neutral-99);
-  --ids-color-form-border-light-disabled: var(--ids-palette-neutral-40);
-  --ids-color-form-text-on-disabled: var(--ids-palette-neutral-40);
-  --ids-color-form-placeholder-text-on-disabled: var(--ids-palette-neutral-40);
+  --ids-color-form-background-disabled: var(--ids-palette-neutral-95);
+  --ids-color-form-border-disabled: var(--ids-palette-neutral-95);
+  --ids-color-form-text-on-light-disabled: var(--ids-palette-neutral-70);
+  --ids-color-form-placeholder-text-on-light-disabled: var(--ids-palette-neutral-70);
+  --ids-color-form-background-light-disabled: var(--ids-palette-neutral-95);
+  --ids-color-form-border-light-disabled: var(--ids-palette-neutral-95);
+  --ids-color-form-text-on-disabled: var(--ids-palette-neutral-70);
+  --ids-color-form-placeholder-text-on-disabled: var(--ids-palette-neutral-70);
   --ids-color-form-background-invalid: var(--ids-palette-primary-90);
-  --ids-color-form-text-on-invalid: var(--ids-palette-neutral-20);
+  --ids-color-form-text-on-invalid: var(--ids-palette-neutral-30);
   --ids-color-form-placeholder-text-on-invalid: var(--ids-palette-neutral-40);
   --ids-color-form-message-background-invalid: var(--ids-palette-neutral-100);
   --ids-color-form-background-light-invalid: var(--ids-palette-primary-90);
-  --ids-color-form-text-on-light-invalid: var(--ids-palette-neutral-20);
+  --ids-color-form-text-on-light-invalid: var(--ids-palette-neutral-30);
   --ids-color-form-placeholder-text-on-light-invalid: var(--ids-palette-neutral-40);
-  --ids-color-brand-background-primary: var(--ids-color-light-background-primary);
-  --ids-color-brand-border-primary: var(--ids-color-light-border-primary);
-  --ids-color-brand-text-primary: var(--ids-color-light-text-primary);
-  --ids-color-brand-text-primary-subtle: var(--ids-color-light-text-primary-subtle);
-  --ids-color-brand-text-on-primary: var(--ids-color-light-text-on-primary);
-  --ids-color-brand-background-secondary: var(--ids-color-light-background-secondary);
-  --ids-color-brand-text-secondary: var(--ids-color-light-text-secondary);
-  --ids-color-brand-text-on-secondary: var(--ids-color-light-text-on-secondary);
-  --ids-color-brand-region-logo: var(--ids-color-light-region-logo);
+  --ids-color-heading-text-m: var(--ids-palette-neutral-20);
+  --ids-color-heading-text-s: var(--ids-palette-neutral-20);
+  --ids-color-heading-text-xs: var(--ids-palette-neutral-20);
+  --ids-color-brand-background-primary: var(--ids-color-light-brand-background-primary);
+  --ids-color-brand-border-primary: var(--ids-color-light-brand-border-primary);
+  --ids-color-brand-text-primary: var(--ids-color-light-brand-text-primary);
+  --ids-color-brand-text-primary-subtle: var(--ids-color-light-brand-text-primary-subtle);
+  --ids-color-brand-text-on-primary: var(--ids-color-light-brand-text-on-primary);
+  --ids-color-brand-background-secondary: var(--ids-color-light-brand-background-secondary);
+  --ids-color-brand-text-secondary: var(--ids-color-light-brand-text-secondary);
+  --ids-color-brand-text-on-secondary: var(--ids-color-light-brand-text-on-secondary);
+  --ids-color-navigation-background-default: var(--ids-color-light-navigation-background-default);
+  --ids-color-navigation-border-default: var(--ids-color-light-navigation-border-default);
+  --ids-color-navigation-text-default: var(--ids-color-light-navigation-text-default);
+  --ids-color-navigation-icon-default: var(--ids-color-light-navigation-icon-default);
+  --ids-color-navigation-text-on-default: var(--ids-color-light-navigation-text-on-default);
+  --ids-color-navigation-background-hover: var(--ids-color-light-navigation-background-hover);
+  --ids-color-navigation-border-hover: var(--ids-color-light-navigation-border-hover);
+  --ids-color-navigation-text-hover: var(--ids-color-light-navigation-text-hover);
+  --ids-color-navigation-text-on-hover: var(--ids-color-light-navigation-text-on-hover);
+  --ids-color-navigation-background-active: var(--ids-color-light-navigation-background-active);
+  --ids-color-navigation-border-active: var(--ids-color-light-navigation-border-active);
+  --ids-color-navigation-text-active: var(--ids-color-light-navigation-text-active);
+  --ids-color-navigation-text-on-active: var(--ids-color-light-navigation-text-on-active);
   --ids-color-feedback-border-error: var(--ids-palette-error-40);
   --ids-color-feedback-text-error: var(--ids-palette-error-35);
   --ids-color-form-border-invalid: var(--ids-palette-error-40);
   --ids-color-form-message-border-invalid: var(--ids-palette-error-40);
   --ids-color-form-message-text-on-invalid: var(--ids-palette-error-40);
   --ids-color-form-border-light-invalid: var(--ids-palette-error-40);
-  --ids-color-heading-text-xxl: var(--ids-color-light-text-heading-m-xxl);
-  --ids-color-heading-text-xl: var(--ids-color-light-text-heading-m-xxl);
-  --ids-color-heading-text-l: var(--ids-color-light-text-heading-m-xxl);
-  --ids-color-heading-text-m: var(--ids-color-light-text-heading-m-xxl);
-  --ids-color-heading-text-s: var(--ids-color-surface-text-on-default);
-  --ids-color-heading-text-xs: var(--ids-color-surface-text-on-default);
+  --ids-color-heading-text-xxl: var(--ids-color-light-heading-text-m-xxl);
+  --ids-color-heading-text-xl: var(--ids-color-light-heading-text-m-xxl);
+  --ids-color-heading-text-l: var(--ids-color-light-heading-text-m-xxl);
 }
 
+	
+	/*Dark tokens*/
 .ids--1177-pro.ids--dark {
---ids-font-family-primary: Open sans;
+	--ids-font-family-primary: Open sans;
   --ids-font-family-secondary: Inter;
-  --ids-color-surface-shadow-elevated-1: #ffffff;
-  --ids-color-surface-shadow-elevated-2: #ffffff;
+  --ids-font-weight-heading-xxl: 700;
+  --ids-font-weight-heading-xl: 700;
+  --ids-font-weight-heading-l: 700;
+  --ids-font-weight-heading-m: 700;
+  --ids-font-weight-heading-s: 700;
+  --ids-font-weight-heading-xs: 700;
+  --ids-font-weight-preamble: 300;
+  --ids-font-weight-body-text: 400;
+  --ids-font-weight-small-text: 400;
+  --ids-font-weight-button: 600;
+  --ids-font-weight-icon-button: 400;
   --ids-border-radius-primary: 0.625rem;
   --ids-border-radius-secondary: 0.3125rem;
   --ids-border-width-general: 0.125rem;
   --ids-border-width-invalid: 0.125rem;
-  --ids-shadow-position-y-elevated-1-effect-1: 1.875rem;
-  --ids-shadow-position-y-elevated-1-effect-2: 1.0625rem;
-  --ids-shadow-position-y-elevated-1-effect-3: 0.4375rem;
-  --ids-shadow-position-y-elevated-1-effect-4: 0.125rem;
-  --ids-shadow-position-y-elevated-2-effect-1: 3.875rem;
-  --ids-shadow-position-y-elevated-2-effect-2: 2.1875rem;
-  --ids-shadow-position-y-elevated-2-effect-3: 1rem;
-  --ids-shadow-position-y-elevated-2-effect-4: 0.25rem;
-  --ids-shadow-blur-elevated-1-effect-1: 0.75rem;
-  --ids-shadow-blur-elevated-1-effect-2: 0.625rem;
-  --ids-shadow-blur-elevated-1-effect-3: 0.4375rem;
-  --ids-shadow-blur-elevated-1-effect-4: 0.25rem;
-  --ids-shadow-blur-elevated-2-effect-1: 1.5625rem;
-  --ids-shadow-blur-elevated-2-effect-2: 1.3125rem;
-  --ids-shadow-blur-elevated-2-effect-3: 1rem;
-  --ids-shadow-blur-elevated-2-effect-4: 0.5625rem;
-  --ids-shadow-opacity-elevated-1-effect-1: 0.125rem;
-  --ids-shadow-opacity-elevated-1-effect-2: 0.375rem;
-  --ids-shadow-opacity-elevated-1-effect-3: 0.625rem;
-  --ids-shadow-opacity-elevated-1-effect-4: 0.75rem;
-  --ids-shadow-opacity-elevated-2-effect-1: 0.125rem;
-  --ids-shadow-opacity-elevated-2-effect-2: 0.4375rem;
-  --ids-shadow-opacity-elevated-2-effect-3: 0.75rem;
-  --ids-shadow-opacity-elevated-2-effect-4: 0.875rem;
+  --ids-box-shadow-position-x-elevated-2-left-effect-1: -5.75rem;
+  --ids-box-shadow-position-x-elevated-2-left-effect-2: -3.75rem;
+  --ids-box-shadow-position-x-elevated-2-left-effect-3: -2.125rem;
+  --ids-box-shadow-position-x-elevated-2-left-effect-4: -1rem;
+  --ids-box-shadow-position-x-elevated-2-right-effect-1: 3.75rem;
+  --ids-box-shadow-position-x-elevated-2-right-effect-2: 2.125rem;
+  --ids-box-shadow-position-x-elevated-2-right-effect-3: 1rem;
+  --ids-box-shadow-position-x-elevated-2-right-effect-4: 0.25rem;
+  --ids-box-shadow-position-y-elevated-1-effect-1: 1.875rem;
+  --ids-box-shadow-position-y-elevated-1-effect-2: 1rem;
+  --ids-box-shadow-position-y-elevated-1-effect-3: 0.375rem;
+  --ids-box-shadow-position-y-elevated-1-effect-4: 0.125rem;
+  --ids-box-shadow-position-y-elevated-2-effect-1: 3.875rem;
+  --ids-box-shadow-position-y-elevated-2-effect-2: 2.25rem;
+  --ids-box-shadow-position-y-elevated-2-effect-3: 1rem;
+  --ids-box-shadow-position-y-elevated-2-effect-4: 0.25rem;
+  --ids-box-shadow-blur-elevated-1-effect-1: 0.75rem;
+  --ids-box-shadow-blur-elevated-1-effect-2: 0.625rem;
+  --ids-box-shadow-blur-elevated-1-effect-3: 0.375rem;
+  --ids-box-shadow-blur-elevated-1-effect-4: 0.25rem;
+  --ids-box-shadow-blur-elevated-2-effect-1: 1.5rem;
+  --ids-box-shadow-blur-elevated-2-effect-2: 1.25rem;
+  --ids-box-shadow-blur-elevated-2-effect-3: 1rem;
+  --ids-box-shadow-blur-elevated-2-effect-4: 0.5rem;
+  --ids-box-shadow-opacity-elevated-1-effect-1: 0.75rem;
+  --ids-box-shadow-opacity-elevated-1-effect-2: 1rem;
+  --ids-box-shadow-opacity-elevated-1-effect-3: 1.25rem;
+  --ids-box-shadow-opacity-elevated-1-effect-4: 1.375rem;
+  --ids-box-shadow-opacity-elevated-2-effect-1: 0.75rem;
+  --ids-box-shadow-opacity-elevated-2-effect-2: 1rem;
+  --ids-box-shadow-opacity-elevated-2-effect-3: 1.375rem;
+  --ids-box-shadow-opacity-elevated-2-effect-4: 1.5rem;
+  --ids-font-family-heading: var(--ids-font-family-secondary);
+  --ids-font-family-preamble: var(--ids-font-family-primary);
+  --ids-font-family-body-text: var(--ids-font-family-primary);
+  --ids-font-family-small-text: var(--ids-font-family-primary);
+  --ids-font-family-button: var(--ids-font-family-secondary);
   --ids-color-surface-background-default: var(--ids-palette-neutral-10);
-  --ids-color-surface-border-default: var(--ids-palette-neutral-50);
-  --ids-color-surface-text-on-default: var(--ids-palette-neutral-100);
+  --ids-color-surface-border-default: var(--ids-palette-neutral-40);
+  --ids-color-surface-text-on-default: var(--ids-palette-neutral-90);
   --ids-color-surface-text-subtle-on-default: var(--ids-palette-neutral-99);
-  --ids-color-surface-background-elevated-1: var(--ids-palette-neutral-15);
-  --ids-color-surface-border-elevated-1: var(--ids-palette-neutral-50);
-  --ids-color-surface-text-on-elevated-1: var(--ids-palette-neutral-100);
+  --ids-color-surface-background-elevated-1: var(--ids-palette-neutral-20);
+  --ids-color-surface-border-elevated-1: var(--ids-palette-neutral-30);
+  --ids-color-surface-text-on-elevated-1: var(--ids-palette-neutral-90);
   --ids-color-surface-text-subtle-on-elevated-1: var(--ids-palette-neutral-99);
-  --ids-color-surface-background-elevated-1-hover: var(--ids-palette-neutral-20);
-  --ids-color-surface-background-elevated-1-active: var(--ids-palette-neutral-20);
-  --ids-color-surface-background-elevated-2: var(--ids-palette-neutral-20);
-  --ids-color-surface-border-elevated-2: var(--ids-palette-neutral-50);
-  --ids-color-surface-text-on-elevated-2: var(--ids-palette-neutral-100);
+  --ids-color-surface-background-elevated-1-hover: var(--ids-palette-neutral-30);
+  --ids-color-surface-background-elevated-1-active: var(--ids-palette-neutral-30);
+  --ids-color-surface-background-elevated-2: var(--ids-palette-neutral-30);
+  --ids-color-surface-border-elevated-2: var(--ids-palette-neutral-40);
+  --ids-color-surface-text-on-elevated-2: var(--ids-palette-neutral-90);
   --ids-color-surface-background-alternative: var(--ids-palette-neutral-10);
-  --ids-color-surface-text-on-alternative: var(--ids-palette-neutral-100);
-  --ids-color-surface-background-alternative-elevated-1: var(--ids-palette-neutral-15);
-  --ids-color-navigation-background-default: var(--ids-palette-neutral-10);
-  --ids-color-navigation-border-default: var(--ids-palette-primary-90);
-  --ids-color-navigation-text-default: var(--ids-palette-primary-90);
-  --ids-color-navigation-icon-default: var(--ids-palette-primary-90);
-  --ids-color-navigation-text-on-default: var(--ids-palette-primary-90);
-  --ids-color-navigation-background-hover: var(--ids-palette-primary-60);
-  --ids-color-navigation-border-hover: var(--ids-palette-primary-60);
-  --ids-color-navigation-text-hover: var(--ids-palette-neutral-100);
-  --ids-color-navigation-text-on-hover: var(--ids-palette-primary-90);
-  --ids-color-navigation-background-active: var(--ids-palette-primary-60);
-  --ids-color-navigation-border-active: var(--ids-palette-primary-60);
-  --ids-color-navigation-text-active: var(--ids-palette-neutral-100);
-  --ids-color-navigation-text-on-active: var(--ids-palette-primary-90);
+  --ids-color-surface-text-on-alternative: var(--ids-palette-neutral-90);
+  --ids-color-surface-background-alternative-elevated-1: var(--ids-palette-neutral-20);
   --ids-color-navigation-text-on-secondary: var(--ids-palette-neutral-100);
   --ids-color-interactive-background-default: var(--ids-palette-accent-60);
   --ids-color-interactive-border-default: var(--ids-palette-accent-90);
   --ids-color-interactive-text-default: var(--ids-palette-accent-60);
   --ids-color-interactive-text-on-default: var(--ids-palette-neutral-10);
-  --ids-color-interactive-background-hover: var(--ids-palette-neutral-100);
-  --ids-color-interactive-border-hover: var(--ids-palette-neutral-100);
-  --ids-color-interactive-text-hover: var(--ids-palette-neutral-100);
-  --ids-color-interactive-text-on-hover: var(--ids-palette-accent-30);
-  --ids-color-interactive-background-active: var(--ids-palette-neutral-100);
-  --ids-color-interactive-border-active: var(--ids-palette-neutral-100);
-  --ids-color-interactive-text-active: var(--ids-palette-neutral-100);
-  --ids-color-interactive-text-on-active: var(--ids-palette-accent-30);
-  --ids-color-interactive-background-disabled: var(--ids-palette-neutral-90);
-  --ids-color-interactive-border-disabled: var(--ids-palette-neutral-50);
-  --ids-color-interactive-text-disabled: var(--ids-palette-neutral-90);
-  --ids-color-interactive-text-on-disabled: var(--ids-palette-neutral-40);
+  --ids-color-interactive-background-hover: var(--ids-palette-accent-70);
+  --ids-color-interactive-border-hover: var(--ids-palette-accent-70);
+  --ids-color-interactive-text-hover: var(--ids-palette-accent-70);
+  --ids-color-interactive-text-on-hover: var(--ids-palette-neutral-10);
+  --ids-color-interactive-background-active: var(--ids-palette-accent-50);
+  --ids-color-interactive-border-active: var(--ids-palette-accent-50);
+  --ids-color-interactive-text-active: var(--ids-palette-accent-50);
+  --ids-color-interactive-toggle-marker-disabled: var(--ids-palette-neutral-40);
+  --ids-color-interactive-text-on-active: var(--ids-palette-neutral-10);
+  --ids-color-interactive-background-disabled: var(--ids-palette-neutral-30);
+  --ids-color-interactive-border-disabled: var(--ids-palette-neutral-30);
+  --ids-color-interactive-text-disabled: var(--ids-palette-neutral-60);
+  --ids-color-interactive-text-on-disabled: var(--ids-palette-neutral-60);
   --ids-color-interactive-focus-outline: var(--ids-palette-neutral-99);
   --ids-color-interactive-focus-outline-on: var(--ids-palette-neutral-99);
-  --ids-color-feedback-background-information: var(--ids-palette-neutral-15);
+  --ids-color-feedback-background-information: var(--ids-palette-neutral-20);
   --ids-color-feedback-border-information: var(--ids-palette-accent-50);
   --ids-color-feedback-text-on-information: var(--ids-palette-neutral-100);
   --ids-color-feedback-text-information: var(--ids-palette-accent-50);
-  --ids-color-feedback-background-success: var(--ids-palette-neutral-15);
+  --ids-color-feedback-background-success: var(--ids-palette-neutral-20);
   --ids-color-feedback-border-success: var(--ids-palette-success-40);
   --ids-color-feedback-text-on-success: var(--ids-palette-neutral-100);
   --ids-color-feedback-text-success: var(--ids-palette-success-40);
-  --ids-color-feedback-background-attention: var(--ids-palette-neutral-15);
+  --ids-color-feedback-background-attention: var(--ids-palette-neutral-20);
   --ids-color-feedback-border-attention: var(--ids-palette-attention-40);
   --ids-color-feedback-text-on-attention: var(--ids-palette-neutral-100);
   --ids-color-feedback-text-attention: var(--ids-palette-attention-40);
-  --ids-color-feedback-background-error: var(--ids-palette-neutral-15);
+  --ids-color-feedback-background-error: var(--ids-palette-neutral-20);
   --ids-color-feedback-text-on-error: var(--ids-palette-neutral-100);
-  --ids-color-feedback-background-notification: var(--ids-palette-primary-60);
+  --ids-color-feedback-background-notification: var(--ids-palette-primary-40);
   --ids-color-feedback-text-on-notification: var(--ids-palette-neutral-100);
   --ids-color-form-background-default: var(--ids-palette-neutral-10);
   --ids-color-form-border-default: var(--ids-palette-accent-90);
@@ -322,11 +397,11 @@
   --ids-color-form-border-light-default: var(--ids-palette-accent-90);
   --ids-color-form-text-on-light-default: var(--ids-palette-neutral-100);
   --ids-color-form-placeholder-text-on-light-default: var(--ids-palette-neutral-99);
-  --ids-color-form-background-hover: var(--ids-palette-neutral-15);
+  --ids-color-form-background-hover: var(--ids-palette-neutral-20);
   --ids-color-form-border-hover: var(--ids-palette-neutral-100);
   --ids-color-form-text-on-hover: var(--ids-palette-neutral-100);
   --ids-color-form-placeholder-text-on-hover: var(--ids-palette-neutral-99);
-  --ids-color-form-background-light-hover: var(--ids-palette-neutral-15);
+  --ids-color-form-background-light-hover: var(--ids-palette-neutral-20);
   --ids-color-form-border-light-hover: var(--ids-palette-accent-90);
   --ids-color-form-text-on-light-hover: var(--ids-palette-neutral-100);
   --ids-color-form-placeholder-text-on-light-hover: var(--ids-palette-neutral-99);
@@ -338,40 +413,361 @@
   --ids-color-form-border-light-active: var(--ids-palette-neutral-100);
   --ids-color-form-text-on-light-active: var(--ids-palette-neutral-100);
   --ids-color-form-placeholder-text-on-light-active: var(--ids-palette-neutral-99);
-  --ids-color-form-background-disabled: var(--ids-palette-neutral-10);
-  --ids-color-form-border-disabled: var(--ids-palette-neutral-90);
-  --ids-color-form-text-on-light-disabled: var(--ids-palette-neutral-99);
-  --ids-color-form-placeholder-text-on-light-disabled: var(--ids-palette-neutral-99);
-  --ids-color-form-background-light-disabled: var(--ids-palette-neutral-10);
-  --ids-color-form-border-light-disabled: var(--ids-palette-neutral-90);
-  --ids-color-form-text-on-disabled: var(--ids-palette-neutral-99);
-  --ids-color-form-placeholder-text-on-disabled: var(--ids-palette-neutral-99);
+  --ids-color-form-background-disabled: var(--ids-palette-neutral-30);
+  --ids-color-form-border-disabled: var(--ids-palette-neutral-30);
+  --ids-color-form-text-on-light-disabled: var(--ids-palette-neutral-60);
+  --ids-color-form-placeholder-text-on-light-disabled: var(--ids-palette-neutral-60);
+  --ids-color-form-background-light-disabled: var(--ids-palette-neutral-30);
+  --ids-color-form-border-light-disabled: var(--ids-palette-neutral-30);
+  --ids-color-form-text-on-disabled: var(--ids-palette-neutral-60);
+  --ids-color-form-placeholder-text-on-disabled: var(--ids-palette-neutral-60);
   --ids-color-form-background-invalid: var(--ids-palette-neutral-10);
   --ids-color-form-text-on-invalid: var(--ids-palette-neutral-100);
   --ids-color-form-placeholder-text-on-invalid: var(--ids-palette-neutral-99);
-  --ids-color-form-message-background-invalid: var(--ids-palette-neutral-20);
+  --ids-color-form-message-background-invalid: var(--ids-palette-neutral-30);
   --ids-color-form-message-text-on-invalid: var(--ids-palette-neutral-100);
   --ids-color-form-background-light-invalid: var(--ids-palette-neutral-10);
   --ids-color-form-text-on-light-invalid: var(--ids-palette-neutral-100);
   --ids-color-form-placeholder-text-on-light-invalid: var(--ids-palette-neutral-99);
-  --ids-color-brand-background-primary: var(--ids-color-dark-background-primary);
-  --ids-color-brand-border-primary: var(--ids-color-dark-border-primary);
-  --ids-color-brand-text-primary: var(--ids-color-dark-text-primary);
-  --ids-color-brand-text-primary-subtle: var(--ids-color-dark-text-primary-subtle);
-  --ids-color-brand-text-on-primary: var(--ids-color-dark-text-on-primary);
-  --ids-color-brand-background-secondary: var(--ids-color-dark-background-secondary);
-  --ids-color-brand-text-secondary: var(--ids-color-dark-text-secondary);
-  --ids-color-brand-text-on-secondary: var(--ids-color-dark-text-on-secondary);
-  --ids-color-brand-region-logo: var(--ids-color-dark-region-logo);
+  --ids-color-heading-text-xxl: var(--ids-palette-neutral-95);
+  --ids-color-heading-text-xl: var(--ids-palette-neutral-95);
+  --ids-color-heading-text-l: var(--ids-palette-neutral-95);
+  --ids-color-heading-text-m: var(--ids-palette-neutral-95);
+  --ids-color-heading-text-s: var(--ids-palette-neutral-95);
+  --ids-color-heading-text-xs: var(--ids-palette-neutral-95);
+  --ids-color-brand-background-primary: var(--ids-color-dark-brand-background-primary);
+  --ids-color-brand-border-primary: var(--ids-color-dark-brand-border-primary);
+  --ids-color-brand-text-primary: var(--ids-color-dark-brand-text-primary);
+  --ids-color-brand-text-primary-subtle: var(--ids-color-dark-brand-text-primary-subtle);
+  --ids-color-brand-text-on-primary: var(--ids-color-dark-brand-text-on-primary);
+  --ids-color-brand-background-secondary: var(--ids-color-dark-brand-background-secondary);
+  --ids-color-brand-text-secondary: var(--ids-color-dark-brand-text-secondary);
+  --ids-color-brand-text-on-secondary: var(--ids-color-dark-brand-text-on-secondary);
+  --ids-color-navigation-background-default: var(--ids-color-dark-brand-background-primary);
+  --ids-color-navigation-border-default: var(--ids-color-dark-navigation-border-default);
+  --ids-color-navigation-text-default: var(--ids-color-dark-navigation-text-default);
+  --ids-color-navigation-icon-default: var(--ids-color-dark-navigation-icon-default);
+  --ids-color-navigation-text-on-default: var(--ids-color-dark-navigation-text-on-default);
+  --ids-color-navigation-background-hover: var(--ids-color-dark-navigation-background-hover);
+  --ids-color-navigation-border-hover: var(--ids-color-dark-navigation-border-hover);
+  --ids-color-navigation-text-hover: var(--ids-color-dark-navigation-text-hover);
+  --ids-color-navigation-text-on-hover: var(--ids-color-dark-navigation-text-on-hover);
+  --ids-color-navigation-background-active: var(--ids-color-dark-navigation-background-active);
+  --ids-color-navigation-border-active: var(--ids-color-dark-navigation-border-active);
+  --ids-color-navigation-text-active: var(--ids-color-dark-navigation-text-active);
+  --ids-color-navigation-text-on-active: var(--ids-color-dark-navigation-text-on-active);
   --ids-color-feedback-border-error: var(--ids-palette-error-40);
-  --ids-color-feedback-text-error: var(--ids-palette-error-60);
+  --ids-color-feedback-text-error: var(--ids-palette-error-40);
   --ids-color-form-border-invalid: var(--ids-palette-error-40);
-  --ids-color-form-message-border-invalid: var(--ids-palette-error-60);
-  --ids-color-form-border-light-invalid: var(--ids-palette-error-60);
-  --ids-color-heading-text-xxl: var(--ids-color-surface-text-on-default);
-  --ids-color-heading-text-xl: var(--ids-color-surface-text-on-default);
-  --ids-color-heading-text-l: var(--ids-color-surface-text-on-default);
-  --ids-color-heading-text-m: var(--ids-color-surface-text-on-default);
-  --ids-color-heading-text-s: var(--ids-color-surface-text-on-default);
-  --ids-color-heading-text-xs: var(--ids-color-surface-text-on-default);
+  --ids-color-form-message-border-invalid: var(--ids-palette-error-40);
+  --ids-color-form-border-light-invalid: var(--ids-palette-error-40);
+}
+
+	
+	/*Desktop tokens*/
+.ids--1177-pro.ids--light, .ids--1177-pro.ids--dark {
+	--ids-device-min-width: 90rem;
+  --ids-device-min-height: 64rem;
+  --ids-components-logotype-region-width-citizen-blekinge: 9.8825rem;
+  --ids-components-logotype-region-width-citizen-dalarna: 7.1025rem;
+  --ids-components-logotype-region-width-citizen-gotland: 8.1325rem;
+  --ids-components-logotype-region-width-citizen-gavleborg: 7.82375rem;
+  --ids-components-logotype-region-width-citizen-halland: 11.666875rem;
+  --ids-components-logotype-region-width-citizen-jamtland-harjedalen: 9.161875rem;
+  --ids-components-logotype-region-width-citizen-jonkoping: 9.985625rem;
+  --ids-components-logotype-region-width-citizen-kalmar: 7.411875rem;
+  --ids-components-logotype-region-width-citizen-kronoberg: 9.161875rem;
+  --ids-components-logotype-region-width-citizen-norrbotten: 12.455625rem;
+  --ids-components-logotype-region-width-citizen-skane: 3.19125rem;
+  --ids-components-logotype-region-width-citizen-stockholm: 9.75rem;
+  --ids-components-logotype-region-width-citizen-sormland: 4.220625rem;
+  --ids-components-logotype-region-width-citizen-uppsala: 13.015625rem;
+  --ids-components-logotype-region-width-citizen-varmland: 8.6475rem;
+  --ids-components-logotype-region-width-citizen-vasterbotten: 10.294375rem;
+  --ids-components-logotype-region-width-citizen-vasternorrland: 10.6025rem;
+  --ids-components-logotype-region-width-citizen-vastmanland: 9.05875rem;
+  --ids-components-logotype-region-width-citizen-vastra-gotaland: 16.296875rem;
+  --ids-components-logotype-region-width-citizen-orebro: 9.830625rem;
+  --ids-components-logotype-region-width-citizen-ostergotland: 12.191875rem;
+  --ids-components-logotype-region-width-profession-blekinge: 7.05875rem;
+  --ids-components-logotype-region-width-profession-dalarna: 5.073125rem;
+  --ids-components-logotype-region-width-profession-gotland: 5.80875rem;
+  --ids-components-logotype-region-width-profession-gavleborg: 5.588125rem;
+  --ids-components-logotype-region-width-profession-halland: 8.333125rem;
+  --ids-components-logotype-region-width-profession-jamtland-harjedalen: 6.5625rem;
+  --ids-components-logotype-region-width-profession-jonkoping: 7.1325rem;
+  --ids-components-logotype-region-width-profession-kalmar: 5.294375rem;
+  --ids-components-logotype-region-width-profession-kronoberg: 6.544375rem;
+  --ids-components-logotype-region-width-profession-norrbotten: 8.896875rem;
+  --ids-components-logotype-region-width-profession-skane: 2.279375rem;
+  --ids-components-logotype-region-width-profession-stockholm: 7rem;
+  --ids-components-logotype-region-width-profession-sormland: 3.014375rem;
+  --ids-components-logotype-region-width-profession-uppsala: 9.479375rem;
+  --ids-components-logotype-region-width-profession-varmland: 6.176875rem;
+  --ids-components-logotype-region-width-profession-vasterbotten: 7.353125rem;
+  --ids-components-logotype-region-width-profession-vasternorrland: 7.573125rem;
+  --ids-components-logotype-region-width-profession-vastmanland: 6.470625rem;
+  --ids-components-logotype-region-width-profession-vastra-gotaland: 11.640625rem;
+  --ids-components-logotype-region-width-profession-orebro: 7.021875rem;
+  --ids-components-logotype-region-width-profession-ostergotland: 8.708125rem;
+  --ids-components-carousel-image-height: 25.8125rem;
+  --ids-components-header-logotype-width: 6.439375rem;
+  --ids-components-header-avatar-max-width: 37.5rem;
+  --ids-size-relation-12-14: 0.875rem;
+  --ids-size-relation-16-18: 1.125rem;
+  --ids-size-relation-280-620: 38.75rem;
+  --ids-size-relation-4-6: 0.375rem;
+  --ids-size-relation-34-38: 2.375rem;
+  --ids-font-size-heading-xxl: 3rem;
+  --ids-font-size-heading-xl: 2.25rem;
+  --ids-font-size-heading-l: 1.75rem;
+  --ids-font-size-heading-m: 1.5rem;
+  --ids-font-size-heading-s: 1.25rem;
+  --ids-font-size-heading-xs: 1rem;
+  --ids-font-size-preamble: 1.375rem;
+  --ids-font-size-body-text: 1rem;
+  --ids-font-size-small-text: 0.875rem;
+  --ids-font-size-badge: 0.875rem;
+  --ids-font-size-header-admin-title: 1.25rem;
+  --ids-font-size-heade-admin-title-extra: 0.875rem;
+  --ids-font-size-header-profession-title: 1.25rem;
+  --ids-font-size-button-l: 1.125rem;
+  --ids-font-size-button-m: 1rem;
+  --ids-font-size-button-s: 0.875rem;
+  --ids-font-size-icon-button-l: 1.5rem;
+  --ids-font-size-icon-button-m: 1.25rem;
+  --ids-font-size-icon-button-s: 1rem;
+  --ids-font-line-height-heading-xxl: 3.25rem;
+  --ids-font-line-height-heading-xl: 2.625rem;
+  --ids-font-line-height-heading-l: 2.25rem;
+  --ids-font-line-height-heading-m: 1.875rem;
+  --ids-font-line-height-heading-s: 1.5rem;
+  --ids-font-line-height-heading-xs: 1.25rem;
+  --ids-font-line-height-preamble: 2.25rem;
+  --ids-font-line-height-body-text: 1.5rem;
+  --ids-font-line-height-small-text: 1.25rem;
+  --ids-font-line-height-header-admin-itle: 1.5rem;
+  --ids-font-line-height-header-admin-title-extra: 1.25rem;
+  --ids-font-line-height-header-profession-title: 1.5rem;
+  --ids-font-line-height-button-l: 1.5rem;
+  --ids-font-line-height-button-m: 1.25rem;
+  --ids-font-line-height-button-s: 1rem;
+  --ids-font-letter-spacing-heading-xxl: -0.078125rem;
+  --ids-font-letter-spacing-heading-xl: -0.0625rem;
+  --ids-font-letter-spacing-heading-l: -0.04375rem;
+  --ids-font-letter-spacing-heading-m: -0.03125rem;
+  --ids-font-letter-spacing-heading-s: -0.025rem;
+  --ids-font-letter-spacing-heading-xs: 0;
+  --ids-font-letter-spacing-preamble: 0;
+  --ids-font-letter-spacing-body-text: 0;
+  --ids-font-letter-spacing-small-text: 0;
+  --ids-font-letter-spacing-header-admin-title: -0.041875rem;
+  --ids-font-letter-spacing-header-admin-title-extra: -0.025rem;
+  --ids-font-letter-spacing-header-profession-title: -0.025rem;
+  --ids-font-letter-spacing-button-l: 0;
+  --ids-font-letter-spacing-button-m: 0;
+  --ids-font-letter-spacing-button-s: 0;
+  --ids-font-paragraph-spacing-heading-xxl: 0;
+  --ids-font-paragraph-spacing-heading-xl: 0;
+  --ids-font-paragraph-spacing-heading-l: 0;
+  --ids-font-paragraph-spacing-heading-m: 0;
+  --ids-font-paragraph-spacing-heading-s: 0;
+  --ids-font-paragraph-spacing-heading-xs: 0;
+  --ids-font-paragraph-spacing-preamble: 0;
+  --ids-font-paragraph-spacing-body-text: 1rem;
+  --ids-font-paragraph-spacing-small-text: 1rem;
+  --ids-components-card-padding-horizontal: var(--ids-20);
+  --ids-components-card-padding-vertical: var(--ids-24);
+  --ids-main-padding-horizontal: var(--ids-88);
+  --ids-main-padding-top: var(--ids-20);
+  --ids-main-padding-bottom: var(--ids-152);
+  --ids-size-relation-0-2: var(--ids-2);
+  --ids-size-relation-0-48: var(--ids-48);
+  --ids-size-relation-2-0: var(--ids-0);
+  --ids-size-relation-2-4: var(--ids-4);
+  --ids-size-relation-4-8: var(--ids-8);
+  --ids-size-relation-4-12: var(--ids-12);
+  --ids-size-relation-6-8: var(--ids-8);
+  --ids-size-relation-8-0: var(--ids-0);
+  --ids-size-relation-8-12: var(--ids-12);
+  --ids-size-relation-8-16: var(--ids-16);
+  --ids-size-relation-8-20: var(--ids-20);
+  --ids-size-relation-12-16: var(--ids-16);
+  --ids-size-relation-12-20: var(--ids-20);
+  --ids-size-relation-12-24: var(--ids-24);
+  --ids-size-relation-12-32: var(--ids-32);
+  --ids-size-relation-12-88: var(--ids-88);
+  --ids-size-relation-14-16: var(--ids-16);
+  --ids-size-relation-16-12: var(--ids-12);
+  --ids-size-relation-16-20: var(--ids-20);
+  --ids-size-relation-16-40: var(--ids-40);
+  --ids-size-relation-18-20: var(--ids-20);
+  --ids-size-relation-18-24: var(--ids-24);
+  --ids-size-relation-20-24: var(--ids-24);
+  --ids-size-relation-20-28: var(--ids-28);
+  --ids-size-relation-20-40: var(--ids-40);
+  --ids-size-relation-20-56: var(--ids-56);
+  --ids-size-relation-20-88: var(--ids-88);
+  --ids-size-relation-24-28: var(--ids-28);
+  --ids-size-relation-24-40: var(--ids-40);
+  --ids-size-relation-28-48: var(--ids-48);
+  --ids-size-relation-28-88: var(--ids-88);
+  --ids-size-relation-32-64: var(--ids-64);
+  --ids-size-relation-32-56: var(--ids-56);
+  --ids-size-relation-48-120: var(--ids-120);
 }
+	
+	/*Mobile tokens*/
+@media only screen and (max-width: 1024px) {
+	.ids--1177-pro.ids--light, .ids--1177-pro.ids--dark {
+	--ids-device-min-width: 20rem;
+  --ids-device-min-height: 35.5rem;
+  --ids-components-logotype-region-width-citizen-blekinge: 5.646875rem;
+  --ids-components-logotype-region-width-citizen-dalarna: 4.05875rem;
+  --ids-components-logotype-region-width-citizen-gotland: 4.646875rem;
+  --ids-components-logotype-region-width-citizen-gavleborg: 4.470625rem;
+  --ids-components-logotype-region-width-citizen-halland: 6.705625rem;
+  --ids-components-logotype-region-width-citizen-jamtland-harjedalen: 5.25rem;
+  --ids-components-logotype-region-width-citizen-jonkoping: 5.705625rem;
+  --ids-components-logotype-region-width-citizen-kalmar: 4.235rem;
+  --ids-components-logotype-region-width-citizen-kronoberg: 5.235rem;
+  --ids-components-logotype-region-width-citizen-norrbotten: 7.1175rem;
+  --ids-components-logotype-region-width-citizen-skane: 1.82375rem;
+  --ids-components-logotype-region-width-citizen-stockholm: 5.5625rem;
+  --ids-components-logotype-region-width-citizen-sormland: 2.411875rem;
+  --ids-components-logotype-region-width-citizen-uppsala: 7.4375rem;
+  --ids-components-logotype-region-width-citizen-varmland: 4.94125rem;
+  --ids-components-logotype-region-width-citizen-vasterbotten: 5.8825rem;
+  --ids-components-logotype-region-width-citizen-vasternorrland: 6.05875rem;
+  --ids-components-logotype-region-width-citizen-vastmanland: 5.17625rem;
+  --ids-components-logotype-region-width-citizen-vastra-gotaland: 9.3125rem;
+  --ids-components-logotype-region-width-citizen-orebro: 5.616875rem;
+  --ids-components-logotype-region-width-citizen-ostergotland: 6.411875rem;
+  --ids-components-logotype-region-width-profession-blekinge: 4.235rem;
+  --ids-components-logotype-region-width-profession-dalarna: 3.044375rem;
+  --ids-components-logotype-region-width-profession-gotland: 3.485rem;
+  --ids-components-logotype-region-width-profession-gavleborg: 3.353125rem;
+  --ids-components-logotype-region-width-profession-halland: 5.029375rem;
+  --ids-components-logotype-region-width-profession-jamtland-harjedalen: 3.9375rem;
+  --ids-components-logotype-region-width-profession-jonkoping: 4.279375rem;
+  --ids-components-logotype-region-width-profession-kalmar: 3.17625rem;
+  --ids-components-logotype-region-width-profession-kronoberg: 3.92625rem;
+  --ids-components-logotype-region-width-profession-norrbotten: 5.338125rem;
+  --ids-components-logotype-region-width-profession-skane: 1.3675rem;
+  --ids-components-logotype-region-width-profession-stockholm: 4.1875rem;
+  --ids-components-logotype-region-width-profession-sormland: 1.80875rem;
+  --ids-components-logotype-region-width-profession-uppsala: 5.6875rem;
+  --ids-components-logotype-region-width-profession-varmland: 3.705625rem;
+  --ids-components-logotype-region-width-profession-vasterbotten: 4.411875rem;
+  --ids-components-logotype-region-width-profession-vasternorrland: 4.544375rem;
+  --ids-components-logotype-region-width-profession-vastmanland: 3.8825rem;
+  --ids-components-logotype-region-width-profession-vastra-gotaland: 7.1875rem;
+  --ids-components-logotype-region-width-profession-orebro: 4.2125rem;
+  --ids-components-logotype-region-width-profession-ostergotland: 4.80875rem;
+  --ids-components-carousel-image-height: 11.6875rem;
+  --ids-components-header-logotype-width: 2.575625rem;
+  --ids-components-header-avatar-max-width: 6rem;
+  --ids-size-relation-6-8: 0.375rem;
+  --ids-size-relation-14-16: 0.875rem;
+  --ids-size-relation-18-20: 1.125rem;
+  --ids-size-relation-18-24: 1.125rem;
+  --ids-size-relation-280-620: 17.5rem;
+  --ids-size-relation-4-6: 0.25rem;
+  --ids-size-relation-34-38: 2.125rem;
+  --ids-font-size-heading-xxl: 2rem;
+  --ids-font-size-heading-xl: 1.625rem;
+  --ids-font-size-heading-l: 1.5rem;
+  --ids-font-size-heading-m: 1.375rem;
+  --ids-font-size-heading-s: 1.25rem;
+  --ids-font-size-heading-xs: 1rem;
+  --ids-font-size-preamble: 1.125rem;
+  --ids-font-size-body-text: 1rem;
+  --ids-font-size-small-text: 0.875rem;
+  --ids-font-size-badge: 0.75rem;
+  --ids-font-size-header-admin-title: 1rem;
+  --ids-font-size-heade-admin-title-extra: 0.625rem;
+  --ids-font-size-header-profession-title: 1rem;
+  --ids-font-size-button-l: 1.125rem;
+  --ids-font-size-button-m: 1rem;
+  --ids-font-size-button-s: 0.875rem;
+  --ids-font-size-icon-button-l: 1.5rem;
+  --ids-font-size-icon-button-m: 1.25rem;
+  --ids-font-size-icon-button-s: 1rem;
+  --ids-font-line-height-heading-xxl: 2.5rem;
+  --ids-font-line-height-heading-xl: 2.125rem;
+  --ids-font-line-height-heading-l: 1.875rem;
+  --ids-font-line-height-heading-m: 1.75rem;
+  --ids-font-line-height-heading-s: 1.5rem;
+  --ids-font-line-height-heading-xs: 1.25rem;
+  --ids-font-line-height-preamble: 1.75rem;
+  --ids-font-line-height-body-text: 1.5rem;
+  --ids-font-line-height-small-text: 1.25rem;
+  --ids-font-line-height-header-admin-itle: 0.875rem;
+  --ids-font-line-height-header-admin-title-extra: 0.875rem;
+  --ids-font-line-height-header-profession-title: 1.25rem;
+  --ids-font-line-height-button-l: 1.5rem;
+  --ids-font-line-height-button-m: 1.25rem;
+  --ids-font-line-height-button-s: 1rem;
+  --ids-font-letter-spacing-heading-xxl: -0.051875rem;
+  --ids-font-letter-spacing-heading-xl: -0.03125rem;
+  --ids-font-letter-spacing-heading-l: -0.025rem;
+  --ids-font-letter-spacing-heading-m: -0.01875rem;
+  --ids-font-letter-spacing-heading-s: -0.0125rem;
+  --ids-font-letter-spacing-heading-xs: 0;
+  --ids-font-letter-spacing-preamble: 0;
+  --ids-font-letter-spacing-body-text: 0;
+  --ids-font-letter-spacing-small-text: 0;
+  --ids-font-letter-spacing-header-admin-title: -0.015625rem;
+  --ids-font-letter-spacing-header-admin-title-extra: -0.015625rem;
+  --ids-font-letter-spacing-header-profession-title: 0;
+  --ids-font-letter-spacing-button-l: 0;
+  --ids-font-letter-spacing-button-m: 0;
+  --ids-font-letter-spacing-button-s: 0;
+  --ids-font-paragraph-spacing-heading-xxl: 0;
+  --ids-font-paragraph-spacing-heading-xl: 0;
+  --ids-font-paragraph-spacing-heading-l: 0;
+  --ids-font-paragraph-spacing-heading-m: 0;
+  --ids-font-paragraph-spacing-heading-s: 0;
+  --ids-font-paragraph-spacing-heading-xs: 0;
+  --ids-font-paragraph-spacing-preamble: 0;
+  --ids-font-paragraph-spacing-body-text: 1rem;
+  --ids-font-paragraph-spacing-small-text: 1rem;
+  --ids-components-card-padding-horizontal: var(--ids-16);
+  --ids-components-card-padding-vertical: var(--ids-20);
+  --ids-main-padding-horizontal: var(--ids-20);
+  --ids-main-padding-top: var(--ids-20);
+  --ids-main-padding-bottom: var(--ids-96);
+  --ids-size-relation-0-2: var(--ids-0);
+  --ids-size-relation-0-48: var(--ids-0);
+  --ids-size-relation-2-0: var(--ids-2);
+  --ids-size-relation-2-4: var(--ids-2);
+  --ids-size-relation-4-8: var(--ids-4);
+  --ids-size-relation-4-12: var(--ids-4);
+  --ids-size-relation-8-0: var(--ids-8);
+  --ids-size-relation-8-12: var(--ids-8);
+  --ids-size-relation-8-16: var(--ids-8);
+  --ids-size-relation-8-20: var(--ids-8);
+  --ids-size-relation-12-14: var(--ids-12);
+  --ids-size-relation-12-16: var(--ids-12);
+  --ids-size-relation-12-20: var(--ids-12);
+  --ids-size-relation-12-24: var(--ids-12);
+  --ids-size-relation-12-32: var(--ids-12);
+  --ids-size-relation-12-88: var(--ids-12);
+  --ids-size-relation-16-12: var(--ids-16);
+  --ids-size-relation-16-18: var(--ids-16);
+  --ids-size-relation-16-20: var(--ids-16);
+  --ids-size-relation-16-40: var(--ids-16);
+  --ids-size-relation-20-24: var(--ids-20);
+  --ids-size-relation-20-28: var(--ids-20);
+  --ids-size-relation-20-40: var(--ids-20);
+  --ids-size-relation-20-56: var(--ids-20);
+  --ids-size-relation-20-88: var(--ids-20);
+  --ids-size-relation-24-28: var(--ids-24);
+  --ids-size-relation-24-40: var(--ids-24);
+  --ids-size-relation-28-48: var(--ids-28);
+  --ids-size-relation-28-88: var(--ids-28);
+  --ids-size-relation-32-64: var(--ids-32);
+  --ids-size-relation-32-56: var(--ids-32);
+  --ids-size-relation-48-120: var(--ids-48);
+	}
+}