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

✨(demo) update demo app

Browse Source 
Update the demo app to make it work with new tokens.
This commit is contained in:
Nathan Panchout
2025-09-17 16:48:37 +02:00
committed by NathanVss
parent 47e3e28090
commit f93a83655c
19 changed files with 2936 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

592
apps/demo/cunningham.ts
View File

@@ -1,7 +1,597 @@
import { defaultThemes } from "@openfun/cunningham-tokens";
import { contextualDark, defaultThemes } from "@openfun/cunningham-tokens";
const defaultConfig = {
themes: {
redflux: {
globals: {
colors: {
"brand-050": "#FBEEED",
"brand-100": "#F7DCDB",
"brand-150": "#F4CBC9",
"brand-200": "#F0B9B7",
"brand-250": "#ECA7A4",
"brand-300": "#E89591",
"brand-350": "#E4827E",
"brand-400": "#E06F69",
"brand-450": "#DB5953",
"brand-500": "#D6413A",
"brand-550": "#CA2D25",
"brand-600": "#B32821",
"brand-650": "#933028",
"brand-700": "#783029",
"brand-750": "#5F2D27",
"brand-800": "#492723",
"brand-850": "#37201D",
"brand-900": "#261816",
"brand-950": "#170F0E",
"gray-000": "#FFFFFF",
"gray-025": "#F8F8F8",
"gray-050": "#F1F1F1",
"gray-100": "#E2E2E2",
"gray-150": "#D4D4D4",
"gray-200": "#C6C6C6",
"gray-250": "#B9B9B9",
"gray-300": "#ABABAB",
"gray-350": "#9E9E9E",
"gray-400": "#919191",
"gray-450": "#848484",
"gray-500": "#777777",
"gray-550": "#6A6A6A",
"gray-600": "#5E5E5E",
"gray-650": "#525252",
"gray-700": "#474747",
"gray-750": "#3B3B3B",
"gray-800": "#303030",
"gray-850": "#262626",
"gray-900": "#1B1B1B",
"gray-950": "#111111",
"gray-1000": "#000000",
"info-050": "#ECF1FA",
"info-100": "#D8E3F6",
"info-150": "#C5D5F1",
"info-200": "#B2C8EC",
"info-250": "#9FBAE8",
"info-300": "#8CACE3",
"info-350": "#7A9FDE",
"info-400": "#6791DA",
"info-450": "#5483D5",
"info-500": "#4075D0",
"info-550": "#2C67CC",
"info-600": "#265BB6",
"info-650": "#2A5195",
"info-700": "#2A4677",
"info-750": "#283B5E",
"info-800": "#233148",
"info-850": "#1C2635",
"info-900": "#161C25",
"info-950": "#0E1116",
"success-050": "#D9F9DB",
"success-100": "#B1F2B5",
"success-150": "#83EB89",
"success-200": "#71DD78",
"success-250": "#69CE6F",
"success-300": "#61BF67",
"success-350": "#5AB05F",
"success-400": "#53A158",
"success-450": "#4B934F",
"success-500": "#448548",
"success-550": "#3D7740",
"success-600": "#366939",
"success-650": "#365B38",
"success-700": "#324D34",
"success-750": "#2D402E",
"success-800": "#273427",
"success-850": "#202820",
"success-900": "#181D18",
"success-950": "#0F110E",
"warning-050": "#F7F0E3",
"warning-100": "#EFE1C7",
"warning-150": "#E7D2AB",
"warning-200": "#DFC38F",
"warning-250": "#D7B473",
"warning-300": "#CFA557",
"warning-350": "#C49644",
"warning-400": "#B38A3F",
"warning-450": "#A37E39",
"warning-500": "#947134",
"warning-550": "#84662E",
"warning-600": "#755A29",
"warning-650": "#63502C",
"warning-700": "#53442D",
"warning-750": "#453A29",
"warning-800": "#362F24",
"warning-850": "#2A251D",
"warning-900": "#1E1B16",
"warning-950": "#12110E",
"error-050": "#FBEEED",
"error-100": "#F8DCDC",
"error-150": "#F4CACA",
"error-200": "#F1B9B8",
"error-250": "#EDA7A6",
"error-300": "#E99494",
"error-350": "#E58181",
"error-400": "#E16D6C",
"error-450": "#DD5857",
"error-500": "#D14746",
"error-550": "#BB403F",
"error-600": "#A63838",
"error-650": "#893937",
"error-700": "#703533",
"error-750": "#59302D",
"error-800": "#452927",
"error-850": "#332120",
"error-900": "#241919",
"error-950": "#150F0F",
"red-050": "#FDEDED",
"red-100": "#FADBDB",
"red-150": "#F8C9C9",
"red-200": "#F5B7B6",
"red-250": "#F3A4A3",
"red-300": "#F09190",
"red-350": "#EE7C7B",
"red-400": "#EB6665",
"red-450": "#E74E4D",
"red-500": "#D83F3D",
"red-550": "#C23837",
"red-600": "#AC3231",
"red-650": "#8D3531",
"red-700": "#73332F",
"red-750": "#5B2F2B",
"red-800": "#472826",
"red-850": "#35211F",
"red-900": "#251817",
"red-950": "#160F0E",
"orange-050": "#FDEEE2",
"orange-100": "#FCDDC5",
"orange-150": "#FACBA8",
"orange-200": "#F8B98B",
"orange-250": "#F6A76A",
"orange-300": "#F4934B",
"orange-350": "#F27E27",
"orange-400": "#E76E12",
"orange-450": "#D26411",
"orange-500": "#BE5B0F",
"orange-550": "#AA510E",
"orange-600": "#97480C",
"orange-650": "#7E431D",
"orange-700": "#673C22",
"orange-750": "#533422",
"orange-800": "#412C1F",
"orange-850": "#31231B",
"orange-900": "#221A14",
"orange-950": "#15100C",
"brown-050": "#F3F0EF",
"brown-100": "#E7E1DF",
"brown-150": "#DCD2CF",
"brown-200": "#D0C4BF",
"brown-250": "#C5B6B0",
"brown-300": "#BAA7A1",
"brown-350": "#AF9992",
"brown-400": "#A48B83",
"brown-450": "#997E74",
"brown-500": "#8F7065",
"brown-550": "#846357",
"brown-600": "#7A5649",
"brown-650": "#684C42",
"brown-700": "#57423C",
"brown-750": "#463833",
"brown-800": "#382E2A",
"brown-850": "#2B2422",
"brown-900": "#1F1B19",
"brown-950": "#121010",
"yellow-050": "#FAF0D3",
"yellow-100": "#F5E2A4",
"yellow-150": "#F0D275",
"yellow-200": "#EBC242",
"yellow-250": "#E4B213",
"yellow-300": "#D4A511",
"yellow-350": "#C39810",
"yellow-400": "#B38B0F",
"yellow-450": "#A37F0D",
"yellow-500": "#93730C",
"yellow-550": "#84670B",
"yellow-600": "#755B0A",
"yellow-650": "#63501C",
"yellow-700": "#534521",
"yellow-750": "#443A21",
"yellow-800": "#36301F",
"yellow-850": "#29261A",
"yellow-900": "#1D1C14",
"yellow-950": "#12110C",
"green-050": "#E2F6E5",
"green-100": "#C5ECCA",
"green-150": "#A7E3AF",
"green-200": "#89D894",
"green-250": "#67CE75",
"green-300": "#4DC25D",
"green-350": "#48B257",
"green-400": "#41A44F",
"green-450": "#3B9548",
"green-500": "#368741",
"green-550": "#30793A",
"green-600": "#2B6B33",
"green-650": "#2F5C34",
"green-700": "#2E4E31",
"green-750": "#2A412C",
"green-800": "#253426",
"green-850": "#1E281F",
"green-900": "#171D17",
"green-950": "#0F120F",
"blue1-050": "#EBF1FF",
"blue1-100": "#D6E3FE",
"blue1-150": "#C2D5FE",
"blue1-200": "#ADC7FE",
"blue1-250": "#99B8FD",
"blue1-300": "#84AAFD",
"blue1-350": "#6F9BFD",
"blue1-400": "#5A8DFB",
"blue1-450": "#437DFC",
"blue1-500": "#3D71E4",
"blue1-550": "#3665CC",
"blue1-600": "#305AB5",
"blue1-650": "#315093",
"blue1-700": "#2E4675",
"blue1-750": "#293B5E",
"blue1-800": "#243048",
"blue1-850": "#1E2635",
"blue1-900": "#171C25",
"blue1-950": "#0E1116",
"blue2-050": "#E2F4F9",
"blue2-100": "#C5E9F3",
"blue2-150": "#A7DDED",
"blue2-200": "#88D1E6",
"blue2-250": "#68C5E0",
"blue2-300": "#48B8D9",
"blue2-350": "#3BAACA",
"blue2-400": "#359CB9",
"blue2-450": "#318EA9",
"blue2-500": "#2C8199",
"blue2-550": "#277389",
"blue2-600": "#236679",
"blue2-650": "#2A5866",
"blue2-700": "#2A4B55",
"blue2-750": "#283F47",
"blue2-800": "#233337",
"blue2-850": "#1D272A",
"blue2-900": "#161C1E",
"blue2-950": "#0E1112",
"purple-050": "#F6EEFF",
"purple-100": "#ECDCFF",
"purple-150": "#E3CBFE",
"purple-200": "#DAB9FE",
"purple-250": "#D0A7FE",
"purple-300": "#C795FE",
"purple-350": "#BD83FD",
"purple-400": "#B36FFD",
"purple-450": "#A85BFD",
"purple-500": "#9B4BF3",
"purple-550": "#8B43DA",
"purple-600": "#7B3CC1",
"purple-650": "#673C9B",
"purple-700": "#56387D",
"purple-750": "#463162",
"purple-800": "#382A4A",
"purple-850": "#2A2237",
"purple-900": "#1E1926",
"purple-950": "#121017",
"pink-050": "#FCEDF5",
"pink-100": "#F9DAEA",
"pink-150": "#F7C7E0",
"pink-200": "#F4B4D5",
"pink-250": "#F1A1CA",
"pink-300": "#EE8CBF",
"pink-350": "#EA77B3",
"pink-400": "#E760A6",
"pink-450": "#E24797",
"pink-500": "#CD4089",
"pink-550": "#B8397B",
"pink-600": "#A3336D",
"pink-650": "#86355E",
"pink-700": "#6E334F",
"pink-750": "#582E42",
"pink-800": "#442834",
"pink-850": "#332028",
"pink-900": "#24181D",
"pink-950": "#160F12"
},
},
contextuals: contextualDark,
},
blueny: {
globals: {
colors: {
"brand-050": "#EBF1FA",
"brand-100": "#D7E4F5",
"brand-150": "#C3D6F0",
"brand-200": "#B0C8EB",
"brand-250": "#9CBBE6",
"brand-300": "#89ADE1",
"brand-350": "#75A0DC",
"brand-400": "#6192D7",
"brand-450": "#4D85D2",
"brand-500": "#3977CD",
"brand-550": "#2C6ABF",
"brand-600": "#275EA9",
"brand-650": "#2B538A",
"brand-700": "#2B4770",
"brand-750": "#283C59",
"brand-800": "#233145",
"brand-850": "#1D2633",
"brand-900": "#171C24",
"brand-950": "#0E1115",
"gray-000": "#FFFFFF",
"gray-025": "#F8F8FA",
"gray-050": "#F0F0F5",
"gray-100": "#E1E2EA",
"gray-150": "#D2D4E0",
"gray-200": "#C4C5D6",
"gray-250": "#B5B7CC",
"gray-300": "#A7AAC2",
"gray-350": "#999CB6",
"gray-400": "#8D8FA7",
"gray-450": "#808298",
"gray-500": "#747689",
"gray-550": "#68697B",
"gray-600": "#5C5D6D",
"gray-650": "#50525F",
"gray-700": "#454652",
"gray-750": "#3A3B45",
"gray-800": "#2F3038",
"gray-850": "#25252C",
"gray-900": "#1B1B20",
"gray-950": "#101113",
"gray-1000": "#000000",
"info-050": "#EDF1F9",
"info-100": "#DAE3F3",
"info-150": "#C8D5EE",
"info-200": "#B7C7E8",
"info-250": "#A5B9E2",
"info-300": "#93ACDD",
"info-350": "#819ED7",
"info-400": "#7090D1",
"info-450": "#5E83CC",
"info-500": "#4D75C6",
"info-550": "#3B67C1",
"info-600": "#2959BB",
"info-650": "#29509B",
"info-700": "#28467C",
"info-750": "#263B61",
"info-800": "#22304B",
"info-850": "#1C2637",
"info-900": "#161C26",
"info-950": "#0E1117",
"success-050": "#E7F6D8",
"success-100": "#CEECB1",
"success-150": "#B4E289",
"success-200": "#99D85D",
"success-250": "#88CB49",
"success-300": "#7EBC43",
"success-350": "#74AD3E",
"success-400": "#6A9F39",
"success-450": "#619134",
"success-500": "#58832F",
"success-550": "#4E752A",
"success-600": "#456825",
"success-650": "#405A29",
"success-700": "#394C29",
"success-750": "#333F28",
"success-800": "#2B3323",
"success-850": "#22281E",
"success-900": "#191D16",
"success-950": "#10110E",
"warning-050": "#F8F0DE",
"warning-100": "#F0E2BC",
"warning-150": "#E9D39A",
"warning-200": "#E1C478",
"warning-250": "#D9B456",
"warning-300": "#D0A539",
"warning-350": "#C09934",
"warning-400": "#B08C2F",
"warning-450": "#A07F2B",
"warning-500": "#917327",
"warning-550": "#816723",
"warning-600": "#735B1F",
"warning-650": "#615026",
"warning-700": "#524527",
"warning-750": "#433B26",
"warning-800": "#363022",
"warning-850": "#29261C",
"warning-900": "#1D1B16",
"warning-950": "#12110E",
"error-050": "#FBEEED",
"error-100": "#F6DDDB",
"error-150": "#F2CCC8",
"error-200": "#EDBAB6",
"error-250": "#E9A9A4",
"error-300": "#E49791",
"error-350": "#E0857E",
"error-400": "#DB726A",
"error-450": "#D65E54",
"error-500": "#D0483D",
"error-550": "#C92E22",
"error-600": "#B5261A",
"error-650": "#952F24",
"error-700": "#783026",
"error-750": "#602C25",
"error-800": "#4A2722",
"error-850": "#371F1C",
"error-900": "#261816",
"error-950": "#170F0D",
"red-050": "#FDEDED",
"red-100": "#FADBDB",
"red-150": "#F8C9C9",
"red-200": "#F5B7B6",
"red-250": "#F3A4A3",
"red-300": "#F09190",
"red-350": "#EE7C7B",
"red-400": "#EB6665",
"red-450": "#E74E4D",
"red-500": "#D83F3D",
"red-550": "#C23837",
"red-600": "#AC3231",
"red-650": "#8D3531",
"red-700": "#73332F",
"red-750": "#5B2F2B",
"red-800": "#472826",
"red-850": "#35211F",
"red-900": "#251817",
"red-950": "#160F0E",
"orange-050": "#FDEEE2",
"orange-100": "#FCDDC5",
"orange-150": "#FACBA8",
"orange-200": "#F8B98B",
"orange-250": "#F6A76A",
"orange-300": "#F4934B",
"orange-350": "#F27E27",
"orange-400": "#E76E12",
"orange-450": "#D26411",
"orange-500": "#BE5B0F",
"orange-550": "#AA510E",
"orange-600": "#97480C",
"orange-650": "#7E431D",
"orange-700": "#673C22",
"orange-750": "#533422",
"orange-800": "#412C1F",
"orange-850": "#31231B",
"orange-900": "#221A14",
"orange-950": "#15100C",
"brown-050": "#F3F0EF",
"brown-100": "#E7E1DF",
"brown-150": "#DCD2CF",
"brown-200": "#D0C4BF",
"brown-250": "#C5B6B0",
"brown-300": "#BAA7A1",
"brown-350": "#AF9992",
"brown-400": "#A48B83",
"brown-450": "#997E74",
"brown-500": "#8F7065",
"brown-550": "#846357",
"brown-600": "#7A5649",
"brown-650": "#684C42",
"brown-700": "#57423C",
"brown-750": "#463833",
"brown-800": "#382E2A",
"brown-850": "#2B2422",
"brown-900": "#1F1B19",
"brown-950": "#121010",
"yellow-050": "#FAF0D3",
"yellow-100": "#F5E2A4",
"yellow-150": "#F0D275",
"yellow-200": "#EBC242",
"yellow-250": "#E4B213",
"yellow-300": "#D4A511",
"yellow-350": "#C39810",
"yellow-400": "#B38B0F",
"yellow-450": "#A37F0D",
"yellow-500": "#93730C",
"yellow-550": "#84670B",
"yellow-600": "#755B0A",
"yellow-650": "#63501C",
"yellow-700": "#534521",
"yellow-750": "#443A21",
"yellow-800": "#36301F",
"yellow-850": "#29261A",
"yellow-900": "#1D1C14",
"yellow-950": "#12110C",
"green-050": "#E2F6E5",
"green-100": "#C5ECCA",
"green-150": "#A7E3AF",
"green-200": "#89D894",
"green-250": "#67CE75",
"green-300": "#4DC25D",
"green-350": "#48B257",
"green-400": "#41A44F",
"green-450": "#3B9548",
"green-500": "#368741",
"green-550": "#30793A",
"green-600": "#2B6B33",
"green-650": "#2F5C34",
"green-700": "#2E4E31",
"green-750": "#2A412C",
"green-800": "#253426",
"green-850": "#1E281F",
"green-900": "#171D17",
"green-950": "#0F120F",
"blue1-050": "#EBF1FF",
"blue1-100": "#D6E3FE",
"blue1-150": "#C2D5FE",
"blue1-200": "#ADC7FE",
"blue1-250": "#99B8FD",
"blue1-300": "#84AAFD",
"blue1-350": "#6F9BFD",
"blue1-400": "#5A8DFB",
"blue1-450": "#437DFC",
"blue1-500": "#3D71E4",
"blue1-550": "#3665CC",
"blue1-600": "#305AB5",
"blue1-650": "#315093",
"blue1-700": "#2E4675",
"blue1-750": "#293B5E",
"blue1-800": "#243048",
"blue1-850": "#1E2635",
"blue1-900": "#171C25",
"blue1-950": "#0E1116",
"blue2-050": "#E2F4F9",
"blue2-100": "#C5E9F3",
"blue2-150": "#A7DDED",
"blue2-200": "#88D1E6",
"blue2-250": "#68C5E0",
"blue2-300": "#48B8D9",
"blue2-350": "#3BAACA",
"blue2-400": "#359CB9",
"blue2-450": "#318EA9",
"blue2-500": "#2C8199",
"blue2-550": "#277389",
"blue2-600": "#236679",
"blue2-650": "#2A5866",
"blue2-700": "#2A4B55",
"blue2-750": "#283F47",
"blue2-800": "#233337",
"blue2-850": "#1D272A",
"blue2-900": "#161C1E",
"blue2-950": "#0E1112",
"purple-050": "#F6EEFF",
"purple-100": "#ECDCFF",
"purple-150": "#E3CBFE",
"purple-200": "#DAB9FE",
"purple-250": "#D0A7FE",
"purple-300": "#C795FE",
"purple-350": "#BD83FD",
"purple-400": "#B36FFD",
"purple-450": "#A85BFD",
"purple-500": "#9B4BF3",
"purple-550": "#8B43DA",
"purple-600": "#7B3CC1",
"purple-650": "#673C9B",
"purple-700": "#56387D",
"purple-750": "#463162",
"purple-800": "#382A4A",
"purple-850": "#2A2237",
"purple-900": "#1E1926",
"purple-950": "#121017",
"pink-050": "#FCEDF5",
"pink-100": "#F9DAEA",
"pink-150": "#F7C7E0",
"pink-200": "#F4B4D5",
"pink-250": "#F1A1CA",
"pink-300": "#EE8CBF",
"pink-350": "#EA77B3",
"pink-400": "#E760A6",
"pink-450": "#E24797",
"pink-500": "#CD4089",
"pink-550": "#B8397B",
"pink-600": "#A3336D",
"pink-650": "#86355E",
"pink-700": "#6E334F",
"pink-750": "#582E42",
"pink-800": "#442834",
"pink-850": "#332028",
"pink-900": "#24181D",
"pink-950": "#160F12"
},
},
contextuals: contextualDark,
},
dark: {
components: {
card: {

11
apps/demo/src/App.tsx
View File

@@ -11,6 +11,8 @@ import Onboarding from "./Onboarding";
enum Theme {
CUNNINGHAM = "cunningham",
REDFLUX = "redflux",
BLUENEY = "blueny",
}
enum Variant {
@@ -23,7 +25,14 @@ const THEMES: Record<Theme, Record<Variant, string | undefined>> = {
light: "default",
dark: "dark",
},
[Theme.REDFLUX]: {
light: undefined,
dark: "redflux",
},
[Theme.BLUENEY]: {
light: undefined,
dark: "blueny",
},
};
export type PageProps = ReturnType<typeof useModal>;

6
apps/demo/src/Create.tsx
View File

@@ -55,7 +55,7 @@ export const Create = (props: PageProps) => {
>
<form className="page__create clr-gray-900" onSubmit={submit}>
<div className="page__create__group">
<h3 className="clr-content-semantic--neutral--primary fw-bold fs-h3">General Information</h3>
<h3 className="clr-content-semantic-neutral-primary fw-bold fs-h3">General Information</h3>
<Alert type={VariantType.INFO}>
You are about to add a new character to the collection
</Alert>
@@ -91,7 +91,7 @@ export const Create = (props: PageProps) => {
<Checkbox name="is_guest" label="This character is a guest" />
</div>
<div className="page__create__group mt-l">
<h3 className="clr-content-semantic--neutral--primary fw-bold fs-h3">Bio</h3>
<h3 className="clr-content-semantic-neutral-primary fw-bold fs-h3">Bio</h3>
<Alert type={VariantType.WARNING}>
Please be exhaustive, every detail counts!
</Alert>
@@ -127,7 +127,7 @@ export const Create = (props: PageProps) => {
<Switch name="is_public" label="Make this character public" />
<div>
<h4 className="clr-content-semantic--neutral--primary">Add pictures</h4>
<h4 className="clr-content-semantic-neutral-primary">Add pictures</h4>
<div className="mt-s">
<FileUploader

48
apps/demo/src/Home.tsx
View File

@@ -7,12 +7,56 @@ import {
useToastProvider,
VariantType,
useModals,
defaultTokens,
} from "@openfun/cunningham-react";
import { PageProps } from "./App";
import { database } from "./Character";
interface PathValueObject {
path: string[];
value: any;
}
/**
* 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 Home = ({ modal }: { modal: PageProps }) => {
const { toast } = useToastProvider();
const bg = createPathValueArray(defaultTokens.contextuals.background);
const a = bg.map((key) => {
return `.bg-${key.path.join("-")} { background-color: var(--c--contextuals--background--${key.path.join("--")}); }`;
});
console.log(a)
// console.log(createPathValueArray(bg))
const modals = useModals();
const [rowSelection, setRowSelection] = useState({});
const [isLoading, setIsLoading] = useState(true);
@@ -57,11 +101,11 @@ export const Home = ({ modal }: { modal: PageProps }) => {
return (
<main className="page__home">
<header className="page__home__title">
<h1 className="clr-content-semantic--neutral--primary">
<h1 className="clr-content-semantic-neutral-primary">
{/* eslint-disable-next-line react/no-unescaped-entities */}
🍿Cunningham's <span className="clr-brand-400">Cast</span>
</h1>
<p className="clr-content-semantic--neutral--tertiary fs-sm fw-regular">
<p className="clr-content-semantic-neutral-tertiary fs-sm fw-regular">
Happy Days is an American television sitcom that aired first-run from
January 15, 1974, to September 24, 1984, on ABC-TV
<br /> with a total of 255 half-hour episodes spanning over eleven

1248
apps/demo/src/cunningham-tokens-sass.scss
View File

File diff suppressed because it is too large Load Diff

964
apps/demo/src/cunningham-tokens.css
View File

@@ -1171,3 +1171,967 @@
--c--components--card--border-width: none;
--c--components--card--box-shadow: rgba(0, 8, 16, 0.3) 0px 16px 24px;
}
.cunningham-theme--redflux{
--c--globals--colors--brand-050: #FBEEED;
--c--globals--colors--brand-100: #F7DCDB;
--c--globals--colors--brand-150: #F4CBC9;
--c--globals--colors--brand-200: #F0B9B7;
--c--globals--colors--brand-250: #ECA7A4;
--c--globals--colors--brand-300: #E89591;
--c--globals--colors--brand-350: #E4827E;
--c--globals--colors--brand-400: #E06F69;
--c--globals--colors--brand-450: #DB5953;
--c--globals--colors--brand-500: #D6413A;
--c--globals--colors--brand-550: #CA2D25;
--c--globals--colors--brand-600: #B32821;
--c--globals--colors--brand-650: #933028;
--c--globals--colors--brand-700: #783029;
--c--globals--colors--brand-750: #5F2D27;
--c--globals--colors--brand-800: #492723;
--c--globals--colors--brand-850: #37201D;
--c--globals--colors--brand-900: #261816;
--c--globals--colors--brand-950: #170F0E;
--c--globals--colors--gray-000: #FFFFFF;
--c--globals--colors--gray-025: #F8F8F8;
--c--globals--colors--gray-050: #F1F1F1;
--c--globals--colors--gray-100: #E2E2E2;
--c--globals--colors--gray-150: #D4D4D4;
--c--globals--colors--gray-200: #C6C6C6;
--c--globals--colors--gray-250: #B9B9B9;
--c--globals--colors--gray-300: #ABABAB;
--c--globals--colors--gray-350: #9E9E9E;
--c--globals--colors--gray-400: #919191;
--c--globals--colors--gray-450: #848484;
--c--globals--colors--gray-500: #777777;
--c--globals--colors--gray-550: #6A6A6A;
--c--globals--colors--gray-600: #5E5E5E;
--c--globals--colors--gray-650: #525252;
--c--globals--colors--gray-700: #474747;
--c--globals--colors--gray-750: #3B3B3B;
--c--globals--colors--gray-800: #303030;
--c--globals--colors--gray-850: #262626;
--c--globals--colors--gray-900: #1B1B1B;
--c--globals--colors--gray-950: #111111;
--c--globals--colors--gray-1000: #000000;
--c--globals--colors--info-050: #ECF1FA;
--c--globals--colors--info-100: #D8E3F6;
--c--globals--colors--info-150: #C5D5F1;
--c--globals--colors--info-200: #B2C8EC;
--c--globals--colors--info-250: #9FBAE8;
--c--globals--colors--info-300: #8CACE3;
--c--globals--colors--info-350: #7A9FDE;
--c--globals--colors--info-400: #6791DA;
--c--globals--colors--info-450: #5483D5;
--c--globals--colors--info-500: #4075D0;
--c--globals--colors--info-550: #2C67CC;
--c--globals--colors--info-600: #265BB6;
--c--globals--colors--info-650: #2A5195;
--c--globals--colors--info-700: #2A4677;
--c--globals--colors--info-750: #283B5E;
--c--globals--colors--info-800: #233148;
--c--globals--colors--info-850: #1C2635;
--c--globals--colors--info-900: #161C25;
--c--globals--colors--info-950: #0E1116;
--c--globals--colors--success-050: #D9F9DB;
--c--globals--colors--success-100: #B1F2B5;
--c--globals--colors--success-150: #83EB89;
--c--globals--colors--success-200: #71DD78;
--c--globals--colors--success-250: #69CE6F;
--c--globals--colors--success-300: #61BF67;
--c--globals--colors--success-350: #5AB05F;
--c--globals--colors--success-400: #53A158;
--c--globals--colors--success-450: #4B934F;
--c--globals--colors--success-500: #448548;
--c--globals--colors--success-550: #3D7740;
--c--globals--colors--success-600: #366939;
--c--globals--colors--success-650: #365B38;
--c--globals--colors--success-700: #324D34;
--c--globals--colors--success-750: #2D402E;
--c--globals--colors--success-800: #273427;
--c--globals--colors--success-850: #202820;
--c--globals--colors--success-900: #181D18;
--c--globals--colors--success-950: #0F110E;
--c--globals--colors--warning-050: #F7F0E3;
--c--globals--colors--warning-100: #EFE1C7;
--c--globals--colors--warning-150: #E7D2AB;
--c--globals--colors--warning-200: #DFC38F;
--c--globals--colors--warning-250: #D7B473;
--c--globals--colors--warning-300: #CFA557;
--c--globals--colors--warning-350: #C49644;
--c--globals--colors--warning-400: #B38A3F;
--c--globals--colors--warning-450: #A37E39;
--c--globals--colors--warning-500: #947134;
--c--globals--colors--warning-550: #84662E;
--c--globals--colors--warning-600: #755A29;
--c--globals--colors--warning-650: #63502C;
--c--globals--colors--warning-700: #53442D;
--c--globals--colors--warning-750: #453A29;
--c--globals--colors--warning-800: #362F24;
--c--globals--colors--warning-850: #2A251D;
--c--globals--colors--warning-900: #1E1B16;
--c--globals--colors--warning-950: #12110E;
--c--globals--colors--error-050: #FBEEED;
--c--globals--colors--error-100: #F8DCDC;
--c--globals--colors--error-150: #F4CACA;
--c--globals--colors--error-200: #F1B9B8;
--c--globals--colors--error-250: #EDA7A6;
--c--globals--colors--error-300: #E99494;
--c--globals--colors--error-350: #E58181;
--c--globals--colors--error-400: #E16D6C;
--c--globals--colors--error-450: #DD5857;
--c--globals--colors--error-500: #D14746;
--c--globals--colors--error-550: #BB403F;
--c--globals--colors--error-600: #A63838;
--c--globals--colors--error-650: #893937;
--c--globals--colors--error-700: #703533;
--c--globals--colors--error-750: #59302D;
--c--globals--colors--error-800: #452927;
--c--globals--colors--error-850: #332120;
--c--globals--colors--error-900: #241919;
--c--globals--colors--error-950: #150F0F;
--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--blue1-050: #EBF1FF;
--c--globals--colors--blue1-100: #D6E3FE;
--c--globals--colors--blue1-150: #C2D5FE;
--c--globals--colors--blue1-200: #ADC7FE;
--c--globals--colors--blue1-250: #99B8FD;
--c--globals--colors--blue1-300: #84AAFD;
--c--globals--colors--blue1-350: #6F9BFD;
--c--globals--colors--blue1-400: #5A8DFB;
--c--globals--colors--blue1-450: #437DFC;
--c--globals--colors--blue1-500: #3D71E4;
--c--globals--colors--blue1-550: #3665CC;
--c--globals--colors--blue1-600: #305AB5;
--c--globals--colors--blue1-650: #315093;
--c--globals--colors--blue1-700: #2E4675;
--c--globals--colors--blue1-750: #293B5E;
--c--globals--colors--blue1-800: #243048;
--c--globals--colors--blue1-850: #1E2635;
--c--globals--colors--blue1-900: #171C25;
--c--globals--colors--blue1-950: #0E1116;
--c--globals--colors--blue2-050: #E2F4F9;
--c--globals--colors--blue2-100: #C5E9F3;
--c--globals--colors--blue2-150: #A7DDED;
--c--globals--colors--blue2-200: #88D1E6;
--c--globals--colors--blue2-250: #68C5E0;
--c--globals--colors--blue2-300: #48B8D9;
--c--globals--colors--blue2-350: #3BAACA;
--c--globals--colors--blue2-400: #359CB9;
--c--globals--colors--blue2-450: #318EA9;
--c--globals--colors--blue2-500: #2C8199;
--c--globals--colors--blue2-550: #277389;
--c--globals--colors--blue2-600: #236679;
--c--globals--colors--blue2-650: #2A5866;
--c--globals--colors--blue2-700: #2A4B55;
--c--globals--colors--blue2-750: #283F47;
--c--globals--colors--blue2-800: #233337;
--c--globals--colors--blue2-850: #1D272A;
--c--globals--colors--blue2-900: #161C1E;
--c--globals--colors--blue2-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--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);
}
.cunningham-theme--blueny{
--c--globals--colors--brand-050: #EBF1FA;
--c--globals--colors--brand-100: #D7E4F5;
--c--globals--colors--brand-150: #C3D6F0;
--c--globals--colors--brand-200: #B0C8EB;
--c--globals--colors--brand-250: #9CBBE6;
--c--globals--colors--brand-300: #89ADE1;
--c--globals--colors--brand-350: #75A0DC;
--c--globals--colors--brand-400: #6192D7;
--c--globals--colors--brand-450: #4D85D2;
--c--globals--colors--brand-500: #3977CD;
--c--globals--colors--brand-550: #2C6ABF;
--c--globals--colors--brand-600: #275EA9;
--c--globals--colors--brand-650: #2B538A;
--c--globals--colors--brand-700: #2B4770;
--c--globals--colors--brand-750: #283C59;
--c--globals--colors--brand-800: #233145;
--c--globals--colors--brand-850: #1D2633;
--c--globals--colors--brand-900: #171C24;
--c--globals--colors--brand-950: #0E1115;
--c--globals--colors--gray-000: #FFFFFF;
--c--globals--colors--gray-025: #F8F8FA;
--c--globals--colors--gray-050: #F0F0F5;
--c--globals--colors--gray-100: #E1E2EA;
--c--globals--colors--gray-150: #D2D4E0;
--c--globals--colors--gray-200: #C4C5D6;
--c--globals--colors--gray-250: #B5B7CC;
--c--globals--colors--gray-300: #A7AAC2;
--c--globals--colors--gray-350: #999CB6;
--c--globals--colors--gray-400: #8D8FA7;
--c--globals--colors--gray-450: #808298;
--c--globals--colors--gray-500: #747689;
--c--globals--colors--gray-550: #68697B;
--c--globals--colors--gray-600: #5C5D6D;
--c--globals--colors--gray-650: #50525F;
--c--globals--colors--gray-700: #454652;
--c--globals--colors--gray-750: #3A3B45;
--c--globals--colors--gray-800: #2F3038;
--c--globals--colors--gray-850: #25252C;
--c--globals--colors--gray-900: #1B1B20;
--c--globals--colors--gray-950: #101113;
--c--globals--colors--gray-1000: #000000;
--c--globals--colors--info-050: #EDF1F9;
--c--globals--colors--info-100: #DAE3F3;
--c--globals--colors--info-150: #C8D5EE;
--c--globals--colors--info-200: #B7C7E8;
--c--globals--colors--info-250: #A5B9E2;
--c--globals--colors--info-300: #93ACDD;
--c--globals--colors--info-350: #819ED7;
--c--globals--colors--info-400: #7090D1;
--c--globals--colors--info-450: #5E83CC;
--c--globals--colors--info-500: #4D75C6;
--c--globals--colors--info-550: #3B67C1;
--c--globals--colors--info-600: #2959BB;
--c--globals--colors--info-650: #29509B;
--c--globals--colors--info-700: #28467C;
--c--globals--colors--info-750: #263B61;
--c--globals--colors--info-800: #22304B;
--c--globals--colors--info-850: #1C2637;
--c--globals--colors--info-900: #161C26;
--c--globals--colors--info-950: #0E1117;
--c--globals--colors--success-050: #E7F6D8;
--c--globals--colors--success-100: #CEECB1;
--c--globals--colors--success-150: #B4E289;
--c--globals--colors--success-200: #99D85D;
--c--globals--colors--success-250: #88CB49;
--c--globals--colors--success-300: #7EBC43;
--c--globals--colors--success-350: #74AD3E;
--c--globals--colors--success-400: #6A9F39;
--c--globals--colors--success-450: #619134;
--c--globals--colors--success-500: #58832F;
--c--globals--colors--success-550: #4E752A;
--c--globals--colors--success-600: #456825;
--c--globals--colors--success-650: #405A29;
--c--globals--colors--success-700: #394C29;
--c--globals--colors--success-750: #333F28;
--c--globals--colors--success-800: #2B3323;
--c--globals--colors--success-850: #22281E;
--c--globals--colors--success-900: #191D16;
--c--globals--colors--success-950: #10110E;
--c--globals--colors--warning-050: #F8F0DE;
--c--globals--colors--warning-100: #F0E2BC;
--c--globals--colors--warning-150: #E9D39A;
--c--globals--colors--warning-200: #E1C478;
--c--globals--colors--warning-250: #D9B456;
--c--globals--colors--warning-300: #D0A539;
--c--globals--colors--warning-350: #C09934;
--c--globals--colors--warning-400: #B08C2F;
--c--globals--colors--warning-450: #A07F2B;
--c--globals--colors--warning-500: #917327;
--c--globals--colors--warning-550: #816723;
--c--globals--colors--warning-600: #735B1F;
--c--globals--colors--warning-650: #615026;
--c--globals--colors--warning-700: #524527;
--c--globals--colors--warning-750: #433B26;
--c--globals--colors--warning-800: #363022;
--c--globals--colors--warning-850: #29261C;
--c--globals--colors--warning-900: #1D1B16;
--c--globals--colors--warning-950: #12110E;
--c--globals--colors--error-050: #FBEEED;
--c--globals--colors--error-100: #F6DDDB;
--c--globals--colors--error-150: #F2CCC8;
--c--globals--colors--error-200: #EDBAB6;
--c--globals--colors--error-250: #E9A9A4;
--c--globals--colors--error-300: #E49791;
--c--globals--colors--error-350: #E0857E;
--c--globals--colors--error-400: #DB726A;
--c--globals--colors--error-450: #D65E54;
--c--globals--colors--error-500: #D0483D;
--c--globals--colors--error-550: #C92E22;
--c--globals--colors--error-600: #B5261A;
--c--globals--colors--error-650: #952F24;
--c--globals--colors--error-700: #783026;
--c--globals--colors--error-750: #602C25;
--c--globals--colors--error-800: #4A2722;
--c--globals--colors--error-850: #371F1C;
--c--globals--colors--error-900: #261816;
--c--globals--colors--error-950: #170F0D;
--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--blue1-050: #EBF1FF;
--c--globals--colors--blue1-100: #D6E3FE;
--c--globals--colors--blue1-150: #C2D5FE;
--c--globals--colors--blue1-200: #ADC7FE;
--c--globals--colors--blue1-250: #99B8FD;
--c--globals--colors--blue1-300: #84AAFD;
--c--globals--colors--blue1-350: #6F9BFD;
--c--globals--colors--blue1-400: #5A8DFB;
--c--globals--colors--blue1-450: #437DFC;
--c--globals--colors--blue1-500: #3D71E4;
--c--globals--colors--blue1-550: #3665CC;
--c--globals--colors--blue1-600: #305AB5;
--c--globals--colors--blue1-650: #315093;
--c--globals--colors--blue1-700: #2E4675;
--c--globals--colors--blue1-750: #293B5E;
--c--globals--colors--blue1-800: #243048;
--c--globals--colors--blue1-850: #1E2635;
--c--globals--colors--blue1-900: #171C25;
--c--globals--colors--blue1-950: #0E1116;
--c--globals--colors--blue2-050: #E2F4F9;
--c--globals--colors--blue2-100: #C5E9F3;
--c--globals--colors--blue2-150: #A7DDED;
--c--globals--colors--blue2-200: #88D1E6;
--c--globals--colors--blue2-250: #68C5E0;
--c--globals--colors--blue2-300: #48B8D9;
--c--globals--colors--blue2-350: #3BAACA;
--c--globals--colors--blue2-400: #359CB9;
--c--globals--colors--blue2-450: #318EA9;
--c--globals--colors--blue2-500: #2C8199;
--c--globals--colors--blue2-550: #277389;
--c--globals--colors--blue2-600: #236679;
--c--globals--colors--blue2-650: #2A5866;
--c--globals--colors--blue2-700: #2A4B55;
--c--globals--colors--blue2-750: #283F47;
--c--globals--colors--blue2-800: #233337;
--c--globals--colors--blue2-850: #1D272A;
--c--globals--colors--blue2-900: #161C1E;
--c--globals--colors--blue2-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--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);
}

2
apps/demo/src/cunningham-tokens.ts
View File

File diff suppressed because one or more lines are too long

6
packages/react/.storybook/preview-head.html
View File

@@ -14,12 +14,10 @@
}
.cunningham-theme--dark {
.docblock-source {
background-color: var(--c--globals--colors--gray-100);
}
.prismjs {
background-color: var(--c--globals--colors--gray-100) !important;
background-color: var(--c--globals--colors--gray-800) !important;
}
}
</style>

72
packages/react/.storybook/themes.ts
View File

@@ -1,6 +1,8 @@
import { create } from '@storybook/theming';
import { tokens } from '../src/cunningham-tokens';
const buildLightTheme = () => {
const buildTheme = (colors: typeof tokens.themes.default.contextuals & any, type: 'default' | 'dark' = 'default') => {
return {
brandUrl: 'https://github.com/openfun/cunningham',
brandImage: 'logo-cunningham.svg',
@@ -8,74 +10,46 @@ const buildLightTheme = () => {
brandTarget: '_self',
//
colorPrimary: '#20467F', // content.brand.primary
colorSecondary: '#0659C5', // content.brand.secondary
colorPrimary: colors.content.semantic.brand.primary, // content.brand.primary
colorSecondary: type === 'dark' ? colors.content.semantic.contextual.primary : colors.content.semantic.brand.secondary, // content.brand.secondary
// UI
// appBg: '#F7F8F8', // background.surface.tertiary
appContentBg: '#FFFFFF', // background.surface.primary
appBorderColor: '#E1E2E5', // border.surface.primary
appBg: colors.background.surface.secondary, // background.surface.tertiary
appContentBg: colors.background.surface.tertiary, // background.surface.primary
appBorderColor: colors.border.surface.primary, // border.surface.primary
appBorderRadius: 4,
// Text colors
textColor: '#252627', // content.neutral.primary
textInverseColor: '#5C5F63', // content.neutral.secondary
textColor: colors.content.semantic.neutral.primary, // content.neutral.primary
textInverseColor: colors.content.semantic.neutral.secondary, // content.neutral.secondary
// Toolbar default and active colors
barTextColor: '#74777C', // content.neutral.tertiary
barSelectedColor: '#252627', // content.neutral.primary
barBg: '#FFFFFF', // background.surface.primary
barTextColor: colors.content.semantic.neutral.tertiary, // content.neutral.tertiary
barSelectedColor: colors.content.semantic.neutral.primary, // content.neutral.primary
barBg: colors.background.surface.primary, // background.surface.primary
// Form colors
inputBg: '#FFFFFF', // background.surface.primary
inputBorder: '#A7ACB2', // border.neutral.secondary
inputTextColor: '#252627', // content.neutral.primary
inputBg: colors.background.surface.primary, // background.surface.primary
inputBorder: colors.border.semantic.neutral.secondary, // border.neutral.secondary
inputTextColor: colors.content.semantic.neutral.primary, // content.neutral.primary
inputBorderRadius: 2,
// Code preview colors
codeBg: colors.background.surface.secondary, // background.surface.secondary
codeColor: colors.content.semantic.neutral.primary, // content.neutral.primary
};
};
}
const buildDarkTheme = () => {
return {
brandUrl: 'https://github.com/openfun/cunningham',
brandImage: 'logo-cunningham.svg',
brandTitle: 'Cunningham',
brandTarget: '_self',
//
colorPrimary: '#EAF1FB', // content.brand.primary
colorSecondary: '#D5E4F7', // content.brand.secondary
// UI
appBg: '#222631', // background.surface.tertiary
appContentBg: '#181B24', // background.surface.primary
appBorderColor: '#3A3B3E', // border.surface.primary
appBorderRadius: 4,
// Text colors
// textColor: '#F0F1F2', // content.neutral.primary
// textInverseColor: '#E1E2E5', // content.neutral.secondary
// Toolbar default and active colors
// barTextColor: '#B5B9BE', // content.neutral.tertiary
// barSelectedColor: '#F0F1F2', // content.neutral.primary
barBg: '#222631', // background.surface.primary
// Form colors
// inputBg: '#2F3033', // background.surface.primary
// inputBorder: '#5C5F63', // border.neutral.secondary
// inputTextColor: '#F0F1F2', // content.neutral.primary
// inputBorderRadius: 2,
};
};
export const themes = {
default: create({
base: 'light',
// ...buildLightTheme(),
...buildTheme(tokens.themes.default.contextuals),
}),
dark: create({
base: 'dark',
...buildDarkTheme(),
...buildTheme(tokens.themes.dark.contextuals, 'dark'),
}),
};

2
packages/react/src/components/Button/_index.scss
View File

@@ -1,5 +1,5 @@
@mixin button-variant($context) {
white-space: nowrap;
&:hover,
&:focus-visible {
border-radius: var(--c--components--button--border-radius--focus);

9
packages/react/src/components/Forms/Switch/index.stories.tsx
View File

@@ -193,15 +193,6 @@ export const FormExampleRight = {
state="error"
disabled={true}
/>
<Switch
label="VPN"
defaultChecked={true}
fullWidth={true}
labelSide="right"
text="You must paDDy for this feature"
state="error"
disabled={true}
/>
</div>
</form>
);

2
packages/react/src/components/Pagination/index.stories.tsx
View File

@@ -47,7 +47,7 @@ export const List = () => {
<div>
<div>
{items.map((item) => (
<div className="p-t bg-semantic--neutral--tertiary mb-t" key={item}>
<div className="p-t bg-semantic-neutral-tertiary mb-t" key={item}>
{item}
</div>
))}

5
packages/react/src/components/Tooltip/tokens.ts
View File

@@ -3,9 +3,10 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";
export const tokens = (defaults: DefaultTokens) => {
return {
"border-radius": "0.5rem",
"background-color": defaults.contextuals.background.semantic.neutral.secondary,
"background-color":
defaults.contextuals.background.semantic.neutral.tertiary,
"border-color": defaults.contextuals.border.semantic.neutral.tertiary,
color: defaults.contextuals.content.semantic.neutral.secondary,
color: defaults.contextuals.content.semantic.neutral.tertiary,
"font-size": defaults.globals.font.sizes.s,
padding: "1rem",
"max-width": "150px",

4
packages/react/src/cunningham-tokens.css
View File

@@ -584,9 +584,9 @@
--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--components--tooltip--border-radius: 0.5rem;
--c--components--tooltip--background-color: var(--c--contextuals--background--semantic--neutral--secondary);
--c--components--tooltip--background-color: var(--c--contextuals--background--semantic--neutral--tertiary);
--c--components--tooltip--border-color: var(--c--contextuals--border--semantic--neutral--tertiary);
--c--components--tooltip--color: var(--c--contextuals--content--semantic--neutral--secondary);
--c--components--tooltip--color: var(--c--contextuals--content--semantic--neutral--tertiary);
--c--components--tooltip--font-size: var(--c--globals--font--sizes--s);
--c--components--tooltip--padding: 1rem;
--c--components--tooltip--max-width: 150px;

2
packages/react/src/cunningham-tokens.js
View File

File diff suppressed because one or more lines are too long

4
packages/react/src/cunningham-tokens.scss
View File

@@ -745,9 +745,9 @@ $themes: (
'components': (
'tooltip': (
'border-radius': 0.5rem,
'background-color': #E1E2E5,
'background-color': #F0F1F2,
'border-color': #D2D4D8,
'color': #5C5F63,
'color': #74777C,
'font-size': 0.75rem,
'padding': 1rem,
'max-width': 150px

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

File diff suppressed because one or more lines are too long

56
packages/react/src/docs/spacings.stories.tsx
View File

@@ -11,35 +11,43 @@ type Story = StoryObj<{}>;
export const Default: Story = {
render: () => {
// Trier les espacements par valeur croissante avant de les afficher
// Sort spacings by value before rendering
const sortedSpacings = Object.entries(
tokens.themes.default.globals.spacings,
).sort((a, b) => {
// On retire les éventuelles unités pour comparer numériquement
const parse = (v: any) =>
parseFloat(typeof v === "string" ? v : String(v));
return parse(a[1]) - parse(b[1]);
});
return (
<div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
{Object.entries(tokens.themes.default.globals.spacings).map(
([key, value]) => {
return (
{sortedSpacings.map(([key, value]) => {
return (
<div
key={key}
style={{ display: "flex", alignItems: "center", gap: "10px" }}
>
<div
key={key}
style={{ display: "flex", alignItems: "center", gap: "10px" }}
className="fw-bold clr-content-neutral-primary"
style={{ width: "50px" }}
>
<div
className="fw-bold clr-secondary-text"
style={{ width: "30px" }}
>
-{key}
</div>
<div
className="fw-medium fs-m clr-secondary-text"
style={{ width: "100px" }}
>
{value}
</div>
<div
className={"bg-error-tertiary pl-" + key}
style={{ height: "48px", width: 0 }}
/>
-{key}
</div>
);
}
)}
<div
className="fw-medium fs-m clr-content-neutral-primary"
style={{ width: "100px" }}
>
{value}
</div>
<div
className={"bg-semantic-error-tertiary pl-" + key}
style={{ height: "48px", width: 0 }}
/>
</div>
);
})}
</div>
);
},

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

@@ -259,11 +259,11 @@ function generatePaddingClasses(tokens: Tokens) {
);
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("--")}); }`,
`.p-${key.path.join("-")} { padding: var(--${Config.sass.varPrefix}globals--spacings--${key.path.join("--")}); }`,
`.pb-${key.path.join("-")} { padding-bottom: var(--${Config.sass.varPrefix}globals--spacings--${key.path.join("--")}); }`,
`.pt-${key.path.join("-")} { padding-top: var(--${Config.sass.varPrefix}globals--spacings--${key.path.join("--")}); }`,
`.pl-${key.path.join("-")} { padding-left: var(--${Config.sass.varPrefix}globals--spacings--${key.path.join("--")}); }`,
`.pr-${key.path.join("-")} { padding-right: var(--${Config.sass.varPrefix}globals--spacings--${key.path.join("--")}); }`,
].join("");
});
}