Refactor syntax highlighting palette
Puts the palette into variables set by the app theme.
TODO: Refactor the app theme into app theme and syntax theme, but keep
the variable usage added in this change.
Change-Id: I4fe0789af3f7bbc1b8b0568f62bc58814a0d571d
diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
index f45b2d3..c7b89c1 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -25,7 +25,7 @@
<link rel="import" href="../gr-diff-comment-thread/gr-diff-comment-thread.html">
<link rel="import" href="../gr-diff-highlight/gr-diff-highlight.html">
<link rel="import" href="../gr-diff-selection/gr-diff-selection.html">
-<link rel="import" href="../gr-syntax-themes/gr-theme-default.html">
+<link rel="import" href="../gr-syntax-themes/gr-syntax-theme.html">
<script src="../../../scripts/hiddenscroll.js"></script>
@@ -257,7 +257,7 @@
background-repeat: repeat-y;
}
</style>
- <style include="gr-theme-default"></style>
+ <style include="gr-syntax-theme"></style>
<div id="diffHeader" hidden$="[[_computeDiffHeaderHidden(_diffHeaderItems)]]">
<template
is="dom-repeat"
diff --git a/polygerrit-ui/app/elements/diff/gr-syntax-themes/gr-syntax-theme.html b/polygerrit-ui/app/elements/diff/gr-syntax-themes/gr-syntax-theme.html
new file mode 100644
index 0000000..3dfbf34
--- /dev/null
+++ b/polygerrit-ui/app/elements/diff/gr-syntax-themes/gr-syntax-theme.html
@@ -0,0 +1,104 @@
+<!--
+@license
+Copyright (C) 2016 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<dom-module id="gr-syntax-theme">
+ <template>
+ <style>
+ /**
+ * @overview Highlight.js emits the following classes that do not have
+ * styles here:
+ * subst, symbol, class, function, doctag, meta-string, section, name,
+ * builtin-name, bulletm, code, formula, quote, addition, deletion,
+ * attribute
+ * @see {@link http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html}
+ */
+
+ .contentText {
+ color: var(--syntax-default-color);
+ }
+ .gr-syntax-meta {
+ color: var(--syntax-meta-color);
+ }
+ .gr-syntax-keyword {
+ color: var(--syntax-keyword-color);
+ line-height: 1;
+ }
+ .gr-syntax-number {
+ color: var(--syntax-number-color);
+ }
+ .gr-syntax-selector-class {
+ color: var(--syntax-selector-class-color);
+ }
+ .gr-syntax-variable {
+ color: var(--syntax-variable-color);
+ }
+ .gr-syntax-template-variable {
+ color: var(--syntax-template-variable-color);
+ }
+ .gr-syntax-comment {
+ color: var(--syntax-comment-color);
+ }
+ .gr-syntax-string {
+ color: var(--syntax-string-color);
+ }
+ .gr-syntax-selector-id {
+ color: var(--syntax-selector-id-color);
+ }
+ .gr-syntax-built_in {
+ color: var(--syntax-built_in-color);
+ }
+ .gr-syntax-tag {
+ color: var(--syntax-tag-color);
+ }
+ .gr-syntax-link {
+ color: var(--syntax-link-color);
+ }
+ .gr-syntax-meta-keyword {
+ color: var(--syntax-meta-keyword-color);
+ }
+ .gr-syntax-type {
+ color: var(--syntax-type-color);
+ }
+ .gr-syntax-title {
+ color: var(--syntax-title-color);
+ }
+ .gr-syntax-attr {
+ color: var(--syntax-attr-color);
+ }
+ .gr-syntax-literal { /* XML/HTML Attribute */
+ color: var(--syntax-literal-color);
+ }
+ .gr-syntax-selector-pseudo {
+ color: var(--syntax-selector-pseudo-color);
+ }
+ .gr-syntax-regexp {
+ color: var(--syntax-regexp-color);
+ }
+ .gr-syntax-selector-attr {
+ color: var(--syntax-selector-attr-color);
+ }
+ .gr-syntax-template-tag {
+ color: var(--syntax-template-tag-color);
+ }
+ .gr-syntax-emphasis {
+ font-style: italic;
+ }
+ .gr-syntax-strong {
+ font-weight: 700;
+ }
+ </style>
+ </template>
+</dom-module>
diff --git a/polygerrit-ui/app/elements/diff/gr-syntax-themes/gr-theme-default.html b/polygerrit-ui/app/elements/diff/gr-syntax-themes/gr-theme-default.html
deleted file mode 100644
index b6a84ad..0000000
--- a/polygerrit-ui/app/elements/diff/gr-syntax-themes/gr-theme-default.html
+++ /dev/null
@@ -1,87 +0,0 @@
-<!--
-@license
-Copyright (C) 2016 The Android Open Source Project
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
--->
-<dom-module id="gr-theme-default">
- <template>
- <style>
- /**
- * @overview Highlight.js emits the following classes that do not have
- * styles here:
- * subst, symbol, class, function, doctag, meta-string, section, name,
- * builtin-name, bulletm, code, formula, quote, addition, deletion,
- * attribute
- * @see {@link http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html}
- */
-
- .gr-syntax-meta {
- color: #FF1717;
- }
- .gr-syntax-keyword {
- color: #9E0069;
- line-height: 1;
- }
- .gr-syntax-number,
- .gr-syntax-selector-class {
- color: #164;
- }
- .gr-syntax-variable {
- color: black;
- }
- .gr-syntax-template-variable {
- color: #0000C0;
- }
- .gr-syntax-comment {
- color: #3F7F5F;
- }
- .gr-syntax-string,
- .gr-syntax-selector-id {
- color: #2A00FF;
- }
- .gr-syntax-built_in {
- color: #30a;
- }
- .gr-syntax-tag {
- color: #170;
- }
- .gr-syntax-link,
- .gr-syntax-meta-keyword {
- color: #219;
- }
- .gr-syntax-type {
- color: var(--color-link);
- }
- .gr-syntax-title {
- color: #0000C0;
- }
- .gr-syntax-attr,
- .gr-syntax-literal { /* XML/HTML Attribute */
- color: #219;
- }
- .gr-syntax-selector-pseudo,
- .gr-syntax-regexp,
- .gr-syntax-selector-attr,
- .gr-syntax-template-tag {
- color: #FA8602;
- }
- .gr-syntax-emphasis {
- font-style: italic;
- }
- .gr-syntax-strong {
- font-weight: 700;
- }
- </style>
- </template>
-</dom-module>
diff --git a/polygerrit-ui/app/styles/app-theme.html b/polygerrit-ui/app/styles/app-theme.html
index a9c449e..265705b 100644
--- a/polygerrit-ui/app/styles/app-theme.html
+++ b/polygerrit-ui/app/styles/app-theme.html
@@ -48,6 +48,29 @@
--color-link-tertiary: #000;
/* 12% darker */
--color-button-hover: #0B47BA;
+
+ --syntax-default-color: var(--primary-text-color);
+ --syntax-meta-color: #FF1717;
+ --syntax-keyword-color: #9E0069;
+ --syntax-number-color: #164;
+ --syntax-selector-class-color: #164;
+ --syntax-variable-color: black;
+ --syntax-template-variable-color: #0000C0;
+ --syntax-comment-color: #3F7F5F;
+ --syntax-string-color: #2A00FF;
+ --syntax-selector-id-color: #2A00FF;
+ --syntax-built_in-color: #30a;
+ --syntax-tag-color: #170;
+ --syntax-link-color: #219;
+ --syntax-meta-keyword-color: #219;
+ --syntax-type-color: var(--color-link);
+ --syntax-title-color: #0000C0;
+ --syntax-attr-color: #219;
+ --syntax-literal-color: #219;
+ --syntax-selector-pseudo-color: #FA8602;
+ --syntax-regexp-color: #FA8602;
+ --syntax-selector-attr-color: #FA8602;
+ --syntax-template-tag-color: #FA8602;
}
@media screen and (max-width: 50em) {
:root {
