DevTools editable props tweaks (#18954)
1. Made non-editable prop text higher contrast (easier to read) 2. Also makes it stand out as different from dimmer placeholder text for "new prop"
Brian Vaughn committed
May 19, 2020 at 09:42 UTC
5aa967b69b255ede89c03dda8cd617b61c492cdb
3 files changed
+8
-1
packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
+1
-1
@@ -3,7 +3,7 @@
3
}
4
5
.Name {
6
- color: var(--color-dim);
6
+ color: var(--color-attribute-name-not-editable);
7
flex: 0 0 auto;
8
cursor: default;
9
}
packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+5
@@ -235,6 +235,11 @@ function updateThemeVariables(
235
documentElements: DocumentElements,
236
): void {
237
updateStyleHelper(theme, 'color-attribute-name', documentElements);
238
+ updateStyleHelper(
239
+ theme,
240
+ 'color-attribute-name-not-editable',
241
+ documentElements,
242
+ );
243
updateStyleHelper(theme, 'color-attribute-name-inverted', documentElements);
244
updateStyleHelper(theme, 'color-attribute-value', documentElements);
245
updateStyleHelper(theme, 'color-attribute-value-inverted', documentElements);
packages/react-devtools-shared/src/devtools/views/root.css
+2
@@ -5,6 +5,7 @@
5
6
/* Light theme */
7
--light-color-attribute-name: #ef6632;
8
+ --light-color-attribute-name-not-editable: #23272f;
9
--light-color-attribute-name-inverted: rgba(255, 255, 255, 0.7);
10
--light-color-attribute-value: #1a1aa6;
11
--light-color-attribute-value-inverted: #ffffff;
@@ -77,6 +78,7 @@
78
79
/* Dark theme */
80
--dark-color-attribute-name: #9d87d2;
81
+ --dark-color-attribute-name-not-editable: #ededed;
82
--dark-color-attribute-name-inverted: #282828;
83
--dark-color-attribute-value: #cedae0;
84
--dark-color-attribute-value-inverted: #ffffff;