feat(editor): store real color values in edgeless (#9254)

### What's Changed! * adds theme type: `ThemeSchema` * adds default theme: `DefaultTheme` * stores real color values
2026-07-23 21:38:44 +08:00 · 2024-12-30 03:36:35 +00:00
parent a5641ae608
commit b9f2650369
287 changed files with 2219 additions and 1520 deletions
@@ -4,10 +4,14 @@ import type {
  BrushProps,
  ColorScheme,
 } from '@blocksuite/affine-model';
-import { LineWidth, PALETTES } from '@blocksuite/affine-model';
+import {
+  DefaultTheme,
+  LineWidth,
+  resolveColor,
+} from '@blocksuite/affine-model';
 import { countBy, maxBy, WithDisposable } from '@blocksuite/global/utils';
 import { html, LitElement, nothing } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';

 import type { EdgelessColorPickerButton } from '../../edgeless/components/color-picker/button.js';
@@ -17,7 +21,6 @@ import {
  packColorsWithColorScheme,
 } from '../../edgeless/components/color-picker/utils.js';
 import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js';
-import { GET_DEFAULT_LINE_COLOR } from '../../edgeless/components/panel/color-panel.js';
 import type { LineWidthEvent } from '../../edgeless/components/panel/line-width-panel.js';
 import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';

@@ -25,13 +28,13 @@ function getMostCommonColor(
  elements: BrushElementModel[],
  colorScheme: ColorScheme
 ): string {
-  const colors = countBy(elements, (ele: BrushElementModel) => {
-    return typeof ele.color === 'object'
-      ? (ele.color[colorScheme] ?? ele.color.normal ?? null)
-      : ele.color;
-  });
+  const colors = countBy(elements, (ele: BrushElementModel) =>
+    resolveColor(ele.color, colorScheme)
+  );
  const max = maxBy(Object.entries(colors), ([_k, count]) => count);
-  return max ? (max[0] as string) : GET_DEFAULT_LINE_COLOR(colorScheme);
+  return max
+    ? (max[0] as string)
+    : resolveColor(DefaultTheme.black, colorScheme);
 }

 function getMostCommonSize(elements: BrushElementModel[]): LineWidth {
@@ -45,26 +48,29 @@ function notEqual<K extends keyof BrushProps>(key: K, value: BrushProps[K]) {
 }

 export class EdgelessChangeBrushButton extends WithDisposable(LitElement) {
-  private readonly _setBrushColor = ({ detail: color }: ColorEvent) => {
+  private readonly _setBrushColor = ({ detail }: ColorEvent) => {
+    const color = detail.value;
    this._setBrushProp('color', color);
-    this._selectedColor = color;
  };

  private readonly _setLineWidth = ({ detail: lineWidth }: LineWidthEvent) => {
    this._setBrushProp('lineWidth', lineWidth);
-    this._selectedSize = lineWidth;
  };

-  pickColor = (event: PickColorEvent) => {
-    if (event.type === 'pick') {
-      this.elements.forEach(ele =>
-        this.crud.updateElement(ele.id, packColor('color', { ...event.detail }))
-      );
+  pickColor = (e: PickColorEvent) => {
+    const field = 'color';
+
+    if (e.type === 'pick') {
+      const color = e.detail.value;
+      this.elements.forEach(ele => {
+        const props = packColor(field, color);
+        this.crud.updateElement(ele.id, props);
+      });
      return;
    }

    this.elements.forEach(ele =>
-      ele[event.type === 'start' ? 'stash' : 'pop']('color')
+      ele[e.type === 'start' ? 'stash' : 'pop'](field)
    );
  };

@@ -72,17 +78,6 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) {
    return this.edgeless.doc;
  }

-  get selectedColor() {
-    const colorScheme = this.edgeless.surface.renderer.getColorScheme();
-    return (
-      this._selectedColor ?? getMostCommonColor(this.elements, colorScheme)
-    );
-  }
-
-  get selectedSize() {
-    return this._selectedSize ?? getMostCommonSize(this.elements);
-  }
-
  get service() {
    return this.edgeless.service;
  }
@@ -110,7 +105,8 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) {
  override render() {
    const colorScheme = this.edgeless.surface.renderer.getColorScheme();
    const elements = this.elements;
-    const { selectedSize, selectedColor } = this;
+    const selectedColor = getMostCommonColor(elements, colorScheme);
+    const selectedSize = getMostCommonSize(elements);

    return html`
      <edgeless-line-width-panel
@@ -138,7 +134,8 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) {
              .color=${selectedColor}
              .colors=${colors}
              .colorType=${type}
-              .palettes=${PALETTES}
+              .theme=${colorScheme}
+              .palettes=${DefaultTheme.Palettes}
            >
            </edgeless-color-picker-button>
          `;
@@ -156,6 +153,8 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) {
          >
            <edgeless-color-panel
              .value=${selectedColor}
+              .theme=${colorScheme}
+              .palettes=${DefaultTheme.Palettes}
              @select=${this._setBrushColor}
            >
            </edgeless-color-panel>
@@ -165,12 +164,6 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) {
    `;
  }

-  @state()
-  private accessor _selectedColor: string | null = null;
-
-  @state()
-  private accessor _selectedSize: LineWidth | null = null;
-
  @query('edgeless-color-picker-button.color')
  accessor colorButton!: EdgelessColorPickerButton;

@@ -28,9 +28,10 @@ import {
  ConnectorMode,
  DEFAULT_FRONT_END_POINT_STYLE,
  DEFAULT_REAR_END_POINT_STYLE,
+  DefaultTheme,
  LineWidth,
-  PALETTES,
  PointStyle,
+  resolveColor,
  StrokeStyle,
 } from '@blocksuite/affine-model';
 import { countBy, maxBy, WithDisposable } from '@blocksuite/global/utils';
@@ -48,10 +49,7 @@ import {
  packColor,
  packColorsWithColorScheme,
 } from '../../edgeless/components/color-picker/utils.js';
-import {
-  type ColorEvent,
-  GET_DEFAULT_LINE_COLOR,
-} from '../../edgeless/components/panel/color-panel.js';
+import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js';
 import {
  type LineStyleEvent,
  LineStylesPanel,
@@ -62,14 +60,14 @@ import { mountConnectorLabelEditor } from '../../edgeless/utils/text.js';
 function getMostCommonColor(
  elements: ConnectorElementModel[],
  colorScheme: ColorScheme
-): string | null {
-  const colors = countBy(elements, (ele: ConnectorElementModel) => {
-    return typeof ele.stroke === 'object'
-      ? (ele.stroke[colorScheme] ?? ele.stroke.normal ?? null)
-      : ele.stroke;
-  });
+): string {
+  const colors = countBy(elements, (ele: ConnectorElementModel) =>
+    resolveColor(ele.stroke, colorScheme)
+  );
  const max = maxBy(Object.entries(colors), ([_k, count]) => count);
-  return max ? (max[0] as string) : null;
+  return max
+    ? (max[0] as string)
+    : resolveColor(DefaultTheme.connectorColor, colorScheme);
 }

 function getMostCommonMode(
@@ -88,10 +86,10 @@ function getMostCommonLineWidth(elements: ConnectorElementModel[]): LineWidth {

 export function getMostCommonLineStyle(
  elements: ConnectorElementModel[]
-): StrokeStyle | null {
+): StrokeStyle {
  const sizes = countBy(elements, ele => ele.strokeStyle);
  const max = maxBy(Object.entries(sizes), ([_k, count]) => count);
-  return max ? (max[0] as StrokeStyle) : null;
+  return max ? (max[0] as StrokeStyle) : StrokeStyle.Solid;
 }

 function getMostCommonRough(elements: ConnectorElementModel[]): boolean {
@@ -112,15 +110,16 @@ function getMostCommonRough(elements: ConnectorElementModel[]): boolean {

 function getMostCommonEndpointStyle(
  elements: ConnectorElementModel[],
-  endpoint: ConnectorEndpoint
-): PointStyle | null {
+  endpoint: ConnectorEndpoint,
+  fallback: PointStyle
+): PointStyle {
  const field =
    endpoint === ConnectorEndpoint.Front
      ? 'frontEndpointStyle'
      : 'rearEndpointStyle';
  const modes = countBy(elements, ele => ele[field]);
  const max = maxBy(Object.entries(modes), ([_k, count]) => count);
-  return max ? (max[0] as PointStyle) : null;
+  return max ? (max[0] as PointStyle) : fallback;
 }

 function notEqual<
@@ -227,19 +226,33 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
    return this.edgeless.std.get(EdgelessCRUDIdentifier);
  }

-  pickColor = (event: PickColorEvent) => {
-    if (event.type === 'pick') {
-      this.elements.forEach(ele =>
-        this.crud.updateElement(
-          ele.id,
-          packColor('stroke', { ...event.detail })
-        )
-      );
+  private readonly _setConnectorColor = (e: ColorEvent) => {
+    const stroke = e.detail.value;
+    this._setConnectorProp('stroke', stroke);
+  };
+
+  private readonly _setConnectorStroke = ({ type, value }: LineStyleEvent) => {
+    if (type === 'size') {
+      this._setConnectorStrokeWidth(value);
+      return;
+    }
+    this._setConnectorStrokeStyle(value);
+  };
+
+  pickColor = (e: PickColorEvent) => {
+    const field = 'stroke';
+
+    if (e.type === 'pick') {
+      const color = e.detail.value;
+      this.elements.forEach(ele => {
+        const props = packColor(field, color);
+        this.crud.updateElement(ele.id, props);
+      });
      return;
    }

    this.elements.forEach(ele =>
-      ele[event.type === 'start' ? 'stash' : 'pop']('stroke')
+      ele[e.type === 'start' ? 'stash' : 'pop'](field)
    );
  };

@@ -276,10 +289,6 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
    );
  }

-  private _setConnectorColor(stroke: string) {
-    this._setConnectorProp('stroke', stroke);
-  }
-
  private _setConnectorMode(mode: ConnectorMode) {
    this._setConnectorProp('mode', mode);
  }
@@ -310,14 +319,6 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
    this._setConnectorProp('rough', rough);
  }

-  private _setConnectorStroke({ type, value }: LineStyleEvent) {
-    if (type === 'size') {
-      this._setConnectorStrokeWidth(value);
-      return;
-    }
-    this._setConnectorStrokeStyle(value);
-  }
-
  private _setConnectorStrokeStyle(strokeStyle: StrokeStyle) {
    this._setConnectorProp('strokeStyle', strokeStyle);
  }
@@ -339,20 +340,21 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
  override render() {
    const colorScheme = this.edgeless.surface.renderer.getColorScheme();
    const elements = this.elements;
-    const selectedColor =
-      getMostCommonColor(elements, colorScheme) ??
-      GET_DEFAULT_LINE_COLOR(colorScheme);
+    const selectedColor = getMostCommonColor(elements, colorScheme);
    const selectedMode = getMostCommonMode(elements);
-    const selectedLineSize = getMostCommonLineWidth(elements) ?? LineWidth.Four;
+    const selectedLineSize = getMostCommonLineWidth(elements);
    const selectedRough = getMostCommonRough(elements);
-    const selectedLineStyle =
-      getMostCommonLineStyle(elements) ?? StrokeStyle.Solid;
-    const selectedStartPointStyle =
-      getMostCommonEndpointStyle(elements, ConnectorEndpoint.Front) ??
-      DEFAULT_FRONT_END_POINT_STYLE;
-    const selectedEndPointStyle =
-      getMostCommonEndpointStyle(elements, ConnectorEndpoint.Rear) ??
-      DEFAULT_REAR_END_POINT_STYLE;
+    const selectedLineStyle = getMostCommonLineStyle(elements);
+    const selectedStartPointStyle = getMostCommonEndpointStyle(
+      elements,
+      ConnectorEndpoint.Front,
+      DEFAULT_FRONT_END_POINT_STYLE
+    );
+    const selectedEndPointStyle = getMostCommonEndpointStyle(
+      elements,
+      ConnectorEndpoint.Rear,
+      DEFAULT_REAR_END_POINT_STYLE
+    );

    return join(
      [
@@ -373,7 +375,8 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
                .color=${selectedColor}
                .colors=${colors}
                .colorType=${type}
-                .palettes=${PALETTES}
+                .theme=${colorScheme}
+                .palettes=${DefaultTheme.Palettes}
                .hollowCircle=${true}
              >
                <div
@@ -389,7 +392,7 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
                  ${LineStylesPanel({
                    selectedLineSize: selectedLineSize,
                    selectedLineStyle: selectedLineStyle,
-                    onClick: (e: LineStyleEvent) => this._setConnectorStroke(e),
+                    onClick: this._setConnectorStroke,
                  })}
                </div>
                <editor-toolbar-separator
@@ -414,13 +417,12 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
              `}
            >
              <stroke-style-panel
+                .theme=${colorScheme}
                .strokeWidth=${selectedLineSize}
                .strokeStyle=${selectedLineStyle}
                .strokeColor=${selectedColor}
-                .setStrokeStyle=${(e: LineStyleEvent) =>
-                  this._setConnectorStroke(e)}
-                .setStrokeColor=${(e: ColorEvent) =>
-                  this._setConnectorColor(e.detail)}
+                .setStrokeStyle=${this._setConnectorStroke}
+                .setStrokeColor=${this._setConnectorColor}
              >
              </stroke-style-panel>
            </editor-menu-button>
@@ -9,9 +9,10 @@ import { renderToolbarSeparator } from '@blocksuite/affine-components/toolbar';
 import {
  type ColorScheme,
  DEFAULT_NOTE_HEIGHT,
+  DefaultTheme,
  type FrameBlockModel,
  NoteDisplayMode,
-  PALETTES,
+  resolveColor,
 } from '@blocksuite/affine-model';
 import { matchFlavours } from '@blocksuite/affine-shared/utils';
 import { GfxExtensionIdentifier } from '@blocksuite/block-std/gfx';
@@ -41,14 +42,12 @@ import { mountFrameTitleEditor } from '../../edgeless/utils/text.js';
 function getMostCommonColor(
  elements: FrameBlockModel[],
  colorScheme: ColorScheme
-): string | null {
-  const colors = countBy(elements, (ele: FrameBlockModel) => {
-    return typeof ele.background === 'object'
-      ? (ele.background[colorScheme] ?? ele.background.normal ?? null)
-      : ele.background;
-  });
+): string {
+  const colors = countBy(elements, (ele: FrameBlockModel) =>
+    resolveColor(ele.background, colorScheme)
+  );
  const max = maxBy(Object.entries(colors), ([_k, count]) => count);
-  return max ? (max[0] as string) : null;
+  return max ? (max[0] as string) : 'transparent';
 }

 export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
@@ -56,19 +55,27 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
    return this.edgeless.std.get(EdgelessCRUDIdentifier);
  }

-  pickColor = (event: PickColorEvent) => {
-    if (event.type === 'pick') {
-      this.frames.forEach(ele =>
-        this.crud.updateElement(
-          ele.id,
-          packColor('background', { ...event.detail })
-        )
-      );
+  private readonly _setFrameBackground = (e: ColorEvent) => {
+    const background = e.detail.value;
+    this.frames.forEach(frame => {
+      this.crud.updateElement(frame.id, { background });
+    });
+  };
+
+  pickColor = (e: PickColorEvent) => {
+    const field = 'background';
+
+    if (e.type === 'pick') {
+      const color = e.detail.value;
+      this.frames.forEach(ele => {
+        const props = packColor(field, color);
+        this.crud.updateElement(ele.id, props);
+      });
      return;
    }

    this.frames.forEach(ele =>
-      ele[event.type === 'start' ? 'stash' : 'pop']('background')
+      ele[e.type === 'start' ? 'stash' : 'pop'](field)
    );
  };

@@ -119,18 +126,12 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
    toast(this.edgeless.host, 'Frame has been inserted into doc');
  }

-  private _setFrameBackground(color: string) {
-    this.frames.forEach(frame => {
-      this.crud.updateElement(frame.id, { background: color });
-    });
-  }
-
  protected override render() {
    const { frames } = this;
    const len = frames.length;
    const onlyOne = len === 1;
    const colorScheme = this.edgeless.surface.renderer.getColorScheme();
-    const background = getMostCommonColor(frames, colorScheme) ?? 'transparent';
+    const background = getMostCommonColor(frames, colorScheme);

    return join(
      [
@@ -203,7 +204,8 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
                .color=${background}
                .colors=${colors}
                .colorType=${type}
-                .palettes=${PALETTES}
+                .theme=${colorScheme}
+                .palettes=${DefaultTheme.Palettes}
              >
              </edgeless-color-picker-button>
            `;
@@ -224,8 +226,9 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
            >
              <edgeless-color-panel
                .value=${background}
-                .palettes=${PALETTES}
-                @select=${(e: ColorEvent) => this._setFrameBackground(e.detail)}
+                .theme=${colorScheme}
+                .palettes=${DefaultTheme.Palettes}
+                @select=${this._setFrameBackground}
              >
              </edgeless-color-panel>
            </editor-menu-button>
@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* oxlint-disable @typescript-eslint/no-non-null-assertion */
 import {
  MindmapBalanceLayoutIcon,
  MindmapLeftLayoutIcon,
@@ -14,10 +14,10 @@ import {
 } from '@blocksuite/affine-components/toolbar';
 import {
  type ColorScheme,
-  DEFAULT_NOTE_BACKGROUND_COLOR,
-  NOTE_BACKGROUND_PALETTES,
+  DefaultTheme,
  type NoteBlockModel,
  NoteDisplayMode,
+  resolveColor,
  type StrokeStyle,
 } from '@blocksuite/affine-model';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
@@ -43,7 +43,6 @@ import {
  packColor,
  packColorsWithColorScheme,
 } from '../../edgeless/components/color-picker/utils.js';
-import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js';
 import {
  type LineStyleEvent,
  LineStylesPanel,
@@ -68,14 +67,14 @@ const DisplayModeMap = {
 function getMostCommonBackground(
  elements: NoteBlockModel[],
  colorScheme: ColorScheme
-): string | null {
-  const colors = countBy(elements, (ele: NoteBlockModel) => {
-    return typeof ele.background === 'object'
-      ? (ele.background[colorScheme] ?? ele.background.normal ?? null)
-      : ele.background;
-  });
+): string {
+  const colors = countBy(elements, (ele: NoteBlockModel) =>
+    resolveColor(ele.background, colorScheme)
+  );
  const max = maxBy(Object.entries(colors), ([_k, count]) => count);
-  return max ? (max[0] as string) : null;
+  return max
+    ? (max[0] as string)
+    : resolveColor(DefaultTheme.noteBackgrounColor, colorScheme);
 }

 export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
@@ -83,6 +82,12 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
    return this.edgeless.std.get(EdgelessCRUDIdentifier);
  }

+  private readonly _setBackground = (background: string) => {
+    this.notes.forEach(element => {
+      this.crud.updateElement(element.id, { background });
+    });
+  };
+
  private readonly _setBorderRadius = (borderRadius: number) => {
    this.notes.forEach(note => {
      const props = {
@@ -112,18 +117,19 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
    });
  };

-  pickColor = (event: PickColorEvent) => {
-    if (event.type === 'pick') {
+  pickColor = (e: PickColorEvent) => {
+    const field = 'background';
+
+    if (e.type === 'pick') {
+      const color = e.detail.value;
      this.notes.forEach(element => {
-        const props = packColor('background', { ...event.detail });
+        const props = packColor(field, color);
        this.crud.updateElement(element.id, props);
      });
      return;
    }

-    this.notes.forEach(ele =>
-      ele[event.type === 'start' ? 'stash' : 'pop']('background')
-    );
+    this.notes.forEach(ele => ele[e.type === 'start' ? 'stash' : 'pop'](field));
  };

  private get _advancedVisibilityEnabled() {
@@ -145,12 +151,6 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
    this.edgeless.slots.toggleNoteSlicer.emit();
  }

-  private _setBackground(background: string) {
-    this.notes.forEach(element => {
-      this.crud.updateElement(element.id, { background });
-    });
-  }
-
  private _setCollapse() {
    this.notes.forEach(note => {
      const { collapse, collapsedHeight } = note.edgeless;
@@ -262,9 +262,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
    const { shadowType, borderRadius, borderSize, borderStyle } =
      edgeless.style;
    const colorScheme = this.edgeless.surface.renderer.getColorScheme();
-    const background =
-      getMostCommonBackground(this.notes, colorScheme) ??
-      DEFAULT_NOTE_BACKGROUND_COLOR;
+    const background = getMostCommonBackground(this.notes, colorScheme);

    const { collapse } = edgeless;
    const scale = edgeless.scale ?? 1;
@@ -317,9 +315,11 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
                  .label=${'Background'}
                  .pick=${this.pickColor}
                  .color=${background}
+                  .colorPanelClass=${'small'}
                  .colorType=${type}
                  .colors=${colors}
-                  .palettes=${NOTE_BACKGROUND_PALETTES}
+                  .theme=${colorScheme}
+                  .palettes=${DefaultTheme.NoteBackgroundColorPalettes}
                >
                </edgeless-color-picker-button>
              `;
@@ -339,9 +339,11 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
                `}
              >
                <edgeless-color-panel
+                  class="small"
                  .value=${background}
-                  .options=${NOTE_BACKGROUND_PALETTES}
-                  @select=${(e: ColorEvent) => this._setBackground(e.detail)}
+                  .theme=${colorScheme}
+                  .palettes=${DefaultTheme.NoteBackgroundColorPalettes}
+                  @select=${this._setBackground}
                >
                </edgeless-color-panel>
              </editor-menu-button>
@@ -8,20 +8,21 @@ import {
 } from '@blocksuite/affine-components/icons';
 import { renderToolbarSeparator } from '@blocksuite/affine-components/toolbar';
 import type {
+  Color,
  ColorScheme,
  ShapeElementModel,
  ShapeProps,
 } from '@blocksuite/affine-model';
 import {
-  DEFAULT_SHAPE_FILL_COLOR,
-  DEFAULT_SHAPE_STROKE_COLOR,
+  DefaultTheme,
  FontFamily,
  getShapeName,
  getShapeRadius,
  getShapeType,
+  isTransparent,
  LineWidth,
  MindmapElementModel,
-  PALETTES,
+  resolveColor,
  ShapeStyle,
  StrokeStyle,
 } from '@blocksuite/affine-model';
@@ -33,6 +34,7 @@ import { choose } from 'lit/directives/choose.js';
 import { join } from 'lit/directives/join.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { when } from 'lit/directives/when.js';
+import isEqual from 'lodash.isequal';

 import type { EdgelessColorPickerButton } from '../../edgeless/components/color-picker/button.js';
 import type { PickColorEvent } from '../../edgeless/components/color-picker/types.js';
@@ -40,11 +42,7 @@ import {
  packColor,
  packColorsWithColorScheme,
 } from '../../edgeless/components/color-picker/utils.js';
-import {
-  type ColorEvent,
-  GET_DEFAULT_LINE_COLOR,
-  isTransparent,
-} from '../../edgeless/components/panel/color-panel.js';
+import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js';
 import {
  type LineStyleEvent,
  LineStylesPanel,
@@ -52,11 +50,6 @@ import {
 import type { EdgelessShapePanel } from '../../edgeless/components/panel/shape-panel.js';
 import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';
 import type { ShapeToolOption } from '../../edgeless/gfx-tool/shape-tool.js';
-import {
-  SHAPE_FILL_COLOR_BLACK,
-  SHAPE_TEXT_COLOR_PURE_BLACK,
-  SHAPE_TEXT_COLOR_PURE_WHITE,
-} from '../../edgeless/utils/consts.js';
 import { mountShapeTextEditor } from '../../edgeless/utils/text.js';

 const changeShapeButtonStyles = [
@@ -88,62 +81,56 @@ const changeShapeButtonStyles = [
 function getMostCommonFillColor(
  elements: ShapeElementModel[],
  colorScheme: ColorScheme
-): string | null {
-  const colors = countBy(elements, (ele: ShapeElementModel) => {
-    if (ele.filled) {
-      return typeof ele.fillColor === 'object'
-        ? (ele.fillColor[colorScheme] ?? ele.fillColor.normal ?? null)
-        : ele.fillColor;
-    }
-    return 'transparent';
-  });
+): string {
+  const colors = countBy(elements, (ele: ShapeElementModel) =>
+    ele.filled ? resolveColor(ele.fillColor, colorScheme) : 'transparent'
+  );
  const max = maxBy(Object.entries(colors), ([_k, count]) => count);
-  return max ? (max[0] as string) : null;
+  return max
+    ? (max[0] as string)
+    : resolveColor(DefaultTheme.shapeFillColor, colorScheme);
 }

 function getMostCommonStrokeColor(
  elements: ShapeElementModel[],
  colorScheme: ColorScheme
-): string | null {
-  const colors = countBy(elements, (ele: ShapeElementModel) => {
-    return typeof ele.strokeColor === 'object'
-      ? (ele.strokeColor[colorScheme] ?? ele.strokeColor.normal ?? null)
-      : ele.strokeColor;
-  });
+): string {
+  const colors = countBy(elements, (ele: ShapeElementModel) =>
+    resolveColor(ele.strokeColor, colorScheme)
+  );
  const max = maxBy(Object.entries(colors), ([_k, count]) => count);
-  return max ? (max[0] as string) : null;
+  return max
+    ? (max[0] as string)
+    : resolveColor(DefaultTheme.shapeStrokeColor, colorScheme);
 }

 function getMostCommonShape(
  elements: ShapeElementModel[]
 ): ShapeToolOption['shapeName'] | null {
-  const shapeTypes = countBy(elements, (ele: ShapeElementModel) => {
-    return getShapeName(ele.shapeType, ele.radius);
-  });
+  const shapeTypes = countBy(elements, (ele: ShapeElementModel) =>
+    getShapeName(ele.shapeType, ele.radius)
+  );
  const max = maxBy(Object.entries(shapeTypes), ([_k, count]) => count);
  return max ? (max[0] as ShapeToolOption['shapeName']) : null;
 }

 function getMostCommonLineSize(elements: ShapeElementModel[]): LineWidth {
-  const sizes = countBy(elements, (ele: ShapeElementModel) => {
-    return ele.strokeWidth;
-  });
+  const sizes = countBy(elements, (ele: ShapeElementModel) => ele.strokeWidth);
  const max = maxBy(Object.entries(sizes), ([_k, count]) => count);
  return max ? (Number(max[0]) as LineWidth) : LineWidth.Four;
 }

-function getMostCommonLineStyle(
-  elements: ShapeElementModel[]
-): StrokeStyle | null {
+function getMostCommonLineStyle(elements: ShapeElementModel[]): StrokeStyle {
  const sizes = countBy(elements, (ele: ShapeElementModel) => ele.strokeStyle);
  const max = maxBy(Object.entries(sizes), ([_k, count]) => count);
-  return max ? (max[0] as StrokeStyle) : null;
+  return max ? (max[0] as StrokeStyle) : StrokeStyle.Solid;
 }

 function getMostCommonShapeStyle(elements: ShapeElementModel[]): ShapeStyle {
-  const roughnesses = countBy(elements, (ele: ShapeElementModel) => {
-    return ele.shapeStyle;
-  });
+  const roughnesses = countBy(
+    elements,
+    (ele: ShapeElementModel) => ele.shapeStyle
+  );
  const max = maxBy(Object.entries(roughnesses), ([_k, count]) => count);
  return max ? (max[0] as ShapeStyle) : ShapeStyle.Scribbled;
 }
@@ -151,6 +138,32 @@ function getMostCommonShapeStyle(elements: ShapeElementModel[]): ShapeStyle {
 export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
  static override styles = [changeShapeButtonStyles];

+  private readonly _setShapeFillColor = (e: ColorEvent) => {
+    const fillColor = e.detail.value;
+    const filled = !isTransparent(fillColor);
+    const color = this._getTextColor(fillColor, filled);
+    this.elements.forEach(ele =>
+      this.crud.updateElement(ele.id, { filled, fillColor, color })
+    );
+  };
+
+  private readonly _setShapeStrokeColor = (e: ColorEvent) => {
+    const strokeColor = e.detail.value;
+    this.elements.forEach(ele =>
+      this.crud.updateElement(ele.id, { strokeColor })
+    );
+  };
+
+  private readonly _setShapeStyles = ({ type, value }: LineStyleEvent) => {
+    if (type === 'size') {
+      this._setShapeStrokeWidth(value);
+      return;
+    }
+    if (type === 'lineStyle') {
+      this._setShapeStrokeStyle(value);
+    }
+  };
+
  get service() {
    return this.edgeless.service;
  }
@@ -159,58 +172,24 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
    return this.edgeless.std.get(EdgelessCRUDIdentifier);
  }

-  #pickColor<K extends keyof Pick<ShapeProps, 'fillColor' | 'strokeColor'>>(
-    key: K
-  ) {
-    return (event: PickColorEvent) => {
-      if (event.type === 'pick') {
-        this.elements.forEach(ele => {
-          const props = packColor(key, { ...event.detail });
-          // If `filled` can be set separately, this logic can be removed
-          if (key === 'fillColor' && !ele.filled) {
-            Object.assign(props, { filled: true });
-          }
-          this.crud.updateElement(ele.id, props);
-        });
-        return;
-      }
-
-      this.elements.forEach(ele =>
-        ele[event.type === 'start' ? 'stash' : 'pop'](key)
-      );
-    };
-  }
-
  private _addText() {
    mountShapeTextEditor(this.elements[0], this.edgeless);
  }

-  private _getTextColor(fillColor: string) {
-    const colorScheme = this.edgeless.surface.renderer.getColorScheme();
+  private _getTextColor(fillColor: Color, isNotTransparent = false) {
    // When the shape is filled with black color, the text color should be white.
    // When the shape is transparent, the text color should be set according to the theme.
    // Otherwise, the text color should be black.
-    const textColor = isTransparent(fillColor)
-      ? GET_DEFAULT_LINE_COLOR(colorScheme)
-      : fillColor === SHAPE_FILL_COLOR_BLACK
-        ? SHAPE_TEXT_COLOR_PURE_WHITE
-        : SHAPE_TEXT_COLOR_PURE_BLACK;

-    return textColor;
-  }
+    if (isNotTransparent) {
+      if (isEqual(fillColor, DefaultTheme.black)) {
+        return DefaultTheme.white;
+      } else if (isEqual(fillColor, DefaultTheme.white)) {
+        return DefaultTheme.black;
+      }
+    }

-  private _setShapeFillColor(fillColor: string) {
-    const filled = !isTransparent(fillColor);
-    const color = this._getTextColor(fillColor);
-    this.elements.forEach(ele =>
-      this.crud.updateElement(ele.id, { filled, fillColor, color })
-    );
-  }
-
-  private _setShapeStrokeColor(strokeColor: string) {
-    this.elements.forEach(ele =>
-      this.crud.updateElement(ele.id, { strokeColor })
-    );
+    return DefaultTheme.black;
  }

  private _setShapeStrokeStyle(strokeStyle: StrokeStyle) {
@@ -234,16 +213,6 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
    });
  }

-  private _setShapeStyles({ type, value }: LineStyleEvent) {
-    if (type === 'size') {
-      this._setShapeStrokeWidth(value);
-      return;
-    }
-    if (type === 'lineStyle') {
-      this._setShapeStrokeStyle(value);
-    }
-  }
-
  private _showAddButtonOrTextMenu() {
    if (this.elements.length === 1 && !this.elements[0].text) {
      return 'button';
@@ -270,20 +239,38 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
    );
  }

+  pickColor<K extends keyof Pick<ShapeProps, 'fillColor' | 'strokeColor'>>(
+    field: K
+  ) {
+    return (e: PickColorEvent) => {
+      if (e.type === 'pick') {
+        const color = e.detail.value;
+        this.elements.forEach(ele => {
+          const props = packColor(field, color);
+          // If `filled` can be set separately, this logic can be removed
+          if (field === 'fillColor' && !ele.filled) {
+            Object.assign(props, { filled: true });
+          }
+          this.crud.updateElement(ele.id, props);
+        });
+        return;
+      }
+
+      this.elements.forEach(ele =>
+        ele[e.type === 'start' ? 'stash' : 'pop'](field)
+      );
+    };
+  }
+
  override render() {
    const colorScheme = this.edgeless.surface.renderer.getColorScheme();
    const elements = this.elements;
    const selectedShape = getMostCommonShape(elements);
-    const selectedFillColor =
-      getMostCommonFillColor(elements, colorScheme) ?? DEFAULT_SHAPE_FILL_COLOR;
-    const selectedStrokeColor =
-      getMostCommonStrokeColor(elements, colorScheme) ??
-      DEFAULT_SHAPE_STROKE_COLOR;
-    const selectedLineSize = getMostCommonLineSize(elements) ?? LineWidth.Four;
-    const selectedLineStyle =
-      getMostCommonLineStyle(elements) ?? StrokeStyle.Solid;
-    const selectedShapeStyle =
-      getMostCommonShapeStyle(elements) ?? ShapeStyle.Scribbled;
+    const selectedFillColor = getMostCommonFillColor(elements, colorScheme);
+    const selectedStrokeColor = getMostCommonStrokeColor(elements, colorScheme);
+    const selectedLineSize = getMostCommonLineSize(elements);
+    const selectedLineStyle = getMostCommonLineStyle(elements);
+    const selectedShapeStyle = getMostCommonShapeStyle(elements);

    return join(
      [
@@ -340,11 +327,12 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
              <edgeless-color-picker-button
                class="fill-color"
                .label=${'Fill color'}
-                .pick=${this.#pickColor('fillColor')}
+                .pick=${this.pickColor('fillColor')}
                .color=${selectedFillColor}
                .colors=${colors}
                .colorType=${type}
-                .palettes=${PALETTES}
+                .theme=${colorScheme}
+                .palettes=${DefaultTheme.Palettes}
              >
              </edgeless-color-picker-button>
            `;
@@ -367,8 +355,9 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
                role="listbox"
                aria-label="Fill colors"
                .value=${selectedFillColor}
-                .palettes=${PALETTES}
-                @select=${(e: ColorEvent) => this._setShapeFillColor(e.detail)}
+                .theme=${colorScheme}
+                .palettes=${DefaultTheme.Palettes}
+                @select=${this._setShapeFillColor}
              >
              </edgeless-color-panel>
            </editor-menu-button>
@@ -388,11 +377,12 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
              <edgeless-color-picker-button
                class="border-style"
                .label=${'Border style'}
-                .pick=${this.#pickColor('strokeColor')}
+                .pick=${this.pickColor('strokeColor')}
                .color=${selectedStrokeColor}
                .colors=${colors}
                .colorType=${type}
-                .palettes=${PALETTES}
+                .theme=${colorScheme}
+                .palettes=${DefaultTheme.Palettes}
                .hollowCircle=${true}
              >
                <div
@@ -408,8 +398,7 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
                  ${LineStylesPanel({
                    selectedLineSize: selectedLineSize,
                    selectedLineStyle: selectedLineStyle,
-                    onClick: (e: LineStyleEvent) => this._setShapeStyles(e),
-                    lineStyles: [StrokeStyle.Solid, StrokeStyle.Dash],
+                    onClick: this._setShapeStyles,
                  })}
                </div>
                <editor-toolbar-separator
@@ -435,14 +424,13 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
              `}
            >
              <stroke-style-panel
+                .theme=${colorScheme}
                .hollowCircle=${true}
                .strokeWidth=${selectedLineSize}
                .strokeStyle=${selectedLineStyle}
                .strokeColor=${selectedStrokeColor}
-                .setStrokeStyle=${(e: LineStyleEvent) =>
-                  this._setShapeStyles(e)}
-                .setStrokeColor=${(e: ColorEvent) =>
-                  this._setShapeStrokeColor(e.detail)}
+                .setStrokeStyle=${this._setShapeStyles}
+                .setStrokeColor=${this._setShapeStrokeColor}
              >
              </stroke-style-panel>
            </editor-menu-button>
@@ -14,11 +14,12 @@ import { renderToolbarSeparator } from '@blocksuite/affine-components/toolbar';
 import {
  type ColorScheme,
  ConnectorElementModel,
+  DefaultTheme,
  EdgelessTextBlockModel,
  FontFamily,
  FontStyle,
  FontWeight,
-  PALETTES,
+  resolveColor,
  ShapeElementModel,
  TextAlign,
  TextElementModel,
@@ -44,10 +45,7 @@ import {
  packColor,
  packColorsWithColorScheme,
 } from '../../edgeless/components/color-picker/utils.js';
-import {
-  type ColorEvent,
-  GET_DEFAULT_LINE_COLOR,
-} from '../../edgeless/components/panel/color-panel.js';
+import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js';
 import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';

 const FONT_SIZE_LIST = [
@@ -121,12 +119,12 @@ function getMostCommonColor(
  const colors = countBy(elements, (ele: BlockSuite.EdgelessTextModelType) => {
    const color =
      ele instanceof ConnectorElementModel ? ele.labelStyle.color : ele.color;
-    return typeof color === 'object'
-      ? (color[colorScheme] ?? color.normal ?? null)
-      : color;
+    return resolveColor(color, colorScheme);
  });
  const max = maxBy(Object.entries(colors), ([_k, count]) => count);
-  return max ? (max[0] as string) : GET_DEFAULT_LINE_COLOR(colorScheme);
+  return max
+    ? (max[0] as string)
+    : resolveColor(DefaultTheme.textColor, colorScheme);
 }

 function getMostCommonFontFamily(elements: BlockSuite.EdgelessTextModelType[]) {
@@ -229,7 +227,8 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) {
    });
  };

-  private readonly _setTextColor = ({ detail: color }: ColorEvent) => {
+  private readonly _setTextColor = (e: ColorEvent) => {
+    const color = e.detail.value;
    const props = { color };
    this.elements.forEach(element => {
      this.crud.updateElement(element.id, buildProps(element, props));
@@ -307,10 +306,11 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) {
    // no need to update the bound of edgeless text block, which updates itself using ResizeObserver
  };

-  pickColor = (event: PickColorEvent) => {
-    if (event.type === 'pick') {
+  pickColor = (e: PickColorEvent) => {
+    if (e.type === 'pick') {
+      const color = e.detail.value;
      this.elements.forEach(element => {
-        const props = packColor('color', { ...event.detail });
+        const props = packColor('color', color);
        this.crud.updateElement(element.id, buildProps(element, props));
        this._updateElementBound(element);
      });
@@ -319,7 +319,7 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) {

    const key = this.elementType === 'connector' ? 'labelStyle' : 'color';
    this.elements.forEach(ele => {
-      ele[event.type === 'start' ? 'stash' : 'pop'](key as 'color');
+      ele[e.type === 'start' ? 'stash' : 'pop'](key as 'color');
    });
  };

@@ -391,7 +391,8 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) {
                .color=${selectedColor}
                .colors=${colors}
                .colorType=${type}
-                .palettes=${PALETTES}
+                .theme=${colorScheme}
+                .palettes=${DefaultTheme.Palettes}
              >
              </edgeless-color-picker-button>
            `;
@@ -412,7 +413,8 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) {
            >
              <edgeless-color-panel
                .value=${selectedColor}
-                .palettes=${PALETTES}
+                .theme=${colorScheme}
+                .palettes=${DefaultTheme.Palettes}
                @select=${this._setTextColor}
              ></edgeless-color-panel>
            </editor-menu-button>
@@ -1,4 +1,8 @@
-import { ColorScheme, FrameBlockModel } from '@blocksuite/affine-model';
+import {
+  ColorScheme,
+  FrameBlockModel,
+  isTransparent,
+} from '@blocksuite/affine-model';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import {
  type BlockStdScope,
@@ -19,7 +23,6 @@ import { LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';

 import { parseStringToRgba } from '../../edgeless/components/color-picker/utils.js';
-import { isTransparent } from '../../edgeless/components/panel/color-panel.js';
 import type { EdgelessRootService } from '../../edgeless/index.js';
 import { frameTitleStyle, frameTitleStyleVars } from './styles.js';