@telus-uds/theme-koodo 5.5.0 → 5.6.0

package/build/web/RadioCard.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',
@@ -42,6 +54,17 @@ const theme = {
         paddingTop: 16
       }
     },
+    {
+      if: { hover: true },
+      tokens: {
+        borderColor: '#666666',
+        outerBorderColor: '#c9c8c8',
+        outerBorderWidth: 2,
+        radioOuterBorderColor: '#000000',
+        radioOuterBorderGap: 2,
+        radioOuterBorderWidth: 1
+      }
+    },
     {
       if: { checked: true },
       tokens: {
@@ -51,6 +74,19 @@ const theme = {
         radioInputBorderWidth: 2
       }
     },
+    {
+      if: { focus: true },
+      tokens: {
+        borderColor: '#666666',
+        outerBorderColor: '#000000',
+        outerBorderGap: 2,
+        outerBorderWidth: 2,
+        radioInputBorderColor: '#000000',
+        radioOuterBorderColor: '#000000',
+        radioOuterBorderGap: 2,
+        radioOuterBorderWidth: 1
+      }
+    },
     {
       description: 'Pressed state matches hover state plus light grey background',
       if: { pressed: true },

package/build/web/RadioCardGroup.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/RadioGroup.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/Ribbon.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/Search.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,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,7 @@ const theme = {
     }
   },
   rules: [
+    { if: { hover: true, inactive: null }, tokens: {} },
     {
       if: { focus: true },
       tokens: { borderColor: '#7a3dfc', borderWidth: 3, outerBorderWidth: 0 }

package/build/web/SearchButton.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 ]
+    },
     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: '#000000', iconColor: '#ffffff' }
     },
+    {
+      if: { hover: true },
+      tokens: {
+        backgroundColor: '#000000',
+        borderWidth: 0,
+        iconColor: '#ffffff'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        backgroundColor: 'transparent',
+        borderColor: '#000000',
+        borderWidth: 3,
+        iconColor: '#000000'
+      }
+    },
     {
       if: { pressed: true },
       tokens: {

package/build/web/Select.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
  *
  */
 
@@ -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',
@@ -49,6 +55,14 @@ const theme = {
         validationIconColor: '#c9370b'
       }
     },
+    {
+      if: { hover: true },
+      tokens: {
+        backgroundColor: '#efefef',
+        borderColor: '#000000',
+        outerBorderWidth: null
+      }
+    },
     {
       if: { inactive: true },
       tokens: {

package/build/web/SideNav.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/SideNavItem.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
  *
  */
 
@@ -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',
@@ -50,6 +62,8 @@ const theme = {
         backgroundColor: 'rgba(0, 0, 0, 0)'
       }
     },
+    { if: { hover: true }, tokens: { backgroundColor: '#efefef' } },
+    { if: { focus: true }, tokens: { backgroundColor: '#efefef' } },
     {
       if: { active: true, type: 'child' },
       tokens: {
@@ -63,6 +77,10 @@ const theme = {
         paddingBottom: 13,
         paddingTop: 13
       }
+    },
+    {
+      if: { active: false, hover: true, type: 'child' },
+      tokens: { accentBackgroundColor: 'rgba(0, 0, 0, 0)' }
     }
   ],
   tokens: {

package/build/web/SideNavItemsGroup.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/Skeleton.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/SkipLink.js

@@ -1,20 +1,31 @@
 /*
  *
  * 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 ]
+    },
     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: '#595959', outlineColor: '#595959' }
+    }
+  ],
   tokens: {
     backgroundColor: '#ffffff',
     borderRadius: 4,

package/build/web/Spinner.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/SplashButton.js

@@ -1,13 +1,20 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ * Generated on Wed, 07 Feb 2024 19:07:57 GMT
  *
  */
 
 import PaletteIconPlaySolid from '@telus-uds/palette-koodo/build/rn/icons/PlaySolid'
 const theme = {
-  appearances: {},
+  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: [],
   tokens: {
     buttonContentBackground: null,

package/build/web/SplashButtonWithDetails.js

@@ -1,14 +1,26 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ * Generated on Wed, 07 Feb 2024 19:07:57 GMT
  *
  */
 
 import PaletteIconPlaySolid from '@telus-uds/palette-koodo/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: null }
+    }
+  ],
   tokens: {
     buttonBackground: '#ffffff',
     buttonBorderColor: null,

package/build/web/StackView.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/StepTracker.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/StoryCard.js

@@ -1,20 +1,43 @@
 /*
  *
  * 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',
       values: [ true, false ]
     }
   },
-  rules: [ { if: { pressed: true }, tokens: { backgroundColor: '#efefef' } } ],
+  rules: [
+    { if: { hover: true }, tokens: { borderWidth: 2 } },
+    { if: { pressed: true }, tokens: { backgroundColor: '#efefef' } },
+    {
+      if: { focus: true },
+      tokens: {
+        outerBorderColor: '#000000',
+        outerBorderGap: 2,
+        outerBorderWidth: 2
+      }
+    }
+  ],
   tokens: {
     backgroundColor: '#ffffff',
     borderColor: '#c9c8c8',

package/build/web/Table.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/Tabs.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/TabsItem.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
  *
  */
 
@@ -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 ]
+    },
     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.',
@@ -36,10 +48,32 @@ const theme = {
         highlightColor: '#000000'
       }
     },
+    {
+      if: { hover: true },
+      tokens: {
+        backgroundColor: '#efefef',
+        highlightBarBorderWidth: 1,
+        highlightBarHeight: 1,
+        highlightColor: '#c9c8c8'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        backgroundColor: '#ffffff',
+        highlightBarBorderWidth: 1,
+        highlightBarHeight: 1,
+        highlightColor: '#666666'
+      }
+    },
     {
       if: { pressed: true },
       tokens: { backgroundColor: '#c9c8c8', highlightBarBorderWidth: 0 }
     },
+    {
+      if: { focus: true, selected: true },
+      tokens: { backgroundColor: '#ffffff', highlightColor: '#000000' }
+    },
     {
       if: { inverse: true },
       tokens: { backgroundColor: 'transparent', color: '#ffffff' }
@@ -53,10 +87,24 @@ const theme = {
         highlightColor: '#c9c8c8'
       }
     },
+    {
+      if: { hover: true, inverse: true },
+      tokens: { color: '#efefef' }
+    },
+    {
+      if: { focus: true, inverse: true },
+      tokens: {
+        color: '#ffffff',
+        highlightBarBorderWidth: 1,
+        highlightBarHeight: 1,
+        highlightColor: '#ffffff'
+      }
+    },
     {
       if: { inverse: true, pressed: true },
       tokens: { color: '#c9c8c8', highlightBarBorderWidth: 0 }
     },
+    { if: { focus: true, inverse: true, selected: true }, tokens: {} },
     { if: { equalWidth: true }, tokens: { maxWidth: null } }
   ],
   tokens: {

package/build/web/Tags.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/TagsItem.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
  *
  */
 
@@ -9,6 +9,18 @@ import PaletteIconAdd from '@telus-uds/palette-koodo/build/rn/icons/Add'
 import PaletteIconClose from '@telus-uds/palette-koodo/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',
@@ -39,6 +51,30 @@ const theme = {
         outerBorderWidth: 0
       }
     },
+    {
+      if: { focus: true },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: '#000000',
+        color: '#000000',
+        iconBackground: 'rgba(0, 0, 0, 0)',
+        iconColor: '#000000',
+        outerBorderColor: '#000000',
+        outerBorderGap: 3,
+        outerBorderWidth: 1
+      }
+    },
+    {
+      if: { hover: true },
+      tokens: {
+        backgroundColor: '#404040',
+        borderColor: '#404040',
+        borderWidth: 0,
+        color: '#ffffff',
+        iconBackground: '#404040',
+        iconColor: '#ffffff'
+      }
+    },
     {
       if: { selected: true },
       tokens: {
@@ -53,6 +89,26 @@ const theme = {
         outerBorderWidth: 0
       }
     },
+    {
+      if: { hover: true, selected: true },
+      tokens: { backgroundColor: '#404040', iconBackground: '#404040' }
+    },
+    {
+      if: { focus: true, selected: true },
+      tokens: {
+        backgroundColor: '#000000',
+        outerBorderColor: '#000000',
+        outerBorderWidth: 1
+      }
+    },
+    {
+      if: { focus: true, hover: true, selected: true },
+      tokens: { backgroundColor: '#404040', iconBackground: '#404040' }
+    },
+    {
+      if: { focus: true, pressed: true, selected: true },
+      tokens: { backgroundColor: '#404040', iconBackground: '#404040' }
+    },
     {
       if: { inactive: true },
       tokens: {