Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-24 18:02:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

46
blocksuite/affine/shared/src/styles/font.ts
View File

@@ -1,24 +1,30 @@
import { baseTheme } from '@toeverything/theme';
import { unsafeCSS } from 'lit';
import { css, unsafeCSS } from 'lit';
export const FONT_BASE = unsafeCSS(`
font-family: ${baseTheme.fontSansFamily};
font-feature-settings:
'clig' off,
'liga' off;
font-style: normal;
`);
export const fontBaseStyle = (container: string) => css`
${unsafeCSS(container)} {
font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
font-feature-settings:
'clig' off,
'liga' off;
font-style: normal;
}
`;
export const FONT_SM = unsafeCSS(`
${FONT_BASE};
font-size: var(--affine-font-sm);
font-weight: 500;
line-height: 22px;
`);
export const fontSMStyle = (container: string) => css`
${fontBaseStyle(container)}
${unsafeCSS(container)} {
font-size: var(--affine-font-sm);
font-weight: 500;
line-height: 22px;
}
`;
export const FONT_XS = unsafeCSS(`
${FONT_BASE};
font-size: var(--affine-font-xs);
font-weight: 500;
line-height: 20px;
`);
export const fontXSStyle = (container: string) => css`
${fontBaseStyle(container)}
${unsafeCSS(container)} {
font-size: var(--affine-font-xs);
font-weight: 500;
line-height: 20px;
}
`;

4
blocksuite/affine/shared/src/styles/index.ts
View File

@@ -1,4 +1,4 @@
export { FONT_BASE, FONT_SM, FONT_XS } from './font';
export { PANEL_BASE, PANEL_BASE_COLORS } from './panel';
export { fontBaseStyle, fontSMStyle, fontXSStyle } from './font';
export { panelBaseColorsStyle, panelBaseStyle } from './panel';
export { scrollbarStyle } from './scrollbar-style';
export { affineTextStyles } from './text';

43
blocksuite/affine/shared/src/styles/panel.ts
View File

@@ -1,23 +1,26 @@
import { cssVarV2 } from '@toeverything/theme/v2';
import { unsafeCSS } from 'lit';
import { css, unsafeCSS } from 'lit';
import { FONT_SM } from './font.js';
import { unsafeCSSVarV2 } from '../theme/css-variables';
import { fontSMStyle } from './font';
export const PANEL_BASE_COLORS = unsafeCSS(`
color: var(--affine-icon-color);
box-shadow: var(--affine-overlay-shadow);
background: ${cssVarV2('layer/background/overlayPanel')};
`);
export const panelBaseColorsStyle = (container: string) => css`
${unsafeCSS(container)} {
color: var(--affine-icon-color);
box-shadow: var(--affine-overlay-shadow);
background: ${unsafeCSSVarV2('layer/background/overlayPanel')};
}
`;
export const PANEL_BASE = unsafeCSS(`
display: flex;
align-items: center;
gap: 8px;
width: max-content;
padding: 0 6px;
border-radius: 4px;
border: 0.5px solid ${cssVarV2('layer/insideBorder/border')};
${PANEL_BASE_COLORS};
${FONT_SM};
`);
export const panelBaseStyle = (container: string) => css`
${unsafeCSS(container)} {
display: flex;
align-items: center;
gap: 8px;
width: max-content;
padding: 0 6px;
border-radius: 8px;
border: 0.5px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
}
${panelBaseColorsStyle(container)}
${fontSMStyle(container)}
`;