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

fix(core): border color for embed-linked-doc-block and others (#13056)

Browse Source 
fixes https://github.com/toeverything/AFFiNE/issues/12972

border: `#eee` -> `#f3f3f3`

background: `#fff` -> `#fff` (no-op)

This change is based on [@fundon 's PR from 2 month
ago](https://github.com/toeverything/AFFiNE/pull/11763/files#diff-cc768d5886dd743d8a7ad97df05added2710c0487d281f2b33b02ab1a9c78e4c)
which I assume has the most up-to-date design

I am also curious to know the current state of CSSVarV2 function. Should
it replace all previous usage of css variables? I can do a find-replace
globally (not just embed blocks) if that's important enough.

<!--

https://github.com/toeverything/design/blob/main/packages/theme/src/v2/variables.ts#L296
-->
This commit is contained in:
Yifei Yin
2025-07-07 00:31:25 -04:00
committed by GitHub
parent 75f2eecbbb
commit 0be63d6e0e
9 changed files with 20 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
blocksuite/affine/blocks/bookmark/src/styles.ts
View File

@@ -17,9 +17,9 @@ export const styles = css`
width: 100%; width: 100%;
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--affine-background-tertiary-color); border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')};
background: var(--affine-background-primary-color); background: ${unsafeCSSVarV2('layer/background/primary')};
user-select: none; user-select: none;
} }

2
blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/styles.ts
View File

@@ -9,7 +9,7 @@ export const styles = css`
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--affine-background-tertiary-color); border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')};
background: ${unsafeCSSVarV2('layer/background/primary')}; background: ${unsafeCSSVarV2('layer/background/primary')};
user-select: none; user-select: none;
position: relative; position: relative;

4
blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/styles.ts
View File

@@ -197,8 +197,8 @@ export const cardStyles = css`
width: 100%; width: 100%;
height: ${EMBED_CARD_HEIGHT.horizontal}px; height: ${EMBED_CARD_HEIGHT.horizontal}px;
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--affine-background-tertiary-color); border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')};
background: var(--affine-background-primary-color); background: ${unsafeCSSVarV2('layer/background/primary')};
user-select: none; user-select: none;
} }

4
blocksuite/affine/blocks/embed/src/embed-figma-block/styles.ts
View File

@@ -11,9 +11,9 @@ export const styles = css`
height: 100%; height: 100%;
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--affine-background-tertiary-color); border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')};
background: var(--affine-background-primary-color); background: ${unsafeCSSVarV2('layer/background/primary')};
user-select: none; user-select: none;
} }

5
blocksuite/affine/blocks/embed/src/embed-github-block/styles.ts
View File

@@ -1,3 +1,4 @@
import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
import { css, html } from 'lit'; import { css, html } from 'lit';
export const styles = css` export const styles = css`
@@ -9,9 +10,9 @@ export const styles = css`
height: 100%; height: 100%;
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--affine-background-tertiary-color); border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')};
background: var(--affine-background-primary-color); background: ${unsafeCSSVarV2('layer/background/primary')};
user-select: none; user-select: none;
overflow: hidden; overflow: hidden;
} }

5
blocksuite/affine/blocks/embed/src/embed-html-block/styles.ts
View File

@@ -1,3 +1,4 @@
import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
import { css, html } from 'lit'; import { css, html } from 'lit';
export const EMBED_HTML_MIN_WIDTH = 370; export const EMBED_HTML_MIN_WIDTH = 370;
@@ -15,9 +16,9 @@ export const styles = css`
gap: 20px; gap: 20px;
border-radius: 12px; border-radius: 12px;
border: 1px solid var(--affine-background-tertiary-color); border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')};
background: var(--affine-background-primary-color); background: ${unsafeCSSVarV2('layer/background/primary')};
user-select: none; user-select: none;
} }

5
blocksuite/affine/blocks/embed/src/embed-loom-block/styles.ts
View File

@@ -1,3 +1,4 @@
import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
import { css, html } from 'lit'; import { css, html } from 'lit';
export const styles = css` export const styles = css`
@@ -12,9 +13,9 @@ export const styles = css`
height: 100%; height: 100%;
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--affine-background-tertiary-color); border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')};
background: var(--affine-background-primary-color); background: ${unsafeCSSVarV2('layer/background/primary')};
user-select: none; user-select: none;
} }

4
blocksuite/affine/blocks/embed/src/embed-youtube-block/styles.ts
View File

@@ -13,9 +13,9 @@ export const styles = css`
padding: 12px; padding: 12px;
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--affine-background-tertiary-color); border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')};
background: var(--affine-background-primary-color); background: ${unsafeCSSVarV2('layer/background/primary')};
user-select: none; user-select: none;
} }

3
blocksuite/affine/blocks/image/src/preview-image/edgeless.ts
View File

@@ -1,3 +1,4 @@
import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
import { toGfxBlockComponent } from '@blocksuite/std'; import { toGfxBlockComponent } from '@blocksuite/std';
import { css } from 'lit'; import { css } from 'lit';
@@ -9,7 +10,7 @@ export class ImageEdgelessPlaceholderBlockComponent extends toGfxBlockComponent(
static override styles = css` static override styles = css`
affine-edgeless-placeholder-preview-image affine-edgeless-placeholder-preview-image
.affine-placeholder-preview-container { .affine-placeholder-preview-container {
border: 1px solid var(--affine-background-tertiary-color); border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')};
} }
`; `;