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 300b7e011a0..b4c72b67335 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 58a97c40b74..2fc33b1f0b6 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 c4b69dd6e65..a4c053e7a7f 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/room/room-header.spec.ts/room-header-highlighted-linux.png b/playwright/snapshots/room/room-header.spec.ts/room-header-highlighted-linux.png index 6d6ea59ae83..5fa24a887f8 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 ad2bf20e946..84eb8fcccca 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/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 747bf1b5d12..7ef5b405438 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 8ea537d424e..5703f384498 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 2ee588be13a..0a3d265a601 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 27425c63262..0453bf932a9 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 02fec4dee6d..077ecbf7176 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 889906100aa..7155942a7ce 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 fbee0bb1de3..43bf819612d 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 80359800e72..fb030376951 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 cdab9fe0540..77535701603 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 629435b6392..194ecd07fbc 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 497fd62e781..2b990bb3b86 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 3255574339b..294cd3ec7ab 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 c9feb4ef4a8..f0064c81e19 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 8d5fd4adcbc..001ac64f2a6 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 83d022391e8..f7a276d2f72 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 431953837a9..de056e0fa56 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 02fec4dee6d..077ecbf7176 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 8d1a239a1d7..e1cd5ab19c3 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 502d4e64df9..4fb29024560 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 d221eea7d0e..ceddab3312b 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 b9aa65ab583..5fba124a929 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/res/css/_common.pcss b/res/css/_common.pcss index b750de0213c..5ecf6c4e946 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -646,7 +646,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 c697b63de50..61cd53b14ee 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 d35e55db095..54a16a0cbf0 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 de0cd668329..39cffc0f332 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 40ca0967a66..d8550179a6e 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 e09eaa5a04f..3add788b129 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 18ff3f28f92..d6c184f103c 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 4e11f64e773..ad88a7c7863 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 0a760e2cd69..5bf2c0c0baf 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 8a92f6e5865..ce088f7deba 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 0fd72575b01..2c8fe592c42 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 41b1e0f530c..6ffe7d9da71 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 24898b89251..0e9ad1a9bb4 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 bf68e4035e4..decd1067b19 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 d26c2b5bfe8..6c25ff8e749 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 d4194052fec..595a67b1250 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 953b7c47303..c3760c2981e 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 f01716a91f2..a1c021fa38a 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; @@ -217,7 +217,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 8563b3c4696..bfdaae6b67b 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -123,8 +123,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; @@ -311,7 +311,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 140fec60c71..9a4523d605f 100644 --- a/res/themes/light-custom/css/_custom.pcss +++ b/res/themes/light-custom/css/_custom.pcss @@ -116,7 +116,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 6bfd5b8fd4f..2ba97c5a722 100644 --- a/res/themes/light-high-contrast/css/_light-high-contrast.pcss +++ b/res/themes/light-high-contrast/css/_light-high-contrast.pcss @@ -31,7 +31,6 @@ $button-secondary-bg-color: $accent-fg-color; $message-action-bar-fg-color: $primary-content; $voice-record-stop-border-color: $quinary-content; $voice-record-icon-color: $tertiary-content; -$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 adbb7e97ed0..cc34276994d 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); /* ******************** */ @@ -205,13 +205,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); /* ******************** */ @@ -274,10 +274,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 da41011607f..3d8447079ae 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