@nevv-ui/styles

Modern CSS system for Nevv UI - design tokens, component styles, and utilities.

Installation

npm install @nevv-ui/styles
# or
pnpm add @nevv-ui/styles

Usage

Import All Styles

@import '@nevv-ui/styles';

Import Base System Only

@import '@nevv-ui/styles/base';

This includes:

• CSS reset/normalize
• Design tokens (colors, spacing, typography, shadows)
• Light & dark theme definitions

Import Component Styles

/* All component styles */
@import '@nevv-ui/styles/components';

/* Individual components */
@import '@nevv-ui/styles/components/button.css';
@import '@nevv-ui/styles/components/input.css';

Import Utilities

@import '@nevv-ui/styles/utilities';

Structure

@nevv-ui/styles/
├── base/               # Foundation styles
│   ├── reset.css       # CSS reset
│   ├── tokens.css      # Design tokens
│   ├── theme-light.css # Light theme
│   └── theme-dark.css  # Dark theme
├── components/         # Component styles
│   ├── button.css
│   ├── input.css
│   └── ...
└── utilities/          # Utility classes
    └── ...

Design Tokens

All CSS custom properties use the --nv- prefix:

/* Colors */
--nv-primary-color
--nv-primary-color-hover
--nv-primary-color-pressed

/* Spacing */
--nv-spacing-xs
--nv-spacing-sm
--nv-spacing-md

/* Typography */
--nv-font-size-sm
--nv-line-height-base

/* Effects */
--nv-box-shadow-sm
--nv-border-radius-md

Theme System

Themes are applied via data-theme attribute:

<div data-theme="light">...</div>
<div data-theme="dark">...</div>

Component States

Components use data attributes for states:

<button data-active="true" data-disabled="true">Button</button>

License

MIT © ESTENX LTD