From dcd1a6b5433ce8606a41fbddd38e2924f1dcceb3 Mon Sep 17 00:00:00 2001
From: Lesley Norton <lesley@mozilla.com>
Date: Thu, 26 Sep 2024 14:23:25 -0500
Subject: [PATCH] Fix toggle colors and add interaction states

---
 src/components/vpncard.js | 22 ++++++++++++++++++++--
 src/ui/variables.css      | 12 +++++++++++-
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/components/vpncard.js b/src/components/vpncard.js
index efc1bc6..e658815 100644
--- 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
index cbaf1c5..0f3be3c 100644
--- 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(