✨ feat: Add global styles for font, colors, and scrollbar customization

- Remove "GlobalStyle.ts" file
- Add "antdOverride.ts", "global.ts", and "index.ts" files
- "antdOverride.ts" contains overrides for Ant Design components
- "global.ts" contains global CSS styles for font, colors, and scrollbar
- "index.ts" exports the combined styles from "antdOverride.ts" and "global.ts" as a global style component.

src/ThemeProvider/GlobalStyle/antdOverride.ts

@@ -0,0 +1,24 @@
+import { Theme, css } from 'antd-style';
+
+export default (token: Theme) => css`
+  .ant-tooltip-inner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    min-height: unset;
+    padding: 4px 8px;
+
+    color: ${token.colorBgLayout};
+
+    background-color: ${token.colorText};
+    border-radius: ${token.borderRadiusSM}px;
+  }
+
+  .ant-tooltip-arrow {
+    &::before,
+    &::after {
+      background: ${token.colorText};
+    }
+  }
+`;

src/ThemeProvider/GlobalStyle/global.ts

@@ -0,0 +1,101 @@
+import { Theme, css } from 'antd-style';
+
+export default (token: Theme) => css`
+  html,
+  body {
+    --font-settings: 'cv01', 'tnum', 'kern';
+    --font-variations: 'opsz' auto, tabular-nums;
+
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    margin: 0;
+    padding: 0;
+
+    font-family: ${token.fontFamily};
+    font-size: ${token.fontSize}px;
+    font-feature-settings: var(--font-settings);
+    font-variation-settings: var(--font-variations);
+    line-height: 1;
+    color: ${token.colorTextBase};
+    text-size-adjust: none;
+    text-rendering: optimizelegibility;
+    vertical-align: baseline;
+
+    color-scheme: dark;
+    background-color: ${token.colorBgLayout};
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-overflow-scrolling: touch;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  body {
+    overflow-x: hidden;
+    height: 100vh;
+  }
+
+  #root {
+    min-height: 100vh;
+  }
+
+  code {
+    font-family: ${token.fontFamilyCode} !important;
+
+    span {
+      font-family: ${token.fontFamilyCode} !important;
+    }
+  }
+
+  p {
+    text-align: justify;
+    word-wrap: break-word;
+  }
+
+  ::selection {
+    color: #000;
+    background: ${token.yellow9};
+
+    -webkit-text-fill-color: unset !important;
+  }
+
+  * {
+    box-sizing: border-box;
+    vertical-align: baseline;
+  }
+
+  @media only screen and (min-width: 574px) {
+    * {
+      ::-webkit-scrollbar {
+        cursor: pointer;
+        width: 4px;
+        height: 4px;
+        background-color: transparent;
+      }
+
+      ::-webkit-scrollbar-thumb {
+        cursor: pointer;
+        background-color: transparent;
+        border-radius: 2px;
+        transition: background-color 500ms ${token.motionEaseOut};
+
+        &:hover {
+          background-color: ${token.colorText};
+        }
+      }
+
+      ::-webkit-scrollbar-corner {
+        display: none;
+        width: 0;
+        height: 0;
+      }
+
+      &:hover {
+        ::-webkit-scrollbar-thumb {
+          background-color: ${token.colorFill};
+        }
+      }
+    }
+  }
+`;

src/ThemeProvider/GlobalStyle/index.ts

@@ -0,0 +1,8 @@
+import { createGlobalStyle } from 'antd-style';
+
+import antdOverride from './antdOverride';
+import global from './global';
+
+const GlobalStyle = createGlobalStyle(({ theme }) => [global(theme), antdOverride(theme)]);
+
+export default GlobalStyle;