Fix toggle colors and add interaction states

mozilla-extensions · Sep 26, 2024 · dcd1a6b · dcd1a6b
1 parent e9d0fb4
commit dcd1a6b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/src/components/vpncard.js b/src/components/vpncard.js
@@ -265,12 +265,30 @@ export class VPNCard extends LitElement {
       height: 24px;
       border-radius: 30px;
       border: none;
-      background: #6d6d6e;
+      background-color: var(--color-disabled);
       position: relative;
+      transition: background-color 0.2s ease;
+    }
+
+    .pill:hover {
+      background-color: var(--color-disabled-hover);
+    }
+
+    .pill:active {
+      background-color: var(--color-disabled-active);
     }
     .on .pill {
-      background: var(--color-enabled);
+      background-color: var(--color-enabled);
     }
+
+    .on .pill:hover {
+      background-color: var(--color-enabled-hover);
+    }
+
+    .on .pill:active {
+      background-color: var(--color-enabled-active);
+    }
+
     .pill::before {
       content: " ";
       background: white;

diff --git a/src/ui/variables.css b/src/ui/variables.css
@@ -36,11 +36,21 @@
   --font-family: "Inter Regular";
   --font-family-semi-bold: "Inter Semi Bold";
   --font-family-bold: "Inter Bold";
-  --color-enabled: #3fe1b0;
+  --color-enabled: var(--green50);
+  --color-enabled-hover: var(--green60);
+  --color-enabled-active: var(--green70);
+  --color-disabled: var(--grey30);
+  --color-disabled-hover: var(--grey40);
+  --color-disabled-active: var(--grey50);
   --color-warning: #ffa436;
   --color-fatal-error: #ff6a75;
   --color-divider: #e7e7e7;
+  --green50: #3fe1b0;
+  --green60: #3ad4b3;
+  --green70: #1cc4a0;
+  --grey30: #9e9e9e;
   --grey40: #6d6d6e;
+  --grey50: #3d3d3d;
   --main-card-background: #321c64;
   --main-card-text-color: white;
   --main-card--pill-background: lch(