@designsystem-se/af 39.2.1-beta.darkmode.0 → 39.2.1-beta.darkmode.2

package/dist/collection/styles/src/themes/_alias-light.mixin.scss

@@ -7,7 +7,6 @@
   --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--tertiary: var(--digi--color--background--interactive--default--tertiary--light);
   --digi--color--background--interactive--default--transparent: var(--digi--color--background--interactive--default--transparent--light);
@@ -29,10 +28,8 @@
   --digi--color--background--pop-out: var(--digi--color--background--pop-out--light);
   --digi--color--background--pop-out-2-hypotes: var(--digi--color--background--pop-out-2-hypotes--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);

package/dist/collection/styles/src/themes/_brand-af18.mixin.scss

@@ -40,7 +40,6 @@
   --digi--color--background--interactive--default--primary--light--af18: var(--digi--color--stratos--500);
   --digi--color--background--interactive--default--primary-inverted--light--af18: var(--digi--color--leaf--500);
   --digi--color--background--interactive--default--quaternary--light--af18: var(--digi--grayscale--100);
-  --digi--color--background--interactive--default--quinary-ghost-gra--light--af18: var(--digi--grayscale--100);
   --digi--color--background--interactive--default--secondary--light--af18: var(--digi--grayscale--0);
   --digi--color--background--interactive--default--tertiary--light--af18: var(--digi--grayscale--200);
   --digi--color--background--interactive--default--transparent--light--af18: var(--digi--misc--transparent);
@@ -62,10 +61,8 @@
   --digi--color--background--pop-out--light--af18: var(--digi--color--leaf--100);
   --digi--color--background--pop-out-2-hypotes--light--af18: var(--digi--color--water--200);
   --digi--color--background--primary--light--af18: var(--digi--grayscale--0);
-  --digi--color--background--primary-elevated--light--af18: var(--digi--grayscale--0);
   --digi--color--background--secondary--light--af18: var(--digi--grayscale--100);
   --digi--color--background--secondary-accent--light--af18: var(--digi--grayscale--400);
-  --digi--color--background--secondary-elevated--light--af18: var(--digi--grayscale--100);
   --digi--color--background--secondary-muted--light--af18: var(--digi--grayscale--50);
   --digi--color--background--sentiment--beta--primary--light--af18: var(--digi--color--rose--500);
   --digi--color--background--sentiment--beta--secondary--light--af18: var(--digi--color--rose--100);

package/dist/collection/styles/src/themes/_brand-af25.mixin.scss

@@ -23,14 +23,13 @@
   --digi--rallarros--500: #ce1cbd;
   --digi--sapphire--500: #1616b2;
 
-  --digi--color--background--brand-primary--dark: var(--digi--grayscale--900);
+  --digi--color--background--brand-primary--dark: var(--digi--grayscale--990);
   --digi--color--background--dropdown--dark: var(--digi--grayscale--800);
-  --digi--color--background--interactive--default--input-elements--dark: var(--digi--misc--transparent);
+  --digi--color--background--interactive--default--input-elements--dark: var(--digi--grayscale--950);
   --digi--color--background--interactive--default--pop-out--dark: var(--digi--grayscale--850);
   --digi--color--background--interactive--default--primary--dark: #435799;
   --digi--color--background--interactive--default--primary-inverted--dark: var(--digi--norrsken--500);
   --digi--color--background--interactive--default--quaternary--dark: var(--digi--grayscale--850);
-  --digi--color--background--interactive--default--quinary-ghost-gra--dark: var(--digi--misc--transparent);
   --digi--color--background--interactive--default--secondary--dark: var(--digi--grayscale--750-ny);
   --digi--color--background--interactive--default--tertiary--dark: var(--digi--grayscale--875);
   --digi--color--background--interactive--default--transparent--dark: var(--digi--misc--transparent);
@@ -38,8 +37,8 @@
   --digi--color--background--interactive--hover--inverted--dark: var(--digi--norrsken--400);
   --digi--color--background--interactive--hover--primary--dark: #879bdb;
   --digi--color--background--interactive--hover--quarternary--dark: var(--digi--grayscale--875);
-  --digi--color--background--interactive--hover--secondary--dark: #8496a1;
-  --digi--color--background--interactive--hover--tertiary--dark: #afafed;
+  --digi--color--background--interactive--hover--secondary--dark: #8cd0f2;
+  --digi--color--background--interactive--hover--tertiary--dark: #8cd0f2;
   --digi--color--background--interactive--selected--on-menu-minus-button--dark: var(--digi--grayscale--650);
   --digi--color--background--interactive--selected--primary--dark: var(--digi--sentiment--success--500);
   --digi--color--background--interactive--selected--primary-stay--dark: var(--digi--sentiment--success--500);
@@ -51,11 +50,9 @@
   --digi--color--background--notification--dark: var(--digi--sentiment--error--500);
   --digi--color--background--pop-out--dark: var(--digi--grayscale--875);
   --digi--color--background--pop-out-2-hypotes--dark: var(--digi--grayscale--875);
-  --digi--color--background--primary--dark: var(--digi--grayscale--975);
-  --digi--color--background--primary-elevated--dark: var(--digi--grayscale--925);
-  --digi--color--background--secondary--dark: var(--digi--grayscale--950);
+  --digi--color--background--primary--dark: var(--digi--grayscale--950);
+  --digi--color--background--secondary--dark: var(--digi--grayscale--975);
   --digi--color--background--secondary-accent--dark: var(--digi--grayscale--850);
-  --digi--color--background--secondary-elevated--dark: var(--digi--grayscale--925);
   --digi--color--background--secondary-muted--dark: var(--digi--grayscale--900);
   --digi--color--background--sentiment--beta--primary--dark: var(--digi--rallarros--500);
   --digi--color--background--sentiment--beta--secondary--dark: var(--digi--rallarros--300);
@@ -93,13 +90,13 @@
   --digi--color--border--interactive--validation--error--dark: var(--digi--sentiment--error--500);
   --digi--color--border--interactive--validation--success--dark: var(--digi--sentiment--success--500);
   --digi--color--border--interactive--validation--warning--dark: var(--digi--sentiment--warning--700);
-  --digi--color--border--notification--dark: var(--digi--grayscale--0);
+  --digi--color--border--notification--dark: var(--digi--grayscale--75);
   --digi--color--border--sentiment--error--dark: var(--digi--sentiment--error--500);
   --digi--color--border--sentiment--info--dark: var(--digi--sentiment--informative--500);
   --digi--color--border--sentiment--success--dark: var(--digi--sentiment--success--500);
   --digi--color--border--sentiment--warning--dark: var(--digi--sentiment--warning--500);
   --digi--color--border--transparent--dark: var(--digi--misc--transparent);
-  --digi--color--divider--cta--dark: #afafed;
+  --digi--color--divider--cta--dark: #8cd0f2;
   --digi--color--divider--on-brand-primary--dark: var(--digi--grayscale--650);
   --digi--color--divider--primary--dark: var(--digi--grayscale--800);
   --digi--color--divider--secondary--dark: var(--digi--grayscale--650);
@@ -107,7 +104,7 @@
   --digi--color--icon--brand-primary--dark: var(--digi--grayscale--75);
   --digi--color--icon--brand-primary-secondary-hypotes--dark: #435799;
   --digi--color--icon--brand-secondary--dark: var(--digi--norrsken--500);
-  --digi--color--icon--cta--dark: #afafed;
+  --digi--color--icon--cta--dark: #8cd0f2;
   --digi--color--icon--primary--dark: var(--digi--grayscale--75);
   --digi--color--icon--primary-anti-reverse--dark: var(--digi--grayscale--900);
   --digi--color--icon--secondary--dark: var(--digi--grayscale--75);
@@ -138,7 +135,7 @@
   --digi--color--text--interactive--brand-primary--dark: var(--digi--grayscale--75);
   --digi--color--text--interactive--brand-primary-secondary-hypotes--dark: #435799;
   --digi--color--text--interactive--brand-secondary--dark: var(--digi--norrsken--500);
-  --digi--color--text--interactive--primary--dark: #afafed;
+  --digi--color--text--interactive--primary--dark: #8cd0f2;
   --digi--color--text--interactive--primary-discreet--dark: var(--digi--grayscale--75);
   --digi--color--text--interactive--secondary--dark: var(--digi--grayscale--75);
   --digi--color--text--interactive--secondary-discreet--dark: var(--digi--grayscale--75);
@@ -156,7 +153,6 @@
   --digi--color--background--interactive--default--primary--light: var(--digi--natthimmel--800);
   --digi--color--background--interactive--default--primary-inverted--light: var(--digi--norrsken--500);
   --digi--color--background--interactive--default--quaternary--light: var(--digi--grayscale--100);
-  --digi--color--background--interactive--default--quinary-ghost-gra--light: var(--digi--grayscale--100);
   --digi--color--background--interactive--default--secondary--light: var(--digi--grayscale--0);
   --digi--color--background--interactive--default--tertiary--light: var(--digi--grayscale--200);
   --digi--color--background--interactive--default--transparent--light: var(--digi--misc--transparent);
@@ -166,7 +162,7 @@
   --digi--color--background--interactive--hover--quarternary--light: var(--digi--grayscale--200);
   --digi--color--background--interactive--hover--secondary--light: var(--digi--natthimmel--250);
   --digi--color--background--interactive--hover--tertiary--light: var(--digi--sapphire--500);
-  --digi--color--background--interactive--selected--on-menu-minus-button--light: var(--digi--granskott--350);
+  --digi--color--background--interactive--selected--on-menu-minus-button--light: var(--digi--granskott--250);
   --digi--color--background--interactive--selected--primary--light: var(--digi--sentiment--success--500);
   --digi--color--background--interactive--selected--primary-stay--light: var(--digi--sentiment--success--500);
   --digi--color--background--interactive--selected--secondary--light: var(--digi--natthimmel--800);
@@ -178,10 +174,8 @@
   --digi--color--background--pop-out--light: var(--digi--granskott--200);
   --digi--color--background--pop-out-2-hypotes--light: var(--digi--natthimmel--200);
   --digi--color--background--primary--light: var(--digi--grayscale--0);
-  --digi--color--background--primary-elevated--light: var(--digi--grayscale--0);
   --digi--color--background--secondary--light: var(--digi--grayscale--100);
   --digi--color--background--secondary-accent--light: var(--digi--grayscale--400);
-  --digi--color--background--secondary-elevated--light: var(--digi--grayscale--100);
   --digi--color--background--secondary-muted--light: var(--digi--grayscale--50);
   --digi--color--background--sentiment--beta--primary--light: var(--digi--rallarros--500);
   --digi--color--background--sentiment--beta--secondary--light: var(--digi--rallarros--300);
@@ -255,7 +249,7 @@
   --digi--color--marking--indication--primary--light: var(--digi--sentiment--success--500);
   --digi--color--marking--indication--secondary--light: var(--digi--natthimmel--800);
   --digi--color--marking--indication--tertiary--light: var(--digi--grayscale--700);
-  --digi--color--marking--navigation--level-active--light: var(--digi--granskott--350);
+  --digi--color--marking--navigation--level-active--light: var(--digi--granskott--250);
   --digi--color--marking--navigation--level-inactive--light: var(--digi--grayscale--100);
   --digi--color--marking--navigation--selected--light: var(--digi--granskott--700);
   --digi--color--misc--skeleton--light: var(--digi--grayscale--400);

package/dist/collection/styles/src/tokens-documentation/web-AF25.json

@@ -39,7 +39,7 @@
     "description": "Används för länkar.",
     "digiCSSVariable": "--digi--color--text--interactive--primary",
     "digiRecursiveValue": "#1616B2",
-    "digiRecursiveValueDark": "#AFAFED"
+    "digiRecursiveValueDark": "#8CD0F2"
   },
   "text--interactive--primary-discreet": {
     "name": "Text/Interactive/primary-discreet",
@@ -102,28 +102,14 @@
     "description": "Neutral färg som används som en primär bakgrundsfärg.",
     "digiCSSVariable": "--digi--color--background--primary",
     "digiRecursiveValue": "#FFFFFF",
-    "digiRecursiveValueDark": "#171717"
-  },
-  "background--primary-elevated": {
-    "name": "Background/primary-elevated",
-    "description": "Neutral färg som används som en primär bakgrundsfärg.",
-    "digiCSSVariable": "--digi--color--background--primary-elevated",
-    "digiRecursiveValue": "#FFFFFF",
-    "digiRecursiveValueDark": "#2E2E2E"
+    "digiRecursiveValueDark": "#212121"
   },
   "background--secondary": {
     "name": "Background/secondary",
     "description": "Alternativ neutral bakgrundsfärg för att bryta av mot background/primary.",
     "digiCSSVariable": "--digi--color--background--secondary",
     "digiRecursiveValue": "#F4F4F4",
-    "digiRecursiveValueDark": "#212121"
-  },
-  "background--secondary-elevated": {
-    "name": "Background/secondary-elevated",
-    "description": "Alternativ neutral bakgrundsfärg för att bryta av mot background/primary.",
-    "digiCSSVariable": "--digi--color--background--secondary-elevated",
-    "digiRecursiveValue": "#F4F4F4",
-    "digiRecursiveValueDark": "#2E2E2E"
+    "digiRecursiveValueDark": "#171717"
   },
   "background--secondary-accent": {
     "name": "Background/secondary-accent",
@@ -144,7 +130,7 @@
     "description": "Används för icke-klickbara bakgrunder där man vill förstärka varumärket, som ex. i digi-footer.",
     "digiCSSVariable": "--digi--color--background--brand-primary",
     "digiRecursiveValue": "#091D54",
-    "digiRecursiveValueDark": "#333333"
+    "digiRecursiveValueDark": "#0D0D0D"
   },
   "background--transparent": {
     "name": "Background/transparent",
@@ -207,7 +193,7 @@
     "description": "Vit bakgrundsfärg som används i formulärelement såsom radioknapp, kryssruta, inmatningsfält.",
     "digiCSSVariable": "--digi--color--background--interactive--default--input-elements",
     "digiRecursiveValue": "#FFFFFF",
-    "digiRecursiveValueDark": "#FFFFFF"
+    "digiRecursiveValueDark": "#212121"
   },
   "background--interactive--default--pop-out": {
     "name": "Background/Interactive/default/pop-out",
@@ -228,14 +214,14 @@
     "description": "Hoverfärg för bakgrundsfärgen Background/Interactive/default/secondary.",
     "digiCSSVariable": "--digi--color--background--interactive--hover--secondary",
     "digiRecursiveValue": "#DDF1FC",
-    "digiRecursiveValueDark": "#8496A1"
+    "digiRecursiveValueDark": "#8CD0F2"
   },
   "background--interactive--hover--tertiary": {
     "name": "Background/Interactive/hover/tertiary",
     "description": "Hover för vertikalmenyns expandera-knapp.",
     "digiCSSVariable": "--digi--color--background--interactive--hover--tertiary",
     "digiRecursiveValue": "#1616B2",
-    "digiRecursiveValueDark": "#AFAFED"
+    "digiRecursiveValueDark": "#8CD0F2"
   },
   "background--interactive--hover--quarternary": {
     "name": "Background/Interactive/hover/quarternary",
@@ -431,7 +417,7 @@
     "description": "Ram som används i notifikationsindikator.",
     "digiCSSVariable": "--digi--color--border--notification",
     "digiRecursiveValue": "#FFFFFF",
-    "digiRecursiveValueDark": "#FFFFFF"
+    "digiRecursiveValueDark": "#F5F5F5"
   },
   "border--transparent": {
     "name": "Border/transparent",
@@ -634,7 +620,7 @@
     "description": "Används i Utfällbar rubrik.",
     "digiCSSVariable": "--digi--color--divider--cta",
     "digiRecursiveValue": "#1616B2",
-    "digiRecursiveValueDark": "#AFAFED"
+    "digiRecursiveValueDark": "#8CD0F2"
   },
   "icon--primary": {
     "name": "Icon/primary",
@@ -669,7 +655,7 @@
     "description": "Används för ikon i funktionsknapp, filuppladdare och flikfältet. ",
     "digiCSSVariable": "--digi--color--icon--cta",
     "digiRecursiveValue": "#1616B2",
-    "digiRecursiveValueDark": "#AFAFED"
+    "digiRecursiveValueDark": "#8CD0F2"
   },
   "icon--validation--success": {
     "name": "Icon/Validation/success",
@@ -979,13 +965,6 @@
     "digiRecursiveValue": "#091D54",
     "digiRecursiveValueDark": "#435799"
   },
-  "background--interactive--default--quinary-ghost-gra": {
-    "name": "Background/Interactive/default/quinary (Ghost grå)",
-    "description": "Används i knappar i filuppladdare och kategorifilter. skapad för utforskande syfte, i kontexten av våra gråa knappar, --- Denna besrkivning behöver förtydligas",
-    "digiCSSVariable": "--digi--color--background--interactive--default--quinary-ghost-gra",
-    "digiRecursiveValue": "#F4F4F4",
-    "digiRecursiveValueDark": "#FFFFFF"
-  },
   "background--interactive--hover--ghost-rider": {
     "name": "Background/Interactive/hover/ghost rider",
     "description": "är ett förslag från mig elliot för att göra funktionsknappar lite tydligare i dark mode, för jag tyckte det var lite nice. detta ska prövas såklart",
@@ -1070,4 +1049,4 @@
     "digiRecursiveValue": "#E9F6FD",
     "digiRecursiveValueDark": "#3A3A3A"
   }
-}
+}

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

@@ -29,7 +29,7 @@
 	--digi--dialog--content--width--large: 56.25rem;
 
 	--digi--dialog--content--color--primary: var(--digi--color--text--primary);
-	--digi--dialog--content--color--background--primary: var(--digi--color--background--primary-elevated);
+	--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);

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

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 @mixin digi-tools-feedback--variables {
 	--digi--tools-feedback--background-color--primary: var(--digi--color--background--pop-out);
-	--digi--tools-feedback--background-color--secondary: var(--digi--color--background--primary-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);