Merge pull request #91 from toeverything/fix/lighter-box-shadow

fix: lighter box shadow

apps/ligo-virgo/src/pages/workspace/docs/Page.tsx

@@ -193,7 +193,7 @@ const LigoLeftContainer = styled('div')({
     position: 'relative',
 });
 
-const WorkspaceSidebar = styled('div')(({ hidden }) => ({
+const WorkspaceSidebar = styled('div')(({ theme }) => ({
     position: 'absolute',
     bottom: '48px',
     top: '12px',
@@ -203,7 +203,7 @@ const WorkspaceSidebar = styled('div')(({ hidden }) => ({
     width: 300,
     minWidth: 300,
     borderRadius: '0px 10px 10px 0px',
-    boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+    boxShadow: theme.affine.shadows.shadow1,
     backgroundColor: '#FFFFFF',
     transitionProperty: 'left',
     transitionDuration: '0.35s',

libs/components/common/src/lib/text/plugins/link.tsx

@@ -121,11 +121,11 @@ const isLinkActive = (editor: ReactEditor) => {
 
 const LinkStyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => (
     <Tooltip {...props} classes={{ popper: className }} />
-))(() => ({
+))(({ theme }) => ({
     [`& .${muiTooltipClasses.tooltip}`]: {
         backgroundColor: '#fff',
         color: '#4C6275',
-        boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+        boxShadow: theme.affine.shadows.shadow1,
         fontSize: '14px',
     },
     [`& .MuiTooltip-tooltipPlacementBottom`]: {
@@ -412,8 +412,7 @@ export const LinkModal = memo((props: LinkModalProps) => {
         visible && (
             <>
                 <LinkBehavior onMousedown={handle_mouse_down} rects={rects} />
-                <div
+                <LinkModalContainer
-                    className={styles('linkModalContainer')}
                     style={{
                         top: top + height + GAP_BETWEEN_CONTENT_AND_MODAL,
                         left,
@@ -431,7 +430,7 @@ export const LinkModal = memo((props: LinkModalProps) => {
                         autoComplete="off"
                         ref={inputEl}
                     />
-                </div>
+                </LinkModalContainer>
             </>
         ),
         body
@@ -491,19 +490,20 @@ const LinkBehavior = (props: {
     );
 };
 
+const LinkModalContainer = styled('div')(({ theme }) => ({
+    position: 'fixed',
+    width: '354px',
+    height: '40px',
+    padding: '12px',
+    display: 'flex',
+    borderRadius: '4px',
+    boxShadow: theme.affine.shadows.shadow1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    zIndex: '1',
+}));
+
 const styles = style9.create({
-    linkModalContainer: {
-        position: 'fixed',
-        width: '354px',
-        height: '40px',
-        padding: '12px',
-        display: 'flex',
-        borderRadius: '4px',
-        boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
-        backgroundColor: '#fff',
-        alignItems: 'center',
-        zIndex: '1',
-    },
     linkModalContainerIcon: {
         width: '16px',
         margin: '0 16px 0 4px',

libs/components/editor-blocks/src/blocks/group/GroupView.tsx

@@ -69,7 +69,7 @@ const GroupContainer = styled('div')<{ isSelect?: boolean }>(
               }
             : {
                   '&:hover': {
-                      boxShadow: '0px 1px 10px rgb(152 172 189 / 60%)',
+                      boxShadow: theme.affine.shadows.shadow1,
                   },
               }),
     })

libs/components/editor-blocks/src/blocks/group/components/Panel.tsx

@@ -2,11 +2,11 @@ import { styled } from '@toeverything/components/ui';
 import type { ComponentPropsWithRef, MouseEvent } from 'react';
 import { forwardRef } from 'react';
 
-const StyledPanel = styled('div')(() => ({
+const StyledPanel = styled('div')(({ theme }) => ({
     position: 'absolute',
     top: 50,
     background: '#FFFFFF',
-    boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+    boxShadow: theme.affine.shadows.shadow1,
     borderRadius: 10,
     padding: '12px 24px',
 }));

libs/components/editor-plugins/src/comment/Container.tsx

@@ -64,7 +64,7 @@ const StyledContainerForAddCommentContainer = styled('div')(({ theme }) => {
         zIndex: 1,
         display: 'flex',
         borderRadius: theme.affine.shape.borderRadius,
-        boxShadow: theme.affine.shadows.shadowSxDownLg,
+        boxShadow: theme.affine.shadows.shadow1,
         backgroundColor: theme.affine.palette.white,
     };
 });

libs/components/editor-plugins/src/menu/command-menu/Container.tsx

@@ -31,7 +31,7 @@ const RootContainer = styled('div')(({ theme }) => {
         width: 352,
         maxHeight: 525,
         borderRadius: '10px',
-        boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+        boxShadow: theme.affine.shadows.shadow1,
         backgroundColor: '#fff',
         padding: '8px 4px',
     };

libs/components/editor-plugins/src/menu/inline-menu/Container.tsx

@@ -75,13 +75,13 @@ export const InlineMenuContainer = ({ editor }: InlineMenuContainerProps) => {
     ) : null;
 };
 
-const ToolbarContainer = styled('div')({
+const ToolbarContainer = styled('div')(({ theme }) => ({
     position: 'absolute',
     zIndex: 1,
     display: 'flex',
     alignItems: 'center',
     padding: '0 12px',
     borderRadius: '10px',
-    boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+    boxShadow: theme.affine.shadows.shadow1,
     backgroundColor: '#fff',
-});
+}));

libs/components/editor-plugins/src/menu/reference-menu/Container.tsx

@@ -8,6 +8,7 @@ import {
     commonListContainer,
 } from '@toeverything/components/common';
 import { domToRect } from '@toeverything/utils';
+import { styled } from '@toeverything/components/ui';
 
 import { QueryResult } from '../../search';
 
@@ -152,13 +153,12 @@ export const ReferenceMenuContainer = ({
     }, [hooks, handle_key_down]);
 
     return isShow ? (
-        <div
+        <RootContainer
             ref={menu_ref}
-            className={styles('rootContainer')}
             onKeyDownCapture={handle_key_down}
             style={style}
         >
-            <div className={styles('contentContainer')}>
+            <ContentContainer>
                 <CommonList
                     items={
                         searchBlocks?.map(
@@ -169,24 +169,23 @@ export const ReferenceMenuContainer = ({
                     currentItem={current_item}
                     setCurrentItem={set_current_item}
                 />
-            </div>
+            </ContentContainer>
-        </div>
+        </RootContainer>
     ) : null;
 };
 
-const styles = style9.create({
+const RootContainer = styled('div')(({ theme }) => ({
-    rootContainer: {
+    position: 'fixed',
-        position: 'fixed',
+    zIndex: 1,
-        zIndex: 1,
+    maxHeight: '525px',
-        maxHeight: 525,
+    borderRadius: '10px',
-        borderRadius: '10px',
+    boxShadow: theme.affine.shadows.shadow1,
-        boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+    backgroundColor: '#fff',
-        backgroundColor: '#fff',
+    padding: '8px 4px',
-        padding: '8px 4px',
+}));
-    },
+
-    contentContainer: {
+const ContentContainer = styled('div')(({ theme }) => ({
-        display: 'flex',
+    display: 'flex',
-        overflow: 'hidden',
+    overflow: 'hidden',
-        maxHeight: 493,
+    maxHeight: '493px',
-    },
+}));
-});

libs/components/editor-plugins/src/search/Search.tsx

@@ -7,6 +7,7 @@ import {
     TransitionsModal,
     MuiBox as Box,
     MuiBox,
+    styled,
 } from '@toeverything/components/ui';
 import { Virgo, BlockEditor } from '@toeverything/framework/virgo';
 import { throttle } from '@toeverything/utils';
@@ -21,26 +22,6 @@ const styles = style9.create({
         display: 'flex',
         flexDirection: 'column',
     },
-    search: {
-        margin: '0.5em',
-        backgroundColor: 'white',
-        boxShadow: '0px 1px 10px rgb(152 172 189 / 60%)',
-        padding: '16px 32px',
-        borderRadius: '10px',
-    },
-    result: {
-        margin: '0.5em',
-        backgroundColor: 'white',
-        boxShadow: '0px 1px 10px rgb(152 172 189 / 60%)',
-        padding: '16px 32px',
-        borderRadius: '10px',
-        transitionProperty: 'max-height',
-        transitionDuration: '300ms',
-        transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
-        transitionDelay: '0ms',
-        overflowX: 'hidden',
-        overflowY: 'hidden',
-    },
     resultItem: {
         width: '100%',
     },
@@ -96,15 +77,14 @@ export const Search = (props: SearchProps) => {
             }}
         >
             <Box className={styles('wrapper')}>
-                <input
+                <SearchInput
-                    className={styles('search')}
                     autoFocus
                     value={search}
                     onChange={e => set_search(e.target.value)}
                 />
-                <MuiBox
+                <ResultContainer
                     sx={{ maxHeight: `${result.length * 28 + 32 + 20}px` }}
-                    className={styles('result', {
+                    className={styles({
                         resultHide: !result.length,
                     })}
                 >
@@ -119,8 +99,30 @@ export const Search = (props: SearchProps) => {
                             }}
                         />
                     ))}
-                </MuiBox>
+                </ResultContainer>
             </Box>
         </TransitionsModal>
     );
 };
+
+const SearchInput = styled('input')(({ theme }) => ({
+    margin: '0.5em',
+    backgroundColor: 'white',
+    boxShadow: theme.affine.shadows.shadow1,
+    padding: '16px 32px',
+    borderRadius: '10px',
+}));
+
+const ResultContainer = styled(MuiBox)(({ theme }) => ({
+    margin: '0.5em',
+    backgroundColor: 'white',
+    boxShadow: theme.affine.shadows.shadow1,
+    padding: '16px 32px',
+    borderRadius: '10px',
+    transitionProperty: 'max-height',
+    transitionDuration: '300ms',
+    transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    transitionDelay: '0ms',
+    overflowX: 'hidden',
+    overflowY: 'hidden',
+}));

libs/components/layout/src/header/EditorBoardSwitcher/StatusIcon.tsx

@@ -20,7 +20,7 @@ const IconWrapper = styled('div')<Pick<StatusIconProps, 'mode'>>(
             width: '20px',
             height: '20px',
             borderRadius: '5px',
-            boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+            boxShadow: theme.affine.shadows.shadow1,
             color: theme.affine.palette.primary,
             cursor: 'pointer',
             backgroundColor: theme.affine.palette.white,

libs/components/layout/src/settings-sidebar/Comments/CommentItem.tsx

@@ -94,7 +94,7 @@ const StyledContainerForCommentItem = styled('div', {
         transition: 'left 150ms ease-in-out',
         backgroundColor: theme.affine.palette.white,
         '&:hover': {
-            boxShadow: theme.affine.shadows.shadowSxDownLg,
+            boxShadow: theme.affine.shadows.shadow1,
         },
     };
 });

libs/components/ui/src/cascader/Cascader.tsx

@@ -133,7 +133,7 @@ export function Cascader(props: CascaderProps) {
 const MenuPaper = styled('div')(({ theme }) => ({
     fontFamily: 'PingFang SC',
     background: '#FFF',
-    boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+    boxShadow: theme.affine.shadows.shadow1,
     borderRadius: '10px 0px 10px 10px',
     color: '#4C6275',
     fontWeight: '400',

libs/components/ui/src/popover/Container.tsx

@@ -12,7 +12,7 @@ const border_radius_map: Record<PopoverContainerProps['direction'], string> = {
 export const PopoverContainer = styled('div')<
     Pick<PopoverContainerProps, 'direction'>
 >(({ theme, direction, style }) => {
-    const shadow = theme.affine.shadows.shadowSxDownLg;
+    const shadow = theme.affine.shadows.shadow1;
     const white = theme.affine.palette.white;
 
     const borderRadius =

libs/components/ui/src/select/Select.tsx

@@ -117,7 +117,7 @@ const StyledListbox = styled('ul')(({ theme }) => ({
     background: '#fff',
     borderRadius: '10px',
     overflow: 'auto',
-    boxShadow: theme.affine.shadows.shadowSxDownLg,
+    boxShadow: theme.affine.shadows.shadow1,
 }));
 
 const StyledPopper = styled(PopperUnstyled)`

libs/components/ui/src/theme/theme.ts

@@ -70,7 +70,7 @@ interface Typography {
 
 interface Shadows {
     none: 'none';
-    shadowSxDownLg: string;
+    shadow1: string;
 }
 
 type StringWithNone = [
@@ -225,7 +225,7 @@ export const Theme = {
     },
     shadows: {
         none: 'none',
-        shadowSxDownLg: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+        shadow1: '0px 1px 5px rgba(152, 172, 189, 0.2)',
     },
     border: ['none'],
     spacing: {