@inera/ids-design 8.0.1 → 8.2.0

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

@@ -1,23 +1,32 @@
 /* Autogenerated by src/style-dictionary/build.js */
 .ids--inera-admin.ids--light, .ids--inera-admin.ids--dark {
---ids-palette-primary-30: #7e2a4c;
+  
+	/*Base tokens*/
+
+  --ids-palette-primary-20: #5a1a33;
+  --ids-palette-primary-30: #7e2a4c;
   --ids-palette-primary-40: #a33662;
   --ids-palette-primary-50: #c03f73;
   --ids-palette-primary-60: #e481a9;
-  --ids-palette-primary-90: #e3abc1;
+  --ids-palette-primary-70: #e3abc1;
   --ids-palette-secondary-40: #e7dac5;
   --ids-palette-secondary-90: #f6f1e9;
   --ids-palette-secondary-95: #f9f6f1;
   --ids-palette-accent-20: #254637;
   --ids-palette-accent-30: #305a47;
   --ids-palette-accent-40: #40775e;
-  --ids-palette-accent-90: #94d1b6;
-  --ids-palette-neutral-10: #151515;
-  --ids-palette-neutral-15: #252525;
-  --ids-palette-neutral-20: #353636;
-  --ids-palette-neutral-40: #727373;
-  --ids-palette-neutral-90: #cccccc;
-  --ids-palette-neutral-99: #f0f0f0;
+  --ids-palette-accent-50: #4f9278;
+  --ids-palette-accent-60: #6faf97;
+  --ids-palette-accent-70: #94d1b6;
+  --ids-palette-neutral-10: #16181a;
+  --ids-palette-neutral-20: #222529;
+  --ids-palette-neutral-30: #303438;
+  --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-40: #2c863f;
   --ids-palette-success-99: #e7f7ea;
@@ -25,7 +34,13 @@
   --ids-palette-attention-95: #fff7d9;
   --ids-palette-error-40: #db0f00;
   --ids-palette-error-60: #f52819;
-  --ids-palette-error-99: #ffeceb;--ids-search-button-small-font-seize: 1rem;
+  --ids-palette-error-99: #ffeceb;
+  --ids-layout-content-max-width: 120rem;
+  --ids-layout-text-max-width: 40rem;
+  
+	/*Theme tokens*/
+
+  --ids-search-button-small-font-seize: 1rem;
   --ids-search-button-small-line-height: 1.25rem;
   --ids-input-height: var(--ids-36);
   --ids-input-padding-x: var(--ids-16);
@@ -35,53 +50,78 @@
   --ids-search-button-small-padding-x: var(--ids-24);
   --ids-search-button-small-padding-y: var(--ids-8);
 }
+
+	
+	/*Light tokens*/
 .ids--inera-admin.ids--light {
---ids-font-family-primary: Open sans;
+	--ids-font-family-primary: Open sans;
   --ids-font-family-secondary: Poppins;
-  --ids-color-surface-shadow-elevated-1: #000000;
-  --ids-color-surface-shadow-elevated-2: #000000;
+  --ids-font-weight-heading-xxl: 600;
+  --ids-font-weight-heading-xl: 600;
+  --ids-font-weight-heading-l: 600;
+  --ids-font-weight-heading-m: 600;
+  --ids-font-weight-heading-s: 600;
+  --ids-font-weight-heading-xs: 600;
+  --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.1875rem;
   --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;
-  --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: 1.0625rem;
+  --ids-box-shadow-position-y-elevated-1-effect-3: 0.4375rem;
+  --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.1875rem;
+  --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;
+  --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-primary);
   --ids-color-surface-background-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-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-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-2: var(--ids-palette-neutral-100);
-  --ids-color-surface-text-on-elevated-2: var(--ids-palette-neutral-20);
   --ids-color-surface-border-elevated-2: var(--ids-palette-neutral-90);
+  --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-surface-text-on-alternative-elevated-1: var(--ids-palette-neutral-20);
+  --ids-color-surface-text-on-alternative-elevated-1: var(--ids-palette-neutral-30);
   --ids-color-brand-text-logo: var(--ids-palette-primary-40);
   --ids-color-brand-text-primary: var(--ids-palette-primary-40);
   --ids-color-brand-background-primary: var(--ids-palette-primary-40);
@@ -90,7 +130,8 @@
   --ids-color-brand-border-primary: var(--ids-palette-primary-40);
   --ids-color-brand-text-on-primary: var(--ids-palette-neutral-100);
   --ids-color-brand-background-secondary: var(--ids-palette-secondary-95);
-  --ids-color-brand-text-on-secondary: var(--ids-palette-neutral-20);
+  --ids-color-brand-text-secondary: var(--ids-palette-primary-30);
+  --ids-color-brand-text-on-secondary: var(--ids-palette-neutral-30);
   --ids-color-navigation-background-default: var(--ids-palette-primary-40);
   --ids-color-navigation-border-default: var(--ids-palette-primary-40);
   --ids-color-navigation-text-default: var(--ids-palette-primary-30);
@@ -115,187 +156,230 @@
   --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-90);
-  --ids-color-interactive-text-disabled: var(--ids-palette-neutral-40);
-  --ids-color-interactive-text-on-disabled: var(--ids-palette-neutral-40);
-  --ids-color-interactive-focus-outline: var(--ids-palette-neutral-20);
+  --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-30);
   --ids-color-interactive-focus-outline-on: var(--ids-palette-neutral-100);
   --ids-color-feedback-background-information: var(--ids-palette-neutral-99);
   --ids-color-feedback-border-information: var(--ids-palette-neutral-40);
-  --ids-color-feedback-text-on-information: var(--ids-palette-neutral-20);
-  --ids-color-feedback-text-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-neutral-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-40);
   --ids-color-feedback-background-attention: var(--ids-palette-attention-95);
   --ids-color-feedback-border-attention: var(--ids-palette-neutral-40);
-  --ids-color-feedback-text-on-attention: var(--ids-palette-neutral-20);
-  --ids-color-feedback-text-attention: var(--ids-palette-neutral-20);
+  --ids-color-feedback-text-on-attention: var(--ids-palette-neutral-30);
+  --ids-color-feedback-text-attention: var(--ids-palette-neutral-30);
   --ids-color-feedback-background-error: var(--ids-palette-error-99);
   --ids-color-feedback-border-error: var(--ids-palette-error-40);
-  --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-text-error: var(--ids-palette-error-40);
   --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-secondary-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-secondary-90);
+  --ids-color-form-border-hover: var(--ids-palette-accent-30);
+  --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-secondary-90);
+  --ids-color-form-border-light-hover: var(--ids-palette-accent-30);
+  --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-secondary-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-error-99);
   --ids-color-form-border-invalid: var(--ids-palette-error-40);
-  --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-message-border-invalid: var(--ids-palette-error-40);
   --ids-color-form-message-text-on-invalid: var(--ids-palette-error-40);
   --ids-color-form-background-light-invalid: var(--ids-palette-error-99);
   --ids-color-form-border-light-invalid: var(--ids-palette-error-40);
-  --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-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-heading-text-xxl: var(--ids-color-brand-text-primary);
   --ids-color-heading-text-xl: var(--ids-color-brand-text-primary);
   --ids-color-heading-text-l: var(--ids-color-brand-text-primary);
-  --ids-color-heading-text-m: var(--ids-color-brand-text-primary);
-  --ids-color-heading-text-s: var(--ids-color-surface-text-on-default);
-  --ids-color-heading-text-xs: var(--ids-color-surface-text-on-default);
 }
 
+	
+	/*Dark tokens*/
 .ids--inera-admin.ids--dark {
---ids-font-family-primary: Open sans;
+	--ids-font-family-primary: Open sans;
   --ids-font-family-secondary: Poppins;
-  --ids-color-surface-shadow-elevated-1: #ffffff;
-  --ids-color-surface-shadow-elevated-2: #ffffff;
+  --ids-font-weight-heading-xxl: 600;
+  --ids-font-weight-heading-xl: 600;
+  --ids-font-weight-heading-l: 600;
+  --ids-font-weight-heading-m: 600;
+  --ids-font-weight-heading-s: 600;
+  --ids-font-weight-heading-xs: 600;
+  --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.1875rem;
   --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: 1.0625rem;
+  --ids-box-shadow-position-y-elevated-1-effect-3: 0.4375rem;
+  --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.1875rem;
+  --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-primary);
   --ids-color-surface-background-default: var(--ids-palette-neutral-10);
   --ids-color-surface-border-default: var(--ids-palette-neutral-40);
-  --ids-color-surface-text-on-default: var(--ids-palette-neutral-100);
-  --ids-color-surface-background-elevated-1: var(--ids-palette-neutral-15);
-  --ids-color-surface-border-elevated-1: var(--ids-palette-neutral-40);
-  --ids-color-surface-text-on-elevated-1: var(--ids-palette-neutral-100);
+  --ids-color-surface-text-on-default: var(--ids-palette-neutral-90);
+  --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-2: var(--ids-palette-neutral-20);
-  --ids-color-surface-text-on-elevated-2: var(--ids-palette-neutral-100);
+  --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-surface-text-on-alternative-elevated-1: var(--ids-palette-neutral-100);
+  --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-surface-text-on-alternative-elevated-1: var(--ids-palette-neutral-90);
   --ids-color-brand-text-logo: var(--ids-palette-primary-50);
   --ids-color-brand-text-primary: var(--ids-palette-primary-60);
-  --ids-color-brand-background-primary: var(--ids-palette-neutral-15);
+  --ids-color-brand-background-primary: var(--ids-palette-neutral-20);
   --ids-color-brand-background-primary-subtle: var(--ids-palette-primary-30);
   --ids-color-brand-background-primary-subtle-2: var(--ids-palette-neutral-10);
   --ids-color-brand-border-primary: var(--ids-palette-primary-50);
   --ids-color-brand-text-on-primary: var(--ids-palette-neutral-100);
-  --ids-color-brand-background-secondary: var(--ids-palette-neutral-15);
+  --ids-color-brand-background-secondary: var(--ids-palette-neutral-20);
+  --ids-color-brand-text-secondary: var(--ids-palette-primary-70);
   --ids-color-brand-text-on-secondary: var(--ids-palette-neutral-100);
   --ids-color-navigation-background-default: var(--ids-palette-neutral-10);
-  --ids-color-navigation-border-default: var(--ids-palette-primary-90);
+  --ids-color-navigation-border-default: var(--ids-palette-primary-70);
   --ids-color-navigation-text-default: var(--ids-palette-neutral-100);
-  --ids-color-navigation-icon-default: var(--ids-palette-primary-90);
-  --ids-color-navigation-text-on-default: var(--ids-palette-primary-90);
+  --ids-color-navigation-icon-default: var(--ids-palette-neutral-100);
+  --ids-color-navigation-text-on-default: var(--ids-palette-neutral-10);
   --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-on-hover: var(--ids-palette-neutral-10);
+  --ids-color-navigation-background-active: var(--ids-palette-primary-50);
+  --ids-color-navigation-border-active: var(--ids-palette-primary-50);
   --ids-color-navigation-text-active: var(--ids-palette-neutral-100);
-  --ids-color-navigation-text-on-active: var(--ids-palette-primary-90);
-  --ids-color-interactive-background-default: var(--ids-palette-accent-90);
-  --ids-color-interactive-border-default: var(--ids-palette-accent-90);
-  --ids-color-interactive-text-default: var(--ids-palette-accent-90);
+  --ids-color-navigation-text-on-active: var(--ids-palette-neutral-10);
+  --ids-color-interactive-background-default: var(--ids-palette-accent-60);
+  --ids-color-interactive-border-default: var(--ids-palette-accent-60);
+  --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-90);
-  --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-neutral-40);
   --ids-color-feedback-text-on-information: var(--ids-palette-neutral-100);
   --ids-color-feedback-text-information: var(--ids-palette-neutral-90);
-  --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-border-error: var(--ids-palette-error-60);
   --ids-color-feedback-text-on-error: var(--ids-palette-neutral-100);
   --ids-color-feedback-text-error: var(--ids-palette-error-60);
   --ids-color-feedback-background-notification: var(--ids-palette-primary-50);
   --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);
+  --ids-color-form-border-default: var(--ids-palette-accent-70);
   --ids-color-form-text-on-default: var(--ids-palette-neutral-100);
   --ids-color-form-placeholder-text-on-default: var(--ids-palette-neutral-99);
   --ids-color-form-background-light-default: var(--ids-palette-neutral-10);
-  --ids-color-form-border-light-default: var(--ids-palette-accent-90);
+  --ids-color-form-border-light-default: var(--ids-palette-accent-70);
   --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-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-20);
+  --ids-color-form-border-light-hover: var(--ids-palette-neutral-100);
+  --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);
   --ids-color-form-background-active: var(--ids-palette-neutral-10);
   --ids-color-form-border-active: var(--ids-palette-neutral-100);
   --ids-color-form-text-on-active: var(--ids-palette-neutral-100);
@@ -304,29 +388,230 @@
   --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-border-invalid: var(--ids-palette-error-60);
+  --ids-color-form-border-invalid: var(--ids-palette-error-40);
   --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-border-invalid: var(--ids-palette-error-60);
+  --ids-color-form-message-background-invalid: var(--ids-palette-neutral-30);
+  --ids-color-form-message-border-invalid: var(--ids-palette-error-40);
   --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-border-light-invalid: var(--ids-palette-error-60);
+  --ids-color-form-border-light-invalid: var(--ids-palette-error-40);
   --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-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-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);
+}
+
+	
+	/*Desktop tokens*/
+.ids--inera-admin.ids--light, .ids--inera-admin.ids--dark {
+	--ids-device-min-width: 90rem;
+  --ids-device-min-height: 64rem;
+  --ids-device-show-on-desktop: true;
+  --ids-size-relation-12-14: 0.875rem;
+  --ids-size-relation-16-18: 1.125rem;
+  --ids-size-relation-4-6: 0.375rem;
+  --ids-size-relation-34-38: 2.375rem;
+  --ids-size-relation-280-620: 38.75rem;
+  --ids-components-carousel-image-height: 25.8125rem;
+  --ids-font-size-heading-xxl: 2.5rem;
+  --ids-font-size-heading-xl: 2rem;
+  --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-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.125rem;
+  --ids-font-line-height-heading-xl: 2.5rem;
+  --ids-font-line-height-heading-l: 2.25rem;
+  --ids-font-line-height-heading-m: 2rem;
+  --ids-font-line-height-heading-s: 1.625rem;
+  --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-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;
+  --ids-font-letter-spacing-heading-xl: 0;
+  --ids-font-letter-spacing-heading-l: 0;
+  --ids-font-letter-spacing-heading-m: 0;
+  --ids-font-letter-spacing-heading-s: 0;
+  --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-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: 1rem;
+  --ids-font-paragraph-spacing-heading-s: 1rem;
+  --ids-font-paragraph-spacing-heading-xs: 1rem;
+  --ids-font-paragraph-spacing-preamble: 0;
+  --ids-font-paragraph-spacing-body-text: 1rem;
+  --ids-font-paragraph-spacing-small-text: 1rem;
+  --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-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-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-32: var(--ids-32);
+  --ids-size-relation-16-40: var(--ids-40);
+  --ids-size-relation-18-20: var(--ids-20);
+  --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);
+  --ids-components-card-padding-horizontal: var(--ids-20);
+  --ids-components-card-padding-vertical: var(--ids-24);
 }
+	
+	/*Mobile tokens*/
+@media only screen and (max-width: 1024px) {
+	.ids--inera-admin.ids--light, .ids--inera-admin.ids--dark {
+	--ids-device-min-width: 20rem;
+  --ids-device-min-height: 35.5rem;
+  --ids-device-show-on-desktop: false;
+  --ids-size-relation-6-8: 0.375rem;
+  --ids-size-relation-14-16: 0.875rem;
+  --ids-size-relation-18-20: 1.125rem;
+  --ids-size-relation-4-6: 0.25rem;
+  --ids-size-relation-34-38: 2.125rem;
+  --ids-size-relation-280-620: 17.5rem;
+  --ids-components-carousel-image-height: 11.6875rem;
+  --ids-font-size-heading-xxl: 1.875rem;
+  --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-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.375rem;
+  --ids-font-line-height-heading-xl: 2rem;
+  --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-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;
+  --ids-font-letter-spacing-heading-xl: 0;
+  --ids-font-letter-spacing-heading-l: 0;
+  --ids-font-letter-spacing-heading-m: 0;
+  --ids-font-letter-spacing-heading-s: 0;
+  --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-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: 1rem;
+  --ids-font-paragraph-spacing-heading-s: 1rem;
+  --ids-font-paragraph-spacing-heading-xs: 1rem;
+  --ids-font-paragraph-spacing-preamble: 0;
+  --ids-font-paragraph-spacing-body-text: 1rem;
+  --ids-font-paragraph-spacing-small-text: 1rem;
+  --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-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-16: var(--ids-12);
+  --ids-size-relation-12-14: var(--ids-12);
+  --ids-size-relation-12-20: var(--ids-12);
+  --ids-size-relation-12-24: 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-32: 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);
+  --ids-components-card-padding-horizontal: var(--ids-16);
+  --ids-components-card-padding-vertical: var(--ids-20);
+	}
+}