From 76cd29ab2cd590fabd36539c8258608ef6ab673d Mon Sep 17 00:00:00 2001
From: Kristian Antrobus <kantrobus@twilio.com>
Date: Wed, 22 May 2024 15:56:41 -0500
Subject: [PATCH 1/5] feat(Intput): increment/decrement reset buttons focus
 stylings

---
 .changeset/wise-suns-serve.md                 |  5 ++++
 .../components/input/src/DecrementButton.tsx  | 13 +++++++++-
 .../components/input/src/IncrementButton.tsx  | 13 +++++++++-
 .../paste-core/components/input/src/Input.tsx |  2 ++
 .../input/stories/input.stories.tsx           | 26 +++++++++++++++++++
 5 files changed, 57 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/wise-suns-serve.md

diff --git a/.changeset/wise-suns-serve.md b/.changeset/wise-suns-serve.md
new file mode 100644
index 0000000000..3812dfefa5
--- /dev/null
+++ b/.changeset/wise-suns-serve.md
@@ -0,0 +1,5 @@
+---
+"@twilio-paste/input": patch
+---
+
+[Input] updated focus stylings on increment/decrement buttons for number input type on both default and inverse variants
diff --git a/packages/paste-core/components/input/src/DecrementButton.tsx b/packages/paste-core/components/input/src/DecrementButton.tsx
index 50b53e6e8c..d256369d0f 100644
--- a/packages/paste-core/components/input/src/DecrementButton.tsx
+++ b/packages/paste-core/components/input/src/DecrementButton.tsx
@@ -3,12 +3,14 @@ import { Button, type ButtonProps } from "@twilio-paste/button";
 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>(
@@ -22,8 +24,17 @@ export const DecrementButton = React.forwardRef<HTMLButtonElement, DecrementButt
         size="reset"
         type="button"
         borderRadius="borderRadius20"
-        backgroundColor="colorBackground"
+        backgroundColor={props.variant === "inverse" ? "colorBackgroundInverseStrong" : "colorBackground"}
         marginRight="space30"
+        _focus={{
+          borderRadius: "borderRadius20",
+          borderWidth: "borderWidth10",
+          borderStyle: "solid",
+          borderColor: props.variant === "inverse" ? "colorBorderInverseStrong" : "colorBorderPrimary",
+        }}
+        borderWidth="borderWidth10"
+        borderStyle="solid"
+        borderColor="transparent"
       >
         <ChevronDownIcon
           decorative={false}
diff --git a/packages/paste-core/components/input/src/IncrementButton.tsx b/packages/paste-core/components/input/src/IncrementButton.tsx
index 75d258fb43..ba21e35910 100644
--- a/packages/paste-core/components/input/src/IncrementButton.tsx
+++ b/packages/paste-core/components/input/src/IncrementButton.tsx
@@ -3,12 +3,14 @@ import { Button, type ButtonProps } from "@twilio-paste/button";
 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>(
@@ -22,8 +24,17 @@ export const IncrementButton = React.forwardRef<HTMLButtonElement, IncrementButt
         size="reset"
         type="button"
         borderRadius="borderRadius20"
-        backgroundColor="colorBackground"
+        backgroundColor={props.variant === "inverse" ? "colorBackgroundInverseStrong" : "colorBackground"}
         marginRight="space30"
+        _focus={{
+          borderRadius: "borderRadius20",
+          borderWidth: "borderWidth10",
+          borderStyle: "solid",
+          borderColor: props.variant === "inverse" ? "colorBorderInverseStrong" : "colorBorderPrimary",
+        }}
+        borderWidth="borderWidth10"
+        borderStyle="solid"
+        borderColor="transparent"
       >
         <ChevronUpIcon
           decorative={false}
diff --git a/packages/paste-core/components/input/src/Input.tsx b/packages/paste-core/components/input/src/Input.tsx
index c8638b73e4..b63f91cdca 100644
--- a/packages/paste-core/components/input/src/Input.tsx
+++ b/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`} />
diff --git a/packages/paste-core/components/input/stories/input.stories.tsx b/packages/paste-core/components/input/stories/input.stories.tsx
index 57b6e2f10c..cbe1bcbe89 100644
--- a/packages/paste-core/components/input/stories/input.stories.tsx
+++ b/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");

From 39ba2a7e7e346b06ccdba46be31b46c3b6d6368b Mon Sep 17 00:00:00 2001
From: Kristian Antrobus <kantrobus@twilio.com>
Date: Wed, 22 May 2024 16:21:34 -0500
Subject: [PATCH 2/5] feat(Input): updating the changeset to include core patch

---
 .changeset/wise-suns-serve.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.changeset/wise-suns-serve.md b/.changeset/wise-suns-serve.md
index 3812dfefa5..e208741aab 100644
--- a/.changeset/wise-suns-serve.md
+++ b/.changeset/wise-suns-serve.md
@@ -1,5 +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

From 520967f16178cb8564994e99aec7e9777ad3433f Mon Sep 17 00:00:00 2001
From: Kristian Antrobus <kantrobus@twilio.com>
Date: Wed, 22 May 2024 16:31:19 -0500
Subject: [PATCH 3/5] feat(Input): lint fix

---
 packages/paste-core/components/input/src/DecrementButton.tsx | 1 +
 packages/paste-core/components/input/src/IncrementButton.tsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/paste-core/components/input/src/DecrementButton.tsx b/packages/paste-core/components/input/src/DecrementButton.tsx
index d256369d0f..3f04843550 100644
--- a/packages/paste-core/components/input/src/DecrementButton.tsx
+++ b/packages/paste-core/components/input/src/DecrementButton.tsx
@@ -3,6 +3,7 @@ import { Button, type ButtonProps } from "@twilio-paste/button";
 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"> {
diff --git a/packages/paste-core/components/input/src/IncrementButton.tsx b/packages/paste-core/components/input/src/IncrementButton.tsx
index ba21e35910..0df628652f 100644
--- a/packages/paste-core/components/input/src/IncrementButton.tsx
+++ b/packages/paste-core/components/input/src/IncrementButton.tsx
@@ -3,6 +3,7 @@ import { Button, type ButtonProps } from "@twilio-paste/button";
 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"> {

From 9cf682c2e04e3da82d1c71cd5faee272830e4d18 Mon Sep 17 00:00:00 2001
From: Kristian Antrobus <kantrobus@twilio.com>
Date: Thu, 23 May 2024 09:02:56 -0500
Subject: [PATCH 4/5] feat(Input): destructure prop

---
 .../paste-core/components/input/src/DecrementButton.tsx     | 6 +++---
 .../paste-core/components/input/src/IncrementButton.tsx     | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/paste-core/components/input/src/DecrementButton.tsx b/packages/paste-core/components/input/src/DecrementButton.tsx
index 3f04843550..bca0241dbc 100644
--- a/packages/paste-core/components/input/src/DecrementButton.tsx
+++ b/packages/paste-core/components/input/src/DecrementButton.tsx
@@ -15,7 +15,7 @@ export interface DecrementButtonProps extends HTMLPasteProps<"button"> {
 }
 
 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}
@@ -25,13 +25,13 @@ export const DecrementButton = React.forwardRef<HTMLButtonElement, DecrementButt
         size="reset"
         type="button"
         borderRadius="borderRadius20"
-        backgroundColor={props.variant === "inverse" ? "colorBackgroundInverseStrong" : "colorBackground"}
+        backgroundColor={variant === "inverse" ? "colorBackgroundInverseStrong" : "colorBackground"}
         marginRight="space30"
         _focus={{
           borderRadius: "borderRadius20",
           borderWidth: "borderWidth10",
           borderStyle: "solid",
-          borderColor: props.variant === "inverse" ? "colorBorderInverseStrong" : "colorBorderPrimary",
+          borderColor: variant === "inverse" ? "colorBorderInverseStrong" : "colorBorderPrimary",
         }}
         borderWidth="borderWidth10"
         borderStyle="solid"
diff --git a/packages/paste-core/components/input/src/IncrementButton.tsx b/packages/paste-core/components/input/src/IncrementButton.tsx
index 0df628652f..b19215957e 100644
--- a/packages/paste-core/components/input/src/IncrementButton.tsx
+++ b/packages/paste-core/components/input/src/IncrementButton.tsx
@@ -15,7 +15,7 @@ export interface IncrementButtonProps extends HTMLPasteProps<"button"> {
 }
 
 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}
@@ -25,13 +25,13 @@ export const IncrementButton = React.forwardRef<HTMLButtonElement, IncrementButt
         size="reset"
         type="button"
         borderRadius="borderRadius20"
-        backgroundColor={props.variant === "inverse" ? "colorBackgroundInverseStrong" : "colorBackground"}
+        backgroundColor={variant === "inverse" ? "colorBackgroundInverseStrong" : "colorBackground"}
         marginRight="space30"
         _focus={{
           borderRadius: "borderRadius20",
           borderWidth: "borderWidth10",
           borderStyle: "solid",
-          borderColor: props.variant === "inverse" ? "colorBorderInverseStrong" : "colorBorderPrimary",
+          borderColor: variant === "inverse" ? "colorBorderInverseStrong" : "colorBorderPrimary",
         }}
         borderWidth="borderWidth10"
         borderStyle="solid"

From 6b817ed839738935e10cefdabf7130c1a339a9ae Mon Sep 17 00:00:00 2001
From: Kristian Antrobus <kantrobus@twilio.com>
Date: Thu, 23 May 2024 10:12:08 -0500
Subject: [PATCH 5/5] chore(Input): use box shaow instead of border

---
 .../paste-core/components/input/src/DecrementButton.tsx   | 8 +-------
 .../paste-core/components/input/src/IncrementButton.tsx   | 8 +-------
 2 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/packages/paste-core/components/input/src/DecrementButton.tsx b/packages/paste-core/components/input/src/DecrementButton.tsx
index bca0241dbc..2391091844 100644
--- a/packages/paste-core/components/input/src/DecrementButton.tsx
+++ b/packages/paste-core/components/input/src/DecrementButton.tsx
@@ -28,14 +28,8 @@ export const DecrementButton = React.forwardRef<HTMLButtonElement, DecrementButt
         backgroundColor={variant === "inverse" ? "colorBackgroundInverseStrong" : "colorBackground"}
         marginRight="space30"
         _focus={{
-          borderRadius: "borderRadius20",
-          borderWidth: "borderWidth10",
-          borderStyle: "solid",
-          borderColor: variant === "inverse" ? "colorBorderInverseStrong" : "colorBorderPrimary",
+          boxShadow: variant === "inverse" ? "shadowBorderInverseStrong" : "shadowBorderPrimary",
         }}
-        borderWidth="borderWidth10"
-        borderStyle="solid"
-        borderColor="transparent"
       >
         <ChevronDownIcon
           decorative={false}
diff --git a/packages/paste-core/components/input/src/IncrementButton.tsx b/packages/paste-core/components/input/src/IncrementButton.tsx
index b19215957e..5acbc2dec3 100644
--- a/packages/paste-core/components/input/src/IncrementButton.tsx
+++ b/packages/paste-core/components/input/src/IncrementButton.tsx
@@ -28,14 +28,8 @@ export const IncrementButton = React.forwardRef<HTMLButtonElement, IncrementButt
         backgroundColor={variant === "inverse" ? "colorBackgroundInverseStrong" : "colorBackground"}
         marginRight="space30"
         _focus={{
-          borderRadius: "borderRadius20",
-          borderWidth: "borderWidth10",
-          borderStyle: "solid",
-          borderColor: variant === "inverse" ? "colorBorderInverseStrong" : "colorBorderPrimary",
+          boxShadow: variant === "inverse" ? "shadowBorderInverseStrong" : "shadowBorderPrimary",
         }}
-        borderWidth="borderWidth10"
-        borderStyle="solid"
-        borderColor="transparent"
       >
         <ChevronUpIcon
           decorative={false}