feat(edgeless): store real color values in edgeless

packages/affine/block-surface/src/renderer/canvas-renderer.ts

@@ -25,7 +25,7 @@ import { RoughCanvas } from '../utils/rough/canvas.js';
 type EnvProvider = {
   generateColorProperty: (color: Color, fallback: string) => 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[];
 };
@@ -411,7 +411,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'
     );

packages/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;
 

packages/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';
@@ -76,7 +77,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,
@@ -250,7 +255,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) {

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

@@ -5,12 +5,7 @@ import type {
 } from '@blocksuite/affine-model';
 import type { IBound } from '@blocksuite/global/utils';
 
-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 { Bound } from '@blocksuite/global/utils';
 import { deltaInsertsToChunks } from '@blocksuite/inline';
 
@@ -57,17 +52,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 };

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

@@ -1,5 +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';
@@ -41,7 +40,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;

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

@@ -168,7 +168,7 @@ export class SurfaceBlockComponent extends BlockComponent<
             fallback,
             themeService.edgelessTheme
           ),
-        getColorValue: (color: Color, fallback?: string, real?: boolean) =>
+        getColorValue: (color: Color, fallback?: Color, real?: boolean) =>
           themeService.getColorValue(
             color,
             fallback,

packages/affine/components/src/toolbar/styles.ts

@@ -8,6 +8,7 @@ import { unsafeCSS } from 'lit';
 const toolbarColorKeys: Array<keyof AffineCssVariables> = [
   '--affine-background-overlay-panel-color',
   '--affine-v2-layer-background-overlayPanel' as never,
+  '--affine-v2-layer-insideBorder-blackBorder' as never,
   '--affine-background-error-color',
   '--affine-background-primary-color',
   '--affine-background-tertiary-color',

packages/affine/model/src/blocks/note/note-model.ts

@@ -9,13 +9,13 @@ import { BlockModel, defineBlockSchema } from '@blocksuite/store';
 
 import {
   type Color,
-  DEFAULT_NOTE_BACKGROUND_COLOR,
   DEFAULT_NOTE_BORDER_SIZE,
   DEFAULT_NOTE_BORDER_STYLE,
   DEFAULT_NOTE_CORNER,
   DEFAULT_NOTE_HEIGHT,
   DEFAULT_NOTE_SHADOW,
   DEFAULT_NOTE_WIDTH,
+  DefaultTheme,
   NoteDisplayMode,
   type StrokeStyle,
 } from '../../consts/index.js';
@@ -24,7 +24,7 @@ export const NoteBlockSchema = defineBlockSchema({
   flavour: 'affine:note',
   props: (): NoteProps => ({
     xywh: `[0,0,${DEFAULT_NOTE_WIDTH},${DEFAULT_NOTE_HEIGHT}]`,
-    background: DEFAULT_NOTE_BACKGROUND_COLOR,
+    background: DefaultTheme.noteBackgrounColor,
     index: 'a0',
     lockedBySelf: false,
     hidden: false,

packages/affine/model/src/consts/color.ts

@@ -1,98 +1,54 @@
-import { themeToVar } from '@toeverything/theme/v2';
 import { z } from 'zod';
 
-import { createEnumMap } from '../utils/enum.js';
-
-export const Transparent = 'transparent';
-export const White = themeToVar('edgeless/palette/white');
-export const Black = themeToVar('edgeless/palette/black');
-
-export const Light = {
-  Red: themeToVar('edgeless/palette/light/redLight'),
-  Orange: themeToVar('edgeless/palette/light/orangeLight'),
-  Yellow: themeToVar('edgeless/palette/light/yellowLight'),
-  Green: themeToVar('edgeless/palette/light/greenLight'),
-  Blue: themeToVar('edgeless/palette/light/blueLight'),
-  Purple: themeToVar('edgeless/palette/light/purpleLight'),
-  Magenta: themeToVar('edgeless/palette/light/magentaLight'),
-  Grey: themeToVar('edgeless/palette/light/greyLight'),
-} as const;
-
-export const LIGHT_PALETTES = [
-  Light.Red,
-  Light.Orange,
-  Light.Yellow,
-  Light.Green,
-  Light.Blue,
-  Light.Purple,
-  Light.Magenta,
-  Light.Grey,
-] as const;
-
-export const Medium = {
-  Red: themeToVar('edgeless/palette/medium/redMedium'),
-  Orange: themeToVar('edgeless/palette/medium/orangeMedium'),
-  Yellow: themeToVar('edgeless/palette/medium/yellowMedium'),
-  Green: themeToVar('edgeless/palette/medium/greenMedium'),
-  Blue: themeToVar('edgeless/palette/medium/blueMedium'),
-  Purple: themeToVar('edgeless/palette/medium/purpleMedium'),
-  Magenta: themeToVar('edgeless/palette/medium/magentaMedium'),
-  Grey: themeToVar('edgeless/palette/medium/greyMedium'),
-} as const;
-
-export const MEDIUM_PALETTES = [
-  Medium.Red,
-  Medium.Orange,
-  Medium.Yellow,
-  Medium.Green,
-  Medium.Blue,
-  Medium.Purple,
-  Medium.Magenta,
-  Medium.Grey,
-] as const;
-
-export const Heavy = {
-  Red: themeToVar('edgeless/palette/heavy/red'),
-  Orange: themeToVar('edgeless/palette/heavy/orange'),
-  Yellow: themeToVar('edgeless/palette/heavy/yellow'),
-  Green: themeToVar('edgeless/palette/heavy/green'),
-  Blue: themeToVar('edgeless/palette/heavy/blue'),
-  Purple: themeToVar('edgeless/palette/heavy/purple'),
-  Magenta: themeToVar('edgeless/palette/heavy/magenta'),
-} as const;
-
-export const HEAVY_PALETTES = [
-  Heavy.Red,
-  Heavy.Orange,
-  Heavy.Yellow,
-  Heavy.Green,
-  Heavy.Blue,
-  Heavy.Purple,
-  Heavy.Magenta,
-] as const;
-
-export const PALETTES = [
-  // Light
-  ...LIGHT_PALETTES,
-
-  Transparent,
-
-  // Medium
-  ...MEDIUM_PALETTES,
-
-  White,
-
-  // Heavy
-  ...HEAVY_PALETTES,
-
-  Black,
-] as const;
-
-export const PaletteEnum = z.enum(PALETTES);
-export type PaletteEnum = z.infer<typeof PaletteEnum>;
-
-export const StrokeColor = { Black, White, ...Medium } as const;
-
-export const StrokeColorMap = createEnumMap(StrokeColor);
-
-export const STROKE_COLORS = [...MEDIUM_PALETTES, Black, White] as const;
+export enum ColorScheme {
+  Dark = 'dark',
+  Light = 'light',
+}
+
+const ColorNormalSchema = z.object({
+  normal: z.string(),
+});
+
+const ColorDarkLightSchema = z.object({
+  [ColorScheme.Dark]: z.string(),
+  [ColorScheme.Light]: z.string(),
+});
+
+export const ColorSchema = z.union([
+  z.string(),
+  ColorNormalSchema,
+  ColorDarkLightSchema,
+]);
+
+export type Color = z.infer<typeof ColorSchema>;
+
+// Converts `Color` type to string.
+export function resolveColor(
+  color: Color,
+  colorScheme: ColorScheme,
+  fallback = 'transparent'
+): string {
+  let value = fallback;
+
+  if (typeof color === 'object') {
+    if (ColorScheme.Dark in color && ColorScheme.Light in color) {
+      value = color[colorScheme];
+    } else if ('normal' in color) {
+      value = color.normal;
+    }
+  } else {
+    value = color;
+  }
+
+  if (!value) {
+    value = fallback;
+  }
+
+  return value;
+}
+
+export function isTransparent(color: Color) {
+  return (
+    typeof color === 'string' && color.toLowerCase().endsWith('transparent')
+  );
+}

packages/affine/model/src/consts/connector.ts

@@ -1,5 +1,4 @@
 import { createEnumMap } from '../utils/enum.js';
-import { StrokeColor } from './color.js';
 
 export enum ConnectorEndpoint {
   Front = 'Front',
@@ -16,10 +15,6 @@ export enum PointStyle {
 
 export const PointStyleMap = createEnumMap(PointStyle);
 
-export const DEFAULT_CONNECTOR_COLOR = StrokeColor.Grey;
-
-export const DEFAULT_CONNECTOR_TEXT_COLOR = StrokeColor.Black;
-
 export const DEFAULT_FRONT_END_POINT_STYLE = PointStyle.None;
 
 export const DEFAULT_REAR_END_POINT_STYLE = PointStyle.Arrow;

packages/affine/model/src/consts/index.ts

@@ -1,10 +1,9 @@
-export * from './brush.js';
 export * from './color.js';
 export * from './connector.js';
 export * from './doc.js';
-export * from './frame.js';
 export * from './line.js';
 export * from './mindmap.js';
 export * from './note.js';
 export * from './shape.js';
 export * from './text.js';
+export * from './themes/index.js';

packages/affine/model/src/consts/line.ts

@@ -25,7 +25,7 @@ export const LINE_WIDTHS = [
 ];
 
 /**
- * Use `StrokeColor` instead.
+ * Use `DefaultTheme.StrokeColorMap` instead.
  *
  * @deprecated
  */