XLinfini/sousa-gecko
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
caec8eadf94de1a1028c08b72ca34210649755d2
sousa-gecko/devtools/client/themes/variables.css
T
Nicolas Chevobbe 3a3bdf1417 Bug 2048278 - [devtools] Use field-sizing: content for inplace editor autosizing. r=devtools-reviewers,ochameau. 
This way we can remove the methods we used to update the size of the input based
on its content.
We take this as an opportunity to change the way we compute a single char dimension,
which is used to offset the autocomplete popup so it aligns with the keyword being
typed. We used to create a span, put a `x` in it, add it to the document, hidden,
and then get its width and height.
This is now replaced by setting custom properties for width and height, which
we assign respectively a value of `1ch` and `1lh`, so we get the numbers we need.
Because we're retrieving those value via the input computed style, we need to
register the property and set a proper `<length>` syntax so we can get their
px values.

Differential Revision: https://phabricator.services.mozilla.com/D310274
2026-07-07 07:43:45 +00:00

399 lines
18 KiB
CSS
Raw Blame History

/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* The following properties values are consumed by the client for drawing in canvas
* (for the Netmonitor waterfall ticks, the Font preview, …).
* Since they're defined in :root with light-dark(), we need to register them so we'll get
* the actual final (rgb) color, and not the declaration with subtituted variables
*/
@property --theme-highlight-blue {
syntax: "<color>";
inherits: true;
initial-value: transparent;
}
@property --theme-highlight-red {
syntax: "<color>";
inherits: true;
initial-value: transparent;
}
@property --theme-body-color {
syntax: "<color>";
inherits: true;
initial-value: transparent;
}
/* The following properties values are consumed by the client to retrieve the width and
* height of a character so the autocomplete popup for inplace editor can be offset
* to the beginning of the keyword being typed.
* We need to register them so we'll get the actual final px lengths.
*/
@property --inplace-editor-char-width {
syntax: "<length>";
inherits: true;
initial-value: 0;
}
@property --inplace-editor-char-height {
syntax: "<length>";
inherits: true;
initial-value: 0;
}
:root {
/* Text sizes */
--theme-body-font-size: 11px;
--theme-code-font-size: 11px;
--theme-code-line-height: calc(15 / 11);
/* Toolbar size (excluding borders) */
--theme-toolbar-height: 24px;
--theme-toolbar-tall-height: 28px;
/* For accessibility purposes we want to enhance the focus styling. This
* should improve keyboard navigation usability. */
--theme-focus-outline-color: var(--blue-50);
--theme-focus-textinput-outline-color: var(--theme-focus-outline-color);
--theme-focus-outline-size: 2px;
--theme-focus-outline: var(--theme-focus-outline-size) solid var(--theme-focus-outline-color);
--theme-outline-offset: 0px;
/**
* we want the box shadow to be 2px bigger than the offset so we have a "double border"
* (without it impacting the element layout), which should work whatever
* the background-color is (e.g. a clickable element in a "selected" blue-background container)
**/
--theme-outline-box-shadow-size: calc(2px + var(--theme-focus-outline-size) + var(--theme-outline-offset));
--theme-outline-box-shadow: 0 0 0 var(--theme-outline-box-shadow-size) var(--theme-body-background);
/* Standardizes the height of items in the Watch Expressions and XHR Breakpoints panes */
--expression-item-height: 20.5px;
/* The photon animation curve */
--animation-curve: cubic-bezier(0.07, 0.95, 0, 1);
/* This should be similar to --highlighter-box-content-color from highlighter.css,
* with lower opacity than the 0.6 we apply on highlighter so this can be used as
* background color without being too bold
*/
--dimmed-highlighter-box-content-color: hsl(197, 71%, 73%, 0.3);
/*
* Photon Colors CSS Variables v3.3.2
* - Colors are taken from https://github.com/FirefoxUX/photon-colors/blob/master/photon-colors.css
* - We only add Photon color variables that we are actually using; unused
* variables will fail browser/base/content/test/static/browser_parsable_css.js
* - We added a few unofficial colors: a few intermediary values (e.g. Blue 45),
* and lighter variants for the dark theme (e.g. Red 20, Red 40).
*/
--magenta-50: #ff1ad9;
--magenta-65: #dd00a9;
--magenta-70: #b5007f;
--purple-50: #9400ff;
--purple-60: #8000d7;
--purple-30: #c069ff;
--blue-30: #75baff;
--blue-40: #45a1ff;
--blue-50: #0a84ff;
--blue-50-a30: rgba(10, 132, 255, 0.3);
--blue-55: #0074e8;
--blue-60: #0060df;
--blue-70: #003eaa;
--blue-80: #002275;
--teal-60: #00c8d7;
--teal-70: #008ea4;
--green-50: #30e60b;
--green-60: #12bc00;
--green-70: #058b00;
--yellow-50: #ffe900;
--yellow-60: #d7b600;
--yellow-65: #be9b00;
--yellow-70: #a47f00;
/* interpolated from yellow-70 and yellow-80 */
--yellow-75: #8b6801;
--yellow-80: #715100;
--red-05: #ffe6e8;
--red-20: #ffb3d2;
--red-40: #ff3b6b;
--red-40-a90: rgba(255, 59, 107, 0.9);
--red-50: #ff0039;
--red-60: #d70022;
--red-70: #a4000f;
--grey-10: #f9f9fa;
--grey-10-a20: rgba(249, 249, 250, 0.2);
--grey-10-a25: rgba(249, 249, 250, 0.25);
--grey-10-a30: rgba(249, 249, 250, 0.3);
--grey-20: #ededf0;
--grey-25: #e0e0e2;
--grey-30: #d7d7db;
--grey-40: #b1b1b3;
--grey-43: #a4a4a4;
--grey-45: #939395;
--grey-50: #737373;
--grey-55: #5c5c5f;
--grey-60: #4a4a4f;
--grey-70: #38383d;
--grey-80: #2a2a2e;
--grey-85: #1b1b1d;
--grey-90: #0c0c0d;
--grey-90-a10: rgba(12, 12, 13, 0.1);
--grey-90-a20: rgba(12, 12, 13, 0.2);
--grey-90-a30: rgba(12, 12, 13, 0.3);
--theme-body-background: light-dark(white, #232327);
--theme-body-emphasized-background: light-dark(var(--grey-10), var(--grey-70));
--theme-body-alternate-emphasized-background: light-dark(#f0f9fe, #353b48);
--theme-sidebar-background: light-dark(white, #18181a);
/* Toolbar */
--theme-tab-toolbar-background: light-dark(var(--grey-10), var(--grey-90));
--theme-toolbar-background: light-dark(var(--grey-10), #18181a);
--theme-toolbar-alternate-background: light-dark(var(--grey-10), #232327);
--theme-toolbar-color: light-dark(var(--grey-90), var(--grey-40));
--theme-toolbar-selected-color: light-dark(var(--blue-60), white);
--theme-toolbar-selected-background: transparent;
--theme-toolbar-highlighted-color: light-dark(var(--green-60), var(--green-50));
--theme-toolbar-background-hover: light-dark(rgba(221, 225, 228, 0.66), #232327);
--theme-toolbar-background-alt: light-dark(#f5f5f5, var(--grey-85));
--theme-toolbar-background-highlighted: light-dark(#b9dcff, var(--blue-60));
--theme-toolbar-error-background: light-dark(var(--red-05), var(--red-70));
--theme-toolbar-hover: light-dark(var(--grey-20), #232327);
--theme-toolbar-hover-color: var(--theme-toolbar-color);
--theme-toolbar-alternate-hover: light-dark(var(--grey-20), var(--grey-80));
--theme-toolbar-hover-active: light-dark(var(--grey-20), #252526);
--theme-toolbar-selected-hover: var(--theme-toolbar-hover);
--theme-toolbar-selected-hover-color: var(--theme-toolbar-selected-color);
--theme-toolbar-separator: light-dark(var(--grey-90-a10), var(--grey-10-a20));
--theme-toolbar-reordering-background: var(--theme-toolbar-hover);
--theme-toolbar-reordering-color: var(--theme-toolbar-hover-color);
/* Toolbar buttons */
--toolbarbutton-background: light-dark(var(--grey-10), var(--grey-70));
--toolbarbutton-hover-background: light-dark(var(--grey-20), var(--grey-60));
--toolbarbutton-hover-color: light-dark(var(--grey-80), var(--grey-30));
--toolbarbutton-checked-background: var(--toolbarbutton-hover-background);
--toolbarbutton-checked-color: var(--theme-icon-checked-color);
/* Buttons */
--theme-button-background: light-dark(rgba(12, 12, 13, 0.05), rgba(249, 249, 250, 0.1));
--theme-button-active-background: light-dark(rgba(12, 12, 13, 0.1), rgba(249, 249, 250, 0.15));
/* Accordion headers */
--theme-accordion-header-background: var(--theme-toolbar-alternate-background);
--theme-accordion-header-color: inherit;
--theme-accordion-header-hover-background: var(--theme-toolbar-alternate-hover);
--theme-accordion-header-hover-color: inherit;
/* Selection */
--theme-selection-background: light-dark(var(--blue-55), #204e8a);
--theme-selection-background-hover: light-dark(#f0f9fe, #353b48);
--theme-selection-focus-background: light-dark(var(--toolbarbutton-hover-background), var(--grey-60));
--theme-selection-color: #ffffff;
/* Text Selection/Highlight */
--theme-text-selection-background: light-dark(rgb(185, 215, 253), #353b48);
--theme-text-selection-unfocused-background: light-dark(rgb(210, 210, 210), var(--theme-text-selection-background));
/* Border color that splits the toolbars/panels/headers. */
--theme-splitter-color: light-dark(var(--grey-25), var(--grey-70));
--theme-emphasized-splitter-color: light-dark(var(--grey-30), var(--grey-60));
--theme-emphasized-splitter-color-hover: light-dark(var(--grey-40), var(--grey-50));
/* Icon colors */
--theme-icon-color: light-dark(rgba(12, 12, 13, 0.8), rgba(249, 249, 250, 0.7));
--theme-icon-hover-color: var(--theme-icon-color);
--theme-icon-dimmed-color: light-dark(rgba(135, 135, 137, 0.9), rgba(147, 147, 149, 0.9));
--theme-icon-disabled-color: var(--theme-icon-dimmed-color);
--theme-icon-checked-color: light-dark(var(--blue-60), var(--blue-30));
--theme-icon-error-color: light-dark(var(--red-60), var(--red-40));
--theme-icon-warning-color: light-dark(var(--yellow-65), var(--yellow-60));
/* Some buttons changes the icon color to blue on hover */
--theme-icon-alternate-hover-color: var(--theme-icon-checked-color);
/* Text color */
--theme-comment: light-dark(var(--grey-55), var(--grey-45));
--theme-body-color: light-dark(var(--grey-70), var(--grey-40));
--theme-link-color: light-dark(var(--blue-60), #75bfff);
--theme-internal-link-color: light-dark(var(--blue-70), var(--blue-40));
--theme-text-color-alt: light-dark(var(--grey-50), var(--grey-45));
--theme-text-color-inactive: light-dark(var(--grey-50), var(--grey-45));
--theme-text-color-error: light-dark(var(--red-60), var(--grey-10));
--theme-text-color-strong: light-dark(var(--grey-90), var(--grey-30));
--theme-stack-trace-text: light-dark(var(--red-70), var(--red-20));
--theme-highlight-green: light-dark(var(--green-70), #86de74);
--theme-highlight-blue: light-dark(var(--blue-55), #75bfff);
--theme-highlight-purple: light-dark(var(--blue-70), #b98eff);
--theme-highlight-red: light-dark(var(--magenta-65), #ff7de9);
--theme-highlight-yellow: #fff89e;
/* These theme-highlight color variables have not been photonized. */
--theme-highlight-bluegrey: light-dark(#0072ab, #5e88b0);
--theme-highlight-lightorange: light-dark(#d97e00, #d99b28);
--theme-highlight-orange: light-dark(#f13c00, #d96629);
--theme-highlight-pink: light-dark(#b82ee5, #df80ff);
--theme-highlight-gray: light-dark(#dde1e4, #e9f4fe);
/* Colors used for breakpoints and logpoints */
--theme-breakpoint-logpoint: light-dark(#b693eb, #df80ff);
--theme-breakpoint-conditional-background: light-dark(#efc052, #d99b28);
--theme-breakpoint-conditional-border-color: light-dark(#d97e00, #d96629);
/* Common popup styles(used by HTMLTooltip and autocomplete) */
--theme-popup-background: light-dark(Field, var(--grey-60));
--theme-popup-color: light-dark(FieldText, rgb(249, 249, 250));
--theme-popup-border-color: light-dark(ThreeDShadow, #27272b);
--theme-popup-dimmed: light-dark(hsla(0, 0%, 80%, 0.3), rgba(249, 249, 250, 0.1));
--theme-popup-hover-background: var(--theme-popup-dimmed);
--theme-popup-hover-color: var(--theme-popup-color);
/* Styling for devtool buttons */
--theme-toolbarbutton-background: none;
--theme-toolbarbutton-color: light-dark(var(--grey-70), var(--grey-40));
--theme-toolbarbutton-hover-background: color-mix(in srgb, currentColor 14%, transparent);
--theme-toolbarbutton-hover-color: var(--theme-toolbarbutton-color);
--theme-toolbarbutton-checked-background: color-mix(in srgb, var(--theme-toolbarbutton-checked-color) 5%, transparent);
--theme-toolbarbutton-checked-color: light-dark(var(--blue-60), var(--blue-30));
--theme-toolbarbutton-checked-hover-background: var(--theme-toolbarbutton-hover-background);
--theme-toolbarbutton-checked-hover-color: var(--theme-toolbarbutton-color);
--theme-toolbarbutton-active-background: color-mix(in srgb, var(--theme-toolbarbutton-checked-color) 20%, transparent);
/* Used for select elements */
/* Note: we don't use the pair of system properties Field/FieldText here (like
* above), because this lightgrey background makes it possible to remove the
* border, which is more stylish. The downsides is that we don't adjust with
* the OS' dark mode setting. Hopefully this trade-off is OK.
*/
--theme-select-background: light-dark(var(--grey-20), var(--grey-60));
--theme-select-color: light-dark(#0c0c0d, #fff);
--theme-select-hover-border-color: light-dark(var(--grey-30), var(--grey-50));
/* Warning colors */
--theme-warning-background: light-dark(hsl(54, 100%, 92%), hsl(42, 37%, 19%));
--theme-warning-border: light-dark(/* Yellow 60 + opacity */ rgba(215, 182, 0, 0.28), hsl(60, 30%, 26%));
--theme-warning-color: light-dark(var(--yellow-80), hsl(43, 94%, 81%));
/* Error colors */
--theme-error-background: light-dark(hsl(344, 73%, 97%), hsl(345, 23%, 24%));
--theme-error-border: light-dark(rgb(from var(--red-60) r g b / 0.12), hsl(345, 30%, 35%));
--theme-error-color: light-dark(var(--red-70), var(--red-20));
/* Flashing colors used to highlight updates */
--theme-contrast-background: light-dark(/* = Yellow 50-a40 on white */ #fff699, /* = Yellow 50-a20 on body background */ #4f4b1f);
--theme-contrast-background-alpha: light-dark(/* Yellow 50-a40 */ rgba(255, 233, 0, 0.4), /* Yellow 50-a15 */ rgba(255, 233, 0, 0.15));
--theme-contrast-color: light-dark(black, white);
/* This is used for search/filter results underline and need to have a 3:1 contrast against the background */
--theme-contrast-border: light-dark(var(--yellow-70), var(--yellow-65));
--theme-search-results-background: var(--theme-contrast-background);
--theme-search-results-color: var(--theme-contrast-color);
--theme-search-results-border-color: var(--theme-contrast-border);
--table-zebra-background: light-dark(rgba(247, 247, 247, 0.8), rgba(255, 255, 255, 0.05));
&[forced-colors-active] {
/* Color picked from HCM palette created by a11y team */
--theme-highlight-blue: light-dark(#0060df, #00ddff);
--theme-highlight-red: light-dark(#c50042, #ff9aa2);
--theme-highlight-green: light-dark(#005e5e, #3fe1b0);
--theme-highlight-purple: #952bb9;
--theme-highlight-purple-text: #f7e2ff;
--theme-highlight-yellow: light-dark(#ffffcc, #ffea80);
--theme-highlight-orange: light-dark(#cc3d00, #ffb587);
--theme-highlight-pink: light-dark(#ff9aa2, #ffdfe7);
--theme-highlight-gray: light-dark(#5b5b66, #f0f0f4);
--theme-body-background: Canvas;
/* Toolbar */
--theme-toolbar-background: ButtonFace;
--theme-toolbar-selected-color: SelectedItemText;
--theme-toolbar-selected-background: SelectedItem;
--theme-toolbar-hover: SelectedItemText;
--theme-toolbar-hover-color: SelectedItem;
--theme-toolbar-hover-active: var(--theme-toolbar-hover);
--theme-toolbar-selected-hover: var(--theme-toolbar-selected-background);
--theme-toolbar-selected-hover-color: var(--theme-toolbar-selected-color);
--theme-toolbar-reordering-background: var(--theme-toolbar-selected-background);
--theme-toolbar-reordering-color: var(--theme-toolbar-selected-color);
/* Accordion headers */
--theme-accordion-header-background: ButtonFace;
--theme-accordion-header-color: ButtonText;
--theme-accordion-header-hover-background: ButtonFace;
--theme-accordion-header-hover-color: SelectedItem;
/* Toolbar buttons */
--toolbarbutton-background: ButtonFace;
--toolbarbutton-hover-background: SelectedItemText;
--toolbarbutton-hover-color: SelectedItem;
--toolbarbutton-checked-background: SelectedItem;
--toolbarbutton-checked-color: SelectedItemText;
/* Styling for devtool buttons */
--theme-toolbarbutton-background: ButtonFace;
--theme-toolbarbutton-color: ButtonText;
--theme-toolbarbutton-hover-background: SelectedItemText;
--theme-toolbarbutton-hover-color: SelectedItem;
--theme-toolbarbutton-checked-background: SelectedItem;
--theme-toolbarbutton-checked-color: SelectedItemText;
--theme-toolbarbutton-checked-hover-background: var(--theme-toolbarbutton-checked-background);
--theme-toolbarbutton-checked-hover-color: var(--theme-toolbarbutton-checked-color);
/* Common popup styles(used by HTMLTooltip and autocomplete) */
--theme-popup-background: Canvas;
--theme-popup-color: CanvasText;
--theme-popup-border-color: CanvasText;
/* Text color */
--theme-selection-background: SelectedItem;
--theme-selection-color: SelectedItemText;
--theme-text-color-alt: CanvasText;
--theme-text-color-strong: CanvasText;
--theme-text-color-inactive: GrayText;
--theme-text-selection-background: Highlight;
--theme-text-selection-color: HighlightText;
--theme-text-selection-unfocused-background: Highlight;
--theme-body-color: CanvasText;
--theme-link-color: LinkText;
--theme-internal-link-color: LinkText;
--theme-focus-outline-color: CanvasText;
--theme-focus-textinput-outline-color: SelectedItem;
--theme-icon-color: ButtonText;
--theme-icon-hover-color: SelectedItem;
/* We don't want dimmed colors in high Contrast Mode, use the same colors as non-dimmed icons */
--theme-icon-dimmed-color: var(--theme-icon-color);
--theme-icon-disabled-color: GrayText;
--theme-icon-error-color: ButtonText;
--theme-icon-warning-color: ButtonText;
--theme-icon-checked-color: SelectedItemText;
--theme-icon-alternate-hover-color: SelectedItem;
--theme-search-results-background: Mark;
--theme-search-results-color: MarkText;
--theme-search-results-border-color: MarkText;
/* Menu/Autocomplete items */
--theme-popup-hover-background: SelectedItem;
--theme-popup-hover-color: SelectedItemText;
--theme-splitter-color: CanvasText;
--theme-emphasized-splitter-color: CanvasText;
--theme-emphasized-splitter-color-hover: SelectedItem;
/* Flashing colors used to highlight updates */
--theme-contrast-background: Mark;
--theme-contrast-background-alpha: var(--theme-contrast-background);
--theme-contrast-color: MarkText;
--theme-contrast-border: SelectedItem;
}
}
Reference in New Issue View Git Blame Copy Permalink