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

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;

blocksuite/affine/block-root/src/edgeless/components/panel/stroke-style-panel.ts

@@ -1,8 +1,4 @@
-import {
+import { type ColorScheme, type StrokeStyle } from '@blocksuite/affine-model';
-  type ColorScheme,
-  DefaultTheme,
-  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)}
       >

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')}

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')}

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)
+      ? DefaultTheme.StrokeColorShortPalettes.find(
-          ?.value
+          palette => palette.key === key
-      : DefaultTheme.StrokeColorMap.Grey;
+        )?.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')}

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>

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>

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

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>

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'}
+                  .tooltip="${'Add text'}"
-                  .iconSize=${'20px'}
+                  .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>

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>

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;

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
  */

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.StrokeColorShortMap.Purple,
-    DefaultTheme.StrokeColorMap.Magenta,
+    DefaultTheme.StrokeColorShortMap.Magenta,
-    DefaultTheme.StrokeColorMap.Orange,
+    DefaultTheme.StrokeColorShortMap.Orange,
-    DefaultTheme.StrokeColorMap.Yellow,
+    DefaultTheme.StrokeColorShortMap.Yellow,
-    DefaultTheme.StrokeColorMap.Green,
+    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.StrokeColorShortMap.Yellow,
-    DefaultTheme.StrokeColorMap.Green,
+    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.StrokeColorShortMap.Purple,
-    DefaultTheme.StrokeColorMap.Magenta,
+    DefaultTheme.StrokeColorShortMap.Magenta,
-    DefaultTheme.StrokeColorMap.Orange,
+    DefaultTheme.StrokeColorShortMap.Orange,
-    DefaultTheme.StrokeColorMap.Yellow,
+    DefaultTheme.StrokeColorShortMap.Yellow,
-    DefaultTheme.StrokeColorMap.Green,
+    DefaultTheme.StrokeColorShortMap.Green,
-    DefaultTheme.StrokeColorMap.Blue,
+    DefaultTheme.StrokeColorShortMap.Blue,
   ];
 
   readonly root = {

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[] = [
+const StrokeColorShortPalettes: Palette[] = [
-  ...buildPalettes(StrokeColorMap),
+  ...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,
+  shapeTextColor: pureBlack,
-  // add transparent `ff` to distinguish `#000000`.
-  shapeTextColor: '#000000ff',
   shapeStrokeColor: Medium.Yellow,
   shapeFillColor: Medium.Yellow,
   connectorColor: Medium.Grey,
   noteBackgrounColor: NoteBackgroundColorMap.White,
   Palettes,
-  StrokeColorMap,
+  ShapeTextColorPalettes,
-  StrokeColorPalettes,
-  FillColorMap,
-  FillColorPalettes,
   NoteBackgroundColorMap,
   NoteBackgroundColorPalettes,
+  StrokeColorShortMap,
+  StrokeColorShortPalettes,
+  FillColorShortMap,
+  FillColorShortPalettes,
+  ShapeTextColorShortMap,
+  ShapeTextColorShortPalettes,
 } as const;

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),
+  ShapeTextColorPalettes: z.array(PaletteSchema),
-  // 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),
   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>;

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' },
     });

packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/connector.tsx

@@ -51,14 +51,14 @@ export const ConnectorSettings = () => {
   const { editorSetting } = framework.get(EditorSettingService);
   const settings = useLiveData(editorSetting.settings$);
   const {
-    palettes: strokeColorPalettes,
+    palettes: StrokeColorShortPalettes,
     getCurrentColor: getCurrentStrokeColor,
   } = usePalettes(
-    DefaultTheme.StrokeColorPalettes,
+    DefaultTheme.StrokeColorShortPalettes,
     DefaultTheme.connectorColor
   );
   const { palettes: textColorPalettes, getCurrentColor: getCurrentTextColor } =
-    usePalettes(DefaultTheme.StrokeColorPalettes, DefaultTheme.black);
+    usePalettes(DefaultTheme.StrokeColorShortPalettes, DefaultTheme.black);
 
   const connecterStyleItems = useMemo<RadioItem[]>(
     () => [
@@ -165,7 +165,7 @@ export const ConnectorSettings = () => {
 
   const colorItems = useMemo(() => {
     const { stroke } = settings.connector;
-    return strokeColorPalettes.map(({ key, value, resolvedValue }) => {
+    return StrokeColorShortPalettes.map(({ key, value, resolvedValue }) => {
       const handler = () => {
         editorSetting.set('connector', { stroke: value });
       };
@@ -181,7 +181,7 @@ export const ConnectorSettings = () => {
         </MenuItem>
       );
     });
-  }, [editorSetting, settings, strokeColorPalettes]);
+  }, [editorSetting, settings, StrokeColorShortPalettes]);
 
   const startEndPointItems = useMemo(() => {
     const { frontEndpointStyle } = settings.connector;

packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/shape.json

@@ -32,7 +32,7 @@
             "e6t9tKz8Sy": {
               "index": "a5",
               "seed": 338503204,
-              "color": "#000000ff",
+              "color": "#000000",
               "fillColor": "#fcd34d",
               "filled": true,
               "fontFamily": "blocksuite:surface:Inter",
@@ -56,7 +56,7 @@
             "F8qB_zDC5Q": {
               "index": "a6",
               "seed": 1896265661,
-              "color": "#000000ff",
+              "color": "#000000",
               "fillColor": "#fcd34d",
               "filled": true,
               "fontFamily": "blocksuite:surface:Inter",
@@ -80,7 +80,7 @@
             "mPR44JBpcd": {
               "index": "a7",
               "seed": 2073974140,
-              "color": "#000000ff",
+              "color": "#000000",
               "fillColor": "#fcd34d",
               "filled": true,
               "fontFamily": "blocksuite:surface:Inter",
@@ -104,7 +104,7 @@
             "cmtluc3FWR": {
               "index": "a8",
               "seed": 1457248130,
-              "color": "#000000ff",
+              "color": "#000000",
               "fillColor": "#fcd34d",
               "filled": true,
               "fontFamily": "blocksuite:surface:Inter",
@@ -128,7 +128,7 @@
             "knt_TKvACR": {
               "index": "a9",
               "seed": 1896265661,
-              "color": "#000000ff",
+              "color": "#000000",
               "fillColor": "#fcd34d",
               "filled": true,
               "fontFamily": "blocksuite:surface:Inter",

packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/frame.tsx

@@ -22,7 +22,7 @@ export const FrameSettings = () => {
   const { palettes, getCurrentColor } = usePalettes(
     [
       { key: 'Transparent', value: DefaultTheme.transparent },
-      ...DefaultTheme.FillColorPalettes,
+      ...DefaultTheme.FillColorShortPalettes,
     ],
     DefaultTheme.transparent
   );

packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/pen.tsx

@@ -21,7 +21,7 @@ export const PenSettings = () => {
   const { editorSetting } = framework.get(EditorSettingService);
   const settings = useLiveData(editorSetting.settings$);
   const { palettes, getCurrentColor } = usePalettes(
-    DefaultTheme.StrokeColorPalettes,
+    DefaultTheme.StrokeColorShortPalettes,
     DefaultTheme.black
   );
 

packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/shape.tsx

@@ -59,11 +59,19 @@ export const ShapeSettings = () => {
     palettes: strokeColorPalettes,
     getCurrentColor: getCurrentStrokeColor,
   } = usePalettes(
-    DefaultTheme.StrokeColorPalettes,
+    DefaultTheme.StrokeColorShortPalettes,
     DefaultTheme.shapeStrokeColor
   );
   const { palettes: fillColorPalettes, getCurrentColor: getCurrentFillColor } =
-    usePalettes(DefaultTheme.FillColorPalettes, DefaultTheme.shapeFillColor);
+    usePalettes(
+      DefaultTheme.FillColorShortPalettes,
+      DefaultTheme.shapeFillColor
+    );
+  const { palettes: textColorPalettes, getCurrentColor: getCurrentTextColor } =
+    usePalettes(
+      DefaultTheme.ShapeTextColorShortPalettes,
+      DefaultTheme.shapeTextColor
+    );
 
   const [currentShape, setCurrentShape] = useState<ShapeName>(ShapeType.Rect);
 
@@ -317,7 +325,7 @@ export const ShapeSettings = () => {
 
   const textColorItems = useMemo(() => {
     const { color } = settings[`shape:${currentShape}`];
-    return strokeColorPalettes.map(({ key, value, resolvedValue }) => {
+    return textColorPalettes.map(({ key, value, resolvedValue }) => {
       const handler = () => {
         editorSetting.set(`shape:${currentShape}`, { color: value });
       };
@@ -333,7 +341,7 @@ export const ShapeSettings = () => {
         </MenuItem>
       );
     });
-  }, [editorSetting, settings, currentShape, strokeColorPalettes]);
+  }, [editorSetting, settings, currentShape, textColorPalettes]);
 
   const getElements = useCallback(
     (doc: Store) => {
@@ -379,8 +387,8 @@ export const ShapeSettings = () => {
 
   const textColor = useMemo(() => {
     const color = settings[`shape:${currentShape}`].color;
-    return getCurrentStrokeColor(color);
+    return getCurrentTextColor(color);
-  }, [currentShape, getCurrentStrokeColor, settings]);
+  }, [currentShape, getCurrentTextColor, settings]);
 
   const height = currentDoc === 'flow' ? 456 : 180;
   return (

packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/text.tsx

@@ -32,7 +32,7 @@ export const TextSettings = () => {
   const { editorSetting } = framework.get(EditorSettingService);
   const settings = useLiveData(editorSetting.settings$);
   const { palettes, getCurrentColor } = usePalettes(
-    DefaultTheme.StrokeColorPalettes,
+    DefaultTheme.StrokeColorShortPalettes,
     DefaultTheme.textColor
   );
 

tests/affine-local/e2e/blocksuite/edgeless/shape.spec.ts

@@ -0,0 +1,113 @@
+import { test } from '@affine-test/kit/playwright';
+import {
+  clickEdgelessModeButton,
+  clickView,
+  dblclickView,
+  dragView,
+  locateEditorContainer,
+  setEdgelessTool,
+} from '@affine-test/kit/utils/editor';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import {
+  clickNewPageButton,
+  switchEdgelessTheme,
+  waitForEditorLoad,
+} from '@affine-test/kit/utils/page-logic';
+import { expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await openHomePage(page);
+  await waitForEditorLoad(page);
+  await clickNewPageButton(page);
+  await clickEdgelessModeButton(page);
+  const container = locateEditorContainer(page);
+  await container.click();
+});
+
+test('should add text to shape, default to pure black', async ({ page }) => {
+  await setEdgelessTool(page, 'shape');
+  await dragView(page, [100, 300], [200, 400]);
+  await dblclickView(page, [150, 350]);
+
+  await expect(
+    page.locator('edgeless-shape-text-editor rich-text')
+  ).toBeVisible();
+  await page.keyboard.type('text');
+  await page.keyboard.press('Escape');
+
+  const toolbar = page.locator(
+    'edgeless-element-toolbar-widget editor-toolbar'
+  );
+  const textColorContainer = toolbar.locator(
+    'edgeless-color-picker-button.text-color'
+  );
+  const textColorBtn = textColorContainer.getByLabel('Text color');
+  const blackBtn = textColorContainer
+    .locator('edgeless-color-button[active]')
+    .getByLabel('Black');
+
+  await expect(textColorContainer).toBeVisible();
+
+  await textColorBtn.click();
+  await expect(blackBtn).toHaveCount(1);
+
+  const svgFillColor = await blackBtn.locator('svg').getAttribute('fill');
+  expect(svgFillColor).toBe('#000000');
+
+  await switchEdgelessTheme(page, 'dark');
+
+  await clickView(page, [150, 350]);
+  await textColorBtn.click();
+
+  await expect(blackBtn).toHaveCount(1);
+
+  const svgFillColor2 = await blackBtn.locator('svg').getAttribute('fill');
+  expect(svgFillColor2).toBe('#000000');
+});
+
+test('should add text to shape with pure white', async ({ page }) => {
+  await setEdgelessTool(page, 'shape');
+  await dragView(page, [100, 300], [200, 400]);
+  await dblclickView(page, [150, 350]);
+
+  await expect(
+    page.locator('edgeless-shape-text-editor rich-text')
+  ).toBeVisible();
+  await page.keyboard.type('text');
+  await page.keyboard.press('Escape');
+
+  const toolbar = page.locator(
+    'edgeless-element-toolbar-widget editor-toolbar'
+  );
+  const textColorContainer = toolbar.locator(
+    'edgeless-color-picker-button.text-color'
+  );
+  const textColorBtn = textColorContainer.getByLabel('Text color');
+
+  let currentColor = await textColorBtn
+    .locator('svg rect')
+    .getAttribute('fill');
+  expect(currentColor).toBe('#000000');
+
+  await textColorBtn.click();
+
+  const blackBtn = textColorContainer
+    .locator('edgeless-color-button[active]')
+    .getByLabel('Black');
+  await expect(blackBtn).toHaveCount(1);
+
+  const whiteBtn = textColorContainer
+    .locator('edgeless-color-button')
+    .getByLabel('White');
+  await whiteBtn.click();
+
+  currentColor = await textColorBtn.locator('svg rect').getAttribute('fill');
+  expect(currentColor).toBe('#ffffff');
+
+  await switchEdgelessTheme(page, 'dark');
+
+  await clickView(page, [150, 350]);
+
+  currentColor = await textColorBtn.locator('svg rect').getAttribute('fill');
+  expect(currentColor).toBe('#ffffff');
+});

tests/kit/src/utils/page-logic.ts

@@ -1,6 +1,8 @@
 import type { Locator, Page } from '@playwright/test';
 import { expect } from '@playwright/test';
 
+import { openEditorInfoPanel } from './setting';
+
 export function getAllPage(page: Page) {
   const newPageButton = page.getByTestId('new-page-button-trigger');
   const newPageDropdown = newPageButton.locator('svg');
@@ -236,3 +238,13 @@ export const addDatabaseRow = async (page: Page, databaseTitle: string) => {
   });
   await db.locator('.data-view-table-group-add-row-button').click();
 };
+
+export const switchEdgelessTheme = async (
+  page: Page,
+  type: 'system' | 'light' | 'dark'
+) => {
+  await openEditorInfoPanel(page);
+  const panel = page.getByTestId('info-modal');
+  await panel.locator(`button[value="${type}"]`).click();
+  await page.keyboard.press('Escape');
+};

tests/kit/src/utils/setting.ts

@@ -29,6 +29,10 @@ export async function openAboutPanel(page: Page) {
   await page.getByTestId('about-panel-trigger').click();
 }
 
+export async function openEditorInfoPanel(page: Page) {
+  await page.getByTestId('header-info-button').click();
+}
+
 export async function openExperimentalFeaturesPanel(page: Page) {
   await page.getByTestId('experimental-features-trigger').click();
 }