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>
matrix-org · Apr 21, 2023 · 92906c2 · 92906c2
1 parent 7c4d0ce
commit 92906c2
Show file tree

Hide file tree

Showing 95 changed files with 149 additions and 147 deletions.
diff --git a/res/css/_common.pcss b/res/css/_common.pcss
@@ -132,7 +132,7 @@ input[type="password"] {
     font-family: inherit;
     padding: 9px;
     font-size: $font-14px;
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
     min-width: 0;
 }
 
@@ -575,7 +575,7 @@ legend {
     margin-bottom: 5px;
 
     /* flip colours for the secondary ones */
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
     border: 1px solid $accent;
     color: $accent;
     background-color: $button-secondary-bg-color;
@@ -794,7 +794,7 @@ legend {
 
 @define-mixin LegacyCallButton {
     box-sizing: border-box;
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
     height: $font-24px;
     line-height: $font-24px;
     margin-right: 0;
@@ -816,7 +816,7 @@ legend {
 
 @define-mixin ThreadRepliesAmount {
     color: $secondary-content;
-    font-weight: $font-semi-bold;
+    font-weight: var(--font-semi-bold);
     white-space: nowrap;
     position: relative;
     padding: 0 $spacing-12 0 $spacing-8;

diff --git a/res/css/_font-weights.pcss b/res/css/_font-weights.pcss
@@ -14,5 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-$font-normal: 400;
-$font-semi-bold: 600;
+:root {
+    --font-normal: 400;
+    --font-semi-bold: 600;
+}
diff --git a/res/css/components/views/beacon/_BeaconListItem.pcss b/res/css/components/views/beacon/_BeaconListItem.pcss
@@ -55,7 +55,7 @@ limitations under the License.
     margin-bottom: $spacing-8;
 
     .mx_BeaconStatus_label {
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
     }
 }
 

diff --git a/res/css/components/views/beacon/_OwnBeaconStatus.pcss b/res/css/components/views/beacon/_OwnBeaconStatus.pcss
@@ -27,5 +27,5 @@ limitations under the License.
 .mx_OwnBeaconStatus_destructiveButton {
     /* override button link_inline styles */
     color: $alert !important;
-    font-weight: $font-semi-bold !important;
+    font-weight: var(--font-semi-bold) !important;
 }
diff --git a/res/css/components/views/elements/_FilterDropdown.pcss b/res/css/components/views/elements/_FilterDropdown.pcss
@@ -72,7 +72,7 @@ limitations under the License.
 }
 
 .mx_FilterDropdown_optionLabel {
-    font-weight: $font-semi-bold;
+    font-weight: var(--font-semi-bold);
     display: block;
 }
 

diff --git a/res/css/components/views/elements/_FilterTabGroup.pcss b/res/css/components/views/elements/_FilterTabGroup.pcss
@@ -38,7 +38,7 @@ limitations under the License.
 
         &:checked + span {
             color: $accent;
-            font-weight: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
             // underline
             box-shadow: 0 1.5px 0 0 currentColor;
         }

diff --git a/res/css/components/views/pips/_WidgetPip.pcss b/res/css/components/views/pips/_WidgetPip.pcss
@@ -42,7 +42,7 @@ limitations under the License.
     padding: $spacing-12;
     display: flex;
     font-size: $font-12px;
-    font-weight: $font-semi-bold;
+    font-weight: var(--font-semi-bold);
     background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
 }
 

diff --git a/res/css/components/views/spaces/_QuickThemeSwitcher.pcss b/res/css/components/views/spaces/_QuickThemeSwitcher.pcss
@@ -30,7 +30,7 @@ limitations under the License.
 }
 
 .mx_QuickThemeSwitcher_heading {
-    font-weight: $font-semi-bold;
+    font-weight: var(--font-semi-bold);
     font-size: $font-12px;
     line-height: $font-15px;
     color: $secondary-content;

diff --git a/res/css/structures/_GenericDropdownMenu.pcss b/res/css/structures/_GenericDropdownMenu.pcss
@@ -92,7 +92,7 @@ limitations under the License.
 
             span:first-child {
                 color: $primary-content;
-                font-weight: $font-semi-bold;
+                font-weight: var(--font-semi-bold);
             }
         }
 

diff --git a/res/css/structures/_HomePage.pcss b/res/css/structures/_HomePage.pcss
@@ -37,15 +37,15 @@ limitations under the License.
     }
 
     h1 {
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
         font-size: $font-32px;
         line-height: $font-44px;
         margin-bottom: 4px;
     }
 
     h2 {
         margin-top: 4px;
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
         font-size: $font-18px;
         line-height: $font-25px;
         color: $muted-fg-color;
@@ -73,7 +73,7 @@ limitations under the License.
             word-break: break-word;
             box-sizing: border-box;
 
-            font-weight: 600;
+            font-weight: var(--font-semi-bold);
             font-size: $font-15px;
             line-height: $font-20px;
             color: #fff; /* on all themes */

diff --git a/res/css/structures/_LargeLoader.pcss b/res/css/structures/_LargeLoader.pcss
@@ -29,7 +29,7 @@ limitations under the License.
 
     .mx_LargeLoader_text {
         font-size: 24px;
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
         padding: 0 16px;
         position: relative;
         text-align: center;

diff --git a/res/css/structures/_QuickSettingsButton.pcss b/res/css/structures/_QuickSettingsButton.pcss
@@ -59,7 +59,7 @@ limitations under the License.
     contain: unset; /* let the dropdown paint beyond the context menu */
 
     > div > h2 {
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
         font-size: $font-15px;
         line-height: $font-24px;
         color: $primary-content;
@@ -72,7 +72,7 @@ limitations under the License.
     }
 
     > div > h4 {
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
         font-size: $font-12px;
         line-height: $font-15px;
         text-transform: uppercase;

diff --git a/res/css/structures/_RightPanel.pcss b/res/css/structures/_RightPanel.pcss
@@ -251,7 +251,7 @@ $pulse-color: $alert;
 .mx_RightPanel_scopeHeader {
     margin: 24px;
     text-align: center;
-    font-weight: $font-semi-bold;
+    font-weight: var(--font-semi-bold);
     font-size: $font-18px;
     line-height: $font-22px;
 

diff --git a/res/css/structures/_RoomSearch.pcss b/res/css/structures/_RoomSearch.pcss
@@ -51,7 +51,7 @@ limitations under the License.
         /* the following rules are to match that of a real input field */
         overflow: hidden;
         margin: 9px;
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
     }
 
     .mx_RoomSearch_shortcutPrompt {
@@ -62,7 +62,7 @@ limitations under the License.
         font-size: $font-12px;
         line-height: $font-15px;
         font-family: inherit;
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
         color: $light-fg-color;
         margin-right: 6px;
         white-space: nowrap;

diff --git a/res/css/structures/_SpaceHierarchy.pcss b/res/css/structures/_SpaceHierarchy.pcss
@@ -46,7 +46,7 @@ limitations under the License.
 
         .mx_SpaceHierarchy_listHeader_header {
             grid-column-start: 1;
-            font-weight: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
             margin: 0;
         }
 
@@ -71,7 +71,7 @@ limitations under the License.
 
     .mx_SpaceHierarchy_error {
         position: relative;
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
         color: $alert;
         font-size: $font-15px;
         line-height: $font-18px;
@@ -94,7 +94,7 @@ limitations under the License.
     .mx_SpaceHierarchy_roomCount {
         > h3 {
             display: inline;
-            font-weight: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
             font-size: $font-18px;
             line-height: $font-22px;
             color: $primary-content;
@@ -167,7 +167,7 @@ limitations under the License.
                 gap: 6px 12px;
 
                 .mx_SpaceHierarchy_roomTile_item {
-                    font-weight: $font-semi-bold;
+                    font-weight: var(--font-semi-bold);
                     font-size: $font-15px;
                     line-height: $font-18px;
                     display: grid;

diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss
@@ -276,7 +276,7 @@ $activeBorderColor: $primary-content;
             border-radius: 8px;
             background-color: $panel-actions;
             font-size: $font-15px !important; /* override inline style */
-            font-weight: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
             line-height: $font-18px;
 
             & + .mx_BaseAvatar_image {
@@ -380,7 +380,7 @@ $activeBorderColor: $primary-content;
 
     .mx_SpacePanel_contextMenu_header {
         margin: 12px 16px 12px;
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
         font-size: $font-15px;
         line-height: $font-18px;
         overflow: hidden;
@@ -432,7 +432,7 @@ $activeBorderColor: $primary-content;
         color: $tertiary-content;
         font-size: $font-10px;
         line-height: $font-12px;
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
         //margin-left: 8px;
     }
 }

diff --git a/res/css/structures/_SpaceRoomView.pcss b/res/css/structures/_SpaceRoomView.pcss
@@ -24,7 +24,7 @@ $SpaceRoomViewInnerWidth: 428px;
     border-radius: 8px;
     border: 1px solid $input-border-color;
     font-size: $font-17px;
-    font-weight: $font-semi-bold;
+    font-weight: var(--font-semi-bold);
     margin: 20px 0;
 
     > div {
@@ -73,7 +73,7 @@ $SpaceRoomViewInnerWidth: 428px;
         h1 {
             margin: 0;
             font-size: $font-24px;
-            font-weight: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
             color: $primary-content;
             width: max-content;
         }
@@ -120,7 +120,7 @@ $SpaceRoomViewInnerWidth: 428px;
         }
 
         .mx_SpaceRoomView_errorText {
-            font-weight: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
             font-size: $font-12px;
             line-height: $font-15px;
             color: $alert;

diff --git a/res/css/structures/_ToastContainer.pcss b/res/css/structures/_ToastContainer.pcss
@@ -115,7 +115,7 @@ limitations under the License.
                 color: $primary-content;
                 margin: 0;
                 font-size: $font-18px;
-                font-weight: $font-semi-bold;
+                font-weight: var(--font-semi-bold);
             }
 
             .mx_Toast_title_countIndicator {
@@ -142,7 +142,7 @@ limitations under the License.
         .mx_Toast_description {
             color: $primary-content;
             font-size: $font-15px;
-            font-weight: $font-semi-bold;
+            font-weight: var(--font-semi-bold);
             max-width: 300px;
 
             a {
@@ -152,7 +152,7 @@ limitations under the License.
 
         .mx_Toast_detail {
             display: block;
-            font-weight: $font-normal;
+            font-weight: var(--font-normal);
             margin-top: $spacing-4;
             max-width: 300px;
         }

diff --git a/res/css/structures/_UserMenu.pcss b/res/css/structures/_UserMenu.pcss
@@ -47,7 +47,7 @@ limitations under the License.
     }
 
     .mx_UserMenu_name {
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
         font-size: $font-15px;
         line-height: $font-24px;
         margin-left: 10px;
@@ -147,7 +147,7 @@ limitations under the License.
             display: inline-block;
 
             > span {
-                font-weight: 600;
+                font-weight: var(--font-semi-bold);
                 display: block;
 
                 & + span {

diff --git a/res/css/structures/auth/_Login.pcss b/res/css/structures/auth/_Login.pcss
@@ -18,7 +18,7 @@ limitations under the License.
 .mx_Login_submit {
     @mixin mx_DialogButton;
     font-size: 15px;
-    font-weight: 600;
+    font-weight: var(--font-semi-bold);
     width: 100%;
     margin-top: 24px;
     margin-bottom: 24px;

diff --git a/res/css/views/auth/_AuthBody.pcss b/res/css/views/auth/_AuthBody.pcss
@@ -25,7 +25,7 @@ limitations under the License.
     box-sizing: border-box;
 
     b {
-        font-weight: 600;
+        font-weight: var(--font-semi-bold);
     }
 
     &.mx_AuthBody_flex {
@@ -35,14 +35,14 @@ limitations under the License.
 
     h1 {
         font-size: $font-24px;
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
         margin-top: $spacing-8;
         color: $authpage-primary-color;
     }
 
     h2 {
         font-size: $font-14px;
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
         color: $authpage-secondary-color;
     }
 
@@ -155,7 +155,7 @@ limitations under the License.
     }
 
     .mx_Login_submit {
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
         margin: 0 0 $spacing-16;
     }
 
@@ -168,7 +168,7 @@ limitations under the License.
     }
 
     .mx_AuthBody_sign-in-instead-button {
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
         padding: $spacing-4;
     }
 
@@ -262,7 +262,7 @@ limitations under the License.
     text-align: center;
 
     > a {
-        font-weight: $font-semi-bold;
+        font-weight: var(--font-semi-bold);
     }
 }