@telus-uds/components-base 1.10.0 → 1.12.1

package/src/InputLabel/InputLabel.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import PropTypes from 'prop-types'
 
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
+import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider'
 import {
   a11yProps,
   getTokensPropType,
@@ -17,21 +17,20 @@ import Tooltip from '../Tooltip'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
-const selectLabelStyles = (tokens) => applyTextStyles(selectTokens('Typography', tokens))
+const selectLabelStyles = (tokens, themeOptions) =>
+  applyTextStyles({ ...selectTokens('Typography', tokens), themeOptions })
 
-const selectHintStyles = ({
-  hintColor,
-  hintFontName,
-  hintFontSize,
-  hintFontWeight,
-  hintLineHeight
-}) =>
+const selectHintStyles = (
+  { hintColor, hintFontName, hintFontSize, hintFontWeight, hintLineHeight },
+  themeOptions
+) =>
   applyTextStyles({
     color: hintColor,
     fontName: hintFontName,
     fontSize: hintFontSize,
     fontWeight: hintFontWeight,
-    lineHeight: hintLineHeight
+    lineHeight: hintLineHeight,
+    themeOptions
   })
 
 const selectGapStyles = ({ gap }) => ({ marginRight: gap })
@@ -57,12 +56,14 @@ const InputLabel = forwardRef(
     const hasTooltip = tooltip !== undefined
     const isHintInline = hintPosition === 'inline'
 
+    const { themeOptions } = useTheme()
+
     return (
       <>
         <View ref={ref} style={staticStyles.container} {...selectProps(rest)}>
           <Text
             style={[
-              selectLabelStyles(themeTokens),
+              selectLabelStyles(themeTokens, themeOptions),
               selectGapStyles(themeTokens),
               staticStyles.label
             ]}
@@ -72,7 +73,7 @@ const InputLabel = forwardRef(
           {hint && isHintInline && (
             <Text
               style={[
-                selectHintStyles(themeTokens),
+                selectHintStyles(themeTokens, themeOptions),
                 hasTooltip && selectGapStyles(themeTokens),
                 staticStyles.label
               ]}

package/src/InputSupports/InputSupports.jsx

@@ -9,7 +9,17 @@ import useInputSupports from './useInputSupports'
 
 const InputSupports = forwardRef(
   (
-    { children, copy = 'en', label, hint, hintPosition = 'inline', feedback, tooltip, validation },
+    {
+      children,
+      copy = 'en',
+      label,
+      hint,
+      hintPosition = 'inline',
+      feedback,
+      tooltip,
+      validation,
+      nativeID
+    },
     ref
   ) => {
     const { space } = useThemeTokens('InputSupports')
@@ -18,7 +28,8 @@ const InputSupports = forwardRef(
       feedback,
       hint,
       label,
-      validation
+      validation,
+      nativeID
     })
 
     return (
@@ -72,7 +83,11 @@ InputSupports.propTypes = {
   /**
    * Use to visually mark an input as valid or invalid.
    */
-  validation: PropTypes.oneOf(['error', 'success'])
+  validation: PropTypes.oneOf(['error', 'success']),
+  /**
+   * ID for DOM element on web
+   */
+  nativeID: PropTypes.string
 }
 
 export default InputSupports

package/src/InputSupports/useInputSupports.js

@@ -2,7 +2,7 @@ import useUniqueId from '../utils/useUniqueId'
 
 const joinDefined = (array) => array.filter((item) => item !== undefined).join(' ')
 
-const useInputSupports = ({ label, feedback, validation, hint }) => {
+const useInputSupports = ({ label, feedback, validation, hint, nativeID }) => {
   const hasValidationError = validation === 'error'
 
   const inputId = useUniqueId('input')
@@ -20,7 +20,7 @@ const useInputSupports = ({ label, feedback, validation, hint }) => {
   }
 
   return {
-    inputId,
+    inputId: nativeID || inputId,
     hintId,
     feedbackId,
     a11yProps

package/src/Link/LinkBase.jsx

@@ -15,7 +15,7 @@ import { resolvePressableTokens } from '../utils/pressability'
 import { withLinkRouter } from '../utils'
 
 import InlinePressable from './InlinePressable'
-import { applyTextStyles, applyOuterBorder } from '../ThemeProvider'
+import { applyTextStyles, applyOuterBorder, useTheme } from '../ThemeProvider'
 import { IconText, iconComponentPropTypes } from '../Icon'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps])
@@ -55,12 +55,16 @@ const selectTextStyles = ({ color }) => ({
   })
 })
 
-const selectBlockStyles = ({ blockFontWeight, blockFontSize, blockLineHeight, blockFontName }) =>
+const selectBlockStyles = (
+  { blockFontWeight, blockFontSize, blockLineHeight, blockFontName },
+  themeOptions
+) =>
   applyTextStyles({
     fontWeight: blockFontWeight,
     fontSize: blockFontSize,
     lineHeight: blockLineHeight,
-    fontName: blockFontName
+    fontName: blockFontName,
+    themeOptions
   })
 
 const selectDecorationStyles = ({ color, textLine, textLineStyle }) => ({
@@ -138,6 +142,8 @@ const LinkBase = forwardRef(
     // On web, this makes focus rings wrap only the link, not the entire block
     const blockLeftStyle = Platform.OS === 'web' && staticStyles.blockLeft
 
+    const { themeOptions } = useTheme()
+
     return (
       <InlinePressable
         {...selectedProps}
@@ -162,7 +168,7 @@ const LinkBase = forwardRef(
 
           // TODO: may need to apply some smarter text inheritance here if inline to avoid native
           // issues like double-application of line heights breaking align-items: baseline
-          const blockTextStyles = selectBlockStyles(themeTokens)
+          const blockTextStyles = selectBlockStyles(themeTokens, themeOptions)
 
           const IconComponent = icon || themeTokens.icon
           const { iconSpace } = themeTokens

package/src/List/ListItem.jsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react'
 import { View, Platform, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
-import { useThemeTokens, applyTextStyles } from '../ThemeProvider'
+import { useTheme, useThemeTokens, applyTextStyles } from '../ThemeProvider'
 import {
   a11yProps,
   getTokensPropType,
@@ -41,12 +41,16 @@ const selectBulletPositioningStyles = ({ itemIconSize }) => ({
   height: itemIconSize
 })
 
-const selectItemStyles = ({ itemFontWeight, itemFontSize, itemLineHeight, itemFontName }) =>
+const selectItemStyles = (
+  { itemFontWeight, itemFontSize, itemLineHeight, itemFontName },
+  themeOptions
+) =>
   applyTextStyles({
     fontWeight: itemFontWeight,
     fontSize: itemFontSize,
     lineHeight: itemLineHeight,
-    fontName: itemFontName
+    fontName: itemFontName,
+    themeOptions
   })
 
 const selectItemBlockStyles = ({ interItemMargin }) => ({
@@ -80,8 +84,9 @@ const ListItem = forwardRef(
     ref
   ) => {
     const themeTokens = useThemeTokens('List', tokens, variant)
+    const { themeOptions } = useTheme()
 
-    const itemStyles = selectItemStyles(themeTokens)
+    const itemStyles = selectItemStyles(themeTokens, themeOptions)
     const itemBlockStyles = selectItemBlockStyles(themeTokens)
     const dividerStyles = selectDividerStyles(themeTokens)
     const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens)

package/src/Modal/Modal.jsx

@@ -22,6 +22,7 @@ import {
 import { useViewport } from '../ViewportProvider'
 import IconButton from '../IconButton'
 import dictionary from './dictionary'
+import useScrollBlocking from '../utils/useScrollBlocking'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -89,6 +90,7 @@ const Modal = forwardRef(
   ({ children, isOpen, onClose, maxWidth, tokens, variant, copy, closeButton, ...rest }, ref) => {
     const viewport = useViewport()
     const themeTokens = useThemeTokens('Modal', tokens, variant, { viewport, maxWidth })
+    const modalRef = useScrollBlocking(isOpen)
 
     const { closeIcon: CloseIconComponent } = themeTokens
 
@@ -113,7 +115,7 @@ const Modal = forwardRef(
 
     return (
       <NativeModal transparent {...selectProps(rest)}>
-        <View style={[staticStyles.positioningContainer]}>
+        <View style={[staticStyles.positioningContainer]} ref={modalRef}>
           <View
             style={[staticStyles.sizingContainer, selectContainerStyles(themeTokens)]}
             pointerEvents="box-none" // don't capture backdrop press events

package/src/Notification/Notification.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef, useState } from 'react'
 import { StyleSheet, View } from 'react-native'
 
 import PropTypes from 'prop-types'
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
+import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider'
 import {
   a11yProps,
   getTokensPropType,
@@ -20,7 +20,8 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 
 const selectContainerStyles = (tokens) => ({ ...tokens })
 
-const selectTextStyles = (tokens) => applyTextStyles(selectTokens('Typography', tokens))
+const selectTextStyles = (tokens, themeOptions) =>
+  applyTextStyles({ ...selectTokens('Typography', tokens), themeOptions })
 
 const selectIconProps = ({ iconSize, iconColor }) => ({
   size: iconSize,
@@ -96,12 +97,13 @@ const Notification = forwardRef(
     const [isDismissed, setIsDismissed] = useState(false)
     const themeTokens = useThemeTokens('Notification', tokens, variant, { system })
     const getCopy = useCopy({ dictionary, copy })
+    const { themeOptions } = useTheme()
 
     if (isDismissed) {
       return null
     }
 
-    const textStyles = selectTextStyles(themeTokens)
+    const textStyles = selectTextStyles(themeTokens, themeOptions)
 
     const content = wrapStringsInText(
       typeof children === 'function' ? children({ textStyles }) : children,

package/src/Pagination/Pagination.jsx

@@ -11,7 +11,7 @@ import {
   viewProps,
   withLinkRouter
 } from '../utils'
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
+import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
 import Box from '../Box'
 
@@ -21,13 +21,14 @@ import SideButton from './SideButton'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
-const selectTextStyles = ({ color, fontName, fontSize, fontWeight, lineHeight }) =>
+const selectTextStyles = ({ color, fontName, fontSize, fontWeight, lineHeight }, themeOptions) =>
   applyTextStyles({
     color,
     fontName,
     fontSize,
     fontWeight,
-    lineHeight
+    lineHeight,
+    themeOptions
   })
 
 const Pagination = forwardRef(
@@ -49,6 +50,7 @@ const Pagination = forwardRef(
     const { truncateAbove, gap, ...themeTokens } = useThemeTokens('Pagination', tokens, variant, {
       viewport
     })
+    const { themeOptions } = useTheme()
 
     const items = React.Children.toArray(children)
 
@@ -66,7 +68,7 @@ const Pagination = forwardRef(
       truncateAbove
     })
 
-    const ellipsisTextStyles = selectTextStyles(themeTokens)
+    const ellipsisTextStyles = selectTextStyles(themeTokens, themeOptions)
 
     if (items.length === 0) {
       return null

package/src/RadioCard/RadioCard.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, Text, View } from 'react-native'
 
-import { useThemeTokensCallback, applyTextStyles } from '../ThemeProvider'
+import { applyTextStyles, useTheme, useThemeTokensCallback } from '../ThemeProvider'
 import {
   a11yProps,
   focusHandlerProps,
@@ -96,6 +96,7 @@ const RadioCard = forwardRef(
 
     const getTokens = useThemeTokensCallback('RadioCard', tokens, variant)
     const getCardTokens = (cardState) => selectPressableCardTokens(getTokens(cardState))
+    const { themeOptions } = useTheme()
 
     return (
       <PressableCardBase
@@ -112,7 +113,7 @@ const RadioCard = forwardRef(
           const { radioSpace, contentSpace, ...themeTokens } = getTokens(cardState)
           const radioTokens = selectRadioButtonTokens(themeTokens, 'radio')
           const titleTokens = selectTokens('Typography', themeTokens)
-          const textStyle = applyTextStyles(titleTokens)
+          const textStyle = applyTextStyles({ ...titleTokens, themeOptions })
           return (
             <StackView direction="row" space={radioSpace}>
               <View style={[staticStyles.alignWithText, { height: textStyle.lineHeight }]}>

package/src/Select/Select.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef, useState } from 'react'
 
 import { View, Platform, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
-import { applyTextStyles, useThemeTokens, applyOuterBorder } from '../ThemeProvider'
+import { applyTextStyles, useThemeTokens, applyOuterBorder, useTheme } from '../ThemeProvider'
 import {
   a11yProps,
   componentPropType,
@@ -43,6 +43,7 @@ const selectInputStyles = (
     validationIconSize = 0,
     height
   },
+  themeOptions,
   inactive
 ) => {
   // Subtract border width from padding so overall input width/height doesn't
@@ -50,7 +51,13 @@ const selectInputStyles = (
   const offsetBorder = (value) =>
     typeof value === 'number' ? Math.max(0, value - borderWidth) : value
 
-  const textStyles = applyTextStyles({ fontName, fontSize, lineHeight, fontWeight })
+  const textStyles = applyTextStyles({
+    fontName,
+    fontSize,
+    lineHeight,
+    fontWeight,
+    themeOptions
+  })
 
   const webStyles = Platform.select({
     web: {
@@ -205,13 +212,15 @@ const Select = forwardRef(
 
     const { icon: IconComponent, validationIcon: ValidationIconComponent } = themeTokens
 
+    const { themeOptions } = useTheme()
+
     return (
       <InputSupports {...supportsProps} {...selectedProps}>
         {({ inputId, ...props }) => (
           <View style={selectOuterBorderStyles(themeTokens)}>
             <Picker
               ref={ref}
-              style={selectInputStyles(themeTokens, inactive)}
+              style={selectInputStyles(themeTokens, themeOptions, inactive)}
               onFocus={handleFocus}
               onBlur={handleBlur}
               onMouseOver={handleMouseOver}

package/src/Skeleton/Skeleton.jsx

@@ -22,6 +22,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 const selectSkeletonStyles = ({ color, radius, fadeAnimation }) => ({
   backgroundColor: color,
   borderRadius: radius,
+  maxWidth: '100%',
   ...fadeAnimation
 })
 

package/src/StepTracker/Step.jsx

@@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from 'react-native'
 import StackView from '../StackView'
 import Icon from '../Icon'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
-import { applyTextStyles } from '../ThemeProvider'
+import { applyTextStyles, useTheme } from '../ThemeProvider'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -95,6 +95,7 @@ const selectLabelStyles = (
     labelFontName,
     labelLineHeight
   },
+  themeOptions,
   isCurrent
 ) =>
   applyTextStyles({
@@ -102,7 +103,8 @@ const selectLabelStyles = (
     fontSize: labelFontSize,
     lineHeight: labelLineHeight,
     fontWeight: isCurrent ? labelCurrentFontWeight : labelFontWeight,
-    fontName: labelFontName
+    fontName: labelFontName,
+    themeOptions
   })
 const getStepTestID = (isCompleted, isCurrent) => {
   let testID = 'StepTracker-Step'
@@ -125,6 +127,7 @@ const Step = ({ label, name, status = 0, stepCount = 0, stepIndex = 0, tokens, .
   const isCompleted = status > stepIndex
   const isCurrent = status === stepIndex
   const isActive = isCompleted || isCurrent
+  const { themeOptions } = useTheme()
 
   return (
     <StackView
@@ -158,7 +161,12 @@ const Step = ({ label, name, status = 0, stepCount = 0, stepIndex = 0, tokens, .
       {showStepLabel && (
         <View style={[staticStyles.stepLabelContainer, selectLabelContainerStyles(tokens)]}>
           {showStepName && (
-            <Text style={[staticStyles.centeredText, selectLabelStyles(tokens, isCurrent)]}>
+            <Text
+              style={[
+                staticStyles.centeredText,
+                selectLabelStyles(tokens, themeOptions, isCurrent)
+              ]}
+            >
               {name}
             </Text>
           )}
@@ -167,7 +175,7 @@ const Step = ({ label, name, status = 0, stepCount = 0, stepIndex = 0, tokens, .
               style={[
                 staticStyles.centeredText,
                 tokens.labelDirection === 'column' && staticStyles.wrappingLabel,
-                selectLabelStyles(tokens, isCurrent)
+                selectLabelStyles(tokens, themeOptions, isCurrent)
               ]}
             >
               {label}

package/src/StepTracker/StepTracker.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, Text, View } from 'react-native'
 import StackView from '../StackView'
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
+import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
 import { useViewport } from '../ViewportProvider'
 import useCopy from '../utils/useCopy'
@@ -25,19 +25,17 @@ const selectContainerStyles = ({
 const selectStepTrackerLabelContainerStyles = ({ labelMarginTop }) => ({
   marginTop: labelMarginTop
 })
-const selectStepTrackerLabelStyles = ({
-  labelColor,
-  labelFontSize,
-  labelFontWeight,
-  labelFontName,
-  labelLineHeight
-}) =>
+const selectStepTrackerLabelStyles = (
+  { labelColor, labelFontSize, labelFontWeight, labelFontName, labelLineHeight },
+  themeOptions
+) =>
   applyTextStyles({
     color: labelColor,
     fontSize: labelFontSize,
     lineHeight: labelLineHeight,
     fontWeight: labelFontWeight,
-    fontName: labelFontName
+    fontName: labelFontName,
+    themeOptions
   })
 
 /**
@@ -106,6 +104,7 @@ const StepTracker = forwardRef(
       : ''
     const getStepLabel = (index) =>
       themeTokens.showStepLabel ? getCopy('stepLabel').replace('%{stepNumber}', index + 1) : ''
+    const { themeOptions } = useTheme()
     if (!steps.length) return null
     const selectedProps = selectProps({
       accessibilityLabel: stepTrackerLabel,
@@ -145,7 +144,9 @@ const StepTracker = forwardRef(
                 selectStepTrackerLabelContainerStyles(themeTokens)
               ]}
             >
-              <Text style={selectStepTrackerLabelStyles(themeTokens)}>{stepTrackerLabel}</Text>
+              <Text style={selectStepTrackerLabelStyles(themeTokens, themeOptions)}>
+                {stepTrackerLabel}
+              </Text>
             </View>
           )}
         </StackView>
@@ -155,13 +156,19 @@ const StepTracker = forwardRef(
 )
 StepTracker.displayName = 'StepTracker'
 
+// If a language dictionary entry is provided, it must contain every key
+const dictionaryContentShape = PropTypes.shape({
+  stepLabel: PropTypes.string.isRequired,
+  stepTrackerLabel: PropTypes.string.isRequired
+})
+
 StepTracker.propTypes = {
   ...selectedSystemPropTypes,
   current: PropTypes.number,
-  copy: PropTypes.oneOf(['en', 'fr']),
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), dictionaryContentShape]),
   dictionary: PropTypes.shape({
-    en: PropTypes.shape({ stepLabel: PropTypes.string, stepTrackerLabel: PropTypes.string }),
-    fr: PropTypes.shape({ stepLabel: PropTypes.string, stepTrackerLabel: PropTypes.string })
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
   }),
   steps: PropTypes.arrayOf(PropTypes.string),
   tokens: getTokensPropType('StepTracker'),

package/src/Tabs/TabsItem.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'
 
-import { applyTextStyles, useThemeTokensCallback } from '../ThemeProvider'
+import { applyTextStyles, useTheme, useThemeTokensCallback } from '../ThemeProvider'
 import {
   a11yProps,
   clickProps,
@@ -97,7 +97,7 @@ const TabsItem = forwardRef(
   ) => {
     // Convert onClick etc to onPress etc if used in an integration
     const { onPress, ...rest } = clickProps.toPressProps(rawRest)
-
+    const { themeOptions } = useTheme()
     const getTokens = useThemeTokensCallback('TabsItem', tokens, variant)
     const resolveTokens = (pressableState) =>
       resolvePressableTokens(getTokens, pressableState, { selected })
@@ -165,6 +165,7 @@ const TabsItem = forwardRef(
           const containerStyles = selectContainerStyles(themeTokens)
           const textStyles = applyTextStyles({
             ...selectTokens('Typography', themeTokens),
+            themeOptions,
             textAlign
           })
 

package/src/TextInput/TextInput.jsx

@@ -51,7 +51,7 @@ const TextInput = forwardRef(({ tokens, variant = {}, ...rest }, ref) => {
   }
 
   return (
-    <InputSupports {...supportsProps}>
+    <InputSupports nativeID={selectedProps.nativeID} {...supportsProps}>
       {({ inputId, ...props }) => (
         <TextInputBase ref={ref} {...inputProps} nativeID={inputId} {...props} />
       )}

package/src/TextInput/TextInputBase.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef, useEffect, useState } from 'react'
 import { Platform, StyleSheet, TextInput as NativeTextInput, View } from 'react-native'
 
 import PropTypes from 'prop-types'
-import { applyTextStyles, useThemeTokens, applyOuterBorder } from '../ThemeProvider'
+import { applyTextStyles, useTheme, useThemeTokens, applyOuterBorder } from '../ThemeProvider'
 import {
   a11yProps,
   getTokensPropType,
@@ -43,6 +43,7 @@ const selectInputStyles = (
     width,
     height
   },
+  themeOptions,
   inactive
 ) => {
   // Subtract border width from padding so overall input width/height doesn't
@@ -50,7 +51,13 @@ const selectInputStyles = (
   const offsetBorder = (value) =>
     typeof value === 'number' ? Math.max(0, value - borderWidth) : value
 
-  const textStyles = applyTextStyles({ fontName, fontSize, lineHeight, fontWeight })
+  const textStyles = applyTextStyles({
+    fontName,
+    fontSize,
+    lineHeight,
+    fontWeight,
+    themeOptions
+  })
 
   function linesToHeight(lines) {
     const { lineHeight: absoluteLineHeight } = textStyles
@@ -197,7 +204,8 @@ const TextInputBase = forwardRef(
       value: isControlled ? currentValue : undefined
     }
 
-    const nativeInputStyle = selectInputStyles({ ...themeTokens, height }, inactive)
+    const { themeOptions } = useTheme()
+    const nativeInputStyle = selectInputStyles({ ...themeTokens, height }, themeOptions, inactive)
 
     return (
       <View style={selectOuterBorderStyles(themeTokens)}>

package/src/ThemeProvider/ThemeProvider.jsx

@@ -7,7 +7,12 @@ export const uninitialisedError = new Error('Theme context used outside of Theme
 export const ThemeContext = createContext(uninitialisedError)
 export const ThemeSetterContext = createContext(uninitialisedError)
 
-const ThemeProvider = ({ children, defaultTheme }) => {
+const ThemeProvider = ({
+  children,
+  defaultTheme,
+  // TODO: switch `forceAbsoluteFontSizing` to be false by default in the next major version
+  themeOptions = { forceAbsoluteFontSizing: true }
+}) => {
   const [theme, setTheme] = useState(defaultTheme)
 
   // Validate the theme tokens version on every render.
@@ -17,7 +22,7 @@ const ThemeProvider = ({ children, defaultTheme }) => {
 
   return (
     <ThemeSetterContext.Provider value={setTheme}>
-      <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
+      <ThemeContext.Provider value={{ ...theme, themeOptions }}>{children}</ThemeContext.Provider>
     </ThemeSetterContext.Provider>
   )
 }
@@ -28,7 +33,15 @@ ThemeProvider.propTypes = {
     metadata: PropTypes.shape({
       themeTokensVersion: PropTypes.string.isRequired
     }).isRequired
-  }).isRequired
+  }).isRequired,
+  /**
+   * An object containing options allowing to customize the theming experience:
+   *
+   * - `forceAbsoluteFontSizing`: available on web only; when set to true, allows
+   *   using absolute font sizing (in pixels, doesn't scale) instead of the
+   *   relative sizing (in `rem`, scales depending on the browser settings)
+   */
+  themeOptions: PropTypes.shape({ forceAbsoluteFontSizing: PropTypes.bool })
 }
 
 export default ThemeProvider

package/src/ThemeProvider/utils/styles.js

@@ -15,13 +15,21 @@ export function applyTextStyles({
   fontWeight = '400',
   fontName,
   fontStyle = 'normal',
+  themeOptions = {
+    // TODO: switch `forceAbsoluteFontSizing` to be false by default in the next major version
+    forceAbsoluteFontSizing: true
+  },
   ...rest
 }) {
   const styles = { ...rest }
+  const { forceAbsoluteFontSizing } = themeOptions
 
   if (fontSize) {
     // If relative font sizes are needed, catch and calculate them here
-    styles.fontSize = fontSize
+    styles.fontSize =
+      Platform.OS === 'web' && !forceAbsoluteFontSizing
+        ? `${fontSize / fontBasePixels}rem`
+        : fontSize
   }
   if (typeof lineHeight === 'number') {
     // React Native expects absolute line heights but multipliers are better as design tokens