sync form work

css/variables/definition.scss

@@ -1,13 +1,37 @@
-// color
-$borderColor: #d9d9d9;
-$focusColor: #b9b9b9;
-$disabledBgColor: #e9e9e9;
-$disabledForeColor: #aaa;
-$hoverColor: #eee;
-$bgColor: #fff;
-$foreColor: #201f1e;
-
 // dimension
 $mediumSize: .875rem; // 14px
 $smallSize: .8125rem; // 13px
-$tinySize: .75rem; // 12px
+$tinySize: .75rem; // 12px
+
+// animation
+@keyframes loading-spinner {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(359deg);
+    }
+}
+
+:root {
+    --color: #201f1e;
+    --red-color: red;
+    --bg-color: #fff;
+    --title-color: #fff;
+    --title-bg-color: rgb(68, 114, 196);
+    --border-color: #d9d9d9;
+    --focus-color: #b9b9b9;
+    --disabled-bg-color: #e9e9e9;
+    --disabled-color: #aaa;
+    --box-color: #999898;
+    --disabled-box-color: #d9d9d9;
+    --hover-color: #eee;
+    --link-color: #1890ff;
+    --primary-color: rgb(123,28,33);
+    --loading-bg-color: hsla(0, 0%, 100%, .4);
+    --loading-fore-color: rgba(0, 0, 0, .2);
+
+    --border-radius: 2px;
+    --text-indent: 4px;
+}