From bd7a0492f75cb95a936f710b018dec318fefe041 Mon Sep 17 00:00:00 2001
From: Nikki Sharpley <nsharpley@mozilla.com>
Date: Mon, 24 Jul 2023 11:42:44 -0400
Subject: [PATCH 1/7] replace tool bar accents

---
 src/react-components/input/ToolbarButton.scss | 55 +++++++++----------
 src/react-components/styles/global.scss       |  5 --
 themes.json                                   |  9 +--
 3 files changed, 29 insertions(+), 40 deletions(-)

diff --git a/src/react-components/input/ToolbarButton.scss b/src/react-components/input/ToolbarButton.scss
index b7dd343016..1c97188bb3 100644
--- a/src/react-components/input/ToolbarButton.scss
+++ b/src/react-components/input/ToolbarButton.scss
@@ -1,4 +1,4 @@
-@use '../styles/theme';
+@use "../styles/theme";
 
 :local(.toolbar-button) {
   border: none;
@@ -43,11 +43,11 @@
   svg {
     color: theme.$toolbar-icon-color;
 
-    *[stroke=\#000] {
+    *[stroke="\#000"] {
       transition: stroke 0.1s ease-in-out;
     }
 
-    *[fill=\#000] {
+    *[fill="\#000"] {
       transition: fill 0.1s ease-in-out;
     }
   }
@@ -58,10 +58,11 @@
   height: 96px;
 }
 
-:local(.basic), :local(.transparent) {
+:local(.basic),
+:local(.transparent) {
   :local(.icon-container) {
     border-color: theme.$toolbar-basic-border-color;
-    background-color: theme.$transparent;;
+    background-color: theme.$transparent;
     svg {
       color: theme.$toolbar-basic-icon-color;
     }
@@ -113,7 +114,7 @@
         background-color: theme.$toolbar-basic-color-hover;
       }
     }
-  
+
     &:active {
       :local(.icon-container) {
         background-color: theme.$toolbar-basic-color-pressed;
@@ -186,7 +187,7 @@
         }
       }
     }
-  
+
     &:active {
       :local(.icon-container) {
         border-color: theme.$primary-color-pressed;
@@ -199,7 +200,6 @@
   }
 }
 
-
 :local(.accept) {
   :local(.icon-container) {
     background-color: theme.$accept-color;
@@ -211,7 +211,7 @@
         color: theme.$disabled-icon-color;
       }
     }
-  }  
+  }
 
   &:hover :local(.icon-container) {
     background-color: theme.$accept-color-hover;
@@ -251,7 +251,7 @@
         }
       }
     }
-  
+
     &:active {
       :local(.icon-container) {
         border-color: theme.$accept-color-pressed;
@@ -274,7 +274,7 @@
         color: theme.$disabled-icon-color;
       }
     }
-  }  
+  }
 
   &:hover :local(.icon-container) {
     background-color: theme.$cancel-color-hover;
@@ -314,7 +314,7 @@
         }
       }
     }
-  
+
     &:active {
       :local(.icon-container) {
         border-color: theme.$cancel-color-pressed;
@@ -338,7 +338,7 @@
         color: theme.$disabled-icon-color;
       }
     }
-  }  
+  }
 
   &:hover :local(.icon-container) {
     background-color: theme.$accent1-color-hover;
@@ -364,7 +364,7 @@
     }
 
     label {
-      color: theme.$toolbar-label-accent1;
+      color: theme.$accent1-color;
     }
 
     &:hover {
@@ -383,7 +383,7 @@
         }
       }
     }
-  
+
     &:active {
       :local(.icon-container) {
         border-color: theme.$accent1-color-pressed;
@@ -407,7 +407,7 @@
         color: theme.$disabled-icon-color;
       }
     }
-  }  
+  }
 
   &:hover :local(.icon-container) {
     background-color: theme.$accent2-color-hover;
@@ -435,7 +435,7 @@
     }
 
     label {
-      color: theme.$toolbar-label-accent2;
+      color: theme.$accent2-color;
     }
 
     &:hover {
@@ -447,7 +447,7 @@
         }
       }
     }
-  
+
     &:active {
       :local(.icon-container) {
         border-color: theme.$accent2-color-pressed;
@@ -471,7 +471,7 @@
         color: theme.$disabled-icon-color;
       }
     }
-  }  
+  }
 
   &:hover :local(.icon-container) {
     background-color: theme.$accent3-color-hover;
@@ -499,7 +499,7 @@
     }
 
     label {
-      color: theme.$toolbar-label-accent3;
+      color: theme.$accent3-color;
     }
 
     &:hover {
@@ -511,7 +511,7 @@
         }
       }
     }
-  
+
     &:active {
       :local(.icon-container) {
         border-color: theme.$accent3-color-pressed;
@@ -563,7 +563,7 @@
     }
 
     label {
-      color: theme.$toolbar-label-accent4;
+      color: theme.$accent4-color;
     }
 
     &:hover {
@@ -575,7 +575,7 @@
         }
       }
     }
-  
+
     &:active {
       :local(.icon-container) {
         border-color: theme.$accent4-color-pressed;
@@ -599,7 +599,7 @@
         color: theme.$disabled-icon-color;
       }
     }
-  }  
+  }
 
   &:hover :local(.icon-container) {
     background-color: theme.$accent5-color-hover;
@@ -627,7 +627,7 @@
     }
 
     label {
-      color: theme.$toolbar-label-accent5;   
+      color: theme.$accent5-color;
     }
 
     &:hover {
@@ -639,7 +639,7 @@
         }
       }
     }
-  
+
     &:active {
       :local(.icon-container) {
         border-color: theme.$accent5-color-pressed;
@@ -667,7 +667,6 @@
   background-color: theme.$status-disabled-color;
 }
 
-
 :local(.status-unread) {
   background-color: theme.$status-unread-color;
 }
@@ -682,7 +681,7 @@
     border-radius: 0px;
     border-top-left-radius: 9999px;
     border-bottom-left-radius: 9999px;
-  } 
+  }
 }
 
 :local(.middle) {
diff --git a/src/react-components/styles/global.scss b/src/react-components/styles/global.scss
index 2a21ededdc..3a20f86cc8 100644
--- a/src/react-components/styles/global.scss
+++ b/src/react-components/styles/global.scss
@@ -170,11 +170,6 @@
   --toolbar-basic-color-hover: var(--secondary-color-hover);
   --toolbar-basic-color-pressed: var(--secondary-color-pressed);
   --toolbar-basic-border-color: var(--basic-border-color);
-  --toolbar-label-accent1: var(--accent1-color);
-  --toolbar-label-accent2: var(--accent2-color);
-  --toolbar-label-accent3: var(--accent3-color);
-  --toolbar-label-accent4: var(--accent4-color);
-  --toolbar-label-accent5: var(--accent5-color);
 
   --tile-text-color: var(--text4-color);
   --tile-bg-color: var(--secondary-color);
diff --git a/themes.json b/themes.json
index 80fd38c68a..dfadd6edba 100644
--- a/themes.json
+++ b/themes.json
@@ -5,7 +5,7 @@
     "name": "Hubs Default",
     "variables": {}
   },
-  {   
+  {
     "name": "Hubs Dark Mode",
     "id": "hubs-dark-mode",
     "darkModeDefault": true,
@@ -79,12 +79,7 @@
       "toolbar-icon-selected-bg": "#ffffff",
       "toolbar-basic-icon-color": "#ffffff",
       "toolbar-basic-selected-icon-color": "#2B313B",
-      "toolbar-basic-color-hover": "#ffffff",
-      "toolbar-label-accent1": "#ffffff",
-      "toolbar-label-accent2": "#ffffff",
-      "toolbar-label-accent3": "#ffffff",
-      "toolbar-label-accent4": "#ffffff",
-      "toolbar-label-accent5": "#ffffff"
+      "toolbar-basic-color-hover": "#ffffff"
     }
   }
 ]

From 2cce209845d828c4f0d719865ff29f120aac9163 Mon Sep 17 00:00:00 2001
From: Nikki Sharpley <nsharpley@mozilla.com>
Date: Mon, 24 Jul 2023 11:59:40 -0400
Subject: [PATCH 2/7] fix button border colors

---
 src/react-components/input/Button.scss | 8 ++++----
 src/react-components/styles/theme.scss | 5 -----
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/react-components/input/Button.scss b/src/react-components/input/Button.scss
index ca3bb71701..fa27af3771 100644
--- a/src/react-components/input/Button.scss
+++ b/src/react-components/input/Button.scss
@@ -80,7 +80,6 @@
   &:hover {
     color: theme.$text5-color-hover;
     background-color: theme.$accept-color-hover;
-    border: 2px solid theme.$accept-border-color;
   }
 
   &:active {
@@ -92,6 +91,7 @@
 :local(.cancel) {
   color: theme.$text5-color;
   background-color: theme.$cancel-color;
+  border: 2px solid theme.$cancel-color;
 
   svg {
     color: theme.$text5-color;
@@ -111,6 +111,7 @@
 :local(.accent1) {
   color: theme.$text5-color;
   background-color: theme.$accent1-color;
+  border: 2px solid theme.$accent1-border-color;
 
   svg {
     color: theme.$text5-color;
@@ -139,7 +140,6 @@
   &:hover {
     color: theme.$text5-color-hover;
     background-color: theme.$accent2-color-hover;
-    border: 2px solid theme.$accent2-border-color;
   }
 
   &:active {
@@ -151,6 +151,7 @@
 :local(.accent3) {
   color: theme.$text5-color;
   background-color: theme.$accent3-color;
+  border: 2px solid theme.$accent3-border-color;
 
   svg {
     color: theme.$text5-color;
@@ -179,7 +180,6 @@
   &:hover {
     color: theme.$text5-color-hover;
     background-color: theme.$accent4-color-hover;
-    border: 2px solid theme.$accent4-border-color;
   }
 
   &:active {
@@ -200,7 +200,6 @@
   &:hover {
     color: theme.$text5-color-hover;
     background-color: theme.$accent5-color-hover;
-    border: 2px solid theme.$accent5-border-color;
   }
 
   &:active {
@@ -212,6 +211,7 @@
 :local(.accent6) {
   color: theme.$text5-color;
   background-color: theme.$accent6-color;
+  border: 2px solid theme.$accent6-color;
 
   svg {
     color: theme.$text5-color;
diff --git a/src/react-components/styles/theme.scss b/src/react-components/styles/theme.scss
index 38a2cc3435..57a629cae8 100644
--- a/src/react-components/styles/theme.scss
+++ b/src/react-components/styles/theme.scss
@@ -256,11 +256,6 @@ $toolbar-basic-color: var(--toolbar-basic-color);
 $toolbar-basic-color-hover: var(--toolbar-basic-color-hover);
 $toolbar-basic-color-pressed: var(--toolbar-basic-color-pressed);
 $toolbar-basic-border-color: var(--toolbar-basic-border-color);
-$toolbar-label-accent1: var(--toolbar-label-accent1);
-$toolbar-label-accent2: var(--toolbar-label-accent2);
-$toolbar-label-accent3: var(--toolbar-label-accent3);
-$toolbar-label-accent4: var(--toolbar-label-accent4);
-$toolbar-label-accent5: var(--toolbar-label-accent5);
 
 $tile-text-color: var(--tile-text-color);
 $tile-bg-color: var(--tile-bg-color);

From 8144a3a862a883bc714e9fb564690cc50b6caff1 Mon Sep 17 00:00:00 2001
From: Nikki Sharpley <nsharpley@mozilla.com>
Date: Mon, 24 Jul 2023 12:04:40 -0400
Subject: [PATCH 3/7] remove and replace status colors

---
 src/react-components/input/ToolbarButton.scss |  8 ++++----
 src/react-components/layout/RoomLayout.scss   | 12 ++++++------
 src/react-components/styles/global.scss       |  5 -----
 src/react-components/styles/theme.scss        |  5 -----
 4 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/src/react-components/input/ToolbarButton.scss b/src/react-components/input/ToolbarButton.scss
index 1c97188bb3..723867f905 100644
--- a/src/react-components/input/ToolbarButton.scss
+++ b/src/react-components/input/ToolbarButton.scss
@@ -660,19 +660,19 @@
 }
 
 :local(.status-enabled) {
-  background-color: theme.$status-enabled-color;
+  background-color: theme.$accept-color;
 }
 
 :local(.status-disabled) {
-  background-color: theme.$status-disabled-color;
+  background-color: theme.$cancel-color;
 }
 
 :local(.status-unread) {
-  background-color: theme.$status-unread-color;
+  background-color: theme.$orange;
 }
 
 :local(.status-recording) {
-  background-color: theme.$status-recording-color;
+  background-color: theme.$red;
 }
 
 :local(.left) {
diff --git a/src/react-components/layout/RoomLayout.scss b/src/react-components/layout/RoomLayout.scss
index 12f70fe626..0064885293 100644
--- a/src/react-components/layout/RoomLayout.scss
+++ b/src/react-components/layout/RoomLayout.scss
@@ -7,8 +7,8 @@
   grid-template-columns:
     [main] auto
     [sidebar] minmax(0, min-content);
-  
-  grid-template-rows: 
+
+  grid-template-rows:
     [viewport] auto
     [toolbar] min-content;
 
@@ -27,7 +27,7 @@
   overflow: hidden;
   width: 450px;
 
-  @media(max-width: theme.$breakpoint-lg - 1), (max-height: theme.$breakpoint-vr - 1) {
+  @media (max-width: theme.$breakpoint-lg - 1), (max-height: theme.$breakpoint-vr - 1) {
     position: fixed;
     top: 0;
     left: 0;
@@ -81,7 +81,7 @@
 }
 
 :local(.object-focused) {
-  @media(max-width: theme.$breakpoint-lg - 1), (max-height: theme.$breakpoint-vr - 1) {
+  @media (max-width: theme.$breakpoint-lg - 1), (max-height: theme.$breakpoint-vr - 1) {
     :local(.toolbar) {
       display: none;
     }
@@ -93,5 +93,5 @@
 }
 
 :local(.streaming) {
-  box-shadow: inset 0 0 0 3px theme.$status-recording-color;
-}
\ No newline at end of file
+  box-shadow: inset 0 0 0 3px theme.$red;
+}
diff --git a/src/react-components/styles/global.scss b/src/react-components/styles/global.scss
index 3a20f86cc8..f347863296 100644
--- a/src/react-components/styles/global.scss
+++ b/src/react-components/styles/global.scss
@@ -152,11 +152,6 @@
   --error-color-hover: var(--cancel-color-hover);
   --error-color-pressed: var(--cancel-color-pressed);
 
-  --status-unread-color: #{theme.$orange};
-  --status-recording-color: #{theme.$red};
-  --status-enabled-color: var(--accept-color);
-  --status-disabled-color: var(--cancel-color);
-
   --overlay-bg-color: rgba(0, 0, 0, 0.5);
   --overlay-text-color: #{theme.$white};
   --overlay-border-color: #{theme.$grey};
diff --git a/src/react-components/styles/theme.scss b/src/react-components/styles/theme.scss
index 57a629cae8..b78f2354b5 100644
--- a/src/react-components/styles/theme.scss
+++ b/src/react-components/styles/theme.scss
@@ -238,11 +238,6 @@ $error-color: var(--error-color);
 $error-color-hover: var(--error-color-hover);
 $error-color-pressed: var(--error-color-pressed);
 
-$status-unread-color: var(--status-unread-color);
-$status-recording-color: var(--status-recording-color);
-$status-enabled-color: var(--status-enabled-color);
-$status-disabled-color: var(--status-disabled-color);
-
 $overlay-bg-color: var(--overlay-bg-color);
 $overlay-text-color: var(--overlay-text-color);
 $overlay-border-color: var(--overlay-border-color);

From 8352aae6a2937cc63e77bbbdf6afc5b1f866eb23 Mon Sep 17 00:00:00 2001
From: Nikki Sharpley <nsharpley@mozilla.com>
Date: Mon, 24 Jul 2023 13:50:00 -0400
Subject: [PATCH 4/7] remove need for tip variables

---
 src/react-components/room/Tip.scss      | 14 +++++++-------
 src/react-components/styles/global.scss |  6 ------
 src/react-components/styles/theme.scss  |  6 ------
 3 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/src/react-components/room/Tip.scss b/src/react-components/room/Tip.scss
index 882f0ebcfc..573c0723aa 100644
--- a/src/react-components/room/Tip.scss
+++ b/src/react-components/room/Tip.scss
@@ -3,10 +3,10 @@
 :local(.tip) {
   pointer-events: all;
   min-height: 48px;
-  background-color: theme.$tip-bg-color;
+  background-color: theme.$accent4-color;
   border-radius: 16px;
   display: flex;
-  color: theme.$tip-text-color;
+  color: theme.$text4-color;
   align-items: center;
 
   @media (min-width: theme.$breakpoint-lg) and (min-height: theme.$breakpoint-vr) {
@@ -31,7 +31,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid theme.$tip-button-color;
+  border: 1px solid theme.$accent4-color-pressed;
   margin-right: 8px;
   margin-bottom: 8px;
   min-width: 48px;
@@ -40,13 +40,13 @@
   align-self: flex-end;
 
   &:hover {
-    border-color: theme.$tip-button-color-hover;
-    background-color: theme.$tip-button-color-hover;
+    border-color: theme.$accent4-color-hover;
+    background-color: theme.$accent4-color-hover;
   }
 
   &:active {
-    border-color: theme.$tip-button-color-pressed;
-    background-color: theme.$tip-button-color-pressed;
+    border-color: theme.$accent4-color-pressed;
+    background-color: theme.$accent4-color-pressed;
   }
 }
 
diff --git a/src/react-components/styles/global.scss b/src/react-components/styles/global.scss
index f347863296..e1b6759cea 100644
--- a/src/react-components/styles/global.scss
+++ b/src/react-components/styles/global.scss
@@ -138,12 +138,6 @@
   --chat-bubble-link-color-sent-pressed: var(--basic-color-pressed);
   --chat-bubble-bg-color-received: var(--background3-color);
 
-  --tip-text-color: var(--text5-color);
-  --tip-bg-color: var(--accent4-color);
-  --tip-button-color: var(--accent-4color-pressed);
-  --tip-button-color-hover: var(--accent4-color-hover);
-  --tip-button-color-pressed: var(--accent4-color-pressed);
-
   --favorite-color: #{theme.$yellow};
 
   --admin-color: var(--accent1-color);
diff --git a/src/react-components/styles/theme.scss b/src/react-components/styles/theme.scss
index b78f2354b5..0841eb1eba 100644
--- a/src/react-components/styles/theme.scss
+++ b/src/react-components/styles/theme.scss
@@ -224,12 +224,6 @@ $chat-bubble-link-color-sent-hover: var(--chat-bubble-link-color-sent-hover);
 $chat-bubble-link-color-sent-pressed: var(--chat-bubble-link-color-sent-pressed);
 $chat-bubble-bg-color-received: var(--chat-bubble-bg-color-received);
 
-$tip-text-color: var(--tip-text-color);
-$tip-bg-color: var(--tip-bg-color);
-$tip-button-color: var(--tip-button-color);
-$tip-button-color-hover: var(--tip-button-color-hover);
-$tip-button-color-pressed: var(--tip-button-color-pressed);
-
 $favorite-color: var(--favorite-color);
 
 $admin-color: var(--admin-color);

From 64d574fb4112dc1736de05f899bf6bd17de79146 Mon Sep 17 00:00:00 2001
From: Nikki Sharpley <nsharpley@mozilla.com>
Date: Mon, 24 Jul 2023 14:03:50 -0400
Subject: [PATCH 5/7] border clean up

---
 src/react-components/room/TweetEditorModal.scss | 12 +++++++-----
 src/react-components/styles/global.scss         |  3 +--
 src/react-components/styles/theme.scss          |  1 -
 themes.json                                     |  1 -
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/react-components/room/TweetEditorModal.scss b/src/react-components/room/TweetEditorModal.scss
index c4d86d5a01..0965f028b0 100644
--- a/src/react-components/room/TweetEditorModal.scss
+++ b/src/react-components/room/TweetEditorModal.scss
@@ -1,6 +1,8 @@
 @use "../styles/theme.scss";
 
-:local(.media), :local(.media) img, :local(.media) video {
+:local(.media),
+:local(.media) img,
+:local(.media) video {
   border-radius: theme.$border-radius-regular;
   background-color: theme.$tile-bg-color;
 }
@@ -9,13 +11,13 @@
   position: relative;
   display: flex;
   width: 100%;
-  border: 1px solid theme.$border3-color;
+  border: 1px solid theme.$darkgrey;
   border-radius: theme.$border-radius-regular;
   color: theme.$text1-color;
   min-height: 5em;
   padding: theme.$spacing-xs;
 
-  &:focus-within  {
+  &:focus-within {
     border-color: theme.$input-outline-color;
     box-shadow: 0 0 0 2px theme.$input-outline-color;
   }
@@ -33,7 +35,7 @@
   bottom: theme.$spacing-2xs;
   right: theme.$spacing-2xs;
 
-  @media(min-width: theme.$breakpoint-lg) and (min-height: theme.$breakpoint-vr) {
+  @media (min-width: theme.$breakpoint-lg) and (min-height: theme.$breakpoint-vr) {
     display: block;
   }
 }
@@ -73,4 +75,4 @@
   bottom: theme.$spacing-xs;
   left: theme.$spacing-xs;
   color: theme.$text3-color;
-}
\ No newline at end of file
+}
diff --git a/src/react-components/styles/global.scss b/src/react-components/styles/global.scss
index e1b6759cea..6e0407fd73 100644
--- a/src/react-components/styles/global.scss
+++ b/src/react-components/styles/global.scss
@@ -86,7 +86,6 @@
 
   --border1-color: #{theme.$lightgrey};
   --border2-color: #{theme.$grey};
-  --border3-color: #{theme.$darkgrey};
 
   --outline-color: #{theme.$black};
 
@@ -110,7 +109,7 @@
 
   --input-bg-color: var(--background1-color);
   --input-icon-color: var(--text2-color);
-  --input-border-color: var(--border3-color);
+  --input-border-color: #{theme.$darkgrey};
   --input-border-color-hover: var(--primary-color-hover);
   --input-outline-color: var(--primary-color);
 
diff --git a/src/react-components/styles/theme.scss b/src/react-components/styles/theme.scss
index 0841eb1eba..e0aa7c016d 100644
--- a/src/react-components/styles/theme.scss
+++ b/src/react-components/styles/theme.scss
@@ -172,7 +172,6 @@ $loading-screen-background: var(--loading-screen-background);
 
 $border1-color: var(--border1-color);
 $border2-color: var(--border2-color);
-$border3-color: var(--border3-color);
 
 $outline-color: var(--outline-color);
 
diff --git a/themes.json b/themes.json
index dfadd6edba..7acdd1f251 100644
--- a/themes.json
+++ b/themes.json
@@ -56,7 +56,6 @@
       "secondary-color-hover": "#5D646C",
       "border1-color": "#3A4048",
       "border2-color": "#5D646C",
-      "border3-color": "#5D646C",
       "active-color-hover": "#12A4ED",
       "active-text-color": "#2B313B",
       "background1-color": "#2B313B",

From 3da53ded6ef20a95e063ab46ed1fc5991264e951 Mon Sep 17 00:00:00 2001
From: Nikki Sharpley <nsharpley@mozilla.com>
Date: Mon, 24 Jul 2023 14:41:38 -0400
Subject: [PATCH 6/7] clean up overlay

---
 src/react-components/layout/List.scss         |  6 +++---
 .../popover/ImageGridPopover.scss             |  6 ++----
 src/react-components/room/ObjectMenu.scss     | 19 ++++++++++---------
 src/react-components/room/PeopleSidebar.scss  |  2 +-
 src/react-components/styles/global.scss       |  6 ------
 src/react-components/styles/theme.scss        |  6 ------
 themes.json                                   |  1 -
 7 files changed, 16 insertions(+), 30 deletions(-)

diff --git a/src/react-components/layout/List.scss b/src/react-components/layout/List.scss
index 02db89d1ee..2e08300d81 100644
--- a/src/react-components/layout/List.scss
+++ b/src/react-components/layout/List.scss
@@ -25,11 +25,11 @@
   width: 100%;
 
   &:hover {
-    background-color: theme.$list-bg-color-hover;
+    background-color: theme.$basic-color-hover;
   }
 
   &:active {
-    background-color: theme.$list-bg-color-pressed;
+    background-color: theme.$basic-color-pressed;
   }
 
   :global(body.keyboard-user) &:focus {
@@ -47,7 +47,7 @@
     &:hover {
       background-color: theme.$active-color-hover;
     }
-  
+
     &:active {
       background-color: theme.$active-color-pressed;
     }
diff --git a/src/react-components/popover/ImageGridPopover.scss b/src/react-components/popover/ImageGridPopover.scss
index 837cba044d..a89320fa30 100644
--- a/src/react-components/popover/ImageGridPopover.scss
+++ b/src/react-components/popover/ImageGridPopover.scss
@@ -1,6 +1,5 @@
 @use "../styles/theme.scss";
 
-
 :local(.image-grid-popover) {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
@@ -19,12 +18,11 @@
     min-height: 56px;
 
     &:hover {
-      background-color: theme.$list-bg-color-hover;
+      background-color: theme.$basic-color-hover;
     }
 
     &:active {
-      background-color: theme.$list-bg-color-pressed;
+      background-color: theme.$basic-color-pressed;
     }
   }
 }
-
diff --git a/src/react-components/room/ObjectMenu.scss b/src/react-components/room/ObjectMenu.scss
index 99fa107cac..687c4ece4a 100644
--- a/src/react-components/room/ObjectMenu.scss
+++ b/src/react-components/room/ObjectMenu.scss
@@ -1,6 +1,7 @@
 @use "../styles/theme.scss";
 
-:local(.back-button), :local(.lights-button) {
+:local(.back-button),
+:local(.lights-button) {
   position: absolute;
   top: 16px;
   pointer-events: auto;
@@ -9,7 +10,7 @@
     color: theme.$overlay-text-color;
   }
 
-  @media(min-width: theme.$breakpoint-lg) and (min-height: theme.$breakpoint-vr) {
+  @media (min-width: theme.$breakpoint-lg) and (min-height: theme.$breakpoint-vr) {
     display: none;
   }
 }
@@ -51,7 +52,7 @@
   align-items: center;
   justify-content: center;
 
-  @media(min-width: theme.$breakpoint-lg) and (min-height: theme.$breakpoint-vr) {
+  @media (min-width: theme.$breakpoint-lg) and (min-height: theme.$breakpoint-vr) {
     display: flex;
   }
 }
@@ -66,12 +67,11 @@
   right: 16px;
 }
 
-
 :local(.menu) {
   display: flex;
   padding: 16px;
 
-  @media(min-width: theme.$breakpoint-lg) and (min-height: theme.$breakpoint-vr) {
+  @media (min-width: theme.$breakpoint-lg) and (min-height: theme.$breakpoint-vr) {
     padding-top: 0;
   }
 }
@@ -100,13 +100,14 @@
     color: theme.$overlay-text-color;
   }
 
-  @media(min-width: theme.$breakpoint-lg) and (min-height: theme.$breakpoint-vr) {
+  @media (min-width: theme.$breakpoint-lg) and (min-height: theme.$breakpoint-vr) {
     display: none;
   }
 }
 
-:global(.keyboard-user)  {
-  :local(.back-button):focus, :local(.object-menu-container) :focus {
-    box-shadow: 0 0 0 3px theme.$overlay-outline-color;
+:global(.keyboard-user) {
+  :local(.back-button):focus,
+  :local(.object-menu-container) :focus {
+    box-shadow: 0 0 0 3px theme.$white;
   }
 }
diff --git a/src/react-components/room/PeopleSidebar.scss b/src/react-components/room/PeopleSidebar.scss
index 369fdbeed9..38b061b380 100644
--- a/src/react-components/room/PeopleSidebar.scss
+++ b/src/react-components/room/PeopleSidebar.scss
@@ -14,7 +14,7 @@
 }
 
 :local(.moderator-icon) {
-  color: theme.$admin-color;
+  color: theme.$accent1-color;
 }
 
 :local(.presence) {
diff --git a/src/react-components/styles/global.scss b/src/react-components/styles/global.scss
index 6e0407fd73..a945c05c17 100644
--- a/src/react-components/styles/global.scss
+++ b/src/react-components/styles/global.scss
@@ -113,9 +113,6 @@
   --input-border-color-hover: var(--primary-color-hover);
   --input-outline-color: var(--primary-color);
 
-  --list-bg-color-hover: var(--basic-color-hover);
-  --list-bg-color-pressed: var(--basic-color-pressed);
-
   --dropdown-bg-color: var(--background1-color);
   --dropdown-border-color: var(--border1-color);
   --dropdown-shadow-color: var(--shadow-color);
@@ -139,8 +136,6 @@
 
   --favorite-color: #{theme.$yellow};
 
-  --admin-color: var(--accent1-color);
-
   --error-color: var(--cancel-color);
   --error-color-hover: var(--cancel-color-hover);
   --error-color-pressed: var(--cancel-color-pressed);
@@ -148,7 +143,6 @@
   --overlay-bg-color: rgba(0, 0, 0, 0.5);
   --overlay-text-color: #{theme.$white};
   --overlay-border-color: #{theme.$grey};
-  --overlay-outline-color: #{theme.$white};
 
   --toolbar-icon-color: var(--text5-color);
   --toolbar-icon-selected-bg: var(--transparent);
diff --git a/src/react-components/styles/theme.scss b/src/react-components/styles/theme.scss
index e0aa7c016d..c425cd7f58 100644
--- a/src/react-components/styles/theme.scss
+++ b/src/react-components/styles/theme.scss
@@ -199,9 +199,6 @@ $input-border-color: var(--input-border-color);
 $input-border-color-hover: var(--input-border-color-hover);
 $input-outline-color: var(--input-outline-color);
 
-$list-bg-color-hover: var(--list-bg-color-hover);
-$list-bg-color-pressed: var(--list-bg-color-pressed);
-
 $dropdown-bg-color: var(--dropdown-bg-color);
 $dropdown-border-color: var(--dropdown-border-color);
 $dropdown-shadow-color: var(--dropdown-shadow-color);
@@ -225,8 +222,6 @@ $chat-bubble-bg-color-received: var(--chat-bubble-bg-color-received);
 
 $favorite-color: var(--favorite-color);
 
-$admin-color: var(--admin-color);
-
 $error-color: var(--error-color);
 $error-color-hover: var(--error-color-hover);
 $error-color-pressed: var(--error-color-pressed);
@@ -234,7 +229,6 @@ $error-color-pressed: var(--error-color-pressed);
 $overlay-bg-color: var(--overlay-bg-color);
 $overlay-text-color: var(--overlay-text-color);
 $overlay-border-color: var(--overlay-border-color);
-$overlay-outline-color: var(--overlay-outline-color);
 
 $toolbar-icon-color: var(--toolbar-icon-color);
 $toolbar-icon-selected-bg: var(--toolbar-icon-selected-bg);
diff --git a/themes.json b/themes.json
index 7acdd1f251..3e127df1bf 100644
--- a/themes.json
+++ b/themes.json
@@ -40,7 +40,6 @@
       "accent5-border-color": "#13a4ed",
       "accent5-color-hover": "#5D646C",
       "accent5-color-pressed": "#21242C",
-      "admin-color": "#13a4ed",
       "text1-color": "#ffffff",
       "text1-color-hover": "#E7E7E7",
       "text1-color-pressed": "#DBDBDB",

From f98ba2566d05add1bcd9ac6d3f0d2da725df8b9e Mon Sep 17 00:00:00 2001
From: Nikki Sharpley <nsharpley@mozilla.com>
Date: Tue, 25 Jul 2023 09:59:13 -0400
Subject: [PATCH 7/7] input backgrounds

---
 src/react-components/input/SelectInputField.scss | 4 ++--
 src/react-components/styles/global.scss          | 4 ----
 src/react-components/styles/theme.scss           | 4 ----
 3 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/react-components/input/SelectInputField.scss b/src/react-components/input/SelectInputField.scss
index 3943417ec7..7436e503f3 100644
--- a/src/react-components/input/SelectInputField.scss
+++ b/src/react-components/input/SelectInputField.scss
@@ -48,13 +48,13 @@ $input-height: 40px;
   top: $input-height + 4px;
   display: none;
   flex-direction: column;
-  background-color: theme.$dropdown-bg-color;
+  background-color: theme.$input-bg-color;
   border-radius: 8px;
   padding: 8px 0;
   z-index: 99999;
   left: 0;
   right: 0;
-  box-shadow: -1px -1px 1px theme.$dropdown-border-color, 3px 3px 6px theme.$dropdown-shadow-color;
+  box-shadow: -1px -1px 1px theme.$border1-color, 3px 3px 6px theme.$shadow-color;
   max-height: 320px;
   overflow-y: auto;
 }
diff --git a/src/react-components/styles/global.scss b/src/react-components/styles/global.scss
index a945c05c17..4a0d496dc3 100644
--- a/src/react-components/styles/global.scss
+++ b/src/react-components/styles/global.scss
@@ -113,10 +113,6 @@
   --input-border-color-hover: var(--primary-color-hover);
   --input-outline-color: var(--primary-color);
 
-  --dropdown-bg-color: var(--background1-color);
-  --dropdown-border-color: var(--border1-color);
-  --dropdown-shadow-color: var(--shadow-color);
-
   --button-text-color: var(--text1-color);
   --button-border-color: var(--border1-color);
   --button-bg-color: var(--basic-color);
diff --git a/src/react-components/styles/theme.scss b/src/react-components/styles/theme.scss
index c425cd7f58..df7b50a541 100644
--- a/src/react-components/styles/theme.scss
+++ b/src/react-components/styles/theme.scss
@@ -199,10 +199,6 @@ $input-border-color: var(--input-border-color);
 $input-border-color-hover: var(--input-border-color-hover);
 $input-outline-color: var(--input-outline-color);
 
-$dropdown-bg-color: var(--dropdown-bg-color);
-$dropdown-border-color: var(--dropdown-border-color);
-$dropdown-shadow-color: var(--dropdown-shadow-color);
-
 $button-text-color: var(--button-text-color);
 $button-border-color: var(--button-border-color);
 $button-bg-color: var(--button-bg-color);