Skip to content

Improve DevTools CSS variables situation #22678

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom
Closed
bvaughn opened this issue Nov 2, 2021 · 4 comments · Fixed by #22716
Closed

Improve DevTools CSS variables situation #22678

bvaughn opened this issue Nov 2, 2021 · 4 comments · Fixed by #22716
Labels
Component: Developer Tools

Comments

@bvaughn
Copy link
Contributor

bvaughn commented Nov 2, 2021

Related to this comment: #22660 (review)

The majority of DevTools theme colors are stored in packages/react-devtools-shared/src/constants:

react/packages/react-devtools-shared/src/constants.js

Lines 75 to 383 in 5cccacd

export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
light: {
'--color-attribute-name': '#ef6632',
'--color-attribute-name-not-editable': '#23272f',
'--color-attribute-name-inverted': 'rgba(255, 255, 255, 0.7)',
'--color-attribute-value': '#1a1aa6',
'--color-attribute-value-inverted': '#ffffff',
'--color-attribute-editable-value': '#1a1aa6',
'--color-background': '#ffffff',
'--color-background-hover': 'rgba(0, 136, 250, 0.1)',
'--color-background-inactive': '#e5e5e5',
'--color-background-invalid': '#fff0f0',
'--color-background-selected': '#0088fa',
'--color-button-background': '#ffffff',
'--color-button-background-focus': '#ededed',
'--color-button': '#5f6673',
'--color-button-disabled': '#cfd1d5',
'--color-button-active': '#0088fa',
'--color-button-focus': '#23272f',
'--color-button-hover': '#23272f',
'--color-border': '#eeeeee',
'--color-commit-did-not-render-fill': '#cfd1d5',
'--color-commit-did-not-render-fill-text': '#000000',
'--color-commit-did-not-render-pattern': '#cfd1d5',
'--color-commit-did-not-render-pattern-text': '#333333',
'--color-commit-gradient-0': '#37afa9',
'--color-commit-gradient-1': '#63b19e',
'--color-commit-gradient-2': '#80b393',
'--color-commit-gradient-3': '#97b488',
'--color-commit-gradient-4': '#abb67d',
'--color-commit-gradient-5': '#beb771',
'--color-commit-gradient-6': '#cfb965',
'--color-commit-gradient-7': '#dfba57',
'--color-commit-gradient-8': '#efbb49',
'--color-commit-gradient-9': '#febc38',
'--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-inverted': 'rgba(255, 255, 255, 0.25)',
'--color-component-badge-count': '#777d88',
'--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)',
'--color-console-error-badge-text': '#ffffff',
'--color-console-error-background': '#fff0f0',
'--color-console-error-border': '#ffd6d6',
'--color-console-error-icon': '#eb3941',
'--color-console-error-text': '#fe2e31',
'--color-console-warning-badge-text': '#000000',
'--color-console-warning-background': '#fffbe5',
'--color-console-warning-border': '#fff5c1',
'--color-console-warning-icon': '#f4bd00',
'--color-console-warning-text': '#64460c',
'--color-context-background': 'rgba(0,0,0,.9)',
'--color-context-background-hover': 'rgba(255, 255, 255, 0.1)',
'--color-context-background-selected': '#178fb9',
'--color-context-border': '#3d424a',
'--color-context-text': '#ffffff',
'--color-context-text-selected': '#ffffff',
'--color-dim': '#777d88',
'--color-dimmer': '#cfd1d5',
'--color-dimmest': '#eff0f1',
'--color-error-background': 'hsl(0, 100%, 97%)',
'--color-error-border': 'hsl(0, 100%, 92%)',
'--color-error-text': '#ff0000',
'--color-expand-collapse-toggle': '#777d88',
'--color-link': '#0000ff',
'--color-modal-background': 'rgba(255, 255, 255, 0.75)',
'--color-bridge-version-npm-background': '#eff0f1',
'--color-bridge-version-npm-text': '#000000',
'--color-bridge-version-number': '#0088fa',
'--color-primitive-hook-badge-background': '#e5e5e5',
'--color-primitive-hook-badge-text': '#5f6673',
'--color-record-active': '#fc3a4b',
'--color-record-hover': '#3578e5',
'--color-record-inactive': '#0088fa',
'--color-resize-bar': '#eeeeee',
'--color-resize-bar-active': '#dcdcdc',
'--color-resize-bar-border': '#d1d1d1',
'--color-resize-bar-dot': '#333333',
'--color-scheduling-profiler-internal-module': '#d1d1d1',
'--color-scheduling-profiler-internal-module-hover': '#c9c9c9',
'--color-scheduling-profiler-internal-module-text': '#444',
'--color-scheduling-profiler-native-event': '#ccc',
'--color-scheduling-profiler-native-event-hover': '#aaa',
'--color-scheduling-profiler-network-primary': '#fcf3dc',
'--color-scheduling-profiler-network-primary-hover': '#f0e7d1',
'--color-scheduling-profiler-network-secondary': '#efc457',
'--color-scheduling-profiler-network-secondary-hover': '#e3ba52',
'--color-scheduling-profiler-priority-background': '#f6f6f6',
'--color-scheduling-profiler-priority-border': '#eeeeee',
'--color-scheduling-profiler-user-timing': '#c9cacd',
'--color-scheduling-profiler-user-timing-hover': '#93959a',
'--color-scheduling-profiler-react-idle': '#d3e5f6',
'--color-scheduling-profiler-react-idle-hover': '#c3d9ef',
'--color-scheduling-profiler-react-render': '#9fc3f3',
'--color-scheduling-profiler-react-render-hover': '#83afe9',
'--color-scheduling-profiler-react-render-text': '#11365e',
'--color-scheduling-profiler-react-commit': '#c88ff0',
'--color-scheduling-profiler-react-commit-hover': '#b281d6',
'--color-scheduling-profiler-react-commit-text': '#3e2c4a',
'--color-scheduling-profiler-react-layout-effects': '#b281d6',
'--color-scheduling-profiler-react-layout-effects-hover': '#9d71bd',
'--color-scheduling-profiler-react-layout-effects-text': '#3e2c4a',
'--color-scheduling-profiler-react-passive-effects': '#b281d6',
'--color-scheduling-profiler-react-passive-effects-hover': '#9d71bd',
'--color-scheduling-profiler-react-passive-effects-text': '#3e2c4a',
'--color-scheduling-profiler-react-schedule': '#9fc3f3',
'--color-scheduling-profiler-react-schedule-hover': '#2683E2',
'--color-scheduling-profiler-react-suspense-rejected': '#f1cc14',
'--color-scheduling-profiler-react-suspense-rejected-hover': '#ffdf37',
'--color-scheduling-profiler-react-suspense-resolved': '#a6e59f',
'--color-scheduling-profiler-react-suspense-resolved-hover': '#89d281',
'--color-scheduling-profiler-react-suspense-unresolved': '#c9cacd',
'--color-scheduling-profiler-react-suspense-unresolved-hover': '#93959a',
'--color-scheduling-profiler-thrown-error': '#ee1638',
'--color-scheduling-profiler-thrown-error-hover': '#da1030',
'--color-scheduling-profiler-text-color': '#000000',
'--color-scheduling-profiler-text-dim-color': '#ccc',
'--color-scheduling-profiler-react-work-border': '#eeeeee',
'--color-search-match': 'yellow',
'--color-search-match-current': '#f7923b',
'--color-selected-tree-highlight-active': 'rgba(0, 136, 250, 0.1)',
'--color-selected-tree-highlight-inactive': 'rgba(0, 0, 0, 0.05)',
'--color-scroll-caret': 'rgba(150, 150, 150, 0.5)',
'--color-tab-selected-border': '#0088fa',
'--color-text': '#000000',
'--color-text-invalid': '#ff0000',
'--color-text-selected': '#ffffff',
'--color-toggle-background-invalid': '#fc3a4b',
'--color-toggle-background-on': '#0088fa',
'--color-toggle-background-off': '#cfd1d5',
'--color-toggle-text': '#ffffff',
'--color-warning-background': '#fb3655',
'--color-warning-background-hover': '#f82042',
'--color-warning-text-color': '#ffffff',
'--color-warning-text-color-inverted': '#fd4d69',
// The styles below should be kept in sync with 'root.css'
// They are repeated there because they're used by e.g. tooltips or context menus
// which get rendered outside of the DOM subtree (where normal theme/styles are written).
'--color-scroll-thumb': '#c2c2c2',
'--color-scroll-track': '#fafafa',
'--color-tooltip-background': 'rgba(0, 0, 0, 0.9)',
'--color-tooltip-text': '#ffffff',
},
dark: {
'--color-attribute-name': '#9d87d2',
'--color-attribute-name-not-editable': '#ededed',
'--color-attribute-name-inverted': '#282828',
'--color-attribute-value': '#cedae0',
'--color-attribute-value-inverted': '#ffffff',
'--color-attribute-editable-value': 'yellow',
'--color-background': '#282c34',
'--color-background-hover': 'rgba(255, 255, 255, 0.1)',
'--color-background-inactive': '#3d424a',
'--color-background-invalid': '#5c0000',
'--color-background-selected': '#178fb9',
'--color-button-background': '#282c34',
'--color-button-background-focus': '#3d424a',
'--color-button': '#afb3b9',
'--color-button-active': '#61dafb',
'--color-button-disabled': '#4f5766',
'--color-button-focus': '#a2e9fc',
'--color-button-hover': '#ededed',
'--color-border': '#3d424a',
'--color-commit-did-not-render-fill': '#777d88',
'--color-commit-did-not-render-fill-text': '#000000',
'--color-commit-did-not-render-pattern': '#666c77',
'--color-commit-did-not-render-pattern-text': '#ffffff',
'--color-commit-gradient-0': '#37afa9',
'--color-commit-gradient-1': '#63b19e',
'--color-commit-gradient-2': '#80b393',
'--color-commit-gradient-3': '#97b488',
'--color-commit-gradient-4': '#abb67d',
'--color-commit-gradient-5': '#beb771',
'--color-commit-gradient-6': '#cfb965',
'--color-commit-gradient-7': '#dfba57',
'--color-commit-gradient-8': '#efbb49',
'--color-commit-gradient-9': '#febc38',
'--color-commit-gradient-text': '#000000',
'--color-component-name': '#61dafb',
'--color-component-name-inverted': '#282828',
'--color-component-badge-background': 'rgba(255, 255, 255, 0.25)',
'--color-component-badge-background-inverted': 'rgba(0, 0, 0, 0.25)',
'--color-component-badge-count': '#8f949d',
'--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)',
'--color-console-error-badge-text': '#000000',
'--color-console-error-background': '#290000',
'--color-console-error-border': '#5c0000',
'--color-console-error-icon': '#eb3941',
'--color-console-error-text': '#fc7f7f',
'--color-console-warning-badge-text': '#000000',
'--color-console-warning-background': '#332b00',
'--color-console-warning-border': '#665500',
'--color-console-warning-icon': '#f4bd00',
'--color-console-warning-text': '#f5f2ed',
'--color-context-background': 'rgba(255,255,255,.95)',
'--color-context-background-hover': 'rgba(0, 136, 250, 0.1)',
'--color-context-background-selected': '#0088fa',
'--color-context-border': '#eeeeee',
'--color-context-text': '#000000',
'--color-context-text-selected': '#ffffff',
'--color-dim': '#8f949d',
'--color-dimmer': '#777d88',
'--color-dimmest': '#4f5766',
'--color-error-background': '#200',
'--color-error-border': '#900',
'--color-error-text': '#f55',
'--color-expand-collapse-toggle': '#8f949d',
'--color-link': '#61dafb',
'--color-modal-background': 'rgba(0, 0, 0, 0.75)',
'--color-bridge-version-npm-background': 'rgba(0, 0, 0, 0.25)',
'--color-bridge-version-npm-text': '#ffffff',
'--color-bridge-version-number': 'yellow',
'--color-primitive-hook-badge-background': 'rgba(0, 0, 0, 0.25)',
'--color-primitive-hook-badge-text': 'rgba(255, 255, 255, 0.7)',
'--color-record-active': '#fc3a4b',
'--color-record-hover': '#a2e9fc',
'--color-record-inactive': '#61dafb',
'--color-resize-bar': '#282c34',
'--color-resize-bar-active': '#31363f',
'--color-resize-bar-border': '#3d424a',
'--color-resize-bar-dot': '#cfd1d5',
'--color-scheduling-profiler-internal-module': '#303542',
'--color-scheduling-profiler-internal-module-hover': '#363b4a',
'--color-scheduling-profiler-internal-module-text': '#7f8899',
'--color-scheduling-profiler-native-event': '#b2b2b2',
'--color-scheduling-profiler-native-event-hover': '#949494',
'--color-scheduling-profiler-network-primary': '#fcf3dc',
'--color-scheduling-profiler-network-primary-hover': '#e3dbc5',
'--color-scheduling-profiler-network-secondary': '#efc457',
'--color-scheduling-profiler-network-secondary-hover': '#d6af4d',
'--color-scheduling-profiler-priority-background': '#1d2129',
'--color-scheduling-profiler-priority-border': '#282c34',
'--color-scheduling-profiler-user-timing': '#c9cacd',
'--color-scheduling-profiler-user-timing-hover': '#93959a',
'--color-scheduling-profiler-react-idle': '#3d485b',
'--color-scheduling-profiler-react-idle-hover': '#465269',
'--color-scheduling-profiler-react-render': '#2683E2',
'--color-scheduling-profiler-react-render-hover': '#1a76d4',
'--color-scheduling-profiler-react-render-text': '#11365e',
'--color-scheduling-profiler-react-commit': '#731fad',
'--color-scheduling-profiler-react-commit-hover': '#611b94',
'--color-scheduling-profiler-react-commit-text': '#e5c1ff',
'--color-scheduling-profiler-react-layout-effects': '#611b94',
'--color-scheduling-profiler-react-layout-effects-hover': '#51167a',
'--color-scheduling-profiler-react-layout-effects-text': '#e5c1ff',
'--color-scheduling-profiler-react-passive-effects': '#611b94',
'--color-scheduling-profiler-react-passive-effects-hover': '#51167a',
'--color-scheduling-profiler-react-passive-effects-text': '#e5c1ff',
'--color-scheduling-profiler-react-schedule': '#2683E2',
'--color-scheduling-profiler-react-schedule-hover': '#1a76d4',
'--color-scheduling-profiler-react-suspense-rejected': '#f1cc14',
'--color-scheduling-profiler-react-suspense-rejected-hover': '#e4c00f',
'--color-scheduling-profiler-react-suspense-resolved': '#a6e59f',
'--color-scheduling-profiler-react-suspense-resolved-hover': '#89d281',
'--color-scheduling-profiler-react-suspense-unresolved': '#c9cacd',
'--color-scheduling-profiler-react-suspense-unresolved-hover': '#93959a',
'--color-scheduling-profiler-thrown-error': '#fb3655',
'--color-scheduling-profiler-thrown-error-hover': '#f82042',
'--color-scheduling-profiler-text-color': '#282c34',
'--color-scheduling-profiler-text-dim-color': '#555b66',
'--color-scheduling-profiler-react-work-border': '#3d424a',
'--color-search-match': 'yellow',
'--color-search-match-current': '#f7923b',
'--color-selected-tree-highlight-active': 'rgba(23, 143, 185, 0.15)',
'--color-selected-tree-highlight-inactive': 'rgba(255, 255, 255, 0.05)',
'--color-scroll-caret': '#4f5766',
'--color-shadow': 'rgba(0, 0, 0, 0.5)',
'--color-tab-selected-border': '#178fb9',
'--color-text': '#ffffff',
'--color-text-invalid': '#ff8080',
'--color-text-selected': '#ffffff',
'--color-toggle-background-invalid': '#fc3a4b',
'--color-toggle-background-on': '#178fb9',
'--color-toggle-background-off': '#777d88',
'--color-toggle-text': '#ffffff',
'--color-warning-background': '#ee1638',
'--color-warning-background-hover': '#da1030',
'--color-warning-text-color': '#ffffff',
'--color-warning-text-color-inverted': '#ee1638',
// The styles below should be kept in sync with 'root.css'
// They are repeated there because they're used by e.g. tooltips or context menus
// which get rendered outside of the DOM subtree (where normal theme/styles are written).
'--color-scroll-thumb': '#afb3b9',
'--color-scroll-track': '#313640',
'--color-tooltip-background': 'rgba(255, 255, 255, 0.95)',
'--color-tooltip-text': '#000000',
},
compact: {
'--font-size-monospace-small': '9px',
'--font-size-monospace-normal': '11px',
'--font-size-monospace-large': '15px',
'--font-size-sans-small': '10px',
'--font-size-sans-normal': '12px',
'--font-size-sans-large': '14px',
'--line-height-data': '18px',
},
comfortable: {
'--font-size-monospace-small': '10px',
'--font-size-monospace-normal': '13px',
'--font-size-monospace-large': '17px',
'--font-size-sans-small': '12px',
'--font-size-sans-normal': '14px',
'--font-size-sans-large': '16px',
'--line-height-data': '22px',
},
};

But some of them are also stored in packages/react-devtools-shared/src/devtools/views/root.css:

react/packages/react-devtools-shared/src/devtools/views/root.css

Lines 2 to 18 in 5cccacd

/**
* The light and dark theme styles below should be kept in sync with 'react-devtools-shared/src/constants'
* They are repeated here because they're used by e.g. tooltips or context menus
* which get rendered outside of the DOM subtree (where normal theme/styles are written).
*/
/* Light theme */
--light-color-scroll-thumb: #c2c2c2;
--light-color-scroll-track: #fafafa;
--light-color-tooltip-background: rgba(0, 0, 0, 0.9);
--light-color-tooltip-text: #ffffff;
/* Dark theme */
--dark-color-scroll-thumb: #afb3b9;
--dark-color-scroll-track: #313640;
--dark-color-tooltip-background: rgba(255, 255, 255, 0.95);
--dark-color-tooltip-text: #000000;

This is because of how they are referenced in a theme-agnostic way by Reach UI style overrides (for things like tooltips and context menus).

Can we do better here, at least to ensure they stay in sync? For example, can the ThemeProvider set the redundant values at the root level when the SettingsContext theme changes?

The primary goals of the current architecture are:

  1. Don't bleed styles into the global namespace (for our inline package users like Code Sandbox or Replay IO).
  2. Don't require awkward forced layout or re-renders for components that read style values programatically.
@jyash97
Copy link
Contributor

jyash97 commented Nov 2, 2021

I was looking into it and here is what I have in mind:

Exposing all vars using style prop to reach-ui components which will be rendered in Portal (outside the rendered DOM), and we can create wrapper component or re-export the same component by passing all vars:

// lib/reach-ui/MenuList.js
import {MenuList} from 'react-ui'

export const MenuList = ({children, ...props}) => <MenuList style={THEME_VARS} {...props}>{children}</MenuList>

Example: https://codesandbox.io/s/quiet-fast-exg5q?file=/src/App.js

children will have access to those CSS variables and we can style without adding custom variables in root.css

@jyash97 jyash97 mentioned this issue Nov 2, 2021
Closed
@bvaughn
Copy link
Contributor Author

bvaughn commented Nov 3, 2021

@jyash97 Oh! That's a very eloquent solution!

So DevTools can just re-export the components we use, with the style decoration. Love it!

@jyash97
Copy link
Contributor

jyash97 commented Nov 3, 2021

Glad you liked it 😄

Can I create a draft PR for the above solution ?

@bvaughn
Copy link
Contributor Author

bvaughn commented Nov 3, 2021

Yes, please do!

@jyash97 jyash97 mentioned this issue Nov 7, 2021
Merged
# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees
No one assigned
Labels
Component: Developer Tools
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(devtools): expose css vars to reach-ui portal components jyash97/react
2 participants
@bvaughn @jyash97