From bf5608daaa45f63cb5ed8504cc721cc3a5a1c3f3 Mon Sep 17 00:00:00 2001
From: Fangdun Tsai <fundon@pindash.io>
Date: Tue, 19 Nov 2024 19:10:36 +0800
Subject: [PATCH] feat: update edgeless color palette

---
 .../affine/components/src/icons/edgeless.ts   |  15 -
 packages/affine/model/package.json            |   1 +
 .../model/src/blocks/frame/frame-model.ts     |   2 +-
 packages/affine/model/src/consts/brush.ts     |   4 +-
 packages/affine/model/src/consts/color.ts     |  94 +++++
 packages/affine/model/src/consts/connector.ts |   6 +-
 packages/affine/model/src/consts/frame.ts     |  28 +-
 packages/affine/model/src/consts/index.ts     |   1 +
 packages/affine/model/src/consts/line.ts      |  20 +-
 packages/affine/model/src/consts/note.ts      |  70 ++--
 packages/affine/model/src/consts/shape.ts     |  44 +--
 packages/affine/model/src/consts/text.ts      |   4 +-
 .../affine/shared/src/theme/css-variables.ts  |   3 -
 .../affine/shared/src/utils/zod-schema.ts     |  34 +-
 .../__tests__/adapters/markdown.unit.spec.ts  |   2 +-
 packages/blocks/src/effects.ts                |   5 -
 .../components/color-picker/button.ts         |  35 +-
 .../components/color-picker/custom-button.ts  |  38 +-
 .../edgeless/components/panel/color-panel.ts  | 323 ++++++++---------
 .../components/panel/line-styles-panel.ts     |  14 +-
 .../components/panel/line-width-panel.ts      | 342 ++++++------------
 .../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       |   5 +-
 .../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     |   8 +-
 .../element-toolbar/change-shape-button.ts    |  12 +-
 .../element-toolbar/change-text-menu.ts       |   4 +-
 .../pie-menu/components/pie-node-content.ts   |   7 +-
 .../src/root-block/widgets/pie-menu/config.ts |   4 +-
 .../widgets/pie-menu/pie-builder.ts           |  15 +-
 .../src/__tests__/edgeless/last-props.spec.ts |  19 +-
 .../surface-ref.spec.ts/surface-ref.json      |   2 +-
 tests/attachment.spec.ts                      |  20 +-
 tests/clipboard/list.spec.ts                  |   6 +-
 tests/edgeless/auto-complete.spec.ts          |  13 +-
 tests/edgeless/brush.spec.ts                  |  11 +-
 tests/edgeless/color-picker.spec.ts           |   6 +-
 tests/edgeless/connector/connector.spec.ts    |   5 +-
 tests/edgeless/note/note.spec.ts              |   5 +-
 tests/edgeless/shape.spec.ts                  |  11 +-
 .../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 +-
 tests/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/utils/actions/edgeless.ts               |  21 +-
 tests/utils/asserts.ts                        |   2 +-
 yarn.lock                                     |   1 +
 226 files changed, 925 insertions(+), 928 deletions(-)
 create mode 100644 packages/affine/model/src/consts/color.ts
 delete mode 100644 packages/blocks/src/root-block/edgeless/components/panel/one-row-color-panel.ts
 create mode 100644 tests/snapshots/selection/native.spec.ts/should-unindent-native-multi-selection-block-after-tab.json

diff --git a/packages/affine/components/src/icons/edgeless.ts b/packages/affine/components/src/icons/edgeless.ts
index d6ecfa738afe..69bac3ad8ce8 100644
--- a/packages/affine/components/src/icons/edgeless.ts
+++ b/packages/affine/components/src/icons/edgeless.ts
@@ -429,21 +429,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/packages/affine/model/package.json b/packages/affine/model/package.json
index 7c6a234127c1..5e9a8a146b43 100644
--- a/packages/affine/model/package.json
+++ b/packages/affine/model/package.json
@@ -23,6 +23,7 @@
     "@blocksuite/global": "workspace:*",
     "@blocksuite/inline": "workspace:*",
     "@blocksuite/store": "workspace:*",
+    "@toeverything/theme": "^1.1.1",
     "fractional-indexing": "^3.2.0",
     "zod": "^3.23.8"
   },
diff --git a/packages/affine/model/src/blocks/frame/frame-model.ts b/packages/affine/model/src/blocks/frame/frame-model.ts
index 7c3e54a79bf8..87dacb08cbf5 100644
--- a/packages/affine/model/src/blocks/frame/frame-model.ts
+++ b/packages/affine/model/src/blocks/frame/frame-model.ts
@@ -31,7 +31,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/packages/affine/model/src/consts/brush.ts b/packages/affine/model/src/consts/brush.ts
index cdbfc9a505ac..209d66e30e92 100644
--- a/packages/affine/model/src/consts/brush.ts
+++ b/packages/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/packages/affine/model/src/consts/color.ts b/packages/affine/model/src/consts/color.ts
new file mode 100644
index 000000000000..3616edcbd98d
--- /dev/null
+++ b/packages/affine/model/src/consts/color.ts
@@ -0,0 +1,94 @@
+import { themeToVar } from '@toeverything/theme/v2';
+import { z } from 'zod';
+
+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 type PaletteEnum = z.infer<typeof PaletteEnum>;
+
+export const StrokeColor = { Black, White, ...Medium } as const;
+
+export const STROKE_COLORS = [...MEDIUM_PALETTES, Black, White] as const;
diff --git a/packages/affine/model/src/consts/connector.ts b/packages/affine/model/src/consts/connector.ts
index 4222f985746b..97b35b7808ce 100644
--- a/packages/affine/model/src/consts/connector.ts
+++ b/packages/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/packages/affine/model/src/consts/frame.ts b/packages/affine/model/src/consts/frame.ts
index 15c98574c3cf..fd5d90841847 100644
--- a/packages/affine/model/src/consts/frame.ts
+++ b/packages/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/packages/affine/model/src/consts/index.ts b/packages/affine/model/src/consts/index.ts
index f871216c5c3a..62c70b8c25fc 100644
--- a/packages/affine/model/src/consts/index.ts
+++ b/packages/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/packages/affine/model/src/consts/line.ts b/packages/affine/model/src/consts/line.ts
index 83ff57c90232..d5402bf3aaf6 100644
--- a/packages/affine/model/src/consts/line.ts
+++ b/packages/affine/model/src/consts/line.ts
@@ -1,18 +1,34 @@
+/* eslint perfectionist/sort-enums: "off" */
+
 import { z } from 'zod';
 
 import { createEnumMap } from '../utils/enum.js';
 
 export enum LineWidth {
-  Eight = 8,
+  Two = 2,
   // Thin
   Four = 4,
   Six = 6,
+  Eight = 8,
   // Thick
   Ten = 10,
   Twelve = 12,
-  Two = 2,
 }
 
+export const LINE_WIDTHS = [
+  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/packages/affine/model/src/consts/note.ts b/packages/affine/model/src/consts/note.ts
index 7046999f9982..24f1165dd8f8 100644
--- a/packages/affine/model/src/consts/note.ts
+++ b/packages/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,40 +9,6 @@ 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 NoteBackgroundColorMap = createEnumMap(NoteBackgroundColor);
-
-export const NOTE_BACKGROUND_COLORS = [
-  NoteBackgroundColor.Yellow,
-  NoteBackgroundColor.Orange,
-  NoteBackgroundColor.Red,
-  NoteBackgroundColor.Magenta,
-  NoteBackgroundColor.Purple,
-  NoteBackgroundColor.Blue,
-  NoteBackgroundColor.Teal,
-  NoteBackgroundColor.Green,
-  NoteBackgroundColor.Black,
-  NoteBackgroundColor.Grey,
-  NoteBackgroundColor.White,
-] as const;
-
-export const DEFAULT_NOTE_BACKGROUND_COLOR = NoteBackgroundColor.White;
-
-export const NoteBackgroundColorsSchema = z.nativeEnum(NoteBackgroundColor);
-
 export enum NoteShadow {
   Box = '--affine-note-shadow-box',
   Film = '--affine-note-shadow-film',
@@ -105,3 +72,38 @@ export const DEFAULT_NOTE_CORNER = NoteCorners.Small;
 export const NoteCornersSchema = z.nativeEnum(NoteCorners);
 
 export const DEFAULT_NOTE_BORDER_SIZE = 4;
+
+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 NOTE_BACKGROUND_PALETTES = [
+  NoteBackgroundColor.Yellow,
+  NoteBackgroundColor.Orange,
+  NoteBackgroundColor.Red,
+  NoteBackgroundColor.Magenta,
+  NoteBackgroundColor.Purple,
+  NoteBackgroundColor.Blue,
+  NoteBackgroundColor.Teal,
+  NoteBackgroundColor.Green,
+  NoteBackgroundColor.Black,
+  NoteBackgroundColor.Grey,
+  NoteBackgroundColor.White,
+] as const;
+
+export const NoteBackgroundPaletteEnum = z.enum(NOTE_BACKGROUND_PALETTES);
+export type NoteBackgroundPaletteEnum = z.infer<
+  typeof NoteBackgroundPaletteEnum
+>;
+
+export const DEFAULT_NOTE_BACKGROUND_COLOR = NoteBackgroundColor.White;
diff --git a/packages/affine/model/src/consts/shape.ts b/packages/affine/model/src/consts/shape.ts
index 5ffb45967138..427bdad8263d 100644
--- a/packages/affine/model/src/consts/shape.ts
+++ b/packages/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/packages/affine/model/src/consts/text.ts b/packages/affine/model/src/consts/text.ts
index 83ca28c327c4..3f9887621ef2 100644
--- a/packages/affine/model/src/consts/text.ts
+++ b/packages/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/packages/affine/shared/src/theme/css-variables.ts b/packages/affine/shared/src/theme/css-variables.ts
index c8f417fc4163..8b747b43be58 100644
--- a/packages/affine/shared/src/theme/css-variables.ts
+++ b/packages/affine/shared/src/theme/css-variables.ts
@@ -1,6 +1,5 @@
 /* CSS variables. You need to handle all places where `CSS variables` are marked. */
 
-import { LINE_COLORS, SHAPE_FILL_COLORS } from '@blocksuite/affine-model';
 import {
   type AffineCssVariables,
   type AffineTheme,
@@ -65,8 +64,6 @@ export const ColorVariables = [
   '--affine-tag-yellow',
   '--affine-tag-orange',
   '--affine-tag-gray',
-  ...LINE_COLORS,
-  ...SHAPE_FILL_COLORS,
   '--affine-tooltip',
   '--affine-blue',
 ];
diff --git a/packages/affine/shared/src/utils/zod-schema.ts b/packages/affine/shared/src/utils/zod-schema.ts
index 95be5b7d0ec5..ef8ce0d68bdf 100644
--- a/packages/affine/shared/src/utils/zod-schema.ts
+++ b/packages/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/packages/blocks/src/__tests__/adapters/markdown.unit.spec.ts b/packages/blocks/src/__tests__/adapters/markdown.unit.spec.ts
index d9d99be9ac0e..2f45fcd008b4 100644
--- a/packages/blocks/src/__tests__/adapters/markdown.unit.spec.ts
+++ b/packages/blocks/src/__tests__/adapters/markdown.unit.spec.ts
@@ -3674,7 +3674,7 @@ hhh
       flavour: 'affine:note',
       props: {
         xywh: '[0,0,800,95]',
-        background: '--affine-note-background-white',
+        background: DEFAULT_NOTE_BACKGROUND_COLOR,
         index: 'a0',
         hidden: false,
         displayMode: 'both',
diff --git a/packages/blocks/src/effects.ts b/packages/blocks/src/effects.ts
index 0e2a35e94292..d5ebaad219f1 100644
--- a/packages/blocks/src/effects.ts
+++ b/packages/blocks/src/effects.ts
@@ -134,7 +134,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';
@@ -537,10 +536,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/packages/blocks/src/root-block/edgeless/components/color-picker/button.ts b/packages/blocks/src/root-block/edgeless/components/color-picker/button.ts
index 235c8a267a6e..2c87711d9de8 100644
--- a/packages/blocks/src/root-block/edgeless/components/color-picker/button.ts
+++ b/packages/blocks/src/root-block/edgeless/components/color-picker/button.ts
@@ -4,6 +4,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';
@@ -14,7 +15,7 @@ import type {
   PickColorType,
 } from './types.js';
 
-import { keepColor, preprocessColor } from './utils.js';
+import { keepColor, preprocessColor, rgbaToHex8 } from './utils.js';
 
 type Type = 'normal' | 'custom';
 
@@ -40,10 +41,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 };
   }
 
@@ -51,6 +70,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`;
   }
@@ -103,8 +126,9 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) {
                 <slot name="separator"></slot>
                 <edgeless-color-panel
                   role="listbox"
+                  class=${ifDefined(this.colorPanelClass)}
                   .value=${this.color}
-                  .options=${this.palettes}
+                  .palettes=${this.palettes}
                   .hollowCircle=${this.hollowCircle}
                   .openColorPicker=${this.switchToCustomTab}
                   .hasTransparent=${false}
@@ -113,7 +137,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>
@@ -144,6 +168,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/packages/blocks/src/root-block/edgeless/components/color-picker/custom-button.ts b/packages/blocks/src/root-block/edgeless/components/color-picker/custom-button.ts
index 9c76ed365f62..41bd64373c59 100644
--- a/packages/blocks/src/root-block/edgeless/components/color-picker/custom-button.ts
+++ b/packages/blocks/src/root-block/edgeless/components/color-picker/custom-button.ts
@@ -1,18 +1,36 @@
 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 +61,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/packages/blocks/src/root-block/edgeless/components/panel/color-panel.ts b/packages/blocks/src/root-block/edgeless/components/panel/color-panel.ts
index 04f48055fda7..7d33780eaa41 100644
--- a/packages/blocks/src/root-block/edgeless/components/panel/color-panel.ts
+++ b/packages/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/packages/blocks/src/root-block/edgeless/components/panel/line-styles-panel.ts b/packages/blocks/src/root-block/edgeless/components/panel/line-styles-panel.ts
index 7a43bd506440..a973368569bc 100644
--- a/packages/blocks/src/root-block/edgeless/components/panel/line-styles-panel.ts
+++ b/packages/blocks/src/root-block/edgeless/components/panel/line-styles-panel.ts
@@ -3,7 +3,7 @@ import {
   DashLineIcon,
   StraightLineIcon,
 } from '@blocksuite/affine-components/icons';
-import { type LineWidth, StrokeStyle } from '@blocksuite/affine-model';
+import { LineWidth, StrokeStyle } from '@blocksuite/affine-model';
 import { html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -47,14 +47,14 @@ const LINE_STYLE_LIST = [
 
 export function LineStylesPanel({
   onClick,
-  selectedLineSize,
   selectedLineStyle,
+  selectedLineSize = LineWidth.Two,
   lineStyles = [StrokeStyle.Solid, StrokeStyle.Dash, StrokeStyle.None],
 }: LineStylesPanelProps = {}) {
   const lineSizePanel = html`
     <edgeless-line-width-panel
-      .selectedSize=${selectedLineSize as LineWidth}
-      .disable=${selectedLineStyle === StrokeStyle.None}
+      ?disabled=${selectedLineStyle === StrokeStyle.None}
+      .selectedSize=${selectedLineSize}
       @select=${(e: LineWidthEvent) => {
         onClick?.({
           type: 'size',
@@ -69,15 +69,15 @@ export function LineStylesPanel({
     item => item.value,
     ({ name, icon, value }) => {
       const active = selectedLineStyle === value;
-      const classes: Record<string, boolean> = {
+      const classInfo = {
         'line-style-button': true,
         [`mode-${value}`]: true,
       };
-      if (active) classes['active'] = true;
+      if (active) classInfo['active'] = true;
 
       return html`
         <edgeless-tool-icon-button
-          class=${classMap(classes)}
+          class=${classMap(classInfo)}
           .active=${active}
           .activeMode=${'background'}
           .tooltip=${name}
diff --git a/packages/blocks/src/root-block/edgeless/components/panel/line-width-panel.ts b/packages/blocks/src/root-block/edgeless/components/panel/line-width-panel.ts
index b6b4a47737cc..17b84f991de0 100644
--- a/packages/blocks/src/root-block/edgeless/components/panel/line-width-panel.ts
+++ b/packages/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,162 +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 _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 _getDragHandlePosition = (e: PointerEvent) => {
+    return clamp(e.offsetX, 0, this.config.width);
   };
 
   private _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 _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 _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 _onPointerUp = (e: PointerEvent) => {
+  private _onPointerMove = (e: PointerEvent) => {
     e.preventDefault();
-    if (!this._dragConfig) return;
-    const dragHandlerPosition = this._getDragHandlePosition(
-      e,
-      this._dragConfig
-    );
-    this._updateLineWidthPanelByDragHandlePosition(dragHandlerPosition);
-    this._dragConfig = null;
-  };
 
-  private _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) {
@@ -224,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>) {
@@ -336,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/packages/blocks/src/root-block/edgeless/components/panel/one-row-color-panel.ts b/packages/blocks/src/root-block/edgeless/components/panel/one-row-color-panel.ts
deleted file mode 100644
index 3d2bc8edee31..000000000000
--- a/packages/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/packages/blocks/src/root-block/edgeless/components/panel/stroke-style-panel.ts b/packages/blocks/src/root-block/edgeless/components/panel/stroke-style-panel.ts
index 3dc0d7ef1a17..cf17a3758d1f 100644
--- a/packages/blocks/src/root-block/edgeless/components/panel/stroke-style-panel.ts
+++ b/packages/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';
@@ -31,7 +31,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
@@ -40,7 +39,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/packages/blocks/src/root-block/edgeless/components/toolbar/brush/brush-menu.ts b/packages/blocks/src/root-block/edgeless/components/toolbar/brush/brush-menu.ts
index be3b71652233..65ea683099cb 100644
--- a/packages/blocks/src/root-block/edgeless/components/toolbar/brush/brush-menu.ts
+++ b/packages/blocks/src/root-block/edgeless/components/toolbar/brush/brush-menu.ts
@@ -1,5 +1,6 @@
 import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx';
 
+import { STROKE_COLORS } from '@blocksuite/affine-model';
 import {
   EditPropsStore,
   ThemeProvider,
@@ -65,13 +66,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/packages/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts b/packages/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts
index 092bc34aaa9e..b48ac21bfc53 100644
--- a/packages/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts
+++ b/packages/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts
@@ -129,13 +129,14 @@ 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}
             .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/packages/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu-config.ts b/packages/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu-config.ts
index 3980950f908b..7d4bd42360dc 100644
--- a/packages/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu-config.ts
+++ b/packages/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu-config.ts
@@ -69,6 +69,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/packages/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts b/packages/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts
index f0abc37a410d..6cbc89b660e2 100644
--- a/packages/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts
+++ b/packages/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts
@@ -6,12 +6,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,
@@ -25,11 +26,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)
@@ -81,15 +78,19 @@ export class EdgelessShapeMenu extends SignalWatcher(
     };
   });
 
-  private _setFillColor = (fillColor: ShapeFillColor) => {
+  private _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;
@@ -178,15 +179,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/packages/blocks/src/root-block/edgeless/components/toolbar/text/text-menu.ts b/packages/blocks/src/root-block/edgeless/components/toolbar/text/text-menu.ts
index d3f0ebd3a396..4e0e46e02d97 100644
--- a/packages/blocks/src/root-block/edgeless/components/toolbar/text/text-menu.ts
+++ b/packages/blocks/src/root-block/edgeless/components/toolbar/text/text-menu.ts
@@ -1,5 +1,6 @@
 import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx';
 
+import { STROKE_COLORS } from '@blocksuite/affine-model';
 import { css, html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 
@@ -24,10 +25,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/packages/blocks/src/root-block/edgeless/utils/consts.ts b/packages/blocks/src/root-block/edgeless/utils/consts.ts
index b1cd9f504009..9a4b9dad1472 100644
--- a/packages/blocks/src/root-block/edgeless/utils/consts.ts
+++ b/packages/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 BOOKMARK_MIN_WIDTH = 450;
@@ -52,9 +52,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/packages/blocks/src/root-block/widgets/element-toolbar/change-brush-button.ts b/packages/blocks/src/root-block/widgets/element-toolbar/change-brush-button.ts
index 7697158fdfea..d2f258a47f83 100644
--- a/packages/blocks/src/root-block/widgets/element-toolbar/change-brush-button.ts
+++ b/packages/blocks/src/root-block/widgets/element-toolbar/change-brush-button.ts
@@ -4,7 +4,7 @@ import type {
   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/packages/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts b/packages/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts
index 02d0cda1085e..dcce3106ef23 100644
--- a/packages/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts
+++ b/packages/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts
@@ -29,7 +29,7 @@ import {
   DEFAULT_REAR_END_POINT_STYLE,
   PointStyle,
 } from '@blocksuite/affine-model';
-import { LINE_COLORS, LineWidth, StrokeStyle } from '@blocksuite/affine-model';
+import { LineWidth, PALETTES, StrokeStyle } from '@blocksuite/affine-model';
 import { countBy, maxBy, WithDisposable } from '@blocksuite/global/utils';
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
 import { property, query } from 'lit/decorators.js';
@@ -367,7 +367,7 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
                 .color=${selectedColor}
                 .colors=${colors}
                 .colorType=${type}
-                .palettes=${LINE_COLORS}
+                .palettes=${PALETTES}
                 .hollowCircle=${true}
               >
                 <div
@@ -384,7 +384,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/packages/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts b/packages/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts
index 998edebee069..d8b4b26a0eff 100644
--- a/packages/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts
+++ b/packages/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts
@@ -8,9 +8,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';
@@ -126,8 +126,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(
       [
@@ -200,7 +199,7 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
                 .color=${background}
                 .colors=${colors}
                 .colorType=${type}
-                .palettes=${FRAME_BACKGROUND_COLORS}
+                .palettes=${PALETTES}
               >
               </edgeless-color-picker-button>
             `;
@@ -221,7 +220,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/packages/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts b/packages/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts
index 3bed22bf07c1..30387ecb3a28 100644
--- a/packages/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts
+++ b/packages/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts
@@ -14,7 +14,7 @@ import {
 import {
   type ColorScheme,
   DEFAULT_NOTE_BACKGROUND_COLOR,
-  NOTE_BACKGROUND_COLORS,
+  NOTE_BACKGROUND_PALETTES,
   type NoteBlockModel,
   NoteDisplayMode,
   type StrokeStyle,
@@ -313,9 +313,10 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
                   .label=${'Background'}
                   .pick=${this.pickColor}
                   .color=${background}
+                  .colorPanelClass=${'small'}
                   .colorType=${type}
                   .colors=${colors}
-                  .palettes=${NOTE_BACKGROUND_COLORS}
+                  .palettes=${NOTE_BACKGROUND_PALETTES}
                 >
                 </edgeless-color-picker-button>
               `;
@@ -335,8 +336,9 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
                 `}
               >
                 <edgeless-color-panel
+                  class="small"
                   .value=${background}
-                  .options=${NOTE_BACKGROUND_COLORS}
+                  .palettes=${NOTE_BACKGROUND_PALETTES}
                   @select=${(e: ColorEvent) => this._setBackground(e.detail)}
                 >
                 </edgeless-color-panel>
diff --git a/packages/blocks/src/root-block/widgets/element-toolbar/change-shape-button.ts b/packages/blocks/src/root-block/widgets/element-toolbar/change-shape-button.ts
index 84c2e2293036..93e7b50a411a 100644
--- a/packages/blocks/src/root-block/widgets/element-toolbar/change-shape-button.ts
+++ b/packages/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';
@@ -97,7 +96,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;
@@ -342,7 +341,7 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
                 .color=${selectedFillColor}
                 .colors=${colors}
                 .colorType=${type}
-                .palettes=${SHAPE_FILL_COLORS}
+                .palettes=${PALETTES}
               >
               </edgeless-color-picker-button>
             `;
@@ -365,7 +364,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>
@@ -390,7 +389,7 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
                 .color=${selectedStrokeColor}
                 .colors=${colors}
                 .colorType=${type}
-                .palettes=${SHAPE_STROKE_COLORS}
+                .palettes=${PALETTES}
                 .hollowCircle=${true}
               >
                 <div
@@ -407,7 +406,6 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
                     selectedLineSize: selectedLineSize,
                     selectedLineStyle: selectedLineStyle,
                     onClick: (e: LineStyleEvent) => this._setShapeStyles(e),
-                    lineStyles: [StrokeStyle.Solid, StrokeStyle.Dash],
                   })}
                 </div>
                 <editor-toolbar-separator
diff --git a/packages/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts b/packages/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts
index f06fe0ec782e..a6b6254e56af 100644
--- a/packages/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts
+++ b/packages/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts
@@ -21,7 +21,7 @@ import {
 import {
   ConnectorElementModel,
   EdgelessTextBlockModel,
-  LINE_COLORS,
+  PALETTES,
   ShapeElementModel,
   TextElementModel,
 } from '@blocksuite/affine-model';
@@ -388,7 +388,7 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) {
                 .color=${selectedColor}
                 .colors=${colors}
                 .colorType=${type}
-                .palettes=${LINE_COLORS}
+                .palettes=${PALETTES}
               >
               </edgeless-color-picker-button>
             `;
diff --git a/packages/blocks/src/root-block/widgets/pie-menu/components/pie-node-content.ts b/packages/blocks/src/root-block/widgets/pie-menu/components/pie-node-content.ts
index f4ea22e02009..6646b73f468e 100644
--- a/packages/blocks/src/root-block/widgets/pie-menu/components/pie-node-content.ts
+++ b/packages/blocks/src/root-block/widgets/pie-menu/components/pie-node-content.ts
@@ -4,7 +4,6 @@ import { property, query } from 'lit/decorators.js';
 
 import type { PieNode } from '../node.js';
 
-import { ColorUnit } from '../../../edgeless/components/panel/color-panel.js';
 import { isSubmenuNode } from '../utils.js';
 
 const styles = css`
@@ -46,7 +45,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/packages/blocks/src/root-block/widgets/pie-menu/config.ts b/packages/blocks/src/root-block/widgets/pie-menu/config.ts
index 2c27f377aaee..03f1673b92bb 100644
--- a/packages/blocks/src/root-block/widgets/pie-menu/config.ts
+++ b/packages/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,
@@ -331,7 +331,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/packages/blocks/src/root-block/widgets/pie-menu/pie-builder.ts b/packages/blocks/src/root-block/widgets/pie-menu/pie-builder.ts
index ec211ab75059..4e432730f9a2 100644
--- a/packages/blocks/src/root-block/widgets/pie-menu/pie-builder.ts
+++ b/packages/blocks/src/root-block/widgets/pie-menu/pie-builder.ts
@@ -1,4 +1,5 @@
 import { assertExists } from '@blocksuite/global/utils';
+import { html } from 'lit';
 
 import type {
   ActionFunction,
@@ -10,7 +11,6 @@ import type {
   PieSubmenuNodeModel,
 } from './base.js';
 
-import { ColorUnit } from '../../edgeless/components/panel/color-panel.js';
 import { PieManager } from './pie-manager.js';
 import { calcNodeAngles, calcNodeWedges, isNodeWithChildren } from './utils.js';
 
@@ -118,7 +118,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 = {
@@ -128,7 +132,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/packages/presets/src/__tests__/edgeless/last-props.spec.ts b/packages/presets/src/__tests__/edgeless/last-props.spec.ts
index 1eb6690e536d..32c369569b3f 100644
--- a/packages/presets/src/__tests__/edgeless/last-props.spec.ts
+++ b/packages/presets/src/__tests__/edgeless/last-props.spec.ts
@@ -14,7 +14,6 @@ import {
   type FrameBlockModel,
   getSurfaceBlock,
   LayoutType,
-  LineColor,
   type MindmapElementModel,
   MindmapStyle,
   NoteBackgroundColor,
@@ -23,6 +22,7 @@ import {
   type ShapeElementModel,
   ShapeFillColor,
   ShapeType,
+  StrokeColor,
   type TextElementModel,
 } from '@blocksuite/blocks';
 import { beforeEach, describe, expect, test } from 'vitest';
@@ -113,7 +113,7 @@ describe('apply last props', () => {
   test('connector', () => {
     const id = service.addElement('connector', { mode: 0 });
     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');
@@ -125,7 +125,7 @@ describe('apply last props', () => {
     expect(connector2.strokeWidth).toBe(10);
     service.updateElement(id2, {
       labelStyle: {
-        color: LineColor.Magenta,
+        color: StrokeColor.Magenta,
         fontFamily: FontFamily.Kalam,
       },
     });
@@ -133,17 +133,14 @@ describe('apply last props', () => {
     const id3 = service.addElement('connector', { mode: 1 });
     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);
   });
 
   test('brush', () => {
     const id = service.addElement('brush', {});
     const brush = service.getElementById(id) as BrushElementModel;
-    expect(brush.color).toEqual({
-      dark: LineColor.White,
-      light: LineColor.Black,
-    });
+    expect(brush.color).toBe(StrokeColor.Black);
     expect(brush.lineWidth).toBe(4);
     service.updateElement(id, { lineWidth: 10 });
     const secondBrush = service.getElementById(
@@ -186,13 +183,13 @@ describe('apply last props', () => {
     expect(text.color).toBe(DEFAULT_TEXT_COLOR);
     expect(text.fontFamily).toBe(FontFamily.Inter);
     service.updateElement(id, {
-      color: LineColor.Green,
+      color: StrokeColor.Green,
       fontFamily: FontFamily.OrelegaOne,
     });
 
     const id2 = service.addBlock('affine:edgeless-text', {}, surface!.id);
     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);
   });
 
@@ -220,7 +217,7 @@ describe('apply last props', () => {
     const surface = getSurfaceBlock(doc);
     const id = service.addBlock('affine:frame', {}, surface!.id);
     const note = service.getElementById(id) as FrameBlockModel;
-    expect(note.background).toBe('--affine-palette-transparent');
+    expect(note.background).toBe('transparent');
     service.updateElement(id, {
       background: FrameBackgroundColor.Purple,
     });
diff --git a/packages/presets/src/__tests__/snapshots/edgeless/surface-ref.spec.ts/surface-ref.json b/packages/presets/src/__tests__/snapshots/edgeless/surface-ref.spec.ts/surface-ref.json
index 5f7f429af37a..4623db32a891 100644
--- a/packages/presets/src/__tests__/snapshots/edgeless/surface-ref.spec.ts/surface-ref.json
+++ b/packages/presets/src/__tests__/snapshots/edgeless/surface-ref.spec.ts/surface-ref.json
@@ -162,7 +162,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/tests/attachment.spec.ts b/tests/attachment.spec.ts
index d68b4fd0d5e0..001241b0def2 100644
--- a/tests/attachment.spec.ts
+++ b/tests/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/tests/clipboard/list.spec.ts b/tests/clipboard/list.spec.ts
index ab8ee5c56cf8..b4719c1121b4 100644
--- a/tests/clipboard/list.spec.ts
+++ b/tests/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-white';
   await changeEdgelessNoteBackground(page, color);
   await assertEdgelessNoteBackground(page, ids.noteId, color);
 
diff --git a/tests/edgeless/auto-complete.spec.ts b/tests/edgeless/auto-complete.spec.ts
index 253cc60478a3..2ed014d6979b 100644
--- a/tests/edgeless/auto-complete.spec.ts
+++ b/tests/edgeless/auto-complete.spec.ts
@@ -1,4 +1,9 @@
-import { DEFAULT_NOTE_BACKGROUND_COLOR } from '@blocksuite/affine-model';
+import {
+  DEFAULT_NOTE_BACKGROUND_COLOR,
+  NoteBackgroundColor,
+  ShapeFillColor,
+  StrokeColor,
+} from '@blocksuite/affine-model';
 import { expect, type Page } from '@playwright/test';
 
 import { clickView, moveView } from '../utils/actions/click.js';
@@ -135,10 +140,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 +189,7 @@ test.describe('auto-complete', () => {
       await waitNextFrame(page);
 
       await triggerComponentToolbarAction(page, 'changeNoteColor');
-      const noteColor = '--affine-note-background-red';
+      const noteColor = NoteBackgroundColor.Red;
       await changeEdgelessNoteBackground(page, noteColor);
 
       // move to arrow icon
diff --git a/tests/edgeless/brush.spec.ts b/tests/edgeless/brush.spec.ts
index 893dc2a1ee5c..54b395d6e21f 100644
--- a/tests/edgeless/brush.spec.ts
+++ b/tests/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/tests/edgeless/color-picker.spec.ts b/tests/edgeless/color-picker.spec.ts
index 8e137be135c2..6f9f2a53fc8f 100644
--- a/tests/edgeless/color-picker.spec.ts
+++ b/tests/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/tests/edgeless/connector/connector.spec.ts b/tests/edgeless/connector/connector.spec.ts
index 11f5f766301a..2a13b6500fd1 100644
--- a/tests/edgeless/connector/connector.spec.ts
+++ b/tests/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/tests/edgeless/note/note.spec.ts b/tests/edgeless/note/note.spec.ts
index fb5e422e9323..1f9b1cd44401 100644
--- a/tests/edgeless/note/note.spec.ts
+++ b/tests/edgeless/note/note.spec.ts
@@ -1,6 +1,7 @@
 import {
   DEFAULT_NOTE_HEIGHT,
   DEFAULT_NOTE_WIDTH,
+  NoteBackgroundColor,
   NoteDisplayMode,
 } from '@blocksuite/affine-model';
 import { expect } from '@playwright/test';
@@ -304,12 +305,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 = NoteBackgroundColor.Green;
   await changeEdgelessNoteBackground(page, color);
   await assertEdgelessNoteBackground(page, noteId, color);
 });
diff --git a/tests/edgeless/shape.spec.ts b/tests/edgeless/shape.spec.ts
index 3af1f2bd5ba8..a4babb9fe605 100644
--- a/tests/edgeless/shape.spec.ts
+++ b/tests/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/tests/snapshots/basic.spec.ts/automatic-identify-url-text-final.json b/tests/snapshots/basic.spec.ts/automatic-identify-url-text-final.json
index 10d8e45e23e2..843eb81aa52f 100644
--- a/tests/snapshots/basic.spec.ts/automatic-identify-url-text-final.json
+++ b/tests/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/tests/snapshots/basic.spec.ts/basic-test-default.json b/tests/snapshots/basic.spec.ts/basic-test-default.json
index d902db61ddad..db5fa1b07dbc 100644
--- a/tests/snapshots/basic.spec.ts/basic-test-default.json
+++ b/tests/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/tests/snapshots/bookmark.spec.ts/copy-bookmark-url-by-copy-button-final.json b/tests/snapshots/bookmark.spec.ts/copy-bookmark-url-by-copy-button-final.json
index b5c3f610836b..491ed8236484 100644
--- a/tests/snapshots/bookmark.spec.ts/copy-bookmark-url-by-copy-button-final.json
+++ b/tests/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/tests/snapshots/bookmark.spec.ts/copy-url-to-create-bookmark-in-edgeless-mode-final.json b/tests/snapshots/bookmark.spec.ts/copy-url-to-create-bookmark-in-edgeless-mode-final.json
index 972fa4085009..954961ef5651 100644
--- a/tests/snapshots/bookmark.spec.ts/copy-url-to-create-bookmark-in-edgeless-mode-final.json
+++ b/tests/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/tests/snapshots/bookmark.spec.ts/copy-url-to-create-bookmark-in-page-mode-final.json b/tests/snapshots/bookmark.spec.ts/copy-url-to-create-bookmark-in-page-mode-final.json
index b90751b9e75a..f949b1b5596a 100644
--- a/tests/snapshots/bookmark.spec.ts/copy-url-to-create-bookmark-in-page-mode-final.json
+++ b/tests/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/tests/snapshots/bookmark.spec.ts/covert-bookmark-block-to-link-text-final.json b/tests/snapshots/bookmark.spec.ts/covert-bookmark-block-to-link-text-final.json
index 0d09533b20a8..14142efb9d1e 100644
--- a/tests/snapshots/bookmark.spec.ts/covert-bookmark-block-to-link-text-final.json
+++ b/tests/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/tests/snapshots/bookmark.spec.ts/create-bookmark-by-slash-menu-final.json b/tests/snapshots/bookmark.spec.ts/create-bookmark-by-slash-menu-final.json
index cba48a995627..0dfcd5aa4f0c 100644
--- a/tests/snapshots/bookmark.spec.ts/create-bookmark-by-slash-menu-final.json
+++ b/tests/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/tests/snapshots/bookmark.spec.ts/embed-figma.json b/tests/snapshots/bookmark.spec.ts/embed-figma.json
index a1cf2bc7e346..e976f0683f4e 100644
--- a/tests/snapshots/bookmark.spec.ts/embed-figma.json
+++ b/tests/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/tests/snapshots/bookmark.spec.ts/embed-youtube.json b/tests/snapshots/bookmark.spec.ts/embed-youtube.json
index fa4138915dd8..50aa56ab8e9a 100644
--- a/tests/snapshots/bookmark.spec.ts/embed-youtube.json
+++ b/tests/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/tests/snapshots/bookmark.spec.ts/horizontal-figma.json b/tests/snapshots/bookmark.spec.ts/horizontal-figma.json
index 9a3c75eb5301..d8e3252e69ed 100644
--- a/tests/snapshots/bookmark.spec.ts/horizontal-figma.json
+++ b/tests/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/tests/snapshots/bookmark.spec.ts/horizontal-youtube.json b/tests/snapshots/bookmark.spec.ts/horizontal-youtube.json
index f58738152c7b..c28ac11214bb 100644
--- a/tests/snapshots/bookmark.spec.ts/horizontal-youtube.json
+++ b/tests/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/tests/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-after-add-paragraph.json b/tests/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-after-add-paragraph.json
index a89a9ca43190..f36048f47895 100644
--- a/tests/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-after-add-paragraph.json
+++ b/tests/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/tests/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-after-drag.json b/tests/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-after-drag.json
index c9b458d4395a..efa52affa8fa 100644
--- a/tests/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-after-drag.json
+++ b/tests/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/tests/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-init.json b/tests/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-init.json
index d2090527c217..962a981684b2 100644
--- a/tests/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-init.json
+++ b/tests/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/tests/snapshots/clipboard/clipboard.spec.ts/auto-identify-url-final.json b/tests/snapshots/clipboard/clipboard.spec.ts/auto-identify-url-final.json
index c9e9f94e8341..b1cc7f93d427 100644
--- a/tests/snapshots/clipboard/clipboard.spec.ts/auto-identify-url-final.json
+++ b/tests/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/tests/snapshots/clipboard/list.spec.ts/cut-will-delete-all-content-and-copy-will-reappear-content-after-cut.json b/tests/snapshots/clipboard/list.spec.ts/cut-will-delete-all-content-and-copy-will-reappear-content-after-cut.json
index b4999d04e2bd..f67273240fa8 100644
--- a/tests/snapshots/clipboard/list.spec.ts/cut-will-delete-all-content-and-copy-will-reappear-content-after-cut.json
+++ b/tests/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/tests/snapshots/clipboard/list.spec.ts/cut-will-delete-all-content-and-copy-will-reappear-content-after-paste.json b/tests/snapshots/clipboard/list.spec.ts/cut-will-delete-all-content-and-copy-will-reappear-content-after-paste.json
index 5adfa0769915..9bdfa2500d81 100644
--- a/tests/snapshots/clipboard/list.spec.ts/cut-will-delete-all-content-and-copy-will-reappear-content-after-paste.json
+++ b/tests/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/tests/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/tests/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 e6f186417e97..ffb61bcbd884 100644
--- a/tests/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/tests/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/tests/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/tests/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 3f8d89f149f2..b00a4548f5e2 100644
--- a/tests/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/tests/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/tests/snapshots/code/copy-paste.spec.ts/code-block-has-content-click-code-block-copy-menu-copy-whole-code-block-pasted.json b/tests/snapshots/code/copy-paste.spec.ts/code-block-has-content-click-code-block-copy-menu-copy-whole-code-block-pasted.json
index 2140c127eeb2..a4b4b4e23f72 100644
--- a/tests/snapshots/code/copy-paste.spec.ts/code-block-has-content-click-code-block-copy-menu-copy-whole-code-block-pasted.json
+++ b/tests/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/tests/snapshots/code/copy-paste.spec.ts/code-block-is-empty-click-code-block-copy-menu-copy-the-empty-code-block-pasted.json b/tests/snapshots/code/copy-paste.spec.ts/code-block-is-empty-click-code-block-copy-menu-copy-the-empty-code-block-pasted.json
index 0ce43f616159..5493ce26bb50 100644
--- a/tests/snapshots/code/copy-paste.spec.ts/code-block-is-empty-click-code-block-copy-menu-copy-the-empty-code-block-pasted.json
+++ b/tests/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/tests/snapshots/code/crud.spec.ts/delete-code-block-in-more-menu-final.json b/tests/snapshots/code/crud.spec.ts/delete-code-block-in-more-menu-final.json
index 5db1d16b72d2..e6bb65e4ad12 100644
--- a/tests/snapshots/code/crud.spec.ts/delete-code-block-in-more-menu-final.json
+++ b/tests/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/tests/snapshots/code/crud.spec.ts/duplicate-code-block-final.json b/tests/snapshots/code/crud.spec.ts/duplicate-code-block-final.json
index 6a79a3a76e98..8fc72aee3f84 100644
--- a/tests/snapshots/code/crud.spec.ts/duplicate-code-block-final.json
+++ b/tests/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/tests/snapshots/code/crud.spec.ts/format-text-in-code-block-format.json b/tests/snapshots/code/crud.spec.ts/format-text-in-code-block-format.json
index 41b96fa369f8..6810d47d080f 100644
--- a/tests/snapshots/code/crud.spec.ts/format-text-in-code-block-format.json
+++ b/tests/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/tests/snapshots/code/crud.spec.ts/format-text-in-code-block-init.json b/tests/snapshots/code/crud.spec.ts/format-text-in-code-block-init.json
index 63f501b5eafd..8567aad2cd81 100644
--- a/tests/snapshots/code/crud.spec.ts/format-text-in-code-block-init.json
+++ b/tests/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/tests/snapshots/code/crud.spec.ts/format-text-in-code-block-link.json b/tests/snapshots/code/crud.spec.ts/format-text-in-code-block-link.json
index e2a658224e5e..ac561212a883 100644
--- a/tests/snapshots/code/crud.spec.ts/format-text-in-code-block-link.json
+++ b/tests/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/tests/snapshots/code/crud.spec.ts/use-markdown-syntax-can-create-code-block-init.json b/tests/snapshots/code/crud.spec.ts/use-markdown-syntax-can-create-code-block-init.json
index 5c6d65e23cd0..a68276e76247 100644
--- a/tests/snapshots/code/crud.spec.ts/use-markdown-syntax-can-create-code-block-init.json
+++ b/tests/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/tests/snapshots/code/crud.spec.ts/use-markdown-syntax-can-create-code-block-markdown-syntax.json b/tests/snapshots/code/crud.spec.ts/use-markdown-syntax-can-create-code-block-markdown-syntax.json
index de7599d6d081..cd6d7e397941 100644
--- a/tests/snapshots/code/crud.spec.ts/use-markdown-syntax-can-create-code-block-markdown-syntax.json
+++ b/tests/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/tests/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-3-4.json b/tests/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-3-4.json
index f05e973912a2..9f5d272314d4 100644
--- a/tests/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-3-4.json
+++ b/tests/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/tests/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-3-9.json b/tests/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-3-9.json
index 8aa721ad6179..2d3183ea97f3 100644
--- a/tests/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-3-9.json
+++ b/tests/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/tests/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-4-3.json b/tests/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-4-3.json
index 822a308be925..c0350fedb179 100644
--- a/tests/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-4-3.json
+++ b/tests/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/tests/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-init.json b/tests/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-init.json
index 51622ddeb6d7..fc0573848470 100644
--- a/tests/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-init.json
+++ b/tests/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/tests/snapshots/drag.spec.ts/should-be-able-to-drag-drop-multiple-blocks-to-nested-block-finial.json b/tests/snapshots/drag.spec.ts/should-be-able-to-drag-drop-multiple-blocks-to-nested-block-finial.json
index faedc471497b..3842295488ee 100644
--- a/tests/snapshots/drag.spec.ts/should-be-able-to-drag-drop-multiple-blocks-to-nested-block-finial.json
+++ b/tests/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/tests/snapshots/drag.spec.ts/should-be-able-to-drag-drop-multiple-blocks-to-nested-block-init.json b/tests/snapshots/drag.spec.ts/should-be-able-to-drag-drop-multiple-blocks-to-nested-block-init.json
index e04d86f006d3..4ea493a6ff77 100644
--- a/tests/snapshots/drag.spec.ts/should-be-able-to-drag-drop-multiple-blocks-to-nested-block-init.json
+++ b/tests/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/tests/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-add-linked-doc.json b/tests/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-add-linked-doc.json
index 136df9a3faa7..966a1b6331fd 100644
--- a/tests/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-add-linked-doc.json
+++ b/tests/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/tests/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-drag.json b/tests/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-drag.json
index 26b0b16c696e..a10d65aca7d4 100644
--- a/tests/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-drag.json
+++ b/tests/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/tests/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-init.json b/tests/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-init.json
index 38bceda452de..42634c6f70dc 100644
--- a/tests/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-init.json
+++ b/tests/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/tests/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card-min-width.json b/tests/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card-min-width.json
index ad9c08c538bc..503563c1bd1d 100644
--- a/tests/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card-min-width.json
+++ b/tests/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/tests/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card.json b/tests/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card.json
index 2915f2d3ea10..0acdef494eab 100644
--- a/tests/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card.json
+++ b/tests/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/tests/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-finial.json b/tests/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-finial.json
index 8696508b7b64..8b8f4df2b41a 100644
--- a/tests/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-finial.json
+++ b/tests/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/tests/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-empty.json b/tests/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-empty.json
index b42fa3f133c7..fb22906247dd 100644
--- a/tests/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-empty.json
+++ b/tests/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/tests/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-not-empty.json b/tests/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-not-empty.json
index f79cfb43bb51..04a02e46b312 100644
--- a/tests/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-not-empty.json
+++ b/tests/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/tests/snapshots/format-bar.spec.ts/create-linked-doc-from-block-selection-with-format-bar.json b/tests/snapshots/format-bar.spec.ts/create-linked-doc-from-block-selection-with-format-bar.json
index f1f55038c655..0520475600d2 100644
--- a/tests/snapshots/format-bar.spec.ts/create-linked-doc-from-block-selection-with-format-bar.json
+++ b/tests/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/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-default-color.json b/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-default-color.json
index 35d5c4f9fc1c..616ba8f67824 100644
--- a/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-default-color.json
+++ b/tests/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/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-init.json b/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-init.json
index 35d5c4f9fc1c..616ba8f67824 100644
--- a/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-init.json
+++ b/tests/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/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-select-all.json b/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-select-all.json
index 821396ae9474..b4685f071831 100644
--- a/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-select-all.json
+++ b/tests/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/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-bulleted.json b/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-bulleted.json
index 3310a6113fe8..be8ee9e7ecc3 100644
--- a/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-bulleted.json
+++ b/tests/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/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-finial.json b/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-finial.json
index f7b8f9535280..525e32c3ad6a 100644
--- a/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-finial.json
+++ b/tests/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/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-init.json b/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-init.json
index b8e6d44b34fc..a2718a1de4eb 100644
--- a/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-init.json
+++ b/tests/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/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-finial.json b/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-finial.json
index 1ccc87a0d2d8..e0293cab9dc8 100644
--- a/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-finial.json
+++ b/tests/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/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-init.json b/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-init.json
index ba6bf3c7bd7e..d91e0e70caa1 100644
--- a/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-init.json
+++ b/tests/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/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-when-select-multiple-line-finial.json b/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-when-select-multiple-line-finial.json
index aea12cd56eeb..9d418c32e19e 100644
--- a/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-when-select-multiple-line-finial.json
+++ b/tests/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/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-when-select-multiple-line-init.json b/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-when-select-multiple-line-init.json
index 359a65787002..d6339a2e7de5 100644
--- a/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-when-select-multiple-line-init.json
+++ b/tests/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/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-link-text-finial.json b/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-link-text-finial.json
index aea12cd56eeb..9d418c32e19e 100644
--- a/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-link-text-finial.json
+++ b/tests/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/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-link-text-init.json b/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-link-text-init.json
index 425e623f2c8f..07fb24fbf81c 100644
--- a/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-link-text-init.json
+++ b/tests/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/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-show-after-convert-to-code-block.json b/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-show-after-convert-to-code-block.json
index 37b954d36c42..c0eb5f8409f7 100644
--- a/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-show-after-convert-to-code-block.json
+++ b/tests/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/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-with-block-selection-works-when-update-block-type-final.json b/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-with-block-selection-works-when-update-block-type-final.json
index e851e80ea9b0..a1cd97577f9b 100644
--- a/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-with-block-selection-works-when-update-block-type-final.json
+++ b/tests/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/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-with-block-selection-works-when-update-block-type-init.json b/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-with-block-selection-works-when-update-block-type-init.json
index 48f1782b68ac..f18ab67ce257 100644
--- a/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-with-block-selection-works-when-update-block-type-init.json
+++ b/tests/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/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-work-in-multiple-block-selection.json b/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-work-in-multiple-block-selection.json
index f76f2a7b7982..ae698abc9cd3 100644
--- a/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-work-in-multiple-block-selection.json
+++ b/tests/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/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-work-in-single-block-selection.json b/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-work-in-single-block-selection.json
index 4df164a74ee1..6f61954663c0 100644
--- a/tests/snapshots/format-bar.spec.ts/should-format-quick-bar-work-in-single-block-selection.json
+++ b/tests/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/tests/snapshots/hotkey.spec.ts/Enter-key-should-as-expected-after-setting-heading-by-shortkey.json b/tests/snapshots/hotkey.spec.ts/Enter-key-should-as-expected-after-setting-heading-by-shortkey.json
index 749ef405126e..35972683df26 100644
--- a/tests/snapshots/hotkey.spec.ts/Enter-key-should-as-expected-after-setting-heading-by-shortkey.json
+++ b/tests/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/tests/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-init.json b/tests/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-init.json
index 4a195bffe1d4..822fc5888bf4 100644
--- a/tests/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-init.json
+++ b/tests/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/tests/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-redo.json b/tests/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-redo.json
index 4a195bffe1d4..822fc5888bf4 100644
--- a/tests/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-redo.json
+++ b/tests/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/tests/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-undo.json b/tests/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-undo.json
index 4beb61dab077..3f9cc6906661 100644
--- a/tests/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-undo.json
+++ b/tests/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/tests/snapshots/hotkey.spec.ts/should-cut-work-multiple-line-init.json b/tests/snapshots/hotkey.spec.ts/should-cut-work-multiple-line-init.json
index dda4f654e270..99ddf761e108 100644
--- a/tests/snapshots/hotkey.spec.ts/should-cut-work-multiple-line-init.json
+++ b/tests/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/tests/snapshots/hotkey.spec.ts/should-cut-work-multiple-line-undo.json b/tests/snapshots/hotkey.spec.ts/should-cut-work-multiple-line-undo.json
index 4beb61dab077..3f9cc6906661 100644
--- a/tests/snapshots/hotkey.spec.ts/should-cut-work-multiple-line-undo.json
+++ b/tests/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/tests/snapshots/hotkey.spec.ts/should-cut-work-single-line-init.json b/tests/snapshots/hotkey.spec.ts/should-cut-work-single-line-init.json
index 05e911d31610..6b62ffa97f34 100644
--- a/tests/snapshots/hotkey.spec.ts/should-cut-work-single-line-init.json
+++ b/tests/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/tests/snapshots/hotkey.spec.ts/should-cut-work-single-line-undo.json b/tests/snapshots/hotkey.spec.ts/should-cut-work-single-line-undo.json
index e284ca678aa4..f0c5d387b2ff 100644
--- a/tests/snapshots/hotkey.spec.ts/should-cut-work-single-line-undo.json
+++ b/tests/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/tests/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-init.json b/tests/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-init.json
index 54aa2945a06c..96519b38dff0 100644
--- a/tests/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-init.json
+++ b/tests/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/tests/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-0.json b/tests/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-0.json
index 2c33f911b5c8..71bc04e7f290 100644
--- a/tests/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-0.json
+++ b/tests/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/tests/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-6.json b/tests/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-6.json
index 9c632abfd156..81fab9818e6f 100644
--- a/tests/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-6.json
+++ b/tests/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/tests/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-8.json b/tests/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-8.json
index 5c5730a0edcf..1eed6e52b25b 100644
--- a/tests/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-8.json
+++ b/tests/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/tests/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-9.json b/tests/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-9.json
index 4493d992ed16..5da8d71e8173 100644
--- a/tests/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-9.json
+++ b/tests/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/tests/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-d.json b/tests/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-d.json
index 3c9888aedc3f..384d96a3dc3c 100644
--- a/tests/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-d.json
+++ b/tests/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/tests/snapshots/hotkey.spec.ts/should-multiple-line-format-hotkey-work-finial.json b/tests/snapshots/hotkey.spec.ts/should-multiple-line-format-hotkey-work-finial.json
index 4beb61dab077..3f9cc6906661 100644
--- a/tests/snapshots/hotkey.spec.ts/should-multiple-line-format-hotkey-work-finial.json
+++ b/tests/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/tests/snapshots/hotkey.spec.ts/should-multiple-line-format-hotkey-work-init.json b/tests/snapshots/hotkey.spec.ts/should-multiple-line-format-hotkey-work-init.json
index c7bbeae253c5..9c7c225662dc 100644
--- a/tests/snapshots/hotkey.spec.ts/should-multiple-line-format-hotkey-work-init.json
+++ b/tests/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/tests/snapshots/hotkey.spec.ts/should-single-line-format-hotkey-work-finial.json b/tests/snapshots/hotkey.spec.ts/should-single-line-format-hotkey-work-finial.json
index e284ca678aa4..f0c5d387b2ff 100644
--- a/tests/snapshots/hotkey.spec.ts/should-single-line-format-hotkey-work-finial.json
+++ b/tests/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/tests/snapshots/hotkey.spec.ts/should-single-line-format-hotkey-work-init.json b/tests/snapshots/hotkey.spec.ts/should-single-line-format-hotkey-work-init.json
index e387c5f0c974..f34e1e8c54fe 100644
--- a/tests/snapshots/hotkey.spec.ts/should-single-line-format-hotkey-work-init.json
+++ b/tests/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/tests/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-ggg.json b/tests/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-ggg.json
index 8542cbc43b76..430b36675ffa 100644
--- a/tests/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-ggg.json
+++ b/tests/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/tests/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-hhh.json b/tests/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-hhh.json
index 2a2f09ac41eb..502c58805bf2 100644
--- a/tests/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-hhh.json
+++ b/tests/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/tests/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold.json b/tests/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold.json
index 46f310342b7b..479e95d31533 100644
--- a/tests/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold.json
+++ b/tests/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/tests/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-init.json b/tests/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-init.json
index 74969002ab4b..250c4562a7c7 100644
--- a/tests/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-init.json
+++ b/tests/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/tests/snapshots/hotkey/bracket.spec.ts/should-bracket-complete-with-backtick-works-undo.json b/tests/snapshots/hotkey/bracket.spec.ts/should-bracket-complete-with-backtick-works-undo.json
index f92e305be2f5..1f11d4947979 100644
--- a/tests/snapshots/hotkey/bracket.spec.ts/should-bracket-complete-with-backtick-works-undo.json
+++ b/tests/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/tests/snapshots/hotkey/bracket.spec.ts/should-bracket-complete-with-backtick-works.json b/tests/snapshots/hotkey/bracket.spec.ts/should-bracket-complete-with-backtick-works.json
index b5eaddaf55c8..e00f791a8729 100644
--- a/tests/snapshots/hotkey/bracket.spec.ts/should-bracket-complete-with-backtick-works.json
+++ b/tests/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/tests/snapshots/hotkey/hotkey.spec.ts/Enter-key-should-as-expected-after-setting-heading-by-shortkey.json b/tests/snapshots/hotkey/hotkey.spec.ts/Enter-key-should-as-expected-after-setting-heading-by-shortkey.json
index 563a1e759435..261054509bb0 100644
--- a/tests/snapshots/hotkey/hotkey.spec.ts/Enter-key-should-as-expected-after-setting-heading-by-shortkey.json
+++ b/tests/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/tests/snapshots/hotkey/hotkey.spec.ts/should-cut-work-single-line-init.json b/tests/snapshots/hotkey/hotkey.spec.ts/should-cut-work-single-line-init.json
index 75e9f991214e..413815ce8e78 100644
--- a/tests/snapshots/hotkey/hotkey.spec.ts/should-cut-work-single-line-init.json
+++ b/tests/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/tests/snapshots/hotkey/hotkey.spec.ts/should-cut-work-single-line-undo.json b/tests/snapshots/hotkey/hotkey.spec.ts/should-cut-work-single-line-undo.json
index d902db61ddad..db5fa1b07dbc 100644
--- a/tests/snapshots/hotkey/hotkey.spec.ts/should-cut-work-single-line-undo.json
+++ b/tests/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/tests/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-init.json b/tests/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-init.json
index a7c1e7d4fa74..9b7c0f23237a 100644
--- a/tests/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-init.json
+++ b/tests/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/tests/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-0.json b/tests/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-0.json
index 140fdef87eab..985c6f997f3e 100644
--- a/tests/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-0.json
+++ b/tests/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/tests/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-6.json b/tests/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-6.json
index 022ec800e4fd..1ec98311559f 100644
--- a/tests/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-6.json
+++ b/tests/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/tests/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-8.json b/tests/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-8.json
index d0e2cf463039..58a72cdb6f03 100644
--- a/tests/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-8.json
+++ b/tests/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/tests/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-9.json b/tests/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-9.json
index 51c03e53476b..2c8067c47979 100644
--- a/tests/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-9.json
+++ b/tests/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/tests/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-d.json b/tests/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-d.json
index 1b737ee3633e..50ed66f30341 100644
--- a/tests/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-d.json
+++ b/tests/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/tests/snapshots/hotkey/hotkey.spec.ts/should-single-line-format-hotkey-work-finial.json b/tests/snapshots/hotkey/hotkey.spec.ts/should-single-line-format-hotkey-work-finial.json
index d902db61ddad..db5fa1b07dbc 100644
--- a/tests/snapshots/hotkey/hotkey.spec.ts/should-single-line-format-hotkey-work-finial.json
+++ b/tests/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/tests/snapshots/hotkey/hotkey.spec.ts/should-single-line-format-hotkey-work-init.json b/tests/snapshots/hotkey/hotkey.spec.ts/should-single-line-format-hotkey-work-init.json
index 55cbe3dea6ef..025e5e36fa9c 100644
--- a/tests/snapshots/hotkey/hotkey.spec.ts/should-single-line-format-hotkey-work-init.json
+++ b/tests/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/tests/snapshots/hotkey/hotkey.spec.ts/type-character-jump-out-code-node-1.json b/tests/snapshots/hotkey/hotkey.spec.ts/type-character-jump-out-code-node-1.json
index dc495e4bff72..5d479d7f75cc 100644
--- a/tests/snapshots/hotkey/hotkey.spec.ts/type-character-jump-out-code-node-1.json
+++ b/tests/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/tests/snapshots/hotkey/hotkey.spec.ts/type-character-jump-out-code-node-2.json b/tests/snapshots/hotkey/hotkey.spec.ts/type-character-jump-out-code-node-2.json
index dffb438146b4..6e086175a000 100644
--- a/tests/snapshots/hotkey/hotkey.spec.ts/type-character-jump-out-code-node-2.json
+++ b/tests/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/tests/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-at-empty-line-bold.json b/tests/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-at-empty-line-bold.json
index 511d260c0a6c..d0d2e5df3af5 100644
--- a/tests/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-at-empty-line-bold.json
+++ b/tests/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/tests/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-ggg.json b/tests/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-ggg.json
index dff5aa5b7024..70be677283e2 100644
--- a/tests/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-ggg.json
+++ b/tests/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/tests/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-hhh.json b/tests/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-hhh.json
index ea0483de0947..88a3599ca65f 100644
--- a/tests/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-hhh.json
+++ b/tests/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/tests/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold.json b/tests/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold.json
index 9c38d0ce4baf..26dbf6c0ede1 100644
--- a/tests/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold.json
+++ b/tests/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/tests/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-init.json b/tests/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-init.json
index 5e58ca68db29..8e21859efc24 100644
--- a/tests/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-init.json
+++ b/tests/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/tests/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-init.json b/tests/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-init.json
index 2174dc322902..2cc3862cc90b 100644
--- a/tests/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-init.json
+++ b/tests/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/tests/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-redo.json b/tests/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-redo.json
index 2174dc322902..2cc3862cc90b 100644
--- a/tests/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-redo.json
+++ b/tests/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/tests/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-undo.json b/tests/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-undo.json
index aea12cd56eeb..9d418c32e19e 100644
--- a/tests/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-undo.json
+++ b/tests/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/tests/snapshots/hotkey/multiline.spec.ts/should-cut-work-multiple-line-init.json b/tests/snapshots/hotkey/multiline.spec.ts/should-cut-work-multiple-line-init.json
index 77f254be3688..0443262e9365 100644
--- a/tests/snapshots/hotkey/multiline.spec.ts/should-cut-work-multiple-line-init.json
+++ b/tests/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/tests/snapshots/hotkey/multiline.spec.ts/should-cut-work-multiple-line-undo.json b/tests/snapshots/hotkey/multiline.spec.ts/should-cut-work-multiple-line-undo.json
index aea12cd56eeb..9d418c32e19e 100644
--- a/tests/snapshots/hotkey/multiline.spec.ts/should-cut-work-multiple-line-undo.json
+++ b/tests/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/tests/snapshots/hotkey/multiline.spec.ts/should-multiple-line-format-hotkey-work-finial.json b/tests/snapshots/hotkey/multiline.spec.ts/should-multiple-line-format-hotkey-work-finial.json
index aea12cd56eeb..9d418c32e19e 100644
--- a/tests/snapshots/hotkey/multiline.spec.ts/should-multiple-line-format-hotkey-work-finial.json
+++ b/tests/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/tests/snapshots/hotkey/multiline.spec.ts/should-multiple-line-format-hotkey-work-init.json b/tests/snapshots/hotkey/multiline.spec.ts/should-multiple-line-format-hotkey-work-init.json
index 63cd6eff5085..c3a01cfcbc4b 100644
--- a/tests/snapshots/hotkey/multiline.spec.ts/should-multiple-line-format-hotkey-work-init.json
+++ b/tests/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/tests/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-enter-finial.json b/tests/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-enter-finial.json
index ff3339caeabb..997c7660eb87 100644
--- a/tests/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-enter-finial.json
+++ b/tests/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/tests/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-enter-init.json b/tests/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-enter-init.json
index 5893152dc88e..00e34ce8e828 100644
--- a/tests/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-enter-init.json
+++ b/tests/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/tests/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-space-finial.json b/tests/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-space-finial.json
index ff3339caeabb..997c7660eb87 100644
--- a/tests/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-space-finial.json
+++ b/tests/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/tests/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-space-init.json b/tests/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-space-init.json
index 5893152dc88e..00e34ce8e828 100644
--- a/tests/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-space-init.json
+++ b/tests/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/tests/snapshots/latex/block.spec.ts/add-latex-block-using-slash-menu-finial.json b/tests/snapshots/latex/block.spec.ts/add-latex-block-using-slash-menu-finial.json
index 74e9e8fdc814..7c68b8774028 100644
--- a/tests/snapshots/latex/block.spec.ts/add-latex-block-using-slash-menu-finial.json
+++ b/tests/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/tests/snapshots/latex/block.spec.ts/add-latex-block-using-slash-menu-init.json b/tests/snapshots/latex/block.spec.ts/add-latex-block-using-slash-menu-init.json
index 5893152dc88e..00e34ce8e828 100644
--- a/tests/snapshots/latex/block.spec.ts/add-latex-block-using-slash-menu-init.json
+++ b/tests/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/tests/snapshots/link.spec.ts/basic-link.json b/tests/snapshots/link.spec.ts/basic-link.json
index d81b55acec36..ab46295359c8 100644
--- a/tests/snapshots/link.spec.ts/basic-link.json
+++ b/tests/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/tests/snapshots/link.spec.ts/convert-link-to-card.json b/tests/snapshots/link.spec.ts/convert-link-to-card.json
index dc269e572796..004b5aa299d2 100644
--- a/tests/snapshots/link.spec.ts/convert-link-to-card.json
+++ b/tests/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/tests/snapshots/linked-page.spec.ts/can-create-linked-page-and-jump-final.json b/tests/snapshots/linked-page.spec.ts/can-create-linked-page-and-jump-final.json
index 34fee791fbef..a16b2aca2dd6 100644
--- a/tests/snapshots/linked-page.spec.ts/can-create-linked-page-and-jump-final.json
+++ b/tests/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/tests/snapshots/linked-page.spec.ts/can-create-linked-page-and-jump-init.json b/tests/snapshots/linked-page.spec.ts/can-create-linked-page-and-jump-init.json
index 34fee791fbef..a16b2aca2dd6 100644
--- a/tests/snapshots/linked-page.spec.ts/can-create-linked-page-and-jump-init.json
+++ b/tests/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/tests/snapshots/linked-page.spec.ts/duplicated-linked-page-should-paste-as-linked-page.json b/tests/snapshots/linked-page.spec.ts/duplicated-linked-page-should-paste-as-linked-page.json
index 26669e0fa160..517f677f887c 100644
--- a/tests/snapshots/linked-page.spec.ts/duplicated-linked-page-should-paste-as-linked-page.json
+++ b/tests/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/tests/snapshots/linked-page.spec.ts/paste-linked-page-should-paste-as-linked-page.json b/tests/snapshots/linked-page.spec.ts/paste-linked-page-should-paste-as-linked-page.json
index 9d6b2f6f5f4f..5e1550d91158 100644
--- a/tests/snapshots/linked-page.spec.ts/paste-linked-page-should-paste-as-linked-page.json
+++ b/tests/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/tests/snapshots/linked-page.spec.ts/should-create-and-switch-page-work-final.json b/tests/snapshots/linked-page.spec.ts/should-create-and-switch-page-work-final.json
index d1f40cdb5d59..2cbb03a247e0 100644
--- a/tests/snapshots/linked-page.spec.ts/should-create-and-switch-page-work-final.json
+++ b/tests/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/tests/snapshots/linked-page.spec.ts/should-create-and-switch-page-work-init.json b/tests/snapshots/linked-page.spec.ts/should-create-and-switch-page-work-init.json
index d1f40cdb5d59..2cbb03a247e0 100644
--- a/tests/snapshots/linked-page.spec.ts/should-create-and-switch-page-work-init.json
+++ b/tests/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/tests/snapshots/list.spec.ts/basic-indent-and-unindent-after-shift-tab.json b/tests/snapshots/list.spec.ts/basic-indent-and-unindent-after-shift-tab.json
index d49a8a8d1990..8e1ea588cd43 100644
--- a/tests/snapshots/list.spec.ts/basic-indent-and-unindent-after-shift-tab.json
+++ b/tests/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/tests/snapshots/list.spec.ts/basic-indent-and-unindent-after-tab.json b/tests/snapshots/list.spec.ts/basic-indent-and-unindent-after-tab.json
index d9da2bbc00c7..147e963b6b20 100644
--- a/tests/snapshots/list.spec.ts/basic-indent-and-unindent-after-tab.json
+++ b/tests/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/tests/snapshots/list.spec.ts/basic-indent-and-unindent-init.json b/tests/snapshots/list.spec.ts/basic-indent-and-unindent-init.json
index d49a8a8d1990..8e1ea588cd43 100644
--- a/tests/snapshots/list.spec.ts/basic-indent-and-unindent-init.json
+++ b/tests/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/tests/snapshots/list.spec.ts/can-expand-toggle-in-readonly-mode-before-readonly.json b/tests/snapshots/list.spec.ts/can-expand-toggle-in-readonly-mode-before-readonly.json
index efa91ab5ddd9..c87227d587e1 100644
--- a/tests/snapshots/list.spec.ts/can-expand-toggle-in-readonly-mode-before-readonly.json
+++ b/tests/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/tests/snapshots/list.spec.ts/click-toggle-icon-should-collapsed-list-init.json b/tests/snapshots/list.spec.ts/click-toggle-icon-should-collapsed-list-init.json
index 5af9598dbc83..e549de1450de 100644
--- a/tests/snapshots/list.spec.ts/click-toggle-icon-should-collapsed-list-init.json
+++ b/tests/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/tests/snapshots/list.spec.ts/click-toggle-icon-should-collapsed-list-toggle.json b/tests/snapshots/list.spec.ts/click-toggle-icon-should-collapsed-list-toggle.json
index efa91ab5ddd9..c87227d587e1 100644
--- a/tests/snapshots/list.spec.ts/click-toggle-icon-should-collapsed-list-toggle.json
+++ b/tests/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/tests/snapshots/list.spec.ts/convert-nested-paragraph-to-list-final.json b/tests/snapshots/list.spec.ts/convert-nested-paragraph-to-list-final.json
index f50c6cb9de5c..bf6873b2f058 100644
--- a/tests/snapshots/list.spec.ts/convert-nested-paragraph-to-list-final.json
+++ b/tests/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/tests/snapshots/list.spec.ts/convert-nested-paragraph-to-list-init.json b/tests/snapshots/list.spec.ts/convert-nested-paragraph-to-list-init.json
index e1635548a5e6..e0bd753647cc 100644
--- a/tests/snapshots/list.spec.ts/convert-nested-paragraph-to-list-init.json
+++ b/tests/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/tests/snapshots/list.spec.ts/enter-list-block-with-empty-text-1.json b/tests/snapshots/list.spec.ts/enter-list-block-with-empty-text-1.json
index 8eb1d2a5d890..a375e41f5616 100644
--- a/tests/snapshots/list.spec.ts/enter-list-block-with-empty-text-1.json
+++ b/tests/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/tests/snapshots/list.spec.ts/enter-list-block-with-empty-text-2.json b/tests/snapshots/list.spec.ts/enter-list-block-with-empty-text-2.json
index fbcb1adb5d32..1d9a13668709 100644
--- a/tests/snapshots/list.spec.ts/enter-list-block-with-empty-text-2.json
+++ b/tests/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/tests/snapshots/list.spec.ts/enter-list-block-with-empty-text-3.json b/tests/snapshots/list.spec.ts/enter-list-block-with-empty-text-3.json
index 915995696c1f..0cef7999ff1c 100644
--- a/tests/snapshots/list.spec.ts/enter-list-block-with-empty-text-3.json
+++ b/tests/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/tests/snapshots/list.spec.ts/enter-list-block-with-empty-text-4.json b/tests/snapshots/list.spec.ts/enter-list-block-with-empty-text-4.json
index eb5985cb32e0..b0ccc738c9df 100644
--- a/tests/snapshots/list.spec.ts/enter-list-block-with-empty-text-4.json
+++ b/tests/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/tests/snapshots/list.spec.ts/enter-list-block-with-empty-text-5.json b/tests/snapshots/list.spec.ts/enter-list-block-with-empty-text-5.json
index 14784e2f8507..af509bc4ec27 100644
--- a/tests/snapshots/list.spec.ts/enter-list-block-with-empty-text-5.json
+++ b/tests/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/tests/snapshots/list.spec.ts/enter-list-block-with-empty-text-init.json b/tests/snapshots/list.spec.ts/enter-list-block-with-empty-text-init.json
index bd93841987cb..081e1cb595cf 100644
--- a/tests/snapshots/list.spec.ts/enter-list-block-with-empty-text-init.json
+++ b/tests/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/tests/snapshots/list.spec.ts/indent-item-should-expand-toggle-finial.json b/tests/snapshots/list.spec.ts/indent-item-should-expand-toggle-finial.json
index e9082f36e0c4..45152ecf1031 100644
--- a/tests/snapshots/list.spec.ts/indent-item-should-expand-toggle-finial.json
+++ b/tests/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/tests/snapshots/list.spec.ts/indent-item-should-expand-toggle-init.json b/tests/snapshots/list.spec.ts/indent-item-should-expand-toggle-init.json
index ea46f779f8a0..736588250218 100644
--- a/tests/snapshots/list.spec.ts/indent-item-should-expand-toggle-init.json
+++ b/tests/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/tests/snapshots/list.spec.ts/indent-item-should-expand-toggle-toggle.json b/tests/snapshots/list.spec.ts/indent-item-should-expand-toggle-toggle.json
index ce1357e1463d..8f74f180ba32 100644
--- a/tests/snapshots/list.spec.ts/indent-item-should-expand-toggle-toggle.json
+++ b/tests/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/tests/snapshots/list.spec.ts/nested-list-blocks-finial.json b/tests/snapshots/list.spec.ts/nested-list-blocks-finial.json
index 5f33886e45df..f88c587d872f 100644
--- a/tests/snapshots/list.spec.ts/nested-list-blocks-finial.json
+++ b/tests/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/tests/snapshots/list.spec.ts/nested-list-blocks-init.json b/tests/snapshots/list.spec.ts/nested-list-blocks-init.json
index 7618c3e7ff3c..86849c7df3f2 100644
--- a/tests/snapshots/list.spec.ts/nested-list-blocks-init.json
+++ b/tests/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/tests/snapshots/list.spec.ts/should-indent-todo-block-preserve-todo-status-final.json b/tests/snapshots/list.spec.ts/should-indent-todo-block-preserve-todo-status-final.json
index b142b1320c3e..8e8a5a5893de 100644
--- a/tests/snapshots/list.spec.ts/should-indent-todo-block-preserve-todo-status-final.json
+++ b/tests/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/tests/snapshots/list.spec.ts/should-indent-todo-block-preserve-todo-status-init.json b/tests/snapshots/list.spec.ts/should-indent-todo-block-preserve-todo-status-init.json
index 618e5372f49a..e6071616a031 100644
--- a/tests/snapshots/list.spec.ts/should-indent-todo-block-preserve-todo-status-init.json
+++ b/tests/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/tests/snapshots/paragraph.spec.ts/delete-empty-text-paragraph-block-should-keep-children-blocks-when-following-custom-blocks-final.json b/tests/snapshots/paragraph.spec.ts/delete-empty-text-paragraph-block-should-keep-children-blocks-when-following-custom-blocks-final.json
index 628adfe41ea0..5877da225ae9 100644
--- a/tests/snapshots/paragraph.spec.ts/delete-empty-text-paragraph-block-should-keep-children-blocks-when-following-custom-blocks-final.json
+++ b/tests/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/tests/snapshots/paragraph.spec.ts/delete-empty-text-paragraph-block-should-keep-children-blocks-when-following-custom-blocks-init.json b/tests/snapshots/paragraph.spec.ts/delete-empty-text-paragraph-block-should-keep-children-blocks-when-following-custom-blocks-init.json
index 0487e165d126..b6c73d2b1962 100644
--- a/tests/snapshots/paragraph.spec.ts/delete-empty-text-paragraph-block-should-keep-children-blocks-when-following-custom-blocks-init.json
+++ b/tests/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/tests/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace-2.json b/tests/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace-2.json
index 434bad82d698..a90abced3d95 100644
--- a/tests/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace-2.json
+++ b/tests/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/tests/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace-3.json b/tests/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace-3.json
index 62c225f682a8..44085016e50c 100644
--- a/tests/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace-3.json
+++ b/tests/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/tests/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace.json b/tests/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace.json
index 934cea41964a..92bc6b1cdb6d 100644
--- a/tests/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace.json
+++ b/tests/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/tests/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-init.json b/tests/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-init.json
index 84bc634380ad..803ebf485b0d 100644
--- a/tests/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-init.json
+++ b/tests/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/tests/snapshots/paragraph.spec.ts/paragraph-with-child-block-should-work-at-enter-final.json b/tests/snapshots/paragraph.spec.ts/paragraph-with-child-block-should-work-at-enter-final.json
index 9395797d1110..981898cd8ac1 100644
--- a/tests/snapshots/paragraph.spec.ts/paragraph-with-child-block-should-work-at-enter-final.json
+++ b/tests/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/tests/snapshots/paragraph.spec.ts/paragraph-with-child-block-should-work-at-enter-init.json b/tests/snapshots/paragraph.spec.ts/paragraph-with-child-block-should-work-at-enter-init.json
index 06a75e586d5d..e30d709c89e8 100644
--- a/tests/snapshots/paragraph.spec.ts/paragraph-with-child-block-should-work-at-enter-init.json
+++ b/tests/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/tests/snapshots/paragraph.spec.ts/should-delete-paragraph-block-child-can-hold-cursor-in-correct-position-final.json b/tests/snapshots/paragraph.spec.ts/should-delete-paragraph-block-child-can-hold-cursor-in-correct-position-final.json
index 948323f6a742..2a05668df0d0 100644
--- a/tests/snapshots/paragraph.spec.ts/should-delete-paragraph-block-child-can-hold-cursor-in-correct-position-final.json
+++ b/tests/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/tests/snapshots/paragraph.spec.ts/should-delete-paragraph-block-child-can-hold-cursor-in-correct-position-init.json b/tests/snapshots/paragraph.spec.ts/should-delete-paragraph-block-child-can-hold-cursor-in-correct-position-init.json
index 91aeefe9e983..a01e9b6bcb6f 100644
--- a/tests/snapshots/paragraph.spec.ts/should-delete-paragraph-block-child-can-hold-cursor-in-correct-position-init.json
+++ b/tests/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/tests/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-2.json b/tests/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-2.json
index 6041eb9fae4f..a19052cb46b1 100644
--- a/tests/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-2.json
+++ b/tests/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/tests/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-3.json b/tests/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-3.json
index b1d0cd2303c4..963047c6cbde 100644
--- a/tests/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-3.json
+++ b/tests/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/tests/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-4.json b/tests/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-4.json
index 25e234e5713f..49a0041ad457 100644
--- a/tests/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-4.json
+++ b/tests/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/tests/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent.json b/tests/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent.json
index 4a65ef72dfe6..1f4480d3be11 100644
--- a/tests/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent.json
+++ b/tests/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/tests/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-init.json b/tests/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-init.json
index 1ea7265dc554..02827ec6b721 100644
--- a/tests/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-init.json
+++ b/tests/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/tests/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-1.json b/tests/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-1.json
index 5dcfb3dfa854..21581ffd7ce1 100644
--- a/tests/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-1.json
+++ b/tests/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/tests/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-2.json b/tests/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-2.json
index f493fae0542c..9f19aa62a1ca 100644
--- a/tests/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-2.json
+++ b/tests/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/tests/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-3.json b/tests/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-3.json
index 1ea7265dc554..02827ec6b721 100644
--- a/tests/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-3.json
+++ b/tests/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/tests/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/tests/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 4ea1706b5fab..f3cc9f20747f 100644
--- a/tests/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/tests/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/tests/snapshots/selection/block.spec.ts/should-indent-multi-selection-block.json b/tests/snapshots/selection/block.spec.ts/should-indent-multi-selection-block.json
index f5b1715e1c0e..6ae6b4f851b8 100644
--- a/tests/snapshots/selection/block.spec.ts/should-indent-multi-selection-block.json
+++ b/tests/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/tests/snapshots/selection/block.spec.ts/should-not-draw-rect-for-sub-selected-blocks-when-entering-tab-key.json b/tests/snapshots/selection/block.spec.ts/should-not-draw-rect-for-sub-selected-blocks-when-entering-tab-key.json
index f5b1715e1c0e..6ae6b4f851b8 100644
--- a/tests/snapshots/selection/block.spec.ts/should-not-draw-rect-for-sub-selected-blocks-when-entering-tab-key.json
+++ b/tests/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/tests/snapshots/selection/block.spec.ts/should-unindent-multi-selection-block-final.json b/tests/snapshots/selection/block.spec.ts/should-unindent-multi-selection-block-final.json
index aea12cd56eeb..9d418c32e19e 100644
--- a/tests/snapshots/selection/block.spec.ts/should-unindent-multi-selection-block-final.json
+++ b/tests/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/tests/snapshots/selection/block.spec.ts/should-unindent-multi-selection-block-init.json b/tests/snapshots/selection/block.spec.ts/should-unindent-multi-selection-block-init.json
index f5b1715e1c0e..6ae6b4f851b8 100644
--- a/tests/snapshots/selection/block.spec.ts/should-unindent-multi-selection-block-init.json
+++ b/tests/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/tests/snapshots/selection/native.spec.ts/indent-native-multi-selection-block-after-shift-tab.json b/tests/snapshots/selection/native.spec.ts/indent-native-multi-selection-block-after-shift-tab.json
index d210121ee41f..fead36f8837e 100644
--- a/tests/snapshots/selection/native.spec.ts/indent-native-multi-selection-block-after-shift-tab.json
+++ b/tests/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/tests/snapshots/selection/native.spec.ts/indent-native-multi-selection-block-after-tab.json b/tests/snapshots/selection/native.spec.ts/indent-native-multi-selection-block-after-tab.json
index 2a88fad73078..0b1890460654 100644
--- a/tests/snapshots/selection/native.spec.ts/indent-native-multi-selection-block-after-tab.json
+++ b/tests/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/tests/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-backspace.json b/tests/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-backspace.json
index 294f40489cbe..4c6eb301d04d 100644
--- a/tests/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-backspace.json
+++ b/tests/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/tests/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-redo.json b/tests/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-redo.json
index 294f40489cbe..4c6eb301d04d 100644
--- a/tests/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-redo.json
+++ b/tests/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/tests/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-undo.json b/tests/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-undo.json
index 4a3b0c356986..e7b49aa46373 100644
--- a/tests/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-undo.json
+++ b/tests/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/tests/snapshots/selection/native.spec.ts/native-range-delete-with-indent-init.json b/tests/snapshots/selection/native.spec.ts/native-range-delete-with-indent-init.json
index 4a3b0c356986..e7b49aa46373 100644
--- a/tests/snapshots/selection/native.spec.ts/native-range-delete-with-indent-init.json
+++ b/tests/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/tests/snapshots/selection/native.spec.ts/should-unindent-native-multi-selection-block-after-tab.json b/tests/snapshots/selection/native.spec.ts/should-unindent-native-multi-selection-block-after-tab.json
new file mode 100644
index 000000000000..79d96fb82cf1
--- /dev/null
+++ b/tests/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/tests/snapshots/slash-menu.spec.ts/delete-block-by-slash-menu-should-remove-children.json b/tests/snapshots/slash-menu.spec.ts/delete-block-by-slash-menu-should-remove-children.json
index 561a6677532a..5ab9555f1550 100644
--- a/tests/snapshots/slash-menu.spec.ts/delete-block-by-slash-menu-should-remove-children.json
+++ b/tests/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/tests/utils/actions/edgeless.ts b/tests/utils/actions/edgeless.ts
index e09a110e3639..2d6a574c9ced 100644
--- a/tests/utils/actions/edgeless.ts
+++ b/tests/utils/actions/edgeless.ts
@@ -1,7 +1,11 @@
-import type { NoteBlockModel, NoteDisplayMode } from '@blocks/index.js';
 import type { IPoint, IVec } from '@blocksuite/global/utils';
 import type { Locator, Page } from '@playwright/test';
 
+import {
+  type NoteBlockModel,
+  type NoteDisplayMode,
+  ShapeFillColor,
+} from '@blocks/index.js';
 import { assertExists, sleep } from '@blocksuite/global/utils';
 import { expect } from '@playwright/test';
 
@@ -636,9 +640,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();
 }
 
@@ -1371,6 +1376,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();
 }
@@ -1406,6 +1412,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();
 }
@@ -1531,7 +1538,7 @@ export async function initThreeOverlapFilledShapes(page: Page) {
   await addBasicRectShapeElement(page, rect0.start, rect0.end);
   await page.mouse.click(rect0.start.x + 5, rect0.start.y + 5);
   await triggerComponentToolbarAction(page, 'changeShapeFillColor');
-  await changeShapeFillColor(page, '--affine-palette-shape-teal');
+  await changeShapeFillColor(page, ShapeFillColor.Green);
 
   const rect1 = {
     start: { x: 130, y: 130 },
@@ -1540,7 +1547,7 @@ export async function initThreeOverlapFilledShapes(page: Page) {
   await addBasicRectShapeElement(page, rect1.start, rect1.end);
   await page.mouse.click(rect1.start.x + 5, rect1.start.y + 5);
   await triggerComponentToolbarAction(page, 'changeShapeFillColor');
-  await changeShapeFillColor(page, '--affine-palette-shape-black');
+  await changeShapeFillColor(page, ShapeFillColor.Blue);
 
   const rect2 = {
     start: { x: 160, y: 160 },
@@ -1549,7 +1556,7 @@ export async function initThreeOverlapFilledShapes(page: Page) {
   await addBasicRectShapeElement(page, rect2.start, rect2.end);
   await page.mouse.click(rect2.start.x + 5, rect2.start.y + 5);
   await triggerComponentToolbarAction(page, 'changeShapeFillColor');
-  await changeShapeFillColor(page, '--affine-palette-shape-white');
+  await changeShapeFillColor(page, ShapeFillColor.White);
 }
 
 export async function initThreeOverlapNotes(page: Page, x = 130, y = 140) {
diff --git a/tests/utils/asserts.ts b/tests/utils/asserts.ts
index 648c84bf2655..68e45f85602a 100644
--- a/tests/utils/asserts.ts
+++ b/tests/utils/asserts.ts
@@ -112,7 +112,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': '--affine-v2-edgeless-note-white',
           'prop:index': 'a0',
           'prop:hidden': false,
           'prop:displayMode': 'both',
diff --git a/yarn.lock b/yarn.lock
index 8dc13ec51be8..7872b3a26a34 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1577,6 +1577,7 @@ __metadata:
     "@blocksuite/global": "workspace:*"
     "@blocksuite/inline": "workspace:*"
     "@blocksuite/store": "workspace:*"
+    "@toeverything/theme": "npm:^1.1.1"
     fractional-indexing: "npm:^3.2.0"
     zod: "npm:^3.23.8"
   languageName: unknown