From b582d7cfbef9b518cf854dd9434c127b3f5820c6 Mon Sep 17 00:00:00 2001 From: Fangdun Tsai Date: Thu, 19 Dec 2024 16:25:34 +0800 Subject: [PATCH] feat(edgeless): store real color values in edgeless --- packages/affine/model/src/consts/color.ts | 57 +++++++++---------- packages/affine/model/src/consts/index.ts | 1 + packages/affine/model/src/consts/note.ts | 29 ++++------ packages/affine/model/src/consts/text.ts | 9 +-- packages/affine/model/src/consts/theme.ts | 31 ++++++++++ .../shared/src/services/edit-props-store.ts | 7 +-- .../affine/shared/src/utils/zod-schema.ts | 41 ++++--------- 7 files changed, 85 insertions(+), 90 deletions(-) create mode 100644 packages/affine/model/src/consts/theme.ts diff --git a/packages/affine/model/src/consts/color.ts b/packages/affine/model/src/consts/color.ts index 6d60d5235b1b..d7007ce1c176 100644 --- 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; - 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 index 62c70b8c25fc..db619e202e0a 100644 --- 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 index e8d0c4dec5ff..9c55ecfa5371 100644 --- 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 index 3f9887621ef2..1516c8b3dbac 100644 --- 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>; - 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 new file mode 100644 index 000000000000..56d55135aabb --- /dev/null +++ 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; + +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 index d5353723408f..e271a62daa91 100644 --- 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 index ef8ce0d68bdf..fab36b51fff4 100644 --- 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({});