feat: modify style variables

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={() => {

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,
     },
   };
 });

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"

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,
   };
 });

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,
     },
   };
 });

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',

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;

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
           ? `${

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,
   };