fix(pie-text-input): DSW-000 component font fixes (#2115)

* fix(pie-divider): DSW-000 divider font-size set to 16px

* fix(pie-text-input): DSW-000 font-size for text-input now contains px unit

.changeset/strange-coats-talk.md

@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/pie-text-input": minor
+---
+
+[Fixed] - font-size for text-input now contains px unit

.changeset/wet-fishes-look.md

@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/pie-divider": minor
+---
+
+[Fixed] - divider font-size set to 16px

packages/components/pie-divider/src/divider.scss

@@ -1,54 +1,58 @@
 @use '@justeattakeaway/pie-css/scss' as p;
 
 .c-divider {
-  --divider-bg-color: var(--dt-color-divider-default);
-  --divider-width: 100%;
-  --divider-min-width: 16px;
-  --divider-height: 1px;
-  --divider-label-max-width: 90%;
-
-  width: var(--divider-width);
-
-  &,
-  hr {
-    margin: 0;
-    border: 0;
-    background-color: var(--divider-bg-color);
-  }
-
-  &:not(.c-divider--labelled) {
-    height: var(--divider-height);
-  }
-
-  &.c-divider--labelled {
-    display: flex;
-    align-items: center;
-    text-align: center;
-    gap: var(--dt-spacing-b);
-    background-color: transparent;
-
-    .c-divider-label {
-      max-width: var(--divider-label-max-width);
-      word-wrap: break-word;
-    }
+    --divider-bg-color: var(--dt-color-divider-default);
+    --divider-width: 100%;
+    --divider-min-width: 16px;
+    --divider-height: 1px;
+    --divider-label-max-width: 90%;
+    --divider-font-size: #{p.font-size(--dt-font-body-l-size)};
+    --divider-line-height: #{p.font-size(--dt-font-body-l-line-height)};
+
+    width: var(--divider-width);
 
+    &,
     hr {
-      flex-grow: 1;
-      height: var(--divider-height);
-      min-width: var(--divider-min-width);
+        margin: 0;
+        border: 0;
+        background-color: var(--divider-bg-color);
     }
 
-    &.c-divider--inverse {
-      color: var(--dt-color-content-inverse);
+    &:not(.c-divider--labelled) {
+        height: var(--divider-height);
+    }
+
+    &.c-divider--labelled {
+        display: flex;
+        align-items: center;
+        text-align: center;
+        gap: var(--dt-spacing-b);
+        background-color: transparent;
+
+        .c-divider-label {
+            font-size: var(--divider-font-size);
+            line-height: var(--divider-line-height);
+            max-width: var(--divider-label-max-width);
+            word-wrap: break-word;
+        }
+
+        hr {
+            flex-grow: 1;
+            height: var(--divider-height);
+            min-width: var(--divider-min-width);
+        }
+
+        &.c-divider--inverse {
+            color: var(--dt-color-content-inverse);
+        }
     }
-  }
 
-  &.c-divider--inverse {
-    --divider-bg-color: var(--dt-color-divider-inverse);
-  }
+    &.c-divider--inverse {
+        --divider-bg-color: var(--dt-color-divider-inverse);
+    }
 
-  &.c-divider--vertical {
-    --divider-width: 1px;
-    --divider-height: 100%;
-  }
+    &.c-divider--vertical {
+        --divider-width: 1px;
+        --divider-height: 100%;
+    }
 }

packages/components/pie-text-input/src/text-input.scss

@@ -10,7 +10,8 @@
     --input-border-color: var(--dt-color-interactive-form);
     --input-container-color: var(--dt-color-container-default);
     --input-radius: var(--dt-radius-rounded-c);
-    --input-font-size: var(--dt-font-body-l-size);
+    --input-font-size: #{p.font-size(--dt-font-body-l-size)};
+    --input-line-height: #{p.font-size(--dt-font-body-l-line-height)};
     --input-height: 48px;
     --input-cursor: text;
 
@@ -25,8 +26,8 @@
     padding-inline-end: var(--input-padding-inline);
     padding-block-start: var(--input-padding-block);
     padding-block-end: var(--input-padding-block);
-    line-height: 24px;
     font-size: var(--input-font-size);
+    line-height: var(--input-line-height);
     display: flex;
     flex-wrap: nowrap;
     align-items: center;