From 9014fdca968cfb53cc27abf714bdde8c4d7d5266 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Wed, 29 Jan 2025 16:03:32 +0530
Subject: [PATCH 01/46] feat(side-panel): add elevation changes

---
 packages/paste-core/components/side-panel/src/SidePanel.tsx | 6 ++----
 .../components/side-panel/src/SidePanelFooter.tsx           | 2 +-
 .../stories/components/MessagingInsightsContent.tsx         | 4 ----
 .../stories/components/SidePanelWithAIContent.tsx           | 2 --
 .../stories/components/SidePanelWithFilterContent.tsx       | 2 --
 .../paste-website/src/pages/components/side-panel/index.mdx | 4 ----
 6 files changed, 3 insertions(+), 17 deletions(-)

diff --git a/packages/paste-core/components/side-panel/src/SidePanel.tsx b/packages/paste-core/components/side-panel/src/SidePanel.tsx
index 6d33b5aed9..ba16607ab5 100644
--- a/packages/paste-core/components/side-panel/src/SidePanel.tsx
+++ b/packages/paste-core/components/side-panel/src/SidePanel.tsx
@@ -96,11 +96,9 @@ const SidePanel = React.forwardRef<HTMLDivElement, SidePanelProps>(
                     maxHeight="100%"
                     flexDirection="column"
                     width={["100%", "size40", "size40"]}
-                    borderStyle="solid"
                     borderRadius={["borderRadius0", "borderRadius70", "borderRadius70"]}
-                    borderWidth="borderWidth10"
-                    borderColor="colorBorderWeaker"
-                    backgroundColor="colorBackgroundBody"
+                    boxShadow="shadowElevation05"
+                    backgroundColor="colorBackgroundWeaker"
                     marginTop="space40"
                     marginBottom={["space0", "space40", "space40"]}
                     paddingBottom="space70"
diff --git a/packages/paste-core/components/side-panel/src/SidePanelFooter.tsx b/packages/paste-core/components/side-panel/src/SidePanelFooter.tsx
index 248ecee702..ebb51ded1a 100644
--- a/packages/paste-core/components/side-panel/src/SidePanelFooter.tsx
+++ b/packages/paste-core/components/side-panel/src/SidePanelFooter.tsx
@@ -11,7 +11,7 @@ const SidePanelFooter = React.forwardRef<HTMLDivElement, SidePanelFooterProps>(
         paddingX={variant === "chat" ? "space50" : "space70"}
         paddingBottom="space50"
         paddingTop={variant === "chat" ? "space0" : "space50"}
-        boxShadow={variant === "chat" ? "none" : "shadow"}
+        boxShadow={variant === "chat" ? "none" : "shadowElevationTop05"}
         marginBottom="spaceNegative70"
         zIndex="zIndex20"
         display="flex"
diff --git a/packages/paste-core/components/side-panel/stories/components/MessagingInsightsContent.tsx b/packages/paste-core/components/side-panel/stories/components/MessagingInsightsContent.tsx
index 5e3215f650..bbf9ca0be5 100644
--- a/packages/paste-core/components/side-panel/stories/components/MessagingInsightsContent.tsx
+++ b/packages/paste-core/components/side-panel/stories/components/MessagingInsightsContent.tsx
@@ -14,7 +14,6 @@ import { PlusIcon } from "@twilio-paste/icons/esm/PlusIcon";
 import { Label } from "@twilio-paste/label";
 import { Paragraph } from "@twilio-paste/paragraph";
 import { Option, Select } from "@twilio-paste/select";
-import { Separator } from "@twilio-paste/separator";
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@twilio-paste/tabs";
 import { Text } from "@twilio-paste/text";
 import { useUID } from "@twilio-paste/uid-library";
@@ -74,9 +73,6 @@ export const MessagingInsightsContent: React.FC<React.PropsWithChildren<{ mainCo
                   helpText="Times shown in UTC"
                 />
               </Box>
-              <Box gridArea="separator">
-                <Separator orientation="horizontal" />
-              </Box>
               <Box gridArea="field">
                 <Label htmlFor={fieldId}>Field</Label>
                 <Select id={fieldId}>
diff --git a/packages/paste-core/components/side-panel/stories/components/SidePanelWithAIContent.tsx b/packages/paste-core/components/side-panel/stories/components/SidePanelWithAIContent.tsx
index 8c792ac365..6fc5267a6d 100644
--- a/packages/paste-core/components/side-panel/stories/components/SidePanelWithAIContent.tsx
+++ b/packages/paste-core/components/side-panel/stories/components/SidePanelWithAIContent.tsx
@@ -10,7 +10,6 @@ import { ArtificialIntelligenceIcon } from "@twilio-paste/icons/esm/ArtificialIn
 import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon";
 import { MoreIcon } from "@twilio-paste/icons/esm/MoreIcon";
 import { SendIcon } from "@twilio-paste/icons/esm/SendIcon";
-import { Separator } from "@twilio-paste/separator";
 import * as React from "react";
 
 import { SidePanel, SidePanelBody, SidePanelFooter, SidePanelHeader, SidePanelHeaderActions } from "../../src";
@@ -29,7 +28,6 @@ export const SidePanelWithAIContent: React.FC<React.PropsWithChildren> = () => {
           </Button>
         </SidePanelHeaderActions>
       </SidePanelHeader>
-      <Separator orientation="horizontal" verticalSpacing="space0" />
       <SidePanelBody>
         <Box width="100%">
           <AIChatLog>
diff --git a/packages/paste-core/components/side-panel/stories/components/SidePanelWithFilterContent.tsx b/packages/paste-core/components/side-panel/stories/components/SidePanelWithFilterContent.tsx
index cd4f60cd80..f4f25ca83b 100644
--- a/packages/paste-core/components/side-panel/stories/components/SidePanelWithFilterContent.tsx
+++ b/packages/paste-core/components/side-panel/stories/components/SidePanelWithFilterContent.tsx
@@ -6,7 +6,6 @@ import { Button } from "@twilio-paste/button";
 import { Disclosure, DisclosureContent, DisclosureHeading } from "@twilio-paste/disclosure";
 import { Heading } from "@twilio-paste/heading";
 import { Radio, RadioGroup } from "@twilio-paste/radio-group";
-import { Separator } from "@twilio-paste/separator";
 import * as React from "react";
 
 import { SidePanel, SidePanelBody, SidePanelFooter, SidePanelHeader } from "../../src";
@@ -19,7 +18,6 @@ export const SidePanelWithFilterContent: React.FC<React.PropsWithChildren> = ()
           More filters
         </Heading>
       </SidePanelHeader>
-      <Separator orientation="horizontal" verticalSpacing="space0" />
       <SidePanelBody>
         <Box width="100%" display="flex" paddingTop="space70" flexDirection="column" rowGap="space40">
           <Disclosure variant="contained" visible>
diff --git a/packages/paste-website/src/pages/components/side-panel/index.mdx b/packages/paste-website/src/pages/components/side-panel/index.mdx
index c7e3c5c5c3..8113430970 100644
--- a/packages/paste-website/src/pages/components/side-panel/index.mdx
+++ b/packages/paste-website/src/pages/components/side-panel/index.mdx
@@ -61,9 +61,7 @@ export const SidePanelExample = (): React.ReactNode => {
             </Button>
           </SidePanelHeaderActions>
         </SidePanelHeader>
-        <Separator orientation="horizontal" verticalSpacing="space0" />
         <SidePanelBody>
-          <Separator orientation="horizontal" verticalSpacing="space0" />
           Side Panel content goes here.
         </SidePanelBody>
         <SidePanelFooter>
@@ -134,9 +132,7 @@ export const SidePanelExample = (): React.ReactNode => {
             </Button>
           </SidePanelHeaderActions>
         </SidePanelHeader>
-        <Separator orientation="horizontal" verticalSpacing="space0" />
         <SidePanelBody>
-          <Separator orientation="horizontal" verticalSpacing="space0" />
           Side Panel content goes here.
         </SidePanelBody>
         <SidePanelFooter>

From 8f156b52b5119ff47f1b70182cd34573ee0f3877 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Wed, 29 Jan 2025 16:28:06 +0530
Subject: [PATCH 02/46] feat(minimizable-dialog): add elevation changes

---
 .../src/MinimizableDialogHeader.tsx           |  8 ++---
 .../src/StyledMinimizableDialog.tsx           | 32 +++++++++++--------
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogHeader.tsx b/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogHeader.tsx
index ea74c62f8b..1efbadd6c3 100644
--- a/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogHeader.tsx
+++ b/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogHeader.tsx
@@ -60,16 +60,12 @@ const MinimizableDialogHeader = React.forwardRef<HTMLDivElement, MinimizableDial
         display="grid"
         gridTemplateColumns="1fr auto auto"
         columnGap="space30"
-        backgroundColor="colorBackground"
+        backgroundColor={minimized ? "colorBackgroundBodyElevation" : "colorBackgroundWeaker"}
         paddingX="space70"
         paddingY="space40"
         color="colorTextWeak"
         overflow="hidden"
-        borderBottomWidth="borderWidth10"
-        borderBottomStyle="solid"
-        borderBottomColor="colorBorderWeaker"
-        borderTopRightRadius="borderRadius20"
-        borderTopLeftRadius="borderRadius20"
+        boxShadow={minimized ? "shadowElevation10" : "none"}
         element={element}
       >
         <Box
diff --git a/packages/paste-core/components/minimizable-dialog/src/StyledMinimizableDialog.tsx b/packages/paste-core/components/minimizable-dialog/src/StyledMinimizableDialog.tsx
index f1a86624c8..f9b113f656 100644
--- a/packages/paste-core/components/minimizable-dialog/src/StyledMinimizableDialog.tsx
+++ b/packages/paste-core/components/minimizable-dialog/src/StyledMinimizableDialog.tsx
@@ -2,21 +2,27 @@ import { Box } from "@twilio-paste/box";
 import type { BoxProps } from "@twilio-paste/box";
 import * as React from "react";
 
+import { MinimizableDialogContext } from "./MinimizableDialogContext";
+
 export const StyledMinimizableDialog: React.FC<React.PropsWithChildren<Pick<BoxProps, "element">>> = ({
   element,
   children,
-}) => (
-  <Box
-    element={element}
-    borderRadius="borderRadius20"
-    display="flex"
-    flexDirection="column"
-    backgroundColor="colorBackgroundBody"
-    width="size40"
-    boxShadow="shadow"
-  >
-    {children}
-  </Box>
-);
+}) => {
+  const { minimized } = React.useContext(MinimizableDialogContext);
+
+  return (
+    <Box
+      element={element}
+      borderRadius="borderRadius20"
+      display="flex"
+      flexDirection="column"
+      backgroundColor="colorBackgroundWeaker"
+      width="size40"
+      boxShadow="shadowElevation20"
+    >
+      {children}
+    </Box>
+  );
+};
 
 StyledMinimizableDialog.displayName = "StyledMinimizableDialog";

From 2f80f7590d4e7404386687a477bb69cd6ce1fc36 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Wed, 29 Jan 2025 16:39:37 +0530
Subject: [PATCH 03/46] feat(side-modal): add elevation changes

---
 packages/paste-core/components/side-modal/src/SideModal.tsx   | 4 ++--
 .../paste-core/components/side-modal/src/SideModalFooter.tsx  | 2 ++
 .../paste-core/components/side-modal/src/SideModalHeader.tsx  | 1 +
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/paste-core/components/side-modal/src/SideModal.tsx b/packages/paste-core/components/side-modal/src/SideModal.tsx
index 0b95fec235..85d4280d31 100644
--- a/packages/paste-core/components/side-modal/src/SideModal.tsx
+++ b/packages/paste-core/components/side-modal/src/SideModal.tsx
@@ -96,8 +96,8 @@ export const SideModal = React.forwardRef<HTMLDivElement, SideModalProps>(
                   display="grid"
                   gridTemplateRows="auto 1fr auto"
                   height="100vh"
-                  backgroundColor="colorBackgroundBody"
-                  boxShadow="shadow"
+                  backgroundColor="colorBackgroundWeaker"
+                  boxShadow="shadowElevationLeft20"
                   width="size80"
                 >
                   {children}
diff --git a/packages/paste-core/components/side-modal/src/SideModalFooter.tsx b/packages/paste-core/components/side-modal/src/SideModalFooter.tsx
index cdc372414c..802a698a5a 100644
--- a/packages/paste-core/components/side-modal/src/SideModalFooter.tsx
+++ b/packages/paste-core/components/side-modal/src/SideModalFooter.tsx
@@ -32,6 +32,8 @@ const SideModalFooter = React.forwardRef<HTMLDivElement, SideModalFooterProps>(
         paddingLeft="space90"
         paddingBottom="space90"
         display="flex"
+        backgroundColor="colorBackgroundWeaker"
+        zIndex="zIndex20"
       >
         {children}
       </Box>
diff --git a/packages/paste-core/components/side-modal/src/SideModalHeader.tsx b/packages/paste-core/components/side-modal/src/SideModalHeader.tsx
index 9f77efeb23..572f1d19fd 100644
--- a/packages/paste-core/components/side-modal/src/SideModalHeader.tsx
+++ b/packages/paste-core/components/side-modal/src/SideModalHeader.tsx
@@ -51,6 +51,7 @@ const SideModalHeader = React.forwardRef<HTMLDivElement, SideModalHeaderProps>(
         display="flex"
         flexDirection="row"
         alignItems="flex-start"
+        backgroundColor="colorBackgroundWeaker"
       >
         <Box display="flex" flexGrow={1} marginRight="space70">
           {children}

From 4d547af3a3104f8b29634ab1c8b965ed343988f6 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Wed, 29 Jan 2025 16:57:55 +0530
Subject: [PATCH 04/46] feat(input): add elevation changes

---
 .../components/input-box/src/InputChevronWrapper.tsx  |  8 ++++----
 .../paste-core/components/input-box/src/Prefix.tsx    | 11 ++---------
 .../paste-core/components/input-box/src/Suffix.tsx    | 11 ++---------
 .../components/input/src/DecrementButton.tsx          |  2 +-
 .../components/input/src/IncrementButton.tsx          |  2 +-
 5 files changed, 10 insertions(+), 24 deletions(-)

diff --git a/packages/paste-core/components/input-box/src/InputChevronWrapper.tsx b/packages/paste-core/components/input-box/src/InputChevronWrapper.tsx
index 19b82e423e..4de80891ae 100644
--- 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
index e794431f33..55b4bf9aee 100644
--- 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
index 6639efeb47..aec0ccf7c4 100644
--- 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
index 2391091844..d7ff171d1e 100644
--- 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
index 5acbc2dec3..84a9d5aa81 100644
--- 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",

From b66c60d33e3a0eb05bd1f58979619fd682e065c0 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Wed, 29 Jan 2025 18:24:51 +0530
Subject: [PATCH 05/46] feat(tooltip): add elevation changes

---
 packages/paste-core/components/tooltip/src/Tooltip.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/paste-core/components/tooltip/src/Tooltip.tsx b/packages/paste-core/components/tooltip/src/Tooltip.tsx
index 06f6a55d2d..d6cc8c384d 100644
--- a/packages/paste-core/components/tooltip/src/Tooltip.tsx
+++ b/packages/paste-core/components/tooltip/src/Tooltip.tsx
@@ -15,11 +15,9 @@ const StyledTooltip = React.forwardRef<HTMLDivElement, BoxProps>(({ style, eleme
   return (
     <Box
       {...safelySpreadBoxProps(props)}
-      backgroundColor="colorBackgroundBodyInverse"
+      backgroundColor="colorBackgroundInverseElevation"
+      boxShadow="shadowElevationInverse10"
       borderRadius="borderRadius30"
-      borderStyle="solid"
-      borderWidth="borderWidth10"
-      borderColor="colorBorderInverse"
       element={element}
       maxWidth="size30"
       paddingX="space50"

From 57f78a31a7b52da2e492ff863ea74c62d21cd6a5 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Wed, 29 Jan 2025 18:26:47 +0530
Subject: [PATCH 06/46] feat(callout): add elevation changes

---
 packages/paste-core/components/callout/src/Callout.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/paste-core/components/callout/src/Callout.tsx b/packages/paste-core/components/callout/src/Callout.tsx
index 91381dea94..4906be8b4f 100644
--- a/packages/paste-core/components/callout/src/Callout.tsx
+++ b/packages/paste-core/components/callout/src/Callout.tsx
@@ -64,7 +64,7 @@ export interface CalloutProps extends HTMLPasteProps<"div"> {
 
 const variantStyles: Record<CalloutVariants, BoxStyleProps> = {
   success: {
-    backgroundColor: "colorBackgroundWeak",
+    backgroundColor: "colorBackgroundBodyElevation",
     color: "colorTextSuccess",
     borderColor: "colorBorderSuccessWeak",
   },
@@ -74,17 +74,17 @@ const variantStyles: Record<CalloutVariants, BoxStyleProps> = {
     borderColor: "colorBorderErrorWeak",
   },
   warning: {
-    backgroundColor: "colorBackgroundWeak",
+    backgroundColor: "colorBackgroundBodyElevation",
     color: "colorTextWarningStrong",
     borderColor: "colorBorderWarningWeak",
   },
   new: {
-    backgroundColor: "colorBackgroundWeak",
+    backgroundColor: "colorBackgroundBodyElevation",
     color: "colorTextNew",
     borderColor: "colorBorderNewWeak",
   },
   neutral: {
-    backgroundColor: "colorBackgroundWeak",
+    backgroundColor: "colorBackgroundBodyElevation",
     color: "colorTextNeutral",
     borderColor: "colorBorderNeutralWeak",
   },

From d38bf69c784ae5048e8483951296209bd2ebf1e7 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Wed, 29 Jan 2025 18:33:47 +0530
Subject: [PATCH 07/46] feat(topbar): add elevation changes

---
 packages/paste-core/components/topbar/src/Topbar.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/paste-core/components/topbar/src/Topbar.tsx b/packages/paste-core/components/topbar/src/Topbar.tsx
index 08ec28b985..bf716aa0e7 100644
--- a/packages/paste-core/components/topbar/src/Topbar.tsx
+++ b/packages/paste-core/components/topbar/src/Topbar.tsx
@@ -29,7 +29,8 @@ export const Topbar = React.forwardRef<HTMLDivElement, TopbarProps>(
         element={element}
         width="100%"
         minHeight="sizeTopbar"
-        backgroundColor="colorBackgroundWeak"
+        backgroundColor="colorBackgroundWeakElevation"
+        boxShadow="shadowElevationBottom05"
         borderBottomWidth="borderWidth10"
         borderBottomStyle="solid"
         borderBottomColor="colorBorderWeaker"

From 9c68a2bcd02b60a186b0c580227314fad9fd08cb Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Wed, 29 Jan 2025 21:07:45 +0530
Subject: [PATCH 08/46] feat(side-panel): update footer and header tokens

---
 .../paste-core/components/side-panel/src/SidePanelBody.tsx    | 4 ++--
 .../paste-core/components/side-panel/src/SidePanelFooter.tsx  | 1 +
 .../paste-core/components/side-panel/src/SidePanelHeader.tsx  | 1 +
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/paste-core/components/side-panel/src/SidePanelBody.tsx b/packages/paste-core/components/side-panel/src/SidePanelBody.tsx
index da5b7a1763..1b722a3276 100644
--- a/packages/paste-core/components/side-panel/src/SidePanelBody.tsx
+++ b/packages/paste-core/components/side-panel/src/SidePanelBody.tsx
@@ -7,7 +7,7 @@ import type { SidePanelBodyProps } from "./types";
 
 // This wrapper applies styles that customize the scrollbar and its track
 const SidePanelBodyWrapper = styled.div(({ theme }: { theme: ThemeShape }) => {
-  const { colorBackgroundBody, colorBackgroundStrong, colorBackgroundStronger } = theme.backgroundColors;
+  const { colorBackgroundBody, colorBackgroundElevation, colorBackgroundStronger } = theme.backgroundColors;
 
   return css({
     // Scrollbar
@@ -23,7 +23,7 @@ const SidePanelBodyWrapper = styled.div(({ theme }: { theme: ThemeShape }) => {
     },
     // Handle
     "::-webkit-scrollbar-thumb": {
-      background: colorBackgroundStrong,
+      background: colorBackgroundElevation,
       borderRadius: "10px",
     },
     // Handle on hover
diff --git a/packages/paste-core/components/side-panel/src/SidePanelFooter.tsx b/packages/paste-core/components/side-panel/src/SidePanelFooter.tsx
index ebb51ded1a..34f364250b 100644
--- a/packages/paste-core/components/side-panel/src/SidePanelFooter.tsx
+++ b/packages/paste-core/components/side-panel/src/SidePanelFooter.tsx
@@ -12,6 +12,7 @@ const SidePanelFooter = React.forwardRef<HTMLDivElement, SidePanelFooterProps>(
         paddingBottom="space50"
         paddingTop={variant === "chat" ? "space0" : "space50"}
         boxShadow={variant === "chat" ? "none" : "shadowElevationTop05"}
+        backgroundColor="colorBackgroundWeaker"
         marginBottom="spaceNegative70"
         zIndex="zIndex20"
         display="flex"
diff --git a/packages/paste-core/components/side-panel/src/SidePanelHeader.tsx b/packages/paste-core/components/side-panel/src/SidePanelHeader.tsx
index d92a6b2528..01534cc372 100644
--- a/packages/paste-core/components/side-panel/src/SidePanelHeader.tsx
+++ b/packages/paste-core/components/side-panel/src/SidePanelHeader.tsx
@@ -57,6 +57,7 @@ const SidePanelHeader = React.forwardRef<HTMLDivElement, SidePanelHeaderProps>(
         columnGap="space30"
         alignItems="flex-start"
         justifyContent="space-between"
+        backgroundColor="colorBackgroundWeaker"
         {...safelySpreadBoxProps(props)}
         ref={ref}
         element={element}

From 70e5636952c635e77af88f3269acb2af2d0a4652 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 3 Feb 2025 13:23:09 +0530
Subject: [PATCH 09/46] feat(chat-composer): update tokens for elevation

---
 .../chat-composer/src/ChatComposerAttachmentCard.tsx  |  4 +---
 .../chat-composer/src/ChatComposerContainer.tsx       | 11 +++++------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx
index 5a78a98152..95737428b9 100644
--- a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx
+++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx
@@ -83,10 +83,8 @@ const ChatComposerAttachmentCard = React.forwardRef<HTMLDivElement, ChatComposer
         ref={ref}
         paddingY="space30"
         paddingX="space40"
-        borderStyle="solid"
-        borderColor="colorBorderWeaker"
         borderRadius="borderRadius30"
-        borderWidth="borderWidth10"
+        backgroundColor="colorBackgroundBodyElevation"
         boxShadow="shadowLow"
         position="relative"
         display="inline-block"
diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx
index 7d17dfb950..0e6b1b5da9 100644
--- a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx
+++ b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx
@@ -5,14 +5,13 @@ import * as React from "react";
 import { ChatComposerContext } from "./ChatComposerContext";
 
 const Styles: Record<string, BoxStyleProps> = {
-  default: {},
+  default: {
+    backgroundColor: "colorBackgroundWeaker",
+  },
   contained: {
-    borderWidth: "borderWidth10",
-    borderStyle: "solid",
     borderRadius: "borderRadius30",
-    borderColor: "colorBorderWeaker",
-    boxShadow: "shadowLow",
-    backgroundColor: "colorBackgroundBody",
+    boxShadow: "shadowElevation10",
+    backgroundColor: "colorBackgroundWeaker",
   },
 };
 

From d4a29b9bb465d6bb7e5413e2b38d2d8c8e35ff86 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 3 Feb 2025 13:23:23 +0530
Subject: [PATCH 10/46] feat(chat-log): update tokens for elevation

---
 packages/paste-core/components/chat-log/src/ChatBubble.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/paste-core/components/chat-log/src/ChatBubble.tsx b/packages/paste-core/components/chat-log/src/ChatBubble.tsx
index 5a98fee150..aebef6db1c 100644
--- a/packages/paste-core/components/chat-log/src/ChatBubble.tsx
+++ b/packages/paste-core/components/chat-log/src/ChatBubble.tsx
@@ -22,11 +22,11 @@ const bubbleVariantStyles: {
   [key in MessageVariants]: BoxStyleProps;
 } = {
   inbound: {
-    backgroundColor: "colorBackground",
+    backgroundColor: "colorBackgroundElevation",
     alignSelf: "flex-start",
   },
   outbound: {
-    backgroundColor: "colorBackgroundInverseStronger",
+    backgroundColor: "colorBackgroundInverseStrongerElevation",
     alignSelf: "flex-end",
     color: "colorTextInverse",
   },

From 6ebbcbec3a119df8818f91a7d9ea008050251a94 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 3 Feb 2025 13:23:54 +0530
Subject: [PATCH 11/46] feat(side-panel): remove background color from header
 and footer

---
 .../paste-core/components/side-panel/src/SidePanelFooter.tsx     | 1 -
 .../paste-core/components/side-panel/src/SidePanelHeader.tsx     | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/paste-core/components/side-panel/src/SidePanelFooter.tsx b/packages/paste-core/components/side-panel/src/SidePanelFooter.tsx
index 34f364250b..ebb51ded1a 100644
--- a/packages/paste-core/components/side-panel/src/SidePanelFooter.tsx
+++ b/packages/paste-core/components/side-panel/src/SidePanelFooter.tsx
@@ -12,7 +12,6 @@ const SidePanelFooter = React.forwardRef<HTMLDivElement, SidePanelFooterProps>(
         paddingBottom="space50"
         paddingTop={variant === "chat" ? "space0" : "space50"}
         boxShadow={variant === "chat" ? "none" : "shadowElevationTop05"}
-        backgroundColor="colorBackgroundWeaker"
         marginBottom="spaceNegative70"
         zIndex="zIndex20"
         display="flex"
diff --git a/packages/paste-core/components/side-panel/src/SidePanelHeader.tsx b/packages/paste-core/components/side-panel/src/SidePanelHeader.tsx
index 01534cc372..d92a6b2528 100644
--- a/packages/paste-core/components/side-panel/src/SidePanelHeader.tsx
+++ b/packages/paste-core/components/side-panel/src/SidePanelHeader.tsx
@@ -57,7 +57,6 @@ const SidePanelHeader = React.forwardRef<HTMLDivElement, SidePanelHeaderProps>(
         columnGap="space30"
         alignItems="flex-start"
         justifyContent="space-between"
-        backgroundColor="colorBackgroundWeaker"
         {...safelySpreadBoxProps(props)}
         ref={ref}
         element={element}

From dfc619872bd6f44018f0d17244ec4d8fef46b2c3 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 3 Feb 2025 13:34:41 +0530
Subject: [PATCH 12/46] feat(topbar): remove border bottom

---
 packages/paste-core/components/topbar/src/Topbar.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/paste-core/components/topbar/src/Topbar.tsx b/packages/paste-core/components/topbar/src/Topbar.tsx
index bf716aa0e7..d3294280a6 100644
--- a/packages/paste-core/components/topbar/src/Topbar.tsx
+++ b/packages/paste-core/components/topbar/src/Topbar.tsx
@@ -31,9 +31,6 @@ export const Topbar = React.forwardRef<HTMLDivElement, TopbarProps>(
         minHeight="sizeTopbar"
         backgroundColor="colorBackgroundWeakElevation"
         boxShadow="shadowElevationBottom05"
-        borderBottomWidth="borderWidth10"
-        borderBottomStyle="solid"
-        borderBottomColor="colorBorderWeaker"
         paddingX="space70"
         position="sticky"
         top="0"

From 629c91432b7d888af708fc10219d7e88678838e3 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 3 Feb 2025 13:40:37 +0530
Subject: [PATCH 13/46] feat(sidebar): update tokens for elevation

---
 packages/paste-core/components/sidebar/src/Sidebar.tsx    | 4 +---
 .../components/sidebar/src/SidebarSkipLinks.tsx           | 2 +-
 .../components/sidebar/src/header/SidebarHeader.tsx       | 8 +++++---
 .../sidebar/src/navigation/SidebarNavigation.tsx          | 6 +++---
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/paste-core/components/sidebar/src/Sidebar.tsx b/packages/paste-core/components/sidebar/src/Sidebar.tsx
index 309f5c53bc..144fe3be56 100644
--- a/packages/paste-core/components/sidebar/src/Sidebar.tsx
+++ b/packages/paste-core/components/sidebar/src/Sidebar.tsx
@@ -18,9 +18,7 @@ const StyledSidebar = React.forwardRef<HTMLDivElement, BoxProps>((props, ref) =>
     display="flex"
     flexDirection="column"
     ref={ref}
-    borderRightStyle="solid"
-    borderRightWidth="borderWidth10"
-    borderRightColor="colorBorderInverseWeaker"
+    boxShadow="shadowElevationRightInverse05"
     backgroundColor="colorBackgroundInverse"
     zIndex="zIndex50"
     position="fixed"
diff --git a/packages/paste-core/components/sidebar/src/SidebarSkipLinks.tsx b/packages/paste-core/components/sidebar/src/SidebarSkipLinks.tsx
index e37d033bd1..20704ebb47 100644
--- a/packages/paste-core/components/sidebar/src/SidebarSkipLinks.tsx
+++ b/packages/paste-core/components/sidebar/src/SidebarSkipLinks.tsx
@@ -11,7 +11,7 @@ export const SidebarSkipLinkContainer: React.FC<React.PropsWithChildren<{ elemen
       element={element}
       backgroundColor="colorBackgroundBody"
       borderRadius="borderRadius20"
-      boxShadow="shadowLow"
+      boxShadow="shadowElevation10"
       left={10}
       paddingX="space60"
       paddingY="space30"
diff --git a/packages/paste-core/components/sidebar/src/header/SidebarHeader.tsx b/packages/paste-core/components/sidebar/src/header/SidebarHeader.tsx
index 693e8ec89c..36a757945c 100644
--- a/packages/paste-core/components/sidebar/src/header/SidebarHeader.tsx
+++ b/packages/paste-core/components/sidebar/src/header/SidebarHeader.tsx
@@ -24,9 +24,11 @@ export const SidebarHeader = React.forwardRef<HTMLButtonElement, SidebarHeaderPr
         ref={ref}
         paddingX="space60"
         minHeight="sizeTopbar"
-        borderBottomWidth="borderWidth10"
-        borderBottomStyle="solid"
-        borderBottomColor="colorBorderInverseWeaker"
+        // borderBottomWidth="borderWidth10"
+        // borderBottomStyle="solid"
+        // borderBottomColor="colorBorderInverseWeaker"
+        boxShadow="shadowElevationBottomInverse05"
+        zIndex="zIndex40"
         display="flex"
         alignItems="center"
         justifyContent="flex-start"
diff --git a/packages/paste-core/components/sidebar/src/navigation/SidebarNavigation.tsx b/packages/paste-core/components/sidebar/src/navigation/SidebarNavigation.tsx
index 24a295cff4..e2f0d3cfa0 100644
--- a/packages/paste-core/components/sidebar/src/navigation/SidebarNavigation.tsx
+++ b/packages/paste-core/components/sidebar/src/navigation/SidebarNavigation.tsx
@@ -14,7 +14,7 @@ import { SidebarNavigationContext } from "./SidebarNavigationContext";
  * only when they are scrolled out of view
  */
 const SidebarNavigationWrapper = styled.nav(({ theme }: { theme: ThemeShape }) => {
-  const { colorBackgroundInverse, colorBackgroundInverseStronger } = theme.backgroundColors;
+  const { colorBackgroundInverse, colorBackgroundInverseElevation } = theme.backgroundColors;
 
   return css({
     overflowScrolling: "touch",
@@ -36,12 +36,12 @@ const SidebarNavigationWrapper = styled.nav(({ theme }: { theme: ThemeShape }) =
     },
     // Handle
     "::-webkit-scrollbar-thumb": {
-      background: colorBackgroundInverseStronger,
+      background: colorBackgroundInverseElevation,
       borderRadius: "10px",
     },
     // Handle on hover
     "::-webkit-scrollbar-thumb:hover": {
-      background: colorBackgroundInverseStronger,
+      background: colorBackgroundInverseElevation,
     },
   });
 });

From d7ebf55d27038e6de0937a004ff0a3f95114b1e5 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 3 Feb 2025 13:50:39 +0530
Subject: [PATCH 14/46] feat(menu): update tokens for elevation

---
 packages/paste-core/components/menu/src/Menu.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/paste-core/components/menu/src/Menu.tsx b/packages/paste-core/components/menu/src/Menu.tsx
index 16e4a30b78..b930bf91cc 100644
--- a/packages/paste-core/components/menu/src/Menu.tsx
+++ b/packages/paste-core/components/menu/src/Menu.tsx
@@ -9,12 +9,9 @@ const StyledMenu = React.forwardRef<HTMLDivElement, BoxElementProps>(({ style, .
   return (
     <Box
       {...safelySpreadBoxProps(props)}
-      backgroundColor="colorBackgroundBody"
-      borderStyle="solid"
-      borderWidth="borderWidth10"
-      borderColor="colorBorderWeaker"
+      backgroundColor="colorBackgroundWeaker"
       borderRadius="borderRadius30"
-      boxShadow="shadow"
+      boxShadow="shadowElevation10"
       maxWidth="size30"
       minWidth="size20"
       zIndex="zIndex20"

From 518c6f4c8a5e5645d1b67842a3200339a39a732c Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 3 Feb 2025 13:50:47 +0530
Subject: [PATCH 15/46] feat(user-dialog): update tokens for elevation

---
 packages/paste-core/components/user-dialog/src/UserDialog.tsx | 4 +---
 .../paste-core/components/user-dialog/src/UserDialogList.tsx  | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/paste-core/components/user-dialog/src/UserDialog.tsx b/packages/paste-core/components/user-dialog/src/UserDialog.tsx
index 539eebd49f..114e4792c4 100644
--- a/packages/paste-core/components/user-dialog/src/UserDialog.tsx
+++ b/packages/paste-core/components/user-dialog/src/UserDialog.tsx
@@ -23,9 +23,7 @@ const UserDialogPopover = React.forwardRef<HTMLDivElement, UserDialogPopoverProp
       {...safelySpreadBoxProps(props)}
       ref={ref}
       style={style}
-      boxShadow="shadow"
-      borderWidth="borderWidth10"
-      borderColor="colorBorderWeaker"
+      boxShadow="shadowElevation10"
       borderRadius="borderRadius30"
       padding="space0"
       marginTop="space30"
diff --git a/packages/paste-core/components/user-dialog/src/UserDialogList.tsx b/packages/paste-core/components/user-dialog/src/UserDialogList.tsx
index 73bd6b934a..fae349399e 100644
--- a/packages/paste-core/components/user-dialog/src/UserDialogList.tsx
+++ b/packages/paste-core/components/user-dialog/src/UserDialogList.tsx
@@ -24,7 +24,7 @@ const UserDialogListbox = React.forwardRef<HTMLDivElement, UserDialogListboxProp
       <Box
         {...safelySpreadBoxProps(props)}
         element={`${element}_LIST`}
-        backgroundColor="colorBackgroundBody"
+        backgroundColor="colorBackgroundWeaker"
         borderRadius="borderRadius30"
         paddingY="space30"
         ref={ref}

From 8da65b9ea474ec0bf6cae1cee80abe39f4286e7d Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 3 Feb 2025 16:24:44 +0530
Subject: [PATCH 16/46] feat(combobox): update tokens for elevation

---
 .../components/combobox/src/styles/ComboboxListbox.tsx     | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/paste-core/components/combobox/src/styles/ComboboxListbox.tsx b/packages/paste-core/components/combobox/src/styles/ComboboxListbox.tsx
index 72fa3fb553..d24ba2e724 100644
--- a/packages/paste-core/components/combobox/src/styles/ComboboxListbox.tsx
+++ b/packages/paste-core/components/combobox/src/styles/ComboboxListbox.tsx
@@ -38,12 +38,9 @@ const ComboboxListbox = React.forwardRef<HTMLUListElement, ComboboxListboxProps>
       <Box
         {...safelySpreadBoxProps(props)}
         as="div"
-        backgroundColor="colorBackgroundBody"
+        backgroundColor="colorBackgroundWeaker"
         borderRadius="borderRadius20"
-        borderColor="colorBorderWeak"
-        borderWidth="borderWidth10"
-        borderStyle="solid"
-        boxShadow="shadow"
+        boxShadow="shadowElevation10"
         element={element}
         listStyleType="none"
         margin="space0"

From 08b7a615c6fc0ecf56cca96994f996010c16aaed Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 3 Feb 2025 16:26:19 +0530
Subject: [PATCH 17/46] feat(popover): update tokens for elevation

---
 packages/paste-core/components/popover/src/Popover.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/paste-core/components/popover/src/Popover.tsx b/packages/paste-core/components/popover/src/Popover.tsx
index 06d19e024a..55f159d742 100644
--- a/packages/paste-core/components/popover/src/Popover.tsx
+++ b/packages/paste-core/components/popover/src/Popover.tsx
@@ -17,12 +17,9 @@ const StyledPopover = React.forwardRef<HTMLDivElement, BoxProps>(({ style, width
     <Box
       {...safelySpreadBoxProps(props)}
       width={width}
-      backgroundColor="colorBackgroundBody"
-      borderStyle="solid"
-      borderWidth="borderWidth10"
-      borderColor="colorBorderWeaker"
+      backgroundColor="colorBackgroundWeaker"
       borderRadius="borderRadius30"
-      boxShadow="shadowLow"
+      boxShadow="shadowElevation10"
       maxWidth="size50"
       zIndex="zIndex80"
       _focus={{ outline: "none" }}

From 72fdc82882e7db3c40f5e5105ba06ff1741a4490 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 3 Feb 2025 16:28:00 +0530
Subject: [PATCH 18/46] feat(toast): update tokens for elevation

---
 packages/paste-core/components/toast/src/ErrorToast.tsx   | 2 +-
 packages/paste-core/components/toast/src/NeutralToast.tsx | 2 +-
 packages/paste-core/components/toast/src/SuccessToast.tsx | 2 +-
 packages/paste-core/components/toast/src/WarningToast.tsx | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/paste-core/components/toast/src/ErrorToast.tsx b/packages/paste-core/components/toast/src/ErrorToast.tsx
index 70a5076d44..3b107f9f20 100644
--- a/packages/paste-core/components/toast/src/ErrorToast.tsx
+++ b/packages/paste-core/components/toast/src/ErrorToast.tsx
@@ -15,7 +15,7 @@ const ErrorToast = React.forwardRef<HTMLDivElement, ToastProps>(({ element = "TO
       borderRadius="borderRadius30"
       borderStyle="solid"
       borderWidth="borderWidth10"
-      boxShadow="shadowHigh"
+      boxShadow="shadowElevation20"
       element={element}
       padding="space60"
       variant={variant}
diff --git a/packages/paste-core/components/toast/src/NeutralToast.tsx b/packages/paste-core/components/toast/src/NeutralToast.tsx
index 4d84309ac9..38982ea92c 100644
--- a/packages/paste-core/components/toast/src/NeutralToast.tsx
+++ b/packages/paste-core/components/toast/src/NeutralToast.tsx
@@ -15,7 +15,7 @@ const NeutralToast = React.forwardRef<HTMLDivElement, ToastProps>(({ element = "
       borderRadius="borderRadius30"
       borderStyle="solid"
       borderWidth="borderWidth10"
-      boxShadow="shadowHigh"
+      boxShadow="shadowElevation20"
       element={element}
       padding="space60"
       variant={variant}
diff --git a/packages/paste-core/components/toast/src/SuccessToast.tsx b/packages/paste-core/components/toast/src/SuccessToast.tsx
index d0be2fc2ae..51326a21cf 100644
--- a/packages/paste-core/components/toast/src/SuccessToast.tsx
+++ b/packages/paste-core/components/toast/src/SuccessToast.tsx
@@ -15,7 +15,7 @@ const SuccessToast = React.forwardRef<HTMLDivElement, ToastProps>(({ element = "
       borderRadius="borderRadius30"
       borderStyle="solid"
       borderWidth="borderWidth10"
-      boxShadow="shadowHigh"
+      boxShadow="shadowElevation20"
       element={element}
       padding="space60"
       variant={variant}
diff --git a/packages/paste-core/components/toast/src/WarningToast.tsx b/packages/paste-core/components/toast/src/WarningToast.tsx
index d148f83ca4..1d6a698f8c 100644
--- a/packages/paste-core/components/toast/src/WarningToast.tsx
+++ b/packages/paste-core/components/toast/src/WarningToast.tsx
@@ -15,7 +15,7 @@ const WarningToast = React.forwardRef<HTMLDivElement, ToastProps>(({ element = "
       borderRadius="borderRadius30"
       borderStyle="solid"
       borderWidth="borderWidth10"
-      boxShadow="shadowHigh"
+      boxShadow="shadowElevation20"
       element={element}
       padding="space60"
       variant={variant}

From 207aa8d39f65272784d6df43c79dd2f55b74429d Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 3 Feb 2025 16:29:43 +0530
Subject: [PATCH 19/46] feat(modal): update tokens for elevation

---
 packages/paste-core/components/modal/src/Modal.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/paste-core/components/modal/src/Modal.tsx b/packages/paste-core/components/modal/src/Modal.tsx
index 0b525f5acc..6ecf59f23e 100644
--- a/packages/paste-core/components/modal/src/Modal.tsx
+++ b/packages/paste-core/components/modal/src/Modal.tsx
@@ -54,11 +54,8 @@ export const ModalDialogContent = animated(
       maxHeight: "90%",
       minHeight: "170px",
       backgroundColor: "colorBackgroundBody",
-      borderColor: "colorBorderWeaker",
       borderRadius: "borderRadius30",
-      borderStyle: "solid",
-      borderWidth: "borderWidth10",
-      boxShadow: "shadow",
+      boxShadow: "shadowElevation20",
       display: "flex",
       flexDirection: "column",
     }),

From 462d5d43b541aaa2031ea83f6b7e5b21672562e2 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 3 Feb 2025 16:41:19 +0530
Subject: [PATCH 20/46] feat(sidebar): remove commented code

---
 .../paste-core/components/sidebar/src/header/SidebarHeader.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/paste-core/components/sidebar/src/header/SidebarHeader.tsx b/packages/paste-core/components/sidebar/src/header/SidebarHeader.tsx
index 36a757945c..9acba2304b 100644
--- a/packages/paste-core/components/sidebar/src/header/SidebarHeader.tsx
+++ b/packages/paste-core/components/sidebar/src/header/SidebarHeader.tsx
@@ -24,9 +24,6 @@ export const SidebarHeader = React.forwardRef<HTMLButtonElement, SidebarHeaderPr
         ref={ref}
         paddingX="space60"
         minHeight="sizeTopbar"
-        // borderBottomWidth="borderWidth10"
-        // borderBottomStyle="solid"
-        // borderBottomColor="colorBorderInverseWeaker"
         boxShadow="shadowElevationBottomInverse05"
         zIndex="zIndex40"
         display="flex"

From 08de6c1770f27f182af5895530580014dae1c2ad Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 3 Feb 2025 16:45:34 +0530
Subject: [PATCH 21/46] feat(paste): add changeset

---
 .changeset/red-mirrors-play.md | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 .changeset/red-mirrors-play.md

diff --git a/.changeset/red-mirrors-play.md b/.changeset/red-mirrors-play.md
new file mode 100644
index 0000000000..94b3fc6a14
--- /dev/null
+++ b/.changeset/red-mirrors-play.md
@@ -0,0 +1,22 @@
+---
+"@twilio-paste/callout": patch
+"@twilio-paste/chat-composer": patch
+"@twilio-paste/chat-log": patch
+"@twilio-paste/combobox": patch
+"@twilio-paste/input": patch
+"@twilio-paste/input-box": patch
+"@twilio-paste/menu": patch
+"@twilio-paste/minimizable-dialog": patch
+"@twilio-paste/modal": patch
+"@twilio-paste/popover": patch
+"@twilio-paste/side-modal": patch
+"@twilio-paste/side-panel": patch
+"@twilio-paste/sidebar": patch
+"@twilio-paste/toast": patch
+"@twilio-paste/tooltip": patch
+"@twilio-paste/topbar": patch
+"@twilio-paste/user-dialog": patch
+"@twilio-paste/core": patch
+---
+
+[Paste components]: Update styles to implement new elevation tokens

From e1b11a8f1631dc9ce66258a5d3702dd80b9e2c2e Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 3 Feb 2025 16:54:15 +0530
Subject: [PATCH 22/46] feat(input): update default background token

---
 .../paste-core/components/input-box/src/InputChevronWrapper.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/paste-core/components/input-box/src/InputChevronWrapper.tsx b/packages/paste-core/components/input-box/src/InputChevronWrapper.tsx
index 4de80891ae..c46e097829 100644
--- a/packages/paste-core/components/input-box/src/InputChevronWrapper.tsx
+++ b/packages/paste-core/components/input-box/src/InputChevronWrapper.tsx
@@ -43,7 +43,7 @@ const getInputChevronIconColor = (
 
 const BackgroundColorStyles: { [variant: string]: { [key: string]: BackgroundColor } } = {
   default: {
-    default: "colorBackgroundElevation",
+    default: "colorBackgroundBodyElevation",
     disabled: "colorBackground",
     readOnly: "colorBackgroundElevation",
   },

From 89e7a2cdc228f98dc7d32644b6f50ca4f12be907 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 3 Feb 2025 16:56:04 +0530
Subject: [PATCH 23/46] feat(input): update increament and decreament
 background token

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

diff --git a/packages/paste-core/components/input/src/DecrementButton.tsx b/packages/paste-core/components/input/src/DecrementButton.tsx
index d7ff171d1e..7a34c3cd93 100644
--- 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" ? "colorBackgroundInverseElevation" : "colorBackgroundElevation"}
+        backgroundColor={variant === "inverse" ? "colorBackgroundInverseElevation" : "colorBackgroundBodyElevation"}
         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
index 84a9d5aa81..3b4c6e73b7 100644
--- 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" ? "colorBackgroundInverseElevation" : "colorBackgroundElevation"}
+        backgroundColor={variant === "inverse" ? "colorBackgroundInverseElevation" : "colorBackgroundBodyElevation"}
         marginRight="space30"
         _focus={{
           boxShadow: variant === "inverse" ? "shadowBorderInverseStrong" : "shadowBorderPrimary",

From b77590d98dddd863fafce24d37380f23f31082a0 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 3 Feb 2025 17:00:06 +0530
Subject: [PATCH 24/46] feat(minimizable-dialog): remove unused import

---
 .../minimizable-dialog/src/StyledMinimizableDialog.tsx      | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/paste-core/components/minimizable-dialog/src/StyledMinimizableDialog.tsx b/packages/paste-core/components/minimizable-dialog/src/StyledMinimizableDialog.tsx
index f9b113f656..99145ed44b 100644
--- a/packages/paste-core/components/minimizable-dialog/src/StyledMinimizableDialog.tsx
+++ b/packages/paste-core/components/minimizable-dialog/src/StyledMinimizableDialog.tsx
@@ -1,15 +1,11 @@
-import { Box } from "@twilio-paste/box";
 import type { BoxProps } from "@twilio-paste/box";
+import { Box } from "@twilio-paste/box";
 import * as React from "react";
 
-import { MinimizableDialogContext } from "./MinimizableDialogContext";
-
 export const StyledMinimizableDialog: React.FC<React.PropsWithChildren<Pick<BoxProps, "element">>> = ({
   element,
   children,
 }) => {
-  const { minimized } = React.useContext(MinimizableDialogContext);
-
   return (
     <Box
       element={element}

From d2664a35ac85d710e0e7a376aa4c3cbf5fb06490 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 3 Feb 2025 17:02:32 +0530
Subject: [PATCH 25/46] feat(side-modal): remove extra tokens

---
 .../paste-core/components/side-modal/src/SideModalFooter.tsx    | 2 --
 .../paste-core/components/side-modal/src/SideModalHeader.tsx    | 1 -
 2 files changed, 3 deletions(-)

diff --git a/packages/paste-core/components/side-modal/src/SideModalFooter.tsx b/packages/paste-core/components/side-modal/src/SideModalFooter.tsx
index 802a698a5a..cdc372414c 100644
--- a/packages/paste-core/components/side-modal/src/SideModalFooter.tsx
+++ b/packages/paste-core/components/side-modal/src/SideModalFooter.tsx
@@ -32,8 +32,6 @@ const SideModalFooter = React.forwardRef<HTMLDivElement, SideModalFooterProps>(
         paddingLeft="space90"
         paddingBottom="space90"
         display="flex"
-        backgroundColor="colorBackgroundWeaker"
-        zIndex="zIndex20"
       >
         {children}
       </Box>
diff --git a/packages/paste-core/components/side-modal/src/SideModalHeader.tsx b/packages/paste-core/components/side-modal/src/SideModalHeader.tsx
index 572f1d19fd..9f77efeb23 100644
--- a/packages/paste-core/components/side-modal/src/SideModalHeader.tsx
+++ b/packages/paste-core/components/side-modal/src/SideModalHeader.tsx
@@ -51,7 +51,6 @@ const SideModalHeader = React.forwardRef<HTMLDivElement, SideModalHeaderProps>(
         display="flex"
         flexDirection="row"
         alignItems="flex-start"
-        backgroundColor="colorBackgroundWeaker"
       >
         <Box display="flex" flexGrow={1} marginRight="space70">
           {children}

From 33f1ab79b4596d19d495c738a49abafff39adafa Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 3 Feb 2025 20:50:06 +0530
Subject: [PATCH 26/46] feat(input-box): removed unused import

---
 packages/paste-core/components/input-box/src/Prefix.tsx | 2 +-
 packages/paste-core/components/input-box/src/Suffix.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/paste-core/components/input-box/src/Prefix.tsx b/packages/paste-core/components/input-box/src/Prefix.tsx
index 55b4bf9aee..dc6cea6e9e 100644
--- a/packages/paste-core/components/input-box/src/Prefix.tsx
+++ b/packages/paste-core/components/input-box/src/Prefix.tsx
@@ -1,6 +1,6 @@
 import { Box } from "@twilio-paste/box";
 import type { BoxProps } from "@twilio-paste/box";
-import type { BackgroundColor, BorderColor } from "@twilio-paste/style-props";
+import type { BackgroundColor } from "@twilio-paste/style-props";
 import * as React from "react";
 
 import type { Variants } from "./types";
diff --git a/packages/paste-core/components/input-box/src/Suffix.tsx b/packages/paste-core/components/input-box/src/Suffix.tsx
index aec0ccf7c4..277bd4e661 100644
--- a/packages/paste-core/components/input-box/src/Suffix.tsx
+++ b/packages/paste-core/components/input-box/src/Suffix.tsx
@@ -1,6 +1,6 @@
 import { Box } from "@twilio-paste/box";
 import type { BoxProps } from "@twilio-paste/box";
-import type { BackgroundColor, BorderColor } from "@twilio-paste/style-props";
+import type { BackgroundColor } from "@twilio-paste/style-props";
 import * as React from "react";
 
 import type { Variants } from "./types";

From a8df70b2d2e26ae18e455a4bee40b3a5335815a9 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 3 Feb 2025 21:12:43 +0530
Subject: [PATCH 27/46] feat(side-panel): update hover token

---
 .../paste-core/components/side-panel/src/SidePanelBody.tsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/paste-core/components/side-panel/src/SidePanelBody.tsx b/packages/paste-core/components/side-panel/src/SidePanelBody.tsx
index 1b722a3276..c179902884 100644
--- a/packages/paste-core/components/side-panel/src/SidePanelBody.tsx
+++ b/packages/paste-core/components/side-panel/src/SidePanelBody.tsx
@@ -7,7 +7,7 @@ import type { SidePanelBodyProps } from "./types";
 
 // This wrapper applies styles that customize the scrollbar and its track
 const SidePanelBodyWrapper = styled.div(({ theme }: { theme: ThemeShape }) => {
-  const { colorBackgroundBody, colorBackgroundElevation, colorBackgroundStronger } = theme.backgroundColors;
+  const { colorBackgroundBody, colorBackgroundElevation, colorBackgroundBodyElevation } = theme.backgroundColors;
 
   return css({
     // Scrollbar
@@ -23,12 +23,12 @@ const SidePanelBodyWrapper = styled.div(({ theme }: { theme: ThemeShape }) => {
     },
     // Handle
     "::-webkit-scrollbar-thumb": {
-      background: colorBackgroundElevation,
+      background: colorBackgroundBodyElevation,
       borderRadius: "10px",
     },
     // Handle on hover
     "::-webkit-scrollbar-thumb:hover": {
-      background: colorBackgroundStronger,
+      background: colorBackgroundElevation,
     },
   });
 });

From 6d68a63a6158f3bbb0086c25e36832ec323e24fa Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Wed, 5 Feb 2025 20:51:44 +0530
Subject: [PATCH 28/46] feat(elevation): changes from review

---
 .changeset/red-mirrors-play.md                                | 2 +-
 .../components/input-box/src/InputChevronWrapper.tsx          | 2 +-
 .../stories/components/MessagingInsightsContent.tsx           | 4 ++++
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/.changeset/red-mirrors-play.md b/.changeset/red-mirrors-play.md
index 94b3fc6a14..d514eca3fc 100644
--- a/.changeset/red-mirrors-play.md
+++ b/.changeset/red-mirrors-play.md
@@ -19,4 +19,4 @@
 "@twilio-paste/core": patch
 ---
 
-[Paste components]: Update styles to implement new elevation tokens
+[Callout, ChatComposer, ChatLog, Combobox, Input, InputBox, Menu, MinimizableDialog, Modal, Popover, SideModal, SidePanel, Sidebar, Toast, Tooltip, Topbar, UserDialog]: Update styles to implement new elevation tokens
diff --git a/packages/paste-core/components/input-box/src/InputChevronWrapper.tsx b/packages/paste-core/components/input-box/src/InputChevronWrapper.tsx
index c46e097829..04e195c595 100644
--- a/packages/paste-core/components/input-box/src/InputChevronWrapper.tsx
+++ b/packages/paste-core/components/input-box/src/InputChevronWrapper.tsx
@@ -45,7 +45,7 @@ const BackgroundColorStyles: { [variant: string]: { [key: string]: BackgroundCol
   default: {
     default: "colorBackgroundBodyElevation",
     disabled: "colorBackground",
-    readOnly: "colorBackgroundElevation",
+    readOnly: "colorBackgroundBodyElevation",
   },
   inverse: {
     default: "colorBackgroundInverseElevation",
diff --git a/packages/paste-core/components/side-panel/stories/components/MessagingInsightsContent.tsx b/packages/paste-core/components/side-panel/stories/components/MessagingInsightsContent.tsx
index bbf9ca0be5..5e3215f650 100644
--- a/packages/paste-core/components/side-panel/stories/components/MessagingInsightsContent.tsx
+++ b/packages/paste-core/components/side-panel/stories/components/MessagingInsightsContent.tsx
@@ -14,6 +14,7 @@ import { PlusIcon } from "@twilio-paste/icons/esm/PlusIcon";
 import { Label } from "@twilio-paste/label";
 import { Paragraph } from "@twilio-paste/paragraph";
 import { Option, Select } from "@twilio-paste/select";
+import { Separator } from "@twilio-paste/separator";
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@twilio-paste/tabs";
 import { Text } from "@twilio-paste/text";
 import { useUID } from "@twilio-paste/uid-library";
@@ -73,6 +74,9 @@ export const MessagingInsightsContent: React.FC<React.PropsWithChildren<{ mainCo
                   helpText="Times shown in UTC"
                 />
               </Box>
+              <Box gridArea="separator">
+                <Separator orientation="horizontal" />
+              </Box>
               <Box gridArea="field">
                 <Label htmlFor={fieldId}>Field</Label>
                 <Select id={fieldId}>

From 14a9ad73d36a93404f5154869753a5253b683022 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Thu, 6 Feb 2025 20:44:02 +0530
Subject: [PATCH 29/46] feat(sidepanel): update tokens

---
 packages/paste-core/components/side-panel/src/SidePanelBody.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/paste-core/components/side-panel/src/SidePanelBody.tsx b/packages/paste-core/components/side-panel/src/SidePanelBody.tsx
index c179902884..03b422434c 100644
--- a/packages/paste-core/components/side-panel/src/SidePanelBody.tsx
+++ b/packages/paste-core/components/side-panel/src/SidePanelBody.tsx
@@ -23,7 +23,7 @@ const SidePanelBodyWrapper = styled.div(({ theme }: { theme: ThemeShape }) => {
     },
     // Handle
     "::-webkit-scrollbar-thumb": {
-      background: colorBackgroundBodyElevation,
+      background: colorBackgroundElevation,
       borderRadius: "10px",
     },
     // Handle on hover

From 09f4aec92c1c676906cb7da325e02a8f37d1e9e8 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Thu, 6 Feb 2025 20:44:26 +0530
Subject: [PATCH 30/46] feat(sidebar): update tokens

---
 .../sidebar/src/navigation/SidebarNavigation.tsx           | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/paste-core/components/sidebar/src/navigation/SidebarNavigation.tsx b/packages/paste-core/components/sidebar/src/navigation/SidebarNavigation.tsx
index e2f0d3cfa0..3e05898e9d 100644
--- a/packages/paste-core/components/sidebar/src/navigation/SidebarNavigation.tsx
+++ b/packages/paste-core/components/sidebar/src/navigation/SidebarNavigation.tsx
@@ -14,7 +14,8 @@ import { SidebarNavigationContext } from "./SidebarNavigationContext";
  * only when they are scrolled out of view
  */
 const SidebarNavigationWrapper = styled.nav(({ theme }: { theme: ThemeShape }) => {
-  const { colorBackgroundInverse, colorBackgroundInverseElevation } = theme.backgroundColors;
+  const { colorBackgroundInverse, colorBackgroundInverseStrongerElevation, colorBackgroundInverseStrongElevation } =
+    theme.backgroundColors;
 
   return css({
     overflowScrolling: "touch",
@@ -36,12 +37,12 @@ const SidebarNavigationWrapper = styled.nav(({ theme }: { theme: ThemeShape }) =
     },
     // Handle
     "::-webkit-scrollbar-thumb": {
-      background: colorBackgroundInverseElevation,
+      background: colorBackgroundInverseStrongElevation,
       borderRadius: "10px",
     },
     // Handle on hover
     "::-webkit-scrollbar-thumb:hover": {
-      background: colorBackgroundInverseElevation,
+      background: colorBackgroundInverseStrongerElevation,
     },
   });
 });

From 6c15853ceb88cbba874a8f77a76729bc93b39f42 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 10 Feb 2025 11:34:40 +0530
Subject: [PATCH 31/46] feat(tokens): add shadow-elevation-top-20 token

---
 packages/paste-design-tokens/tokens/global/box-shadow.yml    | 5 ++++-
 .../tokens/themes/dark/global/box-shadow.yml                 | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/paste-design-tokens/tokens/global/box-shadow.yml b/packages/paste-design-tokens/tokens/global/box-shadow.yml
index 45eaa882fc..89b2b53b37 100644
--- a/packages/paste-design-tokens/tokens/global/box-shadow.yml
+++ b/packages/paste-design-tokens/tokens/global/box-shadow.yml
@@ -284,8 +284,11 @@ props:
     value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-90}, {!offset-0} {!offset-15} {!offset-20} {!offset-0} {!palette-black-transparent-40}"
     comment: Use on inverse elements that overlay other UI components but remain visually connected to the elements behind them.
   shadow-elevation-20:
-    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-05}, {!offset-0} {!offset-30} {!offset-40} {!offset-0} {!palette-gray-110-transparent-10}, {!offset-60} {!offset-60} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}"
+    value: "{!offset-0} {!offset-30} {!offset-40} {!offset-0} {!palette-gray-110-transparent-10}, {!offset-60} {!offset-60} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}"
     comment: Use on elements that sit above the UI to indicate a greater distance distance from the surface behind them.
   shadow-elevation-left-20:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-05}, {!offset-negative-20} {!offset-0} {!offset-40} {!offset-0} {!palette-gray-110-transparent-10}, {!offset-negative-60} {!offset-0} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}"
     comment: Use for elements that dynamically open from the right side of the screen, appearing above the UI to indicate a greater separation from the underlying surface.
+  shadow-elevation-top-20:
+    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-05}, {!offset-0} {!offset-30} {!offset-40} {!offset-0} {!palette-gray-110-transparent-10}, {!offset-60} {!offset-60} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}"
+    comment: Use on elements that sit above the UI to indicate a greater distance distance from the surface behind them.
diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml
index f802ce9356..dd2c64d6c6 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml
@@ -199,8 +199,11 @@ props:
     value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-90}, {!offset-0} {!offset-15} {!offset-20} {!offset-0} {!palette-black-transparent-40}"
     comment: Use on elements that overlay other UI components but remain visually connected to the elements behind them.
   shadow-elevation-20:
-    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-95}, {!offset-0} {!offset-30} {!offset-40} {!offset-0} {!palette-black-transparent-30}, {!offset-60} {!offset-60} {!offset-90} {!offset-0} {!palette-black-transparent-20}"
+    value: "{!offset-0} {!offset-30} {!offset-40} {!offset-0} {!palette-black-transparent-30}, {!offset-60} {!offset-60} {!offset-90} {!offset-0} {!palette-black-transparent-20}"
     comment: Use on elements that sit above the UI to indicate a greater distance distance from the surface behind them.
   shadow-elevation-left-20:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-95}, {!offset-negative-20} {!offset-0} {!offset-40} {!offset-0} {!palette-black-transparent-30}, {!offset-negative-60} {!offset-0} {!offset-90} {!offset-0} {!palette-black-transparent-20}"
     comment: Use for elements that dynamically open from the right side of the screen, appearing above the UI to indicate a greater separation from the underlying surface.
+  shadow-elevation-top-20:
+    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-95}, {!offset-0} {!offset-30} {!offset-40} {!offset-0} {!palette-black-transparent-30}, {!offset-60} {!offset-60} {!offset-90} {!offset-0} {!palette-black-transparent-20}"
+    comment: Use on elements that sit above the UI to indicate a greater distance distance from the surface behind them.

From f29593231932c7c4c1018c58b9b2a0d9301edca7 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 10 Feb 2025 11:39:14 +0530
Subject: [PATCH 32/46] feat(elevation): update componets to use new token

---
 .../minimizable-dialog/src/StyledMinimizableDialog.tsx          | 2 +-
 packages/paste-core/components/modal/src/Modal.tsx              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/paste-core/components/minimizable-dialog/src/StyledMinimizableDialog.tsx b/packages/paste-core/components/minimizable-dialog/src/StyledMinimizableDialog.tsx
index 99145ed44b..03077741e2 100644
--- a/packages/paste-core/components/minimizable-dialog/src/StyledMinimizableDialog.tsx
+++ b/packages/paste-core/components/minimizable-dialog/src/StyledMinimizableDialog.tsx
@@ -14,7 +14,7 @@ export const StyledMinimizableDialog: React.FC<React.PropsWithChildren<Pick<BoxP
       flexDirection="column"
       backgroundColor="colorBackgroundWeaker"
       width="size40"
-      boxShadow="shadowElevation20"
+      boxShadow="shadowElevationTop20"
     >
       {children}
     </Box>
diff --git a/packages/paste-core/components/modal/src/Modal.tsx b/packages/paste-core/components/modal/src/Modal.tsx
index 6ecf59f23e..2a5fe9174f 100644
--- a/packages/paste-core/components/modal/src/Modal.tsx
+++ b/packages/paste-core/components/modal/src/Modal.tsx
@@ -55,7 +55,7 @@ export const ModalDialogContent = animated(
       minHeight: "170px",
       backgroundColor: "colorBackgroundBody",
       borderRadius: "borderRadius30",
-      boxShadow: "shadowElevation20",
+      boxShadow: "shadowElevationTop20",
       display: "flex",
       flexDirection: "column",
     }),

From 02a73096ec46a14f7630e54ce677a8a73768c97e Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 10 Feb 2025 12:03:41 +0530
Subject: [PATCH 33/46] feat(elevation): add new token
 color-background-strong-elevation

---
 .../side-panel/src/SidePanelBody.tsx          |  4 ++--
 .../__snapshots__/index.test.tsx.snap         | 20 ++++++++++++++-----
 .../tokens/global/background-color.yml        |  3 +++
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/packages/paste-core/components/side-panel/src/SidePanelBody.tsx b/packages/paste-core/components/side-panel/src/SidePanelBody.tsx
index 03b422434c..f0247dfda4 100644
--- a/packages/paste-core/components/side-panel/src/SidePanelBody.tsx
+++ b/packages/paste-core/components/side-panel/src/SidePanelBody.tsx
@@ -7,7 +7,7 @@ import type { SidePanelBodyProps } from "./types";
 
 // This wrapper applies styles that customize the scrollbar and its track
 const SidePanelBodyWrapper = styled.div(({ theme }: { theme: ThemeShape }) => {
-  const { colorBackgroundBody, colorBackgroundElevation, colorBackgroundBodyElevation } = theme.backgroundColors;
+  const { colorBackgroundBody, colorBackgroundElevation, colorBackgroundStrongElevation } = theme.backgroundColors;
 
   return css({
     // Scrollbar
@@ -28,7 +28,7 @@ const SidePanelBodyWrapper = styled.div(({ theme }: { theme: ThemeShape }) => {
     },
     // Handle on hover
     "::-webkit-scrollbar-thumb:hover": {
-      background: colorBackgroundElevation,
+      background: colorBackgroundStrongElevation,
     },
   });
 });
diff --git a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
index ab2623772d..e9fc219bd3 100644
--- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
@@ -66,6 +66,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-background-inverse\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-overlay\\": \\"rgba(18, 28, 45, 0.9)\\",
   \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-strong-elevation\\": \\"rgb(225, 227, 234)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-weak-elevation\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-error-stronger\\": \\"rgb(252, 207, 207)\\",
@@ -175,6 +176,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
+  \\"shadow-elevation-top-20\\": \\"0 0 0 1px #19273E, 0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\",
   \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
   \\"shadow-left\\": \\"4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\",
@@ -210,7 +212,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #043cb5\\",
   \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #c28e00\\",
   \\"shadow-focus-inset\\": \\"inset 0 0 0 2px #606b85\\",
-  \\"shadow-elevation-20\\": \\"0 0 0 1px #19273E, 0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\",
+  \\"shadow-elevation-20\\": \\"0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\",
   \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\",
   \\"shadow-elevation-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #0e7c3a\\",
@@ -548,6 +550,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-background-inverse\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-overlay\\": \\"rgba(6, 3, 58, 0.4)\\",
   \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-strong-elevation\\": \\"rgb(225, 227, 234)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-weak-elevation\\": \\"rgb(249, 249, 250)\\",
   \\"color-background-error-stronger\\": \\"rgb(74, 11, 11)\\",
@@ -657,6 +660,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
+  \\"shadow-elevation-top-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\",
   \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
   \\"shadow-left\\": \\"4px 0 8px -4px rgba(18, 28, 45, 0.2)\\",
   \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\",
@@ -692,7 +696,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #cce4ff\\",
   \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #ffdd35\\",
   \\"shadow-focus-inset\\": \\"inset 0 0 0 2px rgba(2, 99, 224, 0.7)\\",
-  \\"shadow-elevation-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\",
+  \\"shadow-elevation-20\\": \\"0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\",
   \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\",
   \\"shadow-elevation-10\\": \\"0 -1px 0 0 #f4f4f6, 0 3px 4px 0 rgba(15, 22, 33, 0.1)\\",
   \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #d1fae0\\",
@@ -1030,6 +1034,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-background-inverse\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-overlay\\": \\"rgba(6, 3, 58, 0.4)\\",
   \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-strong-elevation\\": \\"rgb(225, 227, 234)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-weak-elevation\\": \\"rgb(249, 249, 250)\\",
   \\"color-background-error-stronger\\": \\"rgb(74, 11, 11)\\",
@@ -1139,6 +1144,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
+  \\"shadow-elevation-top-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\",
   \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
   \\"shadow-left\\": \\"4px 0 8px -4px rgba(18, 28, 45, 0.2)\\",
   \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\",
@@ -1174,7 +1180,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #cce4ff\\",
   \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #ffdd35\\",
   \\"shadow-focus-inset\\": \\"inset 0 0 0 2px rgba(2, 99, 224, 0.7)\\",
-  \\"shadow-elevation-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\",
+  \\"shadow-elevation-20\\": \\"0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\",
   \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\",
   \\"shadow-elevation-10\\": \\"0 -1px 0 0 #f4f4f6, 0 3px 4px 0 rgba(15, 22, 33, 0.1)\\",
   \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #d1fae0\\",
@@ -1512,6 +1518,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-background-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-overlay\\": \\"rgba(18, 28, 45, 0.9)\\",
   \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-strong-elevation\\": \\"rgb(225, 227, 234)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-weak-elevation\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-error-stronger\\": \\"rgb(252, 207, 207)\\",
@@ -1621,6 +1628,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
+  \\"shadow-elevation-top-20\\": \\"0 0 0 1px #19273E, 0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\",
   \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
   \\"shadow-left\\": \\"4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\",
@@ -1656,7 +1664,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #043cb5\\",
   \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #c28e00\\",
   \\"shadow-focus-inset\\": \\"inset 0 0 0 1px #ffffff, inset 0 0 0 3px rgba(255, 255, 255, 0.2)\\",
-  \\"shadow-elevation-20\\": \\"0 0 0 1px #19273E, 0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\",
+  \\"shadow-elevation-20\\": \\"0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\",
   \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\",
   \\"shadow-elevation-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #0e7c3a\\",
@@ -1994,6 +2002,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-background-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-overlay\\": \\"rgba(96, 107, 133, 0.5)\\",
   \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-strong-elevation\\": \\"rgb(225, 227, 234)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-weak-elevation\\": \\"rgb(249, 249, 250)\\",
   \\"color-background-error-stronger\\": \\"rgb(74, 11, 11)\\",
@@ -2103,6 +2112,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
+  \\"shadow-elevation-top-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\",
   \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
   \\"shadow-left\\": \\"4px 0 8px -4px rgba(18, 28, 45, 0.2)\\",
   \\"shadow-border-error\\": \\"0 0 0 1px #c72323\\",
@@ -2138,7 +2148,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #cce4ff\\",
   \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #ffdd35\\",
   \\"shadow-focus-inset\\": \\"inset 0 0 0 1px #006dfa, inset 0 0 0 3px #cce4ff\\",
-  \\"shadow-elevation-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\",
+  \\"shadow-elevation-20\\": \\"0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\",
   \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\",
   \\"shadow-elevation-10\\": \\"0 -1px 0 0 #f4f4f6, 0 3px 4px 0 rgba(15, 22, 33, 0.1)\\",
   \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #d1fae0\\",
diff --git a/packages/paste-design-tokens/tokens/global/background-color.yml b/packages/paste-design-tokens/tokens/global/background-color.yml
index 6dc9a25a20..4b67fb1d7c 100644
--- a/packages/paste-design-tokens/tokens/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/global/background-color.yml
@@ -224,6 +224,9 @@ props:
   color-background-elevation:
     value: "{!palette-gray-15}"
     comment: Elevation token for color-background elements.
+  color-background-strong-elevation:
+    value: "{!palette-gray-20}"
+    comment: Elevation token for color-background-strong elements.
   color-background-inverse-elevation:
     value: "{!palette-gray-95}"
     comment: Elevation token for color-background-inverse elements.

From 07d5b6dc2872cd099cb8981fe834d7b573c39933 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 10 Feb 2025 12:15:18 +0530
Subject: [PATCH 34/46] feat(chat-log): update background color

---
 .../components/chat-log/src/ComposerAttachmentCard.tsx        | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/paste-core/components/chat-log/src/ComposerAttachmentCard.tsx b/packages/paste-core/components/chat-log/src/ComposerAttachmentCard.tsx
index 9dee8852b1..1a4e41976f 100644
--- a/packages/paste-core/components/chat-log/src/ComposerAttachmentCard.tsx
+++ b/packages/paste-core/components/chat-log/src/ComposerAttachmentCard.tsx
@@ -62,11 +62,9 @@ const ComposerAttachmentCard = React.forwardRef<HTMLDivElement, ComposerAttachme
         ref={ref}
         paddingY="space30"
         paddingX="space40"
-        borderStyle="solid"
-        borderColor="colorBorderWeaker"
         borderRadius="borderRadius30"
-        borderWidth="borderWidth10"
         boxShadow="shadowLow"
+        backgroundColor="colorBackgroundBodyElevation"
         position="relative"
         display="inline-block"
         width="100%"

From c0f8b12e89a46e7f013dac1aa51e0dda71e94237 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 10 Feb 2025 12:21:45 +0530
Subject: [PATCH 35/46] feat(elevation): add changeset

---
 .changeset/great-singers-stare.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/great-singers-stare.md

diff --git a/.changeset/great-singers-stare.md b/.changeset/great-singers-stare.md
new file mode 100644
index 0000000000..ee566b0fe6
--- /dev/null
+++ b/.changeset/great-singers-stare.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/design-tokens": minor
+"@twilio-paste/core": minor
+---
+
+[Design Tokens] Add new box shadow and background color tokens for elevation

From cb91e54af56215e1b9ca4f72bebdb58b5c8e09fd Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 10 Feb 2025 19:43:27 +0530
Subject: [PATCH 36/46] feat(elevation): update typedocs

---
 packages/paste-core/primitives/box/type-docs.json         | 4 ++--
 packages/paste-core/primitives/sibling-box/type-docs.json | 4 ++--
 packages/paste-core/primitives/text/type-docs.json        | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/paste-core/primitives/box/type-docs.json b/packages/paste-core/primitives/box/type-docs.json
index c987a126e0..318ce1cd51 100644
--- a/packages/paste-core/primitives/box/type-docs.json
+++ b/packages/paste-core/primitives/box/type-docs.json
@@ -727,7 +727,7 @@
       "description": "Responsive prop for the CSS `background-attachment` property"
     },
     "backgroundColor": {
-      "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | ... 64 more ... | { ...; }",
+      "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | ... 65 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
@@ -958,7 +958,7 @@
       "description": "Responsive prop for the CSS `bottom` property"
     },
     "boxShadow": {
-      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 85 more ... | { ...; }",
+      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 86 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
diff --git a/packages/paste-core/primitives/sibling-box/type-docs.json b/packages/paste-core/primitives/sibling-box/type-docs.json
index 24b82c3189..dbd03e55c8 100644
--- a/packages/paste-core/primitives/sibling-box/type-docs.json
+++ b/packages/paste-core/primitives/sibling-box/type-docs.json
@@ -829,7 +829,7 @@
       "description": "Responsive prop for the CSS `background-attachment` property"
     },
     "backgroundColor": {
-      "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | ... 64 more ... | { ...; }",
+      "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | ... 65 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
@@ -1060,7 +1060,7 @@
       "description": "Responsive prop for the CSS `bottom` property"
     },
     "boxShadow": {
-      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 85 more ... | { ...; }",
+      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 86 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
diff --git a/packages/paste-core/primitives/text/type-docs.json b/packages/paste-core/primitives/text/type-docs.json
index ec4863fead..571d97d72a 100644
--- a/packages/paste-core/primitives/text/type-docs.json
+++ b/packages/paste-core/primitives/text/type-docs.json
@@ -531,7 +531,7 @@
       "description": "Responsive prop for the CSS `bottom` property"
     },
     "boxShadow": {
-      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 85 more ... | { ...; }",
+      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 86 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,

From 94105a0a19b675dc1c47ec97dd4517c381bd5fe2 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 10 Feb 2025 22:25:34 +0530
Subject: [PATCH 37/46] feat(tokens): add color-background-strong-elevation for
 dark theme

---
 .../__tests__/__snapshots__/index.test.tsx.snap               | 4 ++--
 .../tokens/themes/dark/global/background-color.yml            | 3 +++
 .../tokens/themes/twilio-dark/global/background-color.yml     | 3 +++
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
index e9fc219bd3..bf3032e84a 100644
--- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
@@ -66,7 +66,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-background-inverse\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-overlay\\": \\"rgba(18, 28, 45, 0.9)\\",
   \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
-  \\"color-background-strong-elevation\\": \\"rgb(225, 227, 234)\\",
+  \\"color-background-strong-elevation\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-weak-elevation\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-error-stronger\\": \\"rgb(252, 207, 207)\\",
@@ -1518,7 +1518,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-background-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-overlay\\": \\"rgba(18, 28, 45, 0.9)\\",
   \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
-  \\"color-background-strong-elevation\\": \\"rgb(225, 227, 234)\\",
+  \\"color-background-strong-elevation\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-weak-elevation\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-error-stronger\\": \\"rgb(252, 207, 207)\\",
diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml
index a08aa9b979..68f7a0beb2 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml
@@ -204,3 +204,6 @@ props:
   color-background-elevation:
     value: "{!palette-gray-95}"
     comment: Elevation token for color-background elements.
+  color-background-strong-elevation:
+    value: "{!palette-gray-90}"
+    comment: Elevation token for color-background-strong elements.
diff --git a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml
index 7613686f9b..c79514e812 100644
--- a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml
@@ -74,6 +74,9 @@ props:
   color-background-elevation:
     value: "{!palette-gray-95}"
     comment: Elevation token for color-background elements.
+  color-background-strong-elevation:
+    value: "{!palette-gray-90}"
+    comment: Elevation token for color-background-strong elements.
   color-background-inverse-weak-elevation:
     value: "{!palette-gray-100}"
     comment: Elevation token for color-background-inverse-weak elements.

From 642df3fbcf9b0caa9cdd53684c01c7a54d2ec618 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 10 Feb 2025 22:34:19 +0530
Subject: [PATCH 38/46] feat(tokens): update comments

---
 packages/paste-design-tokens/tokens/global/box-shadow.yml       | 2 +-
 .../tokens/themes/dark/global/box-shadow.yml                    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/paste-design-tokens/tokens/global/box-shadow.yml b/packages/paste-design-tokens/tokens/global/box-shadow.yml
index 89b2b53b37..faada3d738 100644
--- a/packages/paste-design-tokens/tokens/global/box-shadow.yml
+++ b/packages/paste-design-tokens/tokens/global/box-shadow.yml
@@ -285,7 +285,7 @@ props:
     comment: Use on inverse elements that overlay other UI components but remain visually connected to the elements behind them.
   shadow-elevation-20:
     value: "{!offset-0} {!offset-30} {!offset-40} {!offset-0} {!palette-gray-110-transparent-10}, {!offset-60} {!offset-60} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}"
-    comment: Use on elements that sit above the UI to indicate a greater distance distance from the surface behind them.
+    comment: Use on elements with decorative or semantic use of color that sit above the UI to indicate a greater distance distance from the surface behind them.
   shadow-elevation-left-20:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-05}, {!offset-negative-20} {!offset-0} {!offset-40} {!offset-0} {!palette-gray-110-transparent-10}, {!offset-negative-60} {!offset-0} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}"
     comment: Use for elements that dynamically open from the right side of the screen, appearing above the UI to indicate a greater separation from the underlying surface.
diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml
index dd2c64d6c6..a922734f5e 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml
@@ -200,7 +200,7 @@ props:
     comment: Use on elements that overlay other UI components but remain visually connected to the elements behind them.
   shadow-elevation-20:
     value: "{!offset-0} {!offset-30} {!offset-40} {!offset-0} {!palette-black-transparent-30}, {!offset-60} {!offset-60} {!offset-90} {!offset-0} {!palette-black-transparent-20}"
-    comment: Use on elements that sit above the UI to indicate a greater distance distance from the surface behind them.
+    comment: Use on elements with decorative or semantic use of color that sit above the UI to indicate a greater distance distance from the surface behind them.
   shadow-elevation-left-20:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-95}, {!offset-negative-20} {!offset-0} {!offset-40} {!offset-0} {!palette-black-transparent-30}, {!offset-negative-60} {!offset-0} {!offset-90} {!offset-0} {!palette-black-transparent-20}"
     comment: Use for elements that dynamically open from the right side of the screen, appearing above the UI to indicate a greater separation from the underlying surface.

From 80eab76cbf594f43e6ada093c797c3a1ccc1cbca Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Thu, 13 Feb 2025 21:55:40 +0530
Subject: [PATCH 39/46] feat(elevation): implement changes from chromatic
 review

---
 .../chat-composer/src/ChatComposerAttachmentCard.tsx           | 1 -
 .../components/chat-log/src/ComposerAttachmentCard.tsx         | 1 -
 packages/paste-core/components/menu/src/MenuItem.styles.tsx    | 2 +-
 packages/paste-core/components/side-panel/src/SidePanel.tsx    | 1 +
 packages/paste-core/components/tooltip/src/TooltipArrow.tsx    | 3 +--
 5 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx
index 95737428b9..595cb75d65 100644
--- a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx
+++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx
@@ -85,7 +85,6 @@ const ChatComposerAttachmentCard = React.forwardRef<HTMLDivElement, ChatComposer
         paddingX="space40"
         borderRadius="borderRadius30"
         backgroundColor="colorBackgroundBodyElevation"
-        boxShadow="shadowLow"
         position="relative"
         display="inline-block"
         width="100%"
diff --git a/packages/paste-core/components/chat-log/src/ComposerAttachmentCard.tsx b/packages/paste-core/components/chat-log/src/ComposerAttachmentCard.tsx
index 1a4e41976f..1b2ebd0378 100644
--- a/packages/paste-core/components/chat-log/src/ComposerAttachmentCard.tsx
+++ b/packages/paste-core/components/chat-log/src/ComposerAttachmentCard.tsx
@@ -63,7 +63,6 @@ const ComposerAttachmentCard = React.forwardRef<HTMLDivElement, ComposerAttachme
         paddingY="space30"
         paddingX="space40"
         borderRadius="borderRadius30"
-        boxShadow="shadowLow"
         backgroundColor="colorBackgroundBodyElevation"
         position="relative"
         display="inline-block"
diff --git a/packages/paste-core/components/menu/src/MenuItem.styles.tsx b/packages/paste-core/components/menu/src/MenuItem.styles.tsx
index c2557c0098..9785dfe745 100644
--- a/packages/paste-core/components/menu/src/MenuItem.styles.tsx
+++ b/packages/paste-core/components/menu/src/MenuItem.styles.tsx
@@ -103,7 +103,7 @@ export const StyledMenuItem = React.forwardRef<HTMLDivElement | HTMLAnchorElemen
         _disabled={{
           color: "colorTextWeaker",
           cursor: "not-allowed",
-          backgroundColor: "colorBackgroundBody",
+          backgroundColor: "colorBackgroundWeaker",
           borderColor: "transparent",
         }}
         ref={ref}
diff --git a/packages/paste-core/components/side-panel/src/SidePanel.tsx b/packages/paste-core/components/side-panel/src/SidePanel.tsx
index 93b8949f89..4b7f1c67b2 100644
--- a/packages/paste-core/components/side-panel/src/SidePanel.tsx
+++ b/packages/paste-core/components/side-panel/src/SidePanel.tsx
@@ -49,6 +49,7 @@ const StyledSidePanelWrapper = React.forwardRef<HTMLDivElement, BoxProps>((props
     width={["100%", "size40", "size40"]}
     height={props.height}
     boxSizing="content-box"
+    backgroundColor="colorBackgroundWeaker"
   />
 ));
 
diff --git a/packages/paste-core/components/tooltip/src/TooltipArrow.tsx b/packages/paste-core/components/tooltip/src/TooltipArrow.tsx
index 104b8b101d..ff23b04416 100644
--- a/packages/paste-core/components/tooltip/src/TooltipArrow.tsx
+++ b/packages/paste-core/components/tooltip/src/TooltipArrow.tsx
@@ -12,8 +12,7 @@ const TooltipArrow: React.FC<React.PropsWithChildren<TooltipArrowProps>> = (prop
     <TooltipPrimitiveArrow
       {...props}
       size={theme.fontSizes.fontSize50}
-      stroke={theme.borderColors.colorBorderInverse}
-      fill={theme.backgroundColors.colorBackgroundBodyInverse}
+      fill={theme.backgroundColors.colorBackgroundInverseElevation}
     />
   );
 };

From 983c7f6249ea0f8199e23fd5cad75be1b46589bc Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Thu, 13 Feb 2025 23:04:22 +0530
Subject: [PATCH 40/46] feat(chat-composer): fix disable text color

---
 .../components/chat-composer/src/ChatComposerContainer.tsx      | 1 +
 .../components/chat-composer/src/PlaceholderWrapper.tsx         | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx
index 0e6b1b5da9..2075a8c4e9 100644
--- a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx
+++ b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx
@@ -55,6 +55,7 @@ export const ChatComposerContainer = React.forwardRef<HTMLDivElement, ChatCompos
           gridAutoColumns="1fr auto"
           disabled={isDisabled}
           aria-disabled={isDisabled}
+          color="colorTextWeak"
           _disabled={{
             color: "colorTextWeaker",
             backgroundColor: "colorBackground",
diff --git a/packages/paste-core/components/chat-composer/src/PlaceholderWrapper.tsx b/packages/paste-core/components/chat-composer/src/PlaceholderWrapper.tsx
index 0988473a26..e127b74cf1 100644
--- a/packages/paste-core/components/chat-composer/src/PlaceholderWrapper.tsx
+++ b/packages/paste-core/components/chat-composer/src/PlaceholderWrapper.tsx
@@ -17,7 +17,7 @@ export const PlaceholderWrapper: React.FC<
     right="space40"
     display="flex"
     alignItems="center"
-    color="colorTextWeak"
+    color="inherit"
     pointerEvents="none"
     userSelect="none"
     fontStyle="italic"

From 372691c68e7149a4d26b76aae227159f2d6d5569 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Thu, 20 Feb 2025 18:31:18 +0530
Subject: [PATCH 41/46] feat(elevation): update sidepanel box shadow

---
 packages/paste-core/components/side-panel/src/SidePanel.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/paste-core/components/side-panel/src/SidePanel.tsx b/packages/paste-core/components/side-panel/src/SidePanel.tsx
index 4b7f1c67b2..86c52725d7 100644
--- a/packages/paste-core/components/side-panel/src/SidePanel.tsx
+++ b/packages/paste-core/components/side-panel/src/SidePanel.tsx
@@ -111,13 +111,11 @@ const SidePanelContents = React.forwardRef<HTMLDivElement, SidePanelContentsProp
             top={0}
             left={[0, 12, 12]}
             bottom={0}
-            borderStyle="solid"
             borderBottomLeftRadius={["borderRadius0", "borderRadius70", "borderRadius70"]}
             borderBottomRightRadius={["borderRadius0", "borderRadius70", "borderRadius70"]}
             borderTopRightRadius={["borderRadius60", "borderRadius70", "borderRadius70"]}
             borderTopLeftRadius={["borderRadius60", "borderRadius70", "borderRadius70"]}
-            borderWidth="borderWidth10"
-            borderColor="colorBorderWeaker"
+            boxShadow="shadowElevation05"
             backgroundColor="colorBackgroundBody"
             marginTop={["space100", "space40", "space40"]}
             marginBottom={["space0", "space40", "space40"]}

From 1e985ce367d2a277b8a92be388f6d0337d2aafe3 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Thu, 20 Feb 2025 19:25:11 +0530
Subject: [PATCH 42/46] feat(elevation): fix chat composer placeholder text
 color

---
 .../src/ChatComposerContainer.tsx             |  1 -
 .../chat-composer/src/PlaceholderWrapper.tsx  | 39 +++++++++++--------
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx
index 2075a8c4e9..0e6b1b5da9 100644
--- a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx
+++ b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx
@@ -55,7 +55,6 @@ export const ChatComposerContainer = React.forwardRef<HTMLDivElement, ChatCompos
           gridAutoColumns="1fr auto"
           disabled={isDisabled}
           aria-disabled={isDisabled}
-          color="colorTextWeak"
           _disabled={{
             color: "colorTextWeaker",
             backgroundColor: "colorBackground",
diff --git a/packages/paste-core/components/chat-composer/src/PlaceholderWrapper.tsx b/packages/paste-core/components/chat-composer/src/PlaceholderWrapper.tsx
index e127b74cf1..b9ed14285b 100644
--- a/packages/paste-core/components/chat-composer/src/PlaceholderWrapper.tsx
+++ b/packages/paste-core/components/chat-composer/src/PlaceholderWrapper.tsx
@@ -3,28 +3,33 @@ import { Box } from "@twilio-paste/box";
 import * as React from "react";
 
 import type { ChatComposerProps } from ".";
+import { ChatComposerContext } from "./ChatComposerContext";
 
 export const PlaceholderWrapper: React.FC<
   React.PropsWithChildren<{
     placeholder: ChatComposerProps["placeholder"];
     element?: BoxProps["element"];
   }>
-> = ({ placeholder, element }) => (
-  <Box
-    position="absolute"
-    top="space30"
-    left="space40"
-    right="space40"
-    display="flex"
-    alignItems="center"
-    color="inherit"
-    pointerEvents="none"
-    userSelect="none"
-    fontStyle="italic"
-    element={element}
-  >
-    {placeholder}
-  </Box>
-);
+> = ({ placeholder, element }) => {
+  const { isDisabled } = React.useContext(ChatComposerContext);
+
+  return (
+    <Box
+      position="absolute"
+      top="space30"
+      left="space40"
+      right="space40"
+      display="flex"
+      alignItems="center"
+      color={isDisabled ? "colorTextWeaker" : "colorTextWeak"}
+      pointerEvents="none"
+      userSelect="none"
+      fontStyle="italic"
+      element={element}
+    >
+      {placeholder}
+    </Box>
+  );
+};
 
 PlaceholderWrapper.displayName = "PlaceholderWrapper";

From 5056cd54dac74a31a5baa0d5067e2bfe8f86ea0e Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 24 Feb 2025 18:20:51 +0530
Subject: [PATCH 43/46] feat(elevation): update combobox item background and
 tokens

---
 .../combobox/src/styles/ComboboxListboxOption.tsx      |  2 +-
 .../__tests__/__snapshots__/index.test.tsx.snap        | 10 +++++-----
 .../tokens/aliases/color-palette.yml                   |  1 +
 .../paste-design-tokens/tokens/global/box-shadow.yml   |  2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx b/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx
index 202bff5d7d..4995a412a7 100644
--- a/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx
+++ b/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx
@@ -99,7 +99,7 @@ const ComboboxListboxOption = React.forwardRef<HTMLLIElement, ComboboxListboxOpt
         as="li"
         position="relative"
         element={`${element}_LIST_ITEM`}
-        backgroundColor={highlighted ? "colorBackgroundPrimaryWeakest" : "colorBackgroundBody"}
+        backgroundColor={highlighted ? "colorBackgroundPrimaryWeakest" : "colorBackgroundWeaker"}
         color={
           highlighted
             ? "colorTextPrimary"
diff --git a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
index bf3032e84a..2a638decbc 100644
--- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
@@ -203,7 +203,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #750c0c\\",
   \\"shadow-border-weaker\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border\\": \\"0 0 0 1px #606b85\\",
-  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\",
+  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.1)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #001489\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
@@ -687,7 +687,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #fccfcf\\",
   \\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\",
   \\"shadow-border\\": \\"0 0 0 1px #8891aa\\",
-  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\",
+  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.1)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
@@ -1171,7 +1171,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #fccfcf\\",
   \\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\",
   \\"shadow-border\\": \\"0 0 0 1px #8891aa\\",
-  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\",
+  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.1)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
@@ -1655,7 +1655,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #ad1111\\",
   \\"shadow-border-weaker\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border\\": \\"0 0 0 1px #606b85\\",
-  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\",
+  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.1)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
@@ -2139,7 +2139,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #f58a8a\\",
   \\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\",
   \\"shadow-border\\": \\"0 0 0 1px #8891aa\\",
-  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\",
+  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.1)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #66b3ff\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
diff --git a/packages/paste-design-tokens/tokens/aliases/color-palette.yml b/packages/paste-design-tokens/tokens/aliases/color-palette.yml
index f524ee34f6..38937153f1 100644
--- a/packages/paste-design-tokens/tokens/aliases/color-palette.yml
+++ b/packages/paste-design-tokens/tokens/aliases/color-palette.yml
@@ -74,6 +74,7 @@ aliases:
   palette-gray-110-transparent-10: "rgba(15, 22, 33, 0.1)"
 
   ## Blacks transparent
+  palette-black-transparent-10: "rgba(0, 0, 0, 0.1)"
   palette-black-transparent-40: "rgba(0, 0, 0, 0.4)"
 
   ## Blues transparent based on darkest blue
diff --git a/packages/paste-design-tokens/tokens/global/box-shadow.yml b/packages/paste-design-tokens/tokens/global/box-shadow.yml
index faada3d738..45a424d480 100644
--- a/packages/paste-design-tokens/tokens/global/box-shadow.yml
+++ b/packages/paste-design-tokens/tokens/global/box-shadow.yml
@@ -281,7 +281,7 @@ props:
     value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-10}, {!offset-0} {!offset-15} {!offset-20} {!offset-0} {!palette-gray-110-transparent-10}"
     comment: Use on elements that overlay other UI components but remain visually connected to the elements behind them.
   shadow-elevation-inverse-10:
-    value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-90}, {!offset-0} {!offset-15} {!offset-20} {!offset-0} {!palette-black-transparent-40}"
+    value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-90}, {!offset-0} {!offset-15} {!offset-20} {!offset-0} {!palette-black-transparent-10}"
     comment: Use on inverse elements that overlay other UI components but remain visually connected to the elements behind them.
   shadow-elevation-20:
     value: "{!offset-0} {!offset-30} {!offset-40} {!offset-0} {!palette-gray-110-transparent-10}, {!offset-60} {!offset-60} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}"

From dce378c3a97c62ef157f11d3747e25b3e1ebe0ed Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Thu, 27 Feb 2025 13:19:52 +0530
Subject: [PATCH 44/46] feat(elevation): update background tokens

---
 .../paste-design-tokens/tokens/global/background-color.yml  | 2 +-
 .../tokens/themes/twilio-dark/global/background-color.yml   | 6 +++---
 .../tokens/themes/twilio/global/background-color.yml        | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/paste-design-tokens/tokens/global/background-color.yml b/packages/paste-design-tokens/tokens/global/background-color.yml
index 4b67fb1d7c..b857110cba 100644
--- a/packages/paste-design-tokens/tokens/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/global/background-color.yml
@@ -234,7 +234,7 @@ props:
     value: "{!palette-gray-85}"
     comment: Elevation token for color-background-inverse-weak elements.
   color-background-inverse-strong-elevation:
-    value: "{!palette-gray-75}"
+    value: "{!palette-gray-85}"
     comment: Elevation token for color-background-inverse-strong elements.
   color-background-inverse-stronger-elevation:
     value: "{!palette-gray-75}"
diff --git a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml
index c79514e812..0cc18d0203 100644
--- a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml
@@ -80,6 +80,6 @@ props:
   color-background-inverse-weak-elevation:
     value: "{!palette-gray-100}"
     comment: Elevation token for color-background-inverse-weak elements.
-  color-background-inverse-strong-elevation:
-    value: "{!palette-gray-85}"
-    comment: Elevation token for color-background-inverse-strong elements.
+  color-background-inverse-elevation:
+    value: "{!palette-gray-95}"
+    comment: Elevation token for color-background-inverse elements.
diff --git a/packages/paste-design-tokens/tokens/themes/twilio/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/twilio/global/background-color.yml
index 8ad8c41a85..c75cacea4f 100644
--- a/packages/paste-design-tokens/tokens/themes/twilio/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/twilio/global/background-color.yml
@@ -91,6 +91,6 @@ props:
   color-background-inverse-weak-elevation:
     value: "{!palette-gray-100}"
     comment: Elevation token for color-background-inverse-weak elements.
-  color-background-inverse-strong-elevation:
-    value: "{!palette-gray-85}"
-    comment: Elevation token for color-background-inverse-strong elements.
+  color-background-inverse-elevation:
+    value: "{!palette-gray-95}"
+    comment: Elevation token for color-background-inverse elements.

From 96f5903bcc6988d2af44566574d09f622dbb91de Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Thu, 27 Feb 2025 13:20:40 +0530
Subject: [PATCH 45/46] feat(elevation): update test

---
 .../__tests__/__snapshots__/index.test.tsx.snap             | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
index 2a638decbc..90d2ee013e 100644
--- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-background-primary-weak\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
   \\"color-background-stronger\\": \\"rgb(96, 107, 133)\\",
-  \\"color-background-inverse-strong-elevation\\": \\"rgb(64, 79, 110)\\",
+  \\"color-background-inverse-strong-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
   \\"color-background-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-background-brand-highlight-weakest\\": \\"rgba(242, 47, 70, 0.1)\\",
@@ -538,7 +538,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-background-primary-weak\\": \\"rgb(153, 205, 255)\\",
   \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
   \\"color-background-stronger\\": \\"rgb(136, 145, 170)\\",
-  \\"color-background-inverse-strong-elevation\\": \\"rgb(64, 79, 110)\\",
+  \\"color-background-inverse-strong-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
   \\"color-background-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-background-brand-highlight-weakest\\": \\"rgba(242, 47, 70, 0.1)\\",
@@ -1022,7 +1022,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-background-primary-weak\\": \\"rgb(153, 205, 255)\\",
   \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
   \\"color-background-stronger\\": \\"rgb(136, 145, 170)\\",
-  \\"color-background-inverse-strong-elevation\\": \\"rgb(64, 79, 110)\\",
+  \\"color-background-inverse-strong-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
   \\"color-background-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-background-brand-highlight-weakest\\": \\"rgba(242, 47, 70, 0.1)\\",

From 16b3794ea6b18b5d75d5d3608dd71ff3171ade45 Mon Sep 17 00:00:00 2001
From: PixeledCode <ashoaib540918@gmail.com>
Date: Mon, 3 Mar 2025 19:41:18 +0530
Subject: [PATCH 46/46] feat(elevation): update tokens

---
 .../__tests__/__snapshots__/index.test.tsx.snap             | 6 +++---
 .../paste-design-tokens/tokens/global/background-color.yml  | 2 +-
 .../tokens/themes/evergreen/global/background-color.yml     | 3 +++
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
index 90d2ee013e..6b217a690f 100644
--- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-background-warning-weakest\\": \\"rgb(64, 19, 15)\\",
   \\"color-background-inverse-strong\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-new\\": \\"rgb(56, 14, 120)\\",
-  \\"color-background-inverse-elevation\\": \\"rgb(25, 39, 62)\\",
+  \\"color-background-inverse-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-strong\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-new-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\",
@@ -501,7 +501,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-background-warning-weakest\\": \\"rgb(254, 245, 238)\\",
   \\"color-background-inverse-strong\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-new\\": \\"rgb(245, 240, 252)\\",
-  \\"color-background-inverse-elevation\\": \\"rgb(25, 39, 62)\\",
+  \\"color-background-inverse-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-strong\\": \\"rgb(225, 227, 234)\\",
   \\"color-background-new-weakest\\": \\"rgb(250, 247, 253)\\",
   \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\",
@@ -985,7 +985,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-background-warning-weakest\\": \\"rgb(254, 245, 238)\\",
   \\"color-background-inverse-strong\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-new\\": \\"rgb(245, 240, 252)\\",
-  \\"color-background-inverse-elevation\\": \\"rgb(25, 39, 62)\\",
+  \\"color-background-inverse-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-strong\\": \\"rgb(225, 227, 234)\\",
   \\"color-background-new-weakest\\": \\"rgb(250, 247, 253)\\",
   \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\",
diff --git a/packages/paste-design-tokens/tokens/global/background-color.yml b/packages/paste-design-tokens/tokens/global/background-color.yml
index b857110cba..58fd8c8776 100644
--- a/packages/paste-design-tokens/tokens/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/global/background-color.yml
@@ -228,7 +228,7 @@ props:
     value: "{!palette-gray-20}"
     comment: Elevation token for color-background-strong elements.
   color-background-inverse-elevation:
-    value: "{!palette-gray-95}"
+    value: "{!palette-gray-85}"
     comment: Elevation token for color-background-inverse elements.
   color-background-inverse-weak-elevation:
     value: "{!palette-gray-85}"
diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml
index 593e6c60ed..04bc60a26f 100644
--- a/packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml
@@ -189,3 +189,6 @@ props:
   color-background-inverse-stronger-elevation:
     value: "{!palette-gray-55}"
     comment: Elevation token for color-background-inverse-stronger elements.
+  color-background-inverse-elevation:
+    value: "{!palette-gray-95}"
+    comment: Elevation token for color-background-inverse elements.