mirror of
https://github.com/sussy-code/smov.git
synced 2024-12-20 14:37:43 +01:00
Fix all reworked theme issues
This commit is contained in:
mrjvs
parent
3fa7a5ef27
commit
ac8a653dc0
1 changed files with 26 additions and 33 deletions
|
|
@ -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,
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue