Skip to content

N
nexpie-grafana-theme
Commit b6909eb3 by Patrick O'Carroll
Options

removed blue-dark variable with blue-light in light-theme, blue variable now has… 

removed blue-dark variable with blue-light in light-theme, blue variable now has same value as blue-dark had before, should fix issue with any low contrast issues with blue in light-theme, this made query-blue variable unnecessery removed it, added variable for variable dropdown highlight background
parent bfd05ba6
Showing with 22 additions and 18 deletions
public/sass/_variables.dark.scss
...@@ -44,7 +44,6 @@ $brand-success: $green; ...@@ -44,7 +44,6 @@ $brand-success: $green;
$brand-warning: $brand-primary; $brand-warning: $brand-primary;
$brand-danger: $red; $brand-danger: $red;
$query-blue: $blue;
$query-red: $red; $query-red: $red;
$query-green: $green; $query-green: $green;
$query-purple: $purple; $query-purple: $purple;
...@@ -347,3 +346,6 @@ $diff-json-changed-fg: $gray-5; ...@@ -347,3 +346,6 @@ $diff-json-changed-fg: $gray-5;
$diff-json-changed-num: $text-color; $diff-json-changed-num: $text-color;
$diff-json-icon: $gray-7; $diff-json-icon: $gray-7;
//Submenu
$variable-option-bg: $blue-dark;
public/sass/_variables.light.scss
...@@ -30,8 +30,8 @@ $white: #fff; ...@@ -30,8 +30,8 @@ $white: #fff;
// Accent colors // Accent colors
// ------------------------- // -------------------------
$blue: #61c2f2; $blue: #0083b3;
$blue-dark: #0083b3; $blue-light: #00a8e6;
$green: #3aa655; $green: #3aa655;
$red: #d44939; $red: #d44939;
$yellow: #ff851b; $yellow: #ff851b;
...@@ -45,7 +45,6 @@ $brand-success: $green; ...@@ -45,7 +45,6 @@ $brand-success: $green;
$brand-warning: $orange; $brand-warning: $orange;
$brand-danger: $red; $brand-danger: $red;
$query-blue: $blue-dark;
$query-red: $red; $query-red: $red;
$query-green: $green; $query-green: $green;
$query-purple: $purple; $query-purple: $purple;
...@@ -82,7 +81,7 @@ $page-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%); ...@@ -82,7 +81,7 @@ $page-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
$link-color: $gray-1; $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%); $link-hover-color: darken($link-color, 20%);
$external-link-color: $blue; $external-link-color: $blue-light;
// Typography // Typography
// ------------------------- // -------------------------
...@@ -150,8 +149,8 @@ $scrollbarBorder: $gray-4; ...@@ -150,8 +149,8 @@ $scrollbarBorder: $gray-4;
$btn-primary-bg: $brand-primary; $btn-primary-bg: $brand-primary;
$btn-primary-bg-hl: lighten($brand-primary, 8%); $btn-primary-bg-hl: lighten($brand-primary, 8%);
$btn-secondary-bg: $blue-dark; $btn-secondary-bg: $blue;
$btn-secondary-bg-hl: lighten($blue-dark, 4%); $btn-secondary-bg-hl: lighten($blue, 4%);
$btn-success-bg: lighten($green, 3%); $btn-success-bg: lighten($green, 3%);
$btn-success-bg-hl: darken($green, 3%); $btn-success-bg-hl: darken($green, 3%);
...@@ -168,7 +167,7 @@ $btn-inverse-text-color: $gray-1; ...@@ -168,7 +167,7 @@ $btn-inverse-text-color: $gray-1;
$btn-inverse-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); $btn-inverse-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
$btn-active-bg: $white; $btn-active-bg: $white;
$btn-active-text-color: $blue-dark; $btn-active-text-color: $blue;
$btn-link-color: $gray-1; $btn-link-color: $gray-1;
...@@ -220,7 +219,7 @@ $search-filter-box-bg: $gray-7; ...@@ -220,7 +219,7 @@ $search-filter-box-bg: $gray-7;
// Typeahead // Typeahead
$typeahead-shadow: 0 5px 10px 0 $gray-5; $typeahead-shadow: 0 5px 10px 0 $gray-5;
$typeahead-selected-bg: lighten($blue, 25%); $typeahead-selected-bg: lighten($blue, 25%);
$typeahead-selected-color: $blue-dark; $typeahead-selected-color: $blue;
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
...@@ -285,7 +284,7 @@ $info-text-color: $blue; ...@@ -285,7 +284,7 @@ $info-text-color: $blue;
$alert-error-bg: linear-gradient(90deg, #d44939, #e04d3d); $alert-error-bg: linear-gradient(90deg, #d44939, #e04d3d);
$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); $alert-success-bg: linear-gradient(90deg, #3aa655, #47b274);
$alert-warning-bg: linear-gradient(90deg, #d44939, #e04d3d); $alert-warning-bg: linear-gradient(90deg, #d44939, #e04d3d);
$alert-info-bg: $blue-dark; $alert-info-bg: $blue;
// popover // popover
$popover-bg: $page-bg; $popover-bg: $page-bg;
...@@ -293,7 +292,7 @@ $popover-color: $text-color; ...@@ -293,7 +292,7 @@ $popover-color: $text-color;
$popover-border-color: $gray-5; $popover-border-color: $gray-5;
$popover-shadow: 0 0 20px $white; $popover-shadow: 0 0 20px $white;
$popover-help-bg: $blue-dark; $popover-help-bg: $blue;
$popover-help-color: $gray-6; $popover-help-color: $gray-6;
$popover-error-bg: $btn-danger-bg; $popover-error-bg: $btn-danger-bg;
...@@ -310,7 +309,7 @@ $graph-tooltip-bg: $gray-5; ...@@ -310,7 +309,7 @@ $graph-tooltip-bg: $gray-5;
$checkboxImageUrl: '../img/checkbox_white.png'; $checkboxImageUrl: '../img/checkbox_white.png';
// info box // info box
$info-box-background: linear-gradient(100deg, $blue-dark, darken($blue-dark, 5%)); $info-box-background: linear-gradient(100deg, $blue, darken($blue, 5%));
$info-box-color: $gray-7; $info-box-color: $gray-7;
// footer // footer
...@@ -356,3 +355,6 @@ $diff-json-new: #664e33; ...@@ -356,3 +355,6 @@ $diff-json-new: #664e33;
$diff-json-changed-fg: $gray-6; $diff-json-changed-fg: $gray-6;
$diff-json-changed-num: $gray-4; $diff-json-changed-num: $gray-4;
$diff-json-icon: $gray-4; $diff-json-icon: $gray-4;
//Submenu
$variable-option-bg: $blue-light;
public/sass/components/_query_editor.scss
.query-keyword { .query-keyword {
font-weight: $font-weight-semi-bold; font-weight: $font-weight-semi-bold;
color: $query-blue; color: $blue;
} }
.gf-form-disabled { .gf-form-disabled {
.query-keyword { .query-keyword {
color: darken($query-blue, 20%); color: darken($blue, 20%);
} }
} }
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
} }
.gf-form-query-letter-cell-letter { .gf-form-query-letter-cell-letter {
font-weight: bold; font-weight: bold;
color: $query-blue; color: $blue;
} }
.gf-form-query-letter-cell-ds { .gf-form-query-letter-cell-ds {
color: $text-color-weak; color: $text-color-weak;
......
public/sass/components/_slate_editor.scss
...@@ -122,7 +122,7 @@ ...@@ -122,7 +122,7 @@
.token.attr-value, .token.attr-value,
.token.keyword, .token.keyword,
.token.class-name { .token.class-name {
color: $query-blue; color: $blue;
} }
.token.regex, .token.regex,
......
public/sass/components/_submenu.scss
...@@ -138,7 +138,7 @@ ...@@ -138,7 +138,7 @@
.variable-option { .variable-option {
&:hover, &:hover,
&.highlighted { &.highlighted {
background-color: $blue-dark; background-color: $variable-option-bg;
} }
} }
......
public/sass/components/_timepicker.scss
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
border: none; border: none;
color: $text-color; color: $text-color;
&.active span { &.active span {
color: $query-blue; color: $blue;
font-weight: bold; font-weight: bold;
} }
.text-info { .text-info {
......
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