Package Exports

chiaroscuro-css
chiaroscuro-css/src/neumorphic.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (chiaroscuro-css) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🌒 ChiaroscuroCSS

Light, shadow, and balance, redefined for the web.
A lightweight CSS micro-library for accessible neumorphism with personality-driven theming, responsive design, and WCAG compliance.

✨ Features

✅ Accessible neumorphic design
✅ Personality-driven theme system (serene, playful, mystical, professional)
✅ Fully responsive & mobile-first
✅ WCAG 2.1 AA compliance & prefers-reduced-motion support
✅ Declarative CSS variables for easy customization
✅ Tiny footprint, framework-agnostic

🚀 Quick Start

Install via npm

npm install chiaroscuro-css

Or use via CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chiaroscuro-css@latest/neumorphic.css">

🌈 Themes

ChiaroscuroCSS ships with four personality-driven themes:

serene – calming greens
playful – warm yellows & oranges
mystical – deep purples
professional – cool greys

To apply, simply set the data-theme attribute on <body> or a container:

<body data-theme="mystical">

🎨 Usage Examples

Raised

<div class="neumorphic-raised">Raised</div>

Inset

<div class="neumorphic-inset">Inset</div>

Beveled

<div class="neumorphic-beveled">Beveled</div>

Buttons

<button class="btn btn-circular">+</button>
<button class="btn btn-pill">Pill</button>

🎨 Live Demo

https://rubyrayjuntos.github.io/chiaroscuro-css/

📐 Customization

ChiaroscuroCSS is built on CSS custom properties.
You can override variables at runtime:

:root {
  --accent-primary: #ff5722;
  --shadow-dark: rgba(0, 0, 0, 0.8);
}

🧑‍🦽 Accessibility

✅ WCAG 2.1 AA compliant colors
✅ Keyboard navigation
✅ Screen reader friendly
✅ Respects prefers-reduced-motion
✅ High contrast mode support

📦 Project Structure

/src/neumorphic.css   → Main stylesheet
/docs/                → Demo site
LICENSE
README.md
package.json

🤝 Contributing

ChiaroscuroCSS is an open-source project, maintained as part of Ray Swan’s creative portfolio. Contributions, feedback, and suggestions are warmly welcomed.

If you’d like to contribute:
✅ Fork the repository
✅ Create a feature branch (git checkout -b feature/your-feature)
✅ Make your changes and test thoroughly
✅ Submit a Pull Request with a clear description of your change

For feature requests, bug reports, or ideas, feel free to open an issue on GitHub.

👥 Governance

ChiaroscuroCSS is currently maintained as a personal project by Ray Swan. Decisions about roadmap, merging, and releases remain at the discretion of the maintainer.

If the project attracts sustained community interest, governance may transition to a more formal structure (e.g., GitHub organization + maintainers).

All contributors are expected to adhere to a standard of respectful, inclusive collaboration.

📜 License

MIT License — see LICENSE.

🌌 Author

Created by Ray Swan with love for accessible, creative design.
Follow on GitHub and LinkedIn.