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

package/src/Embedded/_base.scss

@@ -1,6 +1,6 @@
 .str-video.str-video__embedded {
-  background-color: var(--str-video__base-color4);
-  color: var(--str-video__text-color1);
+  background-color: var(--str-video__background-core-app);
+  color: var(--str-video__text-primary);
   position: relative;
   overflow: hidden;
   width: 100%;

package/src/Embedded/call/CallLayout-layout.scss

@@ -3,7 +3,7 @@
   position: relative;
   flex-direction: column;
   height: 100%;
-  padding: var(--str-video__spacing-sm);
+  padding: var(--str-video__spacing-xs);
   overflow: auto hidden;
 
   .str-video__permission-requests {
@@ -18,17 +18,15 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--str-video__spacing-sm) var(--str-video__spacing-md);
-  background-color: var(--str-video__base-color7);
-  border-radius: var(--str-video__border-radius-xxl);
+  padding: var(--str-video__spacing-xs) var(--str-video__spacing-sm);
 }
 
 .str-video__embedded-layout {
   display: flex;
   flex: 1;
   min-height: 0;
-  gap: var(--str-video__spacing-md);
-  padding: var(--str-video__spacing-md);
+  gap: var(--str-video__spacing-sm);
+  padding: var(--str-video__spacing-sm);
   position: relative;
 }
 
@@ -40,16 +38,24 @@
 }
 
 .str-video__embedded-notifications {
+  --str-video__embedded-controls-padding: var(--str-video__spacing-sm);
+
   position: absolute;
-  bottom: 60px;
-  left: var(--str-video__spacing-lg);
+  bottom: calc(
+    var(--str-video__button-visual-height-md) +
+      var(--str-video__embedded-controls-padding) * 2 +
+      var(--str-video__spacing-xs)
+  );
+  left: 0;
   right: 0;
+  display: flex;
+  justify-content: center;
   z-index: 3;
 }
 
 .str-video__embedded-sidebar {
   position: absolute;
-  border-radius: var(--str-video__border-radius-md);
+  border-radius: var(--str-video__radius-xl);
   height: calc(100% - 60px);
 
   &.str-video__embedded-sidebar--open {
@@ -73,9 +79,9 @@
   flex: 1;
   min-height: 0;
   width: 100%;
-  border-radius: var(--str-video__border-radius-md);
-  padding: var(--str-video__spacing-lg);
-  margin: var(--str-video__spacing-lg) 0;
+  border-radius: var(--str-video__radius-xl);
+  padding: var(--str-video__spacing-md);
+  margin: var(--str-video__spacing-md) 0;
 }
 
 @container (min-width: 700px) {
@@ -83,6 +89,10 @@
     display: none;
   }
 
+  .str-video__embedded-notifications {
+    --str-video__embedded-controls-padding: var(--str-video__spacing-md);
+  }
+
   .str-video__embedded-sidebar {
     position: relative;
     width: 0;

package/src/Embedded/call/CallLayout-theme.scss

@@ -1,7 +1,7 @@
 .str-video__embedded-call {
-  background-color: var(--str-video__base-color4);
+  background-color: var(--str-video__background-core-app);
 }
 
 .str-video__embedded-participants {
-  background-color: var(--str-video__base-color7);
+  background-color: var(--str-video__background-core-elevation-1);
 }

package/src/Embedded/livestream/Livestream-layout.scss

@@ -5,26 +5,24 @@
 .str-video__embedded-livestream-duration {
   display: flex;
   align-items: center;
-  gap: var(--str-video__spacing-md);
+  gap: var(--str-video__spacing-sm);
 
   &__live-badge,
   &__backstage-badge {
-    padding: var(--str-video__spacing-xs) var(--str-video__spacing-md);
-    border-radius: var(--str-video__spacing-xs);
-    font-size: 0.875rem;
-    font-weight: 600;
+    padding: var(--str-video__space-6) var(--str-video__spacing-sm);
+    border-radius: var(--str-video__radius-sm);
+    font-size: var(--str-video__typography-font-size-sm);
+    font-weight: var(--str-video__typography-font-weight-semi-bold);
   }
 
   &__viewers {
     display: flex;
     align-items: center;
-    gap: var(--str-video__spacing-xs);
+    gap: var(--str-video__space-6);
   }
 
   &__eye-icon {
     display: inline-block;
-    width: 1.125rem;
-    height: 1.125rem;
     -webkit-mask-image: var(--str-video__icon--eye);
     mask-image: var(--str-video__icon--eye);
     -webkit-mask-size: contain;
@@ -34,30 +32,18 @@
   }
 
   &__count {
-    font-size: 0.875rem;
+    font-size: var(--str-video__typography-font-size-sm);
   }
 
   &__elapsed {
-    font-size: 0.875rem;
+    font-size: var(--str-video__typography-font-size-sm);
   }
 }
 
 .str-video__embedded-go-live-button,
 .str-video__embedded-end-stream-button {
-  display: inline-flex;
   flex: none;
-  align-items: center;
-  justify-content: center;
-  gap: var(--str-video__spacing-sm);
-  height: 34px;
-  min-width: 140px;
-  padding: 0 var(--str-video__spacing-lg);
-  border: none;
-  border-radius: var(--str-video__border-radius-xxl);
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background 0.15s ease;
+  min-inline-size: 140px;
 }
 
 .str-video__embedded-go-live-button {
@@ -69,8 +55,8 @@
 
 .str-video__embedded-end-stream-button {
   .str-video__icon {
-    width: 20px;
-    height: 20px;
+    inline-size: var(--str-video__icon-size-md);
+    block-size: var(--str-video__icon-size-md);
   }
 }
 
@@ -79,7 +65,7 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  padding: var(--str-video__spacing-xl);
+  padding: var(--str-video__spacing-lg);
 
   &__content {
     display: flex;
@@ -97,39 +83,40 @@
   }
 
   &__title {
-    margin: var(--str-video__spacing-xl) 0 var(--str-video__spacing-sm);
-    font-size: 1.25rem;
-    font-weight: 600;
+    margin: var(--str-video__spacing-lg) 0 var(--str-video__spacing-xs);
+    font-size: var(--str-video__typography-font-size-xl);
+    font-weight: var(--str-video__typography-font-weight-semi-bold);
     line-height: 1.3;
   }
 
   &__starts-at {
-    margin: var(--str-video__spacing-sm);
-    font-size: 0.875rem;
+    margin: var(--str-video__spacing-xs);
+    font-size: var(--str-video__typography-font-size-sm);
   }
 
   &__participant-count {
-    margin: var(--str-video__spacing-md);
-    font-size: 0.8125rem;
+    margin: var(--str-video__spacing-sm);
+    font-size: var(--str-video__typography-font-size-xs);
   }
 
   &__actions {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: var(--str-video__spacing-lg);
-    margin-top: var(--str-video__spacing-xl);
+    gap: var(--str-video__spacing-md);
+    margin-top: var(--str-video__spacing-lg);
 
     .str-video__button {
-      min-width: 180px;
+      inline-size: 100%;
+      min-inline-size: 180px;
     }
   }
 
   &__auto-join {
     display: flex;
     align-items: center;
-    gap: var(--str-video__spacing-sm);
-    font-size: 0.875rem;
+    gap: var(--str-video__spacing-xs);
+    font-size: var(--str-video__typography-font-size-sm);
     cursor: pointer;
 
     input[type='checkbox'] {
@@ -138,11 +125,11 @@
   }
 
   &__join-error {
-    margin-top: var(--str-video__spacing-md);
-    font-size: var(--str-video__font-size-xs);
+    margin-top: var(--str-video__spacing-sm);
+    font-size: var(--str-video__typography-font-size-xs);
     line-height: 1.3;
     text-align: center;
-    font-weight: 500;
+    font-weight: var(--str-video__typography-font-weight-medium);
     min-height: 1.3em;
 
     &[data-visible='false'] {

package/src/Embedded/livestream/Livestream-theme.scss

@@ -1,69 +1,47 @@
 .str-video__embedded-livestream-duration {
   &__live-badge,
   &__backstage-badge {
-    color: var(--str-video__text-color1);
+    color: var(--str-video__text-primary);
   }
 
   &__live-badge {
-    background-color: var(--str-video__primary-color);
+    background-color: var(--str-video__accent-primary);
   }
 
   &__backstage-badge {
-    background-color: var(--str-video__base-color6);
+    background-color: var(--str-video__background-core-surface-default);
   }
 
   &__eye-icon {
-    background-color: var(--str-video__text-color1);
+    background-color: var(--str-video__text-primary);
     opacity: 0.8;
   }
 
   &__count {
-    color: var(--str-video__text-color1);
+    color: var(--str-video__text-primary);
     opacity: 0.8;
   }
 
   &__elapsed {
-    color: var(--str-video__text-color1);
+    color: var(--str-video__text-primary);
     opacity: 0.8;
   }
 }
 
-.str-video__embedded-go-live-button {
-  background: var(--str-video__button-primary-active);
-  color: var(--str-video__text-color1);
-
-  &:hover {
-    background: var(--str-video__button-primary-hover);
-  }
-}
-
-.str-video__embedded-end-stream-button {
-  background: var(--str-video__button-default-base);
-  color: var(--str-video__text-color1);
-
-  &:hover {
-    background: var(--str-video__button-default-hover);
-  }
-
-  .str-video__icon {
-    color: var(--str-video__alert-warning);
-  }
-}
-
 .str-video__embedded-host-lobby {
-  background: var(--str-video__base-color4);
+  background: var(--str-video__background-core-app);
 }
 
 .str-video__embedded-viewer-lobby {
-  background: var(--str-video__base-color4);
-  color: var(--str-video__text-color2);
+  background: var(--str-video__background-core-app);
+  color: var(--str-video__text-secondary);
 
   &__icon {
     opacity: 0.6;
   }
 
   &__title {
-    color: var(--str-video__text-color1);
+    color: var(--str-video__text-primary);
   }
 
   &__starts-at {
@@ -76,11 +54,11 @@
 
   &__auto-join {
     input[type='checkbox'] {
-      accent-color: var(--str-video__button-primary-active);
+      accent-color: var(--str-video__control-checkbox-bg-selected);
     }
   }
 
   &__join-error {
-    color: var(--str-video__alert-warning);
+    color: var(--str-video__accent-error);
   }
 }

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

@@ -1,26 +1,14 @@
 .str-video__embedded-blur-toggle-container {
-  padding: var(--str-video__spacing-xl) var(--str-video__spacing-xl);
+  padding: var(--str-video__spacing-xs);
 }
 
 .str-video__embedded-blur-toggle {
-  display: flex;
-  align-items: center;
-  gap: var(--str-video__spacing-sm);
-  width: 100%;
-  padding: var(--str-video__spacing-sm);
-  border: none;
-  border-radius: var(--str-video__border-radius-circle);
-  font-size: 0.875rem;
-  cursor: pointer;
-  transition: background-color 0.15s ease;
+  --str-video__button-secondary-border: var(
+    --str-video__border-core-on-elevation
+  );
+  --str-video__button-border-disabled: var(
+    --str-video__border-utility-disabled-on-surface
+  );
 
-  &:disabled {
-    opacity: 0.6;
-    cursor: default;
-  }
-
-  .str-video__icon {
-    width: 1.25rem;
-    height: 1.25rem;
-  }
+  inline-size: 100%;
 }

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

@@ -1,21 +1,3 @@
 .str-video__embedded-blur-toggle-container {
-  border-top: 1px solid var(--str-video__base-color3);
-}
-
-.str-video__embedded-blur-toggle {
-  background: transparent;
-  color: var(--str-video__text-color1);
-
-  &:hover:not(:disabled) {
-    background: var(--str-video__button-default-hover);
-  }
-
-  &--active {
-    background: var(--str-video__secondary-color);
-    color: var(--str-video__primary-color);
-
-    &:hover:not(:disabled) {
-      background: var(--str-video__secondary-color);
-    }
-  }
+  border-top: 1px solid var(--str-video__border-core-default);
 }

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

@@ -1,17 +1,16 @@
 .str-video__embedded-call-duration {
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: var(--str-video__spacing-xxs);
+  padding: var(--str-video__spacing-xxs) var(--str-video__spacing-xs);
+  border-radius: var(--str-video__radius-3xl);
   white-space: nowrap;
 
-  &__icon {
-    width: 16px;
-    height: 16px;
-  }
-
   &__time {
-    font-size: 0.875rem;
-    font-weight: 500;
+    font-size: var(--str-video__typography-font-size-sm);
+    font-weight: var(--str-video__typography-font-weight-semi-bold);
+    line-height: var(--str-video__typography-line-height-normal);
     font-variant-numeric: tabular-nums;
   }
 }
@@ -26,7 +25,7 @@
 
 .str-video__embedded-call-controls.str-video__call-controls {
   justify-content: center;
-  padding: var(--str-video__spacing-md);
+  padding: var(--str-video__spacing-sm);
   gap: var(--str-video__spacing-xxs);
 
   .str-video__call-controls--group {
@@ -60,12 +59,12 @@
 
   .str-video__embedded-call-controls.str-video__call-controls {
     justify-content: space-between;
-    padding: var(--str-video__spacing-lg);
-    gap: var(--str-video__spacing-sm);
+    padding: var(--str-video__spacing-md);
+    gap: var(--str-video__spacing-xs);
 
     .str-video__call-controls--group {
       flex: 1;
-      gap: var(--str-video__spacing-sm);
+      gap: var(--str-video__spacing-xs);
     }
 
     .str-video__call-controls--media {

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

@@ -1,14 +1,12 @@
 .str-video__embedded-call-duration {
-  color: var(--str-video__text-color2);
+  background-color: var(--str-video__background-core-surface-default);
+  color: var(--str-video__text-primary);
 
   &__icon {
-    background-color: var(--str-video__alert-success);
+    background-color: var(--str-video__accent-success);
   }
-}
 
-@container (min-width: 700px) {
-  .str-video__embedded-call-controls.str-video__call-controls {
-    background-color: var(--str-video__base-color7);
-    border-radius: var(--str-video__border-radius-xxl);
+  &__time-leading {
+    color: var(--str-video__text-tertiary);
   }
 }

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

@@ -1,6 +1,6 @@
 .str-video__embedded-connection-notification {
   position: absolute;
-  top: var(--str-video__spacing-md);
+  top: var(--str-video__spacing-sm);
   left: 50%;
   transform: translateX(-50%);
   z-index: 10;

package/src/Embedded/shared/EmbeddedParticipantViewUI/EmbeddedParticipantViewUI.scss

@@ -1,8 +1,8 @@
 .str-video__embedded-participant-view-ui {
   position: absolute;
   inset: 0;
-  padding-top: var(--str-video__spacing-md);
-  padding-left: var(--str-video__spacing-md);
+  padding-top: var(--str-video__spacing-sm);
+  padding-left: var(--str-video__spacing-sm);
 
   &--screen-share {
     padding-top: 0;

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

@@ -4,13 +4,13 @@
   align-items: center;
   height: 100%;
   width: 100%;
-  padding: 1rem;
+  padding: var(--str-video__spacing-md);
   text-align: center;
 
   &__message {
     margin: 0;
-    font-size: 0.875rem;
-    color: var(--str-video__text-color2);
+    font-size: var(--str-video__typography-font-size-sm);
+    color: var(--str-video__text-secondary);
     opacity: 0.7;
   }
 }

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

@@ -4,18 +4,18 @@
   justify-content: center;
   min-height: 100%;
   width: 100%;
-  padding: var(--str-video__spacing-xl);
+  padding: var(--str-video__spacing-lg);
 }
 
 .str-video__embedded-call-feedback__container {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--str-video__spacing-xl);
+  gap: var(--str-video__spacing-lg);
   width: 100%;
   max-width: 400px;
-  padding: var(--str-video__spacing-xl);
-  font-size: 0.9375rem;
+  padding: var(--str-video__spacing-lg);
+  font-size: var(--str-video__typography-font-size-sm);
   text-align: center;
 
   h2,
@@ -24,8 +24,8 @@
   }
 
   h2 {
-    font-size: 1.75rem;
-    font-weight: 600;
+    font-size: var(--str-video__font-size-size-28);
+    font-weight: var(--str-video__typography-font-weight-semi-bold);
   }
 }
 
@@ -33,12 +33,12 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--str-video__spacing-xl);
-  padding: var(--str-video__spacing-lg) 0;
+  gap: var(--str-video__spacing-lg);
+  padding: var(--str-video__spacing-md) 0;
 }
 
 .str-video__embedded-call-feedback__rating-label {
-  font-size: 1.125rem;
+  font-size: var(--str-video__typography-font-size-lg);
 }
 
 .str-video__embedded-call-feedback__stars {
@@ -66,13 +66,13 @@
 .str-video__embedded-call-feedback__textarea {
   width: 100%;
   min-height: 72px;
-  padding: var(--str-video__spacing-md);
+  padding: var(--str-video__spacing-sm);
   border: 1px solid transparent;
-  border-radius: var(--str-video__border-radius-md);
+  border-radius: var(--str-video__input-radius-text-input);
   background: transparent;
   color: inherit;
   font-family: inherit;
-  font-size: 0.875rem;
+  font-size: var(--str-video__typography-font-size-sm);
   resize: vertical;
 
   &:focus {
@@ -80,7 +80,7 @@
   }
 
   &:focus-visible {
-    border-color: var(--str-video__base-color2);
+    border-color: var(--str-video__border-utility-focused);
   }
 }
 
@@ -88,19 +88,19 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--str-video__spacing-lg);
+  gap: var(--str-video__spacing-md);
   width: 100%;
-  padding-top: var(--str-video__spacing-lg);
+  padding-top: var(--str-video__spacing-md);
 
-  .str-video__button:disabled {
-    opacity: 0.5;
+  .str-video__button {
+    inline-size: 100%;
   }
 }
 
 .str-video__embedded-call-feedback__ended-actions {
   display: flex;
   align-items: center;
-  gap: var(--str-video__spacing-xl);
+  gap: var(--str-video__spacing-lg);
   justify-content: center;
 }
 
@@ -108,7 +108,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--str-video__spacing-md);
+  gap: var(--str-video__spacing-sm);
 }
 
 .str-video__embedded-call-feedback__ended-divider {
@@ -117,24 +117,9 @@
 }
 
 .str-video__embedded-call-feedback__ended-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--str-video__spacing-sm);
-  height: 44px;
-  padding: 0 var(--str-video__spacing-xl);
-  border: 1px solid transparent;
-  border-radius: var(--str-video__border-radius-circle);
-  background: transparent;
-  font-size: 0.9375rem;
-  font-weight: 500;
-  cursor: pointer;
-  white-space: nowrap;
-
   .str-video__icon {
-    flex-shrink: 0;
-    width: 18px;
-    height: 18px;
+    inline-size: var(--str-video__icon-size-md);
+    block-size: var(--str-video__icon-size-md);
   }
 }