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/card/workspace-card/index.tsx

@@ -3,7 +3,6 @@ import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { CollaborationIcon, SettingsIcon } from '@blocksuite/icons/rc';
 import type { WorkspaceMetadata } from '@toeverything/infra';
-import clsx from 'clsx';
 import { type MouseEvent, useCallback } from 'react';
 
 import { Button } from '../../../ui/button';
@@ -89,8 +88,7 @@ export const WorkspaceCard = ({
             <Button
               loading={!!openingId && openingId === meta.id}
               disabled={!!openingId}
-              type="default"
-              className={clsx(styles.enableCloudButton, styles.showOnCardHover)}
+              className={styles.showOnCardHover}
               onClick={onEnableCloud}
             >
               {enableCloudText}

packages/frontend/component/src/components/card/workspace-card/styles.css.ts

@@ -79,21 +79,16 @@ export const settingButton = style({
       boxShadow: cssVar('shadow1'),
       background: cssVar('white80'),
     },
-    // [`.${card}:hover &:hover`]: {
-    //   background: cssVar('hoverColor'),
-    // },
   },
 });
 
-export const enableCloudButton = style({
-  background: 'transparent',
-});
-
 export const showOnCardHover = style({
-  display: 'none',
+  visibility: 'hidden',
+  opacity: 0,
   selectors: {
     [`.${card}:hover &`]: {
-      display: 'block',
+      visibility: 'visible',
+      opacity: 1,
     },
   },
 });