From 3fec8989306c793e7ffb997090a78196b48073ef Mon Sep 17 00:00:00 2001
From: Yiffy Dev <yiffyrusdev@yandex.ru>
Date: Thu, 31 Oct 2024 09:15:42 +0500
Subject: [PATCH] use lepty-scoping in examples

---
 README.md                                 |  2 ++
 examples/leptos-axum/src/routes/home.rs   | 44 +++++++++++++++++++++--
 examples/leptos-axum/src/routes/home.scss | 23 ------------
 3 files changed, 44 insertions(+), 25 deletions(-)

diff --git a/README.md b/README.md
index 34f0d86..6ab6e0b 100644
--- a/README.md
+++ b/README.md
@@ -209,6 +209,8 @@ Every selector, if that does make sense, now available for you as a member of `s
 
 ### Use styles earlier created in another crate
 
+> **Tip** | If you use [leptos](https://github.com/leptos-rs/leptos) - check [this](#leptos-specials) section as well
+
 The combination of previous two, with some additional work to do and some extra sugar to enjoy.
 
 Sabry is needed as both dependency and build-dependency.
diff --git a/examples/leptos-axum/src/routes/home.rs b/examples/leptos-axum/src/routes/home.rs
index 1c006db..b79682d 100644
--- a/examples/leptos-axum/src/routes/home.rs
+++ b/examples/leptos-axum/src/routes/home.rs
@@ -1,7 +1,41 @@
 use leptos::prelude::*;
 use sabry::styly;
 
-styly!(style "src/routes/home.scss");
+styly!(style {
+    @use "tokens";
+    @use "utils";
+    @use "theme";
+
+    h2 {
+        margin-bottom: 1rem;
+        @include theme.surface(primary);
+        @include theme.txt(primary);
+        span {
+            @include theme.txt(accent);
+        }
+    }
+
+    .btn {
+        @include tokens.clickable(accent);
+        &-dark {
+            @include tokens.clickable(secondary, 0.8, 1.1);
+        }
+    }
+
+    .table {
+        @include utils.flex(column, center, center);
+        @include theme.surface(primary);
+    }
+
+    .card {
+        @include theme.surface(secondary);
+    }
+    .pocwarn {
+        @include theme.surface(secondary);
+        text-transform: uppercase;
+    }
+
+});
 
 /// Renders the home page of your application.
 #[component]
@@ -12,7 +46,13 @@ pub fn Route() -> impl IntoView {
 
     view! {class = STYLE,
         <section class=style::table>
-            <h1>"Welcome to Leptos!"</h1>
+            <h2>"Welcome to Leptos"</h2>
+            <h2 class="">
+                "This head is styled with lepty-scopes feature"
+                <br/>
+                <span class="">"And this child too!"</span>
+            </h2>
+
             <button class=style::btn on:click=on_click>"Ima CRAZY button, clicked: " {count} " times!"</button>
             <button class=style::_dark(style::btn) on:click=on_click>"Ima CRAZY button, clicked: " {count} " times!"</button>
             <span class=style::card>"DISCLAIMER:"</span>
diff --git a/examples/leptos-axum/src/routes/home.scss b/examples/leptos-axum/src/routes/home.scss
index d9ef063..e69de29 100644
--- a/examples/leptos-axum/src/routes/home.scss
+++ b/examples/leptos-axum/src/routes/home.scss
@@ -1,23 +0,0 @@
-@use "tokens";
-@use "utils";
-@use "theme";
-
-.btn {
-    @include tokens.clickable(accent);
-    &-dark {
-        @include tokens.clickable(secondary, 0.8, 1.1);
-    }
-}
-
-.table {
-    @include utils.flex(column, center, center);
-    @include theme.surface(primary);
-}
-
-.card {
-    @include theme.surface(secondary);
-}
-.pocwarn {
-    @include theme.surface(secondary);
-    text-transform: uppercase;
-}