@telus-uds/theme-allium 4.35.0 → 5.0.0

package/build/web/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 26 Jul 2024 21:16:52 GMT
+ * Generated on Thu, 22 Aug 2024 18:16:36 GMT
  *
  */
 
@@ -94,7 +94,7 @@ const theme = {
         borderRadius: null,
         borderWidth: null,
         contentFontColor: '#414547',
-        contentFontName: 'HelveticaNow',
+        contentFontName: 'HNforTELUSSA',
         contentFontSize: 16,
         contentFontWeight: '400',
         contentLineHeight: 1.25,
@@ -115,7 +115,7 @@ const theme = {
         statusIcon: null,
         statusIconColor: null,
         titleFontColor: '#414547',
-        titleFontName: 'HelveticaNow',
+        titleFontName: 'HNforTELUSSA',
         titleFontSize: 16,
         titleFontWeight: '700',
         titleLineHeight: 1.5,
@@ -246,7 +246,7 @@ const theme = {
         borderRadius: 4,
         borderWidth: 2,
         color: '#ffffff',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 12,
         fontWeight: '700',
         gradient: null,
@@ -268,7 +268,7 @@ const theme = {
         {
           if: { viewport: [ 'xs', 'sm', 'md' ] },
           tokens: {
-            titleHeadingFontName: 'HelveticaNow',
+            titleHeadingFontName: 'HNforTELUSSA',
             titleHeadingFontSize: 24,
             titleHeadingFontWeight: '400',
             titleHeadingLineHeight: 1.33333333333
@@ -285,7 +285,7 @@ const theme = {
           type: 'linear'
         },
         color: '#414547',
-        linkFontName: 'HelveticaNow',
+        linkFontName: 'HNforTELUSSA',
         linkFontSize: 16,
         linkFontWeight: '700',
         linkLineHeight: 1.5,
@@ -294,10 +294,10 @@ const theme = {
         paddingLeft: 32,
         paddingRight: 32,
         paddingTop: 16,
-        titleFontName: 'HelveticaNow',
+        titleFontName: 'HNforTELUSSA',
         titleFontSize: 20,
         titleFontWeight: '400',
-        titleHeadingFontName: 'HelveticaNow',
+        titleHeadingFontName: 'HNforTELUSSA',
         titleHeadingFontSize: 28,
         titleHeadingFontWeight: '400',
         titleHeadingLineHeight: 1.28571428571,
@@ -525,7 +525,7 @@ const theme = {
       tokens: {
         color: '#676e73',
         currentColor: '#414547',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 12,
         fontWeight: '500',
         icon: PaletteIconChevronRight,
@@ -828,7 +828,7 @@ const theme = {
         borderTopWidth: 1,
         borderWidth: 1,
         color: '#2b8000',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '700',
         height: null,
@@ -955,7 +955,7 @@ const theme = {
         borderWidth: 1,
         color: '#676e73',
         dividerColor: '#e3e6e8',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 14,
         fontWeight: '700',
         icon: PaletteIconCaretDown,
@@ -1118,7 +1118,7 @@ const theme = {
         borderRadius: 32,
         borderWidth: 1,
         color: '#676e73',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 14,
         fontWeight: '700',
         height: 36,
@@ -1167,7 +1167,7 @@ const theme = {
       appearances: {
         background: {
           type: 'variant',
-          values: [ 'alternative', 'subtle', 'grid', 'feature' ]
+          values: [ 'alternative', 'subtle', 'grid', 'feature', 'plain' ]
         },
         borderRadius: { type: 'variant', values: [ 'none', 'small', 'large' ] },
         focus: {
@@ -1276,6 +1276,10 @@ const theme = {
           if: { background: 'grid' },
           tokens: { backgroundColor: '#fafafa', borderWidth: 0 }
         },
+        {
+          if: { background: 'plain' },
+          tokens: { backgroundColor: '#ffffff', borderWidth: 0 }
+        },
         {
           if: { viewport: [ 'md', 'lg', 'xl' ] },
           tokens: {
@@ -1573,7 +1577,7 @@ const theme = {
             borderBottomColor: '#676e73',
             borderBottomWidth: 4,
             color: '#676e73',
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontWeight: '400'
           }
         },
@@ -1616,7 +1620,7 @@ const theme = {
             borderBottomColor: '#ffffff',
             borderBottomWidth: 4,
             color: '#ffffff',
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontWeight: '700'
           }
         }
@@ -1628,7 +1632,7 @@ const theme = {
         borderBottomWidth: 1,
         color: '#414547',
         flex: 1,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontScaleCap: 64,
         fontSize: 14,
         fontWeight: '400',
@@ -1773,7 +1777,7 @@ const theme = {
         inputShadow: null,
         inputWidth: 20,
         labelColor: '#414547',
-        labelFontName: 'HelveticaNow',
+        labelFontName: 'HNforTELUSSA',
         labelFontSize: 16,
         labelFontWeight: '400',
         labelLineHeight: 1.5,
@@ -1913,7 +1917,7 @@ const theme = {
         contentJustifyContent: 'flex-start',
         contentSpace: 2,
         flex: 1,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 20,
         fontWeight: '500',
         letterSpacing: 0,
@@ -2194,7 +2198,7 @@ const theme = {
           tokens: {
             textFontSize: 64,
             textLineHeight: 1.125,
-            textTimerFontName: 'HelveticaNow',
+            textTimerFontName: 'HNforTELUSSA',
             textTimerFontWeight: '300'
           }
         },
@@ -2204,7 +2208,7 @@ const theme = {
             labelBorderColor: '#4b286d',
             textFontSize: 64,
             textLineHeight: 1.125,
-            textTimerFontName: 'HelveticaNow',
+            textTimerFontName: 'HNforTELUSSA',
             textTimerFontWeight: '300'
           }
         },
@@ -2246,13 +2250,13 @@ const theme = {
         containerPaddingLeftRight: 64,
         inverseBorderColor: '#676e73',
         labelBorderColor: '#414547',
-        labelFontName: 'HelveticaNow',
+        labelFontName: 'HNforTELUSSA',
         labelFontSize: 16,
         labelFontWeight: '400',
         labelLineHeight: 1.5,
         textFontSize: 16,
         textLineHeight: 1.5,
-        textTimerFontName: 'HelveticaNow',
+        textTimerFontName: 'HNforTELUSSA',
         textTimerFontWeight: '400'
       }
     },
@@ -2270,7 +2274,7 @@ const theme = {
         calendarDayDefaultCalendarDaySelectedHoverBeforeBackground: '#7c53a5',
         calendarDayDefaultCalendarDaySelectedHoverColor: '#ffffff',
         calendarDayDefaultColor: '#414547',
-        calendarDayDefaultFontName: 'HelveticaNow',
+        calendarDayDefaultFontName: 'HNforTELUSSA',
         calendarDayDefaultFontSize: 14,
         calendarDayDefaultFontWeight: '400',
         calendarDaySelectedDisabledBackground: '#fafafa',
@@ -2283,7 +2287,7 @@ const theme = {
         calendarDaySelectedHoverBorderColor: '#b2b9bf',
         calendarDaySelectedHoverColor: '#414547',
         calendarMonthCaptionColor: '#2c2e30',
-        calendarMonthCaptionFontName: 'HelveticaNow',
+        calendarMonthCaptionFontName: 'HNforTELUSSA',
         calendarMonthCaptionFontSize: 20,
         calendarMonthCaptionFontWeight: '700',
         calendarMonthCaptionLineHeight: 1.4,
@@ -2291,7 +2295,7 @@ const theme = {
         dateInputStrokeColor: '#676e73',
         dayPickerNavigationButtonPadding: 8,
         dayPickerWeekHeaderColor: '#414547',
-        dayPickerWeekHeaderFontName: 'HelveticaNow',
+        dayPickerWeekHeaderFontName: 'HNforTELUSSA',
         dayPickerWeekHeaderFontWeight: '700',
         dayPickerWeekHeaderLineHeight: 1.42857142857,
         dayPickerWeekHeaderSmall: 14,
@@ -2312,7 +2316,7 @@ const theme = {
       rules: [],
       tokens: {
         color: '#414547',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 12,
         fontWeight: '500',
         lineHeight: 1.33333333333
@@ -2552,7 +2556,7 @@ const theme = {
         contentPanelBorderColor: 'rgba(0, 0, 0, 0)',
         contentPanelBorderWidth: 0,
         contentPanelFontColor: '#2c2e30',
-        contentPanelFontName: 'HelveticaNow',
+        contentPanelFontName: 'HNforTELUSSA',
         contentPanelFontSize: 16,
         contentPanelFontWeight: '700',
         contentPanelLineHeight: 1.5,
@@ -2608,7 +2612,7 @@ const theme = {
         borderWidth: 1,
         color: '#2c2e30',
         contentFontSize: 16,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontWeight: '400',
         icon: null,
         iconColor: 'rgba(0, 0, 0, 0)',
@@ -2713,13 +2717,13 @@ const theme = {
         footnoteHeaderPaddingLeft: 16,
         footnoteHeaderPaddingRight: 4,
         footnoteHeaderPaddingTop: 24,
-        headerFontName: 'HelveticaNow',
+        headerFontName: 'HNforTELUSSA',
         headerFontSize: 16,
         headerFontWeight: '500',
         headerLineHeight: 1.5,
         headerMargin: 16,
         listItemColor: '#414547',
-        listItemFontName: 'HelveticaNow',
+        listItemFontName: 'HNforTELUSSA',
         listItemFontSize: 16,
         listItemFontWeight: '400',
         listItemLineHeight: 1.5,
@@ -2783,7 +2787,7 @@ const theme = {
       ],
       tokens: {
         color: null,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         lineHeight: 1,
@@ -3253,18 +3257,18 @@ const theme = {
         width: null
       }
     },
-    Image: { appearances: {}, rules: [], tokens: { borderRadius: 4 } },
+    Image: { appearances: {}, rules: [], tokens: { borderRadius: null } },
     InputLabel: {
       appearances: {},
       rules: [],
       tokens: {
         color: '#414547',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '700',
         gap: 8,
         hintColor: '#414547',
-        hintFontName: 'HelveticaNow',
+        hintFontName: 'HNforTELUSSA',
         hintFontSize: 14,
         hintFontWeight: '400',
         hintLineHeight: 1.42857142857,
@@ -3352,7 +3356,7 @@ const theme = {
         {
           if: { size: 'micro' },
           tokens: {
-            blockFontName: 'HelveticaNow',
+            blockFontName: 'HNforTELUSSA',
             blockFontSize: 12,
             blockFontWeight: '500',
             blockLineHeight: 1.125,
@@ -3418,7 +3422,7 @@ const theme = {
       ],
       tokens: {
         alignSelf: 'flex-start',
-        blockFontName: 'HelveticaNow',
+        blockFontName: 'HNforTELUSSA',
         blockFontSize: 16,
         blockFontWeight: '400',
         blockLineHeight: 1.5,
@@ -3494,7 +3498,7 @@ const theme = {
         itemBulletColor: '#4b286d',
         itemBulletContainerAlign: 'center',
         itemBulletContainerWidth: 24,
-        itemFontName: 'HelveticaNow',
+        itemFontName: 'HNforTELUSSA',
         itemFontSize: 16,
         itemFontWeight: '400',
         itemIconColor: '#4b286d',
@@ -3580,7 +3584,7 @@ const theme = {
           if: { current: true },
           tokens: {
             groupColor: '#4b286d',
-            groupFontName: 'HelveticaNow',
+            groupFontName: 'HNforTELUSSA',
             groupFontWeight: '700',
             itemColor: '#4b286d',
             itemPaddingBottom: 12,
@@ -3595,7 +3599,7 @@ const theme = {
             groupBackgroundColor: '#e3e6e8',
             groupBorderWidth: 0,
             groupColor: '#676e73',
-            groupFontName: 'HelveticaNow',
+            groupFontName: 'HNforTELUSSA',
             groupFontWeight: '700'
           }
         },
@@ -3647,7 +3651,7 @@ const theme = {
         groupBorderRadius: 0,
         groupBorderWidth: 1,
         groupColor: '#414547',
-        groupFontName: 'HelveticaNow',
+        groupFontName: 'HNforTELUSSA',
         groupFontSize: 14,
         groupFontWeight: '400',
         groupHeight: 40,
@@ -3669,7 +3673,7 @@ const theme = {
         itemBorderWidth: 1,
         itemColor: '#414547',
         itemDisplay: false,
-        itemFontName: 'HelveticaNow',
+        itemFontName: 'HNforTELUSSA',
         itemFontSize: 14,
         itemFontWeight: '700',
         itemHeight: 40,
@@ -3865,7 +3869,7 @@ const theme = {
       tokens: {
         buttonDirection: 'row',
         headerFontColor: '#414547',
-        headerFontName: 'HelveticaNow',
+        headerFontName: 'HNforTELUSSA',
         headerFontSize: 16,
         headerFontWeight: '500',
         headerLineHeight: 1.5,
@@ -3873,7 +3877,7 @@ const theme = {
         maxWidthSize: 0,
         minHeight: 412,
         minWidth: 320,
-        subHeaderFontName: 'HelveticaNow',
+        subHeaderFontName: 'HNforTELUSSA',
         subHeaderFontSize: 14,
         subHeaderFontWeight: '400',
         subHeaderLineHeight: 1.4
@@ -3921,7 +3925,7 @@ const theme = {
             backgroundColor: '#f4f4f7',
             borderColor: '#f4f4f7',
             color: '#4b286d',
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontWeight: '700'
           }
         },
@@ -3977,7 +3981,7 @@ const theme = {
         borderRadius: 32,
         borderWidth: 1,
         color: '#414547',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 14,
         fontWeight: '400',
         icoMenu: PaletteIconCaretDown,
@@ -4140,7 +4144,7 @@ const theme = {
         dismissButtonGap: 24,
         dismissIcon: PaletteIconClose,
         dismissIconColor: '#676e73',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         icon: PaletteIconStatusInfo,
@@ -4188,20 +4192,21 @@ const theme = {
         }
       ],
       tokens: {
-        headerFontName: 'HelveticaNow',
+        headerFontName: 'HNforTELUSSA',
         headerFontWeight: '700',
         interItemMargin: 8,
         itemBulletContainerWidth: 20,
         itemBulletHeight: 4,
         itemBulletTextAlign: 'right',
         itemBulletWidth: 4,
-        itemColor: '#414547',
-        itemFontName: 'HelveticaNow',
+        itemColor: null,
+        itemFontName: 'HNforTELUSSA',
         itemFontSize: 16,
         itemFontWeight: '400',
         itemLineHeight: 1.5,
         itemMarginTop: 0,
         itemPaddingTop: 0,
+        itemTextColor: '#414547',
         listGutter: 8
       }
     },
@@ -4232,7 +4237,7 @@ const theme = {
         ellipsisBorderTopWidth: 0,
         ellipsisHeight: null,
         ellipsisPadding: 0,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         gap: 2,
@@ -4302,7 +4307,7 @@ const theme = {
         borderRightWidth: 1,
         borderTopWidth: 1,
         color: '#676e73',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         height: 32,
@@ -4415,7 +4420,7 @@ const theme = {
         borderTopWidth: 0,
         color: '#676e73',
         displayLabel: true,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         height: null,
@@ -4535,11 +4540,11 @@ const theme = {
           }
         },
         {
-          if: { size: 'large', viewport: [ 'lg', 'xl' ] },
+          if: { size: 'large' },
           tokens: {
             amountFontSize: 64,
-            bottomTextFontSize: 20,
-            bottomTextLineHeight: 1.6,
+            bottomTextFontSize: 16,
+            bottomTextLineHeight: 1.5,
             centsFontSize: 36,
             centsLineHeight: 1.125,
             currencySymbolFontSize: 36,
@@ -4548,6 +4553,15 @@ const theme = {
             rateLineHeight: 1.6,
             strikeThroughHeight: 3,
             strikeThroughPosition: 35,
+            topTextFontSize: 16,
+            topTextLineHeight: 1.5
+          }
+        },
+        {
+          if: { size: 'large', viewport: [ 'lg', 'xl' ] },
+          tokens: {
+            bottomTextFontSize: 20,
+            bottomTextLineHeight: 1.6,
             topTextFontSize: 20,
             topTextLineHeight: 1.6
           }
@@ -4558,43 +4572,43 @@ const theme = {
         }
       ],
       tokens: {
-        amountFontName: 'HelveticaNow',
+        amountFontName: 'HNforTELUSSA',
         amountFontSize: 40,
         amountFontWeight: '300',
         amountLetterSpacing: -0.039,
         amountLineHeight: 1,
         bottomLinksMarginLeft: 4,
         bottomTextFontSize: 16,
-        bottomTextLineHeight: 1.6,
+        bottomTextLineHeight: 1.5,
         bottomTextMarginTop: 4,
-        centsFontName: 'HelveticaNow',
+        centsFontName: 'HNforTELUSSA',
         centsFontSize: 20,
         centsFontWeight: '400',
         centsLineHeight: 1.2,
-        currencySymbolFontName: 'HelveticaNow',
+        currencySymbolFontName: 'HNforTELUSSA',
         currencySymbolFontSize: 20,
         currencySymbolFontWeight: '400',
         currencySymbolLineHeight: 1.2,
         dividerColor: '#b2b9bf',
         fontColor: '#414547',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontWeight: '700',
         footnoteGap: 4,
         footnoteLinkColor: '#414547',
-        footnoteLinkFontName: 'HelveticaNow',
+        footnoteLinkFontName: 'HNforTELUSSA',
         footnoteLinkFontSize: 14,
         footnoteLinkFontWeight: '400',
         footnoteLinkLineHeight: 1.42857142857,
         footnoteMarginTop: 4,
         priceMarginBottom: 8,
-        rateFontName: 'HelveticaNow',
+        rateFontName: 'HNforTELUSSA',
         rateFontSize: 16,
         rateFontWeight: '400',
         rateLineHeight: 1.25,
         strikeThroughColor: '#676e73',
         strikeThroughHeight: 2,
         strikeThroughPosition: 22,
-        topTextFontName: 'HelveticaNow',
+        topTextFontName: 'HNforTELUSSA',
         topTextFontSize: 16,
         topTextFontWeight: '700',
         topTextLineHeight: 1.5,
@@ -4880,7 +4894,7 @@ const theme = {
         borderRadius: 32,
         borderWidth: 1,
         color: '#676e73',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '700',
         icon: null,
@@ -4992,7 +5006,7 @@ const theme = {
         contentDirection: 'column',
         contentMaxDimension: 168,
         contentSpace: 3,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '700',
         gap: 5,
@@ -5063,7 +5077,7 @@ const theme = {
         itemBulletHeight: 4,
         itemBulletWidth: 4,
         itemFontColor: '#676e73',
-        itemFontName: 'HelveticaNow',
+        itemFontName: 'HNforTELUSSA',
         itemFontSize: 16,
         itemFontWeight: '700',
         itemIconColor: '#4b286d',
@@ -5142,7 +5156,7 @@ const theme = {
         containerPaddingRight: 0,
         containerPaddingTop: 0,
         containerShadow: null,
-        descriptionFontName: 'HelveticaNow',
+        descriptionFontName: 'HNforTELUSSA',
         descriptionFontSize: 14,
         descriptionFontWeight: '400',
         descriptionLineHeight: 1.42857142857,
@@ -5157,7 +5171,7 @@ const theme = {
         inputOutlineWidth: 0,
         inputSize: 20,
         labelColor: '#414547',
-        labelFontName: 'HelveticaNow',
+        labelFontName: 'HNforTELUSSA',
         labelFontSize: 16,
         labelFontWeight: '400',
         labelLineHeight: 1.5,
@@ -5288,7 +5302,7 @@ const theme = {
         contentJustifyContent: 'flex-start',
         contentSpace: 2,
         flex: 1,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 20,
         fontWeight: '500',
         letterSpacing: 0,
@@ -5377,6 +5391,7 @@ const theme = {
           if: { purpose: 'editorial' },
           tokens: {
             backgroundColor: '#676e73',
+            curveAfterBackgroundColor: '#676e73',
             curveBackgroundColor: '#2c2e30'
           }
         },
@@ -5399,7 +5414,10 @@ const theme = {
         },
         {
           if: { purpose: 'subtle' },
-          tokens: { backgroundColor: '#7c53a5' }
+          tokens: {
+            backgroundColor: '#7c53a5',
+            curveAfterBackgroundColor: '#7c53a5'
+          }
         }
       ],
       tokens: {
@@ -5421,7 +5439,7 @@ const theme = {
         curveMarginTop: 4,
         curveWidth: 8,
         fontColor: '#ffffff',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 12,
         fontWeight: '700',
         gradient: null,
@@ -5482,7 +5500,7 @@ const theme = {
         buttonsGap: 2,
         clearButtonIcon: PaletteIconTimes,
         color: '#414547',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         lineHeight: 1.5,
@@ -5587,6 +5605,7 @@ const theme = {
     },
     Select: {
       appearances: {
+        active: { type: 'state', values: [ true ] },
         focus: {
           description: 'Focus states for some input elements are well supported across web, RN, ios and android',
           type: 'state',
@@ -5644,6 +5663,10 @@ const theme = {
             color: '#676e73',
             icon: null
           }
+        },
+        {
+          if: { active: true },
+          tokens: { icon: PaletteIconCaretUp }
         }
       ],
       tokens: {
@@ -5653,7 +5676,7 @@ const theme = {
         borderWidth: 1,
         color: '#414547',
         feedbackBackgroundColor: '#f4f4f7',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         height: 48,
@@ -5714,7 +5737,7 @@ const theme = {
             accentBackgroundColor: '#4b286d',
             backgroundColor: '#f4f4f7',
             color: '#4b286d',
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontWeight: '700',
             paddingLeft: 12
           }
@@ -5739,7 +5762,7 @@ const theme = {
           tokens: {
             accentBackgroundColor: 'rgba(0, 0, 0, 0)',
             color: '#4b286d',
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontWeight: '400',
             paddingLeft: 16
           }
@@ -5780,7 +5803,7 @@ const theme = {
         borderStyle: 'solid',
         borderWidth: 1,
         color: '#414547',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         justifyContent: 'space-between',
@@ -5861,7 +5884,7 @@ const theme = {
         backgroundColor: 'rgba(0, 0, 0, 0)',
         borderRadius: 4,
         color: '#2b8000',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         lineHeight: 1.5,
@@ -5934,7 +5957,7 @@ const theme = {
         buttonPaddingRight: 16,
         buttonRadius: 32,
         detailsContainerPadding: 8,
-        labelFontName: 'HelveticaNow',
+        labelFontName: 'HNforTELUSSA',
         labelFontWeight: '700',
         playIcon: PaletteIconPlaySolid,
         playIconColor: '#ffffff',
@@ -6101,7 +6124,7 @@ const theme = {
         borderColor: null,
         borderRadius: null,
         borderWidth: null,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '700',
         icon: PaletteIconStatusInfo,
@@ -6180,10 +6203,10 @@ const theme = {
         knobSize: 16,
         labelColor: '#414547',
         labelCurrentColor: '#7c53a5',
-        labelCurrentFontName: 'HelveticaNow',
+        labelCurrentFontName: 'HNforTELUSSA',
         labelCurrentFontWeight: '700',
         labelDirection: 'column',
-        labelFontName: 'HelveticaNow',
+        labelFontName: 'HNforTELUSSA',
         labelFontSize: 14,
         labelFontWeight: '400',
         labelGap: 0,
@@ -6195,7 +6218,7 @@ const theme = {
         showStepName: true,
         showStepTrackerLabel: true,
         stepLabelColor: '#676e73',
-        stepLabelFontName: 'HelveticaNow',
+        stepLabelFontName: 'HNforTELUSSA',
         stepLabelFontSize: 12,
         stepLabelFontWeight: '700',
         stepLabelLineHeight: 1.33333333333,
@@ -6286,7 +6309,7 @@ const theme = {
           tokens: {
             cellPaddingBottom: 8,
             cellPaddingTop: 8,
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 16,
             fontWeight: '700',
             lineHeight: 1.25
@@ -6298,7 +6321,7 @@ const theme = {
             cellBackground: '#fafafa',
             cellPaddingBottom: 8,
             cellPaddingTop: 8,
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 14,
             fontWeight: '500',
             lineHeight: 1.14285714286
@@ -6309,7 +6332,7 @@ const theme = {
           tokens: {
             cellBackground: '#f4f4f7',
             cellBoxShadowColor: '#b2b9bf',
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 16,
             fontWeight: '500'
           }
@@ -6318,7 +6341,7 @@ const theme = {
           if: { spacing: 'default', type: 'subHeading' },
           tokens: {
             cellBackground: '#fafafa',
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 14,
             fontWeight: '500',
             lineHeight: 1.28571428571
@@ -6328,7 +6351,7 @@ const theme = {
           if: { spacing: 'compact', text: 'medium', type: 'subHeading' },
           tokens: {
             cellBackground: '#fafafa',
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 16,
             fontWeight: '500',
             lineHeight: 1.25
@@ -6336,12 +6359,12 @@ const theme = {
         },
         {
           if: { spacing: 'default', type: 'rowHeading' },
-          tokens: { fontName: 'HelveticaNow', fontSize: 16, fontWeight: '700' }
+          tokens: { fontName: 'HNforTELUSSA', fontSize: 16, fontWeight: '700' }
         },
         {
           if: { spacing: 'default', text: 'small', type: 'default' },
           tokens: {
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 14,
             fontWeight: '400',
             lineHeight: 1.42857142857
@@ -6350,7 +6373,7 @@ const theme = {
         {
           if: { spacing: 'compact', text: 'small', type: 'default' },
           tokens: {
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 14,
             fontWeight: '400',
             lineHeight: 1.14285714286
@@ -6359,7 +6382,7 @@ const theme = {
         {
           if: { text: 'small', type: 'rowHeading' },
           tokens: {
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 14,
             fontWeight: '700',
             lineHeight: 1.14285714286
@@ -6386,7 +6409,7 @@ const theme = {
         },
         display: null,
         fontColor: '#000000',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         lineHeight: 1.5,
@@ -6522,7 +6545,7 @@ const theme = {
         borderRadius: 32,
         borderWidth: 0,
         color: '#676e73',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontScaleCap: 64,
         fontSize: 14,
         fontWeight: '700',
@@ -6656,7 +6679,7 @@ const theme = {
         borderRadius: 32,
         borderWidth: 1,
         color: '#676e73',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 14,
         fontWeight: '700',
         icon: PaletteIconAdd,
@@ -6762,7 +6785,7 @@ const theme = {
         expandTitleBorder: 0,
         expandTitleBorderColor: 'rgba(0, 0, 0, 0)',
         expandTitleColor: '#2c2e30',
-        expandTitleFontName: 'HelveticaNow',
+        expandTitleFontName: 'HNforTELUSSA',
         expandTitleFontSize: 16,
         expandTitleFontWeight: '500',
         expandTitleLineHeight: 1.5,
@@ -6779,7 +6802,7 @@ const theme = {
         iconOuterBorderGap: 0,
         iconOuterBorderWidth: null,
         listColor: '#414547',
-        listFontName: 'HelveticaNow',
+        listFontName: 'HNforTELUSSA',
         listFontSize: 14,
         listFontWeight: '400',
         listLineHeight: 1.42857142857,
@@ -6807,7 +6830,7 @@ const theme = {
         {
           if: { viewport: [ 'md', 'lg', 'xl' ] },
           tokens: {
-            testimonialFontNameHeading: 'HelveticaNow',
+            testimonialFontNameHeading: 'HNforTELUSSA',
             testimonialFontSizeHeading: 28,
             testimonialFontWeightHeading: '400',
             testimonialLineHeightHeading: 1.28571428571
@@ -6815,11 +6838,11 @@ const theme = {
         }
       ],
       tokens: {
-        additionalFontName: 'HelveticaNow',
+        additionalFontName: 'HNforTELUSSA',
         additionalFontSize: 14,
         additionalFontWeight: '400',
         additionalLineHeight: 1.42857142857,
-        authorFontName: 'HelveticaNow',
+        authorFontName: 'HNforTELUSSA',
         authorFontSize: 16,
         authorFontWeight: '700',
         authorLineHeight: 1.5,
@@ -6832,8 +6855,8 @@ const theme = {
         imageSize: 48,
         quoteContainerGap: 4,
         testimonialContainerGap: 12,
-        testimonialFontNameHeading: 'HelveticaNow',
-        testimonialFontNameLarge: 'HelveticaNow',
+        testimonialFontNameHeading: 'HNforTELUSSA',
+        testimonialFontNameLarge: 'HNforTELUSSA',
         testimonialFontSizeHeading: 24,
         testimonialFontSizeLarge: 20,
         testimonialFontWeightHeading: '400',
@@ -6927,7 +6950,7 @@ const theme = {
         clearButtonIcon: PaletteIconTimes,
         color: '#414547',
         defaultCreditIcon: PaletteIconCreditCard,
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 16,
         fontWeight: '400',
         icon: null,
@@ -7027,7 +7050,7 @@ const theme = {
         animationPaddingBottomBefore: 0,
         animationPaddingTopAfter: 16,
         animationPaddingTopBefore: 0,
-        chevronlinkFontName: 'HelveticaNow',
+        chevronlinkFontName: 'HNforTELUSSA',
         chevronlinkFontWeight: '400',
         containerBackgroundColor: '#4b286d',
         containerGap: 10,
@@ -7130,7 +7153,7 @@ const theme = {
         iconColor: '#676e73',
         iconSize: 14,
         labelColor: '#414547',
-        labelFontName: 'HelveticaNow',
+        labelFontName: 'HNforTELUSSA',
         labelFontSize: 16,
         labelFontWeight: '400',
         labelLineHeight: 1.5,
@@ -7208,7 +7231,7 @@ const theme = {
         backgroundColor: '#2c2e30',
         borderRadius: 8,
         color: '#ffffff',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontSize: 14,
         fontWeight: '400',
         lineHeight: 1.5,
@@ -7357,7 +7380,7 @@ const theme = {
         {
           if: { size: 'display1' },
           tokens: {
-            fontName: 'HelveticaNowDisplay',
+            fontName: 'HNforTELUSSA',
             fontSize: 40,
             fontWeight: '300',
             letterSpacing: 0,
@@ -7368,7 +7391,7 @@ const theme = {
         {
           if: { size: 'display1', viewport: [ 'lg', 'xl' ] },
           tokens: {
-            fontName: 'HelveticaNowDisplay',
+            fontName: 'HNforTELUSSA',
             fontSize: 64,
             fontWeight: '300',
             lineHeight: 1.2,
@@ -7378,7 +7401,7 @@ const theme = {
         {
           if: { size: 'display2' },
           tokens: {
-            fontName: 'HelveticaNowDisplay',
+            fontName: 'HNforTELUSSA',
             fontSize: 36,
             fontWeight: '300',
             letterSpacing: 0,
@@ -7389,7 +7412,7 @@ const theme = {
         {
           if: { size: 'display2', viewport: [ 'lg', 'xl' ] },
           tokens: {
-            fontName: 'HelveticaNowDisplay',
+            fontName: 'HNforTELUSSA',
             fontSize: 56,
             fontWeight: '300',
             lineHeight: 1.14285714286,
@@ -7399,7 +7422,7 @@ const theme = {
         {
           if: { size: 'h1' },
           tokens: {
-            fontName: 'HelveticaNowDisplay',
+            fontName: 'HNforTELUSSA',
             fontSize: 28,
             fontWeight: '300',
             letterSpacing: 0,
@@ -7410,7 +7433,7 @@ const theme = {
         {
           if: { size: 'h1', viewport: [ 'lg', 'xl' ] },
           tokens: {
-            fontName: 'HelveticaNowDisplay',
+            fontName: 'HNforTELUSSA',
             fontSize: 40,
             fontWeight: '300',
             letterSpacing: 0,
@@ -7421,7 +7444,7 @@ const theme = {
         {
           if: { size: 'h2' },
           tokens: {
-            fontName: 'HelveticaNowDisplay',
+            fontName: 'HNforTELUSSA',
             fontSize: 24,
             fontWeight: '300',
             letterSpacing: 0,
@@ -7432,7 +7455,7 @@ const theme = {
         {
           if: { size: 'h2', viewport: [ 'lg', 'xl' ] },
           tokens: {
-            fontName: 'HelveticaNowDisplay',
+            fontName: 'HNforTELUSSA',
             fontSize: 28,
             fontWeight: '300',
             letterSpacing: -0.017,
@@ -7443,7 +7466,7 @@ const theme = {
         {
           if: { size: 'h3' },
           tokens: {
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 20,
             fontWeight: '500',
             letterSpacing: 0,
@@ -7454,7 +7477,7 @@ const theme = {
         {
           if: { size: 'h4' },
           tokens: {
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 16,
             fontWeight: '500',
             letterSpacing: 0,
@@ -7465,7 +7488,7 @@ const theme = {
         {
           if: { size: 'h5' },
           tokens: {
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 14,
             fontWeight: '500',
             letterSpacing: 0,
@@ -7479,7 +7502,7 @@ const theme = {
         {
           if: { size: 'h6' },
           tokens: {
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 12,
             fontWeight: '700',
             letterSpacing: 0,
@@ -7514,7 +7537,7 @@ const theme = {
         {
           if: { size: 'micro' },
           tokens: {
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 12,
             fontWeight: '500',
             lineHeight: 1.33333333333,
@@ -7525,7 +7548,7 @@ const theme = {
           if: { size: 'eyebrow' },
           tokens: {
             color: '#7c53a5',
-            fontName: 'HelveticaNow',
+            fontName: 'HNforTELUSSA',
             fontSize: 14,
             fontWeight: '700',
             lineHeight: 1.42857142857,
@@ -7535,31 +7558,31 @@ const theme = {
         {
           description: 'Please only bold single words while using with headings',
           if: { bold: true },
-          tokens: { fontName: 'HelveticaNow', fontWeight: '700' }
+          tokens: { fontName: 'HNforTELUSSA', fontWeight: '700' }
         },
         {
           if: { bold: true, size: 'micro' },
-          tokens: { fontName: 'HelveticaNow', fontWeight: '700' }
+          tokens: { fontName: 'HNforTELUSSA', fontWeight: '700' }
         },
         {
           if: { bold: true, size: 'display1' },
-          tokens: { fontName: 'HelveticaNowDisplay', fontWeight: '700' }
+          tokens: { fontName: 'HNforTELUSSA', fontWeight: '700' }
         },
         {
           if: { bold: true, size: 'display2' },
-          tokens: { fontName: 'HelveticaNowDisplay', fontWeight: '700' }
+          tokens: { fontName: 'HNforTELUSSA', fontWeight: '700' }
         },
         {
           if: { bold: true, size: 'h1' },
-          tokens: { fontName: 'HelveticaNowDisplay', fontWeight: '700' }
+          tokens: { fontName: 'HNforTELUSSA', fontWeight: '700' }
         },
         {
           if: { bold: true, size: 'h2' },
-          tokens: { fontName: 'HelveticaNowDisplay', fontWeight: '700' }
+          tokens: { fontName: 'HNforTELUSSA', fontWeight: '700' }
         },
         {
           if: { bold: true, size: 'h3' },
-          tokens: { fontName: 'HelveticaNow', fontWeight: '700' }
+          tokens: { fontName: 'HNforTELUSSA', fontWeight: '700' }
         },
         {
           if: {
@@ -7567,15 +7590,15 @@ const theme = {
             size: [ 'h4', 'h5', 'h6' ],
             viewport: [ 'xs', 'sm', 'md' ]
           },
-          tokens: { fontName: 'HelveticaNow', fontWeight: '700' }
+          tokens: { fontName: 'HNforTELUSSA', fontWeight: '700' }
         },
         {
           if: { weight: 'semibold' },
-          tokens: { fontName: 'HelveticaNow', fontWeight: '500' }
+          tokens: { fontName: 'HNforTELUSSA', fontWeight: '500' }
         },
         {
           if: { weight: 'bold' },
-          tokens: { fontName: 'HelveticaNow', fontWeight: '700' }
+          tokens: { fontName: 'HNforTELUSSA', fontWeight: '700' }
         },
         { if: { colour: 'default' }, tokens: { color: '#414547' } },
         { if: { colour: 'brand' }, tokens: { color: '#4b286d' } },
@@ -7613,7 +7636,7 @@ const theme = {
       ],
       tokens: {
         color: '#414547',
-        fontName: 'HelveticaNow',
+        fontName: 'HNforTELUSSA',
         fontScaleCap: 64,
         fontSize: 16,
         fontWeight: '400',
@@ -7891,6 +7914,6 @@ const theme = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-allium', themeTokensVersion: '2.60.0' }
+  metadata: { name: 'theme-allium', themeTokensVersion: '2.62.0' }
 }
 export default theme