npm - @designsystem-se/af - Versions diffs - 38.2.1-beta.0 → 38.2.1-beta.dark-mode-css-labb - Mend

@designsystem-se/af 38.2.1-beta.0 → 38.2.1-beta.dark-mode-css-labb

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (421) hide show

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

@@ -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å &lt;body&gt; 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"
   }
 }