ux(): began long on tiresome work on color refactors, polished button styles, added buttons to styleguide

public/app/features/styleguide/styleguide.html

@@ -15,13 +15,35 @@
 		</a>
 	</div>
 
+	<tabset>
+		<tab heading="Colors">
+			<ul>
+				<li class="style-guide-color-card" ng-repeat="color in ctrl.colors" style="background-color: {{color.value}}">
+					<strong>${{color.name}}</strong>
+					<em>{{color.value}}</em>
+				</li>
+			</ul>
+		</tab>
+		<tab heading="Buttons">
 
-	<h3 class="page-heading">Colors</h3>
-	<ul>
-		<li class="style-guide-color-card" ng-repeat="color in ctrl.colors" style="background-color: {{color.value}}">
-			<strong>${{color.name}}</strong>
-			<em>{{color.value}}</strong>
-		</li>
-	</ul>
+			<div class="style-guide-button-list p-a-2">
+				<button class="btn btn-primary">btn-primary</button>
+				<button class="btn btn-info">btn-info</button>
+				<button class="btn btn-inverse">btn-inverse</button>
+				<button class="btn btn-success">btn-success</button>
+				<button class="btn btn-warning">btn-warning</button>
+				<button class="btn btn-danger">btn-danger</button>
+			</div>
+
+
+			<div class="style-guide-button-list p-a-2">
+				<button class="btn btn-primary btn-small">btn-small</button>
+				<button class="btn btn-success btn-large">btn-large</button>
+			</div>
+		</tab>
+		<tab heading="Forms">
+		</tab>
+	</tabset>
 
 </div>
+

public/app/partials/login.html

@@ -33,7 +33,7 @@
 				</div>
 
 				<div class="gf-form-button-row">
-					<button type="submit" class="btn btn-large" ng-click="submit();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-primary': loginForm.$valid}">
+					<button type="submit" class="btn btn-large p-x-3" ng-click="submit();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-primary': loginForm.$valid}">
 						{{submitBtnText}}
 					</button>
 				</div>

public/sass/_variables.dark.scss

@@ -20,14 +20,14 @@ $blue-dark:             #005f81;
 $green:                 #669900;
 $red:                   #CC3900;
 $yellow:                #ECBB13;
-$orange:                #FF8800;
 $pink:                  #FF4444;
 $purple:                #9933CC;
 $variable:              #32D1DF;
+$orange:                #FF8800;
 
-$brand-primary:         $blue-dark;
+$brand-primary:         $orange;
 $brand-success:         $green;
-$brand-warning:         $orange;
+$brand-warning:         $brand-primary;
 $brand-danger:          $red;
 
 // Status colors
@@ -103,21 +103,18 @@ $table-border:                $gray-dark; // table and cell border
 
 // Buttons
 // -------------------------
-$btnBackground:                     $gray-dark;
-$btnBackgroundHighlight:            darken($gray-light, 15%);
-$btnBorder:                         #bbb;
 
-$btnPrimaryBackground:              $blue-dark;
-$btnPrimaryBackgroundHighlight:     lighten($blue-dark, 5%);
+$btn-primary-bg:              $brand-primary;
+$btn-primary-bg-hl:           lighten($brand-primary, 8%);
 
 $btnInfoBackground:                 lighten($purple, 3%);
 $btnInfoBackgroundHighlight:        darken($purple, 3%);
 
-$btnSuccessBackground:              lighten($green, 3%);
 $btnSuccessBackgroundHighlight:     darken($green, 3%);
+$btnSuccessBackground:              lighten($green, 3%);
 
-$btnWarningBackground:              lighten($orange, 3%);
-$btnWarningBackgroundHighlight:     darken($orange, 3%);
+$btnWarningBackground:              $brand-warning;
+$btnWarningBackgroundHighlight:     lighten($brand-warning, 8%);
 
 $btnDangerBackground:               lighten($red, 3%);
 $btnDangerBackgroundHighlight:      darken($red, 3%);
@@ -216,8 +213,8 @@ $paginationActiveBackground:          $blue;
 
 // Form states and alerts
 // -------------------------
-$state-warning-text:             darken(#c09853, 10%);
-$state-warning-bg:       $orange;
+$state-warning-text:      darken(#c09853, 10%);
+$state-warning-bg:        $brand-warning;
 
 $errorText:               #b94a48;
 $errorBackground:         $btnDangerBackground;

public/sass/_variables.light.scss

@@ -23,7 +23,7 @@ $white:                 #fff;
 // Accent colors
 // -------------------------
 $blue:             	   	#2AB2E4;
-$blue-dark:              #75CAEB;
+$blue-dark:             #75CAEB;
 $green:                 #28B62C;
 $red:                   #FF4136;
 $yellow:                #FF851B;
@@ -32,7 +32,7 @@ $pink:                  #E671B8;
 $purple:                #9954BB;
 $variable:              #2AB2E4;
 
-$brand-primary:         $blue-dark;
+$brand-primary:         $orange;
 $brand-success:         $green;
 $brand-warning:         $orange;
 $brand-danger:          $red;
@@ -124,8 +124,8 @@ $btnBackground:                     $gray-lighter;
 $btnBackgroundHighlight:            darken($gray-lighter, 15%);
 $btnBorder:                         #bbb;
 
-$btnPrimaryBackground:              lighten($blue, 3%);
-$btnPrimaryBackgroundHighlight:     darken($blue, 3%);
+$btn-primary-bg:                    $brand-primary;
+$btn-primary-bg-hl:                 lighten($brand-primary, 10%);
 
 $btnInfoBackground:                 lighten($purple, 3%);
 $btnInfoBackgroundHighlight:        darken($purple, 3%);

public/sass/_variables.scss

@@ -218,7 +218,7 @@ $btn-padding-y-sm:               .25rem !default;
 $btn-padding-x-lg:               1.5rem !default;
 $btn-padding-y-lg:               .75rem !default;
 
-$btn-border-radius:              1px;
+$btn-border-radius:              3px;
 
 // sidemenu
 $side-menu-width:  15rem;

public/sass/components/_buttons.scss

@@ -67,7 +67,7 @@
 // Set the backgrounds
 // -------------------------
 .btn-primary {
-  @include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight);
+  @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl);
 }
 // Warning appears are orange
 .btn-warning {
@@ -93,7 +93,7 @@
 }
 
 .btn-outline-primary {
-  @include button-outline-variant($btnPrimaryBackground);
+  @include button-outline-variant($btn-primary-bg);
 }
 .btn-outline-secondary {
   @include button-outline-variant($btnInverseBackground);

public/sass/components/_tags.scss

@@ -38,23 +38,3 @@
 }
 
 
-// Colors
-// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
-.label,
-.badge {
-  // Important (red)
-  &-important         { background-color: $errorText; }
-  &-important[href]   { background-color: darken($errorText, 10%); }
-  // Warnings (orange)
-  &-warning           { background-color: $orange; }
-  &-warning[href]     { background-color: darken($orange, 10%); }
-  // Success (green)
-  &-success           { background-color: $successText; }
-  &-success[href]     { background-color: darken($successText, 10%); }
-  // Info (turquoise)
-  &-info              { background-color: $infoText; }
-  &-info[href]        { background-color: darken($infoText, 10%); }
-  // Inverse (black)
-  &-inverse           { background-color: $gray-dark; }
-  &-inverse[href]     { background-color: darken($gray-dark, 10%); }
-}

public/sass/mixins/_buttons.scss

@@ -9,7 +9,7 @@
   &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
     color: $text-color;
     background-image: none;
-    background-color: darken($endColor, 2%);
+    background-color: $startColor;
   }
 }
 
@@ -18,7 +18,7 @@
 @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
   padding: $padding-y $padding-x;
   font-size: $font-size;
-  box-shadow: inset 0 (-$padding-y/2) rgba(0,0,0,0.2);
+  //box-shadow: inset 0 (-$padding-y/3) rgba(0,0,0,0.15);
 
   @include border-radius($border-radius);
 }

public/sass/pages/_styleguide.scss

@@ -14,6 +14,13 @@
 .color-card-page-bg { background-color: $page-bg; }
 .color-card-gray { background-color: $gray; }
 
+.style-guide-button-list {
+  padding: $spacer;
+  button {
+    margin: 0 $spacer $spacer 0;
+  }
+}
+
 // define("areas/styleguide/static/script/app/colors", [], function() {
 //    "use strict";
 //    var a = function(a) {

public/sass/utils/_utils.scss

@@ -3,7 +3,7 @@
 }
 
 .highlight-word {
-  color: $orange;
+  color: $brand-primary;
 }
 
 // Close icons