[SharedUX] EUI visual refresh for SharedUX

elastic · Dec 3, 2024 · 9c6ba0d · 9c6ba0d
1 parent 6c0cf0e
commit 9c6ba0d
Show file tree

Hide file tree

Showing 12 changed files with 109 additions and 70 deletions.
diff --git a/packages/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.styles.ts b/packages/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.styles.ts
@@ -24,9 +24,9 @@ export const ToolbarButtonStyles = ({ euiTheme }: UseEuiTheme) => {
       borderColor: euiTheme.border.color,
     },
     emptyButton: {
-      backgroundColor: euiTheme.colors.emptyShade,
+      backgroundColor: euiTheme.colors.backgroundBasePlain,
       border: `${euiTheme.border.thin}`,
-      color: `${euiTheme.colors.text}`,
+      color: `${euiTheme.colors.textParagraph}`,
     },
     buttonPositions: {
       left: {

diff --git a/packages/shared-ux/chrome/navigation/src/ui/components/panel/label_badge.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/panel/label_badge.tsx
@@ -25,14 +25,13 @@ export const LabelBadge = ({
   className?: string;
 }) => {
   const { euiTheme } = useEuiTheme();
-
   return (
     <EuiBetaBadge
       label={text}
       size="s"
       css={css`
         margin-left: ${euiTheme.size.s};
-        color: ${euiTheme.colors.text};
+        color: ${euiTheme.colors.textParagraph};
         vertical-align: middle;
         margin-bottom: ${euiTheme.size.xxs};
       `}

diff --git a/packages/shared-ux/code_editor/impl/placeholder_widget.ts b/packages/shared-ux/code_editor/impl/placeholder_widget.ts
@@ -31,7 +31,7 @@ export class PlaceholderWidget implements monaco.editor.IContentWidget {
       const domNode = document.createElement('div');
       domNode.innerText = this.placeholderText;
       domNode.className = css`
-        color: ${this.euiTheme.colors.subduedText};
+        color: ${this.euiTheme.colors.textSubdued};
         width: max-content;
         pointer-events: none;
       `;

diff --git a/packages/shared-ux/file/file_upload/impl/src/file_upload.component.tsx b/packages/shared-ux/file/file_upload/impl/src/file_upload.component.tsx
@@ -16,12 +16,12 @@ import {
   EuiFilePicker,
   useEuiTheme,
   useGeneratedHtmlId,
+  mathWithUnits,
 } from '@elastic/eui';
 import type {
   EuiFilePickerClass,
   EuiFilePickerProps,
 } from '@elastic/eui/src/components/form/file_picker/file_picker';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { useBehaviorSubject } from '@kbn/shared-ux-file-util';
 import { css } from '@emotion/react';
 import useObservable from 'react-use/lib/useObservable';
@@ -41,8 +41,6 @@ export interface Props {
   className?: string;
 }
 
-const { euiFormMaxWidth, euiButtonHeightSmall } = euiThemeVars;
-
 const styles = {
   horizontalContainer: css`
     display: flex;
@@ -79,12 +77,14 @@ export const FileUpload = React.forwardRef<EuiFilePickerClass, Props>(
     const id = useGeneratedHtmlId({ prefix: 'filesFileUpload' });
     const errorId = `${id}_error`;
 
+    const formMaxWidth = mathWithUnits(euiTheme.size.base, (x) => x * 25);
+
     return (
       <div
         data-test-subj="filesFileUpload"
         css={[
           css`
-            max-width: ${fullWidth ? '100%' : euiFormMaxWidth};
+            max-width: ${fullWidth ? '100%' : formMaxWidth};
           `,
           fullWidth ? styles.fullWidth : undefined,
           compressed ? styles.horizontalContainer : undefined,
@@ -143,7 +143,7 @@ export const FileUpload = React.forwardRef<EuiFilePickerClass, Props>(
                 css={css`
                   display: flex;
                   align-items: center;
-                  min-height: ${euiButtonHeightSmall};
+                  min-height: ${euiTheme.size.xl};
                 `}
                 size="s"
                 color="danger"

diff --git a/src/plugins/guided_onboarding/public/components/guide_panel_step.styles.ts b/src/plugins/guided_onboarding/public/components/guide_panel_step.styles.ts
@@ -17,17 +17,23 @@ export const getGuidePanelStepStyles = (euiTheme: EuiThemeComputed, stepStatus:
     height: 24px;
     border-radius: 50%;
     border: 2px solid
-      ${stepStatus === 'inactive' ? euiTheme.colors.lightShade : euiTheme.colors.success};
+      ${stepStatus === 'inactive'
+        ? euiTheme.colors.borderBasePlain
+        : euiTheme.colors.accentSecondary};
     font-weight: ${euiTheme.font.weight.medium};
     text-align: center;
     line-height: 1.4;
-    color: ${stepStatus === 'inactive' ? euiTheme.colors.subduedText : euiTheme.colors.text};
+    color: ${stepStatus === 'inactive'
+      ? euiTheme.colors.textSubdued
+      : euiTheme.colors.textParagraph};
   `,
   stepTitle: css`
     font-weight: ${euiTheme.font.weight.semiBold};
-    color: ${stepStatus === 'inactive' ? euiTheme.colors.subduedText : euiTheme.colors.text};
+    color: ${stepStatus === 'inactive'
+      ? euiTheme.colors.textSubdued
+      : euiTheme.colors.textParagraph};
     .euiAccordion-isOpen & {
-      color: ${euiTheme.colors.title};
+      color: ${euiTheme.colors.textHeading};
     }
   `,
   description: css`

diff --git a/src/plugins/home/public/application/components/tutorial/instruction_set.js b/src/plugins/home/public/application/components/tutorial/instruction_set.js
@@ -28,7 +28,6 @@ import {
 import * as StatusCheckStates from './status_check_states';
 
 import { injectI18n, FormattedMessage } from '@kbn/i18n-react';
-import { euiThemeVars } from '@kbn/ui-theme';
 
 class InstructionSetUi extends React.Component {
   constructor(props) {
@@ -278,7 +277,9 @@ class InstructionSetUi extends React.Component {
     return (
       <EuiSplitPanel.Outer>
         <EuiSplitPanel.Inner color="subdued" paddingSize="none">
-          <EuiTabs css={{ padding: `0 ${euiThemeVars.euiSizeL}` }}>{this.renderTabs()}</EuiTabs>
+          <EuiTabs css={({ euiTheme }) => ({ padding: `0 ${euiTheme.size.l}` })}>
+            {this.renderTabs()}
+          </EuiTabs>
         </EuiSplitPanel.Inner>
         <EuiSplitPanel.Inner paddingSize="l">
           {this.renderHeader()}

diff --git a/src/plugins/navigation/public/side_navigation/index.tsx b/src/plugins/navigation/public/side_navigation/index.tsx
@@ -8,34 +8,34 @@
  */
 
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import React, { Suspense, type FC } from 'react';
-import { EuiSkeletonRectangle } from '@elastic/eui';
+import { EuiSkeletonRectangle, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import type { Props as NavigationProps } from './side_navigation';
 
 const SideNavComponentLazy = React.lazy(() => import('./side_navigation'));
 
-export const SideNavComponent: FC<NavigationProps> = (props) => (
-  <Suspense
-    fallback={
-      <EuiSkeletonRectangle
-        css={css`
-          margin: ${euiThemeVars.euiSize};
-        `}
-        width={16}
-        height={16}
-        borderRadius="s"
-        contentAriaLabel={i18n.translate(
-          'navigation.sideNavigation.loadingSolutionNavigationLabel',
-          {
-            defaultMessage: 'Loading solution navigation',
-          }
-        )}
-      />
-    }
-  >
-    <SideNavComponentLazy {...props} />
-  </Suspense>
-);
+export const SideNavComponent: FC<NavigationProps> = (props) => {
+  const { euiTheme } = useEuiTheme();
+  return (
+    <Suspense
+      fallback={
+        <EuiSkeletonRectangle
+          css={css`
+            margin: ${euiTheme.size.base};
+          `}
+          width={16}
+          height={16}
+          borderRadius="s"
+          contentAriaLabel={i18n.translate(
+            'navigation.sideNavigation.loadingSolutionNavigationLabel',
+            { defaultMessage: 'Loading solution navigation' }
+          )}
+        />
+      }
+    >
+      <SideNavComponentLazy {...props} />
+    </Suspense>
+  );
+};
diff --git a/src/plugins/saved_objects/emotion.d.ts b/src/plugins/saved_objects/emotion.d.ts
@@ -0,0 +1,16 @@
+/*
+ * 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 '@emotion/react';
+import type { UseEuiTheme } from '@elastic/eui';
+
+declare module '@emotion/react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends UseEuiTheme {}
+}
diff --git a/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.tsx b/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.tsx
@@ -32,7 +32,6 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import React from 'react';
 import { EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { euiThemeVars } from '@kbn/ui-theme';
 
 export interface OnSaveProps {
   newTitle: string;
@@ -405,7 +404,10 @@ export class SavedObjectSaveModal extends React.Component<Props, SaveModalState>
           />
         </EuiFlexItem>
         {this.props.mustCopyOnSaveMessage && (
-          <EuiFlexItem css={{ marginLeft: `-${euiThemeVars.euiSize}` }} grow={false}>
+          <EuiFlexItem
+            css={({ euiTheme }) => ({ marginLeft: `-${euiTheme.size.base}` })}
+            grow={false}
+          >
             <EuiIconTip type="iInCircle" content={this.props.mustCopyOnSaveMessage} />
           </EuiFlexItem>
         )}

diff --git a/src/plugins/saved_objects/tsconfig.json b/src/plugins/saved_objects/tsconfig.json
@@ -1,9 +1,15 @@
 {
   "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "target/types",
+    "outDir": "target/types"
   },
-  "include": ["common/**/*", "public/**/*", "server/**/*"],
+  "include": [
+    "common/**/*",
+    "public/**/*",
+    "server/**/*",
+    // Emotion theme typing
+    "./emotion.d.ts"
+  ],
   "kbn_references": [
     "@kbn/core",
     "@kbn/data-plugin",
@@ -12,9 +18,9 @@
     "@kbn/i18n-react",
     "@kbn/ui-theme",
     "@kbn/react-kibana-mount",
-    "@kbn/test-jest-helpers",
+    "@kbn/test-jest-helpers"
   ],
   "exclude": [
-    "target/**/*",
+    "target/**/*"
   ]
 }
diff --git a/x-pack/plugins/saved_objects_tagging/public/management/components/table.tsx b/x-pack/plugins/saved_objects_tagging/public/management/components/table.tsx
@@ -6,10 +6,16 @@
  */
 
 import React, { FC, ReactNode } from 'react';
-import { EuiInMemoryTable, EuiBasicTableColumn, EuiLink, Query, EuiIconTip } from '@elastic/eui';
+import {
+  EuiInMemoryTable,
+  EuiBasicTableColumn,
+  EuiLink,
+  Query,
+  EuiIconTip,
+  useEuiTheme,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { TagsCapabilities } from '../../../common';
 import type { TagWithRelations } from '../../../common/types';
 import { TagBadge } from '../../components';
@@ -59,6 +65,7 @@ export const TagTable: FC<TagTableProps> = ({
   actionBar,
   actions,
 }) => {
+  const { euiTheme } = useEuiTheme();
   const columns: Array<EuiBasicTableColumn<TagWithRelations>> = [
     {
       field: 'name',
@@ -72,7 +79,7 @@ export const TagTable: FC<TagTableProps> = ({
           <>
             <TagBadge tag={tag} />
             {tag.managed && (
-              <div css={{ marginLeft: euiThemeVars.euiSizeS }}>
+              <div css={{ marginLeft: euiTheme.size.s }}>
                 <EuiIconTip
                   type="lock"
                   content="This tag is managed by Elastic and cannot be deleted, edited, or assigned to objects."

diff --git a/x-pack/plugins/serverless/public/navigation/index.tsx b/x-pack/plugins/serverless/public/navigation/index.tsx
@@ -6,32 +6,34 @@
  */
 
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import React, { Suspense, type FC } from 'react';
-import { EuiSkeletonRectangle } from '@elastic/eui';
+import { EuiSkeletonRectangle, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import type { Props as NavigationProps } from './navigation';
 
 const SideNavComponentLazy = React.lazy(() => import('./navigation'));
 
-export const SideNavComponent: FC<NavigationProps> = (props) => (
-  <Suspense
-    fallback={
-      <EuiSkeletonRectangle
-        css={css`
-          margin: ${euiThemeVars.euiSize};
-        `}
-        width={16}
-        height={16}
-        borderRadius="s"
-        contentAriaLabel={i18n.translate('xpack.serverless.nav.loadingSolutionNavigationLabel', {
-          defaultMessage: 'Loading solution navigation',
-        })}
-      />
-    }
-  >
-    <SideNavComponentLazy {...props} />
-  </Suspense>
-);
+export const SideNavComponent: FC<NavigationProps> = (props) => {
+  const { euiTheme } = useEuiTheme();
+  return (
+    <Suspense
+      fallback={
+        <EuiSkeletonRectangle
+          css={css`
+            margin: ${euiTheme.size.base};
+          `}
+          width={16}
+          height={16}
+          borderRadius="s"
+          contentAriaLabel={i18n.translate('xpack.serverless.nav.loadingSolutionNavigationLabel', {
+            defaultMessage: 'Loading solution navigation',
+          })}
+        />
+      }
+    >
+      <SideNavComponentLazy {...props} />
+    </Suspense>
+  );
+};
 
 export { manageOrgMembersNavCardName, generateManageOrgMembersNavCard } from './nav_cards';