@telus-uds/components-base 1.12.0 → 1.12.1

package/lib/Feedback/Feedback.js

@@ -33,24 +33,29 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
 
 const selectStyles = tokens => (0, _utils.selectTokens)('Feedback', tokens);
 
-const selectTitleTextStyles = _ref => {
+const selectTitleTextStyles = (_ref, themeOptions) => {
   let {
     titleFontSize,
     ...tokens
   } = _ref;
-  return (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', { ...tokens,
-    fontSize: titleFontSize
-  }));
+  return (0, _ThemeProvider.applyTextStyles)({ ...(0, _utils.selectTokens)('Typography', { ...tokens,
+      fontSize: titleFontSize,
+      themeOptions
+    }),
+    themeOptions
+  });
 };
 
-const selectContentTextStyles = _ref2 => {
+const selectContentTextStyles = (_ref2, themeOptions) => {
   let {
     contentFontSize,
     ...tokens
   } = _ref2;
-  return (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', { ...tokens,
-    fontSize: contentFontSize
-  }));
+  return (0, _ThemeProvider.applyTextStyles)({ ...(0, _utils.selectTokens)('Typography', { ...tokens,
+      fontSize: contentFontSize
+    }),
+    themeOptions
+  });
 };
 
 const selectIconTokens = _ref3 => {
@@ -111,8 +116,11 @@ const Feedback = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   const {
     icon: IconComponent
   } = themeTokens;
-  const titleTextStyles = selectTitleTextStyles(themeTokens);
-  const contentTextStyles = selectContentTextStyles(themeTokens);
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  const titleTextStyles = selectTitleTextStyles(themeTokens, themeOptions);
+  const contentTextStyles = selectContentTextStyles(themeTokens, themeOptions);
   const content = typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
     style: contentTextStyles,
     children: children

package/lib/Icon/IconText.js

@@ -69,6 +69,9 @@ const IconText = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 });
 IconText.displayName = 'IconText';
 IconText.propTypes = {
+  /* eslint-disable react/no-unused-prop-types */
+  // eslint is having hard time seeing these props through forwardRef
+
   /**
    * Amount of space to separate the text content and icon. Uses the themes's spacing scale
    * (see useSpacingScale for more info).
@@ -97,6 +100,8 @@ IconText.propTypes = {
    * `<Typography>` component, or a component that renders `<Text>`.
    */
   children: _propTypes.default.node
+  /* eslint-enable react/no-unused-prop-types */
+
 };
 var _default = IconText;
 exports.default = _default;

package/lib/InputLabel/InputLabel.js

@@ -33,9 +33,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 
-const selectLabelStyles = tokens => (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', tokens));
+const selectLabelStyles = (tokens, themeOptions) => (0, _ThemeProvider.applyTextStyles)({ ...(0, _utils.selectTokens)('Typography', tokens),
+  themeOptions
+});
 
-const selectHintStyles = _ref => {
+const selectHintStyles = (_ref, themeOptions) => {
   let {
     hintColor,
     hintFontName,
@@ -48,7 +50,8 @@ const selectHintStyles = _ref => {
     fontName: hintFontName,
     fontSize: hintFontSize,
     fontWeight: hintFontWeight,
-    lineHeight: hintLineHeight
+    lineHeight: hintLineHeight,
+    themeOptions
   });
 };
 
@@ -77,19 +80,22 @@ const InputLabel = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('InputLabel', tokens, variant);
   const hasTooltip = tooltip !== undefined;
   const isHintInline = hintPosition === 'inline';
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       ref: ref,
       style: staticStyles.container,
       ...selectProps(rest),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-        style: [selectLabelStyles(themeTokens), selectGapStyles(themeTokens), staticStyles.label],
+        style: [selectLabelStyles(themeTokens, themeOptions), selectGapStyles(themeTokens), staticStyles.label],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelContent.default, {
           forId: forId,
           children: label
         })
       }), hint && isHintInline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-        style: [selectHintStyles(themeTokens), hasTooltip && selectGapStyles(themeTokens), staticStyles.label],
+        style: [selectHintStyles(themeTokens, themeOptions), hasTooltip && selectGapStyles(themeTokens), staticStyles.label],
         nativeID: hintId,
         children: hint
       }), hasTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {

package/lib/Link/LinkBase.js

@@ -78,7 +78,7 @@ const selectTextStyles = _ref2 => {
   };
 };
 
-const selectBlockStyles = _ref3 => {
+const selectBlockStyles = (_ref3, themeOptions) => {
   let {
     blockFontWeight,
     blockFontSize,
@@ -89,7 +89,8 @@ const selectBlockStyles = _ref3 => {
     fontWeight: blockFontWeight,
     fontSize: blockFontSize,
     lineHeight: blockLineHeight,
-    fontName: blockFontName
+    fontName: blockFontName,
+    themeOptions
   });
 };
 
@@ -192,6 +193,9 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
   const hasIcon = Boolean(icon || defaultThemeTokens.icon); // On web, this makes focus rings wrap only the link, not the entire block
 
   const blockLeftStyle = _Platform.default.OS === 'web' && staticStyles.blockLeft;
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlinePressable.default, { ...selectedProps,
     inline: hasIcon // assuming links without icons should be inline (even if they are long)
     ,
@@ -208,7 +212,7 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
       const iconTokens = selectIconTokens(themeTokens); // 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

package/lib/List/ListItem.js

@@ -87,7 +87,7 @@ const selectBulletPositioningStyles = _ref5 => {
   };
 };
 
-const selectItemStyles = _ref6 => {
+const selectItemStyles = (_ref6, themeOptions) => {
   let {
     itemFontWeight,
     itemFontSize,
@@ -98,7 +98,8 @@ const selectItemStyles = _ref6 => {
     fontWeight: itemFontWeight,
     fontSize: itemFontSize,
     lineHeight: itemLineHeight,
-    fontName: itemFontName
+    fontName: itemFontName,
+    themeOptions
   });
 };
 
@@ -146,7 +147,10 @@ const ListItem = /*#__PURE__*/(0, _react.forwardRef)((_ref9, ref) => {
     ...rest
   } = _ref9;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('List', tokens, variant);
-  const itemStyles = selectItemStyles(themeTokens);
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  const itemStyles = selectItemStyles(themeTokens, themeOptions);
   const itemBlockStyles = selectItemBlockStyles(themeTokens);
   const dividerStyles = selectDividerStyles(themeTokens);
   const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens);

package/lib/Notification/Notification.js

@@ -36,7 +36,9 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
 const selectContainerStyles = tokens => ({ ...tokens
 });
 
-const selectTextStyles = tokens => (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', tokens));
+const selectTextStyles = (tokens, themeOptions) => (0, _ThemeProvider.applyTextStyles)({ ...(0, _utils.selectTokens)('Typography', tokens),
+  themeOptions
+});
 
 const selectIconProps = _ref => {
   let {
@@ -148,12 +150,15 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     dictionary: _dictionary.default,
     copy
   });
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
 
   if (isDismissed) {
     return null;
   }
 
-  const textStyles = selectTextStyles(themeTokens);
+  const textStyles = selectTextStyles(themeTokens, themeOptions);
   const content = (0, _utils.wrapStringsInText)(typeof children === 'function' ? children({
     textStyles
   }) : children, {

package/lib/Pagination/Pagination.js

@@ -37,7 +37,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 
-const selectTextStyles = _ref => {
+const selectTextStyles = (_ref, themeOptions) => {
   let {
     color,
     fontName,
@@ -50,7 +50,8 @@ const selectTextStyles = _ref => {
     fontName,
     fontSize,
     fontWeight,
-    lineHeight
+    lineHeight,
+    themeOptions
   });
 };
 
@@ -74,6 +75,9 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   } = (0, _ThemeProvider.useThemeTokens)('Pagination', tokens, variant, {
     viewport
   });
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
 
   const items = _react.default.Children.toArray(children);
 
@@ -90,7 +94,7 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     items,
     truncateAbove
   });
-  const ellipsisTextStyles = selectTextStyles(themeTokens);
+  const ellipsisTextStyles = selectTextStyles(themeTokens, themeOptions);
 
   if (items.length === 0) {
     return null;

package/lib/RadioCard/RadioCard.js

@@ -107,6 +107,9 @@ const RadioCard = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 
   const getCardTokens = cardState => (0, _Card.selectPressableCardTokens)(getTokens(cardState));
 
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.PressableCardBase, {
     ref: ref,
     inactive: inactive,
@@ -127,7 +130,9 @@ const RadioCard = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       } = getTokens(cardState);
       const radioTokens = (0, _RadioButton.selectRadioButtonTokens)(themeTokens, 'radio');
       const titleTokens = (0, _utils.selectTokens)('Typography', themeTokens);
-      const textStyle = (0, _ThemeProvider.applyTextStyles)(titleTokens);
+      const textStyle = (0, _ThemeProvider.applyTextStyles)({ ...titleTokens,
+        themeOptions
+      });
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
         direction: "row",
         space: radioSpace,

package/lib/Select/Select.js

@@ -33,7 +33,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.inputSupportsProps, _utils.viewProps]);
 
-const selectInputStyles = (_ref, inactive) => {
+const selectInputStyles = (_ref, themeOptions, inactive) => {
   let {
     backgroundColor,
     color,
@@ -63,7 +63,8 @@ const selectInputStyles = (_ref, inactive) => {
     fontName,
     fontSize,
     lineHeight,
-    fontWeight
+    fontWeight,
+    themeOptions
   });
 
   const webStyles = _Platform.default.select({
@@ -252,6 +253,9 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
     icon: IconComponent,
     validationIcon: ValidationIconComponent
   } = themeTokens;
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, { ...supportsProps,
     ...selectedProps,
     children: _ref8 => {
@@ -263,7 +267,7 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
         style: selectOuterBorderStyles(themeTokens),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker.default, {
           ref: ref,
-          style: selectInputStyles(themeTokens, inactive),
+          style: selectInputStyles(themeTokens, themeOptions, inactive),
           onFocus: handleFocus,
           onBlur: handleBlur,
           onMouseOver: handleMouseOver,

package/lib/StepTracker/Step.js

@@ -128,7 +128,7 @@ const selectLabelContainerStyles = _ref5 => {
   };
 };
 
-const selectLabelStyles = (_ref6, isCurrent) => {
+const selectLabelStyles = (_ref6, themeOptions, isCurrent) => {
   let {
     labelColor,
     labelCurrentColor,
@@ -143,7 +143,8 @@ const selectLabelStyles = (_ref6, isCurrent) => {
     fontSize: labelFontSize,
     lineHeight: labelLineHeight,
     fontWeight: isCurrent ? labelCurrentFontWeight : labelFontWeight,
-    fontName: labelFontName
+    fontName: labelFontName,
+    themeOptions
   });
 };
 
@@ -184,6 +185,9 @@ const Step = _ref7 => {
   const isCompleted = status > stepIndex;
   const isCurrent = status === stepIndex;
   const isActive = isCompleted || isCurrent;
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
     space: 0,
     tokens: {
@@ -218,12 +222,12 @@ const Step = _ref7 => {
     }), showStepLabel && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       style: [staticStyles.stepLabelContainer, selectLabelContainerStyles(tokens)],
       children: [showStepName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-        style: [staticStyles.centeredText, selectLabelStyles(tokens, isCurrent)],
+        style: [staticStyles.centeredText, selectLabelStyles(tokens, themeOptions, isCurrent)],
         children: name
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
         direction: "row",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-          style: [staticStyles.centeredText, tokens.labelDirection === 'column' && staticStyles.wrappingLabel, selectLabelStyles(tokens, isCurrent)],
+          style: [staticStyles.centeredText, tokens.labelDirection === 'column' && staticStyles.wrappingLabel, selectLabelStyles(tokens, themeOptions, isCurrent)],
           children: label
         })
       })]

package/lib/StepTracker/StepTracker.js

@@ -63,7 +63,7 @@ const selectStepTrackerLabelContainerStyles = _ref2 => {
   };
 };
 
-const selectStepTrackerLabelStyles = _ref3 => {
+const selectStepTrackerLabelStyles = (_ref3, themeOptions) => {
   let {
     labelColor,
     labelFontSize,
@@ -76,7 +76,8 @@ const selectStepTrackerLabelStyles = _ref3 => {
     fontSize: labelFontSize,
     lineHeight: labelLineHeight,
     fontWeight: labelFontWeight,
-    fontName: labelFontName
+    fontName: labelFontName,
+    themeOptions
   });
 };
 /**
@@ -138,6 +139,9 @@ const StepTracker = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
 
   const getStepLabel = index => themeTokens.showStepLabel ? getCopy('stepLabel').replace('%{stepNumber}', index + 1) : '';
 
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
   if (!steps.length) return null;
   const selectedProps = selectProps({
     accessibilityLabel: stepTrackerLabel,
@@ -172,7 +176,7 @@ const StepTracker = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
       }), showStepTrackerLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: [staticStyles.stepTrackerLabelContainer, selectStepTrackerLabelContainerStyles(themeTokens)],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-          style: selectStepTrackerLabelStyles(themeTokens),
+          style: selectStepTrackerLabelStyles(themeTokens, themeOptions),
           children: stepTrackerLabel
         })
       })]

package/lib/Tabs/TabsItem.js

@@ -131,6 +131,9 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     ...rest
   } = _utils.clickProps.toPressProps(rawRest);
 
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('TabsItem', tokens, variant);
 
   const resolveTokens = pressableState => (0, _utils.resolvePressableTokens)(getTokens, pressableState, {
@@ -197,6 +200,7 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
       const highlightTriangleStyle = hasHighlightTriangle && selectHighlightTriangleStyles(themeTokens);
       const containerStyles = selectContainerStyles(themeTokens);
       const textStyles = (0, _ThemeProvider.applyTextStyles)({ ...(0, _utils.selectTokens)('Typography', themeTokens),
+        themeOptions,
         textAlign
       });
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {

package/lib/TextInput/TextInputBase.js

@@ -31,7 +31,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.textInputHandlerProps, _utils.textInputProps, _utils.viewProps]);
 
-const selectInputStyles = (_ref, inactive) => {
+const selectInputStyles = (_ref, themeOptions, inactive) => {
   let {
     backgroundColor,
     color,
@@ -62,7 +62,8 @@ const selectInputStyles = (_ref, inactive) => {
     fontName,
     fontSize,
     lineHeight,
-    fontWeight
+    fontWeight,
+    themeOptions
   });
 
   function linesToHeight(lines) {
@@ -233,9 +234,12 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     // Input could lead to changing its state from uncontrolled to controlled
     value: isControlled ? currentValue : undefined
   };
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
   const nativeInputStyle = selectInputStyles({ ...themeTokens,
     height
-  }, inactive);
+  }, themeOptions, inactive);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: selectOuterBorderStyles(themeTokens),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {

package/lib/ThemeProvider/ThemeProvider.js

@@ -29,7 +29,11 @@ exports.ThemeSetterContext = ThemeSetterContext;
 const ThemeProvider = _ref => {
   let {
     children,
-    defaultTheme
+    defaultTheme,
+    // TODO: switch `forceAbsoluteFontSizing` to be false by default in the next major version
+    themeOptions = {
+      forceAbsoluteFontSizing: true
+    }
   } = _ref;
   const [theme, setTheme] = (0, _react.useState)(defaultTheme); // Validate the theme tokens version on every render.
   // This will intentionally break the application when attempting to use an invalid theme.
@@ -39,7 +43,9 @@ const ThemeProvider = _ref => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeSetterContext.Provider, {
     value: setTheme,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeContext.Provider, {
-      value: theme,
+      value: { ...theme,
+        themeOptions
+      },
       children: children
     })
   });
@@ -51,7 +57,18 @@ ThemeProvider.propTypes = {
     metadata: _propTypes.default.shape({
       themeTokensVersion: _propTypes.default.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.default.shape({
+    forceAbsoluteFontSizing: _propTypes.default.bool
+  })
 };
 var _default = ThemeProvider;
 exports.default = _default;

package/lib/ThemeProvider/utils/styles.js

@@ -28,14 +28,21 @@ function applyTextStyles(_ref) {
     fontWeight = '400',
     fontName,
     fontStyle = 'normal',
+    themeOptions = {
+      // TODO: switch `forceAbsoluteFontSizing` to be false by default in the next major version
+      forceAbsoluteFontSizing: true
+    },
     ...rest
   } = _ref;
   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.default.OS === 'web' && !forceAbsoluteFontSizing ? "".concat(fontSize / _systemConstants.fontBasePixels, "rem") : fontSize;
   }
 
   if (typeof lineHeight === 'number') {

package/lib/ThemeProvider/utils/theme-tokens.js

@@ -194,7 +194,7 @@ const validateThemeTokensVersion = theme => {
   const actualThemeTokensVersion = theme === null || theme === void 0 ? void 0 : (_theme$metadata2 = theme.metadata) === null || _theme$metadata2 === void 0 ? void 0 : _theme$metadata2.themeTokensVersion;
 
   if (!(0, _satisfies.default)(actualThemeTokensVersion, expectedThemeTokensVersion)) {
-    throw new Error("Invalid UDS token schema version detected.\n\nThe UDS base components ".concat(_package.default.name, " v").concat(_package.default.version, " are only compatible with UDS themes that are built with @telus-uds/system-theme-tokens version that is semver compatible with ").concat(expectedThemeTokensVersion, ". The current theme was built with @telus-uds/system-theme-tokens v").concat(actualThemeTokensVersion, ".\n\nIf you see this error than most likely you have attempted to install ").concat(_package.default.name, " and a UDS theme manually because you are building a multi-brand application. If you are building a single brand application, consider installing the brand specific design system package such as @telus-uds/ds-allium. For more information, see https://github.com/telus/universal-design-system/blob/main/packages/docs-uds/docs/multi-brand-usage.md"));
+    throw new Error("Invalid UDS token schema version detected.\n\nThe UDS base components ".concat(_package.default.name, " v").concat(_package.default.version, " are only compatible with UDS themes that are built with @telus-uds/system-theme-tokens version that is semver compatible with ").concat(expectedThemeTokensVersion, ". The current theme was built with @telus-uds/system-theme-tokens v").concat(actualThemeTokensVersion, ".\n\nIf you see this error than most likely you have attempted to install ").concat(_package.default.name, " and a UDS theme manually because you are building a multi-brand application. If you are building a single brand application, consider installing the brand specific design system package such as @telus-uds/ds-allium. For more information, see https://github.com/telus/universal-design-system/blob/main/docs/docs/multi-brand-usage.md"));
   }
 };
 

package/lib/Typography/Typography.js

@@ -35,7 +35,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const [selectContainerProps, selectedContainerPropTypes] = (0, _utils2.selectSystemProps)([_utils2.a11yProps, _utils2.viewProps]);
 const [selectTextProps, selectedTextPropTypes] = (0, _utils2.selectSystemProps)([_utils2.textProps]);
 
-const selectTextStyles = _ref => {
+const selectTextStyles = (_ref, themeOptions) => {
   let {
     fontWeight,
     fontSize,
@@ -52,6 +52,7 @@ const selectTextStyles = _ref => {
     color,
     lineHeight,
     fontName,
+    themeOptions,
     textAlign,
     textTransform,
     letterSpacing
@@ -76,10 +77,13 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Typography', tokens, variant, {
     viewport
   });
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
   const resolvedTextProps = { ...selectTextProps(rest),
     style: selectTextStyles(align ? { ...themeTokens,
       textAlign: align
-    } : themeTokens),
+    } : themeTokens, themeOptions),
     dataSet,
     maxFontSizeMultiplier: (0, _utils2.getMaxFontMultiplier)(themeTokens)
   };

package/lib-module/BaseProvider/index.js

@@ -10,12 +10,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const BaseProvider = _ref => {
   let {
     defaultTheme,
-    children
+    children,
+    themeOptions
   } = _ref;
   return /*#__PURE__*/_jsx(A11yInfoProvider, {
     children: /*#__PURE__*/_jsx(ViewportProvider, {
       children: /*#__PURE__*/_jsx(ThemeProvider, {
         defaultTheme: defaultTheme,
+        themeOptions: themeOptions,
         children: children
       })
     })
@@ -23,7 +25,10 @@ const BaseProvider = _ref => {
 };
 
 BaseProvider.propTypes = {
+  children: PropTypes.node.isRequired,
   defaultTheme: (_ThemeProvider$propTy = ThemeProvider.propTypes) === null || _ThemeProvider$propTy === void 0 ? void 0 : _ThemeProvider$propTy.defaultTheme,
-  children: PropTypes.node.isRequired
+  themeOptions: PropTypes.shape({
+    forceAbsoluteFontSizing: PropTypes.bool
+  })
 };
 export default BaseProvider;

package/lib-module/Button/ButtonBase.js

@@ -4,7 +4,7 @@ import Pressable from "react-native-web/dist/exports/Pressable";
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
-import { applyTextStyles, applyShadowToken, applyOuterBorder } from '../ThemeProvider/utils';
+import { applyTextStyles, applyShadowToken, applyOuterBorder, useTheme } from '../ThemeProvider';
 import buttonPropTypes from './propTypes';
 import { a11yProps, clickProps, focusHandlerProps, getCursorStyle, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, viewProps, wrapStringsInText, withLinkRouter } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -131,7 +131,7 @@ const selectBorderStyles = _ref5 => {
   };
 };
 
-const selectTextStyles = _ref6 => {
+const selectTextStyles = (_ref6, themeOptions) => {
   let {
     fontSize,
     color,
@@ -146,6 +146,7 @@ const selectTextStyles = _ref6 => {
     lineHeight,
     fontName,
     fontWeight,
+    themeOptions,
     textAlign
   });
 };
@@ -197,6 +198,9 @@ const ButtonBase = /*#__PURE__*/forwardRef((_ref8, ref) => {
     return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), selectOuterWidthStyles(themeTokens)];
   };
 
+  const {
+    themeOptions
+  } = useTheme();
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     href: href,
@@ -212,7 +216,7 @@ const ButtonBase = /*#__PURE__*/forwardRef((_ref8, ref) => {
       const themeTokens = resolveButtonTokens(pressableState);
       const containerStyles = selectInnerContainerStyles(themeTokens);
       const borderStyles = selectBorderStyles(themeTokens);
-      const textStyles = [selectTextStyles(themeTokens), staticStyles.text]; // If the container has a width set, fill it instead of sizing from content.
+      const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text]; // If the container has a width set, fill it instead of sizing from content.
       // If in future we support text alignments other than center, add here.
 
       const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align;