From fb2fb3e107f49beeaa818ec9e7fc703cc7fca6d5 Mon Sep 17 00:00:00 2001 From: jbpenrath Date: Wed, 3 May 2023 15:26:22 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5(tokens)=20remove=20colors=20sub=20?= =?UTF-8?q?maps?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Create color sub maps seems to be a good idea but in fact was not. In fact if with need to create token sub map this structure should appear within the tokens module. --- .changeset/many-taxis-promise.md | 5 ++++ .../src/bin/Generators/JsGenerator.spec.ts | 2 +- .../src/bin/Generators/SassGenerator.spec.ts | 5 ++-- .../src/bin/Generators/SassGenerator.ts | 25 +------------------ .../src/bin/Generators/TsGenerator.spec.ts | 2 +- .../tokens/src/bin/__mocks__/cunningham.ts | 1 + .../expected-default-cunningham-tokens.css | 1 + .../assets/expected-js-cunningham-tokens.css | 1 + ...with-utility-classes-cunningham-tokens.css | 3 +++ 9 files changed, 16 insertions(+), 29 deletions(-) create mode 100644 .changeset/many-taxis-promise.md diff --git a/.changeset/many-taxis-promise.md b/.changeset/many-taxis-promise.md new file mode 100644 index 0000000..bf2c97a --- /dev/null +++ b/.changeset/many-taxis-promise.md @@ -0,0 +1,5 @@ +--- +"@openfun/cunningham-tokens": minor +--- + +Do not generate sass sub maps diff --git a/packages/tokens/src/bin/Generators/JsGenerator.spec.ts b/packages/tokens/src/bin/Generators/JsGenerator.spec.ts index 3068d80..28603e0 100644 --- a/packages/tokens/src/bin/Generators/JsGenerator.spec.ts +++ b/packages/tokens/src/bin/Generators/JsGenerator.spec.ts @@ -24,7 +24,7 @@ describe("JsGenerator", () => { await run(["", "", "-g", "js"]); expect(fs.existsSync(tokensFile)).toEqual(true); expect(fs.readFileSync(tokensFile).toString()).toMatchInlineSnapshot(` - "export const tokens = {"theme":{"colors":{"primary":"#055FD2","secondary":"#DA0000","ternary-900":"#022858"},"font":{"sizes":{"m":"1rem"},"weights":{"medium":400},"families":{"base":"Roboto"}},"spacings":{"s":"1rem"},"transitions":{"ease":"linear"}}}; + "export const tokens = {"theme":{"colors":{"primary":"#055FD2","secondary":"#DA0000","ternary-900":"#022858","ogre-odor-is-orange-indeed":"#FD5240"},"font":{"sizes":{"m":"1rem"},"weights":{"medium":400},"families":{"base":"Roboto"}},"spacings":{"s":"1rem"},"transitions":{"ease":"linear"}}}; " `); }); diff --git a/packages/tokens/src/bin/Generators/SassGenerator.spec.ts b/packages/tokens/src/bin/Generators/SassGenerator.spec.ts index f7b2c32..d0a0d0f 100644 --- a/packages/tokens/src/bin/Generators/SassGenerator.spec.ts +++ b/packages/tokens/src/bin/Generators/SassGenerator.spec.ts @@ -28,9 +28,8 @@ describe("SassGenerator", () => { "$colors: ( 'primary': #055FD2, 'secondary': #DA0000, - 'ternary': ( - '900': #022858 - ) + 'ternary-900': #022858, + 'ogre-odor-is-orange-indeed': #FD5240 ); $fontFamilies: ( 'base': Roboto diff --git a/packages/tokens/src/bin/Generators/SassGenerator.ts b/packages/tokens/src/bin/Generators/SassGenerator.ts index 0a6f69b..12e4a07 100644 --- a/packages/tokens/src/bin/Generators/SassGenerator.ts +++ b/packages/tokens/src/bin/Generators/SassGenerator.ts @@ -23,12 +23,7 @@ const generateSassMaps = (tokens: Tokens) => { // for a color with shades. // Example: `primary-500: #000` will return `primary: (500: #000)` const generateColorsSassMap = (tokens: Tokens) => { - const colors = Object.entries(tokens.theme.colors).reduce( - propertiesReducer, - {} - ); - - return `$colors: ${JSONToSassMap(colors)};`; + return `$colors: ${JSONToSassMap(tokens.theme.colors)};`; }; const generateFontSassMap = (tokens: Tokens) => { return [ @@ -72,21 +67,3 @@ function JSONToSassMap(json: Object) { .replace(/}/g, ")") .replace(/"/g, ""); } - -function propertiesReducer( - propertyMap: Record>, - [key, value]: [string, string] -) { - const [property, subProperty] = key.split("-"); - - if (subProperty) { - if (propertyMap[property] === undefined) { - propertyMap[property] = {}; - } - (propertyMap[property] as Record)[subProperty] = value; - } else { - propertyMap[property] = value; - } - - return propertyMap; -} diff --git a/packages/tokens/src/bin/Generators/TsGenerator.spec.ts b/packages/tokens/src/bin/Generators/TsGenerator.spec.ts index 4f97cf9..2151c5f 100644 --- a/packages/tokens/src/bin/Generators/TsGenerator.spec.ts +++ b/packages/tokens/src/bin/Generators/TsGenerator.spec.ts @@ -24,7 +24,7 @@ describe("TsGenerator", () => { await run(["", "", "-g", "ts"]); expect(fs.existsSync(tokensFile)).toEqual(true); expect(fs.readFileSync(tokensFile).toString()).toMatchInlineSnapshot(` - "export const tokens = {"theme":{"colors":{"primary":"#055FD2","secondary":"#DA0000","ternary-900":"#022858"},"font":{"sizes":{"m":"1rem"},"weights":{"medium":400},"families":{"base":"Roboto"}},"spacings":{"s":"1rem"},"transitions":{"ease":"linear"}}}; + "export const tokens = {"theme":{"colors":{"primary":"#055FD2","secondary":"#DA0000","ternary-900":"#022858","ogre-odor-is-orange-indeed":"#FD5240"},"font":{"sizes":{"m":"1rem"},"weights":{"medium":400},"families":{"base":"Roboto"}},"spacings":{"s":"1rem"},"transitions":{"ease":"linear"}}}; " `); }); diff --git a/packages/tokens/src/bin/__mocks__/cunningham.ts b/packages/tokens/src/bin/__mocks__/cunningham.ts index 031fe23..09769f3 100644 --- a/packages/tokens/src/bin/__mocks__/cunningham.ts +++ b/packages/tokens/src/bin/__mocks__/cunningham.ts @@ -4,6 +4,7 @@ module.exports = { primary: "#055FD2", secondary: "#DA0000", "ternary-900": "#022858", + "ogre-odor-is-orange-indeed": "#FD5240", }, font: { sizes: { diff --git a/packages/tokens/src/bin/tests/assets/expected-default-cunningham-tokens.css b/packages/tokens/src/bin/tests/assets/expected-default-cunningham-tokens.css index 650e0c0..adbbc8a 100644 --- a/packages/tokens/src/bin/tests/assets/expected-default-cunningham-tokens.css +++ b/packages/tokens/src/bin/tests/assets/expected-default-cunningham-tokens.css @@ -2,6 +2,7 @@ --c--theme--colors--primary: #055FD2; --c--theme--colors--secondary: #DA0000; --c--theme--colors--ternary-900: #022858; + --c--theme--colors--ogre-odor-is-orange-indeed: #FD5240; --c--theme--font--sizes--m: 1rem; --c--theme--font--weights--medium: 400; --c--theme--font--families--base: Roboto; diff --git a/packages/tokens/src/bin/tests/assets/expected-js-cunningham-tokens.css b/packages/tokens/src/bin/tests/assets/expected-js-cunningham-tokens.css index 0c774e6..50af457 100644 --- a/packages/tokens/src/bin/tests/assets/expected-js-cunningham-tokens.css +++ b/packages/tokens/src/bin/tests/assets/expected-js-cunningham-tokens.css @@ -2,6 +2,7 @@ --c--theme--colors--primary: AntiqueWhite; --c--theme--colors--secondary: #DA0000; --c--theme--colors--ternary-900: #022858; + --c--theme--colors--ogre-odor-is-orange-indeed: #FD5240; --c--theme--font--sizes--m: 1rem; --c--theme--font--weights--medium: 400; --c--theme--font--families--base: Roboto; diff --git a/packages/tokens/src/bin/tests/assets/expected-with-utility-classes-cunningham-tokens.css b/packages/tokens/src/bin/tests/assets/expected-with-utility-classes-cunningham-tokens.css index b58613d..2a71324 100644 --- a/packages/tokens/src/bin/tests/assets/expected-with-utility-classes-cunningham-tokens.css +++ b/packages/tokens/src/bin/tests/assets/expected-with-utility-classes-cunningham-tokens.css @@ -2,6 +2,7 @@ --c--theme--colors--primary: #055FD2; --c--theme--colors--secondary: #DA0000; --c--theme--colors--ternary-900: #022858; + --c--theme--colors--ogre-odor-is-orange-indeed: #FD5240; --c--theme--font--sizes--m: 1rem; --c--theme--font--weights--medium: 400; --c--theme--font--families--base: Roboto; @@ -10,9 +11,11 @@ } .clr-primary { color: var(--c--theme--colors--primary); } .clr-secondary { color: var(--c--theme--colors--secondary); } .clr-ternary-900 { color: var(--c--theme--colors--ternary-900); } +.clr-ogre-odor-is-orange-indeed { color: var(--c--theme--colors--ogre-odor-is-orange-indeed); } .bg-primary { background-color: var(--c--theme--colors--primary); } .bg-secondary { background-color: var(--c--theme--colors--secondary); } .bg-ternary-900 { background-color: var(--c--theme--colors--ternary-900); } +.bg-ogre-odor-is-orange-indeed { background-color: var(--c--theme--colors--ogre-odor-is-orange-indeed); } .fw-medium { font-weight: var(--c--theme--font--weights--medium); } .fs-m { font-size: var(--c--theme--font--sizes--m); } .f-base { font-family: var(--c--theme--font--families--base); }