refactor(component): migrate design components (#5000)

```[tasklist]
### Tasks
- [x] Migrate components from [design](https://github.com/toeverything/design)
- [x] Replace all imports from `@toeverything/components`
- [x] Clean up `@toeverything/components` dependencies
- [x] Storybook
```

### Influence

Here are all the components that are influenced by `@toeverything/components`

- `@affine/component`
    - App update `Button` `Tooltip`
    - App sidebar header `IconButton`, `Tooltip`
    - Back `Button`
    - Auth
      - Change email page save `Button`
      - Change password page all `Button`s (Save, Later, Open)
      - Confirm change email `Button`
      - Set password page `Button`
      - Sign in success page `Button`
      - Sign up page `Button`
      - Auth `Modal`
    - Workspace card `Avatar`, `Divider`, `Tooltip`, `IconButton`
    - Share
      - Disable shared public link `Modal`
    - Import page `IconButton`, `Tooltip`
    - Accept invite page `Avatar`, `Button`
    - Invite member `Modal`
    - 404 Page `Avatar`, `Button`, `IconButton`, `Tooltip`
    - Notification center `IconButton`
    - Page list
      - operation cell `IconButton`, `Menu`, `ConfirmModal`, `Tooltip`
      - tags more `Menu`
      - favorite `IconButton`, `Tooltip`
      - new page dropdown `Menu`
      - filter `Menu`, `Button`, `IconButton`
    - Page operation `Menu`
      - export `MenuItem`
      - move to trash `MenuItem`, `ConfirmModal`
    - Workspace header filter `Menu`, `Button`
    - Collection bar `Button`, `Tooltip` (*⚠️ seems not used*)
    - Collection operation `Menu`, `MenuItem`
      - Create collection `Modal`, `Button`
      - Edit collection `Modal`, `Button`
      - Page mode filter `Menu`
      - Page mode `Button`, `Menu`
    - Setting modal
      - storage usage progress `Button`, `Tooltip`
    - On boarding tour `Modal`
- `@affine/core`
  - Bookmark `Menu`
  - Affine error boundary `Button`
  - After sign in send email `Button`
  - After sign up send email `Button`
  - Send email `Button`
  - Sign in `Button`
  - Subscription redirect `Loading`, `Button`
  - Setting `Modal`
    - User plan button `Tooltip`
    - Members `Avatar`, `Button`, `IconButton`, `Loading`, `Tooltip`, `Menu`
    - Profile `Button`, `Avatar`
    - Workspace
      - publish panel `Button`, `Tooltip`
      - export panel `Button`
      - storage panel `Button`, `Tooltip`
      - delete `ConfirmModal`
    - Language `Menu`
    - Account setting `Avatar`, `Button`
    - Date format setting `Menu`
    - Billing `Button`, `IconButton`, `Loading`
    - Payment plans `Button`, `ConfirmModal`, `Modal`, `Tooltip`
  - Create workspace `Modal`, `ConfirmModal`, `Button`
  - Payment disabled `ConfirmModal`
  - Share/Export `Menu`, `Button`, `Divider`
  - Sign out `ConfirmModal`
  - Temp disable affine cloud `Modal`
  - Page detail operation `Menu`
  - Blocksuite mode switch `Tooltip`
  - Login card `Avatar`
  - Help island `Tooltip`
- `plugin`
  - copilot
  - hello world
  - image preview
  - outline

packages/frontend/component/src/ui/modal/styles.css.ts

@@ -0,0 +1,79 @@
+import { createVar, style } from '@vanilla-extract/css';
+
+export const widthVar = createVar('widthVar');
+export const heightVar = createVar('heightVar');
+export const minHeightVar = createVar('minHeightVar');
+
+export const modalOverlay = style({
+  position: 'fixed',
+  inset: 0,
+  backgroundColor: 'var(--affine-background-modal-color)',
+  zIndex: 'var(--affine-z-index-modal)',
+});
+
+export const modalContent = style({
+  vars: {
+    [widthVar]: '',
+    [heightVar]: '',
+    [minHeightVar]: '',
+  },
+  width: widthVar,
+  height: heightVar,
+  minHeight: minHeightVar,
+  boxSizing: 'border-box',
+  fontSize: 'var(--affine-font-base)',
+  fontWeight: '400',
+  lineHeight: '1.6',
+  padding: '20px 24px',
+  backgroundColor: 'var(--affine-background-overlay-panel-color)',
+  boxShadow: 'var(--affine-popover-shadow)',
+  borderRadius: '12px',
+  maxHeight: 'calc(100vh - 32px)',
+  // :focus-visible will set outline
+  outline: 'none',
+  position: 'fixed',
+  zIndex: 'var(--affine-z-index-modal)',
+  top: ' 50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+});
+
+export const closeButton = style({
+  position: 'absolute',
+  top: '22px',
+  right: '20px',
+});
+
+export const modalHeader = style({
+  fontSize: 'var(--affine-font-h-6)',
+  fontWeight: '600',
+  lineHeight: '1.45',
+  marginBottom: '12px',
+});
+export const modalDescription = style({
+  // marginBottom: '20px',
+});
+
+export const modalFooter = style({
+  display: 'flex',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+  paddingTop: '40px',
+  marginTop: 'auto',
+  gap: '20px',
+  selectors: {
+    '&.modalFooterWithChildren': {
+      paddingTop: '20px',
+    },
+  },
+});
+
+export const confirmModalContent = style({
+  marginTop: '12px',
+  marginBottom: '20px',
+});
+
+export const confirmModalContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+});