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/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.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 = {

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;

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>;