yashrajnayak-design-system

v0.1.0

Published

a month ago

Reusable design system extracted from yashrajnayak.github.io

0High
0Medium
0Low

yashrajnayak

design-system css tokens components portfolio

Yash Design System

Reusable design system extracted from yashrajnayak.github.io, packaged as a standalone repo so you can reuse the same visual language across future projects.

What this includes

Design tokens (color, typography, spacing, radius, shadows, motion)
Dark mode support via data-theme="dark"
Reusable CSS components (cards, glass cards, buttons, pills, badges, lists, accordion, layout helpers)
Utility classes for spacing, stacks, text, and flex clusters
Demo documentation site in docs/

Project structure

design-system/
  src/
    tokens.css
    base.css
    animations.css
    components.css
    utilities.css
    themes.css
    index.css
  dist/
    yashrajnayak-design-system.css
    yashrajnayak-design-system.min.css
  docs/
    index.html
    docs.css
    docs.js
  scripts/
    build.sh

Quick start

npm run build
npm run dev

Build output: dist/yashrajnayak-design-system.css
Docs preview: http://localhost:4173

Use in another project

Option 1: copy CSS directly

<link rel="stylesheet" href="/path/to/yashrajnayak-design-system.css">

Option 2: install from npm (after publish)

npm install yashrajnayak-design-system

import 'yashrajnayak-design-system/dist/yashrajnayak-design-system.css';

Required fonts

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">

Theme toggle pattern

Set theme by changing the data-theme attribute on <html>:

document.documentElement.setAttribute('data-theme', 'dark');

Supported values:

light (default)
dark

Using this in future projects

Install the package:

npm install yashrajnayak-design-system

Load required fonts once in your app shell (index.html, app/layout.tsx, etc.):

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">

Import the design system stylesheet once near app startup:

import 'yashrajnayak-design-system/dist/yashrajnayak-design-system.css';

Use ys- classes for components and utilities, and use --ys-* variables for custom styles.
Use theme switching by setting data-theme on <html>:

document.documentElement.setAttribute('data-theme', 'dark');

Migrating existing projects to this design system

Use an incremental migration, not a full rewrite.

Install and import the design system, while keeping your current CSS.
Start migrating shared primitives first: buttons, cards, headings/text styles, and spacing/layout wrappers.
Migrate one screen/section at a time to reduce regressions.
Remove old component CSS only after that section visually matches and passes smoke checks.

If your app has old token names, add a temporary bridge in your app CSS:

:root {
  --old-primary: var(--ys-color-primary);
  --old-surface: var(--ys-color-surface);
  --old-text: var(--ys-color-text);
}

Updating all apps when the design system changes

Release workflow for this repo

Update design system code.
Bump version in package.json (patch, minor, or major).
Build and publish:

npm run build
npm publish --access public

Consumer app strategy

Pin a compatible major version in each app, for example:

"dependencies": {
  "yashrajnayak-design-system": "^1.2.0"
}

Enable dependency update PRs (Dependabot or Renovate) in every app repo so each new release opens an update PR automatically.

Sample Dependabot config:

version: 2
updates:
  - package-ecosystem: "npm"
    directory: "/"
    schedule:
      interval: "weekly"
    open-pull-requests-limit: 10

Merge update PRs after a quick visual smoke test.

Manual multi-repo update (optional)

If you want to update local repos in bulk:

for repo in ~/Documents/GitHub/*; do
  if [ -f "$repo/package.json" ] && rg -q "\"yashrajnayak-design-system\"" "$repo/package.json"; then
    (cd "$repo" && npm install yashrajnayak-design-system@latest)
  fi
done

Publish as a GitHub repo

git remote add origin [email protected]:yashrajnayak/design-system.git
git branch -M main
git add .
git commit -m "Initial design system"
git push -u origin main

Publish to npm

Before publishing, ensure the package name in package.json is available.

npm login
npm publish --access public

Versioning recommendation

patch: small non-breaking fixes
minor: new components or utility classes
major: breaking token or class name changes