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

💄(demo) add blueney theme

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

110
apps/demo/cunningham.ts
View File

@@ -155,6 +155,116 @@ const defaultConfig: Configuration = {
},
},
},
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)",
},
},
},
},
};

BIN
apps/demo/public/blueney_bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

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

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

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

@@ -282,3 +282,80 @@
--c--components--card--border-width: none;
--c--components--card--box-shadow: rgba(255, 220, 220, 0.05) 0px 0px 60px 10px;
}
.cunningham-theme--blueney_dark{
--c--theme--colors--primary-text: #FFFFFF;
--c--theme--colors--primary-900: #53B0FF;
--c--theme--colors--primary-800: #39A4FF;
--c--theme--colors--primary-700: #2099FF;
--c--theme--colors--primary-600: #068DFF;
--c--theme--colors--primary-500: #0080EB;
--c--theme--colors--primary-400: #0072D2;
--c--theme--colors--primary-300: #00549A;
--c--theme--colors--primary-200: #003562;
--c--theme--colors--primary-100: #00172A;
--c--theme--colors--greyscale-900: #FAFAFC;
--c--theme--colors--greyscale-800: #DBDDE7;
--c--theme--colors--greyscale-700: #BCC0D3;
--c--theme--colors--greyscale-600: #9EA2BF;
--c--theme--colors--greyscale-500: #7F85AB;
--c--theme--colors--greyscale-400: #626995;
--c--theme--colors--greyscale-300: #4E5376;
--c--theme--colors--greyscale-200: #393E57;
--c--theme--colors--greyscale-100: #1B1D29;
--c--theme--colors--greyscale-000: #151823;
--c--theme--font--families--base: Avenir, sans-serif;
--c--theme--font--families--accent: Avenir, sans-serif;
--c--components--card--border-radius: 0.25rem;
--c--components--card--border-width: none;
--c--components--card--box-shadow: rgba(0, 0, 0, 0.69) 0px 26px 30px -10px, rgba(0, 0, 0, 0.73) 0px 16px 10px -10px;
--c--components--button--border-radius: 0.25rem;
--c--components--forms-input--border-radius: 0.25rem;
--c--components--forms-input--border-color: transparent;
--c--components--forms-input--border-color--hover: transparent;
--c--components--forms-input--border-color--focus: var(--c--theme--colors--greyscale-700);
--c--components--forms-input--background-color: var(--c--theme--colors--greyscale-200);
--c--components--forms-input--label-color--focus: var(--c--theme--colors--greyscale-700);
--c--components--forms-input--label-color: var(--c--theme--colors--greyscale-700);
--c--components--forms-select--border-radius: 0.25rem;
--c--components--forms-select--border-color: transparent;
--c--components--forms-select--border-color--hover: transparent;
--c--components--forms-select--border-color--focus: var(--c--theme--colors--greyscale-700);
--c--components--forms-select--background-color: var(--c--theme--colors--greyscale-200);
--c--components--forms-select--label-color--focus: var(--c--theme--colors--greyscale-700);
--c--components--forms-select--menu-background-color: var(--c--theme--colors--greyscale-200);
--c--components--forms-select--item-background-color--hover: var(--c--theme--colors--greyscale-300);
--c--components--forms-select--item-background-color--selected: var(--c--theme--colors--primary-400);
--c--components--forms-datepicker--border-radius: 0.25rem;
--c--components--forms-datepicker--border-color: transparent;
--c--components--forms-datepicker--border-color--hover: transparent;
--c--components--forms-datepicker--border-color--focus: var(--c--theme--colors--greyscale-700);
--c--components--forms-datepicker--background-color: var(--c--theme--colors--greyscale-200);
--c--components--forms-datepicker--label-color--focus: var(--c--theme--colors--greyscale-700);
--c--components--forms-datepicker--menu-background-color: var(--c--theme--colors--greyscale-200);
--c--components--forms-datepicker--grid-cell--border-color--today: var(--c--theme--colors--greyscale-500);
--c--components--forms-datepicker--grid-cell--color--today: var(--c--theme--colors--greyscale-700);
--c--components--forms-datepicker--grid-cell--color--selected: var(--c--theme--colors--primary-600);
--c--components--forms-datepicker--range-selection-background-color: var(--c--theme--colors--primary-100);
--c--components--forms-datepicker--item-background-color--hover: var(--c--theme--colors--greyscale-300);
--c--components--forms-datepicker--item-background-color--selected: var(--c--theme--colors--primary-400);
--c--components--forms-fileuploader--background-color: var(--c--theme--colors--greyscale-200);
--c--components--forms-fileuploader--background-color--active: var(--c--theme--colors--greyscale-300);
--c--components--forms-fileuploader--border-color: transparent;
--c--components--forms-textarea--border-color: transparent;
--c--components--forms-textarea--border-color--hover: transparent;
--c--components--forms-textarea--border-color--focus: var(--c--theme--colors--greyscale-700);
--c--components--forms-textarea--border-radius: 0.25rem;
--c--components--forms-textarea--background-color: var(--c--theme--colors--greyscale-200);
--c--components--forms-textarea--label-color--focus: var(--c--theme--colors--greyscale-700);
--c--components--forms-checkbox--border-radius: 0.25rem;
--c--components--forms-checkbox--border-color: var(--c--theme--colors--greyscale-300);
--c--components--forms-checkbox--accent-color: var(--c--theme--colors--greyscale-900);
--c--components--forms-checkbox--background-color: var(--c--theme--colors--greyscale-200);
--c--components--forms-switch--rail-background-color: var(--c--theme--colors--greyscale-200);
--c--components--forms-switch--accent-color: var(--c--theme--colors--primary-400);
--c--components--forms-radio--border-color: var(--c--theme--colors--greyscale-300);
--c--components--forms-radio--accent-color: var(--c--theme--colors--greyscale-900);
--c--components--forms-radio--background-color: var(--c--theme--colors--greyscale-200);
--c--components--modal--border-radius: 0.25rem;
--c--components--modal--background-color: var(--c--theme--colors--greyscale-100);
}

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

File diff suppressed because one or more lines are too long

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

@@ -46,9 +46,9 @@ html {
.card {
background-color: var(--c--theme--colors--greyscale-000);
padding: 2rem;
border-radius: 4px;
border: 1px var(--c--theme--colors--greyscale-300) solid;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
border-radius: var(--c--components--card--border-radius, 4px);
border: var(--c--components--card--border-width, 1px) var(--c--theme--colors--greyscale-300) solid;
box-shadow: var(--c--components--card--box-shadow, rgba(149, 157, 165, 0.2) 0px 8px 24px);
}
.cunningham-theme--dark {
@@ -89,6 +89,10 @@ html[data-theme="redflux"] {
background-blend-mode: darken;
}
html[data-theme="blueney"] {
background: url(blueney_bg.jpg) 50%/cover no-repeat fixed;
}
// Create
.page__create {
h1 {