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-13 21:05:19 +00:00 · 2025-02-27 06:05:42 +00:00
parent 18dfad28d7
commit caa4dfedfc
26 changed files with 277 additions and 107 deletions
--- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/connector.tsx
+++ b/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;
--- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/docs/shape.json
+++ b/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",
--- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/frame.tsx
+++ b/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
  );
--- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/pen.tsx
+++ b/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
  );

--- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/shape.tsx
+++ b/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);
-  }, [currentShape, getCurrentStrokeColor, settings]);
+    return getCurrentTextColor(color);
+  }, [currentShape, getCurrentTextColor, settings]);

  const height = currentDoc === 'flow' ? 456 : 180;
  return (
--- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/text.tsx
+++ b/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
  );