Skip to content

Commit

Permalink
chore: update edgeless theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@fundon
fundon committed Nov 20, 2024
1 parent 216b881 commit a1fb59f
Show file tree
Hide file tree
Showing 10 changed files with 288 additions and 352 deletions.
32 changes: 32 additions & 0 deletions packages/affine/model/src/consts/color.ts
View file
Original file line number Diff line number Diff line change
@@ -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',
}
9 changes: 9 additions & 0 deletions packages/affine/model/src/consts/line.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,15 @@ export enum LineWidth {
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',
Expand Down
2 changes: 2 additions & 0 deletions packages/blocks/src/root-block/edgeless/components/color-picker/button.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
223 changes: 107 additions & 116 deletions packages/blocks/src/root-block/edgeless/components/panel/color-panel.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
import { TransparentIcon } from '@blocksuite/affine-components/icons';
import {
ColorScheme,
LINE_COLORS,
LineColor,
NoteBackgroundColor,
ShapeFillColor,
} from '@blocksuite/affine-model';
import { ColorScheme, LINE_COLORS, LineColor } 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';
Expand Down Expand Up @@ -35,17 +31,17 @@ export function isTransparent(color: string) {
return color.toLowerCase().endsWith('transparent');
}

function isSameColorWithBackground(color: string) {
const colors: string[] = [
LineColor.Black,
LineColor.White,
NoteBackgroundColor.Black,
NoteBackgroundColor.White,
ShapeFillColor.Black,
ShapeFillColor.White,
];
return colors.includes(color.toLowerCase());
}
// function isSameColorWithBackground(color: string) {
// const colors: string[] = [
// LineColor.Black,
// LineColor.White,
// NoteBackgroundColor.Black,
// NoteBackgroundColor.White,
// ShapeFillColor.Black,
// ShapeFillColor.White,
// ];
// return colors.includes(color.toLowerCase());
// }

function TransparentColor(hollowCircle = false) {
const containerStyle = {
Expand Down Expand Up @@ -73,25 +69,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>
`;
Expand All @@ -101,71 +111,64 @@ function AdditionIcon(color: string, hollowCircle: boolean) {
if (isTransparent(color)) {
return TransparentColor(hollowCircle);
}

if (hollowCircle) {
return BorderedHollowCircle(color);
}
return nothing;
}

export function ColorUnit(
color: string,
{
hollowCircle,
letter,
}: {
hollowCircle?: boolean;
letter?: boolean;
} = {}
) {
const additionIcon = AdditionIcon(color, !!hollowCircle);

const colorStyle =
!hollowCircle && !isTransparent(color)
? { background: `var(${color})` }
: {};

const borderStyle =
isSameColorWithBackground(color) && !hollowCircle
? {
border: '0.5px solid var(--affine-border-color)',
}
: {};

const style = {
width: '16px',
height: '16px',
borderRadius: '50%',
boxSizing: 'border-box',
overflow: 'hidden',
...borderStyle,
...colorStyle,
};

return html`
<div
class="color-unit"
style=${styleMap(style)}
aria-label=${color.toLowerCase()}
data-letter=${letter ? 'A' : ''}
>
${additionIcon}
</div>
`;
return Circle(color);
}

export class EdgelessColorButton extends LitElement {
static override styles = css`
:host {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.color-unit {
display: flex;
justify-content: center;
align-items: center;
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;
Expand All @@ -178,30 +181,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;
Expand All @@ -213,8 +211,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;
Expand All @@ -230,9 +228,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);
Expand All @@ -245,8 +243,8 @@ export class EdgelessColorPanel extends LitElement {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 184px;
gap: 8px;
width: 248px;
gap: 10px;
}
${colorContainerStyles}
Expand Down Expand Up @@ -274,24 +272,17 @@ 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>
`;
}
Expand Down
Loading

0 comments on commit a1fb59f

Please sign in to comment.