@designsystem-se/af 37.0.1 → 37.0.2-beta.1

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

@@ -1,4 +1,4 @@
-:host .digi-tools-theme-provider--af25 {
+.digi-tools-theme-provider--af25.digi-tools-theme-provider--light {
   --digi--color--logotype-color: var(--digi--color--logotype-color--light);
   --digi--color--infographic--lineart: var(--digi--color--infographic--lineart--light);
   --digi--color--infographic--background: var(--digi--color--infographic--background--light);
@@ -10,12 +10,15 @@
   --digi--color--text--description: var(--digi--color--text--description--light);
   --digi--color--text--interactive--primary: var(--digi--color--text--interactive--primary--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--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--visited: var(--digi--color--text--interactive--visited--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-elevated: var(--digi--color--background--secondary-elevated--light);
   --digi--color--background--secondary-muted: var(--digi--color--background--secondary-muted--light);
   --digi--color--background--secondary-accent: var(--digi--color--background--secondary-accent--light);
   --digi--color--background--pop-out: var(--digi--color--background--pop-out--light);
@@ -36,6 +39,7 @@
   --digi--color--background--interactive--hover--quarternary: var(--digi--color--background--interactive--hover--quarternary--light);
   --digi--color--background--interactive--hover--inverted: var(--digi--color--background--interactive--hover--inverted--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--selected--on-menu-minus-button: var(--digi--color--background--interactive--selected--on-menu-minus-button--light);
@@ -101,7 +105,114 @@
   --digi--color--misc--spinner-path: var(--digi--color--misc--spinner-path--light);
   --digi--color--misc--skeleton: var(--digi--color--misc--skeleton--light);
 }
-:host .digi-tools-theme-provider--af18 {
+.digi-tools-theme-provider--af25.digi-tools-theme-provider--dark {
+  --digi--color--logotype-color: var(--digi--color--logotype-color--dark);
+  --digi--color--infographic--lineart: var(--digi--color--infographic--lineart--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--secondary: var(--digi--color--infographic--brand--secondary--dark);
+  --digi--color--infographic--brand--tertiary: var(--digi--color--infographic--brand--tertiary--dark);
+  --digi--color--text--primary: var(--digi--color--text--primary--dark);
+  --digi--color--text--secondary: var(--digi--color--text--secondary--dark);
+  --digi--color--text--description: var(--digi--color--text--description--dark);
+  --digi--color--text--interactive--primary: var(--digi--color--text--interactive--primary--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--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--visited: var(--digi--color--text--interactive--visited--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-elevated: var(--digi--color--background--secondary-elevated--dark);
+  --digi--color--background--secondary-muted: var(--digi--color--background--secondary-muted--dark);
+  --digi--color--background--secondary-accent: var(--digi--color--background--secondary-accent--dark);
+  --digi--color--background--pop-out: var(--digi--color--background--pop-out--dark);
+  --digi--color--background--brand-primary: var(--digi--color--background--brand-primary--dark);
+  --digi--color--background--transparent: var(--digi--color--background--transparent--dark);
+  --digi--color--background--notification: var(--digi--color--background--notification--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--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--default--quaternary: var(--digi--color--background--interactive--default--quaternary--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--hover--primary: var(--digi--color--background--interactive--hover--primary--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--hover--quarternary: var(--digi--color--background--interactive--hover--quarternary--dark);
+  --digi--color--background--interactive--hover--inverted: var(--digi--color--background--interactive--hover--inverted--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--selected--on-menu-minus-button: var(--digi--color--background--interactive--selected--on-menu-minus-button--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--interactive--validation--error: var(--digi--color--background--interactive--validation--error--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--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--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--sentiment--warning--quarternary: var(--digi--color--background--sentiment--warning--quarternary--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--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--border--notification: var(--digi--color--border--notification--dark);
+  --digi--color--border--transparent: var(--digi--color--border--transparent--dark);
+  --digi--color--border--interactive--default--primary: var(--digi--color--border--interactive--default--primary--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--inverted: var(--digi--color--border--interactive--default--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--hover--inverted: var(--digi--color--border--interactive--hover--inverted--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--interactive--validation--error: var(--digi--color--border--interactive--validation--error--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--sentiment--error: var(--digi--color--border--sentiment--error--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--sentiment--info: var(--digi--color--border--sentiment--info--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--marking--navigation--selected: var(--digi--color--marking--navigation--selected--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--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--divider--primary: var(--digi--color--divider--primary--dark);
+  --digi--color--divider--secondary: var(--digi--color--divider--secondary--dark);
+  --digi--color--divider--on-brand-primary: var(--digi--color--divider--on-brand-primary--dark);
+  --digi--color--divider--cta: var(--digi--color--divider--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--cta: var(--digi--color--icon--cta--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--validation--success: var(--digi--color--icon--validation--success--dark);
+  --digi--color--icon--validation--warning: var(--digi--color--icon--validation--warning--dark);
+  --digi--color--icon--validation--error: var(--digi--color--icon--validation--error--dark);
+  --digi--color--misc--spinner-path: var(--digi--color--misc--spinner-path--dark);
+  --digi--color--misc--skeleton: var(--digi--color--misc--skeleton--dark);
+}
+.digi-tools-theme-provider--af18 {
   --digi--color--logotype-color: var(--digi--color--logotype-color--light--af18);
   --digi--color--infographic--lineart: var(--digi--color--infographic--lineart--light--af18);
   --digi--color--infographic--background: var(--digi--color--infographic--background--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
@@ -8,15 +9,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: '97e52c3ab55f46d595a7dd39c109cca4dd957d4f' }, h("div", { key: 'de8168b59ac5e8990c64642e98f523f1a3d7e8de', class: this.cssModifiers }, h("slot", { key: '02f90aaa99c1e548b8892dbb4f6d3ff07531ccb1' }))));
+        return (h(Host, { key: '26c4b07517b2a5bd4da694e26dd3401501b95da9' }, h("div", { key: 'feccc41f3530ea8347f7640778ae1a6fc3043df3', class: this.cssModifiers }, h("slot", { key: '5f5334070358065283fe3ad246a528dfd82817b5' }))));
     }
     static get is() { return "digi-tools-theme-provider"; }
     static get encapsulation() { return "scoped"; }
@@ -60,6 +73,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;

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

@@ -1,5 +1,5 @@
 @mixin digi-form-select-filter--variables() {
-  --digi--form-select-filter--footer--background: var(--digi--color--background--secondary);
+  --digi--form-select-filter--footer--background: var(--digi--color--background--secondary-accent);
   --digi--form-select-filter--scroll--max-height: 10.625rem;
 
   --digi--form-select-filter--scroll--padding: var(--digi--padding--small);
@@ -11,7 +11,7 @@
   --digi--form-select-filter--toggle-icon--transition: ease-in-out 0.2s all;
 
   --digi--form-select-filter--dropdown--border-radius: var(--digi--border-radius--input);
-  --digi--form-select-filter--dropdown--background: var(--digi--color--background--interactive--default--input-elements);
+  --digi--form-select-filter--dropdown--background: var(--digi--color--background--dropdown);
   --digi--form-select-filter--dropdown--min-width: 18.75rem;
   --digi--form-select-filter--dropdown--margin-top: var(--digi--gutter--small);
   --digi--form-select-filter--dropdown--z-index: 999;

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

@@ -1,6 +1,6 @@
 @mixin digi-form-select--variables() {
-  --digi--form-select--background--empty: var(--digi--color--background--interactive--default--secondary);
-  --digi--form-select--background--neutral: var(--digi--color--background--interactive--default--secondary);
+  --digi--form-select--background--empty: var(--digi--color--background--interactive--default--input-elements);
+  --digi--form-select--background--neutral: var(--digi--color--background--interactive--default--input-elements);
   --digi--form-select--background--success: var(--digi--color--background--interactive--validation--success);
   --digi--form-select--background--warning: var(--digi--color--background--interactive--validation--warning);
   --digi--form-select--background--error: var(--digi--color--background--interactive--validation--error);

package/dist/collection/design-tokens/components/_info-card-multi.variables.scss

@@ -13,5 +13,5 @@
   --digi--info-card-multi--related-heading--font-size--desktop: var(--digi--typography--heading-3--font-size--desktop);
   --digi--info-card-multi--entry-heading--font-size--mobile: var(--digi--typography--heading-2--font-size--mobile);
   --digi--info-card-multi--entry-heading--font-size--desktop: var(--digi--typography--heading-2--font-size--desktop);
-  --digi--info-card--background-color: var(--digi--color--background--primary);
+  --digi--info-card--background-color: var(--digi--color--background--primary-elevated);
 }

package/dist/collection/design-tokens/components/_info-card.variables.scss

@@ -1,7 +1,7 @@
 @mixin digi-info-card--variables() {
   --digi--info-card--background-color--primary: var(--digi--color--background--pop-out);
-  --digi--info-card--background-color--secondary: var(--digi--color--background--secondary);
-  --digi--info-card--background-color--related: var(--digi--color--background--primary);
+  --digi--info-card--background-color--secondary: var(--digi--color--background--secondary-elevated);
+  --digi--info-card--background-color--related: var(--digi--color--background--primary-elevated);
   --digi--info-card--color--heading: var(--digi--color--text--primary);
   --digi--info-card--color--heading--multi: var(--digi--color--text--interactive--primary);
   --digi--info-card--border: var(--digi--border-width--complementary-2) solid var(--digi--color--border--accent--primary);

package/dist/collection/design-tokens/components/_navigation-vertical-menu-item.variables.scss

@@ -2,9 +2,9 @@
   --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);

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

@@ -1,5 +1,5 @@
 @mixin digi-quote--variables() {
-  --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);
 }

package/dist/collection/design-tokens/components/_tools-feedback.variables.scss

@@ -1,6 +1,6 @@
 @mixin digi-tools-feedback--variables {
 	--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/enums.js

@@ -119,6 +119,7 @@ export * from './components/_tools/tools-feedback/tools-feedback-heading-level.e
 export * from './components/_tools/tools-feedback/tools-feedback-type.enum';
 export * from './components/_tools/tools-feedback/tools-feedback-variation.enum';
 export * from './components/_tools/tools-theme-provider/tools-theme-provider.brand.enum';
+export * from './components/_tools/tools-theme-provider/tools-theme-provider.theme.enum';
 export * from './components/_typography/typography-heading-jumbo/typography-heading-jumbo-level.enum';
 export * from './components/_typography/typography-heading-jumbo/typography-heading-jumbo-variation.enum';
 export * from './components/_typography/typography-meta/typography-meta-variation.enum';