feat(input): add elevation changes

twilio-labs · Jan 29, 2025 · 4d547af · 4d547af
1 parent 2f80f75
commit 4d547af
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 24 deletions.
diff --git a/packages/paste-core/components/input-box/src/InputChevronWrapper.tsx b/packages/paste-core/components/input-box/src/InputChevronWrapper.tsx
@@ -43,14 +43,14 @@ const getInputChevronIconColor = (
 
 const BackgroundColorStyles: { [variant: string]: { [key: string]: BackgroundColor } } = {
   default: {
-    default: "colorBackground",
+    default: "colorBackgroundElevation",
     disabled: "colorBackground",
-    readOnly: "colorBackground",
+    readOnly: "colorBackgroundElevation",
   },
   inverse: {
-    default: "colorBackgroundInverseStrong",
+    default: "colorBackgroundInverseElevation",
     disabled: "colorBackgroundInverse",
-    readOnly: "colorBackgroundInverseStrong",
+    readOnly: "colorBackgroundInverseElevation",
   },
 };
 

diff --git a/packages/paste-core/components/input-box/src/Prefix.tsx b/packages/paste-core/components/input-box/src/Prefix.tsx
@@ -18,18 +18,14 @@ export interface PrefixProps {
 
 const Prefix = React.forwardRef<HTMLDivElement, PrefixProps>(
   ({ children, disabled, element = "PREFIX", variant }, ref) => {
-    let backgroundColor = "colorBackgroundWeak" as BackgroundColor;
-    let borderColor = "colorBorderWeaker" as BorderColor;
+    let backgroundColor = "colorBackgroundBodyElevation" as BackgroundColor;
 
     if (disabled && variant === "inverse") {
       backgroundColor = "none";
-      borderColor = "colorBorderInverseWeaker";
     } else if (variant === "inverse") {
-      backgroundColor = "colorBackgroundInverse";
-      borderColor = "colorBorderInverse";
+      backgroundColor = "colorBackgroundInverseElevation";
     } else if (disabled) {
       backgroundColor = "none";
-      borderColor = "colorBorderWeaker";
     }
 
     if (children == null) return null;
@@ -38,9 +34,6 @@ const Prefix = React.forwardRef<HTMLDivElement, PrefixProps>(
         alignItems="flex-start"
         backgroundColor={backgroundColor}
         borderBottomLeftRadius="borderRadius20"
-        borderRightColor={borderColor}
-        borderRightStyle="solid"
-        borderRightWidth="borderWidth10"
         borderTopLeftRadius="borderRadius20"
         display="flex"
         element={`${element}_PREFIX`}

diff --git a/packages/paste-core/components/input-box/src/Suffix.tsx b/packages/paste-core/components/input-box/src/Suffix.tsx
@@ -18,18 +18,14 @@ export interface SuffixProps {
 
 const Suffix = React.forwardRef<HTMLDivElement, SuffixProps>(
   ({ children, disabled, element = "SUFFIX", variant }, ref) => {
-    let backgroundColor = "colorBackgroundWeak" as BackgroundColor;
-    let borderColor = "colorBorderWeaker" as BorderColor;
+    let backgroundColor = "colorBackgroundBodyElevation" as BackgroundColor;
 
     if (disabled && variant === "inverse") {
       backgroundColor = "none";
-      borderColor = "colorBorderInverseWeaker";
     } else if (variant === "inverse") {
-      backgroundColor = "colorBackgroundInverse";
-      borderColor = "colorBorderInverse";
+      backgroundColor = "colorBackgroundInverseElevation";
     } else if (disabled) {
       backgroundColor = "none";
-      borderColor = "colorBorderWeaker";
     }
 
     if (children == null) return null;
@@ -38,9 +34,6 @@ const Suffix = React.forwardRef<HTMLDivElement, SuffixProps>(
         alignItems="flex-start"
         backgroundColor={backgroundColor}
         borderBottomRightRadius="borderRadius20"
-        borderLeftColor={borderColor}
-        borderLeftStyle="solid"
-        borderLeftWidth="borderWidth10"
         borderTopRightRadius="borderRadius20"
         display="flex"
         element={`${element}_SUFFIX`}

diff --git a/packages/paste-core/components/input/src/DecrementButton.tsx b/packages/paste-core/components/input/src/DecrementButton.tsx
@@ -25,7 +25,7 @@ export const DecrementButton = React.forwardRef<HTMLButtonElement, DecrementButt
         size="reset"
         type="button"
         borderRadius="borderRadius20"
-        backgroundColor={variant === "inverse" ? "colorBackgroundInverseStrong" : "colorBackground"}
+        backgroundColor={variant === "inverse" ? "colorBackgroundInverseElevation" : "colorBackgroundElevation"}
         marginRight="space30"
         _focus={{
           boxShadow: variant === "inverse" ? "shadowBorderInverseStrong" : "shadowBorderPrimary",

diff --git a/packages/paste-core/components/input/src/IncrementButton.tsx b/packages/paste-core/components/input/src/IncrementButton.tsx
@@ -25,7 +25,7 @@ export const IncrementButton = React.forwardRef<HTMLButtonElement, IncrementButt
         size="reset"
         type="button"
         borderRadius="borderRadius20"
-        backgroundColor={variant === "inverse" ? "colorBackgroundInverseStrong" : "colorBackground"}
+        backgroundColor={variant === "inverse" ? "colorBackgroundInverseElevation" : "colorBackgroundElevation"}
         marginRight="space30"
         _focus={{
           boxShadow: variant === "inverse" ? "shadowBorderInverseStrong" : "shadowBorderPrimary",