Cleaned up style vars
Brian Vaughn committed
Feb 5, 2019 at 11:23 UTC
6dc3fa6fbd03d338e346a455c7d9a30fc3825158
10 files changed
+101
-79
src/devtools/views/Element.css
+14
-12
@@ -10,18 +10,20 @@
10
align-items: center;
11
}
12
.Element:hover {
13
- background-color: var(--color-state03);
13
+ background-color: var(--color-tree-node-hover);
14
}
15
16
.SelectedElement {
17
- background-color: var(--color-state00);
17
+ background-color: var(--color-tree-node-selected);
18
19
/* Invert colors */
20
- --color-component: var(--color-base00);
21
- --color-arrow: var(--color-base00);
22
- --color-tree-tag: rgba(255, 255, 255, 0.8);
23
- --color-tree-attr-name: #b3e5fc;
24
- --color-tree-attr-value: #fff;
20
+ --color-component-name: var(--color-component-name-inverted);
21
+ --color-arrow: var(--color-arrow-inverted);
22
+ --color-tree-jsx-arrow-brackets: var(
23
+ --color-tree-jsx-arrow-brackets-inverted
24
+ );
25
+ --color-attribute-name: #b3e5fc;
26
+ --color-attribute-value: #fff;
27
}
28
29
.ArrowClosed,
@@ -37,23 +39,23 @@
39
}
40
41
.Component {
40
- color: var(--color-component);
42
+ color: var(--color-component-name);
43
}
44
.Component:before {
45
white-space: nowrap;
46
content: '<';
45
- color: var(--color-tree-tag);
47
+ color: var(--color-tree-jsx-arrow-brackets);
48
}
49
.Component:after {
50
white-space: nowrap;
51
content: '>';
50
- color: var(--color-tree-tag);
52
+ color: var(--color-tree-jsx-arrow-brackets);
53
}
54
55
.AttributeName {
54
- color: var(--color-tree-attr-name);
56
+ color: var(--color-attribute-name);
57
}
58
59
.AttributeValue {
58
- color: var(--color-tree-attr-value);
60
+ color: var(--color-attribute-value);
61
}
src/devtools/views/Elements.css
+1
-1
@@ -3,7 +3,7 @@
3
height: 100%;
4
display: flex;
5
flex-direction: row;
6
-
6
+ background-color: var(--color-background);
7
font-family: var(--font-family-sans);
8
}
9
src/devtools/views/HooksTree.css
+4
-4
@@ -1,6 +1,6 @@
1
.HooksTreeView {
2
padding: 0.25rem;
3
- border-bottom: 1px solid var(--color-base02);
3
+ border-bottom: 1px solid var(--color-border);
4
}
5
6
.HooksNode {
@@ -11,14 +11,14 @@
11
}
12
13
.Name {
14
- color: var(--color-tree-attr-name);
14
+ color: var(--color-attribute-name);
15
}
16
17
.Value {
18
- color: var(--color-tree-attr-value);
18
+ color: var(--color-attribute-value);
19
}
20
21
.None {
22
- color: var(--color-base03);
22
+ color: var(--color-deemphasized);
23
font-style: italic;
24
}
src/devtools/views/InspectedElementTree.css
+10
-4
@@ -1,20 +1,26 @@
1
.InspectedElementTree {
2
padding: 0.25rem;
3
- border-bottom: 1px solid var(--color-base02);
3
+ border-bottom: 1px solid var(--color-border);
4
}
5
6
.Item {
7
}
8
9
.Name {
10
- color: var(--color-tree-attr-name);
10
+ color: var(--color-attribute-name);
11
}
12
13
.Value {
14
- color: var(--color-tree-attr-value);
14
+ color: var(--color-attribute-value);
15
}
16
17
.None {
18
- color: var(--color-base03);
18
+ color: var(--color-deemphasized);
19
font-style: italic;
20
}
21
+
22
+.Empty {
23
+ color: var(--color-deemphasized);
24
+ font-style: italic;
25
+ padding-left: 1rem;
26
+}
src/devtools/views/InspectedElementTree.js
+15
-6
@@ -6,12 +6,19 @@ import { meta } from '../../hydration';
6
import styles from './InspectedElementTree.css';
7
8
type Props = {|
9
- label: string,
9
data: Object | null,
10
+ label: string,
11
+ showWhenEmpty?: boolean,
12
|};
13
13
-export default function InspectedElementTree({ data, label }: Props) {
14
- if (data === null || Object.keys(data).length === 0) {
14
+export default function InspectedElementTree({
15
+ data,
16
+ label,
17
+ showWhenEmpty = false,
18
+}: Props) {
19
+ const isEmpty = data === null || Object.keys(data).length === 0;
20
+
21
+ if (isEmpty && !showWhenEmpty) {
22
return null;
23
} else {
24
// TODO Add click and key handlers for toggling element open/close state.
@@ -19,9 +26,11 @@ export default function InspectedElementTree({ data, label }: Props) {
26
return (
27
<div className={styles.InspectedElementTree}>
28
<div className={styles.Item}>{label}</div>
22
- {Object.keys(data).map(name => (
23
- <KeyValue key={name} depth={1} name={name} value={data[name]} />
24
- ))}
29
+ {isEmpty && <div className={styles.Empty}>None</div>}
30
+ {!isEmpty &&
31
+ Object.keys((data: any)).map(name => (
32
+ <KeyValue key={name} depth={1} name={name} value={(data: any)[name]} />
33
+ ))}
34
</div>
35
);
36
}
src/devtools/views/SelectedElement.css
+11
-11
@@ -3,8 +3,8 @@
3
flex-direction: column;
4
height: 100%;
5
width: 100%;
6
- border-left: 1px solid var(--color-base02);
7
- border-top: 1px solid var(--color-base02);
6
+ border-left: 1px solid var(--color-border);
7
+ border-top: 1px solid var(--color-border);
8
}
9
10
.TitleRow {
@@ -12,7 +12,7 @@
12
display: flex;
13
align-items: center;
14
font-size: 16px;
15
- border-bottom: 1px solid var(--color-base02);
15
+ border-bottom: 1px solid var(--color-border);
16
padding: 0.5rem;
17
}
18
@@ -24,10 +24,10 @@
24
align-items: center;
25
padding: 0.25rem;
26
cursor: pointer;
27
- color: var(--color-state00);
27
+ color: var(--color-button);
28
}
29
.IconButton:hover {
30
- color: var(--color-special02);
30
+ color: var(--color-button-hover);
31
}
32
33
.SelectedComponentName {
@@ -44,19 +44,19 @@
44
.Owner {
45
overflow: hidden;
46
text-overflow: ellipsis;
47
- color: var(--color-component);
47
+ color: var(--color-component-name);
48
}
49
.Component:before,
50
.Owner:before {
51
white-space: nowrap;
52
content: '<';
53
- color: var(--color-tree-tag);
53
+ color: var(--color-tree-jsx-arrow-brackets);
54
}
55
.Component:after,
56
.Owner:after {
57
white-space: nowrap;
58
content: '>';
59
- color: var(--color-tree-tag);
59
+ color: var(--color-tree-jsx-arrow-brackets);
60
}
61
62
.Component {
@@ -66,8 +66,8 @@
66
.InspectedElement {
67
overflow: auto;
68
font-family: var(--font-family-monospace);
69
- font-size: var(--font-size-tree-compact);
70
- line-height: var(--line-height-compact);
69
+ font-size: var(--font-size-normal);
70
+ line-height: var(--line-height-data);
71
}
72
73
.Owner {
@@ -77,6 +77,6 @@
77
78
.Loading {
79
padding: 0.25rem;
80
- color: var(--color-base03);
80
+ color: var(--color-deemphasized);
81
font-style: italic;
82
}
src/devtools/views/SelectedElement.js
+1
-1
@@ -87,7 +87,7 @@ function InspectedElementView({
87
88
return (
89
<div className={styles.InspectedElement}>
90
- <InspectedElementTree label="props" data={props} />
90
+ <InspectedElementTree label="props" data={props} showWhenEmpty />
91
<InspectedElementTree label="state" data={state} />
92
<HooksTree hooksTree={hooks} />
93
<InspectedElementTree label="context" data={context} />
src/devtools/views/Tree.css
+6
-6
@@ -3,7 +3,7 @@
3
width: 100%;
4
display: flex;
5
flex-direction: column;
6
- border-top: 1px solid var(--color-base02);
6
+ border-top: 1px solid var(--color-border);
7
}
8
9
.SearchRow {
@@ -11,7 +11,7 @@
11
display: flex;
12
align-items: center;
13
font-size: 16px;
14
- border-bottom: 1px solid var(--color-base02);
14
+ border-bottom: 1px solid var(--color-border);
15
padding: 0.5rem;
16
}
17
@@ -34,11 +34,11 @@
34
align-items: center;
35
padding: 0.25rem;
36
cursor: pointer;
37
- color: var(--color-state00);
37
+ color: var(--color-button);
38
flex: 0 0 auto;
39
}
40
.IconButton:hover {
41
- color: var(--color-special02);
41
+ color: var(--color-button-hover);
42
}
43
44
.AutoSizerWrapper {
@@ -50,6 +50,6 @@
50
51
.List {
52
font-family: var(--font-family-monospace);
53
- font-size: var(--font-size-tree-compact);
54
- line-height: var(--line-height-tree-compact);
53
+ font-size: var(--font-size-normal);
54
+ line-height: var(--line-height-data);
55
}
src/devtools/views/root.css
+38
-33
@@ -1,45 +1,50 @@
1
:root {
2
- /* TODO */
3
- --color-base00: #ffffff;
4
- --color-base01: #f3f3f3;
5
- --color-base02: #eeeeee;
6
- --color-base03: #cfd1d5;
7
- --color-base04: #333333;
8
- --color-base05: #5a5a5a;
9
- --color-special00: #8155cb;
10
- --color-special01: #222222;
11
- --color-special02: #1a1aa6;
12
- --color-special03: #c80000;
13
- --color-special04: #236e25;
14
- --color-special05: #aa0d91;
15
- --color-special06: #ef6632;
16
- --color-special07: #777d88;
17
- --color-state00: #0088fa;
18
- --color-state01: #dadada;
19
- --color-state02: #ffffff;
20
- --color-state03: #ebf1fb;
21
- --color-state04: #ffff00;
22
- --color-state05: #222222;
23
- --color-state06: #222222;
2
+ /* Light theme */
3
+ --theme-light-arrow: #777d88;
4
+ --theme-light-arrow-inverted: #ffffff;
5
+ --theme-light-attribute-name: #ef6632;
6
+ --theme-light-attribute-value: #1a1aa6;
7
+ --theme-light-background: #ffffff;
8
+ --theme-light-button: #0088fa;
9
+ --theme-light-button-hover: #1a1aa6;
10
+ --theme-light-color-border: #eeeeee;
11
+ --theme-light-component-name: #8155cb;
12
+ --theme-light-component-name-inverted: #ffffff;
13
+ --theme-light-deemphasized: #cfd1d5;
14
+ --theme-light-jsx-arrow-brackets: #333333;
15
+ --theme-light-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.8);
16
+ --theme-light-tree-node-selected: #0088fa;
17
+ --theme-light-tree-node-hover: #ebf1fb;
18
25
- --color-arrow: var(--color-special07);
26
- --color-component: var(--color-special00);
27
- --color-tree-tag: var(--color-base04);
28
- --color-tree-attr-name: var(--color-special06);
29
- --color-tree-attr-value: var(--color-special02);
19
+ /* TODO Dark theme */
20
31
- --line-height-tree-compact: 1.5;
32
- --line-height-tree-normal: 1.5;
21
+ /* "theme" values referenced by other stylesheets */
22
+ --color-arrow: var(--theme-light-arrow);
23
+ --color-arrow-inverted: var(--theme-light-arrow-inverted);
24
+ --color-attribute-name: var(--theme-light-attribute-name);
25
+ --color-attribute-value: var(--theme-light-attribute-value);
26
+ --color-background: var(--theme-light-background);
27
+ --color-border: var(--theme-light-color-border);
28
+ --color-button: var(--theme-light-button);
29
+ --color-button-hover: var(--theme-light-button-hover);
30
+ --color-component-name: var(--theme-light-component-name);
31
+ --color-component-name-inverted: var(--theme-light-component-name-inverted);
32
+ --color-deemphasized: var(--theme-light-deemphasized);
33
+ --color-tree-jsx-arrow-brackets: var(--theme-light-jsx-arrow-brackets);
34
+ --color-tree-jsx-arrow-brackets-inverted: var(
35
+ --theme-light-jsx-arrow-brackets-inverted
36
+ );
37
+ --color-tree-node-selected: var(--theme-light-tree-node-selected);
38
+ --color-tree-node-hover: var(--theme-light-tree-node-hover);
39
+
40
+ --font-size-normal: 12px;
41
+ --line-height-data: 1.5rem;
42
43
/* GitHub.com system fonts */
44
--font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
45
Courier, monospace;
46
--font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
47
Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
39
- --font-size-tree-compact: 12px;
40
- --font-size-tree-normal: 14px;
41
- --line-height-compact: 20px;
42
- --line-height-normal: 24px;
48
}
49
50
* {
src/devtools/views/utils.js
+1
-1
@@ -5,7 +5,7 @@ import { meta } from '../../hydration';
5
export function getMetaValueLabel(data: Object): string | null {
6
switch (data[meta.type]) {
7
case 'react_element':
8
- return `<${data[meta.name]} />`;
8
+ return `<${data[meta.name]}/>`;
9
case 'function':
10
return `${data[meta.name] || 'fn'}()`;
11
case 'object':