@inera/ids-design 8.0.0 → 8.1.0

package/tokens/themes/inera-tokens.css

@@ -1,17 +1,23 @@
 /* Autogenerated by src/style-dictionary/build.js */
 .ids--inera.ids--light, .ids--inera.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-accent-50: #4f9278;
+  --ids-palette-accent-60: #6faf97;
+  --ids-palette-accent-70: #94d1b6;
   --ids-palette-neutral-10: #151515;
   --ids-palette-neutral-15: #252525;
   --ids-palette-neutral-20: #353636;
@@ -25,7 +31,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: 1.125rem;
+  --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: 1.125rem;
   --ids-search-button-small-line-height: 1.5rem;
   --ids-input-height: var(--ids-48);
   --ids-input-padding-x: var(--ids-20);
@@ -35,39 +47,64 @@
   --ids-search-button-small-padding-x: var(--ids-28);
   --ids-search-button-small-padding-y: var(--ids-12);
 }
+
+	
+	/*Light tokens*/
 .ids--inera.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: 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.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);
@@ -77,7 +114,7 @@
   --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-border-elevated-2: var(--ids-palette-neutral-40);
   --ids-color-surface-background-alternative: var(--ids-palette-secondary-95);
   --ids-color-surface-text-on-alternative: var(--ids-palette-neutral-20);
   --ids-color-surface-background-alternative-elevated-1: var(--ids-palette-secondary-95);
@@ -90,6 +127,7 @@
   --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-secondary: var(--ids-palette-primary-30);
   --ids-color-brand-text-on-secondary: var(--ids-palette-neutral-20);
   --ids-color-navigation-background-default: var(--ids-palette-primary-40);
   --ids-color-navigation-border-default: var(--ids-palette-primary-40);
@@ -148,12 +186,20 @@
   --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-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-20);
+  --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-20);
+  --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-border-active: var(--ids-palette-accent-20);
   --ids-color-form-text-on-active: var(--ids-palette-neutral-20);
   --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-border-light-active: var(--ids-palette-accent-20);
   --ids-color-form-text-on-light-active: var(--ids-palette-neutral-20);
   --ids-color-form-placeholder-text-on-light-active: var(--ids-palette-neutral-40);
   --ids-color-form-background-disabled: var(--ids-palette-neutral-99);
@@ -183,39 +229,63 @@
   --ids-color-heading-text-xs: var(--ids-color-surface-text-on-default);
 }
 
+	
+	/*Dark tokens*/
 .ids--inera.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: 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.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);
@@ -238,32 +308,33 @@
   --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-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-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-text-on-active: var(--ids-palette-neutral-10);
   --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);
@@ -289,13 +360,21 @@
   --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-15);
+  --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-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);
@@ -330,3 +409,208 @@
   --ids-color-heading-text-s: var(--ids-color-surface-text-on-default);
   --ids-color-heading-text-xs: var(--ids-color-surface-text-on-default);
 }
+
+	
+	/*Desktop tokens*/
+.ids--inera.ids--light, .ids--inera.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: 1.25rem;
+  --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.ids--light, .ids--inera.ids--dark {
+	--ids-device-min-width: 20rem;
+  --ids-device-max-width: 35.625rem;
+  --ids-device-min-height: 35.5rem;
+  --ids-device-show-on-desktop: false;
+  --ids-section-3-columns-min-width: 17.5rem;
+  --ids-section-4-columns-min-width: 17.5rem;
+  --ids-section-6-columns-min-width: 17.5rem;
+  --ids-section-8-columns-min-width: 17.5rem;
+  --ids-section-9-columns-min-width: 17.5rem;
+  --ids-section-12-columns-min-width: 17.5rem;
+  --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-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-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-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-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-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);
+	}
+}