Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 38d24f1

Browse files
author
Germain
authored
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
1 parent db52cdd commit 38d24f1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+399
-301
lines changed

‎cypress/e2e/room/room-header.spec.ts

+1-11
Original file line numberDiff line numberDiff line change
@@ -116,17 +116,7 @@ describe("Room Header", () => {
116116
const buttonsHighlighted = ["Threads", "Notifications", "Room info"];
117117

118118
for (const name of buttonsHighlighted) {
119-
cy.findByRole("button", { name: name })
120-
.click() // Highlight the button
121-
.then(($btn) => {
122-
// Note it is not possible to get CSS values of a pseudo class with "have.css".
123-
const color = $btn[0].ownerDocument.defaultView // get window reference from element
124-
.getComputedStyle($btn[0], "before") // get the pseudo selector
125-
.getPropertyValue("background-color"); // get "background-color" value
126-
127-
// Assert the value is equal to $accent == hex #0dbd8b == rgba(13, 189, 139)
128-
expect(color).to.eq("rgb(13, 189, 139)");
129-
});
119+
cy.findByRole("button", { name: name }).click(); // Highlight the button
130120
}
131121
});
132122

‎cypress/e2e/settings/appearance-user-settings-tab.spec.ts

-27
Original file line numberDiff line numberDiff line change
@@ -299,32 +299,5 @@ describe("Appearance user settings tab", () => {
299299
cy.findByLabelText("Use high contrast").should("not.exist");
300300
},
301301
);
302-
303-
it("should support enabling the high contast theme", () => {
304-
cy.createRoom({ name: "Test Room" }).viewRoomByName("Test Room");
305-
306-
cy.get(".mx_GenericEventListSummary").within(() => {
307-
// Assert that $primary-content is applied to GELS summary on the light theme
308-
// $primary-content on the light theme = #17191c = rgb(23, 25, 28)
309-
cy.get(".mx_TextualEvent.mx_GenericEventListSummary_summary")
310-
.should("have.css", "color", "rgb(23, 25, 28)")
311-
.should("have.css", "opacity", "0.5");
312-
});
313-
314-
cy.openUserSettings("Appearance")
315-
.findByTestId("mx_ThemeChoicePanel")
316-
.findByLabelText("Use high contrast")
317-
.click({ force: true }); // force click because the size of the checkbox is zero
318-
319-
cy.closeDialog();
320-
321-
cy.get(".mx_GenericEventListSummary").within(() => {
322-
// Assert that $secondary-content is specified for GELS summary on the high contrast theme
323-
// $secondary-content on the high contrast theme = #5e6266 = rgb(94, 98, 102)
324-
cy.get(".mx_TextualEvent.mx_GenericEventListSummary_summary")
325-
.should("have.css", "color", "rgb(94, 98, 102)")
326-
.should("have.css", "opacity", "1");
327-
});
328-
});
329302
});
330303
});

‎cypress/e2e/threads/threads.spec.ts

-20
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,6 @@ describe("Threads", () => {
6464
"Hello there. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt " +
6565
"ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi";
6666

67-
// --MessageTimestamp-color = #acacac = rgb(172, 172, 172)
68-
// See: _MessageTimestamp.pcss
69-
const MessageTimestampColor = "rgb(172, 172, 172)";
7067
const ThreadViewGroupSpacingStart = "56px"; // --ThreadView_group_spacing-start
7168
// Exclude timestamp and read marker from snapshots
7269
const percyCSS = ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker { visibility: hidden !important; }";
@@ -75,13 +72,6 @@ describe("Threads", () => {
7572
// User sends message
7673
cy.findByRole("textbox", { name: "Send a message…" }).type("Hello Mr. Bot{enter}");
7774

78-
// Check the colour of timestamp on the main timeline
79-
cy.get(".mx_EventTile_last .mx_EventTile_line .mx_MessageTimestamp").should(
80-
"have.css",
81-
"color",
82-
MessageTimestampColor,
83-
);
84-
8575
// Wait for message to send, get its ID and save as @threadId
8676
cy.contains(".mx_EventTile[data-scroll-tokens]", "Hello Mr. Bot")
8777
.invoke("attr", "data-scroll-tokens")
@@ -151,13 +141,6 @@ describe("Threads", () => {
151141
cy.get(".mx_ThreadView").within(() => {
152142
// User responds in thread
153143
cy.findByRole("textbox", { name: "Send a message…" }).type("Test{enter}");
154-
155-
// Check the colour of timestamp on EventTile in a thread (mx_ThreadView)
156-
cy.get(".mx_EventTile_last[data-layout='group'] .mx_EventTile_line .mx_MessageTimestamp").should(
157-
"have.css",
158-
"color",
159-
MessageTimestampColor,
160-
);
161144
});
162145

163146
// User asserts summary was updated correctly
@@ -307,9 +290,6 @@ describe("Threads", () => {
307290
// Check the number of the replies
308291
cy.get(".mx_ThreadPanel_replies_amount").findByText("2").should("exist");
309292

310-
// Check the colour of timestamp on thread list
311-
cy.get(".mx_EventTile_details .mx_MessageTimestamp").should("have.css", "color", MessageTimestampColor);
312-
313293
// Make sure the notification dot is visible
314294
cy.get(".mx_NotificationBadge_visible").should("be.visible");
315295

‎res/css/_common.pcss

+10-8
Original file line numberDiff line numberDiff line change
@@ -250,7 +250,7 @@ legend {
250250
background-color: transparent;
251251
color: $input-darker-fg-color;
252252
border-radius: 4px;
253-
border: 1px solid rgba($primary-content, 0.1);
253+
border: 1px solid $secondary-hairline-color;
254254
/* these things should probably not be defined globally */
255255
margin: 9px;
256256
}
@@ -263,7 +263,7 @@ legend {
263263
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::placeholder,
264264
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::placeholder,
265265
.mx_textinput input::placeholder {
266-
color: rgba($input-darker-fg-color, 0.75);
266+
color: $input-placeholder;
267267
}
268268
}
269269

@@ -584,9 +584,9 @@ legend {
584584

585585
/* flip colours for the secondary ones */
586586
font-weight: var(--cpd-font-weight-semibold);
587-
border: 1px solid $accent;
587+
border: 1px solid currentColor;
588588
color: $accent;
589-
background-color: $button-secondary-bg-color;
589+
background-color: transparent;
590590
font-family: inherit;
591591
}
592592

@@ -808,18 +808,19 @@ legend {
808808
mask-size: contain;
809809
height: 18px;
810810
min-width: 18px;
811-
background-color: $secondary-content !important;
811+
background-color: $icon-button-color !important;
812812
}
813813

814814
@define-mixin composerButtonHighLight {
815-
background: rgba($accent, 0.25);
815+
/* TODO: Refactor as this will break for apps that override the accent color */
816+
background: var(--cpd-color-green-300);
816817
/* make the icon the accent color too */
817818
&::before {
818819
background-color: $accent !important;
819820
}
820821
}
821822

822-
@define-mixin composerButton $border-radius, $hover-color {
823+
@define-mixin composerButton $border-radius, $hover-color, $hover-bg {
823824
--size: 26px;
824825
position: relative;
825826
cursor: pointer;
@@ -840,6 +841,7 @@ legend {
840841
mask-repeat: no-repeat;
841842
mask-size: contain;
842843
mask-position: center;
844+
z-index: 2;
843845
}
844846

845847
&::after {
@@ -855,7 +857,7 @@ legend {
855857

856858
&:hover {
857859
&::after {
858-
background: rgba($hover-color, 0.1);
860+
background: $hover-bg;
859861
}
860862

861863
&::before {

‎res/css/components/views/context_menus/_KebabContextMenu.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,5 @@ limitations under the License.
1616

1717
.mx_KebabContextMenu_icon {
1818
width: 24px;
19-
color: $secondary-content;
19+
color: $icon-button-color;
2020
}

‎res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ limitations under the License.
2020
background: transparent;
2121

2222
border-radius: 4px;
23-
color: $secondary-content;
23+
color: $icon-button-color;
2424

2525
--icon-transform: rotate(-90deg);
2626

‎res/css/components/views/settings/devices/_DeviceSecurityCard.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ limitations under the License.
5353

5454
&.Inactive {
5555
--icon-color: $secondary-content;
56-
--background-color: $system;
56+
--background-color: $panels;
5757
}
5858
}
5959

‎res/css/components/views/settings/devices/_DeviceTypeIcon.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ limitations under the License.
2323
}
2424

2525
.mx_DeviceTypeIcon_deviceIconWrapper {
26-
--background-color: $system;
26+
--background-color: $panels;
2727
--icon-color: $secondary-content;
2828

2929
height: 40px;

‎res/css/components/views/settings/devices/_FilteredDeviceListHeader.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ limitations under the License.
2626
padding: 0 $spacing-16;
2727
margin-bottom: $spacing-32;
2828

29-
background-color: $system;
29+
background-color: $panels;
3030
border-radius: 8px;
3131
color: $secondary-content;
3232
}

‎res/css/compound/_Icon.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ limitations under the License.
2929
}
3030

3131
.mx_Icon_bg-accent-light {
32-
background-color: rgba($accent, 0.1);
32+
background-color: $accent-300;
3333
}
3434

3535
.mx_Icon_alert {

‎res/css/structures/_FilePanel.pcss

+2-1
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,8 @@ limitations under the License.
100100

101101
.mx_MessageTimestamp {
102102
text-align: right;
103-
font: var(--cpd-font-body-md-regular);
103+
color: $secondary-content;
104+
font: var(--cpd-font-body-sm-regular);
104105
}
105106
}
106107
}

‎res/css/structures/_LeftPanel.pcss

-7
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,6 @@ See the License for the specific language governing permissions and
1414
limitations under the License.
1515
*/
1616

17-
.mx_MatrixChat--with-avatar {
18-
.mx_LeftPanel,
19-
.mx_LeftPanel .mx_LeftPanel_roomListContainer {
20-
background-color: transparent;
21-
}
22-
}
23-
2417
.mx_LeftPanel_outerWrapper {
2518
display: flex;
2619
flex-direction: column;

‎res/css/structures/_RoomView.pcss

+2-2
Original file line numberDiff line numberDiff line change
@@ -258,8 +258,8 @@ limitations under the License.
258258
height: var(--RoomHeader-indicator-dot-size);
259259
border-radius: 50%;
260260
transform: scale(1);
261-
background: rgba(var(--RoomHeader-indicator-pulseColor), 1);
262-
box-shadow: 0 0 0 0 rgba(var(--RoomHeader-indicator-pulseColor), 1);
261+
background: var(--RoomHeader-indicator-pulseColor);
262+
box-shadow: 0 0 0 0 var(--RoomHeader-indicator-pulseColor);
263263
animation: mx_Indicator_pulse 2s infinite;
264264
animation-iteration-count: 1;
265265

‎res/css/structures/_SpacePanel.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -368,7 +368,7 @@ limitations under the License.
368368

369369
.mx_UserMenu {
370370
padding: 0 2px 8px;
371-
border-bottom: 1px solid $quinary-content;
371+
border-bottom: 1px solid $separator;
372372
margin: 12px 14px 4px 18px;
373373
max-width: 226px;
374374
}

‎res/css/structures/_UserMenu.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ limitations under the License.
172172
mask-position: center;
173173
mask-size: contain;
174174
mask-repeat: no-repeat;
175-
background: $primary-content;
175+
background: $icon-button-color;
176176
}
177177
}
178178

‎res/css/views/beta/_BetaCard.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ limitations under the License.
1616

1717
.mx_BetaCard {
1818
padding: $spacing-24;
19-
background-color: $system;
19+
background-color: $panels;
2020
border-radius: 8px;
2121
box-sizing: border-box;
2222
color: $secondary-content;

‎res/css/views/context_menus/_IconizedContextMenu.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ limitations under the License.
137137
mask-position: center;
138138
mask-size: contain;
139139
mask-repeat: no-repeat;
140-
background-color: $secondary-content;
140+
background-color: $icon-button-color;
141141
}
142142
}
143143

‎res/css/views/context_menus/_MessageContextMenu.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ limitations under the License.
2929
mask-position: center;
3030
mask-size: contain;
3131
mask-repeat: no-repeat;
32-
background: $primary-content;
32+
background: $icon-button-color;
3333
}
3434
}
3535

‎res/css/views/dialogs/_PollCreateDialog.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ limitations under the License.
1818
.mx_PollCreateDialog_busy {
1919
position: absolute;
2020
inset: 0;
21-
background-color: rgba($background, 0.6);
21+
background-color: $overlay-background;
2222
z-index: 1;
2323
}
2424

‎res/css/views/elements/_AccessibleButton.pcss

-1
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,6 @@ limitations under the License.
105105

106106
&.mx_AccessibleButton_kind_primary_outline {
107107
color: $accent;
108-
background-color: $button-secondary-bg-color;
109108
}
110109

111110
&.mx_AccessibleButton_kind_secondary {

‎res/css/views/elements/_GenericEventListSummary.pcss

+2
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@ limitations under the License.
110110
/* Make all state events one order smaller than the other events */
111111
.mx_EventTile {
112112
font: var(--cpd-font-body-sm-regular);
113+
color: $secondary-content;
113114
}
114115
}
115116

@@ -121,6 +122,7 @@ limitations under the License.
121122
.mx_TextualEvent.mx_GenericEventListSummary_summary {
122123
font: var(--cpd-font-body-sm-regular);
123124
display: inline-flex;
125+
color: $secondary-content;
124126
}
125127

126128
.mx_GenericEventListSummary_avatars {

‎res/css/views/elements/_SSOButtons.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ limitations under the License.
4545
}
4646

4747
.mx_SSOButton:hover {
48-
background-color: $panel-hover;
48+
background-color: $panel-actions;
4949
}
5050

5151
.mx_SSOButton_default {

‎res/css/views/elements/_StyledCheckbox.pcss

+5-3
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,7 @@ limitations under the License.
4242
height: $size;
4343
width: $size;
4444
size: 0.5rem;
45-
46-
border: 1px solid rgba($muted-fg-color, 0.5);
45+
border: 1px solid $strong-input-border-color;
4746
box-sizing: border-box;
4847
border-radius: $border-radius;
4948

@@ -68,7 +67,6 @@ limitations under the License.
6867
}
6968

7069
&:disabled + label {
71-
opacity: 0.5;
7270
cursor: not-allowed;
7371
}
7472

@@ -89,6 +87,10 @@ limitations under the License.
8987
background: $accent;
9088
border-color: $accent;
9189
}
90+
91+
&:checked:disabled + label > .mx_Checkbox_background {
92+
opacity: 0.5;
93+
}
9294
}
9395

9496
.mx_Checkbox.mx_Checkbox_kind_outline input[type="checkbox"] {

‎res/css/views/elements/_StyledRadioButton.pcss

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ limitations under the License.
2020
*/
2121

2222
.mx_StyledRadioButton {
23-
$radio-circle-color: $quaternary-content;
23+
$radio-circle-color: $strong-input-border-color;
2424
$active-radio-circle-color: $accent;
2525
position: relative;
2626

0 commit comments

Comments
 (0)