<h2>Brand Colors</h2>
<div class="f-palette">
<figure class="f-color">
<svg aria-label="#d60051">
<rect fill="#d60051" width="100%" height="100%" />
<text fill="white" x="10" y="10" alignment-baseline="hanging">#d60051</text>
</svg>
<figcaption><code>one</code></figcaption>
</figure>
<figure class="f-color">
<svg aria-label="#381c2e">
<rect fill="#381c2e" width="100%" height="100%" />
<text fill="white" x="10" y="10" alignment-baseline="hanging">#381c2e</text>
</svg>
<figcaption><code>dark</code></figcaption>
</figure>
<figure class="f-color">
<svg aria-label="#00d2d3">
<rect fill="#00d2d3" width="100%" height="100%" />
<text fill="white" x="10" y="10" alignment-baseline="hanging">#00d2d3</text>
</svg>
<figcaption><code>two</code></figcaption>
</figure>
</div>
<h2>Base Colors</h2>
<div class="f-palette">
<figure class="f-color">
<svg aria-label="#000">
<rect fill="#000" width="100%" height="100%" />
<text fill="white" x="10" y="10" alignment-baseline="hanging">#000</text>
</svg>
<figcaption><code>dark</code></figcaption>
</figure>
<figure class="f-color">
<svg aria-label="#212121">
<rect fill="#212121" width="100%" height="100%" />
<text fill="white" x="10" y="10" alignment-baseline="hanging">#212121</text>
</svg>
<figcaption><code>grey--87</code></figcaption>
</figure>
<figure class="f-color">
<svg aria-label="#757575">
<rect fill="#757575" width="100%" height="100%" />
<text fill="white" x="10" y="10" alignment-baseline="hanging">#757575</text>
</svg>
<figcaption><code>grey--54</code></figcaption>
</figure>
<figure class="f-color">
<svg aria-label="#9e9e9e">
<rect fill="#9e9e9e" width="100%" height="100%" />
<text fill="white" x="10" y="10" alignment-baseline="hanging">#9e9e9e</text>
</svg>
<figcaption><code>grey--38</code></figcaption>
</figure>
<figure class="f-color">
<svg aria-label="#e0e0e0">
<rect fill="#e0e0e0" width="100%" height="100%" />
<text fill="white" x="10" y="10" alignment-baseline="hanging">#e0e0e0</text>
</svg>
<figcaption><code>grey--12</code></figcaption>
</figure>
<figure class="f-color">
<svg aria-label="#f0f0f0">
<rect fill="#f0f0f0" width="100%" height="100%" />
<text fill="white" x="10" y="10" alignment-baseline="hanging">#f0f0f0</text>
</svg>
<figcaption><code>grey--6</code></figcaption>
</figure>
<figure class="f-color">
<svg aria-label="#fff">
<rect fill="#fff" width="100%" height="100%" />
<text fill="white" x="10" y="10" alignment-baseline="hanging">#fff</text>
</svg>
<figcaption><code>light</code></figcaption>
</figure>
</div>
<h2>Accent Colors</h2>
<div class="f-palette">
<figure class="f-color">
<svg aria-label="#f0f0f0">
<rect fill="#f0f0f0" width="100%" height="100%" />
<text fill="white" x="10" y="10" alignment-baseline="hanging">#f0f0f0</text>
</svg>
<figcaption><code>accent--light</code></figcaption>
</figure>
<figure class="f-color">
<svg aria-label="#acacac">
<rect fill="#acacac" width="100%" height="100%" />
<text fill="white" x="10" y="10" alignment-baseline="hanging">#acacac</text>
</svg>
<figcaption><code>accent</code></figcaption>
</figure>
<figure class="f-color">
<svg aria-label="#6e6e6e">
<rect fill="#6e6e6e" width="100%" height="100%" />
<text fill="white" x="10" y="10" alignment-baseline="hanging">#6e6e6e</text>
</svg>
<figcaption><code>accent--dark</code></figcaption>
</figure>
</div>
<h2>States Colors</h2>
<div class="f-palette">
<figure class="f-color">
<svg aria-label="#dc3545">
<rect fill="#dc3545" width="100%" height="100%" />
<text fill="white" x="10" y="10" alignment-baseline="hanging">#dc3545</text>
</svg>
<figcaption><code>alert</code></figcaption>
</figure>
<figure class="f-color">
<svg aria-label="#ffc107">
<rect fill="#ffc107" width="100%" height="100%" />
<text fill="white" x="10" y="10" alignment-baseline="hanging">#ffc107</text>
</svg>
<figcaption><code>warning</code></figcaption>
</figure>
<figure class="f-color">
<svg aria-label="#28a745">
<rect fill="#28a745" width="100%" height="100%" />
<text fill="white" x="10" y="10" alignment-baseline="hanging">#28a745</text>
</svg>
<figcaption><code>success</code></figcaption>
</figure>
<figure class="f-color">
<svg aria-label="#17a2b8">
<rect fill="#17a2b8" width="100%" height="100%" />
<text fill="white" x="10" y="10" alignment-baseline="hanging">#17a2b8</text>
</svg>
<figcaption><code>info</code></figcaption>
</figure>
</div>
{{#each colors}}
<h2>{{ name }}</h2>
<div class="f-palette">
{{#each items}}
<figure class="f-color">
<svg aria-label="{{ this }}">
<rect fill="{{ this }}" width="100%" height="100%"/>
<text fill="white" x="10" y="10" alignment-baseline="hanging">{{ this }}</text>
</svg>
<figcaption><code>{{ @key }}</code></figcaption>
</figure>
{{/each}}
</div>
{{/each}}
{
"colors": {
"brand": {
"name": "Brand Colors",
"items": {
"one": "#d60051",
"dark": "#381c2e",
"two": "#00d2d3"
}
},
"base": {
"name": "Base Colors",
"items": {
"dark": "#000",
"grey--87": "#212121",
"grey--54": "#757575",
"grey--38": "#9e9e9e",
"grey--12": "#e0e0e0",
"grey--6": "#f0f0f0",
"light": "#fff"
}
},
"accent": {
"name": "Accent Colors",
"items": {
"accent--light": "#f0f0f0",
"accent": "#acacac",
"accent--dark": "#6e6e6e"
}
},
"states": {
"name": "States Colors",
"items": {
"alert": "#dc3545",
"warning": "#ffc107",
"success": "#28a745",
"info": "#17a2b8"
}
}
}
}
.f-palette {
display: flex;
flex-wrap: wrap;
}
.f-color {
flex: 1 1 4em;
margin: 0 0.25em 1.5em;
svg {
width: 100%;
height: 5em;
border-radius: rem(4);
}
code {
display: inline-block;
color: $color__dark;
}
text {
font: 0.75em/1em Hack, Consolas, Monaco, monospace;
font-style: normal;
text-shadow: 0 0 2px $color__dark;
}
}
This is not a module to use it, only for pattern library presentation.