kedhar-ui

Shared design system for Kedhar's projects. CSS design tokens, base styles, component styles, per-site theme files, and reusable Astro components.

npm install kedhar-ui

What's included

• Design tokens — spacing scale, border radius, typography, shadows, transitions, z-index
• Base reset — box-sizing, body defaults, link/button/image styling, focus-visible, selection
• Component styles — CSS-only ripple effect, scroll-to-top button, theme toggle, card, badge, section container
• Per-site themes — Indigo (portfolio), Amber (projects), Emerald (blog), Slate (mssql-scripts)
• Astro components — ThemeToggle, ScrollToTop (import from src/components/)

Usage in Astro sites

---
// Layout frontmatter
import 'kedhar-ui/src/styles/tokens.css';
import 'kedhar-ui/src/styles/base.css';
import 'kedhar-ui/src/styles/components.css';
import 'kedhar-ui/src/styles/themes/indigo.css';

import ThemeToggle from 'kedhar-ui/src/components/ThemeToggle.astro';
import ScrollToTop from 'kedhar-ui/src/components/ScrollToTop.astro';
---

<ThemeToggle />
<ScrollToTop />

Usage in plain HTML

<link rel="stylesheet" href="https://unpkg.com/kedhar-ui/dist/kedhar-ui-slate.css">

Development

npm install
npm run build    # produces dist/ bundles
npm publish      # publishes to npm (auto-runs build)

License

MIT