<% layout('./../../layout') -%>

<% include _globals_menu %>

<!-- Header -->
<header class="sn-layout__header">
  <div aria-expanded="false" role="button" tabindex="0" class="sn-layout__drawer-button">
    <i class="material-icons"></i>
  </div>
  <div class="sn-layout__title-group">
    <div class="sn-layout__title-wrap">
      <span class="sn-layout__title">Globals</span>
    </div>  
    <div class="sn-layout__title-wrap">
      <span class="sn-layout__title">Colors</span>
    </div>
  </div>
</header>

<!-- Content -->
<main class="sn-layout__content">

  <div class="sn-grid sn-grid--horizontal sn-grid--bleed-top sn-grid--bleed">
    <div class="sn-cell--1">
      <span class="sn-typo--display-1">System Colors</span>
    </div>
  </div>
  <div class="sn-grid sn-grid--horizontal sn-grid--bleed-all sn-grid--cell-gutter">
    <div class="sn-cell--1">
      <div class="sn-presentation-color sn-background-color--success">Sucess</div>
    </div>
    <div class="sn-cell--1">
      <div class="sn-presentation-color sn-background-color--info">Info</div>
    </div>
    <div class="sn-cell--1">
      <div class="sn-presentation-color sn-background-color--warning">Warning</div>
    </div>
    <div class="sn-cell--1">
      <div class="sn-presentation-color sn-background-color--danger">Danger</div>
    </div>
  </div>

  <div class="sn-grid sn-grid--horizontal sn-grid--bleed-all sn-grid--cell-gutter">
    <div class="sn-cell--1">
      <div class="sn-color--primary-text">Primary Text
        <br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>
    </div>
    <div class="sn-cell--1">
      <div class="sn-color--secondary-text">Secondary Text
        <br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>
    </div>
    <div class="sn-cell--1">
      <div class="sn-color--disabled-text">Disabled Text
        <br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>
    </div>
    <div class="sn-cell--1">
      <div class="sn-color--contrast-text">Contrast Text
        <br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>
    </div>
  </div>


  <div class="sn-grid sn-grid--horizontal sn-grid--bleed-all">
    <div class="sn-cell--1">
      <ul class="sn-presentation-list sn-presentantion-list--main">
        <li>sn-color--success</li>
        <li>sn-color--info</li>
        <li>sn-color--warning</li>
        <li>sn-color--danger</li>
        <li>--</li>
        <li>sn-color--primary-text</li>
        <li>sn-color--secondary-text</li>
        <li>sn-color--disabled-text</li>
        <li>sn-color--contrast-text</li>
      </ul>
    </div>
    <div class="sn-cell--1">
      <ul class="sn-presentation-list">
        <li>Success text</li>
        <li>Info text</li>
        <li>Warning text</li>
        <li>Danger text</li>
        <li>--</li>
        <li>Primary text</li>
        <li>Secondary text</li>
        <li>Disabled text</li>
        <li>Contrast text</li>
      </ul>
    </div>
  </div>

  <hr>

  <div class="sn-grid sn-grid--horizontal sn-grid--bleed sn-grid--bleed-top">
    <div class="sn-cell--1">
      <p class="sn-typo--headline">Material Palette</p>
    </div>
  </div>

  <div class="sn-grid sn-grid--horizontal sn-grid--bleed-all">
    <div class="sn-cell--1">
      <p>Please see
        <a href="https://material.google.com/style/color.html" target="_blank">Google Material Colors</a>
      </p>
    </div>
  </div>

</main>