From 1b048a1f10ffca6f8d677c4bd8fa79fc231db336 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Fri, 18 Aug 2017 14:44:08 -0400
Subject: [PATCH] Make buttons generatable, add text hovers

---
 docs/config.php                       |   1 +
 docs/source/examples.blade.php        | 155 ++++----------------------
 src/generators.less                   |   1 +
 src/generators/text-colors-hover.less |  17 +++
 src/utilities/text.less               |   1 +
 5 files changed, 39 insertions(+), 136 deletions(-)
 create mode 100644 src/generators/text-colors-hover.less

diff --git a/docs/config.php b/docs/config.php
index 69478b647..b3db65f4e 100644
--- a/docs/config.php
+++ b/docs/config.php
@@ -4,4 +4,5 @@ return [
     'baseUrl' => '',
     'production' => false,
     'collections' => [],
+    'colors' => ['red', 'orange', 'yellow', 'green', 'teal', 'blue', 'indigo', 'purple', 'pink']
 ];
diff --git a/docs/source/examples.blade.php b/docs/source/examples.blade.php
index 95c216603..67aa6926c 100644
--- a/docs/source/examples.blade.php
+++ b/docs/source/examples.blade.php
@@ -7,90 +7,21 @@
 
 <h2 class="markdown">Alerts</h2>
 
-<div class="bg-red-lightest border border-red-light rounded p-4 mb-4">
-    <div class="text-medium text-red-dark">
+@foreach($page->colors as $color)
+<div class="bg-{{$color}}-lightest border border-{{$color}}-light rounded p-4 mb-4">
+    <div class="text-medium text-{{$color}}-dark">
         Alert message
     </div>
-    <div class="text-red-dark">
-        Some additional text to explain what happened.
-    </div>
-</div>
-
-<div class="bg-orange-lightest border border-orange-light rounded p-4 mb-4">
-    <div class="text-medium text-orange-dark">
-        Alert message
-    </div>
-    <div class="text-orange-dark">
-        Some additional text to explain what happened.
-    </div>
-</div>
-
-
-<div class="bg-yellow-lightest border border-yellow-light rounded p-4 mb-4">
-    <div class="text-medium text-yellow-dark">
-        Alert message
-    </div>
-    <div class="text-yellow-dark">
-        Some additional text to explain what happened.
-    </div>
-</div>
-
-<div class="bg-green-lightest border border-green-light rounded p-4 mb-4">
-    <div class="text-medium text-green-dark">
-        Alert message
-    </div>
-    <div class="text-green-dark">
-        Some additional text to explain what happened.
-    </div>
-</div>
-
-<div class="bg-teal-lightest border border-teal-light rounded p-4 mb-4">
-    <div class="text-medium text-teal-dark">
-        Alert message
-    </div>
-    <div class="text-teal-dark">
-        Some additional text to explain what happened.
-    </div>
-</div>
-
-<div class="bg-blue-lightest border border-blue-light rounded p-4 mb-4">
-    <div class="text-medium text-blue-dark">
-        Alert message
-    </div>
-    <div class="text-blue-dark">
-        Some additional text to explain what happened.
-    </div>
-</div>
-
-<div class="bg-indigo-lightest border border-indigo-light rounded p-4 mb-4">
-    <div class="text-medium text-indigo-dark">
-        Alert message
-    </div>
-    <div class="text-indigo-dark">
-        Some additional text to explain what happened.
-    </div>
-</div>
-
-<div class="bg-purple-lightest border border-purple-light rounded p-4 mb-4">
-    <div class="text-medium text-purple-dark">
-        Alert message
-    </div>
-    <div class="text-purple-dark">
-        Some additional text to explain what happened.
-    </div>
-</div>
-
-<div class="bg-pink-lightest border border-pink-light rounded p-4 mb-4">
-    <div class="text-medium text-pink-dark">
-        Alert message
-    </div>
-    <div class="text-pink-dark">
+    <div class="text-{{$color}}-dark">
         Some additional text to explain what happened.
     </div>
 </div>
+@endforeach
 
 <h2 class="markdown">Buttons</h2>
 
+<h3 class="markdown">Solid</h3>
+
 <div class="mb-4">
     <button class="text-medium text-dark rounded py-2 px-4 bg-light mr-4">
         Save
@@ -113,78 +44,30 @@
         Save
     </button>
 </div>
+
+@foreach($page->colors as $color)
 <div class="mb-4">
-    <button class="text-medium text-light rounded py-2 px-4 bg-red hover-bg-red-dark mr-4">
+    <button class="text-medium text-light rounded py-2 px-4 bg-{{$color}} hover-bg-{{$color}}-dark mr-4">
         Save
     </button>
-    <button class="text-medium text-light rounded py-2 px-4 bg-red-light mr-4">
+    <button class="text-medium text-light rounded py-2 px-4 bg-{{$color}}-light mr-4">
         Disabled
     </button>
 </div>
+@endforeach
+
+<h3 class="markdown">Outline</h3>
+
+@foreach($page->colors as $color)
 <div class="mb-4">
-    <button class="text-medium text-light rounded py-2 px-4 bg-orange hover-bg-orange-dark mr-4">
+    <button class="text-medium text-light rounded py-2 px-4 text-{{$color}} hover-text-light border border-{{$color}} hover-bg-{{$color}} mr-4">
         Save
     </button>
-    <button class="text-medium text-light rounded py-2 px-4 bg-orange-light mr-4">
-        Disabled
-    </button>
-</div>
-<div class="mb-4">
-    <button class="text-medium text-light rounded py-2 px-4 bg-yellow hover-bg-yellow-dark mr-4">
-        Save
-    </button>
-    <button class="text-medium text-light rounded py-2 px-4 bg-yellow-light mr-4">
-        Disabled
-    </button>
-</div>
-<div class="mb-4">
-    <button class="text-medium text-light rounded py-2 px-4 bg-green hover-bg-green-dark mr-4">
-        Save
-    </button>
-    <button class="text-medium text-light rounded py-2 px-4 bg-green-light mr-4">
-        Disabled
-    </button>
-</div>
-<div class="mb-4">
-    <button class="text-medium text-light rounded py-2 px-4 bg-teal hover-bg-teal-dark mr-4">
-        Save
-    </button>
-    <button class="text-medium text-light rounded py-2 px-4 bg-teal-light mr-4">
-        Disabled
-    </button>
-</div>
-<div class="mb-4">
-    <button class="text-medium text-light rounded py-2 px-4 bg-blue hover-bg-blue-dark mr-4">
-        Save
-    </button>
-    <button class="text-medium text-light rounded py-2 px-4 bg-blue-light mr-4">
-        Disabled
-    </button>
-</div>
-<div class="mb-4">
-    <button class="text-medium text-light rounded py-2 px-4 bg-indigo hover-bg-indigo-dark mr-4">
-        Save
-    </button>
-    <button class="text-medium text-light rounded py-2 px-4 bg-indigo-light mr-4">
-        Disabled
-    </button>
-</div>
-<div class="mb-4">
-    <button class="text-medium text-light rounded py-2 px-4 bg-purple hover-bg-purple-dark mr-4">
-        Save
-    </button>
-    <button class="text-medium text-light rounded py-2 px-4 bg-purple-light mr-4">
-        Disabled
-    </button>
-</div>
-<div class="mb-4">
-    <button class="text-medium text-light rounded py-2 px-4 bg-pink hover-bg-pink-dark mr-4">
-        Save
-    </button>
-    <button class="text-medium text-light rounded py-2 px-4 bg-pink-light mr-4">
+    <button class="text-medium text-light rounded py-2 px-4 text-{{$color}}-light border border-{{$color}}-light mr-4">
         Disabled
     </button>
 </div>
+@endforeach
 
 <h2 class="markdown">Cards</h2>
 
diff --git a/src/generators.less b/src/generators.less
index 56e7eaad7..040769466 100644
--- a/src/generators.less
+++ b/src/generators.less
@@ -16,6 +16,7 @@
 @import "generators/spacing-margin";
 @import "generators/spacing-pull";
 @import "generators/text-colors";
+@import "generators/text-colors-hover";
 @import "generators/text-leading";
 @import "generators/text-sizes";
 @import "generators/text-tracking";
diff --git a/src/generators/text-colors-hover.less b/src/generators/text-colors-hover.less
new file mode 100644
index 000000000..8b1c0f277
--- /dev/null
+++ b/src/generators/text-colors-hover.less
@@ -0,0 +1,17 @@
+.define-text-hover-colors(@variants) {
+  .generate-utility-variants('hover-text'; @variants; {
+    &:hover { color: extract(@__variant-value, 2); }
+  });
+}
+
+.define-text-hover-colors(@variants; none) {
+  .define-text-hover-colors(@variants);
+}
+
+.define-text-hover-colors(@variants; @screens) when not (@screens = none) {
+  .define-text-hover-colors(@variants);
+  .generate-responsive-utility-variants('hover-text'; @variants; @screens; {
+    &:hover { color: extract(@__variant-value, 2); }
+  });
+}
+
diff --git a/src/utilities/text.less b/src/utilities/text.less
index 61bc5887d..4ed7a7ae2 100644
--- a/src/utilities/text.less
+++ b/src/utilities/text.less
@@ -131,6 +131,7 @@
 .define-text-sizes(@text-size-scale; @screens);
 .define-text-weights(@text-weight-scale; @screens);
 .define-text-colors(@text-colors; @screens);
+.define-text-hover-colors(@text-colors; @screens);
 .define-leading-utilities(@leading-scale; @screens);
 .define-tracking-utilities(@tracking-scale; @screens);