@geotab/zenith 3.11.1 → 3.12.0-beta.0

package/dist/commonStyles/pillStyles/pillContent.less

@@ -1,7 +1,6 @@
-@import "../common.less";
-@import "../typography/typography.less";
+@import (reference) "../common.less";
 
-@pill-min-width-default: 30px;
+@pill-min-width-default: (30 / @rem);
 @pill-max-width-default: 200px;
 
 // TODO: update to .zen-pill-content after old pill component removed remove
@@ -10,16 +9,16 @@
     @pill-height--drive: 34px;
     @pill-height--mobile: 34px;
 
-    .body-04();
+    .zen-body-s-400();
     display: flex;
     align-items: center;
     justify-content: space-between;
-    border-radius: 30px;
+    border-radius: (30 / @rem);
     height: @pill-height;
     display: grid;
     grid-auto-flow: column;
 
-    gap: 8px;
+    gap: (8 / @rem);
 
     &--icon-left {
         grid-template-columns: 12px 1fr;
@@ -38,18 +37,18 @@
 
         &.zen-pill-new-content--empty {
             grid-template-columns: 12px 18px;
-            gap: 8px;
+            gap: (8 / @rem);
         }
     }
 
     &--hidden {
-        gap: 4px;
+        gap: (4 / @rem);
     }
     &.zen-pill-new-content--drive,
     &.zen-pill-new-content--drive-tablet {
         height: @pill-height--drive;
         .zen-pill-non-actionable__icon {
-            min-width: 16px;
+            min-width: (16 / @rem);
             max-width: 16px;
             height: 16px;
         }
@@ -67,15 +66,15 @@
 
             &.zen-pill-new-content--empty {
                 grid-template-columns: 16px 22px;
-                gap: 8px;
+                gap: (8 / @rem);
             }
         }
     }
     &.zen-pill-new-content--mobile {
         height: @pill-height--mobile;
-        .body-m-400-short();
+        .zen-body-m-400-short();
         .zen-pill-non-actionable__icon {
-            min-width: 16px;
+            min-width: (16 / @rem);
             max-width: 16px;
             height: 16px;
         }
@@ -93,14 +92,14 @@
 
             &.zen-pill-new-content--empty {
                 grid-template-columns: 16px 22px;
-                gap: 8px;
+                gap: (8 / @rem);
             }
         }
     }
     &.zen-pill-new-content--drive {
-        .body-04-mobile-drive();
+        .zen-body-s-400-drive();
     }
     &.zen-pill-new-content--drive-tablet {
-        .body-04-tablet-drive();
+        .zen-body-s-400-drive();
     }
 }

package/dist/commonStyles/pillStyles/pillStyles.less

@@ -1,13 +1,12 @@
-@import "../typography/typography.less";
-@import "../colors/colors.less";
+@import "../common.less";
 
 .zen-pill-content {
-    .body-04();
+    .zen-body-s-400();
     display: flex;
     color: var(--text-primary);
     align-items: center;
     justify-content: space-between;
-    padding: 4px 12px 4px 12px;
-    border-radius: 30px;
+    padding: (4 / @rem) (12 / @rem) (4 / @rem) (12 / @rem);
+    border-radius: (30 / @rem);
     background: var(--backgrounds-content-1);
 }

package/dist/commonStyles/pillStyles/pillTextContent.less

@@ -12,9 +12,9 @@
         height: 20px;
     }
     &.zen-pill-text-content--drive {
-        .body-04-mobile-drive();
+        .zen-body-s-400-drive();
     }
     &.zen-pill-text-content--drive-tablet {
-        .body-04-tablet-drive();
+        .zen-body-s-400-drive();
     }
 }

package/dist/commonStyles/pillStyles/pillTypes.less

@@ -1,4 +1,4 @@
-@import "../common.less";
+@import (reference) "../common.less";
 
 .zen-pill-type {
     &--default {

package/dist/commonStyles/popupMixin.less

@@ -1,5 +1,5 @@
 @import "shadows/shadows.less";
-@import "common.less";
+@import (reference) "common.less";
 
 .zen-popup-default {
     .zen-shadow-dropdown-default();

package/dist/commonStyles/selectButton.less

@@ -1,4 +1,4 @@
-@import "common.less";
+@import (reference) "common.less";
 
 .zen-select-button-mixin {
     display: flex;