first commit

docs/theming.md

@@ -0,0 +1,27 @@
+# SufiBlazor Theming
+
+## SbThemeProvider
+
+Wrap app content. Set **Theme** (`Light` / `Dark`) and **Direction** (`Ltr` / `Rtl`).  
+Toggle theme (and optionally persist in localStorage) to switch at runtime.
+
+## Tokens
+
+CSS variables under `:root` and `[data-theme="dark"]` control:
+
+- **Colors** — Primary, secondary, semantic (success, warning, danger), surface, background, text, border.  
+- **Typography** — Font family, sizes (xs–3xl), weights, line heights.  
+- **Spacing** — `--sb-space-0` through `--sb-space-16`.  
+- **Radius** — sm, md, lg, xl, full.  
+- **Shadows** — sm, md, lg, xl.  
+- **Z-index** — Dropdown, modal, popover, tooltip, toast.
+
+Override in your own CSS to customize. Use semantic tokens (e.g. `--sb-color-primary`) rather than raw values.
+
+## RTL
+
+Set `Direction="Rtl"` on `SbThemeProvider`. Components use logical properties so layout flips automatically.
+
+## Custom Themes
+
+Define a new set of variable overrides (e.g. `brand-theme.css`), load after `sufiblazor.css`. No extra C# theme types required unless you add custom theme selection logic.