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

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();
 }