Use rem instead of em in sizing

ref DEV-1885

authui/src/authflowv2/base.css

@@ -124,52 +124,58 @@
 
   /* Typography */
   :root {
+    --typography-headline-small__font-family: inherit;
+    --typography-headline-small__font-size: 1.5rem;
+    --typography-headline-small__line-height: 2rem;
+    --typography-headline-small__letter-spacing: 0;
+    --typography-headline-small__font-weight: 700;
+
     --typography-headline-medium__font-family: inherit;
     --typography-headline-medium__font-size: 1.75rem;
-    --typography-headline-medium__line-height: 1.21428571429em; /* 34 / 28 = 1.21428571429 */
+    --typography-headline-medium__line-height: 2.125rem;
     --typography-headline-medium__letter-spacing: 0;
     --typography-headline-medium__font-weight: 700;
 
     --typography-title-medium__font-family: inherit;
     --typography-title-medium__font-size: 1rem;
-    --typography-title-medium__line-height: 1.5em;
-    --typography-title-medium__letter-spacing: 0.009375em;
+    --typography-title-medium__line-height: 1.5rem;
+    --typography-title-medium__letter-spacing: 0.009375rem;
     --typography-title-medium__font-weight: 500;
 
     --typography-title-large__font-family: inherit;
     --typography-title-large__font-size: 1.5rem;
-    --typography-title-large__line-height: 1.1428571429em; /* 32 / 28 = 1.1428571429 */
+    --typography-title-large__line-height: 1.75rem;
     --typography-title-large__letter-spacing: 0;
     --typography-title-large__font-weight: 700;
 
     --typography-label-large__font-family: inherit;
     --typography-label-large__font-size: 1rem;
-    --typography-label-large__line-height: 1.5em;
-    --typography-label-large__letter-spacing: 0.00625em;
+    --typography-label-large__line-height: 1.5rem;
+    --typography-label-large__letter-spacing: 0.00625rem;
     --typography-label-large__font-weight: 600;
 
     --typography-label-medium__font-family: inherit;
     --typography-label-medium__font-size: 0.875rem;
-    --typography-label-medium__line-height: 1.42857142857em; /* 20 / 14 = 1.42857142857 */
-    --typography-label-medium__letter-spacing: 0.03571428571em; /* 0.5 / 14 = 0.03571428571 */
+    --typography-label-medium__line-height: 1.25rem;
+    --typography-label-medium__letter-spacing: 0.03125rem;
     --typography-label-medium__font-weight: 600;
 
     --typography-body-small__font-family: inherit;
     --typography-body-small__font-size: 0.75rem;
-    --typography-body-small__line-height: 1.33333333333em; /* 16 / 12 = 1.33333333333 */
-    --typography-body-small__letter-spacing: 0.03333333333em; /* 0.4 / 12 = 0.03333333333 */
+    --typography-body-small__line-height: 1rem;
+    --typography-body-small__letter-spacing: 0.025rem;
     --typography-body-small__font-weight: 500;
 
     --typography-body-medium__font-family: inherit;
     --typography-body-medium__font-size: 0.875rem;
-    --typography-body-medium__line-height: 1.42857142857em; /* 20 / 14 = 1.42857142857 */
-    --typography-body-medium__letter-spacing: 0.01785714285em; /* 0.25 / 14 = 0.01785714285 */
+    --typography-body-medium__line-height: 1.25rem;
+    --typography-body-medium__letter-spacing: 0.015625rem;
     --typography-body-medium__font-weight: 500;
 
     --typography-body-large__font-family: inherit;
     --typography-body-large__font-size: 1rem;
-    --typography-body-large__line-height: 1.5em;
-    --typography-body-large__letter-spacing: 0.03125em;
+    --typography-body-large__line-height: 1.5rem;
+    --typography-body-large__letter-spacing: 0.03125rem;
     --typography-body-large__font-weight: 500;
   }
 

authui/src/authflowv2/components/checkbox.css

@@ -1,6 +1,6 @@
 @layer components {
   :root {
-    --checkbox__size: 1.125em;
+    --checkbox__size: 1.125rem;
     --checkbox__border-radius: 0.25em;
     --checkbox__ring-width: 1.5px;
     --checkbox__ring-color: var(--color-neutral-200);

authui/src/authflowv2/components/dialog.css

@@ -6,13 +6,13 @@
     --dialog-fade-animation-duration: 0.3s;
     --dialog-slide-animation-duration: 0.3s;
 
-    --dialog-title__font-family: var(--typography-title-large__font-family);
-    --dialog-title__font-size: var(--typography-title-large__font-size);
-    --dialog-title__line-height: var(--typography-title-large__line-height);
+    --dialog-title__font-family: var(--typography-headline-small__font-family);
+    --dialog-title__font-size: var(--typography-headline-small__font-size);
+    --dialog-title__line-height: var(--typography-headline-small__line-height);
     --dialog-title__letter-spacing: var(
-      --typography-title-large__letter-spacing
+      --typography-headline-small__letter-spacing
     );
-    --dialog-title__font-weight: var(--typography-title-large__font-weight);
+    --dialog-title__font-weight: var(--typography-headline-small__font-weight);
     --dialog-title__text-color: var(--color-neutral-700);
 
     --dialog-description__font-family: var(
@@ -124,7 +124,7 @@
   }
 
   .close-btn {
-    /* close button icon distance to top/right edge = 21px 
+    /* close button icon distance to top/right edge = 21px
      * close button icon size = 14px
      * close button button size = 44px
      * Actual distance = [(14 / 2) + 21] - (44 / 2) = 6px
@@ -153,7 +153,7 @@
     }
 
     .close-btn {
-      /* close button icon distance to top/right edge = 25px 
+      /* close button icon distance to top/right edge = 25px
        * close button icon size = 14px
        * close button button size = 44px
        * Actual distance = [(14 / 2) + 25] - (44 / 2) = 10px

authui/src/authflowv2/components/otp-input.css

@@ -11,8 +11,8 @@
     --otp-input__digit-ring-width--focus: 1.5px;
     --otp-input__digit-ring-width--error: 1.5px;
     --otp-input__digit-border-radius: var(--border-radius-rounded-large);
-    --otp-input__digit-width: 2.5em;
-    --otp-input__digit-height: 2.75em;
+    --otp-input__digit-width: 2.5rem;
+    --otp-input__digit-height: 2.75rem;
 
     /* Not actually using css-masks features, ignoring stylelint false positive */
     /* stylelint-disable-next-line plugin/no-unsupported-browser-features */

authui/src/authflowv2/components/password-policy.css

@@ -44,6 +44,6 @@
   }
 
   .password-policy__icon {
-    font-size: 1.14285714286em;
+    font-size: 1rem;
   }
 }

authui/src/authflowv2/components/phone-input.css

@@ -62,8 +62,6 @@
   }
 
   .phone-input__country-flag {
-    @apply inline-block align-middle ltr:mr-1 rtl:ml-1;
-    height: 1em;
-    width: 1em;
+    @apply inline-block align-middle ltr:mr-1 rtl:ml-1 w-6 h-6;
   }
 }

authui/src/authflowv2/components/select.css

@@ -55,7 +55,7 @@
       var(--select__search-input-font-size) * 1.5
     );
 
-    --select__options-height: 100%;
+    --select__options-max-height: 100%;
     --select__options-py: 1em;
     --select__options-px: calc(var(--select__font-size) * 1);
     --select__options-space-y: 0.5em;
@@ -75,8 +75,8 @@
     --select__empty-font-weight: var(--typography-body-large-font-weight);
 
     @media (min-width: theme("screens.tablet")) {
-      --select__options-height: 18em;
-      --select__dropdown-width: 21.5625em;
+      --select__options-max-height: 18rem;
+      --select__dropdown-width: 22rem;
     }
   }
 
@@ -223,7 +223,7 @@
     @apply flex-col;
 
     padding: var(--select__options-py) var(--select__options-px);
-    max-height: var(--select__options-height);
+    max-height: var(--select__options-max-height);
     overflow-y: auto;
 
     @apply space-y-[var(--select\_\_options\_\_space-y)];