feat(fuselage): update InputBox and Field typography (#1442)

Co-authored-by: Júlia Jaeger Foresti <[email protected]>
RocketChat · Sep 4, 2024 · 1087ee8 · 1087ee8
1 parent b1dda27
commit 1087ee8
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/.changeset/sweet-sheep-film.md 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
@@ -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,23 +41,23 @@
   }
 
   &__hint {
-    @include typography.use-font-scale(p2);
+    @include typography.use-font-scale(c1);
     margin-block: lengths.margin(2);
 
     color: colors.font(secondary-info);
     @extend %--with-inline-elements;
   }
 
   &__error {
-    @include typography.use-font-scale(p2);
+    @include typography.use-font-scale(c1);
     margin-block: lengths.margin(2);
 
     color: colors.font(danger);
     @extend %--with-inline-elements;
   }
 
   &__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
@@ -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,15 +277,15 @@
   @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};
 }
 
 .rcx-input-box__option {
   @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;
 }