@telus-uds/theme-koodo 5.5.0 → 5.6.0

package/build/web/CheckboxCard.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',
+        checkboxOuterBorderColor: '#000000',
+        checkboxOuterBorderGap: 2,
+        checkboxOuterBorderWidth: 1,
+        outerBorderColor: '#c9c8c8',
+        outerBorderWidth: 2
+      }
+    },
     {
       if: { checked: true },
       tokens: {
@@ -51,6 +74,19 @@ const theme = {
         checkboxInputBorderWidth: 2
       }
     },
+    {
+      if: { focus: true },
+      tokens: {
+        borderColor: '#666666',
+        checkboxInputBorderColor: '#000000',
+        checkboxOuterBorderColor: '#000000',
+        checkboxOuterBorderGap: 2,
+        checkboxOuterBorderWidth: 1,
+        outerBorderColor: '#000000',
+        outerBorderGap: 2,
+        outerBorderWidth: 2
+      }
+    },
     {
       description: 'Pressed state matches hover state plus light grey background',
       if: { pressed: true },

package/build/web/CheckboxCardGroup.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/CheckboxGroup.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/ChevronLink.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
  *
  */
 
@@ -10,6 +10,18 @@ import PaletteIconChevronRight from '@telus-uds/palette-koodo/build/rn/icons/Che
 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,17 +35,53 @@ const theme = {
     }
   },
   rules: [
+    {
+      if: { hover: true },
+      tokens: { color: '#404040', iconDisplace: 4 }
+    },
     { if: { pressed: true }, tokens: { color: '#666666' } },
+    {
+      if: { focus: true },
+      tokens: { color: '#000000', outerBorderColor: '#000000' }
+    },
+    {
+      if: { focus: true, pressed: true },
+      tokens: { color: '#666666', outerBorderColor: '#666666' }
+    },
     { if: { alternative: true }, tokens: { color: '#7a3dfc' } },
+    {
+      if: { alternative: true, hover: true },
+      tokens: { color: '#5b2bc2' }
+    },
     {
       if: { alternative: true, pressed: true },
       tokens: { color: '#666666' }
     },
+    {
+      if: { alternative: true, focus: true },
+      tokens: { color: '#7a3dfc', outerBorderColor: '#7a3dfc' }
+    },
+    {
+      if: { alternative: true, focus: true, pressed: true },
+      tokens: { color: '#666666', outerBorderColor: '#666666' }
+    },
     { if: { inverse: true }, tokens: { color: '#ffffff' } },
+    {
+      if: { hover: true, inverse: true },
+      tokens: { color: '#efefef' }
+    },
     {
       if: { inverse: true, pressed: true },
       tokens: { color: '#c9c8c8' }
     },
+    {
+      if: { focus: true, inverse: true },
+      tokens: { color: '#ffffff', outerBorderColor: '#ffffff' }
+    },
+    {
+      if: { focus: true, inverse: true, pressed: true },
+      tokens: { color: '#c9c8c8', outerBorderColor: '#c9c8c8' }
+    },
     {
       if: { size: 'large' },
       tokens: { blockLineHeight: 1.4, fontSize: 20, iconSize: 20 }

package/build/web/ColourToggle.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',
@@ -20,6 +32,22 @@ const theme = {
     }
   },
   rules: [
+    {
+      if: { hover: true },
+      tokens: {
+        bubbleBorderColor: '#c9c8c8',
+        bubbleBorderRadius: 45,
+        bubbleBorderWidth: 1
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        bubbleBorderColor: '#7a3dfc',
+        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:41:20 GMT
+ * Generated on Wed, 07 Feb 2024 19:07:57 GMT
  *
  */
 

package/build/web/DatePicker.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/Disclaimer.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/Divider.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/ExpandCollapse.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/ExpandCollapseControl.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/ExpandCollapseMini.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/ExpandCollapseMiniControl.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/ExpandCollapsePanel.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/Feedback.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/Fieldset.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/Footnote.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/FootnoteLink.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/HorizontalScrollButton.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',
@@ -15,6 +27,14 @@ const theme = {
     }
   },
   rules: [
+    {
+      if: { hover: true },
+      tokens: {
+        backgroundColor: '#000000',
+        borderColor: '#000000',
+        iconColor: '#ffffff'
+      }
+    },
     {
       if: { pressed: true },
       tokens: {

package/build/web/Icon.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/IconButton.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
  *
  */
 
@@ -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',
@@ -115,9 +127,48 @@ const theme = {
     },
     {
       if: { inverse: true },
-      tokens: { borderColor: 'rgba(0, 0, 0, 0)', iconColor: '#ffffff' }
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        iconColor: '#ffffff'
+      }
+    },
+    {
+      if: { hover: true },
+      tokens: {
+        backgroundColor: '#000000',
+        iconColor: '#ffffff',
+        iconScale: 1.1
+      }
+    },
+    {
+      if: { hover: true, inverse: true },
+      tokens: { backgroundColor: '#ffffff', iconColor: '#000000' }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        backgroundColor: 'transparent',
+        borderColor: '#000000',
+        iconColor: '#000000',
+        outerBorderColor: 'rgba(0, 0, 0, 0)'
+      }
+    },
+    {
+      if: { focus: true, inverse: true },
+      tokens: {
+        backgroundColor: 'transparent',
+        borderColor: '#ffffff',
+        iconColor: '#ffffff',
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBorderWidth: 0
+      }
     },
     { if: { password: true }, tokens: { borderColor: 'transparent' } },
+    {
+      if: { focus: true, password: true },
+      tokens: { borderColor: '#000000', borderWidth: 3, outerBorderWidth: 0 }
+    },
     {
       if: { inactive: null, pressed: true },
       tokens: { backgroundColor: '#404040', iconColor: '#666666' }
@@ -157,11 +208,13 @@ const theme = {
         }
       }
     },
+    { if: { hover: true, raised: true }, tokens: {} },
     {
       if: { raised: true, size: 'large' },
       tokens: { iconSize: 24, padding: 12 }
     },
     { if: { raised: true, size: 'small' }, tokens: { padding: 8 } },
+    { if: { focus: true, raised: true }, tokens: { borderWidth: 3 } },
     {
       if: { pressed: true, raised: true },
       tokens: { backgroundColor: '#000000', iconColor: '#666666' }
@@ -178,7 +231,7 @@ const theme = {
     }
   ],
   tokens: {
-    backgroundColor: 'transparent',
+    backgroundColor: '#ffffff',
     borderBottomLeftRadius: null,
     borderBottomRightRadius: null,
     borderBottomWidth: null,

package/build/web/Image.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/InputLabel.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/InputSupports.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/Link.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 @@
 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 ]
+    },
     iconPosition: {
       description: 'Theme styles to be applied to icon links depending on where the icon is in relation to the link text',
       type: 'state',
@@ -33,16 +45,56 @@ const theme = {
   },
   rules: [
     { if: { iconPosition: 'left' }, tokens: { iconSpace: 2 } },
+    {
+      if: { focus: true },
+      tokens: {
+        color: '#000000',
+        outerBorderColor: '#000000',
+        outerBorderOutline: 'none'
+      }
+    },
+    {
+      if: { focus: true, pressed: true },
+      tokens: { color: '#666666', outerBorderColor: '#666666' }
+    },
+    {
+      if: { hover: true },
+      tokens: { color: '#404040', textLine: 'none' }
+    },
     {
       if: { pressed: true },
       tokens: { color: '#666666', textLine: 'none' }
     },
     { if: { alternative: true }, tokens: { color: '#7a3dfc' } },
+    {
+      if: { alternative: true, focus: true },
+      tokens: { color: '#7a3dfc', outerBorderColor: '#7a3dfc' }
+    },
+    {
+      if: { alternative: true, hover: true },
+      tokens: { color: '#5b2bc2' }
+    },
     {
       if: { alternative: true, pressed: true },
       tokens: { color: '#666666' }
     },
+    {
+      if: { alternative: true, focus: true, pressed: true },
+      tokens: { color: '#666666', outerBorderColor: '#666666' }
+    },
     { if: { inverse: true }, tokens: { color: '#ffffff' } },
+    {
+      if: { focus: true, inverse: true },
+      tokens: { color: '#ffffff', outerBorderColor: '#ffffff' }
+    },
+    {
+      if: { focus: true, inverse: true, pressed: true },
+      tokens: { color: '#c9c8c8', outerBorderColor: '#c9c8c8' }
+    },
+    {
+      if: { hover: true, inverse: true },
+      tokens: { color: '#efefef' }
+    },
     {
       if: { inverse: true, pressed: true },
       tokens: { color: '#c9c8c8' }
@@ -53,8 +105,8 @@ const theme = {
         blockFontName: 'StagSans',
         blockFontSize: 12,
         blockFontWeight: '600',
-        blockLineHeight: 1.6,
-        iconSize: 16
+        blockLineHeight: 1.33333333333,
+        iconSize: 12
       }
     },
     {
@@ -62,14 +114,26 @@ const theme = {
       tokens: {
         blockFontSize: 14,
         blockLineHeight: 1.42857142857,
-        iconSize: 20
+        iconSize: 14
       }
     },
     {
       if: { size: 'large' },
       tokens: { blockFontSize: 20, blockLineHeight: 1.4, iconSize: 24 }
     },
-    { if: { quiet: true }, tokens: { textLine: 'none' } }
+    { if: { quiet: true }, tokens: { textLine: 'none' } },
+    {
+      if: { hover: true, quiet: true },
+      tokens: { color: '#404040', textLine: 'underline' }
+    },
+    {
+      if: { alternative: true, hover: true, quiet: true },
+      tokens: { color: '#5b2bc2', textLine: 'underline' }
+    },
+    {
+      if: { hover: true, inverse: true, quiet: true },
+      tokens: { color: '#efefef', textLine: 'underline' }
+    }
   ],
   tokens: {
     alignSelf: 'flex-start',
@@ -80,7 +144,7 @@ const theme = {
     borderRadius: 4,
     color: '#000000',
     icon: null,
-    iconSize: 24,
+    iconSize: 16,
     iconSpace: 1,
     iconTranslateX: 0,
     iconTranslateY: 0,

package/build/web/List.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
  *
  */