@designsystem-se/af 38.0.1-beta.0 → 38.0.1-beta.1

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

@@ -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

@@ -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/_progress/progress-indicator/progress-indicator.css

@@ -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/_quote/quote/quote.css

@@ -3,9 +3,9 @@ v2.0 | 20110126
 License: none (public domain)
 */
 :host {
-  --digi--quote--background--primary: var(--digi--color--background--primary);
+  --digi--quote--background--primary: var(--digi--color--background--primary-elevated);
   --digi--quote--background--secondary: var(--digi--color--background--pop-out);
-  --digi--quote--background--tertiary: var(--digi--color--background--secondary);
+  --digi--quote--background--tertiary: var(--digi--color--background--secondary-elevated);
   --BACKGROUND: transparent;
 }
 :host .digi-quote {

package/dist/collection/components/_tools/tools-feedback/tools-feedback.css

@@ -1,6 +1,6 @@
 :host {
   --digi--tools-feedback--background-color--primary: var(--digi--color--background--pop-out);
-  --digi--tools-feedback--background-color--secondary: var(--digi--color--background--primary);
+  --digi--tools-feedback--background-color--secondary: var(--digi--color--background--primary-elevated);
   --digi--tools-feedback--padding: var(--digi--padding--large);
   --digi--tools-feedback--font-size--desktop:var(--digi--typography--heading-2--font-size--desktop);
   --digi--tools-feedback--font-size--mobile:var(--digi--typography--heading-2--font-size--mobile);

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

@@ -1,20 +1,24 @@
-: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--quinary: var(--digi--color--background--interactive--default--quinary--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--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);
+  --digi--color--background--interactive--hover--quinary: var(--digi--color--background--interactive--hover--quinary--light);
   --digi--color--background--interactive--hover--secondary: var(--digi--color--background--interactive--hover--secondary--light);
   --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);
@@ -23,14 +27,17 @@
   --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--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,9 +51,11 @@
   --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);
+  --digi--color--border--interactive--default--discreet: var(--digi--color--border--interactive--default--discreet--light);
   --digi--color--border--interactive--default--inverted: var(--digi--color--border--interactive--default--inverted--light);
   --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);
@@ -69,11 +78,13 @@
   --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: var(--digi--color--divider--tertiary--light);
   --digi--color--icon--brand-primary: var(--digi--color--icon--brand-primary--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--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 +98,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);
@@ -99,29 +111,160 @@
   --digi--color--text--interactive--brand-primary: var(--digi--color--text--interactive--brand-primary--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--quinary: var(--digi--color--background--interactive--default--quinary--dark);
+  --digi--color--background--interactive--default--secondary: var(--digi--color--background--interactive--default--secondary--dark);
+  --digi--color--background--interactive--default--secondary-inverted: var(--digi--color--background--interactive--default--secondary-inverted--dark);
+  --digi--color--background--interactive--default--tertiary: var(--digi--color--background--interactive--default--tertiary--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--quinary: var(--digi--color--background--interactive--hover--quinary--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--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--discreet: var(--digi--color--border--interactive--default--discreet--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--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: var(--digi--color--divider--tertiary--dark);
+  --digi--color--icon--brand-primary: var(--digi--color--icon--brand-primary--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--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-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--quinary: var(--digi--color--background--interactive--default--quinary--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--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);
+  --digi--color--background--interactive--hover--quinary: var(--digi--color--background--interactive--hover--quinary--light--af18);
   --digi--color--background--interactive--hover--secondary: var(--digi--color--background--interactive--hover--secondary--light--af18);
   --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);
@@ -130,14 +273,17 @@
   --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--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,9 +297,11 @@
   --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);
+  --digi--color--border--interactive--default--discreet: var(--digi--color--border--interactive--default--discreet--light--af18);
   --digi--color--border--interactive--default--inverted: var(--digi--color--border--interactive--default--inverted--light--af18);
   --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);
@@ -176,11 +324,13 @@
   --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: var(--digi--color--divider--tertiary--light--af18);
   --digi--color--icon--brand-primary: var(--digi--color--icon--brand-primary--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--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 +344,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);
@@ -206,9 +357,13 @@
   --digi--color--text--interactive--brand-primary: var(--digi--color--text--interactive--brand-primary--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

@@ -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
@@ -7,15 +8,27 @@ import { ToolsThemeProviderBrandEnum } from "./tools-theme-provider.brand.enum";
 export class ToolsThemeProvider {
     constructor() {
         this.afBrand = ToolsThemeProviderBrandEnum.AF25;
+        this.afTheme = undefined;
+    }
+    // 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: 'dec67b8d136a0bb2c1ee3a428875a5207c9935cb' }, h("div", { key: 'c7769ceb730493ced3691539f854b65f3556bcb3', class: this.cssModifiers }, h("slot", { key: '4a2fc124978c9b0aa6062332c5b9744eecc11283' }))));
+        return (h(Host, { key: 'c9130d5c232aa4f95180d78650f4f11ed962bdcd' }, h("div", { key: '211f4a5082223959db11fe5714af813c55253be6', class: this.cssModifiers }, h("slot", { key: '64541d7961044d9e7d017678b7951a288e6007d3' }))));
     }
     static get is() { return "digi-tools-theme-provider"; }
     static get encapsulation() { return "scoped"; }
@@ -59,6 +72,34 @@ export class ToolsThemeProvider {
                 "attribute": "af-brand",
                 "reflect": false,
                 "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"
+                        }
+                    }
+                },
+                "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,
+                "attribute": "af-theme",
+                "reflect": false
             }
         };
     }

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

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

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

@@ -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--quinary);
+  --digi--button--color--background--function--focus: var(--digi--color--background--interactive--hover--quinary);
+  --digi--button--color--background--function--active: var(--digi--color--background--interactive--hover--quinary);
 
   --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);
@@ -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

@@ -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);

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

@@ -3,6 +3,7 @@
 
   --digi--calendar--header--font-family: var(--digi--global--typography--font-family--default);
   --digi--calendar--header--font-weight: var(--digi--global--typography--font-weight--semibold);
+  --digi--calendar--header--font-color: var(--digi--color--text--primary);
   --digi--calendar--header--display: flex;
   --digi--calendar--header--align-items: center;
   --digi--calendar--header--justify-content: space-between;
@@ -32,8 +33,8 @@
   --digi--calendar--date--today--circle-border: 2px solid var(--digi--color--marking--indication--secondary);
   --digi--calendar--date--today--circle-margin: 10%;
 
-  --digi--calendar--date--selected--color: var(--digi--color--text--interactive--secondary);
-  --digi--calendar--date--selected--background-color: var(--digi--color--background--interactive--selected--primary);
+  --digi--calendar--date--selected--color: var(--digi--color--text--interactive--secondary-discreet);
+  --digi--calendar--date--selected--background-color: var(--digi--color--background--interactive--selected--primary-stay);
   --digi--calendar--date--not-selectable-strike--color: var(--digi--color--marking--indication--tertiary);
   --digi--calendar--week--font-style: italic;
   --digi--calendar--week--font-size: var(--digi--global--typography--font-size--small);

package/dist/collection/design-tokens/components/_dialog.variables.scss

@@ -29,7 +29,7 @@
 	--digi--dialog--content--width--large: 56.25rem;
 
 	--digi--dialog--content--color--primary: var(--digi--color--text--primary);
-	--digi--dialog--content--color--background--primary: var(--digi--color--background--primary);
+	--digi--dialog--content--color--background--primary: var(--digi--color--background--primary-elevated);
 
 	--digi--dialog--icon--color--primary: var(--digi--color--icon--primary);
 	--digi--dialog--icon--color--primary--hover: var(--digi--color--icon--primary);

package/dist/collection/design-tokens/components/_expandable-faq-item.variables.scss

@@ -1,7 +1,7 @@
 @mixin digi-expandable-faq-item--variables() {
   --digi--expandable-faq-item--header--background-color--primary: var(--digi--color--background--pop-out);
-  --digi--expandable-faq-item--header--background-color--secondary: var(--digi--color--background--secondary);
-  --digi--expandable-faq-item--header--background-color--tertiary: var(--digi--color--background--primary);
+  --digi--expandable-faq-item--header--background-color--secondary: var(--digi--color--background--secondary-elevated);
+  --digi--expandable-faq-item--header--background-color--tertiary: var(--digi--color--background--primary-elevated);
   --digi--expandable-faq-item--header--toggle-icon--transition: ease-in-out var(--digi--animation--duration--base) all;
   --digi--expandable-faq-item--content--transition: ease-in-out var(--digi--animation--duration--base) height;
 

package/dist/collection/design-tokens/components/_form-checkbox.variables.scss

@@ -8,7 +8,7 @@
   --digi--form-checkbox--box-shadow--error: var(--digi--color--border--interactive--validation--error);
   --digi--form-checkbox--box-shadow--warning: var(--digi--color--border--interactive--validation--warning);
 
-  --digi--form-checkbox--background-color: var(--digi--color--background--primary);
+  --digi--form-checkbox--background-color: var(--digi--color--background--interactive--default--input-elements);
   --digi--form-checkbox--background-color--primary: var(--digi--color--background--interactive--selected--primary);
   --digi--form-checkbox--background-color--secondary: var(--digi--color--background--interactive--selected--secondary);
   --digi--form-checkbox--background-color--error: var(--digi--color--background--interactive--validation--error);

package/dist/collection/design-tokens/components/_form-file-upload.variables.scss

@@ -6,6 +6,8 @@
   --digi--form-file-upload--color--background--large--default: var(--digi--color--background--interactive--default--quaternary);
   --digi--form-file-upload--color--background--large--hover: var(--digi--color--background--interactive--hover--secondary);
 
+  --digi--form-file-upload--color--background--uploaded-files: var(--digi--color--background--secondary-elevated);
+
   --digi--form-file-upload--color--border--small--default: var(--digi--color--border--interactive--default--on-input-nuance);
   --digi--form-file-upload--color--border--small--hover: var(--digi--color--border--interactive--hover--primary);
   --digi--form-file-upload--color--border--medium--default: var(--digi--color--border--interactive--default--on-input-nuance);

package/dist/collection/design-tokens/components/_form-filter.variables.scss

@@ -12,7 +12,7 @@
 
   --digi--form-filter--dropdown--box-shadow: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.7);
   --digi--form-filter--dropdown--border-radius: var(--digi--border--radius--primary);
-  --digi--form-filter--dropdown--background: var(--digi--color--background--primary);
+  --digi--form-filter--dropdown--background: var(--digi--color--background--dropdown);
   --digi--form-filter--dropdown--min-width: 18.75rem;
   --digi--form-filter--dropdown--margin-top: var(--digi--gutter--small);
   --digi--form-filter--dropdown--z-index: 999;