feat(editor): update edgeless color palette (#9243)

Closes: [BS-1475](https://linear.app/affine-design/issue/BS-1475/颜色主题更新) [BS-1803](https://linear.app/affine-design/issue/BS-1803/fill-color色板影响的yuan素) [BS-1804](https://linear.app/affine-design/issue/BS-1804/border-color色板影响的yuan素) [BS-1815](https://linear.app/affine-design/issue/BS-1815/连线文字配色略瞎) ### What's Changed * refactor `EdgelessLineWidthPanel` component, the previous width is fixed and cannot be used in the new design * refactor `EdgelessColorPanel` and `EdgelessColorButton` components, make them simple and reusable * delete redundant `EdgelessOneRowColorPanel` component * unity and update color palette, if the previously set color is not in the latest color palette, the custom color button will be selected
2026-02-25 18:26:05 +08:00 · 2024-12-30 03:36:33 +00:00
parent 6b1865ff92
commit a5641ae608
250 changed files with 952 additions and 964 deletions
--- a/blocksuite/affine/model/src/blocks/frame/frame-model.ts
+++ b/blocksuite/affine/model/src/blocks/frame/frame-model.ts
@@ -30,7 +30,7 @@ export const FrameBlockSchema = defineBlockSchema({
  flavour: 'affine:frame',
  props: (internal): FrameBlockProps => ({
    title: internal.Text(),
-    background: '--affine-palette-transparent',
+    background: 'transparent',
    xywh: `[0,0,100,100]`,
    index: 'a0',
    childElementIds: Object.create(null),
--- a/blocksuite/affine/model/src/consts/brush.ts
+++ b/blocksuite/affine/model/src/consts/brush.ts
@@ -1,3 +1,3 @@
-import { LineColor } from './line.js';
+import { StrokeColor } from './color.js';

-export const DEFAULT_BRUSH_COLOR = LineColor.Blue;
+export const DEFAULT_BRUSH_COLOR = StrokeColor.Blue;
--- a/blocksuite/affine/model/src/consts/color.ts
+++ b/blocksuite/affine/model/src/consts/color.ts
@@ -0,0 +1,97 @@
+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;
--- a/blocksuite/affine/model/src/consts/connector.ts
+++ b/blocksuite/affine/model/src/consts/connector.ts
@@ -1,5 +1,5 @@
 import { createEnumMap } from '../utils/enum.js';
-import { LineColor } from './line.js';
+import { StrokeColor } from './color.js';

 export enum ConnectorEndpoint {
  Front = 'Front',
@@ -16,9 +16,9 @@ export enum PointStyle {

 export const PointStyleMap = createEnumMap(PointStyle);

-export const DEFAULT_CONNECTOR_COLOR = LineColor.Grey;
+export const DEFAULT_CONNECTOR_COLOR = StrokeColor.Grey;

-export const DEFAULT_CONNECTOR_TEXT_COLOR = LineColor.Black;
+export const DEFAULT_CONNECTOR_TEXT_COLOR = StrokeColor.Black;

 export const DEFAULT_FRONT_END_POINT_STYLE = PointStyle.None;

--- a/blocksuite/affine/model/src/consts/frame.ts
+++ b/blocksuite/affine/model/src/consts/frame.ts
@@ -1,27 +1,3 @@
-import { z } from 'zod';
+import { Light } from './color.js';

-export enum FrameBackgroundColor {
-  Blue = '--affine-tag-blue',
-  Gray = '--affine-tag-gray',
-  Green = '--affine-tag-green',
-  Orange = '--affine-tag-orange',
-  Pink = '--affine-tag-pink',
-  Purple = '--affine-tag-purple',
-  Red = '--affine-tag-red',
-  Teal = '--affine-tag-teal',
-  Yellow = '--affine-tag-yellow',
-}
-
-export const FRAME_BACKGROUND_COLORS = [
-  FrameBackgroundColor.Gray,
-  FrameBackgroundColor.Red,
-  FrameBackgroundColor.Orange,
-  FrameBackgroundColor.Yellow,
-  FrameBackgroundColor.Green,
-  FrameBackgroundColor.Teal,
-  FrameBackgroundColor.Blue,
-  FrameBackgroundColor.Purple,
-  FrameBackgroundColor.Pink,
-];
-
-export const FrameBackgroundColorsSchema = z.nativeEnum(FrameBackgroundColor);
+export const FrameBackgroundColor = Light;
--- a/blocksuite/affine/model/src/consts/index.ts
+++ b/blocksuite/affine/model/src/consts/index.ts
@@ -1,4 +1,5 @@
 export * from './brush.js';
+export * from './color.js';
 export * from './connector.js';
 export * from './doc.js';
 export * from './frame.js';
--- a/blocksuite/affine/model/src/consts/line.ts
+++ b/blocksuite/affine/model/src/consts/line.ts
@@ -13,6 +13,20 @@ export enum LineWidth {
  Two = 2,
 }

+export const LINE_WIDTHS = [
+  LineWidth.Two,
+  LineWidth.Four,
+  LineWidth.Six,
+  LineWidth.Eight,
+  LineWidth.Ten,
+  LineWidth.Twelve,
+];
+
+/**
+ * Use `StrokeColor` instead.
+ *
+ * @deprecated
+ */
 export enum LineColor {
  Black = '--affine-palette-line-black',
  Blue = '--affine-palette-line-blue',
--- a/blocksuite/affine/model/src/consts/note.ts
+++ b/blocksuite/affine/model/src/consts/note.ts
@@ -1,3 +1,4 @@
+import { themeToVar } from '@toeverything/theme/v2';
 import { z } from 'zod';

 import { createEnumMap } from '../utils/enum.js';
@@ -8,23 +9,23 @@ export const NOTE_MIN_HEIGHT = 92;
 export const DEFAULT_NOTE_WIDTH = NOTE_MIN_WIDTH;
 export const DEFAULT_NOTE_HEIGHT = NOTE_MIN_HEIGHT;

-export enum NoteBackgroundColor {
-  Black = '--affine-note-background-black',
-  Blue = '--affine-note-background-blue',
-  Green = '--affine-note-background-green',
-  Grey = '--affine-note-background-grey',
-  Magenta = '--affine-note-background-magenta',
-  Orange = '--affine-note-background-orange',
-  Purple = '--affine-note-background-purple',
-  Red = '--affine-note-background-red',
-  Teal = '--affine-note-background-teal',
-  White = '--affine-note-background-white',
-  Yellow = '--affine-note-background-yellow',
-}
+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_COLORS = [
+export const NOTE_BACKGROUND_PALETTES = [
  NoteBackgroundColor.Yellow,
  NoteBackgroundColor.Orange,
  NoteBackgroundColor.Red,
@@ -38,9 +39,9 @@ export const NOTE_BACKGROUND_COLORS = [
  NoteBackgroundColor.White,
 ] as const;

-export const DEFAULT_NOTE_BACKGROUND_COLOR = NoteBackgroundColor.White;
+export const NoteBackgroundPaletteEnum = z.enum(NOTE_BACKGROUND_PALETTES);

-export const NoteBackgroundColorsSchema = z.nativeEnum(NoteBackgroundColor);
+export const DEFAULT_NOTE_BACKGROUND_COLOR = NoteBackgroundColor.White;

 export enum NoteShadow {
  Box = '--affine-note-shadow-box',
--- a/blocksuite/affine/model/src/consts/shape.ts
+++ b/blocksuite/affine/model/src/consts/shape.ts
@@ -1,6 +1,4 @@
-import { z } from 'zod';
-
-import { LINE_COLORS, LineColor } from './line.js';
+import { Black, Light, LIGHT_PALETTES, StrokeColor, White } from './color.js';

 export const DEFAULT_ROUGHNESS = 1.4;

@@ -49,42 +47,12 @@ export enum ShapeStyle {
  Scribbled = 'Scribbled',
 }

-export enum ShapeFillColor {
-  Black = '--affine-palette-shape-black',
-  Blue = '--affine-palette-shape-blue',
-  Green = '--affine-palette-shape-green',
-  Grey = '--affine-palette-shape-grey',
-  Magenta = '--affine-palette-shape-magenta',
-  Orange = '--affine-palette-shape-orange',
-  Purple = '--affine-palette-shape-purple',
-  Red = '--affine-palette-shape-red',
-  Teal = '--affine-palette-shape-teal',
-  White = '--affine-palette-shape-white',
-  Yellow = '--affine-palette-shape-yellow',
-}
+export const ShapeFillColor = { Black, White, ...Light } as const;

-export const SHAPE_FILL_COLORS = [
-  ShapeFillColor.Yellow,
-  ShapeFillColor.Orange,
-  ShapeFillColor.Red,
-  ShapeFillColor.Magenta,
-  ShapeFillColor.Purple,
-  ShapeFillColor.Blue,
-  ShapeFillColor.Teal,
-  ShapeFillColor.Green,
-  ShapeFillColor.Black,
-  ShapeFillColor.Grey,
-  ShapeFillColor.White,
-] as const;
+export const SHAPE_FILL_COLORS = [...LIGHT_PALETTES, Black, White];

-export const DEFAULT_SHAPE_FILL_COLOR = ShapeFillColor.Yellow;
+export const DEFAULT_SHAPE_FILL_COLOR = Light.Yellow;

-export const FillColorsSchema = z.nativeEnum(ShapeFillColor);
+export const DEFAULT_SHAPE_STROKE_COLOR = StrokeColor.Yellow;

-export const SHAPE_STROKE_COLORS = LINE_COLORS;
-
-export const DEFAULT_SHAPE_STROKE_COLOR = LineColor.Yellow;
-
-export const DEFAULT_SHAPE_TEXT_COLOR = LineColor.Black;
-
-export const StrokeColorsSchema = z.nativeEnum(LineColor);
+export const DEFAULT_SHAPE_TEXT_COLOR = StrokeColor.Black;
--- a/blocksuite/affine/model/src/consts/text.ts
+++ b/blocksuite/affine/model/src/consts/text.ts
@@ -1,5 +1,5 @@
 import { createEnumMap } from '../utils/enum.js';
-import { LineColor } from './line.js';
+import { StrokeColor } from './color.js';

 export enum ColorScheme {
  Dark = 'dark',
@@ -67,4 +67,4 @@ export enum TextResizing {
  AUTO_HEIGHT,
 }

-export const DEFAULT_TEXT_COLOR = LineColor.Blue;
+export const DEFAULT_TEXT_COLOR = StrokeColor.Blue;
--- a/blocksuite/affine/model/src/elements/shape/shape.ts
+++ b/blocksuite/affine/model/src/elements/shape/shape.ts
@@ -24,11 +24,11 @@ import {
  FontFamily,
  FontStyle,
  FontWeight,
-  LineColor,
  ShapeFillColor,
  ShapeStyle,
  ShapeTextFontSize,
  ShapeType,
+  StrokeColor,
  StrokeStyle,
  TextAlign,
  TextResizing,
@@ -160,7 +160,7 @@ export class ShapeElementModel extends GfxPrimitiveElementModel<ShapeProps> {
  accessor shapeType: ShapeType = ShapeType.Rect;

  @field()
-  accessor strokeColor: Color = LineColor.Yellow;
+  accessor strokeColor: Color = StrokeColor.Yellow;

  @field()
  accessor strokeStyle: StrokeStyle = StrokeStyle.Solid;
@@ -246,7 +246,7 @@ export class LocalShapeElementModel extends GfxLocalElementModel {
  accessor shapeType: ShapeType = ShapeType.Rect;

  @prop()
-  accessor strokeColor: Color = LineColor.Yellow;
+  accessor strokeColor: Color = StrokeColor.Yellow;

  @prop()
  accessor strokeStyle: StrokeStyle = StrokeStyle.Solid;