opendev/gerrit
Code Issues Proposed changes

Pure refactoring of app-theme and dark-theme

Browse Source 
This change should have no impact.

* Grouped into sections. Sorted sections alphabetically.
* Prefer lower case hex colors.
* Explicitly list all available colors in dark theme.
* Make sure dark theme only changes colors.

Change-Id: I3c3757341adb9bae74faf687812eabcde7f9c0e9
This commit is contained in:
Ben Rohlfs
2019-10-08 09:40:00 +02:00
parent af40017b81
commit 784b9470de
2 changed files with 215 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
polygerrit-ui/app/styles/themes/app-theme.html
View File

@@ -16,137 +16,137 @@ limitations under the License.
-->
<custom-style><style is="custom-style">
html {
/* Following vars have LTS for plugin API. */
--primary-text-color: #000;
/* For backwords compatibility we keep this as --header-background-color. */
--header-background-color: #eee;
--header-title-content: 'Gerrit';
--header-icon: none;
--header-icon-size: 0em;
--header-text-color: #000;
--header-title-font-size: 1.75rem;
--footer-background-color: #eee;
--border-color: #ddd;
/* This allows to add a border in custom themes */
--header-border-bottom: 1px solid var(--border-color);
--header-border-image: '';
--footer-border-top: 1px solid var(--border-color);
/* Following are not part of plugin API. */
--selection-background-color: rgba(161, 194, 250, 0.1);
--hover-background-color: rgba(161, 194, 250, 0.2);
--expanded-background-color: #eee;
--view-background-color: #fff;
--default-horizontal-margin: 1rem;
/**
* When adding a new color variable make sure to also add it to the other
* theme files in the same directory.
*
* For colors prefer lower case hex colors.
*
* Note that plugins might be using these variables, so removing a variable
* can be a breaking change that should go into the release notes.
*/
/* text colors */
--primary-text-color: black;
--link-color: #2a66d9;
--comment-text-color: black;
--deemphasized-text-color: #757575;
/* Used on text color for change list that doesn't need user's attention. */
--reviewed-text-color: var(--primary-text-color);
--font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
/* Used on text for change list that needs user's attention. */
--font-weight-bold: 500;
--monospace-font-family: 'Roboto Mono', Menlo, 'Lucida Console', Monaco, monospace;
--iron-overlay-backdrop: {
transition: none;
}
--default-button-text-color: #2a66d9;
--error-text-color: red;
--primary-button-text-color: white;
/* Used on text color for change list that doesn't need user's attention. */
--reviewed-text-color: black;
--secondary-button-text-color: #212121;
--tooltip-text-color: white;
--vote-text-color-recommended: #388e3c;
--vote-text-color-disliked: #d32f2f;
/* background colors */
--assignee-highlight-color: #fcfad6;
--chip-background-color: #eee;
--comment-background-color: #fcfad6;
--default-button-background-color: white;
--dialog-background-color: white;
--dropdown-background-color: white;
--edit-mode-background-color: #ebf5fb;
--emphasis-color: #fff9c4;
--expanded-background-color: #eee;
--hover-background-color: rgba(161, 194, 250, 0.2);
--primary-button-background-color: #2a66d9;
--secondary-button-background-color: white;
--select-background-color: #f8f8f8;
--selection-background-color: rgba(161, 194, 250, 0.1);
--shell-command-background-color: #f5f5f5;
--shell-command-decoration-background-color: #ebebeb;
--table-header-background-color: #fafafa;
--table-subheader-background-color: #eaeaea;
--tooltip-background-color: #333;
--unresolved-comment-background-color: #fcfaa6;
--view-background-color: white;
--vote-color-approved: #9fcc6b;
--vote-color-disliked: #f7c4cb;
--vote-color-neutral: #ebf5fb;
--vote-color-recommended: #c9dfaf;
--vote-color-rejected: #f7a1ad;
--chip-background-color: #eee;
/* misc colors */
--border-color: #ddd;
--dropdown-background-color: #fff;
--select-background-color: rgb(248, 248, 248);
--assignee-highlight-color: #fcfad6;
/* Font sizes */
/* fonts */
--font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
--font-size-normal: 1rem;
--font-size-small: .92rem;
--font-size-large: 1.154rem;
/* Used on text for change list that needs user's attention. */
--font-weight-bold: 500;
--monospace-font-family: 'Roboto Mono', Menlo, 'Lucida Console', Monaco, monospace;
--link-color: #2a66d9;
--primary-button-background-color: var(--link-color);
--primary-button-text-color: #fff;
--secondary-button-background-color: #fff;
--secondary-button-text-color: #212121;
--default-button-background-color: #fff;
--default-button-text-color: var(--link-color);
--dialog-background-color: #fff;
/* spacing */
--default-horizontal-margin: 1rem;
/* Used for both the old patchset header and for indicating that a particular
change message was selected. */
--emphasis-color: #fff9c4;
/* header and footer */
--footer-background-color: #eee;
--footer-border-top: 1px solid var(--border-color);
--header-background-color: #eee;
--header-border-bottom: 1px solid var(--border-color);
--header-border-image: '';
--header-icon-size: 0em;
--header-icon: none;
--header-text-color: black;
--header-title-content: 'Gerrit';
--header-title-font-size: 1.75rem;
--error-text-color: red;
--vote-color-approved: #9fcc6b;
--vote-color-recommended: #c9dfaf;
--vote-color-rejected: #f7a1ad;
--vote-color-disliked: #f7c4cb;
--vote-color-neutral: #ebf5fb;
--vote-text-color-recommended: #388E3C;
--vote-text-color-disliked: #D32F2F;
/* Diff colors */
--diff-selection-background-color: #c7dbf9;
--light-remove-highlight-color: #FFEBEE;
--light-add-highlight-color: #D8FED8;
--light-remove-add-highlight-color: #FFF8DC;
--light-rebased-add-highlight-color: #EEEEFF;
--dark-remove-highlight-color: #FFCDD2;
--dark-add-highlight-color: #AAF2AA;
--dark-rebased-remove-highlight-color: #F7E8B7;
--dark-rebased-add-highlight-color: #D7D7F9;
--diff-context-control-color: var(--deemphasized-text-color);
/* diff colors */
--dark-add-highlight-color: #aaf2aa;
--dark-rebased-add-highlight-color: #d7d7f9;
--dark-rebased-remove-highlight-color: #f7e8b7;
--dark-remove-highlight-color: #ffcdd2;
--diff-blank-background-color: white;
--diff-context-control-background-color: #fff7d4;
--diff-context-control-border-color: #f6e6a5;
--diff-tab-indicator-color: var(--deemphasized-text-color);
--diff-trailing-whitespace-indicator: #ff9ad2;
--diff-context-control-color: var(--deemphasized-text-color);
--diff-highlight-range-color: rgba(255, 213, 0, 0.5);
--diff-highlight-range-hover-color: rgba(255, 255, 0, 0.5);
--diff-blank-background-color: #fff;
--diff-selection-background-color: #c7dbf9;
--diff-tab-indicator-color: var(--deemphasized-text-color);
--diff-trailing-whitespace-indicator: #ff9ad2;
--light-add-highlight-color: #d8fed8;
--light-rebased-add-highlight-color: #eef;
--light-remove-add-highlight-color: #fff8dc;
--light-remove-highlight-color: #ffebee;
--shell-command-background-color: #f5f5f5;
--shell-command-decoration-background-color: #ebebeb;
--comment-text-color: #000;
--comment-background-color: #fcfad6;
--unresolved-comment-background-color: #fcfaa6;
--edit-mode-background-color: #ebf5fb;
--tooltip-background-color: #333;
--tooltip-text-color: #fff;
--syntax-default-color: var(--primary-text-color);
--syntax-attribute-color: var(--primary-text-color);
--syntax-function-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 colors */
--syntax-attr-color: #219;
--syntax-attribute-color: var(--primary-text-color);
--syntax-built_in-color: #30a;
--syntax-comment-color: #3f7f5f;
--syntax-default-color: var(--primary-text-color);
--syntax-function-color: var(--primary-text-color);
--syntax-keyword-color: #9e0069;
--syntax-link-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;
--syntax-meta-color: #ff1717;
--syntax-meta-keyword-color: #219;
--syntax-number-color: #164;
--syntax-param-color: var(--primary-text-color);
--syntax-regexp-color: #fa8602;
--syntax-selector-attr-color: #fa8602;
--syntax-selector-class-color: #164;
--syntax-selector-id-color: #2a00ff;
--syntax-selector-pseudo-color: #fa8602;
--syntax-string-color: #2a00ff;
--syntax-tag-color: #170;
--syntax-template-tag-color: #fa8602;
--syntax-template-variable-color: #0000c0;
--syntax-title-color: #0000c0;
--syntax-type-color: #2a66d9;
--syntax-variable-color: var(--primary-text-color);
/* misc */
--reply-overlay-z-index: 1000;
--iron-overlay-backdrop: {
transition: none;
};
}
@media screen and (max-width: 50em) {
html {

186
polygerrit-ui/app/styles/themes/dark-theme.html
View File

@@ -17,97 +17,123 @@ limitations under the License.
<dom-module id="dark-theme">
<custom-style><style is="custom-style">
html {
/**
* Sections and variables must stay consistent with app-theme.html.
*
* Only modify color variables in this theme file. dark-theme extends
* app-theme, so there is no need to repeat all variables, but for colors
* it does make sense to list them all: If you override one color, then
* you probably want to override all.
*/
/* text colors */
--primary-text-color: #e8eaed;
--view-background-color: #131416;
--border-color: #5f6368;
--header-border-bottom: 1px solid var(--border-color);
--header-border-image: '';
--footer-border-bottom: 1px solid var(--border-color);
--link-color: #8ab4f8;
--comment-text-color: var(--primary-text-color);
--deemphasized-text-color: #9aa0a6;
--default-button-text-color: #8ab4f8;
--error-text-color: red;
--primary-button-text-color: var(--primary-text-color);
/* Used on text color for change list doesn't need user's attention. */
--reviewed-text-color: #dadce0;
--secondary-button-text-color: var(--deemphasized-text-color);
--tooltip-text-color: white;
--vote-text-color-recommended: #388e3c;
--vote-text-color-disliked: #d32f2f;
/* background colors */
--assignee-highlight-color: #3a361c;
--chip-background-color: #131416;
--comment-background-color: #0b162b;
--default-button-background-color: #3c4043;
--dialog-background-color: #131416;
--dropdown-background-color: #131416;
--edit-mode-background-color: #5c0a36;
--emphasis-color: #383f4a;
--expanded-background-color: #26282b;
--hover-background-color: rgba(161, 194, 250, 0.2);
--primary-button-background-color: var(--link-color);
--secondary-button-background-color: var(--primary-text-color);
--select-background-color: #3c4043;
--selection-background-color: rgba(161, 194, 250, 0.1);
--shell-command-background-color: #5f5f5f;
--shell-command-decoration-background-color: #999;
--table-header-background-color: #131416;
--table-subheader-background-color: #3c4043;
--header-background-color: #3c4043;
--header-text-color: var(--primary-text-color);
--deemphasized-text-color: #9aa0a6;
/* Used on text color for change list doesn't need user's attention. */
--reviewed-text-color: #DADCE0;
/* Used on text for change list that needs user's attention. */
--font-weight-bold: 900;
--footer-background-color: var(--table-header-background-color);
--expanded-background-color: #26282b;
--link-color: #8ab4f8;
--primary-button-background-color: var(--link-color);
--primary-button-text-color: var(--primary-text-color);
--secondary-button-background-color: var(--primary-text-color);
--secondary-button-text-color: var(--deemphasized-text-color);
--default-button-text-color: var(--link-color);
--default-button-background-color: var(--table-subheader-background-color);
--dropdown-background-color: var(--table-header-background-color);
--dialog-background-color: var(--view-background-color);
--chip-background-color: var(--table-header-background-color);
--header-title-font-size: 1.75rem;
--select-background-color: var(--table-subheader-background-color);
--assignee-highlight-color: rgb(58, 54, 28);
--diff-selection-background-color: #3A71D8;
--light-remove-highlight-color: #320404;
--light-add-highlight-color: #0F401F;
--light-remove-add-highlight-color: #2f3f2f;
--light-rebased-remove-highlight-color: rgb(60, 37, 8);
--light-rebased-add-highlight-color: rgb(72, 113, 101);
--dark-remove-highlight-color: #62110F;
--dark-add-highlight-color: #133820;
--dark-rebased-remove-highlight-color: rgba(255, 139, 6, 0.15);
--dark-rebased-add-highlight-color: rgba(11, 255, 155, 0.15);
--diff-context-control-color: var(--deemphasized-text-color);
--diff-context-control-background-color: var(--table-header-background-color);
--diff-context-control-border-color: var(--border-color);
--diff-highlight-range-color: rgba(0, 100, 200, 0.5);
--diff-highlight-range-hover-color: rgba(0, 150, 255, 0.5);
--shell-command-background-color: #5f5f5f;
--shell-command-decoration-background-color: #999999;
--comment-text-color: var(--primary-text-color);
--comment-background-color: #0B162B;
--unresolved-comment-background-color: rgb(56, 90, 154);
--diff-blank-background-color: #212121;
--vote-color-approved: rgb(127, 182, 107);
--vote-color-recommended: rgb(63, 103, 50);
--vote-color-rejected: #ac2d3e;
--tooltip-background-color: #111;
--unresolved-comment-background-color: #385a9a;
--view-background-color: #131416;
--vote-color-approved: #7fb66b;
--vote-color-disliked: #bf6874;
--vote-color-neutral: #597280;
--vote-color-recommended: #3f6732;
--vote-color-rejected: #ac2d3e;
--edit-mode-background-color: rgb(92, 10, 54);
--emphasis-color: #383f4a;
/* misc colors */
--border-color: #5f6368;
--tooltip-background-color: #111;
/* fonts */
/* Used on text for change list that needs user's attention. */
--font-weight-bold: 900;
--syntax-default-color: var(--primary-text-color);
--syntax-meta-color: #6D7EEE;
--syntax-keyword-color: #CD4CF0;
--syntax-number-color: #00998A;
--syntax-selector-class-color: #FFCB68;
--syntax-variable-color: #F77669;
--syntax-template-variable-color: #F77669;
/* spacing */
/* header and footer */
--footer-background-color: #131416;
--footer-border-top: 1px solid var(--border-color);
--header-background-color: #3c4043;
--header-border-bottom: 1px solid var(--border-color);
--header-text-color: var(--primary-text-color);
/* diff colors */
--dark-add-highlight-color: #133820;
--dark-rebased-add-highlight-color: rgba(11, 255, 155, 0.15);
--dark-rebased-remove-highlight-color: rgba(255, 139, 6, 0.15);
--dark-remove-highlight-color: #62110f;
--diff-blank-background-color: #212121;
--diff-context-control-background-color: #131416;
--diff-context-control-border-color: var(--border-color);
--diff-context-control-color: var(--deemphasized-text-color);
--diff-highlight-range-color: rgba(0, 100, 200, 0.5);
--diff-highlight-range-hover-color: rgba(0, 150, 255, 0.5);
--diff-selection-background-color: #3a71d8;
--diff-tab-indicator-color: var(--deemphasized-text-color);
--diff-trailing-whitespace-indicator: #ff9ad2;
--light-add-highlight-color: #0f401f;
--light-rebased-add-highlight-color: #487165;
--light-remove-add-highlight-color: #2f3f2f;
--light-remove-highlight-color: #320404;
/* syntax colors */
--syntax-attr-color: #80cbbf;
--syntax-attribute-color: var(--primary-text-color);
--syntax-built_in-color: #f7c369;
--syntax-comment-color: var(--deemphasized-text-color);
--syntax-string-color: #C3E88D;
--syntax-selector-id-color: #F77669;
--syntax-built_in-color: rgb(247, 195, 105);
--syntax-tag-color: #F77669;
--syntax-link-color: #C792EA;
--syntax-meta-keyword-color: #EEFFF7;
--syntax-type-color: #DD5F5F;
--syntax-title-color: #75A5FF;
--syntax-attr-color: #80CBBF;
--syntax-literal-color: #EEFFF7;
--syntax-selector-pseudo-color: #C792EA;
--syntax-regexp-color: #F77669;
--syntax-selector-attr-color: #80CBBF;
--syntax-template-tag-color: #C792EA;
--syntax-default-color: var(--primary-text-color);
--syntax-function-color: var(--primary-text-color);
--syntax-keyword-color: #cd4cf0;
--syntax-link-color: #c792ea;
--syntax-literal-color: #eefff7;
--syntax-meta-color: #6d7eee;
--syntax-meta-keyword-color: #eefff7;
--syntax-number-color: #00998a;
--syntax-param-color: var(--primary-text-color);
--syntax-regexp-color: #f77669;
--syntax-selector-attr-color: #80cbbf;
--syntax-selector-class-color: #ffcb68;
--syntax-selector-id-color: #f77669;
--syntax-selector-pseudo-color: #c792ea;
--syntax-string-color: #c3e88d;
--syntax-tag-color: #f77669;
--syntax-template-tag-color: #c792ea;
--syntax-template-variable-color: #f77669;
--syntax-title-color: #75a5ff;
--syntax-type-color: #dd5f5f;
--syntax-variable-color: #f77669;
--reply-overlay-z-index: 1000;
/* misc */
/* rules applied to <html> */
background-color: var(--view-background-color);
}
</style></custom-style>