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

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 with Nova Theme and Plugin

The recommended approach is to set up Tailwind CSS and use our tokens, novaTailwindTheme, and novaTailwindPlugin for the Tailwind configuration. This method provides a smaller CSS bundle and access to more utilities than the precompiled CSS.

Prerequisites

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

Tailwind Configuration

After setting up Tailwind CSS, add the following to your tailwind.config.js:

import {
  novaTailwindTheme,
  novaTailwindPlugin,
} from '@nova-design-system/nova-base/theme';

/** @type {import('tailwindcss').Config} */
export default {
  // ...
  theme: novaTailwindTheme,
  plugins: [novaTailwindPlugin],
};

The novaTailwindTheme maps our CSS variable tokens to utilities, ensuring consistent styling across your project. The novaTailwindPlugin adds additional base styles, components, and utilities.

Importing Theme Tokens in CSS

In your CSS file, along with the default Tailwind imports, you should import the tokens for the theme:

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

/* Tailwind CSS imports */
@tailwind base;
@tailwind components;
@tailwind utilities;

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

Benefits of Using Tailwind CSS with Nova Theme and Plugin

• Smaller CSS Bundle: By configuring Tailwind CSS with our theme and plugin, you eliminate unused styles, resulting in a significantly smaller CSS file.
• 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 whitelist of Tailwind classes and is quite large. This approach is only recommended if you cannot set up Tailwind CSS yourself.