Merge pull request #4649 from mozilla/feature/theme-button-border-colors

Feature/theme button border colors
Hubs-Foundation · Sep 21, 2021 · 28ebf39 · 28ebf39
2 parents 255fd97 + 9d864cd
commit 28ebf39
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 35 deletions.
diff --git 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
@@ -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] {
@@ -506,7 +509,8 @@
 :local(.accent4) {
   :local(.icon-container) {
     background-color: theme.$accent4-color;
-  }  
+    border-color: theme.$accent4-border-color;
+  }
 
   &:hover :local(.icon-container) {
     background-color: theme.$accent4-color-hover;
@@ -519,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] {
@@ -573,6 +577,7 @@
 :local(.accent5) {
   :local(.icon-container) {
     background-color: theme.$accent5-color;
+    border-color: theme.$accent5-border-color;
   }  
 
   &:hover :local(.icon-container) {
@@ -586,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] {
@@ -600,7 +605,7 @@
     }
 
     label {
-      color: theme.$accent5-color;
+      color: theme.$accent5-color;   
     }
 
     &:hover {
@@ -622,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
@@ -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,22 +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};
 
   --accent5-color: #{theme.$purple};
+  --accent5-border-color: var(--accent5-color);
   --accent5-color-hover: #{theme.$purple-hover};
   --accent5-color-pressed: #{theme.$purple-pressed};
 
@@ -157,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
@@ -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,22 +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);
 
 $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);
 
@@ -241,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
@@ -5,41 +5,73 @@
     "name": "Hubs Default",
     "variables": {}
   },
-  {
-    "id": "hubs-dark-mode",
-    "darkModeDefault": true,
+  {   
     "name": "Hubs Dark Mode",
+    "id": "hubs-dark-mode",
     "variables": {
+      "loading-screen-background": "radial-gradient(50% 50% at 50% 50%, #15171B 0%, #282C31 100%)",
+      "accept-color-pressed": "#21242C",
+      "primary-color-hover": "#12A4ED",
+      "primary-color": "#12A4ED",
+      "outline-color": "#ffffff",
+      "basic-color": "#3A4048",
+      "basic-color-hover": "#4B5562",
+      "basic-color-pressed": "#636F80",
+      "basic-border-color": "#13a4ed",
+      "secondary-color-pressed": "#282C31",
+      "accent1-color": "#2B313B",
+      "accent1-color-hover": "#5D646C",
+      "accent1-border-color": "#13a4ed",
+      "accent1-color-pressed": "#21242C",
+      "accent2-color": "#2B313B",
+      "accent2-color-hover": "#5D646C",
+      "accent2-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",
+      "accent5-border-color": "#13a4ed",
+      "accent5-color-hover": "#5D646C",
+      "accent5-color-pressed": "#21242C",
       "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",
+      "text2-color-hover": "#F5F5F5",
+      "text2-color": "#E7E7E7",
+      "text3-color": "#BBBBBB",
       "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",
+      "active-color-hover": "#12A4ED",
+      "active-text-color": "#2B313B",
+      "background1-color": "#2B313B",
+      "background2-color": "#21242C",
+      "background3-color": "#3A4048",
+      "background4-color": "#5D646C",
+      "accept-color": "#2B313B",
+      "accept-color-hover": "#5D646C",
+      "accept-border-color": "#7ED320",
       "background-hover-color": "#aaaaaa",
-      "notice-background-color": "#2f80ed"
+      "notice-background-color": "#2f80ed",
+      "input-bg-color": "#21242C",
+      "tip-text-color": "#ffffff",
+      "tip-bg-color": "#017ab8",
+      "tip-button-color-hover": "#008bd1",
+      "action-color": "#ff3464",
+      "toolbar-icon-selected-bg": "#ffffff"
     }
   }
 ]