Add CSS cascade layers for Compound, shared components, and app/web styles (#33302)

* Layer Compound and shared component CSS

* Layer app theme CSS

* Remove !important flags from ActionBarView

* Remove unnecessary !important statements from shared components

* Avoid dead code errors for *.pcss just because layer is specified after @import url

* Remove unnecessary !important styling

* Override Banner defaults in RoomStatusBarView

* Updated snaps

* Updated snaps

* Fix styling of media body in app/web

* Fix styling for Compound anchors

* Fix styling issues in app/web

* More styling fixes

* Fix a problem extracting css for HTMLExport

* Revert changes

* Fix for theme styling

* Add test to improve coverage

* Prettier

* Fix styling issues

* Add data-kind attribute to avoid global styling override

* Update screenshot that now is correct

* Revert data-kind attribute

* Handle LinkPreview styling in .pcss

* Fix flaky test: Avoid racing the lazy-loaded ManageEventIndexDialog

* Take care of review comments

* Updated snaps

* Updated snaps again after merge

* Remove !important from RoomStatusBar
This commit is contained in:
rbondesson
2026-04-30 11:54:49 +00:00
committed by GitHub
parent f2d355bb2c
commit b0ee6f5323
46 changed files with 350 additions and 165 deletions
@@ -89,13 +89,13 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
<div
aria-label="Message Actions"
aria-live="off"
class="_flex_4dswl_9 mx_ThreadActionBar mx_HistoryActionBar _toolbar_1ax4y_8"
class="_flex_4dswl_9 mx_ThreadActionBar mx_HistoryActionBar _toolbar_1ksun_8"
role="toolbar"
style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<button
aria-label="Remove"
class="_button_1nw83_8 _toolbar_item_1ax4y_14"
class="_button_1nw83_8 _toolbar_item_1ksun_14"
data-kind="tertiary"
data-presentation="label"
data-size="md"
@@ -236,13 +236,13 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
<div
aria-label="Message Actions"
aria-live="off"
class="_flex_4dswl_9 mx_ThreadActionBar mx_HistoryActionBar _toolbar_1ax4y_8"
class="_flex_4dswl_9 mx_ThreadActionBar mx_HistoryActionBar _toolbar_1ksun_8"
role="toolbar"
style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<button
aria-label="Remove"
class="_button_1nw83_8 _toolbar_item_1ax4y_14"
class="_button_1nw83_8 _toolbar_item_1ksun_14"
data-kind="tertiary"
data-presentation="label"
data-size="md"
@@ -298,13 +298,13 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
<div
aria-label="Message Actions"
aria-live="off"
class="_flex_4dswl_9 mx_ThreadActionBar mx_HistoryActionBar _toolbar_1ax4y_8"
class="_flex_4dswl_9 mx_ThreadActionBar mx_HistoryActionBar _toolbar_1ksun_8"
role="toolbar"
style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<button
aria-label="Remove"
class="_button_1nw83_8 _toolbar_item_1ax4y_14"
class="_button_1nw83_8 _toolbar_item_1ksun_14"
data-kind="tertiary"
data-presentation="label"
data-size="md"
@@ -342,13 +342,13 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
<div
aria-label="Message Actions"
aria-live="off"
class="_flex_4dswl_9 mx_ThreadActionBar mx_HistoryActionBar _toolbar_1ax4y_8"
class="_flex_4dswl_9 mx_ThreadActionBar mx_HistoryActionBar _toolbar_1ksun_8"
role="toolbar"
style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<button
aria-label="Remove"
class="_button_1nw83_8 _toolbar_item_1ax4y_14"
class="_button_1nw83_8 _toolbar_item_1ksun_14"
data-kind="tertiary"
data-presentation="label"
data-size="md"