[Joy] Improve cursor pointer and add fallback for outlined variant (#…

…35573)
mui · Dec 22, 2022 · a04f578 · a04f578
1 parent 94f8c9f
commit a04f578
Show file tree

Hide file tree

Showing 21 changed files with 48 additions and 41 deletions.
diff --git a/packages/mui-joy/src/Alert/Alert.tsx b/packages/mui-joy/src/Alert/Alert.tsx
@@ -34,7 +34,7 @@ const AlertRoot = styled('div', {
 })<{ ownerState: AlertProps }>(({ theme, ownerState }) => ({
   '--Alert-radius': theme.vars.radius.sm,
   '--Alert-decorator-childRadius':
-    'max((var(--Alert-radius) - var(--variant-borderWidth)) - var(--Alert-padding), min(var(--Alert-padding) / 2, (var(--Alert-radius) - var(--variant-borderWidth)) / 2))',
+    'max((var(--Alert-radius) - var(--variant-borderWidth, 0px)) - var(--Alert-padding), min(var(--Alert-padding) / 2, (var(--Alert-radius) - var(--variant-borderWidth, 0px)) / 2))',
   '--Button-minHeight': 'var(--Alert-decorator-childHeight)',
   '--IconButton-size': 'var(--Alert-decorator-childHeight)',
   '--Button-radius': 'var(--Alert-decorator-childRadius)',

diff --git a/packages/mui-joy/src/Badge/Badge.tsx b/packages/mui-joy/src/Badge/Badge.tsx
@@ -116,7 +116,7 @@ const BadgeBadge = styled('span', {
     fontWeight: theme.vars.fontWeight.md,
     lineHeight: 1,
     padding:
-      'calc(var(--Badge-paddingX) / 2 - var(--variant-borderWidth)) calc(var(--Badge-paddingX) - var(--variant-borderWidth))',
+      'calc(var(--Badge-paddingX) / 2 - var(--variant-borderWidth, 0px)) calc(var(--Badge-paddingX) - var(--variant-borderWidth, 0px))',
     minHeight: 'var(--Badge-minHeight)',
     minWidth: 'var(--Badge-minHeight)',
     borderRadius: 'var(--Badge-radius, var(--Badge-minHeight))',

diff --git a/packages/mui-joy/src/Card/Card.tsx b/packages/mui-joy/src/Card/Card.tsx
@@ -38,22 +38,22 @@ const CardRoot = styled('div', {
   {
     // a context variable for any child component
     '--Card-childRadius':
-      'max((var(--Card-radius) - var(--variant-borderWidth)) - var(--Card-padding), min(var(--Card-padding) / 2, (var(--Card-radius) - var(--variant-borderWidth)) / 2))',
+      'max((var(--Card-radius) - var(--variant-borderWidth, 0px)) - var(--Card-padding), min(var(--Card-padding) / 2, (var(--Card-radius) - var(--variant-borderWidth, 0px)) / 2))',
     // AspectRatio integration
     '--AspectRatio-radius': 'var(--Card-childRadius)',
     // Link integration
-    '--internal-action-margin': 'calc(-1 * var(--variant-borderWidth))',
+    '--internal-action-margin': 'calc(-1 * var(--variant-borderWidth, 0px))',
     // Link, Radio, Checkbox integration
     '--internal-action-radius': resolveSxValue(
       { theme, ownerState },
       'borderRadius',
       'var(--Card-radius)',
     ),
     // CardCover integration
-    '--CardCover-radius': 'calc(var(--Card-radius) - var(--variant-borderWidth))',
+    '--CardCover-radius': 'calc(var(--Card-radius) - var(--variant-borderWidth, 0px))',
     // CardOverflow integration
     '--CardOverflow-offset': `calc(-1 * var(--Card-padding))`,
-    '--CardOverflow-radius': 'calc(var(--Card-radius) - var(--variant-borderWidth))',
+    '--CardOverflow-radius': 'calc(var(--Card-radius) - var(--variant-borderWidth, 0px))',
     // Divider integration
     '--Divider-inset': 'calc(-1 * var(--Card-padding))',
     ...(ownerState.size === 'sm' && {

diff --git a/packages/mui-joy/src/CardOverflow/CardOverflow.tsx b/packages/mui-joy/src/CardOverflow/CardOverflow.tsx
@@ -34,7 +34,7 @@ const CardOverflowRoot = styled('div', {
     'data-last-child'?: string;
   };
 }>(({ theme, ownerState }) => {
-  const childRadius = 'calc(var(--CardOverflow-radius) - var(--variant-borderWidth))';
+  const childRadius = 'calc(var(--CardOverflow-radius) - var(--variant-borderWidth, 0px))';
   return [
     ownerState.row
       ? {

diff --git a/packages/mui-joy/src/Chip/Chip.tsx b/packages/mui-joy/src/Chip/Chip.tsx
@@ -41,7 +41,7 @@ const ChipRoot = styled('div', {
     {
       // for controlling chip delete margin offset
       '--Chip-decorator-childOffset':
-        'min(calc(var(--Chip-paddingInline) - (var(--_Chip-minHeight) - 2 * var(--variant-borderWidth) - var(--Chip-decorator-childHeight)) / 2), var(--Chip-paddingInline))',
+        'min(calc(var(--Chip-paddingInline) - (var(--_Chip-minHeight) - 2 * var(--variant-borderWidth, 0px) - var(--Chip-decorator-childHeight)) / 2), var(--Chip-paddingInline))',
       '--Chip-decorator-childRadius':
         'max(var(--_Chip-radius) - var(--_Chip-paddingBlock), min(var(--_Chip-paddingBlock) / 2, var(--_Chip-radius) / 2))',
       '--Chip-delete-radius': 'var(--Chip-decorator-childRadius)',
@@ -54,7 +54,7 @@ const ChipRoot = styled('div', {
         '--Chip-gap': '0.25rem',
         '--Chip-paddingInline': '0.5rem',
         '--Chip-decorator-childHeight':
-          'calc(min(1.125rem, var(--_Chip-minHeight)) - 2 * var(--variant-borderWidth))',
+          'calc(min(1.125rem, var(--_Chip-minHeight)) - 2 * var(--variant-borderWidth, 0px))',
         '--Icon-fontSize': 'calc(var(--_Chip-minHeight) / 1.714)', // 0.875rem by default
         '--_Chip-minHeight': 'var(--Chip-minHeight, 1.5rem)',
         fontSize: theme.vars.fontSize.xs,
@@ -77,7 +77,7 @@ const ChipRoot = styled('div', {
       }),
       '--_Chip-radius': 'var(--Chip-radius, 1.5rem)',
       '--_Chip-paddingBlock':
-        'max((var(--_Chip-minHeight) - 2 * var(--variant-borderWidth) - var(--Chip-decorator-childHeight)) / 2, 0px)',
+        'max((var(--_Chip-minHeight) - 2 * var(--variant-borderWidth, 0px) - var(--Chip-decorator-childHeight)) / 2, 0px)',
       minHeight: 'var(--_Chip-minHeight)',
       paddingInline: 'var(--Chip-paddingInline)',
       borderRadius: 'var(--_Chip-radius)',
@@ -144,6 +144,7 @@ const ChipAction = styled('button', {
     bottom: 0,
     right: 0,
     border: 'none',
+    cursor: 'pointer',
     padding: 'initial',
     margin: 'initial',
     backgroundColor: 'initial',

diff --git a/packages/mui-joy/src/ChipDelete/ChipDelete.tsx b/packages/mui-joy/src/ChipDelete/ChipDelete.tsx
@@ -34,6 +34,7 @@ const ChipDeleteRoot = styled('button', {
   {
     '--Icon-margin': 'initial', // prevent overrides from parent
     pointerEvents: 'visible', // force the ChipDelete to be hoverable because the decorator can have pointerEvents 'none'
+    cursor: 'pointer',
     width: 'var(--Chip-delete-size, 2rem)',
     height: 'var(--Chip-delete-size, 2rem)',
     borderRadius: 'var(--Chip-delete-radius, 50%)',

diff --git a/packages/mui-joy/src/CircularProgress/CircularProgress.tsx b/packages/mui-joy/src/CircularProgress/CircularProgress.tsx
@@ -90,7 +90,7 @@ const CircularProgressRoot = styled('span', {
     // internal variables
     '--_thickness-diff':
       'calc(var(--CircularProgress-track-thickness) - var(--CircularProgress-progress-thickness))',
-    '--_inner-size': 'calc(var(--_root-size) - 2 * var(--variant-borderWidth))',
+    '--_inner-size': 'calc(var(--_root-size) - 2 * var(--variant-borderWidth, 0px))',
     '--_outlined-inset':
       'max(var(--CircularProgress-track-thickness), var(--CircularProgress-progress-thickness))',
     width: 'var(--_root-size)',
@@ -137,8 +137,8 @@ const CircularProgressSvg = styled('svg', {
   display: 'inherit',
   boxSizing: 'inherit',
   position: 'absolute',
-  top: 'calc(-1 * var(--variant-borderWidth))', // centered align
-  left: 'calc(-1 * var(--variant-borderWidth))', // centered align
+  top: 'calc(-1 * var(--variant-borderWidth, 0px))', // centered align
+  left: 'calc(-1 * var(--variant-borderWidth, 0px))', // centered align
 });
 
 const CircularProgressTrack = styled('circle', {

diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx
@@ -66,6 +66,7 @@ export const StyledIconButton = styled('button')<{ ownerState: IconButtonOwnerSt
       border: 'none',
       boxSizing: 'border-box',
       backgroundColor: 'transparent',
+      cursor: 'pointer',
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',

diff --git a/packages/mui-joy/src/Input/Input.tsx b/packages/mui-joy/src/Input/Input.tsx
@@ -71,9 +71,9 @@ export const StyledInputRoot = styled('div')<{ ownerState: InputOwnerState }>(
         }),
         // variables for controlling child components
         '--Input-decorator-childOffset':
-          'min(calc(var(--Input-paddingInline) - (var(--Input-minHeight) - 2 * var(--variant-borderWidth) - var(--Input-decorator-childHeight)) / 2), var(--Input-paddingInline))',
+          'min(calc(var(--Input-paddingInline) - (var(--Input-minHeight) - 2 * var(--variant-borderWidth, 0px) - var(--Input-decorator-childHeight)) / 2), var(--Input-paddingInline))',
         '--_Input-paddingBlock':
-          'max((var(--Input-minHeight) - 2 * var(--variant-borderWidth) - var(--Input-decorator-childHeight)) / 2, 0px)',
+          'max((var(--Input-minHeight) - 2 * var(--variant-borderWidth, 0px) - var(--Input-decorator-childHeight)) / 2, 0px)',
         '--Input-decorator-childRadius':
           'max(var(--Input-radius) - var(--_Input-paddingBlock), min(var(--_Input-paddingBlock) / 2, var(--Input-radius) / 2))',
         '--Button-minHeight': 'var(--Input-decorator-childHeight)',
@@ -112,7 +112,7 @@ export const StyledInputRoot = styled('div')<{ ownerState: InputOwnerState }>(
           bottom: 0,
           zIndex: 1,
           borderRadius: 'inherit',
-          margin: 'calc(var(--variant-borderWidth) * -1)', // for outlined variant
+          margin: 'calc(var(--variant-borderWidth, 0px) * -1)', // for outlined variant
         },
       },
       {
@@ -122,7 +122,6 @@ export const StyledInputRoot = styled('div')<{ ownerState: InputOwnerState }>(
         [`&:hover:not(.${inputClasses.focused})`]: {
           ...theme.variants[`${ownerState.variant!}Hover`]?.[ownerState.color!],
           backgroundColor: null, // it is not common to change background on hover for Input
-          cursor: 'text',
         },
         [`&.${inputClasses.disabled}`]:
           theme.variants[`${ownerState.variant!}Disabled`]?.[ownerState.color!],

diff --git a/packages/mui-joy/src/LinearProgress/LinearProgress.tsx b/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
@@ -99,7 +99,7 @@ const LinearProgressRoot = styled('div', {
     position: 'relative',
     ...theme.variants[ownerState.variant!]?.[ownerState.color!],
     '--_LinearProgress-padding':
-      'max((var(--LinearProgress-thickness) - 2 * var(--variant-borderWidth) - var(--LinearProgress-progressThickness)) / 2, 0px)',
+      'max((var(--LinearProgress-thickness) - 2 * var(--variant-borderWidth, 0px) - var(--LinearProgress-progressThickness)) / 2, 0px)',
     '&::before': {
       content: '""',
       display: 'block',

diff --git a/packages/mui-joy/src/Link/Link.tsx b/packages/mui-joy/src/Link/Link.tsx
@@ -93,6 +93,7 @@ const LinkRoot = styled('a', {
       margin: 0, // Remove the margin in Safari
       borderRadius: theme.vars.radius.xs,
       padding: 0, // Remove the padding in Firefox
+      cursor: 'pointer',
       textDecorationColor: `rgba(${
         theme.vars.palette[ownerState.color!]?.mainChannel
       } / var(--Link-underlineOpacity, 0.72))`,
@@ -106,7 +107,6 @@ const LinkRoot = styled('a', {
           }
         : {
             color: `rgba(${theme.vars.palette[ownerState.color!]?.mainChannel} / 1)`,
-            cursor: 'pointer',
             [`&.${linkClasses.disabled}`]: {
               pointerEvents: 'none',
               color: `rgba(${theme.vars.palette[ownerState.color!]?.mainChannel} / 0.6)`,

diff --git a/packages/mui-joy/src/ListItemButton/ListItemButton.tsx b/packages/mui-joy/src/ListItemButton/ListItemButton.tsx
@@ -56,6 +56,7 @@ export const StyledListItemButton = styled('div')<{ ownerState: ListItemButtonOw
       textAlign: 'initial',
       textDecoration: 'initial', // reset native anchor tag
       backgroundColor: 'initial', // reset button background
+      cursor: 'pointer',
       // In some cases, ListItemButton is a child of ListItem so the margin needs to be controlled by the ListItem. The value is negative to account for the ListItem's padding
       marginInline: 'var(--List-itemButton-marginInline)',
       marginBlock: 'var(--List-itemButton-marginBlock)',
@@ -64,7 +65,7 @@ export const StyledListItemButton = styled('div')<{ ownerState: ListItemButtonOw
         marginBlockStart: ownerState.row ? undefined : 'var(--List-gap)',
       }),
       // account for the border width, so that all of the ListItemButtons content aligned horizontally
-      paddingBlock: 'calc(var(--List-item-paddingY) - var(--variant-borderWidth))',
+      paddingBlock: 'calc(var(--List-item-paddingY) - var(--variant-borderWidth, 0px))',
       // account for the border width, so that all of the ListItemButtons content aligned vertically
       paddingInlineStart:
         'calc(var(--List-item-paddingLeft) + var(--List-item-startActionWidth, var(--internal-startActionWidth, 0px)))', // --internal variable makes it possible to customize the actionWidth from the top List

diff --git a/packages/mui-joy/src/ModalDialog/ModalDialog.tsx b/packages/mui-joy/src/ModalDialog/ModalDialog.tsx
@@ -38,7 +38,7 @@ const ModalDialogRoot = styled(SheetRoot, {
   // Divider integration
   '--Divider-inset': 'calc(-1 * var(--ModalDialog-padding))',
   '--ModalClose-radius':
-    'max((var(--ModalDialog-radius) - var(--variant-borderWidth)) - var(--ModalClose-inset), min(var(--ModalClose-inset) / 2, (var(--ModalDialog-radius) - var(--variant-borderWidth)) / 2))',
+    'max((var(--ModalDialog-radius) - var(--variant-borderWidth, 0px)) - var(--ModalClose-inset), min(var(--ModalClose-inset) / 2, (var(--ModalDialog-radius) - var(--variant-borderWidth, 0px)) / 2))',
   ...(ownerState.size === 'sm' && {
     '--ModalDialog-padding': theme.spacing(1.25),
     '--ModalDialog-radius': theme.vars.radius.sm,

diff --git a/packages/mui-joy/src/Select/Select.tsx b/packages/mui-joy/src/Select/Select.tsx
@@ -108,9 +108,9 @@ const SelectRoot = styled('div', {
       }),
       // variables for controlling child components
       '--Select-decorator-childOffset':
-        'min(calc(var(--Select-paddingInline) - (var(--Select-minHeight) - 2 * var(--variant-borderWidth) - var(--Select-decorator-childHeight)) / 2), var(--Select-paddingInline))',
+        'min(calc(var(--Select-paddingInline) - (var(--Select-minHeight) - 2 * var(--variant-borderWidth, 0px) - var(--Select-decorator-childHeight)) / 2), var(--Select-paddingInline))',
       '--_Select-paddingBlock':
-        'max((var(--Select-minHeight) - 2 * var(--variant-borderWidth) - var(--Select-decorator-childHeight)) / 2, 0px)',
+        'max((var(--Select-minHeight) - 2 * var(--variant-borderWidth, 0px) - var(--Select-decorator-childHeight)) / 2, 0px)',
       '--Select-decorator-childRadius':
         'max(var(--Select-radius) - var(--_Select-paddingBlock), min(var(--_Select-paddingBlock) / 2, var(--Select-radius) / 2))',
       '--Button-minHeight': 'var(--Select-decorator-childHeight)',
@@ -124,6 +124,7 @@ const SelectRoot = styled('div', {
       display: 'flex',
       alignItems: 'center',
       borderRadius: 'var(--Select-radius)',
+      cursor: 'pointer',
       ...(!variantStyle.backgroundColor && {
         backgroundColor: theme.vars.palette.background.surface,
       }),
@@ -151,7 +152,7 @@ const SelectRoot = styled('div', {
         bottom: 0,
         zIndex: 1,
         borderRadius: 'inherit',
-        margin: 'calc(var(--variant-borderWidth) * -1)', // for outlined variant
+        margin: 'calc(var(--variant-borderWidth, 0px) * -1)', // for outlined variant
       },
       [`&.${selectClasses.focusVisible}`]: {
         '--Select-indicator-color': 'var(--Select-focusedHighlight)',

diff --git a/packages/mui-joy/src/Slider/Slider.tsx b/packages/mui-joy/src/Slider/Slider.tsx
@@ -156,7 +156,7 @@ const SliderRail = styled('span', {
         : 'var(--Slider-rail-background)',
     border:
       ownerState.track === 'inverted'
-        ? 'var(--variant-borderWidth) solid var(--Slider-track-borderColor)'
+        ? 'var(--variant-borderWidth, 0px) solid var(--Slider-track-borderColor)'
         : 'initial',
     borderRadius: 'var(--Slider-track-radius)',
     ...(ownerState.orientation === 'horizontal' && {
@@ -192,7 +192,7 @@ const SliderTrack = styled('span', {
       border:
         ownerState.track === 'inverted'
           ? 'initial'
-          : 'var(--variant-borderWidth) solid var(--Slider-track-borderColor)',
+          : 'var(--variant-borderWidth, 0px) solid var(--Slider-track-borderColor)',
       backgroundColor:
         ownerState.track === 'inverted'
           ? 'var(--Slider-rail-background)'
@@ -232,7 +232,7 @@ const SliderThumb = styled('span', {
   justifyContent: 'center',
   width: 'var(--Slider-thumb-width)',
   height: 'var(--Slider-thumb-size)',
-  border: 'var(--variant-borderWidth) solid var(--Slider-track-borderColor)',
+  border: 'var(--variant-borderWidth, 0px) solid var(--Slider-track-borderColor)',
   borderRadius: 'var(--Slider-thumb-radius)',
   boxShadow: 'var(--Slider-thumb-shadow)',
   color: 'var(--Slider-thumb-color)',

diff --git a/packages/mui-joy/src/Switch/Switch.tsx b/packages/mui-joy/src/Switch/Switch.tsx
@@ -84,7 +84,7 @@ const SwitchRoot = styled('div', {
       '--Switch-thumb-size': '24px',
       '--Switch-gap': '12px',
     }),
-    '--internal-paddingBlock': `max((var(--Switch-track-height) - 2 * var(--variant-borderWidth) - var(--Switch-thumb-size)) / 2, 0px)`,
+    '--internal-paddingBlock': `max((var(--Switch-track-height) - 2 * var(--variant-borderWidth, 0px) - var(--Switch-thumb-size)) / 2, 0px)`,
     '--Switch-thumb-radius': `max(var(--Switch-track-radius) - var(--internal-paddingBlock), min(var(--internal-paddingBlock) / 2, var(--Switch-track-radius) / 2))`,
     '--Switch-thumb-width': 'var(--Switch-thumb-size)',
     '--Switch-thumb-offset': `max((var(--Switch-track-height) - var(--Switch-thumb-size)) / 2, 0px)`,
@@ -156,7 +156,7 @@ const SwitchTrack = styled('span', {
   justifyContent: 'space-between',
   alignItems: 'center',
   boxSizing: 'border-box',
-  border: 'var(--variant-borderWidth) solid',
+  border: 'var(--variant-borderWidth, 0px) solid',
   borderColor: 'var(--Switch-track-borderColor)',
   backgroundColor: 'var(--Switch-track-background)',
   borderRadius: 'var(--Switch-track-radius)',

diff --git a/packages/mui-joy/src/Textarea/Textarea.tsx b/packages/mui-joy/src/Textarea/Textarea.tsx
@@ -77,7 +77,7 @@ const TextareaRoot = styled('div', {
       }),
       // variables for controlling child components
       '--_Textarea-paddingBlock':
-        'max((var(--Textarea-minHeight) - 2 * var(--variant-borderWidth) - var(--Textarea-decorator-childHeight)) / 2, 0px)',
+        'max((var(--Textarea-minHeight) - 2 * var(--variant-borderWidth, 0px) - var(--Textarea-decorator-childHeight)) / 2, 0px)',
       '--Textarea-decorator-childRadius':
         'max(var(--Textarea-radius) - var(--_Textarea-paddingBlock), min(var(--_Textarea-paddingBlock) / 2, var(--Textarea-radius) / 2))',
       '--Button-minHeight': 'var(--Textarea-decorator-childHeight)',
@@ -116,7 +116,7 @@ const TextareaRoot = styled('div', {
         bottom: 0,
         zIndex: 1,
         borderRadius: 'inherit',
-        margin: 'calc(var(--variant-borderWidth) * -1)', // for outlined variant
+        margin: 'calc(var(--variant-borderWidth, 0px) * -1)', // for outlined variant
       },
     },
     {

diff --git a/packages/mui-joy/src/Tooltip/Tooltip.tsx b/packages/mui-joy/src/Tooltip/Tooltip.tsx
@@ -147,7 +147,7 @@ const TooltipArrow = styled('span', {
       borderTopColor: variantStyle?.backgroundColor ?? theme.vars.palette.background.surface,
       borderRightColor: variantStyle?.backgroundColor ?? theme.vars.palette.background.surface,
       borderRadius: `0px 2px 0px 0px`,
-      boxShadow: `var(--variant-borderWidth) calc(-1 * var(--variant-borderWidth)) 0px 0px ${variantStyle.borderColor}`,
+      boxShadow: `var(--variant-borderWidth, 0px) calc(-1 * var(--variant-borderWidth, 0px)) 0px 0px ${variantStyle.borderColor}`,
       transformOrigin: 'center center',
       transform: 'rotate(calc(-45deg + 90deg * var(--unstable_Tooltip-arrow-rotation)))',
     },

diff --git a/packages/mui-joy/src/styles/extendTheme.test.js b/packages/mui-joy/src/styles/extendTheme.test.js
@@ -49,6 +49,15 @@ describe('extendTheme', () => {
     expect(theme.typography.body1.fontSize).to.equal('var(--fontSize-md)');
   });
 
+  it('should have custom --variant-borderWidth', () => {
+    const theme = extendTheme({
+      variants: { outlined: { primary: { '--variant-borderWidth': '3px' } } },
+    });
+    expect(theme.variants.outlined.primary).to.contain({
+      '--variant-borderWidth': '3px',
+    });
+  });
+
   describe('theme.unstable_sx', () => {
     const { render } = createRenderer();
 

diff --git a/packages/mui-joy/src/styles/variantUtils.test.js b/packages/mui-joy/src/styles/variantUtils.test.js
@@ -73,7 +73,6 @@ describe('variant utils', () => {
           anyHoverColor: 'var(--any-token)',
         }),
       ).to.deep.include({
-        cursor: 'pointer',
         color: 'var(--any-token)',
       });
     });
@@ -84,7 +83,6 @@ describe('variant utils', () => {
           anyHoverBg: 'var(--any-token)',
         }),
       ).to.deep.include({
-        cursor: 'pointer',
         backgroundColor: 'var(--any-token)',
       });
     });
@@ -95,7 +93,6 @@ describe('variant utils', () => {
           anyHoverBorder: 'var(--any-token)',
         }),
       ).to.deep.include({
-        cursor: 'pointer',
         borderColor: 'var(--any-token)',
       });
     });
@@ -229,7 +226,6 @@ describe('variant utils', () => {
       },
       outlinedHover: {
         primary: {
-          cursor: 'pointer',
           color: 'var(--any-token)',
           borderColor: 'var(--any-token)',
           backgroundColor: 'var(--any-token)',
@@ -280,7 +276,6 @@ describe('variant utils', () => {
       color: 'var(--joy-variant-plainColor)',
     });
     expect(createVariantStyle('plainHover', vars)).to.deep.include({
-      cursor: 'pointer',
       color: 'var(--joy-variant-plainHoverColor, var(--joy-variant-plainColor))',
       backgroundColor: 'var(--joy-variant-plainHoverBg)',
     });
@@ -329,7 +324,6 @@ describe('variant utils', () => {
 
       const softHoverResult = createVariant('softHover', theme);
       expect(softHoverResult.customColor).to.deep.include({
-        cursor: 'pointer',
         color: 'var(--joy-palette-customColor-softHoverColor)',
       });
     });