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

WIP on tons of color crap

Browse Source
This commit is contained in:
Adam Wathan 2017-08-14 22:07:27 -04:00
parent 10dc104c2d
commit c6b7fdced7
2 changed files with 11 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
docs/source/_assets/less/main.less
View File

@ -30,37 +30,4 @@ a {
'8' 2rem,
'12' 3rem,
'16' 4rem,
<<<<<<< HEAD
=======
;
@text-colors:
'light' @text-light,
'light-soft' @text-light-soft,
'light-softer' @text-light-softer,
'light-softest' @text-light-softest,
'dark' @text-dark,
'dark-soft' @text-dark-soft,
'dark-softer' @text-dark-softer,
'dark-softest' @text-dark-softest,
'primary' #3498DB,
'primary-light' lighten(#3498DB, 25%),
'primary-dark' #2980B9,
;
@bg-colors:
'light' hsl(0, 0%, 100%),
'light-soft' hsl(0, 0%, 98%),
'light-softer' hsl(0, 0%, 96%),
'dark' hsl(0, 0%, 33%),
'dark-soft' hsl(0, 0%, 42%),
'dark-softer' hsl(0, 0%, 52%),
'primary' #3498db,
'primary-light' #a0cfee,
'primary-dark' #2980b9,
>>>>>>> Add shadows documentation.
;

15
docs/source/backgrounds.md
View File

@ -46,13 +46,19 @@ title: "Backgrounds"
<td class="w-24 h-12 bg-orange-light border-b border-dark-overlay-softer"></td>
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-orange-light</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-yellow border-b border-dark-overlay-softer"></td>
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-yellow</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-yellow-light border-b border-dark-overlay-softer"></td>
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-yellow-light</code></td>
<td class="w-24 h-12 bg-amber border-b border-dark-overlay-softer"></td>
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-amber</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-amber-light border-b border-dark-overlay-softer"></td>
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-amber-light</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-yellow border-b border-dark-overlay-softer"></td>
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-yellow</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-green border-b border-dark-overlay-softer"></td>
@ -103,6 +109,7 @@ title: "Backgrounds"
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-pink-light</code></td>
</tr>
</table>
</table>
Using the utilities in HTML: