wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Collapse orange/amber/yellow to just two colors, orange and yellow

Browse source
This commit is contained in:
Adam Wathan 2017-08-18 10:55:40 -04:00
parent 1a2383e612
commit 9921af09ce
5 changed files with 41 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

16
docs/source/examples.md
View file

@ -27,14 +27,6 @@ Some component examples, just to get a vibe for what's possible and for us to do
</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">
@ -139,14 +131,6 @@ Some component examples, just to get a vibe for what's possible and for us to do
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

87
src/colors.less
View file

@ -1,62 +1,57 @@
@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-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-orange-dark: #f29900;
@color-orange: #ffc247;
@color-orange-light: #ffd685;
@color-orange-lighter: #fff8eb;
@color-amber-dark: #faa700;
@color-amber: #ffbf00;
@color-amber-light: #ffe493;
@color-amber-lightest: #fff8e3;
@color-yellow-dark: #ffc400;
@color-yellow: #ffe14a;
@color-yellow-light: #fff0a6;
@color-yellow-lighter: #fff8d6;
@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-dark: #34ae4c;
@color-green: #57d06f;
@color-green-light: #b1f3be;
@color-green-lightest: #eefff1;
@color-teal-dark: #249e92;
@color-teal: #4dc0b5;
@color-teal-light: #9eebe4;
@color-teal-dark: #249e92;
@color-teal: #4dc0b5;
@color-teal-light: #9eebe4;
@color-teal-lightest: #eefffd;
@color-blue-dark: #3687c8;
@color-blue: #4aa2ea;
@color-blue-light: #acdaff;
@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: #bcc5fb;
@color-indigo-dark: #4957a5;
@color-indigo: #6574cd;
@color-indigo-light: #bcc5fb;
@color-indigo-lightest: #f4f5ff;
@color-purple-dark: #714cb4;
@color-purple: #976ae6;
@color-purple-light: #ceb3ff;
@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-dark: #d84f7d;
@color-pink: #f66d9b;
@color-pink-light: #ffa5c3;
@color-pink-lightest: #fdf2f5;

5
src/utilities/backgrounds.less
View file

@ -17,11 +17,6 @@
'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,

5
src/utilities/borders.less
View file

@ -53,11 +53,6 @@
'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,

5
src/utilities/text.less
View file

@ -77,11 +77,6 @@
'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,