Tweaking focus/active colors and only showing focus rect on tab
Brian Vaughn committed
Apr 20, 2019 at 15:44 UTC
a129089891a51883bd2541020e63c441bad02bf2
6 files changed
+61
-32
src/devtools/views/Button.css
+12
-2
@@ -2,12 +2,17 @@
2
border: none;
3
background: var(--color-button-background);
4
color: var(--color-button);
5
+ padding: 0;
6
border-radius: 0.25rem;
7
+ flex: 0 0 auto;
8
+}
9
+.ButtonContent {
10
display: inline-flex;
11
align-items: center;
12
+ border-radius: 0.25rem;
13
padding: 0.25rem;
9
- flex: 0 0 auto;
14
}
15
+
16
.Button:hover {
17
background: var(--color-button-background-hover);
18
color: var(--color-button-hover);
@@ -17,10 +22,15 @@
22
color: var(--color-button-focus);
23
outline: none;
24
}
20
-.Button:focus {
25
+.Button:focus,
26
+.ButtonContent:focus {
27
outline: none;
28
+}
29
+
30
+.Button:focus > .ButtonContent {
31
box-shadow: 0 0 0 2px var(--color-button-background-focus) inset;
32
}
33
+
34
.Button:disabled,
35
.Button:disabled:active {
36
background: var(--color-button-background);
src/devtools/views/Button.js
+7
-2
@@ -7,13 +7,18 @@ import styles from './Button.css';
7
import tooltipStyles from './Tooltip.css';
8
9
type Props = {
10
+ children: React$Node,
11
className?: string,
12
title: string,
13
};
14
14
-export default function Button({ className, title, ...rest }: Props) {
15
+export default function Button({ children, className, title, ...rest }: Props) {
16
let button = (
16
- <button className={`${styles.Button} ${className || ''}`} {...rest} />
17
+ <button className={`${styles.Button} ${className || ''}`} {...rest}>
18
+ <span className={styles.ButtonContent} tabIndex={-1}>
19
+ {children}
20
+ </span>
21
+ </button>
22
);
23
24
if (title) {
src/devtools/views/Settings/SettingsContext.js
+2
@@ -205,9 +205,11 @@ function updateThemeVariables(
205
updateStyleHelper(theme, 'color-background', documentElements);
206
updateStyleHelper(theme, 'color-border', documentElements);
207
updateStyleHelper(theme, 'color-button-background', documentElements);
208
+ updateStyleHelper(theme, 'color-button-background-active', documentElements);
209
updateStyleHelper(theme, 'color-button-background-focus', documentElements);
210
updateStyleHelper(theme, 'color-button-background-hover', documentElements);
211
updateStyleHelper(theme, 'color-button', documentElements);
212
+ updateStyleHelper(theme, 'color-button-active', documentElements);
213
updateStyleHelper(theme, 'color-button-disabled', documentElements);
214
updateStyleHelper(theme, 'color-button-focus', documentElements);
215
updateStyleHelper(theme, 'color-button-hover', documentElements);
src/devtools/views/Toggle.css
+17
-6
@@ -1,11 +1,17 @@
1
.ToggleDisabled,
2
.ToggleOn,
3
.ToggleOff {
4
+ border: none;
5
border-radius: 0.25rem;
6
+ padding: 0;
7
+ flex: 0 0 auto;
8
+}
9
+
10
+.ToggleContent {
11
display: inline-flex;
12
align-items: center;
13
+ border-radius: 0.25rem;
14
padding: 0.25rem;
8
- flex: 0 0 auto;
15
}
16
17
.ToggleOff {
@@ -20,17 +26,22 @@
26
27
.ToggleOn,
28
.ToggleOn:active {
23
- background: var(--color-button-background-focus);
24
- color: var(--color-button-focus);
29
+ background: var(--color-button-background-active);
30
+ color: var(--color-button-active);
31
outline: none;
32
}
33
28
-.ToggleOn:focus-within,
29
-.ToggleOff:focus-within {
30
- box-shadow: 0 0 0 2px var(--color-button-background-focus) inset;
34
+.ToggleOn:focus,
35
+.ToggleOff:focus,
36
+.ToggleContent:focus {
37
outline: none;
38
}
39
40
+.ToggleOn:focus > .ToggleContent,
41
+.ToggleOff:focus > .ToggleContent {
42
+ box-shadow: 0 0 0 2px var(--color-button-background-focus) inset;
43
+}
44
+
45
.ToggleDisabled {
46
background: var(--color-button-background);
47
color: var(--color-button-disabled);
src/devtools/views/Toggle.js
+13
-16
@@ -32,24 +32,21 @@ export default function Toggle({
32
defaultClassName = styles.ToggleOff;
33
}
34
35
- const handleChange = useCallback(
36
- ({ target }) => {
37
- onChange(target.checked);
38
- },
39
- [onChange]
40
- );
35
+ const handleClick = useCallback(() => onChange(!isChecked), [
36
+ isChecked,
37
+ onChange,
38
+ ]);
39
40
let toggle = (
43
- <label className={`${defaultClassName} ${className}`}>
44
- <input
45
- type="checkbox"
46
- className={styles.Input}
47
- checked={isChecked}
48
- disabled={isDisabled}
49
- onChange={handleChange}
50
- />
51
- {children}
52
- </label>
41
+ <button
42
+ className={`${defaultClassName} ${className}`}
43
+ disabled={isDisabled}
44
+ onClick={handleClick}
45
+ >
46
+ <span className={styles.ToggleContent} tabIndex={-1}>
47
+ {children}
48
+ </span>
49
+ </button>
50
);
51
52
if (title) {
src/devtools/views/root.css
+10
-6
@@ -9,12 +9,14 @@
9
--light-color-attribute-editable-value: #1a1aa6;
10
--light-color-background: #ffffff;
11
--light-color-button-background: #ffffff;
12
- --light-color-button-background-focus: #ebf1fb;
12
+ --light-color-button-background-active: #ffffff;
13
+ --light-color-button-background-focus: #ededed;
14
--light-color-button-background-hover: #ffffff;
14
- --light-color-button: #0088fa;
15
+ --light-color-button: #5f6673;
16
--light-color-button-disabled: #cfd1d5;
16
- --light-color-button-focus: #3578e5;
17
- --light-color-button-hover: #3578e5;
17
+ --light-color-button-active: #0088fa;
18
+ --light-color-button-focus: #333333;
19
+ --light-color-button-hover: #333333;
20
--light-color-border: #eeeeee;
21
--light-color-commit-did-not-render: #cfd1d5;
22
--light-color-commit-gradient-0: #37afa9;
@@ -57,12 +59,14 @@
59
--dark-color-attribute-editable-value: yellow;
60
--dark-color-background: #282c34;
61
--dark-color-button-background: #282c34;
62
+ --dark-color-button-background-active: #3d424a;
63
--dark-color-button-background-focus: #3d424a;
64
--dark-color-button-background-hover: #282c34;
62
- --dark-color-button: #61dafb;
65
+ --dark-color-button: #afb3b9;
66
+ --dark-color-button-active: #61dafb;
67
--dark-color-button-disabled: #777d88;
68
--dark-color-button-focus: #a2e9fc;
65
- --dark-color-button-hover: #a2e9fc;
69
+ --dark-color-button-hover: #cccccc;
70
--dark-color-border: #3d424a;
71
--dark-color-commit-did-not-render: #777d88;
72
--dark-color-commit-gradient-0: #37afa9;