💄(css) add classes to components for easier theming through custom CSS

Since Panda generates atomic CSS, it's hard to modify styling through
custom CSS (FRONTEND_CUSTOM_CSS_URL feature).
This adds a few classes on some low-lvl components to allow easy
customization through the custom CSS file.

src/frontend/src/primitives/Box.tsx

@@ -1,6 +1,12 @@
+import { ComponentProps, forwardRef } from 'react'
 import { cva } from '@/styled-system/css'
 import { styled } from '@/styled-system/jsx'
 
+const boxDefaultVariants = {
+  variant: 'light',
+  size: 'default',
+} as const
+
 const box = cva({
   base: {
     position: 'relative',
@@ -64,10 +70,25 @@ const box = cva({
       },
     },
   },
-  defaultVariants: {
-    variant: 'light',
-    size: 'default',
-  },
+  defaultVariants: boxDefaultVariants,
 })
 
-export const Box = styled('div', box)
+const StyledBox = styled('div', box)
+
+export const Box = forwardRef<HTMLDivElement, ComponentProps<typeof StyledBox>>(
+  ({ className, ...props }, ref) => (
+    <StyledBox
+      ref={ref}
+      className={[
+        // These are not necessary for the app, but can help people using custom CSS for theming
+        'Box',
+        `Box--variant-${props.variant || boxDefaultVariants.variant}`,
+        `Box--size-${props.size || boxDefaultVariants.size}`,
+        props.type && `Box--type-${props.type}`,
+        className,
+      ].filter(Boolean).join(' ')}
+      {...props}
+    />
+  )
+)
+Box.displayName = 'Box'

src/frontend/src/primitives/Button.tsx

@@ -3,7 +3,7 @@ import {
   type ButtonProps as RACButtonsProps,
 } from 'react-aria-components'
 import { type RecipeVariantProps } from '@/styled-system/css'
-import { buttonRecipe, type ButtonRecipe } from './buttonRecipe'
+import { buttonRecipe, buttonRecipeDefaultVariants, type ButtonRecipe } from './buttonRecipe'
 import { TooltipWrapper, type TooltipWrapperProps } from './TooltipWrapper'
 import { ReactNode, forwardRef } from 'react'
 import { Loader } from './Loader'
@@ -26,7 +26,14 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
         <RACButton
           ref={ref}
-          className={[buttonRecipe(variantProps), className].join(' ')}
+          className={[
+            buttonRecipe(variantProps),
+            className,
+            // These are not necessary for the app, but can help people using custom CSS for theming
+            'Button',
+            `Button--variant-${variantProps.variant || buttonRecipeDefaultVariants.variant}`,
+            `Button--size-${variantProps.size || buttonRecipeDefaultVariants.size}`,
+          ].join(' ')}
           {...(remainingComponentProps as RACButtonsProps)}
         >
           {!props.loading && props.icon}

src/frontend/src/primitives/ToggleButton.tsx

@@ -3,7 +3,7 @@ import {
   ToggleButton as RACToggleButton,
   ToggleButtonProps as RACToggleButtonProps,
 } from 'react-aria-components'
-import { type ButtonRecipeProps, buttonRecipe } from './buttonRecipe'
+import { type ButtonRecipeProps, buttonRecipe, buttonRecipeDefaultVariants } from './buttonRecipe'
 import { TooltipWrapper, type TooltipWrapperProps } from './TooltipWrapper'
 
 export type ToggleButtonProps = RACToggleButtonProps &
@@ -25,7 +25,14 @@ export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
         <RACToggleButton
           ref={ref}
           {...componentProps}
-          className={[buttonRecipe(variantProps), props.className].join(' ')}
+          className={[
+            buttonRecipe(variantProps),
+            props.className,
+            // These are not necessary for the app, but can help people using custom CSS for theming
+            'Button Button--toggle',
+            `Button--variant-${variantProps.variant || buttonRecipeDefaultVariants.variant}`,
+            `Button--size-${variantProps.size || buttonRecipeDefaultVariants.size}`,
+          ].join(' ')}
         >
           <>
             {componentProps.children as ReactNode}

src/frontend/src/primitives/TooltipWrapper.tsx

@@ -114,10 +114,11 @@ const TooltipArrow = () => {
 
 const Tooltip = ({
   children,
+  className,
   ...props
 }: Omit<TooltipProps, 'children'> & { children: ReactNode }) => {
   return (
-    <StyledTooltip {...props}>
+    <StyledTooltip {...props} className={[className, 'Tooltip'].filter(Boolean).join(' ')}>
       <TooltipArrow />
       {children}
     </StyledTooltip>

src/frontend/src/primitives/buttonRecipe.ts

@@ -1,5 +1,11 @@
 import { type RecipeVariantProps, cva } from '@/styled-system/css'
 
+
+export const buttonRecipeDefaultVariants = {
+  size: 'default',
+  variant: 'primary',
+} as const
+
 export const buttonRecipe = cva({
   base: {
     display: 'flex',
@@ -393,10 +399,7 @@ export const buttonRecipe = cva({
       },
     },
   ],
-  defaultVariants: {
-    size: 'default',
-    variant: 'primary',
-  },
+  defaultVariants: buttonRecipeDefaultVariants,
 })
 
 export type ButtonRecipe = typeof buttonRecipe