Fixed primitive hook badge colors for light theme (#21034)
Brian Vaughn committed
Mar 19, 2021 at 09:52 UTC
7d06b80af64d0121d373d8c6e8750a952c3897be
3 files changed
+12
-2
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css
+2
-2
@@ -71,8 +71,8 @@
71
}
72
73
.PrimitiveHookNumber {
74
- color: var(--color-component-badge-count-inverted);
75
- background-color: var(--color-component-badge-background-inverted);
74
+ background-color: var(--color-primitive-hook-badge-background);
75
+ color: var(--color-primitive-hook-badge-text);
76
font-size: var(--font-size-monospace-small);
77
margin-right: 0.25rem;
78
border-radius: 0.125rem;
packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+6
@@ -383,6 +383,12 @@ export function updateThemeVariables(
383
updateStyleHelper(theme, 'color-expand-collapse-toggle', documentElements);
384
updateStyleHelper(theme, 'color-link', documentElements);
385
updateStyleHelper(theme, 'color-modal-background', documentElements);
386
+ updateStyleHelper(
387
+ theme,
388
+ 'color-primitive-hook-badge-background',
389
+ documentElements,
390
+ );
391
+ updateStyleHelper(theme, 'color-primitive-hook-badge-text', documentElements);
392
updateStyleHelper(theme, 'color-record-active', documentElements);
393
updateStyleHelper(theme, 'color-record-hover', documentElements);
394
updateStyleHelper(theme, 'color-record-inactive', documentElements);
packages/react-devtools-shared/src/devtools/views/root.css
+4
@@ -69,6 +69,8 @@
69
--light-color-expand-collapse-toggle: #777d88;
70
--light-color-link: #0000ff;
71
--light-color-modal-background: rgba(255, 255, 255, 0.75);
72
+ --light-color-primitive-hook-badge-background: #e5e5e5;
73
+ --light-color-primitive-hook-badge-text: #5f6673;
74
--light-color-record-active: #fc3a4b;
75
--light-color-record-hover: #3578e5;
76
--light-color-record-inactive: #0088fa;
@@ -156,6 +158,8 @@
158
--dark-color-expand-collapse-toggle: #8f949d;
159
--dark-color-link: #61dafb;
160
--dark-color-modal-background: rgba(0, 0, 0, 0.75);
161
+ --dark-color-primitive-hook-badge-background: rgba(0, 0, 0, 0.25);
162
+ --dark-color-primitive-hook-badge-text: rgba(255, 255, 255, 0.7);
163
--dark-color-record-active: #fc3a4b;
164
--dark-color-record-hover: #a2e9fc;
165
--dark-color-record-inactive: #61dafb;