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

I think these greys are better? Who knows.

Browse source
This commit is contained in:
Adam Wathan 2017-12-04 13:01:01 -05:00
parent cbfcd92ae8
commit 1d5852dd1b
2 changed files with 27 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

8
docs/source/docs/colors.blade.md
View file

@ -10,8 +10,8 @@ Developing an organized, consistent and beautiful color palette is critical to t
To get you started, we've provided a generous palette of great looking colors that are perfect for prototyping, or even as a starting point for your color palette. That said, don't hesitate to [customize](#customizing) them for your project.
<div class="flex flex-wrap">
<div class="w-full md:w-1/2 lg:w-1/3 mb-8">
<div class="flex flex-wrap -mx-4">
<div class="w-full md:w-1/2 lg:w-1/3 mb-8 px-4">
<div class="rounded overflow-hidden">
<div class="text-white bg-grey px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Grey</div>
@ -59,7 +59,7 @@ To get you started, we've provided a generous palette of great looking colors th
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/3 mb-8">
<div class="w-full md:w-1/2 lg:w-1/3 mb-8 px-4">
<div class="rounded overflow-hidden">
<div class="text-white bg-new-grey px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Grey</div>
@ -107,7 +107,7 @@ To get you started, we've provided a generous palette of great looking colors th
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/3 mb-8">
<div class="w-full md:w-1/2 lg:w-1/3 mb-8 px-4">
<div class="rounded overflow-hidden">
<div class="text-white bg-grey px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Grey</div>

49
docs/tailwind.js
View file

@ -1,37 +1,16 @@
var config = require('../defaultConfig')()
config.colors = Object.assign(config.colors, {
'new-white': 'hsl(0, 0%, 100%)',
'new-grey-lightest': 'hsl(200, 25%, 98%)',
'new-grey-lighter': 'hsl(200, 33%, 96%)',
'new-grey-light': 'hsl(200, 25%, 88%)',
'new-grey': 'hsl(200, 14%, 66%)',
'new-grey-dark': 'hsl(200, 10%, 49%)',
'new-grey-darker': 'hsl(200, 13%, 40%)',
'new-grey-darkest': 'hsl(200, 15%, 25%)',
'new-black': 'hsl(200, 16%, 16%)',
'new-white': 'hsl(0, 0%, 100%)',
'new-grey-lightest': 'hsl(200, 12%, 98%)',
'new-grey-lighter': 'hsl(200, 12%, 96%)',
'new-grey-light': 'hsl(200, 12%, 88%)',
'new-grey': 'hsl(200, 12%, 66%)',
'new-grey-dark': 'hsl(200, 12%, 49%)',
'new-grey-darker': 'hsl(200, 13%, 40%)',
'new-grey-darkest': 'hsl(200, 15%, 25%)',
'new-black': 'hsl(200, 16%, 16%)',
'new-white': 'hsl(208, 0%, 100%)',
'new-grey-lightest': 'hsl(208, 35%, 98%)',
'new-grey-lighter': 'hsl(208, 30%, 96%)',
'new-grey-lighter': 'hsl(208, 33%, 96%)',
'new-grey-light': 'hsl(208, 20%, 88%)',
'new-grey': 'hsl(208, 16%, 73%)',
'new-grey-dark': 'hsl(208, 11%, 55%)',
'new-grey-darker': 'hsl(208, 12%, 41%)',
'new-grey-darkest': 'hsl(208, 15%, 26%)',
'new-grey': 'hsl(208, 16%, 76%)',
'new-grey-dark': 'hsl(208, 12%, 58%)',
'new-grey-darker': 'hsl(208, 12%, 43%)',
'new-grey-darkest': 'hsl(208, 15%, 28%)',
'new-black': 'hsl(208, 16%, 16%)',
'slate-darker': '#212b35',
'slate-dark': '#404e5c',
'slate': '#647382',
@ -49,6 +28,24 @@ config.colors = Object.assign(config.colors, {
'tailwind-teal-dark': '#2f8696',
})
config.colors = Object.assign(config.colors, {
// 'slate-darker': config.colors['new-black'],
// 'slate-dark': config.colors['new-grey-darkest'],
// 'slate': config.colors['new-grey-darker'],
// 'slate-light': config.colors['new-grey-dark'],
// 'slate-lighter': config.colors['new-grey'],
// 'smoke-darker': config.colors['new-grey-dark'],
// 'smoke-dark': config.colors['new-grey'],
// 'smoke': config.colors['new-grey-light'],
// 'smoke-light': config.colors['new-grey-lighter'],
// 'smoke-lighter': config.colors['new-grey-lightest'],
'tailwind-teal-light': '#5ebcca',
'tailwind-teal': '#44a8b3',
'tailwind-teal-dark': '#2f8696',
})
config.fonts = {
'sans': 'aktiv-grotesk, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue',
'serif': 'Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif',