From 6883bd4bd0ec47bbbfdb365b07672854be14a1e5 Mon Sep 17 00:00:00 2001
From: John Shaughnessy <johnfshaughnessy@gmail.com>
Date: Fri, 10 Sep 2021 16:14:49 -0700
Subject: [PATCH 1/3] Add a theme variable accent4-border-color

This is a proof-of-concept PR for exposing button border colors in the
theme configs.
---
 src/react-components/input/ToolbarButton.scss |   3 +-
 src/react-components/styles/global.scss       |   1 +
 src/react-components/styles/theme.scss        |   1 +
 themes.json                                   | 129 +++++++++++++++++-
 4 files changed, 132 insertions(+), 2 deletions(-)

diff --git a/src/react-components/input/ToolbarButton.scss b/src/react-components/input/ToolbarButton.scss
index ebaa982d7a..e68bdf1846 100644
--- a/src/react-components/input/ToolbarButton.scss
+++ b/src/react-components/input/ToolbarButton.scss
@@ -506,7 +506,8 @@
 :local(.accent4) {
   :local(.icon-container) {
     background-color: theme.$accent4-color;
-  }  
+    border-color: theme.$accent4-border-color; // TODO: Fix border color for selected, hovered, and active
+  }
 
   &:hover :local(.icon-container) {
     background-color: theme.$accent4-color-hover;
diff --git a/src/react-components/styles/global.scss b/src/react-components/styles/global.scss
index d828fc7c84..10d9521628 100644
--- a/src/react-components/styles/global.scss
+++ b/src/react-components/styles/global.scss
@@ -54,6 +54,7 @@
   --accent4-color: #{theme.$blue};
   --accent4-color-hover: #{theme.$blue-hover};
   --accent4-color-pressed: #{theme.$blue-pressed};
+  --accent4-border-color: var(--accent4-color);
 
   --accent5-color: #{theme.$purple};
   --accent5-color-hover: #{theme.$purple-hover};
diff --git a/src/react-components/styles/theme.scss b/src/react-components/styles/theme.scss
index 892aa4c494..4aa5839983 100644
--- a/src/react-components/styles/theme.scss
+++ b/src/react-components/styles/theme.scss
@@ -138,6 +138,7 @@ $accent3-color-pressed: var(--accent3-color-pressed);
 $accent4-color: var(--accent4-color);
 $accent4-color-hover: var(--accent4-color-hover);
 $accent4-color-pressed: var(--accent4-color-pressed);
+$accent4-border-color: var(--accent4-border-color);
 
 $accent5-color: var(--accent5-color);
 $accent5-color-hover: var(--accent5-color-hover);
diff --git a/themes.json b/themes.json
index 396388441c..b8c6a10bb4 100644
--- a/themes.json
+++ b/themes.json
@@ -3,7 +3,8 @@
     "id": "hubs-default",
     "default": true,
     "name": "Hubs Default",
-    "variables": {}
+    "variables": {
+    }
   },
   {
     "id": "hubs-dark-mode",
@@ -41,5 +42,131 @@
       "background-hover-color": "#aaaaaa",
       "notice-background-color": "#2f80ed"
     }
+  },
+  {
+    "variables": {
+      "tip-button-color-hover": "#ffffff",
+      "loading-screen-background": "radial-gradient(50% 50% at 50% 50%, #15171B 0%, #282C31 100%)",
+      "background4-color": "#5D646C",
+      "accept-color-pressed": "#21242C",
+      "accent4-color": "#2B313B",
+      "accent4-border-color": "red",
+      "accent5-color": "#2B313B",
+      "border3-color": "#5D646C",
+      "primary-color-hover": "#12A4ED",
+      "outline-color": "#ffffff",
+      "text1-color-hover": "#E7E7E7",
+      "border2-color": "#5D646C",
+      "text1-color-pressed": "#DBDBDB",
+      "accent2-color": "#2B313B",
+      "accent1-color": "#2B313B",
+      "basic-color-pressed": "#636F80",
+      "secondary-color-pressed": "#282C31",
+      "accent3-color-pressed": "#21242C",
+      "text3-color-hover": "#C7C7C7",
+      "text2-color-pressed": "#DBDBDB",
+      "text3-color-pressed": "#ADADAD",
+      "accent5-color-hover": "#5D646C",
+      "text2-color-hover": "#F5F5F5",
+      "secondary-color": "#3A4048",
+      "background2-color": "#21242C",
+      "action-color-highlight": "#ff74a4",
+      "text4-color": "#E7E7E7",
+      "active-color-hover": "#12A4ED",
+      "background1-color": "#2B313B",
+      "basic-border-color": "#5D646C",
+      "accept-color-hover": "#5D646C",
+      "accent3-color": "#2B313B",
+      "border1-color": "#3A4048",
+      "accept-color": "#2B313B",
+      "text1-color": "#ffffff",
+      "active-text-color": "#2B313B",
+      "text3-color": "#BBBBBB",
+      "accent1-color-pressed": "#21242C",
+      "background-hover-color": "#aaaaaa",
+      "notice-background-color": "#2f80ed",
+      "accent4-color-hover": "#5D646C",
+      "background3-color": "#3A4048",
+      "primary-color": "#12A4ED",
+      "accent5-color-pressed": "#21242C",
+      "accent3-color-hover": "#5D646C",
+      "accent4-color-pressed": "#21242C",
+      "basic-color": "#3A4048",
+      "accent2-color-hover": "#5D646C",
+      "accent2-color-pressed": "#21242C",
+      "input-bg-color": "#21242C",
+      "basic-color-hover": "#4B5562",
+      "tip-text-color": "#2B313B",
+      "tip-bg-color": "#12A4ED",
+      "accent1-color-hover": "#5D646C",
+      "text2-color": "#E7E7E7",
+      "secondary-color-hover": "#5D646C",
+      "action-color": "#ff3464"
+    },
+    "name": "Matt Croud Mode for the Magically Enhanced",
+    "id": "hubs-croud-mode"
+  },
+
+  {
+    "variables": {
+      "tip-button-color-hover": "#ffffff",
+      "loading-screen-background": "radial-gradient(50% 50% at 50% 50%, #15171B 0%, #282C31 100%)",
+      "background4-color": "#5D646C",
+      "accept-color-pressed": "#21242C",
+      "accent4-color": "#2B313B",
+      "accent5-color": "#2B313B",
+      "border3-color": "#5D646C",
+      "primary-color-hover": "#12A4ED",
+      "outline-color": "#ffffff",
+      "text1-color-hover": "#E7E7E7",
+      "border2-color": "#5D646C",
+      "text1-color-pressed": "#DBDBDB",
+      "accent2-color": "#2B313B",
+      "accent1-color": "#2B313B",
+      "basic-color-pressed": "#636F80",
+      "secondary-color-pressed": "#282C31",
+      "accent3-color-pressed": "#21242C",
+      "text3-color-hover": "#C7C7C7",
+      "text2-color-pressed": "#DBDBDB",
+      "text3-color-pressed": "#ADADAD",
+      "accent5-color-hover": "#5D646C",
+      "text2-color-hover": "#F5F5F5",
+      "secondary-color": "#3A4048",
+      "background2-color": "#21242C",
+      "action-color-highlight": "#ff74a4",
+      "text4-color": "#E7E7E7",
+      "active-color-hover": "#12A4ED",
+      "background1-color": "#2B313B",
+      "basic-border-color": "#5D646C",
+      "accept-color-hover": "#5D646C",
+      "accent3-color": "#2B313B",
+      "border1-color": "#3A4048",
+      "accept-color": "#2B313B",
+      "text1-color": "#ffffff",
+      "active-text-color": "#2B313B",
+      "text3-color": "#BBBBBB",
+      "accent1-color-pressed": "#21242C",
+      "background-hover-color": "#aaaaaa",
+      "notice-background-color": "#2f80ed",
+      "accent4-color-hover": "#5D646C",
+      "background3-color": "#3A4048",
+      "primary-color": "#12A4ED",
+      "accent5-color-pressed": "#21242C",
+      "accent3-color-hover": "#5D646C",
+      "accent4-color-pressed": "#21242C",
+      "basic-color": "#3A4048",
+      "accent2-color-hover": "#5D646C",
+      "accent2-color-pressed": "#21242C",
+      "input-bg-color": "#21242C",
+      "basic-color-hover": "#4B5562",
+      "tip-text-color": "#2B313B",
+      "tip-bg-color": "#12A4ED",
+      "accent1-color-hover": "#5D646C",
+      "text2-color": "#E7E7E7",
+      "secondary-color-hover": "#5D646C",
+      "action-color": "#ff3464"
+    },
+    "name": "Jomb",
+    "id": "hubs-jomb-mode"
   }
 ]

From 2e65f93ca7314917018abcb16fed167fb16cb516 Mon Sep 17 00:00:00 2001
From: Matthew Cool <matthewbcool@gmail.com>
Date: Thu, 16 Sep 2021 21:40:04 -0700
Subject: [PATCH 2/3] toolbar button theme adjustments, edits to dark mode
 theme

---
 src/react-components/input/Button.stories.js  |   2 +-
 src/react-components/input/ToolbarButton.scss |  31 +--
 src/react-components/styles/global.scss       |   9 +-
 src/react-components/styles/theme.scss        |  10 +-
 themes.json                                   | 181 +++++-------------
 5 files changed, 78 insertions(+), 155 deletions(-)

diff --git a/src/react-components/input/Button.stories.js b/src/react-components/input/Button.stories.js
index cd831cc0e5..53f3190c0a 100644
--- a/src/react-components/input/Button.stories.js
+++ b/src/react-components/input/Button.stories.js
@@ -51,7 +51,7 @@ export const Tokens = () => (
 export const Landing = () => (
   <Column padding>
     <Button preset="signin" thick>
-      sign in/sign up
+      Sign in/Sign up
     </Button>
     <Button preset="landing" thick>
       Get Started
diff --git a/src/react-components/input/ToolbarButton.scss b/src/react-components/input/ToolbarButton.scss
index e68bdf1846..e9b6087227 100644
--- a/src/react-components/input/ToolbarButton.scss
+++ b/src/react-components/input/ToolbarButton.scss
@@ -49,8 +49,8 @@
 
 :local(.basic), :local(.transparent) {
   :local(.icon-container) {
-    border-color: theme.$lightgrey;
-
+    border-color: theme.$toolbar-basic-border-color;
+    background-color: transparent;
     svg {
       *[stroke=\#000] {
         stroke: theme.$toolbar-basic-icon-color;
@@ -63,7 +63,7 @@
   }  
 
   &:hover :local(.icon-container) {
-    border-color: theme.$basic-color-hover;
+    border: 1px solid theme.$toolbar-basic-border-color;
     background-color: theme.$basic-color-hover;
   }
 
@@ -75,7 +75,7 @@
   &:local(.selected) {
     :local(.icon-container) {
       border-color: transparent;
-      background-color: theme.$toolbar-basic-color;
+      background-color: theme.$toolbar-icon-selected-bg;
     }
 
     label {
@@ -116,7 +116,7 @@
   &:local(.selected) {
     :local(.icon-container) {
       border-color: theme.$primary-color;
-      background-color: transparent;
+      background-color: theme.$toolbar-icon-selected-bg;
 
       svg {
         *[stroke=\#000] {
@@ -184,7 +184,7 @@
   &:local(.selected) {
     :local(.icon-container) {
       border-color: theme.$accept-color;
-      background-color: transparent;
+      background-color: theme.$toolbar-icon-selected-bg;
 
       svg {
         *[stroke=\#000] {
@@ -251,7 +251,7 @@
   &:local(.selected) {
     :local(.icon-container) {
       border-color: theme.$cancel-color;
-      background-color: transparent;
+      background-color: theme.$toolbar-icon-selected-bg;
 
       svg {
         *[stroke=\#000] {
@@ -305,6 +305,7 @@
 :local(.accent1) {
   :local(.icon-container) {
     background-color: theme.$accent1-color;
+    border-color: theme.$accent1-border-color;
   }  
 
   &:hover :local(.icon-container) {
@@ -318,7 +319,7 @@
   &:local(.selected) {
     :local(.icon-container) {
       border-color: theme.$accent1-color;
-      background-color: transparent;
+      background-color: theme.$toolbar-icon-selected-bg;
 
       svg {
         *[stroke=\#000] {
@@ -372,6 +373,7 @@
 :local(.accent2) {
   :local(.icon-container) {
     background-color: theme.$accent2-color;
+    border-color: theme.$accent2-border-color;
   }  
 
   &:hover :local(.icon-container) {
@@ -385,7 +387,7 @@
   &:local(.selected) {
     :local(.icon-container) {
       border-color: theme.$accent2-color;
-      background-color: transparent;
+      background-color: theme.$toolbar-icon-selected-bg;
 
       svg {
         *[stroke=\#000] {
@@ -439,6 +441,7 @@
 :local(.accent3) {
   :local(.icon-container) {
     background-color: theme.$accent3-color;
+    border-color: theme.$accent3-border-color;
   }  
 
   &:hover :local(.icon-container) {
@@ -452,7 +455,7 @@
   &:local(.selected) {
     :local(.icon-container) {
       border-color: theme.$accent3-color;
-      background-color: transparent;
+      background-color: theme.$toolbar-icon-selected-bg;
 
       svg {
         *[stroke=\#000] {
@@ -520,7 +523,7 @@
   &:local(.selected) {
     :local(.icon-container) {
       border-color: theme.$accent4-color;
-      background-color: transparent;
+      background-color: theme.$toolbar-icon-selected-bg;
 
       svg {
         *[stroke=\#000] {
@@ -574,6 +577,7 @@
 :local(.accent5) {
   :local(.icon-container) {
     background-color: theme.$accent5-color;
+    border-color: theme.$accent5-border-color;
   }  
 
   &:hover :local(.icon-container) {
@@ -587,7 +591,7 @@
   &:local(.selected) {
     :local(.icon-container) {
       border-color: theme.$accent5-color;
-      background-color: transparent;
+      background-color: theme.$toolbar-icon-selected-bg;
 
       svg {
         *[stroke=\#000] {
@@ -601,7 +605,7 @@
     }
 
     label {
-      color: theme.$accent5-color;
+      color: theme.$accent5-color;   
     }
 
     &:hover {
@@ -623,7 +627,6 @@
     &:active {
       :local(.icon-container) {
         border-color: theme.$accent5-color-pressed;
-
         svg {
           *[stroke=\#000] {
             stroke: theme.$accent5-color-pressed;
diff --git a/src/react-components/styles/global.scss b/src/react-components/styles/global.scss
index 10d9521628..9782ed3630 100644
--- a/src/react-components/styles/global.scss
+++ b/src/react-components/styles/global.scss
@@ -32,6 +32,7 @@
   --link-color-pressed: #{theme.$blue-pressed};
 
   --accept-color: #{theme.$green};
+  --accept-border-color: #{theme.$green};
   --accept-color-hover: #{theme.$green-hover};
   --accept-color-pressed: #{theme.$green-pressed};
 
@@ -40,23 +41,27 @@
   --cancel-color-pressed: #{theme.$red-pressed};
 
   --accent1-color: #{theme.$red};
+  --accent1-border-color: var(--accent1-color);
   --accent1-color-hover: #{theme.$red-hover};
   --accent1-color-pressed: #{theme.$red-pressed};
 
   --accent2-color: #{theme.$orange};
+  --accent2-border-color: var(--accent2-color);
   --accent2-color-hover: #{theme.$orange-hover};
   --accent2-color-pressed: #{theme.$orange-pressed};
 
   --accent3-color: #{theme.$green};
+  --accent3-border-color: var(--accent3-color);
   --accent3-color-hover: #{theme.$green-hover};
   --accent3-color-pressed: #{theme.$green-pressed};
 
   --accent4-color: #{theme.$blue};
+  --accent4-border-color: var(--accent4-color);
   --accent4-color-hover: #{theme.$blue-hover};
   --accent4-color-pressed: #{theme.$blue-pressed};
-  --accent4-border-color: var(--accent4-color);
 
   --accent5-color: #{theme.$purple};
+  --accent5-border-color: var(--accent5-color);
   --accent5-color-hover: #{theme.$purple-hover};
   --accent5-color-pressed: #{theme.$purple-pressed};
 
@@ -158,10 +163,12 @@
   --overlay-outline-color: #{theme.$white};
 
   --toolbar-icon-color: var(--text5-color);
+  --toolbar-icon-selected-bg: var(--transparent); 
   --toolbar-basic-icon-color: var(--text1-color);
   --toolbar-basic-color: var(--secondary-color);
   --toolbar-basic-color-hover: var(--secondary-color-hover);
   --toolbar-basic-color-pressed: var(--secondary-color-pressed);
+  --toolbar-basic-border-color: var(--basic-border-color);
 
   --tile-text-color: var(--text4-color);
   --tile-bg-color: var(--secondary-color);
diff --git a/src/react-components/styles/theme.scss b/src/react-components/styles/theme.scss
index 4aa5839983..19d5254f7b 100644
--- a/src/react-components/styles/theme.scss
+++ b/src/react-components/styles/theme.scss
@@ -116,6 +116,7 @@ $link-color-hover: var(--link-color-hover);
 $link-color-pressed: var(--link-color-pressed);
 
 $accept-color: var(--accept-color);
+$accept-border-color: var(--accept-border-color);
 $accept-color-hover: var(--accept-color-hover);
 $accept-color-pressed: var(--accept-color-pressed);
 
@@ -124,23 +125,27 @@ $cancel-color-hover: var(--cancel-color-hover);
 $cancel-color-pressed: var(--cancel-color-pressed);
 
 $accent1-color: var(--accent1-color);
+$accent1-border-color: var(--accent1-border-color);
 $accent1-color-hover: var(--accent1-color-hover);
 $accent1-color-pressed: var(--accent1-color-pressed);
 
 $accent2-color: var(--accent2-color);
+$accent2-border-color: var(--accent2-border-color);
 $accent2-color-hover: var(--accent2-color-hover);
 $accent2-color-pressed: var(--accent2-color-pressed);
 
 $accent3-color: var(--accent3-color);
 $accent3-color-hover: var(--accent3-color-hover);
 $accent3-color-pressed: var(--accent3-color-pressed);
+$accent3-border-color: var(--accent3-border-color);
 
 $accent4-color: var(--accent4-color);
+$accent4-border-color: var(--accent4-border-color);
 $accent4-color-hover: var(--accent4-color-hover);
 $accent4-color-pressed: var(--accent4-color-pressed);
-$accent4-border-color: var(--accent4-border-color);
 
 $accent5-color: var(--accent5-color);
+$accent5-border-color: var(--accent5-border-color);
 $accent5-color-hover: var(--accent5-color-hover);
 $accent5-color-pressed: var(--accent5-color-pressed);
 
@@ -242,10 +247,13 @@ $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);
 $toolbar-basic-icon-color: var(--toolbar-basic-icon-color);
 $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);
+
 
 $tile-text-color: var(--tile-text-color);
 $tile-bg-color: var(--tile-bg-color);
diff --git a/themes.json b/themes.json
index b8c6a10bb4..dce79f6c51 100644
--- a/themes.json
+++ b/themes.json
@@ -3,170 +3,75 @@
     "id": "hubs-default",
     "default": true,
     "name": "Hubs Default",
-    "variables": {
-    }
+    "variables": {}
   },
-  {
-    "id": "hubs-dark-mode",
-    "darkModeDefault": true,
+  {   
     "name": "Hubs Dark Mode",
+    "id": "hubs-dark-mode",
     "variables": {
-      "text1-color": "#ffffff",
-      "text1-color-hover": "#E7E7E7",
-      "text1-color-pressed": "#DBDBDB",
-      "text2-color": "#E7E7E7",
-      "text2-color-hover": "#F5F5F5",
-      "text2-color-pressed": "#DBDBDB",
-      "text3-color": "#BBBBBB",
-      "text3-color-hover": "#C7C7C7",
-      "text3-color-pressed": "#ADADAD",
-      "text4-color": "#E7E7E7",
-      "basic-color": "#3A4048",
-      "basic-color-hover": "#4B5562",
-      "basic-color-pressed": "#636F80",
-      "basic-border-color": "#5D646C",
-      "secondary-color": "#3A4048",
-      "secondary-color-hover": "#5D646C",
-      "secondary-color-pressed": "#282C31",
-      "background1-color": "#15171B",
-      "background2-color": "#282C31",
-      "background3-color": "#3A4048",
-      "background4-color": "#5D646C",
-      "loading-screen-background": "radial-gradient(50% 50% at 50% 50%, #15171B 0%, #282C31 100%)",
-      "border1-color": "#3A4048",
-      "border2-color": "#5D646C",
-      "border3-color": "#5D646C",
-      "outline-color": "#ffffff",
-      "action-color": "#ff3464",
-      "action-color-highlight": "#ff74a4",
-      "background-hover-color": "#aaaaaa",
-      "notice-background-color": "#2f80ed"
-    }
-  },
-  {
-    "variables": {
-      "tip-button-color-hover": "#ffffff",
       "loading-screen-background": "radial-gradient(50% 50% at 50% 50%, #15171B 0%, #282C31 100%)",
-      "background4-color": "#5D646C",
       "accept-color-pressed": "#21242C",
-      "accent4-color": "#2B313B",
-      "accent4-border-color": "red",
-      "accent5-color": "#2B313B",
-      "border3-color": "#5D646C",
       "primary-color-hover": "#12A4ED",
+      "primary-color": "#12A4ED",
       "outline-color": "#ffffff",
-      "text1-color-hover": "#E7E7E7",
-      "border2-color": "#5D646C",
-      "text1-color-pressed": "#DBDBDB",
-      "accent2-color": "#2B313B",
-      "accent1-color": "#2B313B",
+      "basic-color": "#3A4048",
+      "basic-color-hover": "#4B5562",
       "basic-color-pressed": "#636F80",
+      "basic-border-color": "#13a4ed",
       "secondary-color-pressed": "#282C31",
-      "accent3-color-pressed": "#21242C",
-      "text3-color-hover": "#C7C7C7",
-      "text2-color-pressed": "#DBDBDB",
-      "text3-color-pressed": "#ADADAD",
-      "accent5-color-hover": "#5D646C",
-      "text2-color-hover": "#F5F5F5",
-      "secondary-color": "#3A4048",
-      "background2-color": "#21242C",
-      "action-color-highlight": "#ff74a4",
-      "text4-color": "#E7E7E7",
-      "active-color-hover": "#12A4ED",
-      "background1-color": "#2B313B",
-      "basic-border-color": "#5D646C",
-      "accept-color-hover": "#5D646C",
-      "accent3-color": "#2B313B",
-      "border1-color": "#3A4048",
-      "accept-color": "#2B313B",
-      "text1-color": "#ffffff",
-      "active-text-color": "#2B313B",
-      "text3-color": "#BBBBBB",
+      "accent1-color": "#2B313B",
+      "accent1-color-hover": "#5D646C",
+      "accent1-border-color": "#13a4ed",
       "accent1-color-pressed": "#21242C",
-      "background-hover-color": "#aaaaaa",
-      "notice-background-color": "#2f80ed",
-      "accent4-color-hover": "#5D646C",
-      "background3-color": "#3A4048",
-      "primary-color": "#12A4ED",
-      "accent5-color-pressed": "#21242C",
-      "accent3-color-hover": "#5D646C",
-      "accent4-color-pressed": "#21242C",
-      "basic-color": "#3A4048",
+      "accent2-color": "#2B313B",
       "accent2-color-hover": "#5D646C",
       "accent2-color-pressed": "#21242C",
-      "input-bg-color": "#21242C",
-      "basic-color-hover": "#4B5562",
-      "tip-text-color": "#2B313B",
-      "tip-bg-color": "#12A4ED",
-      "accent1-color-hover": "#5D646C",
-      "text2-color": "#E7E7E7",
-      "secondary-color-hover": "#5D646C",
-      "action-color": "#ff3464"
-    },
-    "name": "Matt Croud Mode for the Magically Enhanced",
-    "id": "hubs-croud-mode"
-  },
-
-  {
-    "variables": {
-      "tip-button-color-hover": "#ffffff",
-      "loading-screen-background": "radial-gradient(50% 50% at 50% 50%, #15171B 0%, #282C31 100%)",
-      "background4-color": "#5D646C",
-      "accept-color-pressed": "#21242C",
+      "accent2-border-color": "#13a4ed",
+      "accent3-color-pressed": "#21242C",
+      "accent3-color": "#2B313B",
+      "accent3-color-hover": "#5D646C",
+      "accent3-border-color": "#13a4ed",
       "accent4-color": "#2B313B",
+      "accent4-border-color": "#13a4ed",
+      "accent4-color-hover": "#5D646C",
+      "accent4-color-pressed": "#00699E",
       "accent5-color": "#2B313B",
-      "border3-color": "#5D646C",
-      "primary-color-hover": "#12A4ED",
-      "outline-color": "#ffffff",
+      "accent5-border-color": "#13a4ed",
+      "accent5-color-hover": "#5D646C",
+      "accent5-color-pressed": "#21242C",
+      "text1-color": "#ffffff",
       "text1-color-hover": "#E7E7E7",
-      "border2-color": "#5D646C",
       "text1-color-pressed": "#DBDBDB",
-      "accent2-color": "#2B313B",
-      "accent1-color": "#2B313B",
-      "basic-color-pressed": "#636F80",
-      "secondary-color-pressed": "#282C31",
-      "accent3-color-pressed": "#21242C",
-      "text3-color-hover": "#C7C7C7",
       "text2-color-pressed": "#DBDBDB",
+      "text3-color-hover": "#C7C7C7",
       "text3-color-pressed": "#ADADAD",
-      "accent5-color-hover": "#5D646C",
       "text2-color-hover": "#F5F5F5",
+      "text2-color": "#E7E7E7",
+      "text3-color": "#BBBBBB",
+      "text4-color": "#E7E7E7",
       "secondary-color": "#3A4048",
-      "background2-color": "#21242C",
+      "secondary-color-hover": "#5D646C",
+      "border1-color": "#3A4048",
+      "border2-color": "#5D646C",
+      "border3-color": "#5D646C",
       "action-color-highlight": "#ff74a4",
-      "text4-color": "#E7E7E7",
       "active-color-hover": "#12A4ED",
+      "active-text-color": "#2B313B",
       "background1-color": "#2B313B",
-      "basic-border-color": "#5D646C",
-      "accept-color-hover": "#5D646C",
-      "accent3-color": "#2B313B",
-      "border1-color": "#3A4048",
+      "background2-color": "#21242C",
+      "background3-color": "#3A4048",
+      "background4-color": "#5D646C",
       "accept-color": "#2B313B",
-      "text1-color": "#ffffff",
-      "active-text-color": "#2B313B",
-      "text3-color": "#BBBBBB",
-      "accent1-color-pressed": "#21242C",
+      "accept-color-hover": "#5D646C",
+      "accept-border-color": "#7ED320",
       "background-hover-color": "#aaaaaa",
       "notice-background-color": "#2f80ed",
-      "accent4-color-hover": "#5D646C",
-      "background3-color": "#3A4048",
-      "primary-color": "#12A4ED",
-      "accent5-color-pressed": "#21242C",
-      "accent3-color-hover": "#5D646C",
-      "accent4-color-pressed": "#21242C",
-      "basic-color": "#3A4048",
-      "accent2-color-hover": "#5D646C",
-      "accent2-color-pressed": "#21242C",
       "input-bg-color": "#21242C",
-      "basic-color-hover": "#4B5562",
-      "tip-text-color": "#2B313B",
-      "tip-bg-color": "#12A4ED",
-      "accent1-color-hover": "#5D646C",
-      "text2-color": "#E7E7E7",
-      "secondary-color-hover": "#5D646C",
-      "action-color": "#ff3464"
-    },
-    "name": "Jomb",
-    "id": "hubs-jomb-mode"
+      "tip-text-color": "#ffffff",
+      "tip-bg-color": "#017ab8",
+      "tip-button-color-hover": "#008bd1",
+      "action-color": "#ff3464",
+      "toolbar-icon-selected-bg": "#ffffff"
+    }
   }
 ]

From 9d864cd5ab0ba2542f71cb5ce72e2428a2daf078 Mon Sep 17 00:00:00 2001
From: Matthew Cool <matthewbcool@gmail.com>
Date: Thu, 16 Sep 2021 21:58:41 -0700
Subject: [PATCH 3/3] remove comment- btn state styles TBD

---
 src/react-components/input/ToolbarButton.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/react-components/input/ToolbarButton.scss b/src/react-components/input/ToolbarButton.scss
index e9b6087227..ef9ed2aafc 100644
--- a/src/react-components/input/ToolbarButton.scss
+++ b/src/react-components/input/ToolbarButton.scss
@@ -509,7 +509,7 @@
 :local(.accent4) {
   :local(.icon-container) {
     background-color: theme.$accent4-color;
-    border-color: theme.$accent4-border-color; // TODO: Fix border color for selected, hovered, and active
+    border-color: theme.$accent4-border-color;
   }
 
   &:hover :local(.icon-container) {