diff --git a/blocksuite/affine/block-surface/src/renderer/canvas-renderer.ts b/blocksuite/affine/block-surface/src/renderer/canvas-renderer.ts index 68578c1cf6361..9916661861795 100644 --- a/blocksuite/affine/block-surface/src/renderer/canvas-renderer.ts +++ b/blocksuite/affine/block-surface/src/renderer/canvas-renderer.ts @@ -23,7 +23,7 @@ import type { Overlay } from './overlay.js'; type EnvProvider = { generateColorProperty: (color: Color, fallback: string) => string; getColorScheme: () => ColorScheme; - getColorValue: (color: Color, fallback?: string, real?: boolean) => string; + getColorValue: (color: Color, fallback?: Color, real?: boolean) => string; getPropertyValue: (property: string) => string; selectedElements?: () => string[]; }; @@ -409,7 +409,7 @@ export class CanvasRenderer { return this.provider.getColorScheme?.() ?? ColorScheme.Light; } - getColorValue(color: Color, fallback?: string, real?: boolean) { + getColorValue(color: Color, fallback?: Color, real?: boolean) { return ( this.provider.getColorValue?.(color, fallback, real) ?? 'transparent' ); diff --git a/blocksuite/affine/block-surface/src/renderer/elements/brush/index.ts b/blocksuite/affine/block-surface/src/renderer/elements/brush/index.ts index 6dc720828daf9..7565b4a78ab29 100644 --- a/blocksuite/affine/block-surface/src/renderer/elements/brush/index.ts +++ b/blocksuite/affine/block-surface/src/renderer/elements/brush/index.ts @@ -1,4 +1,4 @@ -import type { BrushElementModel } from '@blocksuite/affine-model'; +import { type BrushElementModel, DefaultTheme } from '@blocksuite/affine-model'; import type { CanvasRenderer } from '../../canvas-renderer.js'; @@ -17,7 +17,7 @@ export function brush( matrix.translateSelf(cx, cy).rotateSelf(rotate).translateSelf(-cx, -cy) ); - const color = renderer.getColorValue(model.color, '#000000', true); + const color = renderer.getColorValue(model.color, DefaultTheme.black, true); ctx.fillStyle = color; diff --git a/blocksuite/affine/block-surface/src/renderer/elements/connector/index.ts b/blocksuite/affine/block-surface/src/renderer/elements/connector/index.ts index b4df3468f6bbf..0c9aabc27ba61 100644 --- a/blocksuite/affine/block-surface/src/renderer/elements/connector/index.ts +++ b/blocksuite/affine/block-surface/src/renderer/elements/connector/index.ts @@ -1,6 +1,7 @@ import { type ConnectorElementModel, ConnectorMode, + DefaultTheme, type LocalConnectorElementModel, type PointStyle, } from '@blocksuite/affine-model'; @@ -75,7 +76,11 @@ export function connector( ctx.clip(path, 'evenodd'); } - const strokeColor = renderer.getColorValue(model.stroke, '#000000', true); + const strokeColor = renderer.getColorValue( + model.stroke, + DefaultTheme.connectorColor, + true + ); renderPoints( model, @@ -249,7 +254,7 @@ function renderLabel( ctx.font = font; ctx.textAlign = textAlign; ctx.textBaseline = 'middle'; - ctx.fillStyle = renderer.getColorValue(color, '#000000', true); + ctx.fillStyle = renderer.getColorValue(color, DefaultTheme.black, true); let textMaxWidth = textAlign === 'center' ? 0 : getMaxTextWidth(lines, font); if (hasMaxWidth && maxWidth > 0) { diff --git a/blocksuite/affine/block-surface/src/renderer/elements/shape/index.ts b/blocksuite/affine/block-surface/src/renderer/elements/shape/index.ts index 202f44a397c8e..5d8d09ad100ce 100644 --- a/blocksuite/affine/block-surface/src/renderer/elements/shape/index.ts +++ b/blocksuite/affine/block-surface/src/renderer/elements/shape/index.ts @@ -3,12 +3,7 @@ import type { ShapeElementModel, ShapeType, } from '@blocksuite/affine-model'; -import { - DEFAULT_SHAPE_FILL_COLOR, - DEFAULT_SHAPE_STROKE_COLOR, - DEFAULT_SHAPE_TEXT_COLOR, - TextAlign, -} from '@blocksuite/affine-model'; +import { DefaultTheme, TextAlign } from '@blocksuite/affine-model'; import type { IBound } from '@blocksuite/global/utils'; import { Bound } from '@blocksuite/global/utils'; import { deltaInsertsToChunks } from '@blocksuite/inline'; @@ -55,17 +50,17 @@ export function shape( ) { const color = renderer.getColorValue( model.color, - DEFAULT_SHAPE_TEXT_COLOR, + DefaultTheme.shapeTextColor, true ); const fillColor = renderer.getColorValue( model.fillColor, - DEFAULT_SHAPE_FILL_COLOR, + DefaultTheme.shapeFillColor, true ); const strokeColor = renderer.getColorValue( model.strokeColor, - DEFAULT_SHAPE_STROKE_COLOR, + DefaultTheme.shapeStrokeColor, true ); const colors = { color, fillColor, strokeColor }; diff --git a/blocksuite/affine/block-surface/src/renderer/elements/text/index.ts b/blocksuite/affine/block-surface/src/renderer/elements/text/index.ts index 73904c43db8d2..af605b233e8e9 100644 --- a/blocksuite/affine/block-surface/src/renderer/elements/text/index.ts +++ b/blocksuite/affine/block-surface/src/renderer/elements/text/index.ts @@ -1,4 +1,4 @@ -import type { TextElementModel } from '@blocksuite/affine-model'; +import { DefaultTheme, type TextElementModel } from '@blocksuite/affine-model'; import { deltaInsertsToChunks } from '@blocksuite/inline'; import type { CanvasRenderer } from '../../canvas-renderer.js'; @@ -39,7 +39,11 @@ export function text( const horizontalOffset = textAlign === 'center' ? w / 2 : textAlign === 'right' ? w : 0; - const color = renderer.getColorValue(model.color, '#000000', true); + const color = renderer.getColorValue( + model.color, + DefaultTheme.textColor, + true + ); ctx.font = font; ctx.fillStyle = color; diff --git a/blocksuite/affine/block-surface/src/surface-block.ts b/blocksuite/affine/block-surface/src/surface-block.ts index 6b8558c4a2bee..2625474dd0480 100644 --- a/blocksuite/affine/block-surface/src/surface-block.ts +++ b/blocksuite/affine/block-surface/src/surface-block.ts @@ -166,7 +166,7 @@ export class SurfaceBlockComponent extends BlockComponent< fallback, themeService.edgelessTheme ), - getColorValue: (color: Color, fallback?: string, real?: boolean) => + getColorValue: (color: Color, fallback?: Color, real?: boolean) => themeService.getColorValue( color, fallback, diff --git a/blocksuite/affine/components/src/toolbar/styles.ts b/blocksuite/affine/components/src/toolbar/styles.ts index 9718aae547afe..38ed6cc925f55 100644 --- a/blocksuite/affine/components/src/toolbar/styles.ts +++ b/blocksuite/affine/components/src/toolbar/styles.ts @@ -8,6 +8,7 @@ import { unsafeCSS } from 'lit'; const toolbarColorKeys: Array = [ '--affine-background-overlay-panel-color', '--affine-v2-layer-background-overlayPanel' as never, + '--affine-v2-layer-insideBorder-blackBorder' as never, '--affine-background-error-color', '--affine-background-primary-color', '--affine-background-tertiary-color', diff --git a/blocksuite/affine/model/src/blocks/note/note-model.ts b/blocksuite/affine/model/src/blocks/note/note-model.ts index 24915a2e7775d..a0b88fd0ddc33 100644 --- a/blocksuite/affine/model/src/blocks/note/note-model.ts +++ b/blocksuite/affine/model/src/blocks/note/note-model.ts @@ -8,13 +8,13 @@ import { BlockModel, defineBlockSchema } from '@blocksuite/store'; import { type Color, - DEFAULT_NOTE_BACKGROUND_COLOR, DEFAULT_NOTE_BORDER_SIZE, DEFAULT_NOTE_BORDER_STYLE, DEFAULT_NOTE_CORNER, DEFAULT_NOTE_HEIGHT, DEFAULT_NOTE_SHADOW, DEFAULT_NOTE_WIDTH, + DefaultTheme, NoteDisplayMode, type StrokeStyle, } from '../../consts/index.js'; @@ -23,7 +23,7 @@ export const NoteBlockSchema = defineBlockSchema({ flavour: 'affine:note', props: (): NoteProps => ({ xywh: `[0,0,${DEFAULT_NOTE_WIDTH},${DEFAULT_NOTE_HEIGHT}]`, - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', lockedBySelf: false, hidden: false, diff --git a/blocksuite/affine/model/src/consts/color.ts b/blocksuite/affine/model/src/consts/color.ts index c708ca11372a5..e4c770f969d27 100644 --- a/blocksuite/affine/model/src/consts/color.ts +++ b/blocksuite/affine/model/src/consts/color.ts @@ -1,97 +1,54 @@ -import { themeToVar } from '@toeverything/theme/v2'; import { z } from 'zod'; -import { createEnumMap } from '../utils/enum.js'; - -export const Transparent = 'transparent'; -export const White = themeToVar('edgeless/palette/white'); -export const Black = themeToVar('edgeless/palette/black'); - -export const Light = { - Red: themeToVar('edgeless/palette/light/redLight'), - Orange: themeToVar('edgeless/palette/light/orangeLight'), - Yellow: themeToVar('edgeless/palette/light/yellowLight'), - Green: themeToVar('edgeless/palette/light/greenLight'), - Blue: themeToVar('edgeless/palette/light/blueLight'), - Purple: themeToVar('edgeless/palette/light/purpleLight'), - Magenta: themeToVar('edgeless/palette/light/magentaLight'), - Grey: themeToVar('edgeless/palette/light/greyLight'), -} as const; - -export const LIGHT_PALETTES = [ - Light.Red, - Light.Orange, - Light.Yellow, - Light.Green, - Light.Blue, - Light.Purple, - Light.Magenta, - Light.Grey, -] as const; - -export const Medium = { - Red: themeToVar('edgeless/palette/medium/redMedium'), - Orange: themeToVar('edgeless/palette/medium/orangeMedium'), - Yellow: themeToVar('edgeless/palette/medium/yellowMedium'), - Green: themeToVar('edgeless/palette/medium/greenMedium'), - Blue: themeToVar('edgeless/palette/medium/blueMedium'), - Purple: themeToVar('edgeless/palette/medium/purpleMedium'), - Magenta: themeToVar('edgeless/palette/medium/magentaMedium'), - Grey: themeToVar('edgeless/palette/medium/greyMedium'), -} as const; - -export const MEDIUM_PALETTES = [ - Medium.Red, - Medium.Orange, - Medium.Yellow, - Medium.Green, - Medium.Blue, - Medium.Purple, - Medium.Magenta, - Medium.Grey, -] as const; - -export const Heavy = { - Red: themeToVar('edgeless/palette/heavy/red'), - Orange: themeToVar('edgeless/palette/heavy/orange'), - Yellow: themeToVar('edgeless/palette/heavy/yellow'), - Green: themeToVar('edgeless/palette/heavy/green'), - Blue: themeToVar('edgeless/palette/heavy/blue'), - Purple: themeToVar('edgeless/palette/heavy/purple'), - Magenta: themeToVar('edgeless/palette/heavy/magenta'), -} as const; - -export const HEAVY_PALETTES = [ - Heavy.Red, - Heavy.Orange, - Heavy.Yellow, - Heavy.Green, - Heavy.Blue, - Heavy.Purple, - Heavy.Magenta, -] as const; - -export const PALETTES = [ - // Light - ...LIGHT_PALETTES, - - Transparent, - - // Medium - ...MEDIUM_PALETTES, - - White, - - // Heavy - ...HEAVY_PALETTES, - - Black, -] as const; - -export const PaletteEnum = z.enum(PALETTES); - -export const StrokeColor = { Black, White, ...Medium } as const; - -export const StrokeColorMap = createEnumMap(StrokeColor); - -export const STROKE_COLORS = [...MEDIUM_PALETTES, Black, White] as const; +export enum ColorScheme { + Dark = 'dark', + Light = 'light', +} + +const ColorNormalSchema = z.object({ + normal: z.string(), +}); + +const ColorDarkLightSchema = z.object({ + [ColorScheme.Dark]: z.string(), + [ColorScheme.Light]: z.string(), +}); + +export const ColorSchema = z.union([ + z.string(), + ColorNormalSchema, + ColorDarkLightSchema, +]); + +export type Color = z.infer; + +// Converts `Color` type to string. +export function resolveColor( + color: Color, + colorScheme: ColorScheme, + fallback = 'transparent' +): string { + let value = fallback; + + if (typeof color === 'object') { + if (ColorScheme.Dark in color && ColorScheme.Light in color) { + value = color[colorScheme]; + } else if ('normal' in color) { + value = color.normal; + } + } else { + value = color; + } + + if (!value) { + value = fallback; + } + + return value; +} + +export function isTransparent(color: Color) { + return ( + typeof color === 'string' && color.toLowerCase().endsWith('transparent') + ); +} diff --git a/blocksuite/affine/model/src/consts/connector.ts b/blocksuite/affine/model/src/consts/connector.ts index 97b35b7808ce5..fd90c36ba9c25 100644 --- a/blocksuite/affine/model/src/consts/connector.ts +++ b/blocksuite/affine/model/src/consts/connector.ts @@ -1,5 +1,4 @@ import { createEnumMap } from '../utils/enum.js'; -import { StrokeColor } from './color.js'; export enum ConnectorEndpoint { Front = 'Front', @@ -16,10 +15,6 @@ export enum PointStyle { export const PointStyleMap = createEnumMap(PointStyle); -export const DEFAULT_CONNECTOR_COLOR = StrokeColor.Grey; - -export const DEFAULT_CONNECTOR_TEXT_COLOR = StrokeColor.Black; - export const DEFAULT_FRONT_END_POINT_STYLE = PointStyle.None; export const DEFAULT_REAR_END_POINT_STYLE = PointStyle.Arrow; diff --git a/blocksuite/affine/model/src/consts/index.ts b/blocksuite/affine/model/src/consts/index.ts index 62c70b8c25fc4..31cdc8c3b3ff3 100644 --- a/blocksuite/affine/model/src/consts/index.ts +++ b/blocksuite/affine/model/src/consts/index.ts @@ -1,10 +1,9 @@ -export * from './brush.js'; export * from './color.js'; export * from './connector.js'; export * from './doc.js'; -export * from './frame.js'; export * from './line.js'; export * from './mindmap.js'; export * from './note.js'; export * from './shape.js'; export * from './text.js'; +export * from './themes/index.js'; diff --git a/blocksuite/affine/model/src/consts/line.ts b/blocksuite/affine/model/src/consts/line.ts index 0b246849cd1ee..71fc63641f10b 100644 --- a/blocksuite/affine/model/src/consts/line.ts +++ b/blocksuite/affine/model/src/consts/line.ts @@ -3,14 +3,14 @@ import { z } from 'zod'; import { createEnumMap } from '../utils/enum.js'; export enum LineWidth { - Eight = 8, + Two = 2, // Thin Four = 4, Six = 6, + Eight = 8, // Thick Ten = 10, Twelve = 12, - Two = 2, } export const LINE_WIDTHS = [ @@ -23,7 +23,7 @@ export const LINE_WIDTHS = [ ]; /** - * Use `StrokeColor` instead. + * Use `DefaultTheme.StrokeColorMap` instead. * * @deprecated */ diff --git a/blocksuite/affine/model/src/consts/note.ts b/blocksuite/affine/model/src/consts/note.ts index b203e37bfc6ed..7321290eb5d6c 100644 --- a/blocksuite/affine/model/src/consts/note.ts +++ b/blocksuite/affine/model/src/consts/note.ts @@ -1,4 +1,3 @@ -import { themeToVar } from '@toeverything/theme/v2'; import { z } from 'zod'; import { createEnumMap } from '../utils/enum.js'; @@ -9,40 +8,6 @@ export const NOTE_MIN_HEIGHT = 92; export const DEFAULT_NOTE_WIDTH = NOTE_MIN_WIDTH; export const DEFAULT_NOTE_HEIGHT = NOTE_MIN_HEIGHT; -export const NoteBackgroundColor = { - Yellow: themeToVar('edgeless/note/yellow'), - Orange: themeToVar('edgeless/note/orange'), - Red: themeToVar('edgeless/note/red'), - Magenta: themeToVar('edgeless/note/magenta'), - Purple: themeToVar('edgeless/note/purple'), - Blue: themeToVar('edgeless/note/blue'), - Teal: themeToVar('edgeless/note/teal'), - Green: themeToVar('edgeless/note/green'), - Black: themeToVar('edgeless/note/black'), - Grey: themeToVar('edgeless/note/grey'), - White: themeToVar('edgeless/note/white'), -} as const; - -export const NoteBackgroundColorMap = createEnumMap(NoteBackgroundColor); - -export const NOTE_BACKGROUND_PALETTES = [ - NoteBackgroundColor.Yellow, - NoteBackgroundColor.Orange, - NoteBackgroundColor.Red, - NoteBackgroundColor.Magenta, - NoteBackgroundColor.Purple, - NoteBackgroundColor.Blue, - NoteBackgroundColor.Teal, - NoteBackgroundColor.Green, - NoteBackgroundColor.Black, - NoteBackgroundColor.Grey, - NoteBackgroundColor.White, -] as const; - -export const NoteBackgroundPaletteEnum = z.enum(NOTE_BACKGROUND_PALETTES); - -export const DEFAULT_NOTE_BACKGROUND_COLOR = NoteBackgroundColor.White; - export enum NoteShadow { Box = '--affine-note-shadow-box', Film = '--affine-note-shadow-film', diff --git a/blocksuite/affine/model/src/consts/shape.ts b/blocksuite/affine/model/src/consts/shape.ts index 427bdad8263d7..e81821cdb1db0 100644 --- a/blocksuite/affine/model/src/consts/shape.ts +++ b/blocksuite/affine/model/src/consts/shape.ts @@ -1,5 +1,3 @@ -import { Black, Light, LIGHT_PALETTES, StrokeColor, White } from './color.js'; - export const DEFAULT_ROUGHNESS = 1.4; // TODO: need to check the default central area ratio @@ -46,13 +44,3 @@ export enum ShapeStyle { General = 'General', Scribbled = 'Scribbled', } - -export const ShapeFillColor = { Black, White, ...Light } as const; - -export const SHAPE_FILL_COLORS = [...LIGHT_PALETTES, Black, White]; - -export const DEFAULT_SHAPE_FILL_COLOR = Light.Yellow; - -export const DEFAULT_SHAPE_STROKE_COLOR = StrokeColor.Yellow; - -export const DEFAULT_SHAPE_TEXT_COLOR = StrokeColor.Black; diff --git a/blocksuite/affine/model/src/consts/text.ts b/blocksuite/affine/model/src/consts/text.ts index 3f9887621ef23..d731583820fcf 100644 --- a/blocksuite/affine/model/src/consts/text.ts +++ b/blocksuite/affine/model/src/consts/text.ts @@ -1,12 +1,5 @@ import { createEnumMap } from '../utils/enum.js'; -import { StrokeColor } from './color.js'; - -export enum ColorScheme { - Dark = 'dark', - Light = 'light', -} - -export type Color = string | Partial>; +import type { Color } from './color.js'; export enum TextAlign { Center = 'center', @@ -66,5 +59,3 @@ export enum TextResizing { AUTO_WIDTH_AND_HEIGHT, AUTO_HEIGHT, } - -export const DEFAULT_TEXT_COLOR = StrokeColor.Blue; diff --git a/blocksuite/affine/model/src/consts/themes/default.ts b/blocksuite/affine/model/src/consts/themes/default.ts new file mode 100644 index 0000000000000..71a59c55bb74c --- /dev/null +++ b/blocksuite/affine/model/src/consts/themes/default.ts @@ -0,0 +1,104 @@ +import type { Palette, Theme } from './types.js'; +import { buildPalettes, getColorByKey } from './utils.js'; + +const Transparent = 'transparent'; +const White = getColorByKey('edgeless/palette/white'); +const Black = getColorByKey('edgeless/palette/black'); + +const Light = { + Red: getColorByKey('edgeless/palette/light/redLight'), + Orange: getColorByKey('edgeless/palette/light/orangeLight'), + Yellow: getColorByKey('edgeless/palette/light/yellowLight'), + Green: getColorByKey('edgeless/palette/light/greenLight'), + Blue: getColorByKey('edgeless/palette/light/blueLight'), + Purple: getColorByKey('edgeless/palette/light/purpleLight'), + Magenta: getColorByKey('edgeless/palette/light/magentaLight'), + Grey: getColorByKey('edgeless/palette/light/greyLight'), +} as const; + +const Medium = { + Red: getColorByKey('edgeless/palette/medium/redMedium'), + Orange: getColorByKey('edgeless/palette/medium/orangeMedium'), + Yellow: getColorByKey('edgeless/palette/medium/yellowMedium'), + Green: getColorByKey('edgeless/palette/medium/greenMedium'), + Blue: getColorByKey('edgeless/palette/medium/blueMedium'), + Purple: getColorByKey('edgeless/palette/medium/purpleMedium'), + Magenta: getColorByKey('edgeless/palette/medium/magentaMedium'), + Grey: getColorByKey('edgeless/palette/medium/greyMedium'), +} as const; + +const Heavy = { + Red: getColorByKey('edgeless/palette/heavy/red'), + Orange: getColorByKey('edgeless/palette/heavy/orange'), + Yellow: getColorByKey('edgeless/palette/heavy/yellow'), + Green: getColorByKey('edgeless/palette/heavy/green'), + Blue: getColorByKey('edgeless/palette/heavy/blue'), + Purple: getColorByKey('edgeless/palette/heavy/purple'), + Magenta: getColorByKey('edgeless/palette/heavy/magenta'), +} as const; + +const NoteBackgroundColorMap = { + Yellow: getColorByKey('edgeless/note/yellow'), + Orange: getColorByKey('edgeless/note/orange'), + Red: getColorByKey('edgeless/note/red'), + Magenta: getColorByKey('edgeless/note/magenta'), + Purple: getColorByKey('edgeless/note/purple'), + Blue: getColorByKey('edgeless/note/blue'), + Teal: getColorByKey('edgeless/note/teal'), + Green: getColorByKey('edgeless/note/green'), + Black: getColorByKey('edgeless/note/black'), + Grey: getColorByKey('edgeless/note/grey'), + White: getColorByKey('edgeless/note/white'), +} as const; + +const palettes: Palette[] = [ + // Light + ...buildPalettes(Light, 'Light'), + + { key: 'Transparent', value: Transparent }, + + // Medium + ...buildPalettes(Medium, 'Medium'), + + { key: 'White', value: White }, + + // Heavy + ...buildPalettes(Heavy, 'Heavy'), + + { key: 'Black', value: Black }, +] as const; + +const notePalettes: Palette[] = [ + ...buildPalettes(NoteBackgroundColorMap), +] as const; + +const StrokeColorMap = { ...Medium, Black, White } as const; + +const globalToolbarPalettes: Palette[] = [ + ...buildPalettes(StrokeColorMap), +] as const; + +const FillColorMap = { ...Light, Black, White } as const; + +const globalToolbarShapeFillPalettes: Palette[] = [ + ...buildPalettes(FillColorMap), +] as const; + +export const DefaultTheme: Theme = { + black: Black, + white: White, + transparent: Transparent, + palettes, + textColor: Medium.Blue, + shapeTextColor: Black, + shapeStrokeColor: Medium.Yellow, + shapeFillColor: Light.Yellow, + connectorColor: Medium.Grey, + notePalettes, + noteBackgrounColor: NoteBackgroundColorMap.White, + globalToolbarPalettes, + globalToolbarShapeFillPalettes, + StrokeColorMap, + FillColorMap, + NoteBackgroundColorMap, +} as const; diff --git a/blocksuite/affine/model/src/consts/themes/index.ts b/blocksuite/affine/model/src/consts/themes/index.ts new file mode 100644 index 0000000000000..c659fd45bc8b2 --- /dev/null +++ b/blocksuite/affine/model/src/consts/themes/index.ts @@ -0,0 +1,9 @@ +import { DefaultTheme } from './default.js'; +import type { Theme } from './types.js'; + +export { DefaultTheme } from './default.js'; +export * from './types.js'; + +export const Themes: Record = { + default: DefaultTheme, +}; diff --git a/blocksuite/affine/model/src/consts/themes/types.ts b/blocksuite/affine/model/src/consts/themes/types.ts new file mode 100644 index 0000000000000..272baf8ab94ee --- /dev/null +++ b/blocksuite/affine/model/src/consts/themes/types.ts @@ -0,0 +1,31 @@ +import { z } from 'zod'; + +import { ColorSchema } from '../color.js'; + +export const PaletteSchema = z.object({ + key: z.string(), + value: ColorSchema, +}); + +export type Palette = z.infer; + +export const ThemeSchema = z.object({ + black: ColorSchema, + white: ColorSchema, + transparent: z.literal('transparent'), + textColor: ColorSchema, + shapeTextColor: ColorSchema, + shapeStrokeColor: ColorSchema, + shapeFillColor: ColorSchema, + connectorColor: ColorSchema, + palettes: z.array(PaletteSchema), + noteBackgrounColor: ColorSchema, + notePalettes: z.array(PaletteSchema), + globalToolbarPalettes: z.array(PaletteSchema), + globalToolbarShapeFillPalettes: z.array(PaletteSchema), + StrokeColorMap: z.record(z.string(), ColorSchema), + FillColorMap: z.record(z.string(), ColorSchema), + NoteBackgroundColorMap: z.record(z.string(), ColorSchema), +}); + +export type Theme = z.infer; diff --git a/blocksuite/affine/model/src/consts/themes/utils.ts b/blocksuite/affine/model/src/consts/themes/utils.ts new file mode 100644 index 0000000000000..c8a9a10352348 --- /dev/null +++ b/blocksuite/affine/model/src/consts/themes/utils.ts @@ -0,0 +1,26 @@ +import { + type AffineThemeKeyV2, + darkThemeV2, + lightThemeV2, +} from '@toeverything/theme/v2'; + +import type { Color } from '../color.js'; +import type { Palette } from './types.js'; + +// Converts a color map to color list. +export function buildPalettes( + obj: Record, + prefix = '' +): Palette[] { + return Object.entries(obj).map(([key, value]) => ({ + key: `${prefix}${key}`, + value, + })); +} + +export function getColorByKey(key: AffineThemeKeyV2): Color { + const dark = darkThemeV2[key]; + const light = lightThemeV2[key]; + if (dark === light) return dark; + return { dark, light }; +} diff --git a/blocksuite/affine/model/src/elements/mindmap/style.ts b/blocksuite/affine/model/src/elements/mindmap/style.ts index 08e88aed41d25..773780f47ca06 100644 --- a/blocksuite/affine/model/src/elements/mindmap/style.ts +++ b/blocksuite/affine/model/src/elements/mindmap/style.ts @@ -1,11 +1,11 @@ import { isEqual, last } from '@blocksuite/global/utils'; +import type { Color } from '../../consts/color.js'; import { ConnectorMode } from '../../consts/connector.js'; -import { LineColor } from '../../consts/line.js'; import { MindmapStyle } from '../../consts/mindmap.js'; import { StrokeStyle } from '../../consts/note.js'; -import { ShapeFillColor } from '../../consts/shape.js'; import { FontFamily, FontWeight, TextResizing } from '../../consts/text.js'; +import { DefaultTheme } from '../../consts/themes/default.js'; import type { MindmapNode } from './mindmap.js'; export type CollapseButton = { @@ -14,9 +14,9 @@ export type CollapseButton = { radius: number; filled: boolean; - fillColor: string; + fillColor: Color; - strokeColor: string; + strokeColor: Color; strokeWidth: number; }; @@ -25,24 +25,24 @@ export type ExpandButton = CollapseButton & { fontSize: number; fontWeight: FontWeight; - color: string; + color: Color; }; export type NodeStyle = { radius: number; strokeWidth: number; - strokeColor: string; + strokeColor: Color; textResizing: TextResizing; fontSize: number; fontFamily: string; fontWeight: FontWeight; - color: string; + color: Color; filled: boolean; - fillColor: string; + fillColor: Color; padding: [number, number]; @@ -56,7 +56,7 @@ export type NodeStyle = { export type ConnectorStyle = { strokeStyle: StrokeStyle; - stroke: string; + stroke: Color; strokeWidth: number; mode: ConnectorMode; @@ -78,11 +78,11 @@ export abstract class MindmapStyleGetter { export class StyleOne extends MindmapStyleGetter { private readonly _colorOrders = [ - LineColor.Purple, - LineColor.Magenta, - LineColor.Orange, - LineColor.Yellow, - LineColor.Green, + DefaultTheme.StrokeColorMap.Purple, + DefaultTheme.StrokeColorMap.Magenta, + DefaultTheme.StrokeColorMap.Orange, + DefaultTheme.StrokeColorMap.Yellow, + DefaultTheme.StrokeColorMap.Green, '#7ae2d5', ]; @@ -189,9 +189,9 @@ export const styleOne = new StyleOne(); export class StyleTwo extends MindmapStyleGetter { private readonly _colorOrders = [ - ShapeFillColor.Blue, + DefaultTheme.FillColorMap.Blue, '#7ae2d5', - ShapeFillColor.Yellow, + DefaultTheme.FillColorMap.Yellow, ]; readonly root = { @@ -205,10 +205,10 @@ export class StyleTwo extends MindmapStyleGetter { fontFamily: FontFamily.Poppins, fontSize: 18, fontWeight: FontWeight.SemiBold, - color: ShapeFillColor.Black, + color: DefaultTheme.FillColorMap.Black, filled: true, - fillColor: ShapeFillColor.Orange, + fillColor: DefaultTheme.FillColorMap.Orange, padding: [11, 22] as [number, number], @@ -278,7 +278,7 @@ export class StyleTwo extends MindmapStyleGetter { fontFamily: FontFamily.Poppins, fontSize: 16, fontWeight: FontWeight.SemiBold, - color: ShapeFillColor.Black, + color: DefaultTheme.FillColorMap.Black, filled: true, fillColor: color, @@ -299,9 +299,9 @@ export const styleTwo = new StyleTwo(); export class StyleThree extends MindmapStyleGetter { private readonly _strokeColor = [ - LineColor.Yellow, - LineColor.Green, - LineColor.Teal, + DefaultTheme.StrokeColorMap.Yellow, + DefaultTheme.StrokeColorMap.Green, + DefaultTheme.StrokeColorMap.Teal, ]; readonly root = { @@ -315,10 +315,10 @@ export class StyleThree extends MindmapStyleGetter { fontFamily: FontFamily.Poppins, fontSize: 16, fontWeight: FontWeight.Medium, - color: ShapeFillColor.Black, + color: DefaultTheme.FillColorMap.Black, filled: true, - fillColor: ShapeFillColor.Yellow, + fillColor: DefaultTheme.FillColorMap.Yellow, padding: [10, 22] as [number, number], @@ -349,10 +349,10 @@ export class StyleThree extends MindmapStyleGetter { fontFamily: FontFamily.Poppins, fontSize: 16, fontWeight: FontWeight.Medium, - color: ShapeFillColor.Black, + color: DefaultTheme.FillColorMap.Black, filled: true, - fillColor: ShapeFillColor.White, + fillColor: DefaultTheme.FillColorMap.White, padding: [6, 22] as [number, number], @@ -407,12 +407,12 @@ export const styleThree = new StyleThree(); export class StyleFour extends MindmapStyleGetter { private readonly _colors = [ - ShapeFillColor.Purple, - ShapeFillColor.Magenta, - ShapeFillColor.Orange, - ShapeFillColor.Yellow, - ShapeFillColor.Green, - ShapeFillColor.Blue, + DefaultTheme.FillColorMap.Purple, + DefaultTheme.FillColorMap.Magenta, + DefaultTheme.FillColorMap.Orange, + DefaultTheme.FillColorMap.Yellow, + DefaultTheme.FillColorMap.Green, + DefaultTheme.FillColorMap.Blue, ]; readonly root = { diff --git a/blocksuite/affine/model/src/elements/shape/shape.ts b/blocksuite/affine/model/src/elements/shape/shape.ts index d40b87cd8cb19..ad5a41adc1c47 100644 --- a/blocksuite/affine/model/src/elements/shape/shape.ts +++ b/blocksuite/affine/model/src/elements/shape/shape.ts @@ -24,8 +24,6 @@ import { FontFamily, FontStyle, FontWeight, - LineColor, - ShapeFillColor, ShapeStyle, ShapeTextFontSize, ShapeType, @@ -35,6 +33,7 @@ import { type TextStyleProps, TextVerticalAlign, } from '../../consts/index.js'; +import { DefaultTheme } from '../../consts/themes/default.js'; import { shapeMethods } from './api/index.js'; export type ShapeProps = BaseElementProps & { @@ -104,7 +103,7 @@ export class ShapeElementModel extends GfxPrimitiveElementModel { accessor color!: Color; @field() - accessor fillColor: Color = ShapeFillColor.Yellow; + accessor fillColor: Color = DefaultTheme.shapeFillColor; @field() accessor filled: boolean = false; @@ -160,7 +159,7 @@ export class ShapeElementModel extends GfxPrimitiveElementModel { accessor shapeType: ShapeType = ShapeType.Rect; @field() - accessor strokeColor: Color = LineColor.Yellow; + accessor strokeColor: Color = DefaultTheme.shapeStrokeColor; @field() accessor strokeStyle: StrokeStyle = StrokeStyle.Solid; @@ -205,7 +204,7 @@ export class LocalShapeElementModel extends GfxLocalElementModel { accessor color: Color = '#000000'; @prop() - accessor fillColor: Color = ShapeFillColor.Yellow; + accessor fillColor: Color = DefaultTheme.shapeFillColor; @prop() accessor filled: boolean = false; @@ -246,7 +245,7 @@ export class LocalShapeElementModel extends GfxLocalElementModel { accessor shapeType: ShapeType = ShapeType.Rect; @prop() - accessor strokeColor: Color = LineColor.Yellow; + accessor strokeColor: Color = DefaultTheme.shapeStrokeColor; @prop() accessor strokeStyle: StrokeStyle = StrokeStyle.Solid; diff --git a/blocksuite/affine/shared/src/services/edit-props-store.ts b/blocksuite/affine/shared/src/services/edit-props-store.ts index 9c083adbac160..11f8d5801308b 100644 --- a/blocksuite/affine/shared/src/services/edit-props-store.ts +++ b/blocksuite/affine/shared/src/services/edit-props-store.ts @@ -1,3 +1,4 @@ +import { ColorSchema } from '@blocksuite/affine-model'; import { type BlockStdScope, LifeCycleWatcher } from '@blocksuite/block-std'; import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions'; import { @@ -11,11 +12,7 @@ import clonedeep from 'lodash.clonedeep'; import mergeWith from 'lodash.mergewith'; import { z } from 'zod'; -import { - ColorSchema, - makeDeepOptional, - NodePropsSchema, -} from '../utils/index.js'; +import { makeDeepOptional, NodePropsSchema } from '../utils/index.js'; import { EditorSettingProvider } from './editor-setting-service.js'; const LastPropsSchema = NodePropsSchema; diff --git a/blocksuite/affine/shared/src/services/theme-service.ts b/blocksuite/affine/shared/src/services/theme-service.ts index 5c789f74c4b9f..97c25dea9c71c 100644 --- a/blocksuite/affine/shared/src/services/theme-service.ts +++ b/blocksuite/affine/shared/src/services/theme-service.ts @@ -1,4 +1,9 @@ -import { type Color, ColorScheme } from '@blocksuite/affine-model'; +import { + type Color, + ColorScheme, + DefaultTheme, + resolveColor, +} from '@blocksuite/affine-model'; import { type BlockStdScope, Extension, @@ -15,8 +20,6 @@ import { import { isInsideEdgelessEditor } from '../utils/index.js'; -const TRANSPARENT = 'transparent'; - export const ThemeExtensionIdentifier = createIdentifier( 'AffineThemeExtension' ); @@ -52,9 +55,7 @@ export class ThemeService extends Extension { } get theme() { - return isInsideEdgelessEditor(this.std.host) - ? this.edgelessTheme - : this.appTheme; + return this.theme$.peek(); } get theme$() { @@ -94,24 +95,19 @@ export class ThemeService extends Extension { */ generateColorProperty( color: Color, - fallback = 'transparent', + fallback: Color = DefaultTheme.transparent, theme = this.theme ) { - let result: string | undefined = undefined; + const result = resolveColor(color, theme, resolveColor(fallback, theme)); - if (typeof color === 'object') { - result = color[theme] ?? color.normal; - } else { - result = color; - } - if (!result) { - result = fallback; - } + // Compatible old data if (result.startsWith('--')) { - return result.endsWith(TRANSPARENT) ? TRANSPARENT : `var(${result})`; + return result.endsWith('transparent') + ? DefaultTheme.transparent + : `var(${result})`; } - return result ?? TRANSPARENT; + return result; } /** @@ -132,35 +128,30 @@ export class ThemeService extends Extension { */ getColorValue( color: Color, - fallback = TRANSPARENT, + fallback: Color = DefaultTheme.transparent, real = false, theme = this.theme ) { - let result: string | undefined = undefined; + let result = resolveColor(color, theme, resolveColor(fallback, theme)); - if (typeof color === 'object') { - result = color[theme] ?? color.normal; - } else { - result = color; - } - if (!result) { - result = fallback; - } + // Compatible old data if (real && result.startsWith('--')) { - result = result.endsWith(TRANSPARENT) - ? TRANSPARENT + result = result.endsWith('transparent') + ? DefaultTheme.transparent : this.getCssVariableColor(result, theme); } - return result ?? TRANSPARENT; + return result ?? DefaultTheme.transparent; } getCssVariableColor(property: string, theme = this.theme) { + // Compatible old data if (property.startsWith('--')) { - if (property.endsWith(TRANSPARENT)) { - return TRANSPARENT; + if (property.endsWith('transparent')) { + return DefaultTheme.transparent; } const key = property as keyof AffineCssVariables; + // V1 theme const color = theme === ColorScheme.Dark ? combinedDarkCssVariables[key] diff --git a/blocksuite/affine/shared/src/theme/css-variables.ts b/blocksuite/affine/shared/src/theme/css-variables.ts index e609ef0fc0077..8b747b43be58f 100644 --- a/blocksuite/affine/shared/src/theme/css-variables.ts +++ b/blocksuite/affine/shared/src/theme/css-variables.ts @@ -1,6 +1,5 @@ /* CSS variables. You need to handle all places where `CSS variables` are marked. */ -import { LINE_COLORS } from '@blocksuite/affine-model'; import { type AffineCssVariables, type AffineTheme, @@ -65,7 +64,6 @@ export const ColorVariables = [ '--affine-tag-yellow', '--affine-tag-orange', '--affine-tag-gray', - ...LINE_COLORS, '--affine-tooltip', '--affine-blue', ]; diff --git a/blocksuite/affine/shared/src/utils/zod-schema.ts b/blocksuite/affine/shared/src/utils/zod-schema.ts index ef8ce0d68bdf3..1e929c64ba075 100644 --- a/blocksuite/affine/shared/src/utils/zod-schema.ts +++ b/blocksuite/affine/shared/src/utils/zod-schema.ts @@ -1,33 +1,24 @@ import { + ColorSchema, ConnectorMode, - DEFAULT_CONNECTOR_COLOR, - DEFAULT_CONNECTOR_TEXT_COLOR, DEFAULT_FRONT_END_POINT_STYLE, - DEFAULT_NOTE_BACKGROUND_COLOR, DEFAULT_NOTE_BORDER_SIZE, DEFAULT_NOTE_BORDER_STYLE, DEFAULT_NOTE_CORNER, DEFAULT_NOTE_SHADOW, DEFAULT_REAR_END_POINT_STYLE, DEFAULT_ROUGHNESS, - DEFAULT_SHAPE_FILL_COLOR, - DEFAULT_SHAPE_STROKE_COLOR, - DEFAULT_SHAPE_TEXT_COLOR, - DEFAULT_TEXT_COLOR, + DefaultTheme, FontFamily, FontStyle, FontWeight, LayoutType, - LineColorsSchema, LineWidth, MindmapStyle, - NoteBackgroundPaletteEnum, NoteDisplayMode, NoteShadowsSchema, - PaletteEnum, PointStyle, ShapeStyle, - StrokeColor, StrokeStyle, TextAlign, TextVerticalAlign, @@ -48,34 +39,17 @@ const ConnectorModeSchema = z.nativeEnum(ConnectorMode); const LayoutTypeSchema = z.nativeEnum(LayoutType); const MindmapStyleSchema = z.nativeEnum(MindmapStyle); -export const ColorSchema = z.union([ - z.object({ - normal: z.string(), - }), - z.object({ - light: z.string(), - dark: z.string(), - }), -]); -const ColorPaletteSchema = z.union([ColorSchema, PaletteEnum]); -const LineColorSchema = z.union([LineColorsSchema, ColorPaletteSchema]); -const TextColorSchema = z.union([LineColorsSchema, ColorPaletteSchema]); -const NoteBackgroundColorSchema = z.union([ - ColorSchema, - NoteBackgroundPaletteEnum, -]); - export const ConnectorSchema = z .object({ frontEndpointStyle: ConnectorEndpointSchema, rearEndpointStyle: ConnectorEndpointSchema, - stroke: LineColorSchema, + stroke: ColorSchema, strokeStyle: StrokeStyleSchema, strokeWidth: LineWidthSchema, rough: z.boolean(), mode: ConnectorModeSchema, labelStyle: z.object({ - color: TextColorSchema, + color: ColorSchema, fontSize: z.number(), fontFamily: FontFamilySchema, fontWeight: FontWeightSchema, @@ -86,13 +60,13 @@ export const ConnectorSchema = z .default({ frontEndpointStyle: DEFAULT_FRONT_END_POINT_STYLE, rearEndpointStyle: DEFAULT_REAR_END_POINT_STYLE, - stroke: DEFAULT_CONNECTOR_COLOR, + stroke: DefaultTheme.connectorColor, strokeStyle: StrokeStyle.Solid, strokeWidth: LineWidth.Two, rough: false, mode: ConnectorMode.Curve, labelStyle: { - color: DEFAULT_CONNECTOR_TEXT_COLOR, + color: DefaultTheme.black, fontSize: 16, fontFamily: FontFamily.Inter, fontWeight: FontWeight.Regular, @@ -103,18 +77,18 @@ export const ConnectorSchema = z export const BrushSchema = z .object({ - color: ColorPaletteSchema, + color: ColorSchema, lineWidth: LineWidthSchema, }) .default({ - color: StrokeColor.Black, + color: DefaultTheme.black, lineWidth: LineWidth.Four, }); const DEFAULT_SHAPE = { - color: DEFAULT_SHAPE_TEXT_COLOR, - fillColor: DEFAULT_SHAPE_FILL_COLOR, - strokeColor: DEFAULT_SHAPE_STROKE_COLOR, + color: DefaultTheme.shapeTextColor, + fillColor: DefaultTheme.shapeFillColor, + strokeColor: DefaultTheme.shapeStrokeColor, strokeStyle: StrokeStyle.Solid, strokeWidth: LineWidth.Two, shapeStyle: ShapeStyle.General, @@ -129,9 +103,9 @@ const DEFAULT_SHAPE = { }; const ShapeObject = { - color: TextColorSchema, - fillColor: ColorPaletteSchema, - strokeColor: ColorPaletteSchema, + color: ColorSchema, + fillColor: ColorSchema, + strokeColor: ColorSchema, strokeStyle: StrokeStyleSchema, strokeWidth: z.number(), shapeStyle: ShapeStyleSchema, @@ -155,7 +129,7 @@ export const RoundedShapeSchema = z export const TextSchema = z .object({ - color: TextColorSchema, + color: ColorSchema, fontSize: z.number(), fontFamily: FontFamilySchema, fontWeight: FontWeightSchema, @@ -163,7 +137,7 @@ export const TextSchema = z textAlign: TextAlignSchema, }) .default({ - color: DEFAULT_TEXT_COLOR, + color: DefaultTheme.textColor, fontSize: 24, fontFamily: FontFamily.Inter, fontWeight: FontWeight.Regular, @@ -173,14 +147,14 @@ export const TextSchema = z export const EdgelessTextSchema = z .object({ - color: TextColorSchema, + color: ColorSchema, fontFamily: FontFamilySchema, fontWeight: FontWeightSchema, fontStyle: FontStyleSchema, textAlign: TextAlignSchema, }) .default({ - color: DEFAULT_TEXT_COLOR, + color: DefaultTheme.textColor, fontFamily: FontFamily.Inter, fontWeight: FontWeight.Regular, fontStyle: FontStyle.Normal, @@ -189,7 +163,7 @@ export const EdgelessTextSchema = z export const NoteSchema = z .object({ - background: NoteBackgroundColorSchema, + background: ColorSchema, displayMode: NoteDisplayModeSchema, edgeless: z.object({ style: z.object({ @@ -201,7 +175,7 @@ export const NoteSchema = z }), }) .default({ - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, displayMode: NoteDisplayMode.EdgelessOnly, edgeless: { style: { @@ -225,7 +199,7 @@ export const MindmapSchema = z export const FrameSchema = z .object({ - background: ColorPaletteSchema.optional(), + background: ColorSchema.optional(), }) .default({}); diff --git a/blocksuite/blocks/package.json b/blocksuite/blocks/package.json index e1144c948e781..e6edd42cf4c3d 100644 --- a/blocksuite/blocks/package.json +++ b/blocksuite/blocks/package.json @@ -43,6 +43,7 @@ "html2canvas": "^1.4.1", "katex": "^0.16.11", "lit": "^3.2.0", + "lodash.isequal": "^4.5.0", "lz-string": "^1.5.0", "mdast-util-gfm-autolink-literal": "^2.0.1", "mdast-util-gfm-strikethrough": "^2.0.0", @@ -81,6 +82,7 @@ ], "devDependencies": { "@types/dompurify": "^3.0.5", - "@types/katex": "^0.16.7" + "@types/katex": "^0.16.7", + "@types/lodash.isequal": "^4.5.8" } } diff --git a/blocksuite/blocks/src/__tests__/adapters/html.unit.spec.ts b/blocksuite/blocks/src/__tests__/adapters/html.unit.spec.ts index 2de1f80c008f6..ef607443e9d7d 100644 --- a/blocksuite/blocks/src/__tests__/adapters/html.unit.spec.ts +++ b/blocksuite/blocks/src/__tests__/adapters/html.unit.spec.ts @@ -1,7 +1,4 @@ -import { - DEFAULT_NOTE_BACKGROUND_COLOR, - NoteDisplayMode, -} from '@blocksuite/affine-model'; +import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model'; import type { BlockSnapshot, DocSnapshot, @@ -94,7 +91,7 @@ describe('snapshot to html', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -160,7 +157,7 @@ describe('snapshot to html', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -226,7 +223,7 @@ describe('snapshot to html', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -292,7 +289,7 @@ describe('snapshot to html', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -478,7 +475,7 @@ describe('snapshot to html', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -623,7 +620,7 @@ describe('snapshot to html', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -728,7 +725,7 @@ describe('snapshot to html', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -802,7 +799,7 @@ describe('snapshot to html', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -876,7 +873,7 @@ describe('snapshot to html', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -951,7 +948,7 @@ describe('snapshot to html', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1026,7 +1023,7 @@ describe('snapshot to html', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1146,7 +1143,7 @@ describe('snapshot to html', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1207,7 +1204,7 @@ describe('snapshot to html', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1471,7 +1468,7 @@ describe('snapshot to html', () => { version: 1, props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1562,7 +1559,7 @@ describe('snapshot to html', () => { version: 1, props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: 'both', @@ -1955,7 +1952,7 @@ describe('html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1997,7 +1994,7 @@ describe('html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -2107,7 +2104,7 @@ describe('html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -2173,7 +2170,7 @@ describe('html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -2220,7 +2217,7 @@ describe('html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -2256,7 +2253,7 @@ describe('html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -2368,7 +2365,7 @@ describe('html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -2412,7 +2409,7 @@ describe('html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -2456,7 +2453,7 @@ describe('html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -2509,7 +2506,7 @@ describe('html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -2559,7 +2556,7 @@ describe('html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, diff --git a/blocksuite/blocks/src/__tests__/adapters/markdown.unit.spec.ts b/blocksuite/blocks/src/__tests__/adapters/markdown.unit.spec.ts index c44fa37ae975c..733e02a6ae944 100644 --- a/blocksuite/blocks/src/__tests__/adapters/markdown.unit.spec.ts +++ b/blocksuite/blocks/src/__tests__/adapters/markdown.unit.spec.ts @@ -1,7 +1,4 @@ -import { - DEFAULT_NOTE_BACKGROUND_COLOR, - NoteDisplayMode, -} from '@blocksuite/affine-model'; +import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model'; import type { BlockSnapshot, DocSnapshot, @@ -44,7 +41,7 @@ describe('snapshot to markdown', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -108,7 +105,7 @@ describe('snapshot to markdown', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -307,7 +304,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -455,7 +452,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -607,7 +604,7 @@ hhh version: 1, props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: 'both', @@ -750,7 +747,7 @@ hhh version: 1, props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: 'both', @@ -911,7 +908,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -983,7 +980,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1055,7 +1052,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1111,7 +1108,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1183,7 +1180,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1252,7 +1249,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1325,7 +1322,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1398,7 +1395,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1707,7 +1704,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1975,7 +1972,7 @@ hhh version: 1, props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: 'both', @@ -2348,7 +2345,7 @@ describe('markdown to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -2393,7 +2390,7 @@ describe('markdown to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: 'both', @@ -2444,7 +2441,7 @@ describe('markdown to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: 'both', @@ -2495,7 +2492,7 @@ describe('markdown to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: 'both', @@ -2558,7 +2555,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -2728,7 +2725,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -2864,7 +2861,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -2998,7 +2995,7 @@ bbb flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -3099,7 +3096,7 @@ bbb flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -3153,7 +3150,7 @@ bbb flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: 'both', @@ -3206,7 +3203,7 @@ bbb flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -3256,7 +3253,7 @@ bbb flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -3307,7 +3304,7 @@ bbb flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -3358,7 +3355,7 @@ bbb flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -3412,7 +3409,7 @@ bbb flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -3530,7 +3527,7 @@ bbb flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -3571,7 +3568,7 @@ bbb flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -3622,7 +3619,7 @@ bbb flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -3673,7 +3670,7 @@ hhh flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: '--affine-note-background-white', + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: 'both', diff --git a/blocksuite/blocks/src/__tests__/adapters/notion-html.unit.spec.ts b/blocksuite/blocks/src/__tests__/adapters/notion-html.unit.spec.ts index e2a04090250dd..c98ce10617f37 100644 --- a/blocksuite/blocks/src/__tests__/adapters/notion-html.unit.spec.ts +++ b/blocksuite/blocks/src/__tests__/adapters/notion-html.unit.spec.ts @@ -1,7 +1,4 @@ -import { - DEFAULT_NOTE_BACKGROUND_COLOR, - NoteDisplayMode, -} from '@blocksuite/affine-model'; +import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model'; import { AssetsManager, type BlockSnapshot, @@ -29,7 +26,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -84,7 +81,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -199,7 +196,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -365,7 +362,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -810,7 +807,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -939,7 +936,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1040,7 +1037,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1089,7 +1086,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1158,7 +1155,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1207,7 +1204,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1254,7 +1251,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1298,7 +1295,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1422,7 +1419,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1701,7 +1698,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: 'both', @@ -1894,7 +1891,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1935,7 +1932,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -1977,7 +1974,7 @@ describe('notion html to snapshot', () => { test('inline style', async () => { const html = `

- strong italic underline strikethrough code + strong italic underline strikethrough code

`; @@ -1987,7 +1984,7 @@ describe('notion html to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, diff --git a/blocksuite/blocks/src/__tests__/adapters/notion-text.unit.spec.ts b/blocksuite/blocks/src/__tests__/adapters/notion-text.unit.spec.ts index 1dd7ca1043215..f3818f8b3b08f 100644 --- a/blocksuite/blocks/src/__tests__/adapters/notion-text.unit.spec.ts +++ b/blocksuite/blocks/src/__tests__/adapters/notion-text.unit.spec.ts @@ -1,4 +1,4 @@ -import { DEFAULT_NOTE_BACKGROUND_COLOR } from '@blocksuite/affine-model'; +import { DefaultTheme } from '@blocksuite/affine-model'; import type { SliceSnapshot } from '@blocksuite/store'; import { describe, expect, test } from 'vitest'; @@ -20,7 +20,7 @@ describe('notion-text to snapshot', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: 'both', diff --git a/blocksuite/blocks/src/__tests__/adapters/plain-text.unit.spec.ts b/blocksuite/blocks/src/__tests__/adapters/plain-text.unit.spec.ts index c7590edc49a27..92d40d234fddc 100644 --- a/blocksuite/blocks/src/__tests__/adapters/plain-text.unit.spec.ts +++ b/blocksuite/blocks/src/__tests__/adapters/plain-text.unit.spec.ts @@ -1,7 +1,4 @@ -import { - DEFAULT_NOTE_BACKGROUND_COLOR, - NoteDisplayMode, -} from '@blocksuite/affine-model'; +import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model'; import type { BlockSnapshot, DocSnapshot, @@ -41,7 +38,7 @@ describe('snapshot to plain text', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -194,7 +191,7 @@ describe('snapshot to plain text', () => { version: 1, props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -350,7 +347,7 @@ describe('snapshot to plain text', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -420,7 +417,7 @@ describe('snapshot to plain text', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -483,7 +480,7 @@ describe('snapshot to plain text', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -649,7 +646,7 @@ describe('snapshot to plain text', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -712,7 +709,7 @@ describe('snapshot to plain text', () => { version: 1, props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -802,7 +799,7 @@ describe('snapshot to plain text', () => { version: 1, props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: 'both', @@ -1161,7 +1158,7 @@ describe('snapshot to plain text', () => { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, diff --git a/blocksuite/blocks/src/_common/adapters/html-adapter/delta-converter/html-inline.ts b/blocksuite/blocks/src/_common/adapters/html-adapter/delta-converter/html-inline.ts index 7a0d9103225c0..3077759f59756 100644 --- a/blocksuite/blocks/src/_common/adapters/html-adapter/delta-converter/html-inline.ts +++ b/blocksuite/blocks/src/_common/adapters/html-adapter/delta-converter/html-inline.ts @@ -37,7 +37,7 @@ export const htmlTextToDeltaMatcher: HtmlASTToDeltaMatcher = { export const htmlTextLikeElementToDeltaMatcher: HtmlASTToDeltaMatcher = { name: 'text-like-element', - match: ast => isElement(ast) && textLikeElementTags.has(ast.tagName), + match: ast => isElement(ast) && textLikeElementTags.includes(ast.tagName), toDelta: (ast, context) => { if (!isElement(ast)) { return []; diff --git a/blocksuite/blocks/src/_common/adapters/html-adapter/html.ts b/blocksuite/blocks/src/_common/adapters/html-adapter/html.ts index 6c77f8054d200..8bedaaf611e8b 100644 --- a/blocksuite/blocks/src/_common/adapters/html-adapter/html.ts +++ b/blocksuite/blocks/src/_common/adapters/html-adapter/html.ts @@ -1,7 +1,4 @@ -import { - DEFAULT_NOTE_BACKGROUND_COLOR, - NoteDisplayMode, -} from '@blocksuite/affine-model'; +import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model'; import { type AdapterContext, type BlockHtmlAdapterMatcher, @@ -259,7 +256,7 @@ export class HtmlAdapter extends BaseAdapter { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -284,7 +281,7 @@ export class HtmlAdapter extends BaseAdapter { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -344,7 +341,7 @@ export class HtmlAdapter extends BaseAdapter { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, diff --git a/blocksuite/blocks/src/_common/adapters/markdown/markdown.ts b/blocksuite/blocks/src/_common/adapters/markdown/markdown.ts index 36805f19f08b1..6af5cac09ed79 100644 --- a/blocksuite/blocks/src/_common/adapters/markdown/markdown.ts +++ b/blocksuite/blocks/src/_common/adapters/markdown/markdown.ts @@ -1,7 +1,4 @@ -import { - DEFAULT_NOTE_BACKGROUND_COLOR, - NoteDisplayMode, -} from '@blocksuite/affine-model'; +import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model'; import { type AdapterContext, type BlockMarkdownAdapterMatcher, @@ -270,7 +267,7 @@ export class MarkdownAdapter extends BaseAdapter { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -294,7 +291,7 @@ export class MarkdownAdapter extends BaseAdapter { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -413,7 +410,7 @@ export class MarkdownAdapter extends BaseAdapter { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, diff --git a/blocksuite/blocks/src/_common/adapters/mix-text.ts b/blocksuite/blocks/src/_common/adapters/mix-text.ts index f082fa742940b..2ddca77162aab 100644 --- a/blocksuite/blocks/src/_common/adapters/mix-text.ts +++ b/blocksuite/blocks/src/_common/adapters/mix-text.ts @@ -1,7 +1,4 @@ -import { - DEFAULT_NOTE_BACKGROUND_COLOR, - NoteDisplayMode, -} from '@blocksuite/affine-model'; +import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model'; import type { ExtensionType } from '@blocksuite/block-std'; import type { DeltaInsert } from '@blocksuite/inline'; import { @@ -164,7 +161,7 @@ export class MixTextAdapter extends BaseAdapter { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -231,7 +228,7 @@ export class MixTextAdapter extends BaseAdapter { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -284,7 +281,7 @@ export class MixTextAdapter extends BaseAdapter { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, diff --git a/blocksuite/blocks/src/_common/adapters/notion-html/notion-html.ts b/blocksuite/blocks/src/_common/adapters/notion-html/notion-html.ts index 885da785cc619..ed7e52cabb8ee 100644 --- a/blocksuite/blocks/src/_common/adapters/notion-html/notion-html.ts +++ b/blocksuite/blocks/src/_common/adapters/notion-html/notion-html.ts @@ -1,7 +1,4 @@ -import { - DEFAULT_NOTE_BACKGROUND_COLOR, - NoteDisplayMode, -} from '@blocksuite/affine-model'; +import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model'; import { type AdapterContext, type BlockNotionHtmlAdapterMatcher, @@ -165,7 +162,7 @@ export class NotionHtmlAdapter extends BaseAdapter { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -196,7 +193,7 @@ export class NotionHtmlAdapter extends BaseAdapter { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -257,7 +254,7 @@ export class NotionHtmlAdapter extends BaseAdapter { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, diff --git a/blocksuite/blocks/src/_common/adapters/notion-text.ts b/blocksuite/blocks/src/_common/adapters/notion-text.ts index fe681f0e0d9a9..195cf6e2cd62e 100644 --- a/blocksuite/blocks/src/_common/adapters/notion-text.ts +++ b/blocksuite/blocks/src/_common/adapters/notion-text.ts @@ -1,4 +1,4 @@ -import { DEFAULT_NOTE_BACKGROUND_COLOR } from '@blocksuite/affine-model'; +import { DefaultTheme } from '@blocksuite/affine-model'; import type { AffineTextAttributes } from '@blocksuite/affine-shared/types'; import type { ExtensionType } from '@blocksuite/block-std'; import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions'; @@ -127,7 +127,7 @@ export class NotionTextAdapter extends BaseAdapter { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: 'both', diff --git a/blocksuite/blocks/src/_common/adapters/plain-text/plain-text.ts b/blocksuite/blocks/src/_common/adapters/plain-text/plain-text.ts index 89728ccf83d2a..c2a27d759a3b9 100644 --- a/blocksuite/blocks/src/_common/adapters/plain-text/plain-text.ts +++ b/blocksuite/blocks/src/_common/adapters/plain-text/plain-text.ts @@ -1,7 +1,4 @@ -import { - DEFAULT_NOTE_BACKGROUND_COLOR, - NoteDisplayMode, -} from '@blocksuite/affine-model'; +import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model'; import { type AdapterContext, type BlockPlainTextAdapterMatcher, @@ -159,7 +156,7 @@ export class PlainTextAdapter extends BaseAdapter { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -226,7 +223,7 @@ export class PlainTextAdapter extends BaseAdapter<PlainText> { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, @@ -269,7 +266,7 @@ export class PlainTextAdapter extends BaseAdapter<PlainText> { flavour: 'affine:note', props: { xywh: '[0,0,800,95]', - background: DEFAULT_NOTE_BACKGROUND_COLOR, + background: DefaultTheme.noteBackgrounColor, index: 'a0', hidden: false, displayMode: NoteDisplayMode.DocAndEdgeless, diff --git a/blocksuite/blocks/src/frame-block/frame-block.ts b/blocksuite/blocks/src/frame-block/frame-block.ts index 1250575cf2389..7ceb70be7badd 100644 --- a/blocksuite/blocks/src/frame-block/frame-block.ts +++ b/blocksuite/blocks/src/frame-block/frame-block.ts @@ -62,7 +62,7 @@ export class FrameBlockComponent extends GfxBlockComponent<FrameBlockModel> { const { model, showBorder, rootService, std } = this; const backgroundColor = std .get(ThemeProvider) - .generateColorProperty(model.background, '--affine-platte-transparent'); + .generateColorProperty(model.background, 'transparent'); const _isNavigator = this.gfx.tool.currentToolName$.value === 'frameNavigator'; const frameIndex = rootService.layer.getZIndex(model); diff --git a/blocksuite/blocks/src/note-block/note-edgeless-block.ts b/blocksuite/blocks/src/note-block/note-edgeless-block.ts index 1250ffa41f92c..75ac584a74773 100644 --- a/blocksuite/blocks/src/note-block/note-edgeless-block.ts +++ b/blocksuite/blocks/src/note-block/note-edgeless-block.ts @@ -1,8 +1,7 @@ -/* eslint-disable @typescript-eslint/no-non-null-assertion */ import { MoreIndicatorIcon } from '@blocksuite/affine-components/icons'; import type { NoteBlockModel } from '@blocksuite/affine-model'; import { - DEFAULT_NOTE_BACKGROUND_COLOR, + DefaultTheme, NoteDisplayMode, StrokeStyle, } from '@blocksuite/affine-model'; @@ -24,6 +23,7 @@ import { WithDisposable, } from '@blocksuite/global/utils'; import type { BlockModel } from '@blocksuite/store'; +import { computed } from '@preact/signals-core'; import { css, html, nothing } from 'lit'; import { property, query, state } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; @@ -142,6 +142,16 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent( } `; + private readonly _backgroundColor$ = computed(() => { + const themeProvider = this.std.get(ThemeProvider); + const theme = themeProvider.theme$.value; + return themeProvider.generateColorProperty( + this.model.background$.value, + DefaultTheme.noteBackgrounColor, + theme + ); + }); + private get _isShowCollapsedContent() { return this.model.edgeless.collapse && (this._isResizing || this._isHover); } @@ -403,9 +413,6 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent( }; const extra = this._editing ? ACTIVE_NOTE_EXTRA_PADDING : 0; - const backgroundColor = this.std - .get(ThemeProvider) - .generateColorProperty(model.background, DEFAULT_NOTE_BACKGROUND_COLOR); const backgroundStyle = { position: 'absolute', @@ -417,7 +424,7 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent( transition: this._editing ? 'left 0.3s, top 0.3s, width 0.3s, height 0.3s' : 'none', - backgroundColor, + backgroundColor: this._backgroundColor$.value, border: `${borderSize}px ${ borderStyle === StrokeStyle.Dash ? 'dashed' : borderStyle } var(--affine-black-10)`, diff --git a/blocksuite/blocks/src/root-block/clipboard/index.ts b/blocksuite/blocks/src/root-block/clipboard/index.ts index 75b7d651d83c2..4ef68c193a7ce 100644 --- a/blocksuite/blocks/src/root-block/clipboard/index.ts +++ b/blocksuite/blocks/src/root-block/clipboard/index.ts @@ -49,9 +49,9 @@ export class PageClipboard { 'image/png', 'image/svg+xml', 'image/webp', - ].forEach(type => - this._std.clipboard.registerAdapter(type, ImageAdapter, 80) - ); + ].forEach(type => { + this._std.clipboard.registerAdapter(type, ImageAdapter, 80); + }); this._std.clipboard.registerAdapter('text/plain', MixTextAdapter, 70); this._std.clipboard.registerAdapter('*/*', AttachmentAdapter, 60); const copy = copyMiddleware(this._std); @@ -74,7 +74,9 @@ export class PageClipboard { 'image/png', 'image/svg+xml', 'image/webp', - ].forEach(type => this._std.clipboard.unregisterAdapter(type)); + ].forEach(type => { + this._std.clipboard.unregisterAdapter(type); + }); this._std.clipboard.unregisterAdapter('text/html'); this._std.clipboard.unregisterAdapter('*/*'); this._std.clipboard.unuse(copy); diff --git a/blocksuite/blocks/src/root-block/edgeless/components/auto-complete/auto-complete-panel.ts b/blocksuite/blocks/src/root-block/edgeless/components/auto-complete/auto-complete-panel.ts index 6ae2f07a8e66a..06cb3f972639b 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/auto-complete/auto-complete-panel.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/auto-complete/auto-complete-panel.ts @@ -13,11 +13,8 @@ import type { ShapeElementModel, } from '@blocksuite/affine-model'; import { - DEFAULT_NOTE_BACKGROUND_COLOR, DEFAULT_NOTE_WIDTH, - DEFAULT_SHAPE_FILL_COLOR, - DEFAULT_SHAPE_STROKE_COLOR, - DEFAULT_TEXT_COLOR, + DefaultTheme, FontFamily, FontStyle, FontWeight, @@ -279,7 +276,7 @@ export class EdgelessAutoCompletePanel extends WithDisposable(LitElement) { textAlign: 'left', fontSize: 24, fontFamily: FontFamily.Inter, - color: DEFAULT_TEXT_COLOR, + color: DefaultTheme.textColor, fontWeight: FontWeight.Regular, fontStyle: FontStyle.Normal, }); @@ -470,7 +467,7 @@ export class EdgelessAutoCompletePanel extends WithDisposable(LitElement) { .getColorValue( this.edgeless.std.get(EditPropsStore).lastProps$.value['affine:note'] .background, - DEFAULT_NOTE_BACKGROUND_COLOR, + DefaultTheme.noteBackgrounColor, true ); this._overlay = new AutoCompleteNoteOverlay(this.gfx, xywh, background); @@ -511,10 +508,10 @@ export class EdgelessAutoCompletePanel extends WithDisposable(LitElement) { const stroke = this.edgeless.std .get(ThemeProvider) - .getColorValue(strokeColor, DEFAULT_SHAPE_STROKE_COLOR, true); + .getColorValue(strokeColor, DefaultTheme.shapeStrokeColor, true); const fill = this.edgeless.std .get(ThemeProvider) - .getColorValue(fillColor, DEFAULT_SHAPE_FILL_COLOR, true); + .getColorValue(fillColor, DefaultTheme.shapeFillColor, true); const options = { seed: 666, diff --git a/blocksuite/blocks/src/root-block/edgeless/components/auto-complete/edgeless-auto-complete.ts b/blocksuite/blocks/src/root-block/edgeless/components/auto-complete/edgeless-auto-complete.ts index 14acc7b094d13..ad5e26448905c 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/auto-complete/edgeless-auto-complete.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/auto-complete/edgeless-auto-complete.ts @@ -20,7 +20,7 @@ import type { } from '@blocksuite/affine-model'; import { DEFAULT_NOTE_HEIGHT, - DEFAULT_SHAPE_STROKE_COLOR, + DefaultTheme, LayoutType, MindmapElementModel, ShapeElementModel, @@ -636,7 +636,7 @@ export class EdgelessAutoComplete extends WithDisposable(LitElement) { this._autoCompleteOverlay.stroke = surface.renderer.getColorValue( current.strokeColor, - DEFAULT_SHAPE_STROKE_COLOR, + DefaultTheme.shapeStrokeColor, true ); this._autoCompleteOverlay.linePoints = path; diff --git a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/button.ts b/blocksuite/blocks/src/root-block/edgeless/components/color-picker/button.ts index 5b2435415d078..e71578d5d654e 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/button.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/color-picker/button.ts @@ -1,4 +1,6 @@ import type { EditorMenuButton } from '@blocksuite/affine-components/toolbar'; +import type { ColorScheme, Palette } from '@blocksuite/affine-model'; +import { resolveColor } from '@blocksuite/affine-model'; import { WithDisposable } from '@blocksuite/global/utils'; import { html, LitElement } from 'lit'; import { property, query, state } from 'lit/decorators.js'; @@ -7,19 +9,14 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import { styleMap } from 'lit/directives/style-map.js'; import type { ColorEvent } from '../panel/color-panel.js'; -import type { - ModeType, - PickColorDetail, - PickColorEvent, - PickColorType, -} from './types.js'; +import type { ModeType, PickColorEvent, PickColorType } from './types.js'; import { keepColor, preprocessColor, rgbaToHex8 } from './utils.js'; type Type = 'normal' | 'custom'; export class EdgelessColorPickerButton extends WithDisposable(LitElement) { readonly #select = (e: ColorEvent) => { - this.#pick({ palette: e.detail }); + this.#pick(e.detail); }; switchToCustomTab = (e: MouseEvent) => { @@ -69,14 +66,16 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) { } get isCustomColor() { - return !this.palettes.includes(this.color); + return !this.palettes + .map(({ value }) => resolveColor(value, this.theme)) + .includes(this.color); } get tabContentPadding() { return `${this.tabType === 'custom' ? 0 : 8}px`; } - #pick(detail: PickColorDetail) { + #pick(detail: Palette) { this.pick?.({ type: 'start' }); this.pick?.({ type: 'pick', detail }); this.pick?.({ type: 'end' }); @@ -126,8 +125,8 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) { role="listbox" class=${ifDefined(this.colorPanelClass)} .value=${this.color} + .theme=${this.theme} .palettes=${this.palettes} - .options=${this.palettes} .hollowCircle=${this.hollowCircle} .openColorPicker=${this.switchToCustomTab} .hasTransparent=${false} @@ -189,7 +188,7 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) { accessor menuButton!: EditorMenuButton; @property({ attribute: false }) - accessor palettes: string[] = []; + accessor palettes: Palette[] = []; @property({ attribute: false }) accessor pick!: (event: PickColorEvent) => void; @@ -197,6 +196,9 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) { @state() accessor tabType: Type = 'normal'; + @property({ attribute: false }) + accessor theme!: ColorScheme; + @property() accessor tooltip: string | undefined = undefined; } diff --git a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/color-picker.ts b/blocksuite/blocks/src/root-block/edgeless/components/color-picker/color-picker.ts index 9e92317922495..32398e604f45e 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/color-picker.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/color-picker/color-picker.ts @@ -1,3 +1,4 @@ +import type { Color } from '@blocksuite/affine-model'; import { on, once, stopPropagation } from '@blocksuite/affine-shared/utils'; import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils'; import { batch, computed, signal } from '@preact/signals-core'; @@ -111,15 +112,15 @@ export class EdgelessColorPicker extends SignalWatcher( #pick() { const hsva = this.hsva$.peek(); const type = this.modeType$.peek(); - const detail = { [type]: hsvaToHex8(hsva) }; + const value = { [type]: hsvaToHex8(hsva) }; + const key = 'Custom'; if (type !== 'normal') { const another = type === 'light' ? 'dark' : 'light'; const { hsva } = this[`${another}$`].peek(); - detail[another] = hsvaToHex8(hsva); + value[another] = hsvaToHex8(hsva); } - - this.pick?.({ type: 'pick', detail }); + this.pick?.({ type: 'pick', detail: { key, value: value as Color } }); } #pickEnd() { @@ -398,8 +399,7 @@ export class EdgelessColorPicker extends SignalWatcher( // Updates modes if (modes?.length) { batches.push(() => { - // eslint-disable-next-line sonarjs/no-ignored-return - this.modes$.value.reduce((fallback, curr, n) => { + this.modes$.value = this.modes$.value.reduce((fallback, curr, n) => { const m = modes[n]; curr.hsva = m ? rgbaToHsva(m.rgba) : fallback; return { ...curr.hsva }; diff --git a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/consts.ts b/blocksuite/blocks/src/root-block/edgeless/components/color-picker/consts.ts index af975f57a1bdf..ddb22e0cf769a 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/consts.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/color-picker/consts.ts @@ -11,8 +11,7 @@ export const COLORS: [Rgb, number][] = [ [{ r: 0, g: 1, b: 1 }, 3 / 6], [{ r: 0, g: 0, b: 1 }, 4 / 6], [{ r: 1, g: 0, b: 1 }, 5 / 6], - // eslint-disable-next-line sonarjs/no-identical-expressions - [{ r: 1, g: 0, b: 0 }, 6 / 6], + [{ r: 1, g: 0, b: 0 }, 1], ]; export const FIRST_COLOR = COLORS[0][0]; diff --git a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/custom-button.ts b/blocksuite/blocks/src/root-block/edgeless/components/color-picker/custom-button.ts index 72a4bdde44147..41bd64373c597 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/custom-button.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/color-picker/custom-button.ts @@ -11,6 +11,7 @@ export class EdgelessColorCustomButton extends LitElement { height: 24px; cursor: pointer; } + :host([active]):after { position: absolute; display: block; diff --git a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/types.ts b/blocksuite/blocks/src/root-block/edgeless/components/color-picker/types.ts index 820a6306cf99a..f9d8534867749 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/types.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/color-picker/types.ts @@ -1,6 +1,6 @@ // https://www.w3.org/TR/css-color-4/ -import type { ColorScheme } from '@blocksuite/affine-model'; +import type { ColorScheme, Palette } from '@blocksuite/affine-model'; // Red, green, blue. All in the range [0, 1]. export type Rgb = { @@ -48,8 +48,6 @@ export type ModeRgba = { type: ModeType; rgba: Rgba }; export type PickColorType = 'palette' | ModeType; -export type PickColorDetail = Partial<Record<PickColorType, string>>; - export type PickColorEvent = | { type: 'start' | 'end' } - | { type: 'pick'; detail: PickColorDetail }; + | { type: 'pick'; detail: Palette }; diff --git a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/utils.ts b/blocksuite/blocks/src/root-block/edgeless/components/color-picker/utils.ts index 3d03f55f1c9ee..cf50d18ab47ff 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/utils.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/color-picker/utils.ts @@ -7,7 +7,6 @@ import type { Hsv, Hsva, ModeType, - PickColorDetail, PickColorType, Point, Rgb, @@ -269,12 +268,13 @@ export const preprocessColor = (style: CSSStyleDeclaration) => { * * ```json * { 'fillColor': '--affine-palette-shape-yellow' } + * { 'fillColor': '#ffffff' } * { 'fillColor': { normal: '#ffffffff' }} * { 'fillColor': { light: '#fff000ff', 'dark': '#0000fff00' }} * ``` */ -export const packColor = (key: string, detail: PickColorDetail) => { - return { [key]: detail.palette ?? detail }; +export const packColor = (key: string, color: Color) => { + return { [key]: typeof color === 'object' ? { ...color } : color }; }; /** @@ -298,10 +298,14 @@ export const packColorsWithColorScheme = ( let type: PickColorType = 'palette'; if (typeof oldColor === 'object') { - type = colorScheme in oldColor ? colorScheme : 'normal'; - colors[0].value = oldColor.normal ?? value; - colors[1].value = oldColor.light ?? value; - colors[2].value = oldColor.dark ?? value; + if ('normal' in oldColor) { + type = 'normal'; + colors[0].value = oldColor.normal ?? value; + } else { + type = colorScheme; + colors[1].value = oldColor.light ?? value; + colors[2].value = oldColor.dark ?? value; + } } return { type, colors }; 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 7d33780eaa411..a35cb57f8e6bf 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 @@ -1,12 +1,15 @@ -import { Black, ColorScheme, PALETTES, White } from '@blocksuite/affine-model'; +import type { Color, ColorScheme, Palette } from '@blocksuite/affine-model'; +import { isTransparent, resolveColor } from '@blocksuite/affine-model'; import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme'; import { css, html, LitElement, nothing, svg, type TemplateResult } from 'lit'; import { property } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; +import { ifDefined } from 'lit/directives/if-defined.js'; import { repeat } from 'lit/directives/repeat.js'; +import isEqual from 'lodash.isequal'; export class ColorEvent extends Event { - detail: string; + detail: Palette; constructor( type: string, @@ -14,21 +17,13 @@ export class ColorEvent extends Event { detail, composed, bubbles, - }: { detail: string; composed: boolean; bubbles: boolean } + }: { detail: Palette; composed: boolean; bubbles: boolean } ) { super(type, { bubbles, composed }); this.detail = detail; } } -export const GET_DEFAULT_LINE_COLOR = (theme: ColorScheme) => { - return theme === ColorScheme.Dark ? White : Black; -}; - -export function isTransparent(color: string) { - return color.toLowerCase().endsWith('transparent'); -} - function TransparentIcon(hollowCircle = false) { const CircleIcon: TemplateResult | typeof nothing = hollowCircle ? svg`<circle cx="10" cy="10" r="8" fill="white" />` @@ -167,18 +162,14 @@ export class EdgelessColorButton extends LitElement { `; get preprocessColor() { - const color = this.color; - return color.startsWith('--') ? `var(${color})` : color; + const value = resolveColor(this.color, this.theme); + return value.startsWith('--') ? `var(${value})` : value; } override render() { - const { color, preprocessColor, hollowCircle, letter } = this; + const { label, preprocessColor, hollowCircle } = this; const additionIcon = AdditionIcon(preprocessColor, !!hollowCircle); - return html`<div - class="color-unit" - aria-label=${color} - data-letter=${letter ? 'A' : nothing} - > + return html`<div class="color-unit" aria-label=${ifDefined(label)}> ${additionIcon} </div>`; } @@ -187,13 +178,16 @@ export class EdgelessColorButton extends LitElement { accessor active: boolean = false; @property({ attribute: false }) - accessor color!: string; + accessor color!: Color; @property({ attribute: false }) accessor hollowCircle: boolean = false; @property({ attribute: false }) - accessor letter: boolean | undefined = undefined; + accessor label: string | undefined = undefined; + + @property({ attribute: false }) + accessor theme!: ColorScheme; } export class EdgelessColorPanel extends LitElement { @@ -221,35 +215,37 @@ export class EdgelessColorPanel extends LitElement { } `; - onSelect(value: string) { + onSelect(palette: Palette) { this.dispatchEvent( new ColorEvent('select', { - detail: value, + detail: palette, composed: true, bubbles: true, }) ); - this.value = value; } override render() { return html` ${repeat( this.palettes, - color => color, - color => - html`<edgeless-color-button - class=${classMap({ - large: true, - black: color.startsWith('--') && color.endsWith('black'), - })} - .color=${color} - .letter=${this.showLetterMark} + palette => palette.key, + palette => { + const resolvedColor = resolveColor(palette.value, this.theme); + return html`<edgeless-color-button + class=${classMap({ large: true })} + .label=${palette.key} + .color=${palette.value} + .theme=${this.theme} .hollowCircle=${this.hollowCircle} - ?active=${color === this.value} - @click=${() => this.onSelect(color)} + ?active=${isEqual(resolvedColor, this.value)} + @click=${() => { + this.onSelect(palette); + this.value = resolvedColor; + }} > - </edgeless-color-button>` + </edgeless-color-button>`; + } )} <slot name="custom"></slot> `; @@ -265,10 +261,10 @@ export class EdgelessColorPanel extends LitElement { accessor openColorPicker!: (e: MouseEvent) => void; @property({ type: Array }) - accessor palettes: readonly string[] = PALETTES; + accessor palettes: readonly Palette[] = []; @property({ attribute: false }) - accessor showLetterMark = false; + accessor theme!: ColorScheme; @property({ attribute: false }) accessor value: string | null = null; diff --git a/blocksuite/blocks/src/root-block/edgeless/components/panel/line-styles-panel.ts b/blocksuite/blocks/src/root-block/edgeless/components/panel/line-styles-panel.ts index 7a43bd5064405..a973368569bcd 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/panel/line-styles-panel.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/line-styles-panel.ts @@ -3,7 +3,7 @@ import { DashLineIcon, StraightLineIcon, } from '@blocksuite/affine-components/icons'; -import { type LineWidth, StrokeStyle } from '@blocksuite/affine-model'; +import { LineWidth, StrokeStyle } from '@blocksuite/affine-model'; import { html } from 'lit'; import { classMap } from 'lit/directives/class-map.js'; import { repeat } from 'lit/directives/repeat.js'; @@ -47,14 +47,14 @@ const LINE_STYLE_LIST = [ export function LineStylesPanel({ onClick, - selectedLineSize, selectedLineStyle, + selectedLineSize = LineWidth.Two, lineStyles = [StrokeStyle.Solid, StrokeStyle.Dash, StrokeStyle.None], }: LineStylesPanelProps = {}) { const lineSizePanel = html` <edgeless-line-width-panel - .selectedSize=${selectedLineSize as LineWidth} - .disable=${selectedLineStyle === StrokeStyle.None} + ?disabled=${selectedLineStyle === StrokeStyle.None} + .selectedSize=${selectedLineSize} @select=${(e: LineWidthEvent) => { onClick?.({ type: 'size', @@ -69,15 +69,15 @@ export function LineStylesPanel({ item => item.value, ({ name, icon, value }) => { const active = selectedLineStyle === value; - const classes: Record<string, boolean> = { + const classInfo = { 'line-style-button': true, [`mode-${value}`]: true, }; - if (active) classes['active'] = true; + if (active) classInfo['active'] = true; return html` <edgeless-tool-icon-button - class=${classMap(classes)} + class=${classMap(classInfo)} .active=${active} .activeMode=${'background'} .tooltip=${name} diff --git a/blocksuite/blocks/src/root-block/edgeless/components/panel/stroke-style-panel.ts b/blocksuite/blocks/src/root-block/edgeless/components/panel/stroke-style-panel.ts index 46ec90f01424b..3fa4e5689e1eb 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/panel/stroke-style-panel.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/stroke-style-panel.ts @@ -1,4 +1,8 @@ -import { PALETTES, type StrokeStyle } from '@blocksuite/affine-model'; +import { + type ColorScheme, + DefaultTheme, + type StrokeStyle, +} from '@blocksuite/affine-model'; import { WithDisposable } from '@blocksuite/global/utils'; import { css, html, LitElement } from 'lit'; import { property } from 'lit/decorators.js'; @@ -38,8 +42,9 @@ export class StrokeStylePanel extends WithDisposable(LitElement) { <edgeless-color-panel role="listbox" aria-label="Border colors" - .palettes=${PALETTES} .value=${this.strokeColor} + .theme=${this.theme} + .palettes=${DefaultTheme.palettes} .hollowCircle=${this.hollowCircle} @select=${(e: ColorEvent) => this.setStrokeColor(e)} > @@ -64,6 +69,9 @@ export class StrokeStylePanel extends WithDisposable(LitElement) { @property({ attribute: false }) accessor strokeWidth!: number; + + @property({ attribute: false }) + accessor theme!: ColorScheme; } declare global { diff --git a/blocksuite/blocks/src/root-block/edgeless/components/text/edgeless-connector-label-editor.ts b/blocksuite/blocks/src/root-block/edgeless/components/text/edgeless-connector-label-editor.ts index 3d5af296ae5f9..440514ae9ce4f 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/text/edgeless-connector-label-editor.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/text/edgeless-connector-label-editor.ts @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/no-non-null-assertion */ import { TextUtils } from '@blocksuite/affine-block-surface'; import type { RichText } from '@blocksuite/affine-components/rich-text'; import type { ConnectorElementModel } from '@blocksuite/affine-model'; diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/brush-menu.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/brush-menu.ts index a16c9c4703fe5..aa9f1370df83d 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/brush-menu.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/brush-menu.ts @@ -1,4 +1,4 @@ -import { STROKE_COLORS } from '@blocksuite/affine-model'; +import { DefaultTheme } from '@blocksuite/affine-model'; import { EditPropsStore, ThemeProvider, @@ -9,10 +9,7 @@ import { computed } from '@preact/signals-core'; import { css, html, LitElement } from 'lit'; import { property } from 'lit/decorators.js'; -import { - type ColorEvent, - GET_DEFAULT_LINE_COLOR, -} from '../../panel/color-panel.js'; +import type { ColorEvent } from '../../panel/color-panel.js'; import type { LineWidthEvent } from '../../panel/line-width-panel.js'; import { EdgelessToolbarToolMixin } from '../mixins/tool.mixin.js'; @@ -46,14 +43,13 @@ export class EdgelessBrushMenu extends EdgelessToolbarToolMixin( }; }); + private readonly _theme$ = computed(() => { + return this.edgeless.std.get(ThemeProvider).theme$.value; + }); + type: GfxToolsFullOptionValue['type'] = 'brush'; override render() { - const theme = this.edgeless.std.get(ThemeProvider).theme; - const color = this.edgeless.std - .get(ThemeProvider) - .getColorValue(this._props$.value.color, GET_DEFAULT_LINE_COLOR(theme)); - return html` <edgeless-slide-menu> <div class="menu-content"> @@ -66,12 +62,14 @@ export class EdgelessBrushMenu extends EdgelessToolbarToolMixin( <menu-divider .vertical=${true}></menu-divider> <edgeless-color-panel class="one-way" - .value=${color} - .palettes=${STROKE_COLORS} + .value=${this._props$.value.color} + .theme=${this._theme$.value} + .palettes=${DefaultTheme.globalToolbarPalettes} .hasTransparent=${!this.edgeless.doc.awarenessStore.getFlag( 'enable_color_picker' )} - @select=${(e: ColorEvent) => this.onChange({ color: e.detail })} + @select=${(e: ColorEvent) => + this.onChange({ color: e.detail.value })} ></edgeless-color-panel> </div> </edgeless-slide-menu> diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts index a34ba4cc22d8d..46c70fa17bf22 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts @@ -3,11 +3,7 @@ import { ConnectorLWithArrowIcon, ConnectorXWithArrowIcon, } from '@blocksuite/affine-components/icons'; -import { - ConnectorMode, - DEFAULT_CONNECTOR_COLOR, - STROKE_COLORS, -} from '@blocksuite/affine-model'; +import { ConnectorMode, DefaultTheme } from '@blocksuite/affine-model'; import { EditPropsStore, ThemeProvider, @@ -104,6 +100,10 @@ export class EdgelessConnectorMenu extends EdgelessToolbarToolMixin( return { mode, stroke, strokeWidth }; }); + private readonly _theme$ = computed(() => { + return this.edgeless.std.get(ThemeProvider).theme$.value; + }); + override type: GfxToolsFullOptionValue['type'] = 'connector'; override render() { @@ -112,9 +112,6 @@ export class EdgelessConnectorMenu extends EdgelessToolbarToolMixin( mode, this.onChange ); - const color = this.edgeless.std - .get(ThemeProvider) - .getColorValue(stroke, DEFAULT_CONNECTOR_COLOR); return html` <edgeless-slide-menu> @@ -130,12 +127,14 @@ export class EdgelessConnectorMenu extends EdgelessToolbarToolMixin( <div class="submenu-divider"></div> <edgeless-color-panel class="one-way" - .value=${color} - .palettes=${STROKE_COLORS} + .value=${stroke} + .theme=${this._theme$.value} + .palettes=${DefaultTheme.globalToolbarPalettes} .hasTransparent=${!this.edgeless.doc.awarenessStore.getFlag( 'enable_color_picker' )} - @select=${(e: ColorEvent) => this.onChange({ stroke: e.detail })} + @select=${(e: ColorEvent) => + this.onChange({ stroke: e.detail.value })} ></edgeless-color-panel> </div> </edgeless-slide-menu> diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/edgeless-toolbar.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/edgeless-toolbar.ts index cba68fd9574ad..d660b66860617 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/edgeless-toolbar.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/edgeless-toolbar.ts @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/no-non-null-assertion */ import { type MenuHandler, popMenu, @@ -25,6 +24,7 @@ import { debounce } from '@blocksuite/global/utils'; import { Slot } from '@blocksuite/store'; import { autoPlacement, offset } from '@floating-ui/dom'; import { ContextProvider } from '@lit/context'; +import { computed } from '@preact/signals-core'; import { baseTheme, cssVar } from '@toeverything/theme'; import { css, html, nothing, unsafeCSS } from 'lit'; import { query, state } from 'lit/decorators.js'; @@ -222,6 +222,10 @@ export class EdgelessToolbarWidget extends WidgetComponent< } `; + private readonly _appTheme$ = computed(() => { + return this.std.get(ThemeProvider).app$.value; + }); + private _moreQuickToolsMenu: MenuHandler | null = null; private _moreQuickToolsMenuRef: HTMLElement | null = null; @@ -625,9 +629,11 @@ export class EdgelessToolbarWidget extends WidgetComponent< return nothing; } - const appTheme = this.std.get(ThemeProvider).app$.value; return html` - <div class="edgeless-toolbar-wrapper" data-app-theme=${appTheme}> + <div + class="edgeless-toolbar-wrapper" + data-app-theme=${this._appTheme$.value} + > <div class="edgeless-toolbar-toggle-control" data-enable=${this._enableAutoHide} diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/mindmap/basket-elements.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/mindmap/basket-elements.ts index 775c39aa29ebf..78caa41f12472 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/mindmap/basket-elements.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/mindmap/basket-elements.ts @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/no-non-null-assertion */ import { CanvasElementType } from '@blocksuite/affine-block-surface'; import { type MindmapStyle, TextElementModel } from '@blocksuite/affine-model'; import { TelemetryProvider } from '@blocksuite/affine-shared/services'; diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/note/note-senior-button.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/note/note-senior-button.ts index 3fa0ca888f4ed..21ac875c0b8c0 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/note/note-senior-button.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/note/note-senior-button.ts @@ -166,7 +166,6 @@ export class EdgelessNoteSeniorButton extends EdgelessToolbarToolMixin( }> ) => { this._states.forEach(key => { - // eslint-disable-next-line eqeqeq if (props[key] != undefined) { Object.assign(this, { [key]: props[key] }); } diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/note/note-tool-button.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/note/note-tool-button.ts index bd6a5966a8b1b..c0f12b140e063 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/note/note-tool-button.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/note/note-tool-button.ts @@ -60,7 +60,6 @@ export class EdgelessNoteToolButton extends QuickToolMixin(LitElement) { }> ) => { this._states.forEach(key => { - // eslint-disable-next-line eqeqeq if (props[key] != undefined) { Object.assign(this, { [key]: props[key] }); } diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts index 3f8af09597638..6dad8d81df00e 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts @@ -3,27 +3,24 @@ import { ScribbledStyleIcon, } from '@blocksuite/affine-components/icons'; import { - DEFAULT_SHAPE_FILL_COLOR, - LIGHT_PALETTES, - MEDIUM_PALETTES, - SHAPE_FILL_COLORS, + DefaultTheme, + isTransparent, + type Palette, type ShapeName, ShapeStyle, ShapeType, - StrokeColor, } from '@blocksuite/affine-model'; import { EditPropsStore, ThemeProvider, } from '@blocksuite/affine-shared/services'; import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils'; -import type { Signal } from '@preact/signals-core'; -import { computed, effect, signal } from '@preact/signals-core'; +import { computed, effect, type Signal, signal } from '@preact/signals-core'; import { css, html, LitElement } from 'lit'; import { property } from 'lit/decorators.js'; import type { EdgelessRootBlockComponent } from '../../../edgeless-root-block.js'; -import { type ColorEvent, isTransparent } from '../../panel/color-panel.js'; +import type { ColorEvent } from '../../panel/color-panel.js'; import { ShapeComponentConfig } from './shape-menu-config.js'; export class EdgelessShapeMenu extends SignalWatcher( @@ -76,20 +73,13 @@ export class EdgelessShapeMenu extends SignalWatcher( }; }); - private readonly _setFillColor = (fillColor: string) => { - const filled = !isTransparent(fillColor); - let strokeColor = fillColor; // white or black - - if (filled) { - const index = LIGHT_PALETTES.findIndex(color => color === fillColor); - if (index !== -1) { - strokeColor = MEDIUM_PALETTES[index]; - } - } - - if (strokeColor.endsWith('transparent')) { - strokeColor = StrokeColor.Grey; - } + private readonly _setFillColor = ({ key, value }: Palette) => { + const filled = !isTransparent(value); + const fillColor = value; + const strokeColor = filled + ? DefaultTheme.globalToolbarPalettes.find(palette => palette.key === key) + ?.value + : DefaultTheme.StrokeColorMap.Grey; const { shapeName } = this._props$.value; this.edgeless.std @@ -112,6 +102,10 @@ export class EdgelessShapeMenu extends SignalWatcher( this.onChange(shapeName); }; + private readonly _theme$ = computed(() => { + return this.edgeless.std.get(ThemeProvider).theme$.value; + }); + override connectedCallback(): void { super.connectedCallback(); @@ -128,9 +122,6 @@ export class EdgelessShapeMenu extends SignalWatcher( override render() { const { fillColor, shapeStyle, shapeName } = this._props$.value; - const color = this.edgeless.std - .get(ThemeProvider) - .getColorValue(fillColor, DEFAULT_SHAPE_FILL_COLOR); return html` <edgeless-slide-menu> @@ -179,8 +170,9 @@ export class EdgelessShapeMenu extends SignalWatcher( <menu-divider .vertical=${true}></menu-divider> <edgeless-color-panel class="one-way" - .value=${color} - .palettes=${SHAPE_FILL_COLORS} + .value=${fillColor} + .theme=${this._theme$.value} + .palettes=${DefaultTheme.globalToolbarShapeFillPalettes} .hasTransparent=${!this.edgeless.doc.awarenessStore.getFlag( 'enable_color_picker' )} diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/text/text-menu.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/text/text-menu.ts index 825a6a41b8a84..ce2871723e107 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/text/text-menu.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/text/text-menu.ts @@ -1,5 +1,7 @@ -import { STROKE_COLORS } from '@blocksuite/affine-model'; +import { DefaultTheme } from '@blocksuite/affine-model'; +import { ThemeProvider } from '@blocksuite/affine-shared/services'; import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx'; +import { computed } from '@preact/signals-core'; import { css, html, LitElement, nothing } from 'lit'; import { property } from 'lit/decorators.js'; @@ -15,6 +17,10 @@ export class EdgelessTextMenu extends EdgelessToolbarToolMixin(LitElement) { } `; + private readonly _theme$ = computed(() => { + return this.edgeless.std.get(ThemeProvider).theme$.value; + }); + override type: GfxToolsFullOptionValue['type'] = 'text'; override render() { @@ -26,7 +32,8 @@ export class EdgelessTextMenu extends EdgelessToolbarToolMixin(LitElement) { <edgeless-color-panel class="one-way" .value=${this.color} - .palettes=${STROKE_COLORS} + .theme=${this._theme$.value} + .palettes=${DefaultTheme.globalToolbarPalettes} @select=${(e: ColorEvent) => this.onChange({ color: e.detail })} ></edgeless-color-panel> </div> diff --git a/blocksuite/blocks/src/root-block/edgeless/gfx-tool/copilot-tool.ts b/blocksuite/blocks/src/root-block/edgeless/gfx-tool/copilot-tool.ts index 689846e5214ce..3a0053027d094 100644 --- a/blocksuite/blocks/src/root-block/edgeless/gfx-tool/copilot-tool.ts +++ b/blocksuite/blocks/src/root-block/edgeless/gfx-tool/copilot-tool.ts @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/no-non-null-assertion */ import type { PointerEventState } from '@blocksuite/block-std'; import { BaseTool, MouseButton } from '@blocksuite/block-std/gfx'; import { IS_MAC } from '@blocksuite/global/env'; diff --git a/blocksuite/blocks/src/root-block/edgeless/gfx-tool/shape-tool.ts b/blocksuite/blocks/src/root-block/edgeless/gfx-tool/shape-tool.ts index 625b0843d8f16..dd4953713529e 100644 --- a/blocksuite/blocks/src/root-block/edgeless/gfx-tool/shape-tool.ts +++ b/blocksuite/blocks/src/root-block/edgeless/gfx-tool/shape-tool.ts @@ -3,11 +3,7 @@ import { type SurfaceBlockComponent, } from '@blocksuite/affine-block-surface'; import type { ShapeElementModel, ShapeName } from '@blocksuite/affine-model'; -import { - DEFAULT_SHAPE_FILL_COLOR, - DEFAULT_SHAPE_STROKE_COLOR, - getShapeType, -} from '@blocksuite/affine-model'; +import { DefaultTheme, getShapeType } from '@blocksuite/affine-model'; import { EditPropsStore, TelemetryProvider, @@ -202,10 +198,14 @@ export class ShapeTool extends BaseTool<ShapeToolOption> { options.stroke = this.std .get(ThemeProvider) - .getColorValue(attributes.strokeColor, DEFAULT_SHAPE_STROKE_COLOR, true); + .getColorValue( + attributes.strokeColor, + DefaultTheme.shapeStrokeColor, + true + ); options.fill = this.std .get(ThemeProvider) - .getColorValue(attributes.fillColor, DEFAULT_SHAPE_FILL_COLOR, true); + .getColorValue(attributes.fillColor, DefaultTheme.shapeFillColor, true); switch (attributes.strokeStyle!) { case 'dash': diff --git a/blocksuite/blocks/src/root-block/edgeless/utils/consts.ts b/blocksuite/blocks/src/root-block/edgeless/utils/consts.ts index 9a4b9dad14723..1f9646826e7c0 100644 --- a/blocksuite/blocks/src/root-block/edgeless/utils/consts.ts +++ b/blocksuite/blocks/src/root-block/edgeless/utils/consts.ts @@ -1,9 +1,7 @@ import { - Black, DEFAULT_ROUGHNESS, LineWidth, StrokeStyle, - White, } from '@blocksuite/affine-model'; export const BOOKMARK_MIN_WIDTH = 450; @@ -52,10 +50,6 @@ export const SurfaceColor = '#6046FE'; export const NoteColor = '#1E96EB'; export const BlendColor = '#7D91FF'; -export const SHAPE_TEXT_COLOR_PURE_WHITE = White; -export const SHAPE_TEXT_COLOR_PURE_BLACK = Black; -export const SHAPE_FILL_COLOR_BLACK = Black; - export const AI_CHAT_BLOCK_MIN_WIDTH = 260; export const AI_CHAT_BLOCK_MIN_HEIGHT = 160; export const AI_CHAT_BLOCK_MAX_WIDTH = 320; diff --git a/blocksuite/blocks/src/root-block/edgeless/utils/tool-overlay.ts b/blocksuite/blocks/src/root-block/edgeless/utils/tool-overlay.ts index 05ffd5f7028c5..7f1f12e133c1a 100644 --- a/blocksuite/blocks/src/root-block/edgeless/utils/tool-overlay.ts +++ b/blocksuite/blocks/src/root-block/edgeless/utils/tool-overlay.ts @@ -6,9 +6,7 @@ import { } from '@blocksuite/affine-block-surface'; import { type Color, - DEFAULT_NOTE_BACKGROUND_COLOR, - DEFAULT_SHAPE_FILL_COLOR, - DEFAULT_SHAPE_STROKE_COLOR, + DefaultTheme, shapeMethods, type ShapeStyle, } from '@blocksuite/affine-model'; @@ -286,10 +284,10 @@ export class ShapeOverlay extends ToolOverlay { const { shapeStyle, fillColor, strokeColor } = style; const fill = this.gfx.std .get(ThemeProvider) - .getColorValue(fillColor, DEFAULT_SHAPE_FILL_COLOR, true); + .getColorValue(fillColor, DefaultTheme.shapeFillColor, true); const stroke = this.gfx.std .get(ThemeProvider) - .getColorValue(strokeColor, DEFAULT_SHAPE_STROKE_COLOR, true); + .getColorValue(strokeColor, DefaultTheme.shapeStrokeColor, true); options.fill = fill; options.stroke = stroke; @@ -356,7 +354,7 @@ export class NoteOverlay extends ToolOverlay { this.globalAlpha = 0; this.backgroundColor = gfx.std .get(ThemeProvider) - .getColorValue(background, DEFAULT_NOTE_BACKGROUND_COLOR, true); + .getColorValue(background, DefaultTheme.noteBackgrounColor, true); this.disposables.add( effect(() => { // when change note child type, update overlay text diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-brush-button.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-brush-button.ts index 434c1cbb67eb0..bb75ea2aec7c7 100644 --- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-brush-button.ts +++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-brush-button.ts @@ -3,10 +3,14 @@ import type { BrushProps, ColorScheme, } from '@blocksuite/affine-model'; -import { LineWidth, PALETTES } from '@blocksuite/affine-model'; +import { + DefaultTheme, + LineWidth, + resolveColor, +} from '@blocksuite/affine-model'; import { countBy, maxBy, WithDisposable } from '@blocksuite/global/utils'; import { html, LitElement, nothing } from 'lit'; -import { property, query, state } from 'lit/decorators.js'; +import { property, query } from 'lit/decorators.js'; import { when } from 'lit/directives/when.js'; import type { EdgelessColorPickerButton } from '../../edgeless/components/color-picker/button.js'; @@ -16,7 +20,6 @@ import { packColorsWithColorScheme, } from '../../edgeless/components/color-picker/utils.js'; import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js'; -import { GET_DEFAULT_LINE_COLOR } from '../../edgeless/components/panel/color-panel.js'; import type { LineWidthEvent } from '../../edgeless/components/panel/line-width-panel.js'; import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js'; @@ -24,13 +27,13 @@ function getMostCommonColor( elements: BrushElementModel[], colorScheme: ColorScheme ): string { - const colors = countBy(elements, (ele: BrushElementModel) => { - return typeof ele.color === 'object' - ? (ele.color[colorScheme] ?? ele.color.normal ?? null) - : ele.color; - }); + const colors = countBy(elements, (ele: BrushElementModel) => + resolveColor(ele.color, colorScheme) + ); const max = maxBy(Object.entries(colors), ([_k, count]) => count); - return max ? (max[0] as string) : GET_DEFAULT_LINE_COLOR(colorScheme); + return max + ? (max[0] as string) + : resolveColor(DefaultTheme.black, colorScheme); } function getMostCommonSize(elements: BrushElementModel[]): LineWidth { @@ -44,29 +47,29 @@ function notEqual<K extends keyof BrushProps>(key: K, value: BrushProps[K]) { } export class EdgelessChangeBrushButton extends WithDisposable(LitElement) { - private readonly _setBrushColor = ({ detail: color }: ColorEvent) => { + private readonly _setBrushColor = ({ detail }: ColorEvent) => { + const color = detail.value; this._setBrushProp('color', color); - this._selectedColor = color; }; private readonly _setLineWidth = ({ detail: lineWidth }: LineWidthEvent) => { this._setBrushProp('lineWidth', lineWidth); - this._selectedSize = lineWidth; }; - pickColor = (event: PickColorEvent) => { - if (event.type === 'pick') { - this.elements.forEach(ele => - this.service.updateElement( - ele.id, - packColor('color', { ...event.detail }) - ) - ); + pickColor = (e: PickColorEvent) => { + const field = 'color'; + + if (e.type === 'pick') { + const color = e.detail.value; + this.elements.forEach(ele => { + const props = packColor(field, color); + this.service.updateElement(ele.id, props); + }); return; } this.elements.forEach(ele => - ele[event.type === 'start' ? 'stash' : 'pop']('color') + ele[e.type === 'start' ? 'stash' : 'pop'](field) ); }; @@ -74,17 +77,6 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) { return this.edgeless.doc; } - get selectedColor() { - const colorScheme = this.edgeless.surface.renderer.getColorScheme(); - return ( - this._selectedColor ?? getMostCommonColor(this.elements, colorScheme) - ); - } - - get selectedSize() { - return this._selectedSize ?? getMostCommonSize(this.elements); - } - get service() { return this.edgeless.service; } @@ -108,7 +100,8 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) { override render() { const colorScheme = this.edgeless.surface.renderer.getColorScheme(); const elements = this.elements; - const { selectedSize, selectedColor } = this; + const selectedColor = getMostCommonColor(elements, colorScheme); + const selectedSize = getMostCommonSize(elements); return html` <edgeless-line-width-panel @@ -136,7 +129,8 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) { .color=${selectedColor} .colors=${colors} .colorType=${type} - .palettes=${PALETTES} + .theme=${colorScheme} + .palettes=${DefaultTheme.palettes} > </edgeless-color-picker-button> `; @@ -154,6 +148,8 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) { > <edgeless-color-panel .value=${selectedColor} + .theme=${colorScheme} + .palettes=${DefaultTheme.palettes} @select=${this._setBrushColor} > </edgeless-color-panel> @@ -163,12 +159,6 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) { `; } - @state() - private accessor _selectedColor: string | null = null; - - @state() - private accessor _selectedSize: LineWidth | null = null; - @query('edgeless-color-picker-button.color') accessor colorButton!: EdgelessColorPickerButton; diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts index 2afc40bc5c7cd..66c6a2754633f 100644 --- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts +++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts @@ -27,9 +27,10 @@ import { ConnectorMode, DEFAULT_FRONT_END_POINT_STYLE, DEFAULT_REAR_END_POINT_STYLE, + DefaultTheme, LineWidth, - PALETTES, PointStyle, + resolveColor, StrokeStyle, } from '@blocksuite/affine-model'; import { countBy, maxBy, WithDisposable } from '@blocksuite/global/utils'; @@ -47,10 +48,7 @@ import { packColor, packColorsWithColorScheme, } from '../../edgeless/components/color-picker/utils.js'; -import { - type ColorEvent, - GET_DEFAULT_LINE_COLOR, -} from '../../edgeless/components/panel/color-panel.js'; +import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js'; import { type LineStyleEvent, LineStylesPanel, @@ -61,14 +59,14 @@ import { mountConnectorLabelEditor } from '../../edgeless/utils/text.js'; function getMostCommonColor( elements: ConnectorElementModel[], colorScheme: ColorScheme -): string | null { - const colors = countBy(elements, (ele: ConnectorElementModel) => { - return typeof ele.stroke === 'object' - ? (ele.stroke[colorScheme] ?? ele.stroke.normal ?? null) - : ele.stroke; - }); +): string { + const colors = countBy(elements, (ele: ConnectorElementModel) => + resolveColor(ele.stroke, colorScheme) + ); const max = maxBy(Object.entries(colors), ([_k, count]) => count); - return max ? (max[0] as string) : null; + return max + ? (max[0] as string) + : resolveColor(DefaultTheme.connectorColor, colorScheme); } function getMostCommonMode( @@ -87,10 +85,10 @@ function getMostCommonLineWidth(elements: ConnectorElementModel[]): LineWidth { export function getMostCommonLineStyle( elements: ConnectorElementModel[] -): StrokeStyle | null { +): StrokeStyle { const sizes = countBy(elements, ele => ele.strokeStyle); const max = maxBy(Object.entries(sizes), ([_k, count]) => count); - return max ? (max[0] as StrokeStyle) : null; + return max ? (max[0] as StrokeStyle) : StrokeStyle.Solid; } function getMostCommonRough(elements: ConnectorElementModel[]): boolean { @@ -111,15 +109,16 @@ function getMostCommonRough(elements: ConnectorElementModel[]): boolean { function getMostCommonEndpointStyle( elements: ConnectorElementModel[], - endpoint: ConnectorEndpoint -): PointStyle | null { + endpoint: ConnectorEndpoint, + fallback: PointStyle +): PointStyle { const field = endpoint === ConnectorEndpoint.Front ? 'frontEndpointStyle' : 'rearEndpointStyle'; const modes = countBy(elements, ele => ele[field]); const max = maxBy(Object.entries(modes), ([_k, count]) => count); - return max ? (max[0] as PointStyle) : null; + return max ? (max[0] as PointStyle) : fallback; } function notEqual< @@ -222,19 +221,33 @@ const MODE_CHOOSE: [ConnectorMode, () => TemplateResult<1>][] = [ ] as const; export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) { - pickColor = (event: PickColorEvent) => { - if (event.type === 'pick') { - this.elements.forEach(ele => - this.service.updateElement( - ele.id, - packColor('stroke', { ...event.detail }) - ) - ); + private readonly _setConnectorColor = (e: ColorEvent) => { + const stroke = e.detail.value; + this._setConnectorProp('stroke', stroke); + }; + + private readonly _setConnectorStroke = ({ type, value }: LineStyleEvent) => { + if (type === 'size') { + this._setConnectorStrokeWidth(value); + return; + } + this._setConnectorStrokeStyle(value); + }; + + pickColor = (e: PickColorEvent) => { + const field = 'stroke'; + + if (e.type === 'pick') { + const color = e.detail.value; + this.elements.forEach(ele => { + const props = packColor(field, color); + this.service.updateElement(ele.id, props); + }); return; } this.elements.forEach(ele => - ele[event.type === 'start' ? 'stash' : 'pop']('stroke') + ele[e.type === 'start' ? 'stash' : 'pop'](field) ); }; @@ -271,10 +284,6 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) { ); } - private _setConnectorColor(stroke: string) { - this._setConnectorProp('stroke', stroke); - } - private _setConnectorMode(mode: ConnectorMode) { this._setConnectorProp('mode', mode); } @@ -305,14 +314,6 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) { this._setConnectorProp('rough', rough); } - private _setConnectorStroke({ type, value }: LineStyleEvent) { - if (type === 'size') { - this._setConnectorStrokeWidth(value); - return; - } - this._setConnectorStrokeStyle(value); - } - private _setConnectorStrokeStyle(strokeStyle: StrokeStyle) { this._setConnectorProp('strokeStyle', strokeStyle); } @@ -334,20 +335,21 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) { override render() { const colorScheme = this.edgeless.surface.renderer.getColorScheme(); const elements = this.elements; - const selectedColor = - getMostCommonColor(elements, colorScheme) ?? - GET_DEFAULT_LINE_COLOR(colorScheme); + const selectedColor = getMostCommonColor(elements, colorScheme); const selectedMode = getMostCommonMode(elements); - const selectedLineSize = getMostCommonLineWidth(elements) ?? LineWidth.Four; + const selectedLineSize = getMostCommonLineWidth(elements); const selectedRough = getMostCommonRough(elements); - const selectedLineStyle = - getMostCommonLineStyle(elements) ?? StrokeStyle.Solid; - const selectedStartPointStyle = - getMostCommonEndpointStyle(elements, ConnectorEndpoint.Front) ?? - DEFAULT_FRONT_END_POINT_STYLE; - const selectedEndPointStyle = - getMostCommonEndpointStyle(elements, ConnectorEndpoint.Rear) ?? - DEFAULT_REAR_END_POINT_STYLE; + const selectedLineStyle = getMostCommonLineStyle(elements); + const selectedStartPointStyle = getMostCommonEndpointStyle( + elements, + ConnectorEndpoint.Front, + DEFAULT_FRONT_END_POINT_STYLE + ); + const selectedEndPointStyle = getMostCommonEndpointStyle( + elements, + ConnectorEndpoint.Rear, + DEFAULT_REAR_END_POINT_STYLE + ); return join( [ @@ -368,7 +370,8 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) { .color=${selectedColor} .colors=${colors} .colorType=${type} - .palettes=${PALETTES} + .theme=${colorScheme} + .palettes=${DefaultTheme.palettes} .hollowCircle=${true} > <div @@ -384,7 +387,7 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) { ${LineStylesPanel({ selectedLineSize: selectedLineSize, selectedLineStyle: selectedLineStyle, - onClick: (e: LineStyleEvent) => this._setConnectorStroke(e), + onClick: this._setConnectorStroke, })} </div> <editor-toolbar-separator @@ -409,13 +412,12 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) { `} > <stroke-style-panel + .theme=${colorScheme} .strokeWidth=${selectedLineSize} .strokeStyle=${selectedLineStyle} .strokeColor=${selectedColor} - .setStrokeStyle=${(e: LineStyleEvent) => - this._setConnectorStroke(e)} - .setStrokeColor=${(e: ColorEvent) => - this._setConnectorColor(e.detail)} + .setStrokeStyle=${this._setConnectorStroke} + .setStrokeColor=${this._setConnectorColor} > </stroke-style-panel> </editor-menu-button> diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts index 9f455e9811793..73266cdd87236 100644 --- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts +++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts @@ -8,9 +8,10 @@ import { renderToolbarSeparator } from '@blocksuite/affine-components/toolbar'; import { type ColorScheme, DEFAULT_NOTE_HEIGHT, + DefaultTheme, type FrameBlockModel, NoteDisplayMode, - PALETTES, + resolveColor, } from '@blocksuite/affine-model'; import { matchFlavours } from '@blocksuite/affine-shared/utils'; import { GfxExtensionIdentifier } from '@blocksuite/block-std/gfx'; @@ -40,30 +41,36 @@ import { mountFrameTitleEditor } from '../../edgeless/utils/text.js'; function getMostCommonColor( elements: FrameBlockModel[], colorScheme: ColorScheme -): string | null { - const colors = countBy(elements, (ele: FrameBlockModel) => { - return typeof ele.background === 'object' - ? (ele.background[colorScheme] ?? ele.background.normal ?? null) - : ele.background; - }); +): string { + const colors = countBy(elements, (ele: FrameBlockModel) => + resolveColor(ele.background, colorScheme) + ); const max = maxBy(Object.entries(colors), ([_k, count]) => count); - return max ? (max[0] as string) : null; + return max ? (max[0] as string) : 'transparent'; } export class EdgelessChangeFrameButton extends WithDisposable(LitElement) { - pickColor = (event: PickColorEvent) => { - if (event.type === 'pick') { - this.frames.forEach(ele => - this.service.updateElement( - ele.id, - packColor('background', { ...event.detail }) - ) - ); + private readonly _setFrameBackground = (e: ColorEvent) => { + const background = e.detail.value; + this.frames.forEach(frame => { + this.service.updateElement(frame.id, { background }); + }); + }; + + pickColor = (e: PickColorEvent) => { + const field = 'background'; + + if (e.type === 'pick') { + const color = e.detail.value; + this.frames.forEach(ele => { + const props = packColor(field, color); + this.service.updateElement(ele.id, props); + }); return; } this.frames.forEach(ele => - ele[event.type === 'start' ? 'stash' : 'pop']('background') + ele[e.type === 'start' ? 'stash' : 'pop'](field) ); }; @@ -114,18 +121,12 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) { toast(this.edgeless.host, 'Frame has been inserted into doc'); } - private _setFrameBackground(color: string) { - this.frames.forEach(frame => { - this.service.updateElement(frame.id, { background: color }); - }); - } - protected override render() { const { frames } = this; const len = frames.length; const onlyOne = len === 1; const colorScheme = this.edgeless.surface.renderer.getColorScheme(); - const background = getMostCommonColor(frames, colorScheme) ?? 'transparent'; + const background = getMostCommonColor(frames, colorScheme); return join( [ @@ -198,7 +199,8 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) { .color=${background} .colors=${colors} .colorType=${type} - .palettes=${PALETTES} + .theme=${colorScheme} + .palettes=${DefaultTheme.palettes} > </edgeless-color-picker-button> `; @@ -219,8 +221,9 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) { > <edgeless-color-panel .value=${background} - .palettes=${PALETTES} - @select=${(e: ColorEvent) => this._setFrameBackground(e.detail)} + .theme=${colorScheme} + .palettes=${DefaultTheme.palettes} + @select=${this._setFrameBackground} > </edgeless-color-panel> </editor-menu-button> diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-mindmap-button.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-mindmap-button.ts index c7d114125beca..bb7aa8d1e976d 100644 --- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-mindmap-button.ts +++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-mindmap-button.ts @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/no-non-null-assertion */ import { MindmapBalanceLayoutIcon, MindmapLeftLayoutIcon, diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts index f26430af7b3ac..c5e73776778bf 100644 --- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts +++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts @@ -13,10 +13,10 @@ import { } from '@blocksuite/affine-components/toolbar'; import { type ColorScheme, - DEFAULT_NOTE_BACKGROUND_COLOR, - NOTE_BACKGROUND_PALETTES, + DefaultTheme, type NoteBlockModel, NoteDisplayMode, + resolveColor, type StrokeStyle, } from '@blocksuite/affine-model'; import { ThemeProvider } from '@blocksuite/affine-shared/services'; @@ -67,17 +67,24 @@ const DisplayModeMap = { function getMostCommonBackground( elements: NoteBlockModel[], colorScheme: ColorScheme -): string | null { - const colors = countBy(elements, (ele: NoteBlockModel) => { - return typeof ele.background === 'object' - ? (ele.background[colorScheme] ?? ele.background.normal ?? null) - : ele.background; - }); +): string { + const colors = countBy(elements, (ele: NoteBlockModel) => + resolveColor(ele.background, colorScheme) + ); const max = maxBy(Object.entries(colors), ([_k, count]) => count); - return max ? (max[0] as string) : null; + return max + ? (max[0] as string) + : resolveColor(DefaultTheme.noteBackgrounColor, colorScheme); } export class EdgelessChangeNoteButton extends WithDisposable(LitElement) { + private readonly _setBackground = (e: ColorEvent) => { + const background = e.detail.value; + this.notes.forEach(element => { + this.edgeless.service.updateElement(element.id, { background }); + }); + }; + private readonly _setBorderRadius = (borderRadius: number) => { this.notes.forEach(note => { const props = { @@ -107,18 +114,19 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) { }); }; - pickColor = (event: PickColorEvent) => { - if (event.type === 'pick') { + pickColor = (e: PickColorEvent) => { + const field = 'background'; + + if (e.type === 'pick') { + const color = e.detail.value; this.notes.forEach(element => { - const props = packColor('background', { ...event.detail }); + const props = packColor(field, color); this.edgeless.service.updateElement(element.id, props); }); return; } - this.notes.forEach(ele => - ele[event.type === 'start' ? 'stash' : 'pop']('background') - ); + this.notes.forEach(ele => ele[e.type === 'start' ? 'stash' : 'pop'](field)); }; private get _advancedVisibilityEnabled() { @@ -140,12 +148,6 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) { this.edgeless.slots.toggleNoteSlicer.emit(); } - private _setBackground(background: string) { - this.notes.forEach(element => { - this.edgeless.service.updateElement(element.id, { background }); - }); - } - private _setCollapse() { this.notes.forEach(note => { const { collapse, collapsedHeight } = note.edgeless; @@ -257,9 +259,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) { const { shadowType, borderRadius, borderSize, borderStyle } = edgeless.style; const colorScheme = this.edgeless.surface.renderer.getColorScheme(); - const background = - getMostCommonBackground(this.notes, colorScheme) ?? - DEFAULT_NOTE_BACKGROUND_COLOR; + const background = getMostCommonBackground(this.notes, colorScheme); const { collapse } = edgeless; const scale = edgeless.scale ?? 1; @@ -312,9 +312,11 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) { .label=${'Background'} .pick=${this.pickColor} .color=${background} + .colorPanelClass=${'small'} .colorType=${type} .colors=${colors} - .palettes=${NOTE_BACKGROUND_PALETTES} + .theme=${colorScheme} + .palettes=${DefaultTheme.notePalettes} > </edgeless-color-picker-button> `; @@ -334,9 +336,11 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) { `} > <edgeless-color-panel + class="small" .value=${background} - .options=${NOTE_BACKGROUND_PALETTES} - @select=${(e: ColorEvent) => this._setBackground(e.detail)} + .theme=${colorScheme} + .palettes=${DefaultTheme.notePalettes} + @select=${this._setBackground} > </edgeless-color-panel> </editor-menu-button> diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-shape-button.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-shape-button.ts index f9aae48882d29..60375fabc0b31 100644 --- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-shape-button.ts +++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-shape-button.ts @@ -7,20 +7,21 @@ import { } from '@blocksuite/affine-components/icons'; import { renderToolbarSeparator } from '@blocksuite/affine-components/toolbar'; import type { + Color, ColorScheme, ShapeElementModel, ShapeProps, } from '@blocksuite/affine-model'; import { - DEFAULT_SHAPE_FILL_COLOR, - DEFAULT_SHAPE_STROKE_COLOR, + DefaultTheme, FontFamily, getShapeName, getShapeRadius, getShapeType, + isTransparent, LineWidth, MindmapElementModel, - PALETTES, + resolveColor, ShapeStyle, StrokeStyle, } from '@blocksuite/affine-model'; @@ -32,6 +33,7 @@ import { choose } from 'lit/directives/choose.js'; import { join } from 'lit/directives/join.js'; import { styleMap } from 'lit/directives/style-map.js'; import { when } from 'lit/directives/when.js'; +import isEqual from 'lodash.isequal'; import type { EdgelessColorPickerButton } from '../../edgeless/components/color-picker/button.js'; import type { PickColorEvent } from '../../edgeless/components/color-picker/types.js'; @@ -39,11 +41,7 @@ import { packColor, packColorsWithColorScheme, } from '../../edgeless/components/color-picker/utils.js'; -import { - type ColorEvent, - GET_DEFAULT_LINE_COLOR, - isTransparent, -} from '../../edgeless/components/panel/color-panel.js'; +import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js'; import { type LineStyleEvent, LineStylesPanel, @@ -51,11 +49,6 @@ import { import type { EdgelessShapePanel } from '../../edgeless/components/panel/shape-panel.js'; import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js'; import type { ShapeToolOption } from '../../edgeless/gfx-tool/shape-tool.js'; -import { - SHAPE_FILL_COLOR_BLACK, - SHAPE_TEXT_COLOR_PURE_BLACK, - SHAPE_TEXT_COLOR_PURE_WHITE, -} from '../../edgeless/utils/consts.js'; import { mountShapeTextEditor } from '../../edgeless/utils/text.js'; const changeShapeButtonStyles = [ @@ -87,62 +80,56 @@ const changeShapeButtonStyles = [ function getMostCommonFillColor( elements: ShapeElementModel[], colorScheme: ColorScheme -): string | null { - const colors = countBy(elements, (ele: ShapeElementModel) => { - if (ele.filled) { - return typeof ele.fillColor === 'object' - ? (ele.fillColor[colorScheme] ?? ele.fillColor.normal ?? null) - : ele.fillColor; - } - return 'transparent'; - }); +): string { + const colors = countBy(elements, (ele: ShapeElementModel) => + ele.filled ? resolveColor(ele.fillColor, colorScheme) : 'transparent' + ); const max = maxBy(Object.entries(colors), ([_k, count]) => count); - return max ? (max[0] as string) : null; + return max + ? (max[0] as string) + : resolveColor(DefaultTheme.shapeFillColor, colorScheme); } function getMostCommonStrokeColor( elements: ShapeElementModel[], colorScheme: ColorScheme -): string | null { - const colors = countBy(elements, (ele: ShapeElementModel) => { - return typeof ele.strokeColor === 'object' - ? (ele.strokeColor[colorScheme] ?? ele.strokeColor.normal ?? null) - : ele.strokeColor; - }); +): string { + const colors = countBy(elements, (ele: ShapeElementModel) => + resolveColor(ele.strokeColor, colorScheme) + ); const max = maxBy(Object.entries(colors), ([_k, count]) => count); - return max ? (max[0] as string) : null; + return max + ? (max[0] as string) + : resolveColor(DefaultTheme.shapeStrokeColor, colorScheme); } function getMostCommonShape( elements: ShapeElementModel[] ): ShapeToolOption['shapeName'] | null { - const shapeTypes = countBy(elements, (ele: ShapeElementModel) => { - return getShapeName(ele.shapeType, ele.radius); - }); + const shapeTypes = countBy(elements, (ele: ShapeElementModel) => + getShapeName(ele.shapeType, ele.radius) + ); const max = maxBy(Object.entries(shapeTypes), ([_k, count]) => count); return max ? (max[0] as ShapeToolOption['shapeName']) : null; } function getMostCommonLineSize(elements: ShapeElementModel[]): LineWidth { - const sizes = countBy(elements, (ele: ShapeElementModel) => { - return ele.strokeWidth; - }); + const sizes = countBy(elements, (ele: ShapeElementModel) => ele.strokeWidth); const max = maxBy(Object.entries(sizes), ([_k, count]) => count); return max ? (Number(max[0]) as LineWidth) : LineWidth.Four; } -function getMostCommonLineStyle( - elements: ShapeElementModel[] -): StrokeStyle | null { +function getMostCommonLineStyle(elements: ShapeElementModel[]): StrokeStyle { const sizes = countBy(elements, (ele: ShapeElementModel) => ele.strokeStyle); const max = maxBy(Object.entries(sizes), ([_k, count]) => count); - return max ? (max[0] as StrokeStyle) : null; + return max ? (max[0] as StrokeStyle) : StrokeStyle.Solid; } function getMostCommonShapeStyle(elements: ShapeElementModel[]): ShapeStyle { - const roughnesses = countBy(elements, (ele: ShapeElementModel) => { - return ele.shapeStyle; - }); + const roughnesses = countBy( + elements, + (ele: ShapeElementModel) => ele.shapeStyle + ); const max = maxBy(Object.entries(roughnesses), ([_k, count]) => count); return max ? (max[0] as ShapeStyle) : ShapeStyle.Scribbled; } @@ -150,62 +137,54 @@ function getMostCommonShapeStyle(elements: ShapeElementModel[]): ShapeStyle { export class EdgelessChangeShapeButton extends WithDisposable(LitElement) { static override styles = [changeShapeButtonStyles]; - get service() { - return this.edgeless.service; - } + private readonly _setShapeFillColor = (e: ColorEvent) => { + const fillColor = e.detail.value; + const filled = !isTransparent(fillColor); + const color = this._getTextColor(fillColor, filled); + this.elements.forEach(ele => + this.service.updateElement(ele.id, { filled, fillColor, color }) + ); + }; - #pickColor<K extends keyof Pick<ShapeProps, 'fillColor' | 'strokeColor'>>( - key: K - ) { - return (event: PickColorEvent) => { - if (event.type === 'pick') { - this.elements.forEach(ele => { - const props = packColor(key, { ...event.detail }); - // If `filled` can be set separately, this logic can be removed - if (key === 'fillColor' && !ele.filled) { - Object.assign(props, { filled: true }); - } - this.service.updateElement(ele.id, props); - }); - return; - } + private readonly _setShapeStrokeColor = (e: ColorEvent) => { + const strokeColor = e.detail.value; + this.elements.forEach(ele => + this.service.updateElement(ele.id, { strokeColor }) + ); + }; - this.elements.forEach(ele => - ele[event.type === 'start' ? 'stash' : 'pop'](key) - ); - }; + private readonly _setShapeStyles = ({ type, value }: LineStyleEvent) => { + if (type === 'size') { + this._setShapeStrokeWidth(value); + return; + } + if (type === 'lineStyle') { + this._setShapeStrokeStyle(value); + } + }; + + get service() { + return this.edgeless.service; } private _addText() { mountShapeTextEditor(this.elements[0], this.edgeless); } - private _getTextColor(fillColor: string) { - const colorScheme = this.edgeless.surface.renderer.getColorScheme(); + private _getTextColor(fillColor: Color, isNotTransparent = false) { // When the shape is filled with black color, the text color should be white. // When the shape is transparent, the text color should be set according to the theme. // Otherwise, the text color should be black. - const textColor = isTransparent(fillColor) - ? GET_DEFAULT_LINE_COLOR(colorScheme) - : fillColor === SHAPE_FILL_COLOR_BLACK - ? SHAPE_TEXT_COLOR_PURE_WHITE - : SHAPE_TEXT_COLOR_PURE_BLACK; - return textColor; - } + if (isNotTransparent) { + if (isEqual(fillColor, DefaultTheme.black)) { + return DefaultTheme.white; + } else if (isEqual(fillColor, DefaultTheme.white)) { + return DefaultTheme.black; + } + } - private _setShapeFillColor(fillColor: string) { - const filled = !isTransparent(fillColor); - const color = this._getTextColor(fillColor); - this.elements.forEach(ele => - this.service.updateElement(ele.id, { filled, fillColor, color }) - ); - } - - private _setShapeStrokeColor(strokeColor: string) { - this.elements.forEach(ele => - this.service.updateElement(ele.id, { strokeColor }) - ); + return DefaultTheme.black; } private _setShapeStrokeStyle(strokeStyle: StrokeStyle) { @@ -229,16 +208,6 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) { }); } - private _setShapeStyles({ type, value }: LineStyleEvent) { - if (type === 'size') { - this._setShapeStrokeWidth(value); - return; - } - if (type === 'lineStyle') { - this._setShapeStrokeStyle(value); - } - } - private _showAddButtonOrTextMenu() { if (this.elements.length === 1 && !this.elements[0].text) { return 'button'; @@ -265,20 +234,38 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) { ); } + pickColor<K extends keyof Pick<ShapeProps, 'fillColor' | 'strokeColor'>>( + field: K + ) { + return (e: PickColorEvent) => { + if (e.type === 'pick') { + const color = e.detail.value; + this.elements.forEach(ele => { + const props = packColor(field, color); + // If `filled` can be set separately, this logic can be removed + if (field === 'fillColor' && !ele.filled) { + Object.assign(props, { filled: true }); + } + this.service.updateElement(ele.id, props); + }); + return; + } + + this.elements.forEach(ele => + ele[e.type === 'start' ? 'stash' : 'pop'](field) + ); + }; + } + override render() { const colorScheme = this.edgeless.surface.renderer.getColorScheme(); const elements = this.elements; const selectedShape = getMostCommonShape(elements); - const selectedFillColor = - getMostCommonFillColor(elements, colorScheme) ?? DEFAULT_SHAPE_FILL_COLOR; - const selectedStrokeColor = - getMostCommonStrokeColor(elements, colorScheme) ?? - DEFAULT_SHAPE_STROKE_COLOR; - const selectedLineSize = getMostCommonLineSize(elements) ?? LineWidth.Four; - const selectedLineStyle = - getMostCommonLineStyle(elements) ?? StrokeStyle.Solid; - const selectedShapeStyle = - getMostCommonShapeStyle(elements) ?? ShapeStyle.Scribbled; + const selectedFillColor = getMostCommonFillColor(elements, colorScheme); + const selectedStrokeColor = getMostCommonStrokeColor(elements, colorScheme); + const selectedLineSize = getMostCommonLineSize(elements); + const selectedLineStyle = getMostCommonLineStyle(elements); + const selectedShapeStyle = getMostCommonShapeStyle(elements); return join( [ @@ -335,11 +322,12 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) { <edgeless-color-picker-button class="fill-color" .label=${'Fill color'} - .pick=${this.#pickColor('fillColor')} + .pick=${this.pickColor('fillColor')} .color=${selectedFillColor} .colors=${colors} .colorType=${type} - .palettes=${PALETTES} + .theme=${colorScheme} + .palettes=${DefaultTheme.palettes} > </edgeless-color-picker-button> `; @@ -362,8 +350,9 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) { role="listbox" aria-label="Fill colors" .value=${selectedFillColor} - .palettes=${PALETTES} - @select=${(e: ColorEvent) => this._setShapeFillColor(e.detail)} + .theme=${colorScheme} + .palettes=${DefaultTheme.palettes} + @select=${this._setShapeFillColor} > </edgeless-color-panel> </editor-menu-button> @@ -383,11 +372,12 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) { <edgeless-color-picker-button class="border-style" .label=${'Border style'} - .pick=${this.#pickColor('strokeColor')} + .pick=${this.pickColor('strokeColor')} .color=${selectedStrokeColor} .colors=${colors} .colorType=${type} - .palettes=${PALETTES} + .theme=${colorScheme} + .palettes=${DefaultTheme.palettes} .hollowCircle=${true} > <div @@ -403,8 +393,7 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) { ${LineStylesPanel({ selectedLineSize: selectedLineSize, selectedLineStyle: selectedLineStyle, - onClick: (e: LineStyleEvent) => this._setShapeStyles(e), - lineStyles: [StrokeStyle.Solid, StrokeStyle.Dash], + onClick: this._setShapeStyles, })} </div> <editor-toolbar-separator @@ -430,14 +419,13 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) { `} > <stroke-style-panel + .theme=${colorScheme} .hollowCircle=${true} .strokeWidth=${selectedLineSize} .strokeStyle=${selectedLineStyle} .strokeColor=${selectedStrokeColor} - .setStrokeStyle=${(e: LineStyleEvent) => - this._setShapeStyles(e)} - .setStrokeColor=${(e: ColorEvent) => - this._setShapeStrokeColor(e.detail)} + .setStrokeStyle=${this._setShapeStyles} + .setStrokeColor=${this._setShapeStrokeColor} > </stroke-style-panel> </editor-menu-button> diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts index e4ef47e4698bb..01cb516b52e33 100644 --- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts +++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts @@ -13,11 +13,12 @@ import { renderToolbarSeparator } from '@blocksuite/affine-components/toolbar'; import { type ColorScheme, ConnectorElementModel, + DefaultTheme, EdgelessTextBlockModel, FontFamily, FontStyle, FontWeight, - PALETTES, + resolveColor, ShapeElementModel, TextAlign, TextElementModel, @@ -43,10 +44,7 @@ import { packColor, packColorsWithColorScheme, } from '../../edgeless/components/color-picker/utils.js'; -import { - type ColorEvent, - GET_DEFAULT_LINE_COLOR, -} from '../../edgeless/components/panel/color-panel.js'; +import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js'; import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js'; const FONT_SIZE_LIST = [ @@ -120,12 +118,12 @@ function getMostCommonColor( const colors = countBy(elements, (ele: BlockSuite.EdgelessTextModelType) => { const color = ele instanceof ConnectorElementModel ? ele.labelStyle.color : ele.color; - return typeof color === 'object' - ? (color[colorScheme] ?? color.normal ?? null) - : color; + return resolveColor(color, colorScheme); }); const max = maxBy(Object.entries(colors), ([_k, count]) => count); - return max ? (max[0] as string) : GET_DEFAULT_LINE_COLOR(colorScheme); + return max + ? (max[0] as string) + : resolveColor(DefaultTheme.textColor, colorScheme); } function getMostCommonFontFamily(elements: BlockSuite.EdgelessTextModelType[]) { @@ -224,7 +222,8 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) { }); }; - private readonly _setTextColor = ({ detail: color }: ColorEvent) => { + private readonly _setTextColor = (e: ColorEvent) => { + const color = e.detail.value; const props = { color }; this.elements.forEach(element => { this.service.updateElement(element.id, buildProps(element, props)); @@ -302,10 +301,11 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) { // no need to update the bound of edgeless text block, which updates itself using ResizeObserver }; - pickColor = (event: PickColorEvent) => { - if (event.type === 'pick') { + pickColor = (e: PickColorEvent) => { + if (e.type === 'pick') { + const color = e.detail.value; this.elements.forEach(element => { - const props = packColor('color', { ...event.detail }); + const props = packColor('color', color); this.service.updateElement(element.id, buildProps(element, props)); this._updateElementBound(element); }); @@ -315,7 +315,7 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) { const key = this.elementType === 'connector' ? 'labelStyle' : 'color'; this.elements.forEach(ele => { // @ts-expect-error: FIXME - ele[event.type === 'start' ? 'stash' : 'pop'](key); + ele[e.type === 'start' ? 'stash' : 'pop'](key); }); }; @@ -387,7 +387,8 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) { .color=${selectedColor} .colors=${colors} .colorType=${type} - .palettes=${PALETTES} + .theme=${colorScheme} + .palettes=${DefaultTheme.palettes} > </edgeless-color-picker-button> `; @@ -408,7 +409,8 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) { > <edgeless-color-panel .value=${selectedColor} - .palettes=${PALETTES} + .theme=${colorScheme} + .palettes=${DefaultTheme.palettes} @select=${this._setTextColor} ></edgeless-color-panel> </editor-menu-button> diff --git a/blocksuite/blocks/src/root-block/widgets/frame-title/frame-title.ts b/blocksuite/blocks/src/root-block/widgets/frame-title/frame-title.ts index a6a55a2c89d78..7e4f587090fa2 100644 --- a/blocksuite/blocks/src/root-block/widgets/frame-title/frame-title.ts +++ b/blocksuite/blocks/src/root-block/widgets/frame-title/frame-title.ts @@ -1,4 +1,8 @@ -import { ColorScheme, FrameBlockModel } from '@blocksuite/affine-model'; +import { + ColorScheme, + FrameBlockModel, + isTransparent, +} from '@blocksuite/affine-model'; import { ThemeProvider } from '@blocksuite/affine-shared/services'; import { type BlockStdScope, @@ -19,7 +23,6 @@ import { LitElement } from 'lit'; import { property, state } from 'lit/decorators.js'; import { parseStringToRgba } from '../../edgeless/components/color-picker/utils.js'; -import { isTransparent } from '../../edgeless/components/panel/color-panel.js'; import type { EdgelessRootService } from '../../edgeless/index.js'; import { frameTitleStyle, frameTitleStyleVars } from './styles.js'; diff --git a/blocksuite/blocks/src/root-block/widgets/pie-menu/base.ts b/blocksuite/blocks/src/root-block/widgets/pie-menu/base.ts index 38dfb28d91390..339b683b78286 100644 --- a/blocksuite/blocks/src/root-block/widgets/pie-menu/base.ts +++ b/blocksuite/blocks/src/root-block/widgets/pie-menu/base.ts @@ -1,3 +1,4 @@ +import type { Color } from '@blocksuite/affine-model'; import type { TemplateResult } from 'lit'; import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js'; @@ -69,10 +70,10 @@ export interface PieSubmenuNodeModel extends PieBaseNodeModel { export interface PieColorNodeModel extends PieBaseNodeModel { type: 'color'; - color: string; + color: Color; hollowCircle: boolean; text?: string; - onChange: (color: string, ctx: PieMenuContext) => void; + onChange: (color: Color, ctx: PieMenuContext) => void; } export type IPieNodeWithAction = diff --git a/blocksuite/blocks/src/root-block/widgets/pie-menu/config.ts b/blocksuite/blocks/src/root-block/widgets/pie-menu/config.ts index bd91ae5da3336..8f6263bb28749 100644 --- a/blocksuite/blocks/src/root-block/widgets/pie-menu/config.ts +++ b/blocksuite/blocks/src/root-block/widgets/pie-menu/config.ts @@ -24,17 +24,13 @@ import { ViewBarIcon, } from '@blocksuite/affine-components/icons'; import { + type Color, ConnectorMode, - LINE_COLORS, - SHAPE_FILL_COLORS, + DefaultTheme, ShapeStyle, ShapeType, - STROKE_COLORS, } from '@blocksuite/affine-model'; -import { - EditPropsStore, - type LastProps, -} from '@blocksuite/affine-shared/services'; +import { EditPropsStore } from '@blocksuite/affine-shared/services'; import { isControlledKeyboardEvent } from '@blocksuite/affine-shared/utils'; import { html } from 'lit'; import { styleMap } from 'lit/directives/style-map.js'; @@ -79,12 +75,12 @@ pie.expandableCommand({ pie.colorPicker({ label: 'Pen Color', active: getActiveConnectorStrokeColor, - onChange: (color: string, { rootComponent }: PieMenuContext) => { + onChange: (color: Color, { rootComponent }: PieMenuContext) => { rootComponent.std.get(EditPropsStore).recordLastProps('brush', { - color: color as LastProps['brush']['color'], + color: color, }); }, - colors: LINE_COLORS.map(color => ({ color })), + colors: DefaultTheme.palettes, }); }, }); @@ -215,12 +211,12 @@ pie.command({ pie.colorPicker({ label: 'Line Color', active: getActiveConnectorStrokeColor, - onChange: (color: string, { rootComponent }: PieMenuContext) => { + onChange: (color: Color, { rootComponent }: PieMenuContext) => { rootComponent.std.get(EditPropsStore).recordLastProps('connector', { - stroke: color as LastProps['connector']['stroke'], + stroke: color, }); }, - colors: LINE_COLORS.map(color => ({ color })), + colors: DefaultTheme.palettes, }); pie.endSubmenu(); @@ -311,26 +307,26 @@ pie.command({ pie.colorPicker({ label: 'Fill', active: getActiveShapeColor('fill'), - onChange: (color: string, { rootComponent }: PieMenuContext) => { + onChange: (color: Color, { rootComponent }: PieMenuContext) => { rootComponent.std.get(EditPropsStore).recordLastProps('shape:roundedRect', { - fillColor: color as LastProps['shape:roundedRect']['fillColor'], + fillColor: color, }); updateShapeOverlay(rootComponent); }, - colors: SHAPE_FILL_COLORS.map(color => ({ color })), + colors: DefaultTheme.palettes, }); pie.colorPicker({ label: 'Stroke', hollow: true, active: getActiveShapeColor('stroke'), - onChange: (color: string, { rootComponent }: PieMenuContext) => { + onChange: (color: Color, { rootComponent }: PieMenuContext) => { rootComponent.std.get(EditPropsStore).recordLastProps('shape:roundedRect', { - strokeColor: color as LastProps['shape:roundedRect']['strokeColor'], + strokeColor: color, }); updateShapeOverlay(rootComponent); }, - colors: STROKE_COLORS.map(color => ({ color, name: 'Color' })), + colors: DefaultTheme.palettes, }); pie.endSubmenu(); diff --git a/blocksuite/blocks/src/root-block/widgets/pie-menu/pie-builder.ts b/blocksuite/blocks/src/root-block/widgets/pie-menu/pie-builder.ts index 014538635e28b..558ccaa252772 100644 --- a/blocksuite/blocks/src/root-block/widgets/pie-menu/pie-builder.ts +++ b/blocksuite/blocks/src/root-block/widgets/pie-menu/pie-builder.ts @@ -1,3 +1,4 @@ +import type { Color, Palette } from '@blocksuite/affine-model'; import { assertExists } from '@blocksuite/global/utils'; import { html } from 'lit'; @@ -15,11 +16,11 @@ import { calcNodeAngles, calcNodeWedges, isNodeWithChildren } from './utils.js'; export interface IPieColorPickerNodeProps { label: string; - active: (ctx: PieMenuContext) => string; + active: (ctx: PieMenuContext) => Color; onChange: PieColorNodeModel['onChange']; openOnHover?: PieSubmenuNodeModel['openOnHover']; hollow?: boolean; - colors: { color: string }[]; + colors: Palette[]; } type PieBuilderConstructorProps = Omit< @@ -130,17 +131,18 @@ export class PieMenuBuilder { label: props.label, role: 'color-picker', openOnHover: props.openOnHover ?? true, - children: props.colors.map(({ color }) => ({ + children: props.colors.map(palette => ({ icon: () => html`<edgeless-color-button class="large" - .color=${color} + .label=${palette.key} + .color=${palette.value} .hollowCircle=${hollow} ></edgeless-color-button>`, type: 'color', hollowCircle: hollow, - label: color, - color: color, + label: palette.key, + color: palette.value, onChange: props.onChange, })), }; diff --git a/blocksuite/blocks/src/root-block/widgets/pie-menu/utils.ts b/blocksuite/blocks/src/root-block/widgets/pie-menu/utils.ts index 48bd84ebd1b6b..69c5dfead84e9 100644 --- a/blocksuite/blocks/src/root-block/widgets/pie-menu/utils.ts +++ b/blocksuite/blocks/src/root-block/widgets/pie-menu/utils.ts @@ -31,7 +31,7 @@ export function getActiveShapeColor(type: 'fill' | 'stroke') { 'shape:roundedRect' ]; const color = type == 'fill' ? props.fillColor : props.strokeColor; - return color.toString(); + return color; } return ''; }; @@ -44,7 +44,7 @@ export function getActiveConnectorStrokeColor({ const props = rootComponent.std.get(EditPropsStore).lastProps$.value.connector; const color = props.stroke; - return color.toString(); + return color; } return ''; } diff --git a/blocksuite/blocks/src/surface-block/mini-mindmap/surface-block.ts b/blocksuite/blocks/src/surface-block/mini-mindmap/surface-block.ts index 6419548fc2131..a16843750d96e 100644 --- a/blocksuite/blocks/src/surface-block/mini-mindmap/surface-block.ts +++ b/blocksuite/blocks/src/surface-block/mini-mindmap/surface-block.ts @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/no-non-null-assertion */ import type { SurfaceBlockModel } from '@blocksuite/affine-block-surface'; import { CanvasRenderer, @@ -101,7 +100,7 @@ export class MindmapSurfaceBlock extends BlockComponent<SurfaceBlockModel> { provider: { selectedElements: () => [], getColorScheme: () => themeService.edgelessTheme, - getColorValue: (color: Color, fallback?: string, real?: boolean) => + getColorValue: (color: Color, fallback?: Color, real?: boolean) => themeService.getColorValue( color, fallback, diff --git a/blocksuite/blocks/src/surface-ref-block/portal/note.ts b/blocksuite/blocks/src/surface-ref-block/portal/note.ts index bf2c276a7d29c..b305466302d72 100644 --- a/blocksuite/blocks/src/surface-ref-block/portal/note.ts +++ b/blocksuite/blocks/src/surface-ref-block/portal/note.ts @@ -1,7 +1,7 @@ import type { CanvasRenderer } from '@blocksuite/affine-block-surface'; import type { NoteBlockModel } from '@blocksuite/affine-model'; import { - DEFAULT_NOTE_BACKGROUND_COLOR, + DefaultTheme, NoteDisplayMode, NoteShadow, } from '@blocksuite/affine-model'; @@ -74,7 +74,7 @@ export class SurfaceRefNotePortal extends WithDisposable(ShadowlessElement) { const backgroundColor = this.host.std .get(ThemeProvider) - .generateColorProperty(model.background, DEFAULT_NOTE_BACKGROUND_COLOR); + .generateColorProperty(model.background, DefaultTheme.noteBackgrounColor); const [modelX, modelY, modelW, modelH] = deserializeXYWH(model.xywh); const style = { diff --git a/blocksuite/presets/src/__tests__/edgeless/color-picker.spec.ts b/blocksuite/presets/src/__tests__/edgeless/color-picker.spec.ts index 77ac54b9685da..ed9c71f50aa5a 100644 --- a/blocksuite/presets/src/__tests__/edgeless/color-picker.spec.ts +++ b/blocksuite/presets/src/__tests__/edgeless/color-picker.spec.ts @@ -67,7 +67,6 @@ describe('theme service', () => { expect(themeService.generateColorProperty({ normal: 'grey' })).toBe('grey'); expect(themeService.generateColorProperty('', 'blue')).toBe('blue'); - expect(themeService.generateColorProperty({}, 'red')).toBe('red'); }); test('gets a color value', () => { diff --git a/blocksuite/presets/src/__tests__/edgeless/last-props.spec.ts b/blocksuite/presets/src/__tests__/edgeless/last-props.spec.ts index 5f2f4c891da65..593223934f832 100644 --- a/blocksuite/presets/src/__tests__/edgeless/last-props.spec.ts +++ b/blocksuite/presets/src/__tests__/edgeless/last-props.spec.ts @@ -2,26 +2,21 @@ import type { BlockStdScope } from '@blocksuite/block-std'; import { type BrushElementModel, type ConnectorElementModel, - DEFAULT_NOTE_BACKGROUND_COLOR, DEFAULT_NOTE_SHADOW, - DEFAULT_TEXT_COLOR, + DefaultTheme, type EdgelessRootBlockComponent, type EdgelessTextBlockModel, EditPropsStore, FontFamily, - FrameBackgroundColor, type FrameBlockModel, getSurfaceBlock, LayoutType, type MindmapElementModel, MindmapStyle, - NoteBackgroundColor, type NoteBlockModel, NoteShadow, type ShapeElementModel, - ShapeFillColor, ShapeType, - StrokeColor, type TextElementModel, } from '@blocksuite/blocks'; import { beforeEach, describe, expect, test } from 'vitest'; @@ -47,28 +42,28 @@ describe('apply last props', () => { // rect shape const rectId = service.addElement('shape', { shapeType: ShapeType.Rect }); const rectShape = service.getElementById(rectId) as ShapeElementModel; - expect(rectShape.fillColor).toBe(ShapeFillColor.Yellow); + expect(rectShape.fillColor).toEqual(DefaultTheme.FillColorMap.Yellow); service.updateElement(rectId, { - fillColor: ShapeFillColor.Orange, + fillColor: DefaultTheme.FillColorMap.Orange, }); expect( std.get(EditPropsStore).lastProps$.value[`shape:${ShapeType.Rect}`] .fillColor - ).toBe(ShapeFillColor.Orange); + ).toEqual(DefaultTheme.FillColorMap.Orange); // diamond shape const diamondId = service.addElement('shape', { shapeType: ShapeType.Diamond, }); const diamondShape = service.getElementById(diamondId) as ShapeElementModel; - expect(diamondShape.fillColor).toBe(ShapeFillColor.Yellow); + expect(diamondShape.fillColor).toEqual(DefaultTheme.FillColorMap.Yellow); service.updateElement(diamondId, { - fillColor: ShapeFillColor.Blue, + fillColor: DefaultTheme.FillColorMap.Blue, }); expect( std.get(EditPropsStore).lastProps$.value[`shape:${ShapeType.Diamond}`] .fillColor - ).toBe(ShapeFillColor.Blue); + ).toEqual(DefaultTheme.FillColorMap.Blue); // rounded rect shape const roundedRectId = service.addElement('shape', { @@ -78,18 +73,20 @@ describe('apply last props', () => { const roundedRectShape = service.getElementById( roundedRectId ) as ShapeElementModel; - expect(roundedRectShape.fillColor).toBe(ShapeFillColor.Yellow); + expect(roundedRectShape.fillColor).toEqual( + DefaultTheme.FillColorMap.Yellow + ); service.updateElement(roundedRectId, { - fillColor: ShapeFillColor.Green, + fillColor: DefaultTheme.FillColorMap.Green, }); expect( std.get(EditPropsStore).lastProps$.value['shape:roundedRect'].fillColor - ).toBe(ShapeFillColor.Green); + ).toEqual(DefaultTheme.FillColorMap.Green); // apply last props const rectId2 = service.addElement('shape', { shapeType: ShapeType.Rect }); const rectShape2 = service.getElementById(rectId2) as ShapeElementModel; - expect(rectShape2.fillColor).toBe(ShapeFillColor.Orange); + expect(rectShape2.fillColor).toEqual(DefaultTheme.FillColorMap.Orange); const diamondId2 = service.addElement('shape', { shapeType: ShapeType.Diamond, @@ -97,7 +94,7 @@ describe('apply last props', () => { const diamondShape2 = service.getElementById( diamondId2 ) as ShapeElementModel; - expect(diamondShape2.fillColor).toBe(ShapeFillColor.Blue); + expect(diamondShape2.fillColor).toEqual(DefaultTheme.FillColorMap.Blue); const roundedRectId2 = service.addElement('shape', { shapeType: ShapeType.Rect, @@ -106,13 +103,15 @@ describe('apply last props', () => { const roundedRectShape2 = service.getElementById( roundedRectId2 ) as ShapeElementModel; - expect(roundedRectShape2.fillColor).toBe(ShapeFillColor.Green); + expect(roundedRectShape2.fillColor).toEqual( + DefaultTheme.FillColorMap.Green + ); }); test('connector', () => { const id = service.addElement('connector', { mode: 0 }); const connector = service.getElementById(id) as ConnectorElementModel; - expect(connector.stroke).toBe(StrokeColor.Grey); + expect(connector.stroke).toEqual(DefaultTheme.StrokeColorMap.Grey); expect(connector.strokeWidth).toBe(2); expect(connector.strokeStyle).toBe('solid'); expect(connector.frontEndpointStyle).toBe('None'); @@ -124,7 +123,7 @@ describe('apply last props', () => { expect(connector2.strokeWidth).toBe(10); service.updateElement(id2, { labelStyle: { - color: StrokeColor.Magenta, + color: DefaultTheme.StrokeColorMap.Magenta, fontFamily: FontFamily.Kalam, }, }); @@ -132,14 +131,16 @@ describe('apply last props', () => { const id3 = service.addElement('connector', { mode: 1 }); const connector3 = service.getElementById(id3) as ConnectorElementModel; expect(connector3.strokeWidth).toBe(10); - expect(connector3.labelStyle.color).toBe(StrokeColor.Magenta); + expect(connector3.labelStyle.color).toEqual( + DefaultTheme.StrokeColorMap.Magenta + ); expect(connector3.labelStyle.fontFamily).toBe(FontFamily.Kalam); }); test('brush', () => { const id = service.addElement('brush', {}); const brush = service.getElementById(id) as BrushElementModel; - expect(brush.color).toEqual(StrokeColor.Black); + expect(brush.color).toEqual(DefaultTheme.StrokeColorMap.Black); expect(brush.lineWidth).toBe(4); service.updateElement(id, { lineWidth: 10 }); const secondBrush = service.getElementById( @@ -179,26 +180,26 @@ describe('apply last props', () => { const surface = getSurfaceBlock(doc); const id = service.addBlock('affine:edgeless-text', {}, surface!.id); const text = service.getElementById(id) as EdgelessTextBlockModel; - expect(text.color).toBe(DEFAULT_TEXT_COLOR); + expect(text.color).toEqual(DefaultTheme.textColor); expect(text.fontFamily).toBe(FontFamily.Inter); service.updateElement(id, { - color: StrokeColor.Green, + color: DefaultTheme.StrokeColorMap.Green, fontFamily: FontFamily.OrelegaOne, }); const id2 = service.addBlock('affine:edgeless-text', {}, surface!.id); const text2 = service.getElementById(id2) as EdgelessTextBlockModel; - expect(text2.color).toBe(StrokeColor.Green); + expect(text2.color).toEqual(DefaultTheme.StrokeColorMap.Green); expect(text2.fontFamily).toBe(FontFamily.OrelegaOne); }); test('note', () => { const id = service.addBlock('affine:note', {}, doc.root!.id); const note = service.getElementById(id) as NoteBlockModel; - expect(note.background).toBe(DEFAULT_NOTE_BACKGROUND_COLOR); + expect(note.background).toEqual(DefaultTheme.noteBackgrounColor); expect(note.edgeless.style.shadowType).toBe(DEFAULT_NOTE_SHADOW); service.updateElement(id, { - background: NoteBackgroundColor.Purple, + background: DefaultTheme.NoteBackgroundColorMap.Purple, edgeless: { style: { shadowType: NoteShadow.Film, @@ -208,7 +209,9 @@ describe('apply last props', () => { const id2 = service.addBlock('affine:note', {}, doc.root!.id); const note2 = service.getElementById(id2) as NoteBlockModel; - expect(note2.background).toBe(NoteBackgroundColor.Purple); + expect(note2.background).toEqual( + DefaultTheme.NoteBackgroundColorMap.Purple + ); expect(note2.edgeless.style.shadowType).toBe(NoteShadow.Film); }); @@ -218,12 +221,12 @@ describe('apply last props', () => { const note = service.getElementById(id) as FrameBlockModel; expect(note.background).toBe('transparent'); service.updateElement(id, { - background: FrameBackgroundColor.Purple, + background: DefaultTheme.FillColorMap.Purple, }); const id2 = service.addBlock('affine:frame', {}, surface!.id); const frame2 = service.getElementById(id2) as FrameBlockModel; - expect(frame2.background).toBe(FrameBackgroundColor.Purple); + expect(frame2.background).toEqual(DefaultTheme.FillColorMap.Purple); service.updateElement(id, { background: { normal: '#def4e740' }, }); diff --git a/blocksuite/presets/src/__tests__/edgeless/surface-model.spec.ts b/blocksuite/presets/src/__tests__/edgeless/surface-model.spec.ts index b3d0b1aefeb26..c29018168efa3 100644 --- a/blocksuite/presets/src/__tests__/edgeless/surface-model.spec.ts +++ b/blocksuite/presets/src/__tests__/edgeless/surface-model.spec.ts @@ -1,10 +1,10 @@ -import { - type BrushElementModel, - type GroupElementModel, - type ShapeElementModel, - StrokeColor, - type SurfaceBlockModel, +import type { + BrushElementModel, + GroupElementModel, + ShapeElementModel, + SurfaceBlockModel, } from '@blocksuite/blocks'; +import { DefaultTheme } from '@blocksuite/blocks'; import { beforeEach, describe, expect, test, vi } from 'vitest'; import { wait } from '../utils/common.js'; @@ -72,7 +72,7 @@ describe('element model', () => { const element = model.getElementById(id)! as ShapeElementModel; expect(element.index).toBe('a0'); - expect(element.strokeColor).toBe(StrokeColor.Yellow); + expect(element.strokeColor).toBe(DefaultTheme.shapeStrokeColor); expect(element.strokeWidth).toBe(4); }); @@ -94,7 +94,7 @@ describe('element model', () => { const element = model.getElementById(id)! as ShapeElementModel; - expect(element.yMap.get('strokeColor')).toBe(StrokeColor.Yellow); + expect(element.yMap.get('strokeColor')).toBe(DefaultTheme.shapeStrokeColor); element.strokeColor = '--affine-palette-line-black'; expect(element.yMap.get('strokeColor')).toBe('--affine-palette-line-black'); diff --git a/blocksuite/tests-legacy/attachment.spec.ts b/blocksuite/tests-legacy/attachment.spec.ts index 74d3974901558..c0b84c5be2c82 100644 --- a/blocksuite/tests-legacy/attachment.spec.ts +++ b/blocksuite/tests-legacy/attachment.spec.ts @@ -144,7 +144,12 @@ test('can insert attachment from slash menu', async ({ page }) => { page, ` <affine:note - prop:background="--affine-v2-edgeless-note-white" + prop:background={ + Object { + "dark": "#000000", + "light": "#ffffff", + } + } prop:displayMode="both" prop:edgeless={ Object { @@ -191,7 +196,12 @@ test('should undo/redo works for attachment', async ({ page }) => { await assertStoreMatchJSX( page, ` <affine:note - prop:background="--affine-v2-edgeless-note-white" + prop:background={ + Object { + "dark": "#000000", + "light": "#ffffff", + } + } prop:displayMode="both" prop:edgeless={ Object { @@ -229,7 +239,12 @@ test('should undo/redo works for attachment', async ({ page }) => { page, ` <affine:note - prop:background="--affine-v2-edgeless-note-white" + prop:background={ + Object { + "dark": "#000000", + "light": "#ffffff", + } + } prop:displayMode="both" prop:edgeless={ Object { @@ -260,7 +275,12 @@ test('should undo/redo works for attachment', async ({ page }) => { page, ` <affine:note - prop:background="--affine-v2-edgeless-note-white" + prop:background={ + Object { + "dark": "#000000", + "light": "#ffffff", + } + } prop:displayMode="both" prop:edgeless={ Object { @@ -348,7 +368,12 @@ test('should turn attachment to image works', async ({ page }) => { page, ` <affine:note - prop:background="--affine-v2-edgeless-note-white" + prop:background={ + Object { + "dark": "#000000", + "light": "#ffffff", + } + } prop:displayMode="both" prop:edgeless={ Object { @@ -382,7 +407,12 @@ test('should turn attachment to image works', async ({ page }) => { page, ` <affine:note - prop:background="--affine-v2-edgeless-note-white" + prop:background={ + Object { + "dark": "#000000", + "light": "#ffffff", + } + } prop:displayMode="both" prop:edgeless={ Object { @@ -431,7 +461,12 @@ test('should attachment can be deleted', async ({ page }) => { page, ` <affine:note - prop:background="--affine-v2-edgeless-note-white" + prop:background={ + Object { + "dark": "#000000", + "light": "#ffffff", + } + } prop:displayMode="both" prop:edgeless={ Object { @@ -475,7 +510,12 @@ test.fixme(`support dragging attachment block directly`, async ({ page }) => { await assertStoreMatchJSX( page, ` <affine:note - prop:background="--affine-v2-edgeless-note-white" + prop:background={ + Object { + "dark": "#000000", + "light": "#ffffff", + } + } prop:displayMode="both" prop:edgeless={ Object { @@ -531,7 +571,12 @@ test.fixme(`support dragging attachment block directly`, async ({ page }) => { page, /*xml*/ `<affine:page> <affine:note - prop:background="--affine-v2-edgeless-note-white" + prop:background={ + Object { + "dark": "#000000", + "light": "#ffffff", + } + } prop:displayMode="both" prop:edgeless={ Object { @@ -589,7 +634,12 @@ test.fixme(`support dragging attachment block directly`, async ({ page }) => { page, /*xml*/ `<affine:page> <affine:note - prop:background="--affine-v2-edgeless-note-white" + prop:background={ + Object { + "dark": "#000000", + "light": "#ffffff", + } + } prop:displayMode="both" prop:edgeless={ Object { diff --git a/blocksuite/tests-legacy/clipboard/list.spec.ts b/blocksuite/tests-legacy/clipboard/list.spec.ts index 9ab0af6510bda..bb1e526c0cfe1 100644 --- a/blocksuite/tests-legacy/clipboard/list.spec.ts +++ b/blocksuite/tests-legacy/clipboard/list.spec.ts @@ -1,4 +1,5 @@ import { expect } from '@playwright/test'; +import { lightThemeV2 } from '@toeverything/theme/v2'; import { initDatabaseColumn } from '../database/actions.js'; import { @@ -441,7 +442,12 @@ test(scoped`should copy and paste of database work`, async ({ page }) => { /*xml*/ ` <affine:page> <affine:note - prop:background="--affine-v2-edgeless-note-white" + prop:background={ + Object { + "dark": "#000000", + "light": "#ffffff", + } + } prop:displayMode="both" prop:edgeless={ Object { @@ -491,7 +497,12 @@ test(scoped`should copy and paste of database work`, async ({ page }) => { /*xml*/ ` <affine:page> <affine:note - prop:background="--affine-v2-edgeless-note-white" + prop:background={ + Object { + "dark": "#000000", + "light": "#ffffff", + } + } prop:displayMode="both" prop:edgeless={ Object { @@ -574,9 +585,12 @@ test(scoped`paste note block with background`, async ({ page }) => { await selectNoteInEdgeless(page, ids.noteId); await triggerComponentToolbarAction(page, 'changeNoteColor'); - const color = '--affine-v2-edgeless-note-grey'; - await changeEdgelessNoteBackground(page, color); - await assertEdgelessNoteBackground(page, ids.noteId, color); + await changeEdgelessNoteBackground(page, 'White'); + await assertEdgelessNoteBackground( + page, + ids.noteId, + lightThemeV2['edgeless/note/white'] + ); await copyByKeyboard(page); @@ -584,7 +598,11 @@ test(scoped`paste note block with background`, async ({ page }) => { await pasteByKeyboard(page, false); const noteIds = await getAllNoteIds(page); for (const noteId of noteIds) { - await assertEdgelessNoteBackground(page, noteId, color); + await assertEdgelessNoteBackground( + page, + noteId, + lightThemeV2['edgeless/note/white'] + ); } }); diff --git a/blocksuite/tests-legacy/edgeless/auto-complete.spec.ts b/blocksuite/tests-legacy/edgeless/auto-complete.spec.ts index b8776ffff7d6c..315e3dd3bd9e8 100644 --- a/blocksuite/tests-legacy/edgeless/auto-complete.spec.ts +++ b/blocksuite/tests-legacy/edgeless/auto-complete.spec.ts @@ -1,9 +1,5 @@ -import { - DEFAULT_NOTE_BACKGROUND_COLOR, - ShapeFillColor, - StrokeColor, -} from '@blocksuite/affine-model'; import { expect, type Page } from '@playwright/test'; +import { lightThemeV2 } from '@toeverything/theme/v2'; import { clickView, moveView } from '../utils/actions/click.js'; import { dragBetweenCoords } from '../utils/actions/drag.js'; @@ -139,11 +135,9 @@ test.describe('auto-complete', () => { await createShapeElement(page, [0, 0], [100, 100], Shape.Square); await assertSelectedBound(page, [0, 0, 100, 100]); await triggerComponentToolbarAction(page, 'changeShapeStrokeColor'); - const lineColor = StrokeColor.Red; - await changeShapeStrokeColor(page, lineColor); + await changeShapeStrokeColor(page, 'MediumRed'); await triggerComponentToolbarAction(page, 'changeShapeFillColor'); - const color = ShapeFillColor.Green; - await changeShapeFillColor(page, color); + await changeShapeFillColor(page, 'HeavyGreen'); await dragBetweenViewCoords(page, [120, 50], [200, 0]); const noteButton = getAutoCompletePanelButton(page, 'note'); @@ -168,7 +162,7 @@ test.describe('auto-complete', () => { await assertEdgelessNoteBackground( page, noteId, - DEFAULT_NOTE_BACKGROUND_COLOR + lightThemeV2['edgeless/note/white'] ); const rect = await edgelessNote.boundingBox(); @@ -181,15 +175,18 @@ test.describe('auto-complete', () => { // select connector await dragBetweenViewCoords(page, [140, 50], [160, 0]); await waitNextFrame(page); - await assertConnectorStrokeColor(page, lineColor); + await assertConnectorStrokeColor( + page, + 'MediumRed', + lightThemeV2['edgeless/palette/medium/redMedium'] + ); // select note block await page.mouse.click(rect.x + rect.width / 2, rect.y + rect.height / 2); await waitNextFrame(page); await triggerComponentToolbarAction(page, 'changeNoteColor'); - const noteColor = '--affine-v2-edgeless-note-red'; - await changeEdgelessNoteBackground(page, noteColor); + await changeEdgelessNoteBackground(page, 'Red'); // move to arrow icon await page.mouse.move( @@ -223,7 +220,11 @@ test.describe('auto-complete', () => { return note?.getAttribute('data-block-id'); }); assertExists(noteId2); - await assertEdgelessNoteBackground(page, noteId, noteColor); + await assertEdgelessNoteBackground( + page, + noteId, + lightThemeV2['edgeless/note/red'] + ); expect(await edgelessNote.count()).toBe(2); }); diff --git a/blocksuite/tests-legacy/edgeless/brush.spec.ts b/blocksuite/tests-legacy/edgeless/brush.spec.ts index 54b395d6e21f7..8f7d6b8a1b8b9 100644 --- a/blocksuite/tests-legacy/edgeless/brush.spec.ts +++ b/blocksuite/tests-legacy/edgeless/brush.spec.ts @@ -1,5 +1,5 @@ -import { StrokeColor } from '@blocksuite/affine-model'; import { expect } from '@playwright/test'; +import { lightThemeV2 } from '@toeverything/theme/v2'; import { assertEdgelessTool, @@ -80,15 +80,14 @@ test('add brush element with color', async ({ page }) => { await switchEditorMode(page); await setEdgelessTool(page, 'brush'); - const color = StrokeColor.Blue; - await selectBrushColor(page, color); + await selectBrushColor(page, 'Blue'); const start = { x: 100, y: 100 }; const end = { x: 200, y: 200 }; await dragBetweenCoords(page, start, end, { steps: 100 }); const [pickedColor] = await pickColorAtPoints(page, [[110, 110]]); - + const color = lightThemeV2['edgeless/palette/medium/blueMedium']; await assertEdgelessColorSameWithHexColor(page, color, pickedColor); }); @@ -101,8 +100,8 @@ test('keep same color when mouse mode switched back to brush', async ({ await deleteAll(page); await setEdgelessTool(page, 'brush'); - const color = StrokeColor.Blue; - await selectBrushColor(page, color); + await selectBrushColor(page, 'Blue'); + const start = { x: 200, y: 200 }; const end = { x: 300, y: 300 }; await dragBetweenCoords(page, start, end, { steps: 100 }); @@ -113,7 +112,9 @@ test('keep same color when mouse mode switched back to brush', async ({ await setEdgelessTool(page, 'brush'); const origin = { x: 100, y: 100 }; await dragBetweenCoords(page, origin, start, { steps: 100 }); + const [pickedColor] = await pickColorAtPoints(page, [[110, 110]]); + const color = lightThemeV2['edgeless/palette/medium/blueMedium']; await assertEdgelessColorSameWithHexColor(page, color, pickedColor); }); @@ -124,8 +125,7 @@ test('add brush element with different size', async ({ page }) => { await setEdgelessTool(page, 'brush'); await selectBrushSize(page, 'ten'); - const color = StrokeColor.Blue; - await selectBrushColor(page, color); + await selectBrushColor(page, 'Blue'); const start = { x: 100, y: 100 }; const end = { x: 200, y: 100 }; @@ -143,6 +143,7 @@ test('add brush element with different size', async ({ page }) => { [110, 105], ]); + const color = lightThemeV2['edgeless/palette/medium/blueMedium']; await assertEdgelessColorSameWithHexColor(page, color, topEdge); await assertEdgelessColorSameWithHexColor(page, color, bottomEdge); assertSameColor(nearTopEdge, '#84cfff'); diff --git a/blocksuite/tests-legacy/edgeless/connector/connector.spec.ts b/blocksuite/tests-legacy/edgeless/connector/connector.spec.ts index 38fbf3fa7d227..f614216ad8b93 100644 --- a/blocksuite/tests-legacy/edgeless/connector/connector.spec.ts +++ b/blocksuite/tests-legacy/edgeless/connector/connector.spec.ts @@ -1,4 +1,3 @@ -import { StrokeColor } from '@blocksuite/affine-model'; import { expect } from '@playwright/test'; import { @@ -149,7 +148,7 @@ test('change connector line width', async ({ page }) => { await page.mouse.click(start.x + 5, start.y); await triggerComponentToolbarAction(page, 'changeConnectorStrokeColor'); - await changeConnectorStrokeColor(page, StrokeColor.Grey); + await changeConnectorStrokeColor(page, 'MediumGrey'); await triggerComponentToolbarAction(page, 'changeConnectorStrokeStyles'); await changeConnectorStrokeWidth(page, 5); @@ -174,7 +173,7 @@ test('change connector stroke style', async ({ page }) => { await page.mouse.click(start.x + 5, start.y); await triggerComponentToolbarAction(page, 'changeConnectorStrokeColor'); - await changeConnectorStrokeColor(page, StrokeColor.Grey); + await changeConnectorStrokeColor(page, 'MediumGrey'); await triggerComponentToolbarAction(page, 'changeConnectorStrokeStyles'); await changeConnectorStrokeStyle(page, 'dash'); diff --git a/blocksuite/tests-legacy/edgeless/lock.spec.ts b/blocksuite/tests-legacy/edgeless/lock.spec.ts index b5e5863aa74f8..5a0a18f9ee392 100644 --- a/blocksuite/tests-legacy/edgeless/lock.spec.ts +++ b/blocksuite/tests-legacy/edgeless/lock.spec.ts @@ -59,7 +59,6 @@ test.describe('lock', () => { test('edgeless element can be locked and unlocked', async ({ page }) => { await edgelessCommonSetup(page); - // eslint-disable-next-line @typescript-eslint/no-explicit-any const wrapTest = async <F extends (...args: any) => any>( elementCreateFn: F, ...args: Parameters<F> diff --git a/blocksuite/tests-legacy/edgeless/note/note.spec.ts b/blocksuite/tests-legacy/edgeless/note/note.spec.ts index 2a64bddd9a401..d1c092ba0a618 100644 --- a/blocksuite/tests-legacy/edgeless/note/note.spec.ts +++ b/blocksuite/tests-legacy/edgeless/note/note.spec.ts @@ -4,6 +4,7 @@ import { NoteDisplayMode, } from '@blocksuite/affine-model'; import { expect } from '@playwright/test'; +import { lightThemeV2 } from '@toeverything/theme/v2'; import { activeNoteInEdgeless, @@ -304,14 +305,17 @@ test('change note color', async ({ page }) => { await assertEdgelessNoteBackground( page, noteId, - '--affine-v2-edgeless-note-white' + lightThemeV2['edgeless/note/white'] ); await selectNoteInEdgeless(page, noteId); await triggerComponentToolbarAction(page, 'changeNoteColor'); - const color = '--affine-v2-edgeless-note-green'; - await changeEdgelessNoteBackground(page, color); - await assertEdgelessNoteBackground(page, noteId, color); + await changeEdgelessNoteBackground(page, 'Green'); + await assertEdgelessNoteBackground( + page, + noteId, + lightThemeV2['edgeless/note/green'] + ); }); test('cursor for active and inactive state', async ({ page }) => { diff --git a/blocksuite/tests-legacy/edgeless/shape.spec.ts b/blocksuite/tests-legacy/edgeless/shape.spec.ts index a4babb9fe6055..8ccb9cd22413c 100644 --- a/blocksuite/tests-legacy/edgeless/shape.spec.ts +++ b/blocksuite/tests-legacy/edgeless/shape.spec.ts @@ -1,5 +1,5 @@ -import { ShapeFillColor, StrokeColor } from '@blocksuite/affine-model'; import { expect, type Page } from '@playwright/test'; +import { lightThemeV2 } from '@toeverything/theme/v2'; import { assertEdgelessTool, @@ -168,14 +168,17 @@ test.skip('change shape fill color', async ({ page }) => { await page.mouse.click(rect.start.x + 5, rect.start.y + 5); await triggerComponentToolbarAction(page, 'changeShapeFillColor'); - const color = ShapeFillColor.Grey; - await changeShapeFillColor(page, color); + await changeShapeFillColor(page, 'MediumGrey'); await page.waitForTimeout(50); const [picked] = await pickColorAtPoints(page, [ [rect.start.x + 20, rect.start.y + 20], ]); - await assertEdgelessColorSameWithHexColor(page, color, picked); + await assertEdgelessColorSameWithHexColor( + page, + lightThemeV2['edgeless/palette/medium/greyMedium'], + picked + ); }); test('change shape stroke color', async ({ page }) => { @@ -191,14 +194,17 @@ test('change shape stroke color', async ({ page }) => { await page.mouse.click(rect.start.x + 5, rect.start.y + 5); await triggerComponentToolbarAction(page, 'changeShapeStrokeColor'); - const color = StrokeColor.Grey; - await changeShapeStrokeColor(page, color); + await changeShapeStrokeColor(page, 'HeavyYellow'); await page.waitForTimeout(50); const [picked] = await pickColorAtPoints(page, [ [rect.start.x + 1, rect.start.y + 1], ]); - await assertEdgelessColorSameWithHexColor(page, color, picked); + await assertEdgelessColorSameWithHexColor( + page, + lightThemeV2['edgeless/palette/heavy/yellow'], + picked + ); }); test('the tooltip of shape tool button should be hidden when the shape menu is shown', async ({ @@ -339,7 +345,7 @@ test('change shape stroke width', async ({ page }) => { await page.mouse.click(start.x + 5, start.y + 5); await triggerComponentToolbarAction(page, 'changeShapeStrokeColor'); - await changeShapeStrokeColor(page, StrokeColor.Magenta); + await changeShapeStrokeColor(page, 'MediumMagenta'); await triggerComponentToolbarAction(page, 'changeShapeStrokeStyles'); await changeShapeStrokeWidth(page); @@ -362,7 +368,7 @@ test('change shape stroke style', async ({ page }) => { await page.mouse.click(start.x + 5, start.y + 5); await triggerComponentToolbarAction(page, 'changeShapeStrokeColor'); - await changeShapeStrokeColor(page, StrokeColor.Blue); + await changeShapeStrokeColor(page, 'MediumBlue'); await triggerComponentToolbarAction(page, 'changeShapeStrokeStyles'); await changeShapeStrokeStyle(page, 'dash'); @@ -549,12 +555,16 @@ test('change shape style', async ({ page }) => { await page.mouse.click(start.x + 5, start.y + 5); await triggerComponentToolbarAction(page, 'changeShapeStrokeColor'); - const color = StrokeColor.Purple; + const color = 'LightPurple'; await changeShapeStrokeColor(page, color); await page.waitForTimeout(50); const [picked] = await pickColorAtPoints(page, [[start.x + 1, start.y + 1]]); - await assertEdgelessColorSameWithHexColor(page, color, picked); + await assertEdgelessColorSameWithHexColor( + page, + lightThemeV2['edgeless/palette/light/purpleLight'], + picked + ); }); test('shape adds text by button', async ({ page }) => { diff --git a/blocksuite/tests-legacy/inline/inline-editor.spec.ts b/blocksuite/tests-legacy/inline/inline-editor.spec.ts index a1eaa110729d5..623187686937b 100644 --- a/blocksuite/tests-legacy/inline/inline-editor.spec.ts +++ b/blocksuite/tests-legacy/inline/inline-editor.spec.ts @@ -251,7 +251,6 @@ test('readonly mode', async ({ page }) => { throw new Error('Cannot find editor'); } - // eslint-disable-next-line @typescript-eslint/no-explicit-any (richTextA as any).inlineEditor.setReadonly(true); }); @@ -834,13 +833,11 @@ test('yText should not contain \r', async ({ page }) => { throw new Error('Cannot find test-rich-text'); } - // eslint-disable-next-line @typescript-eslint/no-explicit-any const editor = (richText as any).inlineEditor as InlineEditor; try { editor.insertText({ index: 0, length: 0 }, 'abc\r'); } catch (e) { - // eslint-disable-next-line @typescript-eslint/no-explicit-any return (e as any).message; } }); diff --git a/blocksuite/tests-legacy/link.spec.ts b/blocksuite/tests-legacy/link.spec.ts index a2e4c3dbdb3a6..568a3eb8aa7c1 100644 --- a/blocksuite/tests-legacy/link.spec.ts +++ b/blocksuite/tests-legacy/link.spec.ts @@ -476,7 +476,7 @@ test.skip('convert link to embed', async ({ page }) => { ` <affine:page> <affine:note - prop:background="--affine-v2-edgeless-note-white" + prop:background="--affine-note-background-blue" prop:displayMode="both" prop:edgeless={ Object { @@ -493,7 +493,7 @@ test.skip('convert link to embed', async ({ page }) => { prop:lockedBySelf={false} > <affine:paragraph - prop:collapsed={false} + prop:collapsed={false} prop:text="aaa" prop:type="text" /> diff --git a/blocksuite/tests-legacy/package.json b/blocksuite/tests-legacy/package.json index be6c998777920..96130a8dcae3e 100644 --- a/blocksuite/tests-legacy/package.json +++ b/blocksuite/tests-legacy/package.json @@ -11,6 +11,9 @@ "@blocksuite/block-std": "workspace:*", "@blocksuite/global": "workspace:*", "@blocksuite/presets": "workspace:*", + "@toeverything/theme": "^1.1.2" + }, + "devDependencies": { "@playwright/test": "=1.49.1" }, "repository": { diff --git a/blocksuite/tests-legacy/slash-menu.spec.ts b/blocksuite/tests-legacy/slash-menu.spec.ts index ec3569d27a79f..3e9f8a88e7531 100644 --- a/blocksuite/tests-legacy/slash-menu.spec.ts +++ b/blocksuite/tests-legacy/slash-menu.spec.ts @@ -879,13 +879,13 @@ test.describe('slash menu with customize menu', () => { const SlashMenuWidget = window.$blocksuite.blocks.AffineSlashMenuWidget; class CustomSlashMenu extends SlashMenuWidget { - config = { + override config = { ...SlashMenuWidget.DEFAULT_CONFIG, items: [ { groupName: 'Custom Menu' }, { name: 'Custom Menu Item', - // eslint-disable-next-line @typescript-eslint/no-explicit-any + icon: '' as any, action: () => { // do nothing @@ -893,7 +893,7 @@ test.describe('slash menu with customize menu', () => { }, { name: 'Custom Menu Item', - // eslint-disable-next-line @typescript-eslint/no-explicit-any + icon: '' as any, action: () => { // do nothing diff --git a/blocksuite/tests-legacy/snapshots/basic.spec.ts/automatic-identify-url-text-final.json b/blocksuite/tests-legacy/snapshots/basic.spec.ts/automatic-identify-url-text-final.json index 843eb81aa52f6..b13c64a57084b 100644 --- a/blocksuite/tests-legacy/snapshots/basic.spec.ts/automatic-identify-url-text-final.json +++ b/blocksuite/tests-legacy/snapshots/basic.spec.ts/automatic-identify-url-text-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/basic.spec.ts/basic-test-default.json b/blocksuite/tests-legacy/snapshots/basic.spec.ts/basic-test-default.json index db5fa1b07dbc0..88deb243a5c6f 100644 --- a/blocksuite/tests-legacy/snapshots/basic.spec.ts/basic-test-default.json +++ b/blocksuite/tests-legacy/snapshots/basic.spec.ts/basic-test-default.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-bookmark-url-by-copy-button-final.json b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-bookmark-url-by-copy-button-final.json index 491ed8236484e..136bd94760f89 100644 --- a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-bookmark-url-by-copy-button-final.json +++ b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-bookmark-url-by-copy-button-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-url-to-create-bookmark-in-edgeless-mode-final.json b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-url-to-create-bookmark-in-edgeless-mode-final.json index 954961ef5651a..8e72ee50be099 100644 --- a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-url-to-create-bookmark-in-edgeless-mode-final.json +++ b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-url-to-create-bookmark-in-edgeless-mode-final.json @@ -27,7 +27,10 @@ "version": 1, "props": { "xywh": "[0,0,498,234]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-url-to-create-bookmark-in-page-mode-final.json b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-url-to-create-bookmark-in-page-mode-final.json index f949b1b5596ab..70629dd2faa6a 100644 --- a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-url-to-create-bookmark-in-page-mode-final.json +++ b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-url-to-create-bookmark-in-page-mode-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/covert-bookmark-block-to-link-text-final.json b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/covert-bookmark-block-to-link-text-final.json index 14142efb9d1e0..6d9d9e11f5015 100644 --- a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/covert-bookmark-block-to-link-text-final.json +++ b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/covert-bookmark-block-to-link-text-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/create-bookmark-by-slash-menu-final.json b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/create-bookmark-by-slash-menu-final.json index 0dfcd5aa4f0c5..bfef5d3b694aa 100644 --- a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/create-bookmark-by-slash-menu-final.json +++ b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/create-bookmark-by-slash-menu-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/embed-figma.json b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/embed-figma.json index e976f0683f4e5..bd9bc5b3bef11 100644 --- a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/embed-figma.json +++ b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/embed-figma.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/embed-youtube.json b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/embed-youtube.json index 50aa56ab8e9ac..558a37751196f 100644 --- a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/embed-youtube.json +++ b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/embed-youtube.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/horizontal-figma.json b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/horizontal-figma.json index d8e3252e69edd..cd0d1e0124ab8 100644 --- a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/horizontal-figma.json +++ b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/horizontal-figma.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/horizontal-youtube.json b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/horizontal-youtube.json index c28ac11214bb9..d1d3f3c5b6602 100644 --- a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/horizontal-youtube.json +++ b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/horizontal-youtube.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-after-add-paragraph.json b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-after-add-paragraph.json index f36048f47895b..c40930225c84a 100644 --- a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-after-add-paragraph.json +++ b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-after-add-paragraph.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-after-drag.json b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-after-drag.json index efa52affa8fa2..0aca45a174f95 100644 --- a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-after-drag.json +++ b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-after-drag.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", @@ -110,4 +113,4 @@ ] } ] -} +} \ No newline at end of file diff --git a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-init.json b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-init.json index 962a981684b2f..d292befbe16ee 100644 --- a/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-init.json +++ b/blocksuite/tests-legacy/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", @@ -53,4 +56,4 @@ ] } ] -} +} \ No newline at end of file diff --git a/blocksuite/tests-legacy/snapshots/clipboard/clipboard.spec.ts/auto-identify-url-final.json b/blocksuite/tests-legacy/snapshots/clipboard/clipboard.spec.ts/auto-identify-url-final.json index b1cc7f93d4277..6c6a8fbbd044c 100644 --- a/blocksuite/tests-legacy/snapshots/clipboard/clipboard.spec.ts/auto-identify-url-final.json +++ b/blocksuite/tests-legacy/snapshots/clipboard/clipboard.spec.ts/auto-identify-url-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/cut-will-delete-all-content-and-copy-will-reappear-content-after-cut.json b/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/cut-will-delete-all-content-and-copy-will-reappear-content-after-cut.json index f67273240fa85..fac8595cb1c41 100644 --- a/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/cut-will-delete-all-content-and-copy-will-reappear-content-after-cut.json +++ b/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/cut-will-delete-all-content-and-copy-will-reappear-content-after-cut.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/cut-will-delete-all-content-and-copy-will-reappear-content-after-paste.json b/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/cut-will-delete-all-content-and-copy-will-reappear-content-after-paste.json index 9bdfa2500d818..c0ed3d2daf0ed 100644 --- a/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/cut-will-delete-all-content-and-copy-will-reappear-content-after-paste.json +++ b/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/cut-will-delete-all-content-and-copy-will-reappear-content-after-paste.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/should-keep-paragraph-block-s-type-when-pasting-at-the-start-of-empty-paragraph-block-except-type-text-after-paste-1.json b/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/should-keep-paragraph-block-s-type-when-pasting-at-the-start-of-empty-paragraph-block-except-type-text-after-paste-1.json index ffb61bcbd884a..2f322f2111f1d 100644 --- a/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/should-keep-paragraph-block-s-type-when-pasting-at-the-start-of-empty-paragraph-block-except-type-text-after-paste-1.json +++ b/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/should-keep-paragraph-block-s-type-when-pasting-at-the-start-of-empty-paragraph-block-except-type-text-after-paste-1.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/should-keep-paragraph-block-s-type-when-pasting-at-the-start-of-empty-paragraph-block-except-type-text-after-paste-2.json b/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/should-keep-paragraph-block-s-type-when-pasting-at-the-start-of-empty-paragraph-block-except-type-text-after-paste-2.json index b00a4548f5e21..2ac573b63f986 100644 --- a/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/should-keep-paragraph-block-s-type-when-pasting-at-the-start-of-empty-paragraph-block-except-type-text-after-paste-2.json +++ b/blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/should-keep-paragraph-block-s-type-when-pasting-at-the-start-of-empty-paragraph-block-except-type-text-after-paste-2.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/code/copy-paste.spec.ts/code-block-has-content-click-code-block-copy-menu-copy-whole-code-block-pasted.json b/blocksuite/tests-legacy/snapshots/code/copy-paste.spec.ts/code-block-has-content-click-code-block-copy-menu-copy-whole-code-block-pasted.json index a4b4b4e23f722..6e25e939450d0 100644 --- a/blocksuite/tests-legacy/snapshots/code/copy-paste.spec.ts/code-block-has-content-click-code-block-copy-menu-copy-whole-code-block-pasted.json +++ b/blocksuite/tests-legacy/snapshots/code/copy-paste.spec.ts/code-block-has-content-click-code-block-copy-menu-copy-whole-code-block-pasted.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/code/copy-paste.spec.ts/code-block-is-empty-click-code-block-copy-menu-copy-the-empty-code-block-pasted.json b/blocksuite/tests-legacy/snapshots/code/copy-paste.spec.ts/code-block-is-empty-click-code-block-copy-menu-copy-the-empty-code-block-pasted.json index 5493ce26bb505..b6a56a9b2338b 100644 --- a/blocksuite/tests-legacy/snapshots/code/copy-paste.spec.ts/code-block-is-empty-click-code-block-copy-menu-copy-the-empty-code-block-pasted.json +++ b/blocksuite/tests-legacy/snapshots/code/copy-paste.spec.ts/code-block-is-empty-click-code-block-copy-menu-copy-the-empty-code-block-pasted.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/delete-code-block-in-more-menu-final.json b/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/delete-code-block-in-more-menu-final.json index e6bb65e4ad12e..e7c7c2e21c7f9 100644 --- a/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/delete-code-block-in-more-menu-final.json +++ b/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/delete-code-block-in-more-menu-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/duplicate-code-block-final.json b/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/duplicate-code-block-final.json index 8fc72aee3f84a..4bfd573d8f7dd 100644 --- a/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/duplicate-code-block-final.json +++ b/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/duplicate-code-block-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/format-text-in-code-block-format.json b/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/format-text-in-code-block-format.json index 6810d47d080f4..07bd729db1b7f 100644 --- a/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/format-text-in-code-block-format.json +++ b/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/format-text-in-code-block-format.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/format-text-in-code-block-init.json b/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/format-text-in-code-block-init.json index 8567aad2cd813..c6a696c89d0f1 100644 --- a/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/format-text-in-code-block-init.json +++ b/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/format-text-in-code-block-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/format-text-in-code-block-link.json b/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/format-text-in-code-block-link.json index ac561212a8833..9c05d5a06074d 100644 --- a/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/format-text-in-code-block-link.json +++ b/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/format-text-in-code-block-link.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/use-markdown-syntax-can-create-code-block-init.json b/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/use-markdown-syntax-can-create-code-block-init.json index a68276e76247e..3d570b9a584ef 100644 --- a/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/use-markdown-syntax-can-create-code-block-init.json +++ b/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/use-markdown-syntax-can-create-code-block-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/use-markdown-syntax-can-create-code-block-markdown-syntax.json b/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/use-markdown-syntax-can-create-code-block-markdown-syntax.json index cd6d7e3979415..34e377841f033 100644 --- a/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/use-markdown-syntax-can-create-code-block-markdown-syntax.json +++ b/blocksuite/tests-legacy/snapshots/code/crud.spec.ts/use-markdown-syntax-can-create-code-block-markdown-syntax.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-3-4.json b/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-3-4.json index 9f5d272314d4e..00d35886724c8 100644 --- a/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-3-4.json +++ b/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-3-4.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-3-9.json b/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-3-9.json index 2d3183ea97f31..41a3265365c3b 100644 --- a/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-3-9.json +++ b/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-3-9.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-4-3.json b/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-4-3.json index c0350fedb1798..e30fa55bdfc01 100644 --- a/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-4-3.json +++ b/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-4-3.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-init.json b/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-init.json index fc05738484700..b3e1c2b297ff2 100644 --- a/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-init.json +++ b/blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/drag.spec.ts/should-be-able-to-drag-drop-multiple-blocks-to-nested-block-finial.json b/blocksuite/tests-legacy/snapshots/drag.spec.ts/should-be-able-to-drag-drop-multiple-blocks-to-nested-block-finial.json index 3842295488eea..ad87a80a8e736 100644 --- a/blocksuite/tests-legacy/snapshots/drag.spec.ts/should-be-able-to-drag-drop-multiple-blocks-to-nested-block-finial.json +++ b/blocksuite/tests-legacy/snapshots/drag.spec.ts/should-be-able-to-drag-drop-multiple-blocks-to-nested-block-finial.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", @@ -183,4 +186,4 @@ ] } ] -} +} \ No newline at end of file diff --git a/blocksuite/tests-legacy/snapshots/drag.spec.ts/should-be-able-to-drag-drop-multiple-blocks-to-nested-block-init.json b/blocksuite/tests-legacy/snapshots/drag.spec.ts/should-be-able-to-drag-drop-multiple-blocks-to-nested-block-init.json index 4ea493a6ff77b..02d217d7ddb18 100644 --- a/blocksuite/tests-legacy/snapshots/drag.spec.ts/should-be-able-to-drag-drop-multiple-blocks-to-nested-block-init.json +++ b/blocksuite/tests-legacy/snapshots/drag.spec.ts/should-be-able-to-drag-drop-multiple-blocks-to-nested-block-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", @@ -183,4 +186,4 @@ ] } ] -} +} \ No newline at end of file diff --git a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-add-linked-doc.json b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-add-linked-doc.json index 966a1b6331fd6..064aa6c0894de 100644 --- a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-add-linked-doc.json +++ b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-add-linked-doc.json @@ -28,7 +28,7 @@ "xywh": "[-25,-25,88.75,50]", "index": "a1", "lockedBySelf": false, - "color": "--affine-v2-edgeless-palette-medium-blueMedium", + "color": "#84cfff", "fontFamily": "blocksuite:surface:Inter", "fontStyle": "normal", "fontWeight": "400", @@ -74,7 +74,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-drag.json b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-drag.json index a10d65aca7d49..6bb6517e6ba1a 100644 --- a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-drag.json +++ b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-drag.json @@ -28,7 +28,7 @@ "xywh": "[-25,-25,497,154]", "index": "a1", "lockedBySelf": false, - "color": "--affine-v2-edgeless-palette-medium-blueMedium", + "color": "#84cfff", "fontFamily": "blocksuite:surface:Inter", "fontStyle": "normal", "fontWeight": "400", @@ -65,7 +65,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-init.json b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-init.json index 42634c6f70dc5..2df1f3a046b3d 100644 --- a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-init.json +++ b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-init.json @@ -28,7 +28,7 @@ "xywh": "[-25,-25,50,26]", "index": "a1", "lockedBySelf": false, - "color": "--affine-v2-edgeless-palette-medium-blueMedium", + "color": "#84cfff", "fontFamily": "blocksuite:surface:Inter", "fontStyle": "normal", "fontWeight": "400", @@ -64,7 +64,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card-min-width.json b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card-min-width.json index 503563c1bd1d9..463f5b06bc704 100644 --- a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card-min-width.json +++ b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card-min-width.json @@ -28,7 +28,7 @@ "xywh": "[-25,-25,452,154]", "index": "a1", "lockedBySelf": false, - "color": "--affine-v2-edgeless-palette-medium-blueMedium", + "color": "#84cfff", "fontFamily": "blocksuite:surface:Inter", "fontStyle": "normal", "fontWeight": "400", @@ -65,7 +65,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card.json b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card.json index 0acdef494eabf..6d07c4f935e64 100644 --- a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card.json +++ b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card.json @@ -28,7 +28,7 @@ "xywh": "[-25,-25,452,154]", "index": "a1", "lockedBySelf": false, - "color": "--affine-v2-edgeless-palette-medium-blueMedium", + "color": "#84cfff", "fontFamily": "blocksuite:surface:Inter", "fontStyle": "normal", "fontWeight": "400", @@ -65,7 +65,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-finial.json b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-finial.json index 8b8f4df2b41ab..df89744892db2 100644 --- a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-finial.json +++ b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-finial.json @@ -32,7 +32,7 @@ "xywh": "[-25,-25,50,26]", "index": "a1", "lockedBySelf": false, - "color": "--affine-v2-edgeless-palette-medium-blueMedium", + "color": "#84cfff", "fontFamily": "blocksuite:surface:Inter", "fontStyle": "normal", "fontWeight": "400", @@ -72,7 +72,10 @@ "version": 1, "props": { "xywh": "[0,0,498,48]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-empty.json b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-empty.json index fb22906247dd3..8b74ef5fb8624 100644 --- a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-empty.json +++ b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-empty.json @@ -28,7 +28,7 @@ "xywh": "[-25,-25,50,26]", "index": "a1", "lockedBySelf": false, - "color": "--affine-v2-edgeless-palette-medium-blueMedium", + "color": "#84cfff", "fontFamily": "blocksuite:surface:Inter", "fontStyle": "normal", "fontWeight": "400", @@ -68,7 +68,10 @@ "version": 1, "props": { "xywh": "[0,0,498,48]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-not-empty.json b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-not-empty.json index 04a02e46b3126..f1d3880751e47 100644 --- a/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-not-empty.json +++ b/blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-not-empty.json @@ -28,7 +28,7 @@ "xywh": "[-25,-25,50,26]", "index": "a1", "lockedBySelf": false, - "color": "--affine-v2-edgeless-palette-medium-blueMedium", + "color": "#84cfff", "fontFamily": "blocksuite:surface:Inter", "fontStyle": "normal", "fontWeight": "400", @@ -68,7 +68,10 @@ "version": 1, "props": { "xywh": "[0,0,498,48]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/create-linked-doc-from-block-selection-with-format-bar.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/create-linked-doc-from-block-selection-with-format-bar.json index 0520475600d2b..99193f29bf139 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/create-linked-doc-from-block-selection-with-format-bar.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/create-linked-doc-from-block-selection-with-format-bar.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-default-color.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-default-color.json index 616ba8f67824c..ab3ea57fc56c1 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-default-color.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-default-color.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-init.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-init.json index 616ba8f67824c..ab3ea57fc56c1 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-init.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-select-all.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-select-all.json index b4685f071831e..94c309684c597 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-select-all.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-select-all.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-bulleted.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-bulleted.json index be8ee9e7ecc36..bddf3d6bd3769 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-bulleted.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-bulleted.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-finial.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-finial.json index 525e32c3ad6a4..6f7956de7625c 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-finial.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-finial.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-init.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-init.json index a2718a1de4ebe..4b6a5aecfc1b8 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-init.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-finial.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-finial.json index e0293cab9dc82..5f91d67a36ecc 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-finial.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-finial.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-init.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-init.json index d91e0e70caa1d..e3c798fb12e9a 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-init.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-when-select-multiple-line-finial.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-when-select-multiple-line-finial.json index 9d418c32e19e0..9c532be4bce5c 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-when-select-multiple-line-finial.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-when-select-multiple-line-finial.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-when-select-multiple-line-init.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-when-select-multiple-line-init.json index d6339a2e7de56..12bf86652792b 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-when-select-multiple-line-init.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-when-select-multiple-line-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-link-text-finial.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-link-text-finial.json index 9d418c32e19e0..9c532be4bce5c 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-link-text-finial.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-link-text-finial.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-link-text-init.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-link-text-init.json index 07fb24fbf81c6..0188611aa8151 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-link-text-init.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-link-text-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-show-after-convert-to-code-block.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-show-after-convert-to-code-block.json index c0eb5f8409f7f..6bb07db7f7e66 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-show-after-convert-to-code-block.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-show-after-convert-to-code-block.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-with-block-selection-works-when-update-block-type-final.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-with-block-selection-works-when-update-block-type-final.json index a1cd97577f9b2..cf0882a747ac2 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-with-block-selection-works-when-update-block-type-final.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-with-block-selection-works-when-update-block-type-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-with-block-selection-works-when-update-block-type-init.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-with-block-selection-works-when-update-block-type-init.json index f18ab67ce257b..d6f87ec2b64a7 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-with-block-selection-works-when-update-block-type-init.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-with-block-selection-works-when-update-block-type-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-work-in-multiple-block-selection.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-work-in-multiple-block-selection.json index ae698abc9cd34..abff1d216a291 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-work-in-multiple-block-selection.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-work-in-multiple-block-selection.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-work-in-single-block-selection.json b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-work-in-single-block-selection.json index 6f61954663c0b..ebf43486b3795 100644 --- a/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-work-in-single-block-selection.json +++ b/blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-work-in-single-block-selection.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/Enter-key-should-as-expected-after-setting-heading-by-shortkey.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/Enter-key-should-as-expected-after-setting-heading-by-shortkey.json index 35972683df26a..facaed302ba22 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/Enter-key-should-as-expected-after-setting-heading-by-shortkey.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/Enter-key-should-as-expected-after-setting-heading-by-shortkey.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-init.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-init.json index 822fc5888bf40..2830748c3521b 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-init.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-redo.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-redo.json index 822fc5888bf40..2830748c3521b 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-redo.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-redo.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-undo.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-undo.json index 3f9cc69066614..8f349ea90a53a 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-undo.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-undo.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-multiple-line-init.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-multiple-line-init.json index 99ddf761e1082..ce90e208cb375 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-multiple-line-init.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-multiple-line-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-multiple-line-undo.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-multiple-line-undo.json index 3f9cc69066614..8f349ea90a53a 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-multiple-line-undo.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-multiple-line-undo.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-single-line-init.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-single-line-init.json index 6b62ffa97f34b..92df42a04a92f 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-single-line-init.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-single-line-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-single-line-undo.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-single-line-undo.json index f0c5d387b2ffa..1e525cc6a548b 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-single-line-undo.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-single-line-undo.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-init.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-init.json index 96519b38dff02..36444fd2ef24a 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-init.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-0.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-0.json index 71bc04e7f2905..397fdf3823ba5 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-0.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-0.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-6.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-6.json index 81fab9818e6f6..2d7e1ad6e8797 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-6.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-6.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-8.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-8.json index 1eed6e52b25bc..ca5324bced3bf 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-8.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-8.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-9.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-9.json index 5da8d71e8173d..8813cc80644e9 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-9.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-9.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-d.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-d.json index 384d96a3dc3ca..5d73f78533737 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-d.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-d.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-multiple-line-format-hotkey-work-finial.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-multiple-line-format-hotkey-work-finial.json index 3f9cc69066614..8f349ea90a53a 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-multiple-line-format-hotkey-work-finial.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-multiple-line-format-hotkey-work-finial.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-multiple-line-format-hotkey-work-init.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-multiple-line-format-hotkey-work-init.json index 9c7c225662dce..d4fb76c0b0f13 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-multiple-line-format-hotkey-work-init.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-multiple-line-format-hotkey-work-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-single-line-format-hotkey-work-finial.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-single-line-format-hotkey-work-finial.json index f0c5d387b2ffa..1e525cc6a548b 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-single-line-format-hotkey-work-finial.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-single-line-format-hotkey-work-finial.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-single-line-format-hotkey-work-init.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-single-line-format-hotkey-work-init.json index f34e1e8c54fe9..bcd81467d59e1 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-single-line-format-hotkey-work-init.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-single-line-format-hotkey-work-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-ggg.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-ggg.json index 430b36675ffaa..f6f5add92aec5 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-ggg.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-ggg.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-hhh.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-hhh.json index 502c58805bf2b..53499ab4bd8e5 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-hhh.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-hhh.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold.json index 479e95d315331..7a0c0f5b5b655 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-init.json b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-init.json index 250c4562a7c7b..5e16595835a56 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-init.json +++ b/blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/hotkey/bracket.spec.ts/should-bracket-complete-with-backtick-works-undo.json b/blocksuite/tests-legacy/snapshots/hotkey/bracket.spec.ts/should-bracket-complete-with-backtick-works-undo.json index 1f11d49479796..f558ae99ebfcd 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/bracket.spec.ts/should-bracket-complete-with-backtick-works-undo.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/bracket.spec.ts/should-bracket-complete-with-backtick-works-undo.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/bracket.spec.ts/should-bracket-complete-with-backtick-works.json b/blocksuite/tests-legacy/snapshots/hotkey/bracket.spec.ts/should-bracket-complete-with-backtick-works.json index e00f791a87298..9bf706be7a182 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/bracket.spec.ts/should-bracket-complete-with-backtick-works.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/bracket.spec.ts/should-bracket-complete-with-backtick-works.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/Enter-key-should-as-expected-after-setting-heading-by-shortkey.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/Enter-key-should-as-expected-after-setting-heading-by-shortkey.json index 261054509bb06..e7171c2a23cc4 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/Enter-key-should-as-expected-after-setting-heading-by-shortkey.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/Enter-key-should-as-expected-after-setting-heading-by-shortkey.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-cut-work-single-line-init.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-cut-work-single-line-init.json index 413815ce8e78f..7646ed57f021c 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-cut-work-single-line-init.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-cut-work-single-line-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-cut-work-single-line-undo.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-cut-work-single-line-undo.json index db5fa1b07dbc0..88deb243a5c6f 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-cut-work-single-line-undo.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-cut-work-single-line-undo.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-init.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-init.json index 9b7c0f23237a9..2e5aae1d84c72 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-init.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-0.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-0.json index 985c6f997f3ec..6185d1e7da6ed 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-0.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-0.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-6.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-6.json index 1ec98311559f7..6913800d2b41c 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-6.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-6.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-8.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-8.json index 58a72cdb6f03b..36942fcfcbe7e 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-8.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-8.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-9.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-9.json index 2c8067c47979f..e402ef7ea38be 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-9.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-9.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-d.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-d.json index 50ed66f303413..4754f5ac2529e 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-d.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-d.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-single-line-format-hotkey-work-finial.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-single-line-format-hotkey-work-finial.json index db5fa1b07dbc0..88deb243a5c6f 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-single-line-format-hotkey-work-finial.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-single-line-format-hotkey-work-finial.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-single-line-format-hotkey-work-init.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-single-line-format-hotkey-work-init.json index 025e5e36fa9ce..a1d103641a6b7 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-single-line-format-hotkey-work-init.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-single-line-format-hotkey-work-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/type-character-jump-out-code-node-1.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/type-character-jump-out-code-node-1.json index 5d479d7f75cca..4dea51ea608ff 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/type-character-jump-out-code-node-1.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/type-character-jump-out-code-node-1.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/type-character-jump-out-code-node-2.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/type-character-jump-out-code-node-2.json index 6e086175a000f..262b6d8a4ef53 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/type-character-jump-out-code-node-2.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/type-character-jump-out-code-node-2.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-at-empty-line-bold.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-at-empty-line-bold.json index d0d2e5df3af59..47df37eb92797 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-at-empty-line-bold.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-at-empty-line-bold.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-ggg.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-ggg.json index 70be677283e2e..373b7b3c7a57b 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-ggg.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-ggg.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-hhh.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-hhh.json index 88a3599ca65ff..a2592907b6eb8 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-hhh.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-hhh.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold.json index 26dbf6c0ede1b..05d86dcb54b38 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-init.json b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-init.json index 8e21859efc24d..993e1e1f67bf7 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-init.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/use-formatted-cursor-with-hotkey-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-init.json b/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-init.json index 2cc3862cc90b9..81cfe186fb27c 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-init.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-redo.json b/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-redo.json index 2cc3862cc90b9..81cfe186fb27c 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-redo.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-redo.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-undo.json b/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-undo.json index 9d418c32e19e0..9c532be4bce5c 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-undo.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/multi-line-rich-text-inline-code-hotkey-undo.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-cut-work-multiple-line-init.json b/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-cut-work-multiple-line-init.json index 0443262e93658..34fb1214b301b 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-cut-work-multiple-line-init.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-cut-work-multiple-line-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-cut-work-multiple-line-undo.json b/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-cut-work-multiple-line-undo.json index 9d418c32e19e0..9c532be4bce5c 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-cut-work-multiple-line-undo.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-cut-work-multiple-line-undo.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-multiple-line-format-hotkey-work-finial.json b/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-multiple-line-format-hotkey-work-finial.json index 9d418c32e19e0..9c532be4bce5c 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-multiple-line-format-hotkey-work-finial.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-multiple-line-format-hotkey-work-finial.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-multiple-line-format-hotkey-work-init.json b/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-multiple-line-format-hotkey-work-init.json index c3a01cfcbc4b4..afee46063cac8 100644 --- a/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-multiple-line-format-hotkey-work-init.json +++ b/blocksuite/tests-legacy/snapshots/hotkey/multiline.spec.ts/should-multiple-line-format-hotkey-work-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-enter-finial.json b/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-enter-finial.json index 997c7660eb874..9541410365f10 100644 --- a/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-enter-finial.json +++ b/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-enter-finial.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-enter-init.json b/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-enter-init.json index 00e34ce8e8289..2d280cd0d1842 100644 --- a/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-enter-init.json +++ b/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-enter-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-space-finial.json b/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-space-finial.json index 997c7660eb874..9541410365f10 100644 --- a/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-space-finial.json +++ b/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-space-finial.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-space-init.json b/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-space-init.json index 00e34ce8e8289..2d280cd0d1842 100644 --- a/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-space-init.json +++ b/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-markdown-shortcut-with-space-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-slash-menu-finial.json b/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-slash-menu-finial.json index 7c68b8774028b..2105530200b4d 100644 --- a/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-slash-menu-finial.json +++ b/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-slash-menu-finial.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-slash-menu-init.json b/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-slash-menu-init.json index 00e34ce8e8289..2d280cd0d1842 100644 --- a/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-slash-menu-init.json +++ b/blocksuite/tests-legacy/snapshots/latex/block.spec.ts/add-latex-block-using-slash-menu-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/link.spec.ts/basic-link.json b/blocksuite/tests-legacy/snapshots/link.spec.ts/basic-link.json index ab46295359c8b..0fa872877a8a3 100644 --- a/blocksuite/tests-legacy/snapshots/link.spec.ts/basic-link.json +++ b/blocksuite/tests-legacy/snapshots/link.spec.ts/basic-link.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/link.spec.ts/convert-link-to-card.json b/blocksuite/tests-legacy/snapshots/link.spec.ts/convert-link-to-card.json index 004b5aa299d24..197ea251547d2 100644 --- a/blocksuite/tests-legacy/snapshots/link.spec.ts/convert-link-to-card.json +++ b/blocksuite/tests-legacy/snapshots/link.spec.ts/convert-link-to-card.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/can-create-linked-page-and-jump-final.json b/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/can-create-linked-page-and-jump-final.json index a16b2aca2dd63..b81b15b301ab4 100644 --- a/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/can-create-linked-page-and-jump-final.json +++ b/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/can-create-linked-page-and-jump-final.json @@ -21,7 +21,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/can-create-linked-page-and-jump-init.json b/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/can-create-linked-page-and-jump-init.json index a16b2aca2dd63..b81b15b301ab4 100644 --- a/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/can-create-linked-page-and-jump-init.json +++ b/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/can-create-linked-page-and-jump-init.json @@ -21,7 +21,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/duplicated-linked-page-should-paste-as-linked-page.json b/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/duplicated-linked-page-should-paste-as-linked-page.json index 517f677f887c5..e93ca51d69596 100644 --- a/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/duplicated-linked-page-should-paste-as-linked-page.json +++ b/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/duplicated-linked-page-should-paste-as-linked-page.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/paste-linked-page-should-paste-as-linked-page.json b/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/paste-linked-page-should-paste-as-linked-page.json index 5e1550d91158b..eb4b6883b686c 100644 --- a/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/paste-linked-page-should-paste-as-linked-page.json +++ b/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/paste-linked-page-should-paste-as-linked-page.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/should-create-and-switch-page-work-final.json b/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/should-create-and-switch-page-work-final.json index 2cbb03a247e0f..d670da8b7e729 100644 --- a/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/should-create-and-switch-page-work-final.json +++ b/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/should-create-and-switch-page-work-final.json @@ -21,7 +21,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/should-create-and-switch-page-work-init.json b/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/should-create-and-switch-page-work-init.json index 2cbb03a247e0f..d670da8b7e729 100644 --- a/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/should-create-and-switch-page-work-init.json +++ b/blocksuite/tests-legacy/snapshots/linked-page.spec.ts/should-create-and-switch-page-work-init.json @@ -21,7 +21,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/basic-indent-and-unindent-after-shift-tab.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/basic-indent-and-unindent-after-shift-tab.json index 8e1ea588cd43e..f7122fa413d6f 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/basic-indent-and-unindent-after-shift-tab.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/basic-indent-and-unindent-after-shift-tab.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/basic-indent-and-unindent-after-tab.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/basic-indent-and-unindent-after-tab.json index 147e963b6b203..a0b97d96ca9e1 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/basic-indent-and-unindent-after-tab.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/basic-indent-and-unindent-after-tab.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/basic-indent-and-unindent-init.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/basic-indent-and-unindent-init.json index 8e1ea588cd43e..f7122fa413d6f 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/basic-indent-and-unindent-init.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/basic-indent-and-unindent-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/can-expand-toggle-in-readonly-mode-before-readonly.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/can-expand-toggle-in-readonly-mode-before-readonly.json index c87227d587e1e..0190bdd5f9e0f 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/can-expand-toggle-in-readonly-mode-before-readonly.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/can-expand-toggle-in-readonly-mode-before-readonly.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/click-toggle-icon-should-collapsed-list-init.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/click-toggle-icon-should-collapsed-list-init.json index e549de1450dea..62ffb3c539bd3 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/click-toggle-icon-should-collapsed-list-init.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/click-toggle-icon-should-collapsed-list-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/click-toggle-icon-should-collapsed-list-toggle.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/click-toggle-icon-should-collapsed-list-toggle.json index c87227d587e1e..0190bdd5f9e0f 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/click-toggle-icon-should-collapsed-list-toggle.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/click-toggle-icon-should-collapsed-list-toggle.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/convert-nested-paragraph-to-list-final.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/convert-nested-paragraph-to-list-final.json index bf6873b2f0586..29d7c6302a213 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/convert-nested-paragraph-to-list-final.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/convert-nested-paragraph-to-list-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/convert-nested-paragraph-to-list-init.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/convert-nested-paragraph-to-list-init.json index e0bd753647cc1..e8c0e713a0f69 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/convert-nested-paragraph-to-list-init.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/convert-nested-paragraph-to-list-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-1.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-1.json index a375e41f56160..d141470d54834 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-1.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-1.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-2.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-2.json index 1d9a136687095..ce49df2512c72 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-2.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-2.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-3.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-3.json index 0cef7999ff1cc..a97f6670edde7 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-3.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-3.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-4.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-4.json index b0ccc738c9dfd..02ceafefb0bf8 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-4.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-4.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-5.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-5.json index af509bc4ec279..2855ac10d64a3 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-5.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-5.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-init.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-init.json index 081e1cb595cf0..22867899b88e6 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-init.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/enter-list-block-with-empty-text-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/indent-item-should-expand-toggle-finial.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/indent-item-should-expand-toggle-finial.json index 45152ecf1031b..2609394655060 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/indent-item-should-expand-toggle-finial.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/indent-item-should-expand-toggle-finial.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/indent-item-should-expand-toggle-init.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/indent-item-should-expand-toggle-init.json index 7365882502181..99002d586cb46 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/indent-item-should-expand-toggle-init.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/indent-item-should-expand-toggle-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/indent-item-should-expand-toggle-toggle.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/indent-item-should-expand-toggle-toggle.json index 8f74f180ba321..58771e931dc94 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/indent-item-should-expand-toggle-toggle.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/indent-item-should-expand-toggle-toggle.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/nested-list-blocks-finial.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/nested-list-blocks-finial.json index f88c587d872fc..8bf1adc88141c 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/nested-list-blocks-finial.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/nested-list-blocks-finial.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/nested-list-blocks-init.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/nested-list-blocks-init.json index 86849c7df3f2f..3207ffb89059f 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/nested-list-blocks-init.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/nested-list-blocks-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/should-indent-todo-block-preserve-todo-status-final.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/should-indent-todo-block-preserve-todo-status-final.json index 8e8a5a5893de3..a16d6e6512980 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/should-indent-todo-block-preserve-todo-status-final.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/should-indent-todo-block-preserve-todo-status-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/list.spec.ts/should-indent-todo-block-preserve-todo-status-init.json b/blocksuite/tests-legacy/snapshots/list.spec.ts/should-indent-todo-block-preserve-todo-status-init.json index e6071616a0318..b501041e3574b 100644 --- a/blocksuite/tests-legacy/snapshots/list.spec.ts/should-indent-todo-block-preserve-todo-status-init.json +++ b/blocksuite/tests-legacy/snapshots/list.spec.ts/should-indent-todo-block-preserve-todo-status-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/delete-empty-text-paragraph-block-should-keep-children-blocks-when-following-custom-blocks-final.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/delete-empty-text-paragraph-block-should-keep-children-blocks-when-following-custom-blocks-final.json index 5877da225ae96..fdf2e17947139 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/delete-empty-text-paragraph-block-should-keep-children-blocks-when-following-custom-blocks-final.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/delete-empty-text-paragraph-block-should-keep-children-blocks-when-following-custom-blocks-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/delete-empty-text-paragraph-block-should-keep-children-blocks-when-following-custom-blocks-init.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/delete-empty-text-paragraph-block-should-keep-children-blocks-when-following-custom-blocks-init.json index b6c73d2b19627..ee4a992ad4c31 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/delete-empty-text-paragraph-block-should-keep-children-blocks-when-following-custom-blocks-init.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/delete-empty-text-paragraph-block-should-keep-children-blocks-when-following-custom-blocks-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace-2.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace-2.json index a90abced3d95d..838ef87ff6f01 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace-2.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace-2.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace-3.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace-3.json index 44085016e50c7..a4e639d7fe8fe 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace-3.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace-3.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace.json index 92bc6b1cdb6db..f54e8aea28f58 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-after-press-backspace.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-init.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-init.json index 803ebf485b0d1..d693e8bf01f32 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-init.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-indent-and-delete-in-line-start-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-with-child-block-should-work-at-enter-final.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-with-child-block-should-work-at-enter-final.json index 981898cd8ac16..46f4679c4d98f 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-with-child-block-should-work-at-enter-final.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-with-child-block-should-work-at-enter-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-with-child-block-should-work-at-enter-init.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-with-child-block-should-work-at-enter-init.json index e30d709c89e86..26e9b79823e0b 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-with-child-block-should-work-at-enter-init.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/paragraph-with-child-block-should-work-at-enter-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-delete-paragraph-block-child-can-hold-cursor-in-correct-position-final.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-delete-paragraph-block-child-can-hold-cursor-in-correct-position-final.json index 2a05668df0d0f..527f762a887a1 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-delete-paragraph-block-child-can-hold-cursor-in-correct-position-final.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-delete-paragraph-block-child-can-hold-cursor-in-correct-position-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-delete-paragraph-block-child-can-hold-cursor-in-correct-position-init.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-delete-paragraph-block-child-can-hold-cursor-in-correct-position-init.json index a01e9b6bcb6f4..ca6d873ef6b20 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-delete-paragraph-block-child-can-hold-cursor-in-correct-position-init.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-delete-paragraph-block-child-can-hold-cursor-in-correct-position-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-2.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-2.json index a19052cb46b1d..d0ad122bb3c60 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-2.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-2.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-3.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-3.json index 963047c6cbde6..a833cbc370036 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-3.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-3.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-4.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-4.json index 49a0041ad4577..74bd1728e2ed3 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-4.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent-4.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent.json index 1f4480d3be116..6fbe5828fd365 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-indent.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-init.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-init.json index 02827ec6b7214..a105d1c34b56a 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-init.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-1.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-1.json index 21581ffd7ce18..98506a0c36ea6 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-1.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-1.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-2.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-2.json index 9f19aa62a1ca6..da838ede192a6 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-2.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-2.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-3.json b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-3.json index 02827ec6b7214..a105d1c34b56a 100644 --- a/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-3.json +++ b/blocksuite/tests-legacy/snapshots/paragraph.spec.ts/should-indent-and-unindent-works-with-children-unindent-3.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/click-bottom-of-page-and-if-the-last-is-embed-block-editor-should-insert-a-new-editable-block.json b/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/click-bottom-of-page-and-if-the-last-is-embed-block-editor-should-insert-a-new-editable-block.json index f3cc9f20747fa..5c0f7563d8a93 100644 --- a/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/click-bottom-of-page-and-if-the-last-is-embed-block-editor-should-insert-a-new-editable-block.json +++ b/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/click-bottom-of-page-and-if-the-last-is-embed-block-editor-should-insert-a-new-editable-block.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-indent-multi-selection-block.json b/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-indent-multi-selection-block.json index 6ae6b4f851b87..29deae0a496ad 100644 --- a/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-indent-multi-selection-block.json +++ b/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-indent-multi-selection-block.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-not-draw-rect-for-sub-selected-blocks-when-entering-tab-key.json b/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-not-draw-rect-for-sub-selected-blocks-when-entering-tab-key.json index 6ae6b4f851b87..29deae0a496ad 100644 --- a/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-not-draw-rect-for-sub-selected-blocks-when-entering-tab-key.json +++ b/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-not-draw-rect-for-sub-selected-blocks-when-entering-tab-key.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-unindent-multi-selection-block-final.json b/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-unindent-multi-selection-block-final.json index 9d418c32e19e0..9c532be4bce5c 100644 --- a/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-unindent-multi-selection-block-final.json +++ b/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-unindent-multi-selection-block-final.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-unindent-multi-selection-block-init.json b/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-unindent-multi-selection-block-init.json index 6ae6b4f851b87..29deae0a496ad 100644 --- a/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-unindent-multi-selection-block-init.json +++ b/blocksuite/tests-legacy/snapshots/selection/block.spec.ts/should-unindent-multi-selection-block-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/indent-native-multi-selection-block-after-shift-tab.json b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/indent-native-multi-selection-block-after-shift-tab.json index fead36f8837e2..d1d626a75720e 100644 --- a/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/indent-native-multi-selection-block-after-shift-tab.json +++ b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/indent-native-multi-selection-block-after-shift-tab.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/indent-native-multi-selection-block-after-tab.json b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/indent-native-multi-selection-block-after-tab.json index 0b18904606545..d561e1379e1fb 100644 --- a/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/indent-native-multi-selection-block-after-tab.json +++ b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/indent-native-multi-selection-block-after-tab.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-backspace.json b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-backspace.json index 4c6eb301d04d0..4dc5a4c37b6f3 100644 --- a/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-backspace.json +++ b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-backspace.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-redo.json b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-redo.json index 4c6eb301d04d0..4dc5a4c37b6f3 100644 --- a/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-redo.json +++ b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-redo.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-undo.json b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-undo.json index e7b49aa463739..209d91521a647 100644 --- a/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-undo.json +++ b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-after-undo.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-init.json b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-init.json index e7b49aa463739..209d91521a647 100644 --- a/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-init.json +++ b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/native-range-delete-with-indent-init.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/should-unindent-native-multi-selection-block-after-tab.json b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/should-unindent-native-multi-selection-block-after-tab.json index 79d96fb82cf1b..70322b0bc350d 100644 --- a/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/should-unindent-native-multi-selection-block-after-tab.json +++ b/blocksuite/tests-legacy/snapshots/selection/native.spec.ts/should-unindent-native-multi-selection-block-after-tab.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "hidden": false, "displayMode": "both", diff --git a/blocksuite/tests-legacy/snapshots/slash-menu.spec.ts/delete-block-by-slash-menu-should-remove-children.json b/blocksuite/tests-legacy/snapshots/slash-menu.spec.ts/delete-block-by-slash-menu-should-remove-children.json index 5ab9555f1550d..a496377e677ec 100644 --- a/blocksuite/tests-legacy/snapshots/slash-menu.spec.ts/delete-block-by-slash-menu-should-remove-children.json +++ b/blocksuite/tests-legacy/snapshots/slash-menu.spec.ts/delete-block-by-slash-menu-should-remove-children.json @@ -17,7 +17,10 @@ "version": 1, "props": { "xywh": "[0,0,498,92]", - "background": "--affine-v2-edgeless-note-white", + "background": { + "dark": "#000000", + "light": "#ffffff" + }, "index": "a0", "lockedBySelf": false, "hidden": false, diff --git a/blocksuite/tests-legacy/utils/actions/edgeless.ts b/blocksuite/tests-legacy/utils/actions/edgeless.ts index ae55ae67f4b5c..fbf03ebb1f597 100644 --- a/blocksuite/tests-legacy/utils/actions/edgeless.ts +++ b/blocksuite/tests-legacy/utils/actions/edgeless.ts @@ -1,10 +1,6 @@ import '../declare-test-window.js'; -import { - type NoteBlockModel, - type NoteDisplayMode, - ShapeFillColor, -} from '@blocks/index.js'; +import type { NoteBlockModel, NoteDisplayMode } from '@blocks/index.js'; import type { IPoint, IVec } from '@blocksuite/global/utils'; import { assertExists, sleep } from '@blocksuite/global/utils'; import type { Locator, Page } from '@playwright/test'; @@ -649,11 +645,11 @@ export async function rotateElementByHandle( ); } -export async function selectBrushColor(page: Page, color: string) { +export async function selectBrushColor(page: Page, label: string) { const colorButton = page .locator('edgeless-brush-menu') .locator('edgeless-color-panel') - .locator(`.color-unit[aria-label="${color}"]`); + .locator(`.color-unit[aria-label="${label}"]`); await colorButton.click(); } @@ -1377,20 +1373,20 @@ export async function triggerComponentToolbarAction( } } -export async function changeEdgelessNoteBackground(page: Page, color: string) { +export async function changeEdgelessNoteBackground(page: Page, label: string) { const colorButton = page .locator('edgeless-change-note-button') .locator('edgeless-color-panel') - .locator(`.color-unit[aria-label="${color}"]`); + .locator(`.color-unit[aria-label="${label}"]`); await colorButton.click(); } -export async function changeShapeFillColor(page: Page, color: string) { +export async function changeShapeFillColor(page: Page, label: string) { const colorButton = page .locator('edgeless-change-shape-button') .locator('edgeless-color-picker-button.fill-color') .locator('edgeless-color-panel') - .locator(`.color-unit[aria-label="${color}"]`); + .locator(`.color-unit[aria-label="${label}"]`); await colorButton.click({ force: true }); } @@ -1542,7 +1538,7 @@ export async function initThreeOverlapFilledShapes(page: Page) { await addBasicRectShapeElement(page, rect0.start, rect0.end); await page.mouse.click(rect0.start.x + 5, rect0.start.y + 5); await triggerComponentToolbarAction(page, 'changeShapeFillColor'); - await changeShapeFillColor(page, ShapeFillColor.Green); + await changeShapeFillColor(page, 'LightGreen'); const rect1 = { start: { x: 130, y: 130 }, @@ -1551,7 +1547,7 @@ export async function initThreeOverlapFilledShapes(page: Page) { await addBasicRectShapeElement(page, rect1.start, rect1.end); await page.mouse.click(rect1.start.x + 5, rect1.start.y + 5); await triggerComponentToolbarAction(page, 'changeShapeFillColor'); - await changeShapeFillColor(page, ShapeFillColor.Black); + await changeShapeFillColor(page, 'MediumBlue'); const rect2 = { start: { x: 160, y: 160 }, @@ -1560,7 +1556,7 @@ export async function initThreeOverlapFilledShapes(page: Page) { await addBasicRectShapeElement(page, rect2.start, rect2.end); await page.mouse.click(rect2.start.x + 5, rect2.start.y + 5); await triggerComponentToolbarAction(page, 'changeShapeFillColor'); - await changeShapeFillColor(page, ShapeFillColor.White); + await changeShapeFillColor(page, 'White'); } export async function initThreeOverlapNotes(page: Page, x = 130, y = 140) { diff --git a/blocksuite/tests-legacy/utils/actions/misc.ts b/blocksuite/tests-legacy/utils/actions/misc.ts index b71f6d7f198ca..04358023fdb91 100644 --- a/blocksuite/tests-legacy/utils/actions/misc.ts +++ b/blocksuite/tests-legacy/utils/actions/misc.ts @@ -1229,7 +1229,6 @@ export async function getIndexCoordinate( document.querySelectorAll('editor-host')[currentEditorIndex]; const richText = editorHost.querySelectorAll('rich-text')[ richTextIndex - // eslint-disable-next-line @typescript-eslint/no-explicit-any ] as any; const domRange = richText.inlineEditor.toDomRange({ index: vIndex, @@ -1371,7 +1370,7 @@ export async function getCurrentEditorDocId(page: Page) { export async function getCurrentHTMLTheme(page: Page) { const root = page.locator('html'); - // eslint-disable-next-line unicorn/prefer-dom-node-dataset + return root.getAttribute('data-theme'); } diff --git a/blocksuite/tests-legacy/utils/asserts.ts b/blocksuite/tests-legacy/utils/asserts.ts index 36af2db514e9c..6bc474ef767c0 100644 --- a/blocksuite/tests-legacy/utils/asserts.ts +++ b/blocksuite/tests-legacy/utils/asserts.ts @@ -7,9 +7,9 @@ import type { RootBlockModel, } from '@blocks/index.js'; import { - DEFAULT_NOTE_BACKGROUND_COLOR, DEFAULT_NOTE_HEIGHT, DEFAULT_NOTE_WIDTH, + DefaultTheme, } from '@blocksuite/affine-model'; import type { BlockComponent, EditorHost } from '@blocksuite/block-std'; import { BLOCK_ID_ATTR } from '@blocksuite/block-std'; @@ -113,7 +113,7 @@ export const defaultStore = { 'sys:children': ['2'], 'sys:version': 1, 'prop:xywh': `[0,0,${DEFAULT_NOTE_WIDTH}, ${DEFAULT_NOTE_HEIGHT}]`, - 'prop:background': DEFAULT_NOTE_BACKGROUND_COLOR, + 'prop:background': DefaultTheme.noteBackgrounColor, 'prop:index': 'a0', 'prop:hidden': false, 'prop:displayMode': 'both', @@ -1084,7 +1084,7 @@ export async function assertEdgelessNoteBackground( return noteWrapper.style.backgroundColor; }); - expect(backgroundColor).toEqual(`var(${color})`); + expect(toHex(backgroundColor)).toEqual(color); } function toHex(color: string) { @@ -1117,7 +1117,9 @@ export async function assertEdgelessColorSameWithHexColor( edgelessColor: string, hexColor: `#${string}` ) { - const themeColor = await getCurrentThemeCSSPropertyValue(page, edgelessColor); + const themeColor = edgelessColor.startsWith('---') + ? await getCurrentThemeCSSPropertyValue(page, edgelessColor) + : edgelessColor; expect(themeColor).toBeTruthy(); const edgelessHexColor = toHex(themeColor); @@ -1335,11 +1337,20 @@ export async function assertTextSelection( } } -export async function assertConnectorStrokeColor(page: Page, color: string) { +export async function assertConnectorStrokeColor( + page: Page, + label: string, + color: string +) { const colorButton = page .locator('edgeless-change-connector-button') .locator('edgeless-color-panel') - .locator(`.color-unit[aria-label="${color}"]`); + .locator(`.color-unit[aria-label="${label}"]`) + .locator('svg'); + + const realColor = await colorButton.evaluate( + element => window.getComputedStyle(element).fill + ); - expect(await colorButton.count()).toBe(1); + expect(toHex(realColor)).toBe(color); } diff --git a/yarn.lock b/yarn.lock index 1ee975519bf5e..d4f26185c925d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3451,6 +3451,7 @@ __metadata: "@types/dompurify": "npm:^3.0.5" "@types/hast": "npm:^3.0.4" "@types/katex": "npm:^0.16.7" + "@types/lodash.isequal": "npm:^4.5.8" "@types/mdast": "npm:^4.0.4" collapse-white-space: "npm:^2.1.0" date-fns: "npm:^4.0.0" @@ -3461,6 +3462,7 @@ __metadata: html2canvas: "npm:^1.4.1" katex: "npm:^0.16.11" lit: "npm:^3.2.0" + lodash.isequal: "npm:^4.5.0" lz-string: "npm:^1.5.0" mdast-util-gfm-autolink-literal: "npm:^2.0.1" mdast-util-gfm-strikethrough: "npm:^2.0.0" @@ -3558,6 +3560,7 @@ __metadata: "@blocksuite/global": "workspace:*" "@blocksuite/presets": "workspace:*" "@playwright/test": "npm:=1.49.1" + "@toeverything/theme": "npm:^1.1.2" languageName: unknown linkType: soft @@ -14581,6 +14584,15 @@ __metadata: languageName: node linkType: hard +"@types/lodash.isequal@npm:^4.5.8": + version: 4.5.8 + resolution: "@types/lodash.isequal@npm:4.5.8" + dependencies: + "@types/lodash": "npm:*" + checksum: 10/f3180c2d2925514fff1908a1303c11468c9f39b47fd7b053416aad3f1447f8e4a9894dd0460187ac9ac19387e25aec8dd8214d13a50a0967e0dc9cca8e4c5353 + languageName: node + linkType: hard + "@types/lodash.ismatch@npm:^4.4.9": version: 4.4.9 resolution: "@types/lodash.ismatch@npm:4.4.9"