nodes-ui
Version:
UI Components for Nodes Backends
776 lines (730 loc) • 53.7 kB
HTML
---
title: Colors
layout: component.html
---
<h1 class="docs--page-header">
Colors
</h1>
<h2 class="docs--section-header">Text colors</h2>
<p class="docs--section-description">
Text colors are designed to be used complementary to the opposite main color backgrounds.
</p>
<h2 class="docs--section-header">Color docs--palettes</h2>
<p class="docs--section-description">
A docs--palette consists of a "base" color, 4 variatioins in light, lighter, dark and darker shades, each of the 5 shades also has 2 opacity variations.
</p>
<p class="docs--section-description">
The syntax for defining a color is as follows <code><background||text>-<color>-<shade>-<opacity></code>.
</p>
<div class="text-info docs--panel docs--panel-info docs--panel-designers">
<p>
Do the developers a <strong>massive</strong> favor, and define your colors based on <em>rules</em> (ie mathematical) and not just randomly picked hex colors from your local color picker.
</p>
<p>
The system right now consists of somewhere around 105 different colors(!), most of them are based on "shading" the color using Sass functions. Imagine the horror if a developer has to manually write 105 hex colors...
</p>
</div>
<div class="docs--visual-example">
<ul class="docs--palette-list">
<li class="docs--palette-title">Primary Color</li>
<li class="docs--palette background-primary-darker">
<span class="text-primary-lighter">.text-primary-lighter</span>
<span class="text-primary-lighter-025">.text-primary-lighter-025</span>
<span class="text-primary-lighter-050">.text-primary-lighter-050</span>
<span class="text-primary-light">.text-primary-light</span>
<span class="text-primary-light-025">.text-primary-light-025</span>
<span class="text-primary-light-050">.text-primary-light-050</span>
<span class="text-primary">.text-primary</span>
<span class="text-primary-025">.text-primary-025</span>
<span class="text-primary-050">.text-primary-050</span>
<span class="text-primary-dark">.text-primary-dark</span>
<span class="text-primary-dark-025">.text-primary-dark-025</span> <span class="text-primary-dark-050">.text-primary-dark-050</span>
<span class="text-primary-darker">.text-primary-darker</span>
<span class="text-primary-darker-025">.text-primary-darker-025</span>
<span class="text-primary-darker-050">.text-primary-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-primary-darker-025">background-primary-darker 0.25 opacity</li>
<li class="docs--palette background-primary-darker-050">background-primary-darker 0.50 opacity</li>
</ul>
</li>
<li class="docs--palette background-primary-dark">
<span class="text-primary-lighter">.text-primary-lighter</span>
<span class="text-primary-lighter-025">.text-primary-lighter-025</span>
<span class="text-primary-lighter-050">.text-primary-lighter-050</span>
<span class="text-primary-light">.text-primary-light</span>
<span class="text-primary-light-025">.text-primary-light-025</span>
<span class="text-primary-light-050">.text-primary-light-050</span>
<span class="text-primary">.text-primary</span>
<span class="text-primary-025">.text-primary-025</span>
<span class="text-primary-050">.text-primary-050</span>
<span class="text-primary-dark">.text-primary-dark</span>
<span class="text-primary-dark-025">.text-primary-dark-025</span> <span class="text-primary-dark-050">.text-primary-dark-050</span>
<span class="text-primary-darker">.text-primary-darker</span>
<span class="text-primary-darker-025">.text-primary-darker-025</span>
<span class="text-primary-darker-050">.text-primary-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-primary-dark-025">background-primary-dark 0.25 opacity</li>
<li class="docs--palette background-primary-dark-050">background-primary-dark 0.50 opacity</li>
</ul>
</li>
<li class="docs--palette background-primary">
<span class="text-primary-lighter">.text-primary-lighter</span>
<span class="text-primary-lighter-025">.text-primary-lighter-025</span>
<span class="text-primary-lighter-050">.text-primary-lighter-050</span>
<span class="text-primary-light">.text-primary-light</span>
<span class="text-primary-light-025">.text-primary-light-025</span>
<span class="text-primary-light-050">.text-primary-light-050</span>
<span class="text-primary">.text-primary</span>
<span class="text-primary-025">.text-primary-025</span>
<span class="text-primary-050">.text-primary-050</span>
<span class="text-primary-dark">.text-primary-dark</span>
<span class="text-primary-dark-025">.text-primary-dark-025</span>
<span class="text-primary-dark-050">.text-primary-dark-050</span>
<span class="text-primary-darker">.text-primary-darker</span>
<span class="text-primary-darker-025">.text-primary-darker-025</span>
<span class="text-primary-darker-050">.text-primary-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-primary-025">background-primary 0.25 opacity</li>
<li class="docs--palette background-primary-050">background-primary 0.50 opacity</li>
</ul>
</li>
<li class="docs--palette background-primary-light">
<span class="text-primary-lighter">.text-primary-lighter</span>
<span class="text-primary-lighter-025">.text-primary-lighter-025</span>
<span class="text-primary-lighter-050">.text-primary-lighter-050</span>
<span class="text-primary-light">.text-primary-light</span>
<span class="text-primary-light-025">.text-primary-light-025</span>
<span class="text-primary-light-050">.text-primary-light-050</span>
<span class="text-primary">.text-primary</span>
<span class="text-primary-025">.text-primary-025</span>
<span class="text-primary-050">.text-primary-050</span>
<span class="text-primary-dark">.text-primary-dark</span>
<span class="text-primary-dark-025">.text-primary-dark-025</span>
<span class="text-primary-dark-050">.text-primary-dark-050</span>
<span class="text-primary-darker">.text-primary-darker</span>
<span class="text-primary-darker-025">.text-primary-darker-025</span>
<span class="text-primary-darker-050">.text-primary-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-primary-light-025">background-primary-light 0.25 opacity</li>
<li class="docs--palette background-primary-light-050">background-primary-light 0.50 opacity</li>
</ul>
</li>
<li class="docs--palette background-primary-lighter">
<span class="text-primary-lighter">.text-primary-lighter</span>
<span class="text-primary-lighter-025">.text-primary-lighter-025</span>
<span class="text-primary-lighter-050">.text-primary-lighter-050</span>
<span class="text-primary-light">.text-primary-light</span>
<span class="text-primary-light-025">.text-primary-light-025</span>
<span class="text-primary-light-050">.text-primary-light-050</span>
<span class="text-primary">.text-primary</span>
<span class="text-primary-025">.text-primary-025</span>
<span class="text-primary-050">.text-primary-050</span>
<span class="text-primary-dark">.text-primary-dark</span>
<span class="text-primary-dark-025">.text-primary-dark-025</span>
<span class="text-primary-dark-050">.text-primary-dark-050</span>
<span class="text-primary-darker">.text-primary-darker</span>
<span class="text-primary-darker-025">.text-primary-darker-025</span>
<span class="text-primary-darker-050">.text-primary-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-primary-lighter-025">background-primary-lighter 0.25 opacity</li>
<li class="docs--palette background-primary-lighter-050">background-primary-lighter 0.50 opacity</li>
</ul>
</li>
</ul>
<!--
Secondary Colors
-->
<ul class="docs--palette-list">
<li class="docs--palette-title">Secondary Color</li>
<li class="docs--palette background-secondary-darker">
<span class="text-secondary-lighter">.text-secondary-lighter</span>
<span class="text-secondary-lighter-025">.text-secondary-lighter-025</span>
<span class="text-secondary-lighter-050">.text-secondary-lighter-050</span>
<span class="text-secondary-light">.text-secondary-light</span>
<span class="text-secondary-light-025">.text-secondary-light-025</span>
<span class="text-secondary-light-050">.text-secondary-light-050</span>
<span class="text-secondary">.text-secondary</span>
<span class="text-secondary-025">.text-secondary-025</span>
<span class="text-secondary-050">.text-secondary-050</span>
<span class="text-secondary-dark">.text-secondary-dark</span>
<span class="text-secondary-dark-025">.text-secondary-dark-025</span> <span class="text-secondary-dark-050">.text-secondary-dark-050</span>
<span class="text-secondary-darker">.text-secondary-darker</span>
<span class="text-secondary-darker-025">.text-secondary-darker-025</span>
<span class="text-secondary-darker-050">.text-secondary-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-secondary-darker-025">background-secondary-darker 0.25 opacity</li>
<li class="docs--palette background-secondary-darker-050">background-secondary-darker 0.50 opacity</li>
</ul>
</li>
<li class="docs--palette background-secondary-dark">
<span class="text-secondary-lighter">.text-secondary-lighter</span>
<span class="text-secondary-lighter-025">.text-secondary-lighter-025</span>
<span class="text-secondary-lighter-050">.text-secondary-lighter-050</span>
<span class="text-secondary-light">.text-secondary-light</span>
<span class="text-secondary-light-025">.text-secondary-light-025</span>
<span class="text-secondary-light-050">.text-secondary-light-050</span>
<span class="text-secondary">.text-secondary</span>
<span class="text-secondary-025">.text-secondary-025</span>
<span class="text-secondary-050">.text-secondary-050</span>
<span class="text-secondary-dark">.text-secondary-dark</span>
<span class="text-secondary-dark-025">.text-secondary-dark-025</span> <span class="text-secondary-dark-050">.text-secondary-dark-050</span>
<span class="text-secondary-darker">.text-secondary-darker</span>
<span class="text-secondary-darker-025">.text-secondary-darker-025</span>
<span class="text-secondary-darker-050">.text-secondary-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-secondary-dark-025">background-secondary-dark 0.25 opacity</li>
<li class="docs--palette background-secondary-dark-050">background-secondary-dark 0.50 opacity</li>
</ul>
</li>
<li class="docs--palette background-secondary">
<span class="text-secondary-lighter">.text-secondary-lighter</span>
<span class="text-secondary-lighter-025">.text-secondary-lighter-025</span>
<span class="text-secondary-lighter-050">.text-secondary-lighter-050</span>
<span class="text-secondary-light">.text-secondary-light</span>
<span class="text-secondary-light-025">.text-secondary-light-025</span>
<span class="text-secondary-light-050">.text-secondary-light-050</span>
<span class="text-secondary">.text-secondary</span>
<span class="text-secondary-025">.text-secondary-025</span>
<span class="text-secondary-050">.text-secondary-050</span>
<span class="text-secondary-dark">.text-secondary-dark</span>
<span class="text-secondary-dark-025">.text-secondary-dark-025</span>
<span class="text-secondary-dark-050">.text-secondary-dark-050</span>
<span class="text-secondary-darker">.text-secondary-darker</span>
<span class="text-secondary-darker-025">.text-secondary-darker-025</span>
<span class="text-secondary-darker-050">.text-secondary-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-secondary-025">background-secondary 0.25 opacity</li>
<li class="docs--palette background-secondary-050">background-secondary 0.50 opacity</li>
</ul>
</li>
<li class="docs--palette background-secondary-light">
<span class="text-secondary-lighter">.text-secondary-lighter</span>
<span class="text-secondary-lighter-025">.text-secondary-lighter-025</span>
<span class="text-secondary-lighter-050">.text-secondary-lighter-050</span>
<span class="text-secondary-light">.text-secondary-light</span>
<span class="text-secondary-light-025">.text-secondary-light-025</span>
<span class="text-secondary-light-050">.text-secondary-light-050</span>
<span class="text-secondary">.text-secondary</span>
<span class="text-secondary-025">.text-secondary-025</span>
<span class="text-secondary-050">.text-secondary-050</span>
<span class="text-secondary-dark">.text-secondary-dark</span>
<span class="text-secondary-dark-025">.text-secondary-dark-025</span>
<span class="text-secondary-dark-050">.text-secondary-dark-050</span>
<span class="text-secondary-darker">.text-secondary-darker</span>
<span class="text-secondary-darker-025">.text-secondary-darker-025</span>
<span class="text-secondary-darker-050">.text-secondary-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-secondary-light-025">background-secondary-light 0.25 opacity</li>
<li class="docs--palette background-secondary-light-050">background-secondary-light 0.50 opacity</li>
</ul>
</li>
<li class="docs--palette background-secondary-lighter">
<span class="text-secondary-lighter">.text-secondary-lighter</span>
<span class="text-secondary-lighter-025">.text-secondary-lighter-025</span>
<span class="text-secondary-lighter-050">.text-secondary-lighter-050</span>
<span class="text-secondary-light">.text-secondary-light</span>
<span class="text-secondary-light-025">.text-secondary-light-025</span>
<span class="text-secondary-light-050">.text-secondary-light-050</span>
<span class="text-secondary">.text-secondary</span>
<span class="text-secondary-025">.text-secondary-025</span>
<span class="text-secondary-050">.text-secondary-050</span>
<span class="text-secondary-dark">.text-secondary-dark</span>
<span class="text-secondary-dark-025">.text-secondary-dark-025</span>
<span class="text-secondary-dark-050">.text-secondary-dark-050</span>
<span class="text-secondary-darker">.text-secondary-darker</span>
<span class="text-secondary-darker-025">.text-secondary-darker-025</span>
<span class="text-secondary-darker-050">.text-secondary-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-secondary-lighter-025">background-secondary-lighter 0.25 opacity</li>
<li class="docs--palette background-secondary-lighter-050">background-secondary-lighter 0.50 opacity</li>
</ul>
</li>
</ul>
<!--
Info
-->
<ul class="docs--palette-list">
<li class="docs--palette-title">info Color</li>
<li class="docs--palette background-info-darker">
<span class="text-info-lighter">.text-info-lighter</span>
<span class="text-info-lighter-025">.text-info-lighter-025</span>
<span class="text-info-lighter-050">.text-info-lighter-050</span>
<span class="text-info-light">.text-info-light</span>
<span class="text-info-light-025">.text-info-light-025</span>
<span class="text-info-light-050">.text-info-light-050</span>
<span class="text-info">.text-info</span>
<span class="text-info-025">.text-info-025</span>
<span class="text-info-050">.text-info-050</span>
<span class="text-info-dark">.text-info-dark</span>
<span class="text-info-dark-025">.text-info-dark-025</span> <span class="text-info-dark-050">.text-info-dark-050</span>
<span class="text-info-darker">.text-info-darker</span>
<span class="text-info-darker-025">.text-info-darker-025</span>
<span class="text-info-darker-050">.text-info-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-info-darker-025">background-info-darker 0.25 opacity</li>
<li class="docs--palette background-info-darker-050">background-info-darker 0.50 opacity</li>
</ul>
</li>
<li class="docs--palette background-info-dark">
<span class="text-info-lighter">.text-info-lighter</span>
<span class="text-info-lighter-025">.text-info-lighter-025</span>
<span class="text-info-lighter-050">.text-info-lighter-050</span>
<span class="text-info-light">.text-info-light</span>
<span class="text-info-light-025">.text-info-light-025</span>
<span class="text-info-light-050">.text-info-light-050</span>
<span class="text-info">.text-info</span>
<span class="text-info-025">.text-info-025</span>
<span class="text-info-050">.text-info-050</span>
<span class="text-info-dark">.text-info-dark</span>
<span class="text-info-dark-025">.text-info-dark-025</span> <span class="text-info-dark-050">.text-info-dark-050</span>
<span class="text-info-darker">.text-info-darker</span>
<span class="text-info-darker-025">.text-info-darker-025</span>
<span class="text-info-darker-050">.text-info-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-info-dark-025">background-info-dark 0.25 opacity</li>
<li class="docs--palette background-info-dark-050">background-info-dark 0.50 opacity</li>
</ul>
</li>
<li class="docs--palette background-info">
<span class="text-info-lighter">.text-info-lighter</span>
<span class="text-info-lighter-025">.text-info-lighter-025</span>
<span class="text-info-lighter-050">.text-info-lighter-050</span>
<span class="text-info-light">.text-info-light</span>
<span class="text-info-light-025">.text-info-light-025</span>
<span class="text-info-light-050">.text-info-light-050</span>
<span class="text-info">.text-info</span>
<span class="text-info-025">.text-info-025</span>
<span class="text-info-050">.text-info-050</span>
<span class="text-info-dark">.text-info-dark</span>
<span class="text-info-dark-025">.text-info-dark-025</span>
<span class="text-info-dark-050">.text-info-dark-050</span>
<span class="text-info-darker">.text-info-darker</span>
<span class="text-info-darker-025">.text-info-darker-025</span>
<span class="text-info-darker-050">.text-info-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-info-025">background-info 0.25 opacity</li>
<li class="docs--palette background-info-050">background-info 0.50 opacity</li>
</ul>
</li>
<li class="docs--palette background-info-light">
<span class="text-info-lighter">.text-info-lighter</span>
<span class="text-info-lighter-025">.text-info-lighter-025</span>
<span class="text-info-lighter-050">.text-info-lighter-050</span>
<span class="text-info-light">.text-info-light</span>
<span class="text-info-light-025">.text-info-light-025</span>
<span class="text-info-light-050">.text-info-light-050</span>
<span class="text-info">.text-info</span>
<span class="text-info-025">.text-info-025</span>
<span class="text-info-050">.text-info-050</span>
<span class="text-info-dark">.text-info-dark</span>
<span class="text-info-dark-025">.text-info-dark-025</span>
<span class="text-info-dark-050">.text-info-dark-050</span>
<span class="text-info-darker">.text-info-darker</span>
<span class="text-info-darker-025">.text-info-darker-025</span>
<span class="text-info-darker-050">.text-info-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-info-light-025">background-info-light 0.25 opacity</li>
<li class="docs--palette background-info-light-050">background-info-light 0.50 opacity</li>
</ul>
</li>
<li class="docs--palette background-info-lighter">
<span class="text-info-lighter">.text-info-lighter</span>
<span class="text-info-lighter-025">.text-info-lighter-025</span>
<span class="text-info-lighter-050">.text-info-lighter-050</span>
<span class="text-info-light">.text-info-light</span>
<span class="text-info-light-025">.text-info-light-025</span>
<span class="text-info-light-050">.text-info-light-050</span>
<span class="text-info">.text-info</span>
<span class="text-info-025">.text-info-025</span>
<span class="text-info-050">.text-info-050</span>
<span class="text-info-dark">.text-info-dark</span>
<span class="text-info-dark-025">.text-info-dark-025</span>
<span class="text-info-dark-050">.text-info-dark-050</span>
<span class="text-info-darker">.text-info-darker</span>
<span class="text-info-darker-025">.text-info-darker-025</span>
<span class="text-info-darker-050">.text-info-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-info-lighter-025">background-info-lighter 0.25 opacity</li>
<li class="docs--palette background-info-lighter-050">background-info-lighter 0.50 opacity</li>
</ul>
</li>
</ul>
<!--
Succsess
-->
<ul class="docs--palette-list">
<li class="docs--palette-title">success Color</li>
<li class="docs--palette background-success-darker">
<span class="text-success-lighter">.text-success-lighter</span>
<span class="text-success-lighter-025">.text-success-lighter-025</span>
<span class="text-success-lighter-050">.text-success-lighter-050</span>
<span class="text-success-light">.text-success-light</span>
<span class="text-success-light-025">.text-success-light-025</span>
<span class="text-success-light-050">.text-success-light-050</span>
<span class="text-success">.text-success</span>
<span class="text-success-025">.text-success-025</span>
<span class="text-success-050">.text-success-050</span>
<span class="text-success-dark">.text-success-dark</span>
<span class="text-success-dark-025">.text-success-dark-025</span> <span class="text-success-dark-050">.text-success-dark-050</span>
<span class="text-success-darker">.text-success-darker</span>
<span class="text-success-darker-025">.text-success-darker-025</span>
<span class="text-success-darker-050">.text-success-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-success-darker-025">background-success-darker 0.25 opacity</li>
<li class="docs--palette background-success-darker-050">background-success-darker 0.50 opacity</li>
</ul>
</li>
<li class="docs--palette background-success-dark">
<span class="text-success-lighter">.text-success-lighter</span>
<span class="text-success-lighter-025">.text-success-lighter-025</span>
<span class="text-success-lighter-050">.text-success-lighter-050</span>
<span class="text-success-light">.text-success-light</span>
<span class="text-success-light-025">.text-success-light-025</span>
<span class="text-success-light-050">.text-success-light-050</span>
<span class="text-success">.text-success</span>
<span class="text-success-025">.text-success-025</span>
<span class="text-success-050">.text-success-050</span>
<span class="text-success-dark">.text-success-dark</span>
<span class="text-success-dark-025">.text-success-dark-025</span> <span class="text-success-dark-050">.text-success-dark-050</span>
<span class="text-success-darker">.text-success-darker</span>
<span class="text-success-darker-025">.text-success-darker-025</span>
<span class="text-success-darker-050">.text-success-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-success-dark-025">background-success-dark 0.25 opacity</li>
<li class="docs--palette background-success-dark-050">background-success-dark 0.50 opacity</li>
</ul>
</li>
<li class="docs--palette background-success">
<span class="text-success-lighter">.text-success-lighter</span>
<span class="text-success-lighter-025">.text-success-lighter-025</span>
<span class="text-success-lighter-050">.text-success-lighter-050</span>
<span class="text-success-light">.text-success-light</span>
<span class="text-success-light-025">.text-success-light-025</span>
<span class="text-success-light-050">.text-success-light-050</span>
<span class="text-success">.text-success</span>
<span class="text-success-025">.text-success-025</span>
<span class="text-success-050">.text-success-050</span>
<span class="text-success-dark">.text-success-dark</span>
<span class="text-success-dark-025">.text-success-dark-025</span>
<span class="text-success-dark-050">.text-success-dark-050</span>
<span class="text-success-darker">.text-success-darker</span>
<span class="text-success-darker-025">.text-success-darker-025</span>
<span class="text-success-darker-050">.text-success-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-success-025">background-success 0.25 opacity</li>
<li class="docs--palette background-success-050">background-success 0.50 opacity</li>
</ul>
</li>
<li class="docs--palette background-success-light">
<span class="text-success-lighter">.text-success-lighter</span>
<span class="text-success-lighter-025">.text-success-lighter-025</span>
<span class="text-success-lighter-050">.text-success-lighter-050</span>
<span class="text-success-light">.text-success-light</span>
<span class="text-success-light-025">.text-success-light-025</span>
<span class="text-success-light-050">.text-success-light-050</span>
<span class="text-success">.text-success</span>
<span class="text-success-025">.text-success-025</span>
<span class="text-success-050">.text-success-050</span>
<span class="text-success-dark">.text-success-dark</span>
<span class="text-success-dark-025">.text-success-dark-025</span>
<span class="text-success-dark-050">.text-success-dark-050</span>
<span class="text-success-darker">.text-success-darker</span>
<span class="text-success-darker-025">.text-success-darker-025</span>
<span class="text-success-darker-050">.text-success-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-success-light-025">background-success-light 0.25 opacity</li>
<li class="docs--palette background-success-light-050">background-success-light 0.50 opacity</li>
</ul>
</li>
<li class="docs--palette background-success-lighter">
<span class="text-success-lighter">.text-success-lighter</span>
<span class="text-success-lighter-025">.text-success-lighter-025</span>
<span class="text-success-lighter-050">.text-success-lighter-050</span>
<span class="text-success-light">.text-success-light</span>
<span class="text-success-light-025">.text-success-light-025</span>
<span class="text-success-light-050">.text-success-light-050</span>
<span class="text-success">.text-success</span>
<span class="text-success-025">.text-success-025</span>
<span class="text-success-050">.text-success-050</span>
<span class="text-success-dark">.text-success-dark</span>
<span class="text-success-dark-025">.text-success-dark-025</span>
<span class="text-success-dark-050">.text-success-dark-050</span>
<span class="text-success-darker">.text-success-darker</span>
<span class="text-success-darker-025">.text-success-darker-025</span>
<span class="text-success-darker-050">.text-success-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-success-lighter-025">background-success-lighter 0.25 opacity</li>
<li class="docs--palette background-success-lighter-050">background-success-lighter 0.50 opacity</li>
</ul>
</li>
</ul>
<!--
Warning
-->
<ul class="docs--palette-list">
<li class="docs--palette-title">warning Color</li>
<li class="docs--palette background-warning-darker">
<span class="text-warning-lighter">.text-warning-lighter</span>
<span class="text-warning-lighter-025">.text-warning-lighter-025</span>
<span class="text-warning-lighter-050">.text-warning-lighter-050</span>
<span class="text-warning-light">.text-warning-light</span>
<span class="text-warning-light-025">.text-warning-light-025</span>
<span class="text-warning-light-050">.text-warning-light-050</span>
<span class="text-warning">.text-warning</span>
<span class="text-warning-025">.text-warning-025</span>
<span class="text-warning-050">.text-warning-050</span>
<span class="text-warning-dark">.text-warning-dark</span>
<span class="text-warning-dark-025">.text-warning-dark-025</span> <span class="text-warning-dark-050">.text-warning-dark-050</span>
<span class="text-warning-darker">.text-warning-darker</span>
<span class="text-warning-darker-025">.text-warning-darker-025</span>
<span class="text-warning-darker-050">.text-warning-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-warning-darker-025">background-warning-darker 0.25 opacity</li>
<li class="docs--palette background-warning-darker-050">background-warning-darker 0.50 opacity</li>
</ul>
</li>
<li class="docs--palette background-warning-dark">
<span class="text-warning-lighter">.text-warning-lighter</span>
<span class="text-warning-lighter-025">.text-warning-lighter-025</span>
<span class="text-warning-lighter-050">.text-warning-lighter-050</span>
<span class="text-warning-light">.text-warning-light</span>
<span class="text-warning-light-025">.text-warning-light-025</span>
<span class="text-warning-light-050">.text-warning-light-050</span>
<span class="text-warning">.text-warning</span>
<span class="text-warning-025">.text-warning-025</span>
<span class="text-warning-050">.text-warning-050</span>
<span class="text-warning-dark">.text-warning-dark</span>
<span class="text-warning-dark-025">.text-warning-dark-025</span> <span class="text-warning-dark-050">.text-warning-dark-050</span>
<span class="text-warning-darker">.text-warning-darker</span>
<span class="text-warning-darker-025">.text-warning-darker-025</span>
<span class="text-warning-darker-050">.text-warning-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-warning-dark-025">background-warning-dark 0.25 opacity</li>
<li class="docs--palette background-warning-dark-050">background-warning-dark 0.50 opacity</li>
</ul>
</li>
<li class="docs--palette background-warning">
<span class="text-warning-lighter">.text-warning-lighter</span>
<span class="text-warning-lighter-025">.text-warning-lighter-025</span>
<span class="text-warning-lighter-050">.text-warning-lighter-050</span>
<span class="text-warning-light">.text-warning-light</span>
<span class="text-warning-light-025">.text-warning-light-025</span>
<span class="text-warning-light-050">.text-warning-light-050</span>
<span class="text-warning">.text-warning</span>
<span class="text-warning-025">.text-warning-025</span>
<span class="text-warning-050">.text-warning-050</span>
<span class="text-warning-dark">.text-warning-dark</span>
<span class="text-warning-dark-025">.text-warning-dark-025</span>
<span class="text-warning-dark-050">.text-warning-dark-050</span>
<span class="text-warning-darker">.text-warning-darker</span>
<span class="text-warning-darker-025">.text-warning-darker-025</span>
<span class="text-warning-darker-050">.text-warning-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-warning-025">background-warning 0.25 opacity</li>
<li class="docs--palette background-warning-050">background-warning 0.50 opacity</li>
</ul>
</li>
<li class="docs--palette background-warning-light">
<span class="text-warning-lighter">.text-warning-lighter</span>
<span class="text-warning-lighter-025">.text-warning-lighter-025</span>
<span class="text-warning-lighter-050">.text-warning-lighter-050</span>
<span class="text-warning-light">.text-warning-light</span>
<span class="text-warning-light-025">.text-warning-light-025</span>
<span class="text-warning-light-050">.text-warning-light-050</span>
<span class="text-warning">.text-warning</span>
<span class="text-warning-025">.text-warning-025</span>
<span class="text-warning-050">.text-warning-050</span>
<span class="text-warning-dark">.text-warning-dark</span>
<span class="text-warning-dark-025">.text-warning-dark-025</span>
<span class="text-warning-dark-050">.text-warning-dark-050</span>
<span class="text-warning-darker">.text-warning-darker</span>
<span class="text-warning-darker-025">.text-warning-darker-025</span>
<span class="text-warning-darker-050">.text-warning-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-warning-light-025">background-warning-light 0.25 opacity</li>
<li class="docs--palette background-warning-light-050">background-warning-light 0.50 opacity</li>
</ul>
</li>
<li class="docs--palette background-warning-lighter">
<span class="text-warning-lighter">.text-warning-lighter</span>
<span class="text-warning-lighter-025">.text-warning-lighter-025</span>
<span class="text-warning-lighter-050">.text-warning-lighter-050</span>
<span class="text-warning-light">.text-warning-light</span>
<span class="text-warning-light-025">.text-warning-light-025</span>
<span class="text-warning-light-050">.text-warning-light-050</span>
<span class="text-warning">.text-warning</span>
<span class="text-warning-025">.text-warning-025</span>
<span class="text-warning-050">.text-warning-050</span>
<span class="text-warning-dark">.text-warning-dark</span>
<span class="text-warning-dark-025">.text-warning-dark-025</span>
<span class="text-warning-dark-050">.text-warning-dark-050</span>
<span class="text-warning-darker">.text-warning-darker</span>
<span class="text-warning-darker-025">.text-warning-darker-025</span>
<span class="text-warning-darker-050">.text-warning-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-warning-lighter-025">background-warning-lighter 0.25 opacity</li>
<li class="docs--palette background-warning-lighter-050">background-warning-lighter 0.50 opacity</li>
</ul>
</li>
</ul>
<!--
Danger
-->
<ul class="docs--palette-list">
<li class="docs--palette-title">danger Color</li>
<li class="docs--palette background-danger-darker">
<span class="text-danger-lighter">.text-danger-lighter</span>
<span class="text-danger-lighter-025">.text-danger-lighter-025</span>
<span class="text-danger-lighter-050">.text-danger-lighter-050</span>
<span class="text-danger-light">.text-danger-light</span>
<span class="text-danger-light-025">.text-danger-light-025</span>
<span class="text-danger-light-050">.text-danger-light-050</span>
<span class="text-danger">.text-danger</span>
<span class="text-danger-025">.text-danger-025</span>
<span class="text-danger-050">.text-danger-050</span>
<span class="text-danger-dark">.text-danger-dark</span>
<span class="text-danger-dark-025">.text-danger-dark-025</span> <span class="text-danger-dark-050">.text-danger-dark-050</span>
<span class="text-danger-darker">.text-danger-darker</span>
<span class="text-danger-darker-025">.text-danger-darker-025</span>
<span class="text-danger-darker-050">.text-danger-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-danger-darker-025">background-danger-darker 0.25 opacity</li>
<li class="docs--palette background-danger-darker-050">background-danger-darker 0.50 opacity</li>
</ul>
</li>
<li class="docs--palette background-danger-dark">
<span class="text-danger-lighter">.text-danger-lighter</span>
<span class="text-danger-lighter-025">.text-danger-lighter-025</span>
<span class="text-danger-lighter-050">.text-danger-lighter-050</span>
<span class="text-danger-light">.text-danger-light</span>
<span class="text-danger-light-025">.text-danger-light-025</span>
<span class="text-danger-light-050">.text-danger-light-050</span>
<span class="text-danger">.text-danger</span>
<span class="text-danger-025">.text-danger-025</span>
<span class="text-danger-050">.text-danger-050</span>
<span class="text-danger-dark">.text-danger-dark</span>
<span class="text-danger-dark-025">.text-danger-dark-025</span> <span class="text-danger-dark-050">.text-danger-dark-050</span>
<span class="text-danger-darker">.text-danger-darker</span>
<span class="text-danger-darker-025">.text-danger-darker-025</span>
<span class="text-danger-darker-050">.text-danger-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-danger-dark-025">background-danger-dark 0.25 opacity</li>
<li class="docs--palette background-danger-dark-050">background-danger-dark 0.50 opacity</li>
</ul>
</li>
<li class="docs--palette background-danger">
<span class="text-danger-lighter">.text-danger-lighter</span>
<span class="text-danger-lighter-025">.text-danger-lighter-025</span>
<span class="text-danger-lighter-050">.text-danger-lighter-050</span>
<span class="text-danger-light">.text-danger-light</span>
<span class="text-danger-light-025">.text-danger-light-025</span>
<span class="text-danger-light-050">.text-danger-light-050</span>
<span class="text-danger">.text-danger</span>
<span class="text-danger-025">.text-danger-025</span>
<span class="text-danger-050">.text-danger-050</span>
<span class="text-danger-dark">.text-danger-dark</span>
<span class="text-danger-dark-025">.text-danger-dark-025</span>
<span class="text-danger-dark-050">.text-danger-dark-050</span>
<span class="text-danger-darker">.text-danger-darker</span>
<span class="text-danger-darker-025">.text-danger-darker-025</span>
<span class="text-danger-darker-050">.text-danger-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-danger-025">background-danger 0.25 opacity</li>
<li class="docs--palette background-danger-050">background-danger 0.50 opacity</li>
</ul>
</li>
<li class="docs--palette background-danger-light">
<span class="text-danger-lighter">.text-danger-lighter</span>
<span class="text-danger-lighter-025">.text-danger-lighter-025</span>
<span class="text-danger-lighter-050">.text-danger-lighter-050</span>
<span class="text-danger-light">.text-danger-light</span>
<span class="text-danger-light-025">.text-danger-light-025</span>
<span class="text-danger-light-050">.text-danger-light-050</span>
<span class="text-danger">.text-danger</span>
<span class="text-danger-025">.text-danger-025</span>
<span class="text-danger-050">.text-danger-050</span>
<span class="text-danger-dark">.text-danger-dark</span>
<span class="text-danger-dark-025">.text-danger-dark-025</span>
<span class="text-danger-dark-050">.text-danger-dark-050</span>
<span class="text-danger-darker">.text-danger-darker</span>
<span class="text-danger-darker-025">.text-danger-darker-025</span>
<span class="text-danger-darker-050">.text-danger-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-danger-light-025">background-danger-light 0.25 opacity</li>
<li class="docs--palette background-danger-light-050">background-danger-light 0.50 opacity</li>
</ul>
</li>
<li class="docs--palette background-danger-lighter">
<span class="text-danger-lighter">.text-danger-lighter</span>
<span class="text-danger-lighter-025">.text-danger-lighter-025</span>
<span class="text-danger-lighter-050">.text-danger-lighter-050</span>
<span class="text-danger-light">.text-danger-light</span>
<span class="text-danger-light-025">.text-danger-light-025</span>
<span class="text-danger-light-050">.text-danger-light-050</span>
<span class="text-danger">.text-danger</span>
<span class="text-danger-025">.text-danger-025</span>
<span class="text-danger-050">.text-danger-050</span>
<span class="text-danger-dark">.text-danger-dark</span>
<span class="text-danger-dark-025">.text-danger-dark-025</span>
<span class="text-danger-dark-050">.text-danger-dark-050</span>
<span class="text-danger-darker">.text-danger-darker</span>
<span class="text-danger-darker-025">.text-danger-darker-025</span>
<span class="text-danger-darker-050">.text-danger-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-danger-lighter-025">background-danger-lighter 0.25 opacity</li>
<li class="docs--palette background-danger-lighter-050">background-danger-lighter 0.50 opacity</li>
</ul>
</li>
</ul>
<!--
Grays
-->
<ul class="docs--palette-list">
<li class="docs--palette-title">Grays</li>
<li class="docs--palette background-gray-darker">
<span class="text-gray-lighter">.text-gray-lighter</span>
<span class="text-gray-lighter-025">.text-gray-lighter-025</span>
<span class="text-gray-lighter-050">.text-gray-lighter-050</span>
<span class="text-gray-light">.text-gray-light</span>
<span class="text-gray-light-025">.text-gray-light-025</span>
<span class="text-gray-light-050">.text-gray-light-050</span>
<span class="text-gray">.text-gray</span>
<span class="text-gray-025">.text-gray-025</span>
<span class="text-gray-050">.text-gray-050</span>
<span class="text-gray-dark">.text-gray-dark</span>
<span class="text-gray-dark-025">.text-gray-dark-025</span> <span class="text-gray-dark-050">.text-gray-dark-050</span>
<span class="text-gray-darker">.text-gray-darker</span>
<span class="text-gray-darker-025">.text-gray-darker-025</span>
<span class="text-gray-darker-050">.text-gray-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-gray-darker-025">background-gray-darker 0.25 opacity</li>
<li class="docs--palette background-gray-darker-050">background-gray-darker 0.50 opacity</li>
</ul>
</li>
<li class="docs--palette background-gray-dark">
<span class="text-gray-lighter">.text-gray-lighter</span>
<span class="text-gray-lighter-025">.text-gray-lighter-025</span>
<span class="text-gray-lighter-050">.text-gray-lighter-050</span>
<span class="text-gray-light">.text-gray-light</span>
<span class="text-gray-light-025">.text-gray-light-025</span>
<span class="text-gray-light-050">.text-gray-light-050</span>
<span class="text-gray">.text-gray</span>
<span class="text-gray-025">.text-gray-025</span>
<span class="text-gray-050">.text-gray-050</span>
<span class="text-gray-dark">.text-gray-dark</span>
<span class="text-gray-dark-025">.text-gray-dark-025</span> <span class="text-gray-dark-050">.text-gray-dark-050</span>
<span class="text-gray-darker">.text-gray-darker</span>
<span class="text-gray-darker-025">.text-gray-darker-025</span>
<span class="text-gray-darker-050">.text-gray-darker-050</span>
<ul class="docs--palette-opacity">
<li class="docs--palette background-gray-dark-025">background-gray-dark 0.25 opacity</li>
<li class="docs--palette background-gray-dark-050">background-gray-dark 0.50 opacity</li>
</ul>
</li>
<li class="docs--palette background-gray">
<span class="text-gray-lighter">.text-gray-lighter</span>
<span class="text-gray-lighter-025">.text-gray-lighter-025</span>
<span class="text-gray-lighter-050">.text-gray-lighter-050</span>
<span class="text-gray-light">.text-gray-light</span>
<span class="text-gray-light-025">.text-gray-light-025</span>
<span class="tex