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

Co-authored-by: Júlia Jaeger Foresti <60678893+juliajforesti@users.noreply.github.com>
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;
 }