Normalize colors to the palette (jenkinsci#4867)

core/src/main/resources/hudson/PluginManager/_table.css

@@ -19,7 +19,7 @@ time {
 .plugin-manager__category-label:visited {
     display: inline-block;
     border: 1px solid #ccc;
-    border: 1px solid var(--input-border);
+    border: 1px solid var(--plugin-manager-category-link-border-color);
     background-color: #fbfbfb;
     background-color: var(--plugin-manager-category-link-bg-color);
     color: #333;

core/src/main/resources/jenkins/security/ApiTokenProperty/resources.css

@@ -28,6 +28,7 @@
 
     max-width: 700px;
     border: 1px solid #cccccc;
+    border-color: var(--medium-grey);
     border-radius: 3px;
 } 
 

core/src/main/resources/lib/layout/breadcrumbs.css

@@ -76,10 +76,12 @@
        add it in the LI element so that it applies to the menuSeparator */
     text-decoration: underline;
     outline-color: #3FB3F7;
+    outline-color: var(--focus);
 }
 
 #breadcrumbs LI A:active {
     background-color: #C8CEC2;
+    background-color: var(--breadcrumbs-item-bg-color--hover);
 }
 
 #breadcrumbs LI A {

war/src/main/less/abstracts/theme.less

@@ -12,23 +12,22 @@
 
   // Color palette
   --white: #fff;
-  --lightest-grey: #f8f8f8;
+  --very-light-grey: #f8f8f8;
   --light-grey: #eaeff2;
   --medium-grey: #9ba7af;
   --dark-grey: #4d545d;
-  --very-light-grey: #f0f0f0;
   --black: #333;
 
   // branding
-  --primary: #0587d4;
+  --primary: #0b6aa2;
   --secondary: #4d545d;
   --success: #138347;
   --danger: #cc0003;
   --warning: #ea6b19;
   --focus: #3fb3f7;
 
   // State colors
-  --primary-hover: #0b6aa2;
+  --primary-hover: #0587d4;
   --primary-active: #095683;
   --danger-hover: #eb383b;
   --danger-active: #b50003;
@@ -49,7 +48,7 @@
   --header-search-border: var(--white);
   --search-input-color: var(--brand-link-color);
   --search-bg: var(--white);
-  --search-box-completion-bg: var(--primary);
+  --search-box-completion-bg: var(--primary-hover);
   --search-box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.3);
 
   // Header classic colors
@@ -58,7 +57,7 @@
   --header-link-bg-classic-active: #404040;
 
   // Header new UI colors
-  --header-bg-v2: var(--primary);
+  --header-bg-v2: var(--primary-hover);
   --brand-link-color-hover-v2: var(--primary-hover);
   --brand-link-color-active-v2: var(--primary-active);
   --header-link-bg-hover-v2: var(--primary-hover);
@@ -71,7 +70,7 @@
   --breadcrumbs-bg: #f8f8f8;
   --breadcrumbs-border: var(--light-grey);
   --breadcrumbs-text-color: #4d545d;
-  --breadcrumbs-item-bg-color--hover: #e0e4dc;
+  --breadcrumbs-item-bg-color--hover: var(--light-grey);
 
   // Monitor / bell-alert new colors
   --monitor-bg-v2: #f8d7da;
@@ -119,26 +118,24 @@
   // Typography
   --text-color: var(--black);
   --text-color-secondary: var(--secondary);
-  --text-color-grey-light: #747c82;
-  --text-inactive: var(--text-color-grey-light);
 
   // Buttons
-  --btn-primary-bg: var(--primary-hover);
-  --btn-primary-bg-hover: var(--primary);
+  --btn-primary-bg: var(--primary);
+  --btn-primary-bg-hover: var(--primary-hover);
   --btn-primary-bg-active: var(--primary-active);
   --btn-secondary-color: var(--secondary);
   --btn-secondary-bg: var(--btn-text-color);
-  --btn-secondary-border: #9ba7af;
+  --btn-secondary-border: var(--medium-grey);
   --btn-text-color: var(--white);
-  --btn-link-bg--hover: #f8f8f8;
-  --btn-link-bg--active: #eaeff2;
+  --btn-link-bg--hover: var(--very-light-grey);
+  --btn-link-bg--active: var(--light-grey);
 
   // Help area
   --help-area-bg-color: var(--very-light-grey);
   --configure-job-help-area-bg-color: var(--medium-translucent);
 
   // Table
-  --even-row-color: var(--lightest-grey);
+  --even-row-color: var(--very-light-grey);
   --bigtable-border-width: var(--pane-border-width);
   --bigtable-header-bg: var(--dark-grey);
   --bigtable-header-font-weight: bold; // Does specifying this make sense
@@ -150,7 +147,7 @@
   --table-striped-bg--hover: var(--light-grey);
 
   // Link
-  --link-color: var(--primary-hover);
+  --link-color: var(--primary);
   --link-visited-color: var(--link-color);
   --link-color--hover: var(--link-color);
   --link-color--active: var(--text-color);
@@ -161,7 +158,7 @@
   // Dark link
   --link-dark-color: var(--text-color);
   --link-dark-visited-color: var(--link-dark-color);
-  --link-dark-color--hover: var(--primary);
+  --link-dark-color--hover: var(--primary-hover);
   --link-dark-color--active: var(--primary-active);
   --link-dark-text-decoration: none;
   --link-dark-text-decoration--hover: underline;
@@ -205,10 +202,9 @@
   // Side panel
   --panel-header-bg-color: var(--light-grey);
   --panel-border-color: var(--light-grey);
-  --panel-border-color--hover: #cecece;
   --side-panel-hover-color: var(--panel-border-color);
   --task-link-bg-color--active: var(--panel-border-color);
-  --task-link-bg-color--hover: #f8f8f8;
+  --task-link-bg-color--hover: var(--very-light-grey);
 
   // Form
   --input-color: var(--white);
@@ -222,7 +218,7 @@
   --menu-box-shadow: 0 3px 10px #bbb;
 
   // Manage component
-  --manage-option-bg-color--hover: #f8f8f8;
+  --manage-option-bg-color--hover: var(--very-light-grey);
   --manage-option-bg-color--active: var(--light-grey);
   --manage-option-border-color: var(--medium-grey);
 
@@ -237,16 +233,17 @@
   --configure-job-bottom-sticker-border-color: var(--line-green);
 
   // Plugin manager
-  --plugin-manager-bg-color-already-upgraded: #e8eeee;
-  --plugin-manager-category-link-bg-color: #fbfbfb;
+  --plugin-manager-bg-color-already-upgraded: var(--light-grey);
+  --plugin-manager-category-link-bg-color: var(--very-light-grey);
   --plugin-manager-category-link-bg-color--hover: #f2f2f2;
+  --plugin-manager-category-link-border-color: var(--medium-grey);
   --plugin-manager-category-link-border-color--hover: var(--black);
   --plugin-manager-category-text-color: var(--text-color);
   --plugin-manager-category-link-color--hover: var(--text-color);
 
   // Auto complete
   --auto-complete-bg-color--prehighlight: #b3d4ff;
-  
+
   // Call to action
   --call-to-action-link-color: #000;
   --call-to-action-text-color: var(--alert-info-text-color);

war/src/main/less/base/style.less

@@ -835,8 +835,8 @@ table.parameters > tbody:hover {
     opacity: 0.5;
 }
 #buildHistoryPage .build-search-row .clear:hover {
-    background-color: #d3d3d3;
-    border: 1px solid #bbb;
+    background-color: var(--very-light-grey);
+    border: 1px solid var(--medium-grey);
     padding-right: 3px;
     border-top-right-radius: 2px;
 }
@@ -879,13 +879,13 @@ table.parameters > tbody:hover {
 
 #buildHistoryPageNav.mouseOverSidePanel {
   visibility: visible;
-  border-color: #f0f0f0 !important;
+  border-color: var(--light-grey) !important;
 }
 #buildHistoryPageNav.mouseOverSidePanelBuildHistory {
-  border-color: #bbb !important;
+  border-color: var(--medium-grey) !important;
 }
 #buildHistoryPageNav:hover {
-  border-color: #bbb !important;
+  border-color: var(--medium-grey) !important;
 }
 
 #buildHistoryPageNav .pageOne {
@@ -903,7 +903,7 @@ table.parameters > tbody:hover {
 
 
 .build-row.model-link-active {
-  background: #e8e8e8 !important;
+  background: var(--light-grey) !important;
 }
 
 .build-row-cell {
@@ -1106,7 +1106,7 @@ TABLE.fingerprint-in-build TD {
 #plugins .enable-state-info, #plugins .uninstall-state-info {
     padding: 5px 20px;
     max-width: 70%;
-    border: solid 1px #f0ad4e;
+    border: solid 1px var(--warning);
     border-radius: 3px;
     text-align: center;
 }
@@ -1130,13 +1130,13 @@ TABLE.fingerprint-in-build TD {
 
 #plugins .plugin-dependency-info span {
     margin: 5px 5px 0px 0px;
-    background-color: #337ab7;
+    background-color: var(--primary);
     display: inline-block;
     padding: .2em .6em .3em;
     font-size: var(--font-size-xs);
     font-weight: 700;
     line-height: 1;
-    color: #fff;
+    color: var(--white);
     text-align: center;
     white-space: nowrap;
     vertical-align: baseline;
@@ -1151,7 +1151,7 @@ TABLE.fingerprint-in-build TD {
 }
 
 .repeated-chunk.hover {
-    border-color: #CCC;
+    border-color: var(--medium-grey);
 }
 
 .repeated-chunk .show-if-last      { visibility: hidden; }
@@ -1261,7 +1261,7 @@ TEXTAREA.rich-editor {
     white-space: normal;
     margin-top: 0.5em;
     padding-left: 2em;
-    color: #888a85;
+    color: var(--text-color-secondary);
 }
 
 #plugins .excerpt a {
@@ -1337,7 +1337,7 @@ table.progress-bar.red td.progress-bar-done {
     left:0;
     font-size: 1.75rem;
     z-index:1000;
-    border-bottom: 1px solid black;
+    border-bottom: 1px solid var(--black);
     line-height: 3.5rem;
     height: 3.5rem;
     display: block;
@@ -1480,28 +1480,29 @@ table.progress-bar.red td.progress-bar-done {
 
 /* ========================= matrix configuration table ================== */
 table#configuration-matrix {
-  border: 1px #BBBBBB solid;
+  border: 1px var(--medium-grey) solid;
   border-collapse: collapse;
 }
 tr.matrix-row {
-  background: #f0f0f0;
-  font-weight: bold;
+  background-color: var(--bigtable-header-bg);
+  color: var(--bigtable-header-text-color);
+  font-weight: var(--bigtable-header-font-weight);
 }
 td.matrix-header {
-  border: 1px #BBBBBB solid;
+  border: 1px var(--medium-grey) solid;
   padding: 3px;
 }
 td#matrix-title {
   padding: 3px;
 }
 td.matrix-leftcolumn {
-  border: 1px #BBBBBB solid;
+  border: 1px var(--medium-grey) solid;
   font-weight: bold;
-  background: #f0f0f0;
+  background: var(--very-light-grey);
   padding: 3px;
 }
 td.matrix-cell {
-  border: 1px #BBBBBB solid;
+  border: 1px var(--medium-grey) solid;
   text-align: center;
 }
 
@@ -1644,7 +1645,7 @@ body.no-sticker #bottom-sticker {
   width: 24px;
 
   /* default fill fallback */
-  fill: #111;
+  fill: var(--text-color);
   fill: currentColor;
 }
 

war/src/main/less/modules/buttons.less

@@ -47,8 +47,8 @@
 
   &:hover,
   &:focus {
-    color: var(--primary-hover);
-    border-color: var(--primary-hover);
+    color: var(--primary);
+    border-color: var(--primary);
   }
 
   &:active {
@@ -58,13 +58,13 @@
 }
 
 .button-link {
-  color: var(--primary-hover);
+  color: var(--primary);
   background-color: transparent;
   border-color: transparent;
 
   &:hover,
   &:focus {
-    color: var(--primary);
+    color: var(--primary-hover);
     background-color: var(--btn-link-bg--hover);
     border-color: var(--btn-link-bg--hover);
   }

war/src/main/less/modules/side-panel-tasks.less

@@ -71,7 +71,7 @@
     left: 0;
     height: 100%;
     content: '';
-    border-left: 4px solid var(--primary);
+    border-left: 4px solid var(--primary-hover);
   }
 }
 .task-link--active:link,

war/src/main/less/modules/side-panel-widgets.less

@@ -180,7 +180,7 @@
   top: 19px;
   bottom: 3px;
   left: 14px;
-  border-left: 1px solid var(--panel-border-color--hover);
+  border-left: 1px solid var(--medium-grey);
 }
 .build-row-cell .pane.build-name .display-name {
   margin-left: 20px;