fix(blocks): remove lit dependency from theme service

toeverything · Dec 19, 2024 · 7a7e1ad · 7a7e1ad
1 parent e6706fb
commit 7a7e1ad
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 {