fix(editor): adjust black and white in shape text color palettes to pure black and pure white (#10450)

Closes: [BS-2697](https://linear.app/affine-design/issue/BS-2697/检查shape-text-color黑白不映射的pr合并状态) https://github.com/user-attachments/assets/732612e9-5e43-453f-aef2-5f32f5a08614
2026-02-14 13:25:12 +00:00 · 2025-02-27 06:05:42 +00:00
parent 18dfad28d7
commit caa4dfedfc
26 changed files with 277 additions and 107 deletions
--- a/blocksuite/affine/block-root/src/edgeless/components/panel/color-panel.ts
+++ b/blocksuite/affine/block-root/src/edgeless/components/panel/color-panel.ts
@@ -1,5 +1,9 @@
 import type { Color, ColorScheme, Palette } from '@blocksuite/affine-model';
-import { isTransparent, resolveColor } from '@blocksuite/affine-model';
+import {
+  DefaultTheme,
+  isTransparent,
+  resolveColor,
+} from '@blocksuite/affine-model';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { css, html, LitElement, nothing, svg, type TemplateResult } from 'lit';
@@ -253,7 +257,7 @@ export class EdgelessColorPanel extends LitElement {
  accessor openColorPicker!: (e: MouseEvent) => void;

  @property({ type: Array })
-  accessor palettes: readonly Palette[] = [];
+  accessor palettes: readonly Palette[] = DefaultTheme.Palettes;

  @property({ attribute: false })
  accessor theme!: ColorScheme;
--- a/blocksuite/affine/block-root/src/edgeless/components/panel/stroke-style-panel.ts
+++ b/blocksuite/affine/block-root/src/edgeless/components/panel/stroke-style-panel.ts
@@ -1,8 +1,4 @@
-import {
-  type ColorScheme,
-  DefaultTheme,
-  type StrokeStyle,
-} from '@blocksuite/affine-model';
+import { type ColorScheme, type StrokeStyle } from '@blocksuite/affine-model';
 import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { WithDisposable } from '@blocksuite/global/utils';
 import { css, html, LitElement } from 'lit';
@@ -44,7 +40,6 @@ export class StrokeStylePanel extends WithDisposable(LitElement) {
        aria-label="Border colors"
        .value=${this.strokeColor}
        .theme=${this.theme}
-        .palettes=${DefaultTheme.Palettes}
        .hollowCircle=${this.hollowCircle}
        @select=${(e: ColorEvent) => this.setStrokeColor(e)}
      >
--- a/blocksuite/affine/block-root/src/edgeless/components/toolbar/brush/brush-menu.ts
+++ b/blocksuite/affine/block-root/src/edgeless/components/toolbar/brush/brush-menu.ts
@@ -65,7 +65,7 @@ export class EdgelessBrushMenu extends EdgelessToolbarToolMixin(
            class="one-way"
            .value=${this._props$.value.color}
            .theme=${this._theme$.value}
-            .palettes=${DefaultTheme.StrokeColorPalettes}
+            .palettes=${DefaultTheme.StrokeColorShortPalettes}
            .hasTransparent=${!this.edgeless.doc
              .get(FeatureFlagService)
              .getFlag('enable_color_picker')}
--- a/blocksuite/affine/block-root/src/edgeless/components/toolbar/connector/connector-menu.ts
+++ b/blocksuite/affine/block-root/src/edgeless/components/toolbar/connector/connector-menu.ts
@@ -133,7 +133,7 @@ export class EdgelessConnectorMenu extends EdgelessToolbarToolMixin(
            class="one-way"
            .value=${stroke}
            .theme=${this._theme$.value}
-            .palettes=${DefaultTheme.StrokeColorPalettes}
+            .palettes=${DefaultTheme.StrokeColorShortPalettes}
            .hasTransparent=${!this.edgeless.doc
              .get(FeatureFlagService)
              .getFlag('enable_color_picker')}
--- a/blocksuite/affine/block-root/src/edgeless/components/toolbar/shape/shape-menu.ts
+++ b/blocksuite/affine/block-root/src/edgeless/components/toolbar/shape/shape-menu.ts
@@ -75,9 +75,10 @@ export class EdgelessShapeMenu extends SignalWatcher(
    const filled = !isTransparent(value);
    const fillColor = value;
    const strokeColor = filled
-      ? DefaultTheme.StrokeColorPalettes.find(palette => palette.key === key)
-          ?.value
-      : DefaultTheme.StrokeColorMap.Grey;
+      ? DefaultTheme.StrokeColorShortPalettes.find(
+          palette => palette.key === key
+        )?.value
+      : DefaultTheme.StrokeColorShortMap.Grey;

    const { shapeName } = this._props$.value;
    this.edgeless.std
@@ -173,7 +174,7 @@ export class EdgelessShapeMenu extends SignalWatcher(
            class="one-way"
            .value=${fillColor}
            .theme=${this._theme$.value}
-            .palettes=${DefaultTheme.FillColorPalettes}
+            .palettes=${DefaultTheme.FillColorShortPalettes}
            .hasTransparent=${!this.edgeless.doc
              .get(FeatureFlagService)
              .getFlag('enable_color_picker')}
--- a/blocksuite/affine/block-root/src/edgeless/components/toolbar/text/text-menu.ts
+++ b/blocksuite/affine/block-root/src/edgeless/components/toolbar/text/text-menu.ts
@@ -33,7 +33,7 @@ export class EdgelessTextMenu extends EdgelessToolbarToolMixin(LitElement) {
            class="one-way"
            .value=${this.color}
            .theme=${this._theme$.value}
-            .palettes=${DefaultTheme.StrokeColorPalettes}
+            .palettes=${DefaultTheme.StrokeColorShortPalettes}
            @select=${(e: ColorEvent) => this.onChange({ color: e.detail })}
          ></edgeless-color-panel>
        </div>
--- a/blocksuite/affine/block-root/src/widgets/element-toolbar/change-brush-button.ts
+++ b/blocksuite/affine/block-root/src/widgets/element-toolbar/change-brush-button.ts
@@ -134,13 +134,12 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) {
          return html`
            <edgeless-color-picker-button
              class="color"
-              .label=${'Color'}
+              .label="${'Color'}"
              .pick=${this.pickColor}
              .color=${selectedColor}
              .colors=${colors}
              .colorType=${type}
              .theme=${colorScheme}
-              .palettes=${DefaultTheme.Palettes}
            >
            </edgeless-color-picker-button>
          `;
@@ -159,7 +158,6 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) {
            <edgeless-color-panel
              .value=${selectedColor}
              .theme=${colorScheme}
-              .palettes=${DefaultTheme.Palettes}
              @select=${this._setBrushColor}
            >
            </edgeless-color-panel>
--- a/blocksuite/affine/block-root/src/widgets/element-toolbar/change-connector-button.ts
+++ b/blocksuite/affine/block-root/src/widgets/element-toolbar/change-connector-button.ts
@@ -373,13 +373,12 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
            return html`
              <edgeless-color-picker-button
                class="stroke-color"
-                .label=${'Stroke style'}
+                .label="${'Stroke style'}"
                .pick=${this.pickColor}
                .color=${selectedColor}
                .colors=${colors}
                .colorType=${type}
                .theme=${colorScheme}
-                .palettes=${DefaultTheme.Palettes}
                .hollowCircle=${true}
              >
                <div
--- a/blocksuite/affine/block-root/src/widgets/element-toolbar/change-frame-button.ts
+++ b/blocksuite/affine/block-root/src/widgets/element-toolbar/change-frame-button.ts
@@ -13,7 +13,6 @@ import { renderToolbarSeparator } from '@blocksuite/affine-components/toolbar';
 import {
  type ColorScheme,
  DEFAULT_NOTE_HEIGHT,
-  DefaultTheme,
  type FrameBlockModel,
  NoteBlockModel,
  NoteDisplayMode,
@@ -201,13 +200,12 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
            return html`
              <edgeless-color-picker-button
                class="background"
-                .label=${'Background'}
+                .label="${'Background'}"
                .pick=${this.pickColor}
                .color=${background}
                .colors=${colors}
                .colorType=${type}
                .theme=${colorScheme}
-                .palettes=${DefaultTheme.Palettes}
              >
              </edgeless-color-picker-button>
            `;
@@ -229,7 +227,6 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
              <edgeless-color-panel
                .value=${background}
                .theme=${colorScheme}
-                .palettes=${DefaultTheme.Palettes}
                @select=${this._setFrameBackground}
              >
              </edgeless-color-panel>
--- a/blocksuite/affine/block-root/src/widgets/element-toolbar/change-shape-button.ts
+++ b/blocksuite/affine/block-root/src/widgets/element-toolbar/change-shape-button.ts
@@ -338,7 +338,6 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
                .colors=${colors}
                .colorType=${type}
                .theme=${colorScheme}
-                .palettes=${DefaultTheme.Palettes}
              >
              </edgeless-color-picker-button>
            `;
@@ -362,7 +361,6 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
                aria-label="Fill colors"
                .value=${selectedFillColor}
                .theme=${colorScheme}
-                .palettes=${DefaultTheme.Palettes}
                @select=${this._setShapeFillColor}
              >
              </edgeless-color-panel>
@@ -390,7 +388,6 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
                .colors=${colors}
                .colorType=${type}
                .theme=${colorScheme}
-                .palettes=${DefaultTheme.Palettes}
                .hollowCircle=${true}
              >
                <div
@@ -453,8 +450,8 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
              () => html`
                <editor-icon-button
                  aria-label="Add text"
-                  .tooltip=${'Add text'}
-                  .iconSize=${'20px'}
+                  .tooltip="${'Add text'}"
+                  .iconSize="${'20px'}"
                  @click=${this._addText}
                >
                  ${AddTextIcon()}
@@ -465,7 +462,7 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
              'menu',
              () => html`
                <edgeless-change-text-menu
-                  .elementType=${'shape'}
+                  .elementType="${'shape'}"
                  .elements=${elements}
                  .edgeless=${this.edgeless}
                ></edgeless-change-text-menu>
--- a/blocksuite/affine/block-root/src/widgets/element-toolbar/change-text-menu.ts
+++ b/blocksuite/affine/block-root/src/widgets/element-toolbar/change-text-menu.ts
@@ -344,6 +344,10 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) {
      matchFontFaces.length === 1 &&
      matchFontFaces[0].style === selectedFontStyle &&
      matchFontFaces[0].weight === selectedFontWeight;
+    const palettes =
+      this.elementType === 'shape'
+        ? DefaultTheme.ShapeTextColorPalettes
+        : DefaultTheme.Palettes;

    return join(
      [
@@ -389,14 +393,14 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) {
            return html`
              <edgeless-color-picker-button
                class="text-color"
-                .label=${'Text color'}
+                .label="${'Text color'}"
                .pick=${this.pickColor}
                .isText=${true}
                .color=${selectedColor}
                .colors=${colors}
                .colorType=${type}
                .theme=${colorScheme}
-                .palettes=${DefaultTheme.Palettes}
+                .palettes=${palettes}
              >
              </edgeless-color-picker-button>
            `;
@@ -418,7 +422,7 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) {
              <edgeless-color-panel
                .value=${selectedColor}
                .theme=${colorScheme}
-                .palettes=${DefaultTheme.Palettes}
+                .palettes=${palettes}
                @select=${this._setTextColor}
              ></edgeless-color-panel>
            </editor-menu-button>
--- a/blocksuite/affine/components/src/color-picker/button.ts
+++ b/blocksuite/affine/components/src/color-picker/button.ts
@@ -1,5 +1,5 @@
 import type { ColorScheme, Palette } from '@blocksuite/affine-model';
-import { resolveColor } from '@blocksuite/affine-model';
+import { DefaultTheme, resolveColor } from '@blocksuite/affine-model';
 import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { WithDisposable } from '@blocksuite/global/utils';
 import { html, LitElement } from 'lit';
@@ -188,7 +188,7 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) {
  accessor menuButton!: EditorMenuButton;

  @property({ attribute: false })
-  accessor palettes: Palette[] = [];
+  accessor palettes: Palette[] = DefaultTheme.Palettes;

  @property({ attribute: false })
  accessor pick!: (event: PickColorEvent) => void;
--- a/blocksuite/affine/model/src/consts/line.ts
+++ b/blocksuite/affine/model/src/consts/line.ts
@@ -23,7 +23,7 @@ export const LINE_WIDTHS = [
 ];

 /**
- * Use `DefaultTheme.StrokeColorMap` instead.
+ * Use `DefaultTheme.StrokeColorShortMap` instead.
 *
 * @deprecated
 */
@@ -44,7 +44,7 @@ export enum LineColor {
 export const LineColorMap = createEnumMap(LineColor);

 /**
- * Use `DefaultTheme.StrokeColorPalettes` instead.
+ * Use `DefaultTheme.StrokeColorShortPalettes` instead.
 *
 * @deprecated
 */
--- a/blocksuite/affine/model/src/elements/mindmap/style.ts
+++ b/blocksuite/affine/model/src/elements/mindmap/style.ts
@@ -77,11 +77,11 @@ export abstract class MindmapStyleGetter {

 export class StyleOne extends MindmapStyleGetter {
  private readonly _colorOrders = [
-    DefaultTheme.StrokeColorMap.Purple,
-    DefaultTheme.StrokeColorMap.Magenta,
-    DefaultTheme.StrokeColorMap.Orange,
-    DefaultTheme.StrokeColorMap.Yellow,
-    DefaultTheme.StrokeColorMap.Green,
+    DefaultTheme.StrokeColorShortMap.Purple,
+    DefaultTheme.StrokeColorShortMap.Magenta,
+    DefaultTheme.StrokeColorShortMap.Orange,
+    DefaultTheme.StrokeColorShortMap.Yellow,
+    DefaultTheme.StrokeColorShortMap.Green,
    '#7ae2d5',
  ];

@@ -188,9 +188,9 @@ export const styleOne = new StyleOne();

 export class StyleTwo extends MindmapStyleGetter {
  private readonly _colorOrders = [
-    DefaultTheme.StrokeColorMap.Blue,
+    DefaultTheme.StrokeColorShortMap.Blue,
    '#7ae2d5',
-    DefaultTheme.StrokeColorMap.Yellow,
+    DefaultTheme.StrokeColorShortMap.Yellow,
  ];

  readonly root = {
@@ -207,7 +207,7 @@ export class StyleTwo extends MindmapStyleGetter {
    color: DefaultTheme.pureBlack,

    filled: true,
-    fillColor: DefaultTheme.StrokeColorMap.Yellow,
+    fillColor: DefaultTheme.StrokeColorShortMap.Yellow,

    padding: [11, 22] as [number, number],

@@ -298,8 +298,8 @@ export const styleTwo = new StyleTwo();

 export class StyleThree extends MindmapStyleGetter {
  private readonly _strokeColor = [
-    DefaultTheme.StrokeColorMap.Yellow,
-    DefaultTheme.StrokeColorMap.Green,
+    DefaultTheme.StrokeColorShortMap.Yellow,
+    DefaultTheme.StrokeColorShortMap.Green,
    '#5cc7ba',
  ];

@@ -317,7 +317,7 @@ export class StyleThree extends MindmapStyleGetter {
    color: DefaultTheme.pureBlack,

    filled: true,
-    fillColor: DefaultTheme.StrokeColorMap.Yellow,
+    fillColor: DefaultTheme.StrokeColorShortMap.Yellow,

    padding: [10, 22] as [number, number],

@@ -407,12 +407,12 @@ export const styleThree = new StyleThree();

 export class StyleFour extends MindmapStyleGetter {
  private readonly _colors = [
-    DefaultTheme.StrokeColorMap.Purple,
-    DefaultTheme.StrokeColorMap.Magenta,
-    DefaultTheme.StrokeColorMap.Orange,
-    DefaultTheme.StrokeColorMap.Yellow,
-    DefaultTheme.StrokeColorMap.Green,
-    DefaultTheme.StrokeColorMap.Blue,
+    DefaultTheme.StrokeColorShortMap.Purple,
+    DefaultTheme.StrokeColorShortMap.Magenta,
+    DefaultTheme.StrokeColorShortMap.Orange,
+    DefaultTheme.StrokeColorShortMap.Yellow,
+    DefaultTheme.StrokeColorShortMap.Green,
+    DefaultTheme.StrokeColorShortMap.Blue,
  ];

  readonly root = {
--- a/blocksuite/affine/model/src/themes/default.ts
+++ b/blocksuite/affine/model/src/themes/default.ts
@@ -72,15 +72,44 @@ const NoteBackgroundColorPalettes: Palette[] = [
  ...buildPalettes(NoteBackgroundColorMap),
 ] as const;

-const StrokeColorMap = { ...Medium, Black, White } as const;
+const StrokeColorShortMap = { ...Medium, Black, White } as const;

-const StrokeColorPalettes: Palette[] = [
-  ...buildPalettes(StrokeColorMap),
+const StrokeColorShortPalettes: Palette[] = [
+  ...buildPalettes(StrokeColorShortMap),
 ] as const;

-const FillColorMap = { ...Medium, Black, White } as const;
+const FillColorShortMap = { ...Medium, Black, White } as const;

-const FillColorPalettes: Palette[] = [...buildPalettes(FillColorMap)] as const;
+const FillColorShortPalettes: Palette[] = [
+  ...buildPalettes(FillColorShortMap),
+] as const;
+
+const ShapeTextColorShortMap = {
+  ...Medium,
+  Black: pureBlack,
+  White: pureWhite,
+} as const;
+
+const ShapeTextColorShortPalettes: Palette[] = [
+  ...buildPalettes({ ...ShapeTextColorShortMap }),
+] as const;
+
+const ShapeTextColorPalettes: Palette[] = [
+  // Light
+  ...buildPalettes(Light, 'Light'),
+
+  { key: 'Transparent', value: Transparent },
+
+  // Medium
+  ...buildPalettes(Medium, 'Medium'),
+
+  { key: 'White', value: pureWhite },
+
+  // Heavy
+  ...buildPalettes(Heavy, 'Heavy'),
+
+  { key: 'Black', value: pureBlack },
+] as const;

 export const DefaultTheme: Theme = {
  pureBlack,
@@ -89,18 +118,19 @@ export const DefaultTheme: Theme = {
  white: White,
  transparent: Transparent,
  textColor: Medium.Blue,
-  // Custom button should be selected by default,
-  // add transparent `ff` to distinguish `#000000`.
-  shapeTextColor: '#000000ff',
+  shapeTextColor: pureBlack,
  shapeStrokeColor: Medium.Yellow,
  shapeFillColor: Medium.Yellow,
  connectorColor: Medium.Grey,
  noteBackgrounColor: NoteBackgroundColorMap.White,
  Palettes,
-  StrokeColorMap,
-  StrokeColorPalettes,
-  FillColorMap,
-  FillColorPalettes,
+  ShapeTextColorPalettes,
  NoteBackgroundColorMap,
  NoteBackgroundColorPalettes,
+  StrokeColorShortMap,
+  StrokeColorShortPalettes,
+  FillColorShortMap,
+  FillColorShortPalettes,
+  ShapeTextColorShortMap,
+  ShapeTextColorShortPalettes,
 } as const;
--- a/blocksuite/affine/model/src/themes/types.ts
+++ b/blocksuite/affine/model/src/themes/types.ts
@@ -21,16 +21,20 @@ export const ThemeSchema = z.object({
  shapeFillColor: ColorSchema,
  connectorColor: ColorSchema,
  noteBackgrounColor: ColorSchema,
-  // Universal color palette
+
+  // Universal color palettes
  Palettes: z.array(PaletteSchema),
-  StrokeColorMap: z.record(z.string(), ColorSchema),
-  // Usually used in global toolbar and editor preview
-  StrokeColorPalettes: z.array(PaletteSchema),
-  FillColorMap: z.record(z.string(), ColorSchema),
-  // Usually used in global toolbar and editor preview
-  FillColorPalettes: z.array(PaletteSchema),
+  ShapeTextColorPalettes: z.array(PaletteSchema),
  NoteBackgroundColorMap: z.record(z.string(), ColorSchema),
  NoteBackgroundColorPalettes: z.array(PaletteSchema),
+
+  // Usually used in global toolbar and editor preview
+  StrokeColorShortMap: z.record(z.string(), ColorSchema),
+  StrokeColorShortPalettes: z.array(PaletteSchema),
+  FillColorShortMap: z.record(z.string(), ColorSchema),
+  FillColorShortPalettes: z.array(PaletteSchema),
+  ShapeTextColorShortMap: z.record(z.string(), ColorSchema),
+  ShapeTextColorShortPalettes: z.array(PaletteSchema),
 });

 export type Theme = z.infer<typeof ThemeSchema>;
--- a/blocksuite/integration-test/src/tests/edgeless/last-props.spec.ts
+++ b/blocksuite/integration-test/src/tests/edgeless/last-props.spec.ts
@@ -48,12 +48,12 @@ describe('apply last props', () => {
    const rectShape = service.crud.getElementById(rectId) as ShapeElementModel;
    expect(rectShape.fillColor).toBe(DefaultTheme.shapeFillColor);
    service.crud.updateElement(rectId, {
-      fillColor: DefaultTheme.FillColorMap.Orange,
+      fillColor: DefaultTheme.FillColorShortMap.Orange,
    });
    expect(
      std.get(EditPropsStore).lastProps$.value[`shape:${ShapeType.Rect}`]
        .fillColor
-    ).toBe(DefaultTheme.FillColorMap.Orange);
+    ).toBe(DefaultTheme.FillColorShortMap.Orange);

    // diamond shape
    const diamondId = service.crud.addElement('shape', {
@@ -63,14 +63,14 @@ describe('apply last props', () => {
    const diamondShape = service.crud.getElementById(
      diamondId
    ) as ShapeElementModel;
-    expect(diamondShape.fillColor).toBe(DefaultTheme.FillColorMap.Yellow);
+    expect(diamondShape.fillColor).toBe(DefaultTheme.FillColorShortMap.Yellow);
    service.crud.updateElement(diamondId, {
-      fillColor: DefaultTheme.FillColorMap.Blue,
+      fillColor: DefaultTheme.FillColorShortMap.Blue,
    });
    expect(
      std.get(EditPropsStore).lastProps$.value[`shape:${ShapeType.Diamond}`]
        .fillColor
-    ).toBe(DefaultTheme.FillColorMap.Blue);
+    ).toBe(DefaultTheme.FillColorShortMap.Blue);

    // rounded rect shape
    const roundedRectId = service.crud.addElement('shape', {
@@ -81,13 +81,15 @@ describe('apply last props', () => {
    const roundedRectShape = service.crud.getElementById(
      roundedRectId
    ) as ShapeElementModel;
-    expect(roundedRectShape.fillColor).toBe(DefaultTheme.FillColorMap.Yellow);
+    expect(roundedRectShape.fillColor).toBe(
+      DefaultTheme.FillColorShortMap.Yellow
+    );
    service.crud.updateElement(roundedRectId, {
-      fillColor: DefaultTheme.FillColorMap.Green,
+      fillColor: DefaultTheme.FillColorShortMap.Green,
    });
    expect(
      std.get(EditPropsStore).lastProps$.value['shape:roundedRect'].fillColor
-    ).toBe(DefaultTheme.FillColorMap.Green);
+    ).toBe(DefaultTheme.FillColorShortMap.Green);

    // apply last props
    const rectId2 = service.crud.addElement('shape', {
@@ -97,7 +99,7 @@ describe('apply last props', () => {
    const rectShape2 = service.crud.getElementById(
      rectId2
    ) as ShapeElementModel;
-    expect(rectShape2.fillColor).toBe(DefaultTheme.FillColorMap.Orange);
+    expect(rectShape2.fillColor).toBe(DefaultTheme.FillColorShortMap.Orange);

    const diamondId2 = service.crud.addElement('shape', {
      shapeType: ShapeType.Diamond,
@@ -106,7 +108,7 @@ describe('apply last props', () => {
    const diamondShape2 = service.crud.getElementById(
      diamondId2
    ) as ShapeElementModel;
-    expect(diamondShape2.fillColor).toBe(DefaultTheme.FillColorMap.Blue);
+    expect(diamondShape2.fillColor).toBe(DefaultTheme.FillColorShortMap.Blue);

    const roundedRectId2 = service.crud.addElement('shape', {
      shapeType: ShapeType.Rect,
@@ -116,7 +118,9 @@ describe('apply last props', () => {
    const roundedRectShape2 = service.crud.getElementById(
      roundedRectId2
    ) as ShapeElementModel;
-    expect(roundedRectShape2.fillColor).toBe(DefaultTheme.FillColorMap.Green);
+    expect(roundedRectShape2.fillColor).toBe(
+      DefaultTheme.FillColorShortMap.Green
+    );
  });

  test('connector', () => {
@@ -204,14 +208,14 @@ describe('apply last props', () => {
    expect(text.color).toBe(DefaultTheme.textColor);
    expect(text.fontFamily).toBe(FontFamily.Inter);
    service.crud.updateElement(id, {
-      color: DefaultTheme.StrokeColorMap.Green,
+      color: DefaultTheme.StrokeColorShortMap.Green,
      fontFamily: FontFamily.OrelegaOne,
    });

    const id2 = service.crud.addBlock('affine:edgeless-text', {}, surface!.id);
    assertExists(id2);
    const text2 = service.crud.getElementById(id2) as EdgelessTextBlockModel;
-    expect(text2.color).toBe(DefaultTheme.StrokeColorMap.Green);
+    expect(text2.color).toBe(DefaultTheme.StrokeColorShortMap.Green);
    expect(text2.fontFamily).toBe(FontFamily.OrelegaOne);
  });

@@ -246,13 +250,13 @@ describe('apply last props', () => {
    const note = service.crud.getElementById(id) as FrameBlockModel;
    expect(note.background).toBe('transparent');
    service.crud.updateElement(id, {
-      background: DefaultTheme.StrokeColorMap.Purple,
+      background: DefaultTheme.StrokeColorShortMap.Purple,
    });

    const id2 = service.crud.addBlock('affine:frame', {}, surface!.id);
    assertExists(id2);
    const frame2 = service.crud.getElementById(id2) as FrameBlockModel;
-    expect(frame2.background).toBe(DefaultTheme.StrokeColorMap.Purple);
+    expect(frame2.background).toBe(DefaultTheme.StrokeColorShortMap.Purple);
    service.crud.updateElement(id2, {
      background: { normal: '#def4e740' },
    });