chiaroscuro-css

v1.0.0

Published

6 months ago

Chiaroscuro – 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.

0High
0Medium
0Low

rubyrayjuntos

css neumorphism accessibility responsive wcag design-system theme lightweight micro-library

🌒 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.