Merge pull request #224 from nothingworksinc/new-customized-config-layout

Use diff style highlighting for config customization sections

docs/source/_assets/less/prism.less

@@ -72,7 +72,7 @@ pre[class*="language-"] {
 .token.prolog,
 .token.doctype,
 .token.cdata {
-    @apply .text-slate-lighter;
+    @apply .text-grey;
 }
 
 .token.punctuation {
@@ -89,8 +89,19 @@ pre[class*="language-"] {
 .token.boolean,
 .token.number,
 .token.constant,
-.token.symbol,
+.token.symbol {
+    @apply .text-blue-dark;
+}
+
+code.language-diff, pre.language-diff {
+    @apply .text-grey-darker;
+}
+
 .token.deleted {
+    @apply .text-grey;
+}
+
+.token.inserted {
     @apply .text-blue-dark;
 }
 

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

@@ -1,12 +1,21 @@
 <div class="border-2 border-smoke rounded mb-8">
-    <div class="md:flex">
-        <div class="bg-smoke-lighter border-b-2 border-smoke md:w-1/2 md:border-b-0 md:border-r-2 md:border-smoke">
-            <div class="px-4 py-3 bg-white font-semibold border-b-2 border-smoke-light text-smoke-darker">Default values</div>
-            <pre class="bg-smoke markdown language-js"><code>{{ $default }}</code></pre>
-        </div>
-        <div class="bg-smoke-lighter md:w-1/2">
-            <div class="px-4 py-3 bg-white font-semibold border-b-2 border-smoke-light text-smoke-darker">Customized example</div>
-            <pre class="bg-smoke markdown language-js"><code>{{ $customized }}</code></pre>
-        </div>
+    <div class="bg-smoke-lighter 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>
+        <div>{!! collect(explode("\n", $slot))->map(function ($line) {
+            if (starts_with($line, '+')) {
+                return '<div class="text-blue-dark"><span class="text-blue-light">+</span>&nbsp;&nbsp;&nbsp;' . e(trim(substr($line, 1))) . '</div>';
+
+            }
+
+            if (starts_with($line, '-')) {
+                return '<div class="text-grey"><span class="text-grey">-</span>&nbsp;&nbsp;&nbsp;' . e(trim(substr($line, 1))) . '</div>';
+            }
+
+            return '<div class="text-grey-darker">&nbsp;&nbsp;&nbsp;&nbsp;' . e(trim($line)) . '</div>';
+        })->implode("\n") !!}</div>
+        <div class="whitespace-pre text-grey-dark">{{ '  }' }}</div>
+        <div class="whitespace-pre text-grey-dark">{{ '}' }}</div>
     </div>
 </div>

docs/source/opacity.blade.md

@@ -111,37 +111,21 @@ For more information about Tailwind's responsive design features, check out the
 
 ## Customizing
 
-By default Tailwind provides a sensible numeric opacity scale. You can, of course, modify these values as needed. This is done in the `opacity` section of your Tailwind config.
+By default Tailwind provides five opacity utilities based on a simple numeric scale. You change, add, or remove these by editing the `opacity` section of your Tailwind config.
 
-@component('_partials.customized-config')
-@slot('default')
-{
-  // ...
-  opacity: {
-    '0': '0',
-    '25': '.25',
-    '50': '.5',
-    '75': '.75',
-    '100': '1',
-  }
-}
-@endslot
-@slot('customized')
-{
-  // ...
-  opacity: {
-    'none': '0',
-    '10': '.1',
-    '20': '.2',
-    '30': '.3',
-    '40': '.4',
-    '50': '.5',
-    '60': '.6',
-    '70': '.7',
-    '80': '.8',
-    '90': '.9',
-    '100': '1',
-  },
-}
-@endslot
+@component('_partials.customized-config', ['key' => 'opacity'])
+  '0': '0',
+- '25': '.25',
+- '50': '.5',
+- '75': '.75',
++ '10': '.1',
++ '20': '.2',
++ '30': '.3',
++ '40': '.4',
++ '50': '.5',
++ '60': '.6',
++ '70': '.7',
++ '80': '.8',
++ '90': '.9',
+  '100': '1',
 @endcomponent

docs/source/shadows.blade.md

@@ -116,32 +116,17 @@ For more information about Tailwind's responsive design features, check out the
 
 ## Customizing
 
-By default Tailwind provides three drop shadows and one inner shadow. You can, of course, modify these values as needed. This is done in the `shadows` section of your Tailwind config. As you can see from the defaults we provide, it's possible to apply multiple shadows per utility using comma separation.
+By default Tailwind provides three drop shadow utilities, one inner shadow utility, and a utility for removing existing shadows. You change, add, or remove these by editing the `shadows` section of your Tailwind config.
 
-Take note that a `default` shadow is required. This is the value used for the non-suffixed version of this utility (`.shadow`).
+If a `default` shadow is provided, it will be used for the non-suffixed `.shadow` utility. Any other keys will be used as suffixes, for example the key `'2'` will create a corresponding `.shadow-2` utility.
 
-@component('_partials.customized-config')
-@slot('default')
-{
-  // ...
-  shadows: {
-    default: '0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.15)',
-    'md': '0 3px 6px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.13)',
-    'lg': '0 10px 20px rgba(0,0,0,.13), 0 6px 6px rgba(0,0,0,.13)',
-    'inner': 'inset 0 1px 2px rgba(0, 0, 0, 0.05)',
-    'none': 'none',
-  },
-}
-@endslot
-@slot('customized')
-{
-  // ...
-  shadows: {
-    default: '0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.15)',
-    'big': '0 3px 6px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.13)',
-    'huge': '0 10px 20px rgba(0,0,0,.13), 0 6px 6px rgba(0,0,0,.13)',
-    'none': 'none',
-  },
-}
-@endslot
+@component('_partials.customized-config', ['key' => 'shadows'])
+- default: '0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.15)',
+- 'md': '0 3px 6px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.13)',
+- 'lg': '0 10px 20px rgba(0,0,0,.13), 0 6px 6px rgba(0,0,0,.13)',
+- 'inner': 'inset 0 1px 2px rgba(0, 0, 0, 0.05)',
++ '1': '0 2px 4px rgba(0,0,0,0.05)',
++ '2': '0 4px 8px rgba(0,0,0,0.1)',
++ '3': '0 8px 16px rgba(0,0,0,0.15)',
+  'none': 'none',
 @endcomponent

docs/source/z-index.blade.md

@@ -160,40 +160,18 @@ For more information about Tailwind's responsive design features, check out the
 
 ## Customizing
 
-By default Tailwind provides a sensible numeric z-index scale. You can, of course, modify these values as needed. This is done in the `zIndex` section of your Tailwind config.
+By default Tailwind provides six numeric `z-index` utilities and an `auto` utility. You change, add, or remove these by editing the `zIndex` section of your Tailwind config.
 
-@component('_partials.customized-config')
-@slot('default')
-{
-  // ...
-  zIndex: {
-    '0': 0,
-    '10': 10,
-    '20': 20,
-    '30': 30,
-    '40': 40,
-    '50': 50,
-    'auto': 'auto',
-  },
-}
-@endslot
-@slot('customized')
-{
-  // ...
-  zIndex: {
-    '0': 0,
-    '10': 10,
-    '20': 20,
-    '30': 30,
-    '40': 40,
-    '50': 50,
-    '60': 60,
-    '70': 70,
-    '80': 80,
-    '90': 90,
-    '100': 100,
-    'auto': 'auto',
-  },
-}
-@endslot
+@component('_partials.customized-config', ['key' => 'zIndex'])
+  '0': 0,
+- '10': 10,
+- '20': 20,
+- '30': 30,
+- '40': 40,
+- '50': 50,
++ '25': 25,
++ '50': 50,
++ '75': 75,
++ '100': 100,
+'auto': 'auto',
 @endcomponent