Web Docs

Color: Ui Colors 

<div class="colors columns-2">
    <div class="color white-text" style="background:#0057b8">
        <h2>Info</h2>
        <p><code>#0057b8</code></p>
        <p><code>$colorInfo</code></p>
    </div>
    <div class="color" style="background:#afd6fe">
        <h2>Info Light</h2>
        <p><code>#afd6fe</code></p>
        <p><code>$colorInfoLight</code></p>
    </div>
    <div class="color" style="background:#fcc015">
        <h2>Warning</h2>
        <p><code>#fcc015</code></p>
        <p><code>$colorWarning</code></p>
    </div>
    <div class="color" style="background:#fff0c5">
        <h2>Warning Light</h2>
        <p><code>#fff0c5</code></p>
        <p><code>$colorWarningLight</code></p>
    </div>
    <div class="color white-text" style="background:#38870c">
        <h2>Confirm</h2>
        <p><code>#38870c</code></p>
        <p><code>$colorConfirm</code></p>
    </div>
    <div class="color" style="background:#cee0c3">
        <h2>Confirm Light</h2>
        <p><code>#cee0c3</code></p>
        <p><code>$colorConfirmLight</code></p>
    </div>
    <div class="color white-text" style="background:#a60318">
        <h2>Danger</h2>
        <p><code>#a60318</code></p>
        <p><code>$colorDanger</code></p>
    </div>
    <div class="color" style="background:#fde3e6">
        <h2>Danger Light</h2>
        <p><code>#fde3e6</code></p>
        <p><code>$colorDangerLight</code></p>
    </div>
</div>
 
<div class="colors columns-{{columns}}">
	{{#each colors }}
	<div class="color{{#if dark}} white-text{{/if}}" style="background:#{{hex}}">
		<h2>{{ name }}</h2>
		<p><code>#{{ hex }}</code></p>
		<p><code>${{ var }}</code></p>
	</div>
	{{/each}}
</div>
 
{
  "columns": 2,
  "colors": [
    {
      "name": "Info",
      "var": "colorInfo",
      "hex": "0057b8",
      "dark": true
    },
    {
      "name": "Info Light",
      "var": "colorInfoLight",
      "hex": "afd6fe"
    },
    {
      "name": "Warning",
      "var": "colorWarning",
      "hex": "fcc015"
    },
    {
      "name": "Warning Light",
      "var": "colorWarningLight",
      "hex": "fff0c5"
    },
    {
      "name": "Confirm",
      "var": "colorConfirm",
      "hex": "38870c",
      "dark": true
    },
    {
      "name": "Confirm Light",
      "var": "colorConfirmLight",
      "hex": "cee0c3"
    },
    {
      "name": "Danger",
      "var": "colorDanger",
      "hex": "a60318",
      "dark": true
    },
    {
      "name": "Danger Light",
      "var": "colorDangerLight",
      "hex": "fde3e6"
    }
  ]
}