mirrors/movie-web
1
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-28 08:36:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix all reworked theme issues

Browse source
This commit is contained in:
mrjvs 2023-12-09 16:01:52 +01:00
parent 3fa7a5ef27
commit ac8a653dc0
1 changed files with 26 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
themes/default.ts
View file

@ -58,15 +58,15 @@ const tokens = {
c900: "#160B22" c900: "#160B22"
}, },
ash: { ash: {
c50: "#86869A", c50: "#7F8D9B",
c100: "#616174", c100: "#5B6B7B",
c200: "#4A4A5B", c200: "#445464",
c300: "#3B3B4B", c300: "#2B3D4E",
c400: "#2E2E3D", c400: "#203242",
c500: "#252533", c500: "#1C2C3C",
c600: "#21212F", c600: "#172532",
c700: "#151D29", c700: "#131E29",
c800: "#0F1720", c800: "#101820",
c900: "#0C1216" c900: "#0C1216"
}, },
shade: { shade: {
@ -83,13 +83,6 @@ const tokens = {
} }
} }
/*
flare of media cards is very desatured (also on context menu)
app information labels are too purple
save bar needs more distinction from background
all ash colors need repicking
*/
export const defaultTheme = { export const defaultTheme = {
extend: { extend: {
colors: { colors: {
@ -150,12 +143,12 @@ export const defaultTheme = {
logo: tokens.purple.c100, logo: tokens.purple.c100,
emphasis: tokens.white, emphasis: tokens.white,
text: tokens.shade.c50, text: tokens.shade.c50,
dimmed: tokens.blue.c100, dimmed: tokens.shade.c50,
divider: tokens.ash.c500, divider: tokens.ash.c500,
secondary: tokens.ash.c100, secondary: tokens.ash.c100,
danger: tokens.semantic.red.c100, danger: tokens.semantic.red.c100,
link: tokens.purple.c100, link: tokens.purple.c100,
linkHover: tokens.purple.c100, // TODO linkHover: tokens.purple.c50,
}, },
// search bar // search bar
@ -169,8 +162,8 @@ export const defaultTheme = {
// media cards // media cards
mediaCard: { mediaCard: {
hoverBackground: tokens.shade.c700, hoverBackground: tokens.shade.c600,
hoverAccent: tokens.semantic.silver.c400, hoverAccent: tokens.shade.c50,
hoverShadow: tokens.shade.c900, hoverShadow: tokens.shade.c900,
shadow: tokens.shade.c700, shadow: tokens.shade.c700,
barColor: tokens.ash.c200, barColor: tokens.ash.c200,
@ -193,7 +186,7 @@ export const defaultTheme = {
highlight: tokens.semantic.yellow.c400, highlight: tokens.semantic.yellow.c400,
highlightHover: tokens.semantic.yellow.c200, highlightHover: tokens.semantic.yellow.c200,
text: tokens.shade.c50, text: tokens.shade.c50,
secondary: tokens.shade.c50, // TODO secondary: tokens.shade.c100,
border: tokens.shade.c400, border: tokens.shade.c400,
contentBackground: tokens.shade.c500, contentBackground: tokens.shade.c500,
}, },
@ -202,8 +195,8 @@ export const defaultTheme = {
authentication: { authentication: {
border: tokens.shade.c300, border: tokens.shade.c300,
inputBg: tokens.shade.c600, inputBg: tokens.shade.c600,
inputBgHover: tokens.shade.c600, // TODO inputBgHover: tokens.shade.c500,
wordBackground: tokens.shade.c600, // TODO wordBackground: tokens.shade.c500,
copyText: tokens.shade.c100, copyText: tokens.shade.c100,
copyTextHover: tokens.ash.c50, copyTextHover: tokens.ash.c50,
errorText: tokens.semantic.rose.c100, errorText: tokens.semantic.rose.c100,
@ -217,21 +210,21 @@ export const defaultTheme = {
type: { type: {
secondary: tokens.shade.c200, secondary: tokens.shade.c200,
inactive: tokens.blue.c100, inactive: tokens.shade.c50,
icon: tokens.blue.c100, // TODO icon: tokens.shade.c50,
iconActivated: tokens.purple.c400, iconActivated: tokens.purple.c200,
activated: tokens.purple.c50, activated: tokens.purple.c50,
}, },
}, },
card: { card: {
border: tokens.shade.c400, // TODO border: tokens.shade.c400,
background: tokens.shade.c400, background: tokens.shade.c400,
altBackground: tokens.shade.c400, altBackground: tokens.shade.c400,
}, },
saveBar: { saveBar: {
background: tokens.blue.c900 background: tokens.shade.c800
} }
}, },
@ -263,7 +256,7 @@ export const defaultTheme = {
}, },
progress: { progress: {
background: tokens.ash.c50, // TODO background: tokens.ash.c50,
preloaded: tokens.ash.c50, preloaded: tokens.ash.c50,
filled: tokens.purple.c200, filled: tokens.purple.c200,
}, },
@ -291,12 +284,12 @@ export const defaultTheme = {
context: { context: {
background: tokens.ash.c900, background: tokens.ash.c900,
light: tokens.semantic.silver.c400, light: tokens.shade.c50,
border: tokens.ash.c600, border: tokens.ash.c600,
hoverColor: tokens.ash.c500, hoverColor: tokens.ash.c600,
buttonFocus: tokens.ash.c500, buttonFocus: tokens.ash.c500,
flagBg: tokens.ash.c500, // TODO flagBg: tokens.ash.c500,
inputBg: tokens.ash.c700, inputBg: tokens.ash.c600,
buttonOverInputHover: tokens.ash.c500, buttonOverInputHover: tokens.ash.c500,
inputPlaceholder: tokens.ash.c200, inputPlaceholder: tokens.ash.c200,
cardBorder: tokens.ash.c700, cardBorder: tokens.ash.c700,