@telus-uds/theme-koodo 7.18.2 → 7.20.0

package/build/web/Listbox.js

@@ -1,11 +1,14 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:06 GMT
+ * Generated on Fri, 12 Dec 2025 05:35:43 GMT
  *
  */
 
 import PaletteIconChevronDown from '@telus-uds/palette-koodo/build/rn/icons/ChevronDown'
+import PaletteIconChevronLeft from '@telus-uds/palette-koodo/build/rn/icons/ChevronLeft'
+import PaletteIconClose from '@telus-uds/palette-koodo/build/rn/icons/Close'
+import PaletteIconChevronRight from '@telus-uds/palette-koodo/build/rn/icons/ChevronRight'
 import PaletteIconChevronUp from '@telus-uds/palette-koodo/build/rn/icons/ChevronUp'
 const theme = {
   appearances: {
@@ -40,171 +43,157 @@ 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: false, hover: true, pressed: false },
-      tokens: {
-        groupBackgroundColor: '#efefef',
-        groupBorderColor: 'rgba(0, 0, 0, 0)',
-        itemBackgroundColor: '#efefef'
-      }
+      if: { style: 'default' },
+      tokens: { containerBackgroundColor: 'rgba(0, 0, 0, 0)' }
     },
     {
-      if: { focus: true, pressed: false },
-      tokens: {
-        groupBorderColor: '#7a3dfc',
-        groupColor: '#7a3dfc',
-        itemBorderBottomColor: '#7a3dfc',
-        itemBorderLeftColor: '#7a3dfc',
-        itemBorderRightColor: '#7a3dfc',
-        itemBorderTopColor: '#7a3dfc'
-      }
-    },
-    {
-      if: { current: true },
-      tokens: {
-        groupBackgroundColor: '#000000',
-        groupBorderColor: '#000000',
-        groupColor: '#ffffff',
-        itemBackgroundColor: '#000000',
-        itemColor: '#ffffff'
-      }
+      if: { style: 'lightest' },
+      tokens: { containerBackgroundColor: '#ffffff' }
     },
     {
-      if: { current: true, pressed: true },
-      tokens: { itemBackgroundColor: '#b5b4b4', itemColor: '#595959' }
+      if: { style: 'light' },
+      tokens: { containerBackgroundColor: '#efefef' }
     },
     {
-      if: { isChild: true },
+      if: { hover: true },
       tokens: {
-        itemBorderBottomWidth: 1,
+        groupBackgroundColor: 'rgba(0, 0, 0, 0.1)',
+        groupBorderLeftColor: '#000000',
+        groupBorderLeftWidth: 4,
+        itemBackgroundColor: 'rgba(0, 0, 0, 0.1)',
         itemBorderLeftColor: '#000000',
-        itemBorderLeftWidth: 4,
-        itemBorderTopWidth: 1
-      }
-    },
-    {
-      if: { isChild: true, pressed: true },
-      tokens: {
-        itemBorderBottomWidth: 1,
-        itemBorderLeftColor: '#595959',
-        itemBorderTopWidth: 1,
-        itemColor: '#595959'
+        itemBorderLeftWidth: 4
       }
     },
     {
-      if: { expanded: true },
-      tokens: {
-        groupBackgroundColor: 'rgba(0, 0, 0, 0)',
-        groupBorderColor: 'rgba(0, 0, 0, 0)',
-        groupColor: '#ffffff',
-        groupIcon: PaletteIconChevronUp,
-        itemColor: '#595959'
-      }
-    },
-    {
-      if: { current: true, isChild: true },
+      if: { pressed: true },
       tokens: {
-        itemBackgroundColor: '#000000',
+        groupBackgroundColor: 'rgba(0, 0, 0, 0.2)',
+        groupBorderLeftColor: '#000000',
+        groupBorderLeftWidth: 4,
+        itemBackgroundColor: 'rgba(0, 0, 0, 0.2)',
         itemBorderLeftColor: '#000000',
-        itemColor: '#ffffff'
+        itemBorderLeftWidth: 4
       }
     },
     {
-      if: { current: true, focus: false, hover: true },
+      if: { current: true },
       tokens: {
-        itemBackgroundColor: '#efefef',
-        itemBorderLeftColor: '#efefef',
-        itemColor: '#666666'
+        groupBorderLeftColor: '#ff0076',
+        groupBorderLeftWidth: 4,
+        groupFontName: 'StagSans',
+        groupFontWeight: '600',
+        itemBorderLeftColor: '#ff0076',
+        itemBorderLeftWidth: 4,
+        itemFontName: 'StagSans',
+        itemFontWeight: '600'
       }
     },
     {
-      if: { current: true, focus: true, hover: true },
+      if: { current: false, focus: true, hover: false, pressed: false },
       tokens: {
-        itemBackgroundColor: '#ffffff',
-        itemBorderLeftColor: '#7a3dfc'
+        itemBorderBottomColor: '#000000',
+        itemBorderBottomWidth: 1,
+        itemBorderLeftColor: '#000000',
+        itemBorderLeftWidth: 4,
+        itemBorderRightColor: '#000000',
+        itemBorderRightWidth: 1,
+        itemBorderTopColor: '#000000',
+        itemBorderTopWidth: 1
       }
     },
     {
-      if: { focus: true, isChild: true },
+      if: { expanded: false, focus: true, hover: false, pressed: false },
       tokens: {
-        itemBackgroundColor: '#ffffff',
-        itemBorderBottomColor: '#7a3dfc',
-        itemBorderBottomWidth: 1,
-        itemBorderLeftColor: '#7a3dfc',
-        itemBorderRightColor: '#7a3dfc',
-        itemBorderRightWidth: 1,
-        itemBorderTopColor: '#7a3dfc',
-        itemBorderTopWidth: 1,
-        itemColor: '#666666'
+        groupBorderBottomColor: '#000000',
+        groupBorderBottomWidth: 1,
+        groupBorderLeftColor: '#000000',
+        groupBorderLeftWidth: 4,
+        groupBorderRightColor: '#000000',
+        groupBorderRightWidth: 1,
+        groupBorderTopColor: '#000000',
+        groupBorderTopWidth: 1
       }
     },
     {
-      if: { hover: true, isChild: true },
+      if: { current: true, focus: true, hover: false, pressed: false },
       tokens: {
-        itemBackgroundColor: '#efefef',
+        itemBorderBottomColor: '#000000',
         itemBorderBottomWidth: 1,
-        itemBorderLeftColor: '#666666',
+        itemBorderLeftColor: '#ff0076',
+        itemBorderLeftWidth: 4,
+        itemBorderRightColor: '#000000',
         itemBorderRightWidth: 1,
-        itemBorderTopWidth: 1,
-        itemColor: '#666666'
+        itemBorderTopColor: '#000000',
+        itemBorderTopWidth: 1
       }
     },
     {
-      if: { current: true, expanded: true, focus: true },
+      if: { expanded: true, focus: true, hover: false, pressed: false },
       tokens: {
-        groupBackgroundColor: '#000000',
-        groupBorderColor: '#7a3dfc',
-        itemBorderLeftColor: '#7a3dfc',
-        itemColor: '#666666'
+        groupBorderBottomColor: '#000000',
+        groupBorderBottomWidth: 1,
+        groupBorderLeftColor: '#ff0076',
+        groupBorderLeftWidth: 4,
+        groupBorderRightColor: '#000000',
+        groupBorderRightWidth: 1,
+        groupBorderTopColor: '#000000',
+        groupBorderTopWidth: 1
       }
     },
     {
-      if: { current: true, expanded: true, hover: true },
+      if: { expanded: true },
       tokens: {
-        groupBackgroundColor: '#efefef',
-        groupColor: '#666666',
-        itemBackgroundColor: '#efefef',
-        itemColor: '#666666'
+        groupBorderLeftColor: '#ff0076',
+        groupBorderLeftWidth: 4,
+        groupFontName: 'StagSans',
+        groupFontWeight: '600',
+        groupIcon: PaletteIconChevronUp,
+        itemBorderLeftColor: '#ff0076',
+        itemBorderLeftWidth: 4,
+        itemFontName: 'StagSans',
+        itemFontWeight: '600'
       }
     },
     {
-      if: { focus: true },
+      if: { secondLevel: true },
       tokens: {
-        groupBackgroundColor: '#ffffff',
-        groupBorderColor: '#7a3dfc',
-        groupColor: '#666666',
-        itemBackgroundColor: '#ffffff',
-        itemBorderBottomColor: '#7a3dfc',
-        itemBorderLeftColor: '#7a3dfc',
-        itemBorderRightColor: '#7a3dfc',
-        itemBorderTopColor: '#7a3dfc',
-        itemColor: '#666666'
+        groupIcon: PaletteIconChevronRight,
+        secondLevelParentIcon: PaletteIconChevronRight
       }
     },
     {
-      if: { pressed: true },
+      if: { secondLevel: true },
       tokens: {
-        groupBackgroundColor: '#404040',
-        groupColor: '#666666',
-        itemBackgroundColor: '#404040',
-        itemBorderLeftColor: '#404040',
-        itemColor: '#666666'
+        groupIcon: PaletteIconChevronRight,
+        secondLevelParentIcon: PaletteIconChevronRight
       }
     }
   ],
   tokens: {
+    borderRadius: 4,
+    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: 4,
     groupBorderRadius: 0,
-    groupBorderWidth: 1,
-    groupColor: '#666666',
+    groupBorderRightColor: 'rgba(0, 0, 0, 0)',
+    groupBorderRightWidth: 0,
+    groupBorderTopColor: 'rgba(0, 0, 0, 0)',
+    groupBorderTopWidth: 0,
+    groupColor: '#000000',
     groupFontName: 'StagSans',
     groupFontSize: 16,
     groupFontWeight: '400',
-    groupHeight: 32,
+    groupHeight: 40,
     groupIcon: PaletteIconChevronDown,
     groupPaddingBottom: 12,
     groupPaddingLeft: 16,
@@ -212,21 +201,21 @@ const theme = {
     groupPaddingTop: 12,
     itemBackgroundColor: 'rgba(0, 0, 0, 0)',
     itemBorderBottomColor: 'rgba(0, 0, 0, 0)',
-    itemBorderBottomWidth: 1,
+    itemBorderBottomWidth: 0,
     itemBorderLeftColor: 'rgba(0, 0, 0, 0)',
-    itemBorderLeftWidth: 1,
+    itemBorderLeftWidth: 4,
     itemBorderRadius: 0,
     itemBorderRightColor: 'rgba(0, 0, 0, 0)',
-    itemBorderRightWidth: 1,
+    itemBorderRightWidth: 0,
     itemBorderTopColor: 'rgba(0, 0, 0, 0)',
-    itemBorderTopWidth: 1,
+    itemBorderTopWidth: 0,
     itemBorderWidth: 0,
-    itemColor: '#666666',
+    itemColor: '#000000',
     itemDisplay: false,
     itemFontName: 'StagSans',
     itemFontSize: 16,
     itemFontWeight: '400',
-    itemHeight: 32,
+    itemHeight: 40,
     itemOutline: 0,
     itemPaddingBottom: 8,
     itemPaddingLeft: 16,
@@ -236,6 +225,25 @@ const theme = {
     lineHeight: 1.5,
     minHeight: '100%',
     minWidth: '100%',
+    secondLevelBackIcon: PaletteIconChevronLeft,
+    secondLevelBackIconColor: '#000000',
+    secondLevelBackIconSize: 16,
+    secondLevelBackLinkColor: '#000000',
+    secondLevelBackLinkFontName: 'StagSans',
+    secondLevelBackLinkFontSize: 16,
+    secondLevelBackLinkFontWeight: '600',
+    secondLevelCloseButtonBorderWidth: 0,
+    secondLevelCloseButtonPadding: 8,
+    secondLevelCloseIcon: PaletteIconClose,
+    secondLevelCloseIconSize: 16,
+    secondLevelDividerColor: '#c9c8c8',
+    secondLevelDividerWidth: 1,
+    secondLevelHeaderBackgroundColor: '#ffffff',
+    secondLevelHeaderPaddingBottom: 4,
+    secondLevelHeaderPaddingLeft: 16,
+    secondLevelHeaderPaddingRight: 16,
+    secondLevelHeaderPaddingTop: 4,
+    secondLevelParentIcon: PaletteIconChevronRight,
     shadow: {
       blur: 2,
       color: 'rgba(0, 0, 0, 0.2)',

package/build/web/Modal.js

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

package/build/web/MultiSelectFilter.js

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

package/build/web/NavigationBar.js

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

package/build/web/Notification.js

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

package/build/web/OrderedList.js

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

package/build/web/Pagination.js

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

package/build/web/PaginationPageButton.js

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

package/build/web/PaginationSideButton.js

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

package/build/web/PreviewCard.js

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

package/build/web/PriceLockup.js

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

package/build/web/ProductCard.js

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

package/build/web/Progress.js

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

package/build/web/ProgressBar.js

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

package/build/web/QuantitySelector.js

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

package/build/web/QuantitySelectorSideButton.js

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

package/build/web/QuickLinks.js

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

package/build/web/QuickLinksButton.js

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

package/build/web/QuickLinksCard.js

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

package/build/web/QuickLinksFeature.js

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

package/build/web/QuickLinksFeatureItem.js

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

package/build/web/QuickLinksList.js

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

package/build/web/Radio.js

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

package/build/web/RadioCard.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 29 Oct 2025 07:39:06 GMT
+ * Generated on Fri, 12 Dec 2025 05:35:43 GMT
  *
  */
 
@@ -142,6 +142,10 @@ const theme = {
     fontWeight: '700',
     letterSpacing: 0,
     lineHeight: 1.4,
+    marginBottom: 0,
+    marginLeft: 0,
+    marginRight: 0,
+    marginTop: 0,
     minWidth: 288,
     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:06 GMT
+ * Generated on Fri, 12 Dec 2025 05:35:43 GMT
  *
  */
 

package/build/web/RadioGroup.js

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

package/build/web/Ribbon.js

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

package/build/web/Search.js

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

package/build/web/SearchButton.js

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

package/build/web/Select.js

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