feat: multiple borders

crates/components/src/accordion.rs

@@ -100,7 +100,7 @@ pub fn Accordion(props: AccordionProps) -> Element {
             height: "auto",
             background: "{background}",
             onclick,
-            border: "1 solid {border_fill}",
+            border: "1 inner {border_fill}",
             {&props.summary}
             rect {
                 overflow: "clip",

crates/components/src/button.rs

@@ -164,9 +164,9 @@ pub fn Button(
         ButtonStatus::Idle => background,
     };
     let border = if focus.is_selected() {
-        format!("2 solid {focus_border_fill}")
+        format!("2 inner {focus_border_fill}")
     } else {
-        format!("1 solid {border_fill}")
+        format!("1 inner {border_fill}")
     };
 
     rsx!(

crates/components/src/checkbox.rs

@@ -87,7 +87,7 @@ pub fn Checkbox(
             main_align: "center",
             cross_align: "center",
             corner_radius: "4",
-            border: "2 solid {border}",
+            border: "2 inner {border}",
             background: "{fill}",
             if selected {
                 TickIcon {

crates/components/src/dropdown.rs

@@ -274,7 +274,7 @@ where
                 color: "{font_theme.color}",
                 corner_radius: "8",
                 padding: "8 16",
-                border: "1 solid {border_fill}",
+                border: "1 inner {border_fill}",
                 shadow: "0 4 5 0 rgb(0, 0, 0, 0.1)",
                 direction: "horizontal",
                 main_align: "center",
@@ -301,7 +301,7 @@ where
                             onglobalkeydown,
                             layer: "-99",
                             margin: "{margin}",
-                            border: "1 solid {border_fill}",
+                            border: "1 inner {border_fill}",
                             overflow: "clip",
                             corner_radius: "8",
                             background: "{dropdown_background}",

crates/components/src/input.rs

@@ -210,7 +210,7 @@ pub fn Input(
             direction: "vertical",
             color: "{color}",
             background: "{background}",
-            border: "1 solid {border_fill}",
+            border: "1 inner {border_fill}",
             shadow: "{shadow}",
             corner_radius: "{corner_radius}",
             margin: "{margin}",

crates/components/src/progress_bar.rs

@@ -59,8 +59,7 @@ pub fn ProgressBar(
                 background: "{background}",
                 font_size: "13",
                 direction: "horizontal",
-                border: "1 solid {background}",
-                border_align: "outer",
+                border: "1 outer {background}",
                 rect {
                     corner_radius: "999",
                     width: "{progress}%",

crates/components/src/radio.rs

@@ -67,7 +67,7 @@ pub fn Radio(
         rect {
             width: "18",
             height: "18",
-            border: "2 solid {fill}",
+            border: "2 inner {fill}",
             padding: "4",
             main_align: "center",
             cross_align: "center",

crates/components/src/slider.rs

@@ -164,7 +164,7 @@ pub fn Slider(
 
     let inner_width = (size.area.width() - 15.0) * (value / 100.0) as f32;
     let border = if focus.is_selected() {
-        format!("2 solid {}", theme.border_fill)
+        format!("2 inner {}", theme.border_fill)
     } else {
         "none".to_string()
     };

crates/components/src/switch.rs

@@ -141,9 +141,9 @@ pub fn Switch(props: SwitchProps) -> Element {
 
     let border = if focus.is_selected() {
         if props.enabled {
-            format!("2 solid {}", theme.enabled_focus_border_fill)
+            format!("2 inner {}", theme.enabled_focus_border_fill)
         } else {
-            format!("2 solid {}", theme.focus_border_fill)
+            format!("2 inner {}", theme.focus_border_fill)
         }
     } else {
         "none".to_string()

crates/components/src/tooltip.rs

@@ -32,7 +32,7 @@ pub fn Tooltip(TooltipProps { url, theme }: TooltipProps) -> Element {
         rect {
             padding: "4 10",
             shadow: "0 4 5 0 rgb(0, 0, 0, 0.1)",
-            border: "1 solid {border_fill}",
+            border: "1 inner {border_fill}",
             corner_radius: "10",
             background: "{background}",
             main_align: "center",