Skip to content

Commit 05b9a7d

Browse files
fundonfundon
committed
feat: update edgeless color palette
1 parent a675ff4 commit 05b9a7d

File tree

226 files changed

+933
-936
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

226 files changed

+933
-936
lines changed

‎packages/affine/components/src/icons/edgeless.ts

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -429,21 +429,6 @@ export const ViewBarIcon = icons.ViewBarIcon({
429429
height: '24',
430430
});
431431

432-
export const TransparentIcon = html`<svg
433-
width="16"
434-
height="16"
435-
viewBox="0 0 16 16"
436-
fill="none"
437-
xmlns="http://www.w3.org/2000/svg"
438-
>
439-
<path
440-
fill-rule="evenodd"
441-
clip-rule="evenodd"
442-
d="M-0.939238 4.14286C-0.979281 4.4228 -1 4.70898 -1 5V6.71429H1.57143V9.28571H-1V11C-1 11.291 -0.979281 11.5772 -0.939238 11.8571H1.57143V14.4286H0.0754482C0.481795 15.0111 0.988871 15.5182 1.57143 15.9246V14.4286L4.14286 14.4286V16.9392C4.4228 16.9793 4.70898 17 5 17H6.71429V14.4286H9.28571V17H11C11.291 17 11.5772 16.9793 11.8571 16.9392V14.4286H14.4286L14.4286 15.9246C15.0111 15.5182 15.5182 15.0111 15.9246 14.4286L14.4286 14.4286V11.8571H16.9392C16.9793 11.5772 17 11.291 17 11V9.28571H14.4286V6.71429H17V5C17 4.70898 16.9793 4.4228 16.9392 4.14286H14.4286V1.57143H15.9246C15.5182 0.988871 15.0111 0.481795 14.4286 0.075448L14.4286 1.57143H11.8571V-0.939238C11.5772 -0.979281 11.291 -1 11 -1H9.28571V1.57143H6.71429V-1H5C4.70898 -1 4.4228 -0.979281 4.14286 -0.939238V1.57143H1.57143V0.0754479C0.988871 0.481795 0.481795 0.988871 0.0754479 1.57143H1.57143V4.14286H-0.939238ZM4.14286 4.14286V1.57143H6.71429V4.14286H4.14286ZM4.14286 6.71429H1.57143V4.14286H4.14286V6.71429ZM6.71429 6.71429V4.14286H9.28571V6.71429H6.71429ZM6.71429 9.28571V6.71429H4.14286V9.28571H1.57143V11.8571H4.14286V14.4286H6.71429V11.8571H9.28571V14.4286H11.8571V11.8571H14.4286V9.28571H11.8571V6.71429H14.4286V4.14286H11.8571V1.57143H9.28571V4.14286H11.8571V6.71429H9.28571V9.28571H6.71429ZM6.71429 9.28571V11.8571H4.14286V9.28571H6.71429ZM9.28571 9.28571H11.8571V11.8571H9.28571V9.28571Z"
443-
fill="#D9D9D9"
444-
/>
445-
</svg>`;
446-
447432
export const MoreHorizontalIcon = icons.MoreHorizontalIcon({
448433
width: '24',
449434
height: '24',

‎packages/affine/model/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"@blocksuite/global": "workspace:*",
2424
"@blocksuite/inline": "workspace:*",
2525
"@blocksuite/store": "workspace:*",
26+
"@toeverything/theme": "^1.0.19",
2627
"fractional-indexing": "^3.2.0",
2728
"zod": "^3.23.8"
2829
},

‎packages/affine/model/src/blocks/frame/frame-model.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export const FrameBlockSchema = defineBlockSchema({
3131
flavour: 'affine:frame',
3232
props: (internal): FrameBlockProps => ({
3333
title: internal.Text(),
34-
background: '--affine-palette-transparent',
34+
background: 'transparent',
3535
xywh: `[0,0,100,100]`,
3636
index: 'a0',
3737
childElementIds: Object.create(null),

‎packages/affine/model/src/consts/brush.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
import { LineColor } from './line.js';
1+
import { StrokeColor } from './color.js';
22

3-
export const DEFAULT_BRUSH_COLOR = LineColor.Blue;
3+
export const DEFAULT_BRUSH_COLOR = StrokeColor.Blue;

‎packages/affine/model/src/consts/color.ts

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import { themeToVar } from '@toeverything/theme/v2';
2+
import { z } from 'zod';
3+
4+
export const Transparent = 'transparent';
5+
export const White = themeToVar('edgeless/palette/white');
6+
export const Black = themeToVar('edgeless/palette/black');
7+
8+
export const Light = {
9+
Red: themeToVar('edgeless/palette/light/redLight'),
10+
Orange: themeToVar('edgeless/palette/light/orangeLight'),
11+
Yellow: themeToVar('edgeless/palette/light/yellowLight'),
12+
Green: themeToVar('edgeless/palette/light/greenLight'),
13+
Blue: themeToVar('edgeless/palette/light/blueLight'),
14+
Purple: themeToVar('edgeless/palette/light/purpleLight'),
15+
Magenta: themeToVar('edgeless/palette/light/magentaLight'),
16+
Grey: themeToVar('edgeless/palette/light/greyLight'),
17+
} as const;
18+
19+
export const LIGHT_PALETTES = [
20+
Light.Red,
21+
Light.Orange,
22+
Light.Yellow,
23+
Light.Green,
24+
Light.Blue,
25+
Light.Purple,
26+
Light.Magenta,
27+
Light.Grey,
28+
] as const;
29+
30+
export const Medium = {
31+
Red: themeToVar('edgeless/palette/medium/redMedium'),
32+
Orange: themeToVar('edgeless/palette/medium/orangeMedium'),
33+
Yellow: themeToVar('edgeless/palette/medium/yellowMedium'),
34+
Green: themeToVar('edgeless/palette/medium/greenMedium'),
35+
Blue: themeToVar('edgeless/palette/medium/blueMedium'),
36+
Purple: themeToVar('edgeless/palette/medium/purpleMedium'),
37+
Magenta: themeToVar('edgeless/palette/medium/magentaMedium'),
38+
Grey: themeToVar('edgeless/palette/medium/greyMedium'),
39+
} as const;
40+
41+
export const MEDIUM_PALETTES = [
42+
Medium.Red,
43+
Medium.Orange,
44+
Medium.Yellow,
45+
Medium.Green,
46+
Medium.Blue,
47+
Medium.Purple,
48+
Medium.Magenta,
49+
Medium.Grey,
50+
] as const;
51+
52+
export const Heavy = {
53+
Red: themeToVar('edgeless/palette/heavy/red'),
54+
Orange: themeToVar('edgeless/palette/heavy/orange'),
55+
Yellow: themeToVar('edgeless/palette/heavy/yellow'),
56+
Green: themeToVar('edgeless/palette/heavy/green'),
57+
Blue: themeToVar('edgeless/palette/heavy/blue'),
58+
Purple: themeToVar('edgeless/palette/heavy/purple'),
59+
Magenta: themeToVar('edgeless/palette/heavy/magenta'),
60+
} as const;
61+
62+
export const HEAVY_PALETTES = [
63+
Heavy.Red,
64+
Heavy.Orange,
65+
Heavy.Yellow,
66+
Heavy.Green,
67+
Heavy.Blue,
68+
Heavy.Purple,
69+
Heavy.Magenta,
70+
] as const;
71+
72+
export const PALETTES = [
73+
// Light
74+
...LIGHT_PALETTES,
75+
76+
Transparent,
77+
78+
// Medium
79+
...MEDIUM_PALETTES,
80+
81+
White,
82+
83+
// Heavy
84+
...HEAVY_PALETTES,
85+
86+
Black,
87+
] as const;
88+
89+
export const PaletteEnum = z.enum(PALETTES);
90+
export type PaletteEnum = z.infer<typeof PaletteEnum>;
91+
92+
export const StrokeColor = { Black, White, ...Medium } as const;
93+
94+
export const STROKE_COLORS = [...MEDIUM_PALETTES, Black, White] as const;

‎packages/affine/model/src/consts/connector.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { createEnumMap } from '../utils/enum.js';
2-
import { LineColor } from './line.js';
2+
import { StrokeColor } from './color.js';
33

44
export enum ConnectorEndpoint {
55
Front = 'Front',
@@ -16,9 +16,9 @@ export enum PointStyle {
1616

1717
export const PointStyleMap = createEnumMap(PointStyle);
1818

19-
export const DEFAULT_CONNECTOR_COLOR = LineColor.Grey;
19+
export const DEFAULT_CONNECTOR_COLOR = StrokeColor.Grey;
2020

21-
export const DEFAULT_CONNECTOR_TEXT_COLOR = LineColor.Black;
21+
export const DEFAULT_CONNECTOR_TEXT_COLOR = StrokeColor.Black;
2222

2323
export const DEFAULT_FRONT_END_POINT_STYLE = PointStyle.None;
2424

‎packages/affine/model/src/consts/frame.ts

Lines changed: 2 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,3 @@
1-
import { z } from 'zod';
1+
import { Light } from './color.js';
22

3-
export enum FrameBackgroundColor {
4-
Blue = '--affine-tag-blue',
5-
Gray = '--affine-tag-gray',
6-
Green = '--affine-tag-green',
7-
Orange = '--affine-tag-orange',
8-
Pink = '--affine-tag-pink',
9-
Purple = '--affine-tag-purple',
10-
Red = '--affine-tag-red',
11-
Teal = '--affine-tag-teal',
12-
Yellow = '--affine-tag-yellow',
13-
}
14-
15-
export const FRAME_BACKGROUND_COLORS = [
16-
FrameBackgroundColor.Gray,
17-
FrameBackgroundColor.Red,
18-
FrameBackgroundColor.Orange,
19-
FrameBackgroundColor.Yellow,
20-
FrameBackgroundColor.Green,
21-
FrameBackgroundColor.Teal,
22-
FrameBackgroundColor.Blue,
23-
FrameBackgroundColor.Purple,
24-
FrameBackgroundColor.Pink,
25-
];
26-
27-
export const FrameBackgroundColorsSchema = z.nativeEnum(FrameBackgroundColor);
3+
export const FrameBackgroundColor = Light;

‎packages/affine/model/src/consts/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export * from './brush.js';
2+
export * from './color.js';
23
export * from './connector.js';
34
export * from './doc.js';
45
export * from './frame.js';

‎packages/affine/model/src/consts/line.ts

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,34 @@
1+
/* eslint perfectionist/sort-enums: "off" */
2+
13
import { z } from 'zod';
24

35
import { createEnumMap } from '../utils/enum.js';
46

57
export enum LineWidth {
6-
Eight = 8,
8+
Two = 2,
79
// Thin
810
Four = 4,
911
Six = 6,
12+
Eight = 8,
1013
// Thick
1114
Ten = 10,
1215
Twelve = 12,
13-
Two = 2,
1416
}
1517

18+
export const LINE_WIDTHS = [
19+
LineWidth.Two,
20+
LineWidth.Four,
21+
LineWidth.Six,
22+
LineWidth.Eight,
23+
LineWidth.Ten,
24+
LineWidth.Twelve,
25+
];
26+
27+
/**
28+
* Use `StrokeColor` instead.
29+
*
30+
* @deprecated
31+
*/
1632
export enum LineColor {
1733
Black = '--affine-palette-line-black',
1834
Blue = '--affine-palette-line-blue',

‎packages/affine/model/src/consts/note.ts

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { themeToVar } from '@toeverything/theme/v2';
12
import { z } from 'zod';
23

34
import { createEnumMap } from '../utils/enum.js';
@@ -8,40 +9,6 @@ export const NOTE_MIN_HEIGHT = 92;
89
export const DEFAULT_NOTE_WIDTH = NOTE_MIN_WIDTH;
910
export const DEFAULT_NOTE_HEIGHT = NOTE_MIN_HEIGHT;
1011

11-
export enum NoteBackgroundColor {
12-
Black = '--affine-note-background-black',
13-
Blue = '--affine-note-background-blue',
14-
Green = '--affine-note-background-green',
15-
Grey = '--affine-note-background-grey',
16-
Magenta = '--affine-note-background-magenta',
17-
Orange = '--affine-note-background-orange',
18-
Purple = '--affine-note-background-purple',
19-
Red = '--affine-note-background-red',
20-
Teal = '--affine-note-background-teal',
21-
White = '--affine-note-background-white',
22-
Yellow = '--affine-note-background-yellow',
23-
}
24-
25-
export const NoteBackgroundColorMap = createEnumMap(NoteBackgroundColor);
26-
27-
export const NOTE_BACKGROUND_COLORS = [
28-
NoteBackgroundColor.Yellow,
29-
NoteBackgroundColor.Orange,
30-
NoteBackgroundColor.Red,
31-
NoteBackgroundColor.Magenta,
32-
NoteBackgroundColor.Purple,
33-
NoteBackgroundColor.Blue,
34-
NoteBackgroundColor.Teal,
35-
NoteBackgroundColor.Green,
36-
NoteBackgroundColor.Black,
37-
NoteBackgroundColor.Grey,
38-
NoteBackgroundColor.White,
39-
] as const;
40-
41-
export const DEFAULT_NOTE_BACKGROUND_COLOR = NoteBackgroundColor.White;
42-
43-
export const NoteBackgroundColorsSchema = z.nativeEnum(NoteBackgroundColor);
44-
4512
export enum NoteShadow {
4613
Box = '--affine-note-shadow-box',
4714
Film = '--affine-note-shadow-film',
@@ -105,3 +72,38 @@ export const DEFAULT_NOTE_CORNER = NoteCorners.Small;
10572
export const NoteCornersSchema = z.nativeEnum(NoteCorners);
10673

10774
export const DEFAULT_NOTE_BORDER_SIZE = 4;
75+
76+
export const NoteBackgroundColor = {
77+
Yellow: themeToVar('edgeless/note/yellow'),
78+
Orange: themeToVar('edgeless/note/orange'),
79+
Red: themeToVar('edgeless/note/red'),
80+
Magenta: themeToVar('edgeless/note/magenta'),
81+
Purple: themeToVar('edgeless/note/purple'),
82+
Blue: themeToVar('edgeless/note/blue'),
83+
Teal: themeToVar('edgeless/note/teal'),
84+
Green: themeToVar('edgeless/note/green'),
85+
Black: themeToVar('edgeless/note/black'),
86+
Grey: themeToVar('edgeless/note/grey'),
87+
White: themeToVar('edgeless/note/white'),
88+
} as const;
89+
90+
export const NOTE_BACKGROUND_PALETTES = [
91+
NoteBackgroundColor.Yellow,
92+
NoteBackgroundColor.Orange,
93+
NoteBackgroundColor.Red,
94+
NoteBackgroundColor.Magenta,
95+
NoteBackgroundColor.Purple,
96+
NoteBackgroundColor.Blue,
97+
NoteBackgroundColor.Teal,
98+
NoteBackgroundColor.Green,
99+
NoteBackgroundColor.Black,
100+
NoteBackgroundColor.Grey,
101+
NoteBackgroundColor.White,
102+
] as const;
103+
104+
export const NoteBackgroundPaletteEnum = z.enum(NOTE_BACKGROUND_PALETTES);
105+
export type NoteBackgroundPaletteEnum = z.infer<
106+
typeof NoteBackgroundPaletteEnum
107+
>;
108+
109+
export const DEFAULT_NOTE_BACKGROUND_COLOR = NoteBackgroundColor.White;

0 commit comments

Comments
 (0)