From 274e80551ccf27e88625be3721eeaf5f277aeff6 Mon Sep 17 00:00:00 2001 From: Fangdun Tsai Date: Mon, 23 Dec 2024 16:50:15 +0800 Subject: [PATCH] feat(editor): store real color values in edgeless --- .../affine/block-frame/src/frame-block.ts | 4 +- .../block-note/src/note-edgeless-block.ts | 18 +- .../src/renderer/canvas-renderer.ts | 11 +- .../src/renderer/elements/brush/index.ts | 4 +- .../src/renderer/elements/connector/index.ts | 9 +- .../src/renderer/elements/shape/index.ts | 13 +- .../src/renderer/elements/text/index.ts | 8 +- .../affine/block-surface/src/surface-block.ts | 4 +- .../affine/components/src/toolbar/styles.ts | 1 + .../model/src/blocks/frame/frame-model.ts | 2 +- .../model/src/blocks/note/note-model.ts | 5 +- blocksuite/affine/model/src/consts/brush.ts | 3 - blocksuite/affine/model/src/consts/color.ts | 97 -------- .../affine/model/src/consts/connector.ts | 5 - blocksuite/affine/model/src/consts/frame.ts | 3 - blocksuite/affine/model/src/consts/index.ts | 3 - blocksuite/affine/model/src/consts/line.ts | 11 +- blocksuite/affine/model/src/consts/note.ts | 35 --- blocksuite/affine/model/src/consts/shape.ts | 12 - blocksuite/affine/model/src/consts/text.ts | 11 +- .../affine/model/src/elements/brush/brush.ts | 2 +- .../model/src/elements/connector/connector.ts | 2 +- .../src/elements/connector/local-connector.ts | 2 +- .../model/src/elements/mindmap/style.ts | 111 +++++---- .../affine/model/src/elements/shape/shape.ts | 12 +- .../affine/model/src/elements/text/text.ts | 2 +- blocksuite/affine/model/src/index.ts | 1 + blocksuite/affine/model/src/themes/color.ts | 54 +++++ blocksuite/affine/model/src/themes/default.ts | 104 ++++++++ blocksuite/affine/model/src/themes/index.ts | 10 + blocksuite/affine/model/src/themes/types.ts | 36 +++ blocksuite/affine/model/src/themes/utils.ts | 29 +++ .../affine/shared/src/adapters/html/html.ts | 11 +- .../src/adapters/notion-html/notion-html.ts | 11 +- .../affine/shared/src/adapters/notion-text.ts | 4 +- .../src/adapters/plain-text/plain-text.ts | 11 +- .../shared/src/services/edit-props-store.ts | 7 +- .../shared/src/services/theme-service.ts | 57 ++--- .../affine/shared/src/utils/zod-schema.ts | 71 ++---- blocksuite/blocks/package.json | 7 +- .../src/__tests__/adapters/html.unit.spec.ts | 57 +++-- .../__tests__/adapters/markdown.unit.spec.ts | 75 +++--- .../adapters/notion-html.unit.spec.ts | 41 ++-- .../adapters/notion-text.unit.spec.ts | 4 +- .../adapters/plain-text.unit.spec.ts | 23 +- .../src/_common/adapters/markdown/markdown.ts | 11 +- .../blocks/src/_common/adapters/mix-text.ts | 11 +- .../auto-complete/auto-complete-panel.ts | 13 +- .../auto-complete/edgeless-auto-complete.ts | 4 +- .../components/color-picker/button.ts | 24 +- .../components/color-picker/color-picker.ts | 19 +- .../components/color-picker/consts.ts | 3 +- .../components/color-picker/custom-button.ts | 1 + .../edgeless/components/color-picker/types.ts | 6 +- .../edgeless/components/color-picker/utils.ts | 18 +- .../edgeless/components/panel/color-panel.ts | 90 +++---- .../components/panel/line-styles-panel.ts | 14 +- .../components/panel/stroke-style-panel.ts | 12 +- .../components/toolbar/brush/brush-menu.ts | 24 +- .../toolbar/connector/connector-menu.ts | 21 +- .../components/toolbar/edgeless-toolbar.ts | 13 +- .../toolbar/note/note-senior-button.ts | 2 +- .../toolbar/note/note-tool-button.ts | 2 +- .../components/toolbar/shape/shape-menu.ts | 46 ++-- .../components/toolbar/text/text-menu.ts | 11 +- .../edgeless/gfx-tool/copilot-tool.ts | 2 +- .../edgeless/gfx-tool/shape-tool.ts | 14 +- .../src/root-block/edgeless/utils/consts.ts | 6 - .../root-block/edgeless/utils/tool-overlay.ts | 10 +- .../element-toolbar/change-brush-button.ts | 67 +++--- .../change-connector-button.ts | 114 ++++----- .../element-toolbar/change-frame-button.ts | 57 ++--- .../element-toolbar/change-mindmap-button.ts | 2 +- .../element-toolbar/change-note-button.ts | 58 ++--- .../element-toolbar/change-shape-button.ts | 224 +++++++++--------- .../element-toolbar/change-text-menu.ts | 34 +-- .../widgets/frame-title/frame-title.ts | 7 +- .../mini-mindmap/surface-block.ts | 6 +- .../src/surface-ref-block/portal/note.ts | 4 +- .../__tests__/edgeless/color-picker.spec.ts | 1 - .../src/__tests__/edgeless/last-props.spec.ts | 58 ++--- .../__tests__/edgeless/surface-model.spec.ts | 6 +- blocksuite/tests-legacy/attachment.spec.ts | 70 +++++- .../tests-legacy/clipboard/list.spec.ts | 30 ++- .../edgeless/auto-complete.spec.ts | 29 +-- .../tests-legacy/edgeless/brush.spec.ts | 17 +- .../edgeless/connector/connector.spec.ts | 5 +- blocksuite/tests-legacy/edgeless/lock.spec.ts | 1 - .../tests-legacy/edgeless/note/note.spec.ts | 12 +- .../tests-legacy/edgeless/shape.spec.ts | 32 ++- .../tests-legacy/inline/inline-editor.spec.ts | 6 +- blocksuite/tests-legacy/link.spec.ts | 4 +- blocksuite/tests-legacy/package.json | 3 +- blocksuite/tests-legacy/slash-menu.spec.ts | 4 +- .../automatic-identify-url-text-final.json | 5 +- .../basic.spec.ts/basic-test-default.json | 5 +- ...opy-bookmark-url-by-copy-button-final.json | 5 +- ...reate-bookmark-in-edgeless-mode-final.json | 5 +- ...to-create-bookmark-in-page-mode-final.json | 5 +- ...ert-bookmark-block-to-link-text-final.json | 5 +- .../create-bookmark-by-slash-menu-final.json | 5 +- .../bookmark.spec.ts/embed-figma.json | 5 +- .../bookmark.spec.ts/embed-youtube.json | 5 +- .../bookmark.spec.ts/horizontal-figma.json | 5 +- .../bookmark.spec.ts/horizontal-youtube.json | 5 +- ...rk-block-directly-after-add-paragraph.json | 5 +- ...ng-bookmark-block-directly-after-drag.json | 7 +- ...dragging-bookmark-block-directly-init.json | 7 +- .../auto-identify-url-final.json | 5 +- ...-copy-will-reappear-content-after-cut.json | 5 +- ...opy-will-reappear-content-after-paste.json | 5 +- ...-block-except-type-text-after-paste-1.json | 5 +- ...-block-except-type-text-after-paste-2.json | 5 +- ...opy-menu-copy-whole-code-block-pasted.json | 5 +- ...menu-copy-the-empty-code-block-pasted.json | 5 +- .../delete-code-block-in-more-menu-final.json | 5 +- .../duplicate-code-block-final.json | 5 +- .../format-text-in-code-block-format.json | 5 +- .../format-text-in-code-block-init.json | 5 +- .../format-text-in-code-block-link.json | 5 +- ...own-syntax-can-create-code-block-init.json | 5 +- ...can-create-code-block-markdown-syntax.json | 5 +- ...level-in-multi-level-nesting-drag-3-4.json | 5 +- ...level-in-multi-level-nesting-drag-3-9.json | 5 +- ...level-in-multi-level-nesting-drag-4-3.json | 5 +- ...ach-level-in-multi-level-nesting-init.json | 5 +- ...ultiple-blocks-to-nested-block-finial.json | 7 +- ...-multiple-blocks-to-nested-block-init.json | 7 +- ...-limit-for-embed-block-add-linked-doc.json | 7 +- .../min-width-limit-for-embed-block-drag.json | 7 +- .../min-width-limit-for-embed-block-init.json | 7 +- ...or-embed-block-link-to-card-min-width.json | 7 +- ...th-limit-for-embed-block-link-to-card.json | 7 +- ...-line-when-edgeless-text-exist-finial.json | 7 +- ...e-when-edgeless-text-exist-note-empty.json | 7 +- ...en-edgeless-text-exist-note-not-empty.json | 7 +- ...-from-block-selection-with-format-bar.json | 5 +- ...change-background-color-default-color.json | 5 +- ...-able-to-change-background-color-init.json | 5 +- ...to-change-background-color-select-all.json | 5 +- ...ge-to-heading-paragraph-type-bulleted.json | 5 +- ...ange-to-heading-paragraph-type-finial.json | 5 +- ...change-to-heading-paragraph-type-init.json | 5 +- ...ick-bar-be-able-to-format-text-finial.json | 5 +- ...quick-bar-be-able-to-format-text-init.json | 5 +- ...text-when-select-multiple-line-finial.json | 5 +- ...t-text-when-select-multiple-line-init.json | 5 +- ...quick-bar-be-able-to-link-text-finial.json | 5 +- ...t-quick-bar-be-able-to-link-text-init.json | 5 +- ...-bar-show-after-convert-to-code-block.json | 5 +- ...on-works-when-update-block-type-final.json | 5 +- ...ion-works-when-update-block-type-init.json | 5 +- ...-bar-work-in-multiple-block-selection.json | 5 +- ...ck-bar-work-in-single-block-selection.json | 5 +- ...ted-after-setting-heading-by-shortkey.json | 5 +- ...ine-rich-text-inline-code-hotkey-init.json | 5 +- ...ine-rich-text-inline-code-hotkey-redo.json | 5 +- ...ine-rich-text-inline-code-hotkey-undo.json | 5 +- .../should-cut-work-multiple-line-init.json | 5 +- .../should-cut-work-multiple-line-undo.json | 5 +- .../should-cut-work-single-line-init.json | 5 +- .../should-cut-work-single-line-undo.json | 5 +- .../should-hotkey-work-in-paragraph-init.json | 5 +- ...ould-hotkey-work-in-paragraph-press-0.json | 5 +- ...ould-hotkey-work-in-paragraph-press-6.json | 5 +- ...ould-hotkey-work-in-paragraph-press-8.json | 5 +- ...ould-hotkey-work-in-paragraph-press-9.json | 5 +- ...ould-hotkey-work-in-paragraph-press-d.json | 5 +- ...ltiple-line-format-hotkey-work-finial.json | 5 +- ...multiple-line-format-hotkey-work-init.json | 5 +- ...single-line-format-hotkey-work-finial.json | 5 +- ...d-single-line-format-hotkey-work-init.json | 5 +- ...formatted-cursor-with-hotkey-bold-ggg.json | 5 +- ...formatted-cursor-with-hotkey-bold-hhh.json | 5 +- ...use-formatted-cursor-with-hotkey-bold.json | 5 +- ...use-formatted-cursor-with-hotkey-init.json | 5 +- ...ket-complete-with-backtick-works-undo.json | 5 +- ...-bracket-complete-with-backtick-works.json | 5 +- ...ted-after-setting-heading-by-shortkey.json | 5 +- .../should-cut-work-single-line-init.json | 5 +- .../should-cut-work-single-line-undo.json | 5 +- .../should-hotkey-work-in-paragraph-init.json | 5 +- ...ould-hotkey-work-in-paragraph-press-0.json | 5 +- ...ould-hotkey-work-in-paragraph-press-6.json | 5 +- ...ould-hotkey-work-in-paragraph-press-8.json | 5 +- ...ould-hotkey-work-in-paragraph-press-9.json | 5 +- ...ould-hotkey-work-in-paragraph-press-d.json | 5 +- ...single-line-format-hotkey-work-finial.json | 5 +- ...d-single-line-format-hotkey-work-init.json | 5 +- .../type-character-jump-out-code-node-1.json | 5 +- .../type-character-jump-out-code-node-2.json | 5 +- ...cursor-with-hotkey-at-empty-line-bold.json | 5 +- ...formatted-cursor-with-hotkey-bold-ggg.json | 5 +- ...formatted-cursor-with-hotkey-bold-hhh.json | 5 +- ...use-formatted-cursor-with-hotkey-bold.json | 5 +- ...use-formatted-cursor-with-hotkey-init.json | 5 +- ...ine-rich-text-inline-code-hotkey-init.json | 5 +- ...ine-rich-text-inline-code-hotkey-redo.json | 5 +- ...ine-rich-text-inline-code-hotkey-undo.json | 5 +- .../should-cut-work-multiple-line-init.json | 5 +- .../should-cut-work-multiple-line-undo.json | 5 +- ...ltiple-line-format-hotkey-work-finial.json | 5 +- ...multiple-line-format-hotkey-work-init.json | 5 +- ...g-markdown-shortcut-with-enter-finial.json | 5 +- ...ing-markdown-shortcut-with-enter-init.json | 5 +- ...g-markdown-shortcut-with-space-finial.json | 5 +- ...ing-markdown-shortcut-with-space-init.json | 5 +- ...d-latex-block-using-slash-menu-finial.json | 5 +- ...add-latex-block-using-slash-menu-init.json | 5 +- .../snapshots/link.spec.ts/basic-link.json | 5 +- .../link.spec.ts/convert-link-to-card.json | 5 +- ...can-create-linked-page-and-jump-final.json | 5 +- .../can-create-linked-page-and-jump-init.json | 5 +- ...nked-page-should-paste-as-linked-page.json | 5 +- ...nked-page-should-paste-as-linked-page.json | 5 +- ...uld-create-and-switch-page-work-final.json | 5 +- ...ould-create-and-switch-page-work-init.json | 5 +- ...c-indent-and-unindent-after-shift-tab.json | 5 +- .../basic-indent-and-unindent-after-tab.json | 5 +- .../basic-indent-and-unindent-init.json | 5 +- ...ggle-in-readonly-mode-before-readonly.json | 5 +- ...oggle-icon-should-collapsed-list-init.json | 5 +- ...gle-icon-should-collapsed-list-toggle.json | 5 +- ...onvert-nested-paragraph-to-list-final.json | 5 +- ...convert-nested-paragraph-to-list-init.json | 5 +- .../enter-list-block-with-empty-text-1.json | 5 +- .../enter-list-block-with-empty-text-2.json | 5 +- .../enter-list-block-with-empty-text-3.json | 5 +- .../enter-list-block-with-empty-text-4.json | 5 +- .../enter-list-block-with-empty-text-5.json | 5 +- ...enter-list-block-with-empty-text-init.json | 5 +- ...dent-item-should-expand-toggle-finial.json | 5 +- ...indent-item-should-expand-toggle-init.json | 5 +- ...dent-item-should-expand-toggle-toggle.json | 5 +- .../nested-list-blocks-finial.json | 5 +- .../list.spec.ts/nested-list-blocks-init.json | 5 +- ...todo-block-preserve-todo-status-final.json | 5 +- ...-todo-block-preserve-todo-status-init.json | 5 +- ...ks-when-following-custom-blocks-final.json | 5 +- ...cks-when-following-custom-blocks-init.json | 5 +- ...in-line-start-after-press-backspace-2.json | 5 +- ...in-line-start-after-press-backspace-3.json | 5 +- ...e-in-line-start-after-press-backspace.json | 5 +- ...-indent-and-delete-in-line-start-init.json | 5 +- ...hild-block-should-work-at-enter-final.json | 5 +- ...child-block-should-work-at-enter-init.json | 5 +- ...hold-cursor-in-correct-position-final.json | 5 +- ...-hold-cursor-in-correct-position-init.json | 5 +- ...unindent-works-with-children-indent-2.json | 5 +- ...unindent-works-with-children-indent-3.json | 5 +- ...unindent-works-with-children-indent-4.json | 5 +- ...d-unindent-works-with-children-indent.json | 5 +- ...and-unindent-works-with-children-init.json | 5 +- ...indent-works-with-children-unindent-1.json | 5 +- ...indent-works-with-children-unindent-2.json | 5 +- ...indent-works-with-children-unindent-3.json | 5 +- ...or-should-insert-a-new-editable-block.json | 5 +- .../should-indent-multi-selection-block.json | 5 +- ...selected-blocks-when-entering-tab-key.json | 5 +- ...-unindent-multi-selection-block-final.json | 5 +- ...d-unindent-multi-selection-block-init.json | 5 +- ...multi-selection-block-after-shift-tab.json | 5 +- ...ative-multi-selection-block-after-tab.json | 5 +- ...ge-delete-with-indent-after-backspace.json | 5 +- ...e-range-delete-with-indent-after-redo.json | 5 +- ...e-range-delete-with-indent-after-undo.json | 5 +- .../native-range-delete-with-indent-init.json | 5 +- ...ative-multi-selection-block-after-tab.json | 5 +- ...-by-slash-menu-should-remove-children.json | 5 +- .../tests-legacy/utils/actions/edgeless.ts | 24 +- blocksuite/tests-legacy/utils/actions/misc.ts | 3 +- blocksuite/tests-legacy/utils/asserts.ts | 25 +- .../editor/edgeless/connector.tsx | 52 ++-- .../editor/edgeless/docs/connector.json | 9 +- .../editor/edgeless/docs/flow.json | 2 +- .../editor/edgeless/docs/mindmap.json | 50 +++- .../editor/edgeless/docs/note.json | 7 +- .../editor/edgeless/docs/pen.json | 118 ++++----- .../editor/edgeless/docs/shape.json | 47 ++-- .../editor/edgeless/docs/text.json | 4 +- .../general-setting/editor/edgeless/note.tsx | 29 ++- .../general-setting/editor/edgeless/pen.tsx | 28 ++- .../general-setting/editor/edgeless/point.tsx | 2 +- .../general-setting/editor/edgeless/shape.tsx | 82 ++++--- .../general-setting/editor/edgeless/text.tsx | 29 ++- .../setting/general-setting/editor/utils.ts | 78 +++--- yarn.lock | 12 + 287 files changed, 2214 insertions(+), 1517 deletions(-) delete mode 100644 blocksuite/affine/model/src/consts/brush.ts delete mode 100644 blocksuite/affine/model/src/consts/color.ts delete mode 100644 blocksuite/affine/model/src/consts/frame.ts create mode 100644 blocksuite/affine/model/src/themes/color.ts create mode 100644 blocksuite/affine/model/src/themes/default.ts create mode 100644 blocksuite/affine/model/src/themes/index.ts create mode 100644 blocksuite/affine/model/src/themes/types.ts create mode 100644 blocksuite/affine/model/src/themes/utils.ts diff --git a/blocksuite/affine/block-frame/src/frame-block.ts b/blocksuite/affine/block-frame/src/frame-block.ts index 61f583b842a62..dac2749ede538 100644 --- a/blocksuite/affine/block-frame/src/frame-block.ts +++ b/blocksuite/affine/block-frame/src/frame-block.ts @@ -1,4 +1,4 @@ -import type { FrameBlockModel } from '@blocksuite/affine-model'; +import { DefaultTheme, type FrameBlockModel } from '@blocksuite/affine-model'; import { ThemeProvider } from '@blocksuite/affine-shared/services'; import { GfxBlockComponent } from '@blocksuite/block-std'; import { Bound } from '@blocksuite/global/utils'; @@ -56,7 +56,7 @@ export class FrameBlockComponent extends GfxBlockComponent { const { model, showBorder, std } = this; const backgroundColor = std .get(ThemeProvider) - .generateColorProperty(model.background, '--affine-platte-transparent'); + .generateColorProperty(model.background, DefaultTheme.transparent); const _isNavigator = this.gfx.tool.currentToolName$.value === 'frameNavigator'; const frameIndex = this.gfx.layer.getZIndex(model); diff --git a/blocksuite/affine/block-note/src/note-edgeless-block.ts b/blocksuite/affine/block-note/src/note-edgeless-block.ts index 217d8df94aa31..589c47ac1cfa1 100644 --- a/blocksuite/affine/block-note/src/note-edgeless-block.ts +++ b/blocksuite/affine/block-note/src/note-edgeless-block.ts @@ -2,7 +2,7 @@ import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface'; import { MoreIndicatorIcon } from '@blocksuite/affine-components/icons'; import type { NoteBlockModel } from '@blocksuite/affine-model'; import { - DEFAULT_NOTE_BACKGROUND_COLOR, + DefaultTheme, NoteDisplayMode, StrokeStyle, } from '@blocksuite/affine-model'; @@ -24,6 +24,7 @@ import { WithDisposable, } from '@blocksuite/global/utils'; import type { BlockModel } from '@blocksuite/store'; +import { computed } from '@preact/signals-core'; import { css, html, nothing } from 'lit'; import { property, query, state } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; @@ -141,6 +142,16 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent( } `; + private readonly _backgroundColor$ = computed(() => { + const themeProvider = this.std.get(ThemeProvider); + const theme = themeProvider.theme$.value; + return themeProvider.generateColorProperty( + this.model.background$.value, + DefaultTheme.noteBackgrounColor, + theme + ); + }); + private get _isShowCollapsedContent() { return this.model.edgeless.collapse && (this._isResizing || this._isHover); } @@ -406,9 +417,6 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent( }; const extra = this._editing ? ACTIVE_NOTE_EXTRA_PADDING : 0; - const backgroundColor = this.std - .get(ThemeProvider) - .generateColorProperty(model.background, DEFAULT_NOTE_BACKGROUND_COLOR); const backgroundStyle = { position: 'absolute', @@ -420,7 +428,7 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent( transition: this._editing ? 'left 0.3s, top 0.3s, width 0.3s, height 0.3s' : 'none', - backgroundColor, + backgroundColor: this._backgroundColor$.value, border: `${borderSize}px ${ borderStyle === StrokeStyle.Dash ? 'dashed' : borderStyle } var(--affine-black-10)`, diff --git a/blocksuite/affine/block-surface/src/renderer/canvas-renderer.ts b/blocksuite/affine/block-surface/src/renderer/canvas-renderer.ts index 68578c1cf6361..549c4316e8c26 100644 --- a/blocksuite/affine/block-surface/src/renderer/canvas-renderer.ts +++ b/blocksuite/affine/block-surface/src/renderer/canvas-renderer.ts @@ -21,9 +21,9 @@ import type { ElementRenderer } from './elements/index.js'; import type { Overlay } from './overlay.js'; type EnvProvider = { - generateColorProperty: (color: Color, fallback: string) => string; + generateColorProperty: (color: Color, fallback?: Color) => string; getColorScheme: () => ColorScheme; - getColorValue: (color: Color, fallback?: string, real?: boolean) => string; + getColorValue: (color: Color, fallback?: Color, real?: boolean) => string; getPropertyValue: (property: string) => string; selectedElements?: () => string[]; }; @@ -368,10 +368,9 @@ export class CanvasRenderer { this._disposables.dispose(); } - generateColorProperty(color: Color, fallback: string) { + generateColorProperty(color: Color, fallback?: Color) { return ( - this.provider.generateColorProperty?.(color, fallback) ?? - (fallback.startsWith('--') ? `var(${fallback})` : fallback) + this.provider.generateColorProperty?.(color, fallback) ?? 'transparent' ); } @@ -409,7 +408,7 @@ export class CanvasRenderer { return this.provider.getColorScheme?.() ?? ColorScheme.Light; } - getColorValue(color: Color, fallback?: string, real?: boolean) { + getColorValue(color: Color, fallback?: Color, real?: boolean) { return ( this.provider.getColorValue?.(color, fallback, real) ?? 'transparent' ); diff --git a/blocksuite/affine/block-surface/src/renderer/elements/brush/index.ts b/blocksuite/affine/block-surface/src/renderer/elements/brush/index.ts index 6dc720828daf9..7565b4a78ab29 100644 --- a/blocksuite/affine/block-surface/src/renderer/elements/brush/index.ts +++ b/blocksuite/affine/block-surface/src/renderer/elements/brush/index.ts @@ -1,4 +1,4 @@ -import type { BrushElementModel } from '@blocksuite/affine-model'; +import { type BrushElementModel, DefaultTheme } from '@blocksuite/affine-model'; import type { CanvasRenderer } from '../../canvas-renderer.js'; @@ -17,7 +17,7 @@ export function brush( matrix.translateSelf(cx, cy).rotateSelf(rotate).translateSelf(-cx, -cy) ); - const color = renderer.getColorValue(model.color, '#000000', true); + const color = renderer.getColorValue(model.color, DefaultTheme.black, true); ctx.fillStyle = color; diff --git a/blocksuite/affine/block-surface/src/renderer/elements/connector/index.ts b/blocksuite/affine/block-surface/src/renderer/elements/connector/index.ts index b4df3468f6bbf..0c9aabc27ba61 100644 --- a/blocksuite/affine/block-surface/src/renderer/elements/connector/index.ts +++ b/blocksuite/affine/block-surface/src/renderer/elements/connector/index.ts @@ -1,6 +1,7 @@ import { type ConnectorElementModel, ConnectorMode, + DefaultTheme, type LocalConnectorElementModel, type PointStyle, } from '@blocksuite/affine-model'; @@ -75,7 +76,11 @@ export function connector( ctx.clip(path, 'evenodd'); } - const strokeColor = renderer.getColorValue(model.stroke, '#000000', true); + const strokeColor = renderer.getColorValue( + model.stroke, + DefaultTheme.connectorColor, + true + ); renderPoints( model, @@ -249,7 +254,7 @@ function renderLabel( ctx.font = font; ctx.textAlign = textAlign; ctx.textBaseline = 'middle'; - ctx.fillStyle = renderer.getColorValue(color, '#000000', true); + ctx.fillStyle = renderer.getColorValue(color, DefaultTheme.black, true); let textMaxWidth = textAlign === 'center' ? 0 : getMaxTextWidth(lines, font); if (hasMaxWidth && maxWidth > 0) { diff --git a/blocksuite/affine/block-surface/src/renderer/elements/shape/index.ts b/blocksuite/affine/block-surface/src/renderer/elements/shape/index.ts index 202f44a397c8e..5d8d09ad100ce 100644 --- a/blocksuite/affine/block-surface/src/renderer/elements/shape/index.ts +++ b/blocksuite/affine/block-surface/src/renderer/elements/shape/index.ts @@ -3,12 +3,7 @@ import type { ShapeElementModel, ShapeType, } from '@blocksuite/affine-model'; -import { - DEFAULT_SHAPE_FILL_COLOR, - DEFAULT_SHAPE_STROKE_COLOR, - DEFAULT_SHAPE_TEXT_COLOR, - TextAlign, -} from '@blocksuite/affine-model'; +import { DefaultTheme, TextAlign } from '@blocksuite/affine-model'; import type { IBound } from '@blocksuite/global/utils'; import { Bound } from '@blocksuite/global/utils'; import { deltaInsertsToChunks } from '@blocksuite/inline'; @@ -55,17 +50,17 @@ export function shape( ) { const color = renderer.getColorValue( model.color, - DEFAULT_SHAPE_TEXT_COLOR, + DefaultTheme.shapeTextColor, true ); const fillColor = renderer.getColorValue( model.fillColor, - DEFAULT_SHAPE_FILL_COLOR, + DefaultTheme.shapeFillColor, true ); const strokeColor = renderer.getColorValue( model.strokeColor, - DEFAULT_SHAPE_STROKE_COLOR, + DefaultTheme.shapeStrokeColor, true ); const colors = { color, fillColor, strokeColor }; diff --git a/blocksuite/affine/block-surface/src/renderer/elements/text/index.ts b/blocksuite/affine/block-surface/src/renderer/elements/text/index.ts index 73904c43db8d2..af605b233e8e9 100644 --- a/blocksuite/affine/block-surface/src/renderer/elements/text/index.ts +++ b/blocksuite/affine/block-surface/src/renderer/elements/text/index.ts @@ -1,4 +1,4 @@ -import type { TextElementModel } from '@blocksuite/affine-model'; +import { DefaultTheme, type TextElementModel } from '@blocksuite/affine-model'; import { deltaInsertsToChunks } from '@blocksuite/inline'; import type { CanvasRenderer } from '../../canvas-renderer.js'; @@ -39,7 +39,11 @@ export function text( const horizontalOffset = textAlign === 'center' ? w / 2 : textAlign === 'right' ? w : 0; - const color = renderer.getColorValue(model.color, '#000000', true); + const color = renderer.getColorValue( + model.color, + DefaultTheme.textColor, + true + ); ctx.font = font; ctx.fillStyle = color; diff --git a/blocksuite/affine/block-surface/src/surface-block.ts b/blocksuite/affine/block-surface/src/surface-block.ts index 6b8558c4a2bee..f6991782c0fca 100644 --- a/blocksuite/affine/block-surface/src/surface-block.ts +++ b/blocksuite/affine/block-surface/src/surface-block.ts @@ -160,13 +160,13 @@ export class SurfaceBlockComponent extends BlockComponent< gridManager: gfx.grid, enableStackingCanvas: true, provider: { - generateColorProperty: (color: Color, fallback: string) => + generateColorProperty: (color: Color, fallback?: Color) => themeService.generateColorProperty( color, fallback, themeService.edgelessTheme ), - getColorValue: (color: Color, fallback?: string, real?: boolean) => + getColorValue: (color: Color, fallback?: Color, real?: boolean) => themeService.getColorValue( color, fallback, diff --git a/blocksuite/affine/components/src/toolbar/styles.ts b/blocksuite/affine/components/src/toolbar/styles.ts index 9718aae547afe..38ed6cc925f55 100644 --- a/blocksuite/affine/components/src/toolbar/styles.ts +++ b/blocksuite/affine/components/src/toolbar/styles.ts @@ -8,6 +8,7 @@ import { unsafeCSS } from 'lit'; const toolbarColorKeys: Array = [ '--affine-background-overlay-panel-color', '--affine-v2-layer-background-overlayPanel' as never, + '--affine-v2-layer-insideBorder-blackBorder' as never, '--affine-background-error-color', '--affine-background-primary-color', '--affine-background-tertiary-color', diff --git a/blocksuite/affine/model/src/blocks/frame/frame-model.ts b/blocksuite/affine/model/src/blocks/frame/frame-model.ts index 29b8c524c73fb..6d9c39ab542cf 100644 --- a/blocksuite/affine/model/src/blocks/frame/frame-model.ts +++ b/blocksuite/affine/model/src/blocks/frame/frame-model.ts @@ -17,7 +17,7 @@ import { import { Bound } from '@blocksuite/global/utils'; import { BlockModel, defineBlockSchema, type Text } from '@blocksuite/store'; -import type { Color } from '../../consts/index.js'; +import type { Color } from '../../themes/index.js'; export type FrameBlockProps = { title: Text; diff --git a/blocksuite/affine/model/src/blocks/note/note-model.ts b/blocksuite/affine/model/src/blocks/note/note-model.ts index 24915a2e7775d..f9bb82e517cc2 100644 --- a/blocksuite/affine/model/src/blocks/note/note-model.ts +++ b/blocksuite/affine/model/src/blocks/note/note-model.ts @@ -7,8 +7,6 @@ import { Bound } from '@blocksuite/global/utils'; import { BlockModel, defineBlockSchema } from '@blocksuite/store'; import { - type Color, - DEFAULT_NOTE_BACKGROUND_COLOR, DEFAULT_NOTE_BORDER_SIZE, DEFAULT_NOTE_BORDER_STYLE, DEFAULT_NOTE_CORNER, @@ -18,12 +16,13 @@ import { NoteDisplayMode, type StrokeStyle, } from '../../consts/index.js'; +import { type Color, DefaultTheme } from '../../themes/index.js'; export const NoteBlockSchema = defineBlockSchema({ flavour: 'affine:note', props: (): NoteProps => ({ xywh: `[0,0,${DEFAULT_NOTE_WIDTH},${DEFAULT_NOTE_HEIGHT}]`, - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', lockedBySelf: false, hidden: false, diff --git a/blocksuite/affine/model/src/consts/brush.ts b/blocksuite/affine/model/src/consts/brush.ts deleted file mode 100644 index 209d66e30e926..0000000000000 --- a/blocksuite/affine/model/src/consts/brush.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { StrokeColor } from './color.js'; - -export const DEFAULT_BRUSH_COLOR = StrokeColor.Blue; diff --git a/blocksuite/affine/model/src/consts/color.ts b/blocksuite/affine/model/src/consts/color.ts deleted file mode 100644 index c708ca11372a5..0000000000000 --- a/blocksuite/affine/model/src/consts/color.ts +++ /dev/null @@ -1,97 +0,0 @@ -import { themeToVar } from '@toeverything/theme/v2'; -import { z } from 'zod'; - -import { createEnumMap } from '../utils/enum.js'; - -export const Transparent = 'transparent'; -export const White = themeToVar('edgeless/palette/white'); -export const Black = themeToVar('edgeless/palette/black'); - -export const Light = { - Red: themeToVar('edgeless/palette/light/redLight'), - Orange: themeToVar('edgeless/palette/light/orangeLight'), - Yellow: themeToVar('edgeless/palette/light/yellowLight'), - Green: themeToVar('edgeless/palette/light/greenLight'), - Blue: themeToVar('edgeless/palette/light/blueLight'), - Purple: themeToVar('edgeless/palette/light/purpleLight'), - Magenta: themeToVar('edgeless/palette/light/magentaLight'), - Grey: themeToVar('edgeless/palette/light/greyLight'), -} as const; - -export const LIGHT_PALETTES = [ - Light.Red, - Light.Orange, - Light.Yellow, - Light.Green, - Light.Blue, - Light.Purple, - Light.Magenta, - Light.Grey, -] as const; - -export const Medium = { - Red: themeToVar('edgeless/palette/medium/redMedium'), - Orange: themeToVar('edgeless/palette/medium/orangeMedium'), - Yellow: themeToVar('edgeless/palette/medium/yellowMedium'), - Green: themeToVar('edgeless/palette/medium/greenMedium'), - Blue: themeToVar('edgeless/palette/medium/blueMedium'), - Purple: themeToVar('edgeless/palette/medium/purpleMedium'), - Magenta: themeToVar('edgeless/palette/medium/magentaMedium'), - Grey: themeToVar('edgeless/palette/medium/greyMedium'), -} as const; - -export const MEDIUM_PALETTES = [ - Medium.Red, - Medium.Orange, - Medium.Yellow, - Medium.Green, - Medium.Blue, - Medium.Purple, - Medium.Magenta, - Medium.Grey, -] as const; - -export const Heavy = { - Red: themeToVar('edgeless/palette/heavy/red'), - Orange: themeToVar('edgeless/palette/heavy/orange'), - Yellow: themeToVar('edgeless/palette/heavy/yellow'), - Green: themeToVar('edgeless/palette/heavy/green'), - Blue: themeToVar('edgeless/palette/heavy/blue'), - Purple: themeToVar('edgeless/palette/heavy/purple'), - Magenta: themeToVar('edgeless/palette/heavy/magenta'), -} as const; - -export const HEAVY_PALETTES = [ - Heavy.Red, - Heavy.Orange, - Heavy.Yellow, - Heavy.Green, - Heavy.Blue, - Heavy.Purple, - Heavy.Magenta, -] as const; - -export const PALETTES = [ - // Light - ...LIGHT_PALETTES, - - Transparent, - - // Medium - ...MEDIUM_PALETTES, - - White, - - // Heavy - ...HEAVY_PALETTES, - - Black, -] as const; - -export const PaletteEnum = z.enum(PALETTES); - -export const StrokeColor = { Black, White, ...Medium } as const; - -export const StrokeColorMap = createEnumMap(StrokeColor); - -export const STROKE_COLORS = [...MEDIUM_PALETTES, Black, White] as const; diff --git a/blocksuite/affine/model/src/consts/connector.ts b/blocksuite/affine/model/src/consts/connector.ts index 97b35b7808ce5..fd90c36ba9c25 100644 --- a/blocksuite/affine/model/src/consts/connector.ts +++ b/blocksuite/affine/model/src/consts/connector.ts @@ -1,5 +1,4 @@ import { createEnumMap } from '../utils/enum.js'; -import { StrokeColor } from './color.js'; export enum ConnectorEndpoint { Front = 'Front', @@ -16,10 +15,6 @@ export enum PointStyle { export const PointStyleMap = createEnumMap(PointStyle); -export const DEFAULT_CONNECTOR_COLOR = StrokeColor.Grey; - -export const DEFAULT_CONNECTOR_TEXT_COLOR = StrokeColor.Black; - export const DEFAULT_FRONT_END_POINT_STYLE = PointStyle.None; export const DEFAULT_REAR_END_POINT_STYLE = PointStyle.Arrow; diff --git a/blocksuite/affine/model/src/consts/frame.ts b/blocksuite/affine/model/src/consts/frame.ts deleted file mode 100644 index fd5d90841847e..0000000000000 --- a/blocksuite/affine/model/src/consts/frame.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { Light } from './color.js'; - -export const FrameBackgroundColor = Light; diff --git a/blocksuite/affine/model/src/consts/index.ts b/blocksuite/affine/model/src/consts/index.ts index 93e513a73124f..4ee595904ac3b 100644 --- a/blocksuite/affine/model/src/consts/index.ts +++ b/blocksuite/affine/model/src/consts/index.ts @@ -1,8 +1,5 @@ -export * from './brush.js'; -export * from './color.js'; export * from './connector.js'; export * from './doc.js'; -export * from './frame.js'; export * from './image.js'; export * from './line.js'; export * from './mindmap.js'; diff --git a/blocksuite/affine/model/src/consts/line.ts b/blocksuite/affine/model/src/consts/line.ts index 0b246849cd1ee..101d3e37c83b7 100644 --- a/blocksuite/affine/model/src/consts/line.ts +++ b/blocksuite/affine/model/src/consts/line.ts @@ -3,14 +3,14 @@ import { z } from 'zod'; import { createEnumMap } from '../utils/enum.js'; export enum LineWidth { - Eight = 8, + Two = 2, // Thin Four = 4, Six = 6, + Eight = 8, // Thick Ten = 10, Twelve = 12, - Two = 2, } export const LINE_WIDTHS = [ @@ -23,7 +23,7 @@ export const LINE_WIDTHS = [ ]; /** - * Use `StrokeColor` instead. + * Use `DefaultTheme.StrokeColorMap` instead. * * @deprecated */ @@ -43,6 +43,11 @@ export enum LineColor { export const LineColorMap = createEnumMap(LineColor); +/** + * Use `DefaultTheme.StrokeColorPalettes` instead. + * + * @deprecated + */ export const LINE_COLORS = [ LineColor.Yellow, LineColor.Orange, diff --git a/blocksuite/affine/model/src/consts/note.ts b/blocksuite/affine/model/src/consts/note.ts index b203e37bfc6ed..7321290eb5d6c 100644 --- a/blocksuite/affine/model/src/consts/note.ts +++ b/blocksuite/affine/model/src/consts/note.ts @@ -1,4 +1,3 @@ -import { themeToVar } from '@toeverything/theme/v2'; import { z } from 'zod'; import { createEnumMap } from '../utils/enum.js'; @@ -9,40 +8,6 @@ export const NOTE_MIN_HEIGHT = 92; export const DEFAULT_NOTE_WIDTH = NOTE_MIN_WIDTH; export const DEFAULT_NOTE_HEIGHT = NOTE_MIN_HEIGHT; -export const NoteBackgroundColor = { - Yellow: themeToVar('edgeless/note/yellow'), - Orange: themeToVar('edgeless/note/orange'), - Red: themeToVar('edgeless/note/red'), - Magenta: themeToVar('edgeless/note/magenta'), - Purple: themeToVar('edgeless/note/purple'), - Blue: themeToVar('edgeless/note/blue'), - Teal: themeToVar('edgeless/note/teal'), - Green: themeToVar('edgeless/note/green'), - Black: themeToVar('edgeless/note/black'), - Grey: themeToVar('edgeless/note/grey'), - White: themeToVar('edgeless/note/white'), -} as const; - -export const NoteBackgroundColorMap = createEnumMap(NoteBackgroundColor); - -export const NOTE_BACKGROUND_PALETTES = [ - NoteBackgroundColor.Yellow, - NoteBackgroundColor.Orange, - NoteBackgroundColor.Red, - NoteBackgroundColor.Magenta, - NoteBackgroundColor.Purple, - NoteBackgroundColor.Blue, - NoteBackgroundColor.Teal, - NoteBackgroundColor.Green, - NoteBackgroundColor.Black, - NoteBackgroundColor.Grey, - NoteBackgroundColor.White, -] as const; - -export const NoteBackgroundPaletteEnum = z.enum(NOTE_BACKGROUND_PALETTES); - -export const DEFAULT_NOTE_BACKGROUND_COLOR = NoteBackgroundColor.White; - export enum NoteShadow { Box = '--affine-note-shadow-box', Film = '--affine-note-shadow-film', diff --git a/blocksuite/affine/model/src/consts/shape.ts b/blocksuite/affine/model/src/consts/shape.ts index 427bdad8263d7..e81821cdb1db0 100644 --- a/blocksuite/affine/model/src/consts/shape.ts +++ b/blocksuite/affine/model/src/consts/shape.ts @@ -1,5 +1,3 @@ -import { Black, Light, LIGHT_PALETTES, StrokeColor, White } from './color.js'; - export const DEFAULT_ROUGHNESS = 1.4; // TODO: need to check the default central area ratio @@ -46,13 +44,3 @@ export enum ShapeStyle { General = 'General', Scribbled = 'Scribbled', } - -export const ShapeFillColor = { Black, White, ...Light } as const; - -export const SHAPE_FILL_COLORS = [...LIGHT_PALETTES, Black, White]; - -export const DEFAULT_SHAPE_FILL_COLOR = Light.Yellow; - -export const DEFAULT_SHAPE_STROKE_COLOR = StrokeColor.Yellow; - -export const DEFAULT_SHAPE_TEXT_COLOR = StrokeColor.Black; diff --git a/blocksuite/affine/model/src/consts/text.ts b/blocksuite/affine/model/src/consts/text.ts index 3f9887621ef23..6fd0223caf39e 100644 --- a/blocksuite/affine/model/src/consts/text.ts +++ b/blocksuite/affine/model/src/consts/text.ts @@ -1,12 +1,5 @@ +import type { Color } from '../themes/color.js'; import { createEnumMap } from '../utils/enum.js'; -import { StrokeColor } from './color.js'; - -export enum ColorScheme { - Dark = 'dark', - Light = 'light', -} - -export type Color = string | Partial>; export enum TextAlign { Center = 'center', @@ -66,5 +59,3 @@ export enum TextResizing { AUTO_WIDTH_AND_HEIGHT, AUTO_HEIGHT, } - -export const DEFAULT_TEXT_COLOR = StrokeColor.Blue; diff --git a/blocksuite/affine/model/src/elements/brush/brush.ts b/blocksuite/affine/model/src/elements/brush/brush.ts index 42ceffab1b967..0048a514c9506 100644 --- a/blocksuite/affine/model/src/elements/brush/brush.ts +++ b/blocksuite/affine/model/src/elements/brush/brush.ts @@ -28,7 +28,7 @@ import { Vec, } from '@blocksuite/global/utils'; -import type { Color } from '../../consts/index.js'; +import type { Color } from '../../themes/index.js'; export type BrushProps = BaseElementProps & { /** diff --git a/blocksuite/affine/model/src/elements/connector/connector.ts b/blocksuite/affine/model/src/elements/connector/connector.ts index 524fbe8da3b9c..6b31a62ddc514 100644 --- a/blocksuite/affine/model/src/elements/connector/connector.ts +++ b/blocksuite/affine/model/src/elements/connector/connector.ts @@ -26,7 +26,6 @@ import { import { DocCollection, type Y } from '@blocksuite/store'; import { - type Color, CONNECTOR_LABEL_MAX_WIDTH, ConnectorLabelOffsetAnchor, ConnectorMode, @@ -39,6 +38,7 @@ import { TextAlign, type TextStyleProps, } from '../../consts/index.js'; +import type { Color } from '../../themes/index.ts'; export type SerializedConnection = { id?: string; diff --git a/blocksuite/affine/model/src/elements/connector/local-connector.ts b/blocksuite/affine/model/src/elements/connector/local-connector.ts index 4d23a2142f72a..497ea43d6e9e6 100644 --- a/blocksuite/affine/model/src/elements/connector/local-connector.ts +++ b/blocksuite/affine/model/src/elements/connector/local-connector.ts @@ -2,12 +2,12 @@ import { GfxLocalElementModel } from '@blocksuite/block-std/gfx'; import type { PointLocation } from '@blocksuite/global/utils'; import { - type Color, ConnectorMode, DEFAULT_ROUGHNESS, type PointStyle, StrokeStyle, } from '../../consts/index.js'; +import type { Color } from '../../themes/index.ts'; import type { Connection } from './connector.js'; export class LocalConnectorElementModel extends GfxLocalElementModel { diff --git a/blocksuite/affine/model/src/elements/mindmap/style.ts b/blocksuite/affine/model/src/elements/mindmap/style.ts index 93bb2a9eb067a..f9982acb28668 100644 --- a/blocksuite/affine/model/src/elements/mindmap/style.ts +++ b/blocksuite/affine/model/src/elements/mindmap/style.ts @@ -1,11 +1,10 @@ import { isEqual, last } from '@blocksuite/global/utils'; import { ConnectorMode } from '../../consts/connector.js'; -import { LineColor } from '../../consts/line.js'; import { MindmapStyle } from '../../consts/mindmap.js'; import { StrokeStyle } from '../../consts/note.js'; -import { ShapeFillColor } from '../../consts/shape.js'; import { FontFamily, FontWeight, TextResizing } from '../../consts/text.js'; +import { type Color, DefaultTheme } from '../../themes/index.js'; import type { MindmapNode } from './mindmap.js'; export type CollapseButton = { @@ -14,9 +13,9 @@ export type CollapseButton = { radius: number; filled: boolean; - fillColor: string; + fillColor: Color; - strokeColor: string; + strokeColor: Color; strokeWidth: number; }; @@ -25,24 +24,24 @@ export type ExpandButton = CollapseButton & { fontSize: number; fontWeight: FontWeight; - color: string; + color: Color; }; export type NodeStyle = { radius: number; strokeWidth: number; - strokeColor: string; + strokeColor: Color; textResizing: TextResizing; fontSize: number; fontFamily: string; fontWeight: FontWeight; - color: string; + color: Color; filled: boolean; - fillColor: string; + fillColor: Color; padding: [number, number]; @@ -56,7 +55,7 @@ export type NodeStyle = { export type ConnectorStyle = { strokeStyle: StrokeStyle; - stroke: string; + stroke: Color; strokeWidth: number; mode: ConnectorMode; @@ -78,11 +77,11 @@ export abstract class MindmapStyleGetter { export class StyleOne extends MindmapStyleGetter { private readonly _colorOrders = [ - LineColor.Purple, - LineColor.Magenta, - LineColor.Orange, - LineColor.Yellow, - LineColor.Green, + DefaultTheme.StrokeColorMap.Purple, + DefaultTheme.StrokeColorMap.Magenta, + DefaultTheme.StrokeColorMap.Orange, + DefaultTheme.StrokeColorMap.Yellow, + DefaultTheme.StrokeColorMap.Green, '#7ae2d5', ]; @@ -92,15 +91,15 @@ export class StyleOne extends MindmapStyleGetter { textResizing: TextResizing.AUTO_WIDTH_AND_HEIGHT, strokeWidth: 4, - strokeColor: '#84CFFF', + strokeColor: '#84cfff', fontFamily: FontFamily.Poppins, fontSize: 20, fontWeight: FontWeight.SemiBold, - color: '--affine-black', + color: DefaultTheme.pureBlack, filled: true, - fillColor: '--affine-white', + fillColor: DefaultTheme.pureWhite, padding: [11, 22] as [number, number], @@ -133,7 +132,7 @@ export class StyleOne extends MindmapStyleGetter { radius: 0.5, filled: true, - fillColor: '--affine-white', + fillColor: DefaultTheme.pureWhite, strokeColor: color, strokeWidth: 3, @@ -151,7 +150,7 @@ export class StyleOne extends MindmapStyleGetter { padding: [4, 0], - color: '--affine-white', + color: DefaultTheme.pureWhite, fontFamily: FontFamily.Inter, fontWeight: FontWeight.Bold, @@ -168,10 +167,10 @@ export class StyleOne extends MindmapStyleGetter { fontFamily: FontFamily.Poppins, fontSize: 16, fontWeight: FontWeight.Medium, - color: '--affine-black', + color: DefaultTheme.pureBlack, filled: true, - fillColor: '--affine-white', + fillColor: DefaultTheme.pureWhite, padding: [6, 22] as [number, number], @@ -189,9 +188,9 @@ export const styleOne = new StyleOne(); export class StyleTwo extends MindmapStyleGetter { private readonly _colorOrders = [ - ShapeFillColor.Blue, + DefaultTheme.StrokeColorMap.Blue, '#7ae2d5', - ShapeFillColor.Yellow, + DefaultTheme.StrokeColorMap.Yellow, ]; readonly root = { @@ -200,15 +199,15 @@ export class StyleTwo extends MindmapStyleGetter { textResizing: TextResizing.AUTO_WIDTH_AND_HEIGHT, strokeWidth: 3, - strokeColor: '--affine-black', + strokeColor: DefaultTheme.pureBlack, fontFamily: FontFamily.Poppins, fontSize: 18, fontWeight: FontWeight.SemiBold, - color: ShapeFillColor.Black, + color: DefaultTheme.pureBlack, filled: true, - fillColor: ShapeFillColor.Orange, + fillColor: DefaultTheme.StrokeColorMap.Yellow, padding: [11, 22] as [number, number], @@ -216,7 +215,7 @@ export class StyleTwo extends MindmapStyleGetter { blur: 0, offsetX: 3, offsetY: 3, - color: '--affine-black', + color: DefaultTheme.pureBlack, }, }; @@ -232,7 +231,7 @@ export class StyleTwo extends MindmapStyleGetter { return { connector: { strokeStyle: StrokeStyle.Solid, - stroke: '--affine-black', + stroke: DefaultTheme.pureBlack, strokeWidth: 3, mode: ConnectorMode.Orthogonal, @@ -243,9 +242,9 @@ export class StyleTwo extends MindmapStyleGetter { radius: 0.5, filled: true, - fillColor: '--affine-white', + fillColor: DefaultTheme.pureWhite, - strokeColor: '--affine-black', + strokeColor: DefaultTheme.pureBlack, strokeWidth: 3, }, expandButton: { @@ -254,14 +253,14 @@ export class StyleTwo extends MindmapStyleGetter { radius: 2, filled: true, - fillColor: '--affine-black', + fillColor: DefaultTheme.pureBlack, padding: [4, 0], - strokeColor: '--affine-black', + strokeColor: DefaultTheme.pureBlack, strokeWidth: 0, - color: '--affine-white', + color: DefaultTheme.pureWhite, fontFamily: FontFamily.Inter, fontWeight: FontWeight.Bold, @@ -273,12 +272,12 @@ export class StyleTwo extends MindmapStyleGetter { textResizing: TextResizing.AUTO_WIDTH_AND_HEIGHT, strokeWidth: 3, - strokeColor: '--affine-black', + strokeColor: DefaultTheme.pureBlack, fontFamily: FontFamily.Poppins, fontSize: 16, fontWeight: FontWeight.SemiBold, - color: ShapeFillColor.Black, + color: DefaultTheme.pureBlack, filled: true, fillColor: color, @@ -289,7 +288,7 @@ export class StyleTwo extends MindmapStyleGetter { blur: 0, offsetX: 3, offsetY: 3, - color: '--affine-black', + color: DefaultTheme.pureBlack, }, }, }; @@ -299,9 +298,9 @@ export const styleTwo = new StyleTwo(); export class StyleThree extends MindmapStyleGetter { private readonly _strokeColor = [ - LineColor.Yellow, - LineColor.Green, - LineColor.Teal, + DefaultTheme.StrokeColorMap.Yellow, + DefaultTheme.StrokeColorMap.Green, + DefaultTheme.StrokeColorMap.Teal, ]; readonly root = { @@ -315,10 +314,10 @@ export class StyleThree extends MindmapStyleGetter { fontFamily: FontFamily.Poppins, fontSize: 16, fontWeight: FontWeight.Medium, - color: ShapeFillColor.Black, + color: DefaultTheme.pureBlack, filled: true, - fillColor: ShapeFillColor.Yellow, + fillColor: DefaultTheme.StrokeColorMap.Yellow, padding: [10, 22] as [number, number], @@ -349,10 +348,10 @@ export class StyleThree extends MindmapStyleGetter { fontFamily: FontFamily.Poppins, fontSize: 16, fontWeight: FontWeight.Medium, - color: ShapeFillColor.Black, + color: DefaultTheme.pureBlack, filled: true, - fillColor: ShapeFillColor.White, + fillColor: DefaultTheme.pureWhite, padding: [6, 22] as [number, number], @@ -369,9 +368,9 @@ export class StyleThree extends MindmapStyleGetter { radius: 0.5, filled: true, - fillColor: '--affine-white', + fillColor: DefaultTheme.pureWhite, - strokeColor: '#3CBC36', + strokeColor: '#3cbc36', strokeWidth: 3, }, expandButton: { @@ -380,11 +379,11 @@ export class StyleThree extends MindmapStyleGetter { radius: 8, filled: true, - fillColor: '#3CBC36', + fillColor: '#3cbc36', padding: [4, 0], - strokeColor: '#3CBC36', + strokeColor: '#3cbc36', strokeWidth: 0, color: '#fff', @@ -407,12 +406,12 @@ export const styleThree = new StyleThree(); export class StyleFour extends MindmapStyleGetter { private readonly _colors = [ - ShapeFillColor.Purple, - ShapeFillColor.Magenta, - ShapeFillColor.Orange, - ShapeFillColor.Yellow, - ShapeFillColor.Green, - ShapeFillColor.Blue, + DefaultTheme.StrokeColorMap.Purple, + DefaultTheme.StrokeColorMap.Magenta, + DefaultTheme.StrokeColorMap.Orange, + DefaultTheme.StrokeColorMap.Yellow, + DefaultTheme.StrokeColorMap.Green, + DefaultTheme.StrokeColorMap.Blue, ]; readonly root = { @@ -426,7 +425,7 @@ export class StyleFour extends MindmapStyleGetter { fontFamily: FontFamily.Kalam, fontSize: 22, fontWeight: FontWeight.Bold, - color: '--affine-black', + color: DefaultTheme.black, filled: true, fillColor: 'transparent', @@ -455,7 +454,7 @@ export class StyleFour extends MindmapStyleGetter { radius: 0.5, filled: true, - fillColor: '--affine-white', + fillColor: DefaultTheme.pureWhite, strokeColor: stroke, strokeWidth: 3, @@ -473,7 +472,7 @@ export class StyleFour extends MindmapStyleGetter { strokeColor: stroke, strokeWidth: 0, - color: '--affine-white', + color: DefaultTheme.pureWhite, fontFamily: FontFamily.Inter, fontWeight: FontWeight.Bold, diff --git a/blocksuite/affine/model/src/elements/shape/shape.ts b/blocksuite/affine/model/src/elements/shape/shape.ts index a3e59f67ddce7..b4e7762ebded1 100644 --- a/blocksuite/affine/model/src/elements/shape/shape.ts +++ b/blocksuite/affine/model/src/elements/shape/shape.ts @@ -19,22 +19,20 @@ import type { import { DocCollection, type Y } from '@blocksuite/store'; import { - type Color, DEFAULT_ROUGHNESS, FontFamily, FontStyle, FontWeight, - ShapeFillColor, ShapeStyle, ShapeTextFontSize, ShapeType, - StrokeColor, StrokeStyle, TextAlign, TextResizing, type TextStyleProps, TextVerticalAlign, } from '../../consts/index.js'; +import { type Color, DefaultTheme } from '../../themes/index.js'; import { shapeMethods } from './api/index.js'; export type ShapeProps = BaseElementProps & { @@ -104,7 +102,7 @@ export class ShapeElementModel extends GfxPrimitiveElementModel { accessor color!: Color; @field() - accessor fillColor: Color = ShapeFillColor.Yellow; + accessor fillColor: Color = DefaultTheme.shapeFillColor; @field() accessor filled: boolean = false; @@ -160,7 +158,7 @@ export class ShapeElementModel extends GfxPrimitiveElementModel { accessor shapeType: ShapeType = ShapeType.Rect; @field() - accessor strokeColor: Color = StrokeColor.Yellow; + accessor strokeColor: Color = DefaultTheme.shapeStrokeColor; @field() accessor strokeStyle: StrokeStyle = StrokeStyle.Solid; @@ -205,7 +203,7 @@ export class LocalShapeElementModel extends GfxLocalElementModel { accessor color: Color = '#000000'; @prop() - accessor fillColor: Color = ShapeFillColor.Yellow; + accessor fillColor: Color = DefaultTheme.shapeFillColor; @prop() accessor filled: boolean = false; @@ -246,7 +244,7 @@ export class LocalShapeElementModel extends GfxLocalElementModel { accessor shapeType: ShapeType = ShapeType.Rect; @prop() - accessor strokeColor: Color = StrokeColor.Yellow; + accessor strokeColor: Color = DefaultTheme.shapeStrokeColor; @prop() accessor strokeStyle: StrokeStyle = StrokeStyle.Solid; diff --git a/blocksuite/affine/model/src/elements/text/text.ts b/blocksuite/affine/model/src/elements/text/text.ts index 06e724a3a5755..945a4d202f0ba 100644 --- a/blocksuite/affine/model/src/elements/text/text.ts +++ b/blocksuite/affine/model/src/elements/text/text.ts @@ -11,13 +11,13 @@ import { import { DocCollection, type Y } from '@blocksuite/store'; import { - type Color, FontFamily, FontStyle, FontWeight, TextAlign, type TextStyleProps, } from '../../consts/index.js'; +import type { Color } from '../../themes/index.js'; export type TextElementProps = BaseElementProps & { text: Y.Text; diff --git a/blocksuite/affine/model/src/index.ts b/blocksuite/affine/model/src/index.ts index 2ef5fe41e162d..b430a4cf5e37a 100644 --- a/blocksuite/affine/model/src/index.ts +++ b/blocksuite/affine/model/src/index.ts @@ -1,4 +1,5 @@ export * from './blocks/index.js'; export * from './consts/index.js'; export * from './elements/index.js'; +export * from './themes/index.js'; export * from './utils/index.js'; diff --git a/blocksuite/affine/model/src/themes/color.ts b/blocksuite/affine/model/src/themes/color.ts new file mode 100644 index 0000000000000..e4c770f969d27 --- /dev/null +++ b/blocksuite/affine/model/src/themes/color.ts @@ -0,0 +1,54 @@ +import { z } from 'zod'; + +export enum ColorScheme { + Dark = 'dark', + Light = 'light', +} + +const ColorNormalSchema = z.object({ + normal: z.string(), +}); + +const ColorDarkLightSchema = z.object({ + [ColorScheme.Dark]: z.string(), + [ColorScheme.Light]: z.string(), +}); + +export const ColorSchema = z.union([ + z.string(), + ColorNormalSchema, + ColorDarkLightSchema, +]); + +export type Color = z.infer; + +// Converts `Color` type to string. +export function resolveColor( + color: Color, + colorScheme: ColorScheme, + fallback = 'transparent' +): string { + let value = fallback; + + if (typeof color === 'object') { + if (ColorScheme.Dark in color && ColorScheme.Light in color) { + value = color[colorScheme]; + } else if ('normal' in color) { + value = color.normal; + } + } else { + value = color; + } + + if (!value) { + value = fallback; + } + + return value; +} + +export function isTransparent(color: Color) { + return ( + typeof color === 'string' && color.toLowerCase().endsWith('transparent') + ); +} diff --git a/blocksuite/affine/model/src/themes/default.ts b/blocksuite/affine/model/src/themes/default.ts new file mode 100644 index 0000000000000..02354fae0a1fb --- /dev/null +++ b/blocksuite/affine/model/src/themes/default.ts @@ -0,0 +1,104 @@ +import type { Palette, Theme } from './types.js'; +import { buildPalettes, getColorByKey, pureBlack, pureWhite } from './utils.js'; + +const Transparent = 'transparent'; +const White = getColorByKey('edgeless/palette/white'); +const Black = getColorByKey('edgeless/palette/black'); + +const Light = { + Red: getColorByKey('edgeless/palette/light/redLight'), + Orange: getColorByKey('edgeless/palette/light/orangeLight'), + Yellow: getColorByKey('edgeless/palette/light/yellowLight'), + Green: getColorByKey('edgeless/palette/light/greenLight'), + Blue: getColorByKey('edgeless/palette/light/blueLight'), + Purple: getColorByKey('edgeless/palette/light/purpleLight'), + Magenta: getColorByKey('edgeless/palette/light/magentaLight'), + Grey: getColorByKey('edgeless/palette/light/greyLight'), +} as const; + +const Medium = { + Red: getColorByKey('edgeless/palette/medium/redMedium'), + Orange: getColorByKey('edgeless/palette/medium/orangeMedium'), + Yellow: getColorByKey('edgeless/palette/medium/yellowMedium'), + Green: getColorByKey('edgeless/palette/medium/greenMedium'), + Blue: getColorByKey('edgeless/palette/medium/blueMedium'), + Purple: getColorByKey('edgeless/palette/medium/purpleMedium'), + Magenta: getColorByKey('edgeless/palette/medium/magentaMedium'), + Grey: getColorByKey('edgeless/palette/medium/greyMedium'), +} as const; + +const Heavy = { + Red: getColorByKey('edgeless/palette/heavy/red'), + Orange: getColorByKey('edgeless/palette/heavy/orange'), + Yellow: getColorByKey('edgeless/palette/heavy/yellow'), + Green: getColorByKey('edgeless/palette/heavy/green'), + Blue: getColorByKey('edgeless/palette/heavy/blue'), + Purple: getColorByKey('edgeless/palette/heavy/purple'), + Magenta: getColorByKey('edgeless/palette/heavy/magenta'), +} as const; + +const NoteBackgroundColorMap = { + Yellow: getColorByKey('edgeless/note/yellow'), + Orange: getColorByKey('edgeless/note/orange'), + Red: getColorByKey('edgeless/note/red'), + Magenta: getColorByKey('edgeless/note/magenta'), + Purple: getColorByKey('edgeless/note/purple'), + Blue: getColorByKey('edgeless/note/blue'), + Teal: getColorByKey('edgeless/note/teal'), + Green: getColorByKey('edgeless/note/green'), + Black: getColorByKey('edgeless/note/black'), + Grey: getColorByKey('edgeless/note/grey'), + White: getColorByKey('edgeless/note/white'), +} as const; + +const Palettes: Palette[] = [ + // Light + ...buildPalettes(Light, 'Light'), + + { key: 'Transparent', value: Transparent }, + + // Medium + ...buildPalettes(Medium, 'Medium'), + + { key: 'White', value: White }, + + // Heavy + ...buildPalettes(Heavy, 'Heavy'), + + { key: 'Black', value: Black }, +] as const; + +const NoteBackgroundColorPalettes: Palette[] = [ + ...buildPalettes(NoteBackgroundColorMap), +] as const; + +const StrokeColorMap = { ...Medium, Black, White } as const; + +const StrokeColorPalettes: Palette[] = [ + ...buildPalettes(StrokeColorMap), +] as const; + +const FillColorMap = { ...Light, Black, White } as const; + +const FillColorPalettes: Palette[] = [...buildPalettes(FillColorMap)] as const; + +export const DefaultTheme: Theme = { + pureBlack, + pureWhite, + black: Black, + white: White, + transparent: Transparent, + textColor: Medium.Blue, + shapeTextColor: Black, + shapeStrokeColor: Medium.Yellow, + shapeFillColor: Light.Yellow, + connectorColor: Medium.Grey, + noteBackgrounColor: NoteBackgroundColorMap.White, + Palettes, + StrokeColorMap, + StrokeColorPalettes, + FillColorMap, + FillColorPalettes, + NoteBackgroundColorMap, + NoteBackgroundColorPalettes, +} as const; diff --git a/blocksuite/affine/model/src/themes/index.ts b/blocksuite/affine/model/src/themes/index.ts new file mode 100644 index 0000000000000..70e5f558bdb59 --- /dev/null +++ b/blocksuite/affine/model/src/themes/index.ts @@ -0,0 +1,10 @@ +import { DefaultTheme } from './default.js'; +import type { Theme } from './types.js'; + +export * from './color.js'; +export { DefaultTheme } from './default.js'; +export * from './types.js'; + +export const Themes: Record = { + default: DefaultTheme, +}; diff --git a/blocksuite/affine/model/src/themes/types.ts b/blocksuite/affine/model/src/themes/types.ts new file mode 100644 index 0000000000000..e7d54396df050 --- /dev/null +++ b/blocksuite/affine/model/src/themes/types.ts @@ -0,0 +1,36 @@ +import { z } from 'zod'; + +import { ColorSchema } from './color.js'; + +export const PaletteSchema = z.object({ + key: z.string(), + value: ColorSchema, +}); + +export type Palette = z.infer; + +export const ThemeSchema = z.object({ + pureBlack: z.string(), + pureWhite: z.string(), + black: ColorSchema, + white: ColorSchema, + transparent: z.literal('transparent'), + textColor: ColorSchema, + shapeTextColor: ColorSchema, + shapeStrokeColor: ColorSchema, + shapeFillColor: ColorSchema, + connectorColor: ColorSchema, + noteBackgrounColor: ColorSchema, + // Universal color palette + Palettes: z.array(PaletteSchema), + StrokeColorMap: z.record(z.string(), ColorSchema), + // Usually used in global toolbar and editor preview + StrokeColorPalettes: z.array(PaletteSchema), + FillColorMap: z.record(z.string(), ColorSchema), + // Usually used in global toolbar and editor preview + FillColorPalettes: z.array(PaletteSchema), + NoteBackgroundColorMap: z.record(z.string(), ColorSchema), + NoteBackgroundColorPalettes: z.array(PaletteSchema), +}); + +export type Theme = z.infer; diff --git a/blocksuite/affine/model/src/themes/utils.ts b/blocksuite/affine/model/src/themes/utils.ts new file mode 100644 index 0000000000000..9cef215c73504 --- /dev/null +++ b/blocksuite/affine/model/src/themes/utils.ts @@ -0,0 +1,29 @@ +import { + type AffineThemeKeyV2, + darkThemeV2, + lightThemeV2, +} from '@toeverything/theme/v2'; + +import type { Color } from './color.js'; +import type { Palette } from './types.js'; + +// Converts a color map to color list. +export function buildPalettes( + obj: Record, + prefix = '' +): Palette[] { + return Object.entries(obj).map(([key, value]) => ({ + key: `${prefix}${key}`, + value, + })); +} + +export function getColorByKey(key: AffineThemeKeyV2): Color { + const dark = darkThemeV2[key]; + const light = lightThemeV2[key]; + if (dark === light) return dark; + return { dark, light }; +} + +export const pureBlack = lightThemeV2['edgeless/palette/black']; +export const pureWhite = lightThemeV2['edgeless/palette/white']; diff --git a/blocksuite/affine/shared/src/adapters/html/html.ts b/blocksuite/affine/shared/src/adapters/html/html.ts index 7c42f1be2179a..19060d16d1e6c 100644 --- a/blocksuite/affine/shared/src/adapters/html/html.ts +++ b/blocksuite/affine/shared/src/adapters/html/html.ts @@ -1,7 +1,4 @@ -import { - DEFAULT_NOTE_BACKGROUND_COLOR, - NoteDisplayMode, -} from '@blocksuite/affine-model'; +import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model'; import type { ExtensionType } from '@blocksuite/block-std'; import type { ServiceProvider } from '@blocksuite/global/di'; import { @@ -272,7 +269,7 @@ export class HtmlAdapter extends BaseAdapter { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -297,7 +294,7 @@ export class HtmlAdapter extends BaseAdapter { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -357,7 +354,7 @@ export class HtmlAdapter extends BaseAdapter { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, diff --git a/blocksuite/affine/shared/src/adapters/notion-html/notion-html.ts b/blocksuite/affine/shared/src/adapters/notion-html/notion-html.ts index 6c1a5fce32d43..2f0e589e0b925 100644 --- a/blocksuite/affine/shared/src/adapters/notion-html/notion-html.ts +++ b/blocksuite/affine/shared/src/adapters/notion-html/notion-html.ts @@ -1,7 +1,4 @@ -import { - DEFAULT_NOTE_BACKGROUND_COLOR, - NoteDisplayMode, -} from '@blocksuite/affine-model'; +import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model'; import type { ExtensionType } from '@blocksuite/block-std'; import type { ServiceProvider } from '@blocksuite/global/di'; import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions'; @@ -176,7 +173,7 @@ export class NotionHtmlAdapter extends BaseAdapter { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -207,7 +204,7 @@ export class NotionHtmlAdapter extends BaseAdapter { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -268,7 +265,7 @@ export class NotionHtmlAdapter extends BaseAdapter { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, diff --git a/blocksuite/affine/shared/src/adapters/notion-text.ts b/blocksuite/affine/shared/src/adapters/notion-text.ts index a5cceadb5ba69..bcd24b355f80d 100644 --- a/blocksuite/affine/shared/src/adapters/notion-text.ts +++ b/blocksuite/affine/shared/src/adapters/notion-text.ts @@ -1,4 +1,4 @@ -import { DEFAULT_NOTE_BACKGROUND_COLOR } from '@blocksuite/affine-model'; +import { DefaultTheme } from '@blocksuite/affine-model'; import type { ExtensionType } from '@blocksuite/block-std'; import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions'; import type { DeltaInsert } from '@blocksuite/inline'; @@ -127,7 +127,7 @@ export class NotionTextAdapter extends BaseAdapter { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: 'both', diff --git a/blocksuite/affine/shared/src/adapters/plain-text/plain-text.ts b/blocksuite/affine/shared/src/adapters/plain-text/plain-text.ts index 87a16629c7c01..639ca7867c150 100644 --- a/blocksuite/affine/shared/src/adapters/plain-text/plain-text.ts +++ b/blocksuite/affine/shared/src/adapters/plain-text/plain-text.ts @@ -1,7 +1,4 @@ -import { - DEFAULT_NOTE_BACKGROUND_COLOR, - NoteDisplayMode, -} from '@blocksuite/affine-model'; +import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model'; import type { ExtensionType } from '@blocksuite/block-std'; import type { ServiceProvider } from '@blocksuite/global/di'; import { @@ -175,7 +172,7 @@ export class PlainTextAdapter extends BaseAdapter { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -242,7 +239,7 @@ export class PlainTextAdapter extends BaseAdapter<PlainText> { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -285,7 +282,7 @@ export class PlainTextAdapter extends BaseAdapter<PlainText> { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, diff --git a/blocksuite/affine/shared/src/services/edit-props-store.ts b/blocksuite/affine/shared/src/services/edit-props-store.ts index 9c083adbac160..11f8d5801308b 100644 --- a/blocksuite/affine/shared/src/services/edit-props-store.ts +++ b/blocksuite/affine/shared/src/services/edit-props-store.ts @@ -1,3 +1,4 @@ +import { ColorSchema } from '@blocksuite/affine-model'; import { type BlockStdScope, LifeCycleWatcher } from '@blocksuite/block-std'; import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions'; import { @@ -11,11 +12,7 @@ import clonedeep from 'lodash.clonedeep'; import mergeWith from 'lodash.mergewith'; import { z } from 'zod'; -import { - ColorSchema, - makeDeepOptional, - NodePropsSchema, -} from '../utils/index.js'; +import { makeDeepOptional, NodePropsSchema } from '../utils/index.js'; import { EditorSettingProvider } from './editor-setting-service.js'; const LastPropsSchema = NodePropsSchema; diff --git a/blocksuite/affine/shared/src/services/theme-service.ts b/blocksuite/affine/shared/src/services/theme-service.ts index 5c789f74c4b9f..97c25dea9c71c 100644 --- a/blocksuite/affine/shared/src/services/theme-service.ts +++ b/blocksuite/affine/shared/src/services/theme-service.ts @@ -1,4 +1,9 @@ -import { type Color, ColorScheme } from '@blocksuite/affine-model'; +import { + type Color, + ColorScheme, + DefaultTheme, + resolveColor, +} from '@blocksuite/affine-model'; import { type BlockStdScope, Extension, @@ -15,8 +20,6 @@ import { import { isInsideEdgelessEditor } from '../utils/index.js'; -const TRANSPARENT = 'transparent'; - export const ThemeExtensionIdentifier = createIdentifier<ThemeExtension>( 'AffineThemeExtension' ); @@ -52,9 +55,7 @@ export class ThemeService extends Extension { } get theme() { - return isInsideEdgelessEditor(this.std.host) - ? this.edgelessTheme - : this.appTheme; + return this.theme$.peek(); } get theme$() { @@ -94,24 +95,19 @@ export class ThemeService extends Extension { */ generateColorProperty( color: Color, - fallback = 'transparent', + fallback: Color = DefaultTheme.transparent, theme = this.theme ) { - let result: string | undefined = undefined; + const result = resolveColor(color, theme, resolveColor(fallback, theme)); - if (typeof color === 'object') { - result = color[theme] ?? color.normal; - } else { - result = color; - } - if (!result) { - result = fallback; - } + // Compatible old data if (result.startsWith('--')) { - return result.endsWith(TRANSPARENT) ? TRANSPARENT : `var(${result})`; + return result.endsWith('transparent') + ? DefaultTheme.transparent + : `var(${result})`; } - return result ?? TRANSPARENT; + return result; } /** @@ -132,35 +128,30 @@ export class ThemeService extends Extension { */ getColorValue( color: Color, - fallback = TRANSPARENT, + fallback: Color = DefaultTheme.transparent, real = false, theme = this.theme ) { - let result: string | undefined = undefined; + let result = resolveColor(color, theme, resolveColor(fallback, theme)); - if (typeof color === 'object') { - result = color[theme] ?? color.normal; - } else { - result = color; - } - if (!result) { - result = fallback; - } + // Compatible old data if (real && result.startsWith('--')) { - result = result.endsWith(TRANSPARENT) - ? TRANSPARENT + result = result.endsWith('transparent') + ? DefaultTheme.transparent : this.getCssVariableColor(result, theme); } - return result ?? TRANSPARENT; + return result ?? DefaultTheme.transparent; } getCssVariableColor(property: string, theme = this.theme) { + // Compatible old data if (property.startsWith('--')) { - if (property.endsWith(TRANSPARENT)) { - return TRANSPARENT; + if (property.endsWith('transparent')) { + return DefaultTheme.transparent; } const key = property as keyof AffineCssVariables; + // V1 theme const color = theme === ColorScheme.Dark ? combinedDarkCssVariables[key] diff --git a/blocksuite/affine/shared/src/utils/zod-schema.ts b/blocksuite/affine/shared/src/utils/zod-schema.ts index a9dddf8989898..1e929c64ba075 100644 --- a/blocksuite/affine/shared/src/utils/zod-schema.ts +++ b/blocksuite/affine/shared/src/utils/zod-schema.ts @@ -1,33 +1,24 @@ import { + ColorSchema, ConnectorMode, - DEFAULT_CONNECTOR_COLOR, - DEFAULT_CONNECTOR_TEXT_COLOR, DEFAULT_FRONT_END_POINT_STYLE, - DEFAULT_NOTE_BACKGROUND_COLOR, DEFAULT_NOTE_BORDER_SIZE, DEFAULT_NOTE_BORDER_STYLE, DEFAULT_NOTE_CORNER, DEFAULT_NOTE_SHADOW, DEFAULT_REAR_END_POINT_STYLE, DEFAULT_ROUGHNESS, - DEFAULT_SHAPE_FILL_COLOR, - DEFAULT_SHAPE_STROKE_COLOR, - DEFAULT_SHAPE_TEXT_COLOR, - DEFAULT_TEXT_COLOR, + DefaultTheme, FontFamily, FontStyle, FontWeight, LayoutType, - LineColorsSchema, LineWidth, MindmapStyle, - NoteBackgroundPaletteEnum, NoteDisplayMode, NoteShadowsSchema, - PaletteEnum, PointStyle, ShapeStyle, - StrokeColor, StrokeStyle, TextAlign, TextVerticalAlign, @@ -48,34 +39,17 @@ const ConnectorModeSchema = z.nativeEnum(ConnectorMode); const LayoutTypeSchema = z.nativeEnum(LayoutType); const MindmapStyleSchema = z.nativeEnum(MindmapStyle); -export const ColorSchema = z.union([ - z.object({ - normal: z.string(), - }), - z.object({ - light: z.string(), - dark: z.string(), - }), -]); -const ColorPaletteSchema = z.union([ColorSchema, PaletteEnum]); -const LineColorSchema = z.union([LineColorsSchema, ColorPaletteSchema]); -const TextColorSchema = z.union([LineColorsSchema, ColorPaletteSchema]); -const NoteBackgroundColorSchema = z.union([ - ColorSchema, - NoteBackgroundPaletteEnum, -]); - export const ConnectorSchema = z .object({ frontEndpointStyle: ConnectorEndpointSchema, rearEndpointStyle: ConnectorEndpointSchema, - stroke: LineColorSchema, + stroke: ColorSchema, strokeStyle: StrokeStyleSchema, strokeWidth: LineWidthSchema, rough: z.boolean(), mode: ConnectorModeSchema, labelStyle: z.object({ - color: TextColorSchema, + color: ColorSchema, fontSize: z.number(), fontFamily: FontFamilySchema, fontWeight: FontWeightSchema, @@ -86,13 +60,13 @@ export const ConnectorSchema = z .default({ frontEndpointStyle: DEFAULT_FRONT_END_POINT_STYLE, rearEndpointStyle: DEFAULT_REAR_END_POINT_STYLE, - stroke: DEFAULT_CONNECTOR_COLOR, + stroke: DefaultTheme.connectorColor, strokeStyle: StrokeStyle.Solid, strokeWidth: LineWidth.Two, rough: false, mode: ConnectorMode.Curve, labelStyle: { - color: DEFAULT_CONNECTOR_TEXT_COLOR, + color: DefaultTheme.black, fontSize: 16, fontFamily: FontFamily.Inter, fontWeight: FontWeight.Regular, @@ -103,21 +77,18 @@ export const ConnectorSchema = z export const BrushSchema = z .object({ - color: ColorPaletteSchema, + color: ColorSchema, lineWidth: LineWidthSchema, }) .default({ - color: { - dark: StrokeColor.White, - light: StrokeColor.Black, - }, + color: DefaultTheme.black, lineWidth: LineWidth.Four, }); const DEFAULT_SHAPE = { - color: DEFAULT_SHAPE_TEXT_COLOR, - fillColor: DEFAULT_SHAPE_FILL_COLOR, - strokeColor: DEFAULT_SHAPE_STROKE_COLOR, + color: DefaultTheme.shapeTextColor, + fillColor: DefaultTheme.shapeFillColor, + strokeColor: DefaultTheme.shapeStrokeColor, strokeStyle: StrokeStyle.Solid, strokeWidth: LineWidth.Two, shapeStyle: ShapeStyle.General, @@ -132,9 +103,9 @@ const DEFAULT_SHAPE = { }; const ShapeObject = { - color: TextColorSchema, - fillColor: ColorPaletteSchema, - strokeColor: ColorPaletteSchema, + color: ColorSchema, + fillColor: ColorSchema, + strokeColor: ColorSchema, strokeStyle: StrokeStyleSchema, strokeWidth: z.number(), shapeStyle: ShapeStyleSchema, @@ -158,7 +129,7 @@ export const RoundedShapeSchema = z export const TextSchema = z .object({ - color: TextColorSchema, + color: ColorSchema, fontSize: z.number(), fontFamily: FontFamilySchema, fontWeight: FontWeightSchema, @@ -166,7 +137,7 @@ export const TextSchema = z textAlign: TextAlignSchema, }) .default({ - color: DEFAULT_TEXT_COLOR, + color: DefaultTheme.textColor, fontSize: 24, fontFamily: FontFamily.Inter, fontWeight: FontWeight.Regular, @@ -176,14 +147,14 @@ export const TextSchema = z export const EdgelessTextSchema = z .object({ - color: TextColorSchema, + color: ColorSchema, fontFamily: FontFamilySchema, fontWeight: FontWeightSchema, fontStyle: FontStyleSchema, textAlign: TextAlignSchema, }) .default({ - color: DEFAULT_TEXT_COLOR, + color: DefaultTheme.textColor, fontFamily: FontFamily.Inter, fontWeight: FontWeight.Regular, fontStyle: FontStyle.Normal, @@ -192,7 +163,7 @@ export const EdgelessTextSchema = z export const NoteSchema = z .object({ - background: NoteBackgroundColorSchema, + background: ColorSchema, displayMode: NoteDisplayModeSchema, edgeless: z.object({ style: z.object({ @@ -204,7 +175,7 @@ export const NoteSchema = z }), }) .default({ - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, displayMode: NoteDisplayMode.EdgelessOnly, edgeless: { style: { @@ -228,7 +199,7 @@ export const MindmapSchema = z export const FrameSchema = z .object({ - background: ColorPaletteSchema.optional(), + background: ColorSchema.optional(), }) .default({}); diff --git a/blocksuite/blocks/package.json b/blocksuite/blocks/package.json index 76ba6d060b88f..b6de9c93e366e 100644 --- a/blocksuite/blocks/package.json +++ b/blocksuite/blocks/package.json @@ -54,6 +54,7 @@ "html2canvas": "^1.4.1", "katex": "^0.16.11", "lit": "^3.2.0", + "lodash.isequal": "^4.5.0", "lz-string": "^1.5.0", "mdast-util-gfm-autolink-literal": "^2.0.1", "mdast-util-gfm-strikethrough": "^2.0.0", @@ -92,7 +93,7 @@ ], "devDependencies": { "@types/dompurify": "^3.0.5", - "@types/katex": "^0.16.7" - }, - "version": "0.19.0" + "@types/katex": "^0.16.7", + "@types/lodash.isequal": "^4.5.8" + } } diff --git a/blocksuite/blocks/src/__tests__/adapters/html.unit.spec.ts b/blocksuite/blocks/src/__tests__/adapters/html.unit.spec.ts index d1e8ea8b000c0..459be24e82cf7 100644 --- a/blocksuite/blocks/src/__tests__/adapters/html.unit.spec.ts +++ b/blocksuite/blocks/src/__tests__/adapters/html.unit.spec.ts @@ -1,7 +1,4 @@ -import { - DEFAULT_NOTE_BACKGROUND_COLOR, - NoteDisplayMode, -} from '@blocksuite/affine-model'; +import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model'; import { HtmlAdapter } from '@blocksuite/affine-shared/adapters'; import { Container } from '@blocksuite/global/di'; import type { @@ -108,7 +105,7 @@ describe('snapshot to html', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -174,7 +171,7 @@ describe('snapshot to html', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -240,7 +237,7 @@ describe('snapshot to html', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -306,7 +303,7 @@ describe('snapshot to html', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -492,7 +489,7 @@ describe('snapshot to html', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -637,7 +634,7 @@ describe('snapshot to html', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -742,7 +739,7 @@ describe('snapshot to html', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -816,7 +813,7 @@ describe('snapshot to html', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -890,7 +887,7 @@ describe('snapshot to html', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -965,7 +962,7 @@ describe('snapshot to html', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1040,7 +1037,7 @@ describe('snapshot to html', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1160,7 +1157,7 @@ describe('snapshot to html', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1221,7 +1218,7 @@ describe('snapshot to html', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1485,7 +1482,7 @@ describe('snapshot to html', () => { version: 1, props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1576,7 +1573,7 @@ describe('snapshot to html', () => { version: 1, props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: 'both', @@ -1969,7 +1966,7 @@ describe('html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -2011,7 +2008,7 @@ describe('html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -2121,7 +2118,7 @@ describe('html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -2187,7 +2184,7 @@ describe('html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -2234,7 +2231,7 @@ describe('html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -2270,7 +2267,7 @@ describe('html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -2382,7 +2379,7 @@ describe('html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -2426,7 +2423,7 @@ describe('html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -2470,7 +2467,7 @@ describe('html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -2523,7 +2520,7 @@ describe('html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -2573,7 +2570,7 @@ describe('html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, diff --git a/blocksuite/blocks/src/__tests__/adapters/markdown.unit.spec.ts b/blocksuite/blocks/src/__tests__/adapters/markdown.unit.spec.ts index deda2f9aa2148..733e02a6ae944 100644 --- a/blocksuite/blocks/src/__tests__/adapters/markdown.unit.spec.ts +++ b/blocksuite/blocks/src/__tests__/adapters/markdown.unit.spec.ts @@ -1,7 +1,4 @@ -import { - DEFAULT_NOTE_BACKGROUND_COLOR, - NoteDisplayMode, -} from '@blocksuite/affine-model'; +import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model'; import type { BlockSnapshot, DocSnapshot, @@ -44,7 +41,7 @@ describe('snapshot to markdown', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -108,7 +105,7 @@ describe('snapshot to markdown', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -307,7 +304,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -455,7 +452,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -607,7 +604,7 @@ hhh version: 1, props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: 'both', @@ -750,7 +747,7 @@ hhh version: 1, props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: 'both', @@ -911,7 +908,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -983,7 +980,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1055,7 +1052,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1111,7 +1108,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1183,7 +1180,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1252,7 +1249,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1325,7 +1322,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1398,7 +1395,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1707,7 +1704,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1975,7 +1972,7 @@ hhh version: 1, props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: 'both', @@ -2348,7 +2345,7 @@ describe('markdown to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -2393,7 +2390,7 @@ describe('markdown to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: 'both', @@ -2444,7 +2441,7 @@ describe('markdown to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: 'both', @@ -2495,7 +2492,7 @@ describe('markdown to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: 'both', @@ -2558,7 +2555,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -2728,7 +2725,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -2864,7 +2861,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -2998,7 +2995,7 @@ bbb flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -3099,7 +3096,7 @@ bbb flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -3153,7 +3150,7 @@ bbb flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: 'both', @@ -3206,7 +3203,7 @@ bbb flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -3256,7 +3253,7 @@ bbb flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -3307,7 +3304,7 @@ bbb flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -3358,7 +3355,7 @@ bbb flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -3412,7 +3409,7 @@ bbb flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -3530,7 +3527,7 @@ bbb flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -3571,7 +3568,7 @@ bbb flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -3622,7 +3619,7 @@ bbb flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -3673,7 +3670,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: 'both', diff --git a/blocksuite/blocks/src/__tests__/adapters/notion-html.unit.spec.ts b/blocksuite/blocks/src/__tests__/adapters/notion-html.unit.spec.ts index f8b66a784a993..2146922cb75bf 100644 --- a/blocksuite/blocks/src/__tests__/adapters/notion-html.unit.spec.ts +++ b/blocksuite/blocks/src/__tests__/adapters/notion-html.unit.spec.ts @@ -1,7 +1,4 @@ -import { - DEFAULT_NOTE_BACKGROUND_COLOR, - NoteDisplayMode, -} from '@blocksuite/affine-model'; +import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model'; import { NotionHtmlAdapter } from '@blocksuite/affine-shared/adapters'; import { Container } from '@blocksuite/global/di'; import { @@ -42,7 +39,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -97,7 +94,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -212,7 +209,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -378,7 +375,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -823,7 +820,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -952,7 +949,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1053,7 +1050,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1102,7 +1099,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1171,7 +1168,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1220,7 +1217,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1267,7 +1264,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1311,7 +1308,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1435,7 +1432,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1714,7 +1711,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: 'both', @@ -1907,7 +1904,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1948,7 +1945,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1990,7 +1987,7 @@ describe('notion html to snapshot', () => { test('inline style', async () => { const html = `<div class="page-body"> <p id="12d088dd-6fdb-80e5-97be-ebd049a327f5" class=""> - <strong>strong</strong> <em>italic</em> <span style="border-bottom:0.05em solid">underline</span> <del>strikethrough</del> <code>code</code> + <strong>strong</strong> <em>italic</em> <span style="border-bottom:0.05em solid">underline</span> <del>strikethrough</del> <code>code</code> </p> </div>`; @@ -2000,7 +1997,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, diff --git a/blocksuite/blocks/src/__tests__/adapters/notion-text.unit.spec.ts b/blocksuite/blocks/src/__tests__/adapters/notion-text.unit.spec.ts index bc2344848741d..311ffa0770293 100644 --- a/blocksuite/blocks/src/__tests__/adapters/notion-text.unit.spec.ts +++ b/blocksuite/blocks/src/__tests__/adapters/notion-text.unit.spec.ts @@ -1,4 +1,4 @@ -import { DEFAULT_NOTE_BACKGROUND_COLOR } from '@blocksuite/affine-model'; +import { DefaultTheme } from '@blocksuite/affine-model'; import { NotionTextAdapter } from '@blocksuite/affine-shared/adapters'; import type { SliceSnapshot } from '@blocksuite/store'; import { describe, expect, test } from 'vitest'; @@ -20,7 +20,7 @@ describe('notion-text to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: 'both', diff --git a/blocksuite/blocks/src/__tests__/adapters/plain-text.unit.spec.ts b/blocksuite/blocks/src/__tests__/adapters/plain-text.unit.spec.ts index bb6894f694c65..95d94b0795a1e 100644 --- a/blocksuite/blocks/src/__tests__/adapters/plain-text.unit.spec.ts +++ b/blocksuite/blocks/src/__tests__/adapters/plain-text.unit.spec.ts @@ -1,7 +1,4 @@ -import { - DEFAULT_NOTE_BACKGROUND_COLOR, - NoteDisplayMode, -} from '@blocksuite/affine-model'; +import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model'; import { PlainTextAdapter } from '@blocksuite/affine-shared/adapters'; import { Container } from '@blocksuite/global/di'; import type { @@ -53,7 +50,7 @@ describe('snapshot to plain text', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -206,7 +203,7 @@ describe('snapshot to plain text', () => { version: 1, props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -362,7 +359,7 @@ describe('snapshot to plain text', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -432,7 +429,7 @@ describe('snapshot to plain text', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -495,7 +492,7 @@ describe('snapshot to plain text', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -664,7 +661,7 @@ describe('snapshot to plain text', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -727,7 +724,7 @@ describe('snapshot to plain text', () => { version: 1, props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -820,7 +817,7 @@ describe('snapshot to plain text', () => { version: 1, props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: 'both', @@ -1179,7 +1176,7 @@ describe('snapshot to plain text', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, diff --git a/blocksuite/blocks/src/_common/adapters/markdown/markdown.ts b/blocksuite/blocks/src/_common/adapters/markdown/markdown.ts index 74f6c6e39f246..67e93d5d28525 100644 --- a/blocksuite/blocks/src/_common/adapters/markdown/markdown.ts +++ b/blocksuite/blocks/src/_common/adapters/markdown/markdown.ts @@ -1,7 +1,4 @@ -import { - DEFAULT_NOTE_BACKGROUND_COLOR, - NoteDisplayMode, -} from '@blocksuite/affine-model'; +import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model'; import { type AdapterContext, AdapterFactoryIdentifier, @@ -270,7 +267,7 @@ export class MarkdownAdapter extends BaseAdapter<Markdown> { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -294,7 +291,7 @@ export class MarkdownAdapter extends BaseAdapter<Markdown> { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -413,7 +410,7 @@ export class MarkdownAdapter extends BaseAdapter<Markdown> { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, diff --git a/blocksuite/blocks/src/_common/adapters/mix-text.ts b/blocksuite/blocks/src/_common/adapters/mix-text.ts index c98d17b6030de..392b1b2c9991e 100644 --- a/blocksuite/blocks/src/_common/adapters/mix-text.ts +++ b/blocksuite/blocks/src/_common/adapters/mix-text.ts @@ -1,7 +1,4 @@ -import { - DEFAULT_NOTE_BACKGROUND_COLOR, - NoteDisplayMode, -} from '@blocksuite/affine-model'; +import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model'; import { AdapterFactoryIdentifier } from '@blocksuite/affine-shared/adapters'; import type { ExtensionType } from '@blocksuite/block-std'; import type { DeltaInsert } from '@blocksuite/inline'; @@ -164,7 +161,7 @@ export class MixTextAdapter extends BaseAdapter<MixText> { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -231,7 +228,7 @@ export class MixTextAdapter extends BaseAdapter<MixText> { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -284,7 +281,7 @@ export class MixTextAdapter extends BaseAdapter<MixText> { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, diff --git a/blocksuite/blocks/src/root-block/edgeless/components/auto-complete/auto-complete-panel.ts b/blocksuite/blocks/src/root-block/edgeless/components/auto-complete/auto-complete-panel.ts index 77c38e8646998..71d5c4deaa958 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/auto-complete/auto-complete-panel.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/auto-complete/auto-complete-panel.ts @@ -14,11 +14,8 @@ import type { ShapeElementModel, } from '@blocksuite/affine-model'; import { - DEFAULT_NOTE_BACKGROUND_COLOR, DEFAULT_NOTE_WIDTH, - DEFAULT_SHAPE_FILL_COLOR, - DEFAULT_SHAPE_STROKE_COLOR, - DEFAULT_TEXT_COLOR, + DefaultTheme, FontFamily, FontStyle, FontWeight, @@ -282,7 +279,7 @@ export class EdgelessAutoCompletePanel extends WithDisposable(LitElement) { textAlign: 'left', fontSize: 24, fontFamily: FontFamily.Inter, - color: DEFAULT_TEXT_COLOR, + color: DefaultTheme.textColor, fontWeight: FontWeight.Regular, fontStyle: FontStyle.Normal, }); @@ -474,7 +471,7 @@ export class EdgelessAutoCompletePanel extends WithDisposable(LitElement) { .getColorValue( this.edgeless.std.get(EditPropsStore).lastProps$.value['affine:note'] .background, - DEFAULT_NOTE_BACKGROUND_COLOR, + DefaultTheme.noteBackgrounColor, true ); this._overlay = new AutoCompleteNoteOverlay(this.gfx, xywh, background); @@ -515,10 +512,10 @@ export class EdgelessAutoCompletePanel extends WithDisposable(LitElement) { const stroke = this.edgeless.std .get(ThemeProvider) - .getColorValue(strokeColor, DEFAULT_SHAPE_STROKE_COLOR, true); + .getColorValue(strokeColor, DefaultTheme.shapeStrokeColor, true); const fill = this.edgeless.std .get(ThemeProvider) - .getColorValue(fillColor, DEFAULT_SHAPE_FILL_COLOR, true); + .getColorValue(fillColor, DefaultTheme.shapeFillColor, true); const options = { seed: 666, diff --git a/blocksuite/blocks/src/root-block/edgeless/components/auto-complete/edgeless-auto-complete.ts b/blocksuite/blocks/src/root-block/edgeless/components/auto-complete/edgeless-auto-complete.ts index 9febe37d465ff..6fa705ce878ab 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/auto-complete/edgeless-auto-complete.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/auto-complete/edgeless-auto-complete.ts @@ -21,7 +21,7 @@ import type { } from '@blocksuite/affine-model'; import { DEFAULT_NOTE_HEIGHT, - DEFAULT_SHAPE_STROKE_COLOR, + DefaultTheme, LayoutType, MindmapElementModel, ShapeElementModel, @@ -643,7 +643,7 @@ export class EdgelessAutoComplete extends WithDisposable(LitElement) { this._autoCompleteOverlay.stroke = surface.renderer.getColorValue( current.strokeColor, - DEFAULT_SHAPE_STROKE_COLOR, + DefaultTheme.shapeStrokeColor, true ); this._autoCompleteOverlay.linePoints = path; diff --git a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/button.ts b/blocksuite/blocks/src/root-block/edgeless/components/color-picker/button.ts index 5b2435415d078..e71578d5d654e 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/button.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/color-picker/button.ts @@ -1,4 +1,6 @@ import type { EditorMenuButton } from '@blocksuite/affine-components/toolbar'; +import type { ColorScheme, Palette } from '@blocksuite/affine-model'; +import { resolveColor } from '@blocksuite/affine-model'; import { WithDisposable } from '@blocksuite/global/utils'; import { html, LitElement } from 'lit'; import { property, query, state } from 'lit/decorators.js'; @@ -7,19 +9,14 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import { styleMap } from 'lit/directives/style-map.js'; import type { ColorEvent } from '../panel/color-panel.js'; -import type { - ModeType, - PickColorDetail, - PickColorEvent, - PickColorType, -} from './types.js'; +import type { ModeType, PickColorEvent, PickColorType } from './types.js'; import { keepColor, preprocessColor, rgbaToHex8 } from './utils.js'; type Type = 'normal' | 'custom'; export class EdgelessColorPickerButton extends WithDisposable(LitElement) { readonly #select = (e: ColorEvent) => { - this.#pick({ palette: e.detail }); + this.#pick(e.detail); }; switchToCustomTab = (e: MouseEvent) => { @@ -69,14 +66,16 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) { } get isCustomColor() { - return !this.palettes.includes(this.color); + return !this.palettes + .map(({ value }) => resolveColor(value, this.theme)) + .includes(this.color); } get tabContentPadding() { return `${this.tabType === 'custom' ? 0 : 8}px`; } - #pick(detail: PickColorDetail) { + #pick(detail: Palette) { this.pick?.({ type: 'start' }); this.pick?.({ type: 'pick', detail }); this.pick?.({ type: 'end' }); @@ -126,8 +125,8 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) { role="listbox" class=${ifDefined(this.colorPanelClass)} .value=${this.color} + .theme=${this.theme} .palettes=${this.palettes} - .options=${this.palettes} .hollowCircle=${this.hollowCircle} .openColorPicker=${this.switchToCustomTab} .hasTransparent=${false} @@ -189,7 +188,7 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) { accessor menuButton!: EditorMenuButton; @property({ attribute: false }) - accessor palettes: string[] = []; + accessor palettes: Palette[] = []; @property({ attribute: false }) accessor pick!: (event: PickColorEvent) => void; @@ -197,6 +196,9 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) { @state() accessor tabType: Type = 'normal'; + @property({ attribute: false }) + accessor theme!: ColorScheme; + @property() accessor tooltip: string | undefined = undefined; } diff --git a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/color-picker.ts b/blocksuite/blocks/src/root-block/edgeless/components/color-picker/color-picker.ts index 9e92317922495..e30896cf13fb3 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/color-picker.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/color-picker/color-picker.ts @@ -1,3 +1,4 @@ +import type { Color } from '@blocksuite/affine-model'; import { on, once, stopPropagation } from '@blocksuite/affine-shared/utils'; import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils'; import { batch, computed, signal } from '@preact/signals-core'; @@ -111,15 +112,15 @@ export class EdgelessColorPicker extends SignalWatcher( #pick() { const hsva = this.hsva$.peek(); const type = this.modeType$.peek(); - const detail = { [type]: hsvaToHex8(hsva) }; + const value = { [type]: hsvaToHex8(hsva) }; + const key = 'Custom'; if (type !== 'normal') { const another = type === 'light' ? 'dark' : 'light'; const { hsva } = this[`${another}$`].peek(); - detail[another] = hsvaToHex8(hsva); + value[another] = hsvaToHex8(hsva); } - - this.pick?.({ type: 'pick', detail }); + this.pick?.({ type: 'pick', detail: { key, value: value as Color } }); } #pickEnd() { @@ -398,12 +399,12 @@ export class EdgelessColorPicker extends SignalWatcher( // Updates modes if (modes?.length) { batches.push(() => { - // eslint-disable-next-line sonarjs/no-ignored-return - this.modes$.value.reduce((fallback, curr, n) => { + let value = defaultHsva(); + this.modes$.value.forEach((curr, n) => { const m = modes[n]; - curr.hsva = m ? rgbaToHsva(m.rgba) : fallback; - return { ...curr.hsva }; - }, defaultHsva()); + curr.hsva = m ? rgbaToHsva(m.rgba) : value; + value = curr.hsva; + }); }); } diff --git a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/consts.ts b/blocksuite/blocks/src/root-block/edgeless/components/color-picker/consts.ts index af975f57a1bdf..ddb22e0cf769a 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/consts.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/color-picker/consts.ts @@ -11,8 +11,7 @@ export const COLORS: [Rgb, number][] = [ [{ r: 0, g: 1, b: 1 }, 3 / 6], [{ r: 0, g: 0, b: 1 }, 4 / 6], [{ r: 1, g: 0, b: 1 }, 5 / 6], - // eslint-disable-next-line sonarjs/no-identical-expressions - [{ r: 1, g: 0, b: 0 }, 6 / 6], + [{ r: 1, g: 0, b: 0 }, 1], ]; export const FIRST_COLOR = COLORS[0][0]; diff --git a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/custom-button.ts b/blocksuite/blocks/src/root-block/edgeless/components/color-picker/custom-button.ts index 72a4bdde44147..41bd64373c597 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/custom-button.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/color-picker/custom-button.ts @@ -11,6 +11,7 @@ export class EdgelessColorCustomButton extends LitElement { height: 24px; cursor: pointer; } + :host([active]):after { position: absolute; display: block; diff --git a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/types.ts b/blocksuite/blocks/src/root-block/edgeless/components/color-picker/types.ts index 820a6306cf99a..f9d8534867749 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/types.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/color-picker/types.ts @@ -1,6 +1,6 @@ // https://www.w3.org/TR/css-color-4/ -import type { ColorScheme } from '@blocksuite/affine-model'; +import type { ColorScheme, Palette } from '@blocksuite/affine-model'; // Red, green, blue. All in the range [0, 1]. export type Rgb = { @@ -48,8 +48,6 @@ export type ModeRgba = { type: ModeType; rgba: Rgba }; export type PickColorType = 'palette' | ModeType; -export type PickColorDetail = Partial<Record<PickColorType, string>>; - export type PickColorEvent = | { type: 'start' | 'end' } - | { type: 'pick'; detail: PickColorDetail }; + | { type: 'pick'; detail: Palette }; diff --git a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/utils.ts b/blocksuite/blocks/src/root-block/edgeless/components/color-picker/utils.ts index 3d03f55f1c9ee..cf50d18ab47ff 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/utils.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/color-picker/utils.ts @@ -7,7 +7,6 @@ import type { Hsv, Hsva, ModeType, - PickColorDetail, PickColorType, Point, Rgb, @@ -269,12 +268,13 @@ export const preprocessColor = (style: CSSStyleDeclaration) => { * * ```json * { 'fillColor': '--affine-palette-shape-yellow' } + * { 'fillColor': '#ffffff' } * { 'fillColor': { normal: '#ffffffff' }} * { 'fillColor': { light: '#fff000ff', 'dark': '#0000fff00' }} * ``` */ -export const packColor = (key: string, detail: PickColorDetail) => { - return { [key]: detail.palette ?? detail }; +export const packColor = (key: string, color: Color) => { + return { [key]: typeof color === 'object' ? { ...color } : color }; }; /** @@ -298,10 +298,14 @@ export const packColorsWithColorScheme = ( let type: PickColorType = 'palette'; if (typeof oldColor === 'object') { - type = colorScheme in oldColor ? colorScheme : 'normal'; - colors[0].value = oldColor.normal ?? value; - colors[1].value = oldColor.light ?? value; - colors[2].value = oldColor.dark ?? value; + if ('normal' in oldColor) { + type = 'normal'; + colors[0].value = oldColor.normal ?? value; + } else { + type = colorScheme; + colors[1].value = oldColor.light ?? value; + colors[2].value = oldColor.dark ?? value; + } } return { type, colors }; diff --git a/blocksuite/blocks/src/root-block/edgeless/components/panel/color-panel.ts b/blocksuite/blocks/src/root-block/edgeless/components/panel/color-panel.ts index 7d33780eaa411..3f76a3f93aeb6 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/panel/color-panel.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/color-panel.ts @@ -1,12 +1,15 @@ -import { Black, ColorScheme, PALETTES, White } from '@blocksuite/affine-model'; +import type { Color, ColorScheme, Palette } from '@blocksuite/affine-model'; +import { isTransparent, resolveColor } from '@blocksuite/affine-model'; import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme'; import { css, html, LitElement, nothing, svg, type TemplateResult } from 'lit'; import { property } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; +import { ifDefined } from 'lit/directives/if-defined.js'; import { repeat } from 'lit/directives/repeat.js'; +import isEqual from 'lodash.isequal'; export class ColorEvent extends Event { - detail: string; + detail: Palette; constructor( type: string, @@ -14,21 +17,13 @@ export class ColorEvent extends Event { detail, composed, bubbles, - }: { detail: string; composed: boolean; bubbles: boolean } + }: { detail: Palette; composed: boolean; bubbles: boolean } ) { super(type, { bubbles, composed }); this.detail = detail; } } -export const GET_DEFAULT_LINE_COLOR = (theme: ColorScheme) => { - return theme === ColorScheme.Dark ? White : Black; -}; - -export function isTransparent(color: string) { - return color.toLowerCase().endsWith('transparent'); -} - function TransparentIcon(hollowCircle = false) { const CircleIcon: TemplateResult | typeof nothing = hollowCircle ? svg`<circle cx="10" cy="10" r="8" fill="white" />` @@ -125,7 +120,7 @@ export class EdgelessColorButton extends LitElement { border-radius: 50%; overflow: hidden; } - :host .color-unit:after { + :host .color-unit::after { position: absolute; display: block; content: ''; @@ -134,7 +129,6 @@ export class EdgelessColorButton extends LitElement { border-radius: 50%; box-sizing: border-box; overflow: hidden; - pointer-events: none; border-width: 0.5px; border-style: solid; border-color: ${unsafeCSSVarV2('layer/insideBorder/blackBorder')}; @@ -151,34 +145,32 @@ export class EdgelessColorButton extends LitElement { width: 20px; height: 20px; } - - :host([active]):after { + :host::after { position: absolute; display: block; content: ''; width: 27px; height: 27px; - border: 1.5px solid var(--affine-primary-color); border-radius: 50%; box-sizing: border-box; overflow: hidden; pointer-events: none; } + + :host([active])::after { + border: 1.5px solid var(--affine-primary-color); + } `; get preprocessColor() { - const color = this.color; - return color.startsWith('--') ? `var(${color})` : color; + const value = resolveColor(this.color, this.theme); + return value.startsWith('--') ? `var(${value})` : value; } override render() { - const { color, preprocessColor, hollowCircle, letter } = this; + const { label, preprocessColor, hollowCircle } = this; const additionIcon = AdditionIcon(preprocessColor, !!hollowCircle); - return html`<div - class="color-unit" - aria-label=${color} - data-letter=${letter ? 'A' : nothing} - > + return html`<div class="color-unit" aria-label=${ifDefined(label)}> ${additionIcon} </div>`; } @@ -187,13 +179,16 @@ export class EdgelessColorButton extends LitElement { accessor active: boolean = false; @property({ attribute: false }) - accessor color!: string; + accessor color!: Color; @property({ attribute: false }) accessor hollowCircle: boolean = false; @property({ attribute: false }) - accessor letter: boolean | undefined = undefined; + accessor label: string | undefined = undefined; + + @property({ attribute: false }) + accessor theme!: ColorScheme; } export class EdgelessColorPanel extends LitElement { @@ -221,35 +216,42 @@ export class EdgelessColorPanel extends LitElement { } `; - onSelect(value: string) { + onSelect(palette: Palette) { this.dispatchEvent( new ColorEvent('select', { - detail: value, + detail: palette, composed: true, bubbles: true, }) ); - this.value = value; + } + + get resolvedValue() { + return this.value && resolveColor(this.value, this.theme); } override render() { + const resolvedValue = this.resolvedValue; return html` ${repeat( this.palettes, - color => color, - color => - html`<edgeless-color-button - class=${classMap({ - large: true, - black: color.startsWith('--') && color.endsWith('black'), - })} - .color=${color} - .letter=${this.showLetterMark} + palette => palette.key, + palette => { + const resolvedColor = resolveColor(palette.value, this.theme); + return html`<edgeless-color-button + class=${classMap({ large: true })} + .label=${palette.key} + .color=${palette.value} + .theme=${this.theme} .hollowCircle=${this.hollowCircle} - ?active=${color === this.value} - @click=${() => this.onSelect(color)} + ?active=${isEqual(resolvedColor, resolvedValue)} + @click=${() => { + this.onSelect(palette); + this.value = resolvedColor; + }} > - </edgeless-color-button>` + </edgeless-color-button>`; + } )} <slot name="custom"></slot> `; @@ -265,13 +267,13 @@ export class EdgelessColorPanel extends LitElement { accessor openColorPicker!: (e: MouseEvent) => void; @property({ type: Array }) - accessor palettes: readonly string[] = PALETTES; + accessor palettes: readonly Palette[] = []; @property({ attribute: false }) - accessor showLetterMark = false; + accessor theme!: ColorScheme; @property({ attribute: false }) - accessor value: string | null = null; + accessor value: Color | null = null; } export class EdgelessTextColorIcon extends LitElement { diff --git a/blocksuite/blocks/src/root-block/edgeless/components/panel/line-styles-panel.ts b/blocksuite/blocks/src/root-block/edgeless/components/panel/line-styles-panel.ts index 7a43bd5064405..a973368569bcd 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/panel/line-styles-panel.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/line-styles-panel.ts @@ -3,7 +3,7 @@ import { DashLineIcon, StraightLineIcon, } from '@blocksuite/affine-components/icons'; -import { type LineWidth, StrokeStyle } from '@blocksuite/affine-model'; +import { LineWidth, StrokeStyle } from '@blocksuite/affine-model'; import { html } from 'lit'; import { classMap } from 'lit/directives/class-map.js'; import { repeat } from 'lit/directives/repeat.js'; @@ -47,14 +47,14 @@ const LINE_STYLE_LIST = [ export function LineStylesPanel({ onClick, - selectedLineSize, selectedLineStyle, + selectedLineSize = LineWidth.Two, lineStyles = [StrokeStyle.Solid, StrokeStyle.Dash, StrokeStyle.None], }: LineStylesPanelProps = {}) { const lineSizePanel = html` <edgeless-line-width-panel - .selectedSize=${selectedLineSize as LineWidth} - .disable=${selectedLineStyle === StrokeStyle.None} + ?disabled=${selectedLineStyle === StrokeStyle.None} + .selectedSize=${selectedLineSize} @select=${(e: LineWidthEvent) => { onClick?.({ type: 'size', @@ -69,15 +69,15 @@ export function LineStylesPanel({ item => item.value, ({ name, icon, value }) => { const active = selectedLineStyle === value; - const classes: Record<string, boolean> = { + const classInfo = { 'line-style-button': true, [`mode-${value}`]: true, }; - if (active) classes['active'] = true; + if (active) classInfo['active'] = true; return html` <edgeless-tool-icon-button - class=${classMap(classes)} + class=${classMap(classInfo)} .active=${active} .activeMode=${'background'} .tooltip=${name} diff --git a/blocksuite/blocks/src/root-block/edgeless/components/panel/stroke-style-panel.ts b/blocksuite/blocks/src/root-block/edgeless/components/panel/stroke-style-panel.ts index 46ec90f01424b..5fb4fa543c9df 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/panel/stroke-style-panel.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/stroke-style-panel.ts @@ -1,4 +1,8 @@ -import { PALETTES, type StrokeStyle } from '@blocksuite/affine-model'; +import { + type ColorScheme, + DefaultTheme, + type StrokeStyle, +} from '@blocksuite/affine-model'; import { WithDisposable } from '@blocksuite/global/utils'; import { css, html, LitElement } from 'lit'; import { property } from 'lit/decorators.js'; @@ -38,8 +42,9 @@ export class StrokeStylePanel extends WithDisposable(LitElement) { <edgeless-color-panel role="listbox" aria-label="Border colors" - .palettes=${PALETTES} .value=${this.strokeColor} + .theme=${this.theme} + .palettes=${DefaultTheme.Palettes} .hollowCircle=${this.hollowCircle} @select=${(e: ColorEvent) => this.setStrokeColor(e)} > @@ -64,6 +69,9 @@ export class StrokeStylePanel extends WithDisposable(LitElement) { @property({ attribute: false }) accessor strokeWidth!: number; + + @property({ attribute: false }) + accessor theme!: ColorScheme; } declare global { diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/brush-menu.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/brush-menu.ts index a16c9c4703fe5..5441c110c606c 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/brush-menu.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/brush-menu.ts @@ -1,4 +1,4 @@ -import { STROKE_COLORS } from '@blocksuite/affine-model'; +import { DefaultTheme } from '@blocksuite/affine-model'; import { EditPropsStore, ThemeProvider, @@ -9,10 +9,7 @@ import { computed } from '@preact/signals-core'; import { css, html, LitElement } from 'lit'; import { property } from 'lit/decorators.js'; -import { - type ColorEvent, - GET_DEFAULT_LINE_COLOR, -} from '../../panel/color-panel.js'; +import type { ColorEvent } from '../../panel/color-panel.js'; import type { LineWidthEvent } from '../../panel/line-width-panel.js'; import { EdgelessToolbarToolMixin } from '../mixins/tool.mixin.js'; @@ -46,14 +43,13 @@ export class EdgelessBrushMenu extends EdgelessToolbarToolMixin( }; }); + private readonly _theme$ = computed(() => { + return this.edgeless.std.get(ThemeProvider).theme$.value; + }); + type: GfxToolsFullOptionValue['type'] = 'brush'; override render() { - const theme = this.edgeless.std.get(ThemeProvider).theme; - const color = this.edgeless.std - .get(ThemeProvider) - .getColorValue(this._props$.value.color, GET_DEFAULT_LINE_COLOR(theme)); - return html` <edgeless-slide-menu> <div class="menu-content"> @@ -66,12 +62,14 @@ export class EdgelessBrushMenu extends EdgelessToolbarToolMixin( <menu-divider .vertical=${true}></menu-divider> <edgeless-color-panel class="one-way" - .value=${color} - .palettes=${STROKE_COLORS} + .value=${this._props$.value.color} + .theme=${this._theme$.value} + .palettes=${DefaultTheme.StrokeColorPalettes} .hasTransparent=${!this.edgeless.doc.awarenessStore.getFlag( 'enable_color_picker' )} - @select=${(e: ColorEvent) => this.onChange({ color: e.detail })} + @select=${(e: ColorEvent) => + this.onChange({ color: e.detail.value })} ></edgeless-color-panel> </div> </edgeless-slide-menu> diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts index a34ba4cc22d8d..ce4e05c5f98b3 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts @@ -3,11 +3,7 @@ import { ConnectorLWithArrowIcon, ConnectorXWithArrowIcon, } from '@blocksuite/affine-components/icons'; -import { - ConnectorMode, - DEFAULT_CONNECTOR_COLOR, - STROKE_COLORS, -} from '@blocksuite/affine-model'; +import { ConnectorMode, DefaultTheme } from '@blocksuite/affine-model'; import { EditPropsStore, ThemeProvider, @@ -104,6 +100,10 @@ export class EdgelessConnectorMenu extends EdgelessToolbarToolMixin( return { mode, stroke, strokeWidth }; }); + private readonly _theme$ = computed(() => { + return this.edgeless.std.get(ThemeProvider).theme$.value; + }); + override type: GfxToolsFullOptionValue['type'] = 'connector'; override render() { @@ -112,9 +112,6 @@ export class EdgelessConnectorMenu extends EdgelessToolbarToolMixin( mode, this.onChange ); - const color = this.edgeless.std - .get(ThemeProvider) - .getColorValue(stroke, DEFAULT_CONNECTOR_COLOR); return html` <edgeless-slide-menu> @@ -130,12 +127,14 @@ export class EdgelessConnectorMenu extends EdgelessToolbarToolMixin( <div class="submenu-divider"></div> <edgeless-color-panel class="one-way" - .value=${color} - .palettes=${STROKE_COLORS} + .value=${stroke} + .theme=${this._theme$.value} + .palettes=${DefaultTheme.StrokeColorPalettes} .hasTransparent=${!this.edgeless.doc.awarenessStore.getFlag( 'enable_color_picker' )} - @select=${(e: ColorEvent) => this.onChange({ stroke: e.detail })} + @select=${(e: ColorEvent) => + this.onChange({ stroke: e.detail.value })} ></edgeless-color-panel> </div> </edgeless-slide-menu> diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/edgeless-toolbar.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/edgeless-toolbar.ts index cba68fd9574ad..4bb387acf7c8f 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/edgeless-toolbar.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/edgeless-toolbar.ts @@ -1,4 +1,4 @@ -/* eslint-disable @typescript-eslint/no-non-null-assertion */ +/* oxlint-disable @typescript-eslint/no-non-null-assertion */ import { type MenuHandler, popMenu, @@ -25,6 +25,7 @@ import { debounce } from '@blocksuite/global/utils'; import { Slot } from '@blocksuite/store'; import { autoPlacement, offset } from '@floating-ui/dom'; import { ContextProvider } from '@lit/context'; +import { computed } from '@preact/signals-core'; import { baseTheme, cssVar } from '@toeverything/theme'; import { css, html, nothing, unsafeCSS } from 'lit'; import { query, state } from 'lit/decorators.js'; @@ -222,6 +223,10 @@ export class EdgelessToolbarWidget extends WidgetComponent< } `; + private readonly _appTheme$ = computed(() => { + return this.std.get(ThemeProvider).app$.value; + }); + private _moreQuickToolsMenu: MenuHandler | null = null; private _moreQuickToolsMenuRef: HTMLElement | null = null; @@ -625,9 +630,11 @@ export class EdgelessToolbarWidget extends WidgetComponent< return nothing; } - const appTheme = this.std.get(ThemeProvider).app$.value; return html` - <div class="edgeless-toolbar-wrapper" data-app-theme=${appTheme}> + <div + class="edgeless-toolbar-wrapper" + data-app-theme=${this._appTheme$.value} + > <div class="edgeless-toolbar-toggle-control" data-enable=${this._enableAutoHide} diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/note/note-senior-button.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/note/note-senior-button.ts index 3fa0ca888f4ed..2a2dd0ce459b1 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/note/note-senior-button.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/note/note-senior-button.ts @@ -166,7 +166,7 @@ export class EdgelessNoteSeniorButton extends EdgelessToolbarToolMixin( }> ) => { this._states.forEach(key => { - // eslint-disable-next-line eqeqeq + // oxlint-disable-next-line eqeqeq if (props[key] != undefined) { Object.assign(this, { [key]: props[key] }); } diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/note/note-tool-button.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/note/note-tool-button.ts index bd6a5966a8b1b..d46107aadf9f6 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/note/note-tool-button.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/note/note-tool-button.ts @@ -60,7 +60,7 @@ export class EdgelessNoteToolButton extends QuickToolMixin(LitElement) { }> ) => { this._states.forEach(key => { - // eslint-disable-next-line eqeqeq + // oxlint-disable-next-line eqeqeq if (props[key] != undefined) { Object.assign(this, { [key]: props[key] }); } diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts index 3f8af09597638..3d3a892634fa1 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts @@ -3,27 +3,24 @@ import { ScribbledStyleIcon, } from '@blocksuite/affine-components/icons'; import { - DEFAULT_SHAPE_FILL_COLOR, - LIGHT_PALETTES, - MEDIUM_PALETTES, - SHAPE_FILL_COLORS, + DefaultTheme, + isTransparent, + type Palette, type ShapeName, ShapeStyle, ShapeType, - StrokeColor, } from '@blocksuite/affine-model'; import { EditPropsStore, ThemeProvider, } from '@blocksuite/affine-shared/services'; import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils'; -import type { Signal } from '@preact/signals-core'; -import { computed, effect, signal } from '@preact/signals-core'; +import { computed, effect, type Signal, signal } from '@preact/signals-core'; import { css, html, LitElement } from 'lit'; import { property } from 'lit/decorators.js'; import type { EdgelessRootBlockComponent } from '../../../edgeless-root-block.js'; -import { type ColorEvent, isTransparent } from '../../panel/color-panel.js'; +import type { ColorEvent } from '../../panel/color-panel.js'; import { ShapeComponentConfig } from './shape-menu-config.js'; export class EdgelessShapeMenu extends SignalWatcher( @@ -76,20 +73,13 @@ export class EdgelessShapeMenu extends SignalWatcher( }; }); - private readonly _setFillColor = (fillColor: string) => { - const filled = !isTransparent(fillColor); - let strokeColor = fillColor; // white or black - - if (filled) { - const index = LIGHT_PALETTES.findIndex(color => color === fillColor); - if (index !== -1) { - strokeColor = MEDIUM_PALETTES[index]; - } - } - - if (strokeColor.endsWith('transparent')) { - strokeColor = StrokeColor.Grey; - } + private readonly _setFillColor = ({ key, value }: Palette) => { + const filled = !isTransparent(value); + const fillColor = value; + const strokeColor = filled + ? DefaultTheme.StrokeColorPalettes.find(palette => palette.key === key) + ?.value + : DefaultTheme.StrokeColorMap.Grey; const { shapeName } = this._props$.value; this.edgeless.std @@ -112,6 +102,10 @@ export class EdgelessShapeMenu extends SignalWatcher( this.onChange(shapeName); }; + private readonly _theme$ = computed(() => { + return this.edgeless.std.get(ThemeProvider).theme$.value; + }); + override connectedCallback(): void { super.connectedCallback(); @@ -128,9 +122,6 @@ export class EdgelessShapeMenu extends SignalWatcher( override render() { const { fillColor, shapeStyle, shapeName } = this._props$.value; - const color = this.edgeless.std - .get(ThemeProvider) - .getColorValue(fillColor, DEFAULT_SHAPE_FILL_COLOR); return html` <edgeless-slide-menu> @@ -179,8 +170,9 @@ export class EdgelessShapeMenu extends SignalWatcher( <menu-divider .vertical=${true}></menu-divider> <edgeless-color-panel class="one-way" - .value=${color} - .palettes=${SHAPE_FILL_COLORS} + .value=${fillColor} + .theme=${this._theme$.value} + .palettes=${DefaultTheme.FillColorPalettes} .hasTransparent=${!this.edgeless.doc.awarenessStore.getFlag( 'enable_color_picker' )} diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/text/text-menu.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/text/text-menu.ts index 825a6a41b8a84..cac9589dc8772 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/text/text-menu.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/text/text-menu.ts @@ -1,5 +1,7 @@ -import { STROKE_COLORS } from '@blocksuite/affine-model'; +import { DefaultTheme } from '@blocksuite/affine-model'; +import { ThemeProvider } from '@blocksuite/affine-shared/services'; import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx'; +import { computed } from '@preact/signals-core'; import { css, html, LitElement, nothing } from 'lit'; import { property } from 'lit/decorators.js'; @@ -15,6 +17,10 @@ export class EdgelessTextMenu extends EdgelessToolbarToolMixin(LitElement) { } `; + private readonly _theme$ = computed(() => { + return this.edgeless.std.get(ThemeProvider).theme$.value; + }); + override type: GfxToolsFullOptionValue['type'] = 'text'; override render() { @@ -26,7 +32,8 @@ export class EdgelessTextMenu extends EdgelessToolbarToolMixin(LitElement) { <edgeless-color-panel class="one-way" .value=${this.color} - .palettes=${STROKE_COLORS} + .theme=${this._theme$.value} + .palettes=${DefaultTheme.StrokeColorPalettes} @select=${(e: ColorEvent) => this.onChange({ color: e.detail })} ></edgeless-color-panel> </div> diff --git a/blocksuite/blocks/src/root-block/edgeless/gfx-tool/copilot-tool.ts b/blocksuite/blocks/src/root-block/edgeless/gfx-tool/copilot-tool.ts index 689846e5214ce..86d69100a3227 100644 --- a/blocksuite/blocks/src/root-block/edgeless/gfx-tool/copilot-tool.ts +++ b/blocksuite/blocks/src/root-block/edgeless/gfx-tool/copilot-tool.ts @@ -1,4 +1,4 @@ -/* eslint-disable @typescript-eslint/no-non-null-assertion */ +/* oxlint-disable @typescript-eslint/no-non-null-assertion */ import type { PointerEventState } from '@blocksuite/block-std'; import { BaseTool, MouseButton } from '@blocksuite/block-std/gfx'; import { IS_MAC } from '@blocksuite/global/env'; diff --git a/blocksuite/blocks/src/root-block/edgeless/gfx-tool/shape-tool.ts b/blocksuite/blocks/src/root-block/edgeless/gfx-tool/shape-tool.ts index 625b0843d8f16..dd4953713529e 100644 --- a/blocksuite/blocks/src/root-block/edgeless/gfx-tool/shape-tool.ts +++ b/blocksuite/blocks/src/root-block/edgeless/gfx-tool/shape-tool.ts @@ -3,11 +3,7 @@ import { type SurfaceBlockComponent, } from '@blocksuite/affine-block-surface'; import type { ShapeElementModel, ShapeName } from '@blocksuite/affine-model'; -import { - DEFAULT_SHAPE_FILL_COLOR, - DEFAULT_SHAPE_STROKE_COLOR, - getShapeType, -} from '@blocksuite/affine-model'; +import { DefaultTheme, getShapeType } from '@blocksuite/affine-model'; import { EditPropsStore, TelemetryProvider, @@ -202,10 +198,14 @@ export class ShapeTool extends BaseTool<ShapeToolOption> { options.stroke = this.std .get(ThemeProvider) - .getColorValue(attributes.strokeColor, DEFAULT_SHAPE_STROKE_COLOR, true); + .getColorValue( + attributes.strokeColor, + DefaultTheme.shapeStrokeColor, + true + ); options.fill = this.std .get(ThemeProvider) - .getColorValue(attributes.fillColor, DEFAULT_SHAPE_FILL_COLOR, true); + .getColorValue(attributes.fillColor, DefaultTheme.shapeFillColor, true); switch (attributes.strokeStyle!) { case 'dash': diff --git a/blocksuite/blocks/src/root-block/edgeless/utils/consts.ts b/blocksuite/blocks/src/root-block/edgeless/utils/consts.ts index ae6274e3cac1d..2511f995537d4 100644 --- a/blocksuite/blocks/src/root-block/edgeless/utils/consts.ts +++ b/blocksuite/blocks/src/root-block/edgeless/utils/consts.ts @@ -1,9 +1,7 @@ import { - Black, DEFAULT_ROUGHNESS, LineWidth, StrokeStyle, - White, } from '@blocksuite/affine-model'; export const NOTE_OVERLAY_OFFSET_X = 6; @@ -48,10 +46,6 @@ export const SurfaceColor = '#6046FE'; export const NoteColor = '#1E96EB'; export const BlendColor = '#7D91FF'; -export const SHAPE_TEXT_COLOR_PURE_WHITE = White; -export const SHAPE_TEXT_COLOR_PURE_BLACK = Black; -export const SHAPE_FILL_COLOR_BLACK = Black; - export const AI_CHAT_BLOCK_MIN_WIDTH = 260; export const AI_CHAT_BLOCK_MIN_HEIGHT = 160; export const AI_CHAT_BLOCK_MAX_WIDTH = 320; diff --git a/blocksuite/blocks/src/root-block/edgeless/utils/tool-overlay.ts b/blocksuite/blocks/src/root-block/edgeless/utils/tool-overlay.ts index 05ffd5f7028c5..7f1f12e133c1a 100644 --- a/blocksuite/blocks/src/root-block/edgeless/utils/tool-overlay.ts +++ b/blocksuite/blocks/src/root-block/edgeless/utils/tool-overlay.ts @@ -6,9 +6,7 @@ import { } from '@blocksuite/affine-block-surface'; import { type Color, - DEFAULT_NOTE_BACKGROUND_COLOR, - DEFAULT_SHAPE_FILL_COLOR, - DEFAULT_SHAPE_STROKE_COLOR, + DefaultTheme, shapeMethods, type ShapeStyle, } from '@blocksuite/affine-model'; @@ -286,10 +284,10 @@ export class ShapeOverlay extends ToolOverlay { const { shapeStyle, fillColor, strokeColor } = style; const fill = this.gfx.std .get(ThemeProvider) - .getColorValue(fillColor, DEFAULT_SHAPE_FILL_COLOR, true); + .getColorValue(fillColor, DefaultTheme.shapeFillColor, true); const stroke = this.gfx.std .get(ThemeProvider) - .getColorValue(strokeColor, DEFAULT_SHAPE_STROKE_COLOR, true); + .getColorValue(strokeColor, DefaultTheme.shapeStrokeColor, true); options.fill = fill; options.stroke = stroke; @@ -356,7 +354,7 @@ export class NoteOverlay extends ToolOverlay { this.globalAlpha = 0; this.backgroundColor = gfx.std .get(ThemeProvider) - .getColorValue(background, DEFAULT_NOTE_BACKGROUND_COLOR, true); + .getColorValue(background, DefaultTheme.noteBackgrounColor, true); this.disposables.add( effect(() => { // when change note child type, update overlay text diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-brush-button.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-brush-button.ts index c52d45b298ca9..ea7308f76e778 100644 --- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-brush-button.ts +++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-brush-button.ts @@ -4,10 +4,14 @@ import type { BrushProps, ColorScheme, } from '@blocksuite/affine-model'; -import { LineWidth, PALETTES } from '@blocksuite/affine-model'; +import { + DefaultTheme, + LineWidth, + resolveColor, +} from '@blocksuite/affine-model'; import { countBy, maxBy, WithDisposable } from '@blocksuite/global/utils'; import { html, LitElement, nothing } from 'lit'; -import { property, query, state } from 'lit/decorators.js'; +import { property, query } from 'lit/decorators.js'; import { when } from 'lit/directives/when.js'; import type { EdgelessColorPickerButton } from '../../edgeless/components/color-picker/button.js'; @@ -17,7 +21,6 @@ import { packColorsWithColorScheme, } from '../../edgeless/components/color-picker/utils.js'; import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js'; -import { GET_DEFAULT_LINE_COLOR } from '../../edgeless/components/panel/color-panel.js'; import type { LineWidthEvent } from '../../edgeless/components/panel/line-width-panel.js'; import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js'; @@ -25,13 +28,13 @@ function getMostCommonColor( elements: BrushElementModel[], colorScheme: ColorScheme ): string { - const colors = countBy(elements, (ele: BrushElementModel) => { - return typeof ele.color === 'object' - ? (ele.color[colorScheme] ?? ele.color.normal ?? null) - : ele.color; - }); + const colors = countBy(elements, (ele: BrushElementModel) => + resolveColor(ele.color, colorScheme) + ); const max = maxBy(Object.entries(colors), ([_k, count]) => count); - return max ? (max[0] as string) : GET_DEFAULT_LINE_COLOR(colorScheme); + return max + ? (max[0] as string) + : resolveColor(DefaultTheme.black, colorScheme); } function getMostCommonSize(elements: BrushElementModel[]): LineWidth { @@ -45,26 +48,29 @@ function notEqual<K extends keyof BrushProps>(key: K, value: BrushProps[K]) { } export class EdgelessChangeBrushButton extends WithDisposable(LitElement) { - private readonly _setBrushColor = ({ detail: color }: ColorEvent) => { + private readonly _setBrushColor = ({ detail }: ColorEvent) => { + const color = detail.value; this._setBrushProp('color', color); - this._selectedColor = color; }; private readonly _setLineWidth = ({ detail: lineWidth }: LineWidthEvent) => { this._setBrushProp('lineWidth', lineWidth); - this._selectedSize = lineWidth; }; - pickColor = (event: PickColorEvent) => { - if (event.type === 'pick') { - this.elements.forEach(ele => - this.crud.updateElement(ele.id, packColor('color', { ...event.detail })) - ); + pickColor = (e: PickColorEvent) => { + const field = 'color'; + + if (e.type === 'pick') { + const color = e.detail.value; + this.elements.forEach(ele => { + const props = packColor(field, color); + this.crud.updateElement(ele.id, props); + }); return; } this.elements.forEach(ele => - ele[event.type === 'start' ? 'stash' : 'pop']('color') + ele[e.type === 'start' ? 'stash' : 'pop'](field) ); }; @@ -72,17 +78,6 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) { return this.edgeless.doc; } - get selectedColor() { - const colorScheme = this.edgeless.surface.renderer.getColorScheme(); - return ( - this._selectedColor ?? getMostCommonColor(this.elements, colorScheme) - ); - } - - get selectedSize() { - return this._selectedSize ?? getMostCommonSize(this.elements); - } - get service() { return this.edgeless.service; } @@ -110,7 +105,8 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) { override render() { const colorScheme = this.edgeless.surface.renderer.getColorScheme(); const elements = this.elements; - const { selectedSize, selectedColor } = this; + const selectedColor = getMostCommonColor(elements, colorScheme); + const selectedSize = getMostCommonSize(elements); return html` <edgeless-line-width-panel @@ -138,7 +134,8 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) { .color=${selectedColor} .colors=${colors} .colorType=${type} - .palettes=${PALETTES} + .theme=${colorScheme} + .palettes=${DefaultTheme.Palettes} > </edgeless-color-picker-button> `; @@ -156,6 +153,8 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) { > <edgeless-color-panel .value=${selectedColor} + .theme=${colorScheme} + .palettes=${DefaultTheme.Palettes} @select=${this._setBrushColor} > </edgeless-color-panel> @@ -165,12 +164,6 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) { `; } - @state() - private accessor _selectedColor: string | null = null; - - @state() - private accessor _selectedSize: LineWidth | null = null; - @query('edgeless-color-picker-button.color') accessor colorButton!: EdgelessColorPickerButton; diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts index ce96818786b07..1e580f9021c22 100644 --- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts +++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts @@ -28,9 +28,10 @@ import { ConnectorMode, DEFAULT_FRONT_END_POINT_STYLE, DEFAULT_REAR_END_POINT_STYLE, + DefaultTheme, LineWidth, - PALETTES, PointStyle, + resolveColor, StrokeStyle, } from '@blocksuite/affine-model'; import { countBy, maxBy, WithDisposable } from '@blocksuite/global/utils'; @@ -48,10 +49,7 @@ import { packColor, packColorsWithColorScheme, } from '../../edgeless/components/color-picker/utils.js'; -import { - type ColorEvent, - GET_DEFAULT_LINE_COLOR, -} from '../../edgeless/components/panel/color-panel.js'; +import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js'; import { type LineStyleEvent, LineStylesPanel, @@ -62,14 +60,14 @@ import { mountConnectorLabelEditor } from '../../edgeless/utils/text.js'; function getMostCommonColor( elements: ConnectorElementModel[], colorScheme: ColorScheme -): string | null { - const colors = countBy(elements, (ele: ConnectorElementModel) => { - return typeof ele.stroke === 'object' - ? (ele.stroke[colorScheme] ?? ele.stroke.normal ?? null) - : ele.stroke; - }); +): string { + const colors = countBy(elements, (ele: ConnectorElementModel) => + resolveColor(ele.stroke, colorScheme) + ); const max = maxBy(Object.entries(colors), ([_k, count]) => count); - return max ? (max[0] as string) : null; + return max + ? (max[0] as string) + : resolveColor(DefaultTheme.connectorColor, colorScheme); } function getMostCommonMode( @@ -88,10 +86,10 @@ function getMostCommonLineWidth(elements: ConnectorElementModel[]): LineWidth { export function getMostCommonLineStyle( elements: ConnectorElementModel[] -): StrokeStyle | null { +): StrokeStyle { const sizes = countBy(elements, ele => ele.strokeStyle); const max = maxBy(Object.entries(sizes), ([_k, count]) => count); - return max ? (max[0] as StrokeStyle) : null; + return max ? (max[0] as StrokeStyle) : StrokeStyle.Solid; } function getMostCommonRough(elements: ConnectorElementModel[]): boolean { @@ -112,15 +110,16 @@ function getMostCommonRough(elements: ConnectorElementModel[]): boolean { function getMostCommonEndpointStyle( elements: ConnectorElementModel[], - endpoint: ConnectorEndpoint -): PointStyle | null { + endpoint: ConnectorEndpoint, + fallback: PointStyle +): PointStyle { const field = endpoint === ConnectorEndpoint.Front ? 'frontEndpointStyle' : 'rearEndpointStyle'; const modes = countBy(elements, ele => ele[field]); const max = maxBy(Object.entries(modes), ([_k, count]) => count); - return max ? (max[0] as PointStyle) : null; + return max ? (max[0] as PointStyle) : fallback; } function notEqual< @@ -227,19 +226,33 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) { return this.edgeless.std.get(EdgelessCRUDIdentifier); } - pickColor = (event: PickColorEvent) => { - if (event.type === 'pick') { - this.elements.forEach(ele => - this.crud.updateElement( - ele.id, - packColor('stroke', { ...event.detail }) - ) - ); + private readonly _setConnectorColor = (e: ColorEvent) => { + const stroke = e.detail.value; + this._setConnectorProp('stroke', stroke); + }; + + private readonly _setConnectorStroke = ({ type, value }: LineStyleEvent) => { + if (type === 'size') { + this._setConnectorStrokeWidth(value); + return; + } + this._setConnectorStrokeStyle(value); + }; + + pickColor = (e: PickColorEvent) => { + const field = 'stroke'; + + if (e.type === 'pick') { + const color = e.detail.value; + this.elements.forEach(ele => { + const props = packColor(field, color); + this.crud.updateElement(ele.id, props); + }); return; } this.elements.forEach(ele => - ele[event.type === 'start' ? 'stash' : 'pop']('stroke') + ele[e.type === 'start' ? 'stash' : 'pop'](field) ); }; @@ -276,10 +289,6 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) { ); } - private _setConnectorColor(stroke: string) { - this._setConnectorProp('stroke', stroke); - } - private _setConnectorMode(mode: ConnectorMode) { this._setConnectorProp('mode', mode); } @@ -310,14 +319,6 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) { this._setConnectorProp('rough', rough); } - private _setConnectorStroke({ type, value }: LineStyleEvent) { - if (type === 'size') { - this._setConnectorStrokeWidth(value); - return; - } - this._setConnectorStrokeStyle(value); - } - private _setConnectorStrokeStyle(strokeStyle: StrokeStyle) { this._setConnectorProp('strokeStyle', strokeStyle); } @@ -339,20 +340,21 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) { override render() { const colorScheme = this.edgeless.surface.renderer.getColorScheme(); const elements = this.elements; - const selectedColor = - getMostCommonColor(elements, colorScheme) ?? - GET_DEFAULT_LINE_COLOR(colorScheme); + const selectedColor = getMostCommonColor(elements, colorScheme); const selectedMode = getMostCommonMode(elements); - const selectedLineSize = getMostCommonLineWidth(elements) ?? LineWidth.Four; + const selectedLineSize = getMostCommonLineWidth(elements); const selectedRough = getMostCommonRough(elements); - const selectedLineStyle = - getMostCommonLineStyle(elements) ?? StrokeStyle.Solid; - const selectedStartPointStyle = - getMostCommonEndpointStyle(elements, ConnectorEndpoint.Front) ?? - DEFAULT_FRONT_END_POINT_STYLE; - const selectedEndPointStyle = - getMostCommonEndpointStyle(elements, ConnectorEndpoint.Rear) ?? - DEFAULT_REAR_END_POINT_STYLE; + const selectedLineStyle = getMostCommonLineStyle(elements); + const selectedStartPointStyle = getMostCommonEndpointStyle( + elements, + ConnectorEndpoint.Front, + DEFAULT_FRONT_END_POINT_STYLE + ); + const selectedEndPointStyle = getMostCommonEndpointStyle( + elements, + ConnectorEndpoint.Rear, + DEFAULT_REAR_END_POINT_STYLE + ); return join( [ @@ -373,7 +375,8 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) { .color=${selectedColor} .colors=${colors} .colorType=${type} - .palettes=${PALETTES} + .theme=${colorScheme} + .palettes=${DefaultTheme.Palettes} .hollowCircle=${true} > <div @@ -389,7 +392,7 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) { ${LineStylesPanel({ selectedLineSize: selectedLineSize, selectedLineStyle: selectedLineStyle, - onClick: (e: LineStyleEvent) => this._setConnectorStroke(e), + onClick: this._setConnectorStroke, })} </div> <editor-toolbar-separator @@ -414,13 +417,12 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) { `} > <stroke-style-panel + .theme=${colorScheme} .strokeWidth=${selectedLineSize} .strokeStyle=${selectedLineStyle} .strokeColor=${selectedColor} - .setStrokeStyle=${(e: LineStyleEvent) => - this._setConnectorStroke(e)} - .setStrokeColor=${(e: ColorEvent) => - this._setConnectorColor(e.detail)} + .setStrokeStyle=${this._setConnectorStroke} + .setStrokeColor=${this._setConnectorColor} > </stroke-style-panel> </editor-menu-button> diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts index 7c3a048906e0e..e8560f0dd78e0 100644 --- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts +++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts @@ -9,9 +9,10 @@ import { renderToolbarSeparator } from '@blocksuite/affine-components/toolbar'; import { type ColorScheme, DEFAULT_NOTE_HEIGHT, + DefaultTheme, type FrameBlockModel, NoteDisplayMode, - PALETTES, + resolveColor, } from '@blocksuite/affine-model'; import { matchFlavours } from '@blocksuite/affine-shared/utils'; import { GfxExtensionIdentifier } from '@blocksuite/block-std/gfx'; @@ -41,14 +42,12 @@ import { mountFrameTitleEditor } from '../../edgeless/utils/text.js'; function getMostCommonColor( elements: FrameBlockModel[], colorScheme: ColorScheme -): string | null { - const colors = countBy(elements, (ele: FrameBlockModel) => { - return typeof ele.background === 'object' - ? (ele.background[colorScheme] ?? ele.background.normal ?? null) - : ele.background; - }); +): string { + const colors = countBy(elements, (ele: FrameBlockModel) => + resolveColor(ele.background, colorScheme) + ); const max = maxBy(Object.entries(colors), ([_k, count]) => count); - return max ? (max[0] as string) : null; + return max ? (max[0] as string) : 'transparent'; } export class EdgelessChangeFrameButton extends WithDisposable(LitElement) { @@ -56,19 +55,27 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) { return this.edgeless.std.get(EdgelessCRUDIdentifier); } - pickColor = (event: PickColorEvent) => { - if (event.type === 'pick') { - this.frames.forEach(ele => - this.crud.updateElement( - ele.id, - packColor('background', { ...event.detail }) - ) - ); + private readonly _setFrameBackground = (e: ColorEvent) => { + const background = e.detail.value; + this.frames.forEach(frame => { + this.crud.updateElement(frame.id, { background }); + }); + }; + + pickColor = (e: PickColorEvent) => { + const field = 'background'; + + if (e.type === 'pick') { + const color = e.detail.value; + this.frames.forEach(ele => { + const props = packColor(field, color); + this.crud.updateElement(ele.id, props); + }); return; } this.frames.forEach(ele => - ele[event.type === 'start' ? 'stash' : 'pop']('background') + ele[e.type === 'start' ? 'stash' : 'pop'](field) ); }; @@ -119,18 +126,12 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) { toast(this.edgeless.host, 'Frame has been inserted into doc'); } - private _setFrameBackground(color: string) { - this.frames.forEach(frame => { - this.crud.updateElement(frame.id, { background: color }); - }); - } - protected override render() { const { frames } = this; const len = frames.length; const onlyOne = len === 1; const colorScheme = this.edgeless.surface.renderer.getColorScheme(); - const background = getMostCommonColor(frames, colorScheme) ?? 'transparent'; + const background = getMostCommonColor(frames, colorScheme); return join( [ @@ -203,7 +204,8 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) { .color=${background} .colors=${colors} .colorType=${type} - .palettes=${PALETTES} + .theme=${colorScheme} + .palettes=${DefaultTheme.Palettes} > </edgeless-color-picker-button> `; @@ -224,8 +226,9 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) { > <edgeless-color-panel .value=${background} - .palettes=${PALETTES} - @select=${(e: ColorEvent) => this._setFrameBackground(e.detail)} + .theme=${colorScheme} + .palettes=${DefaultTheme.Palettes} + @select=${this._setFrameBackground} > </edgeless-color-panel> </editor-menu-button> diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-mindmap-button.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-mindmap-button.ts index c7d114125beca..caa9d73e0a228 100644 --- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-mindmap-button.ts +++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-mindmap-button.ts @@ -1,4 +1,4 @@ -/* eslint-disable @typescript-eslint/no-non-null-assertion */ +/* oxlint-disable @typescript-eslint/no-non-null-assertion */ import { MindmapBalanceLayoutIcon, MindmapLeftLayoutIcon, diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts index 41b83d2d5053f..9a2b77aed692a 100644 --- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts +++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts @@ -14,10 +14,10 @@ import { } from '@blocksuite/affine-components/toolbar'; import { type ColorScheme, - DEFAULT_NOTE_BACKGROUND_COLOR, - NOTE_BACKGROUND_PALETTES, + DefaultTheme, type NoteBlockModel, NoteDisplayMode, + resolveColor, type StrokeStyle, } from '@blocksuite/affine-model'; import { ThemeProvider } from '@blocksuite/affine-shared/services'; @@ -43,7 +43,6 @@ import { packColor, packColorsWithColorScheme, } from '../../edgeless/components/color-picker/utils.js'; -import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js'; import { type LineStyleEvent, LineStylesPanel, @@ -68,14 +67,14 @@ const DisplayModeMap = { function getMostCommonBackground( elements: NoteBlockModel[], colorScheme: ColorScheme -): string | null { - const colors = countBy(elements, (ele: NoteBlockModel) => { - return typeof ele.background === 'object' - ? (ele.background[colorScheme] ?? ele.background.normal ?? null) - : ele.background; - }); +): string { + const colors = countBy(elements, (ele: NoteBlockModel) => + resolveColor(ele.background, colorScheme) + ); const max = maxBy(Object.entries(colors), ([_k, count]) => count); - return max ? (max[0] as string) : null; + return max + ? (max[0] as string) + : resolveColor(DefaultTheme.noteBackgrounColor, colorScheme); } export class EdgelessChangeNoteButton extends WithDisposable(LitElement) { @@ -83,6 +82,12 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) { return this.edgeless.std.get(EdgelessCRUDIdentifier); } + private readonly _setBackground = (background: string) => { + this.notes.forEach(element => { + this.crud.updateElement(element.id, { background }); + }); + }; + private readonly _setBorderRadius = (borderRadius: number) => { this.notes.forEach(note => { const props = { @@ -112,18 +117,19 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) { }); }; - pickColor = (event: PickColorEvent) => { - if (event.type === 'pick') { + pickColor = (e: PickColorEvent) => { + const field = 'background'; + + if (e.type === 'pick') { + const color = e.detail.value; this.notes.forEach(element => { - const props = packColor('background', { ...event.detail }); + const props = packColor(field, color); this.crud.updateElement(element.id, props); }); return; } - this.notes.forEach(ele => - ele[event.type === 'start' ? 'stash' : 'pop']('background') - ); + this.notes.forEach(ele => ele[e.type === 'start' ? 'stash' : 'pop'](field)); }; private get _advancedVisibilityEnabled() { @@ -145,12 +151,6 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) { this.edgeless.slots.toggleNoteSlicer.emit(); } - private _setBackground(background: string) { - this.notes.forEach(element => { - this.crud.updateElement(element.id, { background }); - }); - } - private _setCollapse() { this.notes.forEach(note => { const { collapse, collapsedHeight } = note.edgeless; @@ -262,9 +262,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) { const { shadowType, borderRadius, borderSize, borderStyle } = edgeless.style; const colorScheme = this.edgeless.surface.renderer.getColorScheme(); - const background = - getMostCommonBackground(this.notes, colorScheme) ?? - DEFAULT_NOTE_BACKGROUND_COLOR; + const background = getMostCommonBackground(this.notes, colorScheme); const { collapse } = edgeless; const scale = edgeless.scale ?? 1; @@ -317,9 +315,11 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) { .label=${'Background'} .pick=${this.pickColor} .color=${background} + .colorPanelClass=${'small'} .colorType=${type} .colors=${colors} - .palettes=${NOTE_BACKGROUND_PALETTES} + .theme=${colorScheme} + .palettes=${DefaultTheme.NoteBackgroundColorPalettes} > </edgeless-color-picker-button> `; @@ -339,9 +339,11 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) { `} > <edgeless-color-panel + class="small" .value=${background} - .options=${NOTE_BACKGROUND_PALETTES} - @select=${(e: ColorEvent) => this._setBackground(e.detail)} + .theme=${colorScheme} + .palettes=${DefaultTheme.NoteBackgroundColorPalettes} + @select=${this._setBackground} > </edgeless-color-panel> </editor-menu-button> diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-shape-button.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-shape-button.ts index aee5e6e823320..129e5ea5fe596 100644 --- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-shape-button.ts +++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-shape-button.ts @@ -8,20 +8,21 @@ import { } from '@blocksuite/affine-components/icons'; import { renderToolbarSeparator } from '@blocksuite/affine-components/toolbar'; import type { + Color, ColorScheme, ShapeElementModel, ShapeProps, } from '@blocksuite/affine-model'; import { - DEFAULT_SHAPE_FILL_COLOR, - DEFAULT_SHAPE_STROKE_COLOR, + DefaultTheme, FontFamily, getShapeName, getShapeRadius, getShapeType, + isTransparent, LineWidth, MindmapElementModel, - PALETTES, + resolveColor, ShapeStyle, StrokeStyle, } from '@blocksuite/affine-model'; @@ -33,6 +34,7 @@ import { choose } from 'lit/directives/choose.js'; import { join } from 'lit/directives/join.js'; import { styleMap } from 'lit/directives/style-map.js'; import { when } from 'lit/directives/when.js'; +import isEqual from 'lodash.isequal'; import type { EdgelessColorPickerButton } from '../../edgeless/components/color-picker/button.js'; import type { PickColorEvent } from '../../edgeless/components/color-picker/types.js'; @@ -40,11 +42,7 @@ import { packColor, packColorsWithColorScheme, } from '../../edgeless/components/color-picker/utils.js'; -import { - type ColorEvent, - GET_DEFAULT_LINE_COLOR, - isTransparent, -} from '../../edgeless/components/panel/color-panel.js'; +import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js'; import { type LineStyleEvent, LineStylesPanel, @@ -52,11 +50,6 @@ import { import type { EdgelessShapePanel } from '../../edgeless/components/panel/shape-panel.js'; import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js'; import type { ShapeToolOption } from '../../edgeless/gfx-tool/shape-tool.js'; -import { - SHAPE_FILL_COLOR_BLACK, - SHAPE_TEXT_COLOR_PURE_BLACK, - SHAPE_TEXT_COLOR_PURE_WHITE, -} from '../../edgeless/utils/consts.js'; import { mountShapeTextEditor } from '../../edgeless/utils/text.js'; const changeShapeButtonStyles = [ @@ -88,62 +81,56 @@ const changeShapeButtonStyles = [ function getMostCommonFillColor( elements: ShapeElementModel[], colorScheme: ColorScheme -): string | null { - const colors = countBy(elements, (ele: ShapeElementModel) => { - if (ele.filled) { - return typeof ele.fillColor === 'object' - ? (ele.fillColor[colorScheme] ?? ele.fillColor.normal ?? null) - : ele.fillColor; - } - return 'transparent'; - }); +): string { + const colors = countBy(elements, (ele: ShapeElementModel) => + ele.filled ? resolveColor(ele.fillColor, colorScheme) : 'transparent' + ); const max = maxBy(Object.entries(colors), ([_k, count]) => count); - return max ? (max[0] as string) : null; + return max + ? (max[0] as string) + : resolveColor(DefaultTheme.shapeFillColor, colorScheme); } function getMostCommonStrokeColor( elements: ShapeElementModel[], colorScheme: ColorScheme -): string | null { - const colors = countBy(elements, (ele: ShapeElementModel) => { - return typeof ele.strokeColor === 'object' - ? (ele.strokeColor[colorScheme] ?? ele.strokeColor.normal ?? null) - : ele.strokeColor; - }); +): string { + const colors = countBy(elements, (ele: ShapeElementModel) => + resolveColor(ele.strokeColor, colorScheme) + ); const max = maxBy(Object.entries(colors), ([_k, count]) => count); - return max ? (max[0] as string) : null; + return max + ? (max[0] as string) + : resolveColor(DefaultTheme.shapeStrokeColor, colorScheme); } function getMostCommonShape( elements: ShapeElementModel[] ): ShapeToolOption['shapeName'] | null { - const shapeTypes = countBy(elements, (ele: ShapeElementModel) => { - return getShapeName(ele.shapeType, ele.radius); - }); + const shapeTypes = countBy(elements, (ele: ShapeElementModel) => + getShapeName(ele.shapeType, ele.radius) + ); const max = maxBy(Object.entries(shapeTypes), ([_k, count]) => count); return max ? (max[0] as ShapeToolOption['shapeName']) : null; } function getMostCommonLineSize(elements: ShapeElementModel[]): LineWidth { - const sizes = countBy(elements, (ele: ShapeElementModel) => { - return ele.strokeWidth; - }); + const sizes = countBy(elements, (ele: ShapeElementModel) => ele.strokeWidth); const max = maxBy(Object.entries(sizes), ([_k, count]) => count); return max ? (Number(max[0]) as LineWidth) : LineWidth.Four; } -function getMostCommonLineStyle( - elements: ShapeElementModel[] -): StrokeStyle | null { +function getMostCommonLineStyle(elements: ShapeElementModel[]): StrokeStyle { const sizes = countBy(elements, (ele: ShapeElementModel) => ele.strokeStyle); const max = maxBy(Object.entries(sizes), ([_k, count]) => count); - return max ? (max[0] as StrokeStyle) : null; + return max ? (max[0] as StrokeStyle) : StrokeStyle.Solid; } function getMostCommonShapeStyle(elements: ShapeElementModel[]): ShapeStyle { - const roughnesses = countBy(elements, (ele: ShapeElementModel) => { - return ele.shapeStyle; - }); + const roughnesses = countBy( + elements, + (ele: ShapeElementModel) => ele.shapeStyle + ); const max = maxBy(Object.entries(roughnesses), ([_k, count]) => count); return max ? (max[0] as ShapeStyle) : ShapeStyle.Scribbled; } @@ -151,6 +138,32 @@ function getMostCommonShapeStyle(elements: ShapeElementModel[]): ShapeStyle { export class EdgelessChangeShapeButton extends WithDisposable(LitElement) { static override styles = [changeShapeButtonStyles]; + private readonly _setShapeFillColor = (e: ColorEvent) => { + const fillColor = e.detail.value; + const filled = !isTransparent(fillColor); + const color = this._getTextColor(fillColor, filled); + this.elements.forEach(ele => + this.crud.updateElement(ele.id, { filled, fillColor, color }) + ); + }; + + private readonly _setShapeStrokeColor = (e: ColorEvent) => { + const strokeColor = e.detail.value; + this.elements.forEach(ele => + this.crud.updateElement(ele.id, { strokeColor }) + ); + }; + + private readonly _setShapeStyles = ({ type, value }: LineStyleEvent) => { + if (type === 'size') { + this._setShapeStrokeWidth(value); + return; + } + if (type === 'lineStyle') { + this._setShapeStrokeStyle(value); + } + }; + get service() { return this.edgeless.service; } @@ -159,58 +172,24 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) { return this.edgeless.std.get(EdgelessCRUDIdentifier); } - #pickColor<K extends keyof Pick<ShapeProps, 'fillColor' | 'strokeColor'>>( - key: K - ) { - return (event: PickColorEvent) => { - if (event.type === 'pick') { - this.elements.forEach(ele => { - const props = packColor(key, { ...event.detail }); - // If `filled` can be set separately, this logic can be removed - if (key === 'fillColor' && !ele.filled) { - Object.assign(props, { filled: true }); - } - this.crud.updateElement(ele.id, props); - }); - return; - } - - this.elements.forEach(ele => - ele[event.type === 'start' ? 'stash' : 'pop'](key) - ); - }; - } - private _addText() { mountShapeTextEditor(this.elements[0], this.edgeless); } - private _getTextColor(fillColor: string) { - const colorScheme = this.edgeless.surface.renderer.getColorScheme(); + private _getTextColor(fillColor: Color, isNotTransparent = false) { // When the shape is filled with black color, the text color should be white. // When the shape is transparent, the text color should be set according to the theme. // Otherwise, the text color should be black. - const textColor = isTransparent(fillColor) - ? GET_DEFAULT_LINE_COLOR(colorScheme) - : fillColor === SHAPE_FILL_COLOR_BLACK - ? SHAPE_TEXT_COLOR_PURE_WHITE - : SHAPE_TEXT_COLOR_PURE_BLACK; - return textColor; - } + if (isNotTransparent) { + if (isEqual(fillColor, DefaultTheme.black)) { + return DefaultTheme.white; + } else if (isEqual(fillColor, DefaultTheme.white)) { + return DefaultTheme.black; + } + } - private _setShapeFillColor(fillColor: string) { - const filled = !isTransparent(fillColor); - const color = this._getTextColor(fillColor); - this.elements.forEach(ele => - this.crud.updateElement(ele.id, { filled, fillColor, color }) - ); - } - - private _setShapeStrokeColor(strokeColor: string) { - this.elements.forEach(ele => - this.crud.updateElement(ele.id, { strokeColor }) - ); + return DefaultTheme.black; } private _setShapeStrokeStyle(strokeStyle: StrokeStyle) { @@ -234,16 +213,6 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) { }); } - private _setShapeStyles({ type, value }: LineStyleEvent) { - if (type === 'size') { - this._setShapeStrokeWidth(value); - return; - } - if (type === 'lineStyle') { - this._setShapeStrokeStyle(value); - } - } - private _showAddButtonOrTextMenu() { if (this.elements.length === 1 && !this.elements[0].text) { return 'button'; @@ -270,20 +239,38 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) { ); } + pickColor<K extends keyof Pick<ShapeProps, 'fillColor' | 'strokeColor'>>( + field: K + ) { + return (e: PickColorEvent) => { + if (e.type === 'pick') { + const color = e.detail.value; + this.elements.forEach(ele => { + const props = packColor(field, color); + // If `filled` can be set separately, this logic can be removed + if (field === 'fillColor' && !ele.filled) { + Object.assign(props, { filled: true }); + } + this.crud.updateElement(ele.id, props); + }); + return; + } + + this.elements.forEach(ele => + ele[e.type === 'start' ? 'stash' : 'pop'](field) + ); + }; + } + override render() { const colorScheme = this.edgeless.surface.renderer.getColorScheme(); const elements = this.elements; const selectedShape = getMostCommonShape(elements); - const selectedFillColor = - getMostCommonFillColor(elements, colorScheme) ?? DEFAULT_SHAPE_FILL_COLOR; - const selectedStrokeColor = - getMostCommonStrokeColor(elements, colorScheme) ?? - DEFAULT_SHAPE_STROKE_COLOR; - const selectedLineSize = getMostCommonLineSize(elements) ?? LineWidth.Four; - const selectedLineStyle = - getMostCommonLineStyle(elements) ?? StrokeStyle.Solid; - const selectedShapeStyle = - getMostCommonShapeStyle(elements) ?? ShapeStyle.Scribbled; + const selectedFillColor = getMostCommonFillColor(elements, colorScheme); + const selectedStrokeColor = getMostCommonStrokeColor(elements, colorScheme); + const selectedLineSize = getMostCommonLineSize(elements); + const selectedLineStyle = getMostCommonLineStyle(elements); + const selectedShapeStyle = getMostCommonShapeStyle(elements); return join( [ @@ -340,11 +327,12 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) { <edgeless-color-picker-button class="fill-color" .label=${'Fill color'} - .pick=${this.#pickColor('fillColor')} + .pick=${this.pickColor('fillColor')} .color=${selectedFillColor} .colors=${colors} .colorType=${type} - .palettes=${PALETTES} + .theme=${colorScheme} + .palettes=${DefaultTheme.Palettes} > </edgeless-color-picker-button> `; @@ -367,8 +355,9 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) { role="listbox" aria-label="Fill colors" .value=${selectedFillColor} - .palettes=${PALETTES} - @select=${(e: ColorEvent) => this._setShapeFillColor(e.detail)} + .theme=${colorScheme} + .palettes=${DefaultTheme.Palettes} + @select=${this._setShapeFillColor} > </edgeless-color-panel> </editor-menu-button> @@ -388,11 +377,12 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) { <edgeless-color-picker-button class="border-style" .label=${'Border style'} - .pick=${this.#pickColor('strokeColor')} + .pick=${this.pickColor('strokeColor')} .color=${selectedStrokeColor} .colors=${colors} .colorType=${type} - .palettes=${PALETTES} + .theme=${colorScheme} + .palettes=${DefaultTheme.Palettes} .hollowCircle=${true} > <div @@ -408,8 +398,7 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) { ${LineStylesPanel({ selectedLineSize: selectedLineSize, selectedLineStyle: selectedLineStyle, - onClick: (e: LineStyleEvent) => this._setShapeStyles(e), - lineStyles: [StrokeStyle.Solid, StrokeStyle.Dash], + onClick: this._setShapeStyles, })} </div> <editor-toolbar-separator @@ -435,14 +424,13 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) { `} > <stroke-style-panel + .theme=${colorScheme} .hollowCircle=${true} .strokeWidth=${selectedLineSize} .strokeStyle=${selectedLineStyle} .strokeColor=${selectedStrokeColor} - .setStrokeStyle=${(e: LineStyleEvent) => - this._setShapeStyles(e)} - .setStrokeColor=${(e: ColorEvent) => - this._setShapeStrokeColor(e.detail)} + .setStrokeStyle=${this._setShapeStyles} + .setStrokeColor=${this._setShapeStrokeColor} > </stroke-style-panel> </editor-menu-button> diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts index 75daaa17fa20e..ff8e2de202e16 100644 --- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts +++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts @@ -14,11 +14,12 @@ import { renderToolbarSeparator } from '@blocksuite/affine-components/toolbar'; import { type ColorScheme, ConnectorElementModel, + DefaultTheme, EdgelessTextBlockModel, FontFamily, FontStyle, FontWeight, - PALETTES, + resolveColor, ShapeElementModel, TextAlign, TextElementModel, @@ -44,10 +45,7 @@ import { packColor, packColorsWithColorScheme, } from '../../edgeless/components/color-picker/utils.js'; -import { - type ColorEvent, - GET_DEFAULT_LINE_COLOR, -} from '../../edgeless/components/panel/color-panel.js'; +import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js'; import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js'; const FONT_SIZE_LIST = [ @@ -121,12 +119,12 @@ function getMostCommonColor( const colors = countBy(elements, (ele: BlockSuite.EdgelessTextModelType) => { const color = ele instanceof ConnectorElementModel ? ele.labelStyle.color : ele.color; - return typeof color === 'object' - ? (color[colorScheme] ?? color.normal ?? null) - : color; + return resolveColor(color, colorScheme); }); const max = maxBy(Object.entries(colors), ([_k, count]) => count); - return max ? (max[0] as string) : GET_DEFAULT_LINE_COLOR(colorScheme); + return max + ? (max[0] as string) + : resolveColor(DefaultTheme.textColor, colorScheme); } function getMostCommonFontFamily(elements: BlockSuite.EdgelessTextModelType[]) { @@ -229,7 +227,8 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) { }); }; - private readonly _setTextColor = ({ detail: color }: ColorEvent) => { + private readonly _setTextColor = (e: ColorEvent) => { + const color = e.detail.value; const props = { color }; this.elements.forEach(element => { this.crud.updateElement(element.id, buildProps(element, props)); @@ -307,10 +306,11 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) { // no need to update the bound of edgeless text block, which updates itself using ResizeObserver }; - pickColor = (event: PickColorEvent) => { - if (event.type === 'pick') { + pickColor = (e: PickColorEvent) => { + if (e.type === 'pick') { + const color = e.detail.value; this.elements.forEach(element => { - const props = packColor('color', { ...event.detail }); + const props = packColor('color', color); this.crud.updateElement(element.id, buildProps(element, props)); this._updateElementBound(element); }); @@ -319,7 +319,7 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) { const key = this.elementType === 'connector' ? 'labelStyle' : 'color'; this.elements.forEach(ele => { - ele[event.type === 'start' ? 'stash' : 'pop'](key as 'color'); + ele[e.type === 'start' ? 'stash' : 'pop'](key as 'color'); }); }; @@ -391,7 +391,8 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) { .color=${selectedColor} .colors=${colors} .colorType=${type} - .palettes=${PALETTES} + .theme=${colorScheme} + .palettes=${DefaultTheme.Palettes} > </edgeless-color-picker-button> `; @@ -412,7 +413,8 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) { > <edgeless-color-panel .value=${selectedColor} - .palettes=${PALETTES} + .theme=${colorScheme} + .palettes=${DefaultTheme.Palettes} @select=${this._setTextColor} ></edgeless-color-panel> </editor-menu-button> diff --git a/blocksuite/blocks/src/root-block/widgets/frame-title/frame-title.ts b/blocksuite/blocks/src/root-block/widgets/frame-title/frame-title.ts index a6a55a2c89d78..7e4f587090fa2 100644 --- a/blocksuite/blocks/src/root-block/widgets/frame-title/frame-title.ts +++ b/blocksuite/blocks/src/root-block/widgets/frame-title/frame-title.ts @@ -1,4 +1,8 @@ -import { ColorScheme, FrameBlockModel } from '@blocksuite/affine-model'; +import { + ColorScheme, + FrameBlockModel, + isTransparent, +} from '@blocksuite/affine-model'; import { ThemeProvider } from '@blocksuite/affine-shared/services'; import { type BlockStdScope, @@ -19,7 +23,6 @@ import { LitElement } from 'lit'; import { property, state } from 'lit/decorators.js'; import { parseStringToRgba } from '../../edgeless/components/color-picker/utils.js'; -import { isTransparent } from '../../edgeless/components/panel/color-panel.js'; import type { EdgelessRootService } from '../../edgeless/index.js'; import { frameTitleStyle, frameTitleStyleVars } from './styles.js'; diff --git a/blocksuite/blocks/src/surface-block/mini-mindmap/surface-block.ts b/blocksuite/blocks/src/surface-block/mini-mindmap/surface-block.ts index 6419548fc2131..8e629235adf0e 100644 --- a/blocksuite/blocks/src/surface-block/mini-mindmap/surface-block.ts +++ b/blocksuite/blocks/src/surface-block/mini-mindmap/surface-block.ts @@ -1,4 +1,4 @@ -/* eslint-disable @typescript-eslint/no-non-null-assertion */ +/* oxlint-disable @typescript-eslint/no-non-null-assertion */ import type { SurfaceBlockModel } from '@blocksuite/affine-block-surface'; import { CanvasRenderer, @@ -101,14 +101,14 @@ export class MindmapSurfaceBlock extends BlockComponent<SurfaceBlockModel> { provider: { selectedElements: () => [], getColorScheme: () => themeService.edgelessTheme, - getColorValue: (color: Color, fallback?: string, real?: boolean) => + getColorValue: (color: Color, fallback?: Color, real?: boolean) => themeService.getColorValue( color, fallback, real, themeService.edgelessTheme ), - generateColorProperty: (color: Color, fallback: string) => + generateColorProperty: (color: Color, fallback?: Color) => themeService.generateColorProperty( color, fallback, diff --git a/blocksuite/blocks/src/surface-ref-block/portal/note.ts b/blocksuite/blocks/src/surface-ref-block/portal/note.ts index d99cf2a3679da..b78b26a6154de 100644 --- a/blocksuite/blocks/src/surface-ref-block/portal/note.ts +++ b/blocksuite/blocks/src/surface-ref-block/portal/note.ts @@ -1,7 +1,7 @@ import type { CanvasRenderer } from '@blocksuite/affine-block-surface'; import type { NoteBlockModel } from '@blocksuite/affine-model'; import { - DEFAULT_NOTE_BACKGROUND_COLOR, + DefaultTheme, NoteDisplayMode, NoteShadow, } from '@blocksuite/affine-model'; @@ -73,7 +73,7 @@ export class SurfaceRefNotePortal extends WithDisposable(ShadowlessElement) { const backgroundColor = this.host.std .get(ThemeProvider) - .generateColorProperty(model.background, DEFAULT_NOTE_BACKGROUND_COLOR); + .generateColorProperty(model.background, DefaultTheme.noteBackgrounColor); const [modelX, modelY, modelW, modelH] = deserializeXYWH(model.xywh); const style = { diff --git a/blocksuite/presets/src/__tests__/edgeless/color-picker.spec.ts b/blocksuite/presets/src/__tests__/edgeless/color-picker.spec.ts index 77ac54b9685da..ed9c71f50aa5a 100644 --- a/blocksuite/presets/src/__tests__/edgeless/color-picker.spec.ts +++ b/blocksuite/presets/src/__tests__/edgeless/color-picker.spec.ts @@ -67,7 +67,6 @@ describe('theme service', () => { expect(themeService.generateColorProperty({ normal: 'grey' })).toBe('grey'); expect(themeService.generateColorProperty('', 'blue')).toBe('blue'); - expect(themeService.generateColorProperty({}, 'red')).toBe('red'); }); test('gets a color value', () => { diff --git a/blocksuite/presets/src/__tests__/edgeless/last-props.spec.ts b/blocksuite/presets/src/__tests__/edgeless/last-props.spec.ts index 2ffc4e1a47cbd..630619aa539f8 100644 --- a/blocksuite/presets/src/__tests__/edgeless/last-props.spec.ts +++ b/blocksuite/presets/src/__tests__/edgeless/last-props.spec.ts @@ -2,26 +2,21 @@ import type { BlockStdScope } from '@blocksuite/block-std'; import { type BrushElementModel, type ConnectorElementModel, - DEFAULT_NOTE_BACKGROUND_COLOR, DEFAULT_NOTE_SHADOW, - DEFAULT_TEXT_COLOR, + DefaultTheme, type EdgelessRootBlockComponent, type EdgelessTextBlockModel, EditPropsStore, FontFamily, - FrameBackgroundColor, type FrameBlockModel, getSurfaceBlock, LayoutType, type MindmapElementModel, MindmapStyle, - NoteBackgroundColor, type NoteBlockModel, NoteShadow, type ShapeElementModel, - ShapeFillColor, ShapeType, - StrokeColor, type TextElementModel, } from '@blocksuite/blocks'; import { assertExists } from '@blocksuite/global/utils'; @@ -51,14 +46,14 @@ describe('apply last props', () => { }); assertExists(rectId); const rectShape = service.crud.getElementById(rectId) as ShapeElementModel; - expect(rectShape.fillColor).toBe(ShapeFillColor.Yellow); + expect(rectShape.fillColor).toBe(DefaultTheme.shapeFillColor); service.crud.updateElement(rectId, { - fillColor: ShapeFillColor.Orange, + fillColor: DefaultTheme.FillColorMap.Orange, }); expect( std.get(EditPropsStore).lastProps$.value[`shape:${ShapeType.Rect}`] .fillColor - ).toBe(ShapeFillColor.Orange); + ).toBe(DefaultTheme.FillColorMap.Orange); // diamond shape const diamondId = service.crud.addElement('shape', { @@ -68,14 +63,14 @@ describe('apply last props', () => { const diamondShape = service.crud.getElementById( diamondId ) as ShapeElementModel; - expect(diamondShape.fillColor).toBe(ShapeFillColor.Yellow); + expect(diamondShape.fillColor).toBe(DefaultTheme.FillColorMap.Yellow); service.crud.updateElement(diamondId, { - fillColor: ShapeFillColor.Blue, + fillColor: DefaultTheme.FillColorMap.Blue, }); expect( std.get(EditPropsStore).lastProps$.value[`shape:${ShapeType.Diamond}`] .fillColor - ).toBe(ShapeFillColor.Blue); + ).toBe(DefaultTheme.FillColorMap.Blue); // rounded rect shape const roundedRectId = service.crud.addElement('shape', { @@ -86,13 +81,13 @@ describe('apply last props', () => { const roundedRectShape = service.crud.getElementById( roundedRectId ) as ShapeElementModel; - expect(roundedRectShape.fillColor).toBe(ShapeFillColor.Yellow); + expect(roundedRectShape.fillColor).toBe(DefaultTheme.FillColorMap.Yellow); service.crud.updateElement(roundedRectId, { - fillColor: ShapeFillColor.Green, + fillColor: DefaultTheme.FillColorMap.Green, }); expect( std.get(EditPropsStore).lastProps$.value['shape:roundedRect'].fillColor - ).toBe(ShapeFillColor.Green); + ).toBe(DefaultTheme.FillColorMap.Green); // apply last props const rectId2 = service.crud.addElement('shape', { @@ -102,7 +97,7 @@ describe('apply last props', () => { const rectShape2 = service.crud.getElementById( rectId2 ) as ShapeElementModel; - expect(rectShape2.fillColor).toBe(ShapeFillColor.Orange); + expect(rectShape2.fillColor).toBe(DefaultTheme.FillColorMap.Orange); const diamondId2 = service.crud.addElement('shape', { shapeType: ShapeType.Diamond, @@ -111,7 +106,7 @@ describe('apply last props', () => { const diamondShape2 = service.crud.getElementById( diamondId2 ) as ShapeElementModel; - expect(diamondShape2.fillColor).toBe(ShapeFillColor.Blue); + expect(diamondShape2.fillColor).toBe(DefaultTheme.FillColorMap.Blue); const roundedRectId2 = service.crud.addElement('shape', { shapeType: ShapeType.Rect, @@ -121,14 +116,14 @@ describe('apply last props', () => { const roundedRectShape2 = service.crud.getElementById( roundedRectId2 ) as ShapeElementModel; - expect(roundedRectShape2.fillColor).toBe(ShapeFillColor.Green); + expect(roundedRectShape2.fillColor).toBe(DefaultTheme.FillColorMap.Green); }); test('connector', () => { const id = service.crud.addElement('connector', { mode: 0 }); assertExists(id); const connector = service.crud.getElementById(id) as ConnectorElementModel; - expect(connector.stroke).toBe(StrokeColor.Grey); + expect(connector.stroke).toBe(DefaultTheme.connectorColor); expect(connector.strokeWidth).toBe(2); expect(connector.strokeStyle).toBe('solid'); expect(connector.frontEndpointStyle).toBe('None'); @@ -143,7 +138,7 @@ describe('apply last props', () => { expect(connector2.strokeWidth).toBe(10); service.crud.updateElement(id2, { labelStyle: { - color: StrokeColor.Magenta, + color: DefaultTheme.black, fontFamily: FontFamily.Kalam, }, }); @@ -154,7 +149,7 @@ describe('apply last props', () => { id3 ) as ConnectorElementModel; expect(connector3.strokeWidth).toBe(10); - expect(connector3.labelStyle.color).toBe(StrokeColor.Magenta); + expect(connector3.labelStyle.color).toEqual(DefaultTheme.black); expect(connector3.labelStyle.fontFamily).toBe(FontFamily.Kalam); }); @@ -162,10 +157,7 @@ describe('apply last props', () => { const id = service.crud.addElement('brush', {}); assertExists(id); const brush = service.crud.getElementById(id) as BrushElementModel; - expect(brush.color).toEqual({ - dark: StrokeColor.White, - light: StrokeColor.Black, - }); + expect(brush.color).toEqual(DefaultTheme.black); expect(brush.lineWidth).toBe(4); service.crud.updateElement(id, { lineWidth: 10 }); const secondBrush = service.crud.getElementById( @@ -209,17 +201,17 @@ describe('apply last props', () => { const id = service.crud.addBlock('affine:edgeless-text', {}, surface!.id); assertExists(id); const text = service.crud.getElementById(id) as EdgelessTextBlockModel; - expect(text.color).toBe(DEFAULT_TEXT_COLOR); + expect(text.color).toBe(DefaultTheme.textColor); expect(text.fontFamily).toBe(FontFamily.Inter); service.crud.updateElement(id, { - color: StrokeColor.Green, + color: DefaultTheme.StrokeColorMap.Green, fontFamily: FontFamily.OrelegaOne, }); const id2 = service.crud.addBlock('affine:edgeless-text', {}, surface!.id); assertExists(id2); const text2 = service.crud.getElementById(id2) as EdgelessTextBlockModel; - expect(text2.color).toBe(StrokeColor.Green); + expect(text2.color).toBe(DefaultTheme.StrokeColorMap.Green); expect(text2.fontFamily).toBe(FontFamily.OrelegaOne); }); @@ -227,10 +219,10 @@ describe('apply last props', () => { const id = service.crud.addBlock('affine:note', {}, doc.root!.id); assertExists(id); const note = service.crud.getElementById(id) as NoteBlockModel; - expect(note.background).toBe(DEFAULT_NOTE_BACKGROUND_COLOR); + expect(note.background).toEqual(DefaultTheme.noteBackgrounColor); expect(note.edgeless.style.shadowType).toBe(DEFAULT_NOTE_SHADOW); service.crud.updateElement(id, { - background: NoteBackgroundColor.Purple, + background: DefaultTheme.NoteBackgroundColorMap.Purple, edgeless: { style: { shadowType: NoteShadow.Film, @@ -241,7 +233,7 @@ describe('apply last props', () => { const id2 = service.crud.addBlock('affine:note', {}, doc.root!.id); assertExists(id2); const note2 = service.crud.getElementById(id2) as NoteBlockModel; - expect(note2.background).toBe(NoteBackgroundColor.Purple); + expect(note2.background).toBe(DefaultTheme.NoteBackgroundColorMap.Purple); expect(note2.edgeless.style.shadowType).toBe(NoteShadow.Film); }); @@ -252,13 +244,13 @@ describe('apply last props', () => { const note = service.crud.getElementById(id) as FrameBlockModel; expect(note.background).toBe('transparent'); service.crud.updateElement(id, { - background: FrameBackgroundColor.Purple, + background: DefaultTheme.StrokeColorMap.Purple, }); const id2 = service.crud.addBlock('affine:frame', {}, surface!.id); assertExists(id2); const frame2 = service.crud.getElementById(id2) as FrameBlockModel; - expect(frame2.background).toBe(FrameBackgroundColor.Purple); + expect(frame2.background).toBe(DefaultTheme.StrokeColorMap.Purple); service.crud.updateElement(id2, { background: { normal: '#def4e740' }, }); diff --git a/blocksuite/presets/src/__tests__/edgeless/surface-model.spec.ts b/blocksuite/presets/src/__tests__/edgeless/surface-model.spec.ts index c534c4f3c3f07..c29018168efa3 100644 --- a/blocksuite/presets/src/__tests__/edgeless/surface-model.spec.ts +++ b/blocksuite/presets/src/__tests__/edgeless/surface-model.spec.ts @@ -4,7 +4,7 @@ import type { ShapeElementModel, SurfaceBlockModel, } from '@blocksuite/blocks'; -import { StrokeColor } from '@blocksuite/blocks'; +import { DefaultTheme } from '@blocksuite/blocks'; import { beforeEach, describe, expect, test, vi } from 'vitest'; import { wait } from '../utils/common.js'; @@ -72,7 +72,7 @@ describe('element model', () => { const element = model.getElementById(id)! as ShapeElementModel; expect(element.index).toBe('a0'); - expect(element.strokeColor).toBe(StrokeColor.Yellow); + expect(element.strokeColor).toBe(DefaultTheme.shapeStrokeColor); expect(element.strokeWidth).toBe(4); }); @@ -94,7 +94,7 @@ describe('element model', () => { const element = model.getElementById(id)! as ShapeElementModel; - expect(element.yMap.get('strokeColor')).toBe(StrokeColor.Yellow); + expect(element.yMap.get('strokeColor')).toBe(DefaultTheme.shapeStrokeColor); element.strokeColor = '--affine-palette-line-black'; expect(element.yMap.get('strokeColor')).toBe('--affine-palette-line-black'); diff --git a/blocksuite/tests-legacy/attachment.spec.ts b/blocksuite/tests-legacy/attachment.spec.ts index 74d3974901558..c0b84c5be2c82 100644 --- a/blocksuite/tests-legacy/attachment.spec.ts +++ b/blocksuite/tests-legacy/attachment.spec.ts @@ -144,7 +144,12 @@ test('can insert attachment from slash menu', async ({ page }) => { page, ` <affine:note - prop:background="--affine-v2-edgeless-note-white" + prop:background={ + Object { + "dark": "#000000", + "light": "#ffffff", + } + } prop:displayMode="both" prop:edgeless={ Object { @@ -191,7 +196,12 @@ test('should undo/redo works for attachment', async ({ page }) => { await assertStoreMatchJSX( page, ` <affine:note - prop:background="--affine-v2-edgeless-note-white" + prop:background={ + Object { + "dark": "#000000", + "light": "#ffffff", + } + } prop:displayMode="both" prop:edgeless={ Object { @@ -229,7 +239,12 @@ test('should undo/redo works for attachment', async ({ page }) => { page, ` <affine:note - prop:background="--affine-v2-edgeless-note-white" + prop:background={ + Object { + "dark": "#000000", + "light": "#ffffff", + } + } prop:displayMode="both" prop:edgeless={ Object { @@ -260,7 +275,12 @@ test('should undo/redo works for attachment', async ({ page }) => { page, ` <affine:note - prop:background="--affine-v2-edgeless-note-white" + prop:background={ + Object { + "dark": "#000000", + "light": "#ffffff", + } + } prop:displayMode="both" prop:edgeless={ Object { @@ -348,7 +368,12 @@ test('should turn attachment to image works', async ({ page }) => { page, ` <affine:note - prop:background="--affine-v2-edgeless-note-white" + prop:background={ + Object { + "dark": "#000000", + "light": "#ffffff", + } + } prop:displayMode="both" prop:edgeless={ Object { @@ -382,7 +407,12 @@ test('should turn attachment to image works', async ({ page }) => { page, ` <affine:note - prop:background="--affine-v2-edgeless-note-white" + prop:background={ + Object { + "dark": "#000000", + "light": "#ffffff", + } + } prop:displayMode="both" prop:edgeless={ Object { @@ -431,7 +461,12 @@ test('should attachment can be deleted', async ({ page }) => { page, ` <affine:note - prop:background="--affine-v2-edgeless-note-white" + prop:background={ + Object { + "dark": "#000000", + "light": "#ffffff", + } + } prop:displayMode="both" prop:edgeless={ Object { @@ -475,7 +510,12 @@ test.fixme(`support dragging attachment block directly`, async ({ page }) => { await assertStoreMatchJSX( page, ` <affine:note - prop:background="--affine-v2-edgeless-note-white" + prop:background={ + Object { + "dark": "#000000", + "light": "#ffffff", + } + } prop:displayMode="both" prop:edgeless={ Object { @@ -531,7 +571,12 @@ test.fixme(`support dragging attachment block directly`, async ({ page }) => { page, /*xml*/ `<affine:page> <affine:note - prop:background="--affine-v2-edgeless-note-white" + prop:background={ + Object { + "dark": "#000000", + "light": "#ffffff", + } + } prop:displayMode="both" prop:edgeless={ Object { @@ -589,7 +634,12 @@ test.fixme(`support dragging attachment block directly`, async ({ page }) => { page, /*xml*/ `<affine:page> <affine:note - prop:background="--affine-v2-edgeless-note-white" + prop:background={ + Object { + "dark": "#000000", + "light": "#ffffff", + } + } prop:displayMode="both" prop:edgeless={ Object { diff --git a/blocksuite/tests-legacy/clipboard/list.spec.ts b/blocksuite/tests-legacy/clipboard/list.spec.ts index 9ab0af6510bda..bb1e526c0cfe1 100644 --- a/blocksuite/tests-legacy/clipboard/list.spec.ts +++ b/blocksuite/tests-legacy/clipboard/list.spec.ts @@ -1,4 +1,5 @@ import { expect } from '@playwright/test'; +import { lightThemeV2 } from '@toeverything/theme/v2'; import { initDatabaseColumn } from '../database/actions.js'; import { @@ -441,7 +442,12 @@ test(scoped`should copy and paste of database work`, async ({ page }) => { /*xml*/ ` <affine:page> <affine:note - prop:background="--affine-v2-edgeless-note-white" + prop:background={ + Object { + "dark": "#000000", + "light": "#ffffff", + } + } prop:displayMode="both" prop:edgeless={ Object { @@ -491,7 +497,12 @@ test(scoped`should copy and paste of database work`, async ({ page }) => { /*xml*/ ` <affine:page> <affine:note - prop:background="--affine-v2-edgeless-note-white" + prop:background={ + Object { + "dark": "#000000", + "light": "#ffffff", + } + } prop:displayMode="both" prop:edgeless={ Object { @@ -574,9 +585,12 @@ test(scoped`paste note block with background`, async ({ page }) => { await selectNoteInEdgeless(page, ids.noteId); await triggerComponentToolbarAction(page, 'changeNoteColor'); - const color = '--affine-v2-edgeless-note-grey'; - await changeEdgelessNoteBackground(page, color); - await assertEdgelessNoteBackground(page, ids.noteId, color); + await changeEdgelessNoteBackground(page, 'White'); + await assertEdgelessNoteBackground( + page, + ids.noteId, + lightThemeV2['edgeless/note/white'] + ); await copyByKeyboard(page); @@ -584,7 +598,11 @@ test(scoped`paste note block with background`, async ({ page }) => { await pasteByKeyboard(page, false); const noteIds = await getAllNoteIds(page); for (const noteId of noteIds) { - await assertEdgelessNoteBackground(page, noteId, color); + await assertEdgelessNoteBackground( + page, + noteId, + lightThemeV2['edgeless/note/white'] + ); } }); diff --git a/blocksuite/tests-legacy/edgeless/auto-complete.spec.ts b/blocksuite/tests-legacy/edgeless/auto-complete.spec.ts index b8776ffff7d6c..315e3dd3bd9e8 100644 --- a/blocksuite/tests-legacy/edgeless/auto-complete.spec.ts +++ b/blocksuite/tests-legacy/edgeless/auto-complete.spec.ts @@ -1,9 +1,5 @@ -import { - DEFAULT_NOTE_BACKGROUND_COLOR, - ShapeFillColor, - StrokeColor, -} from '@blocksuite/affine-model'; import { expect, type Page } from '@playwright/test'; +import { lightThemeV2 } from '@toeverything/theme/v2'; import { clickView, moveView } from '../utils/actions/click.js'; import { dragBetweenCoords } from '../utils/actions/drag.js'; @@ -139,11 +135,9 @@ test.describe('auto-complete', () => { await createShapeElement(page, [0, 0], [100, 100], Shape.Square); await assertSelectedBound(page, [0, 0, 100, 100]); await triggerComponentToolbarAction(page, 'changeShapeStrokeColor'); - const lineColor = StrokeColor.Red; - await changeShapeStrokeColor(page, lineColor); + await changeShapeStrokeColor(page, 'MediumRed'); await triggerComponentToolbarAction(page, 'changeShapeFillColor'); - const color = ShapeFillColor.Green; - await changeShapeFillColor(page, color); + await changeShapeFillColor(page, 'HeavyGreen'); await dragBetweenViewCoords(page, [120, 50], [200, 0]); const noteButton = getAutoCompletePanelButton(page, 'note'); @@ -168,7 +162,7 @@ test.describe('auto-complete', () => { await assertEdgelessNoteBackground( page, noteId, - DEFAULT_NOTE_BACKGROUND_COLOR + lightThemeV2['edgeless/note/white'] ); const rect = await edgelessNote.boundingBox(); @@ -181,15 +175,18 @@ test.describe('auto-complete', () => { // select connector await dragBetweenViewCoords(page, [140, 50], [160, 0]); await waitNextFrame(page); - await assertConnectorStrokeColor(page, lineColor); + await assertConnectorStrokeColor( + page, + 'MediumRed', + lightThemeV2['edgeless/palette/medium/redMedium'] + ); // select note block await page.mouse.click(rect.x + rect.width / 2, rect.y + rect.height / 2); await waitNextFrame(page); await triggerComponentToolbarAction(page, 'changeNoteColor'); - const noteColor = '--affine-v2-edgeless-note-red'; - await changeEdgelessNoteBackground(page, noteColor); + await changeEdgelessNoteBackground(page, 'Red'); // move to arrow icon await page.mouse.move( @@ -223,7 +220,11 @@ test.describe('auto-complete', () => { return note?.getAttribute('data-block-id'); }); assertExists(noteId2); - await assertEdgelessNoteBackground(page, noteId, noteColor); + await assertEdgelessNoteBackground( + page, + noteId, + lightThemeV2['edgeless/note/red'] + ); expect(await edgelessNote.count()).toBe(2); }); diff --git a/blocksuite/tests-legacy/edgeless/brush.spec.ts b/blocksuite/tests-legacy/edgeless/brush.spec.ts index 54b395d6e21f7..8f7d6b8a1b8b9 100644 --- a/blocksuite/tests-legacy/edgeless/brush.spec.ts +++ b/blocksuite/tests-legacy/edgeless/brush.spec.ts @@ -1,5 +1,5 @@ -import { StrokeColor } from '@blocksuite/affine-model'; import { expect } from '@playwright/test'; +import { lightThemeV2 } from '@toeverything/theme/v2'; import { assertEdgelessTool, @@ -80,15 +80,14 @@ test('add brush element with color', async ({ page }) => { await switchEditorMode(page); await setEdgelessTool(page, 'brush'); - const color = StrokeColor.Blue; - await selectBrushColor(page, color); + await selectBrushColor(page, 'Blue'); const start = { x: 100, y: 100 }; const end = { x: 200, y: 200 }; await dragBetweenCoords(page, start, end, { steps: 100 }); const [pickedColor] = await pickColorAtPoints(page, [[110, 110]]); - + const color = lightThemeV2['edgeless/palette/medium/blueMedium']; await assertEdgelessColorSameWithHexColor(page, color, pickedColor); }); @@ -101,8 +100,8 @@ test('keep same color when mouse mode switched back to brush', async ({ await deleteAll(page); await setEdgelessTool(page, 'brush'); - const color = StrokeColor.Blue; - await selectBrushColor(page, color); + await selectBrushColor(page, 'Blue'); + const start = { x: 200, y: 200 }; const end = { x: 300, y: 300 }; await dragBetweenCoords(page, start, end, { steps: 100 }); @@ -113,7 +112,9 @@ test('keep same color when mouse mode switched back to brush', async ({ await setEdgelessTool(page, 'brush'); const origin = { x: 100, y: 100 }; await dragBetweenCoords(page, origin, start, { steps: 100 }); + const [pickedColor] = await pickColorAtPoints(page, [[110, 110]]); + const color = lightThemeV2['edgeless/palette/medium/blueMedium']; await assertEdgelessColorSameWithHexColor(page, color, pickedColor); }); @@ -124,8 +125,7 @@ test('add brush element with different size', async ({ page }) => { await setEdgelessTool(page, 'brush'); await selectBrushSize(page, 'ten'); - const color = StrokeColor.Blue; - await selectBrushColor(page, color); + await selectBrushColor(page, 'Blue'); const start = { x: 100, y: 100 }; const end = { x: 200, y: 100 }; @@ -143,6 +143,7 @@ test('add brush element with different size', async ({ page }) => { [110, 105], ]); + const color = lightThemeV2['edgeless/palette/medium/blueMedium']; await assertEdgelessColorSameWithHexColor(page, color, topEdge); await assertEdgelessColorSameWithHexColor(page, color, bottomEdge); assertSameColor(nearTopEdge, '#84cfff'); diff --git a/blocksuite/tests-legacy/edgeless/connector/connector.spec.ts b/blocksuite/tests-legacy/edgeless/connector/connector.spec.ts index 38fbf3fa7d227..f614216ad8b93 100644 --- a/blocksuite/tests-legacy/edgeless/connector/connector.spec.ts +++ b/blocksuite/tests-legacy/edgeless/connector/connector.spec.ts @@ -1,4 +1,3 @@ -import { StrokeColor } from '@blocksuite/affine-model'; import { expect } from '@playwright/test'; import { @@ -149,7 +148,7 @@ test('change connector line width', async ({ page }) => { await page.mouse.click(start.x + 5, start.y); await triggerComponentToolbarAction(page, 'changeConnectorStrokeColor'); - await changeConnectorStrokeColor(page, StrokeColor.Grey); + await changeConnectorStrokeColor(page, 'MediumGrey'); await triggerComponentToolbarAction(page, 'changeConnectorStrokeStyles'); await changeConnectorStrokeWidth(page, 5); @@ -174,7 +173,7 @@ test('change connector stroke style', async ({ page }) => { await page.mouse.click(start.x + 5, start.y); await triggerComponentToolbarAction(page, 'changeConnectorStrokeColor'); - await changeConnectorStrokeColor(page, StrokeColor.Grey); + await changeConnectorStrokeColor(page, 'MediumGrey'); await triggerComponentToolbarAction(page, 'changeConnectorStrokeStyles'); await changeConnectorStrokeStyle(page, 'dash'); diff --git a/blocksuite/tests-legacy/edgeless/lock.spec.ts b/blocksuite/tests-legacy/edgeless/lock.spec.ts index b5e5863aa74f8..5a0a18f9ee392 100644 --- a/blocksuite/tests-legacy/edgeless/lock.spec.ts +++ b/blocksuite/tests-legacy/edgeless/lock.spec.ts @@ -59,7 +59,6 @@ test.describe('lock', () => { test('edgeless element can be locked and unlocked', async ({ page }) => { await edgelessCommonSetup(page); - // eslint-disable-next-line @typescript-eslint/no-explicit-any const wrapTest = async <F extends (...args: any) => any>( elementCreateFn: F, ...args: Parameters<F> diff --git a/blocksuite/tests-legacy/edgeless/note/note.spec.ts b/blocksuite/tests-legacy/edgeless/note/note.spec.ts index 2a64bddd9a401..d1c092ba0a618 100644 --- a/blocksuite/tests-legacy/edgeless/note/note.spec.ts +++ b/blocksuite/tests-legacy/edgeless/note/note.spec.ts @@ -4,6 +4,7 @@ import { NoteDisplayMode, } from '@blocksuite/affine-model'; import { expect } from '@playwright/test'; +import { lightThemeV2 } from '@toeverything/theme/v2'; import { activeNoteInEdgeless, @@ -304,14 +305,17 @@ test('change note color', async ({ page }) => { await assertEdgelessNoteBackground( page, noteId, - '--affine-v2-edgeless-note-white' + lightThemeV2['edgeless/note/white'] ); await selectNoteInEdgeless(page, noteId); await triggerComponentToolbarAction(page, 'changeNoteColor'); - const color = '--affine-v2-edgeless-note-green'; - await changeEdgelessNoteBackground(page, color); - await assertEdgelessNoteBackground(page, noteId, color); + await changeEdgelessNoteBackground(page, 'Green'); + await assertEdgelessNoteBackground( + page, + noteId, + lightThemeV2['edgeless/note/green'] + ); }); test('cursor for active and inactive state', async ({ page }) => { diff --git a/blocksuite/tests-legacy/edgeless/shape.spec.ts b/blocksuite/tests-legacy/edgeless/shape.spec.ts index a4babb9fe6055..8ccb9cd22413c 100644 --- a/blocksuite/tests-legacy/edgeless/shape.spec.ts +++ b/blocksuite/tests-legacy/edgeless/shape.spec.ts @@ -1,5 +1,5 @@ -import { ShapeFillColor, StrokeColor } from '@blocksuite/affine-model'; import { expect, type Page } from '@playwright/test'; +import { lightThemeV2 } from '@toeverything/theme/v2'; import { assertEdgelessTool, @@ -168,14 +168,17 @@ test.skip('change shape fill color', async ({ page }) => { await page.mouse.click(rect.start.x + 5, rect.start.y + 5); await triggerComponentToolbarAction(page, 'changeShapeFillColor'); - const color = ShapeFillColor.Grey; - await changeShapeFillColor(page, color); + await changeShapeFillColor(page, 'MediumGrey'); await page.waitForTimeout(50); const [picked] = await pickColorAtPoints(page, [ [rect.start.x + 20, rect.start.y + 20], ]); - await assertEdgelessColorSameWithHexColor(page, color, picked); + await assertEdgelessColorSameWithHexColor( + page, + lightThemeV2['edgeless/palette/medium/greyMedium'], + picked + ); }); test('change shape stroke color', async ({ page }) => { @@ -191,14 +194,17 @@ test('change shape stroke color', async ({ page }) => { await page.mouse.click(rect.start.x + 5, rect.start.y + 5); await triggerComponentToolbarAction(page, 'changeShapeStrokeColor'); - const color = StrokeColor.Grey; - await changeShapeStrokeColor(page, color); + await changeShapeStrokeColor(page, 'HeavyYellow'); await page.waitForTimeout(50); const [picked] = await pickColorAtPoints(page, [ [rect.start.x + 1, rect.start.y + 1], ]); - await assertEdgelessColorSameWithHexColor(page, color, picked); + await assertEdgelessColorSameWithHexColor( + page, + lightThemeV2['edgeless/palette/heavy/yellow'], + picked + ); }); test('the tooltip of shape tool button should be hidden when the shape menu is shown', async ({ @@ -339,7 +345,7 @@ test('change shape stroke width', async ({ page }) => { await page.mouse.click(start.x + 5, start.y + 5); await triggerComponentToolbarAction(page, 'changeShapeStrokeColor'); - await changeShapeStrokeColor(page, StrokeColor.Magenta); + await changeShapeStrokeColor(page, 'MediumMagenta'); await triggerComponentToolbarAction(page, 'changeShapeStrokeStyles'); await changeShapeStrokeWidth(page); @@ -362,7 +368,7 @@ test('change shape stroke style', async ({ page }) => { await page.mouse.click(start.x + 5, start.y + 5); await triggerComponentToolbarAction(page, 'changeShapeStrokeColor'); - await changeShapeStrokeColor(page, StrokeColor.Blue); + await changeShapeStrokeColor(page, 'MediumBlue'); await triggerComponentToolbarAction(page, 'changeShapeStrokeStyles'); await changeShapeStrokeStyle(page, 'dash'); @@ -549,12 +555,16 @@ test('change shape style', async ({ page }) => { await page.mouse.click(start.x + 5, start.y + 5); await triggerComponentToolbarAction(page, 'changeShapeStrokeColor'); - const color = StrokeColor.Purple; + const color = 'LightPurple'; await changeShapeStrokeColor(page, color); await page.waitForTimeout(50); const [picked] = await pickColorAtPoints(page, [[start.x + 1, start.y + 1]]); - await assertEdgelessColorSameWithHexColor(page, color, picked); + await assertEdgelessColorSameWithHexColor( + page, + lightThemeV2['edgeless/palette/light/purpleLight'], + picked + ); }); test('shape adds text by button', async ({ page }) => { diff --git a/blocksuite/tests-legacy/inline/inline-editor.spec.ts b/blocksuite/tests-legacy/inline/inline-editor.spec.ts index a1eaa110729d5..4d74341ba7743 100644 --- a/blocksuite/tests-legacy/inline/inline-editor.spec.ts +++ b/blocksuite/tests-legacy/inline/inline-editor.spec.ts @@ -251,7 +251,7 @@ test('readonly mode', async ({ page }) => { throw new Error('Cannot find editor'); } - // eslint-disable-next-line @typescript-eslint/no-explicit-any + // oxlint-disable-next-line @typescript-eslint/no-explicit-any (richTextA as any).inlineEditor.setReadonly(true); }); @@ -834,13 +834,13 @@ test('yText should not contain \r', async ({ page }) => { throw new Error('Cannot find test-rich-text'); } - // eslint-disable-next-line @typescript-eslint/no-explicit-any + // oxlint-disable-next-line @typescript-eslint/no-explicit-any const editor = (richText as any).inlineEditor as InlineEditor; try { editor.insertText({ index: 0, length: 0 }, 'abc\r'); } catch (e) { - // eslint-disable-next-line @typescript-eslint/no-explicit-any + // oxlint-disable-next-line @typescript-eslint/no-explicit-any return (e as any).message; } }); diff --git a/blocksuite/tests-legacy/link.spec.ts b/blocksuite/tests-legacy/link.spec.ts index a2e4c3dbdb3a6..568a3eb8aa7c1 100644 --- a/blocksuite/tests-legacy/link.spec.ts +++ b/blocksuite/tests-legacy/link.spec.ts @@ -476,7 +476,7 @@ test.skip('convert link to embed', async ({ page }) => { ` <affine:page> <affine:note - prop:background="--affine-v2-edgeless-note-white" + prop:background="--affine-note-background-blue" prop:displayMode="both" prop:edgeless={ Object { @@ -493,7 +493,7 @@ test.skip('convert link to embed', async ({ page }) => { prop:lockedBySelf={false} > <affine:paragraph - prop:collapsed={false} + prop:collapsed={false} prop:text="aaa" prop:type="text" /> diff --git a/blocksuite/tests-legacy/package.json b/blocksuite/tests-legacy/package.json index 7d2fd44bf5e90..4e5497f44d313 100644 --- a/blocksuite/tests-legacy/package.json +++ b/blocksuite/tests-legacy/package.json @@ -11,7 +11,8 @@ "@blocksuite/block-std": "workspace:*", "@blocksuite/global": "workspace:*", "@blocksuite/presets": "workspace:*", - "@playwright/test": "=1.49.1" + "@playwright/test": "=1.49.1", + "@toeverything/theme": "^1.1.3" }, "repository": { "type": "git", diff --git a/blocksuite/tests-legacy/slash-menu.spec.ts b/blocksuite/tests-legacy/slash-menu.spec.ts index ec3569d27a79f..928fe9d1400b5 100644 --- a/blocksuite/tests-legacy/slash-menu.spec.ts +++ b/blocksuite/tests-legacy/slash-menu.spec.ts @@ -885,7 +885,7 @@ test.describe('slash menu with customize menu', () => { { groupName: 'Custom Menu' }, { name: 'Custom Menu Item', - // eslint-disable-next-line @typescript-eslint/no-explicit-any + // oxlint-disable-next-line @typescript-eslint/no-explicit-any icon: '' as any, action: () => { // do nothing @@ -893,7 +893,7 @@ test.describe('slash menu with customize menu', () => { }, { name: 'Custom Menu Item', - // eslint-disable-next-line @typescript-eslint/no-explicit-any + // oxlint-disable-next-line @typescript-eslint/no-explicit-any icon: '' as any, action: () => { // do nothing diff --git a/blocksuite/tests-legacy/snapshots/basic.spec.ts/automatic-identify-url-text-final.json b/blocksuite/tests-legacy/snapshots/basic.spec.ts/automatic-identify-url-text-final.json index 843eb81aa52f6..b13c64a57084b 100644 --- a/blocksuite/tests-legacy/snapshots/basic.spec.ts/automatic-identify-url-text-final.json +++ b/blocksuite/tests-legacy/snapshots/basic.spec.ts/automatic-identify-url-text-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/basic.spec.ts/basic-test-default.json b/blocksuite/tests-legacy/snapshots/basic.spec.ts/basic-test-default.json index db5fa1b07dbc0..88deb243a5c6f 100644 --- a/blocksuite/tests-legacy/snapshots/basic.spec.ts/basic-test-default.json +++ b/blocksuite/tests-legacy/snapshots/basic.spec.ts/basic-test-default.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-bookmark-url-by-copy-button-final.json b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-bookmark-url-by-copy-button-final.json index 491ed8236484e..136bd94760f89 100644 --- a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-bookmark-url-by-copy-button-final.json +++ b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-bookmark-url-by-copy-button-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-url-to-create-bookmark-in-edgeless-mode-final.json b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-url-to-create-bookmark-in-edgeless-mode-final.json index 954961ef5651a..8e72ee50be099 100644 --- a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-url-to-create-bookmark-in-edgeless-mode-final.json +++ b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-url-to-create-bookmark-in-edgeless-mode-final.json @@ -27,7 +27,10 @@ "version": 1, "props": { "xywh": "[0,0,498,234]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-url-to-create-bookmark-in-page-mode-final.json b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-url-to-create-bookmark-in-page-mode-final.json index f949b1b5596ab..70629dd2faa6a 100644 --- a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-url-to-create-bookmark-in-page-mode-final.json +++ b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-url-to-create-bookmark-in-page-mode-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/covert-bookmark-block-to-link-text-final.json b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/covert-bookmark-block-to-link-text-final.json index 14142efb9d1e0..6d9d9e11f5015 100644 --- a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/covert-bookmark-block-to-link-text-final.json +++ b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/covert-bookmark-block-to-link-text-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/create-bookmark-by-slash-menu-final.json b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/create-bookmark-by-slash-menu-final.json index 0dfcd5aa4f0c5..bfef5d3b694aa 100644 --- a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/create-bookmark-by-slash-menu-final.json +++ b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/create-bookmark-by-slash-menu-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/embed-figma.json b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/embed-figma.json index e976f0683f4e5..bd9bc5b3bef11 100644 --- a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/embed-figma.json +++ b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/embed-figma.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/embed-youtube.json b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/embed-youtube.json index 50aa56ab8e9ac..558a37751196f 100644 --- a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/embed-youtube.json +++ b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/embed-youtube.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/horizontal-figma.json b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/horizontal-figma.json index d8e3252e69edd..cd0d1e0124ab8 100644 --- a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/horizontal-figma.json +++ b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/horizontal-figma.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/horizontal-youtube.json b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/horizontal-youtube.json index c28ac11214bb9..d1d3f3c5b6602 100644 --- a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/horizontal-youtube.json +++ b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/horizontal-youtube.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-after-add-paragraph.json b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-after-add-paragraph.json index f36048f47895b..c40930225c84a 100644 --- a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-after-add-paragraph.json +++ b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-after-add-paragraph.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-after-drag.json b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-after-drag.json index efa52affa8fa2..0aca45a174f95 100644 --- a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-after-drag.json +++ b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-after-drag.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", @@ -110,4 +113,4 @@ ] } ] -} +} \ No newline at end of file diff --git a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-init.json b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-init.json index 962a981684b2f..d292befbe16ee 100644 --- a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-init.json +++ b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", @@ -53,4 +56,4 @@ ] } ] -} +} \ No newline at end of file diff --git a/blocksuite/tests-legacy/snapshots/clipboard/clipboard.spec.ts/auto-identify-url-final.json b/blocksuite/tests-legacy/snapshots/clipboard/clipboard.spec.ts/auto-identify-url-final.json index b1cc7f93d4277..6c6a8fbbd044c 100644 --- a/blocksuite/tests-legacy/snapshots/clipboard/clipboard.spec.ts/auto-identify-url-final.json +++ b/blocksuite/tests-legacy/snapshots/clipboard/clipboard.spec.ts/auto-identify-url-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/cut-will-delete-all-content-and-copy-will-reappear-content-after-cut.json b/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/cut-will-delete-all-content-and-copy-will-reappear-content-after-cut.json index f67273240fa85..fac8595cb1c41 100644 --- a/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/cut-will-delete-all-content-and-copy-will-reappear-content-after-cut.json +++ b/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/cut-will-delete-all-content-and-copy-will-reappear-content-after-cut.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/cut-will-delete-all-content-and-copy-will-reappear-content-after-paste.json b/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/cut-will-delete-all-content-and-copy-will-reappear-content-after-paste.json index 9bdfa2500d818..c0ed3d2daf0ed 100644 --- a/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/cut-will-delete-all-content-and-copy-will-reappear-content-after-paste.json +++ b/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/cut-will-delete-all-content-and-copy-will-reappear-content-after-paste.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/should-keep-paragraph-block-s-type-when-pasting-at-the-start-of-empty-paragraph-block-except-type-text-after-paste-1.json b/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/should-keep-paragraph-block-s-type-when-pasting-at-the-start-of-empty-paragraph-block-except-type-text-after-paste-1.json index ffb61bcbd884a..2f322f2111f1d 100644 --- a/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/should-keep-paragraph-block-s-type-when-pasting-at-the-start-of-empty-paragraph-block-except-type-text-after-paste-1.json +++ b/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/should-keep-paragraph-block-s-type-when-pasting-at-the-start-of-empty-paragraph-block-except-type-text-after-paste-1.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/should-keep-paragraph-block-s-type-when-pasting-at-the-start-of-empty-paragraph-block-except-type-text-after-paste-2.json b/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/should-keep-paragraph-block-s-type-when-pasting-at-the-start-of-empty-paragraph-block-except-type-text-after-paste-2.json index b00a4548f5e21..2ac573b63f986 100644 --- a/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/should-keep-paragraph-block-s-type-when-pasting-at-the-start-of-empty-paragraph-block-except-type-text-after-paste-2.json +++ b/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/should-keep-paragraph-block-s-type-when-pasting-at-the-start-of-empty-paragraph-block-except-type-text-after-paste-2.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/code/copy-paste.spec.ts/code-block-has-content-click-code-block-copy-menu-copy-whole-code-block-pasted.json b/blocksuite/tests-legacy/snapshots/code/copy-paste.spec.ts/code-block-has-content-click-code-block-copy-menu-copy-whole-code-block-pasted.json index a4b4b4e23f722..6e25e939450d0 100644 --- a/blocksuite/tests-legacy/snapshots/code/copy-paste.spec.ts/code-block-has-content-click-code-block-copy-menu-copy-whole-code-block-pasted.json +++ b/blocksuite/tests-legacy/snapshots/code/copy-paste.spec.ts/code-block-has-content-click-code-block-copy-menu-copy-whole-code-block-pasted.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/code/copy-paste.spec.ts/code-block-is-empty-click-code-block-copy-menu-copy-the-empty-code-block-pasted.json b/blocksuite/tests-legacy/snapshots/code/copy-paste.spec.ts/code-block-is-empty-click-code-block-copy-menu-copy-the-empty-code-block-pasted.json index 5493ce26bb505..b6a56a9b2338b 100644 --- a/blocksuite/tests-legacy/snapshots/code/copy-paste.spec.ts/code-block-is-empty-click-code-block-copy-menu-copy-the-empty-code-block-pasted.json +++ b/blocksuite/tests-legacy/snapshots/code/copy-paste.spec.ts/code-block-is-empty-click-code-block-copy-menu-copy-the-empty-code-block-pasted.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/delete-code-block-in-more-menu-final.json b/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/delete-code-block-in-more-menu-final.json index e6bb65e4ad12e..e7c7c2e21c7f9 100644 --- a/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/delete-code-block-in-more-menu-final.json +++ b/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/delete-code-block-in-more-menu-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/duplicate-code-block-final.json b/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/duplicate-code-block-final.json index 8fc72aee3f84a..4bfd573d8f7dd 100644 --- a/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/duplicate-code-block-final.json +++ b/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/duplicate-code-block-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/format-text-in-code-block-format.json b/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/format-text-in-code-block-format.json index 6810d47d080f4..07bd729db1b7f 100644 --- a/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/format-text-in-code-block-format.json +++ b/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/format-text-in-code-block-format.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/format-text-in-code-block-init.json b/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/format-text-in-code-block-init.json index 8567aad2cd813..c6a696c89d0f1 100644 --- a/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/format-text-in-code-block-init.json +++ b/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/format-text-in-code-block-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/format-text-in-code-block-link.json b/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/format-text-in-code-block-link.json index ac561212a8833..9c05d5a06074d 100644 --- a/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/format-text-in-code-block-link.json +++ b/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/format-text-in-code-block-link.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/use-markdown-syntax-can-create-code-block-init.json b/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/use-markdown-syntax-can-create-code-block-init.json index a68276e76247e..3d570b9a584ef 100644 --- a/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/use-markdown-syntax-can-create-code-block-init.json +++ b/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/use-markdown-syntax-can-create-code-block-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/use-markdown-syntax-can-create-code-block-markdown-syntax.json b/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/use-markdown-syntax-can-create-code-block-markdown-syntax.json index cd6d7e3979415..34e377841f033 100644 --- a/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/use-markdown-syntax-can-create-code-block-markdown-syntax.json +++ b/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/use-markdown-syntax-can-create-code-block-markdown-syntax.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-3-4.json b/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-3-4.json index 9f5d272314d4e..00d35886724c8 100644 --- a/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-3-4.json +++ b/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-3-4.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-3-9.json b/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-3-9.json index 2d3183ea97f31..41a3265365c3b 100644 --- a/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-3-9.json +++ b/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-3-9.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-4-3.json b/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-4-3.json index c0350fedb1798..e30fa55bdfc01 100644 --- a/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-4-3.json +++ b/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-4-3.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-init.json b/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-init.json index fc05738484700..b3e1c2b297ff2 100644 --- a/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-init.json +++ b/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/drag.spec.ts/should-be-able-to-drag-drop-multiple-blocks-to-nested-block-finial.json b/blocksuite/tests-legacy/snapshots/drag.spec.ts/should-be-able-to-drag-drop-multiple-blocks-to-nested-block-finial.json index 3842295488eea..ad87a80a8e736 100644 --- a/blocksuite/tests-legacy/snapshots/drag.spec.ts/should-be-able-to-drag-drop-multiple-blocks-to-nested-block-finial.json +++ b/blocksuite/tests-legacy/snapshots/drag.spec.ts/should-be-able-to-drag-drop-multiple-blocks-to-nested-block-finial.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", @@ -183,4 +186,4 @@ ] } ] -} +} \ No newline at end of file diff --git a/blocksuite/tests-legacy/snapshots/drag.spec.ts/should-be-able-to-drag-drop-multiple-blocks-to-nested-block-init.json b/blocksuite/tests-legacy/snapshots/drag.spec.ts/should-be-able-to-drag-drop-multiple-blocks-to-nested-block-init.json index 4ea493a6ff77b..02d217d7ddb18 100644 --- a/blocksuite/tests-legacy/snapshots/drag.spec.ts/should-be-able-to-drag-drop-multiple-blocks-to-nested-block-init.json +++ b/blocksuite/tests-legacy/snapshots/drag.spec.ts/should-be-able-to-drag-drop-multiple-blocks-to-nested-block-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", @@ -183,4 +186,4 @@ ] } ] -} +} \ No newline at end of file diff --git a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-add-linked-doc.json b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-add-linked-doc.json index 966a1b6331fd6..064aa6c0894de 100644 --- a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-add-linked-doc.json +++ b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-add-linked-doc.json @@ -28,7 +28,7 @@ "xywh": "[-25,-25,88.75,50]", "index": "a1", "lockedBySelf": false, - "color": "--affine-v2-edgeless-palette-medium-blueMedium", + "color": "#84cfff", "fontFamily": "blocksuite:surface:Inter", "fontStyle": "normal", "fontWeight": "400", @@ -74,7 +74,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-drag.json b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-drag.json index a10d65aca7d49..6bb6517e6ba1a 100644 --- a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-drag.json +++ b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-drag.json @@ -28,7 +28,7 @@ "xywh": "[-25,-25,497,154]", "index": "a1", "lockedBySelf": false, - "color": "--affine-v2-edgeless-palette-medium-blueMedium", + "color": "#84cfff", "fontFamily": "blocksuite:surface:Inter", "fontStyle": "normal", "fontWeight": "400", @@ -65,7 +65,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-init.json b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-init.json index 42634c6f70dc5..2df1f3a046b3d 100644 --- a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-init.json +++ b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-init.json @@ -28,7 +28,7 @@ "xywh": "[-25,-25,50,26]", "index": "a1", "lockedBySelf": false, - "color": "--affine-v2-edgeless-palette-medium-blueMedium", + "color": "#84cfff", "fontFamily": "blocksuite:surface:Inter", "fontStyle": "normal", "fontWeight": "400", @@ -64,7 +64,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card-min-width.json b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card-min-width.json index 503563c1bd1d9..463f5b06bc704 100644 --- a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card-min-width.json +++ b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card-min-width.json @@ -28,7 +28,7 @@ "xywh": "[-25,-25,452,154]", "index": "a1", "lockedBySelf": false, - "color": "--affine-v2-edgeless-palette-medium-blueMedium", + "color": "#84cfff", "fontFamily": "blocksuite:surface:Inter", "fontStyle": "normal", "fontWeight": "400", @@ -65,7 +65,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card.json b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card.json index 0acdef494eabf..6d07c4f935e64 100644 --- a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card.json +++ b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card.json @@ -28,7 +28,7 @@ "xywh": "[-25,-25,452,154]", "index": "a1", "lockedBySelf": false, - "color": "--affine-v2-edgeless-palette-medium-blueMedium", + "color": "#84cfff", "fontFamily": "blocksuite:surface:Inter", "fontStyle": "normal", "fontWeight": "400", @@ -65,7 +65,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-finial.json b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-finial.json index 8b8f4df2b41ab..df89744892db2 100644 --- a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-finial.json +++ b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-finial.json @@ -32,7 +32,7 @@ "xywh": "[-25,-25,50,26]", "index": "a1", "lockedBySelf": false, - "color": "--affine-v2-edgeless-palette-medium-blueMedium", + "color": "#84cfff", "fontFamily": "blocksuite:surface:Inter", "fontStyle": "normal", "fontWeight": "400", @@ -72,7 +72,10 @@ "version": 1, "props": { "xywh": "[0,0,498,48]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-empty.json b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-empty.json index fb22906247dd3..8b74ef5fb8624 100644 --- a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-empty.json +++ b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-empty.json @@ -28,7 +28,7 @@ "xywh": "[-25,-25,50,26]", "index": "a1", "lockedBySelf": false, - "color": "--affine-v2-edgeless-palette-medium-blueMedium", + "color": "#84cfff", "fontFamily": "blocksuite:surface:Inter", "fontStyle": "normal", "fontWeight": "400", @@ -68,7 +68,10 @@ "version": 1, "props": { "xywh": "[0,0,498,48]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-not-empty.json b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-not-empty.json index 04a02e46b3126..f1d3880751e47 100644 --- a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-not-empty.json +++ b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-not-empty.json @@ -28,7 +28,7 @@ "xywh": "[-25,-25,50,26]", "index": "a1", "lockedBySelf": false, - "color": "--affine-v2-edgeless-palette-medium-blueMedium", + "color": "#84cfff", "fontFamily": "blocksuite:surface:Inter", "fontStyle": "normal", "fontWeight": "400", @@ -68,7 +68,10 @@ "version": 1, "props": { "xywh": "[0,0,498,48]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/create-linked-doc-from-block-selection-with-format-bar.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/create-linked-doc-from-block-selection-with-format-bar.json index bbca46409fe53..ac7534530b7d8 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/create-linked-doc-from-block-selection-with-format-bar.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/create-linked-doc-from-block-selection-with-format-bar.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-default-color.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-default-color.json index 616ba8f67824c..ab3ea57fc56c1 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-default-color.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-default-color.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-init.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-init.json index 616ba8f67824c..ab3ea57fc56c1 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-init.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-select-all.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-select-all.json index b4685f071831e..94c309684c597 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-select-all.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-select-all.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-bulleted.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-bulleted.json index be8ee9e7ecc36..bddf3d6bd3769 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-bulleted.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-bulleted.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-finial.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-finial.json index 525e32c3ad6a4..6f7956de7625c 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-finial.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-finial.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-init.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-init.json index a2718a1de4ebe..4b6a5aecfc1b8 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-init.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-finial.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-finial.json index e0293cab9dc82..5f91d67a36ecc 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-finial.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-finial.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-init.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-init.json index d91e0e70caa1d..e3c798fb12e9a 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-init.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-when-select-multiple-line-finial.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-when-select-multiple-line-finial.json index 9d418c32e19e0..9c532be4bce5c 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-when-select-multiple-line-finial.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-when-select-multiple-line-finial.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-when-select-multiple-line-init.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-when-select-multiple-line-init.json index d6339a2e7de56..12bf86652792b 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-when-select-multiple-line-init.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-when-select-multiple-line-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-link-text-finial.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-link-text-finial.json index 9d418c32e19e0..9c532be4bce5c 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-link-text-finial.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-link-text-finial.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-link-text-init.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-link-text-init.json index 07fb24fbf81c6..0188611aa8151 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-link-text-init.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-link-text-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-show-after-convert-to-code-block.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-show-after-convert-to-code-block.json index c0eb5f8409f7f..6bb07db7f7e66 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-show-after-convert-to-code-block.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-show-after-convert-to-code-block.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-with-block-selection-works-when-update-block-type-final.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-with-block-selection-works-when-update-block-type-final.json index a1cd97577f9b2..cf0882a747ac2 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-with-block-selection-works-when-update-block-type-final.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-with-block-selection-works-when-update-block-type-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-with-block-selection-works-when-update-block-type-init.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-with-block-selection-works-when-update-block-type-init.json index f18ab67ce257b..d6f87ec2b64a7 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-with-block-selection-works-when-update-block-type-init.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-with-block-selection-works-when-update-block-type-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-work-in-multiple-block-selection.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-work-in-multiple-block-selection.json index ae698abc9cd34..abff1d216a291 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-work-in-multiple-block-selection.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-work-in-multiple-block-selection.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-work-in-single-block-selection.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-work-in-single-block-selection.json index 6f61954663c0b..ebf43486b3795 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-work-in-single-block-selection.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-work-in-single-block-selection.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/Enter-key-should-as-expected-after-setting-heading-by-shortkey.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/Enter-key-should-as-expected-after-setting-heading-by-shortkey.json index 35972683df26a..facaed302ba22 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/Enter-key-should-as-expected-after-setting-heading-by-shortkey.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/Enter-key-should-as-expected-after-setting-heading-by-shortkey.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-init.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-init.json index 822fc5888bf40..2830748c3521b 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-init.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-redo.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-redo.json index 822fc5888bf40..2830748c3521b 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-redo.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-redo.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-undo.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-undo.json index 3f9cc69066614..8f349ea90a53a 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-undo.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-undo.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-multiple-line-init.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-multiple-line-init.json index 99ddf761e1082..ce90e208cb375 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-multiple-line-init.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-multiple-line-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-multiple-line-undo.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-multiple-line-undo.json index 3f9cc69066614..8f349ea90a53a 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-multiple-line-undo.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-multiple-line-undo.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-single-line-init.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-single-line-init.json index 6b62ffa97f34b..92df42a04a92f 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-single-line-init.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-single-line-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-single-line-undo.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-single-line-undo.json index f0c5d387b2ffa..1e525cc6a548b 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-single-line-undo.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-single-line-undo.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-init.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-init.json index 96519b38dff02..36444fd2ef24a 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-init.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-0.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-0.json index 71bc04e7f2905..397fdf3823ba5 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-0.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-0.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-6.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-6.json index 81fab9818e6f6..2d7e1ad6e8797 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-6.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-6.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-8.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-8.json index 1eed6e52b25bc..ca5324bced3bf 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-8.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-8.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-9.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-9.json index 5da8d71e8173d..8813cc80644e9 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-9.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-9.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-d.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-d.json index 384d96a3dc3ca..5d73f78533737 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-d.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-d.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-multiple-line-format-hotkey-work-finial.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-multiple-line-format-hotkey-work-finial.json index 3f9cc69066614..8f349ea90a53a 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-multiple-line-format-hotkey-work-finial.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-multiple-line-format-hotkey-work-finial.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-multiple-line-format-hotkey-work-init.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-multiple-line-format-hotkey-work-init.json index 9c7c225662dce..d4fb76c0b0f13 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-multiple-line-format-hotkey-work-init.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-multiple-line-format-hotkey-work-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-single-line-format-hotkey-work-finial.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-single-line-format-hotkey-work-finial.json index f0c5d387b2ffa..1e525cc6a548b 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-single-line-format-hotkey-work-finial.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-single-line-format-hotkey-work-finial.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-single-line-format-hotkey-work-init.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-single-line-format-hotkey-work-init.json index f34e1e8c54fe9..bcd81467d59e1 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-single-line-format-hotkey-work-init.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-single-line-format-hotkey-work-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-ggg.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-ggg.json index 430b36675ffaa..f6f5add92aec5 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-ggg.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-ggg.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-hhh.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-hhh.json index 502c58805bf2b..53499ab4bd8e5 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-hhh.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-hhh.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold.json index 479e95d315331..7a0c0f5b5b655 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-init.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-init.json index 250c4562a7c7b..5e16595835a56 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-init.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey/bracket.spec.ts/should-bracket-complete-with-backtick-works-undo.json b/blocksuite/tests-legacy/snapshots/hotkey/bracket.spec.ts/should-bracket-complete-with-backtick-works-undo.json index 1f11d49479796..f558ae99ebfcd 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/bracket.spec.ts/should-bracket-complete-with-backtick-works-undo.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/bracket.spec.ts/should-bracket-complete-with-backtick-works-undo.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/bracket.spec.ts/should-bracket-complete-with-backtick-works.json b/blocksuite/tests-legacy/snapshots/hotkey/bracket.spec.ts/should-bracket-complete-with-backtick-works.json index e00f791a87298..9bf706be7a182 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/bracket.spec.ts/should-bracket-complete-with-backtick-works.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/bracket.spec.ts/should-bracket-complete-with-backtick-works.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/Enter-key-should-as-expected-after-setting-heading-by-shortkey.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/Enter-key-should-as-expected-after-setting-heading-by-shortkey.json index 261054509bb06..e7171c2a23cc4 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/Enter-key-should-as-expected-after-setting-heading-by-shortkey.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/Enter-key-should-as-expected-after-setting-heading-by-shortkey.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-cut-work-single-line-init.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-cut-work-single-line-init.json index 413815ce8e78f..7646ed57f021c 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-cut-work-single-line-init.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-cut-work-single-line-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-cut-work-single-line-undo.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-cut-work-single-line-undo.json index db5fa1b07dbc0..88deb243a5c6f 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-cut-work-single-line-undo.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-cut-work-single-line-undo.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-init.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-init.json index 9b7c0f23237a9..2e5aae1d84c72 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-init.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-0.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-0.json index 985c6f997f3ec..6185d1e7da6ed 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-0.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-0.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-6.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-6.json index 1ec98311559f7..6913800d2b41c 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-6.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-6.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-8.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-8.json index 58a72cdb6f03b..36942fcfcbe7e 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-8.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-8.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-9.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-9.json index 2c8067c47979f..e402ef7ea38be 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-9.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-9.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-d.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-d.json index 50ed66f303413..4754f5ac2529e 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-d.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-d.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-single-line-format-hotkey-work-finial.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-single-line-format-hotkey-work-finial.json index db5fa1b07dbc0..88deb243a5c6f 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-single-line-format-hotkey-work-finial.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-single-line-format-hotkey-work-finial.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-single-line-format-hotkey-work-init.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-single-line-format-hotkey-work-init.json index 025e5e36fa9ce..a1d103641a6b7 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-single-line-format-hotkey-work-init.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-single-line-format-hotkey-work-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/type-character-jump-out-code-node-1.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/type-character-jump-out-code-node-1.json index 5d479d7f75cca..4dea51ea608ff 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/type-character-jump-out-code-node-1.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/type-character-jump-out-code-node-1.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/type-character-jump-out-code-node-2.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/type-character-jump-out-code-node-2.json index 6e086175a000f..262b6d8a4ef53 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/type-character-jump-out-code-node-2.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/type-character-jump-out-code-node-2.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-at-empty-line-bold.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-at-empty-line-bold.json index d0d2e5df3af59..47df37eb92797 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-at-empty-line-bold.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-at-empty-line-bold.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-ggg.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-ggg.json index 70be677283e2e..373b7b3c7a57b 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-ggg.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-ggg.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-hhh.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-hhh.json index 88a3599ca65ff..a2592907b6eb8 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-hhh.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-hhh.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold.json index 26dbf6c0ede1b..05d86dcb54b38 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-init.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-init.json index 8e21859efc24d..993e1e1f67bf7 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-init.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-init.json b/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-init.json index 2cc3862cc90b9..81cfe186fb27c 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-init.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-redo.json b/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-redo.json index 2cc3862cc90b9..81cfe186fb27c 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-redo.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-redo.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-undo.json b/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-undo.json index 9d418c32e19e0..9c532be4bce5c 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-undo.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-undo.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-cut-work-multiple-line-init.json b/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-cut-work-multiple-line-init.json index 0443262e93658..34fb1214b301b 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-cut-work-multiple-line-init.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-cut-work-multiple-line-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-cut-work-multiple-line-undo.json b/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-cut-work-multiple-line-undo.json index 9d418c32e19e0..9c532be4bce5c 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-cut-work-multiple-line-undo.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-cut-work-multiple-line-undo.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-multiple-line-format-hotkey-work-finial.json b/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-multiple-line-format-hotkey-work-finial.json index 9d418c32e19e0..9c532be4bce5c 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-multiple-line-format-hotkey-work-finial.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-multiple-line-format-hotkey-work-finial.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-multiple-line-format-hotkey-work-init.json b/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-multiple-line-format-hotkey-work-init.json index c3a01cfcbc4b4..afee46063cac8 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-multiple-line-format-hotkey-work-init.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-multiple-line-format-hotkey-work-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-enter-finial.json b/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-enter-finial.json index 997c7660eb874..9541410365f10 100644 --- a/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-enter-finial.json +++ b/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-enter-finial.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-enter-init.json b/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-enter-init.json index 00e34ce8e8289..2d280cd0d1842 100644 --- a/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-enter-init.json +++ b/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-enter-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-space-finial.json b/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-space-finial.json index 997c7660eb874..9541410365f10 100644 --- a/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-space-finial.json +++ b/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-space-finial.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-space-init.json b/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-space-init.json index 00e34ce8e8289..2d280cd0d1842 100644 --- a/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-space-init.json +++ b/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-space-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-slash-menu-finial.json b/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-slash-menu-finial.json index 7c68b8774028b..2105530200b4d 100644 --- a/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-slash-menu-finial.json +++ b/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-slash-menu-finial.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-slash-menu-init.json b/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-slash-menu-init.json index 00e34ce8e8289..2d280cd0d1842 100644 --- a/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-slash-menu-init.json +++ b/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-slash-menu-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/link.spec.ts/basic-link.json b/blocksuite/tests-legacy/snapshots/link.spec.ts/basic-link.json index ab46295359c8b..0fa872877a8a3 100644 --- a/blocksuite/tests-legacy/snapshots/link.spec.ts/basic-link.json +++ b/blocksuite/tests-legacy/snapshots/link.spec.ts/basic-link.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/link.spec.ts/convert-link-to-card.json b/blocksuite/tests-legacy/snapshots/link.spec.ts/convert-link-to-card.json index 004b5aa299d24..197ea251547d2 100644 --- a/blocksuite/tests-legacy/snapshots/link.spec.ts/convert-link-to-card.json +++ b/blocksuite/tests-legacy/snapshots/link.spec.ts/convert-link-to-card.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/can-create-linked-page-and-jump-final.json b/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/can-create-linked-page-and-jump-final.json index a16b2aca2dd63..b81b15b301ab4 100644 --- a/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/can-create-linked-page-and-jump-final.json +++ b/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/can-create-linked-page-and-jump-final.json @@ -21,7 +21,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/can-create-linked-page-and-jump-init.json b/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/can-create-linked-page-and-jump-init.json index a16b2aca2dd63..b81b15b301ab4 100644 --- a/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/can-create-linked-page-and-jump-init.json +++ b/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/can-create-linked-page-and-jump-init.json @@ -21,7 +21,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/duplicated-linked-page-should-paste-as-linked-page.json b/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/duplicated-linked-page-should-paste-as-linked-page.json index 517f677f887c5..e93ca51d69596 100644 --- a/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/duplicated-linked-page-should-paste-as-linked-page.json +++ b/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/duplicated-linked-page-should-paste-as-linked-page.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/paste-linked-page-should-paste-as-linked-page.json b/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/paste-linked-page-should-paste-as-linked-page.json index 5e1550d91158b..eb4b6883b686c 100644 --- a/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/paste-linked-page-should-paste-as-linked-page.json +++ b/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/paste-linked-page-should-paste-as-linked-page.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/should-create-and-switch-page-work-final.json b/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/should-create-and-switch-page-work-final.json index 2cbb03a247e0f..d670da8b7e729 100644 --- a/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/should-create-and-switch-page-work-final.json +++ b/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/should-create-and-switch-page-work-final.json @@ -21,7 +21,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/should-create-and-switch-page-work-init.json b/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/should-create-and-switch-page-work-init.json index 2cbb03a247e0f..d670da8b7e729 100644 --- a/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/should-create-and-switch-page-work-init.json +++ b/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/should-create-and-switch-page-work-init.json @@ -21,7 +21,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/basic-indent-and-unindent-after-shift-tab.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/basic-indent-and-unindent-after-shift-tab.json index 8e1ea588cd43e..f7122fa413d6f 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/basic-indent-and-unindent-after-shift-tab.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/basic-indent-and-unindent-after-shift-tab.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/basic-indent-and-unindent-after-tab.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/basic-indent-and-unindent-after-tab.json index 147e963b6b203..a0b97d96ca9e1 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/basic-indent-and-unindent-after-tab.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/basic-indent-and-unindent-after-tab.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/basic-indent-and-unindent-init.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/basic-indent-and-unindent-init.json index 8e1ea588cd43e..f7122fa413d6f 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/basic-indent-and-unindent-init.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/basic-indent-and-unindent-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/can-expand-toggle-in-readonly-mode-before-readonly.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/can-expand-toggle-in-readonly-mode-before-readonly.json index c87227d587e1e..0190bdd5f9e0f 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/can-expand-toggle-in-readonly-mode-before-readonly.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/can-expand-toggle-in-readonly-mode-before-readonly.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/click-toggle-icon-should-collapsed-list-init.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/click-toggle-icon-should-collapsed-list-init.json index e549de1450dea..62ffb3c539bd3 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/click-toggle-icon-should-collapsed-list-init.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/click-toggle-icon-should-collapsed-list-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/click-toggle-icon-should-collapsed-list-toggle.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/click-toggle-icon-should-collapsed-list-toggle.json index c87227d587e1e..0190bdd5f9e0f 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/click-toggle-icon-should-collapsed-list-toggle.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/click-toggle-icon-should-collapsed-list-toggle.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/convert-nested-paragraph-to-list-final.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/convert-nested-paragraph-to-list-final.json index bf6873b2f0586..29d7c6302a213 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/convert-nested-paragraph-to-list-final.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/convert-nested-paragraph-to-list-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/convert-nested-paragraph-to-list-init.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/convert-nested-paragraph-to-list-init.json index e0bd753647cc1..e8c0e713a0f69 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/convert-nested-paragraph-to-list-init.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/convert-nested-paragraph-to-list-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-1.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-1.json index a375e41f56160..d141470d54834 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-1.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-1.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-2.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-2.json index 1d9a136687095..ce49df2512c72 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-2.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-2.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-3.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-3.json index 0cef7999ff1cc..a97f6670edde7 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-3.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-3.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-4.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-4.json index b0ccc738c9dfd..02ceafefb0bf8 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-4.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-4.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-5.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-5.json index af509bc4ec279..2855ac10d64a3 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-5.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-5.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-init.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-init.json index 081e1cb595cf0..22867899b88e6 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-init.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/indent-item-should-expand-toggle-finial.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/indent-item-should-expand-toggle-finial.json index 45152ecf1031b..2609394655060 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/indent-item-should-expand-toggle-finial.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/indent-item-should-expand-toggle-finial.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/indent-item-should-expand-toggle-init.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/indent-item-should-expand-toggle-init.json index 7365882502181..99002d586cb46 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/indent-item-should-expand-toggle-init.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/indent-item-should-expand-toggle-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/indent-item-should-expand-toggle-toggle.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/indent-item-should-expand-toggle-toggle.json index 8f74f180ba321..58771e931dc94 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/indent-item-should-expand-toggle-toggle.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/indent-item-should-expand-toggle-toggle.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/nested-list-blocks-finial.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/nested-list-blocks-finial.json index f88c587d872fc..8bf1adc88141c 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/nested-list-blocks-finial.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/nested-list-blocks-finial.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/nested-list-blocks-init.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/nested-list-blocks-init.json index 86849c7df3f2f..3207ffb89059f 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/nested-list-blocks-init.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/nested-list-blocks-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/should-indent-todo-block-preserve-todo-status-final.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/should-indent-todo-block-preserve-todo-status-final.json index 8e8a5a5893de3..a16d6e6512980 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/should-indent-todo-block-preserve-todo-status-final.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/should-indent-todo-block-preserve-todo-status-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/should-indent-todo-block-preserve-todo-status-init.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/should-indent-todo-block-preserve-todo-status-init.json index e6071616a0318..b501041e3574b 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/should-indent-todo-block-preserve-todo-status-init.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/should-indent-todo-block-preserve-todo-status-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/delete-empty-text-paragraph-block-should-keep-children-blocks-when-following-custom-blocks-final.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/delete-empty-text-paragraph-block-should-keep-children-blocks-when-following-custom-blocks-final.json index 5877da225ae96..fdf2e17947139 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/delete-empty-text-paragraph-block-should-keep-children-blocks-when-following-custom-blocks-final.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/delete-empty-text-paragraph-block-should-keep-children-blocks-when-following-custom-blocks-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/delete-empty-text-paragraph-block-should-keep-children-blocks-when-following-custom-blocks-init.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/delete-empty-text-paragraph-block-should-keep-children-blocks-when-following-custom-blocks-init.json index b6c73d2b19627..ee4a992ad4c31 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/delete-empty-text-paragraph-block-should-keep-children-blocks-when-following-custom-blocks-init.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/delete-empty-text-paragraph-block-should-keep-children-blocks-when-following-custom-blocks-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace-2.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace-2.json index a90abced3d95d..838ef87ff6f01 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace-2.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace-2.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace-3.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace-3.json index 44085016e50c7..a4e639d7fe8fe 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace-3.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace-3.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace.json index 92bc6b1cdb6db..f54e8aea28f58 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-init.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-init.json index 803ebf485b0d1..d693e8bf01f32 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-init.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-with-child-block-should-work-at-enter-final.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-with-child-block-should-work-at-enter-final.json index 981898cd8ac16..46f4679c4d98f 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-with-child-block-should-work-at-enter-final.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-with-child-block-should-work-at-enter-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-with-child-block-should-work-at-enter-init.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-with-child-block-should-work-at-enter-init.json index e30d709c89e86..26e9b79823e0b 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-with-child-block-should-work-at-enter-init.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-with-child-block-should-work-at-enter-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-delete-paragraph-block-child-can-hold-cursor-in-correct-position-final.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-delete-paragraph-block-child-can-hold-cursor-in-correct-position-final.json index 2a05668df0d0f..527f762a887a1 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-delete-paragraph-block-child-can-hold-cursor-in-correct-position-final.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-delete-paragraph-block-child-can-hold-cursor-in-correct-position-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-delete-paragraph-block-child-can-hold-cursor-in-correct-position-init.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-delete-paragraph-block-child-can-hold-cursor-in-correct-position-init.json index a01e9b6bcb6f4..ca6d873ef6b20 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-delete-paragraph-block-child-can-hold-cursor-in-correct-position-init.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-delete-paragraph-block-child-can-hold-cursor-in-correct-position-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-2.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-2.json index a19052cb46b1d..d0ad122bb3c60 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-2.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-2.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-3.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-3.json index 963047c6cbde6..a833cbc370036 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-3.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-3.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-4.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-4.json index 49a0041ad4577..74bd1728e2ed3 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-4.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-4.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent.json index 1f4480d3be116..6fbe5828fd365 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-init.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-init.json index 02827ec6b7214..a105d1c34b56a 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-init.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-1.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-1.json index 21581ffd7ce18..98506a0c36ea6 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-1.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-1.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-2.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-2.json index 9f19aa62a1ca6..da838ede192a6 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-2.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-2.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-3.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-3.json index 02827ec6b7214..a105d1c34b56a 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-3.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-3.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/click-bottom-of-page-and-if-the-last-is-embed-block-editor-should-insert-a-new-editable-block.json b/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/click-bottom-of-page-and-if-the-last-is-embed-block-editor-should-insert-a-new-editable-block.json index f3cc9f20747fa..5c0f7563d8a93 100644 --- a/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/click-bottom-of-page-and-if-the-last-is-embed-block-editor-should-insert-a-new-editable-block.json +++ b/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/click-bottom-of-page-and-if-the-last-is-embed-block-editor-should-insert-a-new-editable-block.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-indent-multi-selection-block.json b/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-indent-multi-selection-block.json index 6ae6b4f851b87..29deae0a496ad 100644 --- a/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-indent-multi-selection-block.json +++ b/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-indent-multi-selection-block.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-not-draw-rect-for-sub-selected-blocks-when-entering-tab-key.json b/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-not-draw-rect-for-sub-selected-blocks-when-entering-tab-key.json index 6ae6b4f851b87..29deae0a496ad 100644 --- a/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-not-draw-rect-for-sub-selected-blocks-when-entering-tab-key.json +++ b/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-not-draw-rect-for-sub-selected-blocks-when-entering-tab-key.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-unindent-multi-selection-block-final.json b/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-unindent-multi-selection-block-final.json index 9d418c32e19e0..9c532be4bce5c 100644 --- a/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-unindent-multi-selection-block-final.json +++ b/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-unindent-multi-selection-block-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-unindent-multi-selection-block-init.json b/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-unindent-multi-selection-block-init.json index 6ae6b4f851b87..29deae0a496ad 100644 --- a/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-unindent-multi-selection-block-init.json +++ b/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-unindent-multi-selection-block-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/indent-native-multi-selection-block-after-shift-tab.json b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/indent-native-multi-selection-block-after-shift-tab.json index fead36f8837e2..d1d626a75720e 100644 --- a/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/indent-native-multi-selection-block-after-shift-tab.json +++ b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/indent-native-multi-selection-block-after-shift-tab.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/indent-native-multi-selection-block-after-tab.json b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/indent-native-multi-selection-block-after-tab.json index 0b18904606545..d561e1379e1fb 100644 --- a/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/indent-native-multi-selection-block-after-tab.json +++ b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/indent-native-multi-selection-block-after-tab.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-backspace.json b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-backspace.json index 4c6eb301d04d0..4dc5a4c37b6f3 100644 --- a/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-backspace.json +++ b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-backspace.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-redo.json b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-redo.json index 4c6eb301d04d0..4dc5a4c37b6f3 100644 --- a/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-redo.json +++ b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-redo.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-undo.json b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-undo.json index e7b49aa463739..209d91521a647 100644 --- a/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-undo.json +++ b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-undo.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-init.json b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-init.json index e7b49aa463739..209d91521a647 100644 --- a/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-init.json +++ b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/should-unindent-native-multi-selection-block-after-tab.json b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/should-unindent-native-multi-selection-block-after-tab.json index 79d96fb82cf1b..70322b0bc350d 100644 --- a/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/should-unindent-native-multi-selection-block-after-tab.json +++ b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/should-unindent-native-multi-selection-block-after-tab.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/slash-menu.spec.ts/delete-block-by-slash-menu-should-remove-children.json b/blocksuite/tests-legacy/snapshots/slash-menu.spec.ts/delete-block-by-slash-menu-should-remove-children.json index 5ab9555f1550d..a496377e677ec 100644 --- a/blocksuite/tests-legacy/snapshots/slash-menu.spec.ts/delete-block-by-slash-menu-should-remove-children.json +++ b/blocksuite/tests-legacy/snapshots/slash-menu.spec.ts/delete-block-by-slash-menu-should-remove-children.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/utils/actions/edgeless.ts b/blocksuite/tests-legacy/utils/actions/edgeless.ts index afeed9333cb22..2e1634c71695a 100644 --- a/blocksuite/tests-legacy/utils/actions/edgeless.ts +++ b/blocksuite/tests-legacy/utils/actions/edgeless.ts @@ -1,10 +1,6 @@ import '../declare-test-window.js'; -import { - type NoteBlockModel, - type NoteDisplayMode, - ShapeFillColor, -} from '@blocks/index.js'; +import type { NoteBlockModel, NoteDisplayMode } from '@blocks/index.js'; import type { IPoint, IVec } from '@blocksuite/global/utils'; import { assertExists, sleep } from '@blocksuite/global/utils'; import type { Locator, Page } from '@playwright/test'; @@ -649,11 +645,11 @@ export async function rotateElementByHandle( ); } -export async function selectBrushColor(page: Page, color: string) { +export async function selectBrushColor(page: Page, label: string) { const colorButton = page .locator('edgeless-brush-menu') .locator('edgeless-color-panel') - .locator(`.color-unit[aria-label="${color}"]`); + .locator(`.color-unit[aria-label="${label}"]`); await colorButton.click(); } @@ -1377,20 +1373,20 @@ export async function triggerComponentToolbarAction( } } -export async function changeEdgelessNoteBackground(page: Page, color: string) { +export async function changeEdgelessNoteBackground(page: Page, label: string) { const colorButton = page .locator('edgeless-change-note-button') .locator('edgeless-color-panel') - .locator(`.color-unit[aria-label="${color}"]`); + .locator(`.color-unit[aria-label="${label}"]`); await colorButton.click(); } -export async function changeShapeFillColor(page: Page, color: string) { +export async function changeShapeFillColor(page: Page, label: string) { const colorButton = page .locator('edgeless-change-shape-button') .locator('edgeless-color-picker-button.fill-color') .locator('edgeless-color-panel') - .locator(`.color-unit[aria-label="${color}"]`); + .locator(`.color-unit[aria-label="${label}"]`); await colorButton.click({ force: true }); } @@ -1542,7 +1538,7 @@ export async function initThreeOverlapFilledShapes(page: Page) { await addBasicRectShapeElement(page, rect0.start, rect0.end); await page.mouse.click(rect0.start.x + 5, rect0.start.y + 5); await triggerComponentToolbarAction(page, 'changeShapeFillColor'); - await changeShapeFillColor(page, ShapeFillColor.Green); + await changeShapeFillColor(page, 'LightGreen'); const rect1 = { start: { x: 130, y: 130 }, @@ -1551,7 +1547,7 @@ export async function initThreeOverlapFilledShapes(page: Page) { await addBasicRectShapeElement(page, rect1.start, rect1.end); await page.mouse.click(rect1.start.x + 5, rect1.start.y + 5); await triggerComponentToolbarAction(page, 'changeShapeFillColor'); - await changeShapeFillColor(page, ShapeFillColor.Black); + await changeShapeFillColor(page, 'MediumBlue'); const rect2 = { start: { x: 160, y: 160 }, @@ -1560,7 +1556,7 @@ export async function initThreeOverlapFilledShapes(page: Page) { await addBasicRectShapeElement(page, rect2.start, rect2.end); await page.mouse.click(rect2.start.x + 5, rect2.start.y + 5); await triggerComponentToolbarAction(page, 'changeShapeFillColor'); - await changeShapeFillColor(page, ShapeFillColor.White); + await changeShapeFillColor(page, 'White'); } export async function initThreeOverlapNotes(page: Page, x = 130, y = 140) { diff --git a/blocksuite/tests-legacy/utils/actions/misc.ts b/blocksuite/tests-legacy/utils/actions/misc.ts index b71f6d7f198ca..04358023fdb91 100644 --- a/blocksuite/tests-legacy/utils/actions/misc.ts +++ b/blocksuite/tests-legacy/utils/actions/misc.ts @@ -1229,7 +1229,6 @@ export async function getIndexCoordinate( document.querySelectorAll('editor-host')[currentEditorIndex]; const richText = editorHost.querySelectorAll('rich-text')[ richTextIndex - // eslint-disable-next-line @typescript-eslint/no-explicit-any ] as any; const domRange = richText.inlineEditor.toDomRange({ index: vIndex, @@ -1371,7 +1370,7 @@ export async function getCurrentEditorDocId(page: Page) { export async function getCurrentHTMLTheme(page: Page) { const root = page.locator('html'); - // eslint-disable-next-line unicorn/prefer-dom-node-dataset + return root.getAttribute('data-theme'); } diff --git a/blocksuite/tests-legacy/utils/asserts.ts b/blocksuite/tests-legacy/utils/asserts.ts index 36af2db514e9c..6bc474ef767c0 100644 --- a/blocksuite/tests-legacy/utils/asserts.ts +++ b/blocksuite/tests-legacy/utils/asserts.ts @@ -7,9 +7,9 @@ import type { RootBlockModel, } from '@blocks/index.js'; import { - DEFAULT_NOTE_BACKGROUND_COLOR, DEFAULT_NOTE_HEIGHT, DEFAULT_NOTE_WIDTH, + DefaultTheme, } from '@blocksuite/affine-model'; import type { BlockComponent, EditorHost } from '@blocksuite/block-std'; import { BLOCK_ID_ATTR } from '@blocksuite/block-std'; @@ -113,7 +113,7 @@ export const defaultStore = { 'sys:children': ['2'], 'sys:version': 1, 'prop:xywh': `[0,0,${DEFAULT_NOTE_WIDTH}, ${DEFAULT_NOTE_HEIGHT}]`, - 'prop:background': DEFAULT_NOTE_BACKGROUND_COLOR, + 'prop:background': DefaultTheme.noteBackgrounColor, 'prop:index': 'a0', 'prop:hidden': false, 'prop:displayMode': 'both', @@ -1084,7 +1084,7 @@ export async function assertEdgelessNoteBackground( return noteWrapper.style.backgroundColor; }); - expect(backgroundColor).toEqual(`var(${color})`); + expect(toHex(backgroundColor)).toEqual(color); } function toHex(color: string) { @@ -1117,7 +1117,9 @@ export async function assertEdgelessColorSameWithHexColor( edgelessColor: string, hexColor: `#${string}` ) { - const themeColor = await getCurrentThemeCSSPropertyValue(page, edgelessColor); + const themeColor = edgelessColor.startsWith('---') + ? await getCurrentThemeCSSPropertyValue(page, edgelessColor) + : edgelessColor; expect(themeColor).toBeTruthy(); const edgelessHexColor = toHex(themeColor); @@ -1335,11 +1337,20 @@ export async function assertTextSelection( } } -export async function assertConnectorStrokeColor(page: Page, color: string) { +export async function assertConnectorStrokeColor( + page: Page, + label: string, + color: string +) { const colorButton = page .locator('edgeless-change-connector-button') .locator('edgeless-color-panel') - .locator(`.color-unit[aria-label="${color}"]`); + .locator(`.color-unit[aria-label="${label}"]`) + .locator('svg'); + + const realColor = await colorButton.evaluate( + element => window.getComputedStyle(element).fill + ); - expect(await colorButton.count()).toBe(1); + expect(toHex(realColor)).toBe(color); } diff --git a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/connector.tsx b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/connector.tsx index 0b54ceed6a4b1..61a0e3d0a91a5 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/connector.tsx +++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/connector.tsx @@ -10,23 +10,23 @@ import { EditorSettingService } from '@affine/core/modules/editor-setting'; import { useI18n } from '@affine/i18n'; import { ConnectorMode, + DefaultTheme, FontFamily, FontFamilyMap, FontStyle, FontWeightMap, PointStyle, - StrokeColor, - StrokeColorMap, StrokeStyle, TextAlign, } from '@blocksuite/affine/blocks'; import type { Doc } from '@blocksuite/affine/store'; import { useFramework, useLiveData } from '@toeverything/infra'; +import { isEqual } from 'lodash-es'; import { useCallback, useMemo } from 'react'; import { DropdownMenu } from '../menu'; import { menuTrigger, settingWrapper } from '../style.css'; -import { sortedFontWeightEntries, useColor } from '../utils'; +import { sortedFontWeightEntries, usePalettes } from '../utils'; import { Point } from './point'; import { EdgelessSnapshot } from './snapshot'; import { getSurfaceBlock } from './utils'; @@ -50,7 +50,15 @@ export const ConnectorSettings = () => { const framework = useFramework(); const { editorSetting } = framework.get(EditorSettingService); const settings = useLiveData(editorSetting.settings$); - const getColorFromMap = useColor(); + const { + palettes: strokeColorPalettes, + getCurrentColor: getCurrentStrokeColor, + } = usePalettes( + DefaultTheme.StrokeColorPalettes, + DefaultTheme.connectorColor + ); + const { palettes: textColorPalettes, getCurrentColor: getCurrentTextColor } = + usePalettes(DefaultTheme.StrokeColorPalettes, DefaultTheme.black); const connecterStyleItems = useMemo<RadioItem[]>( () => [ @@ -152,28 +160,28 @@ export const ConnectorSettings = () => { const currentColor = useMemo(() => { const color = settings.connector.stroke; - return getColorFromMap(color, StrokeColorMap); - }, [getColorFromMap, settings.connector.stroke]); + return getCurrentStrokeColor(color); + }, [getCurrentStrokeColor, settings.connector.stroke]); const colorItems = useMemo(() => { const { stroke } = settings.connector; - return Object.entries(StrokeColor).map(([name, value]) => { + return strokeColorPalettes.map(({ key, value, resolvedValue }) => { const handler = () => { editorSetting.set('connector', { stroke: value }); }; - const isSelected = stroke === value; + const isSelected = isEqual(stroke, value); return ( <MenuItem - key={name} + key={key} onSelect={handler} selected={isSelected} - prefix={<Point color={value} />} + prefix={<Point color={resolvedValue} />} > - {name} + {key} </MenuItem> ); }); - }, [editorSetting, settings]); + }, [editorSetting, settings, strokeColorPalettes]); const startEndPointItems = useMemo(() => { const { frontEndpointStyle } = settings.connector; @@ -322,7 +330,7 @@ export const ConnectorSettings = () => { const textColorItems = useMemo(() => { const { color } = settings.connector.labelStyle; - return Object.entries(StrokeColor).map(([name, value]) => { + return textColorPalettes.map(({ key, value, resolvedValue }) => { const handler = () => { editorSetting.set('connector', { labelStyle: { @@ -330,24 +338,24 @@ export const ConnectorSettings = () => { }, }); }; - const isSelected = color === value; + const isSelected = isEqual(color, value); return ( <MenuItem - key={name} + key={key} onSelect={handler} selected={isSelected} - prefix={<Point color={value} />} + prefix={<Point color={resolvedValue} />} > - {name} + {key} </MenuItem> ); }); - }, [editorSetting, settings]); + }, [editorSetting, settings, textColorPalettes]); const textColor = useMemo(() => { const { color } = settings.connector.labelStyle; - return getColorFromMap(color, StrokeColorMap); - }, [getColorFromMap, settings]); + return getCurrentTextColor(color); + }, [getCurrentTextColor, settings]); const getElements = useCallback((doc: Doc) => { const surface = getSurfaceBlock(doc); @@ -374,7 +382,7 @@ export const ConnectorSettings = () => { trigger={ <MenuTrigger className={menuTrigger} - prefix={<Point color={currentColor.value} />} + prefix={<Point color={currentColor.resolvedValue} />} > {currentColor.key} </MenuTrigger> @@ -479,7 +487,7 @@ export const ConnectorSettings = () => { trigger={ <MenuTrigger className={menuTrigger} - prefix={<Point color={textColor.value} />} + prefix={<Point color={textColor.resolvedValue} />} > {textColor.key} </MenuTrigger> diff --git a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/connector.json b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/connector.json index 6db2ee20fc7a2..9a3345a1e653e 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/connector.json +++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/connector.json @@ -34,7 +34,10 @@ "anchor": "center" }, "labelStyle": { - "color": "--affine-palette-line-black", + "color": { + "dark": "#ffffff", + "light": "#000000" + }, "fontSize": 16, "fontFamily": "blocksuite:surface:Inter", "fontWeight": "400", @@ -49,7 +52,7 @@ "source": { "position": [120.8515625, 146.44921875] }, - "stroke": "--affine-palette-line-grey", + "stroke": "#929292", "strokeStyle": "solid", "strokeWidth": 2, "target": { @@ -83,7 +86,7 @@ } ] }, - "background": "--affine-palette-transparent", + "background": "transparent", "xywh": "[-12.04296875,-49.66796875,542.9765625,248.3984375]", "index": "Zz", "childElementIds": { diff --git a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/flow.json b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/flow.json index 3fa0ed6783106..3ee3ce875654d 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/flow.json +++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/flow.json @@ -456,7 +456,7 @@ } ] }, - "background": "--affine-palette-transparent", + "background": "transparent", "xywh": "[-131.27862548828125,-112.8125,880.65234375,645.11328125]", "index": "aEV", "childElementIds": {} diff --git a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/mindmap.json b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/mindmap.json index 3733859bfad04..54190e214d300 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/mindmap.json +++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/mindmap.json @@ -60,8 +60,14 @@ "BvanBL7O38": { "index": "a0", "seed": 819595867, - "color": "--affine-black", - "fillColor": "--affine-white", + "color": { + "dark": "#ffffff", + "light": "#000000" + }, + "fillColor": { + "dark": "#000000", + "light": "#ffffff" + }, "filled": true, "fontFamily": "blocksuite:surface:Poppins", "fontSize": 20, @@ -79,7 +85,7 @@ }, "shapeStyle": "General", "shapeType": "rect", - "strokeColor": "#84CFFF", + "strokeColor": "#84cfff", "strokeStyle": "solid", "strokeWidth": 4, "text": { @@ -98,8 +104,14 @@ "QkmFfps45U": { "index": "a0", "seed": 557026939, - "color": "--affine-black", - "fillColor": "--affine-white", + "color": { + "dark": "#ffffff", + "light": "#000000" + }, + "fillColor": { + "dark": "#000000", + "light": "#ffffff" + }, "filled": true, "fontFamily": "blocksuite:surface:Poppins", "fontSize": 16, @@ -117,7 +129,7 @@ }, "shapeStyle": "General", "shapeType": "rect", - "strokeColor": "--affine-palette-line-purple", + "strokeColor": "#6e52df", "strokeStyle": "solid", "strokeWidth": 3, "text": { @@ -136,8 +148,14 @@ "1IN8YOdsCP": { "index": "a0", "seed": 205695803, - "color": "--affine-black", - "fillColor": "--affine-white", + "color": { + "dark": "#ffffff", + "light": "#000000" + }, + "fillColor": { + "dark": "#000000", + "light": "#ffffff" + }, "filled": true, "fontFamily": "blocksuite:surface:Poppins", "fontSize": 16, @@ -155,7 +173,7 @@ }, "shapeStyle": "General", "shapeType": "rect", - "strokeColor": "--affine-palette-line-magenta", + "strokeColor": "#e96cab", "strokeStyle": "solid", "strokeWidth": 3, "text": { @@ -174,8 +192,14 @@ "iFQ9oVR0KN": { "index": "a0", "seed": 585656351, - "color": "--affine-black", - "fillColor": "--affine-white", + "color": { + "dark": "#ffffff", + "light": "#000000" + }, + "fillColor": { + "dark": "#000000", + "light": "#ffffff" + }, "filled": true, "fontFamily": "blocksuite:surface:Poppins", "fontSize": 16, @@ -193,7 +217,7 @@ }, "shapeStyle": "General", "shapeType": "rect", - "strokeColor": "--affine-palette-line-orange", + "strokeColor": "#ffebd5", "strokeStyle": "solid", "strokeWidth": 3, "text": { @@ -226,7 +250,7 @@ } ] }, - "background": "--affine-palette-transparent", + "background": "transparent", "xywh": "[-542.4695816040039,-292.0061340332031,798.42578125,414.50390625]", "index": "Zz", "childElementIds": { diff --git a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/note.json b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/note.json index 179777cac76e5..627d720200463 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/note.json +++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/note.json @@ -45,7 +45,7 @@ } ] }, - "background": "--affine-palette-transparent", + "background": "transparent", "xywh": "[361.3046875,-9.600906372070312,803.04296875,291.26953125]", "index": "a0", "childElementIds": { @@ -63,7 +63,10 @@ "version": 1, "props": { "xywh": "[538.826171875,46.71159362792969,448,180]", - "background": "--affine-note-background-blue", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a3", "hidden": false, "displayMode": "edgeless", diff --git a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/pen.json b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/pen.json index e6dd477ce5aa7..eae539f47427d 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/pen.json +++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/pen.json @@ -33,8 +33,8 @@ "index": "aT", "seed": 930141788, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -61,8 +61,8 @@ "index": "aU", "seed": 1175065049, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -87,8 +87,8 @@ "index": "aV", "seed": 225475485, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -111,8 +111,8 @@ "index": "aW", "seed": 140962525, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -157,8 +157,8 @@ "index": "aX", "seed": 2003216140, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -228,8 +228,8 @@ "index": "aY", "seed": 1302768834, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -310,8 +310,8 @@ "index": "aZ", "seed": 2123783898, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -412,8 +412,8 @@ "index": "aa", "seed": 706133801, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -542,8 +542,8 @@ "index": "ab", "seed": 1404216526, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -661,8 +661,8 @@ "index": "ac", "seed": 1570152044, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -753,8 +753,8 @@ "index": "ad", "seed": 2117166361, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -837,8 +837,8 @@ "index": "ae", "seed": 1268192592, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -929,8 +929,8 @@ "index": "af", "seed": 2028387099, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -1056,8 +1056,8 @@ "index": "ag", "seed": 1730436869, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -1142,8 +1142,8 @@ "index": "ah", "seed": 377436171, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -1176,8 +1176,8 @@ "index": "ai", "seed": 778156917, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -1230,8 +1230,8 @@ "index": "aj", "seed": 1095606790, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -1266,8 +1266,8 @@ "index": "ak", "seed": 667632025, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -1333,8 +1333,8 @@ "index": "al", "seed": 1331977937, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -1420,8 +1420,8 @@ "index": "am", "seed": 368164521, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -1542,8 +1542,8 @@ "index": "an", "seed": 649801494, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -1679,8 +1679,8 @@ "index": "ao", "seed": 1487715532, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -1792,8 +1792,8 @@ "index": "ap", "seed": 781297555, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -1874,8 +1874,8 @@ "index": "aq", "seed": 950769071, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -1937,8 +1937,8 @@ "index": "ar", "seed": 1741156016, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -1963,8 +1963,8 @@ "index": "as", "seed": 1573145582, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -2027,8 +2027,8 @@ "index": "at", "seed": 94123324, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -2062,8 +2062,8 @@ "index": "au", "seed": 823278468, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -2101,8 +2101,8 @@ "index": "av", "seed": 48765550, "color": { - "light": "--affine-palette-line-black", - "dark": "--affine-palette-line-white" + "dark": "#ffffff", + "light": "#000000" }, "lineWidth": 4, "points": [ @@ -2148,7 +2148,7 @@ } ] }, - "background": "--affine-palette-transparent", + "background": "transparent", "xywh": "[-99.986,288.226,963.308,237.136]", "index": "a0", "childElementIds": { diff --git a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/shape.json b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/shape.json index 6a730acba3de0..388974ea2741b 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/shape.json +++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/shape.json @@ -32,8 +32,11 @@ "e6t9tKz8Sy": { "index": "a5", "seed": 338503204, - "color": "--affine-palette-line-black", - "fillColor": "--affine-palette-shape-yellow", + "color": { + "dark": "#ffffff", + "light": "#000000" + }, + "fillColor": "#fffbd5", "filled": true, "fontFamily": "blocksuite:surface:Inter", "fontSize": 12, @@ -45,7 +48,7 @@ "shadow": null, "shapeStyle": "General", "shapeType": "ellipse", - "strokeColor": "--affine-palette-line-yellow", + "strokeColor": "#fcd34d", "strokeStyle": "solid", "strokeWidth": 2, "textResizing": 1, @@ -56,8 +59,11 @@ "F8qB_zDC5Q": { "index": "a6", "seed": 1896265661, - "color": "--affine-palette-line-black", - "fillColor": "--affine-palette-shape-yellow", + "color": { + "dark": "#ffffff", + "light": "#000000" + }, + "fillColor": "#fffbd5", "filled": true, "fontFamily": "blocksuite:surface:Inter", "fontSize": 12, @@ -69,7 +75,7 @@ "shadow": null, "shapeStyle": "General", "shapeType": "rect", - "strokeColor": "--affine-palette-line-yellow", + "strokeColor": "#fcd34d", "strokeStyle": "solid", "strokeWidth": 2, "textResizing": 1, @@ -80,8 +86,11 @@ "mPR44JBpcd": { "index": "a7", "seed": 2073974140, - "color": "--affine-palette-line-black", - "fillColor": "--affine-palette-shape-yellow", + "color": { + "dark": "#ffffff", + "light": "#000000" + }, + "fillColor": "#fffbd5", "filled": true, "fontFamily": "blocksuite:surface:Inter", "fontSize": 12, @@ -93,7 +102,7 @@ "shadow": null, "shapeStyle": "General", "shapeType": "diamond", - "strokeColor": "--affine-palette-line-yellow", + "strokeColor": "#fcd34d", "strokeStyle": "solid", "strokeWidth": 2, "textResizing": 1, @@ -104,8 +113,11 @@ "cmtluc3FWR": { "index": "a8", "seed": 1457248130, - "color": "--affine-palette-line-black", - "fillColor": "--affine-palette-shape-yellow", + "color": { + "dark": "#ffffff", + "light": "#000000" + }, + "fillColor": "#fffbd5", "filled": true, "fontFamily": "blocksuite:surface:Inter", "fontSize": 12, @@ -117,7 +129,7 @@ "shadow": null, "shapeStyle": "General", "shapeType": "triangle", - "strokeColor": "--affine-palette-line-yellow", + "strokeColor": "#fcd34d", "strokeStyle": "solid", "strokeWidth": 2, "textResizing": 1, @@ -128,8 +140,11 @@ "knt_TKvACR": { "index": "a9", "seed": 1896265661, - "color": "--affine-palette-line-black", - "fillColor": "--affine-palette-shape-yellow", + "color": { + "dark": "#ffffff", + "light": "#000000" + }, + "fillColor": "#fffbd5", "filled": true, "fontFamily": "blocksuite:surface:Inter", "fontSize": 12, @@ -141,7 +156,7 @@ "shadow": null, "shapeStyle": "General", "shapeType": "rect", - "strokeColor": "--affine-palette-line-yellow", + "strokeColor": "#fcd34d", "strokeStyle": "solid", "strokeWidth": 2, "textResizing": 1, @@ -166,7 +181,7 @@ } ] }, - "background": "--affine-palette-transparent", + "background": "transparent", "xywh": "[-23.859796066464128,332.87664265400565,881.5090292421075,190.55181066780085]", "index": "a0" }, diff --git a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/text.json b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/text.json index 27ef65ba07b00..3de40b777526e 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/text.json +++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/text.json @@ -39,7 +39,7 @@ "props": { "xywh": "[18.221401559354234,201.98389611782602,800.6283921393511,489.15472412109375]", "index": "a0", - "color": "--affine-palette-line-blue", + "color": "#84cfff", "fontFamily": "blocksuite:surface:Inter", "fontStyle": "normal", "fontWeight": "400", @@ -101,7 +101,7 @@ } ] }, - "background": "--affine-palette-transparent", + "background": "transparent", "xywh": "[-21.778598440645766,126.5612581783729,880.6283921393511,640]", "index": "a1", "childElementIds": { diff --git a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/note.tsx b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/note.tsx index 3d3cf6da04e9f..5d483662320cc 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/note.tsx +++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/note.tsx @@ -10,19 +10,19 @@ import { EditorSettingService } from '@affine/core/modules/editor-setting'; import { useI18n } from '@affine/i18n'; import { createEnumMap, - NoteBackgroundColor, - NoteBackgroundColorMap, + DefaultTheme, NoteShadow, NoteShadowMap, StrokeStyle, } from '@blocksuite/affine/blocks'; import type { Doc } from '@blocksuite/affine/store'; import { useFramework, useLiveData } from '@toeverything/infra'; +import { isEqual } from 'lodash-es'; import { useCallback, useMemo } from 'react'; import { DropdownMenu } from '../menu'; import { menuTrigger, settingWrapper } from '../style.css'; -import { useColor } from '../utils'; +import { usePalettes } from '../utils'; import { Point } from './point'; import { EdgelessSnapshot } from './snapshot'; @@ -49,7 +49,10 @@ export const NoteSettings = () => { const framework = useFramework(); const { editorSetting } = framework.get(EditorSettingService); const settings = useLiveData(editorSetting.settings$); - const getColorFromMap = useColor(); + const { palettes, getCurrentColor } = usePalettes( + DefaultTheme.NoteBackgroundColorPalettes, + DefaultTheme.noteBackgrounColor + ); const borderStyleItems = useMemo<RadioItem[]>( () => [ @@ -102,23 +105,23 @@ export const NoteSettings = () => { const backgroundItems = useMemo(() => { const { background } = settings['affine:note']; - return Object.entries(NoteBackgroundColor).map(([name, value]) => { + return palettes.map(({ key, value, resolvedValue }) => { const handler = () => { editorSetting.set('affine:note', { background: value }); }; - const isSelected = background === value; + const isSelected = isEqual(background, value); return ( <MenuItem - key={name} + key={key} onSelect={handler} selected={isSelected} - prefix={<Point color={value} />} + prefix={<Point color={resolvedValue} />} > - {name} + {key} </MenuItem> ); }); - }, [editorSetting, settings]); + }, [editorSetting, settings, palettes]); const cornerItems = useMemo(() => { const { borderRadius } = settings['affine:note'].edgeless.style; @@ -164,8 +167,8 @@ export const NoteSettings = () => { const currentColor = useMemo(() => { const { background } = settings['affine:note']; - return getColorFromMap(background, NoteBackgroundColorMap); - }, [getColorFromMap, settings]); + return getCurrentColor(background); + }, [getCurrentColor, settings]); const getElements = useCallback((doc: Doc) => { return doc.getBlocksByFlavour('affine:note') || []; @@ -192,7 +195,7 @@ export const NoteSettings = () => { trigger={ <MenuTrigger className={menuTrigger} - prefix={<Point color={currentColor.value} />} + prefix={<Point color={currentColor.resolvedValue} />} > {currentColor.key} </MenuTrigger> diff --git a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/pen.tsx b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/pen.tsx index 724ce045963e8..26bed7789fefc 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/pen.tsx +++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/pen.tsx @@ -2,14 +2,15 @@ import { MenuItem, MenuTrigger, Slider } from '@affine/component'; import { SettingRow } from '@affine/component/setting-components'; import { EditorSettingService } from '@affine/core/modules/editor-setting'; import { useI18n } from '@affine/i18n'; -import { StrokeColor, StrokeColorMap } from '@blocksuite/affine/blocks'; +import { DefaultTheme } from '@blocksuite/affine/blocks'; import type { Doc } from '@blocksuite/affine/store'; import { useFramework, useLiveData } from '@toeverything/infra'; +import { isEqual } from 'lodash-es'; import { useCallback, useMemo } from 'react'; import { DropdownMenu } from '../menu'; import { menuTrigger } from '../style.css'; -import { useColor } from '../utils'; +import { usePalettes } from '../utils'; import { Point } from './point'; import { EdgelessSnapshot } from './snapshot'; import { getSurfaceBlock } from './utils'; @@ -19,31 +20,34 @@ export const PenSettings = () => { const framework = useFramework(); const { editorSetting } = framework.get(EditorSettingService); const settings = useLiveData(editorSetting.settings$); - const getColorFromMap = useColor(); + const { palettes, getCurrentColor } = usePalettes( + DefaultTheme.StrokeColorPalettes, + DefaultTheme.black + ); const currentColor = useMemo(() => { - return getColorFromMap(settings.brush.color, StrokeColorMap); - }, [getColorFromMap, settings.brush.color]); + return getCurrentColor(settings.brush.color); + }, [getCurrentColor, settings.brush.color]); const colorItems = useMemo(() => { const { color } = settings.brush; - return Object.entries(StrokeColor).map(([name, value]) => { + return palettes.map(({ key, value, resolvedValue }) => { const handler = () => { editorSetting.set('brush', { color: value }); }; - const isSelected = color === value; + const isSelected = isEqual(color, value); return ( <MenuItem - key={name} + key={key} onSelect={handler} selected={isSelected} - prefix={<Point color={value} />} + prefix={<Point color={resolvedValue} />} > - {name} + {key} </MenuItem> ); }); - }, [editorSetting, settings.brush]); + }, [editorSetting, settings.brush, palettes]); const borderThickness = settings.brush.lineWidth; const setBorderThickness = useCallback( @@ -78,7 +82,7 @@ export const PenSettings = () => { trigger={ <MenuTrigger className={menuTrigger} - prefix={<Point color={currentColor.value} />} + prefix={<Point color={currentColor.resolvedValue} />} > {currentColor.key} </MenuTrigger> diff --git a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/point.tsx b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/point.tsx index f1811b9514fea..4693413b4204f 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/point.tsx +++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/point.tsx @@ -13,7 +13,7 @@ export const Point = ({ width: size, height: size, borderRadius: '50%', - backgroundColor: `var(${color})`, + backgroundColor: color, border: `1px solid ${cssVarV2('layer/insideBorder/blackBorder')}`, }} ></div> diff --git a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/shape.tsx b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/shape.tsx index a0855e181bc14..7d0c8c5ef87c9 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/shape.tsx +++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/shape.tsx @@ -15,22 +15,20 @@ import type { ShapeName, } from '@blocksuite/affine/blocks'; import { - createEnumMap, + DefaultTheme, FontFamily, FontFamilyMap, FontStyle, FontWeightMap, getShapeName, - ShapeFillColor, ShapeStyle, ShapeType, - StrokeColor, - StrokeColorMap, StrokeStyle, TextAlign, } from '@blocksuite/affine/blocks'; import type { Doc } from '@blocksuite/affine/store'; import { useFramework, useLiveData } from '@toeverything/infra'; +import { isEqual } from 'lodash-es'; import { useCallback, useMemo, useState } from 'react'; import { DropdownMenu } from '../menu'; @@ -40,7 +38,7 @@ import { settingWrapper, shapeIndicator, } from '../style.css'; -import { sortedFontWeightEntries, useColor } from '../utils'; +import { sortedFontWeightEntries, usePalettes } from '../utils'; import type { DocName } from './docs'; import { Point } from './point'; import { EdgelessSnapshot } from './snapshot'; @@ -55,14 +53,20 @@ enum ShapeTextFontSize { '64px' = '64', } -const ShapeFillColorMap = createEnumMap(ShapeFillColor); - export const ShapeSettings = () => { const t = useI18n(); const framework = useFramework(); const { editorSetting } = framework.get(EditorSettingService); const settings = useLiveData(editorSetting.settings$); - const getColorFromMap = useColor(); + const { + palettes: strokeColorPalettes, + getCurrentColor: getCurrentStrokeColor, + } = usePalettes( + DefaultTheme.StrokeColorPalettes, + DefaultTheme.shapeStrokeColor + ); + const { palettes: fillColorPalettes, getCurrentColor: getCurrentFillColor } = + usePalettes(DefaultTheme.FillColorPalettes, DefaultTheme.shapeFillColor); const [currentShape, setCurrentShape] = useState<ShapeName>(ShapeType.Rect); @@ -206,43 +210,43 @@ export const ShapeSettings = () => { const fillColorItems = useMemo(() => { const { fillColor } = settings[`shape:${currentShape}`]; - return Object.entries(ShapeFillColor).map(([name, value]) => { + return fillColorPalettes.map(({ key, value, resolvedValue }) => { const handler = () => { editorSetting.set(`shape:${currentShape}`, { fillColor: value }); }; - const isSelected = fillColor === value; + const isSelected = isEqual(fillColor, value); return ( <MenuItem - key={name} + key={key} onSelect={handler} selected={isSelected} - prefix={<Point color={value} />} + prefix={<Point color={resolvedValue} />} > - {name} + {key} </MenuItem> ); }); - }, [editorSetting, settings, currentShape]); + }, [editorSetting, settings, currentShape, fillColorPalettes]); - const borderColorItems = useMemo(() => { + const strokeColorItems = useMemo(() => { const { strokeColor } = settings[`shape:${currentShape}`]; - return Object.entries(StrokeColor).map(([name, value]) => { + return strokeColorPalettes.map(({ key, value, resolvedValue }) => { const handler = () => { editorSetting.set(`shape:${currentShape}`, { strokeColor: value }); }; - const isSelected = strokeColor === value; + const isSelected = isEqual(strokeColor, value); return ( <MenuItem - key={name} + key={key} onSelect={handler} selected={isSelected} - prefix={<Point color={value} />} + prefix={<Point color={resolvedValue} />} > - {name} + {key} </MenuItem> ); }); - }, [editorSetting, settings, currentShape]); + }, [editorSetting, settings, currentShape, strokeColorPalettes]); const borderThickness = settings[`shape:${currentShape}`].strokeWidth; const setBorderThickness = useCallback( @@ -316,23 +320,23 @@ export const ShapeSettings = () => { const textColorItems = useMemo(() => { const { color } = settings[`shape:${currentShape}`]; - return Object.entries(StrokeColor).map(([name, value]) => { + return strokeColorPalettes.map(({ key, value, resolvedValue }) => { const handler = () => { editorSetting.set(`shape:${currentShape}`, { color: value }); }; const isSelected = color === value; return ( <MenuItem - key={name} + key={key} onSelect={handler} selected={isSelected} - prefix={<Point color={value} />} + prefix={<Point color={resolvedValue} />} > - {name} + {key} </MenuItem> ); }); - }, [editorSetting, settings, currentShape]); + }, [editorSetting, settings, currentShape, strokeColorPalettes]); const getElements = useCallback( (doc: Doc) => { @@ -370,18 +374,18 @@ export const ShapeSettings = () => { const fillColor = useMemo(() => { const color = settings[`shape:${currentShape}`].fillColor; - return getColorFromMap(color, ShapeFillColorMap); - }, [currentShape, getColorFromMap, settings]); + return getCurrentFillColor(color); + }, [currentShape, getCurrentFillColor, settings]); - const borderColor = useMemo(() => { + const strokeColor = useMemo(() => { const color = settings[`shape:${currentShape}`].strokeColor; - return getColorFromMap(color, StrokeColorMap); - }, [currentShape, getColorFromMap, settings]); + return getCurrentStrokeColor(color); + }, [currentShape, getCurrentStrokeColor, settings]); const textColor = useMemo(() => { const color = settings[`shape:${currentShape}`].color; - return getColorFromMap(color, StrokeColorMap); - }, [currentShape, getColorFromMap, settings]); + return getCurrentStrokeColor(color); + }, [currentShape, getCurrentStrokeColor, settings]); const height = currentDoc === 'flow' ? 456 : 180; return ( @@ -443,7 +447,7 @@ export const ShapeSettings = () => { trigger={ <MenuTrigger className={menuTrigger} - prefix={<Point color={fillColor.value} />} + prefix={<Point color={fillColor.resolvedValue} />} > {fillColor.key} </MenuTrigger> @@ -457,15 +461,15 @@ export const ShapeSettings = () => { ]()} desc={''} > - {borderColor ? ( + {strokeColor ? ( <DropdownMenu - items={borderColorItems} + items={strokeColorItems} trigger={ <MenuTrigger className={menuTrigger} - prefix={<Point color={borderColor.value} />} + prefix={<Point color={strokeColor.resolvedValue} />} > - {borderColor.key} + {strokeColor.key} </MenuTrigger> } /> @@ -513,7 +517,7 @@ export const ShapeSettings = () => { trigger={ <MenuTrigger className={menuTrigger} - prefix={<Point color={textColor.value} />} + prefix={<Point color={textColor.resolvedValue} />} > {textColor.key} </MenuTrigger> diff --git a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/text.tsx b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/text.tsx index 2c77ac117c7ae..25822454c4245 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/text.tsx +++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/text.tsx @@ -8,21 +8,21 @@ import { SettingRow } from '@affine/component/setting-components'; import { EditorSettingService } from '@affine/core/modules/editor-setting'; import { useI18n } from '@affine/i18n'; import { + DefaultTheme, FontFamily, FontFamilyMap, FontStyle, FontWeightMap, - StrokeColor, - StrokeColorMap, TextAlign, } from '@blocksuite/affine/blocks'; import type { Doc } from '@blocksuite/affine/store'; import { useFramework, useLiveData } from '@toeverything/infra'; +import { isEqual } from 'lodash-es'; import { useCallback, useMemo } from 'react'; import { DropdownMenu } from '../menu'; import { menuTrigger, settingWrapper } from '../style.css'; -import { sortedFontWeightEntries, useColor } from '../utils'; +import { sortedFontWeightEntries, usePalettes } from '../utils'; import { Point } from './point'; import { EdgelessSnapshot } from './snapshot'; @@ -31,7 +31,10 @@ export const TextSettings = () => { const framework = useFramework(); const { editorSetting } = framework.get(EditorSettingService); const settings = useLiveData(editorSetting.settings$); - const getColorFromMap = useColor(); + const { palettes, getCurrentColor } = usePalettes( + DefaultTheme.StrokeColorPalettes, + DefaultTheme.textColor + ); const alignItems = useMemo<RadioItem[]>( () => [ @@ -72,23 +75,23 @@ export const TextSettings = () => { const colorItems = useMemo(() => { const { color } = settings['affine:edgeless-text']; - return Object.entries(StrokeColor).map(([name, value]) => { + return palettes.map(({ key, value, resolvedValue }) => { const handler = () => { editorSetting.set('affine:edgeless-text', { color: value }); }; - const isSelected = color === value; + const isSelected = isEqual(color, value); return ( <MenuItem - key={name} + key={key} onSelect={handler} selected={isSelected} - prefix={<Point color={value} />} + prefix={<Point color={resolvedValue} />} > - {name} + {key} </MenuItem> ); }); - }, [editorSetting, settings]); + }, [editorSetting, settings, palettes]); const fontFamilyItems = useMemo(() => { const { fontFamily } = settings['affine:edgeless-text']; @@ -137,8 +140,8 @@ export const TextSettings = () => { const currentColor = useMemo(() => { const { color } = settings['affine:edgeless-text']; - return getColorFromMap(color, StrokeColorMap); - }, [getColorFromMap, settings]); + return getCurrentColor(color); + }, [getCurrentColor, settings]); const getElements = useCallback((doc: Doc) => { return doc.getBlocksByFlavour('affine:edgeless-text') || []; @@ -162,7 +165,7 @@ export const TextSettings = () => { trigger={ <MenuTrigger className={menuTrigger} - prefix={<Point color={currentColor.value} />} + prefix={<Point color={currentColor.resolvedValue} />} > {currentColor.key} </MenuTrigger> diff --git a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/utils.ts b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/utils.ts index 4f970ba9cfd68..3220031a8aae4 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/utils.ts +++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/utils.ts @@ -1,48 +1,48 @@ -import { FontWeight } from '@blocksuite/affine/blocks'; +import { + type Color, + ColorScheme, + FontWeight, + type Palette, + resolveColor, +} from '@blocksuite/affine/blocks'; +import { isEqual } from 'lodash-es'; import { useTheme } from 'next-themes'; -function getColorFromMap( - color: string | { normal: string } | { light: string; dark: string }, - colorMap: { [key: string]: string }, - theme: 'light' | 'dark' = 'light' -): - | { - value: string; - key: string; - } - | undefined { - if (typeof color === 'string') { - return { value: color, key: colorMap[color] }; - } +export const useResolvedTheme = () => { + const { resolvedTheme } = useTheme(); + return resolvedTheme === ColorScheme.Dark + ? ColorScheme.Dark + : ColorScheme.Light; +}; - if ('normal' in color) { - return { - value: color.normal, - key: colorMap[color.normal], - }; - } +export const usePalettes = ( + originalPalettes: Palette[], + defaultColor: Color +) => { + const theme = useResolvedTheme(); + const isDark = theme === ColorScheme.Dark; + const palettes = originalPalettes.map(({ key, value }) => { + // Title needs to be inverted. + if (isDark) { + if (key === 'Black') { + key = 'White'; + } else if (key === 'White') { + key = 'Black'; + } + } - if ('light' in color && 'dark' in color) { return { - value: color[theme], - key: colorMap[color[theme]], + key, + value, + resolvedValue: resolveColor(value, theme), }; - } - - return undefined; -} - -export const useColor = () => { - const { resolvedTheme } = useTheme(); - return ( - color: string | { normal: string } | { light: string; dark: string }, - colorMap: { [key: string]: string } - ) => - getColorFromMap( - color, - colorMap, - resolvedTheme as 'light' | 'dark' | undefined - ); + }); + return { + palettes, + getCurrentColor: (color: Color) => + palettes.find(({ value }) => isEqual(value, color)) || + palettes.find(({ value }) => isEqual(value, defaultColor)), + }; }; export const sortedFontWeightEntries = Object.entries(FontWeight).sort( diff --git a/yarn.lock b/yarn.lock index 769467c7b12ad..d9ffdaf9e2d1e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3738,6 +3738,7 @@ __metadata: "@types/dompurify": "npm:^3.0.5" "@types/hast": "npm:^3.0.4" "@types/katex": "npm:^0.16.7" + "@types/lodash.isequal": "npm:^4.5.8" "@types/mdast": "npm:^4.0.4" collapse-white-space: "npm:^2.1.0" date-fns: "npm:^4.0.0" @@ -3748,6 +3749,7 @@ __metadata: html2canvas: "npm:^1.4.1" katex: "npm:^0.16.11" lit: "npm:^3.2.0" + lodash.isequal: "npm:^4.5.0" lz-string: "npm:^1.5.0" mdast-util-gfm-autolink-literal: "npm:^2.0.1" mdast-util-gfm-strikethrough: "npm:^2.0.0" @@ -3845,6 +3847,7 @@ __metadata: "@blocksuite/global": "workspace:*" "@blocksuite/presets": "workspace:*" "@playwright/test": "npm:=1.49.1" + "@toeverything/theme": "npm:^1.1.3" languageName: unknown linkType: soft @@ -14557,6 +14560,15 @@ __metadata: languageName: node linkType: hard +"@types/lodash.isequal@npm:^4.5.8": + version: 4.5.8 + resolution: "@types/lodash.isequal@npm:4.5.8" + dependencies: + "@types/lodash": "npm:*" + checksum: 10/f3180c2d2925514fff1908a1303c11468c9f39b47fd7b053416aad3f1447f8e4a9894dd0460187ac9ac19387e25aec8dd8214d13a50a0967e0dc9cca8e4c5353 + languageName: node + linkType: hard + "@types/lodash.ismatch@npm:^4.4.9": version: 4.4.9 resolution: "@types/lodash.ismatch@npm:4.4.9"