npm - @designsystem-se/af - Versions diffs - 39.2.2 → 39.2.3-beta.darkmode.1 - Mend

@designsystem-se/af 39.2.2 → 39.2.3-beta.darkmode.1

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 (1321) hide show

package/dist/collection/components/_navigation/navigation-context-menu/navigation-context-menu.css CHANGED Viewed

@@ -16,7 +16,7 @@ License: none (public domain)
   --digi--navigation-context-menu--item--background-color--active: var(--digi--color--background--interactive--selected--tertiary);
   --digi--navigation-context-menu--item--display: flex;
   --digi--navigation-context-menu--item--font-family: var(--digi--global--typography--font-family--default);
-  --digi--navigation-context-menu--item--font-color: var(--digi--color--text--primary);
+  --digi--navigation-context-menu--item--font-color: var(--digi--color--text--interactive--tertiary);
   display: block;
   box-sizing: border-box;
   width: fit-content;
@@ -82,6 +82,7 @@ License: none (public domain)
   font-size: var(--digi--navigation-context-menu--item--font-size);
   display: var(--digi--navigation-context-menu--item--display);
   font-family: var(--digi--navigation-context-menu--item--font-family);
+  color: var(--digi--navigation-context-menu--item--font-color);
   padding: 0.625rem 0;
   max-width: max-content;
   min-width: 100%;
@@ -108,7 +109,7 @@ License: none (public domain)
 }
 :host .digi-navigation-context-menu .digi-navigation-context-menu__item--link a {
   padding: 0.625rem 1rem;
-  color: var(--digi--navigation-context-menu--item--font-color, #333333);
+  color: var(--digi--navigation-context-menu--item--font-color);
   text-decoration: none;
   margin: 0;
   width: 100%;

package/dist/collection/components/_navigation/navigation-vertical-menu-item/navigation-vertical-menu-item.css CHANGED Viewed

@@ -5,9 +5,9 @@ License: none (public domain)
 :host {
   --digi--navigation-vertical-menu-item--toggle-icon--character: "+";
   --digi--navigation-vertical-menu-item--toggle-icon--character--active: "-";
-  --digi--navigation-vertical-menu-item--toggle-icon--color: var(--digi--color--text--interactive--primary);
-  --digi--navigation-vertical-menu-item--toggle-icon--color--hover: var(--digi--color--text--interactive--secondary);
-  --digi--navigation-vertical-menu-item--toggle-icon--color--active: var(--digi--color--text--interactive--primary);
+  --digi--navigation-vertical-menu-item--toggle-icon--color: var(--digi--color--icon--cta);
+  --digi--navigation-vertical-menu-item--toggle-icon--color--hover: var(--digi--color--icon--secondary);
+  --digi--navigation-vertical-menu-item--toggle-icon--color--active: var(--digi--color--icon--cta);
   --digi--navigation-vertical-menu-item--toggle-icon--background: var(--digi--color--background--interactive--default--tertiary);
   --digi--navigation-vertical-menu-item--toggle-icon--background--hover: var(--digi--color--background--interactive--hover--tertiary);
   --digi--navigation-vertical-menu-item--toggle-icon--background--active: var(--digi--color--background--interactive--selected--on-menu-minus-button);

package/dist/collection/components/_notification/notification-alert/notification-alert.css CHANGED Viewed

@@ -22,7 +22,7 @@ License: none (public domain)
   --digi--notification-alert--icon--color--success: var(--digi--color--icon--secondary);
   --digi--notification-alert--icon--background--success: var(--digi--color--background--sentiment--success--primary);
   --digi--notification-alert--border--warning: var(--digi--border-width--secondary) solid var(--digi--color--border--sentiment--warning);
-  --digi--notification-alert--icon--color--warning: var(--digi--color--icon--primary);
+  --digi--notification-alert--icon--color--warning: var(--digi--color--icon--primary-anti-reverse);
   --digi--notification-alert--icon--background--warning: var(--digi--color--background--sentiment--warning--primary);
   --digi--notification-alert--border--danger: var(--digi--border-width--secondary) solid var(--digi--color--border--sentiment--error);
   --digi--notification-alert--icon--color--danger: var(--digi--color--icon--secondary);

package/dist/collection/components/_progress/progress-indicator/progress-indicator.css CHANGED Viewed

@@ -24,7 +24,7 @@ License: none (public domain)
   --digi--progress-indicator--step--line--style: dashed;
   --digi--progress-indicator--icon--width: 1rem;
   --digi--progress-indicator--icon--height: 1rem;
-  --digi--progress-indicator--icon--color: var(--digi--color--icon--secondary);
+  --digi--progress-indicator--icon--color: var(--digi--color--marking--indication--marker);
   --digi--progress-indicator--icon-status--width: 1.75rem;
   --digi--progress-indicator--icon-status--height: 1.75rem;
   --digi--progress-indicator--icon--warning--color: var(--digi--color--icon--validation--warning);
@@ -43,6 +43,7 @@ License: none (public domain)
 }
 :host .digi-progress-indicator__heading {
   font-size: var(--digi--typography--heading-2--font-size--desktop);
+  color: var(--digi--color--text--primary);
   font-weight: var(--digi--progress-indicator--heading--font-weight);
   margin: 0;
   margin-bottom: 0.5rem;
@@ -56,7 +57,7 @@ License: none (public domain)
 :host .digi-progress-indicator__next {
   font-size: var(--digi--typography--body--font-size--desktop);
   font-style: italic;
-  color: var(--digi--color--text--primary);
+  color: var(--digi--color--text--description);
   margin: 0;
 }
 :host .digi-progress-indicator__icon {
@@ -99,10 +100,10 @@ License: none (public domain)
   margin-left: 8px;
 }
 :host .digi-progress-indicator__validation-label--warning {
-  background-color: var(--digi--color--background--interactive--validation--warning);
+  background-color: var(--digi--color--background--sentiment--warning--quarternary);
 }
 :host .digi-progress-indicator__validation-label--error {
-  background-color: var(--digi--color--background--interactive--validation--error);
+  background-color: var(--digi--color--background--sentiment--error--tertiary-discreet);
 }
 :host .digi-progress-indicator__list {
   position: relative;

package/dist/collection/components/_progress/progress-list-item/progress-list-item.css CHANGED Viewed

@@ -61,7 +61,7 @@ License: none (public domain)
 }
 :host .digi-progress-list-item--current:host .digi-progress-list-item__indicator--circle {
   background-color: var(--INDICATOR--CIRCLE--COLOR);
-  box-shadow: inset 0 0 0 4px var(--INDICATOR--CIRCLE--COLOR), inset 0 0 0 7px #fff;
+  box-shadow: inset 0 0 0 4px var(--INDICATOR--CIRCLE--COLOR), inset 0 0 0 7px var(--digi--color--marking--indication--marker);
   height: 32px;
   width: 100%;
 }
@@ -97,7 +97,7 @@ License: none (public domain)
 }
 :host .digi-progress-list-item__indicator--icon--digi {
   color: var(--digi--color--text--secondary);
-  --digi--icon--color: var(--digi--color--icon--secondary);
+  --digi--icon--color: var(--digi--color--marking--indication--marker);
   margin: auto;
   max-height: 18px;
   max-width: 18px;

package/dist/collection/components/_tools/tools-theme-provider/tools-theme-provider.css CHANGED Viewed

@@ -1,13 +1,15 @@
-:host .digi-tools-theme-provider--af25 {
+.digi-tools-theme-provider--af25.digi-tools-theme-provider--light {
   --digi--color--background--brand-primary: var(--digi--color--background--brand-primary--light);
+  --digi--color--background--dropdown: var(--digi--color--background--dropdown--light);
   --digi--color--background--interactive--default--input-elements: var(--digi--color--background--interactive--default--input-elements--light);
   --digi--color--background--interactive--default--pop-out: var(--digi--color--background--interactive--default--pop-out--light);
   --digi--color--background--interactive--default--primary: var(--digi--color--background--interactive--default--primary--light);
   --digi--color--background--interactive--default--primary-inverted: var(--digi--color--background--interactive--default--primary-inverted--light);
   --digi--color--background--interactive--default--quaternary: var(--digi--color--background--interactive--default--quaternary--light);
   --digi--color--background--interactive--default--secondary: var(--digi--color--background--interactive--default--secondary--light);
-  --digi--color--background--interactive--default--secondary-inverted: var(--digi--color--background--interactive--default--secondary-inverted--light);
   --digi--color--background--interactive--default--tertiary: var(--digi--color--background--interactive--default--tertiary--light);
+  --digi--color--background--interactive--default--transparent: var(--digi--color--background--interactive--default--transparent--light);
+  --digi--color--background--interactive--hover--ghost-rider: var(--digi--color--background--interactive--hover--ghost-rider--light);
   --digi--color--background--interactive--hover--inverted: var(--digi--color--background--interactive--hover--inverted--light);
   --digi--color--background--interactive--hover--primary: var(--digi--color--background--interactive--hover--primary--light);
   --digi--color--background--interactive--hover--quarternary: var(--digi--color--background--interactive--hover--quarternary--light);
@@ -15,6 +17,7 @@
   --digi--color--background--interactive--hover--tertiary: var(--digi--color--background--interactive--hover--tertiary--light);
   --digi--color--background--interactive--selected--on-menu-minus-button: var(--digi--color--background--interactive--selected--on-menu-minus-button--light);
   --digi--color--background--interactive--selected--primary: var(--digi--color--background--interactive--selected--primary--light);
+  --digi--color--background--interactive--selected--primary-stay: var(--digi--color--background--interactive--selected--primary-stay--light);
   --digi--color--background--interactive--selected--secondary: var(--digi--color--background--interactive--selected--secondary--light);
   --digi--color--background--interactive--selected--tertiary: var(--digi--color--background--interactive--selected--tertiary--light);
   --digi--color--background--interactive--validation--error: var(--digi--color--background--interactive--validation--error--light);
@@ -22,15 +25,19 @@
   --digi--color--background--interactive--validation--warning: var(--digi--color--background--interactive--validation--warning--light);
   --digi--color--background--notification: var(--digi--color--background--notification--light);
   --digi--color--background--pop-out: var(--digi--color--background--pop-out--light);
+  --digi--color--background--pop-out-2-hypotes: var(--digi--color--background--pop-out-2-hypotes--light);
   --digi--color--background--primary: var(--digi--color--background--primary--light);
+  --digi--color--background--primary-elevated: var(--digi--color--background--primary-elevated--light);
   --digi--color--background--secondary: var(--digi--color--background--secondary--light);
   --digi--color--background--secondary-accent: var(--digi--color--background--secondary-accent--light);
+  --digi--color--background--secondary-elevated: var(--digi--color--background--secondary-elevated--light);
   --digi--color--background--secondary-muted: var(--digi--color--background--secondary-muted--light);
   --digi--color--background--sentiment--beta--primary: var(--digi--color--background--sentiment--beta--primary--light);
   --digi--color--background--sentiment--beta--secondary: var(--digi--color--background--sentiment--beta--secondary--light);
   --digi--color--background--sentiment--error--primary: var(--digi--color--background--sentiment--error--primary--light);
   --digi--color--background--sentiment--error--secondary: var(--digi--color--background--sentiment--error--secondary--light);
   --digi--color--background--sentiment--error--tertiary: var(--digi--color--background--sentiment--error--tertiary--light);
+  --digi--color--background--sentiment--error--tertiary-discreet: var(--digi--color--background--sentiment--error--tertiary-discreet--light);
   --digi--color--background--sentiment--info--primary: var(--digi--color--background--sentiment--info--primary--light);
   --digi--color--background--sentiment--info--secondary: var(--digi--color--background--sentiment--info--secondary--light);
   --digi--color--background--sentiment--info--tertiary: var(--digi--color--background--sentiment--info--tertiary--light);
@@ -44,6 +51,7 @@
   --digi--color--background--sentiment--warning--quarternary: var(--digi--color--background--sentiment--warning--quarternary--light);
   --digi--color--background--sentiment--warning--secondary: var(--digi--color--background--sentiment--warning--secondary--light);
   --digi--color--background--sentiment--warning--tertiary: var(--digi--color--background--sentiment--warning--tertiary--light);
+  --digi--color--background--surface: var(--digi--color--background--surface--light);
   --digi--color--background--transparent: var(--digi--color--background--transparent--light);
   --digi--color--border--accent--primary: var(--digi--color--border--accent--primary--light);
   --digi--color--border--accent--secondary: var(--digi--color--border--accent--secondary--light);
@@ -51,6 +59,7 @@
   --digi--color--border--interactive--default--on-input: var(--digi--color--border--interactive--default--on-input--light);
   --digi--color--border--interactive--default--on-input-nuance: var(--digi--color--border--interactive--default--on-input-nuance--light);
   --digi--color--border--interactive--default--primary: var(--digi--color--border--interactive--default--primary--light);
+  --digi--color--border--interactive--default--secondary: var(--digi--color--border--interactive--default--secondary--light);
   --digi--color--border--interactive--hover--inverted: var(--digi--color--border--interactive--hover--inverted--light);
   --digi--color--border--interactive--hover--primary: var(--digi--color--border--interactive--hover--primary--light);
   --digi--color--border--interactive--hover--secondary: var(--digi--color--border--interactive--hover--secondary--light);
@@ -69,11 +78,15 @@
   --digi--color--divider--on-brand-primary: var(--digi--color--divider--on-brand-primary--light);
   --digi--color--divider--primary: var(--digi--color--divider--primary--light);
   --digi--color--divider--secondary: var(--digi--color--divider--secondary--light);
+  --digi--color--divider--tertiary-hypotes: var(--digi--color--divider--tertiary-hypotes--light);
   --digi--color--icon--brand-primary: var(--digi--color--icon--brand-primary--light);
+  --digi--color--icon--brand-primary-secondary-hypotes: var(--digi--color--icon--brand-primary-secondary-hypotes--light);
   --digi--color--icon--brand-secondary: var(--digi--color--icon--brand-secondary--light);
   --digi--color--icon--cta: var(--digi--color--icon--cta--light);
   --digi--color--icon--primary: var(--digi--color--icon--primary--light);
+  --digi--color--icon--primary-anti-reverse: var(--digi--color--icon--primary-anti-reverse--light);
   --digi--color--icon--secondary: var(--digi--color--icon--secondary--light);
+  --digi--color--icon--secondary-reverse: var(--digi--color--icon--secondary-reverse--light);
   --digi--color--icon--validation--error: var(--digi--color--icon--validation--error--light);
   --digi--color--icon--validation--success: var(--digi--color--icon--validation--success--light);
   --digi--color--icon--validation--warning: var(--digi--color--icon--validation--warning--light);
@@ -87,6 +100,7 @@
   --digi--color--logotype--primary--text: var(--digi--color--logotype--primary--text--light);
   --digi--color--logotype--secondary--symbol: var(--digi--color--logotype--secondary--symbol--light);
   --digi--color--logotype--secondary--text: var(--digi--color--logotype--secondary--text--light);
+  --digi--color--marking--indication--marker: var(--digi--color--marking--indication--marker--light);
   --digi--color--marking--indication--primary: var(--digi--color--marking--indication--primary--light);
   --digi--color--marking--indication--secondary: var(--digi--color--marking--indication--secondary--light);
   --digi--color--marking--indication--tertiary: var(--digi--color--marking--indication--tertiary--light);
@@ -97,24 +111,157 @@
   --digi--color--misc--spinner-path: var(--digi--color--misc--spinner-path--light);
   --digi--color--text--description: var(--digi--color--text--description--light);
   --digi--color--text--interactive--brand-primary: var(--digi--color--text--interactive--brand-primary--light);
+  --digi--color--text--interactive--brand-primary-secondary-hypotes: var(--digi--color--text--interactive--brand-primary-secondary-hypotes--light);
   --digi--color--text--interactive--brand-secondary: var(--digi--color--text--interactive--brand-secondary--light);
   --digi--color--text--interactive--primary: var(--digi--color--text--interactive--primary--light);
+  --digi--color--text--interactive--primary-discreet: var(--digi--color--text--interactive--primary-discreet--light);
   --digi--color--text--interactive--secondary: var(--digi--color--text--interactive--secondary--light);
+  --digi--color--text--interactive--secondary-discreet: var(--digi--color--text--interactive--secondary-discreet--light);
   --digi--color--text--interactive--tertiary: var(--digi--color--text--interactive--tertiary--light);
   --digi--color--text--interactive--visited: var(--digi--color--text--interactive--visited--light);
   --digi--color--text--primary: var(--digi--color--text--primary--light);
+  --digi--color--text--primary-stay: var(--digi--color--text--primary-stay--light);
   --digi--color--text--secondary: var(--digi--color--text--secondary--light);
+  --digi--color--text--secondary-stay: var(--digi--color--text--secondary-stay--light);
 }
-:host .digi-tools-theme-provider--af18 {
+.digi-tools-theme-provider--af25.digi-tools-theme-provider--dark {
+  --digi--color--background--brand-primary: var(--digi--color--background--brand-primary--dark);
+  --digi--color--background--dropdown: var(--digi--color--background--dropdown--dark);
+  --digi--color--background--interactive--default--input-elements: var(--digi--color--background--interactive--default--input-elements--dark);
+  --digi--color--background--interactive--default--pop-out: var(--digi--color--background--interactive--default--pop-out--dark);
+  --digi--color--background--interactive--default--primary: var(--digi--color--background--interactive--default--primary--dark);
+  --digi--color--background--interactive--default--primary-inverted: var(--digi--color--background--interactive--default--primary-inverted--dark);
+  --digi--color--background--interactive--default--quaternary: var(--digi--color--background--interactive--default--quaternary--dark);
+  --digi--color--background--interactive--default--secondary: var(--digi--color--background--interactive--default--secondary--dark);
+  --digi--color--background--interactive--default--tertiary: var(--digi--color--background--interactive--default--tertiary--dark);
+  --digi--color--background--interactive--default--transparent: var(--digi--color--background--interactive--default--transparent--dark);
+  --digi--color--background--interactive--hover--ghost-rider: var(--digi--color--background--interactive--hover--ghost-rider--dark);
+  --digi--color--background--interactive--hover--inverted: var(--digi--color--background--interactive--hover--inverted--dark);
+  --digi--color--background--interactive--hover--primary: var(--digi--color--background--interactive--hover--primary--dark);
+  --digi--color--background--interactive--hover--quarternary: var(--digi--color--background--interactive--hover--quarternary--dark);
+  --digi--color--background--interactive--hover--secondary: var(--digi--color--background--interactive--hover--secondary--dark);
+  --digi--color--background--interactive--hover--tertiary: var(--digi--color--background--interactive--hover--tertiary--dark);
+  --digi--color--background--interactive--selected--on-menu-minus-button: var(--digi--color--background--interactive--selected--on-menu-minus-button--dark);
+  --digi--color--background--interactive--selected--primary: var(--digi--color--background--interactive--selected--primary--dark);
+  --digi--color--background--interactive--selected--primary-stay: var(--digi--color--background--interactive--selected--primary-stay--dark);
+  --digi--color--background--interactive--selected--secondary: var(--digi--color--background--interactive--selected--secondary--dark);
+  --digi--color--background--interactive--selected--tertiary: var(--digi--color--background--interactive--selected--tertiary--dark);
+  --digi--color--background--interactive--validation--error: var(--digi--color--background--interactive--validation--error--dark);
+  --digi--color--background--interactive--validation--success: var(--digi--color--background--interactive--validation--success--dark);
+  --digi--color--background--interactive--validation--warning: var(--digi--color--background--interactive--validation--warning--dark);
+  --digi--color--background--notification: var(--digi--color--background--notification--dark);
+  --digi--color--background--pop-out: var(--digi--color--background--pop-out--dark);
+  --digi--color--background--pop-out-2-hypotes: var(--digi--color--background--pop-out-2-hypotes--dark);
+  --digi--color--background--primary: var(--digi--color--background--primary--dark);
+  --digi--color--background--primary-elevated: var(--digi--color--background--primary-elevated--dark);
+  --digi--color--background--secondary: var(--digi--color--background--secondary--dark);
+  --digi--color--background--secondary-accent: var(--digi--color--background--secondary-accent--dark);
+  --digi--color--background--secondary-elevated: var(--digi--color--background--secondary-elevated--dark);
+  --digi--color--background--secondary-muted: var(--digi--color--background--secondary-muted--dark);
+  --digi--color--background--sentiment--beta--primary: var(--digi--color--background--sentiment--beta--primary--dark);
+  --digi--color--background--sentiment--beta--secondary: var(--digi--color--background--sentiment--beta--secondary--dark);
+  --digi--color--background--sentiment--error--primary: var(--digi--color--background--sentiment--error--primary--dark);
+  --digi--color--background--sentiment--error--secondary: var(--digi--color--background--sentiment--error--secondary--dark);
+  --digi--color--background--sentiment--error--tertiary: var(--digi--color--background--sentiment--error--tertiary--dark);
+  --digi--color--background--sentiment--error--tertiary-discreet: var(--digi--color--background--sentiment--error--tertiary-discreet--dark);
+  --digi--color--background--sentiment--info--primary: var(--digi--color--background--sentiment--info--primary--dark);
+  --digi--color--background--sentiment--info--secondary: var(--digi--color--background--sentiment--info--secondary--dark);
+  --digi--color--background--sentiment--info--tertiary: var(--digi--color--background--sentiment--info--tertiary--dark);
+  --digi--color--background--sentiment--neutral--primary: var(--digi--color--background--sentiment--neutral--primary--dark);
+  --digi--color--background--sentiment--neutral--secondary: var(--digi--color--background--sentiment--neutral--secondary--dark);
+  --digi--color--background--sentiment--neutral--tertiary: var(--digi--color--background--sentiment--neutral--tertiary--dark);
+  --digi--color--background--sentiment--success--primary: var(--digi--color--background--sentiment--success--primary--dark);
+  --digi--color--background--sentiment--success--secondary: var(--digi--color--background--sentiment--success--secondary--dark);
+  --digi--color--background--sentiment--success--tertiary: var(--digi--color--background--sentiment--success--tertiary--dark);
+  --digi--color--background--sentiment--warning--primary: var(--digi--color--background--sentiment--warning--primary--dark);
+  --digi--color--background--sentiment--warning--quarternary: var(--digi--color--background--sentiment--warning--quarternary--dark);
+  --digi--color--background--sentiment--warning--secondary: var(--digi--color--background--sentiment--warning--secondary--dark);
+  --digi--color--background--sentiment--warning--tertiary: var(--digi--color--background--sentiment--warning--tertiary--dark);
+  --digi--color--background--surface: var(--digi--color--background--surface--dark);
+  --digi--color--background--transparent: var(--digi--color--background--transparent--dark);
+  --digi--color--border--accent--primary: var(--digi--color--border--accent--primary--dark);
+  --digi--color--border--accent--secondary: var(--digi--color--border--accent--secondary--dark);
+  --digi--color--border--interactive--default--inverted: var(--digi--color--border--interactive--default--inverted--dark);
+  --digi--color--border--interactive--default--on-input: var(--digi--color--border--interactive--default--on-input--dark);
+  --digi--color--border--interactive--default--on-input-nuance: var(--digi--color--border--interactive--default--on-input-nuance--dark);
+  --digi--color--border--interactive--default--primary: var(--digi--color--border--interactive--default--primary--dark);
+  --digi--color--border--interactive--default--secondary: var(--digi--color--border--interactive--default--secondary--dark);
+  --digi--color--border--interactive--hover--inverted: var(--digi--color--border--interactive--hover--inverted--dark);
+  --digi--color--border--interactive--hover--primary: var(--digi--color--border--interactive--hover--primary--dark);
+  --digi--color--border--interactive--hover--secondary: var(--digi--color--border--interactive--hover--secondary--dark);
+  --digi--color--border--interactive--selected--primary: var(--digi--color--border--interactive--selected--primary--dark);
+  --digi--color--border--interactive--selected--secondary: var(--digi--color--border--interactive--selected--secondary--dark);
+  --digi--color--border--interactive--validation--error: var(--digi--color--border--interactive--validation--error--dark);
+  --digi--color--border--interactive--validation--success: var(--digi--color--border--interactive--validation--success--dark);
+  --digi--color--border--interactive--validation--warning: var(--digi--color--border--interactive--validation--warning--dark);
+  --digi--color--border--notification: var(--digi--color--border--notification--dark);
+  --digi--color--border--sentiment--error: var(--digi--color--border--sentiment--error--dark);
+  --digi--color--border--sentiment--info: var(--digi--color--border--sentiment--info--dark);
+  --digi--color--border--sentiment--success: var(--digi--color--border--sentiment--success--dark);
+  --digi--color--border--sentiment--warning: var(--digi--color--border--sentiment--warning--dark);
+  --digi--color--border--transparent: var(--digi--color--border--transparent--dark);
+  --digi--color--divider--cta: var(--digi--color--divider--cta--dark);
+  --digi--color--divider--on-brand-primary: var(--digi--color--divider--on-brand-primary--dark);
+  --digi--color--divider--primary: var(--digi--color--divider--primary--dark);
+  --digi--color--divider--secondary: var(--digi--color--divider--secondary--dark);
+  --digi--color--divider--tertiary-hypotes: var(--digi--color--divider--tertiary-hypotes--dark);
+  --digi--color--icon--brand-primary: var(--digi--color--icon--brand-primary--dark);
+  --digi--color--icon--brand-primary-secondary-hypotes: var(--digi--color--icon--brand-primary-secondary-hypotes--dark);
+  --digi--color--icon--brand-secondary: var(--digi--color--icon--brand-secondary--dark);
+  --digi--color--icon--cta: var(--digi--color--icon--cta--dark);
+  --digi--color--icon--primary: var(--digi--color--icon--primary--dark);
+  --digi--color--icon--primary-anti-reverse: var(--digi--color--icon--primary-anti-reverse--dark);
+  --digi--color--icon--secondary: var(--digi--color--icon--secondary--dark);
+  --digi--color--icon--secondary-reverse: var(--digi--color--icon--secondary-reverse--dark);
+  --digi--color--icon--validation--error: var(--digi--color--icon--validation--error--dark);
+  --digi--color--icon--validation--success: var(--digi--color--icon--validation--success--dark);
+  --digi--color--icon--validation--warning: var(--digi--color--icon--validation--warning--dark);
+  --digi--color--infographic--background: var(--digi--color--infographic--background--dark);
+  --digi--color--infographic--brand--primary: var(--digi--color--infographic--brand--primary--dark);
+  --digi--color--infographic--brand--primary-alt: var(--digi--color--infographic--brand--primary-alt--dark);
+  --digi--color--infographic--brand--secondary: var(--digi--color--infographic--brand--secondary--dark);
+  --digi--color--infographic--brand--secondary-alt: var(--digi--color--infographic--brand--secondary-alt--dark);
+  --digi--color--infographic--lineart: var(--digi--color--infographic--lineart--dark);
+  --digi--color--logotype--primary--symbol: var(--digi--color--logotype--primary--symbol--dark);
+  --digi--color--logotype--primary--text: var(--digi--color--logotype--primary--text--dark);
+  --digi--color--logotype--secondary--symbol: var(--digi--color--logotype--secondary--symbol--dark);
+  --digi--color--logotype--secondary--text: var(--digi--color--logotype--secondary--text--dark);
+  --digi--color--marking--indication--marker: var(--digi--color--marking--indication--marker--dark);
+  --digi--color--marking--indication--primary: var(--digi--color--marking--indication--primary--dark);
+  --digi--color--marking--indication--secondary: var(--digi--color--marking--indication--secondary--dark);
+  --digi--color--marking--indication--tertiary: var(--digi--color--marking--indication--tertiary--dark);
+  --digi--color--marking--navigation--level-active: var(--digi--color--marking--navigation--level-active--dark);
+  --digi--color--marking--navigation--level-inactive: var(--digi--color--marking--navigation--level-inactive--dark);
+  --digi--color--marking--navigation--selected: var(--digi--color--marking--navigation--selected--dark);
+  --digi--color--misc--skeleton: var(--digi--color--misc--skeleton--dark);
+  --digi--color--misc--spinner-path: var(--digi--color--misc--spinner-path--dark);
+  --digi--color--text--description: var(--digi--color--text--description--dark);
+  --digi--color--text--interactive--brand-primary: var(--digi--color--text--interactive--brand-primary--dark);
+  --digi--color--text--interactive--brand-primary-secondary-hypotes: var(--digi--color--text--interactive--brand-primary-secondary-hypotes--dark);
+  --digi--color--text--interactive--brand-secondary: var(--digi--color--text--interactive--brand-secondary--dark);
+  --digi--color--text--interactive--primary: var(--digi--color--text--interactive--primary--dark);
+  --digi--color--text--interactive--primary-discreet: var(--digi--color--text--interactive--primary-discreet--dark);
+  --digi--color--text--interactive--secondary: var(--digi--color--text--interactive--secondary--dark);
+  --digi--color--text--interactive--secondary-discreet: var(--digi--color--text--interactive--secondary-discreet--dark);
+  --digi--color--text--interactive--tertiary: var(--digi--color--text--interactive--tertiary--dark);
+  --digi--color--text--interactive--visited: var(--digi--color--text--interactive--visited--dark);
+  --digi--color--text--primary: var(--digi--color--text--primary--dark);
+  --digi--color--text--primary-stay: var(--digi--color--text--primary-stay--dark);
+  --digi--color--text--secondary: var(--digi--color--text--secondary--dark);
+  --digi--color--text--secondary-stay: var(--digi--color--text--secondary-stay--dark);
+}
+.digi-tools-theme-provider--af18 {
   --digi--color--background--brand-primary: var(--digi--color--background--brand-primary--light--af18);
+  --digi--color--background--dropdown: var(--digi--color--background--dropdown--light--af18);
   --digi--color--background--interactive--default--input-elements: var(--digi--color--background--interactive--default--input-elements--light--af18);
   --digi--color--background--interactive--default--pop-out: var(--digi--color--background--interactive--default--pop-out--light--af18);
   --digi--color--background--interactive--default--primary: var(--digi--color--background--interactive--default--primary--light--af18);
   --digi--color--background--interactive--default--primary-inverted: var(--digi--color--background--interactive--default--primary-inverted--light--af18);
   --digi--color--background--interactive--default--quaternary: var(--digi--color--background--interactive--default--quaternary--light--af18);
   --digi--color--background--interactive--default--secondary: var(--digi--color--background--interactive--default--secondary--light--af18);
-  --digi--color--background--interactive--default--secondary-inverted: var(--digi--color--background--interactive--default--secondary-inverted--light--af18);
   --digi--color--background--interactive--default--tertiary: var(--digi--color--background--interactive--default--tertiary--light--af18);
+  --digi--color--background--interactive--default--transparent: var(--digi--color--background--interactive--default--transparent--light--af18);
+  --digi--color--background--interactive--hover--ghost-rider: var(--digi--color--background--interactive--hover--ghost-rider--light--af18);
   --digi--color--background--interactive--hover--inverted: var(--digi--color--background--interactive--hover--inverted--light--af18);
   --digi--color--background--interactive--hover--primary: var(--digi--color--background--interactive--hover--primary--light--af18);
   --digi--color--background--interactive--hover--quarternary: var(--digi--color--background--interactive--hover--quarternary--light--af18);
@@ -122,6 +269,7 @@
   --digi--color--background--interactive--hover--tertiary: var(--digi--color--background--interactive--hover--tertiary--light--af18);
   --digi--color--background--interactive--selected--on-menu-minus-button: var(--digi--color--background--interactive--selected--on-menu-minus-button--light--af18);
   --digi--color--background--interactive--selected--primary: var(--digi--color--background--interactive--selected--primary--light--af18);
+  --digi--color--background--interactive--selected--primary-stay: var(--digi--color--background--interactive--selected--primary-stay--light--af18);
   --digi--color--background--interactive--selected--secondary: var(--digi--color--background--interactive--selected--secondary--light--af18);
   --digi--color--background--interactive--selected--tertiary: var(--digi--color--background--interactive--selected--tertiary--light--af18);
   --digi--color--background--interactive--validation--error: var(--digi--color--background--interactive--validation--error--light--af18);
@@ -129,15 +277,19 @@
   --digi--color--background--interactive--validation--warning: var(--digi--color--background--interactive--validation--warning--light--af18);
   --digi--color--background--notification: var(--digi--color--background--notification--light--af18);
   --digi--color--background--pop-out: var(--digi--color--background--pop-out--light--af18);
+  --digi--color--background--pop-out-2-hypotes: var(--digi--color--background--pop-out-2-hypotes--light--af18);
   --digi--color--background--primary: var(--digi--color--background--primary--light--af18);
+  --digi--color--background--primary-elevated: var(--digi--color--background--primary-elevated--light--af18);
   --digi--color--background--secondary: var(--digi--color--background--secondary--light--af18);
   --digi--color--background--secondary-accent: var(--digi--color--background--secondary-accent--light--af18);
+  --digi--color--background--secondary-elevated: var(--digi--color--background--secondary-elevated--light--af18);
   --digi--color--background--secondary-muted: var(--digi--color--background--secondary-muted--light--af18);
   --digi--color--background--sentiment--beta--primary: var(--digi--color--background--sentiment--beta--primary--light--af18);
   --digi--color--background--sentiment--beta--secondary: var(--digi--color--background--sentiment--beta--secondary--light--af18);
   --digi--color--background--sentiment--error--primary: var(--digi--color--background--sentiment--error--primary--light--af18);
   --digi--color--background--sentiment--error--secondary: var(--digi--color--background--sentiment--error--secondary--light--af18);
   --digi--color--background--sentiment--error--tertiary: var(--digi--color--background--sentiment--error--tertiary--light--af18);
+  --digi--color--background--sentiment--error--tertiary-discreet: var(--digi--color--background--sentiment--error--tertiary-discreet--light--af18);
   --digi--color--background--sentiment--info--primary: var(--digi--color--background--sentiment--info--primary--light--af18);
   --digi--color--background--sentiment--info--secondary: var(--digi--color--background--sentiment--info--secondary--light--af18);
   --digi--color--background--sentiment--info--tertiary: var(--digi--color--background--sentiment--info--tertiary--light--af18);
@@ -151,6 +303,7 @@
   --digi--color--background--sentiment--warning--quarternary: var(--digi--color--background--sentiment--warning--quarternary--light--af18);
   --digi--color--background--sentiment--warning--secondary: var(--digi--color--background--sentiment--warning--secondary--light--af18);
   --digi--color--background--sentiment--warning--tertiary: var(--digi--color--background--sentiment--warning--tertiary--light--af18);
+  --digi--color--background--surface: var(--digi--color--background--surface--light--af18);
   --digi--color--background--transparent: var(--digi--color--background--transparent--light--af18);
   --digi--color--border--accent--primary: var(--digi--color--border--accent--primary--light--af18);
   --digi--color--border--accent--secondary: var(--digi--color--border--accent--secondary--light--af18);
@@ -158,6 +311,7 @@
   --digi--color--border--interactive--default--on-input: var(--digi--color--border--interactive--default--on-input--light--af18);
   --digi--color--border--interactive--default--on-input-nuance: var(--digi--color--border--interactive--default--on-input-nuance--light--af18);
   --digi--color--border--interactive--default--primary: var(--digi--color--border--interactive--default--primary--light--af18);
+  --digi--color--border--interactive--default--secondary: var(--digi--color--border--interactive--default--secondary--light--af18);
   --digi--color--border--interactive--hover--inverted: var(--digi--color--border--interactive--hover--inverted--light--af18);
   --digi--color--border--interactive--hover--primary: var(--digi--color--border--interactive--hover--primary--light--af18);
   --digi--color--border--interactive--hover--secondary: var(--digi--color--border--interactive--hover--secondary--light--af18);
@@ -176,11 +330,15 @@
   --digi--color--divider--on-brand-primary: var(--digi--color--divider--on-brand-primary--light--af18);
   --digi--color--divider--primary: var(--digi--color--divider--primary--light--af18);
   --digi--color--divider--secondary: var(--digi--color--divider--secondary--light--af18);
+  --digi--color--divider--tertiary-hypotes: var(--digi--color--divider--tertiary-hypotes--light--af18);
   --digi--color--icon--brand-primary: var(--digi--color--icon--brand-primary--light--af18);
+  --digi--color--icon--brand-primary-secondary-hypotes: var(--digi--color--icon--brand-primary-secondary-hypotes--light--af18);
   --digi--color--icon--brand-secondary: var(--digi--color--icon--brand-secondary--light--af18);
   --digi--color--icon--cta: var(--digi--color--icon--cta--light--af18);
   --digi--color--icon--primary: var(--digi--color--icon--primary--light--af18);
+  --digi--color--icon--primary-anti-reverse: var(--digi--color--icon--primary-anti-reverse--light--af18);
   --digi--color--icon--secondary: var(--digi--color--icon--secondary--light--af18);
+  --digi--color--icon--secondary-reverse: var(--digi--color--icon--secondary-reverse--light--af18);
   --digi--color--icon--validation--error: var(--digi--color--icon--validation--error--light--af18);
   --digi--color--icon--validation--success: var(--digi--color--icon--validation--success--light--af18);
   --digi--color--icon--validation--warning: var(--digi--color--icon--validation--warning--light--af18);
@@ -194,6 +352,7 @@
   --digi--color--logotype--primary--text: var(--digi--color--logotype--primary--text--light--af18);
   --digi--color--logotype--secondary--symbol: var(--digi--color--logotype--secondary--symbol--light--af18);
   --digi--color--logotype--secondary--text: var(--digi--color--logotype--secondary--text--light--af18);
+  --digi--color--marking--indication--marker: var(--digi--color--marking--indication--marker--light--af18);
   --digi--color--marking--indication--primary: var(--digi--color--marking--indication--primary--light--af18);
   --digi--color--marking--indication--secondary: var(--digi--color--marking--indication--secondary--light--af18);
   --digi--color--marking--indication--tertiary: var(--digi--color--marking--indication--tertiary--light--af18);
@@ -204,11 +363,16 @@
   --digi--color--misc--spinner-path: var(--digi--color--misc--spinner-path--light--af18);
   --digi--color--text--description: var(--digi--color--text--description--light--af18);
   --digi--color--text--interactive--brand-primary: var(--digi--color--text--interactive--brand-primary--light--af18);
+  --digi--color--text--interactive--brand-primary-secondary-hypotes: var(--digi--color--text--interactive--brand-primary-secondary-hypotes--light--af18);
   --digi--color--text--interactive--brand-secondary: var(--digi--color--text--interactive--brand-secondary--light--af18);
   --digi--color--text--interactive--primary: var(--digi--color--text--interactive--primary--light--af18);
+  --digi--color--text--interactive--primary-discreet: var(--digi--color--text--interactive--primary-discreet--light--af18);
   --digi--color--text--interactive--secondary: var(--digi--color--text--interactive--secondary--light--af18);
+  --digi--color--text--interactive--secondary-discreet: var(--digi--color--text--interactive--secondary-discreet--light--af18);
   --digi--color--text--interactive--tertiary: var(--digi--color--text--interactive--tertiary--light--af18);
   --digi--color--text--interactive--visited: var(--digi--color--text--interactive--visited--light--af18);
   --digi--color--text--primary: var(--digi--color--text--primary--light--af18);
+  --digi--color--text--primary-stay: var(--digi--color--text--primary-stay--light--af18);
   --digi--color--text--secondary: var(--digi--color--text--secondary--light--af18);
+  --digi--color--text--secondary-stay: var(--digi--color--text--secondary-stay--light--af18);
 }

package/dist/collection/components/_tools/tools-theme-provider/tools-theme-provider.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { ToolsThemeProviderBrandEnum } from "./tools-theme-provider.brand.enum";
+import { ToolsThemeProviderThemeEnum } from "./tools-theme-provider.theme.enum";
 /**
  * @slot default - Kan innehålla vad som helst
  * @swedishName Temaväljare
@@ -12,14 +13,25 @@ export class ToolsThemeProvider {
          */
         this.afBrand = ToolsThemeProviderBrandEnum.AF25;
     }
+    // fallback om ingen tema är valt eller specifierad, då ska man lyssna på användarens preferens. kräver dock en refresh för att lyssna på preferenser
+    get fallbackTheme() {
+        if (this.afTheme) {
+            return this.afTheme;
+        }
+        return window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? ToolsThemeProviderThemeEnum.DARK
+            : ToolsThemeProviderThemeEnum.LIGHT;
+    }
     get cssModifiers() {
         return {
             'digi-tools-theme-provider--af25': this.afBrand === ToolsThemeProviderBrandEnum.AF25,
-            'digi-tools-theme-provider--af18': this.afBrand === ToolsThemeProviderBrandEnum.AF18
+            'digi-tools-theme-provider--af18': this.afBrand === ToolsThemeProviderBrandEnum.AF18,
+            'digi-tools-theme-provider--light': this.fallbackTheme === ToolsThemeProviderThemeEnum.LIGHT,
+            'digi-tools-theme-provider--dark': this.fallbackTheme === ToolsThemeProviderThemeEnum.DARK
         };
     }
     render() {
-        return (h(Host, { key: '20cf922eb53806c9cbc5b6498e12f775fb05f218' }, h("div", { key: '93658420ef4e4e751ec1e6d13f2d438afa61df39', class: this.cssModifiers }, h("slot", { key: '4e1885d293549f464d984091f41a10cd046d3e17' }))));
+        return (h(Host, { key: '3156d3f1f8191b1333aa62f4e6681f5f3dd09f45' }, h("div", { key: '1a5f83c7fe84ff3d2527c323a72990ebeda76f0e', class: this.cssModifiers }, h("slot", { key: 'ec276c02a84c481310d22c06f585c82c08d9d260' }))));
     }
     static get is() { return "digi-tools-theme-provider"; }
     static get encapsulation() { return "scoped"; }
@@ -64,6 +76,35 @@ export class ToolsThemeProvider {
                 "reflect": false,
                 "attribute": "af-brand",
                 "defaultValue": "ToolsThemeProviderBrandEnum.AF25"
+            },
+            "afTheme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ToolsThemeProviderThemeEnum",
+                    "resolved": "ToolsThemeProviderThemeEnum.DARK | ToolsThemeProviderThemeEnum.LIGHT",
+                    "references": {
+                        "ToolsThemeProviderThemeEnum": {
+                            "location": "import",
+                            "path": "./tools-theme-provider.theme.enum",
+                            "id": "src/components/_tools/tools-theme-provider/tools-theme-provider.theme.enum.ts::ToolsThemeProviderThemeEnum",
+                            "referenceLocation": "ToolsThemeProviderThemeEnum"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "en",
+                            "text": "Change theme for underlying components"
+                        }],
+                    "text": "\u00C4ndrar tema p\u00E5 underliggande komponenter"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "af-theme"
             }
         };
     }

package/dist/collection/components/_tools/tools-theme-provider/tools-theme-provider.theme.enum.js ADDED Viewed

@@ -0,0 +1,5 @@
+export var ToolsThemeProviderThemeEnum;
+(function (ToolsThemeProviderThemeEnum) {
+    ToolsThemeProviderThemeEnum["LIGHT"] = "light";
+    ToolsThemeProviderThemeEnum["DARK"] = "dark";
+})(ToolsThemeProviderThemeEnum || (ToolsThemeProviderThemeEnum = {}));

package/dist/collection/design-tokens/components/_badge-status.variables.scss CHANGED Viewed

@@ -1,6 +1,6 @@
 @mixin digi-badge-status--variables() {
 	--digi--badge-status--color--primary: var(--digi--color--text--secondary);
-	--digi--badge-status--color--secondary: var(--digi--color--text--primary);
+	--digi--badge-status--color--secondary: var(--digi--color--text--primary-stay);
 	--digi--badge-status--background-color--approved--primary: var(--digi--color--background--sentiment--success--secondary);
 	--digi--badge-status--background-color--approved--secondary: var(--digi--color--background--sentiment--success--tertiary);

package/dist/collection/design-tokens/components/_button.variables.scss CHANGED Viewed

@@ -10,9 +10,9 @@
   --digi--button--color--background--secondary--active: var(--digi--color--background--interactive--hover--secondary);
   --digi--button--color--background--function--default: transparent;
-  --digi--button--color--background--function--hover: transparent;
-  --digi--button--color--background--function--focus: transparent;
-  --digi--button--color--background--function--active: transparent;
+  --digi--button--color--background--function--hover: var(--digi--color--background--interactive--hover--ghost-rider);
+  --digi--button--color--background--function--focus: var(--digi--color--background--interactive--hover--ghost-rider);
+  --digi--button--color--background--function--active: var(--digi--color--background--interactive--hover--ghost-rider);
   --digi--button--color--text--primary--default: var(--digi--color--text--interactive--secondary);
   --digi--button--color--text--primary--hover: var(--digi--color--text--interactive--secondary);
@@ -29,10 +29,10 @@
   --digi--button--color--text--function--focus: var(--digi--color--text--interactive--primary);
   --digi--button--color--text--function--active: var(--digi--color--text--interactive--primary);
-  --digi--button--color--border--primary--default: var(--digi--color--background--interactive--default--primary);
-  --digi--button--color--border--primary--hover: var(--digi--color--background--interactive--hover--primary);
-  --digi--button--color--border--primary--focus: var(--digi--color--background--interactive--default--primary);
-  --digi--button--color--border--primary--active: var(--digi--color--background--interactive--default--primary);
+  --digi--button--color--border--primary--default: var(--digi--color--border--interactive--default--primary);
+  --digi--button--color--border--primary--hover: var(--digi--color--border--interactive--hover--primary);
+  --digi--button--color--border--primary--focus: var(--digi--color--border--interactive--default--primary);
+  --digi--button--color--border--primary--active: var(--digi--color--border--interactive--default--primary);
   --digi--button--color--border--secondary--default: var(--digi--color--border--interactive--default--primary);
   --digi--button--color--border--secondary--hover: var(--digi--color--border--interactive--hover--secondary);
@@ -44,10 +44,10 @@
   --digi--button--color--border--function--focus: initial;
   --digi--button--color--border--function--active: initial;
-  --digi--button--color--icon--primary--default: var(--digi--color--icon--secondary);
-  --digi--button--color--icon--primary--hover: var(--digi--color--icon--secondary);
-  --digi--button--color--icon--primary--focus: var(--digi--color--icon--secondary);
-  --digi--button--color--icon--primary--active: var(--digi--color--icon--secondary);
+  --digi--button--color--icon--primary--default: var(--digi--color--icon--secondary-reverse);
+  --digi--button--color--icon--primary--hover: var(--digi--color--icon--secondary-reverse);
+  --digi--button--color--icon--primary--focus: var(--digi--color--icon--secondary-reverse);
+  --digi--button--color--icon--primary--active: var(--digi--color--icon--secondary-reverse);
   --digi--button--color--icon--secondary--default: var(--digi--color--icon--brand-primary);
   --digi--button--color--icon--secondary--hover: var(--digi--color--icon--brand-primary);
@@ -86,9 +86,9 @@
   --digi--button--border-radius--secondary--focus: var(--digi--border-radius--secondary);
   --digi--button--border-radius--secondary--active: var(--digi--border-radius--secondary);
   --digi--button--border-radius--function--default: initial;
-  --digi--button--border-radius--function--hover: initial;
-  --digi--button--border-radius--function--focus: initial;
-  --digi--button--border-radius--function--active: initial;
+  --digi--button--border-radius--function--hover: var(--digi--border-radius--secondary);
+  --digi--button--border-radius--function--focus: var(--digi--border-radius--secondary);
+  --digi--button--border-radius--function--active: var(--digi--border-radius--secondary);
   --digi--button--padding--small: var(--digi--gutter--button-block-small) var(--digi--gutter--button-inline-small);
   --digi--button--padding--medium: var(--digi--gutter--button-block-medium) var(--digi--gutter--button-inline-medium);

package/dist/collection/design-tokens/components/_calendar-datepicker.variables.scss CHANGED Viewed

@@ -6,7 +6,7 @@
   --digi--datepicker--calendar--max-width: #{rem(324)};
   --digi--datepicker--calendar--show-week--max-width: #{rem(374)};
   --digi--datepicker--calendar-shadow: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.7);
-  --digi--datepicker--calendar--background-color: var(--digi--color--background--interactive--default--secondary);
+  --digi--datepicker--calendar--background-color: var(--digi--color--background--dropdown);
   --digi--datepicker--input-icon--width: #{rem(14)};
   --digi--datepicker--input-icon--horizontal-padding: #{rem(12)};
   --digi--datepicker--input-icon--vertical-padding: var(--digi--global--spacing--smallest-2);