change color scheme for indexing alert

theme/components/Alert.ts

-import { alertAnatomy as parts } from '@chakra-ui/anatomy';
-import type { StyleFunctionProps } from '@chakra-ui/styled-system';
-import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
-import { getColor, mode, transparentize } from '@chakra-ui/theme-tools';
-
-const { definePartsStyle, defineMultiStyleConfig } =
-  createMultiStyleConfigHelpers(parts.keys);
-
-function getBg(props: StyleFunctionProps): string {
-  const { theme, colorScheme: c } = props;
-  const lightBg = getColor(theme, `${ c }.100`, c);
-  const darkBg = transparentize(`${ c }.200`, 0.16)(theme);
-
-  return mode(lightBg, darkBg)(props);
-}
-
-const baseStyle = definePartsStyle({
-  container: {
-    borderRadius: 'md',
-    px: 6,
-    py: 3,
-  },
-});
-
-const variantSubtle = definePartsStyle((props) => {
-  return {
-    container: {
-      bgColor: getBg(props),
-    },
-  };
-});
-
-const variants = {
-  subtle: variantSubtle,
-};
-
-const Alert = defineMultiStyleConfig({
-  baseStyle,
-  variants,
-});
-
-export default Alert;

theme/components/Alert/Alert.pw.tsx

+import type { AlertProps } from '@chakra-ui/react';
+import { Alert, AlertIcon, AlertTitle } from '@chakra-ui/react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import TestApp from 'playwright/TestApp';
+
+test.use({ viewport: { width: 400, height: 720 } });
+
+const TEST_CASES: Array<AlertProps> = [
+  {
+    status: 'info',
+  },
+  {
+    status: 'warning',
+  },
+  {
+    status: 'success',
+  },
+  {
+    status: 'error',
+  },
+  {
+    status: 'info',
+    colorScheme: 'gray',
+  },
+];
+
+TEST_CASES.forEach((props) => {
+  const testName = Object.entries(props).map(([ key, value ]) => `${ key }=${ value }`).join(', ');
+
+  test(`${ testName } +@dark-mode`, async({ mount }) => {
+    const component = await mount(
+      <TestApp>
+        <Alert { ...props }>
+          <AlertIcon/>
+          <AlertTitle>
+            This is alert text
+          </AlertTitle>
+        </Alert>
+      </TestApp>,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+});

theme/components/Alert/Alert.ts

+import { alertAnatomy as parts } from '@chakra-ui/anatomy';
+import type { StyleFunctionProps } from '@chakra-ui/styled-system';
+import { createMultiStyleConfigHelpers, cssVar } from '@chakra-ui/styled-system';
+import { transparentize } from '@chakra-ui/theme-tools';
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(parts.keys);
+
+const $fg = cssVar('alert-fg');
+const $bg = cssVar('alert-bg');
+
+function getBg(props: StyleFunctionProps) {
+  const { theme, colorScheme: c } = props;
+  const darkBg = transparentize(`${ c }.200`, 0.16)(theme);
+  return {
+    light: `colors.${ c }.100`,
+    dark: darkBg,
+  };
+}
+
+const baseStyle = definePartsStyle({
+  container: {
+    bg: $bg.reference,
+    px: '4',
+    py: '3',
+  },
+  title: {
+    fontWeight: 'bold',
+    lineHeight: '6',
+    marginEnd: '2',
+  },
+  description: {
+    lineHeight: '6',
+  },
+  icon: {
+    color: $fg.reference,
+    flexShrink: 0,
+    marginEnd: '3',
+    w: '5',
+    h: '6',
+  },
+  spinner: {
+    color: $fg.reference,
+    flexShrink: 0,
+    marginEnd: '3',
+    w: '5',
+    h: '5',
+  },
+});
+
+const variantSubtle = definePartsStyle((props) => {
+  const { colorScheme } = props;
+  const bg = getBg(props);
+
+  return {
+    container: {
+      [$fg.variable]: colorScheme === 'gray' ? 'colors.blackAlpha.800' : `colors.${ colorScheme }.500`,
+      [$bg.variable]: colorScheme === 'gray' ? 'colors.gray.100' : bg.light,
+      _dark: {
+        [$fg.variable]: colorScheme === 'gray' ? 'colors.whiteAlpha.800' : `colors.${ colorScheme }.200`,
+        [$bg.variable]: colorScheme === 'gray' ? 'colors.gray.800' : bg.dark,
+      },
+    },
+  };
+});
+
+const variantSolid = definePartsStyle((props) => {
+  const { colorScheme: c } = props;
+  return {
+    container: {
+      [$fg.variable]: `colors.white`,
+      [$bg.variable]: `colors.${ c }.500`,
+      _dark: {
+        [$fg.variable]: `colors.gray.900`,
+        [$bg.variable]: `colors.${ c }.200`,
+      },
+      color: $fg.reference,
+    },
+  };
+});
+
+const variants = {
+  subtle: variantSubtle,
+  solid: variantSolid,
+};
+
+const Alert = defineMultiStyleConfig({
+  baseStyle,
+  variants,
+  defaultProps: {
+    variant: 'subtle',
+    colorScheme: 'blue',
+  },
+});
+
+export default Alert;

theme/components/index.ts

-import Alert from './Alert';
+import Alert from './Alert/Alert';
 import Badge from './Badge';
 import Button from './Button/Button';
 import Checkbox from './Checkbox';

ui/home/IndexingAlert.tsx

@@ -97,7 +97,7 @@ const IndexingAlert = ({ className }: { className?: string }) => {
   }
 
   return (
-    <Alert status="warning" variant="solid" py={ 3 } borderRadius="12px" mb={ 6 } className={ className }>
+    <Alert status="info" colorScheme="gray" py={ 3 } borderRadius="12px" mb={ 6 } className={ className }>
       { !isMobile && <AlertIcon/> }
       <AlertTitle>
         { content }