close button styles

icons/cross.svg

-<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="m6 5.293 2.475-2.475.707.707L6.707 6l2.475 2.475-.707.707L6 6.707 3.525 9.182l-.707-.707L5.293 6 2.818 3.525l.707-.707L6 5.293Z" fill="currentColor"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2929 9.87888C11.6834 10.2694 12.3166 10.2694 12.7071 9.87888L16.243 6.34299C16.6335 5.95252 17.2665 5.95252 17.657 6.34299C18.0475 6.73345 18.0475 7.36652 17.657 7.75699L14.1211 11.2929C13.7306 11.6834 13.7306 12.3166 14.1211 12.7071L17.657 16.243C18.0475 16.6335 18.0475 17.2665 17.657 17.657C17.2665 18.0475 16.6335 18.0475 16.243 17.657L12.7071 14.1211C12.3166 13.7306 11.6834 13.7306 11.2929 14.1211L7.75699 17.657C7.36652 18.0475 6.73345 18.0475 6.34299 17.657C5.95252 17.2665 5.95252 16.6335 6.34299 16.243L9.87888 12.7071C10.2694 12.3166 10.2694 11.6834 9.87888 11.2929L6.34299 7.75699C5.95252 7.36652 5.95252 6.73345 6.34299 6.34299C6.73345 5.95252 7.36652 5.95252 7.75699 6.34299L11.2929 9.87888Z" fill="currentColor"/>
 </svg>

package.json

@@ -44,7 +44,7 @@
     "@blockscout/bens-types": "1.4.1",
     "@blockscout/stats-types": "2.5.0-alpha",
     "@blockscout/visualizer-types": "0.2.0",
-    "@chakra-ui/react": "3.8.0",
+    "@chakra-ui/react": "3.9.0",
     "@cloudnouns/kit": "1.1.6",
     "@emotion/react": "11.14.0",
     "@growthbook/growthbook-react": "0.21.0",

toolkit/chakra/alert.tsx

@@ -65,8 +65,7 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
           { closable && (
             <CloseButton
               pos="relative"
-              top="-2"
-              insetEnd="-2"
+              size="sm"
               alignSelf="flex-start"
               onClick={ onClose }
             />

toolkit/chakra/close-button.tsx

 import type { ButtonProps } from '@chakra-ui/react';
 import { IconButton as ChakraIconButton, useRecipe } from '@chakra-ui/react';
 import * as React from 'react';
-import { LuX } from 'react-icons/lu';
 
-import { recipe as closeButtonRecipe } from '../theme/recipes/close-button.recipe';
+import IconSvg from 'ui/shared/IconSvg';
 
+import { recipe as closeButtonRecipe } from '../theme/recipes/close-button.recipe';
 export interface CloseButtonProps extends Omit<ButtonProps, 'variant' | 'size'> {
   variant?: 'plain';
-  size?: 'md';
+  size?: 'sm' | 'md' | 'lg';
 }
 
 export const CloseButton = React.forwardRef<
@@ -20,7 +20,7 @@ export const CloseButton = React.forwardRef<
 
   return (
     <ChakraIconButton aria-label="Close" ref={ ref } css={ styles } { ...restProps }>
-      { props.children ?? <LuX/> }
+      { props.children ?? <IconSvg name="cross" boxSize={ 6 }/> }
     </ChakraIconButton>
   );
 });

toolkit/chakra/dialog.tsx

@@ -44,7 +44,7 @@ export const DialogCloseTrigger = React.forwardRef<
       { ...props }
       asChild
     >
-      <CloseButton ref={ ref } variant="plain">
+      <CloseButton ref={ ref }>
         { props.children }
       </CloseButton>
     </ChakraDialog.CloseTrigger>

toolkit/chakra/toaster.tsx

@@ -11,6 +11,8 @@ import {
 
 import { SECOND } from 'lib/consts';
 
+import { CloseButton } from './close-button';
+
 export const toaster = createToaster({
   placement: 'top-end',
   pauseOnPageIdle: true,
@@ -44,7 +46,11 @@ export const Toaster = () => {
               { toast.action && (
                 <Toast.ActionTrigger>{ toast.action.label }</Toast.ActionTrigger>
               ) }
-              { closable && <Toast.CloseTrigger/> }
+              { closable && (
+                <Toast.CloseTrigger asChild>
+                  <CloseButton size="md"/>
+                </Toast.CloseTrigger>
+              ) }
             </Toast.Root>
           );
         } }

toolkit/theme/foundations/semanticTokens.ts

@@ -97,6 +97,11 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
         },
       },
     },
+    closeButton: {
+      fg: {
+        DEFAULT: { value: { _light: '{colors.blackAlpha.500}', _dark: '{colors.whiteAlpha.500}' } },
+      },
+    },
     link: {
       primary: {
         DEFAULT: { value: { _light: '{colors.blue.600}', _dark: '{colors.blue.300}' } },

toolkit/theme/recipes/close-button.recipe.ts

@@ -7,7 +7,7 @@ export const recipe = defineRecipe({
     borderRadius: 'sm',
     overflow: 'hidden',
     _disabled: {
-      opacity: 0.2,
+      opacity: 'control.disabled',
     },
     minWidth: 'auto',
   },
@@ -15,8 +15,11 @@ export const recipe = defineRecipe({
     visual: {
       plain: {
         bg: 'transparent',
-        color: 'icon.backTo',
+        color: 'closeButton.fg',
         border: 'none',
+        '&:not([data-loading-skeleton])': {
+          bg: 'transparent',
+        },
         _hover: {
           bg: 'transparent',
           color: 'link.primary.hover',
@@ -24,7 +27,9 @@ export const recipe = defineRecipe({
       },
     },
     size: {
-      md: { boxSize: 6, '& svg': { boxSize: 5 } },
+      sm: { boxSize: 6 },
+      md: { boxSize: 8 },
+      lg: { boxSize: 10 },
     },
   },
   defaultVariants: {

toolkit/theme/recipes/toast.recipe.ts

@@ -91,17 +91,7 @@ export const recipe = defineSlotRecipe({
     closeTrigger: {
       position: 'static',
       alignSelf: 'center',
-      top: '0',
-      insetEnd: '0',
-      padding: '2px',
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      color: '{currentColor}',
-      borderRadius: 'none',
-      boxSize: '6',
-      transition: 'background 200ms',
-      cursor: 'pointer',
+      color: 'closeButton.fg',
     },
   },
 });

ui/pages/Chakra.tsx

@@ -11,6 +11,7 @@ import BadgeShowcase from 'ui/showcases/Badge';
 import ButtonShowcase from 'ui/showcases/Button';
 import CheckboxShowcase from 'ui/showcases/Checkbox';
 import ClipboardShowcase from 'ui/showcases/Clipboard';
+import CloseButtonShowcase from 'ui/showcases/CloseButton';
 import CollapsibleShowcase from 'ui/showcases/Collapsible';
 import ContentLoaderShowcase from 'ui/showcases/ContentLoader';
 import DialogShowcase from 'ui/showcases/Dialog';
@@ -49,6 +50,7 @@ const tabs = [
   { label: 'Button', value: 'button', component: <ButtonShowcase/> },
   { label: 'Checkbox', value: 'checkbox', component: <CheckboxShowcase/> },
   { label: 'Clipboard', value: 'clipboard', component: <ClipboardShowcase/> },
+  { label: 'Close button', value: 'close-button', component: <CloseButtonShowcase/> },
   { label: 'Collapsible', value: 'collapsible', component: <CollapsibleShowcase/> },
   { label: 'Content loader', value: 'content-loader', component: <ContentLoaderShowcase/> },
   { label: 'Dialog', value: 'dialog', component: <DialogShowcase/> },

ui/showcases/Alert.tsx

@@ -37,6 +37,14 @@ const AlertShowcase = () => {
           </Sample>
         </SamplesStack>
       </Section>
+      <Section>
+        <SectionHeader>Closable</SectionHeader>
+        <SamplesStack>
+          <Sample label="closable">
+            <Alert status="info" title="Info" showIcon closable> Alert content </Alert>
+          </Sample>
+        </SamplesStack>
+      </Section>
       <Section>
         <SectionHeader>Loading</SectionHeader>
         <SamplesStack>
@@ -100,7 +108,7 @@ const AlertShowcase = () => {
         <SectionSubHeader>Multiple lines</SectionSubHeader>
         <SamplesStack>
           <Sample label="multiple lines, with title, inline=false">
-            <Alert status="warning" title="Warning" inline={ false } maxWidth="500px" showIcon>
+            <Alert status="warning" title="Warning" inline={ false } maxWidth="500px" showIcon closable>
               <Box>
                 Participated in our recent Blockscout activities? Check your eligibility and claim your NFT Scout badges. More exciting things are coming soon!
               </Box>

ui/showcases/CloseButton.tsx

+import React from 'react';
+
+import { CloseButton } from 'toolkit/chakra/close-button';
+
+import { Section, Container, SectionHeader, SamplesStack, Sample } from './parts';
+
+const CloseButtonShowcase = () => {
+
+  return (
+    <Container value="close-button">
+      <Section>
+        <SectionHeader>Variants</SectionHeader>
+        <SamplesStack>
+          <Sample label="variant: default">
+            <CloseButton/>
+            <CloseButton data-hover/>
+            <CloseButton disabled/>
+          </Sample>
+        </SamplesStack>
+      </Section>
+
+      <Section>
+        <SectionHeader>Size</SectionHeader>
+        <SamplesStack>
+          <Sample label="size: md">
+            <CloseButton size="md" outline="1px dashed lightpink"/>
+          </Sample>
+          <Sample label="size: lg">
+            <CloseButton size="lg" outline="1px dashed lightpink"/>
+          </Sample>
+        </SamplesStack>
+      </Section>
+    </Container>
+  );
+};
+
+export default React.memo(CloseButtonShowcase);