Colors
2 Nova Design System uses a color system to guide our users, create a branded look-and-feel, draw attention to important information, and make content more accessible for everyone.
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 Color="orange-50">orange 50</NVBlock>
<NVBlock Color="orange-100">orange 100</NVBlock>
<NVBlock Color="orange-200">orange 200</NVBlock>
<NVBlock Color="orange-300">orange 300</NVBlock>
<NVBlock Color="orange-400">orange 400</NVBlock>
<NVBlock Color="orange-500">orange 500</NVBlock>
<NVBlock Color="orange-600">orange 600</NVBlock>
<NVBlock Color="orange-700">orange 700</NVBlock>
<NVBlock Color="orange-800">orange 800</NVBlock>
<NVBlock Color="orange-900">orange 900</NVBlock>ActiveBackgroundColor
Set the Background Color to the element when active (eg: for Link or Button)
| Type | Default Value |
|---|---|
| string | null |
<NVButton ActiveBackgroundColor="petrol-300">active background in petrol-300 </NVButton>HoverBackgroundColor
Set the Background Color to the element when hovered.
| Type | Default Value |
|---|---|
| string | null |
secondary-100
<NVBlock HoverBackgroundColor="petrol-100">petrol-100</NVBlock>Color
Set the color of the background (almost the same as BackgroundColor expected for 5 special values (neutral, primary, secondary, success, neutral) in some components (eg: button).
| Type | Default Value |
|---|---|
| string | null |
primary
petrol-100
<NVButton Color="primary">primary </NVButton>
<NVButton Color="petrol-100">petrol-100 </NVButton>TextColor
Set the text color to the element.
| Type | Default Value |
|---|---|
| string | null |
text-green-500
#F00
<NVBlock TextColor="green-500">green-500</NVBlock>
<NVBlock TextColor="#F00">#F00</NVBlock>