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

package/src/Menu/GenericMenu-layout.scss

@@ -1,53 +1,80 @@
 .str-video__generic-menu {
   list-style: none;
   margin: unset;
-  padding: var(--str-video__spacing-md);
+  padding: var(--str-video__spacing-xxs) var(--str-video__spacing-none);
 
   display: flex;
   flex-direction: column;
-  gap: var(--str-video__spacing-xs);
+  gap: var(--str-video__spacing-xxxs);
+  min-inline-size: 224px;
 
   .str-video__generic-menu--item {
+    display: flex;
     align-items: center;
+    padding-inline: var(--str-video__spacing-xxs);
 
-    gap: 8px;
-
-    font-weight: 600;
-    font-size: var(--str-video__font-size-md);
-
-    display: flex;
     button {
       all: unset;
+      box-sizing: border-box;
+
       width: 100%;
-      font-size: 13px;
-      border-radius: var(--str-video__border-radius-lg);
-      background-color: var(--str-video__button-primary-base);
-      padding: var(--str-video__spacing-xs) var(--str-video__spacing-lg);
-      gap: 10px;
+      min-height: 32px;
       display: flex;
       align-items: center;
-      position: relative;
+      gap: var(--str-video__spacing-xs);
+      padding-inline: var(--str-video__spacing-xs);
+      border-radius: var(--str-video__radius-md);
 
-      &:hover {
-        background-color: var(--str-video__button-default-hover);
+      color: var(--str-video__text-primary);
+      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 {
+        background-color: var(--str-video__text-secondary);
+      }
+
+      &:hover:not(:disabled) {
+        background-color: var(--str-video__background-utility-hover);
         cursor: pointer;
       }
 
-      &--selected,
-      &--active {
-        background-color: var(--str-video__button-primary-hover);
+      &:active:not(:disabled) {
+        background-color: var(--str-video__background-utility-pressed);
       }
-    }
 
-    // TODO: remove once "device selector" component becomes reusable
-    button[aria-selected] {
-      padding: 5px 10px 5px 26px;
-    }
-    button[aria-selected='true']::after {
-      content: '●';
-      font-size: 10px;
-      left: 10px;
-      position: absolute;
+      &:not(:disabled):focus-visible {
+        outline: var(--str-video__w200) solid
+          var(--str-video__border-utility-focused);
+        outline-offset: calc(var(--str-video__w200) * -1);
+      }
+
+      &:disabled {
+        color: var(--str-video__text-disabled);
+
+        .str-video__icon {
+          background-color: var(--str-video__text-disabled);
+        }
+      }
+
+      &[aria-current='true'],
+      &[aria-selected='true'] {
+        background-color: var(--str-video__background-utility-selected);
+      }
     }
   }
 }
+
+.str-video__generic-menu--separator {
+  margin: var(--str-video__spacing-xxs) 0 3px;
+  border-block-start: var(--str-video__w100) solid
+    var(--str-video__border-core-default);
+}
+
+.str-video__generic-menu--separator:first-child,
+.str-video__generic-menu--separator + .str-video__generic-menu--separator,
+.str-video__generic-menu--separator:not(
+  :has(~ .str-video__generic-menu--item)
+) {
+  display: none;
+}

package/src/Menu/Menu-theme.scss

@@ -1,5 +1,5 @@
 .str-video__menu-container {
-  background-color: var(--str-video__base-color6);
-  border-radius: var(--str-video__border-radius-lg);
-  box-shadow: 0 0 24px -4px rgba(0, 0, 0, 0.64);
+  background-color: var(--str-video__background-core-elevation-2);
+  border-radius: var(--str-video__radius-lg);
+  box-shadow: var(--str-video__box-shadow-3);
 }

package/src/Menu/Portal-layout.scss

@@ -3,7 +3,7 @@
   z-index: 1;
   width: 100vw;
   height: 100vh;
-  background-color: var(--str-video__backdrop1);
+  background-color: var(--str-video__background-core-overlay-dark);
 
   left: 0;
   top: 0;

package/src/Notification/Notification-layout.scss

@@ -1,13 +1,17 @@
 .str-video__notification {
-  padding: 0.625rem;
+  min-height: var(--str-video__size-48);
+  max-width: var(--str-video__size-480);
   display: flex;
   align-items: center;
-  gap: 0.625rem;
+  gap: var(--str-video__spacing-xs);
 
-  .str-video__notification__icon {
-    display: inline-block;
-    width: 1.5rem;
-    height: 1.5rem;
+  padding-block: var(--str-video__spacing-sm);
+  padding-inline: var(--str-video__spacing-md);
+
+  &--success,
+  &--error,
+  &--loading {
+    padding-inline-start: var(--str-video__spacing-sm);
   }
 
   .str-video__notification__message {
@@ -15,9 +19,10 @@
   }
 
   .str-video__notification__close {
+    margin-inline-start: var(--str-video__spacing-xxs);
     display: inline-block;
-    width: 1rem;
-    height: 1rem;
+    width: var(--str-video__icon-size-sm);
+    height: var(--str-video__icon-size-sm);
 
     &:hover {
       cursor: pointer;

package/src/Notification/Notification-theme.scss

@@ -1,19 +1,13 @@
-@use '../utils';
-
 .str-video__notification {
-  background-color: var(--str-video__background-color1);
-  border-radius: var(--str-video__border-radius-xs);
+  background-color: var(--str-video__background-core-inverse);
+  color: var(--str-video__text-on-inverse);
+  border-radius: var(--str-video__radius-3xl);
+  box-shadow: var(--str-video__box-shadow-3);
+  font-size: var(--str-video__typography-font-size-sm);
+  line-height: var(--str-video__typography-line-height-normal);
   z-index: 100;
 
-  .str-video__notification__icon {
-    @include utils.apply-mask-image(
-      var(--str-video__icon--info-icon),
-      var(--str-video__text-color1),
-      1.5rem
-    );
-  }
-
-  .str-video__notification__message {
-    font-size: 0.75rem;
+  > .str-video__icon {
+    background-color: var(--str-video__text-on-inverse);
   }
 }

package/src/ParticipantView/ParticipantView-layout.scss

@@ -11,59 +11,60 @@ $scope-name: 'str-video__participant-view';
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--str-video__border-radius-sm);
+  border-radius: var(--str-video__radius-2xl);
 
   &--speaking {
-    outline: 2px solid var(--str-video__primary-color);
+    outline: var(--str-video__w200) solid var(--str-video__accent-primary);
   }
 
-  .str-video__call-controls__button {
-    transition: opacity 200ms ease-out;
-    opacity: 0.3;
-    color: var(--str-video__text-color1);
-  }
-
-  &:hover {
-    .str-video__call-controls__button {
-      opacity: 1;
-    }
-  }
-
-  & > .str-video__call-controls__button {
+  .str-video__participant-view__menu-button {
     position: absolute;
-    top: 0.875rem;
-    left: 0.875rem;
-    padding: 0.3rem;
+    top: var(--str-video__space-8);
+    left: var(--str-video__space-8);
   }
 
   .str-video__participant-details {
     position: absolute;
-    left: 0;
-    bottom: 0;
+    inset: auto auto var(--str-video__space-8) var(--str-video__space-8);
+    min-block-size: var(--str-video__size-32);
+    max-inline-size: 256px;
     display: flex;
     align-items: center;
-    gap: var(--str-video__spacing-sm);
-    border-radius: 0 var(--str-video__border-radius-xs) 0
-      var(--str-video__border-radius-sm);
-    background-color: var(--str-video__background-color4);
+    gap: var(--str-video__spacing-xs);
+    border-radius: var(--str-video__radius-lg);
+    background-color: var(--str-video__background-core-overlay-dark-strong);
+    -webkit-backdrop-filter: blur(12.5px);
+    backdrop-filter: blur(12.5px);
 
     .str-video__participant-details__name {
       display: flex;
       align-items: center;
-      gap: var(--str-video__spacing-sm);
-      padding: 4px 6px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      font-size: var(--str-video__font-size-sm);
+      gap: var(--str-video__spacing-xxs);
+      padding: var(--str-video__space-4) var(--str-video__space-4)
+        var(--str-video__space-4) var(--str-video__space-12);
+      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);
+      color: var(--str-video__participant-label--color);
+
+      .str-video__participant-details__name-text {
+        max-inline-size: 160px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &:not(:last-child) {
+          margin-inline-end: var(--str-video__spacing-xxs);
+        }
+      }
 
       @mixin icon {
-        $icon-size: 1rem;
-        width: $icon-size;
-        height: $icon-size;
-        -webkit-mask-size: $icon-size;
-        mask-size: $icon-size;
-        background-color: var(--str-video__text-color1);
+        flex-shrink: 0;
+        width: var(--str-video__icon-size-sm);
+        height: var(--str-video__icon-size-sm);
+        -webkit-mask-size: var(--str-video__icon-size-sm);
+        mask-size: var(--str-video__icon-size-sm);
+        background-color: var(--str-video__participant-label--color);
       }
 
       .str-video__participant-details__name--audio-muted {
@@ -74,9 +75,9 @@ $scope-name: 'str-video__participant-view';
 
       .str-video__participant-details__name--audio-connecting {
         .str-video__loading-indicator__icon {
-          width: 1rem;
-          height: 1rem;
-          border-width: 2px;
+          width: var(--str-video__icon-size-sm);
+          height: var(--str-video__icon-size-sm);
+          border-width: var(--str-video__size-2);
         }
       }
 
@@ -88,17 +89,13 @@ $scope-name: 'str-video__participant-view';
 
       .str-video__participant-details__name--track-paused {
         @include icon();
-        mask-image: var(--str-video__icon--low-bandwidth);
-        -webkit-mask-image: var(--str-video__icon--low-bandwidth);
+        mask-image: var(--str-video__icon--low-bandwidth-fill);
+        -webkit-mask-image: var(--str-video__icon--low-bandwidth-fill);
       }
 
       .str-video__participant-details__name--pinned {
         cursor: pointer;
         @include icon();
-        width: 0.8rem;
-        height: 1rem;
-        -webkit-mask-size: 0.8rem;
-        mask-size: 0.8rem;
         -webkit-mask-repeat: no-repeat;
         mask-repeat: no-repeat;
         -webkit-mask-position: center;
@@ -106,54 +103,60 @@ $scope-name: 'str-video__participant-view';
         -webkit-mask-image: var(--str-video__icon--pin);
         mask-image: var(--str-video__icon--pin);
       }
-
-      .str-video__participant-details__name--network-stats {
-        @include icon();
-        background-image: var(--str-video__icon--network-quality);
-        cursor: pointer;
-        margin-right: 0.625rem;
-      }
     }
   }
 
-  .str-video__participant-details__connection-quality {
+  .str-video__connection-quality-indicator {
     position: absolute;
-    bottom: 0;
-    right: 0;
+    inset: auto var(--str-video__space-8) var(--str-video__space-8) auto;
 
-    border-radius: var(--str-video__border-radius-sm) 0
-      var(--str-video__border-radius-sm) 0;
+    inline-size: var(--str-video__size-32);
+    block-size: var(--str-video__size-32);
+    border-radius: var(--str-video__radius-max);
 
-    width: 24px;
-    height: 24px;
-    display: block;
-    background-size: cover;
-    background-color: var(--str-video__background-color4);
+    display: grid;
+    grid-auto-flow: column;
+    place-content: center;
+    align-items: end;
+    gap: 3px;
 
-    &--poor {
-      background-image: var(--str-video__icon--connection-quality-poor);
-    }
-    &--good {
-      background-image: var(--str-video__icon--connection-quality-good);
-    }
-    &--excellent {
-      background-image: var(--str-video__icon--connection-quality-excellent);
+    .str-video__connection-quality-indicator__bar {
+      inline-size: var(--str-video__icon-stroke-emphasis);
+      border-radius: var(--str-video__radius-max);
+
+      &:nth-child(1) {
+        block-size: 4px;
+      }
+
+      &:nth-child(2) {
+        block-size: 7px;
+      }
+
+      &:nth-child(3) {
+        block-size: 10px;
+      }
     }
   }
 }
 
 .str-video__speech-indicator {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
-  gap: 1px;
-  height: 16px;
+  gap: 3px;
+  flex-shrink: 0;
+  inline-size: var(--str-video__size-24);
+  block-size: var(--str-video__size-24);
+  padding: 7px;
+  border-radius: var(--str-video__radius-md);
+  background-color: var(--str-video__background-core-overlay-dark-strong);
 
   .str-video__speech-indicator__bar {
-    width: 3px;
+    flex-shrink: 0;
+    width: 2px;
     height: 20%;
-    background-color: var(--str-video__primary-color);
-    border-radius: 2px;
+    background-color: var(--str-video__indicator-sound-indicator-speaking);
+    border-radius: var(--str-video__radius-max);
     animation-duration: 0.4s;
     animation-iteration-count: 1;
     animation-name: speech-indicator-silence;
@@ -162,7 +165,7 @@ $scope-name: 'str-video__participant-view';
 
   &.str-video__speech-indicator--dominant {
     .str-video__speech-indicator__bar {
-      background-color: var(--str-video__primary-color);
+      background-color: var(--str-video__indicator-sound-indicator-speaking);
     }
   }
 

package/src/ParticipantView/ParticipantView-theme.scss

@@ -0,0 +1,28 @@
+/* The text and icon color inside the participant label */
+.str-video {
+  --str-video__participant-label--color: var(--str-video__text-on-accent);
+}
+
+.str-video__connection-quality-indicator {
+  background-color: var(--str-video__background-core-overlay-dark-strong);
+
+  .str-video__connection-quality-indicator__bar {
+    background-color: var(--str-video__base-transparent-white-30);
+
+    &--active {
+      background-color: var(--str-video__text-on-accent);
+    }
+  }
+
+  &--poor .str-video__connection-quality-indicator__bar--active {
+    background-color: var(--str-video__indicator-connection-quality-poor);
+  }
+
+  &--good .str-video__connection-quality-indicator__bar--active {
+    background-color: var(--str-video__indicator-connection-quality-fair);
+  }
+
+  &--excellent .str-video__connection-quality-indicator__bar--active {
+    background-color: var(--str-video__indicator-connection-quality-great);
+  }
+}

package/src/ParticipantView/index.scss

@@ -1 +1,2 @@
 @use 'ParticipantView-layout';
+@use 'ParticipantView-theme';

package/src/Permissions/Permissions-layout.scss

@@ -1,50 +1,43 @@
 .str-video__permission-requests {
-  background-color: var(--str-video__background-color1);
-  border-radius: 8px;
-  padding: 10px;
+  background-color: var(--str-video__background-core-surface-card);
+  border-radius: var(--str-video__radius-md);
+  padding: var(--str-video__spacing-sm);
   position: relative;
 
   .str-video__permission-requests__notification,
   .str-video__permission-request {
     display: flex;
-    gap: 10px;
-    padding: 10px 0;
+    gap: var(--str-video__spacing-xs);
+    padding-block: var(--str-video__spacing-xs);
     align-items: center;
   }
 
   .str-video__permission-requests__notification__message,
   .str-video__permission-request__message {
     flex: 1;
+    min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+
+    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__permission-request__button {
-    background-color: transparent;
-    border: 1px solid var(--str-video__text-color1);
-    border-radius: 4px;
-    color: var(--str-video__color1);
-    cursor: pointer;
-    font-size: 14px;
-    font-weight: 500;
-    padding: 8px;
     min-width: 120px;
   }
 
-  .str-video__permission-request__button--allow {
-    background-color: var(--str-video__primary-color);
-    border: 1px solid var(--str-video__primary-color);
-  }
-
   .str-video__permission-requests-list {
-    background-color: var(--str-video__background-color1);
-    border-bottom-left-radius: 8px;
-    border-bottom-right-radius: 8px;
-    padding: 10px;
+    background-color: var(--str-video__background-core-surface-card);
+    border-bottom-left-radius: var(--str-video__radius-md);
+    border-bottom-right-radius: var(--str-video__radius-md);
+    box-shadow: var(--str-video__box-shadow-3);
+    padding: var(--str-video__spacing-sm);
     width: 100%;
     z-index: 1;
-    opacity: 0.9;
     overflow-x: scroll;
     overflow-y: hidden;
 

package/src/Reaction/Reaction-layout.scss

@@ -1,11 +1,11 @@
 .str-video__reaction {
   position: absolute;
-  right: 0.875rem;
-  top: 0.875rem;
+  right: var(--str-video__space-8);
+  top: var(--str-video__space-8);
 
   .str-video__reaction__emoji {
     display: flex;
     line-height: 1;
-    font-size: 2.5rem;
+    font-size: var(--str-video__font-size-size-40);
   }
 }

package/src/RingingCall/RingingCall-layout.scss

@@ -5,8 +5,9 @@
   justify-content: space-around;
   width: 400px;
   height: 300px;
-  padding: 1rem 1rem 0.5rem;
-  gap: 1rem;
+  padding: var(--str-video__spacing-md) var(--str-video__spacing-md)
+    var(--str-video__spacing-xs);
+  gap: var(--str-video__spacing-md);
 }
 
 .str-video__call-panel--ringing {
@@ -21,23 +22,23 @@
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      padding: 2rem;
+      padding: var(--str-video__spacing-2xl);
 
       .str-video__avatar {
-        width: 80px;
-        height: 80px;
+        width: var(--str-video__size-80);
+        height: var(--str-video__size-80);
       }
 
       .str-video__member_details {
         position: absolute;
         bottom: 10%;
-        padding: 0.125rem 0.375rem;
+        padding: var(--str-video__space-2) var(--str-video__space-6);
       }
     }
   }
 
   .str-video__pending-call-controls {
     display: flex;
-    gap: 0.675rem;
+    gap: var(--str-video__spacing-sm);
   }
 }

package/src/RingingCall/RingingCall-theme.scss

@@ -1,24 +1,25 @@
 .str-video__call-panel {
-  background: var(--str-video__background-color3);
-  border: 2px solid rgba(200,200,200,0.6);
-  border-radius: 10px;
+  background: var(--str-video__background-core-surface-card);
+  border: 2px solid var(--str-video__border-core-default);
+  border-radius: var(--str-video__radius-md);
 }
 
 .str-video__call-panel--ringing {
   .str-video__call-panel__members-list {
-
     .str-video__call-panel__member-box {
-      border-radius: var(--str-video__border-radius-circle);
-      background: var(--str-video__background-color6);
+      border-radius: var(--str-video__radius-max);
+      background: var(--str-video__background-core-surface-strong);
 
       &:before {
-        content: "";
+        content: '';
         position: absolute;
         inset: 0;
-        border-radius: var(--str-video__border-radius-circle);
-        padding: 4px;
-        background:linear-gradient(
-            180deg,var(--str-video__primary-color),var(--str-video__info-color)
+        border-radius: var(--str-video__radius-max);
+        padding: var(--str-video__space-4);
+        background: linear-gradient(
+          180deg,
+          var(--str-video__accent-primary),
+          var(--str-video__accent-success)
         );
         -webkit-mask:
           linear-gradient(#fff 0 0) content-box,
@@ -28,11 +29,11 @@
       }
 
       .str-video__member_details {
-        background-color: var(--str-video__background-color4);
-        color: var(--str-video__text-color1);
-        border-radius: 4px;
-        font-size: 12px;
-        line-height: 16px;
+        background-color: var(--str-video__background-core-overlay-dark-strong);
+        color: var(--str-video__text-on-accent);
+        border-radius: var(--str-video__radius-xs);
+        font-size: var(--str-video__typography-font-size-xs);
+        line-height: var(--str-video__typography-line-height-tight);
       }
     }
   }

package/src/ScreenShareOverlay/ScreenShareOverlay-layout.scss

@@ -6,23 +6,15 @@
   position: absolute;
   width: 100%;
   height: 100%;
-  gap: 1.8rem;
+  gap: var(--str-video__spacing-2xl);
 
   & > .str-video__icon {
-    width: 4rem;
-    height: 4rem;
+    width: var(--str-video__size-64);
+    height: var(--str-video__size-64);
   }
 
-  .str-video__screen-share-overlay__button {
-    display: flex;
-    gap: 0.4rem;
-    align-items: center;
-    padding-inline: 1.6rem;
-    padding-block: 0.8rem;
-
-    .str-video__icon {
-      width: 0.7rem;
-      height: 0.7rem;
-    }
+  .str-video__screen-share-overlay__button .str-video__icon {
+    width: var(--str-video__icon-size-xs);
+    height: var(--str-video__icon-size-xs);
   }
 }