fix(settings/appearance): Removed inset-shadow & created new theme variable

This commit is contained in:
Boidushya Bhattacharya 2024-02-04 02:52:24 +05:30
parent aba12370f3
commit d4ba87f95e
6 changed files with 15 additions and 5 deletions

View File

@ -104,7 +104,7 @@ function ThemePreview(props: {
<span className="font-medium text-white">{props.name}</span> <span className="font-medium text-white">{props.name}</span>
<span <span
className={classNames( className={classNames(
"inline-block px-3 py-1 leading-tight text-sm transition-opacity duration-150 rounded-full bg-pill-background text-white/85 shadow-[rgba(255,255,255,0.15)_0_1px_0_inset,rgba(46,54,80,0.075)_0_1px_1px]", "inline-block px-3 py-1 leading-tight text-sm transition-opacity duration-150 rounded-full bg-pill-activeBackground text-white/85",
props.active ? "opacity-100" : "opacity-0 pointer-events-none", props.active ? "opacity-100" : "opacity-0 pointer-events-none",
)} )}
> >

View File

@ -97,6 +97,8 @@ export const defaultTheme = {
background: tokens.shade.c300, background: tokens.shade.c300,
backgroundHover: tokens.shade.c200, backgroundHover: tokens.shade.c200,
highlight: tokens.blue.c200, highlight: tokens.blue.c200,
activeBackground: tokens.shade.c300,
}, },
// meta data for the theme itself // meta data for the theme itself

View File

@ -63,7 +63,9 @@ export default createTheme({
pill: { pill: {
background: tokens.shade.c300, background: tokens.shade.c300,
backgroundHover: tokens.shade.c200, backgroundHover: tokens.shade.c200,
highlight: tokens.blue.c200 highlight: tokens.blue.c200,
activeBackground: tokens.shade.c300,
}, },
global: { global: {

View File

@ -63,7 +63,9 @@ export default createTheme({
pill: { pill: {
background: tokens.shade.c300, background: tokens.shade.c300,
backgroundHover: tokens.shade.c200, backgroundHover: tokens.shade.c200,
highlight: tokens.blue.c200 highlight: tokens.blue.c200,
activeBackground: tokens.shade.c300,
}, },
global: { global: {

View File

@ -63,7 +63,9 @@ export default createTheme({
pill: { pill: {
background: tokens.shade.c300, background: tokens.shade.c300,
backgroundHover: tokens.shade.c200, backgroundHover: tokens.shade.c200,
highlight: tokens.blue.c200 highlight: tokens.blue.c200,
activeBackground: tokens.shade.c300,
}, },
global: { global: {

View File

@ -63,7 +63,9 @@ export default createTheme({
pill: { pill: {
background: tokens.shade.c300, background: tokens.shade.c300,
backgroundHover: tokens.shade.c200, backgroundHover: tokens.shade.c200,
highlight: tokens.blue.c200 highlight: tokens.blue.c200,
activeBackground: tokens.shade.c300,
}, },
global: { global: {