MM-57093 Update SCSS, Stylelint, and related packages (#26296)

* Update Stylelint and related packages

* Autofix CSS files

* Fix scss/no-global-function-names

* Fix scss/operator-no-unspaced

* Fix scss/comment-no-empty

* Disable scss/at-extend-no-missing-placeholder

* Update libraries for loading sass

* Fix Rollup not emitting the CSS for the components package to the right place

* Add plugin to re-add stylistic Stylelint rules

* Actually import Stylelint plugin

webapp/channels/.stylelintrc.json

@@ -1,7 +1,13 @@
 {
-    "extends": ["stylelint-config-recommended", "stylelint-config-standard", "stylelint-config-idiomatic-order", "stylelint-config-recommended-scss"],
+    "extends": [
+        "stylelint-config-idiomatic-order",
+        "stylelint-config-recommended-scss"
+    ],
+    "plugins": [
+        "@stylistic/stylelint-plugin"
+    ],
     "rules": {
-        "indentation": 4,
+        "@stylistic/indentation": 4,
         "no-descending-specificity": null,
         "font-family-no-missing-generic-family-keyword": null,
         "property-no-unknown": [
@@ -15,6 +21,8 @@
             {
                 "ignore": ["comments"]
             }
-        ]
+        ],
+        "scss/load-no-partial-leading-underscore": null,
+        "scss/at-extend-no-missing-placeholder": null
     }
 }

webapp/channels/package.json

@@ -107,6 +107,7 @@
     "@hot-loader/react-dom": "17.0.2",
     "@mattermost/eslint-plugin": "*",
     "@redux-devtools/extension": "3.2.3",
+    "@stylistic/stylelint-plugin": "2.1.0",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "12.1.4",
     "@testing-library/user-event": "13.5.0",
@@ -174,12 +175,11 @@
     "react-router-enzyme-context": "1.2.0",
     "redux-mock-store": "1.5.4",
     "redux-persist-node-storage": "2.0.0",
-    "stylelint-config-idiomatic-order": "8.1.0",
+    "stylelint": "16.2.1",
-    "stylelint-config-recommended": "5.0.0",
+    "stylelint-config-idiomatic-order": "10.0.0",
-    "stylelint-config-recommended-scss": "4.2.0",
+    "stylelint-config-recommended-scss": "14.0.0",
-    "stylelint-config-standard": "22.0.0",
+    "stylelint-order": "6.0.4",
-    "stylelint-order": "4.1.0",
+    "stylelint-scss": "6.1.0",
-    "stylelint-scss": "3.19.0",
     "webpack-bundle-analyzer": "4.7.0",
     "webpack-pwa-manifest": "4.3.0",
     "yargs": "16.2.0"
@@ -190,7 +190,9 @@
     }
   },
   "scripts": {
-    "check": "eslint --ext .js,.jsx,.tsx,.ts ./src --quiet --cache && stylelint \"**/*.{css,scss}\" --cache",
+    "check": "npm run check:eslint && npm run check:stylelint",
+    "check:eslint": "eslint --ext .js,.jsx,.tsx,.ts ./src --quiet --cache",
+    "check:stylelint": "stylelint \"**/*.{css,scss}\" --cache",
     "fix": "eslint --ext .js,.jsx,.tsx,.ts ./src --quiet --fix --cache && stylelint \"**/*.{css,scss}\" --fix --cache",
     "build": "cross-env NODE_ENV=production webpack",
     "run": "webpack --progress --watch",

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

@@ -1,7 +1,7 @@
 .AdminUserCard {
     padding: 0;
-    margin: 2em 0 1em;
     border-radius: 2px;
+    margin: 2em 0 1em;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
 
     .noUserBody {

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

@@ -2,8 +2,8 @@
     width: 100%;
     height: '463px';
     border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08);
-    background-color: var(--sys-center-channel-bg);
     border-radius: 4px;
+    background-color: var(--sys-center-channel-bg);
     box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
     color: var(--sys-center-channel-color);
 }
@@ -168,9 +168,9 @@
         height: 32px;
         padding: 7px;
         border: none;
+        border-radius: 4px;
         margin-left: 4px;
         background: none;
-        border-radius: 4px;
 
         > i {
             font-size: 18px;

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

@@ -40,8 +40,8 @@
         max-width: none;
         padding: 24px;
         border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08);
-        background-color: var(--sys-center-channel-bg);
         border-radius: 4px;
+        background-color: var(--sys-center-channel-bg);
         box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
         color: var(--sys-center-channel-color);
         opacity: 1;
@@ -109,9 +109,9 @@
     width: 100%;
     padding: 13px 0;
     border: none;
+    border-radius: 4px;
     margin-top: 16px;
     background: var(--button-bg);
-    border-radius: 4px;
     box-shadow: inset 0 0 0 1px var(--sys-button-bg);
     color: var(--button-color);
     font-size: 14px;
@@ -170,19 +170,19 @@
 .PrivateCloudCard__actionButton {
     display: block;
 
-    @include fit-content;
-
     padding: 13px 20px;
     border: none;
+    border-radius: 4px;
     margin-top: 16px;
     background: var(--sys-center-channel-bg);
-    border-radius: 4px;
     box-shadow: inset 0 0 0 1px var(--sys-button-bg);
     color: var(--sys-button-bg);
     font-size: 14px;
     font-weight: 600;
     line-height: 14px;
 
+    @include fit-content;
+
     &:hover:not(.disabled) {
         background: rgba(var(--sys-button-bg-rgb), 0.04);
         text-decoration: none;
@@ -226,17 +226,17 @@
 .cancelSubscriptionSection__contactUs {
     display: block;
 
-    @include fit-content;
-
     padding: 13px 20px;
-    margin-top: 16px;
     border-radius: 4px;
+    margin-top: 16px;
     box-shadow: inset 0 0 0 1px var(--sys-dnd-indicator);
     color: var(--sys-dnd-indicator);
     font-size: 12px;
     font-weight: 600;
     line-height: 9.5px;
 
+    @include fit-content;
+
     &:hover:not(.disabled) {
         background: rgba(var(--sys-dnd-indicator-rgb), 0.04);
         color: var(--sys-dnd-indicator);

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

@@ -3,8 +3,8 @@
     flex: 0 0 auto;
     padding: 22px 0 42px 16px;
     border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
-    margin-right: 8px;
     border-radius: 4px;
+    margin-right: 8px;
 
     &--full-width {
         width: auto;

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

@@ -38,9 +38,9 @@
 
     .btn {
         padding: 11px 16px;
+        border-radius: 4px;
         margin-right: 8px;
         background: $primary-color;
-        border-radius: 4px;
         color: $white;
         font-size: 12px;
         font-weight: bold;

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

@@ -1,9 +1,9 @@
 @mixin cloud-card() {
     padding: 32px 54px 18px 32px;
     border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08);
+    border-radius: 4px;
     margin-top: 20px;
     background-color: var(--sys-center-channel-bg);
-    border-radius: 4px;
     box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
 }
 

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

@@ -2,9 +2,9 @@
     width: 332px;
     padding: 28px 32px;
     border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08);
+    border-radius: 4px;
     margin-left: 20px;
     background-color: var(--sys-center-channel-bg);
-    border-radius: 4px;
     box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
 }
 
@@ -152,8 +152,8 @@
     align-items: center;
     justify-content: center;
     padding: 11px 20px;
-    background: var(--sys-button-bg);
     border-radius: 4px;
+    background: var(--sys-button-bg);
     color: var(--sys-button-color);
 
     &:hover:not(.disabled) {

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

@@ -1,7 +1,7 @@
 .CompanyInfoDisplay {
     border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08);
-    background-color: var(--sys-center-channel-bg);
     border-radius: 4px;
+    background-color: var(--sys-center-channel-bg);
     box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
     color: var(--sys-center-channel-color);
 }
@@ -32,8 +32,8 @@
     display: flex;
     align-items: center;
     padding: 8px 16px;
-    background: var(--sys-button-bg);
     border-radius: 4px;
+    background: var(--sys-button-bg);
     color: var(--sys-button-color);
 
     &:hover:not(.disabled) {

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

@@ -1,9 +1,9 @@
 .CompanyInfoEdit__card {
     padding: 28px 32px;
     border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08);
+    border-radius: 4px;
     margin-top: 20px;
     background-color: var(--sys-center-channel-bg);
-    border-radius: 4px;
     box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
     isolation: isolate;
 

webapp/channels/src/components/admin_console/billing/delete_workspace/progress_modal.scss

@@ -12,15 +12,15 @@
     .ProcessPayment-progress {
         width: 387px;
         height: 4px;
+        border-radius: 4px;
         margin: 0 auto;
         margin-top: 60px;
         background: rgba(var(--secondary-blue-rgb), 0.12);
-        border-radius: 4px;
     }
 
     .ProcessPayment-progress-fill {
         height: 100%;
-        background: var(--button-bg);
         border-radius: 4px;
+        background: var(--button-bg);
     }
 }

webapp/channels/src/components/admin_console/billing/delete_workspace/result_modal.scss

@@ -37,8 +37,8 @@
         width: 600px;
         height: 360px;
         border: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
-        margin: auto;
         border-radius: 8px;
+        margin: auto;
         transform: translate(-50%, -50%) !important;
 
         .modal-header {

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

@@ -1,7 +1,7 @@
 .PaymentInfoDisplay {
     border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08);
-    background-color: var(--sys-center-channel-bg);
     border-radius: 4px;
+    background-color: var(--sys-center-channel-bg);
     box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
     color: var(--sys-center-channel-color);
 }
@@ -32,8 +32,8 @@
     display: flex;
     align-items: center;
     padding: 8px 16px;
-    background: var(--sys-button-bg);
     border-radius: 4px;
+    background: var(--sys-button-bg);
     color: var(--sys-button-color);
 
     &:hover:not(.disabled) {
@@ -131,8 +131,8 @@
 
 .PaymentInfoDisplay__paymentInfo-editButton {
     padding: 2px;
-    margin-left: 12px;
     border-radius: 4px;
+    margin-left: 12px;
     color: rgba(var(--sys-center-channel-color-rgb), 0.75);
     font-size: 18px;
 

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

@@ -1,9 +1,9 @@
 .PaymentInfoEdit__card {
     padding: 28px 32px;
     border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08);
+    border-radius: 4px;
     margin-top: 20px;
     background-color: var(--sys-center-channel-bg);
-    border-radius: 4px;
     box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
 }
 

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

@@ -4,8 +4,8 @@
     width: 568px;
     padding: 28px 32px;
     border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08);
-    background: var(--sys-center-channel-bg);
     border-radius: 4px;
+    background: var(--sys-center-channel-bg);
     box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
 }
 
@@ -36,8 +36,8 @@
 
     &.btn {
         padding: 11px 16px;
-        background: $primary-color;
         border-radius: 4px;
+        background: $primary-color;
         color: $white;
         font-size: 12px;
         font-weight: bold;
@@ -116,9 +116,9 @@
 
 .TrialBadge {
     padding: 0 4px;
+    border-radius: 3px;
     margin-left: 10px;
     background: var(--sys-online-indicator);
-    border-radius: 3px;
     color: #fff;
     text-transform: uppercase;
 

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

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 @import 'utils/variables';
 
 .DataGrid {
@@ -22,8 +24,8 @@
             height: 32px;
             box-sizing: border-box;
             border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.2);
-            margin-left: 8px;
             border-radius: 4px;
+            margin-left: 8px;
 
             input {
                 width: 100%;
@@ -94,7 +96,7 @@
 
             &:hover {
                 border-left: 2px solid $primary-color;
-                background-color: lighten($primary-color, 45%);
+                background-color: color.adjust($primary-color, $lightness: 45%);
             }
 
             .DataGrid_cell {
@@ -215,9 +217,9 @@
                 flex-direction: column;
                 align-items: center;
                 padding: 8px;
+                border-radius: 4px;
                 margin-left: auto;
                 background: transparent;
-                border-radius: 4px;
                 color: rgba(var(--sys-center-channel-color-rgb), 0.75);
                 text-decoration: none;
             }

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

@@ -3,8 +3,8 @@
 .FeatureDiscovery {
     display: grid;
     padding: 20px;
-    background: $white;
     border-radius: 8px;
+    background: $white;
     box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
     font-family: Open Sans;
     font-style: normal;
@@ -45,9 +45,9 @@
     width: 160px;
     height: 48px;
     padding: 14px 0;
+    border-radius: 4px;
     margin-right: 8px;
     background: $primary-color;
-    border-radius: 4px;
     color: $white;
     font-size: 16px;
     font-weight: 400;

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

@@ -8,8 +8,8 @@
         height: 32px;
         padding: 0 10px;
         border: 0;
-        background: var(--sys-center-channel-bg);
         border-radius: 4px;
+        background: var(--sys-center-channel-bg);
         color: var(--sys-button-bg);
         font-size: 12px;
 
@@ -36,10 +36,10 @@
         box-sizing: border-box;
         padding: 16px;
         border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08);
+        border-radius: 4px;
         margin-top: 4px;
         margin-bottom: 24px;
         background: var(--sys-center-channel-bg);
-        border-radius: 4px;
         box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
 
         &.Filter__show {
@@ -104,8 +104,8 @@
             &__control {
                 min-height: 32px;
                 border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.16);
-                background: var(--sys-center-channel-bg);
                 border-radius: 4px;
+                background: var(--sys-center-channel-bg);
                 color: rgba(var(--sys-center-channel-color-rgb), 0.75);
                 font-size: 12px;
 

webapp/channels/src/components/admin_console/ip_filtering/add_edit_ip_filter_modal.scss

@@ -5,8 +5,8 @@
         left: 50%;
         width: 600px;
         border: 1 px solid rgba(var(--center-channel-color-rgb), 0.08);
-        margin: auto;
         border-radius: 12px;
+        margin: auto;
         transform: translate(-50%, -50%) !important;
     }
 
@@ -59,8 +59,8 @@
         padding-bottom: 0;
         padding-left: 32px;
         border: 0;
-        background: var(--center-channel-bg) !important;
         border-radius: 12px;
+        background: var(--center-channel-bg) !important;
         color: var(--center-channel-color);
     }
 
@@ -79,8 +79,8 @@
             max-width: 536px;
             height: 52px;
             border: 1px rgba(87, 158, 255, 0.16) solid;
-            background: rgba(87, 158, 255, 0.08);
             border-radius: 4px;
+            background: rgba(87, 158, 255, 0.08);
 
             .Content {
                 display: flex;
@@ -155,9 +155,9 @@
                 flex: none;
                 padding: 12px 20px;
                 border: none;
+                border-radius: 4px;
                 margin-left: 8px;
                 background: var(--button-bg);
-                border-radius: 4px;
                 color: var(--sys-button-color);
                 font-size: 14px;
                 font-weight: 600;
@@ -168,8 +168,8 @@
 
     .modal-footer {
         padding: 24px 32px;
-        border-top: none;
         border-radius: 12px;
+        border-top: none;
         font-family: Open Sans;
         font-size: 14px;
         font-style: normal;
@@ -179,8 +179,8 @@
         .btn-cancel {
             padding: 10px 20px;
             border: none;
-            background: var(--button-bg-8, rgba(28, 88, 217, 0.08));
             border-radius: 4px;
+            background: var(--button-bg-8, rgba(28, 88, 217, 0.08));
             color: var(--button-bg, #1c58d9);
         }
 
@@ -193,9 +193,9 @@
 
             padding: 10px 20px;
             border: none;
+            border-radius: 4px;
             margin-left: 8px;
             background: var(--button-bg, #1c58d9);
-            border-radius: 4px;
             color: var(--button-color, #fff);
         }
     }

webapp/channels/src/components/admin_console/ip_filtering/delete_confirmation.scss

@@ -5,8 +5,8 @@
         left: 50%;
         width: 600px;
         border: 1 px solid rgba(var(--center-channel-color-rgb), 0.08);
-        margin: auto;
         border-radius: 12px;
+        margin: auto;
         transform: translate(-50%, -50%) !important;
     }
 
@@ -58,8 +58,8 @@
         padding-bottom: 0;
         padding-left: 32px;
         border: 0;
-        background: var(--center-channel-bg) !important;
         border-radius: 12px;
+        background: var(--center-channel-bg) !important;
         color: var(--center-channel-color);
     }
 
@@ -81,8 +81,8 @@
 
     .modal-footer {
         padding: 24px 32px;
-        border-top: none;
         border-radius: 12px;
+        border-top: none;
         font-family: Open Sans;
         font-size: 14px;
         font-style: normal;
@@ -92,17 +92,17 @@
         .btn-cancel {
             padding: 10px 20px;
             border: none;
-            background: var(--button-bg-8, rgba(28, 88, 217, 0.08));
             border-radius: 4px;
+            background: var(--button-bg-8, rgba(28, 88, 217, 0.08));
             color: var(--button-bg, #1c58d9);
         }
 
         .btn-delete {
             padding: 10px 20px;
             border: none;
+            border-radius: 4px;
             margin-left: 8px;
             background: var(--denim-status-do-not-disturb, #d24b4e);
-            border-radius: 4px;
             color: var(--button-color, #fff);
         }
     }

webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_sections.scss

@@ -3,8 +3,8 @@
     height: auto;
     max-height: 100%;
     border: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
-    background: var(--center-channel-bg);
     border-radius: 4px;
+    background: var(--center-channel-bg);
     box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.08);
 
     .TableSectionContent {
@@ -225,8 +225,8 @@
                         justify-content: flex-start;
                         padding: 10px 16px;
                         border: none;
-                        background: #1c58d9;
                         border-radius: 4px;
+                        background: #1c58d9;
                         color: #fff;
                         gap: 10px;
                     }
@@ -239,8 +239,8 @@
                 justify-content: flex-start;
                 padding: 16px;
                 border: 1px solid var(--error-text-16, rgba(210, 75, 78, 0.16));
-                background: var(--error-text-8, rgba(210, 75, 78, 0.08));
                 border-radius: 4px;
+                background: var(--error-text-8, rgba(210, 75, 78, 0.08));
                 gap: 12px;
 
                 .Icon {

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

@@ -24,8 +24,8 @@
             justify-content: flex-start;
             padding: 24px 32px;
             border: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
-            background-color: var(--center-channel-bg);
             border-radius: 4px;
+            background-color: var(--center-channel-bg);
             box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.08);
             gap: 24px;
 

webapp/channels/src/components/admin_console/ip_filtering/save_confirmation_modal.scss

@@ -5,8 +5,8 @@
         left: 50%;
         width: 600px;
         border: 1 px solid rgba(var(--center-channel-color-rgb), 0.08);
-        margin: auto;
         border-radius: 12px;
+        margin: auto;
         transform: translate(-50%, -50%) !important;
     }
 
@@ -58,8 +58,8 @@
         padding-bottom: 0;
         padding-left: 32px;
         border: 0;
-        background: var(--center-channel-bg) !important;
         border-radius: 12px;
+        background: var(--center-channel-bg) !important;
         color: var(--center-channel-color);
     }
 
@@ -86,9 +86,9 @@
             justify-content: flex-start;
             padding: 16px;
             border: 1px solid rgba(87, 158, 255, 0.16);
+            border-radius: 4px;
             margin-top: 32px;
             background: rgba(87, 158, 255, 0.08);
-            border-radius: 4px;
             gap: 12px;
 
             .Icon {
@@ -137,8 +137,8 @@
 
     .modal-footer {
         padding: 24px 32px;
-        border-top: none;
         border-radius: 12px;
+        border-top: none;
         font-family: Open Sans;
         font-size: 14px;
         font-style: normal;
@@ -148,17 +148,17 @@
         .btn-cancel {
             padding: 10px 20px;
             border: none;
-            background: var(--button-bg-8, rgba(28, 88, 217, 0.08));
             border-radius: 4px;
+            background: var(--button-bg-8, rgba(28, 88, 217, 0.08));
             color: var(--button-bg, #1c58d9);
         }
 
         .btn-delete {
             padding: 10px 20px;
             border: none;
+            border-radius: 4px;
             margin-left: 8px;
             background: var(--denim-status-do-not-disturb, #d24b4e);
-            border-radius: 4px;
             color: var(--button-color, #fff);
         }
     }

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

@@ -37,8 +37,8 @@
 
     button {
         width: 100%;
-        margin: 5px auto;
         border-radius: 4px;
+        margin: 5px auto;
     }
 
     .purchase_buttons {
@@ -99,8 +99,8 @@
     .licenseInformation {
         padding: 24px;
         border: 1px solid rgba(63, 67, 80, 0.16);
-        margin: 15px 0;
         border-radius: 4px;
+        margin: 15px 0;
 
         .license-details-top {
             display: flex;
@@ -178,9 +178,9 @@
                 display: block;
                 padding: 12px 20px;
                 border: 1px solid var(--sys-button-bg);
+                border-radius: 4px;
                 margin-top: 15px;
                 background-color: var(--sys-center-channel-bg);
-                border-radius: 4px;
                 color: var(--sys-button-bg);
 
                 span {

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

@@ -11,8 +11,8 @@
         .panel-card {
             padding: 28px 32px;
             border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08);
-            background: var(--sys-center-channel-bg);
             border-radius: 4px;
+            background: var(--sys-center-channel-bg);
             box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
         }
     }
@@ -24,8 +24,8 @@
         .panel-card {
             padding: 28px 32px;
             border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08);
-            background: var(--sys-center-channel-bg);
             border-radius: 4px;
+            background: var(--sys-center-channel-bg);
             box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
         }
     }

webapp/channels/src/components/admin_console/license_settings/modals/confirm_license_removal_modal.scss

@@ -50,9 +50,9 @@
 
         button {
             height: 40px;
+            border-radius: 4px;
             margin-top: 15px !important;
             margin-left: 10px;
-            border-radius: 4px;
         }
     }
 

webapp/channels/src/components/admin_console/license_settings/modals/ee_license_modal.scss

@@ -30,9 +30,9 @@
         display: flex;
 
         button {
+            border-radius: 4px;
             margin-top: 15px !important;
             margin-left: auto;
-            border-radius: 4px;
         }
     }
 

webapp/channels/src/components/admin_console/license_settings/modals/upload_license_modal.scss

@@ -53,8 +53,8 @@
             width: 90%;
             padding: 12px;
             border: 1px solid rgba(63, 67, 80, 0.32);
-            margin-top: 15px;
             border-radius: 4px;
+            margin-top: 15px;
 
             &__titleSection {
                 color: rgba(63, 67, 80, 0.75);
@@ -138,8 +138,8 @@
             height: 48px;
             padding: 5px 24px;
             border: 0 !important;
-            margin-top: 15px !important;
             border-radius: 4px;
+            margin-top: 15px !important;
             font-size: 16px;
             font-weight: 600;
             line-height: 18px;

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

@@ -3,9 +3,9 @@
         display: block;
         padding: 12px 20px;
         border: none;
+        border-radius: 4px;
         margin-top: 15px;
         background: var(--sys-button-bg);
-        border-radius: 4px;
         color: var(--sys-button-color);
 
         span {

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

@@ -36,8 +36,8 @@
 
     button {
         width: 100%;
-        margin: 5px auto;
         border-radius: 4px;
+        margin: 5px auto;
     }
 
     .upgrade-error {

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

@@ -4,9 +4,9 @@
     display: grid;
     padding: 0;
     border: 1px solid rgba(87, 158, 255, 0.24);
+    border-radius: 4px;
     margin-bottom: 25px;
     background-color: rgba(87, 158, 255, 0.08);
-    border-radius: 4px;
     font-family: Open Sans;
     font-style: normal;
     font-weight: normal;
@@ -19,9 +19,9 @@
     .btn {
         width: 191px;
         height: 32px;
+        border-radius: 4px;
         margin-right: 10px;
         background: $primary-color;
-        border-radius: 4px;
         color: $white;
         font-size: 12px;
         font-weight: 600;
@@ -41,8 +41,8 @@
         height: 32px;
         align-items: center;
         justify-content: center;
-        margin: 0 10px 0 0;
         border-radius: 4px;
+        margin: 0 10px 0 0;
         text-decoration: none;
 
         &:hover {

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

@@ -1,7 +1,7 @@
 .config-section {
+    border-radius: 4px;
     margin-top: 20px;
     background: white;
-    border-radius: 4px;
 
     .admin-console__wrapper {
         padding: 0;

webapp/channels/src/components/admin_console/server_logs/log_list.scss

@@ -18,8 +18,8 @@
 
     .btn-inverted {
         border: 2px solid var(--denim-button-bg);
-        background: transparent;
         border-radius: 4px;
+        background: transparent;
         color: var(--denim-button-bg);
         font-weight: bold;
         line-height: 12px;
@@ -27,8 +27,8 @@
 
     .btn-dangerous {
         border: 2px solid var(--dnd-indicator);
-        background: transparent;
         border-radius: 4px;
+        background: transparent;
         color: var(--dnd-indicator);
         font-weight: bold;
         line-height: 16px;

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

@@ -48,8 +48,8 @@
 
                 .MenuWrapper {
                     box-sizing: border-box;
-                    background: rgba(var(--sys-center-channel-color-rgb), 0.04);
                     border-radius: 4px;
+                    background: rgba(var(--sys-center-channel-color-rgb), 0.04);
 
                     .PermissionSectionDropdownButton {
                         display: flex;
@@ -59,8 +59,8 @@
                         justify-content: space-between;
                         padding: 1px 0 1px 4px;
                         border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.16);
-                        background: var(--sys-center-channel-bg);
                         border-radius: 4px;
+                        background: var(--sys-center-channel-bg);
                         color: var(--sys-center-channel-color);
                         font-size: 12px;
                         font-style: normal;
@@ -151,8 +151,8 @@
                 .PermissionSection_description {
                     span {
                         padding: 0 4px;
-                        background: rgba(var(--sys-center-channel-color-rgb), 0.08);
                         border-radius: 2px;
+                        background: rgba(var(--sys-center-channel-color-rgb), 0.08);
                     }
 
                     margin: 0;

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

@@ -56,8 +56,8 @@
         text-decoration: none;
 
         &:hover {
-            background-color: $light-gray;
             border-radius: 3px;
+            background-color: $light-gray;
         }
 
         &.warning {

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

@@ -7,8 +7,8 @@
     height: 20px;
     align-self: flex-start;
     justify-content: center;
-    background: var(--online-indicator, #3db887);
     border-radius: 12px;
+    background: var(--online-indicator, #3db887);
 
     i {
         color: var(--center-channel-bg, #fff);

webapp/channels/src/components/admin_console/team_channel_settings/team/details/team_profile.scss

@@ -5,9 +5,9 @@
 .upgrade-options-button {
     height: 38px;
     padding: 9px, 16px;
+    border-radius: 4px;
     margin-left: 16px;
     background: #1c58d9;
-    border-radius: 4px;
     color: #fff;
     font-weight: 600;
 }

webapp/channels/src/components/admin_console/workspace-optimization/dashboard.scss

@@ -73,9 +73,9 @@
         align-items: center;
         padding: 24px;
         border: 1px solid rgba(var(--sys-denim-center-channel-text-rgb), 0.08) !important;
+        border-radius: 4px;
         margin-left: 4px;
         background: var(--sys-center-channel-bg);
-        border-radius: 4px;
         box-shadow: var(--elevation-1);
 
         &__scoreEllipseSvg {
@@ -200,8 +200,8 @@
                         height: 44px;
                         align-items: center;
                         justify-content: center;
-                        background-color: rgba(var(--sys-denim-center-channel-text-rgb), 0.16);
                         border-radius: 50%;
+                        background-color: rgba(var(--sys-denim-center-channel-text-rgb), 0.16);
 
                         &.success {
                             background-color: rgba(var(--sys-online-indicator-rgb), 0.16);
@@ -293,9 +293,9 @@
                     button {
                         max-height: 32px;
                         padding: 5px 20px !important;
+                        border-radius: 4px !important;
                         margin-top: 0;
                         margin-right: 10px;
-                        border-radius: 4px !important;
                         font-weight: 600;
                     }
                 }

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

@@ -102,8 +102,8 @@
         justify-content: center;
         padding: 0;
         border: none;
-        background: transparent;
         border-radius: 4px;
+        background: transparent;
         color: rgba(var(--center-channel-color-rgb), 0.75);
         cursor: pointer;
         fill: currentColor;
@@ -202,9 +202,9 @@
         padding: 0;
 
         &__body {
+            border-radius: 0;
             border-right: none;
             border-left: none;
-            border-radius: 0;
 
             &:focus-visible,
             &:focus-within,

webapp/channels/src/components/alert_banner.scss

@@ -60,8 +60,8 @@
 
         padding: 10px 16px;
         border: none;
-        background: var(--denim-button-bg);
         border-radius: 4px;
+        background: var(--denim-button-bg);
         color: white;
         font-size: 12px;
         font-weight: 600;
@@ -74,9 +74,9 @@
 
         padding: 10px 16px;
         border: none;
+        border-radius: 4px;
         margin-left: 4px;
         background: rgba(28, 88, 217, 0.08);
-        border-radius: 4px;
         color: #1c58d9;
     }
 }
@@ -85,8 +85,8 @@
     display: flex;
     padding: 3px;
     border: none;
-    background: none;
     border-radius: 4px;
+    background: none;
 
     &:hover {
         background: rgba(0, 0, 0, 0.08);

webapp/channels/src/components/analytics/true_up_review.scss

@@ -3,8 +3,8 @@
         width: 100%;
         height: '463px';
         border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08);
-        background-color: var(--sys-center-channel-bg);
         border-radius: 4px;
+        background-color: var(--sys-center-channel-bg);
         box-shadow: var(--elevation-1);
         color: var(--sys-center-channel-color);
     }

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

@@ -4,10 +4,10 @@
     display: block;
     padding: 12px 20px;
     border: 1px solid var(--sys-button-bg);
+    border-radius: 4px;
     margin-top: 15px;
     margin-left: 10px;
     background-color: var(--sys-center-channel-bg);
-    border-radius: 4px;
     color: var(--sys-button-bg);
 
     span {

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

@@ -4,9 +4,9 @@
     display: block;
     padding: 12px 20px;
     border: none;
+    border-radius: 4px;
     margin-top: 15px;
     background: var(--sys-button-bg);
-    border-radius: 4px;
     color: var(--sys-button-color);
 
     span {

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

@@ -4,9 +4,9 @@
     display: block;
     padding: 12px 20px;
     border: none;
+    border-radius: 4px;
     margin-top: 15px;
     background: var(--sys-button-bg);
-    border-radius: 4px;
     color: var(--sys-button-color);
 
     span {

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

@@ -49,8 +49,8 @@ $app-bar-width: 48px;
                     left: 0;
                     width: 3px;
                     height: $app-bar-icon-size;
-                    background-color: var(--sidebar-text-active-border);
                     border-radius: 0 2px 2px 0;
+                    background-color: var(--sidebar-text-active-border);
                     content: '';
                 }
 
@@ -71,8 +71,8 @@ $app-bar-width: 48px;
                 overflow: hidden;
                 width: $app-bar-icon-size;
                 height: $app-bar-icon-size;
-                margin: 0 auto;
                 border-radius: 50%;
+                margin: 0 auto;
                 line-height: 1;
 
                 &:hover {

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

@@ -93,14 +93,14 @@
                 background-color: unset;
 
                 &[aria-expanded='true'] {
-                    background-color: rgba(var(--button-bg-rgb), 0.12);
                     border-radius: 4px;
+                    background-color: rgba(var(--button-bg-rgb), 0.12);
                 }
             }
 
             #menuWrapper:hover {
-                background-color: rgba(var(--center-channel-color-rgb), 0.08);
                 border-radius: 4px;
+                background-color: rgba(var(--center-channel-color-rgb), 0.08);
             }
         }
     }
@@ -143,8 +143,8 @@
                         width: 3px;
                         height: 3px;
                         flex-shrink: 0;
-                        background-color: rgba(var(--center-channel-color-rgb), 0.75);
                         border-radius: 50%;
+                        background-color: rgba(var(--center-channel-color-rgb), 0.75);
                     }
 
                     .more-modal__description {

webapp/channels/src/components/card/card.scss

@@ -1,7 +1,7 @@
 .Card {
     border: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
-    background-color: var(--center-channel-bg);
     border-radius: 4px;
+    background-color: var(--center-channel-bg);
     box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
     transition: box-shadow 0.3s ease-in-out;
 
@@ -22,9 +22,9 @@
     &.console {
         width: 100%;
         border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08);
+        border-radius: 2px;
         margin-bottom: 20px;
         background-color: var(--sys-center-channel-bg);
-        border-radius: 2px;
         box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
         color: var(--sys-center-channel-color);
 
@@ -50,8 +50,8 @@
                 height: 32px;
                 padding: 10px 16px;
                 border: none;
-                margin-left: auto;
                 border-radius: 4px;
+                margin-left: auto;
                 font-size: 12px;
                 font-weight: 600;
                 line-height: 9.5px;

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

@@ -5,9 +5,9 @@
     align-items: center;
     padding: 16px;
     border: 1px rgba(var(--center-channel-color-rgb), 0.08) solid;
+    border-radius: 4px;
     margin: 0 24px 13px;
     background-color: rgba(var(--center-channel-color-rgb), 0.04);
-    border-radius: 4px;
 
     &__left {
         align-self: flex-start;

webapp/channels/src/components/channel_notifications_modal/channel_notifications_modal.scss

@@ -52,8 +52,8 @@
         display: flex;
         padding: 5px 8px;
         border: none;
-        background: transparent;
         border-radius: 4px;
+        background: transparent;
         color: var(--button-bg);
         font-size: 12px;
         font-weight: 600;
@@ -75,8 +75,8 @@
     &__save-btn {
         padding: 12px 20px 12px 20px;
         border: none;
-        background: var(--button-bg);
         border-radius: 4px;
+        background: var(--button-bg);
         color: var(--button-color);
         font-size: 14px;
         font-weight: 600;
@@ -100,8 +100,8 @@
     &__cancel-btn {
         padding: 12px 20px 12px 20px;
         border: none;
-        background: rgba(var(--button-bg-rgb), 0.08);
         border-radius: 4px;
+        background: rgba(var(--button-bg-rgb), 0.08);
         color: var(--button-bg);
         font-size: 14px;
         font-weight: 600;

webapp/channels/src/components/cloud_fetch_error/cloud_fetch_error.scss

@@ -4,8 +4,8 @@
     align-items: center;
     padding: 10px;
     border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08);
-    background-color: var(--sys-center-channel-bg);
     border-radius: 4px;
+    background-color: var(--sys-center-channel-bg);
     box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
     color: var(--sys-center-channel-color);
     text-align: center;

webapp/channels/src/components/cloud_invoice_preview/cloud_invoice_preview.scss

@@ -2,8 +2,8 @@
     top: 15px;
     width: 860px;
     height: 1030px;
-    margin: 0 auto;
     border-radius: 8px;
+    margin: 0 auto;
     overflow-y: hidden !important;
 
     .modal-header {

webapp/channels/src/components/cloud_start_trial/request_business_email_modal.scss

@@ -11,8 +11,8 @@
     .modal-content {
         padding: 0 !important;
         border-color: rgba(var(--center-channel-color-rgb), 0.16);
-        background: var(--center-channel-bg);
         border-radius: 8px;
+        background: var(--center-channel-bg);
         color: var(--center-channel-color);
     }
 
@@ -43,8 +43,8 @@
         height: 38px;
         padding: 0;
         border: 0;
-        background: var(--center-channel-bg) !important;
         border-radius: 8px;
+        background: var(--center-channel-bg) !important;
         color: var(--center-channel-color);
     }
 

webapp/channels/src/components/common/accordion/accordion.scss

@@ -7,8 +7,8 @@
     .accordion-card {
         box-sizing: border-box;
         border: 1px solid rgba(var(--center-channel-color-rgb) 0.08);
-        background: var(--center-channel-bg);
         border-radius: 4px;
+        background: var(--center-channel-bg);
         box-shadow: var(--elevation-1);
 
         .accordion-card:not(:first-of-type) {

webapp/channels/src/components/common/carousel/carousel.scss

@@ -98,9 +98,9 @@
             .dot {
                 width: 8px;
                 height: 8px;
+                border-radius: 50%;
                 margin: 0 5px;
                 background: rgba(var(--button-bg-rgb), 0.25);
-                border-radius: 50%;
             }
 
             .dot.active {

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

@@ -9,9 +9,9 @@
     align-items: center;
     padding: 16px 24px 24px;
     border: none;
+    border-radius: 8px;
     margin-right: 16px;
     background: var(--center-channel-bg);
-    border-radius: 8px;
     box-shadow: $elevation-3;
     cursor: pointer;
     list-style-type: none;

webapp/channels/src/components/custom_status/custom_status.scss

@@ -105,8 +105,8 @@
         align-items: center;
         justify-content: center;
         border: none;
-        background: transparent;
         border-radius: 4px;
+        background: transparent;
         color: rgba(var(--center-channel-color-rgb), 0.64);
         fill: rgba(var(--center-channel-color-rgb), 0.64);
 
@@ -211,8 +211,8 @@
         font-size: inherit;
 
         &:hover {
-            background-color: rgba(var(--center-channel-color-rgb), 0.08);
             border-radius: 4px;
+            background-color: rgba(var(--center-channel-color-rgb), 0.08);
         }
 
         &:active {
@@ -338,8 +338,8 @@ span.emoticon[style]:hover {
         height: 40px;
         padding: 10px 40px;
         border: 2px solid var(--button-bg);
-        background: var(--center-channel-bg);
         border-radius: 4px;
+        background: var(--center-channel-bg);
         color: var(--center-channel-color);
         cursor: pointer;
         font-size: 14px;

webapp/channels/src/components/date_picker/date_picker.scss

@@ -1,9 +1,9 @@
 .date-picker__popper {
     padding: 12px;
     border: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
+    border-radius: 4px;
     margin: 0;
     background: var(--center-channel-bg);
-    border-radius: 4px;
     box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.12);
 }
 

webapp/channels/src/components/dnd_custom_time_picker_modal/dnd_custom_time_picker_modal.scss

@@ -55,8 +55,8 @@
     align-items: center;
     padding: 0 16px;
     border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
-    background: rgba(var(--center-channel-bg-rgb), 1);
     border-radius: 4px;
+    background: rgba(var(--center-channel-bg-rgb), 1);
     cursor: pointer;
     text-align: left;
 
@@ -80,8 +80,8 @@
         padding: 0 0 2px 40px;
         border: none;
         border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
-        background: transparent;
         border-radius: 4px;
+        background: transparent;
         cursor: pointer;
         font-size: inherit;
 

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

@@ -13,14 +13,14 @@
 .ProcessPayment-progress {
     width: 387px;
     height: 4px;
+    border-radius: 4px;
     margin: 0 auto;
     margin-top: 60px;
     background: rgba(var(--secondary-blue-rgb), 0.12);
-    border-radius: 4px;
 }
 
 .ProcessPayment-progress-fill {
     height: 100%;
-    background: var(--button-bg);
     border-radius: 4px;
+    background: var(--button-bg);
 }

webapp/channels/src/components/drafts/draft_actions/action.scss

@@ -6,8 +6,8 @@
         align-items: center;
         justify-content: center;
         border: none;
-        background: transparent;
         border-radius: 4px;
+        background: transparent;
         color: rgba(var(--center-channel-color-rgb), 0.4);
         fill: rgba(var(--center-channel-color-rgb), 0.4);
 

webapp/channels/src/components/drafts/draft_title/draft_title.scss

@@ -7,9 +7,9 @@
         width: 18px;
         min-width: 18px;
         height: 18px;
+        border-radius: 2px;
         margin: 0 5px;
         background: rgba(var(--center-channel-color-rgb), 0.16);
-        border-radius: 2px;
         font-size: 12px;
         font-weight: 600;
         line-height: 18px;

webapp/channels/src/components/drafts/panel/panel.scss

@@ -3,8 +3,8 @@
 
 .Panel {
     border: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
-    background-color: var(--center-channel-bg);
     border-radius: 4px;
+    background-color: var(--center-channel-bg);
     box-shadow: var(--elevation-1);
     cursor: pointer;
     transition: box-shadow 0.3s ease-in-out;

webapp/channels/src/components/feedback_modal/feedback.scss

@@ -9,8 +9,8 @@
         width: 100%;
         padding: 10px;
         border-color: rgba(var(--sys-denim-center-channel-text-rgb), 0.16);
-        margin-bottom: 15px;
         border-radius: 4px;
+        margin-bottom: 15px;
         color: black;
         font-size: 15px;
         resize: none;

webapp/channels/src/components/file_preview_modal/file_preview_modal_main_actions/file_preview_modal_main_actions.scss

@@ -19,9 +19,9 @@
         align-items: center;
         justify-content: center;
         border: unset;
+        border-radius: 4px;
         margin-left: 8px;
         background: transparent;
-        border-radius: 4px;
 
         &:hover {
             background: rgba(255, 255, 255, 0.16);

webapp/channels/src/components/file_preview_modal/file_preview_modal_main_nav/file_preview_modal_main_nav.scss

@@ -14,9 +14,9 @@
         align-items: center;
         justify-content: center;
         border: unset;
+        border-radius: 4px;
         margin-left: 12px;
         background: transparent;
-        border-radius: 4px;
         font-weight: 600;
 
         &:hover {

webapp/channels/src/components/file_search_results/file_search_result_item.scss

@@ -7,9 +7,9 @@
     align-items: center;
     padding: 11px;
     border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+    border-radius: 4px;
     margin: 0 14px 8px 14px;
     background: transparent;
-    border-radius: 4px;
     color: var(--center-channel-color);
     cursor: pointer;
     transition: box-shadow 0.15s ease;
@@ -90,9 +90,9 @@
         min-width: 32px;
         height: 32px;
         justify-content: center;
+        border-radius: 4px;
         margin-left: 8px;
         background-color: var(--center-channel-bg);
-        border-radius: 4px;
         color: rgba(var(--center-channel-color-rgb), 0.64);
         cursor: pointer;
         fill: rgba(var(--center-channel-color-rgb), 0.64);

webapp/channels/src/components/hint-toast/hint_toast.scss

@@ -1,9 +1,9 @@
 .hint-toast {
     padding: 4px 4px 4px 12px;
     border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+    border-radius: 4px;
     margin: 0;
     background-color: var(--center-channel-bg);
-    border-radius: 4px;
     box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
     color: var(--center-channel-color);
     font-size: 14px;

webapp/channels/src/components/icon_message_with_progress_bar/icon_message_with_progress_bar.scss

@@ -1,16 +1,16 @@
 .IconMessageWithProgressBar-progress {
     width: 387px;
     height: 4px;
+    border-radius: 4px;
     margin: 0 auto;
     margin-top: 60px;
     background: rgba(var(--secondary-blue-rgb), 0.12);
-    border-radius: 4px;
 }
 
 .IconMessageWithProgressBar-progress-fill {
     height: 100%;
-    background: #0058cc;
     border-radius: 4px;
+    background: #0058cc;
 }
 
 .IconMessageWithProgressBar-body {

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

@@ -10,8 +10,8 @@
     min-height: 40px;
     align-items: center;
     padding: 8px;
-    background: var(--center-channel-text);
     border-radius: 4px;
+    background: var(--center-channel-text);
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);
     color: var(--sidebar-text);
     font-weight: 600;
@@ -42,10 +42,10 @@
     align-items: center;
     padding: 6px 10px;
     border: none;
+    border-radius: 4px;
     margin-right: 16px;
     margin-left: 8px;
     background: var(--button-bg);
-    border-radius: 4px;
     color: var(--sidebar-text);
     font-size: 11px;
     font-weight: 600;

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

@@ -6,9 +6,9 @@
         height: 90px;
         padding: 12px;
         border: 1px solid rgba(var(--center-channel-color-rgb), 0.75);
+        border-radius: 4px;
         margin-bottom: 8px;
         background: var(--center-channel-bg);
-        border-radius: 4px;
         resize: vertical;
 
         &:focus {

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

@@ -45,8 +45,8 @@
                 align-items: center;
                 padding: 0 12px;
                 border: 1px solid rgba(var(--denim-button-bg-rgb), 0.08);
-                background: rgba(var(--denim-button-bg-rgb), 0.04);
                 border-radius: 20px;
+                background: rgba(var(--denim-button-bg-rgb), 0.04);
                 color: var(--denim-button-bg);
 
                 .RestrictedIndicator__icon-tooltip-container {

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

@@ -51,9 +51,9 @@
             width: 36px;
             height: 36px;
             padding: 3px;
+            border-radius: 18px;
             margin: 12px 0 12px 12px;
             background: var(--button-bg);
-            border-radius: 18px;
 
             svg {
                 width: 24px;
@@ -68,9 +68,9 @@
             width: 36px;
             height: 36px;
             padding: 3px;
+            border-radius: 18px;
             margin: 12px 0 12px 12px;
             background: var(--dnd-indicator);
-            border-radius: 18px;
 
             svg {
                 width: 28.8px;

webapp/channels/src/components/learn_more_trial_modal/start_trial_btn.scss

@@ -9,8 +9,8 @@
         width: fit-content;
         padding: 13px 20px;
         border: none;
-        background: var(--sys-center-channel-bg);
         border-radius: 4px;
+        background: var(--sys-center-channel-bg);
         box-shadow: inset 0 0 0 1px var(--sys-button-bg);
         color: var(--sys-button-bg);
         font-size: 14px;

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

@@ -80,8 +80,8 @@
                 .login-body-custom-branding-image {
                     max-height: 240px;
                     align-self: self-start;
-                    margin-bottom: 28px;
                     border-radius: 8px;
+                    margin-bottom: 28px;
                 }
             }
 
@@ -94,9 +94,9 @@
             width: 540px;
             box-sizing: border-box;
             border: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
+            border-radius: 8px;
             margin-left: 60px;
             background-color: var(--center-channel-bg);
-            border-radius: 8px;
             box-shadow: var(--elevation-5);
 
             &.with-error {

webapp/channels/src/components/main_menu/learn_about_teams_link.scss

@@ -17,8 +17,8 @@
             >i {
                 display: inline-flex !important;
                 padding: 3px;
-                background-color: hsla(221, 77%, 48%, 0.08);
                 border-radius: 50%;
+                background-color: hsla(221, 77%, 48%, 0.08);
                 font-size: 14px !important;
 
                 &::before {

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

@@ -16,8 +16,8 @@
     height: 24px;
     padding: 0;
     border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
-    background-color: var(--center-channel-bg);
     border-radius: 16px;
+    background-color: var(--center-channel-bg);
     box-shadow: $elevation-1;
     color: rgba(var(--center-channel-color-rgb), 0.64);
     font-size: 18px;
@@ -48,8 +48,8 @@
     width: 100%;
     padding: 0;
     border: none;
-    background: transparent;
     border-radius: 4px;
+    background: transparent;
     color: rgba(var(--center-channel-color-rgb), 0.64);
     font-size: 18px;
     line-height: 18px;

webapp/channels/src/components/new_channel_modal/new_channel_modal.scss

@@ -11,8 +11,8 @@
             box-sizing: border-box;
             padding: 12px 16px;
             border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
-            background: var(--center-channel-bg);
             border-radius: 4px;
+            background: var(--center-channel-bg);
             color: var(--center-channel-color);
             font-size: 14px;
             line-height: 20px;

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

@@ -43,8 +43,8 @@
     height: 120px;
     align-items: center;
     justify-content: center;
-    margin: 22px;
     border-radius: 100%;
+    margin: 22px;
 }
 
 .no-results__title {

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

@@ -51,8 +51,8 @@
         overflow: hidden;
         height: 100%;
         padding: 0;
-        margin: 0;
         border-radius: 8px;
+        margin: 0;
     }
 
     .modal-footer {

webapp/channels/src/components/payment_form/card_input.css

@@ -5,9 +5,9 @@
     padding-top: 8px;
     padding-bottom: 2px !important;
     padding-left: 12px;
+    border-radius: 4px;
     background-color: var(--center-channel-bg);
     background-image: none;
-    border-radius: 4px;
     box-shadow: none;
     color: var(--center-channel-color);
     font-family: 'Open Sans';

webapp/channels/src/components/payment_form/gather_intent/gather_intent.scss

@@ -35,8 +35,8 @@
     .modal-content {
         max-width: 512px;
         max-height: 465px;
-        background: var(--center-channel-bg);
         border-radius: 12px;
+        background: var(--center-channel-bg);
     }
 
     .modal-dialog {
@@ -162,8 +162,8 @@
         &__textarea {
             width: 100%;
             border: solid 1px rgba(63, 67, 80, 0.16);
-            background: rgb(var(--center-channel-bg-rgb));
             border-radius: 4px;
+            background: rgb(var(--center-channel-bg-rgb));
             resize: none;
         }
     }

webapp/channels/src/components/payment_form/payment_form.scss

@@ -119,9 +119,9 @@
         box-sizing: border-box;
         padding: 24px;
         border: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
+        border-radius: 4px;
         margin-bottom: 16px;
         background: #fff;
-        border-radius: 4px;
     }
 
     .PaymentForm-saved-title {

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

@@ -69,8 +69,8 @@
                 &:focus,
                 &:focus-within {
                     border: none;
-                    background: transparent;
                     border-radius: none;
+                    background: transparent;
                     color: var(--center-channel-color);
                 }
             }
@@ -176,8 +176,8 @@
             flex: 0 0 48px;
             align-items: center;
             justify-content: center;
-            background-color: $white;
             border-radius: 50%;
+            background-color: $white;
 
             svg,
             img {

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

@@ -11,9 +11,9 @@
     min-width: 0;
     align-items: center;
     border: 0;
+    border-radius: 4px;
     margin: 4px 0;
     background: rgba(var(--online-indicator-rgb), 0.08);
-    border-radius: 4px;
     color: var(--online-indicator);
     font-weight: 600;
     transition: all 0.15s ease-out;

webapp/channels/src/components/post_view/acknowledgements/post_acknowledgements_users_popover.tsx

@@ -57,7 +57,7 @@ const Popover = styled.div`
     border-radius: 4px;
     border: solid 1px rgba(var(--center-channel-color-rgb), 0.16);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-    color: lighten($black, 25%);
+    color: color.adjust($black, $lightness: 25%);
     font-family: inherit;
     max-height: 400px;
     overflow-y: scroll;

webapp/channels/src/components/post_view/channel_intro_message/add_members_button.scss

@@ -22,8 +22,8 @@
         width: fit-content;
         padding: 8px 16px;
         border: none;
-        background-color: var(--button-bg);
         border-radius: 4px;
+        background-color: var(--button-bg);
         color: var(--button-color);
         font-size: 12px;
         font-weight: 600;

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

@@ -16,9 +16,9 @@
     max-width: 700px;
     padding: 16px;
     border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+    border-radius: 4px;
     margin: 5px 0;
     background-color: var(--center-channel-bg);
-    border-radius: 4px;
     box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
 
     /**
@@ -55,8 +55,8 @@
         left: -28px;
         display: none;
         padding: 5px;
-        background-color: rgba(var(--center-channel-color-rgb), 0);
         border-radius: 4px;
+        background-color: rgba(var(--center-channel-color-rgb), 0);
         color: rgba(var(--center-channel-color-rgb), 0.75);
 
         &:hover:not(:active) {
@@ -159,8 +159,8 @@
             width: 24px;
             height: 24px;
             border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
-            background-color: var(--center-channel-bg);
             border-radius: 50%;
+            background-color: var(--center-channel-bg);
             color: rgba(var(--center-channel-color-rgb), 0.75);
             font-size: 12px;
             place-content: center;
@@ -178,8 +178,8 @@
                 display: flex;
                 width: auto;
                 border: none;
-                background-color: transparent;
                 border-radius: 0;
+                background-color: transparent;
             }
         }
 

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

@@ -18,9 +18,9 @@
     align-items: center;
     padding: 0 5px;
     border: 1px solid transparent;
+    border-radius: 4px;
     margin: 0 4px 4px 0;
     background: rgba(var(--center-channel-color-rgb), 0.08);
-    border-radius: 4px;
     color: rgba(var(--center-channel-color-rgb), 0.75);
     cursor: pointer;
     fill: rgba(var(--center-channel-color-rgb), 0.75);

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

@@ -7,12 +7,12 @@
         height: 48px;
         flex-grow: 1;
         padding: 12px 14px;
+        border-radius: 4px 0 0 4px;
         border-top: 1px solid rgba(var(--center-channel-color-rgb), 0.2);
         border-right: 0;
         border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.2);
         border-left: 1px solid rgba(var(--center-channel-color-rgb), 0.2);
         background: var(--center-channel-color-rgb);
-        border-radius: 4px 0 0 4px;
         color: rgba(var(--center-channel-color-rgb), 0.75);
         font-size: 16px;
     }
@@ -41,8 +41,8 @@
         width: 180px;
         height: 48px;
         border: 1px solid var(--button-bg);
-        background: var(--center-channel-bg);
         border-radius: 0 4px 4px 0;
+        background: var(--center-channel-bg);
         color: var(--button-bg);
 
         &:hover {

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

@@ -36,8 +36,8 @@
         width: 404px;
         align-items: center;
         padding: 10px;
-        background-color: var(--dnd-indicator);
         border-radius: 4px;
+        background-color: var(--dnd-indicator);
         box-shadow: $elevation-3;
         color: var(--center-channel-bg);
         font-size: 14px;

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

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 @import 'utils/variables';
 @import 'utils/mixins';
 
@@ -21,14 +23,14 @@
         display: inline-block;
         width: 6px;
         height: 6px;
+        border-radius: 6px;
         margin: 5px 0;
         background: $primary-color;
-        border-radius: 6px;
         opacity: 0.2;
 
         &.active {
             opacity: 1;
-            outline: 3px solid lighten($primary-color, 50%);
+            outline: 3px solid color.adjust($primary-color, $lightness: 50%);
         }
     }
 

webapp/channels/src/components/pricing_modal/pricing_modal.scss

@@ -146,9 +146,9 @@
 
             .self-hosted-interest {
                 padding: 8px;
+                border-radius: 8px;
                 margin-top: 24px;
                 background: rgba(var(--denim-button-bg-rgb), 0.08);
-                border-radius: 8px;
                 font-family: 'Open Sans';
                 font-size: 14px;
                 font-style: normal;
@@ -181,9 +181,9 @@
                 align-items: center;
                 justify-content: center;
                 padding: 14px;
+                border-radius: 13px 13px 0 0;
                 margin-right: auto;
                 margin-left: auto;
-                border-radius: 13px 13px 0 0;
                 font-size: 12px;
                 font-style: normal;
                 font-weight: 600;
@@ -202,9 +202,9 @@
             .bottom {
                 height: auto;
                 border: 1px solid rgba(var(--center-channel-text-rgb), 0.08);
+                border-radius: 0 0 4px 4px;
                 border-top: 1px solid var(--center-channel-bg);
                 background-color: var(--center-channel-bg);
-                border-radius: 0 0 4px 4px;
                 box-shadow: var(--elevation-6);
 
                 .bottom_container {
@@ -304,8 +304,8 @@
                             height: 40px;
                             padding: 10px 24px;
                             border: none;
-                            background: none;
                             border-radius: 4px;
+                            background: none;
                             color: var(--denim-button-bg);
                             font-weight: 600;
 
@@ -391,8 +391,8 @@
                     position: relative;
                     height: auto;
                     padding: 37px 24px 24px 24px;
-                    background-color: rgba(var(--center-channel-text-rgb), 0.75);
                     border-radius: 0 0 4px 4px;
+                    background-color: rgba(var(--center-channel-text-rgb), 0.75);
                     color: var(--sidebar-text);
 
                     .illustration {

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

@@ -28,8 +28,8 @@
         display: block;
         max-height: 347px;
         border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
-        margin: 32px auto 0;
         border-radius: 4px;
+        margin: 32px auto 0;
     }
 
     .productNotices__imageDiv {
@@ -111,8 +111,8 @@
         &.actionButton {
             display: inline-flex;
             align-items: center;
-            background: var(--center-channel-bg);
             border-radius: 4px;
+            background: var(--center-channel-bg);
             color: var(--button-bg);
             text-decoration: none;
 

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

@@ -115,8 +115,8 @@
                 color: rgba(var(--center-channel-color-rgb), 0.64);
 
                 &:hover {
-                    background: rgba(var(--center-channel-color-rgb), 0.08);
                     border-radius: 4px;
+                    background: rgba(var(--center-channel-color-rgb), 0.08);
                     color: rgba(var(--center-channel-color-rgb), 0.8);
                 }
             }

webapp/channels/src/components/purchase_modal/icon_message.scss

@@ -59,30 +59,30 @@
         .IconMessage-progress {
             width: 387px;
             height: 4px;
+            border-radius: 4px;
             margin: 0 auto;
             margin-top: 90px;
             background: rgba(34, 64, 109, 0.12);
-            border-radius: 4px;
         }
 
         .IconMessage-progress-fill {
             height: 100%;
-            background: #0058cc;
             border-radius: 4px;
+            background: #0058cc;
         }
 
         .IconMessage-button {
             button {
-                background: var(--button-bg);
                 border-radius: 4px;
+                background: var(--button-bg);
                 color: var(--button-color);
             }
         }
 
         .IconMessage-tertiary-button {
             button {
-                background: rgba(var(--denim-button-bg-rgb), 0.08);
                 border-radius: 4px;
+                background: rgba(var(--denim-button-bg-rgb), 0.08);
                 color: var(--button-bg);
             }
         }

webapp/channels/src/components/purchase_modal/process_payment.css

@@ -1,16 +1,16 @@
 .ProcessPayment-progress {
     width: 387px;
     height: 4px;
+    border-radius: 4px;
     margin: 0 auto;
     margin-top: 60px;
     background: rgb(34, 64, 109, 0.12);
-    border-radius: 4px;
 }
 
 .ProcessPayment-progress-fill {
     height: 100%;
-    background: #0058cc;
     border-radius: 4px;
+    background: #0058cc;
 }
 
 .ProcessPayment-body {

webapp/channels/src/components/purchase_modal/purchase.scss

@@ -90,9 +90,9 @@
                     box-sizing: border-box;
                     padding: 32px;
                     border: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
+                    border-radius: 4px;
                     margin: 24px 0;
                     background-color: #fff;
-                    border-radius: 4px;
                     box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
 
                     .CardImage {
@@ -219,8 +219,8 @@
                     padding-bottom: 24px;
                     padding-left: 24px;
                     border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
-                    background-color: var(--center-channel-bg);
                     border-radius: 0 0 4px 4px;
+                    background-color: var(--center-channel-bg);
 
                     .enable_annual_sub {
                         margin-top: 12px;
@@ -231,8 +231,8 @@
                         height: 40px;
                         padding: 10px 24px;
                         border: none;
-                        background: none;
                         border-radius: 4px;
+                        background: none;
                         color: var(--denim-button-bg);
                         font-size: 14px;
                         font-weight: 700;
@@ -273,8 +273,8 @@
                         text-align: center;
 
                         .summary-section {
-                            background-color: rgba(var(--denim-button-bg-rgb), 0.08);
                             border-radius: 4px;
+                            background-color: rgba(var(--denim-button-bg-rgb), 0.08);
                             font-family: 'Metropolis';
 
                             .summary-title {
@@ -513,8 +513,8 @@
             width: fit-content;
             height: 40px;
             border: 0;
-            background: var(--button-bg);
             border-radius: 4px;
+            background: var(--button-bg);
             color: var(--button-color);
             font-size: 14px;
             font-weight: 600;

webapp/channels/src/components/purchase_modal/renewal_card.scss

@@ -10,8 +10,8 @@
             max-width: 353px;
             padding: 28px 32px;
             border: 1px solid var(--light-8-center-channel-text, rgba(61, 60, 64, 0.08));
-            background: var(--light-center-channel-bg, #fff);
             border-radius: 4px;
+            background: var(--light-center-channel-bg, #fff);
             box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.08);
 
             .SeatsCalculator {
@@ -26,9 +26,9 @@
                 width: 332px;
                 padding: 28px 32px;
                 border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08);
+                border-radius: 4px;
                 margin-left: 20px;
                 background-color: var(--sys-center-channel-bg);
-                border-radius: 4px;
                 box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
             }
 
@@ -195,8 +195,8 @@
                 align-items: center;
                 justify-content: center;
                 padding: 11px 20px;
-                background: var(--sys-button-bg);
                 border-radius: 4px;
+                background: var(--sys-button-bg);
                 color: var(--sys-button-color);
 
                 &:hover:not(:disabled) {

webapp/channels/src/components/scroll_to_bottom_toast/scroll_to_bottom_toast.scss

@@ -4,10 +4,10 @@
     justify-content: space-between;
     padding: 4px;
     padding-left: 12px;
+    border-radius: 4px;
 
     // background-color: var(--center-channel-color--88);
     background: linear-gradient(0deg, rgba(63, 67, 80, 0.9) 0%, rgba(63, 67, 80, 0.9) 100%), #fff;
-    border-radius: 4px;
     box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.12);
     color: var(--sidebar-text);
     cursor: pointer;