Fixed primitive hook badge colors for light theme (facebook#21034)

zhengjitf · Mar 23, 2021 · 7788c4c · 7788c4c
1 parent 314dc12
commit 7788c4c
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css
@@ -71,8 +71,8 @@
 }
 
 .PrimitiveHookNumber {
-  color: var(--color-component-badge-count-inverted);
-  background-color: var(--color-component-badge-background-inverted);
+  background-color: var(--color-primitive-hook-badge-background);
+  color: var(--color-primitive-hook-badge-text);
   font-size: var(--font-size-monospace-small);
   margin-right: 0.25rem;
   border-radius: 0.125rem;

diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -383,6 +383,12 @@ export function updateThemeVariables(
   updateStyleHelper(theme, 'color-expand-collapse-toggle', documentElements);
   updateStyleHelper(theme, 'color-link', documentElements);
   updateStyleHelper(theme, 'color-modal-background', documentElements);
+  updateStyleHelper(
+    theme,
+    'color-primitive-hook-badge-background',
+    documentElements,
+  );
+  updateStyleHelper(theme, 'color-primitive-hook-badge-text', documentElements);
   updateStyleHelper(theme, 'color-record-active', documentElements);
   updateStyleHelper(theme, 'color-record-hover', documentElements);
   updateStyleHelper(theme, 'color-record-inactive', documentElements);

diff --git a/packages/react-devtools-shared/src/devtools/views/root.css b/packages/react-devtools-shared/src/devtools/views/root.css
@@ -69,6 +69,8 @@
   --light-color-expand-collapse-toggle: #777d88;
   --light-color-link: #0000ff;
   --light-color-modal-background: rgba(255, 255, 255, 0.75);
+  --light-color-primitive-hook-badge-background: #e5e5e5;
+  --light-color-primitive-hook-badge-text: #5f6673;
   --light-color-record-active: #fc3a4b;
   --light-color-record-hover: #3578e5;
   --light-color-record-inactive: #0088fa;
@@ -156,6 +158,8 @@
   --dark-color-expand-collapse-toggle: #8f949d;
   --dark-color-link: #61dafb;
   --dark-color-modal-background: rgba(0, 0, 0, 0.75);
+  --dark-color-primitive-hook-badge-background: rgba(0, 0, 0, 0.25);
+  --dark-color-primitive-hook-badge-text: rgba(255, 255, 255, 0.7);
   --dark-color-record-active: #fc3a4b;
   --dark-color-record-hover: #a2e9fc;
   --dark-color-record-inactive: #61dafb;