Absorb the matrix-react-sdk repository (#28192)

Co-authored-by: github-merge-queue <118344674+github-merge-queue@users.noreply.github.com>
Co-authored-by: github-merge-queue <github-merge-queue@users.noreply.github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
Co-authored-by: Kim Brose <kim.brose@nordeck.net>
Co-authored-by: Florian Duros <florianduros@element.io>
Co-authored-by: R Midhun Suresh <hi@midhun.dev>
Co-authored-by: dbkr <986903+dbkr@users.noreply.github.com>
Co-authored-by: ElementRobot <releases@riot.im>
Co-authored-by: dbkr <dbkr@users.noreply.github.com>
Co-authored-by: David Baker <dbkr@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
Co-authored-by: David Langley <davidl@element.io>
Co-authored-by: Michael Weimann <michaelw@matrix.org>
Co-authored-by: Timshel <Timshel@users.noreply.github.com>
Co-authored-by: Sahil Silare <32628578+sahil9001@users.noreply.github.com>
Co-authored-by: Will Hunt <will@half-shot.uk>
Co-authored-by: Hubert Chathi <hubert@uhoreg.ca>
Co-authored-by: Andrew Ferrazzutti <andrewf@element.io>
Co-authored-by: Robin <robin@robin.town>
Co-authored-by: Tulir Asokan <tulir@maunium.net>

res/css/views/elements/_AccessibleButton.pcss

@@ -0,0 +1,196 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2017 Vector Creations Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_AccessibleButton {
+    cursor: pointer;
+
+    &.mx_AccessibleButton_disabled {
+        cursor: not-allowed;
+
+        &.mx_AccessibleButton_kind_icon_primary,
+        &.mx_AccessibleButton_kind_icon_primary_outline,
+        &.mx_AccessibleButton_kind_primary,
+        &.mx_AccessibleButton_kind_primary_outline,
+        &.mx_AccessibleButton_kind_primary_sm,
+        &.mx_AccessibleButton_kind_link,
+        &.mx_AccessibleButton_kind_link_accent,
+        &.mx_AccessibleButton_kind_link_inline,
+        &.mx_AccessibleButton_kind_danger_inline,
+        &.mx_AccessibleButton_kind_content_inline,
+        &.mx_AccessibleButton_kind_link_sm {
+            opacity: 0.4;
+        }
+    }
+
+    &.mx_AccessibleButton_hasKind {
+        padding: 7px 18px;
+        text-align: center;
+        border-radius: 24px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font: var(--cpd-font-body-md-semibold);
+        border: none; /* override default <button /> styles */
+        word-break: keep-all; /* prevent button text in Chinese/Japanese/Korean (CJK) from being collapsed */
+
+        &.mx_AccessibleButton_kind_primary_sm,
+        &.mx_AccessibleButton_kind_danger_sm,
+        &.mx_AccessibleButton_kind_link_sm {
+            padding: 5px 12px;
+        }
+
+        &.mx_AccessibleButton_kind_primary_sm {
+            color: var(--cpd-color-text-on-solid-primary);
+            background-color: var(--cpd-color-bg-action-primary-rest);
+        }
+
+        &.mx_AccessibleButton_kind_danger_sm {
+            color: var(--cpd-color-text-on-solid-primary);
+            background-color: var(--cpd-color-bg-critical-primary);
+        }
+
+        &.mx_AccessibleButton_kind_link_sm {
+            color: var(--cpd-color-text-primary);
+            text-decoration: underline;
+            font-weight: var(--cpd-font-weight-semibold);
+        }
+
+        &.mx_AccessibleButton_kind_confirm_sm {
+            background-color: var(--cpd-color-bg-action-primary-rest);
+
+            &::before {
+                mask-image: url("$(res)/img/feather-customised/check.svg");
+            }
+        }
+
+        &.mx_AccessibleButton_kind_cancel_sm {
+            background-color: var(--cpd-color-bg-critical-primary);
+
+            &::before {
+                mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
+            }
+        }
+
+        &.mx_AccessibleButton_kind_icon,
+        &.mx_AccessibleButton_kind_icon_primary,
+        &.mx_AccessibleButton_kind_icon_primary_outline {
+            padding: 0;
+            height: 32px;
+            width: 32px;
+        }
+    }
+
+    &.mx_AccessibleButton_kind_icon_primary,
+    &.mx_AccessibleButton_kind_icon_primary_outline,
+    &.mx_AccessibleButton_kind_primary,
+    &.mx_AccessibleButton_kind_primary_outline,
+    &.mx_AccessibleButton_kind_secondary {
+        font-weight: var(--cpd-font-weight-semibold);
+    }
+
+    &.mx_AccessibleButton_kind_icon_primary,
+    &.mx_AccessibleButton_kind_primary {
+        border: 1px solid var(--cpd-color-bg-action-primary-rest);
+        color: var(--cpd-color-text-on-solid-primary);
+        background-color: var(--cpd-color-bg-action-primary-rest);
+    }
+
+    &.mx_AccessibleButton_kind_icon_primary_outline,
+    &.mx_AccessibleButton_kind_primary_outline {
+        border: 1px solid var(--cpd-color-border-interactive-secondary);
+        color: var(--cpd-color-text-primary);
+    }
+
+    &.mx_AccessibleButton_kind_secondary {
+        color: var(--cpd-color-text-primary);
+        text-decoration: underline;
+    }
+
+    &.mx_AccessibleButton_kind_secondary_content {
+        color: $secondary-content;
+    }
+
+    &.mx_AccessibleButton_kind_danger {
+        color: var(--cpd-color-text-on-solid-primary);
+        background-color: var(--cpd-color-bg-critical-primary);
+
+        &.mx_AccessibleButton_disabled {
+            color: var(--cpd-color-text-on-solid-primary);
+            background-color: var(--cpd-color-bg-critical-primary);
+        }
+    }
+
+    &.mx_AccessibleButton_kind_danger_outline {
+        color: var(--cpd-color-text-critical-primary);
+        background-color: transparent;
+        border: 1px solid var(--cpd-color-border-critical-subtle);
+
+        &.mx_AccessibleButton_disabled {
+            color: var(--cpd-color-text-disabled);
+            border-color: var(--cpd-color-border-disabled);
+        }
+    }
+
+    &.mx_AccessibleButton_kind_danger_sm {
+        &.mx_AccessibleButton_disabled {
+            color: var(--cpd-color-text-disabled);
+            background-color: var(--cpd-color-bg-subtle-primary);
+        }
+    }
+
+    &.mx_AccessibleButton_kind_link,
+    &.mx_AccessibleButton_kind_link_inline,
+    &.mx_AccessibleButton_kind_danger_inline,
+    &.mx_AccessibleButton_kind_content_inline {
+        font-size: inherit;
+        font-weight: var(--cpd-font-weight-semibold);
+        line-height: inherit;
+        padding: 0;
+        text-decoration: underline;
+    }
+
+    &.mx_AccessibleButton_kind_link,
+    &.mx_AccessibleButton_kind_link_inline {
+        color: var(--cpd-color-text-primary);
+    }
+
+    &.mx_AccessibleButton_kind_danger_inline {
+        color: var(--cpd-color-text-critical-primary);
+    }
+
+    &.mx_AccessibleButton_kind_content_inline {
+        color: $primary-content;
+    }
+
+    &.mx_AccessibleButton_kind_link_inline,
+    &.mx_AccessibleButton_kind_danger_inline,
+    &.mx_AccessibleButton_kind_content_inline {
+        display: inline;
+    }
+
+    &.mx_AccessibleButton_kind_confirm_sm,
+    &.mx_AccessibleButton_kind_cancel_sm {
+        padding: 0px;
+        width: 16px;
+        height: 16px;
+        border-radius: 100%;
+        position: relative;
+        display: block;
+
+        &::before {
+            content: "";
+            display: block;
+            position: absolute;
+            inset: 0;
+            background-color: #ffffff;
+            mask-repeat: no-repeat;
+            mask-position: center;
+            mask-size: 80%;
+        }
+    }
+}

res/css/views/elements/_CopyableText.pcss

@@ -0,0 +1,55 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 Šimon Brandner <simon.bra.ag@gmail.com>
+Copyright 2019 New Vector Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_CopyableText {
+    align-items: flex-start;
+    display: flex;
+    justify-content: space-between;
+    width: max-content;
+    max-width: 100%;
+
+    &.mx_CopyableText_border {
+        overflow: auto;
+        border-radius: 5px;
+        border: solid 1px $light-fg-color;
+        margin-bottom: 10px;
+        margin-top: 10px;
+        padding: 10px 0 10px 10px;
+    }
+
+    .mx_CopyableText_copyButton {
+        flex-shrink: 0;
+        /* using em here to adapt to the local font size */
+        width: 1em;
+        height: 1em;
+        cursor: pointer;
+        padding-left: 12px;
+        padding-right: 10px;
+        display: block;
+        /* If the copy button is used within a scrollable div, make it stick to the right while scrolling */
+        position: sticky;
+        right: 0;
+        /* center to first line */
+        top: 0.15em;
+        background-color: $background;
+
+        &::before {
+            content: "";
+            mask-image: url($copy-button-url);
+            mask-position: center center;
+            mask-repeat: no-repeat;
+            mask-size: contain;
+            background-color: $message-action-bar-fg-color;
+            width: 1em;
+            height: 1em;
+            display: block;
+            background-repeat: no-repeat;
+        }
+    }
+}

res/css/views/elements/_DesktopCapturerSourcePicker.pcss

@@ -0,0 +1,48 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_desktopCapturerSourcePicker {
+    overflow: hidden;
+
+    .mx_desktopCapturerSourcePicker_tab {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: flex-start;
+        height: 500px;
+        overflow: overlay;
+
+        .mx_desktopCapturerSourcePicker_source {
+            width: 50%;
+            display: flex;
+            flex-direction: column;
+
+            .mx_desktopCapturerSourcePicker_source_thumbnail {
+                margin: 4px;
+                padding: 4px;
+                border-width: 2px;
+                border-radius: 8px;
+                border-style: solid;
+                border-color: transparent;
+
+                &.mx_desktopCapturerSourcePicker_source_thumbnail_selected,
+                &:hover,
+                &:focus {
+                    border-color: $accent;
+                }
+            }
+
+            .mx_desktopCapturerSourcePicker_source_name {
+                margin: 0 4px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+        }
+    }
+}

res/css/views/elements/_DialPadBackspaceButton.pcss

@@ -0,0 +1,32 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_DialPadBackspaceButton {
+    position: relative;
+    height: 28px;
+    width: 28px;
+
+    &::before {
+        /* force this element to appear on the DOM */
+        content: "";
+
+        background-color: #8d97a5;
+        width: inherit;
+        height: inherit;
+        top: 0px;
+        left: 0px;
+        position: absolute;
+        display: inline-block;
+        vertical-align: middle;
+
+        mask-image: url("$(res)/img/element-icons/call/delete.svg");
+        mask-position: 8px;
+        mask-size: 20px;
+        mask-repeat: no-repeat;
+    }
+}

res/css/views/elements/_Dropdown.pcss

@@ -0,0 +1,128 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2017 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_Dropdown {
+    position: relative;
+    color: $primary-content;
+}
+
+.mx_Dropdown_disabled {
+    opacity: 0.3;
+}
+
+.mx_Dropdown_input {
+    display: flex;
+    align-items: center;
+    position: relative;
+    border-radius: 8px;
+    border: 1px solid var(--cpd-color-border-interactive-secondary);
+    font: var(--cpd-font-body-sm-regular);
+    user-select: none;
+}
+
+.mx_Dropdown_input.mx_AccessibleButton_disabled {
+    cursor: not-allowed;
+}
+
+.mx_Dropdown_input:focus {
+    border-color: $accent-alt;
+}
+
+/* Disable dropdown highlight on focus */
+.mx_Dropdown_input.mx_AccessibleButton:focus {
+    filter: none;
+}
+
+.mx_Dropdown_arrow {
+    width: 10px;
+    height: 6px;
+    padding-right: 9px;
+    mask: url("$(res)/img/feather-customised/dropdown-arrow.svg");
+    mask-repeat: no-repeat;
+    background: $primary-content;
+}
+
+.mx_Dropdown_option {
+    height: 35px;
+    line-height: $font-35px;
+    /* Overwrites the default padding for any li elements */
+    padding: 0 8px;
+}
+
+.mx_Dropdown_input > .mx_Dropdown_option {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    display: inline-flex;
+    align-items: center;
+}
+
+.mx_Dropdown_option div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.mx_Dropdown_option img,
+.mx_Dropdown_option .mx_Dropdown_option_emoji {
+    margin: 5px;
+    width: 16px;
+    vertical-align: middle;
+}
+
+.mx_Dropdown_option_emoji {
+    font-size: $font-16px;
+    line-height: $font-16px;
+}
+
+input.mx_Dropdown_option,
+input.mx_Dropdown_option:focus {
+    font-weight: normal;
+    border: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    /* XXX: hack to prevent text box being too big and pushing */
+    /* its parent out / overlapping the dropdown arrow. Only really */
+    /* works in the Country dropdown. */
+    width: 60%;
+}
+
+.mx_Dropdown_menu {
+    position: absolute;
+    left: -1px;
+    right: -1px;
+    top: 100%;
+    z-index: 2;
+    margin: 0;
+    padding: 0px;
+    border-radius: 4px;
+    border: 1px solid $accent-alt;
+    background-color: $background;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.mx_Dropdown_menu .mx_Dropdown_option {
+    height: auto;
+    min-height: 35px;
+}
+
+ul.mx_Dropdown_menu li.mx_Dropdown_option {
+    list-style: none;
+}
+
+.mx_Dropdown_menu .mx_Dropdown_option_highlight {
+    background-color: $focus-bg-color;
+}
+
+.mx_Dropdown_searchPrompt {
+    font-weight: normal;
+    margin-left: 5px;
+    margin-bottom: 5px;
+}

res/css/views/elements/_EditableItemList.pcss

@@ -0,0 +1,52 @@
+/*
+Copyright 2017-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_EditableItemList {
+    margin-top: 12px;
+    margin-bottom: 10px;
+}
+
+.mx_EditableItem {
+    display: flex;
+    margin-bottom: 5px;
+}
+
+.mx_EditableItem_delete {
+    @mixin customisedCancelButton;
+    order: 3;
+    margin-right: 5px;
+    vertical-align: middle;
+    width: 14px;
+    height: 14px;
+    background-color: $alert;
+    mask-size: 100%;
+}
+
+.mx_EditableItem_email {
+    vertical-align: middle;
+}
+
+.mx_EditableItem_promptText {
+    margin-right: 10px;
+    order: 2;
+}
+
+.mx_EditableItem_confirmBtn {
+    margin-right: 5px;
+}
+
+.mx_EditableItem_item {
+    flex: auto 1 0;
+    order: 1;
+    width: calc(100% - 14px); /* leave space for the remove button */
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+}
+
+.mx_EditableItemList_label {
+    margin-bottom: 5px;
+}

res/css/views/elements/_ErrorBoundary.pcss

@@ -0,0 +1,26 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ErrorBoundary {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.mx_ErrorBoundary_body {
+    display: flex;
+    flex-direction: column;
+    max-width: 400px;
+    align-items: center;
+
+    .mx_AccessibleButton {
+        margin-top: 5px;
+    }
+}

res/css/views/elements/_ExternalLink.pcss

@@ -0,0 +1,23 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ExternalLink {
+    color: $links;
+}
+
+.mx_ExternalLink_icon {
+    display: inline-block;
+    mask-image: url("$(res)/img/external-link.svg");
+    background-color: currentColor;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+    width: $font-11px;
+    height: $font-11px;
+    margin-left: 0.3rem;
+    vertical-align: middle;
+}

res/css/views/elements/_FacePile.pcss

@@ -0,0 +1,40 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_FacePile_more {
+    /* Needed to calculate the offset on the face pile */
+    --cpd-avatar-size: 28px;
+    position: relative;
+    border-radius: 100%;
+    width: 28px;
+    height: 28px;
+    background-color: $panels;
+    display: inline-block;
+
+    &::before {
+        content: "";
+        z-index: 1;
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: inherit;
+        width: inherit;
+        background: $tertiary-content;
+        mask-position: center;
+        mask-size: 20px;
+        mask-repeat: no-repeat;
+        mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
+    }
+}
+
+.mx_FacePile_summary {
+    margin-left: 12px;
+    font: var(--cpd-font-body-md-regular);
+    line-height: $font-24px;
+    color: $tertiary-content;
+}

res/css/views/elements/_Field.pcss

@@ -0,0 +1,184 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+/* TODO: Consider unifying with general input styles in _light.pcss */
+
+.mx_Field {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    position: relative;
+    margin: 1em 0;
+    border-radius: 8px;
+    transition: border-color 0.25s;
+    border: 1px solid var(--cpd-color-border-interactive-secondary);
+}
+
+.mx_Field_prefix {
+    border-right: 1px solid var(--cpd-color-border-interactive-secondary);
+}
+
+.mx_Field_postfix {
+    border-left: 1px solid var(--cpd-color-border-interactive-secondary);
+}
+
+.mx_Field input,
+.mx_Field select,
+.mx_Field textarea {
+    font: var(--cpd-font-body-md-regular);
+    border: none;
+    /* Even without a border here, we still need this avoid overlapping the rounded */
+    /* corners on the field above. */
+    border-radius: 8px;
+    padding: 8px 9px;
+    color: $primary-content;
+    background-color: $background;
+    flex: 1;
+    min-width: 0;
+}
+
+.mx_Field select {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    text-overflow: ellipsis;
+}
+
+/* Can't add pseudo-elements to a select directly, so we use its parent. */
+.mx_Field_select::before {
+    content: "";
+    position: absolute;
+    top: 15px;
+    right: 10px;
+    width: 10px;
+    height: 6px;
+    mask: url("$(res)/img/feather-customised/dropdown-arrow.svg");
+    mask-repeat: no-repeat;
+    background-color: $primary-content;
+    z-index: 1;
+    pointer-events: none;
+}
+
+.mx_Field:focus-within {
+    border-color: $accent-alt;
+}
+
+.mx_Field input:focus,
+.mx_Field select:focus,
+.mx_Field textarea:focus {
+    outline: 0;
+}
+
+.mx_Field input::placeholder,
+.mx_Field textarea::placeholder {
+    transition: color 0.25s ease-in 0s;
+    color: transparent;
+}
+
+.mx_Field input:placeholder-shown:focus::placeholder,
+.mx_Field textarea:placeholder-shown:focus::placeholder,
+.mx_Field.mx_Field_placeholderIsHint input::placeholder {
+    transition: color 0.25s ease-in 0.1s;
+    color: $info-plinth-fg-color;
+}
+
+.mx_Field label {
+    transition:
+        font-size 0.25s ease-out 0.1s,
+        color 0.25s ease-out 0.1s,
+        transform 0.25s ease-out 0.1s,
+        background-color 0.25s ease-out 0.1s;
+    background-color: transparent;
+    font: var(--cpd-font-body-md-regular);
+    color: var(--cpd-color-text-secondary);
+    transform: translateY(0);
+    position: absolute;
+    left: 0px;
+    margin: 7px 8px;
+    padding: 2px;
+    pointer-events: none; /* Allow clicks to fall through to the input */
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: calc(100% - 20px); /* 100% of parent minus margin and padding */
+}
+
+.mx_Field_labelAlwaysTopLeft label,
+.mx_Field select + label /* Always show a select's label on top to not collide with the value */,
+.mx_Field input:focus + label,
+.mx_Field input:not(:placeholder-shown) + label,
+.mx_Field textarea:focus + label,
+.mx_Field textarea:not(:placeholder-shown) + label {
+    transition:
+        font-size 0.25s ease-out 0s,
+        color 0.25s ease-out 0s,
+        transform 0.25s ease-out 0s,
+        background-color 0.25s ease-out 0s;
+    font-size: $font-10px;
+    transform: translateY(-13px);
+    padding: 0 2px;
+    background-color: $background;
+    pointer-events: initial;
+}
+
+.mx_Field input:focus + label,
+.mx_Field select:focus + label,
+.mx_Field textarea:focus + label {
+    color: $accent-alt;
+}
+
+.mx_Field select:disabled,
+.mx_Field select:disabled + label,
+.mx_Field input:disabled,
+.mx_Field input:disabled + label,
+.mx_Field textarea:disabled,
+.mx_Field textarea:disabled + label {
+    background-color: $background;
+    color: $info-plinth-fg-color;
+}
+
+.mx_Field_valid {
+    &.mx_Field,
+    &.mx_Field:focus-within {
+        border-color: $accent;
+    }
+
+    &.mx_Field label,
+    &.mx_Field:focus-within label {
+        color: $accent;
+    }
+}
+
+.mx_Field_invalid {
+    &.mx_Field,
+    &.mx_Field:focus-within {
+        border-color: $alert;
+    }
+
+    &.mx_Field label,
+    &.mx_Field:focus-within label {
+        color: $alert;
+    }
+}
+
+.mx_Field_tooltip {
+    width: 200px;
+}
+
+.mx_Field_tooltip.mx_Field_valid {
+    animation: mx_fadeout 1s 2s forwards;
+}
+
+/* Customise other components when placed inside a Field */
+
+.mx_Field .mx_Dropdown_input {
+    border: initial;
+    border-radius: initial;
+}
+
+.mx_Field .mx_CountryDropdown {
+    width: fit-content;
+}

res/css/views/elements/_GenericEventListSummary.pcss

@@ -0,0 +1,133 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_GenericEventListSummary {
+    position: relative;
+
+    .mx_GenericEventListSummary_avatars {
+        margin-right: $spacing-8;
+    }
+
+    .mx_GenericEventListSummary_spacer {
+        border-bottom: 1px solid $primary-hairline-color;
+        margin-left: 63px;
+        line-height: $font-30px; /* TODO: Use a variable */
+
+        .mx_IRCLayout & {
+            line-height: var(--line-height);
+        }
+    }
+
+    .mx_GenericEventListSummary_toggle {
+        /* We reuse a title cased translation */
+        text-transform: lowercase;
+    }
+
+    &[data-layout="irc"],
+    &[data-layout="group"] {
+        .mx_GenericEventListSummary_toggle {
+            float: right;
+            margin-inline: 0 10px;
+        }
+    }
+
+    &[data-layout="group"] {
+        margin-top: $spacing-8;
+    }
+
+    &[data-layout="bubble"] {
+        --maxWidth: 70%;
+        display: flex;
+        margin-left: calc(var(--avatarSize) + var(--gutterSize));
+
+        .mx_GenericEventListSummary_toggle {
+            margin-block: 0;
+
+            &[aria-expanded="false"] {
+                order: 9; /* TODO: Remove */
+            }
+
+            &[aria-expanded="true"] {
+                margin-inline-start: auto; /* reduce clickable area */
+                margin-inline-end: var(--EventTile_bubble-margin-inline-end); /* as the parent has zero margin */
+            }
+        }
+
+        .mx_GenericEventListSummary_spacer {
+            display: none;
+        }
+
+        &[data-expanded="false"] {
+            align-items: center;
+            justify-content: space-between;
+            column-gap: 5px;
+        }
+
+        /* ideally we'd use display=contents here for the layout to all work regardless of the *ELS but */
+        /* that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse. */
+        &[data-expanded="true"] {
+            flex-direction: column;
+            margin: 0;
+        }
+
+        &::after {
+            content: "";
+            clear: both;
+        }
+
+        &:hover {
+            &::before {
+                background: transparent;
+            }
+        }
+    }
+
+    .mx_MatrixChat_useCompactLayout & {
+        font-size: $font-13px;
+        margin-top: $spacing-4;
+
+        .mx_EventTile_line {
+            line-height: 1.25;
+        }
+
+        .mx_GenericEventListSummary_spacer {
+            line-height: 1.375;
+        }
+
+        .mx_TextualEvent.mx_GenericEventListSummary_summary {
+            font: var(--cpd-font-body-sm-regular);
+        }
+    }
+
+    /* Make all state events one order smaller than the other events */
+    .mx_EventTile {
+        font: var(--cpd-font-body-sm-regular);
+        color: $secondary-content;
+    }
+}
+
+.mx_GenericEventListSummary_unstyledList {
+    list-style: none;
+    padding: 0;
+}
+
+.mx_TextualEvent.mx_GenericEventListSummary_summary {
+    font: var(--cpd-font-body-sm-regular);
+    display: inline-flex;
+    color: $secondary-content;
+}
+
+.mx_GenericEventListSummary_avatars {
+    display: inline-block;
+    line-height: $font-12px;
+
+    .mx_BaseAvatar {
+        margin-right: -4px;
+        cursor: pointer;
+    }
+}

res/css/views/elements/_ImageView.pcss

@@ -0,0 +1,155 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+$button-size: 32px;
+$icon-size: 22px;
+$button-gap: 24px;
+
+:root {
+    --image-view-panel-height: 68px;
+}
+
+.mx_ImageView {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+}
+
+.mx_ImageView_image_wrapper {
+    pointer-events: initial;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    overflow: hidden;
+}
+
+.mx_ImageView_image {
+    flex-shrink: 0;
+
+    &.mx_ImageView_image_animating {
+        transition: transform 200ms ease 0s;
+    }
+
+    &.mx_ImageView_image_animatingLoading {
+        transition: transform 300ms ease 0s;
+    }
+}
+
+.mx_ImageView_panel {
+    width: 100%;
+    height: var(--image-view-panel-height);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    animation-name: mx_ImageView_panel_keyframes;
+    animation-duration: 300ms;
+}
+
+.mx_ImageView_info_wrapper {
+    pointer-events: initial;
+    padding-left: 32px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: $lightbox-fg-color;
+    flex-grow: 1;
+    flex-basis: 0;
+}
+
+.mx_ImageView_info {
+    padding-left: 12px;
+    display: flex;
+    flex-direction: column;
+}
+
+.mx_ImageView_info_sender {
+    font-weight: bold;
+}
+
+.mx_ImageView_title {
+    color: $lightbox-fg-color;
+    font-size: $font-12px;
+    flex-grow: 1;
+    flex-basis: 0;
+    text-align: center;
+}
+
+.mx_ImageView_toolbar {
+    padding-right: 16px;
+    pointer-events: initial;
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    flex-basis: 0;
+    justify-content: flex-end;
+    gap: calc($button-gap - ($button-size - $icon-size));
+}
+
+.mx_ImageView_button {
+    padding: calc(($button-size - $icon-size) / 2);
+    display: block;
+
+    &::before {
+        content: "";
+        height: $icon-size;
+        width: $icon-size;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        mask-position: center;
+        display: block;
+        background-color: $icon-button-color;
+    }
+}
+
+.mx_ImageView_button_rotateCW::before {
+    mask-image: url("$(res)/img/image-view/rotate-cw.svg");
+}
+
+.mx_ImageView_button_rotateCCW::before {
+    mask-image: url("$(res)/img/image-view/rotate-ccw.svg");
+}
+
+.mx_ImageView_button_zoomOut::before {
+    mask-image: url("$(res)/img/image-view/zoom-out.svg");
+}
+
+.mx_ImageView_button_zoomIn::before {
+    mask-image: url("$(res)/img/image-view/zoom-in.svg");
+}
+
+.mx_ImageView_button_download::before {
+    mask-image: url("$(res)/img/image-view/download.svg");
+}
+
+.mx_ImageView_button_more::before {
+    mask-image: url("$(res)/img/image-view/more.svg");
+}
+
+.mx_ImageView_button_close {
+    padding: calc($button-size - $button-size);
+    border-radius: 100%;
+    background: #21262c; /* same on all themes */
+    &::before {
+        width: $button-size;
+        height: $button-size;
+        mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
+        mask-size: 24px;
+    }
+}
+
+@media (prefers-reduced-motion) {
+    .mx_ImageView_image_animating {
+        transition: none !important;
+    }
+
+    .mx_ImageView_image_animatingLoading {
+        transition: none !important;
+    }
+}

res/css/views/elements/_InfoTooltip.pcss

@@ -0,0 +1,33 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_InfoTooltip_icon {
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+}
+
+.mx_InfoTooltip_icon::before {
+    display: inline-block;
+    background-color: $muted-fg-color;
+    mask-repeat: no-repeat;
+    mask-size: 16px;
+    width: 16px;
+    height: 16px;
+    mask-position: center;
+    content: "";
+    vertical-align: middle;
+}
+
+.mx_InfoTooltip_icon_info::before {
+    mask-image: url("$(res)/img/element-icons/info.svg");
+}
+
+.mx_InfoTooltip_icon_warning::before {
+    mask-image: url("$(res)/img/element-icons/warning.svg");
+}

res/css/views/elements/_InlineSpinner.pcss

@@ -0,0 +1,20 @@
+/*
+Copyright 2017-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_InlineSpinner {
+    display: inline;
+}
+
+.mx_InlineSpinner img,
+.mx_InlineSpinner_icon {
+    margin: 0px 6px;
+    vertical-align: -3px;
+}
+
+.mx_InlineSpinner_icon {
+    display: inline-block !important; /* Override regular mx_Spinner_icon */
+}

res/css/views/elements/_InteractiveTooltip.pcss

@@ -0,0 +1,91 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2019-2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_InteractiveTooltip_wrapper {
+    position: fixed;
+    z-index: 3999;
+}
+
+.mx_InteractiveTooltip {
+    border-radius: 8px;
+    background-color: $background;
+    color: $primary-content;
+    position: absolute;
+    z-index: 5001;
+    box-shadow:
+        0 24px 8px rgb(17 17 26 / 4%),
+        0 8px 32px rgb(17 17 26 / 4%);
+}
+
+.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_top {
+    top: 10px; /* 8px chevron + 2px spacing */
+}
+
+.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_left {
+    left: 10px; /* 8px chevron + 2px spacing */
+}
+
+.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_right {
+    right: 10px; /* 8px chevron + 2px spacing */
+}
+
+.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_bottom {
+    bottom: 10px; /* 8px chevron + 2px spacing */
+}
+
+.mx_InteractiveTooltip_chevron_top {
+    position: absolute;
+    left: calc(50% - 8px);
+    top: -8px;
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-bottom: 8px solid $background;
+    border-right: 8px solid transparent;
+}
+
+/* Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path */
+/* by Sebastiano Guerriero (@guerriero_se) */
+@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
+    .mx_InteractiveTooltip_chevron_top {
+        height: 16px;
+        width: 16px;
+        background-color: inherit;
+        border: none;
+        clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
+        transform: rotate(135deg);
+        border-radius: 0 0 0 3px;
+        top: calc(-8px / 1.414); /* sqrt(2) because of rotation */
+    }
+}
+
+.mx_InteractiveTooltip_chevron_bottom {
+    position: absolute;
+    left: calc(50% - 8px);
+    bottom: -8px;
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-top: 8px solid $background;
+    border-right: 8px solid transparent;
+}
+
+/* Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path */
+/* by Sebastiano Guerriero (@guerriero_se) */
+@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
+    .mx_InteractiveTooltip_chevron_bottom {
+        height: 16px;
+        width: 16px;
+        background-color: inherit;
+        border: none;
+        clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
+        transform: rotate(-45deg);
+        border-radius: 0 0 0 3px;
+        bottom: calc(-8px / 1.414); /* sqrt(2) because of rotation */
+    }
+}

res/css/views/elements/_InviteReason.pcss

@@ -0,0 +1,46 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_InviteReason {
+    position: relative;
+    margin-bottom: 1em;
+
+    .mx_InviteReason_reason {
+        visibility: visible;
+    }
+
+    .mx_InviteReason_view {
+        display: none;
+        position: absolute;
+        inset: 0;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        color: $secondary-content;
+
+        &::before {
+            content: "";
+            margin-right: 8px;
+            background-color: $secondary-content;
+            mask-image: url("$(res)/img/feather-customised/eye.svg");
+            display: inline-block;
+            width: 18px;
+            height: 14px;
+        }
+    }
+}
+
+.mx_InviteReason_hidden {
+    .mx_InviteReason_reason {
+        visibility: hidden;
+    }
+
+    .mx_InviteReason_view {
+        display: flex;
+    }
+}

res/css/views/elements/_LabelledCheckbox.pcss

@@ -0,0 +1,32 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_LabelledCheckbox {
+    display: flex;
+    gap: 8px;
+    flex-direction: row;
+
+    .mx_Checkbox {
+        margin-top: 3px; /* visually align with label text */
+    }
+
+    .mx_LabelledCheckbox_labels {
+        flex: 1;
+
+        .mx_LabelledCheckbox_label {
+            vertical-align: middle;
+        }
+
+        .mx_LabelledCheckbox_byline {
+            display: block;
+            padding-top: $spacing-4;
+            color: $muted-fg-color;
+            font-size: $font-11px;
+        }
+    }
+}

res/css/views/elements/_LanguageDropdown.pcss

@@ -0,0 +1,13 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_LanguageDropdown {
+    .mx_Dropdown_option > div {
+        text-transform: capitalize;
+    }
+}

res/css/views/elements/_MiniAvatarUploader.pcss

@@ -0,0 +1,56 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_MiniAvatarUploader {
+    position: relative;
+    width: min-content;
+
+    /* this isn't a floating tooltip so override some things to not need to bother with z-index and floating */
+    .mx_Tooltip {
+        display: inline-block;
+        position: absolute;
+        z-index: unset;
+        width: max-content;
+        left: 72px;
+        /* top edge starting at 50 % of parent - 50 % of itself -> centered vertically */
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
+    .mx_MiniAvatarUploader_indicator {
+        position: absolute;
+
+        height: 26px;
+        width: 26px;
+
+        right: -6px;
+        bottom: -6px;
+
+        background-color: $background;
+        border-radius: 50%;
+        z-index: 1;
+
+        line-height: 0;
+
+        .mx_MiniAvatarUploader_cameraIcon {
+            height: 100%;
+            width: 100%;
+
+            background-color: $secondary-content;
+            mask-position: center;
+            mask-repeat: no-repeat;
+            mask-image: url("$(res)/img/element-icons/camera.svg");
+            mask-size: 16px;
+            z-index: 2;
+        }
+    }
+}
+
+.mx_MiniAvatarUploader_input {
+    display: none;
+}

res/css/views/elements/_Pill.pcss

@@ -0,0 +1,96 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_Pill {
+    padding: $font-1px 0.4em $font-1px 0.4em;
+    line-height: $font-17px;
+    border-radius: $font-16px;
+    vertical-align: text-top;
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    max-width: 100%;
+    overflow: hidden;
+    cursor: pointer;
+
+    color: var(--cpd-color-text-on-solid-primary) !important; /* To override .markdown-body */
+    background-color: $pill-bg-color !important; /* To override .markdown-body */
+
+    > * {
+        pointer-events: none;
+    }
+
+    &.mx_UserPill_me,
+    &.mx_AtRoomPill {
+        background-color: var(--cpd-color-bg-critical-primary) !important; /* To override .markdown-body */
+    }
+
+    &:hover {
+        background-color: $pill-hover-bg-color !important; /* To override .markdown-body */
+    }
+
+    &:active {
+        background-color: $pill-press-bg-color !important; /* To override .markdown-body */
+    }
+
+    &.mx_UserPill_me:hover {
+        background-color: var(
+            --cpd-color-bg-critical-hovered
+        ) !important; /* To override .markdown-body | same on both themes */
+    }
+
+    /* We don't want to indicate clickability */
+    &.mx_AtRoomPill:hover {
+        background-color: var(--cpd-color-bg-critical-primary) !important; /* To override .markdown-body */
+        cursor: unset;
+    }
+
+    &::before,
+    .mx_BaseAvatar {
+        margin-inline-start: -0.3em; /* Otherwise the gap is too large */
+        margin-inline-end: 0.2em;
+        min-width: $font-16px; /* ensure the avatar is not compressed */
+    }
+
+    .mx_Pill_text {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    a& {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        text-decoration: none !important; /* To override .markdown-body */
+    }
+
+    .mx_Pill_LinkIcon {
+        background-color: $link-external;
+        box-sizing: border-box;
+        color: $background;
+        height: 16px;
+        padding: 1px;
+        width: 16px;
+        border-radius: 50%;
+    }
+
+    .mx_Pill_UserIcon {
+        box-sizing: border-box;
+        color: $secondary-content;
+        height: 16px;
+        width: 16px;
+    }
+
+    &.mx_SpacePill {
+        border-top-left-radius: 8px;
+        border-bottom-left-radius: 8px;
+        padding-left: 4px;
+    }
+}

res/css/views/elements/_PowerSelector.pcss

@@ -0,0 +1,15 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_PowerSelector {
+    width: 100%;
+}
+
+.mx_PowerSelector .mx_Field select,
+.mx_PowerSelector .mx_Field input {
+    box-sizing: border-box;
+}

res/css/views/elements/_ProgressBar.pcss

@@ -0,0 +1,31 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+progress.mx_ProgressBar {
+    height: 6px;
+    width: 60px;
+    overflow: hidden;
+    appearance: none;
+    border: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
+
+    @mixin ProgressBarBorderRadius 6px;
+    @mixin ProgressBarColour var(--cpd-color-icon-accent-tertiary);
+    @mixin ProgressBarBgColour $progressbar-bg-color;
+    ::-webkit-progress-value {
+        transition: width 1s;
+    }
+    ::-moz-progress-bar {
+        transition: padding-bottom 1s;
+        padding-bottom: var(--value);
+        transform-origin: 0 0;
+        transform: rotate(-90deg) translateX(-15px);
+        padding-left: 15px;
+
+        height: 0;
+    }
+}

res/css/views/elements/_QRCode.pcss

@@ -0,0 +1,13 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_QRCode {
+    img {
+        border-radius: 8px;
+    }
+}

res/css/views/elements/_ReplyChain.pcss

@@ -0,0 +1,52 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2018 Vector Creations Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ReplyChain {
+    margin: 0; /* Reset default blockquote margin */
+    padding-left: 10px;
+    border-left: 2px solid var(--username-color);
+    border-radius: 2px;
+
+    .mx_ReplyChain_show {
+        &.mx_AccessibleButton_kind_link_inline {
+            white-space: nowrap; /* Enforce 'In reply to' to be a single line */
+            color: $secondary-content;
+            transition: color ease 0.15s;
+            font-weight: var(--cpd-font-weight-regular);
+            text-decoration: inherit;
+
+            &:hover {
+                color: $primary-content;
+            }
+        }
+    }
+
+    &.mx_ReplyChain_color1 {
+        --username-color: $username-variant1-color;
+    }
+
+    &.mx_ReplyChain_color2 {
+        --username-color: $username-variant2-color;
+    }
+
+    &.mx_ReplyChain_color3 {
+        --username-color: $username-variant3-color;
+    }
+
+    &.mx_ReplyChain_color4 {
+        --username-color: $username-variant4-color;
+    }
+
+    &.mx_ReplyChain_color5 {
+        --username-color: $username-variant5-color;
+    }
+
+    &.mx_ReplyChain_color6 {
+        --username-color: $username-variant6-color;
+    }
+}

res/css/views/elements/_ResizeHandle.pcss

@@ -0,0 +1,32 @@
+/*
+Copyright 2018-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ResizeHandle {
+    cursor: row-resize;
+    flex: 0 0 auto;
+    z-index: 100;
+
+    &.mx_ResizeHandle--horizontal {
+        margin: 0 -5px;
+        padding: 0 5px;
+        cursor: col-resize;
+
+        > div {
+            width: 1px;
+            height: 100%;
+        }
+    }
+
+    &.mx_ResizeHandle--vertical {
+        margin: -5px 0;
+        padding: 5px 0;
+
+        > div {
+            height: 1px;
+        }
+    }
+}

res/css/views/elements/_RichText.pcss

@@ -0,0 +1,44 @@
+/* XXX: bleurgh, what is this? These classes totally break the component */
+/* naming scheme; it's completely unclear where or how they're being used */
+/* --Matthew */
+
+.mx_Markdown_BOLD {
+    font-weight: bold;
+}
+
+.mx_Markdown_ITALIC {
+    font-style: italic;
+    /*
+    // interestingly, *not* using the explicit italic font
+    // variant seems yield better results.
+
+    // compensate for Nunito italics being terrible
+    // https://github.com/google/fonts/issues/172
+    transform: skewX(-14deg);
+    display: inline-block;
+    */
+}
+
+.mx_Markdown_CODE {
+    padding: 0.2em 0;
+    margin: 0;
+    font-size: 85%;
+    background-color: $rte-code-bg-color;
+    border-radius: 3px;
+}
+
+.mx_Markdown_HR {
+    display: block;
+    background: $rte-bg-color;
+}
+
+.mx_Markdown_STRIKETHROUGH {
+    text-decoration: line-through;
+}
+
+.mx_Emoji {
+    /* Should be 1.8rem for our default message bodies, and scale with the */
+    /* surrounding text */
+    font-size: max($font-18px, 1em);
+    vertical-align: bottom;
+}

res/css/views/elements/_RoomAliasField.pcss

@@ -0,0 +1,49 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_RoomAliasField {
+    /* if parent is a flex container, this allows the */
+    /* width to be as wide as needed, and not 100% */
+    flex: 0 1 auto;
+    display: flex;
+    align-items: stretch;
+    min-width: 0;
+    max-width: 100%;
+
+    input {
+        width: 150px;
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    input::placeholder {
+        color: $info-plinth-fg-color;
+        font-weight: normal;
+    }
+
+    .mx_Field_prefix,
+    .mx_Field_postfix {
+        color: $info-plinth-fg-color;
+        border-left: none;
+        border-right: none;
+        font-weight: var(--cpd-font-weight-semibold);
+        padding: 9px 10px;
+        flex: 0 0 auto;
+    }
+
+    .mx_Field_postfix {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        /* this allows the domain name to show */
+        /* as long as it doesn't make the input shrink */
+        /* if it's too big, it shows an ellipsis */
+        /* 180: 28 for prefix, 152 for input */
+        max-width: calc(100% - 180px);
+    }
+}

res/css/views/elements/_SSOButtons.pcss

@@ -0,0 +1,69 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_SSOButtons {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    .mx_SSOButtons_row {
+        & + .mx_SSOButtons_row {
+            margin-top: 16px;
+        }
+    }
+
+    .mx_SSOButton {
+        position: relative;
+        width: 100%;
+        padding: 7px 32px;
+        text-align: center;
+        border-radius: 8px;
+        display: inline-block;
+        font: var(--cpd-font-body-md-semibold);
+        border: 1px solid $input-border-color;
+        color: $primary-content;
+
+        > img {
+            object-fit: contain;
+            position: absolute;
+            left: 8px;
+            top: 4px;
+        }
+    }
+
+    .mx_SSOButton:hover {
+        background-color: $panel-actions;
+    }
+
+    .mx_SSOButton_default {
+        color: $accent;
+        background-color: $button-secondary-bg-color;
+        border-color: $accent;
+    }
+    .mx_SSOButton_default.mx_SSOButton_primary {
+        color: $button-primary-fg-color;
+        background-color: $accent;
+    }
+
+    .mx_SSOButton_mini {
+        box-sizing: border-box;
+        width: 50px; /* 48px + 1px border on all sides */
+        height: 50px; /* 48px + 1px border on all sides */
+        min-width: 50px; /* prevent crushing by the flexbox */
+        padding: 12px;
+
+        > img {
+            left: 12px;
+            top: 12px;
+        }
+
+        & + .mx_SSOButton_mini {
+            margin-left: 16px;
+        }
+    }
+}

res/css/views/elements/_SearchWarning.pcss

@@ -0,0 +1,20 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_SearchWarning {
+    text-align: center;
+    padding: 0 16px;
+
+    > * {
+        vertical-align: middle;
+    }
+
+    > img {
+        margin-right: 8px;
+    }
+}

res/css/views/elements/_ServerPicker.pcss

@@ -0,0 +1,79 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ServerPicker {
+    margin-bottom: 14px;
+    padding-bottom: $spacing-16;
+    border-bottom: 1px solid rgba(141, 151, 165, 0.2);
+    display: grid;
+    grid-template-columns: auto min-content;
+    grid-template-rows: auto auto auto;
+    font: var(--cpd-font-body-md-regular);
+
+    > h2 {
+        font-weight: var(--cpd-font-weight-semibold);
+        margin: 0 0 20px;
+        grid-column: 1;
+        grid-row: 1;
+    }
+
+    .mx_ServerPicker_help {
+        width: 20px;
+        height: 20px;
+        background-color: $icon-button-color;
+        border-radius: 10px;
+        grid-column: 2;
+        grid-row: 1;
+        margin-left: auto;
+        text-align: center;
+        color: #ffffff;
+        font-size: 16px;
+        position: relative;
+
+        &::before {
+            content: "";
+            width: 24px;
+            height: 24px;
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            mask-image: url("$(res)/img/element-icons/i.svg");
+            background: #ffffff;
+        }
+    }
+
+    .mx_ServerPicker_server {
+        color: $authpage-primary-color;
+        grid-column: 1;
+        grid-row: 2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-right: 8px;
+    }
+
+    .mx_ServerPicker_change {
+        grid-column: 2;
+        grid-row: 2;
+    }
+
+    .mx_ServerPicker_desc {
+        margin-top: 4px;
+        color: $tertiary-content;
+        grid-column: 1 / 2;
+        grid-row: 3;
+    }
+}
+
+.mx_ServerPicker_helpDialog {
+    .mx_Dialog_content {
+        width: 456px;
+    }
+}

res/css/views/elements/_SettingsFlag.pcss

@@ -0,0 +1,59 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_SettingsFlag {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 4px;
+    width: 100%;
+
+    .mx_ToggleSwitch {
+        flex: 0 0 auto;
+    }
+
+    &.mx_SettingsFlag_toggleInFront {
+        .mx_ToggleSwitch {
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: 8px;
+        }
+
+        .mx_SettingsFlag_label {
+            display: inline-block;
+            vertical-align: middle;
+        }
+    }
+}
+
+.mx_SettingsFlag_label {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    color: $primary-content;
+    padding-right: 10px;
+    padding-top: 4px;
+}
+
+.mx_SettingsFlag_microcopy {
+    margin-top: 4px;
+    font: var(--cpd-font-body-sm-regular);
+    color: $secondary-content;
+
+    /* Support code/pre elements in settings flag descriptions */
+    pre,
+    code {
+        font-family: $monospace-font-family !important;
+        background-color: $rte-code-bg-color;
+    }
+
+    .mx_SettingsTab_microcopy_warning::before {
+        content: "⚠️ ";
+    }
+}

res/css/views/elements/_Spinner.pcss

@@ -0,0 +1,57 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_Spinner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    flex: 1;
+}
+
+.mx_MatrixChat_middlePanel .mx_Spinner {
+    height: auto;
+}
+
+@keyframes spin {
+    from {
+        transform: rotateZ(0deg);
+    }
+    to {
+        transform: rotateZ(360deg);
+    }
+}
+
+.mx_Spinner_icon {
+    background-color: $quinary-content;
+    mask: url("$(res)/img/spinner/spinner-background.svg");
+    mask-size: 100%;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 100%;
+    height: 100%;
+
+    &::before {
+        background-color: $secondary-content;
+        mask: url("$(res)/img/spinner/spinner-foreground.svg");
+        mask-size: 100%;
+
+        width: 100%;
+        height: 100%;
+
+        content: "";
+        display: flex;
+
+        animation: 1s linear spin infinite;
+    }
+}

res/css/views/elements/_StyledCheckbox.pcss

@@ -0,0 +1,98 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_Checkbox {
+    $size: $font-16px;
+    $border-radius: 0.27rem;
+
+    display: flex;
+    align-items: flex-start;
+
+    input[type="checkbox"] {
+        appearance: none;
+        margin: 0;
+        padding: 0;
+
+        & + label {
+            display: flex;
+            align-items: center;
+
+            flex-grow: 1;
+        }
+
+        & + label > .mx_Checkbox_background {
+            display: inline-flex;
+            position: relative;
+
+            flex-shrink: 0;
+
+            height: $size;
+            width: $size;
+            size: 0.5rem;
+            border: 1px solid var(--cpd-color-border-interactive-primary);
+            box-sizing: border-box;
+            border-radius: $border-radius;
+
+            .mx_Checkbox_checkmark {
+                display: none;
+
+                height: 100%;
+                width: 100%;
+                mask-image: url("$(res)/img/feather-customised/check.svg");
+                mask-position: center;
+                mask-size: 100%;
+                mask-repeat: no-repeat;
+            }
+        }
+
+        &:checked + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
+            display: block;
+        }
+
+        & + label > *:not(.mx_Checkbox_background) {
+            margin-left: 10px;
+        }
+
+        &:disabled + label {
+            cursor: not-allowed;
+        }
+
+        &:focus-visible {
+            & + label .mx_Checkbox_background {
+                @mixin unreal-focus;
+            }
+        }
+    }
+}
+
+.mx_Checkbox.mx_Checkbox_kind_solid input[type="checkbox"] {
+    & + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
+        background: var(--cpd-color-icon-on-solid-primary);
+    }
+
+    &:checked + label > .mx_Checkbox_background {
+        background: var(--cpd-color-bg-accent-rest);
+        border-color: var(--cpd-color-bg-accent-rest);
+    }
+
+    &:checked:disabled + label > .mx_Checkbox_background {
+        background: var(--cpd-color-bg-action-primary-disabled);
+        border-color: var(--cpd-color-bg-action-primary-disabled);
+    }
+}
+
+.mx_Checkbox.mx_Checkbox_kind_outline input[type="checkbox"] {
+    & + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
+        background: var(--cpd-color-bg-accent-rest);
+    }
+
+    &:checked + label > .mx_Checkbox_background {
+        background: transparent;
+        border-color: var(--cpd-color-bg-accent-rest);
+    }
+}

res/css/views/elements/_StyledRadioButton.pcss

@@ -0,0 +1,122 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+/**
+* This component expects the parent to specify a positive padding and
+* width
+*/
+
+.mx_StyledRadioButton {
+    $radio-circle-color: var(--cpd-color-border-interactive-primary);
+    $active-radio-circle-color: var(--cpd-color-bg-accent-rest);
+    position: relative;
+
+    display: flex;
+    align-items: baseline;
+    flex-grow: 1;
+
+    > .mx_StyledRadioButton_content {
+        flex-grow: 1;
+
+        display: flex;
+        flex-direction: column;
+
+        margin-left: 8px;
+        margin-right: 8px;
+    }
+
+    .mx_StyledRadioButton_spacer {
+        flex-shrink: 0;
+        flex-grow: 0;
+
+        height: $font-16px;
+        width: $font-16px;
+    }
+
+    input[type="radio"] {
+        /* Remove the OS's representation */
+        margin: 0;
+        padding: 0;
+        appearance: none;
+
+        + div {
+            flex-shrink: 0;
+            flex-grow: 0;
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            box-sizing: border-box;
+            height: $font-16px;
+            width: $font-16px;
+            margin-left: 2px; /* For the highlight on focus */
+
+            border: 1px solid $radio-circle-color;
+            border-radius: $font-16px;
+
+            > div {
+                box-sizing: border-box;
+
+                height: $font-8px;
+                width: $font-8px;
+
+                border-radius: $font-8px;
+            }
+        }
+
+        &:focus-visible {
+            & + div {
+                @mixin unreal-focus;
+            }
+        }
+
+        &:checked {
+            & + div {
+                border-color: $active-radio-circle-color;
+
+                & > div {
+                    background: $active-radio-circle-color;
+                }
+            }
+        }
+
+        &:disabled {
+            & + div,
+            & + div + span {
+                opacity: 0.5;
+                cursor: not-allowed;
+            }
+
+            & + div {
+                border-color: $radio-circle-color;
+            }
+        }
+
+        &:checked:disabled {
+            & + div > div {
+                background-color: $radio-circle-color;
+            }
+        }
+    }
+
+    .mx_StyledRadioButton_innerLabel {
+        display: flex;
+        position: relative;
+        top: 4px;
+    }
+}
+
+.mx_StyledRadioButton_outlined {
+    border: 1px solid $input-darker-bg-color;
+    border-radius: 8px;
+}
+
+.mx_StyledRadioButton_checked {
+    border-color: var(--cpd-color-bg-accent-rest);
+}

res/css/views/elements/_SyntaxHighlight.pcss

@@ -0,0 +1,13 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_SyntaxHighlight {
+    /* inhibit hljs styling */
+    background: none !important;
+    color: $light-fg-color !important;
+}

res/css/views/elements/_TagComposer.pcss

@@ -0,0 +1,75 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_TagComposer {
+    .mx_TagComposer_input {
+        display: flex;
+        flex-direction: row;
+
+        .mx_AccessibleButton {
+            min-width: 70px;
+            padding: 0 8px; /* override from button styles */
+            align-self: stretch; /* override default settingstab style */
+        }
+
+        .mx_Field,
+        .mx_Field input,
+        .mx_AccessibleButton {
+            /* So they look related to each other by feeling the same */
+            border-radius: 8px;
+        }
+    }
+
+    .mx_TagComposer_tags {
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: 12px; /* this plus 12px from the tags makes 24px from the input */
+    }
+
+    .mx_Tag {
+        margin-right: 12px;
+        margin-top: 12px;
+    }
+}
+
+.mx_Tag {
+    font-size: $font-15px;
+
+    display: inline-flex;
+    align-items: center;
+
+    gap: 8px;
+    padding: 8px;
+    border-radius: 8px;
+
+    color: $primary-content;
+    background: $quinary-content;
+
+    > svg:first-child {
+        width: 1em;
+        color: $secondary-content;
+        transform: scale(1.25);
+        transform-origin: center;
+    }
+
+    .mx_Tag_delete {
+        border-radius: 50%;
+        text-align: center;
+        width: 1.066666em; /* 16px; */
+        height: 1.066666em;
+        line-height: 1em;
+        color: $secondary-content;
+        background: $system;
+        position: relative;
+
+        svg {
+            width: 16px;
+            height: 16px;
+        }
+    }
+}

res/css/views/elements/_TextWithTooltip.pcss

@@ -0,0 +1,13 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+.mx_TextWithTooltip_target {
+    display: inline;
+}
+
+.mx_TextWithTooltip_tooltip {
+    display: none;
+}

res/css/views/elements/_ToggleSwitch.pcss

@@ -0,0 +1,60 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ToggleSwitch {
+    --ToggleSwitch-min-width: $font-44px;
+
+    transition:
+        background-color 0.2s ease-out 0.1s,
+        border-color 0.2s ease-out 0.1s;
+
+    width: $font-44px;
+    height: $font-20px;
+    border-radius: 1.5rem;
+    padding: 2px;
+
+    background-color: var(--cpd-color-bg-canvas-disabled);
+    border: 1px solid var(--cpd-color-border-disabled);
+    cursor: not-allowed;
+
+    &.mx_ToggleSwitch_enabled {
+        cursor: pointer;
+        background-color: var(--cpd-color-bg-canvas-default);
+        border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-primary);
+
+        &.mx_ToggleSwitch_on {
+            background-color: var(--cpd-color-bg-accent-rest);
+            border-color: var(--cpd-color-bg-accent-rest);
+        }
+
+        > .mx_ToggleSwitch_ball {
+            background-color: var(--cpd-color-icon-secondary);
+        }
+    }
+
+    &.mx_ToggleSwitch_on {
+        background-color: var(--cpd-color-bg-action-primary-disabled);
+        border-color: var(--cpd-color-bg-action-primary-disabled);
+
+        > .mx_ToggleSwitch_ball {
+            left: calc(100% - $font-20px);
+            background-color: var(--cpd-color-icon-on-solid-primary);
+        }
+    }
+}
+
+.mx_ToggleSwitch_ball {
+    position: relative;
+    width: $font-20px;
+    height: $font-20px;
+    border-radius: $font-20px;
+    background-color: var(--cpd-color-bg-action-primary-disabled);
+    transition:
+        left 0.15s ease-out 0.1s,
+        background-color 0.15s ease-out 0.1s;
+    left: 0;
+}

res/css/views/elements/_Tooltip.pcss

@@ -0,0 +1,107 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+@keyframes mx_fadein {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes mx_fadeout {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
+}
+
+.mx_Tooltip_chevron {
+    position: absolute;
+    left: -7px;
+    top: calc(50% - 6px);
+    width: 0;
+    height: 0;
+    border-top: 7px solid transparent;
+    border-right: 7px solid $menu-border-color;
+    border-bottom: 7px solid transparent;
+}
+
+.mx_Tooltip_chevron::after {
+    content: "";
+    width: 0;
+    height: 0;
+    border-top: 6px solid transparent;
+    border-right: 6px solid $menu-bg-color;
+    border-bottom: 6px solid transparent;
+    position: absolute;
+    top: -6px;
+    left: 1px;
+}
+
+.mx_Tooltip {
+    display: none;
+    position: fixed;
+    border-radius: 8px;
+    z-index: 6000; /* Higher than context menu so tooltips can be used everywhere */
+    padding: 10px;
+    pointer-events: none;
+    line-height: $font-14px;
+    font-size: $font-12px;
+    font-weight: 500;
+    max-width: 300px;
+    word-break: break-word;
+
+    background-color: var(--cpd-color-alpha-gray-1400);
+    color: var(--cpd-color-text-on-solid-primary);
+    border: 0;
+    text-align: center;
+
+    .mx_Tooltip_chevron {
+        display: none;
+    }
+
+    &.mx_Tooltip_visible {
+        animation: mx_fadein 0.2s forwards;
+    }
+
+    &.mx_Tooltip_invisible {
+        animation: mx_fadeout 0.1s forwards;
+    }
+
+    ul,
+    ol {
+        text-align: start; /* for list items */
+    }
+}
+
+/* These tooltips use an older style with a chevron */
+.mx_Field_tooltip {
+    background-color: $menu-bg-color;
+    color: $primary-content;
+    border: 1px solid $menu-border-color;
+    text-align: unset;
+
+    .mx_Tooltip_chevron {
+        display: unset;
+    }
+}
+
+.mx_Tooltip_title {
+    font-weight: var(--cpd-font-weight-semibold);
+}
+
+.mx_Tooltip_sub {
+    opacity: 0.7;
+    margin-top: 4px;
+}

res/css/views/elements/_UseCaseSelection.pcss

@@ -0,0 +1,122 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_UseCaseSelection {
+    display: grid;
+    grid-template-rows: 1fr 1fr max-content 2fr;
+    height: 100%;
+    grid-gap: $spacing-40;
+
+    .mx_UseCaseSelection_title {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+
+        h1 {
+            font-weight: var(--cpd-font-weight-semibold);
+            font-size: $font-32px;
+            text-align: center;
+        }
+    }
+
+    .mx_UseCaseSelection_info {
+        display: flex;
+        flex-direction: column;
+        gap: $spacing-8;
+        align-self: flex-end;
+
+        h2 {
+            margin: 0;
+            font-weight: 500;
+            font-size: $font-24px;
+            text-align: center;
+        }
+
+        h3 {
+            margin: 0;
+            font-weight: 400;
+            font-size: $font-16px;
+            color: $secondary-content;
+            text-align: center;
+        }
+    }
+
+    .mx_UseCaseSelection_options {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, 232px);
+        gap: $spacing-32;
+        align-self: stretch;
+        justify-content: center;
+    }
+
+    .mx_UseCaseSelection_skip {
+        display: flex;
+        flex-direction: column;
+        align-self: flex-start;
+    }
+}
+
+.mx_UseCaseSelection_slideIn {
+    animation-delay: 800ms;
+    animation-duration: 300ms;
+    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+    animation-name: mx_UseCaseSelection_slideInLong;
+    animation-fill-mode: backwards;
+    will-change: opacity;
+}
+
+.mx_UseCaseSelection_slideInDelayed {
+    animation-delay: 1500ms;
+    animation-duration: 300ms;
+    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+    animation-name: mx_UseCaseSelection_slideInShort;
+    animation-fill-mode: backwards;
+    will-change: transform, opacity;
+}
+
+.mx_UseCaseSelection_selected {
+    .mx_UseCaseSelection_slideIn,
+    .mx_UseCaseSelection_slideInDelayed {
+        animation-delay: 800ms;
+        animation-duration: 300ms;
+        animation-fill-mode: forwards;
+        animation-name: mx_UseCaseSelection_fadeOut;
+        will-change: opacity;
+    }
+}
+
+@keyframes mx_UseCaseSelection_slideInLong {
+    0% {
+        transform: translate(0, 20px);
+        opacity: 0;
+    }
+    100% {
+        transform: translate(0, 0);
+        opacity: 1;
+    }
+}
+
+@keyframes mx_UseCaseSelection_slideInShort {
+    0% {
+        transform: translate(0, 8px);
+        opacity: 0;
+    }
+    100% {
+        transform: translate(0, 0);
+        opacity: 1;
+    }
+}
+
+@keyframes mx_UseCaseSelection_fadeOut {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}

res/css/views/elements/_UseCaseSelectionButton.pcss

@@ -0,0 +1,97 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_UseCaseSelectionButton {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: $spacing-24 $spacing-16;
+    background: $background;
+    border: 1px solid $quinary-content;
+    border-radius: 8px;
+    text-align: center;
+    position: relative;
+    transition-property: box-shadow, transform;
+    transition-duration: 300ms;
+
+    .mx_UseCaseSelectionButton_icon {
+        /* workaround: design expects a layering of two colors */
+        background: linear-gradient(0deg, rgba(172, 59, 168, 0.15), rgba(172, 59, 168, 0.15)), #ffffff;
+        border-radius: 14px;
+        padding: $spacing-8;
+        margin-bottom: $spacing-16;
+
+        &::before {
+            content: "";
+            display: block;
+            /* this has to remain the same color across all themes,
+               as its background has a fixed color as well */
+            background: #1e1e1e;
+            mask-position: center;
+            mask-repeat: no-repeat;
+            mask-size: contain;
+            width: 22px;
+            height: 22px;
+        }
+
+        &.mx_UseCaseSelectionButton_messaging::before {
+            mask-image: url("$(res)/img/element-icons/chat-bubble.svg");
+        }
+
+        &.mx_UseCaseSelectionButton_work::before {
+            mask-image: url("$(res)/img/element-icons/view-community.svg");
+        }
+
+        &.mx_UseCaseSelectionButton_community::before {
+            mask-image: url("$(res)/img/globe.svg");
+        }
+    }
+
+    &:hover,
+    &:focus {
+        box-shadow: 0 $spacing-4 $spacing-8 rgba(0, 0, 0, 0.08);
+        transform: translate(0, -$spacing-8);
+    }
+
+    .mx_UseCaseSelectionButton_selectedIcon {
+        right: -12px;
+        top: -12px;
+        position: absolute;
+        border-radius: 24px;
+        background: $accent;
+        padding: 6px;
+        transition-property: opacity, transform;
+        transition-duration: 150ms;
+        opacity: 0;
+        transform: scale(0.6);
+
+        &::before {
+            content: "";
+            display: block;
+            background: $background;
+            mask-position: center;
+            mask-repeat: no-repeat;
+            mask-size: contain;
+            width: 12px;
+            height: 12px;
+
+            mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
+        }
+    }
+
+    &.mx_UseCaseSelectionButton_selected {
+        border: 2px solid $accent;
+        padding: calc($spacing-24 - 1px) calc($spacing-16 - 1px);
+        box-shadow: 0 $spacing-4 $spacing-8 rgba(0, 0, 0, 0.08);
+
+        .mx_UseCaseSelectionButton_selectedIcon {
+            opacity: 1;
+            transform: scale(1);
+        }
+    }
+}

res/css/views/elements/_Validation.pcss

@@ -0,0 +1,60 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_Validation {
+    position: relative;
+}
+
+.mx_Validation_details {
+    padding-left: 20px;
+    margin: 0;
+}
+
+.mx_Validation_description + .mx_Validation_details {
+    margin: 1em 0 0;
+}
+
+.mx_Validation_detail {
+    position: relative;
+    font-weight: normal;
+    list-style: none;
+    margin-bottom: 0.5em;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    &::before {
+        content: "";
+        position: absolute;
+        width: 14px;
+        height: 14px;
+        top: 0;
+        left: -18px;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
+    }
+
+    &.mx_Validation_valid {
+        color: $accent;
+
+        &::before {
+            mask-image: url("$(res)/img/feather-customised/check.svg");
+            background-color: $accent;
+        }
+    }
+
+    &.mx_Validation_invalid {
+        color: $alert;
+
+        &::before {
+            mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
+            background-color: $alert;
+        }
+    }
+}