Add globalStyles.button.subtle.backgroundColor, etc

app/renderer/components/common/browserButton.js

@@ -46,16 +46,18 @@ class BrowserButton extends ImmutableComponent {
   }
 }
 
+const buttonSize = '25px'
+
 const styles = StyleSheet.create({
   browserButton: {
     margin: '0 3px',
     whiteSpace: 'nowrap',
     outline: 'none',
     cursor: 'default',
     display: 'inline-block',
-    lineHeight: '25px',
-    height: '25px',
-    width: '25px',
+    lineHeight: buttonSize,
+    height: buttonSize,
+    width: buttonSize,
     fontSize: '13px',
     borderRadius: '2px',
     textAlign: 'center',
@@ -144,6 +146,7 @@ const styles = StyleSheet.create({
   browserButton_groupedItem: {
     // Legacy LESS inside ledger is too nested
     // and this style won't have effect without using !important
+    //
     // TODO: remove !important and check advancedSettings.js
     // once preferences is fully refactored
     marginRight: '4px !important',
@@ -159,8 +162,9 @@ const styles = StyleSheet.create({
   },
 
   browserButton_subtleItem: {
-    // cf: https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L151-L152
-    background: '#ccc',
+    background: globalStyles.button.subtle.backgroundColor,
+
+    // cf: https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L152
     fontSize: '14px',
 
     // Adding box-shadow:none to cancel the box-shadow specified on browserButton_default

app/renderer/components/styles/global.js

@@ -278,6 +278,11 @@ const globalStyles = {
       color: '#444',
       hoverColor: '#000',
       borderHoverColor: 'rgb(153, 153, 153)'
+    },
+
+    subtle: {
+      // cf: https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L151
+      backgroundColor: '#ccc'
     }
   },