archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Tweak background color text contrasts, still grim but whatever

Browse Source
This commit is contained in:
Adam Wathan 2017-08-21 10:31:29 -04:00
parent 620192955b
commit f53b950ecd
1 changed files with 144 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

265
docs/source/backgrounds.md
View File

@ -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>