From fb3b9ead472ec0254e4ce7bd9000eb100010f08e Mon Sep 17 00:00:00 2001 From: Vitali Zaidman Date: Tue, 11 Jun 2024 14:32:39 +0100 Subject: [PATCH] fix[react-devtools] component badge in light mode is now not invisible (#29852) In light mode, component badges in profiler were invisible due to using the alpha channel to produce the grayish color. Instead I'm using the equivalent RGB without that alpha. **before** In light mode, component badges in profiler were invisible (forwardRef badge in this case): ![Screenshot 2024-06-11 at 13 15 16](https://github.com/facebook/react/assets/5188459/385b80a5-d385-4eac-bac6-7fec6938d78f) **after** Profiler tooltip fix. also notice there's no regression on the right menu: ![Screenshot 2024-06-11 at 13 04 41](https://github.com/facebook/react/assets/5188459/64aa27f7-35b8-4e3b-91d4-c12d5a97330e) also works in dark mode: ![Screenshot 2024-06-11 at 13 12 17](https://github.com/facebook/react/assets/5188459/99aa55fd-23ee-4881-9676-63eca86bf761) Still visible in components in light mode, whether selected or not: ![Screenshot 2024-06-11 at 13 04 49](https://github.com/facebook/react/assets/5188459/59c0bf63-d9b0-4d46-a145-f615249d1da0) components dark mode: ![Screenshot 2024-06-11 at 13 10 25](https://github.com/facebook/react/assets/5188459/16e61acc-c431-4bfa-8a65-ca6701f4379b) --- packages/react-devtools-shared/src/devtools/constants.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-devtools-shared/src/devtools/constants.js b/packages/react-devtools-shared/src/devtools/constants.js index 1736782514..8824003ec3 100644 --- a/packages/react-devtools-shared/src/devtools/constants.js +++ b/packages/react-devtools-shared/src/devtools/constants.js @@ -50,7 +50,7 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = { '--color-commit-gradient-text': '#000000', '--color-component-name': '#6a51b2', '--color-component-name-inverted': '#ffffff', - '--color-component-badge-background': 'rgba(0, 0, 0, 0.1)', + '--color-component-badge-background': '#e6e6e6', '--color-component-badge-background-inverted': 'rgba(255, 255, 255, 0.25)', '--color-component-badge-count': '#777d88', '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)',