Sha256: 2afff2eaf6bd897c5fa27edca791444e187799f0d36ba1bbaed0fca5ec3f8b64
Contents?: true
Size: 1.67 KB
Versions: 31
Compression:
Stored size: 1.67 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-white', value: '#FFFFFF', used_for: 'Body background color.' }, { name: '$color-light', value: '#F9FAFB', used_for: 'Sidebar and header background color.' }, { name: '$color-light-dark', value: '#E5E7EB', used_for: 'Borders color.' }, { name: '$color-dark', value: '#24282F', used_for: 'Text and headings color.' }, { name: '$color-dark-light', value: '#808C9E', used_for: 'Main text color for navigation, tabs, breadcrumb.' }, { name: '$color-primary', value: '#3D76F1', used_for: 'Buttons primary actions, links, active states.' }, { name: 'theme-color(success)', value: '#52B73B', used_for: 'Success actions.' }, { name: 'theme-color(danger)', value: '#CE452A', used_for: 'Errors, destructive action warnings.' }, { name: 'theme-color(warning)', value: '#FFDD59', used_for: 'Warnings actions.' } ] %> <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
31 entries across 31 versions & 1 rubygems