@telus-uds/theme-allium 4.23.0 → 4.23.1

package/build/web/Select.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 
@@ -15,6 +15,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',
@@ -27,6 +33,7 @@ const theme = {
     }
   },
   rules: [
+    { if: { hover: true }, tokens: { outerBorderColor: '#e3e6e8' } },
     {
       if: { focus: true },
       tokens: { borderColor: '#7c53a5', borderWidth: 3 }

package/build/web/SideNav.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/SideNavItem.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 
@@ -18,6 +18,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 ]
+    },
     type: {
       description: '`parent` being the toggle button for an ItemsGroup, and `child` an element of the ItemGroup',
       type: 'state',
@@ -61,6 +73,14 @@ const theme = {
         paddingLeft: 16
       }
     },
+    {
+      if: { hover: true },
+      tokens: { backgroundColor: '#f4f4f7', color: '#4b286d' }
+    },
+    {
+      if: { focus: true },
+      tokens: { backgroundColor: '#f4f4f7', color: '#4b286d' }
+    },
     {
       if: { active: true, type: 'child' },
       tokens: {
@@ -68,6 +88,15 @@ const theme = {
         accentPadding: 16,
         backgroundColor: '#f4f4f7'
       }
+    },
+    {
+      if: { active: false, hover: true, type: 'child' },
+      tokens: {
+        accentBackgroundColor: '#ffffff',
+        accentOffset: 0,
+        accentWidth: 16,
+        color: '#414547'
+      }
     }
   ],
   tokens: {

package/build/web/SideNavItemsGroup.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/Skeleton.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/SkipLink.js

@@ -1,20 +1,31 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 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 ]
+    },
     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',
       values: [ true, false ]
     }
   },
-  rules: [],
+  rules: [
+    {
+      if: { focus: true, pressed: true },
+      tokens: { color: '#163e06', outlineColor: '#163e06' }
+    }
+  ],
   tokens: {
     backgroundColor: 'rgba(0, 0, 0, 0)',
     borderRadius: 4,

package/build/web/Spinner.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/SplashButton.js

@@ -1,14 +1,26 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 
 import PaletteIconPlaySolid from '@telus-uds/palette-allium/build/rn/icons/PlaySolid'
 const theme = {
-  appearances: {},
-  rules: [],
+  appearances: {
+    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 ]
+    }
+  },
+  rules: [
+    {
+      if: { hover: true },
+      tokens: { buttonContentChildrenBackground: 'rgba(0, 0, 0, 0.8)' }
+    }
+  ],
   tokens: {
     buttonContentBackground: 'rgba(0, 0, 0, 0.6)',
     buttonContentChildrenBackground: null,

package/build/web/SplashButtonWithDetails.js

@@ -1,14 +1,26 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 
 import PaletteIconPlaySolid from '@telus-uds/palette-allium/build/rn/icons/PlaySolid'
 const theme = {
-  appearances: {},
-  rules: [],
+  appearances: {
+    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 ]
+    }
+  },
+  rules: [
+    {
+      if: { hover: true },
+      tokens: { buttonContentChildrenBackground: 'rgba(255, 255, 255, 0.8)' }
+    }
+  ],
   tokens: {
     buttonBackground: '#ffffff',
     buttonBorderColor: '#e3e6e8',

package/build/web/StackView.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/StepTracker.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/StoryCard.js

@@ -1,20 +1,43 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 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',
       values: [ true, false ]
     }
   },
-  rules: [ { if: { pressed: true }, tokens: { backgroundColor: '#f4f4f7' } } ],
+  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/Table.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/Tabs.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/TabsItem.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/Tags.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/TagsItem.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 
@@ -9,6 +9,18 @@ import PaletteIconAdd from '@telus-uds/palette-allium/build/rn/icons/Add'
 import PaletteIconClose from '@telus-uds/palette-allium/build/rn/icons/Close'
 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',
@@ -37,6 +49,16 @@ const theme = {
         iconColor: '#ffffff'
       }
     },
+    {
+      if: { focus: true },
+      tokens: {
+        borderColor: '#676e73',
+        outerBorderColor: '#676e73',
+        outerBorderGap: 2,
+        outerBorderWidth: 2
+      }
+    },
+    { if: { hover: true }, tokens: { borderWidth: 3 } },
     {
       if: { selected: true },
       tokens: {
@@ -48,10 +70,22 @@ const theme = {
         iconColor: '#ffffff'
       }
     },
+    {
+      if: { hover: true, selected: true },
+      tokens: { backgroundColor: '#7c53a5', iconBackground: '#4b286d' }
+    },
     {
       if: { pressed: true, selected: true },
       tokens: { backgroundColor: '#3f2a54', iconBackground: '#7c53a5' }
     },
+    {
+      if: { focus: true, selected: true },
+      tokens: { outerBorderColor: '#4b286d' }
+    },
+    {
+      if: { focus: true, pressed: true, selected: true },
+      tokens: { iconBackground: '#7c53a5', outerBorderColor: '#3f2a54' }
+    },
     {
       if: { inactive: true },
       tokens: {

package/build/web/TermsAndConditions.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 
@@ -14,6 +14,17 @@ 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 ]
+    },
+    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',
+      values: [ true, false ]
+    },
     viewport: {
       description: 'The size label for the current screen viewport based on the current screen width',
       type: 'state',
@@ -29,7 +40,24 @@ const theme = {
         titlePaddingLeft: 6
       }
     },
-    { if: { expanded: true }, tokens: { icon: PaletteIconCaretUp } }
+    { if: { expanded: true }, tokens: { icon: PaletteIconCaretUp } },
+    {
+      if: { focus: true },
+      tokens: {
+        iconOuterBorderColor: '#414547',
+        iconOuterBorderGap: 4,
+        iconOuterBorderWidth: 1
+      }
+    },
+    {
+      if: { pressed: true },
+      tokens: {
+        iconBackgroundColor: '#414547',
+        iconBorderColor: '#ffffff',
+        iconColor: '#ffffff',
+        iconOuterBorderGap: 4
+      }
+    }
   ],
   tokens: {
     contentBorderColor: 'transparent',
@@ -62,6 +90,12 @@ const theme = {
     expandTitlePaddingLeft: 0,
     expandTitleUnderline: 'none',
     icon: PaletteIconCaretDown,
+    iconBackgroundColor: 'transparent',
+    iconBorderColor: '#676e73',
+    iconColor: '#676e73',
+    iconOuterBorderColor: 'transparent',
+    iconOuterBorderGap: 0,
+    iconOuterBorderWidth: null,
     listColor: '#414547',
     listFontName: 'HelveticaNow',
     listFontSize: 14,

package/build/web/Testimonial.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/TextArea.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/TextInput.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 
@@ -21,6 +21,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',
@@ -43,6 +49,10 @@ const theme = {
     }
   },
   rules: [
+    {
+      if: { hover: true, inactive: null },
+      tokens: { outerBackgroundColor: '#e3e6e8', outerBorderColor: '#e3e6e8' }
+    },
     {
       if: { validation: 'success' },
       tokens: {

package/build/web/Timeline.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/Toast.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/ToggleSwitch.js

@@ -1,13 +1,25 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 
 import PaletteIconCheckmark from '@telus-uds/palette-allium/build/rn/icons/Checkmark'
 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,7 +37,24 @@ const theme = {
     }
   },
   rules: [
+    { if: { hover: true }, tokens: { backgroundColor: '#414547' } },
     { if: { pressed: true }, tokens: { backgroundColor: '#2c2e30' } },
+    {
+      if: { focus: true },
+      tokens: {
+        outerBorderColor: '#676e73',
+        outerBorderGap: 3,
+        outerBorderWidth: 2
+      }
+    },
+    {
+      if: { focus: true, pressed: true },
+      tokens: {
+        outerBorderColor: '#2c2e30',
+        outerBorderGap: 3,
+        outerBorderWidth: 2
+      }
+    },
     {
       if: { selected: true },
       tokens: {
@@ -34,10 +63,22 @@ const theme = {
         iconColor: '#2b8000'
       }
     },
+    {
+      if: { hover: true, selected: true },
+      tokens: { backgroundColor: '#1f5c09', iconColor: '#1f5c09' }
+    },
     {
       if: { pressed: true, selected: true },
       tokens: { backgroundColor: '#163e06', iconColor: '#163e06' }
     },
+    {
+      if: { focus: true, selected: true },
+      tokens: { outerBorderColor: '#676e73', outerBorderWidth: 2 }
+    },
+    {
+      if: { focus: true, pressed: true, selected: true },
+      tokens: { outerBorderColor: '#163e06', outerBorderWidth: 2 }
+    },
     {
       if: { inactive: true },
       tokens: {

package/build/web/ToggleSwitchGroup.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/Tooltip.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 

package/build/web/TooltipButton.js

@@ -1,13 +1,25 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ * Generated on Mon, 29 Jan 2024 18:24:29 GMT
  *
  */
 
 import PaletteIconQuestion from '@telus-uds/palette-allium/build/rn/icons/Question'
 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 ]
+    },
     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.',
@@ -17,10 +29,16 @@ const theme = {
   },
   rules: [
     { if: { inverse: true }, tokens: { iconColor: '#ffffff' } },
+    { if: { hover: true }, tokens: { iconScale: 1.25 } },
     { if: { pressed: true }, tokens: { iconColor: '#676e73' } },
     {
       if: { inverse: true, pressed: true },
       tokens: { iconColor: '#b2b9bf' }
+    },
+    { if: { focus: true }, tokens: { outerBorderColor: '#676e73' } },
+    {
+      if: { focus: true, inverse: true },
+      tokens: { outerBorderColor: '#b2b9bf' }
     }
   ],
   tokens: {