Update critical gradient for room status bar (#32575)

* Update critical gradient for room status bar

As per design request, this has been updated to be much more subtle
https://github.com/element-hq/compound-design-tokens/pull/232

* update shared-component

* Cleanup

* Update snaps

* description fix color

* More cleanup

* Use the correct border color

* new snaps

* fix border, button placement, fonts etc

* update lock

* Update status bar

* Update playwright snaps

* Update snap icon

* Update other banners

* update snap

* fixup

apps/web/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap

@@ -213,12 +213,12 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
       </div>
       <div
         aria-labelledby="_r_1c3_"
-        class="_banner_17clp_8"
+        class="_banner_193k4_8"
         data-type="critical"
         role="status"
       >
         <div
-          class="_icon_17clp_51"
+          class="_icon_193k4_50"
         >
           <svg
             fill="currentColor"
@@ -229,26 +229,26 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+              d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20"
             />
           </svg>
         </div>
         <div
-          class="_content_17clp_39"
+          class="_content_193k4_38"
         >
           <p
-            class="_typography_6v6n8_153 _font-body-md-semibold_6v6n8_55 _container_mqidv_1"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _title_1rm46_17"
             id="_r_1c3_"
           >
             Could not start a chat with this user
           </p>
         </div>
         <div
-          class="_actions_17clp_71"
+          class="_actions_193k4_60"
         >
           <button
-            class="_button_13vu4_8 _container_mqidv_1 _has-icon_13vu4_60"
+            class="_button_13vu4_8 _primaryAction_1rm46_13 _has-icon_13vu4_60"
-            data-kind="secondary"
+            data-kind="primary"
             data-size="sm"
             role="button"
             tabindex="0"

packages/shared-components/src/composer/Banner/Banner.module.css

@@ -9,7 +9,6 @@
     container-type: inline-size;
     container-name: banner;
     display: flex;
-    align-items: center;
     justify-content: start;
     gap: var(--cpd-space-3x);
     padding: var(--cpd-space-4x);
@@ -24,7 +23,7 @@
 
 .banner[data-type="critical"] {
     background: var(--cpd-color-gradient-critical-linear);
-    border-color: var(--cpd-color-border-critical-primary);
+    border-color: var(--cpd-color-border-critical-subtle);
 }
 
 .banner[data-type="info"] {
@@ -49,19 +48,9 @@
 }
 
 .icon {
-    /* lock icon dimensions */
+    width: 24px;
-    min-width: 32px;
-    min-height: 32px;
-    max-width: 32px;
-    max-height: 32px;
-
-    margin: 4px;
-
-    /* centre svg icons, as they are not full width */
-    flex: 0;
     display: flex;
-    align-items: center;
+    align-items: flex-start;
-    justify-content: center;
 }
 
 .icon img {
@@ -74,7 +63,7 @@
     flex: 0;
     display: flex;
     flex-direction: row;
-    gap: var(--cpd-space-1x);
+    gap: var(--cpd-space-4x);
     align-self: center;
 
     white-space: nowrap;

packages/shared-components/src/composer/Banner/Banner.tsx

@@ -16,7 +16,7 @@ import React, {
 } from "react";
 import { Button } from "@vector-im/compound-web";
 import CheckCircleIcon from "@vector-im/compound-design-tokens/assets/web/icons/check-circle";
-import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
+import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
 import InfoIcon from "@vector-im/compound-design-tokens/assets/web/icons/info";
 
 import styles from "./Banner.module.css";

packages/shared-components/src/composer/Banner/__snapshots__/Banner.test.tsx.snap

@@ -123,7 +123,7 @@ exports[`AvatarWithDetails > renders a critical banner 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+          d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20"
         />
       </svg>
     </div>

packages/shared-components/src/room/RoomStatusBar/RoomStatusBarView.module.css

@@ -6,6 +6,18 @@
     }
 }
 
+.secondaryAction svg {
+    color: var(--cpd-color-text-secondary) !important;
+}
+
+.primaryAction svg {
+    color: var(--cpd-color-text-on-solid-primary) !important;
+}
+
+.title {
+    color: var(--cpd-color-text-critical-primary);
+}
+
 .description {
-    color: var(--cpd-color-text-secondary);
+    color: var(--cpd-color-text-primary);
 }

packages/shared-components/src/room/RoomStatusBar/RoomStatusBarView.stories.tsx

@@ -47,6 +47,12 @@ const meta = {
         onRetryRoomCreationClick: fn(),
         onTermsAndConditionsClicked: fn(),
     },
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/design/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?node-id=11019-2353&t=p8SkJGh9tJx09MTJ-4",
+        },
+    },
 } satisfies Meta<typeof RoomStatusBarViewWrapper>;
 
 export default meta;

packages/shared-components/src/room/RoomStatusBar/RoomStatusBarView.tsx

@@ -161,10 +161,10 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
             return (
                 <Banner type="critical" role="status" aria-labelledby={bannerTitleId}>
                     <div className={styles.container}>
-                        <Text id={bannerTitleId} weight="semibold">
+                        <Text className={styles.title} id={bannerTitleId} weight="medium">
                             {_t("room|status_bar|server_connectivity_lost_title")}
                         </Text>
-                        <Text className={styles.description} size="sm">
+                        <Text className={styles.description}>
                             {_t("room|status_bar|server_connectivity_lost_description")}
                         </Text>
                     </div>
@@ -179,7 +179,8 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
                     actions={
                         <Button
                             onClick={termsAndConditionsClicked}
-                            kind="secondary"
+                            className={styles.primaryAction}
+                            kind="primary"
                             size="sm"
                             as="a"
                             href={snapshot.consentUri}
@@ -191,7 +192,7 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
                     }
                 >
                     <div className={styles.container}>
-                        <Text id={bannerTitleId} weight="semibold">
+                        <Text className={styles.title} id={bannerTitleId} weight="medium">
                             {_t("room|status_bar|requires_consent_agreement_title")}
                         </Text>
                     </div>
@@ -219,13 +220,13 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
                     }
                 >
                     <div className={styles.container}>
-                        <Text id={bannerTitleId} weight="semibold">
+                        <Text className={styles.title} id={bannerTitleId} weight="medium">
                             {{
                                 monthly_active_user: _t("room|status_bar|monthly_user_limit_reached_title"),
                                 hs_disabled: _t("room|status_bar|homeserver_blocked_title"),
                             }[snapshot.resourceLimit] || _t("room|status_bar|exceeded_resource_limit_title")}
                         </Text>
-                        <Text className={styles.description} size="sm">
+                        <Text className={styles.description}>
                             {_t("room|status_bar|exceeded_resource_limit_description")}
                         </Text>
                     </div>
@@ -240,8 +241,8 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
                     actions={
                         <Button
                             size="sm"
-                            kind="secondary"
+                            kind="primary"
-                            className={styles.container}
+                            className={styles.primaryAction}
                             Icon={RestartIcon}
                             onClick={retryRoomCreationClick}
                         >
@@ -249,7 +250,7 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
                         </Button>
                     }
                 >
-                    <Text id={bannerTitleId} weight="semibold" className={styles.container}>
+                    <Text className={styles.title} id={bannerTitleId} weight="medium">
                         {_t("room|status_bar|failed_to_create_room_title")}
                     </Text>
                 </Banner>
@@ -267,9 +268,10 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
                                 {vm.onDeleteAllClick && (
                                     <Button
                                         size="sm"
-                                        kind="destructive"
+                                        kind="secondary"
                                         Icon={DeleteIcon}
                                         disabled={snapshot.isResending}
+                                        className={styles.secondaryAction}
                                         onClick={deleteAllClick}
                                     >
                                         {_t("room|status_bar|delete_all")}
@@ -278,11 +280,11 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
                                 {vm.onResendAllClick && (
                                     <Button
                                         size="sm"
-                                        kind="secondary"
+                                        kind="primary"
                                         Icon={RestartIcon}
                                         disabled={snapshot.isResending}
                                         onClick={resendClick}
-                                        className={styles.container}
+                                        className={styles.primaryAction}
                                     >
                                         {_t("room|status_bar|retry_all")}
                                     </Button>
@@ -293,12 +295,10 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
                     aria-labelledby={bannerTitleId}
                 >
                     <div className={styles.container}>
-                        <Text id={bannerTitleId} weight="semibold">
+                        <Text className={styles.title} id={bannerTitleId} weight="medium">
                             {_t("room|status_bar|some_messages_not_sent")}
                         </Text>
-                        <Text className={styles.description} size="sm">
+                        <Text className={styles.description}>{_t("room|status_bar|select_messages_to_retry")}</Text>
-                            {_t("room|status_bar|select_messages_to_retry")}
-                        </Text>
                     </div>
                 </Banner>
             );

packages/shared-components/src/room/RoomStatusBar/__snapshots__/RoomStatusBarView.test.tsx.snap

@@ -20,7 +20,7 @@ exports[`RoomStatusBarView > renders connection lost 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+          d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20"
         />
       </svg>
     </div>
@@ -31,13 +31,13 @@ exports[`RoomStatusBarView > renders connection lost 1`] = `
         class="container"
       >
         <p
-          class="_typography_6v6n8_153 _font-body-md-semibold_6v6n8_55"
+          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 title"
           id="_r_0_"
         >
           Connectivity to the server has been lost.
         </p>
         <p
-          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 description"
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 description"
         >
           Sent messages will be stored until your connection has returned.
         </p>
@@ -70,7 +70,7 @@ exports[`RoomStatusBarView > renders consent link 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+          d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20"
         />
       </svg>
     </div>
@@ -81,7 +81,7 @@ exports[`RoomStatusBarView > renders consent link 1`] = `
         class="container"
       >
         <p
-          class="_typography_6v6n8_153 _font-body-md-semibold_6v6n8_55"
+          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 title"
           id="_r_2_"
         >
           You can't send any messages until you review and agree to our terms and conditions.
@@ -92,8 +92,8 @@ exports[`RoomStatusBarView > renders consent link 1`] = `
       class="actions"
     >
       <a
-        class="_button_13vu4_8"
+        class="_button_13vu4_8 primaryAction"
-        data-kind="secondary"
+        data-kind="primary"
         data-size="sm"
         href="#example"
         rel="noreferrer noopener"
@@ -128,7 +128,7 @@ exports[`RoomStatusBarView > renders local room error 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+          d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20"
         />
       </svg>
     </div>
@@ -136,7 +136,7 @@ exports[`RoomStatusBarView > renders local room error 1`] = `
       class="content"
     >
       <p
-        class="_typography_6v6n8_153 _font-body-md-semibold_6v6n8_55 container"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 title"
         id="_r_6_"
       >
         Could not start a chat with this user
@@ -146,8 +146,8 @@ exports[`RoomStatusBarView > renders local room error 1`] = `
       class="actions"
     >
       <button
-        class="_button_13vu4_8 container _has-icon_13vu4_60"
+        class="_button_13vu4_8 primaryAction _has-icon_13vu4_60"
-        data-kind="secondary"
+        data-kind="primary"
         data-size="sm"
         role="button"
         tabindex="0"
@@ -191,7 +191,7 @@ exports[`RoomStatusBarView > renders resource limit error 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+          d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20"
         />
       </svg>
     </div>
@@ -202,13 +202,13 @@ exports[`RoomStatusBarView > renders resource limit error 1`] = `
         class="container"
       >
         <p
-          class="_typography_6v6n8_153 _font-body-md-semibold_6v6n8_55"
+          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 title"
           id="_r_1_"
         >
           Your message wasn't sent because this homeserver has been blocked by its administrator.
         </p>
         <p
-          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 description"
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 description"
         >
           Please contact your service administrator to continue using the service.
         </p>
@@ -254,7 +254,7 @@ exports[`RoomStatusBarView > renders unsent messages 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+          d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20"
         />
       </svg>
     </div>
@@ -265,13 +265,13 @@ exports[`RoomStatusBarView > renders unsent messages 1`] = `
         class="container"
       >
         <p
-          class="_typography_6v6n8_153 _font-body-md-semibold_6v6n8_55"
+          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 title"
           id="_r_3_"
         >
           Some of your messages have not been sent
         </p>
         <p
-          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 description"
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 description"
         >
           You can select all or individual messages to retry or delete
         </p>
@@ -282,7 +282,7 @@ exports[`RoomStatusBarView > renders unsent messages 1`] = `
     >
       <button
         aria-disabled="false"
-        class="_button_13vu4_8 _has-icon_13vu4_60 _destructive_13vu4_110"
+        class="_button_13vu4_8 secondaryAction _has-icon_13vu4_60"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -304,8 +304,8 @@ exports[`RoomStatusBarView > renders unsent messages 1`] = `
       </button>
       <button
         aria-disabled="false"
-        class="_button_13vu4_8 container _has-icon_13vu4_60"
+        class="_button_13vu4_8 primaryAction _has-icon_13vu4_60"
-        data-kind="secondary"
+        data-kind="primary"
         data-size="sm"
         role="button"
         tabindex="0"
@@ -349,7 +349,7 @@ exports[`RoomStatusBarView > renders unsent messages and deletes all 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+          d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20"
         />
       </svg>
     </div>
@@ -360,13 +360,13 @@ exports[`RoomStatusBarView > renders unsent messages and deletes all 1`] = `
         class="container"
       >
         <p
-          class="_typography_6v6n8_153 _font-body-md-semibold_6v6n8_55"
+          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 title"
           id="_r_4_"
         >
           Some of your messages have not been sent
         </p>
         <p
-          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 description"
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 description"
         >
           You can select all or individual messages to retry or delete
         </p>
@@ -377,7 +377,7 @@ exports[`RoomStatusBarView > renders unsent messages and deletes all 1`] = `
     >
       <button
         aria-disabled="false"
-        class="_button_13vu4_8 _has-icon_13vu4_60 _destructive_13vu4_110"
+        class="_button_13vu4_8 secondaryAction _has-icon_13vu4_60"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -399,8 +399,8 @@ exports[`RoomStatusBarView > renders unsent messages and deletes all 1`] = `
       </button>
       <button
         aria-disabled="false"
-        class="_button_13vu4_8 container _has-icon_13vu4_60"
+        class="_button_13vu4_8 primaryAction _has-icon_13vu4_60"
-        data-kind="secondary"
+        data-kind="primary"
         data-size="sm"
         role="button"
         tabindex="0"
@@ -444,7 +444,7 @@ exports[`RoomStatusBarView > renders unsent messages and resends all 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+          d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20"
         />
       </svg>
     </div>
@@ -455,13 +455,13 @@ exports[`RoomStatusBarView > renders unsent messages and resends all 1`] = `
         class="container"
       >
         <p
-          class="_typography_6v6n8_153 _font-body-md-semibold_6v6n8_55"
+          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 title"
           id="_r_5_"
         >
           Some of your messages have not been sent
         </p>
         <p
-          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 description"
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 description"
         >
           You can select all or individual messages to retry or delete
         </p>
@@ -472,7 +472,7 @@ exports[`RoomStatusBarView > renders unsent messages and resends all 1`] = `
     >
       <button
         aria-disabled="false"
-        class="_button_13vu4_8 _has-icon_13vu4_60 _destructive_13vu4_110"
+        class="_button_13vu4_8 secondaryAction _has-icon_13vu4_60"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -494,8 +494,8 @@ exports[`RoomStatusBarView > renders unsent messages and resends all 1`] = `
       </button>
       <button
         aria-disabled="false"
-        class="_button_13vu4_8 container _has-icon_13vu4_60"
+        class="_button_13vu4_8 primaryAction _has-icon_13vu4_60"
-        data-kind="secondary"
+        data-kind="primary"
         data-size="sm"
         role="button"
         tabindex="0"

pnpm-lock.yaml

@@ -19,8 +19,8 @@ catalogs:
       specifier: 1.58.2
       version: 1.58.2
     '@vector-im/compound-design-tokens':
-      specifier: 6.9.0
+      specifier: 6.10.0
-      version: 6.9.0
+      version: 6.10.0
     '@vector-im/compound-web':
       specifier: 8.3.6
       version: 8.3.6
@@ -172,10 +172,10 @@ importers:
         version: 1.0.2
       '@vector-im/compound-design-tokens':
         specifier: 'catalog:'
-        version: 6.9.0(@types/react@19.2.10)(react@19.2.4)
+        version: 6.10.0(@types/react@19.2.10)(react@19.2.4)
       '@vector-im/compound-web':
         specifier: 'catalog:'
-        version: 8.3.6(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(@vector-im/compound-design-tokens@6.9.0(@types/react@19.2.10)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 8.3.6(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(@vector-im/compound-design-tokens@6.10.0(@types/react@19.2.10)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@vector-im/matrix-wysiwyg':
         specifier: 2.40.0
         version: 2.40.0(patch_hash=7bdf6150f2905bc2f055a6bcaa7b9d78fa7ffde82e800bcc454ac7b0096bd65e)(react@19.2.4)
@@ -770,7 +770,7 @@ importers:
         version: 1.16.0
       '@vector-im/compound-design-tokens':
         specifier: 'catalog:'
-        version: 6.9.0(@types/react@19.2.10)(react@19.2.4)
+        version: 6.10.0(@types/react@19.2.10)(react@19.2.4)
       classnames:
         specifier: ^2.5.1
         version: 2.5.1
@@ -861,7 +861,7 @@ importers:
         version: 8.55.0(eslint@8.57.1)(typescript@5.9.3)
       '@vector-im/compound-web':
         specifier: 'catalog:'
-        version: 8.3.6(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(@vector-im/compound-design-tokens@6.9.0(@types/react@19.2.10)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 8.3.6(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(@vector-im/compound-design-tokens@6.10.0(@types/react@19.2.10)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@vitejs/plugin-react':
         specifier: ^5.1.2
         version: 5.1.4(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
@@ -4605,8 +4605,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@vector-im/compound-design-tokens@6.9.0':
+  '@vector-im/compound-design-tokens@6.10.0':
-    resolution: {integrity: sha512-LFmJW77wdV/b8ii/R2nrpge4ewtM/tSC3krDGFhENVNgYqbKUz00adZhKXAufJANxzGdAd4PsiFGa16YRlVLrQ==}
+    resolution: {integrity: sha512-2dg0Rv1J5xlPNfUW5EX6wIMUmTlkqScmXKxytKwfIPrVZzMTgpbktblU1dU8KcNJ6ga+a6SzpR7bPNu8tOOTbQ==}
     peerDependencies:
       '@types/react': ^19.2.10
       react: ^17 || ^18 || ^19.0.0
@@ -14853,12 +14853,12 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
     optional: true
 
-  '@vector-im/compound-design-tokens@6.9.0(@types/react@19.2.10)(react@19.2.4)':
+  '@vector-im/compound-design-tokens@6.10.0(@types/react@19.2.10)(react@19.2.4)':
     optionalDependencies:
       '@types/react': 19.2.10
       react: 19.2.4
 
-  '@vector-im/compound-web@8.3.6(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(@vector-im/compound-design-tokens@6.9.0(@types/react@19.2.10)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@vector-im/compound-web@8.3.6(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(@vector-im/compound-design-tokens@6.10.0(@types/react@19.2.10)(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
     dependencies:
       '@floating-ui/react': 0.27.17(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@fontsource/inconsolata': 5.2.8
@@ -14869,7 +14869,7 @@ snapshots:
       '@radix-ui/react-progress': 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@radix-ui/react-separator': 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@radix-ui/react-slot': 1.2.4(@types/react@19.2.10)(react@19.2.4)
-      '@vector-im/compound-design-tokens': 6.9.0(@types/react@19.2.10)(react@19.2.4)
+      '@vector-im/compound-design-tokens': 6.10.0(@types/react@19.2.10)(react@19.2.4)
       classnames: 2.5.1
       react: 19.2.4
       vaul: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.10))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)

pnpm-workspace.yaml

@@ -18,7 +18,7 @@ catalog:
     # Module API
     "@element-hq/element-web-module-api": 1.9.1
     # Compound
-    "@vector-im/compound-design-tokens": 6.9.0
+    "@vector-im/compound-design-tokens": 6.10.0
     "@vector-im/compound-web": 8.3.6
     # i18n
     matrix-web-i18n: 3.6.0