ref(Theme): Changes typography values to rem (#16021)

Replaces hard-coded pixel values with relative rem units across UI components to improve typography responsiveness and maintainability.

Co-authored-by: Hristo Terezov <hristo@jitsi.org>

react/features/polls/components/web/PollAnswer.tsx

@@ -6,7 +6,6 @@ import { makeStyles } from 'tss-react/mui';
 
 import Icon from '../../../base/icons/components/Icon';
 import { IconCloseLarge } from '../../../base/icons/svg';
-import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import Button from '../../../base/ui/components/web/Button';
 import Checkbox from '../../../base/ui/components/web/Checkbox';
 import { BUTTON_TYPES } from '../../../base/ui/constants.web';
@@ -31,12 +30,12 @@ const useStyles = makeStyles()(theme => {
             marginBottom: '24px'
         },
         question: {
-            ...withPixelLineHeight(theme.typography.heading6),
+            ...theme.typography.heading6,
             color: theme.palette.text01,
             marginBottom: '8px'
         },
         creator: {
-            ...withPixelLineHeight(theme.typography.bodyShortRegular),
+            ...theme.typography.bodyShortRegular,
             color: theme.palette.text02
         },
         answerList: {

react/features/polls/components/web/PollCreate.tsx

@@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
-import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import Button from '../../../base/ui/components/web/Button';
 import Input from '../../../base/ui/components/web/Input';
 import { BUTTON_TYPES } from '../../../base/ui/constants.web';
@@ -22,7 +21,7 @@ const useStyles = makeStyles()(theme => {
             overflowY: 'auto'
         },
         header: {
-            ...withPixelLineHeight(theme.typography.heading6),
+            ...theme.typography.heading6,
             color: theme.palette.text01,
             margin: '24px 0 16px'
         },
@@ -39,7 +38,7 @@ const useStyles = makeStyles()(theme => {
             marginBottom: '24px'
         },
         removeOption: {
-            ...withPixelLineHeight(theme.typography.bodyShortRegular),
+            ...theme.typography.bodyShortRegular,
             color: theme.palette.link01,
             marginTop: '8px',
             border: 0,

react/features/polls/components/web/PollResults.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import AbstractPollResults, { AbstractProps } from '../AbstractPollResults';
 
 const useStyles = makeStyles()(theme => {
@@ -17,12 +16,12 @@ const useStyles = makeStyles()(theme => {
             marginBottom: '16px'
         },
         question: {
-            ...withPixelLineHeight(theme.typography.heading6),
+            ...theme.typography.heading6,
             color: theme.palette.text01,
             marginBottom: '8px'
         },
         creator: {
-            ...withPixelLineHeight(theme.typography.bodyShortRegular),
+            ...theme.typography.bodyShortRegular,
             color: theme.palette.text02
         },
         resultList: {
@@ -38,7 +37,7 @@ const useStyles = makeStyles()(theme => {
             display: 'flex',
             flexShrink: 1,
             overflowWrap: 'anywhere',
-            ...withPixelLineHeight(theme.typography.bodyShortRegular),
+            ...theme.typography.bodyShortRegular,
             color: theme.palette.text01,
             marginBottom: '4px'
         },
@@ -65,7 +64,7 @@ const useStyles = makeStyles()(theme => {
         voteCount: {
             flex: 1,
             textAlign: 'right',
-            ...withPixelLineHeight(theme.typography.bodyShortBold),
+            ...theme.typography.bodyShortBold,
             color: theme.palette.text01
         },
         voters: {
@@ -79,7 +78,7 @@ const useStyles = makeStyles()(theme => {
             padding: '8px 16px',
 
             '& li': {
-                ...withPixelLineHeight(theme.typography.bodyShortRegular),
+                ...theme.typography.bodyShortRegular,
                 color: theme.palette.text01,
                 margin: 0,
                 marginBottom: '2px',
@@ -96,7 +95,7 @@ const useStyles = makeStyles()(theme => {
             '& button': {
                 border: 0,
                 backgroundColor: 'transparent',
-                ...withPixelLineHeight(theme.typography.bodyShortRegular),
+                ...theme.typography.bodyShortRegular,
                 color: theme.palette.link01
             }
         }

react/features/polls/components/web/PollsList.tsx

@@ -7,7 +7,6 @@ import { IReduxState } from '../../../app/types';
 import Icon from '../../../base/icons/components/Icon';
 import { IconMessage } from '../../../base/icons/svg';
 import { browser } from '../../../base/lib-jitsi-meet';
-import { withPixelLineHeight } from '../../../base/styles/functions.web';
 
 import PollItem from './PollItem';
 
@@ -31,7 +30,7 @@ const useStyles = makeStyles()(theme => {
             }
         },
         emptyMessage: {
-            ...withPixelLineHeight(theme.typography.bodyLongBold),
+            ...theme.typography.bodyLongBold,
             color: theme.palette.text02,
             padding: '0 24px',
             textAlign: 'center'