Package Exports
- @nova-design-systems/css-variables
- @nova-design-systems/css-variables/dist/index.css
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nova-design-systems/css-variables) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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-variablesUsage
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.