chore: added new global colors and fixed a wrong token reference (#2339)

Co-authored-by: Lasse Febakke Straum <[email protected]>
digdir · Aug 28, 2024 · b9c5deb · b9c5deb
1 parent ca4c1b3
commit b9c5deb
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 66 deletions.
diff --git a/.changeset/famous-pillows-cheat.md b/.changeset/famous-pillows-cheat.md
@@ -0,0 +1,5 @@
+---
+'@digdir/designsystemet': minor
+---
+
+Fix design-token warning contrast color reference
diff --git a/design-tokens/primitives/modes/colors/dark/global.json b/design-tokens/primitives/modes/colors/dark/global.json
@@ -65,7 +65,7 @@
     "green": {
       "1": {
         "$type": "color",
-        "$value": "#022106"
+        "$value": "#012106"
       },
       "2": {
         "$type": "color",
@@ -77,113 +77,113 @@
       },
       "4": {
         "$type": "color",
-        "$value": "#04480d"
+        "$value": "#03490d"
       },
       "5": {
         "$type": "color",
         "$value": "#045810"
       },
       "6": {
         "$type": "color",
-        "$value": "#056011"
+        "$value": "#045f11"
       },
       "7": {
         "$type": "color",
-        "$value": "#068117"
+        "$value": "#068217"
       },
       "8": {
         "$type": "color",
-        "$value": "#90cc98"
+        "$value": "#93cb9b"
       },
       "9": {
         "$type": "color",
-        "$value": "#078818"
+        "$value": "#118c23"
       },
       "10": {
         "$type": "color",
-        "$value": "#067114"
+        "$value": "#057615"
       },
       "11": {
         "$type": "color",
-        "$value": "#045a10"
+        "$value": "#045f11"
       },
       "12": {
         "$type": "color",
-        "$value": "#5fb56b"
+        "$value": "#63b46f"
       },
       "13": {
         "$type": "color",
-        "$value": "#cfe9d3"
+        "$value": "#d1e9d4"
       },
       "contrast-1": {
         "$type": "color",
-        "$value": "#ffffff"
+        "$value": "#000000"
       },
       "contrast-2": {
         "$type": "color",
-        "$value": "#f9fcf9"
+        "$value": "#010401"
       }
     },
     "orange": {
       "1": {
         "$type": "color",
-        "$value": "#2e1508"
+        "$value": "#2d1507"
       },
       "2": {
         "$type": "color",
-        "$value": "#3a1b0a"
+        "$value": "#391b09"
       },
       "3": {
         "$type": "color",
-        "$value": "#50240d"
+        "$value": "#4e250c"
       },
       "4": {
         "$type": "color",
-        "$value": "#652e10"
+        "$value": "#633010"
       },
       "5": {
         "$type": "color",
-        "$value": "#7a3814"
+        "$value": "#783a13"
       },
       "6": {
         "$type": "color",
-        "$value": "#863d16"
+        "$value": "#833f15"
       },
       "7": {
         "$type": "color",
-        "$value": "#b5531e"
+        "$value": "#b2551c"
       },
       "8": {
         "$type": "color",
-        "$value": "#e6b398"
+        "$value": "#e0b69c"
       },
       "9": {
         "$type": "color",
-        "$value": "#ba541e"
+        "$value": "#bc6028"
       },
       "10": {
         "$type": "color",
-        "$value": "#994619"
+        "$value": "#a24d1a"
       },
       "11": {
         "$type": "color",
-        "$value": "#7a3814"
+        "$value": "#833f15"
       },
       "12": {
         "$type": "color",
-        "$value": "#db9169"
+        "$value": "#d29671"
       },
       "13": {
         "$type": "color",
-        "$value": "#f4ddd0"
+        "$value": "#f1ded3"
       },
       "contrast-1": {
         "$type": "color",
-        "$value": "#ffffff"
+        "$value": "#000000"
       },
       "contrast-2": {
         "$type": "color",
-        "$value": "#fcf8f6"
+        "$value": "#060301"
       }
     },
     "purple": {

diff --git a/design-tokens/primitives/modes/colors/light/global.json b/design-tokens/primitives/modes/colors/light/global.json
@@ -69,121 +69,121 @@
       },
       "2": {
         "$type": "color",
-        "$value": "#ecf6ed"
+        "$value": "#edf6ee"
       },
       "3": {
         "$type": "color",
-        "$value": "#cfe9d3"
+        "$value": "#d1e9d4"
       },
       "4": {
         "$type": "color",
-        "$value": "#b3dcb8"
+        "$value": "#b5dbba"
       },
       "5": {
         "$type": "color",
-        "$value": "#95ce9d"
+        "$value": "#96cd9e"
       },
       "6": {
         "$type": "color",
-        "$value": "#8bca94"
+        "$value": "#8fc997"
       },
       "7": {
         "$type": "color",
-        "$value": "#189528"
+        "$value": "#229532"
       },
       "8": {
         "$type": "color",
         "$value": "#045a10"
       },
       "9": {
         "$type": "color",
-        "$value": "#078D19"
+        "$value": "#068718"
       },
       "10": {
         "$type": "color",
-        "$value": "#067615"
+        "$value": "#057114"
       },
       "11": {
         "$type": "color",
-        "$value": "#056011"
+        "$value": "#045a10"
       },
       "12": {
         "$type": "color",
-        "$value": "#067314"
+        "$value": "#057315"
       },
       "13": {
         "$type": "color",
-        "$value": "#033409"
+        "$value": "#023409"
       },
       "contrast-1": {
         "$type": "color",
-        "$value": "#000000"
+        "$value": "#ffffff"
       },
       "contrast-2": {
         "$type": "color",
-        "$value": "#000401"
+        "$value": "#f9fcf9"
       }
     },
     "orange": {
       "1": {
         "$type": "color",
-        "$value": "#fffefd"
+        "$value": "#fffefe"
       },
       "2": {
         "$type": "color",
-        "$value": "#fbf1ec"
+        "$value": "#f9f2ed"
       },
       "3": {
         "$type": "color",
-        "$value": "#f4ddd0"
+        "$value": "#f1ded3"
       },
       "4": {
         "$type": "color",
-        "$value": "#eecab7"
+        "$value": "#e9cbb8"
       },
       "5": {
         "$type": "color",
-        "$value": "#e7b69c"
+        "$value": "#e1b9a0"
       },
       "6": {
         "$type": "color",
-        "$value": "#e5b094"
+        "$value": "#deb296"
       },
       "7": {
         "$type": "color",
-        "$value": "#cc632b"
+        "$value": "#c06b36"
       },
       "8": {
         "$type": "color",
-        "$value": "#7e3a15"
+        "$value": "#7c3b14"
       },
       "9": {
         "$type": "color",
-        "$value": "#CA5C21"
+        "$value": "#B8581D"
       },
       "10": {
         "$type": "color",
-        "$value": "#a94d1c"
+        "$value": "#9a4918"
       },
       "11": {
         "$type": "color",
-        "$value": "#8a3f17"
+        "$value": "#7c3b14"
       },
       "12": {
         "$type": "color",
-        "$value": "#a1491a"
+        "$value": "#9e4b19"
       },
       "13": {
         "$type": "color",
-        "$value": "#47210c"
+        "$value": "#47220b"
       },
       "contrast-1": {
         "$type": "color",
-        "$value": "#000000"
+        "$value": "#ffffff"
       },
       "contrast-2": {
         "$type": "color",
-        "$value": "#0d0602"
+        "$value": "#fdfbf9"
       }
     },
     "purple": {

diff --git a/design-tokens/semantic/color.json b/design-tokens/semantic/color.json
@@ -551,11 +551,11 @@
       },
       "contrast-default": {
         "$type": "color",
-        "$value": "{global.yellow.contrast-1}"
+        "$value": "{global.orange.contrast-1}"
       },
       "contrast-subtle": {
         "$type": "color",
-        "$value": "{global.yellow.contrast-2}"
+        "$value": "{global.orange.contrast-2}"
       }
     },
     "focus": {

diff --git a/design-tokens/semantic/style.json b/design-tokens/semantic/style.json
@@ -561,4 +561,4 @@
       "$value": "{shadow.500}"
     }
   }
-}
+}
diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet",
-  "version": "0.1.0-next.30",
+  "version": "0.1.0-next.31",
   "description": "CLI for Designsystemet",
   "author": "Designsystemet team",
   "repository": {

diff --git a/packages/cli/src/init/template/default-files/design-tokens/semantic/color.json b/packages/cli/src/init/template/default-files/design-tokens/semantic/color.json
@@ -551,11 +551,11 @@
       },
       "contrast-default": {
         "$type": "color",
-        "$value": "{global.yellow.contrast-1}"
+        "$value": "{global.orange.contrast-1}"
       },
       "contrast-subtle": {
         "$type": "color",
-        "$value": "{global.yellow.contrast-2}"
+        "$value": "{global.orange.contrast-2}"
       }
     },
     "focus": {

diff --git a/packages/cli/src/tokens/create/index.ts b/packages/cli/src/tokens/create/index.ts
@@ -98,7 +98,7 @@ const generateThemeTokens = (theme: ColorMode, colors: Colors): Tokens => {
 const generateColorModeFile = (folder: ColorMode, name: Collection, tokens: Tokens, outPath: string): File => {
   const path = `${outPath}/primitives/modes/colors/${folder}`;
   return {
-    data: `${JSON.stringify(tokens, null, 2)}\n`,
+    data: JSON.stringify(tokens, null, 2),
     path,
     filePath: `${path}/${name}.json`,
   };
@@ -107,7 +107,7 @@ const generateColorModeFile = (folder: ColorMode, name: Collection, tokens: Toke
 const generateTypographyFile = (folder: TypographyModes, name: Collection, tokens: Tokens, outPath: string): File => {
   const path = `${outPath}/primitives/modes/typography/${folder}`;
   return {
-    data: `${JSON.stringify(tokens, null, 2)}\n`,
+    data: JSON.stringify(tokens, null, 2),
     path,
     filePath: `${path}/${name}.json`,
   };
@@ -162,7 +162,7 @@ export const createTokens = async (opts: CreateTokens) => {
     await fs.writeFile(path.join(targetDir, '$themes.json'), JSON.stringify($theme, null, 2));
     await fs.writeFile(path.join(targetDir, '$metadata.json'), JSON.stringify($metadata, null, 2));
 
-    console.log(`Copy files to ${targetDir}`);
+    console.log(`Copying default files to ${targetDir}`);
     await fs.cp(DEFAULT_FILES_PATH, targetDir, {
       recursive: true,
     });
@@ -179,10 +179,10 @@ export const createTokens = async (opts: CreateTokens) => {
     ];
 
     for (const file of files) {
-      const path_ = path.resolve(file.path);
+      const dirPath = path.resolve(file.path);
       const filePath = path.resolve(file.filePath);
       console.log(`Writing file ${filePath}`);
-      await fs.mkdir(path_, { recursive: true });
+      await fs.mkdir(dirPath, { recursive: true });
       await fs.writeFile(filePath, file.data, { encoding: 'utf-8' });
     }
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -561,4 +561,4 @@ @@
           "$value": "{shadow.500}"
         }
       }
-    }
+    }