twilio-labs · PixeledCode · Jan 29, 2025 · Jan 29, 2025 · Jan 29, 2025 · Jan 29, 2025
diff --git a/.changeset/great-singers-stare.md 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
diff --git a/.changeset/red-mirrors-play.md 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
+---
+
+[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/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",
   },

diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx
@@ -83,11 +83,8 @@ const ChatComposerAttachmentCard = React.forwardRef<HTMLDivElement, ChatComposer
         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%"

diff --git 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",
   },
 };
 
@@ -56,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
@@ -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"

diff --git 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",
   },

diff --git a/packages/paste-core/components/chat-log/src/ComposerAttachmentCard.tsx b/packages/paste-core/components/chat-log/src/ComposerAttachmentCard.tsx
@@ -62,11 +62,8 @@ 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%"

diff --git 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"

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

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

diff --git 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"

diff --git 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/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
@@ -1,22 +1,24 @@
-import { Box } from "@twilio-paste/box";
 import type { BoxProps } from "@twilio-paste/box";
+import { Box } from "@twilio-paste/box";
 import * as React from "react";
 
 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>
-);
+}) => {
+  return (
+    <Box
+      element={element}
+      borderRadius="borderRadius20"
+      display="flex"
+      flexDirection="column"
+      backgroundColor="colorBackgroundWeaker"
+      width="size40"
+      boxShadow="shadowElevationTop20"
+    >
+      {children}
+    </Box>
+  );
+};
 
 StyledMinimizableDialog.displayName = "StyledMinimizableDialog";
diff --git 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: "shadowElevationTop20",
       display: "flex",
       flexDirection: "column",
     }),

diff --git 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" }}

diff --git 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-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"
   />
 ));