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/model/src/consts/brush.ts

@@ -1,3 +0,0 @@
-import { StrokeColor } from './color.js';
-
-export const DEFAULT_BRUSH_COLOR = StrokeColor.Blue;

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

@@ -1,97 +0,0 @@
-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 const StrokeColor = { Black, White, ...Medium } as const;
-
-export const StrokeColorMap = createEnumMap(StrokeColor);
-
-export const STROKE_COLORS = [...MEDIUM_PALETTES, Black, White] as const;

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

blocksuite/affine/model/src/consts/frame.ts

@@ -1,3 +0,0 @@
-import { Light } from './color.js';
-
-export const FrameBackgroundColor = Light;

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

@@ -1,8 +1,5 @@
-export * from './brush.js';
-export * from './color.js';
 export * from './connector.js';
 export * from './doc.js';
-export * from './frame.js';
 export * from './image.js';
 export * from './line.js';
 export * from './mindmap.js';

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

@@ -3,14 +3,14 @@ import { z } from 'zod';
 import { createEnumMap } from '../utils/enum.js';
 
 export enum LineWidth {
-  Eight = 8,
+  Two = 2,
   // Thin
   Four = 4,
   Six = 6,
+  Eight = 8,
   // Thick
   Ten = 10,
   Twelve = 12,
-  Two = 2,
 }
 
 export const LINE_WIDTHS = [
@@ -23,7 +23,7 @@ export const LINE_WIDTHS = [
 ];
 
 /**
- * Use `StrokeColor` instead.
+ * Use `DefaultTheme.StrokeColorMap` instead.
  *
  * @deprecated
  */
@@ -43,6 +43,11 @@ export enum LineColor {
 
 export const LineColorMap = createEnumMap(LineColor);
 
+/**
+ * Use `DefaultTheme.StrokeColorPalettes` instead.
+ *
+ * @deprecated
+ */
 export const LINE_COLORS = [
   LineColor.Yellow,
   LineColor.Orange,

blocksuite/affine/model/src/consts/note.ts

@@ -1,4 +1,3 @@
-import { themeToVar } from '@toeverything/theme/v2';
 import { z } from 'zod';
 
 import { createEnumMap } from '../utils/enum.js';
@@ -9,40 +8,6 @@ export const NOTE_MIN_HEIGHT = 92;
 export const DEFAULT_NOTE_WIDTH = NOTE_MIN_WIDTH;
 export const DEFAULT_NOTE_HEIGHT = NOTE_MIN_HEIGHT;
 
-export const NoteBackgroundColor = {
-  Yellow: themeToVar('edgeless/note/yellow'),
-  Orange: themeToVar('edgeless/note/orange'),
-  Red: themeToVar('edgeless/note/red'),
-  Magenta: themeToVar('edgeless/note/magenta'),
-  Purple: themeToVar('edgeless/note/purple'),
-  Blue: themeToVar('edgeless/note/blue'),
-  Teal: themeToVar('edgeless/note/teal'),
-  Green: themeToVar('edgeless/note/green'),
-  Black: themeToVar('edgeless/note/black'),
-  Grey: themeToVar('edgeless/note/grey'),
-  White: themeToVar('edgeless/note/white'),
-} as const;
-
-export const NoteBackgroundColorMap = createEnumMap(NoteBackgroundColor);
-
-export const NOTE_BACKGROUND_PALETTES = [
-  NoteBackgroundColor.Yellow,
-  NoteBackgroundColor.Orange,
-  NoteBackgroundColor.Red,
-  NoteBackgroundColor.Magenta,
-  NoteBackgroundColor.Purple,
-  NoteBackgroundColor.Blue,
-  NoteBackgroundColor.Teal,
-  NoteBackgroundColor.Green,
-  NoteBackgroundColor.Black,
-  NoteBackgroundColor.Grey,
-  NoteBackgroundColor.White,
-] as const;
-
-export const NoteBackgroundPaletteEnum = z.enum(NOTE_BACKGROUND_PALETTES);
-
-export const DEFAULT_NOTE_BACKGROUND_COLOR = NoteBackgroundColor.White;
-
 export enum NoteShadow {
   Box = '--affine-note-shadow-box',
   Film = '--affine-note-shadow-film',

blocksuite/affine/model/src/consts/shape.ts

@@ -1,5 +1,3 @@
-import { Black, Light, LIGHT_PALETTES, StrokeColor, White } from './color.js';
-
 export const DEFAULT_ROUGHNESS = 1.4;
 
 // TODO: need to check the default central area ratio
@@ -46,13 +44,3 @@ export enum ShapeStyle {
   General = 'General',
   Scribbled = 'Scribbled',
 }
-
-export const ShapeFillColor = { Black, White, ...Light } as const;
-
-export const SHAPE_FILL_COLORS = [...LIGHT_PALETTES, Black, White];
-
-export const DEFAULT_SHAPE_FILL_COLOR = Light.Yellow;
-
-export const DEFAULT_SHAPE_STROKE_COLOR = StrokeColor.Yellow;
-
-export const DEFAULT_SHAPE_TEXT_COLOR = StrokeColor.Black;

blocksuite/affine/model/src/consts/text.ts

@@ -1,12 +1,5 @@
+import type { Color } from '../themes/color.js';
 import { createEnumMap } from '../utils/enum.js';
-import { StrokeColor } from './color.js';
-
-export enum ColorScheme {
-  Dark = 'dark',
-  Light = 'light',
-}
-
-export type Color = string | Partial<Record<ColorScheme | 'normal', string>>;
 
 export enum TextAlign {
   Center = 'center',
@@ -66,5 +59,3 @@ export enum TextResizing {
   AUTO_WIDTH_AND_HEIGHT,
   AUTO_HEIGHT,
 }
-
-export const DEFAULT_TEXT_COLOR = StrokeColor.Blue;