Elevation component changes (#4226)

* feat(side-panel): add elevation changes

* feat(minimizable-dialog): add elevation changes

* feat(side-modal): add elevation changes

* feat(input): add elevation changes

* feat(tooltip): add elevation changes

* feat(callout): add elevation changes

* feat(topbar): add elevation changes

* feat(side-panel): update footer and header tokens

* feat(chat-composer): update tokens for elevation

* feat(chat-log): update tokens for elevation

* feat(side-panel): remove background color from header and footer

* feat(topbar): remove border bottom

* feat(sidebar): update tokens for elevation

* feat(menu): update tokens for elevation

* feat(user-dialog): update tokens for elevation

* feat(combobox): update tokens for elevation

* feat(popover): update tokens for elevation

* feat(toast): update tokens for elevation

* feat(modal): update tokens for elevation

* feat(sidebar): remove commented code

* feat(paste): add changeset

* feat(input): update default background token

* feat(input): update increament and decreament background token

* feat(minimizable-dialog): remove unused import

* feat(side-modal): remove extra tokens

* feat(input-box): removed unused import

* feat(side-panel): update hover token

* feat(elevation): changes from review

* feat(sidepanel): update tokens

* feat(sidebar): update tokens

* feat(tokens): add shadow-elevation-top-20 token

* feat(elevation): update componets to use new token

* feat(elevation): add new token color-background-strong-elevation

* feat(chat-log): update background color

* feat(elevation): add changeset

* feat(elevation): update typedocs

* feat(tokens): add color-background-strong-elevation for dark theme

* feat(tokens): update comments

* feat(elevation): implement changes from chromatic review

* feat(chat-composer): fix disable text color

* feat(elevation): update sidepanel box shadow

* feat(elevation): fix chat composer placeholder text color

* feat(elevation): update combobox item background and tokens

* feat(elevation): update background tokens

* feat(elevation): update test

* feat(elevation): update tokens

---------

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: PixeledCode

.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

.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

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

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%"

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",
   },
 };
 

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="colorTextWeak"
-    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";

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

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%"

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"

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"