From b6401d904210a7e12cb054d3f94d51810d69efb7 Mon Sep 17 00:00:00 2001
From: Matthew Birtch <mattbirtch@gmail.com>
Date: Tue, 27 May 2025 07:55:37 -0400
Subject: [PATCH] MM-63950 replace --denim- variables (#30925)

---
 webapp/channels/.stylelintrc.json             | 13 +++++++++++
 ...sable_guest_accounts_setting.test.tsx.snap |  8 +++----
 .../billing/billing_subscriptions/limits.scss |  4 ++--
 .../billing/plan_details/plan_details.scss    |  4 ++--
 .../admin_console/boolean_setting.tsx         |  4 ++--
 .../ip_filtering/delete_confirmation.scss     |  2 +-
 .../ip_filtering/save_confirmation_modal.scss |  2 +-
 .../secure_connection_detail.tsx              |  4 ++--
 .../admin_console/server_logs/log_list.scss   |  4 ++--
 .../components/alert_banner/alert_banner.scss |  4 ++--
 .../channel_info_rhs/top_buttons.tsx          |  2 +-
 .../common/circular_chart/circular_chart.scss |  2 +-
 .../shield_with_checkmark.tsx                 |  4 ++--
 .../plan_upgrade_button/index.tsx             | 22 +++----------------
 .../plan_upgrade_button.test.tsx              | 16 +++++++-------
 .../invitation_modal/invite_as.scss           |  6 ++---
 .../notify_admin_cta/notify_admin_cta.tsx     |  2 +-
 .../onboarding_tasklist_animations.tsx        |  2 +-
 .../onboarding_tasklist_task.tsx              |  2 +-
 .../plugin_marketplace/marketplace_modal.scss |  4 ++--
 .../web_marketplace_banner.tsx                |  2 +-
 .../pricing_modal/contact_sales_cta.tsx       |  2 +-
 .../src/components/pricing_modal/content.scss |  2 +-
 .../src/components/pricing_modal/content.tsx  |  6 ++---
 .../pricing_modal/pricing_modal.scss          | 20 ++++++++---------
 .../pricing_modal/self_hosted_content.tsx     |  8 +++----
 .../purchase_modal/icon_message.scss          |  2 +-
 .../search_results/search_limits_banner.tsx   |  2 +-
 .../components/select_team/select_team.scss   |  2 +-
 .../should_verify_email.scss                  |  2 +-
 .../src/components/tabs/tabs/style.scss       |  4 ++--
 .../user_groups_modal/user_groups_modal.scss  | 10 ++++-----
 .../widgets/menu/menu_items/menu_item.scss    |  6 ++---
 .../menu/menu_items/restricted_indicator.scss |  2 +-
 .../modals/components/base_setting_item.scss  |  8 +++----
 .../modals/components/modal_sidebar.scss      |  6 ++---
 .../modals/components/save_changes_panel.scss |  8 +++----
 .../src/sass/base/_css_variables.scss         |  3 ---
 webapp/channels/src/sass/utils/_mixins.scss   |  8 +++----
 39 files changed, 104 insertions(+), 110 deletions(-)

diff --git a/webapp/channels/.stylelintrc.json b/webapp/channels/.stylelintrc.json
index 76cb030267..d7525eeab5 100644
--- a/webapp/channels/.stylelintrc.json
+++ b/webapp/channels/.stylelintrc.json
@@ -23,6 +23,19 @@
                 "ignore": ["comments"]
             }
         ],
+        "declaration-property-value-disallowed-list": [
+            {
+                "color": ["/--denim-button-bg/"],
+                "background-color": ["/--denim-button-bg/"],
+                "border-color": ["/--denim-button-bg/"],
+                "background": ["/--denim-button-bg/"],
+                "border": ["/--denim-button-bg/"],
+                "fill": ["/--denim-button-bg/"]
+            },
+            {
+                "message": "The --denim-button-bg and --denim-button-bg-rgb variables are deprecated. Please use --button-bg or --button-bg-rgb instead."
+            }
+        ],
         "scss/load-no-partial-leading-underscore": null,
         "scss/at-extend-no-missing-placeholder": null
     }
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/custom_enable_disable_guest_accounts_setting.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/custom_enable_disable_guest_accounts_setting.test.tsx.snap
index 246042aa37..3e7031ef75 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/custom_enable_disable_guest_accounts_setting.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/custom_enable_disable_guest_accounts_setting.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting renders
       class="col-sm-8"
     >
       <label
-        class="Label-eIDBis glIJuw"
+        class="Label-eIDBis ggzVFA"
       >
         <input
           data-testid="MySettingtrue"
@@ -28,7 +28,7 @@ exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting renders
         True
       </label>
       <label
-        class="Label-eIDBis glIJuw"
+        class="Label-eIDBis ggzVFA"
       >
         <input
           checked=""
@@ -73,7 +73,7 @@ exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting renders
       class="col-sm-8"
     >
       <label
-        class="Label-eIDBis glIJuw"
+        class="Label-eIDBis ggzVFA"
       >
         <input
           checked=""
@@ -86,7 +86,7 @@ exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting renders
         True
       </label>
       <label
-        class="Label-eIDBis glIJuw"
+        class="Label-eIDBis ggzVFA"
       >
         <input
           data-testid="MySettingfalse"
diff --git a/webapp/channels/src/components/admin_console/billing/billing_subscriptions/limits.scss b/webapp/channels/src/components/admin_console/billing/billing_subscriptions/limits.scss
index 41a14337ce..a0c80d6ca7 100644
--- a/webapp/channels/src/components/admin_console/billing/billing_subscriptions/limits.scss
+++ b/webapp/channels/src/components/admin_console/billing/billing_subscriptions/limits.scss
@@ -54,8 +54,8 @@
         }
 
         &.btn-secondary {
-            background: rgba(var(--denim-button-bg-rgb), 0.08);
-            color: var(--denim-button-bg);
+            background: rgba(var(--button-bg-rgb), 0.08);
+            color: var(--button-bg);
         }
     }
 
diff --git a/webapp/channels/src/components/admin_console/billing/plan_details/plan_details.scss b/webapp/channels/src/components/admin_console/billing/plan_details/plan_details.scss
index 2a3c994277..17873114b0 100644
--- a/webapp/channels/src/components/admin_console/billing/plan_details/plan_details.scss
+++ b/webapp/channels/src/components/admin_console/billing/plan_details/plan_details.scss
@@ -51,8 +51,8 @@
         }
 
         &.btn-secondary {
-            background: rgba(var(--denim-button-bg-rgb), 0.08);
-            color: var(--denim-button-bg);
+            background: rgba(var(--button-bg-rgb), 0.08);
+            color: var(--button-bg);
         }
     }
 }
diff --git a/webapp/channels/src/components/admin_console/boolean_setting.tsx b/webapp/channels/src/components/admin_console/boolean_setting.tsx
index 78654cd152..62aded9cf1 100644
--- a/webapp/channels/src/components/admin_console/boolean_setting.tsx
+++ b/webapp/channels/src/components/admin_console/boolean_setting.tsx
@@ -47,7 +47,7 @@ const Label = styled.label<{isDisabled: boolean}>`
         place-content: center;
 
         &:checked {
-            border-color: var(--denim-button-bg);
+            border-color: var(--button-bg);
         }
 
         &:checked::before {
@@ -58,7 +58,7 @@ const Label = styled.label<{isDisabled: boolean}>`
             width: 8px;
             height: 8px;
             border-radius: 50%;
-            background: var(--denim-button-bg);
+            background: var(--button-bg);
             content: "";
             transform: scale(0);
             transform-origin: center center;
diff --git a/webapp/channels/src/components/admin_console/ip_filtering/delete_confirmation.scss b/webapp/channels/src/components/admin_console/ip_filtering/delete_confirmation.scss
index e47bde49b6..3d3dc27b3e 100644
--- a/webapp/channels/src/components/admin_console/ip_filtering/delete_confirmation.scss
+++ b/webapp/channels/src/components/admin_console/ip_filtering/delete_confirmation.scss
@@ -102,7 +102,7 @@
             border: none;
             border-radius: 4px;
             margin-left: 8px;
-            background: var(--denim-status-do-not-disturb, #d24b4e);
+            background: var(--do-not-disturb-indicator, #d24b4e);
             color: var(--button-color, #fff);
         }
     }
diff --git a/webapp/channels/src/components/admin_console/ip_filtering/save_confirmation_modal.scss b/webapp/channels/src/components/admin_console/ip_filtering/save_confirmation_modal.scss
index 8eee2494a7..dab0958519 100644
--- a/webapp/channels/src/components/admin_console/ip_filtering/save_confirmation_modal.scss
+++ b/webapp/channels/src/components/admin_console/ip_filtering/save_confirmation_modal.scss
@@ -158,7 +158,7 @@
             border: none;
             border-radius: 4px;
             margin-left: 8px;
-            background: var(--denim-status-do-not-disturb, #d24b4e);
+            background: var(--do-not-disturb-indicator, #d24b4e);
             color: var(--button-color, #fff);
         }
     }
diff --git a/webapp/channels/src/components/admin_console/secure_connections/secure_connection_detail.tsx b/webapp/channels/src/components/admin_console/secure_connections/secure_connection_detail.tsx
index 940b05bd10..cf9fa8987b 100644
--- a/webapp/channels/src/components/admin_console/secure_connections/secure_connection_detail.tsx
+++ b/webapp/channels/src/components/admin_console/secure_connections/secure_connection_detail.tsx
@@ -393,10 +393,10 @@ const TabsWrapper = styled.div`
             }
 
             &.active {
-                border-bottom: 2px solid var(--denim-button-bg);
+                border-bottom: 2px solid var(--button-bg);
 
                 a {
-                    color: var(--denim-button-bg);
+                    color: var(--button-bg);
                 }
             }
 
diff --git a/webapp/channels/src/components/admin_console/server_logs/log_list.scss b/webapp/channels/src/components/admin_console/server_logs/log_list.scss
index 4723a03f23..feb1fca8ea 100644
--- a/webapp/channels/src/components/admin_console/server_logs/log_list.scss
+++ b/webapp/channels/src/components/admin_console/server_logs/log_list.scss
@@ -17,10 +17,10 @@
     }
 
     .btn-inverted {
-        border: 2px solid var(--denim-button-bg);
+        border: 2px solid var(--button-bg);
         border-radius: 4px;
         background: transparent;
-        color: var(--denim-button-bg);
+        color: var(--button-bg);
         font-weight: bold;
         line-height: 12px;
     }
diff --git a/webapp/channels/src/components/alert_banner/alert_banner.scss b/webapp/channels/src/components/alert_banner/alert_banner.scss
index 3c6325d364..b840d6768a 100644
--- a/webapp/channels/src/components/alert_banner/alert_banner.scss
+++ b/webapp/channels/src/components/alert_banner/alert_banner.scss
@@ -61,7 +61,7 @@
         padding: 10px 16px;
         border: none;
         border-radius: 4px;
-        background: var(--denim-button-bg);
+        background: var(--button-bg);
         color: white;
         font-size: 12px;
         font-weight: 600;
@@ -126,7 +126,7 @@
         background: rgba(var(--online-indicator-rgb), 0.08);
 
         .AlertBanner__icon {
-            color: var(--denim-status-online);
+            color: var(--online-indicator);
         }
     }
 
diff --git a/webapp/channels/src/components/channel_info_rhs/top_buttons.tsx b/webapp/channels/src/components/channel_info_rhs/top_buttons.tsx
index d555b26fcf..eca18695e1 100644
--- a/webapp/channels/src/components/channel_info_rhs/top_buttons.tsx
+++ b/webapp/channels/src/components/channel_info_rhs/top_buttons.tsx
@@ -67,7 +67,7 @@ const CopyButton = styled(Button)`
     }
 
     &.success {
-        background: var(--denim-status-online);
+        background: var(--online-indicator);
         color: var(--button-color);
 
         & i {
diff --git a/webapp/channels/src/components/common/circular_chart/circular_chart.scss b/webapp/channels/src/components/common/circular_chart/circular_chart.scss
index e705e5ce39..cb196218e6 100644
--- a/webapp/channels/src/components/common/circular_chart/circular_chart.scss
+++ b/webapp/channels/src/components/common/circular_chart/circular_chart.scss
@@ -8,7 +8,7 @@
         }
 
         &.success .circle {
-            stroke: var(--denim-status-online);
+            stroke: var(--online-indicator);
         }
 
         &.info .circle {
diff --git a/webapp/channels/src/components/common/svg_images_components/shield_with_checkmark.tsx b/webapp/channels/src/components/common/svg_images_components/shield_with_checkmark.tsx
index 2ee08d5152..f6974b335d 100644
--- a/webapp/channels/src/components/common/svg_images_components/shield_with_checkmark.tsx
+++ b/webapp/channels/src/components/common/svg_images_components/shield_with_checkmark.tsx
@@ -179,13 +179,13 @@ const Svg = (props: SvgProps) => (
                 fillRule='evenodd'
                 clipRule='evenodd'
                 d='M85.5012 85.3311H117.176C118.642 85.3311 119.826 86.51 119.826 87.9712V99.6265C119.826 109.578 115.362 117.647 105.388 117.647H97.2901C87.3156 117.647 82.8516 109.578 82.8516 99.6265V87.9712C82.8516 86.5149 84.0402 85.3311 85.5012 85.3311ZM100.757 92.1353H99.3511V95.4386V101.25L101.216 103.115L99.3511 104.98V107.443H104.454V97.2944L103.028 95.8686L104.454 94.4429V92.1353H100.757Z'
-                fill='var(--denim-button-bg)'
+                fill='var(--button-bg)'
             />
             <path
                 fillRule='evenodd'
                 clipRule='evenodd'
                 d='M110.061 80.4107V85.3905C110.061 85.4206 110.062 85.4503 110.064 85.4795H114.524C114.527 85.4503 114.528 85.4206 114.528 85.3905V80.4107C114.528 72.9522 109.644 66.8818 102.461 66.8818H99.4189C92.2356 66.8818 87.3516 72.9522 87.3516 80.4107V85.3905C87.3516 85.4206 87.3527 85.4503 87.3549 85.4795H91.8069C91.8091 85.4503 91.8102 85.4206 91.8102 85.3905V80.4107C91.8102 75.3359 94.9858 71.471 98.7523 71.471H103.118C107.136 71.471 110.061 75.3359 110.061 80.4107Z'
-                fill='var(--denim-button-bg)'
+                fill='var(--button-bg)'
             />
             <path
                 d='M111 23.25C111 23.25 124.759 37.6944 153 42.75'
diff --git a/webapp/channels/src/components/global_header/right_controls/plan_upgrade_button/index.tsx b/webapp/channels/src/components/global_header/right_controls/plan_upgrade_button/index.tsx
index 71b9db3cba..79bfc79930 100644
--- a/webapp/channels/src/components/global_header/right_controls/plan_upgrade_button/index.tsx
+++ b/webapp/channels/src/components/global_header/right_controls/plan_upgrade_button/index.tsx
@@ -4,7 +4,6 @@
 import React, {useEffect} from 'react';
 import {useIntl} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';
-import styled from 'styled-components';
 
 import {getCloudProducts, getCloudSubscription} from 'mattermost-redux/actions/cloud';
 import {getCloudSubscription as selectCloudSubscription, getSubscriptionProduct as selectSubscriptionProduct, isCurrentLicenseCloud} from 'mattermost-redux/selectors/entities/cloud';
@@ -17,22 +16,6 @@ import WithTooltip from 'components/with_tooltip';
 
 import {CloudProducts} from 'utils/constants';
 
-const UpgradeButton = styled.button`
-background: var(--denim-button-bg);
-border-radius: 4px;
-border: none;
-box-shadow: none;
-height: 24px;
-width: auto;
-font-family: 'Open Sans';
-font-style: normal;
-font-weight: 600;
-font-size: 11px !important;
-line-height: 10px;
-letter-spacing: 0.02em;
-color: var(--button-color);
-`;
-
 let openPricingModal: (telemetryProps?: TelemetryProps) => void;
 
 const PlanUpgradeButton = (): JSX.Element | null => {
@@ -86,13 +69,14 @@ const PlanUpgradeButton = (): JSX.Element | null => {
         <WithTooltip
             title={formatMessage({id: 'pricing_modal.btn.tooltip', defaultMessage: 'Only visible to system admins'})}
         >
-            <UpgradeButton
+            <button
                 id='UpgradeButton'
                 aria-haspopup='dialog'
                 onClick={() => openPricingModal({trackingLocation: 'global_header_plan_upgrade_button'})}
+                className='btn btn-primary btn-xs'
             >
                 {formatMessage({id: 'pricing_modal.btn.viewPlans', defaultMessage: 'View plans'})}
-            </UpgradeButton>
+            </button>
         </WithTooltip>);
 };
 
diff --git a/webapp/channels/src/components/global_header/right_controls/plan_upgrade_button/plan_upgrade_button.test.tsx b/webapp/channels/src/components/global_header/right_controls/plan_upgrade_button/plan_upgrade_button.test.tsx
index 36c45618f7..c41040ed8c 100644
--- a/webapp/channels/src/components/global_header/right_controls/plan_upgrade_button/plan_upgrade_button.test.tsx
+++ b/webapp/channels/src/components/global_header/right_controls/plan_upgrade_button/plan_upgrade_button.test.tsx
@@ -70,7 +70,7 @@ describe('components/global/PlanUpgradeButton', () => {
 
         expect(cloudSubscriptionSpy).toHaveBeenCalledTimes(1);
         expect(cloudProductsSpy).toHaveBeenCalledTimes(1);
-        expect(wrapper.find('UpgradeButton').exists()).toEqual(true);
+        expect(wrapper.find('#UpgradeButton').exists()).toEqual(true);
     });
 
     it('should show Upgrade button in global header for admin users, cloud and enterprise trial subscription', () => {
@@ -100,7 +100,7 @@ describe('components/global/PlanUpgradeButton', () => {
             </reactRedux.Provider>,
         );
 
-        expect(wrapper.find('UpgradeButton').exists()).toEqual(true);
+        expect(wrapper.find('#UpgradeButton').exists()).toEqual(true);
     });
 
     it('should not show for cloud enterprise non-trial', () => {
@@ -130,7 +130,7 @@ describe('components/global/PlanUpgradeButton', () => {
             </reactRedux.Provider>,
         );
 
-        expect(wrapper.find('UpgradeButton').exists()).toEqual(false);
+        expect(wrapper.find('#UpgradeButton').exists()).toEqual(false);
     });
 
     it('should not show for cloud professional product', () => {
@@ -160,7 +160,7 @@ describe('components/global/PlanUpgradeButton', () => {
             </reactRedux.Provider>,
         );
 
-        expect(wrapper.find('UpgradeButton').exists()).toEqual(false);
+        expect(wrapper.find('#UpgradeButton').exists()).toEqual(false);
     });
 
     it('should not show Upgrade button in global header for non admin cloud users', () => {
@@ -183,7 +183,7 @@ describe('components/global/PlanUpgradeButton', () => {
             </reactRedux.Provider>,
         );
 
-        expect(wrapper.find('UpgradeButton').exists()).toEqual(false);
+        expect(wrapper.find('#UpgradeButton').exists()).toEqual(false);
     });
 
     it('should not show Upgrade button in global header for non admin self hosted users', () => {
@@ -210,7 +210,7 @@ describe('components/global/PlanUpgradeButton', () => {
             </reactRedux.Provider>,
         );
 
-        expect(wrapper.find('UpgradeButton').exists()).toEqual(false);
+        expect(wrapper.find('#UpgradeButton').exists()).toEqual(false);
     });
 
     it('should not show Upgrade button in global header for non enterprise edition self hosted users', () => {
@@ -242,7 +242,7 @@ describe('components/global/PlanUpgradeButton', () => {
             </reactRedux.Provider>,
         );
 
-        expect(wrapper.find('UpgradeButton').exists()).toEqual(false);
+        expect(wrapper.find('#UpgradeButton').exists()).toEqual(false);
     });
 
     it('should NOT show Upgrade button in global header for self hosted non trial and licensed', () => {
@@ -269,6 +269,6 @@ describe('components/global/PlanUpgradeButton', () => {
 
         expect(cloudSubscriptionSpy).toHaveBeenCalledTimes(0); // no calls to cloud endpoints for non cloud
         expect(cloudProductsSpy).toHaveBeenCalledTimes(0);
-        expect(wrapper.find('UpgradeButton').exists()).toEqual(false);
+        expect(wrapper.find('#UpgradeButton').exists()).toEqual(false);
     });
 });
diff --git a/webapp/channels/src/components/invitation_modal/invite_as.scss b/webapp/channels/src/components/invitation_modal/invite_as.scss
index ed2335a9bb..d047940488 100644
--- a/webapp/channels/src/components/invitation_modal/invite_as.scss
+++ b/webapp/channels/src/components/invitation_modal/invite_as.scss
@@ -44,10 +44,10 @@
                 height: 24px;
                 align-items: center;
                 padding: 0 12px;
-                border: 1px solid rgba(var(--denim-button-bg-rgb), 0.08);
+                border: 1px solid rgba(var(--button-bg-rgb), 0.08);
                 border-radius: 20px;
-                background: rgba(var(--denim-button-bg-rgb), 0.04);
-                color: var(--denim-button-bg);
+                background: rgba(var(--button-bg-rgb), 0.04);
+                color: var(--button-bg);
 
                 .RestrictedIndicator__icon-tooltip-container {
                     padding: 0;
diff --git a/webapp/channels/src/components/notify_admin_cta/notify_admin_cta.tsx b/webapp/channels/src/components/notify_admin_cta/notify_admin_cta.tsx
index 82cb8f353e..fcd5c1440e 100644
--- a/webapp/channels/src/components/notify_admin_cta/notify_admin_cta.tsx
+++ b/webapp/channels/src/components/notify_admin_cta/notify_admin_cta.tsx
@@ -21,7 +21,7 @@ const Span = styled.span`
 const Button = styled.button<{notified: boolean}>`
     border: none;
     background: none;
-    color: ${(props: any) => (props.notified ? 'var(--denim-status-online)' : 'var(--denim-button-bg)')};
+    color: ${(props: any) => (props.notified ? 'var(--online-indicator)' : 'var(--button-bg)')};
     text-decoration: none;
     display: inline;
 `;
diff --git a/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist_animations.tsx b/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist_animations.tsx
index f36c92d06d..e96ec70341 100644
--- a/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist_animations.tsx
+++ b/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist_animations.tsx
@@ -20,7 +20,7 @@ const Animation = styled.div`
 
     &:before {
         content: '';
-        background-color: var(--denim-status-online);
+        background-color: var(--online-indicator);
         opacity: 0;
         border-radius: 50%;
         width: 1rem;
diff --git a/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist_task.tsx b/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist_task.tsx
index 75d22f303e..9914f5b03c 100644
--- a/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist_task.tsx
+++ b/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist_task.tsx
@@ -37,7 +37,7 @@ const StyledTask = styled.div`
     }
 
     &.completed {
-        color: var(--denim-status-online);
+        color: var(--online-indicator);
 
         span {
             span {
diff --git a/webapp/channels/src/components/plugin_marketplace/marketplace_modal.scss b/webapp/channels/src/components/plugin_marketplace/marketplace_modal.scss
index a5e370cc08..87ce423853 100644
--- a/webapp/channels/src/components/plugin_marketplace/marketplace_modal.scss
+++ b/webapp/channels/src/components/plugin_marketplace/marketplace_modal.scss
@@ -76,10 +76,10 @@
             }
 
             &.active {
-                border-bottom: 2px solid var(--denim-button-bg);
+                border-bottom: 2px solid var(--button-bg);
 
                 a {
-                    color: var(--denim-button-bg);
+                    color: var(--button-bg);
                 }
             }
 
diff --git a/webapp/channels/src/components/plugin_marketplace/web_marketplace_banner.tsx b/webapp/channels/src/components/plugin_marketplace/web_marketplace_banner.tsx
index 38dd857563..39db587dba 100644
--- a/webapp/channels/src/components/plugin_marketplace/web_marketplace_banner.tsx
+++ b/webapp/channels/src/components/plugin_marketplace/web_marketplace_banner.tsx
@@ -46,7 +46,7 @@ const ExternalBannerLink = styled(ExternalLink)`
     &&,
     &&:hover,
     &&:focus {
-        color: var(--denim-center-channel-bg, #FFF);
+        color: var(--center-channel-bg, #FFF);
         text-decoration: none;
     }
     && {
diff --git a/webapp/channels/src/components/pricing_modal/contact_sales_cta.tsx b/webapp/channels/src/components/pricing_modal/contact_sales_cta.tsx
index 54fbb93291..c754f262d5 100644
--- a/webapp/channels/src/components/pricing_modal/contact_sales_cta.tsx
+++ b/webapp/channels/src/components/pricing_modal/contact_sales_cta.tsx
@@ -15,7 +15,7 @@ import useOpenSalesLink from 'components/common/hooks/useOpenSalesLink';
 import {TELEMETRY_CATEGORIES} from 'utils/constants';
 
 const StyledA = styled.a`
-color: var(--denim-button-bg);
+color: var(--button-bg);
 font-family: 'Open Sans';
 font-size: 12px;
 font-style: normal;
diff --git a/webapp/channels/src/components/pricing_modal/content.scss b/webapp/channels/src/components/pricing_modal/content.scss
index 6556742620..0cef4dd886 100644
--- a/webapp/channels/src/components/pricing_modal/content.scss
+++ b/webapp/channels/src/components/pricing_modal/content.scss
@@ -24,7 +24,7 @@
         flex: 1;
         margin: 0;
         margin-right: 12px;
-        color: var(--denim-status-online);
+        color: var(--online-indicator);
         font-family: 'Metropolis';
         font-size: 14px;
         font-style: normal;
diff --git a/webapp/channels/src/components/pricing_modal/content.tsx b/webapp/channels/src/components/pricing_modal/content.tsx
index 1e1128713b..72a3a49fad 100644
--- a/webapp/channels/src/components/pricing_modal/content.tsx
+++ b/webapp/channels/src/components/pricing_modal/content.tsx
@@ -164,7 +164,7 @@ function Content(props: ContentProps) {
                     {isProfessional &&
                     <Card
                         id='professional'
-                        topColor='var(--denim-button-bg)'
+                        topColor='var(--button-bg)'
                         plan='Professional'
                         planSummary={formatMessage({id: 'pricing_modal.planSummary.professional', defaultMessage: 'Scalable solutions {br} for growing teams'}, {
                             br: <br/>,
@@ -182,7 +182,7 @@ function Content(props: ContentProps) {
                         planLabel={isProfessional ? (
                             <PlanLabel
                                 text={professionalPlanLabelText()}
-                                color='var(--denim-status-online)'
+                                color='var(--online-indicator)'
                                 bgColor='var(--center-channel-bg)'
                                 firstSvg={<CheckMarkSvg/>}
                             />) : undefined}
@@ -210,7 +210,7 @@ function Content(props: ContentProps) {
                             isEnterprise ? (
                                 <PlanLabel
                                     text={formatMessage({id: 'pricing_modal.planLabel.currentPlan', defaultMessage: 'CURRENT PLAN'})}
-                                    color='var(--denim-status-online)'
+                                    color='var(--online-indicator)'
                                     bgColor='var(--center-channel-bg)'
                                     firstSvg={<CheckMarkSvg/>}
                                     renderLastDaysOnTrial={true}
diff --git a/webapp/channels/src/components/pricing_modal/pricing_modal.scss b/webapp/channels/src/components/pricing_modal/pricing_modal.scss
index 2cafd82cac..b6449b7ddb 100644
--- a/webapp/channels/src/components/pricing_modal/pricing_modal.scss
+++ b/webapp/channels/src/components/pricing_modal/pricing_modal.scss
@@ -81,7 +81,7 @@
             }
 
             a {
-                color: var(--denim-button-bg);
+                color: var(--button-bg);
                 font-family: 'Open Sans';
                 font-size: 14px;
                 font-style: normal;
@@ -129,7 +129,7 @@
                     }
 
                     .contact {
-                        color: var(--denim-button-bg);
+                        color: var(--button-bg);
                     }
                 }
 
@@ -148,7 +148,7 @@
                 padding: 8px;
                 border-radius: 8px;
                 margin-top: 24px;
-                background: rgba(var(--denim-button-bg-rgb), 0.08);
+                background: rgba(var(--button-bg-rgb), 0.08);
                 font-family: 'Open Sans';
                 font-size: 14px;
                 font-style: normal;
@@ -161,7 +161,7 @@
                 }
 
                 .learn {
-                    color: var(--denim-button-bg);
+                    color: var(--button-bg);
                 }
             }
         }
@@ -307,7 +307,7 @@
                             border: none;
                             border-radius: 4px;
                             background: none;
-                            color: var(--denim-button-bg);
+                            color: var(--button-bg);
                             font-weight: 600;
 
                             &.grayed {
@@ -317,21 +317,21 @@
                             }
 
                             &.secondary {
-                                background: rgba(var(--denim-button-bg-rgb), 0.08);
-                                color: var(--denim-button-bg);
+                                background: rgba(var(--button-bg-rgb), 0.08);
+                                color: var(--button-bg);
                             }
 
                             &.active {
-                                border: 1px solid var(--denim-button-bg);
+                                border: 1px solid var(--button-bg);
                             }
 
                             &.special {
-                                background: var(--denim-button-bg);
+                                background: var(--button-bg);
                                 color: var(--button-color);
                             }
 
                             &.green {
-                                background: var(--denim-status-online);
+                                background: var(--online-indicator);
                                 color: var(--button-color);
                             }
                         }
diff --git a/webapp/channels/src/components/pricing_modal/self_hosted_content.tsx b/webapp/channels/src/components/pricing_modal/self_hosted_content.tsx
index 20d31e0f8a..fe0e1e3de3 100644
--- a/webapp/channels/src/components/pricing_modal/self_hosted_content.tsx
+++ b/webapp/channels/src/components/pricing_modal/self_hosted_content.tsx
@@ -174,7 +174,7 @@ function SelfHostedContent(props: ContentProps) {
                             isStarter ? (
                                 <PlanLabel
                                     text={formatMessage({id: 'pricing_modal.planLabel.currentPlan', defaultMessage: 'CURRENT PLAN'})}
-                                    color='var(--denim-status-online)'
+                                    color='var(--online-indicator)'
                                     bgColor='var(--center-channel-bg)'
                                     firstSvg={<CheckMarkSvg/>}
                                 />) : undefined}
@@ -191,7 +191,7 @@ function SelfHostedContent(props: ContentProps) {
                     />
                     <Card
                         id='professional'
-                        topColor='var(--denim-button-bg)'
+                        topColor='var(--button-bg)'
                         plan='Professional'
                         planSummary={formatMessage({id: 'pricing_modal.planSummary.professional', defaultMessage: 'Scalable solutions {br} for growing teams'}, {
                             br: <br/>,
@@ -210,7 +210,7 @@ function SelfHostedContent(props: ContentProps) {
                             isProfessional ? (
                                 <PlanLabel
                                     text={formatMessage({id: 'pricing_modal.planLabel.currentPlan', defaultMessage: 'CURRENT PLAN'})}
-                                    color='var(--denim-status-online)'
+                                    color='var(--online-indicator)'
                                     bgColor='var(--center-channel-bg)'
                                     firstSvg={<CheckMarkSvg/>}
                                 />) : undefined}
@@ -239,7 +239,7 @@ function SelfHostedContent(props: ContentProps) {
                             isEnterprise ? (
                                 <PlanLabel
                                     text={formatMessage({id: 'pricing_modal.planLabel.currentPlan', defaultMessage: 'CURRENT PLAN'})}
-                                    color='var(--denim-status-online)'
+                                    color='var(--online-indicator)'
                                     bgColor='var(--center-channel-bg)'
                                     firstSvg={<CheckMarkSvg/>}
                                     renderLastDaysOnTrial={true}
diff --git a/webapp/channels/src/components/purchase_modal/icon_message.scss b/webapp/channels/src/components/purchase_modal/icon_message.scss
index e16c043b75..37dbf2baf8 100644
--- a/webapp/channels/src/components/purchase_modal/icon_message.scss
+++ b/webapp/channels/src/components/purchase_modal/icon_message.scss
@@ -82,7 +82,7 @@
         .IconMessage-tertiary-button {
             button {
                 border-radius: 4px;
-                background: rgba(var(--denim-button-bg-rgb), 0.08);
+                background: rgba(var(--button-bg-rgb), 0.08);
                 color: var(--button-bg);
             }
         }
diff --git a/webapp/channels/src/components/search_results/search_limits_banner.tsx b/webapp/channels/src/components/search_results/search_limits_banner.tsx
index 5a980b5718..41a2366d40 100644
--- a/webapp/channels/src/components/search_results/search_limits_banner.tsx
+++ b/webapp/channels/src/components/search_results/search_limits_banner.tsx
@@ -22,7 +22,7 @@ width: 100%;
 `;
 
 const StyledA = styled.a`
-color: var(--denim-button-bg) !important;
+color: var(--button-bg) !important;
 `;
 
 const InnerDiv = styled.div`
diff --git a/webapp/channels/src/components/select_team/select_team.scss b/webapp/channels/src/components/select_team/select_team.scss
index 8bacdef228..bc5967276a 100644
--- a/webapp/channels/src/components/select_team/select_team.scss
+++ b/webapp/channels/src/components/select_team/select_team.scss
@@ -32,7 +32,7 @@
             display: inline-flex;
             padding: 3px;
             border-radius: 50%;
-            background-color: rgba(var(--denim-button-bg-rgb), 0.08);
+            background-color: rgba(var(--button-bg-rgb), 0.08);
             font-size: 14px;
 
             &::before {
diff --git a/webapp/channels/src/components/should_verify_email/should_verify_email.scss b/webapp/channels/src/components/should_verify_email/should_verify_email.scss
index 57ce8632f2..5ebdf1e47a 100644
--- a/webapp/channels/src/components/should_verify_email/should_verify_email.scss
+++ b/webapp/channels/src/components/should_verify_email/should_verify_email.scss
@@ -51,7 +51,7 @@
                 visibility: hidden;
 
                 &.success {
-                    color: var(--denim-status-online);
+                    color: var(--online-indicator);
                     visibility: visible;
                 }
 
diff --git a/webapp/channels/src/components/tabs/tabs/style.scss b/webapp/channels/src/components/tabs/tabs/style.scss
index 2804f2edb5..8b7efc24d4 100644
--- a/webapp/channels/src/components/tabs/tabs/style.scss
+++ b/webapp/channels/src/components/tabs/tabs/style.scss
@@ -34,10 +34,10 @@
             }
 
             &.active {
-                border-bottom: 2px solid var(--denim-button-bg);
+                border-bottom: 2px solid var(--button-bg);
 
                 a {
-                    color: var(--denim-button-bg);
+                    color: var(--button-bg);
                 }
             }
 
diff --git a/webapp/channels/src/components/user_groups_modal/user_groups_modal.scss b/webapp/channels/src/components/user_groups_modal/user_groups_modal.scss
index 7d6ee5fd0e..30bfbb60ba 100644
--- a/webapp/channels/src/components/user_groups_modal/user_groups_modal.scss
+++ b/webapp/channels/src/components/user_groups_modal/user_groups_modal.scss
@@ -22,7 +22,7 @@
             padding: 12px 8px;
             border-radius: 8px;
             margin: 0 12px;
-            background-color: var(--denim-sidebar-active-border);
+            background-color: var(--sidebar-active-border);
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);
             color: var(--button-color);
 
@@ -109,19 +109,19 @@
                     border: none;
                     border-radius: 4px;
                     background: rgba(28, 88, 217, 0.08);
-                    color: var(--denim-button-bg);
+                    color: var(--button-bg);
                     font-size: 12px;
                     font-weight: 600;
                     line-height: 10px;
                 }
 
                 .learn-more {
-                    background: rgba(var(--denim-button-bg-rgb), 0.08);
-                    color: var(--denim-button-bg);
+                    background: rgba(var(--button-bg-rgb), 0.08);
+                    color: var(--button-bg);
                 }
 
                 .continue {
-                    background: var(--denim-button-bg);
+                    background: var(--button-bg);
                     color: var(--button-color);
                 }
             }
diff --git a/webapp/channels/src/components/widgets/menu/menu_items/menu_item.scss b/webapp/channels/src/components/widgets/menu/menu_items/menu_item.scss
index d63b250fc4..89db10e73d 100644
--- a/webapp/channels/src/components/widgets/menu/menu_items/menu_item.scss
+++ b/webapp/channels/src/components/widgets/menu/menu_items/menu_item.scss
@@ -218,7 +218,7 @@
 
                 &__icon-section {
                     margin-top: -2px;
-                    color: var(--denim-button-bg);
+                    color: var(--button-bg);
                     font-size: 18px;
                 }
             }
@@ -273,13 +273,13 @@
         }
 
         .icon-information-outline {
-            color: var(--denim-button-bg);
+            color: var(--button-bg);
             cursor: pointer;
         }
 
         a {
             // overriding 4 deep selector
-            color: var(--denim-button-bg) !important;
+            color: var(--button-bg) !important;
             font-weight: bold;
             text-decoration: none;
 
diff --git a/webapp/channels/src/components/widgets/menu/menu_items/restricted_indicator.scss b/webapp/channels/src/components/widgets/menu/menu_items/restricted_indicator.scss
index b021e49f31..a1467e9f7f 100644
--- a/webapp/channels/src/components/widgets/menu/menu_items/restricted_indicator.scss
+++ b/webapp/channels/src/components/widgets/menu/menu_items/restricted_indicator.scss
@@ -14,7 +14,7 @@
 
     .RestrictedIndicator__icon-tooltip {
         padding: 5px 0;
-        color: var(--denim-button-bg);
+        color: var(--button-bg);
         line-height: 22px;
 
         &.trial::before {
diff --git a/webapp/channels/src/components/widgets/modals/components/base_setting_item.scss b/webapp/channels/src/components/widgets/modals/components/base_setting_item.scss
index cfc485892d..73f996c86f 100644
--- a/webapp/channels/src/components/widgets/modals/components/base_setting_item.scss
+++ b/webapp/channels/src/components/widgets/modals/components/base_setting_item.scss
@@ -143,8 +143,8 @@
     }
 
     input[type="checkbox"]:checked {
-        border-color: var(--denim-button-bg);
-        background: var(--denim-button-bg);
+        border-color: var(--button-bg);
+        background: var(--button-bg);
     }
 
     input[type=radio] {
@@ -167,7 +167,7 @@
         width: 8px;
         height: 8px;
         border-radius: 50%;
-        background: var(--denim-button-bg);
+        background: var(--button-bg);
         content: '';
         transform: scale(0);
         transform-origin: center center;
@@ -179,6 +179,6 @@
     }
 
     input[type="radio"]:checked {
-        border-color: var(--denim-button-bg);
+        border-color: var(--button-bg);
     }
 }
diff --git a/webapp/channels/src/components/widgets/modals/components/modal_sidebar.scss b/webapp/channels/src/components/widgets/modals/components/modal_sidebar.scss
index 2845db098f..c97f7e951c 100644
--- a/webapp/channels/src/components/widgets/modals/components/modal_sidebar.scss
+++ b/webapp/channels/src/components/widgets/modals/components/modal_sidebar.scss
@@ -24,12 +24,12 @@
         gap: 8px;
 
         &:hover {
-            background: rgba(var(--denim-button-bg-rgb), 0.08);
+            background: rgba(var(--button-bg-rgb), 0.08);
         }
     }
 
     &__item--active {
-        background: rgba(var(--denim-button-bg-rgb), 0.08);
-        color: var(--denim-button-bg);
+        background: rgba(var(--button-bg-rgb), 0.08);
+        color: var(--button-bg);
     }
 }
diff --git a/webapp/channels/src/components/widgets/modals/components/save_changes_panel.scss b/webapp/channels/src/components/widgets/modals/components/save_changes_panel.scss
index 3f3be3fb9f..d205b5dc90 100644
--- a/webapp/channels/src/components/widgets/modals/components/save_changes_panel.scss
+++ b/webapp/channels/src/components/widgets/modals/components/save_changes_panel.scss
@@ -90,8 +90,8 @@
         padding: 10px 16px;
         border: none;
         border-radius: 4px;
-        background: rgba(var(--denim-button-bg-rgb), 0.08);
-        color: var(--denim-button-bg);
+        background: rgba(var(--button-bg-rgb), 0.08);
+        color: var(--button-bg);
         font-family: inherit;
         font-size: 12px;
         font-weight: 600;
@@ -113,7 +113,7 @@
         padding: 10px 16px;
         border: none;
         border-radius: 4px;
-        background: var(--denim-button-bg);
+        background: var(--button-bg);
         color: var(--button-color);
         font-family: inherit;
         font-size: 12px;
@@ -123,7 +123,7 @@
 
         &.error {
             background-color: var(--button-color);
-            color: var(--denim-button-bg);
+            color: var(--button-bg);
         }
 
         &:disabled {
diff --git a/webapp/channels/src/sass/base/_css_variables.scss b/webapp/channels/src/sass/base/_css_variables.scss
index c82c88cdee..20b35228e8 100644
--- a/webapp/channels/src/sass/base/_css_variables.scss
+++ b/webapp/channels/src/sass/base/_css_variables.scss
@@ -30,8 +30,6 @@
     --sidebar-team-background: #0b428c;
     --secondary-blue: #22406d;
     --denim-button-bg: #1c58d9;
-    --denim-status-online: #3db887;
-    --denim-sidebar-active-border: #5d89ea;
     --title-color-indigo-500: #1e325c;
 
     // Default RGB values to be replaced by applyTheme() (do not add opacity mutations here)
@@ -61,7 +59,6 @@
     --error-box-background: 197, 67, 72;
     --sidebar-team-background-rgb: 11, 66, 140;
     --secondary-blue-rgb: 34, 64, 109;
-    --denim-status-online-rgb: 61, 184, 135;
     --denim-button-bg-rgb: 28, 88, 217;
     --title-color-indigo-500-rgb: 30, 50, 92;
 
diff --git a/webapp/channels/src/sass/utils/_mixins.scss b/webapp/channels/src/sass/utils/_mixins.scss
index c279d343e3..df43e47ac9 100644
--- a/webapp/channels/src/sass/utils/_mixins.scss
+++ b/webapp/channels/src/sass/utils/_mixins.scss
@@ -162,7 +162,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border: 1px solid var(--denim-button-bg);
+    border: 1px solid var(--button-bg);
     border-radius: 4px;
     background: var(--center-channel-bg);
     color: var(--button-bg);
@@ -170,11 +170,11 @@
     transition: all 0.15s ease-out;
 
     &:hover {
-        background: rgba(var(--denim-button-bg-rgb), 0.08);
+        background: rgba(var(--button-bg-rgb), 0.08);
     }
 
     &:active {
-        background: rgba(var(--denim-button-bg-rgb), 0.16);
+        background: rgba(var(--button-bg-rgb), 0.16);
     }
 
     &:focus {
@@ -273,7 +273,7 @@
     &:focus,
     &:focus-within {
         box-sizing: border-box;
-        border: 2px solid rgba(var(--denim-button-bg-rgb), 0.32);
+        border: 2px solid rgba(var(--button-bg-rgb), 0.32);
         box-shadow: none;
         outline: none;
     }