@telus-uds/theme-allium 4.23.0 → 4.24.0

package/build/web/ChevronLink.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Wed, 07 Feb 2024 19:08:44 GMT
  *
  */
 
@@ -10,6 +10,18 @@ import PaletteIconArrowRight from '@telus-uds/palette-allium/build/rn/icons/Arro
 const theme = {
   appearances: {
     alternative: { 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' ],
+      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 ]
+    },
     inverse: { type: 'variant', values: [ true ] },
     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.',
@@ -23,13 +35,25 @@ const theme = {
     }
   },
   rules: [
+    {
+      if: { hover: true },
+      tokens: { color: '#1f5c09', iconDisplace: 4 }
+    },
     { if: { pressed: true }, tokens: { color: '#163e06' } },
     { if: { alternative: true }, tokens: { color: '#414547' } },
+    {
+      if: { alternative: true, hover: true },
+      tokens: { color: '#2c2e30' }
+    },
     {
       if: { alternative: true, pressed: true },
       tokens: { color: '#2c2e30' }
     },
     { if: { inverse: true }, tokens: { color: '#ffffff' } },
+    {
+      if: { hover: true, inverse: true },
+      tokens: { color: '#f4f4f7' }
+    },
     {
       if: { inverse: true, pressed: true },
       tokens: { color: '#e3e6e8' }
@@ -45,6 +69,19 @@ const theme = {
     {
       if: { size: 'micro' },
       tokens: { blockLineHeight: 1.33333333333, fontSize: 12, iconSize: 16 }
+    },
+    { if: { focus: true }, tokens: { outerBorderColor: '#2b8000' } },
+    {
+      if: { focus: true, pressed: true },
+      tokens: { outerBorderColor: '#163e06' }
+    },
+    {
+      if: { focus: true, inverse: true },
+      tokens: { outerBorderColor: '#ffffff' }
+    },
+    {
+      if: { alternative: true, focus: true },
+      tokens: { color: '#414547', outerBorderColor: '#414547' }
     }
   ],
   tokens: {

package/build/web/ColourToggle.js

@@ -1,13 +1,25 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Wed, 07 Feb 2024 19:08:44 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,22 @@ const theme = {
     }
   },
   rules: [
+    {
+      if: { hover: true },
+      tokens: {
+        bubbleBorderColor: '#b2b9bf',
+        bubbleBorderRadius: 45,
+        bubbleBorderWidth: 1
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        bubbleBorderColor: '#676e73',
+        bubbleBorderRadius: 45,
+        bubbleBorderWidth: 1
+      }
+    },
     {
       if: { pressed: true },
       tokens: {

package/build/web/Countdown.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Wed, 07 Feb 2024 19:08:44 GMT
  *
  */
 

package/build/web/DatePicker.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Wed, 07 Feb 2024 19:08:44 GMT
  *
  */
 

package/build/web/Disclaimer.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Wed, 07 Feb 2024 19:08:44 GMT
  *
  */
 

package/build/web/Divider.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Wed, 07 Feb 2024 19:08:44 GMT
  *
  */
 

package/build/web/ExpandCollapse.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Wed, 07 Feb 2024 19:08:44 GMT
  *
  */
 

package/build/web/ExpandCollapseControl.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Wed, 07 Feb 2024 19:08:44 GMT
  *
  */
 

package/build/web/ExpandCollapseMini.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Wed, 07 Feb 2024 19:08:44 GMT
  *
  */
 

package/build/web/ExpandCollapseMiniControl.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Wed, 07 Feb 2024 19:08:44 GMT
  *
  */
 

package/build/web/ExpandCollapsePanel.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Wed, 07 Feb 2024 19:08:44 GMT
  *
  */
 

package/build/web/Feedback.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Wed, 07 Feb 2024 19:08:44 GMT
  *
  */
 

package/build/web/Fieldset.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Wed, 07 Feb 2024 19:08:44 GMT
  *
  */
 

package/build/web/Footnote.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Wed, 07 Feb 2024 19:08:44 GMT
  *
  */
 

package/build/web/FootnoteLink.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Wed, 07 Feb 2024 19:08:44 GMT
  *
  */
 

package/build/web/HorizontalScrollButton.js

@@ -1,13 +1,25 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Wed, 07 Feb 2024 19:08:44 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,10 @@ const theme = {
     }
   },
   rules: [
+    {
+      if: { hover: true },
+      tokens: { borderColor: '#414547', iconColor: '#414547' }
+    },
     {
       if: { pressed: true },
       tokens: { backgroundColor: '#676e73', iconColor: '#ffffff' }

package/build/web/Icon.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Wed, 07 Feb 2024 19:08:44 GMT
  *
  */
 

package/build/web/IconButton.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Wed, 07 Feb 2024 19:08:44 GMT
  *
  */
 
@@ -31,6 +31,18 @@ const theme = {
       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' ],
+      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',
@@ -117,7 +129,54 @@ const theme = {
       if: { inverse: true },
       tokens: { borderColor: '#ffffff', iconColor: '#ffffff' }
     },
+    {
+      if: { hover: true },
+      tokens: { borderColor: '#414547', iconColor: '#414547', iconScale: 1.1 }
+    },
+    { if: { hover: true }, tokens: { iconScale: 1 } },
+    {
+      if: { hover: true, password: true },
+      tokens: {
+        backgroundColor: '#7c53a5',
+        borderColor: '#7c53a5',
+        iconColor: '#ffffff'
+      }
+    },
     { if: { password: true }, tokens: { borderColor: 'transparent' } },
+    {
+      if: { focus: true, password: true },
+      tokens: { borderColor: '#4b286d' }
+    },
+    {
+      if: { hover: true, inverse: true },
+      tokens: { borderColor: '#ffffff', iconColor: '#ffffff' }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        outerBorderColor: '#676e73',
+        outerBorderGap: 4,
+        outerBorderWidth: 1
+      }
+    },
+    {
+      if: { focus: true, password: true },
+      tokens: {
+        borderWidth: 3,
+        outerBorderColor: '#3f2a54',
+        outerBorderWidth: 0
+      }
+    },
+    {
+      if: { focus: true, inverse: true },
+      tokens: {
+        backgroundColor: 'transparent',
+        borderColor: '#ffffff',
+        iconColor: '#ffffff',
+        outerBorderColor: '#ffffff',
+        outerBorderWidth: 1
+      }
+    },
     {
       if: { pressed: true },
       tokens: {
@@ -187,6 +246,22 @@ const theme = {
         outerBorderColor: 'rgba(0, 0, 0, 0)'
       }
     },
+    {
+      if: { hover: true, raised: true },
+      tokens: { borderColor: '#b2b9bf', borderWidth: 3 }
+    },
+    {
+      if: { focus: true, raised: true },
+      tokens: { borderColor: '#4b286d', borderWidth: 3, iconColor: '#4b286d' }
+    },
+    {
+      if: { focus: true, pressed: true, raised: true },
+      tokens: {
+        backgroundColor: '#4b286d',
+        borderWidth: 0,
+        iconColor: '#ffffff'
+      }
+    },
     { if: { compact: true }, tokens: { outerBorderGap: 0 } }
   ],
   tokens: {

package/build/web/Image.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Wed, 07 Feb 2024 19:08:44 GMT
  *
  */
 

package/build/web/InputLabel.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Wed, 07 Feb 2024 19:08:44 GMT
  *
  */
 

package/build/web/InputSupports.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Wed, 07 Feb 2024 19:08:44 GMT
  *
  */
 

package/build/web/Link.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Wed, 07 Feb 2024 19:08:44 GMT
  *
  */
 
@@ -13,6 +13,18 @@ const theme = {
       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' ],
+      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 ]
+    },
     iconPosition: {
       description: 'Theme styles to be applied to icon links depending on where the icon is in relation to the link text',
       type: 'state',
@@ -46,10 +58,22 @@ const theme = {
   },
   rules: [
     { if: { iconPosition: 'left' }, tokens: { iconSpace: 2 } },
+    {
+      if: { focus: true },
+      tokens: { outerBorderColor: '#2b8000', outerBorderOutline: 'none' }
+    },
+    {
+      if: { hover: true },
+      tokens: { color: '#1f5c09', textLine: 'none' }
+    },
     {
       if: { pressed: true },
       tokens: { color: '#163e06', textLine: 'none' }
     },
+    {
+      if: { focus: true, pressed: true },
+      tokens: { outerBorderColor: '#163e06' }
+    },
     {
       if: { size: 'large' },
       tokens: { blockFontSize: 20, blockLineHeight: 1.25, iconSize: 24 }
@@ -69,17 +93,61 @@ const theme = {
       }
     },
     { if: { alternative: true }, tokens: { color: '#2c2e30' } },
+    {
+      if: { alternative: true, focus: true },
+      tokens: { color: '#414547', outerBorderColor: '#414547' }
+    },
+    {
+      if: { alternative: true, hover: true },
+      tokens: { color: '#2c2e30' }
+    },
     {
       if: { alternative: true, pressed: true },
       tokens: { color: '#2c2e30' }
     },
     { if: { inverse: true }, tokens: { color: '#ffffff' } },
+    {
+      if: { hover: true, inverse: true },
+      tokens: { color: '#f4f4f7' }
+    },
+    {
+      if: { focus: true, inverse: true },
+      tokens: { outerBorderColor: '#ffffff', outerBorderOutline: 'none' }
+    },
     {
       if: { inverse: true, pressed: true },
       tokens: { color: '#e3e6e8' }
     },
+    {
+      if: { focus: true, inverse: true, pressed: true },
+      tokens: { color: '#e3e6e8', outerBorderColor: '#e3e6e8' }
+    },
     { if: { light: true }, tokens: { color: '#676e73' } },
-    { if: { quiet: true }, tokens: { textLine: 'none' } }
+    {
+      if: { focus: true, light: true },
+      tokens: { color: '#676e73', outerBorderColor: '#676e73' }
+    },
+    {
+      if: { hover: true, light: true },
+      tokens: { color: '#414547', textLine: 'none' }
+    },
+    { if: { quiet: true }, tokens: { textLine: 'none' } },
+    {
+      if: { hover: true, quiet: true },
+      tokens: { color: '#1f5c09', textLine: 'underline' }
+    },
+    {
+      if: { alternative: true, hover: true, quiet: true },
+      tokens: { color: '#2c2e30', textLine: 'underline' }
+    },
+    {
+      if: { hover: true, inverse: true, quiet: true },
+      tokens: { color: '#f4f4f7', textLine: 'underline' }
+    },
+    {
+      if: { hover: true, light: true, quiet: true },
+      tokens: { color: '#414547', textLine: 'underline' }
+    }
   ],
   tokens: {
     alignSelf: 'flex-start',

package/build/web/List.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Wed, 07 Feb 2024 19:08:44 GMT
  *
  */
 

package/build/web/Listbox.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Wed, 07 Feb 2024 19:08:44 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,38 @@ const theme = {
     }
   },
   rules: [
+    {
+      if: { focus: true, hover: true, pressed: true },
+      tokens: {
+        groupBackgroundColor: '#e3e6e8',
+        groupBorderColor: 'rgba(0, 0, 0, 0)',
+        groupColor: '#676e73',
+        itemBackgroundColor: '#e3e6e8',
+        itemColor: '#676e73'
+      }
+    },
+    {
+      if: { focus: false, hover: true, pressed: false },
+      tokens: {
+        groupBackgroundColor: '#f4f4f7',
+        groupColor: '#4b286d',
+        itemBackgroundColor: '#f4f4f7',
+        itemColor: '#4b286d'
+      }
+    },
+    {
+      if: { focus: true, pressed: false },
+      tokens: {
+        groupBorderColor: '#4b286d',
+        groupBorderWidth: 1,
+        groupColor: '#4b286d',
+        itemBorderBottomColor: '#4b286d',
+        itemBorderLeftColor: '#4b286d',
+        itemBorderRightColor: '#4b286d',
+        itemBorderTopColor: '#4b286d',
+        itemColor: '#4b286d'
+      }
+    },
     {
       if: { expanded: true },
       tokens: { groupIcon: PaletteIconCaretUp }
@@ -67,6 +111,22 @@ const theme = {
         itemBorderTopWidth: 0
       }
     },
+    {
+      if: { focus: true, isChild: true },
+      tokens: {
+        itemBorderBottomColor: '#4b286d',
+        itemBorderBottomWidth: 1,
+        itemBorderLeftColor: '#4b286d',
+        itemBorderRightColor: '#4b286d',
+        itemBorderRightWidth: 1,
+        itemBorderTopColor: '#4b286d',
+        itemBorderTopWidth: 1
+      }
+    },
+    {
+      if: { hover: true, isChild: true },
+      tokens: { itemBorderLeftColor: '#4b286d' }
+    },
     {
       if: { current: true, isChild: true },
       tokens: { itemBorderLeftColor: '#4b286d' }

package/build/web/Modal.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Wed, 07 Feb 2024 19:08:44 GMT
  *
  */
 

package/build/web/MultiSelectFilter.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Wed, 07 Feb 2024 19:08:44 GMT
  *
  */