From 82f96d4715695b1e484011a1e0c9a31d761a850c Mon Sep 17 00:00:00 2001
From: Fangdun Tsai <fundon@pindash.io>
Date: Mon, 23 Dec 2024 11:16:52 +0800
Subject: [PATCH] feat(editor): update edgeless color palette

---
 .../affine/block-attachment/package.json      |   2 +-
 blocksuite/affine/block-bookmark/package.json |   2 +-
 blocksuite/affine/block-embed/package.json    |   2 +-
 blocksuite/affine/block-frame/package.json    |   2 +-
 blocksuite/affine/block-image/package.json    |   2 +-
 blocksuite/affine/block-latex/package.json    |   2 +-
 blocksuite/affine/block-list/package.json     |   2 +-
 blocksuite/affine/block-note/package.json     |   2 +-
 .../affine/block-paragraph/package.json       |   2 +-
 blocksuite/affine/block-surface/package.json  |   2 +-
 blocksuite/affine/components/package.json     |   2 +-
 .../affine/components/src/icons/edgeless.ts   |  15 -
 blocksuite/affine/data-view/package.json      |   2 +-
 .../model/src/blocks/frame/frame-model.ts     |   2 +-
 blocksuite/affine/model/src/consts/brush.ts   |   4 +-
 blocksuite/affine/model/src/consts/color.ts   |  97 +++++
 .../affine/model/src/consts/connector.ts      |   6 +-
 blocksuite/affine/model/src/consts/frame.ts   |  28 +-
 blocksuite/affine/model/src/consts/index.ts   |   1 +
 blocksuite/affine/model/src/consts/line.ts    |  14 +
 blocksuite/affine/model/src/consts/note.ts    |  33 +-
 blocksuite/affine/model/src/consts/shape.ts   |  44 +--
 blocksuite/affine/model/src/consts/text.ts    |   4 +-
 blocksuite/affine/shared/package.json         |   2 +-
 .../affine/shared/src/theme/css-variables.ts  |   3 +-
 .../affine/shared/src/utils/zod-schema.ts     |  34 +-
 .../widget-scroll-anchoring/package.json      |   2 +-
 blocksuite/blocks/package.json                |   2 +-
 blocksuite/blocks/src/effects.ts              |   5 -
 .../components/color-picker/button.ts         |  34 +-
 .../components/color-picker/custom-button.ts  |  37 +-
 .../edgeless/components/panel/color-panel.ts  | 323 +++++++---------
 .../components/panel/line-width-panel.ts      | 345 ++++++------------
 .../components/panel/one-row-color-panel.ts   |  38 --
 .../components/panel/stroke-style-panel.ts    |   5 +-
 .../components/toolbar/brush/brush-menu.ts    |   7 +-
 .../toolbar/connector/connector-menu.ts       |   7 +-
 .../toolbar/shape/shape-menu-config.ts        |   3 -
 .../components/toolbar/shape/shape-menu.ts    |  37 +-
 .../components/toolbar/text/text-menu.ts      |   7 +-
 .../src/root-block/edgeless/utils/consts.ts   |  10 +-
 .../element-toolbar/change-brush-button.ts    |   4 +-
 .../change-connector-button.ts                |   5 +-
 .../element-toolbar/change-frame-button.ts    |   9 +-
 .../element-toolbar/change-note-button.ts     |   6 +-
 .../element-toolbar/change-shape-button.ts    |  11 +-
 .../element-toolbar/change-text-menu.ts       |   5 +-
 .../pie-menu/components/pie-node-content.ts   |   7 +-
 .../src/root-block/widgets/pie-menu/config.ts |   4 +-
 .../widgets/pie-menu/pie-builder.ts           |  15 +-
 blocksuite/presets/package.json               |   2 +-
 .../src/__tests__/edgeless/last-props.spec.ts |  19 +-
 .../__tests__/edgeless/surface-model.spec.ts  |  17 +-
 blocksuite/tests-legacy/attachment.spec.ts    |  20 +-
 .../tests-legacy/clipboard/list.spec.ts       |   6 +-
 .../edgeless/auto-complete.spec.ts            |  12 +-
 .../tests-legacy/edgeless/brush.spec.ts       |  11 +-
 .../edgeless/color-picker.spec.ts             |   6 +-
 .../edgeless/connector/connector.spec.ts      |   5 +-
 .../tests-legacy/edgeless/note/note.spec.ts   |   4 +-
 .../tests-legacy/edgeless/shape.spec.ts       |  11 +-
 blocksuite/tests-legacy/link.spec.ts          |   4 +-
 .../automatic-identify-url-text-final.json    |   2 +-
 .../basic.spec.ts/basic-test-default.json     |   2 +-
 ...opy-bookmark-url-by-copy-button-final.json |   2 +-
 ...reate-bookmark-in-edgeless-mode-final.json |   2 +-
 ...to-create-bookmark-in-page-mode-final.json |   2 +-
 ...ert-bookmark-block-to-link-text-final.json |   2 +-
 .../create-bookmark-by-slash-menu-final.json  |   2 +-
 .../bookmark.spec.ts/embed-figma.json         |   2 +-
 .../bookmark.spec.ts/embed-youtube.json       |   2 +-
 .../bookmark.spec.ts/horizontal-figma.json    |   2 +-
 .../bookmark.spec.ts/horizontal-youtube.json  |   2 +-
 ...rk-block-directly-after-add-paragraph.json |   4 +-
 ...ng-bookmark-block-directly-after-drag.json |   4 +-
 ...dragging-bookmark-block-directly-init.json |   4 +-
 .../auto-identify-url-final.json              |   2 +-
 ...-copy-will-reappear-content-after-cut.json |   2 +-
 ...opy-will-reappear-content-after-paste.json |   2 +-
 ...-block-except-type-text-after-paste-1.json |   2 +-
 ...-block-except-type-text-after-paste-2.json |   2 +-
 ...opy-menu-copy-whole-code-block-pasted.json |   2 +-
 ...menu-copy-the-empty-code-block-pasted.json |   2 +-
 .../delete-code-block-in-more-menu-final.json |   2 +-
 .../duplicate-code-block-final.json           |   2 +-
 .../format-text-in-code-block-format.json     |   2 +-
 .../format-text-in-code-block-init.json       |   2 +-
 .../format-text-in-code-block-link.json       |   2 +-
 ...own-syntax-can-create-code-block-init.json |   2 +-
 ...can-create-code-block-markdown-syntax.json |   2 +-
 ...level-in-multi-level-nesting-drag-3-4.json |   2 +-
 ...level-in-multi-level-nesting-drag-3-9.json |   2 +-
 ...level-in-multi-level-nesting-drag-4-3.json |   2 +-
 ...ach-level-in-multi-level-nesting-init.json |   2 +-
 ...ultiple-blocks-to-nested-block-finial.json |   4 +-
 ...-multiple-blocks-to-nested-block-init.json |   4 +-
 ...-limit-for-embed-block-add-linked-doc.json |   4 +-
 .../min-width-limit-for-embed-block-drag.json |   4 +-
 .../min-width-limit-for-embed-block-init.json |   4 +-
 ...or-embed-block-link-to-card-min-width.json |   4 +-
 ...th-limit-for-embed-block-link-to-card.json |   4 +-
 ...-line-when-edgeless-text-exist-finial.json |   4 +-
 ...e-when-edgeless-text-exist-note-empty.json |   4 +-
 ...en-edgeless-text-exist-note-not-empty.json |   4 +-
 ...-from-block-selection-with-format-bar.json |   2 +-
 ...change-background-color-default-color.json |   2 +-
 ...-able-to-change-background-color-init.json |   2 +-
 ...to-change-background-color-select-all.json |   2 +-
 ...ge-to-heading-paragraph-type-bulleted.json |   2 +-
 ...ange-to-heading-paragraph-type-finial.json |   2 +-
 ...change-to-heading-paragraph-type-init.json |   2 +-
 ...ick-bar-be-able-to-format-text-finial.json |   2 +-
 ...quick-bar-be-able-to-format-text-init.json |   2 +-
 ...text-when-select-multiple-line-finial.json |   2 +-
 ...t-text-when-select-multiple-line-init.json |   2 +-
 ...quick-bar-be-able-to-link-text-finial.json |   2 +-
 ...t-quick-bar-be-able-to-link-text-init.json |   2 +-
 ...-bar-show-after-convert-to-code-block.json |   2 +-
 ...on-works-when-update-block-type-final.json |   2 +-
 ...ion-works-when-update-block-type-init.json |   2 +-
 ...-bar-work-in-multiple-block-selection.json |   2 +-
 ...ck-bar-work-in-single-block-selection.json |   2 +-
 ...ted-after-setting-heading-by-shortkey.json |   2 +-
 ...ine-rich-text-inline-code-hotkey-init.json |   2 +-
 ...ine-rich-text-inline-code-hotkey-redo.json |   2 +-
 ...ine-rich-text-inline-code-hotkey-undo.json |   2 +-
 .../should-cut-work-multiple-line-init.json   |   2 +-
 .../should-cut-work-multiple-line-undo.json   |   2 +-
 .../should-cut-work-single-line-init.json     |   2 +-
 .../should-cut-work-single-line-undo.json     |   2 +-
 .../should-hotkey-work-in-paragraph-init.json |   2 +-
 ...ould-hotkey-work-in-paragraph-press-0.json |   2 +-
 ...ould-hotkey-work-in-paragraph-press-6.json |   2 +-
 ...ould-hotkey-work-in-paragraph-press-8.json |   2 +-
 ...ould-hotkey-work-in-paragraph-press-9.json |   2 +-
 ...ould-hotkey-work-in-paragraph-press-d.json |   2 +-
 ...ltiple-line-format-hotkey-work-finial.json |   2 +-
 ...multiple-line-format-hotkey-work-init.json |   2 +-
 ...single-line-format-hotkey-work-finial.json |   2 +-
 ...d-single-line-format-hotkey-work-init.json |   2 +-
 ...formatted-cursor-with-hotkey-bold-ggg.json |   2 +-
 ...formatted-cursor-with-hotkey-bold-hhh.json |   2 +-
 ...use-formatted-cursor-with-hotkey-bold.json |   2 +-
 ...use-formatted-cursor-with-hotkey-init.json |   2 +-
 ...ket-complete-with-backtick-works-undo.json |   2 +-
 ...-bracket-complete-with-backtick-works.json |   2 +-
 ...ted-after-setting-heading-by-shortkey.json |   2 +-
 .../should-cut-work-single-line-init.json     |   2 +-
 .../should-cut-work-single-line-undo.json     |   2 +-
 .../should-hotkey-work-in-paragraph-init.json |   2 +-
 ...ould-hotkey-work-in-paragraph-press-0.json |   2 +-
 ...ould-hotkey-work-in-paragraph-press-6.json |   2 +-
 ...ould-hotkey-work-in-paragraph-press-8.json |   2 +-
 ...ould-hotkey-work-in-paragraph-press-9.json |   2 +-
 ...ould-hotkey-work-in-paragraph-press-d.json |   2 +-
 ...single-line-format-hotkey-work-finial.json |   2 +-
 ...d-single-line-format-hotkey-work-init.json |   2 +-
 .../type-character-jump-out-code-node-1.json  |   2 +-
 .../type-character-jump-out-code-node-2.json  |   2 +-
 ...cursor-with-hotkey-at-empty-line-bold.json |   2 +-
 ...formatted-cursor-with-hotkey-bold-ggg.json |   2 +-
 ...formatted-cursor-with-hotkey-bold-hhh.json |   2 +-
 ...use-formatted-cursor-with-hotkey-bold.json |   2 +-
 ...use-formatted-cursor-with-hotkey-init.json |   2 +-
 ...ine-rich-text-inline-code-hotkey-init.json |   2 +-
 ...ine-rich-text-inline-code-hotkey-redo.json |   2 +-
 ...ine-rich-text-inline-code-hotkey-undo.json |   2 +-
 .../should-cut-work-multiple-line-init.json   |   2 +-
 .../should-cut-work-multiple-line-undo.json   |   2 +-
 ...ltiple-line-format-hotkey-work-finial.json |   2 +-
 ...multiple-line-format-hotkey-work-init.json |   2 +-
 ...g-markdown-shortcut-with-enter-finial.json |   2 +-
 ...ing-markdown-shortcut-with-enter-init.json |   2 +-
 ...g-markdown-shortcut-with-space-finial.json |   2 +-
 ...ing-markdown-shortcut-with-space-init.json |   2 +-
 ...d-latex-block-using-slash-menu-finial.json |   2 +-
 ...add-latex-block-using-slash-menu-init.json |   2 +-
 .../snapshots/link.spec.ts/basic-link.json    |   2 +-
 .../link.spec.ts/convert-link-to-card.json    |   2 +-
 ...can-create-linked-page-and-jump-final.json |   2 +-
 .../can-create-linked-page-and-jump-init.json |   2 +-
 ...nked-page-should-paste-as-linked-page.json |   2 +-
 ...nked-page-should-paste-as-linked-page.json |   2 +-
 ...uld-create-and-switch-page-work-final.json |   2 +-
 ...ould-create-and-switch-page-work-init.json |   2 +-
 ...c-indent-and-unindent-after-shift-tab.json |   2 +-
 .../basic-indent-and-unindent-after-tab.json  |   2 +-
 .../basic-indent-and-unindent-init.json       |   2 +-
 ...ggle-in-readonly-mode-before-readonly.json |   2 +-
 ...oggle-icon-should-collapsed-list-init.json |   2 +-
 ...gle-icon-should-collapsed-list-toggle.json |   2 +-
 ...onvert-nested-paragraph-to-list-final.json |   2 +-
 ...convert-nested-paragraph-to-list-init.json |   2 +-
 .../enter-list-block-with-empty-text-1.json   |   2 +-
 .../enter-list-block-with-empty-text-2.json   |   2 +-
 .../enter-list-block-with-empty-text-3.json   |   2 +-
 .../enter-list-block-with-empty-text-4.json   |   2 +-
 .../enter-list-block-with-empty-text-5.json   |   2 +-
 ...enter-list-block-with-empty-text-init.json |   2 +-
 ...dent-item-should-expand-toggle-finial.json |   2 +-
 ...indent-item-should-expand-toggle-init.json |   2 +-
 ...dent-item-should-expand-toggle-toggle.json |   2 +-
 .../nested-list-blocks-finial.json            |   2 +-
 .../list.spec.ts/nested-list-blocks-init.json |   2 +-
 ...todo-block-preserve-todo-status-final.json |   2 +-
 ...-todo-block-preserve-todo-status-init.json |   2 +-
 ...ks-when-following-custom-blocks-final.json |   2 +-
 ...cks-when-following-custom-blocks-init.json |   2 +-
 ...in-line-start-after-press-backspace-2.json |   2 +-
 ...in-line-start-after-press-backspace-3.json |   2 +-
 ...e-in-line-start-after-press-backspace.json |   2 +-
 ...-indent-and-delete-in-line-start-init.json |   2 +-
 ...hild-block-should-work-at-enter-final.json |   2 +-
 ...child-block-should-work-at-enter-init.json |   2 +-
 ...hold-cursor-in-correct-position-final.json |   2 +-
 ...-hold-cursor-in-correct-position-init.json |   2 +-
 ...unindent-works-with-children-indent-2.json |   2 +-
 ...unindent-works-with-children-indent-3.json |   2 +-
 ...unindent-works-with-children-indent-4.json |   2 +-
 ...d-unindent-works-with-children-indent.json |   2 +-
 ...and-unindent-works-with-children-init.json |   2 +-
 ...indent-works-with-children-unindent-1.json |   2 +-
 ...indent-works-with-children-unindent-2.json |   2 +-
 ...indent-works-with-children-unindent-3.json |   2 +-
 ...or-should-insert-a-new-editable-block.json |   2 +-
 .../should-indent-multi-selection-block.json  |   2 +-
 ...selected-blocks-when-entering-tab-key.json |   2 +-
 ...-unindent-multi-selection-block-final.json |   2 +-
 ...d-unindent-multi-selection-block-init.json |   2 +-
 ...multi-selection-block-after-shift-tab.json |   2 +-
 ...ative-multi-selection-block-after-tab.json |   2 +-
 ...ge-delete-with-indent-after-backspace.json |   2 +-
 ...e-range-delete-with-indent-after-redo.json |   2 +-
 ...e-range-delete-with-indent-after-undo.json |   2 +-
 .../native-range-delete-with-indent-init.json |   2 +-
 ...ative-multi-selection-block-after-tab.json |  92 +++++
 ...-by-slash-menu-should-remove-children.json |   2 +-
 .../tests-legacy/utils/actions/edgeless.ts    |  21 +-
 blocksuite/tests-legacy/utils/asserts.ts      |   3 +-
 packages/frontend/component/package.json      |   2 +-
 packages/frontend/core/package.json           |   2 +-
 .../editor/edgeless/connector.tsx             |  12 +-
 .../general-setting/editor/edgeless/pen.tsx   |   6 +-
 .../general-setting/editor/edgeless/shape.tsx |  12 +-
 .../general-setting/editor/edgeless/text.tsx  |   8 +-
 yarn.lock                                     |  44 +--
 246 files changed, 963 insertions(+), 969 deletions(-)
 create mode 100644 blocksuite/affine/model/src/consts/color.ts
 delete mode 100644 blocksuite/blocks/src/root-block/edgeless/components/panel/one-row-color-panel.ts
 create mode 100644 blocksuite/tests-legacy/snapshots/selection/native.spec.ts/should-unindent-native-multi-selection-block-after-tab.json

diff --git a/blocksuite/affine/block-attachment/package.json b/blocksuite/affine/block-attachment/package.json
index a4a3a4271187f..fecfd3350735a 100644
--- a/blocksuite/affine/block-attachment/package.json
+++ b/blocksuite/affine/block-attachment/package.json
@@ -26,7 +26,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "file-type": "^19.5.0",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
diff --git a/blocksuite/affine/block-bookmark/package.json b/blocksuite/affine/block-bookmark/package.json
index c851131809388..b902a181dc391 100644
--- a/blocksuite/affine/block-bookmark/package.json
+++ b/blocksuite/affine/block-bookmark/package.json
@@ -25,7 +25,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
     "zod": "^3.23.8"
diff --git a/blocksuite/affine/block-embed/package.json b/blocksuite/affine/block-embed/package.json
index f68bc94507f3e..e2e2e15d752ae 100644
--- a/blocksuite/affine/block-embed/package.json
+++ b/blocksuite/affine/block-embed/package.json
@@ -25,7 +25,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
     "zod": "^3.23.8"
diff --git a/blocksuite/affine/block-frame/package.json b/blocksuite/affine/block-frame/package.json
index 5bdbf383af8fe..8d0bc17de6b43 100644
--- a/blocksuite/affine/block-frame/package.json
+++ b/blocksuite/affine/block-frame/package.json
@@ -23,7 +23,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
diff --git a/blocksuite/affine/block-image/package.json b/blocksuite/affine/block-image/package.json
index 5961f76bc4be7..11a093a40086d 100644
--- a/blocksuite/affine/block-image/package.json
+++ b/blocksuite/affine/block-image/package.json
@@ -24,7 +24,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "file-type": "^19.5.0",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
diff --git a/blocksuite/affine/block-latex/package.json b/blocksuite/affine/block-latex/package.json
index e4eaf5bc9d23b..dc4181890bafb 100644
--- a/blocksuite/affine/block-latex/package.json
+++ b/blocksuite/affine/block-latex/package.json
@@ -24,7 +24,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "@types/katex": "^0.16.7",
     "@types/mdast": "^4.0.4",
     "katex": "^0.16.11",
diff --git a/blocksuite/affine/block-list/package.json b/blocksuite/affine/block-list/package.json
index a74235e60e4ce..5110a9d1c4599 100644
--- a/blocksuite/affine/block-list/package.json
+++ b/blocksuite/affine/block-list/package.json
@@ -23,7 +23,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
diff --git a/blocksuite/affine/block-note/package.json b/blocksuite/affine/block-note/package.json
index 707f46576b697..36395857b5423 100644
--- a/blocksuite/affine/block-note/package.json
+++ b/blocksuite/affine/block-note/package.json
@@ -26,7 +26,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
     "zod": "^3.23.8"
diff --git a/blocksuite/affine/block-paragraph/package.json b/blocksuite/affine/block-paragraph/package.json
index 5f017119ca91d..594421d1b7fe9 100644
--- a/blocksuite/affine/block-paragraph/package.json
+++ b/blocksuite/affine/block-paragraph/package.json
@@ -23,7 +23,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
diff --git a/blocksuite/affine/block-surface/package.json b/blocksuite/affine/block-surface/package.json
index 7ef1baabb2a20..c2a2688cc6e1e 100644
--- a/blocksuite/affine/block-surface/package.json
+++ b/blocksuite/affine/block-surface/package.json
@@ -22,7 +22,7 @@
     "@blocksuite/store": "workspace:*",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "fractional-indexing": "^3.2.0",
     "lit": "^3.2.0",
     "lodash.chunk": "^4.2.0",
diff --git a/blocksuite/affine/components/package.json b/blocksuite/affine/components/package.json
index b9f54a00de226..026a747a83b18 100644
--- a/blocksuite/affine/components/package.json
+++ b/blocksuite/affine/components/package.json
@@ -24,7 +24,7 @@
     "@lit/context": "^1.1.2",
     "@lottiefiles/dotlottie-wc": "^0.4.0",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "date-fns": "^4.0.0",
     "katex": "^0.16.11",
     "lit": "^3.2.0",
diff --git a/blocksuite/affine/components/src/icons/edgeless.ts b/blocksuite/affine/components/src/icons/edgeless.ts
index d881a2ac6afa9..ec00b1991fdad 100644
--- a/blocksuite/affine/components/src/icons/edgeless.ts
+++ b/blocksuite/affine/components/src/icons/edgeless.ts
@@ -427,21 +427,6 @@ export const ViewBarIcon = icons.ViewBarIcon({
   height: '24',
 });
 
-export const TransparentIcon = html`<svg
-  width="16"
-  height="16"
-  viewBox="0 0 16 16"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M-0.939238 4.14286C-0.979281 4.4228 -1 4.70898 -1 5V6.71429H1.57143V9.28571H-1V11C-1 11.291 -0.979281 11.5772 -0.939238 11.8571H1.57143V14.4286H0.0754482C0.481795 15.0111 0.988871 15.5182 1.57143 15.9246V14.4286L4.14286 14.4286V16.9392C4.4228 16.9793 4.70898 17 5 17H6.71429V14.4286H9.28571V17H11C11.291 17 11.5772 16.9793 11.8571 16.9392V14.4286H14.4286L14.4286 15.9246C15.0111 15.5182 15.5182 15.0111 15.9246 14.4286L14.4286 14.4286V11.8571H16.9392C16.9793 11.5772 17 11.291 17 11V9.28571H14.4286V6.71429H17V5C17 4.70898 16.9793 4.4228 16.9392 4.14286H14.4286V1.57143H15.9246C15.5182 0.988871 15.0111 0.481795 14.4286 0.075448L14.4286 1.57143H11.8571V-0.939238C11.5772 -0.979281 11.291 -1 11 -1H9.28571V1.57143H6.71429V-1H5C4.70898 -1 4.4228 -0.979281 4.14286 -0.939238V1.57143H1.57143V0.0754479C0.988871 0.481795 0.481795 0.988871 0.0754479 1.57143H1.57143V4.14286H-0.939238ZM4.14286 4.14286V1.57143H6.71429V4.14286H4.14286ZM4.14286 6.71429H1.57143V4.14286H4.14286V6.71429ZM6.71429 6.71429V4.14286H9.28571V6.71429H6.71429ZM6.71429 9.28571V6.71429H4.14286V9.28571H1.57143V11.8571H4.14286V14.4286H6.71429V11.8571H9.28571V14.4286H11.8571V11.8571H14.4286V9.28571H11.8571V6.71429H14.4286V4.14286H11.8571V1.57143H9.28571V4.14286H11.8571V6.71429H9.28571V9.28571H6.71429ZM6.71429 9.28571V11.8571H4.14286V9.28571H6.71429ZM9.28571 9.28571H11.8571V11.8571H9.28571V9.28571Z"
-    fill="#D9D9D9"
-  />
-</svg>`;
-
 export const MoreHorizontalIcon = icons.MoreHorizontalIcon({
   width: '24',
   height: '24',
diff --git a/blocksuite/affine/data-view/package.json b/blocksuite/affine/data-view/package.json
index a7aaa480d660b..caee0109105fe 100644
--- a/blocksuite/affine/data-view/package.json
+++ b/blocksuite/affine/data-view/package.json
@@ -23,7 +23,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "date-fns": "^4.0.0",
     "lit": "^3.2.0",
     "zod": "^3.23.8"
diff --git a/blocksuite/affine/model/src/blocks/frame/frame-model.ts b/blocksuite/affine/model/src/blocks/frame/frame-model.ts
index 9a53be18aae5d..29b8c524c73fb 100644
--- a/blocksuite/affine/model/src/blocks/frame/frame-model.ts
+++ b/blocksuite/affine/model/src/blocks/frame/frame-model.ts
@@ -30,7 +30,7 @@ export const FrameBlockSchema = defineBlockSchema({
   flavour: 'affine:frame',
   props: (internal): FrameBlockProps => ({
     title: internal.Text(),
-    background: '--affine-palette-transparent',
+    background: 'transparent',
     xywh: `[0,0,100,100]`,
     index: 'a0',
     childElementIds: Object.create(null),
diff --git a/blocksuite/affine/model/src/consts/brush.ts b/blocksuite/affine/model/src/consts/brush.ts
index cdbfc9a505acc..209d66e30e926 100644
--- a/blocksuite/affine/model/src/consts/brush.ts
+++ b/blocksuite/affine/model/src/consts/brush.ts
@@ -1,3 +1,3 @@
-import { LineColor } from './line.js';
+import { StrokeColor } from './color.js';
 
-export const DEFAULT_BRUSH_COLOR = LineColor.Blue;
+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
new file mode 100644
index 0000000000000..c708ca11372a5
--- /dev/null
+++ b/blocksuite/affine/model/src/consts/color.ts
@@ -0,0 +1,97 @@
+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 4222f985746b5..97b35b7808ce5 100644
--- a/blocksuite/affine/model/src/consts/connector.ts
+++ b/blocksuite/affine/model/src/consts/connector.ts
@@ -1,5 +1,5 @@
 import { createEnumMap } from '../utils/enum.js';
-import { LineColor } from './line.js';
+import { StrokeColor } from './color.js';
 
 export enum ConnectorEndpoint {
   Front = 'Front',
@@ -16,9 +16,9 @@ export enum PointStyle {
 
 export const PointStyleMap = createEnumMap(PointStyle);
 
-export const DEFAULT_CONNECTOR_COLOR = LineColor.Grey;
+export const DEFAULT_CONNECTOR_COLOR = StrokeColor.Grey;
 
-export const DEFAULT_CONNECTOR_TEXT_COLOR = LineColor.Black;
+export const DEFAULT_CONNECTOR_TEXT_COLOR = StrokeColor.Black;
 
 export const DEFAULT_FRONT_END_POINT_STYLE = PointStyle.None;
 
diff --git a/blocksuite/affine/model/src/consts/frame.ts b/blocksuite/affine/model/src/consts/frame.ts
index 15c98574c3cfd..fd5d90841847e 100644
--- a/blocksuite/affine/model/src/consts/frame.ts
+++ b/blocksuite/affine/model/src/consts/frame.ts
@@ -1,27 +1,3 @@
-import { z } from 'zod';
+import { Light } from './color.js';
 
-export enum FrameBackgroundColor {
-  Blue = '--affine-tag-blue',
-  Gray = '--affine-tag-gray',
-  Green = '--affine-tag-green',
-  Orange = '--affine-tag-orange',
-  Pink = '--affine-tag-pink',
-  Purple = '--affine-tag-purple',
-  Red = '--affine-tag-red',
-  Teal = '--affine-tag-teal',
-  Yellow = '--affine-tag-yellow',
-}
-
-export const FRAME_BACKGROUND_COLORS = [
-  FrameBackgroundColor.Gray,
-  FrameBackgroundColor.Red,
-  FrameBackgroundColor.Orange,
-  FrameBackgroundColor.Yellow,
-  FrameBackgroundColor.Green,
-  FrameBackgroundColor.Teal,
-  FrameBackgroundColor.Blue,
-  FrameBackgroundColor.Purple,
-  FrameBackgroundColor.Pink,
-];
-
-export const FrameBackgroundColorsSchema = z.nativeEnum(FrameBackgroundColor);
+export const FrameBackgroundColor = Light;
diff --git a/blocksuite/affine/model/src/consts/index.ts b/blocksuite/affine/model/src/consts/index.ts
index bde0ac46d0ba9..93e513a73124f 100644
--- a/blocksuite/affine/model/src/consts/index.ts
+++ b/blocksuite/affine/model/src/consts/index.ts
@@ -1,4 +1,5 @@
 export * from './brush.js';
+export * from './color.js';
 export * from './connector.js';
 export * from './doc.js';
 export * from './frame.js';
diff --git a/blocksuite/affine/model/src/consts/line.ts b/blocksuite/affine/model/src/consts/line.ts
index 83ff57c90232f..0b246849cd1ee 100644
--- a/blocksuite/affine/model/src/consts/line.ts
+++ b/blocksuite/affine/model/src/consts/line.ts
@@ -13,6 +13,20 @@ export enum LineWidth {
   Two = 2,
 }
 
+export const LINE_WIDTHS = [
+  LineWidth.Two,
+  LineWidth.Four,
+  LineWidth.Six,
+  LineWidth.Eight,
+  LineWidth.Ten,
+  LineWidth.Twelve,
+];
+
+/**
+ * Use `StrokeColor` instead.
+ *
+ * @deprecated
+ */
 export enum LineColor {
   Black = '--affine-palette-line-black',
   Blue = '--affine-palette-line-blue',
diff --git a/blocksuite/affine/model/src/consts/note.ts b/blocksuite/affine/model/src/consts/note.ts
index 7046999f9982d..b203e37bfc6ed 100644
--- a/blocksuite/affine/model/src/consts/note.ts
+++ b/blocksuite/affine/model/src/consts/note.ts
@@ -1,3 +1,4 @@
+import { themeToVar } from '@toeverything/theme/v2';
 import { z } from 'zod';
 
 import { createEnumMap } from '../utils/enum.js';
@@ -8,23 +9,23 @@ export const NOTE_MIN_HEIGHT = 92;
 export const DEFAULT_NOTE_WIDTH = NOTE_MIN_WIDTH;
 export const DEFAULT_NOTE_HEIGHT = NOTE_MIN_HEIGHT;
 
-export enum NoteBackgroundColor {
-  Black = '--affine-note-background-black',
-  Blue = '--affine-note-background-blue',
-  Green = '--affine-note-background-green',
-  Grey = '--affine-note-background-grey',
-  Magenta = '--affine-note-background-magenta',
-  Orange = '--affine-note-background-orange',
-  Purple = '--affine-note-background-purple',
-  Red = '--affine-note-background-red',
-  Teal = '--affine-note-background-teal',
-  White = '--affine-note-background-white',
-  Yellow = '--affine-note-background-yellow',
-}
+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_COLORS = [
+export const NOTE_BACKGROUND_PALETTES = [
   NoteBackgroundColor.Yellow,
   NoteBackgroundColor.Orange,
   NoteBackgroundColor.Red,
@@ -38,9 +39,9 @@ export const NOTE_BACKGROUND_COLORS = [
   NoteBackgroundColor.White,
 ] as const;
 
-export const DEFAULT_NOTE_BACKGROUND_COLOR = NoteBackgroundColor.White;
+export const NoteBackgroundPaletteEnum = z.enum(NOTE_BACKGROUND_PALETTES);
 
-export const NoteBackgroundColorsSchema = z.nativeEnum(NoteBackgroundColor);
+export const DEFAULT_NOTE_BACKGROUND_COLOR = NoteBackgroundColor.White;
 
 export enum NoteShadow {
   Box = '--affine-note-shadow-box',
diff --git a/blocksuite/affine/model/src/consts/shape.ts b/blocksuite/affine/model/src/consts/shape.ts
index 5ffb459671383..427bdad8263d7 100644
--- a/blocksuite/affine/model/src/consts/shape.ts
+++ b/blocksuite/affine/model/src/consts/shape.ts
@@ -1,6 +1,4 @@
-import { z } from 'zod';
-
-import { LINE_COLORS, LineColor } from './line.js';
+import { Black, Light, LIGHT_PALETTES, StrokeColor, White } from './color.js';
 
 export const DEFAULT_ROUGHNESS = 1.4;
 
@@ -49,42 +47,12 @@ export enum ShapeStyle {
   Scribbled = 'Scribbled',
 }
 
-export enum ShapeFillColor {
-  Black = '--affine-palette-shape-black',
-  Blue = '--affine-palette-shape-blue',
-  Green = '--affine-palette-shape-green',
-  Grey = '--affine-palette-shape-grey',
-  Magenta = '--affine-palette-shape-magenta',
-  Orange = '--affine-palette-shape-orange',
-  Purple = '--affine-palette-shape-purple',
-  Red = '--affine-palette-shape-red',
-  Teal = '--affine-palette-shape-teal',
-  White = '--affine-palette-shape-white',
-  Yellow = '--affine-palette-shape-yellow',
-}
-
-export const SHAPE_FILL_COLORS = [
-  ShapeFillColor.Yellow,
-  ShapeFillColor.Orange,
-  ShapeFillColor.Red,
-  ShapeFillColor.Magenta,
-  ShapeFillColor.Purple,
-  ShapeFillColor.Blue,
-  ShapeFillColor.Teal,
-  ShapeFillColor.Green,
-  ShapeFillColor.Black,
-  ShapeFillColor.Grey,
-  ShapeFillColor.White,
-] as const;
-
-export const DEFAULT_SHAPE_FILL_COLOR = ShapeFillColor.Yellow;
-
-export const FillColorsSchema = z.nativeEnum(ShapeFillColor);
+export const ShapeFillColor = { Black, White, ...Light } as const;
 
-export const SHAPE_STROKE_COLORS = LINE_COLORS;
+export const SHAPE_FILL_COLORS = [...LIGHT_PALETTES, Black, White];
 
-export const DEFAULT_SHAPE_STROKE_COLOR = LineColor.Yellow;
+export const DEFAULT_SHAPE_FILL_COLOR = Light.Yellow;
 
-export const DEFAULT_SHAPE_TEXT_COLOR = LineColor.Black;
+export const DEFAULT_SHAPE_STROKE_COLOR = StrokeColor.Yellow;
 
-export const StrokeColorsSchema = z.nativeEnum(LineColor);
+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 83ca28c327c49..3f9887621ef23 100644
--- a/blocksuite/affine/model/src/consts/text.ts
+++ b/blocksuite/affine/model/src/consts/text.ts
@@ -1,5 +1,5 @@
 import { createEnumMap } from '../utils/enum.js';
-import { LineColor } from './line.js';
+import { StrokeColor } from './color.js';
 
 export enum ColorScheme {
   Dark = 'dark',
@@ -67,4 +67,4 @@ export enum TextResizing {
   AUTO_HEIGHT,
 }
 
-export const DEFAULT_TEXT_COLOR = LineColor.Blue;
+export const DEFAULT_TEXT_COLOR = StrokeColor.Blue;
diff --git a/blocksuite/affine/shared/package.json b/blocksuite/affine/shared/package.json
index 749887291ae6b..d8bd08526ab38 100644
--- a/blocksuite/affine/shared/package.json
+++ b/blocksuite/affine/shared/package.json
@@ -22,7 +22,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "@types/hast": "^3.0.4",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
diff --git a/blocksuite/affine/shared/src/theme/css-variables.ts b/blocksuite/affine/shared/src/theme/css-variables.ts
index c8f417fc41639..e609ef0fc0077 100644
--- a/blocksuite/affine/shared/src/theme/css-variables.ts
+++ b/blocksuite/affine/shared/src/theme/css-variables.ts
@@ -1,6 +1,6 @@
 /* CSS variables. You need to handle all places where `CSS variables` are marked. */
 
-import { LINE_COLORS, SHAPE_FILL_COLORS } from '@blocksuite/affine-model';
+import { LINE_COLORS } from '@blocksuite/affine-model';
 import {
   type AffineCssVariables,
   type AffineTheme,
@@ -66,7 +66,6 @@ export const ColorVariables = [
   '--affine-tag-orange',
   '--affine-tag-gray',
   ...LINE_COLORS,
-  ...SHAPE_FILL_COLORS,
   '--affine-tooltip',
   '--affine-blue',
 ];
diff --git a/blocksuite/affine/shared/src/utils/zod-schema.ts b/blocksuite/affine/shared/src/utils/zod-schema.ts
index 95be5b7d0ec55..ef8ce0d68bdf3 100644
--- a/blocksuite/affine/shared/src/utils/zod-schema.ts
+++ b/blocksuite/affine/shared/src/utils/zod-schema.ts
@@ -14,22 +14,20 @@ import {
   DEFAULT_SHAPE_STROKE_COLOR,
   DEFAULT_SHAPE_TEXT_COLOR,
   DEFAULT_TEXT_COLOR,
-  FillColorsSchema,
   FontFamily,
   FontStyle,
   FontWeight,
-  FrameBackgroundColorsSchema,
   LayoutType,
-  LineColor,
   LineColorsSchema,
   LineWidth,
   MindmapStyle,
-  NoteBackgroundColorsSchema,
+  NoteBackgroundPaletteEnum,
   NoteDisplayMode,
   NoteShadowsSchema,
+  PaletteEnum,
   PointStyle,
   ShapeStyle,
-  StrokeColorsSchema,
+  StrokeColor,
   StrokeStyle,
   TextAlign,
   TextVerticalAlign,
@@ -59,17 +57,12 @@ export const ColorSchema = z.union([
     dark: z.string(),
   }),
 ]);
-const LineColorSchema = z.union([LineColorsSchema, ColorSchema]);
-const ShapeFillColorSchema = z.union([FillColorsSchema, ColorSchema]);
-const ShapeStrokeColorSchema = z.union([StrokeColorsSchema, ColorSchema]);
-const TextColorSchema = z.union([LineColorsSchema, ColorSchema]);
+const ColorPaletteSchema = z.union([ColorSchema, PaletteEnum]);
+const LineColorSchema = z.union([LineColorsSchema, ColorPaletteSchema]);
+const TextColorSchema = z.union([LineColorsSchema, ColorPaletteSchema]);
 const NoteBackgroundColorSchema = z.union([
-  NoteBackgroundColorsSchema,
-  ColorSchema,
-]);
-const FrameBackgroundColorSchema = z.union([
-  FrameBackgroundColorsSchema,
   ColorSchema,
+  NoteBackgroundPaletteEnum,
 ]);
 
 export const ConnectorSchema = z
@@ -110,14 +103,11 @@ export const ConnectorSchema = z
 
 export const BrushSchema = z
   .object({
-    color: LineColorSchema,
+    color: ColorPaletteSchema,
     lineWidth: LineWidthSchema,
   })
   .default({
-    color: {
-      dark: LineColor.White,
-      light: LineColor.Black,
-    },
+    color: StrokeColor.Black,
     lineWidth: LineWidth.Four,
   });
 
@@ -140,8 +130,8 @@ const DEFAULT_SHAPE = {
 
 const ShapeObject = {
   color: TextColorSchema,
-  fillColor: ShapeFillColorSchema,
-  strokeColor: ShapeStrokeColorSchema,
+  fillColor: ColorPaletteSchema,
+  strokeColor: ColorPaletteSchema,
   strokeStyle: StrokeStyleSchema,
   strokeWidth: z.number(),
   shapeStyle: ShapeStyleSchema,
@@ -235,7 +225,7 @@ export const MindmapSchema = z
 
 export const FrameSchema = z
   .object({
-    background: FrameBackgroundColorSchema.optional(),
+    background: ColorPaletteSchema.optional(),
   })
   .default({});
 
diff --git a/blocksuite/affine/widget-scroll-anchoring/package.json b/blocksuite/affine/widget-scroll-anchoring/package.json
index 09d95be57bf88..2990e97ac2592 100644
--- a/blocksuite/affine/widget-scroll-anchoring/package.json
+++ b/blocksuite/affine/widget-scroll-anchoring/package.json
@@ -18,7 +18,7 @@
     "@blocksuite/block-std": "workspace:*",
     "@blocksuite/global": "workspace:*",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "lit": "^3.2.0"
   },
   "exports": {
diff --git a/blocksuite/blocks/package.json b/blocksuite/blocks/package.json
index 30ee51b41a949..69141a1d969b6 100644
--- a/blocksuite/blocks/package.json
+++ b/blocksuite/blocks/package.json
@@ -37,7 +37,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "@types/hast": "^3.0.4",
     "@types/mdast": "^4.0.4",
     "collapse-white-space": "^2.1.0",
diff --git a/blocksuite/blocks/src/effects.ts b/blocksuite/blocks/src/effects.ts
index 4b94be311790a..281e0ea02c0f7 100644
--- a/blocksuite/blocks/src/effects.ts
+++ b/blocksuite/blocks/src/effects.ts
@@ -90,7 +90,6 @@ import { EdgelessFontWeightAndStylePanel } from './root-block/edgeless/component
 import { EdgelessLineWidthPanel } from './root-block/edgeless/components/panel/line-width-panel.js';
 import { NoteDisplayModePanel } from './root-block/edgeless/components/panel/note-display-mode-panel.js';
 import { EdgelessNoteShadowPanel } from './root-block/edgeless/components/panel/note-shadow-panel.js';
-import { EdgelessOneRowColorPanel } from './root-block/edgeless/components/panel/one-row-color-panel.js';
 import { EdgelessScalePanel } from './root-block/edgeless/components/panel/scale-panel.js';
 import { EdgelessShapePanel } from './root-block/edgeless/components/panel/shape-panel.js';
 import { EdgelessShapeStylePanel } from './root-block/edgeless/components/panel/shape-style-panel.js';
@@ -473,10 +472,6 @@ export function effects() {
     'edgeless-frame-title-editor',
     EdgelessFrameTitleEditor
   );
-  customElements.define(
-    'edgeless-one-row-color-panel',
-    EdgelessOneRowColorPanel
-  );
   customElements.define('edgeless-text-editor', EdgelessTextEditor);
   customElements.define('affine-image-toolbar', AffineImageToolbar);
   customElements.define('affine-drop-indicator', DropIndicator);
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 dad904d91bc2c..5b2435415d078 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
@@ -3,6 +3,7 @@ import { WithDisposable } from '@blocksuite/global/utils';
 import { html, LitElement } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { choose } from 'lit/directives/choose.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import type { ColorEvent } from '../panel/color-panel.js';
@@ -12,7 +13,7 @@ import type {
   PickColorEvent,
   PickColorType,
 } from './types.js';
-import { keepColor, preprocessColor } from './utils.js';
+import { keepColor, preprocessColor, rgbaToHex8 } from './utils.js';
 
 type Type = 'normal' | 'custom';
 
@@ -38,10 +39,28 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) {
   get customButtonStyle() {
     let b = 'transparent';
     let c = 'transparent';
-    if (!this.isCSSVariable) {
+
+    if (!this.isCustomColor) {
+      return { '--b': b, '--c': c };
+    }
+
+    if (this.isCSSVariable) {
+      if (!this.color.endsWith('transparent')) {
+        b = 'var(--affine-background-overlay-panel-color)';
+        c = keepColor(
+          rgbaToHex8(
+            preprocessColor(window.getComputedStyle(this))({
+              type: 'normal',
+              value: this.color,
+            }).rgba
+          )
+        );
+      }
+    } else {
       b = 'var(--affine-background-overlay-panel-color)';
       c = keepColor(this.color);
     }
+
     return { '--b': b, '--c': c };
   }
 
@@ -49,6 +68,10 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) {
     return this.color.startsWith('--');
   }
 
+  get isCustomColor() {
+    return !this.palettes.includes(this.color);
+  }
+
   get tabContentPadding() {
     return `${this.tabType === 'custom' ? 0 : 8}px`;
   }
@@ -101,7 +124,9 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) {
                 <slot name="separator"></slot>
                 <edgeless-color-panel
                   role="listbox"
+                  class=${ifDefined(this.colorPanelClass)}
                   .value=${this.color}
+                  .palettes=${this.palettes}
                   .options=${this.palettes}
                   .hollowCircle=${this.hollowCircle}
                   .openColorPicker=${this.switchToCustomTab}
@@ -111,7 +136,7 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) {
                   <edgeless-color-custom-button
                     slot="custom"
                     style=${styleMap(this.customButtonStyle)}
-                    .active=${!this.isCSSVariable}
+                    ?active=${this.isCustomColor}
                     @click=${this.switchToCustomTab}
                   ></edgeless-color-custom-button>
                 </edgeless-color-panel>
@@ -142,6 +167,9 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) {
   @property()
   accessor color!: string;
 
+  @property()
+  accessor colorPanelClass: string | undefined = undefined;
+
   @property({ attribute: false })
   accessor colors: { type: ModeType; value: string }[] = [];
 
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 9c76ed365f62b..72a4bdde44147 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
@@ -1,18 +1,35 @@
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import { colorContainerStyles } from '../panel/color-panel.js';
-
 export class EdgelessColorCustomButton extends LitElement {
   static override styles = css`
-    ${colorContainerStyles}
+    :host {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+    }
+    :host([active]):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;
+    }
 
     .color-custom {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 16px;
-      height: 16px;
+      width: 21px;
+      height: 21px;
       border-radius: 50%;
       box-sizing: border-box;
       overflow: hidden;
@@ -43,15 +60,11 @@ export class EdgelessColorCustomButton extends LitElement {
   `;
 
   override render() {
-    return html`
-      <div class="color-container" ?active=${this.active}>
-        <div class="color-unit color-custom"></div>
-      </div>
-    `;
+    return html`<div class="color-unit color-custom"></div>`;
   }
 
-  @property({ attribute: false })
-  accessor active!: boolean;
+  @property({ attribute: true, type: Boolean })
+  accessor active: boolean = false;
 }
 
 declare global {
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 04f48055fda7a..7d33780eaa411 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,15 +1,9 @@
-import { TransparentIcon } from '@blocksuite/affine-components/icons';
-import {
-  ColorScheme,
-  LINE_COLORS,
-  LineColor,
-  NoteBackgroundColor,
-  ShapeFillColor,
-} from '@blocksuite/affine-model';
-import { css, html, LitElement, nothing } from 'lit';
+import { Black, ColorScheme, PALETTES, White } 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 { repeat } from 'lit/directives/repeat.js';
-import { styleMap } from 'lit/directives/style-map.js';
 
 export class ColorEvent extends Event {
   detail: string;
@@ -28,70 +22,64 @@ export class ColorEvent extends Event {
 }
 
 export const GET_DEFAULT_LINE_COLOR = (theme: ColorScheme) => {
-  return theme === ColorScheme.Dark ? LineColor.White : LineColor.Black;
+  return theme === ColorScheme.Dark ? White : Black;
 };
 
 export function isTransparent(color: string) {
   return color.toLowerCase().endsWith('transparent');
 }
 
-function isSameColorWithBackground(color: string) {
-  const colors: string[] = [
-    LineColor.Black,
-    LineColor.White,
-    NoteBackgroundColor.Black,
-    NoteBackgroundColor.White,
-    ShapeFillColor.Black,
-    ShapeFillColor.White,
-  ];
-  return colors.includes(color.toLowerCase());
-}
-
-function TransparentColor(hollowCircle = false) {
-  const containerStyle = {
-    position: 'relative',
-    width: '16px',
-    height: '16px',
-    stroke: 'none',
-  };
-  const maskStyle = {
-    position: 'absolute',
-    width: '10px',
-    height: '10px',
-    left: '3px',
-    top: '3.5px',
-    borderRadius: '50%',
-    background: 'var(--affine-background-overlay-panel-color)',
-  };
-
-  const mask = hollowCircle
-    ? html`<div style=${styleMap(maskStyle)}></div>`
+function TransparentIcon(hollowCircle = false) {
+  const CircleIcon: TemplateResult | typeof nothing = hollowCircle
+    ? svg`<circle cx="10" cy="10" r="8" fill="white" />`
     : nothing;
 
   return html`
-    <div style=${styleMap(containerStyle)}>${TransparentIcon} ${mask}</div>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M-1.17405 5.17857C-1.2241 5.5285 -1.25 5.88623 -1.25 6.25V8.39286H1.96429V11.6071H-1.25V13.75C-1.25 14.1138 -1.2241 14.4715 -1.17405 14.8214H1.96429V18.0357H0.0943102C0.602244 18.7639 1.23609 19.3978 1.96429 19.9057V18.0357L5.17857 18.0357V21.174C5.5285 21.2241 5.88623 21.25 6.25 21.25H8.39286V18.0357H11.6071V21.25H13.75C14.1138 21.25 14.4715 21.2241 14.8214 21.174V18.0357H18.0357L18.0357 19.9057C18.7639 19.3978 19.3978 18.7639 19.9057 18.0357L18.0357 18.0357V14.8214H21.174C21.2241 14.4715 21.25 14.1138 21.25 13.75V11.6071H18.0357V8.39286H21.25V6.25C21.25 5.88623 21.2241 5.5285 21.174 5.17857H18.0357V1.96429H19.9057C19.3978 1.23609 18.7639 0.602244 18.0357 0.09431L18.0357 1.96429H14.8214V-1.17405C14.4715 -1.2241 14.1138 -1.25 13.75 -1.25H11.6071V1.96429H8.39286V-1.25H6.25C5.88623 -1.25 5.5285 -1.2241 5.17857 -1.17405V1.96429H1.96429V0.0943099C1.23609 0.602244 0.602244 1.23609 0.0943099 1.96429H1.96429V5.17857H-1.17405ZM5.17857 5.17857V1.96429H8.39286V5.17857H5.17857ZM5.17857 8.39286H1.96429V5.17857H5.17857V8.39286ZM8.39286 8.39286V5.17857H11.6071V8.39286H8.39286ZM8.39286 11.6071V8.39286H5.17857V11.6071H1.96429V14.8214H5.17857V18.0357H8.39286V14.8214H11.6071V18.0357H14.8214V14.8214H18.0357V11.6071H14.8214V8.39286H18.0357V5.17857H14.8214V1.96429H11.6071V5.17857H14.8214V8.39286H11.6071V11.6071H8.39286ZM8.39286 11.6071V14.8214H5.17857V11.6071H8.39286ZM11.6071 11.6071H14.8214V14.8214H11.6071V11.6071Z"
+        fill="#D9D9D9"
+      />
+      ${CircleIcon}
+    </svg>
   `;
 }
 
-function BorderedHollowCircle(color: string) {
-  const valid = color.startsWith('--');
-  const strokeWidth = valid && isSameColorWithBackground(color) ? 1 : 0;
-  const style = {
-    fill: valid ? `var(${color})` : color,
-    stroke: 'var(--affine-border-color)',
-  };
+function CircleIcon(color: string) {
+  return html`
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="${color}"
+    >
+      <circle cx="10" cy="10" r="10" />
+    </svg>
+  `;
+}
+
+function HollowCircleIcon(color: string) {
   return html`
     <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="${color}"
     >
       <path
-        d="M12.3125 8C12.3125 10.3817 10.3817 12.3125 8 12.3125C5.61827 12.3125 3.6875 10.3817 3.6875 8C3.6875 5.61827 5.61827 3.6875 8 3.6875C10.3817 3.6875 12.3125 5.61827 12.3125 8ZM8 15.5C12.1421 15.5 15.5 12.1421 15.5 8C15.5 3.85786 12.1421 0.5 8 0.5C3.85786 0.5 0.5 3.85786 0.5 8C0.5 12.1421 3.85786 15.5 8 15.5Z"
-        stroke-width="${strokeWidth}"
-        style=${styleMap(style)}
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17ZM10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20Z"
       />
     </svg>
   `;
@@ -99,76 +87,82 @@ function BorderedHollowCircle(color: string) {
 
 function AdditionIcon(color: string, hollowCircle: boolean) {
   if (isTransparent(color)) {
-    return TransparentColor(hollowCircle);
+    return TransparentIcon(hollowCircle);
   }
+
   if (hollowCircle) {
-    return BorderedHollowCircle(color);
+    return HollowCircleIcon(color);
   }
-  return nothing;
-}
 
-export function ColorUnit(
-  color: string,
-  {
-    hollowCircle,
-    letter,
-  }: {
-    hollowCircle?: boolean;
-    letter?: boolean;
-  } = {}
-) {
-  const additionIcon = AdditionIcon(color, !!hollowCircle);
-
-  const colorStyle =
-    !hollowCircle && !isTransparent(color)
-      ? { background: `var(${color})` }
-      : {};
-
-  const borderStyle =
-    isSameColorWithBackground(color) && !hollowCircle
-      ? {
-          border: '0.5px solid var(--affine-border-color)',
-        }
-      : {};
-
-  const style = {
-    width: '16px',
-    height: '16px',
-    borderRadius: '50%',
-    boxSizing: 'border-box',
-    overflow: 'hidden',
-    ...borderStyle,
-    ...colorStyle,
-  };
-
-  return html`
-    <div
-      class="color-unit"
-      style=${styleMap(style)}
-      aria-label=${color.toLowerCase()}
-      data-letter=${letter ? 'A' : ''}
-    >
-      ${additionIcon}
-    </div>
-  `;
+  return CircleIcon(color);
 }
 
 export class EdgelessColorButton extends LitElement {
   static override styles = css`
     :host {
+      position: relative;
+      width: 20px;
+      height: 20px;
       display: flex;
       justify-content: center;
       align-items: center;
-      width: 20px;
-      height: 20px;
+      cursor: pointer;
     }
 
     .color-unit {
+      position: relative;
       width: 16px;
       height: 16px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 50%;
+      box-sizing: border-box;
+    }
+    .color-unit svg {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      overflow: hidden;
+    }
+    :host .color-unit:after {
+      position: absolute;
+      display: block;
+      content: '';
+      width: 100%;
+      height: 100%;
       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')};
+    }
+    :host(.black) .color-unit:after {
+      border-color: ${unsafeCSSVarV2('layer/insideBorder/border')};
+    }
+
+    :host(.large) {
+      width: 24px;
+      height: 24px;
+    }
+    :host(.large) .color-unit {
+      width: 20px;
+      height: 20px;
+    }
+
+    :host([active]):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;
     }
   `;
 
@@ -178,85 +172,54 @@ export class EdgelessColorButton extends LitElement {
   }
 
   override render() {
-    const { color, hollowCircle, letter } = this;
-    const additionIcon = AdditionIcon(color, !!hollowCircle);
-    const style: Record<string, string> = {};
-    if (!hollowCircle) {
-      style.background = this.preprocessColor;
-      if (isSameColorWithBackground(color)) {
-        style.border = '0.5px solid var(--affine-border-color)';
-      }
-    }
+    const { color, preprocessColor, hollowCircle, letter } = this;
+    const additionIcon = AdditionIcon(preprocessColor, !!hollowCircle);
     return html`<div
       class="color-unit"
-      aria-label=${color.toLowerCase()}
+      aria-label=${color}
       data-letter=${letter ? 'A' : nothing}
-      style=${styleMap(style)}
     >
       ${additionIcon}
     </div>`;
   }
 
+  @property({ attribute: true, type: Boolean })
+  accessor active: boolean = false;
+
   @property({ attribute: false })
   accessor color!: string;
 
   @property({ attribute: false })
-  accessor hollowCircle: boolean | undefined = undefined;
+  accessor hollowCircle: boolean = false;
 
   @property({ attribute: false })
   accessor letter: boolean | undefined = undefined;
 }
 
-export const colorContainerStyles = css`
-  .color-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    box-sizing: border-box;
-    overflow: hidden;
-    cursor: pointer;
-    padding: 2px;
-  }
-
-  .color-unit::before {
-    content: attr(data-letter);
-    display: block;
-    font-size: 12px;
-  }
-
-  .color-container[active]:after {
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    border: 0.5px solid var(--affine-primary-color);
-    border-radius: 50%;
-    box-sizing: border-box;
-    content: attr(data-letter);
-  }
-`;
-
 export class EdgelessColorPanel extends LitElement {
   static override styles = css`
     :host {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      width: 184px;
-      gap: 8px;
+      display: grid;
+      grid-gap: 4px;
+      grid-template-columns: repeat(9, 1fr);
     }
 
-    ${colorContainerStyles}
-  `;
+    /* note */
+    :host(.small) {
+      grid-template-columns: repeat(6, 1fr);
+      grid-gap: 8px;
+    }
 
-  get palettes() {
-    return this.hasTransparent
-      ? ['--affine-palette-transparent', ...this.options]
-      : this.options;
-  }
+    /* edgeless toolbar */
+    :host(.one-way) {
+      display: flex;
+      flex-wrap: nowrap;
+      padding: 0 2px;
+      gap: 14px;
+      box-sizing: border-box;
+      background: var(--affine-background-overlay-panel-color);
+    }
+  `;
 
   onSelect(value: string) {
     this.dispatchEvent(
@@ -274,24 +237,20 @@ export class EdgelessColorPanel extends LitElement {
       ${repeat(
         this.palettes,
         color => color,
-        color => {
-          const unit = ColorUnit(color, {
-            hollowCircle: this.hollowCircle,
-            letter: this.showLetterMark,
-          });
-
-          return html`
-            <div
-              class="color-container"
-              ?active=${color === this.value}
-              @click=${() => this.onSelect(color)}
-            >
-              ${unit}
-            </div>
-          `;
-        }
+        color =>
+          html`<edgeless-color-button
+            class=${classMap({
+              large: true,
+              black: color.startsWith('--') && color.endsWith('black'),
+            })}
+            .color=${color}
+            .letter=${this.showLetterMark}
+            .hollowCircle=${this.hollowCircle}
+            ?active=${color === this.value}
+            @click=${() => this.onSelect(color)}
+          >
+          </edgeless-color-button>`
       )}
-      </div>
       <slot name="custom"></slot>
     `;
   }
@@ -306,7 +265,7 @@ export class EdgelessColorPanel extends LitElement {
   accessor openColorPicker!: (e: MouseEvent) => void;
 
   @property({ type: Array })
-  accessor options: readonly string[] = LINE_COLORS;
+  accessor palettes: readonly string[] = PALETTES;
 
   @property({ attribute: false })
   accessor showLetterMark = false;
@@ -334,11 +293,11 @@ export class EdgelessTextColorIcon extends LitElement {
   override render() {
     return html`
       <svg
+        xmlns="http://www.w3.org/2000/svg"
         width="20"
         height="20"
         viewBox="0 0 20 20"
         fill="none"
-        xmlns="http://www.w3.org/2000/svg"
       >
         <path
           fill-rule="evenodd"
diff --git a/blocksuite/blocks/src/root-block/edgeless/components/panel/line-width-panel.ts b/blocksuite/blocks/src/root-block/edgeless/components/panel/line-width-panel.ts
index c5b7ce815a897..f586a978794b3 100644
--- a/blocksuite/blocks/src/root-block/edgeless/components/panel/line-width-panel.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/line-width-panel.ts
@@ -1,15 +1,17 @@
-import { LineWidth } from '@blocksuite/affine-model';
-import { requestConnectedFrame } from '@blocksuite/affine-shared/utils';
+import { LINE_WIDTHS, LineWidth } from '@blocksuite/affine-model';
+import { clamp, on, once } from '@blocksuite/affine-shared/utils';
 import { WithDisposable } from '@blocksuite/global/utils';
 import { css, html, LitElement, nothing, type PropertyValues } from 'lit';
-import { property, query, queryAll } from 'lit/decorators.js';
-
-type DragConfig = {
-  stepWidth: number;
-  boundLeft: number;
-  containerWidth: number;
-  bottomLineWidth: number;
-};
+import { property, query } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+
+interface Config {
+  width: number;
+  itemSize: number;
+  itemIconSize: number;
+  dragHandleSize: number;
+  count: number;
+}
 
 export class LineWidthEvent extends Event {
   detail: LineWidth;
@@ -34,10 +36,28 @@ export class EdgelessLineWidthPanel extends WithDisposable(LitElement) {
       align-items: center;
       justify-content: center;
       align-self: stretch;
+
+      --width: 140px;
+      --item-size: 16px;
+      --item-icon-size: 8px;
+      --drag-handle-size: 14px;
+      --cursor: 0;
+      --count: 6;
+      /* (16 - 14) / 2 + (cursor / (count - 1)) * (140 - 16) */
+      --drag-handle-center-x: calc(
+        (var(--item-size) - var(--drag-handle-size)) / 2 +
+          (var(--cursor) / (var(--count) - 1)) *
+          (var(--width) - var(--item-size))
+      );
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
     }
 
     .line-width-panel {
-      width: 108px;
+      width: var(--width);
       height: 24px;
       display: flex;
       flex-direction: row;
@@ -51,165 +71,70 @@ export class EdgelessLineWidthPanel extends WithDisposable(LitElement) {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 16px;
-      height: 16px;
+      width: var(--item-size);
+      height: var(--item-size);
       z-index: 2;
     }
 
     .line-width-icon {
-      width: 4px;
-      height: 4px;
-      border-radius: 50%;
+      width: var(--item-icon-size);
+      height: var(--item-icon-size);
       background-color: var(--affine-border-color);
+      border-radius: 50%;
     }
 
-    .line-width-button:nth-child(1) {
-      margin-right: 0;
-    }
-
-    .line-width-button:nth-child(6) {
-      margin-left: 0;
+    .line-width-button[data-selected] .line-width-icon {
+      background-color: var(--affine-icon-color);
     }
 
     .drag-handle {
       position: absolute;
-      left: 0;
-      top: 50%;
-      width: 8px;
-      height: 8px;
-      transform: translateY(-50%) translateX(4px);
+      width: var(--drag-handle-size);
+      height: var(--drag-handle-size);
       border-radius: 50%;
       background-color: var(--affine-icon-color);
       z-index: 3;
+      transform: translateX(var(--drag-handle-center-x));
     }
 
     .bottom-line,
     .line-width-overlay {
-      left: 8px;
-      top: 50%;
-      transform: translateY(-50%);
-      height: 1px;
-      background-color: var(--affine-border-color);
       position: absolute;
+      height: 1px;
+      left: calc(var(--item-size) / 2);
     }
 
     .bottom-line {
-      width: calc(100% - 16px);
+      width: calc(100% - var(--item-size));
       background-color: var(--affine-border-color);
     }
 
     .line-width-overlay {
-      width: 0;
       background-color: var(--affine-icon-color);
       z-index: 1;
+      width: var(--drag-handle-center-x);
     }
   `;
 
-  private _dragConfig: DragConfig | null = null;
-
-  private readonly _getDragHandlePosition = (
-    e: PointerEvent,
-    config: DragConfig
-  ) => {
-    const x = e.clientX;
-    const { boundLeft, bottomLineWidth, stepWidth, containerWidth } = config;
-
-    let steps: number;
-    if (x <= boundLeft) {
-      steps = 0;
-    } else if (x - boundLeft >= containerWidth) {
-      steps = 100;
-    } else {
-      steps = Math.floor((x - boundLeft) / stepWidth);
-    }
-
-    // The drag handle should not be dragged to the left of the first icon or right of the last icon.
-    // Calculate the drag handle position based on the steps.
-    const bottomLineOffsetX = 4;
-    const bottomLineStepWidth = (bottomLineWidth - bottomLineOffsetX) / 100;
-    const dragHandlerPosition = steps * bottomLineStepWidth;
-    return dragHandlerPosition;
+  private readonly _getDragHandlePosition = (e: PointerEvent) => {
+    return clamp(e.offsetX, 0, this.config.width);
   };
 
   private readonly _onPointerDown = (e: PointerEvent) => {
     e.preventDefault();
-    if (this.disable) return;
-    const { left, width } = this._lineWidthPanel.getBoundingClientRect();
-    const bottomLineWidth = this._bottomLine.getBoundingClientRect().width;
-    this._dragConfig = {
-      stepWidth: width / 100,
-      boundLeft: left,
-      containerWidth: width,
-      bottomLineWidth,
-    };
     this._onPointerMove(e);
-  };
 
-  private readonly _onPointerMove = (e: PointerEvent) => {
-    e.preventDefault();
-    if (!this._dragConfig) return;
-    const dragHandlerPosition = this._getDragHandlePosition(
-      e,
-      this._dragConfig
-    );
-    this._dragHandle.style.left = `${dragHandlerPosition}%`;
-    this._lineWidthOverlay.style.width = `${dragHandlerPosition}%`;
-    this._updateIconsColor();
+    const dispose = on(this, 'pointermove', this._onPointerMove);
+    this._disposables.add(once(this, 'pointerup', dispose));
+    this._disposables.add(once(this, 'pointerout', dispose));
   };
 
-  private readonly _onPointerOut = (e: PointerEvent) => {
-    // If the pointer is out of the line width panel
-    // Stop dragging and update the selected size by nearest size.
-    e.preventDefault();
-    if (!this._dragConfig) return;
-    const dragHandlerPosition = this._getDragHandlePosition(
-      e,
-      this._dragConfig
-    );
-    this._updateLineWidthPanelByDragHandlePosition(dragHandlerPosition);
-    this._dragConfig = null;
-  };
-
-  private readonly _onPointerUp = (e: PointerEvent) => {
+  private readonly _onPointerMove = (e: PointerEvent) => {
     e.preventDefault();
-    if (!this._dragConfig) return;
-    const dragHandlerPosition = this._getDragHandlePosition(
-      e,
-      this._dragConfig
-    );
-    this._updateLineWidthPanelByDragHandlePosition(dragHandlerPosition);
-    this._dragConfig = null;
-  };
 
-  private readonly _updateIconsColor = () => {
-    if (!this._dragHandle.offsetParent) {
-      requestConnectedFrame(() => this._updateIconsColor(), this);
-      return;
-    }
+    const x = this._getDragHandlePosition(e);
 
-    const dragHandleRect = this._dragHandle.getBoundingClientRect();
-    const dragHandleCenterX = dragHandleRect.left + dragHandleRect.width / 2;
-    // All the icons located at the left of the drag handle should be filled with the icon color.
-    const leftIcons = [];
-    // All the icons located at the right of the drag handle should be filled with the border color.
-    const rightIcons = [];
-
-    for (const icon of this._lineWidthIcons) {
-      const { left, width } = icon.getBoundingClientRect();
-      const centerX = left + width / 2;
-      if (centerX < dragHandleCenterX) {
-        leftIcons.push(icon);
-      } else {
-        rightIcons.push(icon);
-      }
-    }
-
-    leftIcons.forEach(
-      icon => (icon.style.backgroundColor = 'var(--affine-icon-color)')
-    );
-    rightIcons.forEach(
-      icon => (icon.style.backgroundColor = 'var(--affine-border-color)')
-    );
+    this._updateLineWidthPanelByDragHandlePosition(x);
   };
 
   private _onSelect(lineWidth: LineWidth) {
@@ -227,110 +152,73 @@ export class EdgelessLineWidthPanel extends WithDisposable(LitElement) {
 
   private _updateLineWidthPanel(selectedSize: LineWidth) {
     if (!this._lineWidthOverlay) return;
-    let width = 0;
-    let dragHandleOffsetX = 0;
-    switch (selectedSize) {
-      case LineWidth.Two:
-        width = 0;
-        break;
-      case LineWidth.Four:
-        width = 16;
-        dragHandleOffsetX = 1;
-        break;
-      case LineWidth.Six:
-        width = 32;
-        dragHandleOffsetX = 2;
-        break;
-      case LineWidth.Eight:
-        width = 48;
-        dragHandleOffsetX = 3;
-        break;
-      case LineWidth.Ten:
-        width = 64;
-        dragHandleOffsetX = 4;
-        break;
-      default:
-        width = 80;
-        dragHandleOffsetX = 4;
-    }
+    const index = this.lineWidths.findIndex(w => w === selectedSize);
+    if (index === -1) return;
 
-    dragHandleOffsetX += 4;
-    this._lineWidthOverlay.style.width = `${width}%`;
-    this._dragHandle.style.left = `${width}%`;
-    this._dragHandle.style.transform = `translateY(-50%) translateX(${dragHandleOffsetX}px)`;
-    this._updateIconsColor();
+    this.style.setProperty('--cursor', `${index}`);
   }
 
-  private _updateLineWidthPanelByDragHandlePosition(
-    dragHandlerPosition: number
-  ) {
+  private _updateLineWidthPanelByDragHandlePosition(x: number) {
     // Calculate the selected size based on the drag handle position.
     // Need to select the nearest size.
-    let selectedSize = this.selectedSize;
-    if (dragHandlerPosition <= 12) {
-      selectedSize = LineWidth.Two;
-    } else if (dragHandlerPosition > 12 && dragHandlerPosition <= 26) {
-      selectedSize = LineWidth.Four;
-    } else if (dragHandlerPosition > 26 && dragHandlerPosition <= 40) {
-      selectedSize = LineWidth.Six;
-    } else if (dragHandlerPosition > 40 && dragHandlerPosition <= 54) {
-      selectedSize = LineWidth.Eight;
-    } else if (dragHandlerPosition > 54 && dragHandlerPosition <= 68) {
-      selectedSize = LineWidth.Ten;
-    } else {
-      selectedSize = LineWidth.Twelve;
-    }
+
+    const {
+      config: { width, itemSize, count },
+      lineWidths,
+    } = this;
+    const targetWidth = width - itemSize;
+    const halfItemSize = itemSize / 2;
+    const offsetX = halfItemSize + (width - itemSize * count) / (count - 1) / 2;
+    const selectedSize = lineWidths.findLast((_, n) => {
+      const cx = halfItemSize + (n / (count - 1)) * targetWidth;
+      return x >= cx - offsetX && x < cx + offsetX;
+    });
+    if (!selectedSize) return;
+
     this._updateLineWidthPanel(selectedSize);
     this._onSelect(selectedSize);
   }
 
-  override disconnectedCallback(): void {
-    this._disposables.dispose();
+  override connectedCallback() {
+    super.connectedCallback();
+    const {
+      style,
+      config: { width, itemSize, itemIconSize, dragHandleSize, count },
+    } = this;
+    style.setProperty('--width', `${width}px`);
+    style.setProperty('--item-size', `${itemSize}px`);
+    style.setProperty('--item-icon-size', `${itemIconSize}px`);
+    style.setProperty('--drag-handle-size', `${dragHandleSize}px`);
+    style.setProperty('--count', `${count}`);
   }
 
-  override firstUpdated(): void {
+  override firstUpdated() {
     this._updateLineWidthPanel(this.selectedSize);
     this._disposables.addFromEvent(this, 'pointerdown', this._onPointerDown);
-    this._disposables.addFromEvent(this, 'pointermove', this._onPointerMove);
-    this._disposables.addFromEvent(this, 'pointerup', this._onPointerUp);
-    this._disposables.addFromEvent(this, 'pointerout', this._onPointerOut);
   }
 
   override render() {
-    return html`<style>
-        .line-width-panel {
-          opacity: ${this.disable ? '0.5' : '1'};
-        }
-      </style>
-      <div
-        class="line-width-panel"
-        @mousedown="${(e: Event) => e.preventDefault()}"
-      >
-        <div class="line-width-button">
-          <div class="line-width-icon"></div>
-        </div>
-        <div class="line-width-button">
-          <div class="line-width-icon"></div>
-        </div>
-        <div class="line-width-button">
-          <div class="line-width-icon"></div>
-        </div>
-        <div class="line-width-button">
-          <div class="line-width-icon"></div>
-        </div>
-        <div class="line-width-button">
-          <div class="line-width-icon"></div>
-        </div>
-        <div class="line-width-button">
-          <div class="line-width-icon"></div>
-        </div>
-        <div class="drag-handle"></div>
-        <div class="bottom-line"></div>
-        <div class="line-width-overlay"></div>
-        ${this.hasTooltip
-          ? html`<affine-tooltip .offset=${8}>Thickness</affine-tooltip>`
-          : nothing}
-      </div>`;
+    return html`<div class="line-width-panel">
+      ${repeat(
+        this.lineWidths,
+        w => w,
+        (w, n) =>
+          html`<div
+            class="line-width-button"
+            aria-label=${w}
+            data-index=${n}
+            ?data-selected=${w <= this.selectedSize}
+          >
+            <div class="line-width-icon"></div>
+          </div>`
+      )}
+      <div class="drag-handle"></div>
+      <div class="bottom-line"></div>
+      <div class="line-width-overlay"></div>
+      ${this.hasTooltip
+        ? html`<affine-tooltip .offset=${8}>Thickness</affine-tooltip>`
+        : nothing}
+    </div>`;
   }
 
   override willUpdate(changedProperties: PropertyValues<this>) {
@@ -339,27 +227,26 @@ export class EdgelessLineWidthPanel extends WithDisposable(LitElement) {
     }
   }
 
-  @query('.bottom-line')
-  private accessor _bottomLine!: HTMLElement;
-
-  @query('.drag-handle')
-  private accessor _dragHandle!: HTMLElement;
-
-  @queryAll('.line-width-icon')
-  private accessor _lineWidthIcons!: NodeListOf<HTMLElement>;
-
   @query('.line-width-overlay')
   private accessor _lineWidthOverlay!: HTMLElement;
 
-  @query('.line-width-panel')
-  private accessor _lineWidthPanel!: HTMLElement;
+  accessor config: Config = {
+    width: 140,
+    itemSize: 16,
+    itemIconSize: 8,
+    dragHandleSize: 14,
+    count: LINE_WIDTHS.length,
+  };
 
-  @property({ attribute: false })
-  accessor disable = false;
+  @property({ attribute: false, type: Boolean })
+  accessor disabled = false;
 
   @property({ attribute: false })
   accessor hasTooltip = true;
 
+  @property({ attribute: false })
+  accessor lineWidths: LineWidth[] = LINE_WIDTHS;
+
   @property({ attribute: false })
   accessor selectedSize: LineWidth = LineWidth.Two;
 }
diff --git a/blocksuite/blocks/src/root-block/edgeless/components/panel/one-row-color-panel.ts b/blocksuite/blocks/src/root-block/edgeless/components/panel/one-row-color-panel.ts
deleted file mode 100644
index 3d2bc8edee313..0000000000000
--- a/blocksuite/blocks/src/root-block/edgeless/components/panel/one-row-color-panel.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { css } from 'lit';
-
-import { colorContainerStyles, EdgelessColorPanel } from './color-panel.js';
-
-export class EdgelessOneRowColorPanel extends EdgelessColorPanel {
-  static override styles = css`
-    :host {
-      display: flex;
-      flex-wrap: nowrap;
-      padding: 0 2px;
-      gap: 14px;
-      box-sizing: border-box;
-      background: var(--affine-background-overlay-panel-color);
-    }
-
-    ${colorContainerStyles}
-
-    .color-container {
-      width: 20px;
-      height: 20px;
-    }
-    .color-container::before {
-      content: '';
-      position: absolute;
-      width: 2px;
-      right: calc(100% + 7px);
-      height: 100%;
-      // FIXME: not working
-      scroll-snap-align: start;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'edgeless-one-row-color-panel': EdgelessOneRowColorPanel;
-  }
-}
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 408974622bd98..46ec90f01424b 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,4 @@
-import { SHAPE_STROKE_COLORS, StrokeStyle } from '@blocksuite/affine-model';
+import { PALETTES, type StrokeStyle } from '@blocksuite/affine-model';
 import { WithDisposable } from '@blocksuite/global/utils';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -30,7 +30,6 @@ export class StrokeStylePanel extends WithDisposable(LitElement) {
           selectedLineSize: this.strokeWidth,
           selectedLineStyle: this.strokeStyle,
           onClick: e => this.setStrokeStyle(e),
-          lineStyles: [StrokeStyle.Solid, StrokeStyle.Dash],
         })}
       </div>
       <editor-toolbar-separator
@@ -39,7 +38,7 @@ export class StrokeStylePanel extends WithDisposable(LitElement) {
       <edgeless-color-panel
         role="listbox"
         aria-label="Border colors"
-        .options=${SHAPE_STROKE_COLORS}
+        .palettes=${PALETTES}
         .value=${this.strokeColor}
         .hollowCircle=${this.hollowCircle}
         @select=${(e: ColorEvent) => this.setStrokeColor(e)}
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 b96401ec3e108..a16c9c4703fe5 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,3 +1,4 @@
+import { STROKE_COLORS } from '@blocksuite/affine-model';
 import {
   EditPropsStore,
   ThemeProvider,
@@ -63,13 +64,15 @@ export class EdgelessBrushMenu extends EdgelessToolbarToolMixin(
           >
           </edgeless-line-width-panel>
           <menu-divider .vertical=${true}></menu-divider>
-          <edgeless-one-row-color-panel
+          <edgeless-color-panel
+            class="one-way"
             .value=${color}
+            .palettes=${STROKE_COLORS}
             .hasTransparent=${!this.edgeless.doc.awarenessStore.getFlag(
               'enable_color_picker'
             )}
             @select=${(e: ColorEvent) => this.onChange({ color: e.detail })}
-          ></edgeless-one-row-color-panel>
+          ></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 1abaf2e9adcbf..a34ba4cc22d8d 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
@@ -6,6 +6,7 @@ import {
 import {
   ConnectorMode,
   DEFAULT_CONNECTOR_COLOR,
+  STROKE_COLORS,
 } from '@blocksuite/affine-model';
 import {
   EditPropsStore,
@@ -127,13 +128,15 @@ export class EdgelessConnectorMenu extends EdgelessToolbarToolMixin(
           >
           </edgeless-line-width-panel>
           <div class="submenu-divider"></div>
-          <edgeless-one-row-color-panel
+          <edgeless-color-panel
+            class="one-way"
             .value=${color}
+            .palettes=${STROKE_COLORS}
             .hasTransparent=${!this.edgeless.doc.awarenessStore.getFlag(
               'enable_color_picker'
             )}
             @select=${(e: ColorEvent) => this.onChange({ stroke: e.detail })}
-          ></edgeless-one-row-color-panel>
+          ></edgeless-color-panel>
         </div>
       </edgeless-slide-menu>
     `;
diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu-config.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu-config.ts
index 936ad38a0bc87..0f1caf0d2931a 100644
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu-config.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu-config.ts
@@ -68,6 +68,3 @@ export const ShapeComponentConfigMap = ShapeComponentConfig.reduce(
   },
   {} as Record<Config['name'], Config>
 );
-
-export const SHAPE_COLOR_PREFIX = '--affine-palette-shape-';
-export const LINE_COLOR_PREFIX = '--affine-palette-line-';
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 24e8d934374a5..3f8af09597638 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
@@ -4,12 +4,13 @@ import {
 } from '@blocksuite/affine-components/icons';
 import {
   DEFAULT_SHAPE_FILL_COLOR,
-  LineColor,
+  LIGHT_PALETTES,
+  MEDIUM_PALETTES,
   SHAPE_FILL_COLORS,
-  type ShapeFillColor,
   type ShapeName,
   ShapeStyle,
   ShapeType,
+  StrokeColor,
 } from '@blocksuite/affine-model';
 import {
   EditPropsStore,
@@ -23,11 +24,7 @@ import { property } from 'lit/decorators.js';
 
 import type { EdgelessRootBlockComponent } from '../../../edgeless-root-block.js';
 import { type ColorEvent, isTransparent } from '../../panel/color-panel.js';
-import {
-  LINE_COLOR_PREFIX,
-  SHAPE_COLOR_PREFIX,
-  ShapeComponentConfig,
-} from './shape-menu-config.js';
+import { ShapeComponentConfig } from './shape-menu-config.js';
 
 export class EdgelessShapeMenu extends SignalWatcher(
   WithDisposable(LitElement)
@@ -79,15 +76,19 @@ export class EdgelessShapeMenu extends SignalWatcher(
     };
   });
 
-  private readonly _setFillColor = (fillColor: ShapeFillColor) => {
+  private readonly _setFillColor = (fillColor: string) => {
     const filled = !isTransparent(fillColor);
-    let strokeColor = fillColor.replace(
-      SHAPE_COLOR_PREFIX,
-      LINE_COLOR_PREFIX
-    ) as LineColor;
+    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 = LineColor.Grey;
+      strokeColor = StrokeColor.Grey;
     }
 
     const { shapeName } = this._props$.value;
@@ -176,15 +177,15 @@ export class EdgelessShapeMenu extends SignalWatcher(
             )}
           </div>
           <menu-divider .vertical=${true}></menu-divider>
-          <edgeless-one-row-color-panel
+          <edgeless-color-panel
+            class="one-way"
             .value=${color}
-            .options=${SHAPE_FILL_COLORS}
+            .palettes=${SHAPE_FILL_COLORS}
             .hasTransparent=${!this.edgeless.doc.awarenessStore.getFlag(
               'enable_color_picker'
             )}
-            @select=${(e: ColorEvent) =>
-              this._setFillColor(e.detail as ShapeFillColor)}
-          ></edgeless-one-row-color-panel>
+            @select=${(e: ColorEvent) => this._setFillColor(e.detail)}
+          ></edgeless-color-panel>
         </div>
       </edgeless-slide-menu>
     `;
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 3bd3001cff5b5..825a6a41b8a84 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,3 +1,4 @@
+import { STROKE_COLORS } from '@blocksuite/affine-model';
 import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx';
 import { css, html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -22,10 +23,12 @@ export class EdgelessTextMenu extends EdgelessToolbarToolMixin(LitElement) {
     return html`
       <edgeless-slide-menu>
         <div class="menu-content">
-          <edgeless-one-row-color-panel
+          <edgeless-color-panel
+            class="one-way"
             .value=${this.color}
+            .palettes=${STROKE_COLORS}
             @select=${(e: ColorEvent) => this.onChange({ color: e.detail })}
-          ></edgeless-one-row-color-panel>
+          ></edgeless-color-panel>
         </div>
       </edgeless-slide-menu>
     `;
diff --git a/blocksuite/blocks/src/root-block/edgeless/utils/consts.ts b/blocksuite/blocks/src/root-block/edgeless/utils/consts.ts
index 22e2f6d00d1c5..c9bd258cdb555 100644
--- a/blocksuite/blocks/src/root-block/edgeless/utils/consts.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/utils/consts.ts
@@ -1,9 +1,9 @@
 import {
+  Black,
   DEFAULT_ROUGHNESS,
-  LineColor,
   LineWidth,
-  ShapeFillColor,
   StrokeStyle,
+  White,
 } from '@blocksuite/affine-model';
 
 export const DEFAULT_NOTE_OFFSET_X = 30;
@@ -50,9 +50,9 @@ export const SurfaceColor = '#6046FE';
 export const NoteColor = '#1E96EB';
 export const BlendColor = '#7D91FF';
 
-export const SHAPE_TEXT_COLOR_PURE_WHITE = LineColor.White;
-export const SHAPE_TEXT_COLOR_PURE_BLACK = LineColor.Black;
-export const SHAPE_FILL_COLOR_BLACK = ShapeFillColor.Black;
+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;
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 74c3cf48709a5..c52d45b298ca9 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,7 +4,7 @@ import type {
   BrushProps,
   ColorScheme,
 } from '@blocksuite/affine-model';
-import { LINE_COLORS, LineWidth } from '@blocksuite/affine-model';
+import { LineWidth, PALETTES } 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';
@@ -138,7 +138,7 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) {
               .color=${selectedColor}
               .colors=${colors}
               .colorType=${type}
-              .palettes=${LINE_COLORS}
+              .palettes=${PALETTES}
             >
             </edgeless-color-picker-button>
           `;
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 561f11493191e..ce96818786b07 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,8 +28,8 @@ import {
   ConnectorMode,
   DEFAULT_FRONT_END_POINT_STYLE,
   DEFAULT_REAR_END_POINT_STYLE,
-  LINE_COLORS,
   LineWidth,
+  PALETTES,
   PointStyle,
   StrokeStyle,
 } from '@blocksuite/affine-model';
@@ -373,7 +373,7 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
                 .color=${selectedColor}
                 .colors=${colors}
                 .colorType=${type}
-                .palettes=${LINE_COLORS}
+                .palettes=${PALETTES}
                 .hollowCircle=${true}
               >
                 <div
@@ -390,7 +390,6 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
                     selectedLineSize: selectedLineSize,
                     selectedLineStyle: selectedLineStyle,
                     onClick: (e: LineStyleEvent) => this._setConnectorStroke(e),
-                    lineStyles: [StrokeStyle.Solid, StrokeStyle.Dash],
                   })}
                 </div>
                 <editor-toolbar-separator
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 14444eebb4926..7c3a048906e0e 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,9 @@ import { renderToolbarSeparator } from '@blocksuite/affine-components/toolbar';
 import {
   type ColorScheme,
   DEFAULT_NOTE_HEIGHT,
-  FRAME_BACKGROUND_COLORS,
   type FrameBlockModel,
   NoteDisplayMode,
+  PALETTES,
 } from '@blocksuite/affine-model';
 import { matchFlavours } from '@blocksuite/affine-shared/utils';
 import { GfxExtensionIdentifier } from '@blocksuite/block-std/gfx';
@@ -130,8 +130,7 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
     const len = frames.length;
     const onlyOne = len === 1;
     const colorScheme = this.edgeless.surface.renderer.getColorScheme();
-    const background =
-      getMostCommonColor(frames, colorScheme) ?? '--affine-palette-transparent';
+    const background = getMostCommonColor(frames, colorScheme) ?? 'transparent';
 
     return join(
       [
@@ -204,7 +203,7 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
                 .color=${background}
                 .colors=${colors}
                 .colorType=${type}
-                .palettes=${FRAME_BACKGROUND_COLORS}
+                .palettes=${PALETTES}
               >
               </edgeless-color-picker-button>
             `;
@@ -225,7 +224,7 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
             >
               <edgeless-color-panel
                 .value=${background}
-                .options=${FRAME_BACKGROUND_COLORS}
+                .palettes=${PALETTES}
                 @select=${(e: ColorEvent) => this._setFrameBackground(e.detail)}
               >
               </edgeless-color-panel>
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 ae609dec6b25a..41b83d2d5053f 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
@@ -15,7 +15,7 @@ import {
 import {
   type ColorScheme,
   DEFAULT_NOTE_BACKGROUND_COLOR,
-  NOTE_BACKGROUND_COLORS,
+  NOTE_BACKGROUND_PALETTES,
   type NoteBlockModel,
   NoteDisplayMode,
   type StrokeStyle,
@@ -319,7 +319,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
                   .color=${background}
                   .colorType=${type}
                   .colors=${colors}
-                  .palettes=${NOTE_BACKGROUND_COLORS}
+                  .palettes=${NOTE_BACKGROUND_PALETTES}
                 >
                 </edgeless-color-picker-button>
               `;
@@ -340,7 +340,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
               >
                 <edgeless-color-panel
                   .value=${background}
-                  .options=${NOTE_BACKGROUND_COLORS}
+                  .options=${NOTE_BACKGROUND_PALETTES}
                   @select=${(e: ColorEvent) => this._setBackground(e.detail)}
                 >
                 </edgeless-color-panel>
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 810c17157f944..aee5e6e823320 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
@@ -21,8 +21,7 @@ import {
   getShapeType,
   LineWidth,
   MindmapElementModel,
-  SHAPE_FILL_COLORS,
-  SHAPE_STROKE_COLORS,
+  PALETTES,
   ShapeStyle,
   StrokeStyle,
 } from '@blocksuite/affine-model';
@@ -96,7 +95,7 @@ function getMostCommonFillColor(
         ? (ele.fillColor[colorScheme] ?? ele.fillColor.normal ?? null)
         : ele.fillColor;
     }
-    return '--affine-palette-transparent';
+    return 'transparent';
   });
   const max = maxBy(Object.entries(colors), ([_k, count]) => count);
   return max ? (max[0] as string) : null;
@@ -345,7 +344,7 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
                 .color=${selectedFillColor}
                 .colors=${colors}
                 .colorType=${type}
-                .palettes=${SHAPE_FILL_COLORS}
+                .palettes=${PALETTES}
               >
               </edgeless-color-picker-button>
             `;
@@ -368,7 +367,7 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
                 role="listbox"
                 aria-label="Fill colors"
                 .value=${selectedFillColor}
-                .options=${SHAPE_FILL_COLORS}
+                .palettes=${PALETTES}
                 @select=${(e: ColorEvent) => this._setShapeFillColor(e.detail)}
               >
               </edgeless-color-panel>
@@ -393,7 +392,7 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
                 .color=${selectedStrokeColor}
                 .colors=${colors}
                 .colorType=${type}
-                .palettes=${SHAPE_STROKE_COLORS}
+                .palettes=${PALETTES}
                 .hollowCircle=${true}
               >
                 <div
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 a03fc1f3760fe..75daaa17fa20e 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
@@ -18,7 +18,7 @@ import {
   FontFamily,
   FontStyle,
   FontWeight,
-  LINE_COLORS,
+  PALETTES,
   ShapeElementModel,
   TextAlign,
   TextElementModel,
@@ -391,7 +391,7 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) {
                 .color=${selectedColor}
                 .colors=${colors}
                 .colorType=${type}
-                .palettes=${LINE_COLORS}
+                .palettes=${PALETTES}
               >
               </edgeless-color-picker-button>
             `;
@@ -412,6 +412,7 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) {
             >
               <edgeless-color-panel
                 .value=${selectedColor}
+                .palettes=${PALETTES}
                 @select=${this._setTextColor}
               ></edgeless-color-panel>
             </editor-menu-button>
diff --git a/blocksuite/blocks/src/root-block/widgets/pie-menu/components/pie-node-content.ts b/blocksuite/blocks/src/root-block/widgets/pie-menu/components/pie-node-content.ts
index 70c04b00c400b..69e237712fa14 100644
--- a/blocksuite/blocks/src/root-block/widgets/pie-menu/components/pie-node-content.ts
+++ b/blocksuite/blocks/src/root-block/widgets/pie-menu/components/pie-node-content.ts
@@ -2,7 +2,6 @@ import { assertEquals } from '@blocksuite/global/utils';
 import { css, html, LitElement, type PropertyValues } from 'lit';
 import { property, query } from 'lit/decorators.js';
 
-import { ColorUnit } from '../../../edgeless/components/panel/color-panel.js';
 import type { PieNode } from '../node.js';
 import { isSubmenuNode } from '../utils.js';
 
@@ -45,7 +44,11 @@ export class PieNodeContent extends LitElement {
         'IPieSubMenuNode.role with color-picker should have children of type color'
       );
       const { color, hollowCircle } = hoveredNode.model;
-      return ColorUnit(color, { hollowCircle });
+      return html`<edgeless-color-button
+        class="large"
+        .color=${color}
+        .hollowCircle=${hollowCircle}
+      ></edgeless-color-button>`;
     }
 
     const { label } = model;
diff --git a/blocksuite/blocks/src/root-block/widgets/pie-menu/config.ts b/blocksuite/blocks/src/root-block/widgets/pie-menu/config.ts
index b2c043bb83775..bd91ae5da3336 100644
--- a/blocksuite/blocks/src/root-block/widgets/pie-menu/config.ts
+++ b/blocksuite/blocks/src/root-block/widgets/pie-menu/config.ts
@@ -27,9 +27,9 @@ import {
   ConnectorMode,
   LINE_COLORS,
   SHAPE_FILL_COLORS,
-  SHAPE_STROKE_COLORS,
   ShapeStyle,
   ShapeType,
+  STROKE_COLORS,
 } from '@blocksuite/affine-model';
 import {
   EditPropsStore,
@@ -330,7 +330,7 @@ pie.colorPicker({
     });
     updateShapeOverlay(rootComponent);
   },
-  colors: SHAPE_STROKE_COLORS.map(color => ({ color, name: 'Color' })),
+  colors: STROKE_COLORS.map(color => ({ color, name: 'Color' })),
 });
 
 pie.endSubmenu();
diff --git a/blocksuite/blocks/src/root-block/widgets/pie-menu/pie-builder.ts b/blocksuite/blocks/src/root-block/widgets/pie-menu/pie-builder.ts
index 8d4246ea739a8..014538635e28b 100644
--- a/blocksuite/blocks/src/root-block/widgets/pie-menu/pie-builder.ts
+++ b/blocksuite/blocks/src/root-block/widgets/pie-menu/pie-builder.ts
@@ -1,6 +1,6 @@
 import { assertExists } from '@blocksuite/global/utils';
+import { html } from 'lit';
 
-import { ColorUnit } from '../../edgeless/components/panel/color-panel.js';
 import type {
   ActionFunction,
   PieColorNodeModel,
@@ -117,7 +117,11 @@ export class PieMenuBuilder {
     const icon = (ctx: PieMenuContext) => {
       const color = props.active(ctx);
 
-      return ColorUnit(color, { hollowCircle: hollow });
+      return html`<edgeless-color-button
+        class="large"
+        .color=${color}
+        .hollowCircle=${hollow}
+      ></edgeless-color-button>`;
     };
 
     const colorPickerNode: PieSubmenuNodeModel = {
@@ -127,7 +131,12 @@ export class PieMenuBuilder {
       role: 'color-picker',
       openOnHover: props.openOnHover ?? true,
       children: props.colors.map(({ color }) => ({
-        icon: () => ColorUnit(color, { hollowCircle: hollow }),
+        icon: () =>
+          html`<edgeless-color-button
+            class="large"
+            .color=${color}
+            .hollowCircle=${hollow}
+          ></edgeless-color-button>`,
         type: 'color',
         hollowCircle: hollow,
         label: color,
diff --git a/blocksuite/presets/package.json b/blocksuite/presets/package.json
index 03ffbd32ba2b8..009e076e6789c 100644
--- a/blocksuite/presets/package.json
+++ b/blocksuite/presets/package.json
@@ -23,7 +23,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lottiefiles/dotlottie-wc": "^0.4.0",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "lit": "^3.2.0",
     "zod": "^3.23.8"
   },
diff --git a/blocksuite/presets/src/__tests__/edgeless/last-props.spec.ts b/blocksuite/presets/src/__tests__/edgeless/last-props.spec.ts
index ae62d6884e453..13ee31b49f51a 100644
--- a/blocksuite/presets/src/__tests__/edgeless/last-props.spec.ts
+++ b/blocksuite/presets/src/__tests__/edgeless/last-props.spec.ts
@@ -13,7 +13,6 @@ import {
   type FrameBlockModel,
   getSurfaceBlock,
   LayoutType,
-  LineColor,
   type MindmapElementModel,
   MindmapStyle,
   NoteBackgroundColor,
@@ -22,6 +21,7 @@ import {
   type ShapeElementModel,
   ShapeFillColor,
   ShapeType,
+  StrokeColor,
   type TextElementModel,
 } from '@blocksuite/blocks';
 import { assertExists } from '@blocksuite/global/utils';
@@ -124,7 +124,7 @@ describe('apply last props', () => {
     const id = service.crud.addElement('connector', { mode: 0 });
     assertExists(id);
     const connector = service.getElementById(id) as ConnectorElementModel;
-    expect(connector.stroke).toBe(LineColor.Grey);
+    expect(connector.stroke).toBe(StrokeColor.Grey);
     expect(connector.strokeWidth).toBe(2);
     expect(connector.strokeStyle).toBe('solid');
     expect(connector.frontEndpointStyle).toBe('None');
@@ -137,7 +137,7 @@ describe('apply last props', () => {
     expect(connector2.strokeWidth).toBe(10);
     service.crud.updateElement(id2, {
       labelStyle: {
-        color: LineColor.Magenta,
+        color: StrokeColor.Magenta,
         fontFamily: FontFamily.Kalam,
       },
     });
@@ -146,7 +146,7 @@ describe('apply last props', () => {
     assertExists(id3);
     const connector3 = service.getElementById(id3) as ConnectorElementModel;
     expect(connector3.strokeWidth).toBe(10);
-    expect(connector3.labelStyle.color).toBe(LineColor.Magenta);
+    expect(connector3.labelStyle.color).toBe(StrokeColor.Magenta);
     expect(connector3.labelStyle.fontFamily).toBe(FontFamily.Kalam);
   });
 
@@ -154,10 +154,7 @@ describe('apply last props', () => {
     const id = service.crud.addElement('brush', {});
     assertExists(id);
     const brush = service.getElementById(id) as BrushElementModel;
-    expect(brush.color).toEqual({
-      dark: LineColor.White,
-      light: LineColor.Black,
-    });
+    expect(brush.color).toEqual(StrokeColor.Black);
     expect(brush.lineWidth).toBe(4);
     service.crud.updateElement(id, { lineWidth: 10 });
     const secondBrush = service.getElementById(
@@ -204,14 +201,14 @@ describe('apply last props', () => {
     expect(text.color).toBe(DEFAULT_TEXT_COLOR);
     expect(text.fontFamily).toBe(FontFamily.Inter);
     service.crud.updateElement(id, {
-      color: LineColor.Green,
+      color: StrokeColor.Green,
       fontFamily: FontFamily.OrelegaOne,
     });
 
     const id2 = service.crud.addBlock('affine:edgeless-text', {}, surface!.id);
     assertExists(id2);
     const text2 = service.getElementById(id2) as EdgelessTextBlockModel;
-    expect(text2.color).toBe(LineColor.Green);
+    expect(text2.color).toBe(StrokeColor.Green);
     expect(text2.fontFamily).toBe(FontFamily.OrelegaOne);
   });
 
@@ -242,7 +239,7 @@ describe('apply last props', () => {
     const id = service.crud.addBlock('affine:frame', {}, surface!.id);
     assertExists(id);
     const note = service.getElementById(id) as FrameBlockModel;
-    expect(note.background).toBe('--affine-palette-transparent');
+    expect(note.background).toBe('transparent');
     service.crud.updateElement(id, {
       background: FrameBackgroundColor.Purple,
     });
diff --git a/blocksuite/presets/src/__tests__/edgeless/surface-model.spec.ts b/blocksuite/presets/src/__tests__/edgeless/surface-model.spec.ts
index 6a9a94a967cf4..b3d0b1aefeb26 100644
--- a/blocksuite/presets/src/__tests__/edgeless/surface-model.spec.ts
+++ b/blocksuite/presets/src/__tests__/edgeless/surface-model.spec.ts
@@ -1,8 +1,9 @@
-import type {
-  BrushElementModel,
-  GroupElementModel,
-  ShapeElementModel,
-  SurfaceBlockModel,
+import {
+  type BrushElementModel,
+  type GroupElementModel,
+  type ShapeElementModel,
+  StrokeColor,
+  type SurfaceBlockModel,
 } from '@blocksuite/blocks';
 import { beforeEach, describe, expect, test, vi } from 'vitest';
 
@@ -71,7 +72,7 @@ describe('element model', () => {
     const element = model.getElementById(id)! as ShapeElementModel;
 
     expect(element.index).toBe('a0');
-    expect(element.strokeColor).toBe('--affine-palette-line-yellow');
+    expect(element.strokeColor).toBe(StrokeColor.Yellow);
     expect(element.strokeWidth).toBe(4);
   });
 
@@ -93,9 +94,7 @@ describe('element model', () => {
 
     const element = model.getElementById(id)! as ShapeElementModel;
 
-    expect(element.yMap.get('strokeColor')).toBe(
-      '--affine-palette-line-yellow'
-    );
+    expect(element.yMap.get('strokeColor')).toBe(StrokeColor.Yellow);
 
     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 9de5a4509a16f..74d3974901558 100644
--- a/blocksuite/tests-legacy/attachment.spec.ts
+++ b/blocksuite/tests-legacy/attachment.spec.ts
@@ -144,7 +144,7 @@ test('can insert attachment from slash menu', async ({ page }) => {
     page,
     `
 <affine:note
-  prop:background="--affine-note-background-white"
+  prop:background="--affine-v2-edgeless-note-white"
   prop:displayMode="both"
   prop:edgeless={
     Object {
@@ -191,7 +191,7 @@ test('should undo/redo works for attachment', async ({ page }) => {
   await assertStoreMatchJSX(
     page,
     `  <affine:note
-  prop:background="--affine-note-background-white"
+  prop:background="--affine-v2-edgeless-note-white"
   prop:displayMode="both"
   prop:edgeless={
     Object {
@@ -229,7 +229,7 @@ test('should undo/redo works for attachment', async ({ page }) => {
     page,
     `
 <affine:note
-  prop:background="--affine-note-background-white"
+  prop:background="--affine-v2-edgeless-note-white"
   prop:displayMode="both"
   prop:edgeless={
     Object {
@@ -260,7 +260,7 @@ test('should undo/redo works for attachment', async ({ page }) => {
     page,
     `
 <affine:note
-  prop:background="--affine-note-background-white"
+  prop:background="--affine-v2-edgeless-note-white"
   prop:displayMode="both"
   prop:edgeless={
     Object {
@@ -348,7 +348,7 @@ test('should turn attachment to image works', async ({ page }) => {
     page,
     `
 <affine:note
-  prop:background="--affine-note-background-white"
+  prop:background="--affine-v2-edgeless-note-white"
   prop:displayMode="both"
   prop:edgeless={
     Object {
@@ -382,7 +382,7 @@ test('should turn attachment to image works', async ({ page }) => {
     page,
     `
 <affine:note
-  prop:background="--affine-note-background-white"
+  prop:background="--affine-v2-edgeless-note-white"
   prop:displayMode="both"
   prop:edgeless={
     Object {
@@ -431,7 +431,7 @@ test('should attachment can be deleted', async ({ page }) => {
     page,
     `
 <affine:note
-  prop:background="--affine-note-background-white"
+  prop:background="--affine-v2-edgeless-note-white"
   prop:displayMode="both"
   prop:edgeless={
     Object {
@@ -475,7 +475,7 @@ test.fixme(`support dragging attachment block directly`, async ({ page }) => {
   await assertStoreMatchJSX(
     page,
     `  <affine:note
-  prop:background="--affine-note-background-white"
+  prop:background="--affine-v2-edgeless-note-white"
   prop:displayMode="both"
   prop:edgeless={
     Object {
@@ -531,7 +531,7 @@ test.fixme(`support dragging attachment block directly`, async ({ page }) => {
     page,
     /*xml*/ `<affine:page>
   <affine:note
-    prop:background="--affine-note-background-white"
+    prop:background="--affine-v2-edgeless-note-white"
     prop:displayMode="both"
     prop:edgeless={
       Object {
@@ -589,7 +589,7 @@ test.fixme(`support dragging attachment block directly`, async ({ page }) => {
     page,
     /*xml*/ `<affine:page>
   <affine:note
-    prop:background="--affine-note-background-white"
+    prop:background="--affine-v2-edgeless-note-white"
     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 ab8ee5c56cf8a..9ab0af6510bda 100644
--- a/blocksuite/tests-legacy/clipboard/list.spec.ts
+++ b/blocksuite/tests-legacy/clipboard/list.spec.ts
@@ -441,7 +441,7 @@ test(scoped`should copy and paste of database work`, async ({ page }) => {
     /*xml*/ `
 <affine:page>
   <affine:note
-    prop:background="--affine-note-background-white"
+    prop:background="--affine-v2-edgeless-note-white"
     prop:displayMode="both"
     prop:edgeless={
       Object {
@@ -491,7 +491,7 @@ test(scoped`should copy and paste of database work`, async ({ page }) => {
     /*xml*/ `
 <affine:page>
   <affine:note
-    prop:background="--affine-note-background-white"
+    prop:background="--affine-v2-edgeless-note-white"
     prop:displayMode="both"
     prop:edgeless={
       Object {
@@ -574,7 +574,7 @@ test(scoped`paste note block with background`, async ({ page }) => {
   await selectNoteInEdgeless(page, ids.noteId);
 
   await triggerComponentToolbarAction(page, 'changeNoteColor');
-  const color = '--affine-note-background-grey';
+  const color = '--affine-v2-edgeless-note-grey';
   await changeEdgelessNoteBackground(page, color);
   await assertEdgelessNoteBackground(page, ids.noteId, color);
 
diff --git a/blocksuite/tests-legacy/edgeless/auto-complete.spec.ts b/blocksuite/tests-legacy/edgeless/auto-complete.spec.ts
index 253cc60478a3f..b8776ffff7d6c 100644
--- a/blocksuite/tests-legacy/edgeless/auto-complete.spec.ts
+++ b/blocksuite/tests-legacy/edgeless/auto-complete.spec.ts
@@ -1,4 +1,8 @@
-import { DEFAULT_NOTE_BACKGROUND_COLOR } from '@blocksuite/affine-model';
+import {
+  DEFAULT_NOTE_BACKGROUND_COLOR,
+  ShapeFillColor,
+  StrokeColor,
+} from '@blocksuite/affine-model';
 import { expect, type Page } from '@playwright/test';
 
 import { clickView, moveView } from '../utils/actions/click.js';
@@ -135,10 +139,10 @@ 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 = '--affine-palette-line-red';
+      const lineColor = StrokeColor.Red;
       await changeShapeStrokeColor(page, lineColor);
       await triggerComponentToolbarAction(page, 'changeShapeFillColor');
-      const color = '--affine-palette-shape-green';
+      const color = ShapeFillColor.Green;
       await changeShapeFillColor(page, color);
       await dragBetweenViewCoords(page, [120, 50], [200, 0]);
 
@@ -184,7 +188,7 @@ test.describe('auto-complete', () => {
       await waitNextFrame(page);
 
       await triggerComponentToolbarAction(page, 'changeNoteColor');
-      const noteColor = '--affine-note-background-red';
+      const noteColor = '--affine-v2-edgeless-note-red';
       await changeEdgelessNoteBackground(page, noteColor);
 
       // move to arrow icon
diff --git a/blocksuite/tests-legacy/edgeless/brush.spec.ts b/blocksuite/tests-legacy/edgeless/brush.spec.ts
index 893dc2a1ee5c0..54b395d6e21f7 100644
--- a/blocksuite/tests-legacy/edgeless/brush.spec.ts
+++ b/blocksuite/tests-legacy/edgeless/brush.spec.ts
@@ -1,3 +1,4 @@
+import { StrokeColor } from '@blocksuite/affine-model';
 import { expect } from '@playwright/test';
 
 import {
@@ -79,7 +80,7 @@ test('add brush element with color', async ({ page }) => {
   await switchEditorMode(page);
 
   await setEdgelessTool(page, 'brush');
-  const color = '--affine-palette-line-blue';
+  const color = StrokeColor.Blue;
   await selectBrushColor(page, color);
 
   const start = { x: 100, y: 100 };
@@ -100,7 +101,7 @@ test('keep same color when mouse mode switched back to brush', async ({
   await deleteAll(page);
 
   await setEdgelessTool(page, 'brush');
-  const color = '--affine-palette-line-blue';
+  const color = StrokeColor.Blue;
   await selectBrushColor(page, color);
   const start = { x: 200, y: 200 };
   const end = { x: 300, y: 300 };
@@ -123,7 +124,7 @@ test('add brush element with different size', async ({ page }) => {
 
   await setEdgelessTool(page, 'brush');
   await selectBrushSize(page, 'ten');
-  const color = '--affine-palette-line-blue';
+  const color = StrokeColor.Blue;
   await selectBrushColor(page, color);
 
   const start = { x: 100, y: 100 };
@@ -144,8 +145,8 @@ test('add brush element with different size', async ({ page }) => {
 
   await assertEdgelessColorSameWithHexColor(page, color, topEdge);
   await assertEdgelessColorSameWithHexColor(page, color, bottomEdge);
-  assertSameColor(nearTopEdge, '#4f90ff');
-  assertSameColor(nearBottomEdge, '#4f90ff');
+  assertSameColor(nearTopEdge, '#84cfff');
+  assertSameColor(nearBottomEdge, '#84cfff');
 });
 
 test('change brush element size by component-toolbar', async ({ page }) => {
diff --git a/blocksuite/tests-legacy/edgeless/color-picker.spec.ts b/blocksuite/tests-legacy/edgeless/color-picker.spec.ts
index 8e137be135c2f..6f9f2a53fc8f1 100644
--- a/blocksuite/tests-legacy/edgeless/color-picker.spec.ts
+++ b/blocksuite/tests-legacy/edgeless/color-picker.spec.ts
@@ -25,12 +25,12 @@ function getColorPickerButtonWithClass(page: Page, classes: string) {
 }
 
 function getCurrentColorUnitButton(locator: Locator) {
-  return locator.locator('edgeless-color-button').locator('.color-unit');
+  return locator.locator('edgeless-color-button').locator('.color-unit').nth(0);
 }
 
 function getCurrentColor(locator: Locator) {
   return locator.evaluate(ele =>
-    getComputedStyle(ele).getPropertyValue('background-color')
+    getComputedStyle(ele.querySelector('svg')!).getPropertyValue('fill')
   );
 }
 
@@ -116,7 +116,7 @@ test.describe('basic functions', () => {
     const currentColorUnit = getCurrentColorUnitButton(fillColorButton);
 
     const value = await getCurrentColor(currentColorUnit);
-    await expect(currentColorUnit).toHaveCSS('background-color', value);
+    await expect(currentColorUnit.locator('svg')).toHaveCSS('fill', value);
 
     const customButton = getCustomButton(fillColorButton);
 
diff --git a/blocksuite/tests-legacy/edgeless/connector/connector.spec.ts b/blocksuite/tests-legacy/edgeless/connector/connector.spec.ts
index 049daee8fbcb1..38fbf3fa7d227 100644
--- a/blocksuite/tests-legacy/edgeless/connector/connector.spec.ts
+++ b/blocksuite/tests-legacy/edgeless/connector/connector.spec.ts
@@ -1,3 +1,4 @@
+import { StrokeColor } from '@blocksuite/affine-model';
 import { expect } from '@playwright/test';
 
 import {
@@ -148,7 +149,7 @@ test('change connector line width', async ({ page }) => {
 
   await page.mouse.click(start.x + 5, start.y);
   await triggerComponentToolbarAction(page, 'changeConnectorStrokeColor');
-  await changeConnectorStrokeColor(page, '--affine-palette-line-teal');
+  await changeConnectorStrokeColor(page, StrokeColor.Grey);
 
   await triggerComponentToolbarAction(page, 'changeConnectorStrokeStyles');
   await changeConnectorStrokeWidth(page, 5);
@@ -173,7 +174,7 @@ test('change connector stroke style', async ({ page }) => {
 
   await page.mouse.click(start.x + 5, start.y);
   await triggerComponentToolbarAction(page, 'changeConnectorStrokeColor');
-  await changeConnectorStrokeColor(page, '--affine-palette-line-teal');
+  await changeConnectorStrokeColor(page, StrokeColor.Grey);
 
   await triggerComponentToolbarAction(page, 'changeConnectorStrokeStyles');
   await changeConnectorStrokeStyle(page, 'dash');
diff --git a/blocksuite/tests-legacy/edgeless/note/note.spec.ts b/blocksuite/tests-legacy/edgeless/note/note.spec.ts
index fb5e422e93230..2a64bddd9a401 100644
--- a/blocksuite/tests-legacy/edgeless/note/note.spec.ts
+++ b/blocksuite/tests-legacy/edgeless/note/note.spec.ts
@@ -304,12 +304,12 @@ test('change note color', async ({ page }) => {
   await assertEdgelessNoteBackground(
     page,
     noteId,
-    '--affine-note-background-white'
+    '--affine-v2-edgeless-note-white'
   );
 
   await selectNoteInEdgeless(page, noteId);
   await triggerComponentToolbarAction(page, 'changeNoteColor');
-  const color = '--affine-note-background-green';
+  const color = '--affine-v2-edgeless-note-green';
   await changeEdgelessNoteBackground(page, color);
   await assertEdgelessNoteBackground(page, noteId, color);
 });
diff --git a/blocksuite/tests-legacy/edgeless/shape.spec.ts b/blocksuite/tests-legacy/edgeless/shape.spec.ts
index 3af1f2bd5ba80..a4babb9fe6055 100644
--- a/blocksuite/tests-legacy/edgeless/shape.spec.ts
+++ b/blocksuite/tests-legacy/edgeless/shape.spec.ts
@@ -1,3 +1,4 @@
+import { ShapeFillColor, StrokeColor } from '@blocksuite/affine-model';
 import { expect, type Page } from '@playwright/test';
 
 import {
@@ -167,7 +168,7 @@ 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 = '--affine-palette-shape-teal';
+  const color = ShapeFillColor.Grey;
   await changeShapeFillColor(page, color);
   await page.waitForTimeout(50);
   const [picked] = await pickColorAtPoints(page, [
@@ -190,7 +191,7 @@ 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 = '--affine-palette-line-teal';
+  const color = StrokeColor.Grey;
   await changeShapeStrokeColor(page, color);
   await page.waitForTimeout(50);
   const [picked] = await pickColorAtPoints(page, [
@@ -338,7 +339,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, '--affine-palette-line-teal');
+  await changeShapeStrokeColor(page, StrokeColor.Magenta);
 
   await triggerComponentToolbarAction(page, 'changeShapeStrokeStyles');
   await changeShapeStrokeWidth(page);
@@ -361,7 +362,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, '--affine-palette-line-teal');
+  await changeShapeStrokeColor(page, StrokeColor.Blue);
 
   await triggerComponentToolbarAction(page, 'changeShapeStrokeStyles');
   await changeShapeStrokeStyle(page, 'dash');
@@ -548,7 +549,7 @@ test('change shape style', async ({ page }) => {
 
   await page.mouse.click(start.x + 5, start.y + 5);
   await triggerComponentToolbarAction(page, 'changeShapeStrokeColor');
-  const color = '--affine-palette-line-teal';
+  const color = StrokeColor.Purple;
   await changeShapeStrokeColor(page, color);
   await page.waitForTimeout(50);
   const [picked] = await pickColorAtPoints(page, [[start.x + 1, start.y + 1]]);
diff --git a/blocksuite/tests-legacy/link.spec.ts b/blocksuite/tests-legacy/link.spec.ts
index 568a3eb8aa7c1..a2e4c3dbdb3a6 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-note-background-blue"
+    prop:background="--affine-v2-edgeless-note-white"
     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/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 10d8e45e23e25..843eb81aa52f6 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 d902db61ddad6..db5fa1b07dbc0 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 b5c3f610836b1..491ed8236484e 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 972fa40850092..954961ef5651a 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,234]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 b90751b9e75af..f949b1b5596ab 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 0d09533b20a88..14142efb9d1e0 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 cba48a995627f..0dfcd5aa4f0c5 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 a1cf2bc7e3462..e976f0683f4e5 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 fa4138915dd8c..50aa56ab8e9ac 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 9a3c75eb53015..d8e3252e69edd 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 f58738152c7b4..c28ac11214bb9 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 a89a9ca431909..f36048f47895b 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "index": "a0",
         "hidden": false,
         "displayMode": "both",
@@ -110,4 +110,4 @@
       ]
     }
   ]
-}
\ No newline at end of file
+}
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 c9b458d4395a9..efa52affa8fa2 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "index": "a0",
         "hidden": false,
         "displayMode": "both",
@@ -110,4 +110,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 d2090527c2176..962a981684b2f 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "index": "a0",
         "hidden": false,
         "displayMode": "both",
@@ -53,4 +53,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 c9e9f94e83414..b1cc7f93d4277 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 b4999d04e2bd6..f67273240fa85 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 5adfa07699158..9bdfa2500d818 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 e6f186417e971..ffb61bcbd884a 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 3f8d89f149f21..b00a4548f5e21 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 2140c127eeb28..a4b4b4e23f722 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 0ce43f6161599..5493ce26bb505 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 5db1d16b72d2a..e6bb65e4ad12e 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 6a79a3a76e98e..8fc72aee3f84a 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 41b96fa369f8d..6810d47d080f4 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 63f501b5eafd9..8567aad2cd813 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 e2a658224e5e7..ac561212a8833 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 5c6d65e23cd0d..a68276e76247e 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 de7599d6d0817..cd6d7e3979415 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 f05e973912a2e..9f5d272314d4e 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 8aa721ad61799..2d3183ea97f31 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 822a308be925b..c0350fedb1798 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 51622ddeb6d78..fc05738484700 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 faedc471497ba..3842295488eea 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "index": "a0",
         "hidden": false,
         "displayMode": "both",
@@ -183,4 +183,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 e04d86f006d36..4ea493a6ff77b 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "index": "a0",
         "hidden": false,
         "displayMode": "both",
@@ -183,4 +183,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 136df9a3faa74..966a1b6331fd6 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-palette-line-blue",
+            "color": "--affine-v2-edgeless-palette-medium-blueMedium",
             "fontFamily": "blocksuite:surface:Inter",
             "fontStyle": "normal",
             "fontWeight": "400",
@@ -74,7 +74,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 26b0b16c696ed..a10d65aca7d49 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-palette-line-blue",
+            "color": "--affine-v2-edgeless-palette-medium-blueMedium",
             "fontFamily": "blocksuite:surface:Inter",
             "fontStyle": "normal",
             "fontWeight": "400",
@@ -65,7 +65,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 38bceda452dea..42634c6f70dc5 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-palette-line-blue",
+            "color": "--affine-v2-edgeless-palette-medium-blueMedium",
             "fontFamily": "blocksuite:surface:Inter",
             "fontStyle": "normal",
             "fontWeight": "400",
@@ -64,7 +64,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 ad9c08c538bc1..503563c1bd1d9 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-palette-line-blue",
+            "color": "--affine-v2-edgeless-palette-medium-blueMedium",
             "fontFamily": "blocksuite:surface:Inter",
             "fontStyle": "normal",
             "fontWeight": "400",
@@ -65,7 +65,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 2915f2d3ea10c..0acdef494eabf 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-palette-line-blue",
+            "color": "--affine-v2-edgeless-palette-medium-blueMedium",
             "fontFamily": "blocksuite:surface:Inter",
             "fontStyle": "normal",
             "fontWeight": "400",
@@ -65,7 +65,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 8696508b7b647..8b8f4df2b41ab 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-palette-line-blue",
+            "color": "--affine-v2-edgeless-palette-medium-blueMedium",
             "fontFamily": "blocksuite:surface:Inter",
             "fontStyle": "normal",
             "fontWeight": "400",
@@ -72,7 +72,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,48]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 b42fa3f133c7b..fb22906247dd3 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-palette-line-blue",
+            "color": "--affine-v2-edgeless-palette-medium-blueMedium",
             "fontFamily": "blocksuite:surface:Inter",
             "fontStyle": "normal",
             "fontWeight": "400",
@@ -68,7 +68,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,48]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 f79cfb43bb51f..04a02e46b3126 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-palette-line-blue",
+            "color": "--affine-v2-edgeless-palette-medium-blueMedium",
             "fontFamily": "blocksuite:surface:Inter",
             "fontStyle": "normal",
             "fontWeight": "400",
@@ -68,7 +68,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,48]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 fc2043b921934..bbca46409fe53 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 35d5c4f9fc1cf..616ba8f67824c 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 35d5c4f9fc1cf..616ba8f67824c 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 821396ae94742..b4685f071831e 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 3310a6113fe82..be8ee9e7ecc36 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 f7b8f9535280b..525e32c3ad6a4 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 b8e6d44b34fc5..a2718a1de4ebe 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 1ccc87a0d2d8a..e0293cab9dc82 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 ba6bf3c7bd7e4..d91e0e70caa1d 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 aea12cd56eeb7..9d418c32e19e0 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 359a657870028..d6339a2e7de56 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 aea12cd56eeb7..9d418c32e19e0 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 425e623f2c8fd..07fb24fbf81c6 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 37b954d36c422..c0eb5f8409f7f 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 e851e80ea9b07..a1cd97577f9b2 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 48f1782b68acd..f18ab67ce257b 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 f76f2a7b7982b..ae698abc9cd34 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 4df164a74ee1b..6f61954663c0b 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 749ef405126ed..35972683df26a 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 4a195bffe1d42..822fc5888bf40 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 4a195bffe1d42..822fc5888bf40 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 4beb61dab0774..3f9cc69066614 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 dda4f654e2703..99ddf761e1082 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 4beb61dab0774..3f9cc69066614 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 05e911d31610a..6b62ffa97f34b 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 e284ca678aa42..f0c5d387b2ffa 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 54aa2945a06c2..96519b38dff02 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 2c33f911b5c88..71bc04e7f2905 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 9c632abfd1561..81fab9818e6f6 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 5c5730a0edcf1..1eed6e52b25bc 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 4493d992ed166..5da8d71e8173d 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 3c9888aedc3fc..384d96a3dc3ca 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 4beb61dab0774..3f9cc69066614 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 c7bbeae253c58..9c7c225662dce 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 e284ca678aa42..f0c5d387b2ffa 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 e387c5f0c9740..f34e1e8c54fe9 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 8542cbc43b761..430b36675ffaa 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 2a2f09ac41eb7..502c58805bf2b 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 46f310342b7bc..479e95d315331 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 74969002ab4b7..250c4562a7c7b 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 f92e305be2f55..1f11d49479796 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 b5eaddaf55c83..e00f791a87298 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 563a1e7594358..261054509bb06 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 75e9f991214e7..413815ce8e78f 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 d902db61ddad6..db5fa1b07dbc0 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 a7c1e7d4fa741..9b7c0f23237a9 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 140fdef87eabb..985c6f997f3ec 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 022ec800e4fdb..1ec98311559f7 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 d0e2cf4630396..58a72cdb6f03b 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 51c03e53476bc..2c8067c47979f 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 1b737ee3633ed..50ed66f303413 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 d902db61ddad6..db5fa1b07dbc0 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 55cbe3dea6ef2..025e5e36fa9ce 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 dc495e4bff729..5d479d7f75cca 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 dffb438146b45..6e086175a000f 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 511d260c0a6c8..d0d2e5df3af59 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 dff5aa5b70242..70be677283e2e 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 ea0483de0947e..88a3599ca65ff 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 9c38d0ce4bafa..26dbf6c0ede1b 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 5e58ca68db293..8e21859efc24d 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 2174dc3229027..2cc3862cc90b9 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 2174dc3229027..2cc3862cc90b9 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 aea12cd56eeb7..9d418c32e19e0 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 77f254be3688c..0443262e93658 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 aea12cd56eeb7..9d418c32e19e0 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 aea12cd56eeb7..9d418c32e19e0 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 63cd6eff50854..c3a01cfcbc4b4 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 ff3339caeabb1..997c7660eb874 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 5893152dc88eb..00e34ce8e8289 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 ff3339caeabb1..997c7660eb874 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 5893152dc88eb..00e34ce8e8289 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 74e9e8fdc814c..7c68b8774028b 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 5893152dc88eb..00e34ce8e8289 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 d81b55acec365..ab46295359c8b 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 dc269e572796c..004b5aa299d24 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 34fee791fbef7..a16b2aca2dd63 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 34fee791fbef7..a16b2aca2dd63 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 26669e0fa1601..517f677f887c5 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 9d6b2f6f5f4f5..5e1550d91158b 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 d1f40cdb5d598..2cbb03a247e0f 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 d1f40cdb5d598..2cbb03a247e0f 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 d49a8a8d19904..8e1ea588cd43e 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 d9da2bbc00c76..147e963b6b203 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 d49a8a8d19904..8e1ea588cd43e 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 efa91ab5ddd92..c87227d587e1e 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 5af9598dbc839..e549de1450dea 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 efa91ab5ddd92..c87227d587e1e 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 f50c6cb9de5cb..bf6873b2f0586 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 e1635548a5e61..e0bd753647cc1 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 8eb1d2a5d8903..a375e41f56160 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 fbcb1adb5d328..1d9a136687095 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 915995696c1f6..0cef7999ff1cc 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 eb5985cb32e09..b0ccc738c9dfd 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 14784e2f8507f..af509bc4ec279 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 bd93841987cb3..081e1cb595cf0 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 e9082f36e0c4e..45152ecf1031b 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 ea46f779f8a0e..7365882502181 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 ce1357e1463d0..8f74f180ba321 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 5f33886e45df2..f88c587d872fc 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 7618c3e7ff3c0..86849c7df3f2f 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 b142b1320c3e5..8e8a5a5893de3 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 618e5372f49af..e6071616a0318 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 628adfe41ea0f..5877da225ae96 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 0487e165d1264..b6c73d2b19627 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 434bad82d698e..a90abced3d95d 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 62c225f682a87..44085016e50c7 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 934cea41964a2..92bc6b1cdb6db 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 84bc634380ad4..803ebf485b0d1 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 9395797d11107..981898cd8ac16 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 06a75e586d5db..e30d709c89e86 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 948323f6a742f..2a05668df0d0f 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 91aeefe9e9831..a01e9b6bcb6f4 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 6041eb9fae4f9..a19052cb46b1d 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 b1d0cd2303c4a..963047c6cbde6 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 25e234e5713f9..49a0041ad4577 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 4a65ef72dfe6f..1f4480d3be116 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 1ea7265dc5540..02827ec6b7214 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 5dcfb3dfa854b..21581ffd7ce18 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 f493fae0542c3..9f19aa62a1ca6 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 1ea7265dc5540..02827ec6b7214 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 4ea1706b5faba..f3cc9f20747fa 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 f5b1715e1c0ed..6ae6b4f851b87 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 f5b1715e1c0ed..6ae6b4f851b87 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 aea12cd56eeb7..9d418c32e19e0 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 f5b1715e1c0ed..6ae6b4f851b87 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 d210121ee41f0..fead36f8837e2 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 2a88fad730784..0b18904606545 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 294f40489cbeb..4c6eb301d04d0 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 294f40489cbeb..4c6eb301d04d0 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 4a3b0c356986f..e7b49aa463739 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 4a3b0c356986f..e7b49aa463739 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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
new file mode 100644
index 0000000000000..79d96fb82cf1b
--- /dev/null
+++ b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/should-unindent-native-multi-selection-block-after-tab.json
@@ -0,0 +1,92 @@
+{
+  "type": "block",
+  "id": "0",
+  "flavour": "affine:page",
+  "version": 2,
+  "props": {
+    "title": {
+      "$blocksuite:internal:text$": true,
+      "delta": []
+    }
+  },
+  "children": [
+    {
+      "type": "block",
+      "id": "1",
+      "flavour": "affine:note",
+      "version": 1,
+      "props": {
+        "xywh": "[0,0,498,92]",
+        "background": "--affine-v2-edgeless-note-white",
+        "index": "a0",
+        "hidden": false,
+        "displayMode": "both",
+        "edgeless": {
+          "style": {
+            "borderRadius": 8,
+            "borderSize": 4,
+            "borderStyle": "none",
+            "shadowType": "--affine-note-shadow-box"
+          }
+        }
+      },
+      "children": [
+        {
+          "type": "block",
+          "id": "2",
+          "flavour": "affine:paragraph",
+          "version": 1,
+          "props": {
+            "type": "text",
+            "text": {
+              "$blocksuite:internal:text$": true,
+              "delta": [
+                {
+                  "insert": "123"
+                }
+              ]
+            }
+          },
+          "children": [
+            {
+              "type": "block",
+              "id": "3",
+              "flavour": "affine:paragraph",
+              "version": 1,
+              "props": {
+                "type": "text",
+                "text": {
+                  "$blocksuite:internal:text$": true,
+                  "delta": [
+                    {
+                      "insert": "456"
+                    }
+                  ]
+                }
+              },
+              "children": []
+            },
+            {
+              "type": "block",
+              "id": "4",
+              "flavour": "affine:paragraph",
+              "version": 1,
+              "props": {
+                "type": "text",
+                "text": {
+                  "$blocksuite:internal:text$": true,
+                  "delta": [
+                    {
+                      "insert": "789"
+                    }
+                  ]
+                }
+              },
+              "children": []
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
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 561a6677532a8..5ab9555f1550d 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,7 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-note-background-white",
+        "background": "--affine-v2-edgeless-note-white",
         "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 51a318a9550e5..ae55ae67f4b5c 100644
--- a/blocksuite/tests-legacy/utils/actions/edgeless.ts
+++ b/blocksuite/tests-legacy/utils/actions/edgeless.ts
@@ -1,6 +1,10 @@
 import '../declare-test-window.js';
 
-import type { NoteBlockModel, NoteDisplayMode } from '@blocks/index.js';
+import {
+  type NoteBlockModel,
+  type NoteDisplayMode,
+  ShapeFillColor,
+} 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';
@@ -646,9 +650,10 @@ export async function rotateElementByHandle(
 }
 
 export async function selectBrushColor(page: Page, color: string) {
-  const colorButton = page.locator(
-    `edgeless-brush-menu .color-unit[aria-label="${color.toLowerCase()}"]`
-  );
+  const colorButton = page
+    .locator('edgeless-brush-menu')
+    .locator('edgeless-color-panel')
+    .locator(`.color-unit[aria-label="${color}"]`);
   await colorButton.click();
 }
 
@@ -1375,6 +1380,7 @@ export async function triggerComponentToolbarAction(
 export async function changeEdgelessNoteBackground(page: Page, color: string) {
   const colorButton = page
     .locator('edgeless-change-note-button')
+    .locator('edgeless-color-panel')
     .locator(`.color-unit[aria-label="${color}"]`);
   await colorButton.click();
 }
@@ -1410,6 +1416,7 @@ export async function changeShapeStrokeColor(page: Page, color: string) {
   const colorButton = page
     .locator('edgeless-change-shape-button')
     .locator('edgeless-color-picker-button.border-style')
+    .locator('edgeless-color-panel')
     .locator(`.color-unit[aria-label="${color}"]`);
   await colorButton.click();
 }
@@ -1535,7 +1542,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, '--affine-palette-shape-teal');
+  await changeShapeFillColor(page, ShapeFillColor.Green);
 
   const rect1 = {
     start: { x: 130, y: 130 },
@@ -1544,7 +1551,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, '--affine-palette-shape-black');
+  await changeShapeFillColor(page, ShapeFillColor.Black);
 
   const rect2 = {
     start: { x: 160, y: 160 },
@@ -1553,7 +1560,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, '--affine-palette-shape-white');
+  await changeShapeFillColor(page, ShapeFillColor.White);
 }
 
 export async function initThreeOverlapNotes(page: Page, x = 130, y = 140) {
diff --git a/blocksuite/tests-legacy/utils/asserts.ts b/blocksuite/tests-legacy/utils/asserts.ts
index 225694c6977de..36af2db514e9c 100644
--- a/blocksuite/tests-legacy/utils/asserts.ts
+++ b/blocksuite/tests-legacy/utils/asserts.ts
@@ -7,6 +7,7 @@ import type {
   RootBlockModel,
 } from '@blocks/index.js';
 import {
+  DEFAULT_NOTE_BACKGROUND_COLOR,
   DEFAULT_NOTE_HEIGHT,
   DEFAULT_NOTE_WIDTH,
 } from '@blocksuite/affine-model';
@@ -112,7 +113,7 @@ export const defaultStore = {
           'sys:children': ['2'],
           'sys:version': 1,
           'prop:xywh': `[0,0,${DEFAULT_NOTE_WIDTH}, ${DEFAULT_NOTE_HEIGHT}]`,
-          'prop:background': '--affine-note-background-white',
+          'prop:background': DEFAULT_NOTE_BACKGROUND_COLOR,
           'prop:index': 'a0',
           'prop:hidden': false,
           'prop:displayMode': 'both',
diff --git a/packages/frontend/component/package.json b/packages/frontend/component/package.json
index ba665eab0b170..759a683ebb049 100644
--- a/packages/frontend/component/package.json
+++ b/packages/frontend/component/package.json
@@ -43,7 +43,7 @@
     "@radix-ui/react-toast": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.1.5",
     "@radix-ui/react-visually-hidden": "^1.1.1",
-    "@toeverything/theme": "^1.1.2",
+    "@toeverything/theme": "^1.1.3",
     "@vanilla-extract/dynamic": "^2.1.2",
     "check-password-strength": "^2.0.10",
     "clsx": "^2.1.1",
diff --git a/packages/frontend/core/package.json b/packages/frontend/core/package.json
index f005dce36f12c..1f22293a3bef3 100644
--- a/packages/frontend/core/package.json
+++ b/packages/frontend/core/package.json
@@ -37,7 +37,7 @@
     "@radix-ui/react-toolbar": "^1.1.1",
     "@sentry/react": "^8.44.0",
     "@toeverything/pdf-viewer": "^0.1.1",
-    "@toeverything/theme": "^1.1.2",
+    "@toeverything/theme": "^1.1.3",
     "@vanilla-extract/dynamic": "^2.1.2",
     "animejs": "^3.2.2",
     "bytes": "^3.1.2",
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 6d71d0e19d584..0b54ceed6a4b1 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
@@ -14,9 +14,9 @@ import {
   FontFamilyMap,
   FontStyle,
   FontWeightMap,
-  LineColor,
-  LineColorMap,
   PointStyle,
+  StrokeColor,
+  StrokeColorMap,
   StrokeStyle,
   TextAlign,
 } from '@blocksuite/affine/blocks';
@@ -152,12 +152,12 @@ export const ConnectorSettings = () => {
 
   const currentColor = useMemo(() => {
     const color = settings.connector.stroke;
-    return getColorFromMap(color, LineColorMap);
+    return getColorFromMap(color, StrokeColorMap);
   }, [getColorFromMap, settings.connector.stroke]);
 
   const colorItems = useMemo(() => {
     const { stroke } = settings.connector;
-    return Object.entries(LineColor).map(([name, value]) => {
+    return Object.entries(StrokeColor).map(([name, value]) => {
       const handler = () => {
         editorSetting.set('connector', { stroke: value });
       };
@@ -322,7 +322,7 @@ export const ConnectorSettings = () => {
 
   const textColorItems = useMemo(() => {
     const { color } = settings.connector.labelStyle;
-    return Object.entries(LineColor).map(([name, value]) => {
+    return Object.entries(StrokeColor).map(([name, value]) => {
       const handler = () => {
         editorSetting.set('connector', {
           labelStyle: {
@@ -346,7 +346,7 @@ export const ConnectorSettings = () => {
 
   const textColor = useMemo(() => {
     const { color } = settings.connector.labelStyle;
-    return getColorFromMap(color, LineColorMap);
+    return getColorFromMap(color, StrokeColorMap);
   }, [getColorFromMap, settings]);
 
   const getElements = useCallback((doc: Doc) => {
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 c52244ebd3dfd..724ce045963e8 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,7 +2,7 @@ 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 { LineColor, LineColorMap } from '@blocksuite/affine/blocks';
+import { StrokeColor, StrokeColorMap } from '@blocksuite/affine/blocks';
 import type { Doc } from '@blocksuite/affine/store';
 import { useFramework, useLiveData } from '@toeverything/infra';
 import { useCallback, useMemo } from 'react';
@@ -22,12 +22,12 @@ export const PenSettings = () => {
   const getColorFromMap = useColor();
 
   const currentColor = useMemo(() => {
-    return getColorFromMap(settings.brush.color, LineColorMap);
+    return getColorFromMap(settings.brush.color, StrokeColorMap);
   }, [getColorFromMap, settings.brush.color]);
 
   const colorItems = useMemo(() => {
     const { color } = settings.brush;
-    return Object.entries(LineColor).map(([name, value]) => {
+    return Object.entries(StrokeColor).map(([name, value]) => {
       const handler = () => {
         editorSetting.set('brush', { color: value });
       };
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 281628135ee4b..a0855e181bc14 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
@@ -21,11 +21,11 @@ import {
   FontStyle,
   FontWeightMap,
   getShapeName,
-  LineColor,
-  LineColorMap,
   ShapeFillColor,
   ShapeStyle,
   ShapeType,
+  StrokeColor,
+  StrokeColorMap,
   StrokeStyle,
   TextAlign,
 } from '@blocksuite/affine/blocks';
@@ -226,7 +226,7 @@ export const ShapeSettings = () => {
 
   const borderColorItems = useMemo(() => {
     const { strokeColor } = settings[`shape:${currentShape}`];
-    return Object.entries(LineColor).map(([name, value]) => {
+    return Object.entries(StrokeColor).map(([name, value]) => {
       const handler = () => {
         editorSetting.set(`shape:${currentShape}`, { strokeColor: value });
       };
@@ -316,7 +316,7 @@ export const ShapeSettings = () => {
 
   const textColorItems = useMemo(() => {
     const { color } = settings[`shape:${currentShape}`];
-    return Object.entries(LineColor).map(([name, value]) => {
+    return Object.entries(StrokeColor).map(([name, value]) => {
       const handler = () => {
         editorSetting.set(`shape:${currentShape}`, { color: value });
       };
@@ -375,12 +375,12 @@ export const ShapeSettings = () => {
 
   const borderColor = useMemo(() => {
     const color = settings[`shape:${currentShape}`].strokeColor;
-    return getColorFromMap(color, LineColorMap);
+    return getColorFromMap(color, StrokeColorMap);
   }, [currentShape, getColorFromMap, settings]);
 
   const textColor = useMemo(() => {
     const color = settings[`shape:${currentShape}`].color;
-    return getColorFromMap(color, LineColorMap);
+    return getColorFromMap(color, StrokeColorMap);
   }, [currentShape, getColorFromMap, settings]);
 
   const height = currentDoc === 'flow' ? 456 : 180;
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 bdf6ddd8c6999..2c77ac117c7ae 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
@@ -12,8 +12,8 @@ import {
   FontFamilyMap,
   FontStyle,
   FontWeightMap,
-  LineColor,
-  LineColorMap,
+  StrokeColor,
+  StrokeColorMap,
   TextAlign,
 } from '@blocksuite/affine/blocks';
 import type { Doc } from '@blocksuite/affine/store';
@@ -72,7 +72,7 @@ export const TextSettings = () => {
 
   const colorItems = useMemo(() => {
     const { color } = settings['affine:edgeless-text'];
-    return Object.entries(LineColor).map(([name, value]) => {
+    return Object.entries(StrokeColor).map(([name, value]) => {
       const handler = () => {
         editorSetting.set('affine:edgeless-text', { color: value });
       };
@@ -137,7 +137,7 @@ export const TextSettings = () => {
 
   const currentColor = useMemo(() => {
     const { color } = settings['affine:edgeless-text'];
-    return getColorFromMap(color, LineColorMap);
+    return getColorFromMap(color, StrokeColorMap);
   }, [getColorFromMap, settings]);
 
   const getElements = useCallback((doc: Doc) => {
diff --git a/yarn.lock b/yarn.lock
index a0daebbbe6fe6..74b175a962417 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -295,7 +295,7 @@ __metadata:
     "@storybook/react-vite": "npm:^8.4.7"
     "@testing-library/dom": "npm:^10.4.0"
     "@testing-library/react": "npm:^16.1.0"
-    "@toeverything/theme": "npm:^1.1.2"
+    "@toeverything/theme": "npm:^1.1.3"
     "@types/react": "npm:^19.0.1"
     "@types/react-dom": "npm:^19.0.2"
     "@vanilla-extract/css": "npm:^1.16.1"
@@ -379,7 +379,7 @@ __metadata:
     "@testing-library/dom": "npm:^10.4.0"
     "@testing-library/react": "npm:^16.1.0"
     "@toeverything/pdf-viewer": "npm:^0.1.1"
-    "@toeverything/theme": "npm:^1.1.2"
+    "@toeverything/theme": "npm:^1.1.3"
     "@types/animejs": "npm:^3.1.12"
     "@types/bytes": "npm:^3.1.5"
     "@types/image-blob-reduce": "npm:^4.1.4"
@@ -3258,7 +3258,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.10"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.1"
+    "@toeverything/theme": "npm:^1.1.3"
     file-type: "npm:^19.5.0"
     lit: "npm:^3.2.0"
     minimatch: "npm:^10.0.1"
@@ -3282,7 +3282,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.10"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.1"
+    "@toeverything/theme": "npm:^1.1.3"
     lit: "npm:^3.2.0"
     minimatch: "npm:^10.0.1"
     zod: "npm:^3.23.8"
@@ -3305,7 +3305,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.10"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.1"
+    "@toeverything/theme": "npm:^1.1.3"
     lit: "npm:^3.2.0"
     minimatch: "npm:^10.0.1"
     zod: "npm:^3.23.8"
@@ -3326,7 +3326,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.10"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.1"
+    "@toeverything/theme": "npm:^1.1.3"
     "@types/mdast": "npm:^4.0.4"
     lit: "npm:^3.2.0"
     minimatch: "npm:^10.0.1"
@@ -3349,7 +3349,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.10"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.1"
+    "@toeverything/theme": "npm:^1.1.3"
     file-type: "npm:^19.5.0"
     lit: "npm:^3.2.0"
     minimatch: "npm:^10.0.1"
@@ -3372,7 +3372,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.10"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.1"
+    "@toeverything/theme": "npm:^1.1.3"
     "@types/katex": "npm:^0.16.7"
     "@types/mdast": "npm:^4.0.4"
     katex: "npm:^0.16.11"
@@ -3397,7 +3397,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.10"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.1"
+    "@toeverything/theme": "npm:^1.1.3"
     "@types/mdast": "npm:^4.0.4"
     lit: "npm:^3.2.0"
     minimatch: "npm:^10.0.1"
@@ -3422,7 +3422,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.10"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.1"
+    "@toeverything/theme": "npm:^1.1.3"
     lit: "npm:^3.2.0"
     minimatch: "npm:^10.0.1"
     zod: "npm:^3.23.8"
@@ -3443,7 +3443,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.10"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.1"
+    "@toeverything/theme": "npm:^1.1.3"
     "@types/mdast": "npm:^4.0.4"
     lit: "npm:^3.2.0"
     minimatch: "npm:^10.0.1"
@@ -3464,7 +3464,7 @@ __metadata:
     "@blocksuite/store": "workspace:*"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.1"
+    "@toeverything/theme": "npm:^1.1.3"
     "@types/dompurify": "npm:^3.0.5"
     "@types/lodash.chunk": "npm:^4.2.9"
     fractional-indexing: "npm:^3.2.0"
@@ -3490,7 +3490,7 @@ __metadata:
     "@lit/context": "npm:^1.1.2"
     "@lottiefiles/dotlottie-wc": "npm:^0.4.0"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.1"
+    "@toeverything/theme": "npm:^1.1.3"
     "@types/katex": "npm:^0.16.7"
     "@types/lodash.clonedeep": "npm:^4.5.9"
     date-fns: "npm:^4.0.0"
@@ -3529,7 +3529,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.10"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.1"
+    "@toeverything/theme": "npm:^1.1.3"
     "@types/hast": "npm:^3.0.4"
     "@types/lodash.clonedeep": "npm:^4.5.9"
     "@types/lodash.mergewith": "npm:^4"
@@ -3554,7 +3554,7 @@ __metadata:
     "@blocksuite/block-std": "workspace:*"
     "@blocksuite/global": "workspace:*"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.1"
+    "@toeverything/theme": "npm:^1.1.3"
     lit: "npm:^3.2.0"
   languageName: unknown
   linkType: soft
@@ -3621,7 +3621,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.10"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.1"
+    "@toeverything/theme": "npm:^1.1.3"
     "@types/dompurify": "npm:^3.0.5"
     "@types/hast": "npm:^3.0.4"
     "@types/katex": "npm:^0.16.7"
@@ -3674,7 +3674,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.10"
     "@lit/context": "npm:^1.1.2"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.1"
+    "@toeverything/theme": "npm:^1.1.3"
     date-fns: "npm:^4.0.0"
     lit: "npm:^3.2.0"
     zod: "npm:^3.23.8"
@@ -3789,7 +3789,7 @@ __metadata:
     "@floating-ui/dom": "npm:^1.6.10"
     "@lottiefiles/dotlottie-wc": "npm:^0.4.0"
     "@preact/signals-core": "npm:^1.8.0"
-    "@toeverything/theme": "npm:^1.1.1"
+    "@toeverything/theme": "npm:^1.1.3"
     lit: "npm:^3.2.0"
     vitest: "npm:^2.1.8"
     zod: "npm:^3.23.8"
@@ -13783,10 +13783,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@toeverything/theme@npm:^1.1.1, @toeverything/theme@npm:^1.1.2":
-  version: 1.1.2
-  resolution: "@toeverything/theme@npm:1.1.2"
-  checksum: 10/c1ae80acdc9c94acfc89f050b1cee88c7800b35db596a20f1b70d966da1293b43c3341d7bb233adfb728db3c6be7a475d06855438d3b18142d0b62b8eb9dfd4a
+"@toeverything/theme@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "@toeverything/theme@npm:1.1.3"
+  checksum: 10/d764980c9ba072ecbbe1d45a8e8996752b750254ecf9508015b1f9aca6bb575fd6aeec82280672563e8c70aa4a94674e1278fcecc499e3e0bbc449a66fd01b73
   languageName: node
   linkType: hard