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

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

@@ -12,51 +12,8 @@ import {
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);
@@ -114,9 +71,10 @@ export const Home = ({ modal }: { modal: PageProps }) => {
Created by Garry Marshall, the series presented an idealized vision of
life in the mid-1950s to mid-1960s Midwestern United States.
</p>
<Button
color="primary"
color="brand"
variant="primary"
icon={<span className="material-icons">movie</span>}
onClick={modal.open}
>
@@ -171,8 +129,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
id: "actions",
renderCell: (params) => (
<Button
color="tertiary"
variant="neutral"
color="neutral"
variant="tertiary"
size="small"
onClick={async () => {
const decision = await modals.deleteConfirmationModal();
@@ -210,8 +168,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
<li>
<Button
size="small"
color="tertiary"
variant="neutral"
variant="tertiary"
color="neutral"
target="_blank"
rel="noopener noreferrer"
href="https://www.france-universite-numerique.fr/en/"
@@ -224,8 +182,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
<li>
<Button
size="small"
color="tertiary"
variant="neutral"
variant="tertiary"
color="neutral"
target="_blank"
rel="noopener noreferrer"
href="https://discord.gg/TXPSCMeDzd"
@@ -236,8 +194,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
<li>
<Button
size="small"
color="tertiary"
variant="neutral"
variant="tertiary"
color="neutral"
target="_blank"
rel="noopener noreferrer"
href="https://github.com/openfun/cunningham"
@@ -248,8 +206,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
<li>
<Button
size="small"
color="tertiary"
variant="neutral"
variant="tertiary"
color="neutral"
target="_blank"
rel="noopener noreferrer"
href="https://openfun.github.io/cunningham/storybook"
@@ -260,8 +218,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
<li>
<Button
size="small"
color="tertiary"
variant="neutral"
variant="tertiary"
color="neutral"
target="_blank"
rel="noopener noreferrer"
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={
<div className="onboarding__footer">
<Button
color="primary"
color="brand"
variant="primary"
iconPosition="right"
fullWidth={true}
onClick={handleClose}
@@ -29,7 +30,8 @@ const Onboarding = () => {
</Button>
<Button
href="https://openfun.github.io/cunningham/storybook"
color="tertiary"
color="brand"
variant="tertiary"
size="small"
icon={<span className="material-icons">open_in_new</span>}
fullWidth={true}

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

@@ -2115,7 +2115,7 @@ $themes: (
)
)
),
'blueny': (
'blueney': (
'globals': (
'colors': (
'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-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);
--c--contextuals--background--surface--primary: #2F3033;
--c--contextuals--background--surface--secondary: #252627;
--c--contextuals--background--surface--tertiary: #1B1C1D;
--c--contextuals--background--semantic--brand--primary: #1167D4;
--c--contextuals--background--semantic--brand--primary-hover: #1A509F;
--c--contextuals--background--semantic--brand--secondary: #20467F;
--c--contextuals--background--semantic--brand--secondary-hover: #203C63;
--c--contextuals--background--semantic--brand--tertiary: #203C63;
--c--contextuals--background--semantic--brand--tertiary-hover: #1D314C;
--c--contextuals--background--semantic--neutral--primary: #686B6F;
--c--contextuals--background--semantic--neutral--primary-hover: #505356;
--c--contextuals--background--semantic--neutral--secondary: #45474A;
--c--contextuals--background--semantic--neutral--secondary-hover: #3A3B3E;
--c--contextuals--background--semantic--neutral--tertiary: #3A3B3E;
--c--contextuals--background--semantic--neutral--tertiary-hover: #2F3033;
--c--contextuals--background--semantic--contextual--primary: #FFFFFF0D;
--c--contextuals--background--semantic--contextual--primary-hover: #FFFFFF1A;
--c--contextuals--background--semantic--info--primary: #1167D4;
--c--contextuals--background--semantic--info--primary-hover: #1A509F;
--c--contextuals--background--semantic--info--secondary: #20467F;
--c--contextuals--background--semantic--info--secondary-hover: #203C63;
--c--contextuals--background--semantic--info--tertiary: #203C63;
--c--contextuals--background--semantic--info--tertiary-hover: #1D314C;
--c--contextuals--background--semantic--success--primary: #427816;
--c--contextuals--background--semantic--success--primary-hover: #385C1F;
--c--contextuals--background--semantic--success--secondary: #344D24;
--c--contextuals--background--semantic--success--secondary-hover: #2E4022;
--c--contextuals--background--semantic--success--tertiary: #2E4022;
--c--contextuals--background--semantic--success--tertiary-hover: #27341F;
--c--contextuals--background--semantic--warning--primary: #836703;
--c--contextuals--background--semantic--warning--primary-hover: #625019;
--c--contextuals--background--semantic--warning--secondary: #524620;
--c--contextuals--background--semantic--warning--secondary-hover: #443B20;
--c--contextuals--background--semantic--warning--tertiary: #443B20;
--c--contextuals--background--semantic--warning--tertiary-hover: #36301D;
--c--contextuals--background--semantic--error--primary: #D80000;
--c--contextuals--background--semantic--error--primary-hover: #9E2219;
--c--contextuals--background--semantic--error--secondary: #802820;
--c--contextuals--background--semantic--error--secondary-hover: #662820;
--c--contextuals--background--semantic--error--tertiary: #662820;
--c--contextuals--background--semantic--error--tertiary-hover: #4F231E;
--c--contextuals--background--semantic--disabled--primary: #3A3B3E;
--c--contextuals--background--semantic--disabled--secondary: #2F3033;
--c--contextuals--background--palette--brand--primary: #6CA0E4;
--c--contextuals--background--palette--brand--secondary: #4085DC;
--c--contextuals--background--palette--brand--tertiary: #1167D4;
--c--contextuals--background--palette--red--primary: #EE7C7B;
--c--contextuals--background--palette--red--secondary: #E74E4D;
--c--contextuals--background--palette--red--tertiary: #C23837;
--c--contextuals--background--palette--orange--primary: #F27E27;
--c--contextuals--background--palette--orange--secondary: #D26411;
--c--contextuals--background--palette--orange--tertiary: #AA510E;
--c--contextuals--background--palette--brown--primary: #AF9992;
--c--contextuals--background--palette--brown--secondary: #997E74;
--c--contextuals--background--palette--brown--tertiary: #846357;
--c--contextuals--background--palette--yellow--primary: #C39810;
--c--contextuals--background--palette--yellow--secondary: #A37F0D;
--c--contextuals--background--palette--yellow--tertiary: #84670B;
--c--contextuals--background--palette--green--primary: #48B257;
--c--contextuals--background--palette--green--secondary: #3B9548;
--c--contextuals--background--palette--green--tertiary: #30793A;
--c--contextuals--background--palette--blue-1--primary: #6F9BFD;
--c--contextuals--background--palette--blue-1--secondary: #437DFC;
--c--contextuals--background--palette--blue-1--tertiary: #3665CC;
--c--contextuals--background--palette--blue-2--primary: #3BAACA;
--c--contextuals--background--palette--blue-2--secondary: #318EA9;
--c--contextuals--background--palette--blue-2--tertiary: #277389;
--c--contextuals--background--palette--purple--primary: #BD83FD;
--c--contextuals--background--palette--purple--secondary: #A85BFD;
--c--contextuals--background--palette--purple--tertiary: #8B43DA;
--c--contextuals--background--palette--pink--primary: #EA77B3;
--c--contextuals--background--palette--pink--secondary: #E24797;
--c--contextuals--background--palette--pink--tertiary: #B8397B;
--c--contextuals--background--palette--gray--primary: #999EA5;
--c--contextuals--background--palette--gray--secondary: #80848A;
--c--contextuals--background--palette--gray--tertiary: #686B6F;
--c--contextuals--content--logo1: #95ABFF;
--c--contextuals--content--logo2: #95ABFF;
--c--contextuals--content--semantic--brand--primary: #EAF1FB;
--c--contextuals--content--semantic--brand--secondary: #D5E4F7;
--c--contextuals--content--semantic--brand--tertiary: #96BCEC;
--c--contextuals--content--semantic--brand--on-brand: #EAF1FB;
--c--contextuals--content--semantic--neutral--primary: #F0F1F2;
--c--contextuals--content--semantic--neutral--secondary: #E1E2E5;
--c--contextuals--content--semantic--neutral--tertiary: #B5B9BE;
--c--contextuals--content--semantic--neutral--on-neutral: #F0F1F2;
--c--contextuals--content--semantic--contextual--primary: #000000D9;
--c--contextuals--content--semantic--info--primary: #EAF1FB;
--c--contextuals--content--semantic--info--secondary: #D5E4F7;
--c--contextuals--content--semantic--info--tertiary: #96BCEC;
--c--contextuals--content--semantic--info--on-info: #EAF1FB;
--c--contextuals--content--semantic--success--primary: #E4F7D4;
--c--contextuals--content--semantic--success--secondary: #C8EEA8;
--c--contextuals--content--semantic--success--tertiary: #72CF27;
--c--contextuals--content--semantic--success--on-success: #E4F7D4;
--c--contextuals--content--semantic--warning--primary: #FFF1BD;
--c--contextuals--content--semantic--warning--secondary: #FFE176;
--c--contextuals--content--semantic--warning--tertiary: #E3B205;
--c--contextuals--content--semantic--warning--on-warning: #FFF1BD;
--c--contextuals--content--semantic--error--primary: #FCEDED;
--c--contextuals--content--semantic--error--secondary: #FADBDB;
--c--contextuals--content--semantic--error--tertiary: #F2A4A4;
--c--contextuals--content--semantic--error--on-error: #FCEDED;
--c--contextuals--content--semantic--disabled--primary: #5C5F63;
--c--contextuals--content--semantic--disabled--secondary: #0000004D;
--c--contextuals--content--palette--brand--primary: #6CA0E4;
--c--contextuals--content--palette--brand--secondary: #4085DC;
--c--contextuals--content--palette--brand--tertiary: #1167D4;
--c--contextuals--content--palette--red--primary: #EE7C7B;
--c--contextuals--content--palette--red--secondary: #E74E4D;
--c--contextuals--content--palette--red--tertiary: #C23837;
--c--contextuals--content--palette--orange--primary: #F27E27;
--c--contextuals--content--palette--orange--secondary: #D26411;
--c--contextuals--content--palette--orange--tertiary: #AA510E;
--c--contextuals--content--palette--brown--primary: #AF9992;
--c--contextuals--content--palette--brown--secondary: #997E74;
--c--contextuals--content--palette--brown--tertiary: #846357;
--c--contextuals--content--palette--yellow--primary: #C39810;
--c--contextuals--content--palette--yellow--secondary: #A37F0D;
--c--contextuals--content--palette--yellow--tertiary: #84670B;
--c--contextuals--content--palette--green--primary: #48B257;
--c--contextuals--content--palette--green--secondary: #3B9548;
--c--contextuals--content--palette--green--tertiary: #30793A;
--c--contextuals--content--palette--blue-1--primary: #6F9BFD;
--c--contextuals--content--palette--blue-1--secondary: #437DFC;
--c--contextuals--content--palette--blue-1--tertiary: #3665CC;
--c--contextuals--content--palette--blue-2--primary: #3BAACA;
--c--contextuals--content--palette--blue-2--secondary: #318EA9;
--c--contextuals--content--palette--blue-2--tertiary: #277389;
--c--contextuals--content--palette--purple--primary: #BD83FD;
--c--contextuals--content--palette--purple--secondary: #A85BFD;
--c--contextuals--content--palette--purple--tertiary: #8B43DA;
--c--contextuals--content--palette--pink--primary: #EA77B3;
--c--contextuals--content--palette--pink--secondary: #E24797;
--c--contextuals--content--palette--pink--tertiary: #B8397B;
--c--contextuals--content--palette--gray--primary: #999EA5;
--c--contextuals--content--palette--gray--secondary: #80848A;
--c--contextuals--content--palette--gray--tertiary: #686B6F;
--c--contextuals--border--surface--primary: #3A3B3E;
--c--contextuals--border--semantic--brand--primary: #4085DC;
--c--contextuals--border--semantic--brand--secondary: #0659C5;
--c--contextuals--border--semantic--brand--tertiary: #20467F;
--c--contextuals--border--semantic--contextual--primary: #00000033;
--c--contextuals--border--semantic--neutral--primary: #80848A;
--c--contextuals--border--semantic--neutral--secondary: #5C5F63;
--c--contextuals--border--semantic--neutral--tertiary: #45474A;
--c--contextuals--border--semantic--info--primary: #4085DC;
--c--contextuals--border--semantic--info--secondary: #0659C5;
--c--contextuals--border--semantic--info--tertiary: #20467F;
--c--contextuals--border--semantic--success--primary: #51941C;
--c--contextuals--border--semantic--success--secondary: #3A6A14;
--c--contextuals--border--semantic--success--tertiary: #344D24;
--c--contextuals--border--semantic--warning--primary: #A27F03;
--c--contextuals--border--semantic--warning--secondary: #745B03;
--c--contextuals--border--semantic--warning--tertiary: #524620;
--c--contextuals--border--semantic--error--primary: #E55050;
--c--contextuals--border--semantic--error--secondary: #C00101;
--c--contextuals--border--semantic--error--tertiary: #802820;
--c--contextuals--border--semantic--disabled--primary: #2F3033;
--c--contextuals--border--palette--brand--primary: #6CA0E4;
--c--contextuals--border--palette--brand--secondary: #4085DC;
--c--contextuals--border--palette--brand--tertiary: #1167D4;
--c--contextuals--border--palette--red--primary: #EE7C7B;
--c--contextuals--border--palette--red--secondary: #E74E4D;
--c--contextuals--border--palette--red--tertiary: #C23837;
--c--contextuals--border--palette--orange--primary: #F27E27;
--c--contextuals--border--palette--orange--secondary: #D26411;
--c--contextuals--border--palette--orange--tertiary: #AA510E;
--c--contextuals--border--palette--brown--primary: #AF9992;
--c--contextuals--border--palette--brown--secondary: #997E74;
--c--contextuals--border--palette--brown--tertiary: #846357;
--c--contextuals--border--palette--yellow--primary: #C39810;
--c--contextuals--border--palette--yellow--secondary: #A37F0D;
--c--contextuals--border--palette--yellow--tertiary: #84670B;
--c--contextuals--border--palette--green--primary: #48B257;
--c--contextuals--border--palette--green--secondary: #3B9548;
--c--contextuals--border--palette--green--tertiary: #30793A;
--c--contextuals--border--palette--blue-1--primary: #6F9BFD;
--c--contextuals--border--palette--blue-1--secondary: #437DFC;
--c--contextuals--border--palette--blue-1--tertiary: #3665CC;
--c--contextuals--border--palette--blue-2--primary: #3BAACA;
--c--contextuals--border--palette--blue-2--secondary: #318EA9;
--c--contextuals--border--palette--blue-2--tertiary: #277389;
--c--contextuals--border--palette--purple--primary: #BD83FD;
--c--contextuals--border--palette--purple--secondary: #A85BFD;
--c--contextuals--border--palette--purple--tertiary: #8B43DA;
--c--contextuals--border--palette--pink--primary: #EA77B3;
--c--contextuals--border--palette--pink--secondary: #E24797;
--c--contextuals--border--palette--pink--tertiary: #B8397B;
--c--contextuals--border--palette--gray--primary: #999EA5;
--c--contextuals--border--palette--gray--secondary: #80848A;
--c--contextuals--border--palette--gray--tertiary: #686B6F;
}
.cunningham-theme--blueny{
.cunningham-theme--blueney{
--c--globals--colors--brand-050: #EBF1FA;
--c--globals--colors--brand-100: #D7E4F5;
--c--globals--colors--brand-150: #C3D6F0;
@@ -1942,196 +1942,196 @@
--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);
--c--contextuals--background--surface--primary: #2F3033;
--c--contextuals--background--surface--secondary: #252627;
--c--contextuals--background--surface--tertiary: #1B1C1D;
--c--contextuals--background--semantic--brand--primary: #1167D4;
--c--contextuals--background--semantic--brand--primary-hover: #1A509F;
--c--contextuals--background--semantic--brand--secondary: #20467F;
--c--contextuals--background--semantic--brand--secondary-hover: #203C63;
--c--contextuals--background--semantic--brand--tertiary: #203C63;
--c--contextuals--background--semantic--brand--tertiary-hover: #1D314C;
--c--contextuals--background--semantic--neutral--primary: #686B6F;
--c--contextuals--background--semantic--neutral--primary-hover: #505356;
--c--contextuals--background--semantic--neutral--secondary: #45474A;
--c--contextuals--background--semantic--neutral--secondary-hover: #3A3B3E;
--c--contextuals--background--semantic--neutral--tertiary: #3A3B3E;
--c--contextuals--background--semantic--neutral--tertiary-hover: #2F3033;
--c--contextuals--background--semantic--contextual--primary: #FFFFFF0D;
--c--contextuals--background--semantic--contextual--primary-hover: #FFFFFF1A;
--c--contextuals--background--semantic--info--primary: #1167D4;
--c--contextuals--background--semantic--info--primary-hover: #1A509F;
--c--contextuals--background--semantic--info--secondary: #20467F;
--c--contextuals--background--semantic--info--secondary-hover: #203C63;
--c--contextuals--background--semantic--info--tertiary: #203C63;
--c--contextuals--background--semantic--info--tertiary-hover: #1D314C;
--c--contextuals--background--semantic--success--primary: #427816;
--c--contextuals--background--semantic--success--primary-hover: #385C1F;
--c--contextuals--background--semantic--success--secondary: #344D24;
--c--contextuals--background--semantic--success--secondary-hover: #2E4022;
--c--contextuals--background--semantic--success--tertiary: #2E4022;
--c--contextuals--background--semantic--success--tertiary-hover: #27341F;
--c--contextuals--background--semantic--warning--primary: #836703;
--c--contextuals--background--semantic--warning--primary-hover: #625019;
--c--contextuals--background--semantic--warning--secondary: #524620;
--c--contextuals--background--semantic--warning--secondary-hover: #443B20;
--c--contextuals--background--semantic--warning--tertiary: #443B20;
--c--contextuals--background--semantic--warning--tertiary-hover: #36301D;
--c--contextuals--background--semantic--error--primary: #D80000;
--c--contextuals--background--semantic--error--primary-hover: #9E2219;
--c--contextuals--background--semantic--error--secondary: #802820;
--c--contextuals--background--semantic--error--secondary-hover: #662820;
--c--contextuals--background--semantic--error--tertiary: #662820;
--c--contextuals--background--semantic--error--tertiary-hover: #4F231E;
--c--contextuals--background--semantic--disabled--primary: #3A3B3E;
--c--contextuals--background--semantic--disabled--secondary: #2F3033;
--c--contextuals--background--palette--brand--primary: #6CA0E4;
--c--contextuals--background--palette--brand--secondary: #4085DC;
--c--contextuals--background--palette--brand--tertiary: #1167D4;
--c--contextuals--background--palette--red--primary: #EE7C7B;
--c--contextuals--background--palette--red--secondary: #E74E4D;
--c--contextuals--background--palette--red--tertiary: #C23837;
--c--contextuals--background--palette--orange--primary: #F27E27;
--c--contextuals--background--palette--orange--secondary: #D26411;
--c--contextuals--background--palette--orange--tertiary: #AA510E;
--c--contextuals--background--palette--brown--primary: #AF9992;
--c--contextuals--background--palette--brown--secondary: #997E74;
--c--contextuals--background--palette--brown--tertiary: #846357;
--c--contextuals--background--palette--yellow--primary: #C39810;
--c--contextuals--background--palette--yellow--secondary: #A37F0D;
--c--contextuals--background--palette--yellow--tertiary: #84670B;
--c--contextuals--background--palette--green--primary: #48B257;
--c--contextuals--background--palette--green--secondary: #3B9548;
--c--contextuals--background--palette--green--tertiary: #30793A;
--c--contextuals--background--palette--blue-1--primary: #6F9BFD;
--c--contextuals--background--palette--blue-1--secondary: #437DFC;
--c--contextuals--background--palette--blue-1--tertiary: #3665CC;
--c--contextuals--background--palette--blue-2--primary: #3BAACA;
--c--contextuals--background--palette--blue-2--secondary: #318EA9;
--c--contextuals--background--palette--blue-2--tertiary: #277389;
--c--contextuals--background--palette--purple--primary: #BD83FD;
--c--contextuals--background--palette--purple--secondary: #A85BFD;
--c--contextuals--background--palette--purple--tertiary: #8B43DA;
--c--contextuals--background--palette--pink--primary: #EA77B3;
--c--contextuals--background--palette--pink--secondary: #E24797;
--c--contextuals--background--palette--pink--tertiary: #B8397B;
--c--contextuals--background--palette--gray--primary: #999EA5;
--c--contextuals--background--palette--gray--secondary: #80848A;
--c--contextuals--background--palette--gray--tertiary: #686B6F;
--c--contextuals--content--logo1: #95ABFF;
--c--contextuals--content--logo2: #95ABFF;
--c--contextuals--content--semantic--brand--primary: #EAF1FB;
--c--contextuals--content--semantic--brand--secondary: #D5E4F7;
--c--contextuals--content--semantic--brand--tertiary: #96BCEC;
--c--contextuals--content--semantic--brand--on-brand: #EAF1FB;
--c--contextuals--content--semantic--neutral--primary: #F0F1F2;
--c--contextuals--content--semantic--neutral--secondary: #E1E2E5;
--c--contextuals--content--semantic--neutral--tertiary: #B5B9BE;
--c--contextuals--content--semantic--neutral--on-neutral: #F0F1F2;
--c--contextuals--content--semantic--contextual--primary: #000000D9;
--c--contextuals--content--semantic--info--primary: #EAF1FB;
--c--contextuals--content--semantic--info--secondary: #D5E4F7;
--c--contextuals--content--semantic--info--tertiary: #96BCEC;
--c--contextuals--content--semantic--info--on-info: #EAF1FB;
--c--contextuals--content--semantic--success--primary: #E4F7D4;
--c--contextuals--content--semantic--success--secondary: #C8EEA8;
--c--contextuals--content--semantic--success--tertiary: #72CF27;
--c--contextuals--content--semantic--success--on-success: #E4F7D4;
--c--contextuals--content--semantic--warning--primary: #FFF1BD;
--c--contextuals--content--semantic--warning--secondary: #FFE176;
--c--contextuals--content--semantic--warning--tertiary: #E3B205;
--c--contextuals--content--semantic--warning--on-warning: #FFF1BD;
--c--contextuals--content--semantic--error--primary: #FCEDED;
--c--contextuals--content--semantic--error--secondary: #FADBDB;
--c--contextuals--content--semantic--error--tertiary: #F2A4A4;
--c--contextuals--content--semantic--error--on-error: #FCEDED;
--c--contextuals--content--semantic--disabled--primary: #5C5F63;
--c--contextuals--content--semantic--disabled--secondary: #0000004D;
--c--contextuals--content--palette--brand--primary: #6CA0E4;
--c--contextuals--content--palette--brand--secondary: #4085DC;
--c--contextuals--content--palette--brand--tertiary: #1167D4;
--c--contextuals--content--palette--red--primary: #EE7C7B;
--c--contextuals--content--palette--red--secondary: #E74E4D;
--c--contextuals--content--palette--red--tertiary: #C23837;
--c--contextuals--content--palette--orange--primary: #F27E27;
--c--contextuals--content--palette--orange--secondary: #D26411;
--c--contextuals--content--palette--orange--tertiary: #AA510E;
--c--contextuals--content--palette--brown--primary: #AF9992;
--c--contextuals--content--palette--brown--secondary: #997E74;
--c--contextuals--content--palette--brown--tertiary: #846357;
--c--contextuals--content--palette--yellow--primary: #C39810;
--c--contextuals--content--palette--yellow--secondary: #A37F0D;
--c--contextuals--content--palette--yellow--tertiary: #84670B;
--c--contextuals--content--palette--green--primary: #48B257;
--c--contextuals--content--palette--green--secondary: #3B9548;
--c--contextuals--content--palette--green--tertiary: #30793A;
--c--contextuals--content--palette--blue-1--primary: #6F9BFD;
--c--contextuals--content--palette--blue-1--secondary: #437DFC;
--c--contextuals--content--palette--blue-1--tertiary: #3665CC;
--c--contextuals--content--palette--blue-2--primary: #3BAACA;
--c--contextuals--content--palette--blue-2--secondary: #318EA9;
--c--contextuals--content--palette--blue-2--tertiary: #277389;
--c--contextuals--content--palette--purple--primary: #BD83FD;
--c--contextuals--content--palette--purple--secondary: #A85BFD;
--c--contextuals--content--palette--purple--tertiary: #8B43DA;
--c--contextuals--content--palette--pink--primary: #EA77B3;
--c--contextuals--content--palette--pink--secondary: #E24797;
--c--contextuals--content--palette--pink--tertiary: #B8397B;
--c--contextuals--content--palette--gray--primary: #999EA5;
--c--contextuals--content--palette--gray--secondary: #80848A;
--c--contextuals--content--palette--gray--tertiary: #686B6F;
--c--contextuals--border--surface--primary: #3A3B3E;
--c--contextuals--border--semantic--brand--primary: #4085DC;
--c--contextuals--border--semantic--brand--secondary: #0659C5;
--c--contextuals--border--semantic--brand--tertiary: #20467F;
--c--contextuals--border--semantic--contextual--primary: #00000033;
--c--contextuals--border--semantic--neutral--primary: #80848A;
--c--contextuals--border--semantic--neutral--secondary: #5C5F63;
--c--contextuals--border--semantic--neutral--tertiary: #45474A;
--c--contextuals--border--semantic--info--primary: #4085DC;
--c--contextuals--border--semantic--info--secondary: #0659C5;
--c--contextuals--border--semantic--info--tertiary: #20467F;
--c--contextuals--border--semantic--success--primary: #51941C;
--c--contextuals--border--semantic--success--secondary: #3A6A14;
--c--contextuals--border--semantic--success--tertiary: #344D24;
--c--contextuals--border--semantic--warning--primary: #A27F03;
--c--contextuals--border--semantic--warning--secondary: #745B03;
--c--contextuals--border--semantic--warning--tertiary: #524620;
--c--contextuals--border--semantic--error--primary: #E55050;
--c--contextuals--border--semantic--error--secondary: #C00101;
--c--contextuals--border--semantic--error--tertiary: #802820;
--c--contextuals--border--semantic--disabled--primary: #2F3033;
--c--contextuals--border--palette--brand--primary: #6CA0E4;
--c--contextuals--border--palette--brand--secondary: #4085DC;
--c--contextuals--border--palette--brand--tertiary: #1167D4;
--c--contextuals--border--palette--red--primary: #EE7C7B;
--c--contextuals--border--palette--red--secondary: #E74E4D;
--c--contextuals--border--palette--red--tertiary: #C23837;
--c--contextuals--border--palette--orange--primary: #F27E27;
--c--contextuals--border--palette--orange--secondary: #D26411;
--c--contextuals--border--palette--orange--tertiary: #AA510E;
--c--contextuals--border--palette--brown--primary: #AF9992;
--c--contextuals--border--palette--brown--secondary: #997E74;
--c--contextuals--border--palette--brown--tertiary: #846357;
--c--contextuals--border--palette--yellow--primary: #C39810;
--c--contextuals--border--palette--yellow--secondary: #A37F0D;
--c--contextuals--border--palette--yellow--tertiary: #84670B;
--c--contextuals--border--palette--green--primary: #48B257;
--c--contextuals--border--palette--green--secondary: #3B9548;
--c--contextuals--border--palette--green--tertiary: #30793A;
--c--contextuals--border--palette--blue-1--primary: #6F9BFD;
--c--contextuals--border--palette--blue-1--secondary: #437DFC;
--c--contextuals--border--palette--blue-1--tertiary: #3665CC;
--c--contextuals--border--palette--blue-2--primary: #3BAACA;
--c--contextuals--border--palette--blue-2--secondary: #318EA9;
--c--contextuals--border--palette--blue-2--tertiary: #277389;
--c--contextuals--border--palette--purple--primary: #BD83FD;
--c--contextuals--border--palette--purple--secondary: #A85BFD;
--c--contextuals--border--palette--purple--tertiary: #8B43DA;
--c--contextuals--border--palette--pink--primary: #EA77B3;
--c--contextuals--border--palette--pink--secondary: #E24797;
--c--contextuals--border--palette--pink--tertiary: #B8397B;
--c--contextuals--border--palette--gray--primary: #999EA5;
--c--contextuals--border--palette--gray--secondary: #80848A;
--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 {
color: var(--c--contextuals--background--surface--primary);
color: var(--c--contextuals--content--semantic--neutral--primary);
text-decoration: underline;
}
// App
html, body, #root {
html,
body,
#root {
width: 100%;
height: 100%;
margin: 0;
}
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;
}
@@ -61,8 +66,12 @@ html {
background-color: var(--c--contextuals--background--surface--secondary);
padding: 2rem;
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;
box-shadow: var(--c--components--card--box-shadow, rgba(149, 157, 165, 0.2) 0px 8px 24px);
border: var(--c--components--card--border-width, 1px)
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 {
@@ -80,7 +89,6 @@ html {
}
}
// Home
.page__home {
display: flex;
@@ -122,22 +130,25 @@ html[data-theme="cunningham"][data-variant="light"] body {
}
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;
}
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;
}
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
.page__create {
h1 {
text-align: center;
margin: 4rem 0;
@@ -149,7 +160,8 @@ html[data-theme="blueney"] {
gap: 1.5rem;
text-align: left;
h3, h4 {
h3,
h4 {
margin: 0;
}
}
@@ -197,7 +209,8 @@ html[data-theme="blueney"] {
}
.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;
justify-content: space-between;
gap: 0.5rem;