Introduce CSS custom properties to _TopUnreadMessagesBar.pcss

[luixxiul]

Closes element-hq/element-web#25282

This PR suggests to update _TopUnreadMessagesBar.pcss by introducing CSS custom properties, splitting structural definitions from their values. This way it will become possible to access and manipulate those values via TypeScript to change, for example, the border color and size, maintaining the style structure.

type: task

	Image
TopUnreadMessageBar
mx_TopUnreadMessagesBar_scrollUp cascading
mx_TopUnreadMessagesBar_markAsRead cascading

Checklist

• Tests written for new code (and old code if feasible)
• Linter and other CI checks pass
• Sign-off given on the changes (see CONTRIBUTING.md)

---

This change is marked as an internal change (Task), so will not be included in the changelog.

[luixxiul]

Please note that using names which seem general for properties does not matter here, because the custom properties cascade (this is one of the main differences between the custom property and the preprocessor's variable). Even if --height, for example, is specified somewhere outside of this file / the selector, its value is not respected, because the value is explicitly specified below for each selector (--height: 38px and --height: 18px) and overridden. Comments for each variable are also simply redundant, as those variables are limited to those selectors, and it is obvious by themselves how they work. It would be like adding a comment to a declaration display: inherit that the value for this declaration is inherited, which we would not do.

[luixxiul]

--width: 18px and --height: 18px do not need to be repeated here, as they are inherited from mx_TopUnreadMessagesBar_markAsRead.

[richvdh]

what is the reason for nesting these where they were not before?

[luixxiul]

To avoid repeating the same declarations, and to make the structure compact. Would you rather write like this?

    .mx_TopUnreadMessagesBar_scrollUp {
        background: var(--background);
        width: var(--width);
        height: var(--height);
        border: var(--border);
        border-radius: var(--borderRadius);

        --background: $background;
        --border: 1.3px solid $muted-fg-color;

        &::before {
            content: "";
            position: absolute;
            background: var(--background);
            width: var(--width);
            height: var(--height);
            mask-repeat: no-repeat;
            mask-position: center;
            mask-image: var(--maskImage);
            mask-size: var(--maskSize);

            --background: $muted-fg-color;
        }
    }

    .mx_TopUnreadMessagesBar_markAsRead {
        background: var(--background);
        width: var(--width);
        height: var(--height);
        border: var(--border);
        border-radius: var(--borderRadius);

        --background: $background;
        --border: 1.3px solid $muted-fg-color;

        &::before {
            content: "";
            position: absolute;
            background: var(--background);
            width: var(--width);
            height: var(--height);
            mask-repeat: no-repeat;
            mask-position: center;
            mask-image: var(--maskImage);
            mask-size: var(--maskSize);

            --background: $muted-fg-color;
        }
    }

It works, but it's not really efficient.

[luixxiul]

Also, it seems to me that there has not been a specific reason either that those selectors were not combined, checking a commit like ac9902e#diff-21b2361c0ea031da22f3680c5912c17ccc3d86c5bad901dd533f004cde3efa32 of #2345 and 07348a6#diff-21b2361c0ea031da22f3680c5912c17ccc3d86c5bad901dd533f004cde3efa32 of #4159.

[richvdh]

I'm afraid I don't understand your answer. I think you are explaining why .mx_TopUnreadMessagesBar_scrollUp and .mx_TopUnreadMessagesBar_markAsRead are combined, but I didn't ask that. I asked why they are nested (inside .mx_TopUnreadMessagesBar).