From 0be63d6e0ef7e1bfc6b828de9587740f3ec4ffdd Mon Sep 17 00:00:00 2001 From: Yifei Yin Date: Mon, 7 Jul 2025 00:31:25 -0400 Subject: [PATCH] fix(core): border color for embed-linked-doc-block and others (#13056) 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. --- blocksuite/affine/blocks/bookmark/src/styles.ts | 4 ++-- .../blocks/embed-doc/src/embed-linked-doc-block/styles.ts | 2 +- .../blocks/embed-doc/src/embed-synced-doc-block/styles.ts | 4 ++-- .../affine/blocks/embed/src/embed-figma-block/styles.ts | 4 ++-- .../affine/blocks/embed/src/embed-github-block/styles.ts | 5 +++-- .../affine/blocks/embed/src/embed-html-block/styles.ts | 5 +++-- .../affine/blocks/embed/src/embed-loom-block/styles.ts | 5 +++-- .../affine/blocks/embed/src/embed-youtube-block/styles.ts | 4 ++-- blocksuite/affine/blocks/image/src/preview-image/edgeless.ts | 3 ++- 9 files changed, 20 insertions(+), 16 deletions(-) diff --git a/blocksuite/affine/blocks/bookmark/src/styles.ts b/blocksuite/affine/blocks/bookmark/src/styles.ts index 76bb5fed84..03b5e3f126 100644 --- a/blocksuite/affine/blocks/bookmark/src/styles.ts +++ b/blocksuite/affine/blocks/bookmark/src/styles.ts @@ -17,9 +17,9 @@ export const styles = css` width: 100%; 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; } diff --git a/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/styles.ts b/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/styles.ts index 31c1e4746d..f40dab5f05 100644 --- a/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/styles.ts +++ b/blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/styles.ts @@ -9,7 +9,7 @@ export const styles = css` width: 100%; height: 100%; border-radius: 8px; - border: 1px solid var(--affine-background-tertiary-color); + border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')}; background: ${unsafeCSSVarV2('layer/background/primary')}; user-select: none; position: relative; diff --git a/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/styles.ts b/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/styles.ts index 14b1fb937e..b870d712ee 100644 --- a/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/styles.ts +++ b/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/styles.ts @@ -197,8 +197,8 @@ export const cardStyles = css` width: 100%; height: ${EMBED_CARD_HEIGHT.horizontal}px; border-radius: 8px; - border: 1px solid var(--affine-background-tertiary-color); - background: var(--affine-background-primary-color); + border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')}; + background: ${unsafeCSSVarV2('layer/background/primary')}; user-select: none; } diff --git a/blocksuite/affine/blocks/embed/src/embed-figma-block/styles.ts b/blocksuite/affine/blocks/embed/src/embed-figma-block/styles.ts index da06a51243..3c02ac431c 100644 --- a/blocksuite/affine/blocks/embed/src/embed-figma-block/styles.ts +++ b/blocksuite/affine/blocks/embed/src/embed-figma-block/styles.ts @@ -11,9 +11,9 @@ export const styles = css` height: 100%; 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; } diff --git a/blocksuite/affine/blocks/embed/src/embed-github-block/styles.ts b/blocksuite/affine/blocks/embed/src/embed-github-block/styles.ts index 10934ac1d5..f1ed15d1b9 100644 --- a/blocksuite/affine/blocks/embed/src/embed-github-block/styles.ts +++ b/blocksuite/affine/blocks/embed/src/embed-github-block/styles.ts @@ -1,3 +1,4 @@ +import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme'; import { css, html } from 'lit'; export const styles = css` @@ -9,9 +10,9 @@ export const styles = css` height: 100%; 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; overflow: hidden; } diff --git a/blocksuite/affine/blocks/embed/src/embed-html-block/styles.ts b/blocksuite/affine/blocks/embed/src/embed-html-block/styles.ts index 70a296ef05..323cbb5729 100644 --- a/blocksuite/affine/blocks/embed/src/embed-html-block/styles.ts +++ b/blocksuite/affine/blocks/embed/src/embed-html-block/styles.ts @@ -1,3 +1,4 @@ +import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme'; import { css, html } from 'lit'; export const EMBED_HTML_MIN_WIDTH = 370; @@ -15,9 +16,9 @@ export const styles = css` gap: 20px; 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; } diff --git a/blocksuite/affine/blocks/embed/src/embed-loom-block/styles.ts b/blocksuite/affine/blocks/embed/src/embed-loom-block/styles.ts index 5e4e209b00..5c556a2e10 100644 --- a/blocksuite/affine/blocks/embed/src/embed-loom-block/styles.ts +++ b/blocksuite/affine/blocks/embed/src/embed-loom-block/styles.ts @@ -1,3 +1,4 @@ +import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme'; import { css, html } from 'lit'; export const styles = css` @@ -12,9 +13,9 @@ export const styles = css` height: 100%; 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; } diff --git a/blocksuite/affine/blocks/embed/src/embed-youtube-block/styles.ts b/blocksuite/affine/blocks/embed/src/embed-youtube-block/styles.ts index 56cdbf59e2..012299fd70 100644 --- a/blocksuite/affine/blocks/embed/src/embed-youtube-block/styles.ts +++ b/blocksuite/affine/blocks/embed/src/embed-youtube-block/styles.ts @@ -13,9 +13,9 @@ export const styles = css` padding: 12px; 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; } diff --git a/blocksuite/affine/blocks/image/src/preview-image/edgeless.ts b/blocksuite/affine/blocks/image/src/preview-image/edgeless.ts index 32a01fe159..86a514c3c5 100644 --- a/blocksuite/affine/blocks/image/src/preview-image/edgeless.ts +++ b/blocksuite/affine/blocks/image/src/preview-image/edgeless.ts @@ -1,3 +1,4 @@ +import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme'; import { toGfxBlockComponent } from '@blocksuite/std'; import { css } from 'lit'; @@ -9,7 +10,7 @@ export class ImageEdgelessPlaceholderBlockComponent extends toGfxBlockComponent( static override styles = css` affine-edgeless-placeholder-preview-image .affine-placeholder-preview-container { - border: 1px solid var(--affine-background-tertiary-color); + border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')}; } `;