[Build] Start refactor

configs/renderable/astal/util/colours.scss

@@ -0,0 +1,6 @@
+$fg-color: {{ colour-foreground-hex }};
+$bg-color: {{ colour-background-hex }};
+$accent-color: {{ colour-accent-hex }};
+$accent-color-2: {{ colour-accent-2-hex }};
+$shadow-color: {{ colour-shadow-rgba-03 }};
+$monospace-font: {{ font-mono }}

configs/renderable/hypr/hyprland/colors.conf

@@ -0,0 +1,18 @@
+# ────────────────────────────────────────────────────────────────────
+#          ╭────────────────────────────────────────────────╮
+#          │                    COLOURS                     │
+#          ╰────────────────────────────────────────────────╯
+# ────────────────────────────────────────────────────────────────────
+
+exec = swaybg -m fill -i {{{ wallpaper-path }}}
+
+general {
+    col.active_border = {{ colour-accent-hyprland }} {{ colour-accent-2-hyprland }} {{ colour-accent-3-hyprland }} 45deg
+    col.inactive_border = {{ colour-inactive-background-hyprland }}
+}
+
+decoration {
+    shadow {
+        color = {{ colour-shadow-hyprland }}
+    }
+}

configs/renderable/hypr/hyprlock.conf

@@ -0,0 +1,96 @@
+#░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+#░   ░░░░   ░░░░░░░░░░░░░░░░░░░░░░░░░░░░   ░░░░░░░░░░░░░░░░░░░░   ░░░░░░░░░░░░░░░░   ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░   ░░░░░░░░░░░░░░
+#▒   ▒▒▒▒   ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒   ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒   ▒▒▒▒▒▒▒▒▒▒▒▒▒   ▒▒▒   ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒  ▒▒▒▒▒▒  ▒▒▒▒▒▒▒▒▒
+#▒   ▒▒▒▒   ▒   ▒▒▒   ▒  ▒   ▒▒▒  ▒    ▒   ▒▒▒▒   ▒▒▒▒▒▒▒▒    ▒   ▒▒   ▒▒▒▒▒▒▒   ▒▒▒▒▒▒▒▒▒▒▒   ▒▒▒▒▒   ▒   ▒▒▒    ▒  ▒▒▒▒▒▒▒     ▒▒
+#▓          ▓▓   ▓   ▓▓  ▓▓   ▓▓▓   ▓▓▓▓   ▓▓   ▓▓   ▓▓▓   ▓▓▓▓   ▓   ▓▓▓▓▓▓▓▓   ▓▓▓▓▓▓▓▓▓   ▓▓   ▓▓▓   ▓▓   ▓▓▓   ▓▓▓▓   ▓   ▓▓   
+#▓   ▓▓▓▓   ▓▓▓▓    ▓▓▓  ▓▓▓   ▓▓   ▓▓▓▓   ▓   ▓▓▓▓   ▓   ▓▓▓▓▓     ▓▓▓▓▓▓▓▓▓▓   ▓▓▓▓▓▓▓▓   ▓▓▓▓   ▓▓   ▓▓   ▓▓▓   ▓▓▓▓   ▓  ▓▓▓   
+#▓   ▓▓▓▓   ▓▓▓▓▓   ▓▓▓   ▓   ▓▓▓   ▓▓▓▓   ▓▓   ▓▓   ▓▓▓   ▓▓▓▓   ▓   ▓▓▓▓▓▓▓▓▓   ▓▓▓   ▓▓   ▓▓   ▓▓▓   ▓▓   ▓▓▓   ▓▓▓▓   ▓    ▓   
+#█   ████   ████   ████   ██████    ████   ████   ████████    █   ██   ██████████     ██████   █████    ██   ███   ████   █████   █
+#██████████████   █████   ███████████████████████████████████████████████████████████████████████████████████████████████████    ██
+
+
+# ┌                                                ┐
+# │                   BACKGROUND                   │
+# └                                                ┘
+background {
+    monitor = 
+    path = {{{ lockpaper-path }}} # Or screenshot
+
+    blur_passes = 1
+}
+
+# ┌                                                ┐
+# │                 PASSWORD INPUT                 │
+# └                                                ┘
+input-field {
+    monitor =
+    size = 300, 40
+    outline_thickness = 3
+    dots_size = 0.33 # Scale of input-field height, 0.2 - 0.8
+    dots_spacing = 0.15 # Scale of dots' absolute size, 0.0 - 1.0
+    dots_center = false
+    outer_color = {{ colour-accent-rgb }}
+    inner_color = rgb(200, 200, 200)
+    font_color = rgb(10, 10, 10)
+    fade_on_empty = true
+    placeholder_text = <i>Input Password...</i> # Text rendered in the input box when it's empty.
+    hide_input = false
+
+    position = 0, -80
+    halign = center
+    valign = center
+}
+
+label {
+    monitor =
+    text = <b>$TIME</b>
+    color = {{ colour-primary-rgb }}
+    font_size = 150
+    font_family = {{ font-primary }}
+
+    position = 0, 80
+    halign = center
+    valign = center
+}
+
+label {
+    monitor =
+    text = $LAYOUT
+    color = rgba(200, 200, 200, 1.0)
+    font_size = 12
+    font_family = {{ font-primary }}
+
+    position = 0, 0
+    halign = right
+    valign = bottom
+}
+
+label {
+    monitor =
+    text = $USER
+    color = rgba(200, 200, 200, 1.0)
+    font_size = 12
+    font_family = {{ font-primary }}
+
+    position = 0, 0
+    halign = left
+    valign = bottom
+    shadow_passes = 3
+}
+
+label {
+    monitor =
+    text = <i>Failed attempts: $ATTEMPTS</i>
+    color = rgba(200, 0, 0, 1.0)
+    font_size = 12
+    font_family = {{ font-accent }}
+
+    position = 0, 20
+    halign = center
+    valign = bottom
+    shadow_passes = 3
+    shadow_size = 5
+    shadow_boost = 3
+    shadow_color = rgb(255,255,255)
+}
+

configs/renderable/rofi/config.rasi

@@ -0,0 +1,12 @@
+/** Basic config file **/
+
+configuration {
+  show-icons: true;
+  icon-theme: "{{ icon-theme }}";
+  display-drun: "";
+  display-run: "🏃🏽‍♂️ ";
+  display-window: "🗔 ";
+  display-combi: "🔎  ";
+}
+
+@theme "style.rasi"

configs/renderable/rofi/style.rasi

@@ -0,0 +1,83 @@
+* {
+    background: {{ colour-background-hex }};
+    background-selected: {{ colour-background-alternative-hex }};
+    foreground: {{ colour-foreground-hex }};
+    accent: {{ colour-accent-hex }};
+    accent-two: {{ colour-accent-2-hex }};
+    // border-color: {{ colour-accent-3-hex }};
+    inactive: {{ colour-inactive-hex }};
+    spacing: 2;
+    width: 30em;
+    margin: 0;
+    padding: 0;
+}
+
+#window {
+    background-color: @background;
+    border-color: @accent;
+    border: 1px;
+    border-radius: 10px;
+    padding: 0;
+    location: center;
+    anchor: center;
+    margin: 0;
+}
+
+#mainbox {
+    background-color: @background;
+    spacing: 10px;
+    margin: 10px 0 0 0;
+    width: 200px;
+}
+
+#inputbar {
+    children: [prompt,entry];
+    background-color: @background;
+}
+
+#listview {
+    background-color: @background;
+    fixed-height: true;
+    margin: 5px 0 0 10px;
+}
+
+#element {
+    padding: 5px;
+    background-color: @background;
+    text-color: @foreground;
+}
+
+element selected {
+    background-color: @background-selected;
+    text-color: @accent;
+    border: 1px;
+    border-radius: 5px;
+}
+
+element-text {
+    background-color: inherit;
+    text-color: inherit;
+}
+
+element-icon {
+    background-color: inherit;
+    margin: 0 4px 0 0;
+    size: 35px;
+}
+
+#entry {
+   background-color: @background;
+   text-color: @accent;
+   placeholder: "Search";
+   placeholder-color: @inactive;
+   font: "{{ font-primary }} Regular 20";
+}
+
+#prompt {
+   background-color: @background;
+   padding: 0 4px;
+   margin: 0 5px 0 0;
+   text-color: @foreground;
+   font: "{{ font-accent }} Regular 20";
+}
+

configs/renderable/wlogout/layout

@@ -0,0 +1,30 @@
+{
+    "label" : "lock",
+    "action" : "hyprlock",
+    "text" : "Lock",
+    "keybind" : "l"
+}
+{
+    "label" : "reboot",
+    "action" : "systemctl reboot",
+    "text" : "Reboot",
+    "keybind" : "r"
+}
+{
+    "label" : "shutdown",
+    "action" : "systemctl poweroff",
+    "text" : "Shutdown",
+    "keybind" : "s"
+}
+{
+    "label" : "logout",
+    "action" : "hyprctl dispatch exit 0",
+    "text" : "Logout",
+    "keybind" : "e"
+}
+{
+    "label" : "suspend",
+    "action" : "systemctl suspend",
+    "text" : "Suspend",
+    "keybind" : "u"
+}

configs/renderable/wlogout/style.css

@@ -0,0 +1,66 @@
+/*
+ *          ╭───────────────────────────────────────────────╮
+ *          │                    WLOGOUT                    │
+ *          ╰───────────────────────────────────────────────╯
+*/
+window {
+    font-family: monospace;
+    font-size: 14pt;
+    color: #ffffff; /* text */
+    background-color: {{ colour-background-rgba }};
+}
+
+button {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 25%;
+    border: none;
+    background-color: transparent;
+    margin: 5px;
+    transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
+    border-radius: 40px;
+}
+
+button:hover {
+    background-color: {{ colour-accent-2-rgba-05 }};
+}
+
+button:focus {
+    background-color: {{ colour-accent-2-rgb }};
+    color: {{ colour-foreground-rgb }};
+}
+
+#lock {
+    background-image: image(url("./lock.png"));
+}
+#lock:focus {
+    background-image: image(url("./lock-hover.png"));
+}
+
+#logout {
+    background-image: image(url("./logout.png"));
+}
+#logout:focus {
+    background-image: image(url("./logout-hover.png"));
+}
+
+#suspend {
+    background-image: image(url("./sleep.png"));
+}
+#suspend:focus {
+    background-image: image(url("./sleep-hover.png"));
+}
+
+#shutdown {
+    background-image: image(url("./power.png"));
+}
+#shutdown:focus {
+    background-image: image(url("./power-hover.png"));
+}
+
+#reboot {
+    background-image: image(url("./restart.png"));
+}
+#reboot:focus {
+    background-image: image(url("./restart-hover.png"));
+}

configs/renderable/yazi/theme.toml

@@ -0,0 +1,3 @@
+[flavor]
+dark = "{{ yazi-theme }}"
+light = "{{ yazi-theme }}"