diff --git a/blocksuite/tests-legacy/custom-loader.mjs b/blocksuite/tests-legacy/custom-loader.mjs
deleted file mode 100644
index 9a26b3b55..000000000
--- a/blocksuite/tests-legacy/custom-loader.mjs
+++ /dev/null
@@ -1,24 +0,0 @@
-import { resolve as rs } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-import json from './package.json' with { type: 'json' };
-
-const ROOT_PATH = rs(fileURLToPath(import.meta.url), '../../../');
-
-const importsMap = json.bsImport;
-
-export async function resolve(specifier, context, defaultResolve) {
-  if (importsMap[specifier]) {
-    const remapped = importsMap[specifier];
-    return defaultResolve(
-      rs(ROOT_PATH, './node_modules', remapped),
-      context,
-      defaultResolve
-    );
-  }
-  return defaultResolve(specifier, context, defaultResolve);
-}
-
-export async function load(url, context, defaultLoad) {
-  return defaultLoad(url, context, defaultLoad);
-}
diff --git a/blocksuite/tests-legacy/drag.spec.ts b/blocksuite/tests-legacy/drag.spec.ts
index c6cc90535..b1bcb49f1 100644
--- a/blocksuite/tests-legacy/drag.spec.ts
+++ b/blocksuite/tests-legacy/drag.spec.ts
@@ -1,4 +1,3 @@
-import { BLOCK_CHILDREN_CONTAINER_PADDING_LEFT } from '@blocksuite/affine-shared/consts';
 import { expect } from '@playwright/test';
 
 import {
@@ -22,6 +21,7 @@ import {
   initParagraphsByCount,
 } from './utils/actions/misc.js';
 import { assertRichTexts } from './utils/asserts.js';
+import { BLOCK_CHILDREN_CONTAINER_PADDING_LEFT } from './utils/bs-alternative.js';
 import { test } from './utils/playwright.js';
 
 test('only have one drag handle in screen', async ({ page }) => {
diff --git a/blocksuite/tests-legacy/edgeless/auto-connect.spec.ts b/blocksuite/tests-legacy/edgeless/auto-connect.spec.ts
index 23187c196..8c8ea5843 100644
--- a/blocksuite/tests-legacy/edgeless/auto-connect.spec.ts
+++ b/blocksuite/tests-legacy/edgeless/auto-connect.spec.ts
@@ -1,4 +1,3 @@
-import { NoteDisplayMode } from '@blocksuite/affine-model';
 import { assertExists } from '@blocksuite/global/utils';
 import { expect, type Page } from '@playwright/test';
 
@@ -13,6 +12,7 @@ import {
   zoomResetByKeyboard,
 } from '../utils/actions/edgeless.js';
 import { assertSelectedBound } from '../utils/asserts.js';
+import { NoteDisplayMode } from '../utils/bs-alternative.js';
 import { test } from '../utils/playwright.js';
 
 test.describe('auto-connect', () => {
diff --git a/blocksuite/tests-legacy/edgeless/basic.spec.ts b/blocksuite/tests-legacy/edgeless/basic.spec.ts
index 671fca22c..4c73eee5b 100644
--- a/blocksuite/tests-legacy/edgeless/basic.spec.ts
+++ b/blocksuite/tests-legacy/edgeless/basic.spec.ts
@@ -1,7 +1,3 @@
-import {
-  DEFAULT_NOTE_HEIGHT,
-  DEFAULT_NOTE_WIDTH,
-} from '@blocksuite/affine-model';
 import { assertExists } from '@blocksuite/global/utils';
 import { expect } from '@playwright/test';
 
@@ -47,6 +43,10 @@ import {
   assertSelectedBound,
   assertZoomLevel,
 } from '../utils/asserts.js';
+import {
+  DEFAULT_NOTE_HEIGHT,
+  DEFAULT_NOTE_WIDTH,
+} from '../utils/bs-alternative.js';
 import { test } from '../utils/playwright.js';
 
 const CENTER_X = 450;
diff --git a/blocksuite/tests-legacy/edgeless/color-picker.spec.ts b/blocksuite/tests-legacy/edgeless/color-picker.spec.ts
index ed7676b2f..28834bc5e 100644
--- a/blocksuite/tests-legacy/edgeless/color-picker.spec.ts
+++ b/blocksuite/tests-legacy/edgeless/color-picker.spec.ts
@@ -1,4 +1,3 @@
-import { parseStringToRgba } from '@blocksuite/affine-components/color-picker';
 import { expect, type Locator, type Page } from '@playwright/test';
 import { dragBetweenCoords } from 'utils/actions/drag.js';
 import {
@@ -12,6 +11,7 @@ import {
   initEmptyEdgelessState,
 } from 'utils/actions/misc.js';
 
+import { parseStringToRgba } from '../utils/bs-alternative.js';
 import { test } from '../utils/playwright.js';
 
 async function setupWithColorPickerFunction(page: Page) {
diff --git a/blocksuite/tests-legacy/edgeless/frame/frame.spec.ts b/blocksuite/tests-legacy/edgeless/frame/frame.spec.ts
index 088a15bb9..e3e71048d 100644
--- a/blocksuite/tests-legacy/edgeless/frame/frame.spec.ts
+++ b/blocksuite/tests-legacy/edgeless/frame/frame.spec.ts
@@ -1,7 +1,3 @@
-import {
-  DEFAULT_NOTE_HEIGHT,
-  DEFAULT_NOTE_WIDTH,
-} from '@blocksuite/affine-model';
 import { Bound } from '@blocksuite/global/utils';
 import { expect, type Page } from '@playwright/test';
 
@@ -36,6 +32,10 @@ import {
   assertEdgelessElementBound,
   assertSelectedBound,
 } from '../../utils/asserts.js';
+import {
+  DEFAULT_NOTE_HEIGHT,
+  DEFAULT_NOTE_WIDTH,
+} from '../../utils/bs-alternative.js';
 import { test } from '../../utils/playwright.js';
 
 const createFrame = async (
diff --git a/blocksuite/tests-legacy/edgeless/note/mode.spec.ts b/blocksuite/tests-legacy/edgeless/note/mode.spec.ts
index b3d0cec10..a6591cbec 100644
--- a/blocksuite/tests-legacy/edgeless/note/mode.spec.ts
+++ b/blocksuite/tests-legacy/edgeless/note/mode.spec.ts
@@ -1,5 +1,3 @@
-import { NoteDisplayMode } from '@blocksuite/affine-model';
-
 import {
   addNote,
   changeNoteDisplayModeWithId,
@@ -9,6 +7,7 @@ import {
   zoomResetByKeyboard,
 } from '../../utils/actions/index.js';
 import { assertBlockCount } from '../../utils/asserts.js';
+import { NoteDisplayMode } from '../../utils/bs-alternative.js';
 import { test } from '../../utils/playwright.js';
 
 test('Note added on doc mode should display on both modes by default', async ({
diff --git a/blocksuite/tests-legacy/edgeless/note/note.spec.ts b/blocksuite/tests-legacy/edgeless/note/note.spec.ts
index f8b8de7c8..5c3fbbf58 100644
--- a/blocksuite/tests-legacy/edgeless/note/note.spec.ts
+++ b/blocksuite/tests-legacy/edgeless/note/note.spec.ts
@@ -1,8 +1,3 @@
-import {
-  DEFAULT_NOTE_HEIGHT,
-  DEFAULT_NOTE_WIDTH,
-  NoteDisplayMode,
-} from '@blocksuite/affine-model';
 import { expect } from '@playwright/test';
 import { lightThemeV2 } from '@toeverything/theme/v2';
 
@@ -54,6 +49,11 @@ import {
   assertRichTexts,
   assertTextSelection,
 } from '../../utils/asserts.js';
+import {
+  DEFAULT_NOTE_HEIGHT,
+  DEFAULT_NOTE_WIDTH,
+  NoteDisplayMode,
+} from '../../utils/bs-alternative.js';
 import { test } from '../../utils/playwright.js';
 
 const CENTER_X = 450;
diff --git a/blocksuite/tests-legacy/edgeless/note/resize.spec.ts b/blocksuite/tests-legacy/edgeless/note/resize.spec.ts
index 2226e6a1f..4848fb580 100644
--- a/blocksuite/tests-legacy/edgeless/note/resize.spec.ts
+++ b/blocksuite/tests-legacy/edgeless/note/resize.spec.ts
@@ -1,4 +1,3 @@
-import { NOTE_MIN_HEIGHT, NOTE_MIN_WIDTH } from '@blocksuite/affine-model';
 import { expect } from '@playwright/test';
 
 import {
@@ -25,6 +24,7 @@ import {
   assertRectEqual,
   assertRichTexts,
 } from '../../utils/asserts.js';
+import { NOTE_MIN_HEIGHT, NOTE_MIN_WIDTH } from '../../utils/bs-alternative.js';
 import { test } from '../../utils/playwright.js';
 
 test('resize note in edgeless mode', async ({ page }) => {
diff --git a/blocksuite/tests-legacy/edgeless/reordering.spec.ts b/blocksuite/tests-legacy/edgeless/reordering.spec.ts
index 999f80cf5..e75d3f56b 100644
--- a/blocksuite/tests-legacy/edgeless/reordering.spec.ts
+++ b/blocksuite/tests-legacy/edgeless/reordering.spec.ts
@@ -1,7 +1,3 @@
-import {
-  DEFAULT_NOTE_HEIGHT,
-  DEFAULT_NOTE_WIDTH,
-} from '@blocksuite/affine-model';
 import { expect, type Page } from '@playwright/test';
 
 import {
@@ -31,6 +27,10 @@ import {
   assertEdgelessSelectedRect,
   assertSelectedBound,
 } from '../utils/asserts.js';
+import {
+  DEFAULT_NOTE_HEIGHT,
+  DEFAULT_NOTE_WIDTH,
+} from '../utils/bs-alternative.js';
 import { test } from '../utils/playwright.js';
 
 test.describe('reordering', () => {
diff --git a/blocksuite/tests-legacy/edgeless/selection/keyboard.spec.ts b/blocksuite/tests-legacy/edgeless/selection/keyboard.spec.ts
index a7690fa1f..d4f394ea6 100644
--- a/blocksuite/tests-legacy/edgeless/selection/keyboard.spec.ts
+++ b/blocksuite/tests-legacy/edgeless/selection/keyboard.spec.ts
@@ -1,4 +1,3 @@
-import { NoteDisplayMode } from '@blocksuite/affine-model';
 import { expect } from '@playwright/test';
 
 import * as actions from '../../utils/actions/edgeless.js';
@@ -24,6 +23,7 @@ import {
   assertEdgelessSelectedRect,
   assertVisibleBlockCount,
 } from '../../utils/asserts.js';
+import { NoteDisplayMode } from '../../utils/bs-alternative.js';
 import { test } from '../../utils/playwright.js';
 
 test.describe('translation should constrain to cur axis when dragged with shift key', () => {
diff --git a/blocksuite/tests-legacy/fragments/outline/outline-panel.spec.ts b/blocksuite/tests-legacy/fragments/outline/outline-panel.spec.ts
index 2c4e9f669..e60539de4 100644
--- a/blocksuite/tests-legacy/fragments/outline/outline-panel.spec.ts
+++ b/blocksuite/tests-legacy/fragments/outline/outline-panel.spec.ts
@@ -1,4 +1,3 @@
-import { NoteDisplayMode } from '@blocksuite/affine-model';
 import { expect, type Locator, type Page } from '@playwright/test';
 import {
   addNote,
@@ -19,6 +18,7 @@ import {
 } from 'utils/actions/misc.js';
 import { assertRichTexts } from 'utils/asserts.js';
 
+import { NoteDisplayMode } from '../../utils/bs-alternative.js';
 import { test } from '../../utils/playwright.js';
 import {
   createHeadingsWithGap,
diff --git a/blocksuite/tests-legacy/package.json b/blocksuite/tests-legacy/package.json
index f8f521596..498904186 100644
--- a/blocksuite/tests-legacy/package.json
+++ b/blocksuite/tests-legacy/package.json
@@ -4,7 +4,7 @@
   "type": "module",
   "main": "index.js",
   "scripts": {
-    "test": "NODE_OPTIONS=\"--experimental-loader ../tests-legacy/custom-loader.mjs\" yarn playwright test"
+    "test": "yarn playwright test"
   },
   "dependencies": {
     "@blocksuite/affine-components": "workspace:*",
diff --git a/blocksuite/tests-legacy/utils/asserts.ts b/blocksuite/tests-legacy/utils/asserts.ts
index db2a51fc3..0a87501eb 100644
--- a/blocksuite/tests-legacy/utils/asserts.ts
+++ b/blocksuite/tests-legacy/utils/asserts.ts
@@ -6,11 +6,6 @@ import type {
   RichText,
   RootBlockModel,
 } from '@blocks/index.js';
-import {
-  DEFAULT_NOTE_HEIGHT,
-  DEFAULT_NOTE_WIDTH,
-  DefaultTheme,
-} from '@blocksuite/affine-model';
 import type {
   BlockComponent,
   EditorHost,
@@ -21,6 +16,10 @@ import type { InlineRootElement } from '@inline/inline-editor.js';
 import { expect, type Locator, type Page } from '@playwright/test';
 import type { BlockModel } from '@store/index.js';
 
+import {
+  DEFAULT_NOTE_HEIGHT,
+  DEFAULT_NOTE_WIDTH,
+} from '../utils/bs-alternative.js';
 import {
   getCanvasElementsCount,
   getConnectorPath,
@@ -111,7 +110,7 @@ export const defaultStore = {
           'sys:children': ['2'],
           'sys:version': 1,
           'prop:xywh': `[0,0,${DEFAULT_NOTE_WIDTH}, ${DEFAULT_NOTE_HEIGHT}]`,
-          'prop:background': DefaultTheme.noteBackgrounColor,
+          'prop:background': 'rgba(255, 255, 255, 1)',
           'prop:index': 'a0',
           'prop:hidden': false,
           'prop:displayMode': 'both',
diff --git a/blocksuite/tests-legacy/utils/bs-alternative.ts b/blocksuite/tests-legacy/utils/bs-alternative.ts
new file mode 100644
index 000000000..90c908ece
--- /dev/null
+++ b/blocksuite/tests-legacy/utils/bs-alternative.ts
@@ -0,0 +1,78 @@
+export const BLOCK_CHILDREN_CONTAINER_PADDING_LEFT = 24;
+export const NOTE_MIN_WIDTH = 450 + 24 * 2;
+export const NOTE_MIN_HEIGHT = 92;
+
+export const DEFAULT_NOTE_WIDTH = NOTE_MIN_WIDTH;
+export const DEFAULT_NOTE_HEIGHT = NOTE_MIN_HEIGHT;
+
+export enum NoteDisplayMode {
+  DocAndEdgeless = 'both',
+  DocOnly = 'doc',
+  EdgelessOnly = 'edgeless',
+}
+
+export const clamp = (min: number, val: number, max: number) =>
+  Math.min(Math.max(min, val), max);
+
+export const bound01 = (n: number, max: number) => {
+  n = clamp(0, n, max);
+
+  // Handle floating point rounding errors
+  if (Math.abs(n - max) < 0.000001) {
+    return 1;
+  }
+
+  // Convert into [0, 1] range if it isn't already
+  return (n % max) / max;
+};
+
+export const parseHexToRgba = (hex: string) => {
+  if (hex.startsWith('#')) {
+    hex = hex.substring(1);
+  }
+
+  const len = hex.length;
+  let arr: string[] = [];
+
+  if (len === 3 || len === 4) {
+    arr = hex.split('').map(s => s.repeat(2));
+  } else if (len === 6 || len === 8) {
+    arr = Array.from<number>({ length: len / 2 })
+      .fill(0)
+      .map((n, i) => n + i * 2)
+      .map(n => hex.substring(n, n + 2));
+  }
+
+  const [r, g, b, a = 1] = arr
+    .map(s => parseInt(s, 16))
+    .map(n => bound01(n, 255));
+
+  return { r, g, b, a };
+};
+
+export const parseStringToRgba = (value: string) => {
+  value = value.trim();
+
+  // Compatible old format: `--affine-palette-transparent`
+  if (value.endsWith('transparent')) {
+    return { r: 1, g: 1, b: 1, a: 0 };
+  }
+
+  if (value.startsWith('#')) {
+    return parseHexToRgba(value);
+  }
+
+  if (value.startsWith('rgb')) {
+    const [r, g, b, a = 1] = value
+      .replace(/^rgba?/, '')
+      .replace(/\(|\)/, '')
+      .split(',')
+      .map(s => parseFloat(s.trim()))
+      // In CSS, the alpha is already in the range [0, 1]
+      .map((n, i) => bound01(n, i === 3 ? 1 : 255));
+
+    return { r, g, b, a };
+  }
+
+  return { r: 0, g: 0, b: 0, a: 1 };
+};