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" />
2026-02-18 06:47:02 +08:00 · 2025-04-01 01:35:59 +00:00
parent b099deb6df
commit eac8f32f4c
13 changed files with 84 additions and 73 deletions
--- a/blocksuite/affine/blocks/block-attachment/src/components/styles.ts
+++ b/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);
--- a/blocksuite/affine/components/src/color-picker/styles.ts
+++ b/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);
  }
--- a/blocksuite/affine/components/src/embed-card-modal/embed-card-edit-modal.ts
+++ b/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;
--- a/blocksuite/affine/components/src/embed-card-modal/styles.ts
+++ b/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;
--- a/blocksuite/affine/components/src/filterable-list/styles.ts
+++ b/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;

--- a/blocksuite/affine/components/src/toolbar/menu-button.ts
+++ b/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);
    }
--- a/blocksuite/affine/components/src/toolbar/toolbar.ts
+++ b/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;
    }
--- a/blocksuite/affine/inlines/link/src/link-node/link-popup/styles.ts
+++ b/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);
  }
--- a/blocksuite/affine/inlines/reference/src/reference-node/reference-popup/reference-popup.ts
+++ b/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;
    }
--- a/blocksuite/affine/shared/src/styles/font.ts
+++ b/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(`
-  font-family: ${baseTheme.fontSansFamily};
-  font-feature-settings:
-    'clig' off,
-    'liga' off;
-  font-style: normal;
-`);
+export const fontBaseStyle = (container: string) => css`
+  ${unsafeCSS(container)} {
+    font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
+    font-feature-settings:
+      'clig' off,
+      'liga' off;
+    font-style: normal;
+  }
+`;

-export const FONT_SM = unsafeCSS(`
-  ${FONT_BASE};
-  font-size: var(--affine-font-sm);
-  font-weight: 500;
-  line-height: 22px;
-`);
+export const fontSMStyle = (container: string) => css`
+  ${fontBaseStyle(container)}
+  ${unsafeCSS(container)} {
+    font-size: var(--affine-font-sm);
+    font-weight: 500;
+    line-height: 22px;
+  }
+`;

-export const FONT_XS = unsafeCSS(`
-  ${FONT_BASE};
-  font-size: var(--affine-font-xs);
-  font-weight: 500;
-  line-height: 20px;
-`);
+export const fontXSStyle = (container: string) => css`
+  ${fontBaseStyle(container)}
+  ${unsafeCSS(container)} {
+    font-size: var(--affine-font-xs);
+    font-weight: 500;
+    line-height: 20px;
+  }
+`;
--- a/blocksuite/affine/shared/src/styles/index.ts
+++ b/blocksuite/affine/shared/src/styles/index.ts
@@ -1,4 +1,4 @@
-export { FONT_BASE, FONT_SM, FONT_XS } from './font';
-export { PANEL_BASE, PANEL_BASE_COLORS } from './panel';
+export { fontBaseStyle, fontSMStyle, fontXSStyle } from './font';
+export { panelBaseColorsStyle, panelBaseStyle } from './panel';
 export { scrollbarStyle } from './scrollbar-style';
 export { affineTextStyles } from './text';
--- a/blocksuite/affine/shared/src/styles/panel.ts
+++ b/blocksuite/affine/shared/src/styles/panel.ts
@@ -1,23 +1,26 @@
-import { cssVarV2 } from '@toeverything/theme/v2';
-import { unsafeCSS } from 'lit';
+import { css, 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(`
-  color: var(--affine-icon-color);
-  box-shadow: var(--affine-overlay-shadow);
-  background: ${cssVarV2('layer/background/overlayPanel')};
-`);
+export const panelBaseColorsStyle = (container: string) => css`
+  ${unsafeCSS(container)} {
+    color: var(--affine-icon-color);
+    box-shadow: var(--affine-overlay-shadow);
+    background: ${unsafeCSSVarV2('layer/background/overlayPanel')};
+  }
+`;

-export const PANEL_BASE = unsafeCSS(`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: max-content;
-  padding: 0 6px;
-  border-radius: 4px;
-  border: 0.5px solid ${cssVarV2('layer/insideBorder/border')};
-
-  ${PANEL_BASE_COLORS};
-  ${FONT_SM};
-`);
+export const panelBaseStyle = (container: string) => css`
+  ${unsafeCSS(container)} {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: max-content;
+    padding: 0 6px;
+    border-radius: 8px;
+    border: 0.5px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
+  }
+  ${panelBaseColorsStyle(container)}
+  ${fontSMStyle(container)}
+`;