Tweaking focus/active colors and only showing focus rect on tab

src/devtools/views/Button.css

@@ -2,12 +2,17 @@
   border: none;
   background: var(--color-button-background);
   color: var(--color-button);
+  padding: 0;
   border-radius: 0.25rem;
-  display: inline-flex;
-  align-items: center;
-  padding: 0.25rem;
   flex: 0 0 auto;
 }
+.ButtonContent {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 0.25rem;
+  padding: 0.25rem;
+}
+
 .Button:hover {
   background: var(--color-button-background-hover);
   color: var(--color-button-hover);
@@ -17,10 +22,15 @@
   color: var(--color-button-focus);
   outline: none;
 }
-.Button:focus {
+.Button:focus,
+.ButtonContent:focus {
   outline: none;
+}
+
+.Button:focus > .ButtonContent {
   box-shadow: 0 0 0 2px var(--color-button-background-focus) inset;
 }
+
 .Button:disabled,
 .Button:disabled:active {
   background: var(--color-button-background);

src/devtools/views/Button.js

@@ -7,13 +7,18 @@ import styles from './Button.css';
 import tooltipStyles from './Tooltip.css';
 
 type Props = {
+  children: React$Node,
   className?: string,
   title: string,
 };
 
-export default function Button({ className, title, ...rest }: Props) {
+export default function Button({ children, className, title, ...rest }: Props) {
   let button = (
-    <button className={`${styles.Button} ${className || ''}`} {...rest} />
+    <button className={`${styles.Button} ${className || ''}`} {...rest}>
+      <span className={styles.ButtonContent} tabIndex={-1}>
+        {children}
+      </span>
+    </button>
   );
 
   if (title) {

src/devtools/views/Settings/SettingsContext.js

@@ -205,9 +205,11 @@ function updateThemeVariables(
   updateStyleHelper(theme, 'color-background', documentElements);
   updateStyleHelper(theme, 'color-border', documentElements);
   updateStyleHelper(theme, 'color-button-background', documentElements);
+  updateStyleHelper(theme, 'color-button-background-active', documentElements);
   updateStyleHelper(theme, 'color-button-background-focus', documentElements);
   updateStyleHelper(theme, 'color-button-background-hover', documentElements);
   updateStyleHelper(theme, 'color-button', documentElements);
+  updateStyleHelper(theme, 'color-button-active', documentElements);
   updateStyleHelper(theme, 'color-button-disabled', documentElements);
   updateStyleHelper(theme, 'color-button-focus', documentElements);
   updateStyleHelper(theme, 'color-button-hover', documentElements);

src/devtools/views/Toggle.css

@@ -1,11 +1,17 @@
 .ToggleDisabled,
 .ToggleOn,
 .ToggleOff {
+  border: none;
   border-radius: 0.25rem;
+  padding: 0;
+  flex: 0 0 auto;
+}
+
+.ToggleContent {
   display: inline-flex;
   align-items: center;
+  border-radius: 0.25rem;
   padding: 0.25rem;
-  flex: 0 0 auto;
 }
 
 .ToggleOff {
@@ -20,17 +26,22 @@
 
 .ToggleOn,
 .ToggleOn:active {
-  background: var(--color-button-background-focus);
-  color: var(--color-button-focus);
+  background: var(--color-button-background-active);
+  color: var(--color-button-active);
   outline: none;
 }
 
-.ToggleOn:focus-within,
-.ToggleOff:focus-within {
-  box-shadow: 0 0 0 2px var(--color-button-background-focus) inset;
+.ToggleOn:focus,
+.ToggleOff:focus,
+.ToggleContent:focus {
   outline: none;
 }
 
+.ToggleOn:focus > .ToggleContent,
+.ToggleOff:focus > .ToggleContent {
+  box-shadow: 0 0 0 2px var(--color-button-background-focus) inset;
+}
+
 .ToggleDisabled {
   background: var(--color-button-background);
   color: var(--color-button-disabled);

src/devtools/views/Toggle.js

@@ -32,24 +32,21 @@ export default function Toggle({
     defaultClassName = styles.ToggleOff;
   }
 
-  const handleChange = useCallback(
-    ({ target }) => {
-      onChange(target.checked);
-    },
-    [onChange]
-  );
+  const handleClick = useCallback(() => onChange(!isChecked), [
+    isChecked,
+    onChange,
+  ]);
 
   let toggle = (
-    <label className={`${defaultClassName} ${className}`}>
-      <input
-        type="checkbox"
-        className={styles.Input}
-        checked={isChecked}
-        disabled={isDisabled}
-        onChange={handleChange}
-      />
-      {children}
-    </label>
+    <button
+      className={`${defaultClassName} ${className}`}
+      disabled={isDisabled}
+      onClick={handleClick}
+    >
+      <span className={styles.ToggleContent} tabIndex={-1}>
+        {children}
+      </span>
+    </button>
   );
 
   if (title) {

src/devtools/views/root.css

@@ -9,12 +9,14 @@
   --light-color-attribute-editable-value: #1a1aa6;
   --light-color-background: #ffffff;
   --light-color-button-background: #ffffff;
-  --light-color-button-background-focus: #ebf1fb;
+  --light-color-button-background-active: #ffffff;
+  --light-color-button-background-focus: #ededed;
   --light-color-button-background-hover: #ffffff;
-  --light-color-button: #0088fa;
+  --light-color-button: #5f6673;
   --light-color-button-disabled: #cfd1d5;
-  --light-color-button-focus: #3578e5;
-  --light-color-button-hover: #3578e5;
+  --light-color-button-active: #0088fa;
+  --light-color-button-focus: #333333;
+  --light-color-button-hover: #333333;
   --light-color-border: #eeeeee;
   --light-color-commit-did-not-render: #cfd1d5;
   --light-color-commit-gradient-0: #37afa9;
@@ -57,12 +59,14 @@
   --dark-color-attribute-editable-value: yellow;
   --dark-color-background: #282c34;
   --dark-color-button-background: #282c34;
+  --dark-color-button-background-active: #3d424a;
   --dark-color-button-background-focus: #3d424a;
   --dark-color-button-background-hover: #282c34;
-  --dark-color-button: #61dafb;
+  --dark-color-button: #afb3b9;
+  --dark-color-button-active: #61dafb;
   --dark-color-button-disabled: #777d88;
   --dark-color-button-focus: #a2e9fc;
-  --dark-color-button-hover: #a2e9fc;
+  --dark-color-button-hover: #cccccc;
   --dark-color-border: #3d424a;
   --dark-color-commit-did-not-render: #777d88;
   --dark-color-commit-gradient-0: #37afa9;