mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
WIP
This commit is contained in:
Adam Wathan
parent
d146b996aa
commit
e6814fdb91
@ -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 -mx-4">
|
||||
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full md:w-1/2 lg:w-1/3 mb-8">
|
||||
<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>
|
||||
@ -58,6 +58,102 @@ To get you started, we've provided a generous palette of great looking colors th
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/2 lg:w-1/3 mb-8">
|
||||
<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>
|
||||
<div class="flex justify-between">
|
||||
<span class="-opacity-0">Base</span>
|
||||
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey']) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-black bg-new-white px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span class="-opacity-0">White</span>
|
||||
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-white']) }}</span>
|
||||
</div>
|
||||
<div class="text-grey-darkest bg-new-grey-lightest px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span class="-opacity-0">Lightest</span>
|
||||
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-lightest']) }}</span>
|
||||
</div>
|
||||
<div class="text-grey-darkest bg-new-grey-lighter px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span class="-opacity-0">Lighter</span>
|
||||
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-lighter']) }}</span>
|
||||
</div>
|
||||
<div class="text-grey-darkest bg-new-grey-light px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span class="-opacity-0">Light</span>
|
||||
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-light']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-new-grey px-6 py-3 text-sm font-semibold flex justify-between flex justify-between">
|
||||
<span class="-opacity-0">Base</span>
|
||||
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-new-grey-dark px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span class="-opacity-0">Dark</span>
|
||||
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-dark']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-new-grey-darker px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span class="-opacity-0">Darker</span>
|
||||
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-darker']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-new-grey-darkest px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span class="-opacity-0">Darkest</span>
|
||||
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-darkest']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-new-black px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span class="-opacity-0">Black</span>
|
||||
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-black']) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/2 lg:w-1/3 mb-8">
|
||||
<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>
|
||||
<div class="flex justify-between">
|
||||
<span class="opacity-0">Base</span>
|
||||
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['grey']) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-black bg-white px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span class="opacity-0">White</span>
|
||||
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['white']) }}</span>
|
||||
</div>
|
||||
<div class="text-grey-darkest bg-grey-lightest px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span class="opacity-0">Lightest</span>
|
||||
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['grey-lightest']) }}</span>
|
||||
</div>
|
||||
<div class="text-grey-darkest bg-grey-lighter px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span class="opacity-0">Lighter</span>
|
||||
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['grey-lighter']) }}</span>
|
||||
</div>
|
||||
<div class="text-grey-darkest bg-grey-light px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span class="opacity-0">Light</span>
|
||||
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['grey-light']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-grey px-6 py-3 text-sm font-semibold flex justify-between flex justify-between">
|
||||
<span class="opacity-0">Base</span>
|
||||
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['grey']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-grey-dark px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span class="opacity-0">Dark</span>
|
||||
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['grey-dark']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-grey-darker px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span class="opacity-0">Darker</span>
|
||||
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['grey-darker']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-grey-darkest px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span class="opacity-0">Darkest</span>
|
||||
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['grey-darkest']) }}</span>
|
||||
</div>
|
||||
<div class="text-white bg-black px-6 py-3 text-sm font-semibold flex justify-between">
|
||||
<span class="opacity-0">Black</span>
|
||||
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['black']) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap -mx-4">
|
||||
|
||||
@ -1,6 +1,37 @@
|
||||
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(200, 0%, 100%)',
|
||||
'new-grey-lightest': 'hsl(200, 35%, 98%)',
|
||||
'new-grey-lighter': 'hsl(200, 30%, 96%)',
|
||||
'new-grey-light': 'hsl(200, 20%, 88%)',
|
||||
'new-grey': 'hsl(200, 16%, 73%)',
|
||||
'new-grey-dark': 'hsl(200, 11%, 55%)',
|
||||
'new-grey-darker': 'hsl(200, 12%, 41%)',
|
||||
'new-grey-darkest': 'hsl(200, 15%, 26%)',
|
||||
'new-black': 'hsl(200, 16%, 16%)',
|
||||
|
||||
|
||||
'slate-darker': '#212b35',
|
||||
'slate-dark': '#404e5c',
|
||||
'slate': '#647382',
|
||||
|
||||
@ -7,7 +7,7 @@ const tailwind = require('./../lib/index.js')
|
||||
const config = require('./../defaultConfig.js')
|
||||
const fs = require('fs')
|
||||
|
||||
fs.writeFileSync('./tailwind.json', JSON.stringify(config()))
|
||||
fs.writeFileSync('./tailwind.json', JSON.stringify(require('./tailwind.js')))
|
||||
|
||||
const env = argv.e || argv.env || 'local'
|
||||
const plugins = [
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user