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/components/src/color-picker/styles.ts

@@ -1,4 +1,4 @@
-import { FONT_SM, FONT_XS } from '@blocksuite/affine-shared/styles';
+import { fontSMStyle, fontXSStyle } from '@blocksuite/affine-shared/styles';
 import { css } from 'lit';
 
 export const COLOR_PICKER_STYLE = css`
@@ -21,6 +21,7 @@ export const COLOR_PICKER_STYLE = css`
     background: var(--affine-hover-color);
   }
 
+  ${fontXSStyle('nav button')}
   nav button {
     display: flex;
     padding: 4px 8px;
@@ -29,7 +30,6 @@ export const COLOR_PICKER_STYLE = css`
     align-items: center;
     flex: 1 0 0;
 
-    ${FONT_XS};
     color: var(--affine-text-secondary-color);
     font-weight: 600;
 
@@ -61,6 +61,7 @@ export const COLOR_PICKER_STYLE = css`
     flex: 1 0 0;
   }
 
+  ${fontXSStyle('.modes .mode button')}
   .modes .mode button {
     position: relative;
     display: flex;
@@ -75,7 +76,6 @@ export const COLOR_PICKER_STYLE = css`
     border: 1px solid var(--affine-border-color);
     box-sizing: border-box;
 
-    ${FONT_XS};
     font-weight: 400;
     color: #8e8d91;
   }
@@ -268,6 +268,7 @@ export const COLOR_PICKER_STYLE = css`
     gap: 0;
   }
 
+  ${fontSMStyle('input')}
   input {
     display: flex;
     width: 100%;
@@ -275,7 +276,6 @@ export const COLOR_PICKER_STYLE = css`
     background: transparent;
     border: none;
     outline: none;
-    ${FONT_SM};
     font-weight: 400;
     color: var(--affine-text-primary-color);
   }

blocksuite/affine/components/src/embed-card-modal/embed-card-edit-modal.ts

@@ -9,7 +9,7 @@ import {
   type TelemetryEvent,
   TelemetryProvider,
 } from '@blocksuite/affine-shared/services';
-import { FONT_SM, FONT_XS } from '@blocksuite/affine-shared/styles';
+import { fontSMStyle, fontXSStyle } from '@blocksuite/affine-shared/styles';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import {
   listenClickAway,
@@ -90,8 +90,8 @@ export class EmbedCardEditModal extends SignalWatcher(
       background: transparent;
       border: 1px solid ${unsafeCSSVarV2('input/border/default')};
       color: var(--affine-text-primary-color);
-      ${FONT_SM};
     }
+    ${fontSMStyle('.row .input')}
     .input::placeholder {
       color: var(--affine-placeholder-color);
     }
@@ -117,9 +117,9 @@ export class EmbedCardEditModal extends SignalWatcher(
       border-radius: 4px;
       border: 1px solid ${unsafeCSSVarV2('button/innerBlackBorder')};
       background: ${unsafeCSSVarV2('button/secondary')};
-      ${FONT_XS};
       color: ${unsafeCSSVarV2('text/primary')};
     }
+    ${fontXSStyle('.row.actions .button')}
     .row.actions .button[disabled],
     .row.actions .button:disabled {
       pointer-events: none;

blocksuite/affine/components/src/embed-card-modal/styles.ts

@@ -1,4 +1,4 @@
-import { FONT_XS, PANEL_BASE } from '@blocksuite/affine-shared/styles';
+import { fontXSStyle, panelBaseStyle } from '@blocksuite/affine-shared/styles';
 import { css } from 'lit';
 
 export const embedCardModalStyles = css`
@@ -12,8 +12,8 @@ export const embedCardModalStyles = css`
     z-index: 1;
   }
 
+  ${panelBaseStyle('.embed-card-modal-wrapper')}
   .embed-card-modal-wrapper {
-    ${PANEL_BASE};
     flex-direction: column;
     position: absolute;
     left: 0;
@@ -50,8 +50,8 @@ export const embedCardModalStyles = css`
     border: 1px solid var(--affine-border-color);
     background: var(--affine-white-10);
     color: var(--affine-text-primary-color);
-    ${FONT_XS};
   }
+  ${fontXSStyle('.embed-card-modal-input')}
   input.embed-card-modal-input {
     padding-top: 4px;
     padding-bottom: 4px;

blocksuite/affine/components/src/filterable-list/styles.ts

@@ -1,10 +1,12 @@
-import { PANEL_BASE, scrollbarStyle } from '@blocksuite/affine-shared/styles';
+import {
+  panelBaseStyle,
+  scrollbarStyle,
+} from '@blocksuite/affine-shared/styles';
 import { css } from 'lit';
 
 export const filterableListStyles = css`
+  ${panelBaseStyle(':host')}
   :host {
-    ${PANEL_BASE};
-
     flex-direction: column;
     padding: 0;
 

blocksuite/affine/components/src/toolbar/menu-button.ts

@@ -1,4 +1,4 @@
-import { PANEL_BASE } from '@blocksuite/affine-shared/styles';
+import { panelBaseStyle } from '@blocksuite/affine-shared/styles';
 import {
   type ButtonPopperOptions,
   createButtonPopper,
@@ -117,8 +117,8 @@ export class EditorMenuContent extends LitElement {
       overflow-y: auto;
     }
 
+    ${panelBaseStyle(':host([data-show])')}
     :host([data-show]) {
-      ${PANEL_BASE};
       justify-content: center;
       padding: var(--content-padding, 0 6px);
     }

blocksuite/affine/components/src/toolbar/toolbar.ts

@@ -1,12 +1,12 @@
-import { PANEL_BASE } from '@blocksuite/affine-shared/styles';
+import { panelBaseStyle } from '@blocksuite/affine-shared/styles';
 import { stopPropagation } from '@blocksuite/affine-shared/utils';
 import { WithDisposable } from '@blocksuite/global/lit';
 import { css, html, LitElement } from 'lit';
 
 export class EditorToolbar extends WithDisposable(LitElement) {
   static override styles = css`
+    ${panelBaseStyle(':host')}
     :host {
-      ${PANEL_BASE};
       height: 36px;
       box-sizing: content-box;
     }