feat(edgeless): store real color values in edgeless

toeverything · Dec 19, 2024 · b582d7c · b582d7c
1 parent 4fc6a10
commit b582d7c
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 90 deletions.
diff --git a/packages/affine/model/src/consts/color.ts b/packages/affine/model/src/consts/color.ts
@@ -1,21 +1,19 @@
-import { themeToVar } from '@toeverything/theme/v2';
-import { z } from 'zod';
-
 import { createEnumMap } from '../utils/enum.js';
+import { getColorByKey } from './theme.js';
 
 export const Transparent = 'transparent';
-export const White = themeToVar('edgeless/palette/white');
-export const Black = themeToVar('edgeless/palette/black');
+export const White = getColorByKey('edgeless/palette/white');
+export const Black = getColorByKey('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'),
+  Red: getColorByKey('edgeless/palette/light/redLight'),
+  Orange: getColorByKey('edgeless/palette/light/orangeLight'),
+  Yellow: getColorByKey('edgeless/palette/light/yellowLight'),
+  Green: getColorByKey('edgeless/palette/light/greenLight'),
+  Blue: getColorByKey('edgeless/palette/light/blueLight'),
+  Purple: getColorByKey('edgeless/palette/light/purpleLight'),
+  Magenta: getColorByKey('edgeless/palette/light/magentaLight'),
+  Grey: getColorByKey('edgeless/palette/light/greyLight'),
 } as const;
 
 export const LIGHT_PALETTES = [
@@ -30,14 +28,14 @@ export const LIGHT_PALETTES = [
 ] 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'),
+  Red: getColorByKey('edgeless/palette/medium/redMedium'),
+  Orange: getColorByKey('edgeless/palette/medium/orangeMedium'),
+  Yellow: getColorByKey('edgeless/palette/medium/yellowMedium'),
+  Green: getColorByKey('edgeless/palette/medium/greenMedium'),
+  Blue: getColorByKey('edgeless/palette/medium/blueMedium'),
+  Purple: getColorByKey('edgeless/palette/medium/purpleMedium'),
+  Magenta: getColorByKey('edgeless/palette/medium/magentaMedium'),
+  Grey: getColorByKey('edgeless/palette/medium/greyMedium'),
 } as const;
 
 export const MEDIUM_PALETTES = [
@@ -52,13 +50,13 @@ export const MEDIUM_PALETTES = [
 ] 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'),
+  Red: getColorByKey('edgeless/palette/heavy/red'),
+  Orange: getColorByKey('edgeless/palette/heavy/orange'),
+  Yellow: getColorByKey('edgeless/palette/heavy/yellow'),
+  Green: getColorByKey('edgeless/palette/heavy/green'),
+  Blue: getColorByKey('edgeless/palette/heavy/blue'),
+  Purple: getColorByKey('edgeless/palette/heavy/purple'),
+  Magenta: getColorByKey('edgeless/palette/heavy/magenta'),
 } as const;
 
 export const HEAVY_PALETTES = [
@@ -88,9 +86,6 @@ export const 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);

diff --git a/packages/affine/model/src/consts/index.ts b/packages/affine/model/src/consts/index.ts
@@ -8,3 +8,4 @@ export * from './mindmap.js';
 export * from './note.js';
 export * from './shape.js';
 export * from './text.js';
+export * from './theme.js';
diff --git a/packages/affine/model/src/consts/note.ts b/packages/affine/model/src/consts/note.ts
@@ -1,7 +1,7 @@
-import { themeToVar } from '@toeverything/theme/v2';
 import { z } from 'zod';
 
 import { createEnumMap } from '../utils/enum.js';
+import { getColorByKey } from './theme.js';
 
 export const NOTE_MIN_WIDTH = 450 + 24 * 2;
 export const NOTE_MIN_HEIGHT = 92;
@@ -74,17 +74,17 @@ export const NoteCornersSchema = z.nativeEnum(NoteCorners);
 export const DEFAULT_NOTE_BORDER_SIZE = 4;
 
 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'),
+  Yellow: getColorByKey('edgeless/note/yellow'),
+  Orange: getColorByKey('edgeless/note/orange'),
+  Red: getColorByKey('edgeless/note/red'),
+  Magenta: getColorByKey('edgeless/note/magenta'),
+  Purple: getColorByKey('edgeless/note/purple'),
+  Blue: getColorByKey('edgeless/note/blue'),
+  Teal: getColorByKey('edgeless/note/teal'),
+  Green: getColorByKey('edgeless/note/green'),
+  Black: getColorByKey('edgeless/note/black'),
+  Grey: getColorByKey('edgeless/note/grey'),
+  White: getColorByKey('edgeless/note/white'),
 } as const;
 
 export const NOTE_BACKGROUND_PALETTES = [
@@ -101,11 +101,6 @@ export const NOTE_BACKGROUND_PALETTES = [
   NoteBackgroundColor.White,
 ] as const;
 
-export const NoteBackgroundPaletteEnum = z.enum(NOTE_BACKGROUND_PALETTES);
-export type NoteBackgroundPaletteEnum = z.infer<
-  typeof NoteBackgroundPaletteEnum
->;
-
 export const NoteBackgroundColorMap = createEnumMap(NoteBackgroundColor);
 
 export const DEFAULT_NOTE_BACKGROUND_COLOR = NoteBackgroundColor.White;
diff --git a/packages/affine/model/src/consts/text.ts b/packages/affine/model/src/consts/text.ts
@@ -1,13 +1,8 @@
+import type { Color } from './theme.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',
   Left = 'left',

diff --git a/packages/affine/model/src/consts/theme.ts b/packages/affine/model/src/consts/theme.ts
@@ -0,0 +1,31 @@
+import {
+  type AffineThemeKeyV2,
+  darkThemeV2,
+  lightThemeV2,
+} from '@toeverything/theme/v2';
+import { z } from 'zod';
+
+export enum ColorScheme {
+  Dark = 'dark',
+  Light = 'light',
+}
+
+export const ColorSchema = z.union([
+  z.string(),
+  z.object({
+    normal: z.string(),
+  }),
+  z.object({
+    light: z.string(),
+    dark: z.string(),
+  }),
+]);
+
+export type Color = z.infer<typeof ColorSchema>;
+
+export function getColorByKey(key: AffineThemeKeyV2): Color {
+  const dark = darkThemeV2[key];
+  const light = lightThemeV2[key];
+  if (dark === light) return dark;
+  return { dark, light };
+}
diff --git a/packages/affine/shared/src/services/edit-props-store.ts b/packages/affine/shared/src/services/edit-props-store.ts
@@ -1,3 +1,4 @@
+import { ColorSchema } from '@blocksuite/affine-model';
 import { type BlockStdScope, LifeCycleWatcher } from '@blocksuite/block-std';
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
 import {
@@ -11,11 +12,7 @@ import clonedeep from 'lodash.clonedeep';
 import mergeWith from 'lodash.mergewith';
 import { z } from 'zod';
 
-import {
-  ColorSchema,
-  makeDeepOptional,
-  NodePropsSchema,
-} from '../utils/index.js';
+import { makeDeepOptional, NodePropsSchema } from '../utils/index.js';
 import { EditorSettingProvider } from './editor-setting-service.js';
 
 const LastPropsSchema = NodePropsSchema;

diff --git a/packages/affine/shared/src/utils/zod-schema.ts b/packages/affine/shared/src/utils/zod-schema.ts
@@ -1,4 +1,5 @@
 import {
+  ColorSchema,
   ConnectorMode,
   DEFAULT_CONNECTOR_COLOR,
   DEFAULT_CONNECTOR_TEXT_COLOR,
@@ -18,13 +19,10 @@ import {
   FontStyle,
   FontWeight,
   LayoutType,
-  LineColorsSchema,
   LineWidth,
   MindmapStyle,
-  NoteBackgroundPaletteEnum,
   NoteDisplayMode,
   NoteShadowsSchema,
-  PaletteEnum,
   PointStyle,
   ShapeStyle,
   StrokeColor,
@@ -48,34 +46,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,
@@ -103,7 +84,7 @@ export const ConnectorSchema = z
 
 export const BrushSchema = z
   .object({
-    color: ColorPaletteSchema,
+    color: ColorSchema,
     lineWidth: LineWidthSchema,
   })
   .default({
@@ -129,9 +110,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,
@@ -155,7 +136,7 @@ export const RoundedShapeSchema = z
 
 export const TextSchema = z
   .object({
-    color: TextColorSchema,
+    color: ColorSchema,
     fontSize: z.number(),
     fontFamily: FontFamilySchema,
     fontWeight: FontWeightSchema,
@@ -173,7 +154,7 @@ export const TextSchema = z
 
 export const EdgelessTextSchema = z
   .object({
-    color: TextColorSchema,
+    color: ColorSchema,
     fontFamily: FontFamilySchema,
     fontWeight: FontWeightSchema,
     fontStyle: FontStyleSchema,
@@ -189,7 +170,7 @@ export const EdgelessTextSchema = z
 
 export const NoteSchema = z
   .object({
-    background: NoteBackgroundColorSchema,
+    background: ColorSchema,
     displayMode: NoteDisplayModeSchema,
     edgeless: z.object({
       style: z.object({
@@ -225,7 +206,7 @@ export const MindmapSchema = z
 
 export const FrameSchema = z
   .object({
-    background: ColorPaletteSchema.optional(),
+    background: ColorSchema.optional(),
   })
   .default({});