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

package/src/CallRecodingList/CallRecordingList-layout.scss

@@ -1,3 +1,11 @@
+.str-video__call-recording-list__header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--str-video__spacing-md);
+}
+
 .str-video__call-recording-list__list {
   display: flex;
   flex-direction: column;
@@ -7,7 +15,11 @@
 
   &:first-of-type {
     .str-video__call-recording-list__item {
-      font-weight: 600;
+      background-color: var(--str-video__background-core-surface-card);
+      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-semi-bold);
+      color: var(--str-video__text-secondary);
     }
   }
 }
@@ -15,46 +27,53 @@
 .str-video__call-recording-list__item {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
   align-items: center;
-  font-size: var(--str-video__font-size-xs);
-  border-bottom: 1px solid var(--str-video__base-color2);
-  padding: var(--str-video__spacing-sm) 0;
-  gap: var(--str-video__spacing-sm);
-
-  &:last-of-type {
-    border-bottom: none;
-  }
-}
-.str-video__call-recording-list__filename {
-  width: 200px;
+  padding: var(--str-video__spacing-sm);
+  gap: var(--str-video__spacing-xs);
+  border-radius: var(--str-video__radius-lg);
+  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__call-recording-list__filename,
 .str-video__call-recording-list__time {
-  width: 100px;
+  flex: 0 1 120px;
+  min-width: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 .str-video__call-recording-list__download {
   display: flex;
   justify-content: flex-end;
-  width: 100px;
-}
-
-.str-video__call-recording-list__filename,
-.str-video__call-recording-list__time {
-  text-overflow: ellipsis;
-  overflow: hidden;
+  flex: 0 0 var(--str-video__button-visual-height-xs);
+  margin-inline-start: auto;
 }
 
 .str-video__call-recording-list-item__action-button--download {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--str-video__button-visual-height-xs);
+  block-size: var(--str-video__button-visual-height-xs);
+  padding: var(--str-video__button-padding-y-xs)
+    var(--str-video__button-padding-x-icon-only-xs);
+  border-radius: var(--str-video__button-radius-full);
+
   .str-video__icon--download {
-    height: 32px;
-    width: 32px;
+    height: var(--str-video__icon-size-sm);
+    width: var(--str-video__icon-size-sm);
+    background-color: var(--str-video__button-secondary-text);
   }
+
   &:hover {
-    .str-video__icon--download {
-      cursor: pointer;
-      background-color: var(--str-video__brand-color1);
-    }
+    cursor: pointer;
+    background-color: var(--str-video__background-utility-hover);
+  }
+
+  &:active {
+    background-color: var(--str-video__background-utility-pressed);
   }
 }

package/src/CallRecodingList/CallRecordingList-theme.scss

@@ -1,50 +1,38 @@
 @use '../utils';
 
 .str-video__call-recording-list__title {
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 1.25rem;
+  font-weight: var(--str-video__typography-font-weight-semi-bold);
+  font-size: var(--str-video__typography-font-size-md);
+  line-height: var(--str-video__typography-line-height-normal);
+  color: var(--str-video__text-primary);
 }
 
-.str-video__call-controls__button--icon-call-recordings {
-  @include utils.apply-mask-image(
-    var(--str-video__icon--film-roll),
-    var(--str-video__text-color1),
-    2px
-  );
-}
-
-.str-video__call-recordings__toggle-button--active {
-  background-color: var(--str-video__background-color7);
-}
-
-.str-video__refresh-button {
-  background-color: transparent;
-  cursor: pointer;
-  border-radius: 4px;
-
-  &:hover {
-    background-color: var(--str-video__background-color7);
-  }
-
-  &:active {
-    background-color: var(--str-video__background-color5);
-    transition: background-color 0.2s ease-out;
-  }
-
-  .str-video__refresh-button--icon {
-    @include utils.apply-mask-image(
-      var(--str-video__icon--refresh),
-      var(--str-video__text-color1),
-      contain
-    );
-  }
+.str-video__call-recording-list__listing--empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--str-video__spacing-sm);
+  padding: var(--str-video__spacing-3xl) var(--str-video__spacing-xl);
 }
 
 .str-video__call-recording-list__listing--icon-empty {
+  flex: 0 0 auto;
+  inline-size: var(--str-video__icon-size-lg);
+  block-size: var(--str-video__icon-size-lg);
   @include utils.apply-mask-image(
     var(--str-video__icon--film-roll),
-    var(--str-video__text-color1),
+    var(--str-video__text-tertiary),
     contain
   );
 }
+
+.str-video__call-recording-list__listing--text-empty {
+  margin: 0;
+  max-inline-size: var(--str-video__size-320);
+  text-align: center;
+  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-semi-bold);
+  color: var(--str-video__text-primary);
+}

package/src/DeviceSettings/DeviceSettings-layout.scss

@@ -1,14 +1,12 @@
 .str-video__device-settings__button {
-  .str-video__call-controls__button--icon-device-settings {
-    width: 1.25rem;
-    height: 1.25rem;
+  .str-video__icon--device-settings {
+    width: var(--str-video__icon-size-md);
+    height: var(--str-video__icon-size-md);
   }
 }
 
 .str-video__device-settings {
-  padding: 0.625rem;
   z-index: 1;
-  font-family: 'Inter';
 }
 
 .str-video__device-settings__header {
@@ -22,112 +20,188 @@
 .str-video__icon.str-video__device-settings__settings-icon {
   height: 24px;
   width: 24px;
-  color: var(--str-video__base-color1);
+  color: var(--str-video__text-primary);
 }
 
 .str-video__device-settings__close-button {
-  color: var(--str-video__base-color1);
+  color: var(--str-video__text-primary);
   background-color: transparent;
 }
 
+.str-video__menu-container:has(.str-video__device-settings__device-kind) {
+  padding-block: var(--str-video__spacing-xxs);
+}
+
 .str-video__device-settings__device-kind {
-  padding: var(--str-video__spacing-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--str-video__spacing-xxxs);
 
   .str-video__device-settings__device-selector-title {
-    font-size: var(--str-video__font-size-sm);
-    font-weight: bold;
-    line-height: 1.25rem;
-
-    padding-bottom: 0.5rem;
-    margin-bottom: var(--str-video__spacing-sm);
+    display: flex;
+    align-items: center;
+    min-height: 32px;
+    margin-inline: var(--str-video__spacing-xxs);
+    padding-inline: var(--str-video__spacing-xs);
+
+    color: var(--str-video__text-tertiary);
+    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__option,
   .str-video__device-settings__option {
     display: flex;
     align-items: center;
-    border-radius: var(--str-video__border-radius-lg);
-    background-color: var(--str-video__button-primary-base);
-    padding: var(--str-video__spacing-sm) var(--str-video__spacing-lg);
-
-    gap: var(--str-video__spacing-sm);
-
-    font-weight: 600;
-    font-size: var(--str-video__font-size-sm);
-    line-height: var(--str-video__spacing-lg);
-
-    &:not(:first-of-type) {
-      margin-top: var(--str-video__spacing-sm);
+    min-height: 32px;
+    border-radius: var(--str-video__radius-md);
+    margin-inline: var(--str-video__spacing-xxs);
+    padding-inline: var(--str-video__spacing-xs);
+
+    gap: var(--str-video__spacing-xs);
+
+    color: var(--str-video__text-primary);
+    font-weight: var(--str-video__typography-font-weight-semi-bold);
+    font-size: var(--str-video__typography-font-size-sm);
+    line-height: var(--str-video__typography-line-height-normal);
+
+    &__label {
+      flex: 1 0 0;
+      min-inline-size: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     &__icon {
       &--selected {
-        background-color: var(--str-video__brand-color1);
+        background-color: var(--str-video__accent-primary);
       }
     }
 
     &:hover {
-      background-color: var(--str-video__button-default-hover);
+      background-color: var(--str-video__background-utility-hover);
       cursor: pointer;
     }
 
-    &--selected,
-    &--active {
-      background-color: var(--str-video__button-default-hover);
+    &--disabled {
+      color: var(--str-video__text-disabled);
+
+      &:hover {
+        background-color: transparent;
+        cursor: default;
+      }
     }
 
     input[type='radio'] {
+      appearance: none;
       margin: 0;
-      height: 1rem;
-      width: 1rem;
+      inline-size: var(--str-video__icon-size-sm);
+      block-size: var(--str-video__icon-size-sm);
       display: grid;
       place-content: center;
 
+      background-color: var(--str-video__control-radio-button-bg);
+      border: var(--str-video__w100) solid
+        var(--str-video__border-core-on-elevation);
+      border-radius: var(--str-video__radius-max);
+
       &::before {
         content: '';
-        width: 0.5rem;
-        height: 0.5rem;
+        inline-size: var(--str-video__size-8);
+        block-size: var(--str-video__size-8);
+        border-radius: var(--str-video__radius-max);
+        background-color: var(--str-video__control-radio-button-indicator);
         transform: scale(0);
       }
-      &:checked::before {
-        transform: scale(1);
-      }
 
       &:checked {
-        border-color: var(--str-video__primary-color);
+        background-color: var(--str-video__control-radio-button-bg-selected);
+        border-color: var(--str-video__control-radio-button-bg-selected);
+
+        &::before {
+          transform: scale(1);
+        }
+      }
+
+      &:focus-visible {
+        outline: var(--str-video__w200) solid
+          var(--str-video__border-utility-focused);
+        outline-offset: var(--str-video__w100);
+      }
+
+      &:disabled {
+        border-color: var(--str-video__border-utility-disabled);
+        cursor: default;
+
+        &:checked {
+          background-color: var(--str-video__background-utility-disabled);
+          border-color: var(--str-video__background-utility-disabled);
+
+          &::before {
+            background-color: var(--str-video__text-disabled);
+          }
+        }
       }
     }
   }
 }
 
+.str-video__device-settings__device-kind:has(
+  .str-video__device-settings__option
+) {
+  inline-size: 296px;
+}
+
+.str-video__device-settings__device-kind:has(.str-video__device-preview) {
+  padding: var(--str-video__spacing-md);
+  gap: var(--str-video__spacing-xs);
+
+  .str-video__device-settings__device-selector-title {
+    margin-inline: 0;
+    padding-inline: 0;
+  }
+}
+
 .str-video__device-settings__separator {
-  border-color: var(--str-video__base-color3);
+  margin: var(--str-video__spacing-xxs) 0 3px;
+  border: 0;
+  border-block-start: var(--str-video__w100) solid
+    var(--str-video__border-core-default);
+}
+
+.str-video__device-settings__device-kind:last-child
+  .str-video__device-settings__separator:last-child {
+  display: none;
 }
 
 .str-video__audio-volume-indicator {
-  width: 100%;
   display: flex;
   align-items: center;
+  min-height: 32px;
+  margin-inline: var(--str-video__spacing-xxs);
+  padding-inline: var(--str-video__spacing-xs);
   gap: var(--str-video__spacing-xs);
-  padding: var(--str-video__spacing-sm) var(--str-video__spacing-md);
 
   .str-video__icon {
-    width: var(--str-video__font-size-xxl);
-    height: var(--str-video__font-size-xxl);
+    width: var(--str-video__icon-size-sm);
+    height: var(--str-video__icon-size-sm);
+    background-color: var(--str-video__text-secondary);
   }
 
   .str-video__audio-volume-indicator__bar {
     flex: 1;
-    background-color: var(--str-video__base-color1);
-    height: var(--str-video__spacing-xs);
-    border-radius: var(--str-video__border-radius-xs);
+    block-size: var(--str-video__size-8);
+    background-color: var(--str-video__control-progress-bar-track);
+    border-radius: var(--str-video__radius-max);
   }
 
   .str-video__audio-volume-indicator__bar-value {
     width: 100%;
     height: 100%;
-    background: var(--str-video__primary-color);
-    border-radius: var(--str-video__border-radius-xs);
+    background: var(--str-video__control-progress-bar-fill-audio);
+    border-radius: var(--str-video__radius-max);
     transform-origin: left center;
     // resting state; the live level is written inline by AudioVolumeIndicator
     transform: scaleX(0);
@@ -137,19 +211,19 @@
 .str-video__device-level-indicator {
   display: flex;
   align-items: center;
-  gap: 0.125rem;
+  gap: var(--str-video__spacing-xxxs);
   flex-shrink: 0;
   margin-left: auto;
 
   .str-video__device-level-indicator__bar {
-    width: 0.1875rem;
-    height: 0.75rem;
-    border-radius: var(--str-video__border-radius-xs);
-    background-color: var(--str-video__base-color3);
+    width: 3px;
+    height: var(--str-video__size-12);
+    border-radius: var(--str-video__radius-max);
+    background-color: var(--str-video__indicator-microphone-level-bar-inactive);
     transition: background-color 0.1s;
 
     &--active {
-      background-color: var(--str-video__primary-color);
+      background-color: var(--str-video__indicator-microphone-level-bar-active);
     }
   }
 }
@@ -165,12 +239,12 @@
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  max-width: 12rem;
+  max-width: 192px;
   cursor: pointer;
 
   .str-video__device-preview__label {
-    padding: var(--str-video__spacing-xs) 0;
-    font-size: var(--str-video__font-size-xs);
+    padding: var(--str-video__space-6) 0;
+    font-size: var(--str-video__typography-font-size-xs);
     text-align: center;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -182,30 +256,41 @@
     width: 100%;
     aspect-ratio: 16 / 9;
     object-fit: cover;
-    border-radius: var(--str-video__border-radius-sm);
-    border: 2px solid var(--str-video__base-color3);
-    background-color: var(--str-video__base-color5);
+    border-radius: var(--str-video__radius-sm);
+    border: var(--str-video__w200) solid var(--str-video__border-core-default);
+    background-color: var(--str-video__background-core-elevation-1);
     transform: scaleX(-1);
   }
 
   &--selected .str-video__device-video-preview__video {
-    border-color: var(--str-video__primary-color);
+    border-color: var(--str-video__accent-primary);
   }
 }
 
 .str-video__speaker-test {
-  padding: var(--str-video__spacing-sm) 0;
+  // the button sits on an elevated menu surface: Figma binds
+  // border/core/on-elevation on it (Core / Web / Mic Selector Menu / Test
+  // Speaker, 28100:111176), not the plain secondary border. overrides the
+  // secondary token because .str-video__button--secondary re-declares
+  // --button-border on the button element itself
+  --str-video__button-secondary-border: var(
+    --str-video__border-core-on-elevation
+  );
+
+  padding: var(--str-video__spacing-xs) var(--str-video__spacing-sm);
 
   .str-video__speaker-test__button-content {
     display: flex;
     align-items: center;
-    gap: var(--str-video__spacing-sm);
-    padding: 0 var(--str-video__spacing-sm);
-    font-size: var(--str-video__font-size-sm);
-    font-weight: 600;
+    gap: var(--str-video__spacing-xs);
+    padding: 0 var(--str-video__spacing-xs);
+    font-size: var(--str-video__typography-font-size-sm);
+    font-weight: var(--str-video__typography-font-weight-semi-bold);
   }
 
-  .str-video__composite-button__button {
-    width: 100% !important;
+  .str-video__composite-button,
+  .str-video__composite-button__group,
+  .str-video__composite-button__action {
+    inline-size: 100%;
   }
 }

package/src/DropdownSelect/DropdownSelect.scss

@@ -5,24 +5,31 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      background-color: var(--str-video__base-color4);
-      border-radius: var(--str-video__border-radius-lg);
-      border: 1px solid var(--str-video__base-color6);
+      gap: var(--str-video__spacing-xs);
+      background-color: transparent;
+      box-shadow: inset 0 0 0 var(--str-video__w100)
+        var(--str-video__border-core-default);
+      border-radius: var(--str-video__input-radius-select-input);
+      padding: var(--str-video__spacing-xs) var(--str-video__spacing-sm);
+      color: var(--str-video__input-text-default);
 
       &__label {
         display: flex;
         align-items: center;
-        font-weight: 600;
-        padding: var(--str-video__spacing-sm);
-        font-size: var(--str-video__font-size-xs);
-      }
+        gap: var(--str-video__spacing-xs);
+        min-inline-size: 0;
+        padding-block: var(--str-video__spacing-xxxs);
 
-      &__icon {
-        margin-right: var(--str-video__spacing-sm);
+        font-size: var(--str-video__typography-font-size-sm);
+        font-weight: var(--str-video__typography-font-weight-regular);
+        line-height: var(--str-video__typography-line-height-normal);
       }
 
-      &__chevron {
-        margin-right: var(--str-video__spacing-md);
+      &__text {
+        min-inline-size: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       & > *:hover,
@@ -31,7 +38,17 @@
       }
 
       &:hover {
-        border: 1px solid var(--str-video__brand-color1);
+        box-shadow: inset 0 0 0 var(--str-video__w100)
+          var(--str-video__border-utility-hover);
+      }
+      &[aria-expanded='true'] {
+        box-shadow: inset 0 0 0 var(--str-video__w100)
+          var(--str-video__border-utility-active);
+      }
+      &:focus-visible {
+        outline: var(--str-video__w200) solid
+          var(--str-video__border-utility-focused);
+        outline-offset: calc(var(--str-video__w200) * -1);
       }
     }
 
@@ -41,64 +58,57 @@
       position: absolute;
       z-index: 2;
       width: 100%;
-      margin-top: var(--str-video__spacing-sm);
-      background-color: var(--str-video__base-color6);
-      border-radius: var(--str-video__border-radius-lg);
-      padding: var(--str-video__spacing-md);
-      gap: var(--str-video__spacing-sm);
+      margin-top: var(--str-video__spacing-xxs);
+
+      background-color: var(--str-video__background-core-elevation-2);
+      border-radius: var(--str-video__radius-lg);
+      box-shadow: var(--str-video__box-shadow-3);
 
-      box-shadow: 0 0 24px -4px rgba(0, 0, 0, 0.64);
+      padding: var(--str-video__spacing-xxs) var(--str-video__spacing-none);
+      gap: var(--str-video__spacing-xxxs);
     }
 
     &-option {
       display: flex;
       align-items: center;
-      border-radius: var(--str-video__border-radius-lg);
-
-      padding: 8px 16px;
-      gap: 8px;
-
-      font-weight: 600;
-      font-size: var(--str-video__font-size-sm);
+      min-height: 32px;
+      margin-inline: var(--str-video__spacing-xxs);
+      padding-inline: var(--str-video__spacing-xs);
+      gap: var(--str-video__spacing-xs);
+      border-radius: var(--str-video__radius-md);
+
+      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 {
-        background-color: var(--str-video__button-default-hover);
+        background-color: var(--str-video__background-utility-hover);
         cursor: pointer;
       }
 
-      &--selected {
-        background-color: var(--str-video__button-primary-active);
-        color: var(--str-video__text-color1);
-
-        &:hover {
-          background-color: var(--str-video__button-primary-hover);
-        }
-      }
-    }
-
-    &-icon {
-      background-color: var(--str-video__icon-default);
-
-      .str-video__dropdown__option:hover & {
-        background-color: var(--str-video__icon-hover);
+      &:active {
+        background-color: var(--str-video__background-utility-pressed);
       }
 
-      .str-video__dropdown-option--selected & {
-        background-color: var(--str-video__text-color1);
+      &:focus-visible {
+        outline: var(--str-video__w200) solid
+          var(--str-video__border-utility-focused);
+        outline-offset: calc(var(--str-video__w200) * -1);
       }
-    }
 
-    &-label {
-      font-size: var(--str-video__font-size-xs);
-      .str-video__dropdown__option:hover & {
-        color: var(--str-video__base-color1);
+      &--selected {
+        background-color: var(--str-video__background-utility-selected);
       }
     }
   }
 }
 
-@media (min-width: 600px) {
-  .str-video__dropdown-selected__label {
-    font-size: var(--str-video__font-size-sm);
-  }
+.str-video__icon.str-video__dropdown-selected__icon,
+.str-video__icon.str-video__dropdown-selected__chevron {
+  background-color: var(--str-video__input-text-icon);
 }