Files
react-native-devtools-frontend/front_end/ui/inspectorSyntaxHighlight.css
T
Wolfgang Beyer ab366d8f97 Add css variable for link-color
This CL adds a variable for the link color in both light and dark mode.
This is in preparation for fixing the color of icons which are links in
the issues tab. But by removing the the yellowish devtools-link color
in the dark theme it already removes some inconsistencies.

before: https://i.imgur.com/ZcGhG9C.png
after: https://i.imgur.com/WxWpjYS.png

Bug: chromium:1122511

Change-Id: I17703643d8d0180f28761a6adf56f2b92ee1e4aa
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2391225
Commit-Queue: Wolfgang Beyer <wolfi@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
2020-09-22 11:29:45 +00:00

197 lines
5.4 KiB
CSS

/*
* Copyright (C) 2009 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.
* 3. Neither the name of Apple Computer, Inc. ("Apple") nor the names of
* its contributors may be used to endorse or promote products derived
* from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY APPLE 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 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.
*/
.cm-js-keyword { color: hsl(310deg 86% 36%); }
.cm-js-number { color: hsl(248deg 100% 41%); }
.cm-js-comment {
color: hsl(120deg 100% 23%);
font-style: italic;
}
.cm-js-string { color: hsl(1deg 80% 43%); }
.cm-js-string-2 { color: hsl(1deg 99% 39%); }
.cm-js-atom { color: hsl(310deg 86% 36%); }
.cm-js-def { color: hsl(240deg 73% 38%); }
.cm-js-operator { color: hsl(27deg 100% 30%); }
.cm-js-meta { color: hsl(27deg 100% 30%); }
.cm-js-variable-2 { color: hsl(240deg 73% 38%); }
.cm-css-keyword { color: rgb(7 144 154); }
.cm-css-number { color: rgb(50 0 255); }
.cm-css-comment { color: rgb(0 116 0); }
.cm-css-def { color: rgb(200 0 0); }
.cm-css-meta { color: rgb(200 0 0); }
.cm-css-atom { color: rgb(7 144 154); }
.cm-css-string { color: rgb(7 144 154); }
.cm-css-string-2 { color: rgb(7 144 154); }
.cm-css-link { color: rgb(7 144 154); }
.cm-css-variable { color: rgb(200 0 0); }
.cm-css-variable-2 { color: rgb(0 0 128); }
.cm-css-property,
.webkit-css-property { color: rgb(200 0 0); }
.cm-xml-meta { color: rgb(192 192 192); }
.cm-xml-comment { color: rgb(35 110 37); }
.cm-xml-string { color: rgb(26 26 166); }
.cm-xml-tag { color: var(--dom-tag-name-color); }
.cm-xml-attribute { color: rgb(153 69 0); }
.cm-xml-link { color: #00e; }
:root {
--dom-tag-name-color: rgb(136 18 128);
--dom-attribute-name-color: rgb(153 69 0);
}
.webkit-html-comment {
/* Keep this in sync with view-source.css (.webkit-html-comment) */
color: rgb(35 110 37);
}
.webkit-html-tag {
color: rgb(168 148 166);
}
.webkit-html-tag-name,
.webkit-html-close-tag-name {
/* Keep this in sync with view-source.css (.webkit-html-tag) */
color: var(--dom-tag-name-color);
}
.webkit-html-pseudo-element {
/* This one is non-standard. */
color: brown;
}
.webkit-html-js-node,
.webkit-html-css-node {
white-space: pre-wrap;
}
.webkit-html-text-node {
unicode-bidi: -webkit-isolate;
}
.webkit-html-entity-value {
/* This one is non-standard. */
background-color: rgb(0 0 0 / 15%);
unicode-bidi: -webkit-isolate;
}
.webkit-html-doctype {
/* Keep this in sync with view-source.css (.webkit-html-doctype) */
color: rgb(192 192 192);
}
.webkit-html-attribute-name {
/* Keep this in sync with view-source.css (.webkit-html-attribute-name) */
color: var(--dom-attribute-name-color);
unicode-bidi: -webkit-isolate;
}
.webkit-html-attribute-value {
/* Keep this in sync with view-source.css (.webkit-html-attribute-value) */
color: rgb(26 26 166);
unicode-bidi: -webkit-isolate;
word-break: break-all;
}
.devtools-link {
color: var(--link-color);
text-decoration: underline;
}
.devtools-link [is=ui-icon] {
vertical-align: middle;
}
.devtools-link [is=ui-icon].icon-mask {
background-color: var(--link-color);
}
.devtools-link:focus-visible {
outline-width: unset;
}
.devtools-link:not(.devtools-link-prevent-click) {
cursor: pointer;
}
/* Default CodeMirror Theme */
.cm-negative { color: #d44; }
.cm-positive { color: #292; }
.cm-header,
.cm-strong { font-weight: bold; }
.cm-em { font-style: italic; }
.cm-link {
text-decoration: underline;
color: #00c;
}
.cm-strikethrough { text-decoration: line-through; }
.cm-invalidchar { color: #f00; }
.cm-header { color: blue; }
.cm-quote { color: #090; }
.cm-keyword { color: #708; }
.cm-atom { color: #219; }
.cm-number { color: #164; }
.cm-def { color: #00f; }
.cm-variable-2 { color: #05a; }
.cm-variable-3,
.cm-type { color: #085; }
.cm-comment { color: #a50; }
.cm-string { color: #a11; }
.cm-string-2 { color: #f50; }
.cm-meta { color: #555; }
.cm-qualifier { color: #555; }
.cm-builtin { color: #30a; }
.cm-bracket { color: #997; }
.cm-tag { color: #170; }
.cm-attribute { color: #00c; }
.cm-hr { color: #999; }
.cm-error { color: #f00; }
@media (forced-colors: active) {
.devtools-link:not(.devtools-link-prevent-click) {
forced-color-adjust: none;
color: linktext;
}
.devtools-link:focus-visible {
background: Highlight;
color: HighlightText;
}
}