Merge remote-tracking branch 'origin/livekit' into dbkr/matrixrtcsession

2023-08-30 17:25:00 +01:00
parent 923f081d74 8a94220d74
commit b5626dd97c
36 changed files with 341 additions and 275 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/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,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;
 }
--- 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,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;
--- 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
@@ -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%
  );
 }

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