Refine the colors of some more components (#12343)

* Refine the colors of some more components

This is a reintroduction of https://github.com/matrix-org/matrix-react-sdk/pull/12255, and should be the last part of the Compound color refinement work (https://github.com/element-hq/element-web/issues/26992). I've updated the following components to reflect design decisions (https://www.figma.com/file/pqhlirZFEwEp5XpudSbiia/Theming-Web-templates?type=design&node-id=80-60219&mode=design&t=mjqwylUie1vRwzOV-0) that will help them fit in better with the new design system:

- Message bubbles
- Pills
- Sent indicators
- Jump to bottom/unread buttons
- Composer placeholder
- Notification badges
- Room sublists
- Verification shields
- Date separators
- Tooltips

Closes https://github.com/element-hq/element-web/issues/22122

* Update some screenshots

res/themes/legacy-light/css/_legacy-light.pcss

@@ -123,8 +123,8 @@ $rte-code-bg-color: rgba(0, 0, 0, 0.04);
 
 $header-panel-text-primary-color: #91a1c0;
 
-$pill-bg-color: #aaa;
-$pill-hover-bg-color: #ccc;
+$pill-bg-color: var(--cpd-color-gray-1000);
+$pill-hover-bg-color: var(--cpd-color-gray-1100);
 
 $topleftmenu-color: #212121;
 $roomheader-bg-color: $primary-bg-color;
@@ -311,7 +311,6 @@ $inlinecode-background-color: $header-panel-bg-color;
 $eventbubble-self-bg: #f0fbf8;
 $eventbubble-others-bg: $system;
 $eventbubble-bg-hover: #fafbfd;
-$eventbubble-reply-color: #c1c6cd;
 
 /* pinned events indicator */
 $pinned-color: $tertiary-content;