Revert "[index management] Borealis theme improvements" (elastic#204400)

Reverts elastic#204161
MichaelMarcialis · Dec 16, 2024 · 67d7547 · 67d7547
1 parent 6f38a4c
commit 67d7547
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 48 deletions.
diff --git a/...plication/sections/home/index_list/details_page/details_page_overview/aliases_details.tsx b/...plication/sections/home/index_list/details_page/details_page_overview/aliases_details.tsx
@@ -7,6 +7,7 @@
 
 import React, { FunctionComponent, useState } from 'react';
 import { css } from '@emotion/react';
+import { euiThemeVars } from '@kbn/ui-theme';
 import { i18n } from '@kbn/i18n';
 import {
   EuiBadge,
@@ -22,7 +23,6 @@ import {
   EuiText,
   EuiTextColor,
   EuiTitle,
-  useEuiTheme,
 } from '@elastic/eui';
 
 import { Index } from '../../../../../../../common';
@@ -31,7 +31,6 @@ import { OverviewCard } from './overview_card';
 const MAX_VISIBLE_ALIASES = 3;
 
 export const AliasesDetails: FunctionComponent<{ aliases: Index['aliases'] }> = ({ aliases }) => {
-  const { euiTheme } = useEuiTheme();
   const [isShowingAliases, setIsShowingAliases] = useState<boolean>(false);
   if (!Array.isArray(aliases)) {
     return null;
@@ -59,7 +58,7 @@ export const AliasesDetails: FunctionComponent<{ aliases: Index['aliases'] }> =
               <EuiFlexItem grow={false}>
                 <EuiText
                   css={css`
-                    font-size: ${euiTheme.font.scale.l};
+                    font-size: ${euiThemeVars.euiFontSizeL};
                   `}
                 >
                   {aliases.length}

diff --git a/...ation/sections/home/index_list/details_page/details_page_overview/data_stream_details.tsx b/...ation/sections/home/index_list/details_page/details_page_overview/data_stream_details.tsx
@@ -7,16 +7,9 @@
 
 import React, { FunctionComponent, ReactNode } from 'react';
 import { i18n } from '@kbn/i18n';
-import {
-  EuiButton,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiText,
-  EuiTextColor,
-  useEuiTheme,
-} from '@elastic/eui';
+import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, EuiTextColor } from '@elastic/eui';
 import { css } from '@emotion/react';
+import { euiThemeVars } from '@kbn/ui-theme';
 import { SectionLoading } from '@kbn/es-ui-shared-plugin/public';
 
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -29,7 +22,6 @@ import { OverviewCard } from './overview_card';
 export const DataStreamDetails: FunctionComponent<{ dataStreamName: string }> = ({
   dataStreamName,
 }) => {
-  const { euiTheme } = useEuiTheme();
   const { error, data: dataStream, isLoading, resendRequest } = useLoadDataStream(dataStreamName);
   const {
     core: { getUrlForApp },
@@ -40,7 +32,7 @@ export const DataStreamDetails: FunctionComponent<{ dataStreamName: string }> =
       <EuiFlexItem grow={false}>
         <EuiText
           css={css`
-            font-size: ${euiTheme.font.scale.l};
+            font-size: ${euiThemeVars.euiFontSizeL};
           `}
         >
           {dataStream?.generation}

diff --git a/...application/sections/home/index_list/details_page/details_page_overview/overview_card.tsx b/...application/sections/home/index_list/details_page/details_page_overview/overview_card.tsx
@@ -7,14 +7,8 @@
 
 import React, { FunctionComponent, ReactNode } from 'react';
 import { css } from '@emotion/react';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-  EuiSplitPanel,
-  EuiTitle,
-  useEuiTheme,
-} from '@elastic/eui';
+import { euiThemeVars } from '@kbn/ui-theme';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiSplitPanel, EuiTitle } from '@elastic/eui';
 
 interface Props {
   title: string;
@@ -35,7 +29,6 @@ export const OverviewCard: FunctionComponent<Props> = ({
   footer: { left: footerLeft, right: footerRight } = {},
   'data-test-subj': dataTestSubj,
 }) => {
-  const { euiTheme } = useEuiTheme();
   return (
     <EuiFlexItem>
       <EuiSplitPanel.Outer grow hasBorder={true} data-test-subj={dataTestSubj}>
@@ -50,7 +43,7 @@ export const OverviewCard: FunctionComponent<Props> = ({
             wrap={true}
             alignItems="center"
             css={css`
-              min-height: ${euiTheme.size.xl};
+              min-height: ${euiThemeVars.euiButtonHeightSmall};
             `}
           >
             <EuiFlexItem grow={false}>{contentLeft}</EuiFlexItem>

diff --git a/...on/sections/home/index_list/details_page/details_page_overview/size_doc_count_details.tsx b/...on/sections/home/index_list/details_page/details_page_overview/size_doc_count_details.tsx
@@ -7,15 +7,9 @@
 
 import React, { FunctionComponent } from 'react';
 import { css } from '@emotion/react';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiText,
-  EuiTextColor,
-  useEuiTheme,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, EuiTextColor } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { euiThemeVars } from '@kbn/ui-theme';
 import type { Index } from '../../../../../../../common';
 import { useAppContext } from '../../../../../app_context';
 import { OverviewCard } from './overview_card';
@@ -24,7 +18,6 @@ export const SizeDocCountDetails: FunctionComponent<{
   size: Index['size'];
   documents: Index['documents'];
 }> = ({ size, documents }) => {
-  const { euiTheme } = useEuiTheme();
   const { config } = useAppContext();
   if (!config.enableSizeAndDocCount) {
     return null;
@@ -41,7 +34,7 @@ export const SizeDocCountDetails: FunctionComponent<{
             <EuiFlexItem grow={false}>
               <EuiText
                 css={css`
-                  font-size: ${euiTheme.font.scale.l};
+                  font-size: ${euiThemeVars.euiFontSizeL};
                 `}
               >
                 {size}

diff --git a/...pplication/sections/home/index_list/details_page/details_page_overview/status_details.tsx b/...pplication/sections/home/index_list/details_page/details_page_overview/status_details.tsx
@@ -15,9 +15,9 @@ import {
   EuiText,
   EuiTextColor,
   EuiBadgeProps,
-  useEuiTheme,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
+import { euiThemeVars } from '@kbn/ui-theme';
 
 import { useAppContext } from '../../../../../app_context';
 import { Index } from '../../../../../../../common';
@@ -54,7 +54,6 @@ export const StatusDetails: FunctionComponent<{
   status: Index['status'];
   health: Index['health'];
 }> = ({ documents, documentsDeleted, status, health }) => {
-  const { euiTheme } = useEuiTheme();
   const { config } = useAppContext();
   if (!config.enableIndexStats || !health) {
     return null;
@@ -73,7 +72,7 @@ export const StatusDetails: FunctionComponent<{
           <EuiText
             color={status === 'close' ? 'danger' : 'success'}
             css={css`
-              font-size: ${euiTheme.font.scale.l};
+              font-size: ${euiThemeVars.euiFontSizeL};
             `}
           >
             {status === 'close'

diff --git a/...plication/sections/home/index_list/details_page/details_page_overview/storage_details.tsx b/...plication/sections/home/index_list/details_page/details_page_overview/storage_details.tsx
@@ -8,14 +8,8 @@
 import React, { FunctionComponent } from 'react';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiText,
-  EuiTextColor,
-  useEuiTheme,
-} from '@elastic/eui';
+import { euiThemeVars } from '@kbn/ui-theme';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, EuiTextColor } from '@elastic/eui';
 
 import { useAppContext } from '../../../../../app_context';
 import { Index } from '../../../../../../../common';
@@ -27,7 +21,6 @@ export const StorageDetails: FunctionComponent<{
   primary: Index['primary'];
   replica: Index['replica'];
 }> = ({ primarySize, size, primary, replica }) => {
-  const { euiTheme } = useEuiTheme();
   const { config } = useAppContext();
   if (!config.enableIndexStats) {
     return null;
@@ -44,7 +37,7 @@ export const StorageDetails: FunctionComponent<{
             <EuiFlexItem grow={false}>
               <EuiText
                 css={css`
-                  font-size: ${euiTheme.font.scale.l};
+                  font-size: ${euiThemeVars.euiFontSizeL};
                 `}
               >
                 {primarySize}
@@ -64,7 +57,7 @@ export const StorageDetails: FunctionComponent<{
             <EuiFlexItem grow={false}>
               <EuiText
                 css={css`
-                  font-size: ${euiTheme.font.scale.l};
+                  font-size: ${euiThemeVars.euiFontSizeL};
                 `}
               >
                 {size}

diff --git a/x-pack/plugins/index_management/tsconfig.json b/x-pack/plugins/index_management/tsconfig.json
@@ -40,6 +40,7 @@
     "@kbn/core-http-browser",
     "@kbn/search-api-panels",
     "@kbn/cloud-plugin",
+    "@kbn/ui-theme",
     "@kbn/code-editor",
     "@kbn/monaco",
     "@kbn/console-plugin",