refactor(core): use unsafeCSSVar instead of var (#11188)

packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-chips.ts

@@ -6,6 +6,7 @@ import {
 } from '@blocksuite/affine/block-std';
 import { createLitPortal } from '@blocksuite/affine/components/portal';
 import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/lit';
+import { unsafeCSSVarV2 } from '@blocksuite/affine/shared/theme';
 import { MoreVerticalIcon, PlusIcon } from '@blocksuite/icons/lit';
 import { flip, offset } from '@floating-ui/dom';
 import { computed, type Signal, signal } from '@preact/signals-core';
@@ -54,25 +55,27 @@ export class ChatPanelChips extends SignalWatcher(
       justify-content: center;
       width: 24px;
       height: 24px;
-      border: 0.5px solid var(--affine-border-color);
+      border: 0.5px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
       border-radius: 4px;
-      margin: 4px 0;
+      margin: 4px;
       box-sizing: border-box;
       cursor: pointer;
       font-size: 12px;
     }
     .add-button:hover,
-    .collapse-button:hover {
-      background-color: var(--affine-hover-color);
+    .collapse-button:hover,
+    .more-candidate-button:hover {
+      background-color: ${unsafeCSSVarV2('layer/background/hoverOverlay')};
     }
     .more-candidate-button {
       border-width: 1px;
       border-style: dashed;
-      background: var(--affine-background-secondary-color);
-      color: var(--affine-icon-secondary);
+      border-color: ${unsafeCSSVarV2('icon/tertiary')};
+      background: ${unsafeCSSVarV2('layer/background/secondary')};
+      color: ${unsafeCSSVarV2('icon/secondary')};
     }
     .more-candidate-button svg {
-      color: var(--affine-icon-secondary);
+      color: ${unsafeCSSVarV2('icon/secondary')};
     }
   `;
 
@@ -265,7 +268,7 @@ export class ChatPanelChips extends SignalWatcher(
       computePosition: {
         referenceElement: this.addButton,
         placement: 'top-start',
-        middleware: [offset({ crossAxis: -30, mainAxis: 10 }), flip()],
+        middleware: [offset({ crossAxis: -30, mainAxis: 8 }), flip()],
         autoUpdate: { animationFrame: true },
       },
       abortController: this._abortController,
@@ -304,7 +307,7 @@ export class ChatPanelChips extends SignalWatcher(
       computePosition: {
         referenceElement: this.moreCandidateButton,
         placement: 'top-start',
-        middleware: [offset({ crossAxis: 0, mainAxis: 6 }), flip()],
+        middleware: [offset({ crossAxis: 0, mainAxis: 8 }), flip()],
         autoUpdate: { animationFrame: true },
       },
       abortController: this._abortController,

packages/frontend/core/src/blocksuite/ai/chat-panel/components/add-popover.ts

@@ -6,6 +6,7 @@ import type {
 import { ShadowlessElement } from '@blocksuite/affine/block-std';
 import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/lit';
 import { scrollbarStyle } from '@blocksuite/affine/shared/styles';
+import { unsafeCSSVar, unsafeCSSVarV2 } from '@blocksuite/affine/shared/theme';
 import { openFileOrFiles } from '@blocksuite/affine/shared/utils';
 import {
   CollectionsIcon,
@@ -55,26 +56,26 @@ export class ChatPanelAddPopover extends SignalWatcher(
   WithDisposable(ShadowlessElement)
 ) {
   static override styles = css`
-    .add-popover {
+    .ai-add-popover {
       width: 280px;
       max-height: 450px;
       overflow-y: auto;
-      border: 0.5px solid var(--affine-border-color);
+      border: 0.5px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
       border-radius: 4px;
-      background: var(--affine-background-primary-color);
-      box-shadow: var(--affine-shadow-2);
+      background: ${unsafeCSSVarV2('layer/background/overlayPanel')};
+      box-shadow: ${unsafeCSSVar('overlayPanelShadow')};
       padding: 8px;
     }
-    .add-popover icon-button {
+    .ai-add-popover icon-button {
       justify-content: flex-start;
       gap: 8px;
     }
-    .add-popover icon-button svg {
+    .ai-add-popover icon-button svg {
       width: 20px;
       height: 20px;
     }
-    .add-popover .divider {
-      border-top: 0.5px solid var(--affine-border-color);
+    .ai-add-popover .divider {
+      border-top: 0.5px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
       margin: 8px 0;
     }
     .search-input-wrapper {
@@ -88,11 +89,11 @@ export class ChatPanelAddPopover extends SignalWatcher(
       line-height: 20px;
       height: 20px;
       font-size: var(--affine-font-sm);
-      color: var(--affine-text-primary-color);
+      color: ${unsafeCSSVarV2('text/primary')};
       flex-grow: 1;
     }
     .search-input-wrapper input::placeholder {
-      color: var(--affine-placeholder-color);
+      color: ${unsafeCSSVarV2('text/placeholder')};
     }
     .search-input-wrapper input:focus {
       outline: none;
@@ -100,18 +101,18 @@ export class ChatPanelAddPopover extends SignalWatcher(
     .search-input-wrapper svg {
       width: 20px;
       height: 20px;
-      color: var(--affine-v2-icon-primary);
+      color: ${unsafeCSSVarV2('icon/primary')};
     }
     .no-result {
       padding: 4px;
       font-size: var(--affine-font-sm);
-      color: var(--affine-text-secondary-color);
+      color: ${unsafeCSSVarV2('text/secondary')};
     }
     .menu-items icon-button {
       outline: none;
     }
 
-    ${scrollbarStyle('.add-popover')}
+    ${scrollbarStyle('.ai-add-popover')}
   `;
 
   private accessor _query = '';
@@ -263,7 +264,7 @@ export class ChatPanelAddPopover extends SignalWatcher(
   }
 
   override render() {
-    return html`<div class="add-popover">
+    return html`<div class="ai-add-popover" data-testid="ai-add-popover">
       ${this._renderSearchInput()} ${this._renderDivider()}
       ${this._renderMenuGroup(this._menuGroup)}
     </div>`;

packages/frontend/core/src/blocksuite/ai/chat-panel/components/candidates-popover.ts

@@ -1,6 +1,7 @@
 import { ShadowlessElement } from '@blocksuite/affine/block-std';
 import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/lit';
 import { scrollbarStyle } from '@blocksuite/affine/shared/styles';
+import { unsafeCSSVar, unsafeCSSVarV2 } from '@blocksuite/affine/shared/theme';
 import { PlusIcon } from '@blocksuite/icons/lit';
 import { type Signal, signal } from '@preact/signals-core';
 import { css, html } from 'lit';
@@ -14,28 +15,28 @@ export class ChatPanelCandidatesPopover extends SignalWatcher(
   WithDisposable(ShadowlessElement)
 ) {
   static override styles = css`
-    .candidates-popover {
+    .ai-candidates-popover {
       width: 280px;
       max-height: 450px;
       overflow-y: auto;
-      border: 0.5px solid var(--affine-border-color);
+      border: 0.5px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
       border-radius: 4px;
-      background: var(--affine-background-primary-color);
-      box-shadow: var(--affine-shadow-2);
+      background: ${unsafeCSSVarV2('layer/background/overlayPanel')};
+      box-shadow: ${unsafeCSSVar('overlayPanelShadow')};
       padding: 8px;
     }
 
-    .candidates-popover icon-button {
+    .ai-candidates-popover icon-button {
       justify-content: flex-start;
       gap: 8px;
     }
-    .candidates-popover icon-button svg {
+    .ai-candidates-popover icon-button svg {
       width: 20px;
       height: 20px;
       color: var(--svg-icon-color);
     }
 
-    ${scrollbarStyle('.candidates-popover')}
+    ${scrollbarStyle('.ai-candidates-popover')}
   `;
 
   @property({ attribute: false })
@@ -69,7 +70,10 @@ export class ChatPanelCandidatesPopover extends SignalWatcher(
   }
 
   override render() {
-    return html`<div class="candidates-popover">
+    return html`<div
+      class="ai-candidates-popover"
+      data-testid="ai-candidates-popover"
+    >
       ${repeat(
         this.referenceDocs.value,
         doc => doc.docId,

packages/frontend/core/src/blocksuite/ai/chat-panel/components/chip.ts

@@ -1,5 +1,6 @@
 import { ShadowlessElement } from '@blocksuite/affine/block-std';
 import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/lit';
+import { unsafeCSSVarV2 } from '@blocksuite/affine/shared/theme';
 import { CloseIcon, PlusIcon } from '@blocksuite/icons/lit';
 import { css, html, type TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -18,22 +19,26 @@ export class ChatPanelChip extends SignalWatcher(
       margin: 4px;
       padding: 0 4px;
       border-radius: 4px;
-      border: 0.5px solid var(--affine-border-color);
-      background: var(--affine-background-primary-color);
+      border: 0.5px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
+      background: ${unsafeCSSVarV2('layer/background/primary')};
       box-sizing: border-box;
     }
     .chip-card[data-state='candidate'] {
       border-width: 1px;
       border-style: dashed;
-      background: var(--affine-background-secondary-color);
-      color: var(--affine-icon-secondary);
+      border-color: ${unsafeCSSVarV2('icon/tertiary')};
+      background: ${unsafeCSSVarV2('layer/background/secondary')};
+      color: ${unsafeCSSVarV2('icon/secondary')};
+    }
+    .chip-card[data-state='candidate']:hover {
+      background: ${unsafeCSSVarV2('layer/background/hoverOverlay')};
     }
     .chip-card[data-state='candidate'] svg {
-      color: var(--affine-icon-secondary);
+      color: ${unsafeCSSVarV2('icon/secondary')};
     }
     .chip-card[data-state='failed'] {
-      color: var(--affine-error-color);
-      background: var(--affine-background-error-color);
+      color: ${unsafeCSSVarV2('status/error')};
+      background: ${unsafeCSSVarV2('layer/background/error')};
     }
     .chip-card-content {
       display: flex;
@@ -41,12 +46,12 @@ export class ChatPanelChip extends SignalWatcher(
       justify-content: center;
     }
     .chip-card[data-state='failed'] svg {
-      color: var(--affine-error-color);
+      color: ${unsafeCSSVarV2('status/error')};
     }
     .chip-card svg {
       width: 16px;
       height: 16px;
-      color: var(--affine-v2-icon-primary);
+      color: ${unsafeCSSVarV2('icon/primary')};
     }
     .chip-card-title {
       display: inline-block;
@@ -69,7 +74,7 @@ export class ChatPanelChip extends SignalWatcher(
       border-radius: 4px;
     }
     .chip-card-close:hover {
-      background: var(--affine-hover-color);
+      background: ${unsafeCSSVarV2('layer/background/hoverOverlay')};
     }
   `;
 

packages/frontend/core/src/blocksuite/ai/chat-panel/components/tag-chip.ts

@@ -1,6 +1,7 @@
 import type { TagMeta } from '@affine/core/components/page-list';
 import { ShadowlessElement } from '@blocksuite/affine/block-std';
 import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/lit';
+import { unsafeCSSVarV2 } from '@blocksuite/affine/shared/theme';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 
@@ -21,7 +22,7 @@ export class ChatPanelTagChip extends SignalWatcher(
       height: 8px;
       width: 8px;
       margin: 4px;
-      background-color: var(--affine-color-secondary);
+      background-color: ${unsafeCSSVarV2('icon/secondary')};
     }
   `;