mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-23 21:38:44 +08:00
fundon
2c4278058b
Closes: [BS-2909](https://linear.app/affine-design/issue/BS-2909/新增highlighter) ### What's Changed! Currently the highlighter tool is very similar to brush, but for the future, it's a standalone module. * Added `Highlighter` element model * Added `Highlighter` tool * Added `Highlighter` entry to the global toolbar
140 lines
4.2 KiB
TypeScript
140 lines
4.2 KiB
TypeScript
import type { Palette, Theme } from './types';
|
|
import { buildPalettes, getColorByKey, pureBlack, pureWhite } from './utils';
|
|
|
|
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'),
|
|
Transparent: Transparent,
|
|
} 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 NoteBackgroundColorPalettes: Palette[] = [
|
|
...buildPalettes(NoteBackgroundColorMap),
|
|
] as const;
|
|
|
|
const StrokeColorShortMap = { ...Medium, Black, White } as const;
|
|
|
|
const StrokeColorShortPalettes: Palette[] = [
|
|
...buildPalettes(StrokeColorShortMap),
|
|
] as const;
|
|
|
|
const FillColorShortMap = { ...Medium, Black, White, Transparent } as const;
|
|
|
|
const FillColorShortPalettes: Palette[] = [
|
|
...buildPalettes(FillColorShortMap),
|
|
] as const;
|
|
|
|
const ShapeTextColorShortMap = {
|
|
...Medium,
|
|
Black: pureBlack,
|
|
White: pureWhite,
|
|
} as const;
|
|
|
|
const ShapeTextColorShortPalettes: Palette[] = [
|
|
...buildPalettes({ ...ShapeTextColorShortMap }),
|
|
] as const;
|
|
|
|
const ShapeTextColorPalettes: Palette[] = [
|
|
// Light
|
|
...buildPalettes(Light, 'Light'),
|
|
|
|
{ key: 'Transparent', value: Transparent },
|
|
|
|
// Medium
|
|
...buildPalettes(Medium, 'Medium'),
|
|
|
|
{ key: 'White', value: pureWhite },
|
|
|
|
// Heavy
|
|
...buildPalettes(Heavy, 'Heavy'),
|
|
|
|
{ key: 'Black', value: pureBlack },
|
|
] as const;
|
|
|
|
export const DefaultTheme: Theme = {
|
|
pureBlack,
|
|
pureWhite,
|
|
black: Black,
|
|
white: White,
|
|
transparent: Transparent,
|
|
textColor: Medium.Blue,
|
|
shapeTextColor: pureBlack,
|
|
shapeStrokeColor: Medium.Yellow,
|
|
shapeFillColor: Medium.Yellow,
|
|
connectorColor: Medium.Grey,
|
|
noteBackgrounColor: NoteBackgroundColorMap.White,
|
|
// 50% transparent `Default.black`
|
|
hightlighterColor: { dark: '#ffffff80', light: '#00000080' },
|
|
Palettes,
|
|
ShapeTextColorPalettes,
|
|
NoteBackgroundColorMap,
|
|
NoteBackgroundColorPalettes,
|
|
StrokeColorShortMap,
|
|
StrokeColorShortPalettes,
|
|
FillColorShortMap,
|
|
FillColorShortPalettes,
|
|
ShapeTextColorShortMap,
|
|
ShapeTextColorShortPalettes,
|
|
} as const;
|