[WIP] HyDE-Waybar.md

Configuration Tree

. 📂 xdg_config/waybar
├── 📄 config.jsonc
├── 📄 includes.json
└── 📂 layouts/
│  ├── 📄 layout-1.jsonc
│  ├── 📄 khing.jsonc
│  ├── 📄 macos.jsonc
└── 📂 menus/
│  ├── 📄 clipboard.xml
│  ├── 📄 dunst-notification.xml
│  ├── 📄 gpuinfo.xml
│  ├── 📄 power.xml
│  ├── 📄 pulseaudio.xml
│  ├── 📄 spotify.xml
└── 📂 modules/
│  ├── 📄 backlight.jsonc
│  ├── 📄 clock.jsonc
│  ├── 📄 cpu.jsonc
│  ├── 📄 custom-cpuinfo.jsonc
│  ├── 📄 hyprland-language.jsonc
│  ├── 📄 idle_inhibitor.jsonc
│  ├── 📄 pulseaudio#microphone.jsonc
│  ├── 📄 pulseaudio.jsonc
│  ├── 📄 tray.json
│  ├── 📄 wlr-taskbar#windows.json
│  ├── 📄 wlr-taskbar.json
├── 📄 style.css
└── 📂 styles/
│  └── 📂 dynamic/
│    ├── 📄 border-radius.css
│    ├── 📄 global.css
│  └── 📂 groups/
│    ├── 📄 leaf-inverse.css
│    ├── 📄 leaf.css
│    ├── 📄 pill-down.css
│    ├── 📄 pill-in.css
│    ├── 📄 pill-left.css
│    ├── 📄 pill-out.css
│    ├── 📄 pill-right.css
│    ├── 📄 pill-up.css
│    ├── 📄 pill.css
│  ├── 📄 layout-1.css
│  ├── 📄 khing.css
│  ├── 📄 macos.css
├── 📄 theme.css
└── 📄 user-style.css

waybar

. 📂 xdg_config_home/waybar
└── 📂 layouts/
└── 📂 menus/
└── 📂 modules/
└── 📂 styles/
├── 📄 theme.css
├── 📄 config.jsonc
├── 📄 includes.json
└── 📄 user-style.css

• config.json

  • this is a copy of a layout configuration. See layouts.
  • a transient file therefore edits must be saved at xdg_config_home/waybar/layouts

• stye.json

  • auto-generated file.
  • style.css imports 3 files:
    • current style/*.css that matches the layout.json. See styles
    • theme.css generated by themes and this can override the selected style.
    • user-style.css is an optional file where you can add you own overrides. You can also test your CSS in here.

• includes.json

  • auto generated list of modules from xdg_config_home/waybar/modules
  • to avoid redundant configurations file we will just store the modules and include it in the config
  • DEPRECATION: This approach will soon be deprecated as upstream waybar supports regex.

• theme.css

  • theme generated file.

modules

└── 📂 modules/
│  ├── 📄 backlight.jsonc
│  ├── 📄 clock.jsonc
│  ├── 📄 cpu.jsonc
│  ├── 📄 custom-cpuinfo.jsonc
│  ├── 📄 hyprland-language.jsonc
│  ├── 📄 idle_inhibitor.jsonc
│  ├── 📄 pulseaudio#microphone.jsonc
│  ├── 📄 pulseaudio.jsonc
│  ├── 📄 tray.json
│  ├── 📄 wlr-taskbar#windows.json
│  ├── 📄 wlr-taskbar.json

• Store all modules in xdg_config_home/waybar/modules.
• Files in here are recursively added as entry in includes.json
• all modules under a specific tree will have the parent/child convention. Where custom/cpuinfo will be converted into custom-cpuinfo. This is used to easily determine the class name in CSS without confusion. example: custom-cpuinfo { padding: 1em; }

layouts

Directory: ./layouts

...
└── 📂 layouts/
│  ├── 📄 layout-1.jsonc
│  ├── 📄 layout-2.jsonc
│  ├── 📄 khing.jsonc
│  ├── 📄 macos.jsonc
│  ├── 📄 ....jsonc 
...

HyDE stores all the ready to use configuration to layouts directory. For css styling of the layouts see styles

styles

Directory: ./styles

└── 📂 styles/
│  ├── 📄 layout-1.css
│  ├── 📄 layout-2.css
│  ├── 📄 khing.css
│  ├── 📄 macos.css
│  ├── 📄 ...*.css 
│  └── 📂 dynamic/
│    ├── 📄 border-radius.css
│    ├── 📄 global.css

The styles are the counterpart of layouts. When choosing a layout, HyDE will try to use the equivalent CSS style by matching the base names e.g. khing.jsonc will use khing.css.

Explicit --config <file> and --style <file> is also supported.

dynamic

dynamic as the name implies, are dynamically modified/generated css files.

• border-radius.css
  - dynamic border radius for the groups.

dynamic border-radius

Circle 100 rounding in hyprland

Squircle 0 rounding in hyprland

Something between 5 rounding in hyprland

Get the Idea?

• global.css - includes the dynamic font-size, and font-family. - This is dynamic so that themes can override these values via the hypr.theme >> $WAYBAR_FONT

menus

Stores all the GTK Object XML files. To correctly manage the files we added the GObject XML files in xdg_confg_home/wayabr/menus

Group class for styling

Contents of ../waybar/styles/groups/ are use for styling the border-radius of the given group. Groups are the combination of modules some call it islands.

In HyDE, to be able to make use of the groups, we can declare modules in a group first:

Example in ~/.config/waybar/layouts/my_config.jsonc

...
{
  "group/pill": {
    "orientation": "inherit",
    "modules": [
    "custom/gpuinfo", 
    "clock"
     ]
  }
}
...

Now we can add the group in the waybar modules:

"modules-center" : [
"group/pill",
"group/pill#tag1"
"group/pill-in",
....
]
}

Styling this is easy as we already group the modules. In this way we can use the group name as the class name

#pill, 
#pill-in,

Note: pill and pill#tag* have a class name of pill. This is waybar convention to enable users add a similar module.

@dieBakterie Updated, let me know what should we add. The manpages for waybar were very good for reference.We should add the linsk as reference. I don't want to repeat what is already in there manpages.

@dieBakterie Updated, let me know what should we add. The manpages for waybar were very good for reference.We should add the linsk as reference. I don't want to repeat what is already in there manpages.

This is really good, now i know exactly how it will work, need to see it in action/some references since it ain't easy to grasp this big project, with all those generated configs...

@dieBakterie https://gist.github.com/kRHYME7/cc93c0ab1e9d3ab80a40f57a6dd8b15c#dynamic-border-radius here.

about the dynamic globals it's just the font.