@designsystem-se/af 37.0.2-beta.0 → 37.0.2

package/dist/digi-arbetsformedlingen/p-ee9589e6.js

@@ -0,0 +1 @@
+var t;!function(t){t.BUTTON="button",t.SUBMIT="submit",t.RESET="reset"}(t||(t={}));export{t as B}

package/dist/digi-arbetsformedlingen/p-f40f4b2a.js

@@ -0,0 +1 @@
+var a,r;!function(a){a.H1="h1",a.H2="h2",a.H3="h3",a.H4="h4",a.H5="h5",a.H6="h6"}(a||(a={})),function(a){a.PRIMARY="primary",a.SECONDARY="secondary",a.TERTIARY="tertiary"}(r||(r={}));export{a as E,r as a}

package/dist/digi-arbetsformedlingen/p-f447b984.js

@@ -0,0 +1 @@
+var a,r;!function(a){a.SUCCESS="success",a.ERROR="error",a.WARNING="warning",a.NEUTRAL="neutral"}(a||(a={})),function(a){a.SMALL="small",a.MEDIUM="medium",a.LARGE="large"}(r||(r={}));export{a as F,r as a}

package/dist/digi-arbetsformedlingen/p-f8391f37.entry.js

@@ -0,0 +1 @@
+import{r as i,h as t,F as a}from"./p-52e3bb32.js";import{L as o}from"./p-a39f86c9.js";import{L as r,a as n,b as d}from"./p-300aa9ef.js";const c=class{constructor(t){i(this,t),this._container=r.STATIC,this.afVariation=o.PRIMARY,this.afContainer=r.STATIC,this.afVerticalPadding=void 0,this.afMarginTop=void 0,this.afMarginBottom=void 0}containerChangeHandler(){this._container=this.afContainer}componentWillLoad(){this.containerChangeHandler()}get cssModifiers(){return{"digi-layout-block--transparent":this.afVariation===o.TRANSPARENT,"digi-layout-block--primary":this.afVariation===o.PRIMARY,"digi-layout-block--secondary":this.afVariation===o.SECONDARY,"digi-layout-block--tertiary":this.afVariation===o.TERTIARY,"digi-layout-block--symbol":this.afVariation===o.SYMBOL,"digi-layout-block--profile":this.afVariation===o.PROFILE}}render(){return t("div",{key:"e2feec87a90de06812ec1e0903e731035ab0b90b",class:Object.assign({"digi-layout-block":!0},this.cssModifiers)},this._container===r.NONE?t(a,null,t("slot",null)):t("digi-layout-container",{afVariation:this._container,"af-vertical-padding":this.afVerticalPadding,"af-margin-top":this.afMarginTop,"af-margin-bottom":this.afMarginBottom},t("slot",null)))}static get watchers(){return{afContainer:["containerChangeHandler"]}}};c.style=".sc-digi-layout-block-h{--digi--layout-block--background--primary:var(--digi--color--background--primary);--digi--layout-block--background--secondary:var(--digi--color--background--secondary);--digi--layout-block--background--tertiary:var(--digi--color--background--sentiment--neutral--primary);--digi--layout-block--background--symbol:var(--digi--color--background--pop-out);--digi--layout-block--background--profile:var(--digi--color--background--brand-primary);display:block}.sc-digi-layout-block-h .digi-layout-block.sc-digi-layout-block{background:var(--BACKGROUND)}.sc-digi-layout-block-h .digi-layout-block--transparent.sc-digi-layout-block{--BACKGROUND:transparent}.sc-digi-layout-block-h .digi-layout-block--primary.sc-digi-layout-block{--BACKGROUND:var(--digi--layout-block--background--primary)}.sc-digi-layout-block-h .digi-layout-block--secondary.sc-digi-layout-block{--BACKGROUND:var(--digi--layout-block--background--secondary)}.sc-digi-layout-block-h .digi-layout-block--tertiary.sc-digi-layout-block{--BACKGROUND:var(--digi--layout-block--background--tertiary)}.sc-digi-layout-block-h .digi-layout-block--symbol.sc-digi-layout-block{--BACKGROUND:var(--digi--layout-block--background--symbol)}.sc-digi-layout-block-h .digi-layout-block--profile.sc-digi-layout-block{--BACKGROUND:var(--digi--layout-block--background--profile)}";const l=class{constructor(t){i(this,t),this._variation=n.STATIC,this.afVariation=n.STATIC,this.afMaxWidth=d.WIDTH_1400,this.afNoGutter=void 0,this.afVerticalPadding=void 0,this.afMarginTop=void 0,this.afMarginBottom=void 0}variationChangeHandler(){this._variation=this.afVariation}componentWillLoad(){this.variationChangeHandler()}get cssModifiers(){return this._variation===n.NONE?{}:{"digi-layout-container":!0,"digi-layout-container--static":this._variation===n.STATIC,"digi-layout-container--fluid":this._variation===n.FLUID,"digi-layout-container--max-width-1200":this.afMaxWidth===d.WIDTH_1200,"digi-layout-container--no-gutter":this.afNoGutter,"digi-layout-container--vertical-padding":this.afVerticalPadding,"digi-layout-container--margin-top":this.afMarginTop,"digi-layout-container--margin-bottom":this.afMarginBottom}}render(){return t("div",{key:"725053a8cc39249a0415ba129daf1fc150139a9f",class:Object.assign({},this.cssModifiers)},t("slot",{key:"c3caff08c7d1df60901d81abc5bbfb7bf9005ef7"}))}static get watchers(){return{afVariation:["variationChangeHandler"]}}};l.style=".sc-digi-layout-container-h{--digi--layout-container--width:var(--digi--container-width--smaller);--digi--layout-container--gutter:var(--digi--container-gutter--base);--digi--layout-container--vertical-padding:0;--digi--layout-container--margin-top:0;--digi--layout-container--margin-bottom:0}.sc-digi-layout-container-h .digi-layout-container.sc-digi-layout-container{box-sizing:border-box;width:100%;max-width:var(--digi--layout-container--width);padding:var(--digi--layout-container--vertical-padding) var(--digi--layout-container--gutter);margin-left:auto;margin-right:auto;margin-top:var(--digi--layout-container--margin-top);margin-bottom:var(--digi--layout-container--margin-bottom);box-sizing:border-box}@media (min-width: 47.9375rem){.sc-digi-layout-container-h .digi-layout-container.sc-digi-layout-container{--digi--layout-container--width:var(--digi--container-width--small);--digi--layout-container--gutter:var(--digi--container-gutter--small)}}@media (min-width: 48rem){.sc-digi-layout-container-h .digi-layout-container.sc-digi-layout-container{--digi--layout-container--width:var(--digi--container-width--medium);--digi--layout-container--gutter:var(--digi--container-gutter--medium)}}@media (min-width: 61.9375rem){.sc-digi-layout-container-h .digi-layout-container.sc-digi-layout-container{--digi--layout-container--width:var(--digi--container-width--large);--digi--layout-container--gutter:var(--digi--container-gutter--large)}}@media (min-width: 75rem){.sc-digi-layout-container-h .digi-layout-container.sc-digi-layout-container{--digi--layout-container--width:var(--digi--container-width--larger);--digi--layout-container--gutter:var(--digi--container-gutter--larger)}}@media (min-width: 87.5rem){.sc-digi-layout-container-h .digi-layout-container.sc-digi-layout-container{--digi--layout-container--width:var(--digi--container-width--largest);--digi--layout-container--gutter:var(--digi--container-gutter--largest)}.sc-digi-layout-container-h .digi-layout-container--max-width-1200.sc-digi-layout-container{--digi--layout-container--width:var(--digi--global--size--larger)}}.sc-digi-layout-container-h .digi-layout-container--fluid.sc-digi-layout-container{--digi--layout-container--width:none !important}.sc-digi-layout-container-h .digi-layout-container--no-gutter.sc-digi-layout-container{--digi--layout-container--gutter:0}.sc-digi-layout-container-h .digi-layout-container--vertical-padding.sc-digi-layout-container{--digi--layout-container--vertical-padding:var(--digi--padding--large)}.sc-digi-layout-container-h .digi-layout-container--margin-top.sc-digi-layout-container{--digi--layout-container--margin-top:var(--digi--margin--large)}.sc-digi-layout-container-h .digi-layout-container--margin-bottom.sc-digi-layout-container{--digi--layout-container--margin-bottom:var(--digi--margin--large)}";export{c as digi_layout_block,l as digi_layout_container}

package/dist/digi-arbetsformedlingen/p-fdecd798.entry.js

@@ -0,0 +1 @@
+import{r as i,c as t,h as o,H as a,g as d}from"./p-52e3bb32.js";import{c as r,b as e,D as s}from"./p-ee4cb21a.js";import{r as n}from"./p-ffe5c0e8.js";import"./p-717306ef.js";import"./p-a4a001e1.js";import{B as g}from"./p-cdf86efc.js";import"./p-ee9589e6.js";import{B as c}from"./p-cf3ce3c5.js";import"./p-7e32c40b.js";import"./p-dcdffb3c.js";import"./p-5a602122.js";import"./p-5d21a361.js";import"./p-ad16c7a1.js";import"./p-f40f4b2a.js";import"./p-1f68d501.js";import"./p-ee88e3f1.js";import"./p-8142cc73.js";import"./p-905ccb30.js";import"./p-bc3d2778.js";import"./p-88b4d03a.js";import"./p-1f956af8.js";import"./p-24fe2189.js";import"./p-f447b984.js";import"./p-9c5a93d8.js";import"./p-7933b555.js";import"./p-0f6c0360.js";import"./p-814ca2ad.js";import"./p-300aa9ef.js";import"./p-a39f86c9.js";import"./p-07303cb5.js";import"./p-2a023831.js";import"./p-5ba6737a.js";import"./p-e4a9f8f0.js";import"./p-f2a6768b.js";import"./p-290d1746.js";import"./p-40657c82.js";import"./p-f600576a.js";import"./p-3b20ec86.js";import"./p-9dd5d6c8.js";import"./p-77a93845.js";import"./p-06f939ab.js";import"./p-8cd2d6dd.js";import"./p-484a1d6d.js";import"./p-0f3fbb1e.js";import"./p-820e795b.js";import"./p-46cbbcb5.js";import"./p-d74742b8.js";import"./p-6e383896.js";import"./p-4bad4fb0.js";import"./p-d1886fff.js";import"./p-a6ca40fc.js";import"./p-b0e88537.js";import"./p-cdcaf0eb.js";const l=class{constructor(o){i(this,o),this.afPrimaryButtonClick=t(this,"afPrimaryButtonClick",7),this.afSecondaryButtonClick=t(this,"afSecondaryButtonClick",7),this.afOnClose=t(this,"afOnClose",7),this._focusableElementsSelectors='a, input, select, textarea, button, button:not(hidden), iframe, object, [tabindex="0"]',this.focusableElements=[],this.afId=n("digi-dialog"),this.afVariation=r.PRIMARY,this.afSize=e.MEDIUM,this.afShowDialog=void 0,this.afCloseButtonText="Stäng",this.afHeadingLevel=s.H2,this.afHeading=void 0,this.afPrimaryButtonText=void 0,this.afSecondaryButtonText=void 0,this.afFallbackElementSelector=void 0}primaryClickHandler(i){this.afPrimaryButtonClick.emit(i)}secondaryClickHandler(i){this.afSecondaryButtonClick.emit(i)}escHandler(i){this._closeButton&&this.closeDialog(i)}shiftHandler(i){let t;t="DIGI-DIALOG"===document.activeElement.tagName?document.activeElement.shadowRoot.activeElement:document.activeElement,this.shouldUseFocusTrap?t===this._dialogHeading&&this.closeButtonEl||t===this.firstFocusableEl&&this.closeButtonEl?(i.detail.preventDefault(),this.closeButtonEl.focus()):(t===this._dialogHeading&&!this.closeButtonEl||t===this.firstFocusableEl&&!this.closeButtonEl||t===this.closeButtonEl)&&(i.detail.preventDefault(),this.lastFocusableEl.focus()):i.detail.preventDefault()}tabHandler(i){let t;t="DIGI-DIALOG"===document.activeElement.tagName?document.activeElement.shadowRoot.activeElement:document.activeElement,this.shouldUseFocusTrap?t===this.lastFocusableEl&&this.closeButtonEl?(i.detail.preventDefault(),this.closeButtonEl.focus()):t!==this.closeButtonEl&&t!==this.lastFocusableEl||(i.detail.preventDefault(),this.firstFocusableEl.focus()):i.detail.preventDefault()}onActive(){document.body.style.overflow="hidden",this.afCloseButtonText||(this._wrapper.style.paddingTop="25px"),this._dialogHeading&&(this._dialogHeading.style.marginTop="0"),this.onResize(),setTimeout((()=>{this.setFallback(),this.getFocusableItems(),this.setFocus()}),50)}buttonWidthMaxContent(){this._primaryButton&&(this._primaryButton.style.width="max-content",this._primaryButton.querySelector("button").style.width="max-content"),this._secondaryButton&&(this._secondaryButton.style.width="max-content",this._secondaryButton.querySelector("button").style.width="max-content")}buttonWidth100Percent(){this._primaryButton&&(this._primaryButton.style.width="100%",this._primaryButton.querySelector("button").style.width="100%"),this._secondaryButton&&(this._secondaryButton.style.width="100%",this._secondaryButton.querySelector("button").style.width="100%")}onResize(){this.buttonContainerObserver=new ResizeObserver((()=>{this._buttonContainer.clientWidth<=313?this.buttonWidth100Percent():this.buttonWidthMaxContent()})),this.buttonContainerObserver.observe(this._buttonContainer)}onInactive(){const i=this.fallbackElement;i&&i.focus(),this.buttonContainerObserver.disconnect(),document.body.style.overflow=""}closeDialog(i){this.afShowDialog=!1,this.afOnClose.emit(i)}setFallback(){this.afFallbackElementSelector&&document.querySelector(this.afFallbackElementSelector)?(this.fallbackElement=document.querySelector(this.afFallbackElementSelector),this.fallbackElement instanceof HTMLHeadingElement&&this.fallbackElement.setAttribute("tabindex","-1")):this.fallbackElement=document.activeElement}setFocus(){if(this.afShowDialog){let i;this.afHeading?(i=this._dialogHeading,this._dialogHeading.style.outline="none"):this.firstFocusableEl?(i=this.firstFocusableEl,i.getAttribute("tabindex")||i.setAttribute("tabindex","0")):this.closeButtonEl?i=this.closeButtonEl:(i=this._wrapper,i.setAttribute("tabindex","0")),i&&i.focus()}}getFocusableItems(){let i;const t=this._host.querySelectorAll(this._focusableElementsSelectors),o=this._wrapper.querySelectorAll(this._focusableElementsSelectors);if(this._closeButton){this.closeButtonEl=this._closeButton.children[0];const a=Array.prototype.slice.call(o);a.shift(),i=Array.from(t).concat(Array.from(a))}else i=Array.from(t).concat(Array.from(o));this.focusableElements=i,this.focusableElements.length>0&&(this.firstFocusableEl=this.focusableElements[0],this.lastFocusableEl=this.focusableElements[this.focusableElements.length-1])}componentDidLoad(){this.afShowDialog&&this.onActive()}componentDidUpdate(){this.afShowDialog?this.onActive():!this.afShowDialog&&this.fallbackElement&&this.onInactive()}get shouldUseFocusTrap(){return this.afShowDialog&&this.focusableElements.length>0}get cssModifiers(){return{"digi-dialog--primary":this.afVariation==r.PRIMARY,"digi-dialog--secondary":this.afVariation==r.SECONDARY,"digi-dialog--small":this.afSize==e.SMALL,"digi-dialog--medium":this.afSize==e.MEDIUM,"digi-dialog--large":this.afSize==e.LARGE}}render(){return o(a,{key:"b6fa143b71709908623eda3f8fda037f523a4f90",ref:i=>{this._host=i}},this.afShowDialog&&o("div",{key:"46ae05735ed8f54c75a82b5cc5e23effae77e745",class:Object.assign({"digi-dialog":!0},this.cssModifiers)},o("digi-util-keydown-handler",{key:"0740b3466fc4a3ac52bfe0a3d5d58fe2399c4474",onAfOnEsc:i=>this.escHandler(i),onAfOnTab:i=>this.tabHandler(i),onAfOnShiftTab:i=>this.shiftHandler(i),class:"digi-dialog__keydown-handler"},o("div",{key:"d6da8ca0633774200dff4ade8fb170f2fd19b6b9",ref:i=>{this._wrapper=i},role:"dialog","aria-modal":"true",class:"digi-dialog__content"},o("digi-typography",{key:"e5532e07a112ba5cadc4f4ee012c7c0b1ebc7eac"},this.afCloseButtonText&&o("digi-button",{key:"e52c53a254adfca3c0e7d22500f381877feb798d",ref:i=>this._closeButton=i,class:"digi-dialog__close-button",afAriaLabel:this.afCloseButtonText,afSize:g.MEDIUM,"af-variation":"function",onAfOnClick:i=>this.closeDialog(i)},this.afCloseButtonText,o("digi-icon-x",{key:"78b867c769a5f170a7b09270f0a466358febd0df",class:"digi-dialog__close-icon",slot:"icon-secondary"})),o("slot",{key:"20b204bea4212367ed6202e73185ee0f63ab85f3",name:"over-heading"}),this.afHeadingLevel&&this.afHeading&&o(this.afHeadingLevel,{key:"20b227dc35ebe307589e097cb64bcd7c47913729",tabindex:"-1",ref:i=>this._dialogHeading=i},this.afHeading),o("slot",{key:"2c5f707d8a5db9957a252e1a6a454824521b6541"}),o("div",{key:"167c44e5b9827f66b9355180d6af6a9fc8f783ad",ref:i=>this._buttonContainer=i,class:"digi-dialog__button-container"},this.afSecondaryButtonText&&o("digi-button",{key:"bca5ce02a71c2c4b43ec7eaebcc70016c5ea1d98",ref:i=>this._secondaryButton=i,afVariation:c.SECONDARY,onAfOnClick:i=>this.secondaryClickHandler(i)},this.afSecondaryButtonText),this.afPrimaryButtonText&&o("digi-button",{key:"1208655a175f323aa4bff70b0cf8daa28e2f3e86",ref:i=>this._primaryButton=i,afVariation:c.PRIMARY,onAfOnClick:i=>this.primaryClickHandler(i)},this.afPrimaryButtonText)))))))}get hostElement(){return d(this)}};l.style=":host{--digi--dialog--backdrop--position:fixed;--digi--dialog--backdrop--opacity:1;--digi--dialog--backdrop--z--index:999;--digi--dialog--backdrop--left:0;--digi--dialog--backdrop--top:0;--digi--dialog--backdrop--width:100vw;--digi--dialog--backdrop--height:100vh;--digi--dialog--backdrop--display:flex;--digi--dialog--backdrop--justify--content:center;--digi--dialog--backdrop--align--items:center;--digi--dialog--close--button--display:grid;--digi--dialog--close--button--justify--content:end;--digi--dialog--close--button--margin--right:-1rem;--digi--dialog--button--container--display:flex;--digi--dialog--button--container--flex-wrap:wrap;--digi--dialog--button--container--gap:var(--digi--gutter--large);--digi--dialog--button--container--padding--top:var(--digi--gutter--largest-2);--digi--dialog--button--text--align--mobile:center;--digi--dialog--content--gutter:var(--digi--gutter--largest);--digi--dialog--content--margin:var(--digi--margin--large) auto;--digi--dialog--content--padding:var(--digi--padding--large);--digi--dialog--content--width--small:28.75rem;--digi--dialog--content--width--medium:42.1875rem;--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--icon--color--primary:var(--digi--color--icon--primary);--digi--dialog--icon--color--primary--hover:var(--digi--color--icon--primary)}:host .digi-dialog{background:rgba(0, 0, 0, 0.7);overflow-x:hidden;overflow-y:auto;position:var(--digi--dialog--backdrop--position);opacity:var(--digi--dialog--backdrop--opacity);z-index:var(--digi--dialog--backdrop--z--index);left:var(--digi--dialog--backdrop--left);top:var(--digi--dialog--backdrop--top);width:var(--digi--dialog--backdrop--width);height:var(--digi--dialog--backdrop--height);display:var(--digi--dialog--backdrop--display);justify-content:var(--digi--dialog--backdrop--justify--content);align-items:var(--digi--dialog--backdrop--align--items);padding:var(--digi--padding--medium);box-sizing:border-box}:host .digi-dialog--primary{--DIGI--DIALOG--COLOR--BACKGROUND:var(\n    --digi--dialog--content--color--background--primary\n  );--DIGI--DIALOG--COLOR:var(--digi--dialog--content--color--primary);--DIGI--DIALOG--CONTENT--BUTTON--COLOR--BORDER--PRIMARY:initial}:host .digi-dialog--secondary{--digi--dialog--content--color--secondary:var(\n    --digi--global--color--profile--white--base\n  );--digi--dialog--content--color--background--secondary:var(\n    --digi--global--color--profile--blue--base\n  );--DIGI--DIALOG--COLOR--BACKGROUND:var(\n    --digi--dialog--content--color--background--secondary\n  );--DIGI--DIALOG--COLOR:var(--digi--dialog--content--color--secondary);--DIGI--DIALOG--CONTENT--BUTTON--COLOR--BORDER--PRIMARY:#b7b7ff;--digi--color--text--primary:var(--digi--dialog--content--color--secondary)}:host .digi-dialog--small{--DIGI--DIALOG--CONTENT--WIDTH:var(--digi--dialog--content--width--small)}:host .digi-dialog--medium{--DIGI--DIALOG--CONTENT--WIDTH:var(--digi--dialog--content--width--medium)}:host .digi-dialog--large{--DIGI--DIALOG--CONTENT--WIDTH:var(--digi--dialog--content--width--large)}:host .digi-dialog__keydown-handler{width:100%;max-height:100%}:host .digi-dialog__content{background:var(--DIGI--DIALOG--COLOR--BACKGROUND);color:var(--DIGI--DIALOG--COLOR);max-width:var(--DIGI--DIALOG--CONTENT--WIDTH);width:100%;margin:var(--digi--dialog--content--margin);padding:var(--digi--padding--smaller) var(--digi--dialog--content--padding) var(--digi--dialog--content--padding) var(--digi--dialog--content--padding);box-sizing:border-box}:host .digi-dialog__close-button{--digi--button--color--text--function--default:var(--DIGI--DIALOG--COLOR);--digi--button--color--text--function--hover:var(--DIGI--DIALOG--COLOR);--digi--button--color--icon--function--default:var(--digi--dialog--icon--color--primary);--digi--button--color--icon--function--hover:var(--digi--dialog--icon--color--primary--hover);display:var(--digi--dialog--close--button--display);justify-content:var(--digi--dialog--close--button--justify--content);margin-right:var(--digi--dialog--close--button--margin--right)}:host .digi-dialog__button-container{display:var(--digi--dialog--button--container--display);flex-wrap:var(--digi--dialog--button--container--flex-wrap);gap:var(--digi--dialog--button--container--gap);padding-top:var(--digi--dialog--button--container--padding--top)}:host .digi-dialog__button-container digi-button,:host .digi-dialog__button-container .digi-button--medium{text-align:var(--digi--dialog--button--text--align--mobile)}:host .digi-dialog__button-container digi-button :first-of-type,:host .digi-dialog__button-container .digi-button--medium :first-of-type{--digi--button--color--border--primary--default:var(--DIGI--DIALOG--CONTENT--BUTTON--COLOR--BORDER--PRIMARY);--digi--button--color--border--primary--hover:var(--DIGI--DIALOG--CONTENT--BUTTON--COLOR--BORDER--PRIMARY)}";export{l as digi_dialog}

package/dist/digi-arbetsformedlingen/styles/src/_alias.mixin.scss

@@ -1,276 +1,130 @@
 @mixin alias {
-  @media (prefers-color-scheme: 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);
-    --digi--color--infographic--brand--primary: var(--digi--color--infographic--brand--primary--light);
-    --digi--color--infographic--brand--secondary: var(--digi--color--infographic--brand--secondary--light);
-    --digi--color--infographic--brand--tertiary: var(--digi--color--infographic--brand--tertiary--light);
-  
-    --digi--color--text--primary: var(--digi--color--text--primary--light);
-    --digi--color--text--secondary: var(--digi--color--text--secondary--light);
-    --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);
-    --digi--color--background--brand-primary: var(--digi--color--background--brand-primary--light);
-    --digi--color--background--transparent: var(--digi--color--background--transparent--light);
-    --digi--color--background--notification: var(--digi--color--background--notification--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--secondary: var(--digi--color--background--interactive--default--secondary--light);
-    --digi--color--background--interactive--default--secondary-inverted: var(--digi--color--background--interactive--default--secondary-inverted--light);
-    --digi--color--background--interactive--default--tertiary: var(--digi--color--background--interactive--default--tertiary--light);
-    --digi--color--background--interactive--default--quaternary: var(--digi--color--background--interactive--default--quaternary--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--hover--primary: var(--digi--color--background--interactive--hover--primary--light);
-    --digi--color--background--interactive--hover--secondary: var(--digi--color--background--interactive--hover--secondary--light);
-    --digi--color--background--interactive--hover--tertiary: var(--digi--color--background--interactive--hover--tertiary--light);
-    --digi--color--background--interactive--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--hover--quinary: var(--digi--color--background--interactive--hover--quinary--light); //jag som testar lite grejer
-  
-    --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); //jag som testar lite grejer
-    --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);
-  
-    --digi--color--background--interactive--validation--success: var(--digi--color--background--interactive--validation--success--light);
-    --digi--color--background--interactive--validation--warning: var(--digi--color--background--interactive--validation--warning--light);
-    --digi--color--background--interactive--validation--error: var(--digi--color--background--interactive--validation--error--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--success--primary: var(--digi--color--background--sentiment--success--primary--light);
-    --digi--color--background--sentiment--success--secondary: var(--digi--color--background--sentiment--success--secondary--light);
-    --digi--color--background--sentiment--success--tertiary: var(--digi--color--background--sentiment--success--tertiary--light);
-  
-    --digi--color--background--sentiment--warning--primary: var(--digi--color--background--sentiment--warning--primary--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--sentiment--warning--quarternary: var(--digi--color--background--sentiment--warning--quarternary--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);
-  
-    --digi--color--background--sentiment--neutral--primary: var(--digi--color--background--sentiment--neutral--primary--light);
-    --digi--color--background--sentiment--neutral--secondary: var(--digi--color--background--sentiment--neutral--secondary--light);
-    --digi--color--background--sentiment--neutral--tertiary: var(--digi--color--background--sentiment--neutral--tertiary--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--border--notification: var(--digi--color--border--notification--light);
-    --digi--color--border--transparent: var(--digi--color--border--transparent--light);
-  
-    --digi--color--border--interactive--default--primary: var(--digi--color--border--interactive--default--primary--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);
-    --digi--color--border--interactive--default--inverted: var(--digi--color--border--interactive--default--inverted--light);
-  
-    --digi--color--border--interactive--hover--primary: var(--digi--color--border--interactive--hover--primary--light);
-    --digi--color--border--interactive--hover--secondary: var(--digi--color--border--interactive--hover--secondary--light);
-    --digi--color--border--interactive--hover--inverted: var(--digi--color--border--interactive--hover--inverted--light);
-  
-    --digi--color--border--interactive--validation--success: var(--digi--color--border--interactive--validation--success--light);
-    --digi--color--border--interactive--validation--warning: var(--digi--color--border--interactive--validation--warning--light);
-    --digi--color--border--interactive--validation--error: var(--digi--color--border--interactive--validation--error--light);
-  
-    --digi--color--border--interactive--selected--primary: var(--digi--color--border--interactive--selected--primary--light);
-    --digi--color--border--interactive--selected--secondary: var(--digi--color--border--interactive--selected--secondary--light);
-  
-    --digi--color--border--sentiment--error: var(--digi--color--border--sentiment--error--light);
-    --digi--color--border--sentiment--success: var(--digi--color--border--sentiment--success--light);
-    --digi--color--border--sentiment--warning: var(--digi--color--border--sentiment--warning--light);
-    --digi--color--border--sentiment--info: var(--digi--color--border--sentiment--info--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--marking--navigation--selected: var(--digi--color--marking--navigation--selected--light);
-    --digi--color--marking--navigation--level-active: var(--digi--color--marking--navigation--level-active--light);
-    --digi--color--marking--navigation--level-inactive: var(--digi--color--marking--navigation--level-inactive--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);
-    --digi--color--marking--indication--marker: var(--digi--color--marking--indication--marker--light);
-  
-    --digi--color--divider--primary: var(--digi--color--divider--primary--light);
-    --digi--color--divider--secondary: var(--digi--color--divider--secondary--light);
-    --digi--color--divider--on-brand-primary: var(--digi--color--divider--on-brand-primary--light);
-    --digi--color--divider--cta: var(--digi--color--divider--cta--light);
-  
-    --digi--color--icon--primary: var(--digi--color--icon--primary--light);
-    --digi--color--icon--secondary: var(--digi--color--icon--secondary--light);
-    --digi--color--icon--cta: var(--digi--color--icon--cta--light);
-    --digi--color--icon--brand-primary: var(--digi--color--icon--brand-primary--light);
-    --digi--color--icon--brand-secondary: var(--digi--color--icon--brand-secondary--light);
-  
-    --digi--color--icon--validation--success: var(--digi--color--icon--validation--success--light);
-    --digi--color--icon--validation--warning: var(--digi--color--icon--validation--warning--light);
-    --digi--color--icon--validation--error: var(--digi--color--icon--validation--error--light);
-  
-    --digi--color--misc--spinner-path: var(--digi--color--misc--spinner-path--light);
-    --digi--color--misc--skeleton: var(--digi--color--misc--skeleton--light);
-  }
-  @media (prefers-color-scheme: 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--hover--quinary: var(--digi--color--background--interactive--hover--quinary--dark); //jag som testar lite grejer
-  
-    --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); //jag som testar lite
-    --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--error--tertiary-discreet: var(--digi--color--background--sentiment--error--tertiary-discreet--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--marking--indication--marker: var(--digi--color--marking--indication--marker--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--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);
+  --digi--color--infographic--brand--primary: var(--digi--color--infographic--brand--primary--light);
+  --digi--color--infographic--brand--secondary: var(--digi--color--infographic--brand--secondary--light);
+  --digi--color--infographic--brand--tertiary: var(--digi--color--infographic--brand--tertiary--light);
+
+  --digi--color--text--primary: var(--digi--color--text--primary--light);
+  --digi--color--text--secondary: var(--digi--color--text--secondary--light);
+  --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--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--secondary: var(--digi--color--background--secondary--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);
+  --digi--color--background--brand-primary: var(--digi--color--background--brand-primary--light);
+  --digi--color--background--transparent: var(--digi--color--background--transparent--light);
+  --digi--color--background--notification: var(--digi--color--background--notification--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--secondary: var(--digi--color--background--interactive--default--secondary--light);
+  --digi--color--background--interactive--default--secondary-inverted: var(--digi--color--background--interactive--default--secondary-inverted--light);
+  --digi--color--background--interactive--default--tertiary: var(--digi--color--background--interactive--default--tertiary--light);
+  --digi--color--background--interactive--default--quaternary: var(--digi--color--background--interactive--default--quaternary--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--hover--primary: var(--digi--color--background--interactive--hover--primary--light);
+  --digi--color--background--interactive--hover--secondary: var(--digi--color--background--interactive--hover--secondary--light);
+  --digi--color--background--interactive--hover--tertiary: var(--digi--color--background--interactive--hover--tertiary--light);
+  --digi--color--background--interactive--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--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);
+
+  --digi--color--background--interactive--validation--success: var(--digi--color--background--interactive--validation--success--light);
+  --digi--color--background--interactive--validation--warning: var(--digi--color--background--interactive--validation--warning--light);
+  --digi--color--background--interactive--validation--error: var(--digi--color--background--interactive--validation--error--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--success--primary: var(--digi--color--background--sentiment--success--primary--light);
+  --digi--color--background--sentiment--success--secondary: var(--digi--color--background--sentiment--success--secondary--light);
+  --digi--color--background--sentiment--success--tertiary: var(--digi--color--background--sentiment--success--tertiary--light);
+
+  --digi--color--background--sentiment--warning--primary: var(--digi--color--background--sentiment--warning--primary--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--sentiment--warning--quarternary: var(--digi--color--background--sentiment--warning--quarternary--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);
+
+  --digi--color--background--sentiment--neutral--primary: var(--digi--color--background--sentiment--neutral--primary--light);
+  --digi--color--background--sentiment--neutral--secondary: var(--digi--color--background--sentiment--neutral--secondary--light);
+  --digi--color--background--sentiment--neutral--tertiary: var(--digi--color--background--sentiment--neutral--tertiary--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--border--notification: var(--digi--color--border--notification--light);
+  --digi--color--border--transparent: var(--digi--color--border--transparent--light);
+
+  --digi--color--border--interactive--default--primary: var(--digi--color--border--interactive--default--primary--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);
+  --digi--color--border--interactive--default--inverted: var(--digi--color--border--interactive--default--inverted--light);
+
+  --digi--color--border--interactive--hover--primary: var(--digi--color--border--interactive--hover--primary--light);
+  --digi--color--border--interactive--hover--secondary: var(--digi--color--border--interactive--hover--secondary--light);
+  --digi--color--border--interactive--hover--inverted: var(--digi--color--border--interactive--hover--inverted--light);
+
+  --digi--color--border--interactive--validation--success: var(--digi--color--border--interactive--validation--success--light);
+  --digi--color--border--interactive--validation--warning: var(--digi--color--border--interactive--validation--warning--light);
+  --digi--color--border--interactive--validation--error: var(--digi--color--border--interactive--validation--error--light);
+
+  --digi--color--border--interactive--selected--primary: var(--digi--color--border--interactive--selected--primary--light);
+  --digi--color--border--interactive--selected--secondary: var(--digi--color--border--interactive--selected--secondary--light);
+
+  --digi--color--border--sentiment--error: var(--digi--color--border--sentiment--error--light);
+  --digi--color--border--sentiment--success: var(--digi--color--border--sentiment--success--light);
+  --digi--color--border--sentiment--warning: var(--digi--color--border--sentiment--warning--light);
+  --digi--color--border--sentiment--info: var(--digi--color--border--sentiment--info--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--marking--navigation--selected: var(--digi--color--marking--navigation--selected--light);
+  --digi--color--marking--navigation--level-active: var(--digi--color--marking--navigation--level-active--light);
+  --digi--color--marking--navigation--level-inactive: var(--digi--color--marking--navigation--level-inactive--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);
+
+  --digi--color--divider--primary: var(--digi--color--divider--primary--light);
+  --digi--color--divider--secondary: var(--digi--color--divider--secondary--light);
+  --digi--color--divider--on-brand-primary: var(--digi--color--divider--on-brand-primary--light);
+  --digi--color--divider--cta: var(--digi--color--divider--cta--light);
+
+  --digi--color--icon--primary: var(--digi--color--icon--primary--light);
+  --digi--color--icon--secondary: var(--digi--color--icon--secondary--light);
+  --digi--color--icon--cta: var(--digi--color--icon--cta--light);
+  --digi--color--icon--brand-primary: var(--digi--color--icon--brand-primary--light);
+  --digi--color--icon--brand-secondary: var(--digi--color--icon--brand-secondary--light);
+
+  --digi--color--icon--validation--success: var(--digi--color--icon--validation--success--light);
+  --digi--color--icon--validation--warning: var(--digi--color--icon--validation--warning--light);
+  --digi--color--icon--validation--error: var(--digi--color--icon--validation--error--light);
+
+  --digi--color--misc--spinner-path: var(--digi--color--misc--spinner-path--light);
+  --digi--color--misc--skeleton: var(--digi--color--misc--skeleton--light);
 }

package/dist/digi-arbetsformedlingen/styles/src/themes/_common.mixin.scss

@@ -1,22 +1,15 @@
 @mixin brand-common {
   --digi--grayscale--0: #ffffff;
   --digi--grayscale--50: #fbfbfb;
-  --digi--grayscale--75: #f5f5f5;
   --digi--grayscale--100: #f4f4f4;
   --digi--grayscale--200: #ededed;
   --digi--grayscale--300: #e4e4e4;
   --digi--grayscale--400: #dddddd;
   --digi--grayscale--500: #cacaca;
-  --digi--grayscale--550: #c5c5c5;
   --digi--grayscale--600: #acacac;
-  --digi--grayscale--650: #9c9c9c;
   --digi--grayscale--700: #757575;
   --digi--grayscale--800: #5c5c5c;
-  --digi--grayscale--850: #515151;
-  --digi--grayscale--875: #414141;
   --digi--grayscale--900: #333333;
-  --digi--grayscale--950: #212121;
-  --digi--grayscale--975: #2c2c2c;
   --digi--grayscale--1000: #000000;
   --digi--sentiment--informative--200: #e9e9ff;
   --digi--sentiment--informative--500: #0A4DD1;