StatPanel: Fixed value being under graph and reduced likley hood for white and dark value text mixing (#28641) (#28655)

* StatPanel: Fixed value being under graph and reduced likley hood for white and dark value text mixing

* Updated snapshot

* Updated storybook config

(cherry picked from commit b46ac2891d)

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>

packages/grafana-ui/.storybook/webpack.config.js

@@ -103,7 +103,7 @@ module.exports = ({ config, mode }) => {
     minimize: isProductionBuild,
     minimizer: isProductionBuild
       ? [
-          new TerserPlugin({ cache: false, parallel: false, sourceMap: false, exclude: /monaco/ }),
+          new TerserPlugin({ cache: false, parallel: false, sourceMap: false, exclude: /monaco|bizcharts/ }),
           new OptimizeCSSAssetsPlugin({}),
         ]
       : [],

packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx

@@ -63,6 +63,8 @@ export abstract class BigValueLayout {
       fontSize: this.valueFontSize,
       fontWeight: 500,
       lineHeight: LINE_HEIGHT,
+      position: 'relative',
+      zIndex: 1,
     };
 
     switch (this.props.colorMode) {

packages/grafana-ui/src/components/BigValue/__snapshots__/BigValue.test.tsx.snap

@@ -30,10 +30,12 @@ exports[`BigValue Render with basic options should render 1`] = `
     <FormattedDisplayValue
       style={
         Object {
-          "color": "#202226",
+          "color": "#f7f8fa",
           "fontSize": 230,
           "fontWeight": 500,
           "lineHeight": 1.2,
+          "position": "relative",
+          "zIndex": 1,
         }
       }
       value={

packages/grafana-ui/src/utils/colors.ts

@@ -99,7 +99,7 @@ function hslToHex(color: any) {
 
 export function getTextColorForBackground(color: string) {
   const b = tinycolor(color).getBrightness();
-  return b > 150 ? lightTheme.colors.textStrong : darkTheme.colors.textStrong;
+  return b > 180 ? lightTheme.colors.textStrong : darkTheme.colors.textStrong;
 }
 
 export let sortedColors = sortColorsByHue(colors);