[Security team] Update components for EUI visual refresh (#201795)

Closes #200005

## Summary

Integrate changes from the Borealis theme to components owned by
@elastic/kibana-security team.


### Notes

There are no visual changes in this PR. However:
- Switch from using `success` to `accentSecondary` where needed
- Switched from 'colors.disabled` to `colors.textDisabled`


### Screenshots

There isn't much to add but adding a few before/after screenshots of the
changes made



| Usage | Before | After |
|--------|--------|--------|
| API Key token field | <img width="446" alt="image"
src="https://github.com/user-attachments/assets/0167671c-b9e8-4493-88d9-514c524ccd06">
| <img width="469" alt="image"
src="https://github.com/user-attachments/assets/bde7f308-1ba4-4a92-bb27-e5875357ba49">
|
| User profile page | <img width="271" alt="image"
src="https://github.com/user-attachments/assets/668a66df-949a-4ce6-a390-d5ea2dd3489c">
| <img width="271" alt="image"
src="https://github.com/user-attachments/assets/a3965279-6f64-407c-923c-f7a07f474a14">
|
| Copy SO to space counter | <img width="991" alt="image"
src="https://github.com/user-attachments/assets/87a2cf3c-6b1f-4cf0-b818-03ed59133598">
| <img width="1161" alt="image"
src="https://github.com/user-attachments/assets/549648f1-297b-434d-b61b-d2761bc5d641">
|
| Space listing | <img width="604" alt="image"
src="https://github.com/user-attachments/assets/6db8f9df-4059-4a06-b49f-e48dd910277a"
/> |
![image](https://github.com/user-attachments/assets/5798590a-f65a-4fbe-b6b8-feb10dd62562)
|





### How to test

1. Start ES and KIB as:

```
yarn es snapshot --license trial
KBN_OPTIMIZER_THEMES=experimental yarn start --no-base-path
```

2. Navigate to `Stack Management > Advance Setting` and change the theme
to Borealis.
3. Verify the different screens as seen in the screenshots to see if
they render correctly with no visual regression


### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [ ] 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: Elastic Machine <[email protected]>

examples/user_profile_examples/public/avatar_demo.tsx

@@ -8,12 +8,13 @@
  */
 
 import React, { FunctionComponent } from 'react';
-import { EuiTitle, EuiSpacer } from '@elastic/eui';
+import { EuiTitle, EuiSpacer, useEuiTheme } from '@elastic/eui';
 import { UserAvatar } from '@kbn/user-profile-components';
 import type { UserProfile, UserProfileAvatarData } from '@kbn/user-profile-components';
 import { PanelWithCodeBlock } from './panel_with_code_block';
 
 export const AvatarDemo: FunctionComponent = () => {
+  const { euiTheme } = useEuiTheme();
   const userProfile: UserProfile<{ avatar: UserProfileAvatarData }> = {
     uid: 'u_J41Oh6L9ki-Vo2tOogS8WRTENzhHurGtRc87NgEAlkc_0',
     enabled: true,
@@ -24,7 +25,7 @@ export const AvatarDemo: FunctionComponent = () => {
     },
     data: {
       avatar: {
-        color: '#09e8ca',
+        color: euiTheme.colors.vis.euiColorVis1,
         initials: 'DN',
         imageUrl: 'https://source.unsplash.com/64x64/?cat',
       },

examples/user_profile_examples/public/tooltip_demo.tsx

@@ -10,10 +10,11 @@
 import React, { FunctionComponent } from 'react';
 import { UserAvatarTip, UserToolTip } from '@kbn/user-profile-components';
 import type { UserProfile, UserProfileAvatarData } from '@kbn/user-profile-components';
-import { EuiCommentList, EuiComment } from '@elastic/eui';
+import { EuiCommentList, EuiComment, useEuiTheme } from '@elastic/eui';
 import { PanelWithCodeBlock } from './panel_with_code_block';
 
 export const ToolTipDemo: FunctionComponent = () => {
+  const { euiTheme } = useEuiTheme();
   const userProfile: UserProfile<{ avatar: UserProfileAvatarData }> = {
     uid: 'u_9xDEQqUqoYCnFnPPLq5mIRHKL8gBTo_NiKgOnd5gGk0_0',
     enabled: true,
@@ -24,7 +25,7 @@ export const ToolTipDemo: FunctionComponent = () => {
     },
     data: {
       avatar: {
-        color: '#09e8ca',
+        color: euiTheme.colors.vis.euiColorVis1,
         initials: 'WD',
         imageUrl: 'https://source.unsplash.com/64x64/?dingo',
       },

x-pack/packages/security/api_key_management/src/components/token_field.tsx

@@ -52,7 +52,7 @@ export const TokenField: FunctionComponent<TokenFieldProps> = ({ value, ...props
                 defaultMessage: 'Copy to clipboard',
               })}
               iconType="copyClipboard"
-              color="success"
+              color="accentSecondary"
               style={{ backgroundColor: 'transparent' }}
               onClick={copyText}
             />

x-pack/plugins/security/public/account_management/user_profile/user_profile.tsx

@@ -805,7 +805,7 @@ export const UserProfile: FunctionComponent<UserProfileProps> = ({ user, data })
                         description: (
                           <span data-test-subj={item.testSubj}>
                             {item.description || (
-                              <EuiText color={euiTheme.colors.disabledText} size="s">
+                              <EuiText color={euiTheme.colors.textDisabled} size="s">
                                 <FormattedMessage
                                   id="xpack.security.accountManagement.userProfile.noneProvided"
                                   defaultMessage="None provided"

x-pack/plugins/spaces/public/copy_saved_objects_to_space/components/copy_status_summary_indicator.tsx

@@ -138,7 +138,7 @@ export const CopyStatusSummaryIndicator = (props: Props) => {
   return (
     <Fragment>
       {renderIcon(props)}
-      <EuiBadge color="#DDD" className="spcCopyToSpace__summaryCountBadge">
+      <EuiBadge className="spcCopyToSpace__summaryCountBadge">
         {summarizedCopyResult.objects.length}
       </EuiBadge>
     </Fragment>

x-pack/plugins/spaces/public/space_list/space_list_internal.tsx

@@ -12,6 +12,7 @@ import {
   EuiFlexItem,
   EuiLoadingSpinner,
   EuiToolTip,
+  useEuiTheme,
 } from '@elastic/eui';
 import type { ReactNode } from 'react';
 import React, { lazy, Suspense, useEffect, useState } from 'react';
@@ -47,6 +48,7 @@ export const SpaceListInternal = ({
   cursorStyle,
 }: SpaceListProps) => {
   const { spacesDataPromise } = useSpaces();
+  const { euiTheme } = useEuiTheme();
 
   const [isExpanded, setIsExpanded] = useState(false);
   const [shareToSpacesData, setShareToSpacesData] = useState<SpacesData>();
@@ -76,7 +78,7 @@ export const SpaceListInternal = ({
           defaultMessage: `* All spaces`,
         }),
         initials: '*',
-        color: '#D3DAE6',
+        color: euiTheme.colors.vis.euiColorVisGrey0,
       },
     ];
   } else {
@@ -145,7 +147,7 @@ export const SpaceListInternal = ({
             />
           }
         >
-          <EuiBadge color="#DDD">+{unauthorizedSpacesCount}</EuiBadge>
+          <EuiBadge>+{unauthorizedSpacesCount}</EuiBadge>
         </EuiToolTip>
       </EuiFlexItem>
     ) : null;