Add ButtonCustomStyle for customized color (#85)

crates/ui/src/button.rs

@@ -24,6 +24,52 @@ impl From<Pixels> for ButtonRounded {
     }
 }
 
+#[derive(Clone, Copy)]
+pub struct ButtonCustomStyle {
+    color: Hsla,
+    foreground: Hsla,
+    border: Hsla,
+    hover: Hsla,
+    active: Hsla,
+}
+
+impl ButtonCustomStyle {
+    pub fn new(cx: &WindowContext) -> Self {
+        Self {
+            color: cx.theme().secondary,
+            foreground: cx.theme().secondary_foreground,
+            border: cx.theme().border,
+            hover: cx.theme().secondary_hover,
+            active: cx.theme().secondary_active,
+        }
+    }
+
+    pub fn color(mut self, color: Hsla) -> Self {
+        self.color = color;
+        self
+    }
+
+    pub fn foreground(mut self, color: Hsla) -> Self {
+        self.foreground = color;
+        self
+    }
+
+    pub fn border(mut self, color: Hsla) -> Self {
+        self.border = color;
+        self
+    }
+
+    pub fn hover(mut self, color: Hsla) -> Self {
+        self.hover = color;
+        self
+    }
+
+    pub fn active(mut self, color: Hsla) -> Self {
+        self.active = color;
+        self
+    }
+}
+
 #[derive(Clone, Copy)]
 pub enum ButtonStyle {
     Primary,
@@ -31,6 +77,7 @@ pub enum ButtonStyle {
     Danger,
     Outline,
     Ghost,
+    Custom(ButtonCustomStyle),
 }
 
 #[derive(IntoElement)]
@@ -306,6 +353,7 @@ impl ButtonStyle {
             ButtonStyle::Danger => cx.theme().destructive,
             ButtonStyle::Outline => cx.theme().transparent,
             ButtonStyle::Ghost => cx.theme().transparent,
+            ButtonStyle::Custom(colors) => colors.color,
         }
     }
 
@@ -316,6 +364,7 @@ impl ButtonStyle {
             ButtonStyle::Danger => cx.theme().destructive_foreground,
             ButtonStyle::Outline => cx.theme().secondary_foreground,
             ButtonStyle::Ghost => cx.theme().secondary_foreground,
+            ButtonStyle::Custom(colors) => colors.foreground,
         }
     }
 
@@ -326,6 +375,7 @@ impl ButtonStyle {
             ButtonStyle::Danger => cx.theme().destructive,
             ButtonStyle::Outline => cx.theme().border,
             ButtonStyle::Ghost => cx.theme().transparent,
+            ButtonStyle::Custom(colors) => colors.border,
         }
     }
 
@@ -344,6 +394,7 @@ impl ButtonStyle {
             ButtonStyle::Danger => cx.theme().destructive_hover,
             ButtonStyle::Outline => cx.theme().secondary_hover,
             ButtonStyle::Ghost => cx.theme().secondary,
+            ButtonStyle::Custom(colors) => colors.hover,
         };
         let border = self.border_color(cx);
         let fg = self.text_color(cx);
@@ -358,6 +409,7 @@ impl ButtonStyle {
             ButtonStyle::Danger => cx.theme().destructive_active,
             ButtonStyle::Outline => cx.theme().secondary_active,
             ButtonStyle::Ghost => cx.theme().secondary_active,
+            ButtonStyle::Custom(colors) => colors.active,
         };
         let border = self.border_color(cx);
         let fg = self.text_color(cx);
@@ -372,6 +424,7 @@ impl ButtonStyle {
             ButtonStyle::Danger => cx.theme().destructive_active,
             ButtonStyle::Outline => cx.theme().secondary_active,
             ButtonStyle::Ghost => cx.theme().secondary_active,
+            ButtonStyle::Custom(colors) => colors.active,
         };
         let border = self.border_color(cx);
         let fg = self.text_color(cx);

crates/ui/src/theme.rs

@@ -164,30 +164,6 @@ struct Colors {
 }
 
 impl Colors {
-    // .light {
-    //     --title_bar_background: 0 0% 100%;
-    //     --background: 0 0% 100%;
-    //     --foreground: 240 10% 3.9%;
-    //     --card: 0 0% 100%;
-    //     --card-foreground: 240 10% 3.9%;
-    //     --popover: 0 0% 100%;
-    //     --popover-foreground: 240 10% 3.9%;
-    //     --primary: 240 5.9% 10%;
-    //     --primary-foreground: 0 0% 98%;
-    //     --secondary: 240 4.8% 95.9%;
-    //     --secondary-foreground: 240 5.9% 10%;
-    //     --muted: 240 4.8% 95.9%;
-    //     --muted-foreground: 240 3.8% 46.1%;
-    //     --accent: 240 4.8% 95.9%;
-    //     --accent-foreground: 240 5.9% 10%;
-    //     --destructive: 0 84.2% 60.2%;
-    //     --destructive-foreground: 0 0% 98%;
-    //     --border: 240 5.9% 90%;
-    //     --input: 240 5.9% 90%;
-    //     --ring: 240 5.9% 10%;
-    //     --radius: 0rem;
-    //     --selection: 211 97% 85%;
-    // }
     fn light() -> Colors {
         Colors {
             title_bar_background: hsl(0.0, 0.0, 100.),
@@ -228,29 +204,6 @@ impl Colors {
         }
     }
 
-    //   .dark {
-    //     --title_bar_background: 0 0% 12%;
-    //     --background: 240 10% 3.9%;
-    //     --foreground: 0 0% 98%;
-    //     --card: 240 10% 3.9%;
-    //     --card-foreground: 0 0% 98%;
-    //     --popover: 240 10% 3.9%;
-    //     --popover-foreground: 0 0% 98%;
-    //     --primary: 0 0% 98%;
-    //     --primary-foreground: 240 5.9% 10%;
-    //     --secondary: 240 3.7% 15.9%;
-    //     --secondary-foreground: 0 0% 98%;
-    //     --muted: 240 3.7% 15.9%;
-    //     --muted-foreground: 240 5% 64.9%;
-    //     --accent: 240 3.7% 15.9%;
-    //     --accent-foreground: 0 0% 98%;
-    //     --destructive: 0 62.8% 30.6%;
-    //     --destructive-foreground: 0 0% 98%;
-    //     --border: 240 3.7% 15.9%;
-    //     --input: 240 3.7% 15.9%;
-    //     --ring: 240 4.9% 83.9%;
-    //     --selection: 211 97% 85%;
-    //   }
     fn dark() -> Colors {
         Colors {
             title_bar_background: hsl(0., 0., 12.),