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

package/index.scss

@@ -1,11 +1,14 @@
 // main entry point for component styles
 
 @use 'src/base';
-@use 'src/global-theme-variables';
+@use 'src/variable-tokens';
+@use 'src/shadows';
+@use 'src/icons';
 @use 'src/utils';
 
 @use 'src/AudioBlockedNotification';
 @use 'src/Avatar';
+@use 'src/Badge';
 @use 'src/Button';
 @use 'src/BackgroundFilters';
 @use 'src/CallControls';
@@ -13,7 +16,6 @@
 @use 'src/CallParticipantList';
 @use 'src/CallPreview';
 @use 'src/CallRecodingList';
-@use 'src/CallStats';
 @use 'src/DeviceSettings';
 @use 'src/DropdownSelect';
 @use 'src/Icon';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-styling",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.1",
   "license": "See license in LICENSE",
   "scripts": {
     "clean": "rimraf dist",

package/project.json

@@ -23,7 +23,7 @@
         "trackDeps": true,
         "push": true,
         "skipCommitTypes": ["ci", "refactor", "test"],
-        "releaseAs": "premajor",
+        "releaseAs": "prerelease",
         "preid": "beta",
         "postTargets": [
           "@stream-io/video-styling:github",

package/src/AudioBlockedNotification/AudioBlockedNotification-layout.scss

@@ -1,7 +1,7 @@
 .str-video__audio-blocked-notification {
   position: absolute;
   inset: 0;
-  z-index: 4;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -12,13 +12,13 @@
   .str-video__audio-blocked-notification__message {
     display: inline-flex;
     align-items: center;
-    gap: 0.625rem;
-    padding: 0.625rem;
+    gap: var(--str-video__spacing-xs);
+    padding: var(--str-video__spacing-xs);
     max-width: calc(100% - 1.6rem);
 
     .str-video__icon {
-      width: 1.5rem;
-      height: 1.5rem;
+      width: var(--str-video__size-24);
+      height: var(--str-video__size-24);
       flex-shrink: 0;
     }
   }
@@ -32,8 +32,8 @@
   }
 
   .str-video__audio-blocked-notification__title {
-    font-size: 0.75rem;
-    font-weight: 600;
+    font-size: var(--str-video__typography-font-size-xs);
+    font-weight: var(--str-video__typography-font-weight-semi-bold);
     max-width: 100%;
     white-space: nowrap;
     overflow: hidden;
@@ -41,8 +41,8 @@
   }
 
   .str-video__audio-blocked-notification__subtitle {
-    font-size: 0.75rem;
-    font-weight: 400;
+    font-size: var(--str-video__typography-font-size-xs);
+    font-weight: var(--str-video__typography-font-weight-regular);
     max-width: 100%;
     white-space: nowrap;
     overflow: hidden;

package/src/AudioBlockedNotification/AudioBlockedNotification-theme.scss

@@ -1,23 +1,18 @@
 .str-video__audio-blocked-notification {
-  background: var(--str-video__audio-blocked-overlay-color);
+  background: var(--str-video__background-core-overlay-dark);
   border-radius: inherit;
-  transition: background-color 0.15s ease;
-
-  &:hover {
-    background: var(--str-video__audio-blocked-overlay-color-hovered);
-  }
 
   .str-video__audio-blocked-notification__message {
-    background-color: var(--str-video__background-color1);
-    border-radius: var(--str-video__border-radius-xs);
-    color: var(--str-video__text-color1);
+    background-color: var(--str-video__background-core-overlay-dark-strong);
+    border-radius: var(--str-video__radius-md);
+    color: var(--str-video__text-on-accent);
 
     .str-video__icon {
-      background-color: var(--str-video__text-color1);
+      background-color: var(--str-video__text-on-accent);
     }
   }
 
   .str-video__audio-blocked-notification__subtitle {
-    color: var(--str-video__text-color2);
+    color: var(--str-video__text-on-accent);
   }
 }

package/src/Avatar/Avatar-layout.scss

@@ -1,16 +1,32 @@
-@mixin default-avatar-dimensions {
-  width: 2rem;
-  height: 2rem;
+$avatar-sizes: (
+  'xs': var(--str-video__size-20),
+  'sm': var(--str-video__size-24),
+  'md': var(--str-video__size-32),
+  'lg': var(--str-video__size-40),
+  'xl': var(--str-video__size-48),
+  '2xl': var(--str-video__size-80),
+  '3xl': 104px,
+);
+
+.str-video__avatar,
+.str-video__avatar--initials-fallback {
+  width: var(--str-video__size-32);
+  height: var(--str-video__size-32);
 }
 
 .str-video__avatar {
-  @include default-avatar-dimensions;
   object-fit: cover;
 }
 
 .str-video__avatar--initials-fallback {
-  @include default-avatar-dimensions;
   display: flex;
   justify-content: center;
   align-items: center;
 }
+
+@each $name, $box in $avatar-sizes {
+  .str-video__avatar--size-#{$name} {
+    width: $box;
+    height: $box;
+  }
+}

package/src/Avatar/Avatar-theme.scss

@@ -1,24 +1,48 @@
-@use "../utils";
+@use '../utils';
+
+$avatar-font-sizes: (
+  'xs': var(--str-video__typography-font-size-xs),
+  'sm': var(--str-video__typography-font-size-sm),
+  'md': var(--str-video__typography-font-size-sm),
+  'lg': var(--str-video__typography-font-size-md),
+  'xl': var(--str-video__typography-font-size-lg),
+  '2xl': var(--str-video__typography-font-size-xl),
+  '3xl': var(--str-video__typography-font-size-xl),
+);
 
 .str-video {
   /* The font color applied inside the component */
-  --str-video__avatar--color: var(--str-video__text-color1);
+  --str-video__avatar--color: var(--str-video__avatar-text-default);
 
   /* The background color of the component */
-  --str-video__avatar--background-color: var(--str-video__background-color1);
+  --str-video__avatar--background-color: var(
+    --str-video__avatar-bg-placeholder
+  );
 
   /* The border radius used for the borders of the component */
-  --str-video__avatar--border-radius: var(--str-video__border-radius-circle);
-
+  --str-video__avatar--border-radius: var(--str-video__radius-max);
 }
+
 .str-video__avatar {
   @include utils.component-layer-overrides('avatar');
 }
 
 .str-video__avatar--initials-fallback {
-  background-color: var(--str-video__primary-color);
-  font-size: 1rem;
-  font-weight: 600;
-  border-radius: var(--str-video__border-radius-circle);
+  background-color: var(--str-video__avatar-bg-default);
+  color: var(--str-video__avatar-text-default);
+  font-size: var(--str-video__typography-font-size-sm);
+  font-weight: var(--str-video__typography-font-weight-semi-bold);
+  border-radius: var(--str-video__radius-max);
   text-transform: uppercase;
 }
+
+@each $name, $font-size in $avatar-font-sizes {
+  .str-video__avatar--initials-fallback.str-video__avatar--size-#{$name} {
+    font-size: $font-size;
+  }
+}
+
+.str-video__avatar--outlined {
+  box-shadow: inset 0 0 0 var(--str-video__w200)
+    var(--str-video__border-core-on-inverse);
+}

package/src/Badge/Badge-layout.scss

@@ -0,0 +1,52 @@
+.str-video__badge {
+  --str-video__badge-size: var(--str-video__size-20);
+  --str-video__badge-glyph: var(--str-video__size-16);
+  --str-video__badge-font-size: var(--str-video__typography-font-size-sm);
+
+  &--size-xs {
+    --str-video__badge-size: var(--str-video__size-16);
+    --str-video__badge-glyph: var(--str-video__size-12);
+    --str-video__badge-font-size: var(--str-video__typography-font-size-xxs);
+  }
+
+  &--size-sm {
+    --str-video__badge-size: var(--str-video__size-20);
+    --str-video__badge-glyph: var(--str-video__size-16);
+    --str-video__badge-font-size: var(--str-video__typography-font-size-sm);
+  }
+
+  &--size-md {
+    --str-video__badge-size: var(--str-video__size-24);
+    --str-video__badge-glyph: var(--str-video__size-20);
+    --str-video__badge-font-size: var(--str-video__typography-font-size-sm);
+  }
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  flex-shrink: 0;
+
+  min-inline-size: var(--str-video__badge-size);
+  block-size: var(--str-video__badge-size);
+  padding-inline: var(--str-video__spacing-xxs);
+  border-radius: var(--str-video__radius-max);
+  border: var(--str-video__w100) solid;
+  white-space: nowrap;
+
+  font-size: var(--str-video__badge-font-size);
+  font-weight: var(--str-video__typography-font-weight-bold);
+  line-height: 1;
+
+  &--icon {
+    inline-size: var(--str-video__badge-size);
+    padding-inline: 0;
+    overflow: hidden;
+  }
+
+  .str-video__icon {
+    background-color: currentColor;
+    inline-size: var(--str-video__badge-glyph);
+    block-size: var(--str-video__badge-glyph);
+  }
+}

package/src/Badge/Badge-theme.scss

@@ -0,0 +1,39 @@
+.str-video__badge {
+  --str-video__badge-bg: var(--str-video__badge-bg-default);
+  --str-video__badge-fg: var(--str-video__badge-text);
+
+  &--default {
+    --str-video__badge-bg: var(--str-video__badge-bg-default);
+    --str-video__badge-fg: var(--str-video__badge-text);
+  }
+
+  &--primary {
+    --str-video__badge-bg: var(--str-video__badge-bg-primary);
+    --str-video__badge-fg: var(--str-video__badge-text-on-accent);
+  }
+
+  &--error {
+    --str-video__badge-bg: var(
+      --str-video__control-call-control-error-badge-bg
+    );
+    --str-video__badge-fg: var(
+      --str-video__control-call-control-error-badge-text
+    );
+
+    border: 0;
+  }
+
+  &--neutral {
+    --str-video__badge-bg: var(--str-video__badge-bg-neutral);
+    --str-video__badge-fg: var(--str-video__badge-text-on-accent);
+  }
+
+  &--inverse {
+    --str-video__badge-bg: var(--str-video__badge-bg-inverse);
+    --str-video__badge-fg: var(--str-video__badge-text-on-inverse);
+  }
+
+  background-color: var(--str-video__badge-bg);
+  color: var(--str-video__badge-fg);
+  border-color: var(--str-video__badge-border);
+}

package/src/Badge/index.scss

@@ -0,0 +1,2 @@
+@use 'Badge-layout';
+@use 'Badge-theme';

package/src/Button/Button-layout.scss

@@ -1,105 +1,78 @@
 .str-video__button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--str-video__border-radius-md);
-  padding: var(--str-video__spacing-sm) var(--str-video__spacing-lg);
-  text-align: center;
-  min-width: 120px;
-  width: 100%;
-  font-size: var(--str-video__font-size-md);
-  font-weight: 500;
-  border: 1px solid transparent;
-  color: var(--str-video__text-color1);
-
-  background-color: var(--str-video__button-primary-base);
-
-  &:not([disabled]):hover {
-    background-color: var(--str-video__button-primary-hover);
-    cursor: pointer;
-  }
-
-  &__icon {
-    margin-inline-end: var(--str-video__spacing-xs);
-    background-color: var(--str-video__text-color1);
+  --str-video__button-py: var(--str-video__button-padding-y-md);
+  --str-video__button-px: var(--str-video__button-padding-x-with-label-md);
+  --str-video__button-px-icon-only: var(
+    --str-video__button-padding-x-icon-only-md
+  );
+  --str-video__button-radius: var(--str-video__button-radius-md);
+  --str-video__button-visual: var(--str-video__button-visual-height-md);
+
+  &--size-xs {
+    --str-video__button-py: var(--str-video__button-padding-y-xs);
+    --str-video__button-px: var(--str-video__button-padding-x-with-label-xs);
+    --str-video__button-px-icon-only: var(
+      --str-video__button-padding-x-icon-only-xs
+    );
+    --str-video__button-radius: var(--str-video__button-radius-sm);
+    --str-video__button-visual: var(--str-video__button-visual-height-xs);
   }
 
-  &:disabled {
-    background-color: var(--str-video__button-default-disabled);
-    cursor: not-allowed;
+  &--size-sm {
+    --str-video__button-py: var(--str-video__button-padding-y-sm);
+    --str-video__button-px: var(--str-video__button-padding-x-with-label-sm);
+    --str-video__button-px-icon-only: var(
+      --str-video__button-padding-x-icon-only-sm
+    );
+    --str-video__button-radius: var(--str-video__button-radius-sm);
+    --str-video__button-visual: var(--str-video__button-visual-height-sm);
   }
-}
 
-.str-video__composite-button {
-  &--caption {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    gap: 0.25rem;
+  &--size-md {
+    --str-video__button-py: var(--str-video__button-padding-y-md);
+    --str-video__button-px: var(--str-video__button-padding-x-with-label-md);
+    --str-video__button-px-icon-only: var(
+      --str-video__button-padding-x-icon-only-md
+    );
+    --str-video__button-radius: var(--str-video__button-radius-md);
+    --str-video__button-visual: var(--str-video__button-visual-height-md);
   }
 
-  .str-video__composite-button__button-group {
-    display: flex;
-    align-items: center;
-
-    .str-video__composite-button__button {
-      all: unset;
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 12px;
-      padding: 0.5rem;
-
-      &:not([disabled]):hover {
-        cursor: pointer;
-      }
-    }
-
-    .str-video__menu-toggle-button {
-      padding: 0;
-      margin-inline-start: -30px;
-      margin-inline-end: 8px;
-    }
-
-    .str-video__loading-indicator__icon {
-      width: 1.25rem;
-      height: 1.25rem;
-      -webkit-mask-size: 1.25rem;
-      mask-size: 1.25rem;
-    }
+  &--size-lg {
+    --str-video__button-py: var(--str-video__button-padding-y-lg);
+    --str-video__button-px: var(--str-video__button-padding-x-with-label-lg);
+    --str-video__button-px-icon-only: var(
+      --str-video__button-padding-x-icon-only-lg
+    );
+    --str-video__button-radius: var(--str-video__button-radius-lg);
+    --str-video__button-visual: var(--str-video__button-visual-height-lg);
   }
 
-  &.str-video__composite-button--menu .str-video__composite-button__button {
-    padding-inline-end: 2.5rem;
-  }
-}
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--str-video__spacing-xs);
+  white-space: nowrap;
+  block-size: var(--str-video__button-visual);
+  min-inline-size: var(--str-video__button-visual);
+  border: none;
+  border-radius: var(--str-video__button-radius);
 
-.str-video__call-controls__button {
-  padding: 0.5rem;
+  padding-block: var(--str-video__button-py);
+  padding-inline: var(--str-video__button-px);
 
-  &[disabled] {
-    cursor: not-allowed;
-  }
+  font-family: inherit;
+  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);
 
-  &:hover,
-  &:hover > *:hover {
+  &:not(:disabled) {
     cursor: pointer;
   }
-}
 
-.str-video__text-button {
-  all: unset;
-  padding: 5px;
-  font-size: 12px;
-  border-radius: var(
-    --str-video__participant-list-header__close-button--border-radius
-  );
-  background: var(
-    --str-video__participant-list-header__close-button--background-color
-  );
-}
-
-.str-video__call-recording-list-item__action-button {
-  border: none;
+  &--icon-only {
+    justify-self: center;
+    aspect-ratio: 1 / 1;
+    padding: var(--str-video__button-px-icon-only);
+    border-radius: var(--str-video__button-radius-full);
+  }
 }