feat: store real color values in edgeless

Author: fundon

blocksuite/tests-legacy/attachment.spec.ts

@@ -144,7 +144,12 @@ test('can insert attachment from slash menu', async ({ page }) => {
     page,
     `
 <affine:note
-  prop:background="--affine-v2-edgeless-note-white"
+  prop:background={
+    Object {
+      "dark": "#000000",
+      "light": "#ffffff",
+    }
+  }
   prop:displayMode="both"
   prop:edgeless={
     Object {
@@ -191,7 +196,12 @@ test('should undo/redo works for attachment', async ({ page }) => {
   await assertStoreMatchJSX(
     page,
     `  <affine:note
-  prop:background="--affine-v2-edgeless-note-white"
+  prop:background={
+    Object {
+      "dark": "#000000",
+      "light": "#ffffff",
+    }
+  }
   prop:displayMode="both"
   prop:edgeless={
     Object {
@@ -229,7 +239,12 @@ test('should undo/redo works for attachment', async ({ page }) => {
     page,
     `
 <affine:note
-  prop:background="--affine-v2-edgeless-note-white"
+  prop:background={
+    Object {
+      "dark": "#000000",
+      "light": "#ffffff",
+    }
+  }
   prop:displayMode="both"
   prop:edgeless={
     Object {
@@ -260,7 +275,12 @@ test('should undo/redo works for attachment', async ({ page }) => {
     page,
     `
 <affine:note
-  prop:background="--affine-v2-edgeless-note-white"
+  prop:background={
+    Object {
+      "dark": "#000000",
+      "light": "#ffffff",
+    }
+  }
   prop:displayMode="both"
   prop:edgeless={
     Object {
@@ -348,7 +368,12 @@ test('should turn attachment to image works', async ({ page }) => {
     page,
     `
 <affine:note
-  prop:background="--affine-v2-edgeless-note-white"
+  prop:background={
+    Object {
+      "dark": "#000000",
+      "light": "#ffffff",
+    }
+  }
   prop:displayMode="both"
   prop:edgeless={
     Object {
@@ -382,7 +407,12 @@ test('should turn attachment to image works', async ({ page }) => {
     page,
     `
 <affine:note
-  prop:background="--affine-v2-edgeless-note-white"
+  prop:background={
+    Object {
+      "dark": "#000000",
+      "light": "#ffffff",
+    }
+  }
   prop:displayMode="both"
   prop:edgeless={
     Object {
@@ -431,7 +461,12 @@ test('should attachment can be deleted', async ({ page }) => {
     page,
     `
 <affine:note
-  prop:background="--affine-v2-edgeless-note-white"
+  prop:background={
+    Object {
+      "dark": "#000000",
+      "light": "#ffffff",
+    }
+  }
   prop:displayMode="both"
   prop:edgeless={
     Object {
@@ -475,7 +510,12 @@ test.fixme(`support dragging attachment block directly`, async ({ page }) => {
   await assertStoreMatchJSX(
     page,
     `  <affine:note
-  prop:background="--affine-v2-edgeless-note-white"
+  prop:background={
+    Object {
+      "dark": "#000000",
+      "light": "#ffffff",
+    }
+  }
   prop:displayMode="both"
   prop:edgeless={
     Object {
@@ -531,7 +571,12 @@ test.fixme(`support dragging attachment block directly`, async ({ page }) => {
     page,
     /*xml*/ `<affine:page>
   <affine:note
-    prop:background="--affine-v2-edgeless-note-white"
+    prop:background={
+      Object {
+        "dark": "#000000",
+        "light": "#ffffff",
+      }
+    }
     prop:displayMode="both"
     prop:edgeless={
       Object {
@@ -589,7 +634,12 @@ test.fixme(`support dragging attachment block directly`, async ({ page }) => {
     page,
     /*xml*/ `<affine:page>
   <affine:note
-    prop:background="--affine-v2-edgeless-note-white"
+    prop:background={
+      Object {
+        "dark": "#000000",
+        "light": "#ffffff",
+      }
+    }
     prop:displayMode="both"
     prop:edgeless={
       Object {

blocksuite/tests-legacy/clipboard/list.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test';
+import { lightThemeV2 } from '@toeverything/theme/v2';
 
 import { initDatabaseColumn } from '../database/actions.js';
 import {
@@ -441,7 +442,12 @@ test(scoped`should copy and paste of database work`, async ({ page }) => {
     /*xml*/ `
 <affine:page>
   <affine:note
-    prop:background="--affine-v2-edgeless-note-white"
+    prop:background={
+      Object {
+        "dark": "#000000",
+        "light": "#ffffff",
+      }
+    }
     prop:displayMode="both"
     prop:edgeless={
       Object {
@@ -491,7 +497,12 @@ test(scoped`should copy and paste of database work`, async ({ page }) => {
     /*xml*/ `
 <affine:page>
   <affine:note
-    prop:background="--affine-v2-edgeless-note-white"
+    prop:background={
+      Object {
+        "dark": "#000000",
+        "light": "#ffffff",
+      }
+    }
     prop:displayMode="both"
     prop:edgeless={
       Object {
@@ -574,17 +585,24 @@ test(scoped`paste note block with background`, async ({ page }) => {
   await selectNoteInEdgeless(page, ids.noteId);
 
   await triggerComponentToolbarAction(page, 'changeNoteColor');
-  const color = '--affine-v2-edgeless-note-grey';
-  await changeEdgelessNoteBackground(page, color);
-  await assertEdgelessNoteBackground(page, ids.noteId, color);
+  await changeEdgelessNoteBackground(page, 'White');
+  await assertEdgelessNoteBackground(
+    page,
+    ids.noteId,
+    lightThemeV2['edgeless/note/white']
+  );
 
   await copyByKeyboard(page);
 
   await page.mouse.move(0, 0);
   await pasteByKeyboard(page, false);
   const noteIds = await getAllNoteIds(page);
   for (const noteId of noteIds) {
-    await assertEdgelessNoteBackground(page, noteId, color);
+    await assertEdgelessNoteBackground(
+      page,
+      noteId,
+      lightThemeV2['edgeless/note/white']
+    );
   }
 });
 

blocksuite/tests-legacy/edgeless/auto-complete.spec.ts

@@ -1,9 +1,5 @@
-import {
-  DEFAULT_NOTE_BACKGROUND_COLOR,
-  ShapeFillColor,
-  StrokeColor,
-} from '@blocksuite/affine-model';
 import { expect, type Page } from '@playwright/test';
+import { lightThemeV2 } from '@toeverything/theme/v2';
 
 import { clickView, moveView } from '../utils/actions/click.js';
 import { dragBetweenCoords } from '../utils/actions/drag.js';
@@ -139,11 +135,9 @@ test.describe('auto-complete', () => {
       await createShapeElement(page, [0, 0], [100, 100], Shape.Square);
       await assertSelectedBound(page, [0, 0, 100, 100]);
       await triggerComponentToolbarAction(page, 'changeShapeStrokeColor');
-      const lineColor = StrokeColor.Red;
-      await changeShapeStrokeColor(page, lineColor);
+      await changeShapeStrokeColor(page, 'MediumRed');
       await triggerComponentToolbarAction(page, 'changeShapeFillColor');
-      const color = ShapeFillColor.Green;
-      await changeShapeFillColor(page, color);
+      await changeShapeFillColor(page, 'HeavyGreen');
       await dragBetweenViewCoords(page, [120, 50], [200, 0]);
 
       const noteButton = getAutoCompletePanelButton(page, 'note');
@@ -168,7 +162,7 @@ test.describe('auto-complete', () => {
       await assertEdgelessNoteBackground(
         page,
         noteId,
-        DEFAULT_NOTE_BACKGROUND_COLOR
+        lightThemeV2['edgeless/note/white']
       );
 
       const rect = await edgelessNote.boundingBox();
@@ -181,15 +175,18 @@ test.describe('auto-complete', () => {
       // select connector
       await dragBetweenViewCoords(page, [140, 50], [160, 0]);
       await waitNextFrame(page);
-      await assertConnectorStrokeColor(page, lineColor);
+      await assertConnectorStrokeColor(
+        page,
+        'MediumRed',
+        lightThemeV2['edgeless/palette/medium/redMedium']
+      );
 
       // select note block
       await page.mouse.click(rect.x + rect.width / 2, rect.y + rect.height / 2);
       await waitNextFrame(page);
 
       await triggerComponentToolbarAction(page, 'changeNoteColor');
-      const noteColor = '--affine-v2-edgeless-note-red';
-      await changeEdgelessNoteBackground(page, noteColor);
+      await changeEdgelessNoteBackground(page, 'Red');
 
       // move to arrow icon
       await page.mouse.move(
@@ -223,7 +220,11 @@ test.describe('auto-complete', () => {
         return note?.getAttribute('data-block-id');
       });
       assertExists(noteId2);
-      await assertEdgelessNoteBackground(page, noteId, noteColor);
+      await assertEdgelessNoteBackground(
+        page,
+        noteId,
+        lightThemeV2['edgeless/note/red']
+      );
 
       expect(await edgelessNote.count()).toBe(2);
     });

blocksuite/tests-legacy/edgeless/brush.spec.ts

@@ -1,5 +1,5 @@
-import { StrokeColor } from '@blocksuite/affine-model';
 import { expect } from '@playwright/test';
+import { lightThemeV2 } from '@toeverything/theme/v2';
 
 import {
   assertEdgelessTool,
@@ -80,15 +80,14 @@ test('add brush element with color', async ({ page }) => {
   await switchEditorMode(page);
 
   await setEdgelessTool(page, 'brush');
-  const color = StrokeColor.Blue;
-  await selectBrushColor(page, color);
+  await selectBrushColor(page, 'Blue');
 
   const start = { x: 100, y: 100 };
   const end = { x: 200, y: 200 };
   await dragBetweenCoords(page, start, end, { steps: 100 });
 
   const [pickedColor] = await pickColorAtPoints(page, [[110, 110]]);
-
+  const color = lightThemeV2['edgeless/palette/medium/blueMedium'];
   await assertEdgelessColorSameWithHexColor(page, color, pickedColor);
 });
 
@@ -101,8 +100,8 @@ test('keep same color when mouse mode switched back to brush', async ({
   await deleteAll(page);
 
   await setEdgelessTool(page, 'brush');
-  const color = StrokeColor.Blue;
-  await selectBrushColor(page, color);
+  await selectBrushColor(page, 'Blue');
+
   const start = { x: 200, y: 200 };
   const end = { x: 300, y: 300 };
   await dragBetweenCoords(page, start, end, { steps: 100 });
@@ -113,7 +112,9 @@ test('keep same color when mouse mode switched back to brush', async ({
   await setEdgelessTool(page, 'brush');
   const origin = { x: 100, y: 100 };
   await dragBetweenCoords(page, origin, start, { steps: 100 });
+
   const [pickedColor] = await pickColorAtPoints(page, [[110, 110]]);
+  const color = lightThemeV2['edgeless/palette/medium/blueMedium'];
   await assertEdgelessColorSameWithHexColor(page, color, pickedColor);
 });
 
@@ -124,8 +125,7 @@ test('add brush element with different size', async ({ page }) => {
 
   await setEdgelessTool(page, 'brush');
   await selectBrushSize(page, 'ten');
-  const color = StrokeColor.Blue;
-  await selectBrushColor(page, color);
+  await selectBrushColor(page, 'Blue');
 
   const start = { x: 100, y: 100 };
   const end = { x: 200, y: 100 };
@@ -143,6 +143,7 @@ test('add brush element with different size', async ({ page }) => {
       [110, 105],
     ]);
 
+  const color = lightThemeV2['edgeless/palette/medium/blueMedium'];
   await assertEdgelessColorSameWithHexColor(page, color, topEdge);
   await assertEdgelessColorSameWithHexColor(page, color, bottomEdge);
   assertSameColor(nearTopEdge, '#84cfff');

blocksuite/tests-legacy/edgeless/connector/connector.spec.ts

@@ -1,4 +1,3 @@
-import { StrokeColor } from '@blocksuite/affine-model';
 import { expect } from '@playwright/test';
 
 import {
@@ -149,7 +148,7 @@ test('change connector line width', async ({ page }) => {
 
   await page.mouse.click(start.x + 5, start.y);
   await triggerComponentToolbarAction(page, 'changeConnectorStrokeColor');
-  await changeConnectorStrokeColor(page, StrokeColor.Grey);
+  await changeConnectorStrokeColor(page, 'MediumGrey');
 
   await triggerComponentToolbarAction(page, 'changeConnectorStrokeStyles');
   await changeConnectorStrokeWidth(page, 5);
@@ -174,7 +173,7 @@ test('change connector stroke style', async ({ page }) => {
 
   await page.mouse.click(start.x + 5, start.y);
   await triggerComponentToolbarAction(page, 'changeConnectorStrokeColor');
-  await changeConnectorStrokeColor(page, StrokeColor.Grey);
+  await changeConnectorStrokeColor(page, 'MediumGrey');
 
   await triggerComponentToolbarAction(page, 'changeConnectorStrokeStyles');
   await changeConnectorStrokeStyle(page, 'dash');

blocksuite/tests-legacy/edgeless/lock.spec.ts

@@ -59,7 +59,6 @@ test.describe('lock', () => {
   test('edgeless element can be locked and unlocked', async ({ page }) => {
     await edgelessCommonSetup(page);
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const wrapTest = async <F extends (...args: any) => any>(
       elementCreateFn: F,
       ...args: Parameters<F>

blocksuite/tests-legacy/edgeless/note/note.spec.ts

@@ -4,6 +4,7 @@ import {
   NoteDisplayMode,
 } from '@blocksuite/affine-model';
 import { expect } from '@playwright/test';
+import { lightThemeV2 } from '@toeverything/theme/v2';
 
 import {
   activeNoteInEdgeless,
@@ -304,14 +305,17 @@ test('change note color', async ({ page }) => {
   await assertEdgelessNoteBackground(
     page,
     noteId,
-    '--affine-v2-edgeless-note-white'
+    lightThemeV2['edgeless/note/white']
   );
 
   await selectNoteInEdgeless(page, noteId);
   await triggerComponentToolbarAction(page, 'changeNoteColor');
-  const color = '--affine-v2-edgeless-note-green';
-  await changeEdgelessNoteBackground(page, color);
-  await assertEdgelessNoteBackground(page, noteId, color);
+  await changeEdgelessNoteBackground(page, 'Green');
+  await assertEdgelessNoteBackground(
+    page,
+    noteId,
+    lightThemeV2['edgeless/note/green']
+  );
 });
 
 test('cursor for active and inactive state', async ({ page }) => {