From 6be372a99a306ec8788ed1787e427487a2472e58 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 3 Aug 2017 10:35:00 -0400
Subject: [PATCH 01/13] Rename spacer map to spacing scale

---
 src/utilities/spacing.less | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/utilities/spacing.less b/src/utilities/spacing.less
index 0ce4ccee0..4e3ec8c68 100644
--- a/src/utilities/spacing.less
+++ b/src/utilities/spacing.less
@@ -15,7 +15,7 @@
 @spacer-14: 20rem;
 @spacer-15: 30rem;
 
-@spacer-map:
+@spacing-scale:
   'px' 1px,
   '0' @spacer-0,
   '1' @spacer-1,
@@ -34,7 +34,6 @@
   '14' @spacer-14,
   '15' @spacer-15;
 
-@spacing-scale: @spacer-map;
 @padding-scale: @spacing-scale;
 @margin-scale: @spacing-scale;
 @pull-scale: @spacing-scale;

From 858242392b4b0751746b8b16e17446dc712efd54 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 3 Aug 2017 10:35:34 -0400
Subject: [PATCH 02/13] Fix bug in apply-match

---
 src/generators.less | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/generators.less b/src/generators.less
index 2f4d2afbc..0d4788d09 100644
--- a/src/generators.less
+++ b/src/generators.less
@@ -9,12 +9,12 @@
   .apply-match(@map; @search; @current; @ruleset; 1);
 }
 
-.apply-match(@map; @search; @current; @ruleset; @i) when not (@search = @current) and (@i <= length(@spacer-map)) {
+.apply-match(@map; @search; @current; @ruleset; @i) when not (@search = @current) and (@i <= length(@map)) {
   @current: extract(extract(@map, @i + 1), 1);
   .apply-match(@map; @search; @current; @ruleset; @i + 1);
 }
 
-.apply-match(@map; @search; @current; @ruleset; @i) when (@search = @current) and (@i <= length(@spacer-map)) {
+.apply-match(@map; @search; @current; @ruleset; @i) when (@search = @current) and (@i <= length(@map)) {
   & {
     @__match: extract(extract(@map, @i), 2);
     @ruleset();

From 2906194cf5f06bfae85d9708684503613ae5a166 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 3 Aug 2017 10:42:58 -0400
Subject: [PATCH 03/13] Add constrain generators

---
 src/generators.less           |  2 ++
 src/generators/constrain.less | 26 ++++++++++++++++++++++++++
 src/utilities/constrain.less  | 21 ++++++++++++---------
 3 files changed, 40 insertions(+), 9 deletions(-)
 create mode 100644 src/generators/constrain.less

diff --git a/src/generators.less b/src/generators.less
index 0d4788d09..8f6d10dd1 100644
--- a/src/generators.less
+++ b/src/generators.less
@@ -25,6 +25,8 @@
 
 @import "generators/border-colors";
 
+@import "generators/constrain";
+
 @import "generators/text-colors";
 @import "generators/text-weights";
 @import "generators/text-sizes";
diff --git a/src/generators/constrain.less b/src/generators/constrain.less
new file mode 100644
index 000000000..4428deb3e
--- /dev/null
+++ b/src/generators/constrain.less
@@ -0,0 +1,26 @@
+.generate-constrain-utility(@variant; @size) {
+  .define-selector(~"constrain-@{variant}"; {
+    max-width: @size;
+    flex-basis: @size;
+  });
+}
+
+.generate-constrain-utilities(@size-variants; @i: 1) when (@i <= length(@size-variants)) and (length(extract(@size-variants, @i)) = 1) {
+  @name: extract(@size-variants, 1);
+  @size: extract(@size-variants, 2);
+
+  .generate-constrain-utility(@name; @size);
+}
+
+.generate-constrain-utilities(@size-variants; @i: 1) when (@i <= length(@size-variants)) and (length(extract(@size-variants, @i)) = 2) {
+  @variant: extract(@size-variants, @i);
+  @name: extract(@variant, 1);
+  @size: extract(@variant, 2);
+
+  .generate-constrain-utility(@name; @size);
+  .generate-constrain-utilities(@size-variants; @i + 1);
+}
+
+.define-constrains(@size-variants) {
+    .generate-constrain-utilities(@size-variants);
+}
diff --git a/src/utilities/constrain.less b/src/utilities/constrain.less
index b6874ceba..c78ddc7b1 100644
--- a/src/utilities/constrain.less
+++ b/src/utilities/constrain.less
@@ -8,15 +8,18 @@
 @constrain-4xl: 90rem;
 @constrain-5xl: 100rem;
 
-.constrain-xs { max-width: @constrain-xs; flex-basis: @constrain-xs; }
-.constrain-sm { max-width: @constrain-sm; flex-basis: @constrain-sm; }
-.constrain-md { max-width: @constrain-md; flex-basis: @constrain-md; }
-.constrain-lg { max-width: @constrain-lg; flex-basis: @constrain-lg; }
-.constrain-xl { max-width: @constrain-xl; flex-basis: @constrain-xl; }
-.constrain-2xl { max-width: @constrain-2xl; flex-basis: @constrain-2xl; }
-.constrain-3xl { max-width: @constrain-3xl; flex-basis: @constrain-3xl; }
-.constrain-4xl { max-width: @constrain-4xl; flex-basis: @constrain-4xl; }
-.constrain-5xl { max-width: @constrain-5xl; flex-basis: @constrain-5xl; }
+@constrain-scale:
+  'xs' @constrain-xs,
+  'sm' @constrain-sm,
+  'md' @constrain-md,
+  'lg' @constrain-lg,
+  'xl' @constrain-xl,
+  '2xl' @constrain-2xl,
+  '3xl' @constrain-3xl,
+  '4xl' @constrain-4xl,
+  '5xl' @constrain-5xl;
+
+.define-constrains(@constrain-scale);
 
 .responsive({
   &constrain-xs { .constrain-xs; }

From 99a218f92c9392a19227691001b9d8e071edc088 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 3 Aug 2017 10:43:05 -0400
Subject: [PATCH 04/13] Remove flex declaration from .row

---
 src/utilities/grid.less | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/utilities/grid.less b/src/utilities/grid.less
index 56f40f745..4c20f8379 100644
--- a/src/utilities/grid.less
+++ b/src/utilities/grid.less
@@ -9,7 +9,6 @@
 .row {
   box-sizing: border-box;
   display: flex;
-  flex: 0 1 auto;
   flex-direction: row;
   flex-wrap: wrap;
 }

From 4c93b3f1ce2b2eeeeae725cda8daeb4297dfc608 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 3 Aug 2017 11:49:24 -0400
Subject: [PATCH 05/13] Add responsive constrain generator

---
 src/generators/constrain.less | 43 +++++++++++++++++++++++++++++++++++
 src/utilities/constrain.less  | 14 +-----------
 2 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/src/generators/constrain.less b/src/generators/constrain.less
index 4428deb3e..1ec671dfa 100644
--- a/src/generators/constrain.less
+++ b/src/generators/constrain.less
@@ -21,6 +21,49 @@
   .generate-constrain-utilities(@size-variants; @i + 1);
 }
 
+.generate-screen-constrain-utility(@variant; @size; @screen-name; @screen-width) {
+  @media (min-width: @screen-width) {
+    .define-selector(~"@{screen-name}\:constrain-@{variant}"; {
+      max-width: @size;
+      flex-basis: @size;
+    });
+  }
+}
+
+.generate-screen-constrain-utilities(@size-variants; @screen-name; @screen-width; @i: 1) when (@i <= length(@size-variants)) and (length(extract(@size-variants, @i)) = 1) {
+  @name: extract(@size-variants, 1);
+  @size: extract(@size-variants, 2);
+
+  .generate-screen-constrain-utility(@name; @size; @screen-name; @screen-width);
+}
+
+.generate-screen-constrain-utilities(@size-variants; @screen-name; @screen-width; @i: 1) when (@i <= length(@size-variants)) and (length(extract(@size-variants, @i)) = 2) {
+  @variant: extract(@size-variants, @i);
+  @name: extract(@variant, 1);
+  @size: extract(@variant, 2);
+
+  .generate-screen-constrain-utility(@name; @size; @screen-name; @screen-width);
+  .generate-screen-constrain-utilities(@size-variants; @screen-name; @screen-width; @i + 1);
+}
+
+.generate-responsive-constrain-utilities(@size-variants; @screens; @i: 1) when (@i <= length(@screens)) {
+  @screen: extract(@screens, @i);
+  @screen-name: extract(@screen, 1);
+  @screen-width: extract(@screen, 2);
+
+  .generate-screen-constrain-utilities(@size-variants; @screen-name; @screen-width);
+  .generate-responsive-constrain-utilities(@size-variants; @screens; @i + 1);
+}
+
 .define-constrains(@size-variants) {
     .generate-constrain-utilities(@size-variants);
 }
+
+.define-constrains(@size-variants) when (@screens = none) {
+    .generate-constrain-utilities(@size-variants);
+}
+
+.define-constrains(@size-variants; @screens) {
+    .generate-constrain-utilities(@size-variants);
+    .generate-responsive-constrain-utilities(@size-variants; @screens);
+}
diff --git a/src/utilities/constrain.less b/src/utilities/constrain.less
index c78ddc7b1..5a73426ef 100644
--- a/src/utilities/constrain.less
+++ b/src/utilities/constrain.less
@@ -19,16 +19,4 @@
   '4xl' @constrain-4xl,
   '5xl' @constrain-5xl;
 
-.define-constrains(@constrain-scale);
-
-.responsive({
-  &constrain-xs { .constrain-xs; }
-  &constrain-sm { .constrain-sm; }
-  &constrain-md { .constrain-md; }
-  &constrain-lg { .constrain-lg; }
-  &constrain-xl { .constrain-xl; }
-  &constrain-2xl { .constrain-2xl; }
-  &constrain-3xl { .constrain-3xl; }
-  &constrain-4xl { .constrain-4xl; }
-  &constrain-5xl { .constrain-5xl; }
-});
+.define-constrains(@constrain-scale; @screens);

From 669ec1b55812fb5b5419d649cd6d94ed961f321f Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 3 Aug 2017 12:57:18 -0400
Subject: [PATCH 06/13] Working on moving things to generic generators

---
 src/generators.less                |  1 +
 src/generators/class-variants.less | 50 ++++++++++++++++++++
 src/generators/constrain.less      | 75 +++++-------------------------
 src/generators/text-sizes.less     | 29 +++++-------
 src/generators/text-weights.less   | 29 +++++-------
 src/utilities/text.less            | 10 +---
 6 files changed, 87 insertions(+), 107 deletions(-)
 create mode 100644 src/generators/class-variants.less

diff --git a/src/generators.less b/src/generators.less
index 8f6d10dd1..8e67ec9ec 100644
--- a/src/generators.less
+++ b/src/generators.less
@@ -21,6 +21,7 @@
   }
 }
 
+@import "generators/class-variants";
 @import "generators/backgrounds";
 
 @import "generators/border-colors";
diff --git a/src/generators/class-variants.less b/src/generators/class-variants.less
new file mode 100644
index 000000000..bc06e16db
--- /dev/null
+++ b/src/generators/class-variants.less
@@ -0,0 +1,50 @@
+.generate-utility-variant(@utility; @variant; @ruleset) {
+  @variant-name: extract(@variant, 1);
+  @__variant-value: @variant;
+  .define-selector(~"@{utility}-@{variant-name}"; @ruleset);
+}
+
+.generate-utility-variants(@utility; @variants; @ruleset; @i: 1) when (@i <= length(@variants)) and (length(extract(@variants, @i)) = 1) {
+  & {
+    .generate-utility-variant(@utility; @variants; @ruleset);
+  }
+}
+
+.generate-utility-variants(@utility; @variants; @ruleset; @i: 1) when (@i <= length(@variants)) and (length(extract(@variants, @i)) = 2) {
+  & {
+    @variant: extract(@variants, @i);
+    .generate-utility-variant(@utility; @variant; @ruleset);
+  }
+  .generate-utility-variants(@utility; @variants; @ruleset; @i + 1);
+}
+
+.generate-screen-utility-variant(@utility; @variant; @screen-name; @screen-width; @ruleset) {
+  @media (min-width: @screen-width) {
+    @variant-name: extract(@variant, 1);
+    @__variant-value: @variant;
+    .define-selector(~"@{screen-name}\:@{utility}-@{variant-name}"; @ruleset);
+  }
+}
+
+.generate-screen-utility-variants(@utility; @variants; @screen-name; @screen-width; @ruleset; @i: 1) when (@i <= length(@variants)) and (length(extract(@variants, @i)) = 1) {
+  & {
+    .generate-screen-utility-variant(@utility; @variants; @screen-name; @screen-width; @ruleset);
+  }
+}
+
+.generate-screen-utility-variants(@utility; @variants; @screen-name; @screen-width; @ruleset; @i: 1) when (@i <= length(@variants)) and (length(extract(@variants, @i)) = 2) {
+  & {
+    @variant: extract(@variants, @i);
+    .generate-screen-utility-variant(@utility; @variant; @screen-name; @screen-width; @ruleset);
+  }
+  .generate-screen-utility-variants(@utility; @variants; @screen-name; @screen-width; @ruleset; @i + 1);
+}
+
+.generate-responsive-utility-variants(@utility; @variants; @screens; @ruleset; @i: 1) when (@i <= length(@screens)) {
+  @screen: extract(@screens, @i);
+  @screen-name: extract(@screen, 1);
+  @screen-width: extract(@screen, 2);
+
+  .generate-screen-utility-variants(@utility; @variants; @screen-name; @screen-width; @ruleset);
+  .generate-responsive-utility-variants(@utility; @variants; @screens; @ruleset; @i + 1);
+}
diff --git a/src/generators/constrain.less b/src/generators/constrain.less
index 1ec671dfa..6a680a346 100644
--- a/src/generators/constrain.less
+++ b/src/generators/constrain.less
@@ -1,69 +1,18 @@
-.generate-constrain-utility(@variant; @size) {
-  .define-selector(~"constrain-@{variant}"; {
-    max-width: @size;
-    flex-basis: @size;
+.define-constrains(@variants) {
+  .generate-utility-variants('constrain'; @variants; {
+    max-width: extract(@__variant-value, 2);
+    flex-basis: extract(@__variant-value, 2);
   });
 }
 
-.generate-constrain-utilities(@size-variants; @i: 1) when (@i <= length(@size-variants)) and (length(extract(@size-variants, @i)) = 1) {
-  @name: extract(@size-variants, 1);
-  @size: extract(@size-variants, 2);
-
-  .generate-constrain-utility(@name; @size);
+.define-constrains(@variants; none) {
+  .define-constrains(@variants);
 }
 
-.generate-constrain-utilities(@size-variants; @i: 1) when (@i <= length(@size-variants)) and (length(extract(@size-variants, @i)) = 2) {
-  @variant: extract(@size-variants, @i);
-  @name: extract(@variant, 1);
-  @size: extract(@variant, 2);
-
-  .generate-constrain-utility(@name; @size);
-  .generate-constrain-utilities(@size-variants; @i + 1);
-}
-
-.generate-screen-constrain-utility(@variant; @size; @screen-name; @screen-width) {
-  @media (min-width: @screen-width) {
-    .define-selector(~"@{screen-name}\:constrain-@{variant}"; {
-      max-width: @size;
-      flex-basis: @size;
-    });
-  }
-}
-
-.generate-screen-constrain-utilities(@size-variants; @screen-name; @screen-width; @i: 1) when (@i <= length(@size-variants)) and (length(extract(@size-variants, @i)) = 1) {
-  @name: extract(@size-variants, 1);
-  @size: extract(@size-variants, 2);
-
-  .generate-screen-constrain-utility(@name; @size; @screen-name; @screen-width);
-}
-
-.generate-screen-constrain-utilities(@size-variants; @screen-name; @screen-width; @i: 1) when (@i <= length(@size-variants)) and (length(extract(@size-variants, @i)) = 2) {
-  @variant: extract(@size-variants, @i);
-  @name: extract(@variant, 1);
-  @size: extract(@variant, 2);
-
-  .generate-screen-constrain-utility(@name; @size; @screen-name; @screen-width);
-  .generate-screen-constrain-utilities(@size-variants; @screen-name; @screen-width; @i + 1);
-}
-
-.generate-responsive-constrain-utilities(@size-variants; @screens; @i: 1) when (@i <= length(@screens)) {
-  @screen: extract(@screens, @i);
-  @screen-name: extract(@screen, 1);
-  @screen-width: extract(@screen, 2);
-
-  .generate-screen-constrain-utilities(@size-variants; @screen-name; @screen-width);
-  .generate-responsive-constrain-utilities(@size-variants; @screens; @i + 1);
-}
-
-.define-constrains(@size-variants) {
-    .generate-constrain-utilities(@size-variants);
-}
-
-.define-constrains(@size-variants) when (@screens = none) {
-    .generate-constrain-utilities(@size-variants);
-}
-
-.define-constrains(@size-variants; @screens) {
-    .generate-constrain-utilities(@size-variants);
-    .generate-responsive-constrain-utilities(@size-variants; @screens);
+.define-constrains(@variants; @screens) when not (@screens = none) {
+  .define-constrains(@variants);
+  .generate-responsive-utility-variants('constrain'; @variants; @screens; {
+    max-width: extract(@__variant-value, 2);
+    flex-basis: extract(@__variant-value, 2);
+  });
 }
diff --git a/src/generators/text-sizes.less b/src/generators/text-sizes.less
index 8fd50e72d..83ab2d417 100644
--- a/src/generators/text-sizes.less
+++ b/src/generators/text-sizes.less
@@ -1,23 +1,16 @@
-.generate-text-size-utility(@variant; @size) {
-  .define-selector(~"text-@{variant}"; { font-size: @size; });
+.define-text-sizes(@variants) {
+  .generate-utility-variants('text'; @variants; {
+    font-size: extract(@__variant-value, 2);
+  });
 }
 
-.generate-text-size-utilities(@size-variants; @i: 1) when (@i <= length(@size-variants)) and (length(extract(@size-variants, @i)) = 1) {
-  @name: extract(@size-variants, 1);
-  @size: extract(@size-variants, 2);
-
-  .generate-text-size-utility(@name; @size);
+.define-text-sizes(@variants; none) {
+  .define-text-sizes(@variants);
 }
 
-.generate-text-size-utilities(@size-variants; @i: 1) when (@i <= length(@size-variants)) and (length(extract(@size-variants, @i)) = 2) {
-  @variant: extract(@size-variants, @i);
-  @name: extract(@variant, 1);
-  @size: extract(@variant, 2);
-
-  .generate-text-size-utility(@name; @size);
-  .generate-text-size-utilities(@size-variants; @i + 1);
-}
-
-.define-text-sizes(@size-variants) {
-    .generate-text-size-utilities(@size-variants);
+.define-text-sizes(@variants; @screens) when not (@screens = none) {
+  .define-text-sizes(@variants);
+  .generate-responsive-utility-variants('text'; @variants; @screens; {
+    font-size: extract(@__variant-value, 2);
+  });
 }
diff --git a/src/generators/text-weights.less b/src/generators/text-weights.less
index 54630a0cd..892eaf872 100644
--- a/src/generators/text-weights.less
+++ b/src/generators/text-weights.less
@@ -1,23 +1,16 @@
-.generate-weight-utility(@variant; @weight) {
-  .define-selector(~"text-@{variant}"; { font-weight: @weight; });
+.define-text-weights(@variants) {
+  .generate-utility-variants('text'; @variants; {
+    font-weight: extract(@__variant-value, 2);
+  });
 }
 
-.generate-weight-utilities(@weight-variants; @i: 1) when (@i <= length(@weight-variants)) and (length(extract(@weight-variants, @i)) = 1) {
-  @name: extract(@weight-variants, 1);
-  @weight: extract(@weight-variants, 2);
-
-  .generate-weight-utility(@name; @weight);
+.define-text-weights(@variants; none) {
+  .define-text-weights(@variants);
 }
 
-.generate-weight-utilities(@weight-variants; @i: 1) when (@i <= length(@weight-variants)) and (length(extract(@weight-variants, @i)) = 2) {
-  @variant: extract(@weight-variants, @i);
-  @name: extract(@variant, 1);
-  @weight: extract(@variant, 2);
-
-  .generate-weight-utility(@name; @weight);
-  .generate-weight-utilities(@weight-variants; @i + 1);
-}
-
-.define-text-weights(@weight-variants) {
-    .generate-weight-utilities(@weight-variants);
+.define-text-weights(@variants; @screens) when not (@screens = none) {
+  .define-text-weights(@variants);
+  .generate-responsive-utility-variants('text'; @variants; @screens; {
+    font-weight: extract(@__variant-value, 2);
+  });
 }
diff --git a/src/utilities/text.less b/src/utilities/text.less
index c8a856e79..9c2f8ba0e 100644
--- a/src/utilities/text.less
+++ b/src/utilities/text.less
@@ -42,7 +42,6 @@
 @text-dark-softer: hsl(0, 0%, 65%);
 @text-dark-softest: hsl(0, 0%, 75%);
 
-
 // Sizes
 .define-text-sizes(
   'xs' @font-size-xs,
@@ -52,7 +51,7 @@
   'xl' @font-size-xl,
   '2xl' @font-size-2xl,
   '3xl' @font-size-3xl
-;);
+; @screens);
 
 // Weights
 .define-text-weights(
@@ -61,7 +60,7 @@
   'regular' @font-weight-regular,
   'medium' @font-weight-medium,
   'bold' @font-weight-bold
-;);
+; @screens);
 
 // Colors
 .define-text-color(light;
@@ -123,11 +122,6 @@
   &text-xl { .text-xl; }
   &text-2xl { .text-2xl; }
   &text-3xl { .text-3xl; }
-  &text-hairline { .text-hairline; }
-  &text-thin { .text-thin; }
-  &text-regular { .text-regular; }
-  &text-medium { .text-medium; }
-  &text-bold { .text-bold; }
   &text-light { .text-light; }
   &text-light-soft { .text-light-soft; }
   &text-light-softer { .text-light-softer; }

From 6cf77cfeedf0b01cd96c95f71e35cc2caad35811 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 3 Aug 2017 15:12:24 -0400
Subject: [PATCH 07/13] Group media query declarations

---
 src/generators/class-variants.less | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/generators/class-variants.less b/src/generators/class-variants.less
index bc06e16db..3692c50ee 100644
--- a/src/generators/class-variants.less
+++ b/src/generators/class-variants.less
@@ -18,26 +18,24 @@
   .generate-utility-variants(@utility; @variants; @ruleset; @i + 1);
 }
 
-.generate-screen-utility-variant(@utility; @variant; @screen-name; @screen-width; @ruleset) {
-  @media (min-width: @screen-width) {
+.generate-screen-utility-variant(@utility; @variant; @screen-name; @ruleset) {
     @variant-name: extract(@variant, 1);
     @__variant-value: @variant;
     .define-selector(~"@{screen-name}\:@{utility}-@{variant-name}"; @ruleset);
-  }
 }
 
-.generate-screen-utility-variants(@utility; @variants; @screen-name; @screen-width; @ruleset; @i: 1) when (@i <= length(@variants)) and (length(extract(@variants, @i)) = 1) {
+.generate-screen-utility-variants(@utility; @variants; @screen-name; @ruleset; @i: 1) when (@i <= length(@variants)) and (length(extract(@variants, @i)) = 1) {
   & {
-    .generate-screen-utility-variant(@utility; @variants; @screen-name; @screen-width; @ruleset);
+    .generate-screen-utility-variant(@utility; @variants; @screen-name; @ruleset);
   }
 }
 
-.generate-screen-utility-variants(@utility; @variants; @screen-name; @screen-width; @ruleset; @i: 1) when (@i <= length(@variants)) and (length(extract(@variants, @i)) = 2) {
+.generate-screen-utility-variants(@utility; @variants; @screen-name; @ruleset; @i: 1) when (@i <= length(@variants)) and (length(extract(@variants, @i)) = 2) {
   & {
     @variant: extract(@variants, @i);
-    .generate-screen-utility-variant(@utility; @variant; @screen-name; @screen-width; @ruleset);
+    .generate-screen-utility-variant(@utility; @variant; @screen-name; @ruleset);
   }
-  .generate-screen-utility-variants(@utility; @variants; @screen-name; @screen-width; @ruleset; @i + 1);
+  .generate-screen-utility-variants(@utility; @variants; @screen-name; @ruleset; @i + 1);
 }
 
 .generate-responsive-utility-variants(@utility; @variants; @screens; @ruleset; @i: 1) when (@i <= length(@screens)) {
@@ -45,6 +43,8 @@
   @screen-name: extract(@screen, 1);
   @screen-width: extract(@screen, 2);
 
-  .generate-screen-utility-variants(@utility; @variants; @screen-name; @screen-width; @ruleset);
+  @media (min-width: @screen-width) {
+    .generate-screen-utility-variants(@utility; @variants; @screen-name; @ruleset);
+  }
   .generate-responsive-utility-variants(@utility; @variants; @screens; @ruleset; @i + 1);
 }

From bde4d1c9836bfb4d337ed9d6474b1e52259a45c4 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 3 Aug 2017 15:23:49 -0400
Subject: [PATCH 08/13] Use generic generators for text colors

---
 src/generators/class-variants.less | 14 +++++++++++--
 src/generators/text-colors.less    | 32 ++++++++++--------------------
 src/utilities/text.less            | 19 ++----------------
 3 files changed, 25 insertions(+), 40 deletions(-)

diff --git a/src/generators/class-variants.less b/src/generators/class-variants.less
index 3692c50ee..1f77d9b4d 100644
--- a/src/generators/class-variants.less
+++ b/src/generators/class-variants.less
@@ -1,4 +1,9 @@
-.generate-utility-variant(@utility; @variant; @ruleset) {
+.generate-utility-variant(@utility; @variant; @ruleset) when (extract(@variant, 1) = default) {
+  @__variant-value: @variant;
+  .define-selector(~"@{utility}"; @ruleset);
+}
+
+.generate-utility-variant(@utility; @variant; @ruleset) when not (extract(@variant, 1) = default) {
   @variant-name: extract(@variant, 1);
   @__variant-value: @variant;
   .define-selector(~"@{utility}-@{variant-name}"; @ruleset);
@@ -18,7 +23,12 @@
   .generate-utility-variants(@utility; @variants; @ruleset; @i + 1);
 }
 
-.generate-screen-utility-variant(@utility; @variant; @screen-name; @ruleset) {
+.generate-screen-utility-variant(@utility; @variant; @screen-name; @ruleset) when (extract(@variant, 1) = default) {
+    @__variant-value: @variant;
+    .define-selector(~"@{screen-name}\:@{utility}"; @ruleset);
+}
+
+.generate-screen-utility-variant(@utility; @variant; @screen-name; @ruleset) when not (extract(@variant, 1) = default) {
     @variant-name: extract(@variant, 1);
     @__variant-value: @variant;
     .define-selector(~"@{screen-name}\:@{utility}-@{variant-name}"; @ruleset);
diff --git a/src/generators/text-colors.less b/src/generators/text-colors.less
index d0f3fc44f..742a5a514 100644
--- a/src/generators/text-colors.less
+++ b/src/generators/text-colors.less
@@ -1,27 +1,17 @@
-.generate-text-color-utility(@name; @variant; @color) when (@variant = default) {
-  .define-selector(~"text-@{name}"; { color: @color; });
+.define-text-color(@color-name; @variants) {
+  .generate-utility-variants(~"text-@{color-name}"; @variants; {
+    font-size: extract(@__variant-value, 2);
+  });
 }
 
-.generate-text-color-utility(@name; @variant; @color) when not (@variant = default) {
-  .define-selector(~"text-@{name}-@{variant}"; { color: @color; });
+.define-text-color(@color-name; @variants; none) {
+  .define-text-color(@color-name; @variants);
 }
 
-.generate-text-color-utilities(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 1) {
-  @variant-name: extract(@color-variants, 1);
-  @variant-color: extract(@color-variants, 2);
-
-  .generate-text-color-utility(@color-name; @variant-name; @variant-color);
+.define-text-color(@color-name; @variants; @screens) when not (@screens = none) {
+  .define-text-color(@color-name; @variants);
+  .generate-responsive-utility-variants(~"text-@{color-name}"; @variants; @screens; {
+    font-size: extract(@__variant-value, 2);
+  });
 }
 
-.generate-text-color-utilities(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 2) {
-  @variant: extract(@color-variants, @i);
-  @variant-name: extract(@variant, 1);
-  @variant-color: extract(@variant, 2);
-
-  .generate-text-color-utility(@color-name; @variant-name; @variant-color);
-  .generate-text-color-utilities(@color-name; @color-variants; @i + 1);
-}
-
-.define-text-color(@color-name; @color-variants) {
-    .generate-text-color-utilities(@color-name; @color-variants);
-}
diff --git a/src/utilities/text.less b/src/utilities/text.less
index 9c2f8ba0e..60923b200 100644
--- a/src/utilities/text.less
+++ b/src/utilities/text.less
@@ -68,14 +68,14 @@
   'soft' @text-light-soft,
   'softer' @text-light-softer,
   'softest' @text-light-softest
-;);
+; @screens);
 
 .define-text-color(dark;
   default @text-dark,
   'soft' @text-dark-soft,
   'softer' @text-dark-softer,
   'softest' @text-dark-softest
-;);
+; @screens);
 
 // Line heights
 .leading-none { line-height: 1; }
@@ -115,21 +115,6 @@
 }
 
 .responsive({
-  &text-xs { .text-xs; }
-  &text-sm { .text-sm; }
-  &text-base { .text-base; }
-  &text-lg { .text-lg; }
-  &text-xl { .text-xl; }
-  &text-2xl { .text-2xl; }
-  &text-3xl { .text-3xl; }
-  &text-light { .text-light; }
-  &text-light-soft { .text-light-soft; }
-  &text-light-softer { .text-light-softer; }
-  &text-light-softest { .text-light-softest; }
-  &text-dark { .text-dark; }
-  &text-dark-soft { .text-dark-soft; }
-  &text-dark-softer { .text-dark-softer; }
-  &text-dark-softest { .text-dark-softest; }
   &leading-none { .leading-none; }
   &leading-tight { .leading-tight; }
   &leading-normal { .leading-normal; }

From 3af24750ab818966d8bbd897baf6dbef4655f70b Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 3 Aug 2017 15:30:17 -0400
Subject: [PATCH 09/13] Use the right property

---
 src/generators/text-colors.less | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/generators/text-colors.less b/src/generators/text-colors.less
index 742a5a514..41cae466f 100644
--- a/src/generators/text-colors.less
+++ b/src/generators/text-colors.less
@@ -1,6 +1,6 @@
 .define-text-color(@color-name; @variants) {
   .generate-utility-variants(~"text-@{color-name}"; @variants; {
-    font-size: extract(@__variant-value, 2);
+    color: extract(@__variant-value, 2);
   });
 }
 
@@ -11,7 +11,7 @@
 .define-text-color(@color-name; @variants; @screens) when not (@screens = none) {
   .define-text-color(@color-name; @variants);
   .generate-responsive-utility-variants(~"text-@{color-name}"; @variants; @screens; {
-    font-size: extract(@__variant-value, 2);
+    color: extract(@__variant-value, 2);
   });
 }
 

From 250600eae817776a21146b7b995d7b877f60e626 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 3 Aug 2017 15:30:30 -0400
Subject: [PATCH 10/13] Rename class-variants generator file

---
 src/generators.less                                            | 2 +-
 src/generators/{class-variants.less => _utility-variants.less} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/generators/{class-variants.less => _utility-variants.less} (100%)

diff --git a/src/generators.less b/src/generators.less
index 8e67ec9ec..13b2b6cba 100644
--- a/src/generators.less
+++ b/src/generators.less
@@ -21,7 +21,7 @@
   }
 }
 
-@import "generators/class-variants";
+@import "generators/_utility-variants";
 @import "generators/backgrounds";
 
 @import "generators/border-colors";
diff --git a/src/generators/class-variants.less b/src/generators/_utility-variants.less
similarity index 100%
rename from src/generators/class-variants.less
rename to src/generators/_utility-variants.less

From 25cceb5a165bd7af393ad6ea1a0bf6d08d105879 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 3 Aug 2017 15:34:42 -0400
Subject: [PATCH 11/13] Use generic generators for bg colors

---
 src/generators/backgrounds.less | 31 +++++++++++--------------------
 src/utilities/backgrounds.less  | 31 ++++++++++---------------------
 2 files changed, 21 insertions(+), 41 deletions(-)

diff --git a/src/generators/backgrounds.less b/src/generators/backgrounds.less
index c4d533ebf..3c989a981 100644
--- a/src/generators/backgrounds.less
+++ b/src/generators/backgrounds.less
@@ -1,27 +1,18 @@
-.generate-bg-color-utility(@name; @variant; @color) when (@variant = default) {
-  .define-selector(~"bg-@{name}"; { background-color: @color; });
+.define-bg-color(@color-name; @variants) {
+  .generate-utility-variants(~"bg-@{color-name}"; @variants; {
+    background-color: extract(@__variant-value, 2);
+  });
 }
 
-.generate-bg-color-utility(@name; @variant; @color) when not (@variant = default) {
-  .define-selector(~"bg-@{name}-@{variant}"; { background-color: @color; });
+.define-bg-color(@color-name; @variants; none) {
+  .define-bg-color(@color-name; @variants);
 }
 
-.generate-bg-color-utilities(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 1) {
-  @variant-name: extract(@color-variants, 1);
-  @variant-color: extract(@color-variants, 2);
-
-  .generate-bg-color-utility(@color-name; @variant-name; @variant-color);
+.define-bg-color(@color-name; @variants; @screens) when not (@screens = none) {
+  .define-bg-color(@color-name; @variants);
+  .generate-responsive-utility-variants(~"bg-@{color-name}"; @variants; @screens; {
+    background-color: extract(@__variant-value, 2);
+  });
 }
 
-.generate-bg-color-utilities(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 2) {
-  @variant: extract(@color-variants, @i);
-  @variant-name: extract(@variant, 1);
-  @variant-color: extract(@variant, 2);
 
-  .generate-bg-color-utility(@color-name; @variant-name; @variant-color);
-  .generate-bg-color-utilities(@color-name; @color-variants; @i + 1);
-}
-
-.define-bg-color(@color-name; @color-variants) {
-    .generate-bg-color-utilities(@color-name; @color-variants);
-}
diff --git a/src/utilities/backgrounds.less b/src/utilities/backgrounds.less
index 10025fa96..ddbff7152 100644
--- a/src/utilities/backgrounds.less
+++ b/src/utilities/backgrounds.less
@@ -6,26 +6,15 @@
 @bg-dark-soft: hsl(0, 0%, 42%);
 @bg-dark-softer: hsl(0, 0%, 52%);
 
-.bg-light { background-color: @bg-light; }
-.bg-light-soft { background-color: @bg-light-soft; }
-.bg-light-softer { background-color: @bg-light-softer; }
+@bg-light-scale:
+  default @bg-light,
+  'soft' @bg-light-soft,
+  'softer' @bg-light-softer;
 
-.hover-bg-light { &:hover { .bg-light; } }
-.hover-bg-light-soft { &:hover { .bg-light-soft; } }
-.hover-bg-light-softer { &:hover { .bg-light-softer; } }
+@bg-dark-scale:
+  default @bg-dark,
+  'soft' @bg-dark-soft,
+  'softer' @bg-dark-softer;
 
-.bg-dark { background-color: @bg-dark; }
-.bg-dark-soft { background-color: @bg-dark-soft; }
-.bg-dark-softer { background-color: @bg-dark-softer; }
-
-.bg-overlay-softest { background-color: rgba(0,0,0,0.15); }
-.bg-overlay-soft { background-color: rgba(0,0,0,0.5); }
-.bg-overlay-dark { background-color: rgba(0,0,0,0.75); }
-
-.responsive({
-  &bg-light { .bg-light; }
-  &bg-light-soft { .bg-light-soft; }
-  &bg-light-softer { .bg-light-softer; }
-  &bg-overlay-soft { .bg-overlay-soft; }
-  &bg-overlay-dark { .bg-overlay-dark; }
-});
+.define-bg-color('light'; @bg-light-scale; @screens);
+.define-bg-color('dark'; @bg-dark-scale; @screens);

From bc3664f1a1f7c903e0a3205a966a687428a3cc88 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 3 Aug 2017 15:40:24 -0400
Subject: [PATCH 12/13] Use generic generators for border colors

---
 src/generators/border-colors.less | 31 +++++++++++--------------------
 src/utilities/borders.less        | 25 ++++++++++---------------
 2 files changed, 21 insertions(+), 35 deletions(-)

diff --git a/src/generators/border-colors.less b/src/generators/border-colors.less
index ae3dddd68..e9b01615d 100644
--- a/src/generators/border-colors.less
+++ b/src/generators/border-colors.less
@@ -1,27 +1,18 @@
-.generate-border-color-utility(@name; @variant; @color) when (@variant = default) {
-  .define-selector(~"border-@{name}"; { border-color: @color; });
+.define-border-color(@color-name; @variants) {
+  .generate-utility-variants(~"border-@{color-name}"; @variants; {
+    border-color: extract(@__variant-value, 2);
+  });
 }
 
-.generate-border-color-utility(@name; @variant; @color) when not (@variant = default) {
-  .define-selector(~"border-@{name}-@{variant}"; { border-color: @color; });
+.define-border-color(@color-name; @variants; none) {
+  .define-border-color(@color-name; @variants);
 }
 
-.generate-border-color-utilities(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 1) {
-  @variant-name: extract(@color-variants, 1);
-  @variant-color: extract(@color-variants, 2);
-
-  .generate-border-color-utility(@color-name; @variant-name; @variant-color);
+.define-border-color(@color-name; @variants; @screens) when not (@screens = none) {
+  .define-border-color(@color-name; @variants);
+  .generate-responsive-utility-variants(~"border-@{color-name}"; @variants; @screens; {
+    border-color: extract(@__variant-value, 2);
+  });
 }
 
-.generate-border-color-utilities(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 2) {
-  @variant: extract(@color-variants, @i);
-  @variant-name: extract(@variant, 1);
-  @variant-color: extract(@variant, 2);
 
-  .generate-border-color-utility(@color-name; @variant-name; @variant-color);
-  .generate-border-color-utilities(@color-name; @color-variants; @i + 1);
-}
-
-.define-border-color(@color-name; @color-variants) {
-    .generate-border-color-utilities(@color-name; @color-variants);
-}
diff --git a/src/utilities/borders.less b/src/utilities/borders.less
index eb7f98fce..5cf783209 100644
--- a/src/utilities/borders.less
+++ b/src/utilities/borders.less
@@ -54,16 +54,18 @@
 .border-r-0 { border-right-style: none; }
 
 // Colors
-.border-dark { border-color: @border-dark; }
-.border-dark-soft { border-color: @border-dark-soft; }
-.border-dark-softer { border-color: @border-dark-softer; }
+@border-dark-scale:
+  default @border-dark,
+  'soft' @border-dark-soft,
+  'softer' @border-dark-softer;
 
-.border-light { border-color: @border-light; }
-.border-light-soft { border-color: @border-light-soft; }
-.border-light-softer { border-color: @border-light-softer; }
+@border-light-scale:
+  default @border-light,
+  'soft' @border-light-soft,
+  'softer' @border-light-softer;
 
-.border-invisible { border-color: transparent; }
-.hover-border-invisible { &:hover { .border-invisible; } }
+.define-border-color('dark'; @border-dark-scale; @screens);
+.define-border-color('light'; @border-light-scale; @screens);
 
 // Radius
 .rounded-sm { border-radius: @border-radius-1; }
@@ -115,13 +117,6 @@
   &border-b-0 { .border-b-0; }
   &border-l-0 { .border-l-0; }
   &border-r-0 { .border-r-0; }
-  &border-dark { .border-dark; }
-  &border-dark-soft { .border-dark-soft; }
-  &border-dark-softer { .border-dark-softer; }
-  &border-light { .border-light; }
-  &border-light-soft { .border-light-soft; }
-  &border-light-softer { .border-light-softer; }
-  &border-invisible { .border-invisible; }
   &rounded-sm { .rounded-sm; }
   &rounded-t-sm { .rounded-t-sm; }
   &rounded-r-sm { .rounded-r-sm; }

From baa7450e25181aa1782bafe35b423564f00e4be1 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 3 Aug 2017 21:01:22 -0400
Subject: [PATCH 13/13] Generate all background colors at once

---
 src/generators/backgrounds.less | 14 +++++++-------
 src/utilities/backgrounds.less  | 27 +++++++++------------------
 2 files changed, 16 insertions(+), 25 deletions(-)

diff --git a/src/generators/backgrounds.less b/src/generators/backgrounds.less
index 3c989a981..7dddaabf6 100644
--- a/src/generators/backgrounds.less
+++ b/src/generators/backgrounds.less
@@ -1,16 +1,16 @@
-.define-bg-color(@color-name; @variants) {
-  .generate-utility-variants(~"bg-@{color-name}"; @variants; {
+.define-bg-colors(@variants) {
+  .generate-utility-variants('bg'; @variants; {
     background-color: extract(@__variant-value, 2);
   });
 }
 
-.define-bg-color(@color-name; @variants; none) {
-  .define-bg-color(@color-name; @variants);
+.define-bg-colors(@variants; none) {
+  .define-bg-colors(@variants);
 }
 
-.define-bg-color(@color-name; @variants; @screens) when not (@screens = none) {
-  .define-bg-color(@color-name; @variants);
-  .generate-responsive-utility-variants(~"bg-@{color-name}"; @variants; @screens; {
+.define-bg-colors(@variants; @screens) when not (@screens = none) {
+  .define-bg-colors(@variants);
+  .generate-responsive-utility-variants('bg'; @variants; @screens; {
     background-color: extract(@__variant-value, 2);
   });
 }
diff --git a/src/utilities/backgrounds.less b/src/utilities/backgrounds.less
index ddbff7152..920245d40 100644
--- a/src/utilities/backgrounds.less
+++ b/src/utilities/backgrounds.less
@@ -1,20 +1,11 @@
-@bg-light: hsl(0, 0%, 100%);
-@bg-light-soft: hsl(0, 0%, 98%);
-@bg-light-softer: hsl(0, 0%, 96%);
+@bg-colors:
+  'light' hsl(0, 0%, 100%),
+  'light-soft' hsl(0, 0%, 98%),
+  'light-softer' hsl(0, 0%, 96%),
 
-@bg-dark: hsl(0, 0%, 33%);
-@bg-dark-soft: hsl(0, 0%, 42%);
-@bg-dark-softer: hsl(0, 0%, 52%);
+  'dark' hsl(0, 0%, 33%),
+  'dark-soft' hsl(0, 0%, 42%),
+  'dark-softer' hsl(0, 0%, 52%),
+;
 
-@bg-light-scale:
-  default @bg-light,
-  'soft' @bg-light-soft,
-  'softer' @bg-light-softer;
-
-@bg-dark-scale:
-  default @bg-dark,
-  'soft' @bg-dark-soft,
-  'softer' @bg-dark-softer;
-
-.define-bg-color('light'; @bg-light-scale; @screens);
-.define-bg-color('dark'; @bg-dark-scale; @screens);
+.define-bg-colors(@bg-colors; @screens);