style(general) Replaced fixed values for font-size and line-height with rem (#15917)

* style(general) Replaced font-size fixed units with rem

* style(general) Replaced font-size fixed units with rem in the tokens

* style(general) Replaced line-height fixed units with rem

css/404.scss

     text-align: center;
 
     h2 {
-        font-size: 48px;
+        font-size: 3rem;
         color : #f2f2f2;
     }
 
     &__message {
-        font-size: 24px;
+        font-size: 1.5rem;
         margin-top: 20px;
     }
 }

css/_base.scss

     margin: 0px;
     width: 100%;
     height: 100%;
-    font-size: 12px;
+    font-size: 0.75rem;
     font-weight: 400;
     overflow: hidden;
     color: #F1F1F1;
     position: absolute;
     left: 25;
     bottom: 7;
-    font-size: 11pt;
+    font-size: 0.875rem;
     color: rgba(255,255,255,.50);
     text-decoration: none;
     z-index: $watermarkZ;

css/_chat.scss

 #chatconversation {
     box-sizing: border-box;
     flex: 1;
-    font-size: 10pt;
+    font-size: 0.75rem;
     height: calc(100% - 10px);
-    line-height: 20px;
+    line-height: 1.25rem;
     overflow: auto;
     padding: 16px;
     text-align: left;
 #nickname {
     text-align: center;
     color: #9d9d9d;
-    font-size: 16px;
+    font-size: 1rem;
     margin: auto 0;
     padding: 0 16px;
 
     }
 
     label {
-        line-height: 24px;
+        line-height: 1.5rem;
     }
 }
 
     }
 
     .chatmessage .usermessage {
-        font-size: 16px;
+        font-size: 1rem;
     }
 }
 
 }
 
 #smileys {
-    font-size: 20pt;
+    font-size: 1.625rem;
     margin: auto;
     cursor: pointer;
 }
 }
 
 #smileysContainer .smiley {
-    font-size: 20pt;
+    font-size: 1.625rem;
 }
 
 .smileyContainer {
         box-sizing: border-box;
         color: #fff;
         font-weight: 600;
-        font-size: 24px;
-        line-height: 32px;
+        font-size: 1.5rem;
+        line-height: 2rem;
 
         .jitsi-icon {
             cursor: pointer;

css/_chrome-extension-banner.scss

     }
 
     &__checkbox-label {
-        font-size: 14px;
-        line-height: 18px;
+        font-size: 0.875rem;
+        line-height: 1.125rem;
         display: flex;
         align-items: center;
         letter-spacing: -0.006em;
     }
 
     &__text-container {
-      font-size: 14px;
-      line-height: 18px;
+      font-size: 0.875rem;
+      line-height: 1.125rem;
       display: flex;
       align-items: center;
       letter-spacing: -0.006em;
 
     &__button-text {
       font-weight: 600;
-      font-size: 14px;
-      line-height: 40px;
+      font-size: 0.875rem;
+      line-height: 2.5rem;
       text-align: center;
       letter-spacing: -0.006em;
       color: #FFFFFF;

css/_inlay.scss

         margin: 17px 0;
         padding-bottom: 17px;
         color: #ffffff;
-        font-size: 21px;
+        font-size: 1.25rem;
         letter-spacing: 0.3px;
         border-bottom: 1px solid lighten(#FFFFFF, 10%);
     }
         color: #ffffff;
         display: block;
         margin-top: 22px;
-        font-size: 16px;
+        font-size: 1rem;
     }
 
     &__icon {
         margin: 0 10px;
-        font-size: 50px;
+        font-size: 3.125rem;
     }
 
 }

css/_meetings_list.scss

 .meetings-list {
-    font-size: 14px;
+    font-size: 0.875rem;
     color: #253858;
-    line-height: 20px;
+    line-height: 1.25rem;
     text-align: left;
     text-overflow: ellipsis;
     display: flex;
 
         .description {
             color: #2f3237;
-            font-size: 14px;
-            line-height: 18px;
+            font-size: 0.875rem;
+            line-height: 1.125rem;
             margin-bottom: 16px;
             max-width: 436px;
         }
         color: #0163FF;
         cursor: pointer;
         display: flex;
-        font-size: 14px;
-        line-height: 18px;
+        font-size: 0.875rem;
+        line-height: 1.125rem;
         margin: 24px 0 32px 0;
     }
 
         }
 
         .title {
-            font-size: 12px;
+            font-size: 0.75rem;
             font-weight: 600;
-            line-height: 16px;
+            line-height: 1rem;
             margin-bottom: 4px;
         }
 
         .subtitle {
             color: #5E6D7A;
             font-weight: normal;
-            font-size: 12px;
-            line-height: 16px;
+            font-size: 0.75rem;
+            line-height: 1rem;
         }
 
 

css/_navigate_section_list.scss

 %navigate-section-list-text {
     width: 100%;
-    font-size: 14px;
-    line-height: 20px;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
     color: $welcomePageTitleColor;
     text-align: left;
     font-family: 'open_sanslight', Helvetica, sans-serif;
 .navigate-section-tile-body {
     @extend %navigate-section-list-tile-text;
     font-weight: normal;
-    line-height: 24px;
+    line-height: 1.5rem;
 }
 .navigate-section-list-tile-info {
     flex: 1;
 .navigate-section-tile-title {
     @extend %navigate-section-list-tile-text;
     font-weight: bold;
-    line-height: 24px;
+    line-height: 1.5rem;
 }
 .navigate-section-section-header {
     @extend %navigate-section-list-text;

css/_policy.scss

 
     &__text {
         text-align: center;
-        font-size: 14px;
-        line-height: 21px;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
         font-weight: 300;
     }
 }

css/_reactions-menu.scss

 		span.emoji {
 			width: 40px;
 			height: 40px;
-			font-size: 22px;
+			font-size: 1.375rem;
 			display: flex;
 			align-items: center;
 			justify-content: center;
 
 			@for $i from 1 through 12 {
 				&.increase-#{$i}{
-					font-size: calc(20px + #{$i}px);
+					font-size: calc(1.25rem + #{$i}px);
 				}
 			}
 		}
 			span.text {
 				font-style: normal;
 				font-weight: 600;
-				font-size: 14px;
-				line-height: 24px;
+				font-size: 0.875rem;
+				line-height: 1.5rem;
 				margin-left: 8px;
 			}
 		}
 
 .reaction-emoji {
 	position: absolute;
-	font-size: 24px;
-	line-height: 32px;
+	font-size: 1.5rem;
+	line-height: 2rem;
 	width: 32px;
 	height: 32px;
 	top: 0;

css/_recording.scss

         .recording-title {
             display: inline-flex;
             align-items: center;
-            font-size: 14px;
+            font-size: 0.875rem;
             margin-left: 16px;
             max-width: 70%;
 
     .local-recording-warning {
         margin-top: 8px;
         display: block;
-        font-size: 14px;
-        line-height: 20px;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
         padding: 8px 16px;
 
         &.text {
 
     .recording-info-title {
         display: inline-flex;
-        font-size: 14px;
+        font-size: 0.875rem;
         width: 290px
     }
 
     /**
      * Set font-size to be consistent with Atlaskit FieldText.
      */
-    font-size: 14px;
+    font-size: 0.875rem;
 
     .broadcast-dropdown {
         text-align: left;
 
     .warning-text {
         color:#FFD740;
-        font-size: 12px;
+        font-size: 0.75rem;
     }
 }

css/_redirect_page.scss

     width: 30%;
     margin: 20% auto;
     text-align: center;
-    font-size: 24px;
+    font-size: 1.5rem;
 
     .thanks-msg {
         border-bottom: 1px solid #FFFFFF;
         padding-right: 30px;
         p {
             margin: 30px auto;
-            font-size: 24px;
-            line-height: 24px;
+            font-size: 1.5rem;
+            line-height: 1.5rem;
         }
     }
     .hint-msg {
         p {
             margin: 26px auto;
             font-weight: 600;
-            font-size: 16px;
-            line-height: 18px;
+            font-size: 1rem;
+            line-height: 1.125rem;
             .hint-msg__holder{
                 font-weight: 200;
             }
     }
     .forbidden-msg {
         p {
-            font-size: 16px;
+            font-size: 1rem;
             margin-top: 15px;
         }
     }

css/_reset.scss

 body {
   color: #333;
   font-family: Arial, sans-serif;
-  font-size: 14px;
+  font-size: 0.875rem;
   line-height: 1.42857142857143;
 }
 /* International Font Stacks*/
 /* Headings: desired line height in px / font size = unitless line height */
 h1 {
   color: #333;
-  font-size: 32px;
+  font-size: 2rem;
   font-weight: normal;
   line-height: 1.25;
   text-transform: none;
 }
 h2 {
   color: #333;
-  font-size: 24px;
+  font-size: 1.5rem;
   font-weight: normal;
   line-height: 1.25;
   text-transform: none;
 }
 h3 {
   color: #333;
-  font-size: 20px;
+  font-size: 1.25rem;
   font-weight: normal;
   line-height: 1.5;
   text-transform: none;
   margin: 30px 0 0 0;
 }
 h4 {
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: bold;
   line-height: 1.25;
   text-transform: none;
 }
 h5 {
   color: #333;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: bold;
   line-height: 1.42857143;
   text-transform: none;
 }
 h6 {
   color: #707070;
-  font-size: 12px;
+  font-size: 0.75rem;
   font-weight: bold;
   line-height: 1.66666667;
   text-transform: uppercase;
 /* Other typographical elements */
 small {
   color: #707070;
-  font-size: 12px;
+  font-size: 0.75rem;
   line-height: 1.33333333333333;
 }
 code,

css/_responsive.scss

 
         #enter_room {
             .welcome-page-button {
-                font-size: 16px;
+                font-size: 1rem;
                 left: 0;
                 text-align: center;
                 width: 100%;

css/_toolbars.scss

     // Do not inherit the font-family from the toolbar button, because it's an
     // icon style.
     font-family: $baseFontFamily;
-    font-size: 9px;
+    font-size: 0.5rem;
     font-weight: 700;
-    line-height: 13px;
+    line-height: 0.75rem;
     min-width: 13px;
     overflow: hidden;
     text-align: center;
 
     .badge-round {
         bottom: -5px;
-        font-size: 12px;
-        line-height: 20px;
+        font-size: 0.75rem;
+        line-height: 1.25rem;
         min-width: 20px;
         pointer-events: none;
         position: absolute;

css/_variables.scss

 $primaryUnsupportedBrowserButtonBgColor: #0052CC;
 $unsupportedBrowserButtonBgColor: rgba(9, 30, 66, 0.04);
 $unsupportedBrowserTextColor: #4a4a4a;
-$unsupportedBrowserTextSmallFontSize: 17px;
+$unsupportedBrowserTextSmallFontSize: 1rem;
 $unsupportedBrowserTitleColor: #fff;
-$unsupportedBrowserTitleFontSize: 24px;
+$unsupportedBrowserTitleFontSize: 1.5rem;
 $unsupportedDesktopBrowserTextColor: rgba(255, 255, 255, 0.7);
-$unsupportedDesktopBrowserTextFontSize: 21px;
+$unsupportedDesktopBrowserTextFontSize: 1.25rem;
 
 /**
  * The size of the default watermark.
 $welcomePageHeaderContainerMargin: $welcomePageHeaderContainerMarginTop auto 0;
 
 $welcomePageHeaderTextTitleMarginBottom: 0;
-$welcomePageHeaderTextTitleFontSize: 42px;
+$welcomePageHeaderTextTitleFontSize: 2.625rem;
 $welcomePageHeaderTextTitleFontWeight: normal;
 $welcomePageHeaderTextTitleLineHeight: 50px;
 $welcomePageHeaderTextTitleOpacity: 1;

css/_videolayout_default.scss

 }
 
 #alwaysOnTop .displayname {
-    font-size: 15px;
+    font-size: 0.875rem;
     position: inherit;
     width: 100%;
     left: 0px;
     width: auto;
     z-index: $zindex2;
     font-weight: 600;
-    font-size: 14px;
+    font-size: 0.875rem;
     text-align: center;
     color: #FFF;
     left: 50%;
 
 .presence-label {
     color: #fff;
-    font-size: 12px;
+    font-size: 0.75rem;
     font-weight: 100;
     left: 0;
     margin: 0 auto;

css/_welcome_page.scss

 
         .header-text-subtitle {
             color: #fff;
-            font-size: 20px;
+            font-size: 1.25rem;
             font-weight: 600;
-            line-height: 26px;
+            line-height: 1.625rem;
             margin: 16px 0 32px 0;
             text-align: $welcomePageHeaderTextAlign;
 
         .not-allow-title-character-div {
             color: #f03e3e;
             background-color: #fff;
-            font-size: 12px;
+            font-size: 0.75rem;
             font-weight: 600;
             margin: 10px 0px 5px 0px;
             text-align: $welcomePageHeaderTextAlign;
                     display: inline-block;
                     height: 50px;
                     width: 100%;
-                    font-size: 14px;
+                    font-size: 0.875rem;
                     padding-left: 10px;
 
                     &.focus-visible {
     }
 
     .tab-container {
-        font-size: 16px;
+        font-size: 1rem;
         position: relative;
         text-align: left;
         display: $welcomePageTabContainerDisplay;
             background-color: #c7ddff;
             border-radius: 6px;
             color: #0163FF;
-            font-size: 14px;
-            line-height: 18px;
+            font-size: 0.875rem;
+            line-height: 1.125rem;
             margin: 4px;
             display: $welcomePageTabButtonsDisplay;
 
 
     .welcome-page-button {
         border: 0;
-        font-size: 14px;
+        font-size: 0.875rem;
         background: $welcomePageButtonBg;
         border-radius: 3px;
         color: #FFFFFF;
 
         * {
             cursor: pointer;
-            font-size: 32px;
+            font-size: 2rem;
         }
 
         .toolbox-icon {

css/modals/invite/_add-people.scss

             width: 28px;
 
             i {
-                line-height: 28px;
+                line-height: 1.75rem;
                 margin: auto;
             }
         }
             padding-left: 10px;
 
             i {
-                line-height: 20px;
+                line-height: 1.25rem;
                 margin: auto;
             }
         }

css/modals/invite/_info.scss

 .info-dialog {
     cursor: default;
     display: flex;
-    font-size: 14px;
+    font-size: 0.875rem;
 
     .info-dialog-column {
         margin-right: 10px;
     max-width: 334px;
     width: 100%;
     margin-top: 20px;
-    font-size: 12px;
-    line-height: 24px;
+    font-size: 0.75rem;
+    line-height: 1.5rem;
     border-collapse: collapse;
 
     * {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    font-size: 12px;
+    font-size: 0.75rem;
     max-height: 100%;
     overflow: auto;
     padding: 15pt;

css/modals/invite/_invite_more.scss

 .invite-more {
     &-dialog {
         color: #fff;
-        font-size: 15px;
-        line-height: 24px;
+        font-size: 0.875rem;
+        line-height: 1.5rem;
 
         &.separator {
             margin: 24px 0 24px -20px;

css/modals/screen-share/_share-screen-warning.scss

 .share-screen-warn-dialog {
-    font-size: 14px;
+    font-size: 0.875rem;
 
     .separator-line {
         margin: 24px 0 24px -20px;

css/modals/security/_security.scss

 .security {
     &-dialog {
         color: #fff;
-        font-size: 15px;
-        line-height: 24px;
+        font-size: 0.875rem;
+        line-height: 1.5rem;
 
         &.password-section {
             display: flex;
             flex-direction: column;
 
             .description {
-                font-size: 13px;
+                font-size: 0.75rem;
             }
 
             .password {
                     button {
                         cursor: pointer;
                         text-decoration: none;
-                        font-size: 14px;
+                        font-size: 0.875rem;
                         color: #6FB1EA;
                     }
 

css/premeeting/_lobby.scss

 .lobby-screen {
-    font-size: 16px;
+    font-size: 1rem;
     font-weight: 400;
-    line-height: 26px;
+    line-height: 1.625rem;
 
     &-content {
         align-items: center;
     flex-direction: column;
 
     .description {
-        font-size: 13px;
+        font-size: 0.75rem;
     }
 
     .control-row {
         margin-top: 15px;
 
         label {
-            font-size: 14px;
+            font-size: 0.875rem;
             font-weight: bold;
         }
     }
                 .title {
                     flex: 1;
                     color: #fff;
-                    font-size: 20px;
+                    font-size: 1.25rem;
                     font-weight: 600;
-                    line-height: 28px;
+                    line-height: 1.75rem;
                     letter-spacing: -1.2%;
                 }
             }
     border-radius: 6px;
     box-sizing: border-box;
     color: white;
-    font-size: 12px;
-    line-height: 16px;
+    font-size: 0.75rem;
+    line-height: 1rem;
     margin-bottom: 16px;
     margin-top: -8px;
     padding: 4px;

css/premeeting/_premeeting-screens.scss

         color: #fff;
         cursor: pointer;
         display: inline-block;
-        font-size: 14px;
+        font-size: 0.875rem;
         font-weight: 600;
-        line-height: 24px;
+        line-height: 1.5rem;
         margin-bottom: 16px;
         padding: 7px 16px;
         position: relative;
 
         &.text {
             width: auto;
-            font-size: 13px;
+            font-size: 0.75rem;
             margin: 0;
             padding: 0;
         }
         }
 
         .action-btn {
-            font-size: 16px;
+            font-size: 1rem;
             margin-bottom: 8px;
             padding: 11px 16px;
         }

css/reload_overlay/_reload_overlay.scss

 .reload_overlay_title {
     display: block;
-    font-size: 16px;
-    line-height: 20px;
+    font-size: 1rem;
+    line-height: 1.25rem;
 }
 
 .reload_overlay_text {
     display: block;
-    font-size: 12px;
-    line-height: 30px;
+    font-size: 0.75rem;
+    line-height: 1.875rem;
 }
 
 #reloadProgressBar {

css/ringing/_ringing.scss

 
     &__status{
         margin-top: 15px;
-        font-size: 14px;
-        line-height: 20px;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
     }
 
     &__name {
-        font-size: 24px;
-        line-height: 32px;
+        font-size: 1.5rem;
+        line-height: 2rem;
     }
 }

css/third-party-branding/google.scss

     cursor: pointer;
     display: inline-flex;
     font-family: Roboto, arial, sans-serif;
-    font-size: 14px;
+    font-size: 0.875rem;
     padding: 1px;
 
     .google-cta {
         /**
          * Hack the line height for vertical centering of text.
          */
-        line-height: 32px;
+        line-height: 2rem;
         margin: 0 15px;
     }
 

css/third-party-branding/microsoft.scss

     .microsoft-cta {
         display: inline-block;
         color: #5E5E5E;
-        font-size: 15px;
-        line-height: 41px;
+        font-size: 0.875rem;
+        line-height: 2.5rem;
     }
 
     .microsoft-logo {

react/features/base/ui/Tokens.ts

     labelBold: 'labelBold01',
 
     bodyShortRegularSmall: {
-        fontSize: 10,
-        lineHeight: 16,
+        fontSize: '0.625rem',
+        lineHeight: '1rem',
         fontWeight: font.weightRegular,
         letterSpacing: 0
     },
 
     bodyShortRegular: {
-        fontSize: 14,
-        lineHeight: 20,
+        fontSize: '0.875rem',
+        lineHeight: '1.25rem',
         fontWeight: font.weightRegular,
         letterSpacing: 0
     },
 
     bodyShortBold: {
-        fontSize: 14,
-        lineHeight: 20,
+        fontSize: '0.875rem',
+        lineHeight: '1.25rem',
         fontWeight: font.weightSemiBold,
         letterSpacing: 0
     },
 
     bodyShortRegularLarge: {
-        fontSize: 16,
-        lineHeight: 22,
+        fontSize: '1rem',
+        lineHeight: '1.375rem',
         fontWeight: font.weightRegular,
         letterSpacing: 0
     },
 
     bodyShortBoldLarge: {
-        fontSize: 16,
-        lineHeight: 22,
+        fontSize: '1rem',
+        lineHeight: '1.375rem',
         fontWeight: font.weightSemiBold,
         letterSpacing: 0
     },
 
     bodyLongRegular: {
-        fontSize: 14,
-        lineHeight: 24,
+        fontSize: '0.875rem',
+        lineHeight: '1.5rem',
         fontWeight: font.weightRegular,
         letterSpacing: 0
     },
 
     bodyLongRegularLarge: {
-        fontSize: 16,
-        lineHeight: 26,
+        fontSize: '1rem',
+        lineHeight: '1.625rem',
         fontWeight: font.weightRegular,
         letterSpacing: 0
     },
 
     bodyLongBold: {
-        fontSize: 14,
-        lineHeight: 24,
+        fontSize: '0.875rem',
+        lineHeight: '1.5rem',
         fontWeight: font.weightSemiBold,
         letterSpacing: 0
     },
 
     bodyLongBoldLarge: {
-        fontSize: 16,
-        lineHeight: 26,
+        fontSize: '1rem',
+        lineHeight: '1.625rem',
         fontWeight: font.weightSemiBold,
         letterSpacing: 0
     },
     heading2: 'heading02',
 
     heading3: {
-        fontSize: 32,
-        lineHeight: 40,
+        fontSize: '2rem',
+        lineHeight: '2.5rem',
         fontWeight: font.weightSemiBold,
         letterSpacing: 0
     },
 
     heading4: {
-        fontSize: 28,
-        lineHeight: 36,
+        fontSize: '1.75rem',
+        lineHeight: '2.25rem',
         fontWeight: font.weightSemiBold,
         letterSpacing: 0
     },
 
     heading5: {
-        fontSize: 20,
-        lineHeight: 28,
+        fontSize: '1.25rem',
+        lineHeight: '1.75rem',
         fontWeight: font.weightSemiBold,
         letterSpacing: 0
     },
 
     heading6: {
-        fontSize: 16,
-        lineHeight: 26,
+        fontSize: '1rem',
+        lineHeight: '1.625rem',
         fontWeight: font.weightSemiBold,
         letterSpacing: 0
     }

static/offline.html

       align-items: center;
       flex-direction: column;
       font-family: Arial, Helvetica, sans-serif;
-      font-size: 14px;
+      font-size: 0.875rem;
       font-weight: 400;
-      line-height: 19px;
+      line-height: 1.125rem;
       margin: auto;
       max-width: 376px;
       text-align: center;
     }
 
     h4 {
-      font-size: 24px;
+      font-size: 1.5rem;
       font-weight: 600;
-      line-height: 32px;
+      line-height: 2rem;
       margin: 24px auto;
     }