From 8b515020d85b5dac607d4320c23951c6a1a14832 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Fri, 18 Aug 2017 14:57:38 -0400
Subject: [PATCH] Use @ instead of hover-

---
 docs/source/examples.blade.php        | 6 +++---
 src/generators/backgrounds-hover.less | 8 ++++----
 src/generators/text-colors-hover.less | 8 ++++----
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/docs/source/examples.blade.php b/docs/source/examples.blade.php
index d260d76a1..45096cb5e 100644
--- a/docs/source/examples.blade.php
+++ b/docs/source/examples.blade.php
@@ -34,7 +34,7 @@
     </button>
 </div>
 <div class="mb-4">
-    <button class="text-medium text-light rounded py-2 px-4 bg-dark hover-bg-dark-dark mr-4">
+    <button class="text-medium text-light rounded py-2 px-4 bg-dark @bg-dark-dark mr-4">
         Save
     </button>
     <button class="text-medium text-light rounded py-2 px-4 bg-dark-soft mr-4">
@@ -47,7 +47,7 @@
 
 @foreach($page->colors as $color)
 <div class="mb-4">
-    <button class="text-medium text-light rounded py-2 px-4 bg-{{$color}} hover-bg-{{$color}}-dark mr-4">
+    <button class="text-medium text-light rounded py-2 px-4 bg-{{$color}} @bg-{{$color}}-dark mr-4">
         Save
     </button>
     <button class="text-medium text-light rounded py-2 px-4 bg-{{$color}}-light mr-4">
@@ -60,7 +60,7 @@
 
 @foreach($page->colors as $color)
 <div class="mb-4">
-    <button class="text-medium text-light rounded py-2 px-4 text-{{$color}}-dark hover-text-light border border-{{$color}} hover-bg-{{$color}} mr-4">
+    <button class="text-medium text-light rounded py-2 px-4 text-{{$color}}-dark @text-light border border-{{$color}} @bg-{{$color}} mr-4">
         Save
     </button>
     <button class="text-medium text-light rounded py-2 px-4 text-{{$color}}-light border border-{{$color}}-light mr-4">
diff --git a/src/generators/backgrounds-hover.less b/src/generators/backgrounds-hover.less
index b1e34728b..70d5c1a6c 100644
--- a/src/generators/backgrounds-hover.less
+++ b/src/generators/backgrounds-hover.less
@@ -1,6 +1,6 @@
 .define-bg-hover-colors(@variants) {
-  .generate-utility-variants('hover-bg'; @variants; {
-    &:hover { background-color: extract(@__variant-value, 2); }
+  .generate-utility-variants('\@bg'; @variants; {
+    &:hover, &:focus { background-color: extract(@__variant-value, 2); }
   });
 }
 
@@ -10,8 +10,8 @@
 
 .define-bg-hover-colors(@variants; @screens) when not (@screens = none) {
   .define-bg-hover-colors(@variants);
-  .generate-responsive-utility-variants('hover-bg'; @variants; @screens; {
-    &:hover { background-color: extract(@__variant-value, 2); }
+  .generate-responsive-utility-variants('\@bg'; @variants; @screens; {
+    &:hover, &:focus { background-color: extract(@__variant-value, 2); }
   });
 }
 
diff --git a/src/generators/text-colors-hover.less b/src/generators/text-colors-hover.less
index 8b1c0f277..e5ea96d7d 100644
--- a/src/generators/text-colors-hover.less
+++ b/src/generators/text-colors-hover.less
@@ -1,6 +1,6 @@
 .define-text-hover-colors(@variants) {
-  .generate-utility-variants('hover-text'; @variants; {
-    &:hover { color: extract(@__variant-value, 2); }
+  .generate-utility-variants('\@text'; @variants; {
+    &:hover, &:focus { color: extract(@__variant-value, 2); }
   });
 }
 
@@ -10,8 +10,8 @@
 
 .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); }
+  .generate-responsive-utility-variants('\@text'; @variants; @screens; {
+    &:hover, &:focus { color: extract(@__variant-value, 2); }
   });
 }