Merge pull request tailwindlabs#99 from eduarguz/next-text-gray-colors

1.0 - Replaces text-gray-{} colors

Author: adamwathan

source/_assets/js/components/ClassTable.vue

@@ -3,16 +3,16 @@
     <table class="w-full text-left table-collapse">
       <thead>
         <tr>
-          <th class="text-sm font-semibold text-grey-darker p-2 bg-gray-100">Class</th>
-          <th class="text-sm font-semibold text-grey-darker p-2 bg-gray-100">Properties</th>
-          <!-- <th class="text-sm font-semibold text-grey-darker p-2 bg-gray-100">Description</th> -->
+          <th class="text-sm font-semibold text-gray-700 p-2 bg-gray-100">Class</th>
+          <th class="text-sm font-semibold text-gray-700 p-2 bg-gray-100">Properties</th>
+          <!-- <th class="text-sm font-semibold text-gray-700 p-2 bg-gray-100">Description</th> -->
         </tr>
       </thead>
       <tbody class="align-baseline">
         <tr v-for="(row, i) in visibleRows">
           <td :class="i === 0 ? 'border-smoke' : 'border-smoke-light'" class="p-2 border-t font-mono text-xs text-purple-dark whitespace-no-wrap">{{ row[0] }}</td>
           <td :class="i === 0 ? 'border-smoke' : 'border-smoke-light'" class="p-2 border-t font-mono text-xs text-blue-dark whitespace-pre">{{ row[1] }}</td>
-          <!-- <td :class="i === 0 ? 'border-smoke' : 'border-smoke-light'" class="p-2 border-t text-sm text-grey-darker">{{ row[2] }}</td> -->
+          <!-- <td :class="i === 0 ? 'border-smoke' : 'border-smoke-light'" class="p-2 border-t text-sm text-gray-700">{{ row[2] }}</td> -->
         </tr>
       </tbody>
     </table>

source/_assets/js/components/ResponsiveCodeSample.vue

@@ -1,28 +1,28 @@
 <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-gray-900' : 'text-gray-600'" @click="activeScreen = 'none'" >
+      <span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'none' ? 'text-gray-800' : 'text-gray-600'" @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-gray-900' : 'text-gray-600'" @click="activeScreen = 'sm'" >
+      <span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'sm' ? 'text-gray-800' : 'text-gray-600'" @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-gray-900' : 'text-gray-600'" @click="activeScreen = 'md'" >
+      <span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'md' ? 'text-gray-800' : 'text-gray-600'" @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-gray-900' : 'text-gray-600'" @click="activeScreen = 'lg'" >
+      <span class="inline-block text-center cursor-pointer select-none mr-8" :class="activeScreen === 'lg' ? 'text-gray-800' : 'text-gray-600'" @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-gray-900' : 'text-gray-600'" @click="activeScreen = 'xl'" >
+      <span class="inline-block text-center cursor-pointer select-none" :class="activeScreen === 'xl' ? 'text-gray-800' : 'text-gray-600'" @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 border-gray-300 mb-8">
+    <div class="rounded overflow-hidden border border-grey-light mb-8">
       <div class="p-4 bg-gray-100 border-b border-gray-300">
         <div class="whitespace-pre font-mono text-gray-500 text-xs overflow-x-auto" v-html="highlightedCode"></div>
       </div>

source/_layouts/documentation.blade.php

@@ -51,12 +51,12 @@
 
 
         <div id="sidebar-open" class="flex px-6 items-center lg:hidden">
-          <svg class="fill-current w-4 h-4 cursor-pointer text-grey" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
+          <svg class="fill-current w-4 h-4 cursor-pointer text-gray-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
         </div>
 
 
         <div id="sidebar-close" class="hidden flex px-6 items-center lg:hidden">
-          <svg class="fill-current w-4 h-4 cursor-pointer text-grey" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></svg>
+          <svg class="fill-current w-4 h-4 cursor-pointer text-gray-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></svg>
         </div>
 
         {{-- Links section --}}

source/_partials/background-color-class-table.blade.php

@@ -9,10 +9,10 @@
     <table class="relative w-full text-left table-collapse">
       <thead>
         <tr>
-          <th class="z-20 sticky top-0 text-sm font-semibold text-grey-darker bg-gray-100 p-0">
+          <th class="z-20 sticky top-0 text-sm font-semibold text-gray-700 bg-gray-100 p-0">
             <div class="p-2 border-b border-grey-light">Class</div>
           </th>
-          <th class="relative z-20 sticky top-0 text-sm font-semibold text-grey-darker bg-gray-100 p-0" colspan="2">
+          <th class="relative z-20 sticky top-0 text-sm font-semibold text-gray-700 bg-gray-100 p-0" colspan="2">
             <div class="sm:hidden absolute inset-0 p-2 border-b border-grey-light"></div>
             <div class="hidden sm:block p-2 border-b border-grey-light">Properties</div>
           </th>

source/_partials/border-color-class-table.blade.php

@@ -9,10 +9,10 @@
     <table class="relative w-full text-left table-collapse">
       <thead>
         <tr>
-          <th class="z-20 sticky top-0 text-sm font-semibold text-grey-darker bg-gray-100 p-0">
+          <th class="z-20 sticky top-0 text-sm font-semibold text-gray-700 bg-gray-100 p-0">
             <div class="p-2 border-b border-grey-light">Class</div>
           </th>
-          <th class="relative z-20 sticky top-0 text-sm font-semibold text-grey-darker bg-gray-100 p-0" colspan="2">
+          <th class="relative z-20 sticky top-0 text-sm font-semibold text-gray-700 bg-gray-100 p-0" colspan="2">
             <div class="sm:hidden absolute inset-0 p-2 border-b border-grey-light"></div>
             <div class="hidden sm:block p-2 border-b border-grey-light">Properties</div>
           </th>

source/_partials/class-table.blade.php

@@ -9,8 +9,8 @@
     <table class="w-full text-left table-collapse">
       <thead>
         <tr>
-          <th class="text-sm font-semibold text-grey-darker p-2 bg-gray-100">Class</th>
-          <th class="text-sm font-semibold text-grey-darker p-2 bg-gray-100">Properties</th>
+          <th class="text-sm font-semibold text-gray-700 p-2 bg-gray-100">Class</th>
+          <th class="text-sm font-semibold text-gray-700 p-2 bg-gray-100">Properties</th>
         </tr>
       </thead>
       <tbody class="align-baseline">

source/_partials/text-color-class-table.blade.php

@@ -9,10 +9,10 @@
     <table class="relative w-full text-left table-collapse">
       <thead>
         <tr>
-          <th class="z-20 sticky top-0 text-sm font-semibold text-grey-darker bg-gray-100 p-0">
+          <th class="z-20 sticky top-0 text-sm font-semibold text-gray-700 bg-gray-100 p-0">
             <div class="p-2 border-b border-grey-light">Class</div>
           </th>
-          <th class="relative z-20 sticky top-0 text-sm font-semibold text-grey-darker bg-gray-100 p-0" colspan="2">
+          <th class="relative z-20 sticky top-0 text-sm font-semibold text-gray-700 bg-gray-100 p-0" colspan="2">
             <div class="sm:hidden absolute inset-0 p-2 border-b border-grey-light"></div>
             <div class="hidden sm:block p-2 border-b border-grey-light">Properties</div>
           </th>

source/docs/border-width.blade.md

@@ -17,21 +17,21 @@ For example, `.border` would add a `1px` border to all sides of the element, whe
 
 <div class="flex items-start mt-8 text-sm leading-none">
   <div class="pr-12">
-    <div class="mb-3 text-grey-darker uppercase">Class</div>
+    <div class="mb-3 text-gray-700 uppercase">Class</div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">border</code></div>
   </div>
   <div class="pl-12 pr-12 border-l">
-    <div class="mb-3 text-grey-darker"><span class="uppercase">Side</span> <span class="text-grey-dark text-xs">(optional)</span></div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-gray-200">&nbsp;</code> All <em class="text-xs text-grey-dark">(default)</em></div>
+    <div class="mb-3 text-gray-700"><span class="uppercase">Side</span> <span class="text-gray-600 text-xs">(optional)</span></div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-gray-200">&nbsp;</code> All <em class="text-xs text-gray-600">(default)</em></div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">t</code> Top</div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">r</code> Right</div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">b</code> Bottom</div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">l</code> Left</div>
   </div>
   <div class="pl-12 border-l">
-    <div class="mb-3 text-grey-darker"><span class="uppercase">Width</span> <span class="text-grey-dark text-xs">(optional)</span></div>
+    <div class="mb-3 text-gray-700"><span class="uppercase">Width</span> <span class="text-gray-600 text-xs">(optional)</span></div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">0</code> 0px</div>
-    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-gray-200">&nbsp;</code> 1px <em class="text-xs text-grey-dark">(default)</em></div>
+    <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-gray-200">&nbsp;</code> 1px <em class="text-xs text-gray-600">(default)</em></div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">2</code> 2px</div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">4</code> 4px</div>
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">8</code> 8px</div>

source/docs/configuration.blade.md

@@ -17,7 +17,7 @@ It's important to understand that unlike other CSS frameworks you might have use
 Generate a Tailwind config file for your project using the Tailwind CLI utility included when you install the `tailwindcss` npm package:
 
 <div class="bg-gray-100 font-mono text-sm p-4">
-  <div class="text-purple-dark">./node_modules/.bin/tailwind <span class="text-blue-dark">init</span> <span class="text-grey-dark">[filename]</span></div>
+  <div class="text-purple-dark">./node_modules/.bin/tailwind <span class="text-blue-dark">init</span> <span class="text-gray-600">[filename]</span></div>
 </div>
 
 By default, `tailwind init` will generate a `tailwind.config.js` config file at the root of your project, but feel free to name this file differently or store it in a different location if you prefer.

source/docs/container.blade.md

@@ -14,31 +14,31 @@ description: "A component for fixing an element's width to the current breakpoin
     </colgroup>
     <thead>
       <tr>
-        <th class="text-sm font-semibold text-grey-darker p-2 bg-gray-100">Class</th>
-        <th class="text-sm font-semibold text-grey-darker p-2 bg-gray-100">Breakpoint</th>
-        <th class="text-sm font-semibold text-grey-darker p-2 bg-gray-100">Properties</th>
+        <th class="text-sm font-semibold text-gray-700 p-2 bg-gray-100">Class</th>
+        <th class="text-sm font-semibold text-gray-700 p-2 bg-gray-100">Breakpoint</th>
+        <th class="text-sm font-semibold text-gray-700 p-2 bg-gray-100">Properties</th>
       </tr>
     </thead>
     <tbody class="align-baseline">
       <tr>
         <td class="p-2 border-t border-grey-light font-mono text-xs text-purple-dark" rowspan="5">.container</td>
-        <td class="p-2 border-t border-grey-light font-mono text-xs text-grey-dark"><span class="italic">None</span></td>
+        <td class="p-2 border-t border-grey-light font-mono text-xs text-gray-600"><span class="italic">None</span></td>
         <td class="p-2 border-t border-grey-light font-mono text-xs text-blue-dark">width: 100%;</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-grey-light font-mono text-xs text-grey-darker">sm <span class="text-grey-dark italic">(640px)</span></td>
+        <td class="p-2 border-t border-grey-light font-mono text-xs text-gray-700">sm <span class="text-gray-600 italic">(640px)</span></td>
         <td class="p-2 border-t border-grey-light font-mono text-xs text-blue-dark">max-width: 640px;</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-grey-light font-mono text-xs text-grey-darker">md <span class="text-grey-dark italic">(768px)</span></td>
+        <td class="p-2 border-t border-grey-light font-mono text-xs text-gray-700">md <span class="text-gray-600 italic">(768px)</span></td>
         <td class="p-2 border-t border-grey-light font-mono text-xs text-blue-dark">max-width: 768px;</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-grey-light font-mono text-xs text-grey-darker">lg <span class="text-grey-dark italic">(1024px)</span></td>
+        <td class="p-2 border-t border-grey-light font-mono text-xs text-gray-700">lg <span class="text-gray-600 italic">(1024px)</span></td>
         <td class="p-2 border-t border-grey-light font-mono text-xs text-blue-dark">max-width: 1024px;</td>
       </tr>
       <tr>
-        <td class="p-2 border-t border-grey-light font-mono text-xs text-grey-darker">xl <span class="text-grey-dark italic">(1280px)</span></td>
+        <td class="p-2 border-t border-grey-light font-mono text-xs text-gray-700">xl <span class="text-gray-600 italic">(1280px)</span></td>
         <td class="p-2 border-t border-grey-light font-mono text-xs text-blue-dark">max-width: 1280px;</td>
       </tr>
     </tbody>