Make all 'font-size's and 'line-height's rem

res/css/_common.scss

@@ -16,6 +16,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+@import "./_font-sizes.scss";
+
+:root {
+    font-size: 15px;
+}
+
 html {
     /* hack to stop overscroll bounce on OSX and iOS.
        N.B. Breaks things when we have legitimate horizontal overscroll */
@@ -25,7 +31,7 @@ html {
 
 body {
     font-family: $font-family;
-    font-size: 15px;
+    font-size: $font-15px;
     background-color: $primary-bg-color;
     color: $primary-fg-color;
     border: 0px;
@@ -60,7 +66,7 @@ b {
 h2 {
     color: $primary-fg-color;
     font-weight: 400;
-    font-size: 18px;
+    font-size: $font-18px;
     margin-top: 16px;
     margin-bottom: 16px;
 }
@@ -76,7 +82,7 @@ input[type=search],
 input[type=password] {
     padding: 9px;
     font-family: $font-family;
-    font-size: 14px;
+    font-size: $font-14px;
     font-weight: 600;
     min-width: 0;
 }
@@ -253,7 +259,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     color: $light-fg-color;
     z-index: 4012;
     font-weight: 300;
-    font-size: 15px;
+    font-size: $font-15px;
     position: relative;
     padding: 25px 30px 30px 30px;
     max-height: 80%;
@@ -321,8 +327,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 }
 
 .mx_Dialog_title {
-    font-size: 22px;
-    line-height: 36px;
+    font-size: $font-22px;
+    line-height: $font-36px;
     color: $dialog-title-fg-color;
 }
 
@@ -350,7 +356,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 
 .mx_Dialog_content {
     margin: 24px 0 68px;
-    font-size: 14px;
+    font-size: $font-14px;
     color: $primary-fg-color;
     word-wrap: break-word;
 }
@@ -446,7 +452,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 }
 
 .mx_TextInputDialog_input {
-    font-size: 15px;
+    font-size: $font-15px;
     border-radius: 3px;
     border: 1px solid $input-border-color;
     padding: 9px;

res/css/_font-sizes.scss

@@ -0,0 +1,63 @@
+/*
+Copyright 2020 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+$font-8px: 0.533rem;
+$font-9px: 0.600rem;
+$font-10px: 0.667rem;
+$font-10-4px: 0.693rem;
+$font-11px: 0.733rem;
+$font-12px: 0.800rem;
+$font-13px: 0.867rem;
+$font-14px: 0.933rem;
+$font-15px: 1.000rem;
+$font-16px: 1.067rem;
+$font-17px: 1.133rem;
+$font-18px: 1.200rem;
+$font-19px: 1.267rem;
+$font-20px: 1.333rem;
+$font-21px: 1.400rem;
+$font-22px: 1.467rem;
+$font-23px: 1.533rem;
+$font-24px: 1.600rem;
+$font-25px: 1.667rem;
+$font-26px: 1.733rem;
+$font-27px: 1.800rem;
+$font-28px: 1.867rem;
+$font-29px: 1.933rem;
+$font-30px: 2.000rem;
+$font-31px: 2.067rem;
+$font-32px: 2.133rem;
+$font-33px: 2.200rem;
+$font-34px: 2.267rem;
+$font-35px: 2.333rem;
+$font-36px: 2.400rem;
+$font-37px: 2.467rem;
+$font-38px: 2.533rem;
+$font-39px: 2.600rem;
+$font-40px: 2.667rem;
+$font-41px: 2.733rem;
+$font-42px: 2.800rem;
+$font-43px: 2.867rem;
+$font-44px: 2.933rem;
+$font-45px: 3.000rem;
+$font-46px: 3.067rem;
+$font-47px: 3.133rem;
+$font-48px: 3.200rem;
+$font-49px: 3.267rem;
+$font-50px: 3.333rem;
+$font-51px: 3.400rem;
+$font-52px: 3.467rem;
+$font-400px: 26.667rem;

res/css/rethemendex.sh

@@ -8,7 +8,7 @@ cd `dirname $0`
     # we used to have exclude /themes from the find at this point.
     # as themes are no longer a spurious subdirectory of css/, we don't
     # need it any more.
-    find . -iname _\*.scss | fgrep -v _components.scss | LC_ALL=C sort |
+    find . -iname _\*.scss | sort | fgrep -v _components.scss | LC_ALL=C sort |
         while read i; do
             echo "@import \"$i\";"
         done

res/css/structures/_ContextualMenu.scss

@@ -36,7 +36,7 @@ limitations under the License.
     background-color: $menu-bg-color;
     color: $primary-fg-color;
     position: absolute;
-    font-size: 14px;
+    font-size: $font-14px;
     z-index: 5001;
 }
 

res/css/structures/_CreateRoom.scss

@@ -26,7 +26,7 @@ limitations under the License.
     border-radius: 3px;
     border: 1px solid $strong-input-border-color;
     font-weight: 300;
-    font-size: 13px;
+    font-size: $font-13px;
     padding: 9px;
     margin-top: 6px;
 }

res/css/structures/_FilePanel.scss

@@ -49,7 +49,7 @@ limitations under the License.
 
 .mx_FilePanel .mx_EventTile .mx_MFileBody_download {
     display: flex;
-    font-size: 14px;
+    font-size: $font-14px;
     color: $event-timestamp-color;
 }
 
@@ -60,7 +60,7 @@ limitations under the License.
 
 .mx_FilePanel .mx_EventTile .mx_MImageBody_size {
     flex: 1 0 0;
-    font-size: 11px;
+    font-size: $font-11px;
     text-align: right;
     white-space: nowrap;
 }
@@ -80,7 +80,7 @@ limitations under the License.
     flex: 1 1 auto;
     line-height: initial;
     padding: 0px;
-    font-size: 11px;
+    font-size: $font-11px;
     opacity: 1.0;
     color: $event-timestamp-color;
 }
@@ -90,7 +90,7 @@ limitations under the License.
     text-align: right;
     visibility: visible;
     position: initial;
-    font-size: 11px;
+    font-size: $font-11px;
     opacity: 1.0;
     color: $event-timestamp-color;
 }

res/css/structures/_GroupView.scss

@@ -134,7 +134,7 @@ limitations under the License.
     overflow: hidden;
     color: $primary-fg-color;
     font-weight: bold;
-    font-size: 22px;
+    font-size: $font-22px;
     padding-left: 19px;
     padding-right: 16px;
     /* why isn't text-overflow working? */
@@ -148,7 +148,7 @@ limitations under the License.
     max-height: 42px;
     color: $settings-grey-fg-color;
     font-weight: 300;
-    font-size: 13px;
+    font-size: $font-13px;
     padding-left: 19px;
     margin-right: 16px;
     overflow: hidden;
@@ -196,7 +196,7 @@ limitations under the License.
     text-transform: uppercase;
     color: $h3-color;
     font-weight: 600;
-    font-size: 13px;
+    font-size: $font-13px;
     margin-bottom: 10px;
 }
 
@@ -226,7 +226,7 @@ limitations under the License.
 .mx_GroupView_rooms_header_addRow_label {
     display: inline-block;
     vertical-align: top;
-    line-height: 24px;
+    line-height: $font-24px;
     padding-left: 28px;
     color: $accent-color;
 }
@@ -258,7 +258,7 @@ limitations under the License.
 
 .mx_GroupView_membershipSection_description {
     /* To match textButton */
-    line-height: 34px;
+    line-height: $font-34px;
 }
 
 .mx_GroupView_membershipSection_description .mx_BaseAvatar {

res/css/structures/_LeftPanel.scss

@@ -147,7 +147,7 @@ limitations under the License.
     }
 
     .mx_AccessibleButton {
-        font-size: 14px;
+        font-size: $font-14px;
         margin: 4px 0 1px 9px;
         padding: 9px;
         padding-left: 42px;

res/css/structures/_MyGroups.scss

@@ -105,7 +105,7 @@ limitations under the License.
 .mx_MyGroups_placeholder {
     background-color: $info-plinth-bg-color;
     color: $info-plinth-fg-color;
-    line-height: 400px;
+    line-height: $font-400px;
     border-radius: 10px;
     text-align: center;
 }
@@ -149,19 +149,19 @@ limitations under the License.
 
 .mx_GroupTile_profile .mx_GroupTile_name {
     margin: 0px;
-    font-size: 15px;
+    font-size: $font-15px;
 }
 
 .mx_GroupTile_profile .mx_GroupTile_groupId {
-    font-size: 13px;
+    font-size: $font-13px;
     opacity: 0.7;
 }
 
 .mx_GroupTile_profile .mx_GroupTile_desc {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
-    font-size: 13px;
+    font-size: $font-13px;
     max-height: 36px;
     overflow: hidden;
 }

res/css/structures/_NotificationPanel.scss

@@ -39,7 +39,7 @@ limitations under the License.
 
 .mx_NotificationPanel .mx_EventTile_roomName {
     font-weight: bold;
-    font-size: 14px;
+    font-size: $font-14px;
 }
 
 .mx_NotificationPanel .mx_EventTile_roomName a {
@@ -54,7 +54,7 @@ limitations under the License.
 .mx_NotificationPanel .mx_EventTile .mx_SenderProfile,
 .mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
     color: $primary-fg-color;
-    font-size: 12px;
+    font-size: $font-12px;
     display: inline;
     padding-left: 0px;
 }

res/css/structures/_RightPanel.scss

@@ -96,7 +96,7 @@ limitations under the License.
 }
 
 .mx_RightPanel_headerButton_badge {
-    font-size: 8px;
+    font-size: $font-8px;
     border-radius: 8px;
     color: $accent-fg-color;
     background-color: $accent-color;

res/css/structures/_RoomDirectory.scss

@@ -64,7 +64,7 @@ limitations under the License.
 }
 
 .mx_RoomDirectory_table {
-    font-size: 12px;
+    font-size: $font-12px;
     color: $primary-fg-color;
     width: 100%;
     text-align: left;
@@ -112,7 +112,7 @@ limitations under the License.
 
 .mx_RoomDirectory_name {
     display: inline-block;
-    font-size: 18px;
+    font-size: $font-18px;
     font-weight: 600;
 }
 
@@ -124,7 +124,7 @@ limitations under the License.
     border-radius: 10px;
     display: inline-block;
     height: 20px;
-    line-height: 20px;
+    line-height: $font-20px;
     padding: 0 5px;
     color: $accent-fg-color;
     background-color: $rte-room-pill-color;
@@ -136,7 +136,7 @@ limitations under the License.
 }
 
 .mx_RoomDirectory_alias {
-    font-size: 12px;
+    font-size: $font-12px;
     color: $settings-grey-fg-color;
 }
 
@@ -150,7 +150,7 @@ limitations under the License.
 }
 
 .mx_RoomDirectory > span {
-    font-size: 15px;
+    font-size: $font-15px;
     margin-top: 0;
 
     .mx_AccessibleButton {