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)
This commit is contained in:
Vitali Zaidman
2024-06-11 14:32:39 +01:00
committed by GitHub
parent c015abd9dc
commit fb3b9ead47

View File

@@ -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)',