feat(agsV2): add styling

nixosModules/ags/v2/app.ts

@@ -1,6 +1,6 @@
 import { App } from 'astal';
 
-import style from 'inline:./style.scss';
+import style from './style.scss';
 
 import Bar from './widgets/bar/wim';
 

nixosModules/ags/v2/style.scss

@@ -1 +1,47 @@
+$accent_color: #bd93f9;
+$accent_bg_color: #bd93f9;
+$accent_fg_color: #f8f8f2;
+$destructive_color: #ff5555;
+$destructive_bg_color: #ff5555;
+$destructive_fg_color: #f8f8f2;
+$success_color: #50fa7b;
+$success_bg_color: #50fa7b;
+$success_fg_color: #f8f8f2;
+$warning_color: #f1fa8c;
+$warning_bg_color: #f1fa8c;
+$warning_fg_color: rgba(0, 0, 0, 0.8);
+$error_color: #ff5555;
+$error_bg_color: #ff5555;
+$error_fg_color: #f8f8f2;
+$window_bg_color: #282a36;
+$window_fg_color: #f8f8f2;
+$view_bg_color: #282a36;
+$view_fg_color: #f8f8f2;
+$headerbar_bg_color: #282a36;
+$headerbar_fg_color: #f8f8f2;
+$headerbar_border_color: #ffffff;
+$headerbar_backdrop_color: $window_bg_color;
+$headerbar_shade_color: rgba(0, 0, 0, 0.36);
+$card_bg_color: rgba(255, 255, 255, 0.08);
+$card_fg_color: #f8f8f2;
+$card_shade_color: rgba(0, 0, 0, 0.36);
+$dialog_bg_color: #282a36;
+$dialog_fg_color: #f8f8f2;
+$popover_bg_color: #282a36;
+$popover_fg_color: #f8f8f2;
+$shade_color: #383838;
+$scrollbar_outline_color: rgba(0, 0, 0, 0.5);
 
+window {
+    all: unset;
+}
+
+.widget {
+    margin: 10px;
+    padding: 5px;
+    border-radius: 7px;
+    background-color: rgba($window_bg_color, 1);
+    box-shadow: 8px 8px rgba($accent_color, 1);
+}
+
+@import 'widgets/bar/style.scss';

nixosModules/ags/v2/widgets/bar/items/battery.tsx

@@ -10,22 +10,23 @@ const LOW_BATT = 20;
 const SPACING = 5;
 
 export default () => (
-    <box className="toggle-off battery">
+    <box className="bar-item battery">
         <icon
-            class_name="battery-indicator"
             icon={bind(Battery, 'batteryIconName')}
 
             setup={(self: Widget.Icon) => {
                 Battery.connect('notify::percentage', () => {
+                    const percent = Math.round(Battery.get_percentage() * 100);
+
                     self.toggleClassName('charging', Battery.get_charging());
-                    self.toggleClassName('charged', Battery.get_percentage() === 100);
-                    self.toggleClassName('low', Battery.get_percentage() < LOW_BATT);
+                    self.toggleClassName('charged', percent === 100);
+                    self.toggleClassName('low', percent < LOW_BATT);
                 });
             }}
         />
 
         <Separator size={SPACING} />
 
-        <label label={bind(Battery, 'percentage').as((v) => `${v}%`)} />
+        <label label={bind(Battery, 'percentage').as((v) => `${Math.round(v * 100)}%`)} />
     </box>
 );

nixosModules/ags/v2/widgets/bar/style.scss

@@ -0,0 +1,19 @@
+.bar {
+    .bar-item {
+        padding: 5px;
+        border-radius: 7px;
+        background-color: darken($window_bg_color, 3%);
+        font-size: 20px;
+        min-height: 30px;
+
+        .battery icon {
+            &.charging {
+                color: green;
+            }
+
+            &.low {
+                color: red;
+            }
+        }
+    }
+}

nixosModules/ags/v2/widgets/bar/wim.tsx

@@ -15,9 +15,7 @@ export default () => {
                 Astal.WindowAnchor.RIGHT
             }
         >
-            <box
-                className="Bar"
-            >
+            <box className="bar widget">
                 <Battery />
             </box>
         </BarRevealer>