feat: clean up stylesheets (#1845)

The SDK stylesheet had a lot of icons used in our sample apps, unnecessarily increasing the size of the shipped CSS.
This PR moves those icons to the appropriate sample applications and trims around 50KB of SDK CSS.

As part of this refactor, a few more improvements are made:
- Vendored CSS properties are sorted correctly, so they don't take precedence
- updates to the latest `sass` version

Author: oliverlaz

packages/styling/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';

packages/styling/package.json

@@ -9,6 +9,6 @@
   },
   "devDependencies": {
     "rimraf": "^6.0.1",
-    "sass": "^1.69.5"
+    "sass": "^1.89.2"
   }
 }

packages/styling/src/Avatar/index.scss

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

packages/styling/src/BackgroundFilters/index.scss

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

packages/styling/src/Button/index.scss

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

packages/styling/src/CallControls/index.scss

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

packages/styling/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';

packages/styling/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;
     }
   }
 

packages/styling/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';

packages/styling/src/CallPreview/index.scss

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