mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Update colors to Steve's new palette
This commit is contained in:
Adam Wathan
parent
c66763a635
commit
b4738aa9b7
114
defaultConfig.js
114
defaultConfig.js
@ -44,8 +44,6 @@ View the full documentation at https://tailwindcss.com.
|
||||
*/
|
||||
|
||||
var colors = {
|
||||
'black': '#000000',
|
||||
'white': '#ffffff',
|
||||
'transparent': 'transparent',
|
||||
|
||||
'slate-darker': '#212b35',
|
||||
@ -60,59 +58,87 @@ var colors = {
|
||||
'smoke-light': '#f0f2f5',
|
||||
'smoke-lighter': '#f7f9fa',
|
||||
|
||||
'red-darker': '#960f0d',
|
||||
'red-dark': '#d43633',
|
||||
'red': '#f25451',
|
||||
'red-light': '#fa8785',
|
||||
'red-lighter': '#fff1f0',
|
||||
'black': '#222b2f',
|
||||
'grey-darkest': '#364349',
|
||||
'grey-darker': '#596a73',
|
||||
'grey-dark': '#70818a',
|
||||
'grey': '#9babb4',
|
||||
'grey-light': '#dae4e9',
|
||||
'grey-lighter': '#f3f7f9',
|
||||
'grey-lightest': '#fafcfc',
|
||||
'white': '#ffffff',
|
||||
|
||||
'orange-darker': '#875200',
|
||||
'orange-dark': '#f29500',
|
||||
'orange': '#ffb82b',
|
||||
'orange-light': '#ffd685',
|
||||
'orange-lighter': '#fff8eb',
|
||||
'red-darkest': '#610b08',
|
||||
'red-darker': '#a61611',
|
||||
'red-dark': '#cc1f1a',
|
||||
'red': '#e3342f',
|
||||
'red-light': '#ef5753',
|
||||
'red-lighter': '#f9acaa',
|
||||
'red-lightest': '#fcebea',
|
||||
|
||||
'yellow-darker': '#966100',
|
||||
'yellow-dark': '#ffc400',
|
||||
'yellow': '#ffe14a',
|
||||
'yellow-light': '#ffea83',
|
||||
'yellow-lighter': '#fffbe5',
|
||||
'orange-darkest': '#622c06',
|
||||
'orange-darker': '#ad560e',
|
||||
'orange-dark': '#de751f',
|
||||
'orange': '#f6993f',
|
||||
'orange-light': '#faad63',
|
||||
'orange-lighter': '#fcd9b6',
|
||||
'orange-lightest': '#fff5eb',
|
||||
|
||||
'green-darker': '#056619',
|
||||
'green-dark': '#34ae4c',
|
||||
'green': '#57d06f',
|
||||
'green-light': '#b1f3be',
|
||||
'green-lighter': '#eefff1',
|
||||
'yellow-darkest': '#453411',
|
||||
'yellow-darker': '#d9b111',
|
||||
'yellow-dark': '#f2d024',
|
||||
'yellow': '#ffed4a',
|
||||
'yellow-light': '#fff382',
|
||||
'yellow-lighter': '#fff9c2',
|
||||
'yellow-lightest': '#fcfbeb',
|
||||
|
||||
'teal-darker': '#025654',
|
||||
'teal-dark': '#249e9a',
|
||||
'green-darkest': '#032d19',
|
||||
'green-darker': '#0e693e',
|
||||
'green-dark': '#1f9d55',
|
||||
'green': '#38c172',
|
||||
'green-light': '#51d88a',
|
||||
'green-lighter': '#a2f5bf',
|
||||
'green-lightest': '#e3fcec',
|
||||
|
||||
'teal-darkest': '#0d3331',
|
||||
'teal-darker': '#298f8b',
|
||||
'teal-dark': '#38a89d',
|
||||
'teal': '#4dc0b5',
|
||||
'teal-light': '#9eebe4',
|
||||
'teal-lighter': '#e8fdfa',
|
||||
'teal-light': '#64d5ca',
|
||||
'teal-lighter': '#a0f0ed',
|
||||
'teal-lightest': '#e8fffe',
|
||||
|
||||
'blue-darker': '#154267',
|
||||
'blue-dark': '#3687c8',
|
||||
'blue': '#4aa2ea',
|
||||
'blue-light': '#acdaff',
|
||||
'blue-lighter': '#f1f9ff',
|
||||
'blue-darkest': '#05233b',
|
||||
'blue-darker': '#225e8f',
|
||||
'blue-dark': '#2779bd',
|
||||
'blue': '#3490dc',
|
||||
'blue-light': '#6cb2eb',
|
||||
'blue-lighter': '#bcdefa',
|
||||
'blue-lightest': '#eff8ff',
|
||||
|
||||
'indigo-darker': '#242b54',
|
||||
'indigo-dark': '#4957a5',
|
||||
'indigo-darkest': '#191e38',
|
||||
'indigo-darker': '#3c488c',
|
||||
'indigo-dark': '#5661b3',
|
||||
'indigo': '#6574cd',
|
||||
'indigo-light': '#bcc5fb',
|
||||
'indigo-lighter': '#f4f5ff',
|
||||
'indigo-light': '#7886d7',
|
||||
'indigo-lighter': '#b2b7ff',
|
||||
'indigo-lightest': '#e6e8ff',
|
||||
|
||||
'purple-darker': '#331f56',
|
||||
'purple-dark': '#714cb4',
|
||||
'purple': '#976ae6',
|
||||
'purple-light': '#ceb3ff',
|
||||
'purple-lighter': '#f7f3ff',
|
||||
'purple-darkest': '#1f133f',
|
||||
'purple-darker': '#5d3aac',
|
||||
'purple-dark': '#794acf',
|
||||
'purple': '#9561e2',
|
||||
'purple-light': '#a779e9',
|
||||
'purple-lighter': '#d6bbfc',
|
||||
'purple-lightest': '#f3ebff',
|
||||
|
||||
'pink-darker': '#6b2052',
|
||||
'pink-dark': '#d84f7d',
|
||||
'pink-darkest': '#45051e',
|
||||
'pink-darker': '#b71b5e',
|
||||
'pink-dark': '#eb5286',
|
||||
'pink': '#f66d9b',
|
||||
'pink-light': '#ffa5c3',
|
||||
'pink-lighter': '#fdf2f5',
|
||||
'pink-light': '#fa7ea8',
|
||||
'pink-lighter': '#ffbbca',
|
||||
'pink-lightest': '#ffebef',
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
|
||||
@ -8,3 +8,237 @@ title: "Color Palette"
|
||||
- Explain default color palette
|
||||
- Document how to customize your color palette, using regular JS features in your config file to avoid duplication, merging colors, etc.
|
||||
- Talk about naming, how it's easy to use color-based names or hierarchy-based names, whatever floats your boat
|
||||
|
||||
<div class="flex flex-wrap -mx-4 mb-4">
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-red-darkest bg-red-lightest px-6 py-3 text-sm font-semibold">
|
||||
Lightest
|
||||
</div>
|
||||
<div class="text-red-darkest bg-red-lighter px-6 py-3 text-sm font-semibold">
|
||||
Lighter
|
||||
</div>
|
||||
<div class="text-white bg-red-light px-6 py-3 text-sm font-semibold">
|
||||
Light
|
||||
</div>
|
||||
<div class="text-white bg-red px-6 py-3 text-sm font-semibold">
|
||||
Red
|
||||
</div>
|
||||
<div class="text-white bg-red-dark px-6 py-3 text-sm font-semibold">
|
||||
Dark
|
||||
</div>
|
||||
<div class="text-white bg-red-darker px-6 py-3 text-sm font-semibold">
|
||||
Darker
|
||||
</div>
|
||||
<div class="text-white bg-red-darkest px-6 py-3 text-sm font-semibold">
|
||||
Darkest
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-orange-darkest bg-orange-lightest px-6 py-3 text-sm font-semibold">
|
||||
Lightest
|
||||
</div>
|
||||
<div class="text-orange-darkest bg-orange-lighter px-6 py-3 text-sm font-semibold">
|
||||
Lighter
|
||||
</div>
|
||||
<div class="text-orange-darkest bg-orange-light px-6 py-3 text-sm font-semibold">
|
||||
Light
|
||||
</div>
|
||||
<div class="text-orange-darkest bg-orange px-6 py-3 text-sm font-semibold">
|
||||
Orange
|
||||
</div>
|
||||
<div class="text-white bg-orange-dark px-6 py-3 text-sm font-semibold">
|
||||
Dark
|
||||
</div>
|
||||
<div class="text-white bg-orange-darker px-6 py-3 text-sm font-semibold">
|
||||
Darker
|
||||
</div>
|
||||
<div class="text-white bg-orange-darkest px-6 py-3 text-sm font-semibold">
|
||||
Darkest
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-yellow-darkest bg-yellow-lightest px-6 py-3 text-sm font-semibold">
|
||||
Lightest
|
||||
</div>
|
||||
<div class="text-yellow-darkest bg-yellow-lighter px-6 py-3 text-sm font-semibold">
|
||||
Lighter
|
||||
</div>
|
||||
<div class="text-yellow-darkest bg-yellow-light px-6 py-3 text-sm font-semibold">
|
||||
Light
|
||||
</div>
|
||||
<div class="text-yellow-darkest bg-yellow px-6 py-3 text-sm font-semibold">
|
||||
Yellow
|
||||
</div>
|
||||
<div class="text-yellow-darkest bg-yellow-dark px-6 py-3 text-sm font-semibold">
|
||||
Dark
|
||||
</div>
|
||||
<div class="text-yellow-darkest bg-yellow-darker px-6 py-3 text-sm font-semibold">
|
||||
Darker
|
||||
</div>
|
||||
<div class="text-white bg-yellow-darkest px-6 py-3 text-sm font-semibold">
|
||||
Darkest
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap -mx-4 mb-4">
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-green-darkest bg-green-lightest px-6 py-3 text-sm font-semibold">
|
||||
Lightest
|
||||
</div>
|
||||
<div class="text-green-darkest bg-green-lighter px-6 py-3 text-sm font-semibold">
|
||||
Lighter
|
||||
</div>
|
||||
<div class="text-green-darkest bg-green-light px-6 py-3 text-sm font-semibold">
|
||||
Light
|
||||
</div>
|
||||
<div class="text-white bg-green px-6 py-3 text-sm font-semibold">
|
||||
Green
|
||||
</div>
|
||||
<div class="text-white bg-green-dark px-6 py-3 text-sm font-semibold">
|
||||
Dark
|
||||
</div>
|
||||
<div class="text-white bg-green-darker px-6 py-3 text-sm font-semibold">
|
||||
Darker
|
||||
</div>
|
||||
<div class="text-white bg-green-darkest px-6 py-3 text-sm font-semibold">
|
||||
Darkest
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-teal-darkest bg-teal-lightest px-6 py-3 text-sm font-semibold">
|
||||
Lightest
|
||||
</div>
|
||||
<div class="text-teal-darkest bg-teal-lighter px-6 py-3 text-sm font-semibold">
|
||||
Lighter
|
||||
</div>
|
||||
<div class="text-teal-darkest bg-teal-light px-6 py-3 text-sm font-semibold">
|
||||
Light
|
||||
</div>
|
||||
<div class="text-white bg-teal px-6 py-3 text-sm font-semibold">
|
||||
Teal
|
||||
</div>
|
||||
<div class="text-white bg-teal-dark px-6 py-3 text-sm font-semibold">
|
||||
Dark
|
||||
</div>
|
||||
<div class="text-white bg-teal-darker px-6 py-3 text-sm font-semibold">
|
||||
Darker
|
||||
</div>
|
||||
<div class="text-white bg-teal-darkest px-6 py-3 text-sm font-semibold">
|
||||
Darkest
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-blue-darkest bg-blue-lightest px-6 py-3 text-sm font-semibold">
|
||||
Lightest
|
||||
</div>
|
||||
<div class="text-blue-darkest bg-blue-lighter px-6 py-3 text-sm font-semibold">
|
||||
Lighter
|
||||
</div>
|
||||
<div class="text-blue-darkest bg-blue-light px-6 py-3 text-sm font-semibold">
|
||||
Light
|
||||
</div>
|
||||
<div class="text-white bg-blue px-6 py-3 text-sm font-semibold">
|
||||
Blue
|
||||
</div>
|
||||
<div class="text-white bg-blue-dark px-6 py-3 text-sm font-semibold">
|
||||
Dark
|
||||
</div>
|
||||
<div class="text-white bg-blue-darker px-6 py-3 text-sm font-semibold">
|
||||
Darker
|
||||
</div>
|
||||
<div class="text-white bg-blue-darkest px-6 py-3 text-sm font-semibold">
|
||||
Darkest
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap -mx-4 mb-4">
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-indigo-darkest bg-indigo-lightest px-6 py-3 text-sm font-semibold">
|
||||
Lightest
|
||||
</div>
|
||||
<div class="text-indigo-darkest bg-indigo-lighter px-6 py-3 text-sm font-semibold">
|
||||
Lighter
|
||||
</div>
|
||||
<div class="text-indigo-darkest bg-indigo-light px-6 py-3 text-sm font-semibold">
|
||||
Light
|
||||
</div>
|
||||
<div class="text-white bg-indigo px-6 py-3 text-sm font-semibold">
|
||||
Indigo
|
||||
</div>
|
||||
<div class="text-white bg-indigo-dark px-6 py-3 text-sm font-semibold">
|
||||
Dark
|
||||
</div>
|
||||
<div class="text-white bg-indigo-darker px-6 py-3 text-sm font-semibold">
|
||||
Darker
|
||||
</div>
|
||||
<div class="text-white bg-indigo-darkest px-6 py-3 text-sm font-semibold">
|
||||
Darkest
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-purple-darkest bg-purple-lightest px-6 py-3 text-sm font-semibold">
|
||||
Lightest
|
||||
</div>
|
||||
<div class="text-purple-darkest bg-purple-lighter px-6 py-3 text-sm font-semibold">
|
||||
Lighter
|
||||
</div>
|
||||
<div class="text-purple-darkest bg-purple-light px-6 py-3 text-sm font-semibold">
|
||||
Light
|
||||
</div>
|
||||
<div class="text-white bg-purple px-6 py-3 text-sm font-semibold">
|
||||
Purple
|
||||
</div>
|
||||
<div class="text-white bg-purple-dark px-6 py-3 text-sm font-semibold">
|
||||
Dark
|
||||
</div>
|
||||
<div class="text-white bg-purple-darker px-6 py-3 text-sm font-semibold">
|
||||
Darker
|
||||
</div>
|
||||
<div class="text-white bg-purple-darkest px-6 py-3 text-sm font-semibold">
|
||||
Darkest
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-pink-darkest bg-pink-lightest px-6 py-3 text-sm font-semibold">
|
||||
Lightest
|
||||
</div>
|
||||
<div class="text-pink-darkest bg-pink-lighter px-6 py-3 text-sm font-semibold">
|
||||
Lighter
|
||||
</div>
|
||||
<div class="text-pink-darkest bg-pink-light px-6 py-3 text-sm font-semibold">
|
||||
Light
|
||||
</div>
|
||||
<div class="text-white bg-pink px-6 py-3 text-sm font-semibold">
|
||||
Pink
|
||||
</div>
|
||||
<div class="text-white bg-pink-dark px-6 py-3 text-sm font-semibold">
|
||||
Dark
|
||||
</div>
|
||||
<div class="text-white bg-pink-darker px-6 py-3 text-sm font-semibold">
|
||||
Darker
|
||||
</div>
|
||||
<div class="text-white bg-pink-darkest px-6 py-3 text-sm font-semibold">
|
||||
Darkest
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
var config = require('../defaultConfig')
|
||||
|
||||
config.colors = {
|
||||
'black': '#000000',
|
||||
'white': '#ffffff',
|
||||
...config.colors,
|
||||
'transparent': 'transparent',
|
||||
|
||||
'slate-darker': '#212b35',
|
||||
@ -16,60 +15,6 @@ config.colors = {
|
||||
'smoke': '#dfe3e8',
|
||||
'smoke-light': 'hsl(200, 33%, 96%)',
|
||||
'smoke-lighter': 'hsl(200, 25%, 98%)',
|
||||
|
||||
'red-darker': '#960f0d',
|
||||
'red-dark': '#d43633',
|
||||
'red': '#f25451',
|
||||
'red-light': '#fa8785',
|
||||
'red-lighter': '#fff1f0',
|
||||
|
||||
'orange-darker': '#875200',
|
||||
'orange-dark': '#f29500',
|
||||
'orange': '#ffb82b',
|
||||
'orange-light': '#ffd685',
|
||||
'orange-lighter': '#fff8eb',
|
||||
|
||||
'yellow-darker': '#966100',
|
||||
'yellow-dark': '#ffc400',
|
||||
'yellow': '#ffe14a',
|
||||
'yellow-light': '#ffea83',
|
||||
'yellow-lighter': '#fffbe5',
|
||||
|
||||
'green-darker': '#056619',
|
||||
'green-dark': '#34ae4c',
|
||||
'green': '#57d06f',
|
||||
'green-light': '#b1f3be',
|
||||
'green-lighter': '#eefff1',
|
||||
|
||||
'teal-darker': '#025654',
|
||||
'teal-dark': '#249e9a',
|
||||
'teal': '#4dc0b5',
|
||||
'teal-light': '#9eebe4',
|
||||
'teal-lighter': '#e8fdfa',
|
||||
|
||||
'blue-darker': '#154267',
|
||||
'blue-dark': '#317af6',
|
||||
'blue': '#4aa2ea',
|
||||
'blue-light': '#acdaff',
|
||||
'blue-lighter': '#f1f9ff',
|
||||
|
||||
'indigo-darker': '#242b54',
|
||||
'indigo-dark': '#4957a5',
|
||||
'indigo': '#6574cd',
|
||||
'indigo-light': '#bcc5fb',
|
||||
'indigo-lighter': '#f4f5ff',
|
||||
|
||||
'purple-darker': '#331f56',
|
||||
'purple-dark': '#714cb4',
|
||||
'purple': '#976ae6',
|
||||
'purple-light': '#ceb3ff',
|
||||
'purple-lighter': '#f7f3ff',
|
||||
|
||||
'pink-darker': '#6b2052',
|
||||
'pink-dark': '#d84f7d',
|
||||
'pink': '#f66d9b',
|
||||
'pink-light': '#ffa5c3',
|
||||
'pink-lighter': '#fdf2f5',
|
||||
}
|
||||
|
||||
config.fonts = {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user