From e15f80c3710e8d6a48b3b684d54e86029c2213d4 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Fri, 19 Dec 2025 11:08:23 +0100 Subject: [PATCH] Fix styling issue when using EW modules (#31533) * style: move compound loading order * fix: spotlight fiting * fix: don't use internal compound css var in settings subsection * fix: don't use internaal compound css var in read receipt group * fix: add important to font settings on body element * fix: remove play pause button color and fix padding This color wasn't apply because this PR. Removing to avoid visual regression * fix: add important to form help message override in preference settings * fix: override compound in space panel buttons * fix: layout of forgot password * fix: height of encryption tab * fix: widget avatar border radius --- res/css/_common.pcss | 9 ++++----- res/css/_compound.pcss | 3 +++ .../views/settings/shared/_SettingsSubsection.pcss | 5 +++-- res/css/rethemendex.sh | 2 +- res/css/structures/_QuickSettingsButton.pcss | 6 ++++-- res/css/structures/_ThreadsActivityCentre.pcss | 9 ++++++--- res/css/views/audio_messages/_PlayPauseButton.pcss | 4 ++-- res/css/views/avatars/_WidgetAvatar.pcss | 3 ++- res/css/views/dialogs/_SpotlightDialog.pcss | 7 ++++--- res/css/views/dialogs/_VerifyEMailDialog.pcss | 3 ++- res/css/views/rooms/_ReadReceiptGroup.pcss | 4 ++-- res/css/views/settings/encryption/_AdvancedPanel.pcss | 3 ++- .../settings/tabs/user/_MediaPreviewAccountSettings.pcss | 3 ++- res/themes/dark-custom/css/dark-custom.pcss | 1 + res/themes/dark/css/dark.pcss | 1 + res/themes/legacy-dark/css/legacy-dark.pcss | 1 + res/themes/legacy-light/css/legacy-light.pcss | 1 + res/themes/light-custom/css/light-custom.pcss | 1 + .../light-high-contrast/css/light-high-contrast.pcss | 1 + res/themes/light/css/light.pcss | 1 + 20 files changed, 44 insertions(+), 24 deletions(-) create mode 100644 res/css/_compound.pcss diff --git a/res/css/_common.pcss b/res/css/_common.pcss index be42edc426..ec83fef901 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -9,8 +9,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com Please see LICENSE files in the repository root for full details. */ -@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 "./_font-sizes.pcss"; @import "./_animations.pcss"; @import "./_spacing.pcss"; @@ -85,8 +83,9 @@ html { } body { - font: var(--cpd-font-body-md-regular); - letter-spacing: var(--cpd-font-letter-spacing-body-md); + /* !important because compound overrides these font settings for body */ + font: var(--cpd-font-body-md-regular) !important; + letter-spacing: var(--cpd-font-letter-spacing-body-md) !important; /** * We want to apply Inter Dynamic metrics (https://rsms.me/inter/dynmetrics/) * We need to tweak the `letter-spacing` property and doing so, disables by @@ -97,7 +96,7 @@ body { font-feature-settings: "kern" 1, "liga" 1, - "calt" 1; + "calt" 1 !important; background-color: $background; color: $primary-content; diff --git a/res/css/_compound.pcss b/res/css/_compound.pcss new file mode 100644 index 0000000000..2bc482551d --- /dev/null +++ b/res/css/_compound.pcss @@ -0,0 +1,3 @@ +/* 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"); diff --git a/res/css/components/views/settings/shared/_SettingsSubsection.pcss b/res/css/components/views/settings/shared/_SettingsSubsection.pcss index 690da59d90..77ed0f9f82 100644 --- a/res/css/components/views/settings/shared/_SettingsSubsection.pcss +++ b/res/css/components/views/settings/shared/_SettingsSubsection.pcss @@ -20,9 +20,10 @@ Please see LICENSE files in the repository root for full details. /** * The gap between subsections is 32px and inside the subsection is 24px. * The separator separates the subsections, so it should have the same gap as the subsections. - * We add 12px and the separator spacing to the top margin to make the separator visually centered between the subsections. + * We add 12px and the separator spacing (8px) to the top margin to make the separator visually centered between the subsections. + * !important because it's overriding compound margin. */ - margin-top: calc(var(--cpd-space-3x) + var(--cpd-separator-spacing)); + margin-top: var(--cpd-space-5x) !important; } } diff --git a/res/css/rethemendex.sh b/res/css/rethemendex.sh index 37090b96d8..3f0ed28e3f 100755 --- a/res/css/rethemendex.sh +++ b/res/css/rethemendex.sh @@ -8,7 +8,7 @@ cd `dirname $0` # we used to have exclude /themes from the find at this point. # as themes are no longer a spurious subdirectory of css/, we don't # need it any more. - find . -iname _\*.pcss | fgrep -v _components.pcss | LC_ALL=C sort | + find . -iname _\*.pcss | fgrep -v _components.pcss | fgrep -v _compound.pcss | LC_ALL=C sort | while read i; do echo "@import \"$i\";" done diff --git a/res/css/structures/_QuickSettingsButton.pcss b/res/css/structures/_QuickSettingsButton.pcss index 83d997f3a2..b681cecb30 100644 --- a/res/css/structures/_QuickSettingsButton.pcss +++ b/res/css/structures/_QuickSettingsButton.pcss @@ -7,7 +7,8 @@ Please see LICENSE files in the repository root for full details. */ .mx_QuickSettingsButton { - border-radius: 8px; + /* !important override compound */ + border-radius: 8px !important; margin: 12px auto 12px; svg { @@ -57,7 +58,8 @@ Please see LICENSE files in the repository root for full details. } & .mx_QuickSettingsButton_label { - color: $secondary-content; + /* !important override compound */ + color: $secondary-content !important; } } } diff --git a/res/css/structures/_ThreadsActivityCentre.pcss b/res/css/structures/_ThreadsActivityCentre.pcss index 434ddb0ea4..a6e4627dd0 100644 --- a/res/css/structures/_ThreadsActivityCentre.pcss +++ b/res/css/structures/_ThreadsActivityCentre.pcss @@ -11,7 +11,8 @@ } .mx_ThreadsActivityCentreButton { - border-radius: 8px; + /* !important override compound */ + border-radius: 8px !important; margin: 18px auto auto auto; &.expanded { @@ -50,14 +51,16 @@ } & .mx_ThreadsActivityCentreButton_Text { - color: $secondary-content; + /* !important override compound */ + color: $secondary-content !important; } } &:not(.expanded) { &:hover, &:hover .mx_ThreadsActivityCentreButton_Icon { - background-color: $quaternary-content; + /* !important override compound */ + background-color: $quaternary-content !important; fill: $primary-content; } } diff --git a/res/css/views/audio_messages/_PlayPauseButton.pcss b/res/css/views/audio_messages/_PlayPauseButton.pcss index 96d419281b..47df79c5d3 100644 --- a/res/css/views/audio_messages/_PlayPauseButton.pcss +++ b/res/css/views/audio_messages/_PlayPauseButton.pcss @@ -14,11 +14,11 @@ Please see LICENSE files in the repository root for full details. min-height: 32px; /* for when the button is used in a flexbox */ border-radius: 32px; background-color: $system; - padding: var(--cpd-space-1-5x); + /* !important override compound icon button */ + padding: var(--cpd-space-1-5x) !important; box-sizing: border-box; svg { - color: $secondary-content; width: 20px; height: 20px; } diff --git a/res/css/views/avatars/_WidgetAvatar.pcss b/res/css/views/avatars/_WidgetAvatar.pcss index 564c9fefc2..c02b717e00 100644 --- a/res/css/views/avatars/_WidgetAvatar.pcss +++ b/res/css/views/avatars/_WidgetAvatar.pcss @@ -7,5 +7,6 @@ Please see LICENSE files in the repository root for full details. */ .mx_WidgetAvatar { - border-radius: 4px; + /* !important override compound avatar */ + border-radius: 4px !important; } diff --git a/res/css/views/dialogs/_SpotlightDialog.pcss b/res/css/views/dialogs/_SpotlightDialog.pcss index 3f598c26aa..67d2ebcc39 100644 --- a/res/css/views/dialogs/_SpotlightDialog.pcss +++ b/res/css/views/dialogs/_SpotlightDialog.pcss @@ -13,11 +13,12 @@ Please see LICENSE files in the repository root for full details. } .mx_Dialog { - width: fit-content; - border-radius: 8px; + /* !important because it's overriding compound */ + width: fit-content !important; + border-radius: 8px !important; + height: 60% !important; overflow-y: initial; position: relative; - height: 60%; padding: 0; contain: unset; /* needed for #mx_SpotlightDialog_keyboardPrompt to not be culled */ diff --git a/res/css/views/dialogs/_VerifyEMailDialog.pcss b/res/css/views/dialogs/_VerifyEMailDialog.pcss index 32fc8189e9..876962bfd9 100644 --- a/res/css/views/dialogs/_VerifyEMailDialog.pcss +++ b/res/css/views/dialogs/_VerifyEMailDialog.pcss @@ -15,7 +15,8 @@ Please see LICENSE files in the repository root for full details. font: var(--cpd-font-body-md-regular); padding: $spacing-24 $spacing-24 $spacing-16; text-align: center; - width: 485px; + /* !important override compound */ + width: 485px !important; h1 { font-size: $font-24px; diff --git a/res/css/views/rooms/_ReadReceiptGroup.pcss b/res/css/views/rooms/_ReadReceiptGroup.pcss index d6f69c8333..b9e48444a5 100644 --- a/res/css/views/rooms/_ReadReceiptGroup.pcss +++ b/res/css/views/rooms/_ReadReceiptGroup.pcss @@ -44,8 +44,8 @@ Please see LICENSE files in the repository root for full details. /* Compound uses a border on default avatars but no border on actual images, we want a border in all cases */ box-sizing: content-box; border: 1px solid $background !important; - /* Reset the line height as we are no longer box-sizing border-box */ - line-height: var(--cpd-avatar-size); + /* Reset the line height as we are no longer box-sizing border-box. 14px because avatar is set at 14px in component */ + line-height: 14px; position: absolute; will-change: left, top; transition: diff --git a/res/css/views/settings/encryption/_AdvancedPanel.pcss b/res/css/views/settings/encryption/_AdvancedPanel.pcss index fed8fca7ea..a0f53f87bd 100644 --- a/res/css/views/settings/encryption/_AdvancedPanel.pcss +++ b/res/css/views/settings/encryption/_AdvancedPanel.pcss @@ -9,7 +9,8 @@ .mx_OtherSettings { display: flex; flex-direction: column; - gap: var(--cpd-space-6x); + /* !important override compound form */ + gap: var(--cpd-space-6x) !important; width: 100%; align-items: start; diff --git a/res/css/views/settings/tabs/user/_MediaPreviewAccountSettings.pcss b/res/css/views/settings/tabs/user/_MediaPreviewAccountSettings.pcss index 68187854c1..b8f6209139 100644 --- a/res/css/views/settings/tabs/user/_MediaPreviewAccountSettings.pcss +++ b/res/css/views/settings/tabs/user/_MediaPreviewAccountSettings.pcss @@ -14,7 +14,8 @@ Please see LICENSE files in the repository root for full details. } .mx_MediaPreviewAccountSetting_RadioHelp { - margin-top: 0; + /* !important because it's overriding compound help message */ + margin-top: 0 !important; margin-bottom: var(--cpd-space-1x); } diff --git a/res/themes/dark-custom/css/dark-custom.pcss b/res/themes/dark-custom/css/dark-custom.pcss index 166d9cb292..dad1ede631 100644 --- a/res/themes/dark-custom/css/dark-custom.pcss +++ b/res/themes/dark-custom/css/dark-custom.pcss @@ -5,4 +5,5 @@ @import "../../legacy-dark/css/_legacy-dark.pcss"; @import "../../light-custom/css/_custom.pcss"; @import "../../../../res/css/_components.pcss"; +@import "../../../../res/css/_compound.pcss"; @import url("github-markdown-css/github-markdown-dark.css"); diff --git a/res/themes/dark/css/dark.pcss b/res/themes/dark/css/dark.pcss index 51262598be..b81a2793f0 100644 --- a/res/themes/dark/css/dark.pcss +++ b/res/themes/dark/css/dark.pcss @@ -5,5 +5,6 @@ @import "_dark.pcss"; @import "../../light/css/_mods.pcss"; @import "../../../../res/css/_components.pcss"; +@import "../../../../res/css/_compound.pcss"; @import url("highlight.js/styles/atom-one-dark.min.css"); @import url("github-markdown-css/github-markdown-dark.css"); diff --git a/res/themes/legacy-dark/css/legacy-dark.pcss b/res/themes/legacy-dark/css/legacy-dark.pcss index ffb7e8d0aa..240175c9d1 100644 --- a/res/themes/legacy-dark/css/legacy-dark.pcss +++ b/res/themes/legacy-dark/css/legacy-dark.pcss @@ -4,5 +4,6 @@ @import "../../legacy-light/css/_legacy-light.pcss"; @import "_legacy-dark.pcss"; @import "../../../../res/css/_components.pcss"; +@import "../../../../res/css/_compound.pcss"; @import url("highlight.js/styles/atom-one-dark.min.css"); @import url("github-markdown-css/github-markdown-dark.css"); diff --git a/res/themes/legacy-light/css/legacy-light.pcss b/res/themes/legacy-light/css/legacy-light.pcss index 4b3905a1f9..7e42d75bfc 100644 --- a/res/themes/legacy-light/css/legacy-light.pcss +++ b/res/themes/legacy-light/css/legacy-light.pcss @@ -3,5 +3,6 @@ @import "_fonts.pcss"; @import "_legacy-light.pcss"; @import "../../../../res/css/_components.pcss"; +@import "../../../../res/css/_compound.pcss"; @import url("highlight.js/styles/atom-one-light.min.css"); @import url("github-markdown-css/github-markdown-light.css"); diff --git a/res/themes/light-custom/css/light-custom.pcss b/res/themes/light-custom/css/light-custom.pcss index 0bf3bd9ba2..d58df8e68f 100644 --- a/res/themes/light-custom/css/light-custom.pcss +++ b/res/themes/light-custom/css/light-custom.pcss @@ -4,4 +4,5 @@ @import "../../legacy-light/css/_legacy-light.pcss"; @import "_custom.pcss"; @import "../../../../res/css/_components.pcss"; +@import "../../../../res/css/_compound.pcss"; @import url("github-markdown-css/github-markdown-light.css"); diff --git a/res/themes/light-high-contrast/css/light-high-contrast.pcss b/res/themes/light-high-contrast/css/light-high-contrast.pcss index a843809e51..2556c2c4f5 100644 --- a/res/themes/light-high-contrast/css/light-high-contrast.pcss +++ b/res/themes/light-high-contrast/css/light-high-contrast.pcss @@ -5,5 +5,6 @@ @import "_light-high-contrast.pcss"; @import "../../light/css/_mods.pcss"; @import "../../../../res/css/_components.pcss"; +@import "../../../../res/css/_compound.pcss"; @import url("highlight.js/styles/atom-one-light.min.css"); @import url("github-markdown-css/github-markdown-light.css"); diff --git a/res/themes/light/css/light.pcss b/res/themes/light/css/light.pcss index d3264e491e..3fd90482f1 100644 --- a/res/themes/light/css/light.pcss +++ b/res/themes/light/css/light.pcss @@ -4,5 +4,6 @@ @import "_light.pcss"; @import "_mods.pcss"; @import "../../../../res/css/_components.pcss"; +@import "../../../../res/css/_compound.pcss"; @import url("highlight.js/styles/atom-one-light.min.css"); @import url("github-markdown-css/github-markdown-light.css");