Merge "Introduce a palette of three gray background colors"
diff --git a/polygerrit-ui/app/styles/themes/app-theme.html b/polygerrit-ui/app/styles/themes/app-theme.html
index 7bb8fff..87230e6 100644
--- a/polygerrit-ui/app/styles/themes/app-theme.html
+++ b/polygerrit-ui/app/styles/themes/app-theme.html
@@ -42,28 +42,34 @@
--vote-text-color-disliked: #d32f2f;
/* background colors */
+ /* primary background colors */
+ --background-color-primary: #ffffff;
+ --background-color-secondary: #f8f9fa;
+ --background-color-tertiary: #f1f3f4;
+ /* directly derived from primary background colors */
+ --chip-background-color: var(--background-color-tertiary);
+ --default-button-background-color: var(--background-color-primary);
+ --dialog-background-color: var(--background-color-primary);
+ --dropdown-background-color: var(--background-color-primary);
+ --expanded-background-color: var(--background-color-tertiary);
+ --secondary-button-background-color: var(--background-color-primary);
+ --select-background-color: var(--background-color-secondary);
+ --shell-command-background-color: var(--background-color-secondary);
+ --shell-command-decoration-background-color: var(--background-color-tertiary);
+ --table-header-background-color: var(--background-color-secondary);
+ --table-subheader-background-color: var(--background-color-tertiary);
+ --view-background-color: var(--background-color-primary);
+ /* unique background colors */
--assignee-highlight-color: #fcfad6;
- --chip-background-color: #eee;
--comment-background-color: #fcfad6;
--robot-comment-background-color: #e8f0fe;
- --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;
@@ -71,7 +77,7 @@
--vote-color-rejected: #f7a1ad;
/* misc colors */
- --border-color: #ddd;
+ --border-color: #dadce0;
/* fonts */
--font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
@@ -103,9 +109,9 @@
--spacing-xxl: 24px;
/* header and footer */
- --footer-background-color: #eee;
+ --footer-background-color: var(--background-color-tertiary);
--footer-border-top: 1px solid var(--border-color);
- --header-background-color: #eee;
+ --header-background-color: var(--background-color-tertiary);
--header-border-bottom: 1px solid var(--border-color);
--header-border-image: '';
--header-box-shadow: none;
diff --git a/polygerrit-ui/app/styles/themes/dark-theme.html b/polygerrit-ui/app/styles/themes/dark-theme.html
index da1e889..78bc48b 100644
--- a/polygerrit-ui/app/styles/themes/dark-theme.html
+++ b/polygerrit-ui/app/styles/themes/dark-theme.html
@@ -30,7 +30,7 @@
--primary-text-color: #e8eaed;
--link-color: #8ab4f8;
--comment-text-color: var(--primary-text-color);
- --deemphasized-text-color: #9e9e9e;
+ --deemphasized-text-color: #9aa0a6;
--default-button-text-color: #8ab4f8;
--error-text-color: red;
--primary-button-text-color: var(--primary-text-color);
@@ -42,28 +42,24 @@
--vote-text-color-disliked: #d32f2f;
/* background colors */
+ /* primary background colors */
+ --background-color-primary: #202124;
+ --background-color-secondary: #2f3034;
+ --background-color-tertiary: #3b3d3f;
+ /* directly derived from primary background colors */
+ /* empty, because inheriting from app-theme is just fine
+ /* unique background colors */
--assignee-highlight-color: #3a361c;
- --chip-background-color: #131416;
--comment-background-color: #0b162b;
--robot-comment-background-color: #e8f0fe;
- --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: rgba(158, 158, 158, 0.24);
--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;
@@ -79,9 +75,9 @@
/* spacing */
/* header and footer */
- --footer-background-color: #131416;
+ --footer-background-color: var(--background-color-tertiary);
--footer-border-top: 1px solid var(--border-color);
- --header-background-color: #3c4043;
+ --header-background-color: var(--background-color-tertiary);
--header-border-bottom: 1px solid var(--border-color);
--header-padding: 0 var(--spacing-l);
--header-text-color: var(--primary-text-color);
