Nova Components Base

The Nova Components Base package provides essential tokens and precompiled CSS for the Nova Design System. It aims to streamline the use of Nova’s design tokens and offer flexibility in customizing the setup with Tailwind CSS.

Features

• Precompiled CSS: A simple css file tailored with Nova’s design theme and a collection of utilities. Ideal for quick integration.
• Tokens: Design tokens defined by the Nova Design.
• Tailwind CSS Integration: Configure Tailwind CSS v4 entirely from CSS, eliminating the need for JavaScript configuration and significantly reducing CSS size.

Installation

npm install @nova-design-system/nova-base

In some case, you might experience SSL certificate issues when working on Developers' VM. As documented in the Developers' setup guide, you need to turn off the SSL certificate verification:

npm config set strict-ssl false

Usage

Include Tokens CSS

Include exactly one token theme in your project. Spark and Ocean are available:

/* For the Spark theme */
@import '@nova-design-system/nova-base/dist/css/spark.css';

/* Or use Ocean instead: */
/* @import '@nova-design-system/nova-base/dist/css/ocean.css'; */

Recommended Approach: Tailwind CSS v4 with the Nova CSS Plugin

The recommended approach is to use Nova's CSS-only Tailwind v4 plugin. This method provides a smaller CSS bundle and access to more utilities than the precompiled CSS, without a tailwind.config file or JavaScript plugin.

Prerequisites

Ensure that Tailwind CSS v4 is installed in your project. If not, you can install it by following the Tailwind CSS installation guide.

CSS Configuration

Tailwind CSS v4 uses a CSS-first configuration. In your main stylesheet, import Tailwind, the Nova CSS plugin, and exactly one Nova token theme:

@import 'tailwindcss';
@import '@nova-design-system/nova-base/theme/plugin.css';
@import '@nova-design-system/nova-base/dist/css/spark.css';
/* Or import ocean.css instead of spark.css. */

The CSS plugin maps Nova tokens to Tailwind's theme system, configures Nova's class-based dark variant, and adds base styles, components, and custom utilities such as text-high, bg-level-00, and the typography classes.

Do not combine theme/plugin.css with the JavaScript plugin or with nova-utils.css.

Benefits of Using Tailwind CSS with Nova

• Smaller CSS Bundle: Tailwind CSS v4 only generates CSS for classes actually used in your source files, resulting in a significantly smaller output.
• More Utilities: Gain access to a wider range of utilities beyond those included in the precompiled CSS.
• Customization: Tailwind CSS allows you to customize and extend your styles as needed.

Deprecated JavaScript Configuration

The previous JavaScript theme and plugin remain available for backward compatibility, but new Tailwind v4 projects should use theme/plugin.css instead.

Create a minimal tailwind.config.ts with the Nova theme:

import type { Config } from 'tailwindcss';
import { novaTailwindTheme } from '@nova-design-system/nova-base/theme';

const config: Config = {
  theme: novaTailwindTheme,
};

export default config;

Then load the legacy configuration and plugin from your stylesheet:

@import 'tailwindcss';
@import '@nova-design-system/nova-base/dist/css/spark.css';

@config './tailwind.config.ts';
@plugin '@nova-design-system/nova-base/theme/plugin';
@custom-variant dark (&:where(.dark, .dark *));

Do not also import @nova-design-system/nova-base/theme/plugin.css when using this deprecated setup.

Alternative Approach: Using Precompiled CSS

If it's not possible to set up Tailwind CSS in your project, you can include the precompiled CSS along with the tokens:

import '@nova-design-system/nova-base/dist/css/spark.css';
// or import '@nova-design-system/nova-base/dist/css/ocean.css';
import '@nova-design-system/nova-base/dist/css/nova-utils.css';

Note: The precompiled CSS includes a broad set of pre-generated Tailwind utility classes and is quite large. This approach is only recommended if you cannot set up Tailwind CSS yourself.