nimiq-css

Nimiq's Design System in CSS - a comprehensive CSS framework with design tokens and UnoCSS presets.

Features

• Design Tokens - Centralized color system supporting light/dark modes
• UnoCSS Presets - Custom presets for rapid development
• CSS Layers - Organized preflights, colors, fonts, utilities, typography, and static content
• Nimiq Components - Nq* styled components (NqCard, NqGrid, etc.)
• Icon System - Integrated with nimiq-icons
• Typography - Consistent text styles and spacing

Installation

pnpm add nimiq-css

Usage

Import CSS

// Import all styles
import 'nimiq-css/css/index.css'

// Or import specific modules
import 'nimiq-css/css/preflight.css'
import 'nimiq-css/css/colors.css'
import 'nimiq-css/css/fonts.css'
import 'nimiq-css/css/typography.css'
import 'nimiq-css/css/utilities.css'

UnoCSS Integration

import { presetNimiq } from 'nimiq-css/unocss'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetNimiq(),
  ],
})

Available CSS Modules

• animations.css - Animation utilities
• atomic.css - Atomic utility classes
• colors.css - Color system with light/dark mode
• fonts.css - Typography and font definitions
• preflight.css - Base resets
• spacing.css - Spacing utilities
• static-content.css - Static content styles
• typography.css - Text styles
• utilities.css - Utility classes

Legacy Styles

import 'nimiq-css/css/legacy/icons.css'
import 'nimiq-css/css/legacy/inputs.css'

Development

# Build the package
pnpm build

# Development mode with stub
pnpm dev

License

MIT