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

✨(theme) add themes management

Browse Source 
This is made in order to be able to handle natively multiple themes
for the future light/dark themes and also allow consumers to create
their own.
This commit is contained in:
Nathan Vasse
2023-09-26 11:38:22 +02:00
committed by NathanVss
parent f232ae1e44
commit cce8eccf5b
24 changed files with 370 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,7 +9,7 @@ jest.mock("../Paths", () => ({
}));
describe("CssGenerator", () => {
beforeAll(() => {
beforeEach(() => {
jest.spyOn(console, "log").mockImplementation(() => {});
cleanup(__dirname);
});
@@ -23,25 +23,34 @@ 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(
fs
.readFileSync(
path.join(
__dirname,
"..",
"tests",
"assets",
"expected-default-" + Config.tokenFilename + ".css",
),
)
.toString()
.replace(":root", "html"),
);
expect(fs.readFileSync(cssTokensFile).toString()).toMatchInlineSnapshot(`
"html {
--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;
--c--theme--spacings--s: 1rem;
--c--theme--transitions--ease: linear;
--c--theme--input--border-color: var(--c--theme--colors--ternary-900);
--c--components--button--font-family: Times New Roman;
}
.cunningham-theme--dark{
--c--theme--colors--primary: black;
}
.cunningham-theme--custom{
--c--theme--colors--primary: green;
}
"
`);
};
it("Runs with -s options.", async () => {
await testSelector("-s");
});
it("Runs with --selector options.", async () => {
await testSelector("--selector");
});
@@ -50,19 +59,42 @@ describe("CssGenerator", () => {
expect(fs.existsSync(cssTokensFile)).toEqual(false);
await run(["", "", "-g", "css", "-s", "html", "--utility-classes"]);
expect(fs.existsSync(cssTokensFile)).toEqual(true);
expect(fs.readFileSync(cssTokensFile).toString()).toEqual(
fs
.readFileSync(
path.join(
__dirname,
"..",
"tests",
"assets",
"expected-with-utility-classes-" + Config.tokenFilename + ".css",
),
)
.toString()
.replace(":root", "html"),
);
expect(fs.readFileSync(cssTokensFile).toString()).toMatchInlineSnapshot(`
"html {
--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;
--c--theme--spacings--s: 1rem;
--c--theme--transitions--ease: linear;
--c--theme--input--border-color: var(--c--theme--colors--ternary-900);
--c--components--button--font-family: Times New Roman;
}
.cunningham-theme--dark{
--c--theme--colors--primary: black;
}
.cunningham-theme--custom{
--c--theme--colors--primary: green;
} .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);
letter-spacing: var(--c--theme--font--letterspacings--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); }
"
`);
});
});

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

@@ -5,6 +5,8 @@ import { Generator, resolveRefs } from "Generators/index";
import { put } from "Utils/Files";
import { Tokens } from "TokensGenerator";
export const THEME_CLASSNAME_PREFIX = "cunningham-theme--";
export const cssGenerator: Generator = async (tokens, opts) => {
// Replace refs by CSS variables.
tokens = resolveRefs(tokens, (ref) => {
@@ -15,7 +17,9 @@ export const cssGenerator: Generator = async (tokens, opts) => {
return `var(${cssVar})`;
});
const flatTokens = flatify(tokens, Config.sass.varSeparator);
const { default: defaultTheme, ...otherThemes } = tokens.themes;
const flatTokens = flatify(defaultTheme, Config.sass.varSeparator);
const cssVars = Object.keys(flatTokens).reduce((acc, token) => {
return (
acc +
@@ -25,6 +29,18 @@ export const cssGenerator: Generator = async (tokens, opts) => {
);
}, "");
let cssContent = `${opts.selector} {\n${cssVars}}`;
Object.entries(otherThemes).forEach(([themeName, themeTokens]) => {
const flatTokensOther = flatify(themeTokens, Config.sass.varSeparator);
const themeCssVars = Object.keys(flatTokensOther).reduce((acc, token) => {
return (
acc +
`\t--${Config.sass.varPrefix}${token}: ${flatTokensOther[token]};\n`
);
}, "");
cssContent += `\n.${THEME_CLASSNAME_PREFIX}${themeName}{\n${themeCssVars}}`;
});
if (opts.utilityClasses) {
cssContent += ` ${generateClasses(tokens)}`;
}
@@ -53,7 +69,7 @@ function generateColorClasses(tokens: Tokens) {
* @param tokens
*/
function generateBgClasses(tokens: Tokens) {
return Object.keys(tokens.theme.colors).map(
return Object.keys(tokens.themes.default.theme.colors).map(
(key) =>
`.bg-${key} { background-color: var(--${Config.sass.varPrefix}theme--colors--${key}); }`,
);
@@ -66,7 +82,7 @@ function generateBgClasses(tokens: Tokens) {
* @param tokens
*/
function generateClrClasses(tokens: Tokens) {
return Object.keys(tokens.theme.colors).map(
return Object.keys(tokens.themes.default.theme.colors).map(
(key) =>
`.clr-${key} { color: var(--${Config.sass.varPrefix}theme--colors--${key}); }`,
);
@@ -87,7 +103,7 @@ function generateFontClasses(tokens: Tokens) {
* @param tokens
*/
function generateFwClasses(tokens: Tokens) {
return Object.keys(tokens.theme.font.weights).map(
return Object.keys(tokens.themes.default.theme.font.weights).map(
(key) =>
`.fw-${key} { font-weight: var(--${Config.sass.varPrefix}theme--font--weights--${key}); }`,
);
@@ -100,7 +116,7 @@ function generateFwClasses(tokens: Tokens) {
* @param tokens
*/
function generateFsClasses(tokens: Tokens) {
return Object.keys(tokens.theme.font.sizes).map(
return Object.keys(tokens.themes.default.theme.font.sizes).map(
(key) =>
`.fs-${key} {
font-size: var(--${Config.sass.varPrefix}theme--font--sizes--${key});
@@ -116,7 +132,7 @@ function generateFsClasses(tokens: Tokens) {
* @param tokens
*/
function generateFClasses(tokens: Tokens) {
return Object.keys(tokens.theme.font.families).map(
return Object.keys(tokens.themes.default.theme.font.families).map(
(key) =>
`.f-${key} { font-family: var(--${Config.sass.varPrefix}theme--font--families--${key}); }`,
);
@@ -133,7 +149,7 @@ function generateSpacingClasses(tokens: Tokens) {
* @param tokens
*/
function generateMarginClasses(tokens: Tokens) {
return Object.keys(tokens.theme.spacings).map(
return Object.keys(tokens.themes.default.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}); }` +
@@ -150,7 +166,7 @@ function generateMarginClasses(tokens: Tokens) {
* @param tokens
*/
function generatePaddingClasses(tokens: Tokens) {
return Object.keys(tokens.theme.spacings).map(
return Object.keys(tokens.themes.default.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}); }` +

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

@@ -24,8 +24,8 @@ 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","ogre-odor-is-orange-indeed":"#FD5240"},"font":{"sizes":{"m":"1rem"},"weights":{"medium":400},"families":{"base":"Roboto"}},"spacings":{"s":"1rem"},"transitions":{"ease":"linear"},"input":{"border-color":"#022858"}},"components":{"button":{"font-family":"Times New Roman"}}};
"
`);
"export const tokens = {"themes":{"default":{"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"},"input":{"border-color":"#022858"}},"components":{"button":{"font-family":"Times New Roman"}}},"dark":{"theme":{"colors":{"primary":"black"}}},"custom":{"theme":{"colors":{"primary":"green"}}}}};
"
`);
});
});

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

@@ -25,40 +25,58 @@ describe("SassGenerator", () => {
expect(fs.existsSync(sassFile)).toEqual(true);
expect(fs.readFileSync(sassFile).toString()).toMatchInlineSnapshot(`
"$theme: (
'colors': (
'primary': #055FD2,
'secondary': #DA0000,
'ternary-900': #022858,
'ogre-odor-is-orange-indeed': #FD5240
"$themes: (
'default': (
'theme': (
'colors': (
'primary': #055FD2,
'secondary': #DA0000,
'ternary-900': #022858,
'ogre-odor-is-orange-indeed': #FD5240
),
'font': (
'sizes': (
'm': 1rem
),
'font': (
'sizes': (
'm': 1rem
),
'weights': (
'medium': 400
),
'families': (
'base': Roboto
)
'weights': (
'medium': 400
),
'spacings': (
's': 1rem
),
'transitions': (
'ease': linear
),
'input': (
'border-color': #022858
'families': (
'base': Roboto
)
) !default;
$components: (
'button': (
'font-family': Times New Roman
)
) !default;
"
`);
),
'spacings': (
's': 1rem
),
'transitions': (
'ease': linear
),
'input': (
'border-color': #022858
)
),
'components': (
'button': (
'font-family': Times New Roman
)
)
),
'dark': (
'theme': (
'colors': (
'primary': black
)
)
),
'custom': (
'theme': (
'colors': (
'primary': green
)
)
)
) !default;
"
`);
});
});

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

@@ -24,8 +24,8 @@ 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","ogre-odor-is-orange-indeed":"#FD5240"},"font":{"sizes":{"m":"1rem"},"weights":{"medium":400},"families":{"base":"Roboto"}},"spacings":{"s":"1rem"},"transitions":{"ease":"linear"},"input":{"border-color":"#022858"}},"components":{"button":{"font-family":"Times New Roman"}}};
"
`);
"export const tokens = {"themes":{"default":{"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"},"input":{"border-color":"#022858"}},"components":{"button":{"font-family":"Times New Roman"}}},"dark":{"theme":{"colors":{"primary":"black"}}},"custom":{"theme":{"colors":{"primary":"green"}}}}};
"
`);
});
});

2
packages/tokens/src/bin/Generators/index.ts
View File

@@ -92,5 +92,5 @@ export const resolveRefs = (
* @param resolvingTokens
*/
export const resolveRefValue = (ref: string, resolvingTokens: Tokens) => {
return resolve(resolvingTokens, ref);
return resolve(resolvingTokens.themes.default, ref);
};

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

@@ -1,35 +1,53 @@
module.exports = {
theme: {
colors: {
primary: "#055FD2",
secondary: "#DA0000",
"ternary-900": "#022858",
"ogre-odor-is-orange-indeed": "#FD5240",
},
font: {
sizes: {
m: "1rem",
themes: {
default: {
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",
},
input: {
"border-color": "ref(theme.colors.ternary-900)",
},
},
weights: {
medium: 400,
},
families: {
base: "Roboto",
components: {
button: {
"font-family": "Times New Roman",
},
},
},
spacings: {
s: "1rem",
dark: {
theme: {
colors: {
primary: "black",
},
},
},
transitions: {
ease: "linear",
},
input: {
"border-color": "ref(theme.colors.ternary-900)",
},
},
components: {
button: {
"font-family": "Times New Roman",
custom: {
theme: {
colors: {
primary: "green",
},
},
},
},
};

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

@@ -1,31 +1,8 @@
const colorsGreyscale = {
"greyscale-000": "#FFFFFF",
"greyscale-100": "#FAFAFB",
"greyscale-200": "#F3F4F4",
"greyscale-300": "#E7E8EA",
"greyscale-400": "#C2C6CA",
"greyscale-500": "#9EA3AA",
"greyscale-600": "#79818A",
"greyscale-700": "#555F6B",
"greyscale-800": "#303C4B",
"greyscale-900": "#0C1A2B",
};
const colorsPrimary = {
"primary-text": colorsGreyscale["greyscale-000"],
"primary-100": "#EBF2FC",
"primary-200": "#8CB5EA",
"primary-300": "#5894E1",
"primary-400": "#377FDB",
"primary-500": "#055FD2",
"primary-600": "#0556BF",
"primary-700": "#044395",
"primary-800": "#033474",
"primary-900": "#022858",
};
import { colors as defaultColors } from "./ThemeColors/default";
import { colors as darkColors } from "./ThemeColors/dark";
const colorsSecondary = {
"secondary-text": colorsGreyscale["greyscale-700"],
"secondary-text": "ref(theme.colors.greyscale-700)",
"secondary-100": "#F2F7FC",
"secondary-200": "#EBF3FA",
"secondary-300": "#E2EEF8",
@@ -37,21 +14,8 @@ const colorsSecondary = {
"secondary-900": "#596067",
};
const colorsSuccess = {
"success-text": colorsGreyscale["greyscale-000"],
"success-100": "#EFFCD3",
"success-200": "#DBFAA9",
"success-300": "#BEF27C",
"success-400": "#A0E659",
"success-500": "#76D628",
"success-600": "#5AB81D",
"success-700": "#419A14",
"success-800": "#2C7C0C",
"success-900": "#1D6607",
};
const colorsInfo = {
"info-text": colorsGreyscale["greyscale-000"],
"info-text": "ref(theme.colors.greyscale-000)",
"info-100": "#EBF2FC",
"info-200": "#8CB5EA",
"info-300": "#5894E1",
@@ -63,32 +27,6 @@ const colorsInfo = {
"info-900": "#022858",
};
const colorsWarning = {
"warning-text": colorsGreyscale["greyscale-000"],
"warning-100": "#FFF8CD",
"warning-200": "#FFEF9B",
"warning-300": "#FFE469",
"warning-400": "#FFDA43",
"warning-500": "#FFC805",
"warning-600": "#DBA603",
"warning-700": "#B78702",
"warning-800": "#936901",
"warning-900": "#7A5400",
};
const colorsDanger = {
"danger-text": colorsGreyscale["greyscale-000"],
"danger-100": "#F4B0B0",
"danger-200": "#EE8A8A",
"danger-300": "#E65454",
"danger-400": "#E13333",
"danger-500": "#DA0000",
"danger-600": "#C60000",
"danger-700": "#9B0000",
"danger-800": "#780000",
"danger-900": "#5C0000",
};
const fontSizes = {
h1: "1.75rem",
h2: "1.375rem",
@@ -144,16 +82,16 @@ const transitions = {
duration: "250ms",
};
export default {
const defaultTheme = {
theme: {
colors: {
...colorsPrimary,
...colorsSecondary,
...colorsGreyscale,
...colorsSuccess,
...colorsInfo,
...colorsWarning,
...colorsDanger,
...defaultColors,
"primary-text": "ref(theme.colors.greyscale-000)",
"success-text": "ref(theme.colors.greyscale-000)",
"warning-text": "ref(theme.colors.greyscale-000)",
"danger-text": "ref(theme.colors.greyscale-000)",
},
font: {
sizes: fontSizes,
@@ -165,3 +103,14 @@ export default {
transitions,
},
};
export default {
themes: {
default: defaultTheme,
dark: {
theme: {
colors: darkColors,
},
},
},
};

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

@@ -55,17 +55,28 @@ 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(
fs
.readFileSync(
path.join(
__dirname,
"assets",
"expected-default-" + Config.tokenFilename + ".css",
),
)
.toString(),
);
expect(fs.readFileSync(cssTokensFile).toString()).toMatchInlineSnapshot(`
":root {
--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;
--c--theme--spacings--s: 1rem;
--c--theme--transitions--ease: linear;
--c--theme--input--border-color: var(--c--theme--colors--ternary-900);
--c--components--button--font-family: Times New Roman;
}
.cunningham-theme--dark{
--c--theme--colors--primary: black;
}
.cunningham-theme--custom{
--c--theme--colors--primary: green;
}
"
`);
});
it("Runs with existing JS config file using local values.", async () => {
@@ -83,17 +94,28 @@ describe("Cunningham Bin", () => {
await run(["", "", "-g", "css"]);
expect(fs.existsSync(cssTokensFile)).toEqual(true);
expect(fs.readFileSync(cssTokensFile).toString()).toEqual(
fs
.readFileSync(
path.join(
__dirname,
"assets",
"expected-js-" + Config.tokenFilename + ".css",
),
)
.toString(),
);
expect(fs.readFileSync(cssTokensFile).toString()).toMatchInlineSnapshot(`
":root {
--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;
--c--theme--spacings--s: 1rem;
--c--theme--transitions--ease: linear;
--c--theme--input--border-color: var(--c--theme--colors--ternary-900);
--c--components--button--font-family: Times New Roman;
}
.cunningham-theme--dark{
--c--theme--colors--primary: black;
}
.cunningham-theme--custom{
--c--theme--colors--primary: green;
}
"
`);
});
it("Runs with existing TS config file using local values.", async () => {
@@ -113,7 +135,6 @@ describe("Cunningham Bin", () => {
// TS will always work )
await runBin(`-g css -cwd ${__dirname}`);
// await run(["", "", "-g", "css"]);
expect(fs.existsSync(cssTokensFile)).toEqual(true);
expect(fs.readFileSync(cssTokensFile).toString()).toContain(`
\t--c--theme--colors--primary: typescript;`);
@@ -125,17 +146,28 @@ 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(
fs
.readFileSync(
path.join(
__dirname,
"assets",
"expected-default-" + Config.tokenFilename + ".css",
),
)
.toString(),
);
expect(fs.readFileSync(cssTokensFile).toString()).toMatchInlineSnapshot(`
":root {
--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;
--c--theme--spacings--s: 1rem;
--c--theme--transitions--ease: linear;
--c--theme--input--border-color: var(--c--theme--colors--ternary-900);
--c--components--button--font-family: Times New Roman;
}
.cunningham-theme--dark{
--c--theme--colors--primary: black;
}
.cunningham-theme--custom{
--c--theme--colors--primary: green;
}
"
`);
};
it("Runs with -o options.", async () => {

14
packages/tokens/src/bin/tests/assets/cunningham.js
View File

@@ -1,7 +1,11 @@
module.exports = {
theme: {
colors: {
primary: "AntiqueWhite",
},
},
themes: {
default: {
theme: {
colors: {
primary: "AntiqueWhite",
},
},
}
}
};

14
packages/tokens/src/bin/tests/assets/cunningham.ts
View File

@@ -1,7 +1,11 @@
export default {
theme: {
colors: {
primary: "typescript",
},
},
themes: {
default: {
theme: {
colors: {
primary: "typescript",
},
},
}
}
};

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

@@ -1,13 +0,0 @@
:root {
--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;
--c--theme--spacings--s: 1rem;
--c--theme--transitions--ease: linear;
--c--theme--input--border-color: var(--c--theme--colors--ternary-900);
--c--components--button--font-family: Times New Roman;
}

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

@@ -1,13 +0,0 @@
:root {
--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;
--c--theme--spacings--s: 1rem;
--c--theme--transitions--ease: linear;
--c--theme--input--border-color: var(--c--theme--colors--ternary-900);
--c--components--button--font-family: Times New Roman;
}

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

@@ -1,28 +0,0 @@
html {
--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;
--c--theme--spacings--s: 1rem;
--c--theme--transitions--ease: linear;
--c--theme--input--border-color: var(--c--theme--colors--ternary-900);
--c--components--button--font-family: Times New Roman;
} .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);
letter-spacing: var(--c--theme--font--letterspacings--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); }