feat: new sidebar (app shell) styles (#2303)

packages/component/src/components/workspace/index.css.ts

@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 
 import { breakpoints } from '../../styles/mui-theme';
 export const appStyle = style({
@@ -13,6 +13,14 @@ export const appStyle = style({
     '&[data-is-resizing="true"]': {
       cursor: 'col-resize',
     },
+    '&[data-noise-background="true"]:before': {
+      content: '""',
+      position: 'absolute',
+      inset: 0,
+      opacity: 'var(--affine-noise-opacity)',
+      backgroundSize: '25%',
+      backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='10' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`,
+    },
   },
   vars: {
     '--affine-editor-width': '686px',
@@ -26,11 +34,35 @@ export const appStyle = style({
   },
 });
 
+globalStyle(`html[data-theme="light"] ${appStyle}`, {
+  vars: {
+    '--affine-noise-opacity': '0.25',
+  },
+});
+
+globalStyle(`html[data-theme="dark"] ${appStyle}`, {
+  vars: {
+    '--affine-noise-opacity': '0.1',
+  },
+});
+
 export const mainContainerStyle = style({
   position: 'relative',
   flexGrow: 1,
   maxWidth: '100%',
+  zIndex: 0,
   backgroundColor: 'var(--affine-background-primary-color)',
+  selectors: {
+    '&[data-is-desktop="true"]': {
+      margin: '8px 8px 8px 8px',
+      borderRadius: '8px',
+      overflow: 'hidden',
+      boxShadow: 'var(--affine-shadow-1)',
+    },
+    '&[data-is-desktop="true"][data-is-sidebar-open="true"]': {
+      marginLeft: '2px',
+    },
+  },
 });
 
 export const toolStyle = style({

packages/component/src/components/workspace/index.tsx

@@ -9,8 +9,13 @@ export type WorkspaceRootProps = PropsWithChildren<{
 }>;
 
 export const AppContainer = (props: WorkspaceRootProps): ReactElement => {
+  const noisyBackground = environment.isDesktop && environment.isMacOs;
   return (
-    <div className={appStyle} data-is-resizing={props.resizing}>
+    <div
+      className={appStyle}
+      data-noise-background={noisyBackground}
+      data-is-resizing={props.resizing}
+    >
       {props.children}
     </div>
   );
@@ -18,12 +23,15 @@ export const AppContainer = (props: WorkspaceRootProps): ReactElement => {
 
 export type MainContainerProps = PropsWithChildren<{
   className?: string;
+  sidebarOpen?: boolean;
 }>;
 
 export const MainContainer = (props: MainContainerProps): ReactElement => {
   return (
     <div
       className={clsx(mainContainerStyle, 'main-container', props.className)}
+      data-is-desktop={environment.isDesktop}
+      data-is-sidebar-open={props.sidebarOpen}
     >
       {props.children}
     </div>