initial os release. I really expect SO much bugs, guys. good luck =)

examples/define-styles/Cargo.toml

@@ -0,0 +1,9 @@
+[package]
+name = "define-styles"
+version = "0.0.0"
+edition = "2021"
+rust-version = "1.82"
+publish = false
+
+[dependencies]
+sabry = {path = "../../", features = ["sass"]}

examples/define-styles/src/lib.rs

@@ -0,0 +1,104 @@
+use sabry::sassy;
+
+sassy!(utils {
+    @mixin flex($direction, $align, $justify, $gap: .5rem) {
+        display: flex;
+        list-style: none;
+        gap: $gap;
+        flex-direction: $direction;
+
+        @if $align == start{
+            align-items: flex-start;
+        }
+        @else if $align == end{
+            align-items: flex-end;
+        }
+        @else{
+            align-items: $align;
+        }
+
+        @if $justify == start {
+            justify-content: flex-start;
+        }
+        @else if $justify == end {
+            justify-content: flex-end;
+        }
+        @else {
+            justify-content: $justify;
+        }
+    }
+});
+
+sassy!(theme {
+    $thm-surface-primary: #2b2a29;
+    $thm-surface-secondary: #6C6C6C;
+    $thm-surface-tertiary: #4C4C4C;
+    $thm-surface-accent: #B0CB1F;
+
+    $thm-text-primary: #ffffff;
+    $thm-text-secondary: #ffffff;
+    $thm-text-tertiary: #ffffff;
+    $thm-text-accent: #B0CB1F;
+
+    @mixin surface($style: primary) {
+        @if $style == primary {
+            @include txt(primary);
+            background-color: $thm-surface-primary;
+        }
+        @else if $style == secondary {
+            @include txt(secondary);
+            background-color: $thm-surface-secondary;
+        }
+        @else if $style == accent {
+            @include txt;
+            background-color: $thm-surface-accent;
+        }
+    }
+
+    @mixin txt($style: primary) {
+        @if $style == primary {
+            font-weight: 500;
+            color: $thm-text-primary;
+        }
+        @else if $style == secondary {
+            font-weight: 400;
+            color: $thm-text-secondary;
+        }
+        @else if $style == tertiary {
+            font-weight: 400;
+            color: $thm-text-tertiary;
+        }
+        @else if $style == accent {
+            font-weight: 500;
+            color: $thm-text-accent;
+        }
+    }
+});
+
+sassy!(tokens {
+    @use "theme";
+
+    @mixin clickable($style: accent, $scale: 1.2, $clickscale: 0.9){
+        @if $style == accent{
+            @include theme.surface(accent);
+        }
+        @else if $style == secondary {
+            @include theme.surface(secondary);
+        }
+
+        cursor: pointer;
+        outline: none;
+        -webkit-tap-highlight-color: #00000000;
+        transition: transform .07s, filter .07s;
+        &:hover{
+            transform: scale($scale);
+        }
+        &:focus-visible {
+            outline: 2px solid #fff;
+        }
+        &:active {
+            filter: brightness(.9);
+            transform: scale($clickscale);
+        }
+    }
+});