From f53b950ecd9c704b6888e433d047394205d64929 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 21 Aug 2017 10:31:29 -0400
Subject: [PATCH] Tweak background color text contrasts, still grim but
 whatever

---
 docs/source/backgrounds.md | 265 ++++++++++++++++++++-----------------
 1 file changed, 144 insertions(+), 121 deletions(-)

diff --git a/docs/source/backgrounds.md b/docs/source/backgrounds.md
index 6fcd8518a..f258245e4 100644
--- a/docs/source/backgrounds.md
+++ b/docs/source/backgrounds.md
@@ -13,168 +13,191 @@ title: "Backgrounds"
 
 <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 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="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 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="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 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="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 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="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 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="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 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="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 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="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 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="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 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="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 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="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 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>