From 1087ee861138836699059e54aacdfeac60ef0eb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henrique=20Guimar=C3=A3es=20Ribeiro?=
 <43561537+rique223@users.noreply.github.com>
Date: Wed, 4 Sep 2024 16:22:34 -0300
Subject: [PATCH] feat(fuselage): update `InputBox` and `Field` typography
 (#1442)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Júlia Jaeger Foresti <60678893+juliajforesti@users.noreply.github.com>
---
 .changeset/sweet-sheep-film.md                            | 5 +++++
 packages/fuselage/src/components/Field/Field.styles.scss  | 8 ++++----
 .../fuselage/src/components/InputBox/InputBox.styles.scss | 8 ++++----
 3 files changed, 13 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/sweet-sheep-film.md

diff --git a/.changeset/sweet-sheep-film.md b/.changeset/sweet-sheep-film.md
new file mode 100644
index 0000000000..578c3dedb8
--- /dev/null
+++ b/.changeset/sweet-sheep-film.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": minor
+---
+
+feat(fuselage): update `InputBox` and `Field` typography
diff --git a/packages/fuselage/src/components/Field/Field.styles.scss b/packages/fuselage/src/components/Field/Field.styles.scss
index 6aefed1f6a..b3fdeda5f0 100644
--- a/packages/fuselage/src/components/Field/Field.styles.scss
+++ b/packages/fuselage/src/components/Field/Field.styles.scss
@@ -11,7 +11,7 @@
   width: 100%;
 
   &__label {
-    @include typography.use-font-scale(p2b);
+    @include typography.use-font-scale(p2m);
     align-self: flex-start;
 
     margin-block: lengths.margin(2);
@@ -41,7 +41,7 @@
   }
 
   &__hint {
-    @include typography.use-font-scale(p2);
+    @include typography.use-font-scale(c1);
     margin-block: lengths.margin(2);
 
     color: colors.font(secondary-info);
@@ -49,7 +49,7 @@
   }
 
   &__error {
-    @include typography.use-font-scale(p2);
+    @include typography.use-font-scale(c1);
     margin-block: lengths.margin(2);
 
     color: colors.font(danger);
@@ -57,7 +57,7 @@
   }
 
   &__link {
-    @include typography.use-font-scale(p2);
+    @include typography.use-font-scale(c1);
     margin-block: lengths.margin(2);
 
     color: colors.font(info);
diff --git a/packages/fuselage/src/components/InputBox/InputBox.styles.scss b/packages/fuselage/src/components/InputBox/InputBox.styles.scss
index 5f78f5125e..062a3c320a 100644
--- a/packages/fuselage/src/components/InputBox/InputBox.styles.scss
+++ b/packages/fuselage/src/components/InputBox/InputBox.styles.scss
@@ -136,7 +136,7 @@
 
   background-color: transparent;
 
-  @include typography.use-font-scale(p2);
+  @include typography.use-font-scale(p2m);
   @include typography.use-text-ellipsis;
 
   &--type-textarea {
@@ -277,7 +277,7 @@
   @include typography.use-text-ellipsis;
   white-space: nowrap;
 
-  @include typography.use-font-scale(p2);
+  @include typography.use-font-scale(p2m);
   color: #{$input-colors-placeholder-color};
 }
 
@@ -285,7 +285,7 @@
   @include typography.use-text-ellipsis;
   white-space: nowrap;
 
-  @include typography.use-font-scale(p2);
+  @include typography.use-font-scale(p2m);
   color: #{$input-colors-color};
 }
 
@@ -309,6 +309,6 @@
   border-radius: theme('input-border-radius', lengths.border-radius(medium));
   background-color: #{$input-colors-background-color};
 
-  @include typography.use-font-scale(p2);
+  @include typography.use-font-scale(p2m);
   @include typography.use-text-ellipsis;
 }