fix(editor): improve color preview in custom tab of color picker (#11411)

Closes: [BS-3002](https://linear.app/affine-design/issue/BS-3002/color-picker-上-lightdark-按钮颜色丢失) [Screen Recording 2025-04-02 at 17.19.34.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/8ypiIKZXudF5a0tIgIzf/13288c59-ef11-4cbb-aec7-934a8a689feb.mov" />](https://app.graphite.dev/media/video/8ypiIKZXudF5a0tIgIzf/13288c59-ef11-4cbb-aec7-934a8a689feb.mov)
2026-02-14 05:14:54 +00:00 · 2025-04-03 01:38:27 +00:00
parent a5eb1b9985
commit 2026f12daa
4 changed files with 95 additions and 76 deletions
--- a/blocksuite/affine/components/src/color-picker/color-panel.ts
+++ b/blocksuite/affine/components/src/color-picker/color-panel.ts
@@ -1,85 +1,15 @@
 import type { Color, ColorScheme, Palette } from '@blocksuite/affine-model';
-import {
-  DefaultTheme,
-  isTransparent,
-  resolveColor,
-} from '@blocksuite/affine-model';
+import { DefaultTheme, resolveColor } from '@blocksuite/affine-model';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { ColorEvent } from '@blocksuite/affine-shared/utils';
-import { css, html, LitElement, nothing, svg, type TemplateResult } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { repeat } from 'lit/directives/repeat.js';
 import isEqual from 'lodash-es/isEqual';

-function TransparentIcon(hollowCircle = false) {
-  const CircleIcon: TemplateResult | typeof nothing = hollowCircle
-    ? svg`<circle cx="10" cy="10" r="8" fill="white" />`
-    : nothing;
-
-  return html`
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-    >
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M-1.17405 5.17857C-1.2241 5.5285 -1.25 5.88623 -1.25 6.25V8.39286H1.96429V11.6071H-1.25V13.75C-1.25 14.1138 -1.2241 14.4715 -1.17405 14.8214H1.96429V18.0357H0.0943102C0.602244 18.7639 1.23609 19.3978 1.96429 19.9057V18.0357L5.17857 18.0357V21.174C5.5285 21.2241 5.88623 21.25 6.25 21.25H8.39286V18.0357H11.6071V21.25H13.75C14.1138 21.25 14.4715 21.2241 14.8214 21.174V18.0357H18.0357L18.0357 19.9057C18.7639 19.3978 19.3978 18.7639 19.9057 18.0357L18.0357 18.0357V14.8214H21.174C21.2241 14.4715 21.25 14.1138 21.25 13.75V11.6071H18.0357V8.39286H21.25V6.25C21.25 5.88623 21.2241 5.5285 21.174 5.17857H18.0357V1.96429H19.9057C19.3978 1.23609 18.7639 0.602244 18.0357 0.09431L18.0357 1.96429H14.8214V-1.17405C14.4715 -1.2241 14.1138 -1.25 13.75 -1.25H11.6071V1.96429H8.39286V-1.25H6.25C5.88623 -1.25 5.5285 -1.2241 5.17857 -1.17405V1.96429H1.96429V0.0943099C1.23609 0.602244 0.602244 1.23609 0.0943099 1.96429H1.96429V5.17857H-1.17405ZM5.17857 5.17857V1.96429H8.39286V5.17857H5.17857ZM5.17857 8.39286H1.96429V5.17857H5.17857V8.39286ZM8.39286 8.39286V5.17857H11.6071V8.39286H8.39286ZM8.39286 11.6071V8.39286H5.17857V11.6071H1.96429V14.8214H5.17857V18.0357H8.39286V14.8214H11.6071V18.0357H14.8214V14.8214H18.0357V11.6071H14.8214V8.39286H18.0357V5.17857H14.8214V1.96429H11.6071V5.17857H14.8214V8.39286H11.6071V11.6071H8.39286ZM8.39286 11.6071V14.8214H5.17857V11.6071H8.39286ZM11.6071 11.6071H14.8214V14.8214H11.6071V11.6071Z"
-        fill="#D9D9D9"
-      />
-      ${CircleIcon}
-    </svg>
-  `;
-}
-
-function CircleIcon(color: string) {
-  return html`
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="${color}"
-    >
-      <circle cx="10" cy="10" r="10" />
-    </svg>
-  `;
-}
-
-function HollowCircleIcon(color: string) {
-  return html`
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="${color}"
-    >
-      <path
-        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"
-      />
-    </svg>
-  `;
-}
-
-function AdditionIcon(color: string, hollowCircle: boolean) {
-  if (isTransparent(color)) {
-    return TransparentIcon(hollowCircle);
-  }
-
-  if (hollowCircle) {
-    return HollowCircleIcon(color);
-  }
-
-  return CircleIcon(color);
-}
+import { AdditionIcon } from './icons';

 export class EdgelessColorButton extends LitElement {
  static override styles = css`
--- a/blocksuite/affine/components/src/color-picker/color-picker.ts
+++ b/blocksuite/affine/components/src/color-picker/color-picker.ts
@@ -11,6 +11,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 import clamp from 'lodash-es/clamp';

 import { AREA_CIRCLE_R, MATCHERS, SLIDER_CIRCLE_R } from './consts.js';
+import { TransparentIcon } from './icons.js';
 import { COLOR_PICKER_STYLE } from './styles.js';
 import type {
  Hsva,
@@ -509,7 +510,10 @@ export class EdgelessColorPicker extends SignalWatcher(
                ?active=${this.modeType$.value === type}
                @click=${() => this.#switchModeTab(type)}
              >
-                <div class="color"></div>
+                <div class="color-wrapper">
+                  ${TransparentIcon()}
+                  <div class="color"></div>
+                </div>
                <div>${name}</div>
              </button>
            </div>
--- a/blocksuite/affine/components/src/color-picker/icons.ts
+++ b/blocksuite/affine/components/src/color-picker/icons.ts
@@ -0,0 +1,70 @@
+import { isTransparent } from '@blocksuite/affine-model';
+import { html, svg, type TemplateResult } from 'lit';
+
+export function TransparentIcon(hollowCircle = false) {
+  const CircleIcon: TemplateResult | null = hollowCircle
+    ? svg`<circle cx="10" cy="10" r="8" fill="white" />`
+    : null;
+
+  return html`
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M-1.17405 5.17857C-1.2241 5.5285 -1.25 5.88623 -1.25 6.25V8.39286H1.96429V11.6071H-1.25V13.75C-1.25 14.1138 -1.2241 14.4715 -1.17405 14.8214H1.96429V18.0357H0.0943102C0.602244 18.7639 1.23609 19.3978 1.96429 19.9057V18.0357L5.17857 18.0357V21.174C5.5285 21.2241 5.88623 21.25 6.25 21.25H8.39286V18.0357H11.6071V21.25H13.75C14.1138 21.25 14.4715 21.2241 14.8214 21.174V18.0357H18.0357L18.0357 19.9057C18.7639 19.3978 19.3978 18.7639 19.9057 18.0357L18.0357 18.0357V14.8214H21.174C21.2241 14.4715 21.25 14.1138 21.25 13.75V11.6071H18.0357V8.39286H21.25V6.25C21.25 5.88623 21.2241 5.5285 21.174 5.17857H18.0357V1.96429H19.9057C19.3978 1.23609 18.7639 0.602244 18.0357 0.09431L18.0357 1.96429H14.8214V-1.17405C14.4715 -1.2241 14.1138 -1.25 13.75 -1.25H11.6071V1.96429H8.39286V-1.25H6.25C5.88623 -1.25 5.5285 -1.2241 5.17857 -1.17405V1.96429H1.96429V0.0943099C1.23609 0.602244 0.602244 1.23609 0.0943099 1.96429H1.96429V5.17857H-1.17405ZM5.17857 5.17857V1.96429H8.39286V5.17857H5.17857ZM5.17857 8.39286H1.96429V5.17857H5.17857V8.39286ZM8.39286 8.39286V5.17857H11.6071V8.39286H8.39286ZM8.39286 11.6071V8.39286H5.17857V11.6071H1.96429V14.8214H5.17857V18.0357H8.39286V14.8214H11.6071V18.0357H14.8214V14.8214H18.0357V11.6071H14.8214V8.39286H18.0357V5.17857H14.8214V1.96429H11.6071V5.17857H14.8214V8.39286H11.6071V11.6071H8.39286ZM8.39286 11.6071V14.8214H5.17857V11.6071H8.39286ZM11.6071 11.6071H14.8214V14.8214H11.6071V11.6071Z"
+        fill="#D9D9D9"
+      />
+      ${CircleIcon}
+    </svg>
+  `;
+}
+
+export function CircleIcon(color: string) {
+  return html`
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="${color}"
+    >
+      <circle cx="10" cy="10" r="10" />
+    </svg>
+  `;
+}
+
+export function HollowCircleIcon(color: string) {
+  return html`
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="${color}"
+    >
+      <path
+        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"
+      />
+    </svg>
+  `;
+}
+
+export function AdditionIcon(color: string, hollowCircle: boolean) {
+  if (isTransparent(color)) {
+    return TransparentIcon(hollowCircle);
+  }
+
+  if (hollowCircle) {
+    return HollowCircleIcon(color);
+  }
+
+  return CircleIcon(color);
+}
--- a/blocksuite/affine/components/src/color-picker/styles.ts
+++ b/blocksuite/affine/components/src/color-picker/styles.ts
@@ -85,14 +85,29 @@ export const COLOR_PICKER_STYLE = css`
  .modes .mode.dark button {
    background: #141414;
  }
-  .modes .mode button .color {
-    background: var(--c);
+  .modes .mode button .color-wrapper {
+    display: flex;
+    position: relative;
+    z-index: 0;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    overflow: hidden;
  }
+  .modes .mode button .color-wrapper .color {
+    width: 100%;
+    height: 100%;
+    background: var(--c);
+  }
+  .modes .mode button .color-wrapper svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+  }
  .modes .mode button[active] {
    pointer-events: none;
    outline: 2px solid var(--affine-brand-color, #1e96eb);