use lepty-scoping in examples

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.

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>

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;
-}