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`
`
: html`
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`
+ `;
+}
+
+function BorderedHollowCircle(color: string) {
+ return html`
+
`;
@@ -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 = {};
- 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`
${additionIcon}
`;
}
+ @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`
- this.onSelect(color)}
- >
- ${unit}
-
- `;
- }
+ color =>
+ html` this.onSelect(color)}
+ >
+ `
)}