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

apps/web/res/css/_common.pcss

@@ -163,9 +163,10 @@ b {
     font-weight: bold;
 }
 
-a:hover,
-a:link,
-a:visited {
+/* Keep the legacy link colour without overriding Compound anchors. */
+a:where(:not([data-kind])):hover,
+a:where(:not([data-kind])):link,
+a:where(:not([data-kind])):visited {
     color: $accent-alt;
 }
 

apps/web/res/css/_compound.pcss

@@ -1,3 +1,6 @@
+/* Shared cascade order: Compound tokens, Compound Web, shared components, then app overrides. */
+@layer compound-tokens, compound-web, shared-components, app-web;
+
 /* Modules bundled with compound apply compound lastly. In order to catch issue due to css class ordering, we put compound at the end */
-@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
-@import url("@vector-im/compound-web/dist/style.css");
+@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound-tokens);
+@import url("@vector-im/compound-web/dist/style.css") layer(compound-web);

apps/web/res/css/views/audio_messages/_PlaybackContainer.pcss

@@ -11,9 +11,8 @@ Please see LICENSE files in the repository root for full details.
 
 /* Container for live recording and playback controls */
 .mx_MediaBody.mx_VoiceMessagePrimaryContainer {
-    /* The waveform (right) has a 1px padding on it that we want to account for, otherwise */
-    /* inherit from mx_MediaBody */
-    padding-right: 11px;
+    /* Match mx_MediaBody spacing, offsetting the waveform's 1px internal right padding. */
+    padding: 6px 11px 6px 12px;
 
     /* Cheat at alignment a bit */
     display: flex;

apps/web/res/css/views/auth/_CompleteSecurityBody.pcss

@@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.
 .mx_CompleteSecurityBody {
     color: $authpage-primary-color;
     background-color: $background;
-    border-radius: 4px;
+    border-radius: 24px;
     padding: 20px 20px 60px 20px;
     box-sizing: border-box;
 

apps/web/res/css/views/messages/_MFileBody.pcss

@@ -7,7 +7,6 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_MFileBody [data-type="download"] {
-    color: $accent;
     height: var(--cpd-space-9x);
 
     & object {

apps/web/res/css/views/messages/_MediaBody.pcss

@@ -17,6 +17,8 @@ Please see LICENSE files in the repository root for full details.
     color: $secondary-content;
     font: var(--cpd-font-body-md-regular);
     line-height: $font-24px;
+}
 
-    padding: 6px 12px;
+.mx_MAudioBody > .mx_MediaBody {
+    border-radius: var(--MBody-border-radius);
 }

apps/web/res/css/views/messages/_TextualEvent.pcss

@@ -19,3 +19,12 @@ Please see LICENSE files in the repository root for full details.
         opacity: unset; /* Unset the opacity value specified above on the search results panel */
     }
 }
+
+.mx_TextualBody_urlPreviews {
+    /* Let shared-components own preview link colours instead of the app-wide anchor colour. */
+    a:where(:not([data-kind])):hover,
+    a:where(:not([data-kind])):link,
+    a:where(:not([data-kind])):visited {
+        color: revert-layer;
+    }
+}

apps/web/res/css/views/settings/_ThemeChoicePanel.pcss

@@ -26,12 +26,22 @@ Please see LICENSE files in the repository root for full details.
 
         &.mx_ThemeChoicePanel_themeSelector_disabled {
             border-color: var(--cpd-color-border-disabled);
+
+            .mx_ThemeChoicePanel_themeSelector_Label {
+                color: var(--cpd-color-text-disabled);
+                cursor: not-allowed;
+            }
         }
 
         .mx_ThemeChoicePanel_themeSelector_Label {
-            color: var(--cpd-color-text-primary);
             font: var(--cpd-font-body-md-semibold);
         }
+
+        &:not(.mx_ThemeChoicePanel_themeSelector_disabled) {
+            .mx_ThemeChoicePanel_themeSelector_Label {
+                color: var(--cpd-color-text-primary);
+            }
+        }
     }
 }
 

apps/web/res/css/views/settings/tabs/_SettingsSection.pcss

@@ -12,7 +12,8 @@ Please see LICENSE files in the repository root for full details.
 
     color: $primary-content;
 
-    a {
+    /* Compound links carry data-kind and provide their own colour. */
+    a:not([data-kind]) {
         color: $links;
     }
 

apps/web/res/css/views/settings/tabs/_SettingsTab.pcss

@@ -10,7 +10,8 @@ Please see LICENSE files in the repository root for full details.
 
     color: $primary-content;
 
-    a {
+    /* Compound links carry data-kind and provide their own colour. */
+    a:not([data-kind]) {
         color: $links;
     }