From b6909eb3b00b10bfbb72eb4495cb89e0e7a625ca Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Fri, 20 Jul 2018 16:02:41 +0200 Subject: [PATCH] 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 --- public/sass/_variables.dark.scss | 4 +++- public/sass/_variables.light.scss | 24 ++++++++++++----------- public/sass/components/_query_editor.scss | 6 +++--- public/sass/components/_slate_editor.scss | 2 +- public/sass/components/_submenu.scss | 2 +- public/sass/components/_timepicker.scss | 2 +- 6 files changed, 22 insertions(+), 18 deletions(-) diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index eb73b014a93..01590ace585 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -44,7 +44,6 @@ $brand-success: $green; $brand-warning: $brand-primary; $brand-danger: $red; -$query-blue: $blue; $query-red: $red; $query-green: $green; $query-purple: $purple; @@ -347,3 +346,6 @@ $diff-json-changed-fg: $gray-5; $diff-json-changed-num: $text-color; $diff-json-icon: $gray-7; + +//Submenu +$variable-option-bg: $blue-dark; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 7e5e1b6a7f8..b6e9e7db979 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -30,8 +30,8 @@ $white: #fff; // Accent colors // ------------------------- -$blue: #61c2f2; -$blue-dark: #0083b3; +$blue: #0083b3; +$blue-light: #00a8e6; $green: #3aa655; $red: #d44939; $yellow: #ff851b; @@ -45,7 +45,6 @@ $brand-success: $green; $brand-warning: $orange; $brand-danger: $red; -$query-blue: $blue-dark; $query-red: $red; $query-green: $green; $query-purple: $purple; @@ -82,7 +81,7 @@ $page-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%); $link-color: $gray-1; $link-color-disabled: lighten($link-color, 30%); $link-hover-color: darken($link-color, 20%); -$external-link-color: $blue; +$external-link-color: $blue-light; // Typography // ------------------------- @@ -150,8 +149,8 @@ $scrollbarBorder: $gray-4; $btn-primary-bg: $brand-primary; $btn-primary-bg-hl: lighten($brand-primary, 8%); -$btn-secondary-bg: $blue-dark; -$btn-secondary-bg-hl: lighten($blue-dark, 4%); +$btn-secondary-bg: $blue; +$btn-secondary-bg-hl: lighten($blue, 4%); $btn-success-bg: lighten($green, 3%); $btn-success-bg-hl: darken($green, 3%); @@ -168,7 +167,7 @@ $btn-inverse-text-color: $gray-1; $btn-inverse-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); $btn-active-bg: $white; -$btn-active-text-color: $blue-dark; +$btn-active-text-color: $blue; $btn-link-color: $gray-1; @@ -220,7 +219,7 @@ $search-filter-box-bg: $gray-7; // Typeahead $typeahead-shadow: 0 5px 10px 0 $gray-5; $typeahead-selected-bg: lighten($blue, 25%); -$typeahead-selected-color: $blue-dark; +$typeahead-selected-color: $blue; // Dropdowns // ------------------------- @@ -285,7 +284,7 @@ $info-text-color: $blue; $alert-error-bg: linear-gradient(90deg, #d44939, #e04d3d); $alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); $alert-warning-bg: linear-gradient(90deg, #d44939, #e04d3d); -$alert-info-bg: $blue-dark; +$alert-info-bg: $blue; // popover $popover-bg: $page-bg; @@ -293,7 +292,7 @@ $popover-color: $text-color; $popover-border-color: $gray-5; $popover-shadow: 0 0 20px $white; -$popover-help-bg: $blue-dark; +$popover-help-bg: $blue; $popover-help-color: $gray-6; $popover-error-bg: $btn-danger-bg; @@ -310,7 +309,7 @@ $graph-tooltip-bg: $gray-5; $checkboxImageUrl: '../img/checkbox_white.png'; // 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; // footer @@ -356,3 +355,6 @@ $diff-json-new: #664e33; $diff-json-changed-fg: $gray-6; $diff-json-changed-num: $gray-4; $diff-json-icon: $gray-4; + +//Submenu +$variable-option-bg: $blue-light; diff --git a/public/sass/components/_query_editor.scss b/public/sass/components/_query_editor.scss index 6b2860d57bf..9fcfdf719ba 100644 --- a/public/sass/components/_query_editor.scss +++ b/public/sass/components/_query_editor.scss @@ -1,11 +1,11 @@ .query-keyword { font-weight: $font-weight-semi-bold; - color: $query-blue; + color: $blue; } .gf-form-disabled { .query-keyword { - color: darken($query-blue, 20%); + color: darken($blue, 20%); } } @@ -63,7 +63,7 @@ } .gf-form-query-letter-cell-letter { font-weight: bold; - color: $query-blue; + color: $blue; } .gf-form-query-letter-cell-ds { color: $text-color-weak; diff --git a/public/sass/components/_slate_editor.scss b/public/sass/components/_slate_editor.scss index de8a6e6d721..119c468292a 100644 --- a/public/sass/components/_slate_editor.scss +++ b/public/sass/components/_slate_editor.scss @@ -122,7 +122,7 @@ .token.attr-value, .token.keyword, .token.class-name { - color: $query-blue; + color: $blue; } .token.regex, diff --git a/public/sass/components/_submenu.scss b/public/sass/components/_submenu.scss index 0027e0b1999..1efd275bfad 100644 --- a/public/sass/components/_submenu.scss +++ b/public/sass/components/_submenu.scss @@ -138,7 +138,7 @@ .variable-option { &:hover, &.highlighted { - background-color: $blue-dark; + background-color: $variable-option-bg; } } diff --git a/public/sass/components/_timepicker.scss b/public/sass/components/_timepicker.scss index e4d8f4555e0..e12835d31c1 100644 --- a/public/sass/components/_timepicker.scss +++ b/public/sass/components/_timepicker.scss @@ -77,7 +77,7 @@ border: none; color: $text-color; &.active span { - color: $query-blue; + color: $blue; font-weight: bold; } .text-info {