diff --git a/public/app/features/styleguide/styleguide.html b/public/app/features/styleguide/styleguide.html
index 8e78264e934..9a0aaa313dc 100644
--- a/public/app/features/styleguide/styleguide.html
+++ b/public/app/features/styleguide/styleguide.html
@@ -15,13 +15,35 @@
+
+
+
+ -
+ ${{color.name}}
+ {{color.value}}
+
+
+
+
- Colors
-
- -
- ${{color.name}}
- {{color.value}}
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/app/partials/login.html b/public/app/partials/login.html
index 3880f2c1989..6f437a02824 100644
--- a/public/app/partials/login.html
+++ b/public/app/partials/login.html
@@ -33,7 +33,7 @@
-
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index ea2f604a687..b9d7cb21178 100644
--- a/public/sass/_variables.dark.scss
+++ b/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;
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index ec1dc230277..32fd60ed06f 100644
--- a/public/sass/_variables.light.scss
+++ b/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%);
diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss
index 4825b204472..b5324a19944 100644
--- a/public/sass/_variables.scss
+++ b/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;
diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss
index 8fc6e18fbbf..5a03350aeaa 100644
--- a/public/sass/components/_buttons.scss
+++ b/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);
diff --git a/public/sass/components/_tags.scss b/public/sass/components/_tags.scss
index 7932a20a6bb..1fc1ef08575 100644
--- a/public/sass/components/_tags.scss
+++ b/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%); }
-}
diff --git a/public/sass/mixins/_buttons.scss b/public/sass/mixins/_buttons.scss
index 15070fe6ef8..f77adc859c3 100644
--- a/public/sass/mixins/_buttons.scss
+++ b/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);
}
diff --git a/public/sass/pages/_styleguide.scss b/public/sass/pages/_styleguide.scss
index 06680886e9d..c4326ac0e0c 100644
--- a/public/sass/pages/_styleguide.scss
+++ b/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) {
diff --git a/public/sass/utils/_utils.scss b/public/sass/utils/_utils.scss
index 70c39ecbb34..cc4989f57e5 100644
--- a/public/sass/utils/_utils.scss
+++ b/public/sass/utils/_utils.scss
@@ -3,7 +3,7 @@
}
.highlight-word {
- color: $orange;
+ color: $brand-primary;
}
// Close icons