Fixathon: Web app dependency updates part 2 (Sass) (#29037)

* Update sass-loader@16.0.2

* Update sass part 1 (actually update it)

* Update scss files to remove at-charset and use at-use instead of at-import

at-charset hasn't been needed since we switched to dart-sass, and
at-import is now deprecated. Most of this was done using sass-migrator.

We still use at-import for files imported from node_modules, but sass
doesn't seem to complain about that

* Inline at-extend rule that was causing an error

* Remove or inline at-use rules in components package

webapp/channels/build/emoji/make_emojis.mjs

@@ -433,10 +433,7 @@ for (const key of emojiFilePositions.keys()) {
     cssEmojis.push(`.emoji-${key} { background-position: ${emojiFilePositions.get(key)} }`);
 }
 
-const cssRules = `
+const cssRules = `.emojisprite-preview {
-@charset "UTF-8";
-
-.emojisprite-preview {
     width: ${EMOJI_SIZE_PADDED}px;
     max-width: none;
     height: ${EMOJI_SIZE_PADDED}px;

webapp/channels/src/components/admin_console/billing/billing_subscriptions/billing_subscriptions.scss

@@ -1,5 +1,5 @@
-@import 'utils/_mixins';
+@use 'utils/_mixins' as utils-mixins;
-@import './mixins';
+@use 'mixins';
 
 .BillingSubscriptions {
     .BillingSubscriptions__topWrapper {
@@ -121,7 +121,7 @@
 }
 
 .PrivateCloudCard {
-    @include cloud-card;
+    @include mixins.cloud-card;
 
     display: flex;
 
@@ -137,7 +137,7 @@
 }
 
 .PrivateCloudCard__text-title {
-    @include cloud-card-title;
+    @include mixins.cloud-card-title;
 }
 
 .PrivateCloudCard__text-description {
@@ -165,7 +165,7 @@
     font-weight: 600;
     line-height: 14px;
 
-    @include fit-content;
+    @include utils-mixins.fit-content;
 
     &:hover:not(.disabled) {
         background: rgba(var(--sys-button-bg-rgb), 0.04);
@@ -219,7 +219,7 @@
     font-weight: 600;
     line-height: 9.5px;
 
-    @include fit-content;
+    @include utils-mixins.fit-content;
 
     &:hover:not(.disabled) {
         background: rgba(var(--sys-dnd-indicator-rgb), 0.04);

webapp/channels/src/components/admin_console/billing/billing_subscriptions/cloud_trial_banner.scss

@@ -1,6 +1,6 @@
-@import 'utils/mixins';
+@use 'utils/mixins';
 
 .upgradeLink {
-    @include primary-button;
+    @include mixins.primary-button;
-    @include button-medium;
+    @include mixins.button-medium;
 }

webapp/channels/src/components/admin_console/billing/billing_subscriptions/limits.scss

@@ -1,8 +1,8 @@
-@import 'utils/variables';
+@use 'utils/variables';
-@import './mixins';
+@use 'mixins';
 
 .ProductLimitsPanel {
-    @include cloud-card;
+    @include mixins.cloud-card;
 
     &--left-panel {
         max-width: 568px;
@@ -14,7 +14,7 @@
     }
 
     &__title {
-        @include cloud-card-title;
+        @include mixins.cloud-card-title;
 
         padding-bottom: 8px;
     }
@@ -40,8 +40,8 @@
         padding: 11px 16px;
         border-radius: 4px;
         margin-right: 8px;
-        background: $primary-color;
+        background: variables.$primary-color;
-        color: $white;
+        color: variables.$white;
         font-size: 12px;
         font-weight: bold;
         line-height: 9.5px;

webapp/channels/src/components/admin_console/billing/billing_subscriptions/to_paid_plan_nudge_banner.scss

@@ -1,4 +1,4 @@
-@import 'utils/mixins';
+@use 'utils/mixins';
 
 .ToPaidNudgeBanner {
     &__actions {
@@ -8,7 +8,7 @@
     &__primary {
         font-size: 12px;
 
-        @include primary-button;
+        @include mixins.primary-button;
 
         &:hover {
             color: var(--button-color);
@@ -19,7 +19,7 @@
         margin-left: 4px;
         font-size: 12px;
 
-        @include tertiary-button;
+        @include mixins.tertiary-button;
 
         &:hover {
             color: var(--button-bg);

webapp/channels/src/components/admin_console/billing/plan_details/plan_details.scss

@@ -1,4 +1,4 @@
-@import 'utils/variables';
+@use 'utils/variables';
 
 .PlanDetails {
     width: 568px;
@@ -37,8 +37,8 @@
     &.btn {
         padding: 11px 16px;
         border-radius: 4px;
-        background: $primary-color;
+        background: variables.$primary-color;
-        color: $white;
+        color: variables.$white;
         font-size: 12px;
         font-weight: bold;
         line-height: 9.5px;

webapp/channels/src/components/admin_console/data_grid/data_grid.scss

@@ -1,11 +1,11 @@
 @use 'sass:color';
 
-@import 'utils/variables';
+@use 'utils/variables';
 
 .DataGrid {
     width: 100%;
     padding: 2rem 2rem 2rem 2rem;
-    background: $bg--gray;
+    background: variables.$bg--gray;
     color: var(--sys-center-channel-color);
 
     .DataGrid_search {
@@ -14,7 +14,7 @@
         flex-direction: row;
         padding: 0.5em 0;
         border-bottom: solid 1px rgba(0, 0, 0, 0.1);
-        background: $white;
+        background: variables.$white;
         font-weight: bold;
 
         .DataGrid_searchBar {
@@ -43,7 +43,7 @@
                 position: absolute;
                 top: 5px;
                 left: 10px;
-                color: $dark-gray;
+                color: variables.$dark-gray;
                 pointer-events: none;
             }
 
@@ -91,12 +91,12 @@
             border-left: 2px solid transparent;
 
             &:nth-child(odd) {
-                background-color: $bg--gray;
+                background-color: variables.$bg--gray;
             }
 
             &:hover {
-                border-left: 2px solid $primary-color;
+                border-left: 2px solid variables.$primary-color;
-                background-color: color.adjust($primary-color, $lightness: 45%);
+                background-color: color.adjust(variables.$primary-color, $lightness: 45%);
             }
 
             .DataGrid_cell {
@@ -143,7 +143,7 @@
         padding: 8px;
         border-top: solid 1px rgba(0, 0, 0, 0.1);
         border-bottom: solid 1px rgba(0, 0, 0, 0.1);
-        background: $white;
+        background: variables.$white;
         color: rgba(0, 0, 0, 0.5);
         font-size: 1.1em;
         text-align: right;

webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.scss

@@ -1,10 +1,10 @@
-@import 'utils/variables';
+@use 'utils/variables';
 
 .FeatureDiscovery {
     display: grid;
     padding: 20px;
     border-radius: 8px;
-    background: $white;
+    background: variables.$white;
     box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
     font-family: Open Sans;
     font-style: normal;
@@ -47,8 +47,8 @@
     padding: 14px 0;
     border-radius: 4px;
     margin-right: 8px;
-    background: $primary-color;
+    background: variables.$primary-color;
-    color: $white;
+    color: variables.$white;
     font-size: 16px;
     font-weight: 400;
     line-height: 16px;
@@ -62,8 +62,8 @@
 
     &:disabled {
         border-color: transparent;
-        background: $light-gray;
+        background: variables.$light-gray;
-        color: $dark-gray;
+        color: variables.$dark-gray;
     }
 
     &.btn-inactive {
@@ -72,9 +72,9 @@
     }
 
     &.btn-secondary {
-        border: 1px solid $primary-color;
+        border: 1px solid variables.$primary-color;
-        background: $white;
+        background: variables.$white;
-        color: $primary-color;
+        color: variables.$primary-color;
     }
 
     &.btn-primary {

webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_edition.scss

@@ -1,5 +1,5 @@
-@import 'utils/variables';
+@use 'utils/variables';
-@import 'utils/mixins';
+@use 'utils/mixins';
 
 .StarterEditionRightPannel {
     .svg-image {
@@ -87,7 +87,7 @@
         margin-left: auto;
 
         &.btn {
-            @include tertiary-button;
+            @include mixins.tertiary-button;
         }
     }
 

webapp/channels/src/components/admin_console/license_settings/trial_license_card/trial_license_card.scss

@@ -1,4 +1,4 @@
-@import 'utils/variables';
+@use 'utils/variables';
 
 .RenewLicenseCard.TrialLicense {
     .TrialLicenseCard__text-title {

webapp/channels/src/components/admin_console/openid_convert/openid_convert.scss

@@ -1,4 +1,4 @@
-@import 'utils/variables';
+@use 'utils/variables';
 
 .OpenIdConvert {
     display: grid;
@@ -21,8 +21,8 @@
         height: 32px;
         border-radius: 4px;
         margin-right: 10px;
-        background: $primary-color;
+        background: variables.$primary-color;
-        color: $white;
+        color: variables.$white;
         font-size: 12px;
         font-weight: 600;
         line-height: 9px;
@@ -46,8 +46,8 @@
         text-decoration: none;
 
         &:hover {
-            background-color: $primary-color;
+            background-color: variables.$primary-color;
-            color: $white;
+            color: variables.$white;
         }
     }
 }
@@ -61,7 +61,7 @@
     flex: 0 0 60px;
     align-items: center;
     padding: 4 0 4px;
-    border-top: 1px solid alpha-color($black, 0.1);
+    border-top: 1px solid alpha-color(variables.$black, 0.1);
 }
 
 .OpenIdConvert_copyWrapper {

webapp/channels/src/components/admin_console/system_roles/system_role/system_role_permissions.scss

@@ -1,4 +1,4 @@
-@import 'utils/variables';
+@use 'utils/variables';
 
 #SystemRolePermissions {
     margin-top: 0;

webapp/channels/src/components/admin_console/system_user_detail/team_list/abstract_list.scss

@@ -1,5 +1,5 @@
-@import 'utils/variables';
+@use 'utils/variables';
-@import 'utils/functions';
+@use 'utils/functions';
 
 .AbstractList {
     padding: 1rem 2rem 2rem 2rem;
@@ -19,7 +19,7 @@
     }
 
     .AbstractList__body {
-        background: $bg--gray;
+        background: variables.$bg--gray;
 
         .AbstractList__loading {
             padding: 40px;
@@ -28,8 +28,8 @@
 
         .AbstractList__empty {
             margin-top: 1rem;
-            background: alpha-color($white, 0.5);
+            background: functions.alpha-color(variables.$white, 0.5);
-            color: $gray;
+            color: variables.$gray;
             font-size: 1.6rem;
             text-align: center;
 
@@ -50,10 +50,10 @@
         justify-content: flex-end;
         padding: 5px;
         border-top: solid 1px rgba(0, 0, 0, 0.1);
-        background: $white;
+        background: variables.$white;
 
         .btn-tertiary {
-            color: $dark-gray;
+            color: variables.$dark-gray;
 
             &.disabled {
                 opacity: 0.5;
@@ -62,7 +62,7 @@
 
         .counter {
             margin-bottom: 2px;
-            color: $dark-gray;
+            color: variables.$dark-gray;
             font-size: 1.1em;
         }
     }

webapp/channels/src/components/admin_console/system_user_detail/team_list/team_row.scss

@@ -1,8 +1,8 @@
-@import 'utils/variables';
+@use 'utils/variables';
 
 .TeamRow {
     &:nth-child(odd) {
-        background: alpha-color($white, 0.5);
+        background: alpha-color(variables.$white, 0.5);
     }
 }
 
@@ -11,7 +11,7 @@
     height: 80px;
     flex-direction: row;
     align-items: center;
-    border: 2px solid $transparent;
+    border: 2px solid variables.$transparent;
 }
 
 .TeamRow__row .TeamRow__team-name {
@@ -52,16 +52,16 @@
 
     > a {
         padding: 3px 5px;
-        color: $black;
+        color: variables.$black;
         text-decoration: none;
 
         &:hover {
             border-radius: 3px;
-            background-color: $light-gray;
+            background-color: variables.$light-gray;
         }
 
         &.warning {
-            color: $red;
+            color: variables.$red;
         }
     }
 }

webapp/channels/src/components/admin_console/system_users/system_users.scss

@@ -1,4 +1,4 @@
-@import 'utils/_mixins';
+@use 'utils/_mixins';
 
 table.systemUsersTable {
     thead {
@@ -47,7 +47,7 @@ table.systemUsersTable {
                     font-weight: 600;
                     grid-area: displayName;
 
-                    @include textEllipsis;
+                    @include mixins.textEllipsis;
 
                     .icon {
                         color: rgba(var(--sys-denim-center-channel-text-rgb), 0.8);
@@ -58,7 +58,7 @@ table.systemUsersTable {
                     align-self: start;
                     grid-area: userName;
 
-                    @include textEllipsis;
+                    @include mixins.textEllipsis;
                 }
 
                 .error {
@@ -66,7 +66,7 @@ table.systemUsersTable {
                     align-self: start;
                     grid-area: error;
 
-                    @include textEllipsis;
+                    @include mixins.textEllipsis;
 
                     // this need to be here, after textEllipsis because
                     // we need to override white-space property coming from the mixing

webapp/channels/src/components/advanced_text_editor/advanced_text_editor.scss

@@ -1,4 +1,4 @@
-@import 'utils/variables';
+@use 'utils/variables';
 
 .AdvancedTextEditor__skeleton {
     display: flex;

webapp/channels/src/components/announcement_bar/contact_sales/contact_us.scss

@@ -1,4 +1,4 @@
-@import 'utils/variables';
+@use 'utils/variables';
 
 .contact-us {
     display: block;

webapp/channels/src/components/announcement_bar/overage_users_banner/overage_users_banner.scss

@@ -1,4 +1,4 @@
-@import 'utils/mixins';
+@use 'utils/mixins';
 
 .overage_users_banner {
     &__description {
@@ -9,7 +9,7 @@
     }
 
     &__button {
-        @include link;
+        @include mixins.link;
 
         background: transparent;
         font-size: 14px;

webapp/channels/src/components/announcement_bar/purchase_link/purchase_link.scss

@@ -1,4 +1,4 @@
-@import 'utils/variables';
+@use 'utils/variables';
 
 .annnouncementBar__purchaseNow {
     display: block;

webapp/channels/src/components/announcement_bar/renewal_link/renew_link.scss

@@ -1,4 +1,4 @@
-@import 'utils/variables';
+@use 'utils/variables';
 
 .annnouncementBar__renewLicense {
     display: block;

webapp/channels/src/components/app_bar/app_bar.scss

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-@import 'utils/mixins';
+@use 'utils/mixins';
 
 $app-bar-icon-size: 24px;
 $app-bar-width: 44px;
@@ -140,8 +140,8 @@ $app-bar-width: 44px;
         padding-bottom: 36px;
 
         .app_bar__marketplace_button {
-            @include icon-button;
+            @include mixins.icon-button;
-            @include icon-button-small-compact;
+            @include mixins.icon-button-small-compact;
 
             color: rgba(var(--sidebar-text-rgb), 0.64);
 

webapp/channels/src/components/backstage/components/backstage_list.scss

@@ -1,6 +1,6 @@
 @use 'sass:color';
 
-@import 'utils/variables';
+@use 'utils/variables';
 
 #searchInput {
     flex: none;
@@ -11,9 +11,9 @@
     height: auto;
     flex-direction: row;
     padding: 8px;
-    border: 1px solid $light-gray;
+    border: 1px solid variables.$light-gray;
     border-top: none;
-    background: $white;
+    background: variables.$white;
     color: rgba(0, 0, 0, 0.5);
     font-size: 1.1em;
     text-align: right;

webapp/channels/src/components/browse_channels/browse_channels.scss

@@ -1,5 +1,3 @@
-@charset 'UTF-8';
-
 #browseChannelsModal {
     .modal-dialog {
         margin-top: calc(45vh - 240px) !important;

webapp/channels/src/components/category_modal.scss

@@ -1,5 +1,3 @@
-@charset 'UTF-8';
-
 .edit-category__helpText {
     color: rgba(var(--center-channel-color-rgb), 0.75);
     font-size: 12px;

webapp/channels/src/components/center_message_lock/index.scss

@@ -1,4 +1,4 @@
-@import 'utils/mixins';
+@use 'utils/mixins';
 
 .CenterMessageLock {
     display: flex;
@@ -28,7 +28,7 @@
         padding-top: 12px;
 
         .btn {
-            @include tertiary-button;
+            @include mixins.tertiary-button;
 
             font-size: 12px;
 
@@ -42,7 +42,7 @@
             }
 
             &.is-admin {
-                @include primary-button;
+                @include mixins.primary-button;
 
                 &:hover,
                 &:focus {

webapp/channels/src/components/choose_different_shipping/choose_different_shipping.scss

@@ -1,4 +1,4 @@
-@import '../payment_form/mixins';
+@use '../payment_form/mixins';
 
 .shipping-address-section {
     display: flex;
@@ -39,5 +39,5 @@
 }
 
 .PurchaseModal .shipping-address-section {
-    @include payment-form-padding;
+    @include mixins.payment-form-padding;
 }

webapp/channels/src/components/cloud_usage_modal/limit_line.scss

@@ -1,10 +1,10 @@
-@import 'utils/variables';
+@use 'utils/variables';
 
 .WorkspaceLimitLine {
     display: flex;
     align-items: center;
     padding-bottom: 16px;
-    font-weight: $font-weight--semibold;
+    font-weight: variables.$font-weight--semibold;
 
     &:last-child {
         padding-bottom: 0;

webapp/channels/src/components/common/multi_select_cards/multi_select_card.scss

@@ -1,4 +1,4 @@
-@import 'utils/variables';
+@use 'utils/variables';
 
 .MultiSelectCard {
     position: relative;
@@ -12,7 +12,7 @@
     border-radius: 8px;
     margin-right: 16px;
     background: var(--center-channel-bg);
-    box-shadow: $elevation-3;
+    box-shadow: variables.$elevation-3;
     cursor: pointer;
     list-style-type: none;
     outline: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
@@ -21,7 +21,7 @@
     &:hover,
     &:active,
     &:focus {
-        box-shadow: $elevation-4;
+        box-shadow: variables.$elevation-4;
         outline: 1px solid rgba(var(--center-channel-color-rgb), 0.32);
     }
 
@@ -44,18 +44,18 @@
     }
 
     &--checked {
-        box-shadow: $elevation-2;
+        box-shadow: variables.$elevation-2;
         outline: 2px solid var(--button-bg);
 
         &:hover,
         &:active,
         &:focus {
-            box-shadow: $elevation-2;
+            box-shadow: variables.$elevation-2;
             outline: 2px solid var(--button-bg);
         }
 
         &:focus {
-            box-shadow: $elevation-4;
+            box-shadow: variables.$elevation-4;
         }
     }
 

webapp/channels/src/components/do_verify_email/do_verify_email.scss

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-@import 'utils/mixins';
+@use 'utils/mixins';
 
 .do-verify-body {
     display: flex;
@@ -21,8 +21,8 @@
             justify-content: center;
 
             .do-verify-body-content-button-return {
-                @include primary-button;
+                @include mixins.primary-button;
-                @include button-medium;
+                @include mixins.button-medium;
             }
         }
     }

webapp/channels/src/components/external_login_button/external_login_button.scss

@@ -1,11 +1,11 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-@import 'utils/mixins';
+@use 'utils/mixins';
 
 .external-login-button {
-    @include secondary-button;
+    @include mixins.secondary-button;
-    @include button-medium;
+    @include mixins.button-medium;
 
     min-width: 136px;
     flex: 1 1 0%;

webapp/channels/src/components/feature_restricted_modal/feature_restricted_modal.scss

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-@import 'utils/mixins';
+@use 'utils/mixins';
 
 .FeatureRestrictedModal {
     &__description {
@@ -19,7 +19,7 @@
         line-height: 16px;
 
         a {
-            @include link;
+            @include mixins.link;
         }
     }
 
@@ -29,20 +29,20 @@
         padding: 24px 0;
 
         .button-plans {
-            @include tertiary-button;
+            @include mixins.tertiary-button;
-            @include button-medium;
+            @include mixins.button-medium;
         }
 
         .button-trial {
-            @include primary-button;
+            @include mixins.primary-button;
-            @include button-medium;
+            @include mixins.button-medium;
         }
 
         &.single {
             justify-content: flex-end;
 
             .button-plans {
-                @include primary-button;
+                @include mixins.primary-button;
             }
         }
     }

webapp/channels/src/components/header_footer_route/content_layouts/alternate_link.scss

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-@import 'utils/mixins';
+@use 'utils/mixins';
 
 .alternate-link {
     margin-left: auto;
@@ -15,7 +15,7 @@
     &__link {
         padding-left: 4px;
 
-        @include link;
+        @include mixins.link;
     }
 }
 

webapp/channels/src/components/header_footer_route/footer.scss

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-@import 'utils/mixins';
+@use 'utils/mixins';
 
 .hfroute-footer {
     display: flex;
@@ -15,7 +15,7 @@
     padding: 0 40px;
 
     .footer-link {
-        @include link;
+        @include mixins.link;
 
         color: rgba(var(--center-channel-color-rgb), 0.75);
         font-size: 11px;

webapp/channels/src/components/header_footer_route/header.scss

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-@import 'utils/mixins';
+@use 'utils/mixins';
 
 .hfroute-header {
     position: relative;
@@ -21,7 +21,7 @@
         justify-content: space-between;
 
         .header-logo-link {
-            @include link;
+            @include mixins.link;
 
             display: flex;
             color: rgba(var(--center-channel-color-rgb), 0.75);
@@ -68,7 +68,7 @@
         background: none;
 
         a {
-            @include link;
+            @include mixins.link;
         }
     }
 

webapp/channels/src/components/header_footer_route/header_footer_route.scss

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-@import 'utils/mixins';
+@use 'utils/mixins';
 
 .header-footer-route {
     position: relative;

webapp/channels/src/components/info_toast/info_toast.scss

@@ -1,5 +1,3 @@
-@charset 'UTF-8';
-
 .info-toast {
     position: fixed;
     z-index: 99;

webapp/channels/src/components/invitation_modal/add_to_channels.scss

@@ -1,4 +1,4 @@
-@import 'utils/variables';
+@use 'utils/variables';
 
 .AddToChannels {
     &__messageInput {

webapp/channels/src/components/invitation_modal/invite_as.scss

@@ -1,4 +1,4 @@
-@import 'components/toggle';
+@use 'components/toggle';
 
 .InviteAs {
     &__label {

webapp/channels/src/components/invitation_modal/invite_view.scss

@@ -1,4 +1,4 @@
-@import 'utils/_mixins';
+@use 'utils/_mixins';
 
 .InviteView {
     &__sectionTitle {

webapp/channels/src/components/invitation_modal/overage_users_banner_notice/overage_users_banner_notice.scss

@@ -1,4 +1,4 @@
-@import 'utils/mixins';
+@use 'utils/mixins';
 
 .overage_users_banner {
     margin-top: 16px;
@@ -11,7 +11,7 @@
     }
 
     &__button {
-        @include link;
+        @include mixins.link;
 
         background: transparent;
         font-size: 14px;

webapp/channels/src/components/invitation_modal/result_table.scss

@@ -1,4 +1,4 @@
-@import 'utils/variables';
+@use 'utils/variables';
 
 .InviteResultTable {
     width: 100%;

webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.scss

@@ -1,5 +1,3 @@
-@charset 'UTF-8';
-
 .modal {
     .shortcuts-modal {
         width: 1100px;

webapp/channels/src/components/link_tooltip/link_tooltip.scss

@@ -1,8 +1,8 @@
-@import 'utils/variables';
+@use 'utils/variables';
 
 .tooltip-container {
     opacity: 0;
-    transition: opacity $transition-quick ease-in;
+    transition: opacity variables.$transition-quick ease-in;
     visibility: hidden;
 
     &.visible {

webapp/channels/src/components/login/login.scss

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-@import 'utils/mixins';
+@use 'utils/mixins';
 
 .login-body {
     display: flex;
@@ -101,7 +101,7 @@
             box-shadow: var(--elevation-5);
 
             &.with-error {
-                @include shake-horizontally;
+                @include mixins.shake-horizontally;
             }
 
             .login-body-card-content {
@@ -144,13 +144,13 @@
                         margin-top: 17px;
 
                         a {
-                            @include link;
+                            @include mixins.link;
                         }
                     }
 
                     .login-body-card-form-button-submit {
-                        @include primary-button;
+                        @include mixins.primary-button;
-                        @include button-large;
+                        @include mixins.button-large;
 
                         width: 100%;
                         margin-top: 30px;

webapp/channels/src/components/login/login_mfa.scss

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-@import 'utils/mixins';
+@use 'utils/mixins';
 
 .login-mfa-form {
     display: flex;
@@ -19,8 +19,8 @@
         background-color: var(--center-channel-bg);
 
         .login-mfa-form-button-submit {
-            @include primary-button;
+            @include mixins.primary-button;
-            @include button-large;
+            @include mixins.button-large;
 
             flex: 1;
             margin: 0;

webapp/channels/src/components/markdown_image_expand/markdown_image_expand.scss

@@ -1,5 +1,5 @@
-@import 'utils/functions';
+@use 'utils/functions';
-@import 'utils/variables';
+@use 'utils/variables';
 
 .markdown-image-expand {
     position: relative;
@@ -18,7 +18,7 @@
     border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
     border-radius: 16px;
     background-color: var(--center-channel-bg);
-    box-shadow: $elevation-1;
+    box-shadow: variables.$elevation-1;
     color: rgba(var(--center-channel-color-rgb), 0.64);
     font-size: 18px;
     line-height: 21px;
@@ -34,7 +34,7 @@
 
     &:hover {
         border: 1px solid rgba(var(--center-channel-color-rgb), 0.24);
-        box-shadow: $elevation-2;
+        box-shadow: variables.$elevation-2;
     }
 }
 

webapp/channels/src/components/no_results_indicator/no_results_indicator.scss

@@ -1,5 +1,3 @@
-@charset 'UTF-8';
-
 .no-results__holder {
     display: grid;
     width: 100%;

webapp/channels/src/components/onboarding_tasks/onboarding_video_modal/onboarding_video_modal.scss

@@ -1,6 +1,3 @@
-
-@charset 'UTF-8';
-
 .on-boarding-video_modal {
     .modal & {
         width: 100%;

webapp/channels/src/components/plugin_marketplace/marketplace_modal.scss

@@ -1,5 +1,5 @@
-@import 'utils/variables';
+@use 'utils/variables';
-@import 'utils/mixins';
+@use 'utils/mixins';
 
 .marketplace-modal {
     width: 832px;
@@ -145,14 +145,14 @@
 
                 .plugin-configure,
                 .app-installed {
-                    @include secondary-button;
+                    @include mixins.secondary-button;
-                    @include button-medium;
+                    @include mixins.button-medium;
                 }
 
                 .plugin-install,
                 .app-install {
-                    @include primary-button;
+                    @include mixins.primary-button;
-                    @include button-medium;
+                    @include mixins.button-medium;
                 }
 
                 a {
@@ -177,7 +177,7 @@
             align-items: center;
             justify-content: center;
             border-radius: 50%;
-            background-color: $white;
+            background-color: variables.$white;
 
             svg,
             img {
@@ -242,7 +242,7 @@
             display: flex;
             align-items: center;
             padding: 10px 15px;
-            border-bottom: 1px solid $light-gray;
+            border-bottom: 1px solid variables.$light-gray;
 
             &.clickable {
                 cursor: pointer;
@@ -273,8 +273,8 @@
         }
 
         &__action {
-            @include primary-button;
+            @include mixins.primary-button;
-            @include button-medium;
+            @include mixins.button-medium;
 
             margin-top: 30px;
         }

webapp/channels/src/components/post_priority/post_priority_picker.scss

@@ -1,17 +1,15 @@
-@charset "UTF-8";
+@use 'utils/mixins';
-
-@import 'utils/mixins';
 
 .PostPriorityPicker {
     width: 324px;
 
     &__apply {
-        @include button-small;
+        @include mixins.button-small;
-        @include primary-button;
+        @include mixins.primary-button;
     }
 
     &__cancel {
-        @include button-small;
+        @include mixins.button-small;
-        @include tertiary-button;
+        @include mixins.tertiary-button;
     }
 }

webapp/channels/src/components/post_view/acknowledgements/post_acknowledgements.scss

@@ -1,10 +1,8 @@
-@charset "UTF-8";
+@use 'utils/mixins';
-
+@use 'utils/variables';
-@import 'utils/mixins';
-@import 'utils/variables';
 
 .AcknowledgementButton {
-    @include button-xsmall;
+    @include mixins.button-xsmall;
 
     position: relative;
     display: flex;

webapp/channels/src/components/post_view/reaction/reaction.scss

@@ -1,5 +1,5 @@
-@import 'utils/mixins';
+@use 'utils/mixins';
-@import 'utils/functions';
+@use 'utils/functions';
 
 .reaction-emoji--large img {
     width: 48px;
@@ -10,7 +10,7 @@
 }
 
 .Reaction {
-    @include button-style--none;
+    @include mixins.button-style--none;
 
     display: inline-flex;
     min-width: 28px;
@@ -40,15 +40,15 @@
     &:not(.Reaction--reacted) {
         &:hover {
             border-color: rgba(var(--center-channel-color-rgb), 0.16);
-            background-color: v(center-channel-bg);
+            background-color: functions.v(center-channel-bg);
             color: rgba(var(--center-channel-color-rgb), 0.75);
             fill: rgba(var(--center-channel-color-rgb), 0.75);
         }
 
         &:active {
             background-color: rgba(var(--button-bg-rgb), 0.08);
-            color: v(button-bg);
+            color: functions.v(button-bg);
-            fill: v(button-bg);
+            fill: functions.v(button-bg);
         }
     }
 
@@ -90,19 +90,19 @@
 
     &.Reaction--reacted,
     &.Reaction--reacting {
-        border-color: v(button-bg);
+        border-color: functions.v(button-bg);
         background-color: rgba(var(--button-bg-rgb), 0.08);
-        color: v(button-bg);
+        color: functions.v(button-bg);
 
         &:hover {
-            border-color: v(button-bg);
+            border-color: functions.v(button-bg);
-            background: v(center-channel-bg);
+            background: functions.v(center-channel-bg);
         }
 
         &:active {
             background-color: rgba(var(--button-bg-rgb), 0.08);
-            color: v(button-bg);
+            color: functions.v(button-bg);
-            fill: v(button-bg);
+            fill: functions.v(button-bg);
         }
     }
 

webapp/channels/src/components/preparing_workspace/invite_members.scss

@@ -1,4 +1,4 @@
-@import 'utils/mixins';
+@use 'utils/mixins';
 
 // UX decision to show no more than about 5 1/4 lines of users/emails at a time.
 $less-than-6-user-lines-height: 227px;
@@ -65,7 +65,7 @@ $less-than-6-user-lines-height: 227px;
     }
 }
 
-@include simple-in-and-out-before("InviteMembers");
+@include mixins.simple-in-and-out-before("InviteMembers");
 
 .ChannelsPreview--enter-from-after {
     &-enter {

webapp/channels/src/components/preparing_workspace/invite_members_link.scss

@@ -1,4 +1,4 @@
-@import 'utils/mixins';
+@use 'utils/mixins';
 
 .InviteMembersLink {
     display: flex;
@@ -55,7 +55,7 @@
     }
 
     &__button--single {
-        @include tertiary-button;
+        @include mixins.tertiary-button;
 
         height: 40px;
         border-radius: 4px;

webapp/channels/src/components/preparing_workspace/organization.scss

@@ -1,6 +1,6 @@
-@import 'utils/variables';
+@use 'utils/variables';
-@import 'utils/mixins';
+@use 'utils/mixins' as utils-mixins;
-@import './mixins';
+@use 'mixins';
 
 .Organization-body {
     display: flex;
@@ -23,7 +23,7 @@
 
 .Organization {
     &__input {
-        @include input;
+        @include mixins.input;
     }
 
     &__status {
@@ -60,4 +60,4 @@
     }
 }
 
-@include simple-in-and-out("Organization");
+@include utils-mixins.simple-in-and-out("Organization");

webapp/channels/src/components/preparing_workspace/plugins.scss

@@ -1,4 +1,4 @@
-@import 'utils/mixins';
+@use 'utils/mixins';
 
 .Plugins__marketplace {
     margin-top: 24px;
@@ -52,4 +52,4 @@
     }
 }
 
-@include simple-in-and-out("Plugins");
+@include mixins.simple-in-and-out("Plugins");

webapp/channels/src/components/preparing_workspace/preparing_workspace.scss

@@ -1,6 +1,6 @@
-@import 'utils/variables';
+@use 'utils/variables';
-@import 'utils/mixins';
+@use 'utils/mixins' as utils-mixins;
-@import 'mixins';
+@use 'mixins';
 
 .PreparingWorkspace {
     width: 100vw;
@@ -38,7 +38,7 @@
         padding: 10px;
         border-radius: 4px;
         background-color: var(--dnd-indicator);
-        box-shadow: $elevation-3;
+        box-shadow: variables.$elevation-3;
         color: var(--center-channel-bg);
         font-size: 14px;
         font-weight: 600;
@@ -55,15 +55,15 @@
     }
 
     .tertiary-button {
-        @include tertiary-button;
+        @include utils-mixins.tertiary-button;
-        @include button-medium;
+        @include utils-mixins.button-medium;
 
         margin-left: 16px;
     }
 
     .primary-button {
-        @include primary-button;
+        @include utils-mixins.primary-button;
-        @include button-medium;
+        @include utils-mixins.button-medium;
 
         box-sizing: border-box;
         border: 2px solid var(--button-bg);
@@ -75,7 +75,7 @@
     }
 
     .link-style {
-        @include link;
+        @include utils-mixins.link;
 
         background: transparent;
         font-size: 14px;
@@ -95,7 +95,7 @@
         animation-fill-mode: forwards;
         animation-timing-function: ease-in-out;
 
-        @include sideIllustrationKeyframe(invitation, -651, 0);
+        @include mixins.sideIllustrationKeyframe(invitation, -651, 0);
 
         &.enter {
             animation-name: invitationSlideInRight;
@@ -138,7 +138,7 @@
 
 @media screen and (min-width: 1200px) and (max-width: 1500px) {
     .PreparingWorkspace__invite-members-illustration {
-        @include sideIllustrationKeyframe(invitation, -651, -200);
+        @include mixins.sideIllustrationKeyframe(invitation, -651, -200);
 
         &.enter {
             animation-name: invitationSlideInRight;

webapp/channels/src/components/preparing_workspace/progress.scss

@@ -1,7 +1,7 @@
 @use 'sass:color';
 
-@import 'utils/variables';
+@use 'utils/variables';
-@import 'utils/mixins';
+@use 'utils/mixins';
 
 .PreparingWorkspaceProgress {
     position: fixed;
@@ -25,12 +25,12 @@
         height: 6px;
         border-radius: 6px;
         margin: 5px 0;
-        background: $primary-color;
+        background: variables.$primary-color;
         opacity: 0.2;
 
         &.active {
             opacity: 1;
-            outline: 3px solid color.adjust($primary-color, $lightness: 50%);
+            outline: 3px solid color.adjust(variables.$primary-color, $lightness: 50%);
         }
     }
 

webapp/channels/src/components/product_notices_modal/product_notices_modal.scss

@@ -1,5 +1,3 @@
-@charset 'UTF-8';
-
 .productNotices {
     width: 692px;
 

webapp/channels/src/components/profile_popover/profile_popover.scss

@@ -1,4 +1,4 @@
-@import 'utils/mixins';
+@use 'utils/mixins';
 
 .user-profile-popover-floating-overlay {
     // 99 being the z-index of the global header
@@ -109,7 +109,7 @@
                 font-size: 20px;
                 font-weight: 600;
                 line-height: 28px;
-                @include textEllipsis;
+                @include mixins.textEllipsis;
             }
 
             i.shared-user-icon {
@@ -129,7 +129,7 @@
             padding-inline-start: 16px;
             text-align: center;
 
-            @include textEllipsis;
+            @include mixins.textEllipsis;
         }
 
         hr {
@@ -163,14 +163,14 @@
                 font-weight: 400;
                 line-height: 20px;
 
-                @include textEllipsis;
+                @include mixins.textEllipsis;
             }
         }
 
         .user-profile-popover-pluggables {
             &:not(:empty) {
                 padding: 0 16px 12px 16px;
-                @include textEllipsis;
+                @include mixins.textEllipsis;
             }
         }
 
@@ -190,7 +190,7 @@
             flex-direction: column;
             padding: 0 16px 12px 16px;
 
-            @include textEllipsis;
+            @include mixins.textEllipsis;
 
             .user-popover__subtitle {
                 display: flex;
@@ -199,7 +199,7 @@
                 font-weight: 600;
                 gap: 4px;
                 line-height: 16px;
-                @include textEllipsis;
+                @include mixins.textEllipsis;
             }
 
             .user-popover__subtitle-text {

webapp/channels/src/components/should_verify_email/should_verify_email.scss

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-@import 'utils/mixins';
+@use 'utils/mixins';
 
 .should-verify-body {
     display: flex;
@@ -27,18 +27,18 @@
                 justify-content: center;
 
                 .should-verify-body-content-button-resend {
-                    @include tertiary-button;
+                    @include mixins.tertiary-button;
                 }
 
                 .should-verify-body-content-button-return {
-                    @include primary-button;
+                    @include mixins.primary-button;
 
                     margin-left: 16px;
                 }
 
                 .should-verify-body-content-button-resend,
                 .should-verify-body-content-button-return {
-                    @include button-large;
+                    @include mixins.button-large;
                 }
             }
 

webapp/channels/src/components/sidebar/unread_channel_indicator/unread_channel_indicator.scss

@@ -1,6 +1,4 @@
-@charset "UTF-8";
+@use 'utils/variables';
-
-@import 'utils/variables';
 
 .nav-pills__unread-indicator {
     position: absolute;
@@ -34,7 +32,7 @@
 
     body.enable-animations & {
         transition-delay: 0s;
-        transition-duration: $transition-quick;
+        transition-duration: variables.$transition-quick;
         transition-property: opacity, visibility;
         transition-timing-function: ease-out, step-start;
     }
@@ -63,7 +61,7 @@
 
         body.enable-animations & {
             transition-delay: 0s;
-            transition-duration: $transition-quick;
+            transition-duration: variables.$transition-quick;
             transition-property: opacity, visibility;
             transition-timing-function: ease-out, step-start;
         }

webapp/channels/src/components/signup/signup.scss

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-@import 'utils/mixins';
+@use 'utils/mixins';
 
 .signup-body {
     display: flex;
@@ -130,7 +130,7 @@
             box-shadow: var(--elevation-5);
 
             &.with-error {
-                @include shake-horizontally;
+                @include mixins.shake-horizontally;
             }
 
             .signup-body-card-content {
@@ -183,8 +183,8 @@
                     }
 
                     .signup-body-card-form-button-submit {
-                        @include primary-button;
+                        @include mixins.primary-button;
-                        @include button-large;
+                        @include mixins.button-large;
 
                         width: 100%;
                         margin-top: 30px;
@@ -230,7 +230,7 @@
                     line-height: 16px;
 
                     a {
-                        @include link;
+                        @include mixins.link;
 
                         font-size: 11px;
                     }
@@ -273,8 +273,8 @@
             justify-content: center;
 
             .signup-body-content-button-return {
-                @include primary-button;
+                @include mixins.primary-button;
-                @include button-medium;
+                @include mixins.button-medium;
             }
         }
     }

webapp/channels/src/components/threading/common/button/button.scss

@@ -1,4 +1,3 @@
-
 @mixin leveled-bg($hover, $active) {
     &:hover {
         &:not(:disabled) {

webapp/channels/src/components/threading/global_threads/thread_item/thread_item.scss

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-@import 'utils/_mixins';
+@use 'utils/_mixins';
 
 .ThreadItem {
     position: relative;
@@ -28,7 +28,7 @@
     }
 
     &__author {
-        @include clearfix;
+        @include mixins.clearfix;
 
         overflow: hidden;
         max-width: 100%;
@@ -124,7 +124,7 @@
         margin: 0 0 10px;
         color: rgba(var(--center-channel-color-rgb), 1);
 
-        @include text-clamp(2, 20);
+        @include mixins.text-clamp(2, 20);
     }
 
     time {

webapp/channels/src/components/three_days_left_trial_modal/three_days_left_trial_modal.scss

@@ -1,5 +1,5 @@
-@import 'utils/variables';
+@use 'utils/variables';
-@import 'utils/mixins';
+@use 'utils/mixins';
 
 //  since the modal is kind of tall, this makes it look more aligned to the top and the content better distributed
 .GenericModal.modal-dialog {
@@ -100,8 +100,8 @@
                 margin-top: 24px;
                 margin-left: auto;
 
-                @include primary-button;
+                @include mixins.primary-button;
-                @include button-medium;
+                @include mixins.button-medium;
 
                 &:focus-visible {
                     outline: none !important;

webapp/channels/src/components/toast/toast.scss

@@ -1,4 +1,4 @@
-@import 'utils/variables';
+@use 'utils/variables';
 
 .toast {
     position: absolute;
@@ -92,7 +92,7 @@
 }
 
 .toast__red {
-    background-color: $red;
+    background-color: variables.$red;
 }
 
 @media screen and (max-width: 768px) {

webapp/channels/src/components/tours/crt_tour/collapsed_reply_threads_modal.scss

@@ -1,6 +1,3 @@
-
-@charset 'UTF-8';
-
 .GenericModal.CollapsedReplyThreadsModal {
     width: 692px;
 

webapp/channels/src/components/trial_benefits_modal/trial_benefits_modal_step.scss

@@ -1,5 +1,5 @@
-@import 'utils/variables';
+@use 'utils/variables';
-@import 'utils/mixins';
+@use 'utils/mixins';
 
 .TrialBenefitsModalStep {
     &.slide-container {
@@ -70,16 +70,16 @@
                 margin-top: 10px;
 
                 .tertiary-button {
-                    @include tertiary-button;
+                    @include mixins.tertiary-button;
-                    @include button-medium;
+                    @include mixins.button-medium;
 
                     height: 32px;
                     font-size: 12px;
                 }
 
                 .primary-button {
-                    @include primary-button;
+                    @include mixins.primary-button;
-                    @include button-small;
+                    @include mixins.button-small;
 
                     margin-left: 8px;
                 }

webapp/channels/src/components/user_groups_modal/user_groups_modal.scss

@@ -1,5 +1,3 @@
-@charset 'UTF-8';
-
 .user-groups-modal-create,
 .user-groups-modal-update,
 .view-user-groups-modal,

webapp/channels/src/components/widgets/admin_console/admin_panel.scss

@@ -1,4 +1,4 @@
-@import 'utils/variables';
+@use 'utils/variables';
 
 .AdminPanel {
     padding: 0;
@@ -17,7 +17,7 @@
         width: 100%;
 
         th {
-            border-bottom: solid 1px alpha-color($black, 0.1);
+            border-bottom: solid 1px alpha-color(variables.$black, 0.1);
         }
 
         td,
@@ -37,7 +37,7 @@
         justify-content: space-between;
         padding: 20px;
         border-radius: var(--radius-s) var(--radius-s) 0 0;
-        background: $white;
+        background: variables.$white;
 
         h3 {
             padding: 0;

webapp/channels/src/components/widgets/inputs/channels_input.scss

@@ -1,4 +1,4 @@
-@import 'utils/variables';
+@use 'utils/variables';
 
 .ChannelsInput {
     &.empty {

webapp/channels/src/components/widgets/inputs/url_input/url_input.scss

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-@import 'utils/mixins';
+@use 'utils/mixins';
 
 .url-input-main {
     display: flex;
@@ -42,7 +42,7 @@
         }
 
         .url-input-button {
-            @include link;
+            @include mixins.link;
 
             padding: 0;
             border: none;

webapp/channels/src/components/widgets/inputs/users_emails_input.scss

@@ -1,4 +1,4 @@
-@import 'utils/variables';
+@use 'utils/variables';
 
 .UsersEmailsInput {
 

webapp/channels/src/components/widgets/menu/menu_group.scss

@@ -1,5 +1,5 @@
-@import 'utils/variables';
+@use 'utils/variables';
-@import 'utils/functions';
+@use 'utils/functions';
 
 .MenuGroup {
     &.menu-divider {

webapp/channels/src/components/widgets/menu/menu_header.scss

@@ -1,4 +1,4 @@
-@import 'utils/variables';
+@use 'utils/variables';
 
 .Menu {
     .MenuHeader {
@@ -11,7 +11,7 @@
         clear: both;
         color: inherit;
         cursor: default;
-        font-weight: $font-weight--semibold;
+        font-weight: variables.$font-weight--semibold;
         text-align: left;
         text-overflow: ellipsis;
         white-space: nowrap;

webapp/channels/src/components/widgets/menu/menu_items/menu_item.scss

@@ -1,4 +1,4 @@
-@import 'utils/variables';
+@use 'utils/variables';
 
 .Menu {
     .MenuItem {
@@ -394,6 +394,6 @@
 }
 
 .MenuItem__divider {
-    border-top: $border-gray;
+    border-top: variables.$border-gray;
     margin: 8px 0;
 }

webapp/channels/src/components/widgets/menu/menu_modals/submenu_modal/submenu_modal.scss

@@ -1,6 +1,4 @@
-@charset 'UTF-8';
+@use 'utils/variables';
-
-@import 'utils/variables';
 
 @media screen and (max-width: 768px) {
     #submenuModal {
@@ -84,7 +82,7 @@
 
                                 .MenuGroup {
                                     &.menu-divider {
-                                        background: $white;
+                                        background: variables.$white;
                                     }
                                 }
                             }

webapp/channels/src/components/widgets/menu/menu_wrapper.scss

@@ -1,10 +1,10 @@
-@import 'utils/functions';
+@use 'utils/functions';
 
 .MenuWrapper {
     position: relative;
 
     *:first-child {
-        @include unselectable;
+        @include functions.unselectable;
     }
 }
 

webapp/channels/src/components/widgets/separator/notification-separator.scss

@@ -1,5 +1,3 @@
-@charset 'UTF-8';
-
 .NotificationSeparator {
     .separator__hr {
         border-color: #ffaf53;

webapp/channels/src/components/widgets/separator/separator.scss

@@ -1,6 +1,4 @@
-@charset 'UTF-8';
+@use 'utils/functions';
-
-@import 'utils/functions';
 
 .Separator {
     position: relative;
@@ -58,8 +56,8 @@
         display: inline-block;
         padding: 0 1em;
         border-radius: 50px;
-        background: v(center-channel-bg);
+        background: functions.v(center-channel-bg);
-        color: v(center-channel-color);
+        color: functions.v(center-channel-color);
         font-size: 13px;
         font-weight: 700;
         line-height: 2em;

webapp/channels/src/components/widgets/team_icon/team_icon.scss

@@ -1,7 +1,5 @@
-@charset 'UTF-8';
+@use 'utils/mixins';
-
+@use 'utils/variables';
-@import 'utils/mixins';
-@import 'utils/variables';
 
 .TeamIcon__content {
     display: flex;
@@ -109,11 +107,11 @@
     }
 
     .TeamIcon__image {
-        @include clearfix;
+        @include mixins.clearfix;
 
         width: 100%;
         height: 100%;
-        background-color: $white;
+        background-color: variables.$white;
         background-repeat: unset;
         background-size: 100% 100%;
     }

webapp/channels/src/sass/admin_console_base/_module.scss

@@ -1,2 +1,2 @@
 // Only for combining all the files in this folder
-@import 'sys_css_variables';
+@use 'sys_css_variables';

webapp/channels/src/sass/base/_module.scss

@@ -1,4 +1,4 @@
 // Only for combining all the files in this folder
-@import 'typography';
+@use 'typography';
-@import 'structure';
+@use 'structure';
-@import 'css_variables';
+@use 'css_variables';

webapp/channels/src/sass/base/_structure.scss

@@ -1,4 +1,5 @@
-@charset 'UTF-8';
+@use "utils/mixins";
+@use "utils/variables";
 
 html,
 body {
@@ -8,7 +9,7 @@ body {
 body {
     position: relative;
     width: 100%;
-    background: $bg--gray;
+    background: variables.$bg--gray;
 
     &.sticky {
         .container-fluid {
@@ -29,7 +30,7 @@ body {
 }
 
 .sticky {
-    background: $white;
+    background: variables.$white;
 
     > .channel-view {
         overflow: auto;
@@ -73,14 +74,14 @@ body {
 }
 
 .container-fluid {
-    @include pie-clearfix;
+    @include mixins.pie-clearfix;
 
     position: relative;
     height: 100%;
 }
 
 .channel-view {
-    @include clearfix;
+    @include mixins.clearfix;
 
     position: relative;
     height: 100%;
@@ -102,7 +103,7 @@ body.admin-onboarding #root {
 .app__body {
     #root.channel-view {
         &:has(.backstage-body) {
-            background-color: $bg--gray;
+            background-color: variables.$bg--gray;
         }
     }
 }

webapp/channels/src/sass/base/_typography.scss

@@ -1,4 +1,5 @@
-@charset 'UTF-8';
+@use "utils/mixins";
+@use "utils/variables";
 
 b,
 strong {
@@ -6,19 +7,19 @@ strong {
 }
 
 a {
-    color: $primary-color;
+    color: variables.$primary-color;
     cursor: pointer;
     text-decoration: none;
     word-break: break-word;
 
     &:focus,
     &:hover {
-        color: $primary-color--hover;
+        color: variables.$primary-color--hover;
     }
 }
 
 .color--link {
-    color: $link-color;
+    color: variables.$link-color;
     cursor: pointer;
 
     &:hover,
@@ -28,7 +29,7 @@ a {
 }
 
 body {
-    @include font-smoothing;
+    @include mixins.font-smoothing;
 
     font-family: 'Open Sans', sans-serif;
 }
@@ -49,7 +50,7 @@ h1 {
 
 label {
     &.has-error {
-        color: $red;
+        color: variables.$red;
         font-weight: normal;
     }
 }
@@ -227,7 +228,7 @@ ol {
 
 .color--link--adminack {
     padding-left: 20px;
-    color: $white;
+    color: variables.$white;
     cursor: pointer;
     text-decoration: underline;
 

webapp/channels/src/sass/components/_admin-sidebar-header.scss

@@ -1,3 +1,6 @@
+@use "utils/mixins";
+@use "utils/variables";
+
 .AdminSidebarHeader {
     background: #333;
 
@@ -17,13 +20,13 @@
         }
 
         .header__info {
-            @include clearfix;
+            @include mixins.clearfix;
 
             position: relative;
             width: 100%;
             flex-grow: 1;
             padding: 3px 15px 0 8px;
-            color: $white;
+            color: variables.$white;
 
             .team__name {
                 overflow: hidden;
@@ -43,7 +46,7 @@
 
         .menu-icon {
             margin-right: 10px;
-            fill: $white;
+            fill: variables.$white;
             opacity: 0.8;
         }
 

webapp/channels/src/sass/components/_alerts.scss

@@ -1,5 +1,3 @@
-@charset 'UTF-8';
-
 .alert {
     padding: 8px 12px;
     border-radius: var(--radius-s);

webapp/channels/src/sass/components/_announcement-bar.scss

@@ -1,15 +1,15 @@
-@charset 'UTF-8';
+@use "utils/variables";
 
 .announcement-bar {
     display: flex;
     overflow: hidden;
     width: 100vw;
-    min-height: $announcement-bar-height;
+    min-height: variables.$announcement-bar-height;
-    max-height: $announcement-bar-height;
+    max-height: variables.$announcement-bar-height;
     align-items: center;
     justify-content: center;
     background-color: #579eff;
-    color: $white;
+    color: variables.$white;
     text-align: center;
 
     .announcement-bar__text {
@@ -48,7 +48,7 @@
         }
 
         .annnouncementBar__renewLicense {
-            border-color: $white;
+            border-color: variables.$white;
         }
     }
 
@@ -66,14 +66,14 @@
             top: 5px;
             right: 0;
             padding: 0 10px;
-            color: $white;
+            color: variables.$white;
             font-family: 'Open Sans', sans-serif;
             font-size: 20px;
             font-weight: 600;
             text-decoration: none;
 
             &:hover {
-                color: $white;
+                color: variables.$white;
                 text-decoration: none;
             }
         }

webapp/channels/src/sass/components/_buttons.scss

@@ -1,4 +1,4 @@
-@charset 'UTF-8';
+@use "utils/variables";
 
 .style--none {
     padding: 0;
@@ -313,22 +313,22 @@ button {
 
     &.btn-danger {
         background: var(--error-text);
-        color: $white;
+        color: variables.$white;
 
         .app__body & {
-            color: $white;
+            color: variables.$white;
 
             &:hover,
             &:focus,
             &:active {
-                color: $white;
+                color: variables.$white;
             }
         }
 
         &:hover,
         &:focus,
         &:active {
-            color: $white;
+            color: variables.$white;
         }
     }
 
@@ -340,8 +340,8 @@ button {
 
     &.btn-inactive {
         border-color: transparent;
-        background: $light-gray;
+        background: variables.$light-gray;
-        color: $white;
+        color: variables.$white;
     }
 
     .fa {
@@ -356,7 +356,3 @@ button {
         }
     }
 }
-
-%btn-transition {
-    transition: all 0.15s ease;
-}

webapp/channels/src/sass/components/_channel-header__icon.scss

@@ -1,3 +1,5 @@
+@use "utils/functions";
+
 .channel-header__icon {
     position: relative;
     z-index: 5;
@@ -43,23 +45,23 @@
     &--active.btn.btn-icon,
     &--active:hover {
         background: rgba(var(--button-bg-rgb), 0.08);
-        color: v(button-bg);
+        color: functions.v(button-bg);
-        fill: v(button-bg);
+        fill: functions.v(button-bg);
 
         .icon__text {
-            color: v(button-bg);
+            color: functions.v(button-bg);
         }
 
         .icon {
-            color: v(button-bg);
+            color: functions.v(button-bg);
         }
     }
 
     &--active-inverted,
     &--active-inverted:hover {
-        background: v(button-bg);
+        background: functions.v(button-bg);
-        color: v(button-color);
+        color: functions.v(button-color);
-        fill: v(button-color);
+        fill: functions.v(button-color);
     }
 
     .icon__text {

webapp/channels/src/sass/components/_channel-invite-modal.scss

@@ -1,7 +1,5 @@
-@charset "UTF-8";
+@use 'utils/variables';
-
+@use 'utils/mixins';
-@import 'utils/variables';
-@import 'utils/mixins';
 
 .modal .channel-invite__content,
 .modal .user-groups-modal__content {

webapp/channels/src/sass/components/_channel-switcher.scss

@@ -1,4 +1,4 @@
-@charset "UTF-8";
+@use "utils/functions";
 
 .modal {
     .channel-switcher,
@@ -55,7 +55,7 @@
 
             &:focus {
                 padding: 0 33px;
-                border: 1px solid v(button-bg);
+                border: 1px solid functions.v(button-bg);
             }
         }
 

webapp/channels/src/sass/components/_color-input.scss

@@ -1,4 +1,4 @@
-@charset 'UTF-8';
+@use "utils/functions";
 
 .color-input {
     position: relative;
@@ -21,7 +21,7 @@
     padding: 5px;
     border-color: rgba(var(--center-channel-color-rgb), 0.32) !important;
     border-radius: 0 2px 2px 0;
-    background: v(center-channel-bg) !important;
+    background: functions.v(center-channel-bg) !important;
     line-height: 0;
 }
 

webapp/channels/src/sass/components/_day-picker.scss

@@ -1,3 +1,5 @@
+@use "utils/functions";
+
 .app__body {
     .DayPicker {
         width: 100%;
@@ -100,7 +102,7 @@
         border: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
         border-radius: 4px;
         background: rgba(var(--center-channel-bg-rgb), 1);
-        box-shadow: 0 8px 24px 0 alpha-color(black, 0.12);
+        box-shadow: 0 8px 24px 0 functions.alpha-color(black, 0.12);
 
         & .DayPicker {
             margin-top: 8px;

webapp/channels/src/sass/components/_dropdown.scss

@@ -1,5 +1,3 @@
-@charset "utf-8";
-
 .dropdown-menu {
     border-radius: 4px;
     background: var(--center-channel-bg);

webapp/channels/src/sass/components/_edit-post-time-limit-button.scss

@@ -1,3 +1,5 @@
+@use "utils/variables";
+
 .edit-post-time-limit-button {
     height: 26px;
     padding: 0 8px;
@@ -16,8 +18,8 @@
     }
 
     &:hover {
-        border-color: $primary-color;
+        border-color: variables.$primary-color;
-        background: $primary-color;
+        background: variables.$primary-color;
-        color: $white;
+        color: variables.$white;
     }
 }

webapp/channels/src/sass/components/_emoji-picker-tabs.scss

@@ -1,5 +1,3 @@
-@charset "UTF-8";
-
 .emoji-picker {
     pointer-events: auto;
 

webapp/channels/src/sass/components/_emojisprite.scss

@@ -1,6 +1,3 @@
-
-@charset "UTF-8";
-
 .emojisprite-preview {
     width: 66px;
     max-width: none;

webapp/channels/src/sass/components/_emoticons.scss

@@ -1,4 +1,6 @@
-@charset "UTF-8";
+@use "utils/functions";
+@use "utils/mixins";
+@use "utils/variables";
 
 .reacticon {
     position: relative;
@@ -54,7 +56,7 @@
 }
 
 .emoticon-suggestion {
-    @include clearfix;
+    @include mixins.clearfix;
 
     width: 100%;
     height: 30px;
@@ -96,7 +98,7 @@
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
     user-select: none;
 
-    @include clearfix;
+    @include mixins.clearfix;
 
     .emoji-picker__header {
         background: var(--sidebar-header-bg);
@@ -208,7 +210,7 @@
 
         &:active {
             color: var(--button-bg);
-            color: v(center-channel-color);
+            color: functions.v(center-channel-color);
         }
 
         &--selected {
@@ -235,8 +237,8 @@
     display: none; // only visible < 480px width screen
     width: 100%;
     padding: 13px 10px 13px 15px;
-    border: 1px solid $light-gray;
+    border: 1px solid variables.$light-gray;
-    background: $primary-color;
+    background: variables.$primary-color;
     color: var(--sidebar-header-text-color);
 
     .emoji-picker__header-title {
@@ -252,7 +254,7 @@
         opacity: 1;
 
         &:hover {
-            background: rgba($black, 0.1);
+            background: rgba(variables.$black, 0.1);
         }
     }
 }
@@ -361,7 +363,7 @@
         border-radius: 4px;
 
         &:focus-within {
-            border: 2px solid v(button-bg);
+            border: 2px solid functions.v(button-bg);
 
             & .emoji-picker__search-icon {
                 padding-top: 7px;
@@ -398,19 +400,19 @@
         border: none;
         border-radius: 4px;
         background: none;
-        color: rgba(v(center-channel-color-rgb), 0.75);
+        color: rgba(functions.v(center-channel-color-rgb), 0.75);
 
         &:hover {
-            background: rgba(v(center-channel-color-rgb), 0.08);
+            background: rgba(functions.v(center-channel-color-rgb), 0.08);
-            color: rgba(v(center-channel-color-rgb), 0.75);
+            color: rgba(functions.v(center-channel-color-rgb), 0.75);
         }
 
         &:active,
         &--active,
         &--active:hover {
             background: rgba(var(--button-bg-rgb), 0.08);
-            color: v(button-bg);
+            color: functions.v(button-bg);
-            fill: v(button-bg);
+            fill: functions.v(button-bg);
         }
     }