DevTools editable props tweaks

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"
facebook · May 19, 2020 · 38673fb · 38673fb
1 parent dbf2bba
commit 38673fb
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
@@ -3,7 +3,7 @@
 }
 
 .Name {
-  color: var(--color-dim);
+  color: var(--color-attribute-name-not-editable);
   flex: 0 0 auto;
   cursor: default;
 }

diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -235,6 +235,11 @@ function updateThemeVariables(
   documentElements: DocumentElements,
 ): void {
   updateStyleHelper(theme, 'color-attribute-name', documentElements);
+  updateStyleHelper(
+    theme,
+    'color-attribute-name-not-editable',
+    documentElements,
+  );
   updateStyleHelper(theme, 'color-attribute-name-inverted', documentElements);
   updateStyleHelper(theme, 'color-attribute-value', documentElements);
   updateStyleHelper(theme, 'color-attribute-value-inverted', documentElements);

diff --git a/packages/react-devtools-shared/src/devtools/views/root.css b/packages/react-devtools-shared/src/devtools/views/root.css
@@ -5,6 +5,7 @@
 
   /* Light theme */
   --light-color-attribute-name: #ef6632;
+  --light-color-attribute-name-not-editable: #23272f;
   --light-color-attribute-name-inverted: rgba(255, 255, 255, 0.7);
   --light-color-attribute-value: #1a1aa6;
   --light-color-attribute-value-inverted: #ffffff;
@@ -77,6 +78,7 @@
 
   /* Dark theme */
   --dark-color-attribute-name: #9d87d2;
+  --dark-color-attribute-name-not-editable: #ededed;
   --dark-color-attribute-name-inverted: #282828;
   --dark-color-attribute-value: #cedae0;
   --dark-color-attribute-value-inverted: #ffffff;