feat(editor): update edgeless color palette (#9243)

Closes: [BS-1475](https://linear.app/affine-design/issue/BS-1475/颜色主题更新) [BS-1803](https://linear.app/affine-design/issue/BS-1803/fill-color色板影响的yuan素) [BS-1804](https://linear.app/affine-design/issue/BS-1804/border-color色板影响的yuan素) [BS-1815](https://linear.app/affine-design/issue/BS-1815/连线文字配色略瞎)

### What's Changed

* refactor `EdgelessLineWidthPanel` component, the previous width is fixed and cannot be used in the new design
* refactor `EdgelessColorPanel` and `EdgelessColorButton` components, make them simple and reusable
* delete redundant `EdgelessOneRowColorPanel` component
* unity and update color palette, if the previously set color is not in the latest color palette, the custom color button will be selected

blocksuite/presets/src/__tests__/edgeless/last-props.spec.ts

@@ -13,7 +13,6 @@ import {
   type FrameBlockModel,
   getSurfaceBlock,
   LayoutType,
-  LineColor,
   type MindmapElementModel,
   MindmapStyle,
   NoteBackgroundColor,
@@ -22,6 +21,7 @@ import {
   type ShapeElementModel,
   ShapeFillColor,
   ShapeType,
+  StrokeColor,
   type TextElementModel,
 } from '@blocksuite/blocks';
 import { assertExists } from '@blocksuite/global/utils';
@@ -128,7 +128,7 @@ describe('apply last props', () => {
     const id = service.crud.addElement('connector', { mode: 0 });
     assertExists(id);
     const connector = service.crud.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');
@@ -143,7 +143,7 @@ describe('apply last props', () => {
     expect(connector2.strokeWidth).toBe(10);
     service.crud.updateElement(id2, {
       labelStyle: {
-        color: LineColor.Magenta,
+        color: StrokeColor.Magenta,
         fontFamily: FontFamily.Kalam,
       },
     });
@@ -154,7 +154,7 @@ describe('apply last props', () => {
       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);
   });
 
@@ -163,8 +163,8 @@ describe('apply last props', () => {
     assertExists(id);
     const brush = service.crud.getElementById(id) as BrushElementModel;
     expect(brush.color).toEqual({
-      dark: LineColor.White,
-      light: LineColor.Black,
+      dark: StrokeColor.White,
+      light: StrokeColor.Black,
     });
     expect(brush.lineWidth).toBe(4);
     service.crud.updateElement(id, { lineWidth: 10 });
@@ -212,14 +212,14 @@ describe('apply last props', () => {
     expect(text.color).toBe(DEFAULT_TEXT_COLOR);
     expect(text.fontFamily).toBe(FontFamily.Inter);
     service.crud.updateElement(id, {
-      color: LineColor.Green,
+      color: StrokeColor.Green,
       fontFamily: FontFamily.OrelegaOne,
     });
 
     const id2 = service.crud.addBlock('affine:edgeless-text', {}, surface!.id);
     assertExists(id2);
     const text2 = service.crud.getElementById(id2) as EdgelessTextBlockModel;
-    expect(text2.color).toBe(LineColor.Green);
+    expect(text2.color).toBe(StrokeColor.Green);
     expect(text2.fontFamily).toBe(FontFamily.OrelegaOne);
   });
 
@@ -250,7 +250,7 @@ describe('apply last props', () => {
     const id = service.crud.addBlock('affine:frame', {}, surface!.id);
     assertExists(id);
     const note = service.crud.getElementById(id) as FrameBlockModel;
-    expect(note.background).toBe('--affine-palette-transparent');
+    expect(note.background).toBe('transparent');
     service.crud.updateElement(id, {
       background: FrameBackgroundColor.Purple,
     });

blocksuite/presets/src/__tests__/edgeless/surface-model.spec.ts

@@ -4,6 +4,7 @@ import type {
   ShapeElementModel,
   SurfaceBlockModel,
 } from '@blocksuite/blocks';
+import { StrokeColor } from '@blocksuite/blocks';
 import { beforeEach, describe, expect, test, vi } from 'vitest';
 
 import { wait } from '../utils/common.js';
@@ -71,7 +72,7 @@ describe('element model', () => {
     const element = model.getElementById(id)! as ShapeElementModel;
 
     expect(element.index).toBe('a0');
-    expect(element.strokeColor).toBe('--affine-palette-line-yellow');
+    expect(element.strokeColor).toBe(StrokeColor.Yellow);
     expect(element.strokeWidth).toBe(4);
   });
 
@@ -93,9 +94,7 @@ describe('element model', () => {
 
     const element = model.getElementById(id)! as ShapeElementModel;
 
-    expect(element.yMap.get('strokeColor')).toBe(
-      '--affine-palette-line-yellow'
-    );
+    expect(element.yMap.get('strokeColor')).toBe(StrokeColor.Yellow);
 
     element.strokeColor = '--affine-palette-line-black';
     expect(element.yMap.get('strokeColor')).toBe('--affine-palette-line-black');