refactor(editor): basic styles of font and panel (#11290)

* Updated `border-radius` of panel to `8px`.  [BS-2901](https://linear.app/affine-design/issue/BS-2901/meta-info-ui-issue) [BS-2810](https://linear.app/affine-design/issue/BS-2810/toolbarpicker-圆角更新为-8px)
* Refactored basic styles of font and panel.

<img width="549" alt="Screenshot 2025-03-31 at 12 56 36" src="https://github.com/user-attachments/assets/4a827e1e-f802-4251-a563-4a34b891a5e3" />
This commit is contained in:
fundon
2025-04-01 01:35:59 +00:00
parent b099deb6df
commit eac8f32f4c
13 changed files with 84 additions and 73 deletions

View File

@@ -9,7 +9,7 @@ import {
type TelemetryEvent,
TelemetryProvider,
} from '@blocksuite/affine-shared/services';
import { FONT_SM, FONT_XS } from '@blocksuite/affine-shared/styles';
import { fontSMStyle, fontXSStyle } from '@blocksuite/affine-shared/styles';
import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
import {
listenClickAway,
@@ -90,8 +90,8 @@ export class EmbedCardEditModal extends SignalWatcher(
background: transparent;
border: 1px solid ${unsafeCSSVarV2('input/border/default')};
color: var(--affine-text-primary-color);
${FONT_SM};
}
${fontSMStyle('.row .input')}
.input::placeholder {
color: var(--affine-placeholder-color);
}
@@ -117,9 +117,9 @@ export class EmbedCardEditModal extends SignalWatcher(
border-radius: 4px;
border: 1px solid ${unsafeCSSVarV2('button/innerBlackBorder')};
background: ${unsafeCSSVarV2('button/secondary')};
${FONT_XS};
color: ${unsafeCSSVarV2('text/primary')};
}
${fontXSStyle('.row.actions .button')}
.row.actions .button[disabled],
.row.actions .button:disabled {
pointer-events: none;

View File

@@ -1,4 +1,4 @@
import { FONT_XS, PANEL_BASE } from '@blocksuite/affine-shared/styles';
import { fontXSStyle, panelBaseStyle } from '@blocksuite/affine-shared/styles';
import { css } from 'lit';
export const embedCardModalStyles = css`
@@ -12,8 +12,8 @@ export const embedCardModalStyles = css`
z-index: 1;
}
${panelBaseStyle('.embed-card-modal-wrapper')}
.embed-card-modal-wrapper {
${PANEL_BASE};
flex-direction: column;
position: absolute;
left: 0;
@@ -50,8 +50,8 @@ export const embedCardModalStyles = css`
border: 1px solid var(--affine-border-color);
background: var(--affine-white-10);
color: var(--affine-text-primary-color);
${FONT_XS};
}
${fontXSStyle('.embed-card-modal-input')}
input.embed-card-modal-input {
padding-top: 4px;
padding-bottom: 4px;