chore: update edgeless theme

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',

packages/affine/shared/src/theme/color.ts

@@ -0,0 +1,40 @@
+/* eslint perfectionist/sort-enums: "off" */
+
+import { themeToVar } from '@toeverything/theme/v2';
+import { z } from 'zod';
+
+// 3 x 9
+export const PALETTES = [
+  // Light
+  themeToVar('edgeless/palette/light/redLight'),
+  themeToVar('edgeless/palette/light/orangeLight'),
+  themeToVar('edgeless/palette/light/yellowLight'),
+  themeToVar('edgeless/palette/light/greenLight'),
+  themeToVar('edgeless/palette/light/blueLight'),
+  themeToVar('edgeless/palette/light/purpleLight'),
+  themeToVar('edgeless/palette/light/magentaLight'),
+  themeToVar('edgeless/palette/light/greyLight'),
+  'transparent',
+  // Medium
+  themeToVar('edgeless/palette/medium/redMedium'),
+  themeToVar('edgeless/palette/medium/orangeMedium'),
+  themeToVar('edgeless/palette/medium/yellowMedium'),
+  themeToVar('edgeless/palette/medium/greenMedium'),
+  themeToVar('edgeless/palette/medium/blueMedium'),
+  themeToVar('edgeless/palette/medium/purpleMedium'),
+  themeToVar('edgeless/palette/medium/magentaMedium'),
+  themeToVar('edgeless/palette/medium/greyMedium'),
+  themeToVar('edgeless/palette/white'),
+  // Heavy
+  themeToVar('edgeless/palette/heavy/red'),
+  themeToVar('edgeless/palette/heavy/orange'),
+  themeToVar('edgeless/palette/heavy/yellow'),
+  themeToVar('edgeless/palette/heavy/green'),
+  themeToVar('edgeless/palette/heavy/blue'),
+  themeToVar('edgeless/palette/heavy/purple'),
+  themeToVar('edgeless/palette/heavy/magenta'),
+  themeToVar('edgeless/palette/black'),
+] as const;
+
+export const PaletteEnum = z.enum(PALETTES);
+export type PaletteEnum = z.infer<typeof PaletteEnum>;

packages/affine/shared/src/theme/index.ts

@@ -1 +1,2 @@
+export * from './color.js';
 export * from './css-variables.js';

packages/affine/shared/src/utils/zod-schema.ts

@@ -36,6 +36,8 @@ import {
 } from '@blocksuite/affine-model';
 import { z, ZodDefault, ZodObject, type ZodTypeAny, ZodUnion } from 'zod';
 
+import { PaletteEnum } from '../theme/color.js';
+
 const ConnectorEndpointSchema = z.nativeEnum(PointStyle);
 const StrokeStyleSchema = z.nativeEnum(StrokeStyle);
 const LineWidthSchema = z.nativeEnum(LineWidth);
@@ -60,8 +62,16 @@ export const ColorSchema = z.union([
   }),
 ]);
 const LineColorSchema = z.union([LineColorsSchema, ColorSchema]);
-const ShapeFillColorSchema = z.union([FillColorsSchema, ColorSchema]);
-const ShapeStrokeColorSchema = z.union([StrokeColorsSchema, ColorSchema]);
+const ShapeFillColorSchema = z.union([
+  FillColorsSchema,
+  PaletteEnum,
+  ColorSchema,
+]);
+const ShapeStrokeColorSchema = z.union([
+  StrokeColorsSchema,
+  PaletteEnum,
+  ColorSchema,
+]);
 const TextColorSchema = z.union([LineColorsSchema, ColorSchema]);
 const NoteBackgroundColorSchema = z.union([
   NoteBackgroundColorsSchema,

packages/blocks/src/root-block/edgeless/components/color-picker/button.ts

@@ -82,13 +82,15 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) {
             ${this.isText
               ? html`
                   <edgeless-text-color-icon
+                    class="small"
                     .color=${this.colorWithoutAlpha}
                   ></edgeless-text-color-icon>
                 `
               : html`
                   <edgeless-color-button
+                    class="small"
                     .color=${this.colorWithoutAlpha}
-                    .hollowCircle=${this.hollowCircle}
+                    ?hollow-circle=${this.hollowCircle}
                   ></edgeless-color-button>
                 `}
           </editor-icon-button>
@@ -104,7 +106,7 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) {
                 <edgeless-color-panel
                   role="listbox"
                   .value=${this.color}
-                  .options=${this.palettes}
+                  .palettes=${this.palettes}
                   .hollowCircle=${this.hollowCircle}
                   .openColorPicker=${this.switchToCustomTab}
                   .hasTransparent=${false}
@@ -113,7 +115,7 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) {
                   <edgeless-color-custom-button
                     slot="custom"
                     style=${styleMap(this.customButtonStyle)}
-                    .active=${!this.isCSSVariable}
+                    ?active=${!this.isCSSVariable}
                     @click=${this.switchToCustomTab}
                   ></edgeless-color-custom-button>
                 </edgeless-color-panel>

packages/blocks/src/root-block/edgeless/components/color-picker/custom-button.ts

@@ -1,18 +1,34 @@
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import { colorContainerStyles } from '../panel/color-panel.js';
-
 export class EdgelessColorCustomButton extends LitElement {
   static override styles = css`
-    ${colorContainerStyles}
+    :host {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+    }
+
+    :host([active]):after {
+      position: absolute;
+      display: block;
+      content: '';
+      width: 27px;
+      height: 27px;
+      border: 1.5px solid var(--affine-primary-color);
+      border-radius: 50%;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
 
     .color-custom {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 16px;
-      height: 16px;
+      width: 21px;
+      height: 21px;
       border-radius: 50%;
       box-sizing: border-box;
       overflow: hidden;
@@ -43,15 +59,11 @@ export class EdgelessColorCustomButton extends LitElement {
   `;
 
   override render() {
-    return html`
-      <div class="color-container" ?active=${this.active}>
-        <div class="color-unit color-custom"></div>
-      </div>
-    `;
+    return html`<div class="color-unit color-custom"></div>`;
   }
 
-  @property({ attribute: false })
-  accessor active!: boolean;
+  @property({ attribute: true, type: Boolean })
+  accessor active: boolean = false;
 }
 
 declare global {