✨(frontend) extend button primitive with a toggle variant

Encountered issues extending the current button due to the complexity of the
Button and Link props construction. I’ll need to redesign the component to
enhance its extensibility.

The legacy style adheres to the previous interface but suffers from poor
color
contrast. Hex codes were used to match the selected toggle color,
resulting
in a difficult color system to maintain. This approach needs refactoring
for better color handling. Legacy styles will soon disappear.

Efforts were made to minimize code for handling the toggle functionality.
Future work should focus on refactoring the button to align with the field
approach for improved developer experience and props validation.

src/frontend/src/primitives/Button.tsx

@@ -1,10 +1,12 @@
 import { type ReactNode } from 'react'
 import {
   Button as RACButton,
+  ToggleButton as RACToggleButton,
   type ButtonProps as RACButtonsProps,
   TooltipTrigger,
   Link,
   LinkProps,
+  ToggleButtonProps as RACToggleButtonProps,
 } from 'react-aria-components'
 import { cva, type RecipeVariantProps } from '@/styled-system/css'
 import { Tooltip } from './Tooltip'
@@ -19,6 +21,9 @@ const button = cva({
     border: '1px solid transparent',
     color: 'colorPalette.text',
     backgroundColor: 'colorPalette',
+    '&[data-selected]': {
+      background: 'colorPalette.active',
+    },
     '&[data-hovered]': {
       backgroundColor: 'colorPalette.hover',
     },
@@ -112,6 +117,13 @@ const button = cva({
         '&[data-pressed]': {
           borderColor: 'gray.500',
         },
+        '&[data-selected]': {
+          background: '#e5e7eb',
+          borderColor: 'gray.400',
+          '&[data-hovered]': {
+            backgroundColor: 'gray.300',
+          },
+        },
       },
     },
   },
@@ -128,7 +140,9 @@ type Tooltip = {
 }
 export type ButtonProps = RecipeVariantProps<typeof button> &
   RACButtonsProps &
-  Tooltip
+  Tooltip & {
+    toggle?: boolean
+  }
 
 type LinkButtonProps = RecipeVariantProps<typeof button> & LinkProps & Tooltip
 
@@ -147,6 +161,18 @@ export const Button = ({
       </TooltipWrapper>
     )
   }
+
+  if ((props as ButtonProps).toggle) {
+    return (
+      <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
+        <RACToggleButton
+          className={button(variantProps)}
+          {...(componentProps as RACToggleButtonProps)}
+        />
+      </TooltipWrapper>
+    )
+  }
+
   return (
     <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
       <RACButton