neumo-ui
Version:
Neumorphism CSS toolkit with light/dark mode, utilities and theming.
107 lines (77 loc) • 2.8 kB
Markdown
# Neumo UI
Neumorphism CSS toolkit with light/dark mode, utilities and theming.
## Demo / Landing
The public demo (GitHub Pages) showcases features, themes, and native styles. It includes controls to switch theme, mode (auto/light/dark), and light direction, plus usage examples and code snippets.
Once published, the URL will look like `https://jsanchez91.github.io/neumo-ui/`.
## Quick Start
- Add the base CSS and one theme:
```html
<link rel="stylesheet" href="/styles.css">
<link rel="stylesheet" href="/themes/default.css">
```
- Force mode or light direction (optional):
```html
<html data-nui-theme="dark" data-nui-light-direction="top-right">
```
## Install
```bash
npm install neumo-ui
# or
pnpm add neumo-ui
# or
bun add neumo-ui
```
## Usage
- Vanilla HTML (serve/copy files from `node_modules/neumo-ui/dist/`):
```html
<link rel="stylesheet" href="node_modules/neumo-ui/dist/styles.css">
```
- Apply styles to native elements (optional):
```html
<link rel="stylesheet" href="node_modules/neumo-ui/dist/native.css">
```
- Load a theme (load after styles.css/native.css):
```html
<link rel="stylesheet" href="node_modules/neumo-ui/dist/themes/default.css">
```
- Bundlers (recommended): use package exports
```js
import 'neumo-ui'; // dist/styles.css
import 'neumo-ui/native.css';
import 'neumo-ui/themes/ocean.css';
```
## Features
- Light/Dark mode via light-dark() and `[data-nui-theme]`
- Directional light via `[data-nui-light-direction]`
- Utilities: `.nui-neuromorphic`, `.nui-neuromorphic-inset`, optional `.nui-clickable`
- Theming using CSS variables; one CSS per theme
## Authoring a theme
Create a CSS file with the variables:
```css
:root {
--nui-light-bg-color: #ebecf0;
--nui-dark-bg-color: #14130f;
--nui-light-text-color: #8993a2;
--nui-dark-text-color: #a0aec0;
--nui-light-lights: #ffffff;
--nui-dark-lights: #000000;
--nui-light-shadows: #bebebe;
--nui-dark-shadows: #414141;
/* optional: */
--nui-primary: #5e72e4;
--nui-secondary: #8392ab;
}
```
## Development
- `npm start`: runs the full dev setup. Starts Vite for the demo site and watches/builds CSS to `dist/` with live reload.
- `npm run dev`: runs only the Vite dev server for the demo (expects CSS already built or watched).
- `npm run build`: builds the demo site and all CSS assets.
- `npm run build:css`: builds only CSS assets to `dist/`.
CSS outputs and purpose:
- `dist/styles.css`: base Neumo UI styles (utilities, components, variables).
- `dist/native.css`: optional styles applied to native HTML elements.
- `dist/themes/*.css`: theme tokens (e.g., `default.css`, `ocean.css`, `cloud.css`). Load after `styles.css`/`native.css` to switch theme.
Dev server: http://localhost:5173 (default)
Prerequisites for local dev: Node.js 18+
## License
MIT