@telus-uds/theme-allium 7.18.0 → 7.20.0

package/build/web/IconButton.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 19 Nov 2025 05:50:40 GMT
+ * Generated on Mon, 12 Jan 2026 14:54:21 GMT
  *
  */
 
@@ -17,17 +17,19 @@ import PaletteIconCaretUp from '@telus-uds/palette-allium/build/rn/icons/CaretUp
 import PaletteIconChevronLeft from '@telus-uds/palette-allium/build/rn/icons/ChevronLeft'
 import PaletteIconChevronRight from '@telus-uds/palette-allium/build/rn/icons/ChevronRight'
 import PaletteIconPlayVideo from '@telus-uds/palette-allium/build/rn/icons/PlayVideo'
+import PaletteIconInvisible from '@telus-uds/palette-allium/build/rn/icons/Invisible'
 const theme = {
   appearances: {
     action: {
       type: 'variant',
       values: [
-        'add',      'close',
-        'expand',   'moveDown',
-        'moveLeft', 'moveRight',
-        'moveUp',   'play',
-        'subtract', 'menu',
-        'cart',     'profile'
+        'add',        'close',
+        'expand',     'moveDown',
+        'moveLeft',   'moveRight',
+        'moveUp',     'play',
+        'subtract',   'menu',
+        'cart',       'profile',
+        'visibility'
       ]
     },
     compact: {
@@ -35,6 +37,11 @@ const theme = {
       type: 'variant',
       values: [ true ]
     },
+    contained: {
+      description: 'For use in more prominent situations',
+      type: 'variant',
+      values: [ true ]
+    },
     focus: {
       description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
       platforms: [ 'rn', 'web' ],
@@ -72,7 +79,17 @@ const theme = {
       type: 'variant',
       values: [ true ]
     },
-    size: { type: 'variant', values: [ 'small', 'large' ] }
+    selected: {
+      description: 'Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.',
+      type: 'state',
+      values: [ true ]
+    },
+    size: { type: 'variant', values: [ 'small', 'large' ] },
+    subtle: {
+      description: 'For use in less prominent situations',
+      type: 'variant',
+      values: [ true ]
+    }
   },
   rules: [
     {
@@ -141,144 +158,205 @@ const theme = {
       if: { action: 'play' },
       tokens: { icon: PaletteIconPlayVideo }
     },
+    {
+      if: { action: 'visibility' },
+      tokens: { icon: PaletteIconInvisible }
+    },
+    {
+      if: { subtle: true },
+      tokens: { borderColor: 'rgba(0, 0, 0, 0)' }
+    },
+    {
+      if: { raised: true },
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderColor: '#b2b9bf',
+        padding: 8,
+        shadow: {
+          blur: 2,
+          color: 'rgba(0, 0, 0, 0.2)',
+          inset: false,
+          offsetX: 0,
+          offsetY: 2,
+          spread: 0
+        }
+      }
+    },
     {
       if: { inverse: true },
       tokens: { borderColor: '#ffffff', iconColor: '#ffffff' }
     },
+    {
+      if: { inverse: true, subtle: true },
+      tokens: { borderColor: 'rgba(0, 0, 0, 0)', iconColor: '#ffffff' }
+    },
     {
       if: { hover: true },
-      tokens: { borderColor: '#414547', iconColor: '#414547', iconScale: 1.1 }
+      tokens: { borderColor: '#414547', iconColor: '#414547' }
     },
-    { if: { hover: true }, tokens: { iconScale: 1 } },
     {
-      if: { hover: true, password: true },
+      if: { focus: true },
+      tokens: { borderColor: '#414547', borderWidth: 2, iconColor: '#414547' }
+    },
+    {
+      if: { pressed: true },
       tokens: {
-        backgroundColor: '#7c53a5',
-        borderColor: '#7c53a5',
+        backgroundColor: '#676e73',
+        borderWidth: null,
         iconColor: '#ffffff'
       }
     },
-    { if: { password: true }, tokens: { borderColor: 'transparent' } },
     {
-      if: { focus: true, password: true },
-      tokens: { borderColor: '#4b286d' }
+      if: { selected: true },
+      tokens: {
+        backgroundColor: '#4b286d',
+        borderWidth: null,
+        iconColor: '#ffffff'
+      }
     },
     {
       if: { hover: true, inverse: true },
-      tokens: { borderColor: '#ffffff', iconColor: '#ffffff' }
+      tokens: {
+        backgroundColor: 'transparent',
+        borderColor: '#ffffff',
+        iconColor: '#ffffff'
+      }
     },
     {
-      if: { focus: true },
+      if: { focus: true, inverse: true },
       tokens: {
-        outerBorderColor: '#676e73',
-        outerBorderGap: 4,
-        outerBorderWidth: 1
+        backgroundColor: 'transparent',
+        borderColor: '#ffffff',
+        borderWidth: 2,
+        iconColor: '#ffffff'
       }
     },
     {
-      if: { focus: true, password: true },
+      if: { inverse: true, pressed: true },
       tokens: {
-        borderWidth: 3,
-        outerBorderColor: '#3f2a54',
-        outerBorderWidth: 0
+        backgroundColor: 'rgba(255, 255, 255, 0.4)',
+        borderColor: '#ffffff',
+        borderWidth: 1,
+        iconColor: '#ffffff'
       }
     },
     {
-      if: { focus: true, inverse: true },
+      if: { inverse: true, selected: true },
       tokens: {
-        backgroundColor: 'transparent',
-        borderColor: '#ffffff',
-        iconColor: '#ffffff',
-        outerBorderColor: '#ffffff',
-        outerBorderWidth: 1
+        backgroundColor: '#ffffff',
+        borderWidth: null,
+        iconColor: '#4b286d'
       }
     },
     {
-      if: { pressed: true },
+      if: { hover: true, subtle: true },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0.05)',
+        borderColor: 'rgba(0, 0, 0, 0.05)',
+        borderWidth: null,
+        iconColor: '#414547'
+      }
+    },
+    {
+      if: { focus: true, subtle: true },
+      tokens: { borderColor: '#414547', borderWidth: 1, iconColor: '#414547' }
+    },
+    {
+      if: { pressed: true, subtle: true },
       tokens: {
         backgroundColor: '#676e73',
-        borderColor: '#ffffff',
-        iconColor: '#ffffff',
-        outerBorderGap: 4
+        borderWidth: null,
+        iconColor: '#ffffff'
       }
     },
     {
-      if: { password: true, pressed: true },
+      if: { selected: true, subtle: true },
       tokens: {
-        backgroundColor: '#3f2a54',
-        borderColor: '#3f2a54',
-        iconColor: '#ffffff',
-        outerBorderGap: 0
+        backgroundColor: '#4b286d',
+        borderWidth: null,
+        iconColor: '#ffffff'
       }
     },
     {
-      if: { inverse: true, pressed: true },
+      if: { hover: true, inverse: true, subtle: true },
+      tokens: {
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
+        borderColor: 'rgba(255, 255, 255, 0.1)',
+        iconColor: '#ffffff'
+      }
+    },
+    {
+      if: { focus: true, inverse: true, subtle: true },
+      tokens: { borderColor: '#ffffff', borderWidth: 1, iconColor: '#ffffff' }
+    },
+    {
+      if: { inverse: true, pressed: true, subtle: true },
       tokens: {
         backgroundColor: 'rgba(255, 255, 255, 0.4)',
-        borderColor: '#ffffff',
-        iconColor: '#ffffff',
-        outerBorderWidth: 0
+        borderWidth: null,
+        iconColor: '#ffffff'
       }
     },
-    { if: { size: 'large' }, tokens: { iconSize: 24, padding: 12 } },
-    { if: { size: 'small' }, tokens: { iconSize: 16, padding: 4 } },
     {
-      description: 'Raised IconButtons follow different design patterns to other variants',
-      if: { raised: true },
+      if: { inverse: true, selected: true, subtle: true },
       tokens: {
         backgroundColor: '#ffffff',
-        borderColor: '#b2b9bf',
-        borderWidth: 1,
-        iconSize: 16,
-        outerBorderColor: 'transparent',
-        outerBorderGap: 0,
-        outerBorderWidth: 0,
-        padding: 8,
-        shadow: {
-          blur: 2,
-          color: 'rgba(0, 0, 0, 0.2)',
-          inset: false,
-          offsetX: 0,
-          offsetY: 2,
-          spread: 0
-        }
+        borderWidth: null,
+        iconColor: '#414547'
       }
     },
     {
-      if: { raised: true, size: 'large' },
-      tokens: { iconSize: 24, padding: 12 }
+      if: { hover: true, raised: true },
+      tokens: { borderColor: '#414547', iconColor: '#414547' }
+    },
+    {
+      if: { focus: true, raised: true },
+      tokens: { borderColor: '#414547', borderWidth: 3, iconColor: '#414547' }
     },
-    { if: { raised: true, size: 'small' }, tokens: { padding: 8 } },
     {
       if: { pressed: true, raised: true },
-      tokens: { backgroundColor: '#676e73', borderWidth: 0 }
+      tokens: {
+        backgroundColor: '#676e73',
+        borderWidth: null,
+        iconColor: '#ffffff'
+      }
     },
     {
-      if: { inactive: true, password: true },
+      if: { raised: true, selected: true },
       tokens: {
-        backgroundColor: 'rgba(0, 0, 0, 0)',
-        borderWidth: 0,
-        iconColor: '#e3e6e8',
-        outerBorderColor: 'rgba(0, 0, 0, 0)'
+        backgroundColor: '#4b286d',
+        borderWidth: null,
+        iconColor: '#ffffff'
       }
     },
     {
-      if: { hover: true, raised: true },
-      tokens: { borderColor: '#b2b9bf', borderWidth: 3 }
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: '#e3e6e8',
+        borderWidth: 0,
+        iconColor: '#b2b9bf',
+        outerBorderColor: 'rgba(0, 0, 0, 0)'
+      }
     },
     {
-      if: { focus: true, raised: true },
-      tokens: { borderColor: '#4b286d', borderWidth: 3, iconColor: '#4b286d' }
+      if: { inactive: true, inverse: true },
+      tokens: {
+        backgroundColor: 'rgba(255, 255, 255, 0.2)',
+        borderWidth: 0,
+        iconColor: '#b2b9bf',
+        outerBorderColor: 'rgba(0, 0, 0, 0)'
+      }
     },
     {
-      if: { focus: true, pressed: true, raised: true },
+      if: { inactive: true, inverse: true, subtle: true },
       tokens: {
-        backgroundColor: '#4b286d',
+        backgroundColor: 'rgba(0, 0, 0, 0)',
         borderWidth: 0,
-        iconColor: '#ffffff'
+        iconColor: '#b2b9bf',
+        outerBorderColor: 'rgba(0, 0, 0, 0)'
       }
     },
-    { if: { compact: true }, tokens: { outerBorderGap: 0 } }
+    { if: { size: 'large' }, tokens: { iconSize: 24, padding: 10 } }
   ],
   tokens: {
     backgroundColor: 'transparent',

package/build/web/Image.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 19 Nov 2025 05:50:40 GMT
+ * Generated on Mon, 12 Jan 2026 14:54:21 GMT
  *
  */
 

package/build/web/InputLabel.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 19 Nov 2025 05:50:40 GMT
+ * Generated on Mon, 12 Jan 2026 14:54:21 GMT
  *
  */
 

package/build/web/InputSupports.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 19 Nov 2025 05:50:40 GMT
+ * Generated on Mon, 12 Jan 2026 14:54:21 GMT
  *
  */
 

package/build/web/Link.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 19 Nov 2025 05:50:40 GMT
+ * Generated on Mon, 12 Jan 2026 14:54:21 GMT
  *
  */
 

package/build/web/List.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 19 Nov 2025 05:50:40 GMT
+ * Generated on Mon, 12 Jan 2026 14:54:21 GMT
  *
  */
 

package/build/web/Listbox.js

@@ -1,11 +1,14 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 19 Nov 2025 05:50:40 GMT
+ * Generated on Mon, 12 Jan 2026 14:54:21 GMT
  *
  */
 
-import PaletteIconChevronDown from '@telus-uds/palette-allium/build/rn/icons/ChevronDown'
+import PaletteIconCaretDown from '@telus-uds/palette-allium/build/rn/icons/CaretDown'
+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: {
@@ -41,6 +44,7 @@ const theme = {
       type: 'state',
       values: [ true, false ]
     },
+    secondLevel: { type: 'variant', values: [ true ] },
     style: { type: 'variant', values: [ 'default', 'lightest', 'light' ] }
   },
   rules: [
@@ -230,9 +234,38 @@ const theme = {
         itemBorderTopWidth: 1,
         itemColor: '#4b286d'
       }
+    },
+    {
+      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: { secondLevel: true },
+      tokens: {
+        groupIcon: PaletteIconChevronRight,
+        secondLevelParentIcon: PaletteIconChevronRight
+      }
     }
   ],
   tokens: {
+    borderRadius: 6,
     containerBackgroundColor: 'rgba(0, 0, 0, 0)',
     groupBackgroundColor: 'rgba(0, 0, 0, 0)',
     groupBorderBottomColor: 'rgba(0, 0, 0, 0)',
@@ -249,7 +282,7 @@ const theme = {
     groupFontSize: 14,
     groupFontWeight: '400',
     groupHeight: 40,
-    groupIcon: PaletteIconChevronDown,
+    groupIcon: PaletteIconCaretDown,
     groupPaddingBottom: 12,
     groupPaddingLeft: 16,
     groupPaddingRight: 16,
@@ -280,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, 19 Nov 2025 05:50:40 GMT
+ * Generated on Mon, 12 Jan 2026 14:54:21 GMT
  *
  */
 

package/build/web/MultiSelectFilter.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 19 Nov 2025 05:50:40 GMT
+ * Generated on Mon, 12 Jan 2026 14:54:21 GMT
  *
  */
 

package/build/web/NavigationBar.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 19 Nov 2025 05:50:40 GMT
+ * Generated on Mon, 12 Jan 2026 14:54:21 GMT
  *
  */
 

package/build/web/Notification.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 19 Nov 2025 05:50:40 GMT
+ * Generated on Mon, 12 Jan 2026 14:54:21 GMT
  *
  */
 

package/build/web/OrderedList.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 19 Nov 2025 05:50:40 GMT
+ * Generated on Mon, 12 Jan 2026 14:54:21 GMT
  *
  */
 

package/build/web/Pagination.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 19 Nov 2025 05:50:40 GMT
+ * Generated on Mon, 12 Jan 2026 14:54:21 GMT
  *
  */
 

package/build/web/PaginationPageButton.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 19 Nov 2025 05:50:40 GMT
+ * Generated on Mon, 12 Jan 2026 14:54:21 GMT
  *
  */
 

package/build/web/PaginationSideButton.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 19 Nov 2025 05:50:40 GMT
+ * Generated on Mon, 12 Jan 2026 14:54:21 GMT
  *
  */
 

package/build/web/PreviewCard.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 19 Nov 2025 05:50:40 GMT
+ * Generated on Mon, 12 Jan 2026 14:54:21 GMT
  *
  */
 

package/build/web/PriceLockup.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 19 Nov 2025 05:50:40 GMT
+ * Generated on Mon, 12 Jan 2026 14:54:21 GMT
  *
  */
 

package/build/web/ProductCard.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 19 Nov 2025 05:50:40 GMT
+ * Generated on Mon, 12 Jan 2026 14:54:21 GMT
  *
  */
 

package/build/web/Progress.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 19 Nov 2025 05:50:40 GMT
+ * Generated on Mon, 12 Jan 2026 14:54:21 GMT
  *
  */
 

package/build/web/ProgressBar.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 19 Nov 2025 05:50:40 GMT
+ * Generated on Mon, 12 Jan 2026 14:54:21 GMT
  *
  */
 

package/build/web/QuantitySelector.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 19 Nov 2025 05:50:40 GMT
+ * Generated on Mon, 12 Jan 2026 14:54:21 GMT
  *
  */
 

package/build/web/QuantitySelectorSideButton.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 19 Nov 2025 05:50:40 GMT
+ * Generated on Mon, 12 Jan 2026 14:54:21 GMT
  *
  */
 

package/build/web/QuickLinks.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 19 Nov 2025 05:50:40 GMT
+ * Generated on Mon, 12 Jan 2026 14:54:21 GMT
  *
  */
 

package/build/web/QuickLinksButton.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 19 Nov 2025 05:50:40 GMT
+ * Generated on Mon, 12 Jan 2026 14:54:21 GMT
  *
  */
 

package/build/web/QuickLinksCard.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 19 Nov 2025 05:50:40 GMT
+ * Generated on Mon, 12 Jan 2026 14:54:21 GMT
  *
  */