@designsystem-se/af 32.2.0 → 32.3.0

package/dist/cjs/{logo-variation.enum-607fadb4.js → logo-variation.enum-3632e1e1.js}

@@ -1,5 +1,11 @@
 'use strict';
 
+exports.LinkVariation = void 0;
+(function (LinkVariation) {
+    LinkVariation["SMALL"] = "small";
+    LinkVariation["LARGE"] = "large";
+})(exports.LinkVariation || (exports.LinkVariation = {}));
+
 exports.LogoColor = void 0;
 (function (LogoColor) {
     LogoColor["PRIMARY"] = "primary";

package/dist/cjs/typography-variation.enum-5b035b3b.js

@@ -0,0 +1,7 @@
+'use strict';
+
+exports.TypographyVariation = void 0;
+(function (TypographyVariation) {
+    TypographyVariation["SMALL"] = "small";
+    TypographyVariation["LARGE"] = "large";
+})(exports.TypographyVariation || (exports.TypographyVariation = {}));

package/dist/collection/components/_badge/badge-status/badge-status.css

@@ -279,7 +279,7 @@ License: none (public domain)
 
 :host {
   --digi--badge-status--color--primary: var(--digi--color--text--inverted);
-  --digi--badge-status--color--secondary: var(--digi--global--color--neutral--grayscale--darkest-6);
+  --digi--badge-status--color--secondary: #333;
   --digi--badge-status--background-color--approved--primary: var(--digi--global--color--function--success--dark);
   --digi--badge-status--background-color--approved--secondary: var(--digi--global--color--function--success--lightest-2);
   --digi--badge-status--background-color--denied--primary: var(--digi--global--color--function--danger--dark);
@@ -319,7 +319,7 @@ License: none (public domain)
   --BACKGROUND-COLOR: var(
     --digi--badge-status--background-color--approved--secondary
   );
-  --COLOR: var(--digi--badge-status--background-color--approved--primary);
+  --COLOR: var(--digi--badge-status--color--secondary);
 }
 :host .digi-badge-status--denied--primary {
   --BACKGROUND-COLOR: var(
@@ -331,7 +331,7 @@ License: none (public domain)
   --BACKGROUND-COLOR: var(
     --digi--badge-status--background-color--denied--secondary
   );
-  --COLOR: var(--digi--global--color--function--danger--dark);
+  --COLOR: var(digi--badge-status--color--secondary);
 }
 :host .digi-badge-status--missing--primary {
   --BACKGROUND-COLOR: var(
@@ -343,7 +343,7 @@ License: none (public domain)
   --BACKGROUND-COLOR: var(
     --digi--badge-status--background-color--missing--secondary
   );
-  --COLOR: var(--digi--badge-status--color--missing);
+  --COLOR: var(--digi--badge-status--color--secondary);
 }
 :host .digi-badge-status--prompt--primary {
   --BACKGROUND-COLOR: var(
@@ -355,7 +355,7 @@ License: none (public domain)
   --BACKGROUND-COLOR: var(
     --digi--badge-status--background-color--prompt--secondary
   );
-  --COLOR: var(--digi--color--background--inverted-6);
+  --COLOR: var(--digi--badge-status--color--secondary);
 }
 :host .digi-badge-status--beta--primary {
   --BACKGROUND-COLOR: var(
@@ -364,10 +364,8 @@ License: none (public domain)
   --COLOR: var(--digi--badge-status--color--primary);
 }
 :host .digi-badge-status--beta--secondary {
-  --BACKGROUND-COLOR: var(
-    --digi--global--color--complementary--cerise--lightest-2
-  );
-  --COLOR: var(--digi--badge-status--background-color--beta--primary);
+  --BACKGROUND-COLOR: #f4cada;
+  --COLOR: var(--digi--badge-status--color--secondary);
 }
 :host .digi-badge-status--neutral--primary {
   --BACKGROUND-COLOR: var(
@@ -379,7 +377,7 @@ License: none (public domain)
   --BACKGROUND-COLOR: var(
     --digi--badge-status--background-color--neutral--secondary
   );
-  --COLOR: var(--digi--badge-status--background-color--neutral--primary);
+  --COLOR: var(--digi--badge-status--color--secondary);
 }
 :host .digi-badge-status__text {
   text-align: center;

package/dist/collection/components/_logo/logo/logo.css

@@ -365,7 +365,7 @@ License: none (public domain)
   display: flex;
 }
 :host .digi-logo svg {
-  fill: currentColor;
+  fill: var(--COLOR);
   width: 100%;
   height: auto;
   max-width: var(--digi--logo--img--max-width);

package/dist/collection/components/_navigation/navigation-tablist/navigation-tablist.css

@@ -348,7 +348,7 @@ License: none (public domain)
   flex-direction: column;
   transition: background-color 0.1s linear;
 }
-:host .digi-tablist .digi-tab .content {
+:host .digi-tablist .digi-tab .tablist-content {
   flex: 1;
   display: flex;
   padding-right: 0.75rem;

package/dist/collection/components/_navigation/navigation-tablist/navigation-tablist.js

@@ -201,7 +201,9 @@ export class NavigationTablist {
     componentDidLoad() {
         var _a, _b, _c;
         // Also listen to window resize for viewport zoom changes
-        window.addEventListener('resize', this.handleResize, { passive: true });
+        if (window) {
+            window.addEventListener('resize', this.handleResize, { passive: true });
+        }
         // Recalculate once fonts finish loading (text width changes with webfonts)
         (_c = (_b = (_a = document.fonts) === null || _a === void 0 ? void 0 : _a.ready) === null || _b === void 0 ? void 0 : _b.then) === null || _c === void 0 ? void 0 : _c.call(_b, () => this.handleResize());
         this.setupResizeHandler();
@@ -210,20 +212,23 @@ export class NavigationTablist {
         this.syncControls();
     }
     disconnectedCallback() {
-        window.removeEventListener('resize', this.handleResize);
-        this.resizeObserver.disconnect();
+        var _a;
+        if (window) {
+            window.removeEventListener('resize', this.handleResize);
+        }
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         if (this._requestAnimationFrame)
             cancelAnimationFrame(this._requestAnimationFrame);
     }
     render() {
-        return (h(Host, { key: '0ebc562f78d92604a9d19088def51db4754ef6b1' }, h("div", { key: 'a06dff67b119ff687e4f5cfd632fff016f247cb8', class: {
+        return (h(Host, { key: '1c4f02178c4ec0a728bc08b9679a9c067d58e64b' }, h("div", { key: '8cd714379823932261c1903babf6cbe6c1df6b95', class: {
                 'digi-tablist': true,
                 'digi-tablist--overflow-scroll': this.afOverflowMode === OverflowMode.Scroll,
                 'digi-tablist--overflow-controls': this.afOverflowMode === OverflowMode.Controls
-            } }, h("div", { key: 'dbb1f5ad0cd7d23e858f1562e9fef4fcdab8b113', class: "control-wrapper", style: {
+            } }, h("div", { key: 'c263bdf6f3d1904d43e90d7ff92547f6c3665bb0', class: "control-wrapper", style: {
                 left: '0',
                 visibility: this.showPrev ? 'visible' : 'hidden'
-            } }, h("button", { key: '890f407a4d46d224f87ed552ed245b3784c8e07d', tabIndex: -1, type: "button", "aria-hidden": "true", class: { 'tab-control-button': true }, onClick: () => this.handleTabControl(Direction.Previous) }, h("digi-icon-chevron-left", { key: '6af35c34553c0772790da5d815220a0567fe401e' }))), h("div", { key: 'd4ba124344db88721ce209df5bc1b5b404f22591', role: "tablist", ref: (ref) => (this.tablistRef = ref), "aria-labelledby": this.afAriaLabelledby, "aria-label": this.afAriaLabel }, this.tabs.map((tab) => {
+            } }, h("button", { key: 'ed97d0d647af8f9cd4c8b93a789f247297df5c6c', tabIndex: -1, type: "button", "aria-hidden": "true", class: { 'tab-control-button': true }, onClick: () => this.handleTabControl(Direction.Previous) }, h("digi-icon-chevron-left", { key: 'afcb7a95d3e2ac83b4af9881ddde8163905cc4c8' }))), h("div", { key: '9de31c4f7e188a5105f806cd0a6b1af800bc5b28', role: "tablist", ref: (ref) => (this.tablistRef = ref), "aria-labelledby": this.afAriaLabelledby, "aria-label": this.afAriaLabel }, this.tabs.map((tab) => {
             const focusable = tab.id === this.tabs[this.selectedTab].id;
             const isActive = tab.id === this.tabs[this.activeTab].id;
             const Icon = `digi-icon-${tab.icon}`;
@@ -231,11 +236,11 @@ export class NavigationTablist {
             return (h("button", { ref: (ref) => (this.tabRefs[tab.id] = ref), class: {
                     'digi-tab': true,
                     'is-active': isActive
-                }, id: `tab-${tab.id}`, role: "tab", type: "button", tabindex: focusable ? '0' : '-1', "aria-label": tab.ariaLabel, "aria-selected": isActive.toString(), "aria-controls": `tabpanel-${tab.id}`, onClick: () => this.handleTabChange(tab) }, h("div", { class: "content-wrapper" }, h("span", { class: "content" }, tab.icon && h(Icon, { "aria-hidden": "true" }), h("span", { class: "title", "data-text": tab.title }, tab.title), tab.badgeValue && (h("digi-badge-notification", { afValue: badgeValue, "aria-hidden": "true" }))), h("div", { class: "indicator" }))));
-        })), h("div", { key: '52e0127c0665d8d0dda0a417dd9d9e89bd16c412', class: "control-wrapper", style: {
+                }, id: `tab-${tab.id}`, role: "tab", type: "button", tabindex: focusable ? '0' : '-1', "aria-label": tab.ariaLabel, "aria-selected": isActive.toString(), "aria-controls": `tabpanel-${tab.id}`, onClick: () => this.handleTabChange(tab) }, h("div", { class: "content-wrapper" }, h("span", { class: "tablist-content" }, tab.icon && h(Icon, { "aria-hidden": "true" }), h("span", { class: "title", "data-text": tab.title }, tab.title), tab.badgeValue && (h("digi-badge-notification", { afValue: badgeValue, "aria-hidden": "true" }))), h("div", { class: "indicator" }))));
+        })), h("div", { key: 'c476c9b8713f87bddfc2bf7c22f1f0d32fa6af59', class: "control-wrapper", style: {
                 right: '0',
                 visibility: this.showNext ? 'visible' : 'hidden'
-            } }, h("button", { key: 'e128ac6e276b611301b0ce942167b63e76a784da', tabIndex: -1, type: "button", "aria-hidden": "true", class: { 'tab-control-button': true }, onClick: () => this.handleTabControl(Direction.Next) }, h("digi-icon-chevron-right", { key: 'baa3465099d6153b8494038179ed6e5b5ca727ed' })))), h("div", { key: 'fd362fb3411dc358901fd50373ab15d7f730eb0e', ref: (ref) => (this.panelsRef = ref), role: "presentation" }, h("slot", { key: '3838600e504c7d7123b8e8f127c917a2d12fcb51' }))));
+            } }, h("button", { key: '9c4432ddaa1318580ca5dcad137c677444d463dc', tabIndex: -1, type: "button", "aria-hidden": "true", class: { 'tab-control-button': true }, onClick: () => this.handleTabControl(Direction.Next) }, h("digi-icon-chevron-right", { key: '2f72fddaa29d6ba0d6956f8fcf1db6b457f8c0fd' })))), h("div", { key: '2294cc2cb2c5947d904340b0daa3a81e6b18f1e1', ref: (ref) => (this.panelsRef = ref), role: "presentation" }, h("slot", { key: '14844d23f7ae2ac24c82fe0d21f5f2f5b423c53e' }))));
     }
     static get is() { return "digi-tablist"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_progress/progress-circle/progress-circle.css

@@ -298,21 +298,31 @@ License: none (public domain)
 * @prop --digi--progress-indicator--icon--error--background-color: var(--digi--color--background--danger-2);
 */
 :host {
+  --digi--progress-circle--heading--font-size: var(--digi--typography--heading-2--font-size--mobile);
   --digi--progress-circle--border-color: var(--digi--color--border--neutral-5);
-  --digi--progress-circle--border-color--active: var(--digi--global--color--function--success--base);
-  --digi--progress-circle--border-color--secondary--active: var(--digi--color--border--secondary);
+  --digi--progress-circle--border-color--active: var(
+    --digi--global--color--function--success--base
+  );
+  --digi--progress-circle--border-color--secondary--active: var(
+    --digi--color--border--secondary
+  );
   --digi--progress-circle--border-width: var(--digi--border-width--primary);
-  --digi--progress-circle--step--background: var(--digi--color--background--primary);
-  --digi--progress-circle--step--background--active: var(--digi--global--color--function--success--base);
-  --digi--progress-circle--step--background--secondary--active: var(--digi--color--background--inverted-1);
+  --digi--progress-circle--step--background: var(
+    --digi--color--background--primary
+  );
+  --digi--progress-circle--step--background--active: var(
+    --digi--global--color--function--success--base
+  );
+  --digi--progress-circle--step--background--secondary--active: var(
+    --digi--color--background--inverted-1
+  );
   --digi--progress-circle--step--size: var(--digi--global--spacing--base);
   --digi--progress-circle--step--size--large: 1.625rem;
   --digi--progress-circle--step--size--active: 1.625rem;
   --digi--progress-circle--step--size--active--large: 1.625rem;
+  --digi--progress-circle--heading--font-size: var(--digi--typography--heading-2--font-size--mobile);
 }
 :host .digi-progress-circle {
-  font-size: var(--digi--progress-indicator--label--font-size);
-  margin: var(--digi--progress-indicator--margin);
   box-sizing: border-box;
 }
 :host .digi-progress-circle:not(.digi-progress-circle--linear) {
@@ -324,13 +334,12 @@ License: none (public domain)
   font-family: var(--digi--global--typography--font-family--default);
 }
 :host .digi-progress-circle__heading {
-  font-size: var(--digi--typography--heading-2--font-size--desktop);
   font-weight: var(--digi--progress-indicator--heading--font-weight);
   margin: 0;
   margin-bottom: 0.5rem;
 }
 :host .digi-progress-circle__heading--circle {
-  font-size: var(--digi--progress-indicator--heading--circle--font-size);
+  font-size: var(--digi--progress-circle--heading--font-size);
   margin-bottom: 0.35rem;
 }
 :host .digi-progress-circle__next {

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

@@ -418,16 +418,11 @@ License: none (public domain)
 :host .digi-progress-list-item__header--heading--title--expandable {
   cursor: pointer;
 }
-:host .digi-progress-list-item__header--heading--title--expandable:hover, :host .digi-progress-list-item__header--heading--title--expandable:active {
-  color: var(--digi--color--text--link);
-  text-decoration: underline;
-}
 :host .digi-progress-list-item__header--button {
   align-items: center;
   background-color: transparent;
   border-radius: 0;
   border: none;
-  color: var(--digi--color--text--link);
   cursor: pointer;
   display: flex;
   font-size: var(--digi--typography--body--font-size--desktop);
@@ -436,6 +431,9 @@ License: none (public domain)
   padding: 0;
   width: 100%;
 }
+:host .digi-progress-list-item__header--button:hover, :host .digi-progress-list-item__header--button:active {
+  text-decoration: underline;
+}
 :host .digi-progress-list-item__header--button:focus-visible {
   outline: 2px solid black;
   outline-offset: 2px;

package/dist/collection/components/_tools/tools-languagepicker/tools-languagepicker.js

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
 /**
  * @swedishName Språkväljare
+ * @deprecated
  */
 export class ToolsLanguagepicker {
     constructor() {
@@ -82,19 +83,19 @@ export class ToolsLanguagepicker {
         return {};
     }
     render() {
-        return (h("div", { key: 'b24bc6bab6b6e0f649310f8018e65886df845893', class: Object.assign({ 'digi-tools-languagepicker': true }, this.cssModifiers) }, this._afLanguagepickerHide === false && (h("digi-navigation-context-menu", { key: '784318cfc9bff753766a3a2e1ac527a2b663aa50', afText: this._afLanguagepickerText, afId: this._afId + '__languagepicker', afStartSelected: this._afLanguagepickerStartSelected, afNavigationContextMenuItems: this._afLanguagepickerItems, afIcon: this._languagepickerIcon, onAfOnActive: (event) => this.afOnActive.emit(event.detail), onAfOnBlur: (event) => this.afOnBlur.emit(event.detail), onAfOnChange: (event) => this.afOnChange.emit(event.detail), onAfOnInactive: (event) => this.afOnInactive.emit(event.detail), onAfOnSelect: (event) => this.afOnSelect.emit(event.detail), onAfOnToggle: (event) => this.afOnToggle.emit(event.detail), class: "digi-tools-languagepicker__context" })), this._afListenShow && (h("digi-button", { key: 'bcc738ee0351af91f225eaaed61262921a99f7f5', "af-size": "medium", "af-variation": "primary", onAfOnClick: (event) => {
+        return (h("div", { key: 'f9f8a82bf6ff533a1351f58e43feb9a9975f3b17', class: Object.assign({ 'digi-tools-languagepicker': true }, this.cssModifiers) }, this._afLanguagepickerHide === false && (h("digi-navigation-context-menu", { key: '18667e2f55d8a221847bf0d8da2ecb464c3d4563', afText: this._afLanguagepickerText, afId: this._afId + '__languagepicker', afStartSelected: this._afLanguagepickerStartSelected, afNavigationContextMenuItems: this._afLanguagepickerItems, afIcon: this._languagepickerIcon, onAfOnActive: (event) => this.afOnActive.emit(event.detail), onAfOnBlur: (event) => this.afOnBlur.emit(event.detail), onAfOnChange: (event) => this.afOnChange.emit(event.detail), onAfOnInactive: (event) => this.afOnInactive.emit(event.detail), onAfOnSelect: (event) => this.afOnSelect.emit(event.detail), onAfOnToggle: (event) => this.afOnToggle.emit(event.detail), class: "digi-tools-languagepicker__context" })), this._afListenShow && (h("digi-button", { key: '4eafb707710d6f50bca516c49d964b336b68b80e', "af-size": "medium", "af-variation": "primary", onAfOnClick: (event) => {
                 this.afOnClick.emit(event);
             }, onAfOnBlur: (event) => {
                 this.afOnBlur.emit(event);
             }, onAfOnFocus: (event) => {
                 this.afOnFocus.emit(event);
-            }, "af-id": this._afId + '__listenButton', class: `digi-tools-languagepicker__buttons ${this._hideButtonText ? 'hide-text' : ''}` }, h("digi-icon-volume", { key: '636952ca893cf8b6e46f1d03c513c97e85db85ce', slot: "icon" }), this._afListenText)), this._afSignlangHide === false && (h("digi-button", { key: '9facb47dde3636908de2f5d21f593c578b30ae94', "af-size": "medium", "af-variation": "primary", onAfOnClick: (event) => {
+            }, "af-id": this._afId + '__listenButton', class: `digi-tools-languagepicker__buttons ${this._hideButtonText ? 'hide-text' : ''}` }, h("digi-icon-volume", { key: '5c0d42d19823d1521c91c29862360ce1ca016ce7', slot: "icon" }), this._afListenText)), this._afSignlangHide === false && (h("digi-button", { key: '9053a1f9220db13761cc01558c69ac0b37a3bad7', "af-size": "medium", "af-variation": "primary", onAfOnClick: (event) => {
                 this.afOnClick.emit(event);
             }, onAfOnBlur: (event) => {
                 this.afOnBlur.emit(event);
             }, onAfOnFocus: (event) => {
                 this.afOnFocus.emit(event);
-            }, "af-id": this._afId + '__signlangButton', class: `digi-tools-languagepicker__buttons ${this._hideButtonText ? 'hide-text' : 'show-text'}` }, h("digi-icon-sign", { key: '2889c4dc5896bc9890170fe38f9b6c6b6c7d3177', slot: "icon" }), this._afSignlangText))));
+            }, "af-id": this._afId + '__signlangButton', class: `digi-tools-languagepicker__buttons ${this._hideButtonText ? 'hide-text' : 'show-text'}` }, h("digi-icon-sign", { key: 'cc527644d8d5cb58372774965dfb542abc55356c', slot: "icon" }), this._afSignlangText))));
     }
     static get is() { return "digi-tools-languagepicker"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,6 +1,6 @@
 @mixin digi-badge-status--variables() {
 	--digi--badge-status--color--primary: var(--digi--color--text--inverted);
-	--digi--badge-status--color--secondary: var(--digi--global--color--neutral--grayscale--darkest-6);
+	--digi--badge-status--color--secondary: #333;
 
 	--digi--badge-status--background-color--approved--primary: var(--digi--global--color--function--success--dark); 
 	--digi--badge-status--background-color--approved--secondary: var(--digi--global--color--function--success--lightest-2);  

package/dist/collection/design-tokens/components/_progress-circle.variables.scss

@@ -1,7 +1,28 @@
-@mixin digi-progress-circle--variables() { 
-	--digi--progress-circle--border-color: var(--digi--color--border--neutral-5); --digi--progress-circle--border-color--active: var(--digi--global--color--function--success--base); --digi--progress-circle--border-color--secondary--active: var(--digi--color--border--secondary); --digi--progress-circle--border-width: var(--digi--border-width--primary); 
-	
-	--digi--progress-circle--step--background: var(--digi--color--background--primary); --digi--progress-circle--step--background--active: var(--digi--global--color--function--success--base); --digi--progress-circle--step--background--secondary--active: var(--digi--color--background--inverted-1); --digi--progress-circle--step--size: var(--digi--global--spacing--base); --digi--progress-circle--step--size--large: 1.625rem; --digi--progress-circle--step--size--active: 1.625rem; --digi--progress-circle--step--size--active--large: 1.625rem; 
+@mixin digi-progress-circle--variables() {
+  --digi--progress-circle--heading--font-size: var(--digi--typography--heading-2--font-size--mobile);
+  --digi--progress-circle--border-color: var(--digi--color--border--neutral-5);
+  --digi--progress-circle--border-color--active: var(
+    --digi--global--color--function--success--base
+  );
+  --digi--progress-circle--border-color--secondary--active: var(
+    --digi--color--border--secondary
+  );
+  --digi--progress-circle--border-width: var(--digi--border-width--primary);
+
+  --digi--progress-circle--step--background: var(
+    --digi--color--background--primary
+  );
+  --digi--progress-circle--step--background--active: var(
+    --digi--global--color--function--success--base
+  );
+  --digi--progress-circle--step--background--secondary--active: var(
+    --digi--color--background--inverted-1
+  );
+  --digi--progress-circle--step--size: var(--digi--global--spacing--base);
+  --digi--progress-circle--step--size--large: 1.625rem;
+  --digi--progress-circle--step--size--active: 1.625rem;
+  --digi--progress-circle--step--size--active--large: 1.625rem;
+  --digi--progress-circle--heading--font-size: var(--digi--typography--heading-2--font-size--mobile);
 }
 
 /** Do not touch! Autogenerated 
@@ -40,4 +61,4 @@
 * @prop --digi--progress-indicator--icon--warning--color: var(--digi--color--background--warning-1);
 * @prop --digi--progress-indicator--icon--error--color: var(--digi--color--background--danger-1);
 * @prop --digi--progress-indicator--icon--error--background-color: var(--digi--color--background--danger-2);
-*/
+*/

package/dist/digi-arbetsformedlingen/design-tokens/components/_badge-status.variables.scss

@@ -1,6 +1,6 @@
 @mixin digi-badge-status--variables() {
 	--digi--badge-status--color--primary: var(--digi--color--text--inverted);
-	--digi--badge-status--color--secondary: var(--digi--global--color--neutral--grayscale--darkest-6);
+	--digi--badge-status--color--secondary: #333;
 
 	--digi--badge-status--background-color--approved--primary: var(--digi--global--color--function--success--dark); 
 	--digi--badge-status--background-color--approved--secondary: var(--digi--global--color--function--success--lightest-2);  

package/dist/digi-arbetsformedlingen/design-tokens/components/_progress-circle.variables.scss

@@ -1,7 +1,28 @@
-@mixin digi-progress-circle--variables() { 
-	--digi--progress-circle--border-color: var(--digi--color--border--neutral-5); --digi--progress-circle--border-color--active: var(--digi--global--color--function--success--base); --digi--progress-circle--border-color--secondary--active: var(--digi--color--border--secondary); --digi--progress-circle--border-width: var(--digi--border-width--primary); 
-	
-	--digi--progress-circle--step--background: var(--digi--color--background--primary); --digi--progress-circle--step--background--active: var(--digi--global--color--function--success--base); --digi--progress-circle--step--background--secondary--active: var(--digi--color--background--inverted-1); --digi--progress-circle--step--size: var(--digi--global--spacing--base); --digi--progress-circle--step--size--large: 1.625rem; --digi--progress-circle--step--size--active: 1.625rem; --digi--progress-circle--step--size--active--large: 1.625rem; 
+@mixin digi-progress-circle--variables() {
+  --digi--progress-circle--heading--font-size: var(--digi--typography--heading-2--font-size--mobile);
+  --digi--progress-circle--border-color: var(--digi--color--border--neutral-5);
+  --digi--progress-circle--border-color--active: var(
+    --digi--global--color--function--success--base
+  );
+  --digi--progress-circle--border-color--secondary--active: var(
+    --digi--color--border--secondary
+  );
+  --digi--progress-circle--border-width: var(--digi--border-width--primary);
+
+  --digi--progress-circle--step--background: var(
+    --digi--color--background--primary
+  );
+  --digi--progress-circle--step--background--active: var(
+    --digi--global--color--function--success--base
+  );
+  --digi--progress-circle--step--background--secondary--active: var(
+    --digi--color--background--inverted-1
+  );
+  --digi--progress-circle--step--size: var(--digi--global--spacing--base);
+  --digi--progress-circle--step--size--large: 1.625rem;
+  --digi--progress-circle--step--size--active: 1.625rem;
+  --digi--progress-circle--step--size--active--large: 1.625rem;
+  --digi--progress-circle--heading--font-size: var(--digi--typography--heading-2--font-size--mobile);
 }
 
 /** Do not touch! Autogenerated 
@@ -40,4 +61,4 @@
 * @prop --digi--progress-indicator--icon--warning--color: var(--digi--color--background--warning-1);
 * @prop --digi--progress-indicator--icon--error--color: var(--digi--color--background--danger-1);
 * @prop --digi--progress-indicator--icon--error--background-color: var(--digi--color--background--danger-2);
-*/
+*/