git.lucas.co / cce-ui
GPU-accelerated UI toolkit (Vulkan)
git clone https://git.lucas.co/cce-ui.git

commit984678e86bb70547c5b0f6ff047a27cd776e0df6
parentbd0565a096
authorLucas Galante <[email protected]>
date2026-07-05 14:43
feat: add config-backed color keys for progressbar and rangeslider controls

 src/color.rs                       | 61 ++++++++++++++++++++++++++++++++++++++
 src/widget/display/progress_bar.rs |  9 +++++-
 src/widget/input/slider.rs         |  8 ++---
 3 files changed, 73 insertions(+), 5 deletions(-)

diff --git a/src/color.rs b/src/color.rs
index f529593..0886ac3 100644
--- a/src/color.rs
+++ b/src/color.rs
@@ -68,6 +68,11 @@ static RAMP_BORDER_COLOR: RwLock<[f32; 4]> = RwLock::new([0.18, 0.18, 0.24, 1.0]
 static CONTROL_PANEL_COLOR: RwLock<[f32; 4]> = RwLock::new([0.075, 0.082, 0.11, 1.0]); // default #13151cff
 static CONTROL_PANEL_BORDER_COLOR: RwLock<[f32; 4]> = RwLock::new([0.161, 0.173, 0.216, 1.0]); // default #292c37ff
 
+static PROGRESS_BG_COLOR: RwLock<[f32; 4]> = RwLock::new(PROGRESS_BG);
+static PROGRESS_FILL_COLOR: RwLock<[f32; 4]> = RwLock::new(PROGRESS_FILL);
+static RANGE_SLIDER_TRACK_COLOR: RwLock<[f32; 4]> = RwLock::new(SLIDER_TRACK);
+static RANGE_SLIDER_FILL_COLOR: RwLock<[f32; 4]> = RwLock::new(PROGRESS_FILL);
+
 static TREE_BACKGROUND_COLOR: RwLock<[f32; 4]> = RwLock::new([0.08, 0.08, 0.12, 0.3]);
 static TREE_BORDER_COLOR: RwLock<[f32; 4]> = RwLock::new([0.18, 0.18, 0.24, 1.0]);
 static TREE_BORDER_HOVER_COLOR: RwLock<[f32; 4]> = RwLock::new([0.25, 0.25, 0.35, 1.0]);
@@ -341,6 +346,18 @@ fn parse_and_set_colors(content: &str) {
     if let Some(c) = get_color("/style/control/control_panel/border_color") {
         if let Ok(mut lock) = CONTROL_PANEL_BORDER_COLOR.write() { *lock = c; }
     }
+    if let Some(c) = get_color("/style/control/progressbar/background") {
+        if let Ok(mut lock) = PROGRESS_BG_COLOR.write() { *lock = c; }
+    }
+    if let Some(c) = get_color("/style/control/progressbar/fill") {
+        if let Ok(mut lock) = PROGRESS_FILL_COLOR.write() { *lock = c; }
+    }
+    if let Some(c) = get_color("/style/control/rangeslider/track") {
+        if let Ok(mut lock) = RANGE_SLIDER_TRACK_COLOR.write() { *lock = c; }
+    }
+    if let Some(c) = get_color("/style/control/rangeslider/fill") {
+        if let Ok(mut lock) = RANGE_SLIDER_FILL_COLOR.write() { *lock = c; }
+    }
     let parsed_list_bg = get_color("/layout/list_bg_color");
     let parsed_breadcrumb_bg = get_color("/layout/breadcrumb_bg_color");
     let parsed_popover_bg = get_color("/layout/popover_bg_color");
@@ -1021,6 +1038,50 @@ pub fn set_control_panel_border_color(color: [f32; 4]) {
     }
 }
 
+pub fn progress_bg() -> [f32; 4] {
+    load_colors_once();
+    *PROGRESS_BG_COLOR.read().unwrap()
+}
+
+pub fn set_progress_bg(color: [f32; 4]) {
+    if let Ok(mut lock) = PROGRESS_BG_COLOR.write() {
+        *lock = color;
+    }
+}
+
+pub fn progress_fill() -> [f32; 4] {
+    load_colors_once();
+    *PROGRESS_FILL_COLOR.read().unwrap()
+}
+
+pub fn set_progress_fill(color: [f32; 4]) {
+    if let Ok(mut lock) = PROGRESS_FILL_COLOR.write() {
+        *lock = color;
+    }
+}
+
+pub fn rangeslider_track() -> [f32; 4] {
+    load_colors_once();
+    *RANGE_SLIDER_TRACK_COLOR.read().unwrap()
+}
+
+pub fn set_rangeslider_track(color: [f32; 4]) {
+    if let Ok(mut lock) = RANGE_SLIDER_TRACK_COLOR.write() {
+        *lock = color;
+    }
+}
+
+pub fn rangeslider_fill() -> [f32; 4] {
+    load_colors_once();
+    *RANGE_SLIDER_FILL_COLOR.read().unwrap()
+}
+
+pub fn set_rangeslider_fill(color: [f32; 4]) {
+    if let Ok(mut lock) = RANGE_SLIDER_FILL_COLOR.write() {
+        *lock = color;
+    }
+}
+
 pub fn set_backplate_corner_radius(radius: f32) {
     if let Ok(mut lock) = BACKPLATE_CORNER_RADIUS.write() {
         *lock = radius;
diff --git a/src/widget/display/progress_bar.rs b/src/widget/display/progress_bar.rs
index 8c22a67..d6f1583 100644
--- a/src/widget/display/progress_bar.rs
+++ b/src/widget/display/progress_bar.rs
@@ -32,5 +32,12 @@ impl Element for ProgressBar {
 
     fn highlight_quad(&self, _ctx: &UiContext) -> Option<(f32, f32, f32, f32, [f32; 4])>{ None }
 
-    fn color(&self) -> [f32; 4] { colors::PROGRESS_BG }
+    fn color(&self) -> [f32; 4] { colors::progress_bg() }
+
+    fn extra_quads(&self) -> Vec<(f32, f32, f32, f32, [f32; 4])> {
+        let top = self.base.label_offset();
+        let visual_h = self.base.h - top;
+        let fill_w = self.base.w * self._value.clamp(0.0, 1.0);
+        vec![(self.base.x, self.base.y + top, fill_w, visual_h, colors::progress_fill())]
+    }
 }
diff --git a/src/widget/input/slider.rs b/src/widget/input/slider.rs
index 6337378..d78caf9 100644
--- a/src/widget/input/slider.rs
+++ b/src/widget/input/slider.rs
@@ -762,8 +762,8 @@ impl Element for RangeSlider {
         };
 
         vec![
-            (self.base.x, self.base.y + top, self.base.w, visual_h, colors::slider_track()),
-            (highlight_x, highlight_y, highlight_w, highlight_h, colors::PROGRESS_FILL),
+            (self.base.x, self.base.y + top, self.base.w, visual_h, colors::rangeslider_track()),
+            (highlight_x, highlight_y, highlight_w, highlight_h, colors::rangeslider_fill()),
             (thumb_low_x, thumb_y, thumb_size, thumb_size, low_color),
             (thumb_high_x, thumb_y, thumb_size, thumb_size, high_color),
         ]
@@ -806,9 +806,9 @@ impl Element for RangeSlider {
         };
         
         // Track background
-        quads.push((self.base.x, self.base.y + top, self.base.w, visual_h, radius, colors::slider_track(), (r1, r2, r3, r4)));
+        quads.push((self.base.x, self.base.y + top, self.base.w, visual_h, radius, colors::rangeslider_track(), (r1, r2, r3, r4)));
         // Progress fill (highlight track)
-        quads.push((highlight_x, highlight_y, highlight_w, highlight_h, radius.min(highlight_h / 2.0), colors::PROGRESS_FILL, (true, true, true, true)));
+        quads.push((highlight_x, highlight_y, highlight_w, highlight_h, radius.min(highlight_h / 2.0), colors::rangeslider_fill(), (true, true, true, true)));
         // Low thumb
         quads.push((thumb_low_x, thumb_y, thumb_size, thumb_size, thumb_size / 2.0, low_color, (true, true, true, true)));
         // High thumb