diff --git a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png index aeecf52e6ab8..6da0eb5ae52e 100644 Binary files a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png and b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png differ diff --git a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png index 663505b4c512..ca2c3b7fbc73 100644 Binary files a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png and b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png differ diff --git a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-with-user-pill-linux.png b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-with-user-pill-linux.png index 998d423690fd..cdaa1f7648a3 100644 Binary files a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-with-user-pill-linux.png and b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-with-user-pill-linux.png differ diff --git a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-without-user-linux.png b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-without-user-linux.png index d06d9e816481..5ae427aff7d8 100644 Binary files a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-without-user-linux.png and b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-without-user-linux.png differ diff --git a/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png b/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png index 67f9435c6de0..c4bfae65df8e 100644 Binary files a/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png and b/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png differ diff --git a/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png b/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png index 73deb5b9293d..760a24e1a5f7 100644 Binary files a/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png and b/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png differ diff --git a/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png b/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png index d5348395c803..355113caf92b 100644 Binary files a/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png and b/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png differ diff --git a/playwright/snapshots/register/register.spec.ts/email-prompt-linux.png b/playwright/snapshots/register/register.spec.ts/email-prompt-linux.png index 664e7ac85e7f..7c7cf626741a 100644 Binary files a/playwright/snapshots/register/register.spec.ts/email-prompt-linux.png and b/playwright/snapshots/register/register.spec.ts/email-prompt-linux.png differ diff --git a/playwright/snapshots/register/register.spec.ts/server-picker-linux.png b/playwright/snapshots/register/register.spec.ts/server-picker-linux.png index d54710f6f3be..a78a2492d8ec 100644 Binary files a/playwright/snapshots/register/register.spec.ts/server-picker-linux.png and b/playwright/snapshots/register/register.spec.ts/server-picker-linux.png differ diff --git a/playwright/snapshots/room/room-header.spec.ts/room-header-highlighted-linux.png b/playwright/snapshots/room/room-header.spec.ts/room-header-highlighted-linux.png index 6d6ea59ae830..5fa24a887f88 100644 Binary files a/playwright/snapshots/room/room-header.spec.ts/room-header-highlighted-linux.png and b/playwright/snapshots/room/room-header.spec.ts/room-header-highlighted-linux.png differ diff --git a/playwright/snapshots/room/room-header.spec.ts/room-header-with-apps-button-not-highlighted-linux.png b/playwright/snapshots/room/room-header.spec.ts/room-header-with-apps-button-not-highlighted-linux.png index ad2bf20e9468..84eb8fcccca2 100644 Binary files a/playwright/snapshots/room/room-header.spec.ts/room-header-with-apps-button-not-highlighted-linux.png and b/playwright/snapshots/room/room-header.spec.ts/room-header-with-apps-button-not-highlighted-linux.png differ diff --git a/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png index 921eae804943..4b98e4915097 100644 Binary files a/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png differ diff --git a/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png b/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png index 6bc792df906d..9af7f6b5becc 100644 Binary files a/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png and b/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png differ diff --git a/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png b/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png index fd27088c04e1..0ab28ef59752 100644 Binary files a/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png and b/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png differ diff --git a/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png b/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png index bdd8e9153a0d..b731393ef360 100644 Binary files a/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png and b/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png differ diff --git a/playwright/snapshots/settings/security-user-settings-tab.spec.ts/Security-user-settings-tab-with-posthog-enable-b5d89-csLearnMoreDialog-should-be-rendered-properly-1-linux.png b/playwright/snapshots/settings/security-user-settings-tab.spec.ts/Security-user-settings-tab-with-posthog-enable-b5d89-csLearnMoreDialog-should-be-rendered-properly-1-linux.png index b853732b5319..d3cb7125cd0f 100644 Binary files a/playwright/snapshots/settings/security-user-settings-tab.spec.ts/Security-user-settings-tab-with-posthog-enable-b5d89-csLearnMoreDialog-should-be-rendered-properly-1-linux.png and b/playwright/snapshots/settings/security-user-settings-tab.spec.ts/Security-user-settings-tab-with-posthog-enable-b5d89-csLearnMoreDialog-should-be-rendered-properly-1-linux.png differ diff --git a/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png b/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png index 498fb8f044bd..b5c6e1ab6b54 100644 Binary files a/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png and b/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png index ad9e8c7a8322..421a9e017035 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png index 35d4bfe8f451..5481f5028832 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png index ec24ef90aa5c..ef6a8701f347 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png index 5ca3f3f50ffd..8f8986e2c5c2 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png index ee983ee3a561..7155942a7ce1 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png index fbee0bb1de3b..43bf819612db 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png index 80359800e724..fb030376951c 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png index cdab9fe05400..775357016033 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png index 07e319522f1e..5786d985638f 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png index 9c695fe077cb..18db64df9bf6 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png index 69d40e90160f..c5683bef9dac 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png index 899e7079afed..740e246a996a 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png index 0697e7813af1..a918fec8e92f 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png index 8b8d4d9fb54f..29ca87084a8b 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png index 5188d7316350..acdf1c492040 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png index 5ca3f3f50ffd..8f8986e2c5c2 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png index 9cdcc4a3b71b..988246a344ca 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png index e4d589c568ae..bc048242ce1b 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png index 0bba20ad522f..85edc6589edf 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png index 670266b413d8..90fc5dc0f96b 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png differ diff --git a/playwright/snapshots/user-onboarding/user-onboarding-new.spec.ts/User-Onboarding-new-user-app-download-dialog-1-linux.png b/playwright/snapshots/user-onboarding/user-onboarding-new.spec.ts/User-Onboarding-new-user-app-download-dialog-1-linux.png index 5be54c31582b..41922bb01d29 100644 Binary files a/playwright/snapshots/user-onboarding/user-onboarding-new.spec.ts/User-Onboarding-new-user-app-download-dialog-1-linux.png and b/playwright/snapshots/user-onboarding/user-onboarding-new.spec.ts/User-Onboarding-new-user-app-download-dialog-1-linux.png differ diff --git a/res/css/_common.pcss b/res/css/_common.pcss index a322e3f45b11..ef455b6aad3d 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -338,7 +338,7 @@ legend { padding: 24px; max-height: 80%; box-shadow: 2px 15px 30px 0 $dialog-shadow-color; - border-radius: 8px; + border-radius: 12px; overflow-y: auto; .mx_Dialog_staticWrapper & { @@ -632,7 +632,7 @@ legend { .mx_Dialog button.warning:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]), .mx_Dialog input[type="submit"].warning { - border: solid 1px var(--cpd-color-border-critical-primary); + border: solid 1px var(--cpd-color-border-critical-subtle); color: var(--cpd-color-text-critical-primary); } diff --git a/res/css/views/elements/_Pill.pcss b/res/css/views/elements/_Pill.pcss index c697b63de504..61cd53b14ee6 100644 --- a/res/css/views/elements/_Pill.pcss +++ b/res/css/views/elements/_Pill.pcss @@ -26,7 +26,7 @@ limitations under the License. overflow: hidden; cursor: pointer; - color: $accent-fg-color !important; /* To override .markdown-body */ + color: var(--cpd-color-text-on-solid-primary) !important; /* To override .markdown-body */ background-color: $pill-bg-color !important; /* To override .markdown-body */ > * { @@ -35,7 +35,7 @@ limitations under the License. &.mx_UserPill_me, &.mx_AtRoomPill { - background-color: $alert !important; /* To override .markdown-body */ + background-color: var(--cpd-color-bg-critical-primary) !important; /* To override .markdown-body */ } &:hover { @@ -43,12 +43,14 @@ limitations under the License. } &.mx_UserPill_me:hover { - background-color: #ff6b75 !important; /* To override .markdown-body | same on both themes */ + background-color: var( + --cpd-color-bg-critical-hovered + ) !important; /* To override .markdown-body | same on both themes */ } /* We don't want to indicate clickability */ &.mx_AtRoomPill:hover { - background-color: $alert !important; /* To override .markdown-body */ + background-color: var(--cpd-color-bg-critical-primary) !important; /* To override .markdown-body */ cursor: unset; } diff --git a/res/css/views/elements/_Tooltip.pcss b/res/css/views/elements/_Tooltip.pcss index d35e55db095d..54a16a0cbf0f 100644 --- a/res/css/views/elements/_Tooltip.pcss +++ b/res/css/views/elements/_Tooltip.pcss @@ -71,8 +71,8 @@ limitations under the License. max-width: 300px; word-break: break-word; - background-color: #21262c; /* Same on both themes */ - color: $accent-fg-color; + background-color: var(--cpd-color-alpha-gray-1400); + color: var(--cpd-color-text-on-solid-primary); border: 0; text-align: center; diff --git a/res/css/views/messages/_DateSeparator.pcss b/res/css/views/messages/_DateSeparator.pcss index de0cd668329a..39cffc0f3323 100644 --- a/res/css/views/messages/_DateSeparator.pcss +++ b/res/css/views/messages/_DateSeparator.pcss @@ -39,5 +39,5 @@ limitations under the License. mask-size: contain; mask-repeat: no-repeat; mask-image: url("$(res)/img/feather-customised/chevron-down.svg"); - background-color: $tertiary-content; + background-color: var(--cpd-color-icon-secondary); } diff --git a/res/css/views/messages/_TimelineSeparator.pcss b/res/css/views/messages/_TimelineSeparator.pcss index 40ca0967a665..d8550179a6e7 100644 --- a/res/css/views/messages/_TimelineSeparator.pcss +++ b/res/css/views/messages/_TimelineSeparator.pcss @@ -20,12 +20,12 @@ limitations under the License. display: flex; align-items: center; font: var(--cpd-font-body-md-regular); - color: $roomtopic-color; + color: var(--cpd-color-text-secondary); } .mx_TimelineSeparator > hr { flex: 1 1 0; height: 0; border: none; - border-bottom: 1px solid $menu-selected-color; + border-bottom: 1px solid var(--cpd-color-gray-400); } diff --git a/res/css/views/rooms/_BasicMessageComposer.pcss b/res/css/views/rooms/_BasicMessageComposer.pcss index e09eaa5a04f7..3add788b1295 100644 --- a/res/css/views/rooms/_BasicMessageComposer.pcss +++ b/res/css/views/rooms/_BasicMessageComposer.pcss @@ -20,7 +20,7 @@ limitations under the License. .mx_BasicMessageComposer_inputEmpty > :first-child::before { content: var(--placeholder); - opacity: 0.333; + color: var(--cpd-color-text-secondary); width: 0; height: 0; overflow: visible; diff --git a/res/css/views/rooms/_E2EIcon.pcss b/res/css/views/rooms/_E2EIcon.pcss index 18ff3f28f927..d6c184f103ce 100644 --- a/res/css/views/rooms/_E2EIcon.pcss +++ b/res/css/views/rooms/_E2EIcon.pcss @@ -37,15 +37,6 @@ limitations under the License. } } -/* white infill for the transparency */ -.mx_E2EIcon::before { - background-color: #ffffff; - mask-image: url("$(res)/img/e2e/normal.svg"); - mask-repeat: no-repeat; - mask-position: center; - mask-size: 80%; -} - /* transparent-looking border surrounding the shield for when overlain over avatars */ .mx_E2EIcon_bordered { mask-image: url("$(res)/img/e2e/normal.svg"); @@ -59,6 +50,7 @@ limitations under the License. /* shrink the infill of the badge */ &::before { mask-size: 60%; + background: var(--cpd-color-bg-canvas-default); } } @@ -69,7 +61,7 @@ limitations under the License. .mx_E2EIcon_normal::after { mask-image: url("$(res)/img/e2e/normal.svg"); - background-color: $header-panel-text-primary-color; + background-color: var(--cpd-color-icon-tertiary); } .mx_E2EIcon_verified::after { diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 4e11f64e7739..ad88a7c7863f 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -53,7 +53,7 @@ $left-gutter: 64px; height: 16px; &::before { - background-color: $tertiary-content; + background-color: var(--cpd-color-icon-tertiary); mask-repeat: no-repeat; mask-position: center; mask-size: 16px; @@ -858,12 +858,12 @@ $left-gutter: 64px; &.mx_EventTile_e2eIcon_normal::after { mask-image: url("$(res)/img/e2e/normal.svg"); /* regular shield */ - background-color: $header-panel-text-primary-color; /* grey */ + background-color: var(--cpd-color-icon-tertiary); /* grey */ } &.mx_EventTile_e2eIcon_decryption_failure::after { mask-image: url("$(res)/img/e2e/decryption-failure.svg"); /* key in a circle */ - background-color: $secondary-content; + background-color: var(--cpd-color-icon-tertiary); } } diff --git a/res/css/views/rooms/_JumpToBottomButton.pcss b/res/css/views/rooms/_JumpToBottomButton.pcss index 0a760e2cd697..5bf2c0c0bafe 100644 --- a/res/css/views/rooms/_JumpToBottomButton.pcss +++ b/res/css/views/rooms/_JumpToBottomButton.pcss @@ -39,13 +39,12 @@ limitations under the License. /* with text-align in parent */ display: inline-block; padding: 0 4px; - color: $accent-fg-color; - background-color: $muted-fg-color; + color: var(--cpd-color-text-on-solid-primary); + background-color: var(--cpd-color-icon-secondary); } .mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge { - color: $secondary-accent-color; - background-color: $alert; + background-color: var(--cpd-color-icon-critical-primary); } .mx_JumpToBottomButton_scrollDown { @@ -55,7 +54,7 @@ limitations under the License. border-radius: 19px; box-sizing: border-box; background: $background; - border: 1.3px solid $muted-fg-color; + border: 1.3px solid var(--cpd-color-icon-tertiary); cursor: pointer; } @@ -68,5 +67,5 @@ limitations under the License. mask-size: 20px; mask-position: center 6px; transform: rotate(180deg); - background: $muted-fg-color; + background: var(--cpd-color-icon-tertiary); } diff --git a/res/css/views/rooms/_LegacyRoomHeader.pcss b/res/css/views/rooms/_LegacyRoomHeader.pcss index 9994f4223ea3..8ca2dc9fb1b7 100644 --- a/res/css/views/rooms/_LegacyRoomHeader.pcss +++ b/res/css/views/rooms/_LegacyRoomHeader.pcss @@ -185,10 +185,10 @@ limitations under the License. } &:hover { - background: $accent-300; + background: var(--cpd-color-bg-subtle-primary); &::before { - background-color: $accent; + background-color: var(--cpd-color-icon-primary); } } } @@ -213,8 +213,8 @@ limitations under the License. margin: 4px; &.mx_Indicator_highlight { - background: $alert; - box-shadow: $alert; + background: var(--cpd-color-icon-critical-primary); + box-shadow: var(--cpd-color-icon-critical-primary); } &.mx_Indicator_notification { @@ -223,8 +223,8 @@ limitations under the License. } &.mx_Indicator_activity { - background: $primary-content; - box-shadow: $primary-content; + background: var(--cpd-color-icon-primary); + box-shadow: var(--cpd-color-icon-primary); } } @@ -234,10 +234,9 @@ limitations under the License. } } -.mx_LegacyRoomHeader_button--highlight, -.mx_LegacyRoomHeader_button:hover { +.mx_LegacyRoomHeader_button--highlight { &::before { - background-color: $accent !important; + background-color: var(--cpd-color-icon-primary) !important; } } diff --git a/res/css/views/rooms/_MessageComposer.pcss b/res/css/views/rooms/_MessageComposer.pcss index 0fd72575b01b..2c8fe592c42a 100644 --- a/res/css/views/rooms/_MessageComposer.pcss +++ b/res/css/views/rooms/_MessageComposer.pcss @@ -191,7 +191,7 @@ limitations under the License. } .mx_MessageComposer_button { - @mixin composerButton 50%, var(--cpd-color-icon-secondary), var(--cpd-color-bg-subtle-secondary); + @mixin composerButton 50%, var(--cpd-color-icon-primary), var(--cpd-color-bg-subtle-primary); &:last-child { margin-right: auto; diff --git a/res/css/views/rooms/_NotificationBadge.pcss b/res/css/views/rooms/_NotificationBadge.pcss index 41b1e0f530c7..6ffe7d9da711 100644 --- a/res/css/views/rooms/_NotificationBadge.pcss +++ b/res/css/views/rooms/_NotificationBadge.pcss @@ -39,7 +39,7 @@ limitations under the License. width: 8px; height: 8px; border-radius: 8px; - background-color: var(--cpd-color-text-primary); + background-color: var(--cpd-color-icon-primary); .mx_NotificationBadge_count { display: none; @@ -86,7 +86,8 @@ limitations under the License. .mx_NotificationBadge_count { font-size: $font-10px; line-height: $font-14px; - color: #fff; /* TODO: Variable */ + font-weight: var(--cpd-font-weight-semibold); + color: var(--cpd-color-text-on-solid-primary); } } } diff --git a/res/css/views/rooms/_RoomSublist.pcss b/res/css/views/rooms/_RoomSublist.pcss index 24898b89251f..0e9ad1a9bb43 100644 --- a/res/css/views/rooms/_RoomSublist.pcss +++ b/res/css/views/rooms/_RoomSublist.pcss @@ -118,7 +118,7 @@ limitations under the License. mask-position: center; mask-size: contain; mask-repeat: no-repeat; - background: $muted-fg-color; + background: var(--cpd-color-icon-secondary); } } @@ -167,7 +167,7 @@ limitations under the License. mask-position: center; mask-size: contain; mask-repeat: no-repeat; - background-color: $tertiary-content; + background-color: var(--cpd-color-icon-secondary); mask-image: url("$(res)/img/feather-customised/chevron-down.svg"); } diff --git a/res/css/views/rooms/_RoomTile.pcss b/res/css/views/rooms/_RoomTile.pcss index bf68e4035e44..decd1067b19e 100644 --- a/res/css/views/rooms/_RoomTile.pcss +++ b/res/css/views/rooms/_RoomTile.pcss @@ -131,7 +131,7 @@ limitations under the License. mask-position: center; mask-size: contain; mask-repeat: no-repeat; - background: $primary-content; + background: var(--cpd-color-icon-primary); } } diff --git a/res/css/views/rooms/_TopUnreadMessagesBar.pcss b/res/css/views/rooms/_TopUnreadMessagesBar.pcss index 9aa97561d77a..bd57f83f5d5d 100644 --- a/res/css/views/rooms/_TopUnreadMessagesBar.pcss +++ b/res/css/views/rooms/_TopUnreadMessagesBar.pcss @@ -40,7 +40,7 @@ limitations under the License. border-radius: 19px; box-sizing: border-box; background: $background; - border: 1.3px solid $muted-fg-color; + border: 1.3px solid var(--cpd-color-icon-tertiary); cursor: pointer; } @@ -53,7 +53,7 @@ limitations under the License. mask-repeat: no-repeat; mask-size: 20px; mask-position: center; - background: $muted-fg-color; + background: var(--cpd-color-icon-tertiary); } .mx_TopUnreadMessagesBar_markAsRead { @@ -61,7 +61,7 @@ limitations under the License. width: 18px; height: 18px; background: $background; - border: 1.3px solid $muted-fg-color; + border: 1.3px solid var(--cpd-color-icon-tertiary); border-radius: 10px; margin: 5px auto; } @@ -75,5 +75,5 @@ limitations under the License. mask-repeat: no-repeat; mask-size: 10px; mask-position: 4px 4px; - background: $muted-fg-color; + background: var(--cpd-color-icon-tertiary); } diff --git a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss index d4194052fecd..595a67b12509 100644 --- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss +++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss @@ -115,7 +115,7 @@ limitations under the License. max-width: 100%; overflow: hidden; - color: $accent-fg-color; + color: var(--cpd-color-text-on-solid-primary); background-color: $pill-bg-color; /* ...with the overrides from _BasicMessageComposer.pcss */ diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss index 93ebfa7cc2cf..6795d25c38b5 100644 --- a/res/themes/dark/css/_dark.pcss +++ b/res/themes/dark/css/_dark.pcss @@ -22,7 +22,7 @@ $separator: var(--cpd-color-alpha-gray-400); /* ******************** */ $roomlist-bg-color: rgba(38, 40, 45, 0.9); $roomsublist-skeleton-ui-bg: linear-gradient(180deg, $background 0%, #ffffff00 100%); -$roomtile-default-badge-bg-color: $muted-fg-color; +$roomtile-default-badge-bg-color: var(--cpd-color-icon-secondary); /* ******************** */ /** @@ -125,8 +125,8 @@ $roomheader-addroom-fg-color: $primary-content; /* Rich-text-editor */ /* ******************** */ -$pill-bg-color: $room-highlight-color; -$pill-hover-bg-color: #545a66; +$pill-bg-color: var(--cpd-color-gray-1000); +$pill-hover-bg-color: var(--cpd-color-gray-1100); /* ******************** */ /* Inputs */ @@ -150,7 +150,7 @@ $dialog-close-external-color: $primary-content; /* ******************** */ $system: var(--cpd-color-bg-subtle-secondary); $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%); -$roomtile-default-badge-bg-color: $input-darker-fg-color; +$roomtile-default-badge-bg-color: var(--cpd-color-icon-secondary); /* ******************** */ /* Tabbed views */ @@ -199,10 +199,9 @@ $voice-record-icon-color: $quaternary-content; /* Bubble tiles */ /* ******************** */ -$eventbubble-self-bg: #133a34; -$eventbubble-others-bg: #21262c; -$eventbubble-bg-hover: #1c2026; -$eventbubble-reply-color: #c1c6cd; +$eventbubble-self-bg: var(--cpd-color-green-300); +$eventbubble-others-bg: var(--cpd-color-gray-300); +$eventbubble-bg-hover: var(--cpd-color-bg-subtle-secondary); /* ******************** */ /* Lightbox */ diff --git a/res/themes/legacy-dark/css/_legacy-dark.pcss b/res/themes/legacy-dark/css/_legacy-dark.pcss index d9db8465831c..135e7de6a577 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.pcss +++ b/res/themes/legacy-dark/css/_legacy-dark.pcss @@ -28,8 +28,8 @@ $light-fg-color: $header-panel-text-secondary-color; /* used for focusing form controls */ $focus-bg-color: $room-highlight-color; -$pill-bg-color: $room-highlight-color; -$pill-hover-bg-color: #545a66; +$pill-bg-color: var(--cpd-color-gray-1000); +$pill-hover-bg-color: var(--cpd-color-gray-1100); /* informational plinth */ $info-plinth-bg-color: $header-panel-bg-color; @@ -221,7 +221,6 @@ $inlinecode-background-color: #2a3039; $eventbubble-self-bg: #14322e; $eventbubble-others-bg: $event-selected-color; $eventbubble-bg-hover: #1c2026; -$eventbubble-reply-color: #c1c6cd; /* Location sharing */ /* ******************** */ diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index 290027e5841a..83ca76d285bb 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -124,8 +124,8 @@ $rte-code-bg-color: rgba(0, 0, 0, 0.04); $header-panel-text-primary-color: #91a1c0; -$pill-bg-color: #aaa; -$pill-hover-bg-color: #ccc; +$pill-bg-color: var(--cpd-color-gray-1000); +$pill-hover-bg-color: var(--cpd-color-gray-1100); $topleftmenu-color: #212121; $roomheader-bg-color: $primary-bg-color; @@ -318,7 +318,6 @@ $inlinecode-background-color: $header-panel-bg-color; $eventbubble-self-bg: #f0fbf8; $eventbubble-others-bg: $system; $eventbubble-bg-hover: #fafbfd; -$eventbubble-reply-color: #c1c6cd; /* pinned events indicator */ $pinned-color: $tertiary-content; diff --git a/res/themes/light-custom/css/_custom.pcss b/res/themes/light-custom/css/_custom.pcss index ed345a28ec69..3b64d7a18e0a 100644 --- a/res/themes/light-custom/css/_custom.pcss +++ b/res/themes/light-custom/css/_custom.pcss @@ -118,7 +118,6 @@ $settings-grey-fg-color: $primary-content; $eventbubble-self-bg: var(--eventbubble-self-bg, $eventbubble-self-bg); $eventbubble-others-bg: var(--eventbubble-others-bg, $eventbubble-others-bg); $eventbubble-bg-hover: var(--eventbubble-bg-hover, $eventbubble-bg-hover); -$eventbubble-reply-color: var(--eventbubble-reply-color, $eventbubble-reply-color); $reaction-row-button-selected-bg-color: var( --reaction-row-button-selected-bg-color, 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 396b4946996c..04169db3936f 100644 --- a/res/themes/light-high-contrast/css/_light-high-contrast.pcss +++ b/res/themes/light-high-contrast/css/_light-high-contrast.pcss @@ -32,7 +32,6 @@ $message-action-bar-fg-color: $primary-content; $voice-record-stop-border-color: $quinary-content; $voice-record-icon-color: $tertiary-content; $appearance-tab-border-color: $input-darker-bg-color; -$eventbubble-reply-color: $quaternary-content; $roomtopic-color: $secondary-content; /** diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index 12cd95ab8562..50a25fcda4cf 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -159,8 +159,8 @@ $roomheader-addroom-fg-color: #5c6470; /* Rich-text-editor */ /* ******************** */ -$pill-bg-color: #aaa; -$pill-hover-bg-color: #ccc; +$pill-bg-color: var(--cpd-color-gray-1000); +$pill-hover-bg-color: var(--cpd-color-gray-1100); $rte-bg-color: #e9e9e9; $rte-code-bg-color: rgba(0, 0, 0, 0.04); /* ******************** */ @@ -206,13 +206,13 @@ $imagebody-giflabel-color: $accent-fg-color; /* ******************** */ $roomlist-bg-color: rgba(245, 245, 245, 0.9); $roomsublist-skeleton-ui-bg: linear-gradient(180deg, $background 0%, #ffffff00 100%); -$roomtile-default-badge-bg-color: $muted-fg-color; +$roomtile-default-badge-bg-color: var(--cpd-color-icon-secondary); /* ******************** */ /* e2e */ /* ******************** */ -$e2e-verified-color: var(--cpd-color-green-900); -$e2e-warning-color: var(--cpd-color-red-900); +$e2e-verified-color: var(--cpd-color-icon-success-primary); +$e2e-warning-color: var(--cpd-color-icon-critical-primary); $e2e-verified-color-light: var(--cpd-color-green-300); $e2e-warning-color-light: var(--cpd-color-red-300); /* ******************** */ @@ -275,10 +275,9 @@ $voice-record-icon-color: $tertiary-content; /* Bubble tiles */ /* ******************** */ -$eventbubble-self-bg: #e7f8f3; -$eventbubble-others-bg: #e8edf4; -$eventbubble-bg-hover: #f6f7f8; -$eventbubble-reply-color: $quaternary-content; +$eventbubble-self-bg: var(--cpd-color-green-300); +$eventbubble-others-bg: var(--cpd-color-gray-300); +$eventbubble-bg-hover: var(--cpd-color-bg-subtle-secondary); /* ******************** */ /* Lightbox */ diff --git a/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx b/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx index 3d114abc30e0..e85bfd704f1a 100644 --- a/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx +++ b/src/components/views/dialogs/security/AccessSecretStorageDialog.tsx @@ -430,7 +430,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent { buttonCaption = _t("encryption|verify_toast_title"); } actions.push( - + {buttonCaption} , ); @@ -243,7 +243,7 @@ export default class CrossSigningPanel extends React.PureComponent<{}, IState> { if (keysExistAnywhere) { actions.push( - + {_t("action|reset")} , ); diff --git a/src/components/views/settings/CryptographyPanel.tsx b/src/components/views/settings/CryptographyPanel.tsx index 13151d2f019c..15ead0dec734 100644 --- a/src/components/views/settings/CryptographyPanel.tsx +++ b/src/components/views/settings/CryptographyPanel.tsx @@ -51,10 +51,10 @@ export default class CryptographyPanel extends React.Component { if (client.isCryptoEnabled()) { importExportButtons = (
- + {_t("settings|security|export_megolm_keys")} - + {_t("settings|security|import_megolm_keys")}
diff --git a/src/components/views/settings/SecureBackupPanel.tsx b/src/components/views/settings/SecureBackupPanel.tsx index 4a379508c761..520379cc7b02 100644 --- a/src/components/views/settings/SecureBackupPanel.tsx +++ b/src/components/views/settings/SecureBackupPanel.tsx @@ -328,14 +328,14 @@ export default class SecureBackupPanel extends React.PureComponent<{}, IState> { ); actions.push( - + {restoreButtonCaption} , ); if (!isSecureBackupRequired(MatrixClientPeg.safeGet())) { actions.push( - + {_t("settings|security|delete_backup")} , ); @@ -350,7 +350,7 @@ export default class SecureBackupPanel extends React.PureComponent<{}, IState> { ); actions.push( - + {_t("encryption|setup_secure_backup|title")} , ); @@ -358,7 +358,7 @@ export default class SecureBackupPanel extends React.PureComponent<{}, IState> { if (secretStorageKeyInAccount) { actions.push( - + {_t("action|reset")} , ); diff --git a/src/components/views/settings/UpdateCheckButton.tsx b/src/components/views/settings/UpdateCheckButton.tsx index d0654a743e68..9793999bd871 100644 --- a/src/components/views/settings/UpdateCheckButton.tsx +++ b/src/components/views/settings/UpdateCheckButton.tsx @@ -85,7 +85,7 @@ const UpdateCheckButton: React.FC = () => { return ( - + {_t("update|check_action")} {suffix} diff --git a/src/components/views/settings/account/EmailAddresses.tsx b/src/components/views/settings/account/EmailAddresses.tsx index ef98707c1bf0..07ed3edb8164 100644 --- a/src/components/views/settings/account/EmailAddresses.tsx +++ b/src/components/views/settings/account/EmailAddresses.tsx @@ -264,7 +264,7 @@ export default class EmailAddresses extends React.Component { }); let addButton = ( - + {_t("action|add")} ); @@ -274,7 +274,7 @@ export default class EmailAddresses extends React.Component {
{_t("settings|general|add_email_instructions")}
{_t("action|continue")} diff --git a/src/components/views/settings/account/PhoneNumbers.tsx b/src/components/views/settings/account/PhoneNumbers.tsx index 27c2bdf104c9..590c1f5b7dc5 100644 --- a/src/components/views/settings/account/PhoneNumbers.tsx +++ b/src/components/views/settings/account/PhoneNumbers.tsx @@ -270,7 +270,7 @@ export default class PhoneNumbers extends React.Component { }); let addVerifySection = ( - + {_t("action|add")} ); @@ -294,7 +294,7 @@ export default class PhoneNumbers extends React.Component { /> @@ -397,7 +397,7 @@ export default class GeneralUserSettingsTab extends React.Component } > - + {_t("bug_reporting|submit_debug_logs")} @@ -316,7 +316,7 @@ export default class HelpUserSettingsTab extends React.Component - + {_t("setting|help_about|clear_cache_reload")} diff --git a/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx b/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx index 74511dfa4ab2..6d32f683b7a3 100644 --- a/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx @@ -256,14 +256,14 @@ export default class SecurityUserSettingsTab extends React.Component {_t("settings|security|bulk_options_accept_all_invites", { invitedRooms: invitedRoomIds.size })} {_t("settings|security|bulk_options_reject_all_invites", { invitedRooms: invitedRoomIds.size })}