Skip to content

Commit e6814fd

Browse files
adamwathanadamwathan
committed
WIP
1 parent d146b99 commit e6814fd

3 files changed

Lines changed: 130 additions & 3 deletions

File tree

‎docs/source/docs/colors.blade.md‎

Lines changed: 98 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ Developing an organized, consistent and beautiful color palette is critical to t
1010

1111
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.
1212

13-
<div class="flex flex-wrap -mx-4">
14-
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
13+
<div class="flex flex-wrap">
14+
<div class="w-full md:w-1/2 lg:w-1/3 mb-8">
1515
<div class="rounded overflow-hidden">
1616
<div class="text-white bg-grey px-6 py-4 text-sm font-semibold relative shadow z-10">
1717
<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
5858
</div>
5959
</div>
6060
</div>
61+
62+
<div class="w-full md:w-1/2 lg:w-1/3 mb-8">
63+
<div class="rounded overflow-hidden">
64+
<div class="text-white bg-new-grey px-6 py-4 text-sm font-semibold relative shadow z-10">
65+
<div class="tracking-wide uppercase mb-6">Grey</div>
66+
<div class="flex justify-between">
67+
<span class="-opacity-0">Base</span>
68+
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey']) }}</span>
69+
</div>
70+
</div>
71+
<div class="text-black bg-new-white px-6 py-3 text-sm font-semibold flex justify-between">
72+
<span class="-opacity-0">White</span>
73+
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-white']) }}</span>
74+
</div>
75+
<div class="text-grey-darkest bg-new-grey-lightest px-6 py-3 text-sm font-semibold flex justify-between">
76+
<span class="-opacity-0">Lightest</span>
77+
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-lightest']) }}</span>
78+
</div>
79+
<div class="text-grey-darkest bg-new-grey-lighter px-6 py-3 text-sm font-semibold flex justify-between">
80+
<span class="-opacity-0">Lighter</span>
81+
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-lighter']) }}</span>
82+
</div>
83+
<div class="text-grey-darkest bg-new-grey-light px-6 py-3 text-sm font-semibold flex justify-between">
84+
<span class="-opacity-0">Light</span>
85+
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-light']) }}</span>
86+
</div>
87+
<div class="text-white bg-new-grey px-6 py-3 text-sm font-semibold flex justify-between flex justify-between">
88+
<span class="-opacity-0">Base</span>
89+
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey']) }}</span>
90+
</div>
91+
<div class="text-white bg-new-grey-dark px-6 py-3 text-sm font-semibold flex justify-between">
92+
<span class="-opacity-0">Dark</span>
93+
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-dark']) }}</span>
94+
</div>
95+
<div class="text-white bg-new-grey-darker px-6 py-3 text-sm font-semibold flex justify-between">
96+
<span class="-opacity-0">Darker</span>
97+
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-darker']) }}</span>
98+
</div>
99+
<div class="text-white bg-new-grey-darkest px-6 py-3 text-sm font-semibold flex justify-between">
100+
<span class="-opacity-0">Darkest</span>
101+
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-darkest']) }}</span>
102+
</div>
103+
<div class="text-white bg-new-black px-6 py-3 text-sm font-semibold flex justify-between">
104+
<span class="-opacity-0">Black</span>
105+
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-black']) }}</span>
106+
</div>
107+
</div>
108+
</div>
109+
110+
<div class="w-full md:w-1/2 lg:w-1/3 mb-8">
111+
<div class="rounded overflow-hidden">
112+
<div class="text-white bg-grey px-6 py-4 text-sm font-semibold relative shadow z-10">
113+
<div class="tracking-wide uppercase mb-6">Grey</div>
114+
<div class="flex justify-between">
115+
<span class="opacity-0">Base</span>
116+
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['grey']) }}</span>
117+
</div>
118+
</div>
119+
<div class="text-black bg-white px-6 py-3 text-sm font-semibold flex justify-between">
120+
<span class="opacity-0">White</span>
121+
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['white']) }}</span>
122+
</div>
123+
<div class="text-grey-darkest bg-grey-lightest px-6 py-3 text-sm font-semibold flex justify-between">
124+
<span class="opacity-0">Lightest</span>
125+
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['grey-lightest']) }}</span>
126+
</div>
127+
<div class="text-grey-darkest bg-grey-lighter px-6 py-3 text-sm font-semibold flex justify-between">
128+
<span class="opacity-0">Lighter</span>
129+
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['grey-lighter']) }}</span>
130+
</div>
131+
<div class="text-grey-darkest bg-grey-light px-6 py-3 text-sm font-semibold flex justify-between">
132+
<span class="opacity-0">Light</span>
133+
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['grey-light']) }}</span>
134+
</div>
135+
<div class="text-white bg-grey px-6 py-3 text-sm font-semibold flex justify-between flex justify-between">
136+
<span class="opacity-0">Base</span>
137+
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['grey']) }}</span>
138+
</div>
139+
<div class="text-white bg-grey-dark px-6 py-3 text-sm font-semibold flex justify-between">
140+
<span class="opacity-0">Dark</span>
141+
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['grey-dark']) }}</span>
142+
</div>
143+
<div class="text-white bg-grey-darker px-6 py-3 text-sm font-semibold flex justify-between">
144+
<span class="opacity-0">Darker</span>
145+
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['grey-darker']) }}</span>
146+
</div>
147+
<div class="text-white bg-grey-darkest px-6 py-3 text-sm font-semibold flex justify-between">
148+
<span class="opacity-0">Darkest</span>
149+
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['grey-darkest']) }}</span>
150+
</div>
151+
<div class="text-white bg-black px-6 py-3 text-sm font-semibold flex justify-between">
152+
<span class="opacity-0">Black</span>
153+
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['black']) }}</span>
154+
</div>
155+
</div>
156+
</div>
61157
</div>
62158

63159
<div class="flex flex-wrap -mx-4">

‎docs/tailwind.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,37 @@
11
var config = require('../defaultConfig')()
22

33
config.colors = Object.assign(config.colors, {
4+
'new-white': 'hsl(0, 0%, 100%)',
5+
'new-grey-lightest': 'hsl(200, 25%, 98%)',
6+
'new-grey-lighter': 'hsl(200, 33%, 96%)',
7+
'new-grey-light': 'hsl(200, 25%, 88%)',
8+
'new-grey': 'hsl(200, 14%, 66%)',
9+
'new-grey-dark': 'hsl(200, 10%, 49%)',
10+
'new-grey-darker': 'hsl(200, 13%, 40%)',
11+
'new-grey-darkest': 'hsl(200, 15%, 25%)',
12+
'new-black': 'hsl(200, 16%, 16%)',
13+
14+
'new-white': 'hsl(0, 0%, 100%)',
15+
'new-grey-lightest': 'hsl(200, 12%, 98%)',
16+
'new-grey-lighter': 'hsl(200, 12%, 96%)',
17+
'new-grey-light': 'hsl(200, 12%, 88%)',
18+
'new-grey': 'hsl(200, 12%, 66%)',
19+
'new-grey-dark': 'hsl(200, 12%, 49%)',
20+
'new-grey-darker': 'hsl(200, 13%, 40%)',
21+
'new-grey-darkest': 'hsl(200, 15%, 25%)',
22+
'new-black': 'hsl(200, 16%, 16%)',
23+
24+
'new-white': 'hsl(200, 0%, 100%)',
25+
'new-grey-lightest': 'hsl(200, 35%, 98%)',
26+
'new-grey-lighter': 'hsl(200, 30%, 96%)',
27+
'new-grey-light': 'hsl(200, 20%, 88%)',
28+
'new-grey': 'hsl(200, 16%, 73%)',
29+
'new-grey-dark': 'hsl(200, 11%, 55%)',
30+
'new-grey-darker': 'hsl(200, 12%, 41%)',
31+
'new-grey-darkest': 'hsl(200, 15%, 26%)',
32+
'new-black': 'hsl(200, 16%, 16%)',
33+
34+
435
'slate-darker': '#212b35',
536
'slate-dark': '#404e5c',
637
'slate': '#647382',

‎docs/webpack.mix.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const tailwind = require('./../lib/index.js')
77
const config = require('./../defaultConfig.js')
88
const fs = require('fs')
99

10-
fs.writeFileSync('./tailwind.json', JSON.stringify(config()))
10+
fs.writeFileSync('./tailwind.json', JSON.stringify(require('./tailwind.js')))
1111

1212
const env = argv.e || argv.env || 'local'
1313
const plugins = [

0 commit comments

Comments
 (0)