[UI] Convert line-height styles to HDS tokens (HDS-5060)

Author: dchyun

ui/app/styles/components/masked-input.scss

@@ -43,7 +43,7 @@ pre.masked-font {
 
 //override bulma's pre styling
 .masked-input .display-only {
-  line-height: 1.5;
+  line-height: var(--token-typography-body-300-line-height);
   font-size: 1rem;
   padding-top: 0;
   padding-bottom: 0;

ui/app/styles/components/replication-dashboard.scss

@@ -59,7 +59,7 @@
       grid-template-columns: 1fr 1fr;
       grid-template-rows: 0.2fr 0.2fr 0.2fr;
       padding: size_variables.$spacing-24;
-      line-height: 1.5;
+      line-height: var(--token-typography-body-300-line-height);
 
       &.summary {
         grid-template-rows: 0.2fr 1fr 0.2fr 1fr;

ui/app/styles/core/element-styling.scss

@@ -124,7 +124,7 @@ pre code {
 
 body {
   font-size: var(--token-typography-body-300-font-size);
-  line-height: 1.5;
+  line-height: var(--token-typography-body-300-line-height);
   overflow-x: hidden;
   overflow-y: scroll;
 }

ui/app/styles/core/file.scss

@@ -87,7 +87,7 @@
   box-shadow: 0 4px 1px rgba(10, 10, 10, 0.06) inset;
   display: block;
   font-size: 1em;
-  line-height: 1.5;
+  line-height: var(--token-typography-body-300-line-height);
   overflow: hidden;
   padding-bottom: calc(0.375em - 1px);
   padding-left: 1em;

ui/app/styles/core/inputs.scss

@@ -19,7 +19,7 @@
   display: inline-flex;
   font-size: var(--token-typography-body-300-font-size);
   height: size_variables.$size-2;
-  line-height: 1.5;
+  line-height: var(--token-typography-body-300-line-height);
   max-width: 100%;
   padding-bottom: calc(0.375em - 1px);
   padding-left: size_variables.$spacing-12;