From b24a59435de97760cb6e119828119d8c64c55eda Mon Sep 17 00:00:00 2001
From: Chris Peressini <cperessini@gitlab.com>
Date: Mon, 7 Nov 2016 12:49:30 +0100
Subject: [PATCH 1/7] Create secondary colors for buttons with SCSS functions

Removed hardcoded values for `normal`, `dark` and `border` button colors and created them with the `darken` function from the `light` colors.
---
 app/assets/stylesheets/framework/buttons.scss |  4 +-
 .../stylesheets/framework/variables.scss      | 68 ++++++++++---------
 2 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index e6656c2d69a2..f5b98af3f318 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -83,11 +83,11 @@
 }
 
 @mixin btn-gray {
-  @include btn-color($gray-light, $border-gray-light, $gray-normal, $border-gray-light, $gray-dark, $border-gray-dark, $gl-gray-dark);
+  @include btn-color($gray-light, $border-gray-light, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, $gl-gray-dark);
 }
 
 @mixin btn-white {
-  @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-white-dark, $btn-white-active);
+  @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-white-dark, $gl-text-color);
 }
 
 @mixin btn-with-margin {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 7690d65de8e8..3cc3d28e1ca5 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -12,66 +12,70 @@ $sidebar-breakpoint: 1024px;
 /*
  * Color schema
  */
+$darken-normal-factor: 5%;
+$darken-dark-factor: 10%;
+$darken-border-factor: 4%;
+
 $white-light: #fff;
-$white-normal: #ededed;
-$white-dark: #ececec;
+$white-normal: darken($white-light, $darken-normal-factor);
+$white-dark: darken($white-light, $darken-dark-factor);
 
 $gray-light: #fafafa;
 $gray-lighter: #f9f9f9;
-$gray-normal: #f5f5f5;
-$gray-dark: #ededed;
+$gray-normal: darken($gray-light, $darken-normal-factor);
+$gray-dark: darken($gray-light, $darken-dark-factor);
 $gray-darker: #eee;
 $gray-darkest: #c9c9c9;
 
 $green-light: #38ae67;
-$green-normal: #2faa60;
-$green-dark: #2ca05b;
+$green-normal: darken($green-light, $darken-normal-factor);
+$green-dark: darken($green-light, $darken-dark-factor);
 
 $blue-light: #2ea8e5;
-$blue-normal: #2d9fd8;
-$blue-dark: #2897ce;
+$blue-normal: darken($blue-light, $darken-normal-factor);
+$blue-dark: darken($blue-light, $darken-dark-factor);
 
 $blue-medium-light: #3498cb;
-$blue-medium: #2f8ebf;
-$blue-medium-dark: #2d86b4;
+$blue-medium: darken($blue-medium-light, $darken-normal-factor);
+$blue-medium-dark: darken($blue-medium-light, $darken-dark-factor);
 
 $blue-light-transparent: rgba(44, 159, 216, 0.05);
 
 $orange-light: #fc8a51;
-$orange-normal: #e75e40;
-$orange-dark: #ce5237;
+$orange-normal: darken($orange-light, $darken-normal-factor);
+$orange-dark: darken($orange-light, $darken-dark-factor);
 
 $red-light: #e52c5a;
-$red-normal: #d22852;
-$red-dark: darken($red-normal, 5%);
+$red-normal: darken($red-light, $darken-normal-factor);
+$red-dark: darken($red-light, $darken-dark-factor);
 
 $black: #000;
 $black-transparent: rgba(0, 0, 0, 0.3);
 
-$border-white-light: #f1f2f4;
-$border-white-normal: #d6dae2;
-$border-white-dark: #c6cacf;
+$border-white-light: darken($white-light, $darken-border-factor);
+$border-white-normal: darken($white-normal, $darken-border-factor);
+$border-white-dark: darken($white-dark, $darken-border-factor);
 
-$border-gray-light: #dcdcdc;
-$border-gray-normal: #d7d7d7;
-$border-gray-dark: #c6cacf;
+$border-gray-light: darken($gray-light, $darken-border-factor);
+$border-gray-normal: darken($gray-normal, $darken-border-factor);
+$border-gray-dark: darken($gray-dark, $darken-border-factor);
 
 $border-green-extra-light: #9adb84;
-$border-green-light: #2faa60;
-$border-green-normal: #2ca05b;
-$border-green-dark: #279654;
+$border-green-light: darken($green-light, $darken-border-factor);
+$border-green-normal: darken($green-normal, $darken-border-factor);
+$border-green-dark: darken($green-dark, $darken-border-factor);
 
-$border-blue-light: #2d9fd8;
-$border-blue-normal: #2897ce;
-$border-blue-dark: #258dc1;
+$border-blue-light: darken($blue-light, $darken-border-factor);
+$border-blue-normal: darken($blue-normal, $darken-border-factor);
+$border-blue-dark: darken($blue-dark, $darken-border-factor);
 
-$border-orange-light: #fc6d26;
-$border-orange-normal: #ce5237;
-$border-orange-dark: #c14e35;
+$border-orange-light: darken($orange-light, $darken-border-factor);
+$border-orange-normal: darken($orange-normal, $darken-border-factor);
+$border-orange-dark: darken($orange-dark, $darken-border-factor);
 
-$border-red-light: #d22852;
-$border-red-normal: #ca264f;
-$border-red-dark: darken($border-red-normal, 5%);
+$border-red-light: darken($red-light, $darken-border-factor);
+$border-red-normal: darken($red-normal, $darken-border-factor);
+$border-red-dark: darken($red-dark, $darken-border-factor);
 
 $help-well-bg: $gray-light;
 $help-well-border: #e5e5e5;
-- 
GitLab


From 92a26dfde70b9b3a791be1da08bef16be6a9ac3c Mon Sep 17 00:00:00 2001
From: Chris Peressini <cperessini@gitlab.com>
Date: Mon, 7 Nov 2016 17:14:48 +0100
Subject: [PATCH 2/7] Modified darkening values

---
 app/assets/stylesheets/framework/variables.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 3cc3d28e1ca5..d1231eccb3f6 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -12,9 +12,9 @@ $sidebar-breakpoint: 1024px;
 /*
  * Color schema
  */
-$darken-normal-factor: 5%;
+$darken-normal-factor: 7%;
 $darken-dark-factor: 10%;
-$darken-border-factor: 4%;
+$darken-border-factor: 5%;
 
 $white-light: #fff;
 $white-normal: darken($white-light, $darken-normal-factor);
-- 
GitLab


From 4e69c2153b70ab2b9846ec843c32fb8a54487aa2 Mon Sep 17 00:00:00 2001
From: Chris Peressini <cperessini@gitlab.com>
Date: Mon, 7 Nov 2016 12:49:30 +0100
Subject: [PATCH 3/7] Create secondary colors for buttons with SCSS functions

Removed hardcoded values for `normal`, `dark` and `border` button colors and created them with the `darken` function from the `light` colors.
---
 app/assets/stylesheets/framework/buttons.scss |  4 +-
 .../stylesheets/framework/variables.scss      | 68 ++++++++++---------
 2 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 9acff45de75d..fd3c0c76bb79 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -82,11 +82,11 @@
 }
 
 @mixin btn-gray {
-  @include btn-color($gray-light, $border-gray-light, $gray-normal, $border-gray-light, $gray-dark, $border-gray-dark, $gl-gray-dark);
+  @include btn-color($gray-light, $border-gray-light, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, $gl-gray-dark);
 }
 
 @mixin btn-white {
-  @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-white-dark, $btn-white-active);
+  @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-white-dark, $gl-text-color);
 }
 
 @mixin btn-with-margin {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 8bf5edfde505..7d08a6a2d6bd 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -12,67 +12,71 @@ $sidebar-breakpoint: 1024px;
 /*
  * Color schema
  */
+$darken-normal-factor: 5%;
+$darken-dark-factor: 10%;
+$darken-border-factor: 4%;
+
 $white-light: #fff;
-$white-normal: #ededed;
-$white-dark: #ececec;
+$white-normal: darken($white-light, $darken-normal-factor);
+$white-dark: darken($white-light, $darken-dark-factor);
 
 $gray-lightest: #fdfdfd;
 $gray-light: #fafafa;
 $gray-lighter: #f9f9f9;
-$gray-normal: #f5f5f5;
-$gray-dark: #ededed;
+$gray-normal: darken($gray-light, $darken-normal-factor);
+$gray-dark: darken($gray-light, $darken-dark-factor);
 $gray-darker: #eee;
 $gray-darkest: #c9c9c9;
 
 $green-light: #38ae67;
-$green-normal: #2faa60;
-$green-dark: #2ca05b;
+$green-normal: darken($green-light, $darken-normal-factor);
+$green-dark: darken($green-light, $darken-dark-factor);
 
 $blue-light: #2ea8e5;
-$blue-normal: #2d9fd8;
-$blue-dark: #2897ce;
+$blue-normal: darken($blue-light, $darken-normal-factor);
+$blue-dark: darken($blue-light, $darken-dark-factor);
 
 $blue-medium-light: #3498cb;
-$blue-medium: #2f8ebf;
-$blue-medium-dark: #2d86b4;
+$blue-medium: darken($blue-medium-light, $darken-normal-factor);
+$blue-medium-dark: darken($blue-medium-light, $darken-dark-factor);
 
 $blue-light-transparent: rgba(44, 159, 216, 0.05);
 
 $orange-light: #fc8a51;
-$orange-normal: #e75e40;
-$orange-dark: #ce5237;
+$orange-normal: darken($orange-light, $darken-normal-factor);
+$orange-dark: darken($orange-light, $darken-dark-factor);
 
 $red-light: #e52c5a;
-$red-normal: #d22852;
-$red-dark: darken($red-normal, 5%);
+$red-normal: darken($red-light, $darken-normal-factor);
+$red-dark: darken($red-light, $darken-dark-factor);
 
 $black: #000;
 $black-transparent: rgba(0, 0, 0, 0.3);
 
-$border-white-light: #f1f2f4;
-$border-white-normal: #d6dae2;
-$border-white-dark: #c6cacf;
+$border-white-light: darken($white-light, $darken-border-factor);
+$border-white-normal: darken($white-normal, $darken-border-factor);
+$border-white-dark: darken($white-dark, $darken-border-factor);
 
-$border-gray-light: #dcdcdc;
-$border-gray-normal: #d7d7d7;
-$border-gray-dark: #c6cacf;
+$border-gray-light: darken($gray-light, $darken-border-factor);
+$border-gray-normal: darken($gray-normal, $darken-border-factor);
+$border-gray-dark: darken($gray-dark, $darken-border-factor);
 
 $border-green-extra-light: #9adb84;
-$border-green-light: #2faa60;
-$border-green-normal: #2ca05b;
-$border-green-dark: #279654;
+$border-green-light: darken($green-light, $darken-border-factor);
+$border-green-normal: darken($green-normal, $darken-border-factor);
+$border-green-dark: darken($green-dark, $darken-border-factor);
 
-$border-blue-light: #2d9fd8;
-$border-blue-normal: #2897ce;
-$border-blue-dark: #258dc1;
+$border-blue-light: darken($blue-light, $darken-border-factor);
+$border-blue-normal: darken($blue-normal, $darken-border-factor);
+$border-blue-dark: darken($blue-dark, $darken-border-factor);
 
-$border-orange-light: #fc6d26;
-$border-orange-normal: #ce5237;
-$border-orange-dark: #c14e35;
+$border-orange-light: darken($orange-light, $darken-border-factor);
+$border-orange-normal: darken($orange-normal, $darken-border-factor);
+$border-orange-dark: darken($orange-dark, $darken-border-factor);
 
-$border-red-light: #d22852;
-$border-red-normal: #ca264f;
-$border-red-dark: darken($border-red-normal, 5%);
+$border-red-light: darken($red-light, $darken-border-factor);
+$border-red-normal: darken($red-normal, $darken-border-factor);
+$border-red-dark: darken($red-dark, $darken-border-factor);
 
 $help-well-bg: $gray-light;
 $help-well-border: #e5e5e5;
-- 
GitLab


From 533439b27207669e7d16c6f2f6318c518af1aca1 Mon Sep 17 00:00:00 2001
From: Chris Peressini <cperessini@gitlab.com>
Date: Mon, 7 Nov 2016 17:14:48 +0100
Subject: [PATCH 4/7] Modified darkening values

---
 app/assets/stylesheets/framework/variables.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 7d08a6a2d6bd..7ec16e4d001c 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -12,9 +12,9 @@ $sidebar-breakpoint: 1024px;
 /*
  * Color schema
  */
-$darken-normal-factor: 5%;
+$darken-normal-factor: 7%;
 $darken-dark-factor: 10%;
-$darken-border-factor: 4%;
+$darken-border-factor: 5%;
 
 $white-light: #fff;
 $white-normal: darken($white-light, $darken-normal-factor);
-- 
GitLab


From 265fa7f0bfcbb77e4a5c0189f85b8aea8d84080c Mon Sep 17 00:00:00 2001
From: Chris Peressini <cperessini@gitlab.com>
Date: Fri, 18 Nov 2016 12:30:26 +0000
Subject: [PATCH 5/7] Change value of base color $green-light

---
 app/assets/stylesheets/framework/variables.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 7ec16e4d001c..15d7ffb72d40 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -28,7 +28,7 @@ $gray-dark: darken($gray-light, $darken-dark-factor);
 $gray-darker: #eee;
 $gray-darkest: #c9c9c9;
 
-$green-light: #38ae67;
+$green-light: #3cbd70;
 $green-normal: darken($green-light, $darken-normal-factor);
 $green-dark: darken($green-light, $darken-dark-factor);
 
-- 
GitLab


From 92d972c666ed02105c52e6e5310a29dd56767ecd Mon Sep 17 00:00:00 2001
From: Chris Peressini <cperessini@gitlab.com>
Date: Fri, 18 Nov 2016 12:31:42 +0000
Subject: [PATCH 6/7] Change color of scope token in global search field

Now that $gray-normal is darker, the token that says "This
project" in the global search field looked too dark. Reverted
it to the original color.
---
 app/assets/stylesheets/framework/variables.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 15d7ffb72d40..fcff0ec061c1 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -258,7 +258,7 @@ $search-input-border-color: rgba(#4688f1, .8);
 $search-input-focus-shadow-color: $dropdown-input-focus-shadow;
 $search-input-width: 220px;
 $location-badge-color: #aaa;
-$location-badge-bg: $gray-normal;
+$location-badge-bg: $dark-background-color;
 $location-badge-active-bg: #4f91f8;
 $location-icon-color: #e7e9ed;
 $location-icon-active-color: #807e7e;
-- 
GitLab


From 3d118229d74a4f27eb6ee10585afc453fae37e9d Mon Sep 17 00:00:00 2001
From: Chris Peressini <cperessini@gitlab.com>
Date: Fri, 18 Nov 2016 12:49:40 +0000
Subject: [PATCH 7/7] Add active state for outline buttons and update color use

The active state for outline buttons now darkens their background
and border instead of just adding a shadow. Outline buttons now
use a different color for their background and border when they
are in hover, focus or active state. The resting state for outline
buttons now uses the $border-colorname-light colors instead of
$colorname-normal.
---
 app/assets/stylesheets/framework/buttons.scss | 22 ++++++++++++++-----
 app/assets/stylesheets/pages/builds.scss      |  2 +-
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index fd3c0c76bb79..220eb8d0388c 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -15,7 +15,7 @@
   @include btn-default;
 }
 
-@mixin btn-outline($background, $text, $border, $hover-background, $hover-text, $hover-border) {
+@mixin btn-outline($background, $text, $border, $hover-background, $hover-text, $hover-border, $active-background, $active-border) {
   background-color: $background;
   color: $text;
   border-color: $border;
@@ -23,8 +23,14 @@
   &:hover,
   &:focus {
     background-color: $hover-background;
-    color: $hover-text;
     border-color: $hover-border;
+    color: $hover-text;
+  }
+
+  &:active {
+    background-color: $active-background;
+    border-color: $active-border;
+    color: $hover-text;
   }
 }
 
@@ -139,11 +145,11 @@
     &.btn-new,
     &.btn-create,
     &.btn-save {
-      @include btn-outline($white-light, $green-normal, $green-normal, $green-light, $white-light, $green-light);
+      @include btn-outline($white-light, $border-green-light, $border-green-light, $green-light, $white-light, $border-green-light, $green-normal, $border-green-normal);
     }
 
     &.btn-remove {
-      @include btn-outline($white-light, $red-normal, $red-normal, $red-light, $white-light, $red-light);
+      @include btn-outline($white-light, $border-red-light, $border-red-light, $red-light, $white-light, $border-red-light, $red-normal, $border-red-normal);
     }
   }
 
@@ -165,11 +171,15 @@
   }
 
   &.btn-close {
-    @include btn-outline($white-light, $orange-normal, $orange-normal, $orange-light, $white-light, $orange-light);
+    @include btn-outline($white-light, $border-orange-light, $border-orange-light, $orange-light, $white-light, $border-orange-light, $orange-normal, $border-orange-normal);
   }
 
   &.btn-spam {
-    @include btn-outline($white-light, $red-normal, $red-normal, $red-light, $white-light, $red-light);
+    @include btn-outline($white-light, $border-red-light, $border-red-light, $red-light, $white-light, $border-red-light, $red-normal, $border-red-normal);
+  }
+
+  &.btn-blue-inverted {
+    @include btn-outline($white-light, $border-blue-light, $border-blue-light, $blue-light, $white-light, $border-blue-light, $blue-normal, $border-blue-normal);
   }
 
   &.btn-danger,
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index f1d311cabbe5..36a1ee7a589d 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -50,7 +50,7 @@
   align-items: center;
 
   .btn-inverted {
-    @include btn-outline($white-light, $blue-normal, $blue-normal, $blue-light, $white-light, $blue-light);
+    @include btn-outline($white-light, $border-blue-light, $border-blue-light, $blue-light, $white-light, $border-blue-light, $blue-normal, $border-blue-normal);
   }
 
   @media (max-width: $screen-sm-max) {
-- 
GitLab