From e24845b427e97b2689898a61307522f385ecf8b0 Mon Sep 17 00:00:00 2001 From: Nathan Panchout Date: Wed, 17 Sep 2025 13:12:49 +0200 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(tokens)=20improve=20tokens?= =?UTF-8?q?=20generation=20algo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This way the code is more readable, it makes easier the future maintenability. --- .../src/bin/Generators/CssGenerator.spec.ts | 48 +- .../tokens/src/bin/Generators/CssGenerator.ts | 269 ++-- .../src/bin/Generators/JsGenerator.spec.ts | 4 + .../tokens/src/bin/tests/Cunningham.spec.ts | 1189 ++++++++++++++++- packages/tokens/src/lib/index.ts | 3 +- 5 files changed, 1316 insertions(+), 197 deletions(-) diff --git a/packages/tokens/src/bin/Generators/CssGenerator.spec.ts b/packages/tokens/src/bin/Generators/CssGenerator.spec.ts index e164445..8971070 100644 --- a/packages/tokens/src/bin/Generators/CssGenerator.spec.ts +++ b/packages/tokens/src/bin/Generators/CssGenerator.spec.ts @@ -51,10 +51,10 @@ describe("CssGenerator", () => { --c--components--button--font-family: Times New Roman,Helvetica Neue,Segoe UI; } .cunningham-theme--dark{ - --c--theme--colors--primary: black; + --c--globals--colors--primary: black; } .cunningham-theme--custom{ - --c--theme--colors--primary: green; + --c--globals--colors--primary: green; } " `); @@ -101,10 +101,10 @@ describe("CssGenerator", () => { --c--components--button--font-family: Times New Roman,Helvetica Neue,Segoe UI; } .cunningham-theme--dark{ - --c--theme--colors--primary: black; + --c--globals--colors--primary: black; } .cunningham-theme--custom{ - --c--theme--colors--primary: green; + --c--globals--colors--primary: green; } .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); } @@ -113,42 +113,18 @@ describe("CssGenerator", () => { .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); } +.bg-primary { background-color: var(--c--contextuals--background--primary); } .fw-medium { font-weight: var(--c--globals--font--weights--medium); } .fs-m { - font-size: var(--c--globals--font--sizes--m); - letter-spacing: var(--c--globals--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--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); } +.p-s { margin: var(--c--globals--spacings--s); }.pb-s { margin-bottom: var(--c--globals--spacings--s); }.pt-s { margin-top: var(--c--globals--spacings--s); }.pl-s { margin-left: var(--c--globals--spacings--s); }.pr-s { margin-right: var(--c--globals--spacings--s); } +.border-clr-primary { border-color: var(--c--contextuals--border--primary); } +.border-thin-primary { border: 1px solid var(--c--contextuals--border--primary); } +.clr-content-primary { color: var(--c--contextuals--content--primary); } " `); }); diff --git a/packages/tokens/src/bin/Generators/CssGenerator.ts b/packages/tokens/src/bin/Generators/CssGenerator.ts index f7c4f68..e933153 100644 --- a/packages/tokens/src/bin/Generators/CssGenerator.ts +++ b/packages/tokens/src/bin/Generators/CssGenerator.ts @@ -5,8 +5,47 @@ import { Generator, resolveRefs } from "Generators/index"; import { put } from "Utils/Files"; import { Tokens } from "TokensGenerator"; +/** + * Interface for objects containing path and value information + */ +interface PathValueObject { + path: string[]; + value: any; +} + export const THEME_CLASSNAME_PREFIX = "cunningham-theme--"; +/** + * Creates an array of objects containing path arrays and leaf values from a nested object + * @param obj - The object to traverse + * @param currentPath - Current path being built (used internally for recursion) + * @returns Array of objects with 'path' (array of keys) and 'value' (leaf value) properties + */ +export function createPathValueArray( + obj: any, + currentPath: string[] = [], +): PathValueObject[] { + const result: PathValueObject[] = []; + + Object.entries(obj).forEach(([key, value]) => { + const newPath = [...currentPath, key]; + + // Check if the value is an object and not null/undefined + if (value !== null && typeof value === "object" && !Array.isArray(value)) { + // Recursively process nested objects + result.push(...createPathValueArray(value, newPath)); + } else { + // This is a leaf value + result.push({ + path: newPath, + value, + }); + } + }); + + return result; +} + export const cssGenerator: Generator = async (tokens, opts) => { // Replace refs by CSS variables. tokens = resolveRefs(tokens, (ref) => { @@ -72,74 +111,42 @@ function generateColorClasses(tokens: Tokens) { * @param tokens */ function generateBgClasses(tokens: Tokens) { - const flatTokens = flatify(tokens.themes.default, Config.sass.varSeparator); - - return Object.keys(flatTokens) - .filter((key) => { - // Only include keys that are related to colors (globals.colors or contextuals.background) - return ( - key.startsWith("globals--colors--") || - key.startsWith("contextuals--background--") - ); - }) - .map((key) => { - // Convert the flat key to CSS class name - let className = key; - - // Handle globals.colors - if (key.startsWith("globals--colors--")) { - className = key.replace("globals--colors--", ""); - } - // Handle contextuals.background - else if (key.startsWith("contextuals--background--")) { - className = key.replace("contextuals--background--", ""); - } - - // Convert separators to hyphens for CSS class names - className = className.replace( - new RegExp(Config.sass.varSeparator, "g"), - "-", - ); - - const a = `.bg-${className} { background-color: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`; - // console.log(a); - return a; - }); + const bgContextual = createPathValueArray( + tokens.themes.default.contextuals.background, + ); + const bgContextualClasses = bgContextual.map((key) => { + return `.bg-${key.path.join("-")} { background-color: var(--${Config.sass.varPrefix}contextuals--background--${key.path.join("--")}); }`; + }); + const bgGlobal = createPathValueArray(tokens.themes.default.globals.colors); + const bgGlobalClasses = bgGlobal.map((key) => { + return `.bg-${key.path.join("-")} { background-color: var(--${Config.sass.varPrefix}globals--colors--${key.path.join("--")}); }`; + }); + return [...bgGlobalClasses, ...bgContextualClasses]; } function generateBorderClasses(tokens: Tokens) { - const flatTokens = flatify(tokens.themes.default, Config.sass.varSeparator); - - return Object.keys(flatTokens) - .filter((key) => { - // Only include keys that are related to borders (contextuals.border) - return key.startsWith("contextuals--border--"); - }) - .flatMap((key) => { - // Convert the flat key to CSS class name - const className = key.replace("contextuals--border--", ""); - + const bgContextual = createPathValueArray( + tokens.themes.default.contextuals.border, + ); + const bgContextualClasses = bgContextual + .map((key) => { return [ - `.border-clr-${className} { border-color: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`, - `.border-thin-${className} { border: 1px solid var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`, + `.border-clr-${key.path.join("-")} { border-color: var(--${Config.sass.varPrefix}contextuals--border--${key.path.join("--")}); }`, + `.border-thin-${key.path.join("-")} { border: 1px solid var(--${Config.sass.varPrefix}contextuals--border--${key.path.join("--")}); }`, ]; - }); + }) + .flat(); + + return bgContextualClasses; } function generateContentClasses(tokens: Tokens) { - const flatTokens = flatify(tokens.themes.default, Config.sass.varSeparator); - - return Object.keys(flatTokens) - .filter((key) => { - // Only include keys that are related to content (contextuals.content) - return key.startsWith("contextuals--content--"); - }) - .map((key) => { - // Convert the flat key to CSS class name - const className = key.replace("contextuals--content--", ""); - - return `.clr-content-${className} { color: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`; - }); + const bgContextual = createPathValueArray( + tokens.themes.default.contextuals.content, + ); + return bgContextual.map((key) => { + return `.clr-content-${key.path.join("-")} { color: var(--${Config.sass.varPrefix}contextuals--content--${key.path.join("--")}); }`; + }); } /** @@ -149,19 +156,13 @@ function generateContentClasses(tokens: Tokens) { * @param tokens */ function generateClrClasses(tokens: Tokens) { - const flatTokens = flatify(tokens.themes.default, Config.sass.varSeparator); + const bgContextual = createPathValueArray( + tokens.themes.default.globals.colors, + ); - return Object.keys(flatTokens) - .filter((key) => { - // Only include keys that are related to colors (globals.colors) - return key.startsWith("globals--colors--"); - }) - .map((key) => { - // Convert the flat key to CSS class name - const className = key.replace("globals--colors--", ""); - - return `.clr-${className} { color: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`; - }); + return bgContextual.map((key) => { + return `.clr-${key.path.join("-")} { color: var(--${Config.sass.varPrefix}globals--colors--${key.path.join("--")}); }`; + }); } function generateFontClasses(tokens: Tokens) { @@ -179,19 +180,12 @@ function generateFontClasses(tokens: Tokens) { * @param tokens */ function generateFwClasses(tokens: Tokens) { - const flatTokens = flatify(tokens.themes.default, Config.sass.varSeparator); - - return Object.keys(flatTokens) - .filter((key) => { - // Only include keys that are related to font weights (globals.font.weights) - return key.startsWith("globals--font--weights--"); - }) - .map((key) => { - // Convert the flat key to CSS class name - const className = key.replace("globals--font--weights--", ""); - - return `.fw-${className} { font-weight: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`; - }); + const tokensWeights = createPathValueArray( + tokens.themes.default.globals.font.weights, + ); + return tokensWeights.map((key) => { + return `.fw-${key.path.join("-")} { font-weight: var(--${Config.sass.varPrefix}globals--font--weights--${key.path.join("--")}); }`; + }); } /** @@ -201,22 +195,15 @@ function generateFwClasses(tokens: Tokens) { * @param tokens */ function generateFsClasses(tokens: Tokens) { - const flatTokens = flatify(tokens.themes.default, Config.sass.varSeparator); - - return Object.keys(flatTokens) - .filter((key) => { - // Only include keys that are related to font sizes (globals.font.sizes) - return key.startsWith("globals--font--sizes--"); - }) - .map((key) => { - // Convert the flat key to CSS class name - const className = key.replace("globals--font--sizes--", ""); - - return `.fs-${className} { - font-size: var(--${Config.sass.varPrefix}${key.toLowerCase()}); - letter-spacing: var(--${Config.sass.varPrefix}${key.replace("sizes", "letterspacings").toLowerCase()}); - }`; - }); + const tokensSizes = createPathValueArray( + tokens.themes.default.globals.font.sizes, + ); + return tokensSizes.map((key) => { + return `.fs-${key.path.join("-")} { + font-size: var(--${Config.sass.varPrefix}globals--font--sizes--${key.path.join("--")}); + letter-spacing: var(--${Config.sass.varPrefix}globals--font--letterspacings--${key.path.join("--")}); + }`; + }); } /** @@ -226,19 +213,13 @@ function generateFsClasses(tokens: Tokens) { * @param tokens */ function generateFClasses(tokens: Tokens) { - const flatTokens = flatify(tokens.themes.default, Config.sass.varSeparator); + const tokensFamilies = createPathValueArray( + tokens.themes.default.globals.font.families, + ); - return Object.keys(flatTokens) - .filter((key) => { - // Only include keys that are related to font families (globals.font.families) - return key.startsWith("globals--font--families--"); - }) - .map((key) => { - // Convert the flat key to CSS class name - const className = key.replace("globals--font--families--", ""); - - return `.f-${className} { font-family: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`; - }); + return tokensFamilies.map((key) => { + return `.f-${key.path.join("-")} { font-family: var(--${Config.sass.varPrefix}globals--font--families--${key.path.join("--")}); }`; + }); } function generateSpacingClasses(tokens: Tokens) { @@ -252,25 +233,18 @@ function generateSpacingClasses(tokens: Tokens) { * @param tokens */ function generateMarginClasses(tokens: Tokens) { - const flatTokens = flatify(tokens.themes.default, Config.sass.varSeparator); - - return Object.keys(flatTokens) - .filter((key) => { - // Only include keys that are related to spacings (globals.spacings) - return key.startsWith("globals--spacings--"); - }) - .map((key) => { - // Convert the flat key to CSS class name - const className = key.replace("globals--spacings--", ""); - - return [ - `.m-${className} { margin: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`, - `.mb-${className} { margin-bottom: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`, - `.mt-${className} { margin-top: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`, - `.ml-${className} { margin-left: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`, - `.mr-${className} { margin-right: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`, - ].join(""); - }); + const tokensSpacings = createPathValueArray( + tokens.themes.default.globals.spacings, + ); + return tokensSpacings.map((key) => { + return [ + `.m-${key.path.join("-")} { margin: var(--${Config.sass.varPrefix}globals--spacings--${key.path.join("--")}); }`, + `.mb-${key.path.join("-")} { margin-bottom: var(--${Config.sass.varPrefix}globals--spacings--${key.path.join("--")}); }`, + `.mt-${key.path.join("-")} { margin-top: var(--${Config.sass.varPrefix}globals--spacings--${key.path.join("--")}); }`, + `.ml-${key.path.join("-")} { margin-left: var(--${Config.sass.varPrefix}globals--spacings--${key.path.join("--")}); }`, + `.mr-${key.path.join("-")} { margin-right: var(--${Config.sass.varPrefix}globals--spacings--${key.path.join("--")}); }`, + ].join(""); + }); } /** @@ -280,23 +254,16 @@ function generateMarginClasses(tokens: Tokens) { * @param tokens */ function generatePaddingClasses(tokens: Tokens) { - const flatTokens = flatify(tokens.themes.default, Config.sass.varSeparator); - - return Object.keys(flatTokens) - .filter((key) => { - // Only include keys that are related to spacings (globals.spacings) - return key.startsWith("globals--spacings--"); - }) - .map((key) => { - // Convert the flat key to CSS class name - const className = key.replace("globals--spacings--", ""); - - return [ - `.p-${className} { padding: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`, - `.pb-${className} { padding-bottom: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`, - `.pt-${className} { padding-top: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`, - `.pl-${className} { padding-left: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`, - `.pr-${className} { padding-right: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`, - ].join(""); - }); + const tokensSpacings = createPathValueArray( + tokens.themes.default.globals.spacings, + ); + return tokensSpacings.map((key) => { + return [ + `.p-${key.path.join("-")} { margin: var(--${Config.sass.varPrefix}globals--spacings--${key.path.join("--")}); }`, + `.pb-${key.path.join("-")} { margin-bottom: var(--${Config.sass.varPrefix}globals--spacings--${key.path.join("--")}); }`, + `.pt-${key.path.join("-")} { margin-top: var(--${Config.sass.varPrefix}globals--spacings--${key.path.join("--")}); }`, + `.pl-${key.path.join("-")} { margin-left: var(--${Config.sass.varPrefix}globals--spacings--${key.path.join("--")}); }`, + `.pr-${key.path.join("-")} { margin-right: var(--${Config.sass.varPrefix}globals--spacings--${key.path.join("--")}); }`, + ].join(""); + }); } diff --git a/packages/tokens/src/bin/Generators/JsGenerator.spec.ts b/packages/tokens/src/bin/Generators/JsGenerator.spec.ts index 36ab4dd..dcdbed9 100644 --- a/packages/tokens/src/bin/Generators/JsGenerator.spec.ts +++ b/packages/tokens/src/bin/Generators/JsGenerator.spec.ts @@ -25,6 +25,10 @@ describe("JsGenerator", () => { expect(fs.existsSync(tokensFile)).toEqual(true); // Verify file content exists and contains expected structure const content = fs.readFileSync(tokensFile).toString(); + expect(fs.readFileSync(tokensFile).toString()).toMatchInlineSnapshot(` +"export const tokens = {"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":"#022858"}},"contextuals":{"background":{"primary":"#055FD2"},"content":{"primary":"#055FD2"},"border":{"primary":"#055FD2"}},"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":{"globals":{"colors":{"primary":"black"}}},"custom":{"globals":{"colors":{"primary":"green"}}}}}; +" +`); expect(content).toBeTruthy(); expect(content.length).toBeGreaterThan(0); expect(content).toContain("export const tokens = {"); diff --git a/packages/tokens/src/bin/tests/Cunningham.spec.ts b/packages/tokens/src/bin/tests/Cunningham.spec.ts index e7d63e2..5d523a2 100644 --- a/packages/tokens/src/bin/tests/Cunningham.spec.ts +++ b/packages/tokens/src/bin/tests/Cunningham.spec.ts @@ -83,10 +83,10 @@ describe("Cunningham Bin", () => { --c--components--button--font-family: Times New Roman,Helvetica Neue,Segoe UI; } .cunningham-theme--dark{ - --c--theme--colors--primary: black; + --c--globals--colors--primary: black; } .cunningham-theme--custom{ - --c--theme--colors--primary: green; + --c--globals--colors--primary: green; } " `); @@ -135,10 +135,10 @@ describe("Cunningham Bin", () => { --c--components--button--font-family: Times New Roman,Helvetica Neue,Segoe UI; } .cunningham-theme--dark{ - --c--theme--colors--primary: black; + --c--globals--colors--primary: black; } .cunningham-theme--custom{ - --c--theme--colors--primary: green; + --c--globals--colors--primary: green; } " `); @@ -162,8 +162,1181 @@ describe("Cunningham Bin", () => { await runBin(`-g css -w ${__dirname}`); expect(fs.existsSync(cssTokensFile)).toEqual(true); - expect(fs.readFileSync(cssTokensFile).toString()).toContain(` -\t--c--theme--colors--primary: typescript;`); + expect(fs.readFileSync(cssTokensFile).toString()).toMatchInlineSnapshot(` +":root { + --c--globals--colors--logo-1: #377FDB; + --c--globals--colors--logo-2: #377FDB; + --c--globals--colors--logo-1-dark: #95ABFF; + --c--globals--colors--logo-2-dark: #95ABFF; + --c--globals--colors--brand-050: #EAF1FB; + --c--globals--colors--brand-100: #D5E4F7; + --c--globals--colors--brand-150: #C0D6F4; + --c--globals--colors--brand-200: #ABC9F0; + --c--globals--colors--brand-250: #96BCEC; + --c--globals--colors--brand-300: #80AEE8; + --c--globals--colors--brand-350: #6CA0E4; + --c--globals--colors--brand-400: #5693E0; + --c--globals--colors--brand-450: #4085DC; + --c--globals--colors--brand-500: #2976D8; + --c--globals--colors--brand-550: #1167D4; + --c--globals--colors--brand-600: #0659C5; + --c--globals--colors--brand-650: #1A509F; + --c--globals--colors--brand-700: #20467F; + --c--globals--colors--brand-750: #203C63; + --c--globals--colors--brand-800: #1D314C; + --c--globals--colors--brand-850: #1A2638; + --c--globals--colors--brand-900: #141C28; + --c--globals--colors--brand-950: #0C1117; + --c--globals--colors--gray-000: #FFFFFF; + --c--globals--colors--gray-025: #F7F8F8; + --c--globals--colors--gray-050: #F0F1F2; + --c--globals--colors--gray-100: #E1E2E5; + --c--globals--colors--gray-150: #D2D4D8; + --c--globals--colors--gray-200: #C4C7CB; + --c--globals--colors--gray-250: #B5B9BE; + --c--globals--colors--gray-300: #A7ACB2; + --c--globals--colors--gray-350: #999EA5; + --c--globals--colors--gray-400: #8D9197; + --c--globals--colors--gray-450: #80848A; + --c--globals--colors--gray-500: #74777C; + --c--globals--colors--gray-550: #686B6F; + --c--globals--colors--gray-600: #5C5F63; + --c--globals--colors--gray-650: #505356; + --c--globals--colors--gray-700: #45474A; + --c--globals--colors--gray-750: #3A3B3E; + --c--globals--colors--gray-800: #2F3033; + --c--globals--colors--gray-850: #252627; + --c--globals--colors--gray-900: #1B1C1D; + --c--globals--colors--gray-950: #101112; + --c--globals--colors--gray-1000: #000000; + --c--globals--colors--info-050: #EAF1FB; + --c--globals--colors--info-100: #D5E4F7; + --c--globals--colors--info-150: #C0D6F4; + --c--globals--colors--info-200: #ABC9F0; + --c--globals--colors--info-250: #96BCEC; + --c--globals--colors--info-300: #80AEE8; + --c--globals--colors--info-350: #6CA0E4; + --c--globals--colors--info-400: #5693E0; + --c--globals--colors--info-450: #4085DC; + --c--globals--colors--info-500: #2976D8; + --c--globals--colors--info-550: #1167D4; + --c--globals--colors--info-600: #0659C5; + --c--globals--colors--info-650: #1A509F; + --c--globals--colors--info-700: #20467F; + --c--globals--colors--info-750: #203C63; + --c--globals--colors--info-800: #1D314C; + --c--globals--colors--info-850: #1A2638; + --c--globals--colors--info-900: #141C28; + --c--globals--colors--info-950: #0C1117; + --c--globals--colors--success-050: #E4F7D4; + --c--globals--colors--success-100: #C8EEA8; + --c--globals--colors--success-150: #AAE579; + --c--globals--colors--success-200: #89DC45; + --c--globals--colors--success-250: #72CF27; + --c--globals--colors--success-300: #6AC024; + --c--globals--colors--success-350: #61B121; + --c--globals--colors--success-400: #59A21E; + --c--globals--colors--success-450: #51941C; + --c--globals--colors--success-500: #4B851A; + --c--globals--colors--success-550: #427816; + --c--globals--colors--success-600: #3A6A14; + --c--globals--colors--success-650: #385C1F; + --c--globals--colors--success-700: #344D24; + --c--globals--colors--success-750: #2E4022; + --c--globals--colors--success-800: #27341F; + --c--globals--colors--success-850: #20281A; + --c--globals--colors--success-900: #181D15; + --c--globals--colors--success-950: #10120E; + --c--globals--colors--warning-050: #FFF1BD; + --c--globals--colors--warning-100: #FFE176; + --c--globals--colors--warning-150: #FFCF25; + --c--globals--colors--warning-200: #F4BF06; + --c--globals--colors--warning-250: #E3B205; + --c--globals--colors--warning-300: #D3A504; + --c--globals--colors--warning-350: #C29805; + --c--globals--colors--warning-400: #B28C03; + --c--globals--colors--warning-450: #A27F03; + --c--globals--colors--warning-500: #937303; + --c--globals--colors--warning-550: #836703; + --c--globals--colors--warning-600: #745B03; + --c--globals--colors--warning-650: #625019; + --c--globals--colors--warning-700: #524620; + --c--globals--colors--warning-750: #443B20; + --c--globals--colors--warning-800: #36301D; + --c--globals--colors--warning-850: #2A2619; + --c--globals--colors--warning-900: #1E1C13; + --c--globals--colors--warning-950: #12110C; + --c--globals--colors--error-050: #FCEDED; + --c--globals--colors--error-100: #FADBDB; + --c--globals--colors--error-150: #F7C9C9; + --c--globals--colors--error-200: #F5B7B7; + --c--globals--colors--error-250: #F2A4A4; + --c--globals--colors--error-300: #EF9191; + --c--globals--colors--error-350: #EC7D7D; + --c--globals--colors--error-400: #E96868; + --c--globals--colors--error-450: #E55050; + --c--globals--colors--error-500: #E13131; + --c--globals--colors--error-550: #D80000; + --c--globals--colors--error-600: #C00101; + --c--globals--colors--error-650: #9E2219; + --c--globals--colors--error-700: #802820; + --c--globals--colors--error-750: #662820; + --c--globals--colors--error-800: #4F231E; + --c--globals--colors--error-850: #3B1D19; + --c--globals--colors--error-900: #2A1614; + --c--globals--colors--error-950: #1A0E0C; + --c--globals--colors--red-050: #FDEDED; + --c--globals--colors--red-100: #FADBDB; + --c--globals--colors--red-150: #F8C9C9; + --c--globals--colors--red-200: #F5B7B6; + --c--globals--colors--red-250: #F3A4A3; + --c--globals--colors--red-300: #F09190; + --c--globals--colors--red-350: #EE7C7B; + --c--globals--colors--red-400: #EB6665; + --c--globals--colors--red-450: #E74E4D; + --c--globals--colors--red-500: #D83F3D; + --c--globals--colors--red-550: #C23837; + --c--globals--colors--red-600: #AC3231; + --c--globals--colors--red-650: #8D3531; + --c--globals--colors--red-700: #73332F; + --c--globals--colors--red-750: #5B2F2B; + --c--globals--colors--red-800: #472826; + --c--globals--colors--red-850: #35211F; + --c--globals--colors--red-900: #251817; + --c--globals--colors--red-950: #160F0E; + --c--globals--colors--orange-050: #FDEEE2; + --c--globals--colors--orange-100: #FCDDC5; + --c--globals--colors--orange-150: #FACBA8; + --c--globals--colors--orange-200: #F8B98B; + --c--globals--colors--orange-250: #F6A76A; + --c--globals--colors--orange-300: #F4934B; + --c--globals--colors--orange-350: #F27E27; + --c--globals--colors--orange-400: #E76E12; + --c--globals--colors--orange-450: #D26411; + --c--globals--colors--orange-500: #BE5B0F; + --c--globals--colors--orange-550: #AA510E; + --c--globals--colors--orange-600: #97480C; + --c--globals--colors--orange-650: #7E431D; + --c--globals--colors--orange-700: #673C22; + --c--globals--colors--orange-750: #533422; + --c--globals--colors--orange-800: #412C1F; + --c--globals--colors--orange-850: #31231B; + --c--globals--colors--orange-900: #221A14; + --c--globals--colors--orange-950: #15100C; + --c--globals--colors--brown-050: #F3F0EF; + --c--globals--colors--brown-100: #E7E1DF; + --c--globals--colors--brown-150: #DCD2CF; + --c--globals--colors--brown-200: #D0C4BF; + --c--globals--colors--brown-250: #C5B6B0; + --c--globals--colors--brown-300: #BAA7A1; + --c--globals--colors--brown-350: #AF9992; + --c--globals--colors--brown-400: #A48B83; + --c--globals--colors--brown-450: #997E74; + --c--globals--colors--brown-500: #8F7065; + --c--globals--colors--brown-550: #846357; + --c--globals--colors--brown-600: #7A5649; + --c--globals--colors--brown-650: #684C42; + --c--globals--colors--brown-700: #57423C; + --c--globals--colors--brown-750: #463833; + --c--globals--colors--brown-800: #382E2A; + --c--globals--colors--brown-850: #2B2422; + --c--globals--colors--brown-900: #1F1B19; + --c--globals--colors--brown-950: #121010; + --c--globals--colors--yellow-050: #FAF0D3; + --c--globals--colors--yellow-100: #F5E2A4; + --c--globals--colors--yellow-150: #F0D275; + --c--globals--colors--yellow-200: #EBC242; + --c--globals--colors--yellow-250: #E4B213; + --c--globals--colors--yellow-300: #D4A511; + --c--globals--colors--yellow-350: #C39810; + --c--globals--colors--yellow-400: #B38B0F; + --c--globals--colors--yellow-450: #A37F0D; + --c--globals--colors--yellow-500: #93730C; + --c--globals--colors--yellow-550: #84670B; + --c--globals--colors--yellow-600: #755B0A; + --c--globals--colors--yellow-650: #63501C; + --c--globals--colors--yellow-700: #534521; + --c--globals--colors--yellow-750: #443A21; + --c--globals--colors--yellow-800: #36301F; + --c--globals--colors--yellow-850: #29261A; + --c--globals--colors--yellow-900: #1D1C14; + --c--globals--colors--yellow-950: #12110C; + --c--globals--colors--green-050: #E2F6E5; + --c--globals--colors--green-100: #C5ECCA; + --c--globals--colors--green-150: #A7E3AF; + --c--globals--colors--green-200: #89D894; + --c--globals--colors--green-250: #67CE75; + --c--globals--colors--green-300: #4DC25D; + --c--globals--colors--green-350: #48B257; + --c--globals--colors--green-400: #41A44F; + --c--globals--colors--green-450: #3B9548; + --c--globals--colors--green-500: #368741; + --c--globals--colors--green-550: #30793A; + --c--globals--colors--green-600: #2B6B33; + --c--globals--colors--green-650: #2F5C34; + --c--globals--colors--green-700: #2E4E31; + --c--globals--colors--green-750: #2A412C; + --c--globals--colors--green-800: #253426; + --c--globals--colors--green-850: #1E281F; + --c--globals--colors--green-900: #171D17; + --c--globals--colors--green-950: #0F120F; + --c--globals--colors--blue-1-050: #EBF1FF; + --c--globals--colors--blue-1-100: #D6E3FE; + --c--globals--colors--blue-1-150: #C2D5FE; + --c--globals--colors--blue-1-200: #ADC7FE; + --c--globals--colors--blue-1-250: #99B8FD; + --c--globals--colors--blue-1-300: #84AAFD; + --c--globals--colors--blue-1-350: #6F9BFD; + --c--globals--colors--blue-1-400: #5A8DFB; + --c--globals--colors--blue-1-450: #437DFC; + --c--globals--colors--blue-1-500: #3D71E4; + --c--globals--colors--blue-1-550: #3665CC; + --c--globals--colors--blue-1-600: #305AB5; + --c--globals--colors--blue-1-650: #315093; + --c--globals--colors--blue-1-700: #2E4675; + --c--globals--colors--blue-1-750: #293B5E; + --c--globals--colors--blue-1-800: #243048; + --c--globals--colors--blue-1-850: #1E2635; + --c--globals--colors--blue-1-900: #171C25; + --c--globals--colors--blue-1-950: #0E1116; + --c--globals--colors--blue-2-050: #E2F4F9; + --c--globals--colors--blue-2-100: #C5E9F3; + --c--globals--colors--blue-2-150: #A7DDED; + --c--globals--colors--blue-2-200: #88D1E6; + --c--globals--colors--blue-2-250: #68C5E0; + --c--globals--colors--blue-2-300: #48B8D9; + --c--globals--colors--blue-2-350: #3BAACA; + --c--globals--colors--blue-2-400: #359CB9; + --c--globals--colors--blue-2-450: #318EA9; + --c--globals--colors--blue-2-500: #2C8199; + --c--globals--colors--blue-2-550: #277389; + --c--globals--colors--blue-2-600: #236679; + --c--globals--colors--blue-2-650: #2A5866; + --c--globals--colors--blue-2-700: #2A4B55; + --c--globals--colors--blue-2-750: #283F47; + --c--globals--colors--blue-2-800: #233337; + --c--globals--colors--blue-2-850: #1D272A; + --c--globals--colors--blue-2-900: #161C1E; + --c--globals--colors--blue-2-950: #0E1112; + --c--globals--colors--purple-050: #F6EEFF; + --c--globals--colors--purple-100: #ECDCFF; + --c--globals--colors--purple-150: #E3CBFE; + --c--globals--colors--purple-200: #DAB9FE; + --c--globals--colors--purple-250: #D0A7FE; + --c--globals--colors--purple-300: #C795FE; + --c--globals--colors--purple-350: #BD83FD; + --c--globals--colors--purple-400: #B36FFD; + --c--globals--colors--purple-450: #A85BFD; + --c--globals--colors--purple-500: #9B4BF3; + --c--globals--colors--purple-550: #8B43DA; + --c--globals--colors--purple-600: #7B3CC1; + --c--globals--colors--purple-650: #673C9B; + --c--globals--colors--purple-700: #56387D; + --c--globals--colors--purple-750: #463162; + --c--globals--colors--purple-800: #382A4A; + --c--globals--colors--purple-850: #2A2237; + --c--globals--colors--purple-900: #1E1926; + --c--globals--colors--purple-950: #121017; + --c--globals--colors--pink-050: #FCEDF5; + --c--globals--colors--pink-100: #F9DAEA; + --c--globals--colors--pink-150: #F7C7E0; + --c--globals--colors--pink-200: #F4B4D5; + --c--globals--colors--pink-250: #F1A1CA; + --c--globals--colors--pink-300: #EE8CBF; + --c--globals--colors--pink-350: #EA77B3; + --c--globals--colors--pink-400: #E760A6; + --c--globals--colors--pink-450: #E24797; + --c--globals--colors--pink-500: #CD4089; + --c--globals--colors--pink-550: #B8397B; + --c--globals--colors--pink-600: #A3336D; + --c--globals--colors--pink-650: #86355E; + --c--globals--colors--pink-700: #6E334F; + --c--globals--colors--pink-750: #582E42; + --c--globals--colors--pink-800: #442834; + --c--globals--colors--pink-850: #332028; + --c--globals--colors--pink-900: #24181D; + --c--globals--colors--pink-950: #160F12; + --c--globals--colors--black-000: #00000000; + --c--globals--colors--black-050: #0000000D; + --c--globals--colors--black-100: #0000001A; + --c--globals--colors--black-150: #00000026; + --c--globals--colors--black-200: #00000033; + --c--globals--colors--black-250: #00000040; + --c--globals--colors--black-300: #0000004D; + --c--globals--colors--black-350: #00000059; + --c--globals--colors--black-400: #00000066; + --c--globals--colors--black-450: #00000073; + --c--globals--colors--black-500: #00000080; + --c--globals--colors--black-550: #0000008C; + --c--globals--colors--black-600: #00000099; + --c--globals--colors--black-650: #000000A6; + --c--globals--colors--black-700: #000000B3; + --c--globals--colors--black-750: #000000BF; + --c--globals--colors--black-800: #000000CC; + --c--globals--colors--black-850: #000000D9; + --c--globals--colors--black-900: #000000E6; + --c--globals--colors--black-950: #000000F2; + --c--globals--colors--white-000: #FFFFFF; + --c--globals--colors--white-050: #FFFFFF0D; + --c--globals--colors--white-100: #FFFFFF1A; + --c--globals--colors--white-150: #FFFFFF26; + --c--globals--colors--white-200: #FFFFFF33; + --c--globals--colors--white-250: #FFFFFF40; + --c--globals--colors--white-300: #FFFFFF4D; + --c--globals--colors--white-350: #FFFFFF59; + --c--globals--colors--white-400: #FFFFFF66; + --c--globals--colors--white-450: #FFFFFF73; + --c--globals--colors--white-500: #FFFFFF80; + --c--globals--colors--white-550: #FFFFFF8C; + --c--globals--colors--white-600: #FFFFFF99; + --c--globals--colors--white-650: #FFFFFFA6; + --c--globals--colors--white-700: #FFFFFFB3; + --c--globals--colors--white-750: #FFFFFFBF; + --c--globals--colors--white-800: #FFFFFFCC; + --c--globals--colors--white-850: #FFFFFFD9; + --c--globals--colors--white-900: #FFFFFFE6; + --c--globals--colors--white-950: #FFFFFFF2; + --c--globals--transitions--ease-in: cubic-bezier(0.32, 0, 0.67, 0); + --c--globals--transitions--ease-out: cubic-bezier(0.33, 1, 0.68, 1); + --c--globals--transitions--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); + --c--globals--transitions--duration: 250ms; + --c--globals--font--sizes--xs: 0.75rem; + --c--globals--font--sizes--sm: 0.875rem; + --c--globals--font--sizes--md: 1rem; + --c--globals--font--sizes--lg: 1.125rem; + --c--globals--font--sizes--ml: 0.938rem; + --c--globals--font--sizes--xl: 1.25rem; + --c--globals--font--sizes--t: 0.6875rem; + --c--globals--font--sizes--s: 0.75rem; + --c--globals--font--sizes--h1: 2rem; + --c--globals--font--sizes--h2: 1.75rem; + --c--globals--font--sizes--h3: 1.5rem; + --c--globals--font--sizes--h4: 1.375rem; + --c--globals--font--sizes--h5: 1.25rem; + --c--globals--font--sizes--h6: 1.125rem; + --c--globals--font--sizes--xl-alt: 5rem; + --c--globals--font--sizes--lg-alt: 4.5rem; + --c--globals--font--sizes--md-alt: 4rem; + --c--globals--font--sizes--sm-alt: 3.5rem; + --c--globals--font--sizes--xs-alt: 3rem; + --c--globals--font--weights--thin: 200; + --c--globals--font--weights--light: 300; + --c--globals--font--weights--regular: 400; + --c--globals--font--weights--medium: 500; + --c--globals--font--weights--bold: 600; + --c--globals--font--weights--extrabold: 700; + --c--globals--font--weights--black: 800; + --c--globals--font--families--base: "Roboto Flex Variable", sans-serif; + --c--globals--font--families--accent: "Roboto Flex Variable", sans-serif; + --c--globals--spacings--l: 3rem; + --c--globals--spacings--b: 1.625rem; + --c--globals--spacings--m: 0.8125rem; + --c--globals--spacings--s: 1rem; + --c--globals--spacings--t: 0.5rem; + --c--globals--spacings--st: 0.25rem; + --c--globals--spacings--4xs: 0.125rem; + --c--globals--spacings--xxxs: 0.25rem; + --c--globals--spacings--xxs: 0.375rem; + --c--globals--spacings--xs: 0.5rem; + --c--globals--spacings--sm: 0.75rem; + --c--globals--spacings--base: 1rem; + --c--globals--spacings--md: 1.5rem; + --c--globals--spacings--lg: 2rem; + --c--globals--spacings--xl: 2.5rem; + --c--globals--spacings--xxl: 3rem; + --c--globals--spacings--xxxl: 3.5rem; + --c--globals--spacings--4xl: 4rem; + --c--globals--spacings--5xl: 4.5rem; + --c--globals--spacings--6xl: 6rem; + --c--globals--spacings--7xl: 7.5rem; + --c--globals--breakpoints--xs: 0; + --c--globals--breakpoints--sm: 576px; + --c--globals--breakpoints--md: 768px; + --c--globals--breakpoints--lg: 992px; + --c--globals--breakpoints--xl: 1200px; + --c--globals--breakpoints--xxl: 1400px; + --c--contextuals--background--surface--primary: var(--c--globals--colors--gray-000); + --c--contextuals--background--surface--secondary: var(--c--globals--colors--gray-000); + --c--contextuals--background--surface--tertiary: var(--c--globals--colors--gray-025); + --c--contextuals--background--semantic--brand--primary: var(--c--globals--colors--brand-550); + --c--contextuals--background--semantic--brand--primary-hover: var(--c--globals--colors--brand-650); + --c--contextuals--background--semantic--brand--secondary: var(--c--globals--colors--brand-100); + --c--contextuals--background--semantic--brand--secondary-hover: var(--c--globals--colors--brand-150); + --c--contextuals--background--semantic--brand--tertiary: var(--c--globals--colors--brand-050); + --c--contextuals--background--semantic--brand--tertiary-hover: var(--c--globals--colors--brand-100); + --c--contextuals--background--semantic--neutral--primary: var(--c--globals--colors--gray-550); + --c--contextuals--background--semantic--neutral--primary-hover: var(--c--globals--colors--gray-650); + --c--contextuals--background--semantic--neutral--secondary: var(--c--globals--colors--gray-100); + --c--contextuals--background--semantic--neutral--secondary-hover: var(--c--globals--colors--gray-150); + --c--contextuals--background--semantic--neutral--tertiary: var(--c--globals--colors--gray-050); + --c--contextuals--background--semantic--neutral--tertiary-hover: var(--c--globals--colors--gray-100); + --c--contextuals--background--semantic--contextual--primary: var(--c--globals--colors--black-050); + --c--contextuals--background--semantic--contextual--primary-hover: var(--c--globals--colors--black-100); + --c--contextuals--background--semantic--info--primary: var(--c--globals--colors--info-550); + --c--contextuals--background--semantic--info--primary-hover: var(--c--globals--colors--info-650); + --c--contextuals--background--semantic--info--secondary: var(--c--globals--colors--info-100); + --c--contextuals--background--semantic--info--secondary-hover: var(--c--globals--colors--info-150); + --c--contextuals--background--semantic--info--tertiary: var(--c--globals--colors--info-050); + --c--contextuals--background--semantic--info--tertiary-hover: var(--c--globals--colors--info-100); + --c--contextuals--background--semantic--success--primary: var(--c--globals--colors--success-550); + --c--contextuals--background--semantic--success--primary-hover: var(--c--globals--colors--success-650); + --c--contextuals--background--semantic--success--secondary: var(--c--globals--colors--success-100); + --c--contextuals--background--semantic--success--secondary-hover: var(--c--globals--colors--success-150); + --c--contextuals--background--semantic--success--tertiary: var(--c--globals--colors--success-050); + --c--contextuals--background--semantic--success--tertiary-hover: var(--c--globals--colors--success-100); + --c--contextuals--background--semantic--warning--primary: var(--c--globals--colors--warning-550); + --c--contextuals--background--semantic--warning--primary-hover: var(--c--globals--colors--warning-650); + --c--contextuals--background--semantic--warning--secondary: var(--c--globals--colors--warning-100); + --c--contextuals--background--semantic--warning--secondary-hover: var(--c--globals--colors--warning-150); + --c--contextuals--background--semantic--warning--tertiary: var(--c--globals--colors--warning-050); + --c--contextuals--background--semantic--warning--tertiary-hover: var(--c--globals--colors--warning-100); + --c--contextuals--background--semantic--error--primary: var(--c--globals--colors--error-550); + --c--contextuals--background--semantic--error--primary-hover: var(--c--globals--colors--error-650); + --c--contextuals--background--semantic--error--secondary: var(--c--globals--colors--error-100); + --c--contextuals--background--semantic--error--secondary-hover: var(--c--globals--colors--error-150); + --c--contextuals--background--semantic--error--tertiary: var(--c--globals--colors--error-050); + --c--contextuals--background--semantic--error--tertiary-hover: var(--c--globals--colors--error-100); + --c--contextuals--background--semantic--disabled--primary: var(--c--globals--colors--gray-100); + --c--contextuals--background--semantic--disabled--secondary: var(--c--globals--colors--gray-050); + --c--contextuals--background--palette--brand--primary: var(--c--globals--colors--brand-500); + --c--contextuals--background--palette--brand--secondary: var(--c--globals--colors--brand-350); + --c--contextuals--background--palette--brand--tertiary: var(--c--globals--colors--brand-150); + --c--contextuals--background--palette--red--primary: var(--c--globals--colors--red-500); + --c--contextuals--background--palette--red--secondary: var(--c--globals--colors--red-350); + --c--contextuals--background--palette--red--tertiary: var(--c--globals--colors--red-150); + --c--contextuals--background--palette--orange--primary: var(--c--globals--colors--orange-500); + --c--contextuals--background--palette--orange--secondary: var(--c--globals--colors--orange-350); + --c--contextuals--background--palette--orange--tertiary: var(--c--globals--colors--orange-150); + --c--contextuals--background--palette--brown--primary: var(--c--globals--colors--brown-500); + --c--contextuals--background--palette--brown--secondary: var(--c--globals--colors--brown-350); + --c--contextuals--background--palette--brown--tertiary: var(--c--globals--colors--brown-150); + --c--contextuals--background--palette--yellow--primary: var(--c--globals--colors--yellow-500); + --c--contextuals--background--palette--yellow--secondary: var(--c--globals--colors--yellow-350); + --c--contextuals--background--palette--yellow--tertiary: var(--c--globals--colors--yellow-150); + --c--contextuals--background--palette--green--primary: var(--c--globals--colors--green-500); + --c--contextuals--background--palette--green--secondary: var(--c--globals--colors--green-350); + --c--contextuals--background--palette--green--tertiary: var(--c--globals--colors--green-150); + --c--contextuals--background--palette--blue-1--primary: var(--c--globals--colors--blue-1-500); + --c--contextuals--background--palette--blue-1--secondary: var(--c--globals--colors--blue-1-350); + --c--contextuals--background--palette--blue-1--tertiary: var(--c--globals--colors--blue-1-150); + --c--contextuals--background--palette--blue-2--primary: var(--c--globals--colors--blue-2-500); + --c--contextuals--background--palette--blue-2--secondary: var(--c--globals--colors--blue-2-350); + --c--contextuals--background--palette--blue-2--tertiary: var(--c--globals--colors--blue-2-150); + --c--contextuals--background--palette--purple--primary: var(--c--globals--colors--purple-500); + --c--contextuals--background--palette--purple--secondary: var(--c--globals--colors--purple-350); + --c--contextuals--background--palette--purple--tertiary: var(--c--globals--colors--purple-150); + --c--contextuals--background--palette--pink--primary: var(--c--globals--colors--pink-500); + --c--contextuals--background--palette--pink--secondary: var(--c--globals--colors--pink-350); + --c--contextuals--background--palette--pink--tertiary: var(--c--globals--colors--pink-150); + --c--contextuals--background--palette--gray--primary: var(--c--globals--colors--gray-500); + --c--contextuals--background--palette--gray--secondary: var(--c--globals--colors--gray-350); + --c--contextuals--background--palette--gray--tertiary: var(--c--globals--colors--gray-150); + --c--contextuals--background--text--primary: var(--c--globals--colors--black-050); + --c--contextuals--content--logo1: var(--c--globals--colors--logo-1); + --c--contextuals--content--logo2: var(--c--globals--colors--logo-2); + --c--contextuals--content--semantic--brand--primary: var(--c--globals--colors--brand-700); + --c--contextuals--content--semantic--brand--secondary: var(--c--globals--colors--brand-600); + --c--contextuals--content--semantic--brand--tertiary: var(--c--globals--colors--brand-500); + --c--contextuals--content--semantic--brand--on-brand: var(--c--globals--colors--brand-050); + --c--contextuals--content--semantic--neutral--primary: var(--c--globals--colors--gray-850); + --c--contextuals--content--semantic--neutral--secondary: var(--c--globals--colors--gray-600); + --c--contextuals--content--semantic--neutral--tertiary: var(--c--globals--colors--gray-500); + --c--contextuals--content--semantic--neutral--on-neutral: var(--c--globals--colors--gray-050); + --c--contextuals--content--semantic--contextual--primary: var(--c--globals--colors--white-950); + --c--contextuals--content--semantic--info--primary: var(--c--globals--colors--info-700); + --c--contextuals--content--semantic--info--secondary: var(--c--globals--colors--info-600); + --c--contextuals--content--semantic--info--tertiary: var(--c--globals--colors--info-500); + --c--contextuals--content--semantic--info--on-info: var(--c--globals--colors--info-050); + --c--contextuals--content--semantic--success--primary: var(--c--globals--colors--success-700); + --c--contextuals--content--semantic--success--secondary: var(--c--globals--colors--success-600); + --c--contextuals--content--semantic--success--tertiary: var(--c--globals--colors--success-500); + --c--contextuals--content--semantic--success--on-success: var(--c--globals--colors--success-050); + --c--contextuals--content--semantic--warning--primary: var(--c--globals--colors--warning-700); + --c--contextuals--content--semantic--warning--secondary: var(--c--globals--colors--warning-600); + --c--contextuals--content--semantic--warning--tertiary: var(--c--globals--colors--warning-500); + --c--contextuals--content--semantic--warning--on-warning: var(--c--globals--colors--warning-050); + --c--contextuals--content--semantic--error--primary: var(--c--globals--colors--error-700); + --c--contextuals--content--semantic--error--secondary: var(--c--globals--colors--error-600); + --c--contextuals--content--semantic--error--tertiary: var(--c--globals--colors--error-500); + --c--contextuals--content--semantic--error--on-error: var(--c--globals--colors--error-050); + --c--contextuals--content--semantic--disabled--primary: var(--c--globals--colors--gray-300); + --c--contextuals--content--semantic--disabled--secondary: var(--c--globals--colors--white-500); + --c--contextuals--content--palette--brand--primary: var(--c--globals--colors--brand-500); + --c--contextuals--content--palette--brand--secondary: var(--c--globals--colors--brand-350); + --c--contextuals--content--palette--brand--tertiary: var(--c--globals--colors--brand-150); + --c--contextuals--content--palette--red--primary: var(--c--globals--colors--red-500); + --c--contextuals--content--palette--red--secondary: var(--c--globals--colors--red-350); + --c--contextuals--content--palette--red--tertiary: var(--c--globals--colors--red-150); + --c--contextuals--content--palette--orange--primary: var(--c--globals--colors--orange-500); + --c--contextuals--content--palette--orange--secondary: var(--c--globals--colors--orange-350); + --c--contextuals--content--palette--orange--tertiary: var(--c--globals--colors--orange-150); + --c--contextuals--content--palette--brown--primary: var(--c--globals--colors--brown-500); + --c--contextuals--content--palette--brown--secondary: var(--c--globals--colors--brown-350); + --c--contextuals--content--palette--brown--tertiary: var(--c--globals--colors--brown-150); + --c--contextuals--content--palette--yellow--primary: var(--c--globals--colors--yellow-500); + --c--contextuals--content--palette--yellow--secondary: var(--c--globals--colors--yellow-350); + --c--contextuals--content--palette--yellow--tertiary: var(--c--globals--colors--yellow-150); + --c--contextuals--content--palette--green--primary: var(--c--globals--colors--green-500); + --c--contextuals--content--palette--green--secondary: var(--c--globals--colors--green-350); + --c--contextuals--content--palette--green--tertiary: var(--c--globals--colors--green-150); + --c--contextuals--content--palette--blue-1--primary: var(--c--globals--colors--blue-1-500); + --c--contextuals--content--palette--blue-1--secondary: var(--c--globals--colors--blue-1-350); + --c--contextuals--content--palette--blue-1--tertiary: var(--c--globals--colors--blue-1-150); + --c--contextuals--content--palette--blue-2--primary: var(--c--globals--colors--blue-2-500); + --c--contextuals--content--palette--blue-2--secondary: var(--c--globals--colors--blue-2-350); + --c--contextuals--content--palette--blue-2--tertiary: var(--c--globals--colors--blue-2-150); + --c--contextuals--content--palette--purple--primary: var(--c--globals--colors--purple-500); + --c--contextuals--content--palette--purple--secondary: var(--c--globals--colors--purple-350); + --c--contextuals--content--palette--purple--tertiary: var(--c--globals--colors--purple-150); + --c--contextuals--content--palette--pink--primary: var(--c--globals--colors--pink-500); + --c--contextuals--content--palette--pink--secondary: var(--c--globals--colors--pink-350); + --c--contextuals--content--palette--pink--tertiary: var(--c--globals--colors--pink-150); + --c--contextuals--content--palette--gray--primary: var(--c--globals--colors--gray-500); + --c--contextuals--content--palette--gray--secondary: var(--c--globals--colors--gray-350); + --c--contextuals--content--palette--gray--tertiary: var(--c--globals--colors--gray-150); + --c--contextuals--border--surface--primary: var(--c--globals--colors--gray-100); + --c--contextuals--border--semantic--brand--primary: var(--c--globals--colors--brand-550); + --c--contextuals--border--semantic--brand--secondary: var(--c--globals--colors--brand-300); + --c--contextuals--border--semantic--brand--tertiary: var(--c--globals--colors--brand-150); + --c--contextuals--border--semantic--contextual--primary: var(--c--globals--colors--white-200); + --c--contextuals--border--semantic--neutral--primary: var(--c--globals--colors--gray-550); + --c--contextuals--border--semantic--neutral--secondary: var(--c--globals--colors--gray-300); + --c--contextuals--border--semantic--neutral--tertiary: var(--c--globals--colors--gray-150); + --c--contextuals--border--semantic--info--primary: var(--c--globals--colors--info-550); + --c--contextuals--border--semantic--info--secondary: var(--c--globals--colors--info-300); + --c--contextuals--border--semantic--info--tertiary: var(--c--globals--colors--info-150); + --c--contextuals--border--semantic--success--primary: var(--c--globals--colors--success-550); + --c--contextuals--border--semantic--success--secondary: var(--c--globals--colors--success-300); + --c--contextuals--border--semantic--success--tertiary: var(--c--globals--colors--success-150); + --c--contextuals--border--semantic--warning--primary: var(--c--globals--colors--warning-550); + --c--contextuals--border--semantic--warning--secondary: var(--c--globals--colors--warning-300); + --c--contextuals--border--semantic--warning--tertiary: var(--c--globals--colors--warning-150); + --c--contextuals--border--semantic--error--primary: var(--c--globals--colors--error-550); + --c--contextuals--border--semantic--error--secondary: var(--c--globals--colors--error-300); + --c--contextuals--border--semantic--error--tertiary: var(--c--globals--colors--error-150); + --c--contextuals--border--semantic--disabled--primary: var(--c--globals--colors--gray-100); + --c--contextuals--border--palette--brand--primary: var(--c--globals--colors--brand-500); + --c--contextuals--border--palette--brand--secondary: var(--c--globals--colors--brand-350); + --c--contextuals--border--palette--brand--tertiary: var(--c--globals--colors--brand-150); + --c--contextuals--border--palette--red--primary: var(--c--globals--colors--red-500); + --c--contextuals--border--palette--red--secondary: var(--c--globals--colors--red-350); + --c--contextuals--border--palette--red--tertiary: var(--c--globals--colors--red-150); + --c--contextuals--border--palette--orange--primary: var(--c--globals--colors--orange-500); + --c--contextuals--border--palette--orange--secondary: var(--c--globals--colors--orange-350); + --c--contextuals--border--palette--orange--tertiary: var(--c--globals--colors--orange-150); + --c--contextuals--border--palette--brown--primary: var(--c--globals--colors--brown-500); + --c--contextuals--border--palette--brown--secondary: var(--c--globals--colors--brown-350); + --c--contextuals--border--palette--brown--tertiary: var(--c--globals--colors--brown-150); + --c--contextuals--border--palette--yellow--primary: var(--c--globals--colors--yellow-500); + --c--contextuals--border--palette--yellow--secondary: var(--c--globals--colors--yellow-350); + --c--contextuals--border--palette--yellow--tertiary: var(--c--globals--colors--yellow-150); + --c--contextuals--border--palette--green--primary: var(--c--globals--colors--green-500); + --c--contextuals--border--palette--green--secondary: var(--c--globals--colors--green-350); + --c--contextuals--border--palette--green--tertiary: var(--c--globals--colors--green-150); + --c--contextuals--border--palette--blue-1--primary: var(--c--globals--colors--blue-1-500); + --c--contextuals--border--palette--blue-1--secondary: var(--c--globals--colors--blue-1-350); + --c--contextuals--border--palette--blue-1--tertiary: var(--c--globals--colors--blue-1-150); + --c--contextuals--border--palette--blue-2--primary: var(--c--globals--colors--blue-2-500); + --c--contextuals--border--palette--blue-2--secondary: var(--c--globals--colors--blue-2-350); + --c--contextuals--border--palette--blue-2--tertiary: var(--c--globals--colors--blue-2-150); + --c--contextuals--border--palette--purple--primary: var(--c--globals--colors--purple-500); + --c--contextuals--border--palette--purple--secondary: var(--c--globals--colors--purple-350); + --c--contextuals--border--palette--purple--tertiary: var(--c--globals--colors--purple-150); + --c--contextuals--border--palette--pink--primary: var(--c--globals--colors--pink-500); + --c--contextuals--border--palette--pink--secondary: var(--c--globals--colors--pink-350); + --c--contextuals--border--palette--pink--tertiary: var(--c--globals--colors--pink-150); + --c--contextuals--border--palette--gray--primary: var(--c--globals--colors--gray-500); + --c--contextuals--border--palette--gray--secondary: var(--c--globals--colors--gray-350); + --c--contextuals--border--palette--gray--tertiary: var(--c--globals--colors--gray-150); + --c--theme--colors--primary: typescript; +} +.cunningham-theme--dark{ + --c--globals--colors--logo-1: #377FDB; + --c--globals--colors--logo-2: #377FDB; + --c--globals--colors--logo-1-dark: #95ABFF; + --c--globals--colors--logo-2-dark: #95ABFF; + --c--globals--colors--brand-050: #EAF1FB; + --c--globals--colors--brand-100: #D5E4F7; + --c--globals--colors--brand-150: #C0D6F4; + --c--globals--colors--brand-200: #ABC9F0; + --c--globals--colors--brand-250: #96BCEC; + --c--globals--colors--brand-300: #80AEE8; + --c--globals--colors--brand-350: #6CA0E4; + --c--globals--colors--brand-400: #5693E0; + --c--globals--colors--brand-450: #4085DC; + --c--globals--colors--brand-500: #2976D8; + --c--globals--colors--brand-550: #1167D4; + --c--globals--colors--brand-600: #0659C5; + --c--globals--colors--brand-650: #1A509F; + --c--globals--colors--brand-700: #20467F; + --c--globals--colors--brand-750: #203C63; + --c--globals--colors--brand-800: #1D314C; + --c--globals--colors--brand-850: #1A2638; + --c--globals--colors--brand-900: #141C28; + --c--globals--colors--brand-950: #0C1117; + --c--globals--colors--gray-000: #FFFFFF; + --c--globals--colors--gray-025: #F7F8F8; + --c--globals--colors--gray-050: #F0F1F2; + --c--globals--colors--gray-100: #E1E2E5; + --c--globals--colors--gray-150: #D2D4D8; + --c--globals--colors--gray-200: #C4C7CB; + --c--globals--colors--gray-250: #B5B9BE; + --c--globals--colors--gray-300: #A7ACB2; + --c--globals--colors--gray-350: #999EA5; + --c--globals--colors--gray-400: #8D9197; + --c--globals--colors--gray-450: #80848A; + --c--globals--colors--gray-500: #74777C; + --c--globals--colors--gray-550: #686B6F; + --c--globals--colors--gray-600: #5C5F63; + --c--globals--colors--gray-650: #505356; + --c--globals--colors--gray-700: #45474A; + --c--globals--colors--gray-750: #3A3B3E; + --c--globals--colors--gray-800: #2F3033; + --c--globals--colors--gray-850: #252627; + --c--globals--colors--gray-900: #1B1C1D; + --c--globals--colors--gray-950: #101112; + --c--globals--colors--gray-1000: #000000; + --c--globals--colors--info-050: #EAF1FB; + --c--globals--colors--info-100: #D5E4F7; + --c--globals--colors--info-150: #C0D6F4; + --c--globals--colors--info-200: #ABC9F0; + --c--globals--colors--info-250: #96BCEC; + --c--globals--colors--info-300: #80AEE8; + --c--globals--colors--info-350: #6CA0E4; + --c--globals--colors--info-400: #5693E0; + --c--globals--colors--info-450: #4085DC; + --c--globals--colors--info-500: #2976D8; + --c--globals--colors--info-550: #1167D4; + --c--globals--colors--info-600: #0659C5; + --c--globals--colors--info-650: #1A509F; + --c--globals--colors--info-700: #20467F; + --c--globals--colors--info-750: #203C63; + --c--globals--colors--info-800: #1D314C; + --c--globals--colors--info-850: #1A2638; + --c--globals--colors--info-900: #141C28; + --c--globals--colors--info-950: #0C1117; + --c--globals--colors--success-050: #E4F7D4; + --c--globals--colors--success-100: #C8EEA8; + --c--globals--colors--success-150: #AAE579; + --c--globals--colors--success-200: #89DC45; + --c--globals--colors--success-250: #72CF27; + --c--globals--colors--success-300: #6AC024; + --c--globals--colors--success-350: #61B121; + --c--globals--colors--success-400: #59A21E; + --c--globals--colors--success-450: #51941C; + --c--globals--colors--success-500: #4B851A; + --c--globals--colors--success-550: #427816; + --c--globals--colors--success-600: #3A6A14; + --c--globals--colors--success-650: #385C1F; + --c--globals--colors--success-700: #344D24; + --c--globals--colors--success-750: #2E4022; + --c--globals--colors--success-800: #27341F; + --c--globals--colors--success-850: #20281A; + --c--globals--colors--success-900: #181D15; + --c--globals--colors--success-950: #10120E; + --c--globals--colors--warning-050: #FFF1BD; + --c--globals--colors--warning-100: #FFE176; + --c--globals--colors--warning-150: #FFCF25; + --c--globals--colors--warning-200: #F4BF06; + --c--globals--colors--warning-250: #E3B205; + --c--globals--colors--warning-300: #D3A504; + --c--globals--colors--warning-350: #C29805; + --c--globals--colors--warning-400: #B28C03; + --c--globals--colors--warning-450: #A27F03; + --c--globals--colors--warning-500: #937303; + --c--globals--colors--warning-550: #836703; + --c--globals--colors--warning-600: #745B03; + --c--globals--colors--warning-650: #625019; + --c--globals--colors--warning-700: #524620; + --c--globals--colors--warning-750: #443B20; + --c--globals--colors--warning-800: #36301D; + --c--globals--colors--warning-850: #2A2619; + --c--globals--colors--warning-900: #1E1C13; + --c--globals--colors--warning-950: #12110C; + --c--globals--colors--error-050: #FCEDED; + --c--globals--colors--error-100: #FADBDB; + --c--globals--colors--error-150: #F7C9C9; + --c--globals--colors--error-200: #F5B7B7; + --c--globals--colors--error-250: #F2A4A4; + --c--globals--colors--error-300: #EF9191; + --c--globals--colors--error-350: #EC7D7D; + --c--globals--colors--error-400: #E96868; + --c--globals--colors--error-450: #E55050; + --c--globals--colors--error-500: #E13131; + --c--globals--colors--error-550: #D80000; + --c--globals--colors--error-600: #C00101; + --c--globals--colors--error-650: #9E2219; + --c--globals--colors--error-700: #802820; + --c--globals--colors--error-750: #662820; + --c--globals--colors--error-800: #4F231E; + --c--globals--colors--error-850: #3B1D19; + --c--globals--colors--error-900: #2A1614; + --c--globals--colors--error-950: #1A0E0C; + --c--globals--colors--red-050: #FDEDED; + --c--globals--colors--red-100: #FADBDB; + --c--globals--colors--red-150: #F8C9C9; + --c--globals--colors--red-200: #F5B7B6; + --c--globals--colors--red-250: #F3A4A3; + --c--globals--colors--red-300: #F09190; + --c--globals--colors--red-350: #EE7C7B; + --c--globals--colors--red-400: #EB6665; + --c--globals--colors--red-450: #E74E4D; + --c--globals--colors--red-500: #D83F3D; + --c--globals--colors--red-550: #C23837; + --c--globals--colors--red-600: #AC3231; + --c--globals--colors--red-650: #8D3531; + --c--globals--colors--red-700: #73332F; + --c--globals--colors--red-750: #5B2F2B; + --c--globals--colors--red-800: #472826; + --c--globals--colors--red-850: #35211F; + --c--globals--colors--red-900: #251817; + --c--globals--colors--red-950: #160F0E; + --c--globals--colors--orange-050: #FDEEE2; + --c--globals--colors--orange-100: #FCDDC5; + --c--globals--colors--orange-150: #FACBA8; + --c--globals--colors--orange-200: #F8B98B; + --c--globals--colors--orange-250: #F6A76A; + --c--globals--colors--orange-300: #F4934B; + --c--globals--colors--orange-350: #F27E27; + --c--globals--colors--orange-400: #E76E12; + --c--globals--colors--orange-450: #D26411; + --c--globals--colors--orange-500: #BE5B0F; + --c--globals--colors--orange-550: #AA510E; + --c--globals--colors--orange-600: #97480C; + --c--globals--colors--orange-650: #7E431D; + --c--globals--colors--orange-700: #673C22; + --c--globals--colors--orange-750: #533422; + --c--globals--colors--orange-800: #412C1F; + --c--globals--colors--orange-850: #31231B; + --c--globals--colors--orange-900: #221A14; + --c--globals--colors--orange-950: #15100C; + --c--globals--colors--brown-050: #F3F0EF; + --c--globals--colors--brown-100: #E7E1DF; + --c--globals--colors--brown-150: #DCD2CF; + --c--globals--colors--brown-200: #D0C4BF; + --c--globals--colors--brown-250: #C5B6B0; + --c--globals--colors--brown-300: #BAA7A1; + --c--globals--colors--brown-350: #AF9992; + --c--globals--colors--brown-400: #A48B83; + --c--globals--colors--brown-450: #997E74; + --c--globals--colors--brown-500: #8F7065; + --c--globals--colors--brown-550: #846357; + --c--globals--colors--brown-600: #7A5649; + --c--globals--colors--brown-650: #684C42; + --c--globals--colors--brown-700: #57423C; + --c--globals--colors--brown-750: #463833; + --c--globals--colors--brown-800: #382E2A; + --c--globals--colors--brown-850: #2B2422; + --c--globals--colors--brown-900: #1F1B19; + --c--globals--colors--brown-950: #121010; + --c--globals--colors--yellow-050: #FAF0D3; + --c--globals--colors--yellow-100: #F5E2A4; + --c--globals--colors--yellow-150: #F0D275; + --c--globals--colors--yellow-200: #EBC242; + --c--globals--colors--yellow-250: #E4B213; + --c--globals--colors--yellow-300: #D4A511; + --c--globals--colors--yellow-350: #C39810; + --c--globals--colors--yellow-400: #B38B0F; + --c--globals--colors--yellow-450: #A37F0D; + --c--globals--colors--yellow-500: #93730C; + --c--globals--colors--yellow-550: #84670B; + --c--globals--colors--yellow-600: #755B0A; + --c--globals--colors--yellow-650: #63501C; + --c--globals--colors--yellow-700: #534521; + --c--globals--colors--yellow-750: #443A21; + --c--globals--colors--yellow-800: #36301F; + --c--globals--colors--yellow-850: #29261A; + --c--globals--colors--yellow-900: #1D1C14; + --c--globals--colors--yellow-950: #12110C; + --c--globals--colors--green-050: #E2F6E5; + --c--globals--colors--green-100: #C5ECCA; + --c--globals--colors--green-150: #A7E3AF; + --c--globals--colors--green-200: #89D894; + --c--globals--colors--green-250: #67CE75; + --c--globals--colors--green-300: #4DC25D; + --c--globals--colors--green-350: #48B257; + --c--globals--colors--green-400: #41A44F; + --c--globals--colors--green-450: #3B9548; + --c--globals--colors--green-500: #368741; + --c--globals--colors--green-550: #30793A; + --c--globals--colors--green-600: #2B6B33; + --c--globals--colors--green-650: #2F5C34; + --c--globals--colors--green-700: #2E4E31; + --c--globals--colors--green-750: #2A412C; + --c--globals--colors--green-800: #253426; + --c--globals--colors--green-850: #1E281F; + --c--globals--colors--green-900: #171D17; + --c--globals--colors--green-950: #0F120F; + --c--globals--colors--blue-1-050: #EBF1FF; + --c--globals--colors--blue-1-100: #D6E3FE; + --c--globals--colors--blue-1-150: #C2D5FE; + --c--globals--colors--blue-1-200: #ADC7FE; + --c--globals--colors--blue-1-250: #99B8FD; + --c--globals--colors--blue-1-300: #84AAFD; + --c--globals--colors--blue-1-350: #6F9BFD; + --c--globals--colors--blue-1-400: #5A8DFB; + --c--globals--colors--blue-1-450: #437DFC; + --c--globals--colors--blue-1-500: #3D71E4; + --c--globals--colors--blue-1-550: #3665CC; + --c--globals--colors--blue-1-600: #305AB5; + --c--globals--colors--blue-1-650: #315093; + --c--globals--colors--blue-1-700: #2E4675; + --c--globals--colors--blue-1-750: #293B5E; + --c--globals--colors--blue-1-800: #243048; + --c--globals--colors--blue-1-850: #1E2635; + --c--globals--colors--blue-1-900: #171C25; + --c--globals--colors--blue-1-950: #0E1116; + --c--globals--colors--blue-2-050: #E2F4F9; + --c--globals--colors--blue-2-100: #C5E9F3; + --c--globals--colors--blue-2-150: #A7DDED; + --c--globals--colors--blue-2-200: #88D1E6; + --c--globals--colors--blue-2-250: #68C5E0; + --c--globals--colors--blue-2-300: #48B8D9; + --c--globals--colors--blue-2-350: #3BAACA; + --c--globals--colors--blue-2-400: #359CB9; + --c--globals--colors--blue-2-450: #318EA9; + --c--globals--colors--blue-2-500: #2C8199; + --c--globals--colors--blue-2-550: #277389; + --c--globals--colors--blue-2-600: #236679; + --c--globals--colors--blue-2-650: #2A5866; + --c--globals--colors--blue-2-700: #2A4B55; + --c--globals--colors--blue-2-750: #283F47; + --c--globals--colors--blue-2-800: #233337; + --c--globals--colors--blue-2-850: #1D272A; + --c--globals--colors--blue-2-900: #161C1E; + --c--globals--colors--blue-2-950: #0E1112; + --c--globals--colors--purple-050: #F6EEFF; + --c--globals--colors--purple-100: #ECDCFF; + --c--globals--colors--purple-150: #E3CBFE; + --c--globals--colors--purple-200: #DAB9FE; + --c--globals--colors--purple-250: #D0A7FE; + --c--globals--colors--purple-300: #C795FE; + --c--globals--colors--purple-350: #BD83FD; + --c--globals--colors--purple-400: #B36FFD; + --c--globals--colors--purple-450: #A85BFD; + --c--globals--colors--purple-500: #9B4BF3; + --c--globals--colors--purple-550: #8B43DA; + --c--globals--colors--purple-600: #7B3CC1; + --c--globals--colors--purple-650: #673C9B; + --c--globals--colors--purple-700: #56387D; + --c--globals--colors--purple-750: #463162; + --c--globals--colors--purple-800: #382A4A; + --c--globals--colors--purple-850: #2A2237; + --c--globals--colors--purple-900: #1E1926; + --c--globals--colors--purple-950: #121017; + --c--globals--colors--pink-050: #FCEDF5; + --c--globals--colors--pink-100: #F9DAEA; + --c--globals--colors--pink-150: #F7C7E0; + --c--globals--colors--pink-200: #F4B4D5; + --c--globals--colors--pink-250: #F1A1CA; + --c--globals--colors--pink-300: #EE8CBF; + --c--globals--colors--pink-350: #EA77B3; + --c--globals--colors--pink-400: #E760A6; + --c--globals--colors--pink-450: #E24797; + --c--globals--colors--pink-500: #CD4089; + --c--globals--colors--pink-550: #B8397B; + --c--globals--colors--pink-600: #A3336D; + --c--globals--colors--pink-650: #86355E; + --c--globals--colors--pink-700: #6E334F; + --c--globals--colors--pink-750: #582E42; + --c--globals--colors--pink-800: #442834; + --c--globals--colors--pink-850: #332028; + --c--globals--colors--pink-900: #24181D; + --c--globals--colors--pink-950: #160F12; + --c--globals--colors--black-000: #00000000; + --c--globals--colors--black-050: #0000000D; + --c--globals--colors--black-100: #0000001A; + --c--globals--colors--black-150: #00000026; + --c--globals--colors--black-200: #00000033; + --c--globals--colors--black-250: #00000040; + --c--globals--colors--black-300: #0000004D; + --c--globals--colors--black-350: #00000059; + --c--globals--colors--black-400: #00000066; + --c--globals--colors--black-450: #00000073; + --c--globals--colors--black-500: #00000080; + --c--globals--colors--black-550: #0000008C; + --c--globals--colors--black-600: #00000099; + --c--globals--colors--black-650: #000000A6; + --c--globals--colors--black-700: #000000B3; + --c--globals--colors--black-750: #000000BF; + --c--globals--colors--black-800: #000000CC; + --c--globals--colors--black-850: #000000D9; + --c--globals--colors--black-900: #000000E6; + --c--globals--colors--black-950: #000000F2; + --c--globals--colors--white-000: #FFFFFF; + --c--globals--colors--white-050: #FFFFFF0D; + --c--globals--colors--white-100: #FFFFFF1A; + --c--globals--colors--white-150: #FFFFFF26; + --c--globals--colors--white-200: #FFFFFF33; + --c--globals--colors--white-250: #FFFFFF40; + --c--globals--colors--white-300: #FFFFFF4D; + --c--globals--colors--white-350: #FFFFFF59; + --c--globals--colors--white-400: #FFFFFF66; + --c--globals--colors--white-450: #FFFFFF73; + --c--globals--colors--white-500: #FFFFFF80; + --c--globals--colors--white-550: #FFFFFF8C; + --c--globals--colors--white-600: #FFFFFF99; + --c--globals--colors--white-650: #FFFFFFA6; + --c--globals--colors--white-700: #FFFFFFB3; + --c--globals--colors--white-750: #FFFFFFBF; + --c--globals--colors--white-800: #FFFFFFCC; + --c--globals--colors--white-850: #FFFFFFD9; + --c--globals--colors--white-900: #FFFFFFE6; + --c--globals--colors--white-950: #FFFFFFF2; + --c--globals--transitions--ease-in: cubic-bezier(0.32, 0, 0.67, 0); + --c--globals--transitions--ease-out: cubic-bezier(0.33, 1, 0.68, 1); + --c--globals--transitions--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); + --c--globals--transitions--duration: 250ms; + --c--globals--font--sizes--xs: 0.75rem; + --c--globals--font--sizes--sm: 0.875rem; + --c--globals--font--sizes--md: 1rem; + --c--globals--font--sizes--lg: 1.125rem; + --c--globals--font--sizes--ml: 0.938rem; + --c--globals--font--sizes--xl: 1.25rem; + --c--globals--font--sizes--t: 0.6875rem; + --c--globals--font--sizes--s: 0.75rem; + --c--globals--font--sizes--h1: 2rem; + --c--globals--font--sizes--h2: 1.75rem; + --c--globals--font--sizes--h3: 1.5rem; + --c--globals--font--sizes--h4: 1.375rem; + --c--globals--font--sizes--h5: 1.25rem; + --c--globals--font--sizes--h6: 1.125rem; + --c--globals--font--sizes--xl-alt: 5rem; + --c--globals--font--sizes--lg-alt: 4.5rem; + --c--globals--font--sizes--md-alt: 4rem; + --c--globals--font--sizes--sm-alt: 3.5rem; + --c--globals--font--sizes--xs-alt: 3rem; + --c--globals--font--weights--thin: 200; + --c--globals--font--weights--light: 300; + --c--globals--font--weights--regular: 400; + --c--globals--font--weights--medium: 500; + --c--globals--font--weights--bold: 600; + --c--globals--font--weights--extrabold: 700; + --c--globals--font--weights--black: 800; + --c--globals--font--families--base: "Roboto Flex Variable", sans-serif; + --c--globals--font--families--accent: "Roboto Flex Variable", sans-serif; + --c--globals--spacings--l: 3rem; + --c--globals--spacings--b: 1.625rem; + --c--globals--spacings--m: 0.8125rem; + --c--globals--spacings--s: 1rem; + --c--globals--spacings--t: 0.5rem; + --c--globals--spacings--st: 0.25rem; + --c--globals--spacings--4xs: 0.125rem; + --c--globals--spacings--xxxs: 0.25rem; + --c--globals--spacings--xxs: 0.375rem; + --c--globals--spacings--xs: 0.5rem; + --c--globals--spacings--sm: 0.75rem; + --c--globals--spacings--base: 1rem; + --c--globals--spacings--md: 1.5rem; + --c--globals--spacings--lg: 2rem; + --c--globals--spacings--xl: 2.5rem; + --c--globals--spacings--xxl: 3rem; + --c--globals--spacings--xxxl: 3.5rem; + --c--globals--spacings--4xl: 4rem; + --c--globals--spacings--5xl: 4.5rem; + --c--globals--spacings--6xl: 6rem; + --c--globals--spacings--7xl: 7.5rem; + --c--globals--breakpoints--xs: 0; + --c--globals--breakpoints--sm: 576px; + --c--globals--breakpoints--md: 768px; + --c--globals--breakpoints--lg: 992px; + --c--globals--breakpoints--xl: 1200px; + --c--globals--breakpoints--xxl: 1400px; + --c--contextuals--background--surface--primary: var(--c--globals--colors--gray-800); + --c--contextuals--background--surface--secondary: var(--c--globals--colors--gray-850); + --c--contextuals--background--surface--tertiary: var(--c--globals--colors--gray-900); + --c--contextuals--background--semantic--brand--primary: var(--c--globals--colors--brand-550); + --c--contextuals--background--semantic--brand--primary-hover: var(--c--globals--colors--brand-650); + --c--contextuals--background--semantic--brand--secondary: var(--c--globals--colors--brand-700); + --c--contextuals--background--semantic--brand--secondary-hover: var(--c--globals--colors--brand-750); + --c--contextuals--background--semantic--brand--tertiary: var(--c--globals--colors--brand-750); + --c--contextuals--background--semantic--brand--tertiary-hover: var(--c--globals--colors--brand-800); + --c--contextuals--background--semantic--neutral--primary: var(--c--globals--colors--gray-550); + --c--contextuals--background--semantic--neutral--primary-hover: var(--c--globals--colors--gray-650); + --c--contextuals--background--semantic--neutral--secondary: var(--c--globals--colors--gray-700); + --c--contextuals--background--semantic--neutral--secondary-hover: var(--c--globals--colors--gray-750); + --c--contextuals--background--semantic--neutral--tertiary: var(--c--globals--colors--gray-750); + --c--contextuals--background--semantic--neutral--tertiary-hover: var(--c--globals--colors--gray-800); + --c--contextuals--background--semantic--contextual--primary: var(--c--globals--colors--white-050); + --c--contextuals--background--semantic--contextual--primary-hover: var(--c--globals--colors--white-100); + --c--contextuals--background--semantic--info--primary: var(--c--globals--colors--info-550); + --c--contextuals--background--semantic--info--primary-hover: var(--c--globals--colors--info-650); + --c--contextuals--background--semantic--info--secondary: var(--c--globals--colors--info-700); + --c--contextuals--background--semantic--info--secondary-hover: var(--c--globals--colors--info-750); + --c--contextuals--background--semantic--info--tertiary: var(--c--globals--colors--info-750); + --c--contextuals--background--semantic--info--tertiary-hover: var(--c--globals--colors--info-800); + --c--contextuals--background--semantic--success--primary: var(--c--globals--colors--success-550); + --c--contextuals--background--semantic--success--primary-hover: var(--c--globals--colors--success-650); + --c--contextuals--background--semantic--success--secondary: var(--c--globals--colors--success-700); + --c--contextuals--background--semantic--success--secondary-hover: var(--c--globals--colors--success-750); + --c--contextuals--background--semantic--success--tertiary: var(--c--globals--colors--success-750); + --c--contextuals--background--semantic--success--tertiary-hover: var(--c--globals--colors--success-800); + --c--contextuals--background--semantic--warning--primary: var(--c--globals--colors--warning-550); + --c--contextuals--background--semantic--warning--primary-hover: var(--c--globals--colors--warning-650); + --c--contextuals--background--semantic--warning--secondary: var(--c--globals--colors--warning-700); + --c--contextuals--background--semantic--warning--secondary-hover: var(--c--globals--colors--warning-750); + --c--contextuals--background--semantic--warning--tertiary: var(--c--globals--colors--warning-750); + --c--contextuals--background--semantic--warning--tertiary-hover: var(--c--globals--colors--warning-800); + --c--contextuals--background--semantic--error--primary: var(--c--globals--colors--error-550); + --c--contextuals--background--semantic--error--primary-hover: var(--c--globals--colors--error-650); + --c--contextuals--background--semantic--error--secondary: var(--c--globals--colors--error-700); + --c--contextuals--background--semantic--error--secondary-hover: var(--c--globals--colors--error-750); + --c--contextuals--background--semantic--error--tertiary: var(--c--globals--colors--error-750); + --c--contextuals--background--semantic--error--tertiary-hover: var(--c--globals--colors--error-800); + --c--contextuals--background--semantic--disabled--primary: var(--c--globals--colors--gray-750); + --c--contextuals--background--semantic--disabled--secondary: var(--c--globals--colors--gray-800); + --c--contextuals--background--palette--brand--primary: var(--c--globals--colors--brand-350); + --c--contextuals--background--palette--brand--secondary: var(--c--globals--colors--brand-450); + --c--contextuals--background--palette--brand--tertiary: var(--c--globals--colors--brand-550); + --c--contextuals--background--palette--red--primary: var(--c--globals--colors--red-350); + --c--contextuals--background--palette--red--secondary: var(--c--globals--colors--red-450); + --c--contextuals--background--palette--red--tertiary: var(--c--globals--colors--red-550); + --c--contextuals--background--palette--orange--primary: var(--c--globals--colors--orange-350); + --c--contextuals--background--palette--orange--secondary: var(--c--globals--colors--orange-450); + --c--contextuals--background--palette--orange--tertiary: var(--c--globals--colors--orange-550); + --c--contextuals--background--palette--brown--primary: var(--c--globals--colors--brown-350); + --c--contextuals--background--palette--brown--secondary: var(--c--globals--colors--brown-450); + --c--contextuals--background--palette--brown--tertiary: var(--c--globals--colors--brown-550); + --c--contextuals--background--palette--yellow--primary: var(--c--globals--colors--yellow-350); + --c--contextuals--background--palette--yellow--secondary: var(--c--globals--colors--yellow-450); + --c--contextuals--background--palette--yellow--tertiary: var(--c--globals--colors--yellow-550); + --c--contextuals--background--palette--green--primary: var(--c--globals--colors--green-350); + --c--contextuals--background--palette--green--secondary: var(--c--globals--colors--green-450); + --c--contextuals--background--palette--green--tertiary: var(--c--globals--colors--green-550); + --c--contextuals--background--palette--blue-1--primary: var(--c--globals--colors--blue-1-350); + --c--contextuals--background--palette--blue-1--secondary: var(--c--globals--colors--blue-1-450); + --c--contextuals--background--palette--blue-1--tertiary: var(--c--globals--colors--blue-1-550); + --c--contextuals--background--palette--blue-2--primary: var(--c--globals--colors--blue-2-350); + --c--contextuals--background--palette--blue-2--secondary: var(--c--globals--colors--blue-2-450); + --c--contextuals--background--palette--blue-2--tertiary: var(--c--globals--colors--blue-2-550); + --c--contextuals--background--palette--purple--primary: var(--c--globals--colors--purple-350); + --c--contextuals--background--palette--purple--secondary: var(--c--globals--colors--purple-450); + --c--contextuals--background--palette--purple--tertiary: var(--c--globals--colors--purple-550); + --c--contextuals--background--palette--pink--primary: var(--c--globals--colors--pink-350); + --c--contextuals--background--palette--pink--secondary: var(--c--globals--colors--pink-450); + --c--contextuals--background--palette--pink--tertiary: var(--c--globals--colors--pink-550); + --c--contextuals--background--palette--gray--primary: var(--c--globals--colors--gray-350); + --c--contextuals--background--palette--gray--secondary: var(--c--globals--colors--gray-450); + --c--contextuals--background--palette--gray--tertiary: var(--c--globals--colors--gray-550); + --c--contextuals--content--logo1: var(--c--globals--colors--logo-1-dark); + --c--contextuals--content--logo2: var(--c--globals--colors--logo-2-dark); + --c--contextuals--content--semantic--brand--primary: var(--c--globals--colors--brand-050); + --c--contextuals--content--semantic--brand--secondary: var(--c--globals--colors--brand-100); + --c--contextuals--content--semantic--brand--tertiary: var(--c--globals--colors--brand-250); + --c--contextuals--content--semantic--brand--on-brand: var(--c--globals--colors--brand-050); + --c--contextuals--content--semantic--neutral--primary: var(--c--globals--colors--gray-050); + --c--contextuals--content--semantic--neutral--secondary: var(--c--globals--colors--gray-100); + --c--contextuals--content--semantic--neutral--tertiary: var(--c--globals--colors--gray-250); + --c--contextuals--content--semantic--neutral--on-neutral: var(--c--globals--colors--gray-050); + --c--contextuals--content--semantic--contextual--primary: var(--c--globals--colors--black-850); + --c--contextuals--content--semantic--info--primary: var(--c--globals--colors--info-050); + --c--contextuals--content--semantic--info--secondary: var(--c--globals--colors--info-100); + --c--contextuals--content--semantic--info--tertiary: var(--c--globals--colors--info-250); + --c--contextuals--content--semantic--info--on-info: var(--c--globals--colors--info-050); + --c--contextuals--content--semantic--success--primary: var(--c--globals--colors--success-050); + --c--contextuals--content--semantic--success--secondary: var(--c--globals--colors--success-100); + --c--contextuals--content--semantic--success--tertiary: var(--c--globals--colors--success-250); + --c--contextuals--content--semantic--success--on-success: var(--c--globals--colors--success-050); + --c--contextuals--content--semantic--warning--primary: var(--c--globals--colors--warning-050); + --c--contextuals--content--semantic--warning--secondary: var(--c--globals--colors--warning-100); + --c--contextuals--content--semantic--warning--tertiary: var(--c--globals--colors--warning-250); + --c--contextuals--content--semantic--warning--on-warning: var(--c--globals--colors--warning-050); + --c--contextuals--content--semantic--error--primary: var(--c--globals--colors--error-050); + --c--contextuals--content--semantic--error--secondary: var(--c--globals--colors--error-100); + --c--contextuals--content--semantic--error--tertiary: var(--c--globals--colors--error-250); + --c--contextuals--content--semantic--error--on-error: var(--c--globals--colors--error-050); + --c--contextuals--content--semantic--disabled--primary: var(--c--globals--colors--gray-600); + --c--contextuals--content--semantic--disabled--secondary: var(--c--globals--colors--black-300); + --c--contextuals--content--palette--brand--primary: var(--c--globals--colors--brand-350); + --c--contextuals--content--palette--brand--secondary: var(--c--globals--colors--brand-450); + --c--contextuals--content--palette--brand--tertiary: var(--c--globals--colors--brand-550); + --c--contextuals--content--palette--red--primary: var(--c--globals--colors--red-350); + --c--contextuals--content--palette--red--secondary: var(--c--globals--colors--red-450); + --c--contextuals--content--palette--red--tertiary: var(--c--globals--colors--red-550); + --c--contextuals--content--palette--orange--primary: var(--c--globals--colors--orange-350); + --c--contextuals--content--palette--orange--secondary: var(--c--globals--colors--orange-450); + --c--contextuals--content--palette--orange--tertiary: var(--c--globals--colors--orange-550); + --c--contextuals--content--palette--brown--primary: var(--c--globals--colors--brown-350); + --c--contextuals--content--palette--brown--secondary: var(--c--globals--colors--brown-450); + --c--contextuals--content--palette--brown--tertiary: var(--c--globals--colors--brown-550); + --c--contextuals--content--palette--yellow--primary: var(--c--globals--colors--yellow-350); + --c--contextuals--content--palette--yellow--secondary: var(--c--globals--colors--yellow-450); + --c--contextuals--content--palette--yellow--tertiary: var(--c--globals--colors--yellow-550); + --c--contextuals--content--palette--green--primary: var(--c--globals--colors--green-350); + --c--contextuals--content--palette--green--secondary: var(--c--globals--colors--green-450); + --c--contextuals--content--palette--green--tertiary: var(--c--globals--colors--green-550); + --c--contextuals--content--palette--blue-1--primary: var(--c--globals--colors--blue-1-350); + --c--contextuals--content--palette--blue-1--secondary: var(--c--globals--colors--blue-1-450); + --c--contextuals--content--palette--blue-1--tertiary: var(--c--globals--colors--blue-1-550); + --c--contextuals--content--palette--blue-2--primary: var(--c--globals--colors--blue-2-350); + --c--contextuals--content--palette--blue-2--secondary: var(--c--globals--colors--blue-2-450); + --c--contextuals--content--palette--blue-2--tertiary: var(--c--globals--colors--blue-2-550); + --c--contextuals--content--palette--purple--primary: var(--c--globals--colors--purple-350); + --c--contextuals--content--palette--purple--secondary: var(--c--globals--colors--purple-450); + --c--contextuals--content--palette--purple--tertiary: var(--c--globals--colors--purple-550); + --c--contextuals--content--palette--pink--primary: var(--c--globals--colors--pink-350); + --c--contextuals--content--palette--pink--secondary: var(--c--globals--colors--pink-450); + --c--contextuals--content--palette--pink--tertiary: var(--c--globals--colors--pink-550); + --c--contextuals--content--palette--gray--primary: var(--c--globals--colors--gray-350); + --c--contextuals--content--palette--gray--secondary: var(--c--globals--colors--gray-450); + --c--contextuals--content--palette--gray--tertiary: var(--c--globals--colors--gray-550); + --c--contextuals--border--surface--primary: var(--c--globals--colors--gray-750); + --c--contextuals--border--semantic--brand--primary: var(--c--globals--colors--brand-450); + --c--contextuals--border--semantic--brand--secondary: var(--c--globals--colors--brand-600); + --c--contextuals--border--semantic--brand--tertiary: var(--c--globals--colors--brand-700); + --c--contextuals--border--semantic--contextual--primary: var(--c--globals--colors--black-200); + --c--contextuals--border--semantic--neutral--primary: var(--c--globals--colors--gray-450); + --c--contextuals--border--semantic--neutral--secondary: var(--c--globals--colors--gray-600); + --c--contextuals--border--semantic--neutral--tertiary: var(--c--globals--colors--gray-700); + --c--contextuals--border--semantic--info--primary: var(--c--globals--colors--info-450); + --c--contextuals--border--semantic--info--secondary: var(--c--globals--colors--info-600); + --c--contextuals--border--semantic--info--tertiary: var(--c--globals--colors--info-700); + --c--contextuals--border--semantic--success--primary: var(--c--globals--colors--success-450); + --c--contextuals--border--semantic--success--secondary: var(--c--globals--colors--success-600); + --c--contextuals--border--semantic--success--tertiary: var(--c--globals--colors--success-700); + --c--contextuals--border--semantic--warning--primary: var(--c--globals--colors--warning-450); + --c--contextuals--border--semantic--warning--secondary: var(--c--globals--colors--warning-600); + --c--contextuals--border--semantic--warning--tertiary: var(--c--globals--colors--warning-700); + --c--contextuals--border--semantic--error--primary: var(--c--globals--colors--error-450); + --c--contextuals--border--semantic--error--secondary: var(--c--globals--colors--error-600); + --c--contextuals--border--semantic--error--tertiary: var(--c--globals--colors--error-700); + --c--contextuals--border--semantic--disabled--primary: var(--c--globals--colors--gray-800); + --c--contextuals--border--palette--brand--primary: var(--c--globals--colors--brand-350); + --c--contextuals--border--palette--brand--secondary: var(--c--globals--colors--brand-450); + --c--contextuals--border--palette--brand--tertiary: var(--c--globals--colors--brand-550); + --c--contextuals--border--palette--red--primary: var(--c--globals--colors--red-350); + --c--contextuals--border--palette--red--secondary: var(--c--globals--colors--red-450); + --c--contextuals--border--palette--red--tertiary: var(--c--globals--colors--red-550); + --c--contextuals--border--palette--orange--primary: var(--c--globals--colors--orange-350); + --c--contextuals--border--palette--orange--secondary: var(--c--globals--colors--orange-450); + --c--contextuals--border--palette--orange--tertiary: var(--c--globals--colors--orange-550); + --c--contextuals--border--palette--brown--primary: var(--c--globals--colors--brown-350); + --c--contextuals--border--palette--brown--secondary: var(--c--globals--colors--brown-450); + --c--contextuals--border--palette--brown--tertiary: var(--c--globals--colors--brown-550); + --c--contextuals--border--palette--yellow--primary: var(--c--globals--colors--yellow-350); + --c--contextuals--border--palette--yellow--secondary: var(--c--globals--colors--yellow-450); + --c--contextuals--border--palette--yellow--tertiary: var(--c--globals--colors--yellow-550); + --c--contextuals--border--palette--green--primary: var(--c--globals--colors--green-350); + --c--contextuals--border--palette--green--secondary: var(--c--globals--colors--green-450); + --c--contextuals--border--palette--green--tertiary: var(--c--globals--colors--green-550); + --c--contextuals--border--palette--blue-1--primary: var(--c--globals--colors--blue-1-350); + --c--contextuals--border--palette--blue-1--secondary: var(--c--globals--colors--blue-1-450); + --c--contextuals--border--palette--blue-1--tertiary: var(--c--globals--colors--blue-1-550); + --c--contextuals--border--palette--blue-2--primary: var(--c--globals--colors--blue-2-350); + --c--contextuals--border--palette--blue-2--secondary: var(--c--globals--colors--blue-2-450); + --c--contextuals--border--palette--blue-2--tertiary: var(--c--globals--colors--blue-2-550); + --c--contextuals--border--palette--purple--primary: var(--c--globals--colors--purple-350); + --c--contextuals--border--palette--purple--secondary: var(--c--globals--colors--purple-450); + --c--contextuals--border--palette--purple--tertiary: var(--c--globals--colors--purple-550); + --c--contextuals--border--palette--pink--primary: var(--c--globals--colors--pink-350); + --c--contextuals--border--palette--pink--secondary: var(--c--globals--colors--pink-450); + --c--contextuals--border--palette--pink--tertiary: var(--c--globals--colors--pink-550); + --c--contextuals--border--palette--gray--primary: var(--c--globals--colors--gray-350); + --c--contextuals--border--palette--gray--secondary: var(--c--globals--colors--gray-450); + --c--contextuals--border--palette--gray--tertiary: var(--c--globals--colors--gray-550); +} +" +`); }); const testOutput = async (opt: string) => { @@ -200,10 +1373,10 @@ describe("Cunningham Bin", () => { --c--components--button--font-family: Times New Roman,Helvetica Neue,Segoe UI; } .cunningham-theme--dark{ - --c--theme--colors--primary: black; + --c--globals--colors--primary: black; } .cunningham-theme--custom{ - --c--theme--colors--primary: green; + --c--globals--colors--primary: green; } " `); diff --git a/packages/tokens/src/lib/index.ts b/packages/tokens/src/lib/index.ts index 97db5fa..8f5e75b 100644 --- a/packages/tokens/src/lib/index.ts +++ b/packages/tokens/src/lib/index.ts @@ -2,9 +2,8 @@ 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; /**