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

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

@@ -22,6 +22,143 @@
   --digi--rallarros--500: #ce1cbd;
   --digi--sapphire--500: #1616b2;
 
+  --digi--color--logotype-color--dark: var(--digi--granskott--700);
+
+  --digi--color--infographic--lineart--dark: var(--digi--grayscale--900);
+  --digi--color--infographic--background--dark: var(--digi--grayscale--0);
+  --digi--color--infographic--brand--primary--dark: var(--digi--granskott--700);
+  --digi--color--infographic--brand--secondary--dark: var(--digi--granskott--250);
+  --digi--color--infographic--brand--tertiary--dark: var(--digi--rallarros--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--text--description--dark: var(--digi--grayscale--100);
+
+  --digi--color--text--interactive--primary--dark: var(--digi--norrsken--500);
+  --digi--color--text--interactive--secondary--dark: var(--digi--grayscale--900);
+  --digi--color--text--interactive--secondary-discreet--dark: var(--digi--grayscale--75); //jag leker
+  --digi--color--text--interactive--tertiary--dark: var(--digi--grayscale--75);
+  --digi--color--text--interactive--brand-primary--dark: var(--digi--natthimmel--75);
+  --digi--color--text--interactive--brand-secondary--dark: var(--digi--norrsken--500);
+  --digi--color--text--interactive--visited--dark: #CB6DE3; //jag leker
+
+  --digi--color--background--primary--dark: var(--digi--grayscale--975);
+  --digi--color--background--primary-elevated--dark: var(--digi--grayscale--850);
+  --digi--color--background--secondary--dark: var(--digi--grayscale--950);
+  --digi--color--background--secondary-elevated--dark: var(--digi--grayscale--875);
+  --digi--color--background--secondary-muted--dark: var(--digi--grayscale--900);
+  --digi--color--background--secondary-accent--dark: var(--digi--grayscale--850);
+  --digi--color--background--pop-out--dark: var(--digi--grayscale--850);
+  --digi--color--background--brand-primary--dark: var(--digi--grayscale--900);
+  --digi--color--background--transparent--dark: var(--digi--misc--transparent);
+  --digi--color--background--notification--dark: var(--digi--sentiment--error--500);
+
+  --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--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--default--quaternary--dark: var(--digi--grayscale--850);
+  --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--hover--primary--dark: var(--digi--grayscale--650);
+  --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--hover--quarternary--dark: var(--digi--grayscale--875);
+  --digi--color--background--interactive--hover--inverted--dark: var(--digi--norrsken--400);
+  --digi--color--background--interactive--hover--quinary--dark: var(--digi--grayscale--850);
+
+  --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--selected--on-menu-minus-button--dark: var(--digi--grayscale--650);
+
+  --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--interactive--validation--error--dark: var(--digi--misc--transparent);
+
+  --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--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--secondary--dark: var(--digi--sentiment--warning--700);
+  --digi--color--background--sentiment--warning--tertiary--dark: var(--digi--sentiment--warning--200);
+  --digi--color--background--sentiment--warning--quarternary--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--beta--primary--dark: var(--digi--rallarros--500);
+  --digi--color--background--sentiment--beta--secondary--dark: var(--digi--rallarros--300);
+
+  --digi--color--border--notification--dark: var(--digi--grayscale--0);
+  --digi--color--border--transparent--dark: var(--digi--misc--transparent);
+
+  --digi--color--border--interactive--default--primary--dark: var(--digi--grayscale--75);
+  --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--inverted--dark: var(--digi--norrsken--500);
+
+  --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--hover--inverted--dark: var(--digi--norrsken--400);
+
+  --digi--color--border--interactive--validation--success--dark: var(--digi--sentiment--success--500);
+  --digi--color--border--interactive--validation--warning--dark: var(--digi--sentiment--warning--900);
+  --digi--color--border--interactive--validation--error--dark: var(--digi--sentiment--error--500);
+
+  --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--sentiment--error--dark: var(--digi--sentiment--error--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--sentiment--info--dark: var(--digi--sentiment--informative--500);
+
+  --digi--color--border--accent--primary--dark: var(--digi--grayscale--650);
+  --digi--color--border--accent--secondary--dark: var(--digi--granskott--700);
+
+  --digi--color--marking--navigation--selected--dark: var(--digi--granskott--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--indication--primary--dark: var(--digi--sentiment--success--500);
+  --digi--color--marking--indication--secondary--dark: var(--digi--natthimmel--800);
+  --digi--color--marking--indication--tertiary--dark: var(--digi--grayscale--700);
+
+  --digi--color--divider--primary--dark: var(--digi--grayscale--400);
+  --digi--color--divider--secondary--dark: var(--digi--grayscale--200);
+  --digi--color--divider--on-brand-primary--dark: var(--digi--grayscale--650);
+  --digi--color--divider--cta--dark: var(--digi--norrsken--500);
+
+  --digi--color--icon--primary--dark: var(--digi--grayscale--75);
+  --digi--color--icon--secondary--dark: var(--digi--grayscale--75);
+  --digi--color--icon--cta--dark: var(--digi--norrsken--500);
+  --digi--color--icon--brand-primary--dark: var(--digi--grayscale--75);
+  --digi--color--icon--brand-secondary--dark: var(--digi--norrsken--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--icon--validation--error--dark: var(--digi--sentiment--error--500);
+
+  --digi--color--misc--spinner-path--dark: var(--digi--grayscale--400);
+  --digi--color--misc--skeleton--dark: var(--digi--grayscale--400);
+
   --digi--color--logotype-color--light: var(--digi--granskott--700);
 
   --digi--color--infographic--lineart--light: var(--digi--grayscale--900);
@@ -36,13 +173,16 @@
 
   --digi--color--text--interactive--primary--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); //jag leker
   --digi--color--text--interactive--tertiary--light: var(--digi--grayscale--900);
   --digi--color--text--interactive--brand-primary--light: var(--digi--natthimmel--800);
   --digi--color--text--interactive--brand-secondary--light: var(--digi--norrsken--500);
   --digi--color--text--interactive--visited--light: var(--digi--amethyst--500);
 
   --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-elevated--light: var(--digi--grayscale--100);
   --digi--color--background--secondary-muted--light: var(--digi--grayscale--50);
   --digi--color--background--secondary-accent--light: var(--digi--grayscale--400);
   --digi--color--background--pop-out--light: var(--digi--granskott--200);
@@ -64,8 +204,10 @@
   --digi--color--background--interactive--hover--tertiary--light: var(--digi--sapphire--500);
   --digi--color--background--interactive--hover--quarternary--light: var(--digi--grayscale--200);
   --digi--color--background--interactive--hover--inverted--light: var(--digi--norrsken--400);
+  --digi--color--background--interactive--hover--quinary--light: var(--digi--misc--transparent);
 
   --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--selected--on-menu-minus-button--light: var(--digi--granskott--250);
@@ -77,6 +219,7 @@
   --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--success--primary--light: var(--digi--sentiment--success--500);
   --digi--color--background--sentiment--success--secondary--light: var(--digi--sentiment--success--700);