💄(frontend) introduce a new button's variant

'text' is reserved for discreet buttons. Inspired by Gmeet,
styles need to be refined. WIP, but mergeable as it is.

src/frontend/src/features/rooms/livekit/components/controls/Participants/LowerAllHandsButton.tsx

@@ -17,7 +17,7 @@ export const LowerAllHandsButton = ({
       aria-label={t('participants.lowerParticipantsHand')}
       size="sm"
       fullWidth
-      invisible
+      variant="text"
       onPress={() => lowerHandParticipants(participants)}
     >
       {t('participants.lowerParticipantsHand')}

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx

@@ -39,10 +39,10 @@ const MuteAlertDialog = ({
     <Dialog isOpen={isOpen} role="alertdialog">
       <P>{t('participants.muteParticipantAlert.description', { name })}</P>
       <HStack gap={1}>
-        <Button size="sm" invisible onPress={onClose}>
+        <Button variant="text" size="sm" onPress={onClose}>
           {t('participants.muteParticipantAlert.cancel')}
         </Button>
-        <Button size="sm" invisible onPress={onSubmit}>
+        <Button variant="text" size="sm" onPress={onSubmit}>
           {t('participants.muteParticipantAlert.confirm')}
         </Button>
       </HStack>

src/frontend/src/primitives/buttonRecipe.ts

@@ -73,6 +73,12 @@ export const buttonRecipe = cva({
           backgroundColor: 'success.subtle!',
         },
       },
+      text: {
+        color: 'primary',
+        '&[data-hovered]': {
+          background: 'gray.100 !important',
+        },
+      },
       danger: {
         colorPalette: 'danger',
         borderColor: 'danger.600',