| 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-background-hover': 'rgba(0, 0, 0, 0.2)', |
| 31 | '--color-button': '#5f6673', |
| 32 | '--color-button-disabled': '#cfd1d5', |
| 33 | '--color-button-active': '#0088fa', |
| 34 | '--color-button-focus': '#23272f', |
| 35 | '--color-button-hover': '#23272f', |
| 36 | '--color-border': '#eeeeee', |
| 37 | '--color-commit-did-not-render-fill': '#cfd1d5', |
| 38 | '--color-commit-did-not-render-fill-text': '#000000', |
| 39 | '--color-commit-did-not-render-pattern': '#cfd1d5', |
| 40 | '--color-commit-did-not-render-pattern-text': '#333333', |
| 41 | '--color-commit-gradient-0': '#37afa9', |
| 42 | '--color-commit-gradient-1': '#63b19e', |
| 43 | '--color-commit-gradient-2': '#80b393', |
| 44 | '--color-commit-gradient-3': '#97b488', |
| 45 | '--color-commit-gradient-4': '#abb67d', |
| 46 | '--color-commit-gradient-5': '#beb771', |
| 47 | '--color-commit-gradient-6': '#cfb965', |
| 48 | '--color-commit-gradient-7': '#dfba57', |
| 49 | '--color-commit-gradient-8': '#efbb49', |
| 50 | '--color-commit-gradient-9': '#febc38', |
| 51 | '--color-commit-gradient-text': '#000000', |
| 52 | '--color-component-name': '#6a51b2', |
| 53 | '--color-component-name-inverted': '#ffffff', |
| 54 | '--color-component-badge-background': '#e6e6e6', |
| 55 | '--color-component-badge-background-inverted': 'rgba(255, 255, 255, 0.25)', |
| 56 | '--color-component-badge-count': '#777d88', |
| 57 | '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)', |
| 58 | '--color-console-error-badge-text': '#ffffff', |
| 59 | '--color-console-error-background': '#fff0f0', |
| 60 | '--color-console-error-border': '#ffd6d6', |
| 61 | '--color-console-error-icon': '#eb3941', |
| 62 | '--color-console-error-text': '#fe2e31', |
| 63 | '--color-console-warning-badge-text': '#000000', |
| 64 | '--color-console-warning-background': '#fffbe5', |
| 65 | '--color-console-warning-border': '#fff5c1', |
| 66 | '--color-console-warning-icon': '#f4bd00', |
| 67 | '--color-console-warning-text': '#64460c', |
| 68 | '--color-context-background': 'rgba(0,0,0,.9)', |
| 69 | '--color-context-background-hover': 'rgba(255, 255, 255, 0.1)', |
| 70 | '--color-context-background-selected': '#178fb9', |
| 71 | '--color-context-border': '#3d424a', |
| 72 | '--color-context-text': '#ffffff', |
| 73 | '--color-context-text-selected': '#ffffff', |
| 74 | '--color-dim': '#777d88', |
| 75 | '--color-dimmer': '#cfd1d5', |
| 76 | '--color-dimmest': '#eff0f1', |
| 77 | '--color-error-background': 'hsl(0, 100%, 97%)', |
| 78 | '--color-error-border': 'hsl(0, 100%, 92%)', |
| 79 | '--color-error-text': '#ff0000', |
| 80 | '--color-expand-collapse-toggle': '#777d88', |
| 81 | '--color-forget-badge-background': '#2683e2', |
| 82 | '--color-forget-badge-background-inverted': '#1a6bbc', |
| 83 | '--color-forget-text': '#fff', |
| 84 | '--color-link': '#0000ff', |
| 85 | '--color-modal-background': 'rgba(255, 255, 255, 0.75)', |
| 86 | '--color-bridge-version-npm-background': '#eff0f1', |
| 87 | '--color-bridge-version-npm-text': '#000000', |
| 88 | '--color-bridge-version-number': '#0088fa', |
| 89 | '--color-primitive-hook-badge-background': '#e5e5e5', |
| 90 | '--color-primitive-hook-badge-text': '#5f6673', |
| 91 | '--color-record-active': '#fc3a4b', |
| 92 | '--color-record-hover': '#3578e5', |
| 93 | '--color-record-inactive': '#0088fa', |
| 94 | '--color-resize-bar': '#eeeeee', |
| 95 | '--color-resize-bar-active': '#dcdcdc', |
| 96 | '--color-resize-bar-border': '#d1d1d1', |
| 97 | '--color-resize-bar-dot': '#333333', |
| 98 | '--color-timebar-background': '#f6f6f6', |
| 99 | '--color-search-match': 'yellow', |
| 100 | '--color-search-match-current': '#f7923b', |
| 101 | '--color-selected-tree-highlight-active': 'rgba(0, 136, 250, 0.1)', |
| 102 | '--color-selected-tree-highlight-inactive': 'rgba(0, 0, 0, 0.05)', |
| 103 | '--color-tab-selected-border': '#0088fa', |
| 104 | '--color-text': '#000000', |
| 105 | '--color-text-invalid': '#ff0000', |
| 106 | '--color-text-selected': '#ffffff', |
| 107 | '--color-toggle-background-invalid': '#fc3a4b', |
| 108 | '--color-toggle-background-on': '#0088fa', |
| 109 | '--color-toggle-background-off': '#cfd1d5', |
| 110 | '--color-toggle-text': '#ffffff', |
| 111 | '--color-warning-background': '#fb3655', |
| 112 | '--color-warning-background-hover': '#f82042', |
| 113 | '--color-warning-text-color': '#ffffff', |
| 114 | '--color-warning-text-color-inverted': '#fd4d69', |
| 115 | |
| 116 | '--color-suspense-default': '#0088fa', |
| 117 | '--color-transition-default': '#6a51b2', |
| 118 | '--color-suspense-server': '#62bc6a', |
| 119 | '--color-transition-server': '#3f7844', |
| 120 | '--color-suspense-other': '#f3ce49', |
| 121 | '--color-transition-other': '#917b2c', |
| 122 | '--color-suspense-errored': '#d57066', |
| 123 | |
| 124 | // The styles below should be kept in sync with 'root.css' |
| 125 | // They are repeated there because they're used by e.g. tooltips or context menus |
| 126 | // which get rendered outside of the DOM subtree (where normal theme/styles are written). |
| 127 | '--color-scroll-thumb': '#c2c2c2', |
| 128 | '--color-scroll-track': '#fafafa', |
| 129 | '--color-tooltip-background': 'rgba(0, 0, 0, 0.9)', |
| 130 | '--color-tooltip-text': '#ffffff', |
| 131 | |
| 132 | '--elevation-4': |
| 133 | '0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)', |
| 134 | }, |
| 135 | dark: { |
| 136 | '--color-attribute-name': '#9d87d2', |
| 137 | '--color-attribute-name-not-editable': '#ededed', |
| 138 | '--color-attribute-name-inverted': '#282828', |
| 139 | '--color-attribute-value': '#cedae0', |
| 140 | '--color-attribute-value-inverted': '#ffffff', |
| 141 | '--color-attribute-editable-value': 'yellow', |
| 142 | '--color-background': '#282c34', |
| 143 | '--color-background-hover': 'rgba(255, 255, 255, 0.1)', |
| 144 | '--color-background-inactive': '#3d424a', |
| 145 | '--color-background-invalid': '#5c0000', |
| 146 | '--color-background-selected': '#178fb9', |
| 147 | '--color-button-background': '#282c34', |
| 148 | '--color-button-background-focus': '#3d424a', |
| 149 | '--color-button-background-hover': 'rgba(255, 255, 255, 0.2)', |
| 150 | '--color-button': '#afb3b9', |
| 151 | '--color-button-active': '#61dafb', |
| 152 | '--color-button-disabled': '#4f5766', |
| 153 | '--color-button-focus': '#a2e9fc', |
| 154 | '--color-button-hover': '#ededed', |
| 155 | '--color-border': '#3d424a', |
| 156 | '--color-commit-did-not-render-fill': '#777d88', |
| 157 | '--color-commit-did-not-render-fill-text': '#000000', |
| 158 | '--color-commit-did-not-render-pattern': '#666c77', |
| 159 | '--color-commit-did-not-render-pattern-text': '#ffffff', |
| 160 | '--color-commit-gradient-0': '#37afa9', |
| 161 | '--color-commit-gradient-1': '#63b19e', |
| 162 | '--color-commit-gradient-2': '#80b393', |
| 163 | '--color-commit-gradient-3': '#97b488', |
| 164 | '--color-commit-gradient-4': '#abb67d', |
| 165 | '--color-commit-gradient-5': '#beb771', |
| 166 | '--color-commit-gradient-6': '#cfb965', |
| 167 | '--color-commit-gradient-7': '#dfba57', |
| 168 | '--color-commit-gradient-8': '#efbb49', |
| 169 | '--color-commit-gradient-9': '#febc38', |
| 170 | '--color-commit-gradient-text': '#000000', |
| 171 | '--color-component-name': '#61dafb', |
| 172 | '--color-component-name-inverted': '#282828', |
| 173 | '--color-component-badge-background': '#5e6167', |
| 174 | '--color-component-badge-background-inverted': '#46494e', |
| 175 | '--color-component-badge-count': '#8f949d', |
| 176 | '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.85)', |
| 177 | '--color-console-error-badge-text': '#000000', |
| 178 | '--color-console-error-background': '#290000', |
| 179 | '--color-console-error-border': '#5c0000', |
| 180 | '--color-console-error-icon': '#eb3941', |
| 181 | '--color-console-error-text': '#fc7f7f', |
| 182 | '--color-console-warning-badge-text': '#000000', |
| 183 | '--color-console-warning-background': '#332b00', |
| 184 | '--color-console-warning-border': '#665500', |
| 185 | '--color-console-warning-icon': '#f4bd00', |
| 186 | '--color-console-warning-text': '#f5f2ed', |
| 187 | '--color-context-background': 'rgba(255,255,255,.95)', |
| 188 | '--color-context-background-hover': 'rgba(0, 136, 250, 0.1)', |
| 189 | '--color-context-background-selected': '#0088fa', |
| 190 | '--color-context-border': '#eeeeee', |
| 191 | '--color-context-text': '#000000', |
| 192 | '--color-context-text-selected': '#ffffff', |
| 193 | '--color-dim': '#8f949d', |
| 194 | '--color-dimmer': '#777d88', |
| 195 | '--color-dimmest': '#4f5766', |
| 196 | '--color-error-background': '#200', |
| 197 | '--color-error-border': '#900', |
| 198 | '--color-error-text': '#f55', |
| 199 | '--color-expand-collapse-toggle': '#8f949d', |
| 200 | '--color-forget-badge-background': '#2683e2', |
| 201 | '--color-forget-badge-background-inverted': '#1a6bbc', |
| 202 | '--color-forget-text': '#fff', |
| 203 | '--color-link': '#61dafb', |
| 204 | '--color-modal-background': 'rgba(0, 0, 0, 0.75)', |
| 205 | '--color-bridge-version-npm-background': 'rgba(0, 0, 0, 0.25)', |
| 206 | '--color-bridge-version-npm-text': '#ffffff', |
| 207 | '--color-bridge-version-number': 'yellow', |
| 208 | '--color-primitive-hook-badge-background': 'rgba(0, 0, 0, 0.25)', |
| 209 | '--color-primitive-hook-badge-text': 'rgba(255, 255, 255, 0.7)', |
| 210 | '--color-record-active': '#fc3a4b', |
| 211 | '--color-record-hover': '#a2e9fc', |
| 212 | '--color-record-inactive': '#61dafb', |
| 213 | '--color-resize-bar': '#282c34', |
| 214 | '--color-resize-bar-active': '#31363f', |
| 215 | '--color-resize-bar-border': '#3d424a', |
| 216 | '--color-resize-bar-dot': '#cfd1d5', |
| 217 | '--color-timebar-background': '#1d2129', |
| 218 | '--color-search-match': 'yellow', |
| 219 | '--color-search-match-current': '#f7923b', |
| 220 | '--color-selected-tree-highlight-active': 'rgba(23, 143, 185, 0.15)', |
| 221 | '--color-selected-tree-highlight-inactive': 'rgba(255, 255, 255, 0.05)', |
| 222 | '--color-shadow': 'rgba(0, 0, 0, 0.5)', |
| 223 | '--color-tab-selected-border': '#178fb9', |
| 224 | '--color-text': '#ffffff', |
| 225 | '--color-text-invalid': '#ff8080', |
| 226 | '--color-text-selected': '#ffffff', |
| 227 | '--color-toggle-background-invalid': '#fc3a4b', |
| 228 | '--color-toggle-background-on': '#178fb9', |
| 229 | '--color-toggle-background-off': '#777d88', |
| 230 | '--color-toggle-text': '#ffffff', |
| 231 | '--color-warning-background': '#ee1638', |
| 232 | '--color-warning-background-hover': '#da1030', |
| 233 | '--color-warning-text-color': '#ffffff', |
| 234 | '--color-warning-text-color-inverted': '#ee1638', |
| 235 | |
| 236 | '--color-suspense-default': '#61dafb', |
| 237 | '--color-transition-default': '#6a51b2', |
| 238 | '--color-suspense-server': '#62bc6a', |
| 239 | '--color-transition-server': '#3f7844', |
| 240 | '--color-suspense-other': '#f3ce49', |
| 241 | '--color-transition-other': '#917b2c', |
| 242 | '--color-suspense-errored': '#d57066', |
| 243 | |
| 244 | // The styles below should be kept in sync with 'root.css' |
| 245 | // They are repeated there because they're used by e.g. tooltips or context menus |
| 246 | // which get rendered outside of the DOM subtree (where normal theme/styles are written). |
| 247 | '--color-scroll-thumb': '#afb3b9', |
| 248 | '--color-scroll-track': '#313640', |
| 249 | '--color-tooltip-background': 'rgba(255, 255, 255, 0.95)', |
| 250 | '--color-tooltip-text': '#000000', |
| 251 | |
| 252 | '--elevation-4': |
| 253 | '0 2px 8px 0 rgba(0,0,0,0.32),0 4px 12px 0 rgba(0,0,0,0.24),0 1px 10px 0 rgba(0,0,0,0.18)', |
| 254 | }, |
| 255 | compact: { |
| 256 | '--font-size-monospace-small': '9px', |
| 257 | '--font-size-monospace-normal': '11px', |
| 258 | '--font-size-monospace-large': '15px', |
| 259 | '--font-size-sans-small': '10px', |
| 260 | '--font-size-sans-normal': '12px', |
| 261 | '--font-size-sans-large': '14px', |
| 262 | '--line-height-data': '18px', |
| 263 | }, |
| 264 | comfortable: { |
| 265 | '--font-size-monospace-small': '10px', |
| 266 | '--font-size-monospace-normal': '13px', |
| 267 | '--font-size-monospace-large': '17px', |
| 268 | '--font-size-sans-small': '12px', |
| 269 | '--font-size-sans-normal': '14px', |
| 270 | '--font-size-sans-large': '16px', |
| 271 | '--line-height-data': '22px', |
| 272 | }, |
| 273 | }; |
| 274 | |
| 275 | // HACK |
| 276 | // |
| 277 | // Sometimes the inline target is rendered before root styles are applied, |
| 278 | // which would result in e.g. NaN itemSize being passed to react-window list. |
| 279 | const COMFORTABLE_LINE_HEIGHT: number = parseInt( |
| 280 | THEME_STYLES.comfortable['--line-height-data'], |
| 281 | 10, |
| 282 | ); |
| 283 | const COMPACT_LINE_HEIGHT: number = parseInt( |
| 284 | THEME_STYLES.compact['--line-height-data'], |
| 285 | 10, |
| 286 | ); |
| 287 | |
| 288 | export {COMFORTABLE_LINE_HEIGHT, COMPACT_LINE_HEIGHT}; |