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 8e9facdf..69e2bae5 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 @@ - +
diff --git a/renovate.json b/renovate.json new file mode 100644 index 00000000..b0d4979c --- /dev/null +++ b/renovate.json @@ -0,0 +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 + } + ] +} 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/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/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 d3d8d77b..3443b7cc 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" @@ -3049,11 +3057,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" @@ -3839,6 +3842,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" @@ -4096,6 +4104,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" @@ -4356,6 +4369,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" @@ -4666,6 +4686,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" @@ -6022,6 +6047,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" @@ -6096,7 +6130,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== @@ -6468,6 +6502,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" @@ -6488,6 +6530,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" @@ -9813,6 +9862,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" @@ -10705,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" @@ -11013,6 +11067,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" @@ -11487,6 +11546,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" @@ -11939,6 +12005,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" @@ -12464,13 +12535,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" @@ -12704,6 +12773,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" @@ -13405,11 +13479,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" @@ -14175,11 +14244,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" @@ -14525,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"