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/core/src/pages/expired.tsx

@@ -17,7 +17,7 @@ export const Component = () => {
       title={t['com.affine.expired.page.title']()}
       subtitle={t['com.affine.expired.page.subtitle']()}
     >
-      <Button type="primary" size="large" onClick={onOpenAffine}>
+      <Button variant="primary" size="large" onClick={onOpenAffine}>
         {t['com.affine.auth.open.affine']()}
       </Button>
     </AuthPageContainer>

packages/frontend/core/src/pages/subscribe.tsx

@@ -154,7 +154,7 @@ export const Component = () => {
         <>
           {error}
           <br />
-          <Button type="primary" onClick={() => setRetryKey(i => i + 1)}>
+          <Button variant="primary" onClick={() => setRetryKey(i => i + 1)}>
             Retry
           </Button>
         </>

packages/frontend/core/src/pages/workspace/all-collection/header.css.ts

@@ -1,12 +1,10 @@
 import { style } from '@vanilla-extract/css';
 
 export const headerCreateNewCollectionIconButton = style({
-  padding: '4px 8px',
-  fontSize: '16px',
   width: '32px',
-  height: '28px',
-  borderRadius: '8px',
-  transition: 'opacity 0.1s ease-in-out',
+  height: '32px',
+  borderRadius: 8,
+  transition: 'all 0.1s ease-in-out',
 });
 export const headerCreateNewButtonHidden = style({
   opacity: 0,

packages/frontend/core/src/pages/workspace/all-collection/header.tsx

@@ -17,8 +17,8 @@ export const AllCollectionHeader = ({
     <Header
       right={
         <IconButton
-          type="default"
-          icon={<PlusIcon fontSize={16} />}
+          size="16"
+          icon={<PlusIcon />}
           onClick={onCreateCollection}
           className={clsx(
             styles.headerCreateNewCollectionIconButton,

packages/frontend/core/src/pages/workspace/collection/collection.css.ts

@@ -27,10 +27,8 @@ export const headerCreateNewButton = style({
   transition: 'opacity 0.1s ease-in-out',
 });
 export const headerCreateNewCollectionIconButton = style({
-  padding: '4px 8px',
-  fontSize: '16px',
-  width: '32px',
-  height: '28px',
+  width: '30px',
+  height: '30px',
   borderRadius: '8px',
 });
 export const headerCreateNewButtonHidden = style({

packages/frontend/core/src/pages/workspace/collection/header.tsx

@@ -19,8 +19,8 @@ export const CollectionDetailHeader = ({
       right={
         <>
           <IconButton
-            type="default"
-            icon={<PlusIcon fontSize={16} />}
+            size="16"
+            icon={<PlusIcon />}
             onClick={onCreate}
             className={clsx(
               styles.headerCreateNewButton,

packages/frontend/core/src/pages/workspace/detail-page/tabs/journal.tsx

@@ -330,7 +330,7 @@ const ConflictList = ({
                   />
                 }
               >
-                <IconButton type="plain">
+                <IconButton>
                   <MoreHorizontalIcon />
                 </IconButton>
               </Menu>