From 6e11c2cf870b718b841fc94c73f76c7b545fc716 Mon Sep 17 00:00:00 2001
From: Aleksander <aleksander@oo8.dev>
Date: Wed, 12 Nov 2025 17:49:05 +0100
Subject: [PATCH] themes cleanup, ui improvements

---
 dash-frontend/assets/gui/dashboard.xml        |  4 +-
 dash-frontend/assets/gui/t_menu_button.xml    |  2 +-
 dash-frontend/assets/gui/theme.xml            |  8 +--
 uidev/assets/gui/theme.xml                    |  8 ---
 uidev/assets/gui/wlx_theme.xml                |  6 +-
 wgui/src/globals.rs                           |  2 +
 wlx-overlay-s/src/assets/gui/bar.xml          |  8 +--
 wlx-overlay-s/src/assets/gui/edit.xml         | 25 ++++---
 wlx-overlay-s/src/assets/gui/keyboard.xml     | 22 ++++---
 wlx-overlay-s/src/assets/gui/theme.xml        | 15 +++--
 wlx-overlay-s/src/assets/gui/toolbox.xml      |  4 +-
 wlx-overlay-s/src/assets/gui/watch.xml        | 12 ++--
 wlx-overlay-s/src/main.rs                     |  9 +--
 .../src/overlays/keyboard/builder.rs          | 66 ++++++++++++-------
 wlx-overlay-s/src/overlays/keyboard/mod.rs    |  3 +-
 15 files changed, 105 insertions(+), 89 deletions(-)
 delete mode 100644 uidev/assets/gui/theme.xml

diff --git a/dash-frontend/assets/gui/dashboard.xml b/dash-frontend/assets/gui/dashboard.xml
index 0aab48a..9a46400 100644
--- a/dash-frontend/assets/gui/dashboard.xml
+++ b/dash-frontend/assets/gui/dashboard.xml
@@ -40,7 +40,7 @@
         <rectangle
           width="100%"
           round="100%"
-          color="~menu_dark"
+          color="~color_menu_dark"
           flex_direction="column"
           justify_content="center"
           align_items="center"
@@ -107,7 +107,7 @@
           flex_direction="row"
           align_items="center"
           justify_content="space_between"
-          color="~bottom_panel"
+          color="~color_bottom_panel"
         >
           <!-- left gradient -->
           <div position="absolute" width="100%" height="100%" justify_content="start">
diff --git a/dash-frontend/assets/gui/t_menu_button.xml b/dash-frontend/assets/gui/t_menu_button.xml
index 74c3da4..671189e 100644
--- a/dash-frontend/assets/gui/t_menu_button.xml
+++ b/dash-frontend/assets/gui/t_menu_button.xml
@@ -8,7 +8,7 @@
       height="82"
       color="#00000033"
       border_color="#FFFFFF77"
-      hover_color="~accent"
+      hover_color="~color_accent"
       hover_border_color="#FFFFFF"
       round="8">
       <div gap="8"
diff --git a/dash-frontend/assets/gui/theme.xml b/dash-frontend/assets/gui/theme.xml
index b8b1a0d..28f4e57 100644
--- a/dash-frontend/assets/gui/theme.xml
+++ b/dash-frontend/assets/gui/theme.xml
@@ -1,9 +1,7 @@
 <layout>
   <theme>
-    <var key="menu_dark" value="#0A0A0ACC" />
-    <var key="accent" value="#008cff" />
-    <var key="background_dark" value="#0d131acc" />
-    <var key="background_light" value="#244179aa" />
-    <var key="bottom_panel" value="#141e28" />
+    <var key="color_menu_dark" value="#0A0A0ACC" />
+    <var key="color_accent" value="#008cff" />
+    <var key="color_bottom_panel" value="#141e28" />
   </theme>
 </layout>
\ No newline at end of file
diff --git a/uidev/assets/gui/theme.xml b/uidev/assets/gui/theme.xml
deleted file mode 100644
index bcbda39..0000000
--- a/uidev/assets/gui/theme.xml
+++ /dev/null
@@ -1,8 +0,0 @@
-<layout>
-  <theme>
-    <var key="menu_dark" value="#0A0A0ACC" />
-    <var key="background_dark" value="#0d131acc" />
-    <var key="background_light" value="#244179aa" />
-    <var key="bottom_panel" value="#141e28" />
-  </theme>
-</layout>
\ No newline at end of file
diff --git a/uidev/assets/gui/wlx_theme.xml b/uidev/assets/gui/wlx_theme.xml
index fce1018..7f0b20d 100644
--- a/uidev/assets/gui/wlx_theme.xml
+++ b/uidev/assets/gui/wlx_theme.xml
@@ -1,8 +1,8 @@
 <layout>
+  <!-- TODO: deprecate this in favor of theme.xml -->
   <theme>
-    <var key="bg_color" value="#24273a" />
-    <var key="bg_color_active" value="#44475a" />
-    <var key="device_color" value="#666666" />
+    <var key="color_bg" value="#24273a" />
+    <var key="color_bg_active" value="#44475a" />
     <var key="text_color" value="#dddddd" />
   </theme>
 </layout>
\ No newline at end of file
diff --git a/wgui/src/globals.rs b/wgui/src/globals.rs
index 5250d5a..2fab224 100644
--- a/wgui/src/globals.rs
+++ b/wgui/src/globals.rs
@@ -15,6 +15,7 @@ pub struct Defaults {
 	pub dark_mode: bool,
 	pub text_color: drawing::Color,
 	pub button_color: drawing::Color,
+	pub accent_color: drawing::Color,
 }
 
 impl Default for Defaults {
@@ -23,6 +24,7 @@ impl Default for Defaults {
 			dark_mode: true,
 			text_color: drawing::Color::new(1.0, 1.0, 1.0, 1.0),
 			button_color: drawing::Color::new(1.0, 1.0, 1.0, 0.05),
+			accent_color: drawing::Color::new(0.0, 0.54, 1.0, 1.0),
 		}
 	}
 }
diff --git a/wlx-overlay-s/src/assets/gui/bar.xml b/wlx-overlay-s/src/assets/gui/bar.xml
index 34ae422..7d4f316 100644
--- a/wlx-overlay-s/src/assets/gui/bar.xml
+++ b/wlx-overlay-s/src/assets/gui/bar.xml
@@ -2,14 +2,14 @@
   <include src="wlx_theme.xml" />
 
   <template name="TopButton">
-    <rectangle id="~id" color="~bg_color" padding="8" round="50%">
-      <sprite color="~device_color" width="48" height="48" src="${src}" />
+    <rectangle id="~id" color="~color_bg" padding="8" round="50%">
+      <sprite width="48" height="48" src="${src}" />
     </rectangle>
   </template>
 
   <elements>
     <div box_sizing="content_box" flex_direction="column" justify_content="center">
-      <rectangle padding="10" gap="8" round="100%" color="~bg_color" justify_content="center">
+      <rectangle padding="10" gap="8" round="100%" color="~color_bg" justify_content="center">
         <TopButton id="lock" src="bar/lock_open.svg" />
         <TopButton id="anchor" src="bar/anchor.svg" />
         <TopButton id="mouse" src="bar/mouse.svg" />
@@ -19,7 +19,7 @@
         <TopButton id="inout" src="bar/inout.svg" />
         <TopButton id="delete" src="bar/delete.svg" />
       </rectangle>
-      <rectangle padding="8" gap="8" round="100%" color="~bg_color_active" justify_content="center" align_items="center">
+      <rectangle padding="8" gap="8" round="100%" color="~color_bg_active" justify_content="center" align_items="center">
         <label size="18" translation="BAR.OPACITY" color="~text_color" />
         <Slider width="150" height="24" min_value="0" max_value="100" value="100" />
         <CheckBox translation="BAR.ADDITIVE" color="~text_color" />
diff --git a/wlx-overlay-s/src/assets/gui/edit.xml b/wlx-overlay-s/src/assets/gui/edit.xml
index b56caa4..bbe1f7a 100644
--- a/wlx-overlay-s/src/assets/gui/edit.xml
+++ b/wlx-overlay-s/src/assets/gui/edit.xml
@@ -1,36 +1,33 @@
 <layout>
-  <theme>
-    <var key="border" value="2" />
-    <var key="tint_color" value="#0044CC99" />
-  </theme>
+  <include src="theme.xml" />
 
   <macro name="button_style"
     margin="2" overflow="hidden" box_sizing="border_box" align_items="center" justify_content="center"
     border="2" round="50%" padding="8" gradient="vertical" tooltip_side="bottom" />
-  
+
   <template name="TopButton">
-    <Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" border_color="#0044CC" color="#000A1C" color2="#000002" >
-      <sprite color="~device_color" width="48" height="48" src="${src}" />
+    <Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" border_color="#0044CC" color="#000A1C" color2="#000002">
+      <sprite width="48" height="48" src="${src}" />
     </Button>
   </template>
 
   <template name="TopButtonDanger">
-    <Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" border_color="#CC0000" color="#110000" color2="#020000" >
-      <sprite color="~device_color" width="48" height="48" src="${src}" />
+    <Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" border_color="#CC0000" color="#110000" color2="#020000">
+      <sprite width="48" height="48" src="${src}" />
     </Button>
   </template>
 
   <template name="TopButtonFaded">
-    <Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" border_color="#707070" color="#202020" color2="#010101" >
-      <sprite color="~device_color" width="48" height="48" src="${src}" />
+    <Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" border_color="#707070" color="#202020" color2="#010101">
+      <sprite width="48" height="48" src="${src}" />
     </Button>
   </template>
 
   <elements>
     <div width="100%" height="100%">
       <rectangle width="100%" height="100%" padding="4" gap="4" align_items="center" justify_content="center" color="#000000DD" flex_direction="row">
-          <div flex_direction="column">
-          <rectangle padding="20" gap="8" round="100%" color="~bg_color" justify_content="center" >
+        <div flex_direction="column">
+          <rectangle padding="16" gap="8" round="32" color="~color_bg" border="2" border_color="~color_accent" justify_content="center">
             <div flex_direction="column" gap="8">
               <label align="center" translation="Point on a window to change its parameters.&#xA;Once done, leave edit mode using the button on the right." />
               <div flex_direction="row" gap="4">
@@ -59,4 +56,4 @@
       </rectangle>
     </div>
   </elements>
-</layout>
+</layout>
\ No newline at end of file
diff --git a/wlx-overlay-s/src/assets/gui/keyboard.xml b/wlx-overlay-s/src/assets/gui/keyboard.xml
index 5c07676..e2f6db9 100644
--- a/wlx-overlay-s/src/assets/gui/keyboard.xml
+++ b/wlx-overlay-s/src/assets/gui/keyboard.xml
@@ -1,7 +1,9 @@
 <layout>
+  <include src="theme.xml" />
+
   <macro name="keycap_rect"
     margin="2" width="100%" overflow="hidden" box_sizing="border_box"
-    border_color="#0044CC" border="2" round="8" color="#000A1C" color2="#000002" gradient="vertical"
+    border_color="~color_accent_translucent" border="2" round="8" color="~color_accent_5" color2="~color_accent_1" gradient="vertical"
     align_items="center" justify_content="center" />
 
   <macro name="keycap_div"
@@ -15,7 +17,7 @@
   <template name="KeySpecial">
     <div macro="keycap_div">
       <rectangle id="${id}" macro="keycap_rect">
-        <sprite color="#FFFFFF" width="32" height="32" src="keyboard/${text}.svg" />
+        <sprite width="32" height="32" src="keyboard/${text}.svg" />
       </rectangle>
     </div>
   </template>
@@ -25,7 +27,7 @@
   <template name="KeyLetter">
     <div macro="keycap_div">
       <rectangle id="${id}" macro="keycap_rect">
-        <label color="#FFFFFF" text="${text}" size="24" />
+        <label text="${text}" size="24" />
       </rectangle>
     </div>
   </template>
@@ -35,8 +37,8 @@
   <template name="KeyLetterAltGr">
     <div macro="keycap_div">
       <rectangle id="${id}" macro="keycap_rect" gap="4">
-        <label color="#FFFFFF" text="${text}" size="24" />
-        <label color="#FFFFFF70" text="${text_altgr}" size="24" />
+        <label text="${text}" size="24" />
+        <label color="~color_text_translucent" text="${text_altgr}" size="24" />
       </rectangle>
     </div>
   </template>
@@ -46,8 +48,8 @@
   <template name="KeySymbol">
     <div macro="keycap_div">
       <rectangle id="${id}" macro="keycap_rect" gap="4">
-        <label color="#FFFFFF70" text="${text_shift}" size="24" />
-        <label color="#FFFFFF" text="${text}" size="24" />
+        <label color="~color_text_translucent" text="${text_shift}" size="24" />
+        <label text="${text}" size="24" />
       </rectangle>
     </div>
   </template>
@@ -58,14 +60,14 @@
     <div macro="keycap_div">
       <rectangle id="${id}" macro="keycap_rect" flex_direction="row" flex_wrap="wrap">
         <div width="50%" height="50%" align_items="center" justify_content="center">
-          <label color="#FFFFFF70" text="${text_shift}" size="24" />
+          <label color="~color_text_translucent" text="${text_shift}" size="24" />
         </div>
         <div width="50%" height="50%" align_items="center" justify_content="center" />
         <div width="50%" height="50%" align_items="center" justify_content="center">
-          <label color="#FFFFFF" text="${text}" size="24" />
+          <label text="${text}" size="24" />
         </div>
         <div width="50%" height="50%" align_items="center" justify_content="center">
-          <label color="#FFFFFF70" text="${text_altgr}" size="24" />
+          <label color="~color_text_translucent" text="${text_altgr}" size="24" />
         </div>
       </rectangle>
     </div>
diff --git a/wlx-overlay-s/src/assets/gui/theme.xml b/wlx-overlay-s/src/assets/gui/theme.xml
index 61ef159..550aa60 100644
--- a/wlx-overlay-s/src/assets/gui/theme.xml
+++ b/wlx-overlay-s/src/assets/gui/theme.xml
@@ -1,9 +1,12 @@
 <layout>
   <theme>
-    <var key="menu_dark" value="#0A0A0ACC" />
-    <var key="background_dark" value="#0d131acc" />
-    <var key="background_light" value="#244179aa" />
-    <var key="bottom_panel" value="#141e28" />
-  </theme>
-</layout>
+    <var key="color_text" value="#FFFFFF" />
+    <var key="color_text_translucent" value="#FFFFFF40" />
 
+    <var key="color_accent" value="#008cff" />
+    <var key="color_accent_translucent" value="#008cff40" />
+    <var key="color_accent_20" value="#001c33" /> <!-- 20% brightness -->
+    <var key="color_accent_5" value="#00070d" /> <!-- 5% brightness -->
+    <var key="color_accent_1" value="#000103" /> <!-- 1% brightness -->
+  </theme>
+</layout>
\ No newline at end of file
diff --git a/wlx-overlay-s/src/assets/gui/toolbox.xml b/wlx-overlay-s/src/assets/gui/toolbox.xml
index 49568fa..6f7c281 100644
--- a/wlx-overlay-s/src/assets/gui/toolbox.xml
+++ b/wlx-overlay-s/src/assets/gui/toolbox.xml
@@ -18,7 +18,7 @@
 
   <elements>
     <div width="400" height="200">
-      <rectangle width="100%" height="100%" padding="4" box_sizing="content_box" flex_wrap="wrap" flex_direction="column" gap="4" color="~bg_color">
+      <rectangle width="100%" height="100%" padding="4" box_sizing="content_box" flex_wrap="wrap" flex_direction="column" gap="4" color="~color_bg">
         <label text="Select set to edit" size="48" color="#ffffff" weight="bold" />
         <div width="100%" flex_direction="row">
           <div id="sets">
@@ -32,4 +32,4 @@
       </rectangle>
     </div>
   </elements>
-</layout>
+</layout>
\ No newline at end of file
diff --git a/wlx-overlay-s/src/assets/gui/watch.xml b/wlx-overlay-s/src/assets/gui/watch.xml
index b166350..601848a 100644
--- a/wlx-overlay-s/src/assets/gui/watch.xml
+++ b/wlx-overlay-s/src/assets/gui/watch.xml
@@ -19,10 +19,10 @@
     border_color="#0044CC" border="2" round="8" color="#000A1C" color2="#000002" gradient="vertical" />
 
   <template name="Device">
-    <sprite color="~device_color" width="${size}" height="${size}" src="${src}" />
-      <div position="absolute" margin_top="10" margin_left="9">
-        <label _source="battery" _device="${device}" size="18" shadow="#000000" weight="bold" />
-      </div>
+    <sprite width="${size}" height="${size}" src="${src}" />
+    <div position="absolute" margin_top="10" margin_left="9">
+      <label _source="battery" _device="${device}" size="18" shadow="#000000" weight="bold" />
+    </div>
   </template>
 
   <template name="Set">
@@ -36,7 +36,7 @@
 
   <elements>
     <div width="460" height="260" padding="30" interactable="0">
-      <rectangle width="100%" height="100%" padding="4" box_sizing="content_box" flex_wrap="wrap" flex_direction="column" gap="4" color="~bg_color">
+      <rectangle width="100%" height="100%" padding="4" box_sizing="content_box" flex_wrap="wrap" flex_direction="column" gap="4" color="~color_bg">
         <div width="100%" flex_direction="row">
           <Device src="watch/hmd.svg" size="40" device="0" />
           <Device src="watch/controller_l.svg" size="36" device="1" />
@@ -77,4 +77,4 @@
       </rectangle>
     </div>
   </elements>
-</layout>
+</layout>
\ No newline at end of file
diff --git a/wlx-overlay-s/src/main.rs b/wlx-overlay-s/src/main.rs
index 29dcef3..3a1a72d 100644
--- a/wlx-overlay-s/src/main.rs
+++ b/wlx-overlay-s/src/main.rs
@@ -1,6 +1,7 @@
 #![warn(clippy::all, clippy::pedantic, clippy::nursery, clippy::cargo)]
 #![allow(
     dead_code,
+    clippy::suboptimal_flops,
     clippy::default_trait_access,
     clippy::cast_precision_loss,
     clippy::cast_possible_truncation,
@@ -31,8 +32,8 @@ mod config_wayvr;
 use std::{
     path::PathBuf,
     sync::{
-        atomic::{AtomicBool, Ordering},
         Arc,
+        atomic::{AtomicBool, Ordering},
     },
 };
 
@@ -40,7 +41,7 @@ use clap::Parser;
 use subsystem::notifications::DbusNotificationSender;
 use sysinfo::Pid;
 use tracing::level_filters::LevelFilter;
-use tracing_subscriber::{layer::SubscriberExt, util::SubscriberInitExt, EnvFilter};
+use tracing_subscriber::{EnvFilter, layer::SubscriberExt, util::SubscriberInitExt};
 
 /// The lightweight desktop overlay for OpenVR and OpenXR
 #[derive(Default, Parser, Debug)]
@@ -135,7 +136,7 @@ fn auto_run(running: Arc<AtomicBool>, args: Args) {
 
     #[cfg(feature = "openxr")]
     if !args_get_openvr(&args) {
-        use crate::backend::{openxr::openxr_run, BackendError};
+        use crate::backend::{BackendError, openxr::openxr_run};
         tried_xr = true;
         match openxr_run(running.clone(), args.show, args.headless) {
             Ok(()) => return,
@@ -149,7 +150,7 @@ fn auto_run(running: Arc<AtomicBool>, args: Args) {
 
     #[cfg(feature = "openvr")]
     if !args_get_openxr(&args) {
-        use crate::backend::{openvr::openvr_run, BackendError};
+        use crate::backend::{BackendError, openvr::openvr_run};
         tried_vr = true;
         match openvr_run(running, args.show, args.headless) {
             Ok(()) => return,
diff --git a/wlx-overlay-s/src/overlays/keyboard/builder.rs b/wlx-overlay-s/src/overlays/keyboard/builder.rs
index 9773e09..b599cc8 100644
--- a/wlx-overlay-s/src/overlays/keyboard/builder.rs
+++ b/wlx-overlay-s/src/overlays/keyboard/builder.rs
@@ -1,37 +1,37 @@
 use std::{collections::HashMap, rc::Rc};
 
-use glam::{vec2, vec3, Affine3A, Mat4, Quat, Vec2, Vec3};
+use glam::{Affine3A, FloatExt, Mat4, Quat, Vec2, Vec3, vec2, vec3};
 use wgui::{
     animation::{Animation, AnimationEasing},
     assets::AssetPath,
-    drawing::Color,
+    drawing::{self, Color},
     event::{self, CallbackMetadata, EventListenerKind},
     layout::LayoutParams,
     parser::Fetchable,
     renderer_vk::util,
     taffy::{self, prelude::length},
     widget::{
+        EventResult,
         div::WidgetDiv,
         rectangle::{WidgetRectangle, WidgetRectangleParams},
         util::WLength,
-        EventResult,
     },
 };
 
 use crate::{
     gui::panel::GuiPanel,
     state::AppState,
-    subsystem::hid::{XkbKeymap, ALT, CTRL, META, SHIFT, SUPER},
+    subsystem::hid::{ALT, CTRL, META, SHIFT, SUPER, XkbKeymap},
     windowing::window::{OverlayWindowConfig, OverlayWindowState, Positioning},
 };
 
 use super::{
-    handle_press, handle_release,
+    KEYBOARD_NAME, KeyButtonData, KeyState, KeyboardBackend, KeyboardState, handle_press,
+    handle_release,
     layout::{self, AltModifier, KeyCapType},
-    KeyButtonData, KeyState, KeyboardBackend, KeyboardState, KEYBOARD_NAME,
 };
 
-const BACKGROUND_PADDING: f32 = 4.;
+const BACKGROUND_PADDING: f32 = 16.0;
 const PIXELS_PER_UNIT: f32 = 80.;
 
 #[allow(clippy::too_many_lines, clippy::significant_drop_tightening)]
@@ -55,11 +55,16 @@ pub fn create_keyboard(
 
     let mut panel = GuiPanel::new_blank(app, state, false)?;
 
+    let globals = app.wgui_globals.clone();
+    let accent_color = globals.get().defaults.accent_color;
+
     let (background, _) = panel.layout.add_child(
         panel.layout.content_root_widget,
         WidgetRectangle::create(WidgetRectangleParams {
-            color: wgui::drawing::Color::new(0., 0., 0., 0.6),
-            round: WLength::Units(4.0),
+            color: wgui::drawing::Color::new(0., 0., 0., 0.75),
+            round: WLength::Units(16.0),
+            border: 2.0,
+            border_color: accent_color,
             ..Default::default()
         }),
         taffy::Style {
@@ -76,7 +81,7 @@ pub fn create_keyboard(
     }
 
     let parse_doc_params = wgui::parser::ParseDocumentParams {
-        globals: app.wgui_globals.clone(),
+        globals,
         path: AssetPath::BuiltIn("gui/keyboard.xml"),
         extra: Default::default(),
     };
@@ -182,6 +187,7 @@ pub fn create_keyboard(
                         color: rect.params.color,
                         color2: rect.params.color2,
                         border_color: rect.params.border_color,
+                        border: rect.params.border,
                         drawn_state: false.into(),
                     })
                 };
@@ -193,7 +199,7 @@ pub fn create_keyboard(
                         let k = key_state.clone();
                         move |common, data, _app, _state| {
                             common.alterables.trigger_haptics();
-                            on_enter_anim(k.clone(), common, data);
+                            on_enter_anim(k.clone(), common, data, accent_color);
                             Ok(EventResult::Pass)
                         }
                     }),
@@ -205,7 +211,7 @@ pub fn create_keyboard(
                         let k = key_state.clone();
                         move |common, data, _app, _state| {
                             common.alterables.trigger_haptics();
-                            on_leave_anim(k.clone(), common, data);
+                            on_leave_anim(k.clone(), common, data, accent_color);
                             Ok(EventResult::Pass)
                         }
                     }),
@@ -295,23 +301,36 @@ fn get_anim_transform(pos: f32, widget_size: Vec2) -> Mat4 {
     )
 }
 
-fn set_anim_color(key_state: &KeyState, rect: &mut WidgetRectangle, pos: f32) {
-    let br1 = pos * 0.25;
-    let br2 = pos * 0.15;
+fn set_anim_color(
+    key_state: &KeyState,
+    rect: &mut WidgetRectangle,
+    pos: f32,
+    accent_color: drawing::Color,
+) {
+    // fade to accent color
+    rect.params.color.r = key_state.color.r.lerp(accent_color.r, pos);
+    rect.params.color.g = key_state.color.g.lerp(accent_color.g, pos);
+    rect.params.color.b = key_state.color.b.lerp(accent_color.b, pos);
 
-    rect.params.color.r = key_state.color.r + br1;
-    rect.params.color.g = key_state.color.g + br1;
-    rect.params.color.b = key_state.color.b + br1;
+    // fade to accent color
+    rect.params.color2.r = key_state.color2.r.lerp(accent_color.r, pos);
+    rect.params.color2.g = key_state.color2.g.lerp(accent_color.g, pos);
+    rect.params.color2.b = key_state.color2.b.lerp(accent_color.b, pos);
 
-    rect.params.color2.r = key_state.color2.r + br2;
-    rect.params.color2.g = key_state.color2.g + br2;
-    rect.params.color2.b = key_state.color2.b + br2;
+    // fade to white
+    rect.params.border_color.r = key_state.border_color.r.lerp(1.0, pos);
+    rect.params.border_color.g = key_state.border_color.g.lerp(1.0, pos);
+    rect.params.border_color.b = key_state.border_color.b.lerp(1.0, pos);
+    rect.params.border_color.a = key_state.border_color.a.lerp(1.0, pos);
+
+    rect.params.border = key_state.border.lerp(key_state.border * 1.5, pos);
 }
 
 fn on_enter_anim(
     key_state: Rc<KeyState>,
     common: &mut event::CallbackDataCommon,
     data: &event::CallbackData,
+    accent_color: drawing::Color,
 ) {
     common.alterables.animate(Animation::new(
         data.widget_id,
@@ -319,7 +338,7 @@ fn on_enter_anim(
         AnimationEasing::OutBack,
         Box::new(move |common, data| {
             let rect = data.obj.get_as_mut::<WidgetRectangle>().unwrap();
-            set_anim_color(&key_state, rect, data.pos);
+            set_anim_color(&key_state, rect, data.pos, accent_color);
             data.data.transform = get_anim_transform(data.pos, data.widget_boundary.size);
             common.alterables.mark_redraw();
         }),
@@ -330,6 +349,7 @@ fn on_leave_anim(
     key_state: Rc<KeyState>,
     common: &mut event::CallbackDataCommon,
     data: &event::CallbackData,
+    accent_color: drawing::Color,
 ) {
     common.alterables.animate(Animation::new(
         data.widget_id,
@@ -337,7 +357,7 @@ fn on_leave_anim(
         AnimationEasing::OutQuad,
         Box::new(move |common, data| {
             let rect = data.obj.get_as_mut::<WidgetRectangle>().unwrap();
-            set_anim_color(&key_state, rect, 1.0 - data.pos);
+            set_anim_color(&key_state, rect, 1.0 - data.pos, accent_color);
             data.data.transform = get_anim_transform(1.0 - data.pos, data.widget_boundary.size);
             common.alterables.mark_redraw();
         }),
diff --git a/wlx-overlay-s/src/overlays/keyboard/mod.rs b/wlx-overlay-s/src/overlays/keyboard/mod.rs
index 9bdc7f0..7c03abc 100644
--- a/wlx-overlay-s/src/overlays/keyboard/mod.rs
+++ b/wlx-overlay-s/src/overlays/keyboard/mod.rs
@@ -12,7 +12,7 @@ use crate::{
     backend::input::{HoverResult, PointerHit},
     gui::panel::GuiPanel,
     state::AppState,
-    subsystem::hid::{KeyModifier, VirtualKey, WheelDelta, ALT, CTRL, META, SHIFT, SUPER},
+    subsystem::hid::{ALT, CTRL, KeyModifier, META, SHIFT, SUPER, VirtualKey, WheelDelta},
     windowing::backend::{FrameMeta, OverlayBackend, RenderResources, ShouldRender},
 };
 
@@ -91,6 +91,7 @@ struct KeyState {
     color: drawing::Color,
     color2: drawing::Color,
     border_color: drawing::Color,
+    border: f32,
     drawn_state: Cell<bool>,
 }