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
2024-12-30 03:36:33 +00:00
parent 6b1865ff92
commit a5641ae608
250 changed files with 952 additions and 964 deletions
--- a/blocksuite/affine/block-attachment/package.json
+++ b/blocksuite/affine/block-attachment/package.json
@@ -26,7 +26,7 @@
    "@floating-ui/dom": "^1.6.10",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
    "file-type": "^19.5.0",
    "lit": "^3.2.0",
    "minimatch": "^10.0.1",
--- a/blocksuite/affine/block-bookmark/package.json
+++ b/blocksuite/affine/block-bookmark/package.json
@@ -25,7 +25,7 @@
    "@floating-ui/dom": "^1.6.10",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
    "lit": "^3.2.0",
    "minimatch": "^10.0.1",
    "zod": "^3.23.8"
--- a/blocksuite/affine/block-code/package.json
+++ b/blocksuite/affine/block-code/package.json
@@ -23,7 +23,7 @@
    "@floating-ui/dom": "^1.6.10",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
    "@types/mdast": "^4.0.4",
    "lit": "^3.2.0",
    "minimatch": "^10.0.1",
--- a/blocksuite/affine/block-divider/package.json
+++ b/blocksuite/affine/block-divider/package.json
@@ -23,7 +23,7 @@
    "@floating-ui/dom": "^1.6.10",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
    "@types/mdast": "^4.0.4",
    "lit": "^3.2.0",
    "minimatch": "^10.0.1",
--- a/blocksuite/affine/block-edgeless-text/package.json
+++ b/blocksuite/affine/block-edgeless-text/package.json
@@ -25,7 +25,7 @@
    "@floating-ui/dom": "^1.6.10",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
    "lit": "^3.2.0",
    "minimatch": "^10.0.1",
    "zod": "^3.23.8"
--- a/blocksuite/affine/block-embed/package.json
+++ b/blocksuite/affine/block-embed/package.json
@@ -25,7 +25,7 @@
    "@floating-ui/dom": "^1.6.10",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
    "lit": "^3.2.0",
    "minimatch": "^10.0.1",
    "zod": "^3.23.8"
--- a/blocksuite/affine/block-frame/package.json
+++ b/blocksuite/affine/block-frame/package.json
@@ -23,7 +23,7 @@
    "@floating-ui/dom": "^1.6.10",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
    "@types/mdast": "^4.0.4",
    "lit": "^3.2.0",
    "minimatch": "^10.0.1",
--- a/blocksuite/affine/block-image/package.json
+++ b/blocksuite/affine/block-image/package.json
@@ -24,7 +24,7 @@
    "@floating-ui/dom": "^1.6.10",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
    "file-type": "^19.5.0",
    "lit": "^3.2.0",
    "minimatch": "^10.0.1",
--- a/blocksuite/affine/block-latex/package.json
+++ b/blocksuite/affine/block-latex/package.json
@@ -24,7 +24,7 @@
    "@floating-ui/dom": "^1.6.10",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
    "@types/katex": "^0.16.7",
    "@types/mdast": "^4.0.4",
    "katex": "^0.16.11",
--- a/blocksuite/affine/block-list/package.json
+++ b/blocksuite/affine/block-list/package.json
@@ -23,7 +23,7 @@
    "@floating-ui/dom": "^1.6.10",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
    "@types/mdast": "^4.0.4",
    "lit": "^3.2.0",
    "minimatch": "^10.0.1",
--- a/blocksuite/affine/block-note/package.json
+++ b/blocksuite/affine/block-note/package.json
@@ -26,7 +26,7 @@
    "@floating-ui/dom": "^1.6.10",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
    "lit": "^3.2.0",
    "minimatch": "^10.0.1",
    "zod": "^3.23.8"
--- a/blocksuite/affine/block-paragraph/package.json
+++ b/blocksuite/affine/block-paragraph/package.json
@@ -23,7 +23,7 @@
    "@floating-ui/dom": "^1.6.10",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
    "@types/mdast": "^4.0.4",
    "lit": "^3.2.0",
    "minimatch": "^10.0.1",
--- a/blocksuite/affine/block-surface/package.json
+++ b/blocksuite/affine/block-surface/package.json
@@ -22,7 +22,7 @@
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
    "fractional-indexing": "^3.2.0",
    "lit": "^3.2.0",
    "lodash.chunk": "^4.2.0",
--- a/blocksuite/affine/components/package.json
+++ b/blocksuite/affine/components/package.json
@@ -24,7 +24,7 @@
    "@lit/context": "^1.1.2",
    "@lottiefiles/dotlottie-wc": "^0.4.0",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
    "date-fns": "^4.0.0",
    "katex": "^0.16.11",
    "lit": "^3.2.0",
--- a/blocksuite/affine/components/src/icons/edgeless.ts
+++ b/blocksuite/affine/components/src/icons/edgeless.ts
@@ -427,21 +427,6 @@ export const ViewBarIcon = icons.ViewBarIcon({
  height: '24',
 });

-export const TransparentIcon = html`<svg
-  width="16"
-  height="16"
-  viewBox="0 0 16 16"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M-0.939238 4.14286C-0.979281 4.4228 -1 4.70898 -1 5V6.71429H1.57143V9.28571H-1V11C-1 11.291 -0.979281 11.5772 -0.939238 11.8571H1.57143V14.4286H0.0754482C0.481795 15.0111 0.988871 15.5182 1.57143 15.9246V14.4286L4.14286 14.4286V16.9392C4.4228 16.9793 4.70898 17 5 17H6.71429V14.4286H9.28571V17H11C11.291 17 11.5772 16.9793 11.8571 16.9392V14.4286H14.4286L14.4286 15.9246C15.0111 15.5182 15.5182 15.0111 15.9246 14.4286L14.4286 14.4286V11.8571H16.9392C16.9793 11.5772 17 11.291 17 11V9.28571H14.4286V6.71429H17V5C17 4.70898 16.9793 4.4228 16.9392 4.14286H14.4286V1.57143H15.9246C15.5182 0.988871 15.0111 0.481795 14.4286 0.075448L14.4286 1.57143H11.8571V-0.939238C11.5772 -0.979281 11.291 -1 11 -1H9.28571V1.57143H6.71429V-1H5C4.70898 -1 4.4228 -0.979281 4.14286 -0.939238V1.57143H1.57143V0.0754479C0.988871 0.481795 0.481795 0.988871 0.0754479 1.57143H1.57143V4.14286H-0.939238ZM4.14286 4.14286V1.57143H6.71429V4.14286H4.14286ZM4.14286 6.71429H1.57143V4.14286H4.14286V6.71429ZM6.71429 6.71429V4.14286H9.28571V6.71429H6.71429ZM6.71429 9.28571V6.71429H4.14286V9.28571H1.57143V11.8571H4.14286V14.4286H6.71429V11.8571H9.28571V14.4286H11.8571V11.8571H14.4286V9.28571H11.8571V6.71429H14.4286V4.14286H11.8571V1.57143H9.28571V4.14286H11.8571V6.71429H9.28571V9.28571H6.71429ZM6.71429 9.28571V11.8571H4.14286V9.28571H6.71429ZM9.28571 9.28571H11.8571V11.8571H9.28571V9.28571Z"
-    fill="#D9D9D9"
-  />
-</svg>`;
-
 export const MoreHorizontalIcon = icons.MoreHorizontalIcon({
  width: '24',
  height: '24',
--- a/blocksuite/affine/data-view/package.json
+++ b/blocksuite/affine/data-view/package.json
@@ -23,7 +23,7 @@
    "@floating-ui/dom": "^1.6.10",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
    "date-fns": "^4.0.0",
    "lit": "^3.2.0",
    "zod": "^3.23.8"
--- 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;
--- a/blocksuite/affine/shared/package.json
+++ b/blocksuite/affine/shared/package.json
@@ -22,7 +22,7 @@
    "@floating-ui/dom": "^1.6.10",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
    "@types/hast": "^3.0.4",
    "@types/mdast": "^4.0.4",
    "lit": "^3.2.0",
--- a/blocksuite/affine/shared/src/theme/css-variables.ts
+++ b/blocksuite/affine/shared/src/theme/css-variables.ts
@@ -1,6 +1,6 @@
 /* CSS variables. You need to handle all places where `CSS variables` are marked. */

-import { LINE_COLORS, SHAPE_FILL_COLORS } from '@blocksuite/affine-model';
+import { LINE_COLORS } from '@blocksuite/affine-model';
 import {
  type AffineCssVariables,
  type AffineTheme,
@@ -66,7 +66,6 @@ export const ColorVariables = [
  '--affine-tag-orange',
  '--affine-tag-gray',
  ...LINE_COLORS,
-  ...SHAPE_FILL_COLORS,
  '--affine-tooltip',
  '--affine-blue',
 ];
--- a/blocksuite/affine/shared/src/utils/zod-schema.ts
+++ b/blocksuite/affine/shared/src/utils/zod-schema.ts
@@ -14,22 +14,20 @@ import {
  DEFAULT_SHAPE_STROKE_COLOR,
  DEFAULT_SHAPE_TEXT_COLOR,
  DEFAULT_TEXT_COLOR,
-  FillColorsSchema,
  FontFamily,
  FontStyle,
  FontWeight,
-  FrameBackgroundColorsSchema,
  LayoutType,
-  LineColor,
  LineColorsSchema,
  LineWidth,
  MindmapStyle,
-  NoteBackgroundColorsSchema,
+  NoteBackgroundPaletteEnum,
  NoteDisplayMode,
  NoteShadowsSchema,
+  PaletteEnum,
  PointStyle,
  ShapeStyle,
-  StrokeColorsSchema,
+  StrokeColor,
  StrokeStyle,
  TextAlign,
  TextVerticalAlign,
@@ -59,17 +57,12 @@ export const ColorSchema = z.union([
    dark: z.string(),
  }),
 ]);
-const LineColorSchema = z.union([LineColorsSchema, ColorSchema]);
-const ShapeFillColorSchema = z.union([FillColorsSchema, ColorSchema]);
-const ShapeStrokeColorSchema = z.union([StrokeColorsSchema, ColorSchema]);
-const TextColorSchema = z.union([LineColorsSchema, ColorSchema]);
+const ColorPaletteSchema = z.union([ColorSchema, PaletteEnum]);
+const LineColorSchema = z.union([LineColorsSchema, ColorPaletteSchema]);
+const TextColorSchema = z.union([LineColorsSchema, ColorPaletteSchema]);
 const NoteBackgroundColorSchema = z.union([
-  NoteBackgroundColorsSchema,
-  ColorSchema,
-]);
-const FrameBackgroundColorSchema = z.union([
-  FrameBackgroundColorsSchema,
  ColorSchema,
+  NoteBackgroundPaletteEnum,
 ]);

 export const ConnectorSchema = z
@@ -110,13 +103,13 @@ export const ConnectorSchema = z

 export const BrushSchema = z
  .object({
-    color: LineColorSchema,
+    color: ColorPaletteSchema,
    lineWidth: LineWidthSchema,
  })
  .default({
    color: {
-      dark: LineColor.White,
-      light: LineColor.Black,
+      dark: StrokeColor.White,
+      light: StrokeColor.Black,
    },
    lineWidth: LineWidth.Four,
  });
@@ -140,8 +133,8 @@ const DEFAULT_SHAPE = {

 const ShapeObject = {
  color: TextColorSchema,
-  fillColor: ShapeFillColorSchema,
-  strokeColor: ShapeStrokeColorSchema,
+  fillColor: ColorPaletteSchema,
+  strokeColor: ColorPaletteSchema,
  strokeStyle: StrokeStyleSchema,
  strokeWidth: z.number(),
  shapeStyle: ShapeStyleSchema,
@@ -235,7 +228,7 @@ export const MindmapSchema = z

 export const FrameSchema = z
  .object({
-    background: FrameBackgroundColorSchema.optional(),
+    background: ColorPaletteSchema.optional(),
  })
  .default({});

--- a/blocksuite/affine/widget-drag-handle/package.json
+++ b/blocksuite/affine/widget-drag-handle/package.json
@@ -28,7 +28,7 @@
    "@floating-ui/dom": "^1.6.10",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
    "lit": "^3.2.0",
    "minimatch": "^10.0.1",
    "zod": "^3.23.8"
--- a/blocksuite/affine/widget-remote-selection/package.json
+++ b/blocksuite/affine/widget-remote-selection/package.json
@@ -18,7 +18,7 @@
    "@blocksuite/block-std": "workspace:*",
    "@blocksuite/global": "workspace:*",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
    "lit": "^3.2.0"
  },
  "exports": {
--- a/blocksuite/affine/widget-scroll-anchoring/package.json
+++ b/blocksuite/affine/widget-scroll-anchoring/package.json
@@ -18,7 +18,7 @@
    "@blocksuite/block-std": "workspace:*",
    "@blocksuite/global": "workspace:*",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
    "lit": "^3.2.0"
  },
  "exports": {