Tweaked guideline background color style
Brian Vaughn committed
Jun 1, 2019 at 09:34 UTC
de9fb0a8a2a04d77405eda3e780fe83d21bb8304
6 files changed
+23
-9
src/devtools/views/Components/Element.css
+1
@@ -33,6 +33,7 @@
33
34
/* Invert colors */
35
--color-component-name: var(--color-component-name-inverted);
36
+ --color-text: var(--color-text-selected);
37
--color-component-badge-background: var(
38
--color-component-badge-background-inverted
39
);
src/devtools/views/Components/Guideline.css
+10
-2
@@ -1,8 +1,16 @@
1
-.Guideline {
1
+.Active,
2
+.Inactive {
3
position: absolute;
4
left: 0;
5
width: 100%;
6
z-index: 0;
7
pointer-events: none;
7
- background-color: var(--color-guideline);
8
+}
9
+
10
+.Active {
11
+ background-color: var(--color-guideline-active);
12
+}
13
+
14
+.Inactive {
15
+ background-color: var(--color-guideline-inactive);
16
}
src/devtools/views/Components/Guideline.js
+3
-1
@@ -3,6 +3,7 @@
3
import React, { useContext, useMemo } from 'react';
4
import { TreeStateContext } from './TreeContext';
5
import { SettingsContext } from '../Settings/SettingsContext';
6
+import TreeFocusedContext from './TreeFocusedContext';
7
import { StoreContext } from '../context';
8
import { useSubscription } from '../hooks';
9
import Store from '../../store';
@@ -17,6 +18,7 @@ type Data = {|
18
export default function Guideline(_: {||}) {
19
const { lineHeight } = useContext(SettingsContext);
20
const store = useContext(StoreContext);
21
+ const treeFocused = useContext(TreeFocusedContext);
22
const { selectedElementID } = useContext(TreeStateContext);
23
24
const subscription = useMemo(
@@ -81,7 +83,7 @@ export default function Guideline(_: {||}) {
83
84
return (
85
<div
84
- className={styles.Guideline}
86
+ className={treeFocused ? styles.Active : styles.Inactive}
87
style={{
88
position: 'absolute',
89
top: `${startIndex * lineHeight - lineHeight / 2}px`,
src/devtools/views/Components/HocBadges.css
+1
-1
@@ -1,7 +1,7 @@
1
.HocBadges {
2
padding: 0.125rem 0.25rem;
3
background-color: var(--color-background-selected);
4
- color: var(--color-text-selected);
4
+ --color-text: var(--color-text-selected);
5
--color-component-badge-background: var(
6
--color-component-badge-background-inverted
7
);
src/devtools/views/Settings/SettingsContext.js
+2
-1
@@ -261,7 +261,8 @@ function updateThemeVariables(
261
updateStyleHelper(theme, 'color-dimmer', documentElements);
262
updateStyleHelper(theme, 'color-dimmest', documentElements);
263
updateStyleHelper(theme, 'color-expand-collapse-toggle', documentElements);
264
- updateStyleHelper(theme, 'color-guideline', documentElements);
264
+ updateStyleHelper(theme, 'color-guideline-active', documentElements);
265
+ updateStyleHelper(theme, 'color-guideline-inactive', documentElements);
266
updateStyleHelper(theme, 'color-jsx-arrow-brackets', documentElements);
267
updateStyleHelper(
268
theme,
src/devtools/views/root.css
+6
-4
@@ -8,7 +8,7 @@
8
--light-color-attribute-value: #1a1aa6;
9
--light-color-attribute-editable-value: #1a1aa6;
10
--light-color-background: #ffffff;
11
- --light-color-background-hover: #ebf1fb;
11
+ --light-color-background-hover: rgba(0, 136, 250, 0.1);
12
--light-color-background-inactive: #e5e5e5;
13
--light-color-background-selected: #0088fa;
14
--light-color-button-background: #ffffff;
@@ -42,7 +42,8 @@
42
--light-color-dimmer: #cfd1d5;
43
--light-color-dimmest: #eff0f1;
44
--light-color-expand-collapse-toggle: #777d88;
45
- --light-color-guideline: rgba(0, 0, 0, 0.05);
45
+ --light-color-guideline-active: rgba(0, 136, 250, 0.1);
46
+ --light-color-guideline-inactive: rgba(0, 0, 0, 0.05);
47
--light-color-jsx-arrow-brackets: #333333;
48
--light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
49
--light-color-modal-background: rgba(255, 255, 255, 0.75);
@@ -66,7 +67,7 @@
67
--dark-color-attribute-value: #cedae0;
68
--dark-color-attribute-editable-value: yellow;
69
--dark-color-background: #282c34;
69
- --dark-color-background-hover: #3d424a;
70
+ --dark-color-background-hover: rgba(255, 255, 255, 0.1);
71
--dark-color-background-inactive: #3d424a;
72
--dark-color-background-selected: #178fb9;
73
--dark-color-button-background: #282c34;
@@ -100,7 +101,8 @@
101
--dark-color-dimmer: #777d88;
102
--dark-color-dimmest: #4f5766;
103
--dark-color-expand-collapse-toggle: #8f949d;
103
- --dark-color-guideline: rgba(255, 255, 255, 0.05);
104
+ --dark-color-guideline-active: rgba(23, 143, 185, 0.1);
105
+ --dark-color-guideline-inactive: rgba(255, 255, 255, 0.05);
106
--dark-color-jsx-arrow-brackets: #777d88;
107
--dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
108
--dark-color-modal-background: rgba(0, 0, 0, 0.75);