Configuration Variables
NuvoUI is designed to be highly configurable through a set of variables that control everything from utility class generation to responsive breakpoints, colors, spacing, and typography.
Core Configuration Options
These variables control the framework's fundamental behavior.
Utility Generation
$generate-utility-classes controls whether utility classes are generated:
Features Toggles
These variables enable or disable specific framework features:
By default, NuvoUI will not generate any utility classes, keeping your compiled CSS minimal. Enabling utility classes will significantly increase the output size. To maintain control, you can selectively disable specific features by setting them to false.
Here is a complete list of features you can enable or disable:
Global Settings
Default Unit
The default unit is used when converting unitless values:
Typography Base Settings
Basic typography configuration:
Layout Constants
Variables used across layout modules:
Border System
Border Widths
Common border width values:
Border Radii
Border radius values for consistent rounding:
Color System
Semantic Colors
These colors represent semantic meanings across the UI:
Color Primitives
Base colors that can be extended with shade variants:
Responsive System
Breakpoints
Define the breakpoints used for responsive utilities:
Grid Item Sizes
Predefined sizes for grid items:
Scoping
Parent Selector
Control the scope of utility classes:
Shadow System
Shadow colors for consistent elevation:
Spacing System
Spacing Scale
Define the spacing scale used for margin, padding, and gap utilities:
Percentage Values
Common percentage values used for width, height, and other properties:
Theme System
The theme system uses prefixed tokens to indicate their intended use (bg-, text-, border-):
Some of these tokens are used inside the theme system, e.g. removing border-base will remove the border from the base class border
Theme Validation
NuvoUI automatically validates that all theme tokens from the light theme exist in the dark theme, if they do not match it will give error.
Theme Token Usage
Theme tokens are automatically used to generate appropriate CSS classes based on their prefix:
How Inverted Colors Work
Inverted colors provide automatic contrast for each token by using the corresponding dark theme value in light mode, and light theme value in dark mode:
Typography System
Font Sizes
Define the font sizes used throughout the framework:
Using Configuration Variables
You can override any of these variables in your own project:
Configuration Reference Table
| Variable | Type | Default | Description |
|---|---|---|---|
$generate-utility-classes | Boolean | true | Controls generation of utility classes |
$enable-dark-mode | Boolean | true | Enables dark mode support |
$default-unit | String | px | Default unit for unitless values |
$base-size | Number | 16px | Base font size in pixels |
$font-family | String | System font stack | Default font family |
$column-count | Number | 12 | Number of columns in grid system |
$default-container-name | String | nuvoui-container | Default container name |
$primary, $secondary, etc. | Color | Various | Semantic color values |
$color-primitives | Map | Color map | Base colors for the system |
$light-theme | Map | Token map | Light theme values with prefixed keys |
$theme-tokens | List | From $light-theme | Automatically derived from light theme keys |
$dark-theme | Map | Token map | Dark theme values (must match light theme keys) |
$shadow-colors | Map | Shadow values | Shadow color variants |
$breakpoints | Map | Size map | Responsive breakpoint values |
$grid-item-sizes | Map | Size map | Grid item size presets |
$font-sizes | Map | Size map | Typography size scale |
$spacings | Map | Size map | Spacing scale for margin, padding, etc. |
$percentages | List | Value list | Common percentage values |
$border-widths | List | Width list | Border width values |
$border-radii | Map | Radius map | Border radius values |
$parent-selector | String | "" | Parent selector for scoping |