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 Theme and Plugin: Configure your own Tailwind CSS setup with the Nova theme and plugin, eliminating the need for the precompiled CSS 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 the tokens CSS in your project (two themes are available: Spark and Ocean):

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

/* Or, for the Ocean theme */
@import '@nova-design-system/nova-base/dist/css/ocean.css';

Recommended Approach: Using Tailwind CSS v4 with Nova Theme and Plugin

The recommended approach is to set up Tailwind CSS v4 and use the Nova theme and plugin via CSS directives. This method provides a smaller CSS bundle and access to more utilities than the precompiled CSS.

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 CSS file, import Tailwind and configure the Nova plugin and theme:

/* Import the theme tokens */
@import '@nova-design-system/nova-base/dist/css/spark.css';
/* Or: @import '@nova-design-system/nova-base/dist/css/ocean.css'; */

@import "tailwindcss";

@plugin "@nova-design-system/nova-base/theme/plugin";
@config "./tailwind.config.ts";

Then 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;

The novaTailwindTheme maps Nova CSS variable tokens to Tailwind utilities. The novaTailwindPlugin (loaded via @plugin) adds base styles, components, and custom utilities like text-high, bg-level-00, and typography classes.

Benefits of Using Tailwind CSS with Nova Theme and Plugin

• 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.

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.