1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
7 * This file is parsed in js (see client/shared/theme.js)
8 * so the formatting should be consistent (i.e. no '}' inside a rule).
13 --theme-body-font-size: 11px;
14 --theme-code-font-size: 11px;
15 --theme-code-line-height: calc
(15 / 11);
17 /* Toolbar size (excluding borders) */
18 --theme-toolbar-height: 24px;
19 --theme-toolbar-tall-height: 28px;
21 /* For accessibility purposes we want to enhance the focus styling. This
22 * should improve keyboard navigation usability. */
23 --theme-focus-outline-color: var
(--blue-50
);
24 --theme-focus-outline-size: 2px;
25 --theme-focus-outline: var
(--theme-focus-outline-size
) solid var
(--theme-focus-outline-color
);
26 --theme-outline-offset: 0px;
28 * we want the box shadow to be 2px bigger than the offset so we have a "double border"
29 * (without it impacting the element layout), which should work whatever
30 * the background-color is (e.g. a clickable element in a "selected" blue-background container)
32 --theme-outline-box-shadow-size: calc
(2px + var
(--theme-focus-outline-size
) + var
(--theme-outline-offset
));
33 --theme-outline-box-shadow: 0 0 0 var
(--theme-outline-box-shadow-size
) var
(--theme-body-background
);
35 /* Standardizes the height of items in the Watch Expressions and XHR Breakpoints panes */
36 --expression-item-height: 20.5px;
38 /* The photon animation curve */
39 --animation-curve: cubic-bezier
(0.07, 0.95, 0, 1);
41 /* This should be similar to --highlighter-box-content-color from highlighter.css,
42 * with lower opacity than the 0.6 we apply on highlighter so this can be used as
43 * background color without being too bold
45 --dimmed-highlighter-box-content-color:hsl
(197,71%,73%,.3);
48 * Photon Colors CSS Variables v3.3.2
49 * - Colors are taken from https://github.com/FirefoxUX/photon-colors/blob/master/photon-colors.css
50 * - We only add Photon color variables that we are actually using; unused
51 * variables will fail browser/base/content/test/static/browser_parsable_css.js
52 * - We added a few unofficial colors: a few intermediary values (e.g. Blue 45),
53 * and lighter variants for the dark theme (e.g. Red 20, Red 40).
55 --magenta-50: #ff1ad9;
56 --magenta-65: #dd00a9;
57 --magenta-70: #b5007f;
66 --blue-50-a30: rgba
(10, 132, 255, 0.3);
83 /* interpolated from yellow-70 and yellow-80 */
90 --red-40-a90: rgba
(255, 59, 107, 0.9);
96 --grey-10-a15: rgba
(249, 249, 250, 0.15);
97 --grey-10-a20: rgba
(249, 249, 250, 0.2);
98 --grey-10-a25: rgba
(249, 249, 250, 0.25);
99 --grey-10-a30: rgba
(249, 249, 250, 0.3);
114 --grey-90-a05: rgba
(12, 12, 13, 0.05);
115 --grey-90-a10: rgba
(12, 12, 13, 0.1);
116 --grey-90-a15: rgba
(12, 12, 13, 0.15);
117 --grey-90-a20: rgba
(12, 12, 13, 0.2);
118 --grey-90-a30: rgba
(12, 12, 13, 0.3);
122 --theme-body-background: white
;
123 --theme-body-emphasized-background: var
(--grey-10
);
124 --theme-body-alternate-emphasized-background: #f0f9fe;
125 --theme-sidebar-background: white
;
128 --theme-tab-toolbar-background: var
(--grey-10
);
129 --theme-toolbar-background: var
(--grey-10
);
130 --theme-toolbar-color: var
(--grey-90
);
131 --theme-toolbar-selected-color: var
(--blue-60
);
132 --theme-toolbar-highlighted-color: var
(--green-60
);
133 --theme-toolbar-background-hover: rgba
(221, 225, 228, 0.66);
134 --theme-toolbar-background-alt: #f5f5f5;
135 --theme-toolbar-background-highlighted: #b9dcff;
136 --theme-toolbar-error-background: var
(--red-05
);
137 --theme-toolbar-hover: var
(--grey-20
);
138 --theme-toolbar-hover-active: var
(--grey-20
);
139 --theme-toolbar-separator: var
(--grey-90-a10
);
141 /* Toolbar buttons */
142 --toolbarbutton-background: var
(--grey-10
);
143 --toolbarbutton-hover-background: var
(--grey-20
);
144 --toolbarbutton-focus-background: var
(--grey-20
);
145 --toolbarbutton-focus-color: var
(--grey-70
);
146 --toolbarbutton-checked-background: var
(--blue-55
);
147 --toolbarbutton-checked-focus-background: var
(--blue-60
);
148 --toolbarbutton-checked-color: #ffffff;
151 --theme-button-background: rgba
(12, 12, 13, 0.05);
152 --theme-button-active-background: rgba
(12, 12, 13, 0.1);
154 /* Accordion headers */
155 --theme-accordion-header-background: var
(--theme-toolbar-background
);
156 --theme-accordion-header-hover: var
(--theme-toolbar-hover
);
159 --theme-selection-background: var
(--blue-55
);
160 --theme-selection-background-hover: #f0f9fe;
161 --theme-selection-focus-background: var
(--toolbarbutton-hover-background
);
162 --theme-selection-color: #ffffff;
164 /* Border color that splits the toolbars/panels/headers. */
165 --theme-splitter-color: var
(--grey-25
);
166 --theme-emphasized-splitter-color: var
(--grey-30
);
167 --theme-emphasized-splitter-color-hover: var
(--grey-40
);
170 --theme-icon-color: rgba
(12, 12, 13, 0.8);
171 --theme-icon-dimmed-color: rgba
(135, 135, 137, 0.9);
172 --theme-icon-checked-color: var
(--blue-60
);
173 --theme-icon-error-color: var
(--red-60
);
174 --theme-icon-warning-color: var
(--yellow-65
);
177 --theme-comment: var
(--grey-55
);
178 --theme-body-color: var
(--grey-70
);
179 --theme-link-color: var
(--blue-60
);
180 --theme-text-color-alt: var
(--grey-50
);
181 --theme-text-color-inactive: var
(--grey-40
);
182 --theme-text-color-error: var
(--red-60
);
183 --theme-text-color-strong: var
(--grey-90
);
184 --theme-stack-trace-text: var
(--red-70
);
186 --theme-highlight-green: var
(--green-70
);
187 --theme-highlight-blue: var
(--blue-55
);
188 --theme-highlight-purple: var
(--blue-70
);
189 --theme-highlight-red: var
(--magenta-65
);
190 --theme-highlight-yellow: #fff89e;
192 /* These theme-highlight color variables have not been photonized. */
193 --theme-highlight-bluegrey: #0072ab;
194 --theme-highlight-lightorange: #d97e00;
195 --theme-highlight-orange: #f13c00;
196 --theme-highlight-pink: #b82ee5;
197 --theme-highlight-gray: #dde1e4;
199 /* Colors that were used in Graphs in the old performance tools, which was removed.
200 * They're also used on other panels and should be renamed (See Bug 1767617) */
201 --theme-graphs-purple: #b693eb;
202 --theme-graphs-yellow: #efc052;
203 --theme-graphs-orange: #d97e00;
204 --theme-graphs-grey: #cccccc;
205 --theme-graphs-full-red: #f00;
207 /* Common popup styles(used by HTMLTooltip and autocomplete) */
208 --theme-popup-background: Field
;
209 --theme-popup-color: FieldText
;
210 --theme-popup-border-color: ThreeDShadow
;
211 --theme-popup-dimmed: hsla
(0, 0%, 80%, 0.3);
213 /* Styling for devtool buttons */
214 --theme-toolbarbutton-background: none
;
215 --theme-toolbarbutton-color: var
(--grey-70
);
216 --theme-toolbarbutton-hover-background: var
(--grey-90-a05
);
217 --theme-toolbarbutton-checked-background: var
(--grey-90-a10
);
218 --theme-toolbarbutton-checked-color: var
(--grey-90
);
219 --theme-toolbarbutton-checked-hover-background: var
(--grey-90-a15
);
220 --theme-toolbarbutton-checked-hover-color: var
(--grey-90
);
221 --theme-toolbarbutton-active-background: var
(--grey-90-a20
);
222 --theme-toolbarbutton-active-color: var
(--grey-90
);
224 /* Used for select elements */
225 /* Note: we don't use the pair of system properties Field/FieldText here (like
226 * above), because this lightgrey background makes it possible to remove the
227 * border, which is more stylish. The downsides is that we don't adjust with
228 * the OS' dark mode setting. Hopefully this trade-off is OK.
230 --theme-select-background: var
(--grey-20
);
231 --theme-select-color: #0c0c0d;
232 --theme-select-hover-border-color: var
(--grey-30
);
235 --theme-warning-background: hsl
(54, 100%, 92%);
236 --theme-warning-border: rgba
(215, 182, 0, 0.28); /* Yellow 60 + opacity */
237 --theme-warning-color: var
(--yellow-80
);
239 /* Flashing colors used to highlight updates */
240 --theme-contrast-background: #fff699; /* = Yellow 50-a40 on white */
241 --theme-contrast-background-alpha: rgba
(255, 233, 0, 0.4); /* Yellow 50-a40 */
242 --theme-contrast-color: black
;
243 /* This is used for search/filter results underline and need to have a 3:1 contrast against the background */
244 --theme-contrast-border: var
(--yellow-70
);
248 --theme-body-background: #232327;
249 --theme-body-emphasized-background: var
(--grey-70
);
250 --theme-body-alternate-emphasized-background: #353b48;
251 --theme-sidebar-background: #18181a;
254 --theme-tab-toolbar-background: var
(--grey-90
);
255 --theme-toolbar-background: #18181a;
256 --theme-toolbar-color: var
(--grey-40
);
257 --theme-toolbar-selected-color: white
;
258 --theme-toolbar-highlighted-color: var
(--green-50
);
259 --theme-toolbar-background-hover: #232327;
260 --theme-toolbar-background-alt: var
(--grey-85
);
261 --theme-toolbar-background-highlighted: var
(--blue-60
);
262 --theme-toolbar-error-background: var
(--red-70
);
263 --theme-toolbar-hover: #232327;
264 --theme-toolbar-hover-active: #252526;
265 --theme-toolbar-separator: var
(--grey-10-a20
);
267 /* Toolbar buttons */
268 --toolbarbutton-background: var
(--grey-70
);
269 --toolbarbutton-hover-background: var
(--grey-70
);
270 --toolbarbutton-focus-background: var
(--grey-60
);
271 --toolbarbutton-focus-color: var
(--grey-30
);
272 --toolbarbutton-checked-background: #204e8a;
273 --toolbarbutton-checked-focus-background: var
(--blue-60
);
274 --toolbarbutton-checked-color: #ffffff;
277 --theme-button-background: rgba
(249, 249, 250, 0.1);
278 --theme-button-active-background: rgba
(249, 249, 250, 0.15);
280 /* Accordion headers */
281 --theme-accordion-header-background: #232327;
282 --theme-accordion-header-hover: #2a2a2e;
285 --theme-selection-background: #204e8a;
286 --theme-selection-background-hover: #353b48;
287 --theme-selection-focus-background: var
(--grey-60
);
288 --theme-selection-color: #ffffff;
290 /* Border color that splits the toolbars/panels/headers. */
291 --theme-splitter-color: var
(--grey-70
);
292 --theme-emphasized-splitter-color: var
(--grey-60
);
293 --theme-emphasized-splitter-color-hover: var
(--grey-50
);
296 --theme-icon-color: rgba
(249, 249, 250, 0.7);
297 --theme-icon-dimmed-color: rgba
(147, 147, 149, 0.9);
298 --theme-icon-checked-color: var
(--blue-30
);
299 --theme-icon-error-color: var
(--red-40
);
300 --theme-icon-warning-color: var
(--yellow-60
);
303 --theme-comment: var
(--grey-45
);
304 --theme-body-color: var
(--grey-40
);
305 --theme-link-color: #75bfff;
306 --theme-text-color-alt: var
(--grey-45
);
307 --theme-text-color-inactive: var
(--grey-50
);
308 --theme-text-color-error: var
(--grey-10
);
309 --theme-text-color-strong: var
(--grey-30
);
310 --theme-stack-trace-text: var
(--red-20
);
312 --theme-highlight-green: #86de74;
313 --theme-highlight-blue: #75bfff;
314 --theme-highlight-purple: #b98eff;
315 --theme-highlight-red: #ff7de9;
316 --theme-highlight-yellow: #fff89e;
318 /* These theme-highlight color variables have not been photonized. */
319 --theme-highlight-bluegrey: #5e88b0;
320 --theme-highlight-lightorange: #d99b28;
321 --theme-highlight-orange: #d96629;
322 --theme-highlight-pink: #df80ff;
323 --theme-highlight-gray: #e9f4fe;
325 /* Colors that were used in Graphs in the old performance tools, which was removed.
326 * They're also used on other panels and should be renamed (See Bug 1767617) */
327 --theme-graphs-purple: #df80ff;
328 --theme-graphs-yellow: #d99b28;
329 --theme-graphs-orange: #d96629;
330 --theme-graphs-grey: #757873;
331 --theme-graphs-full-red: #f00;
333 /* Common popup styles(used by HTMLTooltip and autocomplete) */
334 --theme-popup-background: var
(--grey-60
);
335 --theme-popup-color: rgb
(249, 249, 250);
336 --theme-popup-border-color: #27272b;
337 --theme-popup-dimmed: rgba
(249, 249, 250, 0.1);
339 /* Styling for devtool buttons */
340 --theme-toolbarbutton-background: none
;
341 --theme-toolbarbutton-color: var
(--grey-40
);
342 --theme-toolbarbutton-hover-background: var
(--grey-10-a15
);
343 --theme-toolbarbutton-checked-background: var
(--grey-10-a20
);
344 --theme-toolbarbutton-checked-color: var
(--grey-30
);
345 --theme-toolbarbutton-checked-hover-background: var
(--grey-10-a25
);
346 --theme-toolbarbutton-checked-hover-color: var
(--grey-30
);
347 --theme-toolbarbutton-active-background: var
(--grey-10-a30
);
348 --theme-toolbarbutton-active-color: var
(--grey-30
);
350 /* Used for select elements */
351 --theme-select-background: var
(--grey-60
);
352 --theme-select-color: #fff;
353 --theme-select-hover-border-color: var
(--grey-50
);
356 --theme-warning-background: hsl
(42, 37%, 19%);
357 --theme-warning-border: hsl
(60, 30%, 26%);
358 --theme-warning-color: hsl
(43, 94%, 81%);
360 /* Flashing colors used to highlight updates */
361 --theme-contrast-background: #4f4b1f; /* = Yellow 50-a20 on body background */
362 --theme-contrast-background-alpha: rgba
(255, 233, 0, 0.15); /* Yellow 50-a15 */
363 --theme-contrast-color: white
;
364 --theme-contrast-border: var
(--yellow-65
);