From 38d24f164a4617a8a2513a66aa0c92647582aac4 Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 12 Jul 2023 18:46:49 +0100 Subject: [PATCH] Compound color pass (#11079) * Integrate compound design tokens The icons should not be included in this repo, and should live in the compound design token repo, but for simplicity sake at this phase of the integration they will be added here * Pareto color pass on the light theme * bugfixes in the light color pass * Compound color pass dark theme * Compound color pass high contrast * Fix typo * fix tooltip * Fix PR feedback * fix composer button mixin * Normalise some of the auth page colors * Update based on figma feedback * lintfix * regenerate theme index * Fix cypress tests Removed the CSS assertions in the room header as it overlaps with the Percy snapshot * fix more e2e tests * update colors based on feedback * fix color pass * Fix theme overrides * Restore -transparent * fix color mapping * Final colour pass update * Do not consume compound colors directly * rethemedex * Update pass * Final tweaks * a11y pass * scope opacity to checkbox and not label * Add missing customisations var for theming * lintfix * remove unwanted test --- cypress/e2e/room/room-header.spec.ts | 12 +- .../appearance-user-settings-tab.spec.ts | 27 ---- cypress/e2e/threads/threads.spec.ts | 20 --- res/css/_common.pcss | 18 ++- .../context_menus/_KebabContextMenu.pcss | 2 +- .../devices/_DeviceExpandDetailsButton.pcss | 2 +- .../settings/devices/_DeviceSecurityCard.pcss | 2 +- .../settings/devices/_DeviceTypeIcon.pcss | 2 +- .../devices/_FilteredDeviceListHeader.pcss | 2 +- res/css/compound/_Icon.pcss | 2 +- res/css/structures/_FilePanel.pcss | 3 +- res/css/structures/_LeftPanel.pcss | 7 - res/css/structures/_RoomView.pcss | 4 +- res/css/structures/_SpacePanel.pcss | 2 +- res/css/structures/_UserMenu.pcss | 2 +- res/css/views/beta/_BetaCard.pcss | 2 +- .../context_menus/_IconizedContextMenu.pcss | 2 +- .../context_menus/_MessageContextMenu.pcss | 2 +- res/css/views/dialogs/_PollCreateDialog.pcss | 2 +- res/css/views/elements/_AccessibleButton.pcss | 1 - .../elements/_GenericEventListSummary.pcss | 2 + res/css/views/elements/_SSOButtons.pcss | 2 +- res/css/views/elements/_StyledCheckbox.pcss | 8 +- .../views/elements/_StyledRadioButton.pcss | 2 +- res/css/views/elements/_ToggleSwitch.pcss | 6 +- .../views/messages/_DisambiguatedProfile.pcss | 5 +- .../views/messages/_ReactionsRowButton.pcss | 10 +- res/css/views/messages/_RedactedBody.pcss | 4 +- res/css/views/messages/_TextualEvent.pcss | 1 - res/css/views/right_panel/_BaseCard.pcss | 4 +- res/css/views/right_panel/_ThreadPanel.pcss | 2 +- res/css/views/right_panel/_UserInfo.pcss | 2 +- res/css/views/rooms/_EditMessageComposer.pcss | 2 +- res/css/views/rooms/_EmojiButton.pcss | 4 +- res/css/views/rooms/_EntityTile.pcss | 2 +- res/css/views/rooms/_EventTile.pcss | 8 +- res/css/views/rooms/_MessageComposer.pcss | 10 +- res/css/views/rooms/_RoomHeader.pcss | 22 +-- res/css/views/rooms/_RoomSublist.pcss | 2 +- res/css/views/rooms/_ThreadSummary.pcss | 6 +- .../_EditWysiwygComposer.pcss | 2 +- .../components/_FormattingButtons.pcss | 4 +- res/css/views/settings/_FontScalingPanel.pcss | 2 +- res/css/views/settings/_KeyboardShortcut.pcss | 2 +- res/css/views/settings/_LayoutSwitcher.pcss | 3 +- res/css/views/settings/_ThemeChoicePanel.pcss | 2 +- res/css/views/voip/_CallView.pcss | 2 +- res/themes/dark/css/_dark.pcss | 90 ++++++++---- res/themes/legacy-dark/css/_legacy-dark.pcss | 48 ++++-- .../legacy-light/css/_legacy-light.pcss | 76 ++++++---- res/themes/light-custom/css/_custom.pcss | 37 +++-- .../css/_light-high-contrast.pcss | 59 +++++--- res/themes/light/css/_light.pcss | 139 +++++++++++------- res/themes/light/css/light.pcss | 2 + 54 files changed, 393 insertions(+), 295 deletions(-) diff --git a/cypress/e2e/room/room-header.spec.ts b/cypress/e2e/room/room-header.spec.ts index fc20dfbebe..e537c1471d 100644 --- a/cypress/e2e/room/room-header.spec.ts +++ b/cypress/e2e/room/room-header.spec.ts @@ -116,17 +116,7 @@ describe("Room Header", () => { const buttonsHighlighted = ["Threads", "Notifications", "Room info"]; for (const name of buttonsHighlighted) { - cy.findByRole("button", { name: name }) - .click() // Highlight the button - .then(($btn) => { - // Note it is not possible to get CSS values of a pseudo class with "have.css". - const color = $btn[0].ownerDocument.defaultView // get window reference from element - .getComputedStyle($btn[0], "before") // get the pseudo selector - .getPropertyValue("background-color"); // get "background-color" value - - // Assert the value is equal to $accent == hex #0dbd8b == rgba(13, 189, 139) - expect(color).to.eq("rgb(13, 189, 139)"); - }); + cy.findByRole("button", { name: name }).click(); // Highlight the button } }); diff --git a/cypress/e2e/settings/appearance-user-settings-tab.spec.ts b/cypress/e2e/settings/appearance-user-settings-tab.spec.ts index e57f00a139..c9c822acde 100644 --- a/cypress/e2e/settings/appearance-user-settings-tab.spec.ts +++ b/cypress/e2e/settings/appearance-user-settings-tab.spec.ts @@ -299,32 +299,5 @@ describe("Appearance user settings tab", () => { cy.findByLabelText("Use high contrast").should("not.exist"); }, ); - - it("should support enabling the high contast theme", () => { - cy.createRoom({ name: "Test Room" }).viewRoomByName("Test Room"); - - cy.get(".mx_GenericEventListSummary").within(() => { - // Assert that $primary-content is applied to GELS summary on the light theme - // $primary-content on the light theme = #17191c = rgb(23, 25, 28) - cy.get(".mx_TextualEvent.mx_GenericEventListSummary_summary") - .should("have.css", "color", "rgb(23, 25, 28)") - .should("have.css", "opacity", "0.5"); - }); - - cy.openUserSettings("Appearance") - .findByTestId("mx_ThemeChoicePanel") - .findByLabelText("Use high contrast") - .click({ force: true }); // force click because the size of the checkbox is zero - - cy.closeDialog(); - - cy.get(".mx_GenericEventListSummary").within(() => { - // Assert that $secondary-content is specified for GELS summary on the high contrast theme - // $secondary-content on the high contrast theme = #5e6266 = rgb(94, 98, 102) - cy.get(".mx_TextualEvent.mx_GenericEventListSummary_summary") - .should("have.css", "color", "rgb(94, 98, 102)") - .should("have.css", "opacity", "1"); - }); - }); }); }); diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index 335c87bc01..a2dc7b02df 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -64,9 +64,6 @@ describe("Threads", () => { "Hello there. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt " + "ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi"; - // --MessageTimestamp-color = #acacac = rgb(172, 172, 172) - // See: _MessageTimestamp.pcss - const MessageTimestampColor = "rgb(172, 172, 172)"; const ThreadViewGroupSpacingStart = "56px"; // --ThreadView_group_spacing-start // Exclude timestamp and read marker from snapshots const percyCSS = ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker { visibility: hidden !important; }"; @@ -75,13 +72,6 @@ describe("Threads", () => { // User sends message cy.findByRole("textbox", { name: "Send a message…" }).type("Hello Mr. Bot{enter}"); - // Check the colour of timestamp on the main timeline - cy.get(".mx_EventTile_last .mx_EventTile_line .mx_MessageTimestamp").should( - "have.css", - "color", - MessageTimestampColor, - ); - // Wait for message to send, get its ID and save as @threadId cy.contains(".mx_EventTile[data-scroll-tokens]", "Hello Mr. Bot") .invoke("attr", "data-scroll-tokens") @@ -151,13 +141,6 @@ describe("Threads", () => { cy.get(".mx_ThreadView").within(() => { // User responds in thread cy.findByRole("textbox", { name: "Send a message…" }).type("Test{enter}"); - - // Check the colour of timestamp on EventTile in a thread (mx_ThreadView) - cy.get(".mx_EventTile_last[data-layout='group'] .mx_EventTile_line .mx_MessageTimestamp").should( - "have.css", - "color", - MessageTimestampColor, - ); }); // User asserts summary was updated correctly @@ -307,9 +290,6 @@ describe("Threads", () => { // Check the number of the replies cy.get(".mx_ThreadPanel_replies_amount").findByText("2").should("exist"); - // Check the colour of timestamp on thread list - cy.get(".mx_EventTile_details .mx_MessageTimestamp").should("have.css", "color", MessageTimestampColor); - // Make sure the notification dot is visible cy.get(".mx_NotificationBadge_visible").should("be.visible"); diff --git a/res/css/_common.pcss b/res/css/_common.pcss index 7a0528102d..b04c5bc9ea 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -250,7 +250,7 @@ legend { background-color: transparent; color: $input-darker-fg-color; border-radius: 4px; - border: 1px solid rgba($primary-content, 0.1); + border: 1px solid $secondary-hairline-color; /* these things should probably not be defined globally */ margin: 9px; } @@ -263,7 +263,7 @@ legend { :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::placeholder, :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::placeholder, .mx_textinput input::placeholder { - color: rgba($input-darker-fg-color, 0.75); + color: $input-placeholder; } } @@ -584,9 +584,9 @@ legend { /* flip colours for the secondary ones */ font-weight: var(--cpd-font-weight-semibold); - border: 1px solid $accent; + border: 1px solid currentColor; color: $accent; - background-color: $button-secondary-bg-color; + background-color: transparent; font-family: inherit; } @@ -808,18 +808,19 @@ legend { mask-size: contain; height: 18px; min-width: 18px; - background-color: $secondary-content !important; + background-color: $icon-button-color !important; } @define-mixin composerButtonHighLight { - background: rgba($accent, 0.25); + /* TODO: Refactor as this will break for apps that override the accent color */ + background: var(--cpd-color-green-300); /* make the icon the accent color too */ &::before { background-color: $accent !important; } } -@define-mixin composerButton $border-radius, $hover-color { +@define-mixin composerButton $border-radius, $hover-color, $hover-bg { --size: 26px; position: relative; cursor: pointer; @@ -840,6 +841,7 @@ legend { mask-repeat: no-repeat; mask-size: contain; mask-position: center; + z-index: 2; } &::after { @@ -855,7 +857,7 @@ legend { &:hover { &::after { - background: rgba($hover-color, 0.1); + background: $hover-bg; } &::before { diff --git a/res/css/components/views/context_menus/_KebabContextMenu.pcss b/res/css/components/views/context_menus/_KebabContextMenu.pcss index 1594420aea..5ab6782653 100644 --- a/res/css/components/views/context_menus/_KebabContextMenu.pcss +++ b/res/css/components/views/context_menus/_KebabContextMenu.pcss @@ -16,5 +16,5 @@ limitations under the License. .mx_KebabContextMenu_icon { width: 24px; - color: $secondary-content; + color: $icon-button-color; } diff --git a/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss b/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss index b8972d6227..64fb7cfc24 100644 --- a/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss +++ b/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss @@ -20,7 +20,7 @@ limitations under the License. background: transparent; border-radius: 4px; - color: $secondary-content; + color: $icon-button-color; --icon-transform: rotate(-90deg); diff --git a/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss b/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss index e161c0b14a..2e4055cfd4 100644 --- a/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss +++ b/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss @@ -53,7 +53,7 @@ limitations under the License. &.Inactive { --icon-color: $secondary-content; - --background-color: $system; + --background-color: $panels; } } diff --git a/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss b/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss index 5a5937b151..5bd1c29ed5 100644 --- a/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss +++ b/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss @@ -23,7 +23,7 @@ limitations under the License. } .mx_DeviceTypeIcon_deviceIconWrapper { - --background-color: $system; + --background-color: $panels; --icon-color: $secondary-content; height: 40px; diff --git a/res/css/components/views/settings/devices/_FilteredDeviceListHeader.pcss b/res/css/components/views/settings/devices/_FilteredDeviceListHeader.pcss index 3bba9d90b3..4101d68f25 100644 --- a/res/css/components/views/settings/devices/_FilteredDeviceListHeader.pcss +++ b/res/css/components/views/settings/devices/_FilteredDeviceListHeader.pcss @@ -26,7 +26,7 @@ limitations under the License. padding: 0 $spacing-16; margin-bottom: $spacing-32; - background-color: $system; + background-color: $panels; border-radius: 8px; color: $secondary-content; } diff --git a/res/css/compound/_Icon.pcss b/res/css/compound/_Icon.pcss index 07f9eb5a0e..185fb24f3c 100644 --- a/res/css/compound/_Icon.pcss +++ b/res/css/compound/_Icon.pcss @@ -29,7 +29,7 @@ limitations under the License. } .mx_Icon_bg-accent-light { - background-color: rgba($accent, 0.1); + background-color: $accent-300; } .mx_Icon_alert { diff --git a/res/css/structures/_FilePanel.pcss b/res/css/structures/_FilePanel.pcss index 9a1ebda894..4ba4ddbcf0 100644 --- a/res/css/structures/_FilePanel.pcss +++ b/res/css/structures/_FilePanel.pcss @@ -100,7 +100,8 @@ limitations under the License. .mx_MessageTimestamp { text-align: right; - font: var(--cpd-font-body-md-regular); + color: $secondary-content; + font: var(--cpd-font-body-sm-regular); } } } diff --git a/res/css/structures/_LeftPanel.pcss b/res/css/structures/_LeftPanel.pcss index 9cbffc77d4..390f0e3b20 100644 --- a/res/css/structures/_LeftPanel.pcss +++ b/res/css/structures/_LeftPanel.pcss @@ -14,13 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_MatrixChat--with-avatar { - .mx_LeftPanel, - .mx_LeftPanel .mx_LeftPanel_roomListContainer { - background-color: transparent; - } -} - .mx_LeftPanel_outerWrapper { display: flex; flex-direction: column; diff --git a/res/css/structures/_RoomView.pcss b/res/css/structures/_RoomView.pcss index b70649029f..73254b7f71 100644 --- a/res/css/structures/_RoomView.pcss +++ b/res/css/structures/_RoomView.pcss @@ -258,8 +258,8 @@ limitations under the License. height: var(--RoomHeader-indicator-dot-size); border-radius: 50%; transform: scale(1); - background: rgba(var(--RoomHeader-indicator-pulseColor), 1); - box-shadow: 0 0 0 0 rgba(var(--RoomHeader-indicator-pulseColor), 1); + background: var(--RoomHeader-indicator-pulseColor); + box-shadow: 0 0 0 0 var(--RoomHeader-indicator-pulseColor); animation: mx_Indicator_pulse 2s infinite; animation-iteration-count: 1; diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss index e6f4988aae..76c328fa56 100644 --- a/res/css/structures/_SpacePanel.pcss +++ b/res/css/structures/_SpacePanel.pcss @@ -368,7 +368,7 @@ limitations under the License. .mx_UserMenu { padding: 0 2px 8px; - border-bottom: 1px solid $quinary-content; + border-bottom: 1px solid $separator; margin: 12px 14px 4px 18px; max-width: 226px; } diff --git a/res/css/structures/_UserMenu.pcss b/res/css/structures/_UserMenu.pcss index e2e68746c2..f25c15e48e 100644 --- a/res/css/structures/_UserMenu.pcss +++ b/res/css/structures/_UserMenu.pcss @@ -172,7 +172,7 @@ limitations under the License. mask-position: center; mask-size: contain; mask-repeat: no-repeat; - background: $primary-content; + background: $icon-button-color; } } diff --git a/res/css/views/beta/_BetaCard.pcss b/res/css/views/beta/_BetaCard.pcss index 42dd327347..49148cabb2 100644 --- a/res/css/views/beta/_BetaCard.pcss +++ b/res/css/views/beta/_BetaCard.pcss @@ -16,7 +16,7 @@ limitations under the License. .mx_BetaCard { padding: $spacing-24; - background-color: $system; + background-color: $panels; border-radius: 8px; box-sizing: border-box; color: $secondary-content; diff --git a/res/css/views/context_menus/_IconizedContextMenu.pcss b/res/css/views/context_menus/_IconizedContextMenu.pcss index 126225da5d..eaad0adbb8 100644 --- a/res/css/views/context_menus/_IconizedContextMenu.pcss +++ b/res/css/views/context_menus/_IconizedContextMenu.pcss @@ -137,7 +137,7 @@ limitations under the License. mask-position: center; mask-size: contain; mask-repeat: no-repeat; - background-color: $secondary-content; + background-color: $icon-button-color; } } diff --git a/res/css/views/context_menus/_MessageContextMenu.pcss b/res/css/views/context_menus/_MessageContextMenu.pcss index 4531ee1709..abb48b6b7c 100644 --- a/res/css/views/context_menus/_MessageContextMenu.pcss +++ b/res/css/views/context_menus/_MessageContextMenu.pcss @@ -29,7 +29,7 @@ limitations under the License. mask-position: center; mask-size: contain; mask-repeat: no-repeat; - background: $primary-content; + background: $icon-button-color; } } diff --git a/res/css/views/dialogs/_PollCreateDialog.pcss b/res/css/views/dialogs/_PollCreateDialog.pcss index dd5eb764ed..46ef43cd08 100644 --- a/res/css/views/dialogs/_PollCreateDialog.pcss +++ b/res/css/views/dialogs/_PollCreateDialog.pcss @@ -18,7 +18,7 @@ limitations under the License. .mx_PollCreateDialog_busy { position: absolute; inset: 0; - background-color: rgba($background, 0.6); + background-color: $overlay-background; z-index: 1; } diff --git a/res/css/views/elements/_AccessibleButton.pcss b/res/css/views/elements/_AccessibleButton.pcss index e4c00d356f..35a5287fa9 100644 --- a/res/css/views/elements/_AccessibleButton.pcss +++ b/res/css/views/elements/_AccessibleButton.pcss @@ -105,7 +105,6 @@ limitations under the License. &.mx_AccessibleButton_kind_primary_outline { color: $accent; - background-color: $button-secondary-bg-color; } &.mx_AccessibleButton_kind_secondary { diff --git a/res/css/views/elements/_GenericEventListSummary.pcss b/res/css/views/elements/_GenericEventListSummary.pcss index eac9b07139..cfb62d0d37 100644 --- a/res/css/views/elements/_GenericEventListSummary.pcss +++ b/res/css/views/elements/_GenericEventListSummary.pcss @@ -110,6 +110,7 @@ limitations under the License. /* Make all state events one order smaller than the other events */ .mx_EventTile { font: var(--cpd-font-body-sm-regular); + color: $secondary-content; } } @@ -121,6 +122,7 @@ limitations under the License. .mx_TextualEvent.mx_GenericEventListSummary_summary { font: var(--cpd-font-body-sm-regular); display: inline-flex; + color: $secondary-content; } .mx_GenericEventListSummary_avatars { diff --git a/res/css/views/elements/_SSOButtons.pcss b/res/css/views/elements/_SSOButtons.pcss index 2a7d3a1157..2de4781c3c 100644 --- a/res/css/views/elements/_SSOButtons.pcss +++ b/res/css/views/elements/_SSOButtons.pcss @@ -45,7 +45,7 @@ limitations under the License. } .mx_SSOButton:hover { - background-color: $panel-hover; + background-color: $panel-actions; } .mx_SSOButton_default { diff --git a/res/css/views/elements/_StyledCheckbox.pcss b/res/css/views/elements/_StyledCheckbox.pcss index 23dd9de416..cbdcce6171 100644 --- a/res/css/views/elements/_StyledCheckbox.pcss +++ b/res/css/views/elements/_StyledCheckbox.pcss @@ -42,8 +42,7 @@ limitations under the License. height: $size; width: $size; size: 0.5rem; - - border: 1px solid rgba($muted-fg-color, 0.5); + border: 1px solid $strong-input-border-color; box-sizing: border-box; border-radius: $border-radius; @@ -68,7 +67,6 @@ limitations under the License. } &:disabled + label { - opacity: 0.5; cursor: not-allowed; } @@ -89,6 +87,10 @@ limitations under the License. background: $accent; border-color: $accent; } + + &:checked:disabled + label > .mx_Checkbox_background { + opacity: 0.5; + } } .mx_Checkbox.mx_Checkbox_kind_outline input[type="checkbox"] { diff --git a/res/css/views/elements/_StyledRadioButton.pcss b/res/css/views/elements/_StyledRadioButton.pcss index f6740ffb39..2f641a39af 100644 --- a/res/css/views/elements/_StyledRadioButton.pcss +++ b/res/css/views/elements/_StyledRadioButton.pcss @@ -20,7 +20,7 @@ limitations under the License. */ .mx_StyledRadioButton { - $radio-circle-color: $quaternary-content; + $radio-circle-color: $strong-input-border-color; $active-radio-circle-color: $accent; position: relative; diff --git a/res/css/views/elements/_ToggleSwitch.pcss b/res/css/views/elements/_ToggleSwitch.pcss index 4dc7e29436..099be7e8ef 100644 --- a/res/css/views/elements/_ToggleSwitch.pcss +++ b/res/css/views/elements/_ToggleSwitch.pcss @@ -24,7 +24,8 @@ limitations under the License. border-radius: 1.5rem; padding: 2px; - background-color: $togglesw-off-color; + background-color: $background; + border: 1px solid $strong-input-border-color; opacity: 0.5; &[aria-disabled="true"] { @@ -38,10 +39,11 @@ limitations under the License. } .mx_ToggleSwitch.mx_ToggleSwitch_on { - background-color: $accent; + background-color: $inverted-bg-color; > .mx_ToggleSwitch_ball { left: calc(100% - $font-20px); + background-color: $background; } } diff --git a/res/css/views/messages/_DisambiguatedProfile.pcss b/res/css/views/messages/_DisambiguatedProfile.pcss index 767a7eccac..680d3e92c4 100644 --- a/res/css/views/messages/_DisambiguatedProfile.pcss +++ b/res/css/views/messages/_DisambiguatedProfile.pcss @@ -27,10 +27,9 @@ limitations under the License. } .mx_DisambiguatedProfile_mxid { - font: var(--cpd-font-body-sm-semibold); margin-inline-start: 5px; - opacity: 0.5; /* Match mx_TextualEvent */ - color: $primary-content; + color: $secondary-content; + font-size: var(--cpd-font-size-body-sm); } } diff --git a/res/css/views/messages/_ReactionsRowButton.pcss b/res/css/views/messages/_ReactionsRowButton.pcss index 138782ddb2..d27cb4f188 100644 --- a/res/css/views/messages/_ReactionsRowButton.pcss +++ b/res/css/views/messages/_ReactionsRowButton.pcss @@ -18,18 +18,18 @@ limitations under the License. display: inline-flex; line-height: $font-20px; padding: 1px 6px; - border: 1px solid $message-action-bar-border-color; + border: 1px solid $quinary-content; border-radius: 10px; - background-color: $header-panel-bg-color; + background-color: $secondary-hairline-color; user-select: none; &:hover { - border-color: $reaction-row-button-hover-border-color; + border-color: $quinary-content; } &.mx_ReactionsRowButton_selected { - background-color: $reaction-row-button-selected-bg-color; - border-color: $accent; + background-color: $accent-300; + border-color: $accent-800; } &.mx_AccessibleButton_disabled { diff --git a/res/css/views/messages/_RedactedBody.pcss b/res/css/views/messages/_RedactedBody.pcss index a85e97411a..3db5744687 100644 --- a/res/css/views/messages/_RedactedBody.pcss +++ b/res/css/views/messages/_RedactedBody.pcss @@ -14,7 +14,7 @@ limitations under the License. .mx_RedactedBody { white-space: pre-wrap; - color: $muted-fg-color; + color: $secondary-content; vertical-align: middle; padding-left: 20px; @@ -23,7 +23,7 @@ limitations under the License. &::before { height: 14px; width: 14px; - background-color: $muted-fg-color; + background-color: $icon-button-color; mask-image: url("$(res)/img/feather-customised/trash.custom.svg"); mask-repeat: no-repeat; mask-position: center; diff --git a/res/css/views/messages/_TextualEvent.pcss b/res/css/views/messages/_TextualEvent.pcss index 08f0f07b19..a8f8d606e7 100644 --- a/res/css/views/messages/_TextualEvent.pcss +++ b/res/css/views/messages/_TextualEvent.pcss @@ -15,7 +15,6 @@ limitations under the License. */ .mx_TextualEvent { - opacity: 0.5; overflow-y: hidden; line-height: normal; diff --git a/res/css/views/right_panel/_BaseCard.pcss b/res/css/views/right_panel/_BaseCard.pcss index ad63b698c4..b6b03aeb91 100644 --- a/res/css/views/right_panel/_BaseCard.pcss +++ b/res/css/views/right_panel/_BaseCard.pcss @@ -59,7 +59,7 @@ limitations under the License. left: 0; mask-repeat: no-repeat; mask-position: center; - background-color: $header-panel-text-primary-color; + background-color: $icon-button-color; } } @@ -103,7 +103,7 @@ limitations under the License. flex: 1; .mx_BaseCard_header_title_heading { - color: $secondary-content; + color: $icon-button-color; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; diff --git a/res/css/views/right_panel/_ThreadPanel.pcss b/res/css/views/right_panel/_ThreadPanel.pcss index 3c4f7a2b59..d772a2d628 100644 --- a/res/css/views/right_panel/_ThreadPanel.pcss +++ b/res/css/views/right_panel/_ThreadPanel.pcss @@ -130,7 +130,7 @@ limitations under the License. } .mx_MessageTimestamp { - color: var(--MessageTimestamp-color); /* TODO: check whether needed or not */ + color: $secondary-content; } .mx_BaseCard_footer { diff --git a/res/css/views/right_panel/_UserInfo.pcss b/res/css/views/right_panel/_UserInfo.pcss index 1c383b1419..12d74915a2 100644 --- a/res/css/views/right_panel/_UserInfo.pcss +++ b/res/css/views/right_panel/_UserInfo.pcss @@ -69,7 +69,7 @@ limitations under the License. } .mx_UserInfo_separator { - border-bottom: 1px solid rgba($primary-content, 0.1); + border-bottom: 1px solid $separator; } .mx_UserInfo_memberDetailsContainer { diff --git a/res/css/views/rooms/_EditMessageComposer.pcss b/res/css/views/rooms/_EditMessageComposer.pcss index b684f4f32b..f90207fce4 100644 --- a/res/css/views/rooms/_EditMessageComposer.pcss +++ b/res/css/views/rooms/_EditMessageComposer.pcss @@ -33,7 +33,7 @@ limitations under the License. padding: 3px 6px; &:focus { - border-color: rgba($accent, 0.5); /* Only ever used here */ + border-color: $accent-500; } } diff --git a/res/css/views/rooms/_EmojiButton.pcss b/res/css/views/rooms/_EmojiButton.pcss index 3f130ee3dc..10c82a8474 100644 --- a/res/css/views/rooms/_EmojiButton.pcss +++ b/res/css/views/rooms/_EmojiButton.pcss @@ -15,7 +15,7 @@ limitations under the License. */ .mx_EmojiButton { - @mixin composerButton 50%, $accent; + @mixin composerButton 50%, $accent, $accent-300; } .mx_EmojiButton_highlight { @@ -28,6 +28,6 @@ limitations under the License. .mx_MessageComposer_wysiwyg { .mx_EmojiButton { - @mixin composerButton 5px, $tertiary-content; + @mixin composerButton 5px, $tertiary-content, $panels; } } diff --git a/res/css/views/rooms/_EntityTile.pcss b/res/css/views/rooms/_EntityTile.pcss index e9ed6e1ddd..a2ce91037d 100644 --- a/res/css/views/rooms/_EntityTile.pcss +++ b/res/css/views/rooms/_EntityTile.pcss @@ -120,7 +120,7 @@ limitations under the License. .mx_EntityTile_power { padding-inline-start: 6px; font-size: $font-10px; - color: $tertiary-content; + color: $secondary-content; max-width: 6em; overflow: hidden; text-overflow: ellipsis; diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 3d3053219e..c69725c9a6 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -138,7 +138,7 @@ $left-gutter: 64px; &.mx_EventTile_highlight, &.mx_EventTile_highlight .markdown-body, &.mx_EventTile_highlight .mx_EventTile_edited { - color: $alert; + color: $secondary-content; } &.mx_EventTile_bubbleContainer { @@ -686,7 +686,7 @@ $left-gutter: 64px; .mx_EventTile_pendingModeration { user-select: none; font-size: $font-12px; - color: $roomtopic-color; + color: $secondary-content; display: inline-block; margin-left: 9px; } @@ -1136,13 +1136,13 @@ $left-gutter: 64px; } &:hover { - background-color: $system; + background-color: $panels; } /* ThreadsList has always group layout */ &[data-layout="group"]:hover { .mx_EventTile_line { - background-color: $system; /* override $event-selected-color */ + background-color: inherit; box-shadow: none; /* don't show the verification left stroke in the thread list */ } } diff --git a/res/css/views/rooms/_MessageComposer.pcss b/res/css/views/rooms/_MessageComposer.pcss index 6d0bc46b35..56a7da7ec6 100644 --- a/res/css/views/rooms/_MessageComposer.pcss +++ b/res/css/views/rooms/_MessageComposer.pcss @@ -189,7 +189,7 @@ limitations under the License. } .mx_MessageComposer_button { - @mixin composerButton 50%, $accent; + @mixin composerButton 50%, $accent, $accent-300; &:last-child { margin-right: auto; @@ -197,11 +197,12 @@ limitations under the License. &.mx_MessageComposer_closeButtonMenu { &::after { - background: rgba($accent, 0.1); + background: $accent-300; } &::before { background-color: $accent; + z-index: 2; } } @@ -231,15 +232,16 @@ limitations under the License. } .mx_MessageComposer_button { - @mixin composerButton 5px, $tertiary-content; + @mixin composerButton 5px, $tertiary-content, $panels; &.mx_MessageComposer_closeButtonMenu { &::after { - background: rgba($accent, 0.1); + background: $accent-300; } &::before { background-color: $accent; + z-index: 2; } } diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index 3ff64e9fee..e4b3da447c 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -56,7 +56,7 @@ limitations under the License. min-width: 0; margin: 0 20px 0 16px; padding-top: 6px; - border-bottom: 1px solid $system; + border-bottom: 1px solid $separator; .mx_InviteOnlyIcon_large { margin: 0; @@ -112,7 +112,7 @@ limitations under the License. } &[aria-expanded="true"] { - background-color: $quinary-content; + background-color: $separator; .mx_RoomHeader_chevron { transform: rotate(180deg); @@ -138,7 +138,7 @@ limitations under the License. $lines: 2; flex: 1; - color: $roomtopic-color; + color: $secondary-content; font: var(--cpd-font-body-sm-regular); line-height: 1rem; max-height: calc(1rem * $lines); @@ -189,7 +189,7 @@ limitations under the License. } &:hover { - background: rgba($accent, 0.1); + background: $accent-300; &::before { background-color: $accent; @@ -207,7 +207,7 @@ limitations under the License. border-radius: 50%; transform: scale(1.6); transform-origin: center center; - background: rgba($background, 1); + background: $background; } .mx_RoomHeader_button_unreadIndicator { @@ -217,18 +217,18 @@ limitations under the License. margin: 4px; &.mx_Indicator_red { - background: rgba($alert, 1); - box-shadow: rgba($alert, 1); + background: $alert; + box-shadow: $alert; } &.mx_Indicator_gray { - background: rgba($room-icon-unread-color, 1); - box-shadow: rgba($room-icon-unread-color, 1); + background: $room-icon-unread-color; + box-shadow: $room-icon-unread-color; } &.mx_Indicator_bold { - background: rgba($primary-content, 1); - box-shadow: rgba($primary-content, 1); + background: $primary-content; + box-shadow: $primary-content; } } diff --git a/res/css/views/rooms/_RoomSublist.pcss b/res/css/views/rooms/_RoomSublist.pcss index 45a0055cf6..24898b8925 100644 --- a/res/css/views/rooms/_RoomSublist.pcss +++ b/res/css/views/rooms/_RoomSublist.pcss @@ -48,7 +48,7 @@ limitations under the License. /* to work correctly. */ padding-bottom: 8px; height: 24px; - color: $tertiary-content; + color: $secondary-content; .mx_RoomSublist_stickableContainer { width: 100%; diff --git a/res/css/views/rooms/_ThreadSummary.pcss b/res/css/views/rooms/_ThreadSummary.pcss index cd578d58c4..7e8c869104 100644 --- a/res/css/views/rooms/_ThreadSummary.pcss +++ b/res/css/views/rooms/_ThreadSummary.pcss @@ -37,7 +37,7 @@ limitations under the License. width: fit-content; height: 40px; position: relative; - background-color: $system; + background-color: $panels; padding-inline: $spacing-12 $spacing-16; display: flex; align-items: center; @@ -46,7 +46,7 @@ limitations under the License. box-sizing: border-box; clear: both; overflow: hidden; - border: 1px solid $system; /* always render a border so the hover effect doesn't require a re-layout */ + border: 1px solid $panels; /* always render a border so the hover effect doesn't require a re-layout */ .mx_ThreadSummary_chevron { position: absolute; @@ -55,7 +55,7 @@ limitations under the License. bottom: 0; width: 60px; box-sizing: border-box; - /* XXX: We use `$system-transparent` instead of `transparent` to work around a Safari <15.4 bug */ + /* XXX: We use an HEXA `transparent` to work around a Safari <15.4 bug */ background: linear-gradient(270deg, $system 50%, $system-transparent 100%); opacity: 0; diff --git a/res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss b/res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss index b711a634d1..235c2db91f 100644 --- a/res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss +++ b/res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss @@ -32,7 +32,7 @@ limitations under the License. padding: 3px 6px; &:focus { - border-color: rgba($accent, 0.5); /* Only ever used here */ + border-color: $accent-400; } } diff --git a/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss b/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss index 8e3dd22c99..8f23227c80 100644 --- a/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss +++ b/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss @@ -34,7 +34,7 @@ limitations under the License. .mx_FormattingButtons_Button_hover { &:hover { - background: rgba($secondary-content, 0.1); + background: $panels; .mx_FormattingButtons_Icon { color: $secondary-content; @@ -43,7 +43,7 @@ limitations under the License. } .mx_FormattingButtons_active { - background: rgba($accent, 0.1); + background: $accent-300; .mx_FormattingButtons_Icon { color: $accent; diff --git a/res/css/views/settings/_FontScalingPanel.pcss b/res/css/views/settings/_FontScalingPanel.pcss index 87d92e4b0a..3c01321487 100644 --- a/res/css/views/settings/_FontScalingPanel.pcss +++ b/res/css/views/settings/_FontScalingPanel.pcss @@ -40,7 +40,7 @@ limitations under the License. display: flex; align-items: center; padding: 15px $spacing-20 35px; - background: rgba($quinary-content, 0.2); + background: $panels; border-radius: 10px; font-size: $font-10px; diff --git a/res/css/views/settings/_KeyboardShortcut.pcss b/res/css/views/settings/_KeyboardShortcut.pcss index 721d5fd8fe..f1593a4d9f 100644 --- a/res/css/views/settings/_KeyboardShortcut.pcss +++ b/res/css/views/settings/_KeyboardShortcut.pcss @@ -19,7 +19,7 @@ limitations under the License. kbd { padding: 5px; border-radius: 4px; - background-color: $header-panel-bg-color; + background-color: $background; min-width: 20px; text-align: center; display: inline-block; diff --git a/res/css/views/settings/_LayoutSwitcher.pcss b/res/css/views/settings/_LayoutSwitcher.pcss index 94952e31b6..48d891641a 100644 --- a/res/css/views/settings/_LayoutSwitcher.pcss +++ b/res/css/views/settings/_LayoutSwitcher.pcss @@ -28,6 +28,7 @@ limitations under the License. flex-shrink: 1; display: flex; flex-direction: column; + overflow: hidden; flex-basis: 33%; min-width: 0; @@ -71,7 +72,7 @@ limitations under the License. } .mx_StyledRadioButton_checked { - background-color: rgba($accent, 0.08); + background-color: $accent-200; } .mx_EventTile { diff --git a/res/css/views/settings/_ThemeChoicePanel.pcss b/res/css/views/settings/_ThemeChoicePanel.pcss index 8bb64b6787..1194c6110d 100644 --- a/res/css/views/settings/_ThemeChoicePanel.pcss +++ b/res/css/views/settings/_ThemeChoicePanel.pcss @@ -26,7 +26,7 @@ limitations under the License. border-radius: 10px; width: 180px; - background: $quinary-content; + background: $accent-200; opacity: 0.4; flex-shrink: 1; diff --git a/res/css/views/voip/_CallView.pcss b/res/css/views/voip/_CallView.pcss index 8241ff9227..4e534484d8 100644 --- a/res/css/views/voip/_CallView.pcss +++ b/res/css/views/voip/_CallView.pcss @@ -104,7 +104,7 @@ limitations under the License. left: 0; right: 0; - background-color: rgba($call-background, 0.9); + background-color: $info-plinth-fg-color; display: flex; justify-content: center; diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss index 2b10d70739..6a108c71ed 100644 --- a/res/themes/dark/css/_dark.pcss +++ b/res/themes/dark/css/_dark.pcss @@ -1,33 +1,64 @@ /* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741 */ /* ******************** */ -$primary-content: #ffffff; -$secondary-content: #a9b2bc; -$tertiary-content: #8e99a4; -$quaternary-content: #6f7882; -$quinary-content: #394049; +$primary-content: var(--cpd-color-text-primary); +$secondary-content: var(--cpd-color-text-secondary); +$tertiary-content: var(--cpd-color-gray-800); +$quaternary-content: var(--cpd-color-gray-600); +$quinary-content: var(--cpd-color-gray-400); -$system: #21262c; -$system-transparent: rgba($system, 0); /* XXX: workaround for Safari 15.3 linear-gradient bug */ -$background: #15191e; -$overlay-background: rgba($background, 0.85); +$system: var(--cpd-color-bg-subtle-primary); +$system-transparent: #e1e6ec00; +$background: var(--cpd-color-bg-canvas-default); +$overlay-background: var(--cpd-color-alpha-gray-1300); + +$panels: var(--cpd-color-bg-subtle-secondary); +$panel-actions: var(--cpd-color-alpha-gray-300); + +$separator: var(--cpd-color-alpha-gray-400); -$panel-base: #8d97a5; /* This color is not intended for use in the app */ -$panels: rgba($system, 0.9); -$panel-selected: rgba($panel-base, 0.3); -$panel-hover: rgba($panel-base, 0.1); -$panel-actions: rgba($panel-base, 0.2); -$space-nav: rgba($panel-base, 0.1); /* ******************** */ +/* RoomList */ +/* ******************** */ +$roomlist-bg-color: var(--cpd-color-bg-subtle-secondary); /* TODO: there's no corresponding compound color */ +$roomsublist-skeleton-ui-bg: linear-gradient(180deg, $background 0%, #ffffff00 100%); +$roomtile-default-badge-bg-color: $muted-fg-color; +/* ******************** */ + +/** + * Creating a `semantic` color scale. This will not be needed with the new + * visual language, but necessary during the transition period + * This abstract the `green` away from where accent shades are used + * Take: `background: rgba($accent, 0.1);` + * would be transformed to: `background: $accent-300;` + * + * To use under very rare circumstances, always prefer the semantics defined + * in https://compound.element.io/?path=/docs /tokens-semantic-colors--docs + */ +$accent-100: var(--cpd-color-green-100); +$accent-200: var(--cpd-color-green-200); +$accent-300: var(--cpd-color-green-300); +$accent-400: var(--cpd-color-green-400); +$accent-500: var(--cpd-color-green-500); +$accent-600: var(--cpd-color-green-600); +$accent-700: var(--cpd-color-green-700); +$accent-800: var(--cpd-color-green-800); +$accent-900: var(--cpd-color-green-900); +$accent-1000: var(--cpd-color-green-1000); +$accent-1100: var(--cpd-color-green-1100); +$accent-1200: var(--cpd-color-green-1200); +$accent-1300: var(--cpd-color-green-1300); +$accent-1400: var(--cpd-color-green-1400); + /* Reused Figma non-compound colors */ /* ******************** */ -$inverted-bg-color: $background; -$header-panel-bg-color: #20252b; +$inverted-bg-color: var(--cpd-color-bg-action-primary-rest); +$header-panel-bg-color: var(--cpd-color-bg-subtle-secondary); /* ******************** */ /* Theme specific colors */ /* ******************** */ -$icon-button-color: $tertiary-content; +$icon-button-color: var(--cpd-color-icon-tertiary); /* ******************** */ /* Colors that aren't in Figma and are theme specific - we need to get rid of these */ @@ -39,7 +70,7 @@ $text-secondary-color: #b9bec6; /* Colors that aren't in Figma - we need to get rid of these */ /* ******************** */ -$dark-panel-bg-color: $header-panel-bg-color; +$dark-panel-bg-color: var(--cpd-color-bg-subtle-secondary); $muted-fg-color: $header-panel-text-primary-color; $light-fg-color: $header-panel-text-secondary-color; $focus-bg-color: $room-highlight-color; @@ -82,7 +113,7 @@ $settings-subsection-fg-color: $text-secondary-color; /* Room */ /* ******************** */ -$room-icon-unread-color: #fff; +$room-icon-unread-color: var(--cpd-color-icon-tertiary); /* ******************** */ /* RoomHeader */ @@ -103,19 +134,20 @@ $input-border-color: rgba(231, 231, 231, 0.2); $input-darker-bg-color: #181b21; $input-darker-fg-color: #61708b; $input-lighter-bg-color: #f2f5f8; +$input-placeholder: var(--cpd-color-text-placeholder); /* ******************** */ /* Dialog */ /* ******************** */ $dialog-title-fg-color: $primary-content; $dialog-backdrop-color: $menu-border-color; -$dialog-close-fg-color: #9fa9ba; +$dialog-close-fg-color: $icon-button-color; $dialog-close-external-color: $primary-content; /* ******************** */ /* RoomList */ /* ******************** */ -$roomlist-bg-color: rgba($system, 0.9); +$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; /* ******************** */ @@ -215,7 +247,7 @@ $live-badge-color: #ffffff; /* One-off colors */ /* ******************** */ $progressbar-bg-color: $system; -$kbd-border-color: $menu-border-color; +$kbd-border-color: $strong-input-border-color; $visual-bell-bg-color: #800; $event-timestamp-color: $text-secondary-color; $slider-background-color: $quinary-content; @@ -223,7 +255,7 @@ $appearance-tab-border-color: $room-highlight-color; $composer-shadow-color: rgba(0, 0, 0, 0.28); $breadcrumb-placeholder-bg-color: #272c35; $theme-button-bg-color: #e3e8f0; -$resend-button-divider-color: rgba($header-panel-text-primary-color, 0.74); +$resend-button-divider-color: var(--cpd-color-gray-700); $inlinecode-border-color: $quinary-content; $inlinecode-background-color: $system; $codeblock-background-color: #2a3039; @@ -285,10 +317,10 @@ body { .mx_SplashPage::before { background-image: radial-gradient( 53.85% 66.75% at 87.55% 0%, - hsla(0, 0%, 11%, 0.15) 0%, - hsla(250, 100%, 88%, 0) 100% + hsla(0deg, 0%, 11%, 0.15) 0%, + hsla(250deg, 100%, 88%, 0) 100% ), - radial-gradient(41.93% 41.93% at 0% 0%, hsla(0, 0%, 38%, 0.28) 0%, hsla(250, 100%, 88%, 0) 100%), - radial-gradient(100% 100% at 0% 0%, hsla(250, 100%, 88%, 0.3) 0%, hsla(0, 100%, 86%, 0) 100%), - radial-gradient(106.35% 96.26% at 100% 0%, hsla(25, 100%, 88%, 0.4) 0%, hsla(167, 76%, 82%, 0) 100%) !important; + radial-gradient(41.93% 41.93% at 0% 0%, hsla(0deg, 0%, 38%, 0.28) 0%, hsla(250deg, 100%, 88%, 0) 100%), + radial-gradient(100% 100% at 0% 0%, hsla(250deg, 100%, 88%, 0.3) 0%, hsla(0deg, 100%, 86%, 0) 100%), + radial-gradient(106.35% 96.26% at 100% 0%, hsla(25deg, 100%, 88%, 0.4) 0%, hsla(167deg, 76%, 82%, 0) 100%) !important; } diff --git a/res/themes/legacy-dark/css/_legacy-dark.pcss b/res/themes/legacy-dark/css/_legacy-dark.pcss index 8955ca888d..52041047cf 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.pcss +++ b/res/themes/legacy-dark/css/_legacy-dark.pcss @@ -1,6 +1,6 @@ /* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741 */ $system: #21262c; -$system-transparent: rgba($system, 0); /* XXX: workaround for Safari 15.3 linear-gradient bug */ +$system-transparent: #e1e6ec00; /* unified palette */ /* try to use these colors when possible */ @@ -45,12 +45,14 @@ $event-selected-color: $header-panel-bg-color; /* used for the hairline dividers in RoomView */ $primary-hairline-color: #000000; +$secondary-hairline-color: var(--cpd-color-gray-300); /* used for the border of input text fields */ $input-border-color: #e7e7e7; $input-darker-bg-color: #181b21; $input-darker-fg-color: #61708b; $input-lighter-bg-color: #f2f5f8; +$input-placeholder: var(--cpd-color-text-placeholder); $resend-button-divider-color: $muted-fg-color; @@ -66,11 +68,12 @@ $menu-selected-color: $room-highlight-color; $avatar-initial-color: #ffffff; $h3-color: $primary-fg-color; +$icon-button-color: var(--cpd-color-icon-tertiary); $dialog-title-fg-color: $base-text-color; $dialog-backdrop-color: #000; $dialog-shadow-color: rgba(0, 0, 0, 0.48); -$dialog-close-fg-color: #9fa9ba; +$dialog-close-fg-color: $icon-button-color; $dialog-close-external-color: $text-primary-color; $lightbox-background-bg-color: #000; @@ -82,9 +85,8 @@ $settings-subsection-fg-color: $text-secondary-color; $topleftmenu-color: $text-primary-color; $roomheader-addroom-bg-color: #3c4556; $roomheader-addroom-fg-color: $text-primary-color; -$icon-button-color: $header-panel-text-primary-color; $roomtopic-color: $text-secondary-color; -$room-icon-unread-color: #fff; +$room-icon-unread-color: var(--cpd-color-icon-tertiary); /* Legacy theme backports */ $accent: #0dbd8b; @@ -96,18 +98,38 @@ $secondary-content: $secondary-fg-color; $tertiary-content: $tertiary-fg-color; $quaternary-content: #6f7882; $quinary-content: $quaternary-content; -$system: #21262c; -$system-transparent: rgba($system, 0); /* XXX: workaround for Safari 15.3 linear-gradient bug */ $background: $primary-bg-color; $overlay-background: rgba($background, 0.85); $panels: rgba($system, 0.9); -$panel-base: #8d97a5; /* This color is not intended for use in the app */ -$panel-selected: rgba($panel-base, 0.3); -$panel-hover: rgba($panel-base, 0.1); $panel-actions: $roomtile-selected-bg-color; -$space-nav: rgba($panel-base, 0.1); +$separator: var(--cpd-color-alpha-gray-400); + +/** + * Creating a `semantic` color scale. This will not be needed with the new + * visual language, but necessary during the transition period + * This abstract the `green` away from where accent shades are used + * Take: `background: rgba($accent, 0.1);` + * would be transformed to: `background: $accent-300;` + * + * To use under very rare circumstances, always prefer the semantics defined + * in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs + */ +$accent-100: var(--cpd-color-green-100); +$accent-200: var(--cpd-color-green-200); +$accent-300: var(--cpd-color-green-300); +$accent-400: var(--cpd-color-green-400); +$accent-500: var(--cpd-color-green-500); +$accent-600: var(--cpd-color-green-600); +$accent-700: var(--cpd-color-green-700); +$accent-800: var(--cpd-color-green-800); +$accent-900: var(--cpd-color-green-900); +$accent-1000: var(--cpd-color-green-1000); +$accent-1100: var(--cpd-color-green-1100); +$accent-1200: var(--cpd-color-green-1200); +$accent-1300: var(--cpd-color-green-1300); +$accent-1400: var(--cpd-color-green-1400); /* Legacy theme backports */ /* ******************** */ @@ -126,7 +148,7 @@ $call-primary-content: $primary-content; $call-light-quaternary-content: #c1c6cd; $roomlist-filter-active-bg-color: $panel-actions; -$roomlist-bg-color: $header-panel-bg-color; +$roomlist-bg-color: var(--cpd-color-bg-subtle-secondary); $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%); @@ -163,7 +185,7 @@ $progressbar-bg-color: #21262c; $visual-bell-bg-color: #800; -$dark-panel-bg-color: $header-panel-bg-color; +$dark-panel-bg-color: var(--cpd-color-bg-subtle-secondary); $panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1); $message-action-bar-bg-color: $header-panel-bg-color; @@ -174,7 +196,7 @@ $message-action-bar-hover-border-color: $header-panel-text-primary-color; $reaction-row-button-hover-border-color: $header-panel-text-primary-color; $reaction-row-button-selected-bg-color: #1f6954; -$kbd-border-color: #000000; +$kbd-border-color: $strong-input-border-color; $tooltip-timeline-bg-color: $spacePanel-bg-color; $tooltip-timeline-fg-color: #ffffff; diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index 9ce9c28d31..6e166c7168 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -59,6 +59,7 @@ $event-selected-color: $header-panel-bg-color; /* used for the hairline dividers in RoomView */ $primary-hairline-color: #e5e5e5; +$secondary-hairline-color: var(--cpd-color-gray-300); /* used for the border of input text fields */ $input-border-color: #e7e7e7; @@ -76,6 +77,7 @@ $strong-input-border-color: #c7c7c7; /* used for UserSettings EditableText */ $input-underline-color: rgba(151, 151, 151, 0.5); $input-fg-color: rgba(74, 74, 74, 0.9); +$input-placeholder: var(--cpd-color-text-placeholder); /* scrollbars */ $scrollbar-thumb-color: rgba(0, 0, 0, 0.2); /* context menus */ @@ -87,11 +89,12 @@ $menu-selected-color: #f5f8fa; $avatar-initial-color: #ffffff; $h3-color: #3d3b39; +$icon-button-color: var(--cpd-color-icon-tertiary); $dialog-title-fg-color: #45474a; $dialog-backdrop-color: rgba(46, 48, 51, 0.38); $dialog-shadow-color: rgba(0, 0, 0, 0.48); -$dialog-close-fg-color: #c1c1c1; +$dialog-close-fg-color: $icon-button-color; $dialog-close-external-color: $primary-bg-color; $lightbox-background-bg-color: #000; @@ -124,9 +127,8 @@ $topleftmenu-color: #212121; $roomheader-bg-color: $primary-bg-color; $roomheader-addroom-bg-color: #91a1c0; $roomheader-addroom-fg-color: $accent-fg-color; -$icon-button-color: #91a1c0; $roomtopic-color: #9e9e9e; -$room-icon-unread-color: #737d8c; +$room-icon-unread-color: var(--cpd-color-icon-tertiary); /* ******************** */ @@ -150,22 +152,21 @@ $tertiary-content: $tertiary-fg-color; $quaternary-content: #6f7882; $quinary-content: $quaternary-content; $system: #f4f6fa; -$system-transparent: rgba($system, 0); /* XXX: workaround for Safari 15.3 linear-gradient bug */ +$system-transparent: #e1e6ec00; $background: $primary-bg-color; $overlay-background: rgba($background, 0.85); $panels: rgba($system, 0.9); -$panel-base: #8d97a5; /* This color is not intended for use in the app */ -$panel-selected: rgba($tertiary-content, 0.3); -$panel-hover: rgba($tertiary-content, 0.1); $panel-actions: $roomtile-selected-bg-color; -$space-nav: rgba($tertiary-content, 0.15); + +$separator: var(--cpd-color-alpha-gray-400); + /* Legacy theme backports */ /* ******************** */ $roomlist-filter-active-bg-color: $panel-actions; -$roomlist-bg-color: $header-panel-bg-color; +$roomlist-bg-color: var(--cpd-color-bg-subtle-secondary); $roomlist-header-color: $primary-fg-color; $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%); @@ -185,14 +186,39 @@ $call-background: #15191e; $call-primary-content: #ffffff; $call-light-quaternary-content: #c1c6cd; -$username-variant1-color: #368bd6; -$username-variant2-color: #ac3ba8; -$username-variant3-color: #03b381; -$username-variant4-color: #e64f7a; -$username-variant5-color: #ff812d; -$username-variant6-color: #2dc2c5; -$username-variant7-color: #5c56f5; -$username-variant8-color: #74d12c; +$username-variant1-color: var(--cpd-color-blue-900); +$username-variant2-color: var(--cpd-color-fuchsia-900); +$username-variant3-color: var(--cpd-color-green-900); +$username-variant4-color: var(--cpd-color-pink-900); +$username-variant5-color: var(--cpd-color-orange-900); +$username-variant6-color: var(--cpd-color-cyan-900); +$username-variant7-color: var(--cpd-color-purple-900); +$username-variant8-color: var(--cpd-color-lime-900); + +/** + * Creating a `semantic` color scale. This will not be needed with the new + * visual language, but necessary during the transition period + * This abstract the `green` away from where accent shades are used + * Take: `background: rgba($accent, 0.1);` + * would be transformed to: `background: $accent-300;` + * + * To use under very rare circumstances, always prefer the semantics defined + * in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs + */ +$accent-100: var(--cpd-color-green-100); +$accent-200: var(--cpd-color-green-200); +$accent-300: var(--cpd-color-green-300); +$accent-400: var(--cpd-color-green-400); +$accent-500: var(--cpd-color-green-500); +$accent-600: var(--cpd-color-green-600); +$accent-700: var(--cpd-color-green-700); +$accent-800: var(--cpd-color-green-800); +$accent-900: var(--cpd-color-green-900); +$accent-1000: var(--cpd-color-green-1000); +$accent-1100: var(--cpd-color-green-1100); +$accent-1200: var(--cpd-color-green-1200); +$accent-1300: var(--cpd-color-green-1300); +$accent-1400: var(--cpd-color-green-1400); /* ******************** */ @@ -218,8 +244,8 @@ $e2e-verified-color: #0dbd8b; $e2e-unknown-color: #e8bf37; $e2e-unverified-color: #e8bf37; $e2e-warning-color: #ff5b55; -$e2e-verified-color-light: rgba($e2e-verified-color, 0.06); -$e2e-warning-color-light: rgba($e2e-warning-color, 0.06); +$e2e-verified-color-light: var(--cpd-color-green-300); +$e2e-warning-color-light: var(--cpd-color-red-300); /*** ImageView ***/ $lightbox-bg-color: #454545; @@ -241,7 +267,7 @@ $visual-bell-bg-color: #faa; /* Toggle switch */ $togglesw-off-color: #c1c9d6; -$togglesw-ball-color: #fff; +$togglesw-ball-color: var(--cpd-color-bg-action-primary-rest); /* Slider */ $slider-background-color: #c1c9d6; @@ -251,11 +277,11 @@ $progressbar-bg-color: rgba(141, 151, 165, 0.2); $authpage-bg-color: #2e3649; $authpage-modal-bg-color: rgba(255, 255, 255, 0.59); $authpage-focus-bg-color: #dddddd; -$authpage-lang-color: #4e5054; -$authpage-primary-color: #232f32; -$authpage-secondary-color: #61708b; +$authpage-lang-color: $secondary-content; +$authpage-primary-color: $primary-content; +$authpage-secondary-color: $secondary-content; -$dark-panel-bg-color: $secondary-accent-color; +$dark-panel-bg-color: var(--cpd-color-bg-subtle-secondary); $panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1); $message-action-bar-bg-color: $primary-bg-color; @@ -266,7 +292,7 @@ $message-action-bar-hover-border-color: $focus-bg-color; $reaction-row-button-hover-border-color: $focus-bg-color; $reaction-row-button-selected-bg-color: #e9fff9; -$kbd-border-color: $message-action-bar-border-color; +$kbd-border-color: $strong-input-border-color; $tooltip-timeline-bg-color: $spacePanel-bg-color; $tooltip-timeline-fg-color: #ffffff; diff --git a/res/themes/light-custom/css/_custom.pcss b/res/themes/light-custom/css/_custom.pcss index c883952652..ffe9b5ad12 100644 --- a/res/themes/light-custom/css/_custom.pcss +++ b/res/themes/light-custom/css/_custom.pcss @@ -26,16 +26,11 @@ $secondary-content: var(--secondary-content, $secondary-content); $tertiary-content: var(--tertiary-content, $tertiary-content); $quaternary-content: var(--quaternary-content, $quaternary-content); $quinary-content: var(--quinary-content, $quinary-content); -/* XXX: workaround for Safari 15.3 linear-gradient bug https://github.com/vector-im/element-web/issues/21670 */ -$system-transparent: var(--system-transparent, rgba($system, 0)); $system: var(--system, $system); +$system-transparent: var(--system-transparent, #e1e6ec00); $background: var(--background, $background); -$panels: rgba($system, 0.9); -$panel-base: var(--panel-base, $tertiary-content); /* This color is not intended for use in the app */ -$panel-selected: rgba($panel-base, 0.3); -$panel-hover: rgba($panel-base, 0.1); -$panel-actions: rgba($panel-base, 0.2); -$space-nav: rgba($panel-base, 0.1); +$panels: var(--panels, var(--cpd-color-gray-600)); +$panel-actions: var(--panels-actions, var(--cpd-color-gray-300)); /* --accent-color */ $username-variant3-color: var(--accent-color); @@ -46,7 +41,7 @@ $lightbox-border-color: var(--timeline-background-color); $menu-bg-color: var(--timeline-background-color); $message-action-bar-bg-color: var(--timeline-background-color); $background: var(--timeline-background-color); -$togglesw-ball-color: var(--timeline-background-color); +$togglesw-ball-color: var(--cpd-color-bg-action-primary-rest); $togglesw-off-color: var(--togglesw-off-color); $droptarget-bg-color: var(--timeline-background-color-50pct); /* still needs alpha at .5 */ $authpage-modal-bg-color: var(--timeline-background-color-50pct); /* still needs alpha at .59 */ @@ -91,6 +86,7 @@ $roomtile-default-badge-bg-color: var(--roomlist-text-secondary-color); /* --roomlist-separator-color */ $input-darker-bg-color: var(--roomlist-separator-color); $primary-hairline-color: var(--roomlist-separator-color); /* originally #e5e5e5, but close enough */ +$secondary-hairline-color: var(--secondary-hairline-color); /* --timeline-text-secondary-color */ $authpage-secondary-color: var(--timeline-text-secondary-color); @@ -145,3 +141,26 @@ $menu-selected-color: var(--menu-selected-color, $menu-selected-color); $pill-bg-color: var(--other-user-pill-bg-color, $pill-bg-color); $pill-hover-bg-color: var(--other-user-pill-bg-color, $pill-hover-bg-color); $icon-button-color: var(--icon-button-color, $icon-button-color); + +$strong-input-border-color: var(--strong-input-border-color, $strong-input-border-color); +$inverted-bg-color: var(--strong-input-border-color, $inverted-bg-color); + +/** + * Variation of the accent color. + * Generate this colour scale using LeonardoColor + * TODO: Add link + */ +$accent-100: var(--accent-color-100); +$accent-200: var(--accent-color-200); +$accent-300: var(--accent-color-300); +$accent-400: var(--accent-color-400); +$accent-500: var(--accent-color-500); +$accent-600: var(--accent-color-600); +$accent-700: var(--accent-color-700); +$accent-800: var(--accent-color-800); +$accent-900: var(--accent-color-900); +$accent-1000: var(--accent-color-1000); +$accent-1100: var(--accent-color-1100); +$accent-1200: var(--accent-color-1200); +$accent-1300: var(--accent-color-1300); +$accent-1400: var(--accent-color-1400); 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 e1b79a7bf3..3d668a3f60 100644 --- a/res/themes/light-high-contrast/css/_light-high-contrast.pcss +++ b/res/themes/light-high-contrast/css/_light-high-contrast.pcss @@ -1,28 +1,28 @@ /* Reference: https://www.figma.com/file/RnLKnv09glhxGIZtn8zfmh/UI-Themes-%26-Accessibility?node-id=321%3A65847 */ -$accent: #268075; -$alert: #d62c25; -$links: #0a6eca; -$primary-content: #17191c; -$secondary-content: #5e6266; -$tertiary-content: $secondary-content; -$quaternary-content: $secondary-content; -$quinary-content: $secondary-content; +$accent: var(--cpd-color-text-action-accent); +$alert: var(--cpd-color-text-critical-primary); +$links: var(--cpd-color-text-link-external); +$primary-content: var(--cpd-color-text-primary); +$secondary-content: var(--cpd-color-text-secondary); +$tertiary-content: var(--cpd-color-gray-800); +$quaternary-content: var(--cpd-color-gray-600); +$quinary-content: var(--cpd-color-gray-400); -$username-variant1-color: #0a6eca; -$username-variant2-color: #ac3ba8; -$username-variant3-color: #078662; -$username-variant4-color: #cc1449; -$username-variant5-color: #be4c00; -$username-variant6-color: #1c7274; -$username-variant7-color: #5c56f5; -$username-variant8-color: #3e810a; +$username-variant1-color: var(--cpd-color-blue-900); +$username-variant2-color: var(--cpd-color-fuchsia-900); +$username-variant3-color: var(--cpd-color-green-900); +$username-variant4-color: var(--cpd-color-pink-900); +$username-variant5-color: var(--cpd-color-orange-900); +$username-variant6-color: var(--cpd-color-cyan-900); +$username-variant7-color: var(--cpd-color-purple-900); +$username-variant8-color: var(--cpd-color-lime-900); $accent-alt: $links; $input-border-color: $secondary-content; $input-darker-bg-color: $quinary-content; $input-darker-fg-color: $secondary-content; $resend-button-divider-color: $input-darker-bg-color; -$icon-button-color: $quaternary-content; +$icon-button-color: var(--cpd-color-icon-tertiary); $theme-button-bg-color: $quinary-content; $presence-offline: $quinary-content; $pinned-color: $tertiary-content; @@ -34,6 +34,31 @@ $appearance-tab-border-color: $input-darker-bg-color; $eventbubble-reply-color: $quaternary-content; $roomtopic-color: $secondary-content; +/** + * Creating a `semantic` color scale. This will not be needed with the new + * visual language, but necessary during the transition period + * This abstract the `green` away from where accent shades are used + * Take: `background: rgba($accent, 0.1);` + * would be transformed to: `background: $accent-300;` + * + * To use under very rare circumstances, always prefer the semantics defined + * in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs + */ +$accent-100: var(--cpd-color-green-100); +$accent-200: var(--cpd-color-green-200); +$accent-300: var(--cpd-color-green-300); +$accent-400: var(--cpd-color-green-400); +$accent-500: var(--cpd-color-green-500); +$accent-600: var(--cpd-color-green-600); +$accent-700: var(--cpd-color-green-700); +$accent-800: var(--cpd-color-green-800); +$accent-900: var(--cpd-color-green-900); +$accent-1000: var(--cpd-color-green-1000); +$accent-1100: var(--cpd-color-green-1100); +$accent-1200: var(--cpd-color-green-1200); +$accent-1300: var(--cpd-color-green-1300); +$accent-1400: var(--cpd-color-green-1400); + /* Draw an outline on buttons with focus */ .mx_AccessibleButton:focus { outline: 2px solid $accent; diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index 58ab893058..34ae265fb5 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -15,66 +15,90 @@ $monospace-font-family: "Inconsolata", "Twemoji", "Apple Color Emoji", "Segoe UI /* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A120 */ /* ******************** */ -$primary-content: #17191c; -$secondary-content: #737d8c; -$tertiary-content: #8d97a5; -$quaternary-content: #c1c6cd; -$quinary-content: #e3e8f0; +$primary-content: var(--cpd-color-text-primary); +$secondary-content: var(--cpd-color-text-secondary); +$tertiary-content: var(--cpd-color-gray-800); +$quaternary-content: var(--cpd-color-gray-600); +$quinary-content: var(--cpd-color-gray-400); -$system: #f4f6fa; -$system-transparent: rgba($system, 0); /* XXX: workaround for Safari 15.3 linear-gradient bug */ -$background: #ffffff; -$overlay-background: rgba($background, 0.85); +$system: var(--cpd-color-bg-subtle-primary); +$system-transparent: #e1e6ec00; +$background: var(--cpd-color-bg-canvas-default); +$overlay-background: var(--cpd-color-alpha-gray-1300); -$panels: rgba($system, 0.9); -$panel-selected: rgba($tertiary-content, 0.3); -$panel-hover: rgba($tertiary-content, 0.1); -$panel-actions: rgba($tertiary-content, 0.2); -$space-nav: rgba($tertiary-content, 0.15); +$panels: var(--cpd-color-bg-subtle-secondary); +$panel-actions: var(--cpd-color-alpha-gray-300); -$accent: #0dbd8b; -$alert: #ff5b55; -$links: #0086e6; -$link-external: #0467dd; +$separator: var(--cpd-color-alpha-gray-400); -$username-variant1-color: #368bd6; -$username-variant2-color: #ac3ba8; -$username-variant3-color: #0dbd8b; -$username-variant4-color: #e64f7a; -$username-variant5-color: #ff812d; -$username-variant6-color: #2dc2c5; -$username-variant7-color: #5c56f5; -$username-variant8-color: #74d12c; +$accent: var(--cpd-color-text-action-accent); +$alert: var(--cpd-color-text-critical-primary); +$links: var(--cpd-color-text-link-external); +$link-external: var(--cpd-color-text-link-external); + +$username-variant1-color: var(--cpd-color-blue-900); +$username-variant2-color: var(--cpd-color-fuchsia-900); +$username-variant3-color: var(--cpd-color-green-900); +$username-variant4-color: var(--cpd-color-pink-900); +$username-variant5-color: var(--cpd-color-orange-900); +$username-variant6-color: var(--cpd-color-cyan-900); +$username-variant7-color: var(--cpd-color-purple-900); +$username-variant8-color: var(--cpd-color-lime-900); /* ******************** */ +/** + * Creating a `semantic` color scale. This will not be needed with the new + * visual language, but necessary during the transition period + * This abstract the `green` away from where accent shades are used + * Take: `background: rgba($accent, 0.1);` + * would be transformed to: `background: $accent-300;` + * + * To use under very rare circumstances, always prefer the semantics defined + * in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs + */ +$accent-100: var(--cpd-color-green-100); +$accent-200: var(--cpd-color-green-200); +$accent-300: var(--cpd-color-green-300); +$accent-400: var(--cpd-color-green-400); +$accent-500: var(--cpd-color-green-500); +$accent-600: var(--cpd-color-green-600); +$accent-700: var(--cpd-color-green-700); +$accent-800: var(--cpd-color-green-800); +$accent-900: var(--cpd-color-green-900); +$accent-1000: var(--cpd-color-green-1000); +$accent-1100: var(--cpd-color-green-1100); +$accent-1200: var(--cpd-color-green-1200); +$accent-1300: var(--cpd-color-green-1300); +$accent-1400: var(--cpd-color-green-1400); + /* Reused Figma non-compound colors */ /* ******************** */ -$inverted-bg-color: #27303a; -$header-panel-bg-color: #f3f8fd; +$inverted-bg-color: var(--cpd-color-bg-action-primary-rest); +$header-panel-bg-color: var(--cpd-color-bg-subtle-primary); /* ******************** */ /* Theme specific colors */ /* ******************** */ -$icon-button-color: $quaternary-content; +$icon-button-color: var(--cpd-color-icon-tertiary); /* ******************** */ /* Colors that aren't in Figma and are theme specific - we need to get rid of these */ /* ******************** */ $selection-fg-color: $background; -$yellow-background: #fff8e3; +$yellow-background: var(--cpd-color-yellow-200); $secondary-accent-color: #f2f5f8; $button-fg-color: $background; $neutral-badge-color: #dbdbdb; -$strong-input-border-color: #c7c7c7; -$preview-widget-bar-color: #dddddd; -$accent-fg-color: $background; -$accent-alt: #238cf5; -$info-plinth-fg-color: #888; +$strong-input-border-color: var(--cpd-color-border-interactive-primary); +$preview-widget-bar-color: var(--cpd-color-subtle-secondary); +$accent-fg-color: #f4f6fa; +$accent-alt: var(--cpd-color-text-link-external); +$info-plinth-fg-color: var(--cpd-color-gray-900); /* ******************** */ /* Colors that aren't in Figma - we need to get rid of these */ /* ******************** */ -$dark-panel-bg-color: $secondary-accent-color; +$dark-panel-bg-color: var(--cpd-color-bg-subtle-secondary); $muted-fg-color: #61708b; $light-fg-color: #747474; $focus-bg-color: $preview-widget-bar-color; @@ -122,7 +146,7 @@ $settings-subsection-fg-color: $muted-fg-color; /* Room */ /* ******************** */ -$room-icon-unread-color: $secondary-content; +$room-icon-unread-color: var(--cpd-color-icon-tertiary); /* ******************** */ /* RoomHeader */ @@ -154,13 +178,14 @@ $input-darker-fg-color: #9fa9ba; $input-lighter-bg-color: $secondary-accent-color; $input-underline-color: rgba(151, 151, 151, 0.5); $input-fg-color: rgba(74, 74, 74, 0.9); +$input-placeholder: var(--cpd-color-text-placeholder); /* ******************** */ /* Dialog */ /* ******************** */ -$dialog-title-fg-color: #45474a; +$dialog-title-fg-color: var(--cpd-color-text-primary); $dialog-backdrop-color: rgba(46, 48, 51, 0.38); -$dialog-close-fg-color: #c1c1c1; +$dialog-close-fg-color: $icon-button-color; $dialog-close-external-color: $background; $dialog-shadow-color: rgba(0, 0, 0, 0.48); /* ******************** */ @@ -174,19 +199,19 @@ $imagebody-giflabel-color: $background; /* RoomList */ /* ******************** */ -$roomlist-bg-color: rgba(245, 245, 245, 0.9); +$roomlist-bg-color: var(--cpd-color-bg-subtle-secondary); $roomsublist-skeleton-ui-bg: linear-gradient(180deg, $background 0%, #ffffff00 100%); $roomtile-default-badge-bg-color: $muted-fg-color; /* ******************** */ /* e2e */ /* ******************** */ -$e2e-verified-color: #0dbd8b; -$e2e-unknown-color: #e8bf37; -$e2e-unverified-color: #e8bf37; -$e2e-warning-color: #ff5b55; -$e2e-verified-color-light: rgba($e2e-verified-color, 0.06); -$e2e-warning-color-light: rgba($e2e-warning-color, 0.06); +$e2e-verified-color: var(--cpd-color-green-900); +$e2e-unknown-color: var(--cpd-color-yellow-900); +$e2e-unverified-color: var(--cpd-color-green-900); +$e2e-warning-color: var(--cpd-color-red-900); +$e2e-verified-color-light: var(--cpd-color-green-300); +$e2e-warning-color-light: var(--cpd-color-red-300); /* ******************** */ /* Tabbed views */ @@ -207,7 +232,7 @@ $button-danger-disabled-bg-color: #f5b6bb; /* TODO: Verify color */ /* Toggle switch */ /* ******************** */ $togglesw-off-color: #c1c9d6; -$togglesw-ball-color: $background; +$togglesw-ball-color: var(--cpd-color-bg-action-primary-rest); /* ******************** */ /* Authpage */ @@ -216,8 +241,9 @@ $authpage-primary-color: #232f32; $authpage-bg-color: #2e3649; $authpage-modal-bg-color: $roomlist-bg-color; $authpage-focus-bg-color: $focus-bg-color; -$authpage-lang-color: #4e5054; -$authpage-secondary-color: $muted-fg-color; +$authpage-lang-color: $secondary-content; +$authpage-primary-color: $primary-content; +$authpage-secondary-color: $secondary-content; /* ******************** */ /* Message action bar */ @@ -281,7 +307,7 @@ $call-light-quaternary-content: #c1c6cd; /* One-off colors */ /* ******************** */ $progressbar-bg-color: $panel-actions; -$kbd-border-color: $message-action-bar-border-color; +$kbd-border-color: $strong-input-border-color; $visual-bell-bg-color: #faa; $event-timestamp-color: #acacac; $slider-background-color: $togglesw-off-color; @@ -302,6 +328,7 @@ $selected-color: $secondary-accent-color; $pinned-color: $tertiary-content; $avatar-initial-color: $background; $primary-hairline-color: transparent; +$secondary-hairline-color: var(--cpd-color-gray-300); $focus-brightness: 105%; /* ******************** */ @@ -320,14 +347,14 @@ $copy-button-url: "$(res)/img/element-icons/copy.svg"; /* Location sharing */ /* ******************** */ -$location-marker-color: #ffffff; -$location-live-color: #5c56f5; -$location-live-secondary-color: #deddfd; +$location-marker-color: var(--cpd-color-icon-on-solid-primary); +$location-live-color: var(--cpd-color-purple-900); +$location-live-secondary-color: var(--cpd-color-purple-600); /* ******************** */ /* Voice Broadcast */ /* ******************** */ -$live-badge-color: #ffffff; +$live-badge-color: var(--cpd-color-icon-on-solid-primary); /* ******************** */ body { @@ -339,11 +366,11 @@ body { /* diff highlight colors */ /* ******************** */ .hljs-addition { - background: #dfd; + background: var(--cpd-color-green-500); } .hljs-deletion { - background: #fdd; + background: var(--cpd-color-red-500); } /* ******************** */ diff --git a/res/themes/light/css/light.pcss b/res/themes/light/css/light.pcss index 4c661ae5c6..e9335ad8d5 100644 --- a/res/themes/light/css/light.pcss +++ b/res/themes/light/css/light.pcss @@ -1,3 +1,5 @@ +@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css"); + @import "../../../../res/css/_font-sizes.pcss"; @import "_paths.pcss"; @import "_fonts.pcss";