@inera/ids-design 9.1.0 → 9.2.0

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

@@ -0,0 +1,951 @@
+/* Autogenerated by src/style-dictionary/build.js */
+.ids--inera-general.ids--light, .ids--inera-general.ids--dark {
+  
+	/*Spacing tokens*/
+
+  --ids-0: 0;
+  --ids-2: 0.125rem;
+  --ids-4: 0.25rem;
+  --ids-6: 0.375rem;
+  --ids-8: 0.5rem;
+  --ids-12: 0.75rem;
+  --ids-14: 0.875rem;
+  --ids-16: 1rem;
+  --ids-20: 1.25rem;
+  --ids-24: 1.5rem;
+  --ids-28: 1.75rem;
+  --ids-32: 2rem;
+  --ids-36: 2.25rem;
+  --ids-40: 2.5rem;
+  --ids-48: 3rem;
+  --ids-56: 3.5rem;
+  --ids-60: 3.75rem;
+  --ids-64: 4rem;
+  --ids-72: 4.5rem;
+  --ids-80: 5rem;
+  --ids-88: 5.5rem;
+  --ids-96: 6rem;
+  --ids-120: 7.5rem;
+  --ids-152: 9.5rem;
+  
+	/*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-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-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: #383d42;
+  --ids-palette-neutral-40: #4d545c;
+  --ids-palette-neutral-50: #5f6770;
+  --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-information-40: #1775d3;
+  --ids-palette-information-50: #489aeb;
+  --ids-palette-information-95: #f6fafe;
+  --ids-palette-success-40: #297a54;
+  --ids-palette-success-50: #40966d;
+  --ids-palette-success-95: #f6fefb;
+  --ids-palette-attention-40: #bd7100;
+  --ids-palette-attention-50: #db901b;
+  --ids-palette-attention-95: #fffbf2;
+  --ids-palette-error-40: #bb2f1c;
+  --ids-palette-error-50: #d74f3d;
+  --ids-palette-error-95: #fff8f7;
+  --ids-layout-content-max-width: 120rem;
+  --ids-layout-text-max-width: 40rem;
+  
+	/*Theme tokens*/
+
+  --ids-header-navbar-item-padding-vertical: 0.5rem;
+  --ids-header-navbar-item-font-size: 1rem;
+  --ids-header-navbar-item-font-weight: 400;
+  --ids-card-mobile-padding-horizontal: 1rem;
+  --ids-card-mobile-padding-vertical: 1.25rem;
+  --ids-card-desktop-padding-horizontal: 1.25rem;
+  --ids-card-desktop-padding-vertical: 1.5rem;
+  --ids-input-height: 3rem;
+  --ids-input-padding-x: 1.25rem;
+  --ids-textarea-padding-x: 1.25rem;
+  --ids-select-height: 3rem;
+  --ids-select-padding-x: 1.25rem;
+  --ids-search-button-small-padding-x: 1.75rem;
+  --ids-search-button-small-padding-y: 0.75rem;
+  --ids-search-button-small-font-size: 1.125rem;
+  --ids-search-button-small-line-height: 1.5rem;
+  --ids-border-radius-none: 0;
+  --ids-border-radius-small: 0.125rem;
+  --ids-border-radius-medium: 0.25rem;
+  --ids-border-radius-large: 0.5rem;
+  --ids-border-radius-full: 62.4375rem;
+  --ids-border-width-light-general: 0.0625rem;
+  --ids-border-width-light-invalid: 0.125rem;
+  --ids-border-width-dark-general: 0.125rem;
+  --ids-border-width-dark-invalid: 0.125rem;
+  --ids-font-family-primary: Open sans;
+  --ids-font-family-secondary: Poppins;
+  --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-font-size-mobile-heading-xxl: 1.875rem;
+  --ids-font-size-mobile-heading-xl: 1.625rem;
+  --ids-font-size-mobile-heading-l: 1.5rem;
+  --ids-font-size-mobile-heading-m: 1.375rem;
+  --ids-font-size-mobile-heading-s: 1.25rem;
+  --ids-font-size-mobile-heading-xs: 1rem;
+  --ids-font-size-mobile-preamble: 1.125rem;
+  --ids-font-size-mobile-body-text: 1rem;
+  --ids-font-size-mobile-small-text: 0.875rem;
+  --ids-font-size-mobile-badge: 0.75rem;
+  --ids-font-size-mobile-header-admin-title: 1rem;
+  --ids-font-size-mobile-header-admin-title-extra: 0.625rem;
+  --ids-font-size-mobile-header-profession-title: 1rem;
+  --ids-font-size-mobile-button-l: 1.125rem;
+  --ids-font-size-mobile-button-m: 1rem;
+  --ids-font-size-mobile-button-s: 0.875rem;
+  --ids-font-size-mobile-icon-button-l: 1.5rem;
+  --ids-font-size-mobile-icon-button-m: 1.25rem;
+  --ids-font-size-mobile-icon-button-s: 1rem;
+  --ids-font-size-desktop-heading-xxl: 2.5rem;
+  --ids-font-size-desktop-heading-xl: 2rem;
+  --ids-font-size-desktop-heading-l: 1.75rem;
+  --ids-font-size-desktop-heading-m: 1.5rem;
+  --ids-font-size-desktop-heading-s: 1.25rem;
+  --ids-font-size-desktop-heading-xs: 1rem;
+  --ids-font-size-desktop-preamble: 1.375rem;
+  --ids-font-size-desktop-body-text: 1rem;
+  --ids-font-size-desktop-small-text: 0.875rem;
+  --ids-font-size-desktop-badge: 0.875rem;
+  --ids-font-size-desktop-header-admin-title: 1.25rem;
+  --ids-font-size-desktop-header-admin-title-extra: 0.875rem;
+  --ids-font-size-desktop-header-profession-title: 1.25rem;
+  --ids-font-size-desktop-button-l: 1.125rem;
+  --ids-font-size-desktop-button-m: 1rem;
+  --ids-font-size-desktop-button-s: 0.875rem;
+  --ids-font-size-desktop-icon-button-l: 1.5rem;
+  --ids-font-size-desktop-icon-button-m: 1.25rem;
+  --ids-font-size-desktop-icon-button-s: 1rem;
+  --ids-font-line-height-mobile-heading-xxl: 2.375rem;
+  --ids-font-line-height-mobile-heading-xl: 2rem;
+  --ids-font-line-height-mobile-heading-l: 1.875rem;
+  --ids-font-line-height-mobile-heading-m: 1.75rem;
+  --ids-font-line-height-mobile-heading-s: 1.5rem;
+  --ids-font-line-height-mobile-heading-xs: 1.25rem;
+  --ids-font-line-height-mobile-preamble: 1.75rem;
+  --ids-font-line-height-mobile-body-text: 1.5rem;
+  --ids-font-line-height-mobile-small-text: 1.25rem;
+  --ids-font-line-height-mobile-header-admin-title: 0.875rem;
+  --ids-font-line-height-mobile-header-admin-title-extra: 0.875rem;
+  --ids-font-line-height-mobile-header-profession-title: 1.25rem;
+  --ids-font-line-height-mobile-button-l: 1.25rem;
+  --ids-font-line-height-mobile-button-m: 1.25rem;
+  --ids-font-line-height-mobile-button-s: 1rem;
+  --ids-font-line-height-desktop-heading-xxl: 3.125rem;
+  --ids-font-line-height-desktop-heading-xl: 2.5rem;
+  --ids-font-line-height-desktop-heading-l: 2.25rem;
+  --ids-font-line-height-desktop-heading-m: 2rem;
+  --ids-font-line-height-desktop-heading-s: 1.625rem;
+  --ids-font-line-height-desktop-heading-xs: 1.25rem;
+  --ids-font-line-height-desktop-preamble: 2.25rem;
+  --ids-font-line-height-desktop-body-text: 1.5rem;
+  --ids-font-line-height-desktop-small-text: 1.25rem;
+  --ids-font-line-height-desktop-header-admin-title: 1.5rem;
+  --ids-font-line-height-desktop-header-admin-title-extra: 1.25rem;
+  --ids-font-line-height-desktop-header-profession-title: 1.5rem;
+  --ids-font-line-height-desktop-button-l: 1.25rem;
+  --ids-font-line-height-desktop-button-m: 1.25rem;
+  --ids-font-line-height-desktop-button-s: 1rem;
+  --ids-font-letter-spacing-mobile-heading-xxl: 0;
+  --ids-font-letter-spacing-mobile-heading-xl: 0;
+  --ids-font-letter-spacing-mobile-heading-l: 0;
+  --ids-font-letter-spacing-mobile-heading-m: 0;
+  --ids-font-letter-spacing-mobile-heading-s: 0;
+  --ids-font-letter-spacing-mobile-heading-xs: 0;
+  --ids-font-letter-spacing-mobile-preamble: 0;
+  --ids-font-letter-spacing-mobile-body-text: 0;
+  --ids-font-letter-spacing-mobile-small-text: 0;
+  --ids-font-letter-spacing-mobile-header-admin-title: 0;
+  --ids-font-letter-spacing-mobile-header-admin-title-extra: 0;
+  --ids-font-letter-spacing-mobile-header-profession-title: 0;
+  --ids-font-letter-spacing-mobile-button-l: 0;
+  --ids-font-letter-spacing-mobile-button-m: 0;
+  --ids-font-letter-spacing-mobile-button-s: 0;
+  --ids-font-letter-spacing-desktop-heading-xxl: 0;
+  --ids-font-letter-spacing-desktop-heading-xl: 0;
+  --ids-font-letter-spacing-desktop-heading-l: 0;
+  --ids-font-letter-spacing-desktop-heading-m: 0;
+  --ids-font-letter-spacing-desktop-heading-s: 0;
+  --ids-font-letter-spacing-desktop-heading-xs: 0;
+  --ids-font-letter-spacing-desktop-preamble: 0;
+  --ids-font-letter-spacing-desktop-body-text: 0;
+  --ids-font-letter-spacing-desktop-small-text: 0;
+  --ids-font-letter-spacing-desktop-header-admin-title: 0;
+  --ids-font-letter-spacing-desktop-header-admin-title-extra: 0;
+  --ids-font-letter-spacing-desktop-header-profession-title: 0;
+  --ids-font-letter-spacing-desktop-button-l: 0;
+  --ids-font-letter-spacing-desktop-button-m: 0;
+  --ids-font-letter-spacing-desktop-button-s: 0;
+  --ids-color-light-surface-background-default: var(--ids-palette-neutral-100);
+  --ids-color-light-surface-border-default: var(--ids-palette-neutral-90);
+  --ids-color-light-surface-text-on-default: var(--ids-palette-neutral-30);
+  --ids-color-light-surface-text-subtle-on-default: var(--ids-palette-neutral-40);
+  --ids-color-light-surface-background-elevated-1: var(--ids-palette-neutral-100);
+  --ids-color-light-surface-border-elevated-1: var(--ids-palette-neutral-90);
+  --ids-color-light-surface-text-on-elevated-1: var(--ids-palette-neutral-30);
+  --ids-color-light-surface-text-subtle-on-elevated-1: var(--ids-palette-neutral-40);
+  --ids-color-light-surface-background-elevated-1-hover: var(--ids-palette-neutral-100);
+  --ids-color-light-surface-background-elevated-1-active: var(--ids-palette-neutral-100);
+  --ids-color-light-surface-background-elevated-2: var(--ids-palette-neutral-100);
+  --ids-color-light-surface-border-elevated-2: var(--ids-palette-neutral-90);
+  --ids-color-light-surface-text-on-elevated-2: var(--ids-palette-neutral-30);
+  --ids-color-light-surface-background-alternative: var(--ids-palette-secondary-95);
+  --ids-color-light-surface-text-on-alternative: var(--ids-palette-neutral-30);
+  --ids-color-light-surface-background-alternative-elevated-1: var(--ids-palette-secondary-95);
+  --ids-color-light-surface-text-on-alternative-elevated-1: var(--ids-palette-neutral-30);
+  --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-neutral-100);
+  --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-background-footer: var(--ids-palette-accent-40);
+  --ids-color-light-brand-text-on-footer: var(--ids-palette-neutral-100);
+  --ids-color-light-brand-text-on-footer-link: var(--ids-palette-neutral-100);
+  --ids-color-light-brand-background-footer-bottom: var(--ids-palette-accent-30);
+  --ids-color-light-brand-background-table-header: var(--ids-palette-secondary-90);
+  --ids-color-light-brand-background-table-selected: 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-30);
+  --ids-color-light-navigation-border-active: var(--ids-palette-accent-30);
+  --ids-color-light-navigation-text-active: var(--ids-palette-accent-30);
+  --ids-color-light-navigation-text-on-active: var(--ids-palette-neutral-100);
+  --ids-color-light-interactive-background-default: var(--ids-palette-accent-40);
+  --ids-color-light-interactive-border-default: var(--ids-palette-accent-40);
+  --ids-color-light-interactive-text-default: var(--ids-palette-accent-40);
+  --ids-color-light-interactive-text-on-default: var(--ids-palette-neutral-100);
+  --ids-color-light-interactive-background-hover: var(--ids-palette-accent-30);
+  --ids-color-light-interactive-border-hover: var(--ids-palette-accent-30);
+  --ids-color-light-interactive-text-hover: var(--ids-palette-accent-30);
+  --ids-color-light-interactive-text-on-hover: var(--ids-palette-neutral-100);
+  --ids-color-light-interactive-background-active: var(--ids-palette-accent-20);
+  --ids-color-light-interactive-border-active: var(--ids-palette-accent-20);
+  --ids-color-light-interactive-text-active: var(--ids-palette-accent-20);
+  --ids-color-light-interactive-text-on-active: var(--ids-palette-neutral-100);
+  --ids-color-light-interactive-toggle-marker-disabled: var(--ids-palette-neutral-90);
+  --ids-color-light-interactive-background-disabled: var(--ids-palette-neutral-95);
+  --ids-color-light-interactive-border-disabled: var(--ids-palette-neutral-95);
+  --ids-color-light-interactive-text-disabled: var(--ids-palette-neutral-70);
+  --ids-color-light-interactive-text-on-disabled: var(--ids-palette-neutral-70);
+  --ids-color-light-interactive-focus-outline: var(--ids-palette-neutral-30);
+  --ids-color-light-interactive-focus-outline-on: var(--ids-palette-neutral-100);
+  --ids-color-light-feedback-background-information: var(--ids-palette-information-95);
+  --ids-color-light-feedback-border-information: var(--ids-palette-information-40);
+  --ids-color-light-feedback-text-on-information: var(--ids-palette-neutral-30);
+  --ids-color-light-feedback-text-information: var(--ids-palette-information-40);
+  --ids-color-light-feedback-background-success: var(--ids-palette-success-95);
+  --ids-color-light-feedback-border-success: var(--ids-palette-success-40);
+  --ids-color-light-feedback-text-on-success: var(--ids-palette-neutral-30);
+  --ids-color-light-feedback-text-success: var(--ids-palette-success-40);
+  --ids-color-light-feedback-background-attention: var(--ids-palette-attention-95);
+  --ids-color-light-feedback-border-attention: var(--ids-palette-attention-40);
+  --ids-color-light-feedback-text-on-attention: var(--ids-palette-neutral-30);
+  --ids-color-light-feedback-text-attention: var(--ids-palette-attention-40);
+  --ids-color-light-feedback-background-error: var(--ids-palette-error-95);
+  --ids-color-light-feedback-border-error: var(--ids-palette-error-40);
+  --ids-color-light-feedback-text-on-error: var(--ids-palette-neutral-30);
+  --ids-color-light-feedback-text-error: var(--ids-palette-error-40);
+  --ids-color-light-feedback-background-notification: var(--ids-palette-primary-40);
+  --ids-color-light-feedback-text-on-notification: var(--ids-palette-neutral-100);
+  --ids-color-light-form-background-default: var(--ids-palette-secondary-95);
+  --ids-color-light-form-border-default: var(--ids-palette-accent-40);
+  --ids-color-light-form-text-on-default: var(--ids-palette-neutral-30);
+  --ids-color-light-form-placeholder-text-on-default: var(--ids-palette-neutral-40);
+  --ids-color-light-form-background-light-default: var(--ids-palette-neutral-100);
+  --ids-color-light-form-border-light-default: var(--ids-palette-accent-40);
+  --ids-color-light-form-text-on-light-default: var(--ids-palette-neutral-30);
+  --ids-color-light-form-placeholder-text-on-light-default: var(--ids-palette-neutral-40);
+  --ids-color-light-form-background-hover: var(--ids-palette-secondary-90);
+  --ids-color-light-form-border-hover: var(--ids-palette-accent-30);
+  --ids-color-light-form-text-on-hover: var(--ids-palette-neutral-30);
+  --ids-color-light-form-placeholder-text-on-hover: var(--ids-palette-neutral-40);
+  --ids-color-light-form-background-light-hover: var(--ids-palette-secondary-90);
+  --ids-color-light-form-border-light-hover: var(--ids-palette-accent-30);
+  --ids-color-light-form-text-on-light-hover: var(--ids-palette-neutral-30);
+  --ids-color-light-form-placeholder-text-on-light-hover: var(--ids-palette-neutral-40);
+  --ids-color-light-form-background-active: var(--ids-palette-secondary-95);
+  --ids-color-light-form-border-active: var(--ids-palette-accent-20);
+  --ids-color-light-form-text-on-active: var(--ids-palette-neutral-30);
+  --ids-color-light-form-placeholder-text-on-active: var(--ids-palette-neutral-40);
+  --ids-color-light-form-background-light-active: var(--ids-palette-neutral-100);
+  --ids-color-light-form-border-light-active: var(--ids-palette-accent-20);
+  --ids-color-light-form-text-on-light-active: var(--ids-palette-neutral-30);
+  --ids-color-light-form-placeholder-text-on-light-active: var(--ids-palette-neutral-40);
+  --ids-color-light-form-background-disabled: var(--ids-palette-neutral-95);
+  --ids-color-light-form-border-disabled: var(--ids-palette-neutral-95);
+  --ids-color-light-form-text-on-light-disabled: var(--ids-palette-neutral-70);
+  --ids-color-light-form-placeholder-text-on-light-disabled: var(--ids-palette-neutral-70);
+  --ids-color-light-form-background-light-disabled: var(--ids-palette-neutral-95);
+  --ids-color-light-form-border-light-disabled: var(--ids-palette-neutral-95);
+  --ids-color-light-form-text-on-disabled: var(--ids-palette-neutral-70);
+  --ids-color-light-form-placeholder-text-on-disabled: var(--ids-palette-neutral-70);
+  --ids-color-light-form-background-invalid: var(--ids-palette-error-95);
+  --ids-color-light-form-border-invalid: var(--ids-palette-error-40);
+  --ids-color-light-form-text-on-invalid: var(--ids-palette-neutral-30);
+  --ids-color-light-form-placeholder-text-on-invalid: var(--ids-palette-neutral-40);
+  --ids-color-light-form-message-border-invalid: var(--ids-palette-error-40);
+  --ids-color-light-form-border-light-invalid: var(--ids-palette-error-40);
+  --ids-color-light-form-text-on-light-invalid: var(--ids-palette-neutral-30);
+  --ids-color-light-form-placeholder-text-on-light-invalid: var(--ids-palette-neutral-40);
+  --ids-color-light-heading-xxl: var(--ids-palette-neutral-20);
+  --ids-color-light-heading-xl: var(--ids-palette-neutral-20);
+  --ids-color-light-heading-l: var(--ids-palette-neutral-20);
+  --ids-color-light-heading-m: var(--ids-palette-neutral-20);
+  --ids-color-light-heading-s: var(--ids-palette-neutral-20);
+  --ids-color-light-heading-xs: var(--ids-palette-neutral-20);
+  --ids-color-dark-surface-background-default: var(--ids-palette-neutral-10);
+  --ids-color-dark-surface-border-default: var(--ids-palette-neutral-40);
+  --ids-color-dark-surface-text-on-default: var(--ids-palette-neutral-90);
+  --ids-color-dark-surface-text-subtle-on-default: var(--ids-palette-neutral-70);
+  --ids-color-dark-surface-background-elevated-1: var(--ids-palette-neutral-20);
+  --ids-color-dark-surface-border-elevated-1: var(--ids-palette-neutral-30);
+  --ids-color-dark-surface-text-on-elevated-1: var(--ids-palette-neutral-90);
+  --ids-color-dark-surface-text-subtle-on-elevated-1: var(--ids-palette-neutral-90);
+  --ids-color-dark-surface-background-elevated-1-hover: var(--ids-palette-neutral-30);
+  --ids-color-dark-surface-background-elevated-1-active: var(--ids-palette-neutral-30);
+  --ids-color-dark-surface-background-elevated-2: var(--ids-palette-neutral-30);
+  --ids-color-dark-surface-border-elevated-2: var(--ids-palette-neutral-40);
+  --ids-color-dark-surface-text-on-elevated-2: var(--ids-palette-neutral-90);
+  --ids-color-dark-surface-background-alternative: var(--ids-palette-neutral-10);
+  --ids-color-dark-surface-text-on-alternative: var(--ids-palette-neutral-90);
+  --ids-color-dark-surface-background-alternative-elevated-1: var(--ids-palette-neutral-20);
+  --ids-color-dark-surface-text-on-alternative-elevated-1: var(--ids-palette-neutral-90);
+  --ids-color-dark-brand-background-primary: var(--ids-palette-neutral-20);
+  --ids-color-dark-brand-border-primary: var(--ids-palette-accent-50);
+  --ids-color-dark-brand-text-primary: var(--ids-palette-accent-60);
+  --ids-color-dark-brand-text-primary-subtle: var(--ids-palette-neutral-90);
+  --ids-color-dark-brand-text-on-primary: var(--ids-palette-neutral-100);
+  --ids-color-dark-brand-background-secondary: var(--ids-palette-neutral-20);
+  --ids-color-dark-brand-background-footer: var(--ids-palette-neutral-20);
+  --ids-color-dark-brand-text-on-footer: var(--ids-palette-neutral-90);
+  --ids-color-dark-brand-text-on-footer-link: var(--ids-palette-neutral-90);
+  --ids-color-dark-brand-background-footer-bottom: var(--ids-palette-accent-30);
+  --ids-color-dark-brand-background-table-header: var(--ids-palette-neutral-20);
+  --ids-color-dark-brand-background-table-selected: var(--ids-palette-neutral-20);
+  --ids-color-dark-brand-text-secondary: var(--ids-palette-accent-70);
+  --ids-color-dark-brand-text-on-secondary: var(--ids-palette-neutral-100);
+  --ids-color-dark-navigation-background-default: var(--ids-palette-neutral-10);
+  --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-10);
+  --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-10);
+  --ids-color-dark-interactive-background-default: var(--ids-palette-accent-60);
+  --ids-color-dark-interactive-border-default: var(--ids-palette-accent-60);
+  --ids-color-dark-interactive-text-default: var(--ids-palette-accent-60);
+  --ids-color-dark-interactive-text-on-default: var(--ids-palette-neutral-10);
+  --ids-color-dark-interactive-background-hover: var(--ids-palette-accent-70);
+  --ids-color-dark-interactive-border-hover: var(--ids-palette-accent-70);
+  --ids-color-dark-interactive-text-hover: var(--ids-palette-accent-70);
+  --ids-color-dark-interactive-text-on-hover: var(--ids-palette-neutral-10);
+  --ids-color-dark-interactive-background-active: var(--ids-palette-accent-50);
+  --ids-color-dark-interactive-border-active: var(--ids-palette-accent-50);
+  --ids-color-dark-interactive-text-active: var(--ids-palette-accent-50);
+  --ids-color-dark-interactive-text-on-active: var(--ids-palette-neutral-10);
+  --ids-color-dark-interactive-toggle-marker-disabled: var(--ids-palette-neutral-40);
+  --ids-color-dark-interactive-background-disabled: var(--ids-palette-neutral-30);
+  --ids-color-dark-interactive-border-disabled: var(--ids-palette-neutral-30);
+  --ids-color-dark-interactive-text-disabled: var(--ids-palette-neutral-60);
+  --ids-color-dark-interactive-text-on-disabled: var(--ids-palette-neutral-60);
+  --ids-color-dark-interactive-focus-outline: var(--ids-palette-neutral-99);
+  --ids-color-dark-interactive-focus-outline-on: var(--ids-palette-neutral-99);
+  --ids-color-dark-feedback-background-information: var(--ids-palette-neutral-20);
+  --ids-color-dark-feedback-border-information: var(--ids-palette-information-50);
+  --ids-color-dark-feedback-text-on-information: var(--ids-palette-neutral-90);
+  --ids-color-dark-feedback-text-information: var(--ids-palette-information-50);
+  --ids-color-dark-feedback-background-success: var(--ids-palette-neutral-20);
+  --ids-color-dark-feedback-border-success: var(--ids-palette-success-50);
+  --ids-color-dark-feedback-text-on-success: var(--ids-palette-neutral-90);
+  --ids-color-dark-feedback-text-success: var(--ids-palette-success-50);
+  --ids-color-dark-feedback-background-attention: var(--ids-palette-neutral-20);
+  --ids-color-dark-feedback-border-attention: var(--ids-palette-attention-50);
+  --ids-color-dark-feedback-text-on-attention: var(--ids-palette-neutral-90);
+  --ids-color-dark-feedback-text-attention: var(--ids-palette-attention-50);
+  --ids-color-dark-feedback-background-error: var(--ids-palette-neutral-20);
+  --ids-color-dark-feedback-border-error: var(--ids-palette-error-50);
+  --ids-color-dark-feedback-text-on-error: var(--ids-palette-neutral-90);
+  --ids-color-dark-feedback-text-error: var(--ids-palette-error-50);
+  --ids-color-dark-feedback-background-notification: var(--ids-palette-primary-40);
+  --ids-color-dark-feedback-text-on-notification: var(--ids-palette-neutral-100);
+  --ids-color-dark-form-background-default: var(--ids-palette-neutral-10);
+  --ids-color-dark-form-border-default: var(--ids-palette-accent-70);
+  --ids-color-dark-form-text-on-default: var(--ids-palette-neutral-90);
+  --ids-color-dark-form-placeholder-text-on-default: var(--ids-palette-neutral-90);
+  --ids-color-dark-form-background-light-default: var(--ids-palette-neutral-10);
+  --ids-color-dark-form-border-light-default: var(--ids-palette-accent-70);
+  --ids-color-dark-form-text-on-light-default: var(--ids-palette-neutral-90);
+  --ids-color-dark-form-placeholder-text-on-light-default: var(--ids-palette-neutral-90);
+  --ids-color-dark-form-background-hover: var(--ids-palette-neutral-20);
+  --ids-color-dark-form-border-hover: var(--ids-palette-neutral-90);
+  --ids-color-dark-form-text-on-hover: var(--ids-palette-neutral-90);
+  --ids-color-dark-form-placeholder-text-on-hover: var(--ids-palette-neutral-90);
+  --ids-color-dark-form-background-light-hover: var(--ids-palette-neutral-20);
+  --ids-color-dark-form-border-light-hover: var(--ids-palette-neutral-90);
+  --ids-color-dark-form-text-on-light-hover: var(--ids-palette-neutral-90);
+  --ids-color-dark-form-placeholder-text-on-light-hover: var(--ids-palette-neutral-90);
+  --ids-color-dark-form-background-active: var(--ids-palette-neutral-10);
+  --ids-color-dark-form-border-active: var(--ids-palette-neutral-95);
+  --ids-color-dark-form-text-on-active: var(--ids-palette-neutral-90);
+  --ids-color-dark-form-placeholder-text-on-active: var(--ids-palette-neutral-90);
+  --ids-color-dark-form-background-light-active: var(--ids-palette-neutral-10);
+  --ids-color-dark-form-border-light-active: var(--ids-palette-neutral-95);
+  --ids-color-dark-form-text-on-light-active: var(--ids-palette-neutral-90);
+  --ids-color-dark-form-placeholder-text-on-light-active: var(--ids-palette-neutral-90);
+  --ids-color-dark-form-background-disabled: var(--ids-palette-neutral-30);
+  --ids-color-dark-form-border-disabled: var(--ids-palette-neutral-30);
+  --ids-color-dark-form-text-on-light-disabled: var(--ids-palette-neutral-60);
+  --ids-color-dark-form-placeholder-text-on-light-disabled: var(--ids-palette-neutral-60);
+  --ids-color-dark-form-background-light-disabled: var(--ids-palette-neutral-30);
+  --ids-color-dark-form-border-light-disabled: var(--ids-palette-neutral-30);
+  --ids-color-dark-form-text-on-disabled: var(--ids-palette-neutral-60);
+  --ids-color-dark-form-placeholder-text-on-disabled: var(--ids-palette-neutral-60);
+  --ids-color-dark-form-background-invalid: var(--ids-palette-neutral-10);
+  --ids-color-dark-form-border-invalid: var(--ids-palette-error-50);
+  --ids-color-dark-form-text-on-invalid: var(--ids-palette-neutral-90);
+  --ids-color-dark-form-placeholder-text-on-invalid: var(--ids-palette-neutral-90);
+  --ids-color-dark-form-message-border-invalid: var(--ids-palette-error-50);
+  --ids-color-dark-form-border-light-invalid: var(--ids-palette-error-50);
+  --ids-color-dark-form-text-on-light-invalid: var(--ids-palette-neutral-90);
+  --ids-color-dark-form-placeholder-text-on-light-invalid: var(--ids-palette-neutral-90);
+  --ids-color-dark-heading-xxl: var(--ids-palette-neutral-95);
+  --ids-color-dark-heading-xl: var(--ids-palette-neutral-95);
+  --ids-color-dark-heading-l: var(--ids-palette-neutral-95);
+  --ids-color-dark-heading-m: var(--ids-palette-neutral-95);
+  --ids-color-dark-heading-s: var(--ids-palette-neutral-95);
+  --ids-color-dark-heading-xs: var(--ids-palette-neutral-95);
+  --ids-border-radius-button: var(--ids-border-radius-medium);
+  --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-light-form-message-background-invalid: var(--ids-color-light-surface-background-elevated-1);
+  --ids-color-light-form-message-text-on-invalid: var(--ids-color-light-surface-text-on-elevated-1);
+  --ids-color-light-form-background-light-invalid: var(--ids-color-light-feedback-background-error);
+  --ids-color-dark-form-message-background-invalid: var(--ids-color-dark-surface-background-elevated-1);
+  --ids-color-dark-form-message-text-on-invalid: var(--ids-color-dark-surface-text-on-elevated-1);
+  --ids-color-dark-form-background-light-invalid: var(--ids-color-dark-feedback-background-error);
+}
+
+	
+	/*Light tokens*/
+.ids--inera-general.ids--light {
+	--ids-color-chart-1: #1e65e6;
+  --ids-color-chart-2: #d67900;
+  --ids-color-chart-3: #035c00;
+  --ids-color-chart-4: #dc748b;
+  --ids-color-chart-5: #343941;
+  --ids-color-chart-6: #9b89cd;
+  --ids-color-chart-7: #812861;
+  --ids-color-chart-8: #09a5a5;
+  --ids-color-chart-9: #b2492e;
+  --ids-color-chart-10: #87989c;
+  --ids-border-width-general: 0.1875rem;
+  --ids-border-width-invalid: 0.1875rem;
+  --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-color-surface-background-default: var(--ids-palette-neutral-100);
+  --ids-color-surface-border-default: var(--ids-palette-neutral-90);
+  --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-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-30);
+  --ids-color-surface-background-alternative: var(--ids-palette-secondary-95);
+  --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-30);
+  --ids-color-brand-background-primary: var(--ids-palette-accent-40);
+  --ids-color-brand-border-primary: var(--ids-palette-accent-40);
+  --ids-color-brand-text-primary: var(--ids-palette-accent-40);
+  --ids-color-brand-text-primary-subtle: var(--ids-palette-neutral-100);
+  --ids-color-brand-text-on-primary: var(--ids-palette-neutral-100);
+  --ids-color-brand-background-secondary: var(--ids-palette-secondary-95);
+  --ids-color-brand-background-footer: var(--ids-palette-accent-40);
+  --ids-color-brand-background-footer-bottom: var(--ids-palette-accent-30);
+  --ids-color-brand-text-on-footer: var(--ids-palette-neutral-100);
+  --ids-color-brand-text-on-footer-link: var(--ids-palette-neutral-100);
+  --ids-color-brand-background-table-header: var(--ids-palette-secondary-90);
+  --ids-color-brand-background-table-selected: var(--ids-palette-secondary-95);
+  --ids-color-brand-text-secondary: var(--ids-palette-accent-30);
+  --ids-color-brand-text-on-secondary: var(--ids-palette-neutral-30);
+  --ids-color-navigation-background-default: var(--ids-palette-accent-40);
+  --ids-color-navigation-border-default: var(--ids-palette-accent-40);
+  --ids-color-navigation-text-default: var(--ids-palette-accent-40);
+  --ids-color-navigation-icon-default: var(--ids-palette-accent-40);
+  --ids-color-navigation-text-on-default: var(--ids-palette-neutral-100);
+  --ids-color-navigation-background-hover: var(--ids-palette-accent-30);
+  --ids-color-navigation-border-hover: var(--ids-palette-accent-30);
+  --ids-color-navigation-text-hover: var(--ids-palette-accent-30);
+  --ids-color-navigation-text-on-hover: var(--ids-palette-neutral-100);
+  --ids-color-navigation-background-active: var(--ids-palette-accent-30);
+  --ids-color-navigation-border-active: var(--ids-palette-accent-30);
+  --ids-color-navigation-text-active: var(--ids-palette-accent-30);
+  --ids-color-navigation-text-on-active: var(--ids-palette-neutral-100);
+  --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);
+  --ids-color-interactive-text-on-default: var(--ids-palette-neutral-100);
+  --ids-color-interactive-background-hover: var(--ids-palette-accent-30);
+  --ids-color-interactive-border-hover: var(--ids-palette-accent-30);
+  --ids-color-interactive-text-hover: var(--ids-palette-accent-30);
+  --ids-color-interactive-text-on-hover: var(--ids-palette-neutral-100);
+  --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-text-on-active: var(--ids-palette-neutral-100);
+  --ids-color-interactive-toggle-marker-disabled: var(--ids-palette-neutral-90);
+  --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-information-95);
+  --ids-color-feedback-border-information: var(--ids-palette-information-40);
+  --ids-color-feedback-text-on-information: var(--ids-palette-neutral-30);
+  --ids-color-feedback-text-information: var(--ids-palette-information-40);
+  --ids-color-feedback-background-success: var(--ids-palette-success-95);
+  --ids-color-feedback-border-success: var(--ids-palette-success-40);
+  --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-attention-40);
+  --ids-color-feedback-text-on-attention: var(--ids-palette-neutral-30);
+  --ids-color-feedback-text-attention: var(--ids-palette-attention-40);
+  --ids-color-feedback-background-error: var(--ids-palette-error-95);
+  --ids-color-feedback-border-error: var(--ids-palette-error-40);
+  --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-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-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-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-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-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-95);
+  --ids-color-form-border-invalid: var(--ids-palette-error-40);
+  --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-border-invalid: var(--ids-palette-error-40);
+  --ids-color-form-border-light-invalid: var(--ids-palette-error-40);
+  --ids-color-form-text-on-light-invalid: var(--ids-palette-neutral-90);
+  --ids-color-form-placeholder-text-on-light-invalid: var(--ids-palette-neutral-40);
+  --ids-color-heading-text-xxl: var(--ids-palette-neutral-20);
+  --ids-color-heading-text-xl: var(--ids-palette-neutral-20);
+  --ids-color-heading-text-l: var(--ids-palette-neutral-20);
+  --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-form-message-background-invalid: var(--ids-color-surface-background-elevated-1);
+  --ids-color-form-message-text-on-invalid: var(--ids-color-surface-text-on-elevated-1);
+  --ids-color-form-background-light-invalid: var(--ids-color-light-form-background-light-invalid);
+}
+
+	
+	/*Dark tokens*/
+.ids--inera-general.ids--dark {
+	--ids-color-chart-1: #2f6fe4;
+  --ids-color-chart-2: #f5ae3d;
+  --ids-color-chart-3: #26733d;
+  --ids-color-chart-4: #e3abb7;
+  --ids-color-chart-5: #666f7f;
+  --ids-color-chart-6: #b0a2d7;
+  --ids-color-chart-7: #b3478c;
+  --ids-color-chart-8: #74d0dc;
+  --ids-color-chart-9: #ce593b;
+  --ids-color-chart-10: #b9c3c6;
+  --ids-border-width-general: 0.1875rem;
+  --ids-border-width-invalid: 0.1875rem;
+  --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-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-90);
+  --ids-color-surface-text-subtle-on-default: var(--ids-palette-neutral-70);
+  --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-90);
+  --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-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-background-primary: var(--ids-palette-neutral-20);
+  --ids-color-brand-border-primary: var(--ids-palette-accent-50);
+  --ids-color-brand-text-primary: var(--ids-palette-accent-60);
+  --ids-color-brand-text-primary-subtle: var(--ids-palette-neutral-90);
+  --ids-color-brand-text-on-primary: var(--ids-palette-neutral-100);
+  --ids-color-brand-background-secondary: var(--ids-palette-neutral-20);
+  --ids-color-brand-background-footer: var(--ids-palette-neutral-20);
+  --ids-color-brand-background-footer-bottom: var(--ids-palette-accent-30);
+  --ids-color-brand-text-on-footer: var(--ids-palette-neutral-90);
+  --ids-color-brand-text-on-footer-link: var(--ids-palette-neutral-90);
+  --ids-color-brand-background-table-header: var(--ids-palette-neutral-20);
+  --ids-color-brand-background-table-selected: var(--ids-palette-neutral-20);
+  --ids-color-brand-text-secondary: var(--ids-palette-accent-70);
+  --ids-color-brand-text-on-secondary: var(--ids-palette-neutral-100);
+  --ids-color-navigation-background-default: var(--ids-palette-neutral-20);
+  --ids-color-navigation-border-default: var(--ids-palette-accent-70);
+  --ids-color-navigation-text-default: var(--ids-palette-neutral-100);
+  --ids-color-navigation-icon-default: var(--ids-palette-neutral-100);
+  --ids-color-navigation-text-on-default: var(--ids-palette-neutral-100);
+  --ids-color-navigation-background-hover: var(--ids-palette-accent-60);
+  --ids-color-navigation-border-hover: var(--ids-palette-accent-60);
+  --ids-color-navigation-text-hover: var(--ids-palette-neutral-100);
+  --ids-color-navigation-text-on-hover: var(--ids-palette-neutral-10);
+  --ids-color-navigation-background-active: var(--ids-palette-accent-50);
+  --ids-color-navigation-border-active: var(--ids-palette-accent-50);
+  --ids-color-navigation-text-active: var(--ids-palette-neutral-100);
+  --ids-color-navigation-text-on-active: var(--ids-palette-neutral-10);
+  --ids-color-navigation-text-on-secondary: var(--ids-palette-neutral-90);
+  --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-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-toggle-marker-disabled: var(--ids-palette-neutral-40);
+  --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-20);
+  --ids-color-feedback-border-information: var(--ids-palette-information-50);
+  --ids-color-feedback-text-on-information: var(--ids-palette-neutral-90);
+  --ids-color-feedback-text-information: var(--ids-palette-information-50);
+  --ids-color-feedback-background-success: var(--ids-palette-neutral-20);
+  --ids-color-feedback-border-success: var(--ids-palette-success-50);
+  --ids-color-feedback-text-on-success: var(--ids-palette-neutral-90);
+  --ids-color-feedback-text-success: var(--ids-palette-success-50);
+  --ids-color-feedback-background-attention: var(--ids-palette-neutral-20);
+  --ids-color-feedback-border-attention: var(--ids-palette-attention-50);
+  --ids-color-feedback-text-on-attention: var(--ids-palette-neutral-90);
+  --ids-color-feedback-text-attention: var(--ids-palette-attention-50);
+  --ids-color-feedback-background-error: var(--ids-palette-neutral-20);
+  --ids-color-feedback-border-error: var(--ids-palette-error-50);
+  --ids-color-feedback-text-on-error: var(--ids-palette-neutral-90);
+  --ids-color-feedback-text-error: var(--ids-palette-error-50);
+  --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-70);
+  --ids-color-form-text-on-default: var(--ids-palette-neutral-90);
+  --ids-color-form-placeholder-text-on-default: var(--ids-palette-neutral-90);
+  --ids-color-form-background-light-default: var(--ids-palette-neutral-10);
+  --ids-color-form-border-light-default: var(--ids-palette-accent-70);
+  --ids-color-form-text-on-light-default: var(--ids-palette-neutral-90);
+  --ids-color-form-placeholder-text-on-light-default: var(--ids-palette-neutral-90);
+  --ids-color-form-background-hover: var(--ids-palette-neutral-20);
+  --ids-color-form-border-hover: var(--ids-palette-neutral-90);
+  --ids-color-form-text-on-hover: var(--ids-palette-neutral-90);
+  --ids-color-form-placeholder-text-on-hover: var(--ids-palette-neutral-90);
+  --ids-color-form-background-light-hover: var(--ids-palette-neutral-20);
+  --ids-color-form-border-light-hover: var(--ids-palette-neutral-90);
+  --ids-color-form-text-on-light-hover: var(--ids-palette-neutral-90);
+  --ids-color-form-placeholder-text-on-light-hover: var(--ids-palette-neutral-90);
+  --ids-color-form-background-active: var(--ids-palette-neutral-10);
+  --ids-color-form-border-active: var(--ids-palette-neutral-95);
+  --ids-color-form-text-on-active: var(--ids-palette-neutral-90);
+  --ids-color-form-placeholder-text-on-active: var(--ids-palette-neutral-90);
+  --ids-color-form-background-light-active: var(--ids-palette-neutral-10);
+  --ids-color-form-border-light-active: var(--ids-palette-neutral-95);
+  --ids-color-form-text-on-light-active: var(--ids-palette-neutral-90);
+  --ids-color-form-placeholder-text-on-light-active: var(--ids-palette-neutral-90);
+  --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-50);
+  --ids-color-form-text-on-invalid: var(--ids-palette-neutral-90);
+  --ids-color-form-placeholder-text-on-invalid: var(--ids-palette-neutral-90);
+  --ids-color-form-message-border-invalid: var(--ids-palette-error-50);
+  --ids-color-form-border-light-invalid: var(--ids-palette-error-50);
+  --ids-color-form-text-on-light-invalid: var(--ids-palette-neutral-90);
+  --ids-color-form-placeholder-text-on-light-invalid: var(--ids-palette-neutral-90);
+  --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-form-message-background-invalid: var(--ids-color-surface-background-elevated-1);
+  --ids-color-form-message-text-on-invalid: var(--ids-color-surface-text-on-elevated-1);
+  --ids-color-form-background-light-invalid: var(--ids-color-feedback-background-error);
+}
+
+	
+	/*Desktop tokens*/
+.ids--inera-general.ids--light, .ids--inera-general.ids--dark {
+	--ids-card-padding-horizontal: 1.25rem;
+  --ids-card-padding-vertical: 1.5rem;
+  --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-header-admin-title: 1.25rem;
+  --ids-font-size-header-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.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-header-admin-title: 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.25rem;
+  --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-header-admin-title: 0;
+  --ids-font-letter-spacing-header-admin-title-extra: 0;
+  --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;
+}
+	
+	/*Mobile tokens*/
+@media only screen and (max-width: 1024px) {
+	.ids--inera-general.ids--light, .ids--inera-general.ids--dark {
+	--ids-card-padding-horizontal: 1rem;
+  --ids-card-padding-vertical: 1.25rem;
+  --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-header-admin-title: 1rem;
+  --ids-font-size-header-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.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-header-admin-title: 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.25rem;
+  --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-header-admin-title: 0;
+  --ids-font-letter-spacing-header-admin-title-extra: 0;
+  --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;
+	}
+}