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/block-surface/src/renderer/canvas-renderer.ts

@@ -21,9 +21,9 @@ import type { ElementRenderer } from './elements/index.js';
 import type { Overlay } from './overlay.js';
 
 type EnvProvider = {
-  generateColorProperty: (color: Color, fallback: string) => string;
+  generateColorProperty: (color: Color, fallback?: Color) => string;
   getColorScheme: () => ColorScheme;
-  getColorValue: (color: Color, fallback?: string, real?: boolean) => string;
+  getColorValue: (color: Color, fallback?: Color, real?: boolean) => string;
   getPropertyValue: (property: string) => string;
   selectedElements?: () => string[];
 };
@@ -368,10 +368,9 @@ export class CanvasRenderer {
     this._disposables.dispose();
   }
 
-  generateColorProperty(color: Color, fallback: string) {
+  generateColorProperty(color: Color, fallback?: Color) {
     return (
-      this.provider.generateColorProperty?.(color, fallback) ??
-      (fallback.startsWith('--') ? `var(${fallback})` : fallback)
+      this.provider.generateColorProperty?.(color, fallback) ?? 'transparent'
     );
   }
 
@@ -409,7 +408,7 @@ export class CanvasRenderer {
     return this.provider.getColorScheme?.() ?? ColorScheme.Light;
   }
 
-  getColorValue(color: Color, fallback?: string, real?: boolean) {
+  getColorValue(color: Color, fallback?: Color, real?: boolean) {
     return (
       this.provider.getColorValue?.(color, fallback, real) ?? 'transparent'
     );

blocksuite/affine/block-surface/src/renderer/elements/brush/index.ts

@@ -1,4 +1,4 @@
-import type { BrushElementModel } from '@blocksuite/affine-model';
+import { type BrushElementModel, DefaultTheme } from '@blocksuite/affine-model';
 
 import type { CanvasRenderer } from '../../canvas-renderer.js';
 
@@ -17,7 +17,7 @@ export function brush(
     matrix.translateSelf(cx, cy).rotateSelf(rotate).translateSelf(-cx, -cy)
   );
 
-  const color = renderer.getColorValue(model.color, '#000000', true);
+  const color = renderer.getColorValue(model.color, DefaultTheme.black, true);
 
   ctx.fillStyle = color;
 

blocksuite/affine/block-surface/src/renderer/elements/connector/index.ts

@@ -1,6 +1,7 @@
 import {
   type ConnectorElementModel,
   ConnectorMode,
+  DefaultTheme,
   type LocalConnectorElementModel,
   type PointStyle,
 } from '@blocksuite/affine-model';
@@ -75,7 +76,11 @@ export function connector(
     ctx.clip(path, 'evenodd');
   }
 
-  const strokeColor = renderer.getColorValue(model.stroke, '#000000', true);
+  const strokeColor = renderer.getColorValue(
+    model.stroke,
+    DefaultTheme.connectorColor,
+    true
+  );
 
   renderPoints(
     model,
@@ -249,7 +254,7 @@ function renderLabel(
   ctx.font = font;
   ctx.textAlign = textAlign;
   ctx.textBaseline = 'middle';
-  ctx.fillStyle = renderer.getColorValue(color, '#000000', true);
+  ctx.fillStyle = renderer.getColorValue(color, DefaultTheme.black, true);
 
   let textMaxWidth = textAlign === 'center' ? 0 : getMaxTextWidth(lines, font);
   if (hasMaxWidth && maxWidth > 0) {

blocksuite/affine/block-surface/src/renderer/elements/shape/index.ts

@@ -3,12 +3,7 @@ import type {
   ShapeElementModel,
   ShapeType,
 } from '@blocksuite/affine-model';
-import {
-  DEFAULT_SHAPE_FILL_COLOR,
-  DEFAULT_SHAPE_STROKE_COLOR,
-  DEFAULT_SHAPE_TEXT_COLOR,
-  TextAlign,
-} from '@blocksuite/affine-model';
+import { DefaultTheme, TextAlign } from '@blocksuite/affine-model';
 import type { IBound } from '@blocksuite/global/utils';
 import { Bound } from '@blocksuite/global/utils';
 import { deltaInsertsToChunks } from '@blocksuite/inline';
@@ -55,17 +50,17 @@ export function shape(
 ) {
   const color = renderer.getColorValue(
     model.color,
-    DEFAULT_SHAPE_TEXT_COLOR,
+    DefaultTheme.shapeTextColor,
     true
   );
   const fillColor = renderer.getColorValue(
     model.fillColor,
-    DEFAULT_SHAPE_FILL_COLOR,
+    DefaultTheme.shapeFillColor,
     true
   );
   const strokeColor = renderer.getColorValue(
     model.strokeColor,
-    DEFAULT_SHAPE_STROKE_COLOR,
+    DefaultTheme.shapeStrokeColor,
     true
   );
   const colors = { color, fillColor, strokeColor };

blocksuite/affine/block-surface/src/renderer/elements/text/index.ts

@@ -1,4 +1,4 @@
-import type { TextElementModel } from '@blocksuite/affine-model';
+import { DefaultTheme, type TextElementModel } from '@blocksuite/affine-model';
 import { deltaInsertsToChunks } from '@blocksuite/inline';
 
 import type { CanvasRenderer } from '../../canvas-renderer.js';
@@ -39,7 +39,11 @@ export function text(
   const horizontalOffset =
     textAlign === 'center' ? w / 2 : textAlign === 'right' ? w : 0;
 
-  const color = renderer.getColorValue(model.color, '#000000', true);
+  const color = renderer.getColorValue(
+    model.color,
+    DefaultTheme.textColor,
+    true
+  );
 
   ctx.font = font;
   ctx.fillStyle = color;

blocksuite/affine/block-surface/src/surface-block.ts

@@ -160,13 +160,13 @@ export class SurfaceBlockComponent extends BlockComponent<
       gridManager: gfx.grid,
       enableStackingCanvas: true,
       provider: {
-        generateColorProperty: (color: Color, fallback: string) =>
+        generateColorProperty: (color: Color, fallback?: Color) =>
           themeService.generateColorProperty(
             color,
             fallback,
             themeService.edgelessTheme
           ),
-        getColorValue: (color: Color, fallback?: string, real?: boolean) =>
+        getColorValue: (color: Color, fallback?: Color, real?: boolean) =>
           themeService.getColorValue(
             color,
             fallback,