<commit_before>---
extends: _layouts.markdown
title: "Backgrounds"
---

# Backgrounds

<div class="subnav">
    <a class="subnav-link" href="#colors">Colors</a>
    <a class="subnav-link" href="#responsive">Responsive</a>
    <a class="subnav-link" href="#customizing">Customizing</a>
</div>

<h2 id="colors">Colors</h2>

<div class="row pull-x-4 mb-4">
  <div class="col-12 md:col-4 px-4">
    <div class="bg-light px-6 py-4 text-sm">
      .bg-light
    </div>
    <div class="bg-light-soft px-6 py-4 text-sm">
      .bg-light-soft
    </div>
    <div class="bg-light-softer px-6 py-4 text-sm">
      .bg-light-softer
    </div>
    <div class="bg-light-softest px-6 py-4 text-sm">
      .bg-light-softest
    </div>
  </div>
  <div class="col-12 md:col-4 px-4">
    <div class="text-light bg-dark px-6 py-4 text-sm">
      .bg-dark
    </div>
    <div class="text-light bg-dark-soft px-6 py-4 text-sm">
      .bg-dark-soft
    </div>
    <div class="text-light bg-dark-softer px-6 py-4 text-sm">
      .bg-dark-softer
    </div>
    <div class="text-light bg-dark-softest px-6 py-4 text-sm">
      .bg-dark-softest
    </div>
  </div>
</div>

<div class="row pull-x-4 mb-4">
  <div class="col-12 md:col-4 px-4">
    <div class="text-light bg-red-dark px-6 py-4 text-sm">
      .bg-red-dark
    </div>
    <div class="text-light bg-red px-6 py-4 text-sm">
      .bg-red
    </div>
    <div class="text-light bg-red-light px-6 py-4 text-sm">
      .bg-red-light
    </div>
    <div class="text-red-dark bg-red-lightest px-6 py-4 text-sm">
      .bg-red-lightest
    </div>
  </div>
  <div class="col-12 md:col-4 px-4">
    <div class="text-light bg-orange-dark px-6 py-4 text-sm">
      .bg-orange-dark
    </div>
    <div class="text-light bg-orange px-6 py-4 text-sm">
      .bg-orange
    </div>
    <div class="text-light bg-orange-light px-6 py-4 text-sm">
      .bg-orange-light
    </div>
    <div class="text-orange-dark bg-orange-lightest px-6 py-4 text-sm">
      .bg-orange-lightest
    </div>
  </div>
  <div class="col-12 md:col-4 px-4">
    <div class="text-light bg-yellow-dark px-6 py-4 text-sm">
      .bg-yellow-dark
    </div>
    <div class="text-light bg-yellow px-6 py-4 text-sm">
      .bg-yellow
    </div>
    <div class="text-light bg-yellow-light px-6 py-4 text-sm">
      .bg-yellow-light
    </div>
    <div class="text-yellow-dark bg-yellow-lightest px-6 py-4 text-sm">
      .bg-yellow-lightest
    </div>
  </div>
</div>

<div class="row pull-x-4 mb-4">
  <div class="col-12 md:col-4 px-4">
    <div class="text-light bg-green-dark px-6 py-4 text-sm">
      .bg-green-dark
    </div>
    <div class="text-light bg-green px-6 py-4 text-sm">
      .bg-green
    </div>
    <div class="text-light bg-green-light px-6 py-4 text-sm">
      .bg-green-light
    </div>
    <div class="text-green-dark bg-green-lightest px-6 py-4 text-sm">
      .bg-green-lightest
    </div>
  </div>
  <div class="col-12 md:col-4 px-4">
    <div class="text-light bg-teal-dark px-6 py-4 text-sm">
      .bg-teal-dark
    </div>
    <div class="text-light bg-teal px-6 py-4 text-sm">
      .bg-teal
    </div>
    <div class="text-light bg-teal-light px-6 py-4 text-sm">
      .bg-teal-light
    </div>
    <div class="text-teal-dark bg-teal-lightest px-6 py-4 text-sm">
      .bg-teal-lightest
    </div>
  </div>
  <div class="col-12 md:col-4 px-4">
    <div class="text-light bg-blue-dark px-6 py-4 text-sm">
      .bg-blue-dark
    </div>
    <div class="text-light bg-blue px-6 py-4 text-sm">
      .bg-blue
    </div>
    <div class="text-light bg-blue-light px-6 py-4 text-sm">
      .bg-blue-light
    </div>
    <div class="text-blue-dark bg-blue-lightest px-6 py-4 text-sm">
      .bg-blue-lightest
    </div>
  </div>
</div>

<div class="row pull-x-4 mb-4">
  <div class="col-12 md:col-4 px-4">
    <div class="text-light bg-indigo-dark px-6 py-4 text-sm">
      .bg-indigo-dark
    </div>
    <div class="text-light bg-indigo px-6 py-4 text-sm">
      .bg-indigo
    </div>
    <div class="text-light bg-indigo-light px-6 py-4 text-sm">
      .bg-indigo-light
    </div>
    <div class="text-indigo-dark bg-indigo-lightest px-6 py-4 text-sm">
      .bg-indigo-lightest
    </div>
  </div>
  <div class="col-12 md:col-4 px-4">
    <div class="text-light bg-purple-dark px-6 py-4 text-sm">
      .bg-purple-dark
    </div>
    <div class="text-light bg-purple px-6 py-4 text-sm">
      .bg-purple
    </div>
    <div class="text-light bg-purple-light px-6 py-4 text-sm">
      .bg-purple-light
    </div>
    <div class="text-purple-dark bg-purple-lightest px-6 py-4 text-sm">
      .bg-purple-lightest
    </div>
  </div>
  <div class="col-12 md:col-4 px-4">
    <div class="text-light bg-pink-dark px-6 py-4 text-sm">
      .bg-pink-dark
    </div>
    <div class="text-light bg-pink px-6 py-4 text-sm">
      .bg-pink
    </div>
    <div class="text-light bg-pink-light px-6 py-4 text-sm">
      .bg-pink-light
    </div>
    <div class="text-pink-dark bg-pink-lightest px-6 py-4 text-sm">
      .bg-pink-lightest
    </div>
  </div>
</div>

Using the utilities in HTML:

```html
<div class="bg-light"></div>
<div class="bg-light-soft"></div><commit_msg>Tweak background color text contrasts, still grim but whatever<commit_after>---
extends: _layouts.markdown
title: "Backgrounds"
---

# Backgrounds

<div class="subnav">
    <a class="subnav-link" href="#colors">Colors</a>
    <a class="subnav-link" href="#responsive">Responsive</a>
    <a class="subnav-link" href="#customizing">Customizing</a>
</div>

<h2 id="colors">Colors</h2>


<div class="row pull-x-4 mb-4">
  <div class="col-12 md:col-4 px-4">
    <div class="rounded overflow-hidden">
      <div class="bg-light px-6 py-4 text-sm">
        .bg-light
      </div>
      <div class="bg-light-soft px-6 py-4 text-sm">
        .bg-light-soft
      </div>
      <div class="bg-light-softer px-6 py-4 text-sm">
        .bg-light-softer
      </div>
      <div class="bg-light-softest px-6 py-4 text-sm">
        .bg-light-softest
      </div>
    </div>
  </div>
  <div class="col-12 md:col-4 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-light bg-dark px-6 py-4 text-sm">
        .bg-dark
      </div>
      <div class="text-light bg-dark-soft px-6 py-4 text-sm">
        .bg-dark-soft
      </div>
      <div class="text-light bg-dark-softer px-6 py-4 text-sm">
        .bg-dark-softer
      </div>
      <div class="text-light bg-dark-softest px-6 py-4 text-sm">
        .bg-dark-softest
      </div>
    </div>
  </div>
</div>

<div class="row pull-x-4 mb-4">
  <div class="col-12 md:col-4 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-light bg-red-dark px-6 py-4 text-sm">
        .bg-red-dark
      </div>
      <div class="text-light bg-red px-6 py-4 text-sm">
        .bg-red
      </div>
      <div class="text-light bg-red-light px-6 py-4 text-sm">
        .bg-red-light
      </div>
      <div class="text-red-dark bg-red-lightest px-6 py-4 text-sm">
        .bg-red-lightest
      </div>
    </div>
  </div>
  <div class="col-12 md:col-4 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-light bg-orange-dark px-6 py-4 text-sm">
        .bg-orange-dark
      </div>
      <div class="text-light bg-orange px-6 py-4 text-sm">
        .bg-orange
      </div>
      <div class="text-orange-dark bg-orange-light px-6 py-4 text-sm">
        .bg-orange-light
      </div>
      <div class="text-orange-dark bg-orange-lightest px-6 py-4 text-sm">
        .bg-orange-lightest
      </div>
    </div>
  </div>
  <div class="col-12 md:col-4 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-light bg-yellow-dark px-6 py-4 text-sm">
        .bg-yellow-dark
      </div>
      <div class="text-light bg-yellow px-6 py-4 text-sm">
        .bg-yellow
      </div>
      <div class="text-yellow-dark bg-yellow-light px-6 py-4 text-sm">
        .bg-yellow-light
      </div>
      <div class="text-yellow-dark bg-yellow-lightest px-6 py-4 text-sm">
        .bg-yellow-lightest
      </div>
    </div>
  </div>
</div>

<div class="row pull-x-4 mb-4">
  <div class="col-12 md:col-4 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-light bg-green-dark px-6 py-4 text-sm">
        .bg-green-dark
      </div>
      <div class="text-light bg-green px-6 py-4 text-sm">
        .bg-green
      </div>
      <div class="text-green-dark bg-green-light px-6 py-4 text-sm">
        .bg-green-light
      </div>
      <div class="text-green-dark bg-green-lightest px-6 py-4 text-sm">
        .bg-green-lightest
      </div>
    </div>
  </div>
  <div class="col-12 md:col-4 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-light bg-teal-dark px-6 py-4 text-sm">
        .bg-teal-dark
      </div>
      <div class="text-light bg-teal px-6 py-4 text-sm">
        .bg-teal
      </div>
      <div class="text-teal-dark bg-teal-light px-6 py-4 text-sm">
        .bg-teal-light
      </div>
      <div class="text-teal-dark bg-teal-lightest px-6 py-4 text-sm">
        .bg-teal-lightest
      </div>
    </div>
  </div>
  <div class="col-12 md:col-4 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-light bg-blue-dark px-6 py-4 text-sm">
        .bg-blue-dark
      </div>
      <div class="text-light bg-blue px-6 py-4 text-sm">
        .bg-blue
      </div>
      <div class="text-blue-dark bg-blue-light px-6 py-4 text-sm">
        .bg-blue-light
      </div>
      <div class="text-blue-dark bg-blue-lightest px-6 py-4 text-sm">
        .bg-blue-lightest
      </div>
    </div>
  </div>
</div>

<div class="row pull-x-4 mb-4">
  <div class="col-12 md:col-4 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-light bg-indigo-dark px-6 py-4 text-sm">
        .bg-indigo-dark
      </div>
      <div class="text-light bg-indigo px-6 py-4 text-sm">
        .bg-indigo
      </div>
      <div class="text-indigo-dark bg-indigo-light px-6 py-4 text-sm">
        .bg-indigo-light
      </div>
      <div class="text-indigo-dark bg-indigo-lightest px-6 py-4 text-sm">
        .bg-indigo-lightest
      </div>
    </div>
  </div>
  <div class="col-12 md:col-4 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-light bg-purple-dark px-6 py-4 text-sm">
        .bg-purple-dark
      </div>
      <div class="text-light bg-purple px-6 py-4 text-sm">
        .bg-purple
      </div>
      <div class="text-purple-dark bg-purple-light px-6 py-4 text-sm">
        .bg-purple-light
      </div>
      <div class="text-purple-dark bg-purple-lightest px-6 py-4 text-sm">
        .bg-purple-lightest
      </div>
    </div>
  </div>
  <div class="col-12 md:col-4 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-light bg-pink-dark px-6 py-4 text-sm">
        .bg-pink-dark
      </div>
      <div class="text-light bg-pink px-6 py-4 text-sm">
        .bg-pink
      </div>
      <div class="text-pink-dark bg-pink-light px-6 py-4 text-sm">
        .bg-pink-light
      </div>
      <div class="text-pink-dark bg-pink-lightest px-6 py-4 text-sm">
        .bg-pink-lightest
      </div>
    </div>
  </div>
</div>

Using the utilities in HTML:

```html
<div class="bg-light"></div>
<div class="bg-light-soft"></div>
{'fraction_non_alphanumeric': 0.18671390611160318, 'fraction_numerical': 0.025155004428697964, 'mean_word_length': 2.0417564655172415, 'pattern_counts': {'":': 0, '<': 289, '<?xml version=': 0, '>': 289, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7456052', 'n_tokens_mistral': 4569, 'n_tokens_neox': 4582, 'n_words': 957}