Add color-background-weaker-elevation (#4334)

* chore: redarken color-background-weak

* feat: add color-background-weaker-elevation and update components

* chore: add changeset

* feat: replace level-2-accent-shadow PNG

* feat(ci): fix tests

* docs(tokens): update image

* chore(ci): typedocs

---------

Co-authored-by: Kristian Antrobus <[email protected]>

Author: serifluous

.changeset/flat-rice-report.md

@@ -0,0 +1,10 @@
+---
+"@twilio-paste/chat-composer": patch
+"@twilio-paste/combobox": patch
+"@twilio-paste/menu": patch
+"@twilio-paste/topbar": patch
+"@twilio-paste/design-tokens": patch
+"@twilio-paste/core": patch
+---
+
+Visible changes in dark themes only. Redarkened color-background-weak and added color-background-weaker-elevation

packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx

@@ -82,7 +82,7 @@ const ChatComposerAttachmentCard = React.forwardRef<HTMLDivElement, ChatComposer
         ref={ref}
         padding="space40"
         borderRadius="borderRadius30"
-        backgroundColor="colorBackgroundBodyElevation"
+        backgroundColor="colorBackgroundWeakerElevation"
         position="relative"
         display="inline-flex"
         columnGap="space30"

packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx

@@ -72,7 +72,7 @@ const getVirtualStyles = (startHeight: number): Record<string, unknown> => ({
 
 function getBackgroundColor(highlightedProp?: boolean, selectedProp?: boolean): BackgroundColor {
   if (highlightedProp && selectedProp) {
-    return "colorBackgroundWeak";
+    return "colorBackgroundWeakerElevation";
   }
   if (highlightedProp || selectedProp) {
     return "colorBackgroundBodyElevationPrimary";

packages/paste-core/components/menu/src/MenuItem.styles.tsx

@@ -101,7 +101,7 @@ export const StyledMenuItem = React.forwardRef<HTMLDivElement | HTMLAnchorElemen
         {...variantStyles[variant]}
         _checked_hover={
           {
-            backgroundColor: "colorBackgroundWeak",
+            backgroundColor: "colorBackgroundWeakerElevation",
             color: variant === MenuItemVariants.DESTRUCTIVE ? "colorTextDestructive" : "colorTextPrimary",
             "& [data-paste-element='ICON']": {
               color: "colorTextIcon",

packages/paste-core/components/topbar/src/Topbar.tsx

@@ -29,7 +29,7 @@ export const Topbar = React.forwardRef<HTMLDivElement, TopbarProps>(
         element={element}
         width="100%"
         minHeight="sizeTopbar"
-        backgroundColor="colorBackgroundWeakElevation"
+        backgroundColor="colorBackgroundWeak"
         boxShadow="shadowElevationBottom05"
         paddingX="space70"
         position="sticky"

packages/paste-core/primitives/box/type-docs.json

@@ -767,7 +767,7 @@
       "description": "Responsive prop for the CSS `background-attachment` property"
     },
     "backgroundColor": {
-      "type": "\"none\" | \"inherit\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyElevationPrimary\" | \"colorBackgroundBodyInverse\" | ... 67 more ... | { ...; }",
+      "type": "\"none\" | \"inherit\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyElevationPrimary\" | \"colorBackgroundBodyInverse\" | ... 68 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,

packages/paste-core/primitives/sibling-box/type-docs.json

@@ -869,7 +869,7 @@
       "description": "Responsive prop for the CSS `background-attachment` property"
     },
     "backgroundColor": {
-      "type": "\"none\" | \"inherit\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyElevationPrimary\" | \"colorBackgroundBodyInverse\" | ... 67 more ... | { ...; }",
+      "type": "\"none\" | \"inherit\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyElevationPrimary\" | \"colorBackgroundBodyInverse\" | ... 68 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,

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

@@ -16,12 +16,13 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-background-elevation\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-warning-weakest\\": \\"rgb(64, 19, 15)\\",
   \\"color-background-inverse-strong\\": \\"rgb(57, 71, 98)\\",
+  \\"color-background-weaker-elevation\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-new\\": \\"rgb(56, 14, 120)\\",
   \\"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(219, 19, 42)\\",
-  \\"color-background-weak\\": \\"rgb(24, 37, 60)\\",
+  \\"color-background-weak\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-primary\\": \\"rgb(2, 99, 224)\\",
   \\"color-background-primary-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-busy\\": \\"rgb(244, 124, 34)\\",
@@ -502,6 +503,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-background-elevation\\": \\"rgb(237, 238, 242)\\",
   \\"color-background-warning-weakest\\": \\"rgb(254, 245, 238)\\",
   \\"color-background-inverse-strong\\": \\"rgb(57, 71, 98)\\",
+  \\"color-background-weaker-elevation\\": \\"rgb(249, 249, 250)\\",
   \\"color-background-new\\": \\"rgb(245, 240, 252)\\",
   \\"color-background-inverse-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-strong\\": \\"rgb(225, 227, 234)\\",
@@ -988,6 +990,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-background-elevation\\": \\"rgb(237, 238, 242)\\",
   \\"color-background-warning-weakest\\": \\"rgb(254, 245, 238)\\",
   \\"color-background-inverse-strong\\": \\"rgb(57, 71, 98)\\",
+  \\"color-background-weaker-elevation\\": \\"rgb(249, 249, 250)\\",
   \\"color-background-new\\": \\"rgb(245, 240, 252)\\",
   \\"color-background-inverse-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-strong\\": \\"rgb(225, 227, 234)\\",
@@ -1474,12 +1477,13 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-background-elevation\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-warning-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse-strong\\": \\"rgb(31, 48, 76)\\",
+  \\"color-background-weaker-elevation\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-new\\": \\"rgb(56, 14, 120)\\",
   \\"color-background-inverse-elevation\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-strong\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-new-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-destructive\\": \\"rgb(219, 19, 42)\\",
-  \\"color-background-weak\\": \\"rgb(24, 37, 60)\\",
+  \\"color-background-weak\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-primary\\": \\"rgb(0, 109, 250)\\",
   \\"color-background-primary-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-busy\\": \\"rgb(244, 124, 34)\\",
@@ -1960,6 +1964,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-background-elevation\\": \\"rgb(237, 238, 242)\\",
   \\"color-background-warning-weakest\\": \\"rgb(253, 247, 244)\\",
   \\"color-background-inverse-strong\\": \\"rgb(31, 48, 76)\\",
+  \\"color-background-weaker-elevation\\": \\"rgb(249, 249, 250)\\",
   \\"color-background-new\\": \\"rgb(245, 240, 252)\\",
   \\"color-background-inverse-elevation\\": \\"rgb(24, 37, 60)\\",
   \\"color-background-strong\\": \\"rgb(225, 227, 234)\\",

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

@@ -227,6 +227,9 @@ props:
   color-background-weak-elevation:
     value: "{!palette-gray-05}"
     comment: Elevation token for color-background-weak elements.
+  color-background-weaker-elevation:
+    value: "{!palette-gray-05}"
+    comment: Elevation token for color-background-weak elements.
   color-background-elevation:
     value: "{!palette-gray-15}"
     comment: Elevation token for color-background elements.

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

@@ -28,7 +28,7 @@ props:
     value: "{!palette-gray-80}"
     comment: Stronger inverse background color for any container. Must be used on color-background-body-inverse.
   color-background-weak:
-    value: "{!palette-gray-95}"
+    value: "{!palette-gray-100}"
     comment: Weak default background color.
   color-background-weaker:
     value: "{!palette-gray-100}"
@@ -207,6 +207,9 @@ props:
   color-background-weak-elevation:
     value: "{!palette-gray-90}"
     comment: Elevation token for color-background-weak elements.
+  color-background-weaker-elevation:
+    value: "{!palette-gray-95}"
+    comment: Elevation token for color-background-weak elements.
   color-background-elevation:
     value: "{!palette-gray-90}"
     comment: Elevation token for color-background elements.