refactor(component): refactor the implementation of Button and IconButton (#7716)

## Button
- Remove props withoutHoverStyle
   refactor hover impl with independent layer, so that hover-color won't affect the background even if is overridden outside
- Update `type` (renamed to `variant`):
  - remove `processing` and `warning`
  - rename `default` with `secondary`
- Remove `shape` props
- Remove `icon` and `iconPosition`, replaced with `prefix: ReactNode` and `suffix: ReactNode`
- Integrate tooltip for more convenient usage
- New Storybook document
- Focus style

## IconButton
- A Wrapper base on `<Button />`
- Override Button size and variant
  - size: `'12' | '14' | '16' | '20' | '24' | number`
     These presets size are referenced from the design system.
  - variant:  `'plain' | 'solid' | 'danger' | 'custom'`
- Inset icon via Button 's prefix

## Fix
- fix some button related issues
- close AF-1159, AF-1160, AF-1161, AF-1162, AF-1163, AF-1158, AF-1157

## Storybook

![CleanShot 2024-08-03 at 14.57.20@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/f5a76110-35d0-4082-a940-efc12bed87b0.png)

packages/frontend/component/src/ui/avatar/avatar.tsx

@@ -199,21 +199,20 @@ export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
         </Tooltip>
 
         {onRemove ? (
-          <Tooltip
-            portalOptions={{ container: removeButtonDom }}
-            {...removeTooltipOptions}
+          <IconButton
+            tooltipOptions={{
+              portalOptions: { container: removeButtonDom },
+              ...removeTooltipOptions,
+            }}
+            variant="solid"
+            size="12"
+            className={clsx(style.removeButton, removeButtonClassName)}
+            onClick={onRemove}
+            ref={setRemoveButtonDom}
+            {...removeButtonProps}
           >
-            <IconButton
-              size="extraSmall"
-              type="default"
-              className={clsx(style.removeButton, removeButtonClassName)}
-              onClick={onRemove}
-              ref={setRemoveButtonDom}
-              {...removeButtonProps}
-            >
-              <CloseIcon />
-            </IconButton>
-          </Tooltip>
+            <CloseIcon />
+          </IconButton>
         ) : null}
       </AvatarRoot>
     );

packages/frontend/component/src/ui/avatar/style.css.ts

@@ -1,5 +1,5 @@
 import { cssVar } from '@toeverything/theme';
-import { createVar, globalStyle, keyframes, style } from '@vanilla-extract/css';
+import { createVar, keyframes, style } from '@vanilla-extract/css';
 export const sizeVar = createVar('sizeVar');
 export const blurVar = createVar('blurVar');
 const bottomAnimation = keyframes({
@@ -172,7 +172,7 @@ export const hoverWrapper = style({
   alignItems: 'center',
   backgroundColor: 'rgba(60, 61, 63, 0.5)',
   zIndex: '1',
-  color: cssVar('white'),
+  color: cssVar('pureWhite'),
   opacity: 0,
   transition: 'opacity .15s',
   cursor: 'pointer',
@@ -189,14 +189,8 @@ export const removeButton = style({
   visibility: 'hidden',
   zIndex: '1',
   selectors: {
-    '&:hover': {
-      background: '#f6f6f6',
+    [`${avatarRoot}:hover &`]: {
+      visibility: 'visible',
     },
   },
 });
-globalStyle(`${avatarRoot}:hover ${removeButton}`, {
-  visibility: 'visible',
-});
-globalStyle(`${avatarRoot} ${removeButton}:hover`, {
-  background: '#f6f6f6',
-});