@telus-uds/theme-koodo 5.5.0 → 5.6.0

package/build/web/Listbox.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ * Generated on Wed, 07 Feb 2024 19:07:57 GMT
  *
  */
 
@@ -19,6 +19,18 @@ const theme = {
       type: 'state',
       values: [ true, false ]
     },
+    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' ],
+      type: 'state',
+      values: [ true, false ]
+    },
+    hover: {
+      description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+      platforms: [ 'rn', 'web' ],
+      type: 'state',
+      values: [ true, false ]
+    },
     isChild: {
       description: 'when the item is child of another child',
       type: 'state',
@@ -31,6 +43,25 @@ const theme = {
     }
   },
   rules: [
+    {
+      if: { focus: false, hover: true, pressed: false },
+      tokens: {
+        groupBackgroundColor: '#efefef',
+        groupBorderColor: 'rgba(0, 0, 0, 0)',
+        itemBackgroundColor: '#efefef'
+      }
+    },
+    {
+      if: { focus: true, pressed: false },
+      tokens: {
+        groupBorderColor: '#7a3dfc',
+        groupColor: '#7a3dfc',
+        itemBorderBottomColor: '#7a3dfc',
+        itemBorderLeftColor: '#7a3dfc',
+        itemBorderRightColor: '#7a3dfc',
+        itemBorderTopColor: '#7a3dfc'
+      }
+    },
     {
       if: { current: true },
       tokens: {
@@ -81,6 +112,78 @@ const theme = {
         itemColor: '#ffffff'
       }
     },
+    {
+      if: { current: true, focus: false, hover: true },
+      tokens: {
+        itemBackgroundColor: '#efefef',
+        itemBorderLeftColor: '#efefef',
+        itemColor: '#666666'
+      }
+    },
+    {
+      if: { current: true, focus: true, hover: true },
+      tokens: {
+        itemBackgroundColor: '#ffffff',
+        itemBorderLeftColor: '#7a3dfc'
+      }
+    },
+    {
+      if: { focus: true, isChild: true },
+      tokens: {
+        itemBackgroundColor: '#ffffff',
+        itemBorderBottomColor: '#7a3dfc',
+        itemBorderBottomWidth: 1,
+        itemBorderLeftColor: '#7a3dfc',
+        itemBorderRightColor: '#7a3dfc',
+        itemBorderRightWidth: 1,
+        itemBorderTopColor: '#7a3dfc',
+        itemBorderTopWidth: 1,
+        itemColor: '#666666'
+      }
+    },
+    {
+      if: { hover: true, isChild: true },
+      tokens: {
+        itemBackgroundColor: '#efefef',
+        itemBorderBottomWidth: 0,
+        itemBorderLeftColor: '#666666',
+        itemBorderRightWidth: 0,
+        itemBorderTopWidth: 0,
+        itemColor: '#666666'
+      }
+    },
+    {
+      if: { current: true, expanded: true, focus: true },
+      tokens: {
+        groupBackgroundColor: '#000000',
+        groupBorderColor: '#7a3dfc',
+        itemBorderLeftColor: '#7a3dfc',
+        itemColor: '#666666'
+      }
+    },
+    {
+      if: { current: true, expanded: true, hover: true },
+      tokens: {
+        groupBackgroundColor: '#efefef',
+        groupColor: '#666666',
+        itemBackgroundColor: '#efefef',
+        itemColor: '#666666'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        groupBackgroundColor: '#ffffff',
+        groupBorderColor: '#7a3dfc',
+        groupColor: '#666666',
+        itemBackgroundColor: '#ffffff',
+        itemBorderBottomColor: '#7a3dfc',
+        itemBorderLeftColor: '#7a3dfc',
+        itemBorderRightColor: '#7a3dfc',
+        itemBorderTopColor: '#7a3dfc',
+        itemColor: '#666666'
+      }
+    },
     {
       if: { pressed: true },
       tokens: {

package/build/web/Modal.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ * Generated on Wed, 07 Feb 2024 19:07:57 GMT
  *
  */
 

package/build/web/MultiSelectFilter.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ * Generated on Wed, 07 Feb 2024 19:07:57 GMT
  *
  */
 

package/build/web/NavigationBar.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ * Generated on Wed, 07 Feb 2024 19:07:57 GMT
  *
  */
 
@@ -14,6 +14,18 @@ const theme = {
       type: 'state',
       values: [ true, false ]
     },
+    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' ],
+      type: 'state',
+      values: [ true, false ]
+    },
+    hover: {
+      description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+      platforms: [ 'rn', 'web' ],
+      type: 'state',
+      values: [ true, false ]
+    },
     pressed: {
       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',
@@ -42,6 +54,27 @@ const theme = {
         outerBorderColor: '#000000'
       }
     },
+    {
+      if: { focus: true },
+      tokens: { borderColor: '#000000', borderWidth: 4 }
+    },
+    {
+      if: { focus: true, pressed: true },
+      tokens: {
+        backgroundColor: '#595959',
+        borderColor: '#595959',
+        borderWidth: 1,
+        color: '#c9c8c8'
+      }
+    },
+    {
+      if: { hover: true },
+      tokens: {
+        backgroundColor: '#404040',
+        borderColor: '#404040',
+        color: '#ffffff'
+      }
+    },
     {
       if: { pressed: true },
       tokens: {
@@ -55,6 +88,16 @@ const theme = {
       if: { viewport: [ 'xs', 'sm', 'md' ] },
       tokens: { textAlign: 'space-between', width: 288 }
     },
+    {
+      if: { hover: true, selected: true },
+      tokens: {
+        backgroundColor: '#404040',
+        borderColor: '#404040',
+        color: '#ffffff',
+        fontName: 'StagSans',
+        fontWeight: '600'
+      }
+    },
     {
       if: { pressed: true, selected: true },
       tokens: {

package/build/web/Notification.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ * Generated on Wed, 07 Feb 2024 19:07:57 GMT
  *
  */
 

package/build/web/OrderedList.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ * Generated on Wed, 07 Feb 2024 19:07:57 GMT
  *
  */
 

package/build/web/Pagination.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ * Generated on Wed, 07 Feb 2024 19:07:57 GMT
  *
  */
 

package/build/web/PaginationPageButton.js

@@ -1,13 +1,25 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ * Generated on Wed, 07 Feb 2024 19:07:57 GMT
  *
  */
 
 
 const theme = {
   appearances: {
+    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' ],
+      type: 'state',
+      values: [ true, false ]
+    },
+    hover: {
+      description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+      platforms: [ 'rn', 'web' ],
+      type: 'state',
+      values: [ true, false ]
+    },
     pressed: {
       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',
@@ -20,6 +32,11 @@ const theme = {
     }
   },
   rules: [
+    {
+      if: { hover: true },
+      tokens: { borderColor: '#000000', textLine: 'none' }
+    },
+    { if: { focus: true }, tokens: { borderColor: '#000000' } },
     {
       if: { selected: true },
       tokens: {
@@ -28,6 +45,14 @@ const theme = {
         textLine: 'none'
       }
     },
+    {
+      if: { hover: true, selected: true },
+      tokens: { borderColor: '#7a3dfc' }
+    },
+    {
+      if: { focus: true, selected: true },
+      tokens: { borderColor: '#7a3dfc' }
+    },
     {
       if: { pressed: true },
       tokens: {

package/build/web/PaginationSideButton.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ * Generated on Wed, 07 Feb 2024 19:07:57 GMT
  *
  */
 
@@ -19,6 +19,18 @@ const theme = {
       type: 'state',
       values: [ 'previous', 'next' ]
     },
+    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' ],
+      type: 'state',
+      values: [ true, false ]
+    },
+    hover: {
+      description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+      platforms: [ 'rn', 'web' ],
+      type: 'state',
+      values: [ true, false ]
+    },
     pressed: {
       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',
@@ -48,6 +60,28 @@ const theme = {
         paddingTop: 8
       }
     },
+    {
+      if: { hover: true },
+      tokens: {
+        borderBottomWidth: 1,
+        borderColor: '#000000',
+        borderLeftWidth: 1,
+        borderRightWidth: 1,
+        borderTopWidth: 1,
+        iconDisplace: 4,
+        textLine: 'none'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        borderBottomWidth: 1,
+        borderColor: '#000000',
+        borderLeftWidth: 1,
+        borderRightWidth: 1,
+        borderTopWidth: 1
+      }
+    },
     {
       if: { pressed: true },
       tokens: { backgroundColor: '#000000', color: '#666666' }

package/build/web/PreviewCard.js

@@ -1,14 +1,54 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ * Generated on Wed, 07 Feb 2024 19:07:57 GMT
  *
  */
 
 
 const theme = {
-  appearances: {},
-  rules: [],
+  appearances: {
+    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' ],
+      type: 'state',
+      values: [ true, false ]
+    },
+    hover: {
+      description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+      platforms: [ 'rn', 'web' ],
+      type: 'state',
+      values: [ true, false ]
+    },
+    pressed: {
+      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' ],
+      type: 'state',
+      values: [ true, false ]
+    }
+  },
+  rules: [
+    {
+      if: { hover: true },
+      tokens: { borderColor: '#efefef', borderWidth: 3 }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        outerBorderColor: '#000000',
+        outerBorderGap: 2,
+        outerBorderWidth: 2
+      }
+    },
+    {
+      if: { pressed: true },
+      tokens: {
+        backgroundColor: '#efefef',
+        borderColor: 'transparent',
+        outerBorderColor: '#000000'
+      }
+    }
+  ],
   tokens: {
     backgroundColor: '#ffffff',
     borderColor: '#efefef',

package/build/web/PriceLockup.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ * Generated on Wed, 07 Feb 2024 19:07:57 GMT
  *
  */
 

package/build/web/Progress.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ * Generated on Wed, 07 Feb 2024 19:07:57 GMT
  *
  */
 

package/build/web/ProgressBar.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ * Generated on Wed, 07 Feb 2024 19:07:57 GMT
  *
  */
 

package/build/web/QuantitySelector.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ * Generated on Wed, 07 Feb 2024 19:07:57 GMT
  *
  */
 

package/build/web/QuantitySelectorSideButton.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ * Generated on Wed, 07 Feb 2024 19:07:57 GMT
  *
  */
 

package/build/web/QuickLinks.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ * Generated on Wed, 07 Feb 2024 19:07:57 GMT
  *
  */
 

package/build/web/QuickLinksButton.js

@@ -1,13 +1,25 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ * Generated on Wed, 07 Feb 2024 19:07:57 GMT
  *
  */
 
 
 const theme = {
   appearances: {
+    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' ],
+      type: 'state',
+      values: [ true, false ]
+    },
+    hover: {
+      description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+      platforms: [ 'rn', 'web' ],
+      type: 'state',
+      values: [ true, false ]
+    },
     pressed: {
       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',
@@ -15,6 +27,7 @@ const theme = {
     }
   },
   rules: [
+    { if: { hover: true }, tokens: { borderWidth: 3 } },
     {
       if: { pressed: true },
       tokens: {
@@ -22,6 +35,11 @@ const theme = {
         borderColor: '#666666',
         iconColor: '#666666'
       }
+    },
+    { if: { focus: true }, tokens: { outerBorderColor: '#666666' } },
+    {
+      if: { focus: true, pressed: true },
+      tokens: { borderWidth: 1, outerBorderColor: '#666666' }
     }
   ],
   tokens: {

package/build/web/QuickLinksCard.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ * Generated on Wed, 07 Feb 2024 19:07:57 GMT
  *
  */
 

package/build/web/QuickLinksFeature.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ * Generated on Wed, 07 Feb 2024 19:07:57 GMT
  *
  */
 

package/build/web/QuickLinksFeatureItem.js

@@ -1,13 +1,25 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ * Generated on Wed, 07 Feb 2024 19:07:57 GMT
  *
  */
 
 
 const theme = {
   appearances: {
+    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' ],
+      type: 'state',
+      values: [ true, false ]
+    },
+    hover: {
+      description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+      platforms: [ 'rn', 'web' ],
+      type: 'state',
+      values: [ true, false ]
+    },
     pressed: {
       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',
@@ -24,6 +36,14 @@ const theme = {
       if: { viewport: 'xl' },
       tokens: { contentMaxDimension: 184, imageDimension: 168 }
     },
+    {
+      if: { hover: true },
+      tokens: { color: '#404040', imageDimension: 140, textLine: 'underline' }
+    },
+    {
+      if: { focus: true },
+      tokens: { color: '#000000', outerBorderColor: '#000000' }
+    },
     {
       if: { pressed: true },
       tokens: {
@@ -31,6 +51,14 @@ const theme = {
         outerBorderColor: '#595959',
         textLine: 'underline'
       }
+    },
+    {
+      if: { focus: true, pressed: true },
+      tokens: {
+        color: '#595959',
+        outerBorderColor: '#595959',
+        textLine: 'underline'
+      }
     }
   ],
   tokens: {

package/build/web/QuickLinksList.js

@@ -1,13 +1,25 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ * Generated on Wed, 07 Feb 2024 19:07:57 GMT
  *
  */
 
 
 const theme = {
   appearances: {
+    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' ],
+      type: 'state',
+      values: [ true, false ]
+    },
+    hover: {
+      description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+      platforms: [ 'rn', 'web' ],
+      type: 'state',
+      values: [ true, false ]
+    },
     pressed: {
       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',
@@ -15,6 +27,8 @@ const theme = {
     }
   },
   rules: [
+    { if: { hover: true }, tokens: { backgroundColor: '#efefef' } },
+    { if: { focus: true }, tokens: { backgroundColor: '#efefef' } },
     {
       if: { pressed: true },
       tokens: { backgroundColor: '#c9c8c8', itemIconColor: '#000000' }

package/build/web/Radio.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ * Generated on Wed, 07 Feb 2024 19:07:57 GMT
  *
  */
 
@@ -14,6 +14,18 @@ const theme = {
       values: [ true ]
     },
     error: { type: 'state', 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' ],
+      type: 'state',
+      values: [ true, false ]
+    },
+    hover: {
+      description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+      platforms: [ 'rn', 'web' ],
+      type: 'state',
+      values: [ true, false ]
+    },
     inactive: {
       description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
       type: 'state',
@@ -32,6 +44,15 @@ const theme = {
         outerBorderWidth: 0
       }
     },
+    {
+      if: { focus: true },
+      tokens: {
+        outerBorderColor: '#000000',
+        outerBorderGap: 5,
+        outerBorderWidth: 1
+      }
+    },
+    { if: { hover: true }, tokens: { outerBorderColor: '#000000' } },
     {
       if: { inactive: true },
       tokens: {