[EUI Visual Refresh][Security Gen AI] Add support for borealis theme (e…

…lastic#202393) ## Summary <img width="3003" alt="Zrzut ekranu 2025-01-8 o 18 33 20" src="https://github.com/user-attachments/assets/4bc2f0f4-74f6-439b-b3dc-2c8e5182321b" /> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
viduni94 · Jan 23, 2025 · d572f66 · d572f66
1 parent 9e9656e
commit d572f66
Show file tree

Hide file tree

Showing 19 changed files with 151 additions and 108 deletions.
diff --git a/...ck/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_body/index.tsx b/...ck/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_body/index.tsx
@@ -13,9 +13,15 @@ import React, {
   useMemo,
   useRef,
 } from 'react';
-import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
+import {
+  EuiEmptyPrompt,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiText,
+  useEuiTheme,
+} from '@elastic/eui';
 import { HttpSetup } from '@kbn/core-http-browser';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { css } from '@emotion/react';
 import { PromptResponse } from '@kbn/elastic-assistant-common';
 import { AssistantBeacon } from '@kbn/ai-assistant-icon';
@@ -53,6 +59,8 @@ export const AssistantBody: FunctionComponent<Props> = ({
   isWelcomeSetup,
   setIsSettingsModalVisible,
 }) => {
+  const { euiTheme } = useEuiTheme();
+
   const isEmptyConversation = useMemo(
     () => currentConversation?.messages.length === 0,
     [currentConversation?.messages.length]
@@ -64,16 +72,16 @@ export const AssistantBody: FunctionComponent<Props> = ({
         <EuiText
           data-test-subj="assistant-disclaimer"
           textAlign="center"
-          color={euiThemeVars.euiColorMediumShade}
+          color={euiTheme.colors.textDisabled}
           size="xs"
           css={css`
-            margin: 0 ${euiThemeVars.euiSizeL} ${euiThemeVars.euiSizeM} ${euiThemeVars.euiSizeL};
+            margin: 0 ${euiTheme.size.l} ${euiTheme.size.m} ${euiTheme.size.l};
           `}
         >
           {i18n.DISCLAIMER}
         </EuiText>
       ),
-    [isEmptyConversation]
+    [euiTheme, isEmptyConversation]
   );
 
   // Start Scrolling

diff --git a/.../platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_header/index.tsx b/.../platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_header/index.tsx
@@ -14,9 +14,9 @@ import {
   EuiPanel,
   EuiToolTip,
   EuiSkeletonTitle,
+  useEuiTheme,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { isEmpty } from 'lodash';
 import { DataStreamApis } from '../use_data_stream_apis';
 import { Conversation } from '../../..';
@@ -79,6 +79,8 @@ export const AssistantHeader: React.FC<Props> = ({
   isAssistantEnabled,
   refetchPrompts,
 }) => {
+  const { euiTheme } = useEuiTheme();
+
   const showAnonymizedValuesChecked = useMemo(
     () =>
       selectedConversation?.replacements != null &&
@@ -148,8 +150,8 @@ export const AssistantHeader: React.FC<Props> = ({
         hasShadow={false}
         paddingSize="m"
         css={css`
-          padding-top: ${euiThemeVars.euiSizeS};
-          padding-bottom: ${euiThemeVars.euiSizeS};
+          padding-top: ${euiTheme.size.s};
+          padding-bottom: ${euiTheme.size.s};
         `}
       >
         <EuiFlexGroup alignItems={'center'} justifyContent={'spaceBetween'} gutterSize="s">

diff --git a/...kages/shared/kbn-elastic-assistant/impl/assistant/assistant_overlay/flyout_navigation.tsx b/...kages/shared/kbn-elastic-assistant/impl/assistant/assistant_overlay/flyout_navigation.tsx
@@ -6,11 +6,17 @@
  */
 
 import React, { memo, useCallback, useMemo } from 'react';
-import { EuiPanel, EuiFlexGroup, EuiFlexItem, EuiButtonIcon, EuiButtonEmpty } from '@elastic/eui';
+import {
+  EuiPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonIcon,
+  EuiButtonEmpty,
+  useEuiTheme,
+} from '@elastic/eui';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { i18n } from '@kbn/i18n';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { NEW_CHAT } from '../conversations/conversation_sidepanel/translations';
 
 export interface FlyoutNavigationProps {
@@ -26,7 +32,7 @@ const VerticalSeparator = styled.div`
   :before {
     content: '';
     height: 100%;
-    border-left: 1px solid ${euiThemeVars.euiColorLightShade};
+    border-left: ${(props) => props.theme.euiTheme.border.thin};
   }
 `;
 
@@ -44,6 +50,8 @@ export const FlyoutNavigation = memo<FlyoutNavigationProps>(
     onConversationCreate,
     isAssistantEnabled,
   }) => {
+    const { euiTheme } = useEuiTheme();
+
     const onToggle = useCallback(
       () => setIsExpanded && setIsExpanded(!isExpanded),
       [isExpanded, setIsExpanded]
@@ -84,7 +92,7 @@ export const FlyoutNavigation = memo<FlyoutNavigationProps>(
         paddingSize="s"
         grow={false}
         css={css`
-          border-bottom: 1px solid ${euiThemeVars.euiColorLightShade};
+          border-bottom: ${euiTheme.border.thin};
         `}
       >
         <EuiFlexGroup

diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/chat_send/index.tsx b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/chat_send/index.tsx
@@ -7,8 +7,7 @@
 
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { css } from '@emotion/react';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { euiThemeVars } from '@kbn/ui-theme';
+import { EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui';
 import { UseChatSend } from './use_chat_send';
 import { ChatActions } from '../chat_actions';
 import { PromptTextArea } from '../prompt_textarea';
@@ -32,6 +31,8 @@ export const ChatSend: React.FC<Props> = ({
   shouldRefocusPrompt,
   userPrompt,
 }) => {
+  const { euiTheme } = useEuiTheme();
+
   // For auto-focusing prompt within timeline
   const promptTextAreaRef = useRef<HTMLTextAreaElement>(null);
   useEffect(() => {
@@ -77,8 +78,8 @@ export const ChatSend: React.FC<Props> = ({
         css={css`
           right: 0;
           position: absolute;
-          margin-right: ${euiThemeVars.euiSizeS};
-          margin-bottom: ${euiThemeVars.euiSizeS};
+          margin-right: ${euiTheme.size.s};
+          margin-bottom: ${euiTheme.size.s};
         `}
         grow={false}
       >

diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/index.tsx b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/index.tsx
@@ -23,8 +23,8 @@ import {
   EuiFlyoutFooter,
   EuiFlyoutHeader,
   EuiFlyoutBody,
+  useEuiTheme,
 } from '@elastic/eui';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { createPortal } from 'react-dom';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -79,6 +79,7 @@ const AssistantComponent: React.FC<Props> = ({
   setChatHistoryVisible,
   shouldRefocusPrompt = false,
 }) => {
+  const { euiTheme } = useEuiTheme();
   const {
     assistantAvailability: { isAssistantEnabled },
     assistantTelemetry,
@@ -378,7 +379,7 @@ const AssistantComponent: React.FC<Props> = ({
           })}
           // Avoid comments going off the flyout
           css={css`
-            padding-bottom: ${euiThemeVars.euiSizeL};
+            padding-bottom: ${euiTheme.size.l};
 
             > li > div:nth-child(2) {
               overflow: hidden;
@@ -402,6 +403,7 @@ const AssistantComponent: React.FC<Props> = ({
       setIsStreaming,
       currentUserAvatar,
       currentSystemPrompt?.content,
+      euiTheme.size.l,
       selectedPromptContextsCount,
     ]
   );
@@ -425,7 +427,7 @@ const AssistantComponent: React.FC<Props> = ({
           grow={false}
           css={css`
             inline-size: ${CONVERSATION_SIDE_PANEL_WIDTH}px;
-            border-right: 1px solid ${euiThemeVars.euiColorLightShade};
+            border-right: ${euiTheme.border.thin};
           `}
         >
           <ConversationSidePanel
@@ -531,7 +533,7 @@ const AssistantComponent: React.FC<Props> = ({
               <EuiFlyoutFooter
                 css={css`
                   background: none;
-                  border-top: 1px solid ${euiThemeVars.euiColorLightShade};
+                  border-top: ${euiTheme.border.thin};
                   overflow: hidden;
                   max-height: 60%;
                   display: flex;
@@ -591,7 +593,7 @@ const AssistantComponent: React.FC<Props> = ({
                 {!isDisabled && (
                   <EuiPanel
                     css={css`
-                      background: ${euiThemeVars.euiColorLightestShade};
+                      background: ${euiTheme.colors.backgroundBaseSubdued};
                     `}
                     hasShadow={false}
                     paddingSize="m"

diff --git a/...red/kbn-elastic-assistant/impl/assistant/prompt_editor/selected_prompt_contexts/index.tsx b/...red/kbn-elastic-assistant/impl/assistant/prompt_editor/selected_prompt_contexts/index.tsx
@@ -5,11 +5,17 @@
  * 2.0.
  */
 
-import { EuiAccordion, EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
+import {
+  EuiAccordion,
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiToolTip,
+  useEuiTheme,
+} from '@elastic/eui';
 import { isEmpty, omit } from 'lodash/fp';
 import React, { useCallback } from 'react';
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { Conversation } from '../../../assistant_context/types';
 import { DataAnonymizationEditor } from '../../../data_anonymization_editor';
 import type { PromptContext, SelectedPromptContext } from '../../prompt_context/types';
@@ -30,6 +36,8 @@ const SelectedPromptContextsComponent: React.FC<Props> = ({
   setSelectedPromptContexts,
   currentReplacements,
 }) => {
+  const { euiTheme } = useEuiTheme();
+
   const unselectPromptContext = useCallback(
     (unselectedId: string) => {
       setSelectedPromptContexts((prev) => omit(unselectedId, prev));
@@ -65,12 +73,12 @@ const SelectedPromptContextsComponent: React.FC<Props> = ({
               id={id}
               paddingSize="s"
               css={css`
-                background: ${euiThemeVars.euiPageBackgroundColor};
-                border-radius: ${euiThemeVars.euiBorderRadius};
+                background: ${euiTheme.colors.backgroundBaseSubdued};
+                border-radius: ${euiTheme.border.radius.medium};
 
                 > div:first-child {
-                  color: ${euiThemeVars.euiColorPrimary};
-                  padding: ${euiThemeVars.euiFormControlPadding};
+                  color: ${euiTheme.colors.textPrimary};
+                  padding: ${euiTheme.size.m};
                 }
               `}
               borders={'all'}

diff --git a/...kages/shared/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.tsx b/...kages/shared/kbn-elastic-assistant/impl/assistant/prompt_editor/system_prompt/helpers.tsx
@@ -5,18 +5,17 @@
  * 2.0.
  */
 
-import { EuiText, EuiToolTip } from '@elastic/eui';
+import { EuiText, EuiToolTip, useEuiTheme } from '@elastic/eui';
 import type { EuiSuperSelectOption } from '@elastic/eui';
 import React from 'react';
 import styled from '@emotion/styled';
 import { isEmpty } from 'lodash/fp';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { PromptResponse } from '@kbn/elastic-assistant-common';
 import { css } from '@emotion/react';
 import { EMPTY_PROMPT } from './translations';
 
 const Strong = styled.strong`
-  margin-right: ${euiThemeVars.euiSizeS};
+  margin-right: ${(props) => props.theme.euiTheme.size.s};
 `;
 
 interface GetOptionFromPromptProps extends PromptResponse {
@@ -25,23 +24,28 @@ interface GetOptionFromPromptProps extends PromptResponse {
   name: string;
 }
 
-export const getOptionFromPrompt = ({
-  content,
-  id,
-  name,
-}: GetOptionFromPromptProps): EuiSuperSelectOption<string> => ({
-  value: id,
-  inputDisplay: (
+const InputDisplay = ({ name }: { name: string }) => {
+  const { euiTheme } = useEuiTheme();
+
+  return (
     <span
       data-test-subj="systemPromptText"
-      // @ts-ignore
       css={css`
-        color: ${euiThemeVars.euiColorDarkestShade};
+        color: ${euiTheme.colors.darkestShade};
       `}
     >
       {name}
     </span>
-  ),
+  );
+};
+
+export const getOptionFromPrompt = ({
+  content,
+  id,
+  name,
+}: GetOptionFromPromptProps): EuiSuperSelectOption<string> => ({
+  value: id,
+  inputDisplay: <InputDisplay name={name} />,
   dropdownDisplay: (
     <>
       <Strong data-test-subj={`systemPrompt-${name}`}>{name}</Strong>

diff --git a/...astic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.tsx b/...astic-assistant/impl/assistant/prompt_editor/system_prompt/select_system_prompt/index.tsx
@@ -14,10 +14,10 @@ import {
   EuiFormRow,
   EuiSuperSelect,
   EuiToolTip,
+  useEuiTheme,
 } from '@elastic/eui';
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { euiThemeVars } from '@kbn/ui-theme';
 import {
   PromptResponse,
   PromptTypeEnum,
@@ -56,6 +56,7 @@ const SelectSystemPromptComponent: React.FC<Props> = ({
   selectedPrompt,
   setIsSettingsModalVisible,
 }) => {
+  const { euiTheme } = useEuiTheme();
   const { setSelectedSettingsTab } = useAssistantContext();
   const allSystemPrompts = useMemo(
     () => allPrompts.filter((p) => p.promptType === PromptTypeEnum.system),
@@ -128,7 +129,7 @@ const SelectSystemPromptComponent: React.FC<Props> = ({
           <EuiSuperSelect
             // Limits popover z-index to prevent it from getting too high and covering tooltips.
             // If the z-index is not defined, when a popover is opened, it sets the target z-index + 2000
-            popoverProps={{ zIndex: euiThemeVars.euiZLevel8 }}
+            popoverProps={{ zIndex: euiTheme.levels.modal as number }}
             compressed={compressed}
             data-test-subj={TEST_IDS.PROMPT_SUPERSELECT}
             fullWidth
@@ -168,10 +169,10 @@ const SelectSystemPromptComponent: React.FC<Props> = ({
                 inline-size: 16px;
                 block-size: 16px;
                 border-radius: 16px;
-                background: ${euiThemeVars.euiColorMediumShade};
+                background: ${euiTheme.colors.backgroundBaseSubdued};
 
                 :hover:not(:disabled) {
-                  background: ${euiThemeVars.euiColorMediumShade};
+                  background: ${euiTheme.colors.backgroundBaseSubdued};
                   transform: none;
                 }