feat(editor): update edgeless color palette (#9243)

Closes: [BS-1475](https://linear.app/affine-design/issue/BS-1475/颜色主题更新) [BS-1803](https://linear.app/affine-design/issue/BS-1803/fill-color色板影响的yuan素) [BS-1804](https://linear.app/affine-design/issue/BS-1804/border-color色板影响的yuan素) [BS-1815](https://linear.app/affine-design/issue/BS-1815/连线文字配色略瞎)

### What's Changed

* refactor `EdgelessLineWidthPanel` component, the previous width is fixed and cannot be used in the new design
* refactor `EdgelessColorPanel` and `EdgelessColorButton` components, make them simple and reusable
* delete redundant `EdgelessOneRowColorPanel` component
* unity and update color palette, if the previously set color is not in the latest color palette, the custom color button will be selected
This commit is contained in:
fundon
2024-12-30 03:36:33 +00:00
parent 6b1865ff92
commit a5641ae608
250 changed files with 952 additions and 964 deletions
+17 -16
View File
@@ -1,3 +1,4 @@
import { themeToVar } from '@toeverything/theme/v2';
import { z } from 'zod';
import { createEnumMap } from '../utils/enum.js';
@@ -8,23 +9,23 @@ export const NOTE_MIN_HEIGHT = 92;
export const DEFAULT_NOTE_WIDTH = NOTE_MIN_WIDTH;
export const DEFAULT_NOTE_HEIGHT = NOTE_MIN_HEIGHT;
export enum NoteBackgroundColor {
Black = '--affine-note-background-black',
Blue = '--affine-note-background-blue',
Green = '--affine-note-background-green',
Grey = '--affine-note-background-grey',
Magenta = '--affine-note-background-magenta',
Orange = '--affine-note-background-orange',
Purple = '--affine-note-background-purple',
Red = '--affine-note-background-red',
Teal = '--affine-note-background-teal',
White = '--affine-note-background-white',
Yellow = '--affine-note-background-yellow',
}
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_COLORS = [
export const NOTE_BACKGROUND_PALETTES = [
NoteBackgroundColor.Yellow,
NoteBackgroundColor.Orange,
NoteBackgroundColor.Red,
@@ -38,9 +39,9 @@ export const NOTE_BACKGROUND_COLORS = [
NoteBackgroundColor.White,
] as const;
export const DEFAULT_NOTE_BACKGROUND_COLOR = NoteBackgroundColor.White;
export const NoteBackgroundPaletteEnum = z.enum(NOTE_BACKGROUND_PALETTES);
export const NoteBackgroundColorsSchema = z.nativeEnum(NoteBackgroundColor);
export const DEFAULT_NOTE_BACKGROUND_COLOR = NoteBackgroundColor.White;
export enum NoteShadow {
Box = '--affine-note-shadow-box',