chore(editor): update default colors of shape (#9633)

Closes: [PD-2176](https://linear.app/affine-design/issue/PD-2176/edgeless-shape默认颜色调整)

* updates shape's text color to the `#000000ff` and custom button should be selected by default in color picker
* updates shape background default color palette to `medium`

<img width="727" alt="Screenshot 2025-01-13 at 11 07 14" src="https://github.com/user-attachments/assets/81962741-0dbc-4990-8eec-db5e48624305" />
<img width="444" alt="Screenshot 2025-01-13 at 11 07 09" src="https://github.com/user-attachments/assets/2d119e33-635e-4bd4-826f-e3094c8a3fa2" />

<img width="764" alt="Screenshot 2025-01-13 at 11 08 14" src="https://github.com/user-attachments/assets/09f5c778-0e25-4972-8529-8d8323c27594" />

blocksuite/affine/model/src/themes/default.ts

@@ -1,5 +1,5 @@
-import type { Palette, Theme } from './types.js';
+import type { Palette, Theme } from './types';
-import { buildPalettes, getColorByKey, pureBlack, pureWhite } from './utils.js';
+import { buildPalettes, getColorByKey, pureBlack, pureWhite } from './utils';
 
 const Transparent = 'transparent';
 const White = getColorByKey('edgeless/palette/white');
@@ -78,7 +78,7 @@ const StrokeColorPalettes: Palette[] = [
   ...buildPalettes(StrokeColorMap),
 ] as const;
 
-const FillColorMap = { ...Light, Black, White } as const;
+const FillColorMap = { ...Medium, Black, White } as const;
 
 const FillColorPalettes: Palette[] = [...buildPalettes(FillColorMap)] as const;
 
@@ -89,9 +89,11 @@ export const DefaultTheme: Theme = {
   white: White,
   transparent: Transparent,
   textColor: Medium.Blue,
-  shapeTextColor: Black,
+  // Custom button should be selected by default,
+  // add transparent `ff` to distinguish `#000000`.
+  shapeTextColor: '#000000ff',
   shapeStrokeColor: Medium.Yellow,
-  shapeFillColor: Light.Yellow,
+  shapeFillColor: Medium.Yellow,
   connectorColor: Medium.Grey,
   noteBackgrounColor: NoteBackgroundColorMap.White,
   Palettes,

blocksuite/affine/model/src/themes/index.ts

@@ -1,9 +1,9 @@
-import { DefaultTheme } from './default.js';
+import { DefaultTheme } from './default';
-import type { Theme } from './types.js';
+import type { Theme } from './types';
 
-export * from './color.js';
+export * from './color';
-export { DefaultTheme } from './default.js';
+export { DefaultTheme } from './default';
-export * from './types.js';
+export * from './types';
 
 export const Themes: Record<string, Theme> = {
   default: DefaultTheme,

blocksuite/affine/model/src/themes/types.ts

@@ -1,6 +1,6 @@
 import { z } from 'zod';
 
-import { ColorSchema } from './color.js';
+import { ColorSchema } from './color';
 
 export const PaletteSchema = z.object({
   key: z.string(),

blocksuite/affine/model/src/themes/utils.ts

@@ -4,8 +4,8 @@ import {
   lightThemeV2,
 } from '@toeverything/theme/v2';
 
-import type { Color } from './color.js';
+import type { Color } from './color';
-import type { Palette } from './types.js';
+import type { Palette } from './types';
 
 // Converts a color map to color list.
 export function buildPalettes(

blocksuite/blocks/src/root-block/edgeless/components/panel/color-panel.ts

@@ -223,13 +223,14 @@ export class EdgelessColorPanel extends LitElement {
         palette => palette.key,
         palette => {
           const resolvedColor = resolveColor(palette.value, this.theme);
+          const activated = isEqual(resolvedColor, resolvedValue);
           return html`<edgeless-color-button
             class=${classMap({ large: true })}
             .label=${palette.key}
             .color=${palette.value}
             .theme=${this.theme}
             .hollowCircle=${this.hollowCircle}
-            ?active=${isEqual(resolvedColor, resolvedValue)}
+            ?active=${activated}
             @click=${() => {
               this.onSelect(palette);
               this.value = resolvedColor;

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

@@ -32,10 +32,7 @@
             "e6t9tKz8Sy": {
               "index": "a5",
               "seed": 338503204,
-              "color": {
+              "color": "#000000ff",
-                "dark": "#ffffff",
-                "light": "#000000"
-              },
               "fillColor": "#fffbd5",
               "filled": true,
               "fontFamily": "blocksuite:surface:Inter",
@@ -59,10 +56,7 @@
             "F8qB_zDC5Q": {
               "index": "a6",
               "seed": 1896265661,
-              "color": {
+              "color": "#000000ff",
-                "dark": "#ffffff",
-                "light": "#000000"
-              },
               "fillColor": "#fffbd5",
               "filled": true,
               "fontFamily": "blocksuite:surface:Inter",
@@ -86,10 +80,7 @@
             "mPR44JBpcd": {
               "index": "a7",
               "seed": 2073974140,
-              "color": {
+              "color": "#000000ff",
-                "dark": "#ffffff",
-                "light": "#000000"
-              },
               "fillColor": "#fffbd5",
               "filled": true,
               "fontFamily": "blocksuite:surface:Inter",
@@ -113,10 +104,7 @@
             "cmtluc3FWR": {
               "index": "a8",
               "seed": 1457248130,
-              "color": {
+              "color": "#000000ff",
-                "dark": "#ffffff",
-                "light": "#000000"
-              },
               "fillColor": "#fffbd5",
               "filled": true,
               "fontFamily": "blocksuite:surface:Inter",
@@ -140,10 +128,7 @@
             "knt_TKvACR": {
               "index": "a9",
               "seed": 1896265661,
-              "color": {
+              "color": "#000000ff",
-                "dark": "#ffffff",
-                "light": "#000000"
-              },
               "fillColor": "#fffbd5",
               "filled": true,
               "fontFamily": "blocksuite:surface:Inter",

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

@@ -324,7 +324,7 @@ export const ShapeSettings = () => {
       const handler = () => {
         editorSetting.set(`shape:${currentShape}`, { color: value });
       };
-      const isSelected = color === value;
+      const isSelected = isEqual(color, value);
       return (
         <MenuItem
           key={key}