Color variables

css/.primer-stats.md

@@ -7,7 +7,7 @@
 ### css/primer.css
 
 - **Total Stylesheets:** 1
-- **Total Stylesheet Size:** 27568
+- **Total Stylesheet Size:** 27574
 - **Total Media Queries:** 1
 - **Total Rules:** 360
 - **Selectors Per Rule:** 1.4861111111111112
@@ -19,5 +19,5 @@
 - **Total Id Selectors:** 0
 - **Total Identifiers:** 1139
 - **Total Declarations:** 904
-- **Total Unique Colors:** 79
+- **Total Unique Colors:** 80
 - **Total Important Keywords:** 1

scss/_alerts.scss

@@ -8,20 +8,20 @@
   position: relative;
   font-size: 14px;
   line-height: 1.6;
-  color: #246;
-  background-color: #e2eef9;
-  border: solid 1px #bac6d3;
+  color: desaturate(darken($alert-default, 23%), 2%);
+  background-color: saturate(lighten($alert-default, 43%), 38%);
+  border: solid 1px adjust_hue(desaturate(lighten($alert-default, 28%), 21%), 2%);
 
   &.flash-warn {
-    color: #4c4a42;
-    background-color: #fff9ea;
-    border-color: #dfd8c2;
+    color: adjust_hue(desaturate(darken($alert-warn, 43%), 85%), 14%);
+    background-color: lighten($alert-warn, 26%);
+    border-color: desaturate(lighten($alert-warn, 14%), 78%);
   }
 
   &.flash-error {
-    color: #911;
-    background-color: #fcdede;
-    border-color: #d2b2b2;
+    color: $alert-error;
+    background-color: saturate(lighten($alert-error, 59%), 7%);
+    border-color: adjust_hue(desaturate(lighten($alert-error, 41%), 50%), 9%);
   }
 
   .flash-close {

scss/_buttons.scss

@@ -128,32 +128,32 @@
 
 // Red danger button
 .btn-danger {
-  color: #900;
+  color: $brand-red;
 
   &:hover {
     color: #fff;
-    background-color: #b33630;
-    background-image: linear-gradient(#dc5f59, #b33630);
-    border-color: #cd504a;
+    background-color: $brand-red;
+    background-image: linear-gradient(lighten($brand-red, 2%), darken($brand-red, 2%));
+    border-color: darken($brand-red, 4%);
   }
 
   &:active,
   &.selected {
     color: #fff;
-    background-color: #b33630;
+    background-color: darken($brand-red, 4%);
     background-image: none;
-    border-color: darken(#cd504a, 15%);
+    border-color: darken($brand-red, 6%);
   }
 
   &.selected:hover {
-    background-color: darken(#b33630, 5%);
+    background-color: darken($brand-red, 7%);
   }
 
   &:disabled,
   &.disabled {
     &,
     &:hover {
-      color: #cb7f7f;
+      color: tint($brand-red, 40%);
       background-color: #efefef;
       background-image: linear-gradient(#fefefe, #efefef);
       border-color: #e1e1e1;
@@ -164,7 +164,7 @@
   &:active,
   &.selected {
     .counter {
-      color: #b33630;
+      color: $brand-red;
       background-color: #fff;
     }
   }

scss/_mixins.scss

@@ -51,3 +51,13 @@
   text-decoration: none;
   -webkit-font-smoothing: antialiased;
 }
+
+// Add percentage of white to a color
+@function tint($color, $percent) {
+  @return mix(#fff, $color, $percent);
+}
+
+// Add percentage of black to a color
+@function shade($color, $percent) {
+  @return mix(#000, $color, $percent);
+}

scss/_variables.scss

@@ -20,7 +20,7 @@ $body-font-size: 13px !default;
 // Monospace font stack
 $mono-font: Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
 
-// State indicators.
+// State indicators
 $status-open:     $brand-green;
 $status-closed:   $brand-red;
 $status-reverted: $status-closed;
@@ -32,3 +32,8 @@ $status-pending:  #cea61b;
 $repo-private-text: #a1882b;
 $repo-private-bg:   #fff9ea;
 $repo-private-icon: #e9dba5;
+
+// Alert colors
+$alert-default: $brand-blue;
+$alert-warn:    #ffd062;
+$alert-error:   #911;