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/button/button.stories.css.ts

@@ -0,0 +1,61 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+// table
+export const table = style({
+  vars: { '--border-color': '#974FFF' },
+});
+globalStyle(`${table} thead td, ${table} tbody tr td:nth-child(1)`, {
+  backgroundColor: '#974FFF10',
+  padding: '16px',
+  fontWeight: 600,
+  fontSize: 12,
+  color: 'var(--border-color)',
+});
+globalStyle(`${table} td`, {
+  textAlign: 'center',
+  border: '0.5px dashed var(--border-color)',
+  borderTopColor: 'transparent',
+  borderBottomColor: 'transparent',
+  padding: '16px 8px',
+});
+globalStyle(`${table} thead td`, {
+  borderTopColor: 'var(--border-color)',
+});
+globalStyle(`${table} tbody tr:last-child td`, {
+  borderBottomColor: 'var(--border-color)',
+});
+
+export const settings = style({
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: '8px 100px',
+  marginBottom: 40,
+});
+globalStyle(`${settings} > section`, {
+  display: 'flex',
+  alignItems: 'center',
+});
+globalStyle(`${settings} > section > span`, {
+  display: 'inline-block',
+  width: 200,
+});
+
+export const overrideBackground = style({
+  background: 'cyan',
+});
+export const overrideTextColor = style({
+  color: 'red',
+});
+export const overrideBorder = style({
+  borderColor: 'green',
+});
+export const overrideFontSize = style({
+  fontSize: 24,
+});
+export const overrideIconSize = style({
+  width: 60,
+  height: 60,
+});
+export const overrideIconColor = style({
+  color: 'forestgreen',
+});