chore: Update StepperField disabled buttons style (#2330)

* chore: Update StepperField disabled buttons

* chore: Update StepperField disabled buttons

* Update snapshots

Author: ioanabrooks

.changeset/tall-waves-worry.md

@@ -0,0 +1,6 @@
+---
+'@aws-amplify/ui-react': patch
+'@aws-amplify/ui': patch
+---
+
+ui-react(fix): Update StepperField disabled buttons styles, making them easier to see.

packages/react/src/primitives/StepperField/StepperField.tsx

@@ -11,7 +11,7 @@ import { Input } from '../Input';
 import { Label } from '../Label';
 import { Primitive } from '../types/view';
 import { StepperFieldProps } from '../types/stepperField';
-import { classNameModifier } from '../shared/utils';
+import { classNameModifier, classNameModifierByFlag } from '../shared/utils';
 import { ComponentClassNames, ComponentText } from '../shared/constants';
 import { splitPrimitiveProps } from '../shared/styleUtils';
 import { useStableId } from '../utils/useStableId';
@@ -124,6 +124,11 @@ const StepperFieldPrimitive: Primitive<StepperFieldProps, 'input'> = (
               classNameModifier(
                 ComponentClassNames.StepperFieldButtonDecrease,
                 variation
+              ),
+              classNameModifierByFlag(
+                ComponentClassNames.StepperFieldButtonDecrease,
+                'disabled',
+                shouldDisableDecreaseButton
               )
             )}
             data-invalid={hasError}
@@ -143,6 +148,11 @@ const StepperFieldPrimitive: Primitive<StepperFieldProps, 'input'> = (
               classNameModifier(
                 ComponentClassNames.StepperFieldButtonIncrease,
                 variation
+              ),
+              classNameModifierByFlag(
+                ComponentClassNames.StepperFieldButtonIncrease,
+                'disabled',
+                shouldDisableIncreaseButton
               )
             )}
             data-invalid={hasError}

packages/ui/src/theme/__tests__/defaultTheme.test.ts

@@ -602,7 +602,7 @@ describe('@aws-amplify/ui', () => {
         --amplify-components-stepperfield-button-focus-color: var(--amplify-components-button-focus-color);
         --amplify-components-stepperfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
         --amplify-components-stepperfield-button-disabled-color: var(--amplify-components-button-disabled-color);
-        --amplify-components-stepperfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
+        --amplify-components-stepperfield-button-disabled-background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
         --amplify-components-stepperfield-button-hover-color: var(--amplify-components-button-hover-color);
         --amplify-components-stepperfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
         --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);

packages/ui/src/theme/__tests__/overrides.test.ts

@@ -636,7 +636,7 @@ describe('@aws-amplify/ui', () => {
         --amplify-components-stepperfield-button-focus-color: var(--amplify-components-button-focus-color);
         --amplify-components-stepperfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
         --amplify-components-stepperfield-button-disabled-color: var(--amplify-components-button-disabled-color);
-        --amplify-components-stepperfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
+        --amplify-components-stepperfield-button-disabled-background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
         --amplify-components-stepperfield-button-hover-color: var(--amplify-components-button-hover-color);
         --amplify-components-stepperfield-button-hover-background-color: var(--amplify-components-button-hover-background-color);
         --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);

packages/ui/src/theme/css/component/stepperField.scss

@@ -42,31 +42,31 @@
   );
 }
 
-.amplify-stepperfield__button--decrease {
+.amplify-stepperfield__button--decrease,
+.amplify-stepperfield__button--increase {
   background-color: var(
     --amplify-components-stepperfield-button-background-color
   );
-  &[data-invalid='true'] {
-    border-inline-end: none;
+  &--disabled {
+    background-color: var(
+      --amplify-components-stepperfield-button-disabled-background-color
+    );
   }
-
   &--quiet {
     border-width: 0 0 var(--amplify-components-button-border-width) 0;
     border-radius: 0;
   }
 }
 
-.amplify-stepperfield__button--increase {
-  background-color: var(
-    --amplify-components-stepperfield-button-background-color
-  );
+.amplify-stepperfield__button--decrease {
   &[data-invalid='true'] {
-    border-inline-start: none;
+    border-inline-end: none;
   }
+}
 
-  &--quiet {
-    border-width: 0 0 var(--amplify-components-button-border-width) 0;
-    border-radius: 0;
+.amplify-stepperfield__button--increase {
+  &[data-invalid='true'] {
+    border-inline-start: none;
   }
 }
 

packages/ui/src/theme/tokens/components/stepperField.ts

@@ -54,7 +54,7 @@ export const stepperfield: StepperFieldTokens = {
     _disabled: {
       color: { value: '{components.button._disabled.color}' },
       backgroundColor: {
-        value: '{components.button._disabled.backgroundColor}',
+        value: '{components.fieldcontrol._disabled.backgroundColor}',
       },
     },
     _hover: {