1. export const CHANGE_LOG_URL =

  2.   'https://github.com/facebook/react/blob/main/packages/react-devtools/CHANGELOG.md';

  3. 

  4. export const UNSUPPORTED_VERSION_URL =

  5.   'https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how-do-i-get-the-old-version-back';

  6. 

  7. export const REACT_DEVTOOLS_WORKPLACE_URL =

  8.   'https://fburl.com/react-devtools-workplace-group';

  9. 

  10. import type {

  11.   Theme,

  12.   DisplayDensity,

  13. } from './devtools/views/Settings/SettingsContext';

  14. 

  15. export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {

  16.   light: {

  17.     '--color-attribute-name': '#ef6632',

  18.     '--color-attribute-name-not-editable': '#23272f',

  19.     '--color-attribute-name-inverted': 'rgba(255, 255, 255, 0.7)',

  20.     '--color-attribute-value': '#1a1aa6',

  21.     '--color-attribute-value-inverted': '#ffffff',

  22.     '--color-attribute-editable-value': '#1a1aa6',

  23.     '--color-background': '#ffffff',

  24.     '--color-background-hover': 'rgba(0, 136, 250, 0.1)',

  25.     '--color-background-inactive': '#e5e5e5',

  26.     '--color-background-invalid': '#fff0f0',

  27.     '--color-background-selected': '#0088fa',

  28.     '--color-button-background': '#ffffff',

  29.     '--color-button-background-focus': '#ededed',

  30.     '--color-button': '#5f6673',

  31.     '--color-button-disabled': '#cfd1d5',

  32.     '--color-button-active': '#0088fa',

  33.     '--color-button-focus': '#23272f',

  34.     '--color-button-hover': '#23272f',

  35.     '--color-border': '#eeeeee',

  36.     '--color-commit-did-not-render-fill': '#cfd1d5',

  37.     '--color-commit-did-not-render-fill-text': '#000000',

  38.     '--color-commit-did-not-render-pattern': '#cfd1d5',

  39.     '--color-commit-did-not-render-pattern-text': '#333333',

  40.     '--color-commit-gradient-0': '#37afa9',

  41.     '--color-commit-gradient-1': '#63b19e',

  42.     '--color-commit-gradient-2': '#80b393',

  43.     '--color-commit-gradient-3': '#97b488',

  44.     '--color-commit-gradient-4': '#abb67d',

  45.     '--color-commit-gradient-5': '#beb771',

  46.     '--color-commit-gradient-6': '#cfb965',

  47.     '--color-commit-gradient-7': '#dfba57',

  48.     '--color-commit-gradient-8': '#efbb49',

  49.     '--color-commit-gradient-9': '#febc38',

  50.     '--color-commit-gradient-text': '#000000',

  51.     '--color-component-name': '#6a51b2',

  52.     '--color-component-name-inverted': '#ffffff',

  53.     '--color-component-badge-background': 'rgba(0, 0, 0, 0.1)',

  54.     '--color-component-badge-background-inverted': 'rgba(255, 255, 255, 0.25)',

  55.     '--color-component-badge-count': '#777d88',

  56.     '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)',

  57.     '--color-console-error-badge-text': '#ffffff',

  58.     '--color-console-error-background': '#fff0f0',

  59.     '--color-console-error-border': '#ffd6d6',

  60.     '--color-console-error-icon': '#eb3941',

  61.     '--color-console-error-text': '#fe2e31',

  62.     '--color-console-warning-badge-text': '#000000',

  63.     '--color-console-warning-background': '#fffbe5',

  64.     '--color-console-warning-border': '#fff5c1',

  65.     '--color-console-warning-icon': '#f4bd00',

  66.     '--color-console-warning-text': '#64460c',

  67.     '--color-context-background': 'rgba(0,0,0,.9)',

  68.     '--color-context-background-hover': 'rgba(255, 255, 255, 0.1)',

  69.     '--color-context-background-selected': '#178fb9',

  70.     '--color-context-border': '#3d424a',

  71.     '--color-context-text': '#ffffff',

  72.     '--color-context-text-selected': '#ffffff',

  73.     '--color-dim': '#777d88',

  74.     '--color-dimmer': '#cfd1d5',

  75.     '--color-dimmest': '#eff0f1',

  76.     '--color-error-background': 'hsl(0, 100%, 97%)',

  77.     '--color-error-border': 'hsl(0, 100%, 92%)',

  78.     '--color-error-text': '#ff0000',

  79.     '--color-expand-collapse-toggle': '#777d88',

  80.     '--color-link': '#0000ff',

  81.     '--color-modal-background': 'rgba(255, 255, 255, 0.75)',

  82.     '--color-bridge-version-npm-background': '#eff0f1',

  83.     '--color-bridge-version-npm-text': '#000000',

  84.     '--color-bridge-version-number': '#0088fa',

  85.     '--color-primitive-hook-badge-background': '#e5e5e5',

  86.     '--color-primitive-hook-badge-text': '#5f6673',

  87.     '--color-record-active': '#fc3a4b',

  88.     '--color-record-hover': '#3578e5',

  89.     '--color-record-inactive': '#0088fa',

  90.     '--color-resize-bar': '#eeeeee',

  91.     '--color-resize-bar-active': '#dcdcdc',

  92.     '--color-resize-bar-border': '#d1d1d1',

  93.     '--color-resize-bar-dot': '#333333',

  94.     '--color-timeline-internal-module': '#d1d1d1',

  95.     '--color-timeline-internal-module-hover': '#c9c9c9',

  96.     '--color-timeline-internal-module-text': '#444',

  97.     '--color-timeline-native-event': '#ccc',

  98.     '--color-timeline-native-event-hover': '#aaa',

  99.     '--color-timeline-network-primary': '#fcf3dc',

  100.     '--color-timeline-network-primary-hover': '#f0e7d1',

  101.     '--color-timeline-network-secondary': '#efc457',

  102.     '--color-timeline-network-secondary-hover': '#e3ba52',

  103.     '--color-timeline-priority-background': '#f6f6f6',

  104.     '--color-timeline-priority-border': '#eeeeee',

  105.     '--color-timeline-user-timing': '#c9cacd',

  106.     '--color-timeline-user-timing-hover': '#93959a',

  107.     '--color-timeline-react-idle': '#d3e5f6',

  108.     '--color-timeline-react-idle-hover': '#c3d9ef',

  109.     '--color-timeline-react-render': '#9fc3f3',

  110.     '--color-timeline-react-render-hover': '#83afe9',

  111.     '--color-timeline-react-render-text': '#11365e',

  112.     '--color-timeline-react-commit': '#c88ff0',

  113.     '--color-timeline-react-commit-hover': '#b281d6',

  114.     '--color-timeline-react-commit-text': '#3e2c4a',

  115.     '--color-timeline-react-layout-effects': '#b281d6',

  116.     '--color-timeline-react-layout-effects-hover': '#9d71bd',

  117.     '--color-timeline-react-layout-effects-text': '#3e2c4a',

  118.     '--color-timeline-react-passive-effects': '#b281d6',

  119.     '--color-timeline-react-passive-effects-hover': '#9d71bd',

  120.     '--color-timeline-react-passive-effects-text': '#3e2c4a',

  121.     '--color-timeline-react-schedule': '#9fc3f3',

  122.     '--color-timeline-react-schedule-hover': '#2683E2',

  123.     '--color-timeline-react-suspense-rejected': '#f1cc14',

  124.     '--color-timeline-react-suspense-rejected-hover': '#ffdf37',

  125.     '--color-timeline-react-suspense-resolved': '#a6e59f',

  126.     '--color-timeline-react-suspense-resolved-hover': '#89d281',

  127.     '--color-timeline-react-suspense-unresolved': '#c9cacd',

  128.     '--color-timeline-react-suspense-unresolved-hover': '#93959a',

  129.     '--color-timeline-thrown-error': '#ee1638',

  130.     '--color-timeline-thrown-error-hover': '#da1030',

  131.     '--color-timeline-text-color': '#000000',

  132.     '--color-timeline-text-dim-color': '#ccc',

  133.     '--color-timeline-react-work-border': '#eeeeee',

  134.     '--color-search-match': 'yellow',

  135.     '--color-search-match-current': '#f7923b',

  136.     '--color-selected-tree-highlight-active': 'rgba(0, 136, 250, 0.1)',

  137.     '--color-selected-tree-highlight-inactive': 'rgba(0, 0, 0, 0.05)',

  138.     '--color-scroll-caret': 'rgba(150, 150, 150, 0.5)',

  139.     '--color-tab-selected-border': '#0088fa',

  140.     '--color-text': '#000000',

  141.     '--color-text-invalid': '#ff0000',

  142.     '--color-text-selected': '#ffffff',

  143.     '--color-toggle-background-invalid': '#fc3a4b',

  144.     '--color-toggle-background-on': '#0088fa',

  145.     '--color-toggle-background-off': '#cfd1d5',

  146.     '--color-toggle-text': '#ffffff',

  147.     '--color-warning-background': '#fb3655',

  148.     '--color-warning-background-hover': '#f82042',

  149.     '--color-warning-text-color': '#ffffff',

  150.     '--color-warning-text-color-inverted': '#fd4d69',

  151. 

  152.     // The styles below should be kept in sync with 'root.css'

  153.     // They are repeated there because they're used by e.g. tooltips or context menus

  154.     // which get rendered outside of the DOM subtree (where normal theme/styles are written).

  155.     '--color-scroll-thumb': '#c2c2c2',

  156.     '--color-scroll-track': '#fafafa',

  157.     '--color-tooltip-background': 'rgba(0, 0, 0, 0.9)',

  158.     '--color-tooltip-text': '#ffffff',

  159.   },

  160.   dark: {

  161.     '--color-attribute-name': '#9d87d2',

  162.     '--color-attribute-name-not-editable': '#ededed',

  163.     '--color-attribute-name-inverted': '#282828',

  164.     '--color-attribute-value': '#cedae0',

  165.     '--color-attribute-value-inverted': '#ffffff',

  166.     '--color-attribute-editable-value': 'yellow',

  167.     '--color-background': '#282c34',

  168.     '--color-background-hover': 'rgba(255, 255, 255, 0.1)',

  169.     '--color-background-inactive': '#3d424a',

  170.     '--color-background-invalid': '#5c0000',

  171.     '--color-background-selected': '#178fb9',

  172.     '--color-button-background': '#282c34',

  173.     '--color-button-background-focus': '#3d424a',

  174.     '--color-button': '#afb3b9',

  175.     '--color-button-active': '#61dafb',

  176.     '--color-button-disabled': '#4f5766',

  177.     '--color-button-focus': '#a2e9fc',

  178.     '--color-button-hover': '#ededed',

  179.     '--color-border': '#3d424a',

  180.     '--color-commit-did-not-render-fill': '#777d88',

  181.     '--color-commit-did-not-render-fill-text': '#000000',

  182.     '--color-commit-did-not-render-pattern': '#666c77',

  183.     '--color-commit-did-not-render-pattern-text': '#ffffff',

  184.     '--color-commit-gradient-0': '#37afa9',

  185.     '--color-commit-gradient-1': '#63b19e',

  186.     '--color-commit-gradient-2': '#80b393',

  187.     '--color-commit-gradient-3': '#97b488',

  188.     '--color-commit-gradient-4': '#abb67d',

  189.     '--color-commit-gradient-5': '#beb771',

  190.     '--color-commit-gradient-6': '#cfb965',

  191.     '--color-commit-gradient-7': '#dfba57',

  192.     '--color-commit-gradient-8': '#efbb49',

  193.     '--color-commit-gradient-9': '#febc38',

  194.     '--color-commit-gradient-text': '#000000',

  195.     '--color-component-name': '#61dafb',

  196.     '--color-component-name-inverted': '#282828',

  197.     '--color-component-badge-background': 'rgba(255, 255, 255, 0.25)',

  198.     '--color-component-badge-background-inverted': 'rgba(0, 0, 0, 0.25)',

  199.     '--color-component-badge-count': '#8f949d',

  200.     '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)',

  201.     '--color-console-error-badge-text': '#000000',

  202.     '--color-console-error-background': '#290000',

  203.     '--color-console-error-border': '#5c0000',

  204.     '--color-console-error-icon': '#eb3941',

  205.     '--color-console-error-text': '#fc7f7f',

  206.     '--color-console-warning-badge-text': '#000000',

  207.     '--color-console-warning-background': '#332b00',

  208.     '--color-console-warning-border': '#665500',

  209.     '--color-console-warning-icon': '#f4bd00',

  210.     '--color-console-warning-text': '#f5f2ed',

  211.     '--color-context-background': 'rgba(255,255,255,.95)',

  212.     '--color-context-background-hover': 'rgba(0, 136, 250, 0.1)',

  213.     '--color-context-background-selected': '#0088fa',

  214.     '--color-context-border': '#eeeeee',

  215.     '--color-context-text': '#000000',

  216.     '--color-context-text-selected': '#ffffff',

  217.     '--color-dim': '#8f949d',

  218.     '--color-dimmer': '#777d88',

  219.     '--color-dimmest': '#4f5766',

  220.     '--color-error-background': '#200',

  221.     '--color-error-border': '#900',

  222.     '--color-error-text': '#f55',

  223.     '--color-expand-collapse-toggle': '#8f949d',

  224.     '--color-link': '#61dafb',

  225.     '--color-modal-background': 'rgba(0, 0, 0, 0.75)',

  226.     '--color-bridge-version-npm-background': 'rgba(0, 0, 0, 0.25)',

  227.     '--color-bridge-version-npm-text': '#ffffff',

  228.     '--color-bridge-version-number': 'yellow',

  229.     '--color-primitive-hook-badge-background': 'rgba(0, 0, 0, 0.25)',

  230.     '--color-primitive-hook-badge-text': 'rgba(255, 255, 255, 0.7)',

  231.     '--color-record-active': '#fc3a4b',

  232.     '--color-record-hover': '#a2e9fc',

  233.     '--color-record-inactive': '#61dafb',

  234.     '--color-resize-bar': '#282c34',

  235.     '--color-resize-bar-active': '#31363f',

  236.     '--color-resize-bar-border': '#3d424a',

  237.     '--color-resize-bar-dot': '#cfd1d5',

  238.     '--color-timeline-internal-module': '#303542',

  239.     '--color-timeline-internal-module-hover': '#363b4a',

  240.     '--color-timeline-internal-module-text': '#7f8899',

  241.     '--color-timeline-native-event': '#b2b2b2',

  242.     '--color-timeline-native-event-hover': '#949494',

  243.     '--color-timeline-network-primary': '#fcf3dc',

  244.     '--color-timeline-network-primary-hover': '#e3dbc5',

  245.     '--color-timeline-network-secondary': '#efc457',

  246.     '--color-timeline-network-secondary-hover': '#d6af4d',

  247.     '--color-timeline-priority-background': '#1d2129',

  248.     '--color-timeline-priority-border': '#282c34',

  249.     '--color-timeline-user-timing': '#c9cacd',

  250.     '--color-timeline-user-timing-hover': '#93959a',

  251.     '--color-timeline-react-idle': '#3d485b',

  252.     '--color-timeline-react-idle-hover': '#465269',

  253.     '--color-timeline-react-render': '#2683E2',

  254.     '--color-timeline-react-render-hover': '#1a76d4',

  255.     '--color-timeline-react-render-text': '#11365e',

  256.     '--color-timeline-react-commit': '#731fad',

  257.     '--color-timeline-react-commit-hover': '#611b94',

  258.     '--color-timeline-react-commit-text': '#e5c1ff',

  259.     '--color-timeline-react-layout-effects': '#611b94',

  260.     '--color-timeline-react-layout-effects-hover': '#51167a',

  261.     '--color-timeline-react-layout-effects-text': '#e5c1ff',

  262.     '--color-timeline-react-passive-effects': '#611b94',

  263.     '--color-timeline-react-passive-effects-hover': '#51167a',

  264.     '--color-timeline-react-passive-effects-text': '#e5c1ff',

  265.     '--color-timeline-react-schedule': '#2683E2',

  266.     '--color-timeline-react-schedule-hover': '#1a76d4',

  267.     '--color-timeline-react-suspense-rejected': '#f1cc14',

  268.     '--color-timeline-react-suspense-rejected-hover': '#e4c00f',

  269.     '--color-timeline-react-suspense-resolved': '#a6e59f',

  270.     '--color-timeline-react-suspense-resolved-hover': '#89d281',

  271.     '--color-timeline-react-suspense-unresolved': '#c9cacd',

  272.     '--color-timeline-react-suspense-unresolved-hover': '#93959a',

  273.     '--color-timeline-thrown-error': '#fb3655',

  274.     '--color-timeline-thrown-error-hover': '#f82042',

  275.     '--color-timeline-text-color': '#282c34',

  276.     '--color-timeline-text-dim-color': '#555b66',

  277.     '--color-timeline-react-work-border': '#3d424a',

  278.     '--color-search-match': 'yellow',

  279.     '--color-search-match-current': '#f7923b',

  280.     '--color-selected-tree-highlight-active': 'rgba(23, 143, 185, 0.15)',

  281.     '--color-selected-tree-highlight-inactive': 'rgba(255, 255, 255, 0.05)',

  282.     '--color-scroll-caret': '#4f5766',

  283.     '--color-shadow': 'rgba(0, 0, 0, 0.5)',

  284.     '--color-tab-selected-border': '#178fb9',

  285.     '--color-text': '#ffffff',

  286.     '--color-text-invalid': '#ff8080',

  287.     '--color-text-selected': '#ffffff',

  288.     '--color-toggle-background-invalid': '#fc3a4b',

  289.     '--color-toggle-background-on': '#178fb9',

  290.     '--color-toggle-background-off': '#777d88',

  291.     '--color-toggle-text': '#ffffff',

  292.     '--color-warning-background': '#ee1638',

  293.     '--color-warning-background-hover': '#da1030',

  294.     '--color-warning-text-color': '#ffffff',

  295.     '--color-warning-text-color-inverted': '#ee1638',

  296. 

  297.     // The styles below should be kept in sync with 'root.css'

  298.     // They are repeated there because they're used by e.g. tooltips or context menus

  299.     // which get rendered outside of the DOM subtree (where normal theme/styles are written).

  300.     '--color-scroll-thumb': '#afb3b9',

  301.     '--color-scroll-track': '#313640',

  302.     '--color-tooltip-background': 'rgba(255, 255, 255, 0.95)',

  303.     '--color-tooltip-text': '#000000',

  304.   },

  305.   compact: {

  306.     '--font-size-monospace-small': '9px',

  307.     '--font-size-monospace-normal': '11px',

  308.     '--font-size-monospace-large': '15px',

  309.     '--font-size-sans-small': '10px',

  310.     '--font-size-sans-normal': '12px',

  311.     '--font-size-sans-large': '14px',

  312.     '--line-height-data': '18px',

  313.   },

  314.   comfortable: {

  315.     '--font-size-monospace-small': '10px',

  316.     '--font-size-monospace-normal': '13px',

  317.     '--font-size-monospace-large': '17px',

  318.     '--font-size-sans-small': '12px',

  319.     '--font-size-sans-normal': '14px',

  320.     '--font-size-sans-large': '16px',

  321.     '--line-height-data': '22px',

  322.   },

  323. };

  324. 

  325. // HACK

  326. //

  327. // Sometimes the inline target is rendered before root styles are applied,

  328. // which would result in e.g. NaN itemSize being passed to react-window list.

  329. const COMFORTABLE_LINE_HEIGHT: number = parseInt(

  330.   THEME_STYLES.comfortable['--line-height-data'],

  331.   10,

  332. );

  333. const COMPACT_LINE_HEIGHT: number = parseInt(

  334.   THEME_STYLES.compact['--line-height-data'],

  335.   10,

  336. );

  337. 

  338. export {COMFORTABLE_LINE_HEIGHT, COMPACT_LINE_HEIGHT};
About Sign Up Leave Feedback Contact