[Obs AI Assistant] Borealis theme integration (elastic#200814)

## Summary Integrates changes from the Borealis theme to the components owned by `obs-ai-assistant`, `obs-knowledge` teams and for files related to `kbn-ai-assistant`. ### 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: kibanamachine <[email protected]>
pgayvallet · Nov 27, 2024 · a800360 · a800360
1 parent e306255
commit a800360
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 41 deletions.
diff --git a/x-pack/packages/kbn-ai-assistant/src/chat/chat_body.tsx b/x-pack/packages/kbn-ai-assistant/src/chat/chat_body.tsx
@@ -7,13 +7,15 @@
 
 import {
   EuiCallOut,
+  euiCanAnimate,
   EuiFlexGroup,
   EuiFlexItem,
   EuiHorizontalRule,
   EuiPanel,
   euiScrollBarStyles,
   EuiSpacer,
   useEuiTheme,
+  UseEuiTheme,
 } from '@elastic/eui';
 import { css, keyframes } from '@emotion/css';
 import { i18n } from '@kbn/i18n';
@@ -28,7 +30,6 @@ import {
   type Feedback,
 } from '@kbn/observability-ai-assistant-plugin/public';
 import type { AuthenticatedUser } from '@kbn/security-plugin/common';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { findLastIndex } from 'lodash';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import type { UseKnowledgeBaseResult } from '../hooks/use_knowledge_base';
@@ -56,14 +57,16 @@ const timelineClassName = (scrollBarStyles: string) => css`
   ${scrollBarStyles}
 `;
 
-const promptEditorClassname = css`
+const promptEditorClassname = (euiTheme: UseEuiTheme['euiTheme']) => css`
   overflow: hidden;
-  transition: height ${euiThemeVars.euiAnimSpeedFast} ${euiThemeVars.euiAnimSlightResistance};
+  ${euiCanAnimate} {
+    transition: height ${euiTheme.animation.fast} ${euiTheme.animation.resistance};
+  }
 `;
 
-const incorrectLicenseContainer = css`
+const incorrectLicenseContainer = (euiTheme: UseEuiTheme['euiTheme']) => css`
   height: 100%;
-  padding: ${euiThemeVars.euiPanelPaddingModifiers.paddingMedium};
+  padding: ${euiTheme.size.base};
 `;
 
 const chatBodyContainerClassNameWithError = css`
@@ -86,11 +89,13 @@ const fadeInAnimation = keyframes`
   }
 `;
 
-const animClassName = css`
+const animClassName = (euiTheme: UseEuiTheme['euiTheme']) => css`
   height: 100%;
   opacity: 0;
-  animation: ${fadeInAnimation} ${euiThemeVars.euiAnimSpeedNormal}
-    ${euiThemeVars.euiAnimSlightBounce} ${euiThemeVars.euiAnimSpeedNormal} forwards;
+  ${euiCanAnimate} {
+    animation: ${fadeInAnimation} ${euiTheme.animation.normal} ${euiTheme.animation.bounce}
+      ${euiTheme.animation.normal} forwards;
+  }
 `;
 
 const containerClassName = css`
@@ -127,8 +132,9 @@ export function ChatBody({
 }) {
   const license = useLicense();
   const hasCorrectLicense = license?.hasAtLeast('enterprise');
-  const euiTheme = useEuiTheme();
-  const scrollBarStyles = euiScrollBarStyles(euiTheme);
+  const theme = useEuiTheme();
+  const scrollBarStyles = euiScrollBarStyles(theme);
+  const { euiTheme } = theme;
 
   const chatService = useAIAssistantChatService();
 
@@ -310,7 +316,7 @@ export function ChatBody({
   if (!hasCorrectLicense && !initialConversationId) {
     footer = (
       <>
-        <EuiFlexItem grow className={incorrectLicenseContainer}>
+        <EuiFlexItem grow className={incorrectLicenseContainer(euiTheme)}>
           <IncorrectLicensePanel />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
@@ -347,7 +353,7 @@ export function ChatBody({
               hasBorder={false}
               hasShadow={false}
               paddingSize="m"
-              className={animClassName}
+              className={animClassName(euiTheme)}
             >
               {connectors.connectors?.length === 0 || messages.length === 1 ? (
                 <WelcomeMessage
@@ -400,7 +406,7 @@ export function ChatBody({
 
         <EuiFlexItem
           grow={false}
-          className={promptEditorClassname}
+          className={promptEditorClassname(euiTheme)}
           style={{ height: promptEditorHeight }}
         >
           <EuiHorizontalRule margin="none" />

diff --git a/x-pack/packages/kbn-ai-assistant/src/chat/chat_header.tsx b/x-pack/packages/kbn-ai-assistant/src/chat/chat_header.tsx
@@ -104,7 +104,9 @@ export function ChatHeader({
             size={breakpoint === 'xs' ? 'xs' : 's'}
             value={newTitle}
             className={css`
-              color: ${!!title ? theme.euiTheme.colors.text : theme.euiTheme.colors.subduedText};
+              color: ${!!title
+                ? theme.euiTheme.colors.textParagraph
+                : theme.euiTheme.colors.textSubdued};
             `}
             inputAriaLabel={i18n.translate('xpack.aiAssistant.chatHeader.editConversationInput', {
               defaultMessage: 'Edit conversation',

diff --git a/x-pack/packages/kbn-ai-assistant/src/chat/chat_item_title.tsx b/x-pack/packages/kbn-ai-assistant/src/chat/chat_item_title.tsx
@@ -5,21 +5,24 @@
  * 2.0.
  */
 
-import { euiThemeVars } from '@kbn/ui-theme';
 import React, { ReactNode } from 'react';
 import { css } from '@emotion/react';
+import { useEuiTheme } from '@elastic/eui';
 
 interface ChatItemTitleProps {
   actionsTrigger?: ReactNode;
   title: string;
 }
 
 export function ChatItemTitle({ actionsTrigger, title }: ChatItemTitleProps) {
+  const { euiTheme } = useEuiTheme();
+
   const containerCSS = css`
     position: absolute;
     top: 2;
-    right: ${euiThemeVars.euiSizeS};
+    right: ${euiTheme.size.s};
   `;
+
   return (
     <>
       {title}

diff --git a/x-pack/packages/kbn-ai-assistant/src/chat/incorrect_license_panel.tsx b/x-pack/packages/kbn-ai-assistant/src/chat/incorrect_license_panel.tsx
@@ -15,21 +15,22 @@ import {
   EuiPanel,
   EuiText,
   EuiTitle,
+  useEuiTheme,
 } from '@elastic/eui';
 import { css } from '@emotion/css';
 import { i18n } from '@kbn/i18n';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { elasticAiAssistantImage } from '@kbn/observability-ai-assistant-plugin/public';
 import { UPGRADE_LICENSE_TITLE } from '../i18n';
 import { useLicenseManagementLocator } from '../hooks/use_license_management_locator';
 
-const incorrectLicenseContainer = css`
-  height: 100%;
-  padding: ${euiThemeVars.euiPanelPaddingModifiers.paddingMedium};
-`;
-
 export function IncorrectLicensePanel() {
   const handleNavigateToLicenseManagement = useLicenseManagementLocator();
+  const { euiTheme } = useEuiTheme();
+
+  const incorrectLicenseContainer = css`
+    height: 100%;
+    padding: ${euiTheme.size.base};
+  `;
 
   return (
     <EuiPanel hasBorder hasShadow={false}>

diff --git a/x-pack/packages/kbn-ai-assistant/src/chat/welcome_message_connectors.tsx b/x-pack/packages/kbn-ai-assistant/src/chat/welcome_message_connectors.tsx
@@ -15,9 +15,10 @@ import {
   EuiSpacer,
   EuiText,
   EuiIconTip,
+  useEuiTheme,
+  euiCanAnimate,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { isHttpFetchError } from '@kbn/core-http-browser';
 import type { UseGenAIConnectorsResult } from '../hooks/use_genai_connectors';
 
@@ -30,17 +31,21 @@ const fadeInAnimation = keyframes`
   }
 `;
 
-const fadeInClassName = css`
-  animation: ${fadeInAnimation} ${euiThemeVars.euiAnimSpeedNormal} ease-in-out;
-`;
-
 export function WelcomeMessageConnectors({
   connectors,
   onSetupConnectorClick,
 }: {
   connectors: UseGenAIConnectorsResult;
   onSetupConnectorClick?: () => void;
 }) {
+  const { euiTheme } = useEuiTheme();
+
+  const fadeInClassName = css`
+    ${euiCanAnimate} {
+      animation: ${fadeInAnimation} ${euiTheme.animation.normal} ease-in-out;
+    }
+  `;
+
   if (connectors.error) {
     const isForbiddenError =
       isHttpFetchError(connectors.error) &&

diff --git a/x-pack/packages/kbn-ai-assistant/src/conversation/conversation_view.tsx b/x-pack/packages/kbn-ai-assistant/src/conversation/conversation_view.tsx
@@ -6,7 +6,6 @@
  */
 import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiSpacer, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/css';
-import { euiThemeVars } from '@kbn/ui-theme';
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import type { AssistantScope } from '@kbn/ai-assistant-common';
@@ -105,7 +104,7 @@ export const ConversationView: React.FC<ConversationViewProps> = ({
   const conversationListContainerName = css`
     min-width: 250px;
     width: 250px;
-    border-right: solid 1px ${euiThemeVars.euiColorLightShade};
+    border-right: solid 1px ${euiTheme.border.color};
   `;
 
   const sidebarContainerClass = css`
@@ -117,8 +116,8 @@ export const ConversationView: React.FC<ConversationViewProps> = ({
     height: calc(100% - 56px);
     background-color: ${euiTheme.colors.lightestShade};
     width: ${isSecondSlotVisible ? SECOND_SLOT_CONTAINER_WIDTH : 0}px;
-    border-top: solid 1px ${euiThemeVars.euiColorLightShade};
-    border-left: solid 1px ${euiThemeVars.euiColorLightShade};
+    border-top: solid 1px ${euiTheme.border.color};
+    border-left: solid 1px ${euiTheme.border.color};
 
     .euiFlyoutHeader {
       padding: ${euiTheme.size.m};

diff --git a/x-pack/packages/kbn-ai-assistant/tsconfig.json b/x-pack/packages/kbn-ai-assistant/tsconfig.json
@@ -22,7 +22,6 @@
     "@kbn/triggers-actions-ui-plugin",
     "@kbn/actions-plugin",
     "@kbn/i18n-react",
-    "@kbn/ui-theme",
     "@kbn/core",
     "@kbn/observability-ai-assistant-plugin",
     "@kbn/security-plugin",

diff --git a/.../observability_solution/observability_ai_assistant/public/components/assistant_avatar.tsx b/.../observability_solution/observability_ai_assistant/public/components/assistant_avatar.tsx
@@ -4,6 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+import { useEuiTheme } from '@elastic/eui';
 import React, { ReactNode } from 'react';
 
 export interface AssistantAvatarProps {
@@ -22,7 +23,9 @@ export const sizeMap = {
 };
 
 export function AssistantAvatar({ size = 's', css, className }: AssistantAvatarProps) {
+  const { euiTheme } = useEuiTheme();
   const sizePx = sizeMap[size];
+
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -36,7 +39,7 @@ export function AssistantAvatar({ size = 's', css, className }: AssistantAvatarP
       <path fill="#F04E98" d="M36 28h24v36H36V28Z" />
       <path fill="#00BFB3" d="M4 46c0-9.941 8.059-18 18-18h6v36h-6c-9.941 0-18-8.059-18-18Z" />
       <path
-        fill="#343741"
+        fill={euiTheme.colors.textParagraph}
         d="M60 12c0 6.627-5.373 12-12 12s-12-5.373-12-12S41.373 0 48 0s12 5.373 12 12Z"
       />
       <path fill="#FA744E" d="M6 23C6 10.85 15.85 1 28 1v22H6Z" />

diff --git a/...ability_solution/observability_ai_assistant/public/components/chat/chat_item_controls.tsx b/...ability_solution/observability_ai_assistant/public/components/chat/chat_item_controls.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiPanel, useEuiTheme } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiPanel } from '@elastic/eui';
 import { css } from '@emotion/css';
 import { Feedback, FeedbackButtons } from '../buttons/feedback_buttons';
 import { StopGeneratingButton } from '../buttons/stop_generating_button';
@@ -34,8 +34,6 @@ export function ChatItemControls({
   onRegenerateClick: () => void;
   onStopGeneratingClick: () => void;
 }) {
-  const { euiTheme } = useEuiTheme();
-
   const displayFeedback = !error && canGiveFeedback;
   const displayRegenerate = !loading && canRegenerate;
 
@@ -64,7 +62,7 @@ export function ChatItemControls({
 
   return controls ? (
     <>
-      <EuiHorizontalRule margin="none" color={euiTheme.colors.lightestShade} />
+      <EuiHorizontalRule margin="none" />
       <EuiPanel hasShadow={false} paddingSize="s" className={containerClassName}>
         {controls}
       </EuiPanel>

diff --git a/...ervability_solution/observability_ai_assistant/public/components/insight/insight_base.tsx b/...ervability_solution/observability_ai_assistant/public/components/insight/insight_base.tsx
@@ -82,7 +82,7 @@ export function InsightBase({
                   position="right"
                 />
               </EuiFlexGroup>
-              <EuiText size="s" css={{ color: euiTheme.colors.subduedText }}>
+              <EuiText size="s" css={{ color: euiTheme.colors.textSubdued }}>
                 <span>{description}</span>
               </EuiText>
             </EuiFlexItem>

diff --git a/...k/plugins/stack_connectors/public/connector_types/inference/additional_options_fields.tsx b/...k/plugins/stack_connectors/public/connector_types/inference/additional_options_fields.tsx
@@ -111,7 +111,7 @@ export const AdditionalOptionsConnectorFields: React.FC<AdditionalOptionsConnect
           <div
             css={css`
               font-size: ${xsFontSize};
-              color: ${euiTheme.colors.subduedText};
+              color: ${euiTheme.colors.textSubdued};
             `}
           >
             <FormattedMessage
@@ -255,7 +255,7 @@ export const AdditionalOptionsConnectorFields: React.FC<AdditionalOptionsConnect
             <div
               css={css`
                 font-size: ${xsFontSize};
-                color: ${euiTheme.colors.subduedText};
+                color: ${euiTheme.colors.textSubdued};
               `}
             >
               <FormattedMessage
@@ -289,7 +289,7 @@ export const AdditionalOptionsConnectorFields: React.FC<AdditionalOptionsConnect
         <div
           css={css`
             font-size: ${xsFontSize};
-            color: ${euiTheme.colors.subduedText};
+            color: ${euiTheme.colors.textSubdued};
           `}
         >
           <FormattedMessage