studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🔥(tokens) remove colors sub maps

Browse Source 
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.
This commit is contained in:
jbpenrath
2023-05-03 15:26:22 +02:00
committed by Jean-Baptiste PENRATH
parent a9625eb1c2
commit fb2fb3e107
9 changed files with 16 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/tokens/src/bin/Generators/JsGenerator.spec.ts
View File

@@ -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"}}};
"
`);
});

5
packages/tokens/src/bin/Generators/SassGenerator.spec.ts
View File

@@ -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

25
packages/tokens/src/bin/Generators/SassGenerator.ts
View File

@@ -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<string, string | Record<string, string>>,
[key, value]: [string, string]
) {
const [property, subProperty] = key.split("-");
if (subProperty) {
if (propertyMap[property] === undefined) {
propertyMap[property] = {};
}
(propertyMap[property] as Record<string, string>)[subProperty] = value;
} else {
propertyMap[property] = value;
}
return propertyMap;
}

2
packages/tokens/src/bin/Generators/TsGenerator.spec.ts
View File

@@ -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"}}};
"
`);
});

1
packages/tokens/src/bin/__mocks__/cunningham.ts
View File

@@ -4,6 +4,7 @@ module.exports = {
primary: "#055FD2",
secondary: "#DA0000",
"ternary-900": "#022858",
"ogre-odor-is-orange-indeed": "#FD5240",
},
font: {
sizes: {

1
packages/tokens/src/bin/tests/assets/expected-default-cunningham-tokens.css
View File

@@ -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;

1
packages/tokens/src/bin/tests/assets/expected-js-cunningham-tokens.css
View File

@@ -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;

3
packages/tokens/src/bin/tests/assets/expected-with-utility-classes-cunningham-tokens.css
View File

@@ -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); }