@stream-io/video-styling 1.2.0 → 1.3.0

package/index.scss

@@ -4,28 +4,28 @@
 @use 'src/global-theme-variables';
 @use 'src/utils';
 
-@import 'src/Avatar';
-@import 'src/Button';
-@import 'src/BackgroundFilters';
-@import 'src/CallControls';
-@import 'src/CallLayout';
-@import 'src/CallParticipantList';
-@import 'src/CallPreview';
-@import 'src/CallRecodingList';
-@import 'src/CallStats';
-@import 'src/DeviceSettings';
-@import 'src/DropdownSelect';
-@import 'src/Icon';
-@import 'src/LoadingIndicator';
-@import 'src/Menu';
-@import 'src/Notification';
-@import 'src/ParticipantView';
-@import 'src/Permissions';
-@import 'src/Reaction';
-@import 'src/RingingCall';
-@import 'src/ScreenShareOverlay';
-@import 'src/Search';
-@import 'src/StreamCall';
-@import 'src/Tooltip';
-@import 'src/Video';
-@import 'src/VideoPreview';
+@use 'src/Avatar';
+@use 'src/Button';
+@use 'src/BackgroundFilters';
+@use 'src/CallControls';
+@use 'src/CallLayout';
+@use 'src/CallParticipantList';
+@use 'src/CallPreview';
+@use 'src/CallRecodingList';
+@use 'src/CallStats';
+@use 'src/DeviceSettings';
+@use 'src/DropdownSelect';
+@use 'src/Icon';
+@use 'src/LoadingIndicator';
+@use 'src/Menu';
+@use 'src/Notification';
+@use 'src/ParticipantView';
+@use 'src/Permissions';
+@use 'src/Reaction';
+@use 'src/RingingCall';
+@use 'src/ScreenShareOverlay';
+@use 'src/Search';
+@use 'src/StreamCall';
+@use 'src/Tooltip';
+@use 'src/Video';
+@use 'src/VideoPreview';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-styling",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "license": "See license in LICENSE",
   "scripts": {
     "clean": "rimraf dist",
@@ -9,6 +9,6 @@
   },
   "devDependencies": {
     "rimraf": "^6.0.1",
-    "sass": "^1.69.5"
+    "sass": "^1.89.2"
   }
 }

package/src/Avatar/index.scss

@@ -1,2 +1,2 @@
-@import "Avatar-layout";
-@import "Avatar-theme";
+@use 'Avatar-layout';
+@use 'Avatar-theme';

package/src/BackgroundFilters/index.scss

@@ -1 +1 @@
-@import 'BackgroundFilters-layout';
+@use 'BackgroundFilters-layout';

package/src/Button/Button-layout.scss

@@ -20,7 +20,7 @@
   }
 
   &__icon {
-    margin-right: var(--str-video__spacing-xs);
+    margin-inline-end: var(--str-video__spacing-xs);
     background-color: var(--str-video__text-color1);
   }
 
@@ -58,8 +58,8 @@
 
     .str-video__menu-toggle-button {
       padding: 0;
-      margin-left: -30px;
-      margin-right: 8px;
+      margin-inline-start: -30px;
+      margin-inline-end: 8px;
     }
 
     .str-video__loading-indicator__icon {
@@ -71,7 +71,7 @@
   }
 
   &.str-video__composite-button--menu .str-video__composite-button__button {
-    padding-right: 2.5rem;
+    padding-inline-end: 2.5rem;
   }
 }
 

package/src/Button/index.scss

@@ -1,2 +1,2 @@
-@import "Button-layout";
-@import "Button-theme";
+@use 'Button-layout';
+@use 'Button-theme';

package/src/CallControls/index.scss

@@ -1,2 +1,2 @@
-@import 'CallControls-layout';
-@import 'CancelCallButton';
+@use 'CallControls-layout';
+@use 'CancelCallButton';

package/src/CallLayout/index.scss

@@ -1,5 +1,5 @@
-@import './LivestreamLayout-layout';
-@import './PaginatedGridLayout-layout';
-@import './SpeakerLayout-layout';
-@import './PipLayout-layout.scss';
-@import './PipLayout-theme.scss';
+@use 'LivestreamLayout-layout';
+@use 'PaginatedGridLayout-layout';
+@use 'SpeakerLayout-layout';
+@use 'PipLayout-layout.scss';
+@use 'PipLayout-theme.scss';

package/src/CallParticipantList/CallParticipantList-layout.scss

@@ -78,8 +78,8 @@ $scope-name: 'str-video__participant-list';
       $indicator-size: 3rem;
       height: $indicator-size;
       width: $indicator-size;
-      mask-size: $indicator-size;
       -webkit-mask-size: $indicator-size;
+      mask-size: $indicator-size;
     }
   }
 

package/src/CallParticipantList/index.scss

@@ -1,4 +1,4 @@
-@import "CallParticipantList-layout";
-@import "CallParticipantList-theme";
-@import "CallParticiantListingItem-layout";
-@import "CallParticiantListingItem-theme";
+@use 'CallParticipantList-layout';
+@use 'CallParticipantList-theme';
+@use 'CallParticiantListingItem-layout';
+@use 'CallParticiantListingItem-theme';

package/src/CallPreview/index.scss

@@ -1 +1 @@
-@import 'CallPreview-layout';
+@use 'CallPreview-layout';

package/src/CallRecodingList/index.scss

@@ -1,2 +1,2 @@
-@import "CallRecordingList-layout";
-@import "CallRecordingList-theme";
+@use 'CallRecordingList-layout';
+@use 'CallRecordingList-theme';

package/src/DeviceSettings/index.scss

@@ -1 +1 @@
-@import 'DeviceSettings-layout';
+@use 'DeviceSettings-layout';

package/src/DropdownSelect/index.scss

@@ -1 +1 @@
-@import 'DropdownSelect';
+@use 'DropdownSelect';

package/src/Icon/Icon-layout.scss

@@ -1,10 +1,10 @@
 .str-video__icon {
-  mask-repeat: no-repeat;
   -webkit-mask-repeat: no-repeat;
-  mask-position: center;
+  mask-repeat: no-repeat;
   -webkit-mask-position: center;
-  mask-size: contain;
+  mask-position: center;
   -webkit-mask-size: contain;
+  mask-size: contain;
   display: block;
   width: 1.25rem;
   height: 1.25rem;

package/src/Icon/Icon-theme.scss

@@ -1,11 +1,6 @@
 .str-video__icon {
   background-color: var(--str-video__icon-default);
 
-  &--chat {
-    mask-image: var(--str-video__icon--chat);
-    -webkit-mask-image: var(--str-video__icon--chat);
-  }
-
   &--reactions {
     -webkit-mask-image: var(--str-video__icon--reactions);
     mask-image: var(--str-video__icon--reactions);
@@ -21,115 +16,40 @@
     mask-image: var(--str-video__icon--network-quality);
   }
 
-  &--support-agent {
-    -webkit-mask-image: var(--str-video__icon--support-agent);
-    mask-image: var(--str-video__icon--support-agent);
-  }
-
   &--recording-on {
-    mask-image: var(--str-video__icon--recording-on);
     -webkit-mask-image: var(--str-video__icon--recording-on);
-  }
-
-  &--mediation {
-    mask-image: var(--str-video__icon--mediation);
-    -webkit-mask-image: var(--str-video__icon--mediation);
-  }
-
-  &--copy {
-    mask-image: var(--str-video__icon--copy);
-    -webkit-mask-image: var(--str-video__icon--copy);
+    mask-image: var(--str-video__icon--recording-on);
   }
 
   &--caret-up {
-    mask-image: var(--str-video__icon--caret-up);
     -webkit-mask-image: var(--str-video__icon--caret-up);
+    mask-image: var(--str-video__icon--caret-up);
   }
 
   &--download {
-    mask-image: var(--str-video__icon--download);
     -webkit-mask-image: var(--str-video__icon--download);
+    mask-image: var(--str-video__icon--download);
   }
 
   &--caret-down {
-    mask-image: var(--str-video__icon--caret-down);
     -webkit-mask-image: var(--str-video__icon--caret-down);
+    mask-image: var(--str-video__icon--caret-down);
     transform: rotate(180deg);
   }
 
-  &--layout-speaker-bottom {
-    mask-image: var(--str-video__icon--layout-speaker-bottom);
-    -webkit-mask-image: var(--str-video__icon--layout-speaker-bottom);
-  }
-
-  &--layout-speaker-top {
-    mask-image: var(--str-video__icon--layout-speaker-top);
-    -webkit-mask-image: var(--str-video__icon--layout-speaker-top);
-  }
-
-  &--layout-speaker-left {
-    mask-image: var(--str-video__icon--layout-speaker-left);
-    -webkit-mask-image: var(--str-video__icon--layout-speaker-left);
-  }
-
-  &--layout-speaker-one-on-one {
-    mask-image: var(--str-video__icon--layout-speaker-one-on-one);
-    -webkit-mask-image: var(--str-video__icon--layout-speaker-one-on-one);
-  }
-
-  &--layout-speaker-live-stream {
-    mask-image: var(--str-video__icon--layout-speaker-live-stream);
-    -webkit-mask-image: var(--str-video__icon--layout-speaker-live-stream);
-  }
-
-  &--layout-speaker-right {
-    mask-image: var(--str-video__icon--layout-speaker-right);
-    -webkit-mask-image: var(--str-video__icon--layout-speaker-right);
-  }
-
-  &--layout {
-    mask-image: var(--str-video__icon--layout);
-    -webkit-mask-image: var(--str-video__icon--layout);
-  }
-
-  &--folder {
-    mask-image: var(--str-video__icon--folder);
-    -webkit-mask-image: var(--str-video__icon--folder);
-  }
-
-  &--paperclip {
-    mask-image: var(--str-video__icon--paperclip);
-    -webkit-mask-image: var(--str-video__icon--paperclip);
-  }
-
   &--chevron-right {
-    mask-image: var(--str-video__icon--chevron-right);
     -webkit-mask-image: var(--str-video__icon--chevron-right);
+    mask-image: var(--str-video__icon--chevron-right);
   }
 
   &--recording-off {
-    mask-image: var(--str-video__icon--recording-off);
     -webkit-mask-image: var(--str-video__icon--recording-off);
-  }
-
-  &--camera-add {
-    mask-image: var(--str-video__icon--camera-add);
-    -webkit-mask-image: var(--str-video__icon--camera-add);
-  }
-
-  &--person-add {
-    mask-image: var(--str-video__icon--person-add);
-    -webkit-mask-image: var(--str-video__icon--person-add);
-  }
-
-  &--qr-code {
-    mask-image: var(--str-video__icon--qr-code);
-    -webkit-mask-image: var(--str-video__icon--qr-code);
+    mask-image: var(--str-video__icon--recording-off);
   }
 
   &--loading {
-    mask-image: var(--str-video__icon--loading);
     -webkit-mask-image: var(--str-video__icon--loading);
+    mask-image: var(--str-video__icon--loading);
 
     transform: rotate(360deg);
     transition-duration: 1s;
@@ -138,127 +58,92 @@
     animation-iteration-count: infinite;
   }
 
-  &--login {
-    mask-image: var(--str-video__icon--login);
-    -webkit-mask-image: var(--str-video__icon--login);
-  }
-
   &--logout {
-    mask-image: var(--str-video__icon--logout);
     -webkit-mask-image: var(--str-video__icon--logout);
-  }
-
-  &--provider-google {
-    mask-image: var(--str-video__icon--provider-google);
-    -webkit-mask-image: var(--str-video__icon--provider-google);
-  }
-
-  &--person-off {
-    mask-image: var(--str-video__icon--person-off);
-    -webkit-mask-image: var(--str-video__icon--person-off);
-  }
-
-  &--verified {
-    mask-image: var(--str-video__icon--verified);
-    -webkit-mask-image: var(--str-video__icon--verified);
+    mask-image: var(--str-video__icon--logout);
   }
 
   &--chevron-up {
-    mask-image: var(--str-video__icon--chevron-up);
     -webkit-mask-image: var(--str-video__icon--chevron-up);
+    mask-image: var(--str-video__icon--chevron-up);
   }
 
   &--chevron-down {
-    mask-image: var(--str-video__icon--chevron-down);
     -webkit-mask-image: var(--str-video__icon--chevron-down);
-  }
-
-  &--developer {
-    mask-image: var(--str-video__icon--developer);
-    -webkit-mask-image: var(--str-video__icon--developer);
+    mask-image: var(--str-video__icon--chevron-down);
   }
 
   &--screen-share-on {
-    mask-image: var(--str-video__icon--screen-share-on);
     -webkit-mask-image: var(--str-video__icon--screen-share-on);
+    mask-image: var(--str-video__icon--screen-share-on);
   }
 
   &--screen-share-off {
-    mask-image: var(--str-video__icon--screen-share-off);
     -webkit-mask-image: var(--str-video__icon--screen-share-off);
+    mask-image: var(--str-video__icon--screen-share-off);
   }
 
   &--caret-down {
     transform: rotate(180deg);
-    mask-image: var(--str-video__icon--caret);
     -webkit-mask-image: var(--str-video__icon--caret);
+    mask-image: var(--str-video__icon--caret);
   }
 
   &--caret-up {
-    mask-image: var(--str-video__icon--caret);
     -webkit-mask-image: var(--str-video__icon--caret);
+    mask-image: var(--str-video__icon--caret);
   }
 
   &--caret-right {
     transform: rotate(90deg);
-    mask-image: var(--str-video__icon--caret);
     -webkit-mask-image: var(--str-video__icon--caret);
+    mask-image: var(--str-video__icon--caret);
   }
 
   &--caret-left {
     transform: rotate(-90deg);
-    mask-image: var(--str-video__icon--caret);
     -webkit-mask-image: var(--str-video__icon--caret);
-  }
-
-  &--star {
-    mask-image: var(--str-video__icon--star);
-    -webkit-mask-image: var(--str-video__icon--star);
+    mask-image: var(--str-video__icon--caret);
   }
 
   &--close {
-    mask-image: var(--str-video__icon--close);
     -webkit-mask-image: var(--str-video__icon--close);
+    mask-image: var(--str-video__icon--close);
   }
 
   &--mic {
-    mask-image: var(--str-video__icon--mic);
     -webkit-mask-image: var(--str-video__icon--mic);
+    mask-image: var(--str-video__icon--mic);
   }
 
   &--mic-off {
-    mask-image: var(--str-video__icon--mic-off);
     -webkit-mask-image: var(--str-video__icon--mic-off);
-  }
-
-  &--more {
-    mask-image: var(--str-video__icon--more);
-    -webkit-mask-image: var(--str-video__icon--more);
+    mask-image: var(--str-video__icon--mic-off);
   }
 
   &--camera {
-    mask-image: var(--str-video__icon--camera);
     -webkit-mask-image: var(--str-video__icon--camera);
+    mask-image: var(--str-video__icon--camera);
   }
 
   &--camera-off {
-    mask-image: var(--str-video__icon--camera-off);
     -webkit-mask-image: var(--str-video__icon--camera-off);
+    mask-image: var(--str-video__icon--camera-off);
   }
 
   &--camera-off-outline {
-    mask-image: var(--str-video__icon--camera-off-outline);
     -webkit-mask-image: var(--str-video__icon--camera-off-outline);
+    mask-image: var(--str-video__icon--camera-off-outline);
   }
 
   &--call-end {
-    mask-image: var(--str-video__icon--call-end);
     -webkit-mask-image: var(--str-video__icon--call-end);
+    mask-image: var(--str-video__icon--call-end);
   }
 
   &--call-accept {
-    mask-image: var(--str-video__icon--call-accept);
     -webkit-mask-image: var(--str-video__icon--call-accept);
+    mask-image: var(--str-video__icon--call-accept);
   }
 
   &--info {
@@ -266,83 +151,53 @@
     mask-image: var(--str-video__icon--info-icon);
   }
 
-  &--feedback {
-    -webkit-mask-image: var(--str-video__icon--feedback);
-    mask-image: var(--str-video__icon--feedback);
-  }
-
-  &--info-document {
-    -webkit-mask-image: var(--str-video__icon--info-document);
-    mask-image: var(--str-video__icon--info-document);
-  }
-
   &--stats {
     -webkit-mask-image: var(--str-video__icon--stats);
     mask-image: var(--str-video__icon--stats);
   }
 
-  &--participants {
-    mask-image: var(--str-video__icon--participants);
-    -webkit-mask-image: var(--str-video__icon--participants);
-  }
-
-  &--user-plus {
-    mask-image: var(--str-video__icon--user-plus);
-    -webkit-mask-image: var(--str-video__icon--user-plus);
-  }
-
   &--speaker {
-    mask-image: var(--str-video__icon--speaker);
     -webkit-mask-image: var(--str-video__icon--speaker);
-  }
-
-  &--language {
-    mask-image: var(--str-video__icon--language);
-    -webkit-mask-image: var(--str-video__icon--language);
+    mask-image: var(--str-video__icon--speaker);
   }
 
   &--ellipsis {
-    mask-image: var(--str-video__icon--ellipsis);
     -webkit-mask-image: var(--str-video__icon--ellipsis);
-  }
-
-  &--grid {
-    mask-image: var(--str-video__icon--grid);
-    -webkit-mask-image: var(--str-video__icon--grid);
+    mask-image: var(--str-video__icon--ellipsis);
   }
 
   &--pin {
-    mask-image: var(--str-video__icon--pin);
     -webkit-mask-image: var(--str-video__icon--pin);
+    mask-image: var(--str-video__icon--pin);
   }
 
   &--no-audio {
-    mask-image: var(--str-video__icon--no-audio);
     -webkit-mask-image: var(--str-video__icon--no-audio);
+    mask-image: var(--str-video__icon--no-audio);
   }
 
   &--not-allowed {
-    mask-image: var(--str-video__icon--not-allowed);
     -webkit-mask-image: var(--str-video__icon--not-allowed);
+    mask-image: var(--str-video__icon--not-allowed);
   }
 
   &--film-roll {
-    mask-image: var(--str-video__icon--film-roll);
     -webkit-mask-image: var(--str-video__icon--film-roll);
+    mask-image: var(--str-video__icon--film-roll);
   }
 
   &--device-settings {
-    mask-image: var(--str-video__icon--settings);
     -webkit-mask-image: var(--str-video__icon--settings);
+    mask-image: var(--str-video__icon--settings);
   }
 
   &--filter {
-    mask-image: var(--str-video__icon--filter);
     -webkit-mask-image: var(--str-video__icon--filter);
+    mask-image: var(--str-video__icon--filter);
   }
 
   &--refresh {
-    mask-image: var(--str-video__icon--refresh);
     -webkit-mask-image: var(--str-video__icon--refresh);
+    mask-image: var(--str-video__icon--refresh);
   }
 }

package/src/Icon/index.scss

@@ -1,2 +1,2 @@
-@import "Icon-theme";
-@import "Icon-layout";
+@use 'Icon-theme';
+@use 'Icon-layout';

package/src/LoadingIndicator/index.scss

@@ -1,2 +1,2 @@
-@import "LoadingIndicator-layout";
-@import "LoadingIndicator-theme";
+@use 'LoadingIndicator-layout';
+@use 'LoadingIndicator-theme';

package/src/Menu/index.scss

@@ -1,5 +1,5 @@
-@import 'Menu-layout';
-@import 'Portal-layout';
-@import 'Menu-theme';
-@import 'GenericMenu-layout';
-@import 'GenericMenu-theme';
+@use 'Menu-layout';
+@use 'Portal-layout';
+@use 'Menu-theme';
+@use 'GenericMenu-layout';
+@use 'GenericMenu-theme';

package/src/Notification/index.scss

@@ -1,2 +1,2 @@
-@import "Notification-layout";
-@import "Notification-theme";
+@use 'Notification-layout';
+@use 'Notification-theme';

package/src/ParticipantView/ParticipantView-layout.scss

@@ -61,36 +61,36 @@ $scope-name: 'str-video__participant-view';
         $icon-size: 1rem;
         width: $icon-size;
         height: $icon-size;
-        mask-size: $icon-size;
         -webkit-mask-size: $icon-size;
+        mask-size: $icon-size;
         background-color: var(--str-video__text-color1);
       }
 
       .str-video__participant-details__name--audio-muted {
         @include icon();
-        mask-image: var(--str-video__icon--mic-off);
         -webkit-mask-image: var(--str-video__icon--mic-off);
+        mask-image: var(--str-video__icon--mic-off);
       }
 
       .str-video__participant-details__name--video-muted {
         @include icon();
-        mask-image: var(--str-video__icon--camera-off);
         -webkit-mask-image: var(--str-video__icon--camera-off);
+        mask-image: var(--str-video__icon--camera-off);
       }
 
       .str-video__participant-details__name--pinned {
         cursor: pointer;
         @include icon();
         width: 0.8rem;
-        -webkit-mask-size: 0.8rem;
         height: 1rem;
+        -webkit-mask-size: 0.8rem;
         mask-size: 0.8rem;
-        mask-repeat: no-repeat;
         -webkit-mask-repeat: no-repeat;
-        mask-position: center;
+        mask-repeat: no-repeat;
         -webkit-mask-position: center;
-        mask-image: var(--str-video__icon--pin);
+        mask-position: center;
         -webkit-mask-image: var(--str-video__icon--pin);
+        mask-image: var(--str-video__icon--pin);
       }
 
       .str-video__participant-details__name--network-stats {

package/src/ParticipantView/index.scss

@@ -1 +1 @@
-@import './ParticipantView-layout';
+@use 'ParticipantView-layout';

package/src/Permissions/index.scss

@@ -1 +1 @@
-@import './Permissions-layout';
+@use 'Permissions-layout';

package/src/Reaction/index.scss

@@ -1 +1 @@
-@import "Reaction-layout";
+@use 'Reaction-layout';

package/src/RingingCall/index.scss

@@ -1,2 +1,2 @@
-@import "RingingCall-layout";
-@import "RingingCall-theme";
+@use 'RingingCall-layout';
+@use 'RingingCall-theme';

package/src/ScreenShareOverlay/index.scss

@@ -1,2 +1,2 @@
-@import 'ScreenShareOverlay-layout';
-@import 'ScreenShareOverlay-theme';
+@use 'ScreenShareOverlay-layout';
+@use 'ScreenShareOverlay-theme';

package/src/Search/index.scss

@@ -1,2 +1,2 @@
-@import "SearchInput-layout";
-@import "SearchInput-theme";
+@use 'SearchInput-layout';
+@use 'SearchInput-theme';