From 0fa8e45b3cd74f318590de5b5f81049c80789e92 Mon Sep 17 00:00:00 2001
From: Emmanuel Pelletier <manu@habite.la>
Date: Mon, 19 Oct 2026 13:13:18 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(css)=20add=20classes=20to=20compon?=
 =?UTF-8?q?ents=20for=20easier=20theming=20through=20custom=20CSS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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           | 31 ++++++++++++++++---
 src/frontend/src/primitives/Button.tsx        | 11 +++++--
 src/frontend/src/primitives/ToggleButton.tsx  | 11 +++++--
 .../src/primitives/TooltipWrapper.tsx         |  3 +-
 src/frontend/src/primitives/buttonRecipe.ts   | 11 ++++---
 5 files changed, 53 insertions(+), 14 deletions(-)

diff --git a/src/frontend/src/primitives/Box.tsx b/src/frontend/src/primitives/Box.tsx
index 063740d5e..20fbb5f7c 100644
--- a/src/frontend/src/primitives/Box.tsx
+++ b/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'
diff --git a/src/frontend/src/primitives/Button.tsx b/src/frontend/src/primitives/Button.tsx
index aad1ca097..61a54590b 100644
--- a/src/frontend/src/primitives/Button.tsx
+++ b/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}
diff --git a/src/frontend/src/primitives/ToggleButton.tsx b/src/frontend/src/primitives/ToggleButton.tsx
index 433b1256e..dc52ac8f8 100644
--- a/src/frontend/src/primitives/ToggleButton.tsx
+++ b/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}
diff --git a/src/frontend/src/primitives/TooltipWrapper.tsx b/src/frontend/src/primitives/TooltipWrapper.tsx
index 8dac11ad1..647201214 100644
--- a/src/frontend/src/primitives/TooltipWrapper.tsx
+++ b/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>
diff --git a/src/frontend/src/primitives/buttonRecipe.ts b/src/frontend/src/primitives/buttonRecipe.ts
index 4b601ab86..2c2999678 100644
--- a/src/frontend/src/primitives/buttonRecipe.ts
+++ b/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