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 @@ + + + + + -

Colors

- +
+ + + + + + +
+ + +
+ + +
+
+ + +
+ 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