Skip to content

Commit 6522e17

Browse files
houssemchebebBrian Vaughn
houssemchebeb
authored and
Brian Vaughn
committed
Move styles to constants.js
1 parent 79ef81d commit 6522e17

File tree

2 files changed

+286
-281
lines changed

2 files changed

+286
-281
lines changed

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

Lines changed: 283 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,17 +55,295 @@ export const UNSUPPORTED_VERSION_URL =
5555
export const REACT_DEVTOOLS_WORKPLACE_URL =
5656
'https://fburl.com/react-devtools-workplace-group';
5757

58+
import type {
59+
Theme,
60+
DisplayDensity,
61+
} from './devtools/views/Settings/SettingsContext';
62+
63+
export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
64+
light: {
65+
'--color-attribute-name': '#ef6632',
66+
'--color-attribute-name-not-editable': '#23272f',
67+
'--color-attribute-name-inverted': 'rgba(255, 255, 255, 0.7)',
68+
'--color-attribute-value': '#1a1aa6',
69+
'--color-attribute-value-inverted': '#ffffff',
70+
'--color-attribute-editable-value': '#1a1aa6',
71+
'--color-background': '#ffffff',
72+
'--color-background-hover': 'rgba(0, 136, 250, 0.1)',
73+
'--color-background-inactive': '#e5e5e5',
74+
'--color-background-invalid': '#fff0f0',
75+
'--color-background-selected': '#0088fa',
76+
'--color-button-background': '#ffffff',
77+
'--color-button-background-focus': '#ededed',
78+
'--color-button': '#5f6673',
79+
'--color-button-disabled': '#cfd1d5',
80+
'--color-button-active': '#0088fa',
81+
'--color-button-focus': '#23272f',
82+
'--color-button-hover': '#23272f',
83+
'--color-border': '#eeeeee',
84+
'--color-commit-did-not-render-fill': '#cfd1d5',
85+
'--color-commit-did-not-render-fill-text': '#000000',
86+
'--color-commit-did-not-render-pattern': '#cfd1d5',
87+
'--color-commit-did-not-render-pattern-text': '#333333',
88+
'--color-commit-gradient-0': '#37afa9',
89+
'--color-commit-gradient-1': '#63b19e',
90+
'--color-commit-gradient-2': '#80b393',
91+
'--color-commit-gradient-3': '#97b488',
92+
'--color-commit-gradient-4': '#abb67d',
93+
'--color-commit-gradient-5': '#beb771',
94+
'--color-commit-gradient-6': '#cfb965',
95+
'--color-commit-gradient-7': '#dfba57',
96+
'--color-commit-gradient-8': '#efbb49',
97+
'--color-commit-gradient-9': '#febc38',
98+
'--color-commit-gradient-text': '#000000',
99+
'--color-component-name': '#6a51b2',
100+
'--color-component-name-inverted': '#ffffff',
101+
'--color-component-badge-background': 'rgba(0, 0, 0, 0.1)',
102+
'--color-component-badge-background-inverted': 'rgba(255, 255, 255, 0.25)',
103+
'--color-component-badge-count': '#777d88',
104+
'--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)',
105+
'--color-console-error-badge-text': '#ffffff',
106+
'--color-console-error-background': '#fff0f0',
107+
'--color-console-error-border': '#ffd6d6',
108+
'--color-console-error-icon': '#eb3941',
109+
'--color-console-error-text': '#fe2e31',
110+
'--color-console-warning-badge-text': '#000000',
111+
'--color-console-warning-background': '#fffbe5',
112+
'--color-console-warning-border': '#fff5c1',
113+
'--color-console-warning-icon': '#f4bd00',
114+
'--color-console-warning-text': '#64460c',
115+
'--color-context-background': 'rgba(0,0,0,.9)',
116+
'--color-context-background-hover': 'rgba(255, 255, 255, 0.1)',
117+
'--color-context-background-selected': '#178fb9',
118+
'--color-context-border': '#3d424a',
119+
'--color-context-text': '#ffffff',
120+
'--color-context-text-selected': '#ffffff',
121+
'--color-dim': '#777d88',
122+
'--color-dimmer': '#cfd1d5',
123+
'--color-dimmest': '#eff0f1',
124+
'--color-error-background': 'hsl(0, 100%, 97%)',
125+
'--color-error-border': 'hsl(0, 100%, 92%)',
126+
'--color-error-text': '#ff0000',
127+
'--color-expand-collapse-toggle': '#777d88',
128+
'--color-link': '#0000ff',
129+
'--color-modal-background': 'rgba(255, 255, 255, 0.75)',
130+
'--color-bridge-version-npm-background': '#eff0f1',
131+
'--color-bridge-version-npm-text': '#000000',
132+
'--color-bridge-version-number': '#0088fa',
133+
'--color-primitive-hook-badge-background': '#e5e5e5',
134+
'--color-primitive-hook-badge-text': '#5f6673',
135+
'--color-record-active': '#fc3a4b',
136+
'--color-record-hover': '#3578e5',
137+
'--color-record-inactive': '#0088fa',
138+
'--color-resize-bar': '#cccccc',
139+
'--color-scheduling-profiler-native-event': '#ccc',
140+
'--color-scheduling-profiler-native-event-hover': '#aaa',
141+
'--color-scheduling-profiler-native-event-warning': '#ee1638',
142+
'--color-scheduling-profiler-native-event-warning-hover': '#da1030',
143+
'--color-scheduling-profiler-native-event-warning-text': '#fff',
144+
'--color-scheduling-profiler-priority-background': '#f6f6f6',
145+
'--color-scheduling-profiler-priority-border': '#eeeeee',
146+
'--color-scheduling-profiler-user-timing': '#c9cacd',
147+
'--color-scheduling-profiler-user-timing-hover': '#93959a',
148+
'--color-scheduling-profiler-react-idle': '#edf6ff',
149+
'--color-scheduling-profiler-react-idle-selected': '#EDF6FF',
150+
'--color-scheduling-profiler-react-idle-hover': '#EDF6FF',
151+
'--color-scheduling-profiler-react-render': '#9fc3f3',
152+
'--color-scheduling-profiler-react-render-selected': '#64A9F5',
153+
'--color-scheduling-profiler-react-render-hover': '#2683E2',
154+
'--color-scheduling-profiler-react-commit': '#ff718e',
155+
'--color-scheduling-profiler-react-commit-selected': '#FF5277',
156+
'--color-scheduling-profiler-react-commit-hover': '#ed0030',
157+
'--color-scheduling-profiler-react-layout-effects': '#c88ff0',
158+
'--color-scheduling-profiler-react-layout-effects-selected': '#934FC1',
159+
'--color-scheduling-profiler-react-layout-effects-hover': '#601593',
160+
'--color-scheduling-profiler-react-passive-effects': '#c88ff0',
161+
'--color-scheduling-profiler-react-passive-effects-selected': '#934FC1',
162+
'--color-scheduling-profiler-react-passive-effects-hover': '#601593',
163+
'--color-scheduling-profiler-react-schedule': '#9fc3f3',
164+
'--color-scheduling-profiler-react-schedule-hover': '#2683E2',
165+
'--color-scheduling-profiler-react-schedule-cascading': '#ff718e',
166+
'--color-scheduling-profiler-react-schedule-cascading-hover': '#ed0030',
167+
'--color-scheduling-profiler-react-suspend': '#a6e59f',
168+
'--color-scheduling-profiler-react-suspend-hover': '#13bc00',
169+
'--light-color-scheduling-profiler-text-color': '#000000',
170+
'--color-scheduling-profiler-react-work-border': '#ffffff',
171+
'--color-scroll-thumb': '#c2c2c2',
172+
'--color-scroll-track': '#fafafa',
173+
'--color-search-match': 'yellow',
174+
'--color-search-match-current': '#f7923b',
175+
'--color-selected-tree-highlight-active': 'rgba(0, 136, 250, 0.1)',
176+
'--color-selected-tree-highlight-inactive': 'rgba(0, 0, 0, 0.05)',
177+
'--color-shadow': 'rgba(0, 0, 0, 0.25)',
178+
'--color-tab-selected-border': '#0088fa',
179+
'--color-text': '#000000',
180+
'--color-text-invalid': '#ff0000',
181+
'--color-text-selected': '#ffffff',
182+
'--color-toggle-background-invalid': '#fc3a4b',
183+
'--color-toggle-background-on': '#0088fa',
184+
'--color-toggle-background-off': '#cfd1d5',
185+
'--color-toggle-text': '#ffffff',
186+
'--color-tooltip-background': 'rgba(0, 0, 0, 0.95)',
187+
'--color-tooltip-text': '#ffffff',
188+
'--font-smoothing': 'auto',
189+
},
190+
dark: {
191+
'--color-attribute-name': '#9d87d2',
192+
'--color-attribute-name-not-editable': '#ededed',
193+
'--color-attribute-name-inverted': '#282828',
194+
'--color-attribute-value': '#cedae0',
195+
'--color-attribute-value-inverted': '#ffffff',
196+
'--color-attribute-editable-value': 'yellow',
197+
'--color-background': '#282c34',
198+
'--color-background-hover': 'rgba(255, 255, 255, 0.1)',
199+
'--color-background-inactive': '#3d424a',
200+
'--color-background-invalid': '#5c0000',
201+
'--color-background-selected': '#178fb9',
202+
'--color-button-background': '#282c34',
203+
'--color-button-background-focus': '#3d424a',
204+
'--color-button': '#afb3b9',
205+
'--color-button-active': '#61dafb',
206+
'--color-button-disabled': '#4f5766',
207+
'--color-button-focus': '#a2e9fc',
208+
'--color-button-hover': '#ededed',
209+
'--color-border': '#3d424a',
210+
'--color-commit-did-not-render-fill': '#777d88',
211+
'--color-commit-did-not-render-fill-text': '#000000',
212+
'--color-commit-did-not-render-pattern': '#666c77',
213+
'--color-commit-did-not-render-pattern-text': '#ffffff',
214+
'--color-commit-gradient-0': '#37afa9',
215+
'--color-commit-gradient-1': '#63b19e',
216+
'--color-commit-gradient-2': '#80b393',
217+
'--color-commit-gradient-3': '#97b488',
218+
'--color-commit-gradient-4': '#abb67d',
219+
'--color-commit-gradient-5': '#beb771',
220+
'--color-commit-gradient-6': '#cfb965',
221+
'--color-commit-gradient-7': '#dfba57',
222+
'--color-commit-gradient-8': '#efbb49',
223+
'--color-commit-gradient-9': '#febc38',
224+
'--color-commit-gradient-text': '#000000',
225+
'--color-component-name': '#61dafb',
226+
'--color-component-name-inverted': '#282828',
227+
'--color-component-badge-background': 'rgba(255, 255, 255, 0.25)',
228+
'--color-component-badge-background-inverted': 'rgba(0, 0, 0, 0.25)',
229+
'--color-component-badge-count': '#8f949d',
230+
'--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)',
231+
'--color-console-error-badge-text': '#000000',
232+
'--color-console-error-background': '#290000',
233+
'--color-console-error-border': '#5c0000',
234+
'--color-console-error-icon': '#eb3941',
235+
'--color-console-error-text': '#fc7f7f',
236+
'--color-console-warning-badge-text': '#000000',
237+
'--color-console-warning-background': '#332b00',
238+
'--color-console-warning-border': '#665500',
239+
'--color-console-warning-icon': '#f4bd00',
240+
'--color-console-warning-text': '#f5f2ed',
241+
'--color-context-background': 'rgba(255,255,255,.95)',
242+
'--color-context-background-hover': 'rgba(0, 136, 250, 0.1)',
243+
'--color-context-background-selected': '#0088fa',
244+
'--color-context-border': '#eeeeee',
245+
'--color-context-text': '#000000',
246+
'--color-context-text-selected': '#ffffff',
247+
'--color-dim': '#8f949d',
248+
'--color-dimmer': '#777d88',
249+
'--color-dimmest': '#4f5766',
250+
'--color-error-background': '#200',
251+
'--color-error-border': '#900',
252+
'--color-error-text': '#f55',
253+
'--color-expand-collapse-toggle': '#8f949d',
254+
'--color-link': '#61dafb',
255+
'--color-modal-background': 'rgba(0, 0, 0, 0.75)',
256+
'--color-bridge-version-npm-background': 'rgba(0, 0, 0, 0.25)',
257+
'--color-bridge-version-npm-text': '#ffffff',
258+
'--color-bridge-version-number': 'yellow',
259+
'--color-primitive-hook-badge-background': 'rgba(0, 0, 0, 0.25)',
260+
'--color-primitive-hook-badge-text': 'rgba(255, 255, 255, 0.7)',
261+
'--color-record-active': '#fc3a4b',
262+
'--color-record-hover': '#a2e9fc',
263+
'--color-record-inactive': '#61dafb',
264+
'--color-resize-bar': '#3d424a',
265+
'--color-scheduling-profiler-native-event': '#b2b2b2',
266+
'--color-scheduling-profiler-native-event-hover': '#949494',
267+
'--color-scheduling-profiler-native-event-warning': '#ee1638',
268+
'--color-scheduling-profiler-native-event-warning-hover': '#da1030',
269+
'--color-scheduling-profiler-native-event-warning-text': '#fff',
270+
'--color-scheduling-profiler-priority-background': '#1d2129',
271+
'--color-scheduling-profiler-priority-border': '#282c34',
272+
'--color-scheduling-profiler-user-timing': '#c9cacd',
273+
'--color-scheduling-profiler-user-timing-hover': '#93959a',
274+
'--color-scheduling-profiler-react-idle': '#3d485b',
275+
'--color-scheduling-profiler-react-idle-selected': '#465269',
276+
'--color-scheduling-profiler-react-idle-hover': '#465269',
277+
'--color-scheduling-profiler-react-render': '#9fc3f3',
278+
'--color-scheduling-profiler-react-render-selected': '#64A9F5',
279+
'--color-scheduling-profiler-react-render-hover': '#2683E2',
280+
'--color-scheduling-profiler-react-commit': '#ff718e',
281+
'--color-scheduling-profiler-react-commit-selected': '#FF5277',
282+
'--color-scheduling-profiler-react-commit-hover': '#ed0030',
283+
'--color-scheduling-profiler-react-layout-effects': '#c88ff0',
284+
'--color-scheduling-profiler-react-layout-effects-selected': '#934FC1',
285+
'--color-scheduling-profiler-react-layout-effects-hover': '#601593',
286+
'--color-scheduling-profiler-react-passive-effects': '#c88ff0',
287+
'--color-scheduling-profiler-react-passive-effects-selected': '#934FC1',
288+
'--color-scheduling-profiler-react-passive-effects-hover': '#601593',
289+
'--color-scheduling-profiler-react-schedule': '#9fc3f3',
290+
'--color-scheduling-profiler-react-schedule-hover': '#2683E2',
291+
'--color-scheduling-profiler-react-schedule-cascading': '#ff718e',
292+
'--color-scheduling-profiler-react-schedule-cascading-hover': '#ed0030',
293+
'--color-scheduling-profiler-react-suspend': '#a6e59f',
294+
'--color-scheduling-profiler-react-suspend-hover': '#13bc00',
295+
'--color-scheduling-profiler-text-color': '#000000',
296+
'--color-scheduling-profiler-react-work-border': '#ffffff',
297+
'--color-scroll-thumb': '#afb3b9',
298+
'--color-scroll-track': '#313640',
299+
'--color-search-match': 'yellow',
300+
'--color-search-match-current': '#f7923b',
301+
'--color-selected-tree-highlight-active': 'rgba(23, 143, 185, 0.15)',
302+
'--color-selected-tree-highlight-inactive': 'rgba(255, 255, 255, 0.05)',
303+
'--color-shadow': 'rgba(0, 0, 0, 0.5)',
304+
'--color-tab-selected-border': '#178fb9',
305+
'--color-text': '#ffffff',
306+
'--color-text-invalid': '#ff8080',
307+
'--color-text-selected': '#ffffff',
308+
'--color-toggle-background-invalid': '#fc3a4b',
309+
'--color-toggle-background-on': '#178fb9',
310+
'--color-toggle-background-off': '#777d88',
311+
'--color-toggle-text': '#ffffff',
312+
'--color-tooltip-background': 'rgba(255, 255, 255, 0.95)',
313+
'--color-tooltip-text': '#000000',
314+
'--font-smoothing': 'antialiased',
315+
},
316+
compact: {
317+
'--font-size-monospace-small': '9px',
318+
'--font-size-monospace-normal': '11px',
319+
'--font-size-monospace-large': '15px',
320+
'--font-size-sans-small': '10px',
321+
'--font-size-sans-normal': '12px',
322+
'--font-size-sans-large': '14px',
323+
'--line-height-data': '18px',
324+
},
325+
comfortable: {
326+
'--font-size-monospace-small': '10px',
327+
'--font-size-monospace-normal': '13px',
328+
'--font-size-monospace-large': '17px',
329+
'--font-size-sans-small': '12px',
330+
'--font-size-sans-normal': '14px',
331+
'--font-size-sans-large': '16px',
332+
'--line-height-data': '22px',
333+
},
334+
};
335+
58336
// HACK
59337
//
60338
// Sometimes the inline target is rendered before root styles are applied,
61339
// which would result in e.g. NaN itemSize being passed to react-window list.
62-
const {
63-
styles,
64-
} = require('react-devtools-shared/src/devtools/views/ThemeProvider');
65340
const COMFORTABLE_LINE_HEIGHT = parseInt(
66-
styles.comfortable['--line-height-data'],
341+
THEME_STYLES.comfortable['--line-height-data'],
342+
10,
343+
);
344+
const COMPACT_LINE_HEIGHT = parseInt(
345+
THEME_STYLES.compact['--line-height-data'],
67346
10,
68347
);
69-
const COMPACT_LINE_HEIGHT = parseInt(styles.compact['--line-height-data'], 10);
70348

71349
export {COMFORTABLE_LINE_HEIGHT, COMPACT_LINE_HEIGHT};

0 commit comments

Comments
 (0)