Tweaked hover and focus colors. Temporarily disabled Tooltip.
Brian Vaughn committed
Apr 21, 2019 at 08:23 UTC
8220df734c8d33d1bc36fb50ab2c24cc393479d1
14 files changed
+60
-73
shells/dev/index.html
+1
@@ -13,6 +13,7 @@
13
height: 400px;
14
max-height: 50%;
15
overflow: hidden;
16
+ z-index: 10000001;
17
}
18
body {
19
display: flex;
src/devtools/views/Button.css
+1
-3
@@ -14,11 +14,9 @@
14
}
15
16
.Button:hover {
17
- background: var(--color-button-background-hover);
17
color: var(--color-button-hover);
18
}
19
.Button:active {
21
- background: var(--color-button-background-focus);
20
color: var(--color-button-focus);
21
outline: none;
22
}
@@ -28,7 +26,7 @@
26
}
27
28
.Button:focus > .ButtonContent {
31
- box-shadow: 0 0 0 2px var(--color-button-background-focus) inset;
29
+ background: var(--color-button-background-focus);
30
}
31
32
.Button:disabled,
src/devtools/views/Button.js
+12
-5
@@ -1,10 +1,10 @@
1
// @flow
2
3
import React from 'react';
4
-import Tooltip from '@reach/tooltip';
4
+// TODO (tooltips) import Tooltip from '@reach/tooltip';
5
6
import styles from './Button.css';
7
-import tooltipStyles from './Tooltip.css';
7
+// TODO (tooltips) import tooltipStyles from './Tooltip.css';
8
9
type Props = {
10
children: React$Node,
@@ -12,15 +12,21 @@ type Props = {
12
title: string,
13
};
14
15
-export default function Button({ children, className, title, ...rest }: Props) {
15
+export default function Button({
16
+ children,
17
+ className = '',
18
+ title,
19
+ ...rest
20
+}: Props) {
21
let button = (
17
- <button className={`${styles.Button} ${className || ''}`} {...rest}>
18
- <span className={styles.ButtonContent} tabIndex={-1}>
22
+ <button className={`${styles.Button} ${className}`} title={title} {...rest}>
23
+ <span className={`${styles.ButtonContent} ${className}`} tabIndex={-1}>
24
{children}
25
</span>
26
</button>
27
);
28
29
+ /* TODO (tooltips)
30
if (title) {
31
button = (
32
<Tooltip className={tooltipStyles.Tooltip} label={title}>
@@ -28,6 +34,7 @@ export default function Button({ children, className, title, ...rest }: Props) {
34
</Tooltip>
35
);
36
}
37
+ */
38
39
return button;
40
}
src/devtools/views/Components/OwnersStack.css
+12
-33
@@ -8,41 +8,19 @@
8
}
9
10
.Component,
11
-.Component[data-reach-menu-item],
12
-.SelectedComponent {
13
- padding: 0.25rem;
14
- margin-right: 0.5rem;
15
- color: var(--color-component-name);
11
+.Component[data-reach-menu-item] {
12
font-family: var(--font-family-monospace);
13
font-size: var(--font-size-monospace-normal);
18
- border-radius: 0.125rem;
19
- border: none;
20
- background: none;
21
- cursor: pointer;
22
- text-align: left;
14
user-select: none;
15
white-space: nowrap;
16
}
17
27
-.Component:hover,
28
-.Component[data-reach-menu-item]:hover {
29
- background-color: var(--color-hover-background);
30
-}
31
-.Component:focus,
32
-.Component[data-reach-menu-item]:focus {
33
- outline: none;
34
- background-color: var(--color-hover-background);
35
-}
36
-
18
.Component[data-reach-menu-item][data-selected],
38
-.Component[data-reach-menu-item][data-selected]:hover,
39
-.SelectedComponent,
40
-.SelectedComponent:hover {
41
- background-color: var(--color-selected-background);
19
+.Component[data-reach-menu-item][data-selected]:hover {
20
color: var(--color-selected-foreground);
21
+ background: var(--color-selected-background);
22
}
44
-.Component[data-reach-menu-item][data-selected]:focus,
45
-.SelectedComponent:focus {
23
+.Component[data-reach-menu-item][data-selected]:focus {
24
outline: none;
25
}
26
@@ -65,7 +43,6 @@
43
display: inline-flex;
44
align-items: center;
45
padding: 0.25rem;
68
- cursor: pointer;
46
flex: 0 0 auto;
47
border: none;
48
background: var(--color-button-background);
@@ -73,17 +50,15 @@
50
margin-right: 0.5rem;
51
}
52
.MenuButton:hover {
76
- background: var(--color-button-background-hover);
53
color: var(--color-button-hover);
54
}
55
.MenuButton[aria-expanded='true'],
56
.MenuButton[aria-expanded='true']:active {
81
- background: var(--color-button-background-focus);
82
- color: var(--color-button-focus);
57
+ color: var(--color-button-active);
58
outline: none;
59
}
60
.MenuButton:focus-within {
86
- box-shadow: 0 0 0 2px var(--color-button-background-focus) inset;
61
+ background: var(--color-button-background-focus);
62
outline: none;
63
}
64
@@ -91,14 +66,18 @@
66
display: inline-flex;
67
flex-direction: column;
68
background-color: var(--color-background);
94
- color: var(--color-text-color);
95
- padding: 0.5rem;
69
+ color: var(--color-button);
70
+ padding: 0.25rem 0;
71
padding-right: 0;
72
border: 1px solid var(--color-border);
73
border-radius: 0.25rem;
74
max-height: 10rem;
75
overflow: auto;
76
77
+ /* Make sure this is above the DevTools, which are above the Overlay */
78
+ z-index: 10000002;
79
+ position: relative;
80
+
81
/* Reach UI tries to set its own :( */
82
font-family: var(--font-family-monospace);
83
font-size: var(--font-size-monospace-normal);
src/devtools/views/Components/OwnersStack.js
+16
-14
@@ -6,10 +6,11 @@ import React, {
6
useRef,
7
useState,
8
} from 'react';
9
+// TODO (tooltips) import Tooltip from '@reach/tooltip';
10
import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
10
-import Tooltip from '@reach/tooltip';
11
import Button from '../Button';
12
import ButtonIcon from '../ButtonIcon';
13
+import Toggle from '../Toggle';
14
import { TreeContext } from './TreeContext';
15
import { StoreContext } from '../context';
16
import { useIsOverflowing } from '../hooks';
@@ -94,11 +95,11 @@ function ElementsDropdown({
95
96
return (
97
<Menu>
97
- <Tooltip label="Open elements dropdown">
98
- <MenuButton className={styles.MenuButton}>
99
- <ButtonIcon type="more" />
100
- </MenuButton>
101
- </Tooltip>
98
+ {/* TODO (tooltips) <Tooltip label="Open elements dropdown"> */}
99
+ <MenuButton className={styles.MenuButton}>
100
+ <ButtonIcon type="more" />
101
+ </MenuButton>
102
+ {/* TODO (tooltips) </Tooltip> */}
103
<MenuList className={styles.Modal}>
104
{ownerStack.map((id, index) => (
105
<MenuItem
@@ -124,20 +125,21 @@ function ElementView({ id, index }: ElementViewProps) {
125
126
const { displayName } = ((store.getElementByID(id): any): Element);
127
127
- const isSelected = ownerStackIndex === index;
128
+ const isChecked = ownerStackIndex === index;
129
129
- const handleClick = useCallback(() => {
130
- if (!isSelected) {
130
+ const handleChange = useCallback(() => {
131
+ if (!isChecked) {
132
selectOwner(id);
133
}
133
- }, [id, isSelected, selectOwner]);
134
+ }, [id, isChecked, selectOwner]);
135
136
return (
136
- <button
137
- className={isSelected ? styles.SelectedComponent : styles.Component}
138
- onClick={handleClick}
137
+ <Toggle
138
+ className={styles.Component}
139
+ isChecked={isChecked}
140
+ onChange={handleChange}
141
>
142
{displayName}
141
- </button>
143
+ </Toggle>
144
);
145
}
src/devtools/views/Components/SearchInput.css
+1
-1
@@ -18,7 +18,7 @@
18
.InputIcon {
19
pointer-events: none;
20
z-index: 2;
21
- color: var(--color-dim);
21
+ color: var(--color-dimmer);
22
}
23
24
.IndexLabel {
src/devtools/views/DevTools.js
+1
-1
@@ -3,7 +3,7 @@
3
// Reach styles need to come before any component styles.
4
// This makes overridding the styles simpler.
5
import '@reach/menu-button/styles.css';
6
-import '@reach/tooltip/styles.css';
6
+// TODO (tooltips) import '@reach/tooltip/styles.css';
7
8
import React, { useEffect, useState } from 'react';
9
import Store from '../store';
src/devtools/views/ReactLogo.css
+1
-1
@@ -2,5 +2,5 @@
2
width: 1.75rem;
3
height: 1.75rem;
4
margin: 0 0.75rem 0 0.25rem;
5
- color: var(--color-button);
5
+ color: var(--color-button-active);
6
}
src/devtools/views/Settings/SettingsContext.js
-2
@@ -205,9 +205,7 @@ 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);
208
updateStyleHelper(theme, 'color-button-background-focus', documentElements);
210
- updateStyleHelper(theme, 'color-button-background-hover', documentElements);
209
updateStyleHelper(theme, 'color-button', documentElements);
210
updateStyleHelper(theme, 'color-button-active', documentElements);
211
updateStyleHelper(theme, 'color-button-disabled', documentElements);
src/devtools/views/TabBar.css
+1
-1
@@ -45,7 +45,7 @@
45
.IconSizeLarge,
46
.IconSizeSmall {
47
margin-right: 0.5rem;
48
- color: var(--color-button);
48
+ color: var(--color-button-active);
49
}
50
51
.IconDisabled {
src/devtools/views/Toggle.css
+2
-3
@@ -1,6 +1,7 @@
1
.ToggleDisabled,
2
.ToggleOn,
3
.ToggleOff {
4
+ background: var(--color-button-background);
5
border: none;
6
border-radius: 0.25rem;
7
padding: 0;
@@ -20,13 +21,11 @@
21
color: var(--color-button);
22
}
23
.ToggleOff:hover {
23
- background: var(--color-button-background-hover);
24
color: var(--color-button-hover);
25
}
26
27
.ToggleOn,
28
.ToggleOn:active {
29
- background: var(--color-button-background-active);
29
color: var(--color-button-active);
30
outline: none;
31
}
@@ -39,7 +38,7 @@
38
39
.ToggleOn:focus > .ToggleContent,
40
.ToggleOff:focus > .ToggleContent {
42
- box-shadow: 0 0 0 2px var(--color-button-background-focus) inset;
41
+ background: var(--color-button-background-focus);
42
}
43
44
.ToggleDisabled {
src/devtools/views/Toggle.js
+5
-2
@@ -1,10 +1,10 @@
1
// @flow
2
3
import React, { useCallback } from 'react';
4
-import Tooltip from '@reach/tooltip';
4
+// TODO (tooltips) import Tooltip from '@reach/tooltip';
5
6
import styles from './Toggle.css';
7
-import tooltipStyles from './Tooltip.css';
7
+// TODO (tooltips) import tooltipStyles from './Tooltip.css';
8
9
type Props = {
10
children: React$Node,
@@ -42,6 +42,7 @@ export default function Toggle({
42
className={`${defaultClassName} ${className}`}
43
disabled={isDisabled}
44
onClick={handleClick}
45
+ title={title}
46
>
47
<span className={styles.ToggleContent} tabIndex={-1}>
48
{children}
@@ -49,6 +50,7 @@ export default function Toggle({
50
</button>
51
);
52
53
+ /* TODO (tooltips)
54
if (title) {
55
toggle = (
56
<Tooltip className={tooltipStyles.Tooltip} label={title}>
@@ -56,6 +58,7 @@ export default function Toggle({
58
</Tooltip>
59
);
60
}
61
+ */
62
63
return toggle;
64
}
src/devtools/views/Tooltip.css
+4
@@ -5,4 +5,8 @@
5
font-size: 12px;
6
background-color: var(--color-tooltip-background);
7
color: var(--color-tooltip-text);
8
+
9
+ /* Make sure this is above the DevTools, which are above the Overlay */
10
+ z-index: 10000002;
11
+ position: relative;
12
}
src/devtools/views/root.css
+3
-7
@@ -9,14 +9,12 @@
9
--light-color-attribute-editable-value: #1a1aa6;
10
--light-color-background: #ffffff;
11
--light-color-button-background: #ffffff;
12
- --light-color-button-background-active: #ffffff;
12
--light-color-button-background-focus: #ededed;
14
- --light-color-button-background-hover: #ffffff;
13
--light-color-button: #5f6673;
14
--light-color-button-disabled: #cfd1d5;
15
--light-color-button-active: #0088fa;
18
- --light-color-button-focus: #333333;
19
- --light-color-button-hover: #333333;
16
+ --light-color-button-focus: #23272f;
17
+ --light-color-button-hover: #23272f;
18
--light-color-border: #eeeeee;
19
--light-color-commit-did-not-render: #cfd1d5;
20
--light-color-commit-gradient-0: #37afa9;
@@ -59,14 +57,12 @@
57
--dark-color-attribute-editable-value: yellow;
58
--dark-color-background: #282c34;
59
--dark-color-button-background: #282c34;
62
- --dark-color-button-background-active: #3d424a;
60
--dark-color-button-background-focus: #3d424a;
64
- --dark-color-button-background-hover: #282c34;
61
--dark-color-button: #afb3b9;
62
--dark-color-button-active: #61dafb;
63
--dark-color-button-disabled: #777d88;
64
--dark-color-button-focus: #a2e9fc;
69
- --dark-color-button-hover: #cccccc;
65
+ --dark-color-button-hover: #ededed;
66
--dark-color-border: #3d424a;
67
--dark-color-commit-did-not-render: #777d88;
68
--dark-color-commit-gradient-0: #37afa9;