@telus-uds/theme-allium 4.22.0 → 4.23.1

package/build/web/NavigationBar.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 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',
@@ -41,6 +53,33 @@ const theme = {
         fontWeight: '700'
       }
     },
+    {
+      if: { focus: true },
+      tokens: {
+        backgroundColor: '#f4f4f7',
+        borderColor: '#4b286d',
+        borderWidth: 2,
+        color: '#4b286d',
+        outerBorderColor: '#4b286d',
+        outerBorderWidth: 2
+      }
+    },
+    {
+      if: { focus: true, pressed: true },
+      tokens: {
+        backgroundColor: '#4b286d',
+        borderColor: '#4b286d',
+        color: '#ffffff'
+      }
+    },
+    {
+      if: { hover: true },
+      tokens: {
+        backgroundColor: '#f4f4f7',
+        borderColor: '#7c53a5',
+        color: '#4b286d'
+      }
+    },
     {
       if: { pressed: true },
       tokens: {

package/build/web/Notification.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/OrderedList.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/Pagination.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/PaginationPageButton.js

@@ -1,13 +1,25 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 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,20 @@ const theme = {
     }
   },
   rules: [
+    {
+      if: { hover: true },
+      tokens: { borderColor: '#676e73', textLine: 'none' }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        borderBottomWidth: 3,
+        borderColor: '#676e73',
+        borderLeftWidth: 3,
+        borderRightWidth: 3,
+        borderTopWidth: 3
+      }
+    },
     {
       if: { selected: true },
       tokens: {

package/build/web/PaginationSideButton.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 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',
@@ -47,6 +59,19 @@ const theme = {
         width: 32
       }
     },
+    {
+      if: { hover: true },
+      tokens: {
+        iconDisplace: 4,
+        outerBorderColor: '#676e73',
+        outerBorderWidth: 1,
+        textLine: 'none'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: { outerBorderColor: '#676e73', outerBorderWidth: 3 }
+    },
     {
       if: { selected: true },
       tokens: {

package/build/web/PreviewCard.js

@@ -1,14 +1,44 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 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: { borderWidth: 2 } },
+    { if: { pressed: true }, tokens: { backgroundColor: '#f4f4f7' } },
+    {
+      if: { focus: true },
+      tokens: {
+        outerBorderColor: '#676e73',
+        outerBorderGap: 2,
+        outerBorderWidth: 2
+      }
+    }
+  ],
   tokens: {
     backgroundColor: '#ffffff',
     borderColor: '#e3e6e8',

package/build/web/PriceLockup.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/Progress.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/ProgressBar.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/QuantitySelector.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/QuantitySelectorSideButton.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/QuickLinks.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/QuickLinksButton.js

@@ -1,13 +1,25 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 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,10 +27,13 @@ const theme = {
     }
   },
   rules: [
+    { if: { hover: true }, tokens: { borderWidth: 3 } },
     {
       if: { pressed: true },
       tokens: { backgroundColor: '#b2b9bf', borderWidth: 3 }
-    }
+    },
+    { if: { focus: true }, tokens: { outerBorderColor: '#676e73' } },
+    { if: { focus: true, pressed: true }, tokens: { borderWidth: 1 } }
   ],
   tokens: {
     alignSelf: 'flex-start',

package/build/web/QuickLinksCard.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/QuickLinksFeature.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/QuickLinksFeatureItem.js

@@ -1,13 +1,25 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 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,9 +36,25 @@ const theme = {
       if: { viewport: 'xl' },
       tokens: { contentMaxDimension: 184, imageDimension: 168 }
     },
+    {
+      if: { focus: true },
+      tokens: { outerBorderColor: '#2b8000', textLine: 'none' }
+    },
+    {
+      if: { hover: true },
+      tokens: { color: '#2b8000', imageDimension: 140, textLine: 'underline' }
+    },
+    {
+      if: { hover: true, viewport: 'xl' },
+      tokens: { imageDimension: 184 }
+    },
     {
       if: { pressed: true },
       tokens: { color: '#1f5c09', textLine: 'none' }
+    },
+    {
+      if: { focus: true, pressed: true },
+      tokens: { color: '#1f5c09', outerBorderColor: '#1f5c09' }
     }
   ],
   tokens: {

package/build/web/QuickLinksList.js

@@ -1,13 +1,25 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 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,22 @@ const theme = {
     }
   },
   rules: [
+    {
+      if: { hover: true },
+      tokens: {
+        backgroundColor: '#f4f4f7',
+        itemFontColor: '#4b286d',
+        itemUnderline: 'underline'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        backgroundColor: '#e3e6e8',
+        itemFontColor: '#414547',
+        itemUnderline: 'underline'
+      }
+    },
     {
       if: { pressed: true },
       tokens: {

package/build/web/Radio.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 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',
@@ -22,6 +34,11 @@ const theme = {
   },
   rules: [
     { if: { error: true }, tokens: {} },
+    { if: { hover: true }, tokens: { outerBorderColor: '#e3e6e8' } },
+    {
+      if: { focus: true },
+      tokens: { inputBorderColor: '#7c53a5', inputBorderWidth: 3 }
+    },
     {
       if: { inactive: true },
       tokens: {

package/build/web/RadioCard.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 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',
@@ -42,6 +54,24 @@ const theme = {
         paddingTop: 16
       }
     },
+    {
+      if: { hover: true },
+      tokens: {
+        borderColor: '#676e73',
+        outerBorderColor: '#e3e6e8',
+        radioOuterBorderColor: '#e3e6e8',
+        radioOuterBorderWidth: 2
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        outerBorderColor: '#676e73',
+        outerBorderGap: 2,
+        radioInputBorderColor: '#7c53a5',
+        radioInputBorderWidth: 3
+      }
+    },
     {
       description: 'Pressed state matches hover state plus light grey background',
       if: { pressed: true },
@@ -57,6 +87,10 @@ const theme = {
       }
     },
     { if: { checked: true }, tokens: { borderColor: '#7c53a5' } },
+    {
+      if: { checked: true, hover: true },
+      tokens: { borderColor: '#4b286d' }
+    },
     {
       if: { error: true },
       tokens: {

package/build/web/RadioCardGroup.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/RadioGroup.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/Ribbon.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/Search.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 
@@ -14,6 +14,12 @@ const theme = {
       type: 'state',
       values: [ true ]
     },
+    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',
@@ -21,6 +27,10 @@ const theme = {
     }
   },
   rules: [
+    {
+      if: { hover: true, inactive: null },
+      tokens: { outerBorderWidth: 2 }
+    },
     {
       if: { focus: true },
       tokens: { borderColor: '#7c53a5', borderWidth: 3, outerBorderWidth: 0 }

package/build/web/SearchButton.js

@@ -1,13 +1,25 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 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 ]
+    },
     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',
@@ -25,6 +37,23 @@ const theme = {
       if: { priority: 'high' },
       tokens: { backgroundColor: '#4b286d', iconColor: '#ffffff' }
     },
+    {
+      if: { hover: true },
+      tokens: {
+        backgroundColor: '#7c53a5',
+        borderWidth: 0,
+        iconColor: '#ffffff'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        backgroundColor: 'transparent',
+        borderColor: '#4b286d',
+        borderWidth: 3,
+        iconColor: '#4b286d'
+      }
+    },
     {
       if: { pressed: true },
       tokens: {