Merge pull request #872 from toeverything/feat/modify-ui

feat: modify style

packages/app/public/globals.css

@@ -144,12 +144,12 @@ button,
 select,
 keygen,
 legend {
-  color: var(--affine-text-color);
   background-color: unset;
   outline: 0;
   border: 0;
-  font-size: 18px;
+  font-size: var(--affine-font-base);
-  line-height: 1.5;
+  line-height: var(--affine-line-height);
+  color: var(--affine-text-color);
   font-family: var(--affine-font-family);
 }
 body {
@@ -173,7 +173,7 @@ input {
 }
 
 input:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0px 1000px white inset;
+  -webkit-box-shadow: 0 0 0 1000px white inset;
 }
 
 input[type='number'] {

packages/app/src/components/workspace-setting/style.ts

@@ -66,7 +66,7 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
         color: isActive ? theme.colors.primaryColor : theme.colors.textColor,
         fontWeight: '500',
         fontSize: theme.font.base,
-        lineHeight: theme.font.lineHeightBase,
+        lineHeight: theme.font.lineHeight,
         cursor: 'pointer',
         transition: 'all 0.15s ease',
         borderBottom: `2px solid ${
@@ -92,7 +92,7 @@ export const StyledSettingH2 = styled('h2')<{
   return {
     // fontWeight: '500',
     fontSize: theme.font.base,
-    lineHeight: theme.font.lineHeightBase,
+    lineHeight: theme.font.lineHeight,
     marginTop: marginTop ? `${marginTop}px` : '0px',
     marginBottom: marginBottom ? `${marginBottom}px` : '0px',
   };
@@ -147,7 +147,7 @@ export const StyledPublishContent = styled('div')(({ theme }) => {
     fontWeight: '500',
     flexDirection: 'column',
     fontSize: theme.font.base,
-    lineHeight: theme.font.lineHeightBase,
+    lineHeight: theme.font.lineHeight,
     flex: 1,
   };
 });

packages/app/src/components/workspace-slider-bar/style.ts

@@ -6,7 +6,7 @@ export const StyledSliderBar = styled.div<{ show: boolean }>(
     return {
       width: show ? '256px' : '0',
       height: '100vh',
-      background: theme.mode === 'dark' ? '#272727' : '#FBFBFC',
+      background: theme.mode === 'dark' ? '#272727' : '#F9F9FB',
       boxShadow: theme.shadow.modal,
       transition: 'width .15s, padding .15s',
       position: 'relative',

packages/app/src/pages/public-workspace/[workspaceId]/[pageId].tsx

@@ -126,7 +126,7 @@ export const StyledBreadcrumbs = styled(NextLink)(({ theme }) => {
     span: {
       padding: '0 12px',
       fontSize: theme.font.base,
-      lineHeight: theme.font.lineHeightBase,
+      lineHeight: theme.font.lineHeight,
     },
     ':hover': { color: theme.colors.primaryColor },
     transition: 'all .15s',

packages/app/src/styles/theme.ts

@@ -15,20 +15,20 @@ export const getLightTheme = (
       primaryColor: '#6880FF',
 
       pageBackground: '#fff',
-      hoverBackground: '#F1F3FF',
+      hoverBackground: '#F1F1F4',
-      innerHoverBackground: '#E0E6FF',
+      innerHoverBackground: '#E9E9EC',
       popoverBackground: '#fff',
       tooltipBackground: '#6880FF',
       codeBackground: '#f2f5f9',
-      codeBlockBackground: '#fafbfd',
+      codeBlockBackground: '#F9F9FB',
       blockHubBackground: '#fbfbfc',
       blockHubHoverBackground: '#f8f9ff',
       warningBackground: '#FFF9C7',
       errorBackground: '#FFDED8',
 
-      textColor: '#3A4C5C',
+      textColor: '#28293D',
       edgelessTextColor: '#3A4C5C',
-      iconColor: '#888a9e',
+      iconColor: '#555770',
       handleColor: '#c7c3d9',
       linkColor: '#6880FF',
       linkColor2: '#6880FF',
@@ -38,28 +38,30 @@ export const getLightTheme = (
       tooltipColor: '#fff',
       codeColor: '#517ea6',
       quoteColor: '#4C6275',
-      placeHolderColor: '#C7C7C7',
+      placeHolderColor: '#555770',
       selectedColor: 'rgba(104, 128, 255, 0.1)',
-      borderColor: '#D0D7E3',
+      borderColor: '#555770',
-      disableColor: '#C0C0C0',
+      disableColor: '#555770',
       warningColor: '#906616',
       errorColor: '#EB4335',
-      lineNumberColor: '#888A9E',
+      lineNumberColor: '#555770',
     },
     font: {
-      xs: '12px',
+      title: '36px',
-      sm: '16px',
+      h1: '28px',
-      base: '18px',
+      h2: '26px',
-      h1: '30px',
+      h3: '24px',
-      h2: '28px',
+      h4: '22px',
-      h3: '26px',
+      h5: '20px',
-      h4: '24px',
+      h6: '18px',
-      h5: '22px',
+      base: '16px',
-      h6: '20px',
+      xs: '14px',
+      sm: '14px',
 
       family: `Avenir Next, Poppins, ${basicFontFamily}`,
-      mono: `Space Mono, ${basicFontFamily}`,
+      numberFamily: `Roboto Mono, ${basicFontFamily}`,
-      lineHeightBase: '26px',
+      codeFamily: `Space Mono, Consolas, Menlo, Monaco, Courier, monospace, ${basicFontFamily}`,
+      lineHeight: 'calc(1em + 8px)',
     },
     zIndex: {
       modal: 1000,
@@ -181,16 +183,24 @@ export const globalThemeVariables: (
     '--affine-popover-shadow': theme.shadow.popover,
     '--affine-tooltip-shadow': theme.shadow.tooltip,
 
-    '--affine-font-xs': theme.font.xs, // tiny
+    '--affine-font-h1': theme.font.h1,
-    '--affine-font-sm': theme.font.sm, // small
+    '--affine-font-h2': theme.font.h2,
+    '--affine-font-h3': theme.font.h3,
+    '--affine-font-h4': theme.font.h4,
+    '--affine-font-h5': theme.font.h5,
+    '--affine-font-h6': theme.font.h6,
     '--affine-font-base': theme.font.base,
-    '--affine-line-height-base': theme.font.lineHeightBase,
+    '--affine-font-sm': theme.font.sm, // small
+    '--affine-font-xs': theme.font.xs, // tiny
+
+    '--affine-line-height': theme.font.lineHeight,
 
     '--affine-z-index-modal': theme.zIndex.modal,
     '--affine-z-index-popover': theme.zIndex.popover,
 
     '--affine-font-family': theme.font.family,
-    '--affine-font-mono': theme.font.mono,
+    '--affine-font-number-family': theme.font.numberFamily,
+    '--affine-font-code-family': theme.font.codeFamily,
 
     '--affine-paragraph-space': theme.space.paragraph,
     '--affine-popover-radius': theme.radius.popover,

packages/app/src/styles/types.ts

@@ -54,20 +54,22 @@ export interface AffineTheme {
     lineNumberColor: string;
   };
   font: {
-    xs: string; // tiny
+    title: string;
-    sm: string; // small
-    base: string;
     h1: string;
     h2: string;
     h3: string;
     h4: string;
     h5: string;
     h6: string;
+    base: string;
+    sm: string; // small
+    xs: string; // tiny
 
     family: string;
-    mono: string;
+    numberFamily: string;
+    codeFamily: string;
 
-    lineHeightBase: string | number;
+    lineHeight: string | number;
   };
   zIndex: {
     modal: number;
@@ -119,17 +121,23 @@ export interface AffineThemeCSSVariables {
   '--affine-modal-shadow': AffineTheme['shadow']['modal'];
   '--affine-popover-shadow': AffineTheme['shadow']['popover'];
   '--affine-tooltip-shadow': AffineTheme['shadow']['tooltip'];
-
+  '--affine-font-h1': AffineTheme['font']['h1'];
-  '--affine-font-xs': AffineTheme['font']['xs']; // tiny
+  '--affine-font-h2': AffineTheme['font']['h2'];
-  '--affine-font-sm': AffineTheme['font']['sm']; // small
+  '--affine-font-h3': AffineTheme['font']['h3'];
+  '--affine-font-h4': AffineTheme['font']['h4'];
+  '--affine-font-h5': AffineTheme['font']['h5'];
+  '--affine-font-h6': AffineTheme['font']['h6'];
   '--affine-font-base': AffineTheme['font']['base'];
-  '--affine-line-height-base': AffineTheme['font']['lineHeightBase'];
+  '--affine-font-sm': AffineTheme['font']['sm']; // small
+  '--affine-font-xs': AffineTheme['font']['xs']; // tiny
+  '--affine-line-height': AffineTheme['font']['lineHeight'];
 
   '--affine-z-index-modal': AffineTheme['zIndex']['modal'];
   '--affine-z-index-popover': AffineTheme['zIndex']['popover'];
 
   '--affine-font-family': AffineTheme['font']['family'];
-  '--affine-font-mono': AffineTheme['font']['mono'];
+  '--affine-font-number-family': AffineTheme['font']['numberFamily'];
+  '--affine-font-code-family': AffineTheme['font']['codeFamily'];
 
   '--affine-paragraph-space': AffineTheme['space']['paragraph'];