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

package/src/Button/Button-theme.scss

@@ -1,178 +1,113 @@
-@use '../utils';
-
-.str-video {
-  /* The font color applied inside the component */
-  --str-video__composite-button__button-group--color: var(
-    --str-video__text-color1
-  );
-
-  /* The background color of the component */
-  --str-video__composite-button__button-group--background-color: var(
-    --str-video__button-primary-base
-  );
-
-  /* The active background color of the component */
-  --str-video__composite-button__button-group-active--background-color: var(
-    --str-video__button-primary-active
-  );
-
-  --str-video__composite-button__button-group-active-primary--background-color: var(
-    --str-video__button-primary-active
-  );
-
-  --str-video__composite-button__button-group-active-secondary--background-color: var(
-    --str-video__button-secondary-active
-  );
-
-  --str-video__composite-button__button-group-active-secondary-hover--background-color: var(
-    --str-video__button-secondary-hover
-  );
-
-  /* The hover background color of the component */
-  --str-video__composite-button__button-group-hover--background-color: var(
-    --str-video__button-default-hover
+.str-video__button {
+  --str-video__button-bg: var(--str-video__button-primary-bg);
+  --str-video__button-border: var(--str-video__button-primary-border);
+  --str-video__button-fg: var(--str-video__button-primary-text);
+  --str-video__button-fg-on-fill: var(
+    --str-video__button-primary-text-on-accent
   );
-
-  /* The border radius used for the borders of the component */
-  --str-video__composite-button__button-group--border-radius: var(
-    --str-video__border-radius-xs
-  );
-}
-
-.str-video__composite-button__button-group {
-  @include utils.component-layer-overrides('composite-button__button-group');
-  background-color: var(
-    --str-video__composite-button__button-group--background-color
+  --str-video__button-border-disabled: var(
+    --str-video__border-utility-disabled
   );
-  border-radius: var(--str-video__border-radius-circle);
 
-  .str-video__call-controls__button.str-video__menu-toggle-button {
-    background-color: var(--str-video__button-primary-base);
-
-    &:hover {
-      background-color: var(--str-video__button-default-hover);
-    }
-
-    &--active {
-      background-color: var(
-        --str-video__composite-button__button-group-hover--background-color
-      );
-      color: white;
-
-      &:hover {
-        background-color: var(
-          --str-video__composite-button__button-group-hover--background-color
-        );
-      }
-
-      &:disabled {
-        background-color: var(
-          --str-video__composite-button__button-group-hover--background-color
-        );
-      }
-    }
-  }
-
-  &.str-video__composite-button__button-group--active {
-    background-color: var(
-      --str-video__composite-button__button-group-active--background-color
+  &--primary {
+    --str-video__button-bg: var(--str-video__button-primary-bg);
+    --str-video__button-border: var(--str-video__button-primary-border);
+    --str-video__button-fg: var(--str-video__button-primary-text);
+    --str-video__button-fg-on-fill: var(
+      --str-video__button-primary-text-on-accent
     );
-
-    &:hover {
-      background-color: var(--str-video__button-primary-hover);
-    }
-
-    .str-video__icon {
-      background-color: var(--str-video__icon-active);
-    }
   }
 
-  &.str-video__composite-button__button-group--active-primary {
-    background-color: var(
-      --str-video__composite-button__button-group-active-primary--background-color
+  &--secondary {
+    --str-video__button-bg: var(--str-video__button-secondary-bg);
+    --str-video__button-border: var(--str-video__button-secondary-border);
+    --str-video__button-fg: var(--str-video__button-secondary-text);
+    --str-video__button-fg-on-fill: var(
+      --str-video__button-secondary-text-on-accent
     );
   }
 
-  &.str-video__composite-button__button-group--active-secondary {
-    background-color: var(
-      --str-video__composite-button__button-group-active-secondary--background-color
+  &--destructive {
+    --str-video__button-bg: var(--str-video__button-destructive-bg);
+    --str-video__button-border: var(--str-video__button-destructive-border);
+    --str-video__button-fg: var(--str-video__button-destructive-text);
+    --str-video__button-fg-on-fill: var(
+      --str-video__button-destructive-text-on-accent
     );
   }
-}
-
-.str-video__composite-button__caption {
-  font-size: 12px;
-  line-height: 15px;
-  text-align: center;
-  overflow: hidden;
-  white-space: nowrap;
-}
 
-.str-video__composite-button__button-group:not(
-    .str-video__composite-button__button-group--disabled
-  ):hover {
-  background-color: var(
-    --str-video__composite-button__button-group-hover--background-color
-  );
-
-  &.str-video__composite-button__button-group--active-secondary:hover {
-    background-color: var(
-      --str-video__composite-button__button-group-active-secondary-hover--background-color
+  background-color: transparent;
+
+  background-image:
+    linear-gradient(
+      to bottom,
+      var(--str-video__button-overlay, transparent),
+      var(--str-video__button-overlay, transparent)
+    ),
+    linear-gradient(
+      to bottom,
+      var(--str-video__button-selected, transparent),
+      var(--str-video__button-selected, transparent)
     );
-  }
 
   .str-video__icon {
-    background-color: var(--str-video__icon-hover);
+    background-color: currentColor;
   }
-}
-
-.str-video__call-controls__button {
-  border-radius: var(--str-video__border-radius-circle);
-  text-decoration: none;
-  box-shadow: none;
-  border: none;
-  background-color: var(--str-video__button-primary-base);
-
-  &:hover {
-    text-decoration: none;
-    background-color: var(
-      --str-video__composite-button__button-group-hover--background-color
-    );
 
-    .str-video__icon {
-      background-color: var(--str-video__icon-hover);
-    }
+  &--solid {
+    background-color: var(--str-video__button-bg);
+    color: var(--str-video__button-fg-on-fill);
   }
 
-  &--variant-danger {
-    background-color: var(--str-video__button-tertiary-base);
+  &--outline {
+    box-shadow: inset 0 0 0 var(--str-video__w100)
+      var(--str-video__button-border);
+    color: var(--str-video__button-fg);
+  }
 
-    .str-video__icon {
-      background-color: white;
-    }
+  &--ghost {
+    color: var(--str-video__button-fg);
+  }
 
+  &:not(:disabled):not([aria-disabled='true']) {
     &:hover {
-      background-color: var(--str-video__button-tertiary-hover);
+      --str-video__button-overlay: var(--str-video__background-utility-hover);
     }
-  }
 
-  &--variant-success {
-    background-color: var(--str-video__info-color);
+    &[aria-expanded='true'],
+    &:active {
+      --str-video__button-overlay: var(--str-video__background-utility-pressed);
+    }
 
-    &:hover {
-      background-color: var(--str-video__info-color--accent);
+    &[aria-pressed='true'] {
+      --str-video__button-selected: var(
+        --str-video__background-utility-selected
+      );
     }
   }
 
-  &--variant-active {
-    background-color: var(--str-video__button-primary-active);
+  &:not(:disabled):focus-visible {
+    outline: var(--str-video__w200) solid
+      var(--str-video__border-utility-focused);
+    outline-offset: calc(var(--str-video__w200) * -1);
+  }
 
-    &:hover {
-      background-color: var(--str-video__button-primary-hover);
+  &:disabled,
+  &[aria-disabled='true'] {
+    color: var(--str-video__text-disabled);
+    cursor: default;
+
+    &.str-video__button--solid {
+      background-color: var(--str-video__background-utility-disabled);
+    }
+
+    &.str-video__button--outline {
+      box-shadow: inset 0 0 0 var(--str-video__w100)
+        var(--str-video__button-border-disabled);
     }
   }
 
-  &--enabled {
-    background: var(--str-video__background-color7);
+  &[aria-disabled='true'] {
+    pointer-events: none;
   }
 }

package/src/Button/CompositeButton.scss

@@ -0,0 +1,125 @@
+.str-video__composite-button {
+  --str-video__composite-button-caret: var(
+    --str-video__button-visual-height-xs
+  );
+  --str-video__composite-button-lead: var(--str-video__spacing-sm);
+
+  &--size-sm {
+    --str-video__composite-button-lead: var(--str-video__spacing-xs);
+  }
+
+  &--size-lg {
+    --str-video__composite-button-caret: var(
+      --str-video__button-visual-height-sm
+    );
+    --str-video__composite-button-lead: var(--str-video__spacing-md);
+  }
+
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--str-video__spacing-xxs);
+
+  &__group {
+    position: relative;
+    display: inline-flex;
+  }
+
+  &__action {
+    position: relative;
+
+    & > .str-video__badge {
+      position: absolute;
+      z-index: 1;
+      inset-block-start: calc(var(--str-video__spacing-xxs) * -1);
+      inset-inline-end: calc(var(--str-video__spacing-xxs) * -1);
+      pointer-events: none;
+    }
+  }
+
+  &__caption {
+    max-inline-size: 100%;
+    overflow: hidden;
+    font-size: var(--str-video__typography-font-size-xs);
+    line-height: var(--str-video__typography-line-height-tight);
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &--menu {
+    .str-video__composite-button__action {
+      aspect-ratio: auto;
+      padding-inline: var(--str-video__composite-button-lead)
+        calc(
+          2 * var(--str-video__spacing-xs) +
+            var(--str-video__composite-button-caret)
+        );
+    }
+
+    .str-video__composite-button__caret {
+      position: absolute;
+      inset-inline-end: var(--str-video__spacing-xs);
+      inset-block-start: 50%;
+      translate: 0 -50%;
+    }
+  }
+
+  &--size-lg .str-video__composite-button__caret {
+    --str-video__button-visual: var(--str-video__button-visual-height-sm);
+    padding: var(--str-video__button-padding-x-icon-only-sm);
+  }
+
+  @each $variant in primary, secondary, destructive {
+    &--#{$variant} {
+      --str-video__composite-button-caret-bg: var(
+        --str-video__button-#{$variant}-bg
+      );
+      --str-video__composite-button-caret-fg: var(
+        --str-video__button-#{$variant}-text-on-accent
+      );
+
+      &.str-video__composite-button--outline,
+      &.str-video__composite-button--ghost {
+        --str-video__composite-button-caret-bg: transparent;
+        --str-video__composite-button-caret-fg: var(
+          --str-video__button-#{$variant}-text
+        );
+      }
+    }
+  }
+
+  .str-video__composite-button__caret:not(:disabled):not(
+      [aria-disabled='true']
+    ) {
+    background-color: var(--str-video__composite-button-caret-bg);
+    color: var(--str-video__composite-button-caret-fg);
+  }
+
+  &--primary,
+  &--destructive {
+    .str-video__composite-button__action.str-video__button[aria-pressed='true'] {
+      --str-video__button-selected: transparent;
+    }
+  }
+
+  &:has(
+    > .str-video__composite-button__group
+      > .str-video__composite-button__caret[aria-expanded='true']
+  ) {
+    > .str-video__composite-button__group
+      > .str-video__composite-button__action {
+      --str-video__button-selected: var(
+        --str-video__background-utility-selected
+      );
+    }
+  }
+}
+
+.str-video__composite-button.str-video__device-unavailable {
+  .str-video__composite-button__action,
+  .str-video__composite-button__caret {
+    --str-video__button-overlay: var(--str-video__background-utility-disabled);
+    color: var(--str-video__text-disabled);
+  }
+}

package/src/Button/index.scss

@@ -1,2 +1,3 @@
 @use 'Button-layout';
 @use 'Button-theme';
+@use 'CompositeButton';

package/src/CallControls/CallControls-layout.scss

@@ -1,17 +1,16 @@
 .str-video__call-controls {
   display: flex;
   justify-content: center;
-  gap: 1rem;
-  padding: 1rem 0;
+  gap: var(--str-video__spacing-md);
+  padding: var(--str-video__spacing-md) var(--str-video__spacing-none);
 
   .str-video__reactions-menu {
-    background-color: var(--str-video__base-color6);
     display: flex;
+    align-items: center;
 
-    padding: var(--str-video__spacing-sm);
-    gap: 0.5rem;
-
-    border-radius: var(--str-video__border-radius-lg);
+    padding: var(--str-video__spacing-sm) var(--str-video__spacing-md)
+      var(--str-video__spacing-md);
+    gap: var(--str-video__spacing-xxxs);
 
     &--horizontal {
       flex-direction: row;
@@ -22,70 +21,35 @@
     }
 
     .str-video__reactions-menu__button {
-      font-family:
-        'Twemoji Mozilla',
-        Apple Color Emoji,
-        'Segoe UI Emoji',
-        'Noto Color Emoji',
-        'EmojiOne Color';
-      font-size: 1.2rem;
-      height: 38px;
-      width: 38px;
-      background-color: var(--str-video__button-primary-base);
-      border-radius: var(--str-video__border-radius-circle);
-      border: 1px solid transparent;
+      font-family: system-ui;
+      font-size: var(--str-video__emoji-md);
+      line-height: 1;
+      padding: 0;
+      height: var(--str-video__button-visual-height-md);
+      width: var(--str-video__button-visual-height-md);
+      color: var(--str-video__text-primary);
+      background-color: transparent;
+      border: none;
+      border-radius: var(--str-video__radius-max);
       display: flex;
       align-items: center;
       justify-content: center;
 
-      &:hover {
-        background-color: var(--str-video__button-primary-hover);
+      &:hover:not(:disabled) {
+        background-color: var(--str-video__background-utility-hover);
         cursor: pointer;
       }
+
+      &:active:not(:disabled) {
+        background-color: var(--str-video__background-utility-pressed);
+      }
     }
   }
 }
 
-.str-video__no-media-permission,
-.str-video__system-muted,
-.str-video__pending-permission {
-  position: absolute;
-  height: 12px;
-  width: 12px;
-  outline: 1px solid var(--str-video__base-color6);
-  border-radius: var(--str-video__border-radius-circle);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  font-size: var(--str-video__font-size-xxs);
-  cursor: pointer;
-  font-weight: 600;
-  top: 0;
-  right: -3px;
-}
-
-.str-video__no-media-permission {
-  background-color: var(--str-video__alert-caution);
-  color: var(--str-video__base-color4);
-}
-
-.str-video__pending-permission {
-  background-color: var(--str-video__button-secondary-active);
-  color: var(--str-video__text-color1);
-}
-
-.str-video__system-muted {
-  background-color: var(--str-video__alert-caution);
-  color: var(--str-video__base-color4);
-}
-
-.str-video__composite-button.str-video__device-unavailable {
-  .str-video__composite-button__button-group {
-    background-color: var(--str-video__button-default-disabled);
-
-    &:hover {
-      background-color: var(--str-video__button-default-hover);
-    }
-  }
+.str-video__accept-call-button {
+  --str-video__button-bg: var(--str-video__control-accept-call-button-bg);
+  --str-video__button-fg-on-fill: var(
+    --str-video__control-accept-call-button-text
+  );
 }

package/src/CallControls/CancelCallButton.scss

@@ -1,114 +1,68 @@
 .str-video__end-call {
   &__confirmation {
-    padding: var(--str-video__spacing-lg);
-    gap: var(--str-video__spacing-md);
+    padding: var(--str-video__spacing-md);
+    gap: var(--str-video__spacing-xs);
+    inline-size: 224px;
 
     display: flex;
     flex-direction: column;
   }
-
-  &__leave,
-  &__end {
-    min-width: 196px;
-    color: var(--str-video__text-color1);
-    border: 1px solid transparent;
-    padding: calc(var(--str-video__spacing-sm) - 1px)
-      var(--str-video__spacing-lg);
-
-    &-icon {
-      background-color: var(--str-video__text-color1);
-    }
-  }
-
-  &__leave {
-    background-color: var(--str-video__button-tertiary-base);
-
-    &:hover {
-      background-color: var(--str-video__button-tertiary-hover);
-    }
-  }
-
-  &__end {
-    background-color: var(--str-video__button-primary-base);
-    border-color: var(--str-video__button-default-hover);
-
-    &:hover {
-      background-color: var(--str-video__button-tertiary-hover);
-      border-color: transparent;
-    }
-  }
-}
-
-.str-video__end-call.str-video__end-call__leave-icon,
-.str-video__icon.str-video__end-call__end-icon {
-  background-color: var(--str-video__text-color1);
 }
 
 .str-video__end-recording__confirmation {
-  background-color: var(--str-video__base-color7);
-  border-radius: var(--str-video__border-radius-lg);
-  padding: var(--str-video__spacing-xl);
-  gap: var(--str-video__spacing-lg);
+  inline-size: 304px;
+  padding: var(--str-video__spacing-2xl) var(--str-video__spacing-xl)
+    var(--str-video__spacing-xl);
+  gap: var(--str-video__spacing-2xl);
+
   display: flex;
   flex-direction: column;
+  background-color: var(--str-video__background-core-elevation-1);
+  border-radius: var(--str-video__radius-xl);
+  box-shadow: var(--str-video__box-shadow-4);
 }
 
 .str-video__end-recording__header {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+  align-items: center;
   gap: var(--str-video__spacing-md);
+  inline-size: 100%;
+
+  .str-video__icon {
+    inline-size: var(--str-video__icon-size-lg);
+    block-size: var(--str-video__icon-size-lg);
+    background-color: var(--str-video__text-tertiary);
+  }
+}
+
+.str-video__end-recording__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--str-video__spacing-xs);
+  inline-size: 100%;
+  text-align: center;
 }
 
 .str-video__end-recording__heading {
-  font-size: var(--str-video__font-size-lg);
-  font-weight: 600;
   margin: 0;
+  color: var(--str-video__text-primary);
+  font-size: var(--str-video__typography-font-size-md);
+  font-weight: var(--str-video__typography-font-weight-semi-bold);
+  line-height: var(--str-video__typography-line-height-normal);
 }
 
 .str-video__end-recording__description {
   margin: 0;
-  color: var(--str-video__text-color2);
-  font-size: var(--str-video__font-size-sm);
+  color: var(--str-video__text-secondary);
+  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);
 }
 
 .str-video__end-recording__actions {
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  gap: var(--str-video__spacing-md);
-
-  .str-video__composite-button {
-    width: 100%;
-    gap: var(--str-video__spacing-md);
-
-    &:first-of-type {
-      background-color: transparent;
-
-      .str-video__composite-button__button-group {
-        background-color: transparent;
-        border: 1px solid var(--str-video__base-color2);
-        width: 100%;
-        justify-content: center;
-
-        &:hover {
-          background-color: var(--str-video__button-default-hover);
-        }
-      }
-    }
-    .str-video__composite-button__button-group {
-      background-color: var(--str-video__button-tertiary-base);
-      width: 100%;
-      justify-content: center;
-
-      .str-video__text-button {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-      }
-
-      &:hover {
-        background-color: var(--str-video__button-tertiary-hover);
-      }
-    }
-  }
+  flex-direction: column;
+  gap: var(--str-video__spacing-xs);
+  inline-size: 100%;
 }