Variable font size in Ionic react

setThemeTextSize.ts

const setThemeTextSize = (newTextSize: string): void => {
  const root = document.querySelector(':root') as HTMLElement;
  if (root) {
    root.style.setProperty('--app-text-size-base', `${newTextSize}px`);
  }
};

export default setThemeTextSize;

text.scss

body {
  font-size: var(--app-text-size-base);
}

ion-button {
  font-size: var(--app-text-size-base); /* iOS Title 3 */
}

ion-title {
  font-size: var(--app-text-size-small);
}

// These need to be overridden because of default ionic styling.
ion-label, ion-item {
  font-size: var(--app-text-size-small) !important;
}

ion-chip {
  font-size: var(--app-text-size-small);
}

ion-card-title {
  font-size: var(--app-text-size-title);
  margin-bottom: 11px; // Need to add some space before the text because the text is now larger.
}

ion-card-content, ion-card-content p {
  font-size: var(--app-text-size-base) !important;
}

ion-toast {
  font-size: var(--app-text-size-base);
}

// Alerts
h2.alert-title {
  font-size: var(--app-text-size-title) !important;
}
.alert-button, .alert-message, .alert-radio-label {
  font-size: var(--app-text-size-small) !important;
}

// IonTabs
// Hide tab bar icons when the text size is 200% or more.
.text-oversize ion-tabs {
  ion-tab-button > ion-icon, ion-tab-button > img {
    display: none;
  }
}
// Ensure <ImageMascot> can be used on the AppTabBar.
ion-tabs ion-tab-button > ion-label {
  font-size: var(--app-text-size-half) !important;
}

/* from ionic-react typography.css */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: var(--app-text-size-title-h6) !important;
  margin-bottom: var(--app-text-size-half) !important;
  font-weight: 500;
  line-height: 1.2;
}

// For accessibility, we want to keep the headings in order: h1 -> h2 -> h3.
// However, sometimes we need to adjust the heading size.
// So we use CSS classes to set the correct size without hurting accessibility.
// .content contains pages loaded from Drupal, so we can safely set heading size based on those.

.content h1, .h1size {
  margin-top: var(--app-text-size-base) !important;
  font-size: var(--app-text-size-title-h1) !important;
}

.content h2, .h2size {
  margin-top: var(--app-text-size-title-h5) !important;
  font-size: var(--app-text-size-title-h2) !important;
}

.content h3, .h3size {
  font-size: var(--app-text-size-title-h3) !important;
}

.content h4, .h4size {
  font-size: var(--app-text-size-base) !important;
}

.content h5, .h5size {
  font-size: var(--app-text-size-title-h5) !important;
}

.content h6, .h6size {
  font-size: var(--app-text-size-title-h6) !important;
}

// Author text should be a little smaller
figcaption {
  font-size: var(--app-text-size-small) !important;
}

// CKEditor custom font sizes
.text-small {
  font-size: var(--app-text-size-small);
}

.text-big {
  font-size: var(--app-text-size-title-h1);
}

types.ts

// 100% 125% 150% 200%
export enum TextSize {
  Standard100 = '20',
  Big125 = '25',
  Bigger150 = '30',
  Biggest200 = '40',
}

variables.css

:root {
  /* https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/ */
  --app-text-size-base: 1.25rem; /* Assumes 16px base size. */
  --app-text-size-title: calc(var(--app-text-size-base) * 1.2); /* 24px */
  --app-text-size-title-h1: calc(var(--app-text-size-base) * 1.3); /* 26px */
  --app-text-size-title-h2: calc(var(--app-text-size-base) * 1.2); /* 24px */
  --app-text-size-title-h3: calc(var(--app-text-size-base) * 1.1); /* 22px */
  --app-text-size-title-h5: calc(var(--app-text-size-base) * 0.9); /* 18px */
  --app-text-size-title-h6: calc(var(--app-text-size-base) * 0.8); /* 16px */
  /* iOS default big size */
  --app-text-size-small: calc(var(--app-text-size-base) * 0.85); /* 17px */
  --app-text-size-half: calc(var(--app-text-size-base) * 0.5); /* 10px */
  --app-text-size-half-negative: calc(var(--app-text-size-half) * -1); /* -10px */