feat(editor): store real color values in edgeless (#9254)

### What's Changed!

* adds theme type: `ThemeSchema`
* adds default theme: `DefaultTheme`
* stores real color values

blocksuite/tests-legacy/utils/actions/edgeless.ts

@@ -1,10 +1,6 @@
 import '../declare-test-window.js';
 
-import {
-  type NoteBlockModel,
-  type NoteDisplayMode,
-  ShapeFillColor,
-} from '@blocks/index.js';
+import type { NoteBlockModel, NoteDisplayMode } from '@blocks/index.js';
 import type { IPoint, IVec } from '@blocksuite/global/utils';
 import { assertExists, sleep } from '@blocksuite/global/utils';
 import type { Locator, Page } from '@playwright/test';
@@ -649,11 +645,11 @@ export async function rotateElementByHandle(
   );
 }
 
-export async function selectBrushColor(page: Page, color: string) {
+export async function selectBrushColor(page: Page, label: string) {
   const colorButton = page
     .locator('edgeless-brush-menu')
     .locator('edgeless-color-panel')
-    .locator(`.color-unit[aria-label="${color}"]`);
+    .locator(`.color-unit[aria-label="${label}"]`);
   await colorButton.click();
 }
 
@@ -1377,20 +1373,20 @@ export async function triggerComponentToolbarAction(
   }
 }
 
-export async function changeEdgelessNoteBackground(page: Page, color: string) {
+export async function changeEdgelessNoteBackground(page: Page, label: string) {
   const colorButton = page
     .locator('edgeless-change-note-button')
     .locator('edgeless-color-panel')
-    .locator(`.color-unit[aria-label="${color}"]`);
+    .locator(`.color-unit[aria-label="${label}"]`);
   await colorButton.click();
 }
 
-export async function changeShapeFillColor(page: Page, color: string) {
+export async function changeShapeFillColor(page: Page, label: string) {
   const colorButton = page
     .locator('edgeless-change-shape-button')
     .locator('edgeless-color-picker-button.fill-color')
     .locator('edgeless-color-panel')
-    .locator(`.color-unit[aria-label="${color}"]`);
+    .locator(`.color-unit[aria-label="${label}"]`);
   await colorButton.click({ force: true });
 }
 
@@ -1542,7 +1538,7 @@ export async function initThreeOverlapFilledShapes(page: Page) {
   await addBasicRectShapeElement(page, rect0.start, rect0.end);
   await page.mouse.click(rect0.start.x + 5, rect0.start.y + 5);
   await triggerComponentToolbarAction(page, 'changeShapeFillColor');
-  await changeShapeFillColor(page, ShapeFillColor.Green);
+  await changeShapeFillColor(page, 'LightGreen');
 
   const rect1 = {
     start: { x: 130, y: 130 },
@@ -1551,7 +1547,7 @@ export async function initThreeOverlapFilledShapes(page: Page) {
   await addBasicRectShapeElement(page, rect1.start, rect1.end);
   await page.mouse.click(rect1.start.x + 5, rect1.start.y + 5);
   await triggerComponentToolbarAction(page, 'changeShapeFillColor');
-  await changeShapeFillColor(page, ShapeFillColor.Black);
+  await changeShapeFillColor(page, 'MediumBlue');
 
   const rect2 = {
     start: { x: 160, y: 160 },
@@ -1560,7 +1556,7 @@ export async function initThreeOverlapFilledShapes(page: Page) {
   await addBasicRectShapeElement(page, rect2.start, rect2.end);
   await page.mouse.click(rect2.start.x + 5, rect2.start.y + 5);
   await triggerComponentToolbarAction(page, 'changeShapeFillColor');
-  await changeShapeFillColor(page, ShapeFillColor.White);
+  await changeShapeFillColor(page, 'White');
 }
 
 export async function initThreeOverlapNotes(page: Page, x = 130, y = 140) {

blocksuite/tests-legacy/utils/actions/misc.ts

@@ -1229,7 +1229,6 @@ export async function getIndexCoordinate(
         document.querySelectorAll('editor-host')[currentEditorIndex];
       const richText = editorHost.querySelectorAll('rich-text')[
         richTextIndex
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
       ] as any;
       const domRange = richText.inlineEditor.toDomRange({
         index: vIndex,
@@ -1371,7 +1370,7 @@ export async function getCurrentEditorDocId(page: Page) {
 
 export async function getCurrentHTMLTheme(page: Page) {
   const root = page.locator('html');
-  // eslint-disable-next-line unicorn/prefer-dom-node-dataset
+
   return root.getAttribute('data-theme');
 }
 

blocksuite/tests-legacy/utils/asserts.ts

@@ -7,9 +7,9 @@ import type {
   RootBlockModel,
 } from '@blocks/index.js';
 import {
-  DEFAULT_NOTE_BACKGROUND_COLOR,
   DEFAULT_NOTE_HEIGHT,
   DEFAULT_NOTE_WIDTH,
+  DefaultTheme,
 } from '@blocksuite/affine-model';
 import type { BlockComponent, EditorHost } from '@blocksuite/block-std';
 import { BLOCK_ID_ATTR } from '@blocksuite/block-std';
@@ -113,7 +113,7 @@ export const defaultStore = {
           'sys:children': ['2'],
           'sys:version': 1,
           'prop:xywh': `[0,0,${DEFAULT_NOTE_WIDTH}, ${DEFAULT_NOTE_HEIGHT}]`,
-          'prop:background': DEFAULT_NOTE_BACKGROUND_COLOR,
+          'prop:background': DefaultTheme.noteBackgrounColor,
           'prop:index': 'a0',
           'prop:hidden': false,
           'prop:displayMode': 'both',
@@ -1084,7 +1084,7 @@ export async function assertEdgelessNoteBackground(
       return noteWrapper.style.backgroundColor;
     });
 
-  expect(backgroundColor).toEqual(`var(${color})`);
+  expect(toHex(backgroundColor)).toEqual(color);
 }
 
 function toHex(color: string) {
@@ -1117,7 +1117,9 @@ export async function assertEdgelessColorSameWithHexColor(
   edgelessColor: string,
   hexColor: `#${string}`
 ) {
-  const themeColor = await getCurrentThemeCSSPropertyValue(page, edgelessColor);
+  const themeColor = edgelessColor.startsWith('---')
+    ? await getCurrentThemeCSSPropertyValue(page, edgelessColor)
+    : edgelessColor;
   expect(themeColor).toBeTruthy();
   const edgelessHexColor = toHex(themeColor);
 
@@ -1335,11 +1337,20 @@ export async function assertTextSelection(
   }
 }
 
-export async function assertConnectorStrokeColor(page: Page, color: string) {
+export async function assertConnectorStrokeColor(
+  page: Page,
+  label: string,
+  color: string
+) {
   const colorButton = page
     .locator('edgeless-change-connector-button')
     .locator('edgeless-color-panel')
-    .locator(`.color-unit[aria-label="${color}"]`);
+    .locator(`.color-unit[aria-label="${label}"]`)
+    .locator('svg');
 
-  expect(await colorButton.count()).toBe(1);
+  const realColor = await colorButton.evaluate(
+    element => window.getComputedStyle(element).fill
+  );
+
+  expect(toHex(realColor)).toBe(color);
 }