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/dark/css/_dark.pcss

@@ -22,7 +22,7 @@ $separator: var(--cpd-color-alpha-gray-400);
 /* ******************** */
 $roomlist-bg-color: rgba(38, 40, 45, 0.9);
 $roomsublist-skeleton-ui-bg: linear-gradient(180deg, $background 0%, #ffffff00 100%);
-$roomtile-default-badge-bg-color: $muted-fg-color;
+$roomtile-default-badge-bg-color: var(--cpd-color-icon-secondary);
 /* ******************** */
 
 /**
@@ -125,8 +125,8 @@ $roomheader-addroom-fg-color: $primary-content;
 
 /* Rich-text-editor */
 /* ******************** */
-$pill-bg-color: $room-highlight-color;
-$pill-hover-bg-color: #545a66;
+$pill-bg-color: var(--cpd-color-gray-1000);
+$pill-hover-bg-color: var(--cpd-color-gray-1100);
 /* ******************** */
 
 /* Inputs */
@@ -150,7 +150,7 @@ $dialog-close-external-color: $primary-content;
 /* ******************** */
 $system: var(--cpd-color-bg-subtle-secondary);
 $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
-$roomtile-default-badge-bg-color: $input-darker-fg-color;
+$roomtile-default-badge-bg-color: var(--cpd-color-icon-secondary);
 /* ******************** */
 
 /* Tabbed views */
@@ -199,10 +199,9 @@ $voice-record-icon-color: $quaternary-content;
 
 /* Bubble tiles */
 /* ******************** */
-$eventbubble-self-bg: #133a34;
-$eventbubble-others-bg: #21262c;
-$eventbubble-bg-hover: #1c2026;
-$eventbubble-reply-color: #c1c6cd;
+$eventbubble-self-bg: var(--cpd-color-green-300);
+$eventbubble-others-bg: var(--cpd-color-gray-300);
+$eventbubble-bg-hover: var(--cpd-color-bg-subtle-secondary);
 /* ******************** */
 
 /* Lightbox */