@telus-uds/theme-koodo 5.5.0 → 5.6.0

package/build/web/ActivityIndicator.js

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

package/build/web/Badge.js

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

package/build/web/BlockQuote.js

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

package/build/web/Box.js

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

package/build/web/Breadcrumbs.js

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

package/build/web/Button.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:41:19 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 ]
+    },
     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',
@@ -86,10 +98,77 @@ const theme = {
         outerBackgroundColor: 'rgba(0, 0, 0, 0)'
       }
     },
+    {
+      if: { hover: true },
+      tokens: { backgroundColor: '#404040', color: '#ffffff' }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        borderBottomWidth: 1,
+        borderColor: '#000000',
+        borderLeftWidth: 1,
+        borderRightWidth: 1,
+        borderTopWidth: 1,
+        color: '#ffffff',
+        outerBorderColor: '#000000',
+        outerBorderGap: 4,
+        outerBorderWidth: 1
+      }
+    },
+    {
+      if: { hover: true, priority: 'low' },
+      tokens: { borderBottomWidth: 1, outerBorderColor: '#000000' }
+    },
+    {
+      if: { focus: true, priority: 'low' },
+      tokens: { color: '#000000' }
+    },
+    {
+      if: { focus: true, hover: true, priority: 'low' },
+      tokens: { color: '#ffffff' }
+    },
+    {
+      if: { danger: true, focus: true },
+      tokens: {
+        borderBottomWidth: 1,
+        borderColor: '#c9370b',
+        borderLeftWidth: 1,
+        borderRightWidth: 1,
+        borderTopWidth: 1,
+        borderWidth: 1,
+        color: '#c9370b',
+        outerBorderColor: '#c9370b',
+        outerBorderGap: 2
+      }
+    },
+    {
+      if: { hover: true, inverse: true },
+      tokens: {
+        backgroundColor: '#c9c8c8',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        color: '#404040',
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBorderWidth: 1
+      }
+    },
     {
       if: { inverse: true, pressed: true },
       tokens: { backgroundColor: '#c9c8c8', color: '#666666' }
     },
+    {
+      if: { focus: true, inverse: true },
+      tokens: {
+        borderBottomWidth: 1,
+        borderColor: 'rgba(0, 0, 0, 0)',
+        borderLeftWidth: 1,
+        borderRightWidth: 1,
+        borderTopWidth: 1,
+        color: '#000000',
+        outerBorderColor: '#ffffff',
+        outerBorderGap: 2
+      }
+    },
     {
       if: { danger: true, inverse: true },
       tokens: {
@@ -102,6 +181,15 @@ const theme = {
         color: '#c9370b'
       }
     },
+    {
+      if: { focus: true, inverse: true, pressed: true },
+      tokens: {
+        backgroundColor: '#c9c8c8',
+        borderColor: '#c9c8c8',
+        color: '#666666',
+        outerBorderGap: 2
+      }
+    },
     { if: { width: 'full' }, tokens: { width: '100%' } },
     {
       if: { viewport: [ 'xs' ], width: 'responsive' },
@@ -130,7 +218,31 @@ const theme = {
         textLine: 'underline'
       }
     },
+    {
+      if: { focus: true, text: true },
+      tokens: {
+        borderColor: 'rgba(0, 0, 0, 0)',
+        color: '#000000',
+        outerBorderColor: '#000000'
+      }
+    },
+    {
+      if: { hover: true, text: true },
+      tokens: { color: '#404040', textLine: 'none' }
+    },
     { if: { danger: true, text: true }, tokens: { color: '#c9370b' } },
+    {
+      if: { danger: true, focus: true, text: true },
+      tokens: {
+        borderColor: 'rgba(0, 0, 0, 0)',
+        color: '#c9370b',
+        outerBorderColor: '#c9370b'
+      }
+    },
+    {
+      if: { hover: true, priority: 'low' },
+      tokens: { borderColor: 'rgba(0, 0, 0, 0)', borderWidth: 0 }
+    },
     {
       if: { pressed: true, text: true },
       tokens: {
@@ -139,6 +251,18 @@ const theme = {
         textLine: 'none'
       }
     },
+    {
+      if: { danger: true, hover: true },
+      tokens: { backgroundColor: '#f3592b', color: '#ffffff' }
+    },
+    {
+      if: { danger: true, hover: true, text: true },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        color: '#f3592b',
+        outerBorderColor: 'rgba(0, 0, 0, 0)'
+      }
+    },
     {
       if: { danger: true, pressed: true },
       tokens: {
@@ -161,6 +285,18 @@ const theme = {
       if: { inverse: true, text: true },
       tokens: { backgroundColor: 'rgba(0, 0, 0, 0)', color: '#ffffff' }
     },
+    {
+      if: { focus: true, inverse: true, text: true },
+      tokens: {
+        borderColor: 'rgba(0, 0, 0, 0)',
+        color: '#ffffff',
+        outerBorderColor: '#ffffff'
+      }
+    },
+    {
+      if: { hover: true, inverse: true, text: true },
+      tokens: { color: '#c9c8c8' }
+    },
     {
       if: { inverse: true, pressed: true, text: true },
       tokens: {
@@ -196,6 +332,18 @@ const theme = {
       if: { priority: 'low', text: true },
       tokens: { color: '#7a3dfc' }
     },
+    {
+      if: { hover: true, priority: 'low', text: true },
+      tokens: { color: '#5b2bc2', outerBorderColor: 'rgba(0, 0, 0, 0)' }
+    },
+    {
+      if: { focus: true, priority: 'low', text: true },
+      tokens: {
+        color: '#7a3dfc',
+        outerBorderColor: '#7a3dfc',
+        outerBorderWidth: 1
+      }
+    },
     {
       if: { pressed: true, priority: 'low', text: true },
       tokens: {

package/build/web/ButtonDropdown.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:41:19 GMT
+ * Generated on Wed, 07 Feb 2024 19:07:57 GMT
  *
  */
 
@@ -9,6 +9,18 @@ import PaletteIconChevronDown from '@telus-uds/palette-koodo/build/rn/icons/Chev
 import PaletteIconChevronUp from '@telus-uds/palette-koodo/build/rn/icons/ChevronUp'
 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',
@@ -32,6 +44,7 @@ const theme = {
   },
   rules: [
     { if: { open: true }, tokens: { icon: PaletteIconChevronUp } },
+    { if: { focus: true }, tokens: { outerBorderColor: '#000000' } },
     {
       if: { pressed: true },
       tokens: {
@@ -41,6 +54,14 @@ const theme = {
         iconColor: '#666666'
       }
     },
+    {
+      if: { focus: false, hover: true, pressed: false },
+      tokens: { backgroundColor: '#404040', borderColor: 'rgba(0, 0, 0, 0)' }
+    },
+    {
+      if: { focus: true, hover: true, pressed: false },
+      tokens: { backgroundColor: '#404040', borderColor: 'rgba(0, 0, 0, 0)' }
+    },
     {
       if: { inactive: true },
       tokens: {
@@ -58,6 +79,32 @@ const theme = {
         iconColor: '#ffffff',
         outerBorderColor: 'transparent'
       }
+    },
+    {
+      if: { hover: true, selected: true },
+      tokens: { backgroundColor: '#404040' }
+    },
+    {
+      if: { focus: true, hover: false, selected: true },
+      tokens: {
+        backgroundColor: '#000000',
+        outerBorderColor: '#000000',
+        outerBorderGap: 2,
+        outerBorderWidth: 1
+      }
+    },
+    {
+      if: { hover: true, pressed: true, selected: true },
+      tokens: {
+        backgroundColor: '#404040',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        color: '#666666',
+        iconColor: '#666666'
+      }
+    },
+    {
+      if: { focus: true, pressed: true, selected: true },
+      tokens: { backgroundColor: '#404040', outerBorderColor: '#404040' }
     }
   ],
   tokens: {

package/build/web/ButtonGroup.js

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

package/build/web/ButtonGroupItem.js

@@ -1,13 +1,25 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 18 Jan 2024 22:41:19 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 ]
+    },
     iconPosition: {
       description: 'Theme styles to be applied to icon links depending on where the icon is in relation to the link text',
       type: 'state',
@@ -35,6 +47,15 @@ const theme = {
     }
   },
   rules: [
+    { if: { focus: true }, tokens: { outerBorderColor: '#000000' } },
+    {
+      if: { hover: true },
+      tokens: {
+        backgroundColor: '#404040',
+        borderColor: '#404040',
+        color: '#ffffff'
+      }
+    },
     {
       if: { selected: true },
       tokens: { backgroundColor: '#7a3dfc', color: '#ffffff' }
@@ -43,6 +64,18 @@ const theme = {
       if: { pressed: true },
       tokens: { backgroundColor: '#404040', color: '#666666' }
     },
+    {
+      if: { focus: true, selected: true },
+      tokens: {
+        backgroundColor: '#7a3dfc',
+        color: '#ffffff',
+        outerBorderColor: '#7a3dfc'
+      }
+    },
+    {
+      if: { hover: true, selected: true },
+      tokens: { backgroundColor: '#5b2bc2', color: '#ffffff' }
+    },
     {
       if: { pressed: true, selected: true },
       tokens: { backgroundColor: '#404040', color: '#666666' }

package/build/web/Callout.js

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

package/build/web/Card.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: [ 'alternative', 'subtle', 'grid', 'feature' ]
     },
     borderRadius: { type: 'variant', values: [ 'none', 'small', 'large' ] },
+    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 ]
+    },
     interactive: { type: 'variant', values: [ true ] },
     padding: {
       type: 'variant',
@@ -114,9 +126,20 @@ const theme = {
       }
     },
     {
-      if: { interactive: true, pressed: false },
+      if: { focus: false, interactive: true, pressed: false },
       tokens: { borderColor: '#ffffff', borderWidth: 2 }
     },
+    {
+      if: { hover: true, interactive: true },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+        borderColor: 'transparent'
+      }
+    },
+    {
+      if: { focus: true, interactive: true },
+      tokens: { borderColor: '#000000', borderWidth: 2 }
+    },
     {
       if: { interactive: true, pressed: true },
       tokens: {

package/build/web/Carousel.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/CarouselTabsPanelItem.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',
@@ -26,6 +38,22 @@ const theme = {
     }
   },
   rules: [
+    {
+      if: { hover: true },
+      tokens: {
+        borderBottomColor: '#404040',
+        borderBottomWidth: 2,
+        color: '#404040'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        borderBottomColor: '#000000',
+        borderBottomWidth: 4,
+        color: '#000000'
+      }
+    },
     {
       if: { pressed: true },
       tokens: {
@@ -34,6 +62,10 @@ const theme = {
         color: '#666666'
       }
     },
+    {
+      if: { focus: true, pressed: true },
+      tokens: { borderBottomWidth: 4 }
+    },
     {
       if: { inactive: true },
       tokens: {
@@ -50,6 +82,22 @@ const theme = {
         color: '#000000'
       }
     },
+    {
+      if: { hover: true, inverse: true },
+      tokens: {
+        borderBottomColor: '#ffffff',
+        borderBottomWidth: 2,
+        color: '#ffffff'
+      }
+    },
+    {
+      if: { focus: true, inverse: true },
+      tokens: {
+        borderBottomColor: '#ffffff',
+        borderBottomWidth: 4,
+        color: '#ffffff'
+      }
+    },
     {
       if: { inverse: true, pressed: true },
       tokens: {
@@ -59,6 +107,10 @@ const theme = {
       }
     },
     { if: { inverse: true }, tokens: { color: '#ffffff' } },
+    {
+      if: { focus: true, inverse: true, pressed: true },
+      tokens: { borderBottomWidth: 4 }
+    },
     {
       if: { inactive: true, inverse: true },
       tokens: {

package/build/web/CarouselThumbnail.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',
@@ -22,7 +34,12 @@ const theme = {
   rules: [
     {
       if: { viewport: [ 'xs', 'sm' ] },
-      tokens: { alignItems: 'flex-start', size: 48 }
+      tokens: { alignItems: 'flex-start', size: 32 }
+    },
+    { if: { hover: true }, tokens: { borderColor: '#404040' } },
+    {
+      if: { focus: true },
+      tokens: { borderColor: '#000000', borderWidth: 2 }
     },
     {
       if: { pressed: true },
@@ -39,7 +56,7 @@ const theme = {
     padding: 8,
     selectedBorderColor: '#000000',
     selectedBorderWidth: 2,
-    size: 72
+    size: 56
   }
 }
 export default theme

package/build/web/Checkbox.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',
@@ -21,6 +33,14 @@ const theme = {
     }
   },
   rules: [
+    {
+      if: { focus: true },
+      tokens: { inputOutlineColor: '#000000', inputOutlineWidth: 1 }
+    },
+    {
+      if: { hover: true },
+      tokens: { inputOutlineColor: '#000000', inputOutlineWidth: 1 }
+    },
     {
       if: { inactive: true },
       tokens: {