CSS color enhancements

web_src/less/_base.less

@@ -12,6 +12,7 @@
   --height-loading: 12rem;
   /* base colors */
   --color-primary: #4183c4;
+  --color-primary-contrast: #ffffff;
   --color-primary-dark-1: #3876b3;
   --color-primary-dark-2: #31699f;
   --color-primary-dark-3: #2b5c8b;
@@ -163,9 +164,11 @@
   --color-tooltip-text: #ffffff;
   --color-header-bar: #ffffff;
   --color-label-active-bg: #d0d0d0;
+  --color-accent: var(--color-primary-light-1);
   --color-small-accent: var(--color-primary-light-6);
-  --color-accent: var(--color-primary-light-4);
   --color-active-line: #fffbdd;
+
+  accent-color: var(--color-accent);
 }
 
 :root * {
@@ -230,10 +233,10 @@ progress::-webkit-progress-bar {
   background: var(--color-secondary-dark-1);
 }
 progress::-webkit-progress-value {
-  background-color: var(--color-secondary-dark-4);
+  background-color: var(--color-accent);
 }
 progress::-moz-progress-bar {
-  background: var(--color-secondary-dark-4);
+  background-color: var(--color-accent);
 }
 
 * {
@@ -260,6 +263,17 @@ progress::-moz-progress-bar {
   background: transparent;
 }
 
+::file-selector-button {
+  border: 1px solid var(--color-light-border);
+  color: var(--color-text-light);
+  background: var(--color-light);
+  border-radius: var(--border-radius);
+}
+::file-selector-button:hover {
+  color: var(--color-text);
+  background: var(--color-hover);
+}
+
 ::selection {
   background: var(--color-primary-light-1) !important;
   color: var(--color-white) !important;
@@ -1598,11 +1612,11 @@ footer {
 
 .activity-bar-graph {
   background-color: var(--color-primary);
-  color: #fff;
+  color: var(--color-primary-contrast);
 }
 
 .activity-bar-graph-alt {
-  color: #fff;
+  color: var(--color-primary-contrast);
 }
 
 .archived-icon {
@@ -1899,6 +1913,7 @@ a.ui.label:hover {
 .ui.primary.button,
 .ui.primary.buttons .button {
   background-color: var(--color-primary) !important;
+  color: var(--color-primary-contrast) !important;
 }
 
 .ui.primary.button:hover,
@@ -1914,7 +1929,7 @@ a.ui.label:hover {
 .ui.basic.primary.button,
 .ui.basic.primary.buttons .button {
   box-shadow: inset 0 0 0 1px var(--color-primary) !important;
-  color: #fff !important;
+  color: var(--color-primary-contrast) !important;
 }
 
 .ui.basic.primary.button:hover,

web_src/less/_review.less

@@ -194,7 +194,7 @@ a.blob-excerpt {
 
 a.blob-excerpt:hover {
   background: var(--color-primary);
-  color: #fff;
+  color: var(--color-primary-contrast);
 }
 
 // See the comment of createCommentEasyMDE() for the review editor
@@ -244,7 +244,7 @@ a.blob-excerpt:hover {
 
 #review-box .review-comments-counter {
   background-color: var(--color-primary-light-4);
-  color: #fff;
+  color: var(--color-primary-contrast);
 }
 
 #review-box:hover .review-comments-counter {
@@ -275,7 +275,7 @@ a.blob-excerpt:hover {
 .viewed-file-form {
   display: flex;
   align-items: center;
-  border: 1px none;
+  border: 1px solid transparent;
   padding: 4px 8px;
   margin: -8px 0; // just like other buttons in the diff box header
   border-radius: .285rem; // just like .ui.tiny.button
@@ -288,7 +288,7 @@ a.blob-excerpt:hover {
 
 .viewed-file-checked-form {
   background-color: var(--color-small-accent);
-  border: 1px solid var(--color-accent);
+  border-color: var(--color-accent);
 }
 
 #viewed-files-summary {

web_src/less/_tribute.less

@@ -23,7 +23,7 @@
 .tribute-container li.highlight,
 .tribute-container li:hover {
   background: var(--color-primary) !important;
-  color: #ffffff !important;
+  color: var(--color-primary-contrast) !important;
 }
 
 .tribute-item {

web_src/less/themes/theme-arc-green.less

@@ -4,6 +4,7 @@
 :root {
   --is-dark-theme: true;
   --color-primary: #87ab63;
+  --color-primary-contrast: #ffffff;
   --color-primary-dark-1: #93b373;
   --color-primary-dark-2: #9fbc82;
   --color-primary-dark-3: #abc492;
@@ -135,8 +136,8 @@
   --color-reaction-active-bg: var(--color-primary-alpha-40);
   --color-header-bar: #2e323e;
   --color-label-active-bg: #4c525e;
+  --color-accent: var(--color-primary-light-1);
   --color-small-accent: var(--color-primary-light-5);
-  --color-accent: var(--color-primary-light-3);
   --color-active-line: #534d1b;
 }