Skip to content

Commit adc3fb0

Browse files
adamwathanadamwathan
authored
Merge pull request tailwindlabs#297 from tailwindcss/new-greys
[0.4] New grey scale, remove legacy greys
2 parents 7e1c168 + 69fc891 commit adc3fb0

33 files changed

+862
-874
lines changed

‎__tests__/fixtures/tailwind-output.css‎

Lines changed: 241 additions & 241 deletions
Large diffs are not rendered by default.

‎defaultConfig.stub.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,14 @@ View the full documentation at https://tailwindcss.com.
4646
let colors = {
4747
'transparent': 'transparent',
4848

49-
'black': '#222b2f',
50-
'grey-darkest': '#364349',
51-
'grey-darker': '#596a73',
52-
'grey-dark': '#70818a',
53-
'grey': '#9babb4',
54-
'grey-light': '#dae4e9',
55-
'grey-lighter': '#f3f7f9',
56-
'grey-lightest': '#fafcfc',
49+
'black': '#22292f',
50+
'grey-darkest': '#3d4852',
51+
'grey-darker': '#606f7b',
52+
'grey-dark': '#8795a1',
53+
'grey': '#b8c2cc',
54+
'grey-light': '#dae1e7',
55+
'grey-lighter': '#f1f5f8',
56+
'grey-lightest': '#f8fafc',
5757
'white': '#ffffff',
5858

5959
'red-darkest': '#420806',

‎docs/source/_assets/js/app.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const app = new Vue({
1212
})
1313

1414
Prism.highlightAll()
15-
anchors.options = { placement: 'left', class: 'text-slate-light' }
15+
anchors.options = { placement: 'left', class: 'text-grey-dark' }
1616
anchors.add()
1717

1818
// Add shortcut to search input when pressing the "/" key

‎docs/source/_assets/js/components/ResponsiveCodeSample.vue‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,30 @@
11
<template>
22
<div>
33
<div class="flex items-end justify-center mb-2 bg-white">
4-
<span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'none' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'none'" >
4+
<span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'none' ? 'text-grey-darkest' : 'text-grey-dark'" @click="activeScreen = 'none'" >
55
<svg :width="0.857142857142857 * 10" height="24" class="fill-current block mx-auto mb-1" viewBox="0 0 10 28" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 12h7a1.5 1.5 0 0 1 1.5 1.5v13A1.5 1.5 0 0 1 8.5 28h-7A1.5 1.5 0 0 1 0 26.5v-13A1.5 1.5 0 0 1 1.5 12zM1 15v10h8V15H1zm4 12.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM4 13v1h2v-1H4z" fill-rule="evenodd"/></svg>
66
<p class="text-xs">all</p>
77
</span>
8-
<span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'sm' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'sm'" >
8+
<span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'sm' ? 'text-grey-darkest' : 'text-grey-dark'" @click="activeScreen = 'sm'" >
99
<svg :width="0.857142857142857 * 14" height="24" class="fill-current block mx-auto mb-1" viewBox="0 0 14 28" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 6h11A1.5 1.5 0 0 1 14 7.5v19a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 26.5v-19A1.5 1.5 0 0 1 1.5 6zM1 9v16h12V9H1zm6 18.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM7 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" fill-rule="evenodd"/></svg>
1010
<p class="text-xs">sm</p>
1111
</span>
12-
<span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'md' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'md'" >
12+
<span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'md' ? 'text-grey-darkest' : 'text-grey-dark'" @click="activeScreen = 'md'" >
1313
<svg :width="0.857142857142857 * 26" height="24" class="fill-current block mx-auto mb-1" viewBox="0 0 26 28" xmlns="http://www.w3.org/2000/svg"><path d="M26 26.5a1.5 1.5 0 0 1-1.5 1.5h-23A1.5 1.5 0 0 1 0 26.5v-14A1.5 1.5 0 0 1 1.5 11h23a1.5 1.5 0 0 1 1.5 1.5v14zm-3 .5V12H3v15h20zm1.5-6.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-23-.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" fill-rule="evenodd"/></svg>
1414
<p class="text-xs">md</p>
1515
</span>
16-
<span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'lg' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'lg'" >
16+
<span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'lg' ? 'text-grey-darkest' : 'text-grey-dark'" @click="activeScreen = 'lg'" >
1717
<svg :width="0.857142857142857 * 38" height="24" class="fill-current block mx-auto mb-1" viewBox="0 0 38 28" xmlns="http://www.w3.org/2000/svg"><path d="M34 26h4v1c-1.333.667-2.667 1-4 1H4c-1.333 0-2.667-.333-4-1v-1h4V7.5A1.5 1.5 0 0 1 5.5 6h27A1.5 1.5 0 0 1 34 7.5V26zM6 8v18h26V8H6z" fill-rule="evenodd"/></svg>
1818
<p class="text-xs">lg</p>
1919
</span>
20-
<span class="inline-block text-center cursor-pointer select-none" :class="activeScreen === 'xl' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'xl'" >
20+
<span class="inline-block text-center cursor-pointer select-none" :class="activeScreen === 'xl' ? 'text-grey-darkest' : 'text-grey-dark'" @click="activeScreen = 'xl'" >
2121
<svg :width="0.857142857142857 * 36" height="24" class="fill-current block mx-auto mb-1" viewBox="0 0 36 28" xmlns="http://www.w3.org/2000/svg"><path d="M20.857 24l.857 3H24v1H12v-1h2.286l.857-3H1.5A1.5 1.5 0 0 1 0 22.5v-21A1.5 1.5 0 0 1 1.5 0h33A1.5 1.5 0 0 1 36 1.5v21a1.5 1.5 0 0 1-1.5 1.5H20.857zM2 2v18h32V2H2z"/></svg>
2222
<p class="text-xs">xl</p>
2323
</span>
2424
</div>
25-
<div class="rounded overflow-hidden border-2 border-smoke mb-8">
26-
<div class="p-4 bg-smoke-lighter border-b-2 border-smoke">
27-
<div class="whitespace-pre font-mono text-slate-lighter text-sm overflow-x-scroll" v-html="highlightedCode"></div>
25+
<div class="rounded overflow-hidden border-2 border-grey-light mb-8">
26+
<div class="p-4 bg-grey-lightest border-b-2 border-grey-light">
27+
<div class="whitespace-pre font-mono text-grey text-sm overflow-x-scroll" v-html="highlightedCode"></div>
2828
</div>
2929
<div class="bg-white p-4">
3030
<slot v-if="activeScreen === 'none'" name="none"></slot>

‎docs/source/_assets/less/markdown.less‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,20 @@
55
@apply .mb-6;
66
@apply .pb-2;
77
@apply .border-b-2;
8-
@apply .border-smoke;
8+
@apply .border-grey-light;
99

1010
.subnav-link, .subnav-link& {
1111
@apply .mr-6;
1212
@apply .leading-none;
13-
@apply .text-slate-dark;
13+
@apply .text-grey-darkest;
1414
@apply .text-sm;
1515
}
1616
}
1717

1818
> hr {
1919
@apply .my-12;
2020
@apply .border-t-0 .border-r-0 .border-l-0;
21-
@apply .border-b .border-smoke;
21+
@apply .border-b .border-grey-light;
2222
}
2323

2424
> a, > p a, a& {
@@ -30,7 +30,7 @@
3030

3131
> p code, > ul li code, p& code& {
3232
@apply .inline-block;
33-
@apply .bg-smoke-lighter;
33+
@apply .bg-grey-lightest;
3434
@apply .rounded-sm;
3535
@apply .text-sm;
3636
@apply .p-1;
@@ -45,29 +45,29 @@
4545
> pre, pre& {
4646
@apply .font-mono;
4747
@apply .border-2;
48-
@apply .border-smoke;
48+
@apply .border-grey-light;
4949
@apply .rounded;
5050
font-weight: 400;
5151
}
5252

5353
> blockquote, blockquote& {
5454
@apply .italic;
55-
@apply .text-slate-dark;
55+
@apply .text-grey-darkest;
5656
@apply .text-sm;
5757
}
5858

5959
> h1, h1& {
6060
@apply .mb-1;
6161
@apply .leading-none;
62-
@apply .text-slate-darker;
62+
@apply .text-black;
6363
@apply .font-semibold;
6464
@apply .text-4xl;
6565
}
6666

6767
> h2, h2& {
6868
@apply .mt-12;
6969
@apply .mb-4;
70-
@apply .text-slate-darker;
70+
@apply .text-black;
7171
@apply .leading-none;
7272
@apply .font-semibold;
7373
@apply .text-2xl;
@@ -76,7 +76,7 @@
7676
> h3, h3& {
7777
@apply .mt-12;
7878
@apply .mb-4;
79-
@apply .text-slate-darker;
79+
@apply .text-black;
8080
@apply .leading-none;
8181
@apply .font-semibold;
8282
@apply .text-xl;
@@ -85,7 +85,7 @@
8585
> h4, h4& {
8686
@apply .mt-8;
8787
@apply .mb-0;
88-
@apply .text-slate-darker;
88+
@apply .text-black;
8989
@apply .leading-none;
9090
@apply .font-semibold;
9191
@apply .text-base;
@@ -103,14 +103,14 @@
103103
}
104104

105105
> p, p&, > blockquote > p {
106-
@apply .text-slate-dark;
106+
@apply .text-grey-darkest;
107107
@apply .mt-4;
108108
@apply .mb-4;
109109
line-height: 1.75;
110110
}
111111

112112
> ul, > ol {
113-
@apply .text-slate-dark;
113+
@apply .text-grey-darkest;
114114
@apply .m-0;
115115
@apply .mb-4;
116116
}
@@ -125,11 +125,11 @@
125125

126126
> li {
127127
@apply .my-2;
128-
@apply .text-slate-dark;
128+
@apply .text-grey-darkest;
129129
}
130130

131131
> :not(pre):not(h1):not(h2):not(h3):not(h4) > code, > pre, pre& {
132-
@apply .bg-smoke-lighter;
132+
@apply .bg-grey-lightest;
133133
@apply .text-sm;
134134
@apply .leading-normal;
135135
}

‎docs/source/_assets/less/prism.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
code[class*="language-"],
99
pre[class*="language-"] {
1010
@apply .font-mono;
11-
@apply .text-slate-dark;
11+
@apply .text-grey-darkest;
1212

1313
background: none;
1414
text-align: left;

‎docs/source/_layouts/documentation.blade.php‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@
2020

2121
@section('body')
2222
<div class="min-h-screen">
23-
<div id="sidebar" class="hidden z-50 fixed pin-y pin-l overflow-y-scroll md:overflow-visible scrolling-touch md:scrolling-auto bg-smoke-light w-4/5 md:w-full md:max-w-xs flex-none border-r-2 border-smoke md:flex flex-col">
24-
<div class="border-b border-smoke flex-none px-8 py-6">
23+
<div id="sidebar" class="hidden z-50 fixed pin-y pin-l overflow-y-scroll md:overflow-visible scrolling-touch md:scrolling-auto bg-grey-lighter w-4/5 md:w-full md:max-w-xs flex-none border-r-2 border-grey-light md:flex flex-col">
24+
<div class="border-b border-grey-light flex-none px-8 py-6">
2525
<div class="mb-4">
2626
<div class="hidden md:flex md:justify-center">
2727
<a href="/" class="flex justify-center">
@@ -33,28 +33,28 @@
3333
</p>
3434
</div>
3535
<div class="relative">
36-
<input id="docsearch" class="placeholder-grey-dark rounded bg-white border border-smoke py-2 pr-4 pl-10 block w-full appearance-none" type="text" placeholder="Search the docs">
36+
<input id="docsearch" class="placeholder-grey-dark rounded bg-white border border-grey-light py-2 pr-4 pl-10 block w-full appearance-none" type="text" placeholder="Search the docs">
3737
<div class="pointer-events-none absolute pin-y pin-l pl-3 flex items-center">
38-
<svg class="fill-current pointer-events-none text-slate w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/></svg>
38+
<svg class="fill-current pointer-events-none text-grey-darker w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/></svg>
3939
</div>
4040
</div>
4141
</div>
4242
<div class="p-8 flex-1 overflow-y-scroll">
4343
<nav id="nav" class="text-base overflow-y-scroll">
4444
@foreach ($page->navigation as $sectionName => $sectionItems)
4545
<div class="mb-8">
46-
<p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">{{ $sectionName }}</p>
46+
<p class="mb-4 text-grey-dark uppercase tracking-wide font-bold text-xs">{{ $sectionName }}</p>
4747
<ul>
4848
@foreach ($sectionItems as $name => $slugOrChildren)
4949
@if (is_string($slugOrChildren))
50-
<li class="mb-3"><a class="hover:underline {{ $page->active('/docs/' . $slugOrChildren) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/{{ $slugOrChildren }}">{{ $name }}</a></li>
50+
<li class="mb-3"><a class="hover:underline {{ $page->active('/docs/' . $slugOrChildren) ? 'text-black font-bold' : 'text-grey-darkest' }}" href="{{ $page->baseUrl }}/docs/{{ $slugOrChildren }}">{{ $name }}</a></li>
5151
@else
5252
<li class="mb-3">
53-
<a href="{{ $page->baseUrl }}/docs/{{ $slugOrChildren->first() }}" class="hover:underline block mb-2 {{ $page->anyChildrenActive($slugOrChildren) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">{{ $name }}</a>
53+
<a href="{{ $page->baseUrl }}/docs/{{ $slugOrChildren->first() }}" class="hover:underline block mb-2 {{ $page->anyChildrenActive($slugOrChildren) ? 'text-black font-bold' : 'text-grey-darkest' }}">{{ $name }}</a>
5454
<ul class="pl-4 {{ $page->anyChildrenActive($slugOrChildren) ? 'block' : 'hidden' }}">
5555
@foreach ($slugOrChildren as $title => $link)
5656
<li class="mb-3">
57-
<a class="hover:underline {{ $page->active('/docs/' . $link) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/{{ $link }}">
57+
<a class="hover:underline {{ $page->active('/docs/' . $link) ? 'text-black font-bold' : 'text-grey-darkest' }}" href="{{ $page->baseUrl }}/docs/{{ $link }}">
5858
{{ $title }}
5959
</a>
6060
</li>
@@ -68,7 +68,7 @@
6868
@endforeach
6969
</nav>
7070
</div>
71-
<div class="border-t border-smoke px-8 py-4">
71+
<div class="border-t border-grey-light px-8 py-4">
7272
<div class="flex justify-center text-grey">
7373
<a class="block flex items-center hover:text-grey-darker mr-16" href="https://github.com/tailwindcss/tailwindcss">
7474
<svg class="fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>GitHub</title><path d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"/></svg>
@@ -100,7 +100,7 @@
100100
<div class="markdown">
101101
<h1>{{ $page->title }}</h1>
102102
@if ($page->description)
103-
<div class="text-xl text-slate-light mb-4">
103+
<div class="text-xl text-grey-dark mb-4">
104104
{{ $page->description }}
105105
</div>
106106
@endif

‎docs/source/_layouts/master.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
1919
@stack('headScripts')
2020
</head>
21-
<body data-sidebar-visible="true" class="font-sans font-normal text-slate-darker leading-normal">
21+
<body data-sidebar-visible="true" class="font-sans font-normal text-black leading-normal">
2222

2323
@yield('body')
2424

‎docs/source/_partials/class-table.blade.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@
1616
<tbody class="align-baseline">
1717
@foreach ($rows as $row)
1818
<tr>
19-
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-purple-dark whitespace-no-wrap">{!! $row[0] !!}</td>
20-
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-blue-dark whitespace-pre">{!! $row[1] !!}</td>
21-
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} text-sm text-grey-darker whitespace-no-wrap lg:whitespace-normal">{!! $row[2] !!}</td>
19+
<td class="p-2 border-t {{ $loop->first ? 'border-grey-light' : 'border-grey-lighter' }} font-mono text-xs text-purple-dark whitespace-no-wrap">{!! $row[0] !!}</td>
20+
<td class="p-2 border-t {{ $loop->first ? 'border-grey-light' : 'border-grey-lighter' }} font-mono text-xs text-blue-dark whitespace-pre">{!! $row[1] !!}</td>
21+
<td class="p-2 border-t {{ $loop->first ? 'border-grey-light' : 'border-grey-lighter' }} text-sm text-grey-darker whitespace-no-wrap lg:whitespace-normal">{!! $row[2] !!}</td>
2222
</tr>
2323
@endforeach
2424
</tbody>

‎docs/source/_partials/customized-config.blade.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<div class="border-2 border-smoke rounded mb-8">
2-
<div class="bg-smoke-lighter p-4 font-mono text-sm">
1+
<div class="border-2 border-grey-light rounded mb-8">
2+
<div class="bg-grey-lightest p-4 font-mono text-sm">
33
<div class="whitespace-pre text-grey-dark">{</div>
44
<div class="whitespace-pre text-grey-light"> // ...</div>
55
<div class="whitespace-pre text-grey-dark"><span class="text-purple-dark"> {{ $key }}</span>: {</div>

0 commit comments

Comments
 (0)