Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-12 04:18:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): code block toolbar color (#12462)

Browse Source 
<!-- 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 -->
This commit is contained in:
Flrande
2025-05-22 15:31:09 +00:00
parent 833cc11863
commit 0ce05ca96e
2 changed files with 5 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
blocksuite/affine/blocks/code/src/code-toolbar/components/code-toolbar.ts
View File

@@ -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;
}

6
blocksuite/affine/blocks/code/src/code-toolbar/components/lang-button.ts
View File

@@ -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 {