From 0ce05ca96ebb50fcd2f5f9a6c7f664ac0bbb46f0 Mon Sep 17 00:00:00 2001
From: Flrande <1978616327@qq.com>
Date: Thu, 22 May 2025 15:31:09 +0000
Subject: [PATCH] fix(editor): code block toolbar color (#12462)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **Style**
  - Updated toolbar and language button styling to improve color consistency and theming.
  - Enhanced hover effects for language buttons with improved background color handling.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../blocks/code/src/code-toolbar/components/code-toolbar.ts | 5 +++--
 .../blocks/code/src/code-toolbar/components/lang-button.ts  | 6 ++----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/blocksuite/affine/blocks/code/src/code-toolbar/components/code-toolbar.ts b/blocksuite/affine/blocks/code/src/code-toolbar/components/code-toolbar.ts
index 5c042d0464..83d14c1ed7 100644
--- a/blocksuite/affine/blocks/code/src/code-toolbar/components/code-toolbar.ts
+++ b/blocksuite/affine/blocks/code/src/code-toolbar/components/code-toolbar.ts
@@ -4,6 +4,7 @@ import type {
   MenuItemGroup,
 } from '@blocksuite/affine-components/toolbar';
 import { renderGroups } from '@blocksuite/affine-components/toolbar';
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { WithDisposable } from '@blocksuite/global/lit';
 import { noop } from '@blocksuite/global/utils';
 import { MoreVerticalIcon } from '@blocksuite/icons/lit';
@@ -33,8 +34,8 @@ export class AffineCodeToolbar extends WithDisposable(LitElement) {
     }
 
     .code-toolbar-button {
-      color: var(--affine-icon-color);
-      background-color: var(--affine-background-primary-color);
+      color: ${unsafeCSSVarV2('icon/primary')};
+      background-color: ${unsafeCSSVarV2('segment/background')};
       box-shadow: var(--affine-shadow-1);
       border-radius: 4px;
     }
diff --git a/blocksuite/affine/blocks/code/src/code-toolbar/components/lang-button.ts b/blocksuite/affine/blocks/code/src/code-toolbar/components/lang-button.ts
index 9a2483f247..5830397770 100644
--- a/blocksuite/affine/blocks/code/src/code-toolbar/components/lang-button.ts
+++ b/blocksuite/affine/blocks/code/src/code-toolbar/components/lang-button.ts
@@ -19,8 +19,6 @@ export class LanguageListButton extends WithDisposable(
 ) {
   static override styles = css`
     .lang-button {
-      background-color: var(--affine-background-primary-color);
-      box-shadow: var(--affine-shadow-1);
       display: flex;
       gap: 4px;
       padding: 2px 4px;
@@ -28,11 +26,11 @@ export class LanguageListButton extends WithDisposable(
     }
 
     .lang-button:hover {
-      background: var(--affine-hover-color-filled);
+      background: ${unsafeCSSVarV2('layer/background/hoverOverlay')};
     }
 
     .lang-button[hover] {
-      background: var(--affine-hover-color-filled);
+      background: ${unsafeCSSVarV2('layer/background/hoverOverlay')};
     }
 
     .lang-button-icon {