Reverse Colors

Sometimes a design will have an section that uses a different background color. For example, you may have a page that is mostly white background and dark text. But that page may have a footer that is a black background with light text. In the context of that footer, you will need to define text, link, and border colors that will be visible. These colors will be different from – the reverse of – the page’s default colors.

The reverse module makes it easy to define and apply these reverse colors with a single class.

Implementation

In the body module, colors from the settings file are assigned to custom properties of the :root pseudo-element.

:root {
  --tycolor-bg:                   #{$tycolor-bg};
  --tycolor-bg-tab-active:        #{$tycolor-bg-tab-active};
  --tycolor-fg:                   #{$tycolor-fg};
  --tycolor-text-light:           #{$tycolor-text-light};
  --tycolor-link-default:         #{$tycolor-link-default};
  --tycolor-link-active:          #{$tycolor-link-active};
  --tycolor-border:               #{$tycolor-border};
  --tycolor-border-link-default:  #{$tycolor-border-link-default};
  --tycolor-border-link-active:   #{$tycolor-border-link-active};
  --tycolor-shade:                #{$tycolor-shade};
}

The reverse module defines a class, reverse. Within the reverse class new values are assigned to those custom properties. The new values are, by default, the reverse of Tyfy’s default colors. The module provides SASS variables for these reverse colors that can be customized. This implementation allows you to quickly create and apply a new color context. This approach can also be replicated to create multiple color contexts.

.reverse {
  --tycolor-bg:                   #{$tycolor-rev-bg};
  --tycolor-bg-tab-active:        #{$tycolor-rev-bg-tab-active};
  --tycolor-fg:                   #{$tycolor-rev-fg};
  --tycolor-text-light:           #{$tycolor-rev-text-light};
  --tycolor-link-default:         #{$tycolor-rev-link-default};
  --tycolor-link-active:          #{$tycolor-rev-link-active};
  --tycolor-border:               #{$tycolor-rev-border};
  --tycolor-border-link-default:  #{$tycolor-rev-border-link-default};
  --tycolor-border-link-active:   #{$tycolor-rev-border-link-active};
  --tycolor-shade:                #{$tycolor-rev-shade};
  
  background-color:var(--tycolor-bg);
  color:var(--tycolor-fg);
}

The reverse module accounts for colors in all of Tyfy’s styles and patterns.

Examples

In the following examples, you can use the reverse toggle button to see how adding or removing the reverse class changes the color context.

Headings, Paragraphs, & Links

<div class="reverse">
  <h4>Heading 4</h4>
  <p>I’ll meet you at the rendezvous point on Tatooine. Princess, we’ll find Han. I promise. Chewie, I’ll be waiting for your signal. Take care, you two. <a href="https://forcemipsum.com">May the Force be with you</a>.</p>
  <p><a class="tybutton" href="https://forcemipsum.com">Learn More</a></p>
</div>

Lists

<div class="reverse">
  <ul class="list-grid-3 list-icons list-icons-angle">
    <li>Missouri</li>
    <li>Montana</li>
    <li>Nebraska</li>
    <li>Nevada</li>
    <li>New Hampshire</li>
    <li>New Jersey</li>
    <li>New Mexico</li>
    <li>New York</li>
  </ul>
</div>

Quotes

<div class="reverse">
  <blockquote class="pullquote float-right pullquote-roof-full">
    <p>“Et voluptatem sed sit alias sunt. Qui qui dolores ipsa aliquid est dolor. Labore totam sit repellendus illo quod.”</p>
    <cite>– Aaron Pinero, designer</cite>
  </blockquote>
  <p>Etiam fermentum efficitur nisl, eu tempor eros lobortis et. Sed dapibus nisi eget euismod tincidunt. Aenean mattis imperdiet ex, gravida rutrum quam. Praesent condimentum, augue nec elementum ultricies, arcu magna convallis dui, id accumsan ex diam in tellus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur non metus et enim iaculis imperdiet.</p>
</div>

Collapsable Headings

<div class="reverse">
  <h2 class="collapsable">Lorem ipsum dolor sit amet</h2>
  <p>Consectetur adipiscing elit. Maecenas euismod varius purus et accumsan. Suspendisse mollis augue sem, eu varius ex ornare at. Cras convallis lorem in malesuada porttitor. Integer malesuada, nisi vel gravida luctus, tellus mi finibus est, ac dignissim elit tortor quis erat.</p>
  <h2 class="collapsable">Praesent accumsan</h2>
  <p>Ligula volutpat luctus volutpat, arcu enim sagittis mi, scelerisque placerat felis ipsum ut tellus. Phasellus eget augue sit amet mauris lacinia fermentum et id ligula. Duis in odio velit. Proin tempor dolor non ultrices aliquam.</p>
</div>

Tables

<div class="reverse">
  <table class="clean striped horizontal-rules">
    <thead>
      <tr>
        <th scope="col">Quisque</th>
        <th scope="col">Finibus</th>
        <th scope="col">Velit</th>
        <th scope="col">Commodo</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>8971</td>
        <td>513</td>
        <td>9435</td>
        <td>235</td>
      </tr>
      <tr>
        <td>205</td>
        <td>29580</td>
        <td>95</td>
        <td>349</td>
      </tr>
      <tr>
        <td>3069</td>
        <td>395</td>
        <td>9358</td>
        <td>284</td>
      </tr>
    </tbody>
  </table>
</div>

Forms

<div class="reverse">
  <form>
    <div>
      <label>Text Input</label>
      <input type="text" name="name">
    </div>
    <div>
      <label>Number Input</label>
      <input type="number" name="age">
    </div>
    <p><input type="submit" name="submit" value="Submit Button"></p>
  </form>
</div>