chore(Input): increment/decrement reset buttons focus stylings

.changeset/wise-suns-serve.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/input": patch
+"@twilio-paste/core": patch
+---
+
+[Input] updated focus stylings on increment/decrement buttons for number input type on both default and inverse variants

packages/paste-core/components/input/src/DecrementButton.tsx

@@ -4,15 +4,18 @@ import { ChevronDownIcon } from "@twilio-paste/icons/esm/ChevronDownIcon";
 import type { HTMLPasteProps } from "@twilio-paste/types";
 import * as React from "react";
 
+import { InputVariants } from "./Input";
+
 export interface DecrementButtonProps extends HTMLPasteProps<"button"> {
   i18nStepDownLabel?: string;
   element?: BoxProps["element"];
   // Button component restricts tabIndex values
   tabIndex?: ButtonProps["tabIndex"];
+  variant?: InputVariants;
 }
 
 export const DecrementButton = React.forwardRef<HTMLButtonElement, DecrementButtonProps>(
-  ({ i18nStepDownLabel = "step value down", element, ...props }, ref) => {
+  ({ i18nStepDownLabel = "step value down", element, variant, ...props }, ref) => {
     return (
       <Button
         {...props}
@@ -22,8 +25,11 @@ export const DecrementButton = React.forwardRef<HTMLButtonElement, DecrementButt
         size="reset"
         type="button"
         borderRadius="borderRadius20"
-        backgroundColor="colorBackground"
+        backgroundColor={variant === "inverse" ? "colorBackgroundInverseStrong" : "colorBackground"}
         marginRight="space30"
+        _focus={{
+          boxShadow: variant === "inverse" ? "shadowBorderInverseStrong" : "shadowBorderPrimary",
+        }}
       >
         <ChevronDownIcon
           decorative={false}

packages/paste-core/components/input/src/IncrementButton.tsx

@@ -4,15 +4,18 @@ import { ChevronUpIcon } from "@twilio-paste/icons/esm/ChevronUpIcon";
 import type { HTMLPasteProps } from "@twilio-paste/types";
 import * as React from "react";
 
+import { InputVariants } from "./Input";
+
 export interface IncrementButtonProps extends HTMLPasteProps<"button"> {
   i18nStepUpLabel?: string;
   element?: BoxProps["element"];
   // Button component restricts tabIndex values
   tabIndex?: ButtonProps["tabIndex"];
+  variant?: InputVariants;
 }
 
 export const IncrementButton = React.forwardRef<HTMLButtonElement, IncrementButtonProps>(
-  ({ i18nStepUpLabel = "step value up", element, ...props }, ref) => {
+  ({ i18nStepUpLabel = "step value up", element, variant, ...props }, ref) => {
     return (
       <Button
         {...props}
@@ -22,8 +25,11 @@ export const IncrementButton = React.forwardRef<HTMLButtonElement, IncrementButt
         size="reset"
         type="button"
         borderRadius="borderRadius20"
-        backgroundColor="colorBackground"
+        backgroundColor={variant === "inverse" ? "colorBackgroundInverseStrong" : "colorBackground"}
         marginRight="space30"
+        _focus={{
+          boxShadow: variant === "inverse" ? "shadowBorderInverseStrong" : "shadowBorderPrimary",
+        }}
       >
         <ChevronUpIcon
           decorative={false}

packages/paste-core/components/input/src/Input.tsx

@@ -333,6 +333,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
                   internalRef.current?.focus();
                 }}
                 i18nStepUpLabel={i18nStepUpLabel}
+                variant={variant}
               />
             ) : (
               <Box height="12px" width="12px" element={`${element}_INCREMENT_PLACEHOLDER`} />
@@ -347,6 +348,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
                   internalRef.current?.focus();
                 }}
                 i18nStepDownLabel={i18nStepDownLabel}
+                variant={variant}
               />
             ) : (
               <Box height="12px" width="12px" element={`${element}_DECREMENT_PLACEHOLDER`} />

packages/paste-core/components/input/stories/input.stories.tsx

@@ -713,6 +713,32 @@ export const DefaultNumberInput = (): React.ReactNode => {
 
 DefaultNumberInput.storyName = "Number Input - Controlled";
 
+export const DefaultNumberInverseInput = (): React.ReactNode => {
+  const uid = useUID();
+  const [value, setValue] = React.useState("0");
+  return (
+    <Box backgroundColor="colorBackgroundBodyInverse" padding="space60">
+      <Label htmlFor={uid} variant="inverse">
+        Label
+      </Label>
+      <Input
+        id={uid}
+        type="number"
+        max="50"
+        min="-50"
+        step={5}
+        value={value}
+        onChange={(event) => {
+          setValue(event.target.value);
+        }}
+        variant="inverse"
+      />
+    </Box>
+  );
+};
+
+DefaultNumberInverseInput.storyName = "Number Input - Inverse Controlled";
+
 export const TestNumberInput = (): React.ReactNode => {
   const uid = useUID();
   const [value, setValue] = React.useState("5");