parajanovcs
v0.1.1
Published
Component System — UI components using ThamanyanLS (sizes) and SaryanTS (colors)
Downloads
119
Maintainers
veertooozReadme
ParajanovCS
Component System — UI components using ThamanyanLS (sizes) and SaryanTS (colors).
Part of ThamanyanLS · SaryanTS · ParajanovCS · Dodo.
Quick start
Load ThamanyanLS, SaryanTS, ParajanovCS, and optionally Dodo (5 clicks to edit theme):
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<script src="https://cdn.jsdelivr.net/npm/thamanyanls/dist/thamanyan.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/saryants.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/parajanovcs/dist/parajanovcs.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@veertoooz/dodo/dist/dodo.min.js"></script>
</head>
<body>
<button class="btn btn-primary">Click me</button>
</body>
</html>Documentation
Components
| Component | Classes | Description |
|-----------|---------|-------------|
| Button | .btn, .btn-primary, .btn-secondary, .btn-neutral, .btn-ghost, .btn-soft, .btn-danger, .btn-success, .btn-warning, .btn-info, .btn-outline | Variants: primary, secondary, neutral (gray), soft (light bg), ghost, semantic, outline |
| | .btn-xs, .btn-sm, .btn-lg, .btn-xl, .btn-block, .btn-circle | Sizes and modifiers |
| Input | .input, .input-sm, .input-lg | Text input with focus and invalid states |
| Card | .card, .card-body, .card-title, .card-actions | Card container and parts |
| | .card-bordered, .card-glass | Card variants |
| Alert | .alert, .alert-info, .alert-success, .alert-warning, .alert-danger | Semantic alerts |
| Badge | .badge, .badge-primary, .badge-secondary, .badge-success, .badge-warning, .badge-danger, .badge-info, .badge-ghost, .badge-outline | Pills/chips with semantic variants |
| Label | .label, .label-text, .label-alt | Form label with optional helper |
| Textarea | .textarea, .textarea-sm, .textarea-lg | Multi-line text input |
| Select | .select, .select-sm, .select-lg | Native select dropdown |
| Checkbox | .checkbox, .checkbox-primary, .checkbox-secondary, .checkbox-sm, .checkbox-lg | Checkbox input |
| Radio | .radio, .radio-primary, .radio-secondary, .radio-sm, .radio-lg | Radio input |
| Divider | .divider, .divider-horizontal, .divider-primary, .divider-muted | Horizontal/vertical separator |
| Progress | .progress, .progress-primary, .progress-success, .progress-warning, .progress-danger | Progress bar |
| Toggle | .toggle, .toggle-primary, .toggle-secondary, .toggle-success, .toggle-warning, .toggle-danger | Switch-style checkbox |
| | .toggle-sm, .toggle-lg | Sizes |
| Link | .link, .link-primary, .link-secondary, .link-success, .link-info, .link-warning, .link-danger | Styled anchor |
| | .link-hover | Underline only on hover |
| Spinner | .spinner, .spinner-primary, .spinner-secondary, .spinner-sm, .spinner-lg | Loading indicator |
| Table | .table, .table-zebra, .table-sm, .table-lg | Styled table |
| Breadcrumb | .breadcrumb | Navigation path with ul > li |
| Fieldset | .fieldset, .fieldset-legend, .fieldset-bordered | Form group with legend |
| File input | .file-input, .file-input-sm, .file-input-lg | File upload input |
| | .file-input-primary, .file-input-secondary, .file-input-ghost | Color variants |
| Avatar | .avatar, .avatar-placeholder, .avatar-rounded | User thumbnail |
| | .avatar-sm, .avatar-md, .avatar-lg | Sizes |
| | .avatar-online, .avatar-offline | Presence indicator |
| | .avatar-group | Stacked avatars |
| Skeleton | .skeleton, .skeleton-text | Loading placeholder |
| Pagination | .pagination | Page nav container (use .btn inside) |
| Range | .range, .range-sm, .range-lg | Styled slider |
| | .range-primary, .range-secondary, .range-success, .range-warning, .range-danger | Color variants |
| Kbd | .kbd, .kbd-sm, .kbd-lg | Keyboard shortcut keycap |
| List | .list, .list-row, .list-col-grow, .list-col-wrap | Vertical list layout |
| Modal | .modal, .modal-box, .modal-header, .modal-body, .modal-footer, .modal-close | Overlay dialog via :target or checkbox |
| Dropdown | .dropdown, .dropdown-trigger, .dropdown-content, .dropdown-item, .dropdown-divider | Opens on :focus-within or checkbox |
| Tooltip | .tooltip, .tooltip-content, data-tip | Hover/focus hint |
| | .tooltip-top, .tooltip-bottom, .tooltip-left, .tooltip-right | Placement |
| Menu | .menu, .menu-item, .menu-item-active, .menu-divider | Vertical action list |
| Drawer | .drawer, .drawer-side, .drawer-content, .drawer-overlay | Slide-out panel (checkbox) |
| | .drawer-side-left, .drawer-side-right | Placement |
| Navbar | .navbar, .navbar-start, .navbar-center, .navbar-end | Top navigation |
| | .navbar-brand, .navbar-menu, .navbar-toggle, .navbar-link | Logo, links, hamburger toggle, nav link style |
| Hero | .hero, .hero-content, .hero-title, .hero-subtitle, .hero-actions | Landing section |
| Toast | .toast, .toast-item, .toast-show | Notification (.toast-show or :target) |
| | .toast-success, .toast-warning, .toast-danger, .toast-info | Variants |
Design tokens
ParajanovCS defines shadow tokens for depth and elevation:
| Token | Value |
|-------|-------|
| --shadow-sm | 0 1px 2px rgba(0,0,0,0.05) |
| --shadow | 0 1px 3px rgba(0,0,0,0.1) |
| --shadow-md | 0 4px 6px rgba(0,0,0,0.1) |
| --shadow-lg | 0 10px 15px rgba(0,0,0,0.1) |
Dark theme ([data-theme="dark"]) uses stronger opacity. Override --shadow-color for theme-aware shadows.
Token contract
ParajanovCS uses only:
| Source | Tokens |
|--------|--------|
| ThamanyanLS | --ls-space, --ls-gap, --ls-padding, --ls-radius, --ls-text, --ls-border |
| SaryanTS | --bg, --bg-light, --bg-dark, --text, --text-muted, --primary, --secondary, --danger, --warning, --success, --info, --border, --border-muted, --highlight, --glass-bg, --glass-border |
No custom spacing or color scales. Fallbacks when deps not loaded.
Development
npm install
npm run build # Build dist/parajanovcs.min.css
npm run dev # Serve examples at localhost:5173
npm run preview # Build and preview examplesLicense
MIT.