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

🎨(demo) implement new tokens

Browse Source 
implements the new token architecture
This commit is contained in:
Nathan Panchout
2025-09-11 10:40:06 +02:00
committed by NathanVss
parent 9cc9214e9a
commit a420bcb1ab
9 changed files with 3334 additions and 2015 deletions
Download Patch File Download Diff File Expand all files Collapse all files

593
apps/demo/cunningham.ts
View File

@@ -1,578 +1,23 @@
import { Configuration } from "@openfun/cunningham-react";
import { defaultThemes } from "@openfun/cunningham-tokens";
const defaultConfig: Configuration = {
themes: {
dark: {
components: {
card: {
"border-width": "none",
"box-shadow": "rgba(0, 8, 16, 0.3) 0px 16px 24px",
const defaultConfig = {
themes: {
dark: {
components: {
card: {
"border-width": "none",
"box-shadow": "rgba(0, 8, 16, 0.3) 0px 16px 24px",
},
},
},
},
},
redflux_dark: {
theme: {
colors: {
"primary-text": "#FFFFFF",
"primary-100": "#FA8D92",
"primary-200": "#F95B63",
"primary-300": "#F72A35",
"primary-400": "#E50914",
"primary-500": "#C30811",
"primary-600": "#A0060E",
"primary-700": "#7E050B",
"primary-800": "#5C0408",
"primary-900": "#390205",
"secondary-text": "#FFF",
"secondary-100": "#1b5ad7",
"secondary-200": "#146cea",
"secondary-300": "#007ffe",
"secondary-400": "#008eff",
"secondary-500": "#279eff",
"secondary-600": "#56b0ff",
"secondary-700": "#8ac6ff",
"secondary-800": "#b9dcff",
"secondary-900": "#e2f1ff",
"greyscale-000": "#000000BB",
"greyscale-100": "#191919BB",
"greyscale-200": "#232323",
"greyscale-300": "#292929",
"greyscale-400": "#343434",
"greyscale-500": "#404040",
"greyscale-600": "#aaaaaa",
"greyscale-700": "#cccccc",
"greyscale-800": "#eeeeee",
"greyscale-900": "#f7f7f7",
"danger-900": "#FACED0",
"danger-800": "#F7A9AD",
"danger-700": "#F38389",
"danger-600": "#F05E66",
"danger-500": "#EC3942",
"danger-400": "#D8151F",
"danger-300": "#A51017",
"danger-200": "#720B10",
"danger-100": "#3F0609",
"info-900": "#53A4FD",
"info-800": "#2B8FFC",
"info-700": "#047AFA",
"info-600": "#0366D2",
"info-500": "#0255AF",
"info-400": "#02448C",
"info-300": "#013368",
"info-200": "#012245",
"info-100": "#001122",
"success-900": "#A9F7C0",
"success-800": "#8DF4AC",
"success-700": "#71F198",
"success-600": "#55EF83",
"success-500": "#39EC6F",
"success-400": "#14CF4C",
"success-300": "#0E9236",
"success-200": "#085620",
"success-100": "#021909",
"warning-900": "#EAC88B",
"warning-800": "#E4BA6D",
"warning-700": "#DFAB4F",
"warning-600": "#D99D31",
"warning-500": "#B68121",
"warning-400": "#8A621A",
"warning-300": "#5F4412",
"warning-200": "#34250A",
"warning-100": "#090702",
},
font: {
families: {
base: "Helvetica Neue,Segoe UI,Roboto,Ubuntu,sans-serif",
accent: "Helvetica Neue,Segoe UI,Roboto,Ubuntu,sans-serif",
},
},
},
components: {
button: {
"border-radius": "0.1875rem",
},
"forms-input": {
"border-radius": "0.1875rem",
"border-color": "ref(theme.colors.greyscale-500)",
"border-color--hover": "ref(theme.colors.greyscale-600)",
"background-color": "ref(theme.colors.greyscale-100)",
"label-color--focus": "ref(theme.colors.greyscale-700)",
},
"forms-select": {
"border-radius": "0.1875rem",
"border-color": "ref(theme.colors.greyscale-500)",
"border-color--hover": "ref(theme.colors.greyscale-600)",
"background-color": "ref(theme.colors.greyscale-100)",
"border-color--focus": "ref(theme.colors.greyscale-700)",
"label-color--focus": "ref(theme.colors.greyscale-700)",
"menu-background-color": "#191919",
"item-background-color--selected": "ref(theme.colors.primary-600)",
},
"forms-datepicker": {
"border-radius": "0.1875rem",
"border-color": "ref(theme.colors.greyscale-500)",
"border-color--hover": "ref(theme.colors.greyscale-600)",
"background-color": "ref(theme.colors.greyscale-100)",
"border-color--focus": "ref(theme.colors.greyscale-700)",
"label-color--focus": "ref(theme.colors.greyscale-700)",
"menu-background-color": "#191919",
"grid-cell--border-color--today": "ref(theme.colors.greyscale-800)",
"grid-cell--color--today": "ref(theme.colors.greyscale-800)",
"range-selection-background-color": "ref(theme.colors.primary-900)",
"item-background-color--selected": "ref(theme.colors.primary-600)",
},
"forms-fileuploader": {
"border-color": "ref(theme.colors.greyscale-500)",
"border-color--hover": "ref(theme.colors.greyscale-600)",
"background-color": "ref(theme.colors.greyscale-100)",
"background-color--active": "ref(theme.colors.greyscale-500)",
"accent-color": "ref(theme.colors.greyscale-800)",
},
"forms-textarea": {
"border-radius": "0.1875rem",
"border-color": "ref(theme.colors.greyscale-500)",
"border-color--hover": "ref(theme.colors.greyscale-600)",
"background-color": "ref(theme.colors.greyscale-100)",
"border-color--focus": "ref(theme.colors.greyscale-700)",
"label-color--focus": "ref(theme.colors.greyscale-700)",
},
"forms-checkbox": {
"border-radius": "0.1875rem",
"accent-color": "ref(theme.colors.greyscale-100)",
"background-color": "ref(theme.colors.greyscale-800)",
},
"forms-switch": {
"handle-border-radius": "0.3rem",
"rail-border-radius": "0.500rem",
"accent-color": "ref(theme.colors.greyscale-800)",
"handle-background-color": "ref(theme.colors.greyscale-100)",
"rail-background-color": "ref(theme.colors.greyscale-400)",
},
"forms-radio": {
"accent-color": "ref(theme.colors.greyscale-100)",
"background-color": "ref(theme.colors.greyscale-800)",
},
modal: {
"border-radius": "0.1875rem",
"background-color": "#191919",
"backdrop-color": "ref(theme.colors.greyscale-000)",
},
card: {
"border-radius": "0.1875rem",
"border-width": "none",
"box-shadow": "rgba(255, 220, 220, 0.05) 0px 0px 60px 10px",
},
},
},
blueney_dark: {
theme: {
colors: {
"primary-text": "#FFFFFF",
"primary-900": "#53B0FF",
"primary-800": "#39A4FF",
"primary-700": "#2099FF",
"primary-600": "#068DFF",
"primary-500": "#0080EB",
"primary-400": "#0072D2",
"primary-300": "#00549A",
"primary-200": "#003562",
"primary-100": "#00172A",
"greyscale-900": "#FAFAFC",
"greyscale-800": "#DBDDE7",
"greyscale-700": "#BCC0D3",
"greyscale-600": "#9EA2BF",
"greyscale-500": "#7F85AB",
"greyscale-400": "#626995",
"greyscale-300": "#4E5376",
"greyscale-200": "#393E57",
"greyscale-100": "#1B1D29",
"greyscale-000": "#151823",
},
font: {
families: {
base: "Avenir, sans-serif",
accent: "Avenir, sans-serif",
},
},
},
components: {
card: {
"border-radius": "0.25rem",
"border-width": "none",
"box-shadow":
"rgba(0, 0, 0, 0.69) 0px 26px 30px -10px, rgba(0, 0, 0, 0.73) 0px 16px 10px -10px",
},
button: {
"border-radius": "0.25rem",
},
"forms-input": {
"border-radius": "0.25rem",
"border-color": "transparent",
"border-color--hover": "transparent",
"border-color--focus": "ref(theme.colors.greyscale-700)",
"background-color": "ref(theme.colors.greyscale-200)",
"label-color--focus": "ref(theme.colors.greyscale-700)",
"label-color": "ref(theme.colors.greyscale-700)",
},
"forms-select": {
"border-radius": "0.25rem",
"border-color": "transparent",
"border-color--hover": "transparent",
"border-color--focus": "ref(theme.colors.greyscale-700)",
"background-color": "ref(theme.colors.greyscale-200)",
"label-color--focus": "ref(theme.colors.greyscale-700)",
"menu-background-color": "ref(theme.colors.greyscale-200)",
"item-background-color--hover": "ref(theme.colors.greyscale-300)",
"item-background-color--selected": "ref(theme.colors.primary-400)",
},
"forms-datepicker": {
"border-radius": "0.25rem",
"border-color": "transparent",
"border-color--hover": "transparent",
"border-color--focus": "ref(theme.colors.greyscale-700)",
"background-color": "ref(theme.colors.greyscale-200)",
"label-color--focus": "ref(theme.colors.greyscale-700)",
"menu-background-color": "ref(theme.colors.greyscale-200)",
"grid-cell--border-color--today": "ref(theme.colors.greyscale-500)",
"grid-cell--color--today": "ref(theme.colors.greyscale-700)",
"grid-cell--color--selected": "ref(theme.colors.primary-600)",
"range-selection-background-color": "ref(theme.colors.primary-100)",
"item-background-color--hover": "ref(theme.colors.greyscale-300)",
"item-background-color--selected": "ref(theme.colors.primary-400)",
},
"forms-fileuploader": {
"background-color": "ref(theme.colors.greyscale-200)",
"background-color--active": "ref(theme.colors.greyscale-300)",
"border-color": "transparent",
},
"forms-textarea": {
"border-color": "transparent",
"border-color--hover": "transparent",
"border-color--focus": "ref(theme.colors.greyscale-700)",
"border-radius": "0.25rem",
"background-color": "ref(theme.colors.greyscale-200)",
"label-color--focus": "ref(theme.colors.greyscale-700)",
},
"forms-checkbox": {
"border-radius": "0.25rem",
"border-color": "ref(theme.colors.greyscale-300)",
"accent-color": "ref(theme.colors.greyscale-900)",
"background-color": "ref(theme.colors.greyscale-200)",
},
"forms-switch": {
"rail-background-color": "ref(theme.colors.greyscale-200)",
"accent-color": "ref(theme.colors.primary-400)",
},
"forms-radio": {
"border-color": "ref(theme.colors.greyscale-300)",
"accent-color": "ref(theme.colors.greyscale-900)",
"background-color": "ref(theme.colors.greyscale-200)",
},
modal: {
"border-radius": "0.25rem",
"background-color": "ref(theme.colors.greyscale-100)",
"backdrop-color": "#00172AAB",
"border-color": "transparent",
"box-shadow":
"rgba(0, 0, 0, 0.69) 0px 26px 30px -10px, rgba(0, 0, 0, 0.73) 0px 16px 10px -10px",
},
},
},
uikit_light: {
globals: {
colors: {
"toto-text": "red",
},
},
theme: {
colors: {
"toto-text": "red",
"primary-text": "#FFFFFF",
"primary-050": "#EAF1FB",
"primary-100": "#D6E4F6",
"primary-150": "#C1D6F2",
"primary-200": "#ACC9EE",
"primary-250": "#97BBEA",
"primary-300": "#82AEE6",
"primary-350": "#6BA0E4",
"primary-400": "#5693E0",
"primary-450": "#4085DC",
"primary-500": "#2976D8",
"primary-550": "#1167D4",
"primary-600": "#0559C5",
"primary-650": "#054EAC",
"primary-700": "#13458B",
"primary-750": "#183C6E",
"primary-800": "#193154",
"primary-850": "#16273E",
"primary-900": "#131C2A",
"primary-950": "#0C1117",
"secondary-text": "#FFF",
"secondary-050": "#EAF1FB",
"secondary-100": "#D6E4F6",
"secondary-150": "#C1D6F2",
"secondary-200": "#ACC9EE",
"secondary-250": "#97BBEA",
"secondary-300": "#82AEE6",
"secondary-350": "#6BA0E4",
"secondary-400": "#5693E0",
"secondary-450": "#4085DC",
"secondary-500": "#2976D8",
"secondary-550": "#1167D4",
"secondary-600": "#0559C5",
"secondary-650": "#054EAC",
"secondary-700": "#13458B",
"secondary-750": "#183C6E",
"secondary-800": "#193154",
"secondary-850": "#16273E",
"secondary-900": "#131C2A",
"secondary-950": "#0C1117",
"greyscale-000": "#FFFFFF",
"greyscale-025": "#F8F8F9",
"greyscale-050": "#F0F1F2",
"greyscale-100": "#E1E2E4",
"greyscale-150": "#D2D4D7",
"greyscale-200": "#C4C7CA",
"greyscale-250": "#B6B9BE",
"greyscale-300": "#A7ABB1",
"greyscale-350": "#999EA5",
"greyscale-400": "#8B919A",
"greyscale-450": "#7D848E",
"greyscale-500": "#707882",
"greyscale-550": "#626B77",
"greyscale-600": "#565F6B",
"greyscale-650": "#495360",
"greyscale-700": "#3D4855",
"greyscale-750": "#303C4B",
"greyscale-800": "#26313F",
"greyscale-850": "#1D2633",
"greyscale-900": "#141C26",
"greyscale-950": "#0D1117",
"greyscale-1000": "#000000",
"info-050": "#EAF1FB",
"info-100": "#D5E4F7",
"info-150": "#C0D6F4",
"info-200": "#ABC9F0",
"info-250": "#96BCEC",
"info-300": "#80AEE8",
"info-350": "#6BA0E4",
"info-400": "#5693E1",
"info-450": "#4085DD",
"info-500": "#2976D8",
"info-550": "#1167D4",
"info-600": "#0559C5",
"info-650": "#044EAD",
"info-700": "#13458C",
"info-750": "#183C6E",
"info-800": "#183255",
"info-850": "#16273E",
"info-900": "#121C2A",
"info-950": "#0C1117",
"success-050": "#E4F7D4",
"success-100": "#C7EEA7",
"success-150": "#A9E578",
"success-200": "#89DC45",
"success-250": "#72CF27",
"success-300": "#6AC024",
"success-350": "#61B121",
"success-400": "#59A21E",
"success-450": "#51941C",
"success-500": "#4A8519",
"success-550": "#427816",
"success-600": "#3A6A14",
"success-650": "#335D11",
"success-700": "#2F4F19",
"success-750": "#2A411B",
"success-800": "#25351A",
"success-850": "#1E2818",
"success-900": "#171D13",
"success-950": "#0F110C",
"warning-050": "#FFF1BD",
"warning-100": "#FFE176",
"warning-150": "#FFCF25",
"warning-200": "#F4BF05",
"warning-250": "#E3B204",
"warning-300": "#D3A504",
"warning-350": "#C29804",
"warning-400": "#B28C03",
"warning-450": "#A27F03",
"warning-500": "#937303",
"warning-550": "#836703",
"warning-600": "#745B02",
"warning-650": "#665002",
"warning-700": "#554512",
"warning-750": "#463B16",
"warning-800": "#383017",
"warning-850": "#2B2615",
"warning-900": "#1E1C12",
"warning-950": "#12110C",
"danger-050": "#FCEDED",
"danger-100": "#F9DCDC",
"danger-150": "#F6CACA",
"danger-200": "#F3B8B8",
"danger-250": "#F0A5A5",
"danger-300": "#ED9393",
"danger-350": "#EA7F7F",
"danger-400": "#E86969",
"danger-450": "#E45151",
"danger-500": "#DF3434",
"danger-550": "#D80000",
"danger-600": "#C00000",
"danger-650": "#AA0000",
"danger-700": "#8C1912",
"danger-750": "#721F17",
"danger-800": "#591F18",
"danger-850": "#431C17",
"danger-900": "#2F1613",
"danger-950": "#1C0F0D",
},
},
},
uikit_dark: {
theme: {
colors: {
"primary-text": "#FFFFFF",
"primary-050": "#EAF1FB",
"primary-100": "#D6E4F6",
"primary-150": "#C1D6F2",
"primary-200": "#ACC9EE",
"primary-250": "#97BBEA",
"primary-300": "#82AEE6",
"primary-350": "#6BA0E4",
"primary-400": "#5693E0",
"primary-450": "#4085DC",
"primary-500": "#2976D8",
"primary-550": "#1167D4",
"primary-600": "#0559C5",
"primary-650": "#054EAC",
"primary-700": "#13458B",
"primary-750": "#183C6E",
"primary-800": "#193154",
"primary-850": "#16273E",
"primary-900": "#131C2A",
"primary-950": "#0C1117",
"secondary-text": "#FFF",
"secondary-050": "#EAF1FB",
"secondary-100": "#D6E4F6",
"secondary-150": "#C1D6F2",
"secondary-200": "#ACC9EE",
"secondary-250": "#97BBEA",
"secondary-300": "#82AEE6",
"secondary-350": "#6BA0E4",
"secondary-400": "#5693E0",
"secondary-450": "#4085DC",
"secondary-500": "#2976D8",
"secondary-550": "#1167D4",
"secondary-600": "#0559C5",
"secondary-650": "#054EAC",
"secondary-700": "#13458B",
"secondary-750": "#183C6E",
"secondary-800": "#193154",
"secondary-850": "#16273E",
"secondary-900": "#131C2A",
"secondary-950": "#0C1117",
"greyscale-1000": "#FFFFFF",
"greyscale-950": "#F8F8F9",
"greyscale-900": "#F0F1F2",
"greyscale-850": "#E1E2E4",
"greyscale-800": "#D2D4D7",
"greyscale-750": "#C4C7CA",
"greyscale-700": "#B6B9BE",
"greyscale-650": "#A7ABB1",
"greyscale-600": "#999EA5",
"greyscale-550": "#8B919A",
"greyscale-500": "#7D848E",
"greyscale-450": "#707882",
"greyscale-400": "#626B77",
"greyscale-350": "#565F6B",
"greyscale-300": "#495360",
"greyscale-250": "#3D4855",
"greyscale-200": "#303C4B",
"greyscale-150": "#26313F",
"greyscale-100": "#1D2633",
"greyscale-050": "#141C26",
"greyscale-025": "#0D1117",
"greyscale-000": "#000000",
"info-050": "#EAF1FB",
"info-100": "#D5E4F7",
"info-150": "#C0D6F4",
"info-200": "#ABC9F0",
"info-250": "#96BCEC",
"info-300": "#80AEE8",
"info-350": "#6BA0E4",
"info-400": "#5693E1",
"info-450": "#4085DD",
"info-500": "#2976D8",
"info-550": "#1167D4",
"info-600": "#0559C5",
"info-650": "#044EAD",
"info-700": "#13458C",
"info-750": "#183C6E",
"info-800": "#183255",
"info-850": "#16273E",
"info-900": "#121C2A",
"info-950": "#0C1117",
"success-050": "#E4F7D4",
"success-100": "#C7EEA7",
"success-150": "#A9E578",
"success-200": "#89DC45",
"success-250": "#72CF27",
"success-300": "#6AC024",
"success-350": "#61B121",
"success-400": "#59A21E",
"success-450": "#51941C",
"success-500": "#4A8519",
"success-550": "#427816",
"success-600": "#3A6A14",
"success-650": "#335D11",
"success-700": "#2F4F19",
"success-750": "#2A411B",
"success-800": "#25351A",
"success-850": "#1E2818",
"success-900": "#171D13",
"success-950": "#0F110C",
"warning-050": "#FFF1BD",
"warning-100": "#FFE176",
"warning-150": "#FFCF25",
"warning-200": "#F4BF05",
"warning-250": "#E3B204",
"warning-300": "#D3A504",
"warning-350": "#C29804",
"warning-400": "#B28C03",
"warning-450": "#A27F03",
"warning-500": "#937303",
"warning-550": "#836703",
"warning-600": "#745B02",
"warning-650": "#665002",
"warning-700": "#554512",
"warning-750": "#463B16",
"warning-800": "#383017",
"warning-850": "#2B2615",
"warning-900": "#1E1C12",
"warning-950": "#12110C",
"danger-050": "#FCEDED",
"danger-100": "#F9DCDC",
"danger-150": "#F6CACA",
"danger-200": "#F3B8B8",
"danger-250": "#F0A5A5",
"danger-300": "#ED9393",
"danger-350": "#EA7F7F",
"danger-400": "#E86969",
"danger-450": "#E45151",
"danger-500": "#DF3434",
"danger-550": "#D80000",
"danger-600": "#C00000",
"danger-650": "#AA0000",
"danger-700": "#8C1912",
"danger-750": "#721F17",
"danger-800": "#591F18",
"danger-850": "#431C17",
"danger-900": "#2F1613",
"danger-950": "#1C0F0D",
},
},
},
},
};
}
const config = {...defaultConfig, ...defaultThemes};
export default config;
export default defaultConfig;

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

@@ -11,9 +11,6 @@ import Onboarding from "./Onboarding";
enum Theme {
CUNNINGHAM = "cunningham",
REDFLUX = "redflux",
BLUENEY = "blueney",
UIKIT = "uikit"
}
enum Variant {
@@ -26,18 +23,7 @@ const THEMES: Record<Theme, Record<Variant, string | undefined>> = {
light: "default",
dark: "dark",
},
[Theme.REDFLUX]: {
light: undefined,
dark: "redflux_dark",
},
[Theme.BLUENEY]: {
light: undefined,
dark: "blueney_dark",
},
[Theme.UIKIT]: {
light: "uikit_light",
dark: "uikit_dark",
},
};
export type PageProps = ReturnType<typeof useModal>;

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

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

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

@@ -57,11 +57,11 @@ export const Home = ({ modal }: { modal: PageProps }) => {
return (
<main className="page__home">
<header className="page__home__title">
<h1 className="clr-gray-900">
<h1 className="clr-content-semantic--neutral--primary">
{/* eslint-disable-next-line react/no-unescaped-entities */}
🍿Cunningham's <span className="clr-brand-400">Cast</span>
</h1>
<p className="clr-gray-600 fs-m fw-regular">
<p className="clr-content-semantic--neutral--tertiary fs-sm fw-regular">
Happy Days is an American television sitcom that aired first-run from
January 15, 1974, to September 24, 1984, on ABC-TV
<br /> with a total of 255 half-hour episodes spanning over eleven
@@ -70,6 +70,7 @@ 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"
icon={<span className="material-icons">movie</span>}
@@ -126,7 +127,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
id: "actions",
renderCell: (params) => (
<Button
color="tertiary-text"
color="tertiary"
variant="neutral"
size="small"
onClick={async () => {
const decision = await modals.deleteConfirmationModal();
@@ -164,7 +166,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
<li>
<Button
size="small"
color="tertiary-text"
color="tertiary"
variant="neutral"
target="_blank"
rel="noopener noreferrer"
href="https://www.france-universite-numerique.fr/en/"
@@ -177,7 +180,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
<li>
<Button
size="small"
color="tertiary-text"
color="tertiary"
variant="neutral"
target="_blank"
rel="noopener noreferrer"
href="https://discord.gg/TXPSCMeDzd"
@@ -188,7 +192,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
<li>
<Button
size="small"
color="tertiary-text"
color="tertiary"
variant="neutral"
target="_blank"
rel="noopener noreferrer"
href="https://github.com/openfun/cunningham"
@@ -199,7 +204,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
<li>
<Button
size="small"
color="tertiary-text"
color="tertiary"
variant="neutral"
target="_blank"
rel="noopener noreferrer"
href="https://openfun.github.io/cunningham/storybook"
@@ -210,7 +216,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
<li>
<Button
size="small"
color="tertiary-text"
color="tertiary"
variant="neutral"
target="_blank"
rel="noopener noreferrer"
href="https://www.figma.com/file/JbPT1R6YUFW4oH8jHvH960/DS-Cunningham---PUBLIC?type=design"

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

@@ -29,7 +29,7 @@ const Onboarding = () => {
</Button>
<Button
href="https://openfun.github.io/cunningham/storybook"
color="tertiary-text"
color="tertiary"
size="small"
icon={<span className="material-icons">open_in_new</span>}
fullWidth={true}

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because one or more lines are too long

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

@@ -10,7 +10,7 @@ $sm: map.get($themes, "default", "theme", "breakpoints", "sm");
// Reset
h1 {
font-family: var(--c--theme--font--families--accent);
font-family: var(--c--globals--font--families--accent);
font-size: clamp(2.5rem, 7vw, 4rem);
margin: 0;
}
@@ -20,7 +20,7 @@ p {
}
a {
color: var(--c--theme--colors--greyscale-800);
color: var(--c--contextuals--background--surface--primary);
text-decoration: underline;
}
@@ -33,7 +33,7 @@ html, body, #root {
}
html {
background: linear-gradient(153deg, var(--c--theme--colors--greyscale-100) 0%, var(--c--theme--colors--greyscale-000) 100%);
background: linear-gradient(153deg, var(--c--contextuals--background--surface--tertiary) 0%, var(--c--contextuals--background--surface--primary) 100%);
background-attachment: fixed;
}
@@ -58,10 +58,10 @@ html {
}
.card {
background-color: var(--c--theme--colors--greyscale-000);
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--theme--colors--greyscale-300) solid;
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);
}
@@ -122,7 +122,7 @@ html[data-theme="cunningham"][data-variant="light"] body {
}
html[data-theme="uikit"] {
background: linear-gradient(153deg, var(--c--theme--colors--greyscale-025) 0%, var(--c--theme--colors--greyscale-000) 100%);
background: linear-gradient(153deg, var(--c--theme--colors--gray-025) 0%, var(--c--theme--colors--gray-000) 100%);
background-blend-mode: darken;
}
@@ -197,7 +197,7 @@ html[data-theme="blueney"] {
}
.links {
border-top: thin solid var(--c--theme--colors--greyscale-300);
border-top: thin solid var(--c--contextuals--border--semantic--neutral--tertiary);
display: flex;
justify-content: space-between;
gap: 0.5rem;