blob: 259723df97d5e4fd65fe76324bae05e38d061b1c [file] [log] [blame]
/*
* Copyright (C) 2015-2016 Apple Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
* are met:
* 1. Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* 2. Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
* THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
* BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
* THE POSSIBILITY OF SUCH DAMAGE.
*/
:root {
--z-index-highlight: 64;
--z-index-header: 128;
--z-index-resizer: 256;
--z-index-popover: 512;
--z-index-tooltip: 1024;
--z-index-glass-pane-for-drag: 2048;
--z-index-uncaught-exception-sheet: 4096;
--foreground-lightness: 0%;
--text-color: black;
--text-color-active: black;
--text-color-secondary: hsl(0, 0%, 50%);
/* Disabled text/glyphs */
--text-color-tertiary: hsl(0, 0%, 70%);
/* Dividers, separators, background fills */
--text-color-quaternary: hsl(0, 0%, 85%);
--background-color: white;
--background-color-content: white;
--background-color-code: white;
--background-color-alternate: hsla(0, 0%, var(--foreground-lightness), 0.05);
--background-color-selected: hsla(0, 0%, var(--foreground-lightness), 0.1);
/* Gray background with lighter foreground. In dark mode this is lighter. */
--gray-background-color: hsl(0, 0%, 66%);
--gray-foreground-color: white;
--link-text-color: hsl(0, 0%, 33%);
--selected-foreground-color: white;
--selected-secondary-text-color: hsla(0, 100%, 100%, 0.7);
--selected-background-color: hsl(212, 92%, 54%);
--selected-background-color-unfocused: hsl(0, 0%, 83%);
--selected-background-color-active: hsl(218, 85%, 52%);
--selected-background-color-hover: hsla(212, 92%, 54%, 0.5);
--selected-background-color-highlight: hsla(0, 0%, 100%, 0.3);
--selected-text-background-color: hsl(210, 98%, 93%);
--breakpoint-color: hsl(211, 100%, 50%);
--breakpoint-color-disabled: hsl(211, 82%, 82%);
--glyph-color: hsl(0, 0%, 30%);
--glyph-color-pressed: hsl(0, 0%, 15%);
--glyph-color-disabled: hsla(0, 0%, 30%, 0.55);
--glyph-color-active: hsl(212, 92%, 54%);
--glyph-color-active-pressed: hsl(218, 85%, 52%);
--glyph-opacity: 1;
--border-color: hsl(0, 0%, 70%);
--border-color-dark: hsl(0, 0%, 57%);
--button-background-color: white;
--button-background-color-hover: hsl(0, 0%, 88%);
--button-background-color-pressed: hsl(0, 0%, 85%);
--panel-background-color: hsl(0, 0%, 93%);
--panel-background-color-light: hsl(0, 0%, 96%);
--warning-color: hsl(50, 100%, 94%);
--warning-background-color: hsl(43, 97%, 84%);
--warning-background-color-secondary: hsl(51, 87%, 93%);
--error-background-color: hsl(11, 100%, 80%);
--error-background-color-secondary: hsl(15, 100%, 90%);
--yellow-highlight-background-color: var(--warning-color);
--yellow-highlight-text-color: var(--text-color);
--console-secondary-text-color: hsla(0, 0%, 0%, 0.33);
--console-prompt-min-height: 30px;
--message-text-view-font-size: 16px;
--message-text-view-large-font-size: 28px;
--text-color-gray-dark: hsl(0, 0%, 20%);
--text-color-gray-medium: hsl(0, 0%, 52%);
--error-text-color: hsl(0, 86%, 47%);
--value-changed-highlight: hsla(83, 100%, 48%, 0.4);
--syntax-highlight-number-color: hsl(248, 100%, 40%);
--syntax-highlight-bigint-color: hsl(192, 100%, 38%);
--syntax-highlight-boolean-color: hsl(309, 85%, 35%);
--syntax-highlight-string-color: hsl(1, 79%, 42%);
--syntax-highlight-link-color: hsl(240, 100%, 52%);
--syntax-highlight-regexp-color: hsl(20, 100%, 44%);
--syntax-highlight-symbol-color: hsl(172, 45%, 45%);
--syntax-highlight-comment-color: hsl(119, 100%, 22%);
--syntax-highlight-regex-group-color: var(--text-color-gray-medium);
--timeline-marker-z-index: 4;
--timeline-record-z-index: 8;
--timeline-selection-z-index: 16;
--timeline-odd-background-color: var(--background-color-content);
--timeline-even-background-color: hsl(0, 0%, 96%);
--timeline-scanner-color: hsl(0, 0%, 35%);
--memory-javascript-fill-color: hsl(269, 65%, 75%);
--memory-javascript-stroke-color: hsl(269, 33%, 50%);
--memory-images-fill-color: hsl(0, 65%, 75%);
--memory-images-stroke-color: hsl(0, 54%, 50%);
--memory-layers-fill-color: hsl(76, 49%, 75%);
--memory-layers-stroke-color: hsl(79, 45%, 50%);
--memory-page-fill-color: hsl(22, 60%, 70%);
--memory-page-stroke-color: hsl(22, 40%, 50%);
--memory-max-comparison-fill-color: hsl(220, 10%, 75%);
--memory-max-comparison-stroke-color: hsl(220, 10%, 55%);
--cpu-other-thread-fill-color: hsl(81, 80%, 50%);
--cpu-other-thread-stroke-color: hsl(81, 80%, 30%);
--cpu-main-thread-fill-color: hsl(118, 43%, 55%);
--cpu-main-thread-stroke-color: hsl(118, 33%, 42%);
--cpu-worker-thread-fill-color: hsl(59, 79%, 62%);
--cpu-worker-thread-stroke-color: hsl(59, 79%, 37%);
--cpu-overlay-color: var(--cpu-main-thread-stroke-color);
--cpu-javascript-fill-color: hsl(269, 65%, 75%);
--cpu-javascript-stroke-color: hsl(269, 33%, 50%);
--cpu-style-fill-color: hsl(22, 60%, 70%);
--cpu-style-stroke-color: hsl(22, 40%, 50%);
--cpu-layout-fill-color: hsl(0, 65%, 75%);
--cpu-layout-stroke-color: hsl(0, 54%, 50%);
--cpu-paint-fill-color: hsl(76, 49%, 75%);
--cpu-paint-stroke-color: hsl(79, 45%, 50%);
--cpu-low-color: hsl(110, 52%, 56%);
--cpu-medium-color: hsl(46, 91%, 62%);
--cpu-high-color: hsl(6, 79%, 57%);
--network-header-color: hsl(204, 52%, 55%);
--network-system-color: hsl(79, 32%, 50%);
--network-pseudo-header-color: hsl(312, 35%, 51%);
--network-error-color: hsl(0, 54%, 50%);
--network-redirect-color: lightgrey;
--network-queue-color: hsl(0, 0%, 54%);
--network-dns-color: hsl(265, 82%, 60%);
--network-connect-color: hsl(46, 92%, 62%);
--network-secure-color: hsl(352, 81%, 59%);
--network-request-color: hsl(118, 56%, 65%);
--network-response-color: hsl(202, 61%, 59%);
--even-zebra-stripe-row-background-color: hsl(0, 0%, 95%);
--odd-zebra-stripe-row-background-color: white;
--transparent-stripe-background-gradient: linear-gradient(to bottom, transparent, transparent 50%, hsla(0, 0%, 0%, 0.03) 50%, hsla(0, 0%, 0%, 0.03)) top left / 100% 40px;
--toolbar-height: 36px;
--tab-bar-height: 24px;
--navigation-bar-height: 29px;
--slider-width: 11px;
--css-declaration-vertical-padding: 4px;
--css-declaration-horizontal-padding: 6px;
--diff-addition-text-color: hsl(90, 61%, 25%);
--diff-addition-background-color: hsl(70, 90%, 86%);
--diff-deletion-text-color: hsl(0, 100%, 35%);
--diff-deletion-background-color: hsl(5, 100%, 94%);
--diff-addition-border-color: hsl(90, 100%, 40%);
}
body.window-inactive {
/* FIXME: Use CSS4 color blend functions once they're available. */
--selected-background-color: hsla(212, 92%, 54%, 0.5);
--glyph-color: hsla(0, 0%, 30%, 0.65);
--glyph-color-disabled: hsla(0, 0%, 30%, 0.35);
--glyph-opacity: 0.6;
}
body.window-inactive * {
--border-color: hsl(0, 0%, 85%);
--border-color-dark: hsl(0, 0%, 72%);
}
@media (prefers-color-scheme: dark) {
:root {
color: var(--text-color);
--foreground-lightness: 100%;
--text-color: hsl(0, 0%, 88%);
--text-color-active: white;
--text-color-secondary: hsl(0, 0%, 65%);
/* Disabled text/glyphs */
--text-color-tertiary: hsl(0, 0%, 50%);
/* Dividers, separators, background fills */
--text-color-quaternary: hsl(0, 0%, 33%);
/* Deprecated */
--text-color-gray-dark: hsl(0, 0%, 75%);
--text-color-gray-medium: var(--text-color-secondary);
--background-color: hsl(0, 0%, 24%);
--background-color-secondary: hsl(0, 0%, 27%);
--background-color-tertiary: hsl(0, 0%, 31%);
--background-color-content: hsl(0, 0%, 21%);
--background-color-code: hsl(0, 0%, 21%);
--gray-background-color: hsl(0, 0%, 50%);
--link-text-color: var(--text-color-secondary);
--color-button: hsl(0, 0%, 99%);
--color-button-active: var(--text-color-active);
--selected-foreground-color: var(--text-color-active);
--selected-secondary-text-color: hsla(0, 0%, var(--foreground-lightness), 0.7);
--selected-secondary-text-color-active: hsla(0, 0%, var(--foreground-lightness), 0.85);
--selected-background-color: hsl(219, 80%, 43%);
--selected-background-color-unfocused: hsla(0, 0%, var(--foreground-lightness), 0.15);
--selected-background-color-active: hsl(218, 85%, 62%);
--selected-background-color-hover: hsla(212, 92%, 54%, 0.5);
--selected-background-color-highlight: hsla(0, 0%, 100%, 0.3);
--selected-text-background-color: hsl(230, 51%, 36%);
--glyph-color: hsl(0, 0%, 80%);
--glyph-color-pressed: hsl(0, 0%, 100%);
--glyph-color-disabled: hsla(0, 0%, 80%, 0.4);
--glyph-color-active: hsl(212, 100%, 71%);
--glyph-color-active-pressed: hsl(212, 92%, 74%);
--glyph-color-inactive: hsl(0, 0%, 36%);
--border-color: hsl(0, 0%, 33%);
--border-color-dark: hsl(0, 0%, 37%); /* non-semantic variable names */
--border-color-secondary: hsl(0, 0%, 27%);
--button-background-color: hsl(0, 0%, 43%);
--button-background-color-hover: var(--button-background-color);
--button-background-color-pressed: hsl(0, 0%, 55%);
--button-background-color-inactive: hsl(0, 0%, 28%);
--dashboard-background-color: hsl(0, 0%, 36%);
--panel-background-color: hsl(0, 0%, 24%);
--panel-background-color-light: hsl(0, 0%, 29%);
--error-text-color: hsl(0, 86%, 65%);
--green-highlight-background-color: hsl(120, 15%, 28%);
--green-highlight-text-color: hsl(80, 75%, 80%);
--yellow-highlight-background-color: hsl(13, 20%, 26%);
--yellow-highlight-text-color: hsl(50, 96%, 87%);
--value-changed-highlight: var(--green-highlight-background-color);
--value-visual-highlight: var(--yellow-highlight-background-color);
--syntax-highlight-number-color: hsl(276, 100%, 85%);
--syntax-highlight-bigint-color: hsl(195, 100%, 85%);
--syntax-highlight-boolean-color: hsl(299, 71%, 80%);
--syntax-highlight-string-color: hsl(28, 84%, 63%);
--syntax-highlight-link-color: hsl(223, 100%, 77%);
--syntax-highlight-regexp-color: hsl(20, 100%, 64%);
--syntax-highlight-symbol-color: hsl(172, 45%, 65%);
--syntax-highlight-comment-color: hsl(119, 40%, 72%);
--console-secondary-text-color: hsla(0, 0%, 100%, 0.45);
--warning-background-color: hsl(43, 100%, 23%);
--warning-background-color-secondary: hsl(21, 18%, 25%);
--error-background-color: hsl(11, 70%, 32%);
--error-background-color-secondary: hsl(6, 23%, 25%);
--memory-max-comparison-fill-color: hsl(225, 5%, 45%);
--memory-max-comparison-stroke-color: hsl(225, 5%, 65%);
--network-header-color: hsl(204, 52%, 55%);
--network-system-color: hsl(79, 95%, 50%);
--network-pseudo-header-color: hsl(312, 55%, 61%);
--network-error-color: hsl(0, 54%, 55%);
--cpu-overlay-color: hsl(35, 88%, 45%);
--cpu-low-color: hsl(110, 52%, 56%);
--cpu-medium-color: hsl(46, 91%, 62%);
--cpu-high-color: hsl(6, 79%, 57%);
--even-zebra-stripe-row-background-color: var(--background-color-secondary);
--odd-zebra-stripe-row-background-color: var(--background-color);
--transparent-stripe-background-gradient: linear-gradient(to bottom, transparent, transparent 50%, hsla(0, 0%, 100%, 0.03) 50%, hsla(0, 0%, 100%, 0.03)) top left / 100% 40px;
--search-highlight-text-color: hsl(60, 100%, 50%);
--search-highlight-text-color-active: hsl(0, 0%, 0%);
--search-highlight-background-color: hsla(53, 83%, 53%, 0.2);
--search-highlight-background-color-active: hsl(60, 100%, 50%);
--search-highlight-underline-color: hsla(60, 100%, 50%, 0.5);
--timeline-even-background-color: hsl(0, 0%, 25%);
--timeline-scanner-color: hsl(0, 0%, 80%);
/* Invert colors yet preserve the hue */
--filter-invert: invert(100%) hue-rotate(180deg);
/* TODO: Use the same variable for the default theme */
--overlay-background: hsla(0, 0%, 24%, 0.9);
--console-message-separator: var(--text-color-quaternary);
--diff-addition-text-color: hsl(70, 64%, 70%);
--diff-addition-background-color: hsl(90, 40%, 19%);
--diff-deletion-text-color: hsl(0, 84%, 75%);
--diff-deletion-background-color: hsl(5, 40%, 28%);
}
body.window-inactive {
--selected-background-color: hsla(212, 92%, 64%, 0.5);
--glyph-color: hsl(0, 0%, 52%);
--glyph-color-disabled: hsla(0, 0%, 52%, 0.4);
}
body.window-inactive * {
/* These properties are duplicated so that they have higher specificity than WebKit's stylesheet.
Otherwise, the variable definition inside 'body.window-inactive *' in OpenSource overrides with a lighter color.
When merging to open source, we should guard the existing .window-inactive style with
'@media not all' to avoid applying the definition too broadly. */
--border-color: hsl(0, 0%, 33%);
--border-color-dark: hsl(0, 0%, 37%); /* non-semantic variable names */
}
}
body.mac-platform:not(.sierra, .high-sierra) {
--selected-foreground-color: -apple-system-alternate-selected-text;
--selected-background-color: -apple-system-selected-content-background;
--selected-text-background-color: -apple-system-selected-text-background;
--breakpoint-color: -apple-system-control-accent;
--breakpoint-color-disabled: -apple-system-selected-text-background;
--glyph-color-active: -apple-system-control-accent;
--glyph-color-active-pressed: -apple-system-control-accent;
}