chore: update shadow and color (#2171)

apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts

@@ -9,7 +9,7 @@ export const StyledEditorModeSwitch = styled('div')<{
     height: '32px',
     background: showAlone
       ? 'transparent'
-      : 'var(--affine-background-primary-color)',
+      : 'var(--affine-background-secondary-color)',
     borderRadius: '12px',
     ...displayFlex('space-between', 'center'),
     padding: '0 8px',
@@ -21,7 +21,7 @@ export const StyledEditorModeSwitch = styled('div')<{
       width: '24px',
       height: '24px',
       background: 'var(--affine-background-primary-color)',
-      boxShadow: 'var(--affine-tooltip-shadow)',
+      boxShadow: 'var(--affine-shadow)',
       borderRadius: '8px',
       zIndex: 1,
       position: 'absolute',
@@ -34,11 +34,12 @@ export const StyledEditorModeSwitch = styled('div')<{
 export const StyledSwitchItem = styled('button')<{
   active?: boolean;
   hide?: boolean;
-}>(({ theme, active = false, hide = false }) => {
+}>(({ active = false, hide = false }) => {
   return {
     width: '24px',
     height: '24px',
     borderRadius: '8px',
+    boxShadow: active ? 'var(--affine-shadow)' : 'none',
     color: active ? 'var(--affine-primary-color)' : 'var(--affine-icon-color)',
     display: hide ? 'none' : 'inline-flex',
     alignItems: 'center',

apps/web/src/components/pure/footer/styles.ts

@@ -47,32 +47,6 @@ export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
   };
 });
 
-export const StyledCard = styled('div')<{
-  active?: boolean;
-}>(({ theme, active }) => {
-  const borderColor = active ? 'var(--affine-primary-color)' : 'transparent';
-  return {
-    width: '310px',
-    height: '124px',
-    cursor: 'pointer',
-    padding: '16px',
-    boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.1)',
-    borderRadius: '12px',
-    border: `1px solid ${borderColor}`,
-    ...displayFlex('flex-start', 'flex-start'),
-    marginBottom: '24px',
-    transition: 'background .2s',
-    background: 'var(--affine-background-primary-color)',
-    ':hover': {
-      background: 'var(--affine-hover-color)',
-      '.add-icon': {
-        borderColor: 'var(--affine-primary-color)',
-        color: 'var(--affine-primary-color)',
-      },
-    },
-  };
-});
-
 export const StyledFooter = styled('div')({
   height: '84px',
   padding: '0 40px',

apps/web/src/components/pure/workspace-list-modal/styles.ts

@@ -47,9 +47,10 @@ export const StyledCreateWorkspaceCard = styled('div')(({ theme }) => {
     height: '124px',
     cursor: 'pointer',
     padding: '16px',
-    boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.1)',
+    boxShadow: 'var(--affine-shadow)',
     borderRadius: '12px',
     transition: 'all .1s',
+    background: 'var(--affine-white-80)',
     ...displayFlex('flex-start', 'flex-start'),
     color: 'var(--affine-text-secondary-color)',
 
@@ -57,7 +58,7 @@ export const StyledCreateWorkspaceCard = styled('div')(({ theme }) => {
       background: 'var(--affine-hover-color)',
       color: 'var(--affine-text-primary-color)',
       '.add-icon': {
-        borderColor: 'var(--affine-primary-color)',
+        borderColor: 'var(--affine-white-color)',
         color: 'var(--affine-primary-color)',
       },
     },
@@ -103,11 +104,13 @@ export const StyleWorkspaceAdd = styled('div')(() => {
     width: '58px',
     height: '58px',
     borderRadius: '100%',
-    background: '#f4f5fa',
+    background: 'var(--affine-white-80)',
     border: '1.5px dashed #f4f5fa',
     transition: 'background .2s',
     fontSize: '24px',
     ...displayFlex('center', 'center'),
+    borderColor: 'var(--affine-white-color)',
+    color: 'var(--affine-primary-color)',
   };
 });
 export const StyledModalHeader = styled('div')(() => {