root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 236 Packages Projects Releases Wiki Activity

Theme:s Tooltip fixes (#23174) 

* LightTheme: Fixed tooltips background & text

* LightTheme: Fixed tooltips background & text
This commit is contained in:
Torkel Ödegaard 2020-03-30 16:31:53 +02:00 committed by GitHub
parent a75211ce0d
commit bdf5654837
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 62 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
View File

@ -13,6 +13,11 @@ $popper-margin-from-ref: 5px;
background: darken($backgroundColor, 15%);
color: lighten($textColor, 20%);
}
strong,
em {
color: lighten($textColor, 20%);
}
}
.popper {
@ -25,7 +30,7 @@ $popper-margin-from-ref: 5px;
.popper__background {
background: $tooltipBackground;
border-radius: $border-radius-sm;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
box-shadow: $tooltipShadow;
padding: $space-sm;
color: $tooltipColor;
font-weight: $font-weight-semi-bold;

31
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
View File

@ -282,30 +282,29 @@ $alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
// popover
// Tooltips and popovers
// -------------------------
$tooltipColor: $text-color;
$tooltipArrowWidth: 5px;
$tooltipLinkColor: $link-color;
$tooltipShadow: 0 0 10px black;
$graph-tooltip-bg: $dark-1;
$tooltipBackground: $gray15;
$tooltipColor: $text-color;
$tooltipArrowColor: $tooltipBackground;
$tooltipBackgroundError: $brand-danger;
$popover-bg: $dark-2;
$popover-color: $text-color;
$popover-border-color: $dark-9;
$popover-header-bg: $dark-9;
$popover-shadow: 0 0 20px black;
$popover-help-bg: $btn-secondary-bg;
$popover-help-color: $gray-6;
$popover-help-bg: $tooltipBackground;
$popover-help-color: $text-color;
$popover-error-bg: $btn-danger-bg;
// Tooltips and popovers
// -------------------------
$tooltipColor: $popover-help-color;
$tooltipArrowWidth: 5px;
$tooltipLinkColor: $link-color;
$graph-tooltip-bg: $dark-1;
$tooltipBackground: $black;
$tooltipColor: $gray-4;
$tooltipArrowColor: $tooltipBackground;
$tooltipBackgroundError: $brand-danger;
// images
$checkboxImageUrl: '../img/checkbox.png';

29
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
View File

@ -274,29 +274,26 @@ $alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
// popover
// Tooltips and popovers
$tooltipBackground: $gray-1;
$tooltipColor: $gray-7;
$tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip
$tooltipBackgroundError: $brand-danger;
$tooltipShadow: 0 0 5px $gray60;
$graph-tooltip-bg: $gray-5;
$tooltipArrowWidth: 5px;
$tooltipLinkColor: lighten($tooltipColor, 5%);
$popover-bg: $page-bg;
$popover-color: $text-color;
$popover-border-color: $gray-5;
$popover-header-bg: $gray-5;
$popover-shadow: 0 0 20px $white;
$popover-help-bg: $btn-secondary-bg;
$popover-help-color: $gray-6;
$popover-error-bg: $btn-danger-bg;
// Tooltips and popovers
// -------------------------
$tooltipColor: $popover-help-color;
$tooltipArrowWidth: 5px;
$tooltipLinkColor: lighten($popover-help-color, 5%);
$graph-tooltip-bg: $gray-5;
$tooltipBackground: $gray-1;
$tooltipColor: $gray-7;
$tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip
$tooltipBackgroundError: $brand-danger;
$popover-help-bg: $tooltipBackground;
$popover-help-color: $tooltipColor;
// images
$checkboxImageUrl: '../img/checkbox_white.png';

31
public/sass/_variables.dark.generated.scss
View File

@ -285,30 +285,29 @@ $alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
// popover
// Tooltips and popovers
// -------------------------
$tooltipColor: $text-color;
$tooltipArrowWidth: 5px;
$tooltipLinkColor: $link-color;
$tooltipShadow: 0 0 10px black;
$graph-tooltip-bg: $dark-1;
$tooltipBackground: $gray15;
$tooltipColor: $text-color;
$tooltipArrowColor: $tooltipBackground;
$tooltipBackgroundError: $brand-danger;
$popover-bg: $dark-2;
$popover-color: $text-color;
$popover-border-color: $dark-9;
$popover-header-bg: $dark-9;
$popover-shadow: 0 0 20px black;
$popover-help-bg: $btn-secondary-bg;
$popover-help-color: $gray-6;
$popover-help-bg: $tooltipBackground;
$popover-help-color: $text-color;
$popover-error-bg: $btn-danger-bg;
// Tooltips and popovers
// -------------------------
$tooltipColor: $popover-help-color;
$tooltipArrowWidth: 5px;
$tooltipLinkColor: $link-color;
$graph-tooltip-bg: $dark-1;
$tooltipBackground: $black;
$tooltipColor: $gray-4;
$tooltipArrowColor: $tooltipBackground;
$tooltipBackgroundError: $brand-danger;
// images
$checkboxImageUrl: '../img/checkbox.png';

29
public/sass/_variables.light.generated.scss
View File

@ -277,29 +277,26 @@ $alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
// popover
// Tooltips and popovers
$tooltipBackground: $gray-1;
$tooltipColor: $gray-7;
$tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip
$tooltipBackgroundError: $brand-danger;
$tooltipShadow: 0 0 5px $gray60;
$graph-tooltip-bg: $gray-5;
$tooltipArrowWidth: 5px;
$tooltipLinkColor: lighten($tooltipColor, 5%);
$popover-bg: $page-bg;
$popover-color: $text-color;
$popover-border-color: $gray-5;
$popover-header-bg: $gray-5;
$popover-shadow: 0 0 20px $white;
$popover-help-bg: $btn-secondary-bg;
$popover-help-color: $gray-6;
$popover-error-bg: $btn-danger-bg;
// Tooltips and popovers
// -------------------------
$tooltipColor: $popover-help-color;
$tooltipArrowWidth: 5px;
$tooltipLinkColor: lighten($popover-help-color, 5%);
$graph-tooltip-bg: $gray-5;
$tooltipBackground: $gray-1;
$tooltipColor: $gray-7;
$tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip
$tooltipBackgroundError: $brand-danger;
$popover-help-bg: $tooltipBackground;
$popover-help-color: $tooltipColor;
// images
$checkboxImageUrl: '../img/checkbox_white.png';