From b054dbd835d08ebceeffbe92ce3d3b462d6c74cb Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Fri, 4 Aug 2017 10:57:20 -0400
Subject: [PATCH] Generate border widths instead of hard-coding

Sadly we are forced to expose a global @default-border-color variable
but what can you do. Trying to match against the border-colors scale
was too insane; I either polluted the scope and broke a bunch of other
utilities or I made the border width utilities non-mix-in-able which is
also grim af.
---
 src/generators.less               |  1 +
 src/generators/border-widths.less | 74 +++++++++++++++++++++++++++++++
 src/utilities/borders.less        | 74 +++++++++----------------------
 3 files changed, 95 insertions(+), 54 deletions(-)
 create mode 100644 src/generators/border-widths.less

diff --git a/src/generators.less b/src/generators.less
index d81ee1639..bec0128b5 100644
--- a/src/generators.less
+++ b/src/generators.less
@@ -4,6 +4,7 @@
 
 @import "generators/backgrounds";
 @import "generators/border-colors";
+@import "generators/border-widths";
 @import "generators/constrain";
 @import "generators/text-colors";
 @import "generators/text-weights";
diff --git a/src/generators/border-widths.less b/src/generators/border-widths.less
new file mode 100644
index 000000000..f626a87c1
--- /dev/null
+++ b/src/generators/border-widths.less
@@ -0,0 +1,74 @@
+.generate-border-width-utilities(@border-width-scale; @border-color; @i: 1) when (@i <= length(@border-width-scale)) {
+  @variant: extract(@border-width-scale, @i);
+  @border-width: extract(@variant, 2);
+
+  .generate-utility-variant('border'; @variant; {
+    border: @border-width solid @border-color;
+  });
+  .generate-utility-variant('border-t'; @variant; {
+    border-top: @border-width solid @border-color;
+  });
+  .generate-utility-variant('border-r'; @variant; {
+    border-right: @border-width solid @border-color;
+  });
+  .generate-utility-variant('border-b'; @variant; {
+    border-bottom: @border-width solid @border-color;
+  });
+  .generate-utility-variant('border-l'; @variant; {
+    border-left: @border-width solid @border-color;
+  });
+
+  .generate-border-width-utilities(@border-width-scale; @border-color; @i + 1);
+}
+
+.generate-screen-border-width-utilities(@border-width-scale; @border-color; @screen-name; @screen-width; @i: 1) when (@i <= length(@border-width-scale)) {
+  @prefix: ~"@{screen-name}\:";
+  @variant: extract(@border-width-scale, @i);
+  @border-width: extract(@variant, 2);
+
+  @media (min-width: @screen-width) {
+    .generate-utility-variant(~"@{prefix}border"; @variant; {
+      border: @border-width solid @border-color;
+    });
+    .generate-utility-variant(~"@{prefix}border-t"; @variant; {
+      border-top: @border-width solid @border-color;
+    });
+    .generate-utility-variant(~"@{prefix}border-r"; @variant; {
+      border-right: @border-width solid @border-color;
+    });
+    .generate-utility-variant(~"@{prefix}border-b"; @variant; {
+      border-bottom: @border-width solid @border-color;
+    });
+    .generate-utility-variant(~"@{prefix}border-l"; @variant; {
+      border-left: @border-width solid @border-color;
+    });
+  }
+
+  .generate-screen-border-width-utilities(@border-width-scale; @border-color; @screen-name; @screen-width; (@i + 1));
+}
+
+.generate-responsive-border-width-utilities(@border-width-scale; @border-color; @i: 1) when (@i <= length(@screens)) {
+  @screen: extract(@screens, @i);
+  @screen-name: extract(@screen, 1);
+  @screen-width: extract(@screen, 2);
+
+  .generate-screen-border-width-utilities(@border-width-scale; @border-color; @screen-name; @screen-width);
+  .generate-responsive-border-width-utilities(@border-width-scale; @border-color; @i + 1);
+}
+
+.define-border-widths(@border-width-scale; @border-color) {
+  & {
+    .generate-border-width-utilities(@border-width-scale; @border-color);
+  }
+}
+
+.define-border-widths(@border-width-scale; @border-color; none) {
+  .define-border-widths(@border-width-scale; @border-color);
+}
+
+.define-border-widths(@border-width-scale; @border-color; @screens) when not (@screens = null) {
+  & {
+    .generate-border-width-utilities(@border-width-scale; @border-color);
+    .generate-responsive-border-width-utilities(@border-width-scale; @border-color);
+  }
+}
diff --git a/src/utilities/borders.less b/src/utilities/borders.less
index fcf26a49c..4638f1c28 100644
--- a/src/utilities/borders.less
+++ b/src/utilities/borders.less
@@ -7,6 +7,7 @@
 @border-light-softer: hsl(0, 0%, 35%);
 
 @border-default-color: @border-dark-soft;
+@default-border-color: @border-dark-soft;
 
 @border-radius-1: .125rem;
 @border-radius-2: .25rem;
@@ -18,40 +19,13 @@
 @border-width-8: 8px;
 
 // Base
-.border { border: @border-width-1 solid @border-default-color; }
-.border-t { border-top: @border-width-1 solid @border-default-color; }
-.border-b { border-bottom: @border-width-1 solid @border-default-color; }
-.border-l { border-left: @border-width-1 solid @border-default-color; }
-.border-r { border-right: @border-width-1 solid @border-default-color; }
-
-.border-2 { border: @border-width-2 solid @border-default-color; }
-.border-t-2 { border-top: @border-width-2 solid @border-default-color; }
-.border-b-2 { border-bottom: @border-width-2 solid @border-default-color; }
-.border-l-2 { border-left: @border-width-2 solid @border-default-color; }
-.border-r-2 { border-right: @border-width-2 solid @border-default-color; }
-
-.border-4 { border: @border-width-4 solid @border-default-color; }
-.border-t-4 { border-top: @border-width-4 solid @border-default-color; }
-.border-b-4 { border-bottom: @border-width-4 solid @border-default-color; }
-.border-l-4 { border-left: @border-width-4 solid @border-default-color; }
-.border-r-4 { border-right: @border-width-4 solid @border-default-color; }
-
-.border-8 { border: @border-width-8 solid @border-default-color; }
-.border-t-8 { border-top: @border-width-8 solid @border-default-color; }
-.border-b-8 { border-bottom: @border-width-8 solid @border-default-color; }
-.border-l-8 { border-left: @border-width-8 solid @border-default-color; }
-.border-r-8 { border-right: @border-width-8 solid @border-default-color; }
-
-// Styles
-.border-dashed { border-style: dashed; }
-.border-dotted { border-style: dotted; }
-
-// Disablers
-.border-0 { border-style: none; }
-.border-t-0 { border-top-style: none; }
-.border-b-0 { border-bottom-style: none; }
-.border-l-0 { border-left-style: none; }
-.border-r-0 { border-right-style: none; }
+@border-width-scale:
+  default 1px,
+  '2' 2px,
+  '4' 4px,
+  '8' 8px,
+;
+.define-border-widths(@border-width-scale; @default-border-color; @screens);
 
 // Colors
 @border-colors:
@@ -63,8 +37,20 @@
   'light-soft' @border-light-soft,
   'light-softer' @border-light-softer,
 ;
+
 .define-border-colors(@border-colors; @screens);
 
+// Styles
+.border-dashed { border-style: dashed; }
+.border-dotted { border-style: dotted; }
+
+// Disablers
+.border-0 { border-style: none; }
+.border-t-0 { border-top-style: none; }
+.border-b-0 { border-bottom-style: none; }
+.border-l-0 { border-left-style: none; }
+.border-r-0 { border-right-style: none; }
+
 // Radius
 .rounded-sm { border-radius: @border-radius-1; }
 .rounded-t-sm { border-top-left-radius: @border-radius-1; border-top-right-radius: @border-radius-1; }
@@ -88,26 +74,6 @@
 
 // Responsive
 .responsive({
-  &border { .border; }
-  &border-t { .border-t; }
-  &border-b { .border-b; }
-  &border-l { .border-l; }
-  &border-r { .border-r; }
-  &border-2 { .border-2; }
-  &border-t-2 { .border-t-2; }
-  &border-b-2 { .border-b-2; }
-  &border-l-2 { .border-l-2; }
-  &border-r-2 { .border-r-2; }
-  &border-4 { .border-4; }
-  &border-t-4 { .border-t-4; }
-  &border-b-4 { .border-b-4; }
-  &border-l-4 { .border-l-4; }
-  &border-r-4 { .border-r-4; }
-  &border-8 { .border-8; }
-  &border-t-8 { .border-t-8; }
-  &border-b-8 { .border-b-8; }
-  &border-l-8 { .border-l-8; }
-  &border-r-8 { .border-r-8; }
   &border-dashed { .border-dashed; }
   &border-dotted { .border-dotted; }
   &border-0 { .border-0; }