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/base/ui/components/web/Button.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
 import Icon from '../../../icons/components/Icon';
-import { withPixelLineHeight } from '../../../styles/functions.web';
 import { BUTTON_TYPES } from '../../constants.web';
 import { IButtonProps } from '../types';
 
@@ -57,7 +56,7 @@ const useStyles = makeStyles()(theme => {
             alignItems: 'center',
             justifyContent: 'center',
             border: 0,
-            ...withPixelLineHeight(theme.typography.bodyShortBold),
+            ...theme.typography.bodyShortBold,
             transition: 'background .2s',
             cursor: 'pointer',
 
@@ -151,7 +150,7 @@ const useStyles = makeStyles()(theme => {
 
         small: {
             padding: '8px 16px',
-            ...withPixelLineHeight(theme.typography.labelBold),
+            ...theme.typography.labelBold,
 
             '&.iconButton': {
                 padding: theme.spacing(1)
@@ -162,7 +161,7 @@ const useStyles = makeStyles()(theme => {
 
         large: {
             padding: '13px 16px',
-            ...withPixelLineHeight(theme.typography.bodyShortBoldLarge),
+            ...theme.typography.bodyShortBoldLarge,
 
             '&.iconButton': {
                 padding: '12px'