Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: update edgeless theme
Browse files Browse the repository at this point in the history
fundon committed Nov 20, 2024

Verified

This commit was signed with the committer’s verified signature.
fundon Fangdun Tsai
1 parent 216b881 commit a1fb59f
Showing 10 changed files with 288 additions and 352 deletions.
32 changes: 32 additions & 0 deletions packages/affine/model/src/consts/color.ts
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
Original file line number Diff line number Diff line change
@@ -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',
Original file line number Diff line number Diff line change
@@ -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>
223 changes: 107 additions & 116 deletions packages/blocks/src/root-block/edgeless/components/panel/color-panel.ts
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';
@@ -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 = {
@@ -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>
`;
@@ -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;
@@ -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;
@@ -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;
@@ -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);
@@ -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}
@@ -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>
`;
}
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@ import {
DashLineIcon,
StraightLineIcon,
} from '@blocksuite/affine-components/icons';
import { type LineWidth, StrokeStyle } from '@blocksuite/affine-model';
import { LineWidth, StrokeStyle } from '@blocksuite/affine-model';
import { html } from 'lit';
import { classMap } from 'lit/directives/class-map.js';
import { repeat } from 'lit/directives/repeat.js';
@@ -47,14 +47,14 @@ const LINE_STYLE_LIST = [

export function LineStylesPanel({
onClick,
selectedLineSize,
selectedLineStyle,
selectedLineSize = LineWidth.Two,
lineStyles = [StrokeStyle.Solid, StrokeStyle.Dash, StrokeStyle.None],
}: LineStylesPanelProps = {}) {
const lineSizePanel = html`
<edgeless-line-width-panel
.selectedSize=${selectedLineSize as LineWidth}
.disable=${selectedLineStyle === StrokeStyle.None}
?disabled=${selectedLineStyle === StrokeStyle.None}
.selectedSize=${selectedLineSize}
@select=${(e: LineWidthEvent) => {
onClick?.({
type: 'size',
@@ -69,7 +69,7 @@ export function LineStylesPanel({
item => item.value,
({ name, icon, value }) => {
const active = selectedLineStyle === value;
const classes: Record<string, boolean> = {
const classes = {
'line-style-button': true,
[`mode-${value}`]: true,
};

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import { SHAPE_STROKE_COLORS, StrokeStyle } from '@blocksuite/affine-model';
import {
SHAPE_STROKE_COLORS,
type StrokeStyle,
} from '@blocksuite/affine-model';
import { WithDisposable } from '@blocksuite/global/utils';
import { css, html, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
@@ -31,7 +34,6 @@ export class StrokeStylePanel extends WithDisposable(LitElement) {
selectedLineSize: this.strokeWidth,
selectedLineStyle: this.strokeStyle,
onClick: e => this.setStrokeStyle(e),
lineStyles: [StrokeStyle.Solid, StrokeStyle.Dash],
})}
</div>
<editor-toolbar-separator
Original file line number Diff line number Diff line change
@@ -406,7 +406,6 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
selectedLineSize: selectedLineSize,
selectedLineStyle: selectedLineStyle,
onClick: (e: LineStyleEvent) => this._setShapeStyles(e),
lineStyles: [StrokeStyle.Solid, StrokeStyle.Dash],
})}
</div>
<editor-toolbar-separator
Original file line number Diff line number Diff line change
@@ -4,7 +4,6 @@ import { property, query } from 'lit/decorators.js';

import type { PieNode } from '../node.js';

import { ColorUnit } from '../../../edgeless/components/panel/color-panel.js';
import { isSubmenuNode } from '../utils.js';

const styles = css`
@@ -46,7 +45,11 @@ export class PieNodeContent extends LitElement {
'IPieSubMenuNode.role with color-picker should have children of type color'
);
const { color, hollowCircle } = hoveredNode.model;
return ColorUnit(color, { hollowCircle });
return html`<edgeless-color-button
class="large"
.color=${color}
?hollow-circle=${hollowCircle}
></edgeless-color-button>`;
}

const { label } = model;
15 changes: 12 additions & 3 deletions packages/blocks/src/root-block/widgets/pie-menu/pie-builder.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { assertExists } from '@blocksuite/global/utils';
import { html } from 'lit';

import type {
ActionFunction,
@@ -10,7 +11,6 @@ import type {
PieSubmenuNodeModel,
} from './base.js';

import { ColorUnit } from '../../edgeless/components/panel/color-panel.js';
import { PieManager } from './pie-manager.js';
import { calcNodeAngles, calcNodeWedges, isNodeWithChildren } from './utils.js';

@@ -118,7 +118,11 @@ export class PieMenuBuilder {
const icon = (ctx: PieMenuContext) => {
const color = props.active(ctx);

return ColorUnit(color, { hollowCircle: hollow });
return html`<edgeless-color-button
class="large"
.color=${color}
?hollow-circle=${hollow}
></edgeless-color-button>`;
};

const colorPickerNode: PieSubmenuNodeModel = {
@@ -128,7 +132,12 @@ export class PieMenuBuilder {
role: 'color-picker',
openOnHover: props.openOnHover ?? true,
children: props.colors.map(({ color }) => ({
icon: () => ColorUnit(color, { hollowCircle: hollow }),
icon: () =>
html`<edgeless-color-button
class="large"
.color=${color}
?hollow-circle=${hollow}
></edgeless-color-button>`,
type: 'color',
hollowCircle: hollow,
label: color,

0 comments on commit a1fb59f

Please sign in to comment.