Replace Sass variables with custom properties on _font-weights.pcss (#10554)

* Replace `$font-normal` and `$font-semi-bold` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Replace `font-weight: 600` with the custom property Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Replace the existing variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2023-04-21 14:16:00 +00:00 · 2023-04-21 14:16:00 +00:00 · 92906c2130
commit 92906c2130
parent 7c4d0ceddc
95 changed files with 149 additions and 147 deletions
--- a/res/css/views/rooms/_AppsDrawer.pcss
+++ b/res/css/views/rooms/_AppsDrawer.pcss
@ -329,7 +329,7 @@ $MinWidth: 240px;
 }

 .mx_AppPermissionWarning_bolder {
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
 }

 .mx_AppPermissionWarning h4 {
--- a/res/css/views/rooms/_DecryptionFailureBar.pcss
+++ b/res/css/views/rooms/_DecryptionFailureBar.pcss
@ -73,7 +73,7 @@ limitations under the License.
        .mx_DecryptionFailureBar_start_headline {
            grid-area: headline;

-            font-weight: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
            font-size: $font-16px;
            align-self: center;
        }
--- a/res/css/views/rooms/_MemberInfo.pcss
+++ b/res/css/views/rooms/_MemberInfo.pcss
@ -50,7 +50,7 @@ limitations under the License.

 .mx_MemberInfo h2 {
    font-size: $font-18px;
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
    margin: 16px 0 16px 15px;
 }

--- a/res/css/views/rooms/_MemberList.pcss
+++ b/res/css/views/rooms/_MemberList.pcss
@ -31,7 +31,7 @@ limitations under the License.
    h2 {
        text-transform: uppercase;
        color: $h3-color;
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
        font-size: $font-13px;
        padding-left: 3px;
        padding-right: 12px;
@ -85,7 +85,7 @@ limitations under the License.
    display: flex;
    justify-content: center;
    color: $button-fg-color;
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
 }

 .mx_MemberList_invite.mx_AccessibleButton_disabled {
--- a/res/css/views/rooms/_MessageComposerFormatBar.pcss
+++ b/res/css/views/rooms/_MessageComposerFormatBar.pcss
@ -99,7 +99,7 @@ limitations under the License.
 .mx_MessageComposerFormatBar_buttonTooltip {
    white-space: nowrap;
    font-size: $font-13px;
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
    min-width: 54px;
    text-align: center;

--- a/res/css/views/rooms/_NewRoomIntro.pcss
+++ b/res/css/views/rooms/_NewRoomIntro.pcss
@ -55,7 +55,7 @@ limitations under the License.
    > h2 {
        margin-top: 24px;
        font-size: $font-24px;
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
    }

    > p {
--- a/res/css/views/rooms/_PinnedEventTile.pcss
+++ b/res/css/views/rooms/_PinnedEventTile.pcss
@ -48,7 +48,7 @@ limitations under the License.

    .mx_PinnedEventTile_sender {
        grid-area: name;
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        font-size: $font-15px;
        line-height: $font-24px;
        text-overflow: ellipsis;
--- a/res/css/views/rooms/_ReadReceiptGroup.pcss
+++ b/res/css/views/rooms/_ReadReceiptGroup.pcss
@ -86,7 +86,7 @@ limitations under the License.
        font-size: 12px;
        line-height: 15px;
        margin: 16px 16px 8px;
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
        /* shouldn’t be actually focusable */
        outline: none;
    }
--- a/res/css/views/rooms/_RoomBreadcrumbs.pcss
+++ b/res/css/views/rooms/_RoomBreadcrumbs.pcss
@ -44,7 +44,7 @@ limitations under the License.
    }

    .mx_RoomBreadcrumbs_placeholder {
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
        font-size: $font-14px;
        line-height: 32px; /* specifically to match the height this is not scaled */
        height: 32px;
--- a/res/css/views/rooms/_RoomCallBanner.pcss
+++ b/res/css/views/rooms/_RoomCallBanner.pcss
@ -36,7 +36,7 @@ limitations under the License.

 .mx_RoomCallBanner_label {
    color: $primary-content;
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
    padding-right: $spacing-8;

    &::before {
--- a/res/css/views/rooms/_RoomHeader.pcss
+++ b/res/css/views/rooms/_RoomHeader.pcss
@ -65,7 +65,7 @@ limitations under the License.
    flex: 0 1 auto;
    overflow: hidden;
    color: $primary-content;
-    font-weight: $font-semi-bold;
+    font-weight: var(--font-semi-bold);
    font-size: $font-15px;
    min-height: 24px;
    align-items: center;
--- a/res/css/views/rooms/_RoomList.pcss
+++ b/res/css/views/rooms/_RoomList.pcss
@ -50,7 +50,7 @@ limitations under the License.
    font-size: $font-14px;

    div:first-child {
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        line-height: $font-18px;
        color: $primary-content;
    }
--- a/res/css/views/rooms/_RoomListHeader.pcss
+++ b/res/css/views/rooms/_RoomListHeader.pcss
@ -22,7 +22,7 @@ limitations under the License.
    .mx_RoomListHeader_contextMenuButton {
        font-size: $font-15px;
        line-height: $font-24px;
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        padding: 1px 24px 1px 4px;
        position: relative;
        overflow: hidden;
--- a/res/css/views/rooms/_RoomPreviewBar.pcss
+++ b/res/css/views/rooms/_RoomPreviewBar.pcss
@ -24,7 +24,7 @@ limitations under the License.

    h3 {
        font-size: $font-18px;
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);

        &.mx_RoomPreviewBar_spinnerTitle {
            display: flex;
@ -141,7 +141,7 @@ limitations under the License.
 }

 .mx_RoomPreviewBar_inviter {
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
 }

 a.mx_RoomPreviewBar_inviter {
--- a/res/css/views/rooms/_RoomPreviewCard.pcss
+++ b/res/css/views/rooms/_RoomPreviewCard.pcss
@ -26,7 +26,7 @@ limitations under the License.
    font-size: $font-14px;

    .mx_RoomPreviewCard_notice {
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
        line-height: $font-24px;
        color: $primary-content;
        margin-top: $spacing-24;
--- a/res/css/views/rooms/_RoomSublist.pcss
+++ b/res/css/views/rooms/_RoomSublist.pcss
@ -147,7 +147,7 @@ limitations under the License.
            max-width: calc(100% - 16px); /* 16px is the badge width */
            line-height: $font-16px;
            font-size: $font-13px;
-            font-weight: 600;
+            font-weight: var(--font-semi-bold);

            /* Ellipsize any text overflow */
            text-overflow: ellipsis;
@ -399,7 +399,7 @@ limitations under the License.
    .mx_RoomSublist_contextMenu_title {
        font-size: $font-15px;
        line-height: $font-20px;
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
        margin-bottom: 4px;
    }

--- a/res/css/views/rooms/_RoomTile.pcss
+++ b/res/css/views/rooms/_RoomTile.pcss
@ -70,7 +70,7 @@ limitations under the License.
            line-height: $font-18px;

            &.mx_RoomTile_titleHasUnreadEvents {
-                font-weight: 600;
+                font-weight: var(--font-semi-bold);
            }
        }

--- a/res/css/views/rooms/_SearchBar.pcss
+++ b/res/css/views/rooms/_SearchBar.pcss
@ -49,7 +49,7 @@ limitations under the License.
        cursor: pointer;
        color: $primary-content;
        border-bottom: 2px solid $accent;
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
    }

    .mx_SearchBar_unselected {
--- a/res/css/views/rooms/_ThreadSummary.pcss
+++ b/res/css/views/rooms/_ThreadSummary.pcss
@ -107,7 +107,7 @@ limitations under the License.
    }

    .mx_ThreadSummary_sender {
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
    }

    .mx_ThreadSummary_content {
--- a/res/css/views/rooms/_WhoIsTypingTile.pcss
+++ b/res/css/views/rooms/_WhoIsTypingTile.pcss
@ -58,7 +58,7 @@ limitations under the License.
 .mx_WhoIsTypingTile_label {
    flex: 1;
    font-size: $font-14px;
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
    color: $roomtopic-color;
 }