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

@@ -85,7 +85,7 @@ pub fn Checkbox(
         ("transparent", unselected_fill.as_ref())
     };
     let border = if focus.is_selected() {
-        format!("4 solid {}", border_fill)
+        format!("4 outer {}", border_fill)
     } else {
         "none".to_string()
     };
@@ -95,7 +95,6 @@ pub fn Checkbox(
     rsx!(
         rect {
             border,
-            border_align: "outer",
             corner_radius: "4",
             rect {
                 a11y_id: focus.attribute(),
@@ -105,7 +104,7 @@ pub fn Checkbox(
                 main_align: "center",
                 cross_align: "center",
                 corner_radius: "4",
-                border: "2 solid {outer_fill}",
+                border: "2 inner {outer_fill}",
                 background: "{inner_fill}",
                 onkeydown,
                 if selected {

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: "-1000",
                             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

@@ -61,8 +61,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

@@ -69,7 +69,7 @@ pub fn Radio(
         unselected_fill
     };
     let border = if focus.is_selected() {
-        format!("4 solid {}", border_fill)
+        format!("4 outer {}", border_fill)
     } else {
         "none".to_string()
     };
@@ -79,13 +79,12 @@ pub fn Radio(
     rsx!(
         rect {
             border,
-            border_align: "outer",
             corner_radius: "99",
             rect {
                 a11y_id: focus.attribute(),
                 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

@@ -202,7 +202,7 @@ pub fn Slider(
     };
 
     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

@@ -36,7 +36,7 @@ pub fn Tooltip(TooltipProps { text, theme }: TooltipProps) -> Element {
         rect {
             padding: "4 10",
             shadow: "0 0 4 1 rgb(0, 0, 0, 0.1)",
-            border: "1 solid {border_fill}",
+            border: "1 inner {border_fill}",
             corner_radius: "8",
             background: "{background}",
             label { max_lines: "1", font_size: "14", color: "{color}", "{text}" }