@telus-uds/theme-allium 7.17.2 → 7.19.0

package/build/web/Listbox.js

@@ -1,12 +1,15 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 
 import PaletteIconCaretDown from '@telus-uds/palette-allium/build/rn/icons/CaretDown'
-import PaletteIconCaretUp from '@telus-uds/palette-allium/build/rn/icons/CaretUp'
+import PaletteIconChevronLeft from '@telus-uds/palette-allium/build/rn/icons/ChevronLeft'
+import PaletteIconClose from '@telus-uds/palette-allium/build/rn/icons/Close'
+import PaletteIconChevronRight from '@telus-uds/palette-allium/build/rn/icons/ChevronRight'
+import PaletteIconChevronUp from '@telus-uds/palette-allium/build/rn/icons/ChevronUp'
 const theme = {
   appearances: {
     current: {
@@ -40,111 +43,240 @@ const theme = {
       description: 'Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.',
       type: 'state',
       values: [ true, false ]
-    }
+    },
+    secondLevel: { type: 'variant', values: [ true ] },
+    style: { type: 'variant', values: [ 'default', 'lightest', 'light' ] }
   },
   rules: [
     {
-      if: { focus: true, hover: true, pressed: true },
+      if: { style: 'default' },
+      tokens: { containerBackgroundColor: 'rgba(0, 0, 0, 0)' }
+    },
+    {
+      if: { style: 'lightest' },
+      tokens: { containerBackgroundColor: '#ffffff' }
+    },
+    {
+      if: { style: 'light' },
+      tokens: { containerBackgroundColor: '#f4f4f7' }
+    },
+    {
+      if: { hover: true },
       tokens: {
-        groupBackgroundColor: '#e3e6e8',
-        groupBorderColor: 'rgba(0, 0, 0, 0)',
-        groupColor: '#676e73',
-        itemBackgroundColor: '#e3e6e8',
-        itemColor: '#676e73'
+        groupBackgroundColor: 'rgba(0, 0, 0, 0.05)',
+        groupColor: '#4b286d',
+        itemBackgroundColor: 'rgba(0, 0, 0, 0.05)',
+        itemColor: '#4b286d'
       }
     },
     {
-      if: { focus: false, hover: true, pressed: false },
+      if: { pressed: true },
       tokens: {
-        groupBackgroundColor: '#f4f4f7',
+        groupBackgroundColor: 'rgba(0, 0, 0, 0.1)',
         groupColor: '#4b286d',
-        itemBackgroundColor: '#f4f4f7',
+        itemBackgroundColor: 'rgba(0, 0, 0, 0.1)',
         itemColor: '#4b286d'
       }
     },
     {
-      if: { focus: true, pressed: false },
+      if: { current: true },
       tokens: {
-        groupBorderColor: '#4b286d',
-        groupBorderWidth: 1,
+        groupBackgroundColor: 'rgba(0, 0, 0, 0.05)',
         groupColor: '#4b286d',
-        itemBorderBottomColor: '#4b286d',
-        itemBorderLeftColor: '#4b286d',
-        itemBorderRightColor: '#4b286d',
-        itemBorderTopColor: '#4b286d',
-        itemColor: '#4b286d'
+        groupFontName: 'HNforTELUSSA',
+        groupFontWeight: '700',
+        itemBackgroundColor: 'rgba(0, 0, 0, 0.05)',
+        itemColor: '#4b286d',
+        itemFontName: 'HNforTELUSSA',
+        itemFontWeight: '700'
       }
     },
     {
       if: { expanded: true },
-      tokens: { groupIcon: PaletteIconCaretUp }
+      tokens: {
+        groupBackgroundColor: 'rgba(0, 0, 0, 0.05)',
+        groupColor: '#4b286d',
+        groupFontName: 'HNforTELUSSA',
+        groupFontWeight: '700',
+        groupIcon: PaletteIconChevronUp,
+        itemBackgroundColor: 'rgba(0, 0, 0, 0.05)',
+        itemColor: '#4b286d',
+        itemFontName: 'HNforTELUSSA',
+        itemFontWeight: '700'
+      }
     },
     {
-      if: { current: true },
+      if: { current: true, pressed: true },
       tokens: {
+        groupBackgroundColor: 'rgba(0, 0, 0, 0.1)',
         groupColor: '#4b286d',
         groupFontName: 'HNforTELUSSA',
         groupFontWeight: '700',
-        itemColor: '#4b286d'
+        itemBackgroundColor: 'rgba(0, 0, 0, 0.1)',
+        itemColor: '#4b286d',
+        itemFontName: 'HNforTELUSSA',
+        itemFontWeight: '700'
       }
     },
     {
-      if: { current: true, pressed: true },
+      if: { expanded: true, pressed: true },
       tokens: {
-        groupBackgroundColor: '#e3e6e8',
-        groupBorderWidth: 1,
-        groupColor: '#676e73',
+        groupBackgroundColor: 'rgba(0, 0, 0, 0.1)',
+        groupColor: '#4b286d',
         groupFontName: 'HNforTELUSSA',
-        groupFontWeight: '700'
+        groupFontWeight: '700',
+        itemBackgroundColor: 'rgba(0, 0, 0, 0.1)',
+        itemColor: '#4b286d',
+        itemFontName: 'HNforTELUSSA',
+        itemFontWeight: '700'
       }
     },
     {
-      if: { isChild: true },
+      if: { current: false, focus: true, hover: false, pressed: false },
       tokens: {
+        groupBackgroundColor: 'rgba(0, 0, 0, 0)',
+        groupBorderBottomColor: '#4b286d',
+        groupBorderBottomWidth: 1,
+        groupBorderLeftColor: '#4b286d',
+        groupBorderLeftWidth: 1,
+        groupBorderRightColor: '#4b286d',
+        groupBorderRightWidth: 1,
+        groupBorderTopColor: '#4b286d',
+        groupBorderTopWidth: 1,
+        groupColor: '#4b286d',
+        itemBackgroundColor: 'rgba(0, 0, 0, 0)',
+        itemBorderBottomColor: '#4b286d',
         itemBorderBottomWidth: 1,
-        itemBorderLeftColor: '#e3e6e8',
-        itemBorderLeftWidth: 4,
-        itemBorderTopWidth: 1
+        itemBorderLeftColor: '#4b286d',
+        itemBorderLeftWidth: 1,
+        itemBorderRightColor: '#4b286d',
+        itemBorderRightWidth: 1,
+        itemBorderTopColor: '#4b286d',
+        itemBorderTopWidth: 1,
+        itemColor: '#4b286d'
       }
     },
     {
-      if: { focus: true, isChild: true },
+      if: { expanded: false, focus: true, hover: false, pressed: false },
       tokens: {
+        groupBackgroundColor: 'rgba(0, 0, 0, 0)',
+        groupBorderBottomColor: '#4b286d',
+        groupBorderBottomWidth: 1,
+        groupBorderLeftColor: '#4b286d',
+        groupBorderLeftWidth: 1,
+        groupBorderRightColor: '#4b286d',
+        groupBorderRightWidth: 1,
+        groupBorderTopColor: '#4b286d',
+        groupBorderTopWidth: 1,
+        groupColor: '#4b286d',
+        itemBackgroundColor: 'rgba(0, 0, 0, 0)',
         itemBorderBottomColor: '#4b286d',
         itemBorderBottomWidth: 1,
         itemBorderLeftColor: '#4b286d',
+        itemBorderLeftWidth: 1,
         itemBorderRightColor: '#4b286d',
         itemBorderRightWidth: 1,
         itemBorderTopColor: '#4b286d',
-        itemBorderTopWidth: 1
+        itemBorderTopWidth: 1,
+        itemColor: '#4b286d'
       }
     },
     {
-      if: { hover: true, isChild: true },
-      tokens: { itemBorderLeftColor: '#4b286d' }
+      if: { current: true, focus: true, hover: false, pressed: false },
+      tokens: {
+        groupBackgroundColor: 'rgba(0, 0, 0, 0.05)',
+        groupBorderBottomColor: '#4b286d',
+        groupBorderBottomWidth: 1,
+        groupBorderLeftColor: '#4b286d',
+        groupBorderLeftWidth: 1,
+        groupBorderRightColor: '#4b286d',
+        groupBorderRightWidth: 1,
+        groupBorderTopColor: '#4b286d',
+        groupBorderTopWidth: 1,
+        groupColor: '#4b286d',
+        groupFontName: 'HNforTELUSSA',
+        groupFontWeight: '700',
+        itemBackgroundColor: 'rgba(0, 0, 0, 0.05)',
+        itemBorderBottomColor: '#4b286d',
+        itemBorderBottomWidth: 1,
+        itemBorderLeftColor: '#4b286d',
+        itemBorderLeftWidth: 1,
+        itemBorderRightColor: '#4b286d',
+        itemBorderRightWidth: 1,
+        itemBorderTopColor: '#4b286d',
+        itemBorderTopWidth: 1,
+        itemColor: '#4b286d'
+      }
     },
     {
-      if: { current: true, isChild: true },
-      tokens: { itemBorderLeftColor: '#4b286d' }
+      if: { expanded: true, focus: true, hover: false, pressed: false },
+      tokens: {
+        groupBackgroundColor: 'rgba(0, 0, 0, 0.05)',
+        groupBorderBottomColor: '#4b286d',
+        groupBorderBottomWidth: 1,
+        groupBorderLeftColor: '#4b286d',
+        groupBorderLeftWidth: 1,
+        groupBorderRightColor: '#4b286d',
+        groupBorderRightWidth: 1,
+        groupBorderTopColor: '#4b286d',
+        groupBorderTopWidth: 1,
+        groupColor: '#4b286d',
+        groupFontName: 'HNforTELUSSA',
+        groupFontWeight: '700',
+        itemBackgroundColor: 'rgba(0, 0, 0, 0.05)',
+        itemBorderBottomColor: '#4b286d',
+        itemBorderBottomWidth: 1,
+        itemBorderLeftColor: '#4b286d',
+        itemBorderLeftWidth: 1,
+        itemBorderRightColor: '#4b286d',
+        itemBorderRightWidth: 1,
+        itemBorderTopColor: '#4b286d',
+        itemBorderTopWidth: 1,
+        itemColor: '#4b286d'
+      }
     },
     {
-      if: { current: true, pressed: true },
-      tokens: { itemColor: '#676e73' }
+      if: { secondLevel: true },
+      tokens: {
+        groupBorderBottomColor: 'rgba(0, 0, 0, 0)',
+        groupBorderBottomWidth: 0,
+        groupBorderLeftColor: 'rgba(0, 0, 0, 0)',
+        groupBorderLeftWidth: 0,
+        groupBorderRightColor: 'rgba(0, 0, 0, 0)',
+        groupBorderRightWidth: 0,
+        groupBorderTopColor: 'rgba(0, 0, 0, 0)',
+        groupBorderTopWidth: 0,
+        itemBorderBottomColor: 'rgba(0, 0, 0, 0)',
+        itemBorderBottomWidth: 0,
+        itemBorderLeftColor: 'rgba(0, 0, 0, 0)',
+        itemBorderLeftWidth: 0,
+        itemBorderRightColor: 'rgba(0, 0, 0, 0)',
+        itemBorderRightWidth: 0,
+        itemBorderTopColor: 'rgba(0, 0, 0, 0)',
+        itemBorderTopWidth: 0
+      }
     },
     {
-      if: { isChild: true, pressed: true },
+      if: { secondLevel: true },
       tokens: {
-        itemBorderBottomWidth: 1,
-        itemBorderLeftColor: '#676e73',
-        itemBorderTopWidth: 1
+        groupIcon: PaletteIconChevronRight,
+        secondLevelParentIcon: PaletteIconChevronRight
       }
     }
   ],
   tokens: {
+    borderRadius: 6,
+    containerBackgroundColor: 'rgba(0, 0, 0, 0)',
     groupBackgroundColor: 'rgba(0, 0, 0, 0)',
-    groupBorderColor: 'rgba(0, 0, 0, 0)',
+    groupBorderBottomColor: 'rgba(0, 0, 0, 0)',
+    groupBorderBottomWidth: 0,
+    groupBorderLeftColor: 'rgba(0, 0, 0, 0)',
+    groupBorderLeftWidth: 0,
     groupBorderRadius: 0,
-    groupBorderWidth: 1,
+    groupBorderRightColor: 'rgba(0, 0, 0, 0)',
+    groupBorderRightWidth: 0,
+    groupBorderTopColor: 'rgba(0, 0, 0, 0)',
+    groupBorderTopWidth: 0,
     groupColor: '#414547',
     groupFontName: 'HNforTELUSSA',
     groupFontSize: 14,
@@ -181,6 +313,25 @@ const theme = {
     lineHeight: 1.14285714286,
     minHeight: '100%',
     minWidth: '100%',
+    secondLevelBackIcon: PaletteIconChevronLeft,
+    secondLevelBackIconColor: '#414547',
+    secondLevelBackIconSize: 16,
+    secondLevelBackLinkColor: '#414547',
+    secondLevelBackLinkFontName: 'HNforTELUSSA',
+    secondLevelBackLinkFontSize: 14,
+    secondLevelBackLinkFontWeight: '400',
+    secondLevelCloseButtonBorderWidth: 1,
+    secondLevelCloseButtonPadding: 8,
+    secondLevelCloseIcon: PaletteIconClose,
+    secondLevelCloseIconSize: 16,
+    secondLevelDividerColor: 'rgba(0, 0, 0, 0.2)',
+    secondLevelDividerWidth: 1,
+    secondLevelHeaderBackgroundColor: '#ffffff',
+    secondLevelHeaderPaddingBottom: 12,
+    secondLevelHeaderPaddingLeft: 16,
+    secondLevelHeaderPaddingRight: 16,
+    secondLevelHeaderPaddingTop: 8,
+    secondLevelParentIcon: PaletteIconChevronRight,
     shadow: {
       blur: 8,
       color: 'rgba(0, 0, 0, 0.1)',

package/build/web/Modal.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 

package/build/web/MultiSelectFilter.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 

package/build/web/NavigationBar.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 

package/build/web/Notification.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 

package/build/web/OrderedList.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 

package/build/web/Pagination.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 

package/build/web/PaginationPageButton.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 

package/build/web/PaginationSideButton.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 

package/build/web/PreviewCard.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 

package/build/web/PriceLockup.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 

package/build/web/ProductCard.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 

package/build/web/Progress.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 

package/build/web/ProgressBar.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 

package/build/web/QuantitySelector.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 

package/build/web/QuantitySelectorSideButton.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 

package/build/web/QuickLinks.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 

package/build/web/QuickLinksButton.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 

package/build/web/QuickLinksCard.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 

package/build/web/QuickLinksFeature.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 

package/build/web/QuickLinksFeatureItem.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 

package/build/web/QuickLinksList.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 

package/build/web/Radio.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 

package/build/web/RadioCard.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 
@@ -132,6 +132,10 @@ const theme = {
     fontWeight: '500',
     letterSpacing: 0,
     lineHeight: 1.4,
+    marginBottom: 0,
+    marginLeft: 0,
+    marginRight: 0,
+    marginTop: 0,
     minWidth: 264,
     outerBorderColor: 'transparent',
     outerBorderGap: 0,

package/build/web/RadioCardGroup.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 

package/build/web/RadioGroup.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 

package/build/web/Ribbon.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 

package/build/web/Search.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 

package/build/web/SearchButton.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 

package/build/web/Select.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:48 GMT
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
  *
  */
 

package/build/web/Shortcuts.js

@@ -0,0 +1,33 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Fri, 12 Dec 2025 05:36:23 GMT
+ *
+ */
+
+import PaletteIconArrowRight from '@telus-uds/palette-allium/build/rn/icons/ArrowRight'
+import PaletteIconArrowLeft from '@telus-uds/palette-allium/build/rn/icons/ArrowLeft'
+const theme = {
+  appearances: {
+    viewport: {
+      description: 'The size label for the current screen viewport based on the current screen width',
+      type: 'state',
+      values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+    }
+  },
+  rules: [
+    { if: { viewport: 'md' }, tokens: { mainContainerGap: 16 } },
+    { if: { viewport: 'lg' }, tokens: { mainContainerGap: 16 } },
+    { if: { viewport: 'xl' }, tokens: { mainContainerGap: 16 } }
+  ],
+  tokens: {
+    mainContainerBottomPadding: 0,
+    mainContainerGap: 8,
+    mainContainerLeftPadding: 16,
+    mainContainerRightPadding: 16,
+    mainContainerTopPadding: 0,
+    nextIcon: PaletteIconArrowRight,
+    previousIcon: PaletteIconArrowLeft
+  }
+}
+export default theme