Nimiq Colors (nimiq-colors) ​

The nimiq-colors package is the central source of truth for color definitions within the Nimiq Design System. It provides a consistent and themeable color palette for use across Nimiq projects and UI components.

Purpose ​

• Centralized Management: Defines all official Nimiq brand and UI colors in one place.
• Themeable: Supports light and dark color schemes out-of-the-box.
• Modern CSS: Uses the oklch color space for more perceptually uniform colors.
• Multiple Formats: Exports colors as both a ready-to-use CSS file and as TypeScript modules.

Package Exports ​

The nimiq-colors package exports:

1. CSS File:

   • Path: nimiq-colors/dist/nimiq-colors.css
   • Contains CSS custom properties for all defined colors (e.g., --colors-blue-500, --colors-neutral) and gradients (e.g., --colors-blue-gradient).
   • Automatically handles light and dark themes using @media (prefers-color-scheme: dark) and a .dark class selector.

2. TypeScript Modules:

   • Path: nimiq-colors/src/colors.ts (and nimiq-colors/src/gradients.ts, re-exported from nimiq-colors/src/index.ts)
   • Provides the raw color definitions as TypeScript objects. Colors are typically defined with light and dark properties containing their oklch string values.
   • Example: import { blue, neutralGradient } from 'nimiq-colors/src';

Usage ​

CSS ​

If you are using the main nimiq-css package, the Nimiq colors CSS is automatically included.

If you want to use nimiq-colors directly in a project without the full nimiq-css:

@import 'nimiq-colors/dist/nimiq-colors.css';

.my-element {
  background-color: oklch(var(--colors-blue-500));
  color: oklch(var(--colors-neutral-900));
}

(Note: Using oklch(var(...)) is optional; var(...) works directly if the value is already a full color string, but oklch() ensures the context).

TypeScript ​

You can import the TypeScript definitions for use in build scripts, theming engines, or JavaScript logic:

import { allColors, allGradients, blue } from 'nimiq-colors/src' // Or from 'nimiq-colors' if top-level export is configured for src

// Accessing a specific color shade for light mode:
console.log(blue[500].light) // e.g., 'oklch(0.88 0.08 230)'

// Accessing a default color for dark mode:
console.log(allColors.neutral.DEFAULT.dark)

// Accessing gradient stops:
console.log(allGradients.blueGradient.light.from)

Integration ​

The nimiq-colors package is a foundational part of the Nimiq design system.

• nimiq-css uses nimiq-colors for its global color styles and for its UnoCSS color preset.
• Other Nimiq tools or applications can consume nimiq-colors directly for consistent color usage.