feat(theme): update components and themes (#4261)

* feat(theming): updated component tokens ready for upcoming theme

* feat(docs): added the Elevations url

* fix(docs): ci issues

* fix(docs): tests and typedocs

Author: krisantrobus

.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,