diff --git a/blocksuite/affine/components/src/color-picker/color-panel.ts b/blocksuite/affine/components/src/color-picker/color-panel.ts
index f235a0a6b5..d61f3331e6 100644
--- 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``
- : nothing;
-
- return html`
-
- `;
-}
-
-function CircleIcon(color: string) {
- return html`
-
- `;
-}
-
-function HollowCircleIcon(color: string) {
- return html`
-
- `;
-}
-
-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`
diff --git a/blocksuite/affine/components/src/color-picker/color-picker.ts b/blocksuite/affine/components/src/color-picker/color-picker.ts
index 18191874a6..0f28b306d3 100644
--- 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)}
>
-
+
+ ${TransparentIcon()}
+
+
${name}
diff --git a/blocksuite/affine/components/src/color-picker/icons.ts b/blocksuite/affine/components/src/color-picker/icons.ts
new file mode 100644
index 0000000000..3d5c987743
--- /dev/null
+++ 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``
+ : null;
+
+ return html`
+
+ `;
+}
+
+export function CircleIcon(color: string) {
+ return html`
+
+ `;
+}
+
+export function HollowCircleIcon(color: string) {
+ return html`
+
+ `;
+}
+
+export function AdditionIcon(color: string, hollowCircle: boolean) {
+ if (isTransparent(color)) {
+ return TransparentIcon(hollowCircle);
+ }
+
+ if (hollowCircle) {
+ return HollowCircleIcon(color);
+ }
+
+ return CircleIcon(color);
+}
diff --git a/blocksuite/affine/components/src/color-picker/styles.ts b/blocksuite/affine/components/src/color-picker/styles.ts
index 071d9d903e..348d4941bb 100644
--- 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);