feat: split scss and rename widget folder to widgets

style.scss

@@ -1,6 +1,3 @@
-@use "sass:math";
-@use "sass:list";
-
 $accent: #ebdbb2;
 $fg-color: #ebdbb2;
 $bg-color: #282828;
@@ -8,118 +5,8 @@ $inactive-color: #807966;
 $rounded: 8px;
 $font-size: 1.3rem;
 
-window.Bar {
+// bar
-  background: $bg-color;
+@import "./widgets/bar/style.scss";
-  color: $fg-color;
-  margin: 5px;
-  border-radius: $rounded;
-  padding: 10px;
 
-  .launcher {
+// app-launcher
-    background-color: $inactive-color;
+@import "./widgets/app-launcher/style.scss";
-    border-radius: $rounded;
-    transition: all 0.15s ease-out;
-    padding: 0px;
-    margin: 0px;
-
-    &:hover {
-      background-color: $bg-color;
-    }
-  }
-
-  .workspace-container {
-    background-color: $bg-color;
-    color: $fg-color;
-    border-radius: $rounded;
-
-    .workspace-button {
-      padding: 0px;
-      border: 0px;
-      margin: 2px;
-      background-color: $inactive-color;
-      min-height: 1.3rem;
-      min-width: 1.3rem;
-      border-radius: calc(list.nth(8px, 1) * 1.5);
-      transition: min-width 0.15s ease-out;
-
-      &:hover {
-        background-color: $fg-color;
-        &.occupied {
-          background-color: $fg-color;
-        }
-      }
-
-      &.active {
-        min-width: 3.5rem;
-        min-height: 1.3rem;
-        background-color: $accent;
-      }
-
-      &.occupied {
-        background-color: $accent;
-        &.active {
-          background-color: $accent;
-        }
-      }
-    }
-  }
-
-  .focused-client {
-    font-size: $font-size;
-    font-weight: 900;
-  }
-
-  .tailscale {
-    font-size: $font-size;
-    font-weight: 900;
-    color: $bg-color;
-    background-color: $inactive-color;
-    border-radius: $rounded;
-    padding: 0px 10px;
-  }
-
-  .tray {
-    font-size: $font-size;
-    font-weight: 900;
-    color: #fff;
-    background-color: $inactive-color;
-    border-radius: $rounded;
-    padding: 0px 10px;
-  }
-
-  .battery {
-    font-size: $font-size;
-    font-weight: 900;
-    color: $bg-color;
-    background-color: $inactive-color;
-    border-radius: $rounded;
-    padding: 0px 10px;
-  }
-
-  .time {
-    font-size: $font-size;
-    font-weight: 900;
-    color: $bg-color;
-    background-color: $inactive-color;
-    border-radius: $rounded;
-    padding: 0px 10px;
-  }
-}
-
-window.app-launcher {
-  background: $bg-color;
-  border-radius: $rounded;
-  padding: 10px;
-
-  .app-list {
-    background: $bg-color;
-  }
-
-  .app-button {
-    border-radius: $rounded;
-  }
-
-  .name {
-    color: $fg-color;
-  }
-}

widgets/app-launcher/style.scss

@@ -0,0 +1,17 @@
+window.app-launcher {
+  background: $bg-color;
+  border-radius: $rounded;
+  padding: 10px;
+
+  .app-list {
+    background: $bg-color;
+  }
+
+  .app-button {
+    border-radius: $rounded;
+  }
+
+  .name {
+    color: $fg-color;
+  }
+}

widgets/bar/style.scss

@@ -0,0 +1,100 @@
+@use "sass:math";
+@use "sass:list";
+
+window.Bar {
+  background: $bg-color;
+  color: $fg-color;
+  margin: 5px;
+  border-radius: $rounded;
+  padding: 10px;
+
+  .launcher {
+    background-color: $inactive-color;
+    border-radius: $rounded;
+    transition: all 0.15s ease-out;
+    padding: 0px;
+    margin: 0px;
+
+    &:hover {
+      background-color: $bg-color;
+    }
+  }
+
+  .workspace-container {
+    background-color: $bg-color;
+    color: $fg-color;
+    border-radius: $rounded;
+
+    .workspace-button {
+      padding: 0px;
+      border: 0px;
+      margin: 2px;
+      background-color: $inactive-color;
+      min-height: 1.3rem;
+      min-width: 1.3rem;
+      border-radius: calc(list.nth(8px, 1) * 1.5);
+      transition: min-width 0.15s ease-out;
+
+      &:hover {
+        background-color: $fg-color;
+        &.occupied {
+          background-color: $fg-color;
+        }
+      }
+
+      &.active {
+        min-width: 3.5rem;
+        min-height: 1.3rem;
+        background-color: $accent;
+      }
+
+      &.occupied {
+        background-color: $accent;
+        &.active {
+          background-color: $accent;
+        }
+      }
+    }
+  }
+
+  .focused-client {
+    font-size: $font-size;
+    font-weight: 900;
+  }
+
+  .tailscale {
+    font-size: $font-size;
+    font-weight: 900;
+    color: $bg-color;
+    background-color: $inactive-color;
+    border-radius: $rounded;
+    padding: 0px 10px;
+  }
+
+  .tray {
+    font-size: $font-size;
+    font-weight: 900;
+    color: #fff;
+    background-color: $inactive-color;
+    border-radius: $rounded;
+    padding: 0px 10px;
+  }
+
+  .battery {
+    font-size: $font-size;
+    font-weight: 900;
+    color: $bg-color;
+    background-color: $inactive-color;
+    border-radius: $rounded;
+    padding: 0px 10px;
+  }
+
+  .time {
+    font-size: $font-size;
+    font-weight: 900;
+    color: $bg-color;
+    background-color: $inactive-color;
+    border-radius: $rounded;
+    padding: 0px 10px;
+  }
+}

windows.ts

@@ -1,4 +1,4 @@
-import { Bar } from "./widget/bar";
+import { Bar } from "./widgets/bar";
-import { AppLauncher } from "./widget/app-launcher";
+import { AppLauncher } from "./widgets/app-launcher";
 
 export default [Bar, AppLauncher];