matrix-org · germain-gg · Jul 12, 2023 · Jun 13, 2023 · Jun 13, 2023 · Jun 16, 2023
@@ -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
             }
         });
 

@@ -305,9 +305,9 @@ describe("Appearance user settings tab", () => {
 
             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)
+                // $primary-content on the light theme = #17191c = rgb(27, 29, 34)
                 cy.get(".mx_TextualEvent.mx_GenericEventListSummary_summary")
-                    .should("have.css", "color", "rgb(23, 25, 28)")
+                    .should("have.css", "color", "rgb(27, 29, 34)")
                     .should("have.css", "opacity", "0.5");
             });
 
@@ -320,9 +320,9 @@ describe("Appearance user settings tab", () => {
 
             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)
+                // $secondary-content on the high contrast theme = #5e6266 = rgb(71, 74, 81)
                 cy.get(".mx_TextualEvent.mx_GenericEventListSummary_summary")
-                    .should("have.css", "color", "rgb(94, 98, 102)")
+                    .should("have.css", "color", "rgb(71, 74, 81)")
                     .should("have.css", "opacity", "1");
             });
         });

@@ -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");
 

@@ -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 {

@@ -16,5 +16,5 @@ limitations under the License.
 
 .mx_KebabContextMenu_icon {
     width: 24px;
-    color: $secondary-content;
+    color: $icon-button-color;
 }
@@ -20,7 +20,7 @@ limitations under the License.
     background: transparent;
 
     border-radius: 4px;
-    color: $secondary-content;
+    color: $icon-button-color;
 
     --icon-transform: rotate(-90deg);
 

@@ -53,7 +53,7 @@ limitations under the License.
 
     &.Inactive {
         --icon-color: $secondary-content;
-        --background-color: $system;
+        --background-color: $panels;
     }
 }
 

@@ -23,7 +23,7 @@ limitations under the License.
 }
 
 .mx_DeviceTypeIcon_deviceIconWrapper {
-    --background-color: $system;
+    --background-color: $panels;
     --icon-color: $secondary-content;
 
     height: 40px;

@@ -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;
 }

@@ -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 {

@@ -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);
                 }
             }
         }

@@ -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;

@@ -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;
 

@@ -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;
     }

@@ -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;
         }
     }
 

@@ -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;

@@ -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;
         }
     }
 

@@ -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;
         }
     }
 

@@ -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;
     }
 

@@ -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 {

@@ -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 {

@@ -45,7 +45,7 @@ limitations under the License.
     }
 
     .mx_SSOButton:hover {
-        background-color: $panel-hover;
+        background-color: $panel-actions;
     }
 
     .mx_SSOButton_default {

@@ -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,11 @@ limitations under the License.
         background: $accent;
         border-color: $accent;
     }
+
+
+    &:checked:disabled + label > .mx_Checkbox_background {
+        opacity: .5;
+    }
 }
 
 .mx_Checkbox.mx_Checkbox_kind_outline input[type="checkbox"] {

@@ -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;
 

@@ -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;
     }
 }