[8.16] [Security Assistant] Fix animation border color of security AI assistant (#202319) (#203581)

# Backport This will backport the following commits from `main` to `8.16`: - [[Security Assistant] Fix animation border color of security AI assistant (#202319)](https://github.com/elastic/kibana/pull/202319)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  --------- Co-authored-by: Kenneth Kreindler <42113355+KDKHD@users.noreply.github.com> Co-authored-by: Kenneth Kreindler <kenneth.kreindler@elastic.co>
2025-04-24 09:48:58 -04:00 · 2024-12-19 00:29:57 +11:00 · 2024-12-19 00:29:57 +11:00 · 2896b35a76
commit 2896b35a76
parent 25e3e4b21e
5 changed files with 24 additions and 11 deletions
--- a/x-pack/packages/kbn-elastic-assistant/emotion.d.ts
+++ b/x-pack/packages/kbn-elastic-assistant/emotion.d.ts
@ -0,0 +1,14 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+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 {}
+}
--- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_animated_icon.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/assistant_animated_icon.tsx
@ -7,7 +7,6 @@

 import React from 'react';
 import styled from '@emotion/styled';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { AssistantAvatar } from './assistant_avatar/assistant_avatar';

 const Container = styled.div`
@ -18,8 +17,8 @@ const Container = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
-  margin-top: ${euiThemeVars.euiSizeXXL};
-  margin-bottom: ${euiThemeVars.euiSizeL};
+  margin-top: ${({ theme }) => theme.euiTheme.size.xxl};
+  margin-bottom: ${({ theme }) => theme.euiTheme.size.l};

  :before,
  :after {
@ -45,7 +44,7 @@ const Animation = styled.div`
    top: 0;
    left: 0;
    z-index: 0;
-    border: 1px solid ${euiThemeVars.euiColorPrimary};
+    border: 1px solid ${(props) => props.theme.euiTheme.border.color};
    border-radius: inherit;
    animation: 4s cubic-bezier(0.42, 0, 0.37, 1) 0.5s infinite normal none running pulsing;
  }
--- a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/index.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/stats/index.tsx
@ -9,8 +9,8 @@ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { AnonymizationFieldResponse } from '@kbn/elastic-assistant-common/impl/schemas/anonymization_fields/bulk_crud_anonymization_fields_route.gen';
 import { Replacements } from '@kbn/elastic-assistant-common';
 import React, { useMemo } from 'react';
-// eslint-disable-next-line @kbn/eslint/module_migration
-import styled from 'styled-components';
+
+import styled from '@emotion/styled';

 import { AllowedStat } from './allowed_stat';
 import { AnonymizedStat } from './anonymized_stat';
@ -18,7 +18,7 @@ import { getStats } from '../get_stats';
 import { AvailableStat } from './available_stat';

 const StatFlexItem = styled(EuiFlexItem)`
-  margin-right: ${({ theme }) => theme.eui.euiSizeL};
+  margin-right: ${({ theme }) => theme.euiTheme.size.l};
 `;

 interface Props {
--- a/x-pack/packages/kbn-elastic-assistant/impl/mock/test_providers/test_providers.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/mock/test_providers/test_providers.tsx
@ -8,10 +8,9 @@
 import { httpServiceMock } from '@kbn/core-http-browser-mocks';
 import { I18nProvider } from '@kbn/i18n-react';
 import { actionTypeRegistryMock } from '@kbn/triggers-actions-ui-plugin/public/application/action_type_registry.mock';
-import { euiDarkVars } from '@kbn/ui-theme';
 import React from 'react';
-// eslint-disable-next-line @kbn/eslint/module_migration
-import { ThemeProvider } from 'styled-components';
+
+import { EuiThemeProvider as ThemeProvider } from '@elastic/eui';

 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { UserProfileService } from '@kbn/core/public';
@ -67,7 +66,7 @@ export const TestProvidersComponent: React.FC<Props> = ({

  return (
    <I18nProvider>
-      <ThemeProvider theme={() => ({ eui: euiDarkVars, darkMode: true })}>
+      <ThemeProvider>
        <QueryClientProvider client={queryClient}>
          <AssistantProvider
            actionTypeRegistry={actionTypeRegistry}
--- a/x-pack/packages/kbn-elastic-assistant/tsconfig.json
+++ b/x-pack/packages/kbn-elastic-assistant/tsconfig.json
@ -12,6 +12,7 @@
  "include": [
    "**/*.ts",
    "**/*.tsx",
+    "./emotion.d.ts"
  ],
  "exclude": [
    "target/**/*"