@designsystem-se/af 39.2.2 → 39.2.3-beta.darkmode.1

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

@@ -3,768 +3,945 @@
     "name": "Text/primary",
     "description": "Primär textfärg som har bra kontrastvärde mot vitt, med gråton för att inte ha för skarp kontrast för ögonen.",
     "digiCSSVariable": "--digi--color--text--primary",
-    "digiRecursiveValue": "#333333"
+    "digiRecursiveValue": "#333333",
+    "digiRecursiveValueDark": "#F5F5F5"
+  },
+  "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",
+    "digiRecursiveValueDark": "#4A4A4A"
   },
   "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"
+    "digiRecursiveValue": "#FFFFFF",
+    "digiRecursiveValueDark": "#F5F5F5"
+  },
+  "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",
+    "digiRecursiveValueDark": "#F5F5F5"
   },
   "text--description": {
     "name": "Text/description",
     "description": "Textfärg som används för beskrivningar, t.ex. i digi-progress-indicator.",
     "digiCSSVariable": "--digi--color--text--description",
-    "digiRecursiveValue": "#5C5C5C"
+    "digiRecursiveValue": "#5C5C5C",
+    "digiRecursiveValueDark": "#F4F4F4"
   },
   "text--interactive--primary": {
     "name": "Text/Interactive/primary",
     "description": "Används för länkar.",
     "digiCSSVariable": "--digi--color--text--interactive--primary",
-    "digiRecursiveValue": "#1616B2"
+    "digiRecursiveValue": "#1616B2",
+    "digiRecursiveValueDark": "#ACE4AD"
+  },
+  "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",
+    "digiRecursiveValueDark": "#F5F5F5"
   },
   "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"
+    "digiRecursiveValue": "#FFFFFF",
+    "digiRecursiveValueDark": "#F5F5F5"
+  },
+  "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",
+    "digiRecursiveValueDark": "#F5F5F5"
   },
   "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.",
     "digiCSSVariable": "--digi--color--text--interactive--tertiary",
-    "digiRecursiveValue": "#333333"
+    "digiRecursiveValue": "#333333",
+    "digiRecursiveValueDark": "#F5F5F5"
   },
   "text--interactive--brand-primary": {
     "name": "Text/Interactive/brand-primary",
     "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.",
     "digiCSSVariable": "--digi--color--text--interactive--brand-primary",
-    "digiRecursiveValue": "#091D54"
+    "digiRecursiveValue": "#091D54",
+    "digiRecursiveValueDark": "#F5F5F5"
   },
   "text--interactive--brand-secondary": {
     "name": "Text/Interactive/brand-secondary",
     "description": "Används i länkknappar.",
     "digiCSSVariable": "--digi--color--text--interactive--brand-secondary",
-    "digiRecursiveValue": "#67EE6A"
+    "digiRecursiveValue": "#67EE6A",
+    "digiRecursiveValueDark": "#67EE6A"
   },
   "text--interactive--visited": {
     "name": "Text/Interactive/visited",
     "description": "Används för länkar som har blivit besökta.",
     "digiCSSVariable": "--digi--color--text--interactive--visited",
-    "digiRecursiveValue": "#822998"
+    "digiRecursiveValue": "#822998",
+    "digiRecursiveValueDark": "#822998"
+  },
+  "background--surface": {
+    "name": "Background/surface",
+    "description": "ska sättas på <body> och grundframen",
+    "digiCSSVariable": "--digi--color--background--surface",
+    "digiRecursiveValue": "#FFFFFF",
+    "digiRecursiveValueDark": "#333333"
   },
   "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"
+    "digiRecursiveValue": "#FFFFFF",
+    "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"
+    "digiRecursiveValue": "#F4F4F4",
+    "digiRecursiveValueDark": "#171717"
   },
   "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.",
     "digiCSSVariable": "--digi--color--background--secondary-accent",
-    "digiRecursiveValue": "#DDDDDD"
+    "digiRecursiveValue": "#DDDDDD",
+    "digiRecursiveValueDark": "#4A4A4A"
   },
   "background--secondary-muted": {
     "name": "Background/secondary-muted",
     "description": "Används som bakgrundsfärg för att mer subtilt gruppera och framhäva klickbara element, som flikar i digi-header.",
     "digiCSSVariable": "--digi--color--background--secondary-muted",
-    "digiRecursiveValue": "#FBFBFB"
+    "digiRecursiveValue": "#FBFBFB",
+    "digiRecursiveValueDark": "#333333"
   },
   "background--brand-primary": {
     "name": "Background/brand-primary",
     "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"
+    "digiRecursiveValue": "#091D54",
+    "digiRecursiveValueDark": "#060817"
   },
   "background--transparent": {
     "name": "Background/transparent",
     "description": "Används där elementet inte behöver en egen bakgrundsfärg, såsom i digi-navigation-vertical-menu och digi-quote.",
     "digiCSSVariable": "--digi--color--background--transparent",
-    "digiRecursiveValue": "#FFFFFF"
+    "digiRecursiveValue": "#FFFFFF",
+    "digiRecursiveValueDark": "#FFFFFF"
   },
   "background--pop-out": {
     "name": "Background/pop-out",
     "description": "Används i digi-card, feedback-komponenterna, digi-quote, digi-expandlable-faq, digi-receipt för att visuellt sticka ut på neutrala bakgrunder.",
     "digiCSSVariable": "--digi--color--background--pop-out",
-    "digiRecursiveValue": "#EBF8EB"
+    "digiRecursiveValue": "#EBF8EB",
+    "digiRecursiveValueDark": "#05130E"
   },
   "background--notification": {
     "name": "Background/notification",
     "description": "Används i digi-badge-notification för att uppmärksamma händelser och för att önska användaråtgärder.",
     "digiCSSVariable": "--digi--color--background--notification",
-    "digiRecursiveValue": "#DA0000"
+    "digiRecursiveValue": "#DA0000",
+    "digiRecursiveValueDark": "#DA0000"
   },
   "background--interactive--default--primary": {
     "name": "Background/Interactive/default/primary",
     "description": "Används för klickbara element (knapp, länkknapp) på våra primära former av interaktioner där man vill förstärka varumärket. Används ofta med sekundär textfärg och hover-färgen background/interactive/hover/primary.",
     "digiCSSVariable": "--digi--color--background--interactive--default--primary",
-    "digiRecursiveValue": "#091D54"
+    "digiRecursiveValue": "#091D54",
+    "digiRecursiveValueDark": "#8AC6EB"
   },
   "background--interactive--default--primary-inverted": {
     "name": "Background/Interactive/default/primary-inverted",
     "description": "Används för klickbara element (som länkknapp) på våra primära former av interaktioner som ligger på background/brand-primary där man vill förstärka varumärket. Matchas ofta med hover-färgen background/interactive/hover/inverted.",
     "digiCSSVariable": "--digi--color--background--interactive--default--primary-inverted",
-    "digiRecursiveValue": "#67EE6A"
+    "digiRecursiveValue": "#67EE6A",
+    "digiRecursiveValueDark": "#67EE6A"
   },
   "background--interactive--default--secondary": {
     "name": "Background/Interactive/default/secondary",
     "description": "Vit bakgrundsfärg som används i många av de klickbara delarna av komponenterna på våra sekundära former av interaktioner. Matchas ofta med hover-färgen background/interactive/hover/secondary.",
     "digiCSSVariable": "--digi--color--background--interactive--default--secondary",
-    "digiRecursiveValue": "#FFFFFF"
-  },
-  "background--interactive--default--secondary-inverted": {
-    "name": "Background/Interactive/default/secondary-inverted",
-    "description": "Används på klickbara element på våra sekundära former av interaktioner (som sekundär länkknapp)  som ligger på background/brand-primary. Matchas ofta med hover-färgen background/interactive/hover/inverted.",
-    "digiCSSVariable": "--digi--color--background--interactive--default--secondary-inverted",
-    "digiRecursiveValue": "#FFFFFF"
+    "digiRecursiveValue": "#FFFFFF",
+    "digiRecursiveValueDark": "#212121"
   },
   "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"
+    "digiRecursiveValue": "#EDEDED",
+    "digiRecursiveValueDark": "#3A3A3A"
   },
   "background--interactive--default--quaternary": {
     "name": "Background/Interactive/default/quaternary",
     "description": "Används i knappar i filuppladdare och kategorifilter.",
     "digiCSSVariable": "--digi--color--background--interactive--default--quaternary",
-    "digiRecursiveValue": "#F4F4F4"
+    "digiRecursiveValue": "#F4F4F4",
+    "digiRecursiveValueDark": "#4A4A4A"
   },
   "background--interactive--default--input-elements": {
     "name": "Background/Interactive/default/input-elements",
     "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"
+    "digiRecursiveValue": "#FFFFFF",
+    "digiRecursiveValueDark": "#212121"
   },
   "background--interactive--default--pop-out": {
     "name": "Background/Interactive/default/pop-out",
     "description": "Används i vertikalmeny sekundärvarianten.",
     "digiCSSVariable": "--digi--color--background--interactive--default--pop-out",
-    "digiRecursiveValue": "#F2FAF2"
+    "digiRecursiveValue": "#F2FAF2",
+    "digiRecursiveValueDark": "#4A4A4A"
   },
   "background--interactive--hover--primary": {
     "name": "Background/Interactive/hover/primary",
     "description": "Hoverfärg för bakgrundsfärgen Background/Interactive/default/primary.",
     "digiCSSVariable": "--digi--color--background--interactive--hover--primary",
-    "digiRecursiveValue": "#043982"
+    "digiRecursiveValue": "#043982",
+    "digiRecursiveValueDark": "#879BDB"
   },
   "background--interactive--hover--secondary": {
     "name": "Background/Interactive/hover/secondary",
     "description": "Hoverfärg för bakgrundsfärgen Background/Interactive/default/secondary.",
     "digiCSSVariable": "--digi--color--background--interactive--hover--secondary",
-    "digiRecursiveValue": "#DDF1FC"
+    "digiRecursiveValue": "#DDF1FC",
+    "digiRecursiveValueDark": "#4084A6"
   },
   "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"
+    "digiRecursiveValue": "#1616B2",
+    "digiRecursiveValueDark": "#ACE4AD"
   },
   "background--interactive--hover--quarternary": {
     "name": "Background/Interactive/hover/quarternary",
     "description": "Hover för vita/ljusgråa element (header-flikar, väljare med sök, rullgardinsmeny).",
     "digiCSSVariable": "--digi--color--background--interactive--hover--quarternary",
-    "digiRecursiveValue": "#EDEDED"
+    "digiRecursiveValue": "#EDEDED",
+    "digiRecursiveValueDark": "#3A3A3A"
   },
   "background--interactive--hover--inverted": {
     "name": "Background/Interactive/hover/inverted",
     "description": "Hover-färg för bakgrundsfärgen Background/Interactive/default/secondary-inverted.",
     "digiCSSVariable": "--digi--color--background--interactive--hover--inverted",
-    "digiRecursiveValue": "#AAF5AB"
+    "digiRecursiveValue": "#AAF5AB",
+    "digiRecursiveValueDark": "#AAF5AB"
   },
   "background--interactive--selected--primary": {
     "name": "Background/Interactive/selected/primary",
     "description": "Selected-utseende för kryssrutor, radioknappar, kalendern.",
     "digiCSSVariable": "--digi--color--background--interactive--selected--primary",
-    "digiRecursiveValue": "#008A20"
+    "digiRecursiveValue": "#008A20",
+    "digiRecursiveValueDark": "#008A20"
   },
   "background--interactive--selected--secondary": {
     "name": "Background/Interactive/selected/secondary",
     "description": "Selected-utseende för sekundära kryssrutor, radioknappar som använder sig av varumärkets primära färg.",
     "digiCSSVariable": "--digi--color--background--interactive--selected--secondary",
-    "digiRecursiveValue": "#091D54"
+    "digiRecursiveValue": "#091D54",
+    "digiRecursiveValueDark": "#8AC6EB"
   },
   "background--interactive--selected--tertiary": {
     "name": "Background/Interactive/selected/tertiary",
     "description": "Selected-utseende för valalternativ i dropdowns, såsom i rullgardinsmeny och väljare med sök.",
     "digiCSSVariable": "--digi--color--background--interactive--selected--tertiary",
-    "digiRecursiveValue": "#EDEDED"
+    "digiRecursiveValue": "#EDEDED",
+    "digiRecursiveValueDark": "#3A3A3A"
   },
   "background--interactive--selected--on-menu-minus-button": {
     "name": "Background/Interactive/selected/on-menu-minus-button",
     "description": "Används i vertikalmeny sekundärvariant på expanderat menyalternativ.",
     "digiCSSVariable": "--digi--color--background--interactive--selected--on-menu-minus-button",
-    "digiRecursiveValue": "#ACE4AD"
+    "digiRecursiveValue": "#DDF4DD",
+    "digiRecursiveValueDark": "#9C9C9C"
   },
   "background--interactive--validation--success": {
     "name": "Background/Interactive/validation/success",
     "description": "Bakgrundsfärg för inmatningsfältets success-state.",
     "digiCSSVariable": "--digi--color--background--interactive--validation--success",
-    "digiRecursiveValue": "#E9F6EC"
+    "digiRecursiveValue": "#E9F6EC",
+    "digiRecursiveValueDark": "#FFFFFF"
   },
   "background--interactive--validation--warning": {
     "name": "Background/Interactive/validation/warning",
     "description": "Bakgrundsfärg för inmatningsfältets warning-state.",
     "digiCSSVariable": "--digi--color--background--interactive--validation--warning",
-    "digiRecursiveValue": "#FFFBDD"
+    "digiRecursiveValue": "#FFFBDD",
+    "digiRecursiveValueDark": "#FFFFFF"
   },
   "background--interactive--validation--error": {
     "name": "Background/Interactive/validation/error",
     "description": "Bakgrundsfärg för inmatningsfältets error-state.",
     "digiCSSVariable": "--digi--color--background--interactive--validation--error",
-    "digiRecursiveValue": "#FDEDED"
+    "digiRecursiveValue": "#FDEDED",
+    "digiRecursiveValueDark": "#FFFFFF"
   },
   "background--sentiment--error--primary": {
     "name": "Background/Sentiment/error/primary",
     "description": "Error-bakgrundsfärg som används i informationsmeddelande.",
     "digiCSSVariable": "--digi--color--background--sentiment--error--primary",
-    "digiRecursiveValue": "#DA0000"
+    "digiRecursiveValue": "#DA0000",
+    "digiRecursiveValueDark": "#DA0000"
   },
   "background--sentiment--error--secondary": {
     "name": "Background/Sentiment/error/secondary",
     "description": "Error/denied-bakgrundsfärg som är mörkare nyans för att användas på små element, som statusindikator.",
     "digiCSSVariable": "--digi--color--background--sentiment--error--secondary",
-    "digiRecursiveValue": "#C7311A"
+    "digiRecursiveValue": "#C7311A",
+    "digiRecursiveValueDark": "#C7311A"
   },
   "background--sentiment--error--tertiary": {
     "name": "Background/Sentiment/error/tertiary",
     "description": "Ljusare error/denied-bakgrundsfärg som används i statusindikator sekundär variant och förloppsstegare.",
     "digiCSSVariable": "--digi--color--background--sentiment--error--tertiary",
-    "digiRecursiveValue": "#FDEDED"
+    "digiRecursiveValue": "#FDEDED",
+    "digiRecursiveValueDark": "#FDEDED"
   },
   "background--sentiment--success--primary": {
     "name": "Background/Sentiment/success/primary",
     "description": "Success-bakgrundsfärg som används i  informationsmeddelande.",
     "digiCSSVariable": "--digi--color--background--sentiment--success--primary",
-    "digiRecursiveValue": "#008A20"
+    "digiRecursiveValue": "#008A20",
+    "digiRecursiveValueDark": "#008A20"
   },
   "background--sentiment--success--secondary": {
     "name": "Background/Sentiment/success/secondary",
     "description": "Success-bakgrundsfärg som är mörkare nyans för att användas på små element, som statusindikator.",
     "digiCSSVariable": "--digi--color--background--sentiment--success--secondary",
-    "digiRecursiveValue": "#02703C"
+    "digiRecursiveValue": "#02703C",
+    "digiRecursiveValueDark": "#02703C"
   },
   "background--sentiment--success--tertiary": {
     "name": "Background/Sentiment/success/tertiary",
     "description": "Ljusare success-bakgrundsfärg som används i statusindikator sekundär variant.",
     "digiCSSVariable": "--digi--color--background--sentiment--success--tertiary",
-    "digiRecursiveValue": "#E9F6EC"
+    "digiRecursiveValue": "#E9F6EC",
+    "digiRecursiveValueDark": "#E9F6EC"
   },
   "background--sentiment--warning--primary": {
     "name": "Background/Sentiment/warning/primary",
     "description": "Warning-bakgrundsfärg som används i informationsmeddelande.",
     "digiCSSVariable": "--digi--color--background--sentiment--warning--primary",
-    "digiRecursiveValue": "#FFE200"
+    "digiRecursiveValue": "#FFE200",
+    "digiRecursiveValueDark": "#FFE200"
   },
   "background--sentiment--warning--secondary": {
     "name": "Background/Sentiment/warning/secondary",
     "description": "Warning-bakgrundsfärg som är mörkare nyans för att användas på små element, som statusindikator.",
     "digiCSSVariable": "--digi--color--background--sentiment--warning--secondary",
-    "digiRecursiveValue": "#FFC108"
+    "digiRecursiveValue": "#FFC108",
+    "digiRecursiveValueDark": "#FFC108"
   },
   "background--sentiment--warning--tertiary": {
     "name": "Background/Sentiment/warning/tertiary",
     "description": "Ljusare warning-bakgrundsfärg som används i statusindikator sekundär variant.",
     "digiCSSVariable": "--digi--color--background--sentiment--warning--tertiary",
-    "digiRecursiveValue": "#FFF398"
+    "digiRecursiveValue": "#FFF398",
+    "digiRecursiveValueDark": "#FFF398"
   },
   "background--sentiment--warning--quarternary": {
     "name": "Background/Sentiment/warning/quarternary",
     "description": "Ljusare warning-bakgrundsfärg som används i förloppsstegare.",
     "digiCSSVariable": "--digi--color--background--sentiment--warning--quarternary",
-    "digiRecursiveValue": "#FFFBDD"
+    "digiRecursiveValue": "#FFFBDD",
+    "digiRecursiveValueDark": "#4A4A4A"
   },
   "background--sentiment--info--primary": {
     "name": "Background/Sentiment/info/primary",
     "description": "Informationsbakgrundsfärg som används i informationsmeddelande.",
     "digiCSSVariable": "--digi--color--background--sentiment--info--primary",
-    "digiRecursiveValue": "#0A4DD1"
+    "digiRecursiveValue": "#0A4DD1",
+    "digiRecursiveValueDark": "#0A4DD1"
   },
   "background--sentiment--info--secondary": {
     "name": "Background/Sentiment/info/secondary",
     "description": "Informationsbakgrundsfärg som är mörkare nyans för att användas på små element, som statusindikator.",
     "digiCSSVariable": "--digi--color--background--sentiment--info--secondary",
-    "digiRecursiveValue": "#0058A3"
+    "digiRecursiveValue": "#0058A3",
+    "digiRecursiveValueDark": "#0058A3"
   },
   "background--sentiment--info--tertiary": {
     "name": "Background/Sentiment/info/tertiary",
     "description": "Ljusare info-bakgrundsfärg som används i statusindikator sekundär variant.",
     "digiCSSVariable": "--digi--color--background--sentiment--info--tertiary",
-    "digiRecursiveValue": "#E9E9FF"
+    "digiRecursiveValue": "#E9E9FF",
+    "digiRecursiveValueDark": "#E9E9FF"
   },
   "background--sentiment--neutral--primary": {
     "name": "Background/Sentiment/neutral/primary",
     "description": "Neutral bakgrundsfärg som används i statusindikatorer.",
     "digiCSSVariable": "--digi--color--background--sentiment--neutral--primary",
-    "digiRecursiveValue": "#757575"
+    "digiRecursiveValue": "#757575",
+    "digiRecursiveValueDark": "#757575"
   },
   "background--sentiment--neutral--secondary": {
     "name": "Background/Sentiment/neutral/secondary",
     "description": "Neutral bakgrundsfärg som används i statusindikatorer av sekundär variant.",
     "digiCSSVariable": "--digi--color--background--sentiment--neutral--secondary",
-    "digiRecursiveValue": "#DDDDDD"
+    "digiRecursiveValue": "#DDDDDD",
+    "digiRecursiveValueDark": "#DDDDDD"
   },
   "background--sentiment--neutral--tertiary": {
     "name": "Background/Sentiment/neutral/tertiary",
     "description": "Neutral bakgrundsfärg som används i mediatagg.",
     "digiCSSVariable": "--digi--color--background--sentiment--neutral--tertiary",
-    "digiRecursiveValue": "#333333"
+    "digiRecursiveValue": "#333333",
+    "digiRecursiveValueDark": "#333333"
   },
   "background--sentiment--beta--primary": {
     "name": "Background/Sentiment/beta/primary",
     "description": "Bakgrundsfärg som används för statusindikatorer av varianten “beta”.",
     "digiCSSVariable": "--digi--color--background--sentiment--beta--primary",
-    "digiRecursiveValue": "#CE1CBD"
+    "digiRecursiveValue": "#CE1CBD",
+    "digiRecursiveValueDark": "#CE1CBD"
   },
   "background--sentiment--beta--secondary": {
     "name": "Background/Sentiment/beta/secondary",
     "description": "Bakgrundsfärg som används för statusindikatorer av varianten sekundär “beta”.",
     "digiCSSVariable": "--digi--color--background--sentiment--beta--secondary",
-    "digiRecursiveValue": "#F8DDF5"
+    "digiRecursiveValue": "#F8DDF5",
+    "digiRecursiveValueDark": "#F8DDF5"
   },
   "border--notification": {
     "name": "Border/notification",
     "description": "Ram som används i notifikationsindikator.",
     "digiCSSVariable": "--digi--color--border--notification",
-    "digiRecursiveValue": "#FFFFFF"
+    "digiRecursiveValue": "#FFFFFF",
+    "digiRecursiveValueDark": "#F5F5F5"
   },
   "border--transparent": {
     "name": "Border/transparent",
     "description": "Transparent ram.",
     "digiCSSVariable": "--digi--color--border--transparent",
-    "digiRecursiveValue": "#FFFFFF"
+    "digiRecursiveValue": "#FFFFFF",
+    "digiRecursiveValueDark": "#FFFFFF"
   },
   "border--interactive--default--primary": {
     "name": "Border/Interactive/default/primary",
     "description": "Ram med varumärkets färg.",
     "digiCSSVariable": "--digi--color--border--interactive--default--primary",
-    "digiRecursiveValue": "#091D54"
+    "digiRecursiveValue": "#091D54",
+    "digiRecursiveValueDark": "#8AC6EB"
   },
   "border--interactive--default--on-input": {
     "name": "Border/Interactive/default/on-input",
     "description": "Används i komponenter som inmatningsfält, kryssrutor och liknande formulärkomponenter.",
     "digiCSSVariable": "--digi--color--border--interactive--default--on-input",
-    "digiRecursiveValue": "#333333"
+    "digiRecursiveValue": "#333333",
+    "digiRecursiveValueDark": "#F5F5F5"
   },
   "border--interactive--default--on-input-nuance": {
     "name": "Border/Interactive/default/on-input-nuance",
     "description": "Används i filuppladdaren och kalendern.",
     "digiCSSVariable": "--digi--color--border--interactive--default--on-input-nuance",
-    "digiRecursiveValue": "#5C5C5C"
+    "digiRecursiveValue": "#5C5C5C",
+    "digiRecursiveValueDark": "#9C9C9C"
   },
   "border--interactive--default--inverted": {
     "name": "Border/Interactive/default/inverted",
     "description": "Används i länkknappar.",
     "digiCSSVariable": "--digi--color--border--interactive--default--inverted",
-    "digiRecursiveValue": "#67EE6A"
+    "digiRecursiveValue": "#67EE6A",
+    "digiRecursiveValueDark": "#67EE6A"
   },
   "border--interactive--hover--primary": {
     "name": "Border/Interactive/hover/primary",
     "description": "Ram som används i primärknappar och länkknappars hover-state.",
     "digiCSSVariable": "--digi--color--border--interactive--hover--primary",
-    "digiRecursiveValue": "#043982"
+    "digiRecursiveValue": "#043982",
+    "digiRecursiveValueDark": "#879BDB"
   },
   "border--interactive--hover--secondary": {
     "name": "Border/Interactive/hover/secondary",
     "description": "Ram som används i sekundärknappar och länkknappars hover-state.",
     "digiCSSVariable": "--digi--color--border--interactive--hover--secondary",
-    "digiRecursiveValue": "#091D54"
+    "digiRecursiveValue": "#091D54",
+    "digiRecursiveValueDark": "#8AC6EB"
   },
   "border--interactive--hover--inverted": {
     "name": "Border/Interactive/hover/inverted",
     "description": "Används i länkknappar.",
     "digiCSSVariable": "--digi--color--border--interactive--hover--inverted",
-    "digiRecursiveValue": "#AAF5AB"
+    "digiRecursiveValue": "#AAF5AB",
+    "digiRecursiveValueDark": "#AAF5AB"
   },
   "border--interactive--validation--success": {
     "name": "Border/Interactive/validation/success",
     "description": "Ram som används för formulärkomponenters success-states.",
     "digiCSSVariable": "--digi--color--border--interactive--validation--success",
-    "digiRecursiveValue": "#008A20"
+    "digiRecursiveValue": "#008A20",
+    "digiRecursiveValueDark": "#008A20"
   },
   "border--interactive--validation--warning": {
     "name": "Border/Interactive/validation/warning",
     "description": "Ram som används för formulärkomponenters warning-states.",
     "digiCSSVariable": "--digi--color--border--interactive--validation--warning",
-    "digiRecursiveValue": "#664D00"
+    "digiRecursiveValue": "#664D00",
+    "digiRecursiveValueDark": "#FFC108"
   },
   "border--interactive--validation--error": {
     "name": "Border/Interactive/validation/error",
     "description": "Ram som används för formulärkomponenters error-states.",
     "digiCSSVariable": "--digi--color--border--interactive--validation--error",
-    "digiRecursiveValue": "#DA0000"
+    "digiRecursiveValue": "#DA0000",
+    "digiRecursiveValueDark": "#DA0000"
   },
   "border--interactive--selected--primary": {
     "name": "Border/Interactive/selected/primary",
     "description": "Ram för valda primära kryssrutor och radioknappar.",
     "digiCSSVariable": "--digi--color--border--interactive--selected--primary",
-    "digiRecursiveValue": "#008A20"
+    "digiRecursiveValue": "#008A20",
+    "digiRecursiveValueDark": "#008A20"
   },
   "border--interactive--selected--secondary": {
     "name": "Border/Interactive/selected/secondary",
     "description": "Ram för valda sekundära kryssrutor och radioknappar.",
     "digiCSSVariable": "--digi--color--border--interactive--selected--secondary",
-    "digiRecursiveValue": "#091D54"
+    "digiRecursiveValue": "#091D54",
+    "digiRecursiveValueDark": "#8AC6EB"
   },
   "border--sentiment--error": {
     "name": "Border/Sentiment/error",
     "description": "Används för borders i sammanhang med error-state. Används i informationsmeddelande.",
     "digiCSSVariable": "--digi--color--border--sentiment--error",
-    "digiRecursiveValue": "#DA0000"
+    "digiRecursiveValue": "#DA0000",
+    "digiRecursiveValueDark": "#DA0000"
   },
   "border--sentiment--success": {
     "name": "Border/Sentiment/success",
     "description": "Används för borders i sammanhang med success-state. Används i informationsmeddelande.",
     "digiCSSVariable": "--digi--color--border--sentiment--success",
-    "digiRecursiveValue": "#008A20"
+    "digiRecursiveValue": "#008A20",
+    "digiRecursiveValueDark": "#008A20"
   },
   "border--sentiment--warning": {
     "name": "Border/Sentiment/warning",
     "description": "Används för borders i sammanhang med warning-state. Används i informationsmeddelande.",
     "digiCSSVariable": "--digi--color--border--sentiment--warning",
-    "digiRecursiveValue": "#FFE200"
+    "digiRecursiveValue": "#FFE200",
+    "digiRecursiveValueDark": "#FFE200"
   },
   "border--sentiment--info": {
     "name": "Border/Sentiment/info",
     "description": "Används för borders i sammanhang med info-state. Används i informationsmeddelande.",
     "digiCSSVariable": "--digi--color--border--sentiment--info",
-    "digiRecursiveValue": "#0A4DD1"
+    "digiRecursiveValue": "#0A4DD1",
+    "digiRecursiveValueDark": "#0A4DD1"
   },
   "border--accent--primary": {
     "name": "Border/Accent/primary",
     "description": "Används i Jumborubrik samt Infokort. Används där man vill ha med visuell accent med varumärkets färg.",
     "digiCSSVariable": "--digi--color--border--accent--primary",
-    "digiRecursiveValue": "#091D54"
+    "digiRecursiveValue": "#091D54",
+    "digiRecursiveValueDark": "#8AC6EB"
   },
   "border--accent--secondary": {
     "name": "Border/Accent/secondary",
     "description": "Används där man vill ha med visuell accent med varumärkets andra färg.",
     "digiCSSVariable": "--digi--color--border--accent--secondary",
-    "digiRecursiveValue": "#02A704"
+    "digiRecursiveValue": "#02A704",
+    "digiRecursiveValueDark": "#02A704"
   },
   "marking--navigation--selected": {
     "name": "Marking/Navigation/selected",
     "description": "Används i valda flikar och vertikalmenysidor.",
     "digiCSSVariable": "--digi--color--marking--navigation--selected",
-    "digiRecursiveValue": "#02A704"
+    "digiRecursiveValue": "#02A704",
+    "digiRecursiveValueDark": "#02A704"
   },
   "marking--navigation--level-active": {
     "name": "Marking/Navigation/level-active",
     "description": "Vertikalmenys undersidor på en expanderad kategori.",
     "digiCSSVariable": "--digi--color--marking--navigation--level-active",
-    "digiRecursiveValue": "#ACE4AD"
+    "digiRecursiveValue": "#DDF4DD",
+    "digiRecursiveValueDark": "#DDF4DD"
   },
   "marking--navigation--level-inactive": {
     "name": "Marking/Navigation/level-inactive",
     "description": "Vertikalmenys undersidor på en expanderad kategori som inte är valda.",
     "digiCSSVariable": "--digi--color--marking--navigation--level-inactive",
-    "digiRecursiveValue": "#F4F4F4"
+    "digiRecursiveValue": "#F4F4F4",
+    "digiRecursiveValueDark": "#F4F4F4"
   },
   "marking--indication--primary": {
     "name": "Marking/Indication/primary",
     "description": "Markeringsfärg som använder sig av funktionsgrön färg för att visa att något är genomfört.",
     "digiCSSVariable": "--digi--color--marking--indication--primary",
-    "digiRecursiveValue": "#008A20"
+    "digiRecursiveValue": "#008A20",
+    "digiRecursiveValueDark": "#008A20"
   },
   "marking--indication--secondary": {
     "name": "Marking/Indication/secondary",
     "description": "Markeringsfärg som används för att visa att något är genomfört där man vill ha med varumärkets färg, används i bl.a. förloppslista.",
     "digiCSSVariable": "--digi--color--marking--indication--secondary",
-    "digiRecursiveValue": "#091D54"
+    "digiRecursiveValue": "#091D54",
+    "digiRecursiveValueDark": "#8AC6EB"
   },
   "marking--indication--tertiary": {
     "name": "Marking/Indication/tertiary",
     "description": "Markeringsfärg som används för att visa när något kan ske/är på väg att ske eller för att visa en markering i ett mer neutralt utförande.",
     "digiCSSVariable": "--digi--color--marking--indication--tertiary",
-    "digiRecursiveValue": "#757575"
+    "digiRecursiveValue": "#757575",
+    "digiRecursiveValueDark": "#757575"
   },
   "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"
+    "digiRecursiveValue": "#DDDDDD",
+    "digiRecursiveValueDark": "#5C5C5C"
   },
   "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"
+    "digiRecursiveValue": "#EDEDED",
+    "digiRecursiveValueDark": "#9C9C9C"
   },
   "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"
+    "digiRecursiveValue": "#ABDEF7",
+    "digiRecursiveValueDark": "#9C9C9C"
   },
   "divider--cta": {
     "name": "Divider/cta",
     "description": "Används i Utfällbar rubrik.",
     "digiCSSVariable": "--digi--color--divider--cta",
-    "digiRecursiveValue": "#1616B2"
+    "digiRecursiveValue": "#1616B2",
+    "digiRecursiveValueDark": "#ACE4AD"
   },
   "icon--primary": {
     "name": "Icon/primary",
     "description": "Förstahandsval för ikoner som ligger på ljus bakgrund.",
     "digiCSSVariable": "--digi--color--icon--primary",
-    "digiRecursiveValue": "#333333"
+    "digiRecursiveValue": "#333333",
+    "digiRecursiveValueDark": "#F5F5F5"
   },
   "icon--secondary": {
     "name": "Icon/secondary",
     "description": "Används när en ikon ligger på mörk bakgrund, t.ex. i Footer eller Mediatagg.",
     "digiCSSVariable": "--digi--color--icon--secondary",
-    "digiRecursiveValue": "#FFFFFF"
+    "digiRecursiveValue": "#FFFFFF",
+    "digiRecursiveValueDark": "#F5F5F5"
   },
   "icon--brand-primary": {
     "name": "Icon/brand-primary",
     "description": "Används på ljusa bakgrunder där man vill få in varumärkets färg, t.ex. länkknappar.",
     "digiCSSVariable": "--digi--color--icon--brand-primary",
-    "digiRecursiveValue": "#091D54"
+    "digiRecursiveValue": "#091D54",
+    "digiRecursiveValueDark": "#F5F5F5"
   },
   "icon--brand-secondary": {
     "name": "Icon/brand-secondary",
     "description": "Används på mörka bakgrunder där man vill få in varumärkets sekundära färg, t.ex. länkknappar.",
     "digiCSSVariable": "--digi--color--icon--brand-secondary",
-    "digiRecursiveValue": "#67EE6A"
+    "digiRecursiveValue": "#67EE6A",
+    "digiRecursiveValueDark": "#67EE6A"
   },
   "icon--cta": {
     "name": "Icon/cta",
     "description": "Används för ikon i funktionsknapp, filuppladdare och flikfältet. ",
     "digiCSSVariable": "--digi--color--icon--cta",
-    "digiRecursiveValue": "#1616B2"
+    "digiRecursiveValue": "#1616B2",
+    "digiRecursiveValueDark": "#ACE4AD"
   },
   "icon--validation--success": {
     "name": "Icon/Validation/success",
     "description": "Används för ikoner som visar success-state. Används i valideringsmeddelande.",
     "digiCSSVariable": "--digi--color--icon--validation--success",
-    "digiRecursiveValue": "#008A20"
+    "digiRecursiveValue": "#008A20",
+    "digiRecursiveValueDark": "#008A20"
   },
   "icon--validation--warning": {
     "name": "Icon/Validation/warning",
     "description": "Används för ikoner som visar warning-state. Används i valideringsmeddelande.",
     "digiCSSVariable": "--digi--color--icon--validation--warning",
-    "digiRecursiveValue": "#FFE200"
+    "digiRecursiveValue": "#FFE200",
+    "digiRecursiveValueDark": "#FFE200"
   },
   "icon--validation--error": {
     "name": "Icon/Validation/error",
     "description": "Används för ikoner som visar error-state. Används i valideringsmeddelande.",
     "digiCSSVariable": "--digi--color--icon--validation--error",
-    "digiRecursiveValue": "#DA0000"
+    "digiRecursiveValue": "#DA0000",
+    "digiRecursiveValueDark": "#DA0000"
   },
   "infographic--lineart": {
     "name": "Infographic/Lineart",
     "description": "",
     "digiCSSVariable": "--digi--color--infographic--lineart",
-    "digiRecursiveValue": "#333333"
+    "digiRecursiveValue": "#333333",
+    "digiRecursiveValueDark": "#F5F5F5"
   },
   "infographic--background": {
     "name": "Infographic/Background",
     "description": "",
     "digiCSSVariable": "--digi--color--infographic--background",
-    "digiRecursiveValue": "#FFFFFF"
+    "digiRecursiveValue": "#FFFFFF",
+    "digiRecursiveValueDark": "#FFFFFF"
   },
   "infographic--brand--primary": {
     "name": "Infographic/Brand/Primary",
     "description": "Används som primär färg för infografik.",
     "digiCSSVariable": "--digi--color--infographic--brand--primary",
-    "digiRecursiveValue": "#02A704"
+    "digiRecursiveValue": "#02A704",
+    "digiRecursiveValueDark": "#02A704"
   },
   "infographic--brand--primary-alt": {
     "name": "Infographic/Brand/Primary-alt",
     "description": "Används i vissa fall där denna färg inte syns i dark mode.",
     "digiCSSVariable": "--digi--color--infographic--brand--primary-alt",
-    "digiRecursiveValue": "#02A704"
+    "digiRecursiveValue": "#02A704",
+    "digiRecursiveValueDark": "#02A704"
   },
   "infographic--brand--secondary": {
     "name": "Infographic/Brand/Secondary",
     "description": "Används som sekundär färg för infografik.",
     "digiCSSVariable": "--digi--color--infographic--brand--secondary",
-    "digiRecursiveValue": "#CBECC9"
+    "digiRecursiveValue": "#CBECC9",
+    "digiRecursiveValueDark": "#CBECC9"
   },
   "infographic--brand--secondary-alt": {
     "name": "Infographic/Brand/Secondary-alt",
     "description": "Används i vissa fall där denna färg inte syns i dark mode.",
     "digiCSSVariable": "--digi--color--infographic--brand--secondary-alt",
-    "digiRecursiveValue": "#CBECC9"
+    "digiRecursiveValue": "#CBECC9",
+    "digiRecursiveValueDark": "#05130E"
   },
   "misc--spinner-path": {
     "name": "Misc/spinner-path",
     "description": "Används i Spinner-komponenten.",
     "digiCSSVariable": "--digi--color--misc--spinner-path",
-    "digiRecursiveValue": "#DDDDDD"
+    "digiRecursiveValue": "#DDDDDD",
+    "digiRecursiveValueDark": "#DDDDDD"
   },
   "misc--skeleton": {
     "name": "Misc/skeleton",
     "description": "Används i Platshållare-komponenten.",
     "digiCSSVariable": "--digi--color--misc--skeleton",
-    "digiRecursiveValue": "#DDDDDD"
-  },
-  "misc--transparent": {
-    "name": "Misc/Transparent",
-    "description": "",
-    "digiCSSVariable": "--digi--misc--transparent",
-    "digiRecursiveValue": "#FFFFFF"
+    "digiRecursiveValue": "#DDDDDD",
+    "digiRecursiveValueDark": "#DDDDDD"
   },
   "grayscale--0": {
     "name": "Grayscale/0",
     "description": "",
     "digiCSSVariable": "--digi--grayscale--0",
-    "digiRecursiveValue": "#FFFFFF"
+    "digiRecursiveValue": "#FFFFFF",
+    "digiRecursiveValueDark": "#FFFFFF"
   },
   "grayscale--50": {
     "name": "Grayscale/50",
     "description": "",
     "digiCSSVariable": "--digi--grayscale--50",
-    "digiRecursiveValue": "#FBFBFB"
+    "digiRecursiveValue": "#FBFBFB",
+    "digiRecursiveValueDark": "#FBFBFB"
   },
   "grayscale--100": {
     "name": "Grayscale/100",
     "description": "",
     "digiCSSVariable": "--digi--grayscale--100",
-    "digiRecursiveValue": "#F4F4F4"
+    "digiRecursiveValue": "#F4F4F4",
+    "digiRecursiveValueDark": "#F4F4F4"
   },
   "grayscale--200": {
     "name": "Grayscale/200",
     "description": "Sekundär bakgrundsfärg / Secoundary background",
     "digiCSSVariable": "--digi--grayscale--200",
-    "digiRecursiveValue": "#EDEDED"
+    "digiRecursiveValue": "#EDEDED",
+    "digiRecursiveValueDark": "#EDEDED"
   },
   "grayscale--300": {
     "name": "Grayscale/300",
     "description": "",
     "digiCSSVariable": "--digi--grayscale--300",
-    "digiRecursiveValue": "#E4E4E4"
+    "digiRecursiveValue": "#E4E4E4",
+    "digiRecursiveValueDark": "#E4E4E4"
   },
   "grayscale--400": {
     "name": "Grayscale/400",
     "description": "",
     "digiCSSVariable": "--digi--grayscale--400",
-    "digiRecursiveValue": "#DDDDDD"
+    "digiRecursiveValue": "#DDDDDD",
+    "digiRecursiveValueDark": "#DDDDDD"
   },
   "grayscale--500": {
     "name": "Grayscale/500",
     "description": "",
     "digiCSSVariable": "--digi--grayscale--500",
-    "digiRecursiveValue": "#CACACA"
+    "digiRecursiveValue": "#CACACA",
+    "digiRecursiveValueDark": "#CACACA"
   },
   "grayscale--600": {
     "name": "Grayscale/600",
     "description": "",
     "digiCSSVariable": "--digi--grayscale--600",
-    "digiRecursiveValue": "#ACACAC"
+    "digiRecursiveValue": "#ACACAC",
+    "digiRecursiveValueDark": "#ACACAC"
   },
   "grayscale--700": {
     "name": "Grayscale/700",
     "description": "Textcolor",
     "digiCSSVariable": "--digi--grayscale--700",
-    "digiRecursiveValue": "#757575"
+    "digiRecursiveValue": "#757575",
+    "digiRecursiveValueDark": "#757575"
   },
   "grayscale--800": {
     "name": "Grayscale/800",
     "description": "Textcolor 5C5C5C",
     "digiCSSVariable": "--digi--grayscale--800",
-    "digiRecursiveValue": "#5C5C5C"
+    "digiRecursiveValue": "#5C5C5C",
+    "digiRecursiveValueDark": "#5C5C5C"
   },
   "grayscale--900": {
     "name": "Grayscale/900",
     "description": "Primary text color",
     "digiCSSVariable": "--digi--grayscale--900",
-    "digiRecursiveValue": "#333333"
+    "digiRecursiveValue": "#333333",
+    "digiRecursiveValueDark": "#333333"
   },
   "grayscale--1000": {
     "name": "Grayscale/1000",
     "description": "",
     "digiCSSVariable": "--digi--grayscale--1000",
-    "digiRecursiveValue": "#000000"
-  },
-  "sentiment--informative--200": {
-    "name": "Sentiment/Informative/200",
-    "description": "",
-    "digiCSSVariable": "--digi--sentiment--informative--200",
-    "digiRecursiveValue": "#E9E9FF"
-  },
-  "sentiment--informative--500": {
-    "name": "Sentiment/Informative/500",
-    "description": "",
-    "digiCSSVariable": "--digi--sentiment--informative--500",
-    "digiRecursiveValue": "#0A4DD1"
-  },
-  "sentiment--informative--700": {
-    "name": "Sentiment/Informative/700",
-    "description": "",
-    "digiCSSVariable": "--digi--sentiment--informative--700",
-    "digiRecursiveValue": "#0058A3"
-  },
-  "sentiment--error--200": {
-    "name": "Sentiment/Error/200",
-    "description": "",
-    "digiCSSVariable": "--digi--sentiment--error--200",
-    "digiRecursiveValue": "#FDEDED"
-  },
-  "sentiment--error--500": {
-    "name": "Sentiment/Error/500",
-    "description": "",
-    "digiCSSVariable": "--digi--sentiment--error--500",
-    "digiRecursiveValue": "#DA0000"
-  },
-  "sentiment--error--700": {
-    "name": "Sentiment/Error/700",
-    "description": "",
-    "digiCSSVariable": "--digi--sentiment--error--700",
-    "digiRecursiveValue": "#C7311A"
-  },
-  "sentiment--success--200": {
-    "name": "Sentiment/Success/200",
-    "description": "",
-    "digiCSSVariable": "--digi--sentiment--success--200",
-    "digiRecursiveValue": "#E9F6EC"
-  },
-  "sentiment--success--500": {
-    "name": "Sentiment/Success/500",
+    "digiRecursiveValue": "#000000",
+    "digiRecursiveValueDark": "#000000"
+  },
+  "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",
+    "digiRecursiveValueDark": "#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",
+    "digiRecursiveValueDark": "#4A4A4A"
+  },
+  "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",
+    "digiRecursiveValueDark": "#F5F5F5"
+  },
+  "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",
+    "digiRecursiveValueDark": "#333333"
+  },
+  "background--dropdown": {
+    "name": "Background/dropdown",
+    "description": "För dropdowns",
+    "digiCSSVariable": "--digi--color--background--dropdown",
+    "digiRecursiveValue": "#FFFFFF",
+    "digiRecursiveValueDark": "#5C5C5C"
+  },
+  "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",
+    "digiRecursiveValueDark": "#8AC6EB"
+  },
+  "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",
+    "digiCSSVariable": "--digi--color--background--interactive--hover--ghost-rider",
+    "digiRecursiveValue": "#FFFFFF",
+    "digiRecursiveValueDark": "#4A4A4A"
+  },
+  "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",
+    "digiRecursiveValueDark": "#C5C5C5"
+  },
+  "icon--primary-anti-reverse": {
+    "name": "Icon/primary-anti-reverse",
+    "description": "Förstahandsval för ikoner som ligger på ljus bakgrund. hypotes: ikon som ska förbli mörk",
+    "digiCSSVariable": "--digi--color--icon--primary-anti-reverse",
+    "digiRecursiveValue": "#333333",
+    "digiRecursiveValueDark": "#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",
+    "digiRecursiveValueDark": "#8AC6EB"
+  },
+  "grayscale--75": {
+    "name": "Grayscale/75",
     "description": "",
-    "digiCSSVariable": "--digi--sentiment--success--500",
-    "digiRecursiveValue": "#008A20"
+    "digiCSSVariable": "--digi--grayscale--75",
+    "digiRecursiveValue": "#F5F5F5",
+    "digiRecursiveValueDark": "#F5F5F5"
   },
-  "sentiment--success--700": {
-    "name": "Sentiment/Success/700",
+  "grayscale--550": {
+    "name": "Grayscale/550",
     "description": "",
-    "digiCSSVariable": "--digi--sentiment--success--700",
-    "digiRecursiveValue": "#02703C"
+    "digiCSSVariable": "--digi--grayscale--550",
+    "digiRecursiveValue": "#C5C5C5",
+    "digiRecursiveValueDark": "#C5C5C5"
   },
-  "sentiment--warning--200": {
-    "name": "Sentiment/Warning/200",
+  "grayscale--650": {
+    "name": "Grayscale/650",
     "description": "",
-    "digiCSSVariable": "--digi--sentiment--warning--200",
-    "digiRecursiveValue": "#FFF398"
+    "digiCSSVariable": "--digi--grayscale--650",
+    "digiRecursiveValue": "#9C9C9C",
+    "digiRecursiveValueDark": "#9C9C9C"
   },
-  "sentiment--warning--50": {
-    "name": "Sentiment/Warning/50",
-    "description": "",
-    "digiCSSVariable": "--digi--sentiment--warning--50",
-    "digiRecursiveValue": "#FFFBDD"
+  "grayscale--850": {
+    "name": "Grayscale/850",
+    "description": "Textcolor 5C5C5C",
+    "digiCSSVariable": "--digi--grayscale--850",
+    "digiRecursiveValue": "#515151",
+    "digiRecursiveValueDark": "#515151"
   },
-  "sentiment--warning--500": {
-    "name": "Sentiment/Warning/500",
-    "description": "",
-    "digiCSSVariable": "--digi--sentiment--warning--500",
-    "digiRecursiveValue": "#FFE200"
+  "grayscale--875": {
+    "name": "Grayscale/875",
+    "description": "Textcolor 5C5C5C",
+    "digiCSSVariable": "--digi--grayscale--875",
+    "digiRecursiveValue": "#414141",
+    "digiRecursiveValueDark": "#414141"
   },
-  "sentiment--warning--700": {
-    "name": "Sentiment/Warning/700",
-    "description": "",
-    "digiCSSVariable": "--digi--sentiment--warning--700",
-    "digiRecursiveValue": "#FFC108"
+  "grayscale--950": {
+    "name": "Grayscale/950",
+    "description": "Primary text color",
+    "digiCSSVariable": "--digi--grayscale--950",
+    "digiRecursiveValue": "#2C2C2C",
+    "digiRecursiveValueDark": "#2C2C2C"
   },
-  "sentiment--warning--900": {
-    "name": "Sentiment/Warning/900",
-    "description": "",
-    "digiCSSVariable": "--digi--sentiment--warning--900",
-    "digiRecursiveValue": "#664D00"
+  "grayscale--975": {
+    "name": "Grayscale/975",
+    "description": "Primary text color",
+    "digiCSSVariable": "--digi--grayscale--975",
+    "digiRecursiveValue": "#212121",
+    "digiRecursiveValueDark": "#212121"
+  },
+  "background--pop-out-2-hypotes": {
+    "name": "Background/pop-out-2-hypotes",
+    "description": "hypotes tokens för ljusblåa (brand) bakgrunder.",
+    "digiCSSVariable": "--digi--color--background--pop-out-2-hypotes",
+    "digiRecursiveValue": "#E9F6FD",
+    "digiRecursiveValueDark": "#3A3A3A"
   }
 }