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

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