[SharedUX] EUI visual refresh for SharedUX (#202780)

## Summary Part of #200620 1. Remove usage of deprecated color variables 2. Remove usage of `@kbn/ui-theme` 3. A few other changes as requested by @andreadelrio --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
elastic · Dec 12, 2024 · 0a38463 · 0a38463
1 parent 0a7262d
commit 0a38463
Show file tree

Hide file tree

Showing 24 changed files with 115 additions and 94 deletions.
diff --git a/packages/kbn-management/settings/components/form/bottom_bar/bottom_bar.tsx b/packages/kbn-management/settings/components/form/bottom_bar/bottom_bar.tsx
@@ -87,7 +87,7 @@ export const BottomBar = ({
             <EuiButton
               css={cssFormButton}
               disabled={hasInvalidChanges}
-              color="success"
+              color="primary"
               fill
               size="s"
               iconType="check"

diff --git a/packages/shared-ux/button_toolbar/kibana.jsonc b/packages/shared-ux/button_toolbar/kibana.jsonc
@@ -1,9 +1,9 @@
 {
-  "type": "shared-common",
+  "type": "shared-browser",
   "id": "@kbn/shared-ux-button-toolbar",
   "owner": [
     "@elastic/appex-sharedux"
   ],
   "group": "platform",
   "visibility": "shared"
-}
+}
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_picker/impl/kibana.jsonc b/packages/shared-ux/file/file_picker/impl/kibana.jsonc
@@ -1,9 +1,9 @@
 {
-  "type": "shared-common",
+  "type": "shared-browser",
   "id": "@kbn/shared-ux-file-picker",
   "owner": [
     "@elastic/appex-sharedux"
   ],
   "group": "platform",
   "visibility": "shared"
-}
+}
diff --git a/packages/shared-ux/file/file_upload/impl/kibana.jsonc b/packages/shared-ux/file/file_upload/impl/kibana.jsonc
@@ -1,9 +1,9 @@
 {
-  "type": "shared-common",
+  "type": "shared-browser",
   "id": "@kbn/shared-ux-file-upload",
   "owner": [
     "@elastic/appex-sharedux"
   ],
   "group": "platform",
   "visibility": "shared"
-}
+}
diff --git a/packages/shared-ux/file/file_upload/impl/src/components/cancel_button.tsx b/packages/shared-ux/file/file_upload/impl/src/components/cancel_button.tsx
@@ -34,12 +34,13 @@ export const CancelButton: FunctionComponent<Props> = ({ onClick, compressed })
     />
   ) : (
     <EuiButton
+      color="danger"
+      fill={true}
       key="cancelButton"
       size="s"
       data-test-subj="cancelButton"
       disabled={disabled}
       onClick={onClick}
-      color="danger"
     >
       {i18nTexts.cancel}
     </EuiButton>

diff --git a/packages/shared-ux/file/file_upload/impl/src/components/upload_button.tsx b/packages/shared-ux/file/file_upload/impl/src/components/upload_button.tsx
@@ -30,6 +30,7 @@ export const UploadButton: FunctionComponent<Props> = ({ onClick }) => {
       key="uploadButton"
       isLoading={uploading}
       color={done ? 'success' : 'primary'}
+      fill={true}
       iconType={done ? 'checkInCircleFilled' : undefined}
       disabled={Boolean(!files.length || error || done)}
       onClick={onClick}

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
@@ -7,27 +7,30 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import { css } from '@emotion/react';
 import React from 'react';
+import useObservable from 'react-use/lib/useObservable';
+
 import {
-  EuiText,
-  EuiSpacer,
-  EuiFlexItem,
-  EuiFlexGroup,
   EuiFilePicker,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiText,
   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';
-import { i18nTexts } from './i18n_texts';
-import { ControlButton, ClearButton } from './components';
+
+import { ClearButton, ControlButton } from './components';
 import { useUploadState } from './context';
+import { i18nTexts } from './i18n_texts';
 
 export interface Props {
   meta?: unknown;
@@ -41,8 +44,6 @@ export interface Props {
   className?: string;
 }
 
-const { euiFormMaxWidth, euiButtonHeightSmall } = euiThemeVars;
-
 const styles = {
   horizontalContainer: css`
     display: flex;
@@ -79,12 +80,15 @@ export const FileUpload = React.forwardRef<EuiFilePickerClass, Props>(
     const id = useGeneratedHtmlId({ prefix: 'filesFileUpload' });
     const errorId = `${id}_error`;
 
+    // FIXME: add a token for this on euiTheme.components. https://github.com/elastic/eui/issues/8217
+    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 +147,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/packages/shared-ux/file/file_upload/impl/tsconfig.json b/packages/shared-ux/file/file_upload/impl/tsconfig.json
@@ -15,7 +15,6 @@
   ],
   "kbn_references": [
     "@kbn/i18n",
-    "@kbn/ui-theme",
     "@kbn/shared-ux-file-context",
     "@kbn/shared-ux-file-util",
     "@kbn/shared-ux-file-types",

diff --git a/src/plugins/guided_onboarding/public/components/guide_button.tsx b/src/plugins/guided_onboarding/public/components/guide_button.tsx
@@ -58,7 +58,7 @@ export const GuideButton = ({
     <EuiButton
       isLoading={isLoading}
       onClick={toggleGuidePanel}
-      color="success"
+      color="accent"
       fill
       size="s"
       data-test-subj="guideButton"
@@ -97,7 +97,7 @@ export const GuideButton = ({
       return (
         <EuiButton
           onClick={navigateToLandingPage}
-          color="success"
+          color="accent"
           fill
           size="s"
           data-test-subj="guideButtonRedirect"

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,21 @@ 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.success};
     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/guided_onboarding/public/components/quit_guide_modal.tsx b/src/plugins/guided_onboarding/public/components/quit_guide_modal.tsx
@@ -94,7 +94,7 @@ export const QuitGuideModal = ({
           onClick={deactivateGuide}
           isLoading={isLoading}
           fill
-          color="warning"
+          color="primary"
         >
           {i18n.translate('guidedOnboarding.quitGuideModal.quitButtonLabel', {
             defaultMessage: 'Quit guide',

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,7 @@ import {
 import * as StatusCheckStates from './status_check_states';
 
 import { injectI18n, FormattedMessage } from '@kbn/i18n-react';
-import { euiThemeVars } from '@kbn/ui-theme';
+import { euiThemeVars } from '@kbn/ui-theme'; // FIXME: remove this, and access style variables from EUI context
 
 class InstructionSetUi extends React.Component {
   constructor(props) {

diff --git a/src/plugins/kibana_overview/public/components/_overview.scss b/src/plugins/kibana_overview/public/components/_overview.scss
@@ -48,7 +48,7 @@
   }
   &.securitySolution {
     .euiCard__image {
-      background-color: $euiColorSuccess;
+      background-color: $euiColorAccentSecondary;
     }
   }
 }

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/navigation/tsconfig.json b/src/plugins/navigation/tsconfig.json
@@ -27,7 +27,6 @@
     "@kbn/config-schema",
     "@kbn/i18n",
     "@kbn/std",
-    "@kbn/ui-theme",
   ],
   "exclude": [
     "target/**/*",

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,20 +1,25 @@
 {
   "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "target/types",
+    "outDir": "target/types"
   },
-  "include": ["common/**/*", "public/**/*", "server/**/*"],
+  "include": [
+    "common/**/*",
+    "public/**/*",
+    "server/**/*",
+    // Emotion theme typing
+    "../../../typings/emotion.d.ts"
+  ],
   "kbn_references": [
     "@kbn/core",
     "@kbn/data-plugin",
     "@kbn/i18n",
     "@kbn/data-views-plugin",
     "@kbn/i18n-react",
-    "@kbn/ui-theme",
     "@kbn/react-kibana-mount",
-    "@kbn/test-jest-helpers",
+    "@kbn/test-jest-helpers"
   ],
   "exclude": [
-    "target/**/*",
+    "target/**/*"
   ]
 }