@geotab/zenith 3.9.0-beta.ssr.1 → 3.9.0

package/dist/commonStyles/typography/typography.less

@@ -1,563 +1,438 @@
-//**********//
-// MyGeotab //
-//**********//
-
-//body-label
-//label-01
-//body-04
-//body-s-400
-@base-font-size: 12;
-@base-line-height: 16;
-@base-letter-spacing: 0.32;
-@base-font-weight: 400;
-@base-font-style: normal;
-
-//body-01,
-//body-l-400
-@body-font-size: 16;
-@body-line-height: 24;
-@body-letter-spacing: 0;
-
-//body-02-short,
-//body-m-400-short
-@body-short-font-size: 14;
-
-//body-02-tall,
-//body-m-400-tall
-@body-tall-font-size: 14;
-@body-tall-line-height: 28;
-
-//body-03,
-//body-s-700
-@body-03-weight: 700;
-
-//body-05,
-//body-s-400-italic
-@body-05-style: italic;
-
-//heading-01
-//heading-xl-300
-@heading-01-font-size: 28;
-@heading-01-font-mobile-size: 20;
-@heading-01-line-height: 36;
-@heading-01-weight: 300;
-
-//heading-02
-//heading-l-400
-@heading-02-font-size: 20;
-@heading-02-line-height: 24;
-
-//heading-03
-//heading-m-300
-@heading-03-font-size: 20;
-@heading-03-font-mobile-size: 18;
-@heading-03-line-height: 28;
-
-//heading-04
-//heading-s-500
-@heading-04-font-size: 16;
-@heading-04-line-height: 24;
-@heading-04-weight: 500;
-
-//heading-05
-//heading-xs-500
-@heading-05-font-size: 14;
-@heading-05-letter-spacing: 0.16;
-@heading-05-weight: 500;
-
-//heading-06
-@heading-06-letter-spacing: 0;
-@heading-06-text-trasnform: uppercase;
-
-//data-01
-//data-xxl
-@data-01-font-size: 32;
-@data-01-line-height: 40;
-
-//data-02
-//data-xl
-@data-02-font-size: 24;
-@data-02-line-height: 32;
-
-//data-03
-//data-l
-@data-03-font-size: 20;
-@data-03-line-height: 24;
-
-//data-04
-//data-m
-@data-04-font-size: 18;
-@data-04-line-height: 21;
-
-//data-05
-//data-s
-@data-05-font-size: 16;
-@data-05-line-height: 18;
-
-//data-06
-//data-xs
-@data-06-font-size: 14;
-@data-06-line-height: 16;
-
-//*******//
-// Drive //
-//*******//
-
-//label-01-drive
-//label-400-drive
-@drive-base-font-size: 16;
-@drive-base-font-mobile-size: 14;
-@drive-base-line-height: 18;
-@drive-base-letter-spacing: 0.32;
-@drive-base-font-weight: 400;
-@drive-base-font-style: normal;
-
-//body-01-drive
-//body-l-400-drive
-@body-01-drive-font-size: 20;
-@body-01-drive-font-mobile-size: 18;
-@body-01-drive-line-height: 30;
-@body-01-drive-line-height-mobile: 28;
-@body-01-drive-letter-spacing: 0;
-
-//body-02-short-drive
-//body-m-400-short-drive
-@body-02-short-drive-font-size: 18;
-@body-02-short-drive-font-mobile-size: 16;
-@body-02-short-drive-line-height: 22;
-@body-02-short-drive-line-height-mobile: 20;
-
-//body-02-tall-drive
-//body-m-400-tall-drive
-@body-02-tall-drive-font-size: 18;
-@body-02-tall-drive-font-mobile-size: 16;
-@body-02-tall-drive-line-height: 28;
-@body-02-tall-drive-line-height-mobile: 26;
-
-//body-03-drive,
-//body-s-700-drive
-@body-03-drive-line-height: 22;
-@body-03-drive-weight: 700;
-
-//body-04-drive,
-//body-s-400-drive
-@body-04-drive-line-height: 22;
-@body-04-drive-line-height-mobile: 20;
-
-//body-05-drive
-//body-s-400-italic-drive
-@body-05-drive-line-height: 20;
-@body-05-drive-style: italic;
-
-//heading-01-drive
-//heading-xl-300-drive
-@heading-01-drive-font-size: 26;
-@heading-01-drive-font-mobile-size: 24;
-@heading-01-drive-line-height: 34;
-@heading-01-drive-line-height-mobile: 32;
-@heading-01-drive-weight: 300;
-
-//heading-02-drive
-//heading-l-400-drive
-@heading-02-drive-font-size: 24;
-@heading-02-drive-font-mobile-size: 22;
-@heading-02-drive-line-height: 30;
-@heading-02-drive-line-height-mobile: 28;
-
-//heading-03-drive
-//heading-m-300-drive
-@heading-03-drive-font-size: 20;
-@heading-03-drive-font-mobile-size: 18;
-@heading-03-drive-line-height: 26;
-@heading-03-drive-mobile-line-height: 24;
-
-//heading-04-drive
-//heading-m-500-drive
-@heading-04-drive-font-size: 20;
-@heading-04-drive-font-mobile-size: 18;
-@heading-04-drive-line-height: 28;
-@heading-04-drive-mobile-line-height: 26;
-@heading-04-drive-weight: 500;
-
-//heading-05-drive
-//heading-s-500-drive
-@heading-05-drive-font-size: 18;
-@heading-05-drive-font-mobile-size: 16;
-@heading-05-drive-line-height: 22;
-@heading-05-drive-mobile-line-height: 20;
-@heading-05-drive-letter-spacing: 0.16;
-
-//heading-06-drive
-@heading-06-drive-font-size: 14;
-@heading-06-drive-letter-spacing: 0;
-
-//heading-07-drive
-//heading-s-300-drive
-@heading-07-drive-font-size: 18;
-@heading-07-drive-font-mobile-size: 16;
-@heading-07-drive-line-height: 20;
-@heading-07-drive-mobile-line-height: 18;
-
-//data-01-drive
-//data-xl-drive
-@data-01-drive-font-size: 34;
-@data-01-drive-mobile-size: 32;
-@data-01-drive-line-height: 42;
-@data-01-drive-mobile-line-height: 40;
-
-//data-02-drive
-//data-l-drive
-@data-02-drive-font-size: 22;
-@data-02-drive-mobile-size: 20;
-@data-02-drive-line-height: 26;
-@data-02-drive-mobile-line-height: 24;
-
-//data-03-drive
-//data-m-drive
-@data-03-drive-font-size: 20;
-@data-03-drive-mobile-size: 16;
-@data-03-drive-line-height: 22;
-@data-03-drive-mobile-line-height: 21;
-
-//data-04-drive
-//data-s-drive
-@data-04-drive-font-size: 18;
-@data-04-drive-mobile-size: 16;
-@data-04-drive-line-height: 26;
-@data-04-drive-mobile-line-height: 24;
-
-//*************************************************************//
-// Do not add raw values here, use the variables above instead //
-//*************************************************************//
-
-.zenith-font(@font,
-    @size: @base-font-size,
-    @line-height: @base-line-height,
-    @letter-spacing: @base-letter-spacing,
-    @weight: @base-font-weight,
-    @style: @base-font-style,
+.font(
+    @font: Roboto,
+    @size,
+    @line-height: 16px,
+    @letter-spacing: 0,
+    @weight: 400,
+    @style: normal,
     @text-transform: none,
 ) {
     font-family: @font;
-    font-size: (@size / @rem);
+    font-size: @size;
     font-style: @style;
     font-weight: @weight;
-    letter-spacing: (@letter-spacing / @rem);
-    line-height: (@line-height / @rem);
+    letter-spacing: @letter-spacing;
+    line-height: @line-height;
     text-transform: @text-transform;
     text-decoration: none;
-}
 
-.zenith-drive-font(@font,
-    @size: @drive-base-font-size,
-    @line-height: @drive-base-line-height,
-    @letter-spacing: @drive-base-letter-spacing,
-    @weight: @drive-base-font-weight,
-    @style: @drive-base-font-style,
-    @text-transform: none,
-) {
-    font-family: @font;
-    font-size: (@size / @rem);
-    font-style: @style;
-    font-weight: @weight;
-    letter-spacing: (@letter-spacing / @rem);
-    line-height: (@line-height / @rem);
-    text-transform: @text-transform;
-    text-decoration: none;
+    html:lang(ar) & {
+        font-family: var(--arabic-font-family);
+    }
 }
 
-// MyGeotab
+:root {
+    --main-font: Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
+    --main-font-data: "Roboto Mono", "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
+    --data-font-drive: "Roboto Mono", "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
+    --arabic-font-family: "Noto Sans Arabic", Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
+}
 
 // Labels
 .label-01,
-.body-label-400,
-.body-04,
-.body-s-400 {
-    .zenith-font(@main-font-family);
+.body-label-400 {
+    .font(var(--main-font), 12px, @line-height: 16px, @letter-spacing: 0.32px, @weight: 400);
+}
+
+// Labels Drive
+.label-01-tablet-drive,
+.tablet-label-400-drive {
+    .font(var(--main-font), 16px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 400);
+}
+
+.label-01-mobile-drive,
+.mobile-label-400-drive {
+    .font(var(--main-font), 14px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 400);
+}
+
+@media (max-width: 640px) {
+    .tablet-label-400-drive {
+        .font(var(--main-font), 14px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 400);
+    }
 }
 
 // Body
 .body-01,
 .body-l-400 {
-    .zenith-font(@main-font-family, @body-font-size, @body-line-height, @body-letter-spacing);
+    .font(var(--main-font), 16px, @line-height: 24px, @letter-spacing: 0, @weight: 400);
 }
 
 .body-02-short,
 .body-m-400-short {
-    .zenith-font(@main-font-family, @body-short-font-size, @base-line-height, @body-letter-spacing);
+    .font(var(--main-font), 14px, @line-height: 16px, @letter-spacing: 0, @weight: 400);
 }
 
 .body-02-tall,
 .body-m-400-tall {
-    .zenith-font(@main-font-family, @body-tall-font-size, @body-tall-line-height, @body-letter-spacing);
+    .font(var(--main-font), 14px, @line-height: 28px, @weight: 400, @letter-spacing: 0);
 }
 
 .body-03,
 .body-s-700 {
-    .zenith-font(@main-font-family, @weight: @body-03-weight);
+    .font(var(--main-font), 12px, @line-height: 16px, @letter-spacing: 0.32px, @weight: 700);
+}
+
+.body-04,
+.body-s-400 {
+    .font(var(--main-font), 12px, @line-height: 16px, @letter-spacing: 0.32px, @weight: 400);
 }
 
 .body-05,
 .body-s-400-italic {
-    .zenith-font(@main-font-family, @style: @body-05-style);
+    .font(var(--main-font), 12px, @line-height: 16px, @letter-spacing: 0.32px, @weight: 400, @style: italic);
 }
 
-// Headings
-.heading-01-desktop,//this is here only until we update the mygeotab use of heading-01-desktop to heading-xl-300
-.heading-01,
-.heading-xl-300 {
-    .zenith-font(@main-font-family, @heading-01-font-size, @heading-01-line-height, @weight: @heading-01-weight);
+// Body Drive
+.body-01-tablet-drive,
+.tablet-body-l-400-drive {
+    .font(var(--main-font), 20px, @line-height: 30px, @letter-spacing: 0, @weight: 400);
 }
 
-.heading-02,
-.heading-l-400 {
-    .zenith-font(@main-font-family, @heading-02-font-size, @heading-02-line-height);
+.body-01-mobile-drive,
+.mobile-body-l-400-drive {
+    .font(var(--main-font), 18px, @line-height: 28px, @letter-spacing: 0, @weight: 400);
 }
 
-.heading-03,
-.heading-m-300 {
-    .zenith-font(@main-font-family, @heading-03-font-size, @heading-03-line-height, @weight: @heading-01-weight);
+@media (max-width: 640px) {
+    .tablet-body-l-400-drive {
+        .font(var(--main-font), 18px, @line-height: 28px, @letter-spacing: 0, @weight: 400);
+    }
 }
 
-.heading-04,
-.heading-s-500 {
-    .zenith-font(@main-font-family, @heading-04-font-size, @heading-04-line-height, @weight: @heading-04-weight);
+.body-02-short-tablet-drive,
+.tablet-body-m-400-short-drive {
+    .font(var(--main-font), 18px, @line-height: 22px, @weight: 400);
 }
 
-.heading-05,
-.heading-xs-500 {
-    .zenith-font(@main-font-family, @heading-05-font-size, @base-line-height, @heading-05-letter-spacing, @heading-05-weight);
+.body-02-short-mobile-drive,
+.mobile-body-m-400-short-drive {
+    .font(var(--main-font), 16px, @line-height: 20px, @weight: 400);
 }
 
-.heading-06 {
-    .zenith-font(@main-font-family, @body-tall-font-size, @body-line-height, @heading-06-letter-spacing, @heading-05-weight);
+@media (max-width: 640px) {
+    .tablet-body-m-400-short-drive {
+        .font(var(--main-font), 16px, @line-height: 20px, @weight: 400);
+    }
 }
 
-.heading-07,
-.heading-xs-300 {
-    .zenith-font(@main-font-family, @heading-05-font-size, @base-line-height, @heading-05-letter-spacing, @weight: @heading-01-weight);
+.body-02-tall-tablet-drive,
+.tablet-body-m-400-tall-drive {
+    .font(var(--main-font), 18px, @line-height: 28px, @weight: 400);
 }
 
-// Data
-.data-01,
-.data-xxl {
-    .zenith-font(@main-font-family, @data-01-font-size, @data-01-line-height);
+.body-02-tall-mobile-drive,
+.mobile-body-m-400-tall-drive {
+    .font(var(--main-font), 16px, @line-height: 26px, @weight: 400);
 }
 
-.data-02,
-.data-xl {
-    .zenith-font(@main-font-family, @data-02-font-size, @data-02-line-height);
+@media (max-width: 640px) {
+    .tablet-body-m-400-tall-drive {
+        .font(var(--main-font), 16px, @line-height: 26px, @weight: 400);
+    }
 }
 
-.data-03,
-.data-l {
-    .zenith-font(@main-font-family, @data-03-font-size, @data-03-line-height);
+.body-03-tablet-drive,
+.tablet-body-s-700-drive {
+    .font(var(--main-font), 16px, @line-height: 22px, @letter-spacing: 0.32px, @weight: 700);
 }
 
-.data-04,
-.data-m {
-    .zenith-font(@main-font-family, @data-04-font-size, @data-04-line-height);
+.body-03-mobile-drive,
+.mobile-body-s-700-drive {
+    .font(var(--main-font), 14px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 700);
 }
 
-.data-05,
-.data-s {
-    .zenith-font(@main-font-family, @data-05-font-size, @data-05-line-height);
+@media (max-width: 640px) {
+    .tablet-body-s-700-drive {
+        .font(var(--main-font), 14px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 700);
+    }
 }
 
-.data-06,
-.data-xs {
-    .zenith-font(@main-font-family, @data-06-font-size, @data-06-line-height);
+.body-04-tablet-drive,
+.tablet-body-s-400-drive {
+    .font(var(--main-font), 16px, @line-height: 22px, @letter-spacing: 0.32px, @weight: 400);
 }
 
-// Drive
-
-// Labels Drive
-.label-01-drive,
-.label-400-drive {
-    .zenith-drive-font(@driver-font-family);
+.body-04-mobile-drive,
+.mobile-body-s-400-drive {
+    .font(var(--main-font), 14px, @line-height: 20px, @letter-spacing: 0.32px, @weight: 400);
 }
 
-// Body Drive
-.body-01-drive,
-.body-l-400-drive {
-    .zenith-drive-font(@driver-font-family, @body-01-drive-font-size, @body-01-drive-line-height, @body-01-drive-letter-spacing);
+@media (max-width: 640px) {
+    .tablet-body-s-400-drive {
+        .font(var(--main-font), 14px, @line-height: 20px, @letter-spacing: 0.32px, @weight: 400);
+    }
 }
 
-.body-02-short-drive,
-.body-m-400-short-drive {
-    .zenith-drive-font(@driver-font-family, @body-02-short-drive-font-size, @body-02-short-drive-line-height);
+.body-05-tablet-drive,
+.tablet-body-s-400-italic-drive {
+    .font(var(--main-font), 16px, @line-height: 20px, @letter-spacing: 0.32px, @weight: 400, @style: italic);
 }
 
-.body-02-tall-drive,
-.body-m-400-tall-drive {
-    .zenith-drive-font(@driver-font-family, @body-02-tall-drive-font-size, @body-02-tall-drive-line-height);
+.body-05-mobile-drive,
+.mobile-body-s-400-italic-drive {
+    .font(var(--main-font), 14px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 400, @style: italic);
 }
 
-.body-03-drive,
-.body-s-700-drive {
-    .zenith-drive-font(@driver-font-family,  @line-height: @body-03-drive-line-height, @weight: @body-03-drive-weight);
+@media (max-width: 640px) {
+    .tablet-body-s-400-italic-drive {
+        .font(var(--main-font), 14px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 400, @style: italic);
+    }
 }
 
-.body-04-drive,
-.body-s-400-drive {
-    .zenith-drive-font(@driver-font-family, @line-height: @body-04-drive-line-height);
+// Headings
+.heading-01-desktop,
+.heading-xl-300 {
+    .font(var(--main-font), 28px, @line-height: 36px, @weight: 300);
 }
 
-.body-05-drive,
-.body-s-400-italic-drive {
-    .zenith-drive-font(@driver-font-family, @line-height: @body-05-drive-line-height, @style: @body-05-drive-style);
+.heading-01-mobile,
+.heading-xl-300-mobile {
+    .font(var(--main-font), 20px, @line-height: 36px, @weight: 300);
 }
 
-// Headings Drive
-.heading-01-drive,
-.heading-xl-300-drive {
-    .zenith-drive-font(@driver-font-family, @heading-01-drive-font-size, @heading-01-drive-line-height, @weight: @heading-01-drive-weight);
+@media (max-width: 640px) {
+    .heading-xl-300 {
+        .font(var(--main-font), 20px, @line-height: 36px, @weight: 300);
+    }
 }
 
-.heading-02-drive,
-.heading-l-400-drive {
-    .zenith-drive-font(@driver-font-family, @heading-02-drive-font-size, @heading-02-drive-line-height);
+.heading-02,
+.heading-l-400 {
+    .font(var(--main-font), 20px, @line-height: 24px, @weight: 400);
 }
 
-.heading-03-drive,
-.heading-m-300-drive {
-    .zenith-drive-font(@driver-font-family, @heading-03-drive-font-size, @heading-03-drive-line-height, @weight: @heading-01-drive-weight);
+.heading-03-desktop,
+.heading-m-300 {
+    .font(var(--main-font), 20px, @line-height: 28px, @weight: 300);
 }
 
-.heading-04-drive,
-.heading-m-500-drive {
-    .zenith-drive-font(@driver-font-family, @heading-04-drive-font-size, @heading-04-drive-line-height, @weight: @heading-04-drive-weight);
+.heading-03-mobile,
+.heading-m-300-mobile {
+    .font(var(--main-font), 18px, @line-height: 28px, @weight: 300);
 }
 
-.heading-05-drive,
-.heading-s-500-drive {
-    .zenith-drive-font(@driver-font-family, @heading-05-drive-font-size, @heading-05-drive-line-height, @heading-05-drive-letter-spacing, @weight: @heading-04-drive-weight);
+@media (max-width: 640px) {
+    .heading-m-300 {
+        .font(var(--main-font), 18px, @line-height: 28px, @weight: 300);
+    }
 }
 
-.heading-06-drive {
-    .zenith-drive-font(@driver-font-family, @heading-06-drive-font-size, @body-line-height, @heading-06-drive-letter-spacing, @weight: @heading-04-drive-weight, @text-transform: @heading-06-text-trasnform);
+.heading-04,
+.heading-s-500 {
+    .font(var(--main-font), 16px, @line-height: 24px, @weight: 500);
 }
 
-.heading-07-drive,
-.heading-s-300-drive {
-    .zenith-drive-font(@driver-font-family, @heading-07-drive-font-size, @heading-07-drive-line-height, @heading-05-drive-letter-spacing, @weight: @heading-01-drive-weight);
+.heading-05,
+.heading-xs-500 {
+    .font(var(--main-font), 14px, @line-height: 16px, 0.16px, 500);
 }
 
-// Data Drive
-.data-01-drive,
-.data-xl-drive {
-    .zenith-drive-font(@driver-font-family, @data-01-drive-font-size, @data-01-drive-line-height);
+.heading-06 {
+    .font(var(--main-font), 14px, @line-height: 24px, 0, 500, normal, uppercase);
 }
 
-.data-02-drive,
-.data-l-drive {
-    .zenith-drive-font(@driver-font-family, @data-02-drive-font-size, @data-02-drive-line-height);
+.heading-07,
+.heading-xs-300 {
+    .font(var(--main-font), 14px, @line-height: 16px, 0.16px, 300);
 }
 
-.data-03-drive,
-.data-m-drive {
-    .zenith-drive-font(@driver-font-family, @data-03-drive-font-size, @data-03-drive-line-height);
+// Headings Drive
+.heading-01-tablet-drive,
+.tablet-heading-xl-300-drive {
+    .font(var(--main-font), 26px, 34px, @weight: 300);
 }
 
-.data-04-drive,
-.data-s-drive {
-    .zenith-drive-font(@driver-font-family, @data-04-drive-font-size, @data-04-drive-line-height);
+.heading-01-mobile-drive,
+.mobile-heading-xl-300-drive {
+    .font(var(--main-font), 24px, 32px, @weight: 300);
 }
 
-// Responsive overrides (mobile — max-width: 640px)
 @media (max-width: 640px) {
-    // MyGeotab
-    .heading-xl-300 {
-        .zenith-font(@main-font-family, @heading-01-font-mobile-size, @heading-01-line-height, @weight: @heading-01-weight);
+    .tablet-heading-xl-300-drive {
+        .font(var(--main-font), 24px, 32px, @weight: 300);
     }
+}
 
-    .heading-m-300 {
-        .zenith-font(@main-font-family, @heading-03-font-mobile-size, @heading-03-line-height, @weight: @heading-01-weight);
-    }
+.heading-02-tablet-drive,
+.tablet-heading-l-400-drive {
+    .font(var(--main-font), 24px, 30px, @weight: 400);
+}
 
-    // Drive
-    .label-01-drive,
-    .label-400-drive {
-        .zenith-drive-font(@driver-font-family, @drive-base-font-mobile-size);
-    }
+.heading-02-mobile-drive,
+.mobile-heading-l-400-drive {
+    .font(var(--main-font), 22px, 28px, @weight: 400);
+}
 
-    .body-01-drive,
-    .body-l-400-drive {
-        .zenith-drive-font(@driver-font-family, @body-01-drive-font-mobile-size, @body-01-drive-line-height-mobile, @body-01-drive-letter-spacing);
+@media (max-width: 640px) {
+    .tablet-heading-l-400-drive {
+        .font(var(--main-font), 22px, 28px, @weight: 400);
     }
+}
 
-    .body-02-short-drive,
-    .body-m-400-short-drive {
-        .zenith-drive-font(@driver-font-family, @body-02-short-drive-font-mobile-size, @body-02-short-drive-line-height-mobile);
-    }
+.heading-03-tablet-drive,
+.tablet-heading-m-300-drive {
+    .font(var(--main-font), 20px, 26px, @weight: 300);
+}
 
-    .body-02-tall-drive,
-    .body-m-400-tall-drive {
-        .zenith-drive-font(@driver-font-family, @body-02-tall-drive-font-mobile-size, @body-02-tall-drive-line-height-mobile);
-    }
+.heading-03-mobile-drive,
+.mobile-heading-m-300-drive {
+    .font(var(--main-font), 18px, 24px, @weight: 300);
+}
 
-    .body-03-drive,
-    .body-s-700-drive {
-        .zenith-drive-font(@driver-font-family, @drive-base-font-mobile-size, @line-height: @body-03-drive-line-height, @weight: @body-03-drive-weight);
+@media (max-width: 640px) {
+    .tablet-heading-m-300-drive {
+        .font(var(--main-font), 18px, 24px, @weight: 300);
     }
+}
 
-    .body-04-drive,
-    .body-s-400-drive {
-        .zenith-drive-font(@driver-font-family, @drive-base-font-mobile-size, @body-04-drive-line-height-mobile);
-    }
+.heading-04-tablet-drive,
+.tablet-heading-m-500-drive {
+    .font(var(--main-font), 20px, 28px, @weight: 500);
+}
 
-    .body-05-drive,
-    .body-s-400-italic-drive {
-        .zenith-drive-font(@driver-font-family, @drive-base-font-mobile-size, @body-05-drive-line-height, @style: @body-05-drive-style);
-    }
+.heading-04-mobile-drive,
+.mobile-heading-m-500-drive {
+    .font(var(--main-font), 18px, 26px, @weight: 500);
+}
 
-    .heading-01-drive,
-    .heading-xl-300-drive {
-        .zenith-drive-font(@driver-font-family, @heading-01-drive-font-mobile-size, @heading-01-drive-line-height-mobile, @weight: @heading-01-drive-weight);
+@media (max-width: 640px) {
+    .tablet-heading-m-500-drive {
+        .font(var(--main-font), 18px, 26px, @weight: 500);
     }
+}
 
-    .heading-02-drive,
-    .heading-l-400-drive {
-        .zenith-drive-font(@driver-font-family, @heading-02-drive-font-mobile-size, @heading-02-drive-line-height-mobile);
-    }
+.heading-05-tablet-drive,
+.tablet-heading-s-500-drive {
+    .font(var(--main-font), 18px, 22px, 0.16px, 500);
+}
 
-    .heading-03-drive,
-    .heading-m-300-drive {
-        .zenith-drive-font(@driver-font-family, @heading-03-drive-font-mobile-size, @heading-03-drive-mobile-line-height, @weight: @heading-01-drive-weight);
-    }
+.heading-05-mobile-drive,
+.mobile-heading-s-500-drive {
+    .font(var(--main-font), 16px, 20px, 0.16px, 500);
+}
 
-    .heading-04-drive,
-    .heading-m-500-drive {
-        .zenith-drive-font(@driver-font-family, @heading-04-drive-font-mobile-size, @heading-04-drive-mobile-line-height, @weight: @heading-04-drive-weight);
+@media (max-width: 640px) {
+    .tablet-heading-s-500-drive {
+        .font(var(--main-font), 16px, 20px, 0.16px, 500);
     }
+}
 
-    .heading-05-drive,
-    .heading-s-500-drive {
-        .zenith-drive-font(@driver-font-family, @heading-05-drive-font-mobile-size, @heading-05-drive-mobile-line-height, @heading-05-drive-letter-spacing, @weight: @heading-04-drive-weight);
-    }
+.heading-06-tablet-drive {
+    .font(var(--main-font), 14px, 22px, 0, 500, normal, uppercase);
+}
+
+.heading-06-mobile-drive {
+    .font(var(--main-font), 12px, 20px, 0, 500, normal, uppercase);
+}
+
+.heading-07-tablet-drive,
+.tablet-heading-s-300-drive {
+    .font(var(--main-font), 18px, 20px, 0.16px, 300);
+}
 
-    .heading-07-drive,
-    .heading-s-300-drive {
-        .zenith-drive-font(@driver-font-family, @heading-07-drive-font-mobile-size, @heading-07-drive-mobile-line-height, @heading-05-drive-letter-spacing, @weight: @heading-01-drive-weight);
+.heading-07-mobile-drive,
+.mobile-heading-s-300-drive {
+    .font(var(--main-font), 16px, 18px, 0.16px, 300);
+}
+
+@media (max-width: 640px) {
+    .tablet-heading-s-300-drive {
+        .font(var(--main-font), 16px, 18px, 0.16px, 300);
     }
+}
+
+// Data
+.data-01,
+.data-xxl {
+    .font(var(--main-font-data), 32px, @line-height: 40px);
+}
+
+.data-02,
+.data-xl {
+    .font(var(--main-font-data), 24px, 32px);
+}
+
+.data-03,
+.data-l {
+    .font(var(--main-font-data), 20px, 24px);
+}
+
+.data-04,
+.data-m {
+    .font(var(--main-font-data), 18px, 21px);
+}
+
+.data-05,
+.data-s {
+    .font(var(--main-font-data), 16px, 18px);
+}
+
+.data-06,
+.data-xs {
+    .font(var(--main-font-data), 14px, 16px);
+}
+
+// Data Drive
+.data-01-tablet-drive,
+.tablet-data-xl-drive {
+    .font(var(--data-font-drive), 34px, 42px);
+}
 
-    .data-01-drive,
-    .data-xl-drive {
-        .zenith-drive-font(@driver-font-family, @data-01-drive-mobile-size, @data-01-drive-mobile-line-height);
+.data-01-mobile-drive,
+.mobile-data-xl-drive {
+    .font(var(--data-font-drive), 32px, 40px);
+}
+
+@media (max-width: 640px) {
+    .tablet-data-xl-drive {
+        .font(var(--data-font-drive), 32px, 40px);
     }
+}
+
+.data-02-tablet-drive,
+.tablet-data-l-drive {
+    .font(var(--data-font-drive), 22px, 26px);
+}
 
-    .data-02-drive,
-    .data-l-drive {
-        .zenith-drive-font(@driver-font-family, @data-02-drive-mobile-size, @data-02-drive-mobile-line-height);
+.data-02-mobile-drive,
+.mobile-data-l-drive {
+    .font(var(--data-font-drive), 20px, 24px);
+}
+
+@media (max-width: 640px) {
+    .tablet-data-l-drive {
+        .font(var(--data-font-drive), 20px, 24px);
     }
+}
 
-    .data-03-drive,
-    .data-m-drive {
-        .zenith-drive-font(@driver-font-family, @data-03-drive-mobile-size, @data-03-drive-mobile-line-height);
+.data-03-tablet-drive,
+.tablet-data-m-drive {
+    .font(var(--data-font-drive), 20px, 22px);
+}
+
+.data-03-mobile-drive,
+.mobile-data-m-drive {
+    .font(var(--data-font-drive), 16px, 21px);
+}
+
+@media (max-width: 640px) {
+    .tablet-data-m-drive {
+        .font(var(--data-font-drive), 16px, 21px);
     }
+}
 
-    .data-04-drive,
-    .data-s-drive {
-        .zenith-drive-font(@driver-font-family, @data-04-drive-mobile-size, @data-04-drive-mobile-line-height);
+.data-04-tablet-drive,
+.tablet-data-s-drive {
+    .font(var(--data-font-drive), 18px, 26px);
+}
+
+.data-04-mobile-drive,
+.mobile-data-s-drive {
+    .font(var(--data-font-drive), 16px, 24px);
+}
+
+@media (max-width: 640px) {
+    .tablet-data-s-drive {
+        .font(var(--data-font-drive), 16px, 24px);
     }
 }