devtools/client/themes/variables.css

   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 /*
   6  * IMPORTANT NOTE
   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).
   9  */
  10
  11 :root {
  12   /* Text sizes */
  13   --theme-body-font-size: 11px;
  14   --theme-code-font-size: 11px;
  15   --theme-code-line-height: calc(15 / 11);
  16
  17   /* Toolbar size (excluding borders) */
  18   --theme-toolbar-height: 24px;
  19   --theme-toolbar-tall-height: 28px;
  20
  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;
  27     /**
  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)
  31    **/
  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);
  34
  35   /* Standardizes the height of items in the Watch Expressions and XHR Breakpoints panes */
  36   --expression-item-height: 20.5px;
  37
  38   /* The photon animation curve */
  39   --animation-curve: cubic-bezier(0.07, 0.95, 0, 1);
  40
  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
  44    */
  45   --dimmed-highlighter-box-content-color:hsl(197,71%,73%,.3);
  46
  47   /*
  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).
  54    */
  55   --magenta-50: #ff1ad9;
  56   --magenta-65: #dd00a9;
  57   --magenta-70: #b5007f;
  58
  59   --purple-50: #9400ff;
  60   --purple-60: #8000d7;
  61   --purple-30: #c069ff;
  62
  63   --blue-30: #75baff;
  64   --blue-40: #45a1ff;
  65   --blue-50: #0a84ff;
  66   --blue-50-a30: rgba(10, 132, 255, 0.3);
  67   --blue-55: #0074e8;
  68   --blue-60: #0060df;
  69   --blue-70: #003eaa;
  70   --blue-80: #002275;
  71
  72   --teal-60: #00c8d7;
  73   --teal-70: #008ea4;
  74
  75   --green-50: #30e60b;
  76   --green-60: #12bc00;
  77   --green-70: #058b00;
  78
  79   --yellow-50: #ffe900;
  80   --yellow-60: #d7b600;
  81   --yellow-65: #be9b00;
  82   --yellow-70: #a47f00;
  83   /* interpolated from yellow-70 and yellow-80 */
  84   --yellow-75: #8b6801;
  85   --yellow-80: #715100;
  86
  87   --red-05: #ffe6e8;
  88   --red-20: #ffb3d2;
  89   --red-40: #ff3b6b;
  90   --red-40-a90: rgba(255, 59, 107, 0.9);
  91   --red-50: #ff0039;
  92   --red-60: #d70022;
  93   --red-70: #a4000f;
  94
  95   --grey-10: #f9f9fa;
  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);
 100   --grey-20: #ededf0;
 101   --grey-25: #e0e0e2;
 102   --grey-30: #d7d7db;
 103   --grey-35: #c3c3c6;
 104   --grey-40: #b1b1b3;
 105   --grey-43: #a4a4a4;
 106   --grey-45: #939395;
 107   --grey-50: #737373;
 108   --grey-55: #5c5c5f;
 109   --grey-60: #4a4a4f;
 110   --grey-70: #38383d;
 111   --grey-80: #2a2a2e;
 112   --grey-85: #1b1b1d;
 113   --grey-90: #0c0c0d;
 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);
 119 }
 120
 121 :root.theme-light {
 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;
 126
 127   /* Toolbar */
 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);
 140
 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;
 149
 150   /* Buttons */
 151   --theme-button-background: rgba(12, 12, 13, 0.05);
 152   --theme-button-active-background: rgba(12, 12, 13, 0.1);
 153
 154   /* Accordion headers */
 155   --theme-accordion-header-background: var(--theme-toolbar-background);
 156   --theme-accordion-header-hover: var(--theme-toolbar-hover);
 157
 158   /* Selection */
 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;
 163
 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);
 168
 169   /* Icon colors */
 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);
 175
 176   /* Text color */
 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);
 185
 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;
 191
 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;
 198
 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;
 206
 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);
 212
 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);
 223
 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.
 229    */
 230   --theme-select-background: var(--grey-20);
 231   --theme-select-color: #0c0c0d;
 232   --theme-select-hover-border-color: var(--grey-30);
 233
 234   /* Warning colors */
 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);
 238
 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);
 245 }
 246
 247 :root.theme-dark {
 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;
 252
 253   /* Toolbar */
 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);
 266
 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;
 275
 276   /* Buttons */
 277   --theme-button-background: rgba(249, 249, 250, 0.1);
 278   --theme-button-active-background: rgba(249, 249, 250, 0.15);
 279
 280   /* Accordion headers */
 281   --theme-accordion-header-background: #232327;
 282   --theme-accordion-header-hover: #2a2a2e;
 283
 284   /* Selection */
 285   --theme-selection-background: #204e8a;
 286   --theme-selection-background-hover: #353b48;
 287   --theme-selection-focus-background: var(--grey-60);
 288   --theme-selection-color: #ffffff;
 289
 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);
 294
 295   /* Icon colors */
 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);
 301
 302   /* Text color */
 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);
 311
 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;
 317
 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;
 324
 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;
 332
 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);
 338
 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);
 349
 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);
 354
 355   /* Warning colors */
 356   --theme-warning-background: hsl(42, 37%, 19%);
 357   --theme-warning-border: hsl(60, 30%, 26%);
 358   --theme-warning-color: hsl(43, 94%, 81%);
 359
 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);
 365 }