npm - @designsystem-se/af - Versions diffs - 38.2.1-beta.dark-mode → 39.0.0 - Mend

@designsystem-se/af 38.2.1-beta.dark-mode → 39.0.0

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

Files changed (415) 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--interactive--tertiary);
+  --digi--navigation-context-menu--item--font-color: var(--digi--color--text--primary);
   display: block;
   box-sizing: border-box;
   width: fit-content;
@@ -82,7 +82,6 @@ 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%;
@@ -109,7 +108,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);
+  color: var(--digi--navigation-context-menu--item--font-color, #333333);
   text-decoration: none;
   margin: 0;
   width: 100%;

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

@@ -45,7 +45,7 @@ export class ContextMenu {
     syncActiveItem() {
         if (this.afActiveItem != null) {
             const menuItems = this.afMenuItems;
-            this.activeItemIdx = menuItems.findIndex((item) => item.id.toString() === this.afActiveItem);
+            this.activeItemIdx = menuItems.findIndex((item) => item.id.toString() === this.afActiveItem.toString());
         }
     }
     syncItems() {
@@ -197,13 +197,13 @@ export class ContextMenu {
     }
     render() {
         const menuItems = this.afMenuItems;
-        return (h(Host, { key: '3d710f244c36361e7a1db54d6ff91bcfa7dc8f61' }, h("div", { key: '098d2c031d46d62987810f254621d5540709c738', id: `${this.afId}-identifier`, class: {
+        return (h(Host, { key: '1e6a37f94799e1cf0d2d6526e1b690e73f59e0a3' }, h("div", { key: '4018c8310a9012a9b4644dbb3175f3e362fd604b', id: `${this.afId}-identifier`, class: {
                 'digi-navigation-context-menu': true,
                 'digi-navigation-context-menu--active': this.visible
-            } }, h("digi-button", { key: '1bb808252655162e41807b2c05466ca6eb59dcd2', id: `${this.afId}-trigger`, ref: (ref) => (this.buttonRef = ref), onClick: () => this.handleToggle(), afVariation: "function", afAriaControls: `${this.afId}-dropdown`, afAriaExpanded: this.visible, afAriaLabel: this.afAriaLabel || null, class: "digi-navigation-context-menu__trigger-button" }, !!this.afIcon && h(this.digiIcon, { key: '3b9dea7016fba1b2fd47cbb554dfc237c677efd9', slot: "icon" }), this.afTitle, h("digi-icon-chevron-down", { key: '0fc00e257f1c52097e5e9588128a09d31c0e9470', class: "digi-navigation-context-menu__toggle-icon", slot: "icon-secondary" })), h("div", { key: '3ece43fb02a56fc404a371b3eec3d9bc5255cf6d', class: {
+            } }, h("digi-button", { key: '03a920ff0116de47903ab261dca6201463c1b9fc', id: `${this.afId}-trigger`, ref: (ref) => (this.buttonRef = ref), onClick: () => this.handleToggle(), afVariation: "function", afAriaControls: `${this.afId}-dropdown`, afAriaExpanded: this.visible, afAriaLabel: this.afAriaLabel || null, class: "digi-navigation-context-menu__trigger-button" }, !!this.afIcon && h(this.digiIcon, { key: '7287a3e266e905dbc90312fe6101602d312f3dd7', slot: "icon" }), this.afTitle, h("digi-icon-chevron-down", { key: 'e7d297783ab722447d202df9971ebe6d00fb9fff', class: "digi-navigation-context-menu__toggle-icon", slot: "icon-secondary" })), h("div", { key: 'e7226f3e481a7c8c57acce8948f624546dfded26', class: {
                 'digi-navigation-context-menu__list': true,
                 'digi-navigation-context-menu__list--active': this.visible
-            } }, h("div", { key: 'd25725930bd2dc57e3cba2d79a80a30d70ca7feb', onKeyDown: (e) => {
+            } }, h("div", { key: 'bb9f36a53eaff6fc0e76c5024ba817fb898adac8', onKeyDown: (e) => {
                 this.handleKey(e);
             }, id: `${this.afId}-dropdown`, style: {
                 visibility: this.visible ? 'visible' : 'hidden'
@@ -450,9 +450,9 @@ export class ContextMenu {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Sets a preselected value. In React this has to be of the type string."
+                            "text": "Sets a preselected value."
                         }],
-                    "text": "S\u00E4tter ett f\u00F6rvalt v\u00E4rde. I React m\u00E5ste detta vara av typen string."
+                    "text": "S\u00E4tter ett f\u00F6rvalt v\u00E4rde."
                 },
                 "getter": false,
                 "setter": false,

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--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--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--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 CHANGED Viewed

@@ -43,7 +43,6 @@ 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;
@@ -57,7 +56,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--description);
+  color: var(--digi--color--text--primary);
   margin: 0;
 }
 :host .digi-progress-indicator__icon {
@@ -100,10 +99,10 @@ License: none (public domain)
   margin-left: 8px;
 }
 :host .digi-progress-indicator__validation-label--warning {
-  background-color: var(--digi--color--background--sentiment--warning--quarternary);
+  background-color: var(--digi--color--background--interactive--validation--warning);
 }
 :host .digi-progress-indicator__validation-label--error {
-  background-color: var(--digi--color--background--sentiment--error--tertiary-discreet);
+  background-color: var(--digi--color--background--interactive--validation--error);
 }
 :host .digi-progress-indicator__list {
   position: relative;

package/dist/collection/components/_quote/quote/quote.css CHANGED Viewed

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

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

@@ -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-elevated);
+  --digi--tools-feedback--background-color--secondary: var(--digi--color--background--primary);
   --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 CHANGED Viewed

@@ -1,16 +1,13 @@
-.digi-tools-theme-provider--af25.digi-tools-theme-provider--light {
+:host .digi-tools-theme-provider--af25 {
   --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-ghost-gra: var(--digi--color--background--interactive--default--quinary-ghost-gra--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--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);
@@ -18,7 +15,6 @@
   --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);
@@ -27,17 +23,14 @@
   --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);
@@ -51,11 +44,9 @@
   --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--discreeeeeeet: var(--digi--color--border--interactive--default--discreeeeeeet--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);
@@ -78,15 +69,11 @@
   --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);
@@ -100,7 +87,6 @@
   --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);
@@ -111,158 +97,24 @@
   --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);
 }
-.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-ghost-gra: var(--digi--color--background--interactive--default--quinary-ghost-gra--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--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--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--discreeeeeeet: var(--digi--color--border--interactive--default--discreeeeeeet--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-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 {
+:host .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-ghost-gra: var(--digi--color--background--interactive--default--quinary-ghost-gra--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--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);
@@ -270,7 +122,6 @@
   --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);
@@ -279,17 +130,14 @@
   --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);
@@ -303,11 +151,9 @@
   --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--discreeeeeeet: var(--digi--color--border--interactive--default--discreeeeeeet--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);
@@ -330,15 +176,11 @@
   --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);
@@ -352,7 +194,6 @@
   --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);
@@ -363,16 +204,11 @@
   --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,6 +1,5 @@
 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,27 +7,15 @@ import { ToolsThemeProviderThemeEnum } from "./tools-theme-provider.theme.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--light': this.fallbackTheme === ToolsThemeProviderThemeEnum.LIGHT,
-            'digi-tools-theme-provider--dark': this.fallbackTheme === ToolsThemeProviderThemeEnum.DARK
+            'digi-tools-theme-provider--af18': this.afBrand === ToolsThemeProviderBrandEnum.AF18
         };
     }
     render() {
-        return (h(Host, { key: 'c9130d5c232aa4f95180d78650f4f11ed962bdcd' }, h("div", { key: '211f4a5082223959db11fe5714af813c55253be6', class: this.cssModifiers }, h("slot", { key: '64541d7961044d9e7d017678b7951a288e6007d3' }))));
+        return (h(Host, { key: 'dec67b8d136a0bb2c1ee3a428875a5207c9935cb' }, h("div", { key: 'c7769ceb730493ced3691539f854b65f3556bcb3', class: this.cssModifiers }, h("slot", { key: '4a2fc124978c9b0aa6062332c5b9744eecc11283' }))));
     }
     static get is() { return "digi-tools-theme-provider"; }
     static get encapsulation() { return "scoped"; }
@@ -72,34 +59,6 @@ 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/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: 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--background--function--hover: transparent;
+  --digi--button--color--background--function--focus: transparent;
+  --digi--button--color--background--function--active: transparent;
   --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--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--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--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-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--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--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: 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--border-radius--function--hover: initial;
+  --digi--button--border-radius--function--focus: initial;
+  --digi--button--border-radius--function--active: initial;
   --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--dropdown);
+  --digi--datepicker--calendar--background-color: var(--digi--color--background--interactive--default--secondary);
   --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);