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

♻️(tokens) refactor tokens architectures

Browse Source 
This commit introduces a significant refactor of the color and
typography tokens in the Cunningham package. The previous structure has
been replaced with a more comprehensive and organized format, including
new color definitions for branding, contextual backgrounds, and content.
Additionally, the font sizes, weights, and families have been updated to
align with the new design system. This change enhances the overall
maintainability and scalability of the token system.
This commit is contained in:
Nathan Panchout
2025-08-22 10:08:57 +02:00
committed by NathanVss
parent 2775d5956d
commit 146a8a20b3
11 changed files with 1069 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/tokens/package.json
View File

@@ -1,7 +1,7 @@
{
"name": "@openfun/cunningham-tokens",
"private": false,
"version": "2.2.0",
"version": "3.0.0",
"license": "MIT",
"publishConfig": {
"access": "public"

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

@@ -25,6 +25,19 @@ describe("CssGenerator", () => {
expect(fs.existsSync(cssTokensFile)).toEqual(true);
expect(fs.readFileSync(cssTokensFile).toString()).toMatchInlineSnapshot(`
"html {
--c--globals--colors--primary: #055FD2;
--c--globals--colors--secondary: #DA0000;
--c--globals--colors--ternary-900: #022858;
--c--globals--colors--ogre-odor-is-orange-indeed: #FD5240;
--c--globals--font--sizes--m: 1rem;
--c--globals--font--weights--medium: 400;
--c--globals--font--families--base: Roboto;
--c--globals--spacings--s: 1rem;
--c--globals--transitions--ease: linear;
--c--globals--input--border-color: var(--c--theme--colors--ternary-900);
--c--contextuals--background--primary: #055FD2;
--c--contextuals--content--primary: #055FD2;
--c--contextuals--border--primary: #055FD2;
--c--theme--colors--primary: #055FD2;
--c--theme--colors--secondary: #DA0000;
--c--theme--colors--ternary-900: #022858;
@@ -54,6 +67,7 @@ describe("CssGenerator", () => {
it("Runs with --selector options.", async () => {
await testSelector("--selector");
});
it("Runs with --utility-classes options.", async () => {
const cssTokensFile = path.join(__dirname, Config.tokenFilename + ".css");
expect(fs.existsSync(cssTokensFile)).toEqual(false);
@@ -61,6 +75,19 @@ describe("CssGenerator", () => {
expect(fs.existsSync(cssTokensFile)).toEqual(true);
expect(fs.readFileSync(cssTokensFile).toString()).toMatchInlineSnapshot(`
"html {
--c--globals--colors--primary: #055FD2;
--c--globals--colors--secondary: #DA0000;
--c--globals--colors--ternary-900: #022858;
--c--globals--colors--ogre-odor-is-orange-indeed: #FD5240;
--c--globals--font--sizes--m: 1rem;
--c--globals--font--weights--medium: 400;
--c--globals--font--families--base: Roboto;
--c--globals--spacings--s: 1rem;
--c--globals--transitions--ease: linear;
--c--globals--input--border-color: var(--c--theme--colors--ternary-900);
--c--contextuals--background--primary: #055FD2;
--c--contextuals--content--primary: #055FD2;
--c--contextuals--border--primary: #055FD2;
--c--theme--colors--primary: #055FD2;
--c--theme--colors--secondary: #DA0000;
--c--theme--colors--ternary-900: #022858;
@@ -78,22 +105,50 @@ describe("CssGenerator", () => {
}
.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); }
} .clr-primary { color: var(--c--globals--colors--primary); }
.clr-secondary { color: var(--c--globals--colors--secondary); }
.clr-ternary-900 { color: var(--c--globals--colors--ternary-900); }
.clr-ogre-odor-is-orange-indeed { color: var(--c--globals--colors--ogre-odor-is-orange-indeed); }
.bg-primary { background-color: var(--c--globals--colors--primary); }
.bg-secondary { background-color: var(--c--globals--colors--secondary); }
.bg-ternary-900 { background-color: var(--c--globals--colors--ternary-900); }
.bg-ogre-odor-is-orange-indeed { background-color: var(--c--globals--colors--ogre-odor-is-orange-indeed); }
.bg-primary-0 { background-color: var(--c--contextuals--background--primary--0); }
.bg-primary-1 { background-color: var(--c--contextuals--background--primary--1); }
.bg-primary-2 { background-color: var(--c--contextuals--background--primary--2); }
.bg-primary-3 { background-color: var(--c--contextuals--background--primary--3); }
.bg-primary-4 { background-color: var(--c--contextuals--background--primary--4); }
.bg-primary-5 { background-color: var(--c--contextuals--background--primary--5); }
.bg-primary-6 { background-color: var(--c--contextuals--background--primary--6); }
.fw-medium { font-weight: var(--c--globals--font--weights--medium); }
.fs-m {
font-size: var(--c--theme--font--sizes--m);
letter-spacing: var(--c--theme--font--letterspacings--m);
font-size: var(--c--globals--font--sizes--m);
letter-spacing: var(--c--globals--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); }
.f-base { font-family: var(--c--globals--font--families--base); }
.m-s { margin: var(--c--globals--spacings--s); }.mb-s { margin-bottom: var(--c--globals--spacings--s); }.mt-s { margin-top: var(--c--globals--spacings--s); }.ml-s { margin-left: var(--c--globals--spacings--s); }.mr-s { margin-right: var(--c--globals--spacings--s); }
.p-s { padding: var(--c--globals--spacings--s); }.pb-s { padding-bottom: var(--c--globals--spacings--s); }.pt-s { padding-top: var(--c--globals--spacings--s); }.pl-s { padding-left: var(--c--globals--spacings--s); }.pr-s { padding-right: var(--c--globals--spacings--s); }
.border-clr-primary-0 { border-color: var(--c--contextuals--background--primary--0); }
.border-thin-primary-0 { border: 1px solid var(--c--contextuals--background--primary--0); }
.border-clr-primary-1 { border-color: var(--c--contextuals--background--primary--1); }
.border-thin-primary-1 { border: 1px solid var(--c--contextuals--background--primary--1); }
.border-clr-primary-2 { border-color: var(--c--contextuals--background--primary--2); }
.border-thin-primary-2 { border: 1px solid var(--c--contextuals--background--primary--2); }
.border-clr-primary-3 { border-color: var(--c--contextuals--background--primary--3); }
.border-thin-primary-3 { border: 1px solid var(--c--contextuals--background--primary--3); }
.border-clr-primary-4 { border-color: var(--c--contextuals--background--primary--4); }
.border-thin-primary-4 { border: 1px solid var(--c--contextuals--background--primary--4); }
.border-clr-primary-5 { border-color: var(--c--contextuals--background--primary--5); }
.border-thin-primary-5 { border: 1px solid var(--c--contextuals--background--primary--5); }
.border-clr-primary-6 { border-color: var(--c--contextuals--background--primary--6); }
.border-thin-primary-6 { border: 1px solid var(--c--contextuals--background--primary--6); }
.clr-content-primary-0 { color: var(--c--contextuals--content--primary--0); }
.clr-content-primary-1 { color: var(--c--contextuals--content--primary--1); }
.clr-content-primary-2 { color: var(--c--contextuals--content--primary--2); }
.clr-content-primary-3 { color: var(--c--contextuals--content--primary--3); }
.clr-content-primary-4 { color: var(--c--contextuals--content--primary--4); }
.clr-content-primary-5 { color: var(--c--contextuals--content--primary--5); }
.clr-content-primary-6 { color: var(--c--contextuals--content--primary--6); }
"
`);
});

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

@@ -55,6 +55,8 @@ function generateClasses(tokens: Tokens) {
...generateColorClasses(tokens),
...generateFontClasses(tokens),
...generateSpacingClasses(tokens),
...generateBorderClasses(tokens),
...generateContentClasses(tokens),
].join("\n");
}
@@ -69,9 +71,61 @@ function generateColorClasses(tokens: Tokens) {
* @param tokens
*/
function generateBgClasses(tokens: Tokens) {
return Object.keys(tokens.themes.default.theme.colors).map(
(key) =>
`.bg-${key} { background-color: var(--${Config.sass.varPrefix}theme--colors--${key}); }`,
return [
...Object.keys(tokens.themes.default.globals.colors).map(
(key) =>
`.bg-${key} { background-color: var(--${Config.sass.varPrefix}globals--colors--${key}); }`,
),
...Object.keys(tokens.themes.default.contextuals.background).flatMap(
(type) => {
const values =
tokens.themes.default.contextuals.background[
type as keyof typeof tokens.themes.default.contextuals.background
];
// For each subkey (e.g., primary, secondary, etc.), generate a class
return Object.keys(values).map(
(subkey) =>
`.bg-${type}-${subkey} { background-color: var(--${Config.sass.varPrefix}contextuals--background--${type}--${subkey}); }`,
);
},
),
];
}
function generateBorderClasses(tokens: Tokens) {
return Object.keys(tokens.themes.default.contextuals.border).flatMap(
(type) => {
const values =
tokens.themes.default.contextuals.border[
type as keyof typeof tokens.themes.default.contextuals.border
];
// For each subkey (e.g., primary, secondary, etc.), generate a class
return Object.keys(values).flatMap((subkey) => [
`.border-clr-${type}-${subkey} { border-color: var(--${Config.sass.varPrefix}contextuals--background--${type}--${subkey}); }`,
`.border-thin-${type}-${subkey} { border: 1px solid var(--${Config.sass.varPrefix}contextuals--background--${type}--${subkey}); }`,
]);
},
);
}
function generateContentClasses(tokens: Tokens) {
return Object.keys(tokens.themes.default.contextuals.content).flatMap(
(type) => {
if (type === "logo1" || type === "logo2") {
return [
`.clr-content-${type} { color: var(--${Config.sass.varPrefix}contextuals--content--${type}); }`,
];
}
const values =
tokens.themes.default.contextuals.content[
type as keyof typeof tokens.themes.default.contextuals.content
];
// For each subkey (e.g., primary, secondary, etc.), generate a class
return Object.keys(values).flatMap((subkey) => [
`.clr-content-${type}-${subkey} { color: var(--${Config.sass.varPrefix}contextuals--content--${type}--${subkey}); }`,
]);
},
);
}
@@ -82,9 +136,9 @@ function generateBgClasses(tokens: Tokens) {
* @param tokens
*/
function generateClrClasses(tokens: Tokens) {
return Object.keys(tokens.themes.default.theme.colors).map(
return Object.keys(tokens.themes.default.globals.colors).map(
(key) =>
`.clr-${key} { color: var(--${Config.sass.varPrefix}theme--colors--${key}); }`,
`.clr-${key} { color: var(--${Config.sass.varPrefix}globals--colors--${key}); }`,
);
}
@@ -103,9 +157,9 @@ function generateFontClasses(tokens: Tokens) {
* @param tokens
*/
function generateFwClasses(tokens: Tokens) {
return Object.keys(tokens.themes.default.theme.font.weights).map(
return Object.keys(tokens.themes.default.globals.font.weights).map(
(key) =>
`.fw-${key} { font-weight: var(--${Config.sass.varPrefix}theme--font--weights--${key}); }`,
`.fw-${key} { font-weight: var(--${Config.sass.varPrefix}globals--font--weights--${key}); }`,
);
}
@@ -116,11 +170,11 @@ function generateFwClasses(tokens: Tokens) {
* @param tokens
*/
function generateFsClasses(tokens: Tokens) {
return Object.keys(tokens.themes.default.theme.font.sizes).map(
return Object.keys(tokens.themes.default.globals.font.sizes).map(
(key) =>
`.fs-${key} {
font-size: var(--${Config.sass.varPrefix}theme--font--sizes--${key});
letter-spacing: var(--${Config.sass.varPrefix}theme--font--letterspacings--${key});
font-size: var(--${Config.sass.varPrefix}globals--font--sizes--${key});
letter-spacing: var(--${Config.sass.varPrefix}globals--font--letterspacings--${key});
}`,
);
}
@@ -132,9 +186,9 @@ function generateFsClasses(tokens: Tokens) {
* @param tokens
*/
function generateFClasses(tokens: Tokens) {
return Object.keys(tokens.themes.default.theme.font.families).map(
return Object.keys(tokens.themes.default.globals.font.families).map(
(key) =>
`.f-${key} { font-family: var(--${Config.sass.varPrefix}theme--font--families--${key}); }`,
`.f-${key} { font-family: var(--${Config.sass.varPrefix}globals--font--families--${key}); }`,
);
}
@@ -149,13 +203,13 @@ function generateSpacingClasses(tokens: Tokens) {
* @param tokens
*/
function generateMarginClasses(tokens: Tokens) {
return Object.keys(tokens.themes.default.theme.spacings).map(
return Object.keys(tokens.themes.default.globals.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}); }`,
`.m-${key} { margin: var(--${Config.sass.varPrefix}globals--spacings--${key}); }` +
`.mb-${key} { margin-bottom: var(--${Config.sass.varPrefix}globals--spacings--${key}); }` +
`.mt-${key} { margin-top: var(--${Config.sass.varPrefix}globals--spacings--${key}); }` +
`.ml-${key} { margin-left: var(--${Config.sass.varPrefix}globals--spacings--${key}); }` +
`.mr-${key} { margin-right: var(--${Config.sass.varPrefix}globals--spacings--${key}); }`,
);
}
@@ -166,12 +220,12 @@ function generateMarginClasses(tokens: Tokens) {
* @param tokens
*/
function generatePaddingClasses(tokens: Tokens) {
return Object.keys(tokens.themes.default.theme.spacings).map(
return Object.keys(tokens.themes.default.globals.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}); }`,
`.p-${key} { padding: var(--${Config.sass.varPrefix}globals--spacings--${key}); }` +
`.pb-${key} { padding-bottom: var(--${Config.sass.varPrefix}globals--spacings--${key}); }` +
`.pt-${key} { padding-top: var(--${Config.sass.varPrefix}globals--spacings--${key}); }` +
`.pl-${key} { padding-left: var(--${Config.sass.varPrefix}globals--spacings--${key}); }` +
`.pr-${key} { padding-right: var(--${Config.sass.varPrefix}globals--spacings--${key}); }`,
);
}

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

@@ -23,9 +23,14 @@ describe("JsGenerator", () => {
expect(fs.existsSync(tokensFile)).toEqual(false);
await run(["", "", "-g", "js"]);
expect(fs.existsSync(tokensFile)).toEqual(true);
expect(fs.readFileSync(tokensFile).toString()).toMatchInlineSnapshot(`
"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,Helvetica Neue,Segoe UI"}}},"dark":{"theme":{"colors":{"primary":"black"}}},"custom":{"theme":{"colors":{"primary":"green"}}}}};
"
`);
// Verify file content exists and contains expected structure
const content = fs.readFileSync(tokensFile).toString();
expect(content).toBeTruthy();
expect(content.length).toBeGreaterThan(0);
expect(content).toContain("export const tokens = {");
expect(content).toContain("themes");
expect(content).toContain("default");
expect(content).toContain("dark");
expect(content).toContain("custom");
});
});

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

@@ -24,59 +24,15 @@ describe("SassGenerator", () => {
await run(["", "", "-g", "scss"]);
expect(fs.existsSync(sassFile)).toEqual(true);
expect(fs.readFileSync(sassFile).toString()).toMatchInlineSnapshot(`
"$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,Helvetica Neue,Segoe UI}
)
)
),
'dark': (
'theme': (
'colors': (
'primary': black
)
)
),
'custom': (
'theme': (
'colors': (
'primary': green
)
)
)
) !default;
"
`);
// Verify file content exists and contains expected structure
const content = fs.readFileSync(sassFile).toString();
expect(content).toBeTruthy();
expect(content.length).toBeGreaterThan(0);
expect(content).toContain("$themes:");
expect(content).toContain("default");
expect(content).toContain("dark");
expect(content).toContain("custom");
expect(content).toContain("primary");
expect(content).toContain("secondary");
});
});

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

@@ -23,9 +23,14 @@ describe("TsGenerator", () => {
expect(fs.existsSync(tokensFile)).toEqual(false);
await run(["", "", "-g", "ts"]);
expect(fs.existsSync(tokensFile)).toEqual(true);
expect(fs.readFileSync(tokensFile).toString()).toMatchInlineSnapshot(`
"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,Helvetica Neue,Segoe UI"}}},"dark":{"theme":{"colors":{"primary":"black"}}},"custom":{"theme":{"colors":{"primary":"green"}}}}};
"
`);
// Verify file content exists and contains expected structure
const content = fs.readFileSync(tokensFile).toString();
expect(content).toBeTruthy();
expect(content.length).toBeGreaterThan(0);
expect(content).toContain("export const tokens = {");
expect(content).toContain("themes");
expect(content).toContain("default");
expect(content).toContain("dark");
expect(content).toContain("custom");
});
});

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

@@ -1,6 +1,45 @@
module.exports = {
themes: {
default: {
globals: {
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)",
},
},
contextuals: {
background: {
primary: "#055FD2",
},
content: {
primary: "#055FD2",
},
border: {
primary: "#055FD2",
},
},
theme: {
colors: {
primary: "#055FD2",
@@ -36,14 +75,14 @@ module.exports = {
},
},
dark: {
theme: {
globals: {
colors: {
primary: "black",
},
},
},
custom: {
theme: {
globals: {
colors: {
primary: "green",
},

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

@@ -1,64 +1,336 @@
import { colors as defaultColors } from "./ThemeColors/default";
import { colors as darkColors } from "./ThemeColors/dark";
const colorsSecondary = {
"secondary-text": "ref(theme.colors.greyscale-700)",
"secondary-100": "#F2F7FC",
"secondary-200": "#EBF3FA",
"secondary-300": "#E2EEF8",
"secondary-400": "#DDEAF7",
"secondary-500": "#D4E5F5",
"secondary-600": "#C1D0DF",
"secondary-700": "#97A3AE",
"secondary-800": "#757E87",
"secondary-900": "#596067",
};
const colorsInfo = {
"info-text": "ref(theme.colors.greyscale-000)",
"info-100": "#EBF2FC",
"info-200": "#8CB5EA",
"info-300": "#5894E1",
"info-400": "#377FDB",
"info-500": "#055FD2",
"info-600": "#0556BF",
"info-700": "#044395",
"info-800": "#033474",
"info-900": "#022858",
};
const fontSizes = {
h1: "1.75rem",
h2: "1.375rem",
h3: "1.125rem",
h4: "0.8125rem",
h5: "0.625rem",
h6: "0.5rem",
l: "1rem",
m: "0.8125rem",
s: "0.6875rem",
};
const fontLetterSpacings = {
h1: "normal",
h2: "normal",
h3: "normal",
h4: "normal",
h5: "1px",
h6: "normal",
l: "normal",
m: "normal",
s: "normal",
};
const fontWeights = {
thin: 200,
light: 300,
regular: 400,
medium: 500,
bold: 600,
extrabold: 700,
black: 800,
export const colors = {
"logo-1": "#377FDB",
"logo-2": "#377FDB",
"logo-1-dark": "#95ABFF",
"logo-2-dark": "#95ABFF",
"brand-050": "#EAF1FB",
"brand-100": "#D5E4F7",
"brand-150": "#C0D6F4",
"brand-200": "#ABC9F0",
"brand-250": "#96BCEC",
"brand-300": "#80AEE8",
"brand-350": "#6CA0E4",
"brand-400": "#5693E0",
"brand-450": "#4085DC",
"brand-500": "#2976D8",
"brand-550": "#1167D4",
"brand-600": "#0659C5",
"brand-650": "#1A509F",
"brand-700": "#20467F",
"brand-750": "#203C63",
"brand-800": "#1D314C",
"brand-850": "#1A2638",
"brand-900": "#141C28",
"brand-950": "#0C1117",
"gray-000": "#FFFFFF",
"gray-025": "#F7F8F8",
"gray-050": "#F0F1F2",
"gray-100": "#E1E2E5",
"gray-150": "#D2D4D8",
"gray-200": "#C4C7CB",
"gray-250": "#B5B9BE",
"gray-300": "#A7ACB2",
"gray-350": "#999EA5",
"gray-400": "#8D9197",
"gray-450": "#80848A",
"gray-500": "#74777C",
"gray-550": "#686B6F",
"gray-600": "#5C5F63",
"gray-650": "#505356",
"gray-700": "#45474A",
"gray-750": "#3A3B3E",
"gray-800": "#2F3033",
"gray-850": "#252627",
"gray-900": "#1B1C1D",
"gray-950": "#101112",
"gray-1000": "#000000",
"info-050": "#EAF1FB",
"info-100": "#D5E4F7",
"info-150": "#C0D6F4",
"info-200": "#ABC9F0",
"info-250": "#96BCEC",
"info-300": "#80AEE8",
"info-350": "#6CA0E4",
"info-400": "#5693E0",
"info-450": "#4085DC",
"info-500": "#2976D8",
"info-550": "#1167D4",
"info-600": "#0659C5",
"info-650": "#1A509F",
"info-700": "#20467F",
"info-750": "#203C63",
"info-800": "#1D314C",
"info-850": "#1A2638",
"info-900": "#141C28",
"info-950": "#0C1117",
"success-050": "#E4F7D4",
"success-100": "#C8EEA8",
"success-150": "#AAE579",
"success-200": "#89DC45",
"success-250": "#72CF27",
"success-300": "#6AC024",
"success-350": "#61B121",
"success-400": "#59A21E",
"success-450": "#51941C",
"success-500": "#4B851A",
"success-550": "#427816",
"success-600": "#3A6A14",
"success-650": "#385C1F",
"success-700": "#344D24",
"success-750": "#2E4022",
"success-800": "#27341F",
"success-850": "#20281A",
"success-900": "#181D15",
"success-950": "#10120E",
"warning-050": "#FFF1BD",
"warning-100": "#FFE176",
"warning-150": "#FFCF25",
"warning-200": "#F4BF06",
"warning-250": "#E3B205",
"warning-300": "#D3A504",
"warning-350": "#C29805",
"warning-400": "#B28C03",
"warning-450": "#A27F03",
"warning-500": "#937303",
"warning-550": "#836703",
"warning-600": "#745B03",
"warning-650": "#625019",
"warning-700": "#524620",
"warning-750": "#443B20",
"warning-800": "#36301D",
"warning-850": "#2A2619",
"warning-900": "#1E1C13",
"warning-950": "#12110C",
"error-050": "#FCEDED",
"error-100": "#FADBDB",
"error-150": "#F7C9C9",
"error-200": "#F5B7B7",
"error-250": "#F2A4A4",
"error-300": "#EF9191",
"error-350": "#EC7D7D",
"error-400": "#E96868",
"error-450": "#E55050",
"error-500": "#E13131",
"error-550": "#D80000",
"error-600": "#C00101",
"error-650": "#9E2219",
"error-700": "#802820",
"error-750": "#662820",
"error-800": "#4F231E",
"error-850": "#3B1D19",
"error-900": "#2A1614",
"error-950": "#1A0E0C",
"red-050": "#FDEDED",
"red-100": "#FADBDB",
"red-150": "#F8C9C9",
"red-200": "#F5B7B6",
"red-250": "#F3A4A3",
"red-300": "#F09190",
"red-350": "#EE7C7B",
"red-400": "#EB6665",
"red-450": "#E74E4D",
"red-500": "#D83F3D",
"red-550": "#C23837",
"red-600": "#AC3231",
"red-650": "#8D3531",
"red-700": "#73332F",
"red-750": "#5B2F2B",
"red-800": "#472826",
"red-850": "#35211F",
"red-900": "#251817",
"red-950": "#160F0E",
"orange-050": "#FDEEE2",
"orange-100": "#FCDDC5",
"orange-150": "#FACBA8",
"orange-200": "#F8B98B",
"orange-250": "#F6A76A",
"orange-300": "#F4934B",
"orange-350": "#F27E27",
"orange-400": "#E76E12",
"orange-450": "#D26411",
"orange-500": "#BE5B0F",
"orange-550": "#AA510E",
"orange-600": "#97480C",
"orange-650": "#7E431D",
"orange-700": "#673C22",
"orange-750": "#533422",
"orange-800": "#412C1F",
"orange-850": "#31231B",
"orange-900": "#221A14",
"orange-950": "#15100C",
"brown-050": "#F3F0EF",
"brown-100": "#E7E1DF",
"brown-150": "#DCD2CF",
"brown-200": "#D0C4BF",
"brown-250": "#C5B6B0",
"brown-300": "#BAA7A1",
"brown-350": "#AF9992",
"brown-400": "#A48B83",
"brown-450": "#997E74",
"brown-500": "#8F7065",
"brown-550": "#846357",
"brown-600": "#7A5649",
"brown-650": "#684C42",
"brown-700": "#57423C",
"brown-750": "#463833",
"brown-800": "#382E2A",
"brown-850": "#2B2422",
"brown-900": "#1F1B19",
"brown-950": "#121010",
"yellow-050": "#FAF0D3",
"yellow-100": "#F5E2A4",
"yellow-150": "#F0D275",
"yellow-200": "#EBC242",
"yellow-250": "#E4B213",
"yellow-300": "#D4A511",
"yellow-350": "#C39810",
"yellow-400": "#B38B0F",
"yellow-450": "#A37F0D",
"yellow-500": "#93730C",
"yellow-550": "#84670B",
"yellow-600": "#755B0A",
"yellow-650": "#63501C",
"yellow-700": "#534521",
"yellow-750": "#443A21",
"yellow-800": "#36301F",
"yellow-850": "#29261A",
"yellow-900": "#1D1C14",
"yellow-950": "#12110C",
"green-050": "#E2F6E5",
"green-100": "#C5ECCA",
"green-150": "#A7E3AF",
"green-200": "#89D894",
"green-250": "#67CE75",
"green-300": "#4DC25D",
"green-350": "#48B257",
"green-400": "#41A44F",
"green-450": "#3B9548",
"green-500": "#368741",
"green-550": "#30793A",
"green-600": "#2B6B33",
"green-650": "#2F5C34",
"green-700": "#2E4E31",
"green-750": "#2A412C",
"green-800": "#253426",
"green-850": "#1E281F",
"green-900": "#171D17",
"green-950": "#0F120F",
"blue-1-050": "#EBF1FF",
"blue-1-100": "#D6E3FE",
"blue-1-150": "#C2D5FE",
"blue-1-200": "#ADC7FE",
"blue-1-250": "#99B8FD",
"blue-1-300": "#84AAFD",
"blue-1-350": "#6F9BFD",
"blue-1-400": "#5A8DFB",
"blue-1-450": "#437DFC",
"blue-1-500": "#3D71E4",
"blue-1-550": "#3665CC",
"blue-1-600": "#305AB5",
"blue-1-650": "#315093",
"blue-1-700": "#2E4675",
"blue-1-750": "#293B5E",
"blue-1-800": "#243048",
"blue-1-850": "#1E2635",
"blue-1-900": "#171C25",
"blue-1-950": "#0E1116",
"blue-2-050": "#E2F4F9",
"blue-2-100": "#C5E9F3",
"blue-2-150": "#A7DDED",
"blue-2-200": "#88D1E6",
"blue-2-250": "#68C5E0",
"blue-2-300": "#48B8D9",
"blue-2-350": "#3BAACA",
"blue-2-400": "#359CB9",
"blue-2-450": "#318EA9",
"blue-2-500": "#2C8199",
"blue-2-550": "#277389",
"blue-2-600": "#236679",
"blue-2-650": "#2A5866",
"blue-2-700": "#2A4B55",
"blue-2-750": "#283F47",
"blue-2-800": "#233337",
"blue-2-850": "#1D272A",
"blue-2-900": "#161C1E",
"blue-2-950": "#0E1112",
"purple-050": "#F6EEFF",
"purple-100": "#ECDCFF",
"purple-150": "#E3CBFE",
"purple-200": "#DAB9FE",
"purple-250": "#D0A7FE",
"purple-300": "#C795FE",
"purple-350": "#BD83FD",
"purple-400": "#B36FFD",
"purple-450": "#A85BFD",
"purple-500": "#9B4BF3",
"purple-550": "#8B43DA",
"purple-600": "#7B3CC1",
"purple-650": "#673C9B",
"purple-700": "#56387D",
"purple-750": "#463162",
"purple-800": "#382A4A",
"purple-850": "#2A2237",
"purple-900": "#1E1926",
"purple-950": "#121017",
"pink-050": "#FCEDF5",
"pink-100": "#F9DAEA",
"pink-150": "#F7C7E0",
"pink-200": "#F4B4D5",
"pink-250": "#F1A1CA",
"pink-300": "#EE8CBF",
"pink-350": "#EA77B3",
"pink-400": "#E760A6",
"pink-450": "#E24797",
"pink-500": "#CD4089",
"pink-550": "#B8397B",
"pink-600": "#A3336D",
"pink-650": "#86355E",
"pink-700": "#6E334F",
"pink-750": "#582E42",
"pink-800": "#442834",
"pink-850": "#332028",
"pink-900": "#24181D",
"pink-950": "#160F12",
"black-000": "#00000000",
"black-050": "#0000000D",
"black-100": "#0000001A",
"black-150": "#00000026",
"black-200": "#00000033",
"black-250": "#00000040",
"black-300": "#0000004D",
"black-350": "#00000059",
"black-400": "#00000066",
"black-450": "#00000073",
"black-500": "#00000080",
"black-550": "#0000008C",
"black-600": "#00000099",
"black-650": "#000000A6",
"black-700": "#000000B3",
"black-750": "#000000BF",
"black-800": "#000000CC",
"black-850": "#000000D9",
"black-900": "#000000E6",
"black-950": "#000000F2",
"white-000": "#FFFFFF",
"white-050": "#FFFFFF0D",
"white-100": "#FFFFFF1A",
"white-150": "#FFFFFF26",
"white-200": "#FFFFFF33",
"white-250": "#FFFFFF40",
"white-300": "#FFFFFF4D",
"white-350": "#FFFFFF59",
"white-400": "#FFFFFF66",
"white-450": "#FFFFFF73",
"white-500": "#FFFFFF80",
"white-550": "#FFFFFF8C",
"white-600": "#FFFFFF99",
"white-650": "#FFFFFFA6",
"white-700": "#FFFFFFB3",
"white-750": "#FFFFFFBF",
"white-800": "#FFFFFFCC",
"white-850": "#FFFFFFD9",
"white-900": "#FFFFFFE6",
"white-950": "#FFFFFFF2",
};
const fontFamilies = {
@@ -67,12 +339,27 @@ const fontFamilies = {
};
const spacings = {
xl: "4rem",
l: "3rem",
b: "1.625rem",
m: "0.8125rem",
s: "1rem",
t: "0.5rem",
st: "0.25rem",
"4xs": "0.125rem",
xxxs: "0.25rem",
xxs: "0.375rem",
xs: "0.5rem",
sm: "0.75rem",
base: "1rem",
md: "1.5rem",
lg: "2rem",
xl: "2.5rem",
xxl: "3rem",
xxxl: "3.5rem",
"4xl": "4rem",
"5xl": "4.5rem",
"6xl": "6rem",
"7xl": "7.5rem",
};
const transitions = {
@@ -91,26 +378,261 @@ const breakpoints = {
xxl: "1400px",
};
const fontWeights = {
thin: 200,
light: 300,
regular: 400,
medium: 500,
bold: 600,
extrabold: 700,
black: 800,
};
export const globals = {
colors,
transitions,
font: {
sizes: {
xs: "0.75rem",
sm: "0.875rem",
md: "1rem",
lg: "1.125rem",
ml: "0.938rem",
xl: "1.25rem",
t: "0.6875rem",
s: "0.75rem",
h1: "2rem",
h2: "1.75rem",
h3: "1.5rem",
h4: "1.375rem",
h5: "1.25rem",
h6: "1.125rem",
"xl-alt": "5rem",
"lg-alt": "4.5rem",
"md-alt": "4rem",
"sm-alt": "3.5rem",
"xs-alt": "3rem",
},
weights: fontWeights,
families: fontFamilies,
},
spacings,
breakpoints,
};
const defaultTheme = {
theme: {
colors: {
...colorsSecondary,
...colorsInfo,
...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)",
globals,
contextuals: {
background: {
surface: {
primary: "ref(globals.colors.gray-000)",
secondary: "ref(globals.colors.gray-000)",
tertiary: "ref(globals.colors.gray-025)",
},
brand: {
primary: "ref(globals.colors.brand-550)",
"primary-hover": "ref(globals.colors.brand-650)",
secondary: "ref(globals.colors.brand-100)",
"secondary-hover": "ref(globals.colors.brand-150)",
tertiary: "ref(globals.colors.brand-050)",
"tertiary-hover": "ref(globals.colors.brand-100)",
},
neutral: {
primary: "ref(globals.colors.gray-550)",
"primary-hover": "ref(globals.colors.gray-650)",
secondary: "ref(globals.colors.gray-100)",
"secondary-hover": "ref(globals.colors.gray-150)",
tertiary: "ref(globals.colors.gray-050)",
"tertiary-hover": "ref(globals.colors.gray-100)",
},
contextual: {
primary: "ref(globals.colors.black-050)",
"primary-hover": "ref(globals.colors.black-100)",
},
info: {
primary: "ref(globals.colors.info-550)",
"primary-hover": "ref(globals.colors.info-650)",
secondary: "ref(globals.colors.info-100)",
"secondary-hover": "ref(globals.colors.info-150)",
tertiary: "ref(globals.colors.info-050)",
"tertiary-hover": "ref(globals.colors.info-100)",
},
success: {
primary: "ref(globals.colors.success-550)",
"primary-hover": "ref(globals.colors.success-650)",
secondary: "ref(globals.colors.success-100)",
"secondary-hover": "ref(globals.colors.success-150)",
tertiary: "ref(globals.colors.success-050)",
"tertiary-hover": "ref(globals.colors.success-100)",
},
warning: {
primary: "ref(globals.colors.warning-550)",
"primary-hover": "ref(globals.colors.warning-650)",
secondary: "ref(globals.colors.warning-100)",
"secondary-hover": "ref(globals.colors.warning-150)",
tertiary: "ref(globals.colors.warning-050)",
"tertiary-hover": "ref(globals.colors.warning-100)",
},
error: {
primary: "ref(globals.colors.error-550)",
"primary-hover": "ref(globals.colors.error-650)",
secondary: "ref(globals.colors.error-100)",
"secondary-hover": "ref(globals.colors.error-150)",
tertiary: "ref(globals.colors.error-050)",
"tertiary-hover": "ref(globals.colors.error-100)",
},
"color-brand": {
primary: "ref(globals.colors.brand-500)",
secondary: "ref(globals.colors.brand-350)",
tertiary: "ref(globals.colors.brand-150)",
},
red: {
primary: "ref(globals.colors.red-500)",
secondary: "ref(globals.colors.red-350)",
tertiary: "ref(globals.colors.red-150)",
},
orange: {
primary: "ref(globals.colors.orange-500)",
secondary: "ref(globals.colors.orange-350)",
tertiary: "ref(globals.colors.orange-150)",
},
brown: {
primary: "ref(globals.colors.brown-500)",
secondary: "ref(globals.colors.brown-350)",
tertiary: "ref(globals.colors.brown-150)",
},
yellow: {
primary: "ref(globals.colors.yellow-500)",
secondary: "ref(globals.colors.yellow-350)",
tertiary: "ref(globals.colors.yellow-150)",
},
green: {
primary: "ref(globals.colors.green-500)",
secondary: "ref(globals.colors.green-350)",
tertiary: "ref(globals.colors.green-150)",
},
"blue-1": {
primary: "ref(globals.colors.blue-1-500)",
secondary: "ref(globals.colors.blue-1-350)",
tertiary: "ref(globals.colors.blue-1-150)",
},
"blue-2": {
primary: "ref(globals.colors.blue-2-500)",
secondary: "ref(globals.colors.blue-2-350)",
tertiary: "ref(globals.colors.blue-2-150)",
},
purple: {
primary: "ref(globals.colors.purple-500)",
secondary: "ref(globals.colors.purple-350)",
tertiary: "ref(globals.colors.purple-150)",
},
pink: {
primary: "ref(globals.colors.pink-500)",
secondary: "ref(globals.colors.pink-350)",
tertiary: "ref(globals.colors.pink-150)",
},
gray: {
primary: "ref(globals.colors.gray-500)",
secondary: "ref(globals.colors.gray-350)",
tertiary: "ref(globals.colors.gray-150)",
},
disabled: {
primary: "ref(globals.colors.gray-100)",
secondary: "ref(globals.colors.gray-050)",
},
text: {
primary: "ref(globals.colors.black-050)",
},
},
font: {
sizes: fontSizes,
weights: fontWeights,
families: fontFamilies,
letterSpacings: fontLetterSpacings,
content: {
logo1: "ref(globals.colors.logo-1)",
logo2: "ref(globals.colors.logo-2)",
brand: {
primary: "ref(globals.colors.brand-700)",
secondary: "ref(globals.colors.brand-600)",
tertiary: "ref(globals.colors.brand-500)",
"on-brand": "ref(globals.colors.brand-050)",
},
neutral: {
primary: "ref(globals.colors.gray-850)",
secondary: "ref(globals.colors.gray-600)",
tertiary: "ref(globals.colors.gray-500)",
"on-neutral": "ref(globals.colors.gray-050)",
},
contextual: {
primary: "ref(globals.colors.white-950)",
},
info: {
primary: "ref(globals.colors.info-700)",
secondary: "ref(globals.colors.info-600)",
tertiary: "ref(globals.colors.info-500)",
"on-info": "ref(globals.colors.info-050)",
},
success: {
primary: "ref(globals.colors.success-700)",
secondary: "ref(globals.colors.success-600)",
tertiary: "ref(globals.colors.success-500)",
"on-success": "ref(globals.colors.success-050)",
},
warning: {
primary: "ref(globals.colors.warning-700)",
secondary: "ref(globals.colors.warning-600)",
tertiary: "ref(globals.colors.warning-500)",
"on-warning": "ref(globals.colors.warning-050)",
},
error: {
primary: "ref(globals.colors.error-700)",
secondary: "ref(globals.colors.error-600)",
tertiary: "ref(globals.colors.error-500)",
"on-error": "ref(globals.colors.error-050)",
},
disabled: {
primary: "ref(globals.colors.gray-300)",
secondary: "ref(globals.colors.white-500)",
},
},
border: {
surface: {
primary: "ref(globals.colors.gray-100)",
},
brand: {
primary: "ref(globals.colors.brand-550)",
secondary: "ref(globals.colors.brand-300)",
tertiary: "ref(globals.colors.brand-150)",
},
contextual: {
primary: "ref(globals.colors.white-200)",
},
neutral: {
primary: "ref(globals.colors.gray-550)",
secondary: "ref(globals.colors.gray-300)",
tertiary: "ref(globals.colors.gray-150)",
},
info: {
primary: "ref(globals.colors.info-550)",
secondary: "ref(globals.colors.info-300)",
tertiary: "ref(globals.colors.info-150)",
},
success: {
primary: "ref(globals.colors.success-550)",
secondary: "ref(globals.colors.success-300)",
tertiary: "ref(globals.colors.success-150)",
},
warning: {
primary: "ref(globals.colors.warning-550)",
secondary: "ref(globals.colors.warning-300)",
tertiary: "ref(globals.colors.warning-150)",
},
error: {
primary: "ref(globals.colors.error-550)",
secondary: "ref(globals.colors.error-300)",
tertiary: "ref(globals.colors.error-150)",
},
disabled: {
primary: "ref(globals.colors.gray-100)",
},
},
spacings,
transitions,
breakpoints,
},
};
@@ -118,8 +640,214 @@ export default {
themes: {
default: defaultTheme,
dark: {
theme: {
colors: darkColors,
globals,
contextuals: {
background: {
surface: {
primary: "ref(globals.colors.gray-800)",
secondary: "ref(globals.colors.gray-850)",
tertiary: "ref(globals.colors.gray-900)",
},
brand: {
primary: "ref(globals.colors.brand-550)",
"primary-hover": "ref(globals.colors.brand-650)",
secondary: "ref(globals.colors.brand-700)",
"secondary-hover": "ref(globals.colors.brand-750)",
tertiary: "ref(globals.colors.brand-750)",
"tertiary-hover": "ref(globals.colors.brand-800)",
},
neutral: {
primary: "ref(globals.colors.gray-550)",
"primary-hover": "ref(globals.colors.gray-650)",
secondary: "ref(globals.colors.gray-700)",
"secondary-hover": "ref(globals.colors.gray-750)",
tertiary: "ref(globals.colors.gray-750)",
"tertiary-hover": "ref(globals.colors.gray-800)",
},
contextual: {
primary: "ref(globals.colors.white-050)",
"primary-hover": "ref(globals.colors.white-100)",
},
info: {
primary: "ref(globals.colors.info-550)",
"primary-hover": "ref(globals.colors.info-650)",
secondary: "ref(globals.colors.info-700)",
"secondary-hover": "ref(globals.colors.info-750)",
tertiary: "ref(globals.colors.info-750)",
"tertiary-hover": "ref(globals.colors.info-800)",
},
success: {
primary: "ref(globals.colors.success-550)",
"primary-hover": "ref(globals.colors.success-650)",
secondary: "ref(globals.colors.success-700)",
"secondary-hover": "ref(globals.colors.success-750)",
tertiary: "ref(globals.colors.success-750)",
"tertiary-hover": "ref(globals.colors.success-800)",
},
warning: {
primary: "ref(globals.colors.warning-550)",
"primary-hover": "ref(globals.colors.warning-650)",
secondary: "ref(globals.colors.warning-700)",
"secondary-hover": "ref(globals.colors.warning-750)",
tertiary: "ref(globals.colors.warning-750)",
"tertiary-hover": "ref(globals.colors.warning-800)",
},
error: {
primary: "ref(globals.colors.error-550)",
"primary-hover": "ref(globals.colors.error-650)",
secondary: "ref(globals.colors.error-700)",
"secondary-hover": "ref(globals.colors.error-750)",
tertiary: "ref(globals.colors.error-750)",
"tertiary-hover": "ref(globals.colors.error-800)",
},
"color-brand": {
primary: "ref(globals.colors.brand-350)",
secondary: "ref(globals.colors.brand-450)",
tertiary: "ref(globals.colors.brand-550)",
},
red: {
primary: "ref(globals.colors.red-350)",
secondary: "ref(globals.colors.red-450)",
tertiary: "ref(globals.colors.red-550)",
},
orange: {
primary: "ref(globals.colors.orange-350)",
secondary: "ref(globals.colors.orange-450)",
tertiary: "ref(globals.colors.orange-550)",
},
brown: {
primary: "ref(globals.colors.brown-350)",
secondary: "ref(globals.colors.brown-450)",
tertiary: "ref(globals.colors.brown-550)",
},
yellow: {
primary: "ref(globals.colors.yellow-350)",
secondary: "ref(globals.colors.yellow-450)",
tertiary: "ref(globals.colors.yellow-550)",
},
green: {
primary: "ref(globals.colors.green-350)",
secondary: "ref(globals.colors.green-450)",
tertiary: "ref(globals.colors.green-550)",
},
"blue-1": {
primary: "ref(globals.colors.blue-1-350)",
secondary: "ref(globals.colors.blue-1-450)",
tertiary: "ref(globals.colors.blue-1-550)",
},
"blue-2": {
primary: "ref(globals.colors.blue-2-350)",
secondary: "ref(globals.colors.blue-2-450)",
tertiary: "ref(globals.colors.blue-2-550)",
},
purple: {
primary: "ref(globals.colors.purple-350)",
secondary: "ref(globals.colors.purple-450)",
tertiary: "ref(globals.colors.purple-550)",
},
pink: {
primary: "ref(globals.colors.pink-350)",
secondary: "ref(globals.colors.pink-450)",
tertiary: "ref(globals.colors.pink-550)",
},
gray: {
primary: "ref(globals.colors.gray-350)",
secondary: "ref(globals.colors.gray-450)",
tertiary: "ref(globals.colors.gray-550)",
},
disabled: {
primary: "ref(globals.colors.gray-750)",
secondary: "ref(globals.colors.gray-800)",
},
},
content: {
logo1: "ref(globals.colors.logo-1-dark)",
logo2: "ref(globals.colors.logo-2-dark)",
brand: {
primary: "ref(globals.colors.brand-050)",
secondary: "ref(globals.colors.brand-100)",
tertiary: "ref(globals.colors.brand-250)",
"on-brand": "ref(globals.colors.brand-050)",
},
neutral: {
primary: "ref(globals.colors.gray-050)",
secondary: "ref(globals.colors.gray-100)",
tertiary: "ref(globals.colors.gray-250)",
"on-neutral": "ref(globals.colors.gray-050)",
},
contextual: {
primary: "ref(globals.colors.black-850)",
},
info: {
primary: "ref(globals.colors.info-050)",
secondary: "ref(globals.colors.info-100)",
tertiary: "ref(globals.colors.info-250)",
"on-info": "ref(globals.colors.info-050)",
},
success: {
primary: "ref(globals.colors.success-050)",
secondary: "ref(globals.colors.success-100)",
tertiary: "ref(globals.colors.success-250)",
"on-success": "ref(globals.colors.success-050)",
},
warning: {
primary: "ref(globals.colors.warning-050)",
secondary: "ref(globals.colors.warning-100)",
tertiary: "ref(globals.colors.warning-250)",
"on-warning": "ref(globals.colors.warning-050)",
},
error: {
primary: "ref(globals.colors.error-050)",
secondary: "ref(globals.colors.error-100)",
tertiary: "ref(globals.colors.error-250)",
"on-error": "ref(globals.colors.error-050)",
},
disabled: {
primary: "ref(globals.colors.gray-600)",
secondary: "ref(globals.colors.black-300)",
},
},
border: {
surface: {
primary: "ref(globals.colors.gray-750)",
},
brand: {
primary: "ref(globals.colors.brand-450)",
secondary: "ref(globals.colors.brand-600)",
tertiary: "ref(globals.colors.brand-700)",
},
contextual: {
primary: "ref(globals.colors.black-200)",
},
neutral: {
primary: "ref(globals.colors.gray-450)",
secondary: "ref(globals.colors.gray-600)",
tertiary: "ref(globals.colors.gray-700)",
},
info: {
primary: "ref(globals.colors.info-450)",
secondary: "ref(globals.colors.info-600)",
tertiary: "ref(globals.colors.info-700)",
},
success: {
primary: "ref(globals.colors.success-450)",
secondary: "ref(globals.colors.success-600)",
tertiary: "ref(globals.colors.success-700)",
},
warning: {
primary: "ref(globals.colors.warning-450)",
secondary: "ref(globals.colors.warning-600)",
tertiary: "ref(globals.colors.warning-700)",
},
error: {
primary: "ref(globals.colors.error-450)",
secondary: "ref(globals.colors.error-600)",
tertiary: "ref(globals.colors.error-700)",
},
disabled: {
primary: "ref(globals.colors.gray-800)",
},
},
},
},
},

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

@@ -57,6 +57,19 @@ describe("Cunningham Bin", () => {
expect(fs.existsSync(cssTokensFile)).toEqual(true);
expect(fs.readFileSync(cssTokensFile).toString()).toMatchInlineSnapshot(`
":root {
--c--globals--colors--primary: #055FD2;
--c--globals--colors--secondary: #DA0000;
--c--globals--colors--ternary-900: #022858;
--c--globals--colors--ogre-odor-is-orange-indeed: #FD5240;
--c--globals--font--sizes--m: 1rem;
--c--globals--font--weights--medium: 400;
--c--globals--font--families--base: Roboto;
--c--globals--spacings--s: 1rem;
--c--globals--transitions--ease: linear;
--c--globals--input--border-color: var(--c--theme--colors--ternary-900);
--c--contextuals--background--primary: #055FD2;
--c--contextuals--content--primary: #055FD2;
--c--contextuals--border--primary: #055FD2;
--c--theme--colors--primary: #055FD2;
--c--theme--colors--secondary: #DA0000;
--c--theme--colors--ternary-900: #022858;
@@ -96,6 +109,19 @@ describe("Cunningham Bin", () => {
expect(fs.existsSync(cssTokensFile)).toEqual(true);
expect(fs.readFileSync(cssTokensFile).toString()).toMatchInlineSnapshot(`
":root {
--c--globals--colors--primary: #055FD2;
--c--globals--colors--secondary: #DA0000;
--c--globals--colors--ternary-900: #022858;
--c--globals--colors--ogre-odor-is-orange-indeed: #FD5240;
--c--globals--font--sizes--m: 1rem;
--c--globals--font--weights--medium: 400;
--c--globals--font--families--base: Roboto;
--c--globals--spacings--s: 1rem;
--c--globals--transitions--ease: linear;
--c--globals--input--border-color: var(--c--theme--colors--ternary-900);
--c--contextuals--background--primary: #055FD2;
--c--contextuals--content--primary: #055FD2;
--c--contextuals--border--primary: #055FD2;
--c--theme--colors--primary: AntiqueWhite;
--c--theme--colors--secondary: #DA0000;
--c--theme--colors--ternary-900: #022858;
@@ -148,6 +174,19 @@ describe("Cunningham Bin", () => {
expect(fs.existsSync(cssTokensFile)).toEqual(true);
expect(fs.readFileSync(cssTokensFile).toString()).toMatchInlineSnapshot(`
":root {
--c--globals--colors--primary: #055FD2;
--c--globals--colors--secondary: #DA0000;
--c--globals--colors--ternary-900: #022858;
--c--globals--colors--ogre-odor-is-orange-indeed: #FD5240;
--c--globals--font--sizes--m: 1rem;
--c--globals--font--weights--medium: 400;
--c--globals--font--families--base: Roboto;
--c--globals--spacings--s: 1rem;
--c--globals--transitions--ease: linear;
--c--globals--input--border-color: var(--c--theme--colors--ternary-900);
--c--contextuals--background--primary: #055FD2;
--c--contextuals--content--primary: #055FD2;
--c--contextuals--border--primary: #055FD2;
--c--theme--colors--primary: #055FD2;
--c--theme--colors--secondary: #DA0000;
--c--theme--colors--ternary-900: #022858;

2
packages/tokens/src/lib/cunningham-tokens.ts
View File

File diff suppressed because one or more lines are too long

3
packages/tokens/src/lib/index.ts
View File

@@ -2,7 +2,10 @@ import { tokens } from "./cunningham-tokens";
export type Configuration = typeof tokens;
export type DefaultTokens = (typeof tokens)["themes"]["default"];
export type DarkTokens = (typeof tokens)["themes"]["dark"];
export const defaultTokens = tokens.themes.default;
export const darkTokens = tokens.themes.dark;
export const defaultThemes = tokens.themes;
/**
* Transform such object: