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/affine/shared/src/utils/zod-schema.ts

@@ -1,33 +1,24 @@
 import {
+  ColorSchema,
   ConnectorMode,
-  DEFAULT_CONNECTOR_COLOR,
-  DEFAULT_CONNECTOR_TEXT_COLOR,
   DEFAULT_FRONT_END_POINT_STYLE,
-  DEFAULT_NOTE_BACKGROUND_COLOR,
   DEFAULT_NOTE_BORDER_SIZE,
   DEFAULT_NOTE_BORDER_STYLE,
   DEFAULT_NOTE_CORNER,
   DEFAULT_NOTE_SHADOW,
   DEFAULT_REAR_END_POINT_STYLE,
   DEFAULT_ROUGHNESS,
-  DEFAULT_SHAPE_FILL_COLOR,
-  DEFAULT_SHAPE_STROKE_COLOR,
-  DEFAULT_SHAPE_TEXT_COLOR,
-  DEFAULT_TEXT_COLOR,
+  DefaultTheme,
   FontFamily,
   FontStyle,
   FontWeight,
   LayoutType,
-  LineColorsSchema,
   LineWidth,
   MindmapStyle,
-  NoteBackgroundPaletteEnum,
   NoteDisplayMode,
   NoteShadowsSchema,
-  PaletteEnum,
   PointStyle,
   ShapeStyle,
-  StrokeColor,
   StrokeStyle,
   TextAlign,
   TextVerticalAlign,
@@ -48,34 +39,17 @@ const ConnectorModeSchema = z.nativeEnum(ConnectorMode);
 const LayoutTypeSchema = z.nativeEnum(LayoutType);
 const MindmapStyleSchema = z.nativeEnum(MindmapStyle);
 
-export const ColorSchema = z.union([
-  z.object({
-    normal: z.string(),
-  }),
-  z.object({
-    light: z.string(),
-    dark: z.string(),
-  }),
-]);
-const ColorPaletteSchema = z.union([ColorSchema, PaletteEnum]);
-const LineColorSchema = z.union([LineColorsSchema, ColorPaletteSchema]);
-const TextColorSchema = z.union([LineColorsSchema, ColorPaletteSchema]);
-const NoteBackgroundColorSchema = z.union([
-  ColorSchema,
-  NoteBackgroundPaletteEnum,
-]);
-
 export const ConnectorSchema = z
   .object({
     frontEndpointStyle: ConnectorEndpointSchema,
     rearEndpointStyle: ConnectorEndpointSchema,
-    stroke: LineColorSchema,
+    stroke: ColorSchema,
     strokeStyle: StrokeStyleSchema,
     strokeWidth: LineWidthSchema,
     rough: z.boolean(),
     mode: ConnectorModeSchema,
     labelStyle: z.object({
-      color: TextColorSchema,
+      color: ColorSchema,
       fontSize: z.number(),
       fontFamily: FontFamilySchema,
       fontWeight: FontWeightSchema,
@@ -86,13 +60,13 @@ export const ConnectorSchema = z
   .default({
     frontEndpointStyle: DEFAULT_FRONT_END_POINT_STYLE,
     rearEndpointStyle: DEFAULT_REAR_END_POINT_STYLE,
-    stroke: DEFAULT_CONNECTOR_COLOR,
+    stroke: DefaultTheme.connectorColor,
     strokeStyle: StrokeStyle.Solid,
     strokeWidth: LineWidth.Two,
     rough: false,
     mode: ConnectorMode.Curve,
     labelStyle: {
-      color: DEFAULT_CONNECTOR_TEXT_COLOR,
+      color: DefaultTheme.black,
       fontSize: 16,
       fontFamily: FontFamily.Inter,
       fontWeight: FontWeight.Regular,
@@ -103,21 +77,18 @@ export const ConnectorSchema = z
 
 export const BrushSchema = z
   .object({
-    color: ColorPaletteSchema,
+    color: ColorSchema,
     lineWidth: LineWidthSchema,
   })
   .default({
-    color: {
-      dark: StrokeColor.White,
-      light: StrokeColor.Black,
-    },
+    color: DefaultTheme.black,
     lineWidth: LineWidth.Four,
   });
 
 const DEFAULT_SHAPE = {
-  color: DEFAULT_SHAPE_TEXT_COLOR,
-  fillColor: DEFAULT_SHAPE_FILL_COLOR,
-  strokeColor: DEFAULT_SHAPE_STROKE_COLOR,
+  color: DefaultTheme.shapeTextColor,
+  fillColor: DefaultTheme.shapeFillColor,
+  strokeColor: DefaultTheme.shapeStrokeColor,
   strokeStyle: StrokeStyle.Solid,
   strokeWidth: LineWidth.Two,
   shapeStyle: ShapeStyle.General,
@@ -132,9 +103,9 @@ const DEFAULT_SHAPE = {
 };
 
 const ShapeObject = {
-  color: TextColorSchema,
-  fillColor: ColorPaletteSchema,
-  strokeColor: ColorPaletteSchema,
+  color: ColorSchema,
+  fillColor: ColorSchema,
+  strokeColor: ColorSchema,
   strokeStyle: StrokeStyleSchema,
   strokeWidth: z.number(),
   shapeStyle: ShapeStyleSchema,
@@ -158,7 +129,7 @@ export const RoundedShapeSchema = z
 
 export const TextSchema = z
   .object({
-    color: TextColorSchema,
+    color: ColorSchema,
     fontSize: z.number(),
     fontFamily: FontFamilySchema,
     fontWeight: FontWeightSchema,
@@ -166,7 +137,7 @@ export const TextSchema = z
     textAlign: TextAlignSchema,
   })
   .default({
-    color: DEFAULT_TEXT_COLOR,
+    color: DefaultTheme.textColor,
     fontSize: 24,
     fontFamily: FontFamily.Inter,
     fontWeight: FontWeight.Regular,
@@ -176,14 +147,14 @@ export const TextSchema = z
 
 export const EdgelessTextSchema = z
   .object({
-    color: TextColorSchema,
+    color: ColorSchema,
     fontFamily: FontFamilySchema,
     fontWeight: FontWeightSchema,
     fontStyle: FontStyleSchema,
     textAlign: TextAlignSchema,
   })
   .default({
-    color: DEFAULT_TEXT_COLOR,
+    color: DefaultTheme.textColor,
     fontFamily: FontFamily.Inter,
     fontWeight: FontWeight.Regular,
     fontStyle: FontStyle.Normal,
@@ -192,7 +163,7 @@ export const EdgelessTextSchema = z
 
 export const NoteSchema = z
   .object({
-    background: NoteBackgroundColorSchema,
+    background: ColorSchema,
     displayMode: NoteDisplayModeSchema,
     edgeless: z.object({
       style: z.object({
@@ -204,7 +175,7 @@ export const NoteSchema = z
     }),
   })
   .default({
-    background: DEFAULT_NOTE_BACKGROUND_COLOR,
+    background: DefaultTheme.noteBackgrounColor,
     displayMode: NoteDisplayMode.EdgelessOnly,
     edgeless: {
       style: {
@@ -228,7 +199,7 @@ export const MindmapSchema = z
 
 export const FrameSchema = z
   .object({
-    background: ColorPaletteSchema.optional(),
+    background: ColorSchema.optional(),
   })
   .default({});