feat: Use a darker color for the focused border when using primary co…

…lors as background, so basically for just FilledButton
marc2332 · Feb 23, 2025 · fefd493 · fefd493
1 parent 0827e48
commit fefd493
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git a/crates/hooks/src/theming/base.rs b/crates/hooks/src/theming/base.rs
@@ -6,6 +6,7 @@ use crate::{
 pub(crate) const BASE_THEME: Theme = Theme {
     name: "base",
     colors: ColorsSheet {
+        focused_primary_border: cow_borrowed!(""),
         primary: cow_borrowed!(""),
         secondary: cow_borrowed!(""),
         tertiary: cow_borrowed!(""),
@@ -56,7 +57,7 @@ pub(crate) const BASE_THEME: Theme = Theme {
             color: cow_borrowed!("key(primary_color)"),
         },
         border_fill: cow_borrowed!("none"),
-        focus_border_fill: cow_borrowed!("key(primary_color)"),
+        focus_border_fill: cow_borrowed!("key(focused_primary_border)"),
         shadow: cow_borrowed!("none"),
         padding: cow_borrowed!("6 12"),
         margin: cow_borrowed!("0"),

diff --git a/crates/hooks/src/theming/mod.rs b/crates/hooks/src/theming/mod.rs
@@ -524,6 +524,7 @@ define_theme! {
 #[derive(Clone, Debug, PartialEq, Eq)]
 pub struct ColorsSheet {
     pub primary: Cow<'static, str>,
+    pub focused_primary_border: Cow<'static, str>,
     pub secondary: Cow<'static, str>,
     pub tertiary: Cow<'static, str>,
     pub surface: Cow<'static, str>,
@@ -548,6 +549,7 @@ impl ColorsSheet {
             let key_val = val.replace("key(", "").replace(")", "");
             match key_val.as_str() {
                 "primary" => self.primary.clone(),
+                "focused_primary_border" => self.focused_primary_border.clone(),
                 "secondary" => self.secondary.clone(),
                 "tertiary" => self.tertiary.clone(),
                 "surface" => self.surface.clone(),

diff --git a/crates/hooks/src/theming/themes.rs b/crates/hooks/src/theming/themes.rs
@@ -8,6 +8,7 @@ pub const DARK_THEME: Theme = Theme {
     name: "dark",
     colors: ColorsSheet {
         primary: cow_borrowed!("rgb(103, 80, 164)"),
+        focused_primary_border: cow_borrowed!("rgb(223, 180, 255)"),
         secondary: cow_borrowed!("rgb(202, 193, 227)"),
         tertiary: cow_borrowed!("rgb(79, 61, 130)"),
         surface: cow_borrowed!("rgb(60, 60, 60)"),
@@ -32,6 +33,7 @@ pub const LIGHT_THEME: Theme = Theme {
     name: "light",
     colors: ColorsSheet {
         primary: cow_borrowed!("rgb(103, 80, 164)"),
+        focused_primary_border: cow_borrowed!("rgb(50, 20, 80)"),
         secondary: cow_borrowed!("rgb(202, 193, 227)"),
         tertiary: cow_borrowed!("rgb(79, 61, 130)"),
         surface: cow_borrowed!("rgb(210, 210, 210)"),
@@ -56,6 +58,7 @@ pub const BANANA_THEME: Theme = Theme {
     name: "banana",
     colors: ColorsSheet {
         primary: cow_borrowed!("rgb(240, 200, 50)"),
+        focused_primary_border: cow_borrowed!("rgb(100, 50, 15)"),
         secondary: cow_borrowed!("rgb(255, 250, 160)"),
         tertiary: cow_borrowed!("rgb(186, 153, 37)"),
         surface: cow_borrowed!("rgb(240, 229, 189)"),