From 7d42401c9236e3c9d64b00a8424566d90dde3571 Mon Sep 17 00:00:00 2001
From: Fangdun Tsai <fundon@pindash.io>
Date: Tue, 19 Nov 2024 19:10:36 +0800
Subject: [PATCH] chore: update edgeless theme

---
 packages/affine/model/src/consts/color.ts     |  32 ++++
 .../components/color-picker/button.ts         |   2 +
 .../edgeless/components/panel/color-panel.ts  | 146 +++++++++++-------
 3 files changed, 125 insertions(+), 55 deletions(-)
 create mode 100644 packages/affine/model/src/consts/color.ts

diff --git a/packages/affine/model/src/consts/color.ts b/packages/affine/model/src/consts/color.ts
new file mode 100644
index 0000000000000..3c655cce8a89f
--- /dev/null
+++ b/packages/affine/model/src/consts/color.ts
@@ -0,0 +1,32 @@
+/* eslint perfectionist/sort-enums: "off" */
+
+export enum Palette {
+  Black = '#000000',
+  White = '#ffffff',
+
+  LightBlue = '#e6f5ff',
+  LightGreen = '#f1fdf4',
+  LightGrey = '#e6e6e6',
+  LightMagenta = '#ffecf6',
+  LightOrange = '#ffebd5',
+  LightPurple = '#ede9ff',
+  LightRed = '#fce5e6',
+  LightYellow = '#fffbd5',
+
+  MediumBlue = '#84cfff',
+  MediumGreen = '#3cbc36',
+  MediumGrey = '#929292',
+  MediumMagenta = '#e96cab',
+  MediumOrange = '#ff8c38',
+  MediumPurple = '#6e52df',
+  MediumRed = '#fb7081',
+  MediumYellow = '#fcd34d',
+
+  HeavyBlue = '#1c70a5',
+  HeavyGreen = '#447756',
+  HeavyMagenta = '#941555',
+  HeavyOrange = '#b55309',
+  HeavyPurple = '#5a21b6',
+  HeavyRed = '#761717',
+  HeavyYellow = '#ac7400',
+}
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
index e185f77769034..3865cd7b840ac 100644
--- a/packages/blocks/src/root-block/edgeless/components/color-picker/button.ts
+++ b/packages/blocks/src/root-block/edgeless/components/color-picker/button.ts
@@ -82,11 +82,13 @@ 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}
                   ></edgeless-color-button>
diff --git a/packages/blocks/src/root-block/edgeless/components/panel/color-panel.ts b/packages/blocks/src/root-block/edgeless/components/panel/color-panel.ts
index 04f48055fda7a..730dcb2bfaa9e 100644
--- a/packages/blocks/src/root-block/edgeless/components/panel/color-panel.ts
+++ b/packages/blocks/src/root-block/edgeless/components/panel/color-panel.ts
@@ -6,6 +6,8 @@ import {
   NoteBackgroundColor,
   ShapeFillColor,
 } from '@blocksuite/affine-model';
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { css, html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -73,25 +75,39 @@ function TransparentColor(hollowCircle = false) {
   `;
 }
 
-function BorderedHollowCircle(color: string) {
-  const valid = color.startsWith('--');
-  const strokeWidth = valid && isSameColorWithBackground(color) ? 1 : 0;
-  const style = {
-    fill: valid ? `var(${color})` : color,
-    stroke: 'var(--affine-border-color)',
-  };
+function Circle(color: string) {
   return html`
     <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
       fill="none"
+    >
+      <circle cx="10" cy="10" r="10" fill="${color}" />
+    </svg>
+  `;
+}
+
+function BorderedHollowCircle(color: string) {
+  return html`
+    <svg
       xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
     >
       <path
-        d="M12.3125 8C12.3125 10.3817 10.3817 12.3125 8 12.3125C5.61827 12.3125 3.6875 10.3817 3.6875 8C3.6875 5.61827 5.61827 3.6875 8 3.6875C10.3817 3.6875 12.3125 5.61827 12.3125 8ZM8 15.5C12.1421 15.5 15.5 12.1421 15.5 8C15.5 3.85786 12.1421 0.5 8 0.5C3.85786 0.5 0.5 3.85786 0.5 8C0.5 12.1421 3.85786 15.5 8 15.5Z"
-        stroke-width="${strokeWidth}"
-        style=${styleMap(style)}
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17ZM10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20Z"
+        fill="${color}"
+      />
+      <path
+        d="M10 17.25C14.0041 17.25 17.25 14.0041 17.25 10C17.25 5.99594 14.0041 2.75 10 2.75C5.99594 2.75 2.75 5.99594 2.75 10C2.75 14.0041 5.99594 17.25 10 17.25ZM19.75 10C19.75 15.3848 15.3848 19.75 10 19.75C4.61522 19.75 0.25 15.3848 0.25 10C0.25 4.61522 4.61522 0.25 10 0.25C15.3848 0.25 19.75 4.61522 19.75 10Z"
+        stroke="${cssVarV2('layer/insideBorder/blackBorder')}"
+        stroke-width="0.5"
       />
     </svg>
   `;
@@ -101,10 +117,12 @@ function AdditionIcon(color: string, hollowCircle: boolean) {
   if (isTransparent(color)) {
     return TransparentColor(hollowCircle);
   }
+
   if (hollowCircle) {
     return BorderedHollowCircle(color);
   }
-  return nothing;
+
+  return Circle(color);
 }
 
 export function ColorUnit(
@@ -132,11 +150,6 @@ export function ColorUnit(
       : {};
 
   const style = {
-    width: '16px',
-    height: '16px',
-    borderRadius: '50%',
-    boxSizing: 'border-box',
-    overflow: 'hidden',
     ...borderStyle,
     ...colorStyle,
   };
@@ -156,16 +169,50 @@ export function ColorUnit(
 export class EdgelessColorButton extends LitElement {
   static override styles = css`
     :host {
+      position: relative;
       display: flex;
       justify-content: center;
       align-items: center;
+    }
+
+    .color-unit {
+      border-radius: 50%;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+
+    :host(.large) {
+      width: 27px;
+      height: 27px;
+    }
+    :host(.large) .color-unit {
+      width: 21px;
+      height: 21px;
+    }
+    :host(.large:not([hollow-circle])) .color-unit {
+      border: 0.5px solid ${unsafeCSSVarV2('layer/insideBorder/blackBorder')};
+    }
+
+    :host(.small) {
       width: 20px;
       height: 20px;
     }
+    :host(.small) .color-unit {
+      width: 16.25px;
+      height: 16.25px;
+    }
+    :host(.small) .color-unit svg {
+      width: 100%;
+      height: 100%;
+    }
 
-    .color-unit {
-      width: 16px;
-      height: 16px;
+    :host([active]):after {
+      position: absolute;
+      display: block;
+      content: '';
+      width: 100%;
+      height: 100%;
+      border: 1.5px solid var(--affine-primary-color);
       border-radius: 50%;
       box-sizing: border-box;
       overflow: hidden;
@@ -178,30 +225,25 @@ export class EdgelessColorButton extends LitElement {
   }
 
   override render() {
-    const { color, hollowCircle, letter } = this;
-    const additionIcon = AdditionIcon(color, !!hollowCircle);
-    const style: Record<string, string> = {};
-    if (!hollowCircle) {
-      style.background = this.preprocessColor;
-      if (isSameColorWithBackground(color)) {
-        style.border = '0.5px solid var(--affine-border-color)';
-      }
-    }
+    const { color, preprocessColor, hollowCircle, letter } = this;
+    const additionIcon = AdditionIcon(preprocessColor, !!hollowCircle);
     return html`<div
       class="color-unit"
       aria-label=${color.toLowerCase()}
       data-letter=${letter ? 'A' : nothing}
-      style=${styleMap(style)}
     >
       ${additionIcon}
     </div>`;
   }
 
+  @property({ attribute: true, type: Boolean })
+  accessor active: boolean = false;
+
   @property({ attribute: false })
   accessor color!: string;
 
-  @property({ attribute: false })
-  accessor hollowCircle: boolean | undefined = undefined;
+  @property({ attribute: 'hollow-circle', type: Boolean })
+  accessor hollowCircle: boolean = false;
 
   @property({ attribute: false })
   accessor letter: boolean | undefined = undefined;
@@ -213,8 +255,8 @@ export const colorContainerStyles = css`
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 24px;
-    height: 24px;
+    width: 27px;
+    height: 27px;
     border-radius: 50%;
     box-sizing: border-box;
     overflow: hidden;
@@ -230,9 +272,9 @@ export const colorContainerStyles = css`
 
   .color-container[active]:after {
     position: absolute;
-    width: 20px;
-    height: 20px;
-    border: 0.5px solid var(--affine-primary-color);
+    width: 27px;
+    height: 27px;
+    border: 1.5px solid var(--affine-primary-color);
     border-radius: 50%;
     box-sizing: border-box;
     content: attr(data-letter);
@@ -274,22 +316,16 @@ export class EdgelessColorPanel extends LitElement {
       ${repeat(
         this.palettes,
         color => color,
-        color => {
-          const unit = ColorUnit(color, {
-            hollowCircle: this.hollowCircle,
-            letter: this.showLetterMark,
-          });
-
-          return html`
-            <div
-              class="color-container"
-              ?active=${color === this.value}
-              @click=${() => this.onSelect(color)}
-            >
-              ${unit}
-            </div>
-          `;
-        }
+        color =>
+          html`<edgeless-color-button
+            class="large"
+            .color=${color}
+            .letter=${this.showLetterMark}
+            ?hollow-circle=${this.hollowCircle}
+            ?active=${color === this.value}
+            @click=${() => this.onSelect(color)}
+          >
+          </edgeless-color-button>`
       )}
       </div>
       <slot name="custom"></slot>