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

package/src/ScreenShareOverlay/ScreenShareOverlay-theme.scss

@@ -1,19 +1,14 @@
 .str-video__screen-share-overlay {
-  background: var(--str-video__overlay-color);
+  background: var(--str-video__background-core-overlay-dark-strong);
+  color: var(--str-video__text-on-accent);
   backdrop-filter: blur(3px);
   border-radius: inherit;
 
-  .str-video__screen-share-overlay__title {
-    font-size: 1.3rem;
+  & > .str-video__icon {
+    background-color: var(--str-video__text-on-accent);
   }
 
-  .str-video__screen-share-overlay__button {
-    color: white;
-    background: var(--str-video__danger-color);
-    border-radius: var(--str-video__border-radius-xs);
-
-    &:hover {
-      background-color: var(--str-video__danger-color--accent);
-    }
+  .str-video__screen-share-overlay__title {
+    font-size: var(--str-video__typography-font-size-xl);
   }
 }

package/src/Search/SearchInput-layout.scss

@@ -1,29 +1,35 @@
 .str-video__search-input__container {
   display: flex;
-  gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  margin-inline: -0.25rem;
+  align-items: center;
+  gap: var(--str-video__spacing-xs);
+  padding: var(--str-video__spacing-xs) var(--str-video__spacing-sm);
+
+  &.str-video__search-input__container--active {
+    padding-inline-end: var(--str-video__spacing-xs);
+  }
 
   input {
     flex: 1;
     min-width: 0;
+    padding-block: var(--str-video__spacing-xxxs);
   }
 
   .str-video__search-input__clear-btn {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0;
-  }
-
-  .str-video__search-input__icon {
-    padding: 0.25rem;
+    flex-shrink: 0;
+    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);
   }
 
   .str-video__search-input__icon--active,
   .str-video__search-input__icon {
     display: inline-block;
-    width: 1.125rem;
-    height: 1.125rem;
+    flex-shrink: 0;
+    inline-size: var(--str-video__icon-size-sm);
+    block-size: var(--str-video__icon-size-sm);
   }
 }

package/src/Search/SearchInput-theme.scss

@@ -1,37 +1,51 @@
 @use '../utils';
 
 .str-video {
-  --str-video__search-input__container--color: var(--str-video__text-color1);
-  --str-video__search-input__container--background-color: var(
-    --str-video__background-color0
+  --str-video__search-input__container--color: var(
+    --str-video__input-text-default
   );
+  --str-video__search-input__container--background-color: transparent;
   --str-video__search-input__container--border-radius: var(
-    --str-video__border-radius-circle
+    --str-video__input-radius-search-input
   );
-  --str-video__search-input__container--border-block-start: 1px solid
-    transparent;
-  --str-video__search-input__container--border-block-end: 1px solid transparent;
-  --str-video__search-input__container--border-inline-start: 1px solid
-    transparent;
-  --str-video__search-input__container--border-inline-end: 1px solid transparent;
+  --str-video__search-input__container--box-shadow: inset 0 0 0
+    var(--str-video__w100) var(--str-video__border-core-default);
+  --str-video__search-input__container--border-block-start: none;
+  --str-video__search-input__container--border-block-end: none;
+  --str-video__search-input__container--border-inline-start: none;
+  --str-video__search-input__container--border-inline-end: none;
 
-  --str-video__search-input__placeholder-color: var(--str-video__text-color2);
+  --str-video__search-input__placeholder-color: var(
+    --str-video__input-text-placeholder
+  );
 
-  --str-video__search-input__icon--color: var(--str-video__text-color1);
+  --str-video__search-input__icon--color: var(--str-video__input-text-icon);
 }
 
-.str-video__search-input__container.str-video__search-input__container--active {
-  border-color: var(--str-video__primary-color);
-}
 .str-video__search-input__container {
   @include utils.component-layer-overrides('search-input__container');
 
+  &:hover {
+    box-shadow:
+      inset 0 0 0 var(--str-video__w100) var(--str-video__border-utility-hover),
+      inset 0 0 0 var(--str-video__w100) var(--str-video__border-core-default);
+  }
+
+  &:focus-within {
+    box-shadow:
+      inset 0 0 0 var(--str-video__w100) var(--str-video__border-utility-active),
+      inset 0 0 0 var(--str-video__w200)
+        var(--str-video__border-utility-focused);
+  }
+
   input {
     background-color: transparent;
     border: none;
     outline: none;
     color: inherit;
-    font-size: 13px;
+    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);
 
     &::placeholder {
       color: var(--str-video__search-input__placeholder-color);
@@ -42,23 +56,29 @@
     @include utils.apply-mask-image(
       var(--str-video__icon--magnifier-glass),
       var(--str-video__search-input__icon--color),
-      0.75rem 0.75rem
+      var(--str-video__icon-size-sm)
     );
   }
+
   .str-video__search-input__clear-btn {
     background-color: transparent;
-    border-radius: var(--str-video__border-radius-circle);
+    border-radius: var(--str-video__button-radius-full);
     border: none;
 
     &:hover {
       cursor: pointer;
+      background-color: var(--str-video__background-utility-hover);
+    }
+
+    &:active {
+      background-color: var(--str-video__background-utility-pressed);
     }
 
     .str-video__search-input__icon--active {
       @include utils.apply-mask-image(
-        var(--str-video__icon--close),
-        var(--str-video__search-input__icon--color),
-        0.75rem 0.75rem
+        var(--str-video__icon--x-circle),
+        var(--str-video__button-secondary-text),
+        var(--str-video__icon-size-sm)
       );
     }
   }

package/src/StreamCall.scss

@@ -1,6 +1,6 @@
 .str-video__call {
-  background-color: var(--str-video__background-color2);
-  color: var(--str-video__text-color1);
+  background-color: var(--str-video__background-core-elevation-1);
+  color: var(--str-video__text-primary);
   width: 100%;
   height: 100%;
   min-height: 0;
@@ -10,7 +10,7 @@
   flex-direction: column;
 
   .str-video {
-    background-color: var(--str-video__background-color2);
-    color: var(--str-video__text-color1);
+    background-color: var(--str-video__background-core-elevation-1);
+    color: var(--str-video__text-primary);
   }
 }

package/src/Tooltip/Tooltip-layout.scss

@@ -1,10 +1,18 @@
 .str-video__tooltip {
   display: flex;
   justify-content: center;
-  padding: var(--str-video__spacing-sm);
+  gap: var(--str-video__spacing-xs);
+  padding-block: var(--str-video__spacing-xxs);
+  padding-inline: var(--str-video__spacing-xs);
+  border-radius: var(--str-video__radius-md);
+
+  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);
+
   z-index: 4;
-  max-width: 250px;
-  width: max-content;
+  inline-size: max-content;
+  max-inline-size: 250px;
   white-space: initial;
   overflow-wrap: break-word;
 }

package/src/Tooltip/Tooltip-theme.scss

@@ -1,39 +1,22 @@
 @use '../utils';
 
 .str-video {
-  /* The border radius used for the borders of the component */
-  --str-video__tooltip--border-radius: var(--str-video__border-radius-xs);
+  --str-video__tooltip-bg: var(--str-video__background-core-inverse);
 
-  /* The text/icon color of the component */
-  --str-video__tooltip--color: var(--str-video__text-color1);
-
-  /* The background color of the component */
-  --str-video__tooltip--background-color: var(
-    --str-video__button-default-hover
-  );
-
-  /* Top border of the component */
+  --str-video__tooltip--background-color: var(--str-video__tooltip-bg);
+  --str-video__tooltip--color: var(--str-video__text-on-accent);
+  --str-video__tooltip--box-shadow: var(--str-video__box-shadow-3);
+  --str-video__tooltip--border-radius: var(--str-video__radius-md);
   --str-video__tooltip--border-block-start: none;
-
-  /* Bottom border of the component */
   --str-video__tooltip--border-block-end: none;
-
-  /* Left (right in RTL layout) border of the component */
   --str-video__tooltip--border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component */
   --str-video__tooltip--border-inline-end: none;
 
-  /* Box shadow applied to the component */
-  --str-video__tooltip--box-shadow: none;
+  &.str-video__theme-dark {
+    --str-video__tooltip-bg: var(--str-video__background-core-elevation-2);
+  }
 }
 
 .str-video__tooltip {
   @include utils.component-layer-overrides('tooltip');
-  font-size: 14px;
-  line-height: 1rem;
-
-  &::after {
-    background-color: var(--str-video__tooltip-background-color);
-  }
 }

package/src/Video/Video-theme.scss

@@ -1,3 +1,3 @@
 .str-video__video {
-  background-color: var(--str-video__background-color5);
+  background-color: var(--str-video__background-core-surface-subtle);
 }

package/src/Video/VideoPlaceholder-layout.scss

@@ -5,18 +5,4 @@
   display: flex;
   align-items: center;
   justify-content: center;
-
-  .str-video__video-placeholder__avatar {
-    width: 100px;
-    height: 100px;
-    object-fit: cover;
-  }
-
-  .str-video__video-placeholder__initials-fallback {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100px;
-    height: 100px;
-  }
 }

package/src/Video/VideoPlaceholder-theme.scss

@@ -1,16 +1,5 @@
 .str-video__video-placeholder {
-  background: var(--str-video__base-color6);
+  background: var(--str-video__background-core-surface-subtle);
+  border: var(--str-video__w100) solid var(--str-video__border-core-default);
   border-radius: inherit;
-
-  .str-video__video-placeholder__avatar {
-    border-radius: var(--str-video__border-radius-circle);
-  }
-
-  .str-video__video-placeholder__initials-fallback {
-    background-color: var(--str-video__primary-color);
-    border-radius: var(--str-video__border-radius-circle);
-    font-size: 32px;
-    font-weight: 600;
-    text-transform: uppercase;
-  }
 }

package/src/VideoPreview/VideoPreview-layout.scss

@@ -2,9 +2,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  $container-width: 500px;
-  width: $container-width;
-  height: calc(calc($container-width / 12) * 9);
+  width: 100%;
+  aspect-ratio: 16 / 9;
 
   .str-video__video-preview {
     object-fit: cover;

package/src/VideoPreview/VideoPreview-theme.scss

@@ -2,36 +2,43 @@
 
 .str-video {
   /* The font color applied inside the component */
-  --str-video__video-preview-container--color: var(--str-video__text-color1);
+  --str-video__video-preview-container--color: var(--str-video__text-primary);
 
   /* The background color of the component */
   --str-video__video-preview-container--background-color: var(
-    --str-video__background-color5
+    --str-video__background-core-surface-subtle
   );
 
   /* The border radius used for the borders of the component */
   --str-video__video-preview-container--border-radius: var(
-    --str-video__border-radius-xs
+    --str-video__radius-2xl
   );
-
   /* The border used for the borders of the component */
-  --str-video__video-preview-container--border-block-start: 4px solid
-    var(--str-video__primary-color);
-
+  --str-video__video-preview-container--border-block-start: var(
+      --str-video__w100
+    )
+    solid var(--str-video__border-core-default);
   /* The border used for the borders of the component */
-  --str-video__video-preview-container--border-block-end: 4px solid
-    var(--str-video__primary-color);
-
+  --str-video__video-preview-container--border-block-end: var(--str-video__w100)
+    solid var(--str-video__border-core-default);
   /* The border used for the borders of the component */
-  --str-video__video-preview-container--border-inline-start: 4px solid
-    var(--str-video__primary-color);
-
+  --str-video__video-preview-container--border-inline-start: var(
+      --str-video__w100
+    )
+    solid var(--str-video__border-core-default);
   /* The border used for the borders of the component */
-  --str-video__video-preview-container--border-inline-end: 4px solid
-    var(--str-video__primary-color);
+  --str-video__video-preview-container--border-inline-end: var(
+      --str-video__w100
+    )
+    solid var(--str-video__border-core-default);
 }
 
 .str-video__video-preview-container {
   @include utils.component-layer-overrides('video-preview-container');
   overflow: hidden;
+
+  &--speaking {
+    outline: var(--str-video__w200) solid var(--str-video__accent-primary);
+    outline-offset: calc(var(--str-video__w200) * -1);
+  }
 }