chore: update edgeless color palette

toeverything · Nov 22, 2024 · 436804d · 436804d
1 parent e5b1f88
commit 436804d
Show file tree

Hide file tree

Showing 37 changed files with 586 additions and 650 deletions.
diff --git a/packages/affine/components/src/icons/edgeless.ts b/packages/affine/components/src/icons/edgeless.ts
@@ -429,21 +429,6 @@ export const ViewBarIcon = icons.ViewBarIcon({
   height: '24',
 });
 
-export const TransparentIcon = html`<svg
-  width="16"
-  height="16"
-  viewBox="0 0 16 16"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    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"
-    fill="#D9D9D9"
-  />
-</svg>`;
-
 export const MoreHorizontalIcon = icons.MoreHorizontalIcon({
   width: '24',
   height: '24',

diff --git a/packages/affine/model/package.json b/packages/affine/model/package.json
@@ -23,6 +23,7 @@
     "@blocksuite/global": "workspace:*",
     "@blocksuite/inline": "workspace:*",
     "@blocksuite/store": "workspace:*",
+    "@toeverything/theme": "^1.0.19",
     "fractional-indexing": "^3.2.0",
     "zod": "^3.23.8"
   },

diff --git a/packages/affine/model/src/blocks/frame/frame-model.ts b/packages/affine/model/src/blocks/frame/frame-model.ts
@@ -31,7 +31,7 @@ export const FrameBlockSchema = defineBlockSchema({
   flavour: 'affine:frame',
   props: (internal): FrameBlockProps => ({
     title: internal.Text(),
-    background: '--affine-palette-transparent',
+    background: 'transparent',
     xywh: `[0,0,100,100]`,
     index: 'a0',
     childElementIds: Object.create(null),

diff --git a/packages/affine/model/src/consts/brush.ts b/packages/affine/model/src/consts/brush.ts
@@ -1,3 +1,3 @@
-import { LineColor } from './line.js';
+import { Medium } from './color.js';
 
-export const DEFAULT_BRUSH_COLOR = LineColor.Blue;
+export const DEFAULT_BRUSH_COLOR = Medium.Blue;
diff --git a/packages/affine/model/src/consts/color.ts b/packages/affine/model/src/consts/color.ts
@@ -0,0 +1,90 @@
+import { themeToVar } from '@toeverything/theme/v2';
+import { z } from 'zod';
+
+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 type PaletteEnum = z.infer<typeof PaletteEnum>;
diff --git a/packages/affine/model/src/consts/connector.ts b/packages/affine/model/src/consts/connector.ts
@@ -1,5 +1,5 @@
 import { createEnumMap } from '../utils/enum.js';
-import { LineColor } from './line.js';
+import { Black, Medium } from './color.js';
 
 export enum ConnectorEndpoint {
   Front = 'Front',
@@ -16,9 +16,9 @@ export enum PointStyle {
 
 export const PointStyleMap = createEnumMap(PointStyle);
 
-export const DEFAULT_CONNECTOR_COLOR = LineColor.Grey;
+export const DEFAULT_CONNECTOR_COLOR = Medium.Grey;
 
-export const DEFAULT_CONNECTOR_TEXT_COLOR = LineColor.Black;
+export const DEFAULT_CONNECTOR_TEXT_COLOR = Black;
 
 export const DEFAULT_FRONT_END_POINT_STYLE = PointStyle.None;
 

diff --git a/packages/affine/model/src/consts/frame.ts b/packages/affine/model/src/consts/frame.ts
@@ -1,5 +1,7 @@
 import { z } from 'zod';
 
+import { Light } from './color.js';
+
 export enum FrameBackgroundColor {
   Blue = '--affine-tag-blue',
   Gray = '--affine-tag-gray',
@@ -25,3 +27,5 @@ export const FRAME_BACKGROUND_COLORS = [
 ];
 
 export const FrameBackgroundColorsSchema = z.nativeEnum(FrameBackgroundColor);
+
+export const FrameBackgroundColorV2 = Light;
diff --git a/packages/affine/model/src/consts/index.ts b/packages/affine/model/src/consts/index.ts
@@ -1,4 +1,5 @@
 export * from './brush.js';
+export * from './color.js';
 export * from './connector.js';
 export * from './doc.js';
 export * from './frame.js';

diff --git a/packages/affine/model/src/consts/line.ts b/packages/affine/model/src/consts/line.ts
@@ -1,18 +1,29 @@
+/* eslint perfectionist/sort-enums: "off" */
+
 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 = [
+  LineWidth.Two,
+  LineWidth.Four,
+  LineWidth.Six,
+  LineWidth.Eight,
+  LineWidth.Ten,
+  LineWidth.Twelve,
+];
+
 export enum LineColor {
   Black = '--affine-palette-line-black',
   Blue = '--affine-palette-line-blue',

diff --git a/packages/affine/model/src/consts/note.ts b/packages/affine/model/src/consts/note.ts
@@ -1,3 +1,4 @@
+import { themeToVar } from '@toeverything/theme/v2';
 import { z } from 'zod';
 
 import { createEnumMap } from '../utils/enum.js';
@@ -8,40 +9,6 @@ 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 NoteBackgroundColorMap = createEnumMap(NoteBackgroundColor);
-
-export const NOTE_BACKGROUND_COLORS = [
-  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 DEFAULT_NOTE_BACKGROUND_COLOR = NoteBackgroundColor.White;
-
-export const NoteBackgroundColorsSchema = z.nativeEnum(NoteBackgroundColor);
-
 export enum NoteShadow {
   Box = '--affine-note-shadow-box',
   Film = '--affine-note-shadow-film',
@@ -105,3 +72,38 @@ export const DEFAULT_NOTE_CORNER = NoteCorners.Small;
 export const NoteCornersSchema = z.nativeEnum(NoteCorners);
 
 export const DEFAULT_NOTE_BORDER_SIZE = 4;
+
+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 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 type NoteBackgroundPaletteEnum = z.infer<
+  typeof NoteBackgroundPaletteEnum
+>;
+
+export const DEFAULT_NOTE_BACKGROUND_COLOR = NoteBackgroundColor.White;
diff --git a/packages/affine/model/src/consts/shape.ts b/packages/affine/model/src/consts/shape.ts
@@ -1,6 +1,11 @@
-import { z } from 'zod';
-
-import { LINE_COLORS, LineColor } from './line.js';
+import {
+  Black,
+  Light,
+  LIGHT_PALETTES,
+  Medium,
+  MEDIUM_PALETTES,
+  White,
+} from './color.js';
 
 export const DEFAULT_ROUGHNESS = 1.4;
 
@@ -49,42 +54,14 @@ export enum ShapeStyle {
   Scribbled = 'Scribbled',
 }
 
-export enum ShapeFillColor {
-  Black = '--affine-palette-shape-black',
-  Blue = '--affine-palette-shape-blue',
-  Green = '--affine-palette-shape-green',
-  Grey = '--affine-palette-shape-grey',
-  Magenta = '--affine-palette-shape-magenta',
-  Orange = '--affine-palette-shape-orange',
-  Purple = '--affine-palette-shape-purple',
-  Red = '--affine-palette-shape-red',
-  Teal = '--affine-palette-shape-teal',
-  White = '--affine-palette-shape-white',
-  Yellow = '--affine-palette-shape-yellow',
-}
-
-export const SHAPE_FILL_COLORS = [
-  ShapeFillColor.Yellow,
-  ShapeFillColor.Orange,
-  ShapeFillColor.Red,
-  ShapeFillColor.Magenta,
-  ShapeFillColor.Purple,
-  ShapeFillColor.Blue,
-  ShapeFillColor.Teal,
-  ShapeFillColor.Green,
-  ShapeFillColor.Black,
-  ShapeFillColor.Grey,
-  ShapeFillColor.White,
-] as const;
-
-export const DEFAULT_SHAPE_FILL_COLOR = ShapeFillColor.Yellow;
+export const ShapeFillColor = { Black, White, ...Light } as const;
 
-export const FillColorsSchema = z.nativeEnum(ShapeFillColor);
+export const SHAPE_FILL_COLORS = LIGHT_PALETTES;
 
-export const SHAPE_STROKE_COLORS = LINE_COLORS;
+export const DEFAULT_SHAPE_FILL_COLOR = Light.Yellow;
 
-export const DEFAULT_SHAPE_STROKE_COLOR = LineColor.Yellow;
+export const SHAPE_STROKE_COLORS = MEDIUM_PALETTES;
 
-export const DEFAULT_SHAPE_TEXT_COLOR = LineColor.Black;
+export const DEFAULT_SHAPE_STROKE_COLOR = Medium.Yellow;
 
-export const StrokeColorsSchema = z.nativeEnum(LineColor);
+export const DEFAULT_SHAPE_TEXT_COLOR = Black;
diff --git a/packages/affine/model/src/consts/text.ts b/packages/affine/model/src/consts/text.ts
@@ -1,5 +1,5 @@
 import { createEnumMap } from '../utils/enum.js';
-import { LineColor } from './line.js';
+import { Medium } from './color.js';
 
 export enum ColorScheme {
   Dark = 'dark',
@@ -67,4 +67,4 @@ export enum TextResizing {
   AUTO_HEIGHT,
 }
 
-export const DEFAULT_TEXT_COLOR = LineColor.Blue;
+export const DEFAULT_TEXT_COLOR = Medium.Blue;
diff --git a/packages/affine/shared/src/theme/css-variables.ts b/packages/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, SHAPE_FILL_COLORS } from '@blocksuite/affine-model';
 import {
   type AffineCssVariables,
   type AffineTheme,
@@ -65,8 +64,6 @@ export const ColorVariables = [
   '--affine-tag-yellow',
   '--affine-tag-orange',
   '--affine-tag-gray',
-  ...LINE_COLORS,
-  ...SHAPE_FILL_COLORS,
   '--affine-tooltip',
   '--affine-blue',
 ];