feat!: affine cloud support (#3813)

Co-authored-by: Hongtao Lye <codert.sn@gmail.com>
Co-authored-by: liuyi <forehalo@gmail.com>
Co-authored-by: LongYinan <lynweklm@gmail.com>
Co-authored-by: X1a0t <405028157@qq.com>
Co-authored-by: JimmFly <yangjinfei001@gmail.com>
Co-authored-by: Peng Xiao <pengxiao@outlook.com>
Co-authored-by: xiaodong zuo <53252747+zuoxiaodong0815@users.noreply.github.com>
Co-authored-by: DarkSky <25152247+darkskygit@users.noreply.github.com>
Co-authored-by: Qi <474021214@qq.com>
Co-authored-by: danielchim <kahungchim@gmail.com>

packages/component/src/theme/fonts.css

@@ -4,7 +4,7 @@
 @font-face {
   font-family: 'Inter';
   font-display: swap;
-  src: url(/fonts/inter/Inter-VariableFont_slnt,wght.ttf);
+  src: url(../fonts/inter/Inter-VariableFont_slnt,wght.ttf);
 }
 
 /*
@@ -14,14 +14,14 @@
   font-family: 'Source Code Pro';
   font-style: normal;
   font-display: swap;
-  src: url(/fonts/source-code-pro/SourceCodePro-VariableFont_wght.ttf);
+  src: url(../fonts/source-code-pro/SourceCodePro-VariableFont_wght.ttf);
 }
 
 @font-face {
   font-family: 'Source Code Pro';
   font-style: italic;
   font-display: swap;
-  src: url(/fonts/source-code-pro/SourceCodePro-Italic-VariableFont_wght.ttf);
+  src: url(../fonts/source-code-pro/SourceCodePro-Italic-VariableFont_wght.ttf);
 }
 
 /*
@@ -32,7 +32,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(/fonts/kalam/Kalam-Regular.ttf);
+  src: url(../fonts/kalam/Kalam-Regular.ttf);
 }
 
 @font-face {
@@ -40,7 +40,7 @@
   font-style: normal;
   font-weight: 300;
   font-display: swap;
-  src: url(/fonts/kalam/Kalam-Light.ttf);
+  src: url(../fonts/kalam/Kalam-Light.ttf);
 }
 
 @font-face {
@@ -48,7 +48,7 @@
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url(/fonts/kalam/Kalam-Bold.ttf);
+  src: url(../fonts/kalam/Kalam-Bold.ttf);
 }
 
 /*
@@ -59,7 +59,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(/fonts/source-serif-4/SourceSerif4-Regular.ttf);
+  src: url(../fonts/source-serif-4/SourceSerif4-Regular.ttf);
 }
 
 @font-face {
@@ -67,7 +67,7 @@
   font-style: italic;
   font-weight: 400;
   font-display: swap;
-  src: url(/fonts/source-serif-4/SourceSerif4-Italic.ttf);
+  src: url(../fonts/source-serif-4/SourceSerif4-Italic.ttf);
 }
 
 @font-face {
@@ -75,7 +75,7 @@
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url(/fonts/source-serif-4/SourceSerif4-Medium.ttf);
+  src: url(../fonts/source-serif-4/SourceSerif4-Medium.ttf);
 }
 
 @font-face {
@@ -83,7 +83,7 @@
   font-style: italic;
   font-weight: 500;
   font-display: swap;
-  src: url(/fonts/source-serif-4/SourceSerif4-MediumItalic.ttf);
+  src: url(../fonts/source-serif-4/SourceSerif4-MediumItalic.ttf);
 }
 
 @font-face {
@@ -91,7 +91,7 @@
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url(/fonts/source-serif-4/SourceSerif4-SemiBold.ttf);
+  src: url(../fonts/source-serif-4/SourceSerif4-SemiBold.ttf);
 }
 
 @font-face {
@@ -99,7 +99,7 @@
   font-style: italic;
   font-weight: 600;
   font-display: swap;
-  src: url(/fonts/source-serif-4/SourceSerif4-SemiBoldItalic.ttf);
+  src: url(../fonts/source-serif-4/SourceSerif4-SemiBoldItalic.ttf);
 }
 
 @font-face {
@@ -107,7 +107,7 @@
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url(/fonts/source-serif-4/SourceSerif4-Bold.ttf);
+  src: url(../fonts/source-serif-4/SourceSerif4-Bold.ttf);
 }
 
 @font-face {
@@ -115,7 +115,7 @@
   font-style: italic;
   font-weight: 700;
   font-display: swap;
-  src: url(/fonts/source-serif-4/SourceSerif4-BoldItalic.ttf);
+  src: url(../fonts/source-serif-4/SourceSerif4-BoldItalic.ttf);
 }
 
 /*
@@ -126,7 +126,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(/fonts/space-mono/SpaceMono-Regular.ttf);
+  src: url(../fonts/space-mono/SpaceMono-Regular.ttf);
 }
 
 @font-face {
@@ -134,7 +134,7 @@
   font-style: italic;
   font-weight: 400;
   font-display: swap;
-  src: url(/fonts/space-mono/SpaceMono-Italic.ttf);
+  src: url(../fonts/space-mono/SpaceMono-Italic.ttf);
 }
 
 @font-face {
@@ -142,7 +142,7 @@
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url(/fonts/space-mono/SpaceMono-Bold.ttf);
+  src: url(../fonts/space-mono/SpaceMono-Bold.ttf);
 }
 
 @font-face {
@@ -150,5 +150,5 @@
   font-style: italic;
   font-weight: 700;
   font-display: swap;
-  src: url(/fonts/space-mono/SpaceMono-BoldItalic.ttf);
+  src: url(../fonts/space-mono/SpaceMono-BoldItalic.ttf);
 }

packages/component/src/theme/global.css

@@ -1,11 +1,13 @@
 @import 'react-datepicker/dist/react-datepicker.css';
 @import './fonts.css';
+
 * {
   -webkit-overflow-scrolling: touch;
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
   box-sizing: border-box;
   /*transition: all 0.1s;*/
 }
+
 html,
 body,
 h1,
@@ -40,6 +42,7 @@ menu {
   margin: 0;
   padding: 0;
 }
+
 header,
 footer,
 section,
@@ -54,15 +57,18 @@ menu,
 details {
   display: block;
 }
+
 table {
   border-collapse: collapse;
   border-spacing: 0;
 }
+
 caption,
 th {
   text-align: left;
   font-weight: normal;
 }
+
 html,
 body,
 fieldset,
@@ -71,6 +77,7 @@ iframe,
 abbr {
   border: 0;
 }
+
 i,
 cite,
 em,
@@ -79,13 +86,16 @@ address,
 dfn {
   font-style: normal;
 }
+
 [hidefocus],
 summary {
   outline: 0;
 }
+
 li {
   list-style: none;
 }
+
 h1,
 h2,
 h3,
@@ -95,32 +105,39 @@ h6,
 small {
   font-size: 100%;
 }
+
 sup,
 sub {
   font-size: 83%;
 }
+
 pre,
 code,
 kbd,
 samp {
   font-family: inherit;
 }
+
 q:before,
 q:after {
   content: none;
 }
+
 textarea {
   overflow: auto;
   resize: none;
 }
+
 label,
 summary {
   cursor: default;
 }
+
 a,
 button {
   cursor: pointer;
 }
+
 h1,
 h2,
 h3,
@@ -131,6 +148,7 @@ strong,
 b {
   font-weight: bold;
 }
+
 del,
 ins,
 u,
@@ -139,6 +157,7 @@ a,
 a:hover {
   text-decoration: none;
 }
+
 body,
 textarea,
 input,
@@ -150,9 +169,9 @@ legend {
   outline: 0;
   border: 0;
   font-size: var(--affine-font-base);
-  line-height: var(--affine-line-height);
   font-family: var(--affine-font-family);
 }
+
 body {
   background: transparent;
   overflow: hidden;
@@ -161,9 +180,12 @@ body {
 input {
   border: none;
   -moz-appearance: none;
-  -webkit-appearance: none; /*Solve the rounded corners of buttons on ios*/
-  border-radius: 0; /*Solve the problem of rounded corners of the input box on ios*/
-  outline: medium; /*Remove the default yellow border on mouse click*/
+  -webkit-appearance: none;
+  /*Solve the rounded corners of buttons on ios*/
+  border-radius: 0;
+  /*Solve the problem of rounded corners of the input box on ios*/
+  outline: medium;
+  /*Remove the default yellow border on mouse click*/
   background-color: transparent;
   caret-color: var(--affine-primary-color);
 }
@@ -183,17 +205,24 @@ input[type='number']::-webkit-outer-spin-button {
 }
 
 * {
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE 10+ */
+  scrollbar-width: none;
+  /* Firefox */
+  -ms-overflow-style: none;
+  /* IE 10+ */
 }
+
 ::-webkit-scrollbar {
-  width: 0; /* Chrome Safari */
+  width: 0;
+  /* Chrome Safari */
   height: 0;
 }
+
 .affine-doc-viewport::-webkit-scrollbar {
-  width: 20px; /* Chrome Safari */
+  width: 20px;
+  /* Chrome Safari */
   height: 20px;
 }
+
 .affine-doc-viewport::-webkit-scrollbar-thumb {
   border-radius: 12px;
   background-clip: padding-box;
@@ -202,13 +231,16 @@ input[type='number']::-webkit-outer-spin-button {
   border-color: transparent;
   transition: all 0.2s;
 }
+
 .affine-doc-viewport:hover::-webkit-scrollbar-thumb {
   background-color: var(--affine-divider-color);
 }
+
 .affine-doc-viewport:hover::-webkit-scrollbar-thumb:hover {
   background-color: var(--affine-icon-color);
   border-width: 5px;
 }
+
 .editor-wrapper {
   position: relative;
   padding-right: 0;
@@ -233,6 +265,7 @@ input[type='number']::-webkit-outer-spin-button {
 affine-block-hub {
   position: unset !important;
 }
+
 .block-hub-menu-container {
   position: unset !important;
 }
@@ -260,3 +293,7 @@ textarea,
 [role='button'] {
   -webkit-app-region: no-drag;
 }
+
+#webpack-dev-server-client-overlay {
+  -webkit-app-region: no-drag;
+}

packages/component/src/theme/theme.css.ts

@@ -5,7 +5,6 @@ globalStyle('body', {
   color: 'var(--affine-text-primary-color)',
   fontFamily: 'var(--affine-font-family)',
   fontSize: 'var(--affine-font-base)',
-  lineHeight: 'var(--affine-font-height)',
 });
 
 globalStyle('html', {