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

✨(tokens) generate css utility classes

Browse Source 
These were the missing parts in order to use every design tokens
of Cunningham. Including: spacing, font weight, size, family, and
colors. In order to be really versatile and to allow users to
define new design tokens I had to re-organize the way those tokens
are sub divided in sub objects in cunningham.ts file. That's why
sub division are created for theme.typ.sizes for instance.
This commit is contained in:
Nathan Vasse
2023-01-19 15:30:23 +01:00
committed by NathanVss
parent 3bb74d8594
commit b908136224
20 changed files with 769 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/tokens/src/bin/Generators/CssGenerator.spec.ts
View File

@@ -23,10 +23,20 @@ describe("CssGenerator", () => {
expect(fs.existsSync(cssTokensFile)).toEqual(false);
await run(["", "", "-g", "css", opt, "html"]);
expect(fs.existsSync(cssTokensFile)).toEqual(true);
expect(fs.readFileSync(cssTokensFile).toString()).toEqual(`html {
\t--c--theme--colors--primary: #055FD2;
\t--c--theme--colors--secondary: #DA0000;
}`);
expect(fs.readFileSync(cssTokensFile).toString()).toEqual(
fs
.readFileSync(
path.join(
__dirname,
"..",
"tests",
"assets",
"expected-default-" + Config.tokenFilename + ".css"
)
)
.toString()
.replace(":root", "html")
);
};
it("Runs with -s options.", async () => {

129
packages/tokens/src/bin/Generators/CssGenerator.ts
View File

@@ -3,6 +3,7 @@ import { flatify } from "Utils/Flatify";
import Config from "Config";
import { Generator } from "Generators/index";
import { put } from "Utils/Files";
import { Tokens } from "TokensGenerator";
export const cssGenerator: Generator = async (tokens, opts) => {
const flatTokens = flatify(tokens, Config.sass.varSeparator);
@@ -11,8 +12,134 @@ export const cssGenerator: Generator = async (tokens, opts) => {
acc + `\t--${Config.sass.varPrefix}${token}: ${flatTokens[token]};\n`
);
}, "");
const cssContent = `${opts.selector} {\n${cssVars}}`;
const cssContent = `${opts.selector} {\n${cssVars}} ${generateClasses(
tokens
)}`;
const dest = path.join(opts.path, Config.tokenFilename + ".css");
put(dest, cssContent);
};
function generateClasses(tokens: Tokens) {
return [
...generateColorClasses(tokens),
...generateFontClasses(tokens),
...generateSpacingClasses(tokens),
].join("\n");
}
function generateColorClasses(tokens: Tokens) {
return [...generateClrClasses(tokens), ...generateBgClasses(tokens)];
}
/**
* Generate background color classes.
* Example: .bg-primary-500
*
* @param tokens
*/
function generateBgClasses(tokens: Tokens) {
return Object.keys(tokens.theme.colors).map(
(key) =>
`.bg-${key} { background-color: var(--${Config.sass.varPrefix}theme--colors--${key}); }`
);
}
/**
* Generate color classes.
* Example: .clr-primary-500
*
* @param tokens
*/
function generateClrClasses(tokens: Tokens) {
return Object.keys(tokens.theme.colors).map(
(key) =>
`.clr-${key} { color: var(--${Config.sass.varPrefix}theme--colors--${key}); }`
);
}
function generateFontClasses(tokens: Tokens) {
return [
...generateFwClasses(tokens),
...generateFsClasses(tokens),
...generateFClasses(tokens),
];
}
/**
* Generate font weight classes.
* Example: fw-bold
*
* @param tokens
*/
function generateFwClasses(tokens: Tokens) {
return Object.keys(tokens.theme.font.weights).map(
(key) =>
`.fw-${key} { font-weight: var(--${Config.sass.varPrefix}theme--font--weights--${key}); }`
);
}
/**
* Generate font size classes.
* Example: fs-m
*
* @param tokens
*/
function generateFsClasses(tokens: Tokens) {
return Object.keys(tokens.theme.font.sizes).map(
(key) =>
`.fs-${key} { font-size: var(--${Config.sass.varPrefix}theme--font--sizes--${key}); }`
);
}
/**
* Generate font family classes.
* Example: f-base
*
* @param tokens
*/
function generateFClasses(tokens: Tokens) {
return Object.keys(tokens.theme.font.families).map(
(key) =>
`.f-${key} { font-family: var(--${Config.sass.varPrefix}theme--font--families--${key}); }`
);
}
function generateSpacingClasses(tokens: Tokens) {
return [...generateMarginClasses(tokens), ...generatePaddingClasses(tokens)];
}
/**
* Generate margins classes.
* Example: m-l, mr-l, mb-l, ml-l, mt-l
*
* @param tokens
*/
function generateMarginClasses(tokens: Tokens) {
return Object.keys(tokens.theme.spacings).map(
(key) =>
`.m-${key} { margin: var(--${Config.sass.varPrefix}theme--spacings--${key}); }` +
`.mb-${key} { margin-bottom: var(--${Config.sass.varPrefix}theme--spacings--${key}); }` +
`.mt-${key} { margin-top: var(--${Config.sass.varPrefix}theme--spacings--${key}); }` +
`.ml-${key} { margin-left: var(--${Config.sass.varPrefix}theme--spacings--${key}); }` +
`.mr-${key} { margin-right: var(--${Config.sass.varPrefix}theme--spacings--${key}); }`
);
}
/**
* Generate paddings classes.
* Example: p-l, pr-l, pb-l, pl-l, pt-l
*
* @param tokens
*/
function generatePaddingClasses(tokens: Tokens) {
return Object.keys(tokens.theme.spacings).map(
(key) =>
`.p-${key} { padding: var(--${Config.sass.varPrefix}theme--spacings--${key}); }` +
`.pb-${key} { padding-bottom: var(--${Config.sass.varPrefix}theme--spacings--${key}); }` +
`.pt-${key} { padding-top: var(--${Config.sass.varPrefix}theme--spacings--${key}); }` +
`.pl-${key} { padding-left: var(--${Config.sass.varPrefix}theme--spacings--${key}); }` +
`.pr-${key} { padding-right: var(--${Config.sass.varPrefix}theme--spacings--${key}); }`
);
}

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()).toEqual(
`export const tokens = {"theme":{"colors":{"primary":"#055FD2","secondary":"#DA0000"}}};`
`export const tokens = {"theme":{"colors":{"primary":"#055FD2","secondary":"#DA0000"},"font":{"sizes":{"m":"1rem"},"weights":{"medium":400},"families":{"base":"Roboto"}},"spacings":{"s":"1rem"}}};`
);
});
});

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()).toEqual(
`export const tokens = {"theme":{"colors":{"primary":"#055FD2","secondary":"#DA0000"}}};`
`export const tokens = {"theme":{"colors":{"primary":"#055FD2","secondary":"#DA0000"},"font":{"sizes":{"m":"1rem"},"weights":{"medium":400},"families":{"base":"Roboto"}},"spacings":{"s":"1rem"}}};`
);
});
});

12
packages/tokens/src/bin/TokensGenerator.ts
View File

@@ -1,14 +1,8 @@
interface ThemeShape {
colors: {
[key: string]: string;
};
}
import cunningham from "cunningham";
export interface ConfigShape {
theme: ThemeShape;
}
export type ConfigShape = typeof cunningham;
export type Tokens = Record<PropertyKey, unknown>;
export type Tokens = Record<PropertyKey, unknown> & ConfigShape;
export const tokensGenerator = (config: ConfigShape): Tokens => {
return {

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

@@ -4,5 +4,19 @@ module.exports = {
primary: "#055FD2",
secondary: "#DA0000",
},
font: {
sizes: {
m: "1rem",
},
weights: {
medium: 400,
},
families: {
base: "Roboto",
},
},
spacings: {
s: "1rem",
},
},
};

30
packages/tokens/src/bin/cunningham.ts
View File

@@ -89,7 +89,7 @@ const colorsDanger = {
"danger-900": "#5C0000",
};
const typoSizes = {
const fontSizes = {
h1: "1.75rem",
h2: "1.375rem",
h3: "1.125rem;",
@@ -101,7 +101,7 @@ const typoSizes = {
s: "0.6875rem",
};
const typoWeights = {
const fontWeights = {
thin: 100,
regular: 300,
medium: 400,
@@ -110,18 +110,18 @@ const typoWeights = {
black: 900,
};
const typeFamilies = {
"font-base": "Roboto",
"font-accent": "Roboto",
const fontFamilies = {
base: "Roboto",
accent: "Roboto",
};
const spacings = {
xl: "64px",
l: "48px",
b: "24px",
s: "16px",
t: "8px",
st: "4px",
xl: "4rem",
l: "3rem",
b: "1.625rem",
s: "1rem",
t: "0.5rem",
st: "0.25rem",
};
const transitions = {
@@ -142,10 +142,10 @@ export default {
...colorsWarning,
...colorsDanger,
},
typo: {
...typoSizes,
...typoWeights,
...typeFamilies,
font: {
sizes: fontSizes,
weights: fontWeights,
families: fontFamilies,
},
spacings,
transitions,

45
packages/tokens/src/bin/tests/Cunningham.spec.ts
View File

@@ -55,10 +55,17 @@ describe("Cunningham Bin", () => {
expect(fs.existsSync(cssTokensFile)).toEqual(false);
await run(["", "", "-g", "css"]);
expect(fs.existsSync(cssTokensFile)).toEqual(true);
expect(fs.readFileSync(cssTokensFile).toString()).toEqual(`:root {
\t--c--theme--colors--primary: #055FD2;
\t--c--theme--colors--secondary: #DA0000;
}`);
expect(fs.readFileSync(cssTokensFile).toString()).toEqual(
fs
.readFileSync(
path.join(
__dirname,
"assets",
"expected-default-" + Config.tokenFilename + ".css"
)
)
.toString()
);
});
it("Runs with existing JS config file using local values.", async () => {
@@ -76,10 +83,17 @@ describe("Cunningham Bin", () => {
await run(["", "", "-g", "css"]);
expect(fs.existsSync(cssTokensFile)).toEqual(true);
expect(fs.readFileSync(cssTokensFile).toString()).toEqual(`:root {
\t--c--theme--colors--primary: AntiqueWhite;
\t--c--theme--colors--secondary: #DA0000;
}`);
expect(fs.readFileSync(cssTokensFile).toString()).toEqual(
fs
.readFileSync(
path.join(
__dirname,
"assets",
"expected-js-" + Config.tokenFilename + ".css"
)
)
.toString()
);
});
it("Runs with existing TS config file using local values.", async () => {
@@ -111,10 +125,17 @@ describe("Cunningham Bin", () => {
expect(fs.existsSync(cssTokensFile)).toEqual(false);
await run(["", "", "-g", "css", opt, outputDir]);
expect(fs.existsSync(cssTokensFile)).toEqual(true);
expect(fs.readFileSync(cssTokensFile).toString()).toEqual(`:root {
\t--c--theme--colors--primary: #055FD2;
\t--c--theme--colors--secondary: #DA0000;
}`);
expect(fs.readFileSync(cssTokensFile).toString()).toEqual(
fs
.readFileSync(
path.join(
__dirname,
"assets",
"expected-default-" + Config.tokenFilename + ".css"
)
)
.toString()
);
};
it("Runs with -o options.", async () => {

16
packages/tokens/src/bin/tests/assets/expected-default-cunningham-tokens.css Normal file
View File

@@ -0,0 +1,16 @@
:root {
--c--theme--colors--primary: #055FD2;
--c--theme--colors--secondary: #DA0000;
--c--theme--font--sizes--m: 1rem;
--c--theme--font--weights--medium: 400;
--c--theme--font--families--base: Roboto;
--c--theme--spacings--s: 1rem;
} .clr-primary { color: var(--c--theme--colors--primary); }
.clr-secondary { color: var(--c--theme--colors--secondary); }
.bg-primary { background-color: var(--c--theme--colors--primary); }
.bg-secondary { background-color: var(--c--theme--colors--secondary); }
.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); }
.m-s { margin: var(--c--theme--spacings--s); }.mb-s { margin-bottom: var(--c--theme--spacings--s); }.mt-s { margin-top: var(--c--theme--spacings--s); }.ml-s { margin-left: var(--c--theme--spacings--s); }.mr-s { margin-right: var(--c--theme--spacings--s); }
.p-s { padding: var(--c--theme--spacings--s); }.pb-s { padding-bottom: var(--c--theme--spacings--s); }.pt-s { padding-top: var(--c--theme--spacings--s); }.pl-s { padding-left: var(--c--theme--spacings--s); }.pr-s { padding-right: var(--c--theme--spacings--s); }

16
packages/tokens/src/bin/tests/assets/expected-js-cunningham-tokens.css Normal file
View File

@@ -0,0 +1,16 @@
:root {
--c--theme--colors--primary: AntiqueWhite;
--c--theme--colors--secondary: #DA0000;
--c--theme--font--sizes--m: 1rem;
--c--theme--font--weights--medium: 400;
--c--theme--font--families--base: Roboto;
--c--theme--spacings--s: 1rem;
} .clr-primary { color: var(--c--theme--colors--primary); }
.clr-secondary { color: var(--c--theme--colors--secondary); }
.bg-primary { background-color: var(--c--theme--colors--primary); }
.bg-secondary { background-color: var(--c--theme--colors--secondary); }
.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); }
.m-s { margin: var(--c--theme--spacings--s); }.mb-s { margin-bottom: var(--c--theme--spacings--s); }.mt-s { margin-top: var(--c--theme--spacings--s); }.ml-s { margin-left: var(--c--theme--spacings--s); }.mr-s { margin-right: var(--c--theme--spacings--s); }
.p-s { padding: var(--c--theme--spacings--s); }.pb-s { padding-bottom: var(--c--theme--spacings--s); }.pt-s { padding-top: var(--c--theme--spacings--s); }.pl-s { padding-left: var(--c--theme--spacings--s); }.pr-s { padding-right: var(--c--theme--spacings--s); }