Merge pull request #297 from tailwindcss/new-greys

[0.4] New grey scale, remove legacy greys

Author: adamwathan

__tests__/fixtures/tailwind-output.css

@@ -46,14 +46,14 @@ 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',
+  'black': '#22292f',
+  'grey-darkest': '#3d4852',
+  'grey-darker': '#606f7b',
+  'grey-dark': '#8795a1',
+  'grey': '#b8c2cc',
+  'grey-light': '#dae1e7',
+  'grey-lighter': '#f1f5f8',
+  'grey-lightest': '#f8fafc',
   'white': '#ffffff',
 
   'red-darkest': '#420806',

defaultConfig.stub.js

@@ -12,7 +12,7 @@ const app = new Vue({
 })
 
 Prism.highlightAll()
-anchors.options = { placement: 'left', class: 'text-slate-light' }
+anchors.options = { placement: 'left', class: 'text-grey-dark' }
 anchors.add()
 
 // Add shortcut to search input when pressing the "/" key

docs/source/_assets/js/app.js

@@ -1,30 +1,30 @@
 <template>
   <div>
     <div class="flex items-end justify-center mb-2 bg-white">
-      <span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'none' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'none'" >
+      <span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'none' ? 'text-grey-darkest' : 'text-grey-dark'" @click="activeScreen = 'none'" >
         <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>
         <p class="text-xs">all</p>
       </span>
-      <span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'sm' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'sm'" >
+      <span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'sm' ? 'text-grey-darkest' : 'text-grey-dark'" @click="activeScreen = 'sm'" >
         <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>
         <p class="text-xs">sm</p>
       </span>
-      <span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'md' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'md'" >
+      <span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'md' ? 'text-grey-darkest' : 'text-grey-dark'" @click="activeScreen = 'md'" >
         <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>
         <p class="text-xs">md</p>
       </span>
-      <span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'lg' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'lg'" >
+      <span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'lg' ? 'text-grey-darkest' : 'text-grey-dark'" @click="activeScreen = 'lg'" >
         <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>
         <p class="text-xs">lg</p>
       </span>
-      <span class="inline-block text-center cursor-pointer select-none" :class="activeScreen === 'xl' ? 'text-slate-dark' : 'text-slate-light'" @click="activeScreen = 'xl'" >
+      <span class="inline-block text-center cursor-pointer select-none" :class="activeScreen === 'xl' ? 'text-grey-darkest' : 'text-grey-dark'" @click="activeScreen = 'xl'" >
         <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>
         <p class="text-xs">xl</p>
       </span>
     </div>
-    <div class="rounded overflow-hidden border-2 border-smoke mb-8">
-      <div class="p-4 bg-smoke-lighter border-b-2 border-smoke">
-        <div class="whitespace-pre font-mono text-slate-lighter text-sm overflow-x-scroll" v-html="highlightedCode"></div>
+    <div class="rounded overflow-hidden border-2 border-grey-light mb-8">
+      <div class="p-4 bg-grey-lightest border-b-2 border-grey-light">
+        <div class="whitespace-pre font-mono text-grey text-sm overflow-x-scroll" v-html="highlightedCode"></div>
       </div>
       <div class="bg-white p-4">
         <slot v-if="activeScreen === 'none'" name="none"></slot>

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

@@ -5,20 +5,20 @@
     @apply .mb-6;
     @apply .pb-2;
     @apply .border-b-2;
-    @apply .border-smoke;
+    @apply .border-grey-light;
 
     .subnav-link, .subnav-link& {
       @apply .mr-6;
       @apply .leading-none;
-      @apply .text-slate-dark;
+      @apply .text-grey-darkest;
       @apply .text-sm;
     }
   }
 
   > hr {
     @apply .my-12;
     @apply .border-t-0 .border-r-0 .border-l-0;
-    @apply .border-b .border-smoke;
+    @apply .border-b .border-grey-light;
   }
 
   > a, > p a, a& {
@@ -30,7 +30,7 @@
 
   > p code, > ul li code, p& code& {
     @apply .inline-block;
-    @apply .bg-smoke-lighter;
+    @apply .bg-grey-lightest;
     @apply .rounded-sm;
     @apply .text-sm;
     @apply .p-1;
@@ -45,29 +45,29 @@
   > pre, pre& {
     @apply .font-mono;
     @apply .border-2;
-    @apply .border-smoke;
+    @apply .border-grey-light;
     @apply .rounded;
     font-weight: 400;
   }
 
   > blockquote, blockquote& {
     @apply .italic;
-    @apply .text-slate-dark;
+    @apply .text-grey-darkest;
     @apply .text-sm;
   }
 
   > h1, h1& {
     @apply .mb-1;
     @apply .leading-none;
-    @apply .text-slate-darker;
+    @apply .text-black;
     @apply .font-semibold;
     @apply .text-4xl;
   }
 
   > h2, h2& {
     @apply .mt-12;
     @apply .mb-4;
-    @apply .text-slate-darker;
+    @apply .text-black;
     @apply .leading-none;
     @apply .font-semibold;
     @apply .text-2xl;
@@ -76,7 +76,7 @@
   > h3, h3& {
     @apply .mt-12;
     @apply .mb-4;
-    @apply .text-slate-darker;
+    @apply .text-black;
     @apply .leading-none;
     @apply .font-semibold;
     @apply .text-xl;
@@ -85,7 +85,7 @@
   > h4, h4& {
     @apply .mt-8;
     @apply .mb-0;
-    @apply .text-slate-darker;
+    @apply .text-black;
     @apply .leading-none;
     @apply .font-semibold;
     @apply .text-base;
@@ -103,14 +103,14 @@
   }
 
   > p, p&, > blockquote > p {
-    @apply .text-slate-dark;
+    @apply .text-grey-darkest;
     @apply .mt-4;
     @apply .mb-4;
     line-height: 1.75;
   }
 
   > ul, > ol {
-    @apply .text-slate-dark;
+    @apply .text-grey-darkest;
     @apply .m-0;
     @apply .mb-4;
   }
@@ -125,11 +125,11 @@
 
   > li {
     @apply .my-2;
-    @apply .text-slate-dark;
+    @apply .text-grey-darkest;
   }
 
   > :not(pre):not(h1):not(h2):not(h3):not(h4) > code, > pre, pre& {
-    @apply .bg-smoke-lighter;
+    @apply .bg-grey-lightest;
     @apply .text-sm;
     @apply .leading-normal;
   }

docs/source/_assets/less/markdown.less

@@ -8,7 +8,7 @@
 code[class*="language-"],
 pre[class*="language-"] {
   @apply .font-mono;
-  @apply .text-slate-dark;
+  @apply .text-grey-darkest;
 
   background: none;
   text-align: left;

docs/source/_assets/less/prism.less

@@ -20,8 +20,8 @@
 
 @section('body')
 <div class="min-h-screen">
-  <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">
-    <div class="border-b border-smoke flex-none px-8 py-6">
+  <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">
+    <div class="border-b border-grey-light flex-none px-8 py-6">
       <div class="mb-4">
         <div class="hidden md:flex md:justify-center">
           <a href="/" class="flex justify-center">
@@ -33,28 +33,28 @@
         </p>
       </div>
       <div class="relative">
-        <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">
+        <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">
         <div class="pointer-events-none absolute pin-y pin-l pl-3 flex items-center">
-          <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>
+          <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>
         </div>
       </div>
     </div>
     <div class="p-8 flex-1 overflow-y-scroll">
       <nav id="nav" class="text-base overflow-y-scroll">
         @foreach ($page->navigation as $sectionName => $sectionItems)
         <div class="mb-8">
-          <p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">{{ $sectionName }}</p>
+          <p class="mb-4 text-grey-dark uppercase tracking-wide font-bold text-xs">{{ $sectionName }}</p>
           <ul>
             @foreach ($sectionItems as $name => $slugOrChildren)
               @if (is_string($slugOrChildren))
-                <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>
+                <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>
               @else
                 <li class="mb-3">
-                  <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>
+                  <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>
                   <ul class="pl-4 {{ $page->anyChildrenActive($slugOrChildren) ? 'block' : 'hidden' }}">
                   @foreach ($slugOrChildren as $title => $link)
                     <li class="mb-3">
-                      <a class="hover:underline {{ $page->active('/docs/' . $link) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/{{ $link }}">
+                      <a class="hover:underline {{ $page->active('/docs/' . $link) ? 'text-black font-bold' : 'text-grey-darkest' }}" href="{{ $page->baseUrl }}/docs/{{ $link }}">
                         {{ $title }}
                       </a>
                     </li>
@@ -68,7 +68,7 @@
         @endforeach
       </nav>
     </div>
-    <div class="border-t border-smoke px-8 py-4">
+    <div class="border-t border-grey-light px-8 py-4">
       <div class="flex justify-center text-grey">
         <a class="block flex items-center hover:text-grey-darker mr-16" href="https://github.com/tailwindcss/tailwindcss">
           <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 @@
         <div class="markdown">
           <h1>{{ $page->title }}</h1>
           @if ($page->description)
-            <div class="text-xl text-slate-light mb-4">
+            <div class="text-xl text-grey-dark mb-4">
               {{ $page->description }}
             </div>
           @endif

docs/source/_layouts/documentation.blade.php

@@ -18,7 +18,7 @@
   <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
   @stack('headScripts')
 </head>
-<body data-sidebar-visible="true" class="font-sans font-normal text-slate-darker leading-normal">
+<body data-sidebar-visible="true" class="font-sans font-normal text-black leading-normal">
 
 @yield('body')
 

docs/source/_layouts/master.blade.php

@@ -16,9 +16,9 @@
       <tbody class="align-baseline">
         @foreach ($rows as $row)
         <tr>
-          <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>
-          <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>
-          <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>
+          <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>
+          <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>
+          <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>
         </tr>
         @endforeach
       </tbody>

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

@@ -1,5 +1,5 @@
-<div class="border-2 border-smoke rounded mb-8">
-  <div class="bg-smoke-lighter p-4 font-mono text-sm">
+<div class="border-2 border-grey-light rounded mb-8">
+  <div class="bg-grey-lightest p-4 font-mono text-sm">
     <div class="whitespace-pre text-grey-dark">{</div>
     <div class="whitespace-pre text-grey-light">  // ...</div>
     <div class="whitespace-pre text-grey-dark"><span class="text-purple-dark">  {{ $key }}</span>: {</div>