[Lens/SCSS] Replace tag cloud expression metric css with js (#209578)

## Summary

Part of https://github.com/elastic/kibana/issues/208908

Replaces scss to css-in-js.

### Checklist

- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: Marco Liberati <dej611@users.noreply.github.com>

src/platform/plugins/shared/chart_expressions/expression_tagcloud/public/components/tag_cloud.scss

@@ -1,28 +0,0 @@
-// Prefix all styles with "tgc" to avoid conflicts.
-// Examples
-//   tgcChart
-//   tgcChart__legend
-//   tgcChart__legend--small
-//   tgcChart__legend-isLoading
-
-.tgcChart__wrapper {
-  flex: 1 1 0;
-  display: flex;
-  flex-direction: column;
-  // it is used for rendering at `Canvas`.
-  height: 100%;
-}
-
-.tgcChart__wrapper text {
-  cursor: pointer;
-}
-
-.tgcChart__label {
-  width: 100%;
-  text-align: center;
-  font-weight: $euiFontWeightBold;
-}
-
-.tgcChart__warning {
-  width: $euiSize;
-}

src/platform/plugins/shared/chart_expressions/expression_tagcloud/public/components/tagcloud_component.tsx

@@ -11,7 +11,7 @@ import React, { useCallback, useEffect, useState, useMemo } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import { throttle } from 'lodash';
-import { EuiIconTip, EuiResizeObserver } from '@elastic/eui';
+import { EuiIconTip, EuiResizeObserver, UseEuiTheme } from '@elastic/eui';
 import { IconChartTagcloud } from '@kbn/chart-icons';
 import {
   Chart,
@@ -30,12 +30,11 @@ import type { AllowedSettingsOverrides, AllowedChartOverrides } from '@kbn/chart
 import { getColumnByAccessor, getFormatByAccessor } from '@kbn/visualizations-plugin/common/utils';
 import { isMultiFieldKey } from '@kbn/data-plugin/common';
 import { KbnPalettes, useKbnPalettes } from '@kbn/palettes';
+import { css } from '@emotion/react';
 import { getFormatService } from '../format_service';
 import { TagcloudRendererConfig } from '../../common/types';
 import { ScaleOptions, Orientation } from '../../common/constants';
 
-import './tag_cloud.scss';
-
 const MAX_TAG_COUNT = 200;
 
 export type TagCloudChartProps = TagcloudRendererConfig & {
@@ -237,7 +236,7 @@ export const TagCloudChart = ({
   return (
     <EuiResizeObserver onResize={updateChart}>
       {(resizeRef) => (
-        <div className="tgcChart__wrapper" ref={resizeRef} data-test-subj="tagCloudVisualization">
+        <div css={tgcChartCss.wrapper} ref={resizeRef} data-test-subj="tagCloudVisualization">
           <Chart size="100%" {...getOverridesFor(overrides, 'chart')}>
             <Settings
               // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md
@@ -269,12 +268,12 @@ export const TagCloudChart = ({
             />
           </Chart>
           {label && showLabel && (
-            <div className="tgcChart__label" data-test-subj="tagCloudLabel">
+            <div css={tgcChartCss.label} data-test-subj="tagCloudLabel">
               {label}
             </div>
           )}
           {!visParams.isPreview && warning && (
-            <div className="tgcChart__warning">
+            <div css={tgcChartCss.warning}>
               <EuiIconTip
                 type="warning"
                 color="warning"
@@ -288,7 +287,7 @@ export const TagCloudChart = ({
             </div>
           )}
           {!visParams.isPreview && tagCloudData.length > MAX_TAG_COUNT && (
-            <div className="tgcChart__warning">
+            <div css={tgcChartCss.warning}>
               <EuiIconTip
                 type="warning"
                 color="warning"
@@ -330,3 +329,26 @@ function getColorFromMappingFactory(
     categories: getColorCategories(rows, tagColumn),
   });
 }
+
+const tgcChartCss = {
+  wrapper: css({
+    flex: '1 1 0',
+    display: 'flex',
+    flexDirection: 'column',
+    // it is used for rendering at `Canvas`.
+    height: '100%',
+    '& text': {
+      cursor: 'pointer',
+    },
+  }),
+  label: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      width: '100%',
+      textAlign: 'center',
+      fontWeight: euiTheme.font.weight.bold,
+    }),
+  warning: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      width: euiTheme.size.base,
+    }),
+};

src/platform/plugins/shared/chart_expressions/expression_tagcloud/tsconfig.json

@@ -8,6 +8,7 @@
     "common/**/*",
     "public/**/*",
     "server/**/*",
+    "../../../../../../typings/emotion.d.ts"
   ],
   "kbn_references": [
     { "path": "../tsconfig.json" },