feat: use fontsource

package.json

@@ -27,8 +27,10 @@
   "dependencies": {
     "@electron-toolkit/preload": "^3.0.0",
     "@electron-toolkit/utils": "^3.0.0",
+    "@fontsource/sn-pro": "5.0.1",
     "@hono/auth-js": "1.0.3",
     "@radix-ui/react-collapsible": "1.0.3",
+    "@radix-ui/react-slot": "1.0.2",
     "@radix-ui/react-tabs": "1.0.4",
     "@radix-ui/react-tooltip": "1.0.7",
     "@tanstack/react-query": "5.29.2",

pnpm-lock.yaml

@@ -14,12 +14,18 @@ importers:
       '@electron-toolkit/utils':
         specifier: ^3.0.0
         version: 3.0.0(electron@29.2.0)
+      '@fontsource/sn-pro':
+        specifier: 5.0.1
+        version: 5.0.1
       '@hono/auth-js':
         specifier: 1.0.3
         version: 1.0.3(@auth/core@0.29.0)(hono@4.2.4)(react@18.2.0)
       '@radix-ui/react-collapsible':
         specifier: 1.0.3
         version: 1.0.3(@types/react-dom@18.2.24)(@types/react@18.2.75)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-slot':
+        specifier: 1.0.2
+        version: 1.0.2(@types/react@18.2.75)(react@18.2.0)
       '@radix-ui/react-tabs':
         specifier: 1.0.4
         version: 1.0.4(@types/react-dom@18.2.24)(@types/react@18.2.75)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -674,6 +680,9 @@ packages:
   '@floating-ui/utils@0.2.1':
     resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==}
 
+  '@fontsource/sn-pro@5.0.1':
+    resolution: {integrity: sha512-Bxx3/qxfadd4Fdjy8xn0kPCaiUf3ma/Kra6+9TmNR/pQhCdAvZtZgSkG8O1Z+3Yt6KE27CuG/OjpAkZ8Bh6VgQ==}
+
   '@hono/auth-js@1.0.3':
     resolution: {integrity: sha512-g4U6oRbsTRnEm7wc5v9VgbCzBr11ef+bFYs7KgWsXt3TfRCGAPuVFaS+q6uFNJsGSBmX56U8nhLPi46gg/zmRQ==}
     engines: {node: '>=18.4.0'}
@@ -4168,6 +4177,8 @@ snapshots:
 
   '@floating-ui/utils@0.2.1': {}
 
+  '@fontsource/sn-pro@5.0.1': {}
+
   '@hono/auth-js@1.0.3(@auth/core@0.29.0)(hono@4.2.4)(react@18.2.0)':
     dependencies:
       '@auth/core': 0.29.0

src/renderer/src/assets/base.css

@@ -5,7 +5,7 @@ body,
   @apply cursor-default;
   @apply select-none;
 
-  font-family: "SNPro", sans-serif;
+  font-family: "SN Pro", sans-serif;
 }
 
 .drag-region {

src/renderer/src/assets/font.css

@@ -1,83 +1,16 @@
-@font-face {
-  font-family: "SNPro";
-  src: url("./font/SNPro-Thin.woff2");
-  font-weight: 100;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "SNPro";
-  src: url("./font/SNPro-ThinItalic.woff2");
-  font-weight: 100;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: "SNPro";
-  src: url("./font/SNPro-Light.woff2");
-  font-weight: 300;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "SNPro";
-  src: url("./font/SNPro-LightItalic.woff2");
-  font-weight: 300;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: "SNPro";
-  src: url("./font/SNPro-Regular.woff2");
-  font-weight: 400;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "SNPro";
-  src: url("./font/SNPro-Italic.woff2");
-  font-weight: 400;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: "SNPro";
-  src: url("./font/SNPro-Medium.woff2");
-  font-weight: 500;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "SNPro";
-  src: url("./font/SNPro-MediumItalic.woff2");
-  font-weight: 500;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: "SNPro";
-  src: url("./font/SNPro-SemiBold.woff2");
-  font-weight: 600;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "SNPro";
-  src: url("./font/SNPro-SemiBoldItalic.woff2");
-  font-weight: 600;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: "SNPro";
-  src: url("./font/SNPro-Bold.woff2");
-  font-weight: 700;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "SNPro";
-  src: url("./font/SNPro-BoldItalic.woff2");
-  font-weight: 700;
-  font-style: italic;
-}
+@import "@fontsource/sn-pro/200-italic.css";
+@import "@fontsource/sn-pro/200.css";
+@import "@fontsource/sn-pro/300-italic.css";
+@import "@fontsource/sn-pro/300.css";
+@import "@fontsource/sn-pro/400-italic.css";
+@import "@fontsource/sn-pro/400.css";
+@import "@fontsource/sn-pro/500-italic.css";
+@import "@fontsource/sn-pro/500.css";
+@import "@fontsource/sn-pro/600-italic.css";
+@import "@fontsource/sn-pro/600.css";
+@import "@fontsource/sn-pro/700-italic.css";
+@import "@fontsource/sn-pro/700.css";
+@import "@fontsource/sn-pro/800-italic.css";
+@import "@fontsource/sn-pro/800.css";
+@import "@fontsource/sn-pro/900-italic.css";
+@import "@fontsource/sn-pro/900.css";