diff --git a/.changeset/ten-cats-occur.md b/.changeset/ten-cats-occur.md new file mode 100644 index 0000000000..8270738c66 --- /dev/null +++ b/.changeset/ten-cats-occur.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/fuselage": patch +--- + +fix(fuselage): issues not caught by visual regression testing after Sass rewrite diff --git a/packages/fuselage/src/components/Avatar/Avatar.styles.scss b/packages/fuselage/src/components/Avatar/Avatar.styles.scss index 014aecf831..ea1a838979 100644 --- a/packages/fuselage/src/components/Avatar/Avatar.styles.scss +++ b/packages/fuselage/src/components/Avatar/Avatar.styles.scss @@ -26,9 +26,9 @@ $avatar-border-radii: ( 32: theme('avatar-border-radius-32', lengths.border-radius(medium)), 36: theme('avatar-border-radius-36', lengths.border-radius(medium)), 40: theme('avatar-border-radius-40', lengths.border-radius(medium)), - 48: theme('avatar-border-radius-48', lengths.border-radius(large)), - 124: theme('avatar-border-radius-124', lengths.border-radius(large)), - 200: theme('avatar-border-radius-200', lengths.border-radius(large)), + 48: theme('avatar-border-radius-48', lengths.border-radius(medium)), + 124: theme('avatar-border-radius-124', lengths.border-radius(medium)), + 200: theme('avatar-border-radius-200', lengths.border-radius(medium)), 332: theme('avatar-border-radius-332', lengths.border-radius(large)), ); diff --git a/packages/fuselage/src/components/Chip/Chip.styles.scss b/packages/fuselage/src/components/Chip/Chip.styles.scss index 033356b7f4..06cd2a7a23 100644 --- a/packages/fuselage/src/components/Chip/Chip.styles.scss +++ b/packages/fuselage/src/components/Chip/Chip.styles.scss @@ -5,6 +5,7 @@ @use '../../styles/mixins/button.scss'; @use '../../styles/variables/button-colors.scss' as *; @use '../../styles/mixins/interactivity.scss' as *; +@use '../Box/Box.styles.scss'; // to do: replace button with stroke @@ -56,6 +57,8 @@ $chip-disabled-border-color: theme( $chip-disabled-color: theme('chip-disabled-color', colors.font(disabled)); .rcx-chip { + @extend %box--full; + @include button.kind-variant( ( background-color: $chip-background-color, diff --git a/packages/fuselage/src/styles/primitives/link.scss b/packages/fuselage/src/styles/primitives/link.scss index 390fc0bdf8..19e7bfeed3 100644 --- a/packages/fuselage/src/styles/primitives/link.scss +++ b/packages/fuselage/src/styles/primitives/link.scss @@ -9,8 +9,8 @@ $link-focus-outline-color: theme( 'link-focus-outline-color', colors.stroke(highlight) ); -$link-focus-outline-color: theme( - 'link-focus-outline-color', +$link-focus-box-shadow-color: theme( + 'link-focus-box-shadow-color', colors.stroke(extra-light-highlight) ); $link-visited-color: theme('link-visited-color', colors.font(info)); @@ -28,7 +28,7 @@ $link-active-color: theme('link-active-color', colors.font(info)); border-radius: lengths.border-radius(small); outline: $link-focus-outline-color solid 1px; outline-offset: 0; - @include use-focus-shadow($link-focus-outline-color); + @include use-focus-shadow($link-focus-box-shadow-color); } &:where(:visited),