feat(typography): add predefined line-height to font size atomic classes

.changeset/violet-pears-draw.md

@@ -0,0 +1,5 @@
+---
+"@stackoverflow/stacks": patch
+---
+
+Add predefined line-height to font size atomic classes (.fs-fine, .fs-caption, etc...)

MIGRATION_GUIDE.md

@@ -21,6 +21,7 @@
 
 #### Typography
 - `.fs-category` removed
+- Atomic classes now have a predefined line-height associated to them
 
 ### Components
 

packages/stacks-classic/lib/atomic/typography.less

@@ -26,19 +26,58 @@ p {
 //  $   TEXT SIZES
 //  ----------------------------------------------------------------------------
 //  Declare font sizes
-.fs-display4 { font-size: var(--fs-display4) !important; }
-.fs-display3 { font-size: var(--fs-display3) !important; }
-.fs-display2 { font-size: var(--fs-display2) !important; }
-.fs-display1 { font-size: var(--fs-display1) !important; }
-.fs-headline2 { font-size: var(--fs-headline2) !important; }
-.fs-headline1 { font-size: var(--fs-headline1) !important; }
-.fs-title { font-size: var(--fs-title) !important; }
-.fs-subheading { font-size: var(--fs-subheading) !important; }
-.fs-body3 { font-size: var(--fs-body3) !important; }
-.fs-body2 { font-size: var(--fs-body2) !important; }
-.fs-body1 { font-size: var(--fs-body1) !important; }
-.fs-caption { font-size: var(--fs-caption) !important; }
-.fs-fine { font-size: var(--fs-fine) !important; }
+.fs-display4 {
+    font-size: var(--fs-display4) !important;
+    line-height: 1.18;
+}
+.fs-display3 {
+    font-size: var(--fs-display3) !important;
+    line-height: 1.20;
+}
+.fs-display2 {
+    font-size: var(--fs-display2) !important;
+    line-height: 1.28;
+}
+.fs-display1 {
+    font-size: var(--fs-display1) !important;
+    line-height: 1.34;
+}
+.fs-headline2 {
+    font-size: var(--fs-headline2) !important;
+    line-height: 1.40;
+}
+.fs-headline1 {
+    font-size: var(--fs-headline1) !important;
+    line-height: 1.40;
+}
+.fs-title {
+    font-size: var(--fs-title) !important;
+    line-height: 1.40;
+}
+.fs-subheading {
+    font-size: var(--fs-subheading) !important;
+    line-height: 1.40;
+}
+.fs-body3 {
+    font-size: var(--fs-body3) !important;
+    line-height: 1.40;
+}
+.fs-body2 {
+    font-size: var(--fs-body2) !important;
+    line-height: 1.40;
+}
+.fs-body1 {
+    font-size: var(--fs-body1) !important;
+    line-height: 1.40;
+}
+.fs-caption {
+    font-size: var(--fs-caption) !important;
+    line-height: 1.40;
+}
+.fs-fine {
+    font-size: var(--fs-fine) !important;
+    line-height: 1.36;
+}
 
 #stacks-internals #screen-sm({
     .fs-display4 { font-size: calc(var(--fs-display4) * .43) !important; } // 43px

packages/stacks-docs/_data/typography.json

@@ -4,78 +4,91 @@
       "term": "fine",
       "define": "12px",
       "responsive": "12px",
+      "line-height": "1.36",
       "label": "Fine"
     },
     {
       "term": "caption",
       "define": "13px",
       "responsive": "13px",
+      "line-height": "1.40",
       "label": "Caption"
     },
     {
       "term": "body1",
       "define": "14px",
       "responsive": "14px",
+      "line-height": "1.40",
       "label": "Body 1"
     },
     {
       "term": "body2",
       "define": "16px",
       "responsive": "15px",
+      "line-height": "1.40",
       "label": "Body 2"
     },
     {
       "term": "body3",
       "define": "18px",
       "responsive": "16px",
+      "line-height": "1.40",
       "label": "Body 3"
     },
     {
       "term": "subheading",
       "define": "20px",
       "responsive": "18px",
+      "line-height": "1.40",
       "label": "Subheading"
     },
     {
       "term": "title",
       "define": "22px",
       "responsive": "20px",
+      "line-height": "1.40",
       "label": "Title"
     },
     {
       "term": "headline1",
       "define": "28px",
       "responsive": "23px",
+      "line-height": "1.40",
       "label": "Headline 1"
     },
     {
       "term": "headline2",
       "define": "36px",
       "responsive": "26px",
+      "line-height": "1.40",
       "label": "Headline 2"
     },
     {
       "term": "display1",
       "define": "46px",
       "responsive": "29px",
+      "line-height": "1.34",
       "label": "Display 1"
     },
     {
       "term": "display2",
       "define": "58px",
       "responsive": "34px",
+      "line-height": "1.28",
       "label": "Display 2"
     },
     {
       "term": "display3",
       "define": "72px",
       "responsive": "37px",
+      "line-height": "1.20",
       "label": "Display 3"
     },
     {
       "term": "display4",
       "define": "100px",
       "responsive": "43px",
+      "line-height": "1.18",
       "label": "Display 4"
     }
   ],