npm - @inera/ids-design - Versions diffs - 9.1.0 → 9.2.0 - Mend

@inera/ids-design 9.1.0 → 9.2.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 (261) hide show

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

@@ -233,6 +233,8 @@
   --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-secondary-90);
+  --ids-color-light-brand-text-on-footer: var(--ids-palette-neutral-30);
+  --ids-color-light-brand-text-on-footer-link: var(--ids-palette-neutral-30);
   --ids-color-light-brand-background-footer-bottom: var(--ids-palette-primary-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);
@@ -328,9 +330,9 @@
   --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-xxl: var(--ids-palette-primary-40);
+  --ids-color-light-heading-xl: var(--ids-palette-primary-40);
+  --ids-color-light-heading-l: var(--ids-palette-primary-40);
   --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);
@@ -358,6 +360,8 @@
   --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-primary-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);
@@ -476,7 +480,17 @@
 	/*Light tokens*/
 .ids--inera-admin.ids--light {
-	--ids-border-width-general: 0.1875rem;
+	--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;
@@ -535,6 +549,8 @@
   --ids-color-brand-background-secondary: var(--ids-palette-secondary-95);
   --ids-color-brand-background-footer: var(--ids-palette-secondary-90);
   --ids-color-brand-background-footer-bottom: var(--ids-palette-primary-30);
+  --ids-color-brand-text-on-footer: var(--ids-palette-neutral-30);
+  --ids-color-brand-text-on-footer-link: var(--ids-palette-neutral-30);
   --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-primary-30);
@@ -630,9 +646,9 @@
   --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-xxl: var(--ids-palette-primary-40);
+  --ids-color-heading-text-xl: var(--ids-palette-primary-40);
+  --ids-color-heading-text-l: var(--ids-palette-primary-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);
@@ -644,7 +660,17 @@
 	/*Dark tokens*/
 .ids--inera-admin.ids--dark {
-	--ids-border-width-general: 0.1875rem;
+	--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;
@@ -703,6 +729,8 @@
   --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-primary-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-primary-70);
@@ -812,18 +840,10 @@
 	/*Desktop tokens*/
 .ids--inera-admin.ids--light, .ids--inera-admin.ids--dark {
-	--ids-device-min-width: 90rem;
-  --ids-device-min-height: 64rem;
-  --ids-components-carousel-image-height: 25.8125rem;
-  --ids-components-header-logotype-width: 6.439374923706055rem;
-  --ids-components-header-avatar-max-width: 37.5rem;
-  --ids-components-card-padding-horizontal: 1.25rem;
-  --ids-components-card-padding-vertical: 1.5rem;
-  --ids-main-padding-horizontal: 5.5rem;
-  --ids-main-padding-top: 1.25rem;
-  --ids-main-padding-bottom: 9.5rem;
-  --ids-font-size-heading-xxl: 3rem;
-  --ids-font-size-heading-xl: 2.25rem;
+	--ids-card-padding-horizontal: 0.75rem;
+  --ids-card-padding-vertical: 0.75rem;
+  --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;
@@ -841,11 +861,11 @@
   --ids-font-size-icon-button-l: 1.5rem;
   --ids-font-size-icon-button-m: 1.25rem;
   --ids-font-size-icon-button-s: 1rem;
-  --ids-font-line-height-heading-xxl: 3.25rem;
-  --ids-font-line-height-heading-xl: 2.625rem;
+  --ids-font-line-height-heading-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: 1.875rem;
-  --ids-font-line-height-heading-s: 1.5rem;
+  --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;
@@ -856,46 +876,29 @@
   --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.078125rem;
-  --ids-font-letter-spacing-heading-xl: -0.0625rem;
-  --ids-font-letter-spacing-heading-l: -0.04374999925494194rem;
-  --ids-font-letter-spacing-heading-m: -0.03125rem;
-  --ids-font-letter-spacing-heading-s: -0.02500000037252903rem;
+  --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.041875001043081284rem;
-  --ids-font-letter-spacing-header-admin-title-extra: -0.02500000037252903rem;
-  --ids-font-letter-spacing-header-profession-title: -0.02500000037252903rem;
+  --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;
-  --ids-font-paragraph-spacing-heading-xxl: 0;
-  --ids-font-paragraph-spacing-heading-xl: 0;
-  --ids-font-paragraph-spacing-heading-l: 0;
-  --ids-font-paragraph-spacing-heading-m: 0;
-  --ids-font-paragraph-spacing-heading-s: 0;
-  --ids-font-paragraph-spacing-heading-xs: 0;
-  --ids-font-paragraph-spacing-preamble: 0;
-  --ids-font-paragraph-spacing-body-text: 1rem;
-  --ids-font-paragraph-spacing-small-text: 1rem;
 }
 	/*Mobile tokens*/
 @media only screen and (max-width: 1024px) {
 	.ids--inera-admin.ids--light, .ids--inera-admin.ids--dark {
-	--ids-device-min-width: 20rem;
-  --ids-device-min-height: 35.5rem;
-  --ids-components-carousel-image-height: 11.6875rem;
-  --ids-components-header-logotype-width: 2.575624942779541rem;
-  --ids-components-header-avatar-max-width: 6rem;
-  --ids-components-card-padding-horizontal: 1rem;
-  --ids-components-card-padding-vertical: 1.25rem;
-  --ids-main-padding-horizontal: 1.25rem;
-  --ids-main-padding-top: 1.25rem;
-  --ids-main-padding-bottom: 6rem;
-  --ids-font-size-heading-xxl: 2rem;
+	--ids-card-padding-horizontal: 0.75rem;
+  --ids-card-padding-vertical: 0.75rem;
+  --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;
@@ -914,8 +917,8 @@
   --ids-font-size-icon-button-l: 1.5rem;
   --ids-font-size-icon-button-m: 1.25rem;
   --ids-font-size-icon-button-s: 1rem;
-  --ids-font-line-height-heading-xxl: 2.5rem;
-  --ids-font-line-height-heading-xl: 2.125rem;
+  --ids-font-line-height-heading-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;
@@ -925,33 +928,24 @@
   --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.5rem;
+  --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.051874998956918716rem;
-  --ids-font-letter-spacing-heading-xl: -0.03125rem;
-  --ids-font-letter-spacing-heading-l: -0.02500000037252903rem;
-  --ids-font-letter-spacing-heading-m: -0.01875000074505806rem;
-  --ids-font-letter-spacing-heading-s: -0.012500000186264515rem;
+  --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.015625rem;
-  --ids-font-letter-spacing-header-admin-title-extra: -0.015625rem;
-  --ids-font-letter-spacing-header-profession-title: -0.02500000037252903rem;
+  --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;
-  --ids-font-paragraph-spacing-heading-xxl: 0;
-  --ids-font-paragraph-spacing-heading-xl: 0;
-  --ids-font-paragraph-spacing-heading-l: 0;
-  --ids-font-paragraph-spacing-heading-m: 0;
-  --ids-font-paragraph-spacing-heading-s: 0;
-  --ids-font-paragraph-spacing-heading-xs: 0;
-  --ids-font-paragraph-spacing-preamble: 0;
-  --ids-font-paragraph-spacing-body-text: 1rem;
-  --ids-font-paragraph-spacing-small-text: 1rem;
 	}
 }