From 90dba82a59736ee2d0864e1ce50d9c907bad0d15 Mon Sep 17 00:00:00 2001
From: QiShaoXuan <qishaoxuan777@gmail.com>
Date: Tue, 18 Oct 2022 17:08:42 +0800
Subject: [PATCH] feat: modify style variables

---
 packages/app/public/globals.css               |  4 +-
 packages/app/src/components/Header/index.tsx  |  2 +-
 packages/app/src/components/Header/styles.ts  | 55 +++++------
 .../components/editor-mode-switch/index.tsx   | 26 ++---
 .../components/editor-mode-switch/style.ts    | 34 +++----
 packages/app/src/components/faq/style.ts      | 19 ++--
 packages/app/src/components/popover/index.tsx |  8 +-
 .../src/components/simple-counter/index.ts    |  2 +-
 .../src/components/theme-mode-switch/style.ts |  4 +-
 .../app/src/components/tooltip/Tooltip.tsx    |  2 +-
 packages/app/src/pages/index.tsx              | 14 +--
 packages/app/src/pages/temporary.css          | 74 +++++++-------
 packages/app/src/styles/theme.ts              | 97 ++++++++++++++-----
 packages/app/src/styles/themeProvider.tsx     |  4 +-
 packages/app/src/styles/types.ts              | 55 ++++++++++-
 15 files changed, 232 insertions(+), 168 deletions(-)

diff --git a/packages/app/public/globals.css b/packages/app/public/globals.css
index 62b1feadf..35d63bd2e 100644
--- a/packages/app/public/globals.css
+++ b/packages/app/public/globals.css
@@ -145,7 +145,7 @@ button,
 select,
 keygen,
 legend {
-  color: var(--page-text-color);
+  color: var(--affine-text-color);
   outline: 0;
   font-size: 18px;
   line-height: 1.5;
@@ -156,7 +156,7 @@ body {
 }
 a,
 a:hover {
-  color: var(--page-text-color);
+  color: var(--affine-link-color);
 }
 
 input {
diff --git a/packages/app/src/components/Header/index.tsx b/packages/app/src/components/Header/index.tsx
index 4a982b436..504ec1c18 100644
--- a/packages/app/src/components/Header/index.tsx
+++ b/packages/app/src/components/Header/index.tsx
@@ -65,7 +65,7 @@ export const Header = () => {
   return (
     <StyledHeader>
       <StyledLogo>
-        <LogoIcon style={{ color: '#6880FF' }} onClick={() => {}} />
+        <LogoIcon onClick={() => {}} />
       </StyledLogo>
       <StyledTitle
         onMouseEnter={() => {
diff --git a/packages/app/src/components/Header/styles.ts b/packages/app/src/components/Header/styles.ts
index 8162ca2ea..16ac015e7 100644
--- a/packages/app/src/components/Header/styles.ts
+++ b/packages/app/src/components/Header/styles.ts
@@ -33,14 +33,10 @@ export const StyledTitleWrapper = styled('div')({
   position: 'relative',
 });
 
-export const StyledLogo = styled('div')({});
-
-export const StyledModeSwitch = styled('div')({
-  height: '100%',
-  display: 'flex',
-  alignItems: 'center',
-  marginRight: '12px',
-});
+export const StyledLogo = styled('div')(({ theme }) => ({
+  color: theme.colors.primaryColor,
+  cursor: 'pointer',
+}));
 
 export const StyledHeaderRightSide = styled('div')({
   height: '100%',
@@ -48,27 +44,25 @@ export const StyledHeaderRightSide = styled('div')({
   alignItems: 'center',
 });
 
-export const StyledMoreMenuItem = styled('div')({
-  height: '32px',
-  display: 'flex',
-  alignItems: 'center',
-  borderRadius: '5px',
-  fontSize: '14px',
-  color: '#4C6275',
-  padding: '0 14px',
-  svg: {
-    fill: '#4C6275',
-    width: '16px',
-    height: '16px',
-    marginRight: '14px',
-  },
-  ':hover': {
-    color: 'var(--affine-highlight-color)',
-    background: '#F1F3FF',
+export const StyledMoreMenuItem = styled('div')(({ theme }) => {
+  return {
+    height: '32px',
+    display: 'flex',
+    alignItems: 'center',
+    borderRadius: '5px',
+    fontSize: '14px',
+    color: theme.colors.popoverColor,
+    padding: '0 14px',
     svg: {
-      fill: 'var(--affine-highlight-color)',
+      width: '16px',
+      height: '16px',
+      marginRight: '14px',
     },
-  },
+    ':hover': {
+      color: theme.colors.primaryColor,
+      background: theme.colors.hoverBackground,
+    },
+  };
 });
 
 export const IconButton = styled('div')(({ theme }) => {
@@ -78,12 +72,11 @@ export const IconButton = styled('div')(({ theme }) => {
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    color: theme.colors.disabled,
-    background: 'transparent',
+    color: theme.colors.iconColor,
     borderRadius: '5px',
     ':hover': {
-      color: theme.colors.highlight,
-      background: '#F1F3FF',
+      color: theme.colors.primaryColor,
+      background: theme.colors.hoverBackground,
     },
   };
 });
diff --git a/packages/app/src/components/editor-mode-switch/index.tsx b/packages/app/src/components/editor-mode-switch/index.tsx
index 9558abc75..94bc5c520 100644
--- a/packages/app/src/components/editor-mode-switch/index.tsx
+++ b/packages/app/src/components/editor-mode-switch/index.tsx
@@ -1,7 +1,6 @@
 import React, { useState, useEffect, cloneElement } from 'react';
 import {
   StyledAnimateRadioContainer,
-  StyledRadioMiddle,
   StyledMiddleLine,
   StyledRadioItem,
   StyledLabel,
@@ -19,21 +18,21 @@ import { useEditor } from '@/components/editor-provider';
 const PaperItem = ({ active }: { active?: boolean }) => {
   const {
     theme: {
-      colors: { highlight, disabled },
+      colors: { iconColor, primaryColor },
     },
   } = useTheme();
 
-  return <PaperIcon style={{ color: active ? highlight : disabled }} />;
+  return <PaperIcon style={{ color: active ? primaryColor : iconColor }} />;
 };
 
 const EdgelessItem = ({ active }: { active?: boolean }) => {
   const {
     theme: {
-      colors: { highlight, disabled },
+      colors: { iconColor, primaryColor },
     },
   } = useTheme();
 
-  return <EdgelessIcon style={{ color: active ? highlight : disabled }} />;
+  return <EdgelessIcon style={{ color: active ? primaryColor : iconColor }} />;
 };
 
 const AnimateRadioItem = ({
@@ -57,24 +56,11 @@ const AnimateRadioItem = ({
   );
 };
 
-const RadioMiddle = ({
-  isHover,
-  direction,
-}: {
-  isHover: boolean;
-  direction: 'left' | 'right' | 'middle';
-}) => {
-  return (
-    <StyledRadioMiddle hidden={!isHover}>
-      <StyledMiddleLine hidden={false} />
-    </StyledRadioMiddle>
-  );
-};
-
 export const EditorModeSwitch = ({
   isHover,
   style = {},
 }: AnimateRadioProps) => {
+  const { mode: themeMode } = useTheme();
   const { mode, setMode } = useEditor();
   const modifyRadioItemStatus = (): RadioItemStatus => {
     return {
@@ -124,7 +110,7 @@ export const EditorModeSwitch = ({
           setRadioItemStatus(modifyRadioItemStatus());
         }}
       />
-      <StyledMiddleLine hidden={!isHover} />
+      <StyledMiddleLine hidden={!isHover} dark={themeMode === 'dark'} />
       <AnimateRadioItem
         isLeft={false}
         label="Edgeless"
diff --git a/packages/app/src/components/editor-mode-switch/style.ts b/packages/app/src/components/editor-mode-switch/style.ts
index f12dd4576..d882a3a76 100644
--- a/packages/app/src/components/editor-mode-switch/style.ts
+++ b/packages/app/src/components/editor-mode-switch/style.ts
@@ -6,7 +6,7 @@ import type { ItemStatus } from './type';
 const ANIMATE_DURATION = 400;
 
 export const StyledAnimateRadioContainer = styled('div')<{ shrink: boolean }>(
-  ({ shrink }) => {
+  ({ shrink, theme }) => {
     const animateScaleStretch = keyframes`${toString(
       spring({ width: '36px' }, { width: '160px' }, { preset: 'gentle' })
     )}`;
@@ -27,7 +27,7 @@ export const StyledAnimateRadioContainer = styled('div')<{ shrink: boolean }>(
     return {
       height: '36px',
       borderRadius: '18px',
-      background: '#F1F3FF',
+      background: theme.colors.hoverBackground,
       position: 'relative',
       display: 'flex',
       transition: `background ${ANIMATE_DURATION}ms`,
@@ -36,31 +36,21 @@ export const StyledAnimateRadioContainer = styled('div')<{ shrink: boolean }>(
   }
 );
 
-export const StyledRadioMiddle = styled('div')<{
+export const StyledMiddleLine = styled('div')<{
   hidden: boolean;
-}>(({ hidden }) => {
+  dark: boolean;
+}>(({ hidden, dark }) => {
   return {
     width: '1px',
-    height: '100%',
-    position: 'relative',
+    height: '16px',
+    background: dark ? '#4d4c53' : '#D0D7E3',
+    top: '0',
+    bottom: '0',
+    margin: 'auto',
     opacity: hidden ? '0' : '1',
   };
 });
 
-export const StyledMiddleLine = styled('div')<{ hidden: boolean }>(
-  ({ hidden }) => {
-    return {
-      width: '1px',
-      height: '16px',
-      background: '#D0D7E3',
-      top: '0',
-      bottom: '0',
-      margin: 'auto',
-      opacity: hidden ? '0' : '1',
-    };
-  }
-);
-
 export const StyledRadioItem = styled('div')<{
   status: ItemStatus;
   active: boolean;
@@ -89,7 +79,7 @@ export const StyledRadioItem = styled('div')<{
       : {};
 
   const {
-    colors: { highlight, disabled },
+    colors: { iconColor, primaryColor },
   } = theme;
   return {
     width: '0',
@@ -97,7 +87,7 @@ export const StyledRadioItem = styled('div')<{
     display: 'flex',
     cursor: 'pointer',
     overflow: 'hidden',
-    color: active ? highlight : disabled,
+    color: active ? primaryColor : iconColor,
     ...dynamicStyle,
   };
 });
diff --git a/packages/app/src/components/faq/style.ts b/packages/app/src/components/faq/style.ts
index a5710e2fb..b1744d90c 100644
--- a/packages/app/src/components/faq/style.ts
+++ b/packages/app/src/components/faq/style.ts
@@ -5,22 +5,22 @@ export const StyledFAQ = styled('div')(({ theme }) => {
     width: '32px',
     height: '32px',
     backgroundColor: '#fff',
-    color: theme.colors.disabled,
+    color: theme.colors.iconColor,
     position: 'fixed',
     right: '30px',
     bottom: '30px',
     borderRadius: '50%',
     zIndex: 1000,
     ':hover': {
-      backgroundColor: '#F1F3FF',
-      color: theme.colors.highlight,
+      backgroundColor: theme.colors.popoverBackground,
+      color: theme.colors.primaryColor,
     },
   };
 });
 
 export const StyledIconWrapper = styled('div')(({ theme }) => {
   return {
-    color: theme.colors.disabled,
+    color: theme.colors.iconColor,
     marginBottom: '24px',
     display: 'flex',
     justifyContent: 'center',
@@ -31,8 +31,8 @@ export const StyledIconWrapper = styled('div')(({ theme }) => {
     width: '32px',
     height: '32px',
     ':hover': {
-      color: theme.colors.highlight,
-      backgroundColor: '#F1F3FF',
+      color: theme.colors.primaryColor,
+      backgroundColor: theme.colors.hoverBackground,
     },
   };
 });
@@ -43,12 +43,9 @@ export const StyledFAQWrapper = styled('div')(({ theme }) => {
     bottom: '100%',
     left: '0',
     width: '100%',
-    color: theme.colors.disabled,
+    color: theme.colors.iconColor,
     ':hover': {
-      '> svg': {
-        color: theme.colors.highlight,
-      },
-      color: theme.colors.highlight,
+      color: theme.colors.popoverColor,
     },
   };
 });
diff --git a/packages/app/src/components/popover/index.tsx b/packages/app/src/components/popover/index.tsx
index f02d38bdd..9f47d1a95 100644
--- a/packages/app/src/components/popover/index.tsx
+++ b/packages/app/src/components/popover/index.tsx
@@ -21,12 +21,12 @@ const StyledPopoverWrapper = styled('div')({
   paddingTop: '46px',
   zIndex: 1000,
 });
-const StyledPopover = styled('div')(() => {
+const StyledPopover = styled('div')(({ theme }) => {
   return {
     width: '248px',
-    background: '#fff',
-    boxShadow:
-      '0px 1px 10px -6px rgba(24, 39, 75, 0.5), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)',
+    background: theme.colors.popoverBackground,
+    boxShadow: theme.colors.boxShadow,
+    color: theme.colors.popoverColor,
     borderRadius: '10px 0px 10px 10px',
     padding: '8px 4px',
     position: 'absolute',
diff --git a/packages/app/src/components/simple-counter/index.ts b/packages/app/src/components/simple-counter/index.ts
index 6f99529c1..8b7f8cbe9 100644
--- a/packages/app/src/components/simple-counter/index.ts
+++ b/packages/app/src/components/simple-counter/index.ts
@@ -27,7 +27,7 @@ export class Counter extends LitElement {
   static styles = css`
     .counter-container {
       display: flex;
-      color: var(--color-primary);
+      color: var(--affine-text-color);
     }
     button {
       margin: 0 5px;
diff --git a/packages/app/src/components/theme-mode-switch/style.ts b/packages/app/src/components/theme-mode-switch/style.ts
index 605fd304e..b40f7d343 100644
--- a/packages/app/src/components/theme-mode-switch/style.ts
+++ b/packages/app/src/components/theme-mode-switch/style.ts
@@ -32,7 +32,7 @@ export const StyledSwitchItem = styled('div')<{
   )}`;
   const activeStyle = active
     ? {
-        color: theme.colors.disabled,
+        color: theme.colors.iconColor,
         top: '0',
         animation: firstTrigger
           ? `${
@@ -43,7 +43,7 @@ export const StyledSwitchItem = styled('div')<{
       }
     : ({
         top: '100%',
-        color: theme.colors.highlight,
+        color: theme.colors.primaryColor,
         backgroundColor: theme.colors.hoverBackground,
         animation: firstTrigger
           ? `${
diff --git a/packages/app/src/components/tooltip/Tooltip.tsx b/packages/app/src/components/tooltip/Tooltip.tsx
index bea79371c..8b33bb9b3 100644
--- a/packages/app/src/components/tooltip/Tooltip.tsx
+++ b/packages/app/src/components/tooltip/Tooltip.tsx
@@ -30,7 +30,7 @@ const useTooltipStyle = (): CSSProperties => {
   return {
     boxShadow: '1px 1px 4px rgba(0, 0, 0, 0.14)',
     padding: '4px 12px',
-    backgroundColor: theme.colors.highlight,
+    backgroundColor: theme.colors.primaryColor,
     color: '#fff',
     fontSize: theme.font.xs,
   };
diff --git a/packages/app/src/pages/index.tsx b/packages/app/src/pages/index.tsx
index aa8e9ae95..5089d75b1 100644
--- a/packages/app/src/pages/index.tsx
+++ b/packages/app/src/pages/index.tsx
@@ -12,12 +12,14 @@ const StyledEditorContainer = styled('div')(({ theme }) => {
   };
 });
 
-const StyledPage = styled('div')({
-  height: '100vh',
-  display: 'flex',
-  flexDirection: 'column',
-  backgroundColor: 'var(--page-background-color)',
-  transition: 'background-color .5s',
+const StyledPage = styled('div')(({ theme }) => {
+  return {
+    height: '100vh',
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: theme.colors.pageBackground,
+    transition: 'background-color .5s',
+  };
 });
 
 const DynamicEditor = dynamic(() => import('../components/editor'), {
diff --git a/packages/app/src/pages/temporary.css b/packages/app/src/pages/temporary.css
index b9b56e502..de63ef249 100644
--- a/packages/app/src/pages/temporary.css
+++ b/packages/app/src/pages/temporary.css
@@ -1,44 +1,44 @@
 debug-menu {
   display: none !important;
 }
-.affine-editor-container {
-  height: 100%;
-  padding: 0 !important;
-}
-.affine-default-page-block-container {
-  width: 720px;
-  height: 100%;
-  margin: 0 auto;
-}
+/*.affine-editor-container {*/
+/*  height: 100%;*/
+/*  padding: 0 !important;*/
+/*}*/
+/*.affine-default-page-block-container {*/
+/*  width: 720px;*/
+/*  height: 100%;*/
+/*  margin: 0 auto;*/
+/*}*/
 
-u {
-  text-decoration: none;
-  border-bottom: 1px solid #4c6275 !important;
-}
-u::after {
-  display: none;
-}
+/*u {*/
+/*  text-decoration: none;*/
+/*  border-bottom: 1px solid #4c6275 !important;*/
+/*}*/
+/*u::after {*/
+/*  display: none;*/
+/*}*/
 
-.affine-paragraph-block-container.text {
-  margin-top: 18px !important;
-}
+/*.affine-paragraph-block-container.text {*/
+/*  margin-top: 18px !important;*/
+/*}*/
 
-.affine-default-page-block-title {
-  width: 100%;
-}
-s {
-  text-decoration: line-through !important;
-}
+/*.affine-default-page-block-title {*/
+/*  width: 100%;*/
+/*}*/
+/*s {*/
+/*  text-decoration: line-through !important;*/
+/*}*/
 
-.affine-edgeless-page-block-container {
-  height: 100% !important;
-}
-.affine-block-children-container.edgeless {
-  height: 100% !important;
-}
-.affine-list-rich-text-wrapper > div {
-  box-sizing: content-box;
-  color: var(--affine-highlight-color);
-  min-width: unset !important;
-  max-width: 26px;
-}
+/*.affine-edgeless-page-block-container {*/
+/*  height: 100% !important;*/
+/*}*/
+/*.affine-block-children-container.edgeless {*/
+/*  height: 100% !important;*/
+/*}*/
+/*.affine-list-rich-text-wrapper > div {*/
+/*  box-sizing: content-box;*/
+/*  color: var(--affine-highlight-color);*/
+/*  min-width: unset !important;*/
+/*  max-width: 26px;*/
+/*}*/
diff --git a/packages/app/src/styles/theme.ts b/packages/app/src/styles/theme.ts
index 464403c3c..e38b4437b 100644
--- a/packages/app/src/styles/theme.ts
+++ b/packages/app/src/styles/theme.ts
@@ -1,49 +1,98 @@
 import '@emotion/react';
-import { AffineTheme, ThemeMode } from './types';
+import { AffineTheme, AffineThemeCSSVariables, ThemeMode } from './types';
+
+const basicFontFamily =
+  'apple-system, BlinkMacSystemFont,Helvetica Neue, Tahoma, PingFang SC, Microsoft Yahei, Arial,Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji,Segoe UI Symbol, Noto Color Emoji';
 
 export const lightTheme: AffineTheme = {
   colors: {
-    primary: '#3A4C5C',
-    highlight: '#7389FD',
-    disabled: '#9096A5',
-    background: '#fff',
+    primaryColor: '#6880FF',
+
+    pageBackground: '#fff',
     hoverBackground: '#F1F3FF',
+    popoverBackground: '#fff',
+    codeBackground: '#f2f5f9',
+
+    textColor: '#3A4C5C',
+    iconColor: '#9096A5',
+    linkColor: '#6880FF',
+    linkColor2: '#6880FF',
+    linkVisitedColor: '#ABB8FE',
+    popoverColor: '#4C6275',
+    codeColor: '#517ea6',
+    quoteColor: '#4C6275',
+    placeHolderColor: '#C7C7C7',
+    selectedColor: 'rgba(104, 128, 255, 0.1)',
+
+    boxShadow:
+      ' 0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04);',
   },
   font: {
     xs: '12px',
     sm: '16px',
     base: '18px',
+    family: `Avenir Next, ${basicFontFamily}`,
+    family2: `Roboto Mono, ${basicFontFamily}`,
   },
 };
 
 export const darkTheme: AffineTheme = {
   ...lightTheme,
   colors: {
-    primary: '#fff',
-    highlight: '#7389FD',
-    disabled: '#9096A5',
-    background: '#3d3c3f',
-    hoverBackground: '#F1F3FF',
+    primaryColor: '#6880FF',
+
+    pageBackground: '#2c2c2c',
+    hoverBackground: '#3C3C42',
+    popoverBackground: '#1F2021',
+    codeBackground: '#505662',
+
+    textColor: '#fff',
+    iconColor: '#9096A5',
+    linkColor: '#6880FF',
+    linkColor2: '#7D91FF',
+    linkVisitedColor: '#505FAB',
+    popoverColor: '#A9B1C6',
+    codeColor: '#BDDBFD',
+    quoteColor: '#A9B1C6',
+    placeHolderColor: '#C7C7C7',
+    selectedColor: 'rgba(240, 242, 255, 0.8)',
+
+    boxShadow:
+      '0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)',
   },
 };
 
-export const globalThemeConstant = (mode: ThemeMode, theme: AffineTheme) => {
-  const isDark = mode === 'dark';
+export const globalThemeVariables: (
+  mode: ThemeMode,
+  theme: AffineTheme
+) => AffineThemeCSSVariables = (mode, theme) => {
   return {
-    '--page-background-color': theme.colors.background,
-    '--page-text-color': theme.colors.primary,
+    '--affine-primary-color': theme.colors.primaryColor,
 
-    // editor style variables
-    '--affine-primary-color': theme.colors.primary,
-    '--affine-muted-color': '#a6abb7',
-    '--affine-highlight-color': '#6880ff',
-    '--affine-placeholder-color': '#c7c7c7',
-    '--affine-selected-color': 'rgba(104, 128, 255, 0.1)',
+    '--affine-page-background': theme.colors.pageBackground,
+    '--affine-popover-background': theme.colors.popoverBackground,
+    '--affine-hover-background': theme.colors.hoverBackground,
+    '--affine-code-background': theme.colors.codeBackground,
 
-    '--affine-font-family':
-      'Avenir Next, apple-system, BlinkMacSystemFont,Helvetica Neue, Tahoma, PingFang SC, Microsoft Yahei, Arial,Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji,Segoe UI Symbol, Noto Color Emoji',
+    '--affine-text-color': theme.colors.textColor,
+    '--affine-link-color': theme.colors.linkColor,
+    // In dark mode, normal text`s (not bold) color
+    '--affine-link-color2': theme.colors.linkColor2,
+    '--affine-link-visited-color': theme.colors.linkVisitedColor,
+    '--affine-icon-color': theme.colors.iconColor,
+    '--affine-popover-color': theme.colors.popoverColor,
+    '--affine-code-color': theme.colors.codeColor,
+    '--affine-quote-color': theme.colors.quoteColor,
+    '--affine-selected-color': theme.colors.selectedColor,
+    '--affine-placeholder-color': theme.colors.placeHolderColor,
 
-    '--affine-font-family2':
-      'Roboto Mono, apple-system, BlinkMacSystemFont,Helvetica Neue, Tahoma, PingFang SC, Microsoft Yahei, Arial,Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji,Segoe UI Symbol, Noto Color Emoji',
+    '--affine-box-shadow': theme.colors.boxShadow,
+
+    '--affine-font-xs': theme.font.xs, // tiny
+    '--affine-font-sm': theme.font.sm, // small
+    '--affine-font-base': theme.font.base,
+
+    '--affine-font-family': theme.font.family,
+    '--affine-font-family2': theme.font.family2,
   };
 };
diff --git a/packages/app/src/styles/themeProvider.tsx b/packages/app/src/styles/themeProvider.tsx
index 4cdd4e9b0..307d71eba 100644
--- a/packages/app/src/styles/themeProvider.tsx
+++ b/packages/app/src/styles/themeProvider.tsx
@@ -11,7 +11,7 @@ import {
   ThemeProviderProps,
   ThemeProviderValue,
 } from './types';
-import { lightTheme, darkTheme, globalThemeConstant } from './theme';
+import { lightTheme, darkTheme, globalThemeVariables } from './theme';
 import { SystemThemeHelper, localStorageThemeHelper } from './utils';
 
 export const ThemeContext = createContext<ThemeProviderValue>({
@@ -67,7 +67,7 @@ export const ThemeProvider = ({
       <Global
         styles={css`
           :root {
-            ${globalThemeConstant(mode, themeStyle)}
+            ${globalThemeVariables(mode, themeStyle) as {}}
           }
         `}
       />
diff --git a/packages/app/src/styles/types.ts b/packages/app/src/styles/types.ts
index 9eec4c335..93068cf55 100644
--- a/packages/app/src/styles/types.ts
+++ b/packages/app/src/styles/types.ts
@@ -13,19 +13,66 @@ export type ThemeProviderValue = {
 
 export interface AffineTheme {
   colors: {
-    primary: string;
-    highlight: string;
-    disabled: string;
-    background: string;
+    primaryColor: string;
+
+    pageBackground: string;
+    popoverBackground: string;
     hoverBackground: string;
+    codeBackground: string;
+
+    textColor: string;
+    linkColor: string;
+    // In dark mode, normal text`s (not bold) color
+    linkColor2: string;
+    linkVisitedColor: string;
+    iconColor: string;
+    popoverColor: string;
+    codeColor: string;
+    quoteColor: string;
+    placeHolderColor: string;
+    selectedColor: string;
+
+    boxShadow: string;
   };
   font: {
     xs: string; // tiny
     sm: string; // small
     base: string;
+
+    family: string;
+    family2: string;
   };
 }
 
+export interface AffineThemeCSSVariables {
+  '--affine-primary-color': AffineTheme['colors']['primaryColor'];
+  '--affine-page-background': AffineTheme['colors']['pageBackground'];
+  '--affine-popover-background': AffineTheme['colors']['popoverBackground'];
+  '--affine-hover-background': AffineTheme['colors']['hoverBackground'];
+  '--affine-code-background': AffineTheme['colors']['codeBackground'];
+
+  '--affine-text-color': AffineTheme['colors']['textColor'];
+  '--affine-link-color': AffineTheme['colors']['linkColor'];
+  // In dark mode, normal text`s (not bold) color
+  '--affine-link-color2': AffineTheme['colors']['linkColor2'];
+  '--affine-link-visited-color': AffineTheme['colors']['linkVisitedColor'];
+  '--affine-icon-color': AffineTheme['colors']['iconColor'];
+  '--affine-popover-color': AffineTheme['colors']['popoverColor'];
+  '--affine-code-color': AffineTheme['colors']['codeColor'];
+  '--affine-quote-color': AffineTheme['colors']['quoteColor'];
+  '--affine-placeholder-color': AffineTheme['colors']['placeHolderColor'];
+  '--affine-selected-color': AffineTheme['colors']['selectedColor'];
+
+  '--affine-box-shadow': AffineTheme['colors']['boxShadow'];
+
+  '--affine-font-xs': AffineTheme['font']['xs']; // tiny
+  '--affine-font-sm': AffineTheme['font']['sm']; // small
+  '--affine-font-base': AffineTheme['font']['base'];
+
+  '--affine-font-family': AffineTheme['font']['family'];
+  '--affine-font-family2': AffineTheme['font']['family2'];
+}
+
 declare module '@emotion/react' {
   export interface Theme extends AffineTheme {}
 }