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/blocks/block-attachment/src/components/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';
 
 export const renameStyles = css`
+  ${panelBaseStyle('.affine-attachment-rename-container')}
   .affine-attachment-rename-container {
-    ${PANEL_BASE};
     position: relative;
     display: flex;
     align-items: center;
@@ -35,8 +35,8 @@ export const renameStyles = css`
     outline: none;
     background: transparent;
     color: var(--affine-text-primary-color);
-    ${FONT_XS};
   }
+  ${fontXSStyle('.affine-attachment-rename-input-wrapper input')}
 
   .affine-attachment-rename-input-wrapper input::placeholder {
     color: var(--affine-placeholder-color);

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;
     }

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;
     }

blocksuite/affine/shared/src/styles/font.ts

@@ -1,24 +1,30 @@
 import { baseTheme } from '@toeverything/theme';
-import { unsafeCSS } from 'lit';
+import { css, unsafeCSS } from 'lit';
 
-export const FONT_BASE = unsafeCSS(`
+export const fontBaseStyle = (container: string) => css`
-  font-family: ${baseTheme.fontSansFamily};
+  ${unsafeCSS(container)} {
-  font-feature-settings:
+    font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
-    'clig' off,
+    font-feature-settings:
-    'liga' off;
+      'clig' off,
-  font-style: normal;
+      'liga' off;
-`);
+    font-style: normal;
+  }
+`;
 
-export const FONT_SM = unsafeCSS(`
+export const fontSMStyle = (container: string) => css`
-  ${FONT_BASE};
+  ${fontBaseStyle(container)}
-  font-size: var(--affine-font-sm);
+  ${unsafeCSS(container)} {
-  font-weight: 500;
+    font-size: var(--affine-font-sm);
-  line-height: 22px;
+    font-weight: 500;
-`);
+    line-height: 22px;
+  }
+`;
 
-export const FONT_XS = unsafeCSS(`
+export const fontXSStyle = (container: string) => css`
-  ${FONT_BASE};
+  ${fontBaseStyle(container)}
-  font-size: var(--affine-font-xs);
+  ${unsafeCSS(container)} {
-  font-weight: 500;
+    font-size: var(--affine-font-xs);
-  line-height: 20px;
+    font-weight: 500;
-`);
+    line-height: 20px;
+  }
+`;

blocksuite/affine/shared/src/styles/index.ts

@@ -1,4 +1,4 @@
-export { FONT_BASE, FONT_SM, FONT_XS } from './font';
+export { fontBaseStyle, fontSMStyle, fontXSStyle } from './font';
-export { PANEL_BASE, PANEL_BASE_COLORS } from './panel';
+export { panelBaseColorsStyle, panelBaseStyle } from './panel';
 export { scrollbarStyle } from './scrollbar-style';
 export { affineTextStyles } from './text';

blocksuite/affine/shared/src/styles/panel.ts

@@ -1,23 +1,26 @@
-import { cssVarV2 } from '@toeverything/theme/v2';
+import { css, unsafeCSS } from 'lit';
-import { unsafeCSS } from 'lit';
 
-import { FONT_SM } from './font.js';
+import { unsafeCSSVarV2 } from '../theme/css-variables';
+import { fontSMStyle } from './font';
 
-export const PANEL_BASE_COLORS = unsafeCSS(`
+export const panelBaseColorsStyle = (container: string) => css`
-  color: var(--affine-icon-color);
+  ${unsafeCSS(container)} {
-  box-shadow: var(--affine-overlay-shadow);
+    color: var(--affine-icon-color);
-  background: ${cssVarV2('layer/background/overlayPanel')};
+    box-shadow: var(--affine-overlay-shadow);
-`);
+    background: ${unsafeCSSVarV2('layer/background/overlayPanel')};
+  }
+`;
 
-export const PANEL_BASE = unsafeCSS(`
+export const panelBaseStyle = (container: string) => css`
-  display: flex;
+  ${unsafeCSS(container)} {
-  align-items: center;
+    display: flex;
-  gap: 8px;
+    align-items: center;
-  width: max-content;
+    gap: 8px;
-  padding: 0 6px;
+    width: max-content;
-  border-radius: 4px;
+    padding: 0 6px;
-  border: 0.5px solid ${cssVarV2('layer/insideBorder/border')};
+    border-radius: 8px;
-
+    border: 0.5px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
-  ${PANEL_BASE_COLORS};
+  }
-  ${FONT_SM};
+  ${panelBaseColorsStyle(container)}
-`);
+  ${fontSMStyle(container)}
+`;

tests/blocksuite/e2e/edgeless/color-picker.spec.ts

@@ -128,7 +128,7 @@ test.describe('basic functions', () => {
 
     await expect(colorPickerPanel).toBeVisible();
 
-    await colorPickerPanel.click({ position: { x: 0, y: 0 } });
+    await colorPickerPanel.click({ position: { x: 10, y: 10 } });
     await expect(colorPickerPanel).toBeVisible();
 
     await page.mouse.click(0, 0);