refacor

style.scss

@@ -1,115 +1,2 @@
 // https://gitlab.gnome.org/GNOME/gtk/-/blob/gtk-3-24/gtk/theme/Adwaita/_colors-public.scss
-@use "./widget/modules/Media/Media.scss";
-@use "./widget/modules/Powermenu/PowerMenu.scss";
-
-$fg-color: #{"@theme_fg_color"};
-$bg-color: #{"@theme_bg_color"};
-
-$bg: #212223;
-$fg: #f1f1f1;
-$accent: #{"@theme_accent_color"};
-$radius: 20px;
-
-window.Bar {
-    background: transparent;
-    color: $fg-color;
-    font-weight: bold;
-
-    > centerbox {
-        background: transparent;
-        border-radius: 20px;
-        margin: 2px 5px 0 5px;
-    }
-
-    .Menubutton {
-        all: unset;
-        background-color: black;
-        border-radius: 25px;
-        &:hover label {
-            transition: 300ms;
-            background-color: gray;
-        }
-        label {
-            transition: 300ms;
-            padding: 5px 15px 5px 9px;
-            border-radius: $radius;
-            border: 1pt solid black;
-        }
-    }
-
-    .RoudedBlock {
-        background-color: black;
-        border-radius: 25px;
-        transition: 300ms;
-    }
-
-    .Time {
-        padding: 0 15px;
-    }
-
-    .SysTray {
-        all: unset;
-        border-radius: 25px;
-        background-color: transparent;
-
-        button {
-            all: unset;
-            padding: 5px 7px;
-            border-radius: 25px;
-            border: 1pt solid black;
-            transition: 300ms;
-            &:hover {
-                background-color: gray;
-            }
-        }
-    }
-
-    .Cpu {
-        padding: 0 5px;
-    }
-
-    .Ram {
-        padding: 0 5px;
-    }
-
-    .Storage {
-        padding: 0 15px 0 5px;
-    }
-
-    .Focused {
-        padding: 0 15px 0 5px;
-        transition: 300ms;
-    }
-
-    .Workspaces {
-        button {
-            all: unset;
-            background-color: black;
-            border-radius: 25px;
-
-            &:hover label {
-                background-color: gray;
-                border-color: black;
-                color: white;
-            }
-
-            &:active label {
-                background-color: white;
-                color: black;
-            }
-        }
-
-        label {
-            transition: 300ms;
-            padding: 5px 15px;
-            border-radius: $radius;
-            border: 1pt solid transparent;
-        }
-
-        .focused label {
-            background-color: white;
-            color: black;
-            border-color: $accent;
-        }
-    }
-}
+@use "./widget/Bar.scss";

widget/Bar.scss

@@ -0,0 +1,35 @@
+@use "./widget/modules/modules.scss";
+
+window.Bar {
+    background: transparent;
+    color: #{"@theme_fg_color"};
+    font-weight: bold;
+
+    > centerbox {
+        background: transparent;
+        border-radius: 20px;
+        margin: 2px 5px 0 5px;
+    }
+
+    .Menubutton {
+        all: unset;
+        background-color: black;
+        border-radius: 25px;
+        &:hover label {
+            transition: 300ms;
+            background-color: gray;
+        }
+        label {
+            transition: 300ms;
+            padding: 5px 15px 5px 9px;
+            border-radius: 20px;
+            border: 1pt solid black;
+        }
+    }
+
+    .RoudedBlock {
+        background-color: black;
+        border-radius: 25px;
+        transition: 300ms;
+    }
+}

widget/modules/Cpu/Cpu.scss

@@ -0,0 +1,3 @@
+.Cpu {
+    padding: 0 5px;
+}

widget/modules/FocusedClient/FocusedClient.scss

@@ -0,0 +1,4 @@
+.Focused {
+    padding: 0 15px 0 5px;
+    transition: 300ms;
+}

widget/modules/Ram/Ram.scss

@@ -0,0 +1,3 @@
+.Ram {
+    padding: 0 5px;
+}

widget/modules/Storage/Storage.scss

@@ -0,0 +1,3 @@
+.Storage {
+    padding: 0 15px 0 5px;
+}

widget/modules/SysTray/SysTray.scss

@@ -0,0 +1,16 @@
+.SysTray {
+    all: unset;
+    border-radius: 25px;
+    background-color: transparent;
+
+    button {
+        all: unset;
+        padding: 5px 7px;
+        border-radius: 25px;
+        border: 1pt solid black;
+        transition: 300ms;
+        &:hover {
+            background-color: gray;
+        }
+    }
+}

widget/modules/Time/Time.scss

@@ -0,0 +1,3 @@
+.Time {
+    padding: 0 15px;
+}

widget/modules/Workspaces/Workspaces.scss

@@ -0,0 +1,31 @@
+.Workspaces {
+    button {
+        all: unset;
+        background-color: black;
+        border-radius: 25px;
+
+        &:hover label {
+            background-color: gray;
+            border-color: black;
+            color: white;
+        }
+
+        &:active label {
+            background-color: white;
+            color: black;
+        }
+    }
+
+    label {
+        transition: 300ms;
+        padding: 5px 15px;
+        border-radius: 20px;
+        border: 1pt solid transparent;
+    }
+
+    .focused label {
+        background-color: white;
+        color: black;
+        border-color: #{"@theme_accent_color"};
+    }
+}

widget/modules/export.ts

@@ -1,12 +1,12 @@
 import BatteryLevel from "./Battery";
 import Cpu from "./Cpu/Cpu";
-import FocusedClient from "./FocusedClient";
+import FocusedClient from "./FocusedClient/FocusedClient";
 import PowerMenu from "./Powermenu/PowerMenu";
 import Ram from "./Ram/Ram";
 import Storage from "./Storage/Storage";
-import SysTray from "./SysTray";
-import Time from "./Time";
-import Workspaces from "./Workspaces";
+import SysTray from "./SysTray/SysTray";
+import Time from "./Time/Time";
+import Workspaces from "./Workspaces/Workspaces";
 import Media from "./Media/Media";
 import LauncherButton from "./LauncherButton";
 import PowerMenuButton from "./PowerMenuButton";

widget/modules/modules.scss

@@ -0,0 +1,9 @@
+@use "./Media/Media.scss";
+@use "./Powermenu/PowerMenu.scss";
+@use "./Cpu/Cpu.scss";
+@use "./Ram/Ram.scss";
+@use "./Time/Time.scss";
+@use "./SysTray/SysTray.scss";
+@use "./Storage/Storage.scss";
+@use "./Workspaces/Workspaces.scss";
+@use "./FocusedClient/FocusedClient.scss";