fix(input): adjust colors, padding, fonts & heights for ionic theme (#29520)

Issue number: internal

---------

## What is the current behavior?
Input styles were slightly different from the ionic theme design. 

## What is the new behavior?
Updates the following:
- The font size for input (14px) and labels (12px)
- The font weight, line-height and color for the label
- The padding for the label & helper message
- Removes the label transform in order to set `font-size` directly
- Updates the Sass variables to be referenced from `tokens` where they
were not

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

The underline (undefined) fill looks off from the design but issue
ROU-5151 exists for implementing it so I assume it will be fixed there.

- [Shapes
preview](https://ionic-framework-git-fix-input-placeholder-ionic1.vercel.app/src/components/input/test/shape?ionic:theme=ionic)
- [Fills
preview](https://ionic-framework-git-fix-input-placeholder-ionic1.vercel.app/src/components/input/test/fill?ionic:theme=ionic)

## Image Comparison

| Before | After | UX Design |
| ---| ---| ---|
|
![ionic-before](https://github.com/ionic-team/ionic-framework/assets/6577830/14158641-1118-498a-b970-c277ad505583)
|
![ionic-after](https://github.com/ionic-team/ionic-framework/assets/6577830/fbd1d167-ac3c-4fa7-817d-c5a4ac8b8d3c)
| ![UX
design](https://github.com/ionic-team/ionic-framework/assets/6577830/a3d06503-ce9e-4b15-a1ad-6d11615ec673)
|

> [!NOTE]
> The design is not going to match perfectly because we are not using
the Inter font in our tests.

core/src/components/input/input.ionic.outline.scss

@@ -121,14 +121,8 @@
 
 // This makes the label sit above the input.
 :host(.label-floating.input-fill-outline.input-label-placement-stacked) .label-text-wrapper {
-  @include transform(translateY(0), scale(#{$form-control-label-stacked-scale}));
   @include margin(0);
-
-  /**
-   * Label text should not extend
-   * beyond the bounds of the input.
-   */
-  max-width: calc((100% - var(--padding-start) - var(--padding-end)) / #{$form-control-label-stacked-scale});
+  @include padding(4px, null);
 }
 
 // Start/End Slots

core/src/components/input/input.ionic.scss

@@ -9,13 +9,15 @@
 :host {
   // TODO(ROU-5477): use design token here when it is added
   --color: #121212;
-  --border-width: #{$ionic-border-size-small};
-  --border-color: #{$ionic-color-neutral-300};
-  --highlight-color-valid: #{$ionic-color-success-400};
-  --highlight-color-invalid: #{$ionic-color-error-400};
-  --placeholder-color: #{$ionic-color-neutral-500};
+  --border-width: #{tokens.$ionic-border-size-small};
+  --border-color: #{tokens.$ionic-color-neutral-300};
+  --highlight-color-valid: #{tokens.$ionic-color-success-400};
+  --highlight-color-invalid: #{tokens.$ionic-color-error-400};
+  --placeholder-color: #{tokens.$ionic-color-neutral-500};
   --placeholder-opacity: 1;
-  --text-color-invalid: #{$ionic-color-error-600};
+  --text-color-invalid: #{tokens.$ionic-color-error-600};
+
+  font-size: tokens.$ionic-font-size-m;
 }
 
 // Ionic Input Sizes
@@ -72,13 +74,13 @@
   width: 16px;
   height: 16px;
 
-  color: #{$ionic-color-neutral-500};
+  color: #{tokens.$ionic-color-neutral-500};
 }
 
 .input-clear-icon:focus-visible {
-  @include border-radius($ionic-border-radius-rounded-small);
+  @include border-radius(tokens.$ionic-border-radius-rounded-small);
 
-  outline: #{$ionic-border-size-medium} solid #{$ionic-color-primary-100};
+  outline: #{tokens.$ionic-border-size-medium} solid #{tokens.$ionic-color-primary-100};
 
   opacity: 1;
 }
@@ -103,19 +105,31 @@
   display: none;
 }
 
+// Input Label
+// ----------------------------------------------------------------
+
+.label-text-wrapper {
+  color: tokens.$ionic-color-neutral-700;
+
+  font-size: tokens.$ionic-font-size-s;
+  font-weight: tokens.$ionic-font-weight-medium;
+
+  line-height: tokens.$ionic-font-line-height-s;
+}
+
+:host(.label-floating) .label-text-wrapper {
+  @include transform(none);
+}
+
 // Input Bottom Content
 // ----------------------------------------------------------------
 
 .input-bottom {
-  @include padding-horizontal(0, 0);
+  @include padding(7px, 0);
 
-  // TODO(FW-6112): Update it to `$ionic-font-weight-medium` when it's available
-  font-weight: var(--ionic-font-weight-medium, 500);
+  font-weight: tokens.$ionic-font-weight-medium;
 }
 
-// Input Bottom Text
-// ----------------------------------------------------------------
-
 .input-bottom .helper-text,
 .input-bottom .counter {
   color: tokens.$ionic-color-neutral-600;
@@ -161,13 +175,11 @@
 }
 
 :host(.input-disabled.has-focus.ion-valid) {
-  // TODO(FW-6112): Update to use the correct color token when rgb tokens are available
-  --border-color: rgba(var(--ionic-color-success-400-rgb, 82, 165, 24), 0.6);
+  --border-color: rgba(#{tokens.$ionic-color-success-400-rgb}, 0.6);
 }
 
 :host(.input-disabled.ion-touched.ion-invalid) {
-  // TODO(FW-6112): Update to use the correct color token when rgb tokens are available
-  --border-color: rgba(var(--ionic-color-error-400-rgb, 247, 44, 44), 0.6);
+  --border-color: rgba(#{tokens.$ionic-color-error-400-rgb}, 0.6);
 }
 
 :host(.input-disabled.ion-color) {

core/src/components/input/test/shape/index.html

@@ -50,19 +50,50 @@
         <div class="grid">
           <div class="grid-item">
             <h2>Default Shape</h2>
-            <ion-input fill="outline" label="Email"></ion-input>
+            <ion-input
+              fill="outline"
+              label="Label"
+              placeholder="Placeholder"
+              helper-text="Helper message"
+              counter="true"
+              maxlength="999"
+            ></ion-input>
           </div>
           <div class="grid-item">
             <h2>Soft Shape</h2>
-            <ion-input fill="outline" shape="soft" label="Email"></ion-input>
+            <ion-input
+              fill="outline"
+              shape="soft"
+              label="Label"
+              placeholder="Placeholder"
+              helper-text="Helper message"
+              counter="true"
+              maxlength="999"
+            ></ion-input>
           </div>
           <div class="grid-item">
             <h2>Round Shape</h2>
-            <ion-input fill="outline" shape="round" label="Email"></ion-input>
+            <ion-input
+              fill="outline"
+              shape="round"
+              label="Label"
+              placeholder="Placeholder"
+              helper-text="Helper message"
+              counter="true"
+              maxlength="999"
+            ></ion-input>
           </div>
           <div class="grid-item">
             <h2>Rectangular Shape</h2>
-            <ion-input fill="outline" shape="rectangular" label="Email"></ion-input>
+            <ion-input
+              fill="outline"
+              shape="rectangular"
+              label="Label"
+              placeholder="Placeholder"
+              helper-text="Helper message"
+              counter="true"
+              maxlength="999"
+            ></ion-input>
           </div>
         </div>
       </ion-content>