@telus-uds/components-base 1.12.0 → 1.12.1

package/src/Typography/Typography.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { Text, View } from 'react-native'
 
-import { useThemeTokens } from '../ThemeProvider'
+import { useTheme, useThemeTokens } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
 import { applyTextStyles } from '../ThemeProvider/utils'
 import {
@@ -24,22 +24,17 @@ import {
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps])
 const [selectTextProps, selectedTextPropTypes] = selectSystemProps([textProps])
 
-const selectTextStyles = ({
-  fontWeight,
-  fontSize,
-  color,
-  lineHeight,
-  fontName,
-  textAlign,
-  textTransform,
-  letterSpacing
-}) =>
+const selectTextStyles = (
+  { fontWeight, fontSize, color, lineHeight, fontName, textAlign, textTransform, letterSpacing },
+  themeOptions
+) =>
   applyTextStyles({
     fontWeight,
     fontSize,
     color,
     lineHeight,
     fontName,
+    themeOptions,
     textAlign,
     textTransform,
     letterSpacing
@@ -64,9 +59,13 @@ const Typography = forwardRef(
   ) => {
     const viewport = useViewport()
     const themeTokens = useThemeTokens('Typography', tokens, variant, { viewport })
+    const { themeOptions } = useTheme()
     const resolvedTextProps = {
       ...selectTextProps(rest),
-      style: selectTextStyles(align ? { ...themeTokens, textAlign: align } : themeTokens),
+      style: selectTextStyles(
+        align ? { ...themeTokens, textAlign: align } : themeTokens,
+        themeOptions
+      ),
       dataSet,
       maxFontSizeMultiplier: getMaxFontMultiplier(themeTokens)
     }