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

💄(demo) add reflux theme

Browse Source 
Add a dark theme inspired by a famous streaming platform
with red tint.
This commit is contained in:
jbpenrath
2024-02-14 00:44:33 +01:00
committed by Jean-Baptiste PENRATH
parent cd476ae82b
commit 270357bc7e
6 changed files with 289 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
apps/demo/cunningham.ts
View File

@@ -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;

BIN
apps/demo/public/redflux_bg.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 383 KiB

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

@@ -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 {

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

@@ -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;
}

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

File diff suppressed because one or more lines are too long

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

@@ -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 {