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

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

@@ -34,14 +34,17 @@
   --digi--color--water--700: #0058a3;
 
   --digi--color--background--brand-primary--light--af18: var(--digi--color--stratos--500);
+  --digi--color--background--dropdown--light--af18: var(--digi--grayscale--0);
   --digi--color--background--interactive--default--input-elements--light--af18: var(--digi--grayscale--0);
   --digi--color--background--interactive--default--pop-out--light--af18: var(--digi--color--leaf--100);
   --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--secondary-inverted--light--af18: var(--digi--misc--transparent);
   --digi--color--background--interactive--default--tertiary--light--af18: var(--digi--grayscale--200);
+  --digi--color--background--interactive--hover--ghost-rider--light--af18: var(--digi--misc--transparent);
   --digi--color--background--interactive--hover--inverted--light--af18: var(--digi--color--pear--500);
   --digi--color--background--interactive--hover--primary--light--af18: var(--digi--color--water--700);
   --digi--color--background--interactive--hover--quarternary--light--af18: var(--digi--grayscale--200);
@@ -49,6 +52,7 @@
   --digi--color--background--interactive--hover--tertiary--light--af18: var(--digi--color--sapphire--500);
   --digi--color--background--interactive--selected--on-menu-minus-button--light--af18: var(--digi--color--leaf--200);
   --digi--color--background--interactive--selected--primary--light--af18: var(--digi--sentiment--success--500);
+  --digi--color--background--interactive--selected--primary-stay--light--af18: var(--digi--sentiment--success--500);
   --digi--color--background--interactive--selected--secondary--light--af18: var(--digi--color--stratos--500);
   --digi--color--background--interactive--selected--tertiary--light--af18: var(--digi--grayscale--200);
   --digi--color--background--interactive--validation--error--light--af18: var(--digi--sentiment--error--200);
@@ -57,14 +61,17 @@
   --digi--color--background--notification--light--af18: var(--digi--sentiment--error--500);
   --digi--color--background--pop-out--light--af18: var(--digi--color--leaf--100);
   --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);
   --digi--color--background--sentiment--error--primary--light--af18: var(--digi--sentiment--error--500);
   --digi--color--background--sentiment--error--secondary--light--af18: var(--digi--sentiment--error--700);
   --digi--color--background--sentiment--error--tertiary--light--af18: var(--digi--sentiment--error--200);
+  --digi--color--background--sentiment--error--tertiary-discreet--light--af18: var(--digi--sentiment--error--200);
   --digi--color--background--sentiment--info--primary--light--af18: var(--digi--sentiment--informative--500);
   --digi--color--background--sentiment--info--secondary--light--af18: var(--digi--sentiment--informative--700);
   --digi--color--background--sentiment--info--tertiary--light--af18: var(--digi--sentiment--informative--200);
@@ -78,9 +85,11 @@
   --digi--color--background--sentiment--warning--quarternary--light--af18: var(--digi--sentiment--warning--50);
   --digi--color--background--sentiment--warning--secondary--light--af18: var(--digi--sentiment--warning--700);
   --digi--color--background--sentiment--warning--tertiary--light--af18: var(--digi--sentiment--warning--200);
+  --digi--color--background--surface--light--af18: var(--digi--grayscale--0);
   --digi--color--background--transparent--light--af18: var(--digi--misc--transparent);
   --digi--color--border--accent--primary--light--af18: var(--digi--color--stratos--500);
   --digi--color--border--accent--secondary--light--af18: var(--digi--color--leaf--500);
+  --digi--color--border--interactive--default--discreeeeeeet--light--af18: var(--digi--grayscale--100);
   --digi--color--border--interactive--default--inverted--light--af18: var(--digi--color--leaf--500);
   --digi--color--border--interactive--default--on-input--light--af18: var(--digi--grayscale--900);
   --digi--color--border--interactive--default--on-input-nuance--light--af18: var(--digi--grayscale--800);
@@ -103,11 +112,15 @@
   --digi--color--divider--on-brand-primary--light--af18: var(--digi--color--stratos--400);
   --digi--color--divider--primary--light--af18: var(--digi--grayscale--400);
   --digi--color--divider--secondary--light--af18: var(--digi--grayscale--200);
+  --digi--color--divider--tertiary-hypotes--light--af18: var(--digi--grayscale--400);
   --digi--color--icon--brand-primary--light--af18: var(--digi--color--stratos--500);
+  --digi--color--icon--brand-primary-secondary-hypotes--light--af18: var(--digi--color--stratos--500);
   --digi--color--icon--brand-secondary--light--af18: var(--digi--color--leaf--500);
   --digi--color--icon--cta--light--af18: var(--digi--color--sapphire--500);
   --digi--color--icon--primary--light--af18: var(--digi--grayscale--900);
+  --digi--color--icon--primary-anti-reverse--light--af18: var(--digi--grayscale--900);
   --digi--color--icon--secondary--light--af18: var(--digi--grayscale--0);
+  --digi--color--icon--secondary-reverse--light--af18: var(--digi--grayscale--0);
   --digi--color--icon--validation--error--light--af18: var(--digi--sentiment--error--500);
   --digi--color--icon--validation--success--light--af18: var(--digi--sentiment--success--500);
   --digi--color--icon--validation--warning--light--af18: var(--digi--sentiment--warning--500);
@@ -121,6 +134,7 @@
   --digi--color--logotype--primary--text--light--af18: var(--digi--color--stratos--500);
   --digi--color--logotype--secondary--symbol--light--af18: #1db920;
   --digi--color--logotype--secondary--text--light--af18: var(--digi--grayscale--0);
+  --digi--color--marking--indication--marker--light--af18: var(--digi--grayscale--0);
   --digi--color--marking--indication--primary--light--af18: var(--digi--sentiment--success--500);
   --digi--color--marking--indication--secondary--light--af18: var(--digi--color--stratos--500);
   --digi--color--marking--indication--tertiary--light--af18: var(--digi--grayscale--700);
@@ -131,11 +145,16 @@
   --digi--color--misc--spinner-path--light--af18: var(--digi--grayscale--400);
   --digi--color--text--description--light--af18: var(--digi--grayscale--800);
   --digi--color--text--interactive--brand-primary--light--af18: var(--digi--color--stratos--500);
+  --digi--color--text--interactive--brand-primary-secondary-hypotes--light--af18: var(--digi--color--stratos--500);
   --digi--color--text--interactive--brand-secondary--light--af18: var(--digi--color--leaf--500);
   --digi--color--text--interactive--primary--light--af18: var(--digi--color--sapphire--500);
+  --digi--color--text--interactive--primary-discreet--light--af18: var(--digi--color--sapphire--500);
   --digi--color--text--interactive--secondary--light--af18: var(--digi--grayscale--0);
+  --digi--color--text--interactive--secondary-discreet--light--af18: var(--digi--grayscale--0);
   --digi--color--text--interactive--tertiary--light--af18: var(--digi--grayscale--900);
   --digi--color--text--interactive--visited--light--af18: var(--digi--color--amethyst--500);
   --digi--color--text--primary--light--af18: var(--digi--grayscale--900);
+  --digi--color--text--primary-stay--light--af18: var(--digi--grayscale--900);
   --digi--color--text--secondary--light--af18: var(--digi--grayscale--0);
+  --digi--color--text--secondary-stay--light--af18: var(--digi--grayscale--0);
 }

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

@@ -23,15 +23,143 @@
   --digi--rallarros--500: #ce1cbd;
   --digi--sapphire--500: #1616b2;
 
+  --digi--color--background--brand-primary--dark: var(--digi--grayscale--900);
+  --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--pop-out--dark: var(--digi--grayscale--650);
+  --digi--color--background--interactive--default--primary--dark: var(--digi--grayscale--50);
+  --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--misc--transparent);
+  --digi--color--background--interactive--default--secondary-inverted--dark: var(--digi--misc--transparent);
+  --digi--color--background--interactive--default--tertiary--dark: var(--digi--grayscale--875);
+  --digi--color--background--interactive--hover--ghost-rider--dark: var(--digi--grayscale--850);
+  --digi--color--background--interactive--hover--inverted--dark: var(--digi--norrsken--400);
+  --digi--color--background--interactive--hover--primary--dark: var(--digi--grayscale--650);
+  --digi--color--background--interactive--hover--quarternary--dark: var(--digi--grayscale--875);
+  --digi--color--background--interactive--hover--secondary--dark: var(--digi--grayscale--875);
+  --digi--color--background--interactive--hover--tertiary--dark: var(--digi--grayscale--850);
+  --digi--color--background--interactive--selected--on-menu-minus-button--dark: var(--digi--grayscale--650);
+  --digi--color--background--interactive--selected--primary--dark: var(--digi--misc--transparent);
+  --digi--color--background--interactive--selected--primary-stay--dark: var(--digi--sentiment--success--500);
+  --digi--color--background--interactive--selected--secondary--dark: var(--digi--misc--transparent);
+  --digi--color--background--interactive--selected--tertiary--dark: var(--digi--grayscale--875);
+  --digi--color--background--interactive--validation--error--dark: var(--digi--misc--transparent);
+  --digi--color--background--interactive--validation--success--dark: var(--digi--misc--transparent);
+  --digi--color--background--interactive--validation--warning--dark: var(--digi--misc--transparent);
+  --digi--color--background--notification--dark: var(--digi--sentiment--error--500);
+  --digi--color--background--pop-out--dark: var(--digi--grayscale--875);
+  --digi--color--background--primary--dark: var(--digi--grayscale--950);
+  --digi--color--background--primary-elevated--dark: var(--digi--grayscale--850);
+  --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--875);
+  --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);
+  --digi--color--background--sentiment--error--primary--dark: var(--digi--sentiment--error--500);
+  --digi--color--background--sentiment--error--secondary--dark: var(--digi--sentiment--error--700);
+  --digi--color--background--sentiment--error--tertiary--dark: var(--digi--sentiment--error--200);
+  --digi--color--background--sentiment--error--tertiary-discreet--dark: var(--digi--grayscale--850);
+  --digi--color--background--sentiment--info--primary--dark: var(--digi--sentiment--informative--500);
+  --digi--color--background--sentiment--info--secondary--dark: var(--digi--sentiment--informative--700);
+  --digi--color--background--sentiment--info--tertiary--dark: var(--digi--sentiment--informative--200);
+  --digi--color--background--sentiment--neutral--primary--dark: var(--digi--grayscale--700);
+  --digi--color--background--sentiment--neutral--secondary--dark: var(--digi--grayscale--400);
+  --digi--color--background--sentiment--neutral--tertiary--dark: var(--digi--grayscale--900);
+  --digi--color--background--sentiment--success--primary--dark: var(--digi--sentiment--success--500);
+  --digi--color--background--sentiment--success--secondary--dark: var(--digi--sentiment--success--700);
+  --digi--color--background--sentiment--success--tertiary--dark: var(--digi--sentiment--success--200);
+  --digi--color--background--sentiment--warning--primary--dark: var(--digi--sentiment--warning--500);
+  --digi--color--background--sentiment--warning--quarternary--dark: var(--digi--grayscale--850);
+  --digi--color--background--sentiment--warning--secondary--dark: var(--digi--sentiment--warning--700);
+  --digi--color--background--sentiment--warning--tertiary--dark: var(--digi--sentiment--warning--200);
+  --digi--color--background--surface--dark: var(--digi--grayscale--900);
+  --digi--color--background--transparent--dark: var(--digi--misc--transparent);
+  --digi--color--border--accent--primary--dark: var(--digi--grayscale--650);
+  --digi--color--border--accent--secondary--dark: var(--digi--granskott--700);
+  --digi--color--border--interactive--default--discreeeeeeet--dark: var(--digi--grayscale--550);
+  --digi--color--border--interactive--default--inverted--dark: var(--digi--norrsken--500);
+  --digi--color--border--interactive--default--on-input--dark: var(--digi--grayscale--75);
+  --digi--color--border--interactive--default--on-input-nuance--dark: var(--digi--grayscale--650);
+  --digi--color--border--interactive--default--primary--dark: var(--digi--grayscale--75);
+  --digi--color--border--interactive--hover--inverted--dark: var(--digi--norrsken--400);
+  --digi--color--border--interactive--hover--primary--dark: var(--digi--grayscale--75);
+  --digi--color--border--interactive--hover--secondary--dark: var(--digi--grayscale--75);
+  --digi--color--border--interactive--selected--primary--dark: var(--digi--grayscale--75);
+  --digi--color--border--interactive--selected--secondary--dark: var(--digi--grayscale--75);
+  --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--misc--transparent);
+  --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: var(--digi--norrsken--500);
+  --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);
+  --digi--color--divider--tertiary-hypotes--dark: var(--digi--grayscale--550);
+  --digi--color--icon--brand-primary--dark: var(--digi--grayscale--75);
+  --digi--color--icon--brand-primary-secondary-hypotes--dark: var(--digi--grayscale--900);
+  --digi--color--icon--brand-secondary--dark: var(--digi--norrsken--500);
+  --digi--color--icon--cta--dark: var(--digi--norrsken--500);
+  --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);
+  --digi--color--icon--secondary-reverse--dark: var(--digi--grayscale--900);
+  --digi--color--icon--validation--error--dark: var(--digi--sentiment--error--500);
+  --digi--color--icon--validation--success--dark: var(--digi--sentiment--success--500);
+  --digi--color--icon--validation--warning--dark: var(--digi--sentiment--warning--500);
+  --digi--color--infographic--background--dark: var(--digi--grayscale--0);
+  --digi--color--infographic--brand--primary--dark: var(--digi--granskott--700);
+  --digi--color--infographic--brand--primary-alt--dark: var(--digi--granskott--700);
+  --digi--color--infographic--brand--secondary--dark: var(--digi--granskott--300);
+  --digi--color--infographic--brand--secondary-alt--dark: var(--digi--granskott--300);
+  --digi--color--infographic--lineart--dark: var(--digi--grayscale--75);
+  --digi--color--logotype--primary--symbol--dark: #1db920;
+  --digi--color--logotype--primary--text--dark: var(--digi--grayscale--0);
+  --digi--color--logotype--secondary--symbol--dark: #1db920;
+  --digi--color--logotype--secondary--text--dark: var(--digi--grayscale--0);
+  --digi--color--marking--indication--marker--dark: var(--digi--grayscale--900);
+  --digi--color--marking--indication--primary--dark: var(--digi--sentiment--success--500);
+  --digi--color--marking--indication--secondary--dark: var(--digi--grayscale--75);
+  --digi--color--marking--indication--tertiary--dark: var(--digi--grayscale--700);
+  --digi--color--marking--navigation--level-active--dark: var(--digi--granskott--250);
+  --digi--color--marking--navigation--level-inactive--dark: var(--digi--grayscale--100);
+  --digi--color--marking--navigation--selected--dark: var(--digi--granskott--700);
+  --digi--color--misc--skeleton--dark: var(--digi--grayscale--400);
+  --digi--color--misc--spinner-path--dark: var(--digi--grayscale--400);
+  --digi--color--text--description--dark: var(--digi--grayscale--100);
+  --digi--color--text--interactive--brand-primary--dark: var(--digi--grayscale--75);
+  --digi--color--text--interactive--brand-primary-secondary-hypotes--dark: var(--digi--grayscale--900);
+  --digi--color--text--interactive--brand-secondary--dark: var(--digi--norrsken--500);
+  --digi--color--text--interactive--primary--dark: var(--digi--norrsken--500);
+  --digi--color--text--interactive--primary-discreet--dark: var(--digi--grayscale--75);
+  --digi--color--text--interactive--secondary--dark: var(--digi--grayscale--900);
+  --digi--color--text--interactive--secondary-discreet--dark: var(--digi--grayscale--75);
+  --digi--color--text--interactive--tertiary--dark: var(--digi--grayscale--75);
+  --digi--color--text--interactive--visited--dark: var(--digi--amethyst--500);
+  --digi--color--text--primary--dark: var(--digi--grayscale--75);
+  --digi--color--text--primary-stay--dark: var(--digi--grayscale--850);
+  --digi--color--text--secondary--dark: var(--digi--grayscale--75);
+  --digi--color--text--secondary-stay--dark: var(--digi--grayscale--75);
+
   --digi--color--background--brand-primary--light: var(--digi--natthimmel--800);
+  --digi--color--background--dropdown--light: var(--digi--grayscale--0);
   --digi--color--background--interactive--default--input-elements--light: var(--digi--grayscale--0);
   --digi--color--background--interactive--default--pop-out--light: var(--digi--granskott--150);
   --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--secondary-inverted--light: var(--digi--misc--transparent);
   --digi--color--background--interactive--default--tertiary--light: var(--digi--grayscale--200);
+  --digi--color--background--interactive--hover--ghost-rider--light: var(--digi--misc--transparent);
   --digi--color--background--interactive--hover--inverted--light: var(--digi--norrsken--400);
   --digi--color--background--interactive--hover--primary--light: var(--digi--natthimmel--700);
   --digi--color--background--interactive--hover--quarternary--light: var(--digi--grayscale--200);
@@ -39,6 +167,7 @@
   --digi--color--background--interactive--hover--tertiary--light: var(--digi--sapphire--500);
   --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);
   --digi--color--background--interactive--selected--tertiary--light: var(--digi--grayscale--200);
   --digi--color--background--interactive--validation--error--light: var(--digi--sentiment--error--200);
@@ -47,14 +176,17 @@
   --digi--color--background--notification--light: var(--digi--sentiment--error--500);
   --digi--color--background--pop-out--light: var(--digi--granskott--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);
   --digi--color--background--sentiment--error--primary--light: var(--digi--sentiment--error--500);
   --digi--color--background--sentiment--error--secondary--light: var(--digi--sentiment--error--700);
   --digi--color--background--sentiment--error--tertiary--light: var(--digi--sentiment--error--200);
+  --digi--color--background--sentiment--error--tertiary-discreet--light: var(--digi--sentiment--error--200);
   --digi--color--background--sentiment--info--primary--light: var(--digi--sentiment--informative--500);
   --digi--color--background--sentiment--info--secondary--light: var(--digi--sentiment--informative--700);
   --digi--color--background--sentiment--info--tertiary--light: var(--digi--sentiment--informative--200);
@@ -68,9 +200,11 @@
   --digi--color--background--sentiment--warning--quarternary--light: var(--digi--sentiment--warning--50);
   --digi--color--background--sentiment--warning--secondary--light: var(--digi--sentiment--warning--700);
   --digi--color--background--sentiment--warning--tertiary--light: var(--digi--sentiment--warning--200);
+  --digi--color--background--surface--light: var(--digi--grayscale--0);
   --digi--color--background--transparent--light: var(--digi--misc--transparent);
   --digi--color--border--accent--primary--light: var(--digi--natthimmel--800);
   --digi--color--border--accent--secondary--light: var(--digi--granskott--700);
+  --digi--color--border--interactive--default--discreeeeeeet--light: var(--digi--grayscale--100);
   --digi--color--border--interactive--default--inverted--light: var(--digi--norrsken--500);
   --digi--color--border--interactive--default--on-input--light: var(--digi--grayscale--900);
   --digi--color--border--interactive--default--on-input-nuance--light: var(--digi--grayscale--800);
@@ -93,11 +227,15 @@
   --digi--color--divider--on-brand-primary--light: var(--digi--natthimmel--350);
   --digi--color--divider--primary--light: var(--digi--grayscale--400);
   --digi--color--divider--secondary--light: var(--digi--grayscale--200);
+  --digi--color--divider--tertiary-hypotes--light: var(--digi--grayscale--400);
   --digi--color--icon--brand-primary--light: var(--digi--natthimmel--800);
+  --digi--color--icon--brand-primary-secondary-hypotes--light: var(--digi--natthimmel--800);
   --digi--color--icon--brand-secondary--light: var(--digi--norrsken--500);
   --digi--color--icon--cta--light: var(--digi--sapphire--500);
   --digi--color--icon--primary--light: var(--digi--grayscale--900);
+  --digi--color--icon--primary-anti-reverse--light: var(--digi--grayscale--900);
   --digi--color--icon--secondary--light: var(--digi--grayscale--0);
+  --digi--color--icon--secondary-reverse--light: var(--digi--grayscale--0);
   --digi--color--icon--validation--error--light: var(--digi--sentiment--error--500);
   --digi--color--icon--validation--success--light: var(--digi--sentiment--success--500);
   --digi--color--icon--validation--warning--light: var(--digi--sentiment--warning--500);
@@ -111,6 +249,7 @@
   --digi--color--logotype--primary--text--light: var(--digi--natthimmel--800);
   --digi--color--logotype--secondary--symbol--light: #1db920;
   --digi--color--logotype--secondary--text--light: var(--digi--grayscale--0);
+  --digi--color--marking--indication--marker--light: var(--digi--grayscale--0);
   --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);
@@ -121,11 +260,16 @@
   --digi--color--misc--spinner-path--light: var(--digi--grayscale--400);
   --digi--color--text--description--light: var(--digi--grayscale--800);
   --digi--color--text--interactive--brand-primary--light: var(--digi--natthimmel--800);
+  --digi--color--text--interactive--brand-primary-secondary-hypotes--light: var(--digi--natthimmel--800);
   --digi--color--text--interactive--brand-secondary--light: var(--digi--norrsken--500);
   --digi--color--text--interactive--primary--light: var(--digi--sapphire--500);
+  --digi--color--text--interactive--primary-discreet--light: var(--digi--sapphire--500);
   --digi--color--text--interactive--secondary--light: var(--digi--grayscale--0);
+  --digi--color--text--interactive--secondary-discreet--light: var(--digi--grayscale--0);
   --digi--color--text--interactive--tertiary--light: var(--digi--grayscale--900);
   --digi--color--text--interactive--visited--light: var(--digi--amethyst--500);
   --digi--color--text--primary--light: var(--digi--grayscale--900);
+  --digi--color--text--primary-stay--light: var(--digi--grayscale--900);
   --digi--color--text--secondary--light: var(--digi--grayscale--0);
+  --digi--color--text--secondary-stay--light: var(--digi--grayscale--0);
 }

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

@@ -8,10 +8,17 @@
   --digi--grayscale--400: #dddddd;
   --digi--grayscale--50: #fbfbfb;
   --digi--grayscale--500: #cacaca;
+  --digi--grayscale--550: #c5c5c5;
   --digi--grayscale--600: #acacac;
+  --digi--grayscale--650: #9c9c9c;
   --digi--grayscale--700: #757575;
+  --digi--grayscale--75: #f5f5f5;
   --digi--grayscale--800: #5c5c5c;
+  --digi--grayscale--850: #4a4a4a;
+  --digi--grayscale--875: #3a3a3a;
   --digi--grayscale--900: #333333;
+  --digi--grayscale--950: #2c2c2c;
+  --digi--grayscale--975: #212121;
   --digi--misc--transparent: #ffffff00;
   --digi--sentiment--error--200: #fdeded;
   --digi--sentiment--error--500: #da0000;

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

@@ -5,12 +5,24 @@
     "digiCSSVariable": "--digi--color--text--primary",
     "digiRecursiveValue": "#333333"
   },
+  "text--primary-stay": {
+    "name": "Text/primary-stay",
+    "description": "Togs fram för status taggar som behöver text som förbli mörk pga kontrast",
+    "digiCSSVariable": "--digi--color--text--primary-stay",
+    "digiRecursiveValue": "#333333"
+  },
   "text--secondary": {
     "name": "Text/secondary",
     "description": "Sekundär textfärg som används mot mörk eller annan färgstark bakgrund. Används ex. i digi-footer och digi-status-badge.",
     "digiCSSVariable": "--digi--color--text--secondary",
     "digiRecursiveValue": "#FFFFFF"
   },
+  "text--secondary-stay": {
+    "name": "Text/secondary-stay",
+    "description": "Sekundär textfärg som används mot mörk eller annan färgstark bakgrund. Används ex. i digi-footer och digi-status-badge. och som behöver förbli vit för att behålla sin tydlighet, tog frm detta för statustaggar",
+    "digiCSSVariable": "--digi--color--text--secondary-stay",
+    "digiRecursiveValue": "#FFFFFF"
+  },
   "text--description": {
     "name": "Text/description",
     "description": "Textfärg som används för beskrivningar, t.ex. i digi-progress-indicator.",
@@ -23,12 +35,24 @@
     "digiCSSVariable": "--digi--color--text--interactive--primary",
     "digiRecursiveValue": "#1616B2"
   },
+  "text--interactive--primary-discreet": {
+    "name": "Text/Interactive/primary-discreet",
+    "description": "Används för länkade rubriker som ska tonas ner i dark mode.",
+    "digiCSSVariable": "--digi--color--text--interactive--primary-discreet",
+    "digiRecursiveValue": "#1616B2"
+  },
   "text--interactive--secondary": {
     "name": "Text/Interactive/secondary",
     "description": "Används på interaktiva textelement mot mörk eller färgstark bakgrund, som primärknappar och länkknappar.",
     "digiCSSVariable": "--digi--color--text--interactive--secondary",
     "digiRecursiveValue": "#FFFFFF"
   },
+  "text--interactive--secondary-discreet": {
+    "name": "Text/Interactive/secondary-discreet",
+    "description": "tog fram för paginering i dark mode",
+    "digiCSSVariable": "--digi--color--text--interactive--secondary-discreet",
+    "digiRecursiveValue": "#FFFFFF"
+  },
   "text--interactive--tertiary": {
     "name": "Text/Interactive/tertiary",
     "description": "Används på klickbara textelement som har ljus bakgrund och behöver se mer subtila ut än vanlig länkfärg, t.ex. menyval, flikar och utfällbar rubrik.",
@@ -53,18 +77,36 @@
     "digiCSSVariable": "--digi--color--text--interactive--visited",
     "digiRecursiveValue": "#822998"
   },
+  "background--surface": {
+    "name": "Background/surface",
+    "description": "ska sättas på <body> och grundframen",
+    "digiCSSVariable": "--digi--color--background--surface",
+    "digiRecursiveValue": "#FFFFFF"
+  },
   "background--primary": {
     "name": "Background/primary",
     "description": "Neutral färg som används som en primär bakgrundsfärg.",
     "digiCSSVariable": "--digi--color--background--primary",
     "digiRecursiveValue": "#FFFFFF"
   },
+  "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"
+  },
   "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"
   },
+  "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"
+  },
   "background--secondary-accent": {
     "name": "Background/secondary-accent",
     "description": "Används som bakgrundsfärg för att gruppera och framhäva klickbara element i en dropdown, tex i wrappern runtom knapparna i form-filter.",
@@ -127,7 +169,7 @@
   },
   "background--interactive--default--tertiary": {
     "name": "Background/Interactive/default/tertiary",
-    "description": "Används för att synliggöra klickbara element som befinner sig på ett annat vitt element.",
+    "description": "Används för att synliggöra klickbara element som befinner sig på ett annat vitt element. Används i vertikal-navigation, för header shortcuts och knapparna i flikar",
     "digiCSSVariable": "--digi--color--background--interactive--default--tertiary",
     "digiRecursiveValue": "#EDEDED"
   },
@@ -487,19 +529,19 @@
   },
   "divider--primary": {
     "name": "Divider/primary",
-    "description": "Primär färg för divider.",
+    "description": "Primär färg för divider. ska användas på våra bakgrunder (block), relevant för sidhuvud och progresslist",
     "digiCSSVariable": "--digi--color--divider--primary",
     "digiRecursiveValue": "#DDDDDD"
   },
   "divider--secondary": {
     "name": "Divider/secondary",
-    "description": "Sekundär färg för divider som är subtilare än primär. Används i navigeringskomponenter såsom Menyval, Sidhuvud och Flikfält.",
+    "description": "Sekundär färg för divider som är subtilare än primär. Används i kontexten för navigation, för att skilja en navigation möjlighet från annat innehåll",
     "digiCSSVariable": "--digi--color--divider--secondary",
     "digiRecursiveValue": "#EDEDED"
   },
   "divider--on-brand-primary": {
     "name": "Divider/on-brand-primary",
-    "description": "Används på dividers som ligger på bakgrunder som har den primära varumärkesfärgen. Används i Sidfot.",
+    "description": "Används på dividers som ligger på bakgrunder som har den primära varumärkesfärgen. Används i footer.",
     "digiCSSVariable": "--digi--color--divider--on-brand-primary",
     "digiRecursiveValue": "#ABDEF7"
   },
@@ -766,5 +808,119 @@
     "description": "",
     "digiCSSVariable": "--digi--sentiment--warning--900",
     "digiRecursiveValue": "#664D00"
+  },
+  "background--interactive--selected--primary-stay": {
+    "name": "Background/Interactive/selected/primary-stay",
+    "description": "Selected-utseende för kalendern. Används för när en komponent ska behålla sin selected färg oberoende av mode",
+    "digiCSSVariable": "--digi--color--background--interactive--selected--primary-stay",
+    "digiRecursiveValue": "#008A20"
+  },
+  "background--sentiment--error--tertiary-discreet": {
+    "name": "Background/Sentiment/error/tertiary-discreet",
+    "description": "Ljusare error/denied-bakgrundsfärg förloppsstegare.",
+    "digiCSSVariable": "--digi--color--background--sentiment--error--tertiary-discreet",
+    "digiRecursiveValue": "#FDEDED"
+  },
+  "marking--indication--marker": {
+    "name": "Marking/Indication/marker",
+    "description": "Användas för markeringen som är på dem andra indication färgerna",
+    "digiCSSVariable": "--digi--color--marking--indication--marker",
+    "digiRecursiveValue": "#FFFFFF"
+  },
+  "icon--secondary-reverse": {
+    "name": "Icon/secondary-reverse",
+    "description": "Används när en ikon ligger på mörk bakgrund, t.ex. i Footer eller Mediatagg.",
+    "digiCSSVariable": "--digi--color--icon--secondary-reverse",
+    "digiRecursiveValue": "#FFFFFF"
+  },
+  "background--dropdown": {
+    "name": "Background/dropdown",
+    "description": "För dropdowns",
+    "digiCSSVariable": "--digi--color--background--dropdown",
+    "digiRecursiveValue": "#FFFFFF"
+  },
+  "text--interactive--brand-primary-secondary-hypotes": {
+    "name": "Text/Interactive/brand-primary-secondary (Hypotes)",
+    "description": "Används för klickbara textelement där man vill förstärka varumärket, såsom i sekundära länkknappar och knappar samt taggar. Hypotes: fulllösning för att få monochromt att fungera ",
+    "digiCSSVariable": "--digi--color--text--interactive--brand-primary-secondary-hypotes",
+    "digiRecursiveValue": "#091D54"
+  },
+  "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"
+  },
+  "background--interactive--hover--ghost-rider": {
+    "name": "Background/Interactive/hover/ghost rider",
+    "description": "",
+    "digiCSSVariable": "--digi--color--background--interactive--hover--ghost-rider",
+    "digiRecursiveValue": "#FFFFFF"
+  },
+  "border--interactive--default--discreeeeeeet": {
+    "name": "Border/Interactive/default/Discreeeeeeet",
+    "description": "används för default kategori filter, perhaps relevant för fileupload ",
+    "digiCSSVariable": "--digi--color--border--interactive--default--discreeeeeeet",
+    "digiRecursiveValue": "#F4F4F4"
+  },
+  "divider--tertiary-hypotes": {
+    "name": "Divider/tertiary (hypotes)",
+    "description": "Tertiär färg för divider. Hypotes: Skulle vara relevant för divider som befinner sig i dropdowns och filuppladdare",
+    "digiCSSVariable": "--digi--color--divider--tertiary-hypotes",
+    "digiRecursiveValue": "#DDDDDD"
+  },
+  "icon--primary-anti-reverse": {
+    "name": "Icon/primary-anti-reverse",
+    "description": "Förstahandsval för ikoner som ligger på ljus bakgrund.",
+    "digiCSSVariable": "--digi--color--icon--primary-anti-reverse",
+    "digiRecursiveValue": "#333333"
+  },
+  "icon--brand-primary-secondary-hypotes": {
+    "name": "Icon/brand-primary-secondary (hypotes)",
+    "description": "Används på ljusa bakgrunder där man vill få in varumärkets färg, t.ex. länkknappar. Hypotes: fulllösning för att få monochromt att fungera ",
+    "digiCSSVariable": "--digi--color--icon--brand-primary-secondary-hypotes",
+    "digiRecursiveValue": "#091D54"
+  },
+  "grayscale--75": {
+    "name": "Grayscale/75",
+    "description": "",
+    "digiCSSVariable": "--digi--grayscale--75",
+    "digiRecursiveValue": "#F5F5F5"
+  },
+  "grayscale--550": {
+    "name": "Grayscale/550",
+    "description": "",
+    "digiCSSVariable": "--digi--grayscale--550",
+    "digiRecursiveValue": "#C5C5C5"
+  },
+  "grayscale--650": {
+    "name": "Grayscale/650",
+    "description": "",
+    "digiCSSVariable": "--digi--grayscale--650",
+    "digiRecursiveValue": "#9C9C9C"
+  },
+  "grayscale--850": {
+    "name": "Grayscale/850",
+    "description": "Textcolor 5C5C5C",
+    "digiCSSVariable": "--digi--grayscale--850",
+    "digiRecursiveValue": "#4A4A4A"
+  },
+  "grayscale--875": {
+    "name": "Grayscale/875",
+    "description": "Textcolor 5C5C5C",
+    "digiCSSVariable": "--digi--grayscale--875",
+    "digiRecursiveValue": "#3A3A3A"
+  },
+  "grayscale--950": {
+    "name": "Grayscale/950",
+    "description": "Primary text color",
+    "digiCSSVariable": "--digi--grayscale--950",
+    "digiRecursiveValue": "#2C2C2C"
+  },
+  "grayscale--975": {
+    "name": "Grayscale/975",
+    "description": "Primary text color",
+    "digiCSSVariable": "--digi--grayscale--975",
+    "digiRecursiveValue": "#212121"
   }
 }

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

@@ -10,9 +10,9 @@
   --digi--button--color--background--secondary--active: var(--digi--color--background--interactive--hover--secondary);
 
   --digi--button--color--background--function--default: transparent;
-  --digi--button--color--background--function--hover: transparent;
-  --digi--button--color--background--function--focus: transparent;
-  --digi--button--color--background--function--active: transparent;
+  --digi--button--color--background--function--hover: var(--digi--color--background--interactive--hover--ghost-rider);
+  --digi--button--color--background--function--focus: var(--digi--color--background--interactive--hover--ghost-rider);
+  --digi--button--color--background--function--active: var(--digi--color--background--interactive--hover--ghost-rider);
 
   --digi--button--color--text--primary--default: var(--digi--color--text--interactive--secondary);
   --digi--button--color--text--primary--hover: var(--digi--color--text--interactive--secondary);
@@ -29,10 +29,10 @@
   --digi--button--color--text--function--focus: var(--digi--color--text--interactive--primary);
   --digi--button--color--text--function--active: var(--digi--color--text--interactive--primary);
 
-  --digi--button--color--border--primary--default: var(--digi--color--background--interactive--default--primary);
-  --digi--button--color--border--primary--hover: var(--digi--color--background--interactive--hover--primary);
-  --digi--button--color--border--primary--focus: var(--digi--color--background--interactive--default--primary);
-  --digi--button--color--border--primary--active: var(--digi--color--background--interactive--default--primary);
+  --digi--button--color--border--primary--default: var(--digi--color--border--interactive--default--primary);
+  --digi--button--color--border--primary--hover: var(--digi--color--border--interactive--hover--primary);
+  --digi--button--color--border--primary--focus: var(--digi--color--border--interactive--default--primary);
+  --digi--button--color--border--primary--active: var(--digi--color--border--interactive--default--primary);
 
   --digi--button--color--border--secondary--default: var(--digi--color--border--interactive--default--primary);
   --digi--button--color--border--secondary--hover: var(--digi--color--border--interactive--hover--secondary);
@@ -44,10 +44,10 @@
   --digi--button--color--border--function--focus: initial;
   --digi--button--color--border--function--active: initial;
 
-  --digi--button--color--icon--primary--default: var(--digi--color--icon--secondary);
-  --digi--button--color--icon--primary--hover: var(--digi--color--icon--secondary);
-  --digi--button--color--icon--primary--focus: var(--digi--color--icon--secondary);
-  --digi--button--color--icon--primary--active: var(--digi--color--icon--secondary);
+  --digi--button--color--icon--primary--default: var(--digi--color--icon--secondary-reverse);
+  --digi--button--color--icon--primary--hover: var(--digi--color--icon--secondary-reverse);
+  --digi--button--color--icon--primary--focus: var(--digi--color--icon--secondary-reverse);
+  --digi--button--color--icon--primary--active: var(--digi--color--icon--secondary-reverse);
 
   --digi--button--color--icon--secondary--default: var(--digi--color--icon--brand-primary);
   --digi--button--color--icon--secondary--hover: var(--digi--color--icon--brand-primary);
@@ -86,9 +86,9 @@
   --digi--button--border-radius--secondary--focus: var(--digi--border-radius--secondary);
   --digi--button--border-radius--secondary--active: var(--digi--border-radius--secondary);
   --digi--button--border-radius--function--default: initial;
-  --digi--button--border-radius--function--hover: initial;
-  --digi--button--border-radius--function--focus: initial;
-  --digi--button--border-radius--function--active: initial;
+  --digi--button--border-radius--function--hover: var(--digi--border-radius--secondary);
+  --digi--button--border-radius--function--focus: var(--digi--border-radius--secondary);
+  --digi--button--border-radius--function--active: var(--digi--border-radius--secondary);
 
   --digi--button--padding--small: var(--digi--gutter--button-block-small) var(--digi--gutter--button-inline-small);
   --digi--button--padding--medium: var(--digi--gutter--button-block-medium) var(--digi--gutter--button-inline-medium);