refactor(editor): basic styles of font and panel (#11290)

* Updated `border-radius` of panel to `8px`.  [BS-2901](https://linear.app/affine-design/issue/BS-2901/meta-info-ui-issue) [BS-2810](https://linear.app/affine-design/issue/BS-2810/toolbarpicker-圆角更新为-8px)
* Refactored basic styles of font and panel.

<img width="549" alt="Screenshot 2025-03-31 at 12 56 36" src="https://github.com/user-attachments/assets/4a827e1e-f802-4251-a563-4a34b891a5e3" />

blocksuite/affine/inlines/link/src/link-node/link-popup/styles.ts

@@ -1,9 +1,9 @@
-import { FONT_XS, PANEL_BASE } from '@blocksuite/affine-shared/styles';
+import { fontXSStyle, panelBaseStyle } from '@blocksuite/affine-shared/styles';
 import { css } from 'lit';
 
 const editLinkStyle = css`
+  ${panelBaseStyle('.affine-link-edit-popover')}
   .affine-link-edit-popover {
-    ${PANEL_BASE};
     display: grid;
     grid-template-columns: auto auto;
     grid-template-rows: repeat(2, 1fr);
@@ -18,20 +18,20 @@ const editLinkStyle = css`
     box-sizing: content-box;
   }
 
+  ${fontXSStyle('.affine-link-edit-popover label')}
   .affine-link-edit-popover label {
     box-sizing: border-box;
     color: var(--affine-icon-color);
-    ${FONT_XS};
     font-weight: 400;
   }
 
+  ${fontXSStyle('.affine-link-edit-popover input')}
   .affine-link-edit-popover input {
     color: inherit;
     padding: 0;
     border: none;
     background: transparent;
     color: var(--affine-text-primary-color);
-    ${FONT_XS};
   }
   .affine-link-edit-popover input::placeholder {
     color: var(--affine-placeholder-color);
@@ -125,8 +125,8 @@ export const linkPopupStyle = css`
     z-index: var(--affine-z-index-popover);
   }
 
+  ${panelBaseStyle('.affine-link-popover.create')}
   .affine-link-popover.create {
-    ${PANEL_BASE};
     gap: 12px;
     padding: 12px;
 
@@ -144,8 +144,8 @@ export const linkPopupStyle = css`
     border-style: solid;
     border-color: var(--affine-border-color);
     color: var(--affine-text-primary-color);
-    ${FONT_XS};
   }
+  ${fontXSStyle('.affine-link-popover-input')}
   .affine-link-popover-input::placeholder {
     color: var(--affine-placeholder-color);
   }

blocksuite/affine/inlines/reference/src/reference-node/reference-popup/reference-popup.ts

@@ -6,7 +6,7 @@ import {
   type TelemetryEvent,
   TelemetryProvider,
 } from '@blocksuite/affine-shared/services';
-import { FONT_XS, PANEL_BASE } from '@blocksuite/affine-shared/styles';
+import { fontXSStyle, panelBaseStyle } from '@blocksuite/affine-shared/styles';
 import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
 import { stopPropagation } from '@blocksuite/affine-shared/utils';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
@@ -36,8 +36,8 @@ export class ReferencePopup extends SignalWatcher(
       height: 100vh;
     }
 
+    ${panelBaseStyle('.popover-container')}
     .popover-container {
-      ${PANEL_BASE};
       position: absolute;
       display: flex;
       width: 321px;
@@ -68,8 +68,8 @@ export class ReferencePopup extends SignalWatcher(
       border: none;
       background: transparent;
       color: var(--affine-text-primary-color);
-      ${FONT_XS};
     }
+    ${fontXSStyle('input')}
     input::placeholder {
       color: var(--affine-placeholder-color);
     }
@@ -77,8 +77,8 @@ export class ReferencePopup extends SignalWatcher(
       outline: none;
     }
 
+    ${fontXSStyle('editor-icon-button.save .label')}
     editor-icon-button.save .label {
-      ${FONT_XS};
       color: inherit;
       text-transform: none;
     }