feat(edgeless): store real color values in edgeless

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

Hide file tree

Showing 3 changed files with 66 additions and 60 deletions.
diff --git a/packages/affine/model/src/consts/color.ts b/packages/affine/model/src/consts/color.ts
@@ -1,21 +1,43 @@
-import { themeToVar } from '@toeverything/theme/v2';
+import {
+  type AffineThemeKeyV2,
+  darkThemeV2,
+  lightThemeV2,
+} from '@toeverything/theme/v2';
 import { z } from 'zod';
 
 import { createEnumMap } from '../utils/enum.js';
 
+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 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 +52,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 +74,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,11 +110,15 @@ 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);
 
 export const STROKE_COLORS = [...MEDIUM_PALETTES, Black, White] as const;
+
+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/model/src/consts/text.ts b/packages/affine/model/src/consts/text.ts
@@ -1,12 +1,5 @@
 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>>;
+import { type Color, StrokeColor } from './color.js';
 
 export enum TextAlign {
   Center = 'center',

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,11 @@ import {
   FontStyle,
   FontWeight,
   LayoutType,
-  LineColorsSchema,
   LineWidth,
   MindmapStyle,
   NoteBackgroundPaletteEnum,
   NoteDisplayMode,
   NoteShadowsSchema,
-  PaletteEnum,
   PointStyle,
   ShapeStyle,
   StrokeColor,
@@ -48,18 +47,6 @@ 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,
@@ -69,13 +56,13 @@ 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 +90,7 @@ export const ConnectorSchema = z
 
 export const BrushSchema = z
   .object({
-    color: ColorPaletteSchema,
+    color: ColorSchema,
     lineWidth: LineWidthSchema,
   })
   .default({
@@ -129,9 +116,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 +142,7 @@ export const RoundedShapeSchema = z
 
 export const TextSchema = z
   .object({
-    color: TextColorSchema,
+    color: ColorSchema,
     fontSize: z.number(),
     fontFamily: FontFamilySchema,
     fontWeight: FontWeightSchema,
@@ -173,7 +160,7 @@ export const TextSchema = z
 
 export const EdgelessTextSchema = z
   .object({
-    color: TextColorSchema,
+    color: ColorSchema,
     fontFamily: FontFamilySchema,
     fontWeight: FontWeightSchema,
     fontStyle: FontStyleSchema,
@@ -225,7 +212,7 @@ export const MindmapSchema = z
 
 export const FrameSchema = z
   .object({
-    background: ColorPaletteSchema.optional(),
+    background: ColorSchema.optional(),
   })
   .default({});