Defined 3 sides of the panel.

Added placeholder css.
Minor changes to panel definition.

eww/eww.css

@@ -111,4 +111,18 @@ tooltip {
   background-color: rgba(128, 128, 128, 0.5);
 }
 
+/* Panel */
+.panel_widg {
+  background-color: rgba(128, 128, 128, 0.5);
+}
+.panel_widg .panel_left {
+  background-color: rgba(221, 128, 128, 0.856);
+}
+.panel_widg .panel_cen {
+  background-color: rgba(209, 188, 95, 0.849);
+}
+.panel_widg .panel_right {
+  background-color: rgba(96, 211, 196, 0.863);
+}
+
 /*# sourceMappingURL=eww.css.map */

eww/eww.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["scss/common/_common.scss","scss/tooltip/_tooltip.scss","scss/colors/_glassy.scss","scss/osd/_osd.scss","scss/osd/_bat.scss","scss/osd/_bri.scss","scss/osd/_vol.scss","scss/dock/_dock.scss"],"names":[],"mappings":"AAAA;AACA;EACI;;;ACFJ;AAGA;EACI;EACA,kBCDS;EDET,OCDY;;;ACDhB;AAKI;EACH,eAJI;EAKJ,kBDHY;;ACMT;EAEH;EACA,kBDNc;;ACOd;EAEI,eAdA;;AAgBJ;EAEI;;AClBA;EACH,kBFMyB;;AEJtB;EACH,kBFI6B;;AEF1B;EACH,kBFE0B;;AEAvB;EACH;;AAEG;EACH,kBFF0B;;AEIvB;EACH,kBFJsB;;AEMnB;EACH,kBFNwB;;AEQrB;EACH,kBFRuB;;AEUpB;EACH,kBFVuB;;AGfpB;EACH,kBHyBsB;;AGvBnB;EACH,kBHuBsB;;AGrBnB;EACH,kBHqBuB;;AGnBpB;EACH,kBHmBuB;;AGjBpB;EACH,kBHiBuB;;AI9BpB;EACH,kBJgBsB;;AIdnB;EACH,kBJesB;;AIbnB;EACH,kBJasB;;AIXnB;EACH,kBJWuB;;AITpB;EACH,kBJSuB;;AIPpB;EACH,kBJOuB;;ACErB;EAEH,cA3BI;EA4BJ;EACA;;AAGG;EAEH;EACA;EACA;;;AIzCD;AAEA;EACI;EACA,kBLoCU;;AKnCV;EACI;EACA;EACA;EACA,OLiCc;;AK/Bd;EACI,kBL6BM","file":"eww.css"}
+{"version":3,"sourceRoot":"","sources":["scss/common/_common.scss","scss/tooltip/_tooltip.scss","scss/colors/_glassy.scss","scss/osd/_osd.scss","scss/osd/_bat.scss","scss/osd/_bri.scss","scss/osd/_vol.scss","scss/dock/_dock.scss","scss/panel/_panel.scss"],"names":[],"mappings":"AAAA;AACA;EACI;;;ACFJ;AAGA;EACI;EACA,kBCDS;EDET,OCDY;;;ACDhB;AAKI;EACH,eAJI;EAKJ,kBDHY;;ACMT;EAEH;EACA,kBDNc;;ACOd;EAEI,eAdA;;AAgBJ;EAEI;;AClBA;EACH,kBFMyB;;AEJtB;EACH,kBFI6B;;AEF1B;EACH,kBFE0B;;AEAvB;EACH;;AAEG;EACH,kBFF0B;;AEIvB;EACH,kBFJsB;;AEMnB;EACH,kBFNwB;;AEQrB;EACH,kBFRuB;;AEUpB;EACH,kBFVuB;;AGfpB;EACH,kBHyBsB;;AGvBnB;EACH,kBHuBsB;;AGrBnB;EACH,kBHqBuB;;AGnBpB;EACH,kBHmBuB;;AGjBpB;EACH,kBHiBuB;;AI9BpB;EACH,kBJgBsB;;AIdnB;EACH,kBJesB;;AIbnB;EACH,kBJasB;;AIXnB;EACH,kBJWuB;;AITpB;EACH,kBJSuB;;AIPpB;EACH,kBJOuB;;ACErB;EAEH,cA3BI;EA4BJ;EACA;;AAGG;EAEH;EACA;EACA;;;AIzCD;AAEA;EACI;EACA,kBLoCU;;AKnCV;EACI;EACA;EACA;EACA,OLiCc;;AK/Bd;EACI,kBL6BM;;;AMzClB;AAEA;EACI,kBN0CW;;AMxCX;EACI,kBNwCa;;AMtCjB;EACI,kBNsCW;;AMpCf;EACI,kBNoCY","file":"eww.css"}

eww/eww.yuck

@@ -2,3 +2,4 @@
 (include "yuck/test/test-window.yuck")
 (include "yuck/osd/osd_window.yuck")
 (include "yuck/dock/dock_window.yuck")
+(include "yuck/panel/panel_window.yuck")

eww/scss/colors/_glassy.scss

@@ -42,3 +42,9 @@ $c: rgba(245, 40, 145, 0.8);
 $dock_bg_col: rgba(128, 128, 128, 0.5);
 $dock_ico_bg_col: rgba(128, 128, 128, 0.5);
 $dock_ico_fg_def_col: rgba(255, 255, 255, 1);
+
+//Panel
+$panel_bg_col: rgba(128, 128, 128, 0.5);
+$panel_right_bg_col: rgba(221, 128, 128, 0.856);
+$panel_cen_bg_col: rgba(209, 188, 95, 0.849);
+$panel_left_bg_col: rgba(96, 211, 196, 0.863);

eww/scss/eww.scss

@@ -1,7 +1,8 @@
 @use "common/_common.scss";
 @use "tooltip/_tooltip.scss";
 @use "osd/_osd.scss";
-@use "dock/_dock.scss"
+@use "dock/_dock.scss";
+@use "panel/_panel.scss";
 
 
 //@use "colors/_glassy.scss";

eww/scss/panel/_panel.scss

@@ -0,0 +1,16 @@
+@use "../colors/_glassy.scss" as *;
+/* Panel */
+
+.panel_widg {
+    background-color: $panel_bg_col;
+
+    .panel_left {
+        background-color: $panel_right_bg_col;
+    }
+    .panel_cen {
+        background-color: $panel_cen_bg_col;
+    }
+    .panel_right {
+        background-color: $panel_left_bg_col;
+    }
+}

eww/yuck/README.md

@@ -2,7 +2,7 @@
 
 Yuck is the custom language to config EWW. Refer the [official docs](https://elkowar.github.io/eww/configuration.html) for basic config instructions and syntax.  
 
-## Splitting Eww Config  
+## Note: Splitting Eww Config  
 There are 2 ways to specify path while including other `.yuck` files:  
 ### Absolute path:  
 From `/`

eww/yuck/panel/panel_widg.yuck

@@ -2,14 +2,16 @@
 (include "yuck/panel/panel_widg_cen.yuck")
 (include "yuck/panel/panel_widg_left.yuck")
 
-(defwidget panel_widg []
+(defwidget panel_widg [h]
     (centerbox
         :class  "panel_widg"
         :halign "fill"
-        :height 28
+        :height "${h}"
-        :width  1376
+        :width  1366
         :active true
 
-        (children)
+        (panel_left)
+        (panel_cen)
+        (panel_right)
     )
 )

eww/yuck/panel/panel_widg_cen.yuck

@@ -6,6 +6,6 @@
         :width  300
         :active true
 
-        (children)
+        "--panel_cen--"
     )
 )

eww/yuck/panel/panel_widg_left.yuck

@@ -6,6 +6,6 @@
         :width  300
         :active true
 
-        (children)
+        "--panel_left--"
     )
 )

eww/yuck/panel/panel_widg_right.yuck

@@ -6,6 +6,6 @@
         :width  300
         :active true
         
-        (children)
+        "--panel_right--"
     )
 )

eww/yuck/panel/panel_window.yuck

@@ -1,6 +1,6 @@
 (include "yuck/panel/panel_widg.yuck")
 
-(defwindow panel
+(defwindow panel [h]
     :monitor    0
     :windowtype "dock"
     :wm-ignore  true
@@ -12,8 +12,13 @@
             :anchor "top center"
             :x      "0%"
             :y      "0%"
-            :height "2.5%"
+            :height "${h}px"
             :width  "100%"
         )
-    (panel_widg)
+    :reserve
+        (struts
+            :distance   "${h}px"
+            :side       "top"
+        )
+    (panel_widg :h "${h}")
 )