From 5dc6fabdafd62aa21fff7aa4f39df6f7b222ba58 Mon Sep 17 00:00:00 2001
From: zzj3720 <17165520+zzj3720@users.noreply.github.com>
Date: Fri, 21 Mar 2025 11:22:54 +0000
Subject: [PATCH] refactor(editor): improve border color (#11077)

close: BS-2781
---
 .../affine/blocks/block-database/src/block-icons.ts   | 10 +++++++---
 .../block-database/src/detail-panel/block-renderer.ts |  5 +++--
 .../block-database/src/detail-panel/note-renderer.ts  |  7 +++++--
 .../affine/data-view/src/core/common/css-variable.ts  |  5 ++++-
 .../affine/data-view/src/core/common/properties.ts    |  5 +++--
 .../data-view/src/core/view-manager/single-view.ts    |  4 ----
 .../data-view/src/view-presets/kanban/mobile/card.ts  |  7 ++++---
 .../data-view/src/view-presets/kanban/pc/card.ts      |  7 ++++---
 .../data-view/src/view-presets/table/mobile/group.ts  |  5 +++--
 .../data-view/src/view-presets/table/mobile/row.ts    |  5 +++--
 .../src/view-presets/table/mobile/table-view.ts       |  5 +++--
 .../data-view/src/view-presets/table/pc/group.ts      |  5 +++--
 .../view-presets/table/pc/header/column-renderer.ts   | 11 ++++++++---
 .../view-presets/table/pc/header/number-format-bar.ts |  5 +++--
 .../src/view-presets/table/pc/header/styles.ts        | 11 ++++++-----
 .../data-view/src/view-presets/table/pc/row/row.ts    |  5 +++--
 .../data-view/src/view-presets/table/pc/table-view.ts |  5 +++--
 .../quick-setting-bar/filter/group-panel-view.ts      |  9 +++++----
 .../tools/presets/table-add-row/new-record-preview.ts |  5 +++--
 19 files changed, 73 insertions(+), 48 deletions(-)

diff --git a/blocksuite/affine/blocks/block-database/src/block-icons.ts b/blocksuite/affine/blocks/block-database/src/block-icons.ts
index 446fe7350..b485f1b16 100644
--- a/blocksuite/affine/blocks/block-database/src/block-icons.ts
+++ b/blocksuite/affine/blocks/block-database/src/block-icons.ts
@@ -16,10 +16,14 @@ import type { BlockModel } from '@blocksuite/store';
 import type { TemplateResult } from 'lit';
 
 export const getIcon = (
-  model: BlockModel & { type?: string }
+  model: BlockModel & {
+    props: {
+      type?: string;
+    };
+  }
 ): TemplateResult => {
   if (model.flavour === 'affine:paragraph') {
-    const type = model.type as ParagraphType;
+    const type = model.props.type as ParagraphType;
     return (
       {
         text: TextIcon(),
@@ -39,7 +43,7 @@ export const getIcon = (
         bulleted: BulletedListIcon(),
         numbered: NumberedListIcon(),
         todo: CheckBoxCheckLinearIcon(),
-      }[model.type ?? 'bulleted'] ?? BulletedListIcon()
+      }[model.props.type ?? 'bulleted'] ?? BulletedListIcon()
     );
   }
   return TextIcon();
diff --git a/blocksuite/affine/blocks/block-database/src/detail-panel/block-renderer.ts b/blocksuite/affine/blocks/block-database/src/detail-panel/block-renderer.ts
index d581b2142..08b72f5fb 100644
--- a/blocksuite/affine/blocks/block-database/src/detail-panel/block-renderer.ts
+++ b/blocksuite/affine/blocks/block-database/src/detail-panel/block-renderer.ts
@@ -7,7 +7,8 @@ import type {
   TableSingleView,
 } from '@blocksuite/data-view/view-presets';
 import { WithDisposable } from '@blocksuite/global/lit';
-import { css, html } from 'lit';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { css, html, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 
 export class BlockRenderer
@@ -22,7 +23,7 @@ export class BlockRenderer
       flex-direction: column;
       gap: 16px;
       margin-bottom: 12px;
-      border-bottom: 1px solid var(--affine-border-color);
+      border-bottom: 1px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
       font-size: var(--affine-font-base);
       line-height: var(--affine-line-height);
     }
diff --git a/blocksuite/affine/blocks/block-database/src/detail-panel/note-renderer.ts b/blocksuite/affine/blocks/block-database/src/detail-panel/note-renderer.ts
index a374b4690..2828a1503 100644
--- a/blocksuite/affine/blocks/block-database/src/detail-panel/note-renderer.ts
+++ b/blocksuite/affine/blocks/block-database/src/detail-panel/note-renderer.ts
@@ -14,7 +14,8 @@ import type { DetailSlotProps, SingleView } from '@blocksuite/data-view';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
 import type { BaseTextAttributes } from '@blocksuite/store';
 import { computed } from '@preact/signals-core';
-import { css, html } from 'lit';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { css, html, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 
 import { isPureText } from '../utils/title-doc.js';
@@ -92,7 +93,9 @@ export class NoteRenderer
   protected override render(): unknown {
     return html`
       <div
-        style="height: 1px;max-width: var(--affine-editor-width);background-color: var(--affine-border-color);margin: auto;margin-bottom: 16px"
+        style="height: 1px;max-width: var(--affine-editor-width);background-color: ${unsafeCSS(
+          cssVarV2.layer.insideBorder.border
+        )};margin: auto;margin-bottom: 16px"
       ></div>
       ${this.renderNote()}
     `;
diff --git a/blocksuite/affine/data-view/src/core/common/css-variable.ts b/blocksuite/affine/data-view/src/core/common/css-variable.ts
index 27ed19e14..470de9790 100644
--- a/blocksuite/affine/data-view/src/core/common/css-variable.ts
+++ b/blocksuite/affine/data-view/src/core/common/css-variable.ts
@@ -1,3 +1,6 @@
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { unsafeCSS } from 'lit';
+
 export const dataViewCssVariable = () => {
   return `
   --data-view-cell-text-size:14px;
@@ -41,7 +44,7 @@ export const dataViewCommonStyle = (selector: string) => `
     fill: var(--affine-icon-color);
   }
   .dv-border{
-    border: 1px solid var(--affine-border-color);
+    border: 1px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
   }
   .dv-round-4{
     border-radius: 4px;
diff --git a/blocksuite/affine/data-view/src/core/common/properties.ts b/blocksuite/affine/data-view/src/core/common/properties.ts
index f26abff3e..74b1afb9e 100644
--- a/blocksuite/affine/data-view/src/core/common/properties.ts
+++ b/blocksuite/affine/data-view/src/core/common/properties.ts
@@ -7,7 +7,8 @@ import { ShadowlessElement } from '@blocksuite/block-std';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
 import { InvisibleIcon, ViewIcon } from '@blocksuite/icons/lit';
 import { computed } from '@preact/signals-core';
-import { css, html } from 'lit';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { css, html, unsafeCSS } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -33,7 +34,7 @@ export class DataViewPropertiesSettingView extends SignalWatcher(
       display: flex;
       align-items: center;
       justify-content: space-between;
-      border-bottom: 1px solid var(--affine-divider-color);
+      border-bottom: 1px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
     }
 
     .properties-group-title {
diff --git a/blocksuite/affine/data-view/src/core/view-manager/single-view.ts b/blocksuite/affine/data-view/src/core/view-manager/single-view.ts
index 5efc10a1a..c683f67ea 100644
--- a/blocksuite/affine/data-view/src/core/view-manager/single-view.ts
+++ b/blocksuite/affine/data-view/src/core/view-manager/single-view.ts
@@ -323,10 +323,6 @@ export abstract class SingleViewBase<
   }
 
   cellValueGet(rowId: string, propertyId: string): unknown {
-    const type = this.propertyTypeGet(propertyId);
-    if (!type) {
-      return;
-    }
     return this.dataSource.cellValueGet(rowId, propertyId);
   }
 
diff --git a/blocksuite/affine/data-view/src/view-presets/kanban/mobile/card.ts b/blocksuite/affine/data-view/src/view-presets/kanban/mobile/card.ts
index 34be5bd98..f4506102b 100644
--- a/blocksuite/affine/data-view/src/view-presets/kanban/mobile/card.ts
+++ b/blocksuite/affine/data-view/src/view-presets/kanban/mobile/card.ts
@@ -3,7 +3,8 @@ import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { ShadowlessElement } from '@blocksuite/block-std';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
 import { CenterPeekIcon, MoreHorizontalIcon } from '@blocksuite/icons/lit';
-import { css } from 'lit';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { css, unsafeCSS } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -18,7 +19,7 @@ const styles = css`
     display: flex;
     position: relative;
     flex-direction: column;
-    border: 0.5px solid var(--affine-border-color);
+    border: 0.5px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
     box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.05);
     border-radius: 8px;
     background-color: var(--affine-background-kanban-card-color);
@@ -36,7 +37,7 @@ const styles = css`
   }
 
   .mobile-card-header.has-divider {
-    border-bottom: 0.5px solid var(--affine-border-color);
+    border-bottom: 0.5px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
   }
 
   .mobile-card-header-title {
diff --git a/blocksuite/affine/data-view/src/view-presets/kanban/pc/card.ts b/blocksuite/affine/data-view/src/view-presets/kanban/pc/card.ts
index eaf0dab27..c7cf0aa60 100644
--- a/blocksuite/affine/data-view/src/view-presets/kanban/pc/card.ts
+++ b/blocksuite/affine/data-view/src/view-presets/kanban/pc/card.ts
@@ -2,7 +2,8 @@ import { popupTargetFromElement } from '@blocksuite/affine-components/context-me
 import { ShadowlessElement } from '@blocksuite/block-std';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
 import { CenterPeekIcon, MoreHorizontalIcon } from '@blocksuite/icons/lit';
-import { css } from 'lit';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { css, unsafeCSS } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -17,7 +18,7 @@ const styles = css`
     display: flex;
     position: relative;
     flex-direction: column;
-    border: 1px solid var(--affine-border-color);
+    border: 1px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
     box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.05);
     border-radius: 8px;
     transition: background-color 100ms ease-in-out;
@@ -40,7 +41,7 @@ const styles = css`
   }
 
   .card-header.has-divider {
-    border-bottom: 0.5px solid var(--affine-border-color);
+    border-bottom: 0.5px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
   }
 
   affine-data-view-kanban-card .card-header-title {
diff --git a/blocksuite/affine/data-view/src/view-presets/table/mobile/group.ts b/blocksuite/affine/data-view/src/view-presets/table/mobile/group.ts
index 295d2f811..b49bfa770 100644
--- a/blocksuite/affine/data-view/src/view-presets/table/mobile/group.ts
+++ b/blocksuite/affine/data-view/src/view-presets/table/mobile/group.ts
@@ -6,7 +6,8 @@ import {
 import { ShadowlessElement } from '@blocksuite/block-std';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
 import { PlusIcon } from '@blocksuite/icons/lit';
-import { css, html } from 'lit';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { css, html, unsafeCSS } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 
@@ -28,7 +29,7 @@ const styles = css`
     cursor: pointer;
     transition: opacity 0.2s ease-in-out;
     padding: 4px 8px;
-    border-bottom: 1px solid var(--affine-border-color);
+    border-bottom: 1px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
   }
 
   .data-view-table-group-add-row-button {
diff --git a/blocksuite/affine/data-view/src/view-presets/table/mobile/row.ts b/blocksuite/affine/data-view/src/view-presets/table/mobile/row.ts
index e7796e80b..deca5d9d7 100644
--- a/blocksuite/affine/data-view/src/view-presets/table/mobile/row.ts
+++ b/blocksuite/affine/data-view/src/view-presets/table/mobile/row.ts
@@ -3,7 +3,8 @@ import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { ShadowlessElement } from '@blocksuite/block-std';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
 import { CenterPeekIcon, MoreHorizontalIcon } from '@blocksuite/icons/lit';
-import { css, nothing } from 'lit';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { css, nothing, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -21,7 +22,7 @@ export class MobileTableRow extends SignalWatcher(
       width: 100%;
       display: flex;
       flex-direction: row;
-      border-bottom: 1px solid var(--affine-border-color);
+      border-bottom: 1px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
       position: relative;
       min-height: 34px;
     }
diff --git a/blocksuite/affine/data-view/src/view-presets/table/mobile/table-view.ts b/blocksuite/affine/data-view/src/view-presets/table/mobile/table-view.ts
index 4fe28ddaa..6e410eacb 100644
--- a/blocksuite/affine/data-view/src/view-presets/table/mobile/table-view.ts
+++ b/blocksuite/affine/data-view/src/view-presets/table/mobile/table-view.ts
@@ -6,7 +6,8 @@ import {
 import type { InsertToPosition } from '@blocksuite/affine-shared/utils';
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
 import { AddCursorIcon } from '@blocksuite/icons/lit';
-import { css } from 'lit';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { css, unsafeCSS } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit/static-html.js';
@@ -41,7 +42,7 @@ export class MobileDataViewTable extends DataViewBase<
     .cell-divider {
       width: 1px;
       height: 100%;
-      background-color: var(--affine-border-color);
+      background-color: ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
     }
   `;
 
diff --git a/blocksuite/affine/data-view/src/view-presets/table/pc/group.ts b/blocksuite/affine/data-view/src/view-presets/table/pc/group.ts
index 4f72b653f..395d72ba2 100644
--- a/blocksuite/affine/data-view/src/view-presets/table/pc/group.ts
+++ b/blocksuite/affine/data-view/src/view-presets/table/pc/group.ts
@@ -7,7 +7,8 @@ import { ShadowlessElement } from '@blocksuite/block-std';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
 import { PlusIcon } from '@blocksuite/icons/lit';
 import { effect } from '@preact/signals-core';
-import { css, html } from 'lit';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { css, html, unsafeCSS } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 
@@ -39,7 +40,7 @@ const styles = css`
     cursor: pointer;
     transition: opacity 0.2s ease-in-out;
     padding: 4px 8px;
-    border-bottom: 1px solid var(--affine-border-color);
+    border-bottom: 1px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
   }
 
   @media print {
diff --git a/blocksuite/affine/data-view/src/view-presets/table/pc/header/column-renderer.ts b/blocksuite/affine/data-view/src/view-presets/table/pc/header/column-renderer.ts
index 29dd6199c..54410ff63 100644
--- a/blocksuite/affine/data-view/src/view-presets/table/pc/header/column-renderer.ts
+++ b/blocksuite/affine/data-view/src/view-presets/table/pc/header/column-renderer.ts
@@ -1,6 +1,7 @@
 import { ShadowlessElement } from '@blocksuite/block-std';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
-import { css } from 'lit';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { css, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -29,7 +30,9 @@ export class DataViewColumnPreview extends SignalWatcher(
     const columnIndex = this.tableViewManager.propertyIndexGet(this.column.id);
     return html`
       <div
-        style="background-color: var(--affine-background-primary-color);border-top: 1px solid var(--affine-border-color);box-shadow: var(--affine-shadow-2);"
+        style="background-color: var(--affine-background-primary-color);border-top: 1px solid ${unsafeCSS(
+          cssVarV2.layer.insideBorder.border
+        )};box-shadow: var(--affine-shadow-2);"
       >
         <affine-database-header-column
           .tableViewManager="${this.tableViewManager}"
@@ -43,7 +46,9 @@ export class DataViewColumnPreview extends SignalWatcher(
             height: height + 'px',
           });
           return html`<div
-            style="border-top: 1px solid var(--affine-border-color)"
+            style="border-top: 1px solid ${unsafeCSS(
+              cssVarV2.layer.insideBorder.border
+            )}"
           >
             <div style="${style}">
               <affine-database-cell-container
diff --git a/blocksuite/affine/data-view/src/view-presets/table/pc/header/number-format-bar.ts b/blocksuite/affine/data-view/src/view-presets/table/pc/header/number-format-bar.ts
index 941da05b6..d591bf38a 100644
--- a/blocksuite/affine/data-view/src/view-presets/table/pc/header/number-format-bar.ts
+++ b/blocksuite/affine/data-view/src/view-presets/table/pc/header/number-format-bar.ts
@@ -1,5 +1,6 @@
 import { WithDisposable } from '@blocksuite/global/lit';
-import { css, html, LitElement } from 'lit';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { css, html, LitElement, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 
 import type { Property } from '../../../../core/view-manager/property.js';
@@ -83,7 +84,7 @@ export class DatabaseNumberFormatBar extends WithDisposable(LitElement) {
     .divider {
       width: 100%;
       height: 1px;
-      background-color: var(--affine-border-color);
+      background-color: ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
     }
   `;
 
diff --git a/blocksuite/affine/data-view/src/view-presets/table/pc/header/styles.ts b/blocksuite/affine/data-view/src/view-presets/table/pc/header/styles.ts
index 7654b8a40..6df6bb1a0 100644
--- a/blocksuite/affine/data-view/src/view-presets/table/pc/header/styles.ts
+++ b/blocksuite/affine/data-view/src/view-presets/table/pc/header/styles.ts
@@ -1,5 +1,6 @@
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { baseTheme } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { css, unsafeCSS } from 'lit';
 
 import {
@@ -19,8 +20,8 @@ export const styles = css`
         position: relative;
         display: flex;
         flex-direction: row;
-        border-bottom: 1px solid var(--affine-border-color);
-        border-top: 1px solid var(--affine-border-color);
+        border-bottom: 1px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
+        border-top: 1px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
         box-sizing: border-box;
         user-select: none;
         background-color: var(--affine-background-primary-color);
@@ -108,7 +109,7 @@ export const styles = css`
         width: 16px;
         height: 16px;
         background: var(--affine-white);
-        border: 1px solid var(--affine-border-color);
+        border: 1px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
         border-radius: 4px;
         opacity: 0;
     }
@@ -125,7 +126,7 @@ export const styles = css`
 
     .affine-database-column-text-save-icon:hover {
         background: var(--affine-white);
-        border-color: var(--affine-border-color);
+        border-color: ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
     }
 
     .affine-database-column-text-icon svg {
@@ -195,7 +196,7 @@ export const styles = css`
     }
 
     .affine-database-column-type-menu-icon {
-        border: 1px solid var(--affine-border-color);
+        border: 1px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
         border-radius: 4px;
         padding: 5px;
         background-color: var(--affine-background-secondary-color);
diff --git a/blocksuite/affine/data-view/src/view-presets/table/pc/row/row.ts b/blocksuite/affine/data-view/src/view-presets/table/pc/row/row.ts
index 6e37754aa..21e30de21 100644
--- a/blocksuite/affine/data-view/src/view-presets/table/pc/row/row.ts
+++ b/blocksuite/affine/data-view/src/view-presets/table/pc/row/row.ts
@@ -2,7 +2,8 @@ import { popupTargetFromElement } from '@blocksuite/affine-components/context-me
 import { ShadowlessElement } from '@blocksuite/block-std';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
 import { CenterPeekIcon, MoreHorizontalIcon } from '@blocksuite/icons/lit';
-import { css, nothing } from 'lit';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { css, nothing, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -40,7 +41,7 @@ export class TableRow extends SignalWatcher(WithDisposable(ShadowlessElement)) {
       width: 100%;
       display: flex;
       flex-direction: row;
-      border-bottom: 1px solid var(--affine-border-color);
+      border-bottom: 1px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
       position: relative;
     }
 
diff --git a/blocksuite/affine/data-view/src/view-presets/table/pc/table-view.ts b/blocksuite/affine/data-view/src/view-presets/table/pc/table-view.ts
index d87167bb6..a92ca644c 100644
--- a/blocksuite/affine/data-view/src/view-presets/table/pc/table-view.ts
+++ b/blocksuite/affine/data-view/src/view-presets/table/pc/table-view.ts
@@ -4,7 +4,8 @@ import {
   popupTargetFromElement,
 } from '@blocksuite/affine-components/context-menu';
 import { AddCursorIcon } from '@blocksuite/icons/lit';
-import { css } from 'lit';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { css, unsafeCSS } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit/static-html.js';
@@ -119,7 +120,7 @@ const styles = css`
   .cell-divider {
     width: 1px;
     height: 100%;
-    background-color: var(--affine-border-color);
+    background-color: ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
   }
 
   .data-view-table-left-bar {
diff --git a/blocksuite/affine/data-view/src/widget-presets/quick-setting-bar/filter/group-panel-view.ts b/blocksuite/affine/data-view/src/widget-presets/quick-setting-bar/filter/group-panel-view.ts
index c4a55e922..beae175bf 100644
--- a/blocksuite/affine/data-view/src/widget-presets/quick-setting-bar/filter/group-panel-view.ts
+++ b/blocksuite/affine/data-view/src/widget-presets/quick-setting-bar/filter/group-panel-view.ts
@@ -16,7 +16,8 @@ import {
   PlusIcon,
 } from '@blocksuite/icons/lit';
 import { computed, type ReadonlySignal } from '@preact/signals-core';
-import { css, html, nothing, type TemplateResult } from 'lit';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { css, html, nothing, type TemplateResult, unsafeCSS } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -162,17 +163,17 @@ export class FilterGroupView extends SignalWatcher(ShadowlessElement) {
     }
 
     .filter-group-border {
-      border: 1px dashed var(--affine-border-color);
+      border: 1px dashed ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
     }
 
     .filter-group-bg-1 {
       background-color: var(--affine-background-secondary-color);
-      border: 1px solid var(--affine-border-color);
+      border: 1px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
     }
 
     .filter-group-bg-2 {
       background-color: var(--affine-background-tertiary-color);
-      border: 1px solid var(--affine-border-color);
+      border: 1px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
     }
 
     .hover-style {
diff --git a/blocksuite/affine/data-view/src/widget-presets/tools/presets/table-add-row/new-record-preview.ts b/blocksuite/affine/data-view/src/widget-presets/tools/presets/table-add-row/new-record-preview.ts
index 2eb32f217..0acb201ee 100644
--- a/blocksuite/affine/data-view/src/widget-presets/tools/presets/table-add-row/new-record-preview.ts
+++ b/blocksuite/affine/data-view/src/widget-presets/tools/presets/table-add-row/new-record-preview.ts
@@ -1,6 +1,7 @@
 import { ShadowlessElement } from '@blocksuite/block-std';
 import { PlusIcon } from '@blocksuite/icons/lit';
-import { html } from 'lit';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { html, unsafeCSS } from 'lit';
 
 export class NewRecordPreview extends ShadowlessElement {
   override render() {
@@ -15,7 +16,7 @@ export class NewRecordPreview extends ShadowlessElement {
           left: 0;
           height: 32px;
           width: 32px;
-          border: 1px solid var(--affine-border-color);
+          border: 1px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
           border-radius: 50%;
           background: var(--affine-blue-100);
           box-shadow: