Update IconButton colors (#30124)

* chore: update `@vector-im/compound-web` to 8.0.0

* refactor(IconButton): use `kind="secondary"` instead of `subtleBackground` props

* test: update snapshots

* fix: force color on room header toggle

* fix: TAC button color

* test(e2e): update release announcement screenshot

src/components/views/right_panel/BaseCard.tsx

@@ -76,7 +76,7 @@ const BaseCard: React.FC<IProps> = ({
                 data-testid="base-card-back-button"
                 onClick={onBackClick}
                 tooltip={label}
-                subtleBackground
+                kind="secondary"
             >
                 <ChevronLeftIcon />
             </IconButton>
@@ -92,7 +92,7 @@ const BaseCard: React.FC<IProps> = ({
                 onClick={onClose ?? closeRightPanel}
                 ref={closeButtonRef}
                 tooltip={closeLabel ?? _t("action|close")}
-                subtleBackground
+                kind="secondary"
             >
                 <CloseIcon />
             </IconButton>

src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters.tsx

@@ -39,7 +39,7 @@ export function RoomListPrimaryFilters({ vm }: RoomListPrimaryFiltersProps): JSX
         >
             {displayChevron && (
                 <IconButton
-                    subtleBackground={true}
+                    kind="secondary"
                     aria-expanded={isExpanded}
                     aria-controls={id}
                     className="mx_RoomListPrimaryFilters_IconButton"
@@ -47,7 +47,7 @@ export function RoomListPrimaryFilters({ vm }: RoomListPrimaryFiltersProps): JSX
                     size="28px"
                     onClick={() => setIsExpanded((_expanded) => !_expanded)}
                 >
-                    <ChevronDownIcon color="var(--cpd-color-icon-secondary)" />
+                    <ChevronDownIcon />
                 </IconButton>
             )}
             <Flex