From eac8f32f4c556bfc7f9b20a21675af1ad42ffeb3 Mon Sep 17 00:00:00 2001 From: fundon Date: Tue, 1 Apr 2025 01:35:59 +0000 Subject: [PATCH] refactor(editor): basic styles of font and panel (#11290) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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. Screenshot 2025-03-31 at 12 56 36 --- .../block-attachment/src/components/styles.ts | 6 +-- .../components/src/color-picker/styles.ts | 8 ++-- .../embed-card-modal/embed-card-edit-modal.ts | 6 +-- .../components/src/embed-card-modal/styles.ts | 6 +-- .../components/src/filterable-list/styles.ts | 8 ++-- .../components/src/toolbar/menu-button.ts | 4 +- .../affine/components/src/toolbar/toolbar.ts | 4 +- .../link/src/link-node/link-popup/styles.ts | 12 ++--- .../reference-popup/reference-popup.ts | 8 ++-- blocksuite/affine/shared/src/styles/font.ts | 46 +++++++++++-------- blocksuite/affine/shared/src/styles/index.ts | 4 +- blocksuite/affine/shared/src/styles/panel.ts | 43 +++++++++-------- .../e2e/edgeless/color-picker.spec.ts | 2 +- 13 files changed, 84 insertions(+), 73 deletions(-) diff --git a/blocksuite/affine/blocks/block-attachment/src/components/styles.ts b/blocksuite/affine/blocks/block-attachment/src/components/styles.ts index a5c873cb6..0b6deadf4 100644 --- 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); diff --git a/blocksuite/affine/components/src/color-picker/styles.ts b/blocksuite/affine/components/src/color-picker/styles.ts index c2ec08e3e..071d9d903 100644 --- 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); } diff --git 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 index 097ae3a22..d2592e037 100644 --- 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; diff --git a/blocksuite/affine/components/src/embed-card-modal/styles.ts b/blocksuite/affine/components/src/embed-card-modal/styles.ts index 98b17e52f..89b2e7bbc 100644 --- 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; diff --git a/blocksuite/affine/components/src/filterable-list/styles.ts b/blocksuite/affine/components/src/filterable-list/styles.ts index babec3373..1b9f094f1 100644 --- 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; diff --git a/blocksuite/affine/components/src/toolbar/menu-button.ts b/blocksuite/affine/components/src/toolbar/menu-button.ts index 076d6efdf..6fc3b17af 100644 --- 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); } diff --git a/blocksuite/affine/components/src/toolbar/toolbar.ts b/blocksuite/affine/components/src/toolbar/toolbar.ts index bbf91b15a..2e3b39511 100644 --- 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; } diff --git a/blocksuite/affine/inlines/link/src/link-node/link-popup/styles.ts b/blocksuite/affine/inlines/link/src/link-node/link-popup/styles.ts index e6af4d449..e292d505d 100644 --- 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); } diff --git 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 index 7ab79fc00..48a7f3f4c 100644 --- 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; } diff --git a/blocksuite/affine/shared/src/styles/font.ts b/blocksuite/affine/shared/src/styles/font.ts index 2d6d86d63..43bd267f7 100644 --- 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; + } +`; diff --git a/blocksuite/affine/shared/src/styles/index.ts b/blocksuite/affine/shared/src/styles/index.ts index 626f93651..8af751d08 100644 --- 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'; diff --git a/blocksuite/affine/shared/src/styles/panel.ts b/blocksuite/affine/shared/src/styles/panel.ts index 9c1762763..b1fcb79bd 100644 --- 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)} +`; diff --git a/tests/blocksuite/e2e/edgeless/color-picker.spec.ts b/tests/blocksuite/e2e/edgeless/color-picker.spec.ts index ba295ad14..848900c9e 100644 --- a/tests/blocksuite/e2e/edgeless/color-picker.spec.ts +++ b/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);