feat: modify mode radio animate

packages/app/src/styles/index.ts

@@ -1,6 +1,6 @@
 export type { ThemeMode, ThemeProviderProps, AffineTheme } from './types';
 
-export { styled } from './styled';
+export * from './styled';
 export { ThemeProvider } from './themeProvider';
 export { lightTheme, darkTheme } from './theme';
 export { useTheme } from './hooks';

packages/app/src/styles/styled.ts

@@ -1,3 +1,3 @@
 import emotionStyled from '@emotion/styled';
-
+export { css, keyframes } from '@emotion/react';
 export const styled = emotionStyled;

packages/app/src/styles/theme.ts

@@ -3,25 +3,30 @@ import { AffineTheme, ThemeMode } from './types';
 
 export const lightTheme: AffineTheme = {
   colors: {
-    primary: '#0070f3',
+    primary: '#3A4C5C',
+    highlight: '#7389FD',
+    disabled: '#9096A5',
+    background: '#fff',
   },
 };
 
 export const darkTheme: AffineTheme = {
   colors: {
-    primary: '#000',
+    primary: '#fff',
+    highlight: '#7389FD',
+    disabled: '#9096A5',
+    background: '#3d3c3f',
   },
 };
 
 export const globalThemeConstant = (mode: ThemeMode, theme: AffineTheme) => {
   const isDark = mode === 'dark';
   return {
-    '--color-primary': theme.colors.primary,
-    '--page-background-color': isDark ? '#3d3c3f' : '#fff',
-    '--page-text-color': isDark ? '#fff' : '#3a4c5c',
+    '--page-background-color': theme.colors.background,
+    '--page-text-color': theme.colors.primary,
 
     // editor style variables
-    '--affine-primary-color': isDark ? '#fff' : '#3a4c5c',
+    '--affine-primary-color': theme.colors.primary,
     '--affine-muted-color': '#a6abb7',
     '--affine-highlight-color': '#6880ff',
     '--affine-placeholder-color': '#c7c7c7',
@@ -34,22 +39,3 @@ export const globalThemeConstant = (mode: ThemeMode, theme: AffineTheme) => {
       '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',
   };
 };
-
-const editorStyleVariable = {
-  '--affine-primary-color': '#3a4c5c',
-  '--affine-muted-color': '#a6abb7',
-  '--affine-highlight-color': '#6880ff',
-  '--affine-placeholder-color': '#c7c7c7',
-  '--affine-selected-color': 'rgba(104, 128, 255, 0.1)',
-
-  '--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-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',
-};
-
-const pageStyleVariable = {
-  '--page-background-color': '#fff',
-  '--page-text-color': '#3a4c5c',
-};

packages/app/src/styles/types.ts

@@ -14,6 +14,9 @@ export type ThemeProviderValue = {
 export interface AffineTheme {
   colors: {
     primary: string;
+    highlight: string;
+    disabled: string;
+    background: string;
   };
 }