From d120b7a49e8343705aa1ec2dd54ccd48c13cd74e Mon Sep 17 00:00:00 2001 From: Janis Hutz Date: Fri, 25 Apr 2025 10:05:42 +0200 Subject: [PATCH] [Gtk-Theme] Pre-Processing + Some other work --- build/render.js | 47 +++++++------ build/util.js | 50 +++++++++++++- config/astal/util/colours.scss | 8 +-- config/hypr/hyprland/colors.conf | 16 +++++ config/hypr/hyprland/general.conf | 3 +- config/hypr/hyprlock.conf | 100 +++++++++++++++++++++++++++ config/wlogout/style.css | 65 +++++++++++++++++ config/yazi/theme.toml | 2 + gtk-theme/dist/gtk-3.0/gtk.css | 106 ++++++++++++++++++++++++++++ gtk-theme/dist/gtk-4.0/gtk.css | 23 +++++++ gtk-theme/dist/index.theme | 8 +++ gtk-theme/src/colours.css | 65 +++++++++++++++++ gtk-theme/src/gtk-3.0/gtk.css | 6 ++ gtk-theme/src/gtk-4.0/gtk.css | 111 +++++------------------------- renderable/wlogout/layout | 30 ++++++++ 15 files changed, 517 insertions(+), 123 deletions(-) create mode 100644 config/hypr/hyprland/colors.conf create mode 100644 config/hypr/hyprlock.conf create mode 100644 config/wlogout/style.css create mode 100644 config/yazi/theme.toml create mode 100644 gtk-theme/dist/gtk-3.0/gtk.css create mode 100644 gtk-theme/dist/gtk-4.0/gtk.css create mode 100644 gtk-theme/dist/index.theme create mode 100644 gtk-theme/src/colours.css 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" +}