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

Use cool greys instead of neutral greys

Browse Source
This commit is contained in:
Adam Wathan 2017-08-20 10:28:46 -04:00
parent dec207bc1f
commit cfb371671a
5 changed files with 181 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

258
docs/source/backgrounds.md
View File

@ -5,105 +5,165 @@ title: "Backgrounds"
# Backgrounds
<table class="text-sm" style="border-collapse: separate; border-spacing: 0; width: 100%;">
<tr>
<td class="w-24 h-12 bg-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-light</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-light-soft 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-light-soft</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-light-softer 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-light-softer</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-dark 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-dark</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-dark-soft 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-dark-soft</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-dark-softer 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-dark-softer</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-red 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-red</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-red-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-red-light</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-orange 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</code></td>
</tr>
<tr>
<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>
</tr>
<tr>
<td class="w-24 h-12 bg-green 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-green</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-green-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-green-light</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-teal 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-teal</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-teal-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-teal-light</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-blue 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-blue</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-blue-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-blue-light</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-indigo 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-indigo</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-indigo-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-indigo-light</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-purple 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-purple</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-purple-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-purple-light</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-pink 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-pink</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-pink-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-pink-light</code></td>
</tr>
</table>
</table>
<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>
<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>
</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:

24
src/colors.less
View File

@ -1,15 +1,13 @@
@color-white: #ffffff;
@color-grey-50: #fafafa;
@color-grey-100: #f5f5f5;
@color-grey-200: #eeeeee;
@color-grey-300: #e0e0e0;
@color-grey-400: #bdbdbd;
@color-grey-500: #9e9e9e;
@color-grey-600: #757575;
@color-grey-700: #616161;
@color-grey-800: #424242;
@color-grey-900: #212121;
@color-black: #000000;
@color-grey-900: #212b35;
@color-grey-800: #404e5c;
@color-grey-700: #647382;
@color-grey-600: #919eab;
@color-grey-500: #c5ced6;
@color-grey-400: #dfe3e8;
@color-grey-300: #f0f2f5;
@color-grey-200: #f7f9fa;
@color-white: #ffffff;
@color-red-dark: #d43633;
@color-red: #f25451;
@ -19,12 +17,12 @@
@color-orange-dark: #f29500;
@color-orange: #ffb82b;
@color-orange-light: #ffd685;
@color-orange-lightest: #fff8eb;
@color-orange-lightest: #fff8eb;
@color-yellow-dark: #ffc400;
@color-yellow: #ffe14a;
@color-yellow-light: #ffea83;
@color-yellow-lightest: #fffbe5;
@color-yellow-lightest: #fffbe5;
@color-green-dark: #34ae4c;
@color-green: #57d06f;

10
src/utilities/backgrounds.less
View File

@ -1,11 +1,11 @@
@bg-colors:
'light' @color-white,
'light-soft' @color-grey-100,
'light-softer' @color-grey-200,
'light-soft' @color-grey-200,
'light-softer' @color-grey-300,
'dark' @color-grey-800,
'dark-soft' @color-grey-700,
'dark-softer' @color-grey-600,
'dark' @color-grey-900,
'dark-soft' @color-grey-800,
'dark-softer' @color-grey-700,
'red-dark' @color-red-dark,
'red' @color-red,

4
src/utilities/borders.less
View File

@ -13,8 +13,8 @@
@border-dark-softer: @color-grey-300;
@border-light: @color-white;
@border-light-soft: @color-grey-100;
@border-light-softer: @color-grey-200;
@border-light-soft: @color-grey-200;
@border-light-softer: @color-grey-300;
@border-dark-overlay: hsla(0, 0%, 0%, 20%);
@border-dark-overlay-soft: hsla(0, 0%, 0%, 10%);

8
src/utilities/text.less
View File

@ -53,10 +53,10 @@
@text-light-softer: fade(@color-white, 45%);
@text-light-softest: fade(@color-white, 35%);
@text-dark: @color-grey-800;
@text-dark-soft: @color-grey-600;
@text-dark-softer: @color-grey-500;
@text-dark-softest: @color-grey-400;
@text-dark: @color-grey-900;
@text-dark-soft: @color-grey-700;
@text-dark-softer: @color-grey-600;
@text-dark-softest: @color-grey-500;
@text-colors:
'light' @text-light,