refactor: move styles to seperate folder

app.ts

@@ -1,6 +1,6 @@
 import app from "ags/gtk4/app";
 import GLib from "gi://GLib";
-import style from "./style.scss";
+import style from "./style/main.scss";
 import windows from "./windows";
 
 const icons = `${GLib.get_user_config_dir()}/tpanel/assets/icons`;

style.scss

@@ -1,20 +0,0 @@
-$accent: #54cdb3;
-$fg-color: #fff;
-$bg-color: #0e0e0e;
-$inactive-color: #252525;
-$rounded: 8px;
-$font-size: 1rem;
-
-* {
-  all: unset;
-  font-family: FiraCode Nerd Font Bold;
-}
-
-// bar
-@import "./widgets/bar/style.scss";
-
-// launcher
-@import "./widgets/launcher/style.scss";
-
-// notifications
-@import "./widgets/notifications/style.scss";

style/_bar.scss

@@ -1,3 +1,4 @@
+@use "./_variable.scss" as *;
 @use "sass:math";
 @use "sass:list";
 

style/_base.scss

@@ -0,0 +1,4 @@
+* {
+  all: unset;
+  font-family: FiraCode Nerd Font Bold;
+}

style/_launcher.scss

@@ -1,3 +1,5 @@
+@use "./_variable.scss" as *;
+
 window.launcher {
   background: $bg-color;
   border-radius: $rounded;

style/_notification.scss

@@ -1,3 +1,4 @@
+@use "./_variable.scss" as *;
 @use "sass:math";
 @use "sass:list";
 
@@ -15,7 +16,7 @@ window.notifications {
       border: 1px solid rgba(red, 0.5);
     }
 
-    &.low {
+    &.normal {
       border: 1px solid rgba(yellow, 0.5);
     }
 

style/_variable.scss

@@ -0,0 +1,6 @@
+$accent: #54cdb3;
+$fg-color: #fff;
+$bg-color: #0e0e0e;
+$inactive-color: #252525;
+$rounded: 8px;
+$font-size: 1rem;

style/main.scss

@@ -0,0 +1,11 @@
+// base
+@use "./_base.scss";
+
+// bar
+@use "./_bar.scss";
+
+// launcher
+@use "./_launcher.scss";
+
+// notifications
+@use "./_notification.scss";