Skip to content

N
nexpie-grafana-theme
Commit bdf56548 by Torkel Ödegaard Committed by GitHub
Options

Theme:s Tooltip fixes (#23174) 

* LightTheme: Fixed tooltips background & text

* LightTheme: Fixed tooltips background & text
parent a75211ce
Showing with 60 additions and 63 deletions
packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
...@@ -13,6 +13,11 @@ $popper-margin-from-ref: 5px; ...@@ -13,6 +13,11 @@ $popper-margin-from-ref: 5px;
background: darken($backgroundColor, 15%); background: darken($backgroundColor, 15%);
color: lighten($textColor, 20%); color: lighten($textColor, 20%);
} }
strong,
em {
color: lighten($textColor, 20%);
}
} }
.popper { .popper {
...@@ -25,7 +30,7 @@ $popper-margin-from-ref: 5px; ...@@ -25,7 +30,7 @@ $popper-margin-from-ref: 5px;
.popper__background { .popper__background {
background: $tooltipBackground; background: $tooltipBackground;
border-radius: $border-radius-sm; border-radius: $border-radius-sm;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); box-shadow: $tooltipShadow;
padding: $space-sm; padding: $space-sm;
color: $tooltipColor; color: $tooltipColor;
font-weight: $font-weight-semi-bold; font-weight: $font-weight-semi-bold;
......
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
...@@ -282,30 +282,29 @@ $alert-success-bg: linear-gradient(90deg, $green-base, $green-shade); ...@@ -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-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade); $alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
// popover
$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-error-bg: $btn-danger-bg;
// Tooltips and popovers // Tooltips and popovers
// ------------------------- // -------------------------
$tooltipColor: $popover-help-color; $tooltipColor: $text-color;
$tooltipArrowWidth: 5px; $tooltipArrowWidth: 5px;
$tooltipLinkColor: $link-color; $tooltipLinkColor: $link-color;
$tooltipShadow: 0 0 10px black;
$graph-tooltip-bg: $dark-1; $graph-tooltip-bg: $dark-1;
$tooltipBackground: $black; $tooltipBackground: $gray15;
$tooltipColor: $gray-4; $tooltipColor: $text-color;
$tooltipArrowColor: $tooltipBackground; $tooltipArrowColor: $tooltipBackground;
$tooltipBackgroundError: $brand-danger; $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: $tooltipBackground;
$popover-help-color: $text-color;
$popover-error-bg: $btn-danger-bg;
// images // images
$checkboxImageUrl: '../img/checkbox.png'; $checkboxImageUrl: '../img/checkbox.png';
......
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
...@@ -274,29 +274,26 @@ $alert-success-bg: linear-gradient(90deg, $green-base, $green-shade); ...@@ -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-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-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-bg: $page-bg;
$popover-color: $text-color; $popover-color: $text-color;
$popover-border-color: $gray-5; $popover-border-color: $gray-5;
$popover-header-bg: $gray-5; $popover-header-bg: $gray-5;
$popover-shadow: 0 0 20px $white; $popover-shadow: 0 0 20px $white;
$popover-help-bg: $btn-secondary-bg;
$popover-help-color: $gray-6;
$popover-error-bg: $btn-danger-bg; $popover-error-bg: $btn-danger-bg;
$popover-help-bg: $tooltipBackground;
// Tooltips and popovers $popover-help-color: $tooltipColor;
// -------------------------
$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;
// images // images
$checkboxImageUrl: '../img/checkbox_white.png'; $checkboxImageUrl: '../img/checkbox_white.png';
......
public/sass/_variables.dark.generated.scss
...@@ -285,30 +285,29 @@ $alert-success-bg: linear-gradient(90deg, $green-base, $green-shade); ...@@ -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-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade); $alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
// popover
$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-error-bg: $btn-danger-bg;
// Tooltips and popovers // Tooltips and popovers
// ------------------------- // -------------------------
$tooltipColor: $popover-help-color; $tooltipColor: $text-color;
$tooltipArrowWidth: 5px; $tooltipArrowWidth: 5px;
$tooltipLinkColor: $link-color; $tooltipLinkColor: $link-color;
$tooltipShadow: 0 0 10px black;
$graph-tooltip-bg: $dark-1; $graph-tooltip-bg: $dark-1;
$tooltipBackground: $black; $tooltipBackground: $gray15;
$tooltipColor: $gray-4; $tooltipColor: $text-color;
$tooltipArrowColor: $tooltipBackground; $tooltipArrowColor: $tooltipBackground;
$tooltipBackgroundError: $brand-danger; $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: $tooltipBackground;
$popover-help-color: $text-color;
$popover-error-bg: $btn-danger-bg;
// images // images
$checkboxImageUrl: '../img/checkbox.png'; $checkboxImageUrl: '../img/checkbox.png';
......
public/sass/_variables.light.generated.scss
...@@ -277,29 +277,26 @@ $alert-success-bg: linear-gradient(90deg, $green-base, $green-shade); ...@@ -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-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-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-bg: $page-bg;
$popover-color: $text-color; $popover-color: $text-color;
$popover-border-color: $gray-5; $popover-border-color: $gray-5;
$popover-header-bg: $gray-5; $popover-header-bg: $gray-5;
$popover-shadow: 0 0 20px $white; $popover-shadow: 0 0 20px $white;
$popover-help-bg: $btn-secondary-bg;
$popover-help-color: $gray-6;
$popover-error-bg: $btn-danger-bg; $popover-error-bg: $btn-danger-bg;
$popover-help-bg: $tooltipBackground;
// Tooltips and popovers $popover-help-color: $tooltipColor;
// -------------------------
$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;
// images // images
$checkboxImageUrl: '../img/checkbox_white.png'; $checkboxImageUrl: '../img/checkbox_white.png';
......
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