Merge branch '28614-harmonious-color-palette' into 'master'

Change full colors to a more harmonious palette

Closes #28614

See merge request !10154

app/assets/stylesheets/framework/buttons.scss

@@ -68,23 +68,19 @@
 }
 
 @mixin btn-green {
-  @include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, $white-light);
+  @include btn-color($green-500, $green-600, $green-600, $green-700, $green-700, $green-800, $white-light);
 }
 
 @mixin btn-blue {
-  @include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-dark, $border-blue-dark, $white-light);
-}
-
-@mixin btn-blue-medium {
-  @include btn-color($blue-medium-light, $border-blue-light, $blue-medium, $border-blue-normal, $blue-medium-dark, $border-blue-dark, $white-light);
+  @include btn-color($blue-500, $blue-600, $blue-600, $blue-700, $blue-700, $blue-800, $white-light);
 }
 
 @mixin btn-orange {
-  @include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, $white-light);
+  @include btn-color($orange-500, $orange-600, $orange-600, $orange-700, $orange-700, $orange-800, $white-light);
 }
 
 @mixin btn-red {
-  @include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, $white-light);
+  @include btn-color($red-500, $red-600, $red-600, $red-700, $red-700, $red-800, $white-light);
 }
 
 @mixin btn-gray {
@@ -145,11 +141,11 @@
     &.btn-new,
     &.btn-create,
     &.btn-save {
-      @include btn-outline($white-light, $border-green-light, $border-green-light, $green-light, $white-light, $border-green-light, $green-normal, $border-green-normal);
+      @include btn-outline($white-light, $green-600, $green-500, $green-500, $white-light, $green-600, $green-600, $green-700);
     }
 
     &.btn-remove {
-      @include btn-outline($white-light, $border-red-light, $border-red-light, $red-light, $white-light, $border-red-light, $red-normal, $border-red-normal);
+      @include btn-outline($white-light, $red-500, $red-500, $red-500, $white-light, $red-600, $red-600, $red-700);
     }
   }
 
@@ -157,11 +153,8 @@
     @include btn-gray;
   }
 
-  &.btn-primary {
-    @include btn-blue-medium;
-  }
-
   &.btn-info,
+  &.btn-primary,
   &.btn-register {
     @include btn-blue;
   }
@@ -171,11 +164,11 @@
   }
 
   &.btn-close {
-    @include btn-outline($white-light, $border-orange-light, $border-orange-light, $orange-light, $white-light, $border-orange-light, $orange-normal, $border-orange-normal);
+    @include btn-outline($white-light, $orange-600, $orange-500, $orange-500, $white-light, $orange-600, $orange-600, $orange-700);
   }
 
   &.btn-spam {
-    @include btn-outline($white-light, $border-red-light, $border-red-light, $red-light, $white-light, $border-red-light, $red-normal, $border-red-normal);
+    @include btn-outline($white-light, $red-500, $red-500, $red-500, $white-light, $red-600, $red-600, $red-700);
   }
 
   &.btn-danger,
@@ -360,7 +353,7 @@
 
 .btn-inverted {
   &-secondary {
-    @include btn-outline($white-light, $border-blue-light, $border-blue-light, $blue-light, $white-light, $border-blue-light, $blue-normal, $border-blue-normal);
+    @include btn-outline($white-light, $blue-500, $blue-500, $blue-500, $white-light, $blue-600, $blue-600, $blue-700);
   }
 }
 

app/assets/stylesheets/framework/dropdowns.scss

@@ -195,7 +195,7 @@
       text-decoration: none;
 
       .badge {
-        background-color: darken($row-hover, 5%);
+        background-color: darken($dropdown-link-hover-bg, 5%);
       }
     }
 

app/assets/stylesheets/framework/forms.scss

@@ -177,34 +177,34 @@ label {
 }
 
 .gl-field-error {
-  color: $red-normal;
+  color: $red-500;
 }
 
 .gl-show-field-errors {
   .gl-field-success-outline {
-    border: 1px solid $green-normal;
+    border: 1px solid $green-600;
 
     &:focus {
-      box-shadow: 0 0 0 1px $green-normal inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $green-normal;
+      box-shadow: 0 0 0 1px $green-600 inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $green-600;
       border: 0 none;
     }
   }
 
   .gl-field-error-outline {
-    border: 1px solid $red-normal;
+    border: 1px solid $red-500;
 
     &:focus {
-      box-shadow: 0 0 0 1px $red-normal inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $gl-field-focus-shadow-error;
+      box-shadow: 0 0 0 1px $red-500 inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $gl-field-focus-shadow-error;
       border: 0 none;
     }
   }
 
   .gl-field-success-message {
-    color: $green-normal;
+    color: $green-600;
   }
 
   .gl-field-error-message {
-    color: $red-normal;
+    color: $red-500;
   }
 
   .gl-field-hint {

app/assets/stylesheets/framework/header.scss

@@ -265,7 +265,7 @@ header {
   }
 
   .impersonation i {
-    color: $red-normal;
+    color: $red-500;
   }
 }
 

app/assets/stylesheets/framework/icons.scss

 .ci-status-icon-success {
-  color: $gl-success;
+  color: $green-500;
 
   svg {
-    fill: $gl-success;
+    fill: $green-500;
   }
 }
 
@@ -17,18 +17,18 @@
 .ci-status-icon-pending,
 .ci-status-icon-failed_with_warnings,
 .ci-status-icon-success_with_warnings {
-  color: $gl-warning;
+  color: $orange-500;
 
   svg {
-    fill: $gl-warning;
+    fill: $orange-500;
   }
 }
 
 .ci-status-icon-running {
-  color: $blue-normal;
+  color: $blue-400;
 
   svg {
-    fill: $blue-normal;
+    fill: $blue-400;
   }
 }
 

app/assets/stylesheets/framework/issue_box.scss

@@ -33,7 +33,7 @@
   }
 
   &.status-box-open {
-    background-color: $green-light;
+    background-color: $green-500;
   }
 
   &.status-box-expired {

app/assets/stylesheets/framework/layout.scss

@@ -76,28 +76,28 @@ body {
   /* Stripe the background colors so that adjacent alert-warnings are distinct from one another */
   .alert-warning {
     transition: background-color 0.15s, border-color 0.15s;
-    background-color: lighten($gl-warning, 4%);
-    border-color: lighten($gl-warning, 4%);
+    background-color: $orange-500;
+    border-color: $orange-500;
   }
 
   .alert-warning + .alert-warning {
-    background-color: $gl-warning;
-    border-color: $gl-warning;
+    background-color: $orange-600;
+    border-color: $orange-600;
   }
 
   .alert-warning + .alert-warning + .alert-warning {
-    background-color: darken($gl-warning, 4%);
-    border-color: darken($gl-warning, 4%);
+    background-color: $orange-700;
+    border-color: $orange-700;
   }
 
   .alert-warning + .alert-warning + .alert-warning + .alert-warning {
-    background-color: darken($gl-warning, 8%);
-    border-color: darken($gl-warning, 8%);
+    background-color: $orange-800;
+    border-color: $orange-800;
   }
 
   .alert-warning:only-of-type {
-    background-color: $gl-warning;
-    border-color: $gl-warning;
+    background-color: $orange-500;
+    border-color: $orange-500;
   }
 }
 

app/assets/stylesheets/framework/lists.scss

@@ -122,7 +122,7 @@ ul.content-list {
     }
 
     .member-group-link {
-      color: $blue-normal;
+      color: $blue-600;
     }
 
     .description {

app/assets/stylesheets/framework/tw_bootstrap_variables.scss

@@ -31,6 +31,7 @@ $border-radius-small: 3px !default;
 //
 $text-color: $gl-text-color;
 $link-color: $gl-link-color;
+$link-hover-color: $gl-link-hover-color;
 
 
 //== Typography
@@ -73,7 +74,7 @@ $pagination-hover-color: $gl-text-color;
 $pagination-hover-bg: $row-hover;
 $pagination-hover-border: $border-color;
 
-$pagination-active-color: $blue-dark;
+$pagination-active-color: $blue-600;
 $pagination-active-bg: $white-light;
 $pagination-active-border: $border-color;
 
@@ -135,8 +136,8 @@ $well-border: #eee;
 //
 //##
 
-$code-color: #c7254e;
-$code-bg: #f9f2f4;
+$code-color: $red-600;
+$code-bg: lighten($red-50, 2%);
 
 $kbd-color: $white-light;
 $kbd-bg: #333;

app/assets/stylesheets/pages/boards.scss

@@ -487,9 +487,9 @@
   right: -3px;
   top: -3px;
   width: 17px;
-  background-color: $blue-light;
+  background-color: $blue-500;
   color: $white-light;
-  border: 1px solid $border-blue-light;
+  border: 1px solid $blue-600;
   font-size: 9px;
   line-height: 15px;
   border-radius: 50%;

app/assets/stylesheets/pages/issuable.scss

@@ -520,12 +520,12 @@
 
     &.over_estimate {
       .meter-fill {
-        background: $red-light;
+        background: $red-500;
       }
 
       .time-remaining,
       .compare-value.spent {
-        color: $red-light;
+        color: $red-500;
       }
     }
   }

app/assets/stylesheets/pages/issues.scss

@@ -69,21 +69,17 @@ ul.related-merge-requests > li {
   height: 20px;
   border-radius: 3px;
   line-height: 18px;
-  border: 1px solid;
 
   &.merged {
-    border-color: darken($blue-normal, 10%);
-    background: $blue-normal;
+    background: $blue-500;
   }
 
   &.closed {
-    border-color: darken($red-normal, 10%);
-    background: $red-normal;
+    background: $red-500;
   }
 
   &.open {
-    border: 1px solid darken($green-normal, 10%);
-    background: $green-normal;
+    background: $green-500;
   }
 }
 

app/assets/stylesheets/pages/login.scss

@@ -85,11 +85,11 @@
       }
 
       .username .validation-success {
-        color: $green-normal;
+        color: $green-600;
       }
 
       .username .validation-error {
-        color: $red-normal;
+        color: $red-500;
       }
     }
   }

app/assets/stylesheets/pages/merge_conflicts.scss

@@ -255,7 +255,7 @@ $colors: (
 
     &.saved {
       .editor {
-        border-top: solid 2px $border-green-extra-light;
+        border-top: solid 2px $green-200;
       }
     }
 

app/assets/stylesheets/pages/merge_requests.scss

@@ -535,7 +535,7 @@
   }
 
   .fa-info-circle {
-    color: $orange-normal;
+    color: $orange-500;
     padding-right: 5px;
   }
 }

app/assets/stylesheets/pages/milestone.scss

@@ -63,7 +63,7 @@
   }
 
   .remaining-days {
-    color: $orange-light;
+    color: $orange-600;
   }
 
   .milestone-stats-and-buttons {

app/assets/stylesheets/pages/notes.scss

@@ -462,17 +462,18 @@ ul.notes {
   background: $white-light;
   padding: 1px 5px;
   font-size: 12px;
-  color: $gl-link-color;
+  color: $blue-500;
   margin-left: -55px;
   position: absolute;
   z-index: 10;
   width: 23px;
   height: 23px;
-  border: 1px solid $border-color;
+  border: 1px solid $blue-500;
   transition: transform .1s ease-in-out;
 
   &:hover {
-    background: $gl-info;
+    background: $blue-500;
+    border-color: $blue-600;
     color: $white-light;
     transform: scale(1.15);
   }

app/assets/stylesheets/pages/pipelines.scss

@@ -673,51 +673,71 @@
 
   // Dropdown button animation in mini pipeline graph
   &.ci-status-icon-success {
-    border-color: $gl-success;
-    color: $gl-success;
+    border-color: $green-500;
+    color: $green-500;
 
     &:hover,
     &:focus,
     &:active {
-      background-color: rgba($gl-success, 0.1);
-      border-color: $gl-success;
+      background-color: $green-50;
+      border-color: $green-600;
+      color: $green-600;
+
+      svg {
+        fill: $green-600;
+      }
     }
   }
 
   &.ci-status-icon-failed {
-    border-color: $gl-danger;
-    color: $gl-danger;
+    border-color: $red-500;
+    color: $red-500;
 
     &:hover,
     &:focus,
     &:active {
-      background-color: rgba($gl-danger, 0.1);
-      border-color: $gl-danger;
+      background-color: $red-50;
+      border-color: $red-600;
+      color: $red-600;
+
+      svg {
+        fill: $red-600;
+      }
     }
   }
 
   &.ci-status-icon-pending,
   &.ci-status-icon-success_with_warnings {
-    border-color: $gl-warning;
-    color: $gl-warning;
+    border-color: $orange-500;
+    color: $orange-500;
 
     &:hover,
     &:focus,
     &:active {
-      background-color: rgba($gl-warning, 0.1);
-      border-color: $gl-warning;
+      background-color: $orange-50;
+      border-color: $orange-600;
+      color: $orange-600;
+
+      svg {
+        fill: $orange-600;
+      }
     }
   }
 
   &.ci-status-icon-running {
-    border-color: $blue-normal;
-    color: $blue-normal;
+    border-color: $blue-400;
+    color: $blue-400;
 
     &:hover,
     &:focus,
     &:active {
-      background-color: rgba($blue-normal, 0.1);
-      border-color: $blue-normal;
+      background-color: $blue-50;
+      border-color: $blue-600;
+      color: $blue-600;
+
+      svg {
+        fill: $blue-600;
+      }
     }
   }
 

app/assets/stylesheets/pages/profile.scss

@@ -74,7 +74,6 @@
   display: inline;
 
   a {
-    color: $blue-dark;
     text-decoration: none;
   }
 }

app/assets/stylesheets/pages/sherlock.scss

@@ -28,6 +28,6 @@ table .sherlock-code {
 }
 
 .sherlock-line-samples-table .slow {
-  color: $red-light;
+  color: $red-500;
   font-weight: bold;
 }

app/assets/stylesheets/pages/status.scss

@@ -21,42 +21,41 @@
 
     &.ci-failed,
     &.ci-failed_with_warnings {
-      color: $gl-danger;
-      border-color: $gl-danger;
+      color: $red-500;
+      border-color: $red-500;
 
       &:not(span):hover {
-        background-color: rgba($gl-danger, .07);
+        background-color: $red-50;
+        color: $red-600;
+        border-color: $red-600;
+
+        svg {
+          fill: $red-600;
+        }
       }
 
       svg {
-        fill: $gl-danger;
+        fill: $red-500;
       }
     }
 
     &.ci-success,
     &.ci-success_with_warnings {
-      color: $gl-success;
-      border-color: $gl-success;
+      color: $green-600;
+      border-color: $green-500;
 
       &:not(span):hover {
-        background-color: rgba($gl-success, .07);
-      }
-
-      svg {
-        fill: $gl-success;
-      }
-    }
-
-    &.ci-info {
-      color: $gl-info;
-      border-color: $gl-info;
+        background-color: $green-50;
+        color: $green-700;
+        border-color: $green-600;
 
-      &:not(span):hover {
-        background-color: rgba($gl-info, .07);
+        svg {
+          fill: $green-600;
+        }
       }
 
       svg {
-        fill: $gl-info;
+        fill: $green-500;
       }
     }
 
@@ -75,28 +74,41 @@
     }
 
     &.ci-pending {
-      color: $gl-warning;
-      border-color: $gl-warning;
+      color: $orange-600;
+      border-color: $orange-500;
 
       &:not(span):hover {
-        background-color: rgba($gl-warning, .07);
+        background-color: $orange-50;
+        color: $orange-700;
+        border-color: $orange-600;
+
+        svg {
+          fill: $orange-600;
+        }
       }
 
       svg {
-        fill: $gl-warning;
+        fill: $orange-500;
       }
     }
 
+    &.ci-info,
     &.ci-running {
-      color: $blue-normal;
-      border-color: $blue-normal;
+      color: $blue-500;
+      border-color: $blue-500;
 
       &:not(span):hover {
-        background-color: rgba($blue-normal, .07);
+        background-color: $blue-50;
+        color: $blue-600;
+        border-color: $blue-600;
+
+        svg {
+          fill: $blue-600;
+        }
       }
 
       svg {
-        fill: $blue-normal;
+        fill: $blue-500;
       }
     }
 

changelogs/unreleased/28614-harmonious-color-palette.yml

+---
+title: Update color palette to a more harmonious and consistent one.
+merge_request: 10154
+author: