@telus-uds/theme-koodo 5.5.0 → 5.6.0

package/build/web/TermsAndConditions.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,23 @@ 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 ]
+    },
+    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',
@@ -32,6 +49,38 @@ const theme = {
     {
       if: { expanded: true },
       tokens: { icon: PaletteIconChevronUp }
+    },
+    {
+      if: { hover: true },
+      tokens: {
+        iconBackgroundColor: '#000000',
+        iconColor: '#ffffff',
+        iconOuterBorderGap: 2
+      }
+    },
+    {
+      if: { pressed: true },
+      tokens: {
+        iconBackgroundColor: '#404040',
+        iconColor: '#ffffff',
+        iconOuterBorderGap: 2
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        iconOuterBorderColor: '#000000',
+        iconOuterBorderGap: 2,
+        iconOuterBorderWidth: 1
+      }
+    },
+    {
+      if: { focus: true, pressed: true },
+      tokens: {
+        iconBackgroundColor: '#404040',
+        iconColor: '#404040',
+        iconOuterBorderGap: 2
+      }
     }
   ],
   tokens: {
@@ -65,6 +114,12 @@ const theme = {
     expandTitlePaddingLeft: 0,
     expandTitleUnderline: 'none',
     icon: PaletteIconChevronDown,
+    iconBackgroundColor: 'rgba(0, 0, 0, 0)',
+    iconBorderColor: 'rgba(0, 0, 0, 0)',
+    iconColor: '#000000',
+    iconOuterBorderColor: 'rgba(0, 0, 0, 0)',
+    iconOuterBorderGap: 0,
+    iconOuterBorderWidth: 0,
     listColor: '#000000',
     listFontName: 'StagSans',
     listFontSize: 14,

package/build/web/Testimonial.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/TextArea.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/TextInput.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
  *
  */
 
@@ -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',
@@ -44,7 +50,28 @@ const theme = {
   },
   rules: [
     {
-      if: { validation: 'success' },
+      if: { hover: true, inactive: null },
+      tokens: { backgroundColor: '#efefef', borderColor: '#000000' }
+    },
+    {
+      if: { hover: true, validation: 'success' },
+      tokens: {
+        backgroundColor: '#efefef',
+        borderColor: '#000000',
+        icon: PaletteIconCheckCircleFilled,
+        iconColor: '#1c7b2b'
+      }
+    },
+    {
+      if: { hover: true, validation: 'error' },
+      tokens: {
+        backgroundColor: '#efefef',
+        borderColor: '#000000',
+        iconColor: '#c9370b'
+      }
+    },
+    {
+      if: { hover: false, validation: 'success' },
       tokens: {
         borderColor: '#1c7b2b',
         icon: PaletteIconCheckCircleFilled,
@@ -52,7 +79,7 @@ const theme = {
       }
     },
     {
-      if: { validation: 'error' },
+      if: { hover: false, validation: 'error' },
       tokens: {
         borderColor: '#c9370b',
         icon: PaletteIconExclamationOctagon,

package/build/web/Timeline.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/Toast.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/ToggleSwitch.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
  *
  */
 
 import PaletteIconCheck from '@telus-uds/palette-koodo/build/rn/icons/Check'
 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,10 +37,24 @@ const theme = {
     }
   },
   rules: [
+    {
+      if: { hover: true },
+      tokens: { backgroundColor: '#c9c8c8', switchColor: '#666666' }
+    },
     {
       if: { pressed: true },
       tokens: { backgroundColor: '#c9c8c8', switchColor: '#595959' }
     },
+    {
+      if: { focus: true },
+      tokens: {
+        backgroundColor: '#c9c8c8',
+        outerBorderColor: '#000000',
+        outerBorderGap: 3,
+        outerBorderWidth: 1,
+        switchColor: '#666666'
+      }
+    },
     {
       if: { selected: true },
       tokens: {
@@ -39,10 +65,46 @@ const theme = {
         switchColor: '#000000'
       }
     },
+    {
+      if: { hover: true, selected: true },
+      tokens: { backgroundColor: '#efefef', switchColor: '#404040' }
+    },
     {
       if: { pressed: true, selected: true },
       tokens: { backgroundColor: '#c9c8c8', switchColor: '#666666' }
     },
+    {
+      if: { focus: true, selected: true },
+      tokens: {
+        backgroundColor: '#efefef',
+        icon: PaletteIconCheck,
+        iconColor: '#ffffff',
+        outerBorderColor: '#000000',
+        outerBorderWidth: 1,
+        switchBorderColor: 'rgba(0, 0, 0, 0)',
+        switchColor: '#000000'
+      }
+    },
+    {
+      if: { focus: true, pressed: true },
+      tokens: {
+        outerBorderColor: '#000000',
+        outerBorderGap: 3,
+        outerBorderWidth: 1
+      }
+    },
+    {
+      if: { focus: true, pressed: true, selected: true },
+      tokens: {
+        backgroundColor: '#c9c8c8',
+        icon: PaletteIconCheck,
+        iconColor: '#ffffff',
+        outerBorderColor: '#000000',
+        outerBorderGap: 3,
+        outerBorderWidth: 1,
+        switchColor: '#666666'
+      }
+    },
     {
       if: { inactive: true },
       tokens: {

package/build/web/ToggleSwitchGroup.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/Tooltip.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/TooltipButton.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 PaletteIconTooltip from '@telus-uds/palette-koodo/build/rn/icons/Tooltip'
 import PaletteIconTooltipSymbol from '@telus-uds/palette-koodo/build/rn/icons/TooltipSymbol'
 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,30 @@ const theme = {
     }
   },
   rules: [
+    {
+      if: { hover: true },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        iconColor: '#7a3dfc',
+        iconScale: 1.25
+      }
+    },
     {
       if: { inverse: true },
       tokens: { backgroundColor: 'rgba(0, 0, 0, 0)', iconColor: '#ffffff' }
     },
+    {
+      if: { hover: true, inverse: true },
+      tokens: { iconColor: '#ffffff' }
+    },
+    {
+      if: { focus: true, inverse: true },
+      tokens: { outerBorderColor: '#ffffff' }
+    },
+    {
+      if: { focus: true, inverse: null },
+      tokens: { outerBorderColor: '#000000' }
+    },
     {
       if: { inverse: true, pressed: true },
       tokens: {

package/build/web/Typography.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/Video.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/VideoButton.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/VideoControlBar.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/VideoMenu.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/VideoMiddleControlButton.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/VideoPicker.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/VideoPickerSlider.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/VideoPickerThumbnail.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,18 @@ const theme = {
     }
   },
   rules: [
+    {
+      if: { focus: true },
+      tokens: {
+        borderColor: '#595959',
+        borderWidth: 1,
+        outerBorderColor: '#000000'
+      }
+    },
+    {
+      if: { hover: true },
+      tokens: { borderColor: '#c9c8c8', borderWidth: 3 }
+    },
     {
       if: { pressed: true },
       tokens: {

package/build/web/VideoProgressBar.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/VideoVolumeSlider.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/WaffleGrid.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/index.js

@@ -107,5 +107,5 @@ export { default as VideoProgressBar } from './VideoProgressBar'
 export { default as VideoVolumeSlider } from './VideoVolumeSlider'
 export { default as WaffleGrid } from './WaffleGrid'
 export { default as spacingScale } from './spacingScale'
-export const metadata = { name: 'theme-koodo', themeTokensVersion: '2.50.0'}
+export const metadata = { name: 'theme-koodo', themeTokensVersion: '2.50.1'}
 export { default } from './theme'