diff --git a/src/generators.less b/src/generators.less index 5d65c8762..fc6e321df 100644 --- a/src/generators.less +++ b/src/generators.less @@ -16,4 +16,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; }