chore: update edgeless theme

toeverything · Nov 21, 2024 · 751c874 · 751c874
1 parent 216b881
commit 751c874
Show file tree

Hide file tree

Showing 18 changed files with 395 additions and 443 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/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/shared/src/theme/color.ts b/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>;
diff --git a/packages/affine/shared/src/theme/index.ts b/packages/affine/shared/src/theme/index.ts
@@ -1 +1,2 @@
+export * from './color.js';
 export * from './css-variables.js';
diff --git a/packages/affine/shared/src/utils/zod-schema.ts b/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);
@@ -59,17 +61,26 @@ export const ColorSchema = z.union([
     dark: z.string(),
   }),
 ]);
-const LineColorSchema = z.union([LineColorsSchema, ColorSchema]);
-const ShapeFillColorSchema = z.union([FillColorsSchema, ColorSchema]);
-const ShapeStrokeColorSchema = z.union([StrokeColorsSchema, ColorSchema]);
-const TextColorSchema = z.union([LineColorsSchema, ColorSchema]);
+const LineColorSchema = z.union([LineColorsSchema, ColorSchema, PaletteEnum]);
+const ShapeFillColorSchema = z.union([
+  FillColorsSchema,
+  ColorSchema,
+  PaletteEnum,
+]);
+const ShapeStrokeColorSchema = z.union([
+  StrokeColorsSchema,
+  ColorSchema,
+  PaletteEnum,
+]);
+const TextColorSchema = z.union([LineColorsSchema, ColorSchema, PaletteEnum]);
 const NoteBackgroundColorSchema = z.union([
   NoteBackgroundColorsSchema,
   ColorSchema,
 ]);
 const FrameBackgroundColorSchema = z.union([
   FrameBackgroundColorsSchema,
   ColorSchema,
+  PaletteEnum,
 ]);
 
 export const ConnectorSchema = z

diff --git a/packages/blocks/src/root-block/edgeless/components/color-picker/button.ts b/packages/blocks/src/root-block/edgeless/components/color-picker/button.ts
@@ -51,6 +51,10 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) {
     return this.color.startsWith('--');
   }
 
+  get isCustomColor() {
+    return !this.palettes.includes(this.color);
+  }
+
   get tabContentPadding() {
     return `${this.tabType === 'custom' ? 0 : 8}px`;
   }
@@ -82,13 +86,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 +110,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 +119,7 @@ export class EdgelessColorPickerButton extends WithDisposable(LitElement) {
                   <edgeless-color-custom-button
                     slot="custom"
                     style=${styleMap(this.customButtonStyle)}
-                    .active=${!this.isCSSVariable}
+                    ?active=${this.isCustomColor}
                     @click=${this.switchToCustomTab}
                   ></edgeless-color-custom-button>
                 </edgeless-color-panel>

diff --git a/packages/blocks/src/root-block/edgeless/components/color-picker/custom-button.ts b/packages/blocks/src/root-block/edgeless/components/color-picker/custom-button.ts
@@ -1,18 +1,36 @@
 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;
+      cursor: pointer;
+    }
+
+    :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;
+      pointer-events: none;
+    }
 
     .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 +61,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 {