refactor: divider

demo_markdown/docs/divider/mod.md

@@ -2,9 +2,29 @@
 
 ```rust demo
 view! {
-    "top"
+    <Space vertical=true>
-    <Divider/>
+        <div style="padding: 30px 0; background-color: var(--colorNeutralBackground1);">
-    "bottom"
+            <Divider />
+        </div>
+        <div style="padding: 30px 0; background-color: var(--colorNeutralBackground1);">
+            <Divider>"Text"</Divider>
+        </div>
+    </Space>
+}
+```
+
+### Vertical
+
+```rust demo
+view! {
+    <Space vertical=true gap=SpaceGap::Large>
+        <div style="height: 100px; background-color: var(--colorNeutralBackground1);">
+            <Divider vertical=true/>
+        </div>
+        <div style="height: 100px; background-color: var(--colorNeutralBackground1);">
+            <Divider vertical=true>"Text"</Divider>
+        </div>
+    </Space>
 }
 ```
 

thaw/src/divider/divider.css

@@ -2,12 +2,71 @@
 .thaw-divider {
     position: relative;
     display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-grow: 1;
     width: 100%;
-    margin: 1.5rem 0;
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase200);
+    font-weight: var(--fontWeightRegular);
+    color: var(--colorNeutralForeground2);
+    line-height: var(--lineHeightBase200);
+    box-sizing: border-box;
+    text-align: center;
 }
 
-.thaw-divider__line {
+.thaw-divider--vertical {
-    background-color: #efeff5;
+    flex-direction: column;
-    height: 1px;
+    width: auto;
-    width: 100%;
+    height: 100%;
+    min-height: 20px;
+}
+
+.thaw-divider::before {
+    content: "";
+    display: flex;
+    flex-grow: 1;
+    min-width: 8px;
+    border-top-width: var(--strokeWidthThin);
+    border-top-style: solid;
+    border-color: var(--colorNeutralStroke2);
+    box-sizing: border-box;
+}
+
+.thaw-divider--vertical::before {
+    min-width: auto;
+    min-height: 8px;
+    border-top-width: medium;
+    border-top-style: none;
+    border-right-width: var(--strokeWidthThin);
+    border-right-style: solid;
+}
+
+
+.thaw-divider::after {
+    content: "";
+    display: flex;
+    flex-grow: 1;
+    min-width: 8px;
+    border-top-width: var(--strokeWidthThin);
+    border-top-style: solid;
+    border-color: var(--colorNeutralStroke2);
+    box-sizing: border-box;
+}
+
+.thaw-divider--vertical::after {
+    min-width: auto;
+    min-height: 8px;
+    border-top-width: medium;
+    border-top-style: none;
+    border-right-width: var(--strokeWidthThin);
+    border-right-style: solid;
+}
+
+.thaw-divider__wrapper {
+    margin: 0 12px;
+}
+
+.thaw-divider--vertical > .thaw-divider__wrapper {
+    margin: 12px 0;
 }

thaw/src/divider/mod.rs

@@ -1,13 +1,26 @@
 use leptos::*;
+use thaw_components::OptionComp;
 use thaw_utils::{class_list, mount_style, OptionalProp};
 
 #[component]
-pub fn Divider(#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>) -> impl IntoView {
+pub fn Divider(
+    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] vertical: MaybeSignal<bool>,
+    #[prop(optional)] children: Option<Children>,
+) -> impl IntoView {
     mount_style("divider", include_str!("./divider.css"));
 
     view! {
-        <div class=class_list!["thaw-divider", class.map(| c | move || c.get())]>
+        <div
-            <div class="thaw-divider__line"></div>
+            class=class_list!["thaw-divider", ("thaw-divider--vertical", move || vertical.get()), class.map(| c | move || c.get())]
+            aria-orientation=move || if vertical.get() { "vertical" } else { "horizontal" }
+            role="separator"
+        >
+            <OptionComp value=children let:children>
+                <div class="thaw-divider__wrapper">
+                    {children()}
+                </div>
+            </OptionComp>
         </div>
     }
 }

thaw/src/theme/color.rs

@@ -25,6 +25,7 @@ pub struct ColorTheme {
     pub color_neutral_stroke_1: String,
     pub color_neutral_stroke_1_hover: String,
     pub color_neutral_stroke_1_pressed: String,
+    pub color_neutral_stroke_2: String,
     pub color_neutral_stroke_accessible: String,
     pub color_neutral_stroke_accessible_hover: String,
     pub color_neutral_stroke_accessible_pressed: String,
@@ -68,6 +69,7 @@ impl ColorTheme {
             color_neutral_stroke_1: "#d1d1d1".into(),
             color_neutral_stroke_1_hover: "#c7c7c7".into(),
             color_neutral_stroke_1_pressed: "#b3b3b3".into(),
+            color_neutral_stroke_2: "#e0e0e0".into(),
             color_neutral_stroke_accessible: "#616161".into(),
             color_neutral_stroke_accessible_hover: "#575757".into(),
             color_neutral_stroke_accessible_pressed: "#4d4d4d".into(),
@@ -111,6 +113,7 @@ impl ColorTheme {
             color_neutral_stroke_1: "#666666".into(),
             color_neutral_stroke_1_hover: "#757575".into(),
             color_neutral_stroke_1_pressed: "#6b6b6b".into(),
+            color_neutral_stroke_2: "#525252".into(),
             color_neutral_stroke_accessible: "#adadad".into(),
             color_neutral_stroke_accessible_hover: "#bdbdbd".into(),
             color_neutral_stroke_accessible_pressed: "#b3b3b3".into(),