Skip to content

N
nexpie-grafana-theme
Commit 4a062b6d by Torkel Ödegaard
Options

ux(): colors refactoring

parent 6590e6fa
Showing with 72 additions and 80 deletions
public/app/features/datasources/partials/edit.html
......@@ -44,7 +44,7 @@
<button type="submit" class="btn btn-primary" ng-show="!isNew" ng-click="saveChanges(true)">
Test Connection
</button>
<a class="btn-text" href="datasources">Cancel</a>
<a class="btn btn-link" href="datasources">Cancel</a>
</div>
</form>
</div>
public/sass/_variables.dark.scss
......@@ -117,26 +117,25 @@ $table-border: $dark-3; // table and cell border
$btn-primary-bg: $brand-primary;
$btn-primary-bg-hl: lighten($brand-primary, 8%);
$btnInfoBackground: lighten($purple, 3%);
$btnInfoBackgroundHighlight: darken($purple, 3%);
$btn-info-bg: lighten($purple, 3%);
$btn-info-bg-hl: darken($purple, 3%);
$btnSuccessBackgroundHighlight: darken($green, 3%);
$btnSuccessBackground: lighten($green, 3%);
$btn-success-bg-hl: darken($green, 3%);
$btn-success-bg: lighten($green, 3%);
$btnWarningBackground: $brand-warning;
$btnWarningBackgroundHighlight: lighten($brand-warning, 8%);
$btn-warning-bg: $brand-warning;
$btn-warning-bg-hl: lighten($brand-warning, 8%);
$btnDangerBackground: lighten($red, 3%);
$btnDangerBackgroundHighlight: darken($red, 3%);
$btn-danger-bg: lighten($red, 3%);
$btn-danger-bg-hl: darken($red, 3%);
$btnInverseBackground: $dark-3;
$btnInverseBackgroundHighlight: lighten($dark-3, 1%);
$btnInverseText: $link-color;
$btnInverseBorder: #333;
$btn-inverse-bg: $dark-3;
$btn-inverse-bg-hl: lighten($dark-3, 1%);
$btn-inverse-text-color: $link-color;
$btnText: $gray-3;
$btn-link-color: $gray-3;
$iconContainerBackground: $black;
$iconContainerBackground: $black;
// Forms
// -------------------------
......@@ -151,7 +150,6 @@ $input-box-shadow-focus: rgba(102,175,233,.6) !default;
$input-color-placeholder: #999 !default;
$input-label-bg: $dark-3;
// Search
$searchShadow: 0 0 35px 0 $body-bg;
......@@ -222,13 +220,13 @@ $state-warning-text: darken(#c09853, 10%);
$state-warning-bg: $brand-warning;
$errorText: #b94a48;
$errorBackground: $btnDangerBackground;
$errorBackground: $btn-danger-bg;
$successText: #468847;
$successBackground: $btnSuccessBackground;
$successBackground: $btn-success-bg;
$infoText: $blue-dark;
$infoBackground: $btnInfoBackground;
$infoBackground: $btn-info-bg;
// Tooltips and popovers
// -------------------------
......
public/sass/_variables.light.scss
......@@ -62,22 +62,22 @@ $text-color: $gray-1;
// Links
// -------------------------
$link-color: $gray-1;
$link-color-disabled: lighten($link-color,30%);
$link-color-disabled: lighten($link-color, 30%);
$link-hover-color: darken($link-color, 20%);
// Typography
// -------------------------
$headings-color: $text-color;
$headings-color: $text-color;
$abbr-border-color: $gray-2 !default;
$text-muted: darken($link-color,30%);
$text-muted: darken($link-color,30%);
$blockquote-small-color: $gray-2 !default;
$blockquote-border-color: $gray-3 !default;
$hr-border-color: rgba(0,0,0,.1) !default;
$hr-border-color: $dark-3 !default;
// Components
$component-active-color: #fff !default;
$component-active-color: $white !default;
$component-active-bg: $brand-primary !default;
// Panel
......@@ -96,58 +96,52 @@ $tight-form-func-bg: $gray-5;
$tight-form-func-highlight-bg: $gray-6;
$modal-background: $body-bg;
$code-tag-bg: #ddd;
$code-tag-bg: $dark-5;
// Lists
$grafanaListBackground: darken($gray-3,5%);
$grafanaListAccent: darken($gray-3,8%);
$grafanaListBorderTop: #eee;
$grafanaListBorderBottom: #eee;
$grafanaListHighlight: darken($gray-3,10%);
$grafanaListHighlightContrast: #ddd;
$grafanaListBackground: $gray-6;
$grafanaListAccent: $gray-5;
$grafanaListBorderTop: $gray-3;
$grafanaListBorderBottom: $gray-3;
$grafanaListHighlight: $gray-5;
$grafanaListMainLinkColor: $text-color;
// Tables
// -------------------------
$table-bg: transparent; // overall background-color
$table-bg-accent: #f9f9f9; // for striping
$table-bg-hover: #E8F8FD; // for hover
$table-bg-accent: $gray-5; // for striping
$table-bg-hover: $gray-5; // for hover
$table-bg-active: $table-bg-hover !default;
$table-border: #ddd; // table and cell border
$table-border: $gray-3; // table and cell border
// Scrollbars
$scrollbarBackground: $gray-3;
$scrollbarBackground2: $gray-3;
$scrollbarBorder: $gray-2;
$scrollbarBackground: $gray-5;
$scrollbarBackground2: $gray-5;
$scrollbarBorder: $gray-4;
// Buttons
// -------------------------
$btnBackground: $gray-3;
$btnBackgroundHighlight: darken($gray-3, 15%);
$btnBorder: #bbb;
$btn-primary-bg: $brand-primary;
$btn-primary-bg-hl: lighten($brand-primary, 10%);
$btn-primary-bg: $brand-primary;
$btn-primary-bg-hl: lighten($brand-primary, 8%);
$btnInfoBackground: lighten($purple, 3%);
$btnInfoBackgroundHighlight: darken($purple, 3%);
$btn-info-bg: lighten($purple, 3%);
$btn-info-bg-hl: darken($purple, 3%);
$btnSuccessBackground: lighten($green, 3%);
$btnSuccessBackgroundHighlight: darken($green, 3%);
$btn-success-bg: lighten($green, 3%);
$btn-success-bg-hl: darken($green, 3%);
$btnWarningBackground: lighten($orange, 3%);
$btnWarningBackgroundHighlight: darken($orange, 3%);
$btn-warning-bg: lighten($orange, 3%);
$btn-warning-bg-hl: darken($orange, 3%);
$btnDangerBackground: lighten($red, 3%);
$btnDangerBackgroundHighlight: darken($red, 3%);
$btn-danger-bg: lighten($red, 3%);
$btn-danger-bg-hl: darken($red, 3%);
$btnInverseBackground: $gray-5;
$btnInverseBackgroundHighlight: darken($gray-5, 5%);
$btnInverseText: $dark-4;
$btn-inverse-bg: $gray-5;
$btn-inverse-bg-hl: darken($gray-5, 5%);
$btn-inverse-text-color: $dark-4;
$btnText: $gray-3;
$btn-link-color: $gray-1;
$iconContainerBackground: $white;
......
public/sass/_variables.scss
......@@ -91,10 +91,10 @@ $form-sizes: (
// Typography
// -------------------------
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-serif: Georgia, "Times New Roman", Times, serif;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
$font-family-base: $font-family-sans-serif !default;
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-serif: Georgia, "Times New Roman", Times, serif;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
$font-family-base: $font-family-sans-serif !default;
$font-size-root: 14px !default;
......
public/sass/components/_buttons.scss
......@@ -64,6 +64,10 @@
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-xs, $btn-border-radius);
}
.btn-link {
color: $btn-link-color;
}
// Set the backgrounds
// -------------------------
.btn-primary {
......@@ -71,23 +75,23 @@
}
// Warning appears are orange
.btn-warning {
@include buttonBackground($btnWarningBackground, $btnWarningBackgroundHighlight);
@include buttonBackground($btn-warning-bg, $btn-warning-bg-hl);
}
// Danger and error appear as red
.btn-danger {
@include buttonBackground($btnDangerBackground, $btnDangerBackgroundHighlight);
@include buttonBackground($btn-danger-bg, $btn-danger-bg-hl);
}
// Success appears as green
.btn-success {
@include buttonBackground($btnSuccessBackground, $btnSuccessBackgroundHighlight);
@include buttonBackground($btn-success-bg, $btn-success-bg-hl);
}
// Info appears as a neutral blue
.btn-info {
@include buttonBackground($btnInfoBackground, $btnInfoBackgroundHighlight);
@include buttonBackground($btn-info-bg, $btn-info-bg-hl);
}
// Inverse appears as dark gray
.btn-inverse {
@include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight, $btnInverseText);
@include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
box-shadow: none;
border: 1px solid $tight-form-func-highlight-bg;
}
......@@ -96,23 +100,19 @@
@include button-outline-variant($btn-primary-bg);
}
.btn-outline-secondary {
@include button-outline-variant($btnInverseBackground);
@include button-outline-variant($btn-inverse-bg);
}
.btn-outline-info {
@include button-outline-variant($btnInfoBackground);
@include button-outline-variant($btn-info-bg);
}
.btn-outline-success {
@include button-outline-variant($btnSuccessBackground);
@include button-outline-variant($btn-success-bg);
}
.btn-outline-warning {
@include button-outline-variant($btnWarningBackground);
@include button-outline-variant($btn-warning-bg);
}
.btn-outline-danger {
@include button-outline-variant($btnDangerBackground);
@include button-outline-variant($btn-danger-bg);
}
.btn-text {
color: $btnText;
margin: 0;
vertical-align: middle;
}
public/sass/components/_dashboard.scss
......@@ -22,7 +22,7 @@
text-align: center;
display: inline-block;
line-height: 30px;
background: $btnSuccessBackground;
background: $btn-success-bg;
color: rgba(255,255,255,.90);
}
......
public/sass/components/_navbar.scss
......@@ -142,8 +142,8 @@
}
.dashboard-title {
padding: 0px 6px 5px 5px;
font-size: 17px;
padding: 0 0.4rem 0 0.5rem;
font-size: $font-size-lg;
}
.top-nav-icon {
......
public/sass/components/_timepicker.scss
......@@ -70,7 +70,7 @@
padding: 1px;
}
button.btn-sm {
@include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight);
@include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl);
background-image: none;
border: none;
padding: 6px 10px;
......
public/sass/pages/_login.scss
......@@ -78,7 +78,7 @@
font-weight: bold;
min-width: 150px;
display: inline-block;
border: 1px solid lighten($btnInverseBackground, 10%);
border: 1px solid lighten($btn-inverse-bg, 10%);
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment