add ironbar

config/hypr/requirements

@@ -6,3 +6,4 @@ grim
 slurp
 swww
 fish
+ironbar-git

config/hypr/themes/base/components/ironbar/ironbar.json

@@ -0,0 +1,66 @@
+{
+    "anchor_to_edges": true,
+    "end": [
+      {
+        "bar": [
+          {
+            "label": "",
+            "name": "power-btn",
+            "on_click": "popup:toggle",
+            "type": "button"
+          }
+        ],
+        "class": "power-menu",
+        "popup": [
+          {
+            "orientation": "vertical",
+            "type": "box",
+            "widgets": [
+              {
+                "label": "Power menu",
+                "name": "header",
+                "type": "label"
+              },
+              {
+                "type": "box",
+                "widgets": [
+                  {
+                    "class": "power-btn",
+                    "label": "<span font-size='40pt'></span>",
+                    "on_click": "!shutdown now",
+                    "type": "button"
+                  },
+                  {
+                    "class": "power-btn",
+                    "label": "<span font-size='40pt'></span>",
+                    "on_click": "!reboot",
+                    "type": "button"
+                  }
+                ]
+              },
+              {
+                "label": "Uptime: {{30000:uptime -p | cut -d ' ' -f2-}}",
+                "name": "uptime",
+                "type": "label"
+              }
+            ]
+          }
+        ],
+        "tooltip": "Up: {{30000:uptime -p | cut -d ' ' -f2-}}",
+        "type": "custom"
+      },
+      {
+        "type": "clock"
+      }
+    ],
+    "icon_theme": "Paper",
+    "position": "bottom",
+    "start": [
+      {
+        "all_monitors": false,
+        "name_map": {
+        },
+        "type": "workspaces"
+      }
+    ]
+  }

config/hypr/themes/base/components/ironbar/style.sass

@@ -0,0 +1,200 @@
+@define-color color_bg #000000;
+@define-color color_bg_dark #6c6c66;
+@define-color color_border #b5b3aa;
+@define-color color_border_active #96cbfe;
+@define-color color_text #b5b3aa;
+@define-color color_urgent #ff6c60;
+
+/* -- base styles -- */
+
+* {
+    font-family: Noto Sans Nerd Font, sans-serif;
+    font-size: 16px;
+    border: none;
+    border-radius: 0;
+}
+
+box, menubar, button {
+    background-color: @color_bg;
+    background-image: none;
+}
+
+button, label {
+    color: @color_text;
+}
+
+button:hover {
+    background-color: @color_bg_dark;
+}
+
+#bar {
+    border-top: 1px solid @color_border;
+}
+
+.popup {
+    border: 1px solid @color_border;
+    padding: 1em;
+}
+
+
+/* -- clipboard -- */
+
+.clipboard {
+    margin-left: 5px;
+    font-size: 1.1em;
+}
+
+.popup-clipboard .item {
+    padding-bottom: 0.3em;
+    border-bottom: 1px solid @color_border;
+}
+
+
+/* -- clock -- */
+
+.clock {
+    font-weight: bold;
+    margin-left: 5px;
+}
+
+.popup-clock .calendar-clock {
+    color: @color_text;
+    font-size: 2.5em;
+    padding-bottom: 0.1em;
+}
+
+.popup-clock .calendar {
+    background-color: @color_bg;
+    color: @color_text;
+}
+
+.popup-clock .calendar .header {
+    padding-top: 1em;
+    border-top: 1px solid @color_border;
+    font-size: 1.5em;
+}
+
+.popup-clock .calendar:selected {
+    background-color: @color_border_active;
+}
+
+
+/* -- launcher -- */
+
+.launcher .item {
+    margin-right: 4px;
+}
+
+.launcher .item:not(.focused):hover {
+    background-color: @color_bg_dark;
+}
+
+.launcher .open {
+    border-bottom: 1px solid @color_text;
+}
+
+.launcher .focused {
+    border-bottom: 2px solid @color_border_active;
+}
+
+.launcher .urgent {
+    border-bottom-color: @color_urgent;
+}
+
+.popup-launcher {
+    padding: 0;
+}
+
+.popup-launcher .popup-item:not(:first-child) {
+    border-top: 1px solid @color_border;
+}
+
+
+/* -- music -- */
+
+.music:hover * {
+    background-color: @color_bg_dark;
+}
+
+.popup-music .album-art {
+    margin-right: 1em;
+}
+
+.popup-music .icon-box {
+    margin-right: 0.4em;
+}
+
+.popup-music .title .icon, .popup-music .title .label {
+    font-size: 1.7em;
+}
+
+.popup-music .controls *:disabled {
+    color: @color_border;
+}
+
+.popup-music .volume .slider slider {
+    border-radius: 100%;
+}
+
+.popup-music .volume .icon {
+    margin-left: 4px;
+}
+
+.popup-music .progress .slider slider {
+    border-radius: 100%;
+}
+
+/* -- script -- */
+
+.script {
+    padding-left: 10px;
+}
+
+
+/* -- sys_info -- */
+
+.sysinfo {
+    margin-left: 10px;
+}
+
+.sysinfo .item {
+    margin-left: 5px;
+}
+
+
+/* -- tray -- */
+
+.tray {
+    margin-left: 10px;
+}
+
+
+/* -- workspaces -- */
+
+.workspaces .item.focused {
+    box-shadow: inset 0 -3px;
+    background-color: @color_bg_dark;
+}
+
+.workspaces .item:hover {
+    box-shadow: inset 0 -3px;
+}
+
+
+/* -- custom: power menu -- */
+
+.popup-power-menu #header {
+    font-size: 1.4em;
+    padding-bottom: 0.4em;
+    margin-bottom: 0.6em;
+    border-bottom: 1px solid @color_border;
+}
+
+.popup-power-menu .power-btn {
+    border: 1px solid @color_border;
+    padding: 0.6em 1em;
+}
+
+.popup-power-menu #buttons > *:nth-child(1) .power-btn {
+    margin-right: 1em;
+}

config/hypr/themes/base/components/ironbar/template.sass

@@ -0,0 +1,200 @@
+@define-color color_bg {{background}};
+@define-color color_bg_dark {{8}};
+@define-color color_border {{cursor}};
+@define-color color_border_active {{4}};
+@define-color color_text {{foreground}};
+@define-color color_urgent {{1}};
+
+/* -- base styles -- */
+
+* {
+    font-family: Noto Sans Nerd Font, sans-serif;
+    font-size: 16px;
+    border: none;
+    border-radius: 0;
+}
+
+box, menubar, button {
+    background-color: @color_bg;
+    background-image: none;
+}
+
+button, label {
+    color: @color_text;
+}
+
+button:hover {
+    background-color: @color_bg_dark;
+}
+
+#bar {
+    border-top: 1px solid @color_border;
+}
+
+.popup {
+    border: 1px solid @color_border;
+    padding: 1em;
+}
+
+
+/* -- clipboard -- */
+
+.clipboard {
+    margin-left: 5px;
+    font-size: 1.1em;
+}
+
+.popup-clipboard .item {
+    padding-bottom: 0.3em;
+    border-bottom: 1px solid @color_border;
+}
+
+
+/* -- clock -- */
+
+.clock {
+    font-weight: bold;
+    margin-left: 5px;
+}
+
+.popup-clock .calendar-clock {
+    color: @color_text;
+    font-size: 2.5em;
+    padding-bottom: 0.1em;
+}
+
+.popup-clock .calendar {
+    background-color: @color_bg;
+    color: @color_text;
+}
+
+.popup-clock .calendar .header {
+    padding-top: 1em;
+    border-top: 1px solid @color_border;
+    font-size: 1.5em;
+}
+
+.popup-clock .calendar:selected {
+    background-color: @color_border_active;
+}
+
+
+/* -- launcher -- */
+
+.launcher .item {
+    margin-right: 4px;
+}
+
+.launcher .item:not(.focused):hover {
+    background-color: @color_bg_dark;
+}
+
+.launcher .open {
+    border-bottom: 1px solid @color_text;
+}
+
+.launcher .focused {
+    border-bottom: 2px solid @color_border_active;
+}
+
+.launcher .urgent {
+    border-bottom-color: @color_urgent;
+}
+
+.popup-launcher {
+    padding: 0;
+}
+
+.popup-launcher .popup-item:not(:first-child) {
+    border-top: 1px solid @color_border;
+}
+
+
+/* -- music -- */
+
+.music:hover * {
+    background-color: @color_bg_dark;
+}
+
+.popup-music .album-art {
+    margin-right: 1em;
+}
+
+.popup-music .icon-box {
+    margin-right: 0.4em;
+}
+
+.popup-music .title .icon, .popup-music .title .label {
+    font-size: 1.7em;
+}
+
+.popup-music .controls *:disabled {
+    color: @color_border;
+}
+
+.popup-music .volume .slider slider {
+    border-radius: 100%;
+}
+
+.popup-music .volume .icon {
+    margin-left: 4px;
+}
+
+.popup-music .progress .slider slider {
+    border-radius: 100%;
+}
+
+/* -- script -- */
+
+.script {
+    padding-left: 10px;
+}
+
+
+/* -- sys_info -- */
+
+.sysinfo {
+    margin-left: 10px;
+}
+
+.sysinfo .item {
+    margin-left: 5px;
+}
+
+
+/* -- tray -- */
+
+.tray {
+    margin-left: 10px;
+}
+
+
+/* -- workspaces -- */
+
+.workspaces .item.focused {
+    box-shadow: inset 0 -3px;
+    background-color: @color_bg_dark;
+}
+
+.workspaces .item:hover {
+    box-shadow: inset 0 -3px;
+}
+
+
+/* -- custom: power menu -- */
+
+.popup-power-menu #header {
+    font-size: 1.4em;
+    padding-bottom: 0.4em;
+    margin-bottom: 0.6em;
+    border-bottom: 1px solid @color_border;
+}
+
+.popup-power-menu .power-btn {
+    border: 1px solid @color_border;
+    padding: 0.6em 1em;
+}
+
+.popup-power-menu #buttons > *:nth-child(1) .power-btn {
+    margin-right: 1em;
+}

config/hypr/themes/base/scripts/apply.sh

@@ -7,4 +7,29 @@ hyprctl keyword general:col.active_border "0xff$($color cursor -n)"
 hyprctl keyword general:col.inactive_border "0xff$($color 8 -n)"
 
 #TODO: add a check for asusctl
-asusctl led-mode static -c "$($color cursor -n)"
+asusctl led-mode static -c "$($color cursor -n)"
+
+sed -e "s/{{0}}/$($color 0)/g" \
+    -e "s/{{1}}/$($color 1)/g" \
+    -e "s/{{2}}/$($color 2)/g" \
+    -e "s/{{3}}/$($color 3)/g" \
+    -e "s/{{4}}/$($color 4)/g" \
+    -e "s/{{5}}/$($color 5)/g" \
+    -e "s/{{6}}/$($color 6)/g" \
+    -e "s/{{7}}/$($color 7)/g" \
+    -e "s/{{8}}/$($color 8)/g" \
+    -e "s/{{9}}/$($color 9)/g" \
+    -e "s/{{10}}/$($color 10)/g" \
+    -e "s/{{11}}/$($color 11)/g" \
+    -e "s/{{12}}/$($color 12)/g" \
+    -e "s/{{13}}/$($color 13)/g" \
+    -e "s/{{14}}/$($color 14)/g" \
+    -e "s/{{15}}/$($color 15)/g" \
+    -e "s/{{foreground}}/$($color foreground)/g" \
+    -e "s/{{background}}/$($color background)/g" \
+    -e "s/{{cursor}}/$($color cursor)/g" \
+    $argv[1]/components/ironbar/template.sass > $argv[1]/components/ironbar/style.sass
+
+#bar
+pkill ironbar
+IRONBAR_CONFIG=$argv[1]/components/ironbar/ironbar.json IRONBAR_CSS=$argv[1]/components/ironbar/style.sass ironbar