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/components/not-found-page/not-found-page.tsx

@@ -3,7 +3,6 @@ import { SignOutIcon } from '@blocksuite/icons/rc';
 
 import { Avatar } from '../../ui/avatar';
 import { Button, IconButton } from '../../ui/button';
-import { Tooltip } from '../../ui/tooltip';
 import { AffineOtherPageLayout } from '../affine-other-page-layout';
 import type { User } from '../auth-components';
 import { NotFoundPattern } from './not-found-pattern';
@@ -38,7 +37,7 @@ export const NoPermissionOrNotFound = ({
             <p className={wrapper}>{t['404.hint']()}</p>
             <div className={wrapper}>
               <Button
-                type="primary"
+                variant="primary"
                 size="extraLarge"
                 onClick={onBack}
                 className={largeButtonEffect}
@@ -49,11 +48,13 @@ export const NoPermissionOrNotFound = ({
             <div className={wrapper}>
               <Avatar url={user.avatar ?? user.image} name={user.label} />
               <span style={{ margin: '0 12px' }}>{user.email}</span>
-              <Tooltip content={t['404.signOut']()}>
-                <IconButton onClick={onSignOut}>
-                  <SignOutIcon />
-                </IconButton>
-              </Tooltip>
+              <IconButton
+                onClick={onSignOut}
+                size="20"
+                tooltip={t['404.signOut']()}
+              >
+                <SignOutIcon />
+              </IconButton>
             </div>
           </>
         ) : (
@@ -80,7 +81,7 @@ export const NotFoundPage = ({
         <p className={wrapper}>{t['404.hint']()}</p>
         <div className={wrapper}>
           <Button
-            type="primary"
+            variant="primary"
             size="extraLarge"
             onClick={onBack}
             className={largeButtonEffect}
@@ -93,11 +94,13 @@ export const NotFoundPage = ({
           <div className={wrapper}>
             <Avatar url={user.avatar ?? user.image} name={user.label} />
             <span style={{ margin: '0 12px' }}>{user.email}</span>
-            <Tooltip content={t['404.signOut']()}>
-              <IconButton onClick={onSignOut}>
-                <SignOutIcon />
-              </IconButton>
-            </Tooltip>
+            <IconButton
+              onClick={onSignOut}
+              size="20"
+              tooltip={t['404.signOut']()}
+            >
+              <SignOutIcon />
+            </IconButton>
           </div>
         ) : null}
       </div>