feat: upgrate to new theme (#2027)

Co-authored-by: Himself65 <himself65@outlook.com>

packages/component/src/ui/breadcrumbs/index.ts

@@ -4,6 +4,6 @@ import { styled } from '../../styles';
 
 export const Breadcrumbs = styled(MuiBreadcrumbs)(({ theme }) => {
   return {
-    color: theme.colors.textColor,
+    color: 'var(--affine-text-primary-color)',
   };
 });

packages/component/src/ui/button/styles.ts

@@ -44,7 +44,7 @@ export const StyledIconButton = styled('button', {
       width,
       height,
       fontSize,
-      color: theme.colors.iconColor,
+      color: 'var(--affine-hover-color)',
       ...displayInlineFlex('center', 'center'),
       position: 'relative',
       ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
@@ -66,9 +66,9 @@ export const StyledIconButton = styled('button', {
       },
 
       ':hover': {
-        color: hoverColor ?? theme.colors.primaryColor,
+        color: hoverColor ?? 'var(--affine-primary-color)',
         '::after': {
-          background: hoverBackground || theme.colors.hoverBackground,
+          background: hoverBackground || 'var(--affine-hover-color)',
         },
         ...(hoverStyle ?? {}),
       },
@@ -132,8 +132,8 @@ export const StyledTextButton = styled('button', {
       fontWeight: bold ? '500' : '400',
 
       ':hover': {
-        color: hoverColor ?? theme.colors.primaryColor,
-        background: hoverBackground ?? theme.colors.hoverBackground,
+        color: hoverColor ?? 'var(--affine-primary-color)',
+        background: hoverBackground ?? 'var(--affine-hover-color)',
         ...(hoverStyle ?? {}),
       },
     };
@@ -192,7 +192,7 @@ export const StyledButton = styled('button', {
         ? {
             cursor: 'not-allowed',
             pointerEvents: 'none',
-            color: theme.colors.disableColor,
+            color: 'var(--affine-text-disable-color)',
           }
         : {}),
       transition: 'background .15s',
@@ -201,10 +201,10 @@ export const StyledButton = styled('button', {
       fontSize,
       fontWeight: bold ? '500' : '400',
       '.affine-button-icon': {
-        color: theme.colors.iconColor,
+        color: 'var(--affine-icon-color)',
       },
       '.affine-button-icon__fixed': {
-        color: theme.colors.iconColor,
+        color: 'var(--affine-icon-color)',
       },
       '>span': {
         marginLeft: '5px',
@@ -221,8 +221,8 @@ export const StyledButton = styled('button', {
       // TODO: disabled hover should be implemented
       //
       // ':hover': {
-      //   color: hoverColor ?? theme.colors.primaryColor,
-      //   background: hoverBackground ?? theme.colors.hoverBackground,
+      //   color: hoverColor ?? 'var(--affine-primary-color)',
+      //   background: hoverBackground ?? 'var(--affine-hover-color)',
       //   '.affine-button-icon':{
       //
       //   }

packages/component/src/ui/button/utils.ts

@@ -47,37 +47,39 @@ export const getButtonColors = (
   switch (type) {
     case 'primary':
       return {
-        background: theme.colors.primaryColor,
+        background: 'var(--affine-primary-color)',
         color: '#fff',
-        borderColor: theme.colors.primaryColor,
+        borderColor: 'var(--affine-primary-color)',
         '.affine-button-icon': {
           color: '#fff',
         },
       };
     case 'light':
       return {
-        background: theme.colors.hoverBackground,
-        color: disabled ? theme.colors.disableColor : theme.colors.primaryColor,
-        borderColor: theme.colors.hoverBackground,
+        background: 'var(--affine-hover-color)',
+        color: disabled
+          ? 'var(--affine-text-disable-color)'
+          : 'var(--affine-primary-color)',
+        borderColor: 'var(--affine-hover-color)',
         '.affine-button-icon': {
-          borderColor: theme.colors.primaryColor,
+          borderColor: 'var(--affine-primary-color)',
         },
         ':hover': {
           borderColor: disabled
-            ? theme.colors.hoverBackground
-            : theme.colors.primaryColor,
+            ? 'var(--affine-hover-color)'
+            : 'var(--affine-primary-color)',
         },
       };
     case 'warning':
       return {
-        background: theme.colors.warningBackground,
-        color: theme.colors.warningColor,
-        borderColor: theme.colors.warningBackground,
+        background: 'var(--affine-background-warning-color)',
+        color: 'var(--affine-background-warning-color)',
+        borderColor: 'var(--affine-background-warning-color)',
         '.affine-button-icon': {
-          color: theme.colors.warningColor,
+          color: 'var(--affine-background-warning-color)',
         },
         ':hover': {
-          borderColor: theme.colors.warningColor,
+          borderColor: 'var(--affine-background-warning-color)',
           color: extend?.hoverColor,
           background: extend?.hoverBackground,
           ...extend?.hoverStyle,
@@ -85,14 +87,14 @@ export const getButtonColors = (
       };
     case 'danger':
       return {
-        background: theme.colors.errorBackground,
-        color: theme.colors.errorColor,
-        borderColor: theme.colors.errorBackground,
+        background: 'var(--affine-background-error-color)',
+        color: 'var(--affine-error-color)',
+        borderColor: 'var(--affine-background-error-color)',
         '.affine-button-icon': {
-          color: theme.colors.errorColor,
+          color: 'var(--affine-error-color)',
         },
         ':hover': {
-          borderColor: theme.colors.errorColor,
+          borderColor: 'var(--affine-error-color)',
           color: extend?.hoverColor,
           background: extend?.hoverBackground,
           ...extend?.hoverStyle,
@@ -100,13 +102,13 @@ export const getButtonColors = (
       };
     default:
       return {
-        color: theme.colors.textColor,
-        borderColor: theme.colors.borderColor,
+        color: 'var(--affine-text-primary-color)',
+        borderColor: 'var(--affine-border-color)',
         ':hover': {
-          borderColor: theme.colors.primaryColor,
-          color: extend?.hoverColor ?? theme.colors.primaryColor,
+          borderColor: 'var(--affine-primary-color)',
+          color: extend?.hoverColor ?? 'var(--affine-primary-color)',
           '.affine-button-icon': {
-            color: extend?.hoverColor ?? theme.colors.primaryColor,
+            color: extend?.hoverColor ?? 'var(--affine-primary-color)',
             background: extend?.hoverBackground,
             ...extend?.hoverStyle,
           },

packages/component/src/ui/confirm/styles.ts

@@ -13,7 +13,7 @@ export const StyledModalWrapper = styled(ModalWrapper)(() => {
 
 export const StyledConfirmTitle = styled('div')(({ theme }) => {
   return {
-    fontSize: theme.font.h6,
+    fontSize: 'var(--affine-font-h6)',
     fontWeight: 600,
     textAlign: 'center',
     lineHeight: '28px',
@@ -22,10 +22,10 @@ export const StyledConfirmTitle = styled('div')(({ theme }) => {
 
 export const StyledConfirmContent = styled('div')(({ theme }) => {
   return {
-    fontSize: theme.font.base,
+    fontSize: 'var(--affine-font-base)',
     textAlign: 'center',
     marginTop: '12px',
-    color: theme.colors.textColor,
+    color: 'var(--affine-text-primary-color)',
     lineHeight: '26px',
   };
 });

packages/component/src/ui/divider/index.ts

@@ -4,6 +4,6 @@ import { styled } from '../../styles';
 
 export const Divider = styled(MuiDivider)(({ theme }) => {
   return {
-    borderColor: theme.colors.borderColor,
+    borderColor: 'var(--affine-border-color)',
   };
 });

packages/component/src/ui/input/style.ts

@@ -14,16 +14,18 @@ export const StyledInput = styled('input')<{
     height,
     lineHeight: '22px',
     padding: '8px 12px',
-    color: disabled ? theme.colors.disableColor : theme.colors.textColor,
+    color: disabled
+      ? 'var(--affine-text-disable-color)'
+      : 'var(--affine-text-primary-color)',
     border: noBorder ? 'unset' : `1px solid`,
-    borderColor: theme.colors.borderColor, // TODO: check out disableColor,
-    backgroundColor: theme.colors.popoverBackground,
+    borderColor: 'var(--affine-border-color)', // TODO: check out disableColor,
+    backgroundColor: 'var(--affine-white)',
     borderRadius: '10px',
     '&::placeholder': {
-      color: theme.colors.placeHolderColor,
+      color: 'var(--affine-placeholder-color)',
     },
     '&:focus': {
-      borderColor: theme.colors.primaryColor,
+      borderColor: 'var(--affine-primary-color)',
     },
   };
 });

packages/component/src/ui/layout/Content.tsx

@@ -47,8 +47,8 @@ export const Content = styled('div', {
       maxWidth,
       textAlign: align,
       display: 'inline-block',
-      color: color ?? theme.colors.textColor,
-      fontSize: fontSize ?? theme.font.base,
+      color: color ?? 'var(--affine-text-primary-color)',
+      fontSize: fontSize ?? 'var(--affine-font-base)',
       fontWeight: weight ?? 400,
       lineHeight: lineHeight ?? 1.5,
       ...(ellipsis ? textEllipsis(lineNum) : {}),

packages/component/src/ui/menu/styles.ts

@@ -10,11 +10,11 @@ export const StyledMenuWrapper = styled(StyledPopperContainer)<{
   return {
     width,
     height,
-    background: theme.colors.popoverBackground,
+    background: 'var(--affine-white)',
     padding: '8px 4px',
     fontSize: '14px',
-    backgroundColor: theme.colors.popoverBackground,
-    boxShadow: theme.shadow.popover,
+    backgroundColor: 'var(--affine-white)',
+    boxShadow: 'var(--affine-text-popover-shadow)',
   };
 });
 
@@ -22,14 +22,14 @@ export const StyledStartIconWrapper = styled('div')(({ theme }) => {
   return {
     marginRight: '12px',
     fontSize: '20px',
-    color: theme.colors.iconColor,
+    color: 'var(--affine-icon-color)',
   };
 });
 export const StyledEndIconWrapper = styled('div')(({ theme }) => {
   return {
     marginLeft: '12px',
     fontSize: '20px',
-    color: theme.colors.iconColor,
+    color: 'var(--affine-icon-color)',
   };
 });
 
@@ -37,7 +37,7 @@ export const StyledContent = styled('div')(({ theme }) => {
   return {
     textAlign: 'left',
     flexGrow: 1,
-    fontSize: theme.font.base,
+    fontSize: 'var(--affine-font-base)',
     ...textEllipsis(1),
   };
 });
@@ -50,15 +50,19 @@ export const StyledMenuItem = styled('button')<{
     width: '100%',
     borderRadius: '5px',
     padding: '0 14px',
-    fontSize: theme.font.base,
+    fontSize: 'var(--affine-font-base)',
     height: '32px',
     ...displayFlex('flex-start', 'center'),
     cursor: isDir ? 'pointer' : '',
     position: 'relative',
     backgroundColor: 'transparent',
-    color: disabled ? theme.colors.disableColor : theme.colors.textColor,
+    color: disabled
+      ? 'var(--affine-text-disable-color)'
+      : 'var(--affine-text-primary-color)',
     svg: {
-      color: disabled ? theme.colors.disableColor : theme.colors.iconColor,
+      color: disabled
+        ? 'var(--affine-text-disable-color)'
+        : 'var(--affine-icon-color)',
     },
     ...(disabled
       ? {
@@ -70,10 +74,10 @@ export const StyledMenuItem = styled('button')<{
     ':hover': disabled
       ? {}
       : {
-          color: theme.colors.primaryColor,
-          backgroundColor: theme.colors.hoverBackground,
+          color: 'var(--affine-primary-color)',
+          backgroundColor: 'var(--affine-hover-color)',
           svg: {
-            color: theme.colors.primaryColor,
+            color: 'var(--affine-primary-color)',
           },
         },
   };

packages/component/src/ui/modal/ModalWrapper.tsx

@@ -11,7 +11,7 @@ export const ModalWrapper = styled('div')<{
     width,
     height,
     minHeight,
-    backgroundColor: theme.colors.popoverBackground,
+    backgroundColor: 'var(--affine-white)',
     borderRadius: '16px',
     position: 'relative',
     maxHeight: 'calc(100vh - 32px)',

packages/component/src/ui/modal/styles.ts

@@ -12,7 +12,7 @@ export const StyledBackdrop = styled('div')(({ theme }) => {
     bottom: '0',
     top: '0',
     left: '0',
-    backgroundColor: theme.colors.modalBackground,
+    backgroundColor: 'var(--affine-background-modal-color)',
   };
 });
 
@@ -33,7 +33,7 @@ export const StyledModal = styled(ModalUnstyled, {
     position: 'fixed',
     left: '0',
     top: '0',
-    zIndex: theme.zIndex.modal,
+    zIndex: 'var(--affine-z-index-modal)',
     '*': {
       WebkitTapHighlightColor: 'transparent',
       outline: 'none',

packages/component/src/ui/popper/PopoverArrow.tsx

@@ -92,6 +92,6 @@ const StyledArrow = styled('span')<{
       bottom: 0,
     },
 
-    ...getArrowStyle(placement, theme.colors.tooltipBackground),
+    ...getArrowStyle(placement, 'var(--affine-tooltip)'),
   };
 });

packages/component/src/ui/popper/Popper.tsx

@@ -191,6 +191,6 @@ export const BasicStyledPopper = styled(PopperUnstyled, {
   zIndex?: CSSProperties['zIndex'];
 }>(({ zIndex, theme }) => {
   return {
-    zIndex: zIndex ?? theme.zIndex.popover,
+    zIndex: zIndex ?? 'var(--affine-z-index-popover)',
   };
 });

packages/component/src/ui/shared/Container.tsx

@@ -45,7 +45,10 @@ export const StyledPopperContainer = styled('div')<{
   placement?: PopperPlacementType;
 }>(({ theme, placement = 'top' }) => {
   const direction = placementToContainerDirection[placement];
-  const borderRadius = getBorderRadius(direction, theme.radius.popover);
+  const borderRadius = getBorderRadius(
+    direction,
+    'var(--affine-popover-radius)'
+  );
   return {
     borderRadius,
   };

packages/component/src/ui/table/styles.ts

@@ -4,8 +4,8 @@ import type { TableCellProps } from './interface';
 export const StyledTable = styled('table')<{ tableLayout: 'auto' | 'fixed' }>(
   ({ theme, tableLayout }) => {
     return {
-      fontSize: theme.font.base,
-      color: theme.colors.textColor,
+      fontSize: 'var(--affine-font-base)',
+      color: 'var(--affine-text-primary-color)',
       tableLayout,
       width: '100%',
       borderCollapse: 'separate',
@@ -69,7 +69,7 @@ export const StyledTableRow = styled('tr')(({ theme }) => {
 
     ':hover': {
       td: {
-        background: theme.colors.hoverBackground,
+        background: 'var(--affine-hover-color)',
       },
     },
   };

packages/component/src/ui/tooltip/QuickSearch-tips.tsx

@@ -7,14 +7,14 @@ const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => {
   return {
     width: '390px',
     minHeight: '92px',
-    boxShadow: theme.shadow.tooltip,
+    boxShadow: 'var(--affine-tooltip-shadow)',
     padding: '12px',
-    backgroundColor: theme.colors.backgroundTertiaryColor,
+    backgroundColor: 'var(--affine-background-tertiary-color)',
     transform: 'all 0.15s',
-    color: theme.colors.textEmphasisColor,
+    color: 'var(--affine-text-emphasis-color)',
     ...displayFlex('center', 'center'),
-    border: `1px solid ${theme.colors.textEmphasisColor}`,
-    fontSize: theme.font.sm,
+    border: `1px solid var(--affine-text-emphasis-color)`,
+    fontSize: 'var(--affine-font-sm)',
     lineHeight: '22px',
     fontWeight: 500,
   };
@@ -29,7 +29,7 @@ const StyledCircleContainer = styled('div')(({ theme }) => {
     transform: translate(0%, 0%);
     width: 0;
     height: 40px;
-    border-right: 1px solid ${theme.colors.textEmphasisColor};
+    border-right: 1px solid var(--affine-text-emphasis-color);
     &::after {
       content: '';
       position: absolute;
@@ -39,7 +39,7 @@ const StyledCircleContainer = styled('div')(({ theme }) => {
       width: 12px;
       height: 12px;
       border-radius: 50%;
-      border: 1px solid ${theme.colors.textEmphasisColor};
+      border: 1px solid var(--affine-text-emphasis-color);
     }
     &::before {
       content: '';
@@ -50,9 +50,8 @@ const StyledCircleContainer = styled('div')(({ theme }) => {
       width: 6px;
       height: 6px;
       border-radius: 50%;
-      background-color: ${theme.colors.textEmphasisColor};
-      border: 1px solid ${theme.colors.textEmphasisColor};
-    }
+      background-color: var(--affine-text-emphasis-color);
+      border: 1px solid var(--affine-text-emphasis-color);
   `;
 });
 

packages/component/src/ui/tooltip/Tooltip.tsx

@@ -6,11 +6,11 @@ import StyledPopperContainer from '../shared/Container';
 const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => {
   return {
     maxWidth: '320px',
-    boxShadow: theme.shadow.popover,
+    boxShadow: 'var(--affine-text-popover-shadow)',
     padding: '4px 12px',
-    backgroundColor: theme.colors.tooltipBackground,
+    backgroundColor: 'var(--affine-tooltip)',
     color: '#fff',
-    fontSize: theme.font.sm,
+    fontSize: 'var(--affine-font-sm)',
   };
 });
 

packages/component/src/ui/tree-view/styles.ts

@@ -1,7 +1,7 @@
 import MuiCollapse from '@mui/material/Collapse';
 import type { CSSProperties } from 'react';
 
-import { alpha, styled } from '../../styles';
+import { alpha, lightTheme, styled } from '../../styles';
 
 export const StyledCollapse = styled(MuiCollapse)<{
   indent?: CSSProperties['paddingLeft'];
@@ -18,7 +18,7 @@ export const StyledTreeNodeWrapper = styled('div')(() => {
 export const StyledTreeNodeContainer = styled('div')<{ isDragging?: boolean }>(
   ({ isDragging = false, theme }) => {
     return {
-      background: isDragging ? theme.colors.hoverBackground : '',
+      background: isDragging ? 'var(--affine-hover-color)' : '',
       // opacity: isDragging ? 0.4 : 1,
     };
   }
@@ -33,9 +33,9 @@ export const StyledNodeLine = styled('div')<{ show: boolean; isTop?: boolean }>(
       width: '100%',
       paddingTop: '2x',
       borderTop: '2px solid',
-      borderColor: show ? theme.colors.primaryColor : 'transparent',
+      borderColor: show ? 'var(--affine-primary-color)' : 'transparent',
       boxShadow: show
-        ? `0px 0px 8px ${alpha(theme.colors.primaryColor, 0.35)}`
+        ? `0px 0px 8px ${alpha(lightTheme.primaryColor, 0.35)}`
         : 'none',
       zIndex: 1,
     };