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