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

♻️(demo) update demo for new tokens

Browse Source 
We need to update the demo to make it work with new tokens.
This commit is contained in:
Nathan Vasse
2025-09-23 14:40:32 +02:00
committed by NathanVss
parent 759b1d5e53
commit 2e1f28f5ec
8 changed files with 1041 additions and 1074 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1208
apps/demo/cunningham.ts
View File

File diff suppressed because it is too large Load Diff

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

@@ -12,7 +12,7 @@ import Onboarding from "./Onboarding";
enum Theme { enum Theme {
CUNNINGHAM = "cunningham", CUNNINGHAM = "cunningham",
REDFLUX = "redflux", REDFLUX = "redflux",
BLUENEY = "blueny", BLUENEY = "blueney",
} }
enum Variant { enum Variant {
@@ -31,7 +31,7 @@ const THEMES: Record<Theme, Record<Variant, string | undefined>> = {
}, },
[Theme.BLUENEY]: { [Theme.BLUENEY]: {
light: undefined, light: undefined,
dark: "blueny", dark: "blueney",
}, },
}; };
@@ -45,12 +45,11 @@ const preferredScheme = window.matchMedia("(prefers-color-scheme: dark)")
export const App = () => { export const App = () => {
const [locale] = useState("en-US"); const [locale] = useState("en-US");
const [theme, setTheme] = useState<Theme>( const [theme, setTheme] = useState<Theme>(
(sessionStorage.getItem("c-theme") as Theme | null) ?? (sessionStorage.getItem("c-theme") as Theme | null) ?? preferredScheme.theme
preferredScheme.theme,
); );
const [variant, setVariant] = useState<Variant>( const [variant, setVariant] = useState<Variant>(
(sessionStorage.getItem("c-variant") as Variant | null) ?? (sessionStorage.getItem("c-variant") as Variant | null) ??
preferredScheme.variant, preferredScheme.variant
); );
const activeTheme = useMemo(() => THEMES[theme][variant], [theme, variant]); const activeTheme = useMemo(() => THEMES[theme][variant], [theme, variant]);
const modal = useModal(); const modal = useModal();
@@ -98,13 +97,14 @@ export const App = () => {
setTheme(e.target.value as Theme); setTheme(e.target.value as Theme);
if (THEMES[e.target.value as Theme][variant] === undefined) { if (THEMES[e.target.value as Theme][variant] === undefined) {
setVariant( setVariant(
variant === Variant.LIGHT ? Variant.DARK : Variant.LIGHT, variant === Variant.LIGHT ? Variant.DARK : Variant.LIGHT
); );
} }
}} }}
/> />
<Button <Button
color="tertiary" color="brand"
variant="tertiary"
icon={ icon={
<span className="material-icons"> <span className="material-icons">
{variant === Variant.DARK ? "light_mode" : "dark_mode"} {variant === Variant.DARK ? "light_mode" : "dark_mode"}
@@ -112,7 +112,7 @@ export const App = () => {
} }
onClick={() => { onClick={() => {
setVariant( setVariant(
variant === Variant.LIGHT ? Variant.DARK : Variant.LIGHT, variant === Variant.LIGHT ? Variant.DARK : Variant.LIGHT
); );
}} }}
disabled={ disabled={

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

@@ -12,51 +12,8 @@ import {
import { PageProps } from "./App"; import { PageProps } from "./App";
import { database } from "./Character"; 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 }) => { export const Home = ({ modal }: { modal: PageProps }) => {
const { toast } = useToastProvider(); 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 modals = useModals();
const [rowSelection, setRowSelection] = useState({}); const [rowSelection, setRowSelection] = useState({});
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
@@ -116,7 +73,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
</p> </p>
<Button <Button
color="primary" color="brand"
variant="primary"
icon={<span className="material-icons">movie</span>} icon={<span className="material-icons">movie</span>}
onClick={modal.open} onClick={modal.open}
> >
@@ -171,8 +129,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
id: "actions", id: "actions",
renderCell: (params) => ( renderCell: (params) => (
<Button <Button
color="tertiary" color="neutral"
variant="neutral" variant="tertiary"
size="small" size="small"
onClick={async () => { onClick={async () => {
const decision = await modals.deleteConfirmationModal(); const decision = await modals.deleteConfirmationModal();
@@ -210,8 +168,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
<li> <li>
<Button <Button
size="small" size="small"
color="tertiary" variant="tertiary"
variant="neutral" color="neutral"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
href="https://www.france-universite-numerique.fr/en/" href="https://www.france-universite-numerique.fr/en/"
@@ -224,8 +182,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
<li> <li>
<Button <Button
size="small" size="small"
color="tertiary" variant="tertiary"
variant="neutral" color="neutral"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
href="https://discord.gg/TXPSCMeDzd" href="https://discord.gg/TXPSCMeDzd"
@@ -236,8 +194,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
<li> <li>
<Button <Button
size="small" size="small"
color="tertiary" variant="tertiary"
variant="neutral" color="neutral"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
href="https://github.com/openfun/cunningham" href="https://github.com/openfun/cunningham"
@@ -248,8 +206,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
<li> <li>
<Button <Button
size="small" size="small"
color="tertiary" variant="tertiary"
variant="neutral" color="neutral"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
href="https://openfun.github.io/cunningham/storybook" href="https://openfun.github.io/cunningham/storybook"
@@ -260,8 +218,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
<li> <li>
<Button <Button
size="small" size="small"
color="tertiary" variant="tertiary"
variant="neutral" color="neutral"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
href="https://www.figma.com/file/JbPT1R6YUFW4oH8jHvH960/DS-Cunningham---PUBLIC?type=design" href="https://www.figma.com/file/JbPT1R6YUFW4oH8jHvH960/DS-Cunningham---PUBLIC?type=design"

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

@@ -20,7 +20,8 @@ const Onboarding = () => {
rightActions={ rightActions={
<div className="onboarding__footer"> <div className="onboarding__footer">
<Button <Button
color="primary" color="brand"
variant="primary"
iconPosition="right" iconPosition="right"
fullWidth={true} fullWidth={true}
onClick={handleClose} onClick={handleClose}
@@ -29,7 +30,8 @@ const Onboarding = () => {
</Button> </Button>
<Button <Button
href="https://openfun.github.io/cunningham/storybook" href="https://openfun.github.io/cunningham/storybook"
color="tertiary" color="brand"
variant="tertiary"
size="small" size="small"
icon={<span className="material-icons">open_in_new</span>} icon={<span className="material-icons">open_in_new</span>}
fullWidth={true} fullWidth={true}

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

@@ -2115,7 +2115,7 @@ $themes: (
) )
) )
), ),
'blueny': ( 'blueney': (
'globals': ( 'globals': (
'colors': ( 'colors': (
'brand-050': #EBF1FA, 'brand-050': #EBF1FA,

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

@@ -1460,200 +1460,200 @@
--c--globals--colors--pink-850: #332028; --c--globals--colors--pink-850: #332028;
--c--globals--colors--pink-900: #24181D; --c--globals--colors--pink-900: #24181D;
--c--globals--colors--pink-950: #160F12; --c--globals--colors--pink-950: #160F12;
--c--contextuals--background--surface--primary: var(--c--globals--colors--gray-800); --c--contextuals--background--surface--primary: #2F3033;
--c--contextuals--background--surface--secondary: var(--c--globals--colors--gray-850); --c--contextuals--background--surface--secondary: #252627;
--c--contextuals--background--surface--tertiary: var(--c--globals--colors--gray-900); --c--contextuals--background--surface--tertiary: #1B1C1D;
--c--contextuals--background--semantic--brand--primary: var(--c--globals--colors--brand-550); --c--contextuals--background--semantic--brand--primary: #1167D4;
--c--contextuals--background--semantic--brand--primary-hover: var(--c--globals--colors--brand-650); --c--contextuals--background--semantic--brand--primary-hover: #1A509F;
--c--contextuals--background--semantic--brand--secondary: var(--c--globals--colors--brand-700); --c--contextuals--background--semantic--brand--secondary: #20467F;
--c--contextuals--background--semantic--brand--secondary-hover: var(--c--globals--colors--brand-750); --c--contextuals--background--semantic--brand--secondary-hover: #203C63;
--c--contextuals--background--semantic--brand--tertiary: var(--c--globals--colors--brand-750); --c--contextuals--background--semantic--brand--tertiary: #203C63;
--c--contextuals--background--semantic--brand--tertiary-hover: var(--c--globals--colors--brand-800); --c--contextuals--background--semantic--brand--tertiary-hover: #1D314C;
--c--contextuals--background--semantic--neutral--primary: var(--c--globals--colors--gray-550); --c--contextuals--background--semantic--neutral--primary: #686B6F;
--c--contextuals--background--semantic--neutral--primary-hover: var(--c--globals--colors--gray-650); --c--contextuals--background--semantic--neutral--primary-hover: #505356;
--c--contextuals--background--semantic--neutral--secondary: var(--c--globals--colors--gray-700); --c--contextuals--background--semantic--neutral--secondary: #45474A;
--c--contextuals--background--semantic--neutral--secondary-hover: var(--c--globals--colors--gray-750); --c--contextuals--background--semantic--neutral--secondary-hover: #3A3B3E;
--c--contextuals--background--semantic--neutral--tertiary: var(--c--globals--colors--gray-750); --c--contextuals--background--semantic--neutral--tertiary: #3A3B3E;
--c--contextuals--background--semantic--neutral--tertiary-hover: var(--c--globals--colors--gray-800); --c--contextuals--background--semantic--neutral--tertiary-hover: #2F3033;
--c--contextuals--background--semantic--contextual--primary: var(--c--globals--colors--white-050); --c--contextuals--background--semantic--contextual--primary: #FFFFFF0D;
--c--contextuals--background--semantic--contextual--primary-hover: var(--c--globals--colors--white-100); --c--contextuals--background--semantic--contextual--primary-hover: #FFFFFF1A;
--c--contextuals--background--semantic--info--primary: var(--c--globals--colors--info-550); --c--contextuals--background--semantic--info--primary: #1167D4;
--c--contextuals--background--semantic--info--primary-hover: var(--c--globals--colors--info-650); --c--contextuals--background--semantic--info--primary-hover: #1A509F;
--c--contextuals--background--semantic--info--secondary: var(--c--globals--colors--info-700); --c--contextuals--background--semantic--info--secondary: #20467F;
--c--contextuals--background--semantic--info--secondary-hover: var(--c--globals--colors--info-750); --c--contextuals--background--semantic--info--secondary-hover: #203C63;
--c--contextuals--background--semantic--info--tertiary: var(--c--globals--colors--info-750); --c--contextuals--background--semantic--info--tertiary: #203C63;
--c--contextuals--background--semantic--info--tertiary-hover: var(--c--globals--colors--info-800); --c--contextuals--background--semantic--info--tertiary-hover: #1D314C;
--c--contextuals--background--semantic--success--primary: var(--c--globals--colors--success-550); --c--contextuals--background--semantic--success--primary: #427816;
--c--contextuals--background--semantic--success--primary-hover: var(--c--globals--colors--success-650); --c--contextuals--background--semantic--success--primary-hover: #385C1F;
--c--contextuals--background--semantic--success--secondary: var(--c--globals--colors--success-700); --c--contextuals--background--semantic--success--secondary: #344D24;
--c--contextuals--background--semantic--success--secondary-hover: var(--c--globals--colors--success-750); --c--contextuals--background--semantic--success--secondary-hover: #2E4022;
--c--contextuals--background--semantic--success--tertiary: var(--c--globals--colors--success-750); --c--contextuals--background--semantic--success--tertiary: #2E4022;
--c--contextuals--background--semantic--success--tertiary-hover: var(--c--globals--colors--success-800); --c--contextuals--background--semantic--success--tertiary-hover: #27341F;
--c--contextuals--background--semantic--warning--primary: var(--c--globals--colors--warning-550); --c--contextuals--background--semantic--warning--primary: #836703;
--c--contextuals--background--semantic--warning--primary-hover: var(--c--globals--colors--warning-650); --c--contextuals--background--semantic--warning--primary-hover: #625019;
--c--contextuals--background--semantic--warning--secondary: var(--c--globals--colors--warning-700); --c--contextuals--background--semantic--warning--secondary: #524620;
--c--contextuals--background--semantic--warning--secondary-hover: var(--c--globals--colors--warning-750); --c--contextuals--background--semantic--warning--secondary-hover: #443B20;
--c--contextuals--background--semantic--warning--tertiary: var(--c--globals--colors--warning-750); --c--contextuals--background--semantic--warning--tertiary: #443B20;
--c--contextuals--background--semantic--warning--tertiary-hover: var(--c--globals--colors--warning-800); --c--contextuals--background--semantic--warning--tertiary-hover: #36301D;
--c--contextuals--background--semantic--error--primary: var(--c--globals--colors--error-550); --c--contextuals--background--semantic--error--primary: #D80000;
--c--contextuals--background--semantic--error--primary-hover: var(--c--globals--colors--error-650); --c--contextuals--background--semantic--error--primary-hover: #9E2219;
--c--contextuals--background--semantic--error--secondary: var(--c--globals--colors--error-700); --c--contextuals--background--semantic--error--secondary: #802820;
--c--contextuals--background--semantic--error--secondary-hover: var(--c--globals--colors--error-750); --c--contextuals--background--semantic--error--secondary-hover: #662820;
--c--contextuals--background--semantic--error--tertiary: var(--c--globals--colors--error-750); --c--contextuals--background--semantic--error--tertiary: #662820;
--c--contextuals--background--semantic--error--tertiary-hover: var(--c--globals--colors--error-800); --c--contextuals--background--semantic--error--tertiary-hover: #4F231E;
--c--contextuals--background--semantic--disabled--primary: var(--c--globals--colors--gray-750); --c--contextuals--background--semantic--disabled--primary: #3A3B3E;
--c--contextuals--background--semantic--disabled--secondary: var(--c--globals--colors--gray-800); --c--contextuals--background--semantic--disabled--secondary: #2F3033;
--c--contextuals--background--palette--brand--primary: var(--c--globals--colors--brand-350); --c--contextuals--background--palette--brand--primary: #6CA0E4;
--c--contextuals--background--palette--brand--secondary: var(--c--globals--colors--brand-450); --c--contextuals--background--palette--brand--secondary: #4085DC;
--c--contextuals--background--palette--brand--tertiary: var(--c--globals--colors--brand-550); --c--contextuals--background--palette--brand--tertiary: #1167D4;
--c--contextuals--background--palette--red--primary: var(--c--globals--colors--red-350); --c--contextuals--background--palette--red--primary: #EE7C7B;
--c--contextuals--background--palette--red--secondary: var(--c--globals--colors--red-450); --c--contextuals--background--palette--red--secondary: #E74E4D;
--c--contextuals--background--palette--red--tertiary: var(--c--globals--colors--red-550); --c--contextuals--background--palette--red--tertiary: #C23837;
--c--contextuals--background--palette--orange--primary: var(--c--globals--colors--orange-350); --c--contextuals--background--palette--orange--primary: #F27E27;
--c--contextuals--background--palette--orange--secondary: var(--c--globals--colors--orange-450); --c--contextuals--background--palette--orange--secondary: #D26411;
--c--contextuals--background--palette--orange--tertiary: var(--c--globals--colors--orange-550); --c--contextuals--background--palette--orange--tertiary: #AA510E;
--c--contextuals--background--palette--brown--primary: var(--c--globals--colors--brown-350); --c--contextuals--background--palette--brown--primary: #AF9992;
--c--contextuals--background--palette--brown--secondary: var(--c--globals--colors--brown-450); --c--contextuals--background--palette--brown--secondary: #997E74;
--c--contextuals--background--palette--brown--tertiary: var(--c--globals--colors--brown-550); --c--contextuals--background--palette--brown--tertiary: #846357;
--c--contextuals--background--palette--yellow--primary: var(--c--globals--colors--yellow-350); --c--contextuals--background--palette--yellow--primary: #C39810;
--c--contextuals--background--palette--yellow--secondary: var(--c--globals--colors--yellow-450); --c--contextuals--background--palette--yellow--secondary: #A37F0D;
--c--contextuals--background--palette--yellow--tertiary: var(--c--globals--colors--yellow-550); --c--contextuals--background--palette--yellow--tertiary: #84670B;
--c--contextuals--background--palette--green--primary: var(--c--globals--colors--green-350); --c--contextuals--background--palette--green--primary: #48B257;
--c--contextuals--background--palette--green--secondary: var(--c--globals--colors--green-450); --c--contextuals--background--palette--green--secondary: #3B9548;
--c--contextuals--background--palette--green--tertiary: var(--c--globals--colors--green-550); --c--contextuals--background--palette--green--tertiary: #30793A;
--c--contextuals--background--palette--blue-1--primary: var(--c--globals--colors--blue-1-350); --c--contextuals--background--palette--blue-1--primary: #6F9BFD;
--c--contextuals--background--palette--blue-1--secondary: var(--c--globals--colors--blue-1-450); --c--contextuals--background--palette--blue-1--secondary: #437DFC;
--c--contextuals--background--palette--blue-1--tertiary: var(--c--globals--colors--blue-1-550); --c--contextuals--background--palette--blue-1--tertiary: #3665CC;
--c--contextuals--background--palette--blue-2--primary: var(--c--globals--colors--blue-2-350); --c--contextuals--background--palette--blue-2--primary: #3BAACA;
--c--contextuals--background--palette--blue-2--secondary: var(--c--globals--colors--blue-2-450); --c--contextuals--background--palette--blue-2--secondary: #318EA9;
--c--contextuals--background--palette--blue-2--tertiary: var(--c--globals--colors--blue-2-550); --c--contextuals--background--palette--blue-2--tertiary: #277389;
--c--contextuals--background--palette--purple--primary: var(--c--globals--colors--purple-350); --c--contextuals--background--palette--purple--primary: #BD83FD;
--c--contextuals--background--palette--purple--secondary: var(--c--globals--colors--purple-450); --c--contextuals--background--palette--purple--secondary: #A85BFD;
--c--contextuals--background--palette--purple--tertiary: var(--c--globals--colors--purple-550); --c--contextuals--background--palette--purple--tertiary: #8B43DA;
--c--contextuals--background--palette--pink--primary: var(--c--globals--colors--pink-350); --c--contextuals--background--palette--pink--primary: #EA77B3;
--c--contextuals--background--palette--pink--secondary: var(--c--globals--colors--pink-450); --c--contextuals--background--palette--pink--secondary: #E24797;
--c--contextuals--background--palette--pink--tertiary: var(--c--globals--colors--pink-550); --c--contextuals--background--palette--pink--tertiary: #B8397B;
--c--contextuals--background--palette--gray--primary: var(--c--globals--colors--gray-350); --c--contextuals--background--palette--gray--primary: #999EA5;
--c--contextuals--background--palette--gray--secondary: var(--c--globals--colors--gray-450); --c--contextuals--background--palette--gray--secondary: #80848A;
--c--contextuals--background--palette--gray--tertiary: var(--c--globals--colors--gray-550); --c--contextuals--background--palette--gray--tertiary: #686B6F;
--c--contextuals--content--logo1: var(--c--globals--colors--logo-1-dark); --c--contextuals--content--logo1: #95ABFF;
--c--contextuals--content--logo2: var(--c--globals--colors--logo-2-dark); --c--contextuals--content--logo2: #95ABFF;
--c--contextuals--content--semantic--brand--primary: var(--c--globals--colors--brand-050); --c--contextuals--content--semantic--brand--primary: #EAF1FB;
--c--contextuals--content--semantic--brand--secondary: var(--c--globals--colors--brand-100); --c--contextuals--content--semantic--brand--secondary: #D5E4F7;
--c--contextuals--content--semantic--brand--tertiary: var(--c--globals--colors--brand-250); --c--contextuals--content--semantic--brand--tertiary: #96BCEC;
--c--contextuals--content--semantic--brand--on-brand: var(--c--globals--colors--brand-050); --c--contextuals--content--semantic--brand--on-brand: #EAF1FB;
--c--contextuals--content--semantic--neutral--primary: var(--c--globals--colors--gray-050); --c--contextuals--content--semantic--neutral--primary: #F0F1F2;
--c--contextuals--content--semantic--neutral--secondary: var(--c--globals--colors--gray-100); --c--contextuals--content--semantic--neutral--secondary: #E1E2E5;
--c--contextuals--content--semantic--neutral--tertiary: var(--c--globals--colors--gray-250); --c--contextuals--content--semantic--neutral--tertiary: #B5B9BE;
--c--contextuals--content--semantic--neutral--on-neutral: var(--c--globals--colors--gray-050); --c--contextuals--content--semantic--neutral--on-neutral: #F0F1F2;
--c--contextuals--content--semantic--contextual--primary: var(--c--globals--colors--black-850); --c--contextuals--content--semantic--contextual--primary: #000000D9;
--c--contextuals--content--semantic--info--primary: var(--c--globals--colors--info-050); --c--contextuals--content--semantic--info--primary: #EAF1FB;
--c--contextuals--content--semantic--info--secondary: var(--c--globals--colors--info-100); --c--contextuals--content--semantic--info--secondary: #D5E4F7;
--c--contextuals--content--semantic--info--tertiary: var(--c--globals--colors--info-250); --c--contextuals--content--semantic--info--tertiary: #96BCEC;
--c--contextuals--content--semantic--info--on-info: var(--c--globals--colors--info-050); --c--contextuals--content--semantic--info--on-info: #EAF1FB;
--c--contextuals--content--semantic--success--primary: var(--c--globals--colors--success-050); --c--contextuals--content--semantic--success--primary: #E4F7D4;
--c--contextuals--content--semantic--success--secondary: var(--c--globals--colors--success-100); --c--contextuals--content--semantic--success--secondary: #C8EEA8;
--c--contextuals--content--semantic--success--tertiary: var(--c--globals--colors--success-250); --c--contextuals--content--semantic--success--tertiary: #72CF27;
--c--contextuals--content--semantic--success--on-success: var(--c--globals--colors--success-050); --c--contextuals--content--semantic--success--on-success: #E4F7D4;
--c--contextuals--content--semantic--warning--primary: var(--c--globals--colors--warning-050); --c--contextuals--content--semantic--warning--primary: #FFF1BD;
--c--contextuals--content--semantic--warning--secondary: var(--c--globals--colors--warning-100); --c--contextuals--content--semantic--warning--secondary: #FFE176;
--c--contextuals--content--semantic--warning--tertiary: var(--c--globals--colors--warning-250); --c--contextuals--content--semantic--warning--tertiary: #E3B205;
--c--contextuals--content--semantic--warning--on-warning: var(--c--globals--colors--warning-050); --c--contextuals--content--semantic--warning--on-warning: #FFF1BD;
--c--contextuals--content--semantic--error--primary: var(--c--globals--colors--error-050); --c--contextuals--content--semantic--error--primary: #FCEDED;
--c--contextuals--content--semantic--error--secondary: var(--c--globals--colors--error-100); --c--contextuals--content--semantic--error--secondary: #FADBDB;
--c--contextuals--content--semantic--error--tertiary: var(--c--globals--colors--error-250); --c--contextuals--content--semantic--error--tertiary: #F2A4A4;
--c--contextuals--content--semantic--error--on-error: var(--c--globals--colors--error-050); --c--contextuals--content--semantic--error--on-error: #FCEDED;
--c--contextuals--content--semantic--disabled--primary: var(--c--globals--colors--gray-600); --c--contextuals--content--semantic--disabled--primary: #5C5F63;
--c--contextuals--content--semantic--disabled--secondary: var(--c--globals--colors--black-300); --c--contextuals--content--semantic--disabled--secondary: #0000004D;
--c--contextuals--content--palette--brand--primary: var(--c--globals--colors--brand-350); --c--contextuals--content--palette--brand--primary: #6CA0E4;
--c--contextuals--content--palette--brand--secondary: var(--c--globals--colors--brand-450); --c--contextuals--content--palette--brand--secondary: #4085DC;
--c--contextuals--content--palette--brand--tertiary: var(--c--globals--colors--brand-550); --c--contextuals--content--palette--brand--tertiary: #1167D4;
--c--contextuals--content--palette--red--primary: var(--c--globals--colors--red-350); --c--contextuals--content--palette--red--primary: #EE7C7B;
--c--contextuals--content--palette--red--secondary: var(--c--globals--colors--red-450); --c--contextuals--content--palette--red--secondary: #E74E4D;
--c--contextuals--content--palette--red--tertiary: var(--c--globals--colors--red-550); --c--contextuals--content--palette--red--tertiary: #C23837;
--c--contextuals--content--palette--orange--primary: var(--c--globals--colors--orange-350); --c--contextuals--content--palette--orange--primary: #F27E27;
--c--contextuals--content--palette--orange--secondary: var(--c--globals--colors--orange-450); --c--contextuals--content--palette--orange--secondary: #D26411;
--c--contextuals--content--palette--orange--tertiary: var(--c--globals--colors--orange-550); --c--contextuals--content--palette--orange--tertiary: #AA510E;
--c--contextuals--content--palette--brown--primary: var(--c--globals--colors--brown-350); --c--contextuals--content--palette--brown--primary: #AF9992;
--c--contextuals--content--palette--brown--secondary: var(--c--globals--colors--brown-450); --c--contextuals--content--palette--brown--secondary: #997E74;
--c--contextuals--content--palette--brown--tertiary: var(--c--globals--colors--brown-550); --c--contextuals--content--palette--brown--tertiary: #846357;
--c--contextuals--content--palette--yellow--primary: var(--c--globals--colors--yellow-350); --c--contextuals--content--palette--yellow--primary: #C39810;
--c--contextuals--content--palette--yellow--secondary: var(--c--globals--colors--yellow-450); --c--contextuals--content--palette--yellow--secondary: #A37F0D;
--c--contextuals--content--palette--yellow--tertiary: var(--c--globals--colors--yellow-550); --c--contextuals--content--palette--yellow--tertiary: #84670B;
--c--contextuals--content--palette--green--primary: var(--c--globals--colors--green-350); --c--contextuals--content--palette--green--primary: #48B257;
--c--contextuals--content--palette--green--secondary: var(--c--globals--colors--green-450); --c--contextuals--content--palette--green--secondary: #3B9548;
--c--contextuals--content--palette--green--tertiary: var(--c--globals--colors--green-550); --c--contextuals--content--palette--green--tertiary: #30793A;
--c--contextuals--content--palette--blue-1--primary: var(--c--globals--colors--blue-1-350); --c--contextuals--content--palette--blue-1--primary: #6F9BFD;
--c--contextuals--content--palette--blue-1--secondary: var(--c--globals--colors--blue-1-450); --c--contextuals--content--palette--blue-1--secondary: #437DFC;
--c--contextuals--content--palette--blue-1--tertiary: var(--c--globals--colors--blue-1-550); --c--contextuals--content--palette--blue-1--tertiary: #3665CC;
--c--contextuals--content--palette--blue-2--primary: var(--c--globals--colors--blue-2-350); --c--contextuals--content--palette--blue-2--primary: #3BAACA;
--c--contextuals--content--palette--blue-2--secondary: var(--c--globals--colors--blue-2-450); --c--contextuals--content--palette--blue-2--secondary: #318EA9;
--c--contextuals--content--palette--blue-2--tertiary: var(--c--globals--colors--blue-2-550); --c--contextuals--content--palette--blue-2--tertiary: #277389;
--c--contextuals--content--palette--purple--primary: var(--c--globals--colors--purple-350); --c--contextuals--content--palette--purple--primary: #BD83FD;
--c--contextuals--content--palette--purple--secondary: var(--c--globals--colors--purple-450); --c--contextuals--content--palette--purple--secondary: #A85BFD;
--c--contextuals--content--palette--purple--tertiary: var(--c--globals--colors--purple-550); --c--contextuals--content--palette--purple--tertiary: #8B43DA;
--c--contextuals--content--palette--pink--primary: var(--c--globals--colors--pink-350); --c--contextuals--content--palette--pink--primary: #EA77B3;
--c--contextuals--content--palette--pink--secondary: var(--c--globals--colors--pink-450); --c--contextuals--content--palette--pink--secondary: #E24797;
--c--contextuals--content--palette--pink--tertiary: var(--c--globals--colors--pink-550); --c--contextuals--content--palette--pink--tertiary: #B8397B;
--c--contextuals--content--palette--gray--primary: var(--c--globals--colors--gray-350); --c--contextuals--content--palette--gray--primary: #999EA5;
--c--contextuals--content--palette--gray--secondary: var(--c--globals--colors--gray-450); --c--contextuals--content--palette--gray--secondary: #80848A;
--c--contextuals--content--palette--gray--tertiary: var(--c--globals--colors--gray-550); --c--contextuals--content--palette--gray--tertiary: #686B6F;
--c--contextuals--border--surface--primary: var(--c--globals--colors--gray-750); --c--contextuals--border--surface--primary: #3A3B3E;
--c--contextuals--border--semantic--brand--primary: var(--c--globals--colors--brand-450); --c--contextuals--border--semantic--brand--primary: #4085DC;
--c--contextuals--border--semantic--brand--secondary: var(--c--globals--colors--brand-600); --c--contextuals--border--semantic--brand--secondary: #0659C5;
--c--contextuals--border--semantic--brand--tertiary: var(--c--globals--colors--brand-700); --c--contextuals--border--semantic--brand--tertiary: #20467F;
--c--contextuals--border--semantic--contextual--primary: var(--c--globals--colors--black-200); --c--contextuals--border--semantic--contextual--primary: #00000033;
--c--contextuals--border--semantic--neutral--primary: var(--c--globals--colors--gray-450); --c--contextuals--border--semantic--neutral--primary: #80848A;
--c--contextuals--border--semantic--neutral--secondary: var(--c--globals--colors--gray-600); --c--contextuals--border--semantic--neutral--secondary: #5C5F63;
--c--contextuals--border--semantic--neutral--tertiary: var(--c--globals--colors--gray-700); --c--contextuals--border--semantic--neutral--tertiary: #45474A;
--c--contextuals--border--semantic--info--primary: var(--c--globals--colors--info-450); --c--contextuals--border--semantic--info--primary: #4085DC;
--c--contextuals--border--semantic--info--secondary: var(--c--globals--colors--info-600); --c--contextuals--border--semantic--info--secondary: #0659C5;
--c--contextuals--border--semantic--info--tertiary: var(--c--globals--colors--info-700); --c--contextuals--border--semantic--info--tertiary: #20467F;
--c--contextuals--border--semantic--success--primary: var(--c--globals--colors--success-450); --c--contextuals--border--semantic--success--primary: #51941C;
--c--contextuals--border--semantic--success--secondary: var(--c--globals--colors--success-600); --c--contextuals--border--semantic--success--secondary: #3A6A14;
--c--contextuals--border--semantic--success--tertiary: var(--c--globals--colors--success-700); --c--contextuals--border--semantic--success--tertiary: #344D24;
--c--contextuals--border--semantic--warning--primary: var(--c--globals--colors--warning-450); --c--contextuals--border--semantic--warning--primary: #A27F03;
--c--contextuals--border--semantic--warning--secondary: var(--c--globals--colors--warning-600); --c--contextuals--border--semantic--warning--secondary: #745B03;
--c--contextuals--border--semantic--warning--tertiary: var(--c--globals--colors--warning-700); --c--contextuals--border--semantic--warning--tertiary: #524620;
--c--contextuals--border--semantic--error--primary: var(--c--globals--colors--error-450); --c--contextuals--border--semantic--error--primary: #E55050;
--c--contextuals--border--semantic--error--secondary: var(--c--globals--colors--error-600); --c--contextuals--border--semantic--error--secondary: #C00101;
--c--contextuals--border--semantic--error--tertiary: var(--c--globals--colors--error-700); --c--contextuals--border--semantic--error--tertiary: #802820;
--c--contextuals--border--semantic--disabled--primary: var(--c--globals--colors--gray-800); --c--contextuals--border--semantic--disabled--primary: #2F3033;
--c--contextuals--border--palette--brand--primary: var(--c--globals--colors--brand-350); --c--contextuals--border--palette--brand--primary: #6CA0E4;
--c--contextuals--border--palette--brand--secondary: var(--c--globals--colors--brand-450); --c--contextuals--border--palette--brand--secondary: #4085DC;
--c--contextuals--border--palette--brand--tertiary: var(--c--globals--colors--brand-550); --c--contextuals--border--palette--brand--tertiary: #1167D4;
--c--contextuals--border--palette--red--primary: var(--c--globals--colors--red-350); --c--contextuals--border--palette--red--primary: #EE7C7B;
--c--contextuals--border--palette--red--secondary: var(--c--globals--colors--red-450); --c--contextuals--border--palette--red--secondary: #E74E4D;
--c--contextuals--border--palette--red--tertiary: var(--c--globals--colors--red-550); --c--contextuals--border--palette--red--tertiary: #C23837;
--c--contextuals--border--palette--orange--primary: var(--c--globals--colors--orange-350); --c--contextuals--border--palette--orange--primary: #F27E27;
--c--contextuals--border--palette--orange--secondary: var(--c--globals--colors--orange-450); --c--contextuals--border--palette--orange--secondary: #D26411;
--c--contextuals--border--palette--orange--tertiary: var(--c--globals--colors--orange-550); --c--contextuals--border--palette--orange--tertiary: #AA510E;
--c--contextuals--border--palette--brown--primary: var(--c--globals--colors--brown-350); --c--contextuals--border--palette--brown--primary: #AF9992;
--c--contextuals--border--palette--brown--secondary: var(--c--globals--colors--brown-450); --c--contextuals--border--palette--brown--secondary: #997E74;
--c--contextuals--border--palette--brown--tertiary: var(--c--globals--colors--brown-550); --c--contextuals--border--palette--brown--tertiary: #846357;
--c--contextuals--border--palette--yellow--primary: var(--c--globals--colors--yellow-350); --c--contextuals--border--palette--yellow--primary: #C39810;
--c--contextuals--border--palette--yellow--secondary: var(--c--globals--colors--yellow-450); --c--contextuals--border--palette--yellow--secondary: #A37F0D;
--c--contextuals--border--palette--yellow--tertiary: var(--c--globals--colors--yellow-550); --c--contextuals--border--palette--yellow--tertiary: #84670B;
--c--contextuals--border--palette--green--primary: var(--c--globals--colors--green-350); --c--contextuals--border--palette--green--primary: #48B257;
--c--contextuals--border--palette--green--secondary: var(--c--globals--colors--green-450); --c--contextuals--border--palette--green--secondary: #3B9548;
--c--contextuals--border--palette--green--tertiary: var(--c--globals--colors--green-550); --c--contextuals--border--palette--green--tertiary: #30793A;
--c--contextuals--border--palette--blue-1--primary: var(--c--globals--colors--blue-1-350); --c--contextuals--border--palette--blue-1--primary: #6F9BFD;
--c--contextuals--border--palette--blue-1--secondary: var(--c--globals--colors--blue-1-450); --c--contextuals--border--palette--blue-1--secondary: #437DFC;
--c--contextuals--border--palette--blue-1--tertiary: var(--c--globals--colors--blue-1-550); --c--contextuals--border--palette--blue-1--tertiary: #3665CC;
--c--contextuals--border--palette--blue-2--primary: var(--c--globals--colors--blue-2-350); --c--contextuals--border--palette--blue-2--primary: #3BAACA;
--c--contextuals--border--palette--blue-2--secondary: var(--c--globals--colors--blue-2-450); --c--contextuals--border--palette--blue-2--secondary: #318EA9;
--c--contextuals--border--palette--blue-2--tertiary: var(--c--globals--colors--blue-2-550); --c--contextuals--border--palette--blue-2--tertiary: #277389;
--c--contextuals--border--palette--purple--primary: var(--c--globals--colors--purple-350); --c--contextuals--border--palette--purple--primary: #BD83FD;
--c--contextuals--border--palette--purple--secondary: var(--c--globals--colors--purple-450); --c--contextuals--border--palette--purple--secondary: #A85BFD;
--c--contextuals--border--palette--purple--tertiary: var(--c--globals--colors--purple-550); --c--contextuals--border--palette--purple--tertiary: #8B43DA;
--c--contextuals--border--palette--pink--primary: var(--c--globals--colors--pink-350); --c--contextuals--border--palette--pink--primary: #EA77B3;
--c--contextuals--border--palette--pink--secondary: var(--c--globals--colors--pink-450); --c--contextuals--border--palette--pink--secondary: #E24797;
--c--contextuals--border--palette--pink--tertiary: var(--c--globals--colors--pink-550); --c--contextuals--border--palette--pink--tertiary: #B8397B;
--c--contextuals--border--palette--gray--primary: var(--c--globals--colors--gray-350); --c--contextuals--border--palette--gray--primary: #999EA5;
--c--contextuals--border--palette--gray--secondary: var(--c--globals--colors--gray-450); --c--contextuals--border--palette--gray--secondary: #80848A;
--c--contextuals--border--palette--gray--tertiary: var(--c--globals--colors--gray-550); --c--contextuals--border--palette--gray--tertiary: #686B6F;
} }
.cunningham-theme--blueny{ .cunningham-theme--blueney{
--c--globals--colors--brand-050: #EBF1FA; --c--globals--colors--brand-050: #EBF1FA;
--c--globals--colors--brand-100: #D7E4F5; --c--globals--colors--brand-100: #D7E4F5;
--c--globals--colors--brand-150: #C3D6F0; --c--globals--colors--brand-150: #C3D6F0;
@@ -1942,196 +1942,196 @@
--c--globals--colors--pink-850: #332028; --c--globals--colors--pink-850: #332028;
--c--globals--colors--pink-900: #24181D; --c--globals--colors--pink-900: #24181D;
--c--globals--colors--pink-950: #160F12; --c--globals--colors--pink-950: #160F12;
--c--contextuals--background--surface--primary: var(--c--globals--colors--gray-800); --c--contextuals--background--surface--primary: #2F3033;
--c--contextuals--background--surface--secondary: var(--c--globals--colors--gray-850); --c--contextuals--background--surface--secondary: #252627;
--c--contextuals--background--surface--tertiary: var(--c--globals--colors--gray-900); --c--contextuals--background--surface--tertiary: #1B1C1D;
--c--contextuals--background--semantic--brand--primary: var(--c--globals--colors--brand-550); --c--contextuals--background--semantic--brand--primary: #1167D4;
--c--contextuals--background--semantic--brand--primary-hover: var(--c--globals--colors--brand-650); --c--contextuals--background--semantic--brand--primary-hover: #1A509F;
--c--contextuals--background--semantic--brand--secondary: var(--c--globals--colors--brand-700); --c--contextuals--background--semantic--brand--secondary: #20467F;
--c--contextuals--background--semantic--brand--secondary-hover: var(--c--globals--colors--brand-750); --c--contextuals--background--semantic--brand--secondary-hover: #203C63;
--c--contextuals--background--semantic--brand--tertiary: var(--c--globals--colors--brand-750); --c--contextuals--background--semantic--brand--tertiary: #203C63;
--c--contextuals--background--semantic--brand--tertiary-hover: var(--c--globals--colors--brand-800); --c--contextuals--background--semantic--brand--tertiary-hover: #1D314C;
--c--contextuals--background--semantic--neutral--primary: var(--c--globals--colors--gray-550); --c--contextuals--background--semantic--neutral--primary: #686B6F;
--c--contextuals--background--semantic--neutral--primary-hover: var(--c--globals--colors--gray-650); --c--contextuals--background--semantic--neutral--primary-hover: #505356;
--c--contextuals--background--semantic--neutral--secondary: var(--c--globals--colors--gray-700); --c--contextuals--background--semantic--neutral--secondary: #45474A;
--c--contextuals--background--semantic--neutral--secondary-hover: var(--c--globals--colors--gray-750); --c--contextuals--background--semantic--neutral--secondary-hover: #3A3B3E;
--c--contextuals--background--semantic--neutral--tertiary: var(--c--globals--colors--gray-750); --c--contextuals--background--semantic--neutral--tertiary: #3A3B3E;
--c--contextuals--background--semantic--neutral--tertiary-hover: var(--c--globals--colors--gray-800); --c--contextuals--background--semantic--neutral--tertiary-hover: #2F3033;
--c--contextuals--background--semantic--contextual--primary: var(--c--globals--colors--white-050); --c--contextuals--background--semantic--contextual--primary: #FFFFFF0D;
--c--contextuals--background--semantic--contextual--primary-hover: var(--c--globals--colors--white-100); --c--contextuals--background--semantic--contextual--primary-hover: #FFFFFF1A;
--c--contextuals--background--semantic--info--primary: var(--c--globals--colors--info-550); --c--contextuals--background--semantic--info--primary: #1167D4;
--c--contextuals--background--semantic--info--primary-hover: var(--c--globals--colors--info-650); --c--contextuals--background--semantic--info--primary-hover: #1A509F;
--c--contextuals--background--semantic--info--secondary: var(--c--globals--colors--info-700); --c--contextuals--background--semantic--info--secondary: #20467F;
--c--contextuals--background--semantic--info--secondary-hover: var(--c--globals--colors--info-750); --c--contextuals--background--semantic--info--secondary-hover: #203C63;
--c--contextuals--background--semantic--info--tertiary: var(--c--globals--colors--info-750); --c--contextuals--background--semantic--info--tertiary: #203C63;
--c--contextuals--background--semantic--info--tertiary-hover: var(--c--globals--colors--info-800); --c--contextuals--background--semantic--info--tertiary-hover: #1D314C;
--c--contextuals--background--semantic--success--primary: var(--c--globals--colors--success-550); --c--contextuals--background--semantic--success--primary: #427816;
--c--contextuals--background--semantic--success--primary-hover: var(--c--globals--colors--success-650); --c--contextuals--background--semantic--success--primary-hover: #385C1F;
--c--contextuals--background--semantic--success--secondary: var(--c--globals--colors--success-700); --c--contextuals--background--semantic--success--secondary: #344D24;
--c--contextuals--background--semantic--success--secondary-hover: var(--c--globals--colors--success-750); --c--contextuals--background--semantic--success--secondary-hover: #2E4022;
--c--contextuals--background--semantic--success--tertiary: var(--c--globals--colors--success-750); --c--contextuals--background--semantic--success--tertiary: #2E4022;
--c--contextuals--background--semantic--success--tertiary-hover: var(--c--globals--colors--success-800); --c--contextuals--background--semantic--success--tertiary-hover: #27341F;
--c--contextuals--background--semantic--warning--primary: var(--c--globals--colors--warning-550); --c--contextuals--background--semantic--warning--primary: #836703;
--c--contextuals--background--semantic--warning--primary-hover: var(--c--globals--colors--warning-650); --c--contextuals--background--semantic--warning--primary-hover: #625019;
--c--contextuals--background--semantic--warning--secondary: var(--c--globals--colors--warning-700); --c--contextuals--background--semantic--warning--secondary: #524620;
--c--contextuals--background--semantic--warning--secondary-hover: var(--c--globals--colors--warning-750); --c--contextuals--background--semantic--warning--secondary-hover: #443B20;
--c--contextuals--background--semantic--warning--tertiary: var(--c--globals--colors--warning-750); --c--contextuals--background--semantic--warning--tertiary: #443B20;
--c--contextuals--background--semantic--warning--tertiary-hover: var(--c--globals--colors--warning-800); --c--contextuals--background--semantic--warning--tertiary-hover: #36301D;
--c--contextuals--background--semantic--error--primary: var(--c--globals--colors--error-550); --c--contextuals--background--semantic--error--primary: #D80000;
--c--contextuals--background--semantic--error--primary-hover: var(--c--globals--colors--error-650); --c--contextuals--background--semantic--error--primary-hover: #9E2219;
--c--contextuals--background--semantic--error--secondary: var(--c--globals--colors--error-700); --c--contextuals--background--semantic--error--secondary: #802820;
--c--contextuals--background--semantic--error--secondary-hover: var(--c--globals--colors--error-750); --c--contextuals--background--semantic--error--secondary-hover: #662820;
--c--contextuals--background--semantic--error--tertiary: var(--c--globals--colors--error-750); --c--contextuals--background--semantic--error--tertiary: #662820;
--c--contextuals--background--semantic--error--tertiary-hover: var(--c--globals--colors--error-800); --c--contextuals--background--semantic--error--tertiary-hover: #4F231E;
--c--contextuals--background--semantic--disabled--primary: var(--c--globals--colors--gray-750); --c--contextuals--background--semantic--disabled--primary: #3A3B3E;
--c--contextuals--background--semantic--disabled--secondary: var(--c--globals--colors--gray-800); --c--contextuals--background--semantic--disabled--secondary: #2F3033;
--c--contextuals--background--palette--brand--primary: var(--c--globals--colors--brand-350); --c--contextuals--background--palette--brand--primary: #6CA0E4;
--c--contextuals--background--palette--brand--secondary: var(--c--globals--colors--brand-450); --c--contextuals--background--palette--brand--secondary: #4085DC;
--c--contextuals--background--palette--brand--tertiary: var(--c--globals--colors--brand-550); --c--contextuals--background--palette--brand--tertiary: #1167D4;
--c--contextuals--background--palette--red--primary: var(--c--globals--colors--red-350); --c--contextuals--background--palette--red--primary: #EE7C7B;
--c--contextuals--background--palette--red--secondary: var(--c--globals--colors--red-450); --c--contextuals--background--palette--red--secondary: #E74E4D;
--c--contextuals--background--palette--red--tertiary: var(--c--globals--colors--red-550); --c--contextuals--background--palette--red--tertiary: #C23837;
--c--contextuals--background--palette--orange--primary: var(--c--globals--colors--orange-350); --c--contextuals--background--palette--orange--primary: #F27E27;
--c--contextuals--background--palette--orange--secondary: var(--c--globals--colors--orange-450); --c--contextuals--background--palette--orange--secondary: #D26411;
--c--contextuals--background--palette--orange--tertiary: var(--c--globals--colors--orange-550); --c--contextuals--background--palette--orange--tertiary: #AA510E;
--c--contextuals--background--palette--brown--primary: var(--c--globals--colors--brown-350); --c--contextuals--background--palette--brown--primary: #AF9992;
--c--contextuals--background--palette--brown--secondary: var(--c--globals--colors--brown-450); --c--contextuals--background--palette--brown--secondary: #997E74;
--c--contextuals--background--palette--brown--tertiary: var(--c--globals--colors--brown-550); --c--contextuals--background--palette--brown--tertiary: #846357;
--c--contextuals--background--palette--yellow--primary: var(--c--globals--colors--yellow-350); --c--contextuals--background--palette--yellow--primary: #C39810;
--c--contextuals--background--palette--yellow--secondary: var(--c--globals--colors--yellow-450); --c--contextuals--background--palette--yellow--secondary: #A37F0D;
--c--contextuals--background--palette--yellow--tertiary: var(--c--globals--colors--yellow-550); --c--contextuals--background--palette--yellow--tertiary: #84670B;
--c--contextuals--background--palette--green--primary: var(--c--globals--colors--green-350); --c--contextuals--background--palette--green--primary: #48B257;
--c--contextuals--background--palette--green--secondary: var(--c--globals--colors--green-450); --c--contextuals--background--palette--green--secondary: #3B9548;
--c--contextuals--background--palette--green--tertiary: var(--c--globals--colors--green-550); --c--contextuals--background--palette--green--tertiary: #30793A;
--c--contextuals--background--palette--blue-1--primary: var(--c--globals--colors--blue-1-350); --c--contextuals--background--palette--blue-1--primary: #6F9BFD;
--c--contextuals--background--palette--blue-1--secondary: var(--c--globals--colors--blue-1-450); --c--contextuals--background--palette--blue-1--secondary: #437DFC;
--c--contextuals--background--palette--blue-1--tertiary: var(--c--globals--colors--blue-1-550); --c--contextuals--background--palette--blue-1--tertiary: #3665CC;
--c--contextuals--background--palette--blue-2--primary: var(--c--globals--colors--blue-2-350); --c--contextuals--background--palette--blue-2--primary: #3BAACA;
--c--contextuals--background--palette--blue-2--secondary: var(--c--globals--colors--blue-2-450); --c--contextuals--background--palette--blue-2--secondary: #318EA9;
--c--contextuals--background--palette--blue-2--tertiary: var(--c--globals--colors--blue-2-550); --c--contextuals--background--palette--blue-2--tertiary: #277389;
--c--contextuals--background--palette--purple--primary: var(--c--globals--colors--purple-350); --c--contextuals--background--palette--purple--primary: #BD83FD;
--c--contextuals--background--palette--purple--secondary: var(--c--globals--colors--purple-450); --c--contextuals--background--palette--purple--secondary: #A85BFD;
--c--contextuals--background--palette--purple--tertiary: var(--c--globals--colors--purple-550); --c--contextuals--background--palette--purple--tertiary: #8B43DA;
--c--contextuals--background--palette--pink--primary: var(--c--globals--colors--pink-350); --c--contextuals--background--palette--pink--primary: #EA77B3;
--c--contextuals--background--palette--pink--secondary: var(--c--globals--colors--pink-450); --c--contextuals--background--palette--pink--secondary: #E24797;
--c--contextuals--background--palette--pink--tertiary: var(--c--globals--colors--pink-550); --c--contextuals--background--palette--pink--tertiary: #B8397B;
--c--contextuals--background--palette--gray--primary: var(--c--globals--colors--gray-350); --c--contextuals--background--palette--gray--primary: #999EA5;
--c--contextuals--background--palette--gray--secondary: var(--c--globals--colors--gray-450); --c--contextuals--background--palette--gray--secondary: #80848A;
--c--contextuals--background--palette--gray--tertiary: var(--c--globals--colors--gray-550); --c--contextuals--background--palette--gray--tertiary: #686B6F;
--c--contextuals--content--logo1: var(--c--globals--colors--logo-1-dark); --c--contextuals--content--logo1: #95ABFF;
--c--contextuals--content--logo2: var(--c--globals--colors--logo-2-dark); --c--contextuals--content--logo2: #95ABFF;
--c--contextuals--content--semantic--brand--primary: var(--c--globals--colors--brand-050); --c--contextuals--content--semantic--brand--primary: #EAF1FB;
--c--contextuals--content--semantic--brand--secondary: var(--c--globals--colors--brand-100); --c--contextuals--content--semantic--brand--secondary: #D5E4F7;
--c--contextuals--content--semantic--brand--tertiary: var(--c--globals--colors--brand-250); --c--contextuals--content--semantic--brand--tertiary: #96BCEC;
--c--contextuals--content--semantic--brand--on-brand: var(--c--globals--colors--brand-050); --c--contextuals--content--semantic--brand--on-brand: #EAF1FB;
--c--contextuals--content--semantic--neutral--primary: var(--c--globals--colors--gray-050); --c--contextuals--content--semantic--neutral--primary: #F0F1F2;
--c--contextuals--content--semantic--neutral--secondary: var(--c--globals--colors--gray-100); --c--contextuals--content--semantic--neutral--secondary: #E1E2E5;
--c--contextuals--content--semantic--neutral--tertiary: var(--c--globals--colors--gray-250); --c--contextuals--content--semantic--neutral--tertiary: #B5B9BE;
--c--contextuals--content--semantic--neutral--on-neutral: var(--c--globals--colors--gray-050); --c--contextuals--content--semantic--neutral--on-neutral: #F0F1F2;
--c--contextuals--content--semantic--contextual--primary: var(--c--globals--colors--black-850); --c--contextuals--content--semantic--contextual--primary: #000000D9;
--c--contextuals--content--semantic--info--primary: var(--c--globals--colors--info-050); --c--contextuals--content--semantic--info--primary: #EAF1FB;
--c--contextuals--content--semantic--info--secondary: var(--c--globals--colors--info-100); --c--contextuals--content--semantic--info--secondary: #D5E4F7;
--c--contextuals--content--semantic--info--tertiary: var(--c--globals--colors--info-250); --c--contextuals--content--semantic--info--tertiary: #96BCEC;
--c--contextuals--content--semantic--info--on-info: var(--c--globals--colors--info-050); --c--contextuals--content--semantic--info--on-info: #EAF1FB;
--c--contextuals--content--semantic--success--primary: var(--c--globals--colors--success-050); --c--contextuals--content--semantic--success--primary: #E4F7D4;
--c--contextuals--content--semantic--success--secondary: var(--c--globals--colors--success-100); --c--contextuals--content--semantic--success--secondary: #C8EEA8;
--c--contextuals--content--semantic--success--tertiary: var(--c--globals--colors--success-250); --c--contextuals--content--semantic--success--tertiary: #72CF27;
--c--contextuals--content--semantic--success--on-success: var(--c--globals--colors--success-050); --c--contextuals--content--semantic--success--on-success: #E4F7D4;
--c--contextuals--content--semantic--warning--primary: var(--c--globals--colors--warning-050); --c--contextuals--content--semantic--warning--primary: #FFF1BD;
--c--contextuals--content--semantic--warning--secondary: var(--c--globals--colors--warning-100); --c--contextuals--content--semantic--warning--secondary: #FFE176;
--c--contextuals--content--semantic--warning--tertiary: var(--c--globals--colors--warning-250); --c--contextuals--content--semantic--warning--tertiary: #E3B205;
--c--contextuals--content--semantic--warning--on-warning: var(--c--globals--colors--warning-050); --c--contextuals--content--semantic--warning--on-warning: #FFF1BD;
--c--contextuals--content--semantic--error--primary: var(--c--globals--colors--error-050); --c--contextuals--content--semantic--error--primary: #FCEDED;
--c--contextuals--content--semantic--error--secondary: var(--c--globals--colors--error-100); --c--contextuals--content--semantic--error--secondary: #FADBDB;
--c--contextuals--content--semantic--error--tertiary: var(--c--globals--colors--error-250); --c--contextuals--content--semantic--error--tertiary: #F2A4A4;
--c--contextuals--content--semantic--error--on-error: var(--c--globals--colors--error-050); --c--contextuals--content--semantic--error--on-error: #FCEDED;
--c--contextuals--content--semantic--disabled--primary: var(--c--globals--colors--gray-600); --c--contextuals--content--semantic--disabled--primary: #5C5F63;
--c--contextuals--content--semantic--disabled--secondary: var(--c--globals--colors--black-300); --c--contextuals--content--semantic--disabled--secondary: #0000004D;
--c--contextuals--content--palette--brand--primary: var(--c--globals--colors--brand-350); --c--contextuals--content--palette--brand--primary: #6CA0E4;
--c--contextuals--content--palette--brand--secondary: var(--c--globals--colors--brand-450); --c--contextuals--content--palette--brand--secondary: #4085DC;
--c--contextuals--content--palette--brand--tertiary: var(--c--globals--colors--brand-550); --c--contextuals--content--palette--brand--tertiary: #1167D4;
--c--contextuals--content--palette--red--primary: var(--c--globals--colors--red-350); --c--contextuals--content--palette--red--primary: #EE7C7B;
--c--contextuals--content--palette--red--secondary: var(--c--globals--colors--red-450); --c--contextuals--content--palette--red--secondary: #E74E4D;
--c--contextuals--content--palette--red--tertiary: var(--c--globals--colors--red-550); --c--contextuals--content--palette--red--tertiary: #C23837;
--c--contextuals--content--palette--orange--primary: var(--c--globals--colors--orange-350); --c--contextuals--content--palette--orange--primary: #F27E27;
--c--contextuals--content--palette--orange--secondary: var(--c--globals--colors--orange-450); --c--contextuals--content--palette--orange--secondary: #D26411;
--c--contextuals--content--palette--orange--tertiary: var(--c--globals--colors--orange-550); --c--contextuals--content--palette--orange--tertiary: #AA510E;
--c--contextuals--content--palette--brown--primary: var(--c--globals--colors--brown-350); --c--contextuals--content--palette--brown--primary: #AF9992;
--c--contextuals--content--palette--brown--secondary: var(--c--globals--colors--brown-450); --c--contextuals--content--palette--brown--secondary: #997E74;
--c--contextuals--content--palette--brown--tertiary: var(--c--globals--colors--brown-550); --c--contextuals--content--palette--brown--tertiary: #846357;
--c--contextuals--content--palette--yellow--primary: var(--c--globals--colors--yellow-350); --c--contextuals--content--palette--yellow--primary: #C39810;
--c--contextuals--content--palette--yellow--secondary: var(--c--globals--colors--yellow-450); --c--contextuals--content--palette--yellow--secondary: #A37F0D;
--c--contextuals--content--palette--yellow--tertiary: var(--c--globals--colors--yellow-550); --c--contextuals--content--palette--yellow--tertiary: #84670B;
--c--contextuals--content--palette--green--primary: var(--c--globals--colors--green-350); --c--contextuals--content--palette--green--primary: #48B257;
--c--contextuals--content--palette--green--secondary: var(--c--globals--colors--green-450); --c--contextuals--content--palette--green--secondary: #3B9548;
--c--contextuals--content--palette--green--tertiary: var(--c--globals--colors--green-550); --c--contextuals--content--palette--green--tertiary: #30793A;
--c--contextuals--content--palette--blue-1--primary: var(--c--globals--colors--blue-1-350); --c--contextuals--content--palette--blue-1--primary: #6F9BFD;
--c--contextuals--content--palette--blue-1--secondary: var(--c--globals--colors--blue-1-450); --c--contextuals--content--palette--blue-1--secondary: #437DFC;
--c--contextuals--content--palette--blue-1--tertiary: var(--c--globals--colors--blue-1-550); --c--contextuals--content--palette--blue-1--tertiary: #3665CC;
--c--contextuals--content--palette--blue-2--primary: var(--c--globals--colors--blue-2-350); --c--contextuals--content--palette--blue-2--primary: #3BAACA;
--c--contextuals--content--palette--blue-2--secondary: var(--c--globals--colors--blue-2-450); --c--contextuals--content--palette--blue-2--secondary: #318EA9;
--c--contextuals--content--palette--blue-2--tertiary: var(--c--globals--colors--blue-2-550); --c--contextuals--content--palette--blue-2--tertiary: #277389;
--c--contextuals--content--palette--purple--primary: var(--c--globals--colors--purple-350); --c--contextuals--content--palette--purple--primary: #BD83FD;
--c--contextuals--content--palette--purple--secondary: var(--c--globals--colors--purple-450); --c--contextuals--content--palette--purple--secondary: #A85BFD;
--c--contextuals--content--palette--purple--tertiary: var(--c--globals--colors--purple-550); --c--contextuals--content--palette--purple--tertiary: #8B43DA;
--c--contextuals--content--palette--pink--primary: var(--c--globals--colors--pink-350); --c--contextuals--content--palette--pink--primary: #EA77B3;
--c--contextuals--content--palette--pink--secondary: var(--c--globals--colors--pink-450); --c--contextuals--content--palette--pink--secondary: #E24797;
--c--contextuals--content--palette--pink--tertiary: var(--c--globals--colors--pink-550); --c--contextuals--content--palette--pink--tertiary: #B8397B;
--c--contextuals--content--palette--gray--primary: var(--c--globals--colors--gray-350); --c--contextuals--content--palette--gray--primary: #999EA5;
--c--contextuals--content--palette--gray--secondary: var(--c--globals--colors--gray-450); --c--contextuals--content--palette--gray--secondary: #80848A;
--c--contextuals--content--palette--gray--tertiary: var(--c--globals--colors--gray-550); --c--contextuals--content--palette--gray--tertiary: #686B6F;
--c--contextuals--border--surface--primary: var(--c--globals--colors--gray-750); --c--contextuals--border--surface--primary: #3A3B3E;
--c--contextuals--border--semantic--brand--primary: var(--c--globals--colors--brand-450); --c--contextuals--border--semantic--brand--primary: #4085DC;
--c--contextuals--border--semantic--brand--secondary: var(--c--globals--colors--brand-600); --c--contextuals--border--semantic--brand--secondary: #0659C5;
--c--contextuals--border--semantic--brand--tertiary: var(--c--globals--colors--brand-700); --c--contextuals--border--semantic--brand--tertiary: #20467F;
--c--contextuals--border--semantic--contextual--primary: var(--c--globals--colors--black-200); --c--contextuals--border--semantic--contextual--primary: #00000033;
--c--contextuals--border--semantic--neutral--primary: var(--c--globals--colors--gray-450); --c--contextuals--border--semantic--neutral--primary: #80848A;
--c--contextuals--border--semantic--neutral--secondary: var(--c--globals--colors--gray-600); --c--contextuals--border--semantic--neutral--secondary: #5C5F63;
--c--contextuals--border--semantic--neutral--tertiary: var(--c--globals--colors--gray-700); --c--contextuals--border--semantic--neutral--tertiary: #45474A;
--c--contextuals--border--semantic--info--primary: var(--c--globals--colors--info-450); --c--contextuals--border--semantic--info--primary: #4085DC;
--c--contextuals--border--semantic--info--secondary: var(--c--globals--colors--info-600); --c--contextuals--border--semantic--info--secondary: #0659C5;
--c--contextuals--border--semantic--info--tertiary: var(--c--globals--colors--info-700); --c--contextuals--border--semantic--info--tertiary: #20467F;
--c--contextuals--border--semantic--success--primary: var(--c--globals--colors--success-450); --c--contextuals--border--semantic--success--primary: #51941C;
--c--contextuals--border--semantic--success--secondary: var(--c--globals--colors--success-600); --c--contextuals--border--semantic--success--secondary: #3A6A14;
--c--contextuals--border--semantic--success--tertiary: var(--c--globals--colors--success-700); --c--contextuals--border--semantic--success--tertiary: #344D24;
--c--contextuals--border--semantic--warning--primary: var(--c--globals--colors--warning-450); --c--contextuals--border--semantic--warning--primary: #A27F03;
--c--contextuals--border--semantic--warning--secondary: var(--c--globals--colors--warning-600); --c--contextuals--border--semantic--warning--secondary: #745B03;
--c--contextuals--border--semantic--warning--tertiary: var(--c--globals--colors--warning-700); --c--contextuals--border--semantic--warning--tertiary: #524620;
--c--contextuals--border--semantic--error--primary: var(--c--globals--colors--error-450); --c--contextuals--border--semantic--error--primary: #E55050;
--c--contextuals--border--semantic--error--secondary: var(--c--globals--colors--error-600); --c--contextuals--border--semantic--error--secondary: #C00101;
--c--contextuals--border--semantic--error--tertiary: var(--c--globals--colors--error-700); --c--contextuals--border--semantic--error--tertiary: #802820;
--c--contextuals--border--semantic--disabled--primary: var(--c--globals--colors--gray-800); --c--contextuals--border--semantic--disabled--primary: #2F3033;
--c--contextuals--border--palette--brand--primary: var(--c--globals--colors--brand-350); --c--contextuals--border--palette--brand--primary: #6CA0E4;
--c--contextuals--border--palette--brand--secondary: var(--c--globals--colors--brand-450); --c--contextuals--border--palette--brand--secondary: #4085DC;
--c--contextuals--border--palette--brand--tertiary: var(--c--globals--colors--brand-550); --c--contextuals--border--palette--brand--tertiary: #1167D4;
--c--contextuals--border--palette--red--primary: var(--c--globals--colors--red-350); --c--contextuals--border--palette--red--primary: #EE7C7B;
--c--contextuals--border--palette--red--secondary: var(--c--globals--colors--red-450); --c--contextuals--border--palette--red--secondary: #E74E4D;
--c--contextuals--border--palette--red--tertiary: var(--c--globals--colors--red-550); --c--contextuals--border--palette--red--tertiary: #C23837;
--c--contextuals--border--palette--orange--primary: var(--c--globals--colors--orange-350); --c--contextuals--border--palette--orange--primary: #F27E27;
--c--contextuals--border--palette--orange--secondary: var(--c--globals--colors--orange-450); --c--contextuals--border--palette--orange--secondary: #D26411;
--c--contextuals--border--palette--orange--tertiary: var(--c--globals--colors--orange-550); --c--contextuals--border--palette--orange--tertiary: #AA510E;
--c--contextuals--border--palette--brown--primary: var(--c--globals--colors--brown-350); --c--contextuals--border--palette--brown--primary: #AF9992;
--c--contextuals--border--palette--brown--secondary: var(--c--globals--colors--brown-450); --c--contextuals--border--palette--brown--secondary: #997E74;
--c--contextuals--border--palette--brown--tertiary: var(--c--globals--colors--brown-550); --c--contextuals--border--palette--brown--tertiary: #846357;
--c--contextuals--border--palette--yellow--primary: var(--c--globals--colors--yellow-350); --c--contextuals--border--palette--yellow--primary: #C39810;
--c--contextuals--border--palette--yellow--secondary: var(--c--globals--colors--yellow-450); --c--contextuals--border--palette--yellow--secondary: #A37F0D;
--c--contextuals--border--palette--yellow--tertiary: var(--c--globals--colors--yellow-550); --c--contextuals--border--palette--yellow--tertiary: #84670B;
--c--contextuals--border--palette--green--primary: var(--c--globals--colors--green-350); --c--contextuals--border--palette--green--primary: #48B257;
--c--contextuals--border--palette--green--secondary: var(--c--globals--colors--green-450); --c--contextuals--border--palette--green--secondary: #3B9548;
--c--contextuals--border--palette--green--tertiary: var(--c--globals--colors--green-550); --c--contextuals--border--palette--green--tertiary: #30793A;
--c--contextuals--border--palette--blue-1--primary: var(--c--globals--colors--blue-1-350); --c--contextuals--border--palette--blue-1--primary: #6F9BFD;
--c--contextuals--border--palette--blue-1--secondary: var(--c--globals--colors--blue-1-450); --c--contextuals--border--palette--blue-1--secondary: #437DFC;
--c--contextuals--border--palette--blue-1--tertiary: var(--c--globals--colors--blue-1-550); --c--contextuals--border--palette--blue-1--tertiary: #3665CC;
--c--contextuals--border--palette--blue-2--primary: var(--c--globals--colors--blue-2-350); --c--contextuals--border--palette--blue-2--primary: #3BAACA;
--c--contextuals--border--palette--blue-2--secondary: var(--c--globals--colors--blue-2-450); --c--contextuals--border--palette--blue-2--secondary: #318EA9;
--c--contextuals--border--palette--blue-2--tertiary: var(--c--globals--colors--blue-2-550); --c--contextuals--border--palette--blue-2--tertiary: #277389;
--c--contextuals--border--palette--purple--primary: var(--c--globals--colors--purple-350); --c--contextuals--border--palette--purple--primary: #BD83FD;
--c--contextuals--border--palette--purple--secondary: var(--c--globals--colors--purple-450); --c--contextuals--border--palette--purple--secondary: #A85BFD;
--c--contextuals--border--palette--purple--tertiary: var(--c--globals--colors--purple-550); --c--contextuals--border--palette--purple--tertiary: #8B43DA;
--c--contextuals--border--palette--pink--primary: var(--c--globals--colors--pink-350); --c--contextuals--border--palette--pink--primary: #EA77B3;
--c--contextuals--border--palette--pink--secondary: var(--c--globals--colors--pink-450); --c--contextuals--border--palette--pink--secondary: #E24797;
--c--contextuals--border--palette--pink--tertiary: var(--c--globals--colors--pink-550); --c--contextuals--border--palette--pink--tertiary: #B8397B;
--c--contextuals--border--palette--gray--primary: var(--c--globals--colors--gray-350); --c--contextuals--border--palette--gray--primary: #999EA5;
--c--contextuals--border--palette--gray--secondary: var(--c--globals--colors--gray-450); --c--contextuals--border--palette--gray--secondary: #80848A;
--c--contextuals--border--palette--gray--tertiary: var(--c--globals--colors--gray-550); --c--contextuals--border--palette--gray--tertiary: #686B6F;
} }

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

File diff suppressed because one or more lines are too long

39
apps/demo/src/index.scss
View File

@@ -20,20 +20,25 @@ p {
} }
a { a {
color: var(--c--contextuals--background--surface--primary); color: var(--c--contextuals--content--semantic--neutral--primary);
text-decoration: underline; text-decoration: underline;
} }
// App // App
html, body, #root { html,
body,
#root {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0; margin: 0;
} }
html { html {
background: linear-gradient(153deg, var(--c--contextuals--background--surface--tertiary) 0%, var(--c--contextuals--background--surface--primary) 100%); background: linear-gradient(
153deg,
var(--c--contextuals--background--surface--tertiary) 0%,
var(--c--contextuals--background--surface--primary) 100%
);
background-attachment: fixed; background-attachment: fixed;
} }
@@ -61,8 +66,12 @@ html {
background-color: var(--c--contextuals--background--surface--secondary); background-color: var(--c--contextuals--background--surface--secondary);
padding: 2rem; padding: 2rem;
border-radius: var(--c--components--card--border-radius, 4px); border-radius: var(--c--components--card--border-radius, 4px);
border: var(--c--components--card--border-width, 1px) var(--c--contextuals--border--semantic--neutral--tertiary) solid; border: var(--c--components--card--border-width, 1px)
box-shadow: var(--c--components--card--box-shadow, rgba(149, 157, 165, 0.2) 0px 8px 24px); var(--c--contextuals--border--semantic--neutral--tertiary) solid;
box-shadow: var(
--c--components--card--box-shadow,
rgba(149, 157, 165, 0.2) 0px 8px 24px
);
} }
.container { .container {
@@ -80,7 +89,6 @@ html {
} }
} }
// Home // Home
.page__home { .page__home {
display: flex; display: flex;
@@ -122,22 +130,25 @@ html[data-theme="cunningham"][data-variant="light"] body {
} }
html[data-theme="uikit"] { html[data-theme="uikit"] {
background: linear-gradient(153deg, var(--c--theme--colors--gray-025) 0%, var(--c--theme--colors--gray-000) 100%); background: linear-gradient(
153deg,
var(--c--theme--colors--gray-025) 0%,
var(--c--theme--colors--gray-000) 100%
);
background-blend-mode: darken; background-blend-mode: darken;
} }
html[data-theme="redflux"] { html[data-theme="redflux"] {
background: #000000D7 url(/redflux_bg.webp) 50%/cover no-repeat fixed; background: #000000d7 url(/redflux_bg.webp) 50% / cover no-repeat fixed;
background-blend-mode: darken; background-blend-mode: darken;
} }
html[data-theme="blueney"] { html[data-theme="blueney"] {
background: url(/blueney_bg.jpg) 50%/cover no-repeat fixed; background: url(/blueney_bg.jpg) 50% / cover no-repeat fixed;
} }
// Create // Create
.page__create { .page__create {
h1 { h1 {
text-align: center; text-align: center;
margin: 4rem 0; margin: 4rem 0;
@@ -149,7 +160,8 @@ html[data-theme="blueney"] {
gap: 1.5rem; gap: 1.5rem;
text-align: left; text-align: left;
h3, h4 { h3,
h4 {
margin: 0; margin: 0;
} }
} }
@@ -197,7 +209,8 @@ html[data-theme="blueney"] {
} }
.links { .links {
border-top: thin solid var(--c--contextuals--border--semantic--neutral--tertiary); border-top: thin solid
var(--c--contextuals--border--semantic--neutral--tertiary);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 0.5rem; gap: 0.5rem;