@telus-uds/components-base 1.12.0 → 1.12.1

package/lib-module/StepTracker/Step.js

@@ -6,7 +6,7 @@ import View from "react-native-web/dist/exports/View";
 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';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
@@ -110,7 +110,7 @@ const selectLabelContainerStyles = _ref5 => {
   };
 };
 
-const selectLabelStyles = (_ref6, isCurrent) => {
+const selectLabelStyles = (_ref6, themeOptions, isCurrent) => {
   let {
     labelColor,
     labelCurrentColor,
@@ -125,7 +125,8 @@ const selectLabelStyles = (_ref6, isCurrent) => {
     fontSize: labelFontSize,
     lineHeight: labelLineHeight,
     fontWeight: isCurrent ? labelCurrentFontWeight : labelFontWeight,
-    fontName: labelFontName
+    fontName: labelFontName,
+    themeOptions
   });
 };
 
@@ -166,6 +167,9 @@ const Step = _ref7 => {
   const isCompleted = status > stepIndex;
   const isCurrent = status === stepIndex;
   const isActive = isCompleted || isCurrent;
+  const {
+    themeOptions
+  } = useTheme();
   return /*#__PURE__*/_jsxs(StackView, {
     space: 0,
     tokens: {
@@ -200,12 +204,12 @@ const Step = _ref7 => {
     }), showStepLabel && /*#__PURE__*/_jsxs(View, {
       style: [staticStyles.stepLabelContainer, selectLabelContainerStyles(tokens)],
       children: [showStepName && /*#__PURE__*/_jsx(Text, {
-        style: [staticStyles.centeredText, selectLabelStyles(tokens, isCurrent)],
+        style: [staticStyles.centeredText, selectLabelStyles(tokens, themeOptions, isCurrent)],
         children: name
       }), /*#__PURE__*/_jsx(StackView, {
         direction: "row",
         children: /*#__PURE__*/_jsx(Text, {
-          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-module/StepTracker/StepTracker.js

@@ -4,7 +4,7 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
 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';
@@ -38,7 +38,7 @@ const selectStepTrackerLabelContainerStyles = _ref2 => {
   };
 };
 
-const selectStepTrackerLabelStyles = _ref3 => {
+const selectStepTrackerLabelStyles = (_ref3, themeOptions) => {
   let {
     labelColor,
     labelFontSize,
@@ -51,7 +51,8 @@ const selectStepTrackerLabelStyles = _ref3 => {
     fontSize: labelFontSize,
     lineHeight: labelLineHeight,
     fontWeight: labelFontWeight,
-    fontName: labelFontName
+    fontName: labelFontName,
+    themeOptions
   });
 };
 /**
@@ -113,6 +114,9 @@ const StepTracker = /*#__PURE__*/forwardRef((_ref4, ref) => {
 
   const getStepLabel = index => themeTokens.showStepLabel ? getCopy('stepLabel').replace('%{stepNumber}', index + 1) : '';
 
+  const {
+    themeOptions
+  } = useTheme();
   if (!steps.length) return null;
   const selectedProps = selectProps({
     accessibilityLabel: stepTrackerLabel,
@@ -147,7 +151,7 @@ const StepTracker = /*#__PURE__*/forwardRef((_ref4, ref) => {
       }), showStepTrackerLabel && /*#__PURE__*/_jsx(View, {
         style: [staticStyles.stepTrackerLabelContainer, selectStepTrackerLabelContainerStyles(themeTokens)],
         children: /*#__PURE__*/_jsx(Text, {
-          style: selectStepTrackerLabelStyles(themeTokens),
+          style: selectStepTrackerLabelStyles(themeTokens, themeOptions),
           children: stepTrackerLabel
         })
       })]

package/lib-module/Tabs/TabsItem.js

@@ -5,7 +5,7 @@ import Pressable from "react-native-web/dist/exports/Pressable";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
-import { applyTextStyles, useThemeTokensCallback } from '../ThemeProvider';
+import { applyTextStyles, useTheme, useThemeTokensCallback } from '../ThemeProvider';
 import { a11yProps, clickProps, getTokensPropType, linkProps, resolvePressableTokens, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
 import Spacer from '../Spacer';
 import { horizontalScrollUtils } from '../HorizontalScroll';
@@ -105,6 +105,9 @@ const TabsItem = /*#__PURE__*/forwardRef((_ref4, ref) => {
     onPress,
     ...rest
   } = clickProps.toPressProps(rawRest);
+  const {
+    themeOptions
+  } = useTheme();
   const getTokens = useThemeTokensCallback('TabsItem', tokens, variant);
 
   const resolveTokens = pressableState => resolvePressableTokens(getTokens, pressableState, {
@@ -170,6 +173,7 @@ const TabsItem = /*#__PURE__*/forwardRef((_ref4, ref) => {
       const highlightTriangleStyle = hasHighlightTriangle && selectHighlightTriangleStyles(themeTokens);
       const containerStyles = selectContainerStyles(themeTokens);
       const textStyles = applyTextStyles({ ...selectTokens('Typography', themeTokens),
+        themeOptions,
         textAlign
       });
       return /*#__PURE__*/_jsxs(View, {

package/lib-module/TextInput/TextInputBase.js

@@ -4,13 +4,13 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import NativeTextInput from "react-native-web/dist/exports/TextInput";
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
-import { applyTextStyles, useThemeTokens, applyOuterBorder } from '../ThemeProvider';
+import { applyTextStyles, useTheme, useThemeTokens, applyOuterBorder } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, textInputHandlerProps, textInputProps, useInputValue, variantProp, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, textInputHandlerProps, textInputProps, viewProps]);
 
-const selectInputStyles = (_ref, inactive) => {
+const selectInputStyles = (_ref, themeOptions, inactive) => {
   let {
     backgroundColor,
     color,
@@ -41,7 +41,8 @@ const selectInputStyles = (_ref, inactive) => {
     fontName,
     fontSize,
     lineHeight,
-    fontWeight
+    fontWeight,
+    themeOptions
   });
 
   function linesToHeight(lines) {
@@ -210,9 +211,12 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref5, ref) => {
     // Input could lead to changing its state from uncontrolled to controlled
     value: isControlled ? currentValue : undefined
   };
+  const {
+    themeOptions
+  } = useTheme();
   const nativeInputStyle = selectInputStyles({ ...themeTokens,
     height
-  }, inactive);
+  }, themeOptions, inactive);
   return /*#__PURE__*/_jsxs(View, {
     style: selectOuterBorderStyles(themeTokens),
     children: [/*#__PURE__*/_jsx(NativeTextInput, {

package/lib-module/ThemeProvider/ThemeProvider.js

@@ -9,7 +9,11 @@ export const ThemeSetterContext = /*#__PURE__*/createContext(uninitialisedError)
 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] = useState(defaultTheme); // Validate the theme tokens version on every render.
   // This will intentionally break the application when attempting to use an invalid theme.
@@ -19,7 +23,9 @@ const ThemeProvider = _ref => {
   return /*#__PURE__*/_jsx(ThemeSetterContext.Provider, {
     value: setTheme,
     children: /*#__PURE__*/_jsx(ThemeContext.Provider, {
-      value: theme,
+      value: { ...theme,
+        themeOptions
+      },
       children: children
     })
   });
@@ -31,6 +37,17 @@ 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/lib-module/ThemeProvider/utils/styles.js

@@ -14,14 +14,21 @@ export 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.OS === 'web' && !forceAbsoluteFontSizing ? "".concat(fontSize / fontBasePixels, "rem") : fontSize;
   }
 
   if (typeof lineHeight === 'number') {

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

@@ -158,6 +158,6 @@ export 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 (!semVerSatisfies(actualThemeTokensVersion, expectedThemeTokensVersion)) {
-    throw new Error("Invalid UDS token schema version detected.\n\nThe UDS base components ".concat(pkg.name, " v").concat(pkg.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(pkg.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(pkg.name, " v").concat(pkg.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(pkg.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-module/Typography/Typography.js

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
-import { useThemeTokens } from '../ThemeProvider';
+import { useTheme, useThemeTokens } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
 import { applyTextStyles } from '../ThemeProvider/utils';
 import { a11yProps, variantProp, getTokensPropType, getMaxFontMultiplier, headingTags, selectSystemProps, textTags, textProps, viewProps, getA11yPropsFromHtmlTag } from '../utils';
@@ -14,7 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectTextProps, selectedTextPropTypes] = selectSystemProps([textProps]);
 
-const selectTextStyles = _ref => {
+const selectTextStyles = (_ref, themeOptions) => {
   let {
     fontWeight,
     fontSize,
@@ -31,6 +31,7 @@ const selectTextStyles = _ref => {
     color,
     lineHeight,
     fontName,
+    themeOptions,
     textAlign,
     textTransform,
     letterSpacing
@@ -55,10 +56,13 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
   const themeTokens = useThemeTokens('Typography', tokens, variant, {
     viewport
   });
+  const {
+    themeOptions
+  } = useTheme();
   const resolvedTextProps = { ...selectTextProps(rest),
     style: selectTextStyles(align ? { ...themeTokens,
       textAlign: align
-    } : themeTokens),
+    } : themeTokens, themeOptions),
     dataSet,
     maxFontSizeMultiplier: getMaxFontMultiplier(themeTokens)
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "1.12.0",
+  "version": "1.12.1",
   "description": "Base components",
   "keywords": [
     "base"

package/src/BaseProvider/index.jsx

@@ -4,17 +4,20 @@ import A11yInfoProvider from '../A11yInfoProvider'
 import ViewportProvider from '../ViewportProvider'
 import ThemeProvider from '../ThemeProvider'
 
-const BaseProvider = ({ defaultTheme, children }) => (
+const BaseProvider = ({ defaultTheme, children, themeOptions }) => (
   <A11yInfoProvider>
     <ViewportProvider>
-      <ThemeProvider defaultTheme={defaultTheme}>{children}</ThemeProvider>
+      <ThemeProvider defaultTheme={defaultTheme} themeOptions={themeOptions}>
+        {children}
+      </ThemeProvider>
     </ViewportProvider>
   </A11yInfoProvider>
 )
 
 BaseProvider.propTypes = {
+  children: PropTypes.node.isRequired,
   defaultTheme: ThemeProvider.propTypes?.defaultTheme,
-  children: PropTypes.node.isRequired
+  themeOptions: PropTypes.shape({ forceAbsoluteFontSizing: PropTypes.bool })
 }
 
 export default BaseProvider

package/src/Button/ButtonBase.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, View, StyleSheet, Platform } from 'react-native'
 
-import { applyTextStyles, applyShadowToken, applyOuterBorder } from '../ThemeProvider/utils'
+import { applyTextStyles, applyShadowToken, applyOuterBorder, useTheme } from '../ThemeProvider'
 import buttonPropTypes from './propTypes'
 import {
   a11yProps,
@@ -121,13 +121,17 @@ const selectBorderStyles = ({ borderColor, borderWidth, borderRadius }) => ({
   borderRadius
 })
 
-const selectTextStyles = ({ fontSize, color, lineHeight, fontName, fontWeight, textAlign }) =>
+const selectTextStyles = (
+  { fontSize, color, lineHeight, fontName, fontWeight, textAlign },
+  themeOptions
+) =>
   applyTextStyles({
     fontSize,
     color,
     lineHeight,
     fontName,
     fontWeight,
+    themeOptions,
     textAlign
   })
 
@@ -174,6 +178,7 @@ const ButtonBase = forwardRef(
         selectOuterWidthStyles(themeTokens)
       ]
     }
+    const { themeOptions } = useTheme()
 
     return (
       <Pressable
@@ -189,7 +194,7 @@ const ButtonBase = forwardRef(
           const themeTokens = resolveButtonTokens(pressableState)
           const containerStyles = selectInnerContainerStyles(themeTokens)
           const borderStyles = selectBorderStyles(themeTokens)
-          const textStyles = [selectTextStyles(themeTokens), staticStyles.text]
+          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.

package/src/Carousel/Carousel.jsx

@@ -16,10 +16,8 @@ import {
 import { useA11yInfo } from '../A11yInfoProvider'
 import { CarouselProvider } from './CarouselContext'
 import CarouselItem from './CarouselItem'
-import StepTracker from '../StepTracker'
-import StackView from '../StackView'
 import IconButton from '../IconButton'
-
+import CarouselStepTracker from './CarouselStepTracker/CarouselStepTracker'
 import dictionary from './dictionary'
 
 const staticStyles = StyleSheet.create({
@@ -33,19 +31,6 @@ const staticStyles = StyleSheet.create({
   }
 })
 
-const staticTokens = {
-  stackView: {
-    justifyContent: 'center'
-  },
-  stepTracker: {
-    showStepLabel: false,
-    showStepTrackerLabel: true,
-    knobCompletedBackgroundColor: 'none',
-    connectorCompletedColor: 'none',
-    connectorColor: 'none'
-  }
-}
-
 const selectContainerStyles = (width) => ({
   backgroundColor: 'transparent',
   overflow: 'hidden',
@@ -161,7 +146,7 @@ const Carousel = React.forwardRef(
       onAnimationEnd,
       onIndexChanged,
       springConfig = undefined,
-      onRenderPanelNavigation,
+      panelNavigation = <CarouselStepTracker />,
       tag = 'ul',
       accessibilityRole = 'adjustable',
       accessibilityLabel = 'carousel',
@@ -171,16 +156,16 @@ const Carousel = React.forwardRef(
     ref
   ) => {
     const viewport = useViewport()
+    const themeTokens = useThemeTokens('Carousel', tokens, variant, {
+      viewport
+    })
     const {
       previousIcon,
       nextIcon,
       showPreviousNextNavigation,
       showPanelNavigation,
-      spaceBetweenSlideAndPreviousNextNavigation,
-      spaceBetweenSlideAndPanelNavigation
-    } = useThemeTokens('Carousel', tokens, variant, {
-      viewport
-    })
+      spaceBetweenSlideAndPreviousNextNavigation
+    } = themeTokens
     const [activeIndex, setActiveIndex] = React.useState(0)
 
     const [isAnimating, setIsAnimating] = React.useState(false)
@@ -225,10 +210,6 @@ const Carousel = React.forwardRef(
     const animatedY = React.useRef(0)
     const isFirstSlide = !activeIndex
     const isLastSlide = activeIndex + 1 >= children.length
-    const panelNavigationTokens = {
-      ...staticTokens.stepTracker,
-      containerPaddingTop: spaceBetweenSlideAndPanelNavigation
-    }
 
     const onContainerLayout = ({
       nativeEvent: {
@@ -405,15 +386,18 @@ const Carousel = React.forwardRef(
     // Related discussion - https://github.com/telus/universal-design-system/issues/1549
     const previousNextIconButtonVariants = { size: previousNextIconSize, raised: true }
 
-    const getCopyWithPlaceholders = (copyKey) => {
-      const copyText = getCopy(copyKey)
-        .replace(/%\{itemLabel\}/g, itemLabel)
-        .replace(/%\{stepNumber\}/g, activeIndex + 1)
-        .replace(/%\{stepCount\}/g, childrenArray.length)
+    const getCopyWithPlaceholders = React.useCallback(
+      (copyKey) => {
+        const copyText = getCopy(copyKey)
+          .replace(/%\{itemLabel\}/g, itemLabel)
+          .replace(/%\{stepNumber\}/g, activeIndex + 1)
+          .replace(/%\{stepCount\}/g, childrenArray.length)
 
-      // First word might be a lowercase placeholder: capitalize the first letter
-      return `${copyText[0].toUpperCase()}${copyText.slice(1)}`
-    }
+        // First word might be a lowercase placeholder: capitalize the first letter
+        return `${copyText[0].toUpperCase()}${copyText.slice(1)}`
+      },
+      [activeIndex, childrenArray.length, itemLabel, getCopy]
+    )
 
     return (
       <CarouselProvider
@@ -421,6 +405,8 @@ const Carousel = React.forwardRef(
         totalItems={childrenArray.length}
         width={containerLayout.width}
         goTo={goTo}
+        getCopyWithPlaceholders={getCopyWithPlaceholders}
+        themeTokens={themeTokens}
       >
         <View style={staticStyles.root} onLayout={onContainerLayout} ref={ref} {...systemProps}>
           {showPreviousNextNavigation && (
@@ -490,24 +476,7 @@ const Carousel = React.forwardRef(
             </View>
           )}
         </View>
-        {showPanelNavigation ? (
-          <StackView direction="row" tokens={staticTokens.stackView}>
-            {onRenderPanelNavigation ? (
-              onRenderPanelNavigation({ activeIndex, totalItems: childrenArray.length })
-            ) : (
-              <StepTracker
-                current={activeIndex}
-                steps={childrenArray.map((_, index) => String(index))}
-                copy={{
-                  // Give StepTracker copy from Carousel's language and dictionary
-                  stepLabel: getCopyWithPlaceholders('stepLabel'),
-                  stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
-                }}
-                tokens={panelNavigationTokens}
-              />
-            )}
-          </StackView>
-        ) : null}
+        {showPanelNavigation ? panelNavigation : null}
       </CarouselProvider>
     )
   }
@@ -569,20 +538,20 @@ Carousel.propTypes = {
    */
   onIndexChanged: PropTypes.func,
   /**
-   * Use this to render a custom panel navigation element instead of dots navigation
-   * This function is also provided with an object with the following properties
-   * activeIndex: index of current slide
-   * totalItems: total number of slides
+   * Use this to render a custom panel navigation element instead of the default StepTracker's based navigation
+   * You can make use of `useCarousel` within your custom panel navigation component to hook into various Carousel states such as:
+   * - activeIndex: index of current slide
+   * - totalItems: total number of slides
    * Use it as follows:
    * ```js
    *    <Carousel
-   *      onRenderPanelNavigation={({ totalItems, activeIndex }) => <Text>Showing {activeIndex + 1}</Text>}
+   *      panelNavigation={<CustomPanelNavigation />}
    *    >
    *      <Carousel.Item>First Slide</Carousel.Item>
    *    </Carousel>
    * ```
    */
-  onRenderPanelNavigation: PropTypes.func,
+  panelNavigation: PropTypes.element,
   /**
    * When slide animation start
    * This function is also provided with a parameter indicating the current slide index before animation starts

package/src/Carousel/CarouselContext.jsx

@@ -1,12 +1,21 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { getTokensPropType } from '../utils'
 
 const CarouselContext = React.createContext()
 
-const CarouselProvider = ({ children, activeIndex, totalItems, width, goTo }) => {
+const CarouselProvider = ({
+  children,
+  activeIndex,
+  totalItems,
+  width,
+  goTo,
+  getCopyWithPlaceholders,
+  themeTokens
+}) => {
   const value = React.useMemo(
-    () => ({ activeIndex, totalItems, width, goTo }),
-    [activeIndex, totalItems, width, goTo]
+    () => ({ activeIndex, totalItems, width, goTo, getCopyWithPlaceholders, themeTokens }),
+    [activeIndex, totalItems, width, goTo, getCopyWithPlaceholders, themeTokens]
   )
   return <CarouselContext.Provider value={value}>{children}</CarouselContext.Provider>
 }
@@ -24,7 +33,9 @@ CarouselProvider.propTypes = {
   activeIndex: PropTypes.number.isRequired,
   totalItems: PropTypes.number.isRequired,
   width: PropTypes.number.isRequired,
-  goTo: PropTypes.func.isRequired
+  goTo: PropTypes.func.isRequired,
+  getCopyWithPlaceholders: PropTypes.func.isRequired,
+  themeTokens: getTokensPropType('Carousel')
 }
 
 export { CarouselProvider, useCarousel }

package/src/Carousel/CarouselStepTracker/CarouselStepTracker.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { useCarousel } from '../CarouselContext'
+import StepTracker from '../../StepTracker'
+import StackView from '../../StackView'
+
+const CarouselStepTracker = () => {
+  const { activeIndex, totalItems, getCopyWithPlaceholders, themeTokens } = useCarousel()
+  const stackViewTokens = {
+    justifyContent: 'center'
+  }
+  const stepTrackerTokens = {
+    showStepLabel: false,
+    showStepTrackerLabel: true,
+    knobCompletedBackgroundColor: 'none',
+    connectorCompletedColor: 'none',
+    connectorColor: 'none',
+    containerPaddingTop: themeTokens.spaceBetweenSlideAndPanelNavigation
+  }
+  const steps = Array.from(Array(totalItems)).map((_, index) => String(index))
+  return (
+    <StackView direction="row" tokens={stackViewTokens}>
+      <StepTracker
+        current={activeIndex}
+        steps={steps}
+        copy={{
+          // Give StepTracker copy from Carousel's language and dictionary
+          stepLabel: getCopyWithPlaceholders('stepLabel'),
+          stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
+        }}
+        tokens={stepTrackerTokens}
+      />
+    </StackView>
+  )
+}
+
+export default CarouselStepTracker

package/src/Carousel/CarouselStepTracker/index.js

@@ -0,0 +1,3 @@
+import CarouselStepTracker from './CarouselStepTracker'
+
+export default CarouselStepTracker

package/src/Checkbox/Checkbox.jsx

@@ -6,7 +6,12 @@ import CheckboxInput from './CheckboxInput'
 import CheckboxLabel from '../InputLabel/LabelContent'
 import Feedback from '../Feedback'
 import StackView from '../StackView'
-import { applyShadowToken, applyTextStyles, useThemeTokensCallback } from '../ThemeProvider'
+import {
+  applyShadowToken,
+  applyTextStyles,
+  useTheme,
+  useThemeTokensCallback
+} from '../ThemeProvider'
 import {
   a11yProps,
   focusHandlerProps,
@@ -54,21 +59,18 @@ const selectInputStyles = (
     }
   })
 })
-const selectLabelStyles = ({
-  labelColor,
-  labelFontName,
-  labelFontSize,
-  labelFontWeight,
-  labelMarginLeft,
-  labelLineHeight
-}) => ({
+const selectLabelStyles = (
+  { labelColor, labelFontName, labelFontSize, labelFontWeight, labelMarginLeft, labelLineHeight },
+  themeOptions
+) => ({
   marginLeft: labelMarginLeft,
   ...applyTextStyles({
     color: labelColor,
     fontName: labelFontName,
     fontWeight: labelFontWeight,
     fontSize: labelFontSize,
-    lineHeight: labelLineHeight
+    lineHeight: labelLineHeight,
+    themeOptions
   })
 })
 const selectIconTokens = ({ icon, iconColor, iconSize }) => ({
@@ -172,6 +174,7 @@ const Checkbox = forwardRef(
     }
     const uniqueId = useUniqueId('checkbox')
     const inputId = id ?? uniqueId
+    const { themeOptions } = useTheme()
 
     return (
       <View style={staticStyles.wrapper} ref={ref}>
@@ -187,7 +190,7 @@ const Checkbox = forwardRef(
             {({ focused: focus, hovered: hover, pressed }) => {
               const { icon: IconComponent, ...stateTokens } = getTokens({ focus, hover, pressed })
               const iconTokens = selectIconTokens(stateTokens)
-              const labelStyles = selectLabelStyles(stateTokens)
+              const labelStyles = selectLabelStyles(stateTokens, themeOptions)
               const alignWithLabel = label
                 ? [staticStyles.alignWithLabel, { height: labelStyles.lineHeight }]
                 : null