npm - @inera/ids-design - Versions diffs - 8.2.0 → 9.0.0 - Mend

@inera/ids-design 8.2.0 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (385) hide show

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

@@ -1,6 +1,32 @@
 /* Autogenerated by src/style-dictionary/build.js */
 .ids--inera-admin.ids--light, .ids--inera-admin.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-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;
@@ -28,13 +54,18 @@
   --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;
-  --ids-palette-attention-40: #ffd748;
-  --ids-palette-attention-95: #fff7d9;
-  --ids-palette-error-40: #db0f00;
-  --ids-palette-error-60: #f52819;
-  --ids-palette-error-99: #ffeceb;
+  --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;
@@ -42,11 +73,15 @@
   --ids-search-button-small-font-seize: 1rem;
   --ids-search-button-small-line-height: 1.25rem;
+  --ids-card-mobile-padding-horizontal: var(--ids-12);
+  --ids-card-mobile-padding-vertical: var(--ids-12);
+  --ids-card-desktop-padding-horizontal: var(--ids-12);
+  --ids-card-desktop-padding-vertical: var(--ids-12);
   --ids-input-height: var(--ids-36);
-  --ids-input-padding-x: var(--ids-16);
-  --ids-textarea-padding-x: var(--ids-16);
+  --ids-input-padding-x: var(--ids-12);
+  --ids-textarea-padding-x: var(--ids-12);
   --ids-select-height: var(--ids-36);
-  --ids-select-padding-x: var(--ids-16);
+  --ids-select-padding-x: var(--ids-12);
   --ids-search-button-small-padding-x: var(--ids-24);
   --ids-search-button-small-padding-y: var(--ids-8);
 }
@@ -109,8 +144,9 @@
   --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-60);
+  --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);
@@ -130,6 +166,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-background-footer: var(--ids-palette-secondary-90);
   --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);
@@ -164,19 +201,19 @@
   --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-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-neutral-30);
-  --ids-color-feedback-background-success: var(--ids-palette-success-99);
+  --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-neutral-40);
+  --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-neutral-30);
-  --ids-color-feedback-background-error: var(--ids-palette-error-99);
+  --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);
@@ -214,20 +251,20 @@
   --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-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-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-background-light-invalid: var(--ids-palette-error-95);
   --ids-color-form-border-light-invalid: var(--ids-palette-error-40);
   --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-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-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);
@@ -293,6 +330,7 @@
   --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);
@@ -312,6 +350,7 @@
   --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-20);
+  --ids-color-brand-background-footer: 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);
@@ -347,47 +386,47 @@
   --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-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-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-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-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-40);
+  --ids-color-feedback-border-attention: var(--ids-palette-attention-50);
   --ids-color-feedback-text-on-attention: var(--ids-palette-neutral-100);
-  --ids-color-feedback-text-attention: var(--ids-palette-attention-40);
+  --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-60);
+  --ids-color-feedback-border-error: var(--ids-palette-error-50);
   --ids-color-feedback-text-on-error: var(--ids-palette-neutral-100);
-  --ids-color-feedback-text-error: var(--ids-palette-error-60);
+  --ids-color-feedback-text-error: var(--ids-palette-error-50);
   --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-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-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-100);
-  --ids-color-form-placeholder-text-on-light-default: var(--ids-palette-neutral-99);
+  --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-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-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-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-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-100);
-  --ids-color-form-text-on-active: var(--ids-palette-neutral-100);
-  --ids-color-form-placeholder-text-on-active: var(--ids-palette-neutral-99);
+  --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-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-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);
@@ -397,22 +436,22 @@
   --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-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-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-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-background-light-invalid: var(--ids-palette-neutral-10);
-  --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-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-default);
 }
@@ -452,7 +491,7 @@
   --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-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;
@@ -511,8 +550,8 @@
   --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);
+  --ids-components-card-padding-horizontal: var(--ids-card-desktop-padding-horizontal);
+  --ids-components-card-padding-vertical: var(--ids-card-desktop-padding-vertical);
 }
 	/*Mobile tokens*/
@@ -553,7 +592,7 @@
   --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-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;
@@ -577,7 +616,7 @@
   --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-horizontal: var(--ids-88);
   --ids-main-padding-top: var(--ids-20);
   --ids-main-padding-bottom: var(--ids-96);
   --ids-size-relation-0-2: var(--ids-0);
@@ -611,7 +650,7 @@
   --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);
+  --ids-components-card-padding-horizontal: var(--ids-card-mobile-padding-horizontal);
+  --ids-components-card-padding-vertical: var(--ids-card-mobile-padding-vertical);
 	}
 }

package/tokens/themes/inera-tokens.css CHANGED Viewed

@@ -1,6 +1,32 @@
 /* Autogenerated by src/style-dictionary/build.js */
 .ids--inera.ids--light, .ids--inera.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-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;
@@ -28,13 +54,18 @@
   --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;
-  --ids-palette-attention-40: #ffd748;
-  --ids-palette-attention-95: #fff7d9;
-  --ids-palette-error-40: #db0f00;
-  --ids-palette-error-60: #f52819;
-  --ids-palette-error-99: #ffeceb;
+  --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;
@@ -42,6 +73,10 @@
   --ids-search-button-small-font-seize: 1.125rem;
   --ids-search-button-small-line-height: 1.5rem;
+  --ids-card-mobile-padding-horizontal: var(--ids-16);
+  --ids-card-mobile-padding-vertical: var(--ids-20);
+  --ids-card-desktop-padding-horizontal: var(--ids-20);
+  --ids-card-desktop-padding-vertical: var(--ids-24);
   --ids-input-height: var(--ids-48);
   --ids-input-padding-x: var(--ids-20);
   --ids-textarea-padding-x: var(--ids-20);
@@ -109,8 +144,9 @@
   --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-60);
+  --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);
@@ -130,6 +166,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-background-footer: var(--ids-palette-secondary-90);
   --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);
@@ -164,19 +201,19 @@
   --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-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-neutral-30);
-  --ids-color-feedback-background-success: var(--ids-palette-success-99);
+  --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-neutral-40);
+  --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-neutral-30);
-  --ids-color-feedback-background-error: var(--ids-palette-error-99);
+  --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);
@@ -214,20 +251,20 @@
   --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-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-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-background-light-invalid: var(--ids-palette-error-95);
   --ids-color-form-border-light-invalid: var(--ids-palette-error-40);
   --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-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-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);
@@ -293,6 +330,7 @@
   --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);
@@ -312,6 +350,7 @@
   --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-20);
+  --ids-color-brand-background-footer: 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);
@@ -347,47 +386,47 @@
   --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-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-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-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-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-40);
+  --ids-color-feedback-border-attention: var(--ids-palette-attention-50);
   --ids-color-feedback-text-on-attention: var(--ids-palette-neutral-100);
-  --ids-color-feedback-text-attention: var(--ids-palette-attention-40);
+  --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-60);
+  --ids-color-feedback-border-error: var(--ids-palette-error-50);
   --ids-color-feedback-text-on-error: var(--ids-palette-neutral-100);
-  --ids-color-feedback-text-error: var(--ids-palette-error-60);
+  --ids-color-feedback-text-error: var(--ids-palette-error-50);
   --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-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-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-100);
-  --ids-color-form-placeholder-text-on-light-default: var(--ids-palette-neutral-99);
+  --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-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-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-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-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-100);
-  --ids-color-form-text-on-active: var(--ids-palette-neutral-100);
-  --ids-color-form-placeholder-text-on-active: var(--ids-palette-neutral-99);
+  --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-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-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);
@@ -397,22 +436,22 @@
   --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-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-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-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-background-light-invalid: var(--ids-palette-neutral-10);
-  --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-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-default);
 }
@@ -452,7 +491,7 @@
   --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-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;
@@ -511,8 +550,8 @@
   --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);
+  --ids-components-card-padding-horizontal: var(--ids-card-desktop-padding-horizontal);
+  --ids-components-card-padding-vertical: var(--ids-card-desktop-padding-vertical);
 }
 	/*Mobile tokens*/
@@ -553,7 +592,7 @@
   --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-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;
@@ -577,7 +616,7 @@
   --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-horizontal: var(--ids-88);
   --ids-main-padding-top: var(--ids-20);
   --ids-main-padding-bottom: var(--ids-96);
   --ids-size-relation-0-2: var(--ids-0);
@@ -611,7 +650,7 @@
   --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);
+  --ids-components-card-padding-horizontal: var(--ids-card-mobile-padding-horizontal);
+  --ids-components-card-padding-vertical: var(--ids-card-mobile-padding-vertical);
 	}
 }

package/components/navigation/content/navigation-content-lit.js DELETED Viewed

@@ -1,7 +0,0 @@
-import { css, unsafeCSS } from 'lit';
-var css_248z = ".ids--dark,.ids--light{--IDS-FONT-FAMILY-BASE:\"Open Sans\";--IDS-FONT-FAMILY-HEADING:\"Inter\";--IDS-FONT-COLOR:var(--ids-color-surface-text-on-default);--IDS-HEADING-XXL__MARGIN-BOTTOM:1.875rem;--IDS-HEADING-XL__MARGIN-BOTTOM:1.875rem;--IDS-HEADING-L__MARGIN-BOTTOM:1.875rem;--IDS-PAGE-LIST__COLOR:var(--ids-color-brand-text-primary);--IDS-PAGE-LIST__FONT-FAMILY:var(--IDS-FONT-FAMILY-HEADING);--IDS-PAGE-LIST__FONT-SIZE:1.25rem;--IDS-PAGE-LIST__LINE-HEIGHT:1.5rem;--IDS-PAGE-LIST__FONT-WEIGHT:700;--IDS-PAGE-LIST__LETTER-SPACING:-0.025rem;--IDS-BULLET-LIST__MARKER-COLOR:var(--ids-color-brand-text-primary);--IDS-BULLET-LIST__MARKER-FONT-WEIGHT:bold;--IDS-BULLET-LIST__LINE-HEIGHT:1.5rem;--IDS-DIVIDER__COLOR:var(--ids-color-surface-border-default)}.ids--dark.ids--1177-admin,.ids--dark.ids--1177-pro,.ids--light.ids--1177-admin,.ids--light.ids--1177-pro{--IDS-PAGE-LIST__COLOR:var(--ids-color-interactive-text-default)}.ids--dark.ids--inera,.ids--dark.ids--inera-admin,.ids--light.ids--inera,.ids--light.ids--inera-admin{--IDS-FONT-FAMILY-BASE:\"Open Sans\";--IDS-FONT-FAMILY-HEADING:\"Poppins\";--IDS-HEADING-XXL__MARGIN-BOTTOM:1.25rem;--IDS-HEADING-XL__MARGIN-BOTTOM:1.25rem;--IDS-HEADING-L__MARGIN-BOTTOM:1.25rem;--IDS-PAGE-LIST__FONT-WEIGHT:600;--IDS-PAGE-LIST__LETTER-SPACING:0;--IDS-BULLET-LIST__MARKER-FONT-WEIGHT:normal;--IDS-BULLET-LIST__LINE-HEIGHT:1.625rem;--IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT:600}.ids--dark.ids--dark,.ids--light.ids--dark{--IDS-PAGE-LIST__COLOR:var(--ids-color-navigation-text-default)}.ids--dark.ids--dark.ids--1177-admin,.ids--dark.ids--dark.ids--1177-pro,.ids--dark.ids--dark.ids--inera,.ids--dark.ids--dark.ids--inera-admin,.ids--light.ids--dark.ids--1177-admin,.ids--light.ids--dark.ids--1177-pro,.ids--light.ids--dark.ids--inera,.ids--light.ids--dark.ids--inera-admin{--IDS-PAGE-LIST__COLOR:var(--ids-color-interactive-text-default)}@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-navigation-content{background-color:var(--IDS-NAVIGATION-CONTENT__BACKGROUND-COLOR);border:.0625rem solid var(--IDS-NAVIGATION-CONTENT__BORDER-COLOR);border-radius:var(--IDS-BORDER-RADIUS);position:relative;width:100%}.ids-navigation-content .ids-navigation-content__border-top{border-radius:var(--IDS-BORDER-RADIUS);display:block;height:var(--IDS-NAVIGATION-CONTENT__DECORATION-TOP-HEIGHT);left:0;overflow:hidden;position:absolute;top:0;width:100%}.ids-navigation-content .ids-navigation-content__border-top .ids-navigation-content__border-top-content,.ids-navigation-content .ids-navigation-content__border-top div{border-top:var(--IDS-NAVIGATION-CONTENT__DECORATION-TOP)}.ids-navigation-content .ids-navigation-content__inner{padding:1.25rem;position:relative}.ids-navigation-content .ids-navigation-content__inner .ids-navigation-content__inner__headline{color:var(--IDS-NAVIGATION-CONTENT__HEADLINE-COLOR);font-family:var(--ids-font-family-heading);font-size:var(--ids-font-size-heading-s);font-style:normal;font-weight:var(--ids-font-weight-heading-s);letter-spacing:var(--ids-font-letter-spacing-heading-s);line-height:var(--ids-font-line-height-heading-s);margin:0 0 1rem!important}.ids-navigation-content .ids-navigation-content__links{display:flex;flex-direction:column;gap:1rem}.ids-navigation-content .ids-navigation-content__links .ids-navigation-content__link-wrapper,.ids-navigation-content .ids-navigation-content__links ::slotted(*){border-top:var(--IDS-NAVIGATION-CONTENT__ITEM-BORDER-TOP);display:block;padding-top:1rem;width:100%}.ids-navigation-content.ids-navigation-content--scrollable .ids-navigation-content__links:focus-visible{outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-navigation-content.ids-navigation-content--scrollable .ids-navigation-content__links{margin:0 -.5rem;overflow-y:auto;padding:0 .5rem}";
-var navigationContentLit = css`${unsafeCSS(css_248z)}`;
-export { navigationContentLit as default };

package/components/navigation/local/navigation-local-lit.js DELETED Viewed

@@ -1,7 +0,0 @@
-import { css, unsafeCSS } from 'lit';
-var css_248z = ".ids-navigation-local{padding-left:.5rem}.ids-navigation-local .ids-navigation-local__headline{border-bottom:var(--IDS-NAVIGATION-LOCAL__BORDER);color:var(--IDS-NAVIGATION-LOCAL__HEADLINE-COLOR);font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1.25rem;font-style:normal;font-weight:700;letter-spacing:-.03125rem;line-height:1.5rem;padding:.875rem 1.25rem .875rem 0}.ids-navigation-local .ids-navigation-local__link,.ids-navigation-local ::slotted(a),.ids-navigation-local a{color:var(--IDS-NAVIGATION-LOCAL__LINK-COLOR);display:block!important;padding:.75rem;position:relative;text-decoration:none}.ids-navigation-local .ids-navigation-local__link:before,.ids-navigation-local ::slotted(a):before,.ids-navigation-local a:before{content:\"\";display:block;height:calc(100% + .063rem);left:-.5rem;position:absolute;top:-.063rem;width:.5rem}.ids-navigation-local .ids-navigation-local__link:after,.ids-navigation-local ::slotted(a):after,.ids-navigation-local a:after{background-color:var(--IDS-NAVIGATION-LOCAL__AFTER-COLOR);bottom:0;content:\"\";display:block;height:.063rem;left:0;position:absolute;right:0}.ids-navigation-local .ids-navigation-local__link:hover:before,.ids-navigation-local ::slotted(a):hover:before,.ids-navigation-local a:hover:before{background-color:var(--IDS-NAVIGATION-LOCAL--HOVER-BEFORE-COLOR)!important}.ids-navigation-local .ids-navigation-local-link--active:before,.ids-navigation-local ::slotted(.ids-navigation-local-link--active):before{background-color:var(--IDS-NAVIGATION-LOCAL--ACTIVE-BEFORE-COLOR)}.ids-navigation-local ::slotted(a:active:hover):before,.ids-navigation-local ::slotted(a:hover):before,.ids-navigation-local a:active:hover:before,.ids-navigation-local a:hover:before{background-color:var(--IDS-NAVIGATION-LOCAL--HOVER-BEFORE-COLOR)!important}.ids-navigation-local ::slotted(a:focus-visible),.ids-navigation-local a:focus-visible{outline-offset:-.25rem!important}";
-var navigationLocalLit = css`${unsafeCSS(css_248z)}`;
-export { navigationLocalLit as default };