Set custom cursor theme when RadioButton and CheckBox are disabled

src/js/components/Anchor/StyledAnchor.js

@@ -3,9 +3,9 @@ import styled, { css } from 'styled-components';
 import { focusStyle, genericStyles, normalizeColor } from '../../utils';
 import { defaultProps } from '../../default-props';
 
-const disabledStyle = `
+const disabledStyle = (theme) => `
   opacity: 0.3;
-  cursor: default;
+  cursor: ${theme.global.control?.disabled?.cursor || 'default'};
   text-decoration: none;
 `;
 
@@ -76,7 +76,7 @@ const StyledAnchor = styled.a.withConfig({
     `
     padding: ${props.theme.global.edgeSize.small};
   `}
-  ${(props) => props.disabled && disabledStyle}
+  ${(props) => props.disabled && disabledStyle(props.theme)}
   ${(props) => props.focus && focusStyle()}
   ${(props) => props.theme.anchor.extend}
 `;

src/js/components/Anchor/stories/CustomThemed/CustomDisabledCursor.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { Anchor, Box, Grommet } from 'grommet';
+
+export const CustomDisabledCursor = () => (
+  <Grommet
+    theme={{ global: { control: { disabled: { cursor: 'not-allowed' } } } }}
+  >
+    <Box gap="medium" align="center" pad="large">
+      <Anchor disabled label="Disabled Anchor" />
+    </Box>
+  </Grommet>
+);
+
+CustomDisabledCursor.parameters = {
+  chromatic: { disable: true },
+};
+
+export default {
+  title: 'Controls/Anchor/Custom Theme/Custom Disabled Cursor',
+};

src/js/components/Button/StyledButton.js

@@ -6,10 +6,10 @@ import {
   disabledStyle,
   edgeStyle,
   focusStyle,
-  unfocusStyle,
   genericStyles,
   getHoverIndicatorStyle,
   normalizeColor,
+  unfocusStyle,
 } from '../../utils';
 import { defaultProps } from '../../default-props';
 
@@ -162,6 +162,7 @@ const activeButtonStyle = (props) => css`
 
 const disabledButtonStyle = (props) => css`
   ${disabledStyle(props.theme.button.disabled.opacity)}
+  ${props.theme.global.input.disabled}
   ${!props.plain &&
   props.theme.button.disabled.border &&
   props.theme.button.disabled.border.color &&
@@ -181,6 +182,9 @@ const disabledButtonStyle = (props) => css`
         props.theme,
       )};`)}
   ${props.theme.button.disabled && props.theme.button.disabled.extend}
+  cursor: ${props.disabled
+    ? props.theme.global.control.disabled.cursor || 'default'
+    : 'default'}
 `;
 
 // Deprecate props.theme.button.disabled.opacity in V3
@@ -199,22 +203,19 @@ const StyledButton = styled.button`
   ${(props) => props.plain && plainStyle(props)}
   ${(props) => !props.plain && basicStyle(props)}
   ${(props) => props.primary && primaryStyle(props)}
-
   ${(props) =>
     !props.disabled &&
     !props.selected &&
     !props.focus &&
     !props.busy &&
     !props.success &&
     hoverStyle}
-
   ${(props) => !props.disabled && props.active && activeButtonStyle(props)}
   ${(props) =>
     props.disabled &&
     props.theme.button &&
     props.theme.button.disabled &&
     disabledButtonStyle(props)}
-
   &:focus {
     ${(props) => (!props.plain || props.focusIndicator) && focusStyle()}
   }