Sha256: f80b903ef5a334be80fe79237d7f8c6d216ba8d922f5eb02ffec65a2156b775e
Contents?: true
Size: 1.36 KB
Versions: 83
Compression:
Stored size: 1.36 KB
Contents
<%- snippet = capture do %>
<p>where the html example goes</p>
<%- end %>
<p>
The Solidus UI is made up mostly of a grey color palette with blue being used for interactive elements and red, green and yellow being used to give visual context to messaging.
</p>
<%-
colors = [
{
name: '$color-1',
value: '#FFFFFF',
used_for: 'Backgrounds.'
},
{
name: '$color-2',
value: '#9FC820',
used_for: 'Active states.'
},
{
name: '$color-3',
value: '#5498DA',
used_for: 'Buttons, links, form text.'
},
{
name: '$color-4',
value: '#6788A2',
used_for: 'Non-interactive text outside of form fields.'
},
{
name: '$color-5',
value: '#C60F13',
used_for: 'Errors, destructive action warnings.'
},
{
name: '$color-6',
value: '#FF9300',
used_for: 'Warnings'
},
{
name: '$color-7',
value: '#F4F4F4',
used_for: 'Disabled states'
}
]
%>
<div class="color-variables">
<%- colors.each do |color| %>
<div class="color-variable">
<div class="color-swatch" style="background-color: <%= color[:value] %>"></div>
<dl class="color-variable-details">
<dt>Color:</dt>
<dd><%= color[:value] %></dd>
<dt>Sass:</dt>
<dd><code><%= color[:name] %></code></dd>
<dt>For:</dt>
<dd><%= color[:used_for] %></dd>
</dl>
</div>
<%- end %>
</div>
Version data entries
83 entries across 83 versions & 2 rubygems