add alert styles

icons/info_filled.svg

+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.99984 18.3334C5.39734 18.3334 1.6665 14.6026 1.6665 10.0001C1.6665 5.39758 5.39734 1.66675 9.99984 1.66675C14.6023 1.66675 18.3332 5.39758 18.3332 10.0001C18.3332 14.6026 14.6023 18.3334 9.99984 18.3334ZM9.1665 9.16675V14.1667H10.8332V9.16675H9.1665ZM9.1665 5.83342V7.50008H10.8332V5.83342H9.1665Z" fill="currentColor"/>
+</svg>

public/icons/name.d.ts

@@ -80,6 +80,7 @@
 	| "heart_filled"
 	| "heart_outline"
 	| "hourglass"
+	| "info_filled"
 	| "info"
 	| "integration/full"
 	| "integration/partial"

toolkit/chakra/alert.tsx

 import { Alert as ChakraAlert } from '@chakra-ui/react';
 import * as React from 'react';
 
+import IconSvg from 'ui/shared/IconSvg';
+
 import { CloseButton } from './close-button';
 
 export interface AlertProps extends Omit<ChakraAlert.RootProps, 'title'> {
@@ -24,12 +26,15 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
       endElement,
       ...rest
     } = props;
+
+    const defaultIcon = <IconSvg name="info_filled"/>;
+
     return (
       <ChakraAlert.Root ref={ ref } { ...rest }>
-        { startElement || <ChakraAlert.Indicator>{ icon }</ChakraAlert.Indicator> }
+        { startElement || <ChakraAlert.Indicator>{ icon || defaultIcon }</ChakraAlert.Indicator> }
         { children ? (
           <ChakraAlert.Content>
-            <ChakraAlert.Title>{ title }</ChakraAlert.Title>
+            { title && <ChakraAlert.Title>{ title }</ChakraAlert.Title> }
             <ChakraAlert.Description>{ children }</ChakraAlert.Description>
           </ChakraAlert.Content>
         ) : (

toolkit/theme/foundations/semanticTokens.ts

@@ -126,6 +126,18 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
         },
       },
     },
+    alert: {
+      fg: {
+        DEFAULT: { value: { base: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
+      },
+      bg: {
+        info: { value: { base: '{colors.blackAlpha.50}', _dark: '{colors.whiteAlpha.100}' } },
+        warning: { value: { base: '{colors.orange.100}', _dark: '{colors.orange.800/60}' } },
+        success: { value: { base: '{colors.green.100}', _dark: '{colors.green.900}' } },
+        error: { value: { base: '{colors.red.100}', _dark: '{colors.red.900}' } },
+        neutral: { value: { base: '{colors.gray.100}', _dark: '{colors.gray.900}' } },
+      },
+    },
     text: {
       primary: { value: { base: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
       secondary: { value: { base: '{colors.gray.500}', _dark: '{colors.gray.400}' } },

toolkit/theme/recipes/alert.recipe.ts

+import { defineSlotRecipe } from '@chakra-ui/react';
+
+export const recipe = defineSlotRecipe({
+  slots: [ 'root', 'title', 'description', 'indicator', 'content' ],
+
+  base: {
+    root: {
+      width: 'full',
+      display: 'flex',
+      alignItems: 'flex-start',
+      position: 'relative',
+      borderRadius: 'base',
+      color: 'alert.fg',
+    },
+    title: {
+      fontWeight: '600',
+    },
+    description: {
+      display: 'inline',
+    },
+    indicator: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: '0',
+      width: '5',
+      height: '5',
+      _icon: { boxSize: 'full' },
+      color: 'alert.fg',
+    },
+    content: {
+      display: 'flex',
+      flex: '1',
+    },
+  },
+
+  variants: {
+    visual: {
+      info: {
+        root: { bg: 'alert.bg.info', color: 'alert.fg' },
+      },
+      warning: {
+        root: { bg: 'alert.bg.warning', color: 'alert.fg' },
+      },
+      success: {
+        root: { bg: 'alert.bg.success', color: 'alert.fg' },
+      },
+      error: {
+        root: { bg: 'alert.bg.error', color: 'alert.fg' },
+      },
+      neutral: {
+        root: { bg: 'alert.bg.neutral', color: 'alert.fg' },
+      },
+    },
+
+    inline: {
+      'true': {
+        root: {
+          alignItems: 'center',
+        },
+        content: {
+          display: 'inline-flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+        },
+      },
+      'false': {
+        content: {
+          display: 'flex',
+          flexDirection: 'column',
+        },
+      },
+    },
+
+    size: {
+      md: {
+        root: {
+          gap: '2',
+          p: '3',
+          textStyle: 'md',
+        },
+        indicator: {
+          boxSize: '5',
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    // status: 'info',
+    visual: 'info',
+    size: 'md',
+    inline: true,
+  },
+});

toolkit/theme/recipes/index.ts

+import { recipe as alert } from './alert.recipe';
 import { recipe as button } from './button.recipe';
 import { recipe as link } from './link.recipe';
 import { recipe as popover } from './popover.recipe';
@@ -14,6 +15,7 @@ export const recipes = {
 };
 
 export const slotRecipes = {
+  alert,
   popover,
   progressCircle,
   'switch': switchRecipe,

ui/pages/Chakra.tsx

 import { Heading, HStack, Link, Tabs, VStack } from '@chakra-ui/react';
 import React from 'react';
 
+import { Alert } from 'toolkit/chakra/alert';
 import { Button } from 'toolkit/chakra/button';
 import { useColorMode } from 'toolkit/chakra/color-mode';
 import { ProgressCircleRing, ProgressCircleRoot } from 'toolkit/chakra/progress-circle';
@@ -98,6 +99,16 @@ const ChakraShowcases = () => {
             </Tabs.Root>
           </HStack>
         </section>
+
+        <section>
+          <Heading textStyle="heading.md" mb={ 2 }>Alerts</Heading>
+          <HStack gap={ 4 } whiteSpace="nowrap">
+            <Alert visual="info" title="Info"> Alert content </Alert>
+            <Alert visual="warning" title="Warning"> Alert content </Alert>
+            <Alert visual="success" title="Success"> Alert content </Alert>
+            <Alert visual="error" title="Error"> Alert content </Alert>
+          </HStack>
+        </section>
       </VStack>
     </>
   );