From aba12370f3226e046041022da628f15d72ca0239 Mon Sep 17 00:00:00 2001
From: Boidushya Bhattacharya <boidushyabhattacharya@gmail.com>
Date: Sun, 4 Feb 2024 01:19:01 +0530
Subject: [PATCH 1/2] fix(settings/appearance): improved 'Active' pill

---
 src/pages/parts/settings/ThemePart.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/parts/settings/ThemePart.tsx b/src/pages/parts/settings/ThemePart.tsx
index 50a22b1c..b6b07209 100644
--- a/src/pages/parts/settings/ThemePart.tsx
+++ b/src/pages/parts/settings/ThemePart.tsx
@@ -104,7 +104,7 @@ function ThemePreview(props: {
         <span className="font-medium text-white">{props.name}</span>
         <span
           className={classNames(
-            "inline-block px-3 text-sm transition-opacity duration-150 rounded-full bg-[#27182F] text-white",
+            "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]",
             props.active ? "opacity-100" : "opacity-0 pointer-events-none",
           )}
         >

From d4ba87f95e1672cd612295d00d03cf56480611ff Mon Sep 17 00:00:00 2001
From: Boidushya Bhattacharya <boidushyabhattacharya@gmail.com>
Date: Sun, 4 Feb 2024 02:52:24 +0530
Subject: [PATCH 2/2] fix(settings/appearance): Removed inset-shadow & created
 new theme variable

---
 src/pages/parts/settings/ThemePart.tsx | 2 +-
 themes/default.ts                      | 2 ++
 themes/list/blue.ts                    | 4 +++-
 themes/list/gray.ts                    | 4 +++-
 themes/list/red.ts                     | 4 +++-
 themes/list/teal.ts                    | 4 +++-
 6 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/pages/parts/settings/ThemePart.tsx b/src/pages/parts/settings/ThemePart.tsx
index b6b07209..264c5b40 100644
--- a/src/pages/parts/settings/ThemePart.tsx
+++ b/src/pages/parts/settings/ThemePart.tsx
@@ -104,7 +104,7 @@ function ThemePreview(props: {
         <span className="font-medium text-white">{props.name}</span>
         <span
           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",
           )}
         >
diff --git a/themes/default.ts b/themes/default.ts
index c4495a0e..c7d32617 100644
--- a/themes/default.ts
+++ b/themes/default.ts
@@ -97,6 +97,8 @@ export const defaultTheme = {
         background: tokens.shade.c300,
         backgroundHover: tokens.shade.c200,
         highlight: tokens.blue.c200,
+
+        activeBackground: tokens.shade.c300,
       },
       
       // meta data for the theme itself
diff --git a/themes/list/blue.ts b/themes/list/blue.ts
index 2cb43766..4266b3c3 100644
--- a/themes/list/blue.ts
+++ b/themes/list/blue.ts
@@ -63,7 +63,9 @@ export default createTheme({
       pill: {
         background: tokens.shade.c300,
         backgroundHover: tokens.shade.c200,
-        highlight: tokens.blue.c200
+        highlight: tokens.blue.c200,
+
+        activeBackground: tokens.shade.c300,
       },
 
       global: {
diff --git a/themes/list/gray.ts b/themes/list/gray.ts
index c6c0144d..bf37f20f 100644
--- a/themes/list/gray.ts
+++ b/themes/list/gray.ts
@@ -63,7 +63,9 @@ export default createTheme({
       pill: {
         background: tokens.shade.c300,
         backgroundHover: tokens.shade.c200,
-        highlight: tokens.blue.c200
+        highlight: tokens.blue.c200,
+
+        activeBackground: tokens.shade.c300,
       },
 
       global: {
diff --git a/themes/list/red.ts b/themes/list/red.ts
index 0ec319e8..5b6fcb44 100644
--- a/themes/list/red.ts
+++ b/themes/list/red.ts
@@ -63,7 +63,9 @@ export default createTheme({
       pill: {
         background: tokens.shade.c300,
         backgroundHover: tokens.shade.c200,
-        highlight: tokens.blue.c200
+        highlight: tokens.blue.c200,
+
+        activeBackground: tokens.shade.c300,
       },
 
       global: {
diff --git a/themes/list/teal.ts b/themes/list/teal.ts
index 1fb66ac4..ea0f1323 100644
--- a/themes/list/teal.ts
+++ b/themes/list/teal.ts
@@ -63,7 +63,9 @@ export default createTheme({
       pill: {
         background: tokens.shade.c300,
         backgroundHover: tokens.shade.c200,
-        highlight: tokens.blue.c200
+        highlight: tokens.blue.c200,
+
+        activeBackground: tokens.shade.c300,
       },
 
       global: {