From 2a43bf75db1dea876ddeba194df6d3729a8cd671 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Fri, 8 Nov 2024 15:48:20 +0100
Subject: [PATCH] added hex

---
 src/test/mod.rs    | 10 ++--------
 src/ui/elements.rs |  2 +-
 src/ui/styles.rs   | 39 +++++++++++++++++++++++++++++++++++++--
 3 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/src/test/mod.rs b/src/test/mod.rs
index 1e0d296..cb4351a 100644
--- a/src/test/mod.rs
+++ b/src/test/mod.rs
@@ -1,13 +1,7 @@
-use crate::{self as osui, rsx, ui::*, val, Element};
+use crate::{self as osui, rsx, ui::*, Element};
 
 pub fn app() -> Box<dyn Element> {
     rsx! {
-        custom_component { width: val!(20), "" }
-    }
-}
-
-pub fn custom_component<'a>() -> Box<Div<'a>> {
-    rsx! {
-        button { style.clicked_background: Color::Red, "test" }
+        button { "ok" }
     }
 }
diff --git a/src/ui/elements.rs b/src/ui/elements.rs
index 960958b..f618d8d 100644
--- a/src/ui/elements.rs
+++ b/src/ui/elements.rs
@@ -35,7 +35,7 @@ element! {
     /// The `Button` element can be clicked, triggering an `on_click` function. Its appearance changes
     /// based on its interaction state, such as being "clicked".
     Button {
-        /// A callback function executed when the button is clicked.
+        /// A callback function executed when the button is clicked. use `arc!` to use function
         pub on_click: Arc<Mutex<dyn FnMut(&mut Button)>>,
     }
 
diff --git a/src/ui/styles.rs b/src/ui/styles.rs
index 63fa33b..0a30369 100644
--- a/src/ui/styles.rs
+++ b/src/ui/styles.rs
@@ -45,7 +45,9 @@ impl Font {
 #[derive(Debug, Clone, PartialEq)]
 pub enum Color {
     None,
+    /// Red, Green, blue
     Rgb(u8, u8, u8), // RGB color representation.
+    Hex(String),
     Black,
     Red,
     Green,
@@ -61,7 +63,11 @@ impl Color {
     pub fn ansi(&self) -> String {
         String::from(match self {
             Color::None => "",
-            Self::Rgb(r, g, b) => {
+            Color::Rgb(r, g, b) => {
+                return format!("\x1b[38;2;{r};{g};{b}m");
+            }
+            Color::Hex(hex) => {
+                let (r, g, b) = hex_to_rgb(hex);
                 return format!("\x1b[38;2;{r};{g};{b}m");
             }
             Color::Black => "\x1b[30m",
@@ -79,7 +85,11 @@ impl Color {
     pub fn ansi_bg(&self) -> String {
         String::from(match self {
             Color::None => "",
-            Self::Rgb(r, g, b) => {
+            Color::Rgb(r, g, b) => {
+                return format!("\x1b[48;2;{r};{g};{b}m");
+            }
+            Color::Hex(hex) => {
+                let (r, g, b) = hex_to_rgb(hex);
                 return format!("\x1b[48;2;{r};{g};{b}m");
             }
             Color::Black => "\x1b[40m",
@@ -114,4 +124,29 @@ impl Default for Font {
     fn default() -> Self {
         Font::None
     }
+}
+
+fn hex_to_rgb(hex: &str) -> (u8, u8, u8) {
+    let hex = hex.trim_start_matches('#');
+
+    // Expand 3-character hex codes to 6 characters
+    let hex = if hex.len() == 3 {
+        format!(
+            "{}{}{}{}{}{}",
+            &hex[0..1], &hex[0..1],
+            &hex[1..2], &hex[1..2],
+            &hex[2..3], &hex[2..3]
+        )
+    } else if hex.len() == 6 {
+        hex.to_string()
+    } else {
+        return (255, 255, 255); // Return white for invalid hex length
+    };
+
+    // Parse each pair of characters as u8
+    let r = u8::from_str_radix(&hex[0..2], 16).unwrap_or(255);
+    let g = u8::from_str_radix(&hex[2..4], 16).unwrap_or(255);
+    let b = u8::from_str_radix(&hex[4..6], 16).unwrap_or(255);
+
+    (r, g, b)
 }
\ No newline at end of file