@nova-design-systems/css-variables v1.1.0

Nova Design CSS Variables

A collection of CSS variables for the Nova Design System, including colors, typography, spacing, and radius values.

Installation

npm install @nova-design-systems/css-variables

Usage

You can import the CSS variables in your CSS file:

@import 'nova-design-css-variables';

Or in your JavaScript file:

import 'nova-design-css-variables';

Available CSS Variables

Colors

The color variables are organized into several categories:

• Primary colors
• Secondary colors
• Neutral colors
• Success colors
• Warning colors
• Error colors
• Information colors

Each color has variations for different states (hover, active, disabled) and contexts (background, text, border).

Typography

Typography variables for font sizes, weights, and line heights.

/* Font sizes */
var(--nova-font-size-xs)
var(--nova-font-size-sm)
var(--nova-font-size-md)
var(--nova-font-size-lg)
var(--nova-font-size-xl)

/* Font weights */
var(--nova-font-weight-regular)
var(--nova-font-weight-medium)
var(--nova-font-weight-bold)

/* Line heights */
var(--nova-line-height-tight)
var(--nova-line-height-normal)
var(--nova-line-height-relaxed)

Border Radius

Border radius variables for consistent corner rounding.

var(--nova-radius-none)
var(--nova-radius-sm)
var(--nova-radius-md)
var(--nova-radius-lg)
var(--nova-radius-full)

Contributing

Please read our contributing guidelines before submitting pull requests.