diff --git a/res/css/structures/_CustomRoomTagPanel.scss b/res/css/structures/_CustomRoomTagPanel.scss
index b640c90d4f..96813cccea 100644
--- a/res/css/structures/_CustomRoomTagPanel.scss
+++ b/res/css/structures/_CustomRoomTagPanel.scss
@@ -22,7 +22,7 @@ limitations under the License.
 }
 
 .mx_CustomRoomTagPanel {
-    background-color: $GroupFilterPanel-bg-color;
+    background-color: $groupFilterPanel-bg-color;
     max-height: 40vh;
 }
 
diff --git a/res/css/structures/_GroupFilterPanel.scss b/res/css/structures/_GroupFilterPanel.scss
index 53bc7ffcfd..e5a8ef6df2 100644
--- a/res/css/structures/_GroupFilterPanel.scss
+++ b/res/css/structures/_GroupFilterPanel.scss
@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_GroupFilterPanel {
     flex: 1;
-    background-color: $GroupFilterPanel-bg-color;
+    background-color: $groupFilterPanel-bg-color;
     cursor: pointer;
 
     display: flex;
@@ -34,7 +34,7 @@ limitations under the License.
     height: 0px;
     width: 90%;
     border: none;
-    border-bottom: 1px solid $GroupFilterPanel-divider-color;
+    border-bottom: 1px solid $groupFilterPanel-divider-color;
 }
 
 .mx_GroupFilterPanel .mx_GroupFilterPanel_scroller {
diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index 82fcaf14ee..885dd77a84 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-$GroupFilterPanelWidth: 56px; // only applies in this file, used for calculations
+$groupFilterPanelWidth: 56px; // only applies in this file, used for calculations
 
 .mx_LeftPanel {
     background-color: $roomlist-bg-color;
@@ -27,7 +27,7 @@ $GroupFilterPanelWidth: 56px; // only applies in this file, used for calculation
     .mx_LeftPanel_GroupFilterPanelContainer {
         flex-grow: 0;
         flex-shrink: 0;
-        flex-basis: $GroupFilterPanelWidth;
+        flex-basis: $groupFilterPanelWidth;
         height: 100%;
 
         // Create another flexbox so the GroupFilterPanel fills the container
@@ -45,7 +45,7 @@ $GroupFilterPanelWidth: 56px; // only applies in this file, used for calculation
     // Note: The 'room list' in this context is actually everything that isn't the tag
     // panel, such as the menu options, breadcrumbs, filtering, etc
     .mx_LeftPanel_roomListContainer {
-        width: calc(100% - $GroupFilterPanelWidth);
+        width: calc(100% - $groupFilterPanelWidth);
         background-color: $roomlist-bg-color;
 
         // Create another flexbox (this time a column) for the room list components
@@ -170,7 +170,7 @@ $GroupFilterPanelWidth: 56px; // only applies in this file, used for calculation
 
         // We have to forcefully set the width to override the resizer's style attribute.
         &.mx_LeftPanel_hasGroupFilterPanel {
-            width: calc(68px + $GroupFilterPanelWidth) !important;
+            width: calc(68px + $groupFilterPanelWidth) !important;
         }
         &:not(.mx_LeftPanel_hasGroupFilterPanel) {
             width: 68px !important;
diff --git a/res/css/views/rooms/_MemberInfo.scss b/res/css/views/rooms/_MemberInfo.scss
index 6d32217acd..182c280217 100644
--- a/res/css/views/rooms/_MemberInfo.scss
+++ b/res/css/views/rooms/_MemberInfo.scss
@@ -70,7 +70,7 @@ limitations under the License.
 }
 
 .mx_MemberInfo_avatar {
-    background: $GroupFilterPanel-bg-color;
+    background: $groupFilterPanel-bg-color;
     margin-bottom: 16px;
 }
 
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 7165145204..6e0c9acdfe 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -39,7 +39,7 @@ $info-plinth-fg-color: #888;
 
 $preview-bar-bg-color: $header-panel-bg-color;
 
-$GroupFilterPanel-bg-color: rgba(38, 39, 43, 0.82);
+$groupFilterPanel-bg-color: rgba(38, 39, 43, 0.82);
 $inverted-bg-color: $base-color;
 
 // used by AddressSelector
@@ -98,7 +98,7 @@ $roomheader-color: $text-primary-color;
 $roomheader-bg-color: $bg-color;
 $roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3);
 $roomheader-addroom-fg-color: $text-primary-color;
-$GroupFilterPanel-button-color: $header-panel-text-primary-color;
+$groupFilterPanel-button-color: $header-panel-text-primary-color;
 $groupheader-button-color: $header-panel-text-primary-color;
 $rightpanel-button-color: $header-panel-text-primary-color;
 $icon-button-color: #8E99A4;
@@ -118,7 +118,7 @@ $roomlist-bg-color: rgba(33, 38, 44, 0.90);
 $roomlist-header-color: $tertiary-fg-color;
 $roomsublist-divider-color: $primary-fg-color;
 
-$GroupFilterPanel-divider-color: $roomlist-header-color;
+$groupFilterPanel-divider-color: $roomlist-header-color;
 
 $roomtile-preview-color: $secondary-fg-color;
 $roomtile-default-badge-bg-color: #61708b;
@@ -187,7 +187,7 @@ $reaction-row-button-selected-border-color: $accent-color;
 
 $kbd-border-color: #000000;
 
-$tooltip-timeline-bg-color: $GroupFilterPanel-bg-color;
+$tooltip-timeline-bg-color: $groupFilterPanel-bg-color;
 $tooltip-timeline-fg-color: #ffffff;
 
 $interactive-tooltip-bg-color: $base-color;
@@ -202,7 +202,7 @@ $appearance-tab-border-color: $room-highlight-color;
 
 // blur amounts for left left panel (only for element theme, used in _mods.scss)
 $roomlist-background-blur-amount: 60px;
-$GroupFilterPanel-background-blur-amount: 30px;
+$groupFilterPanel-background-blur-amount: 30px;
 
 $composer-shadow-color: rgba(0, 0, 0, 0.28);
 
diff --git a/res/themes/dark/css/dark.scss b/res/themes/dark/css/dark.scss
index df788ec665..f9695018e4 100644
--- a/res/themes/dark/css/dark.scss
+++ b/res/themes/dark/css/dark.scss
@@ -3,7 +3,7 @@
 @import "../../light/css/_fonts.scss";
 @import "../../light/css/_light.scss";
 // important this goes before _mods,
-// as $GroupFilterPanel-background-blur-amount and
+// as $groupFilterPanel-background-blur-amount and
 // $roomlist-background-blur-amount
 // are overridden in _dark.scss
 @import "_dark.scss";
diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss
index a36677bacc..efde7b3747 100644
--- a/res/themes/legacy-dark/css/_legacy-dark.scss
+++ b/res/themes/legacy-dark/css/_legacy-dark.scss
@@ -37,8 +37,8 @@ $info-plinth-fg-color: #888;
 
 $preview-bar-bg-color: $header-panel-bg-color;
 
-$GroupFilterPanel-bg-color: $base-color;
-$inverted-bg-color: $GroupFilterPanel-bg-color;
+$groupFilterPanel-bg-color: $base-color;
+$inverted-bg-color: $groupFilterPanel-bg-color;
 
 // used by AddressSelector
 $selected-color: $room-highlight-color;
@@ -95,7 +95,7 @@ $topleftmenu-color: $text-primary-color;
 $roomheader-color: $text-primary-color;
 $roomheader-addroom-bg-color: #3c4556; // $search-placeholder-color at 0.5 opacity
 $roomheader-addroom-fg-color: $text-primary-color;
-$GroupFilterPanel-button-color: $header-panel-text-primary-color;
+$groupFilterPanel-button-color: $header-panel-text-primary-color;
 $groupheader-button-color: $header-panel-text-primary-color;
 $rightpanel-button-color: $header-panel-text-primary-color;
 $icon-button-color: $header-panel-text-primary-color;
@@ -115,7 +115,7 @@ $roomlist-bg-color: $header-panel-bg-color;
 
 $roomsublist-divider-color: $primary-fg-color;
 
-$GroupFilterPanel-divider-color: $roomlist-header-color;
+$groupFilterPanel-divider-color: $roomlist-header-color;
 
 $roomtile-preview-color: #9e9e9e;
 $roomtile-default-badge-bg-color: #61708b;
@@ -182,7 +182,7 @@ $reaction-row-button-selected-border-color: $accent-color;
 
 $kbd-border-color: #000000;
 
-$tooltip-timeline-bg-color: $GroupFilterPanel-bg-color;
+$tooltip-timeline-bg-color: $groupFilterPanel-bg-color;
 $tooltip-timeline-fg-color: #ffffff;
 
 $interactive-tooltip-bg-color: $base-color;
diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss
index 36e6fca6cd..f77226cbca 100644
--- a/res/themes/legacy-light/css/_legacy-light.scss
+++ b/res/themes/legacy-light/css/_legacy-light.scss
@@ -67,8 +67,8 @@ $preview-bar-bg-color: #f7f7f7;
 $secondary-accent-color: #f2f5f8;
 $tertiary-accent-color: #d3efe1;
 
-$GroupFilterPanel-bg-color: #27303a;
-$inverted-bg-color: $GroupFilterPanel-bg-color;
+$groupFilterPanel-bg-color: #27303a;
+$inverted-bg-color: $groupFilterPanel-bg-color;
 
 // used by RoomDirectory permissions
 $plinth-bg-color: $secondary-accent-color;
@@ -162,7 +162,7 @@ $roomheader-color: #45474a;
 $roomheader-bg-color: $primary-bg-color;
 $roomheader-addroom-bg-color: #91a1c0;
 $roomheader-addroom-fg-color: $accent-fg-color;
-$GroupFilterPanel-button-color: #91a1c0;
+$groupFilterPanel-button-color: #91a1c0;
 $groupheader-button-color: #91a1c0;
 $rightpanel-button-color: #91a1c0;
 $icon-button-color: #91a1c0;
@@ -182,7 +182,7 @@ $roomlist-bg-color: $header-panel-bg-color;
 $roomlist-header-color: $primary-fg-color;
 $roomsublist-divider-color: $primary-fg-color;
 
-$GroupFilterPanel-divider-color: $roomlist-header-color;
+$groupFilterPanel-divider-color: $roomlist-header-color;
 
 $roomtile-preview-color: #9e9e9e;
 $roomtile-default-badge-bg-color: #61708b;
@@ -305,7 +305,7 @@ $reaction-row-button-selected-border-color: $accent-color;
 
 $kbd-border-color: $reaction-row-button-border-color;
 
-$tooltip-timeline-bg-color: $GroupFilterPanel-bg-color;
+$tooltip-timeline-bg-color: $groupFilterPanel-bg-color;
 $tooltip-timeline-fg-color: #ffffff;
 
 $interactive-tooltip-bg-color: #27303a;
diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss
index 0c315ac459..1b9254d100 100644
--- a/res/themes/light-custom/css/_custom.scss
+++ b/res/themes/light-custom/css/_custom.scss
@@ -49,7 +49,7 @@ $roomtile-selected-bg-color: var(--roomlist-highlights-color);
 //
 // --sidebar-color
 $interactive-tooltip-bg-color: var(--sidebar-color);
-$GroupFilterPanel-bg-color: var(--sidebar-color);
+$groupFilterPanel-bg-color: var(--sidebar-color);
 $tooltip-timeline-bg-color: var(--sidebar-color);
 $dialog-backdrop-color: var(--sidebar-color-50pct);
 $roomlist-button-bg-color: var(--sidebar-color-15pct);
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index d71c7d309a..d137373bd5 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -62,7 +62,7 @@ $preview-bar-bg-color: #f7f7f7;
 $secondary-accent-color: #f2f5f8;
 $tertiary-accent-color: #d3efe1;
 
-$GroupFilterPanel-bg-color: rgba(232, 232, 232, 0.77);
+$groupFilterPanel-bg-color: rgba(232, 232, 232, 0.77);
 
 // used by RoomDirectory permissions
 $plinth-bg-color: $secondary-accent-color;
@@ -156,7 +156,7 @@ $roomheader-color: #45474a;
 $roomheader-bg-color: $primary-bg-color;
 $roomheader-addroom-bg-color: rgba(92, 100, 112, 0.2);
 $roomheader-addroom-fg-color: #5c6470;
-$GroupFilterPanel-button-color: #91A1C0;
+$groupFilterPanel-button-color: #91A1C0;
 $groupheader-button-color: #91A1C0;
 $rightpanel-button-color: #91A1C0;
 $icon-button-color: #C1C6CD;
@@ -176,7 +176,7 @@ $roomlist-bg-color: rgba(245, 245, 245, 0.90);
 $roomlist-header-color: $tertiary-fg-color;
 $roomsublist-divider-color: $primary-fg-color;
 
-$GroupFilterPanel-divider-color: $roomlist-header-color;
+$groupFilterPanel-divider-color: $roomlist-header-color;
 
 $roomtile-preview-color: $secondary-fg-color;
 $roomtile-default-badge-bg-color: #61708b;
@@ -320,7 +320,7 @@ $appearance-tab-border-color: $input-darker-bg-color;
 
 // blur amounts for left left panel (only for element theme, used in _mods.scss)
 $roomlist-background-blur-amount: 40px;
-$GroupFilterPanel-background-blur-amount: 20px;
+$groupFilterPanel-background-blur-amount: 20px;
 
 $composer-shadow-color: rgba(0, 0, 0, 0.04);
 
diff --git a/res/themes/light/css/_mods.scss b/res/themes/light/css/_mods.scss
index 2826998ca7..8429df5c3a 100644
--- a/res/themes/light/css/_mods.scss
+++ b/res/themes/light/css/_mods.scss
@@ -13,7 +13,7 @@
     }
 
     .mx_GroupFilterPanel {
-        backdrop-filter: blur($GroupFilterPanel-background-blur-amount);
+        backdrop-filter: blur($groupFilterPanel-background-blur-amount);
     }
 
     .mx_LeftPanel .mx_LeftPanel_roomListContainer {