Merge pull request Hubs-Foundation#6182 from mozilla/condense-color-v…

…ariables fix: Condense color variables
kira924age · Jul 25, 2023 · 8cec75e · 8cec75e
2 parents 78f91f9 + 2a270c7
commit 8cec75e
Show file tree

Hide file tree

Showing 13 changed files with 54 additions and 114 deletions.
diff --git a/src/react-components/input/Button.scss b/src/react-components/input/Button.scss
@@ -85,7 +85,6 @@
   &:hover {
     color: theme.$text5-color-hover;
     background-color: theme.$accept-color-hover;
-    border: 2px solid theme.$accept-border-color;
   }
 
   &:active {
@@ -97,6 +96,7 @@
 :local(.cancel) {
   color: theme.$text5-color;
   background-color: theme.$cancel-color;
+  border: 2px solid theme.$cancel-color;
 
   svg {
     color: theme.$text5-color;
@@ -116,6 +116,7 @@
 :local(.accent1) {
   color: theme.$text5-color;
   background-color: theme.$accent1-color;
+  border: 2px solid theme.$accent1-border-color;
 
   svg {
     color: theme.$text5-color;
@@ -144,7 +145,6 @@
   &:hover {
     color: theme.$text5-color-hover;
     background-color: theme.$accent2-color-hover;
-    border: 2px solid theme.$accent2-border-color;
   }
 
   &:active {
@@ -156,6 +156,7 @@
 :local(.accent3) {
   color: theme.$text5-color;
   background-color: theme.$accent3-color;
+  border: 2px solid theme.$accent3-border-color;
 
   svg {
     color: theme.$text5-color;
@@ -184,7 +185,6 @@
   &:hover {
     color: theme.$text5-color-hover;
     background-color: theme.$accent4-color-hover;
-    border: 2px solid theme.$accent4-border-color;
   }
 
   &:active {
@@ -205,7 +205,6 @@
   &:hover {
     color: theme.$text5-color-hover;
     background-color: theme.$accent5-color-hover;
-    border: 2px solid theme.$accent5-border-color;
   }
 
   &:active {
@@ -217,6 +216,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/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/input/ToolbarButton.scss b/src/react-components/input/ToolbarButton.scss
@@ -364,7 +364,7 @@
     }
 
     label {
-      color: theme.$toolbar-label-accent1;
+      color: theme.$accent1-color;
     }
 
     &:hover {
@@ -435,7 +435,7 @@
     }
 
     label {
-      color: theme.$toolbar-label-accent2;
+      color: theme.$accent2-color;
     }
 
     &:hover {
@@ -499,7 +499,7 @@
     }
 
     label {
-      color: theme.$toolbar-label-accent3;
+      color: theme.$accent3-color;
     }
 
     &:hover {
@@ -563,7 +563,7 @@
     }
 
     label {
-      color: theme.$toolbar-label-accent4;
+      color: theme.$accent4-color;
     }
 
     &:hover {
@@ -627,7 +627,7 @@
     }
 
     label {
-      color: theme.$toolbar-label-accent5;
+      color: theme.$accent5-color;
     }
 
     &:hover {
@@ -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/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/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;
-}
+  box-shadow: inset 0 0 0 3px theme.$red;
+}
diff --git 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
@@ -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
@@ -14,7 +14,7 @@
 }
 
 :local(.moderator-icon) {
-  color: theme.$admin-color;
+  color: theme.$accent1-color;
 }
 
 :local(.presence) {

diff --git 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/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;
-}
+}