💄(demo) add reflux theme

Add a dark theme inspired by a famous streaming platform
with red tint.

apps/demo/cunningham.ts

@@ -1,5 +1,161 @@
 import { Configuration } from "@openfun/cunningham-react";
 
-const defaultConfig: Configuration = { themes: {} };
+const defaultConfig: Configuration = {
+  themes: {
+    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",
+        },
+        card: {
+          "border-radius": "0.1875rem",
+          "border-width": "none",
+          "box-shadow": "rgba(255, 220, 220, 0.05) 0px 0px 60px 10px",
+        },
+      },
+    },
+  },
+};
 
 export default defaultConfig;

apps/demo/src/App.tsx

@@ -5,6 +5,7 @@ import { Home } from "./Home";
 
 enum Theme {
   CUNNINGHAM = "cunningham",
+  REDFLUX = "redflux",
 }
 
 enum Variant {
@@ -17,6 +18,10 @@ const THEMES: Record<Theme, Record<Variant, string | undefined>> = {
     light: "default",
     dark: "dark",
   },
+  [Theme.REDFLUX]: {
+    light: undefined,
+    dark: "redflux_dark",
+  },
 };
 
 export enum Page {

apps/demo/src/cunningham-tokens.css

@@ -161,3 +161,124 @@
 	--c--theme--colors--danger-800: #AE6666;
 	--c--theme--colors--danger-900: #9D6666;
 }
+.cunningham-theme--redflux_dark{
+	--c--theme--colors--primary-text: #FFFFFF;
+	--c--theme--colors--primary-100: #FA8D92;
+	--c--theme--colors--primary-200: #F95B63;
+	--c--theme--colors--primary-300: #F72A35;
+	--c--theme--colors--primary-400: #E50914;
+	--c--theme--colors--primary-500: #C30811;
+	--c--theme--colors--primary-600: #A0060E;
+	--c--theme--colors--primary-700: #7E050B;
+	--c--theme--colors--primary-800: #5C0408;
+	--c--theme--colors--primary-900: #390205;
+	--c--theme--colors--secondary-text: #FFF;
+	--c--theme--colors--secondary-100: #1b5ad7;
+	--c--theme--colors--secondary-200: #146cea;
+	--c--theme--colors--secondary-300: #007ffe;
+	--c--theme--colors--secondary-400: #008eff;
+	--c--theme--colors--secondary-500: #279eff;
+	--c--theme--colors--secondary-600: #56b0ff;
+	--c--theme--colors--secondary-700: #8ac6ff;
+	--c--theme--colors--secondary-800: #b9dcff;
+	--c--theme--colors--secondary-900: #e2f1ff;
+	--c--theme--colors--greyscale-000: #000000BB;
+	--c--theme--colors--greyscale-100: #191919BB;
+	--c--theme--colors--greyscale-200: #232323;
+	--c--theme--colors--greyscale-300: #292929;
+	--c--theme--colors--greyscale-400: #343434;
+	--c--theme--colors--greyscale-500: #404040;
+	--c--theme--colors--greyscale-600: #aaaaaa;
+	--c--theme--colors--greyscale-700: #cccccc;
+	--c--theme--colors--greyscale-800: #eeeeee;
+	--c--theme--colors--greyscale-900: #f7f7f7;
+	--c--theme--colors--danger-900: #FACED0;
+	--c--theme--colors--danger-800: #F7A9AD;
+	--c--theme--colors--danger-700: #F38389;
+	--c--theme--colors--danger-600: #F05E66;
+	--c--theme--colors--danger-500: #EC3942;
+	--c--theme--colors--danger-400: #D8151F;
+	--c--theme--colors--danger-300: #A51017;
+	--c--theme--colors--danger-200: #720B10;
+	--c--theme--colors--danger-100: #3F0609;
+	--c--theme--colors--info-900: #53A4FD;
+	--c--theme--colors--info-800: #2B8FFC;
+	--c--theme--colors--info-700: #047AFA;
+	--c--theme--colors--info-600: #0366D2;
+	--c--theme--colors--info-500: #0255AF;
+	--c--theme--colors--info-400: #02448C;
+	--c--theme--colors--info-300: #013368;
+	--c--theme--colors--info-200: #012245;
+	--c--theme--colors--info-100: #001122;
+	--c--theme--colors--success-900: #A9F7C0;
+	--c--theme--colors--success-800: #8DF4AC;
+	--c--theme--colors--success-700: #71F198;
+	--c--theme--colors--success-600: #55EF83;
+	--c--theme--colors--success-500: #39EC6F;
+	--c--theme--colors--success-400: #14CF4C;
+	--c--theme--colors--success-300: #0E9236;
+	--c--theme--colors--success-200: #085620;
+	--c--theme--colors--success-100: #021909;
+	--c--theme--colors--warning-900: #EAC88B;
+	--c--theme--colors--warning-800: #E4BA6D;
+	--c--theme--colors--warning-700: #DFAB4F;
+	--c--theme--colors--warning-600: #D99D31;
+	--c--theme--colors--warning-500: #B68121;
+	--c--theme--colors--warning-400: #8A621A;
+	--c--theme--colors--warning-300: #5F4412;
+	--c--theme--colors--warning-200: #34250A;
+	--c--theme--colors--warning-100: #090702;
+	--c--theme--font--families--base: Helvetica Neue,Segoe UI,Roboto,Ubuntu,sans-serif;
+	--c--theme--font--families--accent: Helvetica Neue,Segoe UI,Roboto,Ubuntu,sans-serif;
+	--c--components--button--border-radius: 0.1875rem;
+	--c--components--forms-input--border-radius: 0.1875rem;
+	--c--components--forms-input--border-color: var(--c--theme--colors--greyscale-500);
+	--c--components--forms-input--border-color--hover: var(--c--theme--colors--greyscale-600);
+	--c--components--forms-input--background-color: var(--c--theme--colors--greyscale-100);
+	--c--components--forms-input--label-color--focus: var(--c--theme--colors--greyscale-700);
+	--c--components--forms-select--border-radius: 0.1875rem;
+	--c--components--forms-select--border-color: var(--c--theme--colors--greyscale-500);
+	--c--components--forms-select--border-color--hover: var(--c--theme--colors--greyscale-600);
+	--c--components--forms-select--background-color: var(--c--theme--colors--greyscale-100);
+	--c--components--forms-select--border-color--focus: var(--c--theme--colors--greyscale-700);
+	--c--components--forms-select--label-color--focus: var(--c--theme--colors--greyscale-700);
+	--c--components--forms-select--menu-background-color: #191919;
+	--c--components--forms-select--item-background-color--selected: var(--c--theme--colors--primary-600);
+	--c--components--forms-datepicker--border-radius: 0.1875rem;
+	--c--components--forms-datepicker--border-color: var(--c--theme--colors--greyscale-500);
+	--c--components--forms-datepicker--border-color--hover: var(--c--theme--colors--greyscale-600);
+	--c--components--forms-datepicker--background-color: var(--c--theme--colors--greyscale-100);
+	--c--components--forms-datepicker--border-color--focus: var(--c--theme--colors--greyscale-700);
+	--c--components--forms-datepicker--label-color--focus: var(--c--theme--colors--greyscale-700);
+	--c--components--forms-datepicker--menu-background-color: #191919;
+	--c--components--forms-datepicker--grid-cell--border-color--today: var(--c--theme--colors--greyscale-800);
+	--c--components--forms-datepicker--grid-cell--color--today: var(--c--theme--colors--greyscale-800);
+	--c--components--forms-datepicker--range-selection-background-color: var(--c--theme--colors--primary-900);
+	--c--components--forms-datepicker--item-background-color--selected: var(--c--theme--colors--primary-600);
+	--c--components--forms-fileuploader--border-color: var(--c--theme--colors--greyscale-500);
+	--c--components--forms-fileuploader--border-color--hover: var(--c--theme--colors--greyscale-600);
+	--c--components--forms-fileuploader--background-color: var(--c--theme--colors--greyscale-100);
+	--c--components--forms-fileuploader--background-color--active: var(--c--theme--colors--greyscale-500);
+	--c--components--forms-fileuploader--accent-color: var(--c--theme--colors--greyscale-800);
+	--c--components--forms-textarea--border-radius: 0.1875rem;
+	--c--components--forms-textarea--border-color: var(--c--theme--colors--greyscale-500);
+	--c--components--forms-textarea--border-color--hover: var(--c--theme--colors--greyscale-600);
+	--c--components--forms-textarea--background-color: var(--c--theme--colors--greyscale-100);
+	--c--components--forms-textarea--border-color--focus: var(--c--theme--colors--greyscale-700);
+	--c--components--forms-textarea--label-color--focus: var(--c--theme--colors--greyscale-700);
+	--c--components--forms-checkbox--border-radius: 0.1875rem;
+	--c--components--forms-checkbox--accent-color: var(--c--theme--colors--greyscale-100);
+	--c--components--forms-checkbox--background-color: var(--c--theme--colors--greyscale-800);
+	--c--components--forms-switch--handle-border-radius: 0.3rem;
+	--c--components--forms-switch--rail-border-radius: 0.500rem;
+	--c--components--forms-switch--accent-color: var(--c--theme--colors--greyscale-800);
+	--c--components--forms-switch--handle-background-color: var(--c--theme--colors--greyscale-100);
+	--c--components--forms-switch--rail-background-color: var(--c--theme--colors--greyscale-400);
+	--c--components--forms-radio--accent-color: var(--c--theme--colors--greyscale-100);
+	--c--components--forms-radio--background-color: var(--c--theme--colors--greyscale-800);
+	--c--components--modal--border-radius: 0.1875rem;
+	--c--components--modal--background-color: #191919;
+	--c--components--card--border-radius: 0.1875rem;
+	--c--components--card--border-width: none;
+	--c--components--card--box-shadow: rgba(255, 220, 220, 0.05) 0px 0px 60px 10px;
+}

apps/demo/src/index.scss

@@ -84,6 +84,11 @@ html {
   }
 }
 
+html[data-theme="redflux"] {
+  background: #000000D7 url(redflux_bg.webp) 50%/cover no-repeat fixed;
+  background-blend-mode: darken;
+}
+
 // Create
 .page__create {
   h1 {