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>
This commit is contained in:
raduanastase8x8
2025-08-07 03:07:27 +03:00
committed by GitHub
parent b5ad984dab
commit d2e52d2c2a
110 changed files with 502 additions and 487 deletions

View File

@@ -12,7 +12,6 @@ import { IDeeplinkingConfig, IDeeplinkingMobileConfig } from '../../base/config/
import { isSupportedMobileBrowser } from '../../base/environment/environment';
import { translate } from '../../base/i18n/functions';
import Platform from '../../base/react/Platform.web';
import { withPixelLineHeight } from '../../base/styles/functions.web';
import Button from '../../base/ui/components/web/Button';
import DialInSummary from '../../invite/components/dial-in-summary/web/DialInSummary';
import { openWebApp } from '../actions';
@@ -51,10 +50,10 @@ const useStyles = makeStyles()((theme: Theme) => {
marginTop: 24,
textAlign: 'center',
marginBottom: 32,
...withPixelLineHeight(theme.typography.heading5)
...theme.typography.heading5
},
roomNameLabel: {
...withPixelLineHeight(theme.typography.bodyLongRegularLarge)
...theme.typography.bodyLongRegularLarge
},
joinMeetWrapper: {
marginTop: 24,
@@ -63,7 +62,7 @@ const useStyles = makeStyles()((theme: Theme) => {
labelDescription: {
textAlign: 'center',
marginTop: 16,
...withPixelLineHeight(theme.typography.bodyShortRegularLarge)
...theme.typography.bodyShortRegularLarge
},
linkWrapper: {
display: 'flex',
@@ -74,7 +73,7 @@ const useStyles = makeStyles()((theme: Theme) => {
},
linkLabel: {
color: theme.palette.link01,
...withPixelLineHeight(theme.typography.bodyLongBoldLarge)
...theme.typography.bodyLongBoldLarge
},
supportedBrowserContent: {
marginTop: 16,
@@ -84,7 +83,7 @@ const useStyles = makeStyles()((theme: Theme) => {
justifyContent: 'center'
},
labelOr: {
...withPixelLineHeight(theme.typography.bodyShortRegularLarge)
...theme.typography.bodyShortRegularLarge
},
separator: {
marginTop: '32px',