✨ feat(font.scss): Add letter spacing util classes

Spiderpig86 · Feb 10, 2022 · 4d6f8a8 · 4d6f8a8
1 parent db01875
commit 4d6f8a8
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 4 deletions.
diff --git a/dist/cirrus-core.css b/dist/cirrus-core.css
@@ -680,6 +680,35 @@ kbd {
   vertical-align: baseline;
 }
 
+/* Letter spacing */
+.tracking-tightest {
+  letter-spacing: -0.075em !important;
+}
+
+.tracking-tighter {
+  letter-spacing: -0.05em !important;
+}
+
+.tracking-tight {
+  letter-spacing: -0.025em !important;
+}
+
+.tracking-normal {
+  letter-spacing: 0 !important;
+}
+
+.tracking-loose {
+  letter-spacing: 0.025em !important;
+}
+
+.tracking-looser {
+  letter-spacing: 0.05em !important;
+}
+
+.tracking-loosest {
+  letter-spacing: 0.1em !important;
+}
+
 /* MOBILE */
 @media screen and (max-width: 639px) {
   h6 {

diff --git a/dist/cirrus-core.min.css b/dist/cirrus-core.min.css
diff --git a/dist/cirrus.css b/dist/cirrus.css
@@ -681,6 +681,35 @@ kbd {
   vertical-align: baseline;
 }
 
+/* Letter spacing */
+.tracking-tightest {
+  letter-spacing: -0.075em !important;
+}
+
+.tracking-tighter {
+  letter-spacing: -0.05em !important;
+}
+
+.tracking-tight {
+  letter-spacing: -0.025em !important;
+}
+
+.tracking-normal {
+  letter-spacing: 0 !important;
+}
+
+.tracking-loose {
+  letter-spacing: 0.025em !important;
+}
+
+.tracking-looser {
+  letter-spacing: 0.05em !important;
+}
+
+.tracking-loosest {
+  letter-spacing: 0.1em !important;
+}
+
 /* MOBILE */
 @media screen and (max-width: 639px) {
   h6 {

diff --git a/dist/cirrus.min.css b/dist/cirrus.min.css
diff --git a/src/base/font.scss b/src/base/font.scss
@@ -200,10 +200,21 @@ kbd {
     vertical-align: baseline;
 }
 
+/* Letter spacing */
+$generate-utility: should-generate-classes($LETTER-SPACING);
+
+@if $generate-utility {
+    @include generate-classes-for-viewport-with-map(
+        $font-letter-spacing,
+        'letter-spacing',
+        'tracking-',
+        #{get-viewport-flag($LETTER-SPACING)}
+    );
+}
+
 /* MOBILE */
 
 @include screen-below($xs) {
-
     @each $class, $property-map in $font-heading-sizes {
         #{$class} {
             @include explode-properties(map.get($property-map, 'default'));

diff --git a/src/internal/_config.scss b/src/internal/_config.scss
@@ -80,6 +80,7 @@ $default-config: (
                 headline: (),
                 text: (),
             ),
+            letter-spacing: (),
             transforms: (),
             weights: (),
         ),
@@ -393,6 +394,15 @@ $default-config: (
                 ),
             ),
         ),
+        letter-spacing: (
+            tightest: -.075em,
+            tighter: -.05em,
+            tight: -.025em,
+            normal: 0,
+            loose: .025em,
+            looser: .05em,
+            loosest: .1em,
+        ),
         transforms: (uppercase: uppercase, lowercase: lowercase, capitalize: capitalize),
         weights: (
             'extrathin': 100,
@@ -674,6 +684,7 @@ $form-label-sizes: functions.get-with-extend($all-config, form-label-sizes);
 $font-heading-sizes: functions.get-with-extend($all-config, fonts, sizes, heading);
 $font-headline-sizes: functions.get-with-extend($all-config, fonts, sizes, headline);
 $font-text-sizes: functions.get-with-extend($all-config, fonts, sizes, text);
+$font-letter-spacing: functions.get-with-extend($all-config, fonts, letter-spacing);
 $font-transforms: functions.get-with-extend($all-config, fonts, transforms);
 $font-weights: functions.get-with-extend($all-config, fonts, weights);
 

diff --git a/src/internal/_flags.scss b/src/internal/_flags.scss
@@ -54,3 +54,4 @@ $GAP: 'GAP';
 $GRID: 'GRID';
 $ROUND: 'ROUND';
 $SHADOWS: 'SHADOWS';
+$LETTER-SPACING: 'LETTER-SPACING';
diff --git a/src/utils/shadows.scss b/src/utils/shadows.scss
@@ -4,7 +4,7 @@
 $generate-utility: should-generate-classes($SHADOWS);
 
 @if $generate-utility {
-    @include generate-styles-with-viewports($generate-viewports: false) using ($viewport) {
+    @include generate-styles-with-viewports($generate-viewports: #{get-viewport-flag($SHADOWS)}) using ($viewport) {
         $suffix: if($viewport != '', '-#{$viewport}', '');
 
         @each $class, $property-map in $shadows {