From b9c5deb944b16abf6187f2e9752c5222d0e62b39 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Wed, 28 Aug 2024 09:01:23 +0200 Subject: [PATCH] chore: added new global colors and fixed a wrong token reference (#2339) Co-authored-by: Lasse Febakke Straum <33222679+Febakke@users.noreply.github.com> --- .changeset/famous-pillows-cheat.md | 5 ++ .../primitives/modes/colors/dark/global.json | 54 +++++++++--------- .../primitives/modes/colors/light/global.json | 56 +++++++++---------- design-tokens/semantic/color.json | 4 +- design-tokens/semantic/style.json | 2 +- packages/cli/package.json | 2 +- .../design-tokens/semantic/color.json | 4 +- packages/cli/src/tokens/create/index.ts | 10 ++-- 8 files changed, 71 insertions(+), 66 deletions(-) create mode 100644 .changeset/famous-pillows-cheat.md diff --git a/.changeset/famous-pillows-cheat.md b/.changeset/famous-pillows-cheat.md new file mode 100644 index 0000000000..ab02e3de96 --- /dev/null +++ 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 index 1659c25913..48fecb2b9d 100644 --- 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,7 +77,7 @@ }, "4": { "$type": "color", - "$value": "#04480d" + "$value": "#03490d" }, "5": { "$type": "color", @@ -85,105 +85,105 @@ }, "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 index b44b9287b2..b622890fca 100644 --- a/design-tokens/primitives/modes/colors/light/global.json +++ b/design-tokens/primitives/modes/colors/light/global.json @@ -69,27 +69,27 @@ }, "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", @@ -97,93 +97,93 @@ }, "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 index 0c8157fb5b..377202453c 100644 --- 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 index 56a30a39ac..c76e7dbb2a 100644 --- a/design-tokens/semantic/style.json +++ b/design-tokens/semantic/style.json @@ -561,4 +561,4 @@ "$value": "{shadow.500}" } } -} +} \ No newline at end of file diff --git a/packages/cli/package.json b/packages/cli/package.json index c9e7ebaab4..c758dacedd 100644 --- 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 index ae9f4f5f20..7b491369b8 100644 --- 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 index 265a772e04..3593c87bcb 100644 --- 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' }); } }