From 56f8f8bc9cdd364c473f6bacb1758f0bd6d41603 Mon Sep 17 00:00:00 2001
From: dej611 <marco.liberati@elastic.co>
Date: Tue, 28 Dec 2021 18:05:32 +0100
Subject: [PATCH 1/6] :sparkles: Make color fill maximise space usage

---
 .../plugins/lens/public/metric_visualization/expression.scss  | 1 +
 .../plugins/lens/public/metric_visualization/expression.tsx   | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.scss b/x-pack/plugins/lens/public/metric_visualization/expression.scss
index ad2a175b5b5fc..dbb0719e49482 100644
--- a/x-pack/plugins/lens/public/metric_visualization/expression.scss
+++ b/x-pack/plugins/lens/public/metric_visualization/expression.scss
@@ -16,5 +16,6 @@
 
   .lnsMetricExpression__title {
     font-size: $euiSizeXL;
+    color: $euiColorInk;
   }
 }
\ No newline at end of file
diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.tsx b/x-pack/plugins/lens/public/metric_visualization/expression.tsx
index b9a79963510ed..114c8db7d6d24 100644
--- a/x-pack/plugins/lens/public/metric_visualization/expression.tsx
+++ b/x-pack/plugins/lens/public/metric_visualization/expression.tsx
@@ -143,9 +143,9 @@ export function MetricChart({
   const color = getColorStyling(rawValue, colorMode, palette, uiSettings.get('theme:darkMode'));
 
   return (
-    <VisualizationContainer className="lnsMetricExpression__container">
+    <VisualizationContainer className="lnsMetricExpression__container" style={color}>
       <AutoScale key={value}>
-        <div data-test-subj="lns_metric_value" className="lnsMetricExpression__value" style={color}>
+        <div data-test-subj="lns_metric_value" className="lnsMetricExpression__value">
           {value}
         </div>
         {mode === 'full' && (

From 69457bd8818b7a2f42c7fd75ba2615d408f7b13d Mon Sep 17 00:00:00 2001
From: dej611 <marco.liberati@elastic.co>
Date: Tue, 28 Dec 2021 18:11:52 +0100
Subject: [PATCH 2/6] :white_check_mark: Update tests

---
 .../metric_visualization/expression.test.tsx  | 46 +++++++++++--------
 1 file changed, 26 insertions(+), 20 deletions(-)

diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx b/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx
index 56bb9235aa3a1..aee83fe4fcae9 100644
--- a/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx
+++ b/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx
@@ -8,7 +8,7 @@
 import { MetricChart } from './expression';
 import { MetricConfig, metricChart } from '../../common/expressions';
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import { createMockExecutionContext } from '../../../../../src/plugins/expressions/common/mocks';
 import type { IFieldFormat } from '../../../../../src/plugins/field_formats/common';
 import { layerTypes } from '../../common';
@@ -94,6 +94,7 @@ describe('metric_expression', () => {
       ).toMatchInlineSnapshot(`
         <VisualizationContainer
           className="lnsMetricExpression__container"
+          style={Object {}}
         >
           <AutoScale
             key="3"
@@ -101,7 +102,6 @@ describe('metric_expression', () => {
             <div
               className="lnsMetricExpression__value"
               data-test-subj="lns_metric_value"
-              style={Object {}}
             >
               3
             </div>
@@ -132,6 +132,7 @@ describe('metric_expression', () => {
       ).toMatchInlineSnapshot(`
         <VisualizationContainer
           className="lnsMetricExpression__container"
+          style={Object {}}
         >
           <AutoScale
             key="last"
@@ -139,7 +140,6 @@ describe('metric_expression', () => {
             <div
               className="lnsMetricExpression__value"
               data-test-subj="lns_metric_value"
-              style={Object {}}
             >
               last
             </div>
@@ -169,6 +169,7 @@ describe('metric_expression', () => {
       ).toMatchInlineSnapshot(`
         <VisualizationContainer
           className="lnsMetricExpression__container"
+          style={Object {}}
         >
           <AutoScale
             key="3"
@@ -176,7 +177,6 @@ describe('metric_expression', () => {
             <div
               className="lnsMetricExpression__value"
               data-test-subj="lns_metric_value"
-              style={Object {}}
             >
               3
             </div>
@@ -206,6 +206,7 @@ describe('metric_expression', () => {
       ).toMatchInlineSnapshot(`
         <VisualizationContainer
           className="lnsMetricExpression__container"
+          style={Object {}}
         >
           <AutoScale
             key="3"
@@ -213,7 +214,6 @@ describe('metric_expression', () => {
             <div
               className="lnsMetricExpression__value"
               data-test-subj="lns_metric_value"
-              style={Object {}}
             >
               3
             </div>
@@ -287,6 +287,7 @@ describe('metric_expression', () => {
       ).toMatchInlineSnapshot(`
         <VisualizationContainer
           className="lnsMetricExpression__container"
+          style={Object {}}
         >
           <AutoScale
             key="0"
@@ -294,7 +295,6 @@ describe('metric_expression', () => {
             <div
               className="lnsMetricExpression__value"
               data-test-subj="lns_metric_value"
-              style={Object {}}
             >
               0
             </div>
@@ -337,7 +337,7 @@ describe('metric_expression', () => {
         colors: ['red', 'yellow', 'green'],
       };
 
-      const instance = shallow(
+      const instance = mount(
         <MetricChart
           data={data}
           args={args}
@@ -346,7 +346,9 @@ describe('metric_expression', () => {
         />
       );
 
-      expect(instance.find('[data-test-subj="lns_metric_value"]').first().prop('style')).toEqual(
+      expect(
+        instance.find('[data-test-subj="lnsVisualizationContainer"]').first().prop('style')
+      ).toEqual(
         expect.objectContaining({
           color: 'red',
         })
@@ -368,7 +370,7 @@ describe('metric_expression', () => {
         continuity: 'above',
       };
 
-      const instance = shallow(
+      const instance = mount(
         <MetricChart
           data={data}
           args={args}
@@ -378,7 +380,7 @@ describe('metric_expression', () => {
       );
 
       expect(
-        instance.find('[data-test-subj="lns_metric_value"]').first().prop('style')
+        instance.find('[data-test-subj="lnsVisualizationContainer"]').first().prop('style')
       ).not.toEqual(
         expect.objectContaining({
           color: expect.any(String),
@@ -400,7 +402,7 @@ describe('metric_expression', () => {
         continuity: 'below',
       };
 
-      const instance = shallow(
+      const instance = mount(
         <MetricChart
           data={data}
           args={args}
@@ -410,7 +412,7 @@ describe('metric_expression', () => {
       );
 
       expect(
-        instance.find('[data-test-subj="lns_metric_value"]').first().prop('style')
+        instance.find('[data-test-subj="lnsVisualizationContainer"]').first().prop('style')
       ).not.toEqual(
         expect.objectContaining({
           color: expect.any(String),
@@ -433,7 +435,7 @@ describe('metric_expression', () => {
         continuity: 'none',
       };
 
-      const instance = shallow(
+      const instance = mount(
         <MetricChart
           data={data}
           args={args}
@@ -443,7 +445,7 @@ describe('metric_expression', () => {
       );
 
       expect(
-        instance.find('[data-test-subj="lns_metric_value"]').first().prop('style')
+        instance.find('[data-test-subj="lnsVisualizationContainer"]').first().prop('style')
       ).not.toEqual(
         expect.objectContaining({
           color: expect.any(String),
@@ -466,7 +468,7 @@ describe('metric_expression', () => {
         continuity: 'none',
       };
 
-      const instance = shallow(
+      const instance = mount(
         <MetricChart
           data={data}
           args={args}
@@ -476,7 +478,7 @@ describe('metric_expression', () => {
       );
 
       expect(
-        instance.find('[data-test-subj="lns_metric_value"]').first().prop('style')
+        instance.find('[data-test-subj="lnsVisualizationContainer"]').first().prop('style')
       ).not.toEqual(
         expect.objectContaining({
           color: expect.any(String),
@@ -499,7 +501,7 @@ describe('metric_expression', () => {
         continuity: 'all',
       };
 
-      const instance = shallow(
+      const instance = mount(
         <MetricChart
           data={data}
           args={args}
@@ -508,7 +510,9 @@ describe('metric_expression', () => {
         />
       );
 
-      expect(instance.find('[data-test-subj="lns_metric_value"]').first().prop('style')).toEqual(
+      expect(
+        instance.find('[data-test-subj="lnsVisualizationContainer"]').first().prop('style')
+      ).toEqual(
         expect.objectContaining({
           color: 'green',
         })
@@ -530,7 +534,7 @@ describe('metric_expression', () => {
         continuity: 'all',
       };
 
-      const instance = shallow(
+      const instance = mount(
         <MetricChart
           data={data}
           args={args}
@@ -539,7 +543,9 @@ describe('metric_expression', () => {
         />
       );
 
-      expect(instance.find('[data-test-subj="lns_metric_value"]').first().prop('style')).toEqual(
+      expect(
+        instance.find('[data-test-subj="lnsVisualizationContainer"]').first().prop('style')
+      ).toEqual(
         expect.objectContaining({
           color: 'red',
         })

From 1f02658b121c3e76322f0b10cabb8012b0efd1b6 Mon Sep 17 00:00:00 2001
From: dej611 <marco.liberati@elastic.co>
Date: Tue, 28 Dec 2021 18:33:20 +0100
Subject: [PATCH 3/6] :bug: Fix for dark mode

---
 .../lens/public/metric_visualization/expression.scss        | 2 +-
 .../plugins/lens/public/metric_visualization/expression.tsx | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.scss b/x-pack/plugins/lens/public/metric_visualization/expression.scss
index dbb0719e49482..d1d12640bcfcb 100644
--- a/x-pack/plugins/lens/public/metric_visualization/expression.scss
+++ b/x-pack/plugins/lens/public/metric_visualization/expression.scss
@@ -16,6 +16,6 @@
 
   .lnsMetricExpression__title {
     font-size: $euiSizeXL;
-    color: $euiColorInk;
+    color: $euiColorFullShade;
   }
 }
\ No newline at end of file
diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.tsx b/x-pack/plugins/lens/public/metric_visualization/expression.tsx
index 114c8db7d6d24..2f9955c6a26d0 100644
--- a/x-pack/plugins/lens/public/metric_visualization/expression.tsx
+++ b/x-pack/plugins/lens/public/metric_visualization/expression.tsx
@@ -149,7 +149,11 @@ export function MetricChart({
           {value}
         </div>
         {mode === 'full' && (
-          <div data-test-subj="lns_metric_title" className="lnsMetricExpression__title">
+          <div
+            data-test-subj="lns_metric_title"
+            className="lnsMetricExpression__title"
+            style={colorMode === ColorMode.Background ? { color: color.color } : {}}
+          >
             {metricTitle}
           </div>
         )}

From 2a65f25df5742252e1a3364bab02072e2f81b152 Mon Sep 17 00:00:00 2001
From: dej611 <marco.liberati@elastic.co>
Date: Tue, 28 Dec 2021 18:33:41 +0100
Subject: [PATCH 4/6] :white_check_mark: Update tests

---
 .../lens/public/metric_visualization/expression.test.tsx      | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx b/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx
index aee83fe4fcae9..50853492a8713 100644
--- a/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx
+++ b/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx
@@ -108,6 +108,7 @@ describe('metric_expression', () => {
             <div
               className="lnsMetricExpression__title"
               data-test-subj="lns_metric_title"
+              style={Object {}}
             >
               My fanci metric chart
             </div>
@@ -146,6 +147,7 @@ describe('metric_expression', () => {
             <div
               className="lnsMetricExpression__title"
               data-test-subj="lns_metric_title"
+              style={Object {}}
             >
               My fanci metric chart
             </div>
@@ -183,6 +185,7 @@ describe('metric_expression', () => {
             <div
               className="lnsMetricExpression__title"
               data-test-subj="lns_metric_title"
+              style={Object {}}
             >
               My fanci metric chart
             </div>
@@ -301,6 +304,7 @@ describe('metric_expression', () => {
             <div
               className="lnsMetricExpression__title"
               data-test-subj="lns_metric_title"
+              style={Object {}}
             >
               My fanci metric chart
             </div>

From 8fa2631da2384f88c441fba20eaa01dabc5e1dc7 Mon Sep 17 00:00:00 2001
From: dej611 <marco.liberati@elastic.co>
Date: Wed, 29 Dec 2021 11:03:43 +0100
Subject: [PATCH 5/6] :bug: Fix tests and simplified code

---
 .../lens/public/metric_visualization/expression.test.tsx      | 4 ----
 .../plugins/lens/public/metric_visualization/expression.tsx   | 2 +-
 x-pack/test/functional/page_objects/lens_page.ts              | 2 +-
 3 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx b/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx
index 50853492a8713..aee83fe4fcae9 100644
--- a/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx
+++ b/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx
@@ -108,7 +108,6 @@ describe('metric_expression', () => {
             <div
               className="lnsMetricExpression__title"
               data-test-subj="lns_metric_title"
-              style={Object {}}
             >
               My fanci metric chart
             </div>
@@ -147,7 +146,6 @@ describe('metric_expression', () => {
             <div
               className="lnsMetricExpression__title"
               data-test-subj="lns_metric_title"
-              style={Object {}}
             >
               My fanci metric chart
             </div>
@@ -185,7 +183,6 @@ describe('metric_expression', () => {
             <div
               className="lnsMetricExpression__title"
               data-test-subj="lns_metric_title"
-              style={Object {}}
             >
               My fanci metric chart
             </div>
@@ -304,7 +301,6 @@ describe('metric_expression', () => {
             <div
               className="lnsMetricExpression__title"
               data-test-subj="lns_metric_title"
-              style={Object {}}
             >
               My fanci metric chart
             </div>
diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.tsx b/x-pack/plugins/lens/public/metric_visualization/expression.tsx
index 2f9955c6a26d0..1b2dca159e1ac 100644
--- a/x-pack/plugins/lens/public/metric_visualization/expression.tsx
+++ b/x-pack/plugins/lens/public/metric_visualization/expression.tsx
@@ -152,7 +152,7 @@ export function MetricChart({
           <div
             data-test-subj="lns_metric_title"
             className="lnsMetricExpression__title"
-            style={colorMode === ColorMode.Background ? { color: color.color } : {}}
+            style={colorMode === ColorMode.Background ? color : undefined}
           >
             {metricTitle}
           </div>
diff --git a/x-pack/test/functional/page_objects/lens_page.ts b/x-pack/test/functional/page_objects/lens_page.ts
index f55b05bc65a05..afa70d8172d84 100644
--- a/x-pack/test/functional/page_objects/lens_page.ts
+++ b/x-pack/test/functional/page_objects/lens_page.ts
@@ -1001,7 +1001,7 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont
     },
 
     async getMetricStyle() {
-      const el = await testSubjects.find('lns_metric_value');
+      const el = await testSubjects.find('lnsVisualizationContainer');
       const styleString = await el.getAttribute('style');
       return styleString.split(';').reduce<Record<string, string>>((memo, cssLine) => {
         const [prop, value] = cssLine.split(':');

From 71b14c8b5ad43d334b3ab4ff630b2ec423f48a96 Mon Sep 17 00:00:00 2001
From: dej611 <marco.liberati@elastic.co>
Date: Wed, 12 Jan 2022 14:36:00 +0100
Subject: [PATCH 6/6] :lipstick: Use euiTextColor in the appropriate context
 based on theme

---
 .../public/metric_visualization/expression.scss    |  2 +-
 .../public/metric_visualization/expression.tsx     |  3 ++-
 .../public/shared_components/coloring/utils.ts     | 14 +++++++++++---
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.scss b/x-pack/plugins/lens/public/metric_visualization/expression.scss
index d1d12640bcfcb..bf72015637356 100644
--- a/x-pack/plugins/lens/public/metric_visualization/expression.scss
+++ b/x-pack/plugins/lens/public/metric_visualization/expression.scss
@@ -16,6 +16,6 @@
 
   .lnsMetricExpression__title {
     font-size: $euiSizeXL;
-    color: $euiColorFullShade;
+    color: $euiTextColor;
   }
 }
\ No newline at end of file
diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.tsx b/x-pack/plugins/lens/public/metric_visualization/expression.tsx
index 1b2dca159e1ac..38bb92bb342ef 100644
--- a/x-pack/plugins/lens/public/metric_visualization/expression.tsx
+++ b/x-pack/plugins/lens/public/metric_visualization/expression.tsx
@@ -98,7 +98,8 @@ function getColorStyling(
     [cssProp]: color,
   };
   if (colorMode === ColorMode.Background && color) {
-    styling.color = getContrastColor(color, isDarkTheme);
+    // set to "euiTextColor" for both light and dark color, depending on the theme
+    styling.color = getContrastColor(color, isDarkTheme, 'euiTextColor', 'euiTextColor');
   }
   return styling;
 }
diff --git a/x-pack/plugins/lens/public/shared_components/coloring/utils.ts b/x-pack/plugins/lens/public/shared_components/coloring/utils.ts
index 6b61b4e568cf4..7cd89b2464c4e 100644
--- a/x-pack/plugins/lens/public/shared_components/coloring/utils.ts
+++ b/x-pack/plugins/lens/public/shared_components/coloring/utils.ts
@@ -293,9 +293,17 @@ export function getColorStops(
   return freshColorStops;
 }
 
-export function getContrastColor(color: string, isDarkTheme: boolean) {
-  const darkColor = isDarkTheme ? euiDarkVars.euiColorInk : euiLightVars.euiColorInk;
-  const lightColor = isDarkTheme ? euiDarkVars.euiColorGhost : euiLightVars.euiColorGhost;
+export function getContrastColor(
+  color: string,
+  isDarkTheme: boolean,
+  darkTextProp: 'euiColorInk' | 'euiTextColor' = 'euiColorInk',
+  lightTextProp: 'euiColorGhost' | 'euiTextColor' = 'euiColorGhost'
+) {
+  // when in light theme both text color and colorInk are dark and the choice
+  // may depends on the specific context.
+  const darkColor = isDarkTheme ? euiDarkVars.euiColorInk : euiLightVars[darkTextProp];
+  // Same thing for light color in dark theme
+  const lightColor = isDarkTheme ? euiDarkVars[lightTextProp] : euiLightVars.euiColorGhost;
   const backgroundColor = isDarkTheme
     ? euiDarkVars.euiPageBackgroundColor
     : euiLightVars.euiPageBackgroundColor;