💄(frontend) replace grayscale button with a new variant

Button was looking disabled. Use an appropriate contrast.

src/frontend/src/features/home/components/IntroSlider.tsx

@@ -185,7 +185,7 @@ export const IntroSlider = () => {
         <ButtonContainer>
           <ButtonVerticalCenter>
             <Button
-              variant="greyscale"
+              variant="secondaryText"
               square
               aria-label={t('previous.label')}
               tooltip={t('previous.tooltip')}
@@ -221,7 +221,7 @@ export const IntroSlider = () => {
         <ButtonContainer>
           <ButtonVerticalCenter>
             <Button
-              variant="greyscale"
+              variant="secondaryText"
               square
               aria-label={t('next.label')}
               tooltip={t('next.tooltip')}

src/frontend/src/features/rooms/components/InviteDialog.tsx

@@ -63,7 +63,8 @@ export const InviteDialog = ({
           </Heading>
           <Div position="absolute" top="5" right="5">
             <Button
-              variant="greyscale"
+              invisible
+              variant="tertiaryText"
               size="xs"
               onPress={() => {
                 dialogProps.onClose?.()

src/frontend/src/features/rooms/livekit/components/SidePanel.tsx

@@ -68,7 +68,7 @@ const StyledSidePanel = ({
     >
       <Button
         invisible
-        variant="greyscale"
+        variant="tertiaryText"
         size="xs"
         onPress={onClose}
         aria-label={closeButtonTooltip}

src/frontend/src/features/rooms/livekit/components/chat/Input.tsx

@@ -106,7 +106,8 @@ export const ChatInput = ({
       />
       <Button
         square
-        variant="secondaryText"
+        invisible
+        variant="tertiaryText"
         size="sm"
         onPress={handleSubmit}
         isDisabled={isDisabled}

src/frontend/src/features/settings/components/SettingsButton.tsx

@@ -10,7 +10,7 @@ export const SettingsButton = () => {
     <DialogTrigger>
       <Button
         square
-        variant="greyscale"
+        variant="secondaryText"
         aria-label={t('settingsButtonLabel')}
         tooltip={t('settingsButtonLabel')}
       >

src/frontend/src/layout/Header.tsx

@@ -66,7 +66,7 @@ export const Header = () => {
                 <Menu>
                   <Button
                     size="sm"
-                    variant="greyscale"
+                    variant="secondaryText"
                     tooltip={t('loggedInUserTooltip')}
                     tooltipType="delayed"
                   >

src/frontend/src/primitives/Dialog.tsx

@@ -112,7 +112,7 @@ export const Dialog = ({
                     {!isAlert && (
                       <Div position="absolute" top="5" right="5">
                         <Button
-                          variant="greyscale"
+                          variant="tertiaryText"
                           invisible
                           size="xs"
                           onPress={() => close()}

src/frontend/src/primitives/buttonRecipe.ts

@@ -87,6 +87,16 @@ export const buttonRecipe = cva({
           backgroundColor: 'primary.300',
         },
       },
+      tertiaryText: {
+        backgroundColor: 'transparent',
+        color: 'primary.900',
+        '&[data-hovered]': {
+          backgroundColor: 'primary.300',
+        },
+        '&[data-pressed]': {
+          backgroundColor: 'primary.300',
+        },
+      },
       primaryDark: {
         backgroundColor: 'primaryDark.100',
         color: 'white',