Add docs
This commit is contained in:
41
docs/getting-started/theming.md
Normal file
41
docs/getting-started/theming.md
Normal file
@@ -0,0 +1,41 @@
|
||||
# Theming (theme/platform/skin)
|
||||
|
||||
Tria UI использует три измерения конфигурации:
|
||||
|
||||
- `theme`: `light | dark`
|
||||
- `platform`: `web | vk | tg`
|
||||
- `skin`: `web | ios | android`
|
||||
|
||||
Комбинация управляет *CSS пресетами* и компонентными токенами.
|
||||
|
||||
## UIProvider
|
||||
|
||||
```tsx
|
||||
import { UIProvider } from "@tria/ui";
|
||||
|
||||
<UIProvider config={{ theme: "dark", platform: "vk", skin: "ios" }}>
|
||||
...
|
||||
</UIProvider>
|
||||
```
|
||||
|
||||
UIProvider устанавливает `data-theme`, `data-platform`, `data-skin` на `document.documentElement`
|
||||
(или на `config.root`), и может применить `config.vars` — набор CSS variables.
|
||||
|
||||
## Runtime switching
|
||||
|
||||
```tsx
|
||||
const [theme, setTheme] = useState<"light"|"dark">("dark");
|
||||
<UIProvider config={{ theme, platform, skin }} />
|
||||
```
|
||||
|
||||
## Which combos matter
|
||||
|
||||
- `platform="vk" + skin="ios"` — VK iOS‑вид (Cupertino‑ощущение)
|
||||
- `platform="vk" + skin="android"` — VK Android‑вид (Material‑ощущение)
|
||||
- `platform="tg"` — более “telegram‑ui” акценты
|
||||
- `platform="web"` — нейтральный web preset
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
Если визуально не меняется “skin”, значит компоненты ещё используют жёсткие px.
|
||||
Нужно заменить размеры на токены (`--btn-*`, `--input-*`, `--cell-*`, `--tabbar-*`) и т.п.
|
||||
Reference in New Issue
Block a user