studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9cc9214e9ac8b4cdf12c6c21dbcaa4fd9efb49e2
cunningham/apps/demo/cunningham.ts
Nathan Panchout 9cc9214e9a 🎨(react) add UIKit theme support 
Introduce new UIKit theme with light and dark variants, including
comprehensive color tokens for both themes. Update relevant components
and styles to accommodate the new theme architecture.
2025-09-23 15:58:43 +02:00

579 lines
21 KiB
TypeScript
Raw Blame History

import { Configuration } from "@openfun/cunningham-react";
const defaultConfig: Configuration = {
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",
},
},
},
},
};
export default defaultConfig;
Reference in New Issue View Git Blame Copy Permalink