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

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