From 7d06b80af64d0121d373d8c6e8750a952c3897be Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Fri, 19 Mar 2021 09:52:59 -0400 Subject: [PATCH] Fixed primitive hook badge colors for light theme (#21034) --- .../devtools/views/Components/InspectedElementHooksTree.css | 4 ++-- .../src/devtools/views/Settings/SettingsContext.js | 6 ++++++ packages/react-devtools-shared/src/devtools/views/root.css | 4 ++++ 3 files changed, 12 insertions(+), 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 index a708593553856..e5099abb348e0 100644 --- 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 index f63a901410fb6..b6cd278df59dc 100644 --- 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 index 1fc6d461a4da1..e703e011843e5 100644 --- 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;