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

Add colors and hover utilities

Browse Source
This commit is contained in:
Adam Wathan 2017-08-18 10:07:24 -04:00
parent b4331834ae
commit 1a2383e612
7 changed files with 381 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

195
docs/source/examples.md
View File

@ -9,22 +9,197 @@ Some component examples, just to get a vibe for what's possible and for us to do
## Alerts
<div class="bg-amber-lightest border border-amber-light rounded p-4 mb-4">
<div class="text-medium text-amber">
Warning message
<div class="bg-red-lightest border border-red-light rounded p-4 mb-4">
<div class="text-medium text-red-dark">
Alert message
</div>
<div class="text-amber">
Some additional text to explain what went wrong.
<div class="text-red-dark">
Some additional text to explain what happened.
</div>
</div>
<div class="bg-green-lightest border border-green-light rounded p-4">
<div class="text-medium text-green">
Success message
<div class="bg-orange-lightest border border-orange-light rounded p-4 mb-4">
<div class="text-medium text-orange-dark">
Alert message
</div>
<div class="text-green">
Some additional text to explain what went awesome.
<div class="text-orange-dark">
Some additional text to explain what happened.
</div>
</div>
<div class="bg-amber-lightest border border-amber-light rounded p-4 mb-4">
<div class="text-medium text-amber-dark">
Alert message
</div>
<div class="text-amber-dark">
Some additional text to explain what happened.
</div>
</div>
<div class="bg-yellow-lightest border border-yellow-light rounded p-4 mb-4">
<div class="text-medium text-yellow-dark">
Alert message
</div>
<div class="text-yellow-dark">
Some additional text to explain what happened.
</div>
</div>
<div class="bg-green-lightest border border-green-light rounded p-4 mb-4">
<div class="text-medium text-green-dark">
Alert message
</div>
<div class="text-green-dark">
Some additional text to explain what happened.
</div>
</div>
<div class="bg-teal-lightest border border-teal-light rounded p-4 mb-4">
<div class="text-medium text-teal-dark">
Alert message
</div>
<div class="text-teal-dark">
Some additional text to explain what happened.
</div>
</div>
<div class="bg-blue-lightest border border-blue-light rounded p-4 mb-4">
<div class="text-medium text-blue-dark">
Alert message
</div>
<div class="text-blue-dark">
Some additional text to explain what happened.
</div>
</div>
<div class="bg-indigo-lightest border border-indigo-light rounded p-4 mb-4">
<div class="text-medium text-indigo-dark">
Alert message
</div>
<div class="text-indigo-dark">
Some additional text to explain what happened.
</div>
</div>
<div class="bg-purple-lightest border border-purple-light rounded p-4 mb-4">
<div class="text-medium text-purple-dark">
Alert message
</div>
<div class="text-purple-dark">
Some additional text to explain what happened.
</div>
</div>
<div class="bg-pink-lightest border border-pink-light rounded p-4 mb-4">
<div class="text-medium text-pink-dark">
Alert message
</div>
<div class="text-pink-dark">
Some additional text to explain what happened.
</div>
</div>
## Buttons
<div class="mb-4">
<button class="text-medium text-dark rounded py-2 px-4 bg-light mr-4">
Save
</button>
<button class="text-medium text-dark rounded py-2 px-4 bg-light-soft mr-4">
Save
</button>
<button class="text-medium text-dark rounded py-2 px-4 bg-light-softer mr-4">
Save
</button>
</div>
<div class="mb-4">
<button class="text-medium text-light rounded py-2 px-4 bg-dark hover-bg-dark-dark mr-4">
Save
</button>
<button class="text-medium text-light rounded py-2 px-4 bg-dark-soft mr-4">
Save
</button>
<button class="text-medium text-light rounded py-2 px-4 bg-dark-softer mr-4">
Save
</button>
</div>
<div class="mb-4">
<button class="text-medium text-light rounded py-2 px-4 bg-red hover-bg-red-dark mr-4">
Save
</button>
<button class="text-medium text-light rounded py-2 px-4 bg-red-light mr-4">
Disabled
</button>
</div>
<div class="mb-4">
<button class="text-medium text-light rounded py-2 px-4 bg-orange hover-bg-orange-dark mr-4">
Save
</button>
<button class="text-medium text-light rounded py-2 px-4 bg-orange-light mr-4">
Disabled
</button>
</div>
<div class="mb-4">
<button class="text-medium text-light rounded py-2 px-4 bg-amber hover-bg-amber-dark mr-4">
Save
</button>
<button class="text-medium text-light rounded py-2 px-4 bg-amber-light mr-4">
Disabled
</button>
</div>
<div class="mb-4">
<button class="text-medium text-light rounded py-2 px-4 bg-yellow hover-bg-yellow-dark mr-4">
Save
</button>
<button class="text-medium text-light rounded py-2 px-4 bg-yellow-light mr-4">
Disabled
</button>
</div>
<div class="mb-4">
<button class="text-medium text-light rounded py-2 px-4 bg-green hover-bg-green-dark mr-4">
Save
</button>
<button class="text-medium text-light rounded py-2 px-4 bg-green-light mr-4">
Disabled
</button>
</div>
<div class="mb-4">
<button class="text-medium text-light rounded py-2 px-4 bg-teal hover-bg-teal-dark mr-4">
Save
</button>
<button class="text-medium text-light rounded py-2 px-4 bg-teal-light mr-4">
Disabled
</button>
</div>
<div class="mb-4">
<button class="text-medium text-light rounded py-2 px-4 bg-blue hover-bg-blue-dark mr-4">
Save
</button>
<button class="text-medium text-light rounded py-2 px-4 bg-blue-light mr-4">
Disabled
</button>
</div>
<div class="mb-4">
<button class="text-medium text-light rounded py-2 px-4 bg-indigo hover-bg-indigo-dark mr-4">
Save
</button>
<button class="text-medium text-light rounded py-2 px-4 bg-indigo-light mr-4">
Disabled
</button>
</div>
<div class="mb-4">
<button class="text-medium text-light rounded py-2 px-4 bg-purple hover-bg-purple-dark mr-4">
Save
</button>
<button class="text-medium text-light rounded py-2 px-4 bg-purple-light mr-4">
Disabled
</button>
</div>
<div class="mb-4">
<button class="text-medium text-light rounded py-2 px-4 bg-pink hover-bg-pink-dark mr-4">
Save
</button>
<button class="text-medium text-light rounded py-2 px-4 bg-pink-light mr-4">
Disabled
</button>
</div>

59
src/colors.less
View File

@ -1,35 +1,62 @@
@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-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-red-dark: #d43633;
@color-red: #f25451;
@color-red-light: #fa8785;
@color-red-lightest: #fff1f0;
@color-orange-dark: #f28900;
@color-orange: #ffb447;
@color-orange-light: #ffce85;
@color-orange-lightest: #fff7ec;
@color-amber-dark: #faa700;
@color-amber: #ffbf00;
@color-amber-light: #ffe493;
@color-amber-lightest: #fff7df;
@color-amber-lightest: #fff8e3;
@color-yellow-dark: #ffd900;
@color-yellow: #ffed4a;
@color-yellow-light: #fff6a5;
@color-yellow-lightest: #fffbd7;
@color-green-dark: #34ae4c;
@color-green: #57d06f;
@color-green-light: #b1f3be;
@color-green-lightest: #dfffe6;
@color-green-lightest: #eefff1;
@color-teal-dark: #249e92;
@color-teal: #4dc0b5;
@color-teal-light: #92e0d8;
@color-teal-light: #9eebe4;
@color-teal-lightest: #eefffd;
@color-blue-dark: #3687c8;
@color-blue: #4aa2ea;
@color-blue-light: #acdaff;
@color-blue-lightest: #f1f9ff;
@color-indigo-dark: #4957a5;
@color-indigo: #6574cd;
@color-indigo-light: #a3aeed;
@color-indigo-light: #bcc5fb;
@color-indigo-lightest: #f4f5ff;
@color-purple-dark: #714cb4;
@color-purple: #976ae6;
@color-purple-light: #ceb3ff;
@color-purple-lightest: #f7f3ff;
@color-pink-dark: #d84f7d;
@color-pink: #f66d9b;
@color-pink-light: #ffa5c3;
@color-pink-lightest: #fdf2f5;

1
src/generators.less
View File

@ -4,6 +4,7 @@
@import "generators/_utility-variants";
@import "generators/backgrounds";
@import "generators/backgrounds-hover";
@import "generators/border-colors";
@import "generators/border-radius";
@import "generators/border-widths";

18
src/generators/backgrounds-hover.less Normal file
View File

@ -0,0 +1,18 @@
.define-bg-hover-colors(@variants) {
.generate-utility-variants('hover-bg'; @variants; {
&:hover { background-color: extract(@__variant-value, 2); }
});
}
.define-bg-hover-colors(@variants; none) {
.define-bg-hover-colors(@variants);
}
.define-bg-hover-colors(@variants; @screens) when not (@screens = none) {
.define-bg-hover-colors(@variants);
.generate-responsive-utility-variants('hover-bg'; @variants; @screens; {
&:hover { background-color: extract(@__variant-value, 2); }
});
}

44
src/utilities/backgrounds.less
View File

@ -1,34 +1,62 @@
@bg-colors:
'light' @color-white,
'light-soft' @color-grey-100,
'light-softer' @color-grey-200,
'light' @color-white,
'light-soft' @color-grey-100,
'light-softer' @color-grey-200,
'dark' @color-grey-800,
'dark-soft' @color-grey-700,
'dark-softer' @color-grey-600,
'dark' @color-grey-800,
'dark-soft' @color-grey-700,
'dark-softer' @color-grey-600,
'red-dark' @color-red-dark,
'red' @color-red,
'red-light' @color-red-light,
'red-lightest' @color-red-lightest,
'orange-dark' @color-orange-dark,
'orange' @color-orange,
'orange-light' @color-orange-light,
'orange-lightest' @color-orange-lightest,
'amber-dark' @color-amber-dark,
'amber' @color-amber,
'amber-light' @color-amber-light,
'amber-lightest' @color-amber-lightest,
'amber-lightest' @color-amber-lightest,
'yellow-dark' @color-yellow-dark,
'yellow' @color-yellow,
'yellow-light' @color-yellow-light,
'yellow-lightest' @color-yellow-lightest,
'green-dark' @color-green-dark,
'green' @color-green,
'green-light' @color-green-light,
'green-lightest' @color-green-lightest,
'green-lightest' @color-green-lightest,
'teal-dark' @color-teal-dark,
'teal' @color-teal,
'teal-light' @color-teal-light,
'teal-lightest' @color-teal-lightest,
'blue-dark' @color-blue-dark,
'blue' @color-blue,
'blue-light' @color-blue-light,
'blue-lightest' @color-blue-lightest,
'indigo-dark' @color-indigo-dark,
'indigo' @color-indigo,
'indigo-light' @color-indigo-light,
'indigo-lightest' @color-indigo-lightest,
'purple-dark' @color-purple-dark,
'purple' @color-purple,
'purple-light' @color-purple-light,
'purple-lightest' @color-purple-lightest,
'pink-dark' @color-pink-dark,
'pink' @color-pink,
'pink-light' @color-pink-light,
'pink-lightest' @color-pink-lightest,
;
.define-bg-colors(@bg-colors; @screens);
.define-bg-hover-colors(@bg-colors; @screens);

69
src/utilities/borders.less
View File

@ -43,26 +43,55 @@
'light-overlay-soft' @border-light-overlay-soft,
'light-overlay-softer' @border-light-overlay-softer,
'red' @color-red,
'red-light' @color-red-light,
'orange' @color-orange,
'orange-light' @color-orange-light,
'amber' @color-amber,
'amber-light' @color-amber-light,
'yellow' @color-yellow,
'yellow-light' @color-yellow-light,
'green' @color-green,
'green-light' @color-green-light,
'teal' @color-teal,
'teal-light' @color-teal-light,
'blue' @color-blue,
'blue-light' @color-blue-light,
'indigo' @color-indigo,
'indigo-light' @color-indigo-light,
'purple' @color-purple,
'purple-light' @color-purple-light,
'pink' @color-pink,
'pink-light' @color-pink-light,
'red-dark' @color-red-dark,
'red' @color-red,
'red-light' @color-red-light,
'red-lightest' @color-red-lightest,
'orange-dark' @color-orange-dark,
'orange' @color-orange,
'orange-light' @color-orange-light,
'orange-lightest' @color-orange-lightest,
'amber-dark' @color-amber-dark,
'amber' @color-amber,
'amber-light' @color-amber-light,
'amber-lightest' @color-amber-lightest,
'yellow-dark' @color-yellow-dark,
'yellow' @color-yellow,
'yellow-light' @color-yellow-light,
'yellow-lightest' @color-yellow-lightest,
'green-dark' @color-green-dark,
'green' @color-green,
'green-light' @color-green-light,
'green-lightest' @color-green-lightest,
'teal-dark' @color-teal-dark,
'teal' @color-teal,
'teal-light' @color-teal-light,
'teal-lightest' @color-teal-lightest,
'blue-dark' @color-blue-dark,
'blue' @color-blue,
'blue-light' @color-blue-light,
'blue-lightest' @color-blue-lightest,
'indigo-dark' @color-indigo-dark,
'indigo' @color-indigo,
'indigo-light' @color-indigo-light,
'indigo-lightest' @color-indigo-lightest,
'purple-dark' @color-purple-dark,
'purple' @color-purple,
'purple-light' @color-purple-light,
'purple-lightest' @color-purple-lightest,
'pink-dark' @color-pink-dark,
'pink' @color-pink,
'pink-light' @color-pink-light,
'pink-lightest' @color-pink-lightest,
;
// Radius

69
src/utilities/text.less
View File

@ -67,26 +67,55 @@
'dark-softer' @text-dark-softer,
'dark-softest' @text-dark-softest,
'red' @color-red,
'red-light' @color-red-light,
'orange' @color-orange,
'orange-light' @color-orange-light,
'amber' @color-amber,
'amber-light' @color-amber-light,
'yellow' @color-yellow,
'yellow-light' @color-yellow-light,
'green' @color-green,
'green-light' @color-green-light,
'teal' @color-teal,
'teal-light' @color-teal-light,
'blue' @color-blue,
'blue-light' @color-blue-light,
'indigo' @color-indigo,
'indigo-light' @color-indigo-light,
'purple' @color-purple,
'purple-light' @color-purple-light,
'pink' @color-pink,
'pink-light' @color-pink-light,
'red-dark' @color-red-dark,
'red' @color-red,
'red-light' @color-red-light,
'red-lightest' @color-red-lightest,
'orange-dark' @color-orange-dark,
'orange' @color-orange,
'orange-light' @color-orange-light,
'orange-lightest' @color-orange-lightest,
'amber-dark' @color-amber-dark,
'amber' @color-amber,
'amber-light' @color-amber-light,
'amber-lightest' @color-amber-lightest,
'yellow-dark' @color-yellow-dark,
'yellow' @color-yellow,
'yellow-light' @color-yellow-light,
'yellow-lightest' @color-yellow-lightest,
'green-dark' @color-green-dark,
'green' @color-green,
'green-light' @color-green-light,
'green-lightest' @color-green-lightest,
'teal-dark' @color-teal-dark,
'teal' @color-teal,
'teal-light' @color-teal-light,
'teal-lightest' @color-teal-lightest,
'blue-dark' @color-blue-dark,
'blue' @color-blue,
'blue-light' @color-blue-light,
'blue-lightest' @color-blue-lightest,
'indigo-dark' @color-indigo-dark,
'indigo' @color-indigo,
'indigo-light' @color-indigo-light,
'indigo-lightest' @color-indigo-lightest,
'purple-dark' @color-purple-dark,
'purple' @color-purple,
'purple-light' @color-purple-light,
'purple-lightest' @color-purple-lightest,
'pink-dark' @color-pink-dark,
'pink' @color-pink,
'pink-light' @color-pink-light,
'pink-lightest' @color-pink-lightest,
;
// Line heights