From 89225d34d81fc1e5673fe6908065cbd71081b893 Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Thu, 19 Dec 2024 06:57:10 +0000
Subject: [PATCH] fix(blocks): remove lit dependency from theme service (#9023)

---
 .../affine/components/src/toolbar/index.ts    |  1 +
 .../affine/components/src/toolbar/styles.ts   | 29 +++++++++++++++++++
 .../components/toolbar/edgeless-toolbar.ts    |  6 ++--
 .../toolbar/template/template-panel.ts        |  4 ++-
 .../widgets/element-toolbar/index.ts          |  8 ++---
 5 files changed, 40 insertions(+), 8 deletions(-)
 create mode 100644 packages/affine/components/src/toolbar/styles.ts

diff --git a/packages/affine/components/src/toolbar/index.ts b/packages/affine/components/src/toolbar/index.ts
index fca822826f3a..43aa80278483 100644
--- a/packages/affine/components/src/toolbar/index.ts
+++ b/packages/affine/components/src/toolbar/index.ts
@@ -15,6 +15,7 @@ export {
   EditorMenuContent,
 } from './menu-button.js';
 export { EditorToolbarSeparator } from './separator.js';
+export { darkToolbarStyles, lightToolbarStyles } from './styles.js';
 export { EditorToolbar } from './toolbar.js';
 export { Tooltip } from './tooltip.js';
 export type {
diff --git a/packages/affine/components/src/toolbar/styles.ts b/packages/affine/components/src/toolbar/styles.ts
new file mode 100644
index 000000000000..9718aae547af
--- /dev/null
+++ b/packages/affine/components/src/toolbar/styles.ts
@@ -0,0 +1,29 @@
+import {
+  type AffineCssVariables,
+  combinedDarkCssVariables,
+  combinedLightCssVariables,
+} from '@toeverything/theme';
+import { unsafeCSS } from 'lit';
+
+const toolbarColorKeys: Array<keyof AffineCssVariables> = [
+  '--affine-background-overlay-panel-color',
+  '--affine-v2-layer-background-overlayPanel' as never,
+  '--affine-background-error-color',
+  '--affine-background-primary-color',
+  '--affine-background-tertiary-color',
+  '--affine-icon-color',
+  '--affine-icon-secondary',
+  '--affine-border-color',
+  '--affine-divider-color',
+  '--affine-text-primary-color',
+  '--affine-hover-color',
+  '--affine-hover-color-filled',
+];
+
+export const lightToolbarStyles = toolbarColorKeys.map(
+  key => `${key}: ${unsafeCSS(combinedLightCssVariables[key])};`
+);
+
+export const darkToolbarStyles = toolbarColorKeys.map(
+  key => `${key}: ${unsafeCSS(combinedDarkCssVariables[key])};`
+);
diff --git a/packages/blocks/src/root-block/edgeless/components/toolbar/edgeless-toolbar.ts b/packages/blocks/src/root-block/edgeless/components/toolbar/edgeless-toolbar.ts
index 15a75e06fcbc..15b0d532793b 100644
--- a/packages/blocks/src/root-block/edgeless/components/toolbar/edgeless-toolbar.ts
+++ b/packages/blocks/src/root-block/edgeless/components/toolbar/edgeless-toolbar.ts
@@ -8,11 +8,13 @@ import {
   ArrowRightSmallIcon,
   MoreHorizontalIcon,
 } from '@blocksuite/affine-components/icons';
-import { ColorScheme, type RootBlockModel } from '@blocksuite/affine-model';
 import {
   darkToolbarStyles,
-  EditPropsStore,
   lightToolbarStyles,
+} from '@blocksuite/affine-components/toolbar';
+import { ColorScheme, type RootBlockModel } from '@blocksuite/affine-model';
+import {
+  EditPropsStore,
   ThemeProvider,
 } from '@blocksuite/affine-shared/services';
 import { stopPropagation } from '@blocksuite/affine-shared/utils';
diff --git a/packages/blocks/src/root-block/edgeless/components/toolbar/template/template-panel.ts b/packages/blocks/src/root-block/edgeless/components/toolbar/template/template-panel.ts
index 82d1ef8133c0..cc04358e9df8 100644
--- a/packages/blocks/src/root-block/edgeless/components/toolbar/template/template-panel.ts
+++ b/packages/blocks/src/root-block/edgeless/components/toolbar/template/template-panel.ts
@@ -1,7 +1,9 @@
 import {
   darkToolbarStyles,
-  EditPropsStore,
   lightToolbarStyles,
+} from '@blocksuite/affine-components/toolbar';
+import {
+  EditPropsStore,
   ThemeProvider,
 } from '@blocksuite/affine-shared/services';
 import {
diff --git a/packages/blocks/src/root-block/widgets/element-toolbar/index.ts b/packages/blocks/src/root-block/widgets/element-toolbar/index.ts
index 075b347f0b6f..6c26f31b8e50 100644
--- a/packages/blocks/src/root-block/widgets/element-toolbar/index.ts
+++ b/packages/blocks/src/root-block/widgets/element-toolbar/index.ts
@@ -15,6 +15,8 @@ import { CommonUtils } from '@blocksuite/affine-block-surface';
 import { ConnectorCWithArrowIcon } from '@blocksuite/affine-components/icons';
 import {
   cloneGroups,
+  darkToolbarStyles,
+  lightToolbarStyles,
   type MenuItemGroup,
   renderToolbarSeparator,
 } from '@blocksuite/affine-components/toolbar';
@@ -23,11 +25,7 @@ import {
   GroupElementModel,
   ShapeElementModel,
 } from '@blocksuite/affine-model';
-import {
-  darkToolbarStyles,
-  lightToolbarStyles,
-  ThemeProvider,
-} from '@blocksuite/affine-shared/services';
+import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { requestConnectedFrame } from '@blocksuite/affine-shared/utils';
 import { WidgetComponent } from '@blocksuite/block-std';
 import {