From a4b8f5c2671db02a6b06d0727079b8c4ad63fcbf Mon Sep 17 00:00:00 2001 From: Fangdun Tsai Date: Fri, 10 Jan 2025 18:33:40 +0800 Subject: [PATCH] chore(editor): update default colors of shape --- blocksuite/affine/model/src/themes/default.ts | 12 +++++---- blocksuite/affine/model/src/themes/index.ts | 10 ++++---- blocksuite/affine/model/src/themes/types.ts | 2 +- blocksuite/affine/model/src/themes/utils.ts | 4 +-- .../edgeless/components/panel/color-panel.ts | 3 ++- .../editor/edgeless/docs/shape.json | 25 ++++--------------- .../general-setting/editor/edgeless/shape.tsx | 2 +- 7 files changed, 23 insertions(+), 35 deletions(-) diff --git a/blocksuite/affine/model/src/themes/default.ts b/blocksuite/affine/model/src/themes/default.ts index 02354fae0a1fb..61302879f5d3b 100644 --- a/blocksuite/affine/model/src/themes/default.ts +++ b/blocksuite/affine/model/src/themes/default.ts @@ -1,5 +1,5 @@ -import type { Palette, Theme } from './types.js'; -import { buildPalettes, getColorByKey, pureBlack, pureWhite } from './utils.js'; +import type { Palette, Theme } from './types'; +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, diff --git a/blocksuite/affine/model/src/themes/index.ts b/blocksuite/affine/model/src/themes/index.ts index 70e5f558bdb59..b5c59572ea11c 100644 --- a/blocksuite/affine/model/src/themes/index.ts +++ b/blocksuite/affine/model/src/themes/index.ts @@ -1,9 +1,9 @@ -import { DefaultTheme } from './default.js'; -import type { Theme } from './types.js'; +import { DefaultTheme } from './default'; +import type { Theme } from './types'; -export * from './color.js'; -export { DefaultTheme } from './default.js'; -export * from './types.js'; +export * from './color'; +export { DefaultTheme } from './default'; +export * from './types'; export const Themes: Record = { default: DefaultTheme, diff --git a/blocksuite/affine/model/src/themes/types.ts b/blocksuite/affine/model/src/themes/types.ts index e7d54396df050..7e5d192eb277f 100644 --- a/blocksuite/affine/model/src/themes/types.ts +++ b/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(), diff --git a/blocksuite/affine/model/src/themes/utils.ts b/blocksuite/affine/model/src/themes/utils.ts index 9cef215c73504..25c321edc5aa3 100644 --- a/blocksuite/affine/model/src/themes/utils.ts +++ b/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 { Palette } from './types.js'; +import type { Color } from './color'; +import type { Palette } from './types'; // Converts a color map to color list. export function buildPalettes( diff --git a/blocksuite/blocks/src/root-block/edgeless/components/panel/color-panel.ts b/blocksuite/blocks/src/root-block/edgeless/components/panel/color-panel.ts index 198449d8ac3a1..1a2f2c99e5143 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/panel/color-panel.ts +++ b/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` { this.onSelect(palette); this.value = resolvedColor; diff --git 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 index 388974ea2741b..e12248b3704de 100644 --- 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,10 +32,7 @@ "e6t9tKz8Sy": { "index": "a5", "seed": 338503204, - "color": { - "dark": "#ffffff", - "light": "#000000" - }, + "color": "#000000ff", "fillColor": "#fffbd5", "filled": true, "fontFamily": "blocksuite:surface:Inter", @@ -59,10 +56,7 @@ "F8qB_zDC5Q": { "index": "a6", "seed": 1896265661, - "color": { - "dark": "#ffffff", - "light": "#000000" - }, + "color": "#000000ff", "fillColor": "#fffbd5", "filled": true, "fontFamily": "blocksuite:surface:Inter", @@ -86,10 +80,7 @@ "mPR44JBpcd": { "index": "a7", "seed": 2073974140, - "color": { - "dark": "#ffffff", - "light": "#000000" - }, + "color": "#000000ff", "fillColor": "#fffbd5", "filled": true, "fontFamily": "blocksuite:surface:Inter", @@ -113,10 +104,7 @@ "cmtluc3FWR": { "index": "a8", "seed": 1457248130, - "color": { - "dark": "#ffffff", - "light": "#000000" - }, + "color": "#000000ff", "fillColor": "#fffbd5", "filled": true, "fontFamily": "blocksuite:surface:Inter", @@ -140,10 +128,7 @@ "knt_TKvACR": { "index": "a9", "seed": 1896265661, - "color": { - "dark": "#ffffff", - "light": "#000000" - }, + "color": "#000000ff", "fillColor": "#fffbd5", "filled": true, "fontFamily": "blocksuite:surface:Inter", diff --git 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 index 6cc54f04e53b3..42ede7c63d6c5 100644 --- 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 @@ -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 (