From aa628cc63c503745984b5c338603cb397dada711 Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Mon, 28 Aug 2023 16:45:17 -0400
Subject: [PATCH 1/6] Adopt the Compound color system

As a first step towards adopting the Compound design system and the new Element Call designs, this pulls in Compound's color tokens and applies them to all existing components. I've tried to choose tokens based on the semantics of where they're used, but in some cases, where the new and old design systems differ in semantics, it was necessary to choose tokens based on their resulting color. These hacks can be removed as we implement more of the new designs.

There were a set of environment variables that we used for custom themes, but Compound has way too many design tokens for that approach to still be a good idea, so I decided to replace them all with a single environment variable that just lets you write arbitrary custom CSS.
---
 .env.example                                  |  23 ++--
 package.json                                  |   1 +
 public/index.html                             |   2 +-
 src/Avatar.module.css                         |   4 +-
 src/Banner.module.css                         |   2 +-
 src/DisconnectedBanner.module.css             |   2 +-
 src/E2EELock.module.css                       |   2 +-
 src/Facepile.module.css                       |   2 +-
 src/Header.module.css                         |  32 +----
 src/ListBox.module.css                        |  10 +-
 src/Menu.module.css                           |  10 +-
 src/Modal.module.css                          |   2 +-
 src/Tooltip.module.css                        |   4 +-
 src/UserMenu.module.css                       |   2 +-
 src/auth/LoginPage.module.css                 |   2 +-
 src/button/Button.module.css                  |  87 ++++++++-----
 src/home/CallList.module.css                  |   4 +-
 src/home/RegisteredView.module.css            |   2 +-
 src/home/UnauthenticatedView.module.css       |   2 +-
 src/index.css                                 |  38 +++---
 src/initializer.tsx                           |  60 +--------
 src/input/AvatarInputField.module.css         |   4 +-
 src/input/Input.module.css                    |  34 ++---
 src/input/SelectInput.module.css              |   6 +-
 src/popover/Popover.module.css                |   2 +-
 src/room/GroupCallInspector.module.css        |   6 +-
 src/room/InCallView.module.css                |  16 +--
 src/room/VideoPreview.module.css              |   6 +-
 src/settings/SettingsModal.module.css         |   2 +-
 src/tabs/Tabs.module.css                      |  10 +-
 src/typography/Typography.module.css          |   4 +-
 src/video-grid/VideoTile.module.css           |  18 +--
 .../VideoTileSettingsModal.module.css         |   4 +-
 yarn.lock                                     | 119 +++++++++++++++++-
 34 files changed, 288 insertions(+), 236 deletions(-)

diff --git a/.env.example b/.env.example
index 4180a830..57e2f8d5 100644
--- a/.env.example
+++ b/.env.example
@@ -10,19 +10,10 @@ LIVEKIT_SECRET="secret"
 # Used for determining the homeserver to use for short urls etc.
 # VITE_FALLBACK_STUN_ALLOWED=false
 
-# VITE_CUSTOM_THEME=true
-# VITE_THEME_ACCENT=#0dbd8b
-# VITE_THEME_ACCENT_20=#0dbd8b33
-# VITE_THEME_ALERT=#ff5b55
-# VITE_THEME_ALERT_20=#ff5b5533
-# VITE_THEME_LINKS=#0086e6
-# VITE_THEME_PRIMARY_CONTENT=#ffffff
-# VITE_THEME_SECONDARY_CONTENT=#a9b2bc
-# VITE_THEME_TERTIARY_CONTENT=#8e99a4
-# VITE_THEME_TERTIARY_CONTENT_20=#8e99a433
-# VITE_THEME_QUATERNARY_CONTENT=#6f7882
-# VITE_THEME_QUINARY_CONTENT=#394049
-# VITE_THEME_SYSTEM=#21262c
-# VITE_THEME_BACKGROUND=#15191e
-# VITE_THEME_BACKGROUND_85=#15191ed9
-# VITE_THEME_SUBTLE_PRIMARY=#26282D
+# CSS to be injected into the page for the purpose of custom theming.
+# Generally, writing a custom theme involves overriding Compound design tokens,
+# which are documented here:
+# https://compound.element.io/?path=/docs/foundations-design-tokens--docs
+# https://compound.element.io/?path=/docs/tokens-color-palettes--docs
+# https://compound.element.io/?path=/docs/tokens-semantic-colors--docs
+# VITE_CUSTOM_CSS=".cpd-theme-dark.cpd-theme-dark { --cpd-color-theme-bg: #101317; }"
diff --git a/package.json b/package.json
index eff3786d..4c986423 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "@sentry/react": "^6.13.3",
     "@sentry/tracing": "^6.13.3",
     "@use-gesture/react": "^10.2.11",
+    "@vector-im/compound-design-tokens": "^0.0.3",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
     "@vitejs/plugin-react": "^4.0.1",
     "classnames": "^2.3.1",
diff --git a/public/index.html b/public/index.html
index 3f582069..25987410 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,7 +13,7 @@
     </script>
   </head>
 
-  <body>
+  <body class="cpd-theme-dark">
     <div id="root"></div>
   </body>
 </html>
diff --git a/src/Avatar.module.css b/src/Avatar.module.css
index 46fc214e..accff6ae 100644
--- a/src/Avatar.module.css
+++ b/src/Avatar.module.css
@@ -16,7 +16,7 @@ limitations under the License.
 
 .avatar {
   position: relative;
-  color: var(--primary-content);
+  color: var(--stopgap-color-on-solid-accent);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -33,7 +33,7 @@ limitations under the License.
 }
 
 .avatar svg * {
-  fill: var(--primary-content);
+  fill: var(--cpd-color-text-primary);
 }
 
 .avatar span {
diff --git a/src/Banner.module.css b/src/Banner.module.css
index 6acc9418..cd1b5272 100644
--- a/src/Banner.module.css
+++ b/src/Banner.module.css
@@ -18,5 +18,5 @@ limitations under the License.
   flex: 1;
   border-radius: 8px;
   padding: 16px;
-  background-color: var(--subtle-primary);
+  background-color: var(--cpd-color-bg-subtle-primary);
 }
diff --git a/src/DisconnectedBanner.module.css b/src/DisconnectedBanner.module.css
index 5827953d..b5505c50 100644
--- a/src/DisconnectedBanner.module.css
+++ b/src/DisconnectedBanner.module.css
@@ -17,7 +17,7 @@ limitations under the License.
 .banner {
   position: absolute;
   padding: 29px;
-  background-color: var(--quaternary-content);
+  background-color: var(--cpd-color-bg-subtle-primary);
   vertical-align: middle;
   font-size: var(--font-size-body);
   text-align: center;
diff --git a/src/E2EELock.module.css b/src/E2EELock.module.css
index 504ace7b..bdfbbf0d 100644
--- a/src/E2EELock.module.css
+++ b/src/E2EELock.module.css
@@ -24,5 +24,5 @@ limitations under the License.
   margin: 8px;
 
   border-radius: 100%;
-  background-color: var(--subtle-primary);
+  background-color: var(--cpd-color-bg-subtle-primary);
 }
diff --git a/src/Facepile.module.css b/src/Facepile.module.css
index 3b9befe1..0c911658 100644
--- a/src/Facepile.module.css
+++ b/src/Facepile.module.css
@@ -34,7 +34,7 @@ limitations under the License.
 .facepile .avatar {
   position: absolute;
   top: 0;
-  border: 1px solid var(--system);
+  border: 1px solid var(--cpd-color-bg-canvas-default);
 }
 
 .facepile.md .avatar {
diff --git a/src/Header.module.css b/src/Header.module.css
index a5aacc7f..e54edff5 100644
--- a/src/Header.module.css
+++ b/src/Header.module.css
@@ -82,27 +82,6 @@ limitations under the License.
   stroke: white;
 }
 
-.backButton {
-  background: transparent;
-  border: none;
-  display: flex;
-  color: var(--primary-content);
-  cursor: pointer;
-  align-items: center;
-}
-
-.backButton h3 {
-  margin: 0;
-}
-
-.backButton > * {
-  margin-right: 12px;
-}
-
-.backButton > :last-child {
-  margin-right: 0;
-}
-
 .userName {
   font-weight: 600;
   margin-right: 8px;
@@ -111,15 +90,6 @@ limitations under the License.
   flex-shrink: 1;
 }
 
-.signOutButton {
-  background: transparent;
-  border: none;
-  color: rgb(255, 75, 85);
-  cursor: pointer;
-  font-weight: 600;
-  flex-shrink: 0;
-}
-
 .versionMismatchWarning {
   padding-left: 15px;
 }
@@ -134,7 +104,7 @@ limitations under the License.
   mask-image: url("./icons/AlertTriangleFilled.svg");
   mask-repeat: no-repeat;
   mask-size: contain;
-  background-color: var(--alert);
+  background-color: var(--cpd-color-icon-critical-primary);
   padding-right: 5px;
 }
 
diff --git a/src/ListBox.module.css b/src/ListBox.module.css
index 08556689..70da2cd8 100644
--- a/src/ListBox.module.css
+++ b/src/ListBox.module.css
@@ -21,8 +21,8 @@ limitations under the License.
   overflow-y: auto;
   list-style: none;
   background-color: transparent;
-  border: 1px solid var(--quinary-content);
-  background-color: var(--background);
+  border: 1px solid var(--cpd-color-border-interactive-secondary);
+  background-color: var(--cpd-color-bg-canvas-default);
   border-radius: 8px;
 }
 
@@ -31,7 +31,7 @@ limitations under the License.
   align-items: center;
   justify-content: space-between;
   background-color: transparent;
-  color: var(--primary-content);
+  color: var(--cpd-color-text-primary);
   padding: 8px 16px;
   outline: none;
   cursor: pointer;
@@ -44,6 +44,6 @@ limitations under the License.
 }
 
 .option.disabled {
-  color: var(--quaternary-content);
-  background-color: var(--bgColor3);
+  color: var(--cpd-color-text-disabled);
+  background-color: var(--stopgap-bgColor3);
 }
diff --git a/src/Menu.module.css b/src/Menu.module.css
index 43029ada..bca12a8f 100644
--- a/src/Menu.module.css
+++ b/src/Menu.module.css
@@ -27,7 +27,7 @@ limitations under the License.
   display: flex;
   align-items: center;
   padding: 0 12px;
-  color: var(--primary-content);
+  color: var(--cpd-color-text-primary);
   font-size: var(--font-size-body);
   text-overflow: ellipsis;
   overflow: hidden;
@@ -44,7 +44,11 @@ limitations under the License.
 
 .menuItem.focused,
 .menuItem:hover {
-  background-color: var(--quinary-content);
+  background-color: var(--cpd-color-bg-action-secondary-hovered);
+}
+
+.menuItem:active {
+  background-color: var(--cpd-color-bg-action-secondary-pressed);
 }
 
 .menuItem.focused:first-child,
@@ -65,5 +69,5 @@ limitations under the License.
 }
 
 .checkIcon * {
-  stroke: var(--primary-content);
+  stroke: var(--cpd-color-text-primary);
 }
diff --git a/src/Modal.module.css b/src/Modal.module.css
index 5143f8b5..19c2ce72 100644
--- a/src/Modal.module.css
+++ b/src/Modal.module.css
@@ -28,7 +28,7 @@ limitations under the License.
 }
 
 .modal {
-  background: #21262c;
+  background: var(--cpd-color-bg-subtle-secondary);
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
   border-radius: 8px;
   max-width: 90vw;
diff --git a/src/Tooltip.module.css b/src/Tooltip.module.css
index be62ec8d..07219f75 100644
--- a/src/Tooltip.module.css
+++ b/src/Tooltip.module.css
@@ -15,12 +15,12 @@ limitations under the License.
 */
 
 .tooltip {
-  background-color: var(--system);
+  background-color: var(--cpd-color-bg-subtle-secondary);
   flex-direction: row;
   justify-content: center;
   align-items: center;
   padding: 10px;
-  color: var(--primary-content);
+  color: var(--cpd-color-text-primary);
   border-radius: 8px;
   max-width: 135px;
   width: max-content;
diff --git a/src/UserMenu.module.css b/src/UserMenu.module.css
index cc957cc6..d1db1071 100644
--- a/src/UserMenu.module.css
+++ b/src/UserMenu.module.css
@@ -22,7 +22,7 @@ limitations under the License.
 }
 
 .userButton svg * {
-  fill: var(--primary-content);
+  fill: var(--cpd-color-icon-primary);
 }
 
 .avatar {
diff --git a/src/auth/LoginPage.module.css b/src/auth/LoginPage.module.css
index 19c1e18c..91ba8599 100644
--- a/src/auth/LoginPage.module.css
+++ b/src/auth/LoginPage.module.css
@@ -81,7 +81,7 @@ limitations under the License.
 }
 
 .authLinks a {
-  color: var(--accent);
+  color: var(--cpd-color-text-action-accent);
   text-decoration: none;
   font-weight: normal;
 }
diff --git a/src/button/Button.module.css b/src/button/Button.module.css
index cf196d64..dad18902 100644
--- a/src/button/Button.module.css
+++ b/src/button/Button.module.css
@@ -46,8 +46,8 @@ limitations under the License.
 }
 
 .button {
-  color: var(--primary-content);
-  background-color: var(--accent);
+  color: var(--stopgap-color-on-solid-accent);
+  background-color: var(--cpd-color-text-action-accent);
 }
 
 .button:focus,
@@ -62,7 +62,7 @@ limitations under the License.
 }
 
 .toolbarButton:disabled {
-  opacity: 0.55;
+  background-color: var(--cpd-color-bg-action-primary-disabled);
 }
 
 .toolbarButton,
@@ -70,72 +70,89 @@ limitations under the License.
   width: 50px;
   height: 50px;
   border-radius: 50px;
-  background-color: var(--system);
+  background-color: var(--cpd-color-bg-subtle-secondary);
 }
 
 .toolbarButton:hover,
 .toolbarButtonSecondary:hover {
-  background-color: var(--quinary-content);
+  background-color: var(--cpd-color-bg-action-secondary-hovered);
+}
+
+.toolbarButton:active,
+.toolbarButtonSecondary:active {
+  background-color: var(--cpd-color-bg-action-secondary-pressed);
 }
 
 .toolbarButton.on,
 .toolbarButton.off {
-  background-color: var(--primary-content);
+  background-color: var(--cpd-color-bg-action-primary-rest);
 }
 
 .toolbarButtonSecondary.on {
-  background-color: var(--accent);
+  background-color: var(--cpd-color-text-success-primary);
 }
 
 .iconButton:not(.stroke) svg * {
-  fill: var(--primary-content);
+  fill: var(--cpd-color-bg-action-primary-rest);
 }
 
 .iconButton:not(.stroke):hover svg * {
-  fill: var(--accent);
+  fill: var(--cpd-color-icon-accent-tertiary);
 }
 
 .iconButton.on:not(.stroke) svg * {
-  fill: var(--accent);
+  fill: var(--cpd-color-icon-accent-tertiary);
 }
 
 .iconButton.on.stroke svg * {
-  stroke: var(--accent);
+  stroke: var(--cpd-color-icon-accent-tertiary);
+}
+
+.hangupButton {
+  background-color: var(--cpd-color-bg-critical-primary);
 }
 
-.hangupButton,
 .hangupButton:hover {
-  background-color: var(--alert);
+  background-color: var(--cpd-color-bg-critical-hovered);
+}
+
+.toolbarButton.hangupButton svg * {
+  fill: var(--stopgap-color-on-solid-accent);
+}
+
+.toolbarButton svg *,
+.toolbarButtonSecondary svg * {
+  fill: var(--cpd-color-icon-primary);
 }
 
 .toolbarButton.on svg * {
-  fill: var(--accent);
+  fill: var(--cpd-color-icon-accent-tertiary);
 }
 
 .toolbarButton.off svg * {
-  fill: #21262c;
+  fill: var(--cpd-color-icon-on-solid-primary);
 }
 
 .toolbarButtonSecondary.on svg * {
-  fill: var(--primary-content);
+  fill: var(--stopgap-color-on-solid-accent);
 }
 
 .secondary,
 .copyButton {
-  color: var(--accent);
-  border: 2px solid var(--accent);
+  color: var(--cpd-color-text-action-accent);
+  border: 2px solid var(--cpd-color-text-action-accent);
   background-color: transparent;
 }
 
 .secondaryHangup {
-  color: var(--alert);
-  border: 2px solid var(--alert);
+  color: var(--cpd-color-text-critical-primary);
+  border: 2px solid var(--cpd-color-border-critical-primary);
   background-color: transparent;
 }
 
 .copyButton.secondaryCopy {
-  color: var(--primary-content);
-  border-color: var(--primary-content);
+  color: var(--cpd-color-text-primary);
+  border-color: var(--cpd-color-border-interactive-primary);
 }
 
 .copyButton {
@@ -158,12 +175,12 @@ limitations under the License.
 }
 
 .copyButton:not(.on) svg * {
-  fill: var(--accent);
+  fill: var(--cpd-color-icon-accent-tertiary);
 }
 
 .copyButton.on {
   border-color: transparent;
-  background-color: var(--accent);
+  background-color: var(--cpd-color-text-action-accent);
   color: white;
 }
 
@@ -172,32 +189,36 @@ limitations under the License.
 }
 
 .copyButton.secondaryCopy:not(.on) svg * {
-  fill: var(--primary-content);
+  fill: var(--cpd-color-bg-action-primary-rest);
 }
 
 .iconCopyButton svg * {
-  fill: var(--tertiary-content);
+  fill: var(--cpd-color-icon-accent-tertiary);
 }
 
 .iconCopyButton:hover svg * {
-  fill: var(--accent);
+  fill: var(--cpd-color-icon-accent-tertiary);
 }
 
 .iconCopyButton.on svg *,
 .iconCopyButton.on:hover svg * {
   fill: transparent;
-  stroke: var(--accent);
+  stroke: var(--cpd-color-text-action-accent);
 }
 
 .dropdownButton {
-  color: var(--primary-content);
+  color: var(--cpd-color-text-primary);
   padding: 2px 8px;
   border-radius: 8px;
 }
 
-.dropdownButton:hover,
+.dropdownButton:hover {
+  background-color: var(--cpd-color-bg-action-secondary-hovered);
+}
+
+.dropdownButton:active,
 .dropdownButton.on {
-  background-color: var(--quinary-content);
+  background-color: var(--cpd-color-bg-action-secondary-pressed);
 }
 
 .dropdownButton svg {
@@ -205,7 +226,7 @@ limitations under the License.
 }
 
 .dropdownButton svg * {
-  fill: var(--primary-content);
+  fill: var(--cpd-color-icon-primary);
 }
 
 .lg {
@@ -215,6 +236,6 @@ limitations under the License.
 .linkButton {
   background-color: transparent;
   border: none;
-  color: var(--accent);
+  color: var(--cpd-color-text-action-accent);
   cursor: pointer;
 }
diff --git a/src/home/CallList.module.css b/src/home/CallList.module.css
index 0a581e46..d036ce4f 100644
--- a/src/home/CallList.module.css
+++ b/src/home/CallList.module.css
@@ -26,7 +26,7 @@ limitations under the License.
 .callTile {
   height: 95px;
   padding: 12px;
-  background-color: var(--system);
+  background-color: var(--cpd-color-bg-subtle-secondary);
   border-radius: 8px;
   overflow: hidden;
   box-sizing: border-box;
@@ -52,7 +52,7 @@ limitations under the License.
   flex-direction: column;
   flex: 1;
   padding: 0 16px;
-  color: var(--primary-content);
+  color: var(--cpd-color-text-primary);
   min-width: 0;
 }
 
diff --git a/src/home/RegisteredView.module.css b/src/home/RegisteredView.module.css
index a96bd53b..e11e397f 100644
--- a/src/home/RegisteredView.module.css
+++ b/src/home/RegisteredView.module.css
@@ -39,5 +39,5 @@ limitations under the License.
 }
 
 .notice {
-  color: var(--secondary-content);
+  color: var(--cpd-color-text-secondary);
 }
diff --git a/src/home/UnauthenticatedView.module.css b/src/home/UnauthenticatedView.module.css
index 49c272bf..277004d8 100644
--- a/src/home/UnauthenticatedView.module.css
+++ b/src/home/UnauthenticatedView.module.css
@@ -47,5 +47,5 @@ limitations under the License.
 }
 
 .notice {
-  color: var(--secondary-content);
+  color: var(--cpd-color-text-secondary);
 }
diff --git a/src/index.css b/src/index.css
index 1f372a1e..83c6c02f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -21,6 +21,7 @@ limitations under the License.
    (to avoid having to maintain a fork of Inter). */
 
 @import "normalize.css/normalize.css";
+@import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css";
 
 :root {
   --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
@@ -37,22 +38,17 @@ limitations under the License.
   --font-size-title: calc(24px * var(--font-scale));
   --font-size-headline: calc(32px * var(--font-scale));
 
-  --accent: #0dbd8b;
-  --accent-20: #0dbd8b33;
-  --alert: #ff5b55;
-  --alert-20: #ff5b5533;
-  --links: #0086e6;
-  --primary-content: #ffffff;
-  --secondary-content: #a9b2bc;
-  --tertiary-content: #8e99a4;
-  --tertiary-content-20: #8e99a433;
-  --quaternary-content: #6f7882;
-  --quinary-content: #394049;
-  --system: #21262c;
-  --background: #15191e;
-  --background-85: rgba(23, 25, 28, 0.85);
-  --bgColor3: #444; /* This isn't found anywhere in the designs or Compound */
-  --subtle-primary: #26282d;
+  --cpd-color-border-accent: var(--cpd-color-green-1100);
+  /* These colors are needed during the transitionary period between the old and
+  new Compound design systems, but should be removed ASAP */
+  --stopgap-color-on-solid-accent: var(--cpd-color-bg-canvas-default);
+  --stopgap-background-85: rgba(255, 255, 255, 0.85);
+  --stopgap-bgColor3: #444;
+}
+
+.cpd-theme-dark {
+  --stopgap-color-on-solid-accent: var(--cpd-color-text-primary);
+  --stopgap-background-85: rgba(16, 19, 23, 0.85);
 }
 
 @font-face {
@@ -136,8 +132,8 @@ limitations under the License.
 }
 
 body {
-  background-color: var(--background);
-  color: var(--primary-content);
+  background-color: var(--cpd-color-bg-canvas-default);
+  color: var(--cpd-color-text-primary);
   color-scheme: dark;
   margin: 0;
   font-family: var(--font-family);
@@ -204,7 +200,7 @@ p {
 }
 
 a {
-  color: var(--accent);
+  color: var(--cpd-color-text-action-accent);
   text-decoration: none;
 }
 
@@ -216,8 +212,8 @@ a:active {
 hr {
   width: calc(100% - 24px);
   border: none;
-  border-top: 1px solid var(--quinary-content);
-  color: var(--quaternary-content);
+  border-top: 1px solid var(--cpd-color-border-interactive-secondary);
+  color: var(--cpd-color-border-interactive-secondary);
   overflow: visible;
   text-align: center;
   height: 5px;
diff --git a/src/initializer.tsx b/src/initializer.tsx
index 94d99b43..8e282c37 100644
--- a/src/initializer.tsx
+++ b/src/initializer.tsx
@@ -87,62 +87,10 @@ export class Initializer {
       });
 
     // Custom Themeing
-    if (import.meta.env.VITE_CUSTOM_THEME) {
-      const style = document.documentElement.style;
-      style.setProperty(
-        "--accent",
-        import.meta.env.VITE_THEME_ACCENT as string
-      );
-      style.setProperty(
-        "--accent-20",
-        import.meta.env.VITE_THEME_ACCENT_20 as string
-      );
-      style.setProperty("--alert", import.meta.env.VITE_THEME_ALERT as string);
-      style.setProperty(
-        "--alert-20",
-        import.meta.env.VITE_THEME_ALERT_20 as string
-      );
-      style.setProperty("--links", import.meta.env.VITE_THEME_LINKS as string);
-      style.setProperty(
-        "--primary-content",
-        import.meta.env.VITE_THEME_PRIMARY_CONTENT as string
-      );
-      style.setProperty(
-        "--secondary-content",
-        import.meta.env.VITE_THEME_SECONDARY_CONTENT as string
-      );
-      style.setProperty(
-        "--tertiary-content",
-        import.meta.env.VITE_THEME_TERTIARY_CONTENT as string
-      );
-      style.setProperty(
-        "--tertiary-content-20",
-        import.meta.env.VITE_THEME_TERTIARY_CONTENT_20 as string
-      );
-      style.setProperty(
-        "--quaternary-content",
-        import.meta.env.VITE_THEME_QUATERNARY_CONTENT as string
-      );
-      style.setProperty(
-        "--quinary-content",
-        import.meta.env.VITE_THEME_QUINARY_CONTENT as string
-      );
-      style.setProperty(
-        "--system",
-        import.meta.env.VITE_THEME_SYSTEM as string
-      );
-      style.setProperty(
-        "--background",
-        import.meta.env.VITE_THEME_BACKGROUND as string
-      );
-      style.setProperty(
-        "--background-85",
-        import.meta.env.VITE_THEME_BACKGROUND_85 as string
-      );
-      style.setProperty(
-        "--subtle-primary",
-        import.meta.env.VITE_THEME_SUBTLE_PRIMARY as string
-      );
+    if (import.meta.env.VITE_CUSTOM_CSS) {
+      const style = document.createElement("style");
+      style.textContent = import.meta.env.VITE_CUSTOM_CSS;
+      document.head.appendChild(style);
     }
 
     // Custom fonts
diff --git a/src/input/AvatarInputField.module.css b/src/input/AvatarInputField.module.css
index 626d1109..49324d06 100644
--- a/src/input/AvatarInputField.module.css
+++ b/src/input/AvatarInputField.module.css
@@ -42,7 +42,7 @@ limitations under the License.
   position: absolute;
   bottom: 11px;
   right: -4px;
-  background-color: var(--quinary-content);
+  background-color: var(--cpd-color-subtle-primary);
   width: 20px;
   height: 20px;
   border-radius: 10px;
@@ -53,7 +53,7 @@ limitations under the License.
 }
 
 .removeButton {
-  color: var(--accent);
+  color: var(--cpd-color-text-action-accent);
   font-size: var(--font-size-caption);
   padding: 6px 0;
 }
diff --git a/src/input/Input.module.css b/src/input/Input.module.css
index 2420cc43..dc1bde19 100644
--- a/src/input/Input.module.css
+++ b/src/input/Input.module.css
@@ -42,7 +42,7 @@ limitations under the License.
 .inputField {
   border-radius: 4px;
   transition: border-color 0.25s;
-  border: 1px solid var(--quinary-content);
+  border: 1px solid var(--cpd-color-border-interactive-primary);
 }
 
 .inputField input,
@@ -52,8 +52,8 @@ limitations under the License.
   border: none;
   border-radius: 4px;
   padding: 12px 9px 10px 9px;
-  color: var(--primary-content);
-  background-color: var(--background);
+  color: var(--cpd-color-text-primary);
+  background-color: var(--cpd-color-bg-canvas-default);
   flex: 1;
   min-width: 0;
 }
@@ -61,7 +61,7 @@ limitations under the License.
 .inputField.disabled input,
 .inputField.disabled textarea,
 .inputField.disabled span {
-  color: var(--quaternary-content);
+  color: var(--cpd-color-text-disabled);
 }
 
 .inputField span {
@@ -81,13 +81,13 @@ limitations under the License.
 .inputField input:placeholder-shown:focus::placeholder,
 .inputField textarea:placeholder-shown:focus::placeholder {
   transition: color 0.25s ease-in 0.1s;
-  color: var(--quaternary-content);
+  color: var(--cpd-color-text-placeholder);
 }
 
 .inputField label {
   transition: font-size 0.25s ease-out 0.1s, color 0.25s ease-out 0.1s,
     top 0.25s ease-out 0.1s, background-color 0.25s ease-out 0.1s;
-  color: var(--tertiary-content);
+  color: var(--cpd-color-text-secondary);
   background-color: transparent;
   font-size: var(--font-size-body);
   position: absolute;
@@ -103,7 +103,7 @@ limitations under the License.
 }
 
 .inputField:focus-within {
-  border-color: var(--links);
+  border-color: var(--cpd-color-text-link-external);
 }
 
 .inputField input:focus,
@@ -117,7 +117,7 @@ limitations under the License.
 .inputField textarea:focus + label,
 .inputField textarea:not(:placeholder-shown) + label,
 .inputField.prefix textarea + label {
-  background-color: var(--system);
+  background-color: var(--cpd-color-bg-canvas-default);
   transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
     top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
   font-size: var(--font-size-micro);
@@ -128,7 +128,7 @@ limitations under the License.
 
 .inputField input:focus + label,
 .inputField textarea:focus + label {
-  color: var(--links);
+  color: var(--cpd-color-border-focused);
 }
 
 .checkboxField {
@@ -169,11 +169,11 @@ limitations under the License.
 
 .checkboxField.disabled,
 .checkboxField.disabled .description {
-  color: var(--quinary-content);
+  color: var(--cpd-color-text-disabled);
 }
 
 .checkboxField.disabled .checkbox {
-  border-color: var(--quinary-content);
+  border-color: var(--cpd-color-border-disabled);
 }
 
 .checkbox svg {
@@ -181,12 +181,12 @@ limitations under the License.
 }
 
 .checkbox svg * {
-  stroke: var(--primary-content);
+  stroke: var(--stopgap-color-on-solid-accent);
 }
 
 .checkboxField input[type="checkbox"]:checked + label > .checkbox {
-  background: var(--accent);
-  border-color: var(--accent);
+  background: var(--cpd-color-text-action-accent);
+  border-color: var(--cpd-color-text-action-accent);
 }
 
 .checkboxField input[type="checkbox"]:checked + label > .checkbox svg {
@@ -194,18 +194,18 @@ limitations under the License.
 }
 
 .checkboxField:focus-within .checkbox {
-  border: 1.5px solid var(--links) !important;
+  border: 1.5px solid var(--cpd-color-text-link-external) !important;
 }
 
 .errorMessage {
   margin: 0;
   font-size: var(--font-size-caption);
-  color: var(--alert);
+  color: var(--cpd-color-text-critical-primary);
   font-weight: 600;
 }
 
 .description {
-  color: var(--secondary-content);
+  color: var(--cpd-color-text-secondary);
   margin-left: 26px;
   width: 100%; /* Ensure that it breaks onto the next row */
 }
diff --git a/src/input/SelectInput.module.css b/src/input/SelectInput.module.css
index 086be826..472537ff 100644
--- a/src/input/SelectInput.module.css
+++ b/src/input/SelectInput.module.css
@@ -31,11 +31,11 @@ limitations under the License.
   align-items: center;
   justify-content: space-between;
   padding: 0 12px;
-  background-color: var(--background);
+  background-color: var(--cpd-color-bg-canvas-default);
   border-radius: 8px;
-  border: 1px solid var(--quinary-content);
+  border: 1px solid var(--cpd-color-border-interactive-primary);
   font-size: var(--font-size-body);
-  color: var(--primary-content);
+  color: var(--cpd-color-text-primary);
   height: 40px;
   max-width: 100%;
   width: 100%;
diff --git a/src/popover/Popover.module.css b/src/popover/Popover.module.css
index 47e8c502..e19d133c 100644
--- a/src/popover/Popover.module.css
+++ b/src/popover/Popover.module.css
@@ -18,7 +18,7 @@ limitations under the License.
   display: flex;
   flex-direction: column;
   width: 194px;
-  background: var(--system);
+  background: var(--cpd-color-bg-subtle-secondary);
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   border-radius: 8px;
 }
diff --git a/src/room/GroupCallInspector.module.css b/src/room/GroupCallInspector.module.css
index 71097214..95d1855f 100644
--- a/src/room/GroupCallInspector.module.css
+++ b/src/room/GroupCallInspector.module.css
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .inspector {
-  background-color: var(--system);
+  background-color: var(--cpd-color-bg-subtle-secondary);
 }
 
 .scrollContainer {
@@ -36,6 +36,6 @@ limitations under the License.
 
 .sequenceDiagramViewer :global(.messageText) {
   font-size: var(--font-size-caption);
-  fill: var(--primary-content) !important;
-  stroke: var(--primary-content) !important;
+  fill: var(--cpd-color-text-primary) !important;
+  stroke: var(--cpd-color-text-primary) !important;
 }
diff --git a/src/room/InCallView.module.css b/src/room/InCallView.module.css
index 0ed59e65..963eec56 100644
--- a/src/room/InCallView.module.css
+++ b/src/room/InCallView.module.css
@@ -57,14 +57,14 @@ limitations under the License.
   background: linear-gradient(
     360deg,
     #15191e 0%,
-    rgba(21, 25, 30, 0.9) 37%,
-    rgba(21, 25, 30, 0.8) 49.68%,
-    rgba(21, 25, 30, 0.7) 56.68%,
-    rgba(21, 25, 30, 0.427397) 72.92%,
-    rgba(21, 25, 30, 0.257534) 81.06%,
-    rgba(21, 25, 30, 0.136986) 87.29%,
-    rgba(21, 25, 30, 0.0658079) 92.4%,
-    rgba(21, 25, 30, 0) 100%
+    rgba(16, 19, 23, 0.9) 37%,
+    rgba(16, 19, 23, 0.8) 49.68%,
+    rgba(16, 19, 23, 0.7) 56.68%,
+    rgba(16, 19, 23, 0.427397) 72.92%,
+    rgba(16, 19, 23, 0.257534) 81.06%,
+    rgba(16, 19, 23, 0.136986) 87.29%,
+    rgba(16, 19, 23, 0.0658079) 92.4%,
+    rgba(16, 19, 23, 0) 100%
   );
 }
 
diff --git a/src/room/VideoPreview.module.css b/src/room/VideoPreview.module.css
index a438b136..aa4ffbb2 100644
--- a/src/room/VideoPreview.module.css
+++ b/src/room/VideoPreview.module.css
@@ -20,7 +20,7 @@ limitations under the License.
   height: 50vh;
   border-radius: 24px;
   overflow: hidden;
-  background-color: var(--bgColor3);
+  background-color: var(--stopgap-bgColor3);
   margin: 20px;
 }
 
@@ -41,7 +41,7 @@ limitations under the License.
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: var(--bgColor3);
+  background-color: var(--stopgap-bgColor3);
 }
 
 .cameraPermissions {
@@ -62,7 +62,7 @@ limitations under the License.
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: rgba(23, 25, 28, 0.9);
+  background-color: var(--stopgap-background-85);
 }
 
 .previewButtons > * {
diff --git a/src/settings/SettingsModal.module.css b/src/settings/SettingsModal.module.css
index 864d7954..692c48ae 100644
--- a/src/settings/SettingsModal.module.css
+++ b/src/settings/SettingsModal.module.css
@@ -20,7 +20,7 @@ limitations under the License.
 }
 
 .settingsModal p {
-  color: var(--secondary-content);
+  color: var(--cpd-color-text-secondary);
 }
 
 .tabContainer {
diff --git a/src/tabs/Tabs.module.css b/src/tabs/Tabs.module.css
index affc2588..dfee8b3a 100644
--- a/src/tabs/Tabs.module.css
+++ b/src/tabs/Tabs.module.css
@@ -44,12 +44,12 @@ limitations under the License.
 }
 
 .tab > * {
-  color: var(--secondary-content);
+  color: var(--cpd-color-text-secondary);
   margin: 0 8px 0 0;
 }
 
 .tab svg * {
-  fill: var(--secondary-content);
+  fill: var(--cpd-color-text-secondary);
 }
 
 .tab > :last-child {
@@ -57,15 +57,15 @@ limitations under the License.
 }
 
 .tab.selected {
-  background-color: var(--accent);
+  background-color: var(--cpd-color-text-action-accent);
 }
 
 .tab.selected * {
-  color: var(--primary-content);
+  color: var(--stopgap-color-on-solid-accent);
 }
 
 .tab.selected svg * {
-  fill: var(--primary-content);
+  fill: var(--stopgap-color-on-solid-accent);
 }
 
 .tab.disabled {
diff --git a/src/typography/Typography.module.css b/src/typography/Typography.module.css
index ec7df469..2b202b2b 100644
--- a/src/typography/Typography.module.css
+++ b/src/typography/Typography.module.css
@@ -37,7 +37,7 @@ limitations under the License.
 }
 
 .link {
-  color: var(--links);
+  color: var(--cpd-color-text-link-external);
 }
 
 .link:hover {
@@ -46,7 +46,7 @@ limitations under the License.
 }
 
 .primary {
-  color: var(--accent);
+  color: var(--cpd-color-text-action-accent);
 }
 
 .overflowEllipsis {
diff --git a/src/video-grid/VideoTile.module.css b/src/video-grid/VideoTile.module.css
index 20849a94..d83c91bb 100644
--- a/src/video-grid/VideoTile.module.css
+++ b/src/video-grid/VideoTile.module.css
@@ -53,7 +53,7 @@ limitations under the License.
   bottom: -1px;
   content: "";
   border-radius: var(--tileRadius);
-  box-shadow: inset 0 0 0 4px var(--accent) !important;
+  box-shadow: inset 0 0 0 4px var(--cpd-color-border-accent) !important;
   opacity: 0;
   transition: opacity ease 0.15s;
 }
@@ -77,8 +77,8 @@ limitations under the License.
   position: absolute;
   height: 24px;
   padding: 0 8px;
-  color: var(--primary-content);
-  background-color: var(--background-85);
+  color: var(--cpd-color-text-primary);
+  background-color: var(--stopgap-background-85);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -95,6 +95,10 @@ limitations under the License.
   margin-right: 4px;
 }
 
+.infoBubble > svg * {
+  fill: var(--cpd-color-icon-primary);
+}
+
 .toolbar {
   position: absolute;
   top: 0;
@@ -103,8 +107,8 @@ limitations under the License.
   width: 100%;
   height: 42px;
 
-  color: var(--primary-content);
-  background-color: var(--background-85);
+  color: var(--cpd-color-text-primary);
+  background-color: var(--stopgap-background-85);
 
   display: flex;
   align-items: center;
@@ -154,7 +158,7 @@ limitations under the License.
 .videoMutedOverlay {
   width: 100%;
   height: 100%;
-  background-color: #21262c;
+  background-color: var(--cpd-color-bg-subtle-secondary);
 }
 
 .presenterLabel {
@@ -162,7 +166,7 @@ limitations under the License.
   top: 20px;
   left: 50%;
   transform: translateX(-50%);
-  background-color: #17191c;
+  background-color: var(--stopgap-background-85);
   border-radius: 4px;
   display: flex;
   justify-content: center;
diff --git a/src/video-grid/VideoTileSettingsModal.module.css b/src/video-grid/VideoTileSettingsModal.module.css
index 29892f37..74106b08 100644
--- a/src/video-grid/VideoTileSettingsModal.module.css
+++ b/src/video-grid/VideoTileSettingsModal.module.css
@@ -40,9 +40,9 @@ limitations under the License.
   appearance: none;
 
   background-color: transparent;
-  --slider-color: var(--quinary-content);
+  --slider-color: var(--cpd-color-bg-subtle-primary);
   --slider-height: 4px;
-  --thumb-color: var(--accent);
+  --thumb-color: var(--cpd-color-text-action-accent);
   --thumb-radius: 100%;
   --thumb-size: 16px;
   --thumb-margin-top: -6px;
diff --git a/yarn.lock b/yarn.lock
index 2e9bfbdc..1deec443 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3838,6 +3838,11 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
   integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==
 
+"@trysound/sax@0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
+  integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
+
 "@types/aria-query@^4.2.0":
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.2.tgz#ed4e0ad92306a704f9fb132a0cfcf77486dbe2bc"
@@ -4095,6 +4100,11 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
 
+"@types/q@^1.5.1":
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"
+  integrity sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==
+
 "@types/qs@^6.9.5":
   version "6.9.7"
   resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
@@ -4355,6 +4365,13 @@
   dependencies:
     "@use-gesture/core" "10.2.16"
 
+"@vector-im/compound-design-tokens@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-0.0.3.tgz#89214c69108a14f5d3e4a73ddc44852862531f2b"
+  integrity sha512-XxmySUvfjD6EuAM7f6lsGIhuv94TFfoEpKxYh+HKn1hPBFcMEKKImu/jK5tnpOv2xuZOSrK0Pm6qMLnxLwOXOw==
+  dependencies:
+    svg2vectordrawable "^2.9.1"
+
 "@vitejs/plugin-basic-ssl@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-1.0.1.tgz#48c46eab21e0730921986ce742563ae83fe7fe34"
@@ -4665,6 +4682,11 @@ abab@^2.0.6:
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
   integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
 
+abs-svg-path@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/abs-svg-path/-/abs-svg-path-0.1.1.tgz#df601c8e8d2ba10d4a76d625e236a9a39c2723bf"
+  integrity sha512-d8XPSGjfyzlXC3Xx891DJRyZfqk5JU0BJrDQcsWomFIV1/BIzPW5HDH5iDdWpqWaav0YVIEzT1RHTwWr0FFshA==
+
 accepts@~1.3.5, accepts@~1.3.8:
   version "1.3.8"
   resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"
@@ -6016,6 +6038,15 @@ co@^4.6.0:
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
   integrity sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==
 
+coa@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.2.tgz#43f6c21151b4ef2bf57187db0d73de229e3e7ec3"
+  integrity sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==
+  dependencies:
+    "@types/q" "^1.5.1"
+    chalk "^2.4.1"
+    q "^1.1.2"
+
 collapse-white-space@^1.0.2:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287"
@@ -6090,7 +6121,7 @@ commander@2, commander@^2.19.0, commander@^2.20.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
-commander@7:
+commander@7, commander@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
   integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
@@ -6462,6 +6493,14 @@ css-select@^5.1.0:
     domutils "^3.0.1"
     nth-check "^2.0.1"
 
+css-tree@^1.1.2, css-tree@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
+  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
+  dependencies:
+    mdn-data "2.0.14"
+    source-map "^0.6.1"
+
 css-what@^6.0.1, css-what@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
@@ -6482,6 +6521,13 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
+csso@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
+  integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==
+  dependencies:
+    css-tree "^1.1.2"
+
 cssom@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36"
@@ -9807,6 +9853,11 @@ is-string@^1.0.5, is-string@^1.0.7:
   dependencies:
     has-tostringtag "^1.0.0"
 
+is-svg-path@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-svg-path/-/is-svg-path-1.0.2.tgz#77ab590c12b3d20348e5c7a13d0040c87784dda0"
+  integrity sha512-Lj4vePmqpPR1ZnRctHv8ltSh1OrSxHkhUkd7wi+VQdcdP15/KvQFyk7LhNuM7ZW0EVbJz8kZLVmL9quLrfq4Kg==
+
 is-symbol@^1.0.2, is-symbol@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c"
@@ -11007,6 +11058,11 @@ mdast-util-to-hast@10.0.1:
     unist-util-position "^3.0.0"
     unist-util-visit "^2.0.0"
 
+mdn-data@2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
+  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
+
 mdurl@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
@@ -11481,6 +11537,13 @@ normalize-range@^0.1.2:
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
   integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
 
+normalize-svg-path@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/normalize-svg-path/-/normalize-svg-path-1.1.0.tgz#0e614eca23c39f0cffe821d6be6cd17e569a766c"
+  integrity sha512-r9KHKG2UUeB5LoTouwDzBy2VxXlHsiM6fyLQvnJa0S5hrhzqElH/CH7TUGhT1fVvIYBIKf3OpY4YJ4CK+iaqHg==
+  dependencies:
+    svg-arc-to-cubic-bezier "^3.0.0"
+
 normalize.css@^8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
@@ -11933,6 +11996,11 @@ parse-json@^5.0.0, parse-json@^5.2.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
+parse-svg-path@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/parse-svg-path/-/parse-svg-path-0.1.2.tgz#7a7ec0d1eb06fa5325c7d3e009b859a09b5d49eb"
+  integrity sha512-JyPSBnkTJ0AI8GGJLfMXvKq42cj5c006fnLz6fXy6zfoVjJizi8BNTpu8on8ziI1cKy9d9DGNuY17Ce7wuejpQ==
+
 parse5-htmlparser2-tree-adapter@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz#23c2cc233bcf09bb7beba8b8a69d46b08c62c2f1"
@@ -12698,6 +12766,11 @@ pure-color@^1.2.0:
   resolved "https://registry.yarnpkg.com/pure-color/-/pure-color-1.3.0.tgz#1fe064fb0ac851f0de61320a8bf796836422f33e"
   integrity sha512-QFADYnsVoBMw1srW7OVKEYjG+MbIa49s54w1MA1EDY6r2r/sTcKKYqRX1f4GYvnXP7eN/Pe9HFcX+hwzmrXRHA==
 
+q@^1.1.2:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+  integrity sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==
+
 qs@6.10.3:
   version "6.10.3"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.3.tgz#d6cde1b2ffca87b5aa57889816c5f81535e22e8e"
@@ -14169,11 +14242,55 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+svg-arc-to-cubic-bezier@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.0.tgz#390c450035ae1c4a0104d90650304c3bc814abe6"
+  integrity sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g==
+
 svg-parser@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
   integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
 
+svg-path-bounds@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/svg-path-bounds/-/svg-path-bounds-1.0.2.tgz#00312f672b08afc432a66ddfbd06db40cec8d0d0"
+  integrity sha512-H4/uAgLWrppIC0kHsb2/dWUYSmb4GE5UqH06uqWBcg6LBjX2fu0A8+JrO2/FJPZiSsNOKZAhyFFgsLTdYUvSqQ==
+  dependencies:
+    abs-svg-path "^0.1.1"
+    is-svg-path "^1.0.1"
+    normalize-svg-path "^1.0.0"
+    parse-svg-path "^0.1.2"
+
+svg2vectordrawable@^2.9.1:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/svg2vectordrawable/-/svg2vectordrawable-2.9.1.tgz#23186ff7ace7038d09c031176dbca04063a97e5d"
+  integrity sha512-7WJIh4SzZLyEJtn45y+f8rREkgBiQMWfb0FoYkXuioywESjDWfbSuP0FQEmIiHP2zOi0oOO8pTG4VkeWJyidWw==
+  dependencies:
+    coa "^2.0.2"
+    mkdirp "^1.0.4"
+    svg-path-bounds "^1.0.1"
+    svgo "^2.8.0"
+    svgpath "^2.5.0"
+
+svgo@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24"
+  integrity sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==
+  dependencies:
+    "@trysound/sax" "0.2.0"
+    commander "^7.2.0"
+    css-select "^4.1.3"
+    css-tree "^1.1.3"
+    csso "^4.2.0"
+    picocolors "^1.0.0"
+    stable "^0.1.8"
+
+svgpath@^2.5.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/svgpath/-/svgpath-2.6.0.tgz#5b160ef3d742b7dfd2d721bf90588d3450d7a90d"
+  integrity sha512-OIWR6bKzXvdXYyO4DK/UWa1VA1JeKq8E+0ug2DG98Y/vOmMpfZNj+TIG988HjfYSqtcy/hFOtZq/n/j5GSESNg==
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"

From d71264a1f24f46da93b4364e044d4f6d7a57baa5 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 30 Aug 2023 08:52:59 +0000
Subject: [PATCH 2/6] Add renovate.json

---
 renovate.json | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 renovate.json

diff --git a/renovate.json b/renovate.json
new file mode 100644
index 00000000..39a2b6e9
--- /dev/null
+++ b/renovate.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:base"
+  ]
+}

From 8ea086a9717beb441a9dad3f02f3eaa555f543cc Mon Sep 17 00:00:00 2001
From: fkwp <fkwp@users.noreply.github.com>
Date: Wed, 30 Aug 2023 11:09:15 +0200
Subject: [PATCH 3/6] disable renoavte for packages we want to monitor
 ourselves

---
 renovate.json | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/renovate.json b/renovate.json
index 39a2b6e9..0e4bf493 100644
--- a/renovate.json
+++ b/renovate.json
@@ -2,5 +2,12 @@
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
   "extends": [
     "config:base"
+  ],
+   "packageRules": [
+   {
+     "description": "Disable renoavte for packages we want to monitor ourselves",
+     "matchPackagePatterns": ["matrix-js-sdk"],
+     "enabled": false
+   }
   ]
 }

From 3aace3e4f621b9673c8405d36adcb747ea3b8749 Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@users.noreply.github.com>
Date: Wed, 30 Aug 2023 14:42:58 +0100
Subject: [PATCH 4/6] Prettier

---
 renovate.json | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/renovate.json b/renovate.json
index 0e4bf493..b0d4979c 100644
--- a/renovate.json
+++ b/renovate.json
@@ -1,13 +1,11 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:base"
-  ],
-   "packageRules": [
-   {
-     "description": "Disable renoavte for packages we want to monitor ourselves",
-     "matchPackagePatterns": ["matrix-js-sdk"],
-     "enabled": false
-   }
+  "extends": ["config:base"],
+  "packageRules": [
+    {
+      "description": "Disable renoavte for packages we want to monitor ourselves",
+      "matchPackagePatterns": ["matrix-js-sdk"],
+      "enabled": false
+    }
   ]
 }

From fcf0ec9b900be62d99517549a815f64d02cd1e61 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 30 Aug 2023 14:00:46 +0000
Subject: [PATCH 5/6] Update dependency posthog-js to v1.57.2 [SECURITY]

---
 yarn.lock | 18 +++---------------
 1 file changed, 3 insertions(+), 15 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 3d4eac37..7b3885b7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3049,11 +3049,6 @@
   resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.28.1.tgz#9018b4c152b475de9bedd267237393d3c9b1253d"
   integrity sha512-DvSplMVrVEmOzR2M161V5+B8Up3vR71xMqJOpWTzE9TqtFJRGPtqT/5OBsNJJw1+/j2ssMcnKwbEo9Q2EGeS6g==
 
-"@sentry/types@^7.2.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.13.0.tgz#398e33e5c92ea0ce91e2c86e3ab003fe00c471a2"
-  integrity sha512-ttckM1XaeyHRLMdr79wmGA5PFbTGx2jio9DCD/mkEpSfk6OGfqfC7gpwy7BNstDH/VKyQj/lDCJPnwvWqARMoQ==
-
 "@sentry/utils@6.19.7":
   version "6.19.7"
   resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-6.19.7.tgz#6edd739f8185fd71afe49cbe351c1bbf5e7b7c79"
@@ -12532,13 +12527,11 @@ postcss@^8.4.23:
     source-map-js "^1.0.2"
 
 posthog-js@^1.29.0:
-  version "1.31.0"
-  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.31.0.tgz#43ffb5a11948a5b10af75e749108936a07519963"
-  integrity sha512-d6vBb/ChS+t33voi37HA76etwWIukEcvJLZLZvkhJZcIrR29shwkAFUzd8lL7VdAelLlaAtmoPMwr820Yq5GUg==
+  version "1.77.2"
+  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.77.2.tgz#c5ecb2dc0b0e732fe05f50920ec22a30e3db4916"
+  integrity sha512-I3l5GipPUFe6qd5/0Bgm8Ot4pF8ysWhNgeLWvk69myh58HREfXACgLSYMZBho6L9xC6OcFvQilpcH+Dj3Y2uIQ==
   dependencies:
-    "@sentry/types" "^7.2.0"
     fflate "^0.4.1"
-    rrweb-snapshot "^1.1.14"
 
 prelude-ls@^1.2.1:
   version "1.2.1"
@@ -13478,11 +13471,6 @@ rollup@^3.21.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
-rrweb-snapshot@^1.1.14:
-  version "1.1.14"
-  resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-1.1.14.tgz#9d4d9be54a28a893373428ee4393ec7e5bd83fcc"
-  integrity sha512-eP5pirNjP5+GewQfcOQY4uBiDnpqxNRc65yKPW0eSoU1XamDfc4M8oqpXGMyUyvLyxFDB0q0+DChuxxiU2FXBQ==
-
 rsvp@^4.8.2:
   version "4.8.5"
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"

From 3a0c895b7a6b77ac5897b159e9ba7f6e787e8bec Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 30 Aug 2023 17:17:45 +0100
Subject: [PATCH 6/6] Fix e2ee audio in Firefox

Pull in changes for livekit and disable RED as per comment.
---
 src/livekit/options.ts |  4 ++-
 yarn.lock              | 59 ++++++++++++++++++++++++++----------------
 2 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/src/livekit/options.ts b/src/livekit/options.ts
index 5115f213..7f9695f1 100644
--- a/src/livekit/options.ts
+++ b/src/livekit/options.ts
@@ -11,7 +11,9 @@ import {
 const defaultLiveKitPublishOptions: TrackPublishDefaults = {
   audioPreset: AudioPresets.music,
   dtx: true,
-  red: true,
+  // disable red because the livekit server strips out red packets for clients
+  // that don't support it (firefox) but of course that doesn't work with e2ee.
+  red: false,
   forceStereo: false,
   simulcast: true,
   videoSimulcastLayers: [VideoPresets.h180, VideoPresets.h360] as VideoPreset[],
diff --git a/yarn.lock b/yarn.lock
index 7b3885b7..0b9ca017 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1528,9 +1528,9 @@
   integrity sha512-GcIY79elgB+azP74j8vqkiXz8xLFfIzbQJdlwOPisgbKT00tviJQuEghOXSMVxJ00HoYJbGswr4kcllUc4xCcg==
 
 "@bufbuild/protobuf@^1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@bufbuild/protobuf/-/protobuf-1.3.0.tgz#69f675c76e6c1ab0b5bde141fa2df8b00927216a"
-  integrity sha512-G372ods0pLt46yxVRsnP/e2btVPuuzArcMPFpIDeIwiGPuuglEs9y75iG0HMvZgncsj5TvbYRWqbVyOe3PLCWQ==
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@bufbuild/protobuf/-/protobuf-1.3.1.tgz#c4de66bacbe7ac97fe054e68314aeba6f45177f9"
+  integrity sha512-BUyJWutgP2S8K/1NphOJokuwDckXS4qI2T1pGZAlkFdZchWae3jm6fCdkcGbLlM1QLOcNFFePd+7Feo4BYGrJQ==
 
 "@colors/colors@1.5.0":
   version "1.5.0"
@@ -1771,17 +1771,25 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@floating-ui/core@^1.2.6":
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.6.tgz#d21ace437cc919cdd8f1640302fa8851e65e75c0"
-  integrity sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg==
+"@floating-ui/core@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.4.1.tgz#0d633f4b76052668afb932492ac452f7ebe97f17"
+  integrity sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==
+  dependencies:
+    "@floating-ui/utils" "^0.1.1"
 
 "@floating-ui/dom@^1.1.0":
-  version "1.2.8"
-  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.2.8.tgz#aee0f6ccc0787ab8fe741487a6e5e95b7b125375"
-  integrity sha512-XLwhYV90MxiHDq6S0rzFZj00fnDM+A1R9jhSioZoMsa7G0Q0i+Q4x40ajR8FHSdYDE1bgjG45mIWe6jtv9UPmg==
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.1.tgz#88b70defd002fe851f17b4a25efb2d3c04d7a8d7"
+  integrity sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==
   dependencies:
-    "@floating-ui/core" "^1.2.6"
+    "@floating-ui/core" "^1.4.1"
+    "@floating-ui/utils" "^0.1.1"
+
+"@floating-ui/utils@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.1.tgz#1a5b1959a528e374e8037c4396c3e825d6cf4a83"
+  integrity sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==
 
 "@formatjs/ecma402-abstract@1.11.4":
   version "1.11.4"
@@ -2202,10 +2210,10 @@
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.3.1.tgz#b50a781709c81e10701004214340f25475a171a0"
   integrity sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw==
 
-"@livekit/components-core@0.6.14":
-  version "0.6.14"
-  resolved "https://registry.yarnpkg.com/@livekit/components-core/-/components-core-0.6.14.tgz#b400a36573aeb6ac94c652c7a5191c72db6e3d63"
-  integrity sha512-fp+beRvVFCZDRvJdRAyTaoJRLFDcQGyFRAKpPitAThvSh8CqXbLMmWZ2CcM2juIH56lN/g8ckVZkYIehizMBng==
+"@livekit/components-core@0.6.15":
+  version "0.6.15"
+  resolved "https://registry.yarnpkg.com/@livekit/components-core/-/components-core-0.6.15.tgz#c64076b3176d51389d100b418c3335705f5a6808"
+  integrity sha512-M+xJT5pkEzldFHoybN6ttS/1tb+sVI1SBrjLTMBKjeNk7F3Y+XF0sbRY/PtoR1CYz+duPh0NV4DBPy8Fvx84sw==
   dependencies:
     "@floating-ui/dom" "^1.1.0"
     email-regex "^5.0.0"
@@ -2214,11 +2222,11 @@
     rxjs "^7.8.0"
 
 "@livekit/components-react@^1.1.0":
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/@livekit/components-react/-/components-react-1.1.4.tgz#00e6535e419f7b05f539ef55d5b19c2295b99f15"
-  integrity sha512-izQomHSmZ422FaeVKhamY0fxIt+gEGaGVbFutiANp+nAQFiV2AurRzkd2mO9m0u9T52GCHlmQ4cKc3Zp5+tfpA==
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/@livekit/components-react/-/components-react-1.1.6.tgz#4e832570bd3fb0c15e36ca7513f736683de62fd4"
+  integrity sha512-wA5wKVsKM4cBskXkTbgQ8UhEWCq7hYn/ElOlm9IsGf0U3KpsXpyiW/h2hd/aDr/ufTbBWYjtPWa8RrvoBImnyg==
   dependencies:
-    "@livekit/components-core" "0.6.14"
+    "@livekit/components-core" "0.6.15"
     "@react-hook/latest" "^1.0.3"
     clsx "^2.0.0"
     usehooks-ts "^2.9.1"
@@ -10751,9 +10759,9 @@ lines-and-columns@^1.1.6:
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
 livekit-client@^1.12.3:
-  version "1.13.1"
-  resolved "https://registry.yarnpkg.com/livekit-client/-/livekit-client-1.13.1.tgz#35e4cfba08b6c12a1dcde21b0d1ffafd99a15179"
-  integrity sha512-KJuin4kZ1bzExnhm6zbosQL1I2cD/kwFyBnYnI8o1w9bJoQJ+rGA3c/9dKWCpeNSGw4urz+i1QPVB2qoetXK5Q==
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/livekit-client/-/livekit-client-1.13.2.tgz#3bc1e280cfc84ba07cf7eb44b388b97cfd96c435"
+  integrity sha512-NERBPqfinaYVg5rO3NdZTwVKavmgsRUi1SGrSJfrNcArExtNSQK7CtktmSZy/J2WjMMJ/iJrYkqJEFvN4CPr7Q==
   dependencies:
     "@bufbuild/protobuf" "^1.3.0"
     events "^3.3.0"
@@ -14630,11 +14638,16 @@ tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0:
+tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
 
+tslib@^2.1.0:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
 tslib@^2.3.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"