variables.css (17720B)
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/. */ 4 5 /* The following properties values are consumed by the client for drawing in canvas 6 * (for the Netmonitor waterfall ticks, the Font preview, …). 7 * Since they're defined in :root with light-dark(), we need to register them so we'll get 8 * the actual final (rgb) color, and not the declaration with subtituted variables 9 */ 10 @property --theme-highlight-blue { 11 syntax: "<color>"; 12 inherits: true; 13 initial-value: transparent; 14 } 15 16 @property --theme-highlight-red { 17 syntax: "<color>"; 18 inherits: true; 19 initial-value: transparent; 20 } 21 22 @property --theme-body-color { 23 syntax: "<color>"; 24 inherits: true; 25 initial-value: transparent; 26 } 27 28 :root { 29 /* Text sizes */ 30 --theme-body-font-size: 11px; 31 --theme-code-font-size: 11px; 32 --theme-code-line-height: calc(15 / 11); 33 34 /* Toolbar size (excluding borders) */ 35 --theme-toolbar-height: 24px; 36 --theme-toolbar-tall-height: 28px; 37 38 /* For accessibility purposes we want to enhance the focus styling. This 39 * should improve keyboard navigation usability. */ 40 --theme-focus-outline-color: var(--blue-50); 41 --theme-focus-textinput-outline-color: var(--theme-focus-outline-color); 42 --theme-focus-outline-size: 2px; 43 --theme-focus-outline: var(--theme-focus-outline-size) solid var(--theme-focus-outline-color); 44 --theme-outline-offset: 0px; 45 /** 46 * we want the box shadow to be 2px bigger than the offset so we have a "double border" 47 * (without it impacting the element layout), which should work whatever 48 * the background-color is (e.g. a clickable element in a "selected" blue-background container) 49 **/ 50 --theme-outline-box-shadow-size: calc(2px + var(--theme-focus-outline-size) + var(--theme-outline-offset)); 51 --theme-outline-box-shadow: 0 0 0 var(--theme-outline-box-shadow-size) var(--theme-body-background); 52 53 /* Standardizes the height of items in the Watch Expressions and XHR Breakpoints panes */ 54 --expression-item-height: 20.5px; 55 56 /* The photon animation curve */ 57 --animation-curve: cubic-bezier(0.07, 0.95, 0, 1); 58 59 /* This should be similar to --highlighter-box-content-color from highlighter.css, 60 * with lower opacity than the 0.6 we apply on highlighter so this can be used as 61 * background color without being too bold 62 */ 63 --dimmed-highlighter-box-content-color: hsl(197, 71%, 73%, 0.3); 64 65 /* 66 * Photon Colors CSS Variables v3.3.2 67 * - Colors are taken from https://github.com/FirefoxUX/photon-colors/blob/master/photon-colors.css 68 * - We only add Photon color variables that we are actually using; unused 69 * variables will fail browser/base/content/test/static/browser_parsable_css.js 70 * - We added a few unofficial colors: a few intermediary values (e.g. Blue 45), 71 * and lighter variants for the dark theme (e.g. Red 20, Red 40). 72 */ 73 --magenta-50: #ff1ad9; 74 --magenta-65: #dd00a9; 75 --magenta-70: #b5007f; 76 77 --purple-50: #9400ff; 78 --purple-60: #8000d7; 79 --purple-30: #c069ff; 80 81 --blue-30: #75baff; 82 --blue-40: #45a1ff; 83 --blue-50: #0a84ff; 84 --blue-50-a30: rgba(10, 132, 255, 0.3); 85 --blue-55: #0074e8; 86 --blue-60: #0060df; 87 --blue-70: #003eaa; 88 --blue-80: #002275; 89 90 --teal-60: #00c8d7; 91 --teal-70: #008ea4; 92 93 --green-50: #30e60b; 94 --green-60: #12bc00; 95 --green-70: #058b00; 96 97 --yellow-50: #ffe900; 98 --yellow-60: #d7b600; 99 --yellow-65: #be9b00; 100 --yellow-70: #a47f00; 101 /* interpolated from yellow-70 and yellow-80 */ 102 --yellow-75: #8b6801; 103 --yellow-80: #715100; 104 105 --red-05: #ffe6e8; 106 --red-20: #ffb3d2; 107 --red-40: #ff3b6b; 108 --red-40-a90: rgba(255, 59, 107, 0.9); 109 --red-50: #ff0039; 110 --red-60: #d70022; 111 --red-70: #a4000f; 112 113 --grey-10: #f9f9fa; 114 --grey-10-a20: rgba(249, 249, 250, 0.2); 115 --grey-10-a25: rgba(249, 249, 250, 0.25); 116 --grey-10-a30: rgba(249, 249, 250, 0.3); 117 --grey-20: #ededf0; 118 --grey-25: #e0e0e2; 119 --grey-30: #d7d7db; 120 --grey-40: #b1b1b3; 121 --grey-43: #a4a4a4; 122 --grey-45: #939395; 123 --grey-50: #737373; 124 --grey-55: #5c5c5f; 125 --grey-60: #4a4a4f; 126 --grey-70: #38383d; 127 --grey-80: #2a2a2e; 128 --grey-85: #1b1b1d; 129 --grey-90: #0c0c0d; 130 --grey-90-a10: rgba(12, 12, 13, 0.1); 131 --grey-90-a20: rgba(12, 12, 13, 0.2); 132 --grey-90-a30: rgba(12, 12, 13, 0.3); 133 134 --theme-body-background: light-dark(white, #232327); 135 --theme-body-emphasized-background: light-dark(var(--grey-10), var(--grey-70)); 136 --theme-body-alternate-emphasized-background: light-dark(#f0f9fe, #353b48); 137 --theme-sidebar-background: light-dark(white, #18181a); 138 139 /* Toolbar */ 140 --theme-tab-toolbar-background: light-dark(var(--grey-10), var(--grey-90)); 141 --theme-toolbar-background: light-dark(var(--grey-10), #18181a); 142 --theme-toolbar-alternate-background: light-dark(var(--grey-10), #232327); 143 --theme-toolbar-color: light-dark(var(--grey-90), var(--grey-40)); 144 --theme-toolbar-selected-color: light-dark(var(--blue-60), white); 145 --theme-toolbar-selected-background: transparent; 146 --theme-toolbar-highlighted-color: light-dark(var(--green-60), var(--green-50)); 147 --theme-toolbar-background-hover: light-dark(rgba(221, 225, 228, 0.66), #232327); 148 --theme-toolbar-background-alt: light-dark(#f5f5f5, var(--grey-85)); 149 --theme-toolbar-background-highlighted: light-dark(#b9dcff, var(--blue-60)); 150 --theme-toolbar-error-background: light-dark(var(--red-05), var(--red-70)); 151 --theme-toolbar-hover: light-dark(var(--grey-20), #232327); 152 --theme-toolbar-hover-color: var(--theme-toolbar-color); 153 --theme-toolbar-alternate-hover: light-dark(var(--grey-20), var(--grey-80)); 154 --theme-toolbar-hover-active: light-dark(var(--grey-20), #252526); 155 --theme-toolbar-selected-hover: var(--theme-toolbar-hover); 156 --theme-toolbar-selected-hover-color: var(--theme-toolbar-selected-color); 157 --theme-toolbar-separator: light-dark(var(--grey-90-a10), var(--grey-10-a20)); 158 --theme-toolbar-reordering-background: var(--theme-toolbar-hover); 159 --theme-toolbar-reordering-color: var(--theme-toolbar-hover-color); 160 161 /* Toolbar buttons */ 162 --toolbarbutton-background: light-dark(var(--grey-10), var(--grey-70)); 163 --toolbarbutton-hover-background: light-dark(var(--grey-20), var(--grey-60)); 164 --toolbarbutton-hover-color: light-dark(var(--grey-80), var(--grey-30)); 165 --toolbarbutton-checked-background: var(--toolbarbutton-hover-background); 166 --toolbarbutton-checked-color: var(--theme-icon-checked-color); 167 168 /* Buttons */ 169 --theme-button-background: light-dark(rgba(12, 12, 13, 0.05), rgba(249, 249, 250, 0.1)); 170 --theme-button-active-background: light-dark(rgba(12, 12, 13, 0.1), rgba(249, 249, 250, 0.15)); 171 172 /* Accordion headers */ 173 --theme-accordion-header-background: var(--theme-toolbar-alternate-background); 174 --theme-accordion-header-color: inherit; 175 --theme-accordion-header-hover-background: var(--theme-toolbar-alternate-hover); 176 --theme-accordion-header-hover-color: inherit; 177 178 /* Selection */ 179 --theme-selection-background: light-dark(var(--blue-55), #204e8a); 180 --theme-selection-background-hover: light-dark(#f0f9fe, #353b48); 181 --theme-selection-focus-background: light-dark(var(--toolbarbutton-hover-background), var(--grey-60)); 182 --theme-selection-color: #ffffff; 183 184 /* Text Selection/Highlight */ 185 --theme-text-selection-background: light-dark(rgb(185, 215, 253), #353b48); 186 --theme-text-selection-unfocused-background: light-dark(rgb(210, 210, 210), var(--theme-text-selection-background)); 187 188 /* Border color that splits the toolbars/panels/headers. */ 189 --theme-splitter-color: light-dark(var(--grey-25), var(--grey-70)); 190 --theme-emphasized-splitter-color: light-dark(var(--grey-30), var(--grey-60)); 191 --theme-emphasized-splitter-color-hover: light-dark(var(--grey-40), var(--grey-50)); 192 193 /* Icon colors */ 194 --theme-icon-color: light-dark(rgba(12, 12, 13, 0.8), rgba(249, 249, 250, 0.7)); 195 --theme-icon-hover-color: var(--theme-icon-color); 196 --theme-icon-dimmed-color: light-dark(rgba(135, 135, 137, 0.9), rgba(147, 147, 149, 0.9)); 197 --theme-icon-disabled-color: var(--theme-icon-dimmed-color); 198 --theme-icon-checked-color: light-dark(var(--blue-60), var(--blue-30)); 199 --theme-icon-error-color: light-dark(var(--red-60), var(--red-40)); 200 --theme-icon-warning-color: light-dark(var(--yellow-65), var(--yellow-60)); 201 /* Some buttons changes the icon color to blue on hover */ 202 --theme-icon-alternate-hover-color: var(--theme-icon-checked-color); 203 204 /* Text color */ 205 --theme-comment: light-dark(var(--grey-55), var(--grey-45)); 206 --theme-body-color: light-dark(var(--grey-70), var(--grey-40)); 207 --theme-link-color: light-dark(var(--blue-60), #75bfff); 208 --theme-internal-link-color: light-dark(var(--blue-70), var(--blue-40)); 209 --theme-text-color-alt: light-dark(var(--grey-50), var(--grey-45)); 210 --theme-text-color-inactive: light-dark(var(--grey-50), var(--grey-45)); 211 --theme-text-color-error: light-dark(var(--red-60), var(--grey-10)); 212 --theme-text-color-strong: light-dark(var(--grey-90), var(--grey-30)); 213 --theme-stack-trace-text: light-dark(var(--red-70), var(--red-20)); 214 215 --theme-highlight-green: light-dark(var(--green-70), #86de74); 216 --theme-highlight-blue: light-dark(var(--blue-55), #75bfff); 217 --theme-highlight-purple: light-dark(var(--blue-70), #b98eff); 218 --theme-highlight-red: light-dark(var(--magenta-65), #ff7de9); 219 --theme-highlight-yellow: #fff89e; 220 221 /* These theme-highlight color variables have not been photonized. */ 222 --theme-highlight-bluegrey: light-dark(#0072ab, #5e88b0); 223 --theme-highlight-lightorange: light-dark(#d97e00, #d99b28); 224 --theme-highlight-orange: light-dark(#f13c00, #d96629); 225 --theme-highlight-pink: light-dark(#b82ee5, #df80ff); 226 --theme-highlight-gray: light-dark(#dde1e4, #e9f4fe); 227 228 /* Colors that were used in Graphs in the old performance tools, which was removed. 229 * They're also used on other panels and should be renamed (See Bug 1767617) */ 230 --theme-graphs-purple: light-dark(#b693eb, #df80ff); 231 --theme-graphs-yellow: light-dark(#efc052, #d99b28); 232 --theme-graphs-orange: light-dark(#d97e00, #d96629); 233 --theme-graphs-grey: light-dark(#cccccc, #757873); 234 --theme-graphs-full-red: #f00; 235 236 /* Common popup styles(used by HTMLTooltip and autocomplete) */ 237 --theme-popup-background: light-dark(Field, var(--grey-60)); 238 --theme-popup-color: light-dark(FieldText, rgb(249, 249, 250)); 239 --theme-popup-border-color: light-dark(ThreeDShadow, #27272b); 240 --theme-popup-dimmed: light-dark(hsla(0, 0%, 80%, 0.3), rgba(249, 249, 250, 0.1)); 241 --theme-popup-hover-background: var(--theme-popup-dimmed); 242 --theme-popup-hover-color: var(--theme-popup-color); 243 244 /* Styling for devtool buttons */ 245 --theme-toolbarbutton-background: none; 246 --theme-toolbarbutton-color: light-dark(var(--grey-70), var(--grey-40)); 247 --theme-toolbarbutton-hover-background: color-mix(in srgb, currentColor 14%, transparent); 248 --theme-toolbarbutton-hover-color: var(--theme-toolbarbutton-color); 249 --theme-toolbarbutton-checked-background: color-mix(in srgb, var(--theme-toolbarbutton-checked-color) 5%, transparent); 250 --theme-toolbarbutton-checked-color: light-dark(var(--blue-60), var(--blue-30)); 251 --theme-toolbarbutton-checked-hover-background: var(--theme-toolbarbutton-hover-background); 252 --theme-toolbarbutton-checked-hover-color: var(--theme-toolbarbutton-color); 253 --theme-toolbarbutton-active-background: color-mix(in srgb, var(--theme-toolbarbutton-checked-color) 20%, transparent); 254 255 /* Used for select elements */ 256 /* Note: we don't use the pair of system properties Field/FieldText here (like 257 * above), because this lightgrey background makes it possible to remove the 258 * border, which is more stylish. The downsides is that we don't adjust with 259 * the OS' dark mode setting. Hopefully this trade-off is OK. 260 */ 261 --theme-select-background: light-dark(var(--grey-20), var(--grey-60)); 262 --theme-select-color: light-dark(#0c0c0d, #fff); 263 --theme-select-hover-border-color: light-dark(var(--grey-30), var(--grey-50)); 264 265 /* Warning colors */ 266 --theme-warning-background: light-dark(hsl(54, 100%, 92%), hsl(42, 37%, 19%)); 267 --theme-warning-border: light-dark(/* Yellow 60 + opacity */ rgba(215, 182, 0, 0.28), hsl(60, 30%, 26%)); 268 --theme-warning-color: light-dark(var(--yellow-80), hsl(43, 94%, 81%)); 269 270 /* Error colors */ 271 --theme-error-background: light-dark(hsl(344, 73%, 97%), hsl(345, 23%, 24%)); 272 --theme-error-border: light-dark(rgb(from var(--red-60) r g b / 0.12), hsl(345, 30%, 35%)); 273 --theme-error-color: light-dark(var(--red-70), var(--red-20)); 274 275 /* Flashing colors used to highlight updates */ 276 --theme-contrast-background: light-dark(/* = Yellow 50-a40 on white */ #fff699, /* = Yellow 50-a20 on body background */ #4f4b1f); 277 --theme-contrast-background-alpha: light-dark(/* Yellow 50-a40 */ rgba(255, 233, 0, 0.4), /* Yellow 50-a15 */ rgba(255, 233, 0, 0.15)); 278 --theme-contrast-color: light-dark(black, white); 279 /* This is used for search/filter results underline and need to have a 3:1 contrast against the background */ 280 --theme-contrast-border: light-dark(var(--yellow-70), var(--yellow-65)); 281 282 --theme-search-results-background: var(--theme-contrast-background); 283 --theme-search-results-color: var(--theme-contrast-color); 284 --theme-search-results-border-color: var(--theme-contrast-border); 285 286 --table-zebra-background: light-dark(rgba(247, 247, 247, 0.8), rgba(255, 255, 255, 0.05)); 287 288 &[forced-colors-active] { 289 /* Color picked from HCM palette created by a11y team */ 290 --theme-highlight-blue: light-dark(#0060df, #00ddff); 291 --theme-highlight-red: light-dark(#c50042, #ff9aa2); 292 --theme-highlight-green: light-dark(#005e5e, #3fe1b0); 293 --theme-highlight-purple: #952bb9; 294 --theme-highlight-purple-text: #f7e2ff; 295 --theme-highlight-yellow: light-dark(#ffffcc, #ffea80); 296 --theme-highlight-orange: light-dark(#cc3d00, #ffb587); 297 --theme-highlight-pink: light-dark(#ff9aa2, #ffdfe7); 298 --theme-highlight-gray: light-dark(#5b5b66, #f0f0f4); 299 300 --theme-body-background: Canvas; 301 302 /* Toolbar */ 303 --theme-toolbar-background: ButtonFace; 304 --theme-toolbar-selected-color: SelectedItemText; 305 --theme-toolbar-selected-background: SelectedItem; 306 --theme-toolbar-hover: SelectedItemText; 307 --theme-toolbar-hover-color: SelectedItem; 308 --theme-toolbar-hover-active: var(--theme-toolbar-hover); 309 --theme-toolbar-selected-hover: var(--theme-toolbar-selected-background); 310 --theme-toolbar-selected-hover-color: var(--theme-toolbar-selected-color); 311 --theme-toolbar-reordering-background: var(--theme-toolbar-selected-background); 312 --theme-toolbar-reordering-color: var(--theme-toolbar-selected-color); 313 314 /* Accordion headers */ 315 --theme-accordion-header-background: ButtonFace; 316 --theme-accordion-header-color: ButtonText; 317 --theme-accordion-header-hover-background: ButtonFace; 318 --theme-accordion-header-hover-color: SelectedItem; 319 320 /* Toolbar buttons */ 321 --toolbarbutton-background: ButtonFace; 322 --toolbarbutton-hover-background: SelectedItemText; 323 --toolbarbutton-hover-color: SelectedItem; 324 --toolbarbutton-checked-background: SelectedItem; 325 --toolbarbutton-checked-color: SelectedItemText; 326 327 /* Styling for devtool buttons */ 328 --theme-toolbarbutton-background: ButtonFace; 329 --theme-toolbarbutton-color: ButtonText; 330 --theme-toolbarbutton-hover-background: SelectedItemText; 331 --theme-toolbarbutton-hover-color: SelectedItem; 332 --theme-toolbarbutton-checked-background: SelectedItem; 333 --theme-toolbarbutton-checked-color: SelectedItemText; 334 --theme-toolbarbutton-checked-hover-background: var(--theme-toolbarbutton-checked-background); 335 --theme-toolbarbutton-checked-hover-color: var(--theme-toolbarbutton-checked-color); 336 337 /* Common popup styles(used by HTMLTooltip and autocomplete) */ 338 --theme-popup-background: Canvas; 339 --theme-popup-color: CanvasText; 340 --theme-popup-border-color: CanvasText; 341 342 /* Text color */ 343 --theme-selection-background: SelectedItem; 344 --theme-selection-color: SelectedItemText; 345 --theme-text-color-alt: CanvasText; 346 --theme-text-color-strong: CanvasText; 347 --theme-text-color-inactive: GrayText; 348 --theme-text-selection-background: Highlight; 349 --theme-text-selection-color: HighlightText; 350 --theme-text-selection-unfocused-background: Highlight; 351 --theme-body-color: CanvasText; 352 --theme-link-color: LinkText; 353 --theme-internal-link-color: LinkText; 354 355 --theme-focus-outline-color: CanvasText; 356 --theme-focus-textinput-outline-color: SelectedItem; 357 --theme-icon-color: ButtonText; 358 --theme-icon-hover-color: SelectedItem; 359 /* We don't want dimmed colors in high Contrast Mode, use the same colors as non-dimmed icons */ 360 --theme-icon-dimmed-color: var(--theme-icon-color); 361 --theme-icon-disabled-color: GrayText; 362 --theme-icon-error-color: ButtonText; 363 --theme-icon-warning-color: ButtonText; 364 --theme-icon-checked-color: SelectedItemText; 365 --theme-icon-alternate-hover-color: SelectedItem; 366 367 --theme-search-results-background: Mark; 368 --theme-search-results-color: MarkText; 369 --theme-search-results-border-color: MarkText; 370 371 /* Menu/Autocomplete items */ 372 --theme-popup-hover-background: SelectedItem; 373 --theme-popup-hover-color: SelectedItemText; 374 375 --theme-splitter-color: CanvasText; 376 --theme-emphasized-splitter-color: CanvasText; 377 --theme-emphasized-splitter-color-hover: SelectedItem; 378 379 /* Flashing colors used to highlight updates */ 380 --theme-contrast-background: Mark; 381 --theme-contrast-background-alpha: var(--theme-contrast-background); 382 --theme-contrast-color: MarkText; 383 --theme-contrast-border: SelectedItem; 384 } 385 }