Skip to content

Commit c4ee2e5

Browse files
adamwathanadamwathan
committed
WIP
1 parent 1d5852d commit c4ee2e5

2 files changed

Lines changed: 48 additions & 47 deletions

File tree

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

Lines changed: 38 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -10,147 +10,138 @@ 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 mb-8 px-4">
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">
17-
<div class="tracking-wide uppercase mb-6">Grey</div>
17+
<div class="tracking-wide uppercase mb-6">Current Greys</div>
1818
<div class="flex justify-between">
19-
<span>Base</span>
20-
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey']) }}</span>
19+
<span class="opacity-0">Base</span>
20+
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['grey']) }}</span>
2121
</div>
2222
</div>
2323
<div class="text-black bg-white px-6 py-3 text-sm font-semibold flex justify-between">
2424
<span>White</span>
25-
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['white']) }}</span>
25+
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['white']) }}</span>
2626
</div>
2727
<div class="text-grey-darkest bg-grey-lightest px-6 py-3 text-sm font-semibold flex justify-between">
2828
<span>Lightest</span>
29-
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey-lightest']) }}</span>
29+
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['grey-lightest']) }}</span>
3030
</div>
3131
<div class="text-grey-darkest bg-grey-lighter px-6 py-3 text-sm font-semibold flex justify-between">
3232
<span>Lighter</span>
33-
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey-lighter']) }}</span>
33+
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['grey-lighter']) }}</span>
3434
</div>
3535
<div class="text-grey-darkest bg-grey-light px-6 py-3 text-sm font-semibold flex justify-between">
3636
<span>Light</span>
37-
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey-light']) }}</span>
37+
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['grey-light']) }}</span>
3838
</div>
3939
<div class="text-white bg-grey px-6 py-3 text-sm font-semibold flex justify-between flex justify-between">
4040
<span>Base</span>
41-
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey']) }}</span>
41+
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['grey']) }}</span>
4242
</div>
4343
<div class="text-white bg-grey-dark px-6 py-3 text-sm font-semibold flex justify-between">
4444
<span>Dark</span>
45-
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey-dark']) }}</span>
45+
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['grey-dark']) }}</span>
4646
</div>
4747
<div class="text-white bg-grey-darker px-6 py-3 text-sm font-semibold flex justify-between">
4848
<span>Darker</span>
49-
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey-darker']) }}</span>
49+
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['grey-darker']) }}</span>
5050
</div>
5151
<div class="text-white bg-grey-darkest px-6 py-3 text-sm font-semibold flex justify-between">
5252
<span>Darkest</span>
53-
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey-darkest']) }}</span>
53+
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['grey-darkest']) }}</span>
5454
</div>
5555
<div class="text-white bg-black px-6 py-3 text-sm font-semibold flex justify-between">
5656
<span>Black</span>
57-
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['black']) }}</span>
57+
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['black']) }}</span>
5858
</div>
5959
</div>
6060
</div>
6161

62-
<div class="w-full md:w-1/2 lg:w-1/3 mb-8 px-4">
62+
<div class="w-full md:w-1/2 lg:w-1/3 mb-8">
6363
<div class="rounded overflow-hidden">
6464
<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>
65+
<div class="tracking-wide uppercase mb-6">Proposed Greys</div>
6666
<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>
67+
<span class="opacity-0">Base</span>
68+
<span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey']) }}</span>
6969
</div>
7070
</div>
7171
<div class="text-black bg-new-white px-6 py-3 text-sm font-semibold flex justify-between">
7272
<span class="-opacity-0">White</span>
73-
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-white']) }}</span>
73+
<span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['new-white']) }}</span>
7474
</div>
7575
<div class="text-grey-darkest bg-new-grey-lightest px-6 py-3 text-sm font-semibold flex justify-between">
7676
<span class="-opacity-0">Lightest</span>
77-
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-lightest']) }}</span>
77+
<span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-lightest']) }}</span>
7878
</div>
7979
<div class="text-grey-darkest bg-new-grey-lighter px-6 py-3 text-sm font-semibold flex justify-between">
8080
<span class="-opacity-0">Lighter</span>
81-
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-lighter']) }}</span>
81+
<span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-lighter']) }}</span>
8282
</div>
8383
<div class="text-grey-darkest bg-new-grey-light px-6 py-3 text-sm font-semibold flex justify-between">
8484
<span class="-opacity-0">Light</span>
85-
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-light']) }}</span>
85+
<span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-light']) }}</span>
8686
</div>
8787
<div class="text-white bg-new-grey px-6 py-3 text-sm font-semibold flex justify-between flex justify-between">
8888
<span class="-opacity-0">Base</span>
89-
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey']) }}</span>
89+
<span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey']) }}</span>
9090
</div>
9191
<div class="text-white bg-new-grey-dark px-6 py-3 text-sm font-semibold flex justify-between">
9292
<span class="-opacity-0">Dark</span>
93-
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-dark']) }}</span>
93+
<span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-dark']) }}</span>
9494
</div>
9595
<div class="text-white bg-new-grey-darker px-6 py-3 text-sm font-semibold flex justify-between">
9696
<span class="-opacity-0">Darker</span>
97-
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-darker']) }}</span>
97+
<span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-darker']) }}</span>
9898
</div>
9999
<div class="text-white bg-new-grey-darkest px-6 py-3 text-sm font-semibold flex justify-between">
100100
<span class="-opacity-0">Darkest</span>
101-
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-darkest']) }}</span>
101+
<span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['new-grey-darkest']) }}</span>
102102
</div>
103103
<div class="text-white bg-new-black px-6 py-3 text-sm font-semibold flex justify-between">
104104
<span class="-opacity-0">Black</span>
105-
<span class="font-normal opacity-75 lowercase truncate">{{ strtoupper($page->config['colors']['new-black']) }}</span>
105+
<span class="font-normal opacity-0 lowercase truncate">{{ strtoupper($page->config['colors']['new-black']) }}</span>
106106
</div>
107107
</div>
108108
</div>
109109

110-
<div class="w-full md:w-1/2 lg:w-1/3 mb-8 px-4">
110+
<div class="w-full md:w-1/2 lg:w-1/3 mb-8">
111111
<div class="rounded overflow-hidden">
112112
<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>
113+
<div class="tracking-wide uppercase mb-6">Legacy Greys</div>
114114
<div class="flex justify-between">
115115
<span class="opacity-0">Base</span>
116116
<span class="font-normal opacity-0">{{ strtoupper($page->config['colors']['grey']) }}</span>
117117
</div>
118118
</div>
119119
<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>
120+
<span class="">White</span>
122121
</div>
123122
<div class="text-grey-darkest bg-smoke-lighter 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>
123+
<span class="">Smoke Lighter</span>
126124
</div>
127125
<div class="text-grey-darkest bg-smoke-light 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>
126+
<span class="">Smoke Light</span>
130127
</div>
131128
<div class="text-grey-darkest bg-smoke 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>
129+
<span class="">Smoke</span>
134130
</div>
135131
<div class="text-white bg-smoke-dark 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>
132+
<span class="">Smoke Dark / Slate Lighter</span>
138133
</div>
139134
<div class="text-white bg-smoke-darker 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>
135+
<span class="">Smoke Darker / Slate Light</span>
142136
</div>
143137
<div class="text-white bg-slate 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>
138+
<span class="">Slate</span>
146139
</div>
147140
<div class="text-white bg-slate-dark 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>
141+
<span class="">Slate Dark</span>
150142
</div>
151143
<div class="text-white bg-slate-darker 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>
144+
<span class="">Slate Darker</span>
154145
</div>
155146
</div>
156147
</div>

‎docs/tailwind.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,16 @@ config.colors = Object.assign(config.colors, {
4141
// 'smoke-light': config.colors['new-grey-lighter'],
4242
// 'smoke-lighter': config.colors['new-grey-lightest'],
4343

44+
// 'white': config.colors['new-white'],
45+
// 'grey-lightest': config.colors['new-grey-lightest'],
46+
// 'grey-lighter': config.colors['new-grey-lighter'],
47+
// 'grey-light': config.colors['new-grey-light'],
48+
// 'grey': config.colors['new-grey'],
49+
// 'grey-dark': config.colors['new-grey-dark'],
50+
// 'grey-darker': config.colors['new-grey-darker'],
51+
// 'grey-darkest': config.colors['new-grey-darkest'],
52+
// 'black': config.colors['new-black'],
53+
4454
'tailwind-teal-light': '#5ebcca',
4555
'tailwind-teal': '#44a8b3',
4656
'tailwind-teal-dark': '#2f8696',

0 commit comments

Comments
 (0)