@telus-uds/theme-koodo 7.22.0 → 7.24.0

package/build/rn/IconButton.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 19 Jan 2026 20:37:54 GMT
+ * Generated on Wed, 18 Feb 2026 02:48:07 GMT
  *
  */
 
@@ -85,7 +85,11 @@ module.exports = {
       type: 'state',
       values: [ true ]
     },
-    size: { type: 'variant', values: [ 'small', 'large' ] }
+    size: { type: 'variant', values: [ 'small', 'large' ] },
+    style: {
+      type: 'variant',
+      values: [ 'default', 'contained', 'subtle', 'raised' ]
+    }
   },
   rules: [
     {
@@ -410,7 +414,345 @@ module.exports = {
         outerBorderColor: 'rgba(0, 0, 0, 0)'
       }
     },
-    { if: { size: 'large' }, tokens: { iconSize: 24, padding: 10 } }
+    { if: { size: 'large' }, tokens: { iconSize: 24, padding: 10 } },
+    {
+      if: { style: 'contained' },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: '#000000',
+        borderRadius: 4,
+        borderWidth: 1,
+        iconColor: '#000000'
+      }
+    },
+    {
+      if: { selected: true, style: 'contained' },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderBottomWidth: 1,
+        borderColor: '#000000',
+        borderRadius: 4,
+        borderWidth: 1,
+        iconColor: '#000000'
+      }
+    },
+    {
+      if: { hover: true, style: 'contained' },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+        borderColor: '#000000',
+        borderRadius: 4,
+        borderWidth: 1,
+        iconColor: '#000000'
+      }
+    },
+    {
+      if: { pressed: true, style: 'contained' },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0.2)',
+        borderRadius: 4,
+        borderWidth: 1,
+        iconColor: '#666666'
+      }
+    },
+    {
+      if: { focus: true, hover: false, pressed: false, style: 'contained' },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderBottomWidth: 3,
+        borderColor: '#000000',
+        borderRadius: 4,
+        borderWidth: 3,
+        iconColor: '#000000'
+      }
+    },
+    {
+      if: { inverse: true, style: 'contained' },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: '#ffffff',
+        borderRadius: 4,
+        borderWidth: 1,
+        iconColor: '#ffffff'
+      }
+    },
+    {
+      if: { inverse: true, selected: true, style: 'contained' },
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderRadius: 4,
+        borderWidth: 0,
+        iconColor: '#000000'
+      }
+    },
+    {
+      if: { hover: true, inverse: true, style: 'contained' },
+      tokens: {
+        backgroundColor: 'rgba(255, 255, 255, 0.2)',
+        borderColor: '#ffffff',
+        borderRadius: 4,
+        borderWidth: 1,
+        iconColor: '#ffffff'
+      }
+    },
+    {
+      if: { inverse: true, pressed: true, style: 'contained' },
+      tokens: {
+        backgroundColor: 'rgba(255, 255, 255, 0.4)',
+        borderColor: '#ffffff',
+        borderRadius: 4,
+        borderWidth: 1,
+        iconColor: '#ffffff'
+      }
+    },
+    {
+      if: {
+        focus: true,
+        hover: false,
+        inverse: true,
+        pressed: false,
+        style: 'contained'
+      },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: '#ffffff',
+        borderRadius: 4,
+        borderWidth: 3,
+        iconColor: '#ffffff'
+      }
+    },
+    {
+      if: { inactive: true, style: 'contained' },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+        borderWidth: 0,
+        iconColor: 'rgba(0, 0, 0, 0.4)'
+      }
+    },
+    {
+      if: { inactive: true, inverse: true, style: 'contained' },
+      tokens: {
+        backgroundColor: 'rgba(255, 255, 255, 0.2)',
+        borderWidth: 0,
+        iconColor: 'rgba(255, 255, 255, 0.4)'
+      }
+    },
+    {
+      if: { style: 'subtle' },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        borderWidth: 0,
+        iconColor: '#000000'
+      }
+    },
+    {
+      if: { selected: true, style: 'subtle' },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderBottomWidth: 2,
+        borderColor: '#000000',
+        borderWidth: null,
+        iconColor: '#000000'
+      }
+    },
+    {
+      if: { hover: true, style: 'subtle' },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+        borderBottomWidth: 0,
+        borderRadius: 4,
+        borderWidth: 0,
+        iconColor: '#000000'
+      }
+    },
+    {
+      if: { pressed: true, style: 'subtle' },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0.2)',
+        borderRadius: 4,
+        borderWidth: 0,
+        iconColor: '#666666'
+      }
+    },
+    {
+      if: { focus: true, hover: false, pressed: false, style: 'subtle' },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderBottomWidth: 1,
+        borderColor: '#000000',
+        borderRadius: 4,
+        borderWidth: 1,
+        iconColor: '#000000'
+      }
+    },
+    {
+      if: { inverse: true, style: 'subtle' },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        borderWidth: 0,
+        iconColor: '#ffffff'
+      }
+    },
+    {
+      if: { inverse: true, selected: true, style: 'subtle' },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderBottomWidth: 2,
+        borderColor: '#ffffff',
+        borderWidth: null,
+        iconColor: '#ffffff'
+      }
+    },
+    {
+      if: { hover: true, inverse: true, style: 'subtle' },
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderBottomWidth: 0,
+        borderRadius: 4,
+        borderWidth: null,
+        iconColor: '#000000'
+      }
+    },
+    {
+      if: { inverse: true, pressed: true, style: 'subtle' },
+      tokens: {
+        backgroundColor: '#c9c8c8',
+        borderRadius: 4,
+        borderWidth: 0,
+        iconColor: '#000000'
+      }
+    },
+    {
+      if: {
+        focus: true,
+        hover: false,
+        inverse: true,
+        pressed: false,
+        style: 'subtle'
+      },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderBottomWidth: 1,
+        borderColor: '#ffffff',
+        borderRadius: 4,
+        borderWidth: 1,
+        iconColor: '#ffffff'
+      }
+    },
+    {
+      if: { inactive: true, style: 'subtle' },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+        iconColor: 'rgba(0, 0, 0, 0.4)'
+      }
+    },
+    {
+      if: { inactive: true, inverse: true, style: 'subtle' },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        iconColor: 'rgba(255, 255, 255, 0.4)'
+      }
+    },
+    {
+      if: { style: 'raised' },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: '#000000',
+        borderRadius: 4,
+        borderWidth: 1,
+        iconColor: '#000000',
+        padding: 8,
+        shadow: {
+          blur: 2,
+          color: 'rgba(0, 0, 0, 0.2)',
+          inset: false,
+          offsetX: 0,
+          offsetY: 2,
+          spread: 0
+        }
+      }
+    },
+    {
+      if: { selected: true, style: 'raised' },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderBottomWidth: 1,
+        borderColor: '#000000',
+        borderRadius: 4,
+        borderWidth: 1,
+        iconColor: '#000000',
+        padding: 8,
+        shadow: {
+          blur: 2,
+          color: 'rgba(0, 0, 0, 0.2)',
+          inset: false,
+          offsetX: 0,
+          offsetY: 2,
+          spread: 0
+        }
+      }
+    },
+    {
+      if: { hover: true, style: 'raised' },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+        borderColor: '#000000',
+        borderRadius: 4,
+        borderWidth: 1,
+        iconColor: '#000000',
+        padding: 8,
+        shadow: {
+          blur: 2,
+          color: 'rgba(0, 0, 0, 0.2)',
+          inset: false,
+          offsetX: 0,
+          offsetY: 2,
+          spread: 0
+        }
+      }
+    },
+    {
+      if: { pressed: true, style: 'raised' },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0.2)',
+        borderRadius: 4,
+        borderWidth: 1,
+        iconColor: '#666666',
+        padding: 8,
+        shadow: null
+      }
+    },
+    {
+      if: { focus: true, hover: false, pressed: false, style: 'raised' },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderBottomWidth: 3,
+        borderColor: '#000000',
+        borderRadius: 4,
+        borderWidth: 3,
+        iconColor: '#000000',
+        padding: 8,
+        shadow: {
+          blur: 2,
+          color: 'rgba(0, 0, 0, 0.2)',
+          inset: false,
+          offsetX: 0,
+          offsetY: 2,
+          spread: 0
+        }
+      }
+    },
+    {
+      if: { inactive: true, style: 'raised' },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+        borderWidth: 0,
+        iconColor: 'rgba(0, 0, 0, 0.4)',
+        shadow: null
+      }
+    }
   ],
   tokens: {
     backgroundColor: 'transparent',

package/build/rn/Image.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 19 Jan 2026 20:37:54 GMT
+ * Generated on Wed, 18 Feb 2026 02:48:07 GMT
  *
  */
 

package/build/rn/InputLabel.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 19 Jan 2026 20:37:54 GMT
+ * Generated on Wed, 18 Feb 2026 02:48:07 GMT
  *
  */
 

package/build/rn/InputSupports.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 19 Jan 2026 20:37:54 GMT
+ * Generated on Wed, 18 Feb 2026 02:48:07 GMT
  *
  */
 

package/build/rn/Link.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 19 Jan 2026 20:37:54 GMT
+ * Generated on Wed, 18 Feb 2026 02:48:07 GMT
  *
  */
 

package/build/rn/List.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 19 Jan 2026 20:37:54 GMT
+ * Generated on Wed, 18 Feb 2026 02:48:07 GMT
  *
  */
 

package/build/rn/Listbox.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 19 Jan 2026 20:37:54 GMT
+ * Generated on Wed, 18 Feb 2026 02:48:07 GMT
  *
  */
 

package/build/rn/Modal.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 19 Jan 2026 20:37:54 GMT
+ * Generated on Wed, 18 Feb 2026 02:48:07 GMT
  *
  */
 

package/build/rn/MultiSelectFilter.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 19 Jan 2026 20:37:54 GMT
+ * Generated on Wed, 18 Feb 2026 02:48:07 GMT
  *
  */
 

package/build/rn/NavigationBar.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 19 Jan 2026 20:37:54 GMT
+ * Generated on Wed, 18 Feb 2026 02:48:07 GMT
  *
  */
 

package/build/rn/Notification.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 19 Jan 2026 20:37:54 GMT
+ * Generated on Wed, 18 Feb 2026 02:48:07 GMT
  *
  */
 

package/build/rn/OrderedList.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 19 Jan 2026 20:37:54 GMT
+ * Generated on Wed, 18 Feb 2026 02:48:07 GMT
  *
  */
 

package/build/rn/Pagination.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 19 Jan 2026 20:37:54 GMT
+ * Generated on Wed, 18 Feb 2026 02:48:07 GMT
  *
  */
 

package/build/rn/PaginationPageButton.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 19 Jan 2026 20:37:54 GMT
+ * Generated on Wed, 18 Feb 2026 02:48:07 GMT
  *
  */
 

package/build/rn/PaginationSideButton.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 19 Jan 2026 20:37:54 GMT
+ * Generated on Wed, 18 Feb 2026 02:48:07 GMT
  *
  */
 

package/build/rn/PreviewCard.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 19 Jan 2026 20:37:54 GMT
+ * Generated on Wed, 18 Feb 2026 02:48:07 GMT
  *
  */
 

package/build/rn/PriceLockup.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 19 Jan 2026 20:37:54 GMT
+ * Generated on Wed, 18 Feb 2026 02:48:07 GMT
  *
  */
 

package/build/rn/ProductCard.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 19 Jan 2026 20:37:54 GMT
+ * Generated on Wed, 18 Feb 2026 02:48:07 GMT
  *
  */
 

package/build/rn/Progress.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 19 Jan 2026 20:37:54 GMT
+ * Generated on Wed, 18 Feb 2026 02:48:07 GMT
  *
  */
 

package/build/rn/ProgressBar.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 19 Jan 2026 20:37:54 GMT
+ * Generated on Wed, 18 Feb 2026 02:48:07 GMT
  *
  */
 

package/build/rn/QuantitySelector.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 19 Jan 2026 20:37:54 GMT
+ * Generated on Wed, 18 Feb 2026 02:48:07 GMT
  *
  */
 
@@ -13,6 +13,7 @@ module.exports = {
     disabled: { type: 'variant', values: [ true ] },
     focus: { type: 'variant', values: [ true ] },
     hover: { type: 'variant', values: [ true ] },
+    inactive: { type: 'variant', values: [ true ] },
     pressed: { type: 'variant', values: [ true ] }
   },
   rules: [
@@ -24,11 +25,23 @@ module.exports = {
       if: { hover: true },
       tokens: { inputBackgroundColor: '#efefef' }
     },
+    { if: { focus: true }, tokens: { inputBorderWidth: 3 } },
     {
       if: { disabled: true },
-      tokens: { inputBackgroundColor: '#efefef', textColor: '#c9c8c8' }
+      tokens: {
+        inputBackgroundColor: '#efefef',
+        inputBorderWidth: 1,
+        textColor: '#c9c8c8'
+      }
     },
-    { if: { focus: true }, tokens: { inputBorderWidth: 3 } }
+    {
+      if: { inactive: true },
+      tokens: {
+        inputBackgroundColor: '#efefef',
+        inputBorderWidth: 1,
+        textColor: '#666666'
+      }
+    }
   ],
   tokens: {
     fontSize: 16,
@@ -42,6 +55,7 @@ module.exports = {
     paddingLeft: 12,
     paddingRight: 12,
     paddingTop: 12,
+    showTopSpace: true,
     textColor: '#000000'
   }
 }

package/build/rn/QuantitySelectorSideButton.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 19 Jan 2026 20:37:54 GMT
+ * Generated on Wed, 18 Feb 2026 02:48:07 GMT
  *
  */
 
@@ -15,6 +15,7 @@ module.exports = {
     disabled: { type: 'variant', values: [ true ] },
     focus: { type: 'variant', values: [ true ] },
     hover: { type: 'variant', values: [ true ] },
+    inactive: { type: 'variant', values: [ true ] },
     increase: { type: 'variant', values: [ true ] },
     pressed: { type: 'variant', values: [ true ] }
   },
@@ -60,10 +61,6 @@ module.exports = {
         borderTopWidth: 3
       }
     },
-    {
-      if: { disabled: true },
-      tokens: { backgroundColor: '#efefef', iconColor: '#c9c8c8' }
-    },
     {
       if: { alternative: true },
       tokens: { paddingBottom: 12, paddingTop: 12 }
@@ -75,6 +72,18 @@ module.exports = {
     {
       if: { alternative: true, decrease: true },
       tokens: { borderBottomLeftRadius: 24, borderTopLeftRadius: 24 }
+    },
+    {
+      if: { disabled: true },
+      tokens: {
+        backgroundColor: '#efefef',
+        borderWidth: 1,
+        iconColor: '#c9c8c8'
+      }
+    },
+    {
+      if: { inactive: true },
+      tokens: { backgroundColor: '#efefef', iconColor: '#c9c8c8' }
     }
   ],
   tokens: {

package/build/rn/QuickLinks.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 19 Jan 2026 20:37:54 GMT
+ * Generated on Wed, 18 Feb 2026 02:48:07 GMT
  *
  */
 

package/build/rn/QuickLinksButton.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 19 Jan 2026 20:37:54 GMT
+ * Generated on Wed, 18 Feb 2026 02:48:07 GMT
  *
  */
 
@@ -37,7 +37,10 @@ module.exports = {
         iconColor: '#666666'
       }
     },
-    { if: { focus: true }, tokens: { outerBorderColor: '#000000' } },
+    {
+      if: { focus: true },
+      tokens: { outerBorderColor: '#000000', outerBorderWidth: 2 }
+    },
     {
       if: { focus: true, pressed: true },
       tokens: { borderWidth: 1, outerBorderColor: '#000000' }
@@ -63,7 +66,7 @@ module.exports = {
     outerBackgroundColor: 'rgba(0, 0, 0, 0)',
     outerBorderColor: '#ffffff',
     outerBorderGap: 2,
-    outerBorderWidth: 2,
+    outerBorderWidth: 0,
     paddingBottom: 12,
     paddingLeft: 24,
     paddingRight: 24,