Merge branch 'livekit' into michaelk/various_testid_tags

2026-08-05 19:59:20 +00:00 · 2023-09-05 10:35:35 +01:00
parent a3535dd465 3331a23373
commit 56695804bf
49 changed files with 3336 additions and 2533 deletions
--- 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 {
--- 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);
 }
--- 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;
--- 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);
 }
--- 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 {
--- 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;
 }

--- 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);
 }
--- 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);
 }
--- a/src/Menu.tsx
+++ b/src/Menu.tsx
@@ -25,7 +25,7 @@ import { Node } from "@react-types/shared";
 import styles from "./Menu.module.css";

 interface MenuProps<T> extends AriaMenuOptions<T> {
-  className?: String;
+  className?: string;
  onClose: () => void;
  onAction: (value: Key) => void;
  label?: string;
--- 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;
--- 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;
--- 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 {
--- 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;
 }
--- 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,8 @@ limitations under the License.
 }

 .toolbarButton:disabled {
-  opacity: 0.55;
+  background-color: var(--cpd-color-bg-action-primary-disabled);
+  box-shadow: none;
 }

 .toolbarButton,
@@ -70,72 +71,76 @@ limitations under the License.
  width: 50px;
  height: 50px;
  border-radius: 50px;
-  background-color: var(--system);
-}
-
-.toolbarButton:hover,
-.toolbarButtonSecondary:hover {
-  background-color: var(--quinary-content);
+  background-color: var(--cpd-color-bg-canvas-default);
+  color: var(--cpd-color-icon-primary);
+  border: 1px solid var(--cpd-color-gray-400);
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
 }

 .toolbarButton.on,
 .toolbarButton.off {
-  background-color: var(--primary-content);
+  background-color: var(--cpd-color-bg-action-primary-rest);
+  color: var(--cpd-color-icon-on-solid-primary);
 }

 .toolbarButtonSecondary.on {
-  background-color: var(--accent);
+  background-color: var(--cpd-color-text-success-primary);
+}
+
+.toolbarButton:active,
+.toolbarButtonSecondary:active {
+  background-color: var(--cpd-color-bg-subtle-primary);
+  border: none;
+  box-shadow: none;
+}
+
+.toolbarButton.on:active,
+.toolbarButton.off:active {
+  background-color: var(--cpd-color-bg-action-primary-pressed);
 }

 .iconButton:not(.stroke) svg * {
-  fill: var(--primary-content);
+  fill: var(--cpd-color-bg-action-primary-rest);
 }

-.iconButton:not(.stroke):hover svg * {
-  fill: var(--accent);
+.iconButton:not(.stroke):tertiary svg * {
+  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,
-.hangupButton:hover {
-  background-color: var(--alert);
+.hangupButton {
+  background-color: var(--cpd-color-bg-critical-primary);
+  border-color: var(--cpd-color-border-critical-subtle);
+  color: var(--stopgap-color-on-solid-accent);
 }

-.toolbarButton.on svg * {
-  fill: var(--accent);
-}
-
-.toolbarButton.off svg * {
-  fill: #21262c;
-}
-
-.toolbarButtonSecondary.on svg * {
-  fill: var(--primary-content);
+.hangupButton:active {
+  background-color: var(--cpd-color-bg-critical-pressed);
 }

 .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 +163,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 +177,28 @@ 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);
-}
-
-.iconCopyButton:hover svg * {
-  fill: var(--accent);
+  fill: var(--cpd-color-icon-secondary);
 }

 .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:active,
 .dropdownButton.on {
-  background-color: var(--quinary-content);
+  background-color: var(--cpd-color-bg-action-secondary-pressed);
 }

 .dropdownButton svg {
@@ -205,7 +206,7 @@ limitations under the License.
 }

 .dropdownButton svg * {
-  fill: var(--primary-content);
+  fill: var(--cpd-color-icon-primary);
 }

 .lg {
@@ -215,6 +216,36 @@ limitations under the License.
 .linkButton {
  background-color: transparent;
  border: none;
-  color: var(--accent);
+  color: var(--cpd-color-text-action-accent);
  cursor: pointer;
 }
+
+@media (hover: hover) {
+  .toolbarButton:hover,
+  .toolbarButtonSecondary:hover {
+    background-color: var(--cpd-color-bg-subtle-primary);
+    border: none;
+    box-shadow: none;
+  }
+
+  .toolbarButton.on:hover,
+  .toolbarButton.off:hover {
+    background-color: var(--cpd-color-bg-action-primary-hovered);
+  }
+
+  .iconButton:not(.stroke):hover svg * {
+    fill: var(--cpd-color-icon-accent-tertiary);
+  }
+
+  .hangupButton:hover {
+    background-color: var(--cpd-color-bg-critical-hovered);
+  }
+
+  .iconCopyButton:hover svg * {
+    fill: var(--cpd-color-icon-accent-tertiary);
+  }
+
+  .dropdownButton:hover {
+    background-color: var(--cpd-color-bg-action-secondary-hovered);
+  }
+}
--- a/src/button/Button.tsx
+++ b/src/button/Button.tsx
@@ -19,17 +19,18 @@ import classNames from "classnames";
 import { useButton } from "@react-aria/button";
 import { mergeProps, useObjectRef } from "@react-aria/utils";
 import { useTranslation } from "react-i18next";
+import { Tooltip } from "@vector-im/compound-web";
+import { ReactComponent as MicOnSolidIcon } from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg";
+import { ReactComponent as MicOffSolidIcon } from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg";
+import { ReactComponent as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call.svg";
+import { ReactComponent as VideoCallOffIcon } from "@vector-im/compound-design-tokens/icons/video-call-off.svg";
+import { ReactComponent as EndCallIcon } from "@vector-im/compound-design-tokens/icons/end-call.svg";
+import { ReactComponent as ShareScreenSolidIcon } from "@vector-im/compound-design-tokens/icons/share-screen-solid.svg";
+import { ReactComponent as SettingsSolidIcon } from "@vector-im/compound-design-tokens/icons/settings-solid.svg";
+import { ReactComponent as UserAddSolidIcon } from "@vector-im/compound-design-tokens/icons/user-add-solid.svg";
+import { ReactComponent as ChevronDownIcon } from "@vector-im/compound-design-tokens/icons/chevron-down.svg";

 import styles from "./Button.module.css";
-import { ReactComponent as MicIcon } from "../icons/Mic.svg";
-import { ReactComponent as MuteMicIcon } from "../icons/MuteMic.svg";
-import { ReactComponent as VideoIcon } from "../icons/Video.svg";
-import { ReactComponent as DisableVideoIcon } from "../icons/DisableVideo.svg";
-import { ReactComponent as HangupIcon } from "../icons/Hangup.svg";
-import { ReactComponent as ScreenshareIcon } from "../icons/Screenshare.svg";
-import { ReactComponent as SettingsIcon } from "../icons/Settings.svg";
-import { ReactComponent as AddUserIcon } from "../icons/AddUser.svg";
-import { ReactComponent as ArrowDownIcon } from "../icons/ArrowDown.svg";
 import { ReactComponent as Fullscreen } from "../icons/Fullscreen.svg";
 import { ReactComponent as FullscreenExit } from "../icons/FullscreenExit.svg";
 import { TooltipTrigger } from "../Tooltip";
@@ -129,7 +130,7 @@ export const Button = forwardRef<HTMLButtonElement, Props>(
      >
        <>
          {children}
-          {variant === "dropdown" && <ArrowDownIcon />}
+          {variant === "dropdown" && <ChevronDownIcon />}
        </>
      </button>
    );
@@ -147,13 +148,11 @@ export function MicButton({
  const { t } = useTranslation();

  return (
-    <TooltipTrigger
-      tooltip={() => (muted ? t("Unmute microphone") : t("Mute microphone"))}
-    >
-      <Button variant="toolbar" {...rest} off={muted}>
-        {muted ? <MuteMicIcon /> : <MicIcon />}
+    <Tooltip label={muted ? t("Microphone off") : t("Microphone on")}>
+      <Button variant="toolbar" {...rest} on={!muted}>
+        {muted ? <MicOffSolidIcon /> : <MicOnSolidIcon />}
      </Button>
-    </TooltipTrigger>
+    </Tooltip>
  );
 }

@@ -168,13 +167,11 @@ export function VideoButton({
  const { t } = useTranslation();

  return (
-    <TooltipTrigger
-      tooltip={() => (muted ? t("Turn on camera") : t("Turn off camera"))}
-    >
-      <Button variant="toolbar" {...rest} off={muted}>
-        {muted ? <DisableVideoIcon /> : <VideoIcon />}
+    <Tooltip label={muted ? t("Video off") : t("Video on")}>
+      <Button variant="toolbar" {...rest} on={!muted}>
+        {muted ? <VideoCallOffIcon /> : <VideoCallIcon />}
      </Button>
-    </TooltipTrigger>
+    </Tooltip>
  );
 }

@@ -191,13 +188,11 @@ export function ScreenshareButton({
  const { t } = useTranslation();

  return (
-    <TooltipTrigger
-      tooltip={() => (enabled ? t("Stop sharing screen") : t("Share screen"))}
-    >
-      <Button variant="toolbarSecondary" {...rest} on={enabled}>
-        <ScreenshareIcon />
+    <Tooltip label={enabled ? t("Sharing screen") : t("Share screen")}>
+      <Button variant="toolbar" {...rest} on={enabled}>
+        <ShareScreenSolidIcon />
      </Button>
-    </TooltipTrigger>
+    </Tooltip>
  );
 }

@@ -210,18 +205,17 @@ export function HangupButton({
  [index: string]: unknown;
 }) {
  const { t } = useTranslation();
-  const tooltip = useCallback(() => t("Leave"), [t]);

  return (
-    <TooltipTrigger tooltip={tooltip}>
+    <Tooltip label={t("End call")}>
      <Button
        variant="toolbar"
        className={classNames(styles.hangupButton, className)}
        {...rest}
      >
-        <HangupIcon />
+        <EndCallIcon />
      </Button>
-    </TooltipTrigger>
+    </Tooltip>
  );
 }

@@ -234,14 +228,13 @@ export function SettingsButton({
  [index: string]: unknown;
 }) {
  const { t } = useTranslation();
-  const tooltip = useCallback(() => t("Settings"), [t]);

  return (
-    <TooltipTrigger tooltip={tooltip}>
+    <Tooltip label={t("Settings")}>
      <Button variant="toolbar" {...rest}>
-        <SettingsIcon width={20} height={20} />
+        <SettingsSolidIcon />
      </Button>
-    </TooltipTrigger>
+    </Tooltip>
  );
 }

@@ -256,14 +249,13 @@ export function InviteButton({
  [index: string]: unknown;
 }) {
  const { t } = useTranslation();
-  const tooltip = useCallback(() => t("Invite"), [t]);

  return (
-    <TooltipTrigger tooltip={tooltip}>
+    <Tooltip label={t("Invite")}>
      <Button variant={variant} {...rest}>
-        <AddUserIcon />
+        <UserAddSolidIcon />
      </Button>
-    </TooltipTrigger>
+    </Tooltip>
  );
 }

--- 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;
 }

--- 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);
 }
--- 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);
 }
--- a/src/index.css
+++ b/src/index.css
@@ -21,6 +21,8 @@ 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";
+@import "@vector-im/compound-web/dist/style.css";

 :root {
  --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
@@ -37,22 +39,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 +133,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 +201,7 @@ p {
 }

 a {
-  color: var(--accent);
+  color: var(--cpd-color-text-action-accent);
  text-decoration: none;
 }

@@ -216,8 +213,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;
--- 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
--- 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;
 }
--- 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 */
 }
--- 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%;
--- 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[],
--- 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;
 }
--- 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;
 }
--- a/src/room/InCallView.module.css
+++ b/src/room/InCallView.module.css
@@ -52,30 +52,23 @@ limitations under the License.
  display: flex;
  justify-content: center;
  align-items: center;
+  gap: 12px;
  padding: var(--footerPadding) 0;
  /* TODO: Un-hardcode these colors */
  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%
  );
 }

-.footer > * {
-  margin-right: 30px;
-}
-
-.footer > :last-child {
-  margin-right: 0px;
-}
-
 .maximised .footer {
  position: absolute;
  width: 100%;
@@ -84,12 +77,16 @@ limitations under the License.

@media (min-height: 300px) {
  .inRoom {
-    --footerPadding: 24px;
+    --footerPadding: 40px;
  }
 }

@media (min-width: 800px) {
  .inRoom {
-    --footerPadding: 32px;
+    --footerPadding: 60px;
+  }
+
+  .footer {
+    gap: 16px;
  }
 }
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -381,19 +381,19 @@ export function InCallView({
    const buttons: JSX.Element[] = [];

    buttons.push(
-      <MicButton
-        key="1"
-        muted={!muteStates.audio.enabled}
-        onPress={toggleMicrophone}
-        disabled={muteStates.audio.setEnabled === null}
-        data-testid="incall_mute"
-      />,
      <VideoButton
        key="2"
        muted={!muteStates.video.enabled}
        onPress={toggleCamera}
        disabled={muteStates.video.setEnabled === null}
        data-testid="incall_videomute"
+      />,
+      <MicButton
+        key="1"
+        muted={!muteStates.audio.enabled}
+        onPress={toggleMicrophone}
+        disabled={muteStates.audio.setEnabled === null}
+        data-testid="incall_mute"
      />
    );

--- 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 > * {
--- a/src/room/VideoPreview.tsx
+++ b/src/room/VideoPreview.tsx
@@ -137,18 +137,18 @@ export const VideoPreview: FC<Props> = ({ matrixInfo, muteStates }) => {
          </div>
        )}
        <div className={styles.previewButtons}>
-          <MicButton
-            muted={!muteStates.audio.enabled}
-            onPress={onAudioPress}
-            disabled={muteStates.audio.setEnabled === null}
-            data-testid="preview_mute"
-          />
          <VideoButton
            muted={!muteStates.video.enabled}
            onPress={onVideoPress}
            disabled={muteStates.video.setEnabled === null}
            data-testid="preview_videomute"
          />
+          <MicButton
+            muted={!muteStates.audio.enabled}
+            onPress={onAudioPress}
+            disabled={muteStates.audio.setEnabled === null}
+            data-testid="preview_mute"
+          />
          <SettingsButton onPress={openSettings} />
        </div>
      </>
--- 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 {
--- a/src/settings/useSetting.ts
+++ b/src/settings/useSetting.ts
@@ -92,7 +92,7 @@ export const useOptInAnalytics = (): DisableableSetting<boolean | null> => {
 export const useEnableE2EE = (): DisableableSetting<boolean | null> => {
  const settingVal = useSetting<boolean | null>(
    "enable-end-to-end-encryption",
-    false
+    true
  );
  if (isE2EESupported()) return settingVal;

--- 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 {
--- 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 {
--- 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;
--- 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;