[EuiCallOut] Add accent color callout

packages/eui/changelogs/upcoming/8303.md

@@ -0,0 +1 @@
+- Added `accent` color option to `EuiCallOut`

packages/eui/src-docs/src/views/call_out/accent.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { EuiCallOut, EuiLink } from '../../../../src';
+
+export default () => (
+  <EuiCallOut
+    title="Shiny new thing has arrived"
+    color="accent"
+    iconType="cheer"
+  >
+    <p>
+      Dull thing can now be forgotten.{' '}
+      <EuiLink external href="#">
+        Learn more
+      </EuiLink>
+      .
+    </p>
+  </EuiCallOut>
+);

packages/eui/src-docs/src/views/call_out/call_out_example.js

@@ -46,6 +46,15 @@ const dangerSnippet = [
 `,
 ];
 
+import Accent from './accent';
+const accentSource = require('!!raw-loader!./accent');
+const accentSnippet = [
+  `<EuiCallOut title="Shiny new thing has arrived" color="accent" iconType="cheer">
+  <p><!-- Content --></p>
+</EuiCallOut>
+`,
+];
+
 import OnDismiss from './on_dismiss';
 const onDismissSource = require('!!raw-loader!./on_dismiss');
 const onDismissSnippet = [
@@ -173,6 +182,23 @@ export const CallOutExample = {
       snippet: dangerSnippet,
       demo: <Danger />,
     },
+    {
+      title: 'Accent',
+      source: [
+        {
+          type: GuideSectionTypes.TSX,
+          code: accentSource,
+        },
+      ],
+      text: (
+        <p>
+          Use this callout to announce new capabilities. For example if you want
+          to highlight a feature.
+        </p>
+      ),
+      snippet: accentSnippet,
+      demo: <Accent />,
+    },
     {
       title: 'Dismissible callouts',
       source: [

packages/eui/src/components/call_out/__snapshots__/call_out.test.tsx.snap

@@ -14,6 +14,12 @@ exports[`EuiCallOut is rendered 1`] = `
 </div>
 `;
 
+exports[`EuiCallOut props color accent is rendered 1`] = `
+<div
+  class="euiPanel euiPanel--accent euiPanel--paddingMedium euiCallOut euiCallOut--accent emotion-euiPanel-none-m-accent-euiCallOut"
+/>
+`;
+
 exports[`EuiCallOut props color danger is rendered 1`] = `
 <div
   class="euiPanel euiPanel--danger euiPanel--paddingMedium euiCallOut euiCallOut--danger emotion-euiPanel-none-m-danger-euiCallOut"

packages/eui/src/components/call_out/call_out.styles.ts

@@ -70,6 +70,9 @@ export const euiCallOutHeaderStyles = ({ euiTheme }: UseEuiTheme) => {
     danger: css`
       color: ${euiTheme.colors.dangerText};
     `,
+    accent: css`
+      color: ${euiTheme.colors.accentText};
+    `,
     euiCallOut__icon: css`
       position: relative;
       ${logicalCSS('top', '-1px')}

packages/eui/src/components/call_out/call_out.tsx

@@ -22,7 +22,13 @@ import { EuiI18n } from '../i18n';
 
 import { euiCallOutStyles, euiCallOutHeaderStyles } from './call_out.styles';
 
-export const COLORS = ['primary', 'success', 'warning', 'danger'] as const;
+export const COLORS = [
+  'primary',
+  'success',
+  'warning',
+  'danger',
+  'accent',
+] as const;
 export type Color = (typeof COLORS)[number];
 
 export const HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'] as const;

packages/website/docs/components/display/callout.mdx

@@ -115,6 +115,26 @@ export default () => (
 );
 ```
 
+## Accent
+
+Use this callout to announce new capabilities. For example if you want to highlight a feature.
+
+```tsx interactive
+import React from 'react';
+import { EuiCallOut, EuiLink } from '@elastic/eui';
+
+export default () => (
+  <EuiCallOut title="Shiny new thing has arrived" color="accent" iconType="cheer">
+    <p>
+      Dull thing can now be forgotten.{' '}
+      <EuiLink external href="#">
+        Learn more
+      </EuiLink>.
+    </p>
+  </EuiCallOut>
+);
+```
+
 ## Dismissible callouts
 
 To render a cross icon in the top right hand corner, pass an `onDismiss` callback that handles conditionally rendering your callout.