From 9f987a168fa92285c31b8dea55a799f9670e99f8 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Sat, 5 Aug 2017 20:47:43 -0400
Subject: [PATCH] Add basic tracking utilities

---
 src/generators.less               |  1 +
 src/generators/text-tracking.less | 16 ++++++++++++++++
 src/utilities/text.less           |  8 ++++++++
 3 files changed, 25 insertions(+)
 create mode 100644 src/generators/text-tracking.less

diff --git a/src/generators.less b/src/generators.less
index 03a3e5607..d7ef7c8a4 100644
--- a/src/generators.less
+++ b/src/generators.less
@@ -14,4 +14,5 @@
 @import "generators/text-colors";
 @import "generators/text-leading";
 @import "generators/text-sizes";
+@import "generators/text-tracking";
 @import "generators/text-weights";
diff --git a/src/generators/text-tracking.less b/src/generators/text-tracking.less
new file mode 100644
index 000000000..2e2862a3f
--- /dev/null
+++ b/src/generators/text-tracking.less
@@ -0,0 +1,16 @@
+.define-tracking-utilities(@variants) {
+  .generate-utility-variants('tracking'; @variants; {
+    line-height: extract(@__variant-value, 2);
+  });
+}
+
+.define-tracking-utilities(@variants; none) {
+  .define-tracking-utilities(@variants);
+}
+
+.define-tracking-utilities(@variants; @screens) when not (@screens = none) {
+  .define-tracking-utilities(@variants);
+  .generate-responsive-utility-variants('tracking'; @variants; @screens; {
+    line-height: extract(@__variant-value, 2);
+  });
+}
diff --git a/src/utilities/text.less b/src/utilities/text.less
index 6ab318536..3f68ca92d 100644
--- a/src/utilities/text.less
+++ b/src/utilities/text.less
@@ -71,10 +71,18 @@
   'loose' 2,
 ;
 
+// Letter spacing
+@tracking-scale:
+  'tight' -0.05em,
+  'normal' 0,
+  'wide' 0.1em,
+;
+
 .define-text-sizes(@text-size-scale; @screens);
 .define-text-weights(@text-weight-scale; @screens);
 .define-text-colors(@text-colors; @screens);
 .define-leading-utilities(@leading-scale; @screens);
+.define-tracking-utilities(@tracking-scale; @screens);
 
 // Horizontal alignment
 .text-center { text-align: center; }