SaryanTS

Theme System (colors only) from hue and chroma (OKLCH). Part of ThamanyanLS · SaryanTS · ParajanovCS · Dodo.

- ThamanyanLS — Layout System (depth-based sizes)
- SaryanTS — Theme System (colors)
- ParajanovCS — Component System (consumes both)

Quick start

CDN (single script) — injects CSS + theme API:

``html










Themed text




`

Classic — CSS + optional theme script:

`html


`

Features

- Hue + chroma only: Set --hue (0–360) and --chroma (0–0.4); all semantic colors are derived in CSS.
- OKLCH: Perceptually even colors.
- Light / dark: data-theme="light" or data-theme="dark" on (default: dark).
- Colors only: No components, no spacing, no radius — use with ThamanyanLS (sizes) and ParajanovCS (components).

Semantic variables

SaryanTS exposes:

| Variable | Usage |
|---------|-------|
| --bg, --bg-light, --bg-dark | Backgrounds |
| --text, --text-muted | Text |
| --primary, --secondary | Actions |
| --danger, --warning, --success, --info | Semantic |
| --border, --border-muted | Borders |
| --highlight | Highlight |
| --glass-bg, --glass-border | Glass effects |

JS API

If you load the theme script, SaryanTSTheme is available:

- SaryanTSTheme.hue = 200 — set hue (0–360)
- SaryanTSTheme.chroma = 0.2 — set chroma (0–1)
- SaryanTSTheme.theme = 'light' or 'dark'
- SaryanTSTheme.toggleTheme() — switch light/dark
- SaryanTSTheme.restore() — restore from localStorage (called on load)

Development

`bash
npm install
npm run build # Build CSS + theme JS
npm run dev # Build and serve demo
npm run preview # Preview production build
`

- dist/saryants.min.css — CSS bundle (tokens + themes)
- dist/saryants-theme.min.js — theme script
- dist/saryants.min.js — CDN bundle (CSS + theme)

Browser support

- OKLCH: Chrome 111+, Safari 15.4+, Firefox 113+
- CSS mod()`: Chrome 118+, Safari 17.2+, Firefox 128+

License

MIT.