@geotab/zenith 3.8.0 → 3.9.0-beta.0

package/dist/commonStyles/typography/typography.less

@@ -1,432 +1,567 @@
-.font(
-    @font: Roboto,
-    @size,
-    @line-height: 16px,
-    @letter-spacing: 0,
-    @weight: 400,
-    @style: normal,
+//**********//
+// 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,
     @text-transform: none,
 ) {
     font-family: @font;
-    font-size: @size;
+    font-size: (@size / @rem);
     font-style: @style;
     font-weight: @weight;
-    letter-spacing: @letter-spacing;
-    line-height: @line-height;
+    letter-spacing: (@letter-spacing / @rem);
+    line-height: (@line-height / @rem);
     text-transform: @text-transform;
-}
-
-: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;
-}
+    text-decoration: none;
 
-// Labels
-.label-01,
-.body-label-400 {
-    .font(var(--main-font), 12px, @line-height: 16px, @letter-spacing: 0.32px, @weight: 400);
+    html:lang(ar) & {
+        font-family: @arabic-font-family;
+    }
 }
 
-// Labels Drive
-.label-01-tablet-drive,
-.tablet-label-400-drive {
-    .font(var(--main-font), 16px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 400);
+.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;
 }
 
-.label-01-mobile-drive,
-.mobile-label-400-drive {
-    .font(var(--main-font), 14px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 400);
-}
+// MyGeotab
 
-@media (max-width: 640px) {
-    .tablet-label-400-drive {
-        .font(var(--main-font), 14px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 400);
-    }
+// Labels
+.label-01,
+.body-label-400,
+.body-04,
+.body-s-400 {
+    .zenith-font(@main-font-family);
 }
 
 // Body
 .body-01,
 .body-l-400 {
-    .font(var(--main-font), 16px, @line-height: 24px, @letter-spacing: 0, @weight: 400);
+    .zenith-font(@main-font-family, @body-font-size, @body-line-height, @body-letter-spacing);
 }
 
 .body-02-short,
 .body-m-400-short {
-    .font(var(--main-font), 14px, @line-height: 16px, @letter-spacing: 0, @weight: 400);
+    .zenith-font(@main-font-family, @body-short-font-size, @base-line-height, @body-letter-spacing);
 }
 
 .body-02-tall,
 .body-m-400-tall {
-    .font(var(--main-font), 14px, @line-height: 28px, @weight: 400, @letter-spacing: 0);
+    .zenith-font(@main-font-family, @body-tall-font-size, @body-tall-line-height, @body-letter-spacing);
 }
 
 .body-03,
 .body-s-700 {
-    .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);
+    .zenith-font(@main-font-family, @weight: @body-03-weight);
 }
 
 .body-05,
 .body-s-400-italic {
-    .font(var(--main-font), 12px, @line-height: 16px, @letter-spacing: 0.32px, @weight: 400, @style: italic);
-}
-
-// Body Drive
-.body-01-tablet-drive,
-.tablet-body-l-400-drive {
-    .font(var(--main-font), 20px, @line-height: 30px, @letter-spacing: 0, @weight: 400);
-}
-
-.body-01-mobile-drive,
-.mobile-body-l-400-drive {
-    .font(var(--main-font), 18px, @line-height: 28px, @letter-spacing: 0, @weight: 400);
-}
-
-@media (max-width: 640px) {
-    .tablet-body-l-400-drive {
-        .font(var(--main-font), 18px, @line-height: 28px, @letter-spacing: 0, @weight: 400);
-    }
-}
-
-.body-02-short-tablet-drive,
-.tablet-body-m-400-short-drive {
-    .font(var(--main-font), 18px, @line-height: 22px, @weight: 400);
-}
-
-.body-02-short-mobile-drive,
-.mobile-body-m-400-short-drive {
-    .font(var(--main-font), 16px, @line-height: 20px, @weight: 400);
-}
-
-@media (max-width: 640px) {
-    .tablet-body-m-400-short-drive {
-        .font(var(--main-font), 16px, @line-height: 20px, @weight: 400);
-    }
-}
-
-.body-02-tall-tablet-drive,
-.tablet-body-m-400-tall-drive {
-    .font(var(--main-font), 18px, @line-height: 28px, @weight: 400);
-}
-
-.body-02-tall-mobile-drive,
-.mobile-body-m-400-tall-drive {
-    .font(var(--main-font), 16px, @line-height: 26px, @weight: 400);
-}
-
-@media (max-width: 640px) {
-    .tablet-body-m-400-tall-drive {
-        .font(var(--main-font), 16px, @line-height: 26px, @weight: 400);
-    }
-}
-
-.body-03-tablet-drive,
-.tablet-body-s-700-drive {
-    .font(var(--main-font), 16px, @line-height: 22px, @letter-spacing: 0.32px, @weight: 700);
-}
-
-.body-03-mobile-drive,
-.mobile-body-s-700-drive {
-    .font(var(--main-font), 14px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 700);
-}
-
-@media (max-width: 640px) {
-    .tablet-body-s-700-drive {
-        .font(var(--main-font), 14px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 700);
-    }
-}
-
-.body-04-tablet-drive,
-.tablet-body-s-400-drive {
-    .font(var(--main-font), 16px, @line-height: 22px, @letter-spacing: 0.32px, @weight: 400);
-}
-
-.body-04-mobile-drive,
-.mobile-body-s-400-drive {
-    .font(var(--main-font), 14px, @line-height: 20px, @letter-spacing: 0.32px, @weight: 400);
-}
-
-@media (max-width: 640px) {
-    .tablet-body-s-400-drive {
-        .font(var(--main-font), 14px, @line-height: 20px, @letter-spacing: 0.32px, @weight: 400);
-    }
-}
-
-.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-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);
-}
-
-@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);
-    }
+    .zenith-font(@main-font-family, @style: @body-05-style);
 }
 
 // Headings
-.heading-01-desktop,
+.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 {
-    .font(var(--main-font), 28px, @line-height: 36px, @weight: 300);
-}
-
-.heading-01-mobile,
-.heading-xl-300-mobile {
-    .font(var(--main-font), 20px, @line-height: 36px, @weight: 300);
-}
-
-@media (max-width: 640px) {
-    .heading-xl-300 {
-        .font(var(--main-font), 20px, @line-height: 36px, @weight: 300);
-    }
+    .zenith-font(@main-font-family, @heading-01-font-size, @heading-01-line-height, @weight: @heading-01-weight);
 }
 
 .heading-02,
 .heading-l-400 {
-    .font(var(--main-font), 20px, @line-height: 24px, @weight: 400);
+    .zenith-font(@main-font-family, @heading-02-font-size, @heading-02-line-height);
 }
 
-.heading-03-desktop,
+.heading-03,
 .heading-m-300 {
-    .font(var(--main-font), 20px, @line-height: 28px, @weight: 300);
-}
-
-.heading-03-mobile,
-.heading-m-300-mobile {
-    .font(var(--main-font), 18px, @line-height: 28px, @weight: 300);
-}
-
-@media (max-width: 640px) {
-    .heading-m-300 {
-        .font(var(--main-font), 18px, @line-height: 28px, @weight: 300);
-    }
+    .zenith-font(@main-font-family, @heading-03-font-size, @heading-03-line-height, @weight: @heading-01-weight);
 }
 
 .heading-04,
 .heading-s-500 {
-    .font(var(--main-font), 16px, @line-height: 24px, @weight: 500);
+    .zenith-font(@main-font-family, @heading-04-font-size, @heading-04-line-height, @weight: @heading-04-weight);
 }
 
 .heading-05,
 .heading-xs-500 {
-    .font(var(--main-font), 14px, @line-height: 16px, 0.16px, 500);
+    .zenith-font(@main-font-family, @heading-05-font-size, @base-line-height, @heading-05-letter-spacing, @heading-05-weight);
 }
 
 .heading-06 {
-    .font(var(--main-font), 14px, @line-height: 24px, 0, 500, normal, uppercase);
+    .zenith-font(@main-font-family, @body-tall-font-size, @body-line-height, @heading-06-letter-spacing, @heading-05-weight);
 }
 
 .heading-07,
 .heading-xs-300 {
-    .font(var(--main-font), 14px, @line-height: 16px, 0.16px, 300);
+    .zenith-font(@main-font-family, @heading-05-font-size, @base-line-height, @heading-05-letter-spacing, @weight: @heading-01-weight);
 }
 
-// Headings Drive
-.heading-01-tablet-drive,
-.tablet-heading-xl-300-drive {
-    .font(var(--main-font), 26px, 34px, @weight: 300);
+// Data
+.data-01,
+.data-xxl {
+    .zenith-font(@main-font-family, @data-01-font-size, @data-01-line-height);
 }
 
-.heading-01-mobile-drive,
-.mobile-heading-xl-300-drive {
-    .font(var(--main-font), 24px, 32px, @weight: 300);
+.data-02,
+.data-xl {
+    .zenith-font(@main-font-family, @data-02-font-size, @data-02-line-height);
 }
 
-@media (max-width: 640px) {
-    .tablet-heading-xl-300-drive {
-        .font(var(--main-font), 24px, 32px, @weight: 300);
-    }
+.data-03,
+.data-l {
+    .zenith-font(@main-font-family, @data-03-font-size, @data-03-line-height);
 }
 
-.heading-02-tablet-drive,
-.tablet-heading-l-400-drive {
-    .font(var(--main-font), 24px, 30px, @weight: 400);
+.data-04,
+.data-m {
+    .zenith-font(@main-font-family, @data-04-font-size, @data-04-line-height);
 }
 
-.heading-02-mobile-drive,
-.mobile-heading-l-400-drive {
-    .font(var(--main-font), 22px, 28px, @weight: 400);
+.data-05,
+.data-s {
+    .zenith-font(@main-font-family, @data-05-font-size, @data-05-line-height);
 }
 
-@media (max-width: 640px) {
-    .tablet-heading-l-400-drive {
-        .font(var(--main-font), 22px, 28px, @weight: 400);
-    }
+.data-06,
+.data-xs {
+    .zenith-font(@main-font-family, @data-06-font-size, @data-06-line-height);
 }
 
-.heading-03-tablet-drive,
-.tablet-heading-m-300-drive {
-    .font(var(--main-font), 20px, 26px, @weight: 300);
-}
+// Drive
 
-.heading-03-mobile-drive,
-.mobile-heading-m-300-drive {
-    .font(var(--main-font), 18px, 24px, @weight: 300);
+// Labels Drive
+.label-01-drive,
+.label-400-drive {
+    .zenith-drive-font(@driver-font-family);
 }
 
-@media (max-width: 640px) {
-    .tablet-heading-m-300-drive {
-        .font(var(--main-font), 18px, 24px, @weight: 300);
-    }
+// 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);
 }
 
-.heading-04-tablet-drive,
-.tablet-heading-m-500-drive {
-    .font(var(--main-font), 20px, 28px, @weight: 500);
+.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);
 }
 
-.heading-04-mobile-drive,
-.mobile-heading-m-500-drive {
-    .font(var(--main-font), 18px, 26px, @weight: 500);
+.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);
 }
 
-@media (max-width: 640px) {
-    .tablet-heading-m-500-drive {
-        .font(var(--main-font), 18px, 26px, @weight: 500);
-    }
+.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);
 }
 
-.heading-05-tablet-drive,
-.tablet-heading-s-500-drive {
-    .font(var(--main-font), 18px, 22px, 0.16px, 500);
+.body-04-drive,
+.body-s-400-drive {
+    .zenith-drive-font(@driver-font-family, @line-height: @body-04-drive-line-height);
 }
 
-.heading-05-mobile-drive,
-.mobile-heading-s-500-drive {
-    .font(var(--main-font), 16px, 20px, 0.16px, 500);
+.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);
 }
 
-@media (max-width: 640px) {
-    .tablet-heading-s-500-drive {
-        .font(var(--main-font), 16px, 20px, 0.16px, 500);
-    }
+// 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);
 }
 
-.heading-06-tablet-drive {
-    .font(var(--main-font), 14px, 22px, 0, 500, normal, uppercase);
+.heading-02-drive,
+.heading-l-400-drive {
+    .zenith-drive-font(@driver-font-family, @heading-02-drive-font-size, @heading-02-drive-line-height);
 }
 
-.heading-06-mobile-drive {
-    .font(var(--main-font), 12px, 20px, 0, 500, normal, uppercase);
+.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-07-tablet-drive,
-.tablet-heading-s-300-drive {
-    .font(var(--main-font), 18px, 20px, 0.16px, 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-07-mobile-drive,
-.mobile-heading-s-300-drive {
-    .font(var(--main-font), 16px, 18px, 0.16px, 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) {
-    .tablet-heading-s-300-drive {
-        .font(var(--main-font), 16px, 18px, 0.16px, 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);
 }
 
-// Data
-.data-01,
-.data-xxl {
-    .font(var(--main-font-data), 32px, @line-height: 40px);
+.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);
 }
 
-.data-02,
-.data-xl {
-    .font(var(--main-font-data), 24px, 32px);
+// Data Drive
+.data-01-drive,
+.data-xl-drive {
+    .zenith-drive-font(@driver-font-family, @data-01-drive-font-size, @data-01-drive-line-height);
 }
 
-.data-03,
-.data-l {
-    .font(var(--main-font-data), 20px, 24px);
+.data-02-drive,
+.data-l-drive {
+    .zenith-drive-font(@driver-font-family, @data-02-drive-font-size, @data-02-drive-line-height);
 }
 
-.data-04,
-.data-m {
-    .font(var(--main-font-data), 18px, 21px);
+.data-03-drive,
+.data-m-drive {
+    .zenith-drive-font(@driver-font-family, @data-03-drive-font-size, @data-03-drive-line-height);
 }
 
-.data-05,
-.data-s {
-    .font(var(--main-font-data), 16px, 18px);
+.data-04-drive,
+.data-s-drive {
+    .zenith-drive-font(@driver-font-family, @data-04-drive-font-size, @data-04-drive-line-height);
 }
 
-.data-06,
-.data-xs {
-    .font(var(--main-font-data), 14px, 16px);
-}
+// 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);
+    }
 
-// Data Drive
-.data-01-tablet-drive,
-.tablet-data-xl-drive {
-    .font(var(--data-font-drive), 34px, 42px);
-}
+    .heading-m-300 {
+        .zenith-font(@main-font-family, @heading-03-font-mobile-size, @heading-03-line-height, @weight: @heading-01-weight);
+    }
 
-.data-01-mobile-drive,
-.mobile-data-xl-drive {
-    .font(var(--data-font-drive), 32px, 40px);
-}
+    // Drive
+    .label-01-drive,
+    .label-400-drive {
+        .zenith-drive-font(@driver-font-family, @drive-base-font-mobile-size);
+    }
 
-@media (max-width: 640px) {
-    .tablet-data-xl-drive {
-        .font(var(--data-font-drive), 32px, 40px);
+    .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);
     }
-}
 
-.data-02-tablet-drive,
-.tablet-data-l-drive {
-    .font(var(--data-font-drive), 22px, 26px);
-}
+    .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);
+    }
 
-.data-02-mobile-drive,
-.mobile-data-l-drive {
-    .font(var(--data-font-drive), 20px, 24px);
-}
+    .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);
+    }
 
-@media (max-width: 640px) {
-    .tablet-data-l-drive {
-        .font(var(--data-font-drive), 20px, 24px);
+    .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);
     }
-}
 
-.data-03-tablet-drive,
-.tablet-data-m-drive {
-    .font(var(--data-font-drive), 20px, 22px);
-}
+    .body-04-drive,
+    .body-s-400-drive {
+        .zenith-drive-font(@driver-font-family, @drive-base-font-mobile-size, @body-04-drive-line-height-mobile);
+    }
 
-.data-03-mobile-drive,
-.mobile-data-m-drive {
-    .font(var(--data-font-drive), 16px, 21px);
-}
+    .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);
+    }
 
-@media (max-width: 640px) {
-    .tablet-data-m-drive {
-        .font(var(--data-font-drive), 16px, 21px);
+    .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);
     }
-}
 
-.data-04-tablet-drive,
-.tablet-data-s-drive {
-    .font(var(--data-font-drive), 18px, 26px);
-}
+    .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);
+    }
 
-.data-04-mobile-drive,
-.mobile-data-s-drive {
-    .font(var(--data-font-drive), 16px, 24px);
-}
+    .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);
+    }
 
-@media (max-width: 640px) {
-    .tablet-data-s-drive {
-        .font(var(--data-font-drive), 16px, 24px);
+    .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);
+    }
+
+    .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-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);
+    }
+
+    .data-01-drive,
+    .data-xl-drive {
+        .zenith-drive-font(@driver-font-family, @data-01-drive-mobile-size, @data-01-drive-mobile-line-height);
+    }
+
+    .data-02-drive,
+    .data-l-drive {
+        .zenith-drive-font(@driver-font-family, @data-02-drive-mobile-size, @data-02-drive-mobile-line-height);
+    }
+
+    .data-03-drive,
+    .data-m-drive {
+        .zenith-drive-font(@driver-font-family, @data-03-drive-mobile-size, @data-03-drive-mobile-line-height);
+    }
+
+    .data-04-drive,
+    .data-s-drive {
+        .zenith-drive-font(@driver-font-family, @data-04-drive-mobile-size, @data-04-drive-mobile-line-height);
     }
 }