feat: responsive ui above 640px (#1741)

packages/component/src/index.ts

@@ -27,6 +27,7 @@ declare module '@mui/material/styles' {
       tooltipBackground: string;
       hoverBackground: string;
       innerHoverBackground: string;
+      modalBackground: string;
       // Use for the quick search tips background
       backgroundTertiaryColor: string;
       codeBackground: string;
@@ -103,6 +104,7 @@ declare module '@mui/material/styles' {
       tooltipBackground: string;
       hoverBackground: string;
       innerHoverBackground: string;
+      modalBackground: string;
       // Use for the quick search tips background
       backgroundTertiaryColor: string;
       codeBackground: string;

packages/component/src/styles/theme.ts

@@ -29,6 +29,7 @@ export const getLightTheme = (
       cardHoverBackground: '#f8f9ff',
       warningBackground: '#FFF9C7',
       errorBackground: '#FFDED8',
+      modalBackground: 'rgba(0, 0, 0, 0.6)',
 
       textColor: '#424149',
       secondaryTextColor: '#8E8D91',
@@ -83,6 +84,15 @@ export const getLightTheme = (
     radius: {
       popover: '10px',
     },
+    breakpoints: {
+      values: {
+        xs: 0,
+        sm: 640,
+        md: 960,
+        lg: 1280,
+        xl: 1920,
+      },
+    },
   };
 };
 
@@ -113,6 +123,7 @@ export const getDarkTheme = (
       cardHoverBackground: '#363636',
       warningBackground: '#FFF9C7',
       errorBackground: '#FFDED8',
+      modalBackground: 'rgba(0, 0, 0, 0.8)',
 
       textColor: '#fff',
       secondaryTextColor: '#8E8D91',
@@ -207,7 +218,6 @@ export const globalThemeVariables: (
     '--affine-paragraph-space': theme.space.paragraph,
     '--affine-popover-radius': theme.radius.popover,
 
-    '--affine-editor-width': '720px',
     '--affine-zoom': '1',
     '--affine-scale': 'calc(1 / var(--affine-zoom))',
   };

packages/component/src/styles/types.ts

@@ -27,6 +27,7 @@ export interface AffineTheme {
     tooltipBackground: string;
     hoverBackground: string;
     innerHoverBackground: string;
+    modalBackground: string;
     // Use for the quick search tips background
     backgroundTertiaryColor: string;
     codeBackground: string;
@@ -92,6 +93,15 @@ export interface AffineTheme {
   radius: {
     popover: string;
   };
+  breakpoints: {
+    values: {
+      xs: number;
+      sm: number;
+      md: number;
+      lg: number;
+      xl: number;
+    };
+  };
 }
 
 export interface AffineThemeCSSVariables {
@@ -150,7 +160,6 @@ export interface AffineThemeCSSVariables {
 
   '--affine-popover-radius': AffineTheme['radius']['popover'];
   // use for blocksuite
-  '--affine-editor-width': CSSProperties['width'];
   '--affine-zoom': CSSProperties['zoom'];
   '--affine-scale': string;
 }

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

@@ -12,10 +12,7 @@ export const StyledBackdrop = styled('div')(({ theme }) => {
     bottom: '0',
     top: '0',
     left: '0',
-    backgroundColor:
-      theme.palette.mode === 'light'
-        ? 'rgba(58, 76, 92, 0.2)'
-        : 'rgba(34, 34, 34, 0.6)',
+    backgroundColor: theme.colors.modalBackground,
   };
 });