feat(theme): update components and themes

.changeset/brown-zebras-try.md

@@ -0,0 +1,9 @@
+---
+"@twilio-paste/button": patch
+"@twilio-paste/card": patch
+"@twilio-paste/input-box": patch
+"@twilio-paste/table": patch
+"@twilio-paste/core": patch
+---
+
+[Button, Card, InputBox, Table] updated design tokens used for background color in preparation for theme changes

.changeset/neat-dancers-shake.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/design-tokens": minor
+"@twilio-paste/core": minor
+---
+
+[Design tokens] added new background token, colorBackgroundWeakest and updated dark mode user shadow token in dark themes

packages/paste-core/components/button/__tests__/button.test.tsx

@@ -371,7 +371,7 @@ describe("Button", () => {
 
       expect(button).not.toHaveStyleRule("text-align", "left");
       expect(button).toHaveStyleRule("color", "colorText");
-      expect(button).toHaveStyleRule("background-color", "colorBackgroundBody");
+      expect(button).toHaveStyleRule("background-color", "colorBackgroundWeakest");
       expect(button).toHaveStyleRule("box-shadow", "shadowBorderWeak");
 
       expect(getByText("Secondary")).toHaveStyleRule("justify-content", "center");
@@ -430,7 +430,7 @@ describe("Button", () => {
       const button = getByTestId("destructive_secondary-styles");
       expect(button).not.toHaveStyleRule("text-align", "left");
       expect(button).toHaveStyleRule("color", "colorTextDestructive");
-      expect(button).toHaveStyleRule("background-color", "colorBackgroundBody");
+      expect(button).toHaveStyleRule("background-color", "colorBackgroundWeakest");
       expect(button).toHaveStyleRule("box-shadow", "shadowBorderWeak");
 
       expect(getByText("Destructive secondary")).toHaveStyleRule("justify-content", "center");

packages/paste-core/components/button/src/DestructiveSecondaryButton.tsx

@@ -12,11 +12,11 @@ import type { DirectButtonProps } from "./types";
  */
 const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
   color: "colorTextDestructive",
-  backgroundColor: "colorBackgroundBody",
+  backgroundColor: "colorBackgroundWeakest",
   boxShadow: "shadowBorderWeak",
   _hover: {
     color: "colorTextDestructive",
-    backgroundColor: "colorBackgroundBody",
+    backgroundColor: "colorBackgroundWeakest",
     boxShadow: "shadowBorderDestructive",
   },
   _focus: {

packages/paste-core/components/button/src/PrimaryButton.tsx

@@ -16,7 +16,7 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
   boxShadow: "shadowBorderPrimary",
   _hover: {
     color: "colorTextPrimary",
-    backgroundColor: "colorBackgroundBody",
+    backgroundColor: "colorBackgroundWeakest",
     boxShadow: "shadowBorderPrimary",
   },
   _focus: {

packages/paste-core/components/button/src/SecondaryButton.tsx

@@ -12,11 +12,11 @@ import type { DirectButtonProps } from "./types";
  */
 const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
   color: "colorText",
-  backgroundColor: "colorBackgroundBody",
+  backgroundColor: "colorBackgroundWeakest",
   boxShadow: "shadowBorderWeak",
   _hover: {
     color: "colorTextPrimary",
-    backgroundColor: "colorBackgroundBody",
+    backgroundColor: "colorBackgroundWeakest",
     boxShadow: "shadowBorderPrimary",
   },
   _focus: {

packages/paste-core/components/card/src/Card.tsx

@@ -45,7 +45,7 @@ const Card = React.forwardRef<HTMLElement, CardProps>(
         paddingLeft={paddingLeft}
         paddingRight={paddingRight}
         paddingTop={paddingTop}
-        backgroundColor="colorBackgroundBody"
+        backgroundColor="colorBackgroundWeakest"
       >
         {children}
       </Box>

packages/paste-core/components/input-box/src/FauxInput/DefaultFauxInput.tsx

@@ -6,7 +6,7 @@ import type { FauxInputProps } from "../types";
 
 const DefaultFauxInput = React.forwardRef<HTMLDivElement, React.PropsWithChildren<FauxInputProps>>(
   ({ disabled, element, hasError, readOnly, children, type, variant }, ref) => {
-    let backgroundColor = "colorBackgroundBody" as BackgroundColor;
+    let backgroundColor = "colorBackgroundWeakest" as BackgroundColor;
     let boxShadow = "shadowBorder" as BoxShadow;
     let boxShadowHover = "shadowBorderPrimary" as BoxShadow;
     let boxShadowActive = "shadowBorderPrimaryStronger" as BoxShadow;

packages/paste-core/components/table/src/TBody.tsx

@@ -11,7 +11,7 @@ const bodyCellStyles: BoxStyleProps = {
 
 const StyledTBody = styled.tbody<TBodyProps>(
   css({
-    backgroundColor: "colorBackgroundBody",
+    backgroundColor: "colorBackgroundWeakest",
     "& > tr:last-of-type > td": bodyCellStyles,
     "& > tr:last-of-type > th": bodyCellStyles,
   }),

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\" | ... 65 more ... | { ...; }",
+      "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | ... 66 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,

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\" | ... 65 more ... | { ...; }",
+      "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | ... 66 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,

packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Design Tokens matches the Dark theme 1`] = `
 "{
-  \\"color-background-user\\": \\"rgb(88, 23, 189)\\",
+  \\"color-background-user\\": \\"rgb(34, 9, 74)\\",
   \\"color-background-notification\\": \\"rgb(214, 31, 31)\\",
   \\"color-background-trial\\": \\"rgb(5, 41, 18)\\",
   \\"color-background-subaccount\\": \\"rgb(18, 28, 45)\\",
@@ -53,6 +53,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-background\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-primary-weak\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
+  \\"color-background-weakest\\": \\"rgb(13, 19, 28)\\",
   \\"color-background-stronger\\": \\"rgb(96, 107, 133)\\",
   \\"color-background-inverse-strong-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
@@ -227,7 +228,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-focus-inverse-inset\\": \\"inset 0 0 0 2px rgba(255, 255, 255, 0.4)\\",
   \\"shadow-border-notification\\": \\"0 1px 0 #d61f1f\\",
   \\"shadow-elevation-inverse-05\\": \\"0 0 0 1px #1f304c\\",
-  \\"shadow-border-user\\": \\"0 0 0 1px #f5f0fc\\",
+  \\"shadow-border-user\\": \\"0 0 0 1px #5817bd\\",
   \\"shadow-border-neutral-weaker\\": \\"0 0 0 1px #043cb5\\",
   \\"font-family-text\\": \\"'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\\",
   \\"font-family-code\\": \\"'TwilioSansMono', Courier, monospace\\",
@@ -537,6 +538,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-background\\": \\"rgb(244, 244, 246)\\",
   \\"color-background-primary-weak\\": \\"rgb(153, 205, 255)\\",
   \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
+  \\"color-background-weakest\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-stronger\\": \\"rgb(136, 145, 170)\\",
   \\"color-background-inverse-strong-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
@@ -1021,6 +1023,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-background\\": \\"rgb(244, 244, 246)\\",
   \\"color-background-primary-weak\\": \\"rgb(153, 205, 255)\\",
   \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
+  \\"color-background-weakest\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-stronger\\": \\"rgb(136, 145, 170)\\",
   \\"color-background-inverse-strong-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
@@ -1505,6 +1508,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-background\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-primary-weak\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
+  \\"color-background-weakest\\": \\"rgb(13, 19, 28)\\",
   \\"color-background-stronger\\": \\"rgb(96, 107, 133)\\",
   \\"color-background-inverse-strong-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
@@ -1989,6 +1993,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-background\\": \\"rgb(244, 244, 246)\\",
   \\"color-background-primary-weak\\": \\"rgb(153, 205, 255)\\",
   \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
+  \\"color-background-weakest\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-stronger\\": \\"rgb(136, 145, 170)\\",
   \\"color-background-inverse-strong-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",

packages/paste-design-tokens/tokens/global/background-color.yml

@@ -36,6 +36,9 @@ props:
   color-background-weaker:
     value: "{!palette-gray-0}"
     comment: Background color for elevated elements. Matches color-background-body in light mode but appears slightly lighter in dark mode to maintain focus.
+  color-background-weakest:
+    value: "{!palette-gray-0}"
+    comment: The weakest background color used for containers.
 
   # brand backgrounds
   color-background-brand:

packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml

@@ -33,6 +33,9 @@ props:
   color-background-weaker:
     value: "{!palette-gray-100}"
     comment: Background color for elevated elements. Matches color-background-body in light mode but appears slightly lighter in dark mode to maintain focus.
+  color-background-weakest:
+    value: "{!palette-gray-110}"
+    comment: The weakest background color used for containers.
 
   # brand backgrounds
   color-background-brand:
@@ -53,7 +56,7 @@ props:
 
   # user background
   color-background-user:
-    value: "{!palette-purple-70}"
+    value: "{!palette-purple-90}"
     comment: User avatar background color.
 
   # account backgrounds

packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml

@@ -169,7 +169,7 @@ props:
 
   # User
   shadow-border-user:
-    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-purple-10}"
+    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-purple-70}"
     comment: Shadow border for user.
 
   # Bottom borders

packages/paste-website/src/components/site-wrapper/sidebar/SidebarNavigation.tsx

@@ -137,6 +137,18 @@ const SiteSidebarNavigation = (): JSX.Element => {
         <SidebarAnchor href={`${SidebarCategoryRoutes.FOUNDATIONS}/data-visualization`}>
           Data visualization
         </SidebarAnchor>
+        <SidebarAnchor
+          href={`${SidebarCategoryRoutes.FOUNDATIONS}/elevation`}
+          onClick={() =>
+            event({
+              category: "Left Navigation",
+              action: "click-elevation",
+              label: "Elevation",
+            })
+          }
+        >
+          Elevation
+        </SidebarAnchor>
         <SidebarAnchor
           href={`${SidebarCategoryRoutes.FOUNDATIONS}/illustrations`}
           onClick={() =>