Migrate styles from yorkie-ui-old (#163)

src/App.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { useEffect } from 'react';
-import './app.scss';
+import './assets/styles/style.scss'
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import {
   PublicRoute,

src/assets/styles/base/_color.scss

@@ -0,0 +1,86 @@
+:root {
+  --gray-900: #332e2b;
+  --gray-800: #514c49;
+  --gray-700: #6e6966;
+  --gray-600: #807b78;
+  --gray-500: #a6a19e;
+  --gray-400: #c2bdba;
+  --gray-300: #e2dedb;
+  --gray-200: #efeceb;
+  --gray-100: #f5f3f1;
+  --gray-50: #faf8f6;
+  --gray-000: #fefdfb;
+  --orange-dark: #f27b2f;
+  --orange-0: #fc8539;
+  --orange-light: #fda36a;
+  --orange-alpha-dark: rgb(242 123 47 / 40%);
+  --orange-alpha-0: rgb(252 133 57 / 32%);
+  --orange-alpha-light: rgb(253 163 106 / 24%);
+  --yellow-dark: #f5b103;
+  --yellow-0: #fdc433;
+  --yellow-light: #fed366;
+  --yellow-alpha-dark: rgb(245 177 3 / 40%);
+  --yellow-alpha-0: rgb(253 196 51 / 32%);
+  --yellow-alpha-light: rgb(254 211 102 / 24%);
+  --green-dark: #10b266;
+  --green-0: #23c176;
+  --green-light: #5ad198;
+  --green-alpha-dark: rgb(16 178 102 / 40%);
+  --green-alpha-0: rgb(35 193 118 / 32%);
+  --green-alpha-light: rgb(90 209 152 / 24%);
+  --blue-dark: #208aed;
+  --blue-0: #3c9af1;
+  --blue-light: #6db4f5;
+  --blue-alpha-dark: rgb(26 133 232 / 40%);
+  --blue-alpha-0: rgb(60 154 241 / 32%);
+  --blue-alpha-light: rgb(109 180 245 / 24%);
+  --red-dark: #e93d47;
+  --red-0: #f44954;
+  --red-light: #f7777e;
+  --red-alpha-dark: rgb(233 61 71 / 40%);
+  --red-alpha-0: rgb(244 73 84 / 32%);
+  --red-alpha-light: rgb(247 119 126 / 24%);
+  --purple-dark: #764af3;
+  --purple-0: #855cf9;
+  --purple-light: #a385fb;
+  --purple-alpha-dark: rgb(118 74 243 / 40%);
+  --purple-alpha-0: rgb(133 92 249 / 32%);
+  --purple-alpha-light: rgb(163 133 251 / 24%);
+}
+
+.darkmode {
+  --gray-900: #fefdfb;
+  --gray-800: #faf8f6;
+  --gray-700: #f5f3f1;
+  --gray-600: #efeceb;
+  --gray-500: #e2dedb;
+  --gray-300: #a6a19e;
+  --gray-200: #807b78;
+  --gray-100: #6e6966;
+  --gray-50: #514c49;
+  --gray-000: #332e2b;
+  --orange-dark: #fda36a;
+  --orange-light: #f27b2f;
+  --orange-alpha-dark: rgb(253 163 106 / 24%);
+  --orange-alpha-light: rgb(242 123 47 / 40%);
+  --yellow-dark: #fed366;
+  --yellow-light: #f5b103;
+  --yellow-alpha-dark: rgb(254 211 102 / 24%);
+  --yellow-alpha-light: rgb(245 177 3 / 40%);
+  --green-dark: #5ad198;
+  --green-light: #10b266;
+  --green-alpha-dark: rgb(90 209 152 / 24%);
+  --green-alpha-light: rgb(16 178 102 / 40%);
+  --blue-dark: #6db4f5;
+  --blue-light: #208aed;
+  --blue-alpha-dark: rgb(109 180 245 / 24%);
+  --blue-alpha-light: rgb(26 133 232 / 40%);
+  --red-dark: #f7777e;
+  --red-light: #e93d47;
+  --red-alpha-dark: rgb(247 119 126 / 24%);
+  --red-alpha-light: rgb(233 61 71 / 40%);
+  --purple-dark: #a385fb;
+  --purple-light: #764af3;
+  --purple-alpha-dark: rgb(163 133 251 / 24%);
+  --purple-alpha-light: rgb(118 74 243 / 40%);
+}