Replace old greys with new greys
This commit is contained in:
Adam Wathan
parent
dc3419cc11
commit
c5fdd1e284
3 changed files with 31 additions and 92 deletions
|
|
@ -46,15 +46,15 @@ View the full documentation at https://tailwindcss.com.
|
|||
let colors = {
|
||||
'transparent': 'transparent',
|
||||
|
||||
'black': '#222b2f',
|
||||
'grey-darkest': '#364349',
|
||||
'grey-darker': '#596a73',
|
||||
'grey-dark': '#70818a',
|
||||
'grey': '#9babb4',
|
||||
'grey-light': '#dae4e9',
|
||||
'grey-lighter': '#f3f7f9',
|
||||
'grey-lightest': '#fafcfc',
|
||||
'white': '#ffffff',
|
||||
'black': 'hsl(208, 16%, 16%)',
|
||||
'grey-darkest': 'hsl(208, 15%, 28%)',
|
||||
'grey-darker': 'hsl(208, 12%, 43%)',
|
||||
'grey-dark': 'hsl(208, 12%, 58%)',
|
||||
'grey': 'hsl(208, 16%, 76%)',
|
||||
'grey-light': 'hsl(208, 20%, 88%)',
|
||||
'grey-lighter': 'hsl(208, 33%, 96%)',
|
||||
'grey-lightest': 'hsl(208, 35%, 98%)',
|
||||
'white': 'hsl(208, 0%, 100%)',
|
||||
|
||||
'red-darkest': '#420806',
|
||||
'red-darker': '#6a1b19',
|
||||
|
|
|
|||
|
|
@ -10,90 +10,51 @@ 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 px-4 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="text-white bg-grey px-6 py-4 text-sm font-semibold relative shadow z-10">
|
||||
<div class="tracking-wide uppercase mb-6">Proposed Greys</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="opacity-0">Base</span>
|
||||
<span class="font-normal opacity-0 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-0 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-0 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-0 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-0 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-0 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-0 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-0 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-0 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-0 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">Legacy Greys</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="opacity-0">Base</span>
|
||||
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['grey']) }}</span>
|
||||
<span class="font-normal opacity-0 lowercase truncate">{{ 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="">White</span>
|
||||
<span class="-opacity-0">White</span>
|
||||
<span class="font-normal opacity-0 lowercase truncate">{{ 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="">grey-light Lighter</span>
|
||||
<span class="-opacity-0">Lightest</span>
|
||||
<span class="font-normal opacity-0 lowercase truncate">{{ 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="">grey-light Light</span>
|
||||
<span class="-opacity-0">Lighter</span>
|
||||
<span class="font-normal opacity-0 lowercase truncate">{{ 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="">grey-light</span>
|
||||
<span class="-opacity-0">Light</span>
|
||||
<span class="font-normal opacity-0 lowercase truncate">{{ 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="">grey-light Dark / Slate Lighter</span>
|
||||
<span class="-opacity-0">Base</span>
|
||||
<span class="font-normal opacity-0 lowercase truncate">{{ 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="">grey-light Darker / Slate Light</span>
|
||||
<span class="-opacity-0">Dark</span>
|
||||
<span class="font-normal opacity-0 lowercase truncate">{{ 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="">Slate</span>
|
||||
<span class="-opacity-0">Darker</span>
|
||||
<span class="font-normal opacity-0 lowercase truncate">{{ 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="">Slate Dark</span>
|
||||
<span class="-opacity-0">Darkest</span>
|
||||
<span class="font-normal opacity-0 lowercase truncate">{{ 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="">Slate Darker</span>
|
||||
<span class="-opacity-0">Black</span>
|
||||
<span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['black']) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,33 +1,11 @@
|
|||
var config = require('../defaultConfig')()
|
||||
|
||||
config.colors = Object.assign(config.colors, {
|
||||
'new-white': 'hsl(208, 0%, 100%)',
|
||||
'new-grey-lightest': 'hsl(208, 35%, 98%)',
|
||||
'new-grey-lighter': 'hsl(208, 33%, 96%)',
|
||||
'new-grey-light': 'hsl(208, 20%, 88%)',
|
||||
'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%)',
|
||||
|
||||
'tailwind-teal-light': '#5ebcca',
|
||||
'tailwind-teal': '#44a8b3',
|
||||
'tailwind-teal-dark': '#2f8696',
|
||||
})
|
||||
|
||||
config.colors = Object.assign(config.colors, {
|
||||
'white': config.colors['new-white'],
|
||||
'grey-lightest': config.colors['new-grey-lightest'],
|
||||
'grey-lighter': config.colors['new-grey-lighter'],
|
||||
'grey-light': config.colors['new-grey-light'],
|
||||
'grey': config.colors['new-grey'],
|
||||
'grey-dark': config.colors['new-grey-dark'],
|
||||
'grey-darker': config.colors['new-grey-darker'],
|
||||
'grey-darkest': config.colors['new-grey-darkest'],
|
||||
'black': config.colors['new-black'],
|
||||
})
|
||||
|
||||
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',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue