V6 Clearleft Patterns

Colour 

<div class="colour-swatch">
    <div>
        <span style="background: var(--blue"></span><code>blue</code>
    </div>
    <div>
        <span style="background: var(--green"></span><code>green</code>
    </div>
    <div>
        <span style="background: var(--green-step--1"></span><code>green-step--1</code>
    </div>
    <div>
        <span style="background: var(--green-step--2"></span><code>green-step--2</code>
    </div>
    <div>
        <span style="background: var(--purple"></span><code>purple</code>
    </div>
    <div>
        <span style="background: var(--yellow"></span><code>yellow</code>
    </div>
    <div>
        <span style="background: var(--red"></span><code>red</code>
    </div>
    <div>
        <span style="background: var(--dark"></span><code>dark</code>
    </div>
    <div>
        <span style="background: var(--grey"></span><code>grey</code>
    </div>
    <div>
        <span style="background: var(--grey-step-1"></span><code>grey-step-1</code>
    </div>
    <div>
        <span style="background: var(--grey-step-2"></span><code>grey-step-2</code>
    </div>
    <div>
        <span style="background: var(--light-grey"></span><code>light-grey</code>
    </div>
    <div>
        <span style="background: var(--light-grey-step-1"></span><code>light-grey-step-1</code>
    </div>
    <div>
        <span style="background: var(--white"></span><code>white</code>
    </div>
</div>

<style>
    .colour-swatch {
        display: grid;
        grid-gap: var(--space-s);
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .colour-swatch span {
        aspect-ratio: 1/1;
        display: block;
    }

    .colour-swatch code {
        font-size: var(--step--1);
    }
</style>
 
{% set colours = [
  'blue',
  'green',
  'green-step--1',
  'green-step--2',
  'purple',
  'yellow',
  'red',
  'dark',
  'grey',
  'grey-step-1',
  'grey-step-2',
  'light-grey',
  'light-grey-step-1',
  'white'
] %}

<div class="colour-swatch">
  {% for colour in colours %}
    <div>
      <span style="background: var(--{{ colour }}"></span><code>{{ colour }}</code>
    </div>
  {% endfor %}
</div>

<style>
  .colour-swatch { display: grid; grid-gap: var(--space-s);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  .colour-swatch span { aspect-ratio: 1/1; display: block; }

  .colour-swatch code { font-size: var(--step--1); }
</style>
 
/* No context defined. */

No notes defined.