Repository: elastic/kibana
Pull request #216450: [SharedUX] SCSS migration of kibana_react plugin
Author: login: paulinashakirova
Labels: name: release_note:skip
description: Skip the PR/issue when compiling release notes
name: backport:skip
description: This PR does not require backporting
name: Team:SharedUX
description: Platform AppEx-SharedUX (formerly Global Experience) t//
name: v9.1.0
name: scss-removal
Created: 2025-03-31T11:31:09Z | Merged: 2025-04-07T15:06:16Z

## Summary

This PR is a part of SCSS migration of SharedUX team code.
Here is a [meta](https://github.com/elastic/kibana-team/issues/1417) issue for it. 



Diff:
diff --git a/src/platform/plugins/shared/kibana_react/public/markdown/_markdown.scss b/src/platform/plugins/shared/kibana_react/public/markdown/_markdown.scss
deleted file mode 100644
index a3bba38509bcd..0000000000000
--- a/src/platform/plugins/shared/kibana_react/public/markdown/_markdown.scss
+++ /dev/null
@@ -1,328 +0,0 @@
-// Default styles for Markdown element
-//
-// 1. Links
-// 2. Headings
-// 3. Images
-// 4. Blockquotes
-// 5. Horizontal rules
-// 6. Lists
-// 7. Tables
-// 8. Code blocks
-
-// Functions
-// Note: The inlined base font size is set in common/functions/font.js. It should match $kbnMdFontSize.
-$kbnDefaultFontSize: 14px;
-
-@function canvasToEm($size) {
-  @return #{calc($size / $kbnDefaultFontSize)}em;
-}
-
-.kbnMarkdown__body {
-  // Font size variables
-  $kbnMarkdownFontSizeS: canvasToEm(12px);
-  $kbnMarkdownFontSize: canvasToEm(14px);
-  $kbnMarkdownFontSizeL: canvasToEm(20px);
-  $kbnMarkdownFontSizeXL: canvasToEm(28px);
-  $kbnMarkdownFontSizeXXL: canvasToEm(36px);
-
-  // Spacing variables
-  $kbnMarkdownSizeL: canvasToEm(24px);
-  $kbnMarkdownSize: canvasToEm(16px);
-  $kbnMarkdownSizeS: canvasToEm(12px);
-  $kbnMarkdownSizeXS: canvasToEm(8px);
-  $kbnMarkdownSizeXXS: canvasToEm(4px);
-
-  // Grayscale variables
-  $kbnMarkdownAlphaLightestShade: rgba($euiColorFullShade, .05);
-  $kbnMarkdownAlphaLightShade: rgba($euiColorFullShade, .15);
-  $kbnMarkdownAlphaDarkShade: rgba($euiColorFullShade, .65);
-
-  // Reverse grayscale for opposite of theme
-  $kbnMarkdownAlphaLightestShadeReversed: rgba($euiColorEmptyShade, .05);
-  $kbnMarkdownAlphaLightShadeReversed: rgba($euiColorEmptyShade, .15);
-  $kbnMarkdownAlphaDarkShadeReversed: rgba($euiColorEmptyShade, .65);
-
-  &--reversed {
-    color: $euiColorLightestShade;
-  }
-
-  > *:first-child {
-    margin-top: 0 !important;
-  }
-
-  > *:last-child {
-    margin-bottom: 0 !important;
-  }
-
-  p,
-  blockquote,
-  ul,
-  ol,
-  dl,
-  table,
-  pre {
-    margin-top: 0;
-    margin-bottom: $kbnMarkdownSize;
-    line-height: 1.5em;
-  }
-
-  strong {
-    font-weight: 600;
-  }
-
-  // 1. Links
-  a {
-    color: inherit;
-    text-decoration: underline;
-  }
-
-  a:hover {
-    text-decoration: underline dotted;
-  }
-
-  a:active,
-  a:hover {
-    outline-width: 0;
-  }
-
-  a:not([href]) {
-    color: inherit;
-    text-decoration: none;
-  }
-
-  // 2. Headings
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin-top: 0;
-    margin-bottom: $kbnMarkdownSizeXS;
-  }
-
-  h1 {
-    font-size: $kbnMarkdownFontSizeXXL;
-    line-height: 1.333333em;
-    font-weight: 300;
-  }
-
-  h2 {
-    font-size: $kbnMarkdownFontSizeXL;
-    line-height: 1.428571em;
-    font-weight: 300;
-  }
-
-  h3 {
-    font-size: $kbnMarkdownFontSizeL;
-    line-height: 1.6em;
-    font-weight: 600;
-  }
-
-  h4 {
-    font-size: $kbnMarkdownSize;
-    line-height: 1.5em;
-    font-weight: 600;
-  }
-
-  h5 {
-    font-size: $kbnMarkdownFontSize;
-    line-height: 1.142857em;
-    font-weight: 700;
-  }
-
-  h6 {
-    font-size: $kbnMarkdownFontSizeS;
-    line-height: 1.333333em;
-    font-weight: 700;
-    text-transform: uppercase;
-  }
-
-  // 3. Images
-  img {
-    max-width: 100%;
-    box-sizing: content-box;
-    border-style: none;
-    pointer-events: auto;
-  }
-
-  // 4. Blockquotes
-  blockquote {
-    padding: 0 1em;
-    border-left: $kbnMarkdownSizeXXS solid $kbnMarkdownAlphaLightShade;
-  }
-  &--reversed blockquote {
-    border-left-color: $kbnMarkdownAlphaLightShadeReversed;
-  }
-
-  // 5. Horizontal rules
-  hr {
-    overflow: hidden;
-    background: transparent;
-    height: 2px;
-    padding: 0;
-    margin: $kbnMarkdownSizeL 0;
-    background-color: $kbnMarkdownAlphaLightShade;
-    border: 0;
-  }
-  &--reversed hr {
-    background-color: $kbnMarkdownAlphaLightShadeReversed;
-  }
-
-  hr::before {
-    display: table;
-    content: '';
-  }
-
-  hr::after {
-    display: table;
-    clear: both;
-    content: '';
-  }
-
-  // 6. Lists
-  ul,
-  ol {
-    padding-left: $kbnMarkdownSizeL;
-    margin-top: 0;
-    margin-bottom: $kbnMarkdownSize;
-  }
-
-  ul {
-    list-style-type: disc;
-  }
-  ol {
-    list-style-type: decimal;
-  }
-
-  ul ul {
-    list-style-type: circle;
-  }
-
-  ol ol,
-  ul ol {
-    list-style-type: lower-roman;
-  }
-
-  ul ul ol,
-  ul ol ol,
-  ol ul ol,
-  ol ol ol {
-    list-style-type: lower-alpha;
-  }
-
-  dd {
-    margin-left: 0;
-  }
-
-  ul ul,
-  ul ol,
-  ol ol,
-  ol ul {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
-  li > p {
-    margin-bottom: $kbnMarkdownSizeXS;
-  }
-
-  li + li {
-    margin-top: $kbnMarkdownSizeXXS;
-  }
-
-  // 7. Tables
-  table {
-    display: block;
-    width: 100%;
-    overflow: auto;
-    border-left: 1px solid $kbnMarkdownAlphaLightShade;
-    border-spacing: 0;
-    border-collapse: collapse;
-  }
-  &--reversed table {
-    border-left-color: $kbnMarkdownAlphaLightShadeReversed;
-  }
-
-  td,
-  th {
-    padding: 0;
-  }
-
-  table th,
-  table td {
-    padding: $kbnMarkdownSizeXXS $kbnMarkdownSizeS;
-    border-top: 1px solid $kbnMarkdownAlphaLightShade;
-    border-bottom: 1px solid $kbnMarkdownAlphaLightShade;
-
-    &:last-child {
-      border-right: 1px solid $kbnMarkdownAlphaLightShade;
-    }
-  }
-  &--reversed table th,
-  &--reversed table td {
-    border-color: $kbnMarkdownAlphaLightShadeReversed;
-  }
-
-  table tr {
-    background-color: transparent;
-    border-top: 1px solid $kbnMarkdownAlphaLightShade;
-  }
-  &--reversed table tr {
-    border-top-color: $kbnMarkdownAlphaLightShadeReversed;
-  }
-
-  // 8. Code blocks
-  code,
-  pre {
-    margin-bottom: $kbnMarkdownSizeXS;
-    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
-    font-size: $kbnMarkdownFontSizeS;
-  }
-
-  code {
-    padding: $kbnMarkdownSizeXXS 0;
-    margin: 0;
-    background-color: $kbnMarkdownAlphaLightestShade;
-    border-radius: $kbnMarkdownSizeXXS;
-  }
-  &--reversed code {
-    background-color: $kbnMarkdownAlphaLightestShadeReversed;
-  }
-
-  code::before,
-  code::after {
-    letter-spacing: -.2em;
-    content: '\00a0';
-  }
-
-  pre {
-    padding: $kbnMarkdownSize;
-    overflow: auto;
-    font-size: $kbnMarkdownFontSizeS;
-    line-height: 1.333333em;
-    background-color: $kbnMarkdownAlphaLightestShade;
-    border-radius: $kbnMarkdownSizeXXS;
-    word-wrap: normal;
-  }
-  &--reversed pre {
-    background-color: $kbnMarkdownAlphaLightestShadeReversed;
-  }
-
-  pre code {
-    display: inline;
-    max-width: auto;
-    padding: 0;
-    overflow: visible;
-    line-height: inherit;
-    word-wrap: normal;
-    white-space: pre;
-    background-color: transparent;
-    border: 0;
-  }
-
-  pre code::before,
-  pre code::after {
-    content: normal;
-  }
-}
diff --git a/src/platform/plugins/shared/kibana_react/public/markdown/index.scss b/src/platform/plugins/shared/kibana_react/public/markdown/index.scss
deleted file mode 100644
index f997ea5384eac..0000000000000
--- a/src/platform/plugins/shared/kibana_react/public/markdown/index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import './markdown';
diff --git a/src/platform/plugins/shared/kibana_react/public/markdown/markdown.tsx b/src/platform/plugins/shared/kibana_react/public/markdown/markdown.tsx
index 1e00277d70b95..a99711aa757fa 100644
--- a/src/platform/plugins/shared/kibana_react/public/markdown/markdown.tsx
+++ b/src/platform/plugins/shared/kibana_react/public/markdown/markdown.tsx
@@ -11,9 +11,9 @@ import classNames from 'classnames';
 import React, { useEffect } from 'react';
 import MarkdownIt from 'markdown-it';
 import { memoize } from 'lodash';
-import { getSecureRelForTarget } from '@elastic/eui';
+import { getSecureRelForTarget, useEuiTheme } from '@elastic/eui';
+import { markdownStyles } from './markdownStyles';
 
-import './index.scss';
 /**
  * Return a memoized markdown rendering function that use the specified
  * whiteListedRules and openLinksInNewTab configurations.
@@ -80,6 +80,7 @@ export interface MarkdownProps extends React.HTMLAttributes<HTMLDivElement> {
   openLinksInNewTab?: boolean;
   whiteListedRules?: string[];
   onRender?: () => void;
+  isReversed?: boolean;
 }
 
 export const Markdown = (props: MarkdownProps) => {
@@ -87,14 +88,27 @@ export const Markdown = (props: MarkdownProps) => {
     props.onRender?.();
   }, [props]);
 
-  const { className, markdown = '', openLinksInNewTab, whiteListedRules, ...rest } = props;
-  const classes = classNames('kbnMarkdown__body', className);
+  const {
+    className,
+    markdown = '',
+    openLinksInNewTab,
+    whiteListedRules,
+    isReversed = false,
+    ...rest
+  } = props;
+  const { euiTheme } = useEuiTheme();
+  const classes = classNames(
+    'kbnMarkdown__body',
+    { 'kbnMarkdown__body--reversed': isReversed },
+    className
+  );
   const markdownRenderer = markdownFactory(whiteListedRules, openLinksInNewTab);
   const renderedMarkdown = markdownRenderer(markdown);
   return (
     <div
       {...rest}
       className={classes}
+      css={markdownStyles(euiTheme, isReversed)}
       /*
        * Justification for dangerouslySetInnerHTML:
        * The Markdown Visualization is, believe it or not, responsible for rendering Markdown.
diff --git a/src/platform/plugins/shared/kibana_react/public/markdown/markdownStyles.ts b/src/platform/plugins/shared/kibana_react/public/markdown/markdownStyles.ts
new file mode 100644
index 0000000000000..9c5bc0b00c96c
--- /dev/null
+++ b/src/platform/plugins/shared/kibana_react/public/markdown/markdownStyles.ts
@@ -0,0 +1,287 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { css } from '@emotion/react';
+import { UseEuiTheme, transparentize } from '@elastic/eui';
+
+// Default styles for Markdown element
+//
+// 1. Links
+// 2. Headings
+// 3. Images
+// 4. Blockquotes
+// 5. Horizontal rules
+// 6. Lists
+// 7. Tables
+// 8. Code blocks
+
+export const markdownStyles = (euiTheme: UseEuiTheme['euiTheme'], isReversed: boolean) => {
+  // Note: The inlined base font size is set in common/functions/font.js. It should match $kbnMdFontSize.
+  const kbnDefaultFontSize = 14;
+
+  // Function to convert px to em
+  const canvasToEm = (size: number): string => `${size / kbnDefaultFontSize}em`;
+
+  // Font size variables
+  const kbnMarkdownFontSizeS = canvasToEm(12);
+  const kbnMarkdownFontSize = canvasToEm(14);
+  const kbnMarkdownFontSizeL = canvasToEm(20);
+  const kbnMarkdownFontSizeXL = canvasToEm(28);
+  const kbnMarkdownFontSizeXXL = canvasToEm(36);
+
+  // Spacing variables
+  const kbnMarkdownSizeL = canvasToEm(24);
+  const kbnMarkdownSize = canvasToEm(16);
+  const kbnMarkdownSizeS = canvasToEm(12);
+  const kbnMarkdownSizeXS = canvasToEm(8);
+  const kbnMarkdownSizeXXS = canvasToEm(4);
+
+  // Grayscale variables
+  const kbnMarkdownAlphaLightestShade = transparentize(`${euiTheme.colors.fullShade}`, 0.05);
+  const kbnMarkdownAlphaLightShade = transparentize(`${euiTheme.colors.fullShade}`, 0.15);
+
+  // Reverse grayscale for opposite of theme
+  const kbnMarkdownAlphaLightestShadeReversed = transparentize(
+    `${euiTheme.colors.emptyShade}`,
+    0.05
+  );
+  const kbnMarkdownAlphaLightShadeReversed = transparentize(`${euiTheme.colors.emptyShade}`, 0.15);
+
+  return css({
+    ...(isReversed && {
+      color: `${euiTheme.colors.lightestShade}`,
+    }),
+
+    '> *:first-child': {
+      marginTop: '0 !important',
+    },
+
+    '> *:last-child': {
+      marginBottom: '0 !important',
+    },
+
+    'p, blockquote, ul, ol, dl, table, pre': {
+      marginTop: 0,
+      marginBottom: kbnMarkdownSize,
+      lineHeight: '1.5em',
+    },
+
+    strong: {
+      fontWeight: 600,
+    },
+
+    // Links
+    a: {
+      color: 'inherit',
+      textDecoration: 'underline',
+      '&:hover': {
+        textDecoration: 'underline dotted',
+      },
+      '&:active, &:hover': {
+        outlineWidth: 0,
+      },
+      '&:not([href])': {
+        color: 'inherit',
+        textDecoration: 'none',
+      },
+    },
+
+    // Headings
+    'h1, h2, h3, h4, h5, h6': {
+      marginTop: 0,
+      marginBottom: kbnMarkdownSizeXS,
+    },
+    h1: {
+      fontSize: kbnMarkdownFontSizeXXL,
+      lineHeight: '1.333333em',
+      fontWeight: 300,
+    },
+    h2: {
+      fontSize: kbnMarkdownFontSizeXL,
+      lineHeight: '1.428571em',
+      fontWeight: 300,
+    },
+    h3: {
+      fontSize: kbnMarkdownFontSizeL,
+      lineHeight: '1.6em',
+      fontWeight: 600,
+    },
+    h4: {
+      fontSize: kbnMarkdownSize,
+      lineHeight: '1.5em',
+      fontWeight: 600,
+    },
+    h5: {
+      fontSize: kbnMarkdownFontSize,
+      lineHeight: '1.142857em',
+      fontWeight: 700,
+    },
+    h6: {
+      fontSize: kbnMarkdownFontSizeS,
+      lineHeight: '1.333333em',
+      fontWeight: 700,
+      textTransform: 'uppercase',
+    },
+
+    // Images
+    img: {
+      maxWidth: '100%',
+      boxSizing: 'content-box',
+      borderStyle: 'none',
+      pointerEvents: 'auto',
+    },
+
+    // Blockquotes
+    blockquote: {
+      padding: '0 1em',
+      borderLeft: `${kbnMarkdownSizeXXS} solid ${kbnMarkdownAlphaLightShade}`,
+      ...(isReversed && {
+        borderLeftColor: `${kbnMarkdownAlphaLightShadeReversed}`,
+      }),
+    },
+
+    // Horizontal rules
+    hr: {
+      overflow: 'hidden',
+      background: 'transparent',
+      height: '2px',
+      padding: 0,
+      margin: `${kbnMarkdownSizeL} 0`,
+      backgroundColor: `${kbnMarkdownAlphaLightShade}`,
+      border: 0,
+
+      '::before': {
+        display: 'table',
+        content: '"',
+      },
+      '::after': {
+        display: 'table',
+        clear: 'both',
+        content: '"',
+      },
+      ...(isReversed && {
+        backgroundColor: kbnMarkdownAlphaLightShadeReversed,
+      }),
+    },
+
+    // Lists
+    'ul, ol': {
+      paddingLeft: `${kbnMarkdownSizeL}`,
+      marginTop: 0,
+      marginBottom: `${kbnMarkdownSize}`,
+    },
+    ul: {
+      listStyleType: 'disc',
+    },
+    ol: {
+      listStyleType: 'decimal',
+    },
+    'ul ul': {
+      listStyleType: 'circle',
+    },
+    'ol ol, ul ol': {
+      listStyleType: 'lower-roman',
+    },
+    'ul ul ol, ul ol ol, ol ul ol, ol ol ol': {
+      listStyleType: 'lower-alpha',
+    },
+    dd: {
+      marginLeft: 0,
+    },
+    // Nested lists with no margin
+    'ul ul, ul ol, ol ol, ol ul': {
+      marginTop: 0,
+      marginBottom: 0,
+    },
+    'li > p': {
+      marginBottom: `${kbnMarkdownSizeXS}`,
+    },
+    'li + li': {
+      marginTop: `${kbnMarkdownSizeXXS}`,
+    },
+
+    // Tables
+    table: {
+      display: 'block',
+      width: '100%',
+      overflow: 'auto',
+      borderLeft: `1px solid ${kbnMarkdownAlphaLightShade}`,
+      borderSpacing: 0,
+      borderCollapse: 'collapse',
+      ...(isReversed && {
+        borderLeftColor: `${kbnMarkdownAlphaLightShadeReversed}`,
+      }),
+    },
+    'table th, table td': {
+      padding: `${kbnMarkdownSizeXXS} ${kbnMarkdownSizeS}`,
+      borderTop: `1px solid ${kbnMarkdownAlphaLightShade}`,
+      borderBottom: `1px solid ${kbnMarkdownAlphaLightShade}`,
+      '&:last-child': {
+        borderRight: `1px solid ${kbnMarkdownAlphaLightShade}`,
+      },
+      ...(isReversed && {
+        borderColor: `${kbnMarkdownAlphaLightShadeReversed}`,
+      }),
+    },
+    'table tr': {
+      backgroundColor: 'transparent',
+      borderTop: `1px solid ${kbnMarkdownAlphaLightShade}`,
+      ...(isReversed && {
+        borderTopColor: `${kbnMarkdownAlphaLightShadeReversed}`,
+      }),
+    },
+
+    // Code blocks
+    'code, pre': {
+      marginBottom: `${kbnMarkdownSizeXS}`,
+      fontFamily: `'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace`,
+      fontSize: `${kbnMarkdownFontSizeS}`,
+    },
+    code: {
+      padding: `${kbnMarkdownSizeXXS} 0`,
+      margin: 0,
+      backgroundColor: `${kbnMarkdownAlphaLightestShade}`,
+      borderRadius: `${kbnMarkdownSizeXXS}`,
+      '&::before, &::after': {
+        letterSpacing: '-.2em',
+        content: '"\xa0"',
+      },
+      ...(isReversed && {
+        backgroundColor: `${kbnMarkdownAlphaLightestShadeReversed}`,
+      }),
+    },
+
+    pre: {
+      padding: `${kbnMarkdownSize}`,
+      overflow: 'auto',
+      fontSize: `${kbnMarkdownFontSizeS}`,
+      lineHeight: '1.333333em',
+      backgroundColor: `${kbnMarkdownAlphaLightestShade}`,
+      borderRadius: `${kbnMarkdownSizeXXS}`,
+      wordWrap: 'normal',
+      ...(isReversed && {
+        backgroundColor: `${kbnMarkdownAlphaLightestShadeReversed}`,
+      }),
+    },
+    'pre code': {
+      display: 'inline',
+      maxWidth: 'auto',
+      padding: 0,
+      overflow: 'visible',
+      lineHeight: 'inherit',
+      wordWrap: 'normal',
+      whiteSpace: 'pre',
+      backgroundColor: 'transparent',
+      border: 0,
+      '&::before, &::after': {
+        content: 'normal',
+      },
+    },
+  });
+};
diff --git a/src/platform/plugins/shared/kibana_react/public/page_template/no_data_page/action_cards/action_cards.scss b/src/platform/plugins/shared/kibana_react/public/page_template/no_data_page/action_cards/action_cards.scss
deleted file mode 100644
index d4b50536d0d09..0000000000000
--- a/src/platform/plugins/shared/kibana_react/public/page_template/no_data_page/action_cards/action_cards.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.kbnNoDataPageContents__item:only-child {
-  min-width: ($euiSize * 22.5);
-
-  @include euiBreakpoint('xs', 's') {
-    min-width: auto;
-  }
-}
diff --git a/src/platform/plugins/shared/kibana_react/public/page_template/no_data_page/action_cards/action_cards.tsx b/src/platform/plugins/shared/kibana_react/public/page_template/no_data_page/action_cards/action_cards.tsx
index 228e6d5f8cb15..681fc7e55b9bf 100644
--- a/src/platform/plugins/shared/kibana_react/public/page_template/no_data_page/action_cards/action_cards.tsx
+++ b/src/platform/plugins/shared/kibana_react/public/page_template/no_data_page/action_cards/action_cards.tsx
@@ -7,9 +7,14 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import './action_cards.scss';
-
-import { EuiFlexGrid, EuiFlexItem } from '@elastic/eui';
+import {
+  EuiFlexGrid,
+  EuiFlexItem,
+  mathWithUnits,
+  useEuiTheme,
+  useEuiMaxBreakpoint,
+} from '@elastic/eui';
+import { css } from '@emotion/react';
 import React, { ReactElement } from 'react';
 import { ElasticAgentCard, NoDataCard } from '../no_data_card';
 
@@ -17,13 +22,25 @@ interface ActionCardsProps {
   actionCards: Array<ReactElement<typeof NoDataCard> | ReactElement<typeof ElasticAgentCard>>;
 }
 export const ActionCards = ({ actionCards }: ActionCardsProps) => {
+  const { euiTheme } = useEuiTheme();
   const cards = actionCards.map((card) => (
     <EuiFlexItem key={card.key || ''} className="kbnNoDataPageContents__item">
       {card}
     </EuiFlexItem>
   ));
   return (
-    <EuiFlexGrid columns={2} css={{ justifyContent: 'space-around' }}>
+    <EuiFlexGrid
+      columns={2}
+      css={css({
+        justifyContent: 'space-around',
+        '.kbnNoDataPageContents__item:only-child': {
+          minWidth: mathWithUnits(euiTheme.size.base, (x) => x * 22.5),
+        },
+        [useEuiMaxBreakpoint('m')]: {
+          minWidth: 'auto',
+        },
+      })}
+    >
       {cards}
     </EuiFlexGrid>
   );
diff --git a/src/platform/plugins/shared/vis_types/timeseries/public/application/components/vis_types/markdown/vis.js b/src/platform/plugins/shared/vis_types/timeseries/public/application/components/vis_types/markdown/vis.js
index 6dad9c39eb3d0..5d888141dec96 100644
--- a/src/platform/plugins/shared/vis_types/timeseries/public/application/components/vis_types/markdown/vis.js
+++ b/src/platform/plugins/shared/vis_types/timeseries/public/application/components/vis_types/markdown/vis.js
@@ -8,7 +8,7 @@
  */
 
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { get } from 'lodash';
 import { ClassNames } from '@emotion/react';
@@ -37,6 +37,11 @@ function MarkdownVisualization(props) {
   const panelBackgroundColor = model.background_color || backgroundColor;
   const style = { backgroundColor: panelBackgroundColor };
 
+  const isReversed = useMemo(
+    () => isBackgroundInverted(panelBackgroundColor),
+    [panelBackgroundColor]
+  );
+
   let markdown;
 
   if (model.markdown) {
@@ -49,15 +54,10 @@ function MarkdownVisualization(props) {
       }
     );
 
-    const markdownClasses = classNames('kbnMarkdown__body', {
-      'kbnMarkdown__body--reversed': isBackgroundInverted(panelBackgroundColor),
-    });
-
     const contentClasses = classNames(
       'tvbMarkdown__content',
       `tvbMarkdown__content--${model.markdown_vertical_align}`,
-      { 'tvbMarkdown__content-isScrolling': model.markdown_scrollbars },
-      markdownClasses
+      { 'tvbMarkdown__content-isScrolling': model.markdown_scrollbars }
     );
 
     const markdownError = markdownSource instanceof Error ? markdownSource : null;
@@ -79,6 +79,7 @@ function MarkdownVisualization(props) {
               <div>
                 {!markdownError && (
                   <Markdown
+                    isReversed={isReversed}
                     onRender={initialRender}
                     markdown={markdownSource}
                     openLinksInNewTab={model.markdown_openLinksInNewTab}


Reviews:
user: login: paulinashakirova
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-03T10:13:59Z
user: login: paulinashakirova
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-03T13:40:53Z
user: login: paulinashakirova
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-03T14:21:54Z
user: login: nickofthyme
body: Vis changes LGTM
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-03T20:43:29Z
user: login: eokoneyo
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-04T08:39:50Z
user: login: paulinashakirova
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-04T09:00:36Z
user: login: eokoneyo
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-04T09:08:55Z
user: login: eokoneyo
body: Thanks for making these changes!
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-04T10:44:29Z
user: login: ryankeairns
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-07T14:51:56Z

Review comments:
diff_hunk: @@ -0,0 +1,271 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { css } from '@emotion/react';
+import { useEuiTheme } from '@elastic/eui';
+
+export const markdownStyles = () => {
+  const { euiTheme } = useEuiTheme();
+  // Base font size
+  const kbnDefaultFontSize = 14;
+  // Function to convert px to em
+  const canvasToEm = (size: number): string => `${size / kbnDefaultFontSize}em`;
+  // Font size variables
+  const kbnMarkdownFontSizeS = canvasToEm(12);
+  const kbnMarkdownFontSize = canvasToEm(14);
+  const kbnMarkdownFontSizeL = canvasToEm(20);
+  const kbnMarkdownFontSizeXL = canvasToEm(28);
+  const kbnMarkdownFontSizeXXL = canvasToEm(36);
+  // Spacing variables
+  const kbnMarkdownSizeL = canvasToEm(24);
+  const kbnMarkdownSize = canvasToEm(16);
+  const kbnMarkdownSizeS = canvasToEm(12);
+  const kbnMarkdownSizeXS = canvasToEm(8);
+  const kbnMarkdownSizeXXS = canvasToEm(4);
+  // Grayscale variables
+  const kbnMarkdownAlphaLightestShade = `rgba(${euiTheme.colors.fullShade}, .05)`;
+  const kbnMarkdownAlphaLightShade = `rgba(${euiTheme.colors.fullShade}, .15)`;
+  // Reverse grayscale for opposite of theme
+  const kbnMarkdownAlphaLightestShadeReversed = `rgba(${euiTheme.colors.emptyShade}, .05)`;
+  const kbnMarkdownAlphaLightShadeReversed = `rgba(${euiTheme.colors.emptyShade}, .15)`;
path: src/platform/plugins/shared/kibana_react/public/markdown/markdownStyles.ts
user: login: paulinashakirova
body: using "fullShade" "emptyShade" is said to be deprecated, but since it is a legacy code which was reverted for a specific purpose I decided to go with these variables to stick closer to the original.
created_at: 2025-04-03T10:13:59Z
author_association: CONTRIBUTOR
diff_hunk: @@ -79,6 +83,7 @@ function MarkdownVisualization(props) {
               <div>
                 {!markdownError && (
                   <Markdown
+                    isReversed={isReversed}
path: src/platform/plugins/shared/vis_types/timeseries/public/application/components/vis_types/markdown/vis.js
user: login: paulinashakirova
body: I need to pass this as a prop here, because "markdownStyles" gets appended to a grandchild of the node that adds `'kbnMarkdown__body--reversed': isReversed,` class.
Previously with SCSS file it worked, but not with emotion.
created_at: 2025-04-03T13:40:53Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,328 +0,0 @@
-// Default styles for Markdown element
-//
-// 1. Links
-// 2. Headings
-// 3. Images
-// 4. Blockquotes
-// 5. Horizontal rules
-// 6. Lists
-// 7. Tables
-// 8. Code blocks
-
-// Functions
-// Note: The inlined base font size is set in common/functions/font.js. It should match $kbnMdFontSize.
-$kbnDefaultFontSize: 14px;
-
-@function canvasToEm($size) {
-  @return #{calc($size / $kbnDefaultFontSize)}em;
-}
-
-.kbnMarkdown__body {
-  // Font size variables
-  $kbnMarkdownFontSizeS: canvasToEm(12px);
-  $kbnMarkdownFontSize: canvasToEm(14px);
-  $kbnMarkdownFontSizeL: canvasToEm(20px);
-  $kbnMarkdownFontSizeXL: canvasToEm(28px);
-  $kbnMarkdownFontSizeXXL: canvasToEm(36px);
-
-  // Spacing variables
-  $kbnMarkdownSizeL: canvasToEm(24px);
-  $kbnMarkdownSize: canvasToEm(16px);
-  $kbnMarkdownSizeS: canvasToEm(12px);
-  $kbnMarkdownSizeXS: canvasToEm(8px);
-  $kbnMarkdownSizeXXS: canvasToEm(4px);
-
-  // Grayscale variables
-  $kbnMarkdownAlphaLightestShade: rgba($euiColorFullShade, .05);
-  $kbnMarkdownAlphaLightShade: rgba($euiColorFullShade, .15);
-  $kbnMarkdownAlphaDarkShade: rgba($euiColorFullShade, .65);
-
-  // Reverse grayscale for opposite of theme
-  $kbnMarkdownAlphaLightestShadeReversed: rgba($euiColorEmptyShade, .05);
-  $kbnMarkdownAlphaLightShadeReversed: rgba($euiColorEmptyShade, .15);
-  $kbnMarkdownAlphaDarkShadeReversed: rgba($euiColorEmptyShade, .65);
-
-  &--reversed {
-    color: $euiColorLightestShade;
-  }
-
-  > *:first-child {
-    margin-top: 0 !important;
-  }
-
-  > *:last-child {
-    margin-bottom: 0 !important;
-  }
-
-  p,
-  blockquote,
-  ul,
-  ol,
-  dl,
-  table,
-  pre {
-    margin-top: 0;
-    margin-bottom: $kbnMarkdownSize;
-    line-height: 1.5em;
-  }
-
-  strong {
-    font-weight: 600;
-  }
-
-  // 1. Links
-  a {
-    color: inherit;
-    text-decoration: underline;
-  }
-
-  a:hover {
-    text-decoration: underline dotted;
-  }
-
-  a:active,
-  a:hover {
-    outline-width: 0;
-  }
-
-  a:not([href]) {
-    color: inherit;
-    text-decoration: none;
-  }
-
-  // 2. Headings
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin-top: 0;
-    margin-bottom: $kbnMarkdownSizeXS;
-  }
-
-  h1 {
-    font-size: $kbnMarkdownFontSizeXXL;
-    line-height: 1.333333em;
-    font-weight: 300;
-  }
-
-  h2 {
-    font-size: $kbnMarkdownFontSizeXL;
-    line-height: 1.428571em;
-    font-weight: 300;
-  }
-
-  h3 {
-    font-size: $kbnMarkdownFontSizeL;
-    line-height: 1.6em;
-    font-weight: 600;
-  }
-
-  h4 {
-    font-size: $kbnMarkdownSize;
-    line-height: 1.5em;
-    font-weight: 600;
-  }
-
-  h5 {
-    font-size: $kbnMarkdownFontSize;
-    line-height: 1.142857em;
-    font-weight: 700;
-  }
-
-  h6 {
-    font-size: $kbnMarkdownFontSizeS;
-    line-height: 1.333333em;
-    font-weight: 700;
-    text-transform: uppercase;
-  }
-
-  // 3. Images
-  img {
-    max-width: 100%;
-    box-sizing: content-box;
-    border-style: none;
-    pointer-events: auto;
-  }
-
-  // 4. Blockquotes
-  blockquote {
-    padding: 0 1em;
-    border-left: $kbnMarkdownSizeXXS solid $kbnMarkdownAlphaLightShade;
-  }
-  &--reversed blockquote {
-    border-left-color: $kbnMarkdownAlphaLightShadeReversed;
-  }
-
-  // 5. Horizontal rules
-  hr {
-    overflow: hidden;
-    background: transparent;
-    height: 2px;
-    padding: 0;
-    margin: $kbnMarkdownSizeL 0;
-    background-color: $kbnMarkdownAlphaLightShade;
-    border: 0;
-  }
-  &--reversed hr {
-    background-color: $kbnMarkdownAlphaLightShadeReversed;
-  }
-
-  hr::before {
-    display: table;
-    content: '';
-  }
-
-  hr::after {
-    display: table;
-    clear: both;
-    content: '';
-  }
-
-  // 6. Lists
-  ul,
-  ol {
-    padding-left: $kbnMarkdownSizeL;
-    margin-top: 0;
-    margin-bottom: $kbnMarkdownSize;
-  }
-
-  ul {
-    list-style-type: disc;
-  }
-  ol {
-    list-style-type: decimal;
-  }
-
-  ul ul {
-    list-style-type: circle;
-  }
-
-  ol ol,
-  ul ol {
-    list-style-type: lower-roman;
-  }
-
-  ul ul ol,
-  ul ol ol,
-  ol ul ol,
-  ol ol ol {
-    list-style-type: lower-alpha;
-  }
-
-  dd {
-    margin-left: 0;
-  }
-
-  ul ul,
-  ul ol,
-  ol ol,
-  ol ul {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
-  li > p {
-    margin-bottom: $kbnMarkdownSizeXS;
-  }
-
-  li + li {
-    margin-top: $kbnMarkdownSizeXXS;
-  }
-
-  // 7. Tables
-  table {
-    display: block;
-    width: 100%;
-    overflow: auto;
-    border-left: 1px solid $kbnMarkdownAlphaLightShade;
-    border-spacing: 0;
-    border-collapse: collapse;
-  }
-  &--reversed table {
-    border-left-color: $kbnMarkdownAlphaLightShadeReversed;
-  }
-
-  td,
-  th {
-    padding: 0;
-  }
path: src/platform/plugins/shared/kibana_react/public/markdown/_markdown.scss
user: login: paulinashakirova
body: This was showing in dev tools that 
> The display: table-header-group property prevents padding from having an effect.
Try setting display to something other than table-header-group.

So it had no effect anyways.
created_at: 2025-04-03T14:21:54Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,288 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { css } from '@emotion/react';
+import { transparentize, useEuiTheme } from '@elastic/eui';
+
+// Default styles for Markdown element
+//
+// 1. Links
+// 2. Headings
+// 3. Images
+// 4. Blockquotes
+// 5. Horizontal rules
+// 6. Lists
+// 7. Tables
+// 8. Code blocks
+
+export const markdownStyles = (isReversed: boolean) => {
+  const { euiTheme } = useEuiTheme();
path: src/platform/plugins/shared/kibana_react/public/markdown/markdownStyles.ts
user: login: eokoneyo
body: I know it seems this works, but could we instead pass the value of `euiTheme` from an invocation of `useEuiTheme` from a component.
created_at: 2025-04-04T08:03:50Z
author_association: CONTRIBUTOR
diff_hunk: @@ -48,9 +53,8 @@ function MarkdownVisualization(props) {
         ...variables,
       }
     );
-
     const markdownClasses = classNames('kbnMarkdown__body', {
-      'kbnMarkdown__body--reversed': isBackgroundInverted(panelBackgroundColor),
+      'kbnMarkdown__body--reversed': isReversed,
     });
path: src/platform/plugins/shared/vis_types/timeseries/public/application/components/vis_types/markdown/vis.js
user: login: eokoneyo
body: the `markdownClasses` declaration can be moved into the markdown component; we already set the `kbnMarkdown__body` class within our component, also since we already receive the `isReversed` prop within the component, we can also set the `kbnMarkdown__body--reversed` class in there, what's more I don't think we actually need to explicitly pass it since our new styles actually have no reference to it, however we should confirm that this classname is not being arbitrarily target from elsewhere.
created_at: 2025-04-04T08:39:23Z
author_association: CONTRIBUTOR
diff_hunk: @@ -48,9 +53,8 @@ function MarkdownVisualization(props) {
         ...variables,
       }
     );
-
     const markdownClasses = classNames('kbnMarkdown__body', {
-      'kbnMarkdown__body--reversed': isBackgroundInverted(panelBackgroundColor),
+      'kbnMarkdown__body--reversed': isReversed,
     });
path: src/platform/plugins/shared/vis_types/timeseries/public/application/components/vis_types/markdown/vis.js
user: login: paulinashakirova
body: > our new styles actually have no reference to it,

Yes, and this was my research as well, but then...

> this classname is not being arbitrarily target from elsewhere.

I got worried that maybe this is something that is custom targeted from outside.

My research showed that it was used before the migration along with other visualizations, but when they were migrated - this was removed.

Since it is the legacy code - I didn't feel confident removing because of the reason it was brought back in the first place...
@eokoneyo Is there a way to check for custom implementation from outside?
created_at: 2025-04-04T09:00:36Z
author_association: CONTRIBUTOR
diff_hunk: @@ -48,9 +53,8 @@ function MarkdownVisualization(props) {
         ...variables,
       }
     );
-
     const markdownClasses = classNames('kbnMarkdown__body', {
-      'kbnMarkdown__body--reversed': isBackgroundInverted(panelBackgroundColor),
+      'kbnMarkdown__body--reversed': isReversed,
     });
path: src/platform/plugins/shared/vis_types/timeseries/public/application/components/vis_types/markdown/vis.js
user: login: eokoneyo
body: Since we aren't too sure, I suppose we can keep it around, however I think we can should contain the application of the classname within the markdown component.
created_at: 2025-04-04T09:08:55Z
author_association: CONTRIBUTOR

PR comments:
user: login: elasticmachine
created_at: 2025-03-31T11:31:12Z
body: Pinging @elastic/appex-sharedux (Team:SharedUX)
author_association: CONTRIBUTOR
user: login: elasticmachine
created_at: 2025-04-07T11:51:44Z
body: ## :green_heart: Build Succeeded
* [Buildkite Build](https://buildkite.com/elastic/kibana-pull-request/builds/290648)
* Commit: 3ac6cb1270b4e4374faeb2a6435934da3545165c

### Metrics [[docs](https://www.elastic.co/guide/en/kibana/master/ci-metrics.html)]
#### Module Count
> Fewer modules leads to a faster build time


| id | [before](https://github.com/elastic/kibana/commit/2524d0d0e8b86b8423ace39d5a5d2dc87a4425a3) | [after](https://github.com/elastic/kibana/commit/3ac6cb1270b4e4374faeb2a6435934da3545165c) | diff |
| --- | --- | --- | --- |
| `kibanaReact` | 247 | 230 | -17 |

#### Async chunks
> Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app


| id | [before](https://github.com/elastic/kibana/commit/2524d0d0e8b86b8423ace39d5a5d2dc87a4425a3) | [after](https://github.com/elastic/kibana/commit/3ac6cb1270b4e4374faeb2a6435934da3545165c) | diff |
| --- | --- | --- | --- |
| `kibanaReact` | 194.0KB | 187.5KB | -6.5KB |
| `visTypeTimeseries` | 484.5KB | 484.5KB | -19.0B |
| total |  |  | -6.6KB |

#### Page load bundle
> Size of the bundles that are downloaded on every page load. Target size is below 100kb


| id | [before](https://github.com/elastic/kibana/commit/2524d0d0e8b86b8423ace39d5a5d2dc87a4425a3) | [after](https://github.com/elastic/kibana/commit/3ac6cb1270b4e4374faeb2a6435934da3545165c) | diff |
| --- | --- | --- | --- |
| `kibanaReact` | 28.6KB | 23.8KB | -4.8KB |



### History
* :green_heart: [Build #290208](https://buildkite.com/elastic/kibana-pull-request/builds/290208) succeeded fa6a44f08177fa1b12b8daea4ff44aef1757eb1b
* :green_heart: [Build #290006](https://buildkite.com/elastic/kibana-pull-request/builds/290006) succeeded 79c3ad82cc3908c41e68df4c17ea1376ac06c27a
* :broken_heart: [Build #289943](https://buildkite.com/elastic/kibana-pull-request/builds/289943) failed 56ad64d929f5514d36ded0f6821976cc3e527afb
* :yellow_heart: [Build #289623](https://buildkite.com/elastic/kibana-pull-request/builds/289623) was flaky 7063d076078832160850f1a8dccbe590890aebfb
* :broken_heart: [Build #288509](https://buildkite.com/elastic/kibana-pull-request/builds/288509) failed 4eb8c44ff523da070012b14c71a5934189a0fcfb

cc @paulinashakirova

<!--buildkite-pr-comment-kibana-pull-request
{"builds":[{"buildStatus":{"state":"passed","success":true,"hasRetries":true,"hasNonPreemptionRetries":false},"url":"https://buildkite.com/elastic/kibana-pull-request/builds/290648","number":290648,"commit":"3ac6cb1270b4e4374faeb2a6435934da3545165c"},{"buildStatus":{"state":"passed","success":true,"hasRetries":true,"hasNonPreemptionRetries":false},"url":"https://buildkite.com/elastic/kibana-pull-request/builds/290208","number":290208,"commit":"fa6a44f08177fa1b12b8daea4ff44aef1757eb1b"},{"buildStatus":{"state":"passed","success":true,"hasRetries":true,"hasNonPreemptionRetries":false},"url":"https://buildkite.com/elastic/kibana-pull-request/builds/290006","number":290006,"commit":"79c3ad82cc3908c41e68df4c17ea1376ac06c27a"},{"buildStatus":{"state":"failed","success":false,"hasRetries":false,"hasNonPreemptionRetries":false},"url":"https://buildkite.com/elastic/kibana-pull-request/builds/289943","number":289943,"commit":"56ad64d929f5514d36ded0f6821976cc3e527afb"},{"buildStatus":{"state":"passed","success":true,"hasRetries":true,"hasNonPreemptionRetries":true},"url":"https://buildkite.com/elastic/kibana-pull-request/builds/289623","number":289623,"commit":"7063d076078832160850f1a8dccbe590890aebfb"},{"buildStatus":{"state":"failed","success":false,"hasRetries":true,"hasNonPreemptionRetries":true},"url":"https://buildkite.com/elastic/kibana-pull-request/builds/288509","number":288509,"commit":"4eb8c44ff523da070012b14c71a5934189a0fcfb"}],"number":290648}
buildkite-pr-comment-->
author_association: CONTRIBUTOR