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

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 {