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; }