Merge pull request #18845 from overleaf/mf-line-height-rem

[web] Create a new standardized font-size and line-height and use that in new plans page

GitOrigin-RevId: 7c9c92e58e55dd03d0459f5e7314a2832bc769ce

services/web/frontend/stylesheets/app/plans/plans-new-design.less

@@ -160,9 +160,9 @@
     margin-bottom: 40px;
 
     .plans-new-period-switcher {
-      font-size: 20px;
+      font-size: var(--font-size-05);
       font-weight: 600;
-      line-height: 1.4;
+      line-height: var(--line-height-04);
       text-align: center;
       padding: 2px 8px;
       height: @switcher-height;
@@ -194,7 +194,7 @@
   }
 
   .plans-new-discount-badge {
-    font-size: 12px;
+    font-size: var(--font-size-01);
     font-family: 'DM Mono', monospace;
     padding: 2px 8px;
     height: 20px;
@@ -262,7 +262,7 @@
     // css specificity issue
     thead tr th .plans-new-table-header-title {
       @media (max-width: @screen-md-max) {
-        font-size: 1rem; // 16px
+        font-size: var(--font-size-03);
       }
     }
   }
@@ -282,9 +282,9 @@
     position: relative;
 
     .plans-new-table-header-title {
-      font-size: 1.25rem; // 20px
+      font-size: var(--font-size-05);
       font-weight: 600;
-      line-height: 1.4;
+      line-height: var(--line-height-04);
       margin-bottom: @spacing-04;
       color: var(--neutral-90);
       text-align: center;
@@ -294,8 +294,8 @@
       position: absolute;
       top: 50px;
       left: 25px;
-      font-size: 1.125rem; // 18px
-      line-height: 1.778;
+      font-size: var(--font-size-04);
+      line-height: var(--line-height-05);
       color: var(--neutral-40);
       font-weight: 600;
 
@@ -315,9 +315,9 @@
     }
 
     .plans-new-table-header-price {
-      font-size: 2.25rem; // 36px`
+      font-size: var(--font-size-08);
       font-weight: 600;
-      line-height: 1.333;
+      line-height: var(--line-height-07);
       color: var(--neutral-90);
     }
 
@@ -329,20 +329,20 @@
     }
 
     .plans-new-table-header-price-unit {
-      font-size: 0.875rem; // 14px
-      line-height: 1.428;
+      font-size: var(--font-size-02);
+      line-height: var(--line-height-02);
     }
 
     .plans-new-table-header-price-unit-total {
-      font-size: 0.75rem; // 12px
-      line-height: 1.333;
+      font-size: var(--font-size-01);
+      line-height: var(--line-height-01);
     }
 
     .plans-new-table-header-desc {
       margin-top: @spacing-05;
       margin-bottom: @spacing-08;
-      font-size: 0.875rem; // 14px
-      line-height: 1.428;
+      font-size: var(--font-size-02);
+      line-height: var(--line-height-02);
     }
 
     .plans-new-table-button {

services/web/frontend/stylesheets/variables/all.less

@@ -135,6 +135,33 @@
 @spacing-15: 80px;
 @spacing-16: 96px;
 
+@font-size-01: 0.75rem; // 12px
+@font-size-02: 0.875rem; // 14px
+@font-size-03: 1rem; // 16px
+@font-size-04: 1.125rem; // 18px
+@font-size-05: 1.25rem; // 20px
+@font-size-06: 1.5rem; // 24px
+@font-size-07: 1.875rem; // 30px
+@font-size-08: 2.25rem; // 36px
+@font-size-09: 3rem; // 48px
+@font-size-10: 3.25rem; // 52px
+@font-size-11: 3.75rem; // 60px
+@font-size-12: 4.5rem; // 72px
+@font-size-13: 6rem; // 96px
+
+@line-height-01: 1rem; // 16px
+@line-height-02: 1.25rem; // 20px
+@line-height-03: 1.5rem; // 24px
+@line-height-04: 1.75rem; // 28px
+@line-height-05: 2rem; // 32px
+@line-height-06: 2.5rem; // 40px
+@line-height-07: 3rem; // 48px
+@line-height-08: 4rem; // 64px
+@line-height-09: 4.25rem; // 68px
+@line-height-10: 5rem; // 80px
+@line-height-11: 6rem; // 96px
+@line-height-12: 8rem; // 128px
+
 //** Horizontal line color.
 @hr-border: @neutral-20;
 

services/web/frontend/stylesheets/variables/css-variables.less

@@ -113,4 +113,33 @@
 
   // layout
   --header-height: @header-height;
+
+  // font-size
+  --font-size-01: @font-size-01;
+  --font-size-02: @font-size-02;
+  --font-size-03: @font-size-03;
+  --font-size-04: @font-size-04;
+  --font-size-05: @font-size-05;
+  --font-size-06: @font-size-06;
+  --font-size-07: @font-size-07;
+  --font-size-08: @font-size-08;
+  --font-size-09: @font-size-09;
+  --font-size-10: @font-size-10;
+  --font-size-11: @font-size-11;
+  --font-size-12: @font-size-12;
+  --font-size-13: @font-size-13;
+
+  // line-height
+  --line-height-01: @line-height-01;
+  --line-height-02: @line-height-02;
+  --line-height-03: @line-height-03;
+  --line-height-04: @line-height-04;
+  --line-height-05: @line-height-05;
+  --line-height-06: @line-height-06;
+  --line-height-07: @line-height-07;
+  --line-height-08: @line-height-08;
+  --line-height-09: @line-height-09;
+  --line-height-10: @line-height-10;
+  --line-height-11: @line-height-11;
+  --line-height-12: @line-height-12;
 }