fix(editor): figma ui issues (#10123)

blocksuite/affine/block-embed/src/embed-figma-block/embed-figma-block.ts

@@ -4,7 +4,7 @@ import type {
   EmbedFigmaStyles,
 } from '@blocksuite/affine-model';
 import { BlockSelection } from '@blocksuite/block-std';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -57,11 +57,10 @@ export class EmbedFigmaBlockComponent extends EmbedBlockComponent<
     super.connectedCallback();
     this._cardStyle = this.model.style;
 
-    if (!this.model.description && !this.model.title) {
+    if (!this.model.title) {
       this.doc.withoutTransact(() => {
         this.doc.updateBlock(this.model, {
           title: 'Figma',
-          description: this.model.url,
         });
       });
     }
@@ -97,7 +96,6 @@ export class EmbedFigmaBlockComponent extends EmbedBlockComponent<
   override renderBlock() {
     const { title, description, url } = this.model;
     const titleText = title ?? 'Figma';
-    const descriptionText = description ?? url;
 
     return this.renderEmbed(
       () => html`
@@ -140,9 +138,11 @@ export class EmbedFigmaBlockComponent extends EmbedBlockComponent<
               </div>
             </div>
 
-            <div class="affine-embed-figma-content-description">
+            ${description
-              ${descriptionText}
+              ? html`<div class="affine-embed-figma-content-description">
-            </div>
+                  ${description}
+                </div>`
+              : nothing}
 
             <div class="affine-embed-figma-content-url" @click=${this.open}>
               <span>www.figma.com</span>

blocksuite/affine/block-embed/src/embed-figma-block/styles.ts

@@ -2,6 +2,7 @@ import {
   EMBED_CARD_HEIGHT,
   EMBED_CARD_WIDTH,
 } from '@blocksuite/affine-shared/consts';
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { css, html } from 'lit';
 
 export const styles = css`
@@ -161,7 +162,7 @@ export const styles = css`
     white-space: normal;
     overflow: hidden;
     text-overflow: ellipsis;
-    color: var(--affine-text-secondary-color);
+    color: ${unsafeCSSVarV2('icon/primary')};
 
     font-family: var(--affine-font-family);
     font-size: var(--affine-font-xs);
@@ -183,10 +184,10 @@ export const styles = css`
     width: 12px;
     height: 12px;
   }
-  .affine-embed-figma-content-url-icon .open-icon {
+  .affine-embed-figma-content-url-icon svg {
     height: 12px;
     width: 12px;
-    fill: var(--affine-text-secondary-color);
+    fill: ${unsafeCSSVarV2('icon/primary')};
   }
 
   .affine-embed-figma-block.selected {

blocksuite/tests-legacy/snapshots/bookmark.spec.ts/embed-figma.json

@@ -49,7 +49,7 @@
             "url": "https://www.figma.com/design/JuXs6uOAICwf4I4tps0xKZ123",
             "caption": null,
             "title": "Figma",
-            "description": "https://www.figma.com/design/JuXs6uOAICwf4I4tps0xKZ123"
+            "description": null
           },
           "children": []
         }