@stream-io/video-styling 2.0.0-beta.0 → 2.0.0-beta.1

package/src/Embedded/shared/Feedback/CallFeedback-theme.scss

@@ -1,67 +1,45 @@
 .str-video__embedded-call-feedback {
-  background: var(--str-video__base-color4);
-  color: var(--str-video__text-color1);
+  background: var(--str-video__background-core-app);
+  color: var(--str-video__text-primary);
 }
 
 .str-video__embedded-call-feedback__container p {
-  color: var(--str-video__text-color2);
+  color: var(--str-video__text-secondary);
 }
 
 .str-video__embedded-call-feedback__textarea {
-  border-color: var(--str-video__base-color3);
+  border-color: var(--str-video__border-core-default);
 
   &::placeholder {
-    color: var(--str-video__text-color3);
+    color: var(--str-video__text-tertiary);
   }
 
   &:focus {
-    border-color: var(--str-video__base-color2);
+    border-color: var(--str-video__border-utility-focused);
   }
 }
 
 .str-video__embedded-call-feedback__star .str-video__icon {
-  background-color: var(--str-video__text-color3);
+  background-color: var(--str-video__text-tertiary);
 }
 
 .str-video__embedded-call-feedback__star:hover .str-video__icon,
 .str-video__embedded-call-feedback__star--active .str-video__icon {
-  background-color: var(--str-video__button-primary-active);
+  background-color: var(--str-video__accent-primary);
 }
 
 .str-video__embedded-call-feedback__ended-divider {
-  background: var(--str-video__base-color3);
-}
-
-.str-video__embedded-call-feedback__ended-button {
-  color: var(--str-video__text-color1);
-  border-color: var(--str-video__base-color3);
-
-  .str-video__icon {
-    background-color: var(--str-video__text-color1);
-  }
-
-  &:hover {
-    background: var(--str-video__base-color5);
-    border-color: var(--str-video__base-color2);
-  }
-}
-
-.str-video__embedded-call-feedback__actions .str-video__button {
-  background-color: var(--str-video__button-primary-active);
-
-  &:not([disabled]):hover {
-    background-color: var(--str-video__button-primary-hover);
-  }
+  background: var(--str-video__border-core-default);
 }
 
 .str-video__embedded-call-feedback__checkmark {
   background: color-mix(
     in srgb,
-    var(--str-video__alert-success) 15%,
+    var(--str-video__accent-success) 15%,
     transparent
   );
 
   .str-video__icon {
-    background-color: var(--str-video__alert-success);
+    background-color: var(--str-video__accent-success);
   }
 }

package/src/Embedded/shared/Icons.scss

@@ -1,14 +1,7 @@
 :root {
-  --str-video__icon--eye: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDQuNUMxNyA0LjUgMjEuMjcgNy42MSAyMyAxMkMyMS4yNyAxNi4zOSAxNyAxOS41IDEyIDE5LjVDNyAxOS41IDIuNzMgMTYuMzkgMSAxMkMyLjczIDcuNjEgNyA0LjUgMTIgNC41Wk0xMiA2LjVDOS4yNCA2LjUgNyA4Ljc0IDcgMTEuNUM3IDE0LjI2IDkuMjQgMTYuNSAxMiAxNi41QzE0Ljc2IDE2LjUgMTcgMTQuMjYgMTcgMTEuNUMxNyA4Ljc0IDE0Ljc2IDYuNSAxMiA2LjVaTTEyIDguNUMxMy42NiA4LjUgMTUgOS44NCAxNSAxMS41QzE1IDEzLjE2IDEzLjY2IDE0LjUgMTIgMTQuNUMxMC4zNCAxNC41IDkgMTMuMTYgOSAxMS41QzkgOS44NCAxMC4zNCA4LjUgMTIgOC41WiIgZmlsbD0iI0IwQjRCNyIvPgo8L3N2Zz4K');
-  --str-video__icon--blur-icon: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9Ijc2OCIgaGVpZ2h0PSI3NjgiIHZpZXdCb3g9IjAgMCA3NjggNzY4Ij4KPHBhdGggZmlsbD0iIzAwMCIgZD0iTTQ0OC41IDI3MS41cTE5LjUgMCAzMy43NSAxNC4yNXQxNC4yNSAzMy43NS0xNC4yNSAzMy43NS0zMy43NSAxNC4yNS0zMy43NS0xNC4yNS0xNC4yNS0zMy43NSAxNC4yNS0zMy43NSAzMy43NS0xNC4yNXpNNDQ4LjUgNDAwLjVxMTkuNSAwIDMzLjc1IDE0LjI1dDE0LjI1IDMzLjc1LTE0LjI1IDMzLjc1LTMzLjc1IDE0LjI1LTMzLjc1LTE0LjI1LTE0LjI1LTMzLjc1IDE0LjI1LTMzLjc1IDMzLjc1LTE0LjI1ek0zMTkuNSA1NDQuNXExMy41IDAgMjMuMjUgOXQ5Ljc1IDIyLjUtOS43NSAyMi41LTIzLjI1IDktMjIuNS05LTktMjIuNSA5LTIyLjUgMjIuNS05ek0zMTkuNSAyNzEuNXExOS41IDAgMzMuNzUgMTQuMjV0MTQuMjUgMzMuNzUtMTQuMjUgMzMuNzUtMzMuNzUgMTQuMjUtMzMuNzUtMTQuMjUtMTQuMjUtMzMuNzUgMTQuMjUtMzMuNzUgMzMuNzUtMTQuMjV6TTQ0OC41IDY1NS41cTE1IDAgMTUgMTYuNXQtMTUgMTYuNXEtMTYuNSAwLTE2LjUtMTYuNXQxNi41LTE2LjV6TTQ0OC41IDU0NC41cTEzLjUgMCAyMi41IDl0OSAyMi41LTkgMjIuNS0yMi41IDktMjMuMjUtOS05Ljc1LTIyLjUgOS43NS0yMi41IDIzLjI1LTl6TTY3MiA0MzJxMTYuNSAwIDE2LjUgMTYuNSAwIDE1LTE2LjUgMTV0LTE2LjUtMTVxMC0xNi41IDE2LjUtMTYuNXpNNTc2IDE2MC41cTEzLjUgMCAyMi41IDl0OSAyMi41LTkgMjIuNS0yMi41IDktMjIuNS05LTktMjIuNSA5LTIyLjUgMjIuNS05ek01NzYgMjg4cTEzLjUgMCAyMi41IDl0OSAyMi41LTkgMjMuMjUtMjIuNSA5Ljc1LTIyLjUtOS43NS05LTIzLjI1IDktMjIuNSAyMi41LTl6TTU3NiA1NDQuNXExMy41IDAgMjIuNSA5dDkgMjIuNS05IDIyLjUtMjIuNSA5LTIyLjUtOS05LTIyLjUgOS0yMi41IDIyLjUtOXpNNTc2IDQxNS41cTEzLjUgMCAyMi41IDkuNzV0OSAyMy4yNS05IDIyLjUtMjIuNSA5LTIyLjUtOS05LTIyLjUgOS0yMy4yNSAyMi41LTkuNzV6TTMxOS41IDQwMC41cTE5LjUgMCAzMy43NSAxNC4yNXQxNC4yNSAzMy43NS0xNC4yNSAzMy43NS0zMy43NSAxNC4yNS0zMy43NS0xNC4yNS0xNC4yNS0zMy43NSAxNC4yNS0zMy43NSAzMy43NS0xNC4yNXpNMzE5LjUgMjIzLjVxLTEzLjUgMC0yMi41LTl0LTktMjIuNSA5LTIyLjUgMjIuNS05IDIzLjI1IDkgOS43NSAyMi41LTkuNzUgMjIuNS0yMy4yNSA5ek0zMTkuNSAxMTIuNXEtMTUgMC0xNS0xNi41dDE1LTE2LjVxMTYuNSAwIDE2LjUgMTYuNXQtMTYuNSAxNi41ek0zMTkuNSA2NTUuNXExNi41IDAgMTYuNSAxNi41dC0xNi41IDE2LjVxLTE1IDAtMTUtMTYuNXQxNS0xNi41ek05NiA0MzJxMTYuNSAwIDE2LjUgMTYuNSAwIDE1LTE2LjUgMTV0LTE2LjUtMTVxMC0xNi41IDE2LjUtMTYuNXpNNDQ4LjUgMTEyLjVxLTE2LjUgMC0xNi41LTE2LjV0MTYuNS0xNi41cTE1IDAgMTUgMTYuNXQtMTUgMTYuNXpNNDQ4LjUgMjIzLjVxLTEzLjUgMC0yMy4yNS05dC05Ljc1LTIyLjUgOS43NS0yMi41IDIzLjI1LTkgMjIuNSA5IDkgMjIuNS05IDIyLjUtMjIuNSA5ek02NzIgMzM2cS0xNi41IDAtMTYuNS0xNi41IDAtMTUgMTYuNS0xNXQxNi41IDE1cTAgMTYuNS0xNi41IDE2LjV6TTE5MiAxNjAuNXExMy41IDAgMjIuNSA5dDkgMjIuNS05IDIyLjUtMjIuNSA5LTIyLjUtOS05LTIyLjUgOS0yMi41IDIyLjUtOXpNOTYgMzA0LjVxMTYuNSAwIDE2LjUgMTUgMCAxNi41LTE2LjUgMTYuNXQtMTYuNS0xNi41cTAtMTUgMTYuNS0xNXpNMTkyIDI4OHExMy41IDAgMjIuNSA5dDkgMjIuNS05IDIzLjI1LTIyLjUgOS43NS0yMi41LTkuNzUtOS0yMy4yNSA5LTIyLjUgMjIuNS05ek0xOTIgNTQ0LjVxMTMuNSAwIDIyLjUgOXQ5IDIyLjUtOSAyMi41LTIyLjUgOS0yMi41LTktOS0yMi41IDktMjIuNSAyMi41LTl6TTE5MiA0MTUuNXExMy41IDAgMjIuNSA5Ljc1dDkgMjMuMjUtOSAyMi41LTIyLjUgOS0yMi41LTktOS0yMi41IDktMjMuMjUgMjIuNS05Ljc1eiI+PC9wYXRoPgo8L3N2Zz4K');
   --str-video__icon--login: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjMgNy44MDA1OUM5LjkxIDguMTkwNTkgOS45MSA4LjgxMDU5IDEwLjMgOS4yMDA1OUwxMi4yIDExLjEwMDZIM0MyLjQ1IDExLjEwMDYgMiAxMS41NTA2IDIgMTIuMTAwNkMyIDEyLjY1MDYgMi40NSAxMy4xMDA2IDMgMTMuMTAwNkgxMi4yTDEwLjMgMTUuMDAwNkM5LjkxIDE1LjM5MDYgOS45MSAxNi4wMTA2IDEwLjMgMTYuNDAwNkMxMC42OSAxNi43OTA2IDExLjMxIDE2Ljc5MDYgMTEuNyAxNi40MDA2TDE1LjI5IDEyLjgxMDZDMTUuNjggMTIuNDIwNiAxNS42OCAxMS43OTA2IDE1LjI5IDExLjQwMDZMMTEuNyA3LjgwMDU5QzExLjMxIDcuNDEwNTkgMTAuNjkgNy40MTA1OSAxMC4zIDcuODAwNTlaTTIwIDE5LjEwMDZIMTNDMTIuNDUgMTkuMTAwNiAxMiAxOS41NTA2IDEyIDIwLjEwMDZDMTIgMjAuNjUwNiAxMi40NSAyMS4xMDA2IDEzIDIxLjEwMDZIMjBDMjEuMSAyMS4xMDA2IDIyIDIwLjIwMDYgMjIgMTkuMTAwNlY1LjEwMDU5QzIyIDQuMDAwNTkgMjEuMSAzLjEwMDU5IDIwIDMuMTAwNTlIMTNDMTIuNDUgMy4xMDA1OSAxMiAzLjU1MDU5IDEyIDQuMTAwNTlDMTIgNC42NTA1OSAxMi40NSA1LjEwMDU5IDEzIDUuMTAwNTlIMjBWMTkuMTAwNloiIGZpbGw9IiNFM0U0RTUiLz4KPC9zdmc+Cg==');
-  --str-video__icon--participants: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTE2IDExQzE3LjY2IDExIDE4Ljk5IDkuNjYgMTguOTkgOEMxOC45OSA2LjM0IDE3LjY2IDUgMTYgNUMxNC4zNCA1IDEzIDYuMzQgMTMgOEMxMyA5LjY2IDE0LjM0IDExIDE2IDExWk04IDExQzkuNjYgMTEgMTAuOTkgOS42NiAxMC45OSA4QzEwLjk5IDYuMzQgOS42NiA1IDggNUM2LjM0IDUgNSA2LjM0IDUgOEM1IDkuNjYgNi4zNCAxMSA4IDExWk04IDEzQzUuNjcgMTMgMSAxNC4xNyAxIDE2LjVWMThDMSAxOC41NSAxLjQ1IDE5IDIgMTlIMTRDMTQuNTUgMTkgMTUgMTguNTUgMTUgMThWMTYuNUMxNSAxNC4xNyAxMC4zMyAxMyA4IDEzWk0xNiAxM0MxNS43MSAxMyAxNS4zOCAxMy4wMiAxNS4wMyAxMy4wNUMxNS4wNSAxMy4wNiAxNS4wNiAxMy4wOCAxNS4wNyAxMy4wOUMxNi4yMSAxMy45MiAxNyAxNS4wMyAxNyAxNi41VjE4QzE3IDE4LjM1IDE2LjkzIDE4LjY5IDE2LjgyIDE5SDIyQzIyLjU1IDE5IDIzIDE4LjU1IDIzIDE4VjE2LjVDMjMgMTQuMTcgMTguMzMgMTMgMTYgMTNaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==');
-  --str-video__icon--verified: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuMzI1IDEuMDU1MjVMMy40OTE2NyAzLjY0NjkyQzIuODkxNjcgMy45MTM1OCAyLjUgNC41MTM1OCAyLjUgNS4xNzE5MlY5LjA4ODU4QzIuNSAxMy43MTM2IDUuNyAxOC4wMzg2IDEwIDE5LjA4ODZDMTQuMyAxOC4wMzg2IDE3LjUgMTMuNzEzNiAxNy41IDkuMDg4NThWNS4xNzE5MkMxNy41IDQuNTEzNTggMTcuMTA4MyAzLjkxMzU4IDE2LjUwODMgMy42NDY5MkwxMC42NzUgMS4wNTUyNUMxMC4yNSAwLjg2MzU4MiA5Ljc1IDAuODYzNTgyIDkuMzI1IDEuMDU1MjVaTTcuNzQxNjcgMTMuNDk2OUw1LjU4MzMzIDExLjMzODZDNS4yNTgzMyAxMS4wMTM2IDUuMjU4MzMgMTAuNDg4NiA1LjU4MzMzIDEwLjE2MzZDNS45MDgzMyA5LjgzODU4IDYuNDMzMzMgOS44Mzg1OCA2Ljc1ODMzIDEwLjE2MzZMOC4zMzMzMyAxMS43MzAyTDEzLjIzMzMgNi44MzAyNUMxMy41NTgzIDYuNTA1MjUgMTQuMDgzMyA2LjUwNTI1IDE0LjQwODMgNi44MzAyNUMxNC43MzMzIDcuMTU1MjUgMTQuNzMzMyA3LjY4MDI1IDE0LjQwODMgOC4wMDUyNUw4LjkxNjY3IDEzLjQ5NjlDOC42IDEzLjgyMTkgOC4wNjY2NyAxMy44MjE5IDcuNzQxNjcgMTMuNDk2OVoiIGZpbGw9IiMwMEUyQTEiLz4KPC9zdmc+Cg==');
-  --str-video__icon--streaming: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNSAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNy4yIDE0LjNDNS44NCAxMi45NSA1IDExLjA3IDUgOXMuODQtMy45NSAyLjItNS4zbDEuNzggMS43N0E0Ljk3IDQuOTcgMCAwMDcuNSA5YzAgMS4zOC41NiAyLjYyIDEuNDYgMy41NEw3LjIgMTQuM3pNMTcuOCAxNC4zYzEuMzYtMS4zNSAyLjItMy4yMyAyLjItNS4zcy0uODQtMy45NS0yLjItNS4zbC0xLjc4IDEuNzdBNC45NyA0Ljk3IDAgMDExNy41IDljMCAxLjM4LS41NiAyLjYyLTEuNDYgMy41NGwxLjc2IDEuNzZ6TTEyLjUgNi41YTIuNSAyLjUgMCAxMDAgNSAyLjUgMi41IDAgMDAwLTV6TTIyLjUgOWMwIDIuNzYtMS4xMyA1LjI2LTIuOTQgNy4wNmwxLjc4IDEuNzhBMTIuNDQgMTIuNDQgMCAwMDI1IDljMC0zLjQ1LTEuNC02LjU4LTMuNjYtOC44NGwtMS43OCAxLjc4QTkuOTcgOS45NyAwIDAxMjIuNSA5ek01LjQ0IDEuOTRMMy42Ni4xNkExMi40NCAxMi40NCAwIDAwMCA5YzAgMy40NSAxLjQgNi41OCAzLjY2IDguODRsMS43OC0xLjc4QTkuOTcgOS45NyAwIDAxMi41IDljMC0yLjc2IDEuMTMtNS4yNiAyLjk0LTcuMDZ6IiBmaWxsPSIjQjBCNEI3Ii8+PC9zdmc+');
-  --str-video__icon--checkmark: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cG9seWxpbmUgcG9pbnRzPSIyMCA2IDkgMTcgNCAxMiIgc3Ryb2tlPSIjQjBCNEI3IiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+');
+  --str-video__icon--language: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTYgMjhDMjIuNjI3NCAyOCAyOCAyMi42Mjc0IDI4IDE2QzI4IDkuMzcyNTggMjIuNjI3NCA0IDE2IDRNMTYgMjhDOS4zNzI1OCAyOCA0IDIyLjYyNzQgNCAxNkM0IDkuMzcyNTggOS4zNzI1OCA0IDE2IDRNMTYgMjhDMTYgMjggMjEgMjQgMjEgMTZDMjEgOCAxNiA0IDE2IDRNMTYgMjhDMTYgMjggMTEgMjQgMTEgMTZDMTEgOCAxNiA0IDE2IDRNNC42ODI1IDEySDI3LjMxNzVNNC42ODI1IDIwSDI3LjMxNzUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==');
   --str-video__icon--star: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjBCNEI3IiBzdHJva2Utd2lkdGg9IjEuNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgMmwzLjA5IDYuMjZMMjIgOS4yN2wtNSA0Ljg3IDEuMTggNi44OEwxMiAxNy43N2wtNi4xOCAzLjI1TDcgMTQuMTQgMiA5LjI3bDYuOTEtMS4wMUwxMiAyeiIvPjwvc3ZnPg==');
-  --str-video__icon--star-filled: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI0IwQjRCNyIgc3Ryb2tlPSIjQjBCNEI3IiBzdHJva2Utd2lkdGg9IjEuNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgMmwzLjA5IDYuMjZMMjIgOS4yN2wtNSA0Ljg3IDEuMTggNi44OEwxMiAxNy43N2wtNi4xOCAzLjI1TDcgMTQuMTQgMiA5LjI3bDYuOTEtMS4wMUwxMiAyeiIvPjwvc3ZnPg==');
-  --str-video__icon--feedback: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI0IwQjRCNyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAgMkg0Yy0xLjEgMC0yIC45LTIgMnYxOGw0LTRoMTRjMS4xIDAgMi0uOSAyLTJWNGMwLTEuMS0uOS0yLTItMnptMCAxNEg1LjE3TDQgMTcuMTdWNGgxNnYxMnpNNyA5aDJ2Mkg3em00IDBoMnYyaC0yem00IDBoMnYyaC0yeiIvPjwvc3ZnPg==');
 }
 
 .str-video__icon--eye {
@@ -16,6 +9,11 @@
   mask-image: var(--str-video__icon--eye);
 }
 
+.str-video__icon--language {
+  -webkit-mask-image: var(--str-video__icon--language);
+  mask-image: var(--str-video__icon--language);
+}
+
 .str-video__icon--login {
   -webkit-mask-image: var(--str-video__icon--login);
   mask-image: var(--str-video__icon--login);

package/src/Embedded/shared/JoinError/JoinError-layout.scss

@@ -3,15 +3,19 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: var(--str-video__spacing-xl);
+  gap: var(--str-video__spacing-lg);
   min-height: 100%;
   width: 100%;
   max-width: 400px;
   margin: 0 auto;
-  padding: var(--str-video__spacing-xl);
+  padding: var(--str-video__spacing-lg);
   text-align: center;
 }
 
+.str-video__embedded-join-error .str-video__button {
+  inline-size: 100%;
+}
+
 .str-video__embedded-join-error__message {
-  font-size: var(--str-video__font-size-sm);
+  font-size: var(--str-video__typography-font-size-sm);
 }

package/src/Embedded/shared/JoinError/JoinError-theme.scss

@@ -1,8 +1,8 @@
 .str-video__embedded-join-error {
-  background: var(--str-video__base-color4);
-  color: var(--str-video__text-color1);
+  background: var(--str-video__background-core-app);
+  color: var(--str-video__text-primary);
 }
 
 .str-video__embedded-join-error__message {
-  color: var(--str-video__text-color2);
+  color: var(--str-video__text-secondary);
 }

package/src/Embedded/shared/LoadingScreen/LoadingScreen-layout.scss

@@ -6,9 +6,9 @@
   width: 100%;
 
   .str-video__loading-indicator__icon.spinner {
-    width: 4rem;
-    height: 4rem;
-    -webkit-mask-size: 4rem;
-    mask-size: 4rem;
+    width: 64px;
+    height: 64px;
+    -webkit-mask-size: 64px;
+    mask-size: 64px;
   }
 }

package/src/Embedded/shared/Lobby/Lobby-layout.scss

@@ -4,7 +4,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: var(--str-video__spacing-lg);
+  padding: var(--str-video__spacing-md);
 }
 
 .str-video__embedded-lobby__content {
@@ -15,11 +15,25 @@
   margin: auto 0;
 }
 
+.str-video__embedded-lobby__title {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--str-video__spacing-sm);
+  margin-bottom: var(--str-video__spacing-2xl);
+
+  &-icon {
+    inline-size: var(--str-video__icon-size-lg);
+    block-size: var(--str-video__icon-size-lg);
+  }
+}
+
 .str-video__embedded-lobby__heading {
-  font-size: var(--str-video__font-size-xl);
-  font-weight: 500;
+  font-size: var(--str-video__typography-font-size-xl);
+  line-height: var(--str-video__typography-line-height-relaxed);
+  font-weight: var(--str-video__typography-font-weight-semi-bold);
   text-align: center;
-  margin: 0 0 var(--str-video__spacing-md);
+  margin: 0;
 }
 
 .str-video__embedded-lobby__camera {
@@ -37,14 +51,13 @@
   aspect-ratio: 16 / 9;
   width: 100%;
   max-height: calc(100cqh - 200px);
-  border-radius: var(--str-video__border-radius-md);
+  border-radius: var(--str-video__radius-2xl);
   overflow: hidden;
 }
 
 .str-video__embedded-lobby__camera .str-video__video-preview-container {
   height: 100%;
   width: 100%;
-  border-color: transparent;
 }
 
 .str-video__embedded-lobby__camera .str-video__video-preview video {
@@ -57,7 +70,7 @@
   display: flex;
   position: absolute;
   bottom: 0;
-  gap: var(--str-video__spacing-sm);
+  gap: var(--str-video__spacing-xs);
   left: 50%;
   transform: translate(-50%, -50%);
 }
@@ -71,9 +84,9 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  font-size: var(--str-video__font-size-sm);
+  font-size: var(--str-video__typography-font-size-sm);
   text-align: center;
-  padding: var(--str-video__spacing-md);
+  padding: var(--str-video__spacing-sm);
 }
 
 .str-video__embedded-lobby__no-permission .str-video__avatar,
@@ -81,40 +94,45 @@
   .str-video__avatar--initials-fallback {
   width: 100px;
   height: 100px;
-  font-size: 2.5rem;
+  font-size: var(--str-video__font-size-size-40);
 }
 
 .str-video__embedded-lobby__media {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  gap: var(--str-video__spacing-sm);
   width: 100%;
   margin-top: var(--str-video__spacing-md);
-  margin-bottom: var(--str-video__spacing-sm);
 }
 
 .str-video__embedded-lobby__device-button {
   display: flex;
+  flex: 1 0 0;
+  min-width: 0;
   align-items: center;
-  gap: var(--str-video__spacing-sm);
+  gap: var(--str-video__spacing-xs);
   padding: var(--str-video__spacing-xs) var(--str-video__spacing-sm);
   background: transparent;
-  border: none;
-  font-size: var(--str-video__font-size-xs);
+  border: var(--str-video__w100) solid var(--str-video__border-core-default);
+  border-radius: var(--str-video__input-radius-select-input);
+  font-size: var(--str-video__typography-font-size-sm);
+  line-height: var(--str-video__typography-line-height-normal);
   cursor: pointer;
-  transition: opacity 0.2s;
 
-  &:hover {
-    opacity: 0.8;
+  &:not(.str-video__embedded-lobby__device-button--disabled):hover {
+    outline: var(--str-video__w200) solid var(--str-video__border-utility-hover);
+    outline-offset: calc(var(--str-video__w100) * -1);
   }
 
-  &-icon {
-    width: 20px;
-    height: 20px;
+  &:focus-visible {
+    outline: var(--str-video__w200) solid
+      var(--str-video__border-utility-focused);
+    outline-offset: calc(var(--str-video__w100) * -1);
   }
 
   &-label {
-    width: 120px;
+    flex: 1 0 0;
+    min-width: 0;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -124,53 +142,46 @@
 
   &--disabled {
     cursor: default;
-    opacity: 0.6;
-
-    &:hover {
-      opacity: 0.6;
-    }
   }
 }
 
-.str-video__embedded-lobby__display-name {
-  border-radius: var(--str-video__border-radius-xl);
-  padding: var(--str-video__spacing-lg);
-  width: 100%;
-  text-align: center;
-  backdrop-filter: blur(10px);
+.str-video__embedded-lobby__participant-label {
+  position: absolute;
+  inset: auto auto var(--str-video__spacing-xs) var(--str-video__spacing-xs);
+  display: flex;
+  align-items: center;
+  min-block-size: var(--str-video__size-32);
+  max-inline-size: min(256px, calc(50% - var(--str-video__space-48)));
+  padding: var(--str-video__spacing-xxs) var(--str-video__spacing-sm);
+  border-radius: var(--str-video__radius-lg);
+  font-size: var(--str-video__typography-font-size-xs);
+  line-height: var(--str-video__typography-line-height-tight);
+  font-weight: var(--str-video__typography-font-weight-regular);
+  overflow: hidden;
 
-  &-label {
-    font-weight: 600;
-    font-size: var(--str-video__font-size-xs);
-    letter-spacing: 0.25ex;
-    text-transform: uppercase;
-    margin-bottom: var(--str-video__spacing-md);
-    display: block;
+  &-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
+}
 
-  .str-video__button {
-    height: 28px;
-    min-width: unset;
-    gap: var(--str-video__spacing-xs);
-    padding: var(--str-video__spacing-xs) var(--str-video__spacing-lg);
-    font-size: var(--str-video__font-size-sm);
-
-    &:disabled {
-      opacity: 0.5;
-    }
-  }
+.str-video__embedded-lobby__join {
+  inline-size: 100%;
+  margin-top: var(--str-video__spacing-2xl);
 }
 
 @container (min-width: 600px) {
   .str-video__embedded-lobby__content {
-    max-width: 350px;
+    max-width: 400px;
   }
 
   .str-video__embedded-lobby__camera {
-    width: 600px;
+    width: min(640px, calc(100cqw - var(--str-video__spacing-md) * 2));
   }
 
-  .str-video__embedded-lobby__device-button-label {
-    width: 150px;
+  .str-video__embedded-lobby__media {
+    max-width: 400px;
+    margin-inline: auto;
   }
 }

package/src/Embedded/shared/Lobby/Lobby-theme.scss

@@ -1,26 +1,31 @@
-.str-video__embedded-lobby__no-permission {
-  color: var(--str-video__text-color2);
+.str-video__embedded-lobby__title-icon {
+  background-color: var(--str-video__accent-primary);
 }
 
-.str-video__embedded-lobby__device-button {
-  color: var(--str-video__text-color1);
+.str-video__embedded-lobby__no-permission {
+  color: var(--str-video__text-secondary);
 }
 
-.str-video__embedded-lobby__display-name {
-  background-color: var(--str-video__backdrop1);
-  border: 1px solid var(--str-video__base-color6);
+.str-video__embedded-lobby__device-button {
+  color: var(--str-video__input-text-default);
 
-  &-value {
-    color: var(--str-video__text-color2);
-    margin-bottom: var(--str-video__spacing-md);
-    display: block;
+  .str-video__icon {
+    background-color: var(--str-video__input-text-icon);
   }
 
-  .str-video__button {
-    background-color: var(--str-video__button-primary-active);
+  &--disabled {
+    color: var(--str-video__input-text-disabled);
+    border-color: var(--str-video__border-utility-disabled);
 
-    &:not([disabled]):hover {
-      background-color: var(--str-video__button-primary-hover);
+    .str-video__icon {
+      background-color: var(--str-video__input-text-disabled);
     }
   }
 }
+
+.str-video__embedded-lobby__participant-label {
+  background-color: var(--str-video__background-core-overlay-dark-strong);
+  color: var(--str-video__text-on-accent);
+  -webkit-backdrop-filter: blur(12.5px);
+  backdrop-filter: blur(12.5px);
+}

package/src/Icon/Icon-layout.scss

@@ -6,6 +6,7 @@
   -webkit-mask-size: contain;
   mask-size: contain;
   display: block;
-  width: 1.25rem;
-  height: 1.25rem;
+  flex-shrink: 0;
+  inline-size: var(--str-video__icon-size-sm);
+  block-size: var(--str-video__icon-size-sm);
 }

package/src/Icon/Icon-theme.scss

@@ -1,5 +1,5 @@
 .str-video__icon {
-  background-color: var(--str-video__icon-default);
+  background-color: var(--str-video__text-on-accent);
 
   &--reactions {
     -webkit-mask-image: var(--str-video__icon--reactions);
@@ -11,32 +11,31 @@
     mask-image: var(--str-video__icon--call-latency);
   }
 
+  &--poll {
+    -webkit-mask-image: var(--str-video__icon--poll);
+    mask-image: var(--str-video__icon--poll);
+  }
+
   &--network-quality {
     -webkit-mask-image: var(--str-video__icon--network-quality);
     mask-image: var(--str-video__icon--network-quality);
   }
 
+  &--low-bandwidth-fill {
+    -webkit-mask-image: var(--str-video__icon--low-bandwidth-fill);
+    mask-image: var(--str-video__icon--low-bandwidth-fill);
+  }
+
   &--recording-on {
     -webkit-mask-image: var(--str-video__icon--recording-on);
     mask-image: var(--str-video__icon--recording-on);
   }
 
-  &--caret-up {
-    -webkit-mask-image: var(--str-video__icon--caret-up);
-    mask-image: var(--str-video__icon--caret-up);
-  }
-
   &--download {
     -webkit-mask-image: var(--str-video__icon--download);
     mask-image: var(--str-video__icon--download);
   }
 
-  &--caret-down {
-    -webkit-mask-image: var(--str-video__icon--caret-down);
-    mask-image: var(--str-video__icon--caret-down);
-    transform: rotate(180deg);
-  }
-
   &--chevron-right {
     -webkit-mask-image: var(--str-video__icon--chevron-right);
     mask-image: var(--str-video__icon--chevron-right);
@@ -50,12 +49,7 @@
   &--loading {
     -webkit-mask-image: var(--str-video__icon--loading);
     mask-image: var(--str-video__icon--loading);
-
-    transform: rotate(360deg);
-    transition-duration: 1s;
-    transition-delay: now;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
+    animation: rotation 1s linear infinite;
   }
 
   &--logout {
@@ -146,6 +140,31 @@
     mask-image: var(--str-video__icon--call-accept);
   }
 
+  &--exclamation-mark-fill {
+    -webkit-mask-image: var(--str-video__icon--exclamation-mark-fill);
+    mask-image: var(--str-video__icon--exclamation-mark-fill);
+  }
+
+  &--exclamation-circle-fill {
+    -webkit-mask-image: var(--str-video__icon--exclamation-circle-fill);
+    mask-image: var(--str-video__icon--exclamation-circle-fill);
+  }
+
+  &--checkmark {
+    -webkit-mask-image: var(--str-video__icon--checkmark);
+    mask-image: var(--str-video__icon--checkmark);
+  }
+
+  &--question-mark-fill {
+    -webkit-mask-image: var(--str-video__icon--question-mark-fill);
+    mask-image: var(--str-video__icon--question-mark-fill);
+  }
+
+  &--sliders-fill {
+    -webkit-mask-image: var(--str-video__icon--sliders-fill);
+    mask-image: var(--str-video__icon--sliders-fill);
+  }
+
   &--info {
     -webkit-mask-image: var(--str-video__icon--info-icon);
     mask-image: var(--str-video__icon--info-icon);
@@ -156,6 +175,26 @@
     mask-image: var(--str-video__icon--stats);
   }
 
+  &--speaker-off {
+    -webkit-mask-image: var(--str-video__icon--speaker-off);
+    mask-image: var(--str-video__icon--speaker-off);
+  }
+
+  &--pip {
+    -webkit-mask-image: var(--str-video__icon--pip);
+    mask-image: var(--str-video__icon--pip);
+  }
+
+  &--fullscreen {
+    -webkit-mask-image: var(--str-video__icon--fullscreen);
+    mask-image: var(--str-video__icon--fullscreen);
+  }
+
+  &--livestream-viewers {
+    -webkit-mask-image: var(--str-video__icon--livestream-viewers);
+    mask-image: var(--str-video__icon--livestream-viewers);
+  }
+
   &--speaker {
     -webkit-mask-image: var(--str-video__icon--speaker);
     mask-image: var(--str-video__icon--speaker);
@@ -187,8 +226,8 @@
   }
 
   &--device-settings {
-    -webkit-mask-image: var(--str-video__icon--settings);
-    mask-image: var(--str-video__icon--settings);
+    -webkit-mask-image: var(--str-video__icon--settings-fill);
+    mask-image: var(--str-video__icon--settings-fill);
   }
 
   &--filter {

package/src/LoadingIndicator/LoadingIndicator-layout.scss

@@ -2,4 +2,9 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  gap: var(--str-video__spacing-xs);
+
+  .str-video__loading-indicator-text {
+    margin: 0;
+  }
 }

package/src/LoadingIndicator/LoadingIndicator-theme.scss

@@ -3,11 +3,12 @@
 .str-video__loading-indicator__icon.spinner {
   @include utils.apply-mask-image(
     var(--str-video__icon--loading),
-    var(--str-video__text-color2)
+    var(--str-video__text-tertiary),
+    var(--str-video__icon-size-sm)
   );
   animation: rotation 1s linear infinite;
-  width: 1rem;
-  height: 1rem;
+  width: var(--str-video__icon-size-sm);
+  height: var(--str-video__icon-size-sm);
 }
 
 @keyframes rotation {