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

Version Path
solidus_backend-4.4.2 app/views/spree/admin/style_guide/topics/typography/_colors.html.erb
solidus_backend-4.4.1 app/views/spree/admin/style_guide/topics/typography/_colors.html.erb
solidus_backend-4.4.0 app/views/spree/admin/style_guide/topics/typography/_colors.html.erb
solidus_backend-4.3.4 app/views/spree/admin/style_guide/topics/typography/_colors.html.erb
solidus_backend-4.2.4 app/views/spree/admin/style_guide/topics/typography/_colors.html.erb
solidus_backend-4.1.5 app/views/spree/admin/style_guide/topics/typography/_colors.html.erb
solidus_backend-4.3.3 app/views/spree/admin/style_guide/topics/typography/_colors.html.erb
solidus_backend-4.3.2 app/views/spree/admin/style_guide/topics/typography/_colors.html.erb
solidus_backend-4.1.4 app/views/spree/admin/style_guide/topics/typography/_colors.html.erb
solidus_backend-4.3.1 app/views/spree/admin/style_guide/topics/typography/_colors.html.erb
solidus_backend-4.3.0 app/views/spree/admin/style_guide/topics/typography/_colors.html.erb
solidus_backend-4.2.3 app/views/spree/admin/style_guide/topics/typography/_colors.html.erb
solidus_backend-4.1.3 app/views/spree/admin/style_guide/topics/typography/_colors.html.erb
solidus_backend-4.0.4 app/views/spree/admin/style_guide/topics/typography/_colors.html.erb
solidus_backend-3.4.6 app/views/spree/admin/style_guide/topics/typography/_colors.html.erb
solidus_backend-4.0.3 app/views/spree/admin/style_guide/topics/typography/_colors.html.erb
solidus_backend-4.1.2 app/views/spree/admin/style_guide/topics/typography/_colors.html.erb
solidus_backend-4.2.2 app/views/spree/admin/style_guide/topics/typography/_colors.html.erb
solidus_backend-3.4.5 app/views/spree/admin/style_guide/topics/typography/_colors.html.erb
solidus_backend-4.2.1 app/views/spree/admin/style_guide/topics/typography/_colors.html.erb