From 33dee8daf7218037cb2b0bef6f45274688122104 Mon Sep 17 00:00:00 2001
From: Qi <474021214@qq.com>
Date: Thu, 9 Mar 2023 16:18:44 +0800
Subject: [PATCH] fix: theme color error (#1427)

---
 packages/component/src/styles/theme.ts | 8 ++++++--
 packages/component/src/styles/types.ts | 5 +++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/component/src/styles/theme.ts b/packages/component/src/styles/theme.ts
index d070a42ec4..6f563e2789 100644
--- a/packages/component/src/styles/theme.ts
+++ b/packages/component/src/styles/theme.ts
@@ -36,14 +36,14 @@ export const getLightTheme = (
       handleColor: '#c7c3d9',
       linkColor: '#5438FF',
       linkColor2: '#5438FF',
-      linkVisitedColor: '#ABB8FE',
+      linkVisitedColor: '#5438FF',
       popoverColor: '#4C6275',
       inputColor: '#4C6275',
       tooltipColor: '#fff',
       codeColor: '#77757D',
       quoteColor: '#645F82',
       placeHolderColor: '#C0BFC1',
-      selectedColor: 'rgba(84,56,255,0.08)',
+      selectedColor: 'rgba(84, 56, 255, 0.04)',
       borderColor: '#9787FF',
       disableColor: '#A9A9AD',
       warningColor: '#906616',
@@ -208,5 +208,9 @@ export const globalThemeVariables: (
 
     '--affine-paragraph-space': theme.space.paragraph,
     '--affine-popover-radius': theme.radius.popover,
+
+    '--affine-editor-width': '720px',
+    '--affine-zoom': '1',
+    '--affine-scale': 'calc(1 / var(--affine-zoom))',
   };
 };
diff --git a/packages/component/src/styles/types.ts b/packages/component/src/styles/types.ts
index 177184a13a..19c9e91976 100644
--- a/packages/component/src/styles/types.ts
+++ b/packages/component/src/styles/types.ts
@@ -1,4 +1,5 @@
 import { EditorContainer } from '@blocksuite/editor';
+import { CSSProperties } from 'react';
 
 export type Theme = 'light' | 'dark';
 export type ThemeMode = Theme | 'auto';
@@ -148,6 +149,10 @@ export interface AffineThemeCSSVariables {
   '--affine-paragraph-space': AffineTheme['space']['paragraph'];
 
   '--affine-popover-radius': AffineTheme['radius']['popover'];
+  // use for blocksuite
+  '--affine-editor-width': CSSProperties['width'];
+  '--affine-zoom': CSSProperties['zoom'];
+  '--affine-scale': string;
 }
 
 declare module '@emotion/react' {