diff --git a/build/render.js b/build/render.js
index a96ccfc..7beec66 100644
--- a/build/render.js
+++ b/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-rgb': renderColourAsRGB( palette[ 0 ] ),
- 'colour-foreground-rgb': renderColourAsRGBA( palette[ 0 ], 0.5 ),
- 'colour-accent-hex': renderColourAsHex( palette[ 1 ] ),
- 'colour-accent-rgb': renderColourAsRGB( palette[ 1 ] ),
- 'colour-accent-rgba': renderColourAsRGBA( palette[ 1 ], 0.3 ),
- 'colour-accent-2-hex': renderColourAsHex( palette[ 2 ] ),
- 'colour-accent-2-rgb': renderColourAsRGB( palette[ 2 ] ),
- 'colour-accent-3-hex': renderColourAsHex( palette[ 3 ] ),
- 'colour-accent-3-rgb': renderColourAsRGB( palette[ 3 ] ),
+ 'colour-foreground-hex': renderColourAsHex( colours.foreground[ theme ] ),
+ 'colour-foreground-rgb': renderColourAsRGB( colours.foreground[ theme ] ),
+ 'colour-foreground-rgba': renderColourAsRGBA( colours.foreground[ theme ], 0.5 ),
+ 'colour-accent-hex': renderColourAsHex( palette[ 0 ] ),
+ 'colour-accent-rgb': renderColourAsRGB( palette[ 0 ] ),
+ 'colour-accent-rgba': renderColourAsRGBA( palette[ 0 ], 0.3 ),
+ 'colour-accent-2-hex': renderColourAsHex( palette[ 1 ] ),
+ 'colour-accent-2-rgb': renderColourAsRGB( palette[ 1 ] ),
+ 'colour-accent-3-hex': renderColourAsHex( palette[ 2 ] ),
+ '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-inavtive-rgb': renderColourAsRGB( colours.inactive[ theme ] ),
- 'colour-inavtive-background-hex': renderColourAsHex( colours[ 'inactive-background' ][ theme ] ),
- 'colour-inavtive-background-rgb': renderColourAsRGB( colours[ 'inactive-background' ][ theme ] ),
+ 'colour-inactive-hex': renderColourAsHex( colours.inactive[ theme ] ),
+ 'colour-inactive-rgb': renderColourAsRGB( colours.inactive[ theme ] ),
+ 'colour-inactive-background-hex': renderColourAsHex( 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' );
- render( path.join( __dirname, '/../gtk-theme/src/gtk-4.0/gtk.css' ), view, 'src', 'dist' );
+ util.themePreProcessor( path.join( __dirname, '/../gtk-theme/src/gtk-4.0/gtk.css' ), 'src' );
+ 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 ],
diff --git a/build/util.js b/build/util.js
index b40cbfc..d9e531b 100644
--- a/build/util.js
+++ b/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
}
diff --git a/config/astal/util/colours.scss b/config/astal/util/colours.scss
index e4a7257..8c9353f 100644
--- a/config/astal/util/colours.scss
+++ b/config/astal/util/colours.scss
@@ -1,4 +1,4 @@
-$fg-color: #{"@theme_fg_color"};
-$bg-color: #{"@theme_bg_color"};
-$accent-color: #202050;
-$accent-color-2: #202080;
+$fg-color: #0ADCFF;
+$bg-color: #0A0032;
+$accent-color: #CFDCEA;
+$accent-color-2: #686659;
diff --git a/config/hypr/hyprland/colors.conf b/config/hypr/hyprland/colors.conf
new file mode 100644
index 0000000..6184df0
--- /dev/null
+++ b/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 =
+ }
+}
diff --git a/config/hypr/hyprland/general.conf b/config/hypr/hyprland/general.conf
index 2a83158..af6b1fb 100644
--- a/config/hypr/hyprland/general.conf
+++ b/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
diff --git a/config/hypr/hyprlock.conf b/config/hypr/hyprlock.conf
new file mode 100644
index 0000000..d5882c5
--- /dev/null
+++ b/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 = Input Password... # Text rendered in the input box when it's empty.
+ hide_input = false
+
+ position = 0, -80
+ halign = center
+ valign = center
+}
+
+label {
+ monitor =
+ text = $TIME
+ 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 = Failed attempts: $ATTEMPTS
+ 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)
+}
+
diff --git a/config/wlogout/style.css b/config/wlogout/style.css
new file mode 100644
index 0000000..c85bcea
--- /dev/null
+++ b/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"));
+}
diff --git a/config/yazi/theme.toml b/config/yazi/theme.toml
new file mode 100644
index 0000000..a32bb0c
--- /dev/null
+++ b/config/yazi/theme.toml
@@ -0,0 +1,2 @@
+[flavor]
+use = tokyo-night
diff --git a/gtk-theme/dist/gtk-3.0/gtk.css b/gtk-theme/dist/gtk-3.0/gtk.css
new file mode 100644
index 0000000..b11bd05
--- /dev/null
+++ b/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;
diff --git a/gtk-theme/dist/gtk-4.0/gtk.css b/gtk-theme/dist/gtk-4.0/gtk.css
new file mode 100644
index 0000000..17fd47a
--- /dev/null
+++ b/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;
+}
+
+
diff --git a/gtk-theme/dist/index.theme b/gtk-theme/dist/index.theme
new file mode 100644
index 0000000..43a621d
--- /dev/null
+++ b/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
diff --git a/gtk-theme/src/colours.css b/gtk-theme/src/colours.css
new file mode 100644
index 0000000..0651e89
--- /dev/null
+++ b/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 }}
diff --git a/gtk-theme/src/gtk-3.0/gtk.css b/gtk-theme/src/gtk-3.0/gtk.css
index cf65183..346e71a 100644
--- a/gtk-theme/src/gtk-3.0/gtk.css
+++ b/gtk-theme/src/gtk-3.0/gtk.css
@@ -1,3 +1,9 @@
+window {
+ color: var( --fg );
+ background-color: var( --bg );
+}
+
+
/*
* ╭───────────────────────────────────────────────╮
* │ GTK NAMED COLORS │
diff --git a/gtk-theme/src/gtk-4.0/gtk.css b/gtk-theme/src/gtk-4.0/gtk.css
index cf65183..17fd47a 100644
--- a/gtk-theme/src/gtk-4.0/gtk.css
+++ b/gtk-theme/src/gtk-4.0/gtk.css
@@ -1,100 +1,23 @@
-/*
- * ╭───────────────────────────────────────────────╮
- * │ GTK NAMED COLORS │
- * ╰───────────────────────────────────────────────╯
-*/
+@import '../colours.css';
/*
- * ── widget text/foreground color ─────────────────────────────────────
-*/
-@define-color theme_fg_color {{ colour-foreground-hex }};
+ * 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
+ */
-/*
- * ── text color for entries, views and content in general ─────────────
-*/
-@define-color theme_text_color {{ colour-foreground-hex }};
-/*
- * ── widget base background color ─────────────────────────────────────
-*/
-@define-color theme_bg_color {{ colour-background-hex }};
+window {
+ color: #FFF;
+ background-color: #000;
+}
-/*
- * ── 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 }};
diff --git a/renderable/wlogout/layout b/renderable/wlogout/layout
index e69de29..86b2184 100644
--- a/renderable/wlogout/layout
+++ b/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"
+}