Tidied up CSS variables
Brian Vaughn committed
Apr 21, 2019 at 08:38 UTC
09b995ab1cf7e7e5d031ffef5b1dcdcb664bd275
11 files changed
+35
-35
src/devtools/views/Components/Element.css
+5
-5
@@ -11,10 +11,10 @@
11
user-select: none;
12
}
13
.HoveredElement {
14
- background-color: var(--color-hover-background);
14
+ background-color: var(--color-background-hover);
15
}
16
.InactiveSelectedElement {
17
- background-color: var(--color-inactive-background);
17
+ background-color: var(--color-background-inactive);
18
}
19
20
.ScrollAnchor {
@@ -23,13 +23,13 @@
23
}
24
25
.SelectedElement {
26
- background-color: var(--color-selected-background);
27
- color: var(--color-selected-foreground);
26
+ background-color: var(--color-background-selected);
27
+ color: var(--color-text-selected);
28
29
/* Invert colors */
30
--color-component-name: var(--color-component-name-inverted);
31
--color-jsx-arrow-brackets: var(--color-jsx-arrow-brackets-inverted);
32
- --color-attribute-name: var(--color-hover-background);
32
+ --color-attribute-name: var(--color-background-hover);
33
--color-attribute-value: var(--color-component-name-inverted);
34
--color-expand-collapse-toggle: var(--color-component-name-inverted);
35
}
src/devtools/views/Components/OwnersStack.css
+2
-2
@@ -17,8 +17,8 @@
17
18
.Component[data-reach-menu-item][data-selected],
19
.Component[data-reach-menu-item][data-selected]:hover {
20
- color: var(--color-selected-foreground);
21
- background: var(--color-selected-background);
20
+ color: var(--color-text-selected);
21
+ background: var(--color-background-selected);
22
}
23
.Component[data-reach-menu-item][data-selected]:focus {
24
outline: none;
src/devtools/views/Profiler/InteractionListItem.css
+2
-2
@@ -7,11 +7,11 @@
7
}
8
9
.Interaction:hover {
10
- background-color: var(--color-hover-background);
10
+ background-color: var(--color-background-hover);
11
}
12
13
.SelectedInteraction {
14
- background-color: var(--color-hover-background);
14
+ background-color: var(--color-background-hover);
15
}
16
17
.Name {
src/devtools/views/Profiler/SidebarCommitInfo.css
+1
-1
@@ -41,7 +41,7 @@
41
.Interaction:focus,
42
.Interaction:hover {
43
outline: none;
44
- background-color: var(--color-hover-background);
44
+ background-color: var(--color-background-hover);
45
}
46
47
.Label {
src/devtools/views/Profiler/SidebarInteractions.css
+1
-1
@@ -44,7 +44,7 @@
44
padding: 0.25rem 0.5rem;
45
}
46
.ListItem:hover {
47
- background-color: var(--color-hover-background);
47
+ background-color: var(--color-background-hover);
48
}
49
50
.CommitBox {
src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
+3
-3
@@ -46,12 +46,12 @@
46
.Commit:focus,
47
.Commit:hover {
48
outline: none;
49
- background-color: var(--color-hover-background);
49
+ background-color: var(--color-background-hover);
50
}
51
52
.CurrentCommit {
53
- background-color: var(--color-selected-background);
54
- color: var(--color-selected-foreground);
53
+ background-color: var(--color-background-selected);
54
+ color: var(--color-text-selected);
55
}
56
.CurrentCommit:focus {
57
outline: none;
src/devtools/views/Profiler/SnapshotCommitListItem.js
+1
-1
@@ -52,7 +52,7 @@ function SnapshotCommitListItem({ data: itemData, index, style }: Props) {
52
...style,
53
width,
54
borderBottom: isSelected
55
- ? '3px solid var(--color-selected-border)'
55
+ ? '3px solid var(--color-tab-selected-border)'
56
: undefined,
57
}}
58
title={`Duration ${formatDuration(commitDuration)}ms at ${formatTime(
src/devtools/views/Settings/Settings.css
+2
-2
@@ -39,7 +39,7 @@
39
}
40
41
.Option:hover {
42
- background-color: var(--color-hover-background);
42
+ background-color: var(--color-background-hover);
43
}
44
45
.Option:first-of-type {
@@ -54,7 +54,7 @@
54
}
55
56
.ScreenshotThrottling {
57
- background-color: var(--color-hover-background);
57
+ background-color: var(--color-background-hover);
58
padding: 0.25rem 0.5rem;
59
border-radius: 0.25rem;
60
}
src/devtools/views/Settings/SettingsContext.js
+5
-5
@@ -203,6 +203,9 @@ function updateThemeVariables(
203
updateStyleHelper(theme, 'color-attribute-value', documentElements);
204
updateStyleHelper(theme, 'color-attribute-editable-value', documentElements);
205
updateStyleHelper(theme, 'color-background', documentElements);
206
+ updateStyleHelper(theme, 'color-background-hover', documentElements);
207
+ updateStyleHelper(theme, 'color-background-inactive', documentElements);
208
+ updateStyleHelper(theme, 'color-background-selected', documentElements);
209
updateStyleHelper(theme, 'color-border', documentElements);
210
updateStyleHelper(theme, 'color-button-background', documentElements);
211
updateStyleHelper(theme, 'color-button-background-focus', documentElements);
@@ -229,8 +232,6 @@ function updateThemeVariables(
232
updateStyleHelper(theme, 'color-dimmer', documentElements);
233
updateStyleHelper(theme, 'color-dimmest', documentElements);
234
updateStyleHelper(theme, 'color-expand-collapse-toggle', documentElements);
232
- updateStyleHelper(theme, 'color-hover-background', documentElements);
233
- updateStyleHelper(theme, 'color-inactive-background', documentElements);
235
updateStyleHelper(theme, 'color-jsx-arrow-brackets', documentElements);
236
updateStyleHelper(
237
theme,
@@ -241,12 +242,11 @@ function updateThemeVariables(
242
updateStyleHelper(theme, 'color-record-active', documentElements);
243
updateStyleHelper(theme, 'color-record-hover', documentElements);
244
updateStyleHelper(theme, 'color-record-inactive', documentElements);
244
- updateStyleHelper(theme, 'color-selected-background', documentElements);
245
- updateStyleHelper(theme, 'color-selected-border', documentElements);
246
- updateStyleHelper(theme, 'color-selected-foreground', documentElements);
245
updateStyleHelper(theme, 'color-search-match', documentElements);
246
updateStyleHelper(theme, 'color-search-match-current', documentElements);
247
+ updateStyleHelper(theme, 'color-tab-selected-border', documentElements);
248
updateStyleHelper(theme, 'color-text', documentElements);
249
+ updateStyleHelper(theme, 'color-text-selected', documentElements);
250
updateStyleHelper(theme, 'color-tooltip-background', documentElements);
251
updateStyleHelper(theme, 'color-tooltip-text', documentElements);
252
src/devtools/views/TabBar.css
+3
-3
@@ -13,15 +13,15 @@
13
}
14
.Tab:hover,
15
.TabCurrent:hover {
16
- background-color: var(--color-hover-background);
16
+ background-color: var(--color-background-hover);
17
}
18
.Tab:focus-within,
19
.TabCurrent:focus-within {
20
- background-color: var(--color-hover-background);
20
+ background-color: var(--color-background-hover);
21
}
22
23
.TabCurrent {
24
- border-bottom: 3px solid var(--color-selected-border);
24
+ border-bottom: 3px solid var(--color-tab-selected-border);
25
}
26
27
.TabDisabled {
src/devtools/views/root.css
+10
-10
@@ -8,6 +8,9 @@
8
--light-color-attribute-value: #1a1aa6;
9
--light-color-attribute-editable-value: #1a1aa6;
10
--light-color-background: #ffffff;
11
+ --light-color-background-hover: #ebf1fb;
12
+ --light-color-background-inactive: #e5e5e5;
13
+ --light-color-background-selected: #0088fa;
14
--light-color-button-background: #ffffff;
15
--light-color-button-background-focus: #ededed;
16
--light-color-button: #5f6673;
@@ -34,8 +37,6 @@
37
--light-color-dimmer: #cfd1d5;
38
--light-color-dimmest: #eff0f1;
39
--light-color-expand-collapse-toggle: #777d88;
37
- --light-color-hover-background: #ebf1fb;
38
- --light-color-inactive-background: #e5e5e5;
40
--light-color-jsx-arrow-brackets: #333333;
41
--light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
42
--light-color-modal-background: rgba(255, 255, 255, 0.75);
@@ -44,10 +45,9 @@
45
--light-color-record-inactive: #0088fa;
46
--light-color-search-match: yellow;
47
--light-color-search-match-current: #f7923b;
47
- --light-color-selected-background: #0088fa;
48
- --light-color-selected-border: #0088fa;
49
- --light-color-selected-foreground: #ffffff;
48
+ --light-color-tab-selected-border: #0088fa;
49
--light-color-text: #000000;
50
+ --light-color-text-selected: #ffffff;
51
--light-color-tooltip-background: rgba(0, 0, 0, 0.9);
52
--light-color-tooltip-text: #ffffff;
53
@@ -56,6 +56,9 @@
56
--dark-color-attribute-value: #cedae0;
57
--dark-color-attribute-editable-value: yellow;
58
--dark-color-background: #282c34;
59
+ --dark-color-background-hover: #3d424a;
60
+ --dark-color-background-inactive: #3d424a;
61
+ --dark-color-background-selected: #178fb9;
62
--dark-color-button-background: #282c34;
63
--dark-color-button-background-focus: #3d424a;
64
--dark-color-button: #afb3b9;
@@ -82,8 +85,6 @@
85
--dark-color-dimmer: #777d88;
86
--dark-color-dimmest: #4f5766;
87
--dark-color-expand-collapse-toggle: #8f949d;
85
- --dark-color-hover-background: #3d424a;
86
- --dark-color-inactive-background: #3d424a;
88
--dark-color-jsx-arrow-brackets: #777d88;
89
--dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
90
--dark-color-modal-background: rgba(0, 0, 0, 0.75);
@@ -92,10 +93,9 @@
93
--dark-color-record-inactive: #61dafb;
94
--dark-color-search-match: yellow;
95
--dark-color-search-match-current: #f7923b;
95
- --dark-color-selected-background: #178fb9;
96
- --dark-color-selected-border: #178fb9;
97
- --dark-color-selected-foreground: #ffffff;
96
+ --dark-color-tab-selected-border: #178fb9;
97
--dark-color-text: #ffffff;
98
+ --dark-color-text-selected: #ffffff;
99
--dark-color-tooltip-background: rgba(255, 255, 255, 0.9);
100
--dark-color-tooltip-text: #000000;
101