[Gtk-Theme] Pre-Processing + Some other work

build/render.js

@@ -12,22 +12,21 @@ const build = ( wallpaper, lockpaper, theme ) => {
     // Extract colour palette from chosen wallpaper using Color-Thief
     colorThief.getPalette( wallpaper ).then( palette => {
         // Define view options (for rendering with mustache)
-        console.log( palette );
         const view = {
             'wallpaper-path': wallpaper,
             'lockpaper-path': lockpaper,
 
             // Colours
-            'colour-foreground-hex': renderColourAsHex( palette[ 0 ] ),
+            'colour-foreground-hex': renderColourAsHex( colours.foreground[ theme ] ),
-            'colour-foreground-rgb': renderColourAsRGB( palette[ 0 ] ),
+            'colour-foreground-rgb': renderColourAsRGB( colours.foreground[ theme ] ),
-            'colour-foreground-rgb': renderColourAsRGBA( palette[ 0 ], 0.5 ),
+            'colour-foreground-rgba': renderColourAsRGBA( colours.foreground[ theme ], 0.5 ),
-            'colour-accent-hex': renderColourAsHex( palette[ 1 ] ),
+            'colour-accent-hex': renderColourAsHex( palette[ 0 ] ),
-            'colour-accent-rgb': renderColourAsRGB( palette[ 1 ] ),
+            'colour-accent-rgb': renderColourAsRGB( palette[ 0 ] ),
-            'colour-accent-rgba': renderColourAsRGBA( palette[ 1 ], 0.3 ),
+            'colour-accent-rgba': renderColourAsRGBA( palette[ 0 ], 0.3 ),
-            'colour-accent-2-hex': renderColourAsHex( palette[ 2 ] ),
+            'colour-accent-2-hex': renderColourAsHex( palette[ 1 ] ),
-            'colour-accent-2-rgb': renderColourAsRGB( palette[ 2 ] ),
+            'colour-accent-2-rgb': renderColourAsRGB( palette[ 1 ] ),
-            'colour-accent-3-hex': renderColourAsHex( palette[ 3 ] ),
+            'colour-accent-3-hex': renderColourAsHex( palette[ 2 ] ),
-            'colour-accent-3-rgb': renderColourAsRGB( palette[ 3 ] ),
+            'colour-accent-3-rgb': renderColourAsRGB( palette[ 2 ] ),
             'colour-background-hex': renderColourAsHex( colours.background[ theme ] ),
             'colour-background-rgb': renderColourAsRGB( colours.background[ theme ] ),
             'colour-background-rgba': renderColourAsRGBA( colours.background[ theme ], 0.5 ),
@@ -36,10 +35,10 @@ const build = ( wallpaper, lockpaper, theme ) => {
             'colour-shadow-hex': renderColourAsHex( colours.shadow[ theme ] ),
             'colour-shadow-rgb': renderColourAsRGB( colours.shadow[ theme ] ),
             'colour-shadow-rgba': renderColourAsRGBA( colours.shadow[ theme ], 0.3 ),
-            'colour-inavtive-hex': renderColourAsHex( colours.inactive[ theme ] ),
+            'colour-inactive-hex': renderColourAsHex( colours.inactive[ theme ] ),
-            'colour-inavtive-rgb': renderColourAsRGB( colours.inactive[ theme ] ),
+            'colour-inactive-rgb': renderColourAsRGB( colours.inactive[ theme ] ),
-            'colour-inavtive-background-hex': renderColourAsHex( colours[ 'inactive-background' ][ theme ] ),
+            'colour-inactive-background-hex': renderColourAsHex( colours[ 'inactive-background' ][ theme ] ),
-            'colour-inavtive-background-rgb': renderColourAsRGB( colours[ 'inactive-background' ][ theme ] ),
+            'colour-inactive-background-rgb': renderColourAsRGB( colours[ 'inactive-background' ][ theme ] ),
 
             // Fonts
             'font-primary': fonts.primary[ theme ],
@@ -53,11 +52,6 @@ const build = ( wallpaper, lockpaper, theme ) => {
             'path-to-dotfiles': __dirname.slice(0, __dirname.length - 5),
         }
 
-        // TODO: Maybe bar config? Reordering? Same for quick actions?
-        // Those will be read by AGS components though, but generated by
-        // this script
-        console.log( view );
-
         try {
             fs.mkdir( path.join( __dirname, '/dist' ) );
         } catch ( e ) {
@@ -76,8 +70,10 @@ const build = ( wallpaper, lockpaper, theme ) => {
             }
         }
 
-        render( path.join( __dirname, '/../gtk-theme/src/gtk-3.0/gtk.css' ), view, 'src', 'dist' );
+        util.themePreProcessor( path.join( __dirname, '/../gtk-theme/src/gtk-4.0/gtk.css' ), 'src' );
-        render( path.join( __dirname, '/../gtk-theme/src/gtk-4.0/gtk.css' ), view, 'src', 'dist' );
+        util.themePreProcessor( path.join( __dirname, '/../gtk-theme/src/gtk-3.0/gtk.css' ), 'src' );
+        render( path.join( __dirname, '/../gtk-theme/temp/gtk-3.0/gtk.css' ), view, 'temp', 'dist' );
+        render( path.join( __dirname, '/../gtk-theme/temp/gtk-4.0/gtk.css' ), view, 'temp', 'dist' );
         // TODO: Copy over to /usr/share/themes/Adaptive-Theme/
     } ).catch( e => {
         console.error( e );
@@ -86,6 +82,13 @@ const build = ( wallpaper, lockpaper, theme ) => {
 }
 
 const colours = {
+    foreground: {
+        'nordic': [ 10, 220, 255 ],
+        'deep-dark': [ 230, 230, 230 ],
+        'material': [ 255, 255, 255 ], // TODO: Will be calculated by material theme generator
+        'light': [ 40, 40, 40 ],
+        'bright': [ 0, 0, 0 ]
+    },
     background: {
         'nordic': [ 10, 0, 50 ],
         'deep-dark': [ 20, 20, 20 ],

build/util.js

@@ -39,12 +39,58 @@ const renderColourAsRGB = ( colour ) => {
 }
 
 const renderColourAsRGBA = ( colour, ambiance ) => {
-    return `rgb( ${ colour[ 0 ] }, ${ colour[ 1 ] }, ${ colour[ 2 ] }, ${ ambiance } )`
+    return `rgba( ${ colour[ 0 ] }, ${ colour[ 1 ] }, ${ colour[ 2 ] }, ${ ambiance } )`
+}
+
+/*
+ * Replace the colours with variable names
+ * #000 = @bg
+ * #111 = @bg_accent
+ * #222 = @bg_inactive
+ * #555A = @shadow_rgba
+ * #555 = @shadow
+ * #F00 = @accent
+ * #0F0 = @accent2
+ * #00F = @accent3
+ * #AAA = @inactive
+ * #FFF = @fg
+ */
+const replacements = { 
+    '#000': '@bg',
+    '#111': '@bg_accent',
+    '#222': '@bg_inactive',
+    '#555A': '@shadow_rgba',
+    '#555': '@shadow',
+    '#F00': '@accent',
+    '#0F0': '@accent2',
+    '#00F': '@accent3',
+    '#AAA': '@inactive',
+    '#FFF': '@fg'
+};
+const themePreProcessor = ( file, replacement ) => {
+    const colours = Object.keys( replacements );
+    let data = '' + fs.readFileSync( file );
+    for (let index = 0; index < colours.length; index++) {
+        const colour = colours[index];
+        data = data.replaceAll(colour, replacements[ colour ]);
+    }
+    
+    const outPath = file.replace( replacement, 'temp' );
+    try {
+        fs.mkdirSync( path.dirname( outPath ), {
+            recursive: true,
+        } );
+    } catch ( e ) {
+        console.error( e );
+    }
+
+    fs.writeFileSync( outPath, data );
 }
 
 module.exports = {
     treeWalker,
     renderColourAsHex,
     renderColourAsRGB,
-    renderColourAsRGBA
+    renderColourAsRGBA,
+    themePreProcessor
 }

config/astal/util/colours.scss

@@ -1,4 +1,4 @@
-$fg-color: #{"@theme_fg_color"};
+$fg-color: #0ADCFF;
-$bg-color: #{"@theme_bg_color"};
+$bg-color: #0A0032;
-$accent-color: #202050;
+$accent-color: #CFDCEA;
-$accent-color-2: #202080;
+$accent-color-2: #686659;

config/hypr/hyprland/colors.conf

@@ -0,0 +1,16 @@
+# ────────────────────────────────────────────────────────────────────
+#          ╭────────────────────────────────────────────────╮
+#          │                    COLOURS                     │
+#          ╰────────────────────────────────────────────────╯
+# ────────────────────────────────────────────────────────────────────
+
+general {
+    col.active_border = rgb( 207, 220, 234 ) rgb( 104, 102, 89 ) rgb( 108, 176, 234 ) 45deg
+    col.inactive_border = rgb( 200, 200, 200 )
+}
+
+decoration {
+    shadow {
+        color = 
+    }
+}

config/hypr/hyprland/general.conf

@@ -3,7 +3,8 @@
 #          │             LAUNCHING OF PROGRAMS              │
 #          ╰────────────────────────────────────────────────╯
 # ────────────────────────────────────────────────────────────────────
-# exec-once = dunst --startup_notification
+
+source = ./colors.conf
 exec-once = ags run ~/projects/active/dotfiles/config/ags/notifications/
 exec-once = ~/.config/hypr/xdg-portal-hyprland
 exec-once = dbus-update-activation-environment --systemd WAYLAND_DISPLAY XDG_CURRENT_DESKTOP XAUTHORITY DISPLAY

config/hypr/hyprlock.conf

@@ -0,0 +1,100 @@
+#░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+#░   ░░░░   ░░░░░░░░░░░░░░░░░░░░░░░░░░░░   ░░░░░░░░░░░░░░░░░░░░   ░░░░░░░░░░░░░░░░   ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░   ░░░░░░░░░░░░░░
+#▒   ▒▒▒▒   ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒   ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒   ▒▒▒▒▒▒▒▒▒▒▒▒▒   ▒▒▒   ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒  ▒▒▒▒▒▒  ▒▒▒▒▒▒▒▒▒
+#▒   ▒▒▒▒   ▒   ▒▒▒   ▒  ▒   ▒▒▒  ▒    ▒   ▒▒▒▒   ▒▒▒▒▒▒▒▒    ▒   ▒▒   ▒▒▒▒▒▒▒   ▒▒▒▒▒▒▒▒▒▒▒   ▒▒▒▒▒   ▒   ▒▒▒    ▒  ▒▒▒▒▒▒▒     ▒▒
+#▓          ▓▓   ▓   ▓▓  ▓▓   ▓▓▓   ▓▓▓▓   ▓▓   ▓▓   ▓▓▓   ▓▓▓▓   ▓   ▓▓▓▓▓▓▓▓   ▓▓▓▓▓▓▓▓▓   ▓▓   ▓▓▓   ▓▓   ▓▓▓   ▓▓▓▓   ▓   ▓▓   
+#▓   ▓▓▓▓   ▓▓▓▓    ▓▓▓  ▓▓▓   ▓▓   ▓▓▓▓   ▓   ▓▓▓▓   ▓   ▓▓▓▓▓     ▓▓▓▓▓▓▓▓▓▓   ▓▓▓▓▓▓▓▓   ▓▓▓▓   ▓▓   ▓▓   ▓▓▓   ▓▓▓▓   ▓  ▓▓▓   
+#▓   ▓▓▓▓   ▓▓▓▓▓   ▓▓▓   ▓   ▓▓▓   ▓▓▓▓   ▓▓   ▓▓   ▓▓▓   ▓▓▓▓   ▓   ▓▓▓▓▓▓▓▓▓   ▓▓▓   ▓▓   ▓▓   ▓▓▓   ▓▓   ▓▓▓   ▓▓▓▓   ▓    ▓   
+#█   ████   ████   ████   ██████    ████   ████   ████████    █   ██   ██████████     ██████   █████    ██   ███   ████   █████   █
+#██████████████   █████   ███████████████████████████████████████████████████████████████████████████████████████████████████    ██
+
+
+general {
+    grace = 15
+}
+
+# ┌                                                ┐
+# │                   BACKGROUND                   │
+# └                                                ┘
+background {
+    monitor = 
+    path = /home/janis/NextCloud/Wallpapers/H125-AirZermatt.jpg # 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 = rgb( 207, 220, 234 )
+    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 = 
+    font_size = 100
+    font_family = Comfortaa
+
+    position = 0, 80
+    halign = center
+    valign = center
+}
+
+label {
+    monitor =
+    text = $LAYOUT
+    color = rgba(200, 200, 200, 1.0)
+    font_size = 12
+    font_family = Comfortaa
+
+    position = 0, 0
+    halign = right
+    valign = bottom
+}
+
+label {
+    monitor =
+    text = $USER
+    color = rgba(200, 200, 200, 1.0)
+    font_size = 12
+    font_family = Comfortaa
+
+    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 = Adwaita Sans
+
+    position = 0, 20
+    halign = center
+    valign = bottom
+    shadow_passes = 3
+    shadow_size = 5
+    shadow_boost = 3
+    shadow_color = rgb(255,255,255)
+}
+

config/wlogout/style.css

@@ -0,0 +1,65 @@
+/*
+ *          ╭───────────────────────────────────────────────╮
+ *          │                    WLOGOUT                    │
+ *          ╰───────────────────────────────────────────────╯
+*/
+window {
+    font-family: monospace;
+    font-size: 14pt;
+    color: #ffffff; /* text */
+    background-color: rgba( 10, 0, 50, 0.5 );
+}
+
+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;
+}
+
+button:hover {
+    background-color: rgba(0, 94, 31, 0.2);
+}
+
+button:focus {
+    background-color: rgb( 207, 220, 234 );
+    color: ;
+}
+
+#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"));
+}

config/yazi/theme.toml

@@ -0,0 +1,2 @@
+[flavor]
+use = tokyo-night

gtk-theme/dist/gtk-3.0/gtk.css

@@ -0,0 +1,106 @@
+window {
+    color: var( --fg );
+    background-color: var( --bg );
+}
+
+
+/*
+ *          ╭───────────────────────────────────────────────╮
+ *          │               GTK NAMED COLORS                │
+ *          ╰───────────────────────────────────────────────╯
+*/
+
+/*
+ * ── widget text/foreground color ─────────────────────────────────────
+*/
+@define-color theme_fg_color #0ADCFF;
+
+/*
+ * ── text color for entries, views and content in general ─────────────
+*/
+@define-color theme_text_color #0ADCFF;
+
+/*
+ * ── widget base background color ─────────────────────────────────────
+*/
+@define-color theme_bg_color #0A0032;
+
+/*
+ * ── text widgets and the like base background color ──────────────────
+*/
+@define-color theme_base_color rgb( 15, 5, 60 );
+
+/*
+ * ── base background color of selections ──────────────────────────────
+*/
+@define-color theme_selected_bg_color #CFDCEA;
+
+/*
+ * ── text/foreground color of selections ──────────────────────────────
+*/
+@define-color theme_selected_fg_color #0ADCFF;
+
+/*
+ * ── base background color of insensitive widgets ─────────────────────
+*/
+@define-color insensitive_bg_color #0A0032;
+
+/*
+ * ── text foreground color of insensitive widgets ─────────────────────
+*/
+@define-color insensitive_fg_color rgba( 10, 220, 255, 0.5 );
+
+/*
+ * ── insensitive text widgets and the like base background color ──────
+*/
+@define-color insensitive_base_color rgb( 15, 5, 60 );
+
+/*
+ * ── widget text/foreground color on backdrop windows ─────────────────
+*/
+@define-color theme_unfocused_fg_color #686659;
+
+/*
+text color for entries, views and content in general on backdrop windows */
+@define-color theme_unfocused_text_color #C8C8C8;
+
+/*
+widget base background color on backdrop windows */
+@define-color theme_unfocused_bg_color #000000;
+
+/*
+text widgets and the like base background color on backdrop windows */
+@define-color theme_unfocused_base_color #000000;
+
+/*
+base background color of selections on backdrop windows */
+@define-color theme_unfocused_selected_bg_color #686659;
+
+/*
+text/foreground color of selections on backdrop windows */
+@define-color theme_unfocused_selected_fg_color #0ADCFF;
+
+/*
+insensitive color on backdrop windows */
+@define-color unfocused_insensitive_color rgba( 10, 220, 255, 0.5 );
+
+/*
+widgets main borders color */
+@define-color borders rgba( 10, 0, 60, 0.3 );
+/*
+widgets main borders color on backdrop windows */
+@define-color unfocused_borders rgba( 10, 0, 60, 0.3 );
+
+/*
+these are pretty self explicative */
+@define-color warning_color #ffeb3b;
+@define-color error_color #f44336;
+@define-color success_color #00e676;
+
+/* content view background such as thumbnails view in Photos or Boxes */
+@define-color content_view_bg #0A0032;
+
+/* Very contrasty background for text views (@theme_text_color foreground) */
+@define-color text_view_bg #0A0032;
+/* placeholder for entries */
+@define-color placeholder_text_color #C8C8C8;

gtk-theme/dist/gtk-4.0/gtk.css

@@ -0,0 +1,23 @@
+@import '../colours.css';
+
+/*
+ * Replace the colours with variable names
+ * #000 = @bg
+ * #111 = @bg_accent
+ * #222 = @bg_inactive
+ * #555A = @shadow_rgba
+ * #555 = @shadow
+ * #F00 = @accent
+ * #0F0 = @accent2
+ * #00F = @accent3
+ * #AAA = @inactive
+ * #FFF = @fg
+ */
+
+
+window {
+    color: #FFF;
+    background-color: #000;
+}
+
+

gtk-theme/dist/index.theme

@@ -0,0 +1,8 @@
+[Desktop Entry]
+Type=X-GNOME-Metatheme
+Name=Adaptive-Theme
+Comment=A very adaptive theme together with its scripts
+Encoding=UTF-8
+
+[X-GNOME-Metatheme]
+GtkTheme=Adaptive-Theme

gtk-theme/src/colours.css

@@ -0,0 +1,65 @@
+/*
+ *          ╭───────────────────────────────────────────────╮
+ *          │               GTK Theme Colours               │
+ *          ╰───────────────────────────────────────────────╯
+*/
+
+
+/*
+ * ┌                                               ┐
+ * │                  Foreground                   │
+ * └                                               ┘
+*/
+
+/*
+ * ── Foreground color, main interface text colour ─────────────────────
+*/
+@define-color fg {{ colour-foreground-hex }};
+
+/*
+ * ── Accent colour ────────────────────────────────────────────────────
+*/
+@define-color accent {{ colour-accent-hex }};
+
+/*
+ * ── Secondary accent colour ──────────────────────────────────────────
+*/
+@define-color accent2 {{ colour-accent-2-hex }}
+
+/*
+ * ── Tertiary accent colour ───────────────────────────────────────────
+*/
+@define-color accent3 {{ colour-accent-3-hex }}
+
+/*
+ * ── Inactive Colour ──────────────────────────────────────────────────
+*/
+@define-color inactive {{ colour-inactive-hex }}
+
+
+/*
+ * ┌                                               ┐
+ * │                  Background                   │
+ * └                                               ┘
+*/
+
+/*
+ * ── Background color, main interface background ──────────────────────
+*/
+@define-color bg {{ colour-background-hex }};
+
+/*
+ * ── Accent background color ──────────────────────────────────────────
+*/
+@define-color bg_accent {{ colour-background-alternative-hex }};
+
+/*
+ * ── Inactive background colour ───────────────────────────────────────
+*/
+@define-color bg_inactive {{ colour-inactive-background-hex }}
+
+/*
+ * ── Shadow colour ────────────────────────────────────────────────────
+*/
+@define-color shadow_rgba {{ colour-shadow-rgba }}
+@define-color shadow {{ colour-shadow-hex }}

gtk-theme/src/gtk-3.0/gtk.css

@@ -1,3 +1,9 @@
+window {
+    color: var( --fg );
+    background-color: var( --bg );
+}
+
+
 /*
  *          ╭───────────────────────────────────────────────╮
  *          │               GTK NAMED COLORS                │

gtk-theme/src/gtk-4.0/gtk.css

@@ -1,100 +1,23 @@
-/*
+@import '../colours.css';
- *          ╭───────────────────────────────────────────────╮
- *          │               GTK NAMED COLORS                │
- *          ╰───────────────────────────────────────────────╯
-*/
 
 /*
- * ── widget text/foreground color ─────────────────────────────────────
+ * Replace the colours with variable names
-*/
+ * #000 = @bg
-@define-color theme_fg_color {{ colour-foreground-hex }};
+ * #111 = @bg_accent
+ * #222 = @bg_inactive
+ * #555A = @shadow_rgba
+ * #555 = @shadow
+ * #F00 = @accent
+ * #0F0 = @accent2
+ * #00F = @accent3
+ * #AAA = @inactive
+ * #FFF = @fg
+ */
 
-/*
- * ── text color for entries, views and content in general ─────────────
-*/
-@define-color theme_text_color {{ colour-foreground-hex }};
 
-/*
+window {
- * ── widget base background color ─────────────────────────────────────
+    color: #FFF;
-*/
+    background-color: #000;
-@define-color theme_bg_color {{ colour-background-hex }};
+}
 
-/*
- * ── text widgets and the like base background color ──────────────────
-*/
-@define-color theme_base_color {{ colour-background-alternative-hex }};
 
-/*
- * ── base background color of selections ──────────────────────────────
-*/
-@define-color theme_selected_bg_color {{ colour-accent-hex }};
-
-/*
- * ── text/foreground color of selections ──────────────────────────────
-*/
-@define-color theme_selected_fg_color {{ colour-foreground-hex }};
-
-/*
- * ── base background color of insensitive widgets ─────────────────────
-*/
-@define-color insensitive_bg_color {{ colour-background-hex }};
-
-/*
- * ── text foreground color of insensitive widgets ─────────────────────
-*/
-@define-color insensitive_fg_color {{ colour-foreground-rgba }};
-
-/*
- * ── insensitive text widgets and the like base background color ──────
-*/
-@define-color insensitive_base_color {{ colour-background-alternative-hex }};
-
-/*
- * ── widget text/foreground color on backdrop windows ─────────────────
-*/
-@define-color theme_unfocused_fg_color {{ colour-accent-2-hex }};
-
-/*
-text color for entries, views and content in general on backdrop windows */
-@define-color theme_unfocused_text_color {{ colour-inactive-hex }};
-
-/*
-widget base background color on backdrop windows */
-@define-color theme_unfocused_bg_color {{ colour-inactive-background-hex }};
-
-/*
-text widgets and the like base background color on backdrop windows */
-@define-color theme_unfocused_base_color {{ colour-inactive-background-hex }};
-
-/*
-base background color of selections on backdrop windows */
-@define-color theme_unfocused_selected_bg_color {{ colour-accent-2-hex }};
-
-/*
-text/foreground color of selections on backdrop windows */
-@define-color theme_unfocused_selected_fg_color {{ colour-foreground-hex }};
-
-/*
-insensitive color on backdrop windows */
-@define-color unfocused_insensitive_color {{ colour-foreground-rgba }};
-
-/*
-widgets main borders color */
-@define-color borders {{ colour-shadow-rgba }};
-/*
-widgets main borders color on backdrop windows */
-@define-color unfocused_borders {{ colour-shadow-rgba }};
-
-/*
-these are pretty self explicative */
-@define-color warning_color #ffeb3b;
-@define-color error_color #f44336;
-@define-color success_color #00e676;
-
-/* content view background such as thumbnails view in Photos or Boxes */
-@define-color content_view_bg {{ colour-background-hex }};
-
-/* Very contrasty background for text views (@theme_text_color foreground) */
-@define-color text_view_bg {{ colour-background-hex }};
-/* placeholder for entries */
-@define-color placeholder_text_color {{ colour-inactive-hex }};

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"
+}