Components

Nova Design System’s parts are themable using CSS Custom Properties. We ship pre-made themes for dark and light mode while trying to meet accessibility standards for color contrast.

Color

A lot of components use semantical colors to manage their theme such as Alert, Avatar, Badge, Button, Icon, ...
With these components, you don't need to manage the light or the dark theme for background, text or border color, it's automatically done with the semantic color chosen.

Type	Default Value
string	null

<NVStack Vertical Items="center" Gutter="3">
   <NVButton Color="primary">button primary </NVButton>
  <Nav Color="primary">
    <NVLink Href="#" IsActive>link 1</NVLink>
    <NVLink Href="#">link 2</NVLink>
  </Nav>
  <NVIcon Name="search" Medium Color="primary"/>
</NVStack>

<div class="nv-stack nv-stack-vertical items-center gutter-y-3">
  <button class="nv-btn nv-btn-md nv-btn-level-1 primary">primary</button>
  <nav class="nv-nav nv-nav-level-1 primary">
    <a href="#" class="is-active">link 1</a>
    <a href="#">link 2</a>
  </nav>  
  <i class="nv-icon nv-icon-search nv-icon-md primary"></i>
</div>

Parameters

Sometimes you need to manage colors by your own, these are parameters available to control colors. When a color is set manually the color is set for both theme (light and dark). If a different color is needed in dark mode, use the same color parameter prefixed by Dark.

BackgroundColor

Set the color of the background.

Type	Default Value
string	null

orange-50

orange-100

orange-200

orange-300

orange-400

orange-500

orange-600

orange-700

orange-800

orange-900

<NVBlock BackgroundColor="orange-50">orange 50</NVBlock>
<NVBlock BackgroundColor="orange-100">orange 100</NVBlock>
<NVBlock BackgroundColor="orange-200">orange 200</NVBlock>
<NVBlock BackgroundColor="orange-300">orange 300</NVBlock>
<NVBlock BackgroundColor="orange-400">orange 400</NVBlock>
<NVBlock BackgroundColor="orange-500">orange 500</NVBlock>
<NVBlock BackgroundColor="orange-600">orange 600</NVBlock>
<NVBlock BackgroundColor="orange-700">orange 700</NVBlock>
<NVBlock BackgroundColor="orange-800">orange 800</NVBlock>
<NVBlock BackgroundColor="orange-900">orange 900</NVBlock>

<div class="bg-orange-50">
  orange-50
</div>
<div class="bg-orange-100">
  orange-100
</div>
<div class="bg-orange-200">
  orange-200
</div>
<div class="bg-orange-300">
  orange-300
</div>
<div class="bg-orange-400">
  orange-400
</div>
<div class="bg-orange-500">
  orange-500
</div>
<div class="bg-orange-600">
  orange-600
</div>
<div class="bg-orange-700">
  orange-700
</div>
<div class="bg-orange-800">
  orange-800
</div>
<div class="bg-orange-900">
  orange-900
</div>

ActiveBackgroundColor

Set the Background Color of the element when active (eg: for Link or Button)

Type	Default Value
string	null

<NVButton ActiveBackgroundColor="petrol-300">active background in petrol-300 </NVButton>

<button class="nv-btn nv-btn-md nv-btn-level-1 neutral active:bg-petrol-300">
  active background in petrol-300
</button>

HoverBackgroundColor

Set the Background Color of the element when hovered.

Type	Default Value
string	null

secondary-100

<NVBlock HoverBackgroundColor="petrol-100">petrol-100</NVBlock>

<div class="hover:bg-petrol-100">secondary-100</div>

TextColor

Set the text color of the element.

Type	Default Value
string	null

text-green-500

#F00

<NVBlock TextColor="green-500">green-500</NVBlock>
<NVBlock TextColor="#F00">#F00</NVBlock>

<div class="text-green-500">text-green-500</div>
<div style="color:#F00">#F00</div>

ActiveTextColor

Set the text color of the element when active.

Type	Default Value
string	null

<NVButton ActiveTextColor="green-100">green-100 </NVButton>

<button class="nv-btn nv-btn-md nv-btn-level-1 active:text-green-100">green-100</button>

HoverTextColor

Set the text color of the element when hovered.

Type	Default Value
string	null

green-100

<NVBlock HoverTextColor="green-100">green-100</NVBlock>

<div class="hover:text-green-100">green-100</div>

BorderColor

Set the border color of the element.

Type	Default Value
string	null

border-green-500

#F00

<NVBlock Border BorderColor="green-500">green-500</NVBlock>
<NVBlock MT="3" Border BorderColor="#F00">#F00</NVBlock>

<div class="border border-green-500">border-green-500</div>
<div class="mt-3 border" style="border-color:#F00">#F00</div>

ActiveBorderColor

Set the border color of the element when active.

Type	Default Value
string	null

<NVButton Color="neutral" ActiveBorderColor="green-100">green-300 </NVButton>

<button class="nv-btn nv-btn-md nv-btn-level-1 neutral active:border-green-300">green-300</button>

HoverBorderColor

Set the border color of the element when hovered.

Type	Default Value
string	null

green-100

<NVBlock Border HoverBorderColor="green-100">green-100</NVBlock>

<div class="border hover:border-green-100">green-100</div>

Dark Parameters

Sometimes you need to manage dark colors by your own, these are parameters available to control colors in dark mode. (for light theme parameters look at the color foundation.)

DarkBackgroundColor

Set the color of the background.

Type	Default Value
string	null

orange-50

orange-100

orange-200

orange-300

orange-400

orange-500

orange-600

orange-700

orange-800

orange-900

<NVBlock DarkBackgroundColor="orange-50">orange 50</NVBlock>
<NVBlock DarkBackgroundColor="orange-100">orange 100</NVBlock>
<NVBlock DarkBackgroundColor="orange-200">orange 200</NVBlock>
<NVBlock DarkBackgroundColor="orange-300">orange 300</NVBlock>
<NVBlock DarkBackgroundColor="orange-400">orange 400</NVBlock>
<NVBlock DarkBackgroundColor="orange-500">orange 500</NVBlock>
<NVBlock DarkBackgroundColor="orange-600">orange 600</NVBlock>
<NVBlock DarkBackgroundColor="orange-700">orange 700</NVBlock>
<NVBlock DarkBackgroundColor="orange-800">orange 800</NVBlock>
<NVBlock DarkBackgroundColor="orange-900">orange 900</NVBlock>

<div class="dark:bg-orange-50">
  orange-50
</div>
<div class="dark:bg-orange-100">
  orange-100
</div>
<div class="dark:bg-orange-200">
  orange-200
</div>
<div class="dark:bg-orange-300">
  orange-300
</div>
<div class="dark:bg-orange-400">
  orange-400
</div>
<div class="dark:bg-orange-500">
  orange-500
</div>
<div class="dark:bg-orange-600">
  orange-600
</div>
<div class="dark:bg-orange-700">
  orange-700
</div>
<div class="dark:bg-orange-800">
  orange-800
</div>
<div class="dark:bg-orange-900">
  orange-900
</div>

DarkActiveBackgroundColor

Set the Background Color of the element when active (eg: for Link or Button)

Type	Default Value
string	null

<NVButton DarkActiveBackgroundColor="petrol-300">active background in petrol-300 </NVButton>

<button class="nv-btn nv-btn-md nv-btn-level-1 neutral dark:active:bg-petrol-300">
  active background in petrol-300
</button>

DarkHoverBackgroundColor

Set the Background Color of the element when hovered.

Type	Default Value
string	null

secondary-100

<NVBlock DarkHoverBackgroundColor="petrol-100">petrol-100</NVBlock>

<div class="hover:bg-petrol-100">secondary-100</div>

DarkTextColor

Set the text color of the element.

Type	Default Value
string	null

text-green-500

#F00

<NVBlock DarkTextColor="green-500">green-500</NVBlock>
<NVBlock DarkTextColor="#F00">#F00</NVBlock>

<div class="text-green-500">text-green-500</div>
<div style="color:#F00">#F00</div>

DarkActiveTextColor

Set the text color of the element when active.

Type	Default Value
string	null

<NVButton DarkActiveTextColor="green-100">green-100 </NVButton>

<button class="nv-btn nv-btn-md nv-btn-level-1 dark:active:text-green-100">green-100</button>

DarkHoverTextColor

Set the text color of the element when hovered.

Type	Default Value
string	null

green-100

<NVBlock DarkHoverTextColor="green-100">green-100</NVBlock>

<div class="dark:hover:text-green-100">green-100</div>

DarkBorderColor

Set the border color of the element.

Type	Default Value
string	null

border-green-500

<NVBlock Border DarkBorderColor="green-500">green-500</NVBlock>

<div class="border dark:border-green-500">border-green-500</div>

DarkActiveBorderColor

Set the border color of the element when active.

Type	Default Value
string	null

<NVButton Color="neutral" DarkActiveBorderColor="green-100">green-300 </NVButton>

<button class="nv-btn nv-btn-md nv-btn-level-1 neutral dark:active:border-green-300">green-300</button>

DarkHoverBorderColor

Set the border color of the element when hovered.

Type	Default Value
string	null

green-100

<NVBlock Border DarkHoverBorderColor="green-100">green-100</NVBlock>

<div class="border dark:hover:border-green-100">green-100</div>

Theme
New

Color

Parameters

BackgroundColor

ActiveBackgroundColor

HoverBackgroundColor

TextColor

ActiveTextColor

HoverTextColor

BorderColor

ActiveBorderColor

HoverBorderColor

Dark Parameters

DarkBackgroundColor

DarkActiveBackgroundColor

DarkHoverBackgroundColor

DarkTextColor

DarkActiveTextColor

DarkHoverTextColor

DarkBorderColor

DarkActiveBorderColor

DarkHoverBorderColor

On this page