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

package/src/CallLayout/LivestreamLayout-layout.scss

@@ -18,28 +18,28 @@
 
   .str-video__livestream-layout__floating-participant {
     position: absolute;
-    width: 240px;
-    height: 135px;
-    box-shadow: var(--str-video__background-color1) 0 0 3px 0;
+    width: var(--str-video__size-240);
+    height: calc(var(--str-video__size-240) * 9 / 16);
+    box-shadow: var(--str-video__box-shadow-1);
 
     &--top-right {
-      top: 8px;
-      right: 8px;
+      top: var(--str-video__space-8);
+      right: var(--str-video__space-8);
     }
 
     &--top-left {
-      top: 8px;
-      left: 8px;
+      top: var(--str-video__space-8);
+      left: var(--str-video__space-8);
     }
 
     &--bottom-right {
-      bottom: 8px;
-      right: 8px;
+      bottom: var(--str-video__space-8);
+      right: var(--str-video__space-8);
     }
 
     &--bottom-left {
-      bottom: 8px;
-      left: 8px;
+      bottom: var(--str-video__space-8);
+      left: var(--str-video__space-8);
     }
   }
 
@@ -50,32 +50,22 @@
     display: flex;
     flex-direction: column-reverse;
 
-    &:hover .str-video__livestream-layout__overlay__bar {
-      background-color: var(--str-video__livestream-overlay-color-hovered);
-    }
-
     .str-video__livestream-layout__overlay__bar {
-      height: 10%;
-      min-height: 40px;
-      max-height: 70px;
-      position: relative;
-      bottom: 0;
-      border-bottom-left-radius: var(--str-video__border-radius-sm);
-      border-bottom-right-radius: var(--str-video__border-radius-sm);
-
-      background-color: var(--str-video__livestream-overlay-color);
-
+      min-block-size: var(--str-video__size-48);
       display: flex;
       align-items: center;
-      padding: 0 20px;
+      padding: var(--str-video__spacing-xs);
+      gap: var(--str-video__spacing-xxs);
     }
 
     .str-video__livestream-layout__overlay__bar-left,
     .str-video__livestream-layout__overlay__bar-center,
     .str-video__livestream-layout__overlay__bar-right {
       flex: 1;
+      min-inline-size: 0;
       display: flex;
       align-items: center;
+      gap: var(--str-video__spacing-xs);
     }
 
     .str-video__livestream-layout__overlay__bar-center {
@@ -87,58 +77,64 @@
     }
 
     .str-video__livestream-layout__live-badge {
-      padding: 4px 8px;
-      border-radius: var(--str-video__border-radius-xxs);
-      background-color: var(--str-video__primary-color);
-      color: var(--str-video__text-color1);
-    }
-
-    .str-video__livestream-layout__viewers-count {
-      &::before {
-        content: var(--str-video__icon--livestream-viewers);
-        margin-right: 3px;
-        vertical-align: middle;
+      display: inline-flex;
+      align-items: center;
+      flex: none;
+      gap: var(--str-video__spacing-xs);
+      block-size: var(--str-video__size-32);
+      padding: var(--str-video__spacing-xxs) var(--str-video__spacing-sm);
+      border-radius: var(--str-video__radius-24);
+      font-size: var(--str-video__typography-font-size-xs);
+      font-weight: var(--str-video__typography-font-weight-semi-bold);
+      line-height: var(--str-video__typography-line-height-tight);
+      text-transform: uppercase;
+    }
+
+    .str-video__livestream-layout__live-badge__dot {
+      flex: none;
+      inline-size: var(--str-video__size-8);
+      block-size: var(--str-video__size-8);
+      border-radius: var(--str-video__radius-full);
+      animation: str-video__livestream-live-blink 1s ease-in-out infinite
+        alternate;
+    }
+
+    .str-video__livestream-layout__viewers-count,
+    .str-video__livestream-layout__duration,
+    .str-video__livestream-layout__speaker-name {
+      display: inline-flex;
+      align-items: center;
+      flex: none;
+      gap: var(--str-video__spacing-xxs);
+      block-size: var(--str-video__size-32);
+      padding: var(--str-video__spacing-xxs) var(--str-video__spacing-xs);
+      border-radius: var(--str-video__radius-24);
+      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);
+
+      .str-video__icon {
+        inline-size: var(--str-video__icon-size-sm);
+        block-size: var(--str-video__icon-size-sm);
       }
-
-      padding: 4px 8px;
     }
 
     .str-video__livestream-layout__speaker-name {
-      font-size: 13px;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    .str-video__livestream-layout__duration {
-      text-align: center;
-    }
-
-    .str-video__livestream-layout__mute-button {
-      background: var(--str-video__icon--speaker) center no-repeat;
-      border-radius: var(--str-video__border-radius-xxs);
-      cursor: pointer;
-      width: 32px;
-      height: 32px;
-
-      &.str-video__livestream-layout__mute-button--muted {
-        background: var(--str-video__icon--speaker-off) center no-repeat;
-      }
+      flex: 0 1 auto;
+      min-inline-size: 0;
 
-      &:hover {
-        background-color: var(--str-video__overlay-color);
+      > span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
     }
 
+    .str-video__livestream-layout__mute-button,
     .str-video__livestream-layout__go-fullscreen {
-      background: var(--str-video__icon--fullscreen) center no-repeat;
-      border-radius: var(--str-video__border-radius-xxs);
-      cursor: pointer;
-      width: 32px;
-      height: 32px;
-
-      &:hover {
-        background-color: var(--str-video__overlay-color);
+      .str-video__icon {
+        inline-size: var(--str-video__icon-size-md);
+        block-size: var(--str-video__icon-size-md);
       }
     }
   }
@@ -149,17 +145,24 @@
     align-items: center;
 
     .str-video__livestream-layout__starts-at {
-      padding: 4px 8px;
+      padding: var(--str-video__spacing-xxs) var(--str-video__spacing-xs);
     }
 
     .str-video__livestream-layout__early-viewers-count {
-      &::before {
-        content: var(--str-video__icon--livestream-viewers);
-        margin-right: 3px;
-        vertical-align: middle;
-      }
-
-      padding: 4px 8px;
+      display: inline-flex;
+      align-items: center;
+      gap: var(--str-video__spacing-xxs);
+      padding: var(--str-video__spacing-xxs) var(--str-video__spacing-xs);
     }
   }
 }
+
+@keyframes str-video__livestream-live-blink {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0.4;
+  }
+}

package/src/CallLayout/LivestreamLayout-theme.scss

@@ -0,0 +1,23 @@
+.str-video__livestream-layout__wrapper {
+  .str-video__livestream-layout__overlay {
+    .str-video__livestream-layout__live-badge {
+      background-color: var(--str-video__accent-primary);
+      color: var(--str-video__text-on-accent);
+    }
+
+    .str-video__livestream-layout__live-badge__dot {
+      background-color: var(--str-video__background-core-on-accent);
+    }
+
+    .str-video__livestream-layout__viewers-count,
+    .str-video__livestream-layout__duration,
+    .str-video__livestream-layout__speaker-name {
+      background-color: var(--str-video__background-core-surface-default);
+      color: var(--str-video__text-primary);
+
+      .str-video__icon {
+        background-color: currentColor;
+      }
+    }
+  }
+}

package/src/CallLayout/PaginatedGridLayout-layout.scss

@@ -13,31 +13,31 @@ $scope-name: 'str-video__paginated-grid-layout';
   .str-video__paginated-grid-layout__group {
     display: flex;
     flex-wrap: wrap;
-    gap: 8px;
+    gap: var(--str-video__spacing-xs);
     justify-content: center;
     // prevents horizontal overflow
-    max-width: 110vh; // TODO: consider applying different limits (2 participants "unset", 4 participants 110vh...) 
-    padding-inline: 1.25rem;
+    max-width: 110vh; // TODO: consider applying different limits (2 participants "unset", 4 participants 110vh...)
+    padding-inline: var(--str-video__spacing-lg);
     margin: auto; // when arrows aren't rendered this element jumps to the left
-    width: 100%; // prevent resizing of placeholders 
+    width: 100%; // prevent resizing of placeholders
 
     .str-video__participant-view {
-      flex: 0 1 calc(25% - 6px);
+      flex: 0 1 calc(25% - var(--str-video__space-6));
     }
 
     &.str-video__paginated-grid-layout--one {
       .str-video__participant-view {
-        flex: 0 1 calc(100% - 6px);
+        flex: 0 1 calc(100% - var(--str-video__space-6));
       }
     }
     &.str-video__paginated-grid-layout--two-four {
       .str-video__participant-view {
-        flex: 0 1 calc(50% - 6px);
+        flex: 0 1 calc(50% - var(--str-video__space-6));
       }
     }
     &.str-video__paginated-grid-layout--five-nine {
       .str-video__participant-view {
-        flex: 0 1 calc(33% - 6px);
+        flex: 0 1 calc(33% - var(--str-video__space-6));
       }
     }
   }

package/src/CallLayout/PipLayout-layout.scss

@@ -4,21 +4,21 @@
   flex-wrap: wrap;
   overflow: hidden;
   justify-content: center;
-  gap: 1rem;
-  padding-inline: 1rem;
+  gap: var(--str-video__spacing-md);
+  padding-inline: var(--str-video__spacing-md);
   height: 100%;
 }
 
 .str-video__pip-screen-share-local {
   display: flex;
-  gap: var(--str-video__spacing-sm);
-  border-radius: var(--str-video__border-radius-sm);
-  padding: var(--str-video__spacing-md);
-  font-size: var(--str-video__font-size-sm);
+  gap: var(--str-video__spacing-xs);
+  border-radius: var(--str-video__radius-lg);
+  padding: var(--str-video__spacing-sm);
+  font-size: var(--str-video__typography-font-size-sm);
 
   .str-video__icon {
-    width: 1rem;
-    height: 1rem;
+    width: var(--str-video__icon-size-sm);
+    height: var(--str-video__icon-size-sm);
   }
 }
 
@@ -52,8 +52,8 @@
   }
 
   .str-video__icon {
-    width: 1rem;
-    height: 1rem;
+    width: var(--str-video__icon-size-sm);
+    height: var(--str-video__icon-size-sm);
   }
 
   &--left {
@@ -87,8 +87,8 @@
         content: '';
         position: absolute;
         inset: 0;
-        border: 2px solid var(--str-video__primary-color);
-        border-radius: var(--str-video__border-radius-sm);
+        border: var(--str-video__w200) solid var(--str-video__accent-primary);
+        border-radius: var(--str-video__radius-2xl);
         pointer-events: none;
         z-index: 1;
       }
@@ -100,39 +100,45 @@
   }
 
   @mixin pip-avatar-size($size, $font-size) {
-    .str-video__video-placeholder__avatar,
-    .str-video__video-placeholder__initials-fallback {
+    .str-video__avatar,
+    .str-video__avatar--initials-fallback {
       width: $size;
       height: $size;
       font-size: $font-size;
     }
   }
 
-  @include pip-avatar-size(32px, var(--str-video__font-size-sm));
+  @include pip-avatar-size(
+    var(--str-video__size-32),
+    var(--str-video__typography-font-size-sm)
+  );
 
   &.str-video__pip-layout__grid--single {
     --pip-cols: 1;
-    @include pip-avatar-size(80px, var(--str-video__font-size-xxl));
+    @include pip-avatar-size(
+      var(--str-video__size-80),
+      var(--str-video__typography-font-size-2xl)
+    );
   }
 
   &.str-video__pip-layout__grid--small {
     --pip-cols: 2;
-    @include pip-avatar-size(60px, var(--str-video__font-size-xl));
+    @include pip-avatar-size(60px, var(--str-video__typography-font-size-xl));
   }
 
   &.str-video__pip-layout__grid--medium {
     --pip-cols: 3;
-    @include pip-avatar-size(45px, var(--str-video__font-size-md));
+    @include pip-avatar-size(45px, var(--str-video__typography-font-size-md));
   }
 
   &.str-video__pip-layout__grid--large {
     --pip-cols: 4;
-    @include pip-avatar-size(35px, var(--str-video__font-size-sm));
+    @include pip-avatar-size(35px, var(--str-video__typography-font-size-sm));
   }
 
   &.str-video__pip-layout__grid--overflow {
     --pip-cols: 5;
     overflow-y: auto;
-    @include pip-avatar-size(25px, var(--str-video__font-size-xs));
+    @include pip-avatar-size(25px, var(--str-video__typography-font-size-xs));
   }
 }

package/src/CallLayout/PipLayout-theme.scss

@@ -1,3 +1,4 @@
 .str-video__pip-screen-share-local {
-  background: var(--str-video__background-color5);
+  background: var(--str-video__background-core-surface-default);
+  color: var(--str-video__text-primary);
 }

package/src/CallLayout/SpeakerLayout-layout.scss

@@ -11,9 +11,9 @@ $scope-name: 'str-video__speaker-layout';
   justify-content: center;
   height: 100%;
   width: 100%;
-  gap: 1rem;
-  padding-inline: 2px; // to see "speaking" outline
-  padding: 2px;
+  gap: var(--str-video__spacing-md);
+  padding-inline: var(--str-video__spacing-xxxs);
+  padding: var(--str-video__spacing-xxxs);
 
   .str-video__participant-view {
     aspect-ratio: 16/9;
@@ -26,8 +26,8 @@ $scope-name: 'str-video__speaker-layout';
     height: 100%;
 
     .str-video__participant-view--speaking:has(
-        .str-video__video--screen-share
-      ) {
+      .str-video__video--screen-share
+    ) {
       outline: none;
     }
 
@@ -37,7 +37,7 @@ $scope-name: 'str-video__speaker-layout';
     }
 
     .str-video__participant-details,
-    .str-video__call-controls__button {
+    .str-video__button {
       opacity: 1;
     }
   }
@@ -48,28 +48,28 @@ $scope-name: 'str-video__speaker-layout';
     justify-content: center;
     align-items: center;
 
-    & > .str-video__call-controls__button {
+    & > .str-video__button {
       .str-video__icon {
-        width: 1rem;
-        height: 1rem;
+        width: var(--str-video__icon-size-sm);
+        height: var(--str-video__icon-size-sm);
       }
     }
 
     .str-video__speaker-layout__participants-bar--button-left {
       position: absolute;
-      left: 0.5rem;
+      left: var(--str-video__space-8);
     }
     .str-video__speaker-layout__participants-bar--button-right {
       position: absolute;
-      right: 0.5rem;
+      right: var(--str-video__space-8);
     }
     .str-video__speaker-layout__participants-bar--button-top {
       position: absolute;
-      top: 0.5rem;
+      top: var(--str-video__space-8);
     }
     .str-video__speaker-layout__participants-bar--button-bottom {
       position: absolute;
-      bottom: 0.5rem;
+      bottom: var(--str-video__space-8);
     }
   }
 

package/src/CallLayout/index.scss

@@ -1,4 +1,5 @@
 @use 'LivestreamLayout-layout';
+@use 'LivestreamLayout-theme';
 @use 'PaginatedGridLayout-layout';
 @use 'SpeakerLayout-layout';
 @use 'PipLayout-layout.scss';

package/src/CallParticipantList/CallParticiantListingItem-layout.scss

@@ -4,16 +4,13 @@
   display: flex;
   justify-content: space-between;
   gap: var(--str-video__spacing-sm);
-  padding-block: 0.5rem;
+  padding-block: var(--str-video__spacing-xs);
   width: 100%;
   align-items: center;
 
-  .str-video__call-controls__button {
-    padding: unset;
-  }
-
   .str-video__participant-listing-item__display-name {
     flex: 1;
+    min-inline-size: 0;
     @include utils.ellipsis-text();
   }
 
@@ -26,11 +23,12 @@
   .str-video__participant-listing-item__media-indicator-group {
     display: flex;
     align-items: center;
-    gap: var(--str-video__spacing-sm);
+    flex-shrink: 0;
+    gap: var(--str-video__spacing-xs);
 
     .str-video__participant-listing-item__icon {
-      width: 0.75rem;
-      height: 0.75rem;
+      inline-size: var(--str-video__icon-size-sm);
+      block-size: var(--str-video__icon-size-sm);
     }
   }
 }

package/src/CallParticipantList/CallParticiantListingItem-theme.scss

@@ -2,49 +2,51 @@
 
 .str-video__participant-listing-item {
   .str-video__participant-listing-item__display-name {
-    font-size: 13px;
+    font-size: var(--str-video__typography-font-size-sm);
+    line-height: var(--str-video__typography-line-height-normal);
+    font-weight: var(--str-video__typography-font-weight-regular);
+    color: var(--str-video__text-primary);
   }
 
   .str-video__participant-listing-item__media-indicator-group {
     .str-video__participant-listing-item__icon-mic {
       @include utils.apply-mask-image(
-          var(--str-video__icon--mic),
-          var(--str-video__text-color1),
-          contain,
+        var(--str-video__icon--mic),
+        var(--str-video__text-primary),
+        contain
       );
     }
 
     .str-video__participant-listing-item__icon-mic-off {
       @include utils.apply-mask-image(
-          var(--str-video__icon--mic-off),
-          var(--str-video__danger-color),
-          contain,
+        var(--str-video__icon--mic-off),
+        var(--str-video__accent-error),
+        contain
       );
     }
 
     .str-video__participant-listing-item__icon-camera {
       @include utils.apply-mask-image(
-          var(--str-video__icon--camera),
-          var(--str-video__text-color1),
-          contain,
+        var(--str-video__icon--camera),
+        var(--str-video__text-primary),
+        contain
       );
     }
 
     .str-video__participant-listing-item__icon-camera-off {
       @include utils.apply-mask-image(
-          var(--str-video__icon--camera-off),
-          var(--str-video__danger-color),
-          contain,
+        var(--str-video__icon--camera-off),
+        var(--str-video__accent-error),
+        contain
       );
     }
 
     .str-video__participant-listing-item__icon-pinned {
       @include utils.apply-mask-image(
-          var(--str-video__icon--pin),
-          var(--str-video__text-color1),
-          contain,
+        var(--str-video__icon--pin),
+        var(--str-video__text-primary),
+        contain
       );
     }
   }
 }
-

package/src/CallParticipantList/CallParticipantList-layout.scss

@@ -7,15 +7,26 @@ $scope-name: 'str-video__participant-list';
   .str-video__participant-list-header {
     display: flex;
     align-items: center;
+    gap: var(--str-video__spacing-sm);
 
     .str-video__participant-list-header__title {
       flex: 1;
-      font-size: var(--str-video__font-size-sm);
+
+      font-size: var(--str-video__typography-font-size-md);
+      line-height: var(--str-video__typography-line-height-normal);
+      font-weight: var(--str-video__typography-font-weight-semi-bold);
+      color: var(--str-video__text-primary);
+    }
+
+    .str-video__participant-list-header__title-count,
+    .str-video__participant-list-header__title-anonymous {
+      color: var(--str-video__text-tertiary);
     }
+
     .str-video__participant-list-header__close-button {
       > span {
-        height: 15px;
-        width: 15px;
+        inline-size: var(--str-video__icon-size-sm);
+        block-size: var(--str-video__icon-size-sm);
       }
     }
   }
@@ -27,8 +38,8 @@ $scope-name: 'str-video__participant-list';
   .str-video__participant-list__content-header {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
-    margin-top: var(--str-video__spacing-md);
+    gap: var(--str-video__spacing-xs);
+    margin-top: var(--str-video__spacing-xs);
     justify-content: flex-end;
 
     .str-video__participant-list__content-header-title {
@@ -37,17 +48,10 @@ $scope-name: 'str-video__participant-list';
       justify-content: flex-end;
     }
 
-    .str-video__call-controls__button {
-      width: 1.75rem;
-      height: 1.75rem;
-      display: flex;
-      padding: unset;
-      align-items: center;
-      justify-content: center;
-
+    .str-video__participant-list__filter-button {
       .str-video__icon--filter {
-        width: 1rem;
-        height: 1rem;
+        inline-size: var(--str-video__icon-size-sm);
+        block-size: var(--str-video__icon-size-sm);
       }
     }
   }
@@ -56,7 +60,7 @@ $scope-name: 'str-video__participant-list';
     height: auto;
     flex-grow: 1;
     overflow-y: auto;
-    margin-top: var(--str-video__spacing-xl);
+    margin-top: var(--str-video__spacing-xs);
   }
 
   .str-video__participant-list__footer {
@@ -64,7 +68,7 @@ $scope-name: 'str-video__participant-list';
     flex-direction: column;
     justify-content: center;
     align-items: stretch;
-    gap: 0.5rem;
+    gap: var(--str-video__spacing-xs);
   }
 
   .str-video__search-results--loading {
@@ -87,8 +91,10 @@ $scope-name: 'str-video__participant-list';
     display: flex;
     align-items: center;
     width: 100%;
-    padding: var(--str-video__spacing-md);
-    font-size: var(--str-video__font-size-sm);
+    padding: var(--str-video__spacing-sm);
+    font-size: var(--str-video__typography-font-size-sm);
+    line-height: var(--str-video__typography-line-height-normal);
+    color: var(--str-video__text-secondary);
   }
 }